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

package/dist/components/registry/charts/line-chart-card.js

@@ -1,5 +1,5 @@
 "use client";
-import { ChartFrame } from "../../../lib/chart-frame.js";
+import { ChartFrame, endDot } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
 import { Line, LineChart } from "recharts";
 //#region src/components/registry/charts/line-chart-card.tsx
@@ -13,7 +13,7 @@ function LineChartCard({ curve = "monotone", ...props }) {
 			type: curve,
 			stroke: color,
 			strokeWidth: 2,
-			dot: false
+			dot: endDot(color, props.data.length)
 		}, key))
 	});
 }

package/dist/components/registry/dashboardcn/bar-list.js

@@ -20,7 +20,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 	const total = items.reduce((sum, item) => sum + item.value, 0);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "bar-list",
-		className: cn("@container/bar-list flex flex-col gap-1.5", className),
+		className: cn("@container/bar-list grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-1.5", className),
 		...props,
 		children: items.map((item) => {
 			const width = max > 0 ? item.value / max * 100 : 0;
@@ -29,16 +29,22 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 			const Label = item.href ? "a" : onItemClick ? "button" : "div";
 			return /* @__PURE__ */ jsxs("div", {
 				"data-slot": "bar-list-row",
-				className: "flex items-center gap-3 text-sm @max-sm/bar-list:items-start",
+				className: "col-span-2 grid grid-cols-subgrid items-center text-sm @max-sm/bar-list:items-start",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "relative flex h-8 min-w-0 flex-1 items-center @max-sm/bar-list:h-auto @max-sm/bar-list:min-h-8 @max-sm/bar-list:items-start @max-sm/bar-list:pb-3",
 					children: [
 						/* @__PURE__ */ jsx("div", {
+							"data-slot": "bar-list-track",
+							"aria-hidden": "true",
+							className: "bg-muted/60 absolute inset-0 rounded-md @max-sm/bar-list:inset-y-auto @max-sm/bar-list:bottom-0 @max-sm/bar-list:h-1.5"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "bar-list-bar",
 							"aria-hidden": "true",
 							className: "absolute inset-y-0 left-0 rounded-md transition-[width] duration-300 @max-sm/bar-list:inset-y-auto @max-sm/bar-list:bottom-0 @max-sm/bar-list:h-1.5",
 							style: {
 								width: `${width}%`,
-								backgroundColor: `color-mix(in oklab, ${color} 20%, transparent)`
+								backgroundColor: item.detail ? "color-mix(in oklab, var(--muted-foreground) 20%, transparent)" : `color-mix(in oklab, ${color} 32%, transparent)`
 							}
 						}),
 						/* @__PURE__ */ jsxs(Label, {
@@ -47,7 +53,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 								type: "button",
 								onClick: () => onItemClick(item)
 							} : {},
-							className: cn("relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline"),
+							className: cn("text-foreground relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline"),
 							children: [item.icon ? /* @__PURE__ */ jsx("span", {
 								className: "text-muted-foreground shrink-0 [&>svg]:size-4",
 								children: item.icon
@@ -63,7 +69,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 						}) : null
 					]
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex shrink-0 items-center gap-2 tabular-nums",
+					className: "flex items-center justify-end gap-2 tabular-nums",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "font-medium",
 						children: format(item.value)

package/dist/components/registry/dashboardcn/kpi-row-card.js

@@ -39,7 +39,7 @@ function MetricStrip({ title, description, action, items, footer, className, ...
 					className: "-mt-px -ml-px flex flex-wrap",
 					children: items.map((item) => /* @__PURE__ */ jsxs("div", {
 						"data-slot": "metric-strip-item",
-						className: cn("flex min-w-0 flex-col gap-1 border-t border-l px-4 py-3", columns),
+						className: cn("flex min-w-0 flex-col gap-1.5 border-t border-l px-4 py-4", columns),
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "truncate text-xs text-muted-foreground",
 							children: item.label
@@ -64,7 +64,7 @@ function MetricStrip({ title, description, action, items, footer, className, ...
 								data: item.trend,
 								variant: "line",
 								color: trendColor(item.change),
-								className: "h-8 w-16 shrink-0"
+								className: "h-9 w-20 shrink-0"
 							})]
 						})]
 					}, item.label))

package/dist/components/registry/dashboardcn/sparkline.d.ts

@@ -5,9 +5,13 @@ export interface SparklineProps extends React$1.ComponentProps<"div"> {
   /** Series to plot, oldest first. */
   data: number[];
   variant?: "area" | "line";
-  /** A chart slot, or var(--positive) or var(--negative) for a gain or a loss. Defaults to var(--chart-1). */
+  /**
+   * The last step and the dot on the latest value: a chart slot, or var(--positive) or var(--negative) for a gain or
+   * a loss. Defaults to var(--chart-1). The run before it is muted.
+   */
   color?: ChartColor;
   curve?: "monotone" | "linear" | "step";
+  /** The run's line; the last step is 2px. */
   strokeWidth?: number;
   /** Animate after hydration and when data changes. Respects reduced motion. */
   animate?: boolean;

package/dist/components/registry/dashboardcn/sparkline.js

@@ -15,24 +15,41 @@ function getReducedMotionSnapshot() {
 function getReducedMotionServerSnapshot() {
 	return true;
 }
-function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "monotone", strokeWidth = 1.5, animate = true, animationDuration = 500, className, ...props }) {
+function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "linear", strokeWidth = 1.25, animate = true, animationDuration = 500, className, ...props }) {
 	const id = React$1.useId();
 	const reducedMotion = React$1.useSyncExternalStore(subscribeToReducedMotion, getReducedMotionSnapshot, getReducedMotionServerSnapshot);
 	const animationActive = animate && !reducedMotion;
 	const points = React$1.useMemo(() => data.map((y, i) => ({
 		i,
-		y
+		y,
+		now: i >= data.length - 2 ? y : void 0
 	})), [data]);
 	const margin = {
-		top: 2,
-		right: 0,
-		bottom: 2,
+		top: 3,
+		right: 3,
+		bottom: 3,
 		left: 0
 	};
 	const axis = /* @__PURE__ */ jsx(YAxis, {
 		hide: true,
 		domain: ["dataMin", "dataMax"]
 	});
+	const now = /* @__PURE__ */ jsx(Line, {
+		className: "sparkline-now",
+		type: curve,
+		dataKey: "now",
+		stroke: color,
+		strokeWidth: 2,
+		dot: (dot) => dot.index === data.length - 1 ? /* @__PURE__ */ jsx("circle", {
+			cx: dot.cx,
+			cy: dot.cy,
+			r: 3,
+			fill: color
+		}, "now") : /* @__PURE__ */ jsx("g", {}, dot.index),
+		isAnimationActive: animationActive,
+		animationBegin: animationDuration,
+		animationDuration: 150
+	});
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sparkline",
 		"aria-hidden": "true",
@@ -44,16 +61,20 @@ function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "
 			children: variant === "line" ? /* @__PURE__ */ jsxs(LineChart, {
 				data: points,
 				margin,
-				children: [axis, /* @__PURE__ */ jsx(Line, {
-					type: curve,
-					dataKey: "y",
-					stroke: color,
-					strokeWidth,
-					dot: false,
-					isAnimationActive: animationActive,
-					animationDuration,
-					animationEasing: "ease-out"
-				})]
+				children: [
+					axis,
+					/* @__PURE__ */ jsx(Line, {
+						type: curve,
+						dataKey: "y",
+						stroke: "var(--muted-foreground)",
+						strokeWidth,
+						dot: false,
+						isAnimationActive: animationActive,
+						animationDuration,
+						animationEasing: "ease-out"
+					}),
+					now
+				]
 			}) : /* @__PURE__ */ jsxs(AreaChart, {
 				data: points,
 				margin,
@@ -68,7 +89,7 @@ function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "
 						children: [/* @__PURE__ */ jsx("stop", {
 							offset: "0%",
 							stopColor: color,
-							stopOpacity: .3
+							stopOpacity: .18
 						}), /* @__PURE__ */ jsx("stop", {
 							offset: "100%",
 							stopColor: color,
@@ -78,14 +99,15 @@ function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "
 					/* @__PURE__ */ jsx(Area, {
 						type: curve,
 						dataKey: "y",
-						stroke: color,
+						stroke: "var(--muted-foreground)",
 						strokeWidth,
 						fill: `url(#${id})`,
 						dot: false,
 						isAnimationActive: animationActive,
 						animationDuration,
 						animationEasing: "ease-out"
-					})
+					}),
+					now
 				]
 			})
 		})

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

@@ -75,8 +75,10 @@ export type CalendarHeatmapProps = HTMLAttributes<HTMLDivElement> & {
  * @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.
  */
-export declare const CalendarHeatmap: ({ data, weekStart, continuousMonths, hasEmptyColumn, blockSize, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, style, className, children, ...props }: CalendarHeatmapProps) => 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 CalendarHeatmap: ({ data, weekStart, continuousMonths, hasEmptyColumn, blockSize: blockSizeProp, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, style, className, children, ...props }: CalendarHeatmapProps) => 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 CalendarHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
+  /** The cell the page has picked: drawn with a ring and announced as pressed. */
+  selected?: boolean;
   activity: ActivityWithLevel;
   dayIndex: number;
   weekIndex: number;
@@ -84,7 +86,7 @@ export type CalendarHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
   onCellClick?: (activity: ActivityWithLevel) => void;
   onCellHover?: (activity: ActivityWithLevel | null) => void;
 };
-export declare function CalendarHeatmapBlock({ ref, activity, dayIndex, weekIndex, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: CalendarHeatmapBlockProps & {
+export declare function CalendarHeatmapBlock({ ref, activity, dayIndex, weekIndex, highlighted, selected, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: CalendarHeatmapBlockProps & {
   ref?: React.RefObject<SVGRectElement | null>;
 }): import("react").JSX.Element;
 export declare namespace CalendarHeatmapBlock {

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

@@ -1,7 +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);
@@ -41,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);
@@ -132,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}.`);
@@ -159,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) => {
@@ -168,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
@@ -202,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);
@@ -236,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;
@@ -290,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", className),
+			className: cn("flex flex-col gap-2", blockSizeProp === void 0 ? "w-full" : "w-max max-w-full", className),
 			style: {
 				fontSize,
 				...style
@@ -301,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));
@@ -309,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),
@@ -316,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,
@@ -324,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) => {
@@ -351,17 +377,17 @@ 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 navigation = useHeatmapNavigation();
-	const { yearRows, blockSize, blockWidth, blockMargin, labels, labelHeight, fontSize, weekStart, data } = useCalendarHeatmap();
-	const weekdayLabelWidth = hideWeekdayLabels ? 0 : 40;
-	const strokePadding = 3;
+	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)
 			};
 		});
 	}, [
@@ -371,9 +397,17 @@ 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,
@@ -384,7 +418,7 @@ const CalendarHeatmapBody = ({ hideMonthLabels = false, hideWeekdayLabels = fals
 			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
 			}),
@@ -465,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);
@@ -482,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,14 +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",
@@ -52,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);
@@ -85,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",
@@ -113,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(() => ({
@@ -155,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", className),
+			className: cn("flex flex-col gap-2", fits ? "w-full" : "w-max max-w-full", className),
 			style: {
 				fontSize,
 				...style
@@ -166,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);
@@ -175,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,
@@ -189,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) => {
@@ -247,9 +262,9 @@ const StatusHeatmapBody = ({ hideDateLabels = false, labelInterval = 30, classNa
 			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) => {
@@ -299,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)
@@ -316,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", {