{
  "name": "SectionCardEmpty",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SectionCard.tsx",
  "chapterTag": "10 Page Templates",
  "chapter": "11-patterns-and-specials.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "`<SectionCard.Empty>` — render the canonical empty-state stack from\ninside any body slot (free-form children, not just the `emptyState`\nshortcut). Useful when the consumer is composing a richer body that\nstill needs the empty-state visual for one of its parts.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "SectionCard",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SectionCardEmpty",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SectionCardProps",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "SectionCardEmptyContent",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { SectionCardEmpty } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "av",
    "card",
    "empty",
    "hero",
    "section-card",
    "section-card-action",
    "section-card-body",
    "section-card-count",
    "section-card-empty",
    "section-card-empty-action",
    "section-card-empty-content",
    "section-card-empty-description",
    "section-card-empty-icon",
    "section-card-empty-title",
    "section-card-head",
    "section-card-head-text",
    "section-card-hero",
    "section-card-hero-body",
    "section-card-hero-sub",
    "section-card-hero-title",
    "section-card-icon",
    "section-card-subtitle",
    "section-card-title",
    "title"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".av {\n  width: 32px; height: 32px; border-radius: 50%;\n  display: inline-flex; align-items: center; justify-content: center;\n  font: 600 12px/1 var(--f-display); letter-spacing: 0.02em;\n  flex-shrink: 0;\n  overflow: hidden;                           /* clip image children cleanly */\n  /* v1.12.0 (R11-2): default fill so initials are legible without consumers\n     having to think about background. Pre-1.12.0 `.av` was background-less;\n     on a same-tone page wash (e.g. warm-1) initials rendered invisible.\n     Image children cover this fill via `overflow: hidden` clipping. */\n  background: var(--bg-warm);\n  color: var(--fg-soft);\n}\n\n.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.empty {\n  display: flex; flex-direction: column; align-items: center;\n  text-align: center;\n  padding: var(--s-9) var(--s-5);\n  background: var(--bg-paper);\n  border: 1px dashed var(--hair);\n  border-radius: var(--r-lg);\n  width: 100%;                       /* fill the grid slot / column */\n  max-width: min(640px, 100%);       /* cap on very wide single-column pages */\n  margin: 0 auto;\n}\n\n.hero {\n  position: relative;\n  padding: var(--s-11) var(--s-6);\n  background: var(--warm-3);\n  border-radius: var(--r-xl);\n  overflow: hidden;\n  isolation: isolate;\n  /* pinned warm surface — rescope type tokens to ink so copy stays legible in dark */\n  --fg:      var(--ink);\n  --fg-soft: color-mix(in oklab, var(--ink) 68%, transparent);\n  --fg-dim:  color-mix(in oklab, var(--ink) 48%, transparent);\n  --hair:    rgba(25, 30, 50, 0.09);\n  color: var(--fg);\n}\n\n.section-card {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.section-card-action {\n  margin-left: auto;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  font: 500 12px/1 var(--f-mono);\n  color: var(--accent-text);\n  cursor: pointer;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  text-decoration: none;\n  transition: color var(--dur-2) var(--ease);\n}\n\n.section-card-body {\n  display: block;\n}\n\n.section-card-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 18px;\n  padding: 0 6px;\n  font: 600 11px/1 var(--f-mono);\n  color: var(--fg-dim);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-pill);\n}\n\n.section-card-empty {\n  padding: var(--s-5);\n  text-align: center;\n  color: var(--fg-dim);\n  font-size: 13px;\n}\n\n.section-card-empty-action {\n  margin-top: var(--s-3);\n  display: inline-flex; gap: var(--s-3); align-items: center;\n  flex-wrap: wrap; justify-content: center;\n}\n\n.section-card-empty-content {\n  display: flex; flex-direction: column; align-items: center;\n  gap: var(--s-2);\n  text-align: center;\n  /* Cap copy width so longer descriptions stay readable inside narrow\n     section cards (settings / detail-page rails). */\n  max-width: 44ch;\n  margin: 0 auto;\n}\n\n.section-card-empty-description {\n  font: 400 13px/1.5 var(--f-body);\n  color: var(--fg-dim);\n  margin: 0;\n}\n\n.section-card-empty-icon {\n  width: 40px; height: 40px; border-radius: 50%;\n  display: inline-flex; align-items: center; justify-content: center;\n  background: var(--warm-3);\n  color: color-m"
  }
}