@povio/ui 2.2.9-rc.3 → 2.2.9-rc.30

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

@@ -1,23 +1,29 @@
+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 { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { getStaticCalendarDateTimeSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { clsx } from "clsx";
+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 { Controller, useWatch } from "react-hook-form";
 import { Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, 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, isTimeOptional, 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, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, setDateValueOnDateSelection = ui.dateInput.setDateValueOnDateSelection, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -153,8 +159,11 @@ var DateTimePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
+				todayIconButtonSize,
+				todayIconPlacement,
 				isRequired,
 				disableManualEntry,
+				autoFixYear,
 				placeholder,
 				onOpenDropdown: () => state.toggle(),
 				className: inputClassName
@@ -175,13 +184,28 @@ var DateTimePickerBase = (props) => {
 					calendarProps,
 					includesTime: true,
 					datePickerState: dialogState,
-					onApply
+					onApply,
+					setDateValueOnDateSelection
 				})
 			})]
 		})
 	});
 };
-var DateTimePicker = ({ fullIso = true, ...props }) => {
+var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
+	const { locale } = useLocale();
+	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
+	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 formatDateValue = (dateValue) => {
 		if (dateValue === null) return null;
 		if (fullIso) return DateTimeUtils.fromCalendarDateTimeToUTCISO(dateValue);
@@ -191,6 +215,65 @@ var DateTimePicker = ({ fullIso = true, ...props }) => {
 		if (isoString == null) return isoString;
 		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString);
 	};
+	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 dateTimeValue = rawValue ? parseDateValue(rawValue) : null;
+		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";
+		const isDisabled = isFormControlDisabled || !!props.isDisabled;
+		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 staticSegments = getStaticCalendarDateTimeSegments({
+			value: dateTimeValue,
+			locale,
+			placeholder: props.placeholder,
+			shouldForceLeadingZeros,
+			isDisabled,
+			hidePlaceholder: as === "floating" && !dateTimeValue
+		});
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			isHeaderHidden,
+			hideLabel,
+			isDisabled,
+			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			labelPlacement: "content-row",
+			dataAttributes: {
+				dataIsEmpty: dateTimeValue === null,
+				dataIsFilled: dateTimeValue !== null,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: dateTimeValue !== null
+			},
+			renderStatic: true,
+			onStaticInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			size,
+			variant,
+			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,
+			children: staticSegments
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -198,7 +281,7 @@ var DateTimePicker = ({ fullIso = true, ...props }) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DateTimePickerBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: parseDateValue(field.value),
 				onChange: (value) => field.onChange(formatDateValue(value)),
 				onBlur: field.onBlur,
@@ -210,6 +293,7 @@ var DateTimePicker = ({ fullIso = true, ...props }) => {
 	}
 	return /* @__PURE__ */ jsx(DateTimePickerBase, {
 		...props,
+		ref: mergeRefs(props.ref, inputRef),
 		value: parseDateValue(props.value),
 		onChange: (value) => props.onChange?.(formatDateValue(value))
 	});

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

@@ -19,7 +19,8 @@ export interface TimePickerProps extends Omit<TimePickerBaseProps, "value" | "on
     value?: string | null;
     onChange?: (value: string | null) => void;
     fullIso?: boolean;
+    renderStaticInput?: boolean;
 }
 export type ControlledTimePickerProps<TFieldValues extends FieldValues> = ControlProps<TimePickerProps, TFieldValues>;
-export declare const TimePicker: <TFieldValues extends FieldValues>(props: ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePicker: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,17 +2,19 @@ import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { TimePickerForm } from "../shared/TimePickerForm.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { getStaticTimeSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { TimePickerInput } from "../shared/TimePickerInput.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
 import { useLocale, useTimeField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 import { getLocalTimeZone, now, toTime } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useTimeFieldState } from "react-stately";
@@ -136,7 +138,19 @@ var TimePickerBase = (props) => {
 		})
 	});
 };
-var TimePicker = (props) => {
+var TimePicker = ({ renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	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 formatTimeValue = (timeValue) => {
 		if (timeValue === null) return null;
 		const parsedDate = props.date ? DateTime.fromISO(props.date).toJSDate() : void 0;
@@ -147,6 +161,60 @@ var TimePicker = (props) => {
 		if (isoString == null) return isoString;
 		return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString));
 	};
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => {
+			(inputRef.current?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
+		});
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const timeValue = rawValue ? parseTimeValue(rawValue) : null;
+		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";
+		const isDisabled = isFormControlDisabled || !!props.isDisabled;
+		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticSegments = getStaticTimeSegments({
+			value: timeValue,
+			locale,
+			placeholder: props.placeholder,
+			isDisabled,
+			hidePlaceholder: as === "floating" && !timeValue
+		});
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			isHeaderHidden,
+			hideLabel,
+			isDisabled,
+			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			labelPlacement: "content-row",
+			dataAttributes: {
+				dataIsEmpty: timeValue === null,
+				dataIsFilled: timeValue !== null,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: timeValue !== null
+			},
+			renderStatic: true,
+			onStaticInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			size,
+			variant,
+			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0,
+			children: staticSegments
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -154,7 +222,7 @@ var TimePicker = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TimePickerBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: parseTimeValue(field.value),
 				onChange: (value) => field.onChange(formatTimeValue(value)),
 				onBlur: field.onBlur,
@@ -166,6 +234,7 @@ var TimePicker = (props) => {
 	}
 	return /* @__PURE__ */ jsx(TimePickerBase, {
 		...props,
+		ref: mergeRefs(props.ref, inputRef),
 		value: parseTimeValue(props.value),
 		onChange: (value) => props.onChange?.(formatTimeValue(value))
 	});

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

@@ -1,4 +1,5 @@
 import { CalendarState, CalendarStateOptions } from '@react-stately/calendar';
+import { DateValue } from 'react-aria';
 import { DatePickerState } from 'react-stately';
 type DateTimeCalendarProps = {
     includesTime?: false;
@@ -13,8 +14,10 @@ type CalendarProps = DateTimeCalendarProps & {
     className?: string;
     state: CalendarState;
     calendarProps: Omit<CalendarStateOptions, "locale" | "createCalendar">;
-    onApply: () => void;
+    onApply: (selectedDate?: DateValue) => void;
+    onDateSelectionChange?: (selectedDate: DateValue) => void;
+    setDateValueOnDateSelection?: boolean;
 };
 export type ToggleState = "month" | "year" | "time";
-export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, onDateSelectionChange, setDateValueOnDateSelection, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,20 +5,37 @@ import { TimePickerForm } from "./TimePickerForm.js";
 import { YearPicker } from "./YearPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { useCalendar } from "@react-aria/calendar";
 //#region src/components/inputs/DateTime/shared/Calendar.tsx
-var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, ...props }) => {
+var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, onDateSelectionChange, setDateValueOnDateSelection = false, ...props }) => {
 	const [toggleState, setToggleState] = useState(null);
 	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
-	const handleDateChange = () => {
-		if (includesTime && !datePickerState.value) setToggleState("time");
-		else onApply();
+	const onDateSelection = useCallback((date) => {
+		if (!includesTime || !setDateValueOnDateSelection) return;
+		datePickerState.setDateValue(date);
+	}, [
+		includesTime,
+		datePickerState,
+		setDateValueOnDateSelection
+	]);
+	const handleDateChange = (selectedDate) => {
+		const resolvedDate = selectedDate ?? props.state.focusedDate;
+		if (includesTime && resolvedDate && setDateValueOnDateSelection) {
+			datePickerState.setDateValue(resolvedDate);
+			onDateSelectionChange?.(resolvedDate);
+		}
+		if (includesTime && toggleState !== "time") {
+			setToggleState("time");
+			return;
+		}
+		if (datePickerState?.value && !setDateValueOnDateSelection) onApply(resolvedDate);
 	};
 	const getContent = () => {
 		if (!toggleState) return /* @__PURE__ */ jsx(CalendarGrid, {
 			state: props.state,
-			onApply: handleDateChange
+			onApply: handleDateChange,
+			onDateSelection
 		});
 		if (toggleState === "month") return /* @__PURE__ */ jsx(MonthPicker, {
 			state: props.state,

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

@@ -4,7 +4,7 @@ import { KeyboardEvent } from 'react';
 import { DateValue } from 'react-aria';
 interface CalendarCellProps extends AriaCalendarCellProps {
     state: CalendarState | RangeCalendarState;
-    onApply?: () => void;
+    onApply?: (selectedDate?: DateValue) => void;
     shouldCloseOnSelect?: boolean;
     onDateSelection?: (date: DateValue) => void;
     onDateHover?: (date: DateValue | null) => void;

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

@@ -17,12 +17,12 @@ var CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelectio
 	const onClick = useCallback((event) => {
 		buttonProps.onClick?.(event);
 		if (onDateSelection) onDateSelection(props.date);
-		if (isSelected && shouldCloseOnSelect) onApply?.();
+		if (shouldCloseOnSelect && !isDisabled) onApply?.(props.date);
 	}, [
 		buttonProps,
 		onDateSelection,
 		props.date,
-		isSelected,
+		isDisabled,
 		shouldCloseOnSelect,
 		onApply
 	]);
@@ -87,7 +87,7 @@ var CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelectio
 			state.setFocusedDate(props.date);
 		}
 		eventHandler?.(event);
-		if (isSelected && shouldCloseOnSelect) onApply?.();
+		if (isSelected && shouldCloseOnSelect) onApply?.(props.date);
 	};
 	const onMouseEnter = useCallback(() => {
 		if (onDateHover && selectionState.isSelectingMode) onDateHover(props.date);

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

@@ -4,7 +4,7 @@ import { KeyboardEvent } from 'react';
 import { DateValue } from 'react-aria';
 interface CalendarGridProps extends AriaCalendarGridProps {
     state: CalendarState | RangeCalendarState;
-    onApply?: () => void;
+    onApply?: (selectedDate?: DateValue) => void;
     offset?: {
         months?: number;
     };

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

@@ -1,4 +1,5 @@
 import { DateSegmentItem } from "./DateSegmentItem.js";
+import { getTimeSegmentValue } from "./dateSegment.utils.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useImperativeHandle, useRef } from "react";
@@ -31,16 +32,8 @@ var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManua
 		const isDayFilled = daySegment && !daySegment.isPlaceholder;
 		const isYearEmpty = yearSegment && !(parseInt(yearSegment.text) && yearSegment.text?.length === 4);
 		const isHourEmpty = hourSegment && !parseInt(hourSegment.text);
-		if (minuteSegment && !parseInt(minuteSegment.text)) {
-			let minute = minuteSegment?.value || 0;
-			if (minuteSegment?.text?.length && minuteSegment?.text?.length > 0) minute = parseInt(minuteSegment?.text ?? "00");
-			state.setSegment("minute", minute);
-		}
-		if (isHourEmpty) {
-			let hour = hourSegment?.value || 0;
-			if (hourSegment?.text?.length && hourSegment?.text?.length > 0) hour = parseInt(hourSegment?.text ?? "00");
-			state.setSegment("hour", hour);
-		}
+		if (minuteSegment && !parseInt(minuteSegment.text)) state.setSegment("minute", getTimeSegmentValue(minuteSegment));
+		if (isHourEmpty) state.setSegment("hour", getTimeSegmentValue(hourSegment));
 		if (isMonthFilled && isDayFilled && isYearEmpty) {
 			let year = (/* @__PURE__ */ new Date()).getFullYear();
 			if (yearSegment?.text?.length && yearSegment?.text?.length === 2) year = parseInt(`20${yearSegment?.text}`);

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

@@ -1,5 +1,6 @@
 import { Ref } from 'react';
 import { DatePickerAria } from 'react-aria';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from './datePicker.types';
 import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { InputVariantProps } from '../../shared/input.cva';
 export interface DatePickerInputHandle {
@@ -18,13 +19,16 @@ interface DatePickerInputProps extends InputVariantProps {
     isDateTime?: boolean;
     isClearable?: boolean;
     headerProps?: FormFieldHeaderProps;
-    todayIcon?: boolean;
+    todayIcon?: DatePickerTodayIcon;
+    todayIconButtonSize?: DatePickerTodayIconButtonSize;
+    todayIconPlacement?: DatePickerTodayIconPlacement;
     isDirty?: boolean;
     isRequired?: boolean;
     disableManualEntry?: boolean;
+    autoFixYear?: boolean;
     placeholder?: string;
     className?: string;
     onOpenDropdown?: () => void;
 }
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,11 +1,10 @@
-import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
-import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
-import { IconButton } from "../../../buttons/IconButton/IconButton.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { DateField } from "./DateField.js";
+import { datePickerInputContentRow } from "./datePickerInput.cva.js";
+import { getDatePickerTodayIcon } from "./datePickerTodayIcon.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
@@ -16,15 +15,17 @@ import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
-var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }) => {
+var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, ...props }) => {
+	const uiConfig = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const [canClear, setCanClear] = useState(false);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
 	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: (isFocusWithin) => {
 		setIsFocused(isFocusWithin);
-		if (!isFocusWithin) {
+		if (!isFocusWithin && autoFixYear) {
 			dateFieldRef.current?.autoFixYear();
 			endDateFieldRef.current?.autoFixYear();
 		}
@@ -70,17 +71,28 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		endFieldProps?.onBlur?.(null);
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
+	const todayIconComponent = getDatePickerTodayIcon(todayIcon);
+	const todayIconButton = todayIconComponent ? /* @__PURE__ */ jsx(InlineIconButton, {
+		label: "",
+		icon: todayIconComponent,
+		size: todayIconButtonSize,
+		onPress: onToday,
+		className: "relative z-1 !border-none"
+	}) : null;
+	const shouldRenderTodayIconWithFieldLabel = todayIconPlacement === "fieldLabel";
+	const pickerIcon = isDateTime ? uiConfig.dateInput.dateTimeIcon : uiConfig.dateInput.calendarIcon;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
-		className: clsx(inputBaseCva({
+		className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", inputBaseCva({
 			variant,
 			as,
 			...props
-		}), "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", className),
+		}), className),
 		"data-rac": "",
 		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,
 		"data-disabled": isDisabled || void 0,
+		"data-is-disabled": isDisabled || void 0,
 		"data-invalid": isInvalid || void 0,
 		"data-is-empty": fieldProps.value === null || void 0,
 		"data-focus-within": isFocused || void 0,
@@ -93,54 +105,52 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		...focusWithinProps,
 		...hoverProps,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx(inputSizeCva({
+			className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
 				size,
 				as
-			}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!"),
-			children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-				as,
-				...headerProps
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-input-gap-input-text-to-elements",
-				children: [
-					disableManualEntry && /* @__PURE__ */ jsx(Button, {
-						onPress: onOpenDropdown,
-						className: "absolute inset-0 z-0",
-						isDisabled
-					}),
-					todayIcon && /* @__PURE__ */ jsx(IconButton, {
-						label: "",
-						icon: TodayIcon,
-						size: "none",
-						onPress: onToday,
-						className: "relative z-1"
-					}),
-					disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
-						size: "label-1",
-						className: "text-text-default-3",
-						children: placeholder
-					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
-						ref: dateFieldRef,
-						...fieldProps,
-						isDisabled,
-						isInvalid,
-						onClearChange,
-						hidePlaceholder,
-						disableManualEntry
-					}), endFieldProps && /* @__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, {
-						ref: endDateFieldRef,
-						...endFieldProps,
-						isDisabled,
-						isInvalid,
-						onClearChange,
-						hidePlaceholder,
-						disableManualEntry
-					})] })] })
-				]
-			})]
+			})),
+			children: [
+				as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					...headerProps
+				}),
+				shouldRenderTodayIconWithFieldLabel && todayIconButton,
+				/* @__PURE__ */ jsxs("div", {
+					className: datePickerInputContentRowCva({ size }),
+					children: [
+						disableManualEntry && /* @__PURE__ */ jsx(Button, {
+							onPress: onOpenDropdown,
+							className: "absolute inset-0 z-0",
+							isDisabled
+						}),
+						!shouldRenderTodayIconWithFieldLabel && todayIconButton,
+						disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
+							size: "label-1",
+							className: "text-text-default-3",
+							children: placeholder
+						}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
+							ref: dateFieldRef,
+							...fieldProps,
+							isDisabled,
+							isInvalid,
+							onClearChange,
+							hidePlaceholder,
+							disableManualEntry
+						}), endFieldProps && /* @__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, {
+							ref: endDateFieldRef,
+							...endFieldProps,
+							isDisabled,
+							isInvalid,
+							onClearChange,
+							hidePlaceholder,
+							disableManualEntry
+						})] })] })
+					]
+				})
+			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: clsx(inputSizeCva({
 				size,
@@ -153,7 +163,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 				label: "",
 				color: "secondary",
 				...buttonProps,
-				icon: isDateTime ? DateTimeIcon : CalendarIcon,
+				icon: pickerIcon,
 				isDisabled,
 				className: "border-0!"
 			})]

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

@@ -1,4 +1,5 @@
 import { DateFieldState, DateSegment } from '@react-stately/datepicker';
+import { HTMLAttributes, ReactNode, Ref } from 'react';
 interface DateSegmentProps {
     state: DateFieldState;
     segment: DateSegment;
@@ -8,4 +9,17 @@ interface DateSegmentProps {
 }
 export declare const getPlaceholder: (segment: DateSegment) => string | null;
 export declare const DateSegmentItem: ({ segment, state, isDisabled, timePickerOnly, hidePlaceholder }: DateSegmentProps) => import("react/jsx-runtime").JSX.Element;
+interface DateSegmentItemViewProps {
+    ref?: Ref<HTMLDivElement>;
+    segmentProps?: HTMLAttributes<HTMLDivElement>;
+    type?: DateSegment["type"];
+    text: ReactNode;
+    placeholder?: ReactNode;
+    isPlaceholder?: boolean;
+    isInputEmpty?: boolean;
+    isDisabled?: boolean;
+    timePickerOnly?: boolean;
+    hidePlaceholder?: boolean;
+}
+export declare const DateSegmentItemView: ({ ref, segmentProps, type, text, placeholder, isPlaceholder, isInputEmpty, isDisabled, timePickerOnly, hidePlaceholder, }: DateSegmentItemViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};