@povio/ui 2.2.9-rc.2 → 2.2.9-rc.20

package/dist/components/buttons/InlineIconButton/InlineIconButton.d.ts

@@ -9,4 +9,4 @@ export interface InlineIconButtonProps extends Omit<AriaButtonProps, "children">
     ref?: RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
     disableTooltip?: boolean;
 }
-export declare const InlineIconButton: ({ label, ...props }: InlineIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineIconButton: ({ label, size, ...props }: InlineIconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/InlineIconButton/InlineIconButton.js

@@ -1,12 +1,12 @@
 import { Button } from "../Button/Button.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/buttons/InlineIconButton/InlineIconButton.tsx
-var InlineIconButton = ({ label, ...props }) => {
+var InlineIconButton = ({ label, size = "none", ...props }) => {
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
 		iconOnly: true,
 		variant: "text",
-		size: "none",
+		size,
 		width: "hug",
 		children: label
 	});

package/dist/components/inputs/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
-import { checkboxIndicatorClass, checkboxTypography } from "./checkbox.cva.js";
+import { checkboxContentClassName, checkboxIndicatorClass, checkboxTypography } from "./checkbox.cva.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
 import { CheckboxCheckmark } from "./CheckboxCheckmark.js";
@@ -13,6 +13,7 @@ import { Controller } from "react-hook-form";
 var CheckboxBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const checkboxTypographyMap = UIStyle.useMapper("checkbox.typography", checkboxTypography);
+	const checkboxContentClassNameMap = UIStyle.useMapper("checkbox.contentClassName", checkboxContentClassName);
 	const { className, children, isDisabled, error, variant = ui.checkbox.variant, hideLabel = ui.input.hideLabel, ...rest } = props;
 	const formFieldErrorProps = {
 		error,
@@ -34,6 +35,10 @@ var CheckboxBase = (props) => {
 				variant,
 				...rest
 			}),
+			contentClassName: checkboxContentClassNameMap({
+				variant,
+				...rest
+			}),
 			children
 		})]
 	}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });

package/dist/components/inputs/Checkbox/checkbox.cva.d.ts

@@ -9,6 +9,9 @@ export declare const checkboxIndicatorClass = "group flex items-center gap-2";
 export declare const checkboxTypography: (props: {
     variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;
+export declare const checkboxContentClassName: (props: {
+    variant?: "default" | null | undefined;
+}) => string | undefined;
 export declare const checkboxIcon: (props?: ({
     iconVariant?: "selected" | "indeterminate" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/inputs/Checkbox/checkbox.cva.js

@@ -39,6 +39,7 @@ var checkboxTypography = compoundMapper({ default: {
 	sizeMobile: "label-1",
 	variant: "default"
 } });
+var checkboxContentClassName = compoundMapper({ default: "text-text-default-2" });
 var checkboxIcon = cva(["absolute hidden size-3"], {
 	variants: { iconVariant: {
 		selected: ["group-selected:block"],
@@ -47,4 +48,4 @@ var checkboxIcon = cva(["absolute hidden size-3"], {
 	defaultVariants: { iconVariant: "selected" }
 });
 //#endregion
-export { checkbox, checkboxIcon, checkboxIndicatorClass, checkboxTypography };
+export { checkbox, checkboxContentClassName, checkboxIcon, checkboxIndicatorClass, checkboxTypography };

package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts

@@ -1,21 +1,25 @@
 import { CalendarDate, DateValue } from '@internationalized/date';
-import { Ref } from 'react';
+import { FocusEvent, Ref } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { DatePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
+interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
     ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
     disableDropdown?: boolean;
     isClearable?: boolean;
     className?: string;
-    todayIcon?: boolean;
+    todayIcon?: DatePickerTodayIcon;
+    todayIconButtonSize?: DatePickerTodayIconButtonSize;
     isDirty?: boolean;
     disableManualEntry?: boolean;
+    autoFixYear?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: string | null;
@@ -23,7 +27,8 @@ export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "on
     fullIso?: boolean;
     minValue?: DateValue | string;
     maxValue?: DateValue | string;
+    renderStaticInput?: boolean;
 }
 export type ControlledDatePickerProps<TFieldValues extends FieldValues> = ControlProps<DatePickerProps, TFieldValues>;
-export declare const DatePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, ...props }: ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -1,24 +1,30 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Calendar } from "../shared/Calendar.js";
+import { datePickerInputContentRow } 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 { FormField } from "../../FormField/FormField.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useImperativeHandle, useMemo, useRef } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
-import { createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
+import { Controller, useWatch } from "react-hook-form";
+import { CalendarDate, createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
+var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -39,6 +45,10 @@ var DatePickerBase = (props) => {
 	useImperativeHandle(ref, () => ({ clear: () => {
 		datePickerInputRef.current?.clear();
 	} }));
+	const handleBlur = (val) => {
+		onBlur?.({ target: { value: val } });
+	};
+	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -57,6 +67,7 @@ var DatePickerBase = (props) => {
 			onChange?.(val);
 			dialogState.setValue(val);
 			calendarState.setFocusedDate(val || today(getLocalTimeZone()));
+			debouncedBlur(val);
 		},
 		shouldCloseOnSelect: false
 	});
@@ -88,8 +99,10 @@ var DatePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		state.setValue(dialogState.value);
+		const newValue = dialogState.value;
+		state.setValue(newValue);
 		state.toggle();
+		handleBlur(newValue);
 	};
 	const onTodayPress = () => {
 		dialogState.setValue(today(getLocalTimeZone()));
@@ -114,11 +127,15 @@ var DatePickerBase = (props) => {
 				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
-				fieldProps,
+				fieldProps: {
+					...fieldProps,
+					placeholderValue: PLACEHOLDER_VALUE
+				},
 				buttonProps,
 				isDirty,
 				isDisabled,
 				disableManualEntry,
+				autoFixYear,
 				isInvalid: !!error,
 				disableDropdown,
 				variant,
@@ -126,10 +143,11 @@ var DatePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
+				todayIconButtonSize,
 				onOpenDropdown: () => state.toggle(),
 				placeholder,
 				className: inputClassName
-			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
+			}), (!disableDropdown || disableManualEntry) && state.isOpen && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
 					isValid: !dialogState.isInvalid && !!dialogState.value,
@@ -150,7 +168,20 @@ var DatePickerBase = (props) => {
 		})
 	});
 };
-var DatePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
+var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
+	const { locale } = useLocale();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const inputRef = useRef(null);
+	const watchedValue = "formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	const rawValue = watchedValue ?? props.value ?? null;
 	const formatCalendarDate = (calendarDate) => {
 		if (calendarDate === null) return null;
 		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(calendarDate);
@@ -167,6 +198,61 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
 		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
 	};
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => {
+			((inputRef.current?.getContainer?.() ?? inputRef.current)?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
+		});
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
+		const variant = props.variant ?? ui.input.variant;
+		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
+		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
+		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticDateValue = rawValue ? parseCalendarDate(rawValue) : null;
+		const displayValue = staticDateValue ? DateTimeUtils.formatCalendarDateLocalized(staticDateValue, locale) : "";
+		const staticPlaceholder = rawValue ? "" : props.placeholder ?? DateTimeUtils.getDatePlaceholder(locale);
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			as,
+			size,
+			variant,
+			applyMinInputWidth: true,
+			hideLabel,
+			isHeaderHidden,
+			isDisabled,
+			placeholder: staticPlaceholder,
+			displayValue,
+			isEmpty: !displayValue,
+			dataAttributes: {
+				dataIsEmpty: staticDateValue === null,
+				dataIsFilled: staticDateValue !== null,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: staticDateValue !== null
+			},
+			contentRowClassName: datePickerInputContentRowCva({ size }),
+			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			leadingContentClassName: "ml-0!",
+			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -175,7 +261,7 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DatePickerBase, {
 				...innerProps,
 				...dateLimits,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: parseCalendarDate(field.value),
 				onChange: (value) => field.onChange(formatCalendarDate(value)),
 				onBlur: field.onBlur,
@@ -188,6 +274,7 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 	return /* @__PURE__ */ jsx(DatePickerBase, {
 		...props,
 		...dateLimits,
+		ref: mergeRefs(props.ref, inputRef),
 		value: parseCalendarDate(props.value),
 		onChange: (value) => props.onChange?.(formatCalendarDate(value))
 	});

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts

@@ -1,23 +1,27 @@
 import { CalendarDate } from '@internationalized/date';
-import { Ref } from 'react';
+import { FocusEvent, Ref } from 'react';
 import { DateValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { DateRangePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DateRangePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
+interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DateRangePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
     ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
     disableDropdown?: boolean;
     isClearable?: boolean;
     hideSidebar?: boolean;
     className?: string;
-    todayIcon?: boolean;
+    todayIcon?: DatePickerTodayIcon;
+    todayIconButtonSize?: DatePickerTodayIconButtonSize;
     isDirty?: boolean;
     disableManualEntry?: boolean;
+    autoFixYear?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: {
@@ -31,7 +35,8 @@ export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "va
     fullIso?: boolean;
     minValue?: DateValue | string;
     maxValue?: DateValue | string;
+    renderStaticInput?: boolean;
 }
 export type ControlledDateRangePickerProps<TFieldValues extends FieldValues> = ControlProps<DateRangePickerProps, TFieldValues>;
-export declare const DateRangePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -1,21 +1,26 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import "../../../../config/i18n.js";
+import { datePickerInputContentRow } 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 { FormField } from "../../FormField/FormField.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { RangeCalendar } from "../shared/RangeCalendar.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Button } from "react-aria-components";
 import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 import { createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
@@ -23,7 +28,7 @@ import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {
@@ -43,6 +48,7 @@ var DateRangePickerBase = (props) => {
 			if (isValidRange(newValue)) return;
 			onChange?.(newValue);
 			handleCalendarStatesChange(newValue);
+			debouncedBlur(newValue);
 		},
 		shouldCloseOnSelect: false
 	});
@@ -60,6 +66,10 @@ var DateRangePickerBase = (props) => {
 	useImperativeHandle(ref, () => ({ clear: () => {
 		datePickerInputRef.current?.clear();
 	} }));
+	const handleBlur = (newValue) => {
+		onBlur?.({ target: { value: newValue } });
+	};
+	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const formFieldProps = {
 		error: error || validationRangeError,
 		label,
@@ -321,7 +331,10 @@ var DateRangePickerBase = (props) => {
 			start: rangeSelection.start,
 			end: rangeSelection.end
 		} : dialogState.value;
-		if (valueToApply) state.setValue(valueToApply);
+		if (valueToApply) {
+			state.setValue(valueToApply);
+			handleBlur(valueToApply);
+		}
 		state.toggle();
 	};
 	const onTodayPress = () => {
@@ -475,8 +488,10 @@ var DateRangePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
+				todayIconButtonSize,
 				isDirty,
 				disableManualEntry,
+				autoFixYear,
 				placeholder,
 				className: inputClassName,
 				onOpenDropdown: () => state.toggle()
@@ -529,7 +544,20 @@ var DateRangePickerBase = (props) => {
 		})
 	});
 };
-var DateRangePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
+var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
+	const { locale } = useLocale$1();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const inputRef = useRef(null);
+	const watchedValue = "formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	const rawValue = watchedValue ?? props.value ?? null;
 	const formatDateRange = (range) => {
 		if (!range?.start || !range?.end) return null;
 		if (fullIso) return {
@@ -568,6 +596,84 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
 		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
 	};
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => {
+			((inputRef.current?.getContainer?.() ?? inputRef.current)?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
+		});
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
+		const variant = props.variant ?? ui.input.variant;
+		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
+		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
+		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const defaultDatePlaceholder = DateTimeUtils.getDatePlaceholder(locale);
+		const staticPlaceholder = !!(rawValue?.start || rawValue?.end) ? "" : props.placeholder ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", { children: defaultDatePlaceholder }),
+			/* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none select-none",
+				children: "–"
+			}),
+			/* @__PURE__ */ jsx("span", { children: defaultDatePlaceholder })
+		] });
+		const formatStaticDate = (value) => {
+			if (!value) return "";
+			const parsedDate = parseCalendarDate(value);
+			if (!parsedDate) return "";
+			return DateTimeUtils.formatCalendarDateLocalized(parsedDate, locale);
+		};
+		const start = formatStaticDate(rawValue?.start ?? null);
+		const end = formatStaticDate(rawValue?.end ?? null);
+		const hasRangeValue = !!(start && end);
+		const displayValue = hasRangeValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", { children: start }),
+			/* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none select-none",
+				children: "–"
+			}),
+			/* @__PURE__ */ jsx("span", { children: end })
+		] }) : void 0;
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			as,
+			size,
+			variant,
+			applyMinInputWidth: true,
+			hideLabel,
+			isHeaderHidden,
+			isDisabled,
+			placeholder: staticPlaceholder,
+			displayValue,
+			isEmpty: !hasRangeValue,
+			dataAttributes: {
+				dataIsEmpty: !hasRangeValue,
+				dataIsFilled: hasRangeValue,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: hasRangeValue
+			},
+			contentRowClassName: datePickerInputContentRowCva({ size }),
+			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			leadingContentClassName: "ml-0!",
+			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -576,7 +682,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DateRangePickerBase, {
 				...innerProps,
 				...dateLimits,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: parseDateRange(field.value),
 				onChange: (value) => field.onChange(formatDateRange(value)),
 				onBlur: field.onBlur,
@@ -589,6 +695,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 	return /* @__PURE__ */ jsx(DateRangePickerBase, {
 		...props,
 		...dateLimits,
+		ref: mergeRefs(props.ref, inputRef),
 		value: parseDateRange(props.value),
 		onChange: (value) => props.onChange?.(formatDateRange(value))
 	});

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts

@@ -1,27 +1,33 @@
-import { Ref } from 'react';
+import { FocusEvent, Ref } from 'react';
 import { DateValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { DatePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<DateValue>, "granularity" | "shouldCloseOnSelect" | "label"> {
+interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<DateValue>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
     ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
     disableDropdown?: boolean;
     isTimeOptional?: boolean;
     isClearable?: boolean;
-    todayIcon?: boolean;
+    todayIcon?: DatePickerTodayIcon;
+    todayIconButtonSize?: DatePickerTodayIconButtonSize;
     isDirty?: boolean;
     disableManualEntry?: boolean;
+    autoFixYear?: boolean;
+    setDateValueOnDateSelection?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;
     onChange?: (value: string | null) => void;
     fullIso?: boolean;
+    renderStaticInput?: boolean;
 }
 export type ControlledDateTimePickerProps<TFieldValues extends FieldValues> = ControlProps<DateTimePickerProps, TFieldValues>;
-export declare const DateTimePicker: <TFieldValues extends FieldValues>({ fullIso, ...props }: ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimePicker: <TFieldValues extends FieldValues>({ fullIso, renderStaticInput, ...props }: ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};