{
  "name": "ConditionRow",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/QueryBuilder.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "condition-row",
  "elName": "ConditionRow",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#condition-row",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "QueryBuilder",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "ConditionRow",
      "isPrincipal": true,
      "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 { ConditionRow } 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=\"qb-rows\">\n          <div class=\"qb-row\">\n            <span class=\"qb-conj\" aria-hidden=\"true\">WHERE</span>\n            <select class=\"qb-field\" aria-label=\"Field\">\n              <option>Contact name</option>\n            </select>\n            <select class=\"qb-op\" aria-label=\"Operator\">\n              <option>equals</option>\n            </select>\n            <input type=\"text\" class=\"qb-value qb-value-text\" value=\"Jay Stockwell\" aria-label=\"Value\">\n            <button type=\"button\" class=\"qb-remove\" aria-label=\"Remove condition\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M3 3l8 8M11 3l-8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n            </button>\n          </div>\n          <div class=\"qb-row\">\n            <span class=\"qb-conj\" aria-hidden=\"true\">AND</span>\n            <select class=\"qb-field\" aria-label=\"Field\">\n              <option>Loan purpose</option>\n            </select>\n            <select class=\"qb-op\" aria-label=\"Operator\">\n              <option>does not equal</option>\n            </select>\n            <select class=\"qb-value qb-value-select\" aria-label=\"Value\">\n              <option>Refinance</option>\n            </select>\n            <button type=\"button\" class=\"qb-remove\" aria-label=\"Remove condition\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M3 3l8 8M11 3l-8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n            </button>\n          </div>\n          <div class=\"qb-row\">\n            <span class=\"qb-conj\" aria-hidden=\"true\">AND</span>\n            <select class=\"qb-field\" aria-label=\"Field\">\n              <option>Subject line</option>\n            </select>\n            <select class=\"qb-op\" aria-label=\"Operator\">\n              <option>contains</option>\n            </select>\n            <input type=\"text\" class=\"qb-value qb-value-text\" value=\"invoice\" aria-label=\"Value\">\n            <button type=\"button\" class=\"qb-remove\" aria-label=\"Remove condition\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M3 3l8 8M11 3l-8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n            </button>\n          </div>\n          <div class=\"qb-row\">\n            <span class=\"qb-conj\" aria-hidden=\"true\">AND</span>\n            <select class=\"qb-field\" aria-label=\"Field\">\n              <option>Last message</option>\n            </select>\n            <select class=\"qb-op\" aria-label=\"Operator\">\n              <option>in the last</option>\n            </select>\n            <div class=\"qb-value qb-value-duration\">\n              <input type=\"number\" inputmode=\"numeric\" min=\"0\" value=\"24\" aria-label=\"Count\">\n              <select aria-label=\"Unit\">\n                <option>Hours</option>\n              </select>\n            </div>\n            <button type=\"button\" class=\"qb-remove\" aria-label=\"Remove condition\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M3 3l8 8M11 3l-8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n            </button>\n          </div>\n          <div class=\"qb-row\">\n            <span class=\"qb-conj\" aria-hidden=\"true\">AND</span>\n            <select class=\"qb-field\" aria-label=\"Field\">\n              <option>Sentiment</option>\n            </select>\n            <select class=\"qb-op\" aria-label=\"Operator\">\n              <option>is one of</option>\n            </select>\n            <div class=\"qb-value qb-value-chips\" role=\"group\" aria-label=\"Values\">\n              <button type=\"button\" class=\"qb-chip is-on\" aria-pressed=\"true\">Negative</button>\n              <button type=\"button\" class=\"qb-chip\" aria-pressed=\"false\">Neutral</button>\n              <button type=\"button\" class=\"qb-chip is-on\" aria-pressed=\"true\">Confused</button>\n            </div>\n            <button type=\"button\" class=\"qb-remove\" aria-label=\"Remove condition\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M3 3l8 8M11 3l-8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n            </button>\n          </div>\n          <div class=\"qb-row\">\n            <span class=\"qb-conj\" aria-hidden=\"true\">AND</span>\n            <select class=\"qb-field\" aria-label=\"Field\">\n              <option>Email</option>\n            </select>\n            <select class=\"qb-op\" aria-label=\"Operator\">\n              <option>is known</option>\n            </select>\n            <button type=\"button\" class=\"qb-remove\" aria-label=\"Remove condition\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M3 3l8 8M11 3l-8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n            </button>\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}"
  }
}