{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-tailwind",
  "type": "registry:item",
  "title": "Select (Tailwind)",
  "description": "A customizable select component for choosing from a list of options.",
  "files": [
    {
      "path": "registry/brook/tailwind/ui/select.tsx",
      "content": "\"use client\";\n\nimport { Select } from \"@base-ui/react/select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction SelectRoot<Value, Multiple extends boolean | undefined = undefined>(\n  props: React.ComponentProps<typeof Select.Root<Value, Multiple>>\n) {\n  return <Select.Root<Value, Multiple> {...props} />;\n}\n\nfunction SelectTrigger({ className, children, render, ...props }: React.ComponentProps<typeof Select.Trigger>) {\n  return (\n    <Select.Trigger\n      className={cn(\n        !render && [\n          \"min-w-36 bg-[var(--popover)] max-md:min-w-28\",\n          \"hover:not-disabled:bg-[var(--accent)] hover:not-disabled:text-[var(--foreground)]\",\n          \"focus-visible:outline-2 focus-visible:outline-[var(--ring)] focus-visible:outline-offset-2\",\n          \"data-[popup-open]:bg-[var(--accent)] data-[popup-open]:text-[var(--foreground)]\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n        ],\n        className\n      )}\n      data-slot=\"select-trigger\"\n      nativeButton\n      render={render}\n      {...props}\n    >\n      {children}\n    </Select.Trigger>\n  );\n}\n\nfunction SelectValue({ className, children, ...props }: React.ComponentProps<typeof Select.Value>) {\n  return (\n    <Select.Value\n      className={cn(\n        \"!leading-[1.25] flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left\",\n        \"data-[placeholder]:text-[var(--muted-foreground)]\",\n        className\n      )}\n      data-slot=\"select-value\"\n      {...props}\n    >\n      {children}\n    </Select.Value>\n  );\n}\n\nfunction SelectIcon({ className, children, ...props }: React.ComponentProps<typeof Select.Icon>) {\n  return (\n    <Select.Icon\n      className={cn(\n        \"ml-2 h-4 w-4 shrink-0 opacity-50 transition-transform duration-200 ease-in-out\",\n        \"[.trigger[data-popup-open]_&]:rotate-180\",\n        className\n      )}\n      data-slot=\"select-icon\"\n      {...props}\n    >\n      {children || <ChevronDown size={16} />}\n    </Select.Icon>\n  );\n}\n\nfunction SelectPortal({ ...props }: React.ComponentProps<typeof Select.Portal>) {\n  return <Select.Portal {...props} />;\n}\n\nfunction SelectOverlay({ className, ...props }: React.ComponentProps<typeof Select.Backdrop>) {\n  return (\n    <Select.Backdrop\n      className={cn(\"fixed inset-0 z-140 bg-[rgba(0,0,0,0.5)] transition-opacity duration-150\", className)}\n      data-slot=\"select-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectPositioner({ className, ...props }: React.ComponentProps<typeof Select.Positioner>) {\n  return <Select.Positioner className={cn(\"z-150\", className)} {...props} />;\n}\n\nfunction SelectScrollUpArrow({ className, children, ...props }: React.ComponentProps<typeof Select.ScrollUpArrow>) {\n  return (\n    <Select.ScrollUpArrow\n      className={cn(\n        \"flex h-6 cursor-pointer items-center justify-center border-none bg-[var(--mix-card-33-bg)] text-[var(--foreground)] transition-colors duration-200 ease-in-out\",\n        \"hover:bg-[var(--muted)]\",\n        \"data-[state=hidden]:hidden\",\n        className\n      )}\n      data-slot=\"select-scrolluparrow\"\n      {...props}\n    >\n      {children || <ChevronDown size={16} style={{ transform: \"rotate(180deg)\" }} />}\n    </Select.ScrollUpArrow>\n  );\n}\n\nfunction SelectPopup({ className, ...props }: React.ComponentProps<typeof Select.Popup>) {\n  return (\n    <Select.Popup\n      className={cn(\n        \"z-[150] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-y-auto rounded-[var(--radius)]\",\n        \"bg-[var(--popover)] shadow-[0_0_0_0.5px_oklch(from_var(--border)_l_c_h_/_0.8),var(--shadow-border-stack)]\",\n        \"transition-[transform,scale,opacity] duration-250 ease-[var(--ease-out-expo)]\",\n        \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n        \"data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none\",\n        className\n      )}\n      data-slot=\"select-popup\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectArrow({ className, ...props }: React.ComponentProps<typeof Select.Arrow>) {\n  return (\n    <Select.Arrow\n      className={cn(\n        \"-z-[1] h-3 w-3 rotate-45 border border-[var(--border)] border-r-0 border-b-0 bg-[var(--mix-card-33-bg)]\",\n        className\n      )}\n      data-slot=\"select-arrow\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollDownArrow({ className, children, ...props }: React.ComponentProps<typeof Select.ScrollDownArrow>) {\n  return (\n    <Select.ScrollDownArrow\n      className={cn(\n        \"flex h-6 cursor-pointer items-center justify-center border-none bg-[var(--mix-card-33-bg)] text-[var(--foreground)] transition-colors duration-200 ease-in-out\",\n        \"hover:bg-[var(--muted)]\",\n        \"data-[state=hidden]:hidden\",\n        className\n      )}\n      data-slot=\"select-scrolldownarrow\"\n      {...props}\n    >\n      {children || <ChevronDown size={16} />}\n    </Select.ScrollDownArrow>\n  );\n}\n\nfunction SelectList({ className, ...props }: React.ComponentProps<typeof Select.List>) {\n  return <Select.List className={cn(\"p-0\", className)} data-slot=\"select-list\" {...props} />;\n}\n\nfunction SelectItem({ className, ...props }: React.ComponentProps<typeof Select.Item>) {\n  return (\n    <Select.Item\n      className={cn(\n        \"mx-1 flex min-h-8 cursor-pointer items-center justify-between gap-3 rounded-[0.3125rem] px-2 pr-1.5 text-[var(--foreground)] text-sm outline-none\",\n        \"hover:not-disabled:bg-[var(--accent)]\",\n        \"data-[highlighted]:bg-[var(--muted)] data-[highlighted]:text-[var(--foreground)]\",\n        \"data-[selected]:bg-transparent\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      data-slot=\"select-item\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectItemText({ className, ...props }: React.ComponentProps<typeof Select.ItemText>) {\n  return (\n    <Select.ItemText\n      className={cn(\"flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left\", className)}\n      data-slot=\"select-itemtext\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectGroup({ className, ...props }: React.ComponentProps<typeof Select.Group>) {\n  return <Select.Group className={cn(\"p-0\", className)} {...props} />;\n}\n\nfunction SelectGroupLabel({ className, ...props }: React.ComponentProps<typeof Select.GroupLabel>) {\n  return (\n    <Select.GroupLabel\n      className={cn(\n        \"px-3 py-1.5 font-semibold text-[var(--muted-foreground)] text-xs uppercase tracking-wider\",\n        className\n      )}\n      data-slot=\"select-grouplabel\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<typeof Select.Separator>) {\n  return (\n    <Select.Separator\n      className={cn(\"my-1 h-px bg-[var(--color-border)]\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectItemIndicator({ className, children, ...props }: React.ComponentProps<typeof Select.ItemIndicator>) {\n  return (\n    <Select.ItemIndicator\n      className={cn(\n        \"ml-2 h-4 w-4 shrink-0 text-[var(--muted-foreground)] opacity-0\",\n        \"transition-opacity duration-200 ease-in-out\",\n        \"[[data-selected]_&]:opacity-100\",\n        className\n      )}\n      data-slot=\"select-itemindicator\"\n      {...props}\n    >\n      {children || <Check size={16} />}\n    </Select.ItemIndicator>\n  );\n}\n\nfunction SelectSpacer() {\n  return <div style={{ height: \"4px\", width: \"100%\" }} />;\n}\n\nexport {\n  SelectRoot as Select,\n  SelectArrow,\n  SelectGroup,\n  SelectGroupLabel,\n  SelectIcon,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectList,\n  SelectOverlay,\n  SelectPopup,\n  SelectPortal,\n  SelectPositioner,\n  SelectRoot,\n  SelectScrollDownArrow,\n  SelectScrollUpArrow,\n  SelectSeparator,\n  SelectSpacer,\n  SelectTrigger,\n  SelectValue,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/select/select.tsx"
    }
  ]
}