{
  "name": "SummaryBanner",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SummaryBanner.tsx",
  "chapterTag": "Kit chrome",
  "chapter": null,
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Collapsible AI-generated summary card — the kit's standard \"here's a\nTL;DR of this conversation / session / agent diff\" banner. Defaults to\nexpanded; chevron in the header toggles. Pass `accent` for the pink\nleft rail used on AI-content surfaces.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "SummaryBanner",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SummaryBannerProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SummaryBanner } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Top-line title. Default `\"Conversation summary\"`."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional caption beneath the title — \"Updated 3m ago\"."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned slot on the header row — typically a \"Regenerate\" button or a `<Badge>` indicating staleness."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Body content — the AI-generated TL;DR."
    },
    {
      "name": "expanded",
      "optional": true,
      "type": "boolean",
      "doc": "Controlled expanded state."
    },
    {
      "name": "defaultExpanded",
      "optional": true,
      "type": "boolean",
      "doc": "Uncontrolled initial expanded state. Default `true`."
    },
    {
      "name": "onExpandedChange",
      "optional": true,
      "type": "(expanded: boolean) => void",
      "doc": "Fires when the user toggles the banner."
    },
    {
      "name": "accent",
      "optional": true,
      "type": "boolean",
      "doc": "Pin an accent left rail (matches the brand AI-content treatment)."
    },
    {
      "name": "icon",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional leading icon — defaults to a small sparkle glyph. Pass `null` to omit."
    },
    {
      "name": "hideToggle",
      "optional": true,
      "type": "boolean",
      "doc": "Hide the disclosure chevron. The banner is no longer interactive — it always shows the body. Default `false`."
    }
  ],
  "classesUsed": [
    "summary-banner",
    "summary-banner-body",
    "summary-banner-caption",
    "summary-banner-chevron",
    "summary-banner-head",
    "summary-banner-icon",
    "summary-banner-meta",
    "summary-banner-title",
    "summary-banner-title-block",
    "summary-banner-toggle",
    "title"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".summary-banner {\n  display: flex;\n  flex-direction: column;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  overflow: hidden;\n  position: relative;\n}\n\n.summary-banner-body {\n  padding: 0 var(--s-4) var(--s-4);\n  border-top: 1px solid var(--hair-soft);\n  padding-top: var(--s-3);\n  font: 400 13.5px/1.55 var(--f-body);\n  color: var(--fg);\n}\n\n.summary-banner-caption {\n  font: 400 12px/1.4 var(--f-body);\n  color: var(--fg-soft);\n}\n\n.summary-banner-chevron {\n  width: 10px;\n  height: 10px;\n  position: relative;\n  transition: transform var(--dur-2) var(--ease);\n}\n\n.summary-banner-head {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  align-items: center;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n}\n\n.summary-banner-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border-radius: var(--r-xs);\n  background: color-mix(in oklab, var(--accent) 12%, var(--bg-paper));\n  color: var(--accent);\n}\n\n.summary-banner-meta {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s-2);\n}\n\n.summary-banner-title {\n  font: 500 13.5px/1.3 var(--f-body);\n  color: var(--fg);\n}\n\n.summary-banner-title-block {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 0;\n}\n\n.summary-banner-toggle {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  width: 28px;\n  height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--fg-soft);\n  cursor: pointer;\n  border-radius: var(--r-xs);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}