{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "funnel-chart",
  "title": "Funnel Chart",
  "description": "Funnel chart for conversion flows and pipeline stages with neubrutalism styling",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "@boldkit/utils",
    "@boldkit/chart"
  ],
  "files": [
    {
      "path": "registry/default/ui/funnel-chart.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { FunnelChart as RechartsFC, Funnel, LabelList, Tooltip, ResponsiveContainer } from 'recharts'\nimport { ChartEmpty } from './chart'\n\nexport interface FunnelChartData {\n  name: string\n  value: number\n  fill?: string\n}\n\nexport interface FunnelChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: FunnelChartData[]\n  showLabels?: boolean\n  showTooltip?: boolean\n  animated?: boolean\n  height?: number\n  /** Accessible label for screen readers (default: \"Funnel chart\") */\n  ariaLabel?: string\n  emptyState?: React.ReactNode\n}\n\nconst NEUBRUTALISM_COLORS = [\n  'hsl(var(--primary))',\n  'hsl(var(--secondary))',\n  'hsl(var(--accent))',\n  'hsl(var(--success))',\n  'hsl(var(--info))',\n  'hsl(var(--warning))',\n]\n\nconst FunnelChart = React.forwardRef<HTMLDivElement, FunnelChartProps>(\n  (\n    {\n      data,\n      showLabels = true,\n      showTooltip = true,\n      animated = true,\n      height = 300,\n      ariaLabel = 'Funnel chart',\n      emptyState,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    if (!data || data.length === 0) {\n      return <ChartEmpty ref={ref} message={emptyState} className={className} {...props} />\n    }\n\n    const coloredData = data.map((d, i) => ({\n      ...d,\n      fill: d.fill || NEUBRUTALISM_COLORS[i % NEUBRUTALISM_COLORS.length],\n    }))\n\n    return (\n      <div\n        ref={ref}\n        role=\"img\"\n        aria-label={ariaLabel}\n        className={cn('w-full', className)}\n        style={{ height }}\n        {...props}\n      >\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsFC>\n            <Funnel\n              dataKey=\"value\"\n              data={coloredData}\n              isAnimationActive={animated}\n              animationDuration={400}\n              stroke=\"hsl(var(--foreground))\"\n              strokeWidth={3}\n            >\n              {showLabels && (\n                <LabelList\n                  position=\"right\"\n                  fill=\"hsl(var(--foreground))\"\n                  stroke=\"none\"\n                  dataKey=\"name\"\n                  style={{ fontFamily: \"'DM Mono', monospace\", fontSize: 11, fontWeight: 700 }}\n                />\n              )}\n            </Funnel>\n            {showTooltip && (\n              <Tooltip\n                contentStyle={{\n                  border: '3px solid hsl(var(--foreground))',\n                  borderRadius: 0,\n                  boxShadow: '4px 4px 0px hsl(var(--foreground))',\n                  background: 'hsl(var(--background))',\n                  color: 'hsl(var(--foreground))',\n                  fontFamily: \"'DM Mono', monospace\",\n                  fontSize: 12,\n                }}\n                itemStyle={{ color: 'hsl(var(--foreground))' }}\n                labelStyle={{ color: 'hsl(var(--foreground))' }}\n                formatter={(value, name) => [`${Number(value ?? 0).toLocaleString()}`, String(name ?? '')]}\n              />\n            )}\n          </RechartsFC>\n        </ResponsiveContainer>\n      </div>\n    )\n  }\n)\nFunnelChart.displayName = 'FunnelChart'\n\nexport { FunnelChart }\n",
      "type": "registry:ui",
      "target": "components/ui/funnel-chart.tsx"
    }
  ],
  "type": "registry:ui"
}