{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bar-chart-card",
  "title": "Bar Chart Card",
  "author": "Zubeyr <https://zubeyr.dev>",
  "description": "Grouped bars comparing two periods side by side, with rounded caps and a legend.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://tomei.zubeyr.dev/ui/r/card.json"
  ],
  "files": [
    {
      "path": "registry/dashboard/blocks/bar-chart-card/bar-chart-card.tsx",
      "content": "'use client'\n\nimport { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'\n\nimport { Card, LegendItem } from '@/registry/dashboard/components/card/card'\n\nexport type BarPoint = { label: string; current: number; previous?: number }\n\ntype BarChartCardProps = {\n  title: React.ReactNode\n  data: BarPoint[]\n  value?: React.ReactNode\n  change?: number\n  currentLabel?: string\n  previousLabel?: string\n  formatOptions?: Intl.NumberFormatOptions\n  action?: React.ReactNode\n  height?: number\n  className?: string\n}\n\nexport function BarChartCard({\n  title,\n  data,\n  value,\n  change,\n  currentLabel = 'This period',\n  previousLabel = 'Previous period',\n  formatOptions,\n  action,\n  height = 200,\n  className,\n}: BarChartCardProps) {\n  const full = new Intl.NumberFormat('en', formatOptions)\n  const compact = new Intl.NumberFormat('en', { ...formatOptions, notation: 'compact' })\n  const hasPrevious = data.some((d) => d.previous !== undefined)\n\n  return (\n    <Card\n      title={title}\n      value={value}\n      change={change}\n      action={action}\n      className={className}\n      legend={\n        <>\n          <LegendItem color=\"var(--chart-1)\">{currentLabel}</LegendItem>\n          {hasPrevious && <LegendItem color=\"var(--chart-2)\">{previousLabel}</LegendItem>}\n        </>\n      }\n    >\n      <ResponsiveContainer width=\"100%\" height={height}>\n        <BarChart data={data} barGap={2} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>\n          <CartesianGrid vertical={false} stroke=\"var(--border)\" />\n          <XAxis\n            dataKey=\"label\"\n            axisLine={false}\n            tickLine={false}\n            tick={{ fill: 'var(--muted-foreground)', fontSize: 12 }}\n          />\n          <YAxis\n            width={44}\n            axisLine={false}\n            tickLine={false}\n            tickCount={3}\n            tickFormatter={(v: number) => compact.format(v)}\n            tick={{ fill: 'var(--muted-foreground)', fontSize: 12 }}\n          />\n          <Tooltip\n            cursor={{ fill: 'var(--muted)', opacity: 0.6 }}\n            content={({ active, payload, label }) =>\n              active && payload?.length ? (\n                <div className=\"rounded-lg bg-popover px-3 py-2 text-xs text-popover-foreground shadow-(--shadow-card)\">\n                  <p className=\"mb-1 text-muted-foreground\">{label}</p>\n                  {payload.map((p) => (\n                    <p key={String(p.dataKey)} className=\"flex items-center gap-2 tabular-nums\">\n                      <span className=\"size-2 rounded-full\" style={{ background: p.color }} />\n                      {full.format(Number(p.value))}\n                    </p>\n                  ))}\n                </div>\n              ) : null\n            }\n          />\n          <Bar dataKey=\"current\" fill=\"var(--chart-1)\" radius={[4, 4, 0, 0]} maxBarSize={18} />\n          {hasPrevious && (\n            <Bar dataKey=\"previous\" fill=\"var(--chart-2)\" radius={[4, 4, 0, 0]} maxBarSize={18} />\n          )}\n        </BarChart>\n      </ResponsiveContainer>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/dashboard/bar-chart-card.tsx"
    }
  ],
  "meta": {
    "scenario": "dashboard",
    "kind": "blocks"
  },
  "categories": [
    "dashboard",
    "charts"
  ],
  "type": "registry:block"
}