{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover-13",
  "title": "Filters",
  "description": "Grouped toggle button filters for status and priority, with reset and apply actions.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "popover",
    "button",
    "badge",
    "field",
    "separator",
    "toggle-group"
  ],
  "files": [
    {
      "path": "registry/patterns/popover/popover-13.tsx",
      "content": "import { FilterIcon } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Field, FieldGroup, FieldLabel } from '@/components/ui/field'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { Separator } from '@/components/ui/separator'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\nexport function Popover13() {\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={\n          <Button variant=\"outline\">\n            <FilterIcon data-icon=\"inline-start\" />\n            Filters\n            <Badge variant=\"secondary\" className=\"ml-1 h-5 px-1.5 text-xs\">\n              3\n            </Badge>\n          </Button>\n        }\n      />\n      <PopoverContent align=\"start\" className=\"w-80\">\n        <PopoverHeader>\n          <PopoverTitle>Filters</PopoverTitle>\n          <PopoverDescription>\n            Narrow results by status and priority.\n          </PopoverDescription>\n        </PopoverHeader>\n        <FieldGroup className=\"gap-4\">\n          <Field>\n            <FieldLabel>Status</FieldLabel>\n            <ToggleGroup\n              multiple\n              defaultValue={['open', 'in-progress']}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"justify-start\"\n            >\n              <ToggleGroupItem value=\"open\">Open</ToggleGroupItem>\n              <ToggleGroupItem value=\"in-progress\">In progress</ToggleGroupItem>\n              <ToggleGroupItem value=\"done\">Done</ToggleGroupItem>\n            </ToggleGroup>\n          </Field>\n          <Field>\n            <FieldLabel>Priority</FieldLabel>\n            <ToggleGroup\n              multiple\n              defaultValue={['high']}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"justify-start\"\n            >\n              <ToggleGroupItem value=\"low\">Low</ToggleGroupItem>\n              <ToggleGroupItem value=\"medium\">Medium</ToggleGroupItem>\n              <ToggleGroupItem value=\"high\">High</ToggleGroupItem>\n              <ToggleGroupItem value=\"urgent\">Urgent</ToggleGroupItem>\n            </ToggleGroup>\n          </Field>\n        </FieldGroup>\n        <Separator />\n        <div className=\"flex justify-between gap-2\">\n          <Button variant=\"ghost\" size=\"sm\">\n            Reset\n          </Button>\n          <Button size=\"sm\">Apply</Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/popover/popover-13.tsx"
    }
  ],
  "type": "registry:block"
}