+ "content": "import { Icon } from '@/registry/default/components/ui/icon';\nimport { NativeOnlyAnimatedView } from '@/registry/default/components/ui/native-only-animated-view';\nimport { TextClassContext } from '@/registry/default/components/ui/text';\nimport { cn } from '@/registry/default/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, ScrollView, StyleSheet, View } from 'react-native';\nimport { FadeIn, FadeOut } 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}: SelectPrimitive.ValueProps &\n React.RefAttributes<SelectPrimitive.ValueRef> & {\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}: SelectPrimitive.TriggerProps &\n React.RefAttributes<SelectPrimitive.TriggerRef> & {\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-11 flex-row items-center justify-between gap-2 rounded-md border px-3 py-2 shadow-sm shadow-black/5 sm:h-10',\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 {...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}: SelectPrimitive.ContentProps &\n React.RefAttributes<SelectPrimitive.ContentRef> & {\n className?: string;\n portalHost?: string;\n }) {\n return (\n <SelectPrimitive.Portal hostName={portalHost}>\n <FullWindowOverlay>\n <SelectPrimitive.Overlay style={Platform.select({ native: StyleSheet.absoluteFill })}>\n <TextClassContext.Provider value=\"text-popover-foreground\">\n <NativeOnlyAnimatedView className=\"z-50\" entering={FadeIn} exiting={FadeOut}>\n <SelectPrimitive.Content\n className={cn(\n 'bg-popover border-border relative z-50 min-w-[8rem] rounded-md border shadow-md shadow-black/5',\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 </NativeOnlyAnimatedView>\n </TextClassContext.Provider>\n </SelectPrimitive.Overlay>\n </FullWindowOverlay>\n </SelectPrimitive.Portal>\n );\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: SelectPrimitive.LabelProps & React.RefAttributes<SelectPrimitive.LabelRef>) {\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}: SelectPrimitive.ItemProps & React.RefAttributes<SelectPrimitive.ItemRef>) {\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}: SelectPrimitive.SeparatorProps & React.RefAttributes<SelectPrimitive.SeparatorRef>) {\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 * @platform Native only\n * Returns the children on the web\n */\nfunction NativeSelectScrollView({\n className,\n ...props\n}: React.ComponentProps<typeof ScrollView> & React.RefAttributes<ScrollView>) {\n if (Platform.OS === 'web') {\n return <>{props.children}</>;\n }\n return <ScrollView className={cn('max-h-52', className)} {...props} />;\n}\n\nexport {\n NativeSelectScrollView,\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",
0 commit comments