{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-15",
  "title": "Multiple — faceted filter",
  "description": "Dashed trigger with count badges, checkbox rows, facet counts, and a clear footer.",
  "dependencies": [],
  "registryDependencies": [
    "popover",
    "command",
    "button",
    "badge",
    "separator"
  ],
  "files": [
    {
      "path": "registry/patterns/command/command-15.tsx",
      "content": "'use client'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/components/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\nimport { CheckIcon, PlusCircleIcon } from 'lucide-react'\nimport { useState } from 'react'\n\nconst skills = [\n  { value: 'react', label: 'React', count: 128 },\n  { value: 'typescript', label: 'TypeScript', count: 96 },\n  { value: 'node', label: 'Node.js', count: 64 },\n  { value: 'figma', label: 'Figma', count: 41 },\n  { value: 'graphql', label: 'GraphQL', count: 23 },\n]\n\nexport function Command15() {\n  const [open, setOpen] = useState(false)\n  const [selected, setSelected] = useState<string[]>(['react', 'typescript'])\n\n  const toggle = (value: string) =>\n    setSelected((prev) =>\n      prev.includes(value)\n        ? prev.filter((item) => item !== value)\n        : [...prev, value],\n    )\n\n  const selectedSkills = skills.filter((skill) =>\n    selected.includes(skill.value),\n  )\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        render={\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"h-8 min-w-44 border-dashed font-normal\"\n          >\n            <PlusCircleIcon className=\"size-4\" />\n            Skills\n            {selected.length > 0 && (\n              <>\n                <Separator orientation=\"vertical\" className=\"mx-1 h-auto!\" />\n                <Badge\n                  variant=\"secondary\"\n                  className=\"rounded-sm px-1 font-normal lg:hidden\"\n                >\n                  {selected.length}\n                </Badge>\n                <div className=\"hidden gap-1 lg:flex\">\n                  {selected.length > 1 ? (\n                    <Badge\n                      variant=\"secondary\"\n                      className=\"rounded-sm px-1.5 font-normal\"\n                    >\n                      {selected.length} selected\n                    </Badge>\n                  ) : (\n                    selectedSkills.map((skill) => (\n                      <Badge\n                        key={skill.value}\n                        variant=\"secondary\"\n                        className=\"rounded-sm px-1.5 font-normal\"\n                      >\n                        {skill.label}\n                      </Badge>\n                    ))\n                  )}\n                </div>\n              </>\n            )}\n          </Button>\n        }\n      />\n      <PopoverContent className=\"w-64 p-0\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Filter skills...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              {skills.map((skill) => {\n                const isSelected = selected.includes(skill.value)\n                return (\n                  <CommandItem\n                    key={skill.value}\n                    value={skill.label}\n                    onSelect={() => toggle(skill.value)}\n                    className=\"[&>svg:last-child]:hidden\"\n                  >\n                    <div\n                      aria-hidden\n                      className={cn(\n                        'flex size-4 shrink-0 items-center justify-center rounded-sm border',\n                        isSelected\n                          ? 'border-primary bg-primary text-primary-foreground group-data-selected/command-item:[&_svg]:text-primary-foreground!'\n                          : 'border-muted-foreground/40',\n                      )}\n                    >\n                      {isSelected && <CheckIcon className=\"size-3\" />}\n                    </div>\n                    <span className=\"flex-1\">{skill.label}</span>\n                    <span className=\"text-muted-foreground group-data-selected/command-item:text-muted-foreground ml-auto text-xs tabular-nums\">\n                      {skill.count}\n                    </span>\n                  </CommandItem>\n                )\n              })}\n            </CommandGroup>\n            {selected.length > 0 && (\n              <>\n                <CommandSeparator />\n                <CommandGroup>\n                  <CommandItem\n                    onSelect={() => setSelected([])}\n                    className=\"text-muted-foreground justify-center [&>svg:last-child]:hidden\"\n                  >\n                    Clear filters\n                  </CommandItem>\n                </CommandGroup>\n              </>\n            )}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/command/command-15.tsx"
    }
  ],
  "type": "registry:block"
}