@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,700 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { cn } from "../../utils/cn.js";
+import { useM3Spring } from "../../motion/use-m3-spring.js";
+import { useM3Interaction } from "../../primitives/use-m3-interaction.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { IconButton } from "../icon-button/IconButton.js";
+import { splitRootProps } from "../../utils/root-props.js";
+import { useMediaQuery } from "../date-picker/use-media-query.js";
+import { KeyboardIcon, ScheduleIcon } from "../date-picker/picker-icons.js";
+import { timePickerStyles } from "./time-picker-styles.js";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { animate, useReducedMotion } from "motion/react";
+import { mergeProps, mergeRefs, useFocusRing, useFocusVisible, useHover, useLocale, useNumberFormatter } from "react-aria";
+import { useControlledState } from "react-stately/useControlledState";
+import { Time } from "@internationalized/date";
+//#region src/components/time-picker/TimePicker.tsx
+/** Compose's clock geometry (TimePicker.kt), in px on the 256px dial. */
+const DIAL = 256;
+const CENTER = DIAL / 2;
+const OUTER_RADIUS = 101;
+const INNER_RADIUS = 69;
+const HANDLE = 48;
+/** A press nearer the centre than this picks the inner 24-hour ring (Compose's `MaxDistance`). */
+const INNER_RING_MAX_DISTANCE = 74;
+/** Each number on the dial is a 48px target (M3: "Targets for dial selectors should be 48x48dp"). */
+const TARGET = 48;
+const SHORT_WINDOW = "(max-height: 567.98px)";
+const NO_ROOM_FOR_DIAL = "(max-height: 451.98px), (max-height: 567.98px) and (max-width: 639.98px)";
+/** Where an `auto` time picker's dial fits: `vertical`, `horizontal` or `none`. */
+function useTimePickerRoom() {
+	const short = useMediaQuery(SHORT_WINDOW);
+	return useMediaQuery(NO_ROOM_FOR_DIAL) ? "none" : short ? "horizontal" : "vertical";
+}
+function localeHourCycle(locale) {
+	const cycle = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions().hourCycle;
+	return cycle === "h11" || cycle === "h12" ? 12 : 24;
+}
+const defaultDialValue = (value, total, unit) => `${value} ${unit} of ${total}`;
+/**
+* M3 time picker (Compose's `TimePicker` and `TimeInput`): hour and minute selectors you
+* can type in, with an AM / PM selector, and a clock dial whose numbers are buttons (press,
+* drag, or Tab to one and press Enter; the hour moves on to the minutes); or typed fields
+* in input mode. It turns to a horizontal layout, or the input mode, when the window has
+* no room for the dial. Put it in a {@link PickerDialog} for the modal form, with a
+* {@link TimePickerModeToggle}.
+*
+* @example
+* <TimePicker value={time} onChange={setTime} />
+*/
+function TimePicker({ value, defaultValue, onChange, hourCycle: hourCycleProp, mode: modeProp, defaultMode = "dial", onModeChange, layout = "auto", labels = {}, density, id, ref, className, style, classNames, ...rest }) {
+	const { root: data } = splitRootProps(rest, { wrapper: true });
+	const { locale } = useLocale();
+	const hourCycle = hourCycleProp ?? localeHourCycle(locale);
+	const [time, setTime] = useControlledState(value, defaultValue ?? new Time(12, 0), onChange);
+	const [chosenMode] = useControlledState(modeProp, defaultMode, onModeChange);
+	const room = useTimePickerRoom();
+	const fits = layout === "auto" ? room : layout;
+	const mode = fits === "none" ? "input" : chosenMode;
+	const resolvedLayout = mode === "input" || fits === "none" ? "vertical" : fits;
+	const [selection, setSelection] = useState("hour");
+	const styles = timePickerStyles({
+		hourCycle,
+		mode,
+		layout: resolvedLayout
+	});
+	const pad = useNumberFormatter({
+		minimumIntegerDigits: 2,
+		useGrouping: false
+	});
+	const plain = useNumberFormatter({ useGrouping: false });
+	const isPm = time.hour >= 12;
+	const displayHour = hourCycle === 24 ? time.hour : time.hour % 12 || 12;
+	const formatHour = (n) => pad.format(n);
+	const setPeriod = (pm) => {
+		if (pm !== isPm) setTime(time.set({ hour: (time.hour + 12) % 24 }));
+	};
+	const commitHour = (hour) => setTime(time.set({ hour: hourCycle === 24 ? hour : hour % 12 + (isPm ? 12 : 0) }));
+	const hourLabel = labels.hour ?? "Hour";
+	const minuteLabel = labels.minute ?? "Minute";
+	const minuteRef = useRef(null);
+	const [domDirection, setDomDirection] = useState(void 0);
+	const directionRef = useCallback((element) => {
+		if (element) setDomDirection(getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr");
+	}, []);
+	const rootRef = useMemo(() => mergeRefs(ref, directionRef), [ref, directionRef]);
+	return /* @__PURE__ */ jsxs("div", {
+		...data,
+		id,
+		ref: rootRef,
+		style,
+		"data-tokens": mergeDataTokens("md-comp-time-picker", data),
+		"data-mode": mode,
+		"data-layout": resolvedLayout,
+		...densityAttribute(density),
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [/* @__PURE__ */ jsxs("div", {
+			dir: "ltr",
+			className: styles.display(),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: styles.time(),
+				children: [
+					/* @__PURE__ */ jsx(NumberField, {
+						label: hourLabel,
+						value: displayHour,
+						min: hourCycle === 24 ? 0 : 1,
+						max: hourCycle === 24 ? 23 : 12,
+						format: formatHour,
+						onCommit: commitHour,
+						onComplete: mode === "input" ? () => minuteRef.current?.focus() : void 0,
+						selector: mode === "dial",
+						selected: selection === "hour",
+						onFocus: () => setSelection("hour"),
+						styles,
+						classNames
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: styles.separator({ class: classNames?.separator }),
+						children: ":"
+					}),
+					/* @__PURE__ */ jsx(NumberField, {
+						label: minuteLabel,
+						value: time.minute,
+						min: 0,
+						max: 59,
+						format: (n) => pad.format(n),
+						onCommit: (minute) => setTime(time.set({ minute })),
+						inputRef: minuteRef,
+						selector: mode === "dial",
+						selected: selection === "minute",
+						onFocus: () => setSelection("minute"),
+						styles,
+						classNames
+					})
+				]
+			}), hourCycle === 12 && /* @__PURE__ */ jsx(PeriodGroup, {
+				label: labels.period ?? "AM or PM",
+				am: labels.am ?? "AM",
+				pm: labels.pm ?? "PM",
+				isPm,
+				onChange: setPeriod,
+				direction: domDirection,
+				styles,
+				classNames
+			})]
+		}), mode === "dial" && /* @__PURE__ */ jsx(Dial, {
+			time,
+			setTime,
+			selection,
+			onHourPicked: () => setSelection("minute"),
+			hourCycle,
+			label: labels.dial ?? "Clock",
+			valueLabel: labels.dialValue ?? defaultDialValue,
+			format: (n, minutes) => minutes || hourCycle === 24 ? pad.format(n) : plain.format(n),
+			plain: (n) => plain.format(n),
+			styles,
+			className: classNames?.dial
+		})]
+	});
+}
+/**
+* The time picker's keyboard / clock icon button (M3: "The input selector should be
+* accessible from the dial selector via the keyboard icon"), for `PickerDialog`'s
+* `modeToggleButton`. Hidden when the window has no room for the dial, where an `auto`
+* time picker shows only the input.
+*
+* @example
+* <PickerDialog variant="time" modeToggleButton={<TimePickerModeToggle mode={mode} onModeChange={setMode} />} …>
+*   <TimePicker mode={mode} onModeChange={setMode} />
+* </PickerDialog>
+*/
+function TimePickerModeToggle({ mode, onModeChange, labels = {}, keyboardIcon, clockIcon, className, style, id, ref, ...dom }) {
+	if (useTimePickerRoom() === "none") return null;
+	const own = {
+		...dom,
+		className,
+		style,
+		id,
+		ref
+	};
+	return mode === "dial" ? /* @__PURE__ */ jsx(IconButton, {
+		variant: "standard",
+		density: 0,
+		icon: keyboardIcon ?? /* @__PURE__ */ jsx(KeyboardIcon, {}),
+		"aria-label": labels.inputMode ?? "Toggle input picker",
+		onPress: () => onModeChange("input"),
+		...own
+	}) : /* @__PURE__ */ jsx(IconButton, {
+		variant: "standard",
+		density: 0,
+		icon: clockIcon ?? /* @__PURE__ */ jsx(ScheduleIcon, {}),
+		"aria-label": labels.dialMode ?? "Toggle dial picker",
+		onPress: () => onModeChange("dial"),
+		...own
+	});
+}
+/**
+* The AM / PM selector: a radio group (M3: "Radio button (in list)"), so it is one Tab stop
+* on the checked option and the arrow keys move the choice, as WAI-ARIA's radio group.
+*/
+function PeriodGroup({ label, am, pm, isPm, onChange, direction: domDirection, styles, classNames }) {
+	const { direction: localeDirection } = useLocale();
+	const direction = domDirection ?? localeDirection;
+	const refs = useRef([]);
+	const onKeyDown = (event) => {
+		const forward = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+		const backward = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+		if ((event.key === "ArrowDown" || event.key === forward ? 1 : event.key === "ArrowUp" || event.key === backward ? -1 : 0) === 0) return;
+		event.preventDefault();
+		const next = !isPm;
+		onChange(next);
+		refs.current[next ? 1 : 0]?.focus();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		"aria-label": label,
+		dir: direction,
+		onKeyDown,
+		"data-slot": "period-selector",
+		className: styles.period({ class: classNames?.period }),
+		children: [false, true].map((option) => /* @__PURE__ */ jsx(PeriodOption, {
+			ref: (element) => {
+				refs.current[option ? 1 : 0] = element;
+			},
+			label: option ? pm : am,
+			selected: isPm === option,
+			onSelect: () => onChange(option),
+			className: styles.periodOption({ class: classNames?.periodOption })
+		}, String(option)))
+	});
+}
+function PeriodOption({ label, selected, onSelect, className, ref: refProp }) {
+	const ref = useRef(null);
+	const { interactionProps, dataAttributes } = useM3Interaction({}, ref);
+	return /* @__PURE__ */ jsx("button", {
+		...mergeProps(interactionProps, { onClick: onSelect }),
+		...dataAttributes,
+		ref: (element) => {
+			ref.current = element;
+			refProp(element);
+		},
+		type: "button",
+		role: "radio",
+		"aria-checked": selected,
+		tabIndex: selected ? 0 : -1,
+		"data-slot": "period-selector-option",
+		"data-selected": selected || void 0,
+		className,
+		children: label
+	});
+}
+/**
+* A typed hour or minute: the input mode's 96 × 72px field with its label below, or in
+* dial mode the 96 × 80px selector, which picks the dial's face when focused and takes
+* digits too (M3: "The dial time picker supports both manual and dial input").
+*/
+function NumberField({ label, value, min, max, format, onCommit, onComplete, inputRef, selector, selected, onFocus, styles, classNames }) {
+	const [draft, setDraft] = useState(null);
+	const { focusProps, isFocusVisible } = useFocusRing();
+	const { hoverProps, isHovered } = useHover({ isDisabled: !selector });
+	const [pressed, setPressed] = useState(false);
+	const release = () => setPressed(false);
+	const parsed = draft === null ? value : Number(draft);
+	const invalid = draft !== null && (draft === "" || Number.isNaN(parsed) || parsed < min || parsed > max);
+	const input = /* @__PURE__ */ jsx("input", {
+		...mergeProps(focusProps, hoverProps, { onFocus: (event) => {
+			event.currentTarget.select();
+			onFocus();
+		} }),
+		ref: inputRef,
+		onPointerDown: () => selector && setPressed(true),
+		onPointerUp: release,
+		onPointerLeave: release,
+		onPointerCancel: release,
+		inputMode: "numeric",
+		"aria-label": label,
+		"aria-invalid": invalid || void 0,
+		maxLength: 2,
+		value: draft ?? format(value),
+		"data-slot": selector ? "time-selector" : void 0,
+		"data-selected": selector && selected || void 0,
+		"data-focus-visible": selector && isFocusVisible || void 0,
+		"data-hovered": selector && isHovered || void 0,
+		"data-pressed": selector && pressed || void 0,
+		onChange: (event) => {
+			const text = event.target.value.replace(/\D/g, "");
+			setDraft(text);
+			const next = Number(text);
+			if (text === "" || next < min || next > max) return;
+			onCommit(next);
+			if (text.length === 2 || next * 10 > max) onComplete?.();
+		},
+		onBlur: () => setDraft(null),
+		onKeyDown: (event) => {
+			if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+			event.preventDefault();
+			const step = event.key === "ArrowUp" ? 1 : -1;
+			const next = value + step > max ? min : value + step < min ? max : value + step;
+			setDraft(null);
+			onCommit(next);
+		},
+		className: selector ? styles.selector({ class: classNames?.field }) : styles.field({ class: classNames?.field })
+	});
+	if (selector) return input;
+	return /* @__PURE__ */ jsxs("label", {
+		className: styles.fieldColumn(),
+		children: [input, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: styles.fieldLabel({ class: classNames?.fieldLabel }),
+			children: label
+		})]
+	});
+}
+/** Angle of a dial position (0 at 12 o'clock, clockwise), in turns. */
+const turnOf = (x, y) => (Math.atan2(x - CENTER, CENTER - y) / (2 * Math.PI) + 1) % 1;
+const pointOf = (turn, radius) => ({
+	x: CENTER + radius * Math.sin(turn * 2 * Math.PI),
+	y: CENTER - radius * Math.cos(turn * 2 * Math.PI)
+});
+/** The numbers on the face: minutes in fives, hours 12 / 1–11, plus 12–23 inside for 24 hours. */
+function dialNumbers(minutes, hourCycle) {
+	const ring = (radius, valueAt) => Array.from({ length: 12 }, (_, i) => ({
+		value: valueAt(i),
+		turn: i / 12,
+		radius
+	}));
+	if (minutes) return ring(OUTER_RADIUS, (i) => i * 5);
+	if (hourCycle === 12) return ring(OUTER_RADIUS, (i) => i || 12);
+	return [...ring(OUTER_RADIUS, (i) => i), ...ring(INNER_RADIUS, (i) => i + 12)];
+}
+/** The shortest signed way round the dial from one turn to another, in turns (−½ to ½). */
+const shortestTurn = (from, to) => ((to - from) % 1 + 1.5) % 1 - .5;
+/**
+* How close the hand is to its value when it counts as there: Compose's turn ends at the
+* spring's visibility threshold of 0.01 rad (about 0.6°), and here within 1px of the radius
+* too, while the last fraction of the spring still plays out.
+*/
+const ARRIVED_TURN = .01 / (2 * Math.PI);
+const ARRIVED_RADIUS = 1;
+/** Runs and clears the callbacks waiting in `queue`. */
+const flush = (queue) => {
+	const callbacks = queue.current;
+	queue.current = [];
+	for (const callback of callbacks) callback();
+};
+/**
+* The hand's track, handle and the clip of the `on-primary` numbers follow the drawn angle,
+* set as attributes from an animation (no React render per frame). It turns to a new value
+* on the default spatial spring along the shortest arc (M3: "Spatial springs apply to …
+* rotation"; Compose animates the selector on hour ↔ minute and taps), follows a drag
+* directly, and jumps under reduced motion. Returns `whenSettled`, which runs a callback
+* once the hand rests on its value.
+*/
+function useDialHand(turn, radius, follow, parts) {
+	const spring = useM3Spring("spatial", "default");
+	const reducedMotion = useReducedMotion() ?? false;
+	const drawn = useRef({
+		turn,
+		radius
+	});
+	const animation = useRef(null);
+	const settled = useRef([]);
+	const arrived = useRef(true);
+	useLayoutEffect(() => {
+		const draw = (nextTurn, nextRadius) => {
+			drawn.current = {
+				turn: nextTurn,
+				radius: nextRadius
+			};
+			const point = pointOf(nextTurn, nextRadius);
+			const { track, handle, clip } = parts.current;
+			track?.setAttribute("x2", String(point.x));
+			track?.setAttribute("y2", String(point.y));
+			for (const circle of [handle, clip]) {
+				circle?.setAttribute("cx", String(point.x));
+				circle?.setAttribute("cy", String(point.y));
+			}
+		};
+		const from = drawn.current;
+		const delta = shortestTurn(from.turn, turn);
+		animation.current?.stop();
+		animation.current = null;
+		if (follow.current || reducedMotion || delta === 0 && from.radius === radius) {
+			draw(turn, radius);
+			arrived.current = true;
+			flush(settled);
+			return;
+		}
+		draw(from.turn, from.radius);
+		arrived.current = false;
+		let near = false;
+		animation.current = animate(0, 1, {
+			...spring,
+			onUpdate: (progress) => {
+				draw(from.turn + delta * progress, from.radius + (radius - from.radius) * progress);
+				const close = Math.abs(delta * (1 - progress)) <= ARRIVED_TURN && Math.abs((radius - from.radius) * (1 - progress)) <= ARRIVED_RADIUS;
+				if (close && near && !arrived.current) {
+					arrived.current = true;
+					flush(settled);
+				}
+				near = close;
+			},
+			onComplete: () => {
+				draw(turn, radius);
+				animation.current = null;
+				arrived.current = true;
+				flush(settled);
+			}
+		});
+	}, [
+		turn,
+		radius,
+		follow,
+		parts,
+		reducedMotion,
+		spring
+	]);
+	useEffect(() => () => {
+		animation.current?.stop();
+		settled.current = [];
+	}, []);
+	/** Runs `callback` once the hand has arrived at its value (at once if it already has). */
+	return (callback) => {
+		if (animation.current && !arrived.current) settled.current.push(callback);
+		else callback();
+	};
+}
+/**
+* Which faces to draw: the current one, and the one it replaced while that fades out
+* (Compose crossfades the hour and minute faces).
+*/
+function useFaces(minutes) {
+	const [faces, setFaces] = useState({
+		current: minutes,
+		leaving: null
+	});
+	if (faces.current !== minutes) setFaces({
+		current: minutes,
+		leaving: faces.current
+	});
+	const clearLeaving = () => setFaces((previous) => ({
+		...previous,
+		leaving: null
+	}));
+	return {
+		leaving: faces.leaving,
+		clearLeaving
+	};
+}
+function Dial({ time, setTime, selection, onHourPicked, hourCycle, label, valueLabel, format, plain, styles, className }) {
+	const svgRef = useRef(null);
+	const numberRefs = useRef([]);
+	const hand = useRef({
+		track: null,
+		handle: null,
+		clip: null
+	});
+	const pressing = useRef(false);
+	const dragging = useRef(false);
+	const pendingFocus = useRef(null);
+	const [focused, setFocused] = useState(null);
+	const { isFocusVisible } = useFocusVisible();
+	const clipId = useId();
+	const minutes = selection === "minute";
+	const { leaving, clearLeaving } = useFaces(minutes);
+	const isPm = time.hour >= 12;
+	const numbers = dialNumbers(minutes, hourCycle);
+	const selectedTurn = minutes ? time.minute / 60 : time.hour % 12 / 12;
+	const selectedRadius = !minutes && hourCycle === 24 && time.hour >= 12 ? INNER_RADIUS : OUTER_RADIUS;
+	const handle = pointOf(selectedTurn, selectedRadius);
+	const whenSettled = useDialHand(selectedTurn, selectedRadius, dragging, hand);
+	const switchTimer = useRef(void 0);
+	const cancelSwitch = () => {
+		window.clearTimeout(switchTimer.current);
+		switchTimer.current = void 0;
+	};
+	useEffect(() => cancelSwitch, [minutes]);
+	const selectedValue = minutes ? time.minute : hourCycle === 24 ? time.hour : time.hour % 12 || 12;
+	const tabStop = numbers.findIndex(({ value }) => minutes ? value === Math.round(time.minute / 5) * 5 % 60 : value === selectedValue);
+	useEffect(() => {
+		if (pendingFocus.current === null) return;
+		numberRefs.current[pendingFocus.current]?.focus();
+		pendingFocus.current = null;
+	});
+	useEffect(() => {
+		if (leaving === null) return;
+		const timeout = window.setTimeout(clearLeaving, 1e3);
+		return () => window.clearTimeout(timeout);
+	}, [leaving, clearLeaving]);
+	const toTime = (value) => minutes ? time.set({ minute: value }) : time.set({ hour: hourCycle === 24 ? value : value % 12 + (isPm ? 12 : 0) });
+	const switchToMinutes = () => {
+		if (svgRef.current?.contains(document.activeElement)) pendingFocus.current = Math.round(time.minute / 5) % 12;
+		onHourPicked();
+	};
+	const activate = (value) => {
+		setTime(toTime(value));
+		if (!minutes) {
+			pendingFocus.current = Math.round(time.minute / 5) % 12;
+			onHourPicked();
+		}
+	};
+	const pick = (event) => {
+		const box = svgRef.current.getBoundingClientRect();
+		const x = (event.clientX - box.left) / box.width * DIAL;
+		const y = (event.clientY - box.top) / box.height * DIAL;
+		const step = Math.round(turnOf(x, y) * 12) % 12;
+		if (minutes) {
+			setTime(time.set({ minute: step * 5 }));
+			return;
+		}
+		const innerRing = hourCycle === 24 && Math.hypot(x - CENTER, y - CENTER) < INNER_RING_MAX_DISTANCE;
+		const hour = hourCycle === 24 ? step + (innerRing ? 12 : 0) : step + (isPm ? 12 : 0);
+		setTime(time.set({ hour }));
+	};
+	const onNumberKeyDown = (event, index) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			activate(numbers[index].value);
+			return;
+		}
+		const step = {
+			ArrowUp: 1,
+			ArrowRight: 1,
+			ArrowDown: -1,
+			ArrowLeft: -1
+		}[event.key];
+		if (step === void 0) return;
+		event.preventDefault();
+		const next = (index + step + numbers.length) % numbers.length;
+		setFocused(next);
+		numberRefs.current[next]?.focus();
+	};
+	const total = minutes ? 60 : hourCycle;
+	const unit = minutes ? "minutes" : "hours";
+	const endPress = () => {
+		pressing.current = false;
+		dragging.current = false;
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		ref: svgRef,
+		viewBox: `0 0 ${DIAL} ${DIAL}`,
+		role: "group",
+		"aria-label": label,
+		onPointerDown: (event) => {
+			cancelSwitch();
+			pressing.current = true;
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+			pick(event);
+		},
+		onPointerMove: (event) => {
+			if (!pressing.current) return;
+			dragging.current = true;
+			pick(event);
+		},
+		onPointerUp: () => {
+			if (pressing.current && !minutes) {
+				if (dragging.current) switchToMinutes();
+				else whenSettled(() => {
+					switchTimer.current = window.setTimeout(switchToMinutes, 100);
+				});
+			}
+			endPress();
+		},
+		onPointerCancel: endPress,
+		className: cn(styles.dial(), className),
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+				id: clipId,
+				children: /* @__PURE__ */ jsx("circle", {
+					ref: (element) => {
+						hand.current.clip = element;
+					},
+					cx: handle.x,
+					cy: handle.y,
+					r: HANDLE / 2
+				})
+			}) }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: CENTER,
+				cy: CENTER,
+				r: CENTER,
+				"data-slot": "clock-dial",
+				className: styles.dialFace()
+			}),
+			/* @__PURE__ */ jsx("line", {
+				ref: (element) => {
+					hand.current.track = element;
+				},
+				x1: CENTER,
+				y1: CENTER,
+				x2: handle.x,
+				y2: handle.y,
+				strokeWidth: 2,
+				className: styles.dialTrack()
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: CENTER,
+				cy: CENTER,
+				r: 4,
+				className: styles.dialHandle()
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				ref: (element) => {
+					hand.current.handle = element;
+				},
+				cx: handle.x,
+				cy: handle.y,
+				r: HANDLE / 2,
+				"data-slot": "clock-dial-selector-handle",
+				className: styles.dialHandle()
+			}),
+			leaving !== null && /* @__PURE__ */ jsx("g", {
+				"aria-hidden": "true",
+				onTransitionEnd: clearLeaving,
+				className: styles.dialFaceLeaving(),
+				children: dialNumbers(leaving, hourCycle).map(({ value, turn, radius }, index) => {
+					const point = pointOf(turn, radius);
+					return /* @__PURE__ */ jsx("text", {
+						x: point.x,
+						y: point.y,
+						textAnchor: "middle",
+						dominantBaseline: "central",
+						className: styles.dialNumberText(),
+						children: format(value, leaving)
+					}, index);
+				})
+			}, `leaving-${String(leaving)}`),
+			/* @__PURE__ */ jsxs("g", {
+				className: leaving === null ? void 0 : styles.dialFaceEntering(),
+				children: [numbers.map(({ value, turn, radius }, index) => {
+					const point = pointOf(turn, radius);
+					const selected = value === selectedValue && (minutes ? time.minute % 5 === 0 : true);
+					return /* @__PURE__ */ jsxs("g", {
+						ref: (element) => {
+							numberRefs.current[index] = element;
+						},
+						role: "button",
+						tabIndex: index === (focused ?? tabStop) ? 0 : -1,
+						"aria-label": valueLabel(plain(value), total, unit),
+						"aria-pressed": selected,
+						"data-selected": selected || void 0,
+						onFocus: () => setFocused(index),
+						onBlur: () => setFocused(null),
+						onKeyDown: (event) => onNumberKeyDown(event, index),
+						onClick: (event) => {
+							if (event.detail === 0) activate(value);
+						},
+						className: styles.dialNumber(),
+						children: [
+							/* @__PURE__ */ jsx("circle", {
+								cx: point.x,
+								cy: point.y,
+								r: TARGET / 2,
+								className: styles.dialNumberHit()
+							}),
+							focused === index && isFocusVisible && /* @__PURE__ */ jsx("circle", {
+								cx: point.x,
+								cy: point.y,
+								r: TARGET / 2 - 1,
+								strokeWidth: 3,
+								className: styles.dialFocus()
+							}),
+							/* @__PURE__ */ jsx("text", {
+								x: point.x,
+								y: point.y,
+								textAnchor: "middle",
+								dominantBaseline: "central",
+								"aria-hidden": "true",
+								"data-selected": selected || void 0,
+								className: styles.dialNumberText(),
+								children: format(value, minutes)
+							})
+						]
+					}, index);
+				}), /* @__PURE__ */ jsx("g", {
+					"aria-hidden": "true",
+					clipPath: `url(#${clipId})`,
+					className: "pointer-events-none",
+					children: numbers.map(({ value, turn, radius }, index) => {
+						const point = pointOf(turn, radius);
+						return /* @__PURE__ */ jsx("text", {
+							x: point.x,
+							y: point.y,
+							textAnchor: "middle",
+							dominantBaseline: "central",
+							className: styles.dialNumberOnHandle(),
+							children: format(value, minutes)
+						}, index);
+					})
+				})]
+			}, `face-${String(minutes)}`)
+		]
+	});
+}
+//#endregion
+export { TimePicker, TimePickerModeToggle, useTimePickerRoom };
+
+//# sourceMappingURL=TimePicker.js.map