{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "treemap-chart",
  "title": "Treemap Chart",
  "description": "Treemap for hierarchical data visualization with proportional rectangles",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "@boldkit/utils",
    "@boldkit/chart"
  ],
  "files": [
    {
      "path": "registry/default/ui/treemap-chart.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Treemap as RechartsTreemap, ResponsiveContainer, Tooltip } from 'recharts'\nimport { ChartEmpty } from './chart'\n\nexport interface TreemapChartData {\n  name: string\n  value?: number\n  children?: TreemapChartData[]\n  fill?: string\n  [key: string]: unknown\n}\n\nexport interface TreemapChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: TreemapChartData[]\n  showTooltip?: boolean\n  animated?: boolean\n  height?: number\n  /** Accessible label for screen readers (default: \"Treemap 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\ninterface CustomContentProps {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n  name?: string\n  value?: number\n  depth?: number\n  index?: number\n}\n\nfunction CustomTreemapContent(props: CustomContentProps) {\n  const { x = 0, y = 0, width = 0, height = 0, name, value, depth = 0, index = 0 } = props\n  const colorIndex = (depth * 7 + index) % NEUBRUTALISM_COLORS.length\n  const fill = NEUBRUTALISM_COLORS[colorIndex]\n  const isSmall = width < 60 || height < 40\n\n  if (depth === 0) return null\n\n  return (\n    <g>\n      <rect\n        x={x + 2}\n        y={y + 2}\n        width={width - 4}\n        height={height - 4}\n        style={{ fill, stroke: 'hsl(var(--foreground))', strokeWidth: 3 }}\n      />\n      {!isSmall && (\n        <>\n          <text\n            x={x + width / 2}\n            y={y + height / 2 - (value !== undefined ? 8 : 0)}\n            textAnchor=\"middle\"\n            dominantBaseline=\"central\"\n            fill=\"hsl(var(--foreground))\"\n            style={{ fontFamily: 'inherit', fontSize: Math.min(14, width / 6), fontWeight: 900 }}\n          >\n            {name}\n          </text>\n          {value !== undefined && (\n            <text\n              x={x + width / 2}\n              y={y + height / 2 + 10}\n              textAnchor=\"middle\"\n              dominantBaseline=\"central\"\n              fill=\"hsl(var(--foreground))\"\n              style={{ fontFamily: \"'DM Mono', monospace\", fontSize: Math.min(11, width / 8), fontWeight: 700, opacity: 0.75 }}\n            >\n              {value.toLocaleString()}\n            </text>\n          )}\n        </>\n      )}\n    </g>\n  )\n}\n\nconst TreemapChart = React.forwardRef<HTMLDivElement, TreemapChartProps>(\n  (\n    {\n      data,\n      showTooltip = true,\n      animated = true,\n      height = 320,\n      ariaLabel = 'Treemap 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    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          <RechartsTreemap\n            data={data}\n            dataKey=\"value\"\n            aspectRatio={4 / 3}\n            isAnimationActive={animated}\n            animationDuration={400}\n            content={<CustomTreemapContent />}\n          >\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) => [\n                  typeof value === 'number' ? value.toLocaleString() : String(value ?? ''),\n                  String(name ?? ''),\n                ]}\n              />\n            )}\n          </RechartsTreemap>\n        </ResponsiveContainer>\n      </div>\n    )\n  }\n)\nTreemapChart.displayName = 'TreemapChart'\n\nexport { TreemapChart }\n",
      "type": "registry:ui",
      "target": "components/ui/treemap-chart.tsx"
    }
  ],
  "type": "registry:ui"
}