{
  "name": "KpiDeltaTile",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/KpiDeltaTile.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": "kpi-delta-tile",
  "elName": "KpiDeltaTile",
  "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#kpi-delta-tile",
  "hasLiveDemo": false,
  "description": "KPI tile with an explicit period-comparison delta — the platform's\n\"+12 new contacts vs last 7 days\" shape. Pairs with the kit's existing\n`<KpiTile>` for the simpler no-delta case.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "KpiDeltaTile",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "KpiDeltaTileProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "KpiDeltaDirection",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { KpiDeltaTile } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "label",
      "optional": false,
      "type": "ReactNode",
      "doc": "Top-row label / KPI name."
    },
    {
      "name": "value",
      "optional": false,
      "type": "ReactNode",
      "doc": "The big number (formatted string — kit doesn't format)."
    },
    {
      "name": "delta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional pre-formatted delta string (\"+12%\", \"−3.4\")."
    },
    {
      "name": "direction",
      "optional": true,
      "type": "KpiDeltaDirection",
      "doc": "Direction drives the colour: up = success, down = error, flat = neutral."
    },
    {
      "name": "invertDirection",
      "optional": true,
      "type": "boolean",
      "doc": "Whether `up` should be coloured as good (default) or bad (e.g. error rate)."
    },
    {
      "name": "compareLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Period comparison caption beneath the delta — \"vs last 7 days\"."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned slot — typically a `<Tooltip>` info `?`."
    }
  ],
  "classesUsed": [
    "kpi-delta-tile",
    "kpi-delta-tile-arrow",
    "kpi-delta-tile-compare",
    "kpi-delta-tile-delta",
    "kpi-delta-tile-foot",
    "kpi-delta-tile-head",
    "kpi-delta-tile-label",
    "kpi-delta-tile-meta",
    "kpi-delta-tile-value"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"kpi-delta-tile\">\n  <div class=\"kpi-delta-tile-head\">\n    <span class=\"kpi-delta-tile-label\">New contacts</span>\n  </div>\n  <div class=\"kpi-delta-tile-value\">248</div>\n  <div class=\"kpi-delta-tile-foot\">\n    <span class=\"kpi-delta-tile-delta is-tone-good is-dir-up\">\n      <span class=\"kpi-delta-tile-arrow\" aria-hidden=\"true\">↑</span>+12%\n    </span>\n    <span class=\"kpi-delta-tile-compare\">vs last 7 days</span>\n  </div>\n</div>",
    "css": ".kpi-delta-tile {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n  padding: var(--s-4);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n}\n\n.kpi-delta-tile-arrow { font-size: 11px; }\n\n.kpi-delta-tile-compare { font: 400 12px/1 var(--f-body); color: var(--fg-faint); }\n\n.kpi-delta-tile-delta {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font: 500 12.5px/1 var(--f-body);\n  font-variant-numeric: tabular-nums;\n}\n\n.kpi-delta-tile-foot {\n  display: flex;\n  align-items: baseline;\n  gap: var(--s-2);\n}\n\n.kpi-delta-tile-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--s-2);\n}\n\n.kpi-delta-tile-label {\n  font: 600 10.5px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n}\n\n.kpi-delta-tile-meta { display: inline-flex; align-items: center; gap: var(--s-1); }\n\n.kpi-delta-tile-value {\n  font: 600 28px/1.05 var(--f-display);\n  color: var(--fg);\n  font-variant-numeric: tabular-nums;\n}"
  }
}