{
  "name": "gauge-variants-demo",
  "type": "registry:example",
  "registryDependencies": [
    "gauge"
  ],
  "files": [
    {
      "path": "examples/gauge-variants-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  Gauge,\n  GaugeIndicator,\n  GaugeLabel,\n  GaugeRange,\n  GaugeTrack,\n  GaugeValueText,\n} from \"@/registry/bases/radix/ui/gauge\";\n\nconst variants = [\n  { startAngle: -90, endAngle: 90, label: \"Semi Circle\" },\n  { startAngle: -135, endAngle: 135, label: \"Three Quarter\" },\n  { startAngle: 0, endAngle: 360, label: \"Full Circle\" },\n];\n\nexport default function GaugeVariantsDemo() {\n  const [value, setValue] = React.useState(0);\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setValue((prev) => {\n        if (prev >= 72) {\n          clearInterval(interval);\n          return 72;\n        }\n        return prev + 1;\n      });\n    }, 30);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-12\">\n      {variants.map((variant) => (\n        <div key={variant.label} className=\"flex flex-col items-center gap-3\">\n          <Gauge\n            value={value}\n            size={140}\n            thickness={10}\n            startAngle={variant.startAngle}\n            endAngle={variant.endAngle}\n          >\n            <GaugeIndicator>\n              <GaugeTrack />\n              <GaugeRange />\n            </GaugeIndicator>\n            <GaugeValueText />\n            <GaugeLabel>{variant.label}</GaugeLabel>\n          </Gauge>\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}