@siyahi/ui 0.0.0-stage → 0.1.0-next.4

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

@@ -0,0 +1,497 @@
+import { cn } from "../../../lib/utils.js";
+import { Fragment, createContext, use, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+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);
+const getLevelFill = (level, levels, isNormalized, highlighted = false, colors) => {
+	const emptyColor = colors?.empty ?? "var(--color-secondary)";
+	const scaleColor = colors?.scale ?? "var(--color-chart-1)";
+	if (level === 0) return emptyColor;
+	const steps = colorStepCount(levels, isNormalized);
+	const opacity = steps === 1 ? 100 : Math.round(20 + (level - 1) * 80 / (steps - 1));
+	return `color-mix(in oklch, ${scaleColor} ${highlighted ? Math.round(opacity * .6) : opacity}%, transparent)`;
+};
+const calculateLevel = (value, minValue, maxValue, levels, isNormalized) => {
+	const steps = colorStepCount(levels, isNormalized);
+	if (!Number.isFinite(value)) return isNormalized ? 1 : 0;
+	if (isNormalized) {
+		if (maxValue <= minValue) return 1;
+		const percentage = (value - minValue) / (maxValue - minValue);
+		return Math.max(1, Math.min(steps, Math.ceil(percentage * steps)));
+	}
+	if (value <= 0 || maxValue <= 0) return 0;
+	const percentage = value / maxValue;
+	return Math.max(1, Math.min(steps, Math.ceil(percentage * steps)));
+};
+const generateMonthLabels = (locale) => {
+	return Array.from({ length: 12 }, (_, i) => {
+		const date = new Date(2e3, i, 1);
+		if (locale) return format(date, "LLL", { locale });
+		return date.toLocaleString("en-US", { month: "short" });
+	});
+};
+const generateWeekdayLabels = (locale) => {
+	return Array.from({ length: 7 }, (_, i) => {
+		const date = new Date(2e3, 0, 2 + i);
+		if (locale) return format(date, "EEE", { locale });
+		return date.toLocaleString("en-US", { weekday: "short" });
+	});
+};
+const EMPTY_STYLE = {};
+const LABEL_MARGIN = 8;
+const CalendarHeatmapContext = createContext(null);
+const useCalendarHeatmap = () => {
+	const context = use(CalendarHeatmapContext);
+	if (!context) throw new Error("CalendarHeatmap components must be used within a CalendarHeatmap");
+	return context;
+};
+const fillHoles = (activities) => {
+	if (activities.length === 0) return [];
+	const sortedActivities = [...activities].sort((a, b) => a.date.localeCompare(b.date));
+	const calendar = new Map(activities.map((a) => [a.date, a]));
+	const firstActivity = sortedActivities[0];
+	const lastActivity = sortedActivities.at(-1);
+	if (!lastActivity) return [];
+	return eachDayOfInterval({
+		start: parseISO(firstActivity.date),
+		end: parseISO(lastActivity.date)
+	}).map((day) => {
+		const date = formatISO(day, { representation: "date" });
+		if (calendar.has(date)) return calendar.get(date);
+		return {
+			date,
+			value: 0,
+			level: 0
+		};
+	});
+};
+const groupByYearAndMonth = (activities, weekStart = 0, hasEmptyColumn = false) => {
+	if (activities.length === 0) return [];
+	const normalizedActivities = fillHoles(activities);
+	const activitiesByYearMonth = /* @__PURE__ */ new Map();
+	for (const activity of normalizedActivities) {
+		const date = parseISO(activity.date);
+		const year = getYear(date);
+		const month = getMonth(date);
+		const key = `${year}-${String(month).padStart(2, "0")}`;
+		if (!activitiesByYearMonth.has(key)) activitiesByYearMonth.set(key, []);
+		activitiesByYearMonth.get(key)?.push(activity);
+	}
+	const sortedKeys = Array.from(activitiesByYearMonth.keys()).sort();
+	if (sortedKeys.length === 0) return [];
+	const [firstYearStr, firstMonthStr] = sortedKeys[0].split("-");
+	const startYear = parseInt(firstYearStr, 10);
+	const startMonth = parseInt(firstMonthStr, 10);
+	const yearRows = [];
+	let currentYear = startYear;
+	let currentMonth = startMonth;
+	while (true) {
+		const rowWeeks = [];
+		let hasData = false;
+		for (let monthOffset = 0; monthOffset < 12; monthOffset++) {
+			const monthIndex = (currentMonth + monthOffset) % 12;
+			const yearOffset = Math.floor((currentMonth + monthOffset) / 12);
+			const key = `${currentYear + yearOffset}-${String(monthIndex).padStart(2, "0")}`;
+			const monthActivities = activitiesByYearMonth.get(key) || [];
+			if (monthActivities.length > 0) {
+				hasData = true;
+				const firstActivity = monthActivities[0];
+				const firstDate = parseISO(firstActivity.date);
+				const firstCalendarDate = getDay(firstDate) === weekStart ? firstDate : subWeeks(nextDay(firstDate, weekStart), 1);
+				const paddedActivities = [...new Array(differenceInCalendarDays(firstDate, firstCalendarDate)).fill(void 0), ...monthActivities];
+				const numberOfWeeks = Math.ceil(paddedActivities.length / 7);
+				const monthWeeks = new Array(numberOfWeeks).fill(void 0).map((_, weekIndex) => paddedActivities.slice(weekIndex * 7, weekIndex * 7 + 7));
+				if (hasEmptyColumn && rowWeeks.length > 0) rowWeeks.push(new Array(7).fill(void 0));
+				rowWeeks.push(...monthWeeks);
+			}
+		}
+		if (!hasData) break;
+		yearRows.push({
+			year: currentYear,
+			startMonth: currentMonth,
+			weeks: rowWeeks
+		});
+		currentYear++;
+		currentMonth = startMonth;
+		if (!sortedKeys.some((key) => {
+			const [yearStr] = key.split("-");
+			return parseInt(yearStr, 10) >= currentYear;
+		})) break;
+	}
+	return yearRows;
+};
+const groupContinuous = (activities, weekStart = 0) => {
+	if (activities.length === 0) return [];
+	const normalizedActivities = fillHoles(activities);
+	const first = normalizedActivities[0];
+	const firstDate = parseISO(first.date);
+	const firstCalendarDate = getDay(firstDate) === weekStart ? firstDate : subWeeks(nextDay(firstDate, weekStart), 1);
+	const leadingPad = differenceInCalendarDays(firstDate, firstCalendarDate);
+	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,
+		startMonth: 0,
+		weeks
+	}));
+};
+const getMonthLabels = (weeks, monthNames = generateMonthLabels()) => {
+	return weeks.reduce((labels, week, weekIndex) => {
+		const firstActivity = week.find((activity) => activity !== void 0);
+		if (!firstActivity) return labels;
+		const month = monthNames[getMonth(parseISO(firstActivity.date))];
+		if (!month) {
+			const monthName = new Date(firstActivity.date).toLocaleString("en-US", { month: "short" });
+			throw new Error(`Unexpected error: undefined month label for ${monthName}.`);
+		}
+		const prevLabel = labels.at(-1);
+		if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) return labels.concat({
+			weekIndex,
+			label: month
+		});
+		return labels;
+	}, []).filter(({ weekIndex }, index, labels) => {
+		const minWeeks = 3;
+		if (index === 0) return labels[1] && labels[1].weekIndex - weekIndex >= minWeeks;
+		if (index === labels.length - 1) return weeks.slice(weekIndex).length >= minWeeks;
+		return true;
+	});
+};
+/**
+* Calendar Heatmap
+*
+* A GitHub-style contribution calendar showing daily activity over months and years.
+* Each cell represents one day, arranged in weeks (rows) and months (columns).
+*
+* @example
+* ```tsx
+* <CalendarHeatmap data={data} weekStart={1} continuousMonths>
+*   <CalendarHeatmapBody>
+*     {({ activity, dayIndex, weekIndex }) => (
+*       <CalendarHeatmapBlock
+*         activity={activity}
+*         dayIndex={dayIndex}
+*         weekIndex={weekIndex}
+*       />
+*     )}
+*   </CalendarHeatmapBody>
+*   <CalendarHeatmapFooter>
+*     <CalendarHeatmapStat />
+*     <CalendarHeatmapLegend />
+*   </CalendarHeatmapFooter>
+* </CalendarHeatmap>
+* ```
+*
+* @param data - Array of activities with date (YYYY-MM-DD) and value
+* @param weekStart - First day of week (0=Sunday, 1=Monday). Default: 0
+* @param continuousMonths - Display months continuously vs. grouped by year. Default: true
+* @param hasEmptyColumn - Add empty column between months. Default: false
+* @param blockAspectRatio - Width/height ratio of blocks. Default: 1
+* @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 levels = Math.max(1, levelsProp);
+	const dataWithLevels = useMemo(() => {
+		if (data.length === 0) return [];
+		const maxCount = data.reduce((max, d) => Math.max(max, d.value), 1);
+		const minCount = isNormalized ? data.reduce((min, d) => Math.min(min, d.value), Infinity) : 0;
+		return data.map((activity) => ({
+			...activity,
+			level: calculateLevel(activity.value, minCount, maxCount, levels, isNormalized)
+		}));
+	}, [
+		data,
+		levels,
+		isNormalized
+	]);
+	const yearRows = useMemo(() => continuousMonths ? groupContinuous(dataWithLevels, weekStart) : groupByYearAndMonth(dataWithLevels, weekStart, hasEmptyColumn), [
+		dataWithLevels,
+		weekStart,
+		hasEmptyColumn,
+		continuousMonths
+	]);
+	const weeks = useMemo(() => yearRows.flatMap((r) => r.weeks), [yearRows]);
+	const labels = useMemo(() => ({
+		months: generateMonthLabels(locale),
+		weekdays: generateWeekdayLabels(locale),
+		cellLabel: "{{date}}: {{value}} contributions",
+		heatmapLabel: "Contribution heatmap for {{year}}",
+		legendLabel: "Activity intensity legend",
+		legendLevelLabel: "{{level}} contributions",
+		...labelsProp
+	}), [locale, labelsProp]);
+	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 blockWidth = blockSize * blockAspectRatio;
+	const width = weeks.length * (blockWidth + blockMargin) - blockMargin;
+	const height = labelHeight + (blockSize + blockMargin) * 7 - blockMargin;
+	const contextValue = useMemo(() => ({
+		data: dataWithLevels,
+		weeks,
+		yearRows,
+		blockMargin,
+		blockRadius,
+		blockSize,
+		blockAspectRatio,
+		blockWidth,
+		fontSize,
+		labels,
+		labelHeight,
+		levels,
+		isNormalized,
+		totalCount,
+		weekStart,
+		year,
+		width,
+		height,
+		hasEmptyColumn,
+		continuousMonths,
+		locale,
+		colors
+	}), [
+		dataWithLevels,
+		weeks,
+		yearRows,
+		blockMargin,
+		blockRadius,
+		blockSize,
+		blockAspectRatio,
+		blockWidth,
+		fontSize,
+		labels,
+		labelHeight,
+		levels,
+		isNormalized,
+		totalCount,
+		weekStart,
+		year,
+		width,
+		height,
+		hasEmptyColumn,
+		continuousMonths,
+		locale,
+		colors
+	]);
+	if (data.length === 0) return emptyState ? emptyState : null;
+	return /* @__PURE__ */ jsx(CalendarHeatmapContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "calendar-heatmap",
+			className: cn("flex w-max max-w-full flex-col gap-2 p-4", className),
+			style: {
+				fontSize,
+				...style
+			},
+			...props,
+			children
+		})
+	});
+};
+const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted = 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));
+	return /* @__PURE__ */ jsx("rect", {
+		ref,
+		"data-slot": "calendar-heatmap-block",
+		role: onCellClick ? "button" : "img",
+		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-level": level,
+		"data-highlighted": highlighted || void 0,
+		height: blockSize,
+		rx: blockRadius,
+		ry: blockRadius,
+		width: blockWidth,
+		x: (blockWidth + blockMargin) * weekIndex,
+		y: labelHeight + (blockSize + blockMargin) * dayIndex,
+		style: {
+			fill: getLevelFill(level, levels, isNormalized, highlighted, colors),
+			...styleProp
+		},
+		onClick: (event) => {
+			onCellClick?.(activity);
+			onClick?.(event);
+		},
+		onKeyDown: (event) => {
+			if (onCellClick && (event.key === "Enter" || event.key === " ")) {
+				event.preventDefault();
+				onCellClick(activity);
+			}
+			onKeyDown?.(event);
+		},
+		onMouseEnter: (event) => {
+			onCellHover?.(activity);
+			onMouseEnter?.(event);
+		},
+		onMouseLeave: (event) => {
+			onCellHover?.(null);
+			onMouseLeave?.(event);
+		},
+		...props
+	});
+};
+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 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)
+			};
+		});
+	}, [
+		yearRows,
+		blockSize,
+		blockWidth,
+		blockMargin,
+		labelHeight,
+		labels.months,
+		data
+	]);
+	const totalWidth = weekdayLabelWidth + Math.max(...rowData.map((r) => r.width)) + 6;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "calendar-heatmap-body",
+		className: cn("flex max-w-full flex-col gap-6 overflow-x-auto overflow-y-hidden py-4", className),
+		...props,
+		children: rowData.map(({ yearRow, height, monthLabels, yearTotalCount }) => /* @__PURE__ */ jsxs("div", { children: [
+			!hideYearLabels && /* @__PURE__ */ jsx("div", {
+				className: cn("mb-2 text-muted-foreground", yearClassName),
+				children: yearRow.year
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				role: "img",
+				"aria-label": (labels.heatmapLabel ?? "Contribution heatmap for {{year}}").replace("{{year}}", String(yearRow.year)),
+				className: "block overflow-visible rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				height: height + 6,
+				viewBox: `0 0 ${totalWidth} ${height + 6}`,
+				width: totalWidth,
+				children: /* @__PURE__ */ jsxs("g", {
+					transform: `translate(0, ${strokePadding})`,
+					children: [
+						!hideMonthLabels && /* @__PURE__ */ jsx("g", {
+							className: cn("fill-current font-mono", labelClassName),
+							children: monthLabels.map(({ label, weekIndex }) => /* @__PURE__ */ jsx("text", {
+								dominantBaseline: "hanging",
+								x: weekdayLabelWidth + strokePadding + (blockWidth + blockMargin) * weekIndex,
+								style: { fontSize: `${fontSize * .75}px` },
+								children: label
+							}, `${yearRow.year}-${weekIndex}`))
+						}),
+						!hideWeekdayLabels && /* @__PURE__ */ jsx("g", {
+							className: cn("fill-current font-mono text-xs", labelClassName),
+							children: labels.weekdays?.map((label, dayIndex) => {
+								const adjustedIndex = (dayIndex + weekStart) % 7;
+								const adjustedLabel = labels.weekdays?.[adjustedIndex] || label;
+								return /* @__PURE__ */ jsx("text", {
+									x: 0,
+									y: labelHeight + (blockSize + blockMargin) * dayIndex + blockSize / 2,
+									dominantBaseline: "middle",
+									textAnchor: "start",
+									style: { fontSize: `${fontSize * .75}px` },
+									children: adjustedLabel
+								}, `weekday-${yearRow.year}-${label}`);
+							})
+						}),
+						/* @__PURE__ */ jsx("g", {
+							transform: `translate(${weekdayLabelWidth + strokePadding}, 0)`,
+							children: yearRow.weeks.map((week, weekIndex) => week.map((activity, dayIndex) => {
+								if (!activity) return null;
+								return /* @__PURE__ */ jsx(Fragment, { children: children({
+									activity,
+									dayIndex,
+									weekIndex
+								}) }, `${yearRow.year}-${activity.date}`);
+							}))
+						})
+					]
+				})
+			}),
+			renderYearFooter?.({
+				year: yearRow.year,
+				totalCount: yearTotalCount
+			})
+		] }, `year-row-${yearRow.year}`))
+	});
+};
+const CalendarHeatmapFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "calendar-heatmap-footer",
+	className: cn("flex flex-wrap gap-1 whitespace-nowrap sm:gap-x-4", className),
+	...props
+});
+const CalendarHeatmapStat = ({ compute, label, className, children, ...props }) => {
+	const { data, totalCount, year, labels } = useCalendarHeatmap();
+	const value = compute ? compute(data) : totalCount;
+	if (children) return /* @__PURE__ */ jsx(Fragment$1, { children: children({
+		value,
+		data,
+		year
+	}) });
+	const template = label ?? labels.stat ?? "{{value}} contributions in {{year}}";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "calendar-heatmap-stat",
+		className: cn("text-muted-foreground tabular-nums", className),
+		...props,
+		children: template.replace("{{value}}", String(value)).replace("{{year}}", String(year))
+	});
+};
+const CalendarHeatmapLegend = ({ labels: labelsProp, className, children, ...props }) => {
+	const { levels, isNormalized, blockSize, blockWidth, 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);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"data-slot": "calendar-heatmap-legend",
+		"aria-label": labels.legendLabel ?? "Activity intensity legend",
+		className: cn("ml-auto flex items-center gap-1 text-muted-foreground", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "mr-1 font-medium text-xs",
+				children: lessLabel
+			}),
+			legendLevels.map((level) => children ? /* @__PURE__ */ jsx(Fragment, { 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,
+				children: /* @__PURE__ */ jsx("rect", {
+					"data-level": level,
+					height: blockSize,
+					rx: blockRadius,
+					ry: blockRadius,
+					width: blockWidth,
+					style: { fill: getLevelFill(level, levels, isNormalized, false, colors) }
+				})
+			}, `legend-level-${level}`)),
+			/* @__PURE__ */ jsx("span", {
+				className: "ml-1 font-medium text-xs",
+				children: moreLabel
+			})
+		]
+	});
+};
+//#endregion
+export { CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat };

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

@@ -0,0 +1,120 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { Locale } from "date-fns";
+//#region src/components/registry/heatmap/status-heatmap.d.ts
+export type StatusValue = number;
+export type StatusActivity = {
+  date: string;
+  value: StatusValue;
+};
+export type StatusHeatmapLabels = {
+  statuses?: Record<number, string> & {
+    noData?: string;
+    critical?: string;
+    degraded?: string;
+    healthy?: string;
+  };
+  stat?: string;
+  cellLabel?: string;
+  heatmapLabel?: string;
+  legendLabel?: string;
+};
+export type StatusColorConfig = Record<number, string> & {
+  noData?: string;
+  critical?: string;
+  degraded?: string;
+  healthy?: string;
+};
+export type StatusHeatmapProps = HTMLAttributes<HTMLDivElement> & {
+  data: StatusActivity[];
+  dateFormat?: string;
+  blockSize?: number;
+  blockMargin?: number;
+  blockRadius?: number;
+  blockAspectRatio?: number;
+  colors?: StatusColorConfig;
+  locale?: Locale;
+  labels?: StatusHeatmapLabels;
+  fontSize?: number;
+  emptyState?: ReactNode;
+  statusValues?: StatusValue[];
+  healthyValue?: StatusValue;
+  style?: CSSProperties;
+  className?: string;
+  children: ReactNode;
+};
+/**
+ * Status Heatmap
+ *
+ * A timeline indicator showing daily status over a period (e.g., 90 days).
+ * Similar to Atlassian Statuspage - each day is represented by a vertical bar.
+ * Supports 4 status values: 0=no-data, 1=critical, 2=degraded, 3=healthy
+ *
+ * @example
+ * ```tsx
+ * <StatusHeatmap data={data} blockAspectRatio={0.2}>
+ *   <StatusHeatmapBody>
+ *     {({ activity, dayIndex }) => (
+ *       <StatusHeatmapBlock
+ *         activity={activity}
+ *         dayIndex={dayIndex}
+ *       />
+ *     )}
+ *   </StatusHeatmapBody>
+ *   <StatusHeatmapFooter>
+ *     <StatusHeatmapStat />
+ *     <StatusHeatmapLegend />
+ *   </StatusHeatmapFooter>
+ * </StatusHeatmap>
+ * ```
+ *
+ * @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 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 type StatusHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
+  activity: StatusActivity;
+  dayIndex: number;
+  highlighted?: boolean;
+  onCellClick?: (activity: StatusActivity) => void;
+  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 & {
+  ref?: React.RefObject<SVGRectElement | null>;
+}): import("react").JSX.Element;
+export declare namespace StatusHeatmapBlock {
+  var displayName: string;
+}
+export type StatusHeatmapBodyProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  hideDateLabels?: boolean;
+  labelInterval?: number;
+  className?: string;
+  labelClassName?: string;
+  children: (props: {
+    activity: StatusActivity;
+    dayIndex: number;
+  }) => ReactNode;
+};
+export declare const StatusHeatmapBody: ({ hideDateLabels, labelInterval, className, labelClassName, children, ...props }: StatusHeatmapBodyProps) => import("react").JSX.Element;
+export type StatusHeatmapFooterProps = HTMLAttributes<HTMLDivElement>;
+export declare const StatusHeatmapFooter: ({ className, ...props }: StatusHeatmapFooterProps) => import("react").JSX.Element;
+export type StatusHeatmapStatProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  compute?: (data: StatusActivity[]) => number | string;
+  label?: string;
+  children?: (result: {
+    value: number | string;
+    data: StatusActivity[];
+  }) => ReactNode;
+};
+export declare const StatusHeatmapStat: ({ compute, label, className, children, ...props }: StatusHeatmapStatProps) => import("react").JSX.Element;
+export type StatusHeatmapLegendProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> & {
+  labels?: StatusHeatmapLabels["statuses"];
+  children?: (props: {
+    value: StatusValue;
+    label: string;
+  }) => ReactNode;
+};
+export declare const StatusHeatmapLegend: ({ labels: labelsProp, className, children, ...props }: StatusHeatmapLegendProps) => import("react").JSX.Element;
+//#endregion