{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "author": "Matthew Blode",
  "description": "A dropdown control for choosing a single value from a list of options.",
  "dependencies": ["@base-ui/react"],
  "files": [
    {
      "path": "ui/select.tsx",
      "content": "\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"blode-icons-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { buttonVariants } from \"@/components/ui/button\";\n\ntype SelectProps<Value = string> = Omit<SelectPrimitive.Root.Props<Value>, \"onValueChange\"> & {\n  onValueChange?: (value: Value, eventDetails: SelectPrimitive.Root.ChangeEventDetails) => void;\n};\n\nconst Select = <Value = string,>({ onValueChange, ...props }: SelectProps<Value>) => (\n  <SelectPrimitive.Root\n    data-slot=\"select\"\n    onValueChange={(value, eventDetails) => {\n      if (value !== null) {\n        onValueChange?.(value as Value, eventDetails);\n      }\n    }}\n    {...props}\n  />\n);\n\nconst SelectGroup = ({ ...props }: SelectPrimitive.Group.Props) => (\n  <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n);\n\nconst SelectValue = ({ ...props }: SelectPrimitive.Value.Props) => (\n  <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n);\n\nconst SelectTrigger = ({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\";\n}) => (\n  <SelectPrimitive.Trigger\n    className={cn(\n      buttonVariants({\n        size: size === \"sm\" ? \"input-sm\" : \"input\",\n        variant: \"input\",\n      }),\n      \"w-full justify-between whitespace-normal pr-3\",\n      className,\n    )}\n    data-slot=\"select-trigger\"\n    {...props}\n  >\n    <span className=\"line-clamp-2 flex-1 pr-0.5 text-left\">{children}</span>\n    <SelectPrimitive.Icon render={<ChevronDownIcon className=\"size-4 opacity-50\" />} />\n  </SelectPrimitive.Trigger>\n);\n\nconst SelectScrollUpButton = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) => (\n  <SelectPrimitive.ScrollUpArrow\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    data-slot=\"select-scroll-up-button\"\n    {...props}\n  >\n    <ChevronUpIcon className=\"size-4\" />\n  </SelectPrimitive.ScrollUpArrow>\n);\n\nconst SelectScrollDownButton = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) => (\n  <SelectPrimitive.ScrollDownArrow\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    data-slot=\"select-scroll-down-button\"\n    {...props}\n  >\n    <ChevronDownIcon className=\"size-4\" />\n  </SelectPrimitive.ScrollDownArrow>\n);\n\nconst SelectContent = ({\n  className,\n  children,\n  position = \"item-aligned\",\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  > & {\n    position?: \"item-aligned\" | \"popper\";\n  }) => {\n  const shouldAlignItemWithTrigger = alignItemWithTrigger ?? position !== \"popper\";\n\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={shouldAlignItemWithTrigger}\n        alignOffset={alignOffset}\n        className=\"isolate z-110\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          className={cn(\n            \"data-open:fade-in-80 relative z-110 min-w-[8rem] origin-(--transform-origin) overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-soft data-closed:animate-out data-open:animate-in\",\n            position === \"popper\" && \"translate-y-1\",\n            className,\n          )}\n          data-slot=\"select-content\"\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List\n            className={cn(\n              \"scroll-fade max-h-(--available-height) overflow-x-hidden overflow-y-auto p-1\",\n              position === \"popper\" && \"w-full min-w-(--anchor-width) scroll-my-1\",\n            )}\n          >\n            {children}\n          </SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n};\n\nconst SelectLabel = ({ className, ...props }: SelectPrimitive.GroupLabel.Props) => (\n  <SelectPrimitive.GroupLabel\n    className={cn(\"py-1.5 pr-8 pl-2 font-semibold\", className)}\n    data-slot=\"select-label\"\n    {...props}\n  />\n);\n\nconst SelectItem = ({ className, children, ...props }: SelectPrimitive.Item.Props) => (\n  <SelectPrimitive.Item\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pr-8 pl-2 font-sans text-base leading-snug outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n      className,\n    )}\n    data-slot=\"select-item\"\n    {...props}\n  >\n    <span\n      className=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      data-slot=\"select-item-indicator\"\n    >\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"size-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n);\n\nconst SelectSeparator = ({ className, ...props }: SelectPrimitive.Separator.Props) => (\n  <SelectPrimitive.Separator\n    className={cn(\"mx-3 my-1 h-px bg-input\", className)}\n    data-slot=\"select-separator\"\n    {...props}\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",
      "target": ""
    }
  ],
  "type": "registry:ui"
}