{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat",
  "type": "registry:ui",
  "title": "Stat (MIAN)",
  "description": "Key metrics with labels and trend deltas, alone or in a joined row.",
  "categories": [
    "data display",
    "stat",
    "metric",
    "kpi",
    "number"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/stat.css",
      "type": "registry:file",
      "target": "mian/components/stat.css",
      "content": ".mn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); overflow: hidden; }\n.mn-stat { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.25rem; min-width: 0; }\n.mn-stats > .mn-stat + .mn-stat { border-inline-start: var(--mn-border-w) solid var(--mn-border); }\n.mn-stat-label { font-size: var(--mn-text-sm); color: var(--mn-muted); display: flex; align-items: center; gap: .4rem; }\n.mn-stat-value { font: 700 1.75rem/1.1 var(--mn-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }\n.mn-stat-delta { display: inline-flex; align-items: center; gap: .2rem; font-size: calc(var(--mn-text-sm) - 1px); font-weight: 600; color: var(--mn-muted); }\n.mn-stat-delta svg { width: .95em; height: .95em; }\n.mn-stat-delta.mn-up { color: color-mix(in oklab, var(--mn-success-text) 86%, var(--mn-fg)); }\n.mn-stat-delta.mn-down { color: color-mix(in oklab, var(--mn-danger-text) 86%, var(--mn-fg)); }\n@media (max-width: 40rem) { .mn-stats > .mn-stat + .mn-stat { border-inline-start: 0; border-top: var(--mn-border-w) solid var(--mn-border); } }"
    },
    {
      "path": "mian/examples/stat.html",
      "type": "registry:file",
      "target": "mian/examples/stat.html",
      "content": "<!-- Dashboard row -->\n<div class=\"mn-stats\">\n  <div class=\"mn-stat\"><span class=\"mn-stat-label\">Revenue</span><span class=\"mn-stat-value\">€45,231</span><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> 20.1% <span class=\"mn-sr-only\">increase</span></span></div>\n  <div class=\"mn-stat\"><span class=\"mn-stat-label\">Subscribers</span><span class=\"mn-stat-value\">2,350</span><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> 18%</span></div>\n  <div class=\"mn-stat\"><span class=\"mn-stat-label\">Churn</span><span class=\"mn-stat-value\">3.2%</span><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.4 pts</span></div>\n  <div class=\"mn-stat\"><span class=\"mn-stat-label\">Active now</span><span class=\"mn-stat-value\">573</span><span class=\"mn-stat-delta\">+201 since last hour</span></div>\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/stat",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-stats",
        "mn-stat",
        "mn-stat-label · mn-stat-value · mn-stat-delta"
      ],
      "accessibility": [
        "Deltas use both colour and an arrow; add visually hidden text such as \"increase\" if the arrow is decorative."
      ],
      "intents": [
        "kpi",
        "metric card",
        "dashboard numbers",
        "revenue stat",
        "trend delta"
      ]
    }
  }
}