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

package/dist/{components/inputs/DateTime/DateRangePicker/DateRangePicker.js → DateRangePicker-BmScgvEH.js}

@@ -1,29 +1,463 @@
-import { UIOverrides } from "../../../../config/uiOverrides.context.js";
-import { Typography } from "../../../text/Typography/Typography.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
-import "../../../../config/i18n.js";
-import { FieldController } from "../../shared/form.binding.js";
-import { FormField } from "../../../form-field.js";
-import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
-import { InputFrame } from "../../Skeleton/InputFrame.js";
-import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
-import { datePickerInputContentRowDefinition } from "../shared/datePickerInput.cva.js";
-import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
-import { DatePickerInput } from "../shared/DatePickerInput.js";
-import { DateTimeDialog } from "../shared/DateTimeDialog.js";
-import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
-import { getStaticDateRangeSegments, getStaticDateTimeFocusTarget } from "../shared/staticDateTimeSegments.js";
-import { RangeCalendar } from "../shared/RangeCalendar.js";
-import { clsx } from "clsx";
+import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+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 { n as ChevronsLeft, t as ChevronsRight } from "./chevrons-right-BXdmZ2TS.js";
+import { t as FormField } from "./FormField-DoGaUqFm.js";
+import { i as CalendarGrid, n as renderDatePickerTodayIcon, r as datePickerInputContentRowDefinition, t as DatePickerInput } 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, z as $5dc95899b306f630$export$c9058316764c140e } 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, h as useRangeCalendarState, i as getStaticDateTimeFocusTarget, m as useDateRangePickerState, o as DateTimeDialogFooter, r as getStaticDateRangeSegments, s as DateTimeDialog, v as $16f0b7bb276bc17e$export$300019f83c56d282, w as $896ba0a80a8f4d36$export$85fd5fdf27bacc79, x as $16f0b7bb276bc17e$export$7b3062cd49e80452 } from "./staticDateTimeSegments-CKL9PuGV.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, r as $e5be200c675c3b3a$export$dad6ae84456c676a, t as $e5be200c675c3b3a$export$75ee7c75d68f5b0e } from "./useFormValidationState-Bpry7Uk5.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { t as Typography } from "./Typography-AcUd9df8.js";
+import { InlineIconButton } from "./components/inline-icon-button.js";
+import { PillButton } from "./components/pill-button.js";
+import "./i18n-C2TBJvnh.js";
+import { t as FieldController } from "./form.binding-DyZ4fH8l.js";
+import { t as TooltipWrapper } from "./TooltipWrapper-CLMp_zj4.js";
+import { n as InputFrame, t as useStaticInputHandoff } from "./useStaticInputHandoff-COJdSrME.js";
+import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";
+import { t as Select } from "./Select-CCNQ4Bso.js";
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Button } from "react-aria-components";
+import { createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
+import { useRangeCalendar } from "@react-aria/calendar";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
-import { mergeRefs } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
-import { createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
-import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
+//#region ../../node_modules/.bun/@react-aria+datepicker@3.16.0+67f6792bdf102c28/node_modules/@react-aria/datepicker/dist/useDateRangePicker.mjs
+function $parcel$interopDefault(a) {
+	return a && a.__esModule ? a.default : a;
+}
+function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
+	var _state_value, _state_defaultValue, _state_value1, _state_defaultValue1, _state_dateRange;
+	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 labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+	let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	let range = state.formatValue(locale, { month: "long" });
+	let description = range ? stringFormatter.format("selectedRangeDescription", {
+		startDate: range.start,
+		endDate: range.end
+	}) : "";
+	let descProps = $ef06256079686ba0$export$f8aeda7b10753fa1(description);
+	let startFieldProps = {
+		"aria-label": stringFormatter.format("startDate"),
+		"aria-labelledby": labelledBy
+	};
+	let endFieldProps = {
+		"aria-label": stringFormatter.format("endDate"),
+		"aria-labelledby": labelledBy
+	};
+	let buttonId = $bdb11010cef70236$export$f680877a34711e37();
+	let dialogId = $bdb11010cef70236$export$f680877a34711e37();
+	let groupProps = $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref);
+	let ariaDescribedBy = [descProps["aria-describedby"], fieldProps["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	let focusManager = useMemo(() => $9bf71ea28793e738$export$c5251b9e124bf29(ref, { accept: (element) => element.id !== buttonId }), [ref, buttonId]);
+	let commonFieldProps = {
+		[$16f0b7bb276bc17e$export$7b3062cd49e80452]: focusManager,
+		[$16f0b7bb276bc17e$export$300019f83c56d282]: "presentation",
+		"aria-describedby": ariaDescribedBy,
+		placeholderValue: props.placeholderValue,
+		hideTimeZone: props.hideTimeZone,
+		hourCycle: props.hourCycle,
+		granularity: props.granularity,
+		shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+		isDisabled: props.isDisabled,
+		isReadOnly: props.isReadOnly,
+		isRequired: props.isRequired,
+		validationBehavior: props.validationBehavior
+	};
+	let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+	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);
+			}
+		}
+	});
+	let startFieldValidation = useRef($e5be200c675c3b3a$export$dad6ae84456c676a);
+	let endFieldValidation = useRef($e5be200c675c3b3a$export$dad6ae84456c676a);
+	var _state_value_start, _state_value_end;
+	return {
+		groupProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+			role: "group",
+			"aria-disabled": props.isDisabled || null,
+			"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();
+			}
+		},
+		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}`
+		},
+		startFieldProps: {
+			...startFieldProps,
+			...commonFieldProps,
+			value: (_state_value_start = (_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.start) !== null && _state_value_start !== void 0 ? _state_value_start : null,
+			defaultValue: (_state_defaultValue = state.defaultValue) === null || _state_defaultValue === void 0 ? void 0 : _state_defaultValue.start,
+			onChange: (start) => state.setDateTime("start", start),
+			autoFocus: props.autoFocus,
+			name: props.startName,
+			form: props.form,
+			[$e5be200c675c3b3a$export$a763b9476acd3eb]: {
+				realtimeValidation: state.realtimeValidation,
+				displayValidation: state.displayValidation,
+				updateValidation(e) {
+					startFieldValidation.current = e;
+					state.updateValidation($e5be200c675c3b3a$export$75ee7c75d68f5b0e(e, endFieldValidation.current));
+				},
+				resetValidation: state.resetValidation,
+				commitValidation: state.commitValidation
+			}
+		},
+		endFieldProps: {
+			...endFieldProps,
+			...commonFieldProps,
+			value: (_state_value_end = (_state_value1 = state.value) === null || _state_value1 === void 0 ? void 0 : _state_value1.end) !== null && _state_value_end !== void 0 ? _state_value_end : null,
+			defaultValue: (_state_defaultValue1 = state.defaultValue) === null || _state_defaultValue1 === void 0 ? void 0 : _state_defaultValue1.end,
+			onChange: (end) => state.setDateTime("end", end),
+			name: props.endName,
+			form: props.form,
+			[$e5be200c675c3b3a$export$a763b9476acd3eb]: {
+				realtimeValidation: state.realtimeValidation,
+				displayValidation: state.displayValidation,
+				updateValidation(e) {
+					endFieldValidation.current = e;
+					state.updateValidation($e5be200c675c3b3a$export$75ee7c75d68f5b0e(startFieldValidation.current, e));
+				},
+				resetValidation: state.resetValidation,
+				commitValidation: state.commitValidation
+			}
+		},
+		descriptionProps,
+		errorMessageProps,
+		calendarProps: {
+			autoFocus: true,
+			value: ((_state_dateRange = state.dateRange) === null || _state_dateRange === void 0 ? void 0 : _state_dateRange.start) && state.dateRange.end ? state.dateRange : null,
+			onChange: state.setDateRange,
+			minValue: props.minValue,
+			maxValue: props.maxValue,
+			isDisabled: props.isDisabled,
+			isReadOnly: props.isReadOnly,
+			isDateUnavailable: props.isDateUnavailable,
+			allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+			defaultFocusedValue: state.dateRange ? 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/CalendarSelectHeader.tsx
+const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
+	const { t } = useTranslation("ui");
+	const displayDate = state.visibleRange.start.add(offset);
+	const currentMonth = displayDate.month - 1;
+	const currentYear = displayDate.year;
+	const formatter = $896ba0a80a8f4d36$export$85fd5fdf27bacc79({
+		month: "long",
+		timeZone: state.timeZone
+	});
+	const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+	const MONTHS = useMemo(() => {
+		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;
+	}, [
+		formatter,
+		numMonths,
+		state.focusedDate,
+		state.timeZone
+	]);
+	const years = Array.from({ length: 201 }, (_, i) => currentYear - 100 + i);
+	const getAvailableMonths = () => {
+		return MONTHS.map((month, i) => {
+			const monthDate = displayDate.set({ month: i + 1 });
+			let isDisabled = false;
+			if (maxDate) isDisabled = monthDate.year > maxDate.year || monthDate.year === maxDate.year && monthDate.month >= maxDate.month;
+			if (minDate) isDisabled = monthDate.year < minDate.year || monthDate.year === minDate.year && monthDate.month <= minDate.month;
+			return {
+				month,
+				value: i,
+				isDisabled
+			};
+		});
+	};
+	const getAvailableYears = () => {
+		return years.map((year) => {
+			let isDisabled = false;
+			if (maxDate) isDisabled = year > maxDate.year || year === maxDate.year && displayDate.month >= maxDate.month;
+			if (minDate && !isDisabled) isDisabled = year < minDate.year || year === minDate.year && displayDate.month <= minDate.month;
+			return {
+				year,
+				isDisabled
+			};
+		});
+	};
+	const availableMonths = getAvailableMonths();
+	const availableYears = getAvailableYears();
+	const handleMonthChange = (value) => {
+		if (value === null) return;
+		const newDate = displayDate.set({ month: value + 1 });
+		onNavigate?.(newDate);
+	};
+	const handleYearChange = (value) => {
+		if (value === null) return;
+		const newDate = displayDate.set({ year: value });
+		onNavigate?.(newDate);
+	};
+	const handlePrevMonth = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.subtract({ months: 1 });
+		onNavigate?.(newDate);
+	};
+	const handleNextMonth = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.add({ months: 1 });
+		onNavigate?.(newDate);
+	};
+	const handlePrevYear = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.subtract({ years: 1 });
+		onNavigate?.(newDate);
+	};
+	const handleNextYear = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.add({ years: 1 });
+		onNavigate?.(newDate);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between gap-3 border-elevation-outline-default-1 border-b border-solid px-3 py-2-5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isPrevYearDisabled,
+					onClick: handlePrevYear,
+					icon: ChevronsLeft,
+					label: t(($) => $.ui.datePicker.navigation.previousYear)
+				}), /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isPrevMonthDisabled,
+					onClick: handlePrevMonth,
+					icon: ChevronLeft,
+					label: t(($) => $.ui.datePicker.navigation.previousMonth)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Select, {
+					label: "Month",
+					hideLabel: true,
+					customTrigger: /* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: ChevronDown,
+						children: MONTHS[currentMonth].slice(0, 3)
+					}),
+					ignoreTriggerWidth: true,
+					items: availableMonths.map(({ month, value, isDisabled }) => ({
+						label: month,
+						id: value,
+						isDisabled
+					})).filter(({ isDisabled }) => !isDisabled),
+					value: currentMonth,
+					onChange: handleMonthChange
+				}), /* @__PURE__ */ jsx(Select, {
+					label: "Year",
+					hideLabel: true,
+					customTrigger: /* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: ChevronDown,
+						children: currentYear.toString()
+					}),
+					items: availableYears.map(({ year, isDisabled }) => ({
+						label: year.toString(),
+						id: year,
+						isDisabled
+					})).filter(({ isDisabled }) => !isDisabled),
+					value: currentYear,
+					onChange: handleYearChange
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isNextMonthDisabled,
+					onClick: handleNextMonth,
+					icon: ChevronRight,
+					label: t(($) => $.ui.datePicker.navigation.nextMonth)
+				}), /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isNextYearDisabled,
+					onClick: handleNextYear,
+					icon: ChevronsRight,
+					label: t(($) => $.ui.datePicker.navigation.nextYear)
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/inputs/DateTime/shared/RangeCalendar.tsx
+const RangeCalendar = ({ className, leftCalendarState, rightCalendarState, calendarProps, onApply, onRangeChange: _onRangeChange, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation }) => {
+	const leftRef = useRef(null);
+	const rightRef = useRef(null);
+	const { calendarProps: leftCalendarAriaProps } = useRangeCalendar(calendarProps, leftCalendarState, leftRef);
+	const { calendarProps: rightCalendarAriaProps } = useRangeCalendar(calendarProps, rightCalendarState, rightRef);
+	const leftDate = leftCalendarState.visibleRange.start;
+	const rightDate = rightCalendarState.visibleRange.start;
+	const handleLeftKeyboardNavigation = (event, date) => {
+		return onKeyboardNavigation?.(event, date, "left") ?? false;
+	};
+	const handleRightKeyboardNavigation = (event, date) => {
+		return onKeyboardNavigation?.(event, date, "right") ?? false;
+	};
+	const handleLeftNavigate = (newDate) => {
+		const rightCurrentDate = rightCalendarState.visibleRange.start;
+		if (newDate.year < rightCurrentDate.year || newDate.year === rightCurrentDate.year && newDate.month < rightCurrentDate.month) leftCalendarState.setFocusedDate(newDate);
+		else {
+			const closestValidDate = rightCurrentDate.subtract({ months: 1 });
+			leftCalendarState.setFocusedDate(closestValidDate);
+		}
+	};
+	const handleRightNavigate = (newDate) => {
+		const leftCurrentDate = leftCalendarState.visibleRange.start;
+		if (newDate.year > leftCurrentDate.year || newDate.year === leftCurrentDate.year && newDate.month > leftCurrentDate.month) rightCalendarState.setFocusedDate(newDate);
+		else {
+			const closestValidDate = leftCurrentDate.add({ months: 1 });
+			rightCalendarState.setFocusedDate(closestValidDate);
+		}
+	};
+	const isNextDisabled = useMemo(() => {
+		const leftNextDate = leftDate.add({ months: 1 });
+		return leftNextDate.year > rightDate.year || leftNextDate.year === rightDate.year && leftNextDate.month === rightDate.month;
+	}, [leftDate, rightDate]);
+	const isPrevDisabled = useMemo(() => {
+		const rightPrevDate = rightDate.subtract({ months: 1 });
+		return rightPrevDate.year < leftDate.year || rightPrevDate.year === leftDate.year && rightPrevDate.month === leftDate.month;
+	}, [leftDate, rightDate]);
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex w-fit flex-col items-center bg-elevation-fill-default-1", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex",
+			children: [/* @__PURE__ */ jsxs("div", {
+				...leftCalendarAriaProps,
+				ref: leftRef,
+				className: "flex flex-col items-center",
+				children: [/* @__PURE__ */ jsx(CalendarSelectHeader, {
+					state: leftCalendarState,
+					isNextMonthDisabled: isNextDisabled,
+					isNextYearDisabled: isNextDisabled,
+					onNavigate: handleLeftNavigate,
+					maxDate: rightDate
+				}), /* @__PURE__ */ jsx(CalendarGrid, {
+					state: leftCalendarState,
+					onApply,
+					shouldCloseOnSelect: false,
+					onDateSelection,
+					rangeSelection,
+					onDateHover,
+					hoverDate,
+					onKeyboardNavigation: handleLeftKeyboardNavigation,
+					className: "h-64 w-[304px]!",
+					calendarSide: "left"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				...rightCalendarAriaProps,
+				ref: rightRef,
+				className: "hidden flex-col items-center md:flex",
+				children: [/* @__PURE__ */ jsx(CalendarSelectHeader, {
+					state: rightCalendarState,
+					isPrevMonthDisabled: isPrevDisabled,
+					isPrevYearDisabled: isPrevDisabled,
+					onNavigate: handleRightNavigate,
+					minDate: leftDate
+				}), /* @__PURE__ */ jsx(CalendarGrid, {
+					state: rightCalendarState,
+					onApply,
+					shouldCloseOnSelect: false,
+					onDateSelection,
+					rangeSelection,
+					onDateHover,
+					hoverDate,
+					onKeyboardNavigation: handleRightKeyboardNavigation,
+					className: "h-64 w-[304px]!",
+					calendarSide: "right"
+				})]
+			})]
+		})
+	});
+};
+//#endregion
 //#region src/components/inputs/DateTime/DateRangePicker/DateRangePicker.tsx
 const DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
@@ -77,14 +511,14 @@ const DateRangePickerBase = (props) => {
 		},
 		shouldCloseOnSelect: false
 	});
-	const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps } = useDateRangePicker({
+	const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps } = $887cac91b7cc8801$export$12fd5f0e9f4bb192({
 		...rest,
 		label,
 		shouldForceLeadingZeros,
 		minValue,
 		maxValue
 	}, state, dateRangePickerRef);
-	const { calendarProps } = useDateRangePicker({
+	const { calendarProps } = $887cac91b7cc8801$export$12fd5f0e9f4bb192({
 		...rest,
 		label,
 		shouldForceLeadingZeros,
@@ -102,7 +536,7 @@ const DateRangePickerBase = (props) => {
 		const newValue = partialRange.start || partialRange.end ? partialRange : null;
 		onChange?.(newValue);
 	};
-	const { locale } = useLocale$1();
+	const { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
 	useImperativeHandle(ref, () => ({
 		clear: () => {
 			datePickerInputRef.current?.clear();
@@ -611,7 +1045,7 @@ const DateRangePickerBase = (props) => {
 			className: clsx("group relative inline-flex w-full flex-col text-left", className),
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: [/* @__PURE__ */ jsx(DatePickerInput, {
-				ref: mergeRefs(ref, datePickerInputRef),
+				ref: $5dc95899b306f630$export$c9058316764c140e(ref, datePickerInputRef),
 				as,
 				groupProps,
 				fieldProps: {
@@ -665,7 +1099,7 @@ const DateRangePickerBase = (props) => {
 				hideSidebar,
 				sidebar: /* @__PURE__ */ jsx("div", {
 					className: "flex w-full flex-row overflow-auto border-elevation-outline-default-1 border-solid [-ms-overflow-style:none] [scrollbar-width:none] md:w-[156px] md:flex-col md:border-r [&::-webkit-scrollbar]:hidden",
-					children: presets.map((preset) => /* @__PURE__ */ jsx(Button, {
+					children: presets.map((preset) => /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
 						isDisabled: preset.isDisabled,
 						onClick: () => selectPreset(preset),
 						className: clsx("w-full px-2 py-1 text-left md:px-list-side-item-left md:py-list-height-item disabled:text-interactive-text-secondary-disabled!", activePreset !== preset.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover", activePreset === preset.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"),
@@ -714,7 +1148,7 @@ const DateRangePickerBase = (props) => {
 const DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRowDefinition);
-	const { locale } = useLocale$1();
+	const { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
 	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
 	const allowPartialRange = props.allowPartialRange ?? ui.dateInput.allowPartialRange;
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
@@ -846,7 +1280,7 @@ const DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStatic
 	return /* @__PURE__ */ jsx(DateRangePickerBase, {
 		...props,
 		...dateLimits,
-		ref: mergeRefs(props.ref, inputRef),
+		ref: $5dc95899b306f630$export$c9058316764c140e(props.ref, inputRef),
 		value: parseDateRange(normalizedValue),
 		onChange: (value) => props.onChange?.(formatDateRange(value))
 	});
@@ -860,7 +1294,7 @@ const DateRangePickerComponent = ({ fullIso = true, minValue, maxValue, renderSt
 			name: field.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DateRangePickerInner, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref),
+				ref: $5dc95899b306f630$export$c9058316764c140e(ref, field.ref),
 				value: field.value ?? null,
 				onChange: (value) => field.onChange(value ?? null),
 				onBlur: field.onBlur,
@@ -885,4 +1319,4 @@ const DateRangePickerComponent = ({ fullIso = true, minValue, maxValue, renderSt
 };
 const DateRangePicker = memo(DateRangePickerComponent);
 //#endregion
-export { DateRangePicker };
+export { DateRangePicker as t };

package/dist/{components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts → DateRangePicker-DjkIlnMl.d.ts}

@@ -1,13 +1,11 @@
-import { FieldValues } from "../../shared/form.binding.js";
-import { ControlProps } from "../../shared/form.types.js";
-import { InputVariantProps } from "../../shared/input.cva.js";
-import { FormFieldProps } from "../../../form-field.js";
-import { DatePickerTodayIcon, DatePickerTodayIconButtonComponent, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from "../shared/datePicker.types.js";
-import { DatePickerInputHandle } from "../shared/DatePickerInput.js";
+import { C as DateValue$1, b as DateRangePickerStateOptions } from "./types-BV15_DBT.js";
+import { n as FieldValues } from "./form.binding-DWlFTecs.js";
+import { t as ControlProps } from "./form.types-B9Vp8q2g.js";
+import { n as FormFieldProps } from "./FormField-FvutosEE.js";
+import { n as InputVariantProps } from "./input.cva-CfgCOIQW.js";
+import { a as DatePickerTodayIconPlacement, i as DatePickerTodayIconButtonSize, n as DatePickerTodayIcon, r as DatePickerTodayIconButtonComponent, t as DatePickerInputHandle } from "./DatePickerInput-BC-q8HcY.js";
 import { FocusEvent, Ref } from "react";
-import { DateValue } from "react-aria";
 import { CalendarDate } from "@internationalized/date";
-import { DateRangePickerStateOptions } from "react-stately";
 //#region src/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts
 interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DateRangePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
   ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
@@ -38,12 +36,12 @@ interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" |
     end: string | null;
   } | null) => void;
   fullIso?: boolean;
-  minValue?: DateValue | string;
-  maxValue?: DateValue | string;
+  minValue?: DateValue$1 | string;
+  maxValue?: DateValue$1 | string;
   renderStaticInput?: boolean;
 }
 type ControlledDateRangePickerProps<TFieldValues extends FieldValues> = ControlProps<DateRangePickerProps, TFieldValues>;
 declare const DateRangePickerComponent: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 declare const DateRangePicker: typeof DateRangePickerComponent;
 //#endregion
-export { ControlledDateRangePickerProps, DateRangePicker, DateRangePickerProps };
+export { DateRangePicker as n, DateRangePickerProps as r, ControlledDateRangePickerProps as t };