@povio/ui 3.4.0-rc.15 → 3.4.0-rc.17

package/dist/components/inputs/DateTime/shared/Calendar.js

@@ -4,11 +4,11 @@ import { MonthPicker } from "./MonthPicker.js";
 import { TimePickerForm } from "./TimePickerForm.js";
 import { YearPicker } from "./YearPicker.js";
 import { clsx } from "clsx";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCalendar } from "@react-aria/calendar";
 //#region src/components/inputs/DateTime/shared/Calendar.tsx
-var Calendar = ({ className, includesTime, datePickerState, hourCycle, isTimeOptional, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity = "day", setDateValueOnDateSelection = false, onDateSelectionChange, ...props }) => {
+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";
@@ -52,30 +52,33 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, isTimeOpt
 		}
 		setToggleState("year");
 	};
-	const handleHeaderMonthNavigation = (months) => {
-		if (toggleState) return;
-		if (!onMonthYearChange) return;
+	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 }));
-	};
-	const headerPrevButtonProps = {
+	}, [
+		toggleState,
+		onMonthYearChange,
+		props.state.focusedDate
+	]);
+	const headerPrevButtonProps = useMemo(() => ({
 		...prevButtonProps,
 		onPress: (event) => {
 			prevButtonProps.onPress?.(event);
 			handleHeaderMonthNavigation(-1);
 		}
-	};
-	const headerNextButtonProps = {
+	}), [prevButtonProps, handleHeaderMonthNavigation]);
+	const headerNextButtonProps = useMemo(() => ({
 		...nextButtonProps,
-		onPress: (event_0) => {
-			nextButtonProps.onPress?.(event_0);
+		onPress: (event) => {
+			nextButtonProps.onPress?.(event);
 			handleHeaderMonthNavigation(1);
 		}
-	};
+	}), [nextButtonProps, handleHeaderMonthNavigation]);
 	const onDateSelection = useCallback((date) => {
 		if (!includesTime || !setDateValueOnDateSelection) return;
 		datePickerState.setDateValue(date);
@@ -84,8 +87,8 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, isTimeOpt
 		datePickerState,
 		setDateValueOnDateSelection
 	]);
-	const handleDateChange = (selectedDate_0) => {
-		const resolvedDate = selectedDate_0 ?? props.state.focusedDate;
+	const handleDateChange = (selectedDate) => {
+		const resolvedDate = selectedDate ?? props.state.focusedDate;
 		if (includesTime && resolvedDate && setDateValueOnDateSelection) {
 			datePickerState.setDateValue(resolvedDate);
 			onDateSelectionChange?.(resolvedDate);

package/dist/components/inputs/DateTime/shared/CalendarCell.js

@@ -1,4 +1,4 @@
-import { Typography } from "../../../text/Typography/Typography.js";
+import { Typography } from "../../../typography.js";
 import { clsx } from "clsx";
 import { useCallback, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -7,10 +7,10 @@ import { isSameDay } from "@internationalized/date";
 import { useCalendarCell } from "@react-aria/calendar";
 import { useFocusRing } from "@react-aria/focus";
 //#region src/components/inputs/DateTime/shared/CalendarCell.tsx
-var isRange = (state) => {
+const isRange = (state) => {
 	return "highlightedRange" in state;
 };
-var CalendarCell = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection = true, shouldCloseOnSelect = true, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, ...props }) => {
+const CalendarCell = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection = true, shouldCloseOnSelect = true, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, ...props }) => {
 	const ref = useRef(null);
 	const { cellProps, buttonProps, formattedDate, isSelected, isDisabled, isOutsideVisibleRange, isFocused } = useCalendarCell(props, state, ref);
 	const { focusProps } = useFocusRing();
@@ -28,9 +28,9 @@ var CalendarCell = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelec
 		shouldCloseOnSelect,
 		onApply
 	]);
-	const onDoubleClick = useCallback((event_0) => {
+	const onDoubleClick = useCallback((event) => {
 		if (isDisabled) return;
-		event_0.preventDefault();
+		event.preventDefault();
 		onDoubleClickApply?.(props.date);
 	}, [
 		isDisabled,
@@ -56,14 +56,14 @@ var CalendarCell = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelec
 				isInRange = isAfterStart && isBeforeEnd;
 			}
 			if (rangeSelection.isSelecting && rangeSelection.start && hoverDate && !rangeSelection.end) {
-				const dateValue_0 = props.date;
+				const dateValue = props.date;
 				const { start } = rangeSelection;
 				const end = hoverDate;
 				const earlierDate = start.compare(end) <= 0 ? start : end;
 				const laterDate = start.compare(end) <= 0 ? end : start;
-				const isAfterStart_0 = dateValue_0.compare(earlierDate) > 0;
-				const isBeforeEnd_0 = dateValue_0.compare(laterDate) < 0;
-				isHoverRange = isAfterStart_0 && isBeforeEnd_0;
+				const isAfterStart = dateValue.compare(earlierDate) > 0;
+				const isBeforeEnd = dateValue.compare(laterDate) < 0;
+				isHoverRange = isAfterStart && isBeforeEnd;
 			}
 		} else {
 			isSelectionStart = isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.start) : isSelected;
@@ -71,10 +71,10 @@ var CalendarCell = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelec
 			isSelectedCell = isSelectionStart || isSelectionEnd || !isRange(state) && isSelected;
 			isInRange = isRange(state) && isSelected && !isSelectionStart && !isSelectionEnd;
 			if (isRange(state) && state.highlightedRange && !isSelected) {
-				const dateValue_1 = props.date;
-				const isAfterStart_1 = dateValue_1.compare(state.highlightedRange.start) > 0;
-				const isBeforeEnd_1 = dateValue_1.compare(state.highlightedRange.end) < 0;
-				isHoverRange = isAfterStart_1 && isBeforeEnd_1;
+				const dateValue = props.date;
+				const isAfterStart = dateValue.compare(state.highlightedRange.start) > 0;
+				const isBeforeEnd = dateValue.compare(state.highlightedRange.end) < 0;
+				isHoverRange = isAfterStart && isBeforeEnd;
 			}
 		}
 		return {
@@ -92,12 +92,12 @@ var CalendarCell = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelec
 		isSelected,
 		hoverDate
 	]);
-	const handleEvent = (event_1, eventHandler) => {
+	const handleEvent = (event, eventHandler) => {
 		if (isOutsideVisibleRange) {
 			state.selectDate(props.date);
 			state.setFocusedDate(props.date);
 		}
-		eventHandler?.(event_1);
+		eventHandler?.(event);
 		if (isSelected && shouldCloseOnSelect) onApply?.(props.date);
 	};
 	const onMouseEnter = useCallback(() => {
@@ -111,8 +111,8 @@ var CalendarCell = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelec
 		if (onDateHover && selectionState.isSelectingMode) onDateHover(null);
 	}, [onDateHover, selectionState.isSelectingMode]);
 	const cellClassName = useMemo(() => {
-		const { isSelectedCell: isSelectedCell_0, isInRange: isInRange_0, isHoverRange: isHoverRange_0, isSelectingMode: isSelectingMode_0, isSelectionStart: isSelectionStart_0, isSelectionEnd: isSelectionEnd_0 } = selectionState;
-		return clsx("mx-auto flex h-10 w-full max-w-10 items-center justify-center rounded-button-rounding-m p-2", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", "border border-transparent border-solid", !isSelectedCell_0 && !isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-idle", !isSelectedCell_0 && isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-disabled", isSelectedCell_0 && !isOutsideVisibleRange && "bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle", isSelectedCell_0 && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionStart_0 && !isSelectionEnd_0 && "rounded-r-none", isSelectedCell_0 && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionEnd_0 && !isSelectionStart_0 && "rounded-l-none", isDisabled && !isOutsideVisibleRange && "cursor-default", isDisabled && "opacity-20", !isSelectedCell_0 && !isInRange_0 && !isHoverRange_0 && !isSelectingMode_0 && !isDisabled && !isOutsideVisibleRange && "[@media(pointer:fine)]:hover:border-elevation-outline-default-1 [@media(pointer:fine)]:hover:text-interactive-text-secondary-hover", isInRange_0 && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover", isHoverRange_0 && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover", !isInRange_0 && !isSelectedCell_0 && isSelectingMode_0 && "hover:bg-interactive-contained-primary-idle hover:text-interactive-text-primary-idle-inverted", isSelectingMode_0 && !isSelectedCell_0 && !isInRange_0 && !isHoverRange_0 && !isDisabled && !isOutsideVisibleRange && "transition-all duration-75 hover:border-elevation-outline-default-1", isFocused && !isSelectedCell_0 && !isDisabled && !isOutsideVisibleRange && "ring-2 ring-inset ring-interactive-contained-primary-focus");
+		const { isSelectedCell, isInRange, isHoverRange, isSelectingMode, isSelectionStart, isSelectionEnd } = selectionState;
+		return clsx("mx-auto flex h-10 w-full max-w-10 items-center justify-center rounded-button-rounding-m p-2", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", "border border-transparent border-solid", !isSelectedCell && !isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-idle", !isSelectedCell && isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-disabled", isSelectedCell && !isOutsideVisibleRange && "bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle", isSelectedCell && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionStart && !isSelectionEnd && "rounded-r-none", isSelectedCell && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionEnd && !isSelectionStart && "rounded-l-none", isDisabled && !isOutsideVisibleRange && "cursor-default", isDisabled && "opacity-20", !isSelectedCell && !isInRange && !isHoverRange && !isSelectingMode && !isDisabled && !isOutsideVisibleRange && "[@media(pointer:fine)]:hover:border-elevation-outline-default-1 [@media(pointer:fine)]:hover:text-interactive-text-secondary-hover", isInRange && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover", isHoverRange && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover", !isInRange && !isSelectedCell && isSelectingMode && "hover:bg-interactive-contained-primary-idle hover:text-interactive-text-primary-idle-inverted", isSelectingMode && !isSelectedCell && !isInRange && !isHoverRange && !isDisabled && !isOutsideVisibleRange && "transition-all duration-75 hover:border-elevation-outline-default-1", isFocused && !isSelectedCell && !isDisabled && !isOutsideVisibleRange && "ring-2 ring-inset ring-interactive-contained-primary-focus");
 	}, [
 		selectionState,
 		isOutsideVisibleRange,
@@ -131,7 +131,7 @@ var CalendarCell = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelec
 			className: cellClassName,
 			onClick: (e) => handleEvent(e, onClick),
 			onDoubleClick,
-			onKeyDown: (e_0) => handleEvent(e_0, () => onKeyboardNavigation?.(e_0, props.date)),
+			onKeyDown: (e) => handleEvent(e, () => onKeyboardNavigation?.(e, props.date)),
 			children: /* @__PURE__ */ jsx(Typography, {
 				as: "span",
 				size: "label-2",

package/dist/components/inputs/DateTime/shared/CalendarGrid.js

@@ -1,10 +1,10 @@
-import { Typography } from "../../../text/Typography/Typography.js";
+import { Typography } from "../../../typography.js";
 import { CalendarCell } from "./CalendarCell.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCalendarGrid } from "@react-aria/calendar";
 //#region src/components/inputs/DateTime/shared/CalendarGrid.tsx
-var WEEK_INDICES = [
+const WEEK_INDICES = [
 	0,
 	1,
 	2,
@@ -12,7 +12,8 @@ var WEEK_INDICES = [
 	4,
 	5
 ];
-var CalendarGrid = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection, shouldCloseOnSelect, offset = {}, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, ...props }) => {
+const NO_CALENDAR_OFFSET = {};
+const CalendarGrid = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection, shouldCloseOnSelect, offset = NO_CALENDAR_OFFSET, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, ...props }) => {
 	const { gridProps, headerProps, weekDays } = useCalendarGrid({
 		...props,
 		weekdayStyle: "short"
@@ -34,9 +35,9 @@ var CalendarGrid = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelec
 					className: "bg-elevation-fill-default-1 py-2 text-interactive-text-secondary-idle",
 					children: day.substring(0, 2)
 				}) }, day)) })
-			}), /* @__PURE__ */ jsx("tbody", { children: WEEK_INDICES.map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map((date_0, i) => date_0 ? /* @__PURE__ */ jsx(CalendarCell, {
+			}), /* @__PURE__ */ jsx("tbody", { children: WEEK_INDICES.map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map((date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, {
 				state,
-				date: date_0,
+				date,
 				onApply,
 				onDoubleClickApply,
 				shouldApplyOnDateSelection,

package/dist/components/inputs/DateTime/shared/CalendarHeader.js

@@ -1,4 +1,4 @@
-import { PillButton } from "../../../buttons/PillButton/PillButton.js";
+import { PillButton } from "../../../pill-button.js";
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
 import { clsx } from "clsx";
 import { Button, ToggleButtonGroup } from "react-aria-components";
@@ -6,14 +6,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarDateTime, Time } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/CalendarHeader.tsx
-var HourCycle = {
+const HourCycle = {
 	12: "h12",
 	24: "h23"
 };
-var getTimeFormatterDate = (timeValue, timeZone) => {
+const getTimeFormatterDate = (timeValue, timeZone) => {
 	return new CalendarDateTime(2e3, 1, 1, timeValue.hour, timeValue.minute).toDate(timeZone);
 };
-var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, isTimeOptional, hourCycle, granularity = "day", toggleState, setToggleState }) => {
+const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, isTimeOptional, hourCycle, granularity = "day", toggleState, setToggleState }) => {
 	const formatter = useDateFormatter({
 		month: "long",
 		timeZone: calendarState.timeZone
@@ -28,7 +28,8 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 	const hasTimeValue = !!datePickerState?.timeValue;
 	let timeLabel = "--:--";
 	if (isTimeOptional || hasTimeValue) {
-		const date = getTimeFormatterDate(datePickerState?.timeValue || new Time(0, 0), calendarState.timeZone);
+		const timeValue = datePickerState?.timeValue || new Time(0, 0);
+		const date = getTimeFormatterDate(timeValue, calendarState.timeZone);
 		timeLabel = timeFormatter.format(date);
 	}
 	return /* @__PURE__ */ jsxs("div", {
@@ -73,8 +74,8 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 						icon: toggleState === "year" ? ChevronUp : ChevronDown,
 						toggle: true,
 						isSelected: toggleState === "year",
-						onChange: (isSelected_0) => {
-							if (isSelected_0) {
+						onChange: (isSelected) => {
+							if (isSelected) {
 								setToggleState("year");
 								return;
 							}
@@ -97,7 +98,7 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 						icon: toggleState === "time" ? ChevronUp : ChevronDown,
 						toggle: true,
 						isSelected: toggleState === "time",
-						onChange: (isSelected_1) => setToggleState(isSelected_1 ? "time" : null),
+						onChange: (isSelected) => setToggleState(isSelected ? "time" : null),
 						children: timeLabel
 					})
 				]

package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js

@@ -1,5 +1,5 @@
-import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { PillButton } from "../../../buttons/PillButton/PillButton.js";
+import { InlineIconButton } from "../../../inline-icon-button.js";
+import { PillButton } from "../../../pill-button.js";
 import "../../../../config/i18n.js";
 import { Select } from "../../Selection/Select/Select.js";
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/CalendarSelectHeader.tsx
-var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
+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;
@@ -31,28 +31,28 @@ var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, is
 		state.focusedDate,
 		state.timeZone
 	]);
-	const years = Array.from({ length: 201 }, (_, i_0) => currentYear - 100 + i_0);
+	const years = Array.from({ length: 201 }, (_, i) => currentYear - 100 + i);
 	const getAvailableMonths = () => {
-		return MONTHS.map((month, i_1) => {
-			const monthDate = displayDate.set({ month: i_1 + 1 });
+		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_1,
+				value: i,
 				isDisabled
 			};
 		});
 	};
 	const getAvailableYears = () => {
 		return years.map((year) => {
-			let isDisabled_0 = false;
-			if (maxDate) isDisabled_0 = year > maxDate.year || year === maxDate.year && displayDate.month >= maxDate.month;
-			if (minDate && !isDisabled_0) isDisabled_0 = year < minDate.year || year === minDate.year && displayDate.month <= minDate.month;
+			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: isDisabled_0
+				isDisabled
 			};
 		});
 	};
@@ -63,34 +63,34 @@ var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, is
 		const newDate = displayDate.set({ month: value + 1 });
 		onNavigate?.(newDate);
 	};
-	const handleYearChange = (value_0) => {
-		if (value_0 === null) return;
-		const newDate_0 = displayDate.set({ year: value_0 });
-		onNavigate?.(newDate_0);
+	const handleYearChange = (value) => {
+		if (value === null) return;
+		const newDate = displayDate.set({ year: value });
+		onNavigate?.(newDate);
 	};
 	const handlePrevMonth = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
-		const newDate_1 = displayDate.subtract({ months: 1 });
-		onNavigate?.(newDate_1);
+		const newDate = displayDate.subtract({ months: 1 });
+		onNavigate?.(newDate);
 	};
-	const handleNextMonth = (e_0) => {
-		e_0.preventDefault();
-		e_0.stopPropagation();
-		const newDate_2 = displayDate.add({ months: 1 });
-		onNavigate?.(newDate_2);
+	const handleNextMonth = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.add({ months: 1 });
+		onNavigate?.(newDate);
 	};
-	const handlePrevYear = (e_1) => {
-		e_1.preventDefault();
-		e_1.stopPropagation();
-		const newDate_3 = displayDate.subtract({ years: 1 });
-		onNavigate?.(newDate_3);
+	const handlePrevYear = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.subtract({ years: 1 });
+		onNavigate?.(newDate);
 	};
-	const handleNextYear = (e_2) => {
-		e_2.preventDefault();
-		e_2.stopPropagation();
-		const newDate_4 = displayDate.add({ years: 1 });
-		onNavigate?.(newDate_4);
+	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",
@@ -108,7 +108,7 @@ var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, is
 					isDisabled: isPrevMonthDisabled,
 					onClick: handlePrevMonth,
 					icon: ChevronLeft,
-					label: t(($_0) => $_0.ui.datePicker.navigation.previousMonth)
+					label: t(($) => $.ui.datePicker.navigation.previousMonth)
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -124,11 +124,11 @@ var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, is
 						children: MONTHS[currentMonth].slice(0, 3)
 					}),
 					ignoreTriggerWidth: true,
-					items: availableMonths.map(({ month: month_0, value: value_1, isDisabled: isDisabled_1 }) => ({
-						label: month_0,
-						id: value_1,
-						isDisabled: isDisabled_1
-					})).filter(({ isDisabled: isDisabled_2 }) => !isDisabled_2),
+					items: availableMonths.map(({ month, value, isDisabled }) => ({
+						label: month,
+						id: value,
+						isDisabled
+					})).filter(({ isDisabled }) => !isDisabled),
 					value: currentMonth,
 					onChange: handleMonthChange
 				}), /* @__PURE__ */ jsx(Select, {
@@ -141,11 +141,11 @@ var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, is
 						icon: ChevronDown,
 						children: currentYear.toString()
 					}),
-					items: availableYears.map(({ year: year_0, isDisabled: isDisabled_3 }) => ({
-						label: year_0.toString(),
-						id: year_0,
-						isDisabled: isDisabled_3
-					})).filter(({ isDisabled: isDisabled_4 }) => !isDisabled_4),
+					items: availableYears.map(({ year, isDisabled }) => ({
+						label: year.toString(),
+						id: year,
+						isDisabled
+					})).filter(({ isDisabled }) => !isDisabled),
 					value: currentYear,
 					onChange: handleYearChange
 				})]
@@ -157,13 +157,13 @@ var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, is
 					isDisabled: isNextMonthDisabled,
 					onClick: handleNextMonth,
 					icon: ChevronRight,
-					label: t(($_1) => $_1.ui.datePicker.navigation.nextMonth)
+					label: t(($) => $.ui.datePicker.navigation.nextMonth)
 				}), /* @__PURE__ */ jsx(InlineIconButton, {
 					color: "secondary",
 					isDisabled: isNextYearDisabled,
 					onClick: handleNextYear,
 					icon: ChevronsRight,
-					label: t(($_2) => $_2.ui.datePicker.navigation.nextYear)
+					label: t(($) => $.ui.datePicker.navigation.nextYear)
 				})]
 			})
 		]

package/dist/components/inputs/DateTime/shared/DateField.js

@@ -1,15 +1,15 @@
 import { DateSegmentItem } from "./DateSegmentItem.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { DateUtils } from "../../../../utils/date.utils.js";
 import { clsx } from "clsx";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { useDateField, useLocale } from "react-aria";
 import { CalendarDate, CalendarDateTime, createCalendar } from "@internationalized/date";
-import { DateTime } from "luxon";
 import { useDateFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/shared/DateField.tsx
-var omitNullValue = ({ value: _value, ...props }) => props;
-var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity = "day", isTimeOptional = false, format, timeZone, segmentGroup, shouldAutoFixYear = false, preserveNullValue = false, ...props }) => {
+const omitNullValue = ({ value: _value, ...props }) => props;
+const DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity = "day", isTimeOptional = false, format, timeZone, segmentGroup, shouldAutoFixYear = false, preserveNullValue = false, ...props }) => {
 	const { locale } = useLocale();
 	const previousValueRef = useRef(props.value);
 	const dateFieldProps = props.value == null && !preserveNullValue ? omitNullValue(props) : props;
@@ -40,18 +40,18 @@ var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManua
 		return segments;
 	}, [state.segments, isSegmentVisible]);
 	const segmentsToRender = useMemo(() => getSegmentsToRender(), [getSegmentsToRender]);
-	const getSegmentNumber = (segment_0) => {
-		if (!segment_0) return null;
-		if (typeof segment_0.value === "number" && !Number.isNaN(segment_0.value)) return segment_0.value;
-		const parsedValue = parseInt(segment_0.text ?? "");
+	const getSegmentNumber = (segment) => {
+		if (!segment) return null;
+		if (typeof segment.value === "number" && !Number.isNaN(segment.value)) return segment.value;
+		const parsedValue = parseInt(segment.text ?? "");
 		return Number.isNaN(parsedValue) ? null : parsedValue;
 	};
 	const autoFixYear = () => {
-		const monthSegment = state.segments.find((segment_1) => segment_1.type === "month");
-		const daySegment = state.segments.find((segment_2) => segment_2.type === "day");
-		const yearSegment = state.segments.find((segment_3) => segment_3.type === "year");
-		const hourSegment = state.segments.find((segment_4) => segment_4.type === "hour");
-		const minuteSegment = state.segments.find((segment_5) => segment_5.type === "minute");
+		const monthSegment = state.segments.find((segment) => segment.type === "month");
+		const daySegment = state.segments.find((segment) => segment.type === "day");
+		const yearSegment = state.segments.find((segment) => segment.type === "year");
+		const hourSegment = state.segments.find((segment) => segment.type === "hour");
+		const minuteSegment = state.segments.find((segment) => segment.type === "minute");
 		const isMonthFilled = monthSegment && !monthSegment.isPlaceholder;
 		const isDayFilled = daySegment && !daySegment.isPlaceholder;
 		const isYearFilled = yearSegment && !yearSegment.isPlaceholder && yearSegment.text?.length > 0;
@@ -95,8 +95,8 @@ var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManua
 		if (!valueToCorrect) return;
 		const { year } = valueToCorrect;
 		if (shouldAutoFixYear && year >= 0 && year <= 99) {
-			const correctedYear_0 = year <= 50 ? 2e3 + year : 1900 + year;
-			correctedValue = valueToCorrect.set({ year: correctedYear_0 });
+			const correctedYear = year <= 50 ? 2e3 + year : 1900 + year;
+			correctedValue = valueToCorrect.set({ year: correctedYear });
 		}
 		if (correctedValue) {
 			state.setValue(correctedValue);
@@ -118,20 +118,19 @@ var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManua
 		previousValueRef.current = props.value;
 	}, [props.value, state]);
 	useEffect(() => {
-		onClearChange?.(state.segments.some((segment_6) => segment_6.type !== "literal" && segment_6.isPlaceholder === false));
+		onClearChange?.(state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false));
 	}, [state.segments, onClearChange]);
 	const getFormattedDisplayValue = () => {
 		if (!disableManualEntry) return null;
 		if (!format) return null;
 		if (!state.value) return null;
 		const jsDate = DateTimeUtils.fromDateValueToLocal(state.value, timeZone);
-		const formattedDate = DateTime.fromJSDate(jsDate);
-		if (!formattedDate.isValid) return null;
-		return formattedDate.toFormat(format);
+		if (Number.isNaN(jsDate.getTime())) return null;
+		return DateUtils.formatDate(jsDate, format);
 	};
 	const formattedDisplayValue = getFormattedDisplayValue();
-	let fieldContent = /* @__PURE__ */ jsx(Fragment$1, { children: segmentsToRender.map((segment_7, i) => /* @__PURE__ */ jsx(DateSegmentItem, {
-		segment: segment_7,
+	let fieldContent = /* @__PURE__ */ jsx(Fragment$1, { children: segmentsToRender.map((segment, i) => /* @__PURE__ */ jsx(DateSegmentItem, {
+		segment,
 		segmentGroup,
 		state,
 		isDisabled,

package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts

@@ -1,46 +1,12 @@
-import { Ref } from 'react';
-import { DatePickerAria } from 'react-aria';
-import { DatePickerTodayIcon, DatePickerTodayIconButtonComponent, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from './datePicker.types';
-import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
-import { InputVariantProps } from '../../shared/input.cva';
-export interface DatePickerInputHandle {
-    clear: () => void;
-    getContainer?: () => HTMLDivElement | null;
+import "../../FormField/FormFieldHeader.js";
+import "../../shared/input.cva.js";
+import "./datePicker.types.js";
+import { Ref } from "react";
+import "react-aria";
+//#region src/components/inputs/DateTime/shared/DatePickerInput.d.ts
+interface DatePickerInputHandle {
+  clear: () => void;
+  getContainer?: () => HTMLDivElement | null;
 }
-interface DatePickerInputProps extends InputVariantProps {
-    ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
-    groupProps: DatePickerAria["groupProps"];
-    fieldProps: DatePickerAria["fieldProps"];
-    endFieldProps?: DatePickerAria["fieldProps"];
-    fieldValue?: DatePickerAria["fieldProps"]["value"];
-    endFieldValue?: DatePickerAria["fieldProps"]["value"];
-    isValueControlled?: boolean;
-    hasValue?: boolean;
-    buttonProps: DatePickerAria["buttonProps"];
-    isDisabled?: boolean;
-    isInvalid?: boolean;
-    disableDropdown?: boolean;
-    isDateTime?: boolean;
-    shouldShrinkInput?: boolean;
-    isClearable?: boolean;
-    isClearableIfDisabled?: boolean;
-    headerProps?: FormFieldHeaderProps;
-    todayIcon?: DatePickerTodayIcon;
-    todayIconButtonSize?: DatePickerTodayIconButtonSize;
-    todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
-    todayIconPlacement?: DatePickerTodayIconPlacement;
-    isDirty?: boolean;
-    isRequired?: boolean;
-    disableManualEntry?: boolean;
-    autoFixYear?: boolean;
-    placeholder?: string;
-    className?: string;
-    onOpenDropdown?: () => void;
-    dateGranularity?: "day" | "month" | "year";
-    timeZone?: string;
-    isTimeOptional?: boolean;
-    format?: string;
-    onClear?: () => void;
-}
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, isClearableIfDisabled, headerProps, todayIcon, todayIconButtonSize, todayIconButtonComponent, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, dateGranularity, timeZone: timeZoneProp, isTimeOptional, format, onClear: onClearProp, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+//#endregion
+export { DatePickerInputHandle };

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -1,7 +1,7 @@
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
-import { Typography } from "../../../text/Typography/Typography.js";
+import { Typography } from "../../../typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { InlineIconButton } from "../../../inline-icon-button.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { inputBaseDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
@@ -17,7 +17,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, today } from "@internationalized/date";
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
-var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, isClearableIfDisabled, headerProps, todayIcon, todayIconButtonSize = "none", todayIconButtonComponent, todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone: timeZoneProp, isTimeOptional = false, format, onClear: onClearProp, ...props }) => {
+const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, isClearableIfDisabled, headerProps, todayIcon, todayIconButtonSize = "none", todayIconButtonComponent, todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone: timeZoneProp, isTimeOptional = false, format, onClear: onClearProp, ...props }) => {
 	const uiConfig = UIConfig.useConfig();
 	const timeZone = timeZoneProp ?? uiConfig.dateInput.timeZone;
 	let effectiveTimeZone = getLocalTimeZone();