{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "action-grid",
  "title": "Action grid",
  "description": "the row of shortcuts under a screen hero · 3–4 `items`, one row only, last tile is \"More\"",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-haptics",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/action-grid.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { haptic } from '@/lib/haptics';\nimport { cn } from '@/lib/utils';\nimport type { LucideIcon } from 'lucide-react-native';\nimport { Pressable, View } from 'react-native';\n\nexport type ActionTileItem = {\n  icon: LucideIcon;\n  label: string;\n  onPress: () => void;\n  /** A count, or `true` for a bare dot. */\n  badge?: number | boolean;\n  disabled?: boolean;\n};\n\ntype Props = {\n  /** 3 or 4. They share the width equally; more than 4 gets cramped. */\n  items: ActionTileItem[];\n  className?: string;\n};\n\n/**\n * The row of primary shortcuts under a screen's hero — Add funds · Pay · Send · More.\n *\n * Keep to one row: the last tile should be \"More\" rather than a second row of tiles.\n */\nexport function ActionGrid({ items, className }: Props) {\n  return (\n    <View className={cn('flex-row gap-3', className)}>\n      {items.map((item) => (\n        <Pressable\n          key={item.label}\n          onPress={() => {\n            haptic('selection');\n            item.onPress();\n          }}\n          disabled={item.disabled}\n          accessibilityRole=\"button\"\n          accessibilityLabel={item.label}\n          aria-disabled={!!item.disabled}\n          className={cn('flex-1 items-center gap-2 active:opacity-70', item.disabled && 'opacity-50')}>\n          <View className=\"bg-muted aspect-square w-full items-center justify-center rounded-full\">\n            <Icon as={item.icon} size={24} className=\"text-foreground\" />\n            {typeof item.badge === 'number' ? (\n              <View className=\"bg-destructive border-background absolute right-1.5 top-1.5 min-w-5 items-center justify-center rounded-full border-2 px-1\">\n                <Text className=\"text-destructive-foreground text-xs font-bold leading-4\">{item.badge}</Text>\n              </View>\n            ) : item.badge ? (\n              <View className=\"bg-destructive border-background absolute right-2 top-2 size-3 rounded-full border-2\" />\n            ) : null}\n          </View>\n          <Text className=\"text-center text-xs font-medium\" numberOfLines={2}>\n            {item.label}\n          </Text>\n        </Pressable>\n      ))}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/action-grid.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ActionGrid"
    ],
    "api": "<ActionGrid items={[{icon,label,onPress,badge?}]} />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "actions"
  ],
  "type": "registry:component"
}