@kanso-labs/react-native-kanso-ui 0.9.0 → 0.11.0

package/dist/calendar/index.js

@@ -6,71 +6,123 @@ import { withOpacity } from "../theme/color.js";
 import { messagesFor } from "../i18n/index.js";
 import { ArrowDropDownGlyph, CheckGlyph, ChevronEndGlyph } from "../glyphs/index.js";
 import { IconButton } from "../components/icon-button/index.js";
+import { useWindowSizeClass } from "../hooks/useWindowSizeClass.js";
 import { useFocusOnPlaced, useReturnFocus } from "../overlay/panel.js";
-import { styles, stylesOf } from "./styles.js";
+import { rootWidthOf, styles, stylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { FlatList, I18nManager, Pressable, Text, View } from "react-native";
+import { FlatList, I18nManager, Pressable, StyleSheet, Text, View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
-import { useLayoutEffect, useRef, useState } from "react";
+import { createContext, use, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { DateFormatter, endOfMonth, isSameDay, isSameYear, isToday, startOfMonth, startOfWeek, toCalendarDate, today } from "@internationalized/date";
+import { DateFormatter, endOfMonth, isSameDay, isSameMonth, isSameYear, isToday, startOfMonth, startOfWeek, toCalendarDate, today } from "@internationalized/date";
 //#region src/calendar/index.tsx
+/**
+* Where a calendar hands over the cell of the date it is on, the one held or
+* else the one it opened on, for a surface that sends a screen reader to that
+* date as it opens, as a date picker's does. The cell hands itself over as it
+* becomes that date and `null` as it stops being it. Outside such a surface
+* it is `null`, and no cell hands anything over.
+*/
+const CalendarFocusContext = createContext(null);
 const LISTED_YEARS = 201;
 const ROWS_ABOVE_SHOWN = 3;
 /**
-* What a calendar draws inside its container. With `showMonthYearMenus` the
-* header is the date pickers page's docked one, the month and the year as
-* menu buttons, and while either is open its list takes the grid's place.
+* What a calendar draws inside its container: the header, and a grid for each
+* month it shows. With `showMonthYearMenus` the header is the date pickers
+* page's docked one, the month and the year as menu buttons, and while either
+* is open its list takes the grid's place.
+*
+* The menus are for one month. They name and pick the first month alone, so
+* a second grid beside it would have no month or year of its own; with more
+* than one the header is the plain one, whose heading names every month
+* shown, both years where they are two, as web's does.
 */
 function CalendarFrame(t0) {
-	const $ = c(14);
-	const { firstDayOfWeek, locale, showMonthYearMenus, state } = t0;
-	let t1;
-	if ($[0] !== firstDayOfWeek || $[1] !== locale || $[2] !== state) {
-		t1 = /* @__PURE__ */ jsx(MonthGrid, {
-			firstDayOfWeek,
-			locale,
-			state
+	const $ = c(28);
+	const { firstDayOfWeek, locale, months, showMonthYearMenus, state } = t0;
+	const t1 = useTheme();
+	let t2;
+	if ($[0] !== t1) {
+		t2 = stylesOf(t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const own = t2;
+	const sideBySide = useSideBySide(months);
+	const t3 = sideBySide ? own.monthsSideBySide : own.months;
+	let t4;
+	if ($[2] !== firstDayOfWeek || $[3] !== locale || $[4] !== months || $[5] !== own.monthSideBySide || $[6] !== sideBySide || $[7] !== state) {
+		let t5;
+		if ($[9] !== firstDayOfWeek || $[10] !== locale || $[11] !== own.monthSideBySide || $[12] !== sideBySide || $[13] !== state) {
+			t5 = (offset) => /* @__PURE__ */ jsx(View, {
+				style: sideBySide ? own.monthSideBySide : void 0,
+				children: /* @__PURE__ */ jsx(MonthGrid, {
+					firstDayOfWeek,
+					locale,
+					offset,
+					state
+				})
+			}, offset.months);
+			$[9] = firstDayOfWeek;
+			$[10] = locale;
+			$[11] = own.monthSideBySide;
+			$[12] = sideBySide;
+			$[13] = state;
+			$[14] = t5;
+		} else t5 = $[14];
+		t4 = offsetsOf(months).map(t5);
+		$[2] = firstDayOfWeek;
+		$[3] = locale;
+		$[4] = months;
+		$[5] = own.monthSideBySide;
+		$[6] = sideBySide;
+		$[7] = state;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[15] !== t3 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx(View, {
+			style: t3,
+			children: t4
 		});
-		$[0] = firstDayOfWeek;
-		$[1] = locale;
-		$[2] = state;
-		$[3] = t1;
-	} else t1 = $[3];
-	const grid = t1;
-	if (showMonthYearMenus) {
-		let t2;
-		if ($[4] !== grid || $[5] !== locale || $[6] !== state) {
-			t2 = /* @__PURE__ */ jsx(CalendarMenus, {
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	const grids = t5;
+	if (showMonthYearMenus && months <= 1) {
+		let t6;
+		if ($[18] !== grids || $[19] !== locale || $[20] !== state) {
+			t6 = /* @__PURE__ */ jsx(CalendarMenus, {
 				locale,
 				state,
-				children: grid
+				children: grids
 			});
-			$[4] = grid;
-			$[5] = locale;
-			$[6] = state;
-			$[7] = t2;
-		} else t2 = $[7];
-		return t2;
+			$[18] = grids;
+			$[19] = locale;
+			$[20] = state;
+			$[21] = t6;
+		} else t6 = $[21];
+		return t6;
 	}
-	let t2;
-	if ($[8] !== locale || $[9] !== state) {
-		t2 = /* @__PURE__ */ jsx(CalendarHeader, {
+	let t6;
+	if ($[22] !== locale || $[23] !== state) {
+		t6 = /* @__PURE__ */ jsx(CalendarHeader, {
 			locale,
 			state
 		});
-		$[8] = locale;
-		$[9] = state;
-		$[10] = t2;
-	} else t2 = $[10];
-	let t3;
-	if ($[11] !== grid || $[12] !== t2) {
-		t3 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t2, grid] });
-		$[11] = grid;
-		$[12] = t2;
-		$[13] = t3;
-	} else t3 = $[13];
-	return t3;
+		$[22] = locale;
+		$[23] = state;
+		$[24] = t6;
+	} else t6 = $[24];
+	let t7;
+	if ($[25] !== grids || $[26] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t6, grids] });
+		$[25] = grids;
+		$[26] = t6;
+		$[27] = t7;
+	} else t7 = $[27];
+	return t7;
 }
 /** The two chevrons with the month and year between them. */
 function CalendarHeader(t0) {
@@ -97,7 +149,7 @@ function CalendarHeader(t0) {
 	const t5 = composeStyles(role, own.heading);
 	let t6;
 	if ($[3] !== locale || $[4] !== state) {
-		t6 = visibleMonthOf(state, locale);
+		t6 = visibleRangeOf(state, locale);
 		$[3] = locale;
 		$[4] = state;
 		$[5] = t6;
@@ -418,119 +470,159 @@ function chooseThen(state, setOpen, shown) {
 		setOpen(null);
 	};
 }
+function cornersOf(shape) {
+	const { borderBottomEndRadius, borderBottomStartRadius, borderRadius, borderTopEndRadius, borderTopStartRadius } = StyleSheet.flatten(shape) ?? {};
+	return {
+		borderBottomEndRadius,
+		borderBottomStartRadius,
+		borderRadius,
+		borderTopEndRadius,
+		borderTopStartRadius
+	};
+}
 /**
 * One date: the page's 40dp circle in its 48dp square, which `hitSlop` makes
 * the press target. Its name is the date in full, with today, the selection
 * and the first or last date the bounds allow said as web says them, and it
-* reports itself disabled where it cannot be picked.
+* reports itself disabled where it cannot be picked, as a date of the months
+* either side of its grid's is.
+*
+* In a range calendar a selected day is the band instead, as wide as its
+* column, with the two ends filled and round on their outer side, and the
+* state layers follow the ground under them: on primary over an end, on
+* primary container over the band, on surface elsewhere. While a range is
+* started, a pointer over a date draws the range as far as it, as web's
+* does; a touch has no such preview, and the second press ends the range.
 */
 function DateCell(t0) {
-	const $ = c(29);
-	const { date, locale, state } = t0;
+	const $ = c(37);
+	const { date, locale, month, state } = t0;
 	const theme = useTheme();
 	const { colors, sizing } = theme;
 	const own = stylesOf(theme);
 	const role = useTypeRole("bodyLarge");
 	let t1;
-	if ($[0] !== date || $[1] !== state) {
-		t1 = state.isCellDisabled(date);
+	if ($[0] !== date || $[1] !== month || $[2] !== state) {
+		t1 = state.isCellDisabled(date) || !isSameMonth(date, month);
 		$[0] = date;
-		$[1] = state;
-		$[2] = t1;
-	} else t1 = $[2];
+		$[1] = month;
+		$[2] = state;
+		$[3] = t1;
+	} else t1 = $[3];
 	const isDisabled = t1;
 	let t2;
-	if ($[3] !== date || $[4] !== state) {
+	if ($[4] !== date || $[5] !== state) {
 		t2 = state.isCellUnavailable(date);
-		$[3] = date;
-		$[4] = state;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[4] = date;
+		$[5] = state;
+		$[6] = t2;
+	} else t2 = $[6];
 	const isUnavailable = t2;
 	const selectable = !isDisabled && !isUnavailable;
 	const isSelected = selectable && state.isSelected(date);
 	const isCurrent = isToday(date, state.timeZone);
+	const range = rangeOf(state, date, isSelected);
+	const isFilled = range === null ? isSelected : range.isEnd;
+	const report = use(CalendarFocusContext);
+	const isFocused = isSameMonth(date, month) && isSameDay(date, state.focusedDate);
+	const shape = composeStyles(own.date, range === null ? void 0 : own.dateInRange, range?.isFirst === true ? own.dateRangeStart : void 0, range?.isLast === true ? own.dateRangeEnd : void 0);
 	const feedback = usePressFeedback({
-		color: isSelected ? colors.onPrimary : colors.onSurface,
-		corners: own.date,
-		disabled: !selectable
+		color: isFilled ? colors.onPrimary : range === null ? colors.onSurface : colors.onPrimaryContainer,
+		corners: cornersOf(shape),
+		disabled: !selectable,
+		onHoverIn: highlightThen(state, date)
 	});
 	const T0 = Pressable;
-	const t3 = dateLabelOf(date, state, locale, isCurrent, isSelected);
-	let t4;
-	if ($[6] !== sizing.controlSm) {
-		t4 = hitSlop(sizing.controlSm, sizing.controlSm);
-		$[6] = sizing.controlSm;
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== date || $[9] !== state) {
-		t5 = selectThen(state, date);
-		$[8] = date;
+	let t3;
+	if ($[7] !== locale || $[8] !== selectable || $[9] !== state) {
+		t3 = promptOf(state, locale, selectable);
+		$[7] = locale;
+		$[8] = selectable;
 		$[9] = state;
-		$[10] = t5;
-	} else t5 = $[10];
-	const t6 = "button";
-	const t7 = feedback.handlers;
-	const t8 = !selectable;
-	const t9 = composeStyles(own.date, isCurrent ? own.dateToday : void 0, isSelected ? own.dateSelected : void 0, feedback.ring);
-	const t10 = feedback.layer;
+		$[10] = t3;
+	} else t3 = $[10];
+	const t4 = dateLabelOf(date, state, locale, isCurrent, isSelected);
+	const t5 = range === null ? sizing.controlSm : void 0;
+	let t6;
+	if ($[11] !== sizing.controlSm || $[12] !== t5) {
+		t6 = hitSlop(sizing.controlSm, t5);
+		$[11] = sizing.controlSm;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== date || $[15] !== state) {
+		t7 = selectThen(state, date);
+		$[14] = date;
+		$[15] = state;
+		$[16] = t7;
+	} else t7 = $[16];
+	const t8 = isFocused && report !== null ? report : void 0;
+	const t9 = "button";
+	const t10 = feedback.handlers;
+	const t11 = !selectable;
+	const t12 = composeStyles(shape, isCurrent ? own.dateToday : void 0, isFilled ? own.dateSelected : void 0, feedback.ring);
+	const t13 = feedback.layer;
 	const T1 = Text;
-	const t11 = composeStyles(role, own.dateText, isCurrent ? own.dateTextToday : void 0, isSelected ? own.dateTextSelected : void 0, isUnavailable ? own.dateTextUnavailable : void 0, isDisabled ? own.dateTextDisabled : void 0);
-	let t12;
-	if ($[11] !== date || $[12] !== locale || $[13] !== state) {
-		t12 = dayOf(date, state, locale);
-		$[11] = date;
-		$[12] = locale;
-		$[13] = state;
-		$[14] = t12;
-	} else t12 = $[14];
-	let t13;
-	if ($[15] !== T1 || $[16] !== t11 || $[17] !== t12) {
-		t13 = /* @__PURE__ */ jsx(T1, {
-			style: t11,
-			children: t12
+	const t14 = composeStyles(role, own.dateText, isCurrent ? own.dateTextToday : void 0, range === null ? void 0 : own.dateTextInRange, isFilled ? own.dateTextSelected : void 0, isUnavailable ? own.dateTextUnavailable : void 0, isDisabled ? own.dateTextDisabled : void 0);
+	let t15;
+	if ($[17] !== date || $[18] !== locale || $[19] !== state) {
+		t15 = dayOf(date, state, locale);
+		$[17] = date;
+		$[18] = locale;
+		$[19] = state;
+		$[20] = t15;
+	} else t15 = $[20];
+	let t16;
+	if ($[21] !== T1 || $[22] !== t14 || $[23] !== t15) {
+		t16 = /* @__PURE__ */ jsx(T1, {
+			style: t14,
+			children: t15
 		});
-		$[15] = T1;
-		$[16] = t11;
-		$[17] = t12;
-		$[18] = t13;
-	} else t13 = $[18];
-	let t14;
-	if ($[19] !== T0 || $[20] !== feedback.handlers || $[21] !== feedback.layer || $[22] !== t13 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 || $[26] !== t8 || $[27] !== t9) {
-		t14 = /* @__PURE__ */ jsxs(T0, {
-			"aria-label": t3,
-			hitSlop: t4,
-			onPress: t5,
-			role: t6,
-			...t7,
-			disabled: t8,
-			style: t9,
-			children: [t10, t13]
+		$[21] = T1;
+		$[22] = t14;
+		$[23] = t15;
+		$[24] = t16;
+	} else t16 = $[24];
+	let t17;
+	if ($[25] !== T0 || $[26] !== feedback.handlers || $[27] !== feedback.layer || $[28] !== t11 || $[29] !== t12 || $[30] !== t16 || $[31] !== t3 || $[32] !== t4 || $[33] !== t6 || $[34] !== t7 || $[35] !== t8) {
+		t17 = /* @__PURE__ */ jsxs(T0, {
+			accessibilityHint: t3,
+			"aria-label": t4,
+			hitSlop: t6,
+			onPress: t7,
+			ref: t8,
+			role: t9,
+			...t10,
+			disabled: t11,
+			style: t12,
+			children: [t13, t16]
 		});
-		$[19] = T0;
-		$[20] = feedback.handlers;
-		$[21] = feedback.layer;
-		$[22] = t13;
-		$[23] = t3;
-		$[24] = t4;
-		$[25] = t5;
-		$[26] = t8;
-		$[27] = t9;
-		$[28] = t14;
-	} else t14 = $[28];
-	return t14;
+		$[25] = T0;
+		$[26] = feedback.handlers;
+		$[27] = feedback.layer;
+		$[28] = t11;
+		$[29] = t12;
+		$[30] = t16;
+		$[31] = t3;
+		$[32] = t4;
+		$[33] = t6;
+		$[34] = t7;
+		$[35] = t8;
+		$[36] = t17;
+	} else t17 = $[36];
+	return t17;
 }
 function dateLabelOf(date, state, locale, isCurrent, isSelected) {
 	const words = messagesFor(locale).calendar;
-	const full = new DateFormatter(locale, {
+	const full = `${rangeNameOf(state, date, locale)}${new DateFormatter(locale, {
 		day: "numeric",
 		era: eraOf(date),
 		month: "long",
 		timeZone: state.timeZone,
 		weekday: "long",
 		year: "numeric"
-	}).format(date.toDate(state.timeZone));
+	}).format(date.toDate(state.timeZone))}`;
 	const said = isCurrent ? (isSelected ? words.todayDateSelected : words.todayDate).replace("{date}", full) : isSelected ? words.dateSelected.replace("{date}", full) : full;
 	if (state.minValue != null && isSameDay(date, state.minValue)) return `${said}, ${words.minimumDate}`;
 	if (state.maxValue != null && isSameDay(date, state.maxValue)) return `${said}, ${words.maximumDate}`;
@@ -546,6 +638,12 @@ function dayOf(date, state, locale) {
 function eraOf(date) {
 	return date.calendar.identifier === "gregory" && date.era === "BC" ? "short" : void 0;
 }
+function highlightThen(state, date) {
+	if (!("highlightDate" in state)) return;
+	return () => {
+		state.highlightDate(date);
+	};
+}
 function layoutOf(height) {
 	return (_data, index) => ({
 		index,
@@ -715,83 +813,92 @@ function MenuList(t0) {
 	return t5;
 }
 /**
-* The weekday row and the month's weeks, held at six weeks of room so the
+* The weekday row and one month's weeks, held at six weeks of room so the
 * calendar keeps its height from month to month. The weeks slide in from the
 * side the new month comes from.
 */
 function MonthGrid(t0) {
-	const $ = c(16);
-	const { firstDayOfWeek, locale, state } = t0;
+	const $ = c(20);
+	const { firstDayOfWeek, locale, offset, state } = t0;
 	const theme = useTheme();
 	const own = stylesOf(theme);
 	const role = useTypeRole("bodyLarge");
-	const start = state.visibleRange.start;
+	let t1;
+	if ($[0] !== offset || $[1] !== state.visibleRange.start) {
+		t1 = state.visibleRange.start.add(offset);
+		$[0] = offset;
+		$[1] = state.visibleRange.start;
+		$[2] = t1;
+	} else t1 = $[2];
+	const start = t1;
 	const slide = useMonthSlide(start, theme);
 	const rowStyle = composeStyles(styles.row, own.rowHeight);
 	const T0 = View;
-	const t1 = own.grid;
+	const t2 = own.grid;
 	const T1 = View;
-	const t2 = true;
-	const t3 = weekdaysOf(state, locale, firstDayOfWeek).map((weekday) => /* @__PURE__ */ jsx(View, {
+	const t3 = true;
+	const t4 = weekdaysOf(state, locale, firstDayOfWeek).map((weekday) => /* @__PURE__ */ jsx(View, {
 		style: styles.column,
 		children: /* @__PURE__ */ jsx(Text, {
 			style: composeStyles(role, own.weekday),
 			children: weekday.label
 		})
 	}, weekday.key));
-	let t4;
-	if ($[0] !== T1 || $[1] !== rowStyle || $[2] !== t3) {
-		t4 = /* @__PURE__ */ jsx(T1, {
-			"aria-hidden": t2,
+	let t5;
+	if ($[3] !== T1 || $[4] !== rowStyle || $[5] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T1, {
+			"aria-hidden": t3,
 			style: rowStyle,
-			children: t3
+			children: t4
 		});
-		$[0] = T1;
-		$[1] = rowStyle;
-		$[2] = t3;
-		$[3] = t4;
-	} else t4 = $[3];
-	let t5;
-	if ($[4] !== locale || $[5] !== rowStyle || $[6] !== state) {
-		t5 = weeksOf(state).map((week) => /* @__PURE__ */ jsx(View, {
+		$[3] = T1;
+		$[4] = rowStyle;
+		$[5] = t4;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== locale || $[8] !== rowStyle || $[9] !== start || $[10] !== state) {
+		t6 = weeksOf(state, start).map((week) => /* @__PURE__ */ jsx(View, {
 			style: rowStyle,
 			children: week.days.map((day) => /* @__PURE__ */ jsx(View, {
 				style: styles.column,
 				children: day.date === null ? null : /* @__PURE__ */ jsx(DateCell, {
 					date: day.date,
 					locale,
+					month: start,
 					state
 				})
 			}, day.key))
 		}, week.key));
-		$[4] = locale;
-		$[5] = rowStyle;
-		$[6] = state;
-		$[7] = t5;
-	} else t5 = $[7];
-	let t6;
-	if ($[8] !== slide || $[9] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Animated.View, {
+		$[7] = locale;
+		$[8] = rowStyle;
+		$[9] = start;
+		$[10] = state;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== slide || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Animated.View, {
 			style: slide,
-			children: t5
+			children: t6
 		});
-		$[8] = slide;
-		$[9] = t5;
-		$[10] = t6;
-	} else t6 = $[10];
-	let t7;
-	if ($[11] !== T0 || $[12] !== own || $[13] !== t4 || $[14] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(T0, {
-			style: t1,
-			children: [t4, t6]
+		$[12] = slide;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== T0 || $[16] !== own || $[17] !== t5 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(T0, {
+			style: t2,
+			children: [t5, t7]
 		});
-		$[11] = T0;
-		$[12] = own;
-		$[13] = t4;
-		$[14] = t6;
-		$[15] = t7;
-	} else t7 = $[15];
-	return t7;
+		$[15] = T0;
+		$[16] = own;
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
 }
 /** The open month list: the months of the year shown, named in full. */
 function MonthList(t0) {
@@ -869,6 +976,9 @@ function monthsOf(state, locale, format) {
 		};
 	});
 }
+function offsetsOf(months) {
+	return Array.from({ length: Math.max(1, months) }, (_unused, index) => ({ months: index }));
+}
 function outsideBounds(state, months) {
 	const { maxValue, minValue } = state;
 	return new Set(months.filter(({ date }) => maxValue != null && startOfMonth(date).compare(maxValue) > 0 || minValue != null && endOfMonth(date).compare(minValue) < 0).map(({ id }) => id));
@@ -882,6 +992,36 @@ function pageThen(state, direction) {
 function previousGlyphStyle() {
 	return I18nManager.isRTL ? styles.previousGlyphRightToLeft : styles.previousGlyph;
 }
+function promptOf(state, locale, selectable) {
+	if (!("anchorDate" in state) || state.isReadOnly || !selectable) return;
+	const words = messagesFor(locale).calendar;
+	return state.anchorDate === null ? words.startRangeSelectionPrompt : words.finishRangeSelectionPrompt;
+}
+function rangeNameOf(state, date, locale) {
+	if (!("highlightedRange" in state) || state.value === null || state.anchorDate !== null || state.highlightedRange === null || !isSameDay(date, state.value.start) && !isSameDay(date, state.value.end)) return "";
+	const { end, start } = state.highlightedRange;
+	const { timeZone } = state;
+	const words = messagesFor(locale).calendar;
+	const formatter = new DateFormatter(locale, {
+		day: "numeric",
+		era: eraOf(start) ?? eraOf(end),
+		month: "long",
+		timeZone,
+		weekday: "long",
+		year: "numeric"
+	});
+	return `${isSameDay(start, end) ? words.selectedDateDescription.replace("{date}", formatter.format(start.toDate(timeZone))) : words.selectedRangeDescription.replace("{dateRange}", spokenRangeOf(formatter, locale, start, end, timeZone))}, `;
+}
+function rangeOf(state, date, isSelected) {
+	if (!isSelected || !("highlightedRange" in state) || state.highlightedRange === null) return null;
+	const isFirst = isSameDay(date, state.highlightedRange.start);
+	const isLast = isSameDay(date, state.highlightedRange.end);
+	return {
+		isEnd: isFirst || isLast,
+		isFirst,
+		isLast
+	};
+}
 /**
 * One row of an open list: the check where the row is the entry shown, the
 * room it takes where it is not, then the month or the year, in body large.
@@ -971,6 +1111,18 @@ function selectThen(state, date) {
 		state.setFocusedDate(date);
 	};
 }
+function spokenRangeOf(formatter, locale, start, end, timeZone) {
+	const parts = formatter.formatRangeToParts(start.toDate(timeZone), end.toDate(timeZone));
+	let separator = -1;
+	for (const [index, part] of parts.entries()) {
+		if (part.source === "endRange") break;
+		if (part.source === "shared" && part.type === "literal") separator = index;
+	}
+	return messagesFor(locale).calendar.dateRange.replace("{startDate}", textOf(parts.slice(0, Math.max(0, separator)))).replace("{endDate}", textOf(parts.slice(separator + 1)));
+}
+function textOf(parts) {
+	return parts.map((part) => part.value).join("");
+}
 function toggleThen(setOpen, list) {
 	return () => {
 		setOpen((open) => open === list ? null : list);
@@ -1034,15 +1186,33 @@ function useMonthSlide(start, t0) {
 		};
 	});
 }
-function visibleMonthOf(state, locale) {
-	const { start } = state.visibleRange;
-	return new DateFormatter(locale, {
+/**
+* The container's style for the months a calendar shows: the page's 360dp,
+* or as wide as its months side by side with the room between them.
+*/
+function useRootStyle(months) {
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	return useSideBySide(months) ? composeStyles(own.root, { width: rootWidthOf(theme, months) }) : own.root;
+}
+function useSideBySide(months) {
+	const sizeClass = useWindowSizeClass();
+	return months > 1 && sizeClass !== "compact" && sizeClass !== "medium";
+}
+function visibleRangeOf(state, locale, spoken = false) {
+	const { end, start } = state.visibleRange;
+	const { timeZone } = state;
+	const formatter = new DateFormatter(locale, {
 		calendar: start.calendar.identifier,
-		era: eraOf(start),
+		era: eraOf(start) ?? eraOf(end),
 		month: "long",
-		timeZone: state.timeZone,
+		timeZone,
 		year: "numeric"
-	}).format(start.toDate(state.timeZone));
+	});
+	const first = start.calendar.getFormattableMonth?.(start) ?? start;
+	if (isSameMonth(start, end)) return formatter.format(first.toDate(timeZone));
+	const last = end.calendar.getFormattableMonth?.(end) ?? end;
+	return spoken ? spokenRangeOf(formatter, locale, first, last, timeZone) : formatter.formatRange(first.toDate(timeZone), last.toDate(timeZone));
 }
 function weekdaysOf(state, locale, firstDayOfWeek) {
 	const first = startOfWeek(today(state.timeZone), locale, firstDayOfWeek);
@@ -1058,12 +1228,11 @@ function weekdaysOf(state, locale, firstDayOfWeek) {
 		};
 	});
 }
-function weeksOf(state) {
-	const { start } = state.visibleRange;
-	return Array.from({ length: state.getWeeksInMonth() }, (_unused, week) => {
+function weeksOf(state, start) {
+	return Array.from({ length: state.getWeeksInMonth(start) }, (_unused, week) => {
 		const key = start.add({ weeks: week }).toString();
 		return {
-			days: state.getDatesInWeek(week).map((date, day) => ({
+			days: state.getDatesInWeek(week, start).map((date, day) => ({
 				date,
 				key: date?.toString() ?? `${key}+${String(day)}`
 			})),
@@ -1177,6 +1346,6 @@ function yearsOf(state, locale) {
 }
 const NONE = /* @__PURE__ */ new Set();
 //#endregion
-export { CalendarFrame, visibleMonthOf };
+export { CalendarFocusContext, CalendarFrame, useRootStyle, visibleRangeOf };
 
 //# sourceMappingURL=index.js.map