@siyahi/ui 0.1.9-next.3 → 0.1.9-next.31

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

@@ -1,13 +1,15 @@
 import { cn } from "../../../lib/utils.js";
+import { useElementWidth } from "../../../lib/use-element-width.js";
+import { useHeatmapNavigation } from "../../../lib/heatmap-navigation.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, useId, 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) 30%, transparent)"
 };
 const SEMANTIC_KEYS = {
 	0: "noData",
@@ -45,12 +47,32 @@ const resolveStatusLabel = (value, labels) => {
 		default: return `Status ${value}`;
 	}
 };
-const getStatusFill = (value, colors, highlighted = false) => {
-	const base = resolveColor(value, colors);
-	if (!highlighted) return base;
-	return `color-mix(in oklch, ${base} 60%, transparent)`;
-};
+const DEGRADED = 2;
+/** A degraded day's paint: amber in the lower half of the bar, the healthy grey above it. */
+const DegradedGradient = ({ id, colors, healthyValue }) => /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+	id,
+	x1: "0",
+	y1: "0",
+	x2: "0",
+	y2: "1",
+	children: [/* @__PURE__ */ jsx("stop", {
+		offset: "0.5",
+		style: { stopColor: resolveColor(healthyValue, colors) }
+	}), /* @__PURE__ */ jsx("stop", {
+		offset: "0.5",
+		style: { stopColor: resolveColor(DEGRADED, colors) }
+	})]
+}) });
+const NO_DATA = 0;
+/** A no-data day is drawn hollow unless the page gave that state a colour of its own. */
+const isHollow = (value, colors) => value === NO_DATA && colors?.[NO_DATA] === void 0 && colors?.noData === void 0;
+/** The outline a day carries in the field-edge colour: solid round a healthy day, dashed round a day with no data. */
+const edgeOf = (value, healthyValue, colors) => isHollow(value, colors) ? "dashed" : value === healthyValue ? "solid" : null;
+const blockPaint = (value, degradedId, colors) => value === DEGRADED ? { fill: `url(#${degradedId})` } : { fill: isHollow(value, colors) ? "transparent" : resolveColor(value, colors) };
 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 +106,17 @@ 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 degradedId = `status-degraded-${useId().replace(/[^\w-]/g, "")}`;
 	const labels = useMemo(() => ({
 		statuses: {
 			noData: "No Data",
@@ -112,10 +136,14 @@ 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(() => ({
+		degradedId,
 		data,
 		dates,
 		blockMargin,
@@ -133,6 +161,7 @@ const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin
 		locale,
 		colors
 	}), [
+		degradedId,
 		data,
 		dates,
 		blockMargin,
@@ -154,8 +183,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,8 +195,9 @@ 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 { blockSize, blockWidth, blockMargin, blockRadius, labels, colors } = useStatusHeatmap();
+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, degradedId, healthyValue } = useStatusHeatmap();
+	const edge = edgeOf(activity.value, healthyValue, colors);
 	const statusText = resolveStatusLabel(activity.value, labels.statuses);
 	const ariaLabel = (labels.cellLabel ?? "{{date}}: {{status}}").replace("{{date}}", activity.date).replace("{{status}}", statusText);
 	const xPosition = (blockWidth + blockMargin) * dayIndex;
@@ -174,20 +205,23 @@ 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),
+		className: cn(edge && "stroke-input stroke-1", "hover:stroke-foreground hover:stroke-1", highlighted && "stroke-foreground stroke-1", selected && "stroke-foreground stroke-2 hover:stroke-2", onCellClick && "cursor-pointer", 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,
 		width: blockWidth,
+		strokeDasharray: edge === "dashed" ? "2 2" : void 0,
 		x: xPosition,
 		y: 0,
 		style: {
-			fill: getStatusFill(activity.value, colors, highlighted),
+			...blockPaint(activity.value, degradedId, colors),
 			...styleProp
 		},
 		onClick: (event) => {
@@ -214,7 +248,8 @@ const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, onCe
 };
 StatusHeatmapBlock.displayName = "StatusHeatmapBlock";
 const StatusHeatmapBody = ({ hideDateLabels = false, labelInterval = 30, className, labelClassName, children, ...props }) => {
-	const { data, dates, width, height, blockWidth, blockMargin, fontSize, dateFormat, locale, labels } = useStatusHeatmap();
+	const navigation = useHeatmapNavigation();
+	const { data, dates, width, height, blockWidth, blockMargin, fontSize, dateFormat, locale, labels, colors, degradedId, healthyValue } = useStatusHeatmap();
 	const activityMap = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
 		data.forEach((activity) => {
@@ -234,40 +269,53 @@ 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,
-			children: [!hideDateLabels && /* @__PURE__ */ jsx("g", {
-				className: cn("fill-current font-mono", labelClassName),
-				children: dates.map((date, dayIndex) => {
-					const isFirst = dayIndex === 0;
-					const isLast = dayIndex === dates.length - 1;
-					if (dayIndex % labelInterval !== 0 && !isLast) return null;
-					const blockLeft = (blockWidth + blockMargin) * dayIndex;
-					const xPosition = isFirst ? blockLeft : isLast ? blockLeft + blockWidth : blockLeft + blockWidth / 2;
-					const anchor = isFirst ? "start" : isLast ? "end" : "middle";
-					return /* @__PURE__ */ jsx("text", {
-						x: xPosition,
-						y: height + labelFontSize,
-						dominantBaseline: "hanging",
-						textAnchor: anchor,
-						style: { fontSize: `${labelFontSize}px` },
-						children: format(new Date(date), dateFormat, { locale })
-					}, `date-${date}`);
+			height: height + labelHeight + 6,
+			viewBox: `-3 -3 ${width + 6} ${height + labelHeight + 6}`,
+			width: width + 6,
+			children: [
+				/* @__PURE__ */ jsx(DegradedGradient, {
+					id: degradedId,
+					colors,
+					healthyValue
+				}),
+				!hideDateLabels && /* @__PURE__ */ jsx("g", {
+					className: cn("fill-current font-mono", labelClassName),
+					children: dates.map((date, dayIndex) => {
+						const isFirst = dayIndex === 0;
+						const isLast = dayIndex === dates.length - 1;
+						if (dayIndex % labelInterval !== 0 && !isLast) return null;
+						const blockLeft = (blockWidth + blockMargin) * dayIndex;
+						const xPosition = isFirst ? blockLeft : isLast ? blockLeft + blockWidth : blockLeft + blockWidth / 2;
+						const anchor = isFirst ? "start" : isLast ? "end" : "middle";
+						return /* @__PURE__ */ jsx("text", {
+							x: xPosition,
+							y: height + labelFontSize,
+							dominantBaseline: "hanging",
+							textAnchor: anchor,
+							style: { fontSize: `${labelFontSize}px` },
+							children: format(new Date(date), dateFormat, { locale })
+						}, `date-${date}`);
+					})
+				}),
+				allActivities.map((activity, dayIndex) => {
+					const key = activity.date;
+					return /* @__PURE__ */ jsx(Fragment$1, { children: children({
+						activity,
+						dayIndex
+					}) }, key);
 				})
-			}), allActivities.map((activity, dayIndex) => {
-				const key = activity.date;
-				return /* @__PURE__ */ jsx(Fragment$1, { children: children({
-					activity,
-					dayIndex
-				}) }, key);
-			})]
+			]
 		})
 	});
 };
@@ -292,7 +340,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, degradedId, healthyValue } = useStatusHeatmap();
 	const statuses = statusValues.map((value) => ({
 		value,
 		label: resolveStatusLabel(value, labelsProp ?? labels.statuses)
@@ -300,25 +348,38 @@ const StatusHeatmapLegend = ({ labels: labelsProp, className, children, ...props
 	return /* @__PURE__ */ jsx("fieldset", {
 		"data-slot": "status-heatmap-legend",
 		"aria-label": labels.legendLabel ?? "Status legend",
-		className: cn("ml-auto flex items-center gap-1", className),
+		className: cn("ml-auto flex flex-wrap items-center gap-x-3 gap-y-1", className),
 		...props,
 		children: statuses.map((status) => children ? /* @__PURE__ */ jsx(Fragment$1, { children: children({
 			value: status.value,
 			label: status.label
 		}) }, `status-${status.value}`) : /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1",
-			children: [/* @__PURE__ */ jsx("svg", {
+			children: [/* @__PURE__ */ jsxs("svg", {
 				"aria-hidden": "true",
-				height: blockSize / 2,
-				width: blockWidth,
-				children: /* @__PURE__ */ jsx("rect", {
+				height: LEGEND_SWATCH,
+				width: LEGEND_SWATCH,
+				children: [status.value === DEGRADED && /* @__PURE__ */ jsx(DegradedGradient, {
+					id: `${degradedId}-legend`,
+					colors,
+					healthyValue
+				}), /* @__PURE__ */ jsx("rect", {
 					"data-value": status.value,
-					height: blockSize / 2,
+					...edgeOf(status.value, healthyValue, colors) ? {
+						x: .5,
+						y: .5,
+						height: 9,
+						width: 9,
+						className: "stroke-input",
+						strokeDasharray: edgeOf(status.value, healthyValue, colors) === "dashed" ? "2 1" : void 0
+					} : {
+						height: LEGEND_SWATCH,
+						width: LEGEND_SWATCH
+					},
 					rx: blockRadius,
 					ry: blockRadius,
-					width: blockWidth,
-					style: { fill: getStatusFill(status.value, colors) }
-				})
+					style: blockPaint(status.value, `${degradedId}-legend`, colors)
+				})]
 			}), /* @__PURE__ */ jsx("span", {
 				className: "font-medium text-muted-foreground text-xs",
 				children: status.label

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;
 }