{
  "name": "gauge-colors-demo",
  "type": "registry:example",
  "registryDependencies": [
    "gauge"
  ],
  "files": [
    {
      "path": "examples/gauge-colors-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Gauge,\n  GaugeIndicator,\n  GaugeLabel,\n  GaugeRange,\n  GaugeTrack,\n  GaugeValueText,\n} from \"@/registry/bases/radix/ui/gauge\";\n\nconst themes = [\n  {\n    name: \"CPU\",\n    value: 45,\n    trackClass: \"text-emerald-200 dark:text-emerald-900\",\n    rangeClass: \"text-emerald-500\",\n    textClass: \"text-emerald-700 dark:text-emerald-300\",\n  },\n  {\n    name: \"Memory\",\n    value: 68,\n    trackClass: \"text-amber-200 dark:text-amber-900\",\n    rangeClass: \"text-amber-500\",\n    textClass: \"text-amber-700 dark:text-amber-300\",\n  },\n  {\n    name: \"Disk\",\n    value: 92,\n    trackClass: \"text-red-200 dark:text-red-900\",\n    rangeClass: \"text-red-500\",\n    textClass: \"text-red-700 dark:text-red-300\",\n  },\n  {\n    name: \"Network\",\n    value: 28,\n    trackClass: \"text-sky-200 dark:text-sky-900\",\n    rangeClass: \"text-sky-500\",\n    textClass: \"text-sky-700 dark:text-sky-300\",\n  },\n];\n\nexport default function GaugeColorsDemo() {\n  const [displayValues, setDisplayValues] = React.useState(themes.map(() => 0));\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setDisplayValues((prev) =>\n        prev.map((val, idx) => {\n          const target = themes[idx]?.value ?? 0;\n          if (val >= target) return target;\n          return val + 1;\n        }),\n      );\n    }, 20);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div className=\"grid grid-cols-2 gap-6 sm:grid-cols-4\">\n      {themes.map((theme, index) => (\n        <div key={theme.name} className=\"flex flex-col items-center gap-3\">\n          <Gauge value={displayValues[index]} size={120} thickness={10}>\n            <GaugeIndicator>\n              <GaugeTrack className={theme.trackClass} />\n              <GaugeRange className={theme.rangeClass} />\n            </GaugeIndicator>\n            <GaugeValueText className={cn(\"text-xl\", theme.textClass)} />\n            <GaugeLabel>{theme.name}</GaugeLabel>\n          </Gauge>\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}