{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:item",
  "title": "Select",
  "description": "A customizable select component for choosing from a list of options.",
  "files": [
    {
      "path": "registry/brook/ui/select/select.tsx",
      "content": "\"use client\";\n\nimport { Select } from \"@base-ui/react/select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./select.module.css\";\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(!render && styles.trigger, className)}\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 className={cn(styles.value, className)} data-slot=\"select-value\" {...props}>\n      {children}\n    </Select.Value>\n  );\n}\n\nfunction SelectIcon({ className, children, ...props }: React.ComponentProps<typeof Select.Icon>) {\n  return (\n    <Select.Icon className={cn(styles.icon, className)} {...props}>\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 <Select.Backdrop className={cn(styles.backdrop, className)} data-slot=\"select-backdrop\" {...props} />;\n}\n\nfunction SelectPositioner({ className, ...props }: React.ComponentProps<typeof Select.Positioner>) {\n  return <Select.Positioner className={cn(styles.positioner, className)} data-slot=\"select-positioner\" {...props} />;\n}\n\nfunction SelectScrollUpArrow({ className, children, ...props }: React.ComponentProps<typeof Select.ScrollUpArrow>) {\n  return (\n    <Select.ScrollUpArrow className={cn(styles.scrollArrow, className)} data-slot=\"select-scrolluparrow\" {...props}>\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 <Select.Popup className={cn(styles.popup, className)} {...props} />;\n}\n\nfunction SelectArrow({ className, ...props }: React.ComponentProps<typeof Select.Arrow>) {\n  return <Select.Arrow className={cn(styles.arrow, className)} {...props} />;\n}\n\nfunction SelectScrollDownArrow({ className, children, ...props }: React.ComponentProps<typeof Select.ScrollDownArrow>) {\n  return (\n    <Select.ScrollDownArrow className={cn(styles.scrollArrow, className)} data-slot=\"select-scrolldownarrow\" {...props}>\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(styles.list, className)} {...props} />;\n}\n\nfunction SelectItem({ className, ...props }: React.ComponentProps<typeof Select.Item>) {\n  return <Select.Item className={cn(styles.item, className)} {...props} />;\n}\n\nfunction SelectItemText({ className, ...props }: React.ComponentProps<typeof Select.ItemText>) {\n  return <Select.ItemText className={cn(styles.itemText, className)} data-slot=\"select-itemtext\" {...props} />;\n}\n\nfunction SelectGroup({ className, ...props }: React.ComponentProps<typeof Select.Group>) {\n  return <Select.Group className={cn(styles.selectGroup, className)} data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectGroupLabel({ className, ...props }: React.ComponentProps<typeof Select.GroupLabel>) {\n  return <Select.GroupLabel className={cn(styles.groupLabel, className)} data-slot=\"select-grouplabel\" {...props} />;\n}\n\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<typeof Select.Separator>) {\n  return <Select.Separator className={cn(styles.separator, className)} data-slot=\"select-separator\" {...props} />;\n}\n\nfunction SelectItemIndicator({ className, children, ...props }: React.ComponentProps<typeof Select.ItemIndicator>) {\n  return (\n    <Select.ItemIndicator className={cn(styles.indicator, className)} data-slot=\"select-itemindicator\" {...props}>\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"
    },
    {
      "path": "registry/brook/ui/select/select.module.css",
      "content": ".container {\n  position: relative;\n  display: inline-block;\n  z-index: 150;\n}\n\n.trigger {\n  min-width: 9rem;\n  background-color: var(--popover);\n\n  &:hover:not(.disabled) {\n    background-color: var(--accent);\n    color: var(--foreground);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n\n  &[data-popup-open] {\n    background-color: var(--accent);\n    color: var(--foreground);\n\n    & .icon {\n      transform: rotate(180deg);\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  @media (max-width: 768px) {\n    min-width: 7rem;\n  }\n}\n\n.value {\n  flex: 1;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 1.25 !important;\n\n  &[data-placeholder] {\n    color: var(--muted-foreground);\n  }\n}\n\n.icon {\n  margin-left: 0.5rem;\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  opacity: 0.5;\n  transition: transform 0.2s ease-in-out;\n}\n\n.positioner {\n  z-index: 150;\n}\n\n.popup {\n  min-width: var(--anchor-width);\n  background: var(--popover);\n  border: none;\n  border-radius: var(--radius);\n  transform-origin: var(--transform-origin);\n  overflow-y: auto;\n  z-index: 150;\n  box-shadow:\n    0 0 0 0.5px oklch(from var(--border) l c h / 0.8),\n    var(--shadow-border-stack);\n  transition:\n    transform 250ms var(--ease-out-expo),\n    opacity 250ms var(--ease-out-expo);\n\n  &[data-starting-style] {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  &[data-side=\"none\"] {\n    transition: none;\n    transform: none;\n    opacity: 1;\n  }\n}\n\n.arrow {\n  width: 0.75rem;\n  height: 0.75rem;\n  background: var(--mix-card-33-bg);\n  border: 1px solid var(--border);\n  border-right: none;\n  border-bottom: none;\n  transform: rotate(45deg);\n  z-index: -1;\n}\n\n.scrollArrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.5rem;\n  background: var(--mix-card-33-bg);\n  border: none;\n  cursor: pointer;\n  color: var(--foreground);\n  transition: background-color 0.2s ease-in-out;\n\n  &:hover {\n    background-color: var(--muted);\n  }\n\n  &[data-state=\"hidden\"] {\n    display: none;\n  }\n}\n\n.list {\n  padding: 0;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  padding-inline: 8px 6px;\n  margin-inline: 4px;\n  min-height: 32px;\n  font-size: 0.875rem;\n  color: var(--foreground);\n  cursor: pointer;\n  border-radius: 0.3125rem;\n\n  outline: none;\n\n  &:hover:not(.itemDisabled) {\n    background-color: var(--accent);\n  }\n\n  &[data-highlighted] {\n    background-color: var(--muted);\n    color: var(--foreground);\n  }\n\n  &[data-selected] {\n    background-color: transparent;\n\n    & .indicator {\n      opacity: 1;\n    }\n  }\n\n  &.itemDisabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n\n.itemText {\n  flex: 1;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.indicator {\n  margin-left: 0.5rem;\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  color: var(--muted-foreground);\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.separator {\n  height: 1px;\n  background-color: var(--border);\n  margin: 0.25rem 0;\n}\n\n.selectGroup {\n  padding: 0;\n}\n\n.groupLabel {\n  padding: 0.375rem 0.75rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--muted-foreground);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 140;\n  transition: opacity 150ms;\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/select/select.module.css"
    }
  ]
}