{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "combo-box",
  "title": "combo-box",
  "description": "combo-box",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/field",
    "https://intentui.com/r/input",
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/dropdown",
    "https://intentui.com/r/popover"
  ],
  "files": [
    {
      "path": "src/components/ui/combo-box.tsx",
      "content": "\"use client\"\n\nimport { ChevronUpDownIcon } from \"@heroicons/react/20/solid\"\nimport { Button } from \"react-aria-components/Button\"\nimport type {\n  ComboBoxProps as ComboBoxPrimitiveProps,\n  ComboBoxValueProps,\n} from \"react-aria-components/ComboBox\"\nimport {\n  ComboBox as ComboBoxPrimitive,\n  ComboBoxContext,\n  ComboBoxValue as ComboBoxValuePrimitive,\n} from \"react-aria-components/ComboBox\"\nimport type { InputProps } from \"react-aria-components/Input\"\nimport { ListBox, type ListBoxProps } from \"react-aria-components/ListBox\"\nimport type { PopoverProps } from \"react-aria-components/Popover\"\nimport { useSlottedContext } from \"react-aria-components/slots\"\nimport { fieldStyles } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { cx } from \"@/lib/primitive\"\nimport { DropdownDescription, DropdownItem, DropdownLabel, DropdownSection } from \"./dropdown\"\nimport { Popover } from \"./popover\"\n\nexport interface ComboBoxProps<\n  T extends object,\n  M extends \"single\" | \"multiple\" = \"single\",\n> extends Omit<ComboBoxPrimitiveProps<T, M>, \"children\"> {\n  children: React.ReactNode\n}\n\nexport function ComboBox<T extends object, M extends \"single\" | \"multiple\" = \"single\">({\n  className,\n  ...props\n}: ComboBoxProps<T, M>) {\n  return (\n    <ComboBoxPrimitive data-slot=\"control\" className={cx(fieldStyles(), className)} {...props} />\n  )\n}\n\nexport interface ComboBoxListProps<T extends object>\n  extends Omit<ListBoxProps<T>, \"layout\" | \"orientation\">, Pick<PopoverProps, \"placement\"> {\n  popover?: Omit<PopoverProps, \"children\">\n}\n\nexport function ComboBoxContent<T extends object>({\n  children,\n  items,\n  className,\n  popover,\n  ...props\n}: ComboBoxListProps<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        {children}\n      </ListBox>\n    </Popover>\n  )\n}\n\nexport function ComboBoxInput(props: InputProps) {\n  const context = useSlottedContext(ComboBoxContext)!\n  return (\n    <span\n      data-slot=\"control\"\n      className=\"relative isolate block has-[[data-slot=icon]:last-child]:[&_input]:pe-10\"\n    >\n      <Input {...props} placeholder={props?.placeholder} />\n      <Button className=\"absolute end-0 top-0 grid h-full w-11 cursor-default place-content-center sm:w-9\">\n        {!context?.inputValue && (\n          <ChevronUpDownIcon\n            data-slot=\"chevron\"\n            className=\"-me-1 size-5 text-muted-foreground sm:size-4\"\n          />\n        )}\n      </Button>\n    </span>\n  )\n}\n\nexport const ComboBoxSection = DropdownSection\nexport const ComboBoxItem = DropdownItem\nexport const ComboBoxLabel = DropdownLabel\nexport const ComboBoxDescription = DropdownDescription\nexport function ComboBoxValue<T extends object>(props: ComboBoxValueProps<T>) {\n  return <ComboBoxValuePrimitive data-slot=\"control\" {...props} />\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}