@siyahi/ui 0.1.9-next.2 → 0.1.9-next.21

package/dist/components/registry/heatmap/calendar-heatmap.js

@@ -1,6 +1,8 @@
 import { cn } from "../../../lib/utils.js";
+import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
+import { useElementWidth } from "../../../lib/use-element-width.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
+import { Fragment as Fragment$1, createContext, use, useLayoutEffect, useMemo } from "react";
 import { differenceInCalendarDays, eachDayOfInterval, format, formatISO, getDay, getMonth, getYear, nextDay, parseISO, subWeeks } from "date-fns";
 //#region src/components/registry/heatmap/calendar-heatmap.tsx
 const colorStepCount = (levels, isNormalized) => Math.max(1, isNormalized ? levels : levels - 1);
@@ -40,6 +42,12 @@ const generateWeekdayLabels = (locale) => {
 };
 const EMPTY_STYLE = {};
 const LABEL_MARGIN = 8;
+const WEEKDAY_LABEL_WIDTH = 40;
+const STROKE_PADDING = 3;
+const LEGEND_SWATCH = 12;
+const MIN_FITTED_BLOCK = 10;
+const MAX_FITTED_BLOCK = 20;
+const DEFAULT_BLOCK = 12;
 const CalendarHeatmapContext = createContext(null);
 const useCalendarHeatmap = () => {
 	const context = use(CalendarHeatmapContext);
@@ -131,26 +139,18 @@ const groupContinuous = (activities, weekStart = 0) => {
 	const padded = [...new Array(leadingPad).fill(void 0), ...normalizedActivities];
 	const numberOfWeeks = Math.ceil(padded.length / 7);
 	const allWeeks = new Array(numberOfWeeks).fill(void 0).map((_, i) => padded.slice(i * 7, i * 7 + 7));
-	const yearMap = /* @__PURE__ */ new Map();
-	for (const week of allWeeks) {
-		const firstActivity = week.find((a) => a !== void 0);
-		const year = firstActivity ? getYear(parseISO(firstActivity.date)) : void 0;
-		if (year !== void 0) {
-			if (!yearMap.has(year)) yearMap.set(year, []);
-			yearMap.get(year)?.push(week);
-		}
-	}
-	return Array.from(yearMap.entries()).sort(([a], [b]) => a - b).map(([year, weeks]) => ({
-		year,
+	return [{
+		year: getYear(firstDate),
 		startMonth: 0,
-		weeks
-	}));
+		weeks: allWeeks
+	}];
 };
-const getMonthLabels = (weeks, monthNames = generateMonthLabels()) => {
-	return weeks.reduce((labels, week, weekIndex) => {
+const getMonthLabels = (weeks, monthNames = generateMonthLabels(), yearTicks = false) => {
+	const ticks = weeks.reduce((labels, week, weekIndex) => {
 		const firstActivity = week.find((activity) => activity !== void 0);
 		if (!firstActivity) return labels;
-		const month = monthNames[getMonth(parseISO(firstActivity.date))];
+		const date = parseISO(firstActivity.date);
+		const month = monthNames[getMonth(date)];
 		if (!month) {
 			const monthName = new Date(firstActivity.date).toLocaleString("en-US", { month: "short" });
 			throw new Error(`Unexpected error: undefined month label for ${monthName}.`);
@@ -158,7 +158,8 @@ const getMonthLabels = (weeks, monthNames = generateMonthLabels()) => {
 		const prevLabel = labels.at(-1);
 		if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) return labels.concat({
 			weekIndex,
-			label: month
+			label: month,
+			year: getMonth(date) === 0 ? getYear(date) : void 0
 		});
 		return labels;
 	}, []).filter(({ weekIndex }, index, labels) => {
@@ -167,6 +168,22 @@ const getMonthLabels = (weeks, monthNames = generateMonthLabels()) => {
 		if (index === labels.length - 1) return weeks.slice(weekIndex).length >= minWeeks;
 		return true;
 	});
+	if (!yearTicks) return ticks;
+	const hasJanuary = ticks.some(({ year }) => year !== void 0);
+	return ticks.map((tick, index) => {
+		if (tick.year !== void 0) return {
+			...tick,
+			label: String(tick.year)
+		};
+		if (index === 0 && !hasJanuary) {
+			const week = weeks[tick.weekIndex]?.find((activity) => activity !== void 0);
+			return week ? {
+				...tick,
+				label: `${tick.label} ${getYear(parseISO(week.date))}`
+			} : tick;
+		}
+		return tick;
+	});
 };
 /**
 * Calendar Heatmap
@@ -201,8 +218,9 @@ const getMonthLabels = (weeks, monthNames = generateMonthLabels()) => {
 * @param levels - Total number of legend cells (including empty when not normalized). Default: 5
 * @param isNormalized - When true, uses min-max normalization across the dataset (suitable for signed values). When false (default), treats 0 as empty and scales from 0 to max.
 */
-const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmptyColumn = false, blockSize = 12, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, style = EMPTY_STYLE, className, children, ...props }) => {
+const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmptyColumn = false, blockSize: blockSizeProp, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, style = EMPTY_STYLE, className, children, ...props }) => {
 	const levels = Math.max(1, levelsProp);
+	const [rootRef, rootWidth] = useElementWidth();
 	const dataWithLevels = useMemo(() => {
 		if (data.length === 0) return [];
 		const maxCount = data.reduce((max, d) => Math.max(max, d.value), 1);
@@ -235,6 +253,8 @@ const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmpt
 	const labelHeight = fontSize + LABEL_MARGIN;
 	const year = data.length > 0 ? getYear(parseISO(data[0].date)) : (/* @__PURE__ */ new Date()).getFullYear();
 	const totalCount = typeof totalCountProp === "number" ? totalCountProp : dataWithLevels.reduce((sum, activity) => sum + activity.value, 0);
+	const fitted = (rootWidth - WEEKDAY_LABEL_WIDTH - 6 + blockMargin) / Math.max(weeks.length, 1) - blockMargin;
+	const blockSize = blockSizeProp ?? (rootWidth > 0 ? Math.min(MAX_FITTED_BLOCK, Math.max(MIN_FITTED_BLOCK, fitted)) / blockAspectRatio : DEFAULT_BLOCK);
 	const blockWidth = blockSize * blockAspectRatio;
 	const width = weeks.length * (blockWidth + blockMargin) - blockMargin;
 	const height = labelHeight + (blockSize + blockMargin) * 7 - blockMargin;
@@ -289,8 +309,9 @@ const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmpt
 	return /* @__PURE__ */ jsx(CalendarHeatmapContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
 			"data-slot": "calendar-heatmap",
-			className: cn("flex w-max max-w-full flex-col gap-2 p-4", className),
+			className: cn("flex flex-col gap-2", blockSizeProp === void 0 ? "w-full" : "w-max max-w-full", className),
 			style: {
 				fontSize,
 				...style
@@ -300,7 +321,7 @@ const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, hasEmpt
 		})
 	});
 };
-const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
+const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted = false, selected = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
 	const { blockSize, blockWidth, blockMargin, blockRadius, labelHeight, labels, levels, isNormalized, colors } = useCalendarHeatmap();
 	const level = Math.max(0, Math.min(colorStepCount(levels, isNormalized), activity.level));
 	const ariaLabel = (labels.cellLabel ?? "{{date}}: {{value}} contributions").replace("{{date}}", activity.date).replace("{{value}}", String(activity.value));
@@ -308,6 +329,7 @@ const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted
 		ref,
 		"data-slot": "calendar-heatmap-block",
 		role: onCellClick ? "button" : "img",
+		"aria-pressed": onCellClick ? selected : void 0,
 		tabIndex: onCellClick ? 0 : -1,
 		"aria-label": ariaLabel,
 		className: cn("motion-safe:transition-opacity motion-safe:hover:opacity-70", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
@@ -315,6 +337,7 @@ const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted
 		"data-date": activity.date,
 		"data-level": level,
 		"data-highlighted": highlighted || void 0,
+		"data-selected": selected || void 0,
 		height: blockSize,
 		rx: blockRadius,
 		ry: blockRadius,
@@ -323,6 +346,10 @@ const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted
 		y: labelHeight + (blockSize + blockMargin) * dayIndex,
 		style: {
 			fill: getLevelFill(level, levels, isNormalized, highlighted, colors),
+			...selected ? {
+				stroke: "var(--foreground)",
+				strokeWidth: 2
+			} : {},
 			...styleProp
 		},
 		onClick: (event) => {
@@ -349,17 +376,18 @@ const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted
 };
 CalendarHeatmapBlock.displayName = "CalendarHeatmapBlock";
 const CalendarHeatmapBody = ({ hideMonthLabels = false, hideWeekdayLabels = false, hideYearLabels = false, className, labelClassName, yearClassName, children, renderYearFooter, ...props }) => {
-	const { yearRows, blockSize, blockWidth, blockMargin, labels, labelHeight, fontSize, weekStart, data } = useCalendarHeatmap();
-	const weekdayLabelWidth = hideWeekdayLabels ? 0 : 40;
-	const strokePadding = 3;
+	const navigation = useHeatmapNavigation();
+	const { yearRows, blockSize, blockWidth, blockMargin, labels, labelHeight, fontSize, weekStart, continuousMonths } = useCalendarHeatmap();
+	const weekdayLabelWidth = hideWeekdayLabels ? 0 : WEEKDAY_LABEL_WIDTH;
+	const strokePadding = STROKE_PADDING;
 	const rowData = useMemo(() => {
 		return yearRows.map((yearRow) => {
 			return {
 				yearRow,
 				width: yearRow.weeks.length * (blockWidth + blockMargin) - blockMargin,
 				height: labelHeight + (blockSize + blockMargin) * 7 - blockMargin,
-				monthLabels: getMonthLabels(yearRow.weeks, labels.months),
-				yearTotalCount: data.filter((activity) => getYear(parseISO(activity.date)) === yearRow.year).reduce((sum, activity) => sum + activity.value, 0)
+				monthLabels: getMonthLabels(yearRow.weeks, labels.months, continuousMonths),
+				yearTotalCount: yearRow.weeks.flat().reduce((sum, activity) => sum + (activity?.value ?? 0), 0)
 			};
 		});
 	}, [
@@ -369,15 +397,28 @@ const CalendarHeatmapBody = ({ hideMonthLabels = false, hideWeekdayLabels = fals
 		blockMargin,
 		labelHeight,
 		labels.months,
-		data
+		continuousMonths
 	]);
 	const totalWidth = weekdayLabelWidth + Math.max(...rowData.map((r) => r.width)) + 6;
+	const scroller = navigation.ref;
+	useLayoutEffect(() => {
+		if (continuousMonths && scroller.current) scroller.current.scrollLeft = scroller.current.scrollWidth;
+	}, [
+		continuousMonths,
+		scroller,
+		totalWidth
+	]);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "calendar-heatmap-body",
+		ref: navigation.ref,
 		className: cn("flex max-w-full flex-col gap-6 overflow-x-auto overflow-y-hidden py-4", className),
 		...props,
+		onKeyDown: (event) => {
+			props.onKeyDown?.(event);
+			if (!event.defaultPrevented) navigation.onKeyDown(event);
+		},
 		children: rowData.map(({ yearRow, height, monthLabels, yearTotalCount }) => /* @__PURE__ */ jsxs("div", { children: [
-			!hideYearLabels && /* @__PURE__ */ jsx("div", {
+			!hideYearLabels && !continuousMonths && /* @__PURE__ */ jsx("div", {
 				className: cn("mb-2 text-muted-foreground", yearClassName),
 				children: yearRow.year
 			}),
@@ -458,7 +499,7 @@ const CalendarHeatmapStat = ({ compute, label, className, children, ...props })
 	});
 };
 const CalendarHeatmapLegend = ({ labels: labelsProp, className, children, ...props }) => {
-	const { levels, isNormalized, blockSize, blockWidth, blockRadius, colors, labels } = useCalendarHeatmap();
+	const { levels, isNormalized, blockRadius, colors, labels } = useCalendarHeatmap();
 	const lessLabel = labelsProp?.less ?? "Less";
 	const moreLabel = labelsProp?.more ?? "More";
 	const legendLevels = Array.from({ length: levels }, (_, i) => isNormalized ? i + 1 : i);
@@ -475,14 +516,14 @@ const CalendarHeatmapLegend = ({ labels: labelsProp, className, children, ...pro
 			legendLevels.map((level) => children ? /* @__PURE__ */ jsx(Fragment$1, { children: children({ level }) }, `legend-level-${level}`) : /* @__PURE__ */ jsx("svg", {
 				role: "img",
 				"aria-label": (labels.legendLevelLabel ?? "{{level}} contributions").replace("{{level}}", String(level)),
-				height: blockSize,
-				width: blockWidth,
+				height: LEGEND_SWATCH,
+				width: LEGEND_SWATCH,
 				children: /* @__PURE__ */ jsx("rect", {
 					"data-level": level,
-					height: blockSize,
+					height: LEGEND_SWATCH,
 					rx: blockRadius,
 					ry: blockRadius,
-					width: blockWidth,
+					width: LEGEND_SWATCH,
 					style: { fill: getLevelFill(level, levels, isNormalized, false, colors) }
 				})
 			}, `legend-level-${level}`)),

package/dist/components/registry/heatmap/status-heatmap.d.ts

@@ -69,11 +69,13 @@ export type StatusHeatmapProps = HTMLAttributes<HTMLDivElement> & {
  *
  * @param data - Array of activities with date (YYYY-MM-DD) and status value (0-3)
  * @param dateFormat - Date format string for tooltips. Default: "MMM d"
- * @param blockAspectRatio - Width/height ratio of blocks. Default: 0.2 (narrow vertical bars)
+ * @param blockAspectRatio - Width/height ratio of blocks. Default: bars share the full width
  * @param colors - Custom colors for critical, degraded, and healthy states
  */
-export declare const StatusHeatmap: ({ data, dateFormat, blockSize, blockMargin, blockRadius, blockAspectRatio, colors, locale, labels: labelsProp, fontSize, emptyState, statusValues, healthyValue, style, className, children, ...props }: StatusHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+export declare const StatusHeatmap: ({ data, dateFormat, blockSize, blockMargin, blockRadius, blockAspectRatio: blockAspectRatioProp, colors, locale, labels: labelsProp, fontSize, emptyState, statusValues, healthyValue, style, className, children, ...props }: StatusHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
 export type StatusHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
+  /** The cell the page has picked: drawn with a ring and announced as pressed. */
+  selected?: boolean;
   activity: StatusActivity;
   dayIndex: number;
   highlighted?: boolean;
@@ -81,7 +83,7 @@ export type StatusHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
   onCellHover?: (activity: StatusActivity | null) => void;
   className?: string;
 };
-export declare function StatusHeatmapBlock({ ref, activity, dayIndex, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: StatusHeatmapBlockProps & {
+export declare function StatusHeatmapBlock({ ref, activity, dayIndex, highlighted, selected, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: StatusHeatmapBlockProps & {
   ref?: React.RefObject<SVGRectElement | null>;
 }): import("react").JSX.Element;
 export declare namespace StatusHeatmapBlock {

package/dist/components/registry/heatmap/status-heatmap.js

@@ -1,13 +1,15 @@
 import { cn } from "../../../lib/utils.js";
+import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.js";
+import { useElementWidth } from "../../../lib/use-element-width.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createContext, use, useMemo } from "react";
 import { format } from "date-fns";
 //#region src/components/registry/heatmap/status-heatmap.tsx
 const DEFAULT_COLORS = {
 	0: "var(--color-secondary)",
-	1: "var(--negative)",
+	1: "var(--destructive)",
 	2: "var(--warning)",
-	3: "var(--positive)"
+	3: "color-mix(in oklab, var(--muted-foreground) 40%, transparent)"
 };
 const SEMANTIC_KEYS = {
 	0: "noData",
@@ -51,6 +53,9 @@ const getStatusFill = (value, colors, highlighted = false) => {
 	return `color-mix(in oklch, ${base} 60%, transparent)`;
 };
 const EMPTY_STYLE = {};
+const LEGEND_SWATCH = 10;
+const MIN_FITTED_BAR = 2;
+const DEFAULT_ASPECT_RATIO = .2;
 const StatusHeatmapContext = createContext(null);
 const useStatusHeatmap = () => {
 	const context = use(StatusHeatmapContext);
@@ -84,15 +89,16 @@ const useStatusHeatmap = () => {
 *
 * @param data - Array of activities with date (YYYY-MM-DD) and status value (0-3)
 * @param dateFormat - Date format string for tooltips. Default: "MMM d"
-* @param blockAspectRatio - Width/height ratio of blocks. Default: 0.2 (narrow vertical bars)
+* @param blockAspectRatio - Width/height ratio of blocks. Default: bars share the full width
 * @param colors - Custom colors for critical, degraded, and healthy states
 */
-const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin = 2, blockRadius = 2, blockAspectRatio = .2, colors, locale, labels: labelsProp, fontSize = 14, emptyState, statusValues = [
+const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin = 2, blockRadius = 2, blockAspectRatio: blockAspectRatioProp, colors, locale, labels: labelsProp, fontSize = 14, emptyState, statusValues = [
 	0,
 	1,
 	2,
 	3
 ], healthyValue = 3, style = EMPTY_STYLE, className, children, ...props }) => {
+	const [rootRef, rootWidth] = useElementWidth();
 	const labels = useMemo(() => ({
 		statuses: {
 			noData: "No Data",
@@ -112,7 +118,10 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 		});
 		return Array.from(uniqueDates).sort();
 	}, [data]);
-	const blockWidth = blockSize * blockAspectRatio;
+	const fits = blockAspectRatioProp === void 0;
+	const fitted = (rootWidth - 6 + blockMargin) / Math.max(dates.length, 1) - blockMargin;
+	const blockWidth = fits && rootWidth > 0 ? Math.max(MIN_FITTED_BAR, fitted) : blockSize * (blockAspectRatioProp ?? DEFAULT_ASPECT_RATIO);
+	const blockAspectRatio = blockWidth / blockSize;
 	const width = dates.length * (blockWidth + blockMargin) - blockMargin;
 	const height = blockSize;
 	const contextValue = useMemo(() => ({
@@ -154,8 +163,9 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 	return /* @__PURE__ */ jsx(StatusHeatmapContext, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
 			"data-slot": "status-heatmap",
-			className: cn("flex w-max max-w-full flex-col gap-2 p-4", className),
+			className: cn("flex flex-col gap-2", fits ? "w-full" : "w-max max-w-full", className),
 			style: {
 				fontSize,
 				...style
@@ -165,7 +175,7 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 		})
 	});
 };
-const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
+const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, selected = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
 	const { blockSize, blockWidth, blockMargin, blockRadius, labels, colors } = useStatusHeatmap();
 	const statusText = resolveStatusLabel(activity.value, labels.statuses);
 	const ariaLabel = (labels.cellLabel ?? "{{date}}: {{status}}").replace("{{date}}", activity.date).replace("{{status}}", statusText);
@@ -174,12 +184,14 @@ const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, onCe
 		ref,
 		"data-slot": "status-heatmap-block",
 		role: onCellClick ? "button" : "img",
+		"aria-pressed": onCellClick ? selected : void 0,
 		tabIndex: onCellClick ? 0 : -1,
 		"aria-label": ariaLabel,
 		className: cn("motion-safe:transition-opacity motion-safe:hover:opacity-70", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
 		"data-value": activity.value,
 		"data-date": activity.date,
 		"data-highlighted": highlighted || void 0,
+		"data-selected": selected || void 0,
 		height: blockSize,
 		rx: blockRadius,
 		ry: blockRadius,
@@ -188,6 +200,10 @@ const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, onCe
 		y: 0,
 		style: {
 			fill: getStatusFill(activity.value, colors, highlighted),
+			...selected ? {
+				stroke: "var(--foreground)",
+				strokeWidth: 2
+			} : {},
 			...styleProp
 		},
 		onClick: (event) => {
@@ -214,6 +230,7 @@ const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, onCe
 };
 StatusHeatmapBlock.displayName = "StatusHeatmapBlock";
 const StatusHeatmapBody = ({ hideDateLabels = false, labelInterval = 30, className, labelClassName, children, ...props }) => {
+	const navigation = useHeatmapNavigation();
 	const { data, dates, width, height, blockWidth, blockMargin, fontSize, dateFormat, locale, labels } = useStatusHeatmap();
 	const activityMap = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
@@ -234,15 +251,20 @@ const StatusHeatmapBody = ({ hideDateLabels = false, labelInterval = 30, classNa
 	const labelHeight = hideDateLabels ? 0 : labelFontSize * 2;
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "status-heatmap-body",
+		ref: navigation.ref,
 		className: cn("max-w-full overflow-x-auto overflow-y-hidden", className),
 		...props,
+		onKeyDown: (event) => {
+			props.onKeyDown?.(event);
+			if (!event.defaultPrevented) navigation.onKeyDown(event);
+		},
 		children: /* @__PURE__ */ jsxs("svg", {
 			role: "img",
 			"aria-label": labels.heatmapLabel ?? "Status heatmap",
 			className: "block overflow-visible rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-			height: height + labelHeight + 40,
-			viewBox: `-20 -20 ${width + 40} ${height + labelHeight + 40}`,
-			width: width + 40,
+			height: height + labelHeight + 6,
+			viewBox: `-3 -3 ${width + 6} ${height + labelHeight + 6}`,
+			width: width + 6,
 			children: [!hideDateLabels && /* @__PURE__ */ jsx("g", {
 				className: cn("fill-current font-mono", labelClassName),
 				children: dates.map((date, dayIndex) => {
@@ -292,7 +314,7 @@ const StatusHeatmapStat = ({ compute, label, className, children, ...props }) =>
 	});
 };
 const StatusHeatmapLegend = ({ labels: labelsProp, className, children, ...props }) => {
-	const { labels, statusValues, blockSize, blockWidth, blockRadius, colors } = useStatusHeatmap();
+	const { labels, statusValues, blockRadius, colors } = useStatusHeatmap();
 	const statuses = statusValues.map((value) => ({
 		value,
 		label: resolveStatusLabel(value, labelsProp ?? labels.statuses)
@@ -309,14 +331,14 @@ const StatusHeatmapLegend = ({ labels: labelsProp, className, children, ...props
 			className: "flex items-center gap-1",
 			children: [/* @__PURE__ */ jsx("svg", {
 				"aria-hidden": "true",
-				height: blockSize / 2,
-				width: blockWidth,
+				height: LEGEND_SWATCH,
+				width: LEGEND_SWATCH,
 				children: /* @__PURE__ */ jsx("rect", {
 					"data-value": status.value,
-					height: blockSize / 2,
+					height: LEGEND_SWATCH,
 					rx: blockRadius,
 					ry: blockRadius,
-					width: blockWidth,
+					width: LEGEND_SWATCH,
 					style: { fill: getStatusFill(status.value, colors) }
 				})
 			}), /* @__PURE__ */ jsx("span", {

package/dist/components/registry/heatmap/weekday-heatmap.d.ts

@@ -36,6 +36,10 @@ export type ColorConfig = {
 export type WeekdayHeatmapProps = HTMLAttributes<HTMLDivElement> & {
   data: WeekdayHourlyActivity[];
   weekStart?: Day;
+  /** Displayed hours, in order; defaults to the full day. */
+  hours?: readonly WeekdayHour[];
+  /** Displayed days, in order; defaults to the full week from weekStart. */
+  weekdays?: readonly WeekdayIndex[];
   use12Hour?: boolean;
   blockSize?: number;
   blockMargin?: number;
@@ -86,8 +90,10 @@ export type WeekdayHeatmapProps = HTMLAttributes<HTMLDivElement> & {
  * @param extraRow - Appends an aggregated row below the grid. `compute` receives all activities and must return 24 values (one per hour). Rendered through `renderExtraRow` on the body, or falls back to `children`.
  * @param extraColumn - Appends an aggregated column to the right of the grid. `compute` receives all activities and must return 7 values indexed by weekday 0–6. Rendered through `renderExtraColumn` on the body, or falls back to `children`.
  */
-export declare const WeekdayHeatmap: ({ data, weekStart, use12Hour, blockSize, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style, className, children, ...props }: WeekdayHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+export declare const WeekdayHeatmap: ({ data, weekStart, hours, weekdays: displayedWeekdays, use12Hour, blockSize: blockSizeProp, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style, className, children, ...props }: WeekdayHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
 export type WeekdayHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
+  /** The cell the page has picked: drawn with a ring and announced as pressed. */
+  selected?: boolean;
   activity: WeekdayHourlyActivityWithLevel;
   extra?: "row" | "column";
   highlighted?: boolean;
@@ -95,9 +101,9 @@ export type WeekdayHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
   onCellHover?: (activity: WeekdayHourlyActivityWithLevel | null) => void;
   className?: string;
 };
-export declare function WeekdayHeatmapBlock({ ref, activity, extra, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: WeekdayHeatmapBlockProps & {
+export declare function WeekdayHeatmapBlock({ ref, activity, extra, highlighted, selected, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: WeekdayHeatmapBlockProps & {
   ref?: React.RefObject<SVGRectElement | null>;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 export declare namespace WeekdayHeatmapBlock {
   var displayName: string;
 }