{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "description": "pass safe-area `insets` to `SelectContent`",
  "dependencies": [
    "@rn-primitives/select@^1.5.2",
    "lucide-react-native@^1.21.0",
    "react-native-reanimated@4.5.1",
    "react-native-screens@~4.26.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/text",
    "https://reactnativereusables.com/r/nativewind/native-only-animated-view.json"
  ],
  "files": [
    {
      "path": "components/ui/select.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { NativeOnlyAnimatedView } from '@/components/ui/native-only-animated-view';\nimport { TextClassContext } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport * as SelectPrimitive from '@rn-primitives/select';\nimport { Check, ChevronDown, ChevronDownIcon, ChevronUpIcon } from 'lucide-react-native';\nimport * as React from 'react';\nimport { Platform, StyleSheet, View } from 'react-native';\nimport { FadeIn, FadeOut, ReduceMotion } from 'react-native-reanimated';\nimport { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';\n\ntype Option = SelectPrimitive.Option;\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectGroup = SelectPrimitive.Group;\n\nfunction SelectValue({\n  ref,\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value> & {\n    className?: string;\n  }) {\n  const { value } = SelectPrimitive.useRootContext();\n  return (\n    <SelectPrimitive.Value\n      ref={ref}\n      className={cn(\n        'text-foreground line-clamp-1 flex flex-row items-center gap-2 text-sm',\n        !value && 'text-muted-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SelectTrigger({\n  ref,\n  className,\n  children,\n  size = 'default',\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n    children?: React.ReactNode;\n    size?: 'default' | 'sm';\n  }) {\n  return (\n    <SelectPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'border-input dark:bg-input/30 dark:active:bg-input/50 bg-background flex h-control w-full flex-row items-center justify-between gap-2 rounded-md border px-4 py-2 shadow-sm sm:h-9',\n        Platform.select({\n          web: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-input/50 w-fit whitespace-nowrap text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0',\n        }),\n        props.disabled && 'opacity-50',\n        size === 'sm' && 'h-8 py-2 sm:py-1.5',\n        className\n      )}\n      // Radix sets aria-autocomplete for its combobox role, but rn-primitives renders role=\"button\",\n      // where the attribute is not allowed. Clearing it here wins the Slot prop merge.\n      {...Platform.select({ web: { 'aria-autocomplete': undefined } })}\n      {...props}>\n      <>{children}</>\n      <Icon as={ChevronDown} aria-hidden={true} className=\"text-muted-foreground size-4\" />\n    </SelectPrimitive.Trigger>\n  );\n}\n\nconst FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;\n\nfunction SelectContent({\n  className,\n  children,\n  position = 'popper',\n  portalHost,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content> & {\n    className?: string;\n    portalHost?: string;\n  }) {\n  return (\n    <SelectPrimitive.Portal hostName={portalHost}>\n      <FullWindowOverlay>\n        <SelectPrimitive.Overlay\n          style={Platform.select({ native: StyleSheet.absoluteFill })}\n          asChild={Platform.OS !== 'web'}>\n          <NativeOnlyAnimatedView\n            className=\"z-50\"\n            entering={FadeIn.reduceMotion(ReduceMotion.System)}\n            exiting={FadeOut.reduceMotion(ReduceMotion.System)}\n            as=\"Pressable\">\n            <TextClassContext.Provider value=\"text-popover-foreground\">\n              <SelectPrimitive.Content\n                className={cn(\n                  'bg-popover border-border relative z-50 min-w-[8rem] rounded-md border shadow-md',\n                  Platform.select({\n                    web: cn(\n                      'animate-in fade-in-0 zoom-in-95 origin-(--radix-select-content-transform-origin) max-h-52 overflow-y-auto overflow-x-hidden',\n                      props.side === 'bottom' && 'slide-in-from-top-2',\n                      props.side === 'top' && 'slide-in-from-bottom-2'\n                    ),\n                    native: 'p-1',\n                  }),\n                  position === 'popper' &&\n                  Platform.select({\n                    web: cn(\n                      props.side === 'bottom' && 'translate-y-1',\n                      props.side === 'top' && '-translate-y-1'\n                    ),\n                  }),\n                  className\n                )}\n                position={position}\n                {...props}>\n                <SelectScrollUpButton />\n                <SelectPrimitive.Viewport\n                  className={cn(\n                    'p-1',\n                    position === 'popper' &&\n                    cn(\n                      'w-full',\n                      Platform.select({\n                        web: 'h-[var(--radix-select-trigger-height)] min-w-[var(--radix-select-trigger-width)]',\n                      })\n                    )\n                  )}>\n                  {children}\n                </SelectPrimitive.Viewport>\n                <SelectScrollDownButton />\n              </SelectPrimitive.Content>\n            </TextClassContext.Provider>\n          </NativeOnlyAnimatedView>\n        </SelectPrimitive.Overlay>\n      </FullWindowOverlay>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      className={cn('text-muted-foreground px-2 py-2 text-xs sm:py-1.5', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        'active:bg-accent group relative flex w-full flex-row items-center gap-2 rounded-sm py-2 pl-2 pr-8 sm:py-1.5',\n        Platform.select({\n          web: 'focus:bg-accent focus:text-accent-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-default outline-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none',\n        }),\n        props.disabled && 'opacity-50',\n        className\n      )}\n      {...props}>\n      <View className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Icon as={Check} className=\"text-muted-foreground size-4 shrink-0\" />\n        </SelectPrimitive.ItemIndicator>\n      </View>\n      <SelectPrimitive.ItemText className=\"text-foreground group-active:text-accent-foreground select-none text-sm\" />\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\n        'bg-border -mx-1 my-1 h-px',\n        Platform.select({ web: 'pointer-events-none' }),\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * @platform Web only\n * Returns null on native platforms\n */\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  if (Platform.OS !== 'web') {\n    return null;\n  }\n  return (\n    <SelectPrimitive.ScrollUpButton\n      className={cn('flex cursor-default items-center justify-center py-1', className)}\n      {...props}>\n      <Icon as={ChevronUpIcon} className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  );\n}\n\n/**\n * @platform Web only\n * Returns null on native platforms\n */\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  if (Platform.OS !== 'web') {\n    return null;\n  }\n  return (\n    <SelectPrimitive.ScrollDownButton\n      className={cn('flex cursor-default items-center justify-center py-1', className)}\n      {...props}>\n      <Icon as={ChevronDownIcon} className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  );\n}\n\n\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  type Option,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/select.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Select"
    ],
    "api": "<Select><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem label value /></SelectContent></Select>"
  },
  "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:ui"
}