{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-circle",
  "type": "registry:ui",
  "title": "Progress circle",
  "description": "A compact circular progress indicator drawn in SVG with a configurable size, an accent arc, an accessible label and the percentage in monospace below it.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/progress-circle.tsx",
      "type": "registry:ui",
      "target": "components/ui/progress-circle.tsx",
      "content": "\"use client\"\nimport { cn } from \"@/lib/utils\"\n\nfunction ProgressCircle({\n  value = 72,\n  size = 40,\n  className,\n  label,\n}: {\n  value?: number\n  size?: number\n  className?: string\n  label?: string\n}) {\n  const r = (size - 4) / 2\n  const c = 2 * Math.PI * r\n  const pct = Math.min(100, Math.max(0, value))\n  const offset = c - (pct / 100) * c\n  return (\n    <div data-slot=\"progress-circle\" className={cn(\"inline-flex flex-col items-center gap-1\", className)}>\n      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-label={label ?? `Progress ${pct}%`} role=\"img\">\n        <circle cx={size / 2} cy={size / 2} r={r} className=\"stroke-border\" strokeWidth=\"3\" fill=\"none\" />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={r}\n          className=\"stroke-accent\"\n          strokeWidth=\"3\"\n          fill=\"none\"\n          strokeLinecap=\"round\"\n          strokeDasharray={c}\n          strokeDashoffset={offset}\n          transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        />\n      </svg>\n      <span className=\"font-mono text-[10px] tabular-nums text-fg-muted\">{pct}%</span>\n    </div>\n  )\n}\nexport { ProgressCircle }\n"
    }
  ]
}