{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "description": "Dropdown list for choosing one value, built on Radix.",
  "dependencies": [
    "lucide-react@^1.27.0",
    "radix-ui@^1.6.7"
  ],
  "registryDependencies": [
    "@pestoui/style",
    "@pestoui/utils"
  ],
  "files": [
    {
      "path": "pestoui/ui/select.tsx",
      "content": "import * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        /* A disabled trigger nudges when pressed rather than doing nothing, as\n           the Switch does. It works because the box is not\n           `pointer-events-none`: a disabled button still takes `:active`.\n           Measured in headed and headless Chromium with the mouse held, two\n           presses: `:active` on every frame, `nudge` running at -1.9px. */\n        \"group/select-trigger flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-card shadow-xs py-2 pr-3 pl-4 text-body whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-disabled:active:animate-nudge aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-11 data-[size=sm]:h-9 data-[size=sm]:rounded-[min(var(--radius-md),12px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        {/* Flips to point at the open panel. The flip is the Switch's travel\n            (`turn-travel`: past the half turn and back); the press is a squeeze\n            of the chevron, never of the trigger, because the panel is\n            positioned against the trigger's box. No lean: a mouse opens Select\n            on pointerdown, so the turn has already begun and a lean would point\n            back the way it came.\n\n            Whether the squeeze shows depends on focus, not on the\n            default-prevented pointerdown. Measured in headed and headless\n            Chromium with the mouse held: a press on a trigger that is not\n            focused keeps `:active` on every frame and the chevron reaches\n            0.9; a press on a trigger that already has focus never matches\n            `:active`, because opening moves focus into the panel and Chromium\n            drops `:active` from an element that loses focus mid-press. Radix\n            hands focus back to the trigger on close, so an immediate re-open\n            gets the flip alone. Touch and pen were not measured. */}\n        <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground turn-travel group-active/select-trigger:press-turn group-active/select-trigger:[--turn-dir:0] group-data-open/select-trigger:rotate-180\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\n/* Options land one after another instead of arriving as a slab. Capped at eight\n   beats — everything past the cap shares the last delay, so a fifty-option list\n   still finishes in about a third of a second rather than crawling. */\nconst selectItemStagger = [\n  \"[&>*]:animate-in [&>*]:fade-in-0 [&>*]:slide-in-from-top-[6px] [&>*]:blur-in-[3px]\",\n  \"[&>*]:fill-mode-backwards [&>*]:anim-base [&>*]:ease-out-expo\",\n  \"[&>*:nth-child(2)]:[--tw-animation-delay:calc(1*var(--stagger-base))]\",\n  \"[&>*:nth-child(3)]:[--tw-animation-delay:calc(2*var(--stagger-base))]\",\n  \"[&>*:nth-child(4)]:[--tw-animation-delay:calc(3*var(--stagger-base))]\",\n  \"[&>*:nth-child(5)]:[--tw-animation-delay:calc(4*var(--stagger-base))]\",\n  \"[&>*:nth-child(6)]:[--tw-animation-delay:calc(5*var(--stagger-base))]\",\n  \"[&>*:nth-child(7)]:[--tw-animation-delay:calc(6*var(--stagger-base))]\",\n  \"[&>*:nth-child(n+8)]:[--tw-animation-delay:calc(7*var(--stagger-base))]\",\n].join(\" \")\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  align = \"start\",\n  sideOffset = 6,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\n          \"relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[align-trigger=true]:animate-none\",\n          /* Unfolds from the trigger — Radix supplies the origin, the panel\n             spring supplies the weight. */\n          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-[0.96] data-open:anim-spring-panel data-open:ease-spring-panel data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          /* Dismissal drops the spring for a short tween and travels half as\n             far back toward the trigger. */\n          \"data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-[0.98] data-closed:anim-exit data-closed:ease-out-expo data-[side=bottom]:slide-out-to-top-1 data-[side=left]:slide-out-to-right-1 data-[side=right]:slide-out-to-left-1 data-[side=top]:slide-out-to-bottom-1\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"p-2 data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            selectItemStagger\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2.5 py-1.5 text-xs text-muted-foreground\", className)}\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        \"relative flex w-full cursor-default items-center gap-2 rounded-md py-2 pr-9 pl-2.5 text-body outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        /* Highlight tracking has to keep up with the pointer, so this is one of\n           the few places fast beats smooth. */\n        \"transition-colors duration-instant ease-out-expo\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2.5 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          {/* The tick presses in rather than blinking on. */}\n          <CheckIcon className=\"pointer-events-none animate-in fade-in-0 zoom-in-50 anim-spring ease-spring-press\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}