{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metric",
  "type": "registry:component",
  "title": "Metric",
  "description": "Displays a numeric reading with tabular figures and aligned units.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/metric.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\n\nexport interface MetricProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  label: React.ReactNode;\n  value: number | string;\n  unit?: React.ReactNode;\n  description?: React.ReactNode;\n  comparison?: React.ReactNode;\n  /** Optional trend visualization, for example an existing Sparkline. */\n  trend?: React.ReactNode;\n  locale?: string;\n  formatOptions?: Intl.NumberFormatOptions;\n}\nconst styles = stylex.create({\n  root: { display: \"grid\", alignContent: \"start\", gap: \"1rem\", minWidth: 0, color: vlak.ink },\n  label: { color: vlak.gray, fontSize: \"0.875rem\", lineHeight: 1.45, margin: 0 },\n  reading: { display: \"flex\", alignItems: \"baseline\", gap: \"0.5rem\", minHeight: \"4rem\", minWidth: 0, fontVariantNumeric: \"tabular-nums\", lineHeight: 1 },\n  value: { fontSize: \"clamp(2.5rem, 5vw, 4rem)\", letterSpacing: \"-0.04em\", fontWeight: 500, overflowWrap: \"anywhere\" },\n  unit: { fontSize: \"1.125rem\", color: vlak.gray },\n  detail: { margin: 0, color: vlak.gray, fontSize: \"0.875rem\", lineHeight: 1.45 },\n});\n\n/** A numeric reading with stable baseline, tabular figures, and an explicit unit. */\nexport const Metric = React.forwardRef<HTMLDivElement, MetricProps>(function Metric({ label, value, unit, description, comparison, trend, locale = \"en\", formatOptions, className, style, ...props }, ref) {\n  const root = rs([\"rs-metric\", className], styles.root);\n  const lab = rs([\"rs-metric-label\"], styles.label);\n  const reading = rs([\"rs-metric-reading\"], styles.reading);\n  const figure = rs([\"rs-metric-value\"], styles.value);\n  const suffix = rs([\"rs-metric-unit\"], styles.unit);\n  const detail = rs([\"rs-metric-detail\"], styles.detail);\n  const formatted = typeof value === \"number\" ? new Intl.NumberFormat(locale, formatOptions).format(value) : value;\n  return <div ref={ref} {...props} className={root.className} style={{ ...root.style, ...style }}>\n    <p {...lab}>{label}</p><div {...reading}><span {...figure}>{formatted}</span>{unit != null && <span {...suffix}>{unit}</span>}</div>\n    {description != null && <p {...detail}>{description}</p>}{comparison != null && <p {...detail}>{comparison}</p>}{trend}\n  </div>;\n});\n",
      "type": "registry:component",
      "target": "components/vlak/metric.tsx"
    },
    {
      "path": "vlak/styles/metric.css",
      "content": "/* ── metric: generated from packages/react/src/components/metric.tsx ── */\n.rs-metric{display:grid;align-content:start;gap:1rem;min-width:0;color:var(--text)}\n.rs-metric-label{color:var(--text-secondary);font-size:0.875rem;line-height:1.45;margin:0}\n.rs-metric-reading{display:flex;align-items:baseline;gap:0.5rem;min-height:4rem;min-width:0;font-variant-numeric:tabular-nums;line-height:1}\n.rs-metric-value{font-size:clamp(2.5rem, 5vw, 4rem);letter-spacing:-0.04em;font-weight:500;overflow-wrap:anywhere}\n.rs-metric-unit{font-size:1.125rem;color:var(--text-secondary)}\n.rs-metric-detail{margin:0;color:var(--text-secondary);font-size:0.875rem;line-height:1.45}\n",
      "type": "registry:file",
      "target": "styles/vlak/metric.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "content",
      "classes": [
        "rs-metric",
        "rs-metric-label",
        "rs-metric-reading",
        "rs-metric-value",
        "rs-metric-unit",
        "rs-metric-detail"
      ],
      "snippet": "<div class=\"rs-metric\"><p class=\"rs-metric-label\">Estimated range</p><div class=\"rs-metric-reading\"><span class=\"rs-metric-value\">386</span><span class=\"rs-metric-unit\">km</span></div></div>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib"
      ],
      "aliases": [
        "Metric"
      ],
      "example": "import { Metric } from \"@noorddev/vlak-react\";\n\n<Metric label=\"Estimated range\" value={386} unit=\"km\" description=\"Ready for your next journey\" comparison=\"18 km more than yesterday\" />",
      "usage": {
        "use": [
          "Dashboard readings, vehicle status, and concise numeric comparisons."
        ],
        "avoid": [
          "Full data series; use Charts."
        ]
      },
      "keyboard": [
        {
          "keys": "None",
          "does": "Static reading; no additional keyboard stop."
        }
      ],
      "a11y": [
        "The label, formatted value, and unit are readable text. Provide a text equivalent for an optional trend graphic."
      ]
    }
  }
}