{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox3",
  "title": "Combobox",
  "description": "Autocomplete input and command palette with a list of suggestions. All combobox variants are designed for compatibility with Radix UI and Base UI.",
  "files": [
    {
      "path": "contents/components/combobox/3/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Check, ChevronsUpDown, X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\"\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\"\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\"\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\"\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\"\n  },\n  {\n    value: \"gatsby\",\n    label: \"Gatsby\"\n  }\n];\n\nexport default function Combobox() {\n  const [open, setOpen] = React.useState(false);\n  const [selected, setSelected] = React.useState<string[]>([]);\n\n  const handleUnselect = (item: string) => {\n    setSelected(selected.filter((s) => s !== item));\n  };\n\n  const handleSelect = (currentValue: string) => {\n    if (selected.includes(currentValue)) {\n      setSelected(selected.filter((s) => s !== currentValue));\n    } else {\n      setSelected([...selected, currentValue]);\n    }\n  };\n\n  return (\n    <div className=\"w-full max-w-xs\">\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"w-full justify-between min-h-10 h-auto\">\n            <div className=\"flex gap-1 flex-wrap\">\n              {selected.length === 0 && (\n                <span className=\"text-muted-foreground\">Select frameworks...</span>\n              )}\n              {selected.map((item) => (\n                <Badge\n                  variant=\"secondary\"\n                  key={item}\n                  className=\"mr-1 mb-1\"\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    handleUnselect(item);\n                  }}>\n                  {frameworks.find((f) => f.value === item)?.label}\n                  <button\n                    className=\"ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n                    onKeyDown={(e) => {\n                      if (e.key === \"Enter\") {\n                        handleUnselect(item);\n                      }\n                    }}\n                    onMouseDown={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }}\n                    onClick={() => handleUnselect(item)}>\n                    <X className=\"h-3 w-3 text-muted-foreground hover:text-foreground\" />\n                  </button>\n                </Badge>\n              ))}\n            </div>\n            <ChevronsUpDown className=\"opacity-50 shrink-0\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n            <CommandList>\n              <CommandEmpty>No framework found.</CommandEmpty>\n              <CommandGroup>\n                {frameworks.map((framework) => (\n                  <CommandItem\n                    key={framework.value}\n                    value={framework.value}\n                    onSelect={() => handleSelect(framework.value)}>\n                    <Check\n                      className={cn(\n                        \"mr-2 h-4 w-4\",\n                        selected.includes(framework.value) ? \"opacity-100\" : \"opacity-0\"\n                      )}\n                    />\n                    {framework.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\n",
      "type": "registry:component",
      "target": "components/combobox3.tsx"
    }
  ],
  "type": "registry:component"
}