@kanso-labs/react-native-kanso-ui 0.6.0 → 0.7.0

package/dist/calendar/index.js

@@ -0,0 +1,1182 @@
+import { useTheme } from "../theme/scope.js";
+import { composeStyles } from "../theme/styles.js";
+import { hitSlop, usePressFeedback } from "../press/index.js";
+import { useTypeRole } from "../typography/roles.js";
+import { withOpacity } from "../theme/color.js";
+import { ArrowDropDownGlyph, CheckGlyph, ChevronEndGlyph } from "../glyphs/index.js";
+import { messagesFor } from "../i18n/index.js";
+import { IconButton } from "../components/icon-button/index.js";
+import { useFocusOnPlaced, useReturnFocus } from "../overlay/panel.js";
+import { styles, stylesOf } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { FlatList, I18nManager, Pressable, Text, View } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { 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";
+//#region src/calendar/index.tsx
+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.
+*/
+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
+		});
+		$[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, {
+				locale,
+				state,
+				children: grid
+			});
+			$[4] = grid;
+			$[5] = locale;
+			$[6] = state;
+			$[7] = t2;
+		} else t2 = $[7];
+		return t2;
+	}
+	let t2;
+	if ($[8] !== locale || $[9] !== state) {
+		t2 = /* @__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;
+}
+/** The two chevrons with the month and year between them. */
+function CalendarHeader(t0) {
+	const $ = c(19);
+	const { locale, state } = t0;
+	const own = stylesOf(useTheme());
+	const role = useTypeRole("labelLarge");
+	const T0 = View;
+	const t1 = own.header;
+	let t2;
+	if ($[0] !== locale || $[1] !== state) {
+		t2 = /* @__PURE__ */ jsx(Chevron, {
+			direction: "previous",
+			locale,
+			state
+		});
+		$[0] = locale;
+		$[1] = state;
+		$[2] = t2;
+	} else t2 = $[2];
+	const T1 = Text;
+	const t3 = "polite";
+	const t4 = "heading";
+	const t5 = composeStyles(role, own.heading);
+	let t6;
+	if ($[3] !== locale || $[4] !== state) {
+		t6 = visibleMonthOf(state, locale);
+		$[3] = locale;
+		$[4] = state;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== T1 || $[7] !== t5 || $[8] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T1, {
+			"aria-live": t3,
+			role: t4,
+			style: t5,
+			children: t6
+		});
+		$[6] = T1;
+		$[7] = t5;
+		$[8] = t6;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== locale || $[11] !== state) {
+		t8 = /* @__PURE__ */ jsx(Chevron, {
+			direction: "next",
+			locale,
+			state
+		});
+		$[10] = locale;
+		$[11] = state;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== T0 || $[14] !== own || $[15] !== t2 || $[16] !== t7 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(T0, {
+			style: t1,
+			children: [
+				t2,
+				t7,
+				t8
+			]
+		});
+		$[13] = T0;
+		$[14] = own;
+		$[15] = t2;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	return t9;
+}
+/**
+* The docked header: the month's menu button between the chevrons that step
+* it, and the year's after them. A press opens the button's list in the
+* grid's place, where the page draws it, rather than in a menu over it; a
+* calendar inside a picker is already in one. While a list is open the
+* chevrons give way to the room they took and the other button is disabled,
+* and choosing an entry, or pressing the one already checked, closes the
+* list and sends the screen reader back to its button.
+*
+* The month list names the months in full where the button names the month
+* short, as the page does. The year list runs a century either side of the
+* year shown, and `minValue` and `maxValue` cut it short; a month with no day
+* inside them is disabled.
+*/
+function CalendarMenus(t0) {
+	const $ = c(55);
+	const { children, locale, state } = t0;
+	const t1 = useTheme();
+	let t2;
+	if ($[0] !== t1) {
+		t2 = stylesOf(t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const own = t2;
+	let t3;
+	if ($[2] !== locale) {
+		t3 = messagesFor(locale);
+		$[2] = locale;
+		$[3] = t3;
+	} else t3 = $[3];
+	const words = t3.calendar;
+	const [open, setOpen] = useState(null);
+	const monthButton = useRef(null);
+	const yearButton = useRef(null);
+	const shownMonth = state.focusedDate.month - 1;
+	useReturnFocus(open === "month", false, monthButton);
+	useReturnFocus(open === "year", false, yearButton);
+	const t4 = own.header;
+	const t5 = own.headerGroup;
+	let t6;
+	if ($[4] !== locale || $[5] !== open || $[6] !== own.chevronRoom || $[7] !== state) {
+		t6 = open === null ? /* @__PURE__ */ jsx(Chevron, {
+			direction: "previous",
+			locale,
+			state
+		}) : /* @__PURE__ */ jsx(View, { style: own.chevronRoom });
+		$[4] = locale;
+		$[5] = open;
+		$[6] = own.chevronRoom;
+		$[7] = state;
+		$[8] = t6;
+	} else t6 = $[8];
+	const t7 = open === "month";
+	const t8 = state.isDisabled || open === "year";
+	let t9;
+	if ($[9] !== locale || $[10] !== shownMonth || $[11] !== state) {
+		t9 = monthsOf(state, locale, "short")[shownMonth]?.formatted;
+		$[9] = locale;
+		$[10] = shownMonth;
+		$[11] = state;
+		$[12] = t9;
+	} else t9 = $[12];
+	const t10 = words.month;
+	let t11;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = toggleThen(setOpen, "month");
+		$[13] = t11;
+	} else t11 = $[13];
+	let t12;
+	if ($[14] !== t7 || $[15] !== t8 || $[16] !== t9 || $[17] !== words.month) {
+		t12 = /* @__PURE__ */ jsx(MenuButton, {
+			buttonRef: monthButton,
+			expanded: t7,
+			isDisabled: t8,
+			label: t9,
+			name: t10,
+			onPress: t11
+		});
+		$[14] = t7;
+		$[15] = t8;
+		$[16] = t9;
+		$[17] = words.month;
+		$[18] = t12;
+	} else t12 = $[18];
+	let t13;
+	if ($[19] !== locale || $[20] !== open || $[21] !== own.chevronRoom || $[22] !== state) {
+		t13 = open === null ? /* @__PURE__ */ jsx(Chevron, {
+			direction: "next",
+			locale,
+			state
+		}) : /* @__PURE__ */ jsx(View, { style: own.chevronRoom });
+		$[19] = locale;
+		$[20] = open;
+		$[21] = own.chevronRoom;
+		$[22] = state;
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] !== own.headerGroup || $[25] !== t12 || $[26] !== t13 || $[27] !== t6) {
+		t14 = /* @__PURE__ */ jsxs(View, {
+			style: t5,
+			children: [
+				t6,
+				t12,
+				t13
+			]
+		});
+		$[24] = own.headerGroup;
+		$[25] = t12;
+		$[26] = t13;
+		$[27] = t6;
+		$[28] = t14;
+	} else t14 = $[28];
+	const t15 = open === "year";
+	const t16 = state.isDisabled || open === "month";
+	let t17;
+	if ($[29] !== locale || $[30] !== state) {
+		t17 = yearOf(state, locale);
+		$[29] = locale;
+		$[30] = state;
+		$[31] = t17;
+	} else t17 = $[31];
+	const t18 = words.year;
+	let t19;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = toggleThen(setOpen, "year");
+		$[32] = t19;
+	} else t19 = $[32];
+	let t20;
+	if ($[33] !== t15 || $[34] !== t16 || $[35] !== t17 || $[36] !== words.year) {
+		t20 = /* @__PURE__ */ jsx(MenuButton, {
+			buttonRef: yearButton,
+			expanded: t15,
+			isDisabled: t16,
+			label: t17,
+			name: t18,
+			onPress: t19
+		});
+		$[33] = t15;
+		$[34] = t16;
+		$[35] = t17;
+		$[36] = words.year;
+		$[37] = t20;
+	} else t20 = $[37];
+	let t21;
+	if ($[38] !== own.header || $[39] !== t14 || $[40] !== t20) {
+		t21 = /* @__PURE__ */ jsxs(View, {
+			style: t4,
+			children: [t14, t20]
+		});
+		$[38] = own.header;
+		$[39] = t14;
+		$[40] = t20;
+		$[41] = t21;
+	} else t21 = $[41];
+	const t22 = open === null ? children : null;
+	let t23;
+	if ($[42] !== locale || $[43] !== open || $[44] !== state) {
+		t23 = open === "month" ? /* @__PURE__ */ jsx(MonthList, {
+			locale,
+			setOpen,
+			state
+		}) : null;
+		$[42] = locale;
+		$[43] = open;
+		$[44] = state;
+		$[45] = t23;
+	} else t23 = $[45];
+	let t24;
+	if ($[46] !== locale || $[47] !== open || $[48] !== state) {
+		t24 = open === "year" ? /* @__PURE__ */ jsx(YearList, {
+			locale,
+			setOpen,
+			state
+		}) : null;
+		$[46] = locale;
+		$[47] = open;
+		$[48] = state;
+		$[49] = t24;
+	} else t24 = $[49];
+	let t25;
+	if ($[50] !== t21 || $[51] !== t22 || $[52] !== t23 || $[53] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			t21,
+			t22,
+			t23,
+			t24
+		] });
+		$[50] = t21;
+		$[51] = t22;
+		$[52] = t23;
+		$[53] = t24;
+		$[54] = t25;
+	} else t25 = $[54];
+	return t25;
+}
+/**
+* A chevron that moves the month, the icon buttons page's standard 40dp
+* button. Disabled where the month it would move to is outside `minValue`
+* and `maxValue`, or the whole calendar is disabled.
+*/
+function Chevron(t0) {
+	const $ = c(20);
+	const { direction, locale, state } = t0;
+	const t1 = useTheme();
+	let t2;
+	if ($[0] !== t1) {
+		t2 = stylesOf(t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const own = t2;
+	const previous = direction === "previous";
+	let t3;
+	if ($[2] !== previous || $[3] !== state) {
+		t3 = previous ? state.isPreviousVisibleRangeInvalid() : state.isNextVisibleRangeInvalid();
+		$[2] = previous;
+		$[3] = state;
+		$[4] = t3;
+	} else t3 = $[4];
+	const outside = t3;
+	let t4;
+	if ($[5] !== locale) {
+		t4 = messagesFor(locale);
+		$[5] = locale;
+		$[6] = t4;
+	} else t4 = $[6];
+	const t5 = t4.calendar[direction];
+	const t6 = state.isDisabled || outside;
+	let t7;
+	if ($[7] !== direction || $[8] !== state) {
+		t7 = pageThen(state, direction);
+		$[7] = direction;
+		$[8] = state;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== previous) {
+		t8 = previous ? previousGlyphStyle() : void 0;
+		$[10] = previous;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== t8) {
+		t9 = /* @__PURE__ */ jsx(ChevronEndGlyph, { style: t8 });
+		$[12] = t8;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== own.chevron || $[15] !== t5 || $[16] !== t6 || $[17] !== t7 || $[18] !== t9) {
+		t10 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t5,
+			isDisabled: t6,
+			onPress: t7,
+			style: own.chevron,
+			children: t9
+		});
+		$[14] = own.chevron;
+		$[15] = t5;
+		$[16] = t6;
+		$[17] = t7;
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	return t10;
+}
+function chooseThen(state, setOpen, shown) {
+	return (entry) => {
+		if (entry.id !== shown) state.setFocusedDate(entry.date);
+		setOpen(null);
+	};
+}
+/**
+* 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.
+*/
+function DateCell(t0) {
+	const $ = c(29);
+	const { date, locale, 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);
+		$[0] = date;
+		$[1] = state;
+		$[2] = t1;
+	} else t1 = $[2];
+	const isDisabled = t1;
+	let t2;
+	if ($[3] !== date || $[4] !== state) {
+		t2 = state.isCellUnavailable(date);
+		$[3] = date;
+		$[4] = state;
+		$[5] = t2;
+	} else t2 = $[5];
+	const isUnavailable = t2;
+	const selectable = !isDisabled && !isUnavailable;
+	const isSelected = selectable && state.isSelected(date);
+	const isCurrent = isToday(date, state.timeZone);
+	const feedback = usePressFeedback({
+		color: isSelected ? colors.onPrimary : colors.onSurface,
+		corners: own.date,
+		disabled: !selectable
+	});
+	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;
+		$[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;
+	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
+		});
+		$[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]
+		});
+		$[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;
+}
+function dateLabelOf(date, state, locale, isCurrent, isSelected) {
+	const words = messagesFor(locale).calendar;
+	const full = new DateFormatter(locale, {
+		day: "numeric",
+		era: eraOf(date),
+		month: "long",
+		timeZone: state.timeZone,
+		weekday: "long",
+		year: "numeric"
+	}).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}`;
+	return said;
+}
+function dayOf(date, state, locale) {
+	return new DateFormatter(locale, {
+		calendar: date.calendar.identifier,
+		day: "numeric",
+		timeZone: state.timeZone
+	}).formatToParts(date.toDate(state.timeZone)).find((part) => part.type === "day")?.value ?? String(date.day);
+}
+function eraOf(date) {
+	return date.calendar.identifier === "gregory" && date.era === "BC" ? "short" : void 0;
+}
+function layoutOf(height) {
+	return (_data, index) => ({
+		index,
+		length: height,
+		offset: height * index
+	});
+}
+function listKeyOf(entry) {
+	return String(entry.id);
+}
+/**
+* The month or the year as the page's menu button, opening its list. Named
+* by what it shows and then by what it is, "Sep month", which keeps the
+* visible text the start of the name.
+*/
+function MenuButton(t0) {
+	const $ = c(27);
+	const { buttonRef, expanded, isDisabled, label, name, onPress } = t0;
+	const theme = useTheme();
+	const { colors, sizing, stateLayerOpacity } = theme;
+	const own = stylesOf(theme);
+	const role = useTypeRole("labelLarge");
+	const feedback = usePressFeedback({
+		color: colors.onSurfaceVariant,
+		corners: own.menuButton,
+		disabled: isDisabled
+	});
+	const T0 = Pressable;
+	const t1 = `${label ?? ""} ${name}`;
+	let t2;
+	if ($[0] !== sizing.controlSm) {
+		t2 = hitSlop(sizing.controlSm);
+		$[0] = sizing.controlSm;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = "button";
+	const t4 = feedback.handlers;
+	const t5 = composeStyles(own.menuButton, feedback.ring);
+	const t6 = feedback.layer;
+	const T1 = Text;
+	const t7 = composeStyles(role, own.menuButtonText, isDisabled ? own.dateTextDisabled : void 0);
+	let t8;
+	if ($[2] !== T1 || $[3] !== label || $[4] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T1, {
+			style: t7,
+			children: label
+		});
+		$[2] = T1;
+		$[3] = label;
+		$[4] = t7;
+		$[5] = t8;
+	} else t8 = $[5];
+	let t9;
+	if ($[6] !== colors.onSurface || $[7] !== colors.onSurfaceVariant || $[8] !== isDisabled || $[9] !== stateLayerOpacity) {
+		t9 = isDisabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : colors.onSurfaceVariant;
+		$[6] = colors.onSurface;
+		$[7] = colors.onSurfaceVariant;
+		$[8] = isDisabled;
+		$[9] = stateLayerOpacity;
+		$[10] = t9;
+	} else t9 = $[10];
+	const t10 = expanded ? own.arrowExpanded : void 0;
+	let t11;
+	if ($[11] !== t10 || $[12] !== t9) {
+		t11 = /* @__PURE__ */ jsx(ArrowDropDownGlyph, {
+			color: t9,
+			size: 18,
+			style: t10
+		});
+		$[11] = t10;
+		$[12] = t9;
+		$[13] = t11;
+	} else t11 = $[13];
+	let t12;
+	if ($[14] !== T0 || $[15] !== buttonRef || $[16] !== expanded || $[17] !== feedback.handlers || $[18] !== feedback.layer || $[19] !== isDisabled || $[20] !== onPress || $[21] !== t1 || $[22] !== t11 || $[23] !== t2 || $[24] !== t5 || $[25] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(T0, {
+			"aria-expanded": expanded,
+			"aria-label": t1,
+			hitSlop: t2,
+			onPress,
+			ref: buttonRef,
+			role: t3,
+			...t4,
+			disabled: isDisabled,
+			style: t5,
+			children: [
+				t6,
+				t8,
+				t11
+			]
+		});
+		$[14] = T0;
+		$[15] = buttonRef;
+		$[16] = expanded;
+		$[17] = feedback.handlers;
+		$[18] = feedback.layer;
+		$[19] = isDisabled;
+		$[20] = onPress;
+		$[21] = t1;
+		$[22] = t11;
+		$[23] = t2;
+		$[24] = t5;
+		$[25] = t8;
+		$[26] = t12;
+	} else t12 = $[26];
+	return t12;
+}
+/**
+* An open month or year list, in the grid's place: a list of radio rows, the
+* entry shown checked, opening scrolled so that entry sits in the middle with
+* the entries either side of it in view. The screen reader is sent to it as
+* it opens.
+*/
+function MenuList(t0) {
+	const $ = c(15);
+	const { disabled, entries, name, onChoose, shown } = t0;
+	const theme = useTheme();
+	let t1;
+	if ($[0] !== theme) {
+		t1 = stylesOf(theme);
+		$[0] = theme;
+		$[1] = t1;
+	} else t1 = $[1];
+	const own = t1;
+	const [checked, setChecked] = useState(null);
+	useFocusOnPlaced(true, checked);
+	let t2;
+	if ($[2] !== theme.sizing.controlMd) {
+		t2 = layoutOf(theme.sizing.controlMd);
+		$[2] = theme.sizing.controlMd;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = Math.max(0, Math.min(shown - ROWS_ABOVE_SHOWN, entries.length - 7));
+	let t4;
+	if ($[4] !== disabled || $[5] !== onChoose || $[6] !== shown) {
+		t4 = rowOf({
+			disabled,
+			onChoose,
+			setChecked,
+			shown
+		});
+		$[4] = disabled;
+		$[5] = onChoose;
+		$[6] = shown;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== entries || $[9] !== name || $[10] !== own.list || $[11] !== t2 || $[12] !== t3 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsx(FlatList, {
+			"aria-label": name,
+			data: entries,
+			getItemLayout: t2,
+			initialScrollIndex: t3,
+			keyExtractor: listKeyOf,
+			renderItem: t4,
+			role: "radiogroup",
+			style: own.list
+		});
+		$[8] = entries;
+		$[9] = name;
+		$[10] = own.list;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
+}
+/**
+* The weekday row and the 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 theme = useTheme();
+	const own = stylesOf(theme);
+	const role = useTypeRole("bodyLarge");
+	const start = state.visibleRange.start;
+	const slide = useMonthSlide(start, theme);
+	const rowStyle = composeStyles(styles.row, own.rowHeight);
+	const T0 = View;
+	const t1 = own.grid;
+	const T1 = View;
+	const t2 = true;
+	const t3 = 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,
+			style: rowStyle,
+			children: t3
+		});
+		$[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, {
+			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,
+					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, {
+			style: slide,
+			children: t5
+		});
+		$[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]
+		});
+		$[11] = T0;
+		$[12] = own;
+		$[13] = t4;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
+}
+/** The open month list: the months of the year shown, named in full. */
+function MonthList(t0) {
+	const $ = c(19);
+	const { locale, setOpen, state } = t0;
+	let T0;
+	let months;
+	let shown;
+	let t1;
+	if ($[0] !== locale || $[1] !== state) {
+		months = monthsOf(state, locale, "long");
+		shown = state.focusedDate.month - 1;
+		T0 = MenuList;
+		t1 = outsideBounds(state, months);
+		$[0] = locale;
+		$[1] = state;
+		$[2] = T0;
+		$[3] = months;
+		$[4] = shown;
+		$[5] = t1;
+	} else {
+		T0 = $[2];
+		months = $[3];
+		shown = $[4];
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== locale) {
+		t2 = messagesFor(locale);
+		$[6] = locale;
+		$[7] = t2;
+	} else t2 = $[7];
+	const t3 = t2.calendar.month;
+	let t4;
+	if ($[8] !== setOpen || $[9] !== shown || $[10] !== state) {
+		t4 = chooseThen(state, setOpen, shown);
+		$[8] = setOpen;
+		$[9] = shown;
+		$[10] = state;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== T0 || $[13] !== months || $[14] !== shown || $[15] !== t1 || $[16] !== t2.calendar.month || $[17] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			disabled: t1,
+			entries: months,
+			name: t3,
+			onChoose: t4,
+			shown
+		});
+		$[12] = T0;
+		$[13] = months;
+		$[14] = shown;
+		$[15] = t1;
+		$[16] = t2.calendar.month;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	return t5;
+}
+function monthsOf(state, locale, format) {
+	const { focusedDate, timeZone } = state;
+	const formatter = new DateFormatter(locale, {
+		calendar: focusedDate.calendar.identifier,
+		month: format,
+		timeZone
+	});
+	return Array.from({ length: focusedDate.calendar.getMonthsInYear(focusedDate) }, (_unused, index) => {
+		const date = focusedDate.set({ month: index + 1 });
+		const shown = date.calendar.getFormattableMonth?.(date) ?? date;
+		return {
+			date,
+			formatted: formatter.format(shown.toDate(timeZone)),
+			id: 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));
+}
+function pageThen(state, direction) {
+	return () => {
+		if (direction === "next") state.focusNextPage();
+		else state.focusPreviousPage();
+	};
+}
+function previousGlyphStyle() {
+	return I18nManager.isRTL ? styles.previousGlyphRightToLeft : styles.previousGlyph;
+}
+/**
+* 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.
+*/
+function Row(t0) {
+	const $ = c(13);
+	const { entry, isChecked, isDisabled, onChoose, setChecked } = t0;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const role = useTypeRole("bodyLarge");
+	let t1;
+	if ($[0] !== isDisabled || $[1] !== theme.colors.onSurface) {
+		t1 = {
+			color: theme.colors.onSurface,
+			disabled: isDisabled
+		};
+		$[0] = isDisabled;
+		$[1] = theme.colors.onSurface;
+		$[2] = t1;
+	} else t1 = $[2];
+	const feedback = usePressFeedback(t1);
+	let t2;
+	if ($[3] !== entry || $[4] !== onChoose) {
+		t2 = rowPressThen(onChoose, entry);
+		$[3] = entry;
+		$[4] = onChoose;
+		$[5] = t2;
+	} else t2 = $[5];
+	const t3 = feedback.handlers;
+	const t4 = composeStyles(own.listRow, isChecked ? own.listRowSelected : void 0, feedback.ring);
+	const t5 = feedback.layer;
+	let t6;
+	if ($[6] !== isChecked || $[7] !== theme.colors.onSurface) {
+		t6 = isChecked ? /* @__PURE__ */ jsx(CheckGlyph, { color: theme.colors.onSurface }) : null;
+		$[6] = isChecked;
+		$[7] = theme.colors.onSurface;
+		$[8] = t6;
+	} else t6 = $[8];
+	const T0 = Text;
+	const t7 = composeStyles(role, own.listText, isDisabled ? own.listTextDisabled : void 0);
+	let t8;
+	if ($[9] !== T0 || $[10] !== entry.formatted || $[11] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T0, {
+			style: t7,
+			children: entry.formatted
+		});
+		$[9] = T0;
+		$[10] = entry.formatted;
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	return /* @__PURE__ */ jsxs(Pressable, {
+		"aria-checked": isChecked,
+		onPress: t2,
+		ref: isChecked ? setChecked : void 0,
+		role: "radio",
+		...t3,
+		disabled: isDisabled,
+		style: t4,
+		children: [
+			t5,
+			/* @__PURE__ */ jsx(View, {
+				style: own.listCheck,
+				children: t6
+			}),
+			t8
+		]
+	});
+}
+function rowOf({ disabled, onChoose, setChecked, shown }) {
+	return ({ item }) => /* @__PURE__ */ jsx(Row, {
+		entry: item,
+		isChecked: item.id === shown,
+		isDisabled: disabled.has(item.id),
+		onChoose,
+		setChecked
+	});
+}
+function rowPressThen(onChoose, entry) {
+	return () => {
+		onChoose(entry);
+	};
+}
+function selectThen(state, date) {
+	return () => {
+		state.selectDate(date);
+		state.setFocusedDate(date);
+	};
+}
+function toggleThen(setOpen, list) {
+	return () => {
+		setOpen((open) => open === list ? null : list);
+	};
+}
+/**
+* Slides the weeks in from the side the new month comes from as the month
+* moves, 30dp over the medium duration on the emphasised decelerating curve,
+* fading in as they come: Material Design's shared axis transition for an
+* incoming page. The side follows the writing direction, so a later month
+* arrives from the end. Under reduced motion the month changes at once.
+*/
+function useMonthSlide(start, t0) {
+	const $ = c(7);
+	const { motion } = t0;
+	const reduceMotion = useReducedMotion();
+	const offset = useSharedValue(0);
+	const opacity = useSharedValue(1);
+	const shown = useRef(start);
+	let t1;
+	let t2;
+	if ($[0] !== motion || $[1] !== offset || $[2] !== opacity || $[3] !== reduceMotion || $[4] !== start) {
+		t1 = () => {
+			const travel = start.compare(shown.current);
+			shown.current = start;
+			if (travel === 0 || reduceMotion) return;
+			const timing = {
+				duration: motion.durationMedium2,
+				easing: Easing.bezier(...motion.easingEmphasizedDecelerate)
+			};
+			const side = (travel > 0 ? 1 : -1) * (I18nManager.isRTL ? -1 : 1);
+			offset.set(side * 30);
+			offset.set(withTiming(0, timing));
+			opacity.set(0);
+			opacity.set(withTiming(1, timing));
+		};
+		t2 = [
+			motion,
+			offset,
+			opacity,
+			reduceMotion,
+			start
+		];
+		$[0] = motion;
+		$[1] = offset;
+		$[2] = opacity;
+		$[3] = reduceMotion;
+		$[4] = start;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		t1 = $[5];
+		t2 = $[6];
+	}
+	useLayoutEffect(t1, t2);
+	return useAnimatedStyle(() => {
+		"worklet";
+		return {
+			opacity: opacity.get(),
+			transform: [{ translateX: offset.get() }]
+		};
+	});
+}
+function visibleMonthOf(state, locale) {
+	const { start } = state.visibleRange;
+	return new DateFormatter(locale, {
+		calendar: start.calendar.identifier,
+		era: eraOf(start),
+		month: "long",
+		timeZone: state.timeZone,
+		year: "numeric"
+	}).format(start.toDate(state.timeZone));
+}
+function weekdaysOf(state, locale, firstDayOfWeek) {
+	const first = startOfWeek(today(state.timeZone), locale, firstDayOfWeek);
+	const formatter = new DateFormatter(locale, {
+		timeZone: state.timeZone,
+		weekday: "narrow"
+	});
+	return Array.from({ length: 7 }, (_unused, index) => {
+		const date = first.add({ days: index });
+		return {
+			key: date.toString(),
+			label: formatter.format(date.toDate(state.timeZone))
+		};
+	});
+}
+function weeksOf(state) {
+	const { start } = state.visibleRange;
+	return Array.from({ length: state.getWeeksInMonth() }, (_unused, week) => {
+		const key = start.add({ weeks: week }).toString();
+		return {
+			days: state.getDatesInWeek(week).map((date, day) => ({
+				date,
+				key: date?.toString() ?? `${key}+${String(day)}`
+			})),
+			key
+		};
+	});
+}
+/** The open year list: the years either side of the one shown. */
+function YearList(t0) {
+	const $ = c(18);
+	const { locale, setOpen, state } = t0;
+	let T0;
+	let shown;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== locale || $[1] !== setOpen || $[2] !== state) {
+		const { entries, shown: t5 } = yearsOf(state, locale);
+		shown = t5;
+		T0 = MenuList;
+		t1 = NONE;
+		t2 = entries;
+		let t6;
+		if ($[9] !== locale) {
+			t6 = messagesFor(locale);
+			$[9] = locale;
+			$[10] = t6;
+		} else t6 = $[10];
+		t3 = t6.calendar.year;
+		t4 = chooseThen(state, setOpen, shown);
+		$[0] = locale;
+		$[1] = setOpen;
+		$[2] = state;
+		$[3] = T0;
+		$[4] = shown;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		T0 = $[3];
+		shown = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+	}
+	let t5;
+	if ($[11] !== T0 || $[12] !== shown || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			disabled: t1,
+			entries: t2,
+			name: t3,
+			onChoose: t4,
+			shown
+		});
+		$[11] = T0;
+		$[12] = shown;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+}
+function yearOf(state, locale) {
+	const { focusedDate, timeZone } = state;
+	return new DateFormatter(locale, {
+		calendar: focusedDate.calendar.identifier,
+		era: eraOf(focusedDate),
+		timeZone,
+		year: "numeric"
+	}).format(focusedDate.toDate(timeZone));
+}
+function yearsOf(state, locale) {
+	const { focusedDate, maxValue, minValue, timeZone } = state;
+	const formatter = new DateFormatter(locale, {
+		calendar: focusedDate.calendar.identifier,
+		era: eraOf(focusedDate),
+		timeZone,
+		year: "numeric"
+	});
+	let first = focusedDate.subtract({ years: Math.floor(LISTED_YEARS / 2) });
+	let last = focusedDate.add({ years: Math.ceil(LISTED_YEARS / 2) - 1 });
+	if (maxValue != null && last.compare(maxValue) > 0) {
+		last = toCalendarDate(maxValue);
+		first = last.subtract({ years: 200 });
+	}
+	if (minValue != null && first.compare(minValue) < 0) {
+		first = toCalendarDate(minValue);
+		last = first.add({ years: 200 });
+		if (maxValue != null && last.compare(maxValue) > 0) last = toCalendarDate(maxValue);
+	}
+	const entries = [];
+	let shown = 0;
+	for (let date = first; date.compare(last) <= 0 || isSameYear(date, last); date = date.add({ years: 1 })) {
+		const entry = date.compare(last) > 0 ? last : date;
+		if (isSameYear(entry, focusedDate)) shown = entries.length;
+		entries.push({
+			date: entry,
+			formatted: formatter.format(entry.toDate(timeZone)),
+			id: entries.length
+		});
+	}
+	return {
+		entries,
+		shown
+	};
+}
+const NONE = /* @__PURE__ */ new Set();
+//#endregion
+export { CalendarFrame, visibleMonthOf };
+
+//# sourceMappingURL=index.js.map