{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-ring",
  "title": "Progress Ring",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A token-colored circular progress meter with a readable center and accessible value.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/progress-ring.tsx",
      "content": "// Ballmac UI: Progress Ring. https://ui.ballmac.com/components/progress-ring\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype ProgressRingProps = React.ComponentProps<\"div\"> & {\n  /** Current progress value. */ value: number\n  /** Maximum value; defaults to 100. */ max?: number\n  /** Accessible name for the progress meter. */ label: string\n  /** Diameter in pixels. */ size?: number\n  /** Center content, or the formatted percentage by default. */ children?: React.ReactNode\n}\nfunction ProgressRing({\n  className,\n  value,\n  max = 100,\n  label,\n  size = 96,\n  children,\n  ...props\n}: ProgressRingProps) {\n  const safeMax = max > 0 ? max : 100\n  const bounded = Math.min(\n    safeMax,\n    Math.max(0, Number.isFinite(value) ? value : 0),\n  )\n  const percent = Math.round((bounded / safeMax) * 100)\n  const radius = 42\n  const circumference = 2 * Math.PI * radius\n  return (\n    <div\n      data-slot=\"progress-ring\"\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={safeMax}\n      aria-valuenow={bounded}\n      className={cn(\n        \"relative inline-grid shrink-0 place-items-center text-primary\",\n        className,\n      )}\n      style={{ width: size, height: size }}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 100 100\"\n        aria-hidden=\"true\"\n        className=\"absolute inset-0 size-full -rotate-90\"\n      >\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"8\"\n          className=\"text-muted\"\n        />\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"8\"\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={circumference * (1 - percent / 100)}\n          className=\"transition-[stroke-dashoffset] duration-200 motion-reduce:transition-none\"\n        />\n      </svg>\n      <span\n        data-slot=\"progress-ring-value\"\n        aria-hidden=\"true\"\n        className=\"text-foreground relative text-lg font-semibold tabular-nums\"\n      >\n        {children ?? `${percent}%`}\n      </span>\n    </div>\n  )\n}\nexport { ProgressRing, type ProgressRingProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/progress-ring.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "progress",
      "gauge",
      "status"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "A token-colored circular progress meter with a readable center and accessible value.",
      "whenToUse": [
        "Show bounded progress in a small area"
      ],
      "whenNotToUse": [
        "Use Progress for a full-width track"
      ],
      "composesWith": [
        "progress"
      ],
      "a11y": [
        {
          "keys": "None",
          "action": "Progressbar name and current value are announced"
        }
      ],
      "customization": [
        "Content, layout, and token-based className styling"
      ]
    },
    "examples": [
      "progress-ring-demo",
      "progress-ring-states"
    ],
    "url": "https://ui.ballmac.com/components/progress-ring"
  },
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}