{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "activity-rings-card",
  "title": "Activity Rings",
  "description": "Three concentric goal rings. Hover or focus a ring or tile to isolate it.",
  "registryDependencies": [
    "https://components.exe.xyz/r/chart-card.json"
  ],
  "files": [
    {
      "path": "src/components/charts/activity-rings-card.tsx",
      "content": "import { useState } from \"react\"\n\nimport {\n  ChartCard,\n  ChartTiles,\n  chartColor,\n} from \"@/components/charts/chart-card\"\n\nexport type ActivityRing = {\n  id: string\n  label: string\n  valueLabel: string\n  progress: number\n  color?: string\n}\n\nconst DEFAULT_RINGS: ActivityRing[] = [\n  {\n    id: \"move\",\n    label: \"Move\",\n    valueLabel: \"1,592 kcal\",\n    progress: 0.8,\n  },\n  {\n    id: \"exercise\",\n    label: \"Exercise\",\n    valueLabel: \"1h 45m\",\n    progress: 0.92,\n  },\n  {\n    id: \"running\",\n    label: \"Running\",\n    valueLabel: \"5.2 km\",\n    progress: 0.65,\n  },\n]\n\nexport function ActivityRingsCard({\n  title = \"Activity\",\n  rings = DEFAULT_RINGS,\n  className,\n}: {\n  title?: string\n  rings?: ActivityRing[]\n  className?: string\n}) {\n  const [activeId, setActiveId] = useState<string | null>(null)\n  const series = rings.slice(0, 3)\n  const cx = 120\n  const cy = 120\n  const radii = [84, 66, 48]\n  const summary = series\n    .map(\n      (ring) =>\n        `${ring.label} ${ring.valueLabel}, ${Math.round(Math.min(ring.progress, 1) * 100)} percent of goal`\n    )\n    .join(\". \")\n\n  return (\n    <ChartCard\n      title={title}\n      summary={summary}\n      className={className}\n      tiles={\n        <ChartTiles\n          activeId={activeId}\n          onActiveChange={setActiveId}\n          items={series.map((ring, index) => ({\n            id: ring.id,\n            label: ring.label,\n            value: ring.valueLabel,\n            color: chartColor(index, ring.color),\n          }))}\n        />\n      }\n    >\n      <svg\n        role=\"img\"\n        aria-label={summary}\n        viewBox=\"0 0 240 240\"\n        className=\"mx-auto h-56 w-56\"\n      >\n        {series.map((ring, index) => {\n          const r = radii[index] ?? 40\n          const circ = 2 * Math.PI * r\n          const progress = Math.min(Math.max(ring.progress, 0), 1)\n          const color = chartColor(index, ring.color)\n          const active = activeId === ring.id\n          const dimmed = activeId != null && !active\n          const width = active ? 16 : 12\n          return (\n            <g\n              key={ring.id}\n              transform={`rotate(-90 ${cx} ${cy})`}\n              opacity={dimmed ? 0.28 : 1}\n            >\n              <circle\n                cx={cx}\n                cy={cy}\n                r={r}\n                fill=\"none\"\n                stroke=\"var(--muted)\"\n                strokeWidth={width}\n              />\n              <circle\n                cx={cx}\n                cy={cy}\n                r={r}\n                fill=\"none\"\n                stroke={color}\n                strokeWidth={width}\n                strokeDasharray={circ}\n                strokeDashoffset={circ * (1 - progress)}\n                strokeLinecap=\"butt\"\n              />\n              <circle\n                cx={cx}\n                cy={cy}\n                r={r}\n                fill=\"none\"\n                stroke=\"transparent\"\n                strokeWidth={width + 8}\n                role=\"button\"\n                tabIndex={0}\n                aria-label={`${ring.label}, ${ring.valueLabel}, ${Math.round(progress * 100)} percent of goal`}\n                className=\"outline-none\"\n                onFocus={() => setActiveId(ring.id)}\n                onBlur={() => setActiveId(null)}\n                onMouseEnter={() => setActiveId(ring.id)}\n                onMouseLeave={() => setActiveId(null)}\n              />\n            </g>\n          )\n        })}\n      </svg>\n    </ChartCard>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}