{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "description": "Displays a list of options for the user to pick from—triggered by a button.",
  "dependencies": [
    "@base-ui/react",
    "@tabler/icons-react"
  ],
  "registryDependencies": [
    "@ondo-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/select.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/lib/utils\"\nimport { IconSelector, IconCheck, IconChevronUp, IconChevronDown } from \"@tabler/icons-react\"\n\ntype SelectSize = \"xs\" | \"sm\" | \"default\" | \"lg\" | \"xl\" | \"2xl\"\n\nconst SelectSizeContext = React.createContext<SelectSize>(\"default\")\n\nfunction Select<Value, Multiple extends boolean | undefined = false>({\n  size = \"default\",\n  ...props\n}: SelectPrimitive.Root.Props<Value, Multiple> & { size?: SelectSize }) {\n  return (\n    <SelectSizeContext.Provider value={size}>\n      <SelectPrimitive.Root {...props} />\n    </SelectSizeContext.Provider>\n  )\n}\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\n        \"scroll-my-1 p-1 group-data-[size=xs]/select-content:p-0.5 group-data-[size=xl]/select-content:p-1.5 group-data-[size=2xl]/select-content:p-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size,\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: SelectSize\n}) {\n  const contextSize = React.useContext(SelectSizeContext)\n\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size ?? contextSize}\n      className={cn(\n        \"group/select-trigger flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=lg]:h-10 data-[size=sm]:h-8 data-[size=xs]:h-6 data-[size=xs]:gap-1 data-[size=xs]:py-1 data-[size=xs]:pr-1.5 data-[size=xs]:pl-2 data-[size=xs]:text-xs data-[size=xl]:h-11 data-[size=xl]:rounded-lg data-[size=xl]:pl-3 data-[size=xl]:text-base data-[size=2xl]:h-13 data-[size=2xl]:rounded-xl data-[size=2xl]:pl-4 data-[size=2xl]:text-lg *: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\n        render={\n          <IconSelector className=\"pointer-events-none size-4 text-muted-foreground group-data-[size=xs]/select-trigger:size-3 group-data-[size=xl]/select-trigger:size-5 group-data-[size=2xl]/select-trigger:size-6\" />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  const size = React.useContext(SelectSizeContext)\n\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          data-size={size}\n          className={cn(\"group/select-content relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground data-[size=xs]:rounded-[min(var(--radius-md),8px)] data-[size=xl]:rounded-lg data-[size=2xl]:rounded-xl shadow-md ring-1 ring-foreground/10 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-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\", className )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\n        \"px-2 py-1.5 text-xs text-muted-foreground group-data-[size=xs]/select-content:px-1.5 group-data-[size=xs]/select-content:py-1 group-data-[size=xl]/select-content:px-2.5 group-data-[size=xl]/select-content:text-sm group-data-[size=2xl]/select-content:px-3 group-data-[size=2xl]/select-content:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\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-sm py-1.5 pr-8 pl-2 text-sm 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 group-data-[size=xs]/select-content:gap-1.5 group-data-[size=xs]/select-content:py-1 group-data-[size=xs]/select-content:pr-7 group-data-[size=xs]/select-content:pl-1.5 group-data-[size=xs]/select-content:text-xs group-data-[size=xl]/select-content:rounded-md group-data-[size=2xl]/select-content:rounded-lg group-data-[size=xl]/select-content:gap-2.5 group-data-[size=xl]/select-content:py-2 group-data-[size=xl]/select-content:pr-9 group-data-[size=xl]/select-content:pl-2.5 group-data-[size=xl]/select-content:text-base group-data-[size=2xl]/select-content:gap-3 group-data-[size=2xl]/select-content:py-2.5 group-data-[size=2xl]/select-content:pr-10 group-data-[size=2xl]/select-content:pl-3 group-data-[size=2xl]/select-content:text-lg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 group-data-[size=xs]/select-content:[&_svg:not([class*='size-'])]:size-3.5 group-data-[size=xl]/select-content:[&_svg:not([class*='size-'])]:size-5 group-data-[size=2xl]/select-content:[&_svg:not([class*='size-'])]:size-6 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\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 group-data-[size=xs]/select-content:right-1.5 group-data-[size=xs]/select-content:size-3.5 group-data-[size=xl]/select-content:right-2.5 group-data-[size=xl]/select-content:size-5 group-data-[size=2xl]/select-content:right-3 group-data-[size=2xl]/select-content:size-6\" />\n        }\n      >\n        <IconCheck className=\"pointer-events-none\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\n        \"pointer-events-none -mx-1 my-1 h-px bg-border group-data-[size=xs]/select-content:-mx-0.5 group-data-[size=xl]/select-content:-mx-1.5 group-data-[size=2xl]/select-content:-mx-2\",\n        className\n      )}\n      {...props}\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      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 group-data-[size=xs]/select-content:py-0.5 group-data-[size=xl]/select-content:py-1.5 group-data-[size=2xl]/select-content:py-2 [&_svg:not([class*='size-'])]:size-4 group-data-[size=xs]/select-content:[&_svg:not([class*='size-'])]:size-3 group-data-[size=xl]/select-content:[&_svg:not([class*='size-'])]:size-5 group-data-[size=2xl]/select-content:[&_svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    >\n      <IconChevronUp\n      />\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      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 group-data-[size=xs]/select-content:py-0.5 group-data-[size=xl]/select-content:py-1.5 group-data-[size=2xl]/select-content:py-2 [&_svg:not([class*='size-'])]:size-4 group-data-[size=xs]/select-content:[&_svg:not([class*='size-'])]:size-3 group-data-[size=xl]/select-content:[&_svg:not([class*='size-'])]:size-5 group-data-[size=2xl]/select-content:[&_svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    >\n      <IconChevronDown\n      />\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"
    }
  ],
  "type": "registry:ui"
}