{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "market-treemap",
  "type": "registry:component",
  "title": "Market Treemap",
  "description": "Sector-style market heatmap using weighted tiles and signed performance colors.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/market-treemap/market-treemap.tsx",
      "content": "import * as React from \"react\";\n\nimport { ArrowDownRight, ArrowUpRight } from \"lucide-react\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type MarketTreemapItem = {\n  change: number;\n  label: string;\n  sector?: string;\n  value: number;\n};\n\nexport type MarketTreemapProps = {\n  items: MarketTreemapItem[];\n} & React.HTMLAttributes<HTMLDivElement>;\n\nfunction getSpan(value: number, maxValue: number) {\n  const normalized = value / Math.max(maxValue, 1);\n\n  if (normalized >= 0.7) {\n    return \"md:col-span-2 md:row-span-2\";\n  }\n\n  if (normalized >= 0.4) {\n    return \"md:col-span-2\";\n  }\n\n  return \"\";\n}\n\nfunction getTone(change: number) {\n  const isPositive = change >= 0;\n\n  return {\n    isPositive,\n    tileClassName: isPositive\n      ? \"border-emerald-500/30 bg-emerald-500/10\"\n      : \"border-rose-500/30 bg-rose-500/10\",\n    trendClassName: isPositive\n      ? \"text-emerald-600 dark:text-emerald-400\"\n      : \"text-rose-600 dark:text-rose-400\",\n  };\n}\n\nfunction MarketTreemapTile({\n  item,\n  maxValue,\n}: {\n  item: MarketTreemapItem;\n  maxValue: number;\n}) {\n  const tone = getTone(item.change);\n  const TrendIcon = tone.isPositive ? ArrowUpRight : ArrowDownRight;\n\n  return (\n    <article\n      className={cn(\n        \"flex min-h-[120px] flex-col justify-between rounded-2xl border p-4 transition-transform duration-200 hover:-translate-y-0.5\",\n        tone.tileClassName,\n        getSpan(item.value, maxValue),\n      )}\n    >\n      <div className=\"space-y-2\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div>\n            <p className=\"text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground\">\n              {item.sector ?? \"Market\"}\n            </p>\n            <h3 className=\"mt-1 text-xl font-semibold text-foreground\">\n              {item.label}\n            </h3>\n          </div>\n          <div\n            className={cn(\n              \"inline-flex items-center gap-1 text-sm font-medium\",\n              tone.trendClassName,\n            )}\n          >\n            <TrendIcon className=\"size-4\" />\n            {item.change > 0 ? \"+\" : \"\"}\n            {item.change.toFixed(2)}%\n          </div>\n        </div>\n      </div>\n      <div className=\"flex items-end justify-between gap-3 text-sm text-muted-foreground\">\n        <span>Weight {item.value.toLocaleString()}</span>\n        <span className=\"rounded-full bg-background/70 px-2 py-1 text-xs uppercase tracking-[0.2em] text-foreground\">\n          {tone.isPositive ? \"Advancing\" : \"Declining\"}\n        </span>\n      </div>\n    </article>\n  );\n}\n\nexport const MarketTreemap = React.forwardRef<\n  HTMLDivElement,\n  MarketTreemapProps\n>(({ className, items, ...props }, reference) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const maxValue = Math.max(...items.map((item) => item.value));\n\n  return (\n    <div\n      className={cn(\n        \"rounded-2xl border border-border bg-card/80 p-4 shadow-sm\",\n        className,\n      )}\n      ref={reference}\n      {...props}\n    >\n      <div className=\"mb-4 flex flex-wrap items-center justify-between gap-3\">\n        <div>\n          <p className=\"text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground\">\n            Sector heatmap\n          </p>\n          <h2 className=\"text-lg font-semibold text-foreground\">\n            Market treemap\n          </h2>\n        </div>\n        <p className=\"text-sm text-muted-foreground\">\n          Tile size maps market cap proxy; color reflects session change.\n        </p>\n      </div>\n      <div className=\"grid auto-rows-[120px] grid-cols-1 gap-3 md:auto-rows-[120px] md:grid-cols-4\">\n        {items.map((item) => (\n          <MarketTreemapTile item={item} key={item.label} maxValue={maxValue} />\n        ))}\n      </div>\n    </div>\n  );\n});\n\nMarketTreemap.displayName = \"MarketTreemap\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}