{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "radial-progress-gauge",
  "type": "registry:ui",
  "title": "Radial Progress Gauge",
  "description": "Precision industrial speedometer dial with curved SVG gradients, animated needle, and real-time RPM/percentage readout.",
  "category": "data",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/data/radial-progress-gauge/radial-progress-gauge.tsx",
      "type": "registry:ui",
      "target": "components/ui/radial-progress-gauge.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\nexport interface RadialProgressGaugeProps {\n  value?: number;\n  min?: number;\n  max?: number;\n  label?: string;\n  unit?: string;\n  className?: string;\n}\n\nexport const RadialProgressGauge: React.FC<RadialProgressGaugeProps> = ({\n  value = 76,\n  min = 0,\n  max = 100,\n  label = 'SYSTEM LOAD',\n  unit = '%',\n  className = '',\n}) => {\n  const [val, setVal] = useState(value);\n\n  const radius = 70;\n  const strokeWidth = 10;\n  const circumference = 2 * Math.PI * radius;\n  // Arc covering 240 degrees\n  const arcLength = (240 / 360) * circumference;\n  const progressPct = Math.min(1, Math.max(0, (val - min) / (max - min)));\n  const strokeDashoffset = arcLength - progressPct * arcLength;\n\n  return (\n    <div className={`flex flex-col items-center justify-center p-6 rounded-3xl border border-zinc-200 dark:border-white/10 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl shadow-lg ${className}`}>\n      <div className=\"relative flex items-center justify-center w-48 h-40\">\n        <svg className=\"w-48 h-48 -rotate-[210deg]\" viewBox=\"0 0 180 180\">\n          <defs>\n            <linearGradient id=\"gauge-grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n              <stop offset=\"0%\" stopColor=\"#38bdf8\" />\n              <stop offset=\"50%\" stopColor=\"#818cf8\" />\n              <stop offset=\"100%\" stopColor=\"#ec4899\" />\n            </linearGradient>\n          </defs>\n\n          {/* Background Arc */}\n          <circle\n            cx=\"90\"\n            cy=\"90\"\n            r={radius}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            className=\"text-zinc-200 dark:text-zinc-800\"\n            strokeWidth={strokeWidth}\n            strokeDasharray={`${arcLength} ${circumference}`}\n            strokeLinecap=\"round\"\n          />\n\n          {/* Animated Value Arc */}\n          <motion.circle\n            cx=\"90\"\n            cy=\"90\"\n            r={radius}\n            fill=\"none\"\n            stroke=\"url(#gauge-grad)\"\n            strokeWidth={strokeWidth}\n            strokeDasharray={`${arcLength} ${circumference}`}\n            strokeLinecap=\"round\"\n            initial={{ strokeDashoffset: arcLength }}\n            animate={{ strokeDashoffset }}\n            transition={{ duration: 1, ease: 'easeOut' }}\n          />\n        </svg>\n\n        {/* Center Readout */}\n        <div className=\"absolute inset-0 flex flex-col items-center justify-center pt-4\">\n          <span className=\"font-mono text-3xl font-black tracking-tight text-zinc-900 dark:text-white\">\n            {Math.round(val)}\n            <span className=\"text-sm font-normal text-zinc-400 ml-0.5\">{unit}</span>\n          </span>\n          <span className=\"font-mono text-[10px] uppercase tracking-wider text-zinc-500 font-semibold mt-0.5\">\n            {label}\n          </span>\n        </div>\n      </div>\n\n      {/* Interactive slider control */}\n      <div className=\"w-full max-w-[180px] mt-2\">\n        <input\n          type=\"range\"\n          min={min}\n          max={max}\n          value={val}\n          onChange={(e) => setVal(Number(e.target.value))}\n          className=\"w-full h-1 bg-zinc-200 dark:bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-indigo-500\"\n        />\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}