@povio/ui 3.4.0-rc.9 → 4.0.0-rc.2

package/dist/Calendar-Ci0ysyfZ.js

@@ -0,0 +1,753 @@
+import { t as ChevronDown } from "./chevron-down-RksSwG1O.js";
+import { t as ChevronLeft } from "./chevron-left-Dem1_TuL.js";
+import { t as ChevronRight } from "./chevron-right-DXbvvsay.js";
+import { t as ChevronUp } from "./chevron-up-CgEFpORu.js";
+import { a as CalendarGrid, i as $1697a7ad3db7b79f$re_export$useDateFormatter, o as $f11fb0bcf1b2687a$export$61c6a8c84e605fb6 } from "./DatePickerInput-B9Z_AUkC.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-CRlZqaJq.js";
+import { i as $928221da08ecbc62$export$a11e76429ed99b4, t as $928221da08ecbc62$export$41f133550aa26f48 } from "./ListBox-Dx42Gif4.js";
+import { n as $bc25b811ec97a172$export$40258cc1d95ff477 } from "./ToggleButton-C966bfpT.js";
+import { n as $23f2114a1b82827e$export$4282f70798064fe0 } from "./useLayoutEffect-DN7Dbrb9.js";
+import { a as $390e54f620492c70$export$f680877a34711e37, r as $bbaa08b3cd72f041$export$9d1611c77c2fe928 } from "./useSyncRef-Dsn4Ybiw.js";
+import { c as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, m as $cf2482eff2eeeec2$export$f12b703ca79dfbb1, r as $fd2148440a13ec26$export$fc1a364ae1f3ff10, s as $2c9edc598a03d523$export$420e68273165f4ec } from "./useFormValidationState-Dl-Nh0G1.js";
+import { n as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, r as $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7, t as $3e6197669829fe11$export$40bfa8c7b0832715 } from "./useControlledState-BMVd3AOQ.js";
+import { C as $0014db39426443c5$exports, S as $6a440d0e2d99dd46$export$4a931266a3838b86, f as $8b141f2f71e88f85$export$2440da353cedad43, g as $8b141f2f71e88f85$export$f18627323ab57ac0, h as $8b141f2f71e88f85$export$c5221a78ef73c5e9, p as $8b141f2f71e88f85$export$7e319ea407e63bc0, v as $7541913c0284d84b$export$300019f83c56d282, w as $121970af65029459$export$f8aeda7b10753fa1 } from "./staticDateTimeSegments-B9kkwiDz.js";
+import { n as $535772f9d2c1f38d$export$c5251b9e124bf29 } from "./FocusScope-CNjWJz3s.js";
+import { t as Typography } from "./Typography-AcUd9df8.js";
+import { PillButton } from "./components/pill-button.js";
+import { t as useBreakpoint } from "./useBreakpoint-CDKDB0E2.js";
+import { n as TimePickerForm } from "./datePickerValue.utils-BxOJpTbb.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { CalendarDateTime, DateFormatter, Time, toCalendarDate, toCalendarDateTime, today } from "@internationalized/date";
+import { privateValidationStateProp } from "react-stately/private/form/useFormValidationState";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCalendar } from "@react-aria/calendar";
+//#region ../../node_modules/.bun/react-aria@3.51.0+67f6792bdf102c28/node_modules/react-aria/dist/private/datepicker/useDatePicker.mjs
+function $parcel$interopDefault(a) {
+	return a && a.__esModule ? a.default : a;
+}
+function $6902a2bb26917a07$export$42df105a73306d51(props, state, ref) {
+	let buttonId = $390e54f620492c70$export$f680877a34711e37();
+	let dialogId = $390e54f620492c70$export$f680877a34711e37();
+	let fieldId = $390e54f620492c70$export$f680877a34711e37();
+	let stringFormatter = $cf2482eff2eeeec2$export$f12b703ca79dfbb1($parcel$interopDefault($0014db39426443c5$exports), "@react-aria/datepicker");
+	let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+	let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $191c9b6d48a0a4e2$export$294aa081a6c6f55d({
+		...props,
+		labelElementType: "span",
+		isInvalid,
+		errorMessage: props.errorMessage || validationErrors
+	});
+	let groupProps = $6a440d0e2d99dd46$export$4a931266a3838b86(state, ref);
+	let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+	let { locale } = $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7();
+	let date = state.formatValue(locale, { month: "long" });
+	let description = date ? stringFormatter.format("selectedDateDescription", { date }) : "";
+	let descProps = $121970af65029459$export$f8aeda7b10753fa1(description);
+	let ariaDescribedBy = [descProps["aria-describedby"], fieldProps["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	let domProps = $8e9d2fae0ecb9001$export$457c3d6518dd4c6f(props);
+	let focusManager = useMemo(() => $535772f9d2c1f38d$export$c5251b9e124bf29(ref), [ref]);
+	let isFocused = useRef(false);
+	let { focusWithinProps } = $2c9edc598a03d523$export$420e68273165f4ec({
+		...props,
+		isDisabled: state.isOpen,
+		onBlurWithin: (e) => {
+			let dialog = document.getElementById(dialogId);
+			if (!$23f2114a1b82827e$export$4282f70798064fe0(dialog, e.relatedTarget)) {
+				isFocused.current = false;
+				props.onBlur?.(e);
+				props.onFocusChange?.(false);
+			}
+		},
+		onFocusWithin: (e) => {
+			if (!isFocused.current) {
+				isFocused.current = true;
+				props.onFocus?.(e);
+				props.onFocusChange?.(true);
+			}
+		}
+	});
+	return {
+		groupProps: $bbaa08b3cd72f041$export$9d1611c77c2fe928(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+			role: "group",
+			"aria-disabled": props.isDisabled || null,
+			"aria-labelledby": labelledBy,
+			"aria-describedby": ariaDescribedBy,
+			onKeyDown(e) {
+				if (state.isOpen) return;
+				if (props.onKeyDown) props.onKeyDown(e);
+			},
+			onKeyUp(e) {
+				if (state.isOpen) return;
+				if (props.onKeyUp) props.onKeyUp(e);
+			}
+		}),
+		labelProps: {
+			...labelProps,
+			onClick: () => {
+				focusManager.focusFirst();
+			}
+		},
+		fieldProps: {
+			...fieldProps,
+			id: fieldId,
+			[$7541913c0284d84b$export$300019f83c56d282]: "presentation",
+			"aria-describedby": ariaDescribedBy,
+			value: state.value,
+			defaultValue: state.defaultValue,
+			onChange: state.setValue,
+			placeholderValue: props.placeholderValue,
+			hideTimeZone: props.hideTimeZone,
+			hourCycle: props.hourCycle,
+			shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+			granularity: props.granularity,
+			isDisabled: props.isDisabled,
+			isReadOnly: props.isReadOnly,
+			isRequired: props.isRequired,
+			validationBehavior: props.validationBehavior,
+			[privateValidationStateProp]: state,
+			autoFocus: props.autoFocus,
+			name: props.name,
+			form: props.form
+		},
+		descriptionProps,
+		errorMessageProps,
+		buttonProps: {
+			...descProps,
+			id: buttonId,
+			"aria-haspopup": "dialog",
+			"aria-label": stringFormatter.format("calendar"),
+			"aria-labelledby": `${buttonId} ${labelledBy}`,
+			"aria-describedby": ariaDescribedBy,
+			"aria-expanded": state.isOpen,
+			isDisabled: props.isDisabled || props.isReadOnly,
+			onPress: () => state.setOpen(true)
+		},
+		dialogProps: {
+			id: dialogId,
+			"aria-labelledby": `${buttonId} ${labelledBy}`
+		},
+		calendarProps: {
+			autoFocus: true,
+			value: state.dateValue,
+			onChange: state.setDateValue,
+			minValue: props.minValue,
+			maxValue: props.maxValue,
+			isDisabled: props.isDisabled,
+			isReadOnly: props.isReadOnly,
+			isDateUnavailable: props.isDateUnavailable,
+			defaultFocusedValue: state.dateValue ? void 0 : props.placeholderValue,
+			isInvalid: state.isInvalid,
+			errorMessage: typeof props.errorMessage === "function" ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(" "),
+			firstDayOfWeek: props.firstDayOfWeek,
+			pageBehavior: props.pageBehavior
+		},
+		isInvalid,
+		validationErrors,
+		validationDetails
+	};
+}
+//#endregion
+//#region ../../node_modules/.bun/react-stately@3.49.0+83d5fd7b249dbeef/node_modules/react-stately/dist/private/datepicker/useDatePickerState.mjs
+function $28aae683a942e141$export$87194bb378cc3ac2(props) {
+	let overlayState = $f11fb0bcf1b2687a$export$61c6a8c84e605fb6(props);
+	let [value, setValue] = $3e6197669829fe11$export$40bfa8c7b0832715(props.value, props.defaultValue || null, props.onChange);
+	let [initialValue] = useState(value);
+	let v = value || props.placeholderValue || null;
+	let [granularity, defaultTimeZone] = $8b141f2f71e88f85$export$2440da353cedad43(v, props.granularity);
+	let dateValue = value != null ? value.toDate(defaultTimeZone ?? "UTC") : null;
+	let hasTime = granularity === "hour" || granularity === "minute" || granularity === "second";
+	let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
+	let [selectedDate, setSelectedDate] = useState(null);
+	let [selectedTime, setSelectedTime] = useState(null);
+	if (value) {
+		selectedDate = value;
+		if ("hour" in value) selectedTime = value;
+	}
+	if (v && !(granularity in v)) throw new Error("Invalid granularity " + granularity + " for value " + v.toString());
+	let showEra = value?.calendar.identifier === "gregory" && value.era === "BC";
+	let formatOpts = useMemo(() => ({
+		granularity,
+		timeZone: defaultTimeZone,
+		hideTimeZone: props.hideTimeZone,
+		hourCycle: props.hourCycle,
+		shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+		showEra
+	}), [
+		granularity,
+		props.hourCycle,
+		props.shouldForceLeadingZeros,
+		defaultTimeZone,
+		props.hideTimeZone,
+		showEra
+	]);
+	let { minValue, maxValue, isDateUnavailable } = props;
+	let builtinValidation = useMemo(() => $8b141f2f71e88f85$export$f18627323ab57ac0(value, minValue, maxValue, isDateUnavailable, formatOpts), [
+		value,
+		minValue,
+		maxValue,
+		isDateUnavailable,
+		formatOpts
+	]);
+	let validation = $fd2148440a13ec26$export$fc1a364ae1f3ff10({
+		...props,
+		value,
+		builtinValidation
+	});
+	let isValueInvalid = validation.displayValidation.isInvalid;
+	let validationState = props.validationState || (isValueInvalid ? "invalid" : null);
+	let commitValue = (date, time) => {
+		setValue("timeZone" in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time));
+		setSelectedDate(null);
+		setSelectedTime(null);
+		validation.commitValidation();
+	};
+	let selectDate = (newValue) => {
+		let shouldClose = typeof shouldCloseOnSelect === "function" ? shouldCloseOnSelect() : shouldCloseOnSelect;
+		if (hasTime) {
+			if (selectedTime || shouldClose) commitValue(newValue, selectedTime || $8b141f2f71e88f85$export$c5221a78ef73c5e9(props.defaultValue || props.placeholderValue));
+			else setSelectedDate(newValue);
+		} else {
+			setValue(newValue);
+			validation.commitValidation();
+		}
+		if (shouldClose) overlayState.setOpen(false);
+	};
+	let selectTime = (newValue) => {
+		if (selectedDate && newValue) commitValue(selectedDate, newValue);
+		else setSelectedTime(newValue);
+	};
+	return {
+		...validation,
+		value,
+		defaultValue: props.defaultValue ?? initialValue,
+		setValue,
+		dateValue: selectedDate,
+		timeValue: selectedTime,
+		setDateValue: selectDate,
+		setTimeValue: selectTime,
+		granularity,
+		hasTime,
+		...overlayState,
+		setOpen(isOpen) {
+			if (!isOpen && !value && selectedDate && hasTime) commitValue(selectedDate, selectedTime || $8b141f2f71e88f85$export$c5221a78ef73c5e9(props.defaultValue || props.placeholderValue));
+			overlayState.setOpen(isOpen);
+		},
+		validationState,
+		isInvalid: isValueInvalid,
+		formatValue(locale, fieldOptions) {
+			if (!dateValue) return "";
+			let formatOptions = $8b141f2f71e88f85$export$7e319ea407e63bc0(fieldOptions, formatOpts);
+			return new DateFormatter(locale, formatOptions).format(dateValue);
+		},
+		getDateFormatter(locale, formatOptions) {
+			let newOptions = {
+				...formatOpts,
+				...formatOptions
+			};
+			let newFormatOptions = $8b141f2f71e88f85$export$7e319ea407e63bc0({}, newOptions);
+			return new DateFormatter(locale, newFormatOptions);
+		}
+	};
+}
+//#endregion
+//#region src/components/inputs/DateTime/shared/CalendarHeader.tsx
+const HourCycle = {
+	12: "h12",
+	24: "h23"
+};
+const getTimeFormatterDate = (timeValue, timeZone) => {
+	return new CalendarDateTime(2e3, 1, 1, timeValue.hour, timeValue.minute).toDate(timeZone);
+};
+const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, isTimeOptional, hourCycle, granularity = "day", toggleState, setToggleState }) => {
+	const formatter = $1697a7ad3db7b79f$re_export$useDateFormatter({
+		month: "long",
+		timeZone: calendarState.timeZone
+	});
+	const timeFormatter = $1697a7ad3db7b79f$re_export$useDateFormatter({
+		timeStyle: "short",
+		timeZone: calendarState.timeZone,
+		hourCycle: hourCycle ? HourCycle[hourCycle] : void 0
+	});
+	const year = calendarState.focusedDate.year.toString();
+	const month = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
+	const hasTimeValue = !!datePickerState?.timeValue;
+	let timeLabel = "--:--";
+	if (isTimeOptional || hasTimeValue) {
+		const timeValue = datePickerState?.timeValue || new Time(0, 0);
+		const date = getTimeFormatterDate(timeValue, calendarState.timeZone);
+		timeLabel = timeFormatter.format(date);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "inline-flex h-12 items-center p-3",
+				children: /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
+					...prevButtonProps,
+					isDisabled: !!toggleState,
+					className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-6 text-interactive-text-secondary-idle" })
+				})
+			}),
+			/* @__PURE__ */ jsxs($bc25b811ec97a172$export$40258cc1d95ff477, {
+				className: "flex gap-2",
+				children: [
+					granularity !== "year" && /* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: toggleState === "month" ? ChevronUp : ChevronDown,
+						toggle: true,
+						isSelected: toggleState === "month",
+						onChange: (isSelected) => {
+							if (!isSelected) {
+								if (granularity === "day") {
+									setToggleState(null);
+									return;
+								}
+								setToggleState("month");
+								return;
+							}
+							setToggleState("month");
+						},
+						children: month
+					}),
+					/* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: toggleState === "year" ? ChevronUp : ChevronDown,
+						toggle: true,
+						isSelected: toggleState === "year",
+						onChange: (isSelected) => {
+							if (isSelected) {
+								setToggleState("year");
+								return;
+							}
+							if (granularity === "day") {
+								setToggleState(null);
+								return;
+							}
+							if (granularity === "month") {
+								setToggleState("month");
+								return;
+							}
+							setToggleState("year");
+						},
+						children: year
+					}),
+					includesTime && /* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: toggleState === "time" ? ChevronUp : ChevronDown,
+						toggle: true,
+						isSelected: toggleState === "time",
+						onChange: (isSelected) => setToggleState(isSelected ? "time" : null),
+						children: timeLabel
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "inline-flex h-12 items-center p-3",
+				children: /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
+					...nextButtonProps,
+					isDisabled: !!toggleState,
+					className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-6 text-interactive-text-secondary-idle" })
+				})
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/inputs/DateTime/shared/MonthPicker.tsx
+const MonthPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }) => {
+	const formatter = $1697a7ad3db7b79f$re_export$useDateFormatter({
+		month: "long",
+		timeZone: state.timeZone
+	});
+	const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+	const getMonths = () => {
+		const months = [];
+		for (let i = 1; i <= numMonths; i++) {
+			const date = state.focusedDate.set({ month: i });
+			months.push(formatter.format(date.toDate(state.timeZone)));
+		}
+		return months;
+	};
+	const isMonthDisabled = (month) => {
+		if (state.minValue && state.focusedDate.set({ month }) < state.minValue) return true;
+		if (state.maxValue && state.focusedDate.set({ month }) > state.maxValue) return true;
+		return false;
+	};
+	const getSelectedMonth = () => {
+		if (!selectedDate) return null;
+		return selectedDate.month;
+	};
+	const selectedMonth = getSelectedMonth();
+	const lastPressedMonthRef = useRef(null);
+	const listBoxSelectionProps = {};
+	if (selectedMonth !== null) listBoxSelectionProps.selectedKeys = [selectedMonth];
+	const parseMonthFromKey = (key) => {
+		if (typeof key === "number") return key;
+		if (typeof key === "string") {
+			const parsedMonth = Number.parseInt(key, 10);
+			if (!Number.isNaN(parsedMonth)) return parsedMonth;
+		}
+		return null;
+	};
+	return /* @__PURE__ */ jsx($928221da08ecbc62$export$41f133550aa26f48, {
+		autoFocus: true,
+		"aria-label": "Month",
+		selectionMode: "single",
+		layout: "grid",
+		...listBoxSelectionProps,
+		onSelectionChange: (key) => {
+			if (key === "all") return;
+			const selectedKey = [...key][0];
+			const selectedMonthValue = parseMonthFromKey(selectedKey);
+			if (selectedMonthValue !== null) {
+				const nextSelectedDate = state.focusedDate.set({ month: selectedMonthValue });
+				state.setFocusedDate(nextSelectedDate);
+				onDateChange?.(nextSelectedDate);
+			}
+			onSelectionChange(key);
+		},
+		className: "grid size-full min-h-72 grid-cols-3 grid-rows-4 gap-2 p-3 md:w-80",
+		children: getMonths().map((month, index) => {
+			const monthNumber = index + 1;
+			const isDisabled = isMonthDisabled(monthNumber);
+			return /* @__PURE__ */ jsx($928221da08ecbc62$export$a11e76429ed99b4, {
+				id: monthNumber,
+				textValue: month,
+				isDisabled,
+				onPress: () => {
+					const isSecondConsecutivePress = lastPressedMonthRef.current === monthNumber;
+					lastPressedMonthRef.current = monthNumber;
+					const nextSelectedDate = state.focusedDate.set({ month: monthNumber });
+					state.setFocusedDate(nextSelectedDate);
+					onDateChange?.(nextSelectedDate);
+					if (!isSecondConsecutivePress) return;
+					if (selectedMonth === null) return;
+					if (monthNumber !== selectedMonth) return;
+					onCommit?.();
+				},
+				className: clsx("flex items-center justify-center text-interactive-text-secondary-idle", "rounded-button-rounding-m border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1", "hover:text-interactive-text-secondary-hover", "selected:border-interactive-contained-primary-idle selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
+				children: /* @__PURE__ */ jsx(Typography, {
+					as: "span",
+					size: "label-2",
+					children: month
+				})
+			}, monthNumber);
+		})
+	});
+};
+//#endregion
+//#region src/hooks/useScrollableListBox.ts
+function useScrollableListBox() {
+	const $ = c(4);
+	const ref = useRef(null);
+	const isDesktop = useBreakpoint("md");
+	let t0;
+	let t1;
+	if ($[0] !== isDesktop) {
+		t0 = () => {
+			const node = ref.current;
+			if (!node || isDesktop) return;
+			const onPointerDownCapture = _temp;
+			const onClickCapture = _temp2;
+			node.addEventListener("pointerdown", onPointerDownCapture);
+			node.addEventListener("click", onClickCapture);
+			return () => {
+				node.removeEventListener("pointerdown", onPointerDownCapture);
+				node.removeEventListener("click", onClickCapture);
+			};
+		};
+		t1 = [ref, isDesktop];
+		$[0] = isDesktop;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { ref };
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+function _temp2(e_0) {
+	if (e_0.currentTarget?.contains(e_0.target) && e_0.target !== e_0.currentTarget) e_0.target.click();
+}
+function _temp(e) {
+	e.stopPropagation();
+}
+//#endregion
+//#region src/components/inputs/DateTime/shared/YearPicker.tsx
+const YearPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }) => {
+	const formatter = $1697a7ad3db7b79f$re_export$useDateFormatter({
+		year: "numeric",
+		timeZone: state.timeZone
+	});
+	const years = useMemo(() => {
+		const arr = [];
+		for (let i = -100; i <= 100; i++) {
+			const date = today(state.timeZone).add({ years: i });
+			arr.push({
+				value: date.year,
+				formatted: formatter.format(date.toDate(state.timeZone))
+			});
+		}
+		return arr;
+	}, [state.timeZone, formatter]);
+	const isYearDisabled = (year) => {
+		if (state.minValue && year < state.minValue.year) return true;
+		if (state.maxValue && year > state.maxValue.year) return true;
+		return false;
+	};
+	const getSelectedYearIndex = () => {
+		if (selectedDate) {
+			const selectedIndexFromValue = years.findIndex((year) => year.value === selectedDate.year);
+			if (selectedIndexFromValue >= 0) return selectedIndexFromValue;
+		}
+		const focusedYearIndex = years.findIndex((year) => year.value === state.focusedDate.year);
+		if (focusedYearIndex < 0) return null;
+		return focusedYearIndex;
+	};
+	const selectedYearIndex = getSelectedYearIndex();
+	const lastPressedYearIndexRef = useRef(null);
+	const listBoxSelectionProps = {};
+	if (selectedYearIndex !== null) listBoxSelectionProps.selectedKeys = [selectedYearIndex];
+	const parseYearIndexFromKey = (key) => {
+		if (typeof key === "number") return key;
+		if (typeof key === "string") {
+			const parsedIndex = Number.parseInt(key, 10);
+			if (!Number.isNaN(parsedIndex)) return parsedIndex;
+		}
+		return null;
+	};
+	const { ref } = useScrollableListBox();
+	return /* @__PURE__ */ jsx($928221da08ecbc62$export$41f133550aa26f48, {
+		ref,
+		autoFocus: true,
+		"aria-label": "Year",
+		selectionMode: "single",
+		...listBoxSelectionProps,
+		onSelectionChange: (key) => {
+			if (key === "all") return;
+			const selectedKey = [...key][0];
+			const selectedYearIndexValue = parseYearIndexFromKey(selectedKey);
+			if (selectedYearIndexValue !== null && years[selectedYearIndexValue]) {
+				const nextSelectedDate = state.focusedDate.set({ year: years[selectedYearIndexValue].value });
+				state.setFocusedDate(nextSelectedDate);
+				onDateChange?.(nextSelectedDate);
+			}
+			onSelectionChange(key);
+		},
+		className: "h-80 max-h-full min-h-0 w-full shrink-0 overflow-y-auto md:h-72 md:w-80",
+		children: years.map((year, index) => {
+			const isDisabled = isYearDisabled(year.value);
+			return /* @__PURE__ */ jsx($928221da08ecbc62$export$a11e76429ed99b4, {
+				id: index,
+				textValue: year.formatted,
+				isDisabled,
+				onPress: () => {
+					const isSecondConsecutivePress = lastPressedYearIndexRef.current === index;
+					lastPressedYearIndexRef.current = index;
+					const nextSelectedDate = state.focusedDate.set({ year: year.value });
+					state.setFocusedDate(nextSelectedDate);
+					onDateChange?.(nextSelectedDate);
+					if (!isSecondConsecutivePress) return;
+					if (!selectedDate) return;
+					if (selectedYearIndex === null) return;
+					if (index !== selectedYearIndex) return;
+					onCommit?.();
+				},
+				className: clsx("flex px-4 py-2 text-interactive-text-secondary-idle outline-none", "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0", "hover:text-interactive-text-secondary-hover", "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
+				children: /* @__PURE__ */ jsx(Typography, {
+					as: "span",
+					size: "label-2",
+					children: year.formatted
+				})
+			}, index);
+		})
+	});
+};
+//#endregion
+//#region src/components/inputs/DateTime/shared/Calendar.tsx
+const Calendar = ({ className, includesTime, datePickerState, hourCycle, isTimeOptional, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity = "day", setDateValueOnDateSelection = false, onDateSelectionChange, ...props }) => {
+	const [toggleState, setToggleState] = useState(() => {
+		if (granularity === "year") return "year";
+		if (granularity === "month") return "month";
+		return null;
+	});
+	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
+	useEffect(() => {
+		if (granularity === "year" && toggleState !== "year") {
+			setToggleState("year");
+			return;
+		}
+		if (granularity === "month" && toggleState === null) {
+			setToggleState("month");
+			return;
+		}
+		if (granularity === "month" && toggleState === "time") {
+			setToggleState("month");
+			return;
+		}
+		if (granularity === "day" && toggleState === "time" && !includesTime) setToggleState(null);
+	}, [
+		granularity,
+		toggleState,
+		includesTime
+	]);
+	const onMonthSelectionChange = () => {
+		if (granularity === "day") {
+			setToggleState(null);
+			return;
+		}
+		setToggleState("month");
+	};
+	const onYearSelectionChange = () => {
+		if (granularity === "day") {
+			setToggleState(null);
+			return;
+		}
+		if (granularity === "month") {
+			setToggleState("month");
+			return;
+		}
+		setToggleState("year");
+	};
+	const handleHeaderMonthNavigation = useCallback((months) => {
+		if (toggleState || !onMonthYearChange) return;
+		const focusedDate = props.state.focusedDate;
+		if (months === -1) {
+			onMonthYearChange(focusedDate.subtract({ months: 1 }));
+			return;
+		}
+		onMonthYearChange(focusedDate.add({ months: 1 }));
+	}, [
+		toggleState,
+		onMonthYearChange,
+		props.state.focusedDate
+	]);
+	const headerPrevButtonProps = useMemo(() => ({
+		...prevButtonProps,
+		onPress: (event) => {
+			prevButtonProps.onPress?.(event);
+			handleHeaderMonthNavigation(-1);
+		}
+	}), [prevButtonProps, handleHeaderMonthNavigation]);
+	const headerNextButtonProps = useMemo(() => ({
+		...nextButtonProps,
+		onPress: (event) => {
+			nextButtonProps.onPress?.(event);
+			handleHeaderMonthNavigation(1);
+		}
+	}), [nextButtonProps, handleHeaderMonthNavigation]);
+	const onDateSelection = useCallback((date) => {
+		if (!includesTime || !setDateValueOnDateSelection) return;
+		datePickerState.setDateValue(date);
+	}, [
+		includesTime,
+		datePickerState,
+		setDateValueOnDateSelection
+	]);
+	const handleDateChange = (selectedDate) => {
+		const resolvedDate = selectedDate ?? props.state.focusedDate;
+		if (includesTime && resolvedDate && setDateValueOnDateSelection) {
+			datePickerState.setDateValue(resolvedDate);
+			onDateSelectionChange?.(resolvedDate);
+		}
+		if (includesTime && toggleState !== "time") {
+			if (!setDateValueOnDateSelection && resolvedDate) {
+				datePickerState.setDateValue(resolvedDate);
+				onDateSelectionChange?.(resolvedDate);
+			}
+			setToggleState("time");
+			return;
+		}
+		if (datePickerState?.value && !setDateValueOnDateSelection) onApply(resolvedDate);
+	};
+	const getContent = () => {
+		if (!toggleState) {
+			if (granularity === "month") return /* @__PURE__ */ jsx(MonthPicker, {
+				state: props.state,
+				onSelectionChange: onMonthSelectionChange,
+				onDateChange: onMonthYearChange,
+				onCommit: onMonthYearCommit,
+				selectedDate
+			});
+			if (granularity === "year") return /* @__PURE__ */ jsx(YearPicker, {
+				state: props.state,
+				onSelectionChange: onYearSelectionChange,
+				onDateChange: onMonthYearChange,
+				onCommit: onMonthYearCommit,
+				selectedDate
+			});
+			return /* @__PURE__ */ jsx(CalendarGrid, {
+				state: props.state,
+				onApply: handleDateChange,
+				onDoubleClickApply: !includesTime ? onApply : void 0,
+				onDateSelection,
+				shouldApplyOnDateSelection: !includesTime || setDateValueOnDateSelection
+			});
+		}
+		if (toggleState === "month") {
+			if (granularity === "year") return /* @__PURE__ */ jsx(YearPicker, {
+				state: props.state,
+				onSelectionChange: onYearSelectionChange,
+				onDateChange: onMonthYearChange,
+				onCommit: onMonthYearCommit,
+				selectedDate
+			});
+			return /* @__PURE__ */ jsx(MonthPicker, {
+				state: props.state,
+				onSelectionChange: onMonthSelectionChange,
+				onDateChange: onMonthYearChange,
+				onCommit: onMonthYearCommit,
+				selectedDate
+			});
+		}
+		if (toggleState === "year") return /* @__PURE__ */ jsx(YearPicker, {
+			state: props.state,
+			onSelectionChange: onYearSelectionChange,
+			onDateChange: onMonthYearChange,
+			onCommit: onMonthYearCommit,
+			selectedDate
+		});
+		if (toggleState === "time" && includesTime) return /* @__PURE__ */ jsx("div", {
+			className: "flex h-72 w-80 items-center justify-center",
+			children: /* @__PURE__ */ jsx(TimePickerForm, { datePickerState })
+		});
+		return null;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...calendarProps,
+		className: clsx("flex min-h-0 w-full flex-col items-center", className),
+		children: [/* @__PURE__ */ jsx(CalendarHeader, {
+			calendarState: props.state,
+			datePickerState,
+			prevButtonProps: headerPrevButtonProps,
+			nextButtonProps: headerNextButtonProps,
+			includesTime,
+			isTimeOptional,
+			hourCycle,
+			granularity,
+			toggleState,
+			setToggleState
+		}), /* @__PURE__ */ jsx("div", {
+			className: clsx("flex min-h-0 w-full flex-1 flex-col items-center", toggleState !== "year" && "pb-8 md:pb-0"),
+			children: getContent()
+		})]
+	});
+};
+//#endregion
+export { $6902a2bb26917a07$export$42df105a73306d51 as i, useScrollableListBox as n, $28aae683a942e141$export$87194bb378cc3ac2 as r, Calendar as t };