{
  "name": "WidgetFactsDrawer",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetFactsDrawer.tsx",
  "chapterTag": "25 Chat Widget",
  "chapter": "25-widget.html",
  "sectionId": "facts-drawer",
  "elName": "WidgetFactsDrawer",
  "demoUrl": "https://brand.magicblocks.ai/components/25-widget#facts-drawer",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "WidgetFactsDrawer",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WidgetFactsDrawerProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WidgetFact",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { WidgetFactsDrawer } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "facts",
      "optional": false,
      "type": "WidgetFact[]",
      "doc": ""
    },
    {
      "name": "agentName",
      "optional": true,
      "type": "string",
      "doc": "Used in the default heading — \"What {agentName} has so far\"."
    },
    {
      "name": "heading",
      "optional": true,
      "type": "ReactNode",
      "doc": "Overrides the default heading shown while open."
    },
    {
      "name": "fixLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Button that enters edit mode."
    },
    {
      "name": "saveLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Button that leaves edit mode."
    },
    {
      "name": "open",
      "optional": true,
      "type": "boolean",
      "doc": "Open state — controlled or uncontrolled."
    },
    {
      "name": "defaultOpen",
      "optional": true,
      "type": "boolean",
      "doc": ""
    },
    {
      "name": "onOpenChange",
      "optional": true,
      "type": "(open: boolean) => void",
      "doc": ""
    },
    {
      "name": "onChange",
      "optional": true,
      "type": "(key: string, value: string) => void",
      "doc": "A value was edited (fires per keystroke). Optional — the drawer keeps its own draft."
    },
    {
      "name": "onSave",
      "optional": true,
      "type": "(facts: WidgetFact[]) => void",
      "doc": "Edit mode was closed with \"Save details\"; receives the facts with the edits applied."
    }
  ],
  "classesUsed": [
    "widget-facts",
    "widget-facts-actions",
    "widget-facts-body",
    "widget-facts-btn",
    "widget-facts-chevron",
    "widget-facts-count",
    "widget-facts-icon",
    "widget-facts-input",
    "widget-facts-label",
    "widget-facts-row",
    "widget-facts-summary",
    "widget-facts-toggle",
    "widget-facts-value"
  ],
  "examples": {
    "react": null,
    "html": "<div dir=\"ltr\" class=\"widget-theme-scope\"><div class=\"widget-facts is-open\"><button type=\"button\" class=\"widget-facts-toggle\" aria-expanded=\"true\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" class=\"widget-facts-icon\" aria-hidden=\"true\"><path d=\"M5 3 H14 L20 9 V20 A1.5 1.5 0 0 1 18.5 21.5 H5.5 A1.5 1.5 0 0 1 4 20 V4.5 A1.5 1.5 0 0 1 5.5 3 Z\" fill=\"currentColor\" opacity=\"0.35\"></path><path d=\"M14 3 V9 H20\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\" fill=\"none\"></path><path d=\"M8 13 H16 M8 17 H13\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path></svg><span class=\"widget-facts-summary\">What Ava has so far</span><span class=\"widget-facts-count\">Hide</span><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" class=\"widget-facts-chevron\" aria-hidden=\"true\"><path d=\"M6 10 L12 16 L18 10\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"></path></svg></button><div class=\"widget-facts-body\"><div class=\"widget-facts-row\"><span class=\"widget-facts-label\">Name</span><span class=\"widget-facts-value\">Maria Alvarez</span></div><div class=\"widget-facts-row\"><span class=\"widget-facts-label\">Mobile</span><span class=\"widget-facts-value\">(415) 555-0134</span></div><div class=\"widget-facts-row\"><span class=\"widget-facts-label\">Loan amount</span><span class=\"widget-facts-value\">$600,000</span></div><div class=\"widget-facts-row\"><span class=\"widget-facts-label\">Product</span><span class=\"widget-facts-value\">30-yr fixed · 5.84%</span></div><div class=\"widget-facts-actions\"><button type=\"button\" class=\"widget-facts-btn\">Update details</button></div></div></div></div>",
    "css": ".widget-facts { position: relative; z-index: 4; border-top: 1px solid var(--hair-soft); background: var(--w-field-bg); animation: widget-in 320ms var(--ease) both; }\n\n.widget-facts-actions { display: flex; gap: 8px; padding-top: 4px; }\n\n.widget-facts-body { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 8px; max-height: 232px; overflow-y: auto; animation: widget-in 240ms var(--ease) both; }\n\n.widget-facts-btn {\n  flex: 1; padding: 10px; min-height: var(--w-tap); border-radius: var(--r-pill); border: 1px solid var(--hair); background: var(--w-chat-bg);\n  color: var(--fg); font: 600 13px/1.2 var(--w-font-family); cursor: pointer; transition: all var(--dur-2) var(--ease);\n}\n\n.widget-facts-chevron { color: var(--fg-dim); flex-shrink: 0; transition: transform var(--dur-2) var(--ease); }\n\n.widget-facts-count { font: 400 9.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-dim); flex-shrink: 0; }\n\n.widget-facts-icon { color: var(--w-accent); flex-shrink: 0; }\n\n.widget-facts-input {\n  flex: 1; min-width: 0; box-sizing: border-box; padding: 8px 10px; min-height: 38px; border-radius: var(--r-sm); border: 1px solid var(--hair);\n  background: var(--w-chat-bg); font: 400 13.5px/1.3 var(--w-font-family); color: var(--fg); outline: none;\n}\n\n.widget-facts-label { width: 96px; flex-shrink: 0; font: 400 9.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-dim); }\n\n.widget-facts-row { display: flex; align-items: center; gap: 10px; }\n\n.widget-facts-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }\n\n.widget-facts-toggle {\n  appearance: none; width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 14px; min-height: var(--w-tap);\n  border: 0; background: transparent; cursor: pointer; text-align: left; font-family: var(--w-font-family); color: var(--fg);\n}\n\n.widget-facts-value { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--fg); }"
  }
}