{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metric",
  "title": "Metric",
  "description": "Single-datapoint metric tile — label, big tabular value, optional unit — fully generic and props-driven, chart-free by design.",
  "files": [
    {
      "path": "src/components/metric.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface MetricProps {\n  /** Tile label, e.g. \"TTFB · tts\". */\n  label: React.ReactNode;\n  /** Datapoint to display; null/undefined renders `empty` instead. */\n  value?: number | null;\n  /** Unit suffix rendered after the value, e.g. \"ms\". */\n  unit?: string;\n  /** Formats the numeric value (default: locale string, at most 1 decimal). */\n  format?: (value: number) => string;\n  /** Rendered in place of the value when there is none (default \"–\"). */\n  empty?: React.ReactNode;\n  className?: string;\n}\n\n/** Default number formatting: locale-aware, at most one decimal place. */\nfunction formatMetricValue(value: number): string {\n  return value.toLocaleString(undefined, { maximumFractionDigits: 1 });\n}\n\n/** Props-driven metric tile; no client or chart dependency. */\nexport function Metric({\n  label,\n  value,\n  unit,\n  format = formatMetricValue,\n  empty = \"–\",\n  className,\n}: MetricProps) {\n  const hasValue = typeof value === \"number\" && Number.isFinite(value);\n  const formatted = React.useMemo(\n    () => (hasValue ? format(value) : null),\n    [hasValue, format, value],\n  );\n  return (\n    <div\n      data-slot=\"metric\"\n      data-state={hasValue ? \"live\" : \"empty\"}\n      className={cn(\"flex min-w-0 flex-col gap-1\", className)}\n    >\n      <span\n        data-slot=\"metric-label\"\n        className=\"text-muted-foreground truncate text-xs\"\n      >\n        {label}\n      </span>\n      <span\n        data-slot=\"metric-value\"\n        className=\"text-2xl leading-none font-semibold tabular-nums\"\n      >\n        {formatted !== null ? (\n          <>\n            {formatted}\n            {unit ? (\n              <span className=\"text-muted-foreground ml-1 text-sm font-normal\">\n                {unit}\n              </span>\n            ) : null}\n          </>\n        ) : (\n          empty\n        )}\n      </span>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pipecat/metric.tsx"
    }
  ],
  "docs": "Metric is presentational: hand it any number via props. Pair with @pipecat/use-pipecat-metrics (usePipecatMetricValue) for live Pipecat values, or use the metrics block for the wired dashboard.",
  "categories": [
    "voice"
  ],
  "type": "registry:component"
}