{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "Searchable dropdown built by composing Popover and Command with neubrutalism styling",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@boldkit/utils",
    "@boldkit/popover",
    "@boldkit/command"
  ],
  "files": [
    {
      "path": "registry/default/ui/combobox.tsx",
      "content": "import * as React from 'react'\nimport { ChevronsUpDown, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/components/ui/command'\n\nconst Combobox = Popover\n\nconst ComboboxTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    placeholder?: string\n    value?: string\n    open?: boolean\n  }\n>(({ className, placeholder = 'Select...', value, open, ...props }, ref) => (\n  <PopoverTrigger asChild>\n    <button\n      ref={ref}\n      role=\"combobox\"\n      aria-expanded={open}\n      className={cn(\n        'flex h-11 w-full items-center justify-between border-3 border-input bg-background px-4 py-2 text-sm font-medium shadow-[4px_4px_0px_hsl(var(--shadow-color))] focus:outline-none focus:translate-x-[4px] focus:translate-y-[4px] focus:shadow-none disabled:cursor-not-allowed disabled:opacity-50 transition duration-200',\n        className\n      )}\n      {...props}\n    >\n      <span className={cn('truncate', !value && 'text-muted-foreground')}>\n        {value || placeholder}\n      </span>\n      <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50 stroke-[2.5]\" />\n    </button>\n  </PopoverTrigger>\n))\nComboboxTrigger.displayName = 'ComboboxTrigger'\n\n/**\n * Multi-select trigger. Each entry in `values` has a `value` (identifier)\n * and a `label` (display text). The `onRemove` callback receives the `value`\n * of the chip that was dismissed, so you can remove it from state directly.\n */\nconst ComboboxMultiTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    placeholder?: string\n    values?: { value: string; label: string }[]\n    open?: boolean\n    onRemove?: (value: string) => void\n  }\n>(({ className, placeholder = 'Select...', values = [], open, onRemove, ...props }, ref) => (\n  <PopoverTrigger asChild>\n    <button\n      ref={ref}\n      role=\"combobox\"\n      aria-expanded={open}\n      className={cn(\n        'flex min-h-11 w-full flex-wrap items-center gap-1.5 border-3 border-input bg-background px-3 py-2 text-sm font-medium shadow-[4px_4px_0px_hsl(var(--shadow-color))] focus:outline-none focus:translate-x-[4px] focus:translate-y-[4px] focus:shadow-none disabled:cursor-not-allowed disabled:opacity-50 transition duration-200',\n        className\n      )}\n      {...props}\n    >\n      <span className=\"flex flex-1 flex-wrap items-center gap-1\">\n        {values.length > 0 ? (\n          values.map(({ value, label }) => (\n            <span\n              key={value}\n              className=\"flex items-center gap-1 border-2 border-foreground bg-accent px-1.5 py-0.5 text-xs font-bold\"\n            >\n              {label}\n              <X\n                className=\"h-3 w-3 cursor-pointer stroke-[3] hover:opacity-70\"\n                onClick={e => {\n                  e.stopPropagation()\n                  onRemove?.(value)\n                }}\n              />\n            </span>\n          ))\n        ) : (\n          <span className=\"text-muted-foreground\">{placeholder}</span>\n        )}\n      </span>\n      <ChevronsUpDown className=\"ml-auto h-4 w-4 shrink-0 opacity-50 stroke-[2.5]\" />\n    </button>\n  </PopoverTrigger>\n))\nComboboxMultiTrigger.displayName = 'ComboboxMultiTrigger'\n\nconst ComboboxContent = React.forwardRef<\n  React.ElementRef<typeof PopoverContent>,\n  React.ComponentPropsWithoutRef<typeof PopoverContent>\n>(({ className, children, align = 'start', ...props }, ref) => (\n  <PopoverContent ref={ref} align={align} className={cn('p-0', className)} {...props}>\n    <Command>{children}</Command>\n  </PopoverContent>\n))\nComboboxContent.displayName = 'ComboboxContent'\n\nexport {\n  Combobox,\n  ComboboxTrigger,\n  ComboboxMultiTrigger,\n  ComboboxContent,\n  CommandInput as ComboboxInput,\n  CommandList as ComboboxList,\n  CommandEmpty as ComboboxEmpty,\n  CommandGroup as ComboboxGroup,\n  CommandItem as ComboboxItem,\n  CommandSeparator as ComboboxSeparator,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/combobox.tsx"
    }
  ],
  "type": "registry:ui"
}