{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-combobox",
  "type": "registry:ui",
  "title": "ComboBox",
  "dependencies": [
    "lucide-react",
    "react",
    "react-aria-components",
    "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",
    "https://react-aria.adobe.com/registry/tailwind-fieldbutton.json"
  ],
  "files": [
    {
      "path": "components/ui/ComboBox.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {ChevronDown} from 'lucide-react';\nimport React from 'react';\nimport {\n  ComboBox as AriaComboBox,\n  type ComboBoxProps as AriaComboBoxProps,\n  ComboBoxValue,\n  ListBox,\n  type ListBoxItemProps,\n  type ValidationResult\n} from 'react-aria-components/ComboBox';\nimport {Description, FieldError, FieldGroup, Input, 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} from '@/registry/react-aria/lib/react-aria-utils';\nimport {FieldButton} from '@/registry/react-aria/ui/FieldButton';\n\nexport interface ComboBoxProps<T, M extends 'single' | 'multiple'> extends Omit<\n  AriaComboBoxProps<T, M>,\n  'children'\n> {\n  label?: string;\n  description?: string | null;\n  errorMessage?: string | ((validation: ValidationResult) => string);\n  placeholder?: string;\n  children: React.ReactNode | ((item: T) => React.ReactNode);\n}\n\nexport function ComboBox<T, M extends 'single' | 'multiple' = 'single'>({\n  label,\n  description,\n  errorMessage,\n  children,\n  items,\n  ...props\n}: ComboBoxProps<T, M>) {\n  return (\n    <AriaComboBox\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'group flex flex-col gap-1 font-sans'\n      )}>\n      <Label>{label}</Label>\n      <FieldGroup>\n        <Input className=\"ps-3 pe-1\" />\n        <FieldButton className=\"w-6 mr-1 outline-offset-0\">\n          <ChevronDown aria-hidden className=\"w-4 h-4\" />\n        </FieldButton>\n      </FieldGroup>\n      {props.selectionMode === 'multiple' && (\n        <ComboBoxValue\n          placeholder=\"No items selected\"\n          className=\"text-xs text-neutral-600 dark:text-neutral-300\"\n        />\n      )}\n      {description && <Description>{description}</Description>}\n      <FieldError>{errorMessage}</FieldError>\n      <Popover className=\"w-(--trigger-width)\">\n        <ListBox\n          items={items}\n          className=\"outline-0 p-1 box-border max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]\">\n          {children}\n        </ListBox>\n      </Popover>\n    </AriaComboBox>\n  );\n}\n\nexport function ComboBoxItem(props: ListBoxItemProps) {\n  return <DropdownItem {...props} />;\n}\n\nexport function ComboBoxSection<T>(props: DropdownSectionProps<T>) {\n  return <DropdownSection {...props} />;\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}