{
  "name": "SectionView",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SectionView.tsx",
  "chapterTag": "10 Page Templates",
  "chapter": "11-patterns-and-specials.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "The thin, consistent frame for a standard inner section — pinned `header`, a\nscrollable body with page gutters, and an optional pinned `footer`. It gives\nevery section the same scaffolding (gutters, scroll, header/footer placement)\nwithout dictating the body, which is composed from any kit primitives.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "SectionView",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SectionViewProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { SectionView } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "header",
      "optional": true,
      "type": "ReactNode",
      "doc": "The section header — typically a `<SectionHeader>`. Pinned above the body."
    },
    {
      "name": "footer",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional pinned footer (e.g. an unsaved-changes bar)."
    },
    {
      "name": "width",
      "optional": true,
      "type": "\"full\" | \"read\"",
      "doc": "`\"read\"` caps the body at a comfortable reading width + centres it. Default `\"full\"`."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": "The section body — any kit primitives."
    }
  ],
  "classesUsed": [
    "section-view",
    "section-view-body",
    "section-view-foot",
    "section-view-head"
  ],
  "examples": {
    "react": "<SectionView header={<SectionHeader title=\"Contacts\" actions={<Button>New</Button>} />}>\n  <DataTable … />\n</SectionView>",
    "html": null,
    "css": ".section-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }\n\n.section-view-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-6) var(--s-7); }\n\n.section-view-foot {\n  flex: none;\n  border-top: 1px solid var(--hair);\n  padding: var(--s-3) var(--s-7);\n  background: var(--bg-paper);\n}\n\n.section-view-head { padding: var(--s-6) var(--s-7) 0; flex: none; }"
  }
}