{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-ring",
  "title": "Progress ring",
  "description": "A radial completion ring — the round counterpart to a progress bar, for node completion, character level, and compact stat readouts.",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/progress-ring.tsx",
      "content": "import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface ProgressRingProps {\n  value: number;\n  max?: number;\n  /** Diameter in px. */\n  size?: number;\n  /** Ring stroke width in px. */\n  thickness?: number;\n  /** Fill color (any CSS color, e.g. a token var). */\n  color?: string;\n  /** Track (unfilled) color. */\n  trackColor?: string;\n  /** Center content (e.g. a count or completion fraction). */\n  children?: ReactNode;\n  /** Accessible label. */\n  label?: string;\n  className?: string;\n}\n\n/**\n * A radial completion ring — the round counterpart to a progress bar, for node\n * completion, character level, and compact stat readouts. Square-capped to match\n * the Destiny FUI; center slot holds a count/glyph. Presentational.\n */\nexport function ProgressRing({\n  value,\n  max = 100,\n  size = 36,\n  thickness = 4,\n  color = \"var(--engram-accent)\",\n  trackColor = \"var(--engram-raised-2)\",\n  children,\n  label,\n  className,\n}: ProgressRingProps) {\n  const pct = max > 0 ? Math.max(0, Math.min(1, value / max)) : 0;\n  const r = (size - thickness) / 2;\n  const circumference = 2 * Math.PI * r;\n  const offset = circumference * (1 - pct);\n  const center = size / 2;\n  return (\n    <span\n      className={cn(\"relative inline-grid place-items-center\", className)}\n      style={{ width: size, height: size }}\n      role=\"progressbar\"\n      aria-valuenow={value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-label={label}\n    >\n      <svg\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        className=\"-rotate-90 absolute inset-0\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx={center}\n          cy={center}\n          r={r}\n          fill=\"none\"\n          stroke={trackColor}\n          strokeWidth={thickness}\n        />\n        <circle\n          cx={center}\n          cy={center}\n          r={r}\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={thickness}\n          strokeLinecap=\"butt\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n        />\n      </svg>\n      {children != null ? (\n        <span className=\"relative z-10 leading-none\">{children}</span>\n      ) : null}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/progress-ring.tsx"
    }
  ],
  "meta": {
    "level": "atom"
  },
  "docs": "Extend without forking: edit the copied source, use `asChild` (Radix Slot) to change the rendered element, pass the typed `annotations` prop for curated data (verdict/tags/per-plug), or use slot / render-prop props for arbitrary content. Requires the @engram/tokens theme (--engram-* CSS variables).",
  "categories": [
    "primitive"
  ],
  "type": "registry:component"
}