{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "circular-gauge-speedometer",
  "type": "registry:ui",
  "title": "Precision Speedometer Radial Gauge",
  "description": "Semicircular radial telemetry gauge with angular needle deflection, threshold gradient arc, and real-time numeric indicator.",
  "category": "data",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/data/circular-gauge-speedometer/circular-gauge-speedometer.tsx",
      "type": "registry:ui",
      "target": "components/ui/circular-gauge-speedometer.tsx",
      "content": "import React, { useState } from 'react';\nimport { Gauge } from '@phosphor-icons/react';\n\nexport const CircularGaugeSpeedometer: React.FC = () => {\n  const [val, setVal] = useState(78);\n\n  // Map 0-100 to -90 to +90 degrees\n  const angle = (val / 100) * 180 - 90;\n\n  return (\n    <div className=\"w-full max-w-xs mx-auto p-5 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white/90 dark:bg-zinc-950/80 shadow-lg backdrop-blur-md flex flex-col items-center font-mono\">\n      <div className=\"relative w-40 h-24 overflow-hidden flex items-end justify-center\">\n        {/* Arc Background */}\n        <div className=\"w-36 h-36 rounded-full border-[10px] border-zinc-200 dark:border-white/10 border-b-transparent border-l-transparent -rotate-45\" />\n\n        {/* Active Needle */}\n        <div\n          style={{ transform: `rotate(${angle}deg)` }}\n          className=\"absolute bottom-0 w-1.5 h-18 bg-indigo-500 rounded-full origin-bottom transition-transform duration-500 ease-out shadow-[0_0_8px_rgba(99,102,241,0.8)]\"\n        />\n\n        {/* Center Pivot */}\n        <div className=\"absolute bottom-0 w-4 h-4 rounded-full bg-white dark:bg-zinc-200 shadow\" />\n      </div>\n\n      <div className=\"mt-3 text-center\">\n        <span className=\"text-2xl font-bold text-zinc-900 dark:text-white\">{val}%</span>\n        <div className=\"text-[10px] text-zinc-500 uppercase tracking-widest mt-0.5\">Cluster Throughput</div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}