{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/default/ui/select.tsx",
      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  ChevronDownIcon,\n  ChevronsUpDownIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const Select: typeof SelectPrimitive.Root = SelectPrimitive.Root;\n\nexport const selectTriggerVariants = cva(\n  \"relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none\",\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"\",\n        lg: \"min-h-10 sm:min-h-9\",\n        sm: \"min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7\",\n      },\n    },\n  },\n);\n\nexport const selectTriggerIconClassName = \"-me-1 size-4.5 opacity-80 sm:size-4\";\n\nexport interface SelectButtonProps extends useRender.ComponentProps<\"button\"> {\n  size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n}\n\nexport function SelectButton({\n  className,\n  size,\n  render,\n  children,\n  ...props\n}: SelectButtonProps): React.ReactElement {\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"] =\n    render ? undefined : \"button\";\n\n  const defaultProps = {\n    children: (\n      <>\n        <span className=\"flex-1 truncate in-data-placeholder:text-muted-foreground/72\">\n          {children}\n        </span>\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </>\n    ),\n    className: cn(selectTriggerVariants({ size }), \"min-w-0\", className),\n    \"data-slot\": \"select-button\",\n    type: typeValue,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props &\n  VariantProps<typeof selectTriggerVariants>): React.ReactElement {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(selectTriggerVariants({ size }), className)}\n      data-slot=\"select-trigger\"\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\">\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nexport function SelectValue({\n  className,\n  ...props\n}: SelectPrimitive.Value.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Value\n      className={cn(\n        \"flex-1 truncate data-placeholder:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"select-value\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"start\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  anchor,\n  portalProps,\n  ...props\n}: SelectPrimitive.Popup.Props & {\n  portalProps?: SelectPrimitive.Portal.Props;\n  side?: SelectPrimitive.Positioner.Props[\"side\"];\n  sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"];\n  align?: SelectPrimitive.Positioner.Props[\"align\"];\n  alignOffset?: SelectPrimitive.Positioner.Props[\"alignOffset\"];\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"];\n  anchor?: SelectPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <SelectPrimitive.Portal {...portalProps}>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"select-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          className=\"origin-(--transform-origin) text-foreground outline-none\"\n          data-slot=\"select-popup\"\n          {...props}\n        >\n          <SelectPrimitive.ScrollUpArrow\n            className=\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-up-arrow\"\n          >\n            <ChevronUpIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollUpArrow>\n          <div className=\"relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\">\n            <SelectPrimitive.List\n              className={cn(\n                \"max-h-(--available-height) overflow-y-auto p-1\",\n                className,\n              )}\n              data-slot=\"select-list\"\n            >\n              {children}\n            </SelectPrimitive.List>\n          </div>\n          <SelectPrimitive.ScrollDownArrow\n            className=\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-down-arrow\"\n          >\n            <ChevronDownIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollDownArrow>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_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      <SelectPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText className=\"wrap-anywhere col-start-2 min-w-0\">\n        {children}\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroup(\n  props: SelectPrimitive.Group.Props,\n): React.ReactElement {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nexport function SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.Label.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Label\n      className={cn(\n        \"not-in-data-[slot=field]:mb-2 inline-flex cursor-default items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\",\n        className,\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroupLabel(\n  props: SelectPrimitive.GroupLabel.Props,\n): React.ReactElement {\n  return (\n    <SelectPrimitive.GroupLabel\n      className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\"\n      data-slot=\"select-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport { SelectPrimitive, SelectPopup as SelectContent };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}