{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:ui",
  "title": "Select",
  "description": "Modal-based option picker (wave 1; anchor popover later).",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/text.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/theme.json"
  ],
  "dependencies": [
    "lucide-react-native"
  ],
  "files": [
    {
      "path": "registry/shared/ui/select.tsx",
      "type": "registry:ui",
      "target": "components/ui/select.tsx",
      "content": "import { Check, ChevronDown } from 'lucide-react-native';\nimport { useContext, useState } from 'react';\nimport {\n  Modal,\n  Pressable,\n  ScrollView,\n  View,\n  type PressableProps,\n} from 'react-native';\nimport { Text } from '@/components/ui/text';\nimport { cn, FormFieldContext, useIconColor, useThemeColor } from '@/lib/utils';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\nexport interface SelectProps extends Omit<PressableProps, 'children'> {\n  options: SelectOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  /** Mirrors shadcn `aria-invalid` — destructive trigger border. Auto-detected from FormField error. */\n  invalid?: boolean;\n  className?: string;\n  triggerClassName?: string;\n}\n\n/** Modal-based select (wave 1). Anchor-positioned popover is a wave-2 upgrade. */\nexport function Select({\n  options,\n  value,\n  onValueChange,\n  placeholder = 'Select…',\n  invalid,\n  className,\n  triggerClassName,\n  disabled,\n  style,\n  ...props\n}: SelectProps) {\n  const [open, setOpen] = useState(false);\n  const iconColor = useIconColor();\n  const colors = useThemeColor();\n  const field = useContext(FormFieldContext);\n  const isInvalid = invalid ?? !!field?.error;\n  const selected = options.find((o) => o.value === value);\n\n  return (\n    <View className={className}>\n      <Pressable\n        accessibilityRole=\"button\"\n        accessibilityState={{ disabled: !!disabled }}\n        disabled={disabled}\n        onPress={() => setOpen(true)}\n        className={cn(\n          'h-10 flex-row items-center justify-between rounded-md border border-input bg-background px-3 dark:bg-input/30',\n          disabled && 'opacity-50',\n          triggerClassName\n        )}\n        style={(state) => [\n          { borderCurve: 'continuous' },\n          isInvalid && { borderColor: colors.destructive },\n          typeof style === 'function' ? style(state) : style,\n        ]}\n        {...props}\n      >\n        <Text\n          className={cn(\n            'text-sm',\n            selected ? 'text-foreground' : 'text-muted-foreground'\n          )}\n        >\n          {selected?.label ?? placeholder}\n        </Text>\n        <ChevronDown size={16} color={iconColor} />\n      </Pressable>\n\n      <Modal\n        visible={open}\n        transparent\n        animationType=\"fade\"\n        onRequestClose={() => setOpen(false)}\n      >\n        <Pressable\n          className=\"flex-1 justify-end bg-black/50\"\n          onPress={() => setOpen(false)}\n          accessibilityLabel=\"Close\"\n        >\n          <Pressable\n            className=\"rounded-t-2xl bg-background p-2\"\n            onPress={(e) => e.stopPropagation()}\n          >\n            <ScrollView style={{ maxHeight: 320 }}>\n              {options.map((opt) => {\n                const active = opt.value === value;\n                return (\n                  <Pressable\n                    key={opt.value}\n                    accessibilityRole=\"button\"\n                    onPress={() => {\n                      onValueChange?.(opt.value);\n                      setOpen(false);\n                    }}\n                    className={cn(\n                      'flex-row items-center justify-between rounded-md px-3 py-3'\n                    )}\n                    style={\n                      active ? { backgroundColor: colors.accent } : undefined\n                    }\n                  >\n                    <Text\n                      className={cn(\n                        'text-base',\n                        active ? 'text-accent-foreground' : 'text-foreground'\n                      )}\n                    >\n                      {opt.label}\n                    </Text>\n                    {active && <Check size={16} color={iconColor} />}\n                  </Pressable>\n                );\n              })}\n            </ScrollView>\n          </Pressable>\n        </Pressable>\n      </Modal>\n    </View>\n  );\n}\n"
    }
  ]
}