{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-tooltip-card",
  "type": "registry:ui",
  "title": "Chart tooltip card",
  "description": "Tooltip card for charts showing a title and label and value rows with tabular numbers. Drop it into any chart library's custom tooltip slot.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/chart-tooltip-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/chart-tooltip-card.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype TooltipRow = { label: string; value: string }\n\ntype ChartTooltipCardProps = {\n  title?: string\n  rows?: TooltipRow[]\n  className?: string\n}\n\nconst SAMPLE_ROWS: TooltipRow[] = [\n  { label: \"Revenue\", value: \"$48,200\" },\n  { label: \"Collected\", value: \"$41,650\" },\n  { label: \"Outstanding\", value: \"$6,550\" },\n  { label: \"Invoices\", value: \"36\" },\n]\n\n/** A small raised card for chart hover details: a title and label-value rows with tabular numbers. */\nfunction ChartTooltipCard({ title = \"March 2026\", rows = SAMPLE_ROWS, className }: ChartTooltipCardProps) {\n  return (\n    <div\n      data-slot=\"chart-tooltip-card\"\n      role=\"status\"\n      className={cn(\n        \"min-w-40 rounded-lg border border-border bg-raised p-2.5 shadow-lg\",\n        className\n      )}\n    >\n      <p className=\"text-xs font-medium text-fg\">{title}</p>\n      <ul className=\"mt-1.5 space-y-1\">\n        {rows.map((r) => (\n          <li key={r.label} className=\"flex justify-between gap-4 text-xs\">\n            <span className=\"text-fg-muted\">{r.label}</span>\n            <span className=\"tabular-nums text-fg\">{r.value}</span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\nexport { ChartTooltipCard }\nexport type { ChartTooltipCardProps, TooltipRow as ChartTooltipRow }\n"
    }
  ]
}