{
  "name": "FilterPopover",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/FilterPopover.tsx",
  "chapterTag": "08 Feedback & Overlays",
  "chapter": "09-feedback-and-overlays.html",
  "sectionId": "filter-popover",
  "elName": "FilterPopover",
  "demoUrl": "https://brand.magicblocks.ai/components/09-feedback-and-overlays#filter-popover",
  "hasLiveDemo": false,
  "description": "Generic filter popover — a trigger button with a small active-count pill,\nopening a card-shaped popover with title, body, and footer slots.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "FilterPopover",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "FilterPopoverProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { FilterPopover } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "triggerLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Trigger button label. Default `\"Filter\"`."
    },
    {
      "name": "activeCount",
      "optional": true,
      "type": "number",
      "doc": "Count of active filters, surfaces as a small pill on the trigger."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "Body content — typically `<QueryBuilder>` + `<FilterChipGroup>`."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional title shown at the top of the popover."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional caption beneath the title."
    },
    {
      "name": "footer",
      "optional": true,
      "type": "ReactNode",
      "doc": "Footer slot — typically Clear + Apply buttons."
    },
    {
      "name": "align",
      "optional": true,
      "type": "\"bottom-start\" | \"bottom-end\"",
      "doc": "Popover anchor side. Default `\"bottom-end\"`."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable the trigger."
    },
    {
      "name": "onOpenChange",
      "optional": true,
      "type": "(open: boolean) => void",
      "doc": "Fires when the popover opens or closes."
    }
  ],
  "classesUsed": [
    "filter-popover",
    "filter-popover-body",
    "filter-popover-caption",
    "filter-popover-count",
    "filter-popover-footer",
    "filter-popover-head",
    "filter-popover-panel",
    "filter-popover-title",
    "filter-popover-trigger",
    "title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"filter-popover-demo\">\n  <div class=\"filter-popover is-open is-align-bottom-end\">\n    <button type=\"button\" class=\"filter-popover-trigger\" aria-haspopup=\"dialog\" aria-expanded=\"true\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M1 2.5h12l-4.5 5.5v3l-3 1.5v-4.5L1 2.5z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"/></svg>\n      <span>Filter</span>\n      <span class=\"filter-popover-count\" aria-label=\"2 active filters\">2</span>\n    </button>\n    <div class=\"filter-popover-panel\" role=\"dialog\">\n      <div class=\"filter-popover-head\">\n        <div class=\"filter-popover-title\">Filter contacts</div>\n        <div class=\"filter-popover-caption\">Add one or more conditions.</div>\n      </div>\n      <div class=\"filter-popover-body\">\n        <p style=\"font: 400 13px/1.5 var(--f-body); color: var(--fg-soft); margin: 0;\">Body slot &mdash; drop a <code class=\"mono\">&lt;QueryBuilder&gt;</code>, search input, or stack of selects here.</p>\n      </div>\n      <div class=\"filter-popover-footer\">\n        <button type=\"button\" class=\"btn btn-ghost\">Clear</button>\n        <button type=\"button\" class=\"btn btn-primary\">Apply</button>\n      </div>\n    </div>\n  </div>\n</div>",
    "css": ".filter-popover { display: inline-block; position: relative; }\n\n.filter-popover-body { padding: var(--s-3) var(--s-4); }\n\n.filter-popover-caption { font: 400 12px/1.4 var(--f-body); color: var(--fg-soft); margin-top: 2px; }\n\n.filter-popover-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  background: var(--accent);\n  color: var(--paper);\n  font: 600 11px/1 var(--f-mono);\n}\n\n.filter-popover-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--s-2);\n  padding: var(--s-3) var(--s-4);\n  border-top: 1px solid var(--hair-soft);\n}\n\n.filter-popover-head {\n  padding: var(--s-3) var(--s-4);\n  border-bottom: 1px solid var(--hair-soft);\n}\n\n.filter-popover-panel {\n  position: absolute;\n  top: calc(100% + 6px);\n  z-index: 50;\n  width: min(420px, calc(100vw - 32px));\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  box-shadow: 0 12px 32px color-mix(in oklab, var(--ink) 14%, transparent);\n  display: flex;\n  flex-direction: column;\n}\n\n.filter-popover-title { font: 500 14px/1.3 var(--f-body); color: var(--fg); }\n\n.filter-popover-trigger {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 500 13px/1 var(--f-body);\n  cursor: pointer;\n  transition: background var(--dur-2) var(--ease);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}