{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard",
  "type": "registry:ui",
  "title": "Dashboard grid (MIAN)",
  "description": "A twelve-track grid for dashboards and a widget frame: title, period, body, footer. It lays out for the width it gets, so it works beside a sidebar.",
  "categories": [
    "layout & utilities",
    "dashboard",
    "dashboard layout",
    "widget",
    "panel"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/dashboard.css",
      "type": "registry:file",
      "target": "mian/components/dashboard.css",
      "content": ".mn-dash { container: mn-dash / inline-size; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--mn-gap, 1rem); }\n.mn-dash > * { grid-column: span 12; min-width: 0; }\n@container mn-dash (min-width: 38rem) {\n  .mn-dash > :is(.mn-dash-3, .mn-dash-4, .mn-dash-6) { grid-column: span 6; }\n}\n@container mn-dash (min-width: 62rem) {\n  .mn-dash > .mn-dash-3 { grid-column: span 3; }\n  .mn-dash > .mn-dash-4 { grid-column: span 4; }\n  .mn-dash > .mn-dash-5 { grid-column: span 5; }\n  .mn-dash > .mn-dash-7 { grid-column: span 7; }\n  .mn-dash > .mn-dash-8 { grid-column: span 8; }\n  .mn-dash > .mn-dash-9 { grid-column: span 9; }\n}\n.mn-widget { display: flex; flex-direction: column; min-width: 0; }\n.mn-widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .95rem 1.15rem .2rem; }\n.mn-widget-title { margin: 0; font: 600 .9375rem/1.35 var(--mn-font); color: var(--mn-fg); }\n.mn-widget-sub { margin: .1rem 0 0; color: var(--mn-muted); font-size: .8125rem; }\n.mn-widget-body { flex: 1; min-width: 0; padding: .8rem 1.15rem 1.15rem; }\n.mn-widget-flush > .mn-widget-body { padding: .5rem 0 0; }\n.mn-widget-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1.15rem; border-top: var(--mn-border-w) solid var(--mn-border); color: var(--mn-muted); font-size: var(--mn-text-sm); }"
    },
    {
      "path": "mian/examples/dashboard.html",
      "type": "registry:file",
      "target": "mian/examples/dashboard.html",
      "content": "<!-- Overview -->\n<div class=\"mn-dash\">\n  <section class=\"mn-card mn-widget mn-dash-8\" aria-labelledby=\"dw-1\"><div class=\"mn-widget-head\"><div><h3 class=\"mn-widget-title\" id=\"dw-1\">Orders</h3><p class=\"mn-widget-sub\">Last 12 weeks</p></div><select class=\"mn-select mn-input-sm\" aria-label=\"Period\" style=\"width:auto\"><option>12 weeks</option><option>6 months</option></select></div>\n    <div class=\"mn-widget-body\"><svg class=\"mn-chart-line\" style=\"--h:9rem\" data-values=\"212,240,231,268,254,290,301,288,322,340,331,362\" data-labels=\"W27,W28,W29,W30,W31,W32,W33,W34,W35,W36,W37,W38\" data-names=\"Orders\" role=\"img\" aria-label=\"Orders per week, rising from 212 to 362\"></svg></div>\n    <div class=\"mn-widget-foot\"><span>Updated 4 minutes ago</span><a class=\"mn-link\" href=\"#\">Full report</a></div></section>\n  <section class=\"mn-card mn-widget mn-dash-4\" aria-labelledby=\"dw-2\"><div class=\"mn-widget-head\"><h3 class=\"mn-widget-title\" id=\"dw-2\">Fulfilment</h3></div>\n    <div class=\"mn-widget-body\" style=\"display:grid;justify-items:center;gap:.25rem\"><div class=\"mn-gauge mn-success\" role=\"meter\" aria-label=\"Orders shipped within 24 hours\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"86\" style=\"--v:86\"><span class=\"mn-gauge-value\">86%</span></div><p class=\"mn-kpi-foot\">shipped within 24 hours · target 90%</p></div></section>\n  <section class=\"mn-card mn-widget mn-widget-flush mn-dash-7\" aria-labelledby=\"dw-3\"><div class=\"mn-widget-head\"><h3 class=\"mn-widget-title\" id=\"dw-3\">Needs attention</h3><span class=\"mn-badge mn-badge-soft mn-warning\">3</span></div>\n    <div class=\"mn-widget-body\"><table class=\"mn-table mn-table-compact\"><thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Issue</th><th scope=\"col\" class=\"mn-num\">Age</th></tr></thead><tbody><tr><td>#48213</td><td>Address not found</td><td class=\"mn-num\">2 d</td></tr><tr><td>#48190</td><td>Payment review</td><td class=\"mn-num\">1 d</td></tr><tr><td>#48177</td><td>Out of stock: 1 item</td><td class=\"mn-num\">6 h</td></tr></tbody></table></div></section>\n  <section class=\"mn-card mn-widget mn-dash-5\" aria-labelledby=\"dw-4\"><div class=\"mn-widget-head\"><h3 class=\"mn-widget-title\" id=\"dw-4\">Sales by channel</h3></div>\n    <div class=\"mn-widget-body\"><div class=\"mn-breakdown\"><div class=\"mn-breakdown-bar\" role=\"img\" aria-label=\"Shop 54%, marketplace 27%, wholesale 13%, other 6%\"><i style=\"--v:54\"></i><i style=\"--v:27\"></i><i style=\"--v:13\"></i><i style=\"--v:6\"></i></div>\n      <ul class=\"mn-breakdown-list\"><li><span>Own shop</span><b>€26,030</b><small>54%</small></li><li><span>Marketplace</span><b>€13,020</b><small>27%</small></li><li><span>Wholesale</span><b>€6,270</b><small>13%</small></li><li><span>Other</span><b>€2,890</b><small>6%</small></li></ul></div></div></section>\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/dashboard",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-dash",
        "mn-dash-3 · -4 · -5 · -6 · -7 · -8 · -9",
        "mn-widget",
        "mn-widget-head",
        "mn-widget-title · mn-widget-sub",
        "mn-widget-body",
        "mn-widget-foot"
      ],
      "accessibility": [
        "Each widget is a <section> with a real heading, so it appears in the page outline.",
        "Order widgets in the source by importance; the grid only changes how wide they are.",
        "Say when the data was last updated, in text."
      ],
      "intents": [
        "dashboard layout",
        "dashboard grid",
        "widget panel",
        "admin overview page",
        "analytics overview"
      ]
    }
  }
}