fn_registry/frontend/functions/ui/month_heatmap.md

name, kind, lang, domain, version, framework, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, props, emits, has_state, params, output, file_path

name	kind	lang	domain	version	framework	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	tested	tests	test_file_path	props	emits	has_state	params	output	file_path
month_heatmap	component	ts	ui	1.0.0	react	pure	MonthHeatmap(props: MonthHeatmapProps): JSX.Element	Grid mensual de calor (heatmap) con inicio en lunes. Renderiza 7 columnas con header de dias de semana y celdas que muestran numero del dia, hasta dos contadores con icono, borde azul para hoy y fondo tintado segun valores primary/secondary.	calendar heatmap grid month ui mantine	month_grid_ts_core			false		@mantine/core @tabler/icons-react ../core/month_grid	false			name type required description month Date true Mes a mostrar. Se usan getFullYear() y getMonth(). El dia se ignora. name type required description cells Map<string, MonthHeatmapCell> true Datos por dia. Clave YYYY-MM-DD. Valores: primary (contador azulado) y secondary (contador verdoso). name type required description primaryIcon ReactNode false Icono junto al contador primary. Default: IconPlus de @tabler/icons-react. name type required description secondaryIcon ReactNode false Icono junto al contador secondary. Default: IconCheckbox de @tabler/icons-react. name type required description primaryColor string false Color Mantine del contador primary. Default: 'blue'. name type required description secondaryColor string false Color Mantine del contador secondary. Default: 'green'. name type required description dayLabels string[] false Array de 7 strings para el header de columnas, empezando por lunes. Default: ['Lun','Mar','Mie','Jue','Vie','Sab','Dom']. name type required description cellMinHeight number false Altura minima de cada celda en px. Default: 72.		false	name desc month Mes a renderizar como objeto Date (year + month extraidos con getFullYear/getMonth). name desc cells Map de YYYY-MM-DD a { primary?, secondary? } con los contadores de cada dia. name desc primaryIcon ReactNode opcional para el icono del contador primary (creado, pendiente, etc.). name desc secondaryIcon ReactNode opcional para el icono del contador secondary (completado, resuelto, etc.). name desc primaryColor Nombre de color Mantine para el contador primary y su tinte de fondo (rgba 6%). name desc secondaryColor Nombre de color Mantine para el contador secondary y su tinte de fondo (rgba 8%). name desc dayLabels Labels del header de dias de semana, 7 elementos, orden lunes-domingo. name desc cellMinHeight Altura minima en px de cada celda del grid.	Componente React que renderiza un grid de 7 columnas con el calendario del mes indicado. Celdas de relleno vacias, celdas del mes con numero, contadores opcionales e iconos, borde azul en el dia de hoy y fondo tintado segun presencia de valores.	frontend/functions/ui/month_heatmap.tsx

Ejemplo

import { MonthHeatmap, type MonthHeatmapCell } from "@fn_library/ui/month_heatmap";

const cells = new Map<string, MonthHeatmapCell>([
  ["2026-05-01", { primary: 3 }],
  ["2026-05-09", { primary: 1, secondary: 2 }],
  ["2026-05-15", { secondary: 4 }],
]);

<MonthHeatmap
  month={new Date(2026, 4, 1)}
  cells={cells}
/>

Ejemplo con iconos y colores custom

import { IconBug, IconCheck } from "@tabler/icons-react";

<MonthHeatmap
  month={new Date(2026, 4, 1)}
  cells={cells}
  primaryIcon={<IconBug size={10} />}
  secondaryIcon={<IconCheck size={10} />}
  primaryColor="red"
  secondaryColor="teal"
  cellMinHeight={88}
/>

Notas

Componente puro (sin estado propio, sin efectos). El calculo del grid se delega a month_grid_ts_core (monthGrid(year, month)), que genera un array de celdas de longitud multiplo de 7 con date: null para el padding.

La deteccion de "hoy" usa Date nativo sin dayjs para no introducir dependencias.

El fondo tintado prioriza secondary sobre primary cuando ambos son > 0, replicando la logica del componente original en apps/kanban.

Compatible con Mantine v9. No usa CSS variables custom — emplea props de Mantine (c, fw, p, gap, radius) y solo dos style inline para minHeight y borderColor condicional (que no tienen equivalente en props Mantine).