{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-ring",
  "title": "Progress ring",
  "description": "circular determinate progress",
  "dependencies": [
    "cn@^0.4.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/progress-ring.tsx",
      "content": "import { cn } from 'cn';\nimport type * as React from 'react';\n\ntype Props = {\n  /** 0–100 */\n  value: number;\n  size?: number;\n  strokeWidth?: number;\n  tone?: 'primary' | 'success' | 'warning' | 'destructive' | 'info';\n  /** Centre content, e.g. the percentage. */\n  children?: React.ReactNode;\n  /** What the ring measures (\"Today's habits\"). Read with the percentage. */\n  'aria-label'?: string;\n  className?: string;\n};\n\nconst STROKE = { primary: 'stroke-primary', success: 'stroke-success', warning: 'stroke-warning', destructive: 'stroke-destructive', info: 'stroke-info' } as const;\n\n/** Circular determinate progress: goals, storage, step completion. */\nexport function ProgressRing({ value, size = 64, strokeWidth = 6, tone = 'primary', children, className, ...props }: Props) {\n  const r = (size - strokeWidth) / 2;\n  const c = 2 * Math.PI * r;\n  const pct = Math.max(0, Math.min(100, value));\n  return (\n    <div\n      role=\"progressbar\"\n      aria-label={props['aria-label'] ?? 'Progress'}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={Math.round(pct)}\n      className={cn('relative flex items-center justify-center', className)}\n      style={{ width: size, height: size }}>\n      <svg width={size} height={size} className=\"absolute inset-0 -rotate-90\" aria-hidden>\n        <circle cx={size / 2} cy={size / 2} r={r} className=\"stroke-muted\" strokeWidth={strokeWidth} fill=\"none\" />\n        <circle cx={size / 2} cy={size / 2} r={r} className={STROKE[tone]} strokeWidth={strokeWidth} strokeLinecap=\"round\" fill=\"none\" strokeDasharray={`${(pct / 100) * c} ${c}`} />\n      </svg>\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/progress-ring.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ProgressRing"
    ],
    "api": "<ProgressRing value size? tone? aria-label>{centre}</ProgressRing>"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "data"
  ],
  "type": "registry:component"
}