{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "select",
  "title": "select",
  "description": "select",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/dropdown",
    "https://intentui.com/r/field",
    "https://intentui.com/r/popover"
  ],
  "files": [
    {
      "path": "src/components/ui/select.tsx",
      "content": "import { ChevronUpDownIcon } from \"@heroicons/react/20/solid\"\nimport { Button } from \"react-aria-components/Button\"\nimport { ListBox, type ListBoxProps } from \"react-aria-components/ListBox\"\nimport type { PopoverProps } from \"react-aria-components/Popover\"\nimport {\n  Select as SelectPrimitive,\n  type SelectProps as SelectPrimitiveProps,\n  SelectValue,\n} from \"react-aria-components/Select\"\nimport { twJoin } from \"cn\"\nimport { cx } from \"@/lib/primitive\"\nimport {\n  DropdownDescription,\n  DropdownItem,\n  DropdownLabel,\n  DropdownSection,\n  DropdownSeparator,\n} from \"./dropdown\"\nimport { fieldStyles } from \"./field\"\nimport { Popover } from \"./popover\"\n\nexport interface SelectProps<\n  T extends object,\n  M extends \"single\" | \"multiple\" = \"single\",\n> extends SelectPrimitiveProps<T, M> {\n  items?: Iterable<T, M>\n}\n\nexport function Select<T extends object, M extends \"single\" | \"multiple\" = \"single\">({\n  className,\n  ...props\n}: SelectProps<T, M>) {\n  return (\n    <SelectPrimitive\n      data-slot=\"control\"\n      className={cx(fieldStyles({ className: \"group/select\" }), className)}\n      {...props}\n    />\n  )\n}\n\nexport interface SelectListProps<T extends object> extends Omit<\n  ListBoxProps<T>,\n  \"layout\" | \"orientation\"\n> {\n  items?: Iterable<T>\n  popover?: Omit<PopoverProps, \"children\">\n}\n\nexport function SelectContent<T extends object>({\n  items,\n  className,\n  popover,\n  ...props\n}: SelectListProps<T>) {\n  return (\n    <Popover\n      placement={popover?.placement ?? \"bottom\"}\n      className={cx(\n        \"min-w-(--trigger-width) overflow-hidden *:data-[slot=popover-inner]:overflow-hidden\",\n        popover?.className\n      )}\n      {...popover}\n    >\n      <ListBox\n        layout=\"stack\"\n        orientation=\"vertical\"\n        className={cx(\n          \"grid max-h-[inherit] w-full grid-cols-[auto_1fr] flex-col gap-y-1 overflow-y-auto p-1 outline-hidden *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1\",\n          className\n        )}\n        items={items}\n        {...props}\n      />\n    </Popover>\n  )\n}\n\nexport interface SelectTriggerProps extends React.ComponentProps<typeof Button> {\n  prefix?: React.ReactNode\n  className?: string\n}\n\nexport function SelectTrigger({ children, className, ...props }: SelectTriggerProps) {\n  return (\n    <span data-slot=\"control\" className=\"relative block w-full\">\n      <Button\n        className={cx(\n          \"group/select-trigger flex w-full min-w-0 cursor-default items-center gap-x-2 rounded-lg border border-input bg-(--control-bg,transparent) px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] text-start text-foreground outline-hidden sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] sm:text-sm/6 sm:*:text-sm/6 dark:shadow-none\",\n          \"focus:border-ring/70 focus:ring-3 focus:ring-ring/20 focus:enabled:hover:border-ring/80\",\n          \"enabled:hover:border-muted-foreground/30\",\n          \"group-open/select:border-ring/70 group-open/select:ring-3 group-open/select:ring-ring/20\",\n          \"group-open/select:invalid:border-danger-subtle-foreground/70 group-open/select:invalid:ring-3 group-open/select:invalid:ring-danger-subtle-foreground/20 group-invalid/select:border-danger-subtle-foreground/70 group-invalid/select:ring-danger-subtle-foreground/20 group-invalid/select:enabled:hover:border-danger-subtle-foreground/80 group-focus/select:group-invalid/select:border-danger-subtle-foreground/70 group-focus/select:group-invalid/select:ring-danger-subtle-foreground/20 group-focus/select:group-invalid/select:enabled:hover:border-danger-subtle-foreground/80\",\n          \"forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText] *:[svg]:size-5 *:[svg]:shrink-0 *:[svg]:self-center *:[svg]:text-(--btn-icon) pressed:*:[svg]:text-(--btn-icon-active) focus-visible:*:[svg]:text-(--btn-icon-active)/80 enabled:hover:*:[svg]:text-(--btn-icon-active)/90 sm:*:[svg]:size-4\",\n          \"*:data-[slot=loader]:size-5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center *:data-[slot=loader]:text-(--btn-icon) sm:*:data-[slot=loader]:size-4\",\n          \"forced-colors:group-focus/select:border-[Highlight] forced-colors:group-invalid/select:border-[Mark] forced-colors:group-focus/select:group-invalid/select:border-[Mark]\",\n          \"group-disabled/select:bg-muted group-disabled/select:opacity-50 forced-colors:group-disabled/select:border-[GrayText] forced-colors:group-disabled/select:text-[GrayText]\",\n          \"in-disabled:bg-muted in-disabled:opacity-50 forced-colors:in-disabled:border-[GrayText] forced-colors:in-disabled:text-[GrayText]\",\n          \"dark:scheme-dark\",\n          className\n        )}\n      >\n        {(values) => (\n          <>\n            {props.prefix && <span className=\"text-muted-foreground\">{props.prefix}</span>}\n            {typeof children === \"function\" ? children(values) : children}\n\n            {!children && (\n              <>\n                <SelectValue\n                  data-slot=\"select-value\"\n                  className={twJoin([\n                    \"truncate text-start data-placeholder:text-muted-foreground sm:text-sm/6 **:[[slot=description]]:hidden\",\n                    \"has-data-[slot=avatar]:grid has-data-[slot=avatar]:grid-cols-[1fr_auto] has-data-[slot=avatar]:items-center has-data-[slot=avatar]:gap-x-2\",\n                    \"has-[svg]:grid has-[svg]:grid-cols-[1fr_auto] has-[svg]:items-center has-[svg]:gap-x-2\",\n                    \"*:[svg]:size-5 sm:*:[svg]:size-4\",\n                    \"*:mt-0 *:data-[slot=avatar]:[--avatar-size:--spacing(5)] sm:*:data-[slot=avatar]:[--avatar-size:--spacing(4.5)]\",\n                  ])}\n                />\n                <ChevronUpDownIcon\n                  data-slot=\"chevron\"\n                  className=\"ms-auto -me-1 size-5 shrink-0 text-muted-foreground sm:size-4\"\n                />\n              </>\n            )}\n          </>\n        )}\n      </Button>\n    </span>\n  )\n}\n\nexport const SelectSection = DropdownSection\nexport const SelectSeparator = DropdownSeparator\nexport const SelectLabel = DropdownLabel\nexport const SelectDescription = DropdownDescription\nexport const SelectItem = DropdownItem\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-danger-subtle-foreground": "var(--danger-subtle-foreground)"
    },
    "light": {
      "danger-subtle-foreground": "oklch(0.505 0.213 27.518)"
    },
    "dark": {
      "danger-subtle-foreground": "oklch(0.704 0.191 22.216)"
    }
  },
  "type": "registry:ui"
}