{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "description": "A common form component for choosing a predefined value in a dropdown menu.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "@lumi-ui/arrow-svg"
  ],
  "files": [
    {
      "path": "registry/ui/select.tsx",
      "content": "\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { ArrowSvg } from \"@/registry/ui/arrow-svg\";\n\nfunction Select<Value, Multiple extends boolean | undefined = false>(\n  props: BaseSelect.Root.Props<Value, Multiple>,\n): React.JSX.Element {\n  return <BaseSelect.Root {...props} data-slot=\"select\" />;\n}\n\nfunction SelectLabel({\n  children,\n  className,\n  ...props\n}: BaseSelect.Label.Props) {\n  return (\n    <BaseSelect.Label\n      className={cn(\n        \"text-sm leading-none font-medium cursor-default\",\n        className,\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    >\n      {children}\n    </BaseSelect.Label>\n  );\n}\n\nfunction SelectTrigger({\n  children,\n  className,\n  ...props\n}: BaseSelect.Trigger.Props) {\n  return (\n    <BaseSelect.Trigger\n      className={cn(\n        \"select-none pointer-coarse:after:absolute pointer-coarse:after:min-h-10 pointer-coarse:after:min-w-10\",\n        className,\n      )}\n      data-slot=\"select-trigger\"\n      {...props}\n    >\n      {children}\n    </BaseSelect.Trigger>\n  );\n}\n\nfunction SelectValue({\n  className,\n  placeholder,\n  children,\n  ...props\n}: BaseSelect.Value.Props & {\n  placeholder?: string;\n}) {\n  return (\n    <BaseSelect.Value\n      className={cn(\n        \"flex items-center gap-2 line-clamp-1 data-placeholder:text-muted-foreground data-placeholder:before:content-[attr(data-placeholder-text)]\",\n        className,\n      )}\n      data-placeholder-text={placeholder}\n      data-slot=\"select-value\"\n      {...props}\n    >\n      {children}\n    </BaseSelect.Value>\n  );\n}\n\nfunction SelectIcon({ className, ...props }: BaseSelect.Icon.Props) {\n  return (\n    <BaseSelect.Icon\n      className={cn(\"pointer-events-none\", className)}\n      data-slot=\"select-icon\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectBackdrop({ className, ...props }: BaseSelect.Backdrop.Props) {\n  return (\n    <BaseSelect.Backdrop\n      className={cn(className)}\n      data-slot=\"select-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectPortal({ className, ...props }: BaseSelect.Portal.Props) {\n  return (\n    <BaseSelect.Portal\n      className={cn(className)}\n      data-slot=\"select-portal\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectPositioner({\n  className,\n  alignItemWithTrigger,\n  ...props\n}: BaseSelect.Positioner.Props) {\n  return (\n    <BaseSelect.Positioner\n      alignItemWithTrigger={alignItemWithTrigger}\n      className={cn(\"outline-hidden select-none z-10\", className)}\n      data-slot=\"select-positioner\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectPopup({ className, ...props }: BaseSelect.Popup.Props) {\n  return (\n    <BaseSelect.Popup\n      className={cn(className)}\n      data-slot=\"select-popup\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectList({ className, ...props }: BaseSelect.List.Props) {\n  return (\n    <BaseSelect.List\n      className={cn(className)}\n      data-slot=\"select-list\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectArrow({ className, ...props }: BaseSelect.Arrow.Props) {\n  return (\n    <BaseSelect.Arrow\n      className={cn(className)}\n      data-slot=\"select-arrow\"\n      {...props}\n    >\n      <ArrowSvg />\n    </BaseSelect.Arrow>\n  );\n}\n\nfunction SelectItem({ className, children, ...props }: BaseSelect.Item.Props) {\n  return (\n    <BaseSelect.Item\n      className={cn(className)}\n      data-slot=\"select-item\"\n      {...props}\n    >\n      {children}\n    </BaseSelect.Item>\n  );\n}\n\nfunction SelectItemText({ className, ...props }: BaseSelect.ItemText.Props) {\n  return (\n    <BaseSelect.ItemText\n      className={cn(className)}\n      data-slot=\"select-item-text\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectItemIndicator({\n  className,\n  ...props\n}: BaseSelect.ItemIndicator.Props) {\n  return (\n    <BaseSelect.ItemIndicator\n      className={cn(className)}\n      data-slot=\"select-item-indicator\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectGroup({ className, ...props }: BaseSelect.Group.Props) {\n  return (\n    <BaseSelect.Group\n      className={cn(className)}\n      data-slot=\"select-group\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectGroupLabel({\n  className,\n  ...props\n}: BaseSelect.GroupLabel.Props) {\n  return (\n    <BaseSelect.GroupLabel\n      className={cn(\n        \"px-3.5 py-1.5 text-xs text-muted-foreground font-medium select-none\",\n        className,\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectSeparator({ className, ...props }: BaseSelect.Separator.Props) {\n  return (\n    <BaseSelect.Separator\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpArrow({\n  className,\n  ...props\n}: BaseSelect.ScrollUpArrow.Props) {\n  return (\n    <BaseSelect.ScrollUpArrow\n      className={cn(\n        \"top-0 z-1 flex h-7 w-full cursor-default items-center justify-center rounded-md bg-popover text-center text-xs before:absolute data-[side=none]:before:-top-full before:left-0 before:h-full before:w-full before:content-['']\",\n        className,\n      )}\n      data-slot=\"select-scroll-up-button\"\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </BaseSelect.ScrollUpArrow>\n  );\n}\n\nfunction SelectScrollDownArrow({\n  className,\n  ...props\n}: BaseSelect.ScrollDownArrow.Props) {\n  return (\n    <BaseSelect.ScrollDownArrow\n      className={cn(\n        \"bottom-0 z-1 flex h-7 w-full cursor-default items-center justify-center rounded-md bg-popover text-center text-xs before:absolute data-[side=none]:before:-bottom-full before:left-0 before:h-full before:w-full before:content-['']\",\n        className,\n      )}\n      data-slot=\"select-scroll-down-button\"\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </BaseSelect.ScrollDownArrow>\n  );\n}\n\ntype SelectTriggerGroupProps = Omit<BaseSelect.Trigger.Props, \"children\"> & {\n  size?: \"default\" | \"sm\" | \"lg\";\n  indicatorIcon?: React.ReactNode;\n  indicatorPlacement?: \"start\" | \"end\";\n  placeholder?: string;\n  children?: BaseSelect.Value.Props[\"children\"];\n  label?: string;\n};\n\nfunction SelectTriggerGroup({\n  className,\n  children,\n  size = \"default\",\n  indicatorIcon,\n  indicatorPlacement = \"end\",\n  placeholder,\n  label,\n  ...props\n}: SelectTriggerGroupProps) {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {label && <SelectLabel>{label}</SelectLabel>}\n      <BaseSelect.Trigger\n        className={cn(\n          \"border shadow-xs bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/60 data-popup-open:bg-accent data-popup-open:text-accent-foreground dark:data-popup-open:bg-accent/60\",\n          \"group flex items-center gap-2 min-w-32\",\n          \"rounded-md text-sm transition-[color,box-shadow]\",\n          \"focus-visible:outline focus-visible:outline-ring focus-visible:ring-4 focus-visible:ring-ring/10\",\n          \"data-invalid:border-destructive data-invalid:ring-destructive/20 dark:data-invalid:ring-destructive/40\",\n          \"data-disabled:opacity-50 data-disabled:hover:bg-transparent\",\n          \"[&>span[data-slot='select-value']]:flex-1 [&>span[data-slot='select-value']]:text-left [&>span[data-slot='select-value']]:truncate [&>span[data-slot='select-value']]:min-w-0\",\n          \"data-[size=default]:h-9 data-[size=sm]:h-8 data-[size=lg]:h-10\",\n          \"data-[size=default]:py-1.5 data-[size=sm]:py-1 data-[size=lg]:py-2\",\n          indicatorPlacement === \"start\" ? \"pl-1\" : \"pl-3 pr-1\",\n          className,\n        )}\n        data-size={size}\n        data-slot=\"select-trigger-group\"\n        {...props}\n      >\n        <BaseSelect.Value\n          className=\"flex flex-1 items-center gap-2 truncate line-clamp-1 data-placeholder:text-muted-foreground data-placeholder:before:content-[attr(data-placeholder-text)]\"\n          data-placeholder-text={placeholder}\n          data-slot=\"select-value\"\n        >\n          {children}\n        </BaseSelect.Value>\n        <BaseSelect.Icon\n          className={cn(\n            \"flex-none shrink-0 pointer-events-none size-6 flex items-center justify-center\",\n            \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:transition-all\",\n            indicatorPlacement === \"start\" && \"-order-1\",\n          )}\n          data-slot=\"select-icon\"\n        >\n          {indicatorIcon || <ChevronDownIcon />}\n        </BaseSelect.Icon>\n      </BaseSelect.Trigger>\n    </div>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 6,\n  alignOffset = 0,\n  alignItemWithTrigger = false,\n  ...props\n}: BaseSelect.Popup.Props &\n  Pick<\n    BaseSelect.Positioner.Props,\n    \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPortal>\n      <BaseSelect.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        className=\"outline-hidden select-none z-10\"\n        data-slot=\"select-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <BaseSelect.Popup\n          className={cn(\n            \"bg-popover text-popover-foreground rounded-md shadow-md overflow-hidden bg-clip-padding\",\n            \"overlay-outline animate-popup\",\n            \"[&:not([data-side=none])]:max-h-(--available-height) min-w-(--anchor-width)\",\n            \"data-[side=none]:data-ending-style:transition-none data-[side=none]:data-starting-style:transition-none data-[side=none]:data-starting-style:scale-100 data-[side=none]:data-starting-style:opacity-100 data-[side=none]:min-w-[calc(var(--anchor-width)+0.2rem)]\",\n            className,\n          )}\n          data-slot=\"select-content\"\n          {...props}\n        >\n          <SelectScrollUpArrow />\n          <BaseSelect.List\n            className=\"relative py-1 scroll-py-6 overflow-y-auto max-h-[min(20rem,var(--available-height))]\"\n            data-slot=\"select-list\"\n          >\n            {children}\n          </BaseSelect.List>\n          <SelectScrollDownArrow />\n        </BaseSelect.Popup>\n      </BaseSelect.Positioner>\n    </SelectPortal>\n  );\n}\n\ninterface SelectItemContentProps extends BaseSelect.Item.Props {\n  indicatorPlacement?: \"start\" | \"end\";\n  indicatorIcon?: React.ReactNode;\n  hideIndicator?: boolean;\n}\n\nfunction SelectItemContent({\n  className,\n  children,\n  indicatorPlacement = \"end\",\n  indicatorIcon = <CheckIcon />,\n  hideIndicator = false,\n  ...props\n}: SelectItemContentProps) {\n  const hasIndicator = !hideIndicator;\n  const isStart = hasIndicator && indicatorPlacement === \"start\";\n  const isEnd = hasIndicator && indicatorPlacement === \"end\";\n\n  return (\n    <BaseSelect.Item\n      className={cn(\n        \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 text-sm outline-none\",\n        \"highlight-on-active\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        hasIndicator && \"grid gap-2 pl-3.5\",\n        isStart && \"grid-cols-[1rem_1fr] pr-8\",\n        isEnd && \"grid-cols-[1fr_1rem] pr-3\",\n        !hasIndicator && \"px-3.5\",\n        className,\n      )}\n      data-slot=\"select-item\"\n      {...props}\n    >\n      {hasIndicator && (\n        <BaseSelect.ItemIndicator\n          className={cn(\n            \"flex items-center justify-center row-start-1\",\n            \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n            isStart ? \"col-start-1\" : \"col-start-2\",\n          )}\n          data-slot=\"select-item-indicator\"\n        >\n          {indicatorIcon}\n        </BaseSelect.ItemIndicator>\n      )}\n      <BaseSelect.ItemText\n        className={cn(\n          \"flex items-center gap-2 row-start-1 truncate\",\n          isStart && \"col-start-2\",\n          isEnd && \"col-start-1\",\n        )}\n        data-slot=\"select-item-text\"\n      >\n        {children}\n      </BaseSelect.ItemText>\n    </BaseSelect.Item>\n  );\n}\n\nexport {\n  Select,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectBackdrop,\n  SelectPortal,\n  SelectPositioner,\n  SelectPopup,\n  SelectList,\n  SelectArrow,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n  SelectGroup,\n  SelectGroupLabel,\n  SelectScrollUpArrow,\n  SelectScrollDownArrow,\n  SelectSeparator,\n  // Composite components\n  SelectTriggerGroup,\n  SelectContent,\n  SelectItemContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}