@povio/ui 3.4.0-rc.10 → 3.4.0-rc.11

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

@@ -1,7 +1,7 @@
 import { Typography } from "../../../text/Typography/Typography.js";
 import { CalendarCell } from "./CalendarCell.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { useCalendarGrid } from "@react-aria/calendar";
 //#region src/components/inputs/DateTime/shared/CalendarGrid.tsx
 var WEEK_INDICES = [

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

@@ -1,8 +1,11 @@
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { ArrowDropUpIcon } from "../../../../assets/icons/ArrowDropUp.js";
+import { ChevronLeftIcon } from "../../../../assets/icons/ChevronLeft.js";
+import { ChevronRightIcon } from "../../../../assets/icons/ChevronRight.js";
 import { PillButton } from "../../../buttons/PillButton/PillButton.js";
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, ToggleButtonGroup } from "react-aria-components";
-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
@@ -40,7 +43,7 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 					...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" })
+					children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6 text-interactive-text-secondary-idle" })
 				})
 			}),
 			/* @__PURE__ */ jsxs(ToggleButtonGroup, {
@@ -50,7 +53,7 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 						color: "secondary",
 						variant: "subtle",
 						iconPosition: "right",
-						icon: toggleState === "month" ? ChevronUp : ChevronDown,
+						icon: toggleState === "month" ? ArrowDropUpIcon : ArrowDropDownIcon,
 						toggle: true,
 						isSelected: toggleState === "month",
 						onChange: (isSelected) => {
@@ -70,7 +73,7 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 						color: "secondary",
 						variant: "subtle",
 						iconPosition: "right",
-						icon: toggleState === "year" ? ChevronUp : ChevronDown,
+						icon: toggleState === "year" ? ArrowDropUpIcon : ArrowDropDownIcon,
 						toggle: true,
 						isSelected: toggleState === "year",
 						onChange: (isSelected_0) => {
@@ -94,7 +97,7 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 						color: "secondary",
 						variant: "subtle",
 						iconPosition: "right",
-						icon: toggleState === "time" ? ChevronUp : ChevronDown,
+						icon: toggleState === "time" ? ArrowDropUpIcon : ArrowDropDownIcon,
 						toggle: true,
 						isSelected: toggleState === "time",
 						onChange: (isSelected_1) => setToggleState(isSelected_1 ? "time" : null),
@@ -108,7 +111,7 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 					...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" })
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6 text-interactive-text-secondary-idle" })
 				})
 			})
 		]

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

@@ -1,10 +1,14 @@
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { ChevronLeftIcon } from "../../../../assets/icons/ChevronLeft.js";
+import { ChevronRightIcon } from "../../../../assets/icons/ChevronRight.js";
+import { ChevronsLeftIcon } from "../../../../assets/icons/ChevronsLeft.js";
+import { ChevronsRightIcon } from "../../../../assets/icons/ChevronsRight.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { PillButton } from "../../../buttons/PillButton/PillButton.js";
 import "../../../../config/i18n.js";
 import { Select } from "../../Selection/Select/Select.js";
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
-import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/CalendarSelectHeader.tsx
@@ -101,13 +105,13 @@ var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, is
 					color: "secondary",
 					isDisabled: isPrevYearDisabled,
 					onClick: handlePrevYear,
-					icon: ChevronsLeft,
+					icon: ChevronsLeftIcon,
 					label: t(($) => $.ui.datePicker.navigation.previousYear)
 				}), /* @__PURE__ */ jsx(InlineIconButton, {
 					color: "secondary",
 					isDisabled: isPrevMonthDisabled,
 					onClick: handlePrevMonth,
-					icon: ChevronLeft,
+					icon: ChevronLeftIcon,
 					label: t(($_0) => $_0.ui.datePicker.navigation.previousMonth)
 				})]
 			}),
@@ -120,7 +124,7 @@ var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, is
 						color: "secondary",
 						variant: "subtle",
 						iconPosition: "right",
-						icon: ChevronDown,
+						icon: ArrowDropDownIcon,
 						children: MONTHS[currentMonth].slice(0, 3)
 					}),
 					ignoreTriggerWidth: true,
@@ -138,7 +142,7 @@ var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, is
 						color: "secondary",
 						variant: "subtle",
 						iconPosition: "right",
-						icon: ChevronDown,
+						icon: ArrowDropDownIcon,
 						children: currentYear.toString()
 					}),
 					items: availableYears.map(({ year: year_0, isDisabled: isDisabled_3 }) => ({
@@ -156,13 +160,13 @@ var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, is
 					color: "secondary",
 					isDisabled: isNextMonthDisabled,
 					onClick: handleNextMonth,
-					icon: ChevronRight,
+					icon: ChevronRightIcon,
 					label: t(($_1) => $_1.ui.datePicker.navigation.nextMonth)
 				}), /* @__PURE__ */ jsx(InlineIconButton, {
 					color: "secondary",
 					isDisabled: isNextYearDisabled,
 					onClick: handleNextYear,
-					icon: ChevronsRight,
+					icon: ChevronsRightIcon,
 					label: t(($_2) => $_2.ui.datePicker.navigation.nextYear)
 				})]
 			})

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

@@ -15,7 +15,6 @@ interface DateFieldProps extends Omit<DateFieldStateOptions, "locale" | "createC
     timeZone?: string;
     segmentGroup?: string;
     shouldAutoFixYear?: boolean;
-    preserveNullValue?: boolean;
 }
-export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity, isTimeOptional, format, timeZone, segmentGroup, shouldAutoFixYear, preserveNullValue, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity, isTimeOptional, format, timeZone, segmentGroup, shouldAutoFixYear, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,18 +1,18 @@
 import { DateSegmentItem } from "./DateSegmentItem.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { Fragment, jsx } from "react/jsx-runtime";
 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 }) => {
+var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity = "day", isTimeOptional = false, format, timeZone, segmentGroup, shouldAutoFixYear = false, ...props }) => {
 	const { locale } = useLocale();
 	const previousValueRef = useRef(props.value);
-	const dateFieldProps = props.value == null && !preserveNullValue ? omitNullValue(props) : props;
+	const dateFieldProps = props.value == null ? omitNullValue(props) : props;
 	const state = useDateFieldState({
 		...dateFieldProps,
 		isDisabled,
@@ -130,7 +130,7 @@ var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManua
 		return formattedDate.toFormat(format);
 	};
 	const formattedDisplayValue = getFormattedDisplayValue();
-	let fieldContent = /* @__PURE__ */ jsx(Fragment$1, { children: segmentsToRender.map((segment_7, i) => /* @__PURE__ */ jsx(DateSegmentItem, {
+	let fieldContent = /* @__PURE__ */ jsx(Fragment, { children: segmentsToRender.map((segment_7, i) => /* @__PURE__ */ jsx(DateSegmentItem, {
 		segment: segment_7,
 		segmentGroup,
 		state,

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

@@ -23,7 +23,6 @@ interface DatePickerInputProps extends InputVariantProps {
     isDateTime?: boolean;
     shouldShrinkInput?: boolean;
     isClearable?: boolean;
-    isClearableIfDisabled?: boolean;
     headerProps?: FormFieldHeaderProps;
     todayIcon?: DatePickerTodayIcon;
     todayIconButtonSize?: DatePickerTodayIconButtonSize;
@@ -40,7 +39,8 @@ interface DatePickerInputProps extends InputVariantProps {
     timeZone?: string;
     isTimeOptional?: boolean;
     format?: string;
+    fireBlurOnChange?: boolean;
     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 declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, headerProps, todayIcon, todayIconButtonSize, todayIconButtonComponent, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, dateGranularity, timeZone: timeZoneProp, isTimeOptional, format, fireBlurOnChange, onClear: onClearProp, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,14 +10,14 @@ import { datePickerInputContentRowDefinition } from "./datePickerInput.cva.js";
 import { renderDatePickerTodayIcon } from "./datePickerTodayIcon.js";
 import { useFirefoxDateSegmentSelectionGuard } from "./useFirefoxDateSegmentSelectionGuard.js";
 import { InputClear } from "../../shared/InputClear.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useImperativeHandle, useRef, useState } from "react";
 import { Button } from "react-aria-components";
-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 }) => {
+var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", todayIconButtonComponent, todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone: timeZoneProp, isTimeOptional = false, format, fireBlurOnChange, onClear: onClearProp, ...props }) => {
 	const uiConfig = UIConfig.useConfig();
 	const timeZone = timeZoneProp ?? uiConfig.dateInput.timeZone;
 	let effectiveTimeZone = getLocalTimeZone();
@@ -51,17 +51,22 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldVa
 		shouldAutoFixYear: autoFixYear
 	} : void 0;
 	const clearInput = useCallback(() => {
+		dateFieldRef.current?.clearField();
+		endDateFieldRef.current?.clearField();
 		if (onClearProp) onClearProp();
 		else {
-			dateFieldRef.current?.clearField();
-			endDateFieldRef.current?.clearField();
 			fieldProps.onChange?.(null);
 			endFieldProps?.onChange?.(null);
+			if (fireBlurOnChange) {
+				fieldProps.onBlur?.(null);
+				endFieldProps?.onBlur?.(null);
+			}
 		}
 		setCanClear(false);
 	}, [
 		endFieldProps,
 		fieldProps,
+		fireBlurOnChange,
 		onClearProp
 	]);
 	useImperativeHandle(ref, () => ({
@@ -71,7 +76,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldVa
 	const onClearChange = useCallback((canClearInput) => {
 		setCanClear(canClearInput);
 	}, []);
-	const showClear = (!isDisabled || isClearableIfDisabled === true) && (canClear || hasValue || normalizedFieldProps.value != null || normalizedEndFieldProps?.value != null);
+	const showClear = canClear || hasValue || normalizedFieldProps.value != null || normalizedEndFieldProps?.value != null;
 	const isTodayIconDisabled = isDisabled || buttonProps.isDisabled;
 	const onToday = () => {
 		if (isTodayIconDisabled) return;
@@ -83,6 +88,10 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldVa
 			fieldProps.onChange?.(today(effectiveTimeZone));
 			if (endFieldProps) endFieldProps.onChange?.(today(effectiveTimeZone));
 		}
+		if (fireBlurOnChange) {
+			fieldProps.onBlur?.(null);
+			endFieldProps?.onBlur?.(null);
+		}
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
 	const todayIconButton = renderDatePickerTodayIcon(todayIcon, {
@@ -140,7 +149,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldVa
 							size: "label-1",
 							className: "text-text-default-3",
 							children: placeholder
-						}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DateField, {
+						}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
 							ref: dateFieldRef,
 							...normalizedFieldProps,
 							isDisabled,
@@ -150,11 +159,10 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldVa
 							disableManualEntry,
 							dateGranularity,
 							isTimeOptional,
-							preserveNullValue: isValueControlled && !endFieldProps,
 							format,
 							timeZone: effectiveTimeZone,
 							segmentGroup: normalizedEndFieldProps ? "start" : void 0
-						}), normalizedEndFieldProps && /* @__PURE__ */ jsxs(Fragment$1, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
+						}), normalizedEndFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
 							className: clsx("pointer-events-none select-none", isDisabled && "text-interactive-text-secondary-disabled"),
 							children: "–"
 						}), /* @__PURE__ */ jsx(DateField, {

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

@@ -1,7 +1,7 @@
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef } from "react";
-import { c } from "react/compiler-runtime";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useDateSegment } from "react-aria";
 //#region src/components/inputs/DateTime/shared/DateSegmentItem.tsx
 var getPlaceholder = (segment) => {
@@ -93,7 +93,7 @@ var DateSegmentItemView = (t0) => {
 	const t12 = isPlaceholder ? "" : text;
 	let t13;
 	if ($[10] !== t11 || $[11] !== t12) {
-		t13 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t11, t12] });
+		t13 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t12] });
 		$[10] = t11;
 		$[11] = t12;
 		$[12] = t13;

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

@@ -2,10 +2,10 @@ import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
 import { popoverDefinition } from "../../../shared/popover.cva.js";
-import clsx$1 from "clsx";
-import { Dialog, Popover } from "react-aria-components";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { Dialog, Popover } from "react-aria-components";
 //#region src/components/inputs/DateTime/shared/DateTimeDialog.tsx
 var DateTimeDialog = (t0) => {
 	const $ = c(26);

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

@@ -1,7 +1,7 @@
 import "../../../../config/i18n.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/DateTime/shared/DateTimeDialogFooter.tsx
 var DateTimeDialogFooter = ({ isValid = true, isDisabled = false, onTodayPress, onApply }) => {

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

@@ -1,9 +1,9 @@
 import { Typography } from "../../../text/Typography/Typography.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef } from "react";
 import { ListBox, ListBoxItem } from "react-aria-components";
-import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/MonthPicker.tsx
 var MonthPicker = (t0) => {

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

@@ -1,9 +1,9 @@
 import { CalendarGrid } from "./CalendarGrid.js";
 import { CalendarSelectHeader } from "./CalendarSelectHeader.js";
-import { clsx } from "clsx";
-import { useRef } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useRef } from "react";
 import { useRangeCalendar } from "@react-aria/calendar";
 //#region src/components/inputs/DateTime/shared/RangeCalendar.tsx
 var RangeCalendar = (t0) => {

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

@@ -1,13 +1,14 @@
+import { ChevronDownIcon } from "../../../../assets/icons/ChevronDown.js";
+import { ChevronUpIcon } from "../../../../assets/icons/ChevronUp.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
 import { getPlaceholder } from "./DateSegmentItem.js";
 import { useLongPressRepeat } from "../../../../hooks/useLongPressRepeat.js";
-import { ChevronDown, ChevronUp } from "lucide-react";
-import { clsx } from "clsx";
-import { useEffect, useRef } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useEffect, useRef } from "react";
 import { useDateSegment, useLocale, useTimeField } from "react-aria";
 import { Time } from "@internationalized/date";
 import { useTimeFieldState } from "@react-stately/datepicker";
@@ -288,7 +289,7 @@ var TimeSegmentButton = (t0) => {
 		} else t6 = $[10];
 		return t6;
 	}
-	const Icon = type === "increment" ? ChevronUp : ChevronDown;
+	const Icon = type === "increment" ? ChevronUpIcon : ChevronDownIcon;
 	let t6;
 	if ($[11] !== Icon || $[12] !== onPressEnd || $[13] !== onPressStart) {
 		t6 = /* @__PURE__ */ jsx("div", {

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

@@ -14,12 +14,12 @@ interface DatePickerInputProps extends InputVariantProps {
     disableDropdown?: boolean;
     headerProps?: FormFieldHeaderProps;
     isClearable?: boolean;
-    isClearableIfDisabled?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
     className?: string;
     onPress: () => void;
     onClear?: () => void;
+    fireBlurOnChange?: boolean;
 }
-export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, isClearableIfDisabled, headerProps, disableManualEntry, placeholder, className, onPress, onClear, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, onClear, fireBlurOnChange, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,17 +7,17 @@ import { inputBaseDefinition, inputSizeDefinition } from "../../shared/input.cva
 import { useFirefoxDateSegmentSelectionGuard } from "./useFirefoxDateSegmentSelectionGuard.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { TimeField } from "./TimeField.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef, useState } from "react";
 import { Button } from "react-aria-components";
-import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 //#region src/components/inputs/DateTime/shared/TimePickerInput.tsx
 var TimePickerInput = (t0) => {
 	const $ = c(69);
-	const { ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, isClearableIfDisabled, headerProps, disableManualEntry, placeholder, className, onPress, onClear, ...props } = t0;
+	const { ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, onClear, fireBlurOnChange, ...props } = t0;
 	const uiConfig = UIConfig.useConfig();
 	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
@@ -147,18 +147,19 @@ var TimePickerInput = (t0) => {
 		$[32] = t22;
 	} else t22 = $[32];
 	let t23;
-	if ($[33] !== canClear || $[34] !== isClearable || $[35] !== isClearableIfDisabled || $[36] !== isDisabled || $[37] !== onClear || $[38] !== state) {
+	if ($[33] !== canClear || $[34] !== fieldProps || $[35] !== fireBlurOnChange || $[36] !== isClearable || $[37] !== onClear || $[38] !== state) {
 		t23 = isClearable && /* @__PURE__ */ jsx(InputClear, {
 			onClear: () => {
-				if (onClear) onClear();
-				else state.setValue(null);
+				state.setValue(null);
+				onClear?.();
+				if (fireBlurOnChange) fieldProps.onBlur?.(null);
 			},
-			show: canClear && (!isDisabled || isClearableIfDisabled === true)
+			show: canClear
 		});
 		$[33] = canClear;
-		$[34] = isClearable;
-		$[35] = isClearableIfDisabled;
-		$[36] = isDisabled;
+		$[34] = fieldProps;
+		$[35] = fireBlurOnChange;
+		$[36] = isClearable;
 		$[37] = onClear;
 		$[38] = state;
 		$[39] = t23;

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

@@ -1,10 +1,10 @@
 import { Typography } from "../../../text/Typography/Typography.js";
 import { useScrollableListBox } from "../../../../hooks/useScrollableListBox.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef } from "react";
 import { ListBox, ListBoxItem } from "react-aria-components";
-import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { today } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/YearPicker.tsx

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

@@ -1,53 +1,8 @@
 import { IconButton } from "../../../buttons/IconButton/IconButton.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { c } from "react/compiler-runtime";
+import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/DateTime/shared/datePickerTodayIcon.tsx
-var TodayIcon = (t0) => {
-	const $ = c(9);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = ["fill-current", className].filter(Boolean);
-		$[3] = className;
-		$[4] = t1;
-	} else t1 = $[4];
-	const t2 = t1.join(" ");
-	let t3;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx("path", {
-			fill: "currentColor",
-			d: "M9.184 9.672v-.945h5.628v.945h-2.27V16H11.45V9.672z",
-			transform: "translate(12 12) scale(1.65) translate(-12 -12)"
-		});
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== props || $[7] !== t2) {
-		t4 = /* @__PURE__ */ jsx("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			fill: "none",
-			viewBox: "0 0 24 24",
-			...props,
-			className: t2,
-			children: t3
-		});
-		$[6] = props;
-		$[7] = t2;
-		$[8] = t4;
-	} else t4 = $[8];
-	return t4;
-};
 var getDatePickerTodayIcon = (todayIcon) => {
 	if (!todayIcon) return null;
 	return todayIcon === true ? TodayIcon : todayIcon;

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

@@ -1,5 +1,5 @@
-import { useLayoutEffect } from "react";
 import { c } from "react/compiler-runtime";
+import { useLayoutEffect } from "react";
 import { isFirefox } from "@react-aria/utils";
 //#region src/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.ts
 var isEditableElement = (element) => element instanceof HTMLElement && (element.matches("input, textarea") || element.isContentEditable);

package/dist/components/inputs/File/FileUpload.d.ts

@@ -1,4 +1,4 @@
-import { FieldValues } from '../shared/form.binding';
+import { FieldValues } from 'react-hook-form';
 import { FileUploadProps } from './fileUpload.types';
 export type { DefaultFile, FileUploadBaseProps, FileUploadButtonProps, FileUploadError, FileUploadProps, FileUploadRequest, FileUploadResponse, FileUploadState, } from './fileUpload.types';
 export declare const FileUpload: <TFieldValues extends FieldValues = FieldValues>(props: FileUploadProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/File/FileUpload.js

@@ -1,20 +1,20 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import "../../../config/i18n.js";
-import { FieldController } from "../shared/form.binding.js";
 import { FormField } from "../FormField/FormField.js";
 import { FileUtils } from "../../../utils/file.utils.js";
 import { FileCardList } from "./shared/FileCardList.js";
 import { FileUploadContentEmpty } from "./shared/FileUploadContentEmpty.js";
 import { FileUploadContent } from "./shared/FileUploadContent.js";
 import { fileUploadDropZoneDefinition } from "./shared/fileUpload.cva.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useState } from "react";
 import { DropZone } from "react-aria-components";
-import { c } from "react/compiler-runtime";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeRefs, useLabels } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
+import { Controller } from "react-hook-form";
 //#region src/components/inputs/File/FileUpload.tsx
 var FileUploadBase = (props) => {
 	const { t } = useTranslation("ui");
@@ -142,7 +142,7 @@ var FileUploadBase = (props) => {
 					isContainer: !!children,
 					className: "group/file-upload-drop-zone"
 				}),
-				children: children ? /* @__PURE__ */ jsxs(Fragment$1, { children: [children({
+				children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [children({
 					files: uploadState,
 					onRemove: handleRemove,
 					onCancel: handleCancelUpload
@@ -192,32 +192,32 @@ var FileUploadBase = (props) => {
 };
 var FileUpload = (props) => {
 	const $ = c(15);
-	if ("field" in props && props.field) {
-		let field;
+	if ("formControl" in props && props.formControl) {
+		let formControl;
 		let innerProps;
 		let ref;
 		if ($[0] !== props) {
-			({field, ref, ...innerProps} = props);
+			({formControl, ref, ...innerProps} = props);
 			$[0] = props;
-			$[1] = field;
+			$[1] = formControl;
 			$[2] = innerProps;
 			$[3] = ref;
 		} else {
-			field = $[1];
+			formControl = $[1];
 			innerProps = $[2];
 			ref = $[3];
 		}
 		let t0;
 		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
 			t0 = (t1) => {
-				const { field: field_0, fieldState: t2 } = t1;
+				const { field, fieldState: t2 } = t1;
 				const { error } = t2;
 				return /* @__PURE__ */ jsx(FileUploadBase, {
 					...innerProps,
-					ref: mergeRefs(ref, field_0.ref),
-					value: field_0.value,
-					onChange: field_0.onChange,
-					isDisabled: field_0.disabled || props.isDisabled,
+					ref: mergeRefs(ref, field.ref),
+					value: field.value,
+					onChange: field.onChange,
+					isDisabled: field.disabled || props.isDisabled,
 					error: props.error ?? error?.message
 				});
 			};
@@ -228,14 +228,14 @@ var FileUpload = (props) => {
 			$[8] = t0;
 		} else t0 = $[8];
 		let t1;
-		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(FieldController, {
-				control: field.form,
-				name: field.name,
+		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Controller, {
+				control: formControl.control,
+				name: formControl.name,
 				render: t0
 			});
-			$[9] = field.form;
-			$[10] = field.name;
+			$[9] = formControl.control;
+			$[10] = formControl.name;
 			$[11] = t0;
 			$[12] = t1;
 		} else t1 = $[12];

package/dist/components/inputs/File/InputUpload.d.ts

@@ -1,4 +1,4 @@
-import { FieldValues } from '../shared/form.binding';
+import { FieldValues } from 'react-hook-form';
 import { InputUploadProps } from './inputUpload.types';
 export type { InputUploadBaseProps, InputUploadProps } from './inputUpload.types';
 export declare const InputUpload: <TFieldValues extends FieldValues = FieldValues>(props: InputUploadProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;