{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "heat-graph",
  "type": "registry:component",
  "title": "Heat Graph",
  "description": "Activity heat map with month and weekday labels.",
  "dependencies": [
    "heat-graph"
  ],
  "registryDependencies": [],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/heat-graph.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/heat-graph.tsx",
      "content": "\"use client\";\n\nimport * as HeatGraphPrimitive from \"heat-graph\";\n\nconst COLORS = [\"#ebedf0\", \"#c6d7f9\", \"#8fb0f3\", \"#5888e8\", \"#2563eb\"];\n\nexport function HeatGraph({ data }: { data: HeatGraphPrimitive.DataPoint[] }) {\n  return (\n    <HeatGraphPrimitive.Root\n      data={data}\n      weekStart=\"monday\"\n      colorScale={COLORS}\n      className=\"flex flex-col gap-2\"\n    >\n      <MonthLabels />\n      <div className=\"flex gap-2\">\n        <DayLabels />\n        <CellGrid />\n      </div>\n      <GraphLegend />\n      <CellTooltip />\n    </HeatGraphPrimitive.Root>\n  );\n}\n\nfunction MonthLabels() {\n  return (\n    <div className=\"relative ms-10 h-5\">\n      <HeatGraphPrimitive.MonthLabels>\n        {({ label, totalWeeks }) => (\n          <span\n            className=\"absolute text-xs text-gray-500\"\n            style={{ left: `${(label.column / totalWeeks) * 100}%` }}\n          >\n            {HeatGraphPrimitive.MONTH_SHORT[label.month]}\n          </span>\n        )}\n      </HeatGraphPrimitive.MonthLabels>\n    </div>\n  );\n}\n\nfunction DayLabels() {\n  return (\n    <div className=\"flex w-8 shrink-0 flex-col justify-between py-[2px]\">\n      <HeatGraphPrimitive.DayLabels>\n        {({ label }) => (\n          <span className=\"flex h-[13px] items-center text-xs text-gray-500\">\n            {label.row % 2 === 0\n              ? HeatGraphPrimitive.DAY_SHORT[label.dayOfWeek]\n              : \"\"}\n          </span>\n        )}\n      </HeatGraphPrimitive.DayLabels>\n    </div>\n  );\n}\n\nfunction CellGrid() {\n  return (\n    <HeatGraphPrimitive.Grid className=\"flex-1 gap-[3px]\">\n      {() => (\n        <HeatGraphPrimitive.Cell className=\"aspect-square w-full rounded-sm\" />\n      )}\n    </HeatGraphPrimitive.Grid>\n  );\n}\n\nfunction CellTooltip() {\n  return (\n    <HeatGraphPrimitive.Tooltip className=\"pointer-events-none rounded-md bg-gray-900 px-3 py-1.5 text-xs whitespace-nowrap text-white\">\n      {({ cell }) => (\n        <>\n          <strong>{cell.count} contributions</strong> on{\" \"}\n          {cell.date.toLocaleDateString(\"en-US\", {\n            month: \"short\",\n            day: \"numeric\",\n            year: \"numeric\",\n          })}\n        </>\n      )}\n    </HeatGraphPrimitive.Tooltip>\n  );\n}\n\nfunction GraphLegend() {\n  return (\n    <div className=\"ms-auto flex items-center gap-1 text-xs text-gray-500\">\n      <span>Less</span>\n      <HeatGraphPrimitive.Legend>\n        {() => (\n          <HeatGraphPrimitive.LegendLevel className=\"h-[13px] w-[13px] rounded-sm\" />\n        )}\n      </HeatGraphPrimitive.Legend>\n      <span>More</span>\n    </div>\n  );\n}\n"
    }
  ]
}