{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-15",
  "title": "Multi-select filter",
  "description": "Checkbox items with a count badge and a clear action.",
  "dependencies": [],
  "registryDependencies": [
    "dropdown-menu",
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "registry/patterns/dropdown/dropdown-15.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { ListFilterIcon } from 'lucide-react'\n\nconst statuses = ['Backlog', 'Todo', 'In progress', 'Done', 'Cancelled']\n\nexport function Dropdown15() {\n  const [selected, setSelected] = useState<string[]>(['Todo', 'In progress'])\n\n  function toggle(status: string, checked: boolean) {\n    setSelected((prev) =>\n      checked ? [...prev, status] : prev.filter((item) => item !== status),\n    )\n  }\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        render={\n          <Button variant=\"outline\" size=\"sm\">\n            <ListFilterIcon data-icon=\"inline-start\" />\n            Status\n            {selected.length > 0 && (\n              <Badge variant=\"secondary\" className=\"ml-1 rounded-sm px-1\">\n                {selected.length}\n              </Badge>\n            )}\n          </Button>\n        }\n      />\n      <DropdownMenuContent align=\"start\" className=\"w-48\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Filter by status</DropdownMenuLabel>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        {statuses.map((status) => (\n          <DropdownMenuCheckboxItem\n            key={status}\n            checked={selected.includes(status)}\n            onCheckedChange={(checked) => toggle(status, checked === true)}\n            closeOnClick={false}\n          >\n            {status}\n          </DropdownMenuCheckboxItem>\n        ))}\n        <DropdownMenuSeparator />\n        <DropdownMenuItem\n          disabled={selected.length === 0}\n          onClick={() => setSelected([])}\n        >\n          Clear filters\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/dropdown/dropdown-15.tsx"
    }
  ],
  "type": "registry:block"
}