{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-legend",
  "type": "registry:ui",
  "title": "Chart legend",
  "description": "Wrapping chart legend with small color swatches and labels. Pass colors per series or fall back to accent, success, warning and danger theme tokens.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/chart-legend.tsx",
      "type": "registry:ui",
      "target": "components/ui/chart-legend.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype LegendItem = { label: string; color?: string }\n\n/** A row of colour swatches and series names to sit under a chart. */\ntype ChartLegendProps = {\n  /** Series to list. Colors fall back to accent, success, warning and danger in turn. */\n  items?: LegendItem[]\n  className?: string\n}\n\nconst SAMPLE_ITEMS: LegendItem[] = [\n  { label: \"Revenue\" },\n  { label: \"Collected\" },\n  { label: \"Outstanding\" },\n  { label: \"Refunded\" },\n]\n\nfunction ChartLegend({ items = SAMPLE_ITEMS, className }: ChartLegendProps) {\n  const fallback = [\"var(--accent)\", \"var(--success)\", \"var(--warning)\", \"var(--danger)\"]\n  return (\n    <ul data-slot=\"chart-legend\" className={cn(\"flex flex-wrap gap-3\", className)}>\n      {items.map((item, i) => (\n        <li key={item.label} className=\"inline-flex items-center gap-1.5 text-xs text-fg-muted\">\n          <span className=\"size-2 rounded-sm\" style={{ background: item.color ?? fallback[i % fallback.length] }} aria-hidden />\n          {item.label}\n        </li>\n      ))}\n    </ul>\n  )\n}\nexport { ChartLegend }\nexport type { ChartLegendProps, LegendItem as ChartLegendItem }\n"
    }
  ]
}