{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "circular-progress",
  "type": "registry:ui",
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/default/ui/circular-progress.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\ntype Props = {\r\n  percentageComplete: number;\r\n  taskType: string;\r\n  ringColor?: string;\r\n};\r\n\r\nfunction CircularProgress({\r\n  percentageComplete,\r\n  taskType,\r\n  ringColor = \"stroke-blue-600\",\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & Props) {\r\n  const radius = 16;\r\n  const circumference = 2 * Math.PI * radius;\r\n\r\n  // Start animation from 0\r\n  const [offset, setOffset] = React.useState(circumference);\r\n\r\n  React.useEffect(() => {\r\n    const finalOffset =\r\n      circumference - (percentageComplete / 100) * circumference;\r\n\r\n    // small delay so the transition triggers\r\n    requestAnimationFrame(() => setOffset(finalOffset));\r\n  }, [percentageComplete]);\r\n\r\n  return (\r\n    <div className=\"flex size-full flex-col items-center justify-center gap-1\">\r\n      <div className=\"relative\">\r\n        <svg className=\"size-full scale-y-[-1] -rotate-90\" viewBox=\"0 0 36 36\">\r\n          {/* Background */}\r\n          <circle\r\n            cx=\"18\"\r\n            cy=\"18\"\r\n            r={radius}\r\n            fill=\"none\"\r\n            strokeWidth=\"2\"\r\n            className=\"stroke-secondary\"\r\n          />\r\n\r\n          {/* Animated Progress */}\r\n          <circle\r\n            cx=\"18\"\r\n            cy=\"18\"\r\n            r={radius}\r\n            fill=\"none\"\r\n            strokeWidth=\"2\"\r\n            strokeDasharray={circumference}\r\n            strokeDashoffset={offset}\r\n            strokeLinecap=\"round\"\r\n            className={`${ringColor} transition-[stroke-dashoffset] duration-700 ease-out`}\r\n          />\r\n        </svg>\r\n\r\n        {/* Center Text */}\r\n        <div className=\"absolute inset-0 flex flex-col items-center justify-center text-center\">\r\n          <p className=\"text-sm font-semibold\">{percentageComplete}%</p>\r\n        </div>\r\n      </div>\r\n      <p className=\"text-xs\">{taskType}</p>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { CircularProgress };\r\n",
      "type": "registry:ui"
    }
  ]
}