{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "progress-ring-chart",
  "title": "Progress Ring Chart",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/charts/progress-ring-chart/ProgressRingChart.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nexport interface ProgressRing {\n  /** 0..100. */\n  value: number\n  /** Defaults to chart-1..N tokens. */\n  color?: string\n  label?: string\n}\n\ninterface Props {\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  class?: HTMLAttributes['class']\n  /** Accessible name announced for the chart image. Defaults to \"Chart\". */\n  ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  height: 220,\n  stroke: 14,\n  showLabel: true,\n  colors: () => ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'],\n})\n\nconst heightStyle = computed(() => (/^\\d+$/.test(String(props.height)) ? `${props.height}px` : String(props.height)))\nconst C = 2 * Math.PI * 80\nconst arcs = computed(() =>\n  props.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 ?? props.colors[i % props.colors.length],\n      r: 80 - i * (props.stroke + 6),\n      label: r.label,\n      value: r.value,\n    }\n  }),\n)\nconst view = computed(() => 200 + (props.rings.length - 1) * (props.stroke + 6) * 2)\nconst center = computed(() => view.value / 2)\nconst summary = computed(\n  () =>\n    props.centerLabel ??\n    (props.rings.length === 1 ? `${Math.round(props.rings[0]?.value ?? 0)}%` : `${props.rings.length} rings`),\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"progress-ring-chart\"\n    role=\"img\"\n    tabindex=\"0\"\n    :aria-label=\"\n      ariaLabel ||\n      `Progress ring chart: ${rings.map((r) => `${r.label ?? 'value'} ${Math.round(r.value)}%`).join(', ')}`\n    \"\n    :style=\"{ height: heightStyle }\"\n    :class=\"\n      cn(\n        'focus-visible:ring-ring flex w-full items-center justify-center focus-visible:ring-2 focus-visible:outline-none',\n        props.class,\n      )\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        <circle\n          v-for=\"(a, i) in arcs\"\n          :key=\"`t${i}`\"\n          :cx=\"center\"\n          :cy=\"center\"\n          :r=\"a.r\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          :stroke-width=\"stroke\"\n          class=\"text-border\"\n          opacity=\"0.35\"\n        />\n        <circle\n          v-for=\"(a, i) in arcs\"\n          :key=\"`v${i}`\"\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      </g>\n      <text\n        v-if=\"showLabel\"\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    </svg>\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/charts/progress-ring-chart/ProgressRingChart.vue"
    },
    {
      "path": "packages/registry-vue/components/charts/progress-ring-chart/index.ts",
      "content": "export { default as ProgressRingChart } from './ProgressRingChart.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/charts/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"
  ]
}