{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox9",
  "title": "Combobox",
  "description": "Combobox built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/combobox/9/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Check, ChevronsUpDown, Loader2 } 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 allFrameworks = [\n  { value: \"next.js\", label: \"Next.js\" },\n  { value: \"sveltekit\", label: \"SvelteKit\" },\n  { value: \"nuxt.js\", label: \"Nuxt.js\" },\n  { value: \"remix\", label: \"Remix\" },\n  { value: \"astro\", label: \"Astro\" },\n  { value: \"gatsby\", label: \"Gatsby\" },\n  { value: \"solid\", label: \"Solid.js\" },\n  { value: \"qwik\", label: \"Qwik\" }\n];\n\nexport default function Combobox() {\n  const [open, setOpen] = React.useState(false);\n  const [value, setValue] = React.useState(\"\");\n  const [search, setSearch] = React.useState(\"\");\n  const [loading, setLoading] = React.useState(false);\n  const [frameworks, setFrameworks] = React.useState(allFrameworks);\n\n  React.useEffect(() => {\n    if (search.length > 0) {\n      setLoading(true);\n      const timer = setTimeout(() => {\n        const filtered = allFrameworks.filter((framework) =>\n          framework.label.toLowerCase().includes(search.toLowerCase())\n        );\n        setFrameworks(filtered);\n        setLoading(false);\n      }, 300);\n      return () => {\n        clearTimeout(timer);\n        setLoading(false);\n      };\n    } else {\n      setFrameworks(allFrameworks);\n    }\n  }, [search]);\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              ? frameworks.find((framework) => framework.value === value)?.label\n              : \"Select framework...\"}\n            <ChevronsUpDown className=\"opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\">\n          <Command shouldFilter={false}>\n            <CommandInput\n              placeholder=\"Search framework...\"\n              className=\"h-9\"\n              value={search}\n              onValueChange={setSearch}\n            />\n            <CommandList>\n              {loading ? (\n                <div className=\"flex items-center justify-center py-6\">\n                  <Loader2 className=\"h-4 w-4 animate-spin text-muted-foreground\" />\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty>No framework found.</CommandEmpty>\n                  <CommandGroup>\n                    {frameworks.map((framework) => (\n                      <CommandItem\n                        key={framework.value}\n                        value={framework.value}\n                        onSelect={(currentValue) => {\n                          setValue(currentValue === value ? \"\" : currentValue);\n                          setOpen(false);\n                        }}>\n                        {framework.label}\n                        <Check\n                          className={cn(\n                            \"ml-auto\",\n                            value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\n",
      "type": "registry:component",
      "target": "components/combobox9.tsx"
    }
  ],
  "type": "registry:component"
}