{
  "name": "QueryBuilder",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/QueryBuilder.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": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "QueryBuilder",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ConditionRow",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "QueryBuilderProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "ConditionRowProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "QueryField",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "QueryFieldOption",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "QueryFieldType",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "QueryOperator",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "QueryCondition",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "QueryConjunction",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { QueryBuilder } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "fields",
      "optional": false,
      "type": "QueryField[]",
      "doc": "Available fields."
    },
    {
      "name": "value",
      "optional": true,
      "type": "QueryCondition[]",
      "doc": "Controlled conditions."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "QueryCondition[]",
      "doc": "Uncontrolled initial conditions."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(conditions: QueryCondition[]) => void",
      "doc": "Fires when conditions change."
    },
    {
      "name": "conjunction",
      "optional": true,
      "type": "QueryConjunction",
      "doc": "Conjunction across rows. Default `\"and\"`."
    },
    {
      "name": "allowConjunctionToggle",
      "optional": true,
      "type": "boolean",
      "doc": "Show an AND/OR toggle. Default `false`."
    },
    {
      "name": "onConjunctionChange",
      "optional": true,
      "type": "(conj: QueryConjunction) => void",
      "doc": "Fires when conjunction changes."
    },
    {
      "name": "addLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Add-row button label. Default `\"+ Add condition\"`."
    },
    {
      "name": "emptyLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Empty-state label. Default `\"No conditions — match everyone.\"`."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable interaction."
    }
  ],
  "classesUsed": [
    "qb",
    "qb-add",
    "qb-chip",
    "qb-conj",
    "qb-conj-btn",
    "qb-conj-toggle",
    "qb-empty",
    "qb-field",
    "qb-op",
    "qb-remove",
    "qb-row",
    "qb-rows",
    "qb-value-chips",
    "qb-value-duration",
    "qb-value-number",
    "qb-value-select",
    "qb-value-text"
  ],
  "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": ".qb { display: flex; flex-direction: column; gap: var(--s-3); }\n\n.qb-add {\n  align-self: flex-start;\n  appearance: none;\n  background: transparent;\n  border: 1px dashed var(--hair);\n  border-radius: var(--r-sm);\n  padding: 6px 10px;\n  font: 500 12.5px/1 var(--f-body);\n  color: var(--accent);\n  cursor: pointer;\n  transition: background var(--dur-2) var(--ease);\n}\n\n.qb-chip {\n  appearance: none;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: 999px;\n  padding: 4px 10px;\n  font: 400 12px/1 var(--f-body);\n  cursor: pointer;\n  color: var(--fg);\n}\n\n.qb-conj {\n  font: 600 10.5px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n  text-align: right;\n  padding-right: 4px;\n}\n\n.qb-conj-btn {\n  appearance: none;\n  border: 0;\n  background: transparent;\n  padding: 5px 10px;\n  font: 500 12px/1 var(--f-body);\n  color: var(--fg-soft);\n  border-radius: var(--r-sm);\n  cursor: pointer;\n}\n\n.qb-conj-toggle {\n  display: inline-flex;\n  align-self: flex-start;\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  padding: 2px;\n  background: var(--bg-paper);\n  gap: 2px;\n}\n\n.qb-empty {\n  padding: var(--s-3) var(--s-4);\n  border: 1px dashed var(--hair);\n  border-radius: var(--r-md);\n  font: 400 13px/1.4 var(--f-body);\n  color: var(--fg-soft);\n}\n\n.qb-field {\n  height: 32px;\n  padding: 0 var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 13px/1 var(--f-body);\n}\n\n.qb-op {\n  height: 32px;\n  padding: 0 var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 13px/1 var(--f-body);\n}\n\n.qb-remove {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  width: 28px; height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--fg-faint);\n  cursor: pointer;\n  border-radius: var(--r-xs);\n}\n\n.qb-row {\n  display: grid;\n  grid-template-columns: 60px minmax(140px, 1fr) minmax(140px, 1fr) minmax(180px, 2fr) 28px;\n  gap: 6px;\n  align-items: center;\n}\n\n.qb-rows { display: flex; flex-direction: column; gap: 6px; }\n\n.qb-value-chips {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  align-items: center;\n  padding: 2px;\n}\n\n.qb-value-duration {\n  display: grid;\n  grid-template-columns: minmax(56px, 0.5fr) minmax(0, 1fr);\n  gap: 4px;\n  min-width: 0;\n}\n\n.qb-value-number {\n  height: 32px;\n  padding: 0 var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 13px/1 var(--f-body);\n}\n\n.qb-value-select {\n  height: 32px;\n  padding: 0 var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 13px/1 var(--f-body);\n}\n\n.qb-value-text {\n  height: 32px;\n  padding: 0 var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 13px/1 var(--f-body);\n}"
  }
}