{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "circular-progress",
  "title": "Circular Progress",
  "author": "Matthew Blode",
  "description": "A circular indicator that shows the progress of a task.",
  "files": [
    {
      "path": "ui/circular-progress.tsx",
      "content": "\"use client\";\n\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface CircularProgressProps extends React.ComponentProps<\"div\"> {\n  hideText?: boolean;\n  strokeWidth?: number;\n  value: number;\n}\n\nconst CircularProgress = ({\n  value,\n  strokeWidth = 4,\n  className,\n  hideText,\n  ...props\n}: CircularProgressProps) => {\n  const percentage = Math.min(Math.max(value, 0), 100);\n  const radius = 16;\n  const circumference = 2 * Math.PI * radius;\n  const strokeDashoffset = circumference - (percentage / 100) * circumference;\n\n  return (\n    <div className={cn(\"relative\", className)} {...props}>\n      <progress aria-label=\"Circular progress\" className=\"sr-only\" max={100} value={percentage} />\n      <svg className=\"size-full -rotate-90\" viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\">\n        <title>Circular progress</title>\n        <circle\n          className=\"stroke-current text-primary/30\"\n          cx=\"18\"\n          cy=\"18\"\n          fill=\"none\"\n          r={radius}\n          strokeWidth={strokeWidth}\n        />\n        <circle\n          className=\"stroke-current text-primary\"\n          cx=\"18\"\n          cy=\"18\"\n          fill=\"none\"\n          r={radius}\n          strokeDasharray={circumference}\n          strokeDashoffset={strokeDashoffset}\n          strokeLinecap=\"round\"\n          strokeWidth={strokeWidth}\n          style={{\n            transition: \"stroke-dashoffset 300ms ease-in-out\",\n          }}\n        />\n      </svg>\n\n      {!hideText && (\n        <div className=\"absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-none\">\n          <span className=\"text-center font-bold text-primary leading-none dark:text-foreground\">\n            {percentage}%\n          </span>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { CircularProgress };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}