{
  "name": "gauge-sizes-demo",
  "type": "registry:example",
  "registryDependencies": [
    "gauge"
  ],
  "files": [
    {
      "path": "examples/gauge-sizes-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { motion, useInView, useMotionValue, useSpring } from \"motion/react\";\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 sizes = [\n  { size: 100, thickness: 6, label: \"Small\", valueTextClassName: \"text-xl\" },\n  { size: 140, thickness: 10, label: \"Medium\", valueTextClassName: \"text-3xl\" },\n  { size: 180, thickness: 12, label: \"Large\", valueTextClassName: \"text-4xl\" },\n] as const;\n\nexport default function GaugeSizesDemo() {\n  return (\n    <div className=\"flex flex-wrap items-end justify-center gap-8\">\n      {sizes.map((config, index) => (\n        <AnimatedGauge key={config.label} config={config} index={index} />\n      ))}\n    </div>\n  );\n}\n\ninterface AnimatedGaugeProps {\n  config: (typeof sizes)[number];\n  index: number;\n}\n\nfunction AnimatedGauge({ config, index }: AnimatedGaugeProps) {\n  const ref = React.useRef(null);\n  const isInView = useInView(ref, { once: true, margin: \"-100px\" });\n\n  const motionValue = useMotionValue(0);\n  const springValue = useSpring(motionValue, {\n    stiffness: 60,\n    damping: 15,\n    mass: 1,\n  });\n\n  const [displayValue, setDisplayValue] = React.useState(0);\n\n  React.useEffect(() => {\n    if (isInView) {\n      const delay = index * 150;\n      const timer = setTimeout(() => {\n        motionValue.set(68);\n      }, delay);\n\n      return () => clearTimeout(timer);\n    }\n  }, [isInView, motionValue, index]);\n\n  React.useEffect(() => {\n    const unsubscribe = springValue.on(\"change\", (latest) => {\n      setDisplayValue(Math.round(latest));\n    });\n\n    return unsubscribe;\n  }, [springValue]);\n\n  return (\n    <motion.div\n      ref={ref}\n      className=\"flex flex-col items-center gap-2\"\n      initial={{ opacity: 0, y: 20 }}\n      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}\n      transition={{\n        duration: 0.6,\n        delay: index * 0.1,\n        ease: [0.21, 1.11, 0.81, 0.99],\n      }}\n    >\n      <Gauge\n        value={displayValue}\n        size={config.size}\n        thickness={config.thickness}\n      >\n        <GaugeIndicator>\n          <GaugeTrack />\n          <GaugeRange />\n        </GaugeIndicator>\n        <GaugeValueText className={config.valueTextClassName} />\n        <GaugeLabel className=\"sr-only\">{config.label}</GaugeLabel>\n      </Gauge>\n      <p className=\"text-sm text-muted-foreground\">{config.label}</p>\n    </motion.div>\n  );\n}\n",
      "target": ""
    }
  ]
}