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

package/dist/components/time-picker/index.js

@@ -0,0 +1,1168 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { messagesFor } from "../../i18n/index.js";
+import { useLocaleOf } from "../../i18n/provider.js";
+import { ClockGlyph, KeyboardGlyph } from "../../glyphs/index.js";
+import { ButtonSlotContext } from "../../button/slots.js";
+import { Button } from "../button/index.js";
+import { IconButton } from "../icon-button/index.js";
+import { usePanelShown, usePanelStyle } from "../../overlay/panel.js";
+import { ModalWindow, NO_INSETS, insetsOf, panelRoleOf, useModalState } from "../../modal/index.js";
+import { roomOf } from "../../picker/index.js";
+import { DateSegments } from "../../segments/index.js";
+import { SegmentedField } from "../../segments/field.js";
+import { c } from "react/compiler-runtime";
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { createElement, use, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Svg, { Circle, Line } from "react-native-svg";
+import { DateFormatter, Time, getLocalTimeZone, toCalendarDateTime, today } from "@internationalized/date";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import { useOverlayTriggerState } from "react-stately/useOverlayTriggerState";
+import { useTimeFieldState } from "react-stately/useTimeFieldState";
+//#region src/components/time-picker/index.tsx
+const DIAL = 256;
+const CENTRE = DIAL / 2;
+const OUTER_RING = 101;
+const INNER_RING = 64;
+const HANDLE = 24;
+const WIDTH = 328;
+const BOX_HEIGHT = 80;
+const COLON = 24;
+const PERIOD_WIDTH = 52;
+const DIAL_GAP = 36;
+const HEADLINE_GAP = 20;
+const CENTRE_DOT = 4;
+const BETWEEN_DOT = 2;
+const SLOP = 10;
+const BOX_PARTS = /* @__PURE__ */ new Set(["hour", "minute"]);
+const UNDESCRIBED = [];
+const stylesOf = themedStyles(({ colors, radii, shadows, sizing, spacing }) => StyleSheet.create({
+	actions: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: spacing.sm,
+		justifyContent: "space-between",
+		marginTop: spacing.xl
+	},
+	box: {
+		alignItems: "center",
+		backgroundColor: colors.surfaceContainerHighest,
+		borderRadius: radii.sm,
+		height: BOX_HEIGHT,
+		justifyContent: "center",
+		width: sizing.controlXl
+	},
+	boxInput: { height: sizing.rowMd },
+	boxInputFocused: {
+		borderColor: colors.primary,
+		borderWidth: 2
+	},
+	boxSelected: { backgroundColor: colors.primaryContainer },
+	boxText: {
+		color: colors.onSurface,
+		fontVariant: ["tabular-nums"]
+	},
+	boxTextSelected: { color: colors.onPrimaryContainer },
+	buttons: {
+		flexDirection: "row",
+		gap: spacing.sm
+	},
+	caption: {
+		color: colors.onSurfaceVariant,
+		width: sizing.controlXl
+	},
+	captions: {
+		flexDirection: "row",
+		gap: COLON,
+		marginTop: spacing.sm
+	},
+	colon: {
+		color: colors.onSurface,
+		textAlign: "center",
+		width: COLON
+	},
+	container: {
+		backgroundColor: colors.surfaceContainerHigh,
+		borderRadius: radii.xl,
+		boxShadow: shadows.elevation3,
+		maxHeight: "100%",
+		maxWidth: "100%",
+		overflow: "hidden",
+		transformOrigin: "center",
+		width: WIDTH
+	},
+	content: { padding: spacing.xl },
+	dial: {
+		alignSelf: "center",
+		...Platform.OS === "web" ? void 0 : { direction: "ltr" },
+		height: DIAL,
+		marginTop: DIAL_GAP,
+		width: DIAL
+	},
+	dialLabel: {
+		alignItems: "center",
+		height: 48,
+		justifyContent: "center",
+		position: "absolute",
+		width: 48
+	},
+	dialLabels: {
+		...StyleSheet.absoluteFill,
+		pointerEvents: "none"
+	},
+	dialText: { color: colors.onSurface },
+	dialTextSelected: { color: colors.onPrimary },
+	headline: {
+		color: colors.onSurfaceVariant,
+		marginBottom: HEADLINE_GAP
+	},
+	insetRing: { outlineOffset: -2 },
+	layout: {
+		alignItems: "center",
+		bottom: 0,
+		justifyContent: "center",
+		left: 0,
+		pointerEvents: "box-none",
+		position: "absolute",
+		right: 0,
+		top: 0
+	},
+	notDrawn: { display: "none" },
+	period: {
+		borderColor: colors.outline,
+		borderRadius: radii.sm,
+		borderWidth: 1,
+		height: BOX_HEIGHT,
+		overflow: "hidden",
+		width: PERIOD_WIDTH
+	},
+	periodDivider: {
+		borderTopColor: colors.outline,
+		borderTopWidth: 1
+	},
+	periodHalf: {
+		alignItems: "center",
+		flexBasis: 0,
+		flexGrow: 1,
+		justifyContent: "center"
+	},
+	periodInput: { height: sizing.rowMd },
+	periodSelected: { backgroundColor: colors.tertiaryContainer },
+	periodText: { color: colors.onSurfaceVariant },
+	periodTextSelected: { color: colors.onTertiaryContainer },
+	row: {
+		alignItems: "flex-start",
+		flexDirection: "row",
+		gap: spacing.md,
+		justifyContent: "center"
+	}
+}));
+/**
+* A picked time as the field's state takes it, which is always a date and
+* time: a bare time is put on today, and the field takes the date off again
+* on the way out.
+*/
+function asDateTime(time) {
+	return "day" in time ? time : toCalendarDateTime(today(getLocalTimeZone()), time);
+}
+function clockOf({ isDisabled, isOpen, label, onPress, ref }) {
+	return /* @__PURE__ */ jsx(IconButton, {
+		"aria-expanded": isOpen,
+		"aria-label": label,
+		isDisabled,
+		onPress,
+		ref,
+		children: /* @__PURE__ */ jsx(ClockGlyph, {})
+	});
+}
+function Dial(t0) {
+	const $ = c(49);
+	const { draft, locale, onPick, onRelease, part, testID, twelveHour } = t0;
+	const theme = useTheme();
+	const { colors } = theme;
+	const styles = stylesOf(theme);
+	const role = useTypeRole("bodyLarge");
+	let t1;
+	if ($[0] !== onPick || $[1] !== onRelease || $[2] !== testID) {
+		t1 = {
+			onPick,
+			onRelease,
+			testID
+		};
+		$[0] = onPick;
+		$[1] = onRelease;
+		$[2] = testID;
+		$[3] = t1;
+	} else t1 = $[3];
+	const gesture = useDialGesture(t1);
+	const labels = labelsFor(part, draft, locale, twelveHour);
+	const between = part === "minute" && draft.minute % 5 !== 0;
+	let t2;
+	if ($[4] !== draft.hour || $[5] !== draft.minute || $[6] !== part || $[7] !== twelveHour) {
+		t2 = part === "minute" ? polar(draft.minute / 60, OUTER_RING) : polar(draft.hour % 12 / 12, !twelveHour && draft.hour >= 12 ? INNER_RING : OUTER_RING);
+		$[4] = draft.hour;
+		$[5] = draft.minute;
+		$[6] = part;
+		$[7] = twelveHour;
+		$[8] = t2;
+	} else t2 = $[8];
+	const handle = t2;
+	const T0 = GestureHandlerRootView;
+	const t3 = styles.dial;
+	const T1 = GestureDetector;
+	const T2 = View;
+	const t4 = true;
+	const t5 = testID === void 0 ? void 0 : `${testID}-dial`;
+	let t6;
+	if ($[9] !== colors.surfaceContainerHighest) {
+		t6 = /* @__PURE__ */ jsx(Circle, {
+			cx: CENTRE,
+			cy: CENTRE,
+			fill: colors.surfaceContainerHighest,
+			r: CENTRE
+		});
+		$[9] = colors.surfaceContainerHighest;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== colors.primary || $[12] !== handle.x || $[13] !== handle.y) {
+		t7 = /* @__PURE__ */ jsx(Line, {
+			stroke: colors.primary,
+			strokeWidth: 2,
+			x1: CENTRE,
+			x2: handle.x,
+			y1: CENTRE,
+			y2: handle.y
+		});
+		$[11] = colors.primary;
+		$[12] = handle.x;
+		$[13] = handle.y;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== colors.primary) {
+		t8 = /* @__PURE__ */ jsx(Circle, {
+			cx: CENTRE,
+			cy: CENTRE,
+			fill: colors.primary,
+			r: CENTRE_DOT
+		});
+		$[15] = colors.primary;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== colors.primary || $[18] !== handle.x || $[19] !== handle.y) {
+		t9 = /* @__PURE__ */ jsx(Circle, {
+			cx: handle.x,
+			cy: handle.y,
+			fill: colors.primary,
+			r: HANDLE
+		});
+		$[17] = colors.primary;
+		$[18] = handle.x;
+		$[19] = handle.y;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== between || $[22] !== colors.onPrimary || $[23] !== handle.x || $[24] !== handle.y) {
+		t10 = between ? /* @__PURE__ */ jsx(Circle, {
+			cx: handle.x,
+			cy: handle.y,
+			fill: colors.onPrimary,
+			r: BETWEEN_DOT
+		}) : null;
+		$[21] = between;
+		$[22] = colors.onPrimary;
+		$[23] = handle.x;
+		$[24] = handle.y;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[26] !== t10 || $[27] !== t6 || $[28] !== t7 || $[29] !== t8 || $[30] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(Svg, {
+			height: DIAL,
+			viewBox: `0 0 ${DIAL} ${DIAL}`,
+			width: DIAL,
+			children: [
+				t6,
+				t7,
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[26] = t10;
+		$[27] = t6;
+		$[28] = t7;
+		$[29] = t8;
+		$[30] = t9;
+		$[31] = t11;
+	} else t11 = $[31];
+	const T3 = View;
+	const t12 = styles.dialLabels;
+	const t13 = labels.map((label) => /* @__PURE__ */ jsx(View, {
+		style: composeStyles(styles.dialLabel, placeOf(label)),
+		children: /* @__PURE__ */ jsx(Text, {
+			style: composeStyles(role, label.isSelected ? styles.dialTextSelected : styles.dialText),
+			children: label.text
+		})
+	}, label.key));
+	let t14;
+	if ($[32] !== T3 || $[33] !== styles || $[34] !== t13) {
+		t14 = /* @__PURE__ */ jsx(T3, {
+			style: t12,
+			children: t13
+		});
+		$[32] = T3;
+		$[33] = styles;
+		$[34] = t13;
+		$[35] = t14;
+	} else t14 = $[35];
+	let t15;
+	if ($[36] !== T2 || $[37] !== t11 || $[38] !== t14 || $[39] !== t5) {
+		t15 = /* @__PURE__ */ jsxs(T2, {
+			"aria-hidden": t4,
+			testID: t5,
+			children: [t11, t14]
+		});
+		$[36] = T2;
+		$[37] = t11;
+		$[38] = t14;
+		$[39] = t5;
+		$[40] = t15;
+	} else t15 = $[40];
+	let t16;
+	if ($[41] !== T1 || $[42] !== gesture || $[43] !== t15) {
+		t16 = /* @__PURE__ */ jsx(T1, {
+			gesture,
+			children: t15
+		});
+		$[41] = T1;
+		$[42] = gesture;
+		$[43] = t15;
+		$[44] = t16;
+	} else t16 = $[44];
+	let t17;
+	if ($[45] !== T0 || $[46] !== styles || $[47] !== t16) {
+		t17 = /* @__PURE__ */ jsx(T0, {
+			style: t3,
+			children: t16
+		});
+		$[45] = T0;
+		$[46] = styles;
+		$[47] = t16;
+		$[48] = t17;
+	} else t17 = $[48];
+	return t17;
+}
+/** One label, placed a fraction of a turn round a ring. */
+function dialLabel(key, text, isSelected, turn, radius) {
+	const { x, y } = polar(turn, radius);
+	return {
+		isSelected,
+		key,
+		text,
+		x,
+		y
+	};
+}
+function drawingOf(styles, role, isDial, shown) {
+	const selected = (type, isActive) => isDial ? type === shown : isActive;
+	return {
+		box: (type, isActive) => composeStyles(styles.box, isDial ? void 0 : styles.boxInput, selected(type, isActive) ? styles.boxSelected : void 0, !isDial && isActive ? styles.boxInputFocused : void 0),
+		literal: composeStyles(role, styles.colon),
+		parts: BOX_PARTS,
+		raisesKeyboard: !isDial,
+		text: (type, isActive) => composeStyles(role, styles.boxText, selected(type, isActive) ? styles.boxTextSelected : void 0)
+	};
+}
+/** A part's name as the locale writes it, opening with a capital. */
+function fieldName(name, locale) {
+	return name.charAt(0).toLocaleUpperCase(locale) + name.slice(1);
+}
+/**
+* The time the modal opens on: the field's own, else its placeholder, else
+* midnight. A date and time keeps its date, so the field gets back what it
+* holds.
+*/
+function initialTime(field, placeholderValue) {
+	const held = field.value;
+	if (held !== null && "hour" in held) return held;
+	return placeholderValue ?? new Time();
+}
+/** The labels the dial draws for one part, in the locale's digits. */
+function labelsFor(part, time, locale, twelveHour) {
+	const steps = Array.from({ length: 12 }, (_, step) => step);
+	if (part === "minute") {
+		const digits = new Intl.NumberFormat(locale, { minimumIntegerDigits: 2 });
+		return steps.map((step) => dialLabel(`m${step}`, digits.format(step * 5), time.minute === step * 5, step / 12, OUTER_RING));
+	}
+	const hours = new DateFormatter(locale, {
+		hour: "numeric",
+		hour12: twelveHour
+	});
+	if (twelveHour) return steps.map((step) => dialLabel(`h${step}`, partOf(hours, step, "hour"), time.hour % 12 === step, step / 12, OUTER_RING));
+	return [...steps.map((step) => dialLabel(`h${step}`, partOf(hours, step, "hour"), time.hour === step, step / 12, OUTER_RING)), ...steps.map((step) => dialLabel(`h${step + 12}`, partOf(hours, step + 12, "hour"), time.hour === step + 12, step / 12, INNER_RING))];
+}
+function ModalContent(t0) {
+	const $ = c(57);
+	const { cancelLabel, confirmLabel, defaultMode, enterTimeLabel, field, fieldLabel, granularity, headlineId, hourCycle, labelId, locale, motion, onClose, placeholderValue, selectTimeLabel, setHeadline, testID } = t0;
+	const theme = useTheme();
+	const styles = stylesOf(theme);
+	const headlineRole = useTypeRole("labelMedium");
+	const captionRole = useTypeRole("bodySmall");
+	const dialRole = useTypeRole("displayLarge");
+	const inputRole = useTypeRole("displayMedium");
+	const words = messagesFor(locale).segments;
+	let t1;
+	if ($[0] !== field || $[1] !== placeholderValue) {
+		t1 = () => initialTime(field, placeholderValue);
+		$[0] = field;
+		$[1] = placeholderValue;
+		$[2] = t1;
+	} else t1 = $[2];
+	const [draft, setDraft] = useState(t1);
+	const [mode, setMode] = useState(defaultMode);
+	const [part, setPart] = useState("hour");
+	const [content, setContent] = useState(0);
+	const [room, setRoom] = useState(0);
+	const boxes = useRef(null);
+	let t2;
+	if ($[3] !== hourCycle || $[4] !== locale) {
+		t2 = usesTwelveHours(locale, hourCycle);
+		$[3] = hourCycle;
+		$[4] = locale;
+		$[5] = t2;
+	} else t2 = $[5];
+	const twelveHour = t2;
+	const showsMinutes = granularity === "minute";
+	const isDial = mode === "dial";
+	const isAfternoon = draft.hour >= 12;
+	const headline = isDial ? selectTimeLabel : enterTimeLabel;
+	const periods = new DateFormatter(locale, {
+		hour: "numeric",
+		hour12: true
+	});
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (next) => {
+			if (next !== null) setDraft(next);
+		};
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== draft || $[8] !== granularity || $[9] !== hourCycle || $[10] !== locale) {
+		t4 = {
+			granularity,
+			hideTimeZone: true,
+			hourCycle,
+			locale,
+			onChange: t3,
+			shouldForceLeadingZeros: true,
+			value: draft
+		};
+		$[7] = draft;
+		$[8] = granularity;
+		$[9] = hourCycle;
+		$[10] = locale;
+		$[11] = t4;
+	} else t4 = $[11];
+	const state = useTimeFieldState(t4);
+	let t5;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = (type) => {
+			if (type === "hour" || type === "minute") setPart(type);
+		};
+		$[12] = t5;
+	} else t5 = $[12];
+	const follow = t5;
+	let t6;
+	if ($[13] !== part || $[14] !== twelveHour) {
+		t6 = (x, y) => {
+			const across = x - CENTRE;
+			const down = y - CENTRE;
+			const turn = (Math.atan2(across, -down) / (2 * Math.PI) + 1) % 1;
+			if (part === "minute") {
+				setDraft((time) => time.set({ minute: Math.round(turn * 60) % 60 }));
+				return;
+			}
+			const step = Math.round(turn * 12) % 12;
+			if (twelveHour) {
+				setDraft((time_0) => time_0.set({ hour: step + (time_0.hour >= 12 ? 12 : 0) }));
+				return;
+			}
+			const inner = Math.hypot(across, down) < 165 / 2;
+			setDraft((time_1) => time_1.set({ hour: inner ? step + 12 : step }));
+		};
+		$[13] = part;
+		$[14] = twelveHour;
+		$[15] = t6;
+	} else t6 = $[15];
+	const pick = t6;
+	let t7;
+	if ($[16] !== part || $[17] !== showsMinutes) {
+		t7 = () => {
+			if (part === "hour" && showsMinutes) {
+				setPart("minute");
+				boxes.current?.focusOn("minute", false);
+			}
+		};
+		$[16] = part;
+		$[17] = showsMinutes;
+		$[18] = t7;
+	} else t7 = $[18];
+	const release = t7;
+	let t8;
+	if ($[19] !== isDial || $[20] !== part) {
+		t8 = () => {
+			setMode(isDial ? "input" : "dial");
+			boxes.current?.focusOn(part, isDial);
+		};
+		$[19] = isDial;
+		$[20] = part;
+		$[21] = t8;
+	} else t8 = $[21];
+	const switchMode = t8;
+	let t9;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = (afternoon) => {
+			setDraft((time_2) => time_2.set({ hour: time_2.hour % 12 + (afternoon ? 12 : 0) }));
+		};
+		$[22] = t9;
+	} else t9 = $[22];
+	const choosePeriod = t9;
+	let t10;
+	if ($[23] !== draft || $[24] !== field) {
+		t10 = () => {
+			field.setValue(asDateTime(draft));
+		};
+		$[23] = draft;
+		$[24] = field;
+		$[25] = t10;
+	} else t10 = $[25];
+	const confirm = t10;
+	let t11;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (_, height) => {
+			setContent(height);
+		};
+		$[26] = t11;
+	} else t11 = $[26];
+	const measureContent = t11;
+	let t12;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = (event) => {
+			setRoom(event.nativeEvent.layout.height);
+		};
+		$[27] = t12;
+	} else t12 = $[27];
+	const measureRoom = t12;
+	let t13;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = panelRoleOf("dialog", void 0);
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== draft || $[30] !== isDial || $[31] !== locale || $[32] !== part || $[33] !== pick || $[34] !== release || $[35] !== testID || $[36] !== twelveHour) {
+		t14 = isDial ? /* @__PURE__ */ jsx(Dial, {
+			draft,
+			locale,
+			onPick: pick,
+			onRelease: release,
+			part,
+			testID,
+			twelveHour
+		}) : null;
+		$[29] = draft;
+		$[30] = isDial;
+		$[31] = locale;
+		$[32] = part;
+		$[33] = pick;
+		$[34] = release;
+		$[35] = testID;
+		$[36] = twelveHour;
+		$[37] = t14;
+	} else t14 = $[37];
+	const t15 = isDial ? enterTimeLabel : selectTimeLabel;
+	let t16;
+	if ($[38] !== isDial) {
+		t16 = isDial ? /* @__PURE__ */ jsx(KeyboardGlyph, {}) : /* @__PURE__ */ jsx(ClockGlyph, {});
+		$[38] = isDial;
+		$[39] = t16;
+	} else t16 = $[39];
+	let t17;
+	if ($[40] !== switchMode || $[41] !== t15 || $[42] !== t16) {
+		t17 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t15,
+			onPress: switchMode,
+			children: t16
+		});
+		$[40] = switchMode;
+		$[41] = t15;
+		$[42] = t16;
+		$[43] = t17;
+	} else t17 = $[43];
+	let t18;
+	if ($[44] !== cancelLabel) {
+		t18 = /* @__PURE__ */ jsx(Button, {
+			slot: "close",
+			variant: "text",
+			children: cancelLabel
+		});
+		$[44] = cancelLabel;
+		$[45] = t18;
+	} else t18 = $[45];
+	let t19;
+	if ($[46] !== confirm || $[47] !== confirmLabel) {
+		t19 = /* @__PURE__ */ jsx(Button, {
+			onPress: confirm,
+			slot: "close",
+			variant: "text",
+			children: confirmLabel
+		});
+		$[46] = confirm;
+		$[47] = confirmLabel;
+		$[48] = t19;
+	} else t19 = $[48];
+	let t20;
+	if ($[49] !== styles.buttons || $[50] !== t18 || $[51] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(View, {
+			style: styles.buttons,
+			children: [t18, t19]
+		});
+		$[49] = styles.buttons;
+		$[50] = t18;
+		$[51] = t19;
+		$[52] = t20;
+	} else t20 = $[52];
+	let t21;
+	if ($[53] !== styles.actions || $[54] !== t17 || $[55] !== t20) {
+		t21 = /* @__PURE__ */ jsxs(View, {
+			style: styles.actions,
+			children: [t17, t20]
+		});
+		$[53] = styles.actions;
+		$[54] = t17;
+		$[55] = t20;
+		$[56] = t21;
+	} else t21 = $[56];
+	return /* @__PURE__ */ jsx(Animated.View, {
+		...t13,
+		"aria-label": Platform.OS === "web" ? void 0 : `${headline}, ${fieldLabel}`,
+		onAccessibilityEscape: onClose,
+		style: composeStyles(styles.container, motion),
+		testID: testID === void 0 ? void 0 : `${testID}-modal`,
+		children: /* @__PURE__ */ jsxs(ScrollView, {
+			contentContainerStyle: styles.content,
+			onContentSizeChange: measureContent,
+			onLayout: measureRoom,
+			scrollEnabled: content > room,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					nativeID: headlineId,
+					ref: setHeadline,
+					role: "heading",
+					style: composeStyles(headlineRole, styles.headline),
+					children: headline
+				}),
+				Platform.OS === "web" ? /* @__PURE__ */ jsx(Text, {
+					nativeID: labelId,
+					style: styles.notDrawn,
+					children: fieldLabel
+				}) : null,
+				/* @__PURE__ */ jsxs(View, {
+					style: styles.row,
+					children: [/* @__PURE__ */ jsxs(View, { children: [/* @__PURE__ */ jsx(DateSegments, {
+						described: UNDESCRIBED,
+						drawing: drawingOf(styles, isDial ? dialRole : inputRole, isDial, part),
+						isInvalid: false,
+						label: fieldLabel,
+						locale,
+						onActiveChange: follow,
+						ref: boxes,
+						state
+					}), isDial ? null : /* @__PURE__ */ jsxs(View, {
+						"aria-hidden": true,
+						style: styles.captions,
+						children: [/* @__PURE__ */ jsx(Text, {
+							style: composeStyles(captionRole, styles.caption),
+							children: fieldName(words.hour, locale)
+						}), showsMinutes ? /* @__PURE__ */ jsx(Text, {
+							style: composeStyles(captionRole, styles.caption),
+							children: fieldName(words.minute, locale)
+						}) : null]
+					})] }), twelveHour ? /* @__PURE__ */ jsxs(View, {
+						"aria-label": words.dayPeriod,
+						role: "radiogroup",
+						style: composeStyles(styles.period, isDial ? void 0 : styles.periodInput),
+						children: [/* @__PURE__ */ jsx(PeriodHalf, {
+							isAfternoon: false,
+							isSelected: !isAfternoon,
+							onChoose: choosePeriod,
+							text: partOf(periods, 9, "dayPeriod")
+						}), /* @__PURE__ */ jsx(PeriodHalf, {
+							isAfternoon: true,
+							isSelected: isAfternoon,
+							onChoose: choosePeriod,
+							text: partOf(periods, 21, "dayPeriod")
+						})]
+					}) : null]
+				}),
+				t14,
+				t21
+			]
+		})
+	});
+}
+/** The part of a formatted time a formatter writes for one hour of the day. */
+function partOf(format, hour, type) {
+	return format.formatToParts(new Date(2e3, 0, 1, hour)).find((each) => each.type === type)?.value ?? String(hour);
+}
+function PeriodHalf(t0) {
+	const $ = c(17);
+	const { isAfternoon, isSelected, onChoose, text } = t0;
+	const theme = useTheme();
+	const styles = stylesOf(theme);
+	const role = useTypeRole("titleMedium");
+	const t1 = isSelected ? theme.colors.onTertiaryContainer : theme.colors.onSurfaceVariant;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = { color: t1 };
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const feedback = usePressFeedback(t2);
+	let t3;
+	if ($[2] !== isAfternoon || $[3] !== onChoose) {
+		t3 = () => {
+			onChoose(isAfternoon);
+		};
+		$[2] = isAfternoon;
+		$[3] = onChoose;
+		$[4] = t3;
+	} else t3 = $[4];
+	const choose = t3;
+	const T0 = Pressable;
+	const t4 = "radio";
+	const t5 = feedback.handlers;
+	const t6 = composeStyles(styles.periodHalf, isAfternoon ? styles.periodDivider : void 0, isSelected ? styles.periodSelected : void 0, feedback.ring, feedback.ring === void 0 ? void 0 : styles.insetRing);
+	const t7 = feedback.layer;
+	const T1 = Text;
+	const t8 = composeStyles(role, isSelected ? styles.periodTextSelected : styles.periodText);
+	let t9;
+	if ($[5] !== T1 || $[6] !== t8 || $[7] !== text) {
+		t9 = /* @__PURE__ */ jsx(T1, {
+			style: t8,
+			children: text
+		});
+		$[5] = T1;
+		$[6] = t8;
+		$[7] = text;
+		$[8] = t9;
+	} else t9 = $[8];
+	let t10;
+	if ($[9] !== T0 || $[10] !== choose || $[11] !== feedback.handlers || $[12] !== feedback.layer || $[13] !== isSelected || $[14] !== t6 || $[15] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(T0, {
+			"aria-checked": isSelected,
+			role: t4,
+			...t5,
+			onPress: choose,
+			style: t6,
+			children: [t7, t9]
+		});
+		$[9] = T0;
+		$[10] = choose;
+		$[11] = feedback.handlers;
+		$[12] = feedback.layer;
+		$[13] = isSelected;
+		$[14] = t6;
+		$[15] = t9;
+		$[16] = t10;
+	} else t10 = $[16];
+	return t10;
+}
+function placeOf({ x, y }) {
+	return {
+		left: x - HANDLE,
+		top: y - HANDLE
+	};
+}
+/** Where a fraction of a turn clockwise from twelve lands on a ring. */
+function polar(turn, radius) {
+	const angle = turn * 2 * Math.PI;
+	return {
+		x: CENTRE + radius * Math.sin(angle),
+		y: CENTRE - radius * Math.cos(angle)
+	};
+}
+/**
+* A time typed into a field, or picked in a modal behind the clock button at
+* the field's end: on a dial, or typed into the modal's larger boxes. The
+* value is an `@internationalized/date` value, as on web: pass `value` with
+* `onChange` to control it, or `defaultValue` to let it keep its own.
+*
+* ```tsx
+* import { Time } from '@internationalized/date'
+*
+* <TimePicker defaultValue={new Time(9, 30)} label="Label" />
+* ```
+*
+* The field is TimeField's, so `granularity`, `hourCycle`, `minValue` and
+* `maxValue` behave as they do there. The modal sets hours and minutes and
+* keeps the seconds a value already has; a time it writes back is checked
+* against the bounds as a typed one is. Whether it shows a twelve or
+* twenty-four hour clock is the locale's, through the `I18nProvider`, unless
+* `hourCycle` says otherwise.
+*
+* `style`, `ref` and `testID` land on the field as a whole.
+*/
+function TimePicker(t0) {
+	const $ = c(62);
+	let cancelLabel;
+	let confirmLabel;
+	let defaultOpen;
+	let enterTimeLabel;
+	let isOpen;
+	let locale;
+	let onOpenChange;
+	let props;
+	let selectTimeLabel;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({cancelLabel, confirmLabel, defaultMode: t1, defaultOpen, enterTimeLabel, isDisabled: t2, isOpen, isReadOnly: t3, isRequired: t4, locale, onOpenChange, selectTimeLabel, ...props} = t0);
+		$[0] = t0;
+		$[1] = cancelLabel;
+		$[2] = confirmLabel;
+		$[3] = defaultOpen;
+		$[4] = enterTimeLabel;
+		$[5] = isOpen;
+		$[6] = locale;
+		$[7] = onOpenChange;
+		$[8] = props;
+		$[9] = selectTimeLabel;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else {
+		cancelLabel = $[1];
+		confirmLabel = $[2];
+		defaultOpen = $[3];
+		enterTimeLabel = $[4];
+		isOpen = $[5];
+		locale = $[6];
+		onOpenChange = $[7];
+		props = $[8];
+		selectTimeLabel = $[9];
+		t1 = $[10];
+		t2 = $[11];
+		t3 = $[12];
+		t4 = $[13];
+	}
+	const defaultMode = t1 === void 0 ? "dial" : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const isReadOnly = t3 === void 0 ? false : t3;
+	const isRequired = t4 === void 0 ? false : t4;
+	const writtenIn = useLocaleOf(locale);
+	let t5;
+	if ($[14] !== writtenIn) {
+		t5 = messagesFor(writtenIn);
+		$[14] = writtenIn;
+		$[15] = t5;
+	} else t5 = $[15];
+	const words = t5;
+	const [trigger, setTrigger] = useState(null);
+	let t6;
+	if ($[16] !== defaultOpen || $[17] !== isOpen || $[18] !== onOpenChange) {
+		t6 = {
+			defaultOpen,
+			isOpen,
+			onOpenChange
+		};
+		$[16] = defaultOpen;
+		$[17] = isOpen;
+		$[18] = onOpenChange;
+		$[19] = t6;
+	} else t6 = $[19];
+	const state = useOverlayTriggerState(t6);
+	let t7;
+	if ($[20] !== isDisabled || $[21] !== isReadOnly || $[22] !== isRequired || $[23] !== props || $[24] !== writtenIn) {
+		t7 = {
+			...props,
+			isDisabled,
+			isReadOnly,
+			isRequired,
+			locale: writtenIn
+		};
+		$[20] = isDisabled;
+		$[21] = isReadOnly;
+		$[22] = isRequired;
+		$[23] = props;
+		$[24] = writtenIn;
+		$[25] = t7;
+	} else t7 = $[25];
+	const field = useTimeFieldState(t7);
+	const selectTime = selectTimeLabel ?? words.selectTime;
+	const { open } = state;
+	const t8 = field.realtimeValidation.validationErrors;
+	const t9 = field.value === null;
+	let t10;
+	if ($[26] !== field.timeValue || $[27] !== field.value) {
+		t10 = field.value === null ? "" : field.timeValue.toString();
+		$[26] = field.timeValue;
+		$[27] = field.value;
+		$[28] = t10;
+	} else t10 = $[28];
+	const t11 = isDisabled || isReadOnly;
+	const t12 = `${selectTime} ${props.label}`;
+	let t13;
+	if ($[29] !== open || $[30] !== state.isOpen || $[31] !== t11 || $[32] !== t12) {
+		t13 = clockOf({
+			isDisabled: t11,
+			isOpen: state.isOpen,
+			label: t12,
+			onPress: open,
+			ref: setTrigger
+		});
+		$[29] = open;
+		$[30] = state.isOpen;
+		$[31] = t11;
+		$[32] = t12;
+		$[33] = t13;
+	} else t13 = $[33];
+	let t14;
+	if ($[34] !== field || $[35] !== isDisabled || $[36] !== isReadOnly || $[37] !== isRequired || $[38] !== props || $[39] !== t10 || $[40] !== t13 || $[41] !== t9 || $[42] !== writtenIn) {
+		t14 = /* @__PURE__ */ jsx(SegmentedField, {
+			...props,
+			errors: t8,
+			isDisabled,
+			isEmpty: t9,
+			isReadOnly,
+			isRequired,
+			locale: writtenIn,
+			state: field,
+			submitted: t10,
+			trailingIcon: t13
+		});
+		$[34] = field;
+		$[35] = isDisabled;
+		$[36] = isReadOnly;
+		$[37] = isRequired;
+		$[38] = props;
+		$[39] = t10;
+		$[40] = t13;
+		$[41] = t9;
+		$[42] = writtenIn;
+		$[43] = t14;
+	} else t14 = $[43];
+	const t15 = cancelLabel ?? words.cancel;
+	const t16 = confirmLabel ?? words.confirm;
+	const t17 = enterTimeLabel ?? words.enterTime;
+	const t18 = props.granularity === "hour" ? "hour" : "minute";
+	let t19;
+	if ($[44] !== defaultMode || $[45] !== field || $[46] !== props.hourCycle || $[47] !== props.label || $[48] !== props.placeholderValue || $[49] !== props.testID || $[50] !== selectTime || $[51] !== state || $[52] !== t15 || $[53] !== t16 || $[54] !== t17 || $[55] !== t18 || $[56] !== trigger || $[57] !== writtenIn) {
+		t19 = /* @__PURE__ */ jsx(TimePickerModal, {
+			cancelLabel: t15,
+			confirmLabel: t16,
+			defaultMode,
+			enterTimeLabel: t17,
+			field,
+			fieldLabel: props.label,
+			granularity: t18,
+			hourCycle: props.hourCycle,
+			locale: writtenIn,
+			placeholderValue: props.placeholderValue,
+			selectTimeLabel: selectTime,
+			state,
+			testID: props.testID,
+			trigger
+		});
+		$[44] = defaultMode;
+		$[45] = field;
+		$[46] = props.hourCycle;
+		$[47] = props.label;
+		$[48] = props.placeholderValue;
+		$[49] = props.testID;
+		$[50] = selectTime;
+		$[51] = state;
+		$[52] = t15;
+		$[53] = t16;
+		$[54] = t17;
+		$[55] = t18;
+		$[56] = trigger;
+		$[57] = writtenIn;
+		$[58] = t19;
+	} else t19 = $[58];
+	let t20;
+	if ($[59] !== t14 || $[60] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t14, t19] });
+		$[59] = t14;
+		$[60] = t19;
+		$[61] = t20;
+	} else t20 = $[61];
+	return t20;
+}
+function TimePickerModal(t0) {
+	const $ = c(33);
+	let props;
+	let state;
+	let trigger;
+	if ($[0] !== t0) {
+		({state, trigger, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = state;
+		$[3] = trigger;
+	} else {
+		props = $[1];
+		state = $[2];
+		trigger = $[3];
+	}
+	const theme = useTheme();
+	const styles = stylesOf(theme);
+	const insets = use(SafeAreaInsetsContext) ?? NO_INSETS;
+	const headlineId = useId();
+	const labelId = useId();
+	const [headline, setHeadline] = useState(null);
+	let t1;
+	if ($[4] !== state.isOpen) {
+		t1 = {
+			count: 0,
+			isOpen: state.isOpen
+		};
+		$[4] = state.isOpen;
+		$[5] = t1;
+	} else t1 = $[5];
+	const [opened, setOpened] = useState(t1);
+	let t2;
+	if ($[6] !== state || $[7] !== trigger) {
+		t2 = {
+			state,
+			trigger
+		};
+		$[6] = state;
+		$[7] = trigger;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {};
+		$[9] = t3;
+	} else t3 = $[9];
+	const { close, present, setPresent, slots } = useModalState(t2, t3);
+	const shown = usePanelShown(state.isOpen, true, setPresent);
+	const motion = usePanelStyle(shown);
+	const scrim = useAnimatedStyle(() => {
+		"worklet";
+		return { opacity: shown.get() };
+	});
+	if (opened.isOpen !== state.isOpen) setOpened({
+		count: opened.count + (state.isOpen ? 1 : 0),
+		isOpen: state.isOpen
+	});
+	if (!present) return null;
+	const T0 = ModalWindow;
+	const t4 = false;
+	const t5 = `${headlineId} ${labelId}`;
+	const t6 = state.isOpen ? close : void 0;
+	const T1 = View;
+	const t7 = composeStyles(styles.layout, insetsOf(roomOf(insets, theme.spacing.sm)));
+	let t8;
+	if ($[10] !== close || $[11] !== headlineId || $[12] !== labelId || $[13] !== motion || $[14] !== opened.count || $[15] !== props || $[16] !== setHeadline) {
+		t8 = /* @__PURE__ */ createElement(ModalContent, {
+			...props,
+			headlineId,
+			key: opened.count,
+			labelId,
+			motion,
+			onClose: close,
+			setHeadline
+		});
+		$[10] = close;
+		$[11] = headlineId;
+		$[12] = labelId;
+		$[13] = motion;
+		$[14] = opened.count;
+		$[15] = props;
+		$[16] = setHeadline;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== slots || $[19] !== t8) {
+		t9 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+			value: slots,
+			children: t8
+		});
+		$[18] = slots;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== T1 || $[22] !== t7 || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx(T1, {
+			style: t7,
+			children: t9
+		});
+		$[21] = T1;
+		$[22] = t7;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== T0 || $[26] !== close || $[27] !== headline || $[28] !== scrim || $[29] !== t10 || $[30] !== t5 || $[31] !== t6) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			isKeyboardDismissDisabled: t4,
+			labelledBy: t5,
+			onClose: close,
+			onScrimPress: t6,
+			scrim,
+			title: headline,
+			children: t10
+		});
+		$[25] = T0;
+		$[26] = close;
+		$[27] = headline;
+		$[28] = scrim;
+		$[29] = t10;
+		$[30] = t5;
+		$[31] = t6;
+		$[32] = t11;
+	} else t11 = $[32];
+	return t11;
+}
+function useDialGesture({ onPick, onRelease, testID }) {
+	const pan = Gesture.Pan().runOnJS(true).onStart(({ x, y }) => {
+		onPick(x, y);
+	}).onUpdate(({ x, y }) => {
+		onPick(x, y);
+	}).onEnd(() => {
+		onRelease();
+	});
+	const tap = Gesture.Tap().maxDistance(SLOP).runOnJS(true).onEnd(({ x, y }, success) => {
+		if (success) {
+			onPick(x, y);
+			onRelease();
+		}
+	});
+	return Gesture.Race(testID === void 0 ? pan : pan.withTestId(`${testID}-dial-pan`), testID === void 0 ? tap : tap.withTestId(`${testID}-dial-tap`));
+}
+/**
+* Whether the clock has twelve hours. `hourCycle` decides when it is given,
+* as it does for the segments; otherwise the locale does.
+*/
+function usesTwelveHours(locale, hourCycle) {
+	if (hourCycle !== void 0) return hourCycle === 12;
+	return new DateFormatter(locale, { hour: "numeric" }).resolvedOptions().hour12 ?? false;
+}
+//#endregion
+export { TimePicker };
+
+//# sourceMappingURL=index.js.map