{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:ui",
  "title": "Select",
  "description": "A select component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/select/select.tsx",
      "content": "import * as React from \"react\";\nimport { View, Text, Pressable, ScrollView, Platform } from \"react-native\";\nimport { Ionicons } from \"@expo/vector-icons\";\nimport { cn } from \"@/lib/utils\";\nimport { Drawer, useDrawer } from \"@/components/ui/drawer\";\n\ninterface SelectProps {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n  triggerClassName?: string;\n  contentClassName?: string;\n  size?: \"small\" | \"medium\" | \"large\" | \"full\" | number[];\n  initialSnapIndex?: number;\n  avoidKeyboard?: boolean;\n  children: React.ReactNode;\n}\n\ninterface SelectItemProps {\n  value: string;\n  children: React.ReactNode;\n  disabled?: boolean;\n  className?: string;\n  selectedValue?: string;\n}\n\ninterface SelectLabelProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface SelectGroupProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface SelectSeparatorProps {\n  className?: string;\n}\n\ninterface SelectContextValue {\n  selectedValue?: string;\n  onSelect: (value: string, label: React.ReactNode) => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  selectedValue: undefined,\n  onSelect: () => { },\n});\n\nconst Select = React.forwardRef<View, SelectProps>(\n  (\n    {\n      value,\n      onValueChange,\n      placeholder,\n      disabled = false,\n      className,\n      triggerClassName,\n      contentClassName,\n      size = \"medium\",\n      initialSnapIndex = 0,\n      avoidKeyboard = true,\n      children,\n    },\n    ref\n  ) => {\n    const [open, setOpen] = React.useState(false);\n    const [selectedValue, setSelectedValue] = React.useState(value);\n    const [selectedLabel, setSelectedLabel] =\n      React.useState<React.ReactNode>(\"\");\n\n    React.useEffect(() => {\n      if (value !== selectedValue) {\n        setSelectedValue(value);\n      }\n    }, [value, selectedValue]);\n    React.useEffect(() => {\n      if (selectedValue === undefined) return;\n\n      let found = false;\n\n      const findLabel = (child: React.ReactNode) => {\n        if (!React.isValidElement(child)) return;\n\n        const childElement = child as React.ReactElement<any>;\n\n        if (\n          childElement.type === SelectItem &&\n          childElement.props.value === selectedValue\n        ) {\n          setSelectedLabel(childElement.props.children);\n          found = true;\n          return;\n        }\n\n        if (childElement.type === SelectGroup) {\n          React.Children.forEach(childElement.props.children, findLabel);\n        }\n      };\n\n      React.Children.forEach(children, findLabel);\n\n      if (!found) {\n        setSelectedLabel(\"\");\n      }\n    }, [selectedValue, children]);\n\n    const handleSelect = React.useCallback(\n      (value: string, label: React.ReactNode) => {\n        setSelectedValue(value);\n        setSelectedLabel(label);\n\n        if (onValueChange) {\n          onValueChange(value);\n        }\n\n        setOpen(false);\n      },\n      [onValueChange]\n    );\n\n    const contextValue = React.useMemo(\n      () => ({\n        selectedValue,\n        onSelect: handleSelect,\n      }),\n      [selectedValue, handleSelect]\n    );\n\n    return (\n      <View ref={ref} className={cn(\"w-full\", className)}>\n        <Pressable\n          disabled={disabled}\n          onPress={() => setOpen(true)}\n          className={cn(\n            \"flex-row h-12 items-center justify-between rounded-md border border-input bg-transparent px-3 py-2\",\n            \"shadow-sm\",\n            \"active:opacity-70\",\n            disabled && \"opacity-50\",\n            Platform.OS === \"ios\"\n              ? \"ios:shadow-sm ios:shadow-foreground/10\"\n              : \"android:elevation-1\",\n            triggerClassName\n          )}\n        >\n          <Text\n            className={cn(\n              \"text-base flex-1\",\n              !selectedValue && \"text-muted-foreground\",\n              \"text-foreground\"\n            )}\n            numberOfLines={1}\n          >\n            {selectedValue && selectedLabel\n              ? selectedLabel\n              : placeholder || \"Select an option\"}\n          </Text>\n\n          <Ionicons\n            name=\"chevron-down\"\n            size={16}\n            color=\"#9CA3AF\"\n            style={{ marginLeft: 8, opacity: 0.7 }}\n          />\n        </Pressable>\n\n        <SelectContext.Provider value={contextValue}>\n          <Drawer\n            open={open}\n            onClose={() => setOpen(false)}\n            title={placeholder || \"Select an option\"}\n            size={size}\n            initialSnapIndex={initialSnapIndex}\n            contentClassName={contentClassName}\n            avoidKeyboard={avoidKeyboard}\n            closeOnBackdropPress={true}\n          >\n            <ScrollView\n              className=\"px-1 pt-2 pb-6\"\n              keyboardShouldPersistTaps=\"handled\"\n              nestedScrollEnabled={true}\n            >\n              {children}\n            </ScrollView>\n          </Drawer>\n        </SelectContext.Provider>\n      </View>\n    );\n  }\n);\n\nSelect.displayName = \"Select\";\n\nconst SelectGroup = React.forwardRef<View, SelectGroupProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <View ref={ref} className={cn(\"\", className)} {...props}>\n        {children}\n      </View>\n    );\n  }\n);\n\nSelectGroup.displayName = \"SelectGroup\";\n\nconst SelectItem = React.forwardRef<typeof Pressable, SelectItemProps>(\n  ({ className, children, value, disabled, ...props }, ref) => {\n    const { selectedValue, onSelect } = React.useContext(SelectContext);\n    const isSelected = selectedValue === value;\n    const drawer = useDrawer();\n\n    const handlePress = React.useCallback(() => {\n      if (disabled) return;\n\n      onSelect(value, children);\n\n      setTimeout(() => {\n        if (drawer && typeof drawer.close === \"function\") {\n          drawer.close();\n        }\n      }, 50);\n    }, [onSelect, value, children, disabled, drawer]);\n\n    return (\n      <Pressable\n        ref={ref as any}\n        disabled={disabled}\n        onPress={handlePress}\n        className={cn(\n          \"flex-row h-14 items-center justify-between px-4 py-2 active:bg-accent/50\",\n          isSelected ? \"bg-accent\" : \"\",\n          disabled && \"opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        <Text\n          className={cn(\n            \"text-base\",\n            isSelected\n              ? \"text-accent-foreground font-medium\"\n              : \"text-foreground\"\n          )}\n        >\n          {children}\n        </Text>\n\n        {isSelected && <Ionicons name=\"checkmark\" size={20} color=\"#4F46E5\" />}\n      </Pressable>\n    );\n  }\n);\n\nSelectItem.displayName = \"SelectItem\";\n\nconst SelectLabel = React.forwardRef<Text, SelectLabelProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <Text\n        ref={ref}\n        className={cn(\n          \"px-3 py-2 text-sm font-semibold text-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nSelectLabel.displayName = \"SelectLabel\";\n\nconst SelectSeparator = React.forwardRef<View, SelectSeparatorProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <View\n        ref={ref}\n        className={cn(\"h-px bg-muted mx-2 my-1\", className)}\n        {...props}\n      />\n    );\n  }\n);\n\nSelectSeparator.displayName = \"SelectSeparator\";\n\nexport { Select, SelectGroup, SelectItem, SelectLabel, SelectSeparator };\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Select, SelectItem } from \"@/components/ui/select\";\nimport * as React from \"react\";\n\nexport default function SelectExample() {\n    const [fruit, setFruit] = React.useState<string>(\"\");\n\n    return (\n        <Select\n            placeholder=\"Select a fruit\"\n            value={fruit}\n            onValueChange={setFruit}\n            size=\"medium\"\n        >\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"orange\">Orange</SelectItem>\n            <SelectItem value=\"strawberry\">Strawberry</SelectItem>\n            <SelectItem value=\"grape\">Grape</SelectItem>\n        </Select>\n    );\n}\n",
  "customPreview": "import { Select, SelectGroup, SelectItem, SelectLabel, SelectSeparator } from \"@/components/ui/select\";\nimport * as React from \"react\";\nimport { KeyboardAvoidingView, Platform, ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function SelectExample() {\n    const [fruit, setFruit] = React.useState<string>(\"\");\n    const [pet, setPet] = React.useState<string>(\"\");\n    const [country, setCountry] = React.useState<string>(\"fr\");\n    const [framework, setFramework] = React.useState<string>(\"\");\n\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <KeyboardAvoidingView\n                    behavior={Platform.OS === \"ios\" ? \"padding\" : \"height\"}\n                    style={{ flex: 1 }}\n                    keyboardVerticalOffset={100}\n                >\n                    <ScrollView\n                        className=\"p-4\"\n                        keyboardShouldPersistTaps=\"handled\"\n                        nestedScrollEnabled={true}\n                    >\n                        <View className=\"mb-6\">\n                            <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                                Select\n                            </Text>\n                            <Text className=\"text-base mb-6 text-muted-foreground\">\n                                Displays a dropdown menu for selecting a value from a list of options.\n                            </Text>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Default Select\n                            </Text>\n                            <Select\n                                placeholder=\"Select a fruit\"\n                                value={fruit}\n                                onValueChange={setFruit}\n                                size=\"medium\"\n                            >\n                                <SelectItem value=\"apple\">Apple</SelectItem>\n                                <SelectItem value=\"banana\">Banana</SelectItem>\n                                <SelectItem value=\"orange\">Orange</SelectItem>\n                                <SelectItem value=\"strawberry\">Strawberry</SelectItem>\n                                <SelectItem value=\"grape\">Grape</SelectItem>\n                            </Select>\n                            <Text className=\"text-sm mt-2 text-muted-foreground\">\n                                {fruit ? `You selected: ${fruit}` : \"No fruit selected\"}\n                            </Text>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Label\n                            </Text>\n                            <View>\n                                <Text className=\"text-sm font-medium mb-2 text-foreground\">\n                                    Select a pet\n                                </Text>\n                                <Select\n                                    placeholder=\"Select a pet\"\n                                    value={pet}\n                                    onValueChange={setPet}\n                                    size=\"medium\"\n                                >\n                                    <SelectItem value=\"dog\">Dog</SelectItem>\n                                    <SelectItem value=\"cat\">Cat</SelectItem>\n                                    <SelectItem value=\"rabbit\">Rabbit</SelectItem>\n                                    <SelectItem value=\"hamster\">Hamster</SelectItem>\n                                    <SelectItem value=\"turtle\">Turtle</SelectItem>\n                                </Select>\n                                <Text className=\"text-sm mt-2 text-muted-foreground\">\n                                    {pet ? `Selected pet: ${pet}` : \"No pet selected\"}\n                                </Text>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Groups and Separator\n                            </Text>\n                            <Select\n                                placeholder=\"Select a framework\"\n                                value={framework}\n                                onValueChange={setFramework}\n                                size=\"large\"\n                            >\n                                <SelectLabel>Frontend</SelectLabel>\n                                <SelectGroup>\n                                    <SelectItem value=\"react\">React</SelectItem>\n                                    <SelectItem value=\"vue\">Vue</SelectItem>\n                                    <SelectItem value=\"angular\">Angular</SelectItem>\n                                </SelectGroup>\n                                <SelectSeparator />\n                                <SelectLabel>Backend</SelectLabel>\n                                <SelectGroup>\n                                    <SelectItem value=\"node\">Node.js</SelectItem>\n                                    <SelectItem value=\"django\">Django</SelectItem>\n                                    <SelectItem value=\"laravel\">Laravel</SelectItem>\n                                </SelectGroup>\n                            </Select>\n                            <Text className=\"text-sm mt-2 text-muted-foreground\">\n                                {framework ? `Selected framework: ${framework}` : \"No framework selected\"}\n                            </Text>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Default Value\n                            </Text>\n                            <Select\n                                placeholder=\"Select a country\"\n                                value={country}\n                                onValueChange={setCountry}\n                                size=\"medium\"\n                            >\n                                <SelectItem value=\"us\">United States</SelectItem>\n                                <SelectItem value=\"ca\">Canada</SelectItem>\n                                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                                <SelectItem value=\"fr\">France</SelectItem>\n                                <SelectItem value=\"de\">Germany</SelectItem>\n                                <SelectItem value=\"jp\">Japan</SelectItem>\n                            </Select>\n                            <Text className=\"text-sm mt-2 text-muted-foreground\">\n                                {`Selected country: ${country}`}\n                            </Text>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Disabled Select\n                            </Text>\n                            <Select\n                                placeholder=\"Select an option\"\n                                disabled={true}\n                                size=\"medium\"\n                            >\n                                <SelectItem value=\"option1\">Option 1</SelectItem>\n                                <SelectItem value=\"option2\">Option 2</SelectItem>\n                                <SelectItem value=\"option3\">Option 3</SelectItem>\n                            </Select>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Disabled Items\n                            </Text>\n                            <Select\n                                placeholder=\"Select a day\"\n                                onValueChange={(value) => console.log(value)}\n                                size=\"medium\"\n                            >\n                                <SelectItem value=\"monday\">Monday</SelectItem>\n                                <SelectItem value=\"tuesday\">Tuesday</SelectItem>\n                                <SelectItem value=\"wednesday\" disabled>Wednesday (Disabled)</SelectItem>\n                                <SelectItem value=\"thursday\">Thursday</SelectItem>\n                                <SelectItem value=\"friday\">Friday</SelectItem>\n                                <SelectItem value=\"saturday\" disabled>Saturday (Disabled)</SelectItem>\n                                <SelectItem value=\"sunday\" disabled>Sunday (Disabled)</SelectItem>\n                            </Select>\n                        </View>\n                    </ScrollView>\n                </KeyboardAvoidingView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}