{
  "name": "Section",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/Section.tsx",
  "chapterTag": "Kit chrome",
  "chapter": null,
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Section wrapper for one logical group of demos within a kit chapter. Renders\n`<section class=\"section\">` with the head + description scaffold the chapter\nHTML uses today.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "Section",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SectionProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { Section } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "id",
      "optional": true,
      "type": "string",
      "doc": "Anchor id — used for the URL fragment (`#card`)."
    },
    {
      "name": "number",
      "optional": true,
      "type": "ReactNode",
      "doc": "Section number prefix (e.g. `\"5.1\"`). Optional."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Section heading. Defaults to a blank string — Section is kit-chrome."
    },
    {
      "name": "description",
      "optional": true,
      "type": "ReactNode",
      "doc": "One-line description shown under the heading. Optional."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    }
  ],
  "classesUsed": [
    "card",
    "section",
    "section-desc",
    "section-head",
    "section-title",
    "sn",
    "title"
  ],
  "examples": {
    "react": "<Section id=\"card\" number=\"5.1\" title=\"Base card\"\n  description=\"A paper surface on a warm page. Three fills.\">\n  <Demo name=\"Card\" tag=\".card · .card-sunk · .card-warm\">\n    …\n  </Demo>\n</Section>",
    "html": null,
    "css": ".card {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  padding: var(--s-6) var(--s-6);\n  display: flex; flex-direction: column; gap: var(--s-2);\n  /* v1.9.0 (R6-2): cards now ship with `--sh-1` by default. On a same-\n     colour page bg (the typical CRM detail-page setup) cards visually\n     disappear with hairline + radius alone. Adding the small drop\n     shadow gives the \"card feels like a card\" treatment that every\n     product app reaches for. Marketing-grid contexts that explicitly\n     want flat hairline-only cards opt out via `<Card flat>` (or\n     `.card-flat`). */\n  box-shadow: var(--sh-1);\n  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);\n}\n\n.section {\n  padding: var(--s-11) 0;\n  border-bottom: 1px solid var(--hair);\n}\n.section { scroll-margin-top: 80px; }\n\n.section-desc {\n  color: var(--fg-soft);\n  font-size: 16px;\n  max-width: 60ch;\n  line-height: 1.65;\n  margin: 0 0 var(--s-7);\n}\n\n.section-head {\n  display: flex; align-items: baseline; justify-content: space-between;\n  gap: var(--s-6); margin-bottom: var(--s-6);\n  flex-wrap: wrap;\n}\n\n.section-title {\n  font-family: var(--f-display);\n  font-weight: 700;\n  font-size: 28px;\n  letter-spacing: -0.01em;\n  line-height: 1.2;\n  margin: 0;\n  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3);\n}\n\n.sn {\n  width: 240px;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  padding: var(--s-5);\n  display: flex; flex-direction: column; gap: 2px;\n  font-family: var(--f-body);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}