{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-select",
  "type": "registry:ui",
  "title": "Select",
  "dependencies": [
    "lucide-react",
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-field.json",
    "https://react-aria.adobe.com/registry/tailwind-listbox.json",
    "https://react-aria.adobe.com/registry/tailwind-popover.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/Select.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {ChevronDown} from 'lucide-react';\nimport React from 'react';\nimport {\n  Select as AriaSelect,\n  type SelectProps as AriaSelectProps,\n  Button,\n  ListBox,\n  type ListBoxItemProps,\n  SelectValue,\n  type ValidationResult\n} from 'react-aria-components/Select';\nimport {tv} from 'tailwind-variants';\nimport {Description, FieldError, Label} from '@/registry/react-aria/ui/Field';\nimport {DropdownItem, DropdownSection, type DropdownSectionProps} from '@/registry/react-aria/ui/ListBox';\nimport {Popover} from '@/registry/react-aria/ui/Popover';\nimport {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\nconst styles = tv({\n  extend: focusRing,\n  base: 'flex items-center text-start gap-4 w-full font-sans border border-black/10 dark:border-white/10 cursor-default rounded-lg pl-3 pr-2 h-9 min-w-[180px] transition bg-neutral-50 dark:bg-neutral-700 [-webkit-tap-highlight-color:transparent]',\n  variants: {\n    isDisabled: {\n      false:\n        'text-neutral-800 dark:text-neutral-300 hover:bg-neutral-100 pressed:bg-neutral-200 dark:hover:bg-neutral-600 dark:pressed:bg-neutral-500 group-invalid:outline group-invalid:outline-red-600 forced-colors:group-invalid:outline-[Mark]',\n      true: 'border-transparent dark:border-transparent text-neutral-200 dark:text-neutral-600 forced-colors:text-[GrayText] bg-neutral-100 dark:bg-neutral-800'\n    }\n  }\n});\n\nexport interface SelectProps<T, M extends 'single' | 'multiple'> extends Omit<\n  AriaSelectProps<T, M>,\n  'children'\n> {\n  label?: string;\n  description?: string;\n  errorMessage?: string | ((validation: ValidationResult) => string);\n  items?: Iterable<T>;\n  children: React.ReactNode | ((item: T) => React.ReactNode);\n}\n\nexport function Select<T, M extends 'single' | 'multiple' = 'single'>({\n  label,\n  description,\n  errorMessage,\n  children,\n  items,\n  ...props\n}: SelectProps<T, M>) {\n  return (\n    <AriaSelect\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'group flex flex-col gap-1 relative font-sans'\n      )}>\n      {label && <Label>{label}</Label>}\n      <Button className={styles}>\n        <SelectValue className=\"flex-1 text-sm\">\n          {({selectedText, defaultChildren}) => selectedText || defaultChildren}\n        </SelectValue>\n        <ChevronDown\n          aria-hidden\n          className=\"w-4 h-4 text-neutral-600 dark:text-neutral-400 forced-colors:text-[ButtonText] group-disabled:text-neutral-200 dark:group-disabled:text-neutral-600 forced-colors:group-disabled:text-[GrayText]\"\n        />\n      </Button>\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n      <Popover className=\"min-w-(--trigger-width)\">\n        <ListBox\n          items={items}\n          className=\"outline-hidden box-border p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]\">\n          {children}\n        </ListBox>\n      </Popover>\n    </AriaSelect>\n  );\n}\n\nexport function SelectItem(props: ListBoxItemProps) {\n  return <DropdownItem {...props} />;\n}\n\nexport function SelectSection<T>(props: DropdownSectionProps<T>) {\n  return <DropdownSection {...props} />;\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}