{
  "name": "circular-progress-demo",
  "type": "registry:example",
  "registryDependencies": [
    "circular-progress"
  ],
  "files": [
    {
      "path": "examples/circular-progress-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CircularProgress,\n  CircularProgressIndicator,\n  CircularProgressRange,\n  CircularProgressTrack,\n  CircularProgressValueText,\n} from \"@/registry/bases/base/ui/circular-progress\";\n\nexport default function CircularProgressDemo() {\n  const [value, setValue] = React.useState(0);\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setValue((prev) => {\n        if (prev >= 100) {\n          clearInterval(interval);\n          return 100;\n        }\n        return prev + 2;\n      });\n    }, 150);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <CircularProgress value={value} size={60}>\n      <CircularProgressIndicator>\n        <CircularProgressTrack />\n        <CircularProgressRange />\n      </CircularProgressIndicator>\n      <CircularProgressValueText />\n    </CircularProgress>\n  );\n}\n",
      "target": ""
    }
  ]
}