{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "stat",
    "type": "registry:component",
    "title": "Stat",
    "description": "A single metric with a large value, a label and an optional trend. Set the trend direction with data-tone.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Data display",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/stat.html",
            "type": "registry:file",
            "target": "components/stat.html",
            "content": "<!-- Stat\n     Group metrics in .dp-stat-row. Set the trend direction with data-tone\n     (up or down) on .dp-stat-trend. -->\n\n<div class=\"dp-stat-row\">\n  <div class=\"dp-stat\">\n    <span class=\"dp-stat-value\">412M</span>\n    <span class=\"dp-stat-label\">Domains tracked</span>\n  </div>\n\n  <div class=\"dp-stat\">\n    <span class=\"dp-stat-value\">99%</span>\n    <span class=\"dp-stat-label\">Registered domains covered</span>\n    <span class=\"dp-stat-trend\" data-tone=\"up\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n           stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M7 17 17 7\"></path><path d=\"M7 7h10v10\"></path>\n      </svg>\n      2.1% this month\n    </span>\n  </div>\n\n  <div class=\"dp-stat\">\n    <span class=\"dp-stat-value\">1.8s</span>\n    <span class=\"dp-stat-label\">Median query time</span>\n    <span class=\"dp-stat-trend\" data-tone=\"down\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n           stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M17 7 7 17\"></path><path d=\"M17 17H7V7\"></path>\n      </svg>\n      0.3s faster\n    </span>\n  </div>\n</div>\n"
        },
        {
            "path": "components/stat.css",
            "type": "registry:file",
            "target": "components/stat.css",
            "content": "/* Stat\n   A single metric: a large value with a label and an optional trend.\n   Group stats in a .dp-stat-row. Status tone is set with data-tone on the\n   trend. All colour and type come from tokens.css. */\n\n.dp-stat-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dp-space-6);\n}\n\n.dp-stat {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-1);\n  min-width: 8rem;\n}\n\n.dp-stat-value {\n  font-size: var(--dp-text-3xl);\n  font-weight: var(--dp-weight-extrabold);\n  line-height: 1;\n  color: var(--dp-navy);\n  font-variant-numeric: tabular-nums;\n}\n\n.dp-stat-label {\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text-muted);\n}\n\n.dp-stat-trend {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dp-space-1);\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-semibold);\n  color: var(--dp-text-muted);\n}\n\n.dp-stat-trend svg {\n  width: 1em;\n  height: 1em;\n}\n\n.dp-stat-trend[data-tone=\"up\"] {\n  color: var(--dp-success);\n}\n\n.dp-stat-trend[data-tone=\"down\"] {\n  color: var(--dp-danger);\n}\n"
        }
    ]
}