{
  "name": "EmptyState",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/EmptyState.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": "empty",
  "elName": "Table / list empty",
  "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#empty",
  "hasLiveDemo": false,
  "description": "Empty state surface. Wraps `.empty`. Always explain why and give an out.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "EmptyState",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "EmptyStateProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { EmptyState } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "icon",
      "optional": true,
      "type": "ReactNode",
      "doc": "Icon node — typically a 32-40px SVG inside the warm chip."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Heading."
    },
    {
      "name": "description",
      "optional": true,
      "type": "ReactNode",
      "doc": "Single-sentence explanation."
    },
    {
      "name": "primaryAction",
      "optional": true,
      "type": "ReactNode",
      "doc": "Primary action — typically a `<Button>`."
    },
    {
      "name": "secondaryAction",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional secondary action — typically a ghost button or link."
    }
  ],
  "classesUsed": [
    "empty",
    "empty-actions",
    "empty-ic",
    "empty-lede",
    "empty-title",
    "title"
  ],
  "examples": {
    "react": "<EmptyState\n  icon={<InboxIcon />}\n  title=\"No leads yet\"\n  description=\"When a new lead arrives, it'll appear here in seconds.\"\n  primaryAction={<Button>Add manually</Button>}\n  secondaryAction={<a href=\"/help/leads\">Read the docs →</a>}\n/>",
    "html": "<div class=\"empty\">\n  <div class=\"empty-ic\" aria-hidden=\"true\"><svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"22 12 16 12 14 15 10 15 8 12 2 12\"/><path d=\"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\"/></svg></div>\n  <h3 class=\"empty-title\">No leads yet</h3>\n  <p class=\"empty-lede\">Your agent hasn't been routed any leads. Connect a source and your first conversation will appear here.</p>\n  <div class=\"empty-actions\">\n    <a href=\"#\" class=\"empty-btn\">Connect a source</a>\n    <a href=\"#\" class=\"empty-link\">Read the quickstart →</a>\n  </div>\n</div>",
    "css": ".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.empty-actions {\n  display: flex; gap: var(--s-4); align-items: center;\n  flex-wrap: wrap; justify-content: center;\n}\n\n.empty-ic {\n  width: 72px; height: 72px; border-radius: 50%;\n  display: inline-flex; align-items: center; justify-content: center;\n  background: var(--warm-3);\n  color: color-mix(in oklab, var(--ink) 55%, transparent);\n  margin-bottom: var(--s-4);\n  flex-shrink: 0;\n}\n\n.empty-lede {\n  font: 400 14.5px/1.55 var(--f-body); color: var(--fg-soft);\n  margin: 0 0 var(--s-5); max-width: 36ch;\n}\n\n.empty-title {\n  font: 600 20px/1.2 var(--f-display); letter-spacing: -0.01em;\n  margin: 0 0 6px; color: var(--fg);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}