@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/activity-heatmap/activity-heatmap.js

@@ -0,0 +1,699 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { useCountTo } from "../lib/count-to.js";
+import { SwapText } from "../lib/swap-text.js";
+import { Tab as Tab$1, TabList as TabList$1, Tabs as Tabs$1 } from "../tabs/tabs.js";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { TabPanel } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/activity-heatmap/activity-heatmap.tsx
+const DAY = 864e5;
+const LEVELS = [
+	0,
+	1,
+	2,
+	3,
+	4
+];
+/** Total wave travel in ms, kept under the system's stagger budget however many weeks the range spans. */
+const WAVE = 420;
+const toUtc = (iso) => Date.parse(`${iso}T00:00:00Z`);
+const toIso = (time) => new Date(time).toISOString().slice(0, 10);
+const CONTRIBUTIONS = {
+	one: "contribution",
+	other: "contributions"
+};
+const noun = (count, unit) => count === 1 ? unit.one : unit.other;
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+function buildModel(days, weekStartsOn, thresholds, locale) {
+	const dates = days.map((day) => toUtc(day.date)).filter(Number.isFinite);
+	const start = dates.length ? Math.min(...dates) : toUtc("2025-01-01");
+	const length = dates.length ? Math.round((Math.max(...dates) - start) / DAY) + 1 : 0;
+	const counts = new Array(length).fill(0);
+	for (const day of days) {
+		const index = Math.round((toUtc(day.date) - start) / DAY);
+		if (index >= 0 && index < length) counts[index] += Math.max(0, day.count);
+	}
+	const max = counts.reduce((a, b) => Math.max(a, b), 0);
+	const bounds = thresholds ?? [
+		Math.max(1, Math.ceil(max * .25)),
+		Math.max(2, Math.ceil(max * .5)),
+		Math.max(3, Math.ceil(max * .75))
+	];
+	const levels = counts.map((count) => count <= 0 ? 0 : count <= bounds[0] ? 1 : count <= bounds[1] ? 2 : count <= bounds[2] ? 3 : 4);
+	const lead = (new Date(start).getUTCDay() - weekStartsOn + 7) % 7;
+	const weeks = Math.ceil((lead + length) / 7);
+	const monthName = new Intl.DateTimeFormat(locale, {
+		month: "short",
+		timeZone: "UTC"
+	});
+	const months = [];
+	for (let index = 0; index < length; index++) {
+		const date = new Date(start + index * DAY);
+		if (index === 0 || date.getUTCDate() === 1) months.push({
+			month: date.getUTCFullYear() * 12 + date.getUTCMonth(),
+			col: Math.floor((lead + index) / 7),
+			label: monthName.format(date)
+		});
+	}
+	if (months.length > 1 && months[1].col - months[0].col < 3) months.shift();
+	const perLevel = [
+		0,
+		0,
+		0,
+		0,
+		0
+	];
+	for (const level of levels) perLevel[level]++;
+	return {
+		start,
+		length,
+		lead,
+		weeks,
+		total: counts.reduce((a, b) => a + b, 0),
+		counts,
+		levels,
+		thresholds: bounds,
+		months,
+		perLevel
+	};
+}
+/** The total counts to each new number on the smooth spring. */
+function Total({ value, format }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: format.format(useCountTo(value)) });
+}
+/**
+* The year switch is a set of tabs, and a tab names the panel it controls: the grid is that panel. Both wrappers add no box of
+* their own (`contents`), and with no `periods` they are not there at all.
+*/
+function PeriodShell({ periods, period, onPeriodChange, children }) {
+	if (!periods?.length) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(Tabs$1, {
+		selectedKey: period,
+		onSelectionChange: (key) => onPeriodChange?.(String(key)),
+		className: "contents",
+		children
+	});
+}
+function PeriodPanel({ periods, period, children }) {
+	if (!periods?.length) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(TabPanel, {
+		id: period,
+		className: "contents",
+		children
+	});
+}
+const ActivityHeatmap = forwardRef(function ActivityHeatmap({ days, label, period, unit: unitProp = CONTRIBUTIONS, thresholds, weekStartsOn = 0, selectedDate, defaultSelectedDate = null, onSelectDate, actions, periods, onPeriodChange, periodsLabel = "Period", describeDay, detailHint = "Hover or select a day for details.", framed = true, emptyLabel = "No activity yet", locale = "en-US", className }, ref) {
+	const id = useId();
+	const unit = useMemo(() => ({
+		one: unitProp.one,
+		other: unitProp.other
+	}), [unitProp.one, unitProp.other]);
+	const root = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, root), [ref]);
+	const plot = useRef(null);
+	const grid = useRef(null);
+	const scroller = useRef(null);
+	const ring = useRef(null);
+	const tipNode = useRef(null);
+	const tipBody = useRef(null);
+	const measure = useRef(null);
+	const model = useMemo(() => buildModel(days, weekStartsOn, thresholds, locale), [
+		days,
+		weekStartsOn,
+		thresholds,
+		locale
+	]);
+	const formats = useMemo(() => ({
+		long: new Intl.DateTimeFormat(locale, {
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			year: "numeric",
+			timeZone: "UTC"
+		}),
+		short: new Intl.DateTimeFormat(locale, {
+			weekday: "short",
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+			timeZone: "UTC"
+		}),
+		day: new Intl.DateTimeFormat(locale, {
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			timeZone: "UTC"
+		}),
+		weekday: new Intl.DateTimeFormat(locale, {
+			weekday: "short",
+			timeZone: "UTC"
+		}),
+		number: new Intl.NumberFormat(locale)
+	}), [locale]);
+	const [range, setRange] = useState({
+		start: model.start,
+		direction: 1
+	});
+	if (range.start !== model.start) setRange({
+		start: model.start,
+		direction: model.start > range.start ? 1 : -1
+	});
+	const [reveal, setReveal] = useState("hidden");
+	useEffect(() => {
+		const node = plot.current;
+		if (reveal !== "hidden" || !node) return;
+		if (prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			const frame = requestAnimationFrame(() => setReveal("done"));
+			return () => cancelAnimationFrame(frame);
+		}
+		let frame = 0;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			frame = requestAnimationFrame(() => setReveal("revealing"));
+		}, { threshold: .35 });
+		observer.observe(node);
+		return () => {
+			observer.disconnect();
+			cancelAnimationFrame(frame);
+		};
+	}, [reveal]);
+	useEffect(() => {
+		if (reveal !== "revealing") return;
+		const timer = window.setTimeout(() => setReveal("done"), 1120);
+		return () => window.clearTimeout(timer);
+	}, [reveal]);
+	const [ownSelected, setOwnSelected] = useState(defaultSelectedDate);
+	const selected = selectedDate !== void 0 ? selectedDate : ownSelected;
+	const selectedIndex = selected ? Math.round((toUtc(selected) - model.start) / DAY) : -1;
+	const hasSelection = selectedIndex >= 0 && selectedIndex < model.length;
+	const select = (index) => {
+		const date = toIso(model.start + index * DAY);
+		if (selectedDate === void 0) setOwnSelected(date);
+		onSelectDate?.(date);
+	};
+	const [focusIndex, setFocusIndex] = useState(null);
+	const tabIndexDay = focusIndex !== null && focusIndex < model.length ? focusIndex : hasSelection ? selectedIndex : model.length - 1;
+	const [preview, setPreview] = useState(null);
+	const [pinned, setPinned] = useState(null);
+	const [legendFocus, setLegendFocus] = useState(0);
+	const previewTimer = useRef(0);
+	const highlight = preview ?? pinned;
+	const previewLevel = (level) => {
+		window.clearTimeout(previewTimer.current);
+		if (level !== null) setPreview(level);
+		else previewTimer.current = window.setTimeout(() => setPreview(null), 90);
+	};
+	useEffect(() => () => window.clearTimeout(previewTimer.current), []);
+	const [tip, setTip] = useState(null);
+	const [open, setOpen] = useState(false);
+	const [change, setChange] = useState(1);
+	const [session, setSession] = useState(0);
+	const [active, setActive] = useState(null);
+	const openRef = useRef(false);
+	const hideTimer = useRef(0);
+	useEffect(() => () => window.clearTimeout(hideTimer.current), []);
+	const tipFor = (index) => {
+		const count = model.counts[index];
+		const date = new Date(model.start + index * DAY);
+		return {
+			index,
+			key: `day-${toIso(date.getTime())}`,
+			primary: count ? `${formats.number.format(count)} ${noun(count, unit)}` : `No ${unit.other}`,
+			secondary: formats.short.format(date),
+			value: count
+		};
+	};
+	const [a, b, c] = model.thresholds;
+	const ranges = [
+		`no ${unit.other}`,
+		a === 1 ? `1 ${unit.one}` : `1 to ${a} ${unit.other}`,
+		`${a + 1} to ${b} ${unit.other}`,
+		`${b + 1} to ${c} ${unit.other}`,
+		`${c + 1} or more ${unit.other}`
+	];
+	const shortRanges = [
+		`no ${unit.other}`,
+		a === 1 ? `1 ${unit.one}` : `1–${a} ${unit.other}`,
+		`${a + 1}–${b} ${unit.other}`,
+		`${b + 1}–${c} ${unit.other}`,
+		`${c + 1}+ ${unit.other}`
+	];
+	const dayCount = highlight === null ? "" : `${formats.number.format(model.perLevel[highlight])} ${model.perLevel[highlight] === 1 ? "day" : "days"}`;
+	const caption = highlight === null ? "" : `${dayCount} with ${shortRanges[highlight]}`;
+	const show = (index) => {
+		window.clearTimeout(hideTimer.current);
+		const next = tipFor(index);
+		if (!openRef.current) setSession((current) => current + 1);
+		setChange(tip && openRef.current ? Math.sign(next.value - tip.value) || 1 : 1);
+		setTip(next);
+		setOpen(true);
+		setActive(index);
+	};
+	const hideSoon = (delay = 110) => {
+		window.clearTimeout(hideTimer.current);
+		hideTimer.current = window.setTimeout(() => {
+			setOpen(false);
+			setActive(null);
+		}, delay);
+	};
+	useIsomorphicLayoutEffect(() => {
+		const node = root.current;
+		const bubble = tipNode.current;
+		const body = tipBody.current;
+		const sizer = measure.current;
+		if (!tip || !node || !bubble || !body || !sizer) return;
+		const place = (glide) => {
+			const cell = grid.current?.querySelector(`[data-index="${tip.index}"]`);
+			if (!cell) return;
+			const box = node.getBoundingClientRect();
+			const at = cell.getBoundingClientRect();
+			const width = Math.ceil(sizer.getBoundingClientRect().width);
+			const half = width / 2 + 13;
+			const x = clamp(at.left - box.left - node.clientLeft + at.width / 2, half + 2, node.clientWidth - half - 2);
+			bubble.toggleAttribute("data-glide", glide);
+			bubble.style.translate = `${x}px ${at.top - box.top - node.clientTop}px`;
+			body.toggleAttribute("data-glide", glide);
+			body.style.width = `${width}px`;
+		};
+		place(open && openRef.current && !prefersReducedMotion());
+		openRef.current = open;
+		if (!open) return;
+		const follow = () => place(false);
+		const frame = scroller.current;
+		frame?.addEventListener("scroll", follow, { passive: true });
+		return () => frame?.removeEventListener("scroll", follow);
+	}, [tip, open]);
+	const indexOf = (element) => {
+		const cell = element?.closest("[data-index]");
+		return cell && grid.current?.contains(cell) ? {
+			cell,
+			index: Number(cell.dataset.index)
+		} : null;
+	};
+	const focusDay = (index) => grid.current?.querySelector(`[data-index="${index}"]`)?.focus();
+	const onGridPointerOver = (event) => {
+		const hit = indexOf(event.target);
+		if (hit) show(hit.index);
+	};
+	const onGridPointerLeave = (event) => {
+		const focused = indexOf(document.activeElement);
+		if (focused?.cell.matches(":focus-visible")) show(focused.index);
+		else hideSoon(event.pointerType === "touch" ? 2400 : 110);
+	};
+	const onGridFocus = (event) => {
+		const hit = indexOf(event.target);
+		if (!hit) return;
+		setFocusIndex(hit.index);
+		show(hit.index);
+	};
+	const onGridBlur = (event) => {
+		if (!grid.current?.contains(event.relatedTarget)) hideSoon(0);
+	};
+	const onGridKeyDown = (event) => {
+		const hit = indexOf(event.target);
+		if (!hit) return;
+		const moves = {
+			ArrowUp: hit.index - 1,
+			ArrowDown: hit.index + 1,
+			ArrowLeft: hit.index - 7,
+			ArrowRight: hit.index + 7,
+			Home: 0,
+			End: model.length - 1
+		};
+		if (event.key in moves) {
+			event.preventDefault();
+			focusDay(clamp(moves[event.key], 0, model.length - 1));
+		} else if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			select(hit.index);
+		} else if (event.key === "Escape" && open) {
+			event.preventDefault();
+			setOpen(false);
+		}
+	};
+	const onLegendKeyDown = (event) => {
+		if (event.key === "Escape") {
+			previewLevel(null);
+			return;
+		}
+		const moves = {
+			ArrowLeft: legendFocus - 1,
+			ArrowRight: legendFocus + 1,
+			Home: 0,
+			End: 4
+		};
+		if (!(event.key in moves)) return;
+		event.preventDefault();
+		const next = clamp(moves[event.key], 0, 4);
+		root.current?.querySelector(`[data-level-key="${next}"]`)?.focus();
+	};
+	const ringShown = hasSelection && reveal !== "hidden";
+	const ringWasShown = useRef(ringShown);
+	useIsomorphicLayoutEffect(() => {
+		const node = ring.current;
+		if (node && ringShown && !ringWasShown.current) {
+			node.style.transitionProperty = "opacity";
+			node.offsetWidth;
+			node.style.transitionProperty = "";
+		}
+		ringWasShown.current = ringShown;
+	}, [ringShown]);
+	const maxDiagonal = Math.max(1, model.weeks - 1 + 6);
+	const step = Math.min(12, WAVE / maxDiagonal);
+	const cells = useMemo(() => Array.from({ length: 7 }, (_, row) => /* @__PURE__ */ jsx("div", {
+		role: "row",
+		"aria-hidden": Array.from({ length: model.weeks }, (_, col) => col * 7 + row - model.lead).some((index) => index >= 0 && index < model.length) ? void 0 : true,
+		className: "activity-heatmap-row",
+		children: Array.from({ length: model.weeks }, (_, col) => {
+			const index = col * 7 + row - model.lead;
+			const inRange = index >= 0 && index < model.length;
+			const wave = {
+				"--wave": `${Math.round((col + row) * step)}ms`,
+				"--wave-back": `${Math.round((maxDiagonal - col - row) * step)}ms`
+			};
+			if (!inRange) return /* @__PURE__ */ jsx("span", {
+				className: "activity-heatmap-cell",
+				"data-empty": "",
+				style: wave,
+				"aria-hidden": "true"
+			}, col);
+			const count = model.counts[index];
+			const date = new Date(model.start + index * DAY);
+			return /* @__PURE__ */ jsx("span", {
+				role: "gridcell",
+				className: "activity-heatmap-cell",
+				style: wave,
+				"data-index": index,
+				"data-level": model.levels[index],
+				tabIndex: index === tabIndexDay ? 0 : -1,
+				"aria-selected": index === selectedIndex,
+				"aria-label": `${count ? formats.number.format(count) : "No"} ${noun(count, unit)}, ${formats.long.format(date)}`,
+				onClick: () => select(index)
+			}, col);
+		})
+	}, row)), [
+		model,
+		step,
+		maxDiagonal,
+		tabIndexDay,
+		selectedIndex,
+		formats,
+		unit,
+		onSelectDate,
+		selectedDate
+	]);
+	const weekdayLabels = useMemo(() => Array.from({ length: 7 }, (_, row) => {
+		const weekday = (row + weekStartsOn) % 7;
+		return weekday % 2 === 1 ? formats.weekday.format(/* @__PURE__ */ new Date((3 + weekday) * DAY)) : "";
+	}), [formats, weekStartsOn]);
+	const detailIndex = active !== null && active < model.length ? active : hasSelection ? selectedIndex : null;
+	const spansYears = model.length > 0 && new Date(model.start).getUTCFullYear() !== new Date(model.start + (model.length - 1) * DAY).getUTCFullYear();
+	let detailText = detailHint;
+	if (describeDay !== null && detailIndex !== null) {
+		const at = new Date(model.start + detailIndex * DAY);
+		const count = model.counts[detailIndex];
+		const dayLabel = spansYears ? formats.long.format(at) : formats.day.format(at);
+		detailText = describeDay ? describeDay({
+			date: toIso(at.getTime()),
+			count,
+			label: dayLabel,
+			unit
+		}) : `${dayLabel}: ${count ? `${formats.number.format(count)} ${noun(count, unit)}` : `no ${unit.other}`}.`;
+	}
+	const selectedCol = hasSelection ? Math.floor((selectedIndex + model.lead) / 7) : 0;
+	const selectedRow = hasSelection ? (selectedIndex + model.lead) % 7 : 0;
+	const summary = `${formats.number.format(model.total)} ${noun(model.total, unit)} in ${period}`;
+	const header = unit.other.charAt(0).toUpperCase() + unit.other.slice(1);
+	return /* @__PURE__ */ jsx("div", {
+		ref: refs,
+		"data-slot": "activity-heatmap",
+		"data-framed": framed || void 0,
+		className: cn("activity-heatmap", className),
+		children: /* @__PURE__ */ jsxs(PeriodShell, {
+			periods,
+			period,
+			onPeriodChange,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-3",
+					children: [/* @__PURE__ */ jsxs("p", {
+						className: "m-0 flex min-w-0 flex-wrap items-baseline gap-x-1 text-sm tabular-nums text-text-secondary",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								"aria-hidden": "true",
+								className: "whitespace-nowrap font-medium text-foreground",
+								children: [
+									/* @__PURE__ */ jsx(Total, {
+										value: model.total,
+										format: formats.number
+									}),
+									" ",
+									noun(model.total, unit)
+								]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								"aria-hidden": "true",
+								className: "whitespace-nowrap",
+								children: [
+									"in",
+									" ",
+									/* @__PURE__ */ jsx(SwapText, {
+										swapKey: period,
+										className: "inline-flex",
+										children: period
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								role: "status",
+								children: summary
+							})
+						]
+					}), actions || periods?.length ? /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-none items-center gap-3",
+						children: [actions, periods?.length ? /* @__PURE__ */ jsx(TabList$1, {
+							"aria-label": periodsLabel,
+							children: periods.map((item) => /* @__PURE__ */ jsx(Tab$1, {
+								id: item,
+								children: item
+							}, item))
+						}) : null]
+					}) : null]
+				}),
+				model.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "m-0 text-sm text-muted-foreground",
+					children: emptyLabel
+				}) : null,
+				/* @__PURE__ */ jsx(PeriodPanel, {
+					periods,
+					period,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "activity-heatmap-body",
+						hidden: model.length === 0,
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "activity-heatmap-weekdays",
+							"aria-hidden": "true",
+							children: weekdayLabels.map((text, row) => /* @__PURE__ */ jsx("span", {
+								className: "activity-heatmap-weekday",
+								children: text
+							}, row))
+						}), /* @__PURE__ */ jsx("div", {
+							ref: scroller,
+							className: "activity-heatmap-scroller",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "activity-heatmap-canvas",
+								style: { "--weeks": model.weeks },
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "activity-heatmap-months",
+									"aria-hidden": "true",
+									children: model.months.map((month, order) => /* @__PURE__ */ jsx("span", {
+										className: "activity-heatmap-month",
+										style: { "--col": month.col },
+										children: month.label
+									}, `${month.month % 12}-${model.months.findIndex((item) => item.month % 12 === month.month % 12) === order ? 0 : 1}`))
+								}), /* @__PURE__ */ jsxs("div", {
+									ref: plot,
+									className: "relative",
+									children: [/* @__PURE__ */ jsx("div", {
+										ref: grid,
+										role: "grid",
+										"aria-label": label,
+										"aria-readonly": "true",
+										"aria-describedby": `${id}-legend`,
+										className: "activity-heatmap-grid",
+										"data-reveal": reveal,
+										"data-direction": range.direction < 0 ? "back" : void 0,
+										"data-highlight": highlight ?? void 0,
+										onPointerOver: onGridPointerOver,
+										onPointerLeave: onGridPointerLeave,
+										onFocus: onGridFocus,
+										onBlur: onGridBlur,
+										onKeyDown: onGridKeyDown,
+										children: cells
+									}), /* @__PURE__ */ jsx("span", {
+										ref: ring,
+										"aria-hidden": "true",
+										"data-shown": ringShown || void 0,
+										className: "activity-heatmap-ring",
+										style: {
+											"--col": selectedCol,
+											"--row": selectedRow
+										}
+									})]
+								})]
+							})
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center justify-between gap-3 text-xs text-text-secondary",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							id: `${id}-legend`,
+							className: "sr-only",
+							children: [
+								"Darker squares mean more ",
+								unit.other,
+								". Levels: ",
+								ranges.join(", "),
+								"."
+							]
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							"aria-live": "polite",
+							className: "activity-heatmap-caption",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsxs(SwapText, {
+									swapKey: caption,
+									className: "block",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "activity-heatmap-caption-long",
+										children: caption
+									}), /* @__PURE__ */ jsx("span", {
+										className: "activity-heatmap-caption-short",
+										children: dayCount
+									})]
+								})
+							}), /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: caption
+							})]
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "flex flex-none items-center gap-2",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "leading-none",
+									children: "Less"
+								}),
+								/* @__PURE__ */ jsx("div", {
+									role: "group",
+									"aria-label": "Highlight days by level",
+									onKeyDown: onLegendKeyDown,
+									className: "flex",
+									children: LEVELS.map((level) => /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "activity-heatmap-swatch",
+										"data-level-key": level,
+										"data-level": level,
+										tabIndex: level === legendFocus ? 0 : -1,
+										"aria-pressed": pinned === level,
+										"aria-label": `Highlight days with ${ranges[level]}`,
+										onClick: () => setPinned((current) => current === level ? null : level),
+										onPointerEnter: () => previewLevel(level),
+										onPointerLeave: () => previewLevel(null),
+										onFocus: () => {
+											setLegendFocus(level);
+											previewLevel(level);
+										},
+										onBlur: () => previewLevel(null)
+									}, level))
+								}),
+								/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "leading-none",
+									children: "More"
+								})
+							]
+						})
+					]
+				}),
+				describeDay !== null && model.length > 0 ? /* @__PURE__ */ jsx("p", {
+					className: "activity-heatmap-detail",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: detailText,
+						className: "block",
+						children: detailText
+					})
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					ref: tipNode,
+					"aria-hidden": "true",
+					"data-open": open && tip ? "" : void 0,
+					className: "activity-heatmap-tip",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "activity-heatmap-bubble",
+						children: /* @__PURE__ */ jsxs("span", {
+							ref: tipBody,
+							className: "activity-heatmap-tip-body",
+							children: [/* @__PURE__ */ jsxs("span", {
+								ref: measure,
+								className: "activity-heatmap-tip-lines absolute start-0 top-0 invisible",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "activity-heatmap-tip-primary",
+									children: tip?.primary
+								}), /* @__PURE__ */ jsx("span", {
+									className: "activity-heatmap-tip-secondary",
+									children: tip?.secondary
+								})]
+							}), /* @__PURE__ */ jsx(SwapText, {
+								swapKey: tip?.key ?? "",
+								dir: change,
+								className: "block",
+								children: /* @__PURE__ */ jsxs("span", {
+									className: "activity-heatmap-tip-lines",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "activity-heatmap-tip-primary",
+										children: tip?.primary
+									}), /* @__PURE__ */ jsx("span", {
+										className: "activity-heatmap-tip-secondary",
+										children: tip?.secondary
+									})]
+								})
+							}, session)]
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "sr-only",
+					hidden: model.length === 0,
+					children: /* @__PURE__ */ jsxs("table", { children: [
+						/* @__PURE__ */ jsx("caption", { children: label }),
+						/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Date"
+						}), /* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: header
+						})] }) }),
+						/* @__PURE__ */ jsx("tbody", { children: model.counts.map((count, index) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+							scope: "row",
+							children: formats.long.format(new Date(model.start + index * DAY))
+						}), /* @__PURE__ */ jsx("td", { children: formats.number.format(count) })] }, index)) })
+					] })
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { ActivityHeatmap };
+
+//# sourceMappingURL=activity-heatmap.js.map