{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "description": "The shadcn Select on Base UI, not Radix. A 44px Input-family trigger; the highlighted item wears the accent WASH with an ink label (never orange text); the popup is the raised surface with the overlay shadow and a scale/opacity enter; the focus ring is --text; aria-invalid draws a 2px --danger edge, the border plus a solid 1px ring, never an opacity fade, measured at 4.38:1 or better on every ground.",
  "dependencies": [
    "@base-ui/react@1.9.0",
    "lucide-react@1.33.0"
  ],
  "registryDependencies": [
    "@waimakers/utils",
    "@waimakers/theme",
    "@waimakers/separator"
  ],
  "files": [
    {
      "path": "src/components/ui/select.tsx",
      "content": "import { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn, focusRing, invalidRing } from \"../../lib/utils\";\nimport { Separator } from \"./separator\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\n\nfunction SelectValue({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"truncate text-left data-placeholder:text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(\n        \"flex h-11 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors ease-brand\",\n        \"data-popup-open:bg-muted\",\n        focusRing,\n        invalidRing,\n        \"data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon className=\"shrink-0 text-muted-foreground\">\n        <ChevronDownIcon className=\"size-4\" aria-hidden />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up\"\n      className={cn(\n        \"flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" aria-hidden />\n    </SelectPrimitive.ScrollUpArrow>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down\"\n      className={cn(\n        \"flex h-6 cursor-default items-center justify-center bg-popover text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" aria-hidden />\n    </SelectPrimitive.ScrollDownArrow>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Popup> & { sideOffset?: number }) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        className=\"z-(--z-modal,50) outline-none\"\n        sideOffset={sideOffset}\n        alignItemWithTrigger={false}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"max-h-[var(--available-height)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-brand-overlay\",\n            \"transition-[transform,opacity] duration-(--dur-fast,120ms) ease-brand motion-reduce:transition-none\",\n            \"data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0\",\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List className=\"max-h-[var(--available-height)] overflow-y-auto scroll-py-1 p-1 [scrollbar-width:thin]\">\n            {children}\n          </SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-group-label\"\n      className={cn(\n        \"px-2 py-1.5 text-brand-eyebrow font-semibold tracking-brand-eyebrow text-muted-foreground uppercase\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"grid cursor-default grid-cols-[1.25rem_1fr] items-center gap-1.5 rounded-sm px-2 py-2 text-sm text-foreground outline-none transition-colors select-none\",\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator className=\"col-start-1 flex items-center justify-center\">\n        <CheckIcon className=\"size-4\" aria-hidden />\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText className=\"col-start-2\">{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"select-separator\"\n      className={cn(\"mx-1 my-1 data-[orientation=horizontal]:w-auto\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectGroupLabel,\n  SelectItem,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/select.tsx"
    }
  ],
  "type": "registry:ui"
}