{
  "name": "circular-progress-colors-demo",
  "type": "registry:example",
  "dependencies": [
    "cn",
    "motion"
  ],
  "registryDependencies": [
    "circular-progress"
  ],
  "files": [
    {
      "path": "examples/circular-progress-colors-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { cn } from \"cn\";\nimport { motion, useInView, useMotionValue, useSpring } from \"motion/react\";\nimport * as React from \"react\";\n\nimport {\n  CircularProgress,\n  CircularProgressIndicator,\n  CircularProgressRange,\n  CircularProgressTrack,\n  CircularProgressValueText,\n} from \"@/registry/bases/radix/ui/circular-progress\";\n\nconst themes = [\n  {\n    name: \"Default\",\n    trackClass: \"text-muted-foreground/20\",\n    rangeClass: \"text-primary\",\n    textClass: \"text-foreground\",\n  },\n  {\n    name: \"Success\",\n    trackClass: \"text-green-200 dark:text-green-900\",\n    rangeClass: \"text-green-500\",\n    textClass: \"text-green-700 dark:text-green-300\",\n  },\n  {\n    name: \"Warning\",\n    trackClass: \"text-yellow-200 dark:text-yellow-900\",\n    rangeClass: \"text-yellow-500\",\n    textClass: \"text-yellow-700 dark:text-yellow-300\",\n  },\n  {\n    name: \"Destructive\",\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: \"Purple\",\n    trackClass: \"text-purple-200 dark:text-purple-900\",\n    rangeClass: \"text-purple-500\",\n    textClass: \"text-purple-700 dark:text-purple-300\",\n  },\n  {\n    name: \"Orange\",\n    trackClass: \"text-orange-200 dark:text-orange-900\",\n    rangeClass: \"text-orange-500\",\n    textClass: \"text-orange-700 dark:text-orange-300\",\n  },\n  {\n    name: \"Blue\",\n    trackClass: \"text-blue-200 dark:text-blue-900\",\n    rangeClass: \"text-blue-500\",\n    textClass: \"text-blue-700 dark:text-blue-300\",\n  },\n  {\n    name: \"Pink\",\n    trackClass: \"text-pink-200 dark:text-pink-900\",\n    rangeClass: \"text-pink-500\",\n    textClass: \"text-pink-700 dark:text-pink-300\",\n  },\n];\n\nexport default function CircularProgressColorsDemo() {\n  return (\n    <>\n      <div className=\"hidden grid-cols-4 gap-4 sm:grid\">\n        {themes.map((theme, index) => (\n          <AnimatedCircularProgress\n            key={theme.name}\n            theme={theme}\n            index={index}\n          />\n        ))}\n      </div>\n      <div className=\"grid grid-cols-2 gap-4 sm:hidden\">\n        {themes.slice(0, 4).map((theme, index) => (\n          <AnimatedCircularProgress\n            key={theme.name}\n            theme={theme}\n            index={index}\n          />\n        ))}\n      </div>\n    </>\n  );\n}\n\ninterface AnimatedCircularProgressProps {\n  theme: (typeof themes)[0];\n  index: number;\n}\n\nfunction AnimatedCircularProgress({\n  theme,\n  index,\n}: AnimatedCircularProgressProps) {\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(75);\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-3\"\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      <CircularProgress value={displayValue} size={80} thickness={6}>\n        <CircularProgressIndicator>\n          <CircularProgressTrack className={theme.trackClass} />\n          <CircularProgressRange className={theme.rangeClass} />\n        </CircularProgressIndicator>\n        <CircularProgressValueText\n          className={cn(\"text-sm font-semibold\", theme.textClass)}\n        />\n      </CircularProgress>\n      <div className=\"flex flex-col items-center gap-1 text-center\">\n        <h4 className=\"text-sm font-medium\">{theme.name}</h4>\n        <p className=\"text-xs text-muted-foreground\">\n          {displayValue}% complete\n        </p>\n      </div>\n    </motion.div>\n  );\n}\n",
      "target": ""
    }
  ]
}