{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "select",
  "title": "select",
  "description": "select",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components",
    "tailwind-merge"
  ],
  "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 'tailwind-merge'\nimport { cx } from '@/lib/primitive'\nimport {\n  DropdownDescription,\n  DropdownItem,\n  DropdownLabel,\n  DropdownSection,\n  DropdownSeparator,\n} from './dropdown'\nimport { fieldStyles } from './field'\nimport { PopoverContent } from './popover'\n\ninterface SelectProps<\n  T extends object,\n  M extends 'single' | 'multiple' = 'single',\n> extends SelectPrimitiveProps<T, M> {\n  items?: Iterable<T, M>\n}\n\nconst 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\ninterface SelectListProps<T extends object> extends Omit<\n  ListBoxProps<T>,\n  'layout' | 'orientation'\n> {\n  items?: Iterable<T>\n  popover?: Omit<PopoverProps, 'children'>\n}\n\nconst SelectContent = <T extends object>({\n  items,\n  className,\n  popover,\n  ...props\n}: SelectListProps<T>) => {\n  return (\n    <PopoverContent\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    </PopoverContent>\n  )\n}\n\ninterface SelectTriggerProps extends React.ComponentProps<typeof Button> {\n  prefix?: React.ReactNode\n  className?: string\n}\n\nconst 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-fg 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-fg/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-fg/70 group-open/select:invalid:ring-3 group-open/select:invalid:ring-danger-subtle-fg/20 group-invalid/select:border-danger-subtle-fg/70 group-invalid/select:ring-danger-subtle-fg/20 group-invalid/select:enabled:hover:border-danger-subtle-fg/80 group-focus/select:group-invalid/select:border-danger-subtle-fg/70 group-focus/select:group-invalid/select:ring-danger-subtle-fg/20 group-focus/select:group-invalid/select:enabled:hover:border-danger-subtle-fg/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-fg\">{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-fg 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-fg sm:size-4\"\n                />\n              </>\n            )}\n          </>\n        )}\n      </Button>\n    </span>\n  )\n}\n\nconst SelectSection = DropdownSection\nconst SelectSeparator = DropdownSeparator\nconst SelectLabel = DropdownLabel\nconst SelectDescription = DropdownDescription\nconst SelectItem = DropdownItem\n\nexport type { SelectProps, SelectTriggerProps }\nexport {\n  Select,\n  SelectContent,\n  SelectDescription,\n  SelectItem,\n  SelectLabel,\n  SelectSection,\n  SelectSeparator,\n  SelectTrigger,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}