{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metric-donut-card",
  "title": "Metric Donut Card",
  "description": "Circular metric card for compact progress and threshold summaries.",
  "registryDependencies": [
    "@blocks/reporting-types",
    "@circle-ui/card",
    "@circle-ui/utils"
  ],
  "files": [
    {
      "path": "registry/berlin/blocks/reporting/metric-donut-card.tsx",
      "content": "// Generated from packages/ui/src/components/reporting/metric-donut-card.tsx\nimport * as React from \"react\";\n\nimport { Card, CardContent, CardHeader } from \"@/registry/berlin/circle-ui/card\";\nimport { cn } from \"@/registry/berlin/lib/utils\";\n\nimport type { MetricDonutCardProps } from \"@/registry/berlin/blocks/reporting-types\";\n\nfunction formatMetricValue(value: number) {\n  return Number.isInteger(value) ? `${value}` : value.toFixed(1);\n}\n\nexport function MetricDonutCard({\n  title,\n  value,\n  unit,\n  progress,\n  summary,\n  size = \"regular\",\n  className,\n}: MetricDonutCardProps) {\n  const circumference = 2 * Math.PI * 42;\n  const clampedProgress = Math.min(Math.max(progress, 0), 1);\n  const dashOffset = circumference - circumference * clampedProgress;\n  const compact = size === \"compact\";\n  const chartSize = compact ? 96 : 140;\n\n  return (\n    <Card className={cn(\"rounded-[12px] border-black/10 bg-white\", className)}>\n      <CardHeader className={cn(\"pb-0\", compact ? \"gap-3 p-4\" : \"gap-2 p-4\")}>\n        <div className=\"flex items-start justify-between gap-4\">\n          <p className=\"text-sm leading-6 tracking-[-0.01em] text-[#202020]\">\n            {title}\n          </p>\n          {summary ? (\n            <p className=\"max-w-[220px] text-right text-sm leading-6 tracking-[-0.01em] text-muted-foreground\">\n              {summary}\n            </p>\n          ) : null}\n        </div>\n      </CardHeader>\n\n      <CardContent\n        className={cn(\n          \"flex items-center justify-center pt-0\",\n          compact ? \"p-4\" : \"p-4\",\n        )}\n      >\n        <div\n          className=\"relative flex items-center justify-center\"\n          style={{ width: chartSize, height: chartSize }}\n        >\n          <svg\n            aria-hidden=\"true\"\n            className=\"-rotate-90\"\n            viewBox=\"0 0 100 100\"\n            style={{ width: chartSize, height: chartSize }}\n          >\n            <circle\n              cx=\"50\"\n              cy=\"50\"\n              r=\"42\"\n              fill=\"none\"\n              stroke=\"#eef2f6\"\n              strokeLinecap=\"round\"\n              strokeWidth=\"9\"\n            />\n            <circle\n              cx=\"50\"\n              cy=\"50\"\n              r=\"42\"\n              fill=\"none\"\n              stroke=\"#b7d2ec\"\n              strokeDasharray={circumference}\n              strokeDashoffset={dashOffset}\n              strokeLinecap=\"round\"\n              strokeWidth=\"9\"\n            />\n          </svg>\n\n          <div className=\"absolute inset-0 flex items-center justify-center\">\n            <div className=\"flex flex-col items-center gap-1 text-center\">\n              <div\n                className={cn(\n                  \"font-medium leading-none tracking-[-0.03em] text-black\",\n                  compact ? \"text-[20px]\" : \"text-[32px]\",\n                )}\n              >\n                {formatMetricValue(value)}\n              </div>\n              {unit ? (\n                <div\n                  className={cn(\n                    \"font-semibold uppercase leading-none tracking-[-0.02em] text-[#222222]\",\n                    compact ? \"text-[8px]\" : \"text-[10px]\",\n                  )}\n                >\n                  {unit}\n                </div>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:ui",
      "target": "src/components/ui/reporting/metric-donut-card.tsx"
    }
  ],
  "type": "registry:ui"
}