{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "heatmap-cell",
  "type": "registry:ui",
  "title": "Heatmap cell",
  "description": "A square heatmap cell whose fill blends from a muted base to the accent color by an intensity from 0 to 1, with an aria label. Tile it for activity grids.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/heatmap-cell.tsx",
      "type": "registry:ui",
      "target": "components/ui/heatmap-cell.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction HeatmapCell({\n  intensity = 0,\n  label,\n  className,\n}: {\n  intensity?: number\n  label?: string\n  className?: string\n}) {\n  const clamped = Math.max(0, Math.min(1, intensity))\n  return (\n    <div\n      data-slot=\"heatmap-cell\"\n      role=\"img\"\n      title={label}\n      aria-label={label ?? `Intensity ${Math.round(clamped * 100)}%`}\n      className={cn(\"size-4 rounded-sm border border-border\", className)}\n      style={{ backgroundColor: `color-mix(in oklch, var(--accent) ${Math.round(clamped * 100)}%, var(--sunken))` }}\n    />\n  )\n}\nexport { HeatmapCell }\n"
    }
  ]
}