{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "author": "andongmin94",
  "description": "A dropdown control for choosing one value from a list.",
  "dependencies": [
    "@base-ui/react@^1.9.0"
  ],
  "files": [
    {
      "path": "src/components/ui/select.tsx",
      "content": "\"use client\";\n\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport type * as React from \"react\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype SelectProps = SelectPrimitive.Root.Props<string> & {\n  dir?: \"ltr\" | \"rtl\";\n};\n\ntype SelectContentProps = SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    | \"align\"\n    | \"alignItemWithTrigger\"\n    | \"alignOffset\"\n    | \"anchor\"\n    | \"arrowPadding\"\n    | \"collisionAvoidance\"\n    | \"collisionBoundary\"\n    | \"collisionPadding\"\n    | \"disableAnchorTracking\"\n    | \"positionMethod\"\n    | \"side\"\n    | \"sideOffset\"\n    | \"sticky\"\n  >;\n\nfunction Select({ dir, ...props }: SelectProps) {\n  const root = <SelectPrimitive.Root {...props} />;\n\n  return dir === undefined ? root : <DirectionProvider direction={dir}>{root}</DirectionProvider>;\n}\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      {...props}\n      className={(state) =>\n        cn(\"scroll-my-1 p-1\", typeof className === \"function\" ? className(state) : className)\n      }\n    />\n  );\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      {...props}\n      className={(state) =>\n        cn(\"flex flex-1 text-left\", typeof className === \"function\" ? className(state) : className)\n      }\n    />\n  );\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\";\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      {...props}\n      className={(state) =>\n        cn(\n          \"flex h-10 w-full items-center justify-between gap-2 rounded-base border-2 border-border bg-main px-3 py-2 text-sm font-base text-main-foreground whitespace-nowrap outline-hidden transition-colors select-none placeholder:text-foreground/50 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-main-foreground/70 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          typeof className === \"function\" ? className(state) : className,\n        )\n      }\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={<ChevronDownIcon className=\"pointer-events-none size-4 opacity-70\" />}\n      />\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({\n  align = \"start\",\n  alignItemWithTrigger = false,\n  alignOffset = 0,\n  anchor,\n  arrowPadding = 0,\n  children,\n  className,\n  collisionAvoidance,\n  collisionBoundary,\n  collisionPadding = 0,\n  disableAnchorTracking,\n  positionMethod,\n  side = \"bottom\",\n  sideOffset = 4,\n  sticky,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        anchor={anchor}\n        arrowPadding={arrowPadding}\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        collisionAvoidance={collisionAvoidance}\n        collisionBoundary={collisionBoundary}\n        collisionPadding={collisionPadding}\n        disableAnchorTracking={disableAnchorTracking}\n        positionMethod={positionMethod}\n        sticky={sticky}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          {...props}\n          className={(state) =>\n            cn(\n              \"relative isolate z-50 flex max-h-[min(24rem,var(--available-height))] w-[calc(var(--anchor-width)+4px)] min-w-[8rem] origin-(--transform-origin) flex-col overflow-hidden rounded-base border-2 border-border bg-main font-base text-main-foreground duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-[side=none]:max-h-96 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n              typeof className === \"function\" ? className(state) : className,\n            )\n          }\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">\n            {children}\n          </SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      {...props}\n      className={(state) =>\n        cn(\n          \"border-2 border-transparent py-1.5 pr-8 pl-2 text-sm font-base text-main-foreground/80\",\n          typeof className === \"function\" ? className(state) : className,\n        )\n      }\n    />\n  );\n}\n\nfunction SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      {...props}\n      className={(state) =>\n        cn(\n          \"relative flex w-full cursor-default items-center gap-2 rounded-base border-2 border-transparent py-1.5 pr-8 pl-2 text-sm font-base outline-hidden select-none data-highlighted:border-main-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          typeof className === \"function\" ? className(state) : className,\n        )\n      }\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <CheckIcon className=\"pointer-events-none\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      {...props}\n      className={(state) =>\n        cn(\n          \"pointer-events-none -mx-1 my-1 h-px bg-border\",\n          typeof className === \"function\" ? className(state) : className,\n        )\n      }\n    />\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-button\"\n      {...props}\n      className={(state) =>\n        cn(\n          \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-main py-1 [&_svg:not([class*='size-'])]:size-4\",\n          typeof className === \"function\" ? className(state) : className,\n        )\n      }\n    >\n      <ChevronUpIcon />\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-button\"\n      {...props}\n      className={(state) =>\n        cn(\n          \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-main py-1 [&_svg:not([class*='size-'])]:size-4\",\n          typeof className === \"function\" ? className(state) : className,\n        )\n      }\n    >\n      <ChevronDownIcon />\n    </SelectPrimitive.ScrollDownArrow>\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"
    }
  ],
  "categories": [
    "form",
    "selection"
  ],
  "type": "registry:ui"
}