{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-06",
  "title": "Combobox with clear",
  "description": "Selected value shows an inline X that clears without reopening.",
  "dependencies": [],
  "registryDependencies": [
    "popover",
    "command",
    "button"
  ],
  "files": [
    {
      "path": "registry/patterns/command/command-06.tsx",
      "content": "'use client'\n\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 {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { ChevronsUpDownIcon, XIcon } from 'lucide-react'\nimport { useState } from 'react'\n\nconst languages = [\n  { value: 'en', label: 'English' },\n  { value: 'fr', label: 'French' },\n  { value: 'de', label: 'German' },\n  { value: 'pt', label: 'Portuguese' },\n  { value: 'es', label: 'Spanish' },\n]\n\nexport function Command06() {\n  const [open, setOpen] = useState(false)\n  const [value, setValue] = useState('pt')\n  const selected = languages.find((language) => language.value === value)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        render={\n          <Button\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"w-56 justify-between font-normal\"\n          >\n            <span className={cn(!selected && 'text-muted-foreground')}>\n              {selected ? selected.label : 'Select language...'}\n            </span>\n            {value ? (\n              <span\n                role=\"button\"\n                aria-label=\"Clear selection\"\n                className=\"hover:bg-muted -mr-1 grid size-5 place-items-center rounded-sm\"\n                onPointerDown={(event) => {\n                  event.stopPropagation()\n                  event.preventDefault()\n                  setValue('')\n                }}\n              >\n                <XIcon className=\"size-4\" />\n              </span>\n            ) : (\n              <ChevronsUpDownIcon className=\"text-muted-foreground\" />\n            )}\n          </Button>\n        }\n      />\n      <PopoverContent className=\"w-56 p-0\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Search language...\" />\n          <CommandList>\n            <CommandEmpty>No language found.</CommandEmpty>\n            <CommandGroup>\n              {languages.map((language) => (\n                <CommandItem\n                  key={language.value}\n                  value={language.value}\n                  data-checked={value === language.value}\n                  onSelect={(current) => {\n                    setValue(current === value ? '' : current)\n                    setOpen(false)\n                  }}\n                >\n                  {language.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/command/command-06.tsx"
    }
  ],
  "type": "registry:block"
}