{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gauge",
  "type": "registry:ui",
  "title": "Gauge (MIAN)",
  "description": "A half-circle meter for one value against a known range: a score, a quota, a target.",
  "categories": [
    "data display",
    "gauge",
    "meter",
    "score",
    "speedometer"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/gauge.css",
      "type": "registry:file",
      "target": "mian/components/gauge.css",
      "content": ".mn-gauge { --v: 0; --size: 11rem; --thick: .85rem; position: relative; display: grid; place-items: end center; width: var(--size); max-width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }\n.mn-gauge::before {\n  content: \"\"; position: absolute; inset: 0 0 -100% 0; border-radius: 50%;\n  background: conic-gradient(from -90deg, var(--_c, var(--mn-primary)) calc(var(--v) * 1.8deg), var(--mn-surface-2) 0 180deg, transparent 0);\n  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));\n  mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));\n}\n.mn-gauge-value { position: relative; font: 700 1.6rem/1 var(--mn-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }\n.mn-gauge-sm { --size: 7.5rem; --thick: .6rem; }\n.mn-gauge-sm .mn-gauge-value { font-size: 1.15rem; }\n.mn-gauge-scale { display: flex; justify-content: space-between; width: var(--size, 11rem); max-width: 100%; margin: .3rem 0 0; color: var(--mn-muted); font-size: .6875rem; font-variant-numeric: tabular-nums; }"
    },
    {
      "path": "mian/examples/gauge.html",
      "type": "registry:file",
      "target": "mian/examples/gauge.html",
      "content": "<!-- Scores -->\n<div class=\"mn-row\" style=\"--mn-gap:2rem;align-items:flex-end\">\n  <div><div class=\"mn-gauge\" role=\"meter\" aria-label=\"Design score\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"72\" style=\"--v:72\"><span class=\"mn-gauge-value\">72</span></div><p class=\"mn-gauge-scale\"><span>0</span><span>100</span></p></div>\n  <div class=\"mn-gauge mn-gauge-sm mn-success\" role=\"meter\" aria-label=\"Uptime\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"99\" style=\"--v:99\"><span class=\"mn-gauge-value\">99%</span></div>\n  <div class=\"mn-gauge mn-gauge-sm mn-warning\" role=\"meter\" aria-label=\"Storage used\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"81\" style=\"--v:81\"><span class=\"mn-gauge-value\">81%</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/gauge",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-gauge",
        "mn-gauge-value",
        "mn-gauge-sm",
        "mn-gauge-scale",
        "--size · --thick"
      ],
      "accessibility": [
        "Use role=\"meter\" with aria-valuemin, aria-valuemax, aria-valuenow and a label.",
        "Write the value as text inside the dial; the arc repeats it.",
        "If colour carries meaning (good, warning, bad), say it in words nearby."
      ],
      "intents": [
        "gauge",
        "score dial",
        "meter",
        "health score",
        "quota dial",
        "target progress"
      ]
    }
  }
}