{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "goal-ring",
  "type": "registry:ui",
  "title": "Goal ring",
  "description": "A circular progress ring that shows how far along a goal is, with the percentage in the middle and a caption below. Handy for fitness, sales or weekly targets.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/goal-ring.tsx",
      "type": "registry:ui",
      "target": "components/ui/goal-ring.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction GoalRing({\n  value = 72,\n  label = \"Weekly goal\",\n  className,\n}: {\n  value?: number\n  label?: string\n  className?: string\n}) {\n  const r = 36\n  const c = 2 * Math.PI * r\n  const offset = c - (Math.min(100, Math.max(0, value)) / 100) * c\n  return (\n    <div data-slot=\"goal-ring\" className={cn(\"inline-flex flex-col items-center gap-2\", className)}>\n      <svg width=\"96\" height=\"96\" viewBox=\"0 0 96 96\" aria-label={`${label}: ${value}%`}>\n        <circle cx=\"48\" cy=\"48\" r={r} fill=\"none\" className=\"stroke-sunken\" strokeWidth=\"8\" />\n        <circle\n          cx=\"48\"\n          cy=\"48\"\n          r={r}\n          fill=\"none\"\n          className=\"stroke-accent\"\n          strokeWidth=\"8\"\n          strokeLinecap=\"round\"\n          strokeDasharray={c}\n          strokeDashoffset={offset}\n          transform=\"rotate(-90 48 48)\"\n        />\n        <text x=\"48\" y=\"52\" textAnchor=\"middle\" className=\"fill-fg text-sm font-medium\" style={{ fontSize: 16 }}>{value}%</text>\n      </svg>\n      <p className=\"text-xs text-fg-muted\">{label}</p>\n    </div>\n  )\n}\nexport { GoalRing }\n"
    }
  ]
}