{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kpi",
  "type": "registry:ui",
  "title": "KPI card (MIAN)",
  "description": "One number that matters, with its change, a sparkline you can hover and a line of context.",
  "categories": [
    "data display",
    "kpi",
    "metric card",
    "sparkline",
    "dashboard card"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/kpi.css",
      "type": "registry:file",
      "target": "mian/components/kpi.css",
      "content": ".mn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: var(--mn-gap, 1rem); }\n.mn-kpi { display: grid; align-content: start; gap: .4rem; min-width: 0; padding: 1.05rem 1.2rem 1.1rem; }\n.mn-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--mn-muted); font-size: var(--mn-text-sm); }\n.mn-kpi-head svg { width: 1rem; height: 1rem; }\n.mn-kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; min-width: 0; }\n.mn-kpi-value { font: 700 1.75rem/1.1 var(--mn-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }\n.mn-kpi-foot { margin: 0; color: var(--mn-muted); font-size: .75rem; line-height: 1.4; }\n.mn-kpi-foot .mn-stat-delta { margin-inline-end: .3rem; }\nsvg.mn-spark { --h: 2.5rem; flex: 0 1 7rem; width: 7rem; min-width: 3.5rem; cursor: default; }\n.mn-spark .mn-grid-line { display: none; }\n.mn-spark .mn-line { stroke-width: 1.5px; }\n.mn-spark.mn-up .mn-line, .mn-spark.mn-up .mn-point { stroke: var(--mn-success-text, var(--mn-success)); }\n.mn-spark.mn-up .mn-area { fill: var(--mn-success); }\n.mn-spark.mn-down .mn-line, .mn-spark.mn-down .mn-point { stroke: var(--mn-danger-text, var(--mn-danger)); }\n.mn-spark.mn-down .mn-area { fill: var(--mn-danger); }"
    },
    {
      "path": "mian/examples/kpi.html",
      "type": "registry:file",
      "target": "mian/examples/kpi.html",
      "content": "<!-- KPI row -->\n<div class=\"mn-kpis\">\n  <article class=\"mn-card mn-kpi\">\n    <div class=\"mn-kpi-head\"><span>Monthly recurring revenue</span></div>\n    <div class=\"mn-kpi-row\"><span class=\"mn-kpi-value\" data-mn-count>€48,210</span><svg class=\"mn-chart-line mn-spark mn-up\" data-values=\"31,33,36,35,39,42,44,48\" data-labels=\"W1,W2,W3,W4,W5,W6,W7,W8\" data-unit=\" k€\" role=\"img\" aria-label=\"Monthly recurring revenue, last eight weeks\"></svg></div>\n    <p class=\"mn-kpi-foot\"><span class=\"mn-stat-delta mn-up\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 19V5M6 11l6-6 6 6\"/></svg> 6.4%<span class=\"mn-sr-only\"> increase</span></span>vs last month</p>\n  </article>\n  <article class=\"mn-card mn-kpi\">\n    <div class=\"mn-kpi-head\"><span>Active customers</span></div>\n    <div class=\"mn-kpi-row\"><span class=\"mn-kpi-value\" data-mn-count>1,284</span><svg class=\"mn-chart-line mn-spark\" data-values=\"1180,1195,1201,1220,1236,1249,1262,1284\" data-labels=\"W1,W2,W3,W4,W5,W6,W7,W8\" role=\"img\" aria-label=\"Active customers, last eight weeks\"></svg></div>\n    <p class=\"mn-kpi-foot\"><span class=\"mn-stat-delta mn-up\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 19V5M6 11l6-6 6 6\"/></svg> 38<span class=\"mn-sr-only\"> more</span></span>new this month</p>\n  </article>\n  <article class=\"mn-card mn-kpi\">\n    <div class=\"mn-kpi-head\"><span>Churn</span></div>\n    <div class=\"mn-kpi-row\"><span class=\"mn-kpi-value\" data-mn-count>2.1%</span><svg class=\"mn-chart-line mn-spark mn-down\" data-values=\"1.6,1.7,1.6,1.8,1.8,1.9,2.0,2.1\" data-labels=\"W1,W2,W3,W4,W5,W6,W7,W8\" data-unit=\"%\" role=\"img\" aria-label=\"Churn, last eight weeks\"></svg></div>\n    <p class=\"mn-kpi-foot\"><span class=\"mn-stat-delta mn-down\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M6 13l6 6 6-6\"/></svg> 0.3 pts<span class=\"mn-sr-only\"> higher, which is worse</span></span>vs last month</p>\n  </article>\n</div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/kpi",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-kpis",
        "mn-kpi",
        "mn-kpi-head",
        "mn-kpi-row",
        "mn-kpi-value",
        "mn-kpi-foot",
        "mn-spark"
      ],
      "accessibility": [
        "Say what the change is compared with (“vs last month”); an arrow alone is not information.",
        "The sparkline is role=\"img\" with an aria-label; its values are reachable with the arrow keys.",
        "Up is not always good: colour the delta by meaning (churn going up is mn-down).",
        "Counting up never replaces the text: the final value stays in the DOM."
      ],
      "intents": [
        "kpi card",
        "metric with sparkline",
        "number with trend",
        "dashboard headline numbers",
        "revenue card"
      ]
    }
  }
}