{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:ui",
  "description": "Choose a single option from a collapsible list.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/ui/select.tsx",
      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Select as BaseSelect } from \"@base-ui/react/select\"\r\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Select = BaseSelect.Root\r\n\r\nconst SelectGroup = BaseSelect.Group\r\n\r\ntype SelectValueProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Value> & {\r\n    placeholder?: string\r\n}\r\n\r\nconst SelectValue = React.forwardRef<\r\n    React.ComponentRef<typeof BaseSelect.Value>,\r\n    SelectValueProps\r\n>(({ placeholder, ...props }, ref) => (\r\n    <BaseSelect.Value ref={ref} {...props}>\r\n        {(value) => value ?? placeholder}\r\n    </BaseSelect.Value>\r\n))\r\nSelectValue.displayName = \"SelectValue\"\r\n\r\ntype SelectTriggerProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Trigger>\r\n\r\nconst SelectTrigger = React.forwardRef<\r\n    React.ComponentRef<typeof BaseSelect.Trigger>,\r\n    SelectTriggerProps\r\n>(({ className, children, ...props }, ref) => (\r\n    <BaseSelect.Trigger\r\n        ref={ref}\r\n        className={cn(\r\n            \"flex h-10 w-full items-center justify-between rounded-base border-2 border-black bg-white px-3 py-2 text-sm placeholder:text-black focus-brutal disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\r\n            className\r\n        )}\r\n        {...props}\r\n    >\r\n        {children}\r\n        <BaseSelect.Icon>\r\n            <ChevronDown\r\n                aria-hidden=\"true\"\r\n                className=\"h-4 w-4 opacity-50\"\r\n            />\r\n        </BaseSelect.Icon>\r\n\r\n    </BaseSelect.Trigger>\r\n))\r\nSelectTrigger.displayName = \"SelectTrigger\"\r\n\r\ntype SelectScrollUpButtonProps = React.ComponentPropsWithoutRef<typeof BaseSelect.ScrollUpArrow>\r\n\r\nconst SelectScrollUpButton = React.forwardRef<\r\n    React.ComponentRef<typeof BaseSelect.ScrollUpArrow>,\r\n    SelectScrollUpButtonProps\r\n>(({ className, ...props }, ref) => (\r\n    <BaseSelect.ScrollUpArrow\r\n        ref={ref}\r\n        className={cn(\r\n            \"flex cursor-default items-center justify-center py-1\",\r\n            className\r\n        )}\r\n        {...props}\r\n    >\r\n        <ChevronUp aria-hidden=\"true\" className=\"h-4 w-4\" />\r\n\r\n    </BaseSelect.ScrollUpArrow>\r\n))\r\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\"\r\n\r\ntype SelectScrollDownButtonProps = React.ComponentPropsWithoutRef<typeof BaseSelect.ScrollDownArrow>\r\n\r\nconst SelectScrollDownButton = React.forwardRef<\r\n    React.ComponentRef<typeof BaseSelect.ScrollDownArrow>,\r\n    SelectScrollDownButtonProps\r\n>(({ className, ...props }, ref) => (\r\n    <BaseSelect.ScrollDownArrow\r\n        ref={ref}\r\n        className={cn(\r\n            \"flex cursor-default items-center justify-center py-1\",\r\n            className\r\n        )}\r\n        {...props}\r\n    >\r\n        <ChevronDown aria-hidden=\"true\" className=\"h-4 w-4\" />\r\n    </BaseSelect.ScrollDownArrow>\r\n))\r\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\"\r\n\r\ntype SelectContentProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Popup>\r\n\r\nconst SelectContent = React.forwardRef<\r\n    React.ComponentRef<typeof BaseSelect.Popup>,\r\n    SelectContentProps\r\n>(({ className, children, ...props }, ref) => (\r\n    <BaseSelect.Portal>\r\n        <BaseSelect.Positioner sideOffset={4} alignItemWithTrigger={false}>\r\n            <BaseSelect.Popup\r\n                ref={ref}\r\n                className={cn(\r\n                    \"relative z-50 max-h-96 min-w-(--anchor-width) overflow-hidden rounded-base border-2 border-black bg-white text-black shadow-brutal motion-reduce:transition-none data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0\",\r\n                    className\r\n                )}\r\n                {...props}\r\n            >\r\n                <SelectScrollUpButton />\r\n                <BaseSelect.List className=\"p-1\">\r\n                    {children}\r\n                </BaseSelect.List>\r\n                <SelectScrollDownButton />\r\n            </BaseSelect.Popup>\r\n        </BaseSelect.Positioner>\r\n    </BaseSelect.Portal>\r\n))\r\nSelectContent.displayName = \"SelectContent\"\r\n\r\ntype SelectLabelProps = React.ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>\r\n\r\nconst SelectLabel = React.forwardRef<\r\n    React.ComponentRef<typeof BaseSelect.GroupLabel>,\r\n    SelectLabelProps\r\n>(({ className, ...props }, ref) => (\r\n    <BaseSelect.GroupLabel\r\n        ref={ref}\r\n        className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold text-black\", className)}\r\n        {...props}\r\n    />\r\n))\r\nSelectLabel.displayName = \"SelectLabel\"\r\n\r\ntype SelectItemProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Item>\r\n\r\nconst SelectItem = React.forwardRef<\r\n    React.ComponentRef<typeof BaseSelect.Item>,\r\n    SelectItemProps\r\n>(({ className, children, ...props }, ref) => (\r\n    <BaseSelect.Item\r\n        ref={ref}\r\n        className={cn(\r\n            \"relative flex w-full cursor-default select-none items-center rounded-base py-1.5 pl-8 pr-2 text-sm font-bold outline-none data-highlighted:bg-main data-highlighted:text-black data-disabled:pointer-events-none data-disabled:opacity-50 text-black\",\r\n            className\r\n        )}\r\n        {...props}\r\n    >\r\n        <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n            <BaseSelect.ItemIndicator>\r\n                <Check aria-hidden=\"true\" className=\"h-4 w-4\" />\r\n            </BaseSelect.ItemIndicator>\r\n        </span>\r\n\r\n        <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\r\n    </BaseSelect.Item>\r\n))\r\nSelectItem.displayName = \"SelectItem\"\r\n\r\ntype SelectSeparatorProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Separator>\r\n\r\nconst SelectSeparator = React.forwardRef<\r\n    React.ComponentRef<typeof BaseSelect.Separator>,\r\n    SelectSeparatorProps\r\n>(({ className, ...props }, ref) => (\r\n    <BaseSelect.Separator\r\n        ref={ref}\r\n        className={cn(\"-mx-1 my-1 h-px bg-black\", className)}\r\n        {...props}\r\n    />\r\n))\r\nSelectSeparator.displayName = \"SelectSeparator\"\r\n\r\nexport {\r\n    Select,\r\n    SelectGroup,\r\n    SelectValue,\r\n    SelectTrigger,\r\n    SelectContent,\r\n    SelectLabel,\r\n    SelectItem,\r\n    SelectSeparator,\r\n    SelectScrollUpButton,\r\n    SelectScrollDownButton,\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}