- "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n ChevronDownIcon,\n ChevronsUpDownIcon,\n ChevronUpIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst Select = SelectPrimitive.Root;\n\nconst selectTriggerVariants = cva(\n \"relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none\",\n {\n defaultVariants: {\n size: \"default\",\n },\n variants: {\n size: {\n default: \"\",\n lg: \"min-h-10 sm:min-h-9\",\n sm: \"min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7\",\n },\n },\n },\n);\n\nconst selectTriggerIconClassName = \"-me-1 size-4.5 opacity-80 sm:size-4\";\n\ninterface SelectButtonProps extends useRender.ComponentProps<\"button\"> {\n size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n}\n\nfunction SelectButton({\n className,\n size,\n render,\n children,\n ...props\n}: SelectButtonProps) {\n const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"] =\n render ? undefined : \"button\";\n\n const defaultProps = {\n children: (\n <>\n <span className=\"flex-1 truncate in-data-placeholder:text-muted-foreground/72\">\n {children}\n </span>\n <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n </>\n ),\n className: cn(selectTriggerVariants({ size }), \"min-w-0\", className),\n \"data-slot\": \"select-button\",\n type: typeValue,\n };\n\n return useRender({\n defaultTagName: \"button\",\n props: mergeProps<\"button\">(defaultProps, props),\n render,\n });\n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: SelectPrimitive.Trigger.Props & VariantProps<typeof selectTriggerVariants>) {\n return (\n <SelectPrimitive.Trigger\n className={cn(selectTriggerVariants({ size }), className)}\n data-slot=\"select-trigger\"\n {...props}\n >\n {children}\n <SelectPrimitive.Icon data-slot=\"select-icon\">\n <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n );\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n return (\n <SelectPrimitive.Value\n className={cn(\n \"flex-1 truncate data-placeholder:text-muted-foreground\",\n className,\n )}\n data-slot=\"select-value\"\n {...props}\n />\n );\n}\n\nfunction SelectPopup({\n className,\n children,\n side = \"bottom\",\n sideOffset = 4,\n align = \"start\",\n alignOffset = 0,\n alignItemWithTrigger = true,\n anchor,\n ...props\n}: SelectPrimitive.Popup.Props & {\n side?: SelectPrimitive.Positioner.Props[\"side\"];\n sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"];\n align?: SelectPrimitive.Positioner.Props[\"align\"];\n alignOffset?: SelectPrimitive.Positioner.Props[\"alignOffset\"];\n alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"];\n anchor?: SelectPrimitive.Positioner.Props[\"anchor\"];\n}) {\n return (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Positioner\n align={align}\n alignItemWithTrigger={alignItemWithTrigger}\n alignOffset={alignOffset}\n anchor={anchor}\n className=\"z-50 select-none\"\n data-slot=\"select-positioner\"\n side={side}\n sideOffset={sideOffset}\n >\n <SelectPrimitive.Popup\n className=\"origin-(--transform-origin) text-foreground\"\n data-slot=\"select-popup\"\n {...props}\n >\n <SelectPrimitive.ScrollUpArrow\n className=\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover\"\n data-slot=\"select-scroll-up-arrow\"\n >\n <ChevronUpIcon className=\"relative size-4.5 sm:size-4\" />\n </SelectPrimitive.ScrollUpArrow>\n <div className=\"relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\">\n <SelectPrimitive.List\n className={cn(\n \"max-h-(--available-height) overflow-y-auto p-1\",\n className,\n )}\n data-slot=\"select-list\"\n >\n {children}\n </SelectPrimitive.List>\n </div>\n <SelectPrimitive.ScrollDownArrow\n className=\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover\"\n data-slot=\"select-scroll-down-arrow\"\n >\n <ChevronDownIcon className=\"relative size-4.5 sm:size-4\" />\n </SelectPrimitive.ScrollDownArrow>\n </SelectPrimitive.Popup>\n </SelectPrimitive.Positioner>\n </SelectPrimitive.Portal>\n );\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: SelectPrimitive.Item.Props) {\n return (\n <SelectPrimitive.Item\n className={cn(\n \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n className,\n )}\n data-slot=\"select-item\"\n {...props}\n >\n <SelectPrimitive.ItemIndicator className=\"col-start-1\">\n <svg\n fill=\"none\"\n height=\"24\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n xmlns=\"http://www.w3.org/1500/svg\"\n >\n <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n </svg>\n </SelectPrimitive.ItemIndicator>\n <SelectPrimitive.ItemText className=\"col-start-2 min-w-0\">\n {children}\n </SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n );\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: SelectPrimitive.Separator.Props) {\n return (\n <SelectPrimitive.Separator\n className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n data-slot=\"select-separator\"\n {...props}\n />\n );\n}\n\nfunction SelectGroup(props: SelectPrimitive.Group.Props) {\n return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectGroupLabel(props: SelectPrimitive.GroupLabel.Props) {\n return (\n <SelectPrimitive.GroupLabel\n className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\"\n data-slot=\"select-group-label\"\n {...props}\n />\n );\n}\n\nexport {\n Select,\n SelectTrigger,\n SelectButton,\n selectTriggerVariants,\n SelectValue,\n SelectPopup,\n SelectPopup as SelectContent,\n SelectItem,\n SelectSeparator,\n SelectGroup,\n SelectGroupLabel,\n};\n",
0 commit comments