{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "description": "A dropdown control for selecting one or more options from a list.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "files": [
    {
      "path": "packages/ui/src/select.tsx",
      "content": "\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport {\n  Check as CheckIcon,\n  ChevronDown as ChevronDownIcon,\n  ChevronUp as ChevronUpIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn, POPUP_ITEM_HEIGHT } from \"./utils\";\n\n// =============================================================================\n// Select (Root)\n// =============================================================================\nconst Select = SelectPrimitive.Root;\n\n// =============================================================================\n// SelectGroup\n// =============================================================================\nexport interface SelectGroupProps extends SelectPrimitive.Group.Props {}\n\nfunction SelectGroup({ className, ...props }: SelectGroupProps) {\n  return (\n    <SelectPrimitive.Group\n      className={cn(\"scroll-my-1 px-1\", className)}\n      data-slot=\"select-group\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// SelectValue\n// =============================================================================\nexport interface SelectValueProps extends SelectPrimitive.Value.Props {}\n\nfunction SelectValue({ className, ...props }: SelectValueProps) {\n  return (\n    <SelectPrimitive.Value\n      className={cn(\"flex flex-1 text-left\", className)}\n      data-slot=\"select-value\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// SelectTrigger\n// =============================================================================\nexport interface SelectTriggerProps extends SelectPrimitive.Trigger.Props {\n  /**\n   * Size variant of the trigger\n   * @default \"default\"\n   */\n  size?: \"sm\" | \"default\";\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectTriggerProps) {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        \"group flex w-fit select-none items-center justify-between gap-1.5 whitespace-nowrap rounded-md border border-input bg-input-bg py-2 pr-2 pl-3 text-sm shadow-xs outline-none transition-[color,box-shadow] focus:border-ring focus:ring-1 focus:ring-ring focus:ring-inset disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive data-[size=default]:h-10 data-[size=sm]:h-8 data-[popup-open]:border-ring data-placeholder:text-muted-foreground/70 data-[popup-open]:ring-1 data-[popup-open]:ring-ring data-[popup-open]:ring-inset *: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:aria-invalid:ring-destructive [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      data-size={size}\n      data-slot=\"select-trigger\"\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <ChevronDownIcon className=\"pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-150 ease-out group-data-[popup-open]:rotate-180\" />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  );\n}\n\n// =============================================================================\n// SelectContent\n// =============================================================================\nexport interface SelectContentProps extends SelectPrimitive.Popup.Props {\n  /**\n   * Alignment of the content\n   * @default \"center\"\n   */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * Whether to align the selected item with the trigger\n   * @default false\n   */\n  alignItemWithTrigger?: boolean;\n  /**\n   * Offset along the alignment axis\n   * @default 0\n   */\n  alignOffset?: number;\n  /**\n   * Side of the trigger to position the popup\n   * @default \"bottom\"\n   */\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"inline-start\" | \"inline-end\";\n  /**\n   * Offset from the trigger\n   * @default 4\n   */\n  sideOffset?: number;\n  /**\n   * Size of the menu items\n   * @default \"default\"\n   */\n  size?: \"default\" | \"compact\";\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = false,\n  size = \"default\",\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          className={cn(\n            \"relative isolate z-[var(--z-popover)] max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-lg ring-1 ring-popup-ring\",\n            className\n          )}\n          data-align-trigger={alignItemWithTrigger}\n          data-size={size}\n          data-slot=\"select-content\"\n          {...props}\n        >\n          <SelectPrimitive.List className=\"max-h-(--available-height) overflow-y-auto py-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n            <SelectScrollUpButton />\n            {children}\n            <SelectScrollDownButton />\n          </SelectPrimitive.List>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\n// =============================================================================\n// SelectLabel\n// =============================================================================\nexport interface SelectLabelProps extends SelectPrimitive.GroupLabel.Props {}\n\nfunction SelectLabel({ className, ...props }: SelectLabelProps) {\n  return (\n    <SelectPrimitive.GroupLabel\n      className={cn(\"px-1.5 py-1 text-muted-foreground text-xs\", className)}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// SelectItem\n// =============================================================================\nexport interface SelectItemProps extends SelectPrimitive.Item.Props {\n  children: React.ReactNode;\n  /**\n   * Custom indicator to show when item is selected.\n   * Set to `null` to hide the indicator.\n   * @default <CheckIcon />\n   */\n  indicator?: React.ReactNode;\n}\n\nfunction SelectItem({\n  className,\n  children,\n  indicator,\n  ...props\n}: SelectItemProps) {\n  const showDefaultIndicator = indicator === undefined;\n  const showCustomIndicator = indicator !== undefined && indicator !== null;\n\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        `relative flex focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:*:text-accent-foreground ${POPUP_ITEM_HEIGHT} w-full cursor-pointer select-none items-center gap-1.5 rounded-md text-sm outline-hidden data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2`,\n        showDefaultIndicator ? \"pr-8 pl-1.5\" : \"px-2\",\n        className\n      )}\n      data-slot=\"select-item\"\n      {...props}\n    >\n      {showCustomIndicator && (\n        <SelectPrimitive.ItemIndicator\n          keepMounted\n          render={<span className=\"flex items-center justify-center\" />}\n        >\n          {indicator}\n        </SelectPrimitive.ItemIndicator>\n      )}\n      <SelectPrimitive.ItemText className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      {showDefaultIndicator && (\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      )}\n    </SelectPrimitive.Item>\n  );\n}\n\n// =============================================================================\n// SelectSeparator\n// =============================================================================\nexport interface SelectSeparatorProps extends SelectPrimitive.Separator.Props {}\n\nfunction SelectSeparator({ className, ...props }: SelectSeparatorProps) {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\n        \"pointer-events-none -mx-1 my-1 h-px bg-border-muted\",\n        className\n      )}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// SelectScrollUpButton\n// =============================================================================\nexport interface SelectScrollUpButtonProps\n  extends React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow> {}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: SelectScrollUpButtonProps) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      className={cn(\n        \"sticky top-0 z-10 flex h-6 w-full cursor-default items-center justify-center bg-popover [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot=\"select-scroll-up-button\"\n      {...props}\n    >\n      <ChevronUpIcon />\n    </SelectPrimitive.ScrollUpArrow>\n  );\n}\n\n// =============================================================================\n// SelectScrollDownButton\n// =============================================================================\nexport interface SelectScrollDownButtonProps\n  extends React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow> {}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: SelectScrollDownButtonProps) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      className={cn(\n        \"sticky bottom-0 z-10 flex h-6 w-full cursor-default items-center justify-center bg-popover [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot=\"select-scroll-down-button\"\n      {...props}\n    >\n      <ChevronDownIcon />\n    </SelectPrimitive.ScrollDownArrow>\n  );\n}\n\nexport type { SelectRootProps as SelectProps } from \"@base-ui/react/select\";\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}