{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "type": "registry:ui",
  "title": "Combobox",
  "description": "A combobox component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/combobox/combobox.tsx",
      "content": "import * as React from \"react\";\nimport {\n  View,\n  Text,\n  Pressable,\n  Platform,\n  FlatList,\n  TextInput,\n} from \"react-native\";\nimport { Ionicons } from \"@expo/vector-icons\";\nimport { cn } from \"@/lib/utils\";\nimport { Drawer, useDrawer } from \"@/components/ui/drawer\";\nimport { Input } from \"@/components/ui/input\";\n\ninterface ComboboxProps {\n  value?: string | string[];\n  onValueChange?: (value: string | string[]) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  disabled?: boolean;\n  className?: string;\n  triggerClassName?: string;\n  contentClassName?: string;\n  multiple?: boolean;\n  items: {\n    value: string;\n    label: string;\n    disabled?: boolean;\n  }[];\n  filter?: (item: ComboboxProps[\"items\"][0], search: string) => boolean;\n  emptyText?: string;\n}\n\ninterface ComboboxItemProps {\n  value: string;\n  children: React.ReactNode;\n  disabled?: boolean;\n  className?: string;\n  onSelect?: (value: string) => void;\n  selectedValue?: string | string[];\n  multiple?: boolean;\n}\n\ninterface ComboboxLabelProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface ComboboxGroupProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\ninterface ComboboxSeparatorProps {\n  className?: string;\n}\n\nconst ComboboxSearchInput = ({\n  placeholder = \"Search...\",\n  value,\n  onChangeText,\n}: {\n  placeholder?: string;\n  value: string;\n  onChangeText: (text: string) => void;\n}) => {\n  const inputRef = React.useRef<TextInput>(null);\n\n  const handleClear = () => {\n    onChangeText(\"\");\n    inputRef.current?.clear();\n  };\n\n  return (\n    <View className=\"px-4 py-2\">\n      <View className=\"relative mb-2\">\n        <Input\n          ref={inputRef}\n          placeholder={placeholder}\n          placeholderTextColor=\"#9CA3AF\"\n          className=\"pl-10\"\n          value={value}\n          onChangeText={onChangeText}\n          autoCapitalize=\"none\"\n          autoCorrect={false}\n          returnKeyType=\"search\"\n        />\n        <View className=\"absolute left-3 top-1/2 transform -translate-y-1/2\">\n          <Ionicons name=\"search\" size={20} color=\"#9CA3AF\" />\n        </View>\n        {value.length > 0 && (\n          <View className=\"absolute right-3 top-1/2 transform -translate-y-1/2\">\n            <Pressable onPress={handleClear} hitSlop={8}>\n              <Ionicons name=\"close-circle\" size={18} color=\"#9CA3AF\" />\n            </Pressable>\n          </View>\n        )}\n      </View>\n    </View>\n  );\n};\n\nconst SelectedItemsBadge = ({ count }: { count: number }) => {\n  if (count === 0) return null;\n\n  return (\n    <View className=\"flex-row items-center\">\n      <View className=\"bg-primary py-0.5 px-2 rounded-full\">\n        <Text className=\"text-primary-foreground text-xs font-medium\">\n          {count}\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nconst SelectedValuesList = ({\n  values,\n  labels,\n  onRemove,\n}: {\n  values: string[];\n  labels: string[];\n  onRemove: (value: string) => void;\n}) => {\n  if (values.length === 0) return null;\n\n  return (\n    <View className=\"mt-4 px-2\">\n      <Text className=\"text-sm font-medium text-foreground mb-2\">\n        Selected items:\n      </Text>\n      <View className=\"flex-row flex-wrap\">\n        {values.map((value, index) => (\n          <View\n            key={value}\n            className=\"flex-row items-center bg-secondary/20 mr-2 mb-2 py-1 px-2 rounded-md\"\n          >\n            <Text className=\"text-foreground mr-1\">{labels[index]}</Text>\n            <Pressable\n              onPress={() => onRemove(value)}\n              hitSlop={8}\n              className=\"p-1\"\n            >\n              <Ionicons name=\"close-circle\" size={16} color=\"#71717a\" />\n            </Pressable>\n          </View>\n        ))}\n      </View>\n    </View>\n  );\n};\n\nconst Combobox = React.forwardRef<View, ComboboxProps>(\n  (\n    {\n      value,\n      onValueChange,\n      placeholder = \"Select an option\",\n      searchPlaceholder = \"Search...\",\n      disabled = false,\n      className,\n      triggerClassName,\n      contentClassName,\n      items = [],\n      filter,\n      emptyText = \"No results found.\",\n      multiple = false,\n    },\n    ref\n  ) => {\n    const [isOpen, setIsOpen] = React.useState(false);\n    const [searchQuery, setSearchQuery] = React.useState(\"\");\n    const [selectedValues, setSelectedValues] = React.useState<string[]>(\n      multiple && Array.isArray(value) ? value : value ? [value as string] : []\n    );\n    const previousMultipleRef = React.useRef(multiple);\n\n    const filteredItems = React.useMemo(() => {\n      if (!searchQuery) return items;\n\n      const defaultFilter = (item: ComboboxProps[\"items\"][0], query: string) =>\n        item.label.toLowerCase().includes(query.toLowerCase());\n\n      const filterFn = filter || defaultFilter;\n\n      return items.filter((item) => filterFn(item, searchQuery));\n    }, [items, searchQuery, filter]);\n\n    React.useEffect(() => {\n      if (!isOpen) {\n        setSearchQuery(\"\");\n      }\n    }, [isOpen]);\n\n    React.useEffect(() => {\n      if (previousMultipleRef.current !== multiple) {\n        setIsOpen(false);\n        setSearchQuery(\"\");\n        previousMultipleRef.current = multiple;\n      }\n    }, [multiple]);\n\n    React.useEffect(() => {\n      if (multiple && Array.isArray(value)) {\n        setSelectedValues(value);\n      } else if (!multiple && typeof value === \"string\") {\n        setSelectedValues(value ? [value] : []);\n      }\n    }, [value, multiple]);\n\n    const selectedLabels = React.useMemo(() => {\n      return selectedValues.map(\n        (val) => items.find((item) => item.value === val)?.label || \"\"\n      );\n    }, [selectedValues, items]);\n\n    const displayText = React.useMemo(() => {\n      if (selectedValues.length === 0) return placeholder;\n\n      if (multiple) {\n        if (selectedValues.length === 1) {\n          return selectedLabels[0];\n        }\n        return `${selectedValues.length} items selected`;\n      }\n\n      return selectedLabels[0];\n    }, [selectedValues, selectedLabels, multiple, placeholder]);\n\n    const handleSelect = React.useCallback(\n      (itemValue: string) => {\n        if (multiple) {\n          setSelectedValues((prev) => {\n            const valueExists = prev.includes(itemValue);\n            const newValues = valueExists\n              ? prev.filter((v) => v !== itemValue)\n              : [...prev, itemValue];\n\n            if (onValueChange) {\n              onValueChange(newValues);\n            }\n            return newValues;\n          });\n        } else {\n          setSelectedValues([itemValue]);\n          if (onValueChange) {\n            onValueChange(itemValue);\n          }\n        }\n      },\n      [onValueChange, multiple]\n    );\n\n    const handleRemoveValue = React.useCallback(\n      (valueToRemove: string) => {\n        setSelectedValues((prev) => {\n          const newValues = prev.filter((v) => v !== valueToRemove);\n          if (onValueChange) {\n            onValueChange(multiple ? newValues : newValues[0] || \"\");\n          }\n          return newValues;\n        });\n      },\n      [onValueChange, multiple]\n    );\n\n    const handleClose = React.useCallback(() => {\n      setIsOpen(false);\n    }, []);\n\n    return (\n      <View ref={ref} className={cn(\"w-full\", className)}>\n        <Pressable\n          disabled={disabled}\n          onPress={() => setIsOpen(true)}\n          className={cn(\n            \"flex-row min-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          <View className=\"flex-1 flex-row items-center justify-between\">\n            <Text\n              className={cn(\n                \"text-base flex-1\",\n                selectedValues.length === 0 && \"text-muted-foreground\",\n                \"text-foreground\"\n              )}\n              numberOfLines={1}\n            >\n              {displayText}\n            </Text>\n\n            {multiple && selectedValues.length > 0 && (\n              <SelectedItemsBadge count={selectedValues.length} />\n            )}\n          </View>\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        <Drawer\n          open={isOpen}\n          onClose={handleClose}\n          title={placeholder}\n          snapPoints={[0.5, 0.8]}\n          initialSnapIndex={0}\n          contentClassName={contentClassName}\n        >\n          <ComboboxSearchInput\n            placeholder={searchPlaceholder}\n            value={searchQuery}\n            onChangeText={setSearchQuery}\n          />\n\n          {filteredItems.length === 0 ? (\n            <View className=\"p-4 items-center justify-center\">\n              <Text className=\"text-muted-foreground text-base\">\n                {emptyText}\n              </Text>\n            </View>\n          ) : (\n            <FlatList\n              data={filteredItems}\n              keyExtractor={(item) => item.value}\n              keyboardShouldPersistTaps=\"handled\"\n              nestedScrollEnabled={true}\n              renderItem={({ item }) => (\n                <ComboboxItem\n                  value={item.value}\n                  disabled={item.disabled}\n                  selectedValue={\n                    multiple ? selectedValues : selectedValues[0] || \"\"\n                  }\n                  onSelect={handleSelect}\n                  multiple={multiple}\n                >\n                  {item.label}\n                </ComboboxItem>\n              )}\n              contentContainerStyle={{ paddingBottom: 20 }}\n            />\n          )}\n\n          {multiple && selectedValues.length > 0 && (\n            <SelectedValuesList\n              values={selectedValues}\n              labels={selectedLabels}\n              onRemove={handleRemoveValue}\n            />\n          )}\n        </Drawer>\n      </View>\n    );\n  }\n);\n\nCombobox.displayName = \"Combobox\";\n\nconst ComboboxGroup = React.forwardRef<View, ComboboxGroupProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <View ref={ref} className={cn(\"\", className)} {...props}>\n        {children}\n      </View>\n    );\n  }\n);\n\nComboboxGroup.displayName = \"ComboboxGroup\";\n\nconst ComboboxItem = React.forwardRef<typeof Pressable, ComboboxItemProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      disabled,\n      onSelect,\n      selectedValue,\n      multiple,\n      ...props\n    },\n    ref\n  ) => {\n    const isSelected =\n      multiple && Array.isArray(selectedValue)\n        ? selectedValue.includes(value)\n        : selectedValue === value;\n\n    const drawer = useDrawer();\n\n    const handlePress = React.useCallback(() => {\n      if (disabled) return;\n\n      if (onSelect) {\n        onSelect(value);\n      }\n\n      if (!multiple && drawer && typeof drawer.close === 'function') {\n        requestAnimationFrame(() => {\n          drawer.close();\n        });\n      }\n    }, [disabled, drawer, multiple, onSelect, value]);\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-primary/10\" : \"\",\n          disabled && \"opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        <Text\n          className={cn(\n            \"text-base\",\n            isSelected ? \"text-primary font-medium\" : \"text-foreground\"\n          )}\n        >\n          {children}\n        </Text>\n\n        {isSelected && (\n          <Ionicons\n            name={multiple ? \"checkmark-circle\" : \"checkmark\"}\n            size={20}\n            color=\"#3b82f6\"\n          />\n        )}\n      </Pressable>\n    );\n  }\n);\n\nComboboxItem.displayName = \"ComboboxItem\";\n\nconst ComboboxLabel = React.forwardRef<Text, ComboboxLabelProps>(\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\nComboboxLabel.displayName = \"ComboboxLabel\";\n\nconst ComboboxSeparator = React.forwardRef<View, ComboboxSeparatorProps>(\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\nComboboxSeparator.displayName = \"ComboboxSeparator\";\n\nexport {\n  Combobox,\n  ComboboxGroup,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxSeparator,\n}; ",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Combobox } from \"@/components/ui/combobox\";\nimport * as React from \"react\";\n\nexport default function ComboboxExample() {\n    const [fruit, setFruit] = React.useState<string>(\"\");\n\n    const fruits = [\n        { value: \"apple\", label: \"Apple\" },\n        { value: \"banana\", label: \"Banana\" },\n        { value: \"orange\", label: \"Orange\" },\n        { value: \"strawberry\", label: \"Strawberry\" },\n        { value: \"grape\", label: \"Grape\" },\n        { value: \"pineapple\", label: \"Pineapple\" },\n        { value: \"mango\", label: \"Mango\" },\n        { value: \"kiwi\", label: \"Kiwi\" },\n        { value: \"peach\", label: \"Peach\" },\n        { value: \"plum\", label: \"Plum\" },\n    ];\n\n    return (\n        <Combobox\n            placeholder=\"Select a fruit\"\n            searchPlaceholder=\"Search fruits...\"\n            value={fruit}\n            onValueChange={(value) => setFruit(value as string)}\n            items={fruits}\n        />\n    );\n}",
  "customPreview": "import { Combobox } from \"@/components/ui/combobox\";\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 ComboboxExample() {\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    const [selectedLanguages, setSelectedLanguages] = React.useState<string[]>([]);\n    const [selectedColors, setSelectedColors] = React.useState<string[]>([\"red\", \"blue\"]);\n\n    // Sample data for comboboxes\n    const fruits = [\n        { value: \"apple\", label: \"Apple\" },\n        { value: \"banana\", label: \"Banana\" },\n        { value: \"orange\", label: \"Orange\" },\n        { value: \"strawberry\", label: \"Strawberry\" },\n        { value: \"grape\", label: \"Grape\" },\n        { value: \"pineapple\", label: \"Pineapple\" },\n        { value: \"mango\", label: \"Mango\" },\n        { value: \"kiwi\", label: \"Kiwi\" },\n        { value: \"peach\", label: \"Peach\" },\n        { value: \"plum\", label: \"Plum\" },\n    ];\n\n    const pets = [\n        { value: \"dog\", label: \"Dog\" },\n        { value: \"cat\", label: \"Cat\" },\n        { value: \"rabbit\", label: \"Rabbit\" },\n        { value: \"hamster\", label: \"Hamster\" },\n        { value: \"turtle\", label: \"Turtle\" },\n        { value: \"bird\", label: \"Bird\" },\n        { value: \"fish\", label: \"Fish\" },\n    ];\n\n    const countries = [\n        { value: \"us\", label: \"United States\" },\n        { value: \"ca\", label: \"Canada\" },\n        { value: \"uk\", label: \"United Kingdom\" },\n        { value: \"fr\", label: \"France\" },\n        { value: \"de\", label: \"Germany\" },\n        { value: \"jp\", label: \"Japan\" },\n        { value: \"au\", label: \"Australia\" },\n        { value: \"br\", label: \"Brazil\" },\n        { value: \"in\", label: \"India\" },\n        { value: \"cn\", label: \"China\" },\n    ];\n\n    const frontendFrameworks = [\n        { value: \"react\", label: \"React\" },\n        { value: \"vue\", label: \"Vue\" },\n        { value: \"angular\", label: \"Angular\" },\n        { value: \"svelte\", label: \"Svelte\" },\n        { value: \"solid\", label: \"SolidJS\" },\n    ];\n\n    const backendFrameworks = [\n        { value: \"node\", label: \"Node.js\" },\n        { value: \"django\", label: \"Django\" },\n        { value: \"laravel\", label: \"Laravel\" },\n        { value: \"spring\", label: \"Spring Boot\" },\n        { value: \"rails\", label: \"Ruby on Rails\" },\n    ];\n\n    // Combined frameworks\n    const allFrameworks = [...frontendFrameworks, ...backendFrameworks];\n\n    // Programming languages for multiple selection\n    const programmingLanguages = [\n        { value: \"javascript\", label: \"JavaScript\" },\n        { value: \"typescript\", label: \"TypeScript\" },\n        { value: \"python\", label: \"Python\" },\n        { value: \"java\", label: \"Java\" },\n        { value: \"csharp\", label: \"C#\" },\n        { value: \"cpp\", label: \"C++\" },\n        { value: \"rust\", label: \"Rust\" },\n        { value: \"go\", label: \"Go\" },\n        { value: \"ruby\", label: \"Ruby\" },\n        { value: \"php\", label: \"PHP\" },\n        { value: \"swift\", label: \"Swift\" },\n        { value: \"kotlin\", label: \"Kotlin\" },\n    ];\n\n    // Colors for multiple selection with default values\n    const colors = [\n        { value: \"red\", label: \"Red\" },\n        { value: \"blue\", label: \"Blue\" },\n        { value: \"green\", label: \"Green\" },\n        { value: \"yellow\", label: \"Yellow\" },\n        { value: \"purple\", label: \"Purple\" },\n        { value: \"orange\", label: \"Orange\" },\n        { value: \"pink\", label: \"Pink\" },\n        { value: \"brown\", label: \"Brown\" },\n        { value: \"black\", label: \"Black\" },\n        { value: \"white\", label: \"White\" },\n    ];\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                                Combobox\n                            </Text>\n                            <Text className=\"text-base mb-6 text-muted-foreground\">\n                                Displays a searchable 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                                Basic Combobox\n                            </Text>\n                            <Combobox\n                                placeholder=\"Select a fruit\"\n                                searchPlaceholder=\"Search fruits...\"\n                                value={fruit}\n                                onValueChange={(value) => setFruit(value as string)}\n                                items={fruits}\n                            />\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                                Multiple Selection\n                            </Text>\n                            <Combobox\n                                placeholder=\"Select programming languages\"\n                                searchPlaceholder=\"Search languages...\"\n                                value={selectedLanguages}\n                                onValueChange={(value) => setSelectedLanguages(value as string[])}\n                                items={programmingLanguages}\n                                multiple={true}\n                            />\n                            <Text className=\"text-sm mt-2 text-muted-foreground\">\n                                {selectedLanguages.length > 0\n                                    ? `Selected: ${selectedLanguages.map(lang =>\n                                        programmingLanguages.find(l => l.value === lang)?.label).join(', ')}`\n                                    : \"No languages selected\"}\n                            </Text>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Multiple Selection with Default Values\n                            </Text>\n                            <Combobox\n                                placeholder=\"Select colors\"\n                                searchPlaceholder=\"Search colors...\"\n                                value={selectedColors}\n                                onValueChange={(value) => setSelectedColors(value as string[])}\n                                items={colors}\n                                multiple={true}\n                            />\n                            <Text className=\"text-sm mt-2 text-muted-foreground\">\n                                {selectedColors.length > 0\n                                    ? `Selected: ${selectedColors.map(color =>\n                                        colors.find(c => c.value === color)?.label).join(', ')}`\n                                    : \"No colors 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                                <Combobox\n                                    placeholder=\"Select a pet\"\n                                    searchPlaceholder=\"Search pets...\"\n                                    value={pet}\n                                    onValueChange={(value) => setPet(value as string)}\n                                    items={pets}\n                                />\n                            </View>\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                            <Combobox\n                                placeholder=\"Select a country\"\n                                searchPlaceholder=\"Search countries...\"\n                                value={country}\n                                onValueChange={(value) => setCountry(value as string)}\n                                items={countries}\n                            />\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Custom Filter\n                            </Text>\n                            <Combobox\n                                placeholder=\"Select a framework\"\n                                searchPlaceholder=\"Search frameworks...\"\n                                value={framework}\n                                onValueChange={(value) => setFramework(value as string)}\n                                items={allFrameworks}\n                                filter={(item, search) => {\n                                    // Check if search term is in the label or value\n                                    return (\n                                        item.label.toLowerCase().includes(search.toLowerCase()) ||\n                                        item.value.toLowerCase().includes(search.toLowerCase())\n                                    );\n                                }}\n                            />\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Disabled Combobox\n                            </Text>\n                            <Combobox\n                                placeholder=\"Select an option\"\n                                disabled={true}\n                                items={fruits}\n                            />\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                            <Combobox\n                                placeholder=\"Select a day\"\n                                searchPlaceholder=\"Search days...\"\n                                items={[\n                                    { value: \"monday\", label: \"Monday\" },\n                                    { value: \"tuesday\", label: \"Tuesday\" },\n                                    { value: \"wednesday\", label: \"Wednesday\", disabled: true },\n                                    { value: \"thursday\", label: \"Thursday\" },\n                                    { value: \"friday\", label: \"Friday\" },\n                                    { value: \"saturday\", label: \"Saturday\", disabled: true },\n                                    { value: \"sunday\", label: \"Sunday\", disabled: true },\n                                ]}\n                                onValueChange={(value) => console.log(value)}\n                            />\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Many Items\n                            </Text>\n                            <Combobox\n                                placeholder=\"Select a number\"\n                                searchPlaceholder=\"Search numbers...\"\n                                items={Array.from({ length: 100 }, (_, i) => ({\n                                    value: `num-${i + 1}`,\n                                    label: `Number ${i + 1}`\n                                }))}\n                                emptyText=\"No numbers found\"\n                            />\n                        </View>\n                    </ScrollView>\n                </KeyboardAvoidingView>\n            </SafeAreaView>\n        </>\n    );\n}"
}