{
  "name": "StatTile",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/StatTile.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": "stat-grid",
  "elName": "Four-up stat grid",
  "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#stat-grid",
  "hasLiveDemo": false,
  "description": "KPI-style stat tile. Compose into a `.stat-grid` (or\n`<ListScreenKpiStrip>`) to build the 4-up dashboard strip. The CSS\nsurface lives in chapter 7 (data display) — three variants for three\nnarrative weights:",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "StatTile",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "StatTileProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "StatTileVariant",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "StatDeltaDirection",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { StatTile } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "label",
      "optional": false,
      "type": "ReactNode",
      "doc": "Eyebrow above the value — typically a metric name (\"Leads\", \"MRR\")."
    },
    {
      "name": "value",
      "optional": false,
      "type": "ReactNode",
      "doc": "Main number / value. Renders in the kit's display face, tabular-nums."
    },
    {
      "name": "delta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional delta caption — e.g. \"↑ 12.4%\" or \"↓ 3.2%\". When provided with `direction`, the tile colours it green / red automatically."
    },
    {
      "name": "direction",
      "optional": true,
      "type": "StatDeltaDirection",
      "doc": "Direction of the delta. `\"up\"` → success-text, `\"down\"` → error-text. Omit (or pass `null`) for neutral / no auto-colour."
    },
    {
      "name": "variant",
      "optional": true,
      "type": "StatTileVariant",
      "doc": "Visual variant: - `\"default\"` — paper bg, 24px value. - `\"big\"` — same chrome, 36px value. Hero-of-section sizing. - `\"moment\"` — ink bg, accent 36px value. Operator \"look at me\" moments."
    },
    {
      "name": "spark",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional sparkline / mini-chart node rendered absolutely in the tile's lower-right (40% from left, 50% height, 18–28% opacity)."
    }
  ],
  "classesUsed": [
    "spark",
    "stat-delta",
    "stat-label",
    "stat-tile",
    "stat-tile--moment"
  ],
  "examples": {
    "react": "<StatTile label=\"Leads\" value=\"1,284\" delta=\"↑ 12.4%\" direction=\"up\" />",
    "html": "<div class=\"stat-grid\">\n  <div class=\"stat-tile\"><div class=\"stat-label\">Leads</div><div class=\"stat-value\">1,284</div><div class=\"stat-delta is-up\">↑ 12.4%</div></div>\n  <div class=\"stat-tile\"><div class=\"stat-label\">Qualified</div><div class=\"stat-value\">412</div><div class=\"stat-delta is-up\">↑ 8.1%</div></div>\n  <div class=\"stat-tile\"><div class=\"stat-label\">Meetings</div><div class=\"stat-value\">87</div><div class=\"stat-delta is-down\">↓ 3.2%</div></div>\n  <div class=\"stat-tile\"><div class=\"stat-label\">Revenue</div><div class=\"stat-value\">$48.2k</div><div class=\"stat-delta is-up\">↑ 21.6%</div></div>\n</div>",
    "css": ".spark {\n  display: inline-block;\n  vertical-align: middle;\n  --spark-color: var(--success);\n}\n.spark {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 64px; height: 64px;\n  position: relative;\n  color: var(--accent-text);\n}\n\n.stat-delta {\n  display: inline-flex; align-items: center; gap: 3px;\n  font: 600 12px/1 var(--f-mono);\n  padding: 4px 8px; border-radius: var(--r-pill);\n}\n\n.stat-label { font: 500 12px/1 var(--f-mono); color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.08em; }\n\n.stat-tile { padding: var(--s-4); background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-md); position: relative; overflow: hidden; }\n\n.stat-tile--moment {\n  background: var(--ink); color: var(--paper);\n  border-color: rgba(244, 236, 228, 0.12);\n}"
  }
}