{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metric-split-card",
  "title": "Metric Split Card",
  "description": "Two-sided comparison card for paired values or before-and-after measurements.",
  "registryDependencies": [
    "@blocks/metric-utils",
    "@blocks/reporting-types",
    "@circle-ui/card",
    "@circle-ui/utils"
  ],
  "files": [
    {
      "path": "registry/berlin/blocks/reporting/metric-split-card.tsx",
      "content": "// Generated from packages/ui/src/components/reporting/metric-split-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\";\nimport { formatMetricValue } from \"@/registry/berlin/blocks/metric-utils\";\n\nimport type { MetricSplitCardProps } from \"@/registry/berlin/blocks/reporting-types\";\n\nconst MIN_VISIBLE_FILL = 0.32;\n\nfunction SplitMetricPane({ label, value, fill }: MetricSplitCardProps[\"left\"]) {\n  const clampedFill = Math.min(Math.max(fill, 0), 1);\n  const visibleFill = clampedFill === 0 ? 0 : Math.max(clampedFill, MIN_VISIBLE_FILL);\n\n  return (\n    <div className=\"relative h-[132px] flex-1 overflow-hidden rounded-[16px] bg-[#eef3f8]\">\n      <div\n        className=\"absolute inset-x-0 bottom-0 rounded-[16px] bg-[#b6d1eb]\"\n        style={{\n          height: `${visibleFill * 100}%`,\n        }}\n      />\n      <div className=\"relative h-full px-4 pt-2 text-center\">\n        <p className=\"text-xs leading-4 tracking-[-0.01em] text-muted-foreground\">\n          {label}\n        </p>\n      </div>\n      <div\n        className=\"absolute inset-x-0 bottom-0 z-10 flex items-end justify-center pb-4\"\n        style={{\n          height: `${visibleFill * 100}%`,\n        }}\n      >\n        <p className=\"text-[24px] leading-[24px] tracking-[-0.03em] text-black\">\n          {formatMetricValue(value)}\n        </p>\n      </div>\n    </div>\n  );\n}\n\nexport function MetricSplitCard({\n  title,\n  summary,\n  left,\n  right,\n  className,\n}: MetricSplitCardProps) {\n  return (\n    <Card className={cn(\"rounded-[16px] border-black/10 bg-white\", className)}>\n      <CardHeader className=\"gap-4 p-6 pb-0\">\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-[320px] 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 className=\"p-6 pt-4\">\n        <div className=\"flex gap-8\">\n          <SplitMetricPane {...left} />\n          <SplitMetricPane {...right} />\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:ui",
      "target": "src/components/ui/reporting/metric-split-card.tsx"
    }
  ],
  "type": "registry:ui"
}