@povio/ui 3.4.0-rc.19 → 3.4.0-rc.20

package/dist/Calendar-C9Dbdkkl.js

@@ -0,0 +1,654 @@
+import { t as ChevronDown } from "./chevron-down-Ciz9yP9R.js";
+import { t as ChevronLeft } from "./chevron-left-VO8YZrXZ.js";
+import { t as ChevronRight } from "./chevron-right-C_M98bh3.js";
+import { t as ChevronUp } from "./chevron-up-CHRnDSA3.js";
+import { i as CalendarGrid } from "./DatePickerInput-C2z1kgaC.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { B as $d4ee10de306f2510$export$4282f70798064fe0, J as $bdb11010cef70236$export$f680877a34711e37, L as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, R as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./useHover-DwfnacVy.js";
+import { o as $9bf71ea28793e738$export$c5251b9e124bf29 } from "./SelectionIndicator-qJF4qfyY.js";
+import { r as $ef06256079686ba0$export$f8aeda7b10753fa1 } from "./PressResponder-q8UTUsf0.js";
+import { C as $dfb4eba373ed9493$exports, S as $3dfb0f96be0d6a08$export$4a931266a3838b86, v as $16f0b7bb276bc17e$export$300019f83c56d282, w as $896ba0a80a8f4d36$export$85fd5fdf27bacc79 } from "./staticDateTimeSegments-CKL9PuGV.js";
+import { i as $eed445e0843c11d0$export$a11e76429ed99b4, t as $eed445e0843c11d0$export$41f133550aa26f48 } from "./ListBox-HE5uFtiS.js";
+import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-Cq7t4Xxl.js";
+import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-CLFkoJMP.js";
+import { n as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedStringFormatter-C2M9mXF2.js";
+import { n as $9ab94262bd0047c7$export$420e68273165f4ec } from "./useFocusRing-DuXtCnJj.js";
+import { n as $2baaea4c71418dea$export$294aa081a6c6f55d } from "./useFormValidation-DLZqyNVp.js";
+import { n as $e5be200c675c3b3a$export$a763b9476acd3eb } from "./useFormValidationState-Bpry7Uk5.js";
+import { n as $84b7d8702d4ff4a8$export$40258cc1d95ff477 } from "./ToggleButton-D94yRla8.js";
+import { t as Typography } from "./Typography-AcUd9df8.js";
+import { PillButton } from "./components/pill-button.js";
+import { t as useBreakpoint } from "./useBreakpoint-D0s71F97.js";
+import { n as TimePickerForm } from "./datePickerValue.utils-Dh-nA1Yv.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { CalendarDateTime, Time, today } from "@internationalized/date";
+import { useCalendar } from "@react-aria/calendar";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../../node_modules/.bun/@react-aria+datepicker@3.16.0+67f6792bdf102c28/node_modules/@react-aria/datepicker/dist/useDatePicker.mjs
+function $parcel$interopDefault(a) {
+	return a && a.__esModule ? a.default : a;
+}
+function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
+	let buttonId = $bdb11010cef70236$export$f680877a34711e37();
+	let dialogId = $bdb11010cef70236$export$f680877a34711e37();
+	let fieldId = $bdb11010cef70236$export$f680877a34711e37();
+	let stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1($parcel$interopDefault($dfb4eba373ed9493$exports), "@react-aria/datepicker");
+	let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+	let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $2baaea4c71418dea$export$294aa081a6c6f55d({
+		...props,
+		labelElementType: "span",
+		isInvalid,
+		errorMessage: props.errorMessage || validationErrors
+	});
+	let groupProps = $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref);
+	let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+	let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	let date = state.formatValue(locale, { month: "long" });
+	let description = date ? stringFormatter.format("selectedDateDescription", { date }) : "";
+	let descProps = $ef06256079686ba0$export$f8aeda7b10753fa1(description);
+	let ariaDescribedBy = [descProps["aria-describedby"], fieldProps["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+	let focusManager = useMemo(() => $9bf71ea28793e738$export$c5251b9e124bf29(ref), [ref]);
+	let isFocused = useRef(false);
+	let { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({
+		...props,
+		isDisabled: state.isOpen,
+		onBlurWithin: (e) => {
+			let dialog = document.getElementById(dialogId);
+			if (!$d4ee10de306f2510$export$4282f70798064fe0(dialog, e.relatedTarget)) {
+				var _props_onBlur, _props_onFocusChange;
+				isFocused.current = false;
+				(_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 || _props_onBlur.call(props, e);
+				(_props_onFocusChange = props.onFocusChange) === null || _props_onFocusChange === void 0 || _props_onFocusChange.call(props, false);
+			}
+		},
+		onFocusWithin: (e) => {
+			if (!isFocused.current) {
+				var _props_onFocus, _props_onFocusChange;
+				isFocused.current = true;
+				(_props_onFocus = props.onFocus) === null || _props_onFocus === void 0 || _props_onFocus.call(props, e);
+				(_props_onFocusChange = props.onFocusChange) === null || _props_onFocusChange === void 0 || _props_onFocusChange.call(props, true);
+			}
+		}
+	});
+	return {
+		groupProps: $3ef42575df84b30b$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,
+			[$16f0b7bb276bc17e$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,
+			[$e5be200c675c3b3a$export$a763b9476acd3eb]: 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 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 = $896ba0a80a8f4d36$export$85fd5fdf27bacc79({
+		month: "long",
+		timeZone: calendarState.timeZone
+	});
+	const timeFormatter = $896ba0a80a8f4d36$export$85fd5fdf27bacc79({
+		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($d2b4bc8c273e7be6$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($84b7d8702d4ff4a8$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($d2b4bc8c273e7be6$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 = $896ba0a80a8f4d36$export$85fd5fdf27bacc79({
+		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($eed445e0843c11d0$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($eed445e0843c11d0$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 = $896ba0a80a8f4d36$export$85fd5fdf27bacc79({
+		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($eed445e0843c11d0$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($eed445e0843c11d0$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 { useScrollableListBox as n, $6057a3d2a53a12fd$export$42df105a73306d51 as r, Calendar as t };

package/dist/{components/inputs/shared/CheckContent.js → CheckContent-DzWpxKGq.js}

@@ -1,12 +1,12 @@
-import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { typographyDefinition } from "../../text/Typography/typography.cva.js";
-import clsx$1 from "clsx";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { t as typographyDefinition } from "./typography.cva-BI0FyIqm.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/shared/CheckContent.tsx
 const CheckContent = ({ children, className, contentClassName, ...props }) => {
 	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx$1(typographyCva({
+		className: clsx(typographyCva({
 			size: "label-1",
 			sizeMobile: "label-1",
 			variant: "default",
@@ -16,4 +16,4 @@ const CheckContent = ({ children, className, contentClassName, ...props }) => {
 	});
 };
 //#endregion
-export { CheckContent };
+export { CheckContent as t };