{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "selectable-card",
  "title": "Selectable card",
  "description": "card as a radio/checkbox choice",
  "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/selectable-card.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 { CheckIcon, type LucideIcon } from 'lucide-react-native';\nimport { Pressable, View } from 'react-native';\n\ntype Props = {\n  title: string;\n  description?: string;\n  icon?: LucideIcon;\n  /** Right-aligned detail, e.g. a price. */\n  detail?: string;\n  selected: boolean;\n  onPress: () => void;\n  /** `radio` shows a ring, `checkbox` a square. */\n  mode?: 'radio' | 'checkbox';\n  disabled?: boolean;\n  className?: string;\n};\n\n/** A whole card as a choice — plans, delivery options, payment methods. Selection is shape + colour. */\nexport function SelectableCard({ title, description, icon, detail, selected, onPress, mode = 'radio', disabled, className }: Props) {\n  return (\n    <Pressable\n      accessibilityRole={mode === 'radio' ? 'radio' : 'checkbox'}\n      // react-native-web renders the aria-* props and ignores accessibilityState; native merges both.\n      // `selected` stays native-only: aria-selected is not allowed on a radio or checkbox.\n      accessibilityState={{ selected }}\n      aria-checked={selected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      onPress={() => {\n        haptic('selection');\n        onPress();\n      }}\n      className={cn(\n        'min-h-14 flex-row items-center gap-3 rounded-lg border p-4 shadow-md',\n        selected ? 'border-primary bg-primary/5' : 'border-border bg-card active:bg-accent',\n        disabled && 'opacity-50',\n        className\n      )}>\n      {icon ? <Icon as={icon} size={22} className={selected ? 'text-primary' : 'text-muted-foreground'} /> : null}\n      <View className=\"flex-1\">\n        <Text className=\"font-medium\">{title}</Text>\n        {description ? <Text className=\"text-muted-foreground text-sm\">{description}</Text> : null}\n      </View>\n      {detail ? <Text className=\"font-semibold\">{detail}</Text> : null}\n      <View\n        className={cn(\n          'size-5 items-center justify-center border-2',\n          mode === 'radio' ? 'rounded-full' : 'rounded-sm',\n          selected ? 'border-primary bg-primary' : 'border-muted-foreground/50'\n        )}>\n        {selected ? <Icon as={CheckIcon} size={12} className=\"text-primary-foreground\" strokeWidth={3} /> : null}\n      </View>\n    </Pressable>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/selectable-card.tsx"
    }
  ],
  "meta": {
    "exports": [
      "SelectableCard"
    ],
    "api": "<SelectableCard title description? icon? detail? selected onPress mode=\"radio|checkbox\" />"
  },
  "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": [
    "inputs"
  ],
  "type": "registry:component"
}