{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "git-contribution-heatmap",
  "type": "registry:ui",
  "title": "Git Activity Contribution Heatmap",
  "description": "GitHub-inspired commit calendar heatmap grid with 5 luminescent intensity levels, month labels, and live hover tooltips.",
  "category": "data",
  "dependencies": [],
  "files": [
    {
      "path": "registry/data/git-contribution-heatmap/git-contribution-heatmap.tsx",
      "type": "registry:ui",
      "target": "components/ui/git-contribution-heatmap.tsx",
      "content": "import React, { useState } from 'react';\n\nexport const GitContributionHeatmap: React.FC = () => {\n  const [hoveredDay, setHoveredDay] = useState<{ week: number; day: number; count: number } | null>(null);\n\n  // Generate 20 weeks x 7 days\n  const weeks = 18;\n  const days = 7;\n\n  const getIntensity = (w: number, d: number) => {\n    const val = (w * 3 + d * 7) % 11;\n    if (val > 8) return 'bg-emerald-400 dark:bg-emerald-400';\n    if (val > 5) return 'bg-emerald-500/70 dark:bg-emerald-500/70';\n    if (val > 2) return 'bg-emerald-600/40 dark:bg-emerald-600/40';\n    return 'bg-zinc-200 dark:bg-white/10';\n  };\n\n  return (\n    <div className=\"w-full max-w-md mx-auto p-4 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white/90 dark:bg-zinc-950/80 shadow-lg backdrop-blur-md font-mono text-xs\">\n      <div className=\"flex items-center justify-between mb-3 text-[11px] text-zinc-500\">\n        <span>524 INVOCATIONS IN LAST 18 WEEKS</span>\n        {hoveredDay ? (\n          <span className=\"text-emerald-500 font-bold\">{hoveredDay.count} commits</span>\n        ) : (\n          <span>Hover cell</span>\n        )}\n      </div>\n\n      <div className=\"flex gap-1 overflow-x-auto pb-1\">\n        {Array.from({ length: weeks }).map((_, w) => (\n          <div key={w} className=\"flex flex-col gap-1\">\n            {Array.from({ length: days }).map((_, d) => (\n              <div\n                key={d}\n                onMouseEnter={() => setHoveredDay({ week: w, day: d, count: ((w + d * 2) % 9) + 1 })}\n                onMouseLeave={() => setHoveredDay(null)}\n                className={`w-3.5 h-3.5 rounded-xs transition-transform hover:scale-125 cursor-pointer ${getIntensity(w, d)}`}\n              />\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}