{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox8",
  "title": "Combobox",
  "description": "Combobox built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/combobox/8/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\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 countries = [\n  { value: \"us\", label: \"United States\" },\n  { value: \"ca\", label: \"Canada\" },\n  { value: \"uk\", label: \"United Kingdom\" },\n  { value: \"de\", label: \"Germany\" },\n  { value: \"fr\", label: \"France\" },\n  { value: \"it\", label: \"Italy\" },\n  { value: \"es\", label: \"Spain\" },\n  { value: \"nl\", label: \"Netherlands\" },\n  { value: \"be\", label: \"Belgium\" },\n  { value: \"ch\", label: \"Switzerland\" },\n  { value: \"at\", label: \"Austria\" },\n  { value: \"se\", label: \"Sweden\" },\n  { value: \"no\", label: \"Norway\" },\n  { value: \"dk\", label: \"Denmark\" },\n  { value: \"fi\", label: \"Finland\" },\n  { value: \"pl\", label: \"Poland\" },\n  { value: \"cz\", label: \"Czech Republic\" },\n  { value: \"ie\", label: \"Ireland\" },\n  { value: \"pt\", label: \"Portugal\" },\n  { value: \"gr\", label: \"Greece\" },\n  { value: \"au\", label: \"Australia\" },\n  { value: \"nz\", label: \"New Zealand\" },\n  { value: \"jp\", label: \"Japan\" },\n  { value: \"kr\", label: \"South Korea\" },\n  { value: \"cn\", label: \"China\" },\n  { value: \"in\", label: \"India\" },\n  { value: \"br\", label: \"Brazil\" },\n  { value: \"mx\", label: \"Mexico\" },\n  { value: \"ar\", label: \"Argentina\" },\n  { value: \"za\", label: \"South Africa\" }\n];\n\nexport default function Combobox() {\n  const [open, setOpen] = React.useState(false);\n  const [value, setValue] = React.useState(\"\");\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\">\n            {value\n              ? countries.find((country) => country.value === value)?.label\n              : \"Select country...\"}\n            <ChevronsUpDown className=\"opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Search country...\" className=\"h-9\" />\n            <CommandList>\n              <CommandEmpty>No country found.</CommandEmpty>\n              <CommandGroup>\n                {countries.map((country) => (\n                  <CommandItem\n                    key={country.value}\n                    value={country.value}\n                    onSelect={(currentValue) => {\n                      setValue(currentValue === value ? \"\" : currentValue);\n                      setOpen(false);\n                    }}>\n                    {country.label}\n                    <Check\n                      className={cn(\n                        \"ml-auto\",\n                        value === country.value ? \"opacity-100\" : \"opacity-0\"\n                      )}\n                    />\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\n",
      "type": "registry:component",
      "target": "components/combobox8.tsx"
    }
  ],
  "type": "registry:component"
}