{
  "name": "Accordion",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/Accordion.tsx",
  "chapterTag": "08 Feedback & Overlays",
  "chapter": "09-feedback-and-overlays.html",
  "sectionId": "accordion",
  "elName": "AccordionGroup — single-open",
  "demoUrl": "https://brand.magicblocks.ai/components/09-feedback-and-overlays#accordion",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "Accordion",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "AccordionGroup",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "AccordionProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "AccordionGroupProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { Accordion } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "Section title."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional caption shown beneath the title (1-line muted)."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned slot — typically a `<Badge>` or status chip."
    },
    {
      "name": "open",
      "optional": true,
      "type": "boolean",
      "doc": "Controlled open state."
    },
    {
      "name": "defaultOpen",
      "optional": true,
      "type": "boolean",
      "doc": "Uncontrolled initial open state. Default `false`."
    },
    {
      "name": "onOpenChange",
      "optional": true,
      "type": "(open: boolean) => void",
      "doc": "Fires when the panel is opened or closed."
    },
    {
      "name": "itemId",
      "optional": true,
      "type": "string",
      "doc": "Stable id when nested inside `<AccordionGroup>`. Auto-generated otherwise."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable interaction."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    }
  ],
  "classesUsed": [
    "accordion",
    "accordion-caption",
    "accordion-chevron",
    "accordion-group",
    "accordion-meta",
    "accordion-panel",
    "accordion-panel-inner",
    "accordion-title",
    "accordion-title-block",
    "accordion-trigger",
    "title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"accordion-demo\">\n  <div class=\"accordion-group\">\n    <div class=\"accordion is-open\">\n      <button type=\"button\" class=\"accordion-trigger\" aria-expanded=\"true\" aria-controls=\"acc-redaction-panel\" id=\"acc-redaction-header\">\n        <span class=\"accordion-chevron\" aria-hidden=\"true\"></span>\n        <span class=\"accordion-title-block\">\n          <span class=\"accordion-title\">Redaction</span>\n          <span class=\"accordion-caption\">Strip names, emails, and phone numbers from logs.</span>\n        </span>\n        <span class=\"accordion-meta\"><span class=\"badge\">On</span></span>\n      </button>\n      <div id=\"acc-redaction-panel\" role=\"region\" aria-labelledby=\"acc-redaction-header\" class=\"accordion-panel\">\n        <div class=\"accordion-panel-inner\">\n          <p>PII tokens matched against your active redaction rules are replaced with <code class=\"mono\">&lt;redacted&gt;</code> before any message is stored or shown to a teammate.</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"accordion\">\n      <button type=\"button\" class=\"accordion-trigger\" aria-expanded=\"false\" aria-controls=\"acc-monitor-panel\" id=\"acc-monitor-header\">\n        <span class=\"accordion-chevron\" aria-hidden=\"true\"></span>\n        <span class=\"accordion-title-block\">\n          <span class=\"accordion-title\">Rules monitor</span>\n          <span class=\"accordion-caption\">Watch for blocked terms in real time.</span>\n        </span>\n        <span class=\"accordion-meta\"><span class=\"badge\">Off</span></span>\n      </button>\n      <div id=\"acc-monitor-panel\" role=\"region\" aria-labelledby=\"acc-monitor-header\" class=\"accordion-panel\" hidden>\n        <div class=\"accordion-panel-inner\"></div>\n      </div>\n    </div>\n    <div class=\"accordion\">\n      <button type=\"button\" class=\"accordion-trigger\" aria-expanded=\"false\" aria-controls=\"acc-jailbreak-panel\" id=\"acc-jailbreak-header\">\n        <span class=\"accordion-chevron\" aria-hidden=\"true\"></span>\n        <span class=\"accordion-title-block\">\n          <span class=\"accordion-title\">Jailbreak prevention</span>\n          <span class=\"accordion-caption\">Detect prompt-injection attempts.</span>\n        </span>\n        <span class=\"accordion-meta\"><span class=\"badge\">On</span></span>\n      </button>\n      <div id=\"acc-jailbreak-panel\" role=\"region\" aria-labelledby=\"acc-jailbreak-header\" class=\"accordion-panel\" hidden>\n        <div class=\"accordion-panel-inner\"></div>\n      </div>\n    </div>\n    <div class=\"accordion\">\n      <button type=\"button\" class=\"accordion-trigger\" aria-expanded=\"false\" aria-controls=\"acc-moderation-panel\" id=\"acc-moderation-header\">\n        <span class=\"accordion-chevron\" aria-hidden=\"true\"></span>\n        <span class=\"accordion-title-block\">\n          <span class=\"accordion-title\">Moderation</span>\n          <span class=\"accordion-caption\">Flag unsafe outputs before they reach the user.</span>\n        </span>\n        <span class=\"accordion-meta\"><span class=\"badge\">On</span></span>\n      </button>\n      <div id=\"acc-moderation-panel\" role=\"region\" aria-labelledby=\"acc-moderation-header\" class=\"accordion-panel\" hidden>\n        <div class=\"accordion-panel-inner\"></div>\n      </div>\n    </div>\n  </div>\n</div>",
    "css": ".accordion {\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n  overflow: hidden;\n}\n\n.accordion-caption { font: 400 12.5px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.accordion-chevron {\n  width: 10px;\n  height: 10px;\n  flex-shrink: 0;\n  position: relative;\n  transition: transform var(--dur-2) var(--ease);\n}\n\n.accordion-group { display: flex; flex-direction: column; gap: var(--s-3); }\n\n.accordion-meta {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s-2);\n}\n\n.accordion-panel { border-top: 1px solid var(--hair-soft); }\n\n.accordion-panel-inner { padding: var(--s-4); }\n\n.accordion-title { font: 500 14px/1.3 var(--f-body); color: var(--fg); }\n\n.accordion-title-block {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  flex: 1;\n}\n\n.accordion-trigger {\n  appearance: none;\n  display: flex;\n  align-items: center;\n  gap: var(--s-3);\n  width: 100%;\n  padding: var(--s-3) var(--s-4);\n  background: transparent;\n  border: 0;\n  text-align: left;\n  cursor: pointer;\n  color: var(--fg);\n  font: 500 14px/1.3 var(--f-body);\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; }"
  }
}