{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "telemetry-metric-card",
  "type": "registry:ui",
  "title": "Telemetry Metric Card",
  "description": "Financial & system performance telemetry card with SVG sparkline trend curve and live delta badge.",
  "category": "data",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/data/telemetry-metric-card/telemetry-metric-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/telemetry-metric-card.tsx",
      "content": "import React, { useState } from 'react';\nimport { TrendUp, Cpu } from '@phosphor-icons/react';\n\nexport const TelemetryMetricCard: React.FC = () => {\n  const [timeframe, setTimeframe] = useState<'1H' | '24H' | '7D'>('24H');\n\n  return (\n    <div className=\"w-full max-w-sm mx-auto p-5 rounded-3xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900/70 shadow-lg font-mono\">\n      <div className=\"flex items-center justify-between text-xs text-zinc-500 pb-3 border-b border-zinc-200/60 dark:border-white/5\">\n        <div className=\"flex items-center gap-2\">\n          <Cpu size={16} className=\"text-indigo-500\" />\n          <span className=\"font-semibold text-zinc-800 dark:text-zinc-300\">THROUGHPUT RPS</span>\n        </div>\n        <div className=\"flex gap-1 text-[10px]\">\n          {(['1H', '24H', '7D'] as const).map((t) => (\n            <button\n              key={t}\n              onClick={() => setTimeframe(t)}\n              className={`px-2 py-0.5 rounded-md cursor-pointer ${\n                timeframe === t ? 'bg-indigo-600 text-white font-bold' : 'text-zinc-400 hover:text-zinc-600 dark:hover:text-white'\n              }`}\n            >\n              {t}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"mt-4 flex items-baseline justify-between\">\n        <div>\n          <span className=\"text-3xl font-extrabold text-zinc-900 dark:text-white\">142,890</span>\n          <span className=\"text-xs text-zinc-400 ml-1\">req/s</span>\n        </div>\n        <span className=\"inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[11px] font-bold text-emerald-500 border border-emerald-500/20\">\n          <TrendUp size={12} weight=\"bold\" /> +18.4%\n        </span>\n      </div>\n\n      <div className=\"mt-4 h-16 w-full\">\n        <svg viewBox=\"0 0 100 30\" className=\"w-full h-full overflow-visible\">\n          <defs>\n            <linearGradient id=\"grad-telemetry\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor=\"#6366f1\" stopOpacity=\"0.3\" />\n              <stop offset=\"100%\" stopColor=\"#6366f1\" stopOpacity=\"0\" />\n            </linearGradient>\n          </defs>\n          <path\n            d=\"M0,25 Q15,10 30,18 T60,8 T80,14 T100,2\"\n            fill=\"none\"\n            stroke=\"#6366f1\"\n            strokeWidth=\"2.5\"\n            strokeLinecap=\"round\"\n          />\n          <path\n            d=\"M0,25 Q15,10 30,18 T60,8 T80,14 T100,2 L100,30 L0,30 Z\"\n            fill=\"url(#grad-telemetry)\"\n          />\n        </svg>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}