{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "dependencies": [
    "lucide-react",
    "react-aria-components",
    "tailwind-variants"
  ],
  "registryDependencies": [
    "https://taki-ui.com/r/field.json",
    "https://taki-ui.com/r/list-box.json",
    "https://taki-ui.com/r/popover.json",
    "https://taki-ui.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/combobox.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { ChevronDown } from \"lucide-react\"\nimport {\n  ComboBox as AriaComboBox,\n  ComboBoxProps as AriaComboBoxProps,\n  Button,\n  composeRenderProps,\n  Input,\n  ListBox,\n  ListBoxItemProps,\n  ValidationResult,\n} from \"react-aria-components\"\nimport { tv } from \"tailwind-variants\"\n\nimport { cn } from \"../lib/utils\"\nimport { FieldDescription, FieldError, FieldLabel } from \"./field\"\nimport { DropdownItem, DropdownSection, DropdownSectionProps } from \"./list-box\"\nimport { Popover } from \"./popover\"\n\nconst comboBoxStyles = tv({\n  base: \"group relative flex flex-col gap-1\",\n})\n\nconst inputWrapperStyles = tv({\n  base: \"border-input  [&_svg:not([class*='text-'])]:text-muted-foreground focus-within:border-ring focus-within:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center gap-2 rounded-md border bg-transparent pr-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-within:ring-[3px] has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  variants: {\n    size: {\n      default: \"h-9\",\n      sm: \"h-8\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\nconst inputStyles = tv({\n  base: \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex-1 bg-transparent px-3 py-1 text-base outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed md:text-sm\",\n})\n\nconst buttonStyles = tv({\n  base: \"flex items-center justify-center outline-none transition-colors\",\n})\n\nexport interface ComboBoxProps<T extends object>\n  extends Omit<AriaComboBoxProps<T>, \"children\"> {\n  label?: string\n  description?: string\n  errorMessage?: string | ((validation: ValidationResult) => string)\n  placeholder?: string\n  items?: Iterable<T>\n  children: React.ReactNode | ((item: T) => React.ReactNode)\n  size?: \"default\" | \"sm\"\n}\n\nexport function ComboBox<T extends object>({\n  label,\n  description,\n  errorMessage,\n  placeholder,\n  children,\n  items,\n  size = \"default\",\n  ...props\n}: ComboBoxProps<T>) {\n  return (\n    <AriaComboBox\n      {...props}\n      className={composeRenderProps(props.className, (className) =>\n        cn(comboBoxStyles(), className)\n      )}\n    >\n      {label && <FieldLabel>{label}</FieldLabel>}\n      <div className={inputWrapperStyles({ size })}>\n        <Input placeholder={placeholder} className={inputStyles()} />\n        <Button className={buttonStyles()}>\n          <ChevronDown aria-hidden />\n        </Button>\n      </div>\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError>{errorMessage}</FieldError>\n      <Popover className=\"w-56 min-w-(--trigger-width)\">\n        <ListBox\n          items={items}\n          className=\"max-h-[inherit] overflow-auto p-1 outline-hidden [clip-path:inset(0_0_0_0_round_.75rem)]\"\n        >\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 extends object>(\n  props: DropdownSectionProps<T>\n) {\n  return <DropdownSection {...props} />\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}