{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "progress-ring-chart",
  "title": "Progress Ring Chart",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/progress-ring-chart/ProgressRingChart.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface ProgressRing {\n    /** 0..100. */\n    value: number\n    /** Defaults to chart-1..N tokens. */\n    color?: string\n    label?: string\n  }\n\n  export interface ProgressRingChartProps extends HTMLAttributes<HTMLDivElement> {\n    rings: ProgressRing[]\n    height?: number | string\n    /** Ring thickness in SVG units. Default 14. */\n    stroke?: number\n    /** Show the centre label (first ring value or custom). Default true. */\n    showLabel?: boolean\n    /** Centre label override. */\n    centerLabel?: string\n    colors?: string[]\n    /** Accessible name announced for the chart image. Defaults to \"Chart\". */\n    ariaLabel?: string\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let {\n    class: className,\n    rings,\n    height = 220,\n    stroke = 14,\n    showLabel = true,\n    centerLabel,\n    colors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'],\n    ariaLabel,\n    ref = $bindable(null),\n    ...restProps\n  }: ProgressRingChartProps = $props()\n\n  const heightStyle = $derived(/^\\d+$/.test(String(height)) ? `${height}px` : String(height))\n  const C = 2 * Math.PI * 80\n  const arcs = $derived(\n    rings.map((r, i) => {\n      const pct = Math.max(0, Math.min(100, r.value)) / 100\n      return {\n        dash: `${(pct * C).toFixed(1)} ${C.toFixed(1)}`,\n        color: r.color ?? colors[i % colors.length],\n        r: 80 - i * (stroke + 6),\n        label: r.label,\n        value: r.value,\n      }\n    }),\n  )\n  const view = $derived(200 + (rings.length - 1) * (stroke + 6) * 2)\n  const center = $derived(view / 2)\n  const summary = $derived(\n    centerLabel ?? (rings.length === 1 ? `${Math.round(rings[0]?.value ?? 0)}%` : `${rings.length} rings`),\n  )\n  const label = $derived(\n    ariaLabel || `Progress ring chart: ${rings.map((r) => `${r.label ?? 'value'} ${Math.round(r.value)}%`).join(', ')}`,\n  )\n</script>\n\n<!-- svelte-ignore a11y_no_noninteractive_tabindex: chart is deliberately focusable so keyboard users reach the labelled image -->\n<div\n  {...restProps}\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"progress-ring-chart\"\n  role=\"img\"\n  tabindex=\"0\"\n  aria-label={label}\n  style:height={heightStyle}\n  class={cn(\n    'focus-visible:ring-ring flex w-full items-center justify-center focus-visible:ring-2 focus-visible:outline-none',\n    className,\n  )}\n>\n  <svg viewBox={`0 0 ${view} ${view}`} class=\"aspect-square h-full max-h-full\" role=\"presentation\">\n    <g transform={`rotate(-90 ${center} ${center})`}>\n      {#each arcs as a, i (`t${i}`)}\n        <circle cx={center} cy={center} r={a.r} fill=\"none\" stroke=\"currentColor\" stroke-width={stroke} class=\"text-border\" opacity=\"0.35\" />\n      {/each}\n      {#each arcs as a, i (`v${i}`)}\n        <circle\n          cx={center}\n          cy={center}\n          r={a.r}\n          fill=\"none\"\n          stroke={a.color}\n          stroke-width={stroke}\n          stroke-linecap=\"round\"\n          stroke-dasharray={a.dash}\n        />\n      {/each}\n    </g>\n    {#if showLabel}\n      <text\n        x={center}\n        y={center}\n        text-anchor=\"middle\"\n        dominant-baseline=\"middle\"\n        class=\"fill-foreground\"\n        font-size=\"26\"\n        font-weight=\"700\"\n      >\n        {summary}\n      </text>\n    {/if}\n  </svg>\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/progress-ring-chart/ProgressRingChart.svelte"
    },
    {
      "path": "packages/registry-svelte/components/progress-ring-chart/index.ts",
      "content": "export { default as ProgressRingChart, type ProgressRingChartProps, type ProgressRing } from './ProgressRingChart.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/progress-ring-chart/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Progress ring gauge as dependency-free SVG. Single or concentric rings with a centre summary. Picks up chart tokens via CSS variables.",
  "categories": [
    "chart"
  ]
}