{
  "name": "ExpandableEditRow",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ExpandableEditRow.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "expandable-edit-row",
  "elName": "ExpandableEditRow",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#expandable-edit-row",
  "hasLiveDemo": false,
  "description": "Collapsed row → expanded inline editor — the kit's pattern for \"click a\nKnowledge Q&A item to edit it in place\", Missing Knowledge convert flow,\nKey Fact ledger entries, and any other \"list row with reveal-to-edit\"\nsurface.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ExpandableEditRow",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ExpandableEditRowProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { ExpandableEditRow } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "Collapsed row title."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional muted caption next to the title (1-line)."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned slot — chip, badge, status."
    },
    {
      "name": "leading",
      "optional": true,
      "type": "ReactNode",
      "doc": "Leading slot — icon, drag handle, checkbox."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "Expanded editor content."
    },
    {
      "name": "expanded",
      "optional": true,
      "type": "boolean",
      "doc": "Controlled expanded state."
    },
    {
      "name": "defaultExpanded",
      "optional": true,
      "type": "boolean",
      "doc": "Uncontrolled initial expanded state. Default `false`."
    },
    {
      "name": "onExpandedChange",
      "optional": true,
      "type": "(expanded: boolean) => void",
      "doc": "Fires when the expanded state changes."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable expand interaction."
    }
  ],
  "classesUsed": [
    "expandable-edit-row",
    "expandable-edit-row-body",
    "expandable-edit-row-caption",
    "expandable-edit-row-chevron",
    "expandable-edit-row-head",
    "expandable-edit-row-leading",
    "expandable-edit-row-meta",
    "expandable-edit-row-title",
    "expandable-edit-row-trigger",
    "row",
    "title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"expandable-edit-row\">\n  <div class=\"expandable-edit-row-head\">\n    <button type=\"button\" class=\"expandable-edit-row-trigger\" aria-expanded=\"false\">\n      <span class=\"expandable-edit-row-chevron\" aria-hidden=\"true\"></span>\n      <span class=\"expandable-edit-row-title\">What hours are you open?</span>\n      <span class=\"expandable-edit-row-caption\">Asked 12 times this week.</span>\n    </button>\n  </div>\n</div>",
    "css": ".expandable-edit-row {\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n  overflow: hidden;\n}\n\n.expandable-edit-row-body {\n  border-top: 1px solid var(--hair-soft);\n  padding: var(--s-3) var(--s-4);\n}\n\n.expandable-edit-row-caption {\n  font: 400 12.5px/1.4 var(--f-body);\n  color: var(--fg-soft);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.expandable-edit-row-chevron {\n  width: 8px; height: 8px;\n  flex-shrink: 0;\n  position: relative;\n  transition: transform var(--dur-2) var(--ease);\n}\n\n.expandable-edit-row-head {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  gap: var(--s-2);\n  padding: 6px var(--s-3);\n}\n\n.expandable-edit-row-leading {\n  display: inline-flex;\n  align-items: center;\n  color: var(--fg-soft);\n}\n\n.expandable-edit-row-meta {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s-2);\n}\n\n.expandable-edit-row-title {\n  font: 500 13.5px/1.3 var(--f-body);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.expandable-edit-row-trigger {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  text-align: left;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 4px;\n  border-radius: var(--r-xs);\n  cursor: pointer;\n  color: var(--fg);\n  min-width: 0;\n}\n\n.row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}