@povio/ui 2.2.6 → 2.2.8-rc

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

@@ -1,20 +1,24 @@
+import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { Calendar } from "../shared/Calendar.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 { 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 { Controller, useWatch } from "react-hook-form";
 import { 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 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;
@@ -149,7 +153,19 @@ var DatePickerBase = (props) => {
 		})
 	});
 };
-const DatePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
+var DatePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const { locale } = useLocale();
+	const [renderInput, setRenderInput] = useState(!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);
@@ -166,6 +182,47 @@ const 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 disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDatePlaceholder(locale);
+		const staticDateValue = rawValue ? parseCalendarDate(rawValue) : null;
+		const displayValue = staticDateValue ? DateTimeUtils.formatCalendarDateLocalized(staticDateValue, 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,
+			hideLabel,
+			isHeaderHidden,
+			isDisabled,
+			placeholder: staticPlaceholder,
+			displayValue,
+			isEmpty: !displayValue,
+			leadingVisual: todayIcon ? /* @__PURE__ */ jsx(TodayIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0,
+			trailingVisual: showDropdown ? /* @__PURE__ */ jsx(CalendarIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -174,7 +231,7 @@ const 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,
@@ -187,8 +244,10 @@ const 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))
 	});
 };
+//#endregion
 export { DatePicker };

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

@@ -1,24 +1,28 @@
+import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
+import { TodayIcon } from "../../../../assets/icons/Today.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 { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { RangeCalendar } from "../shared/RangeCalendar.js";
 import { 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";
+//#region src/components/inputs/DateTime/DateRangePicker/DateRangePicker.tsx
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
@@ -324,12 +328,12 @@ var DateRangePickerBase = (props) => {
 		state.toggle();
 	};
 	const onTodayPress = () => {
-		const todayDate$1 = today(getLocalTimeZone());
-		leftCalendarState.setFocusedDate(todayDate$1);
-		rightCalendarState.setFocusedDate(todayDate$1.add({ months: 1 }));
+		const todayDate = today(getLocalTimeZone());
+		leftCalendarState.setFocusedDate(todayDate);
+		rightCalendarState.setFocusedDate(todayDate.add({ months: 1 }));
 		syncCalendarStates({
-			start: todayDate$1,
-			end: todayDate$1
+			start: todayDate,
+			end: todayDate
 		});
 	};
 	const onOpenChange = (isOpen) => {
@@ -528,7 +532,19 @@ var DateRangePickerBase = (props) => {
 		})
 	});
 };
-const DateRangePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
+var DateRangePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const { locale } = useLocale$1();
+	const [renderInput, setRenderInput] = useState(!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 {
@@ -567,6 +583,76 @@ const 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 disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const defaultDatePlaceholder = DateTimeUtils.getDatePlaceholder(locale);
+		const staticPlaceholder = props.placeholder ?? /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-input-gap-input-text-to-elements",
+			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("span", {
+			className: "inline-flex items-center gap-input-gap-input-text-to-elements",
+			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,
+			hideLabel,
+			isHeaderHidden,
+			isDisabled,
+			placeholder: staticPlaceholder,
+			displayValue,
+			isEmpty: !hasRangeValue,
+			leadingVisual: todayIcon ? /* @__PURE__ */ jsx(TodayIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0,
+			trailingVisual: showDropdown ? /* @__PURE__ */ jsx(CalendarIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -575,7 +661,7 @@ const 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,
@@ -588,8 +674,10 @@ const 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))
 	});
 };
+//#endregion
 export { DateRangePicker };

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

@@ -1,18 +1,22 @@
+import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { Calendar } from "../shared/Calendar.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 { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, 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 { 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, 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;
@@ -172,7 +176,19 @@ var DateTimePickerBase = (props) => {
 		})
 	});
 };
-const DateTimePicker = ({ fullIso = true, ...props }) => {
+var DateTimePicker = ({ fullIso = true, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const { locale } = useLocale();
+	const [renderInput, setRenderInput] = useState(!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);
@@ -182,6 +198,47 @@ const 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 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 disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale);
+		const staticDateTimeValue = rawValue ? parseDateValue(rawValue) : null;
+		const displayValue = staticDateTimeValue && "hour" in staticDateTimeValue ? DateTimeUtils.formatCalendarDateTimeLocalized(staticDateTimeValue, locale) : "";
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			className: props.className ? `relative inline-flex w-full flex-col text-left ${props.className}` : "relative inline-flex w-full flex-col text-left",
+			as,
+			size,
+			variant,
+			hideLabel,
+			isHeaderHidden,
+			isDisabled,
+			placeholder: staticPlaceholder,
+			displayValue,
+			isEmpty: !displayValue,
+			leadingVisual: todayIcon ? /* @__PURE__ */ jsx(TodayIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0,
+			trailingVisual: showDropdown ? /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -189,7 +246,7 @@ const 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,
@@ -201,8 +258,10 @@ const DateTimePicker = ({ fullIso = true, ...props }) => {
 	}
 	return /* @__PURE__ */ jsx(DateTimePickerBase, {
 		...props,
+		ref: mergeRefs(props.ref, inputRef),
 		value: parseDateValue(props.value),
 		onChange: (value) => props.onChange?.(formatDateValue(value))
 	});
 };
+//#endregion
 export { DateTimePicker };

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

@@ -12,6 +12,7 @@ interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Ar
     isDirty?: boolean;
     disableManualEntry?: boolean;
     placeholder?: string;
+    inputClassName?: string;
 }
 export interface TimePickerProps extends Omit<TimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

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

@@ -1,22 +1,26 @@
+import { ClockIcon } from "../../../../assets/icons/Clock.js";
 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 { FormField } from "../../FormField/FormField.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.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";
+//#region src/components/inputs/DateTime/TimePicker/TimePicker.tsx
 var TimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, placeholder, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, placeholder, className, inputClassName, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -89,7 +93,7 @@ var TimePickerBase = (props) => {
 			...formFieldProps,
 			as,
 			labelProps,
-			className: "relative inline-flex w-full flex-col text-left",
+			className: clsx("relative inline-flex w-full flex-col text-left", className),
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: [/* @__PURE__ */ jsx(TimePickerInput, {
 				ref: mergeRefs(ref, timeFieldRef),
@@ -106,7 +110,8 @@ var TimePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				disableManualEntry,
-				placeholder
+				placeholder,
+				className: inputClassName
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -122,7 +127,19 @@ var TimePickerBase = (props) => {
 		})
 	});
 };
-const TimePicker = (props) => {
+var TimePicker = (props) => {
+	const ui = UIConfig.useConfig();
+	const { locale } = useLocale();
+	const [renderInput, setRenderInput] = useState(!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;
@@ -133,6 +150,45 @@ const 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 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 disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getTimePlaceholder(locale);
+		const staticTimeValue = rawValue ? parseTimeValue(rawValue) : null;
+		const displayValue = staticTimeValue ? DateTimeUtils.formatTimeLocalized(staticTimeValue, 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,
+			hideLabel,
+			isHeaderHidden,
+			isDisabled,
+			placeholder: staticPlaceholder,
+			displayValue,
+			isEmpty: !displayValue,
+			trailingVisual: showDropdown ? /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -140,7 +196,7 @@ const TimePicker = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error } }) => /* @__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,
@@ -151,8 +207,10 @@ const TimePicker = (props) => {
 	}
 	return /* @__PURE__ */ jsx(TimePickerBase, {
 		...props,
+		ref: mergeRefs(props.ref, inputRef),
 		value: parseTimeValue(props.value),
 		onChange: (value) => props.onChange?.(formatTimeValue(value))
 	});
 };
+//#endregion
 export { TimePicker };

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

@@ -7,7 +7,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useState } from "react";
 import { useCalendar } from "@react-aria/calendar";
-const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, ...props }) => {
+//#region src/components/inputs/DateTime/shared/Calendar.tsx
+var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, ...props }) => {
 	const [toggleState, setToggleState] = useState(null);
 	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
 	const handleDateChange = () => {
@@ -51,4 +52,5 @@ const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply
 		})]
 	});
 };
+//#endregion
 export { Calendar };

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

@@ -6,10 +6,11 @@ import { mergeProps } from "@react-aria/utils";
 import { isSameDay } from "@internationalized/date";
 import { useCalendarCell } from "@react-aria/calendar";
 import { useFocusRing } from "@react-aria/focus";
+//#region src/components/inputs/DateTime/shared/CalendarCell.tsx
 var isRange = (state) => {
 	return "highlightedRange" in state;
 };
-const CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, ...props }) => {
+var CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, ...props }) => {
 	const ref = useRef(null);
 	const { cellProps, buttonProps, formattedDate, isSelected, isDisabled, isOutsideVisibleRange } = useCalendarCell(props, state, ref);
 	const { focusProps } = useFocusRing();
@@ -127,4 +128,5 @@ const CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelect
 		})
 	});
 };
+//#endregion
 export { CalendarCell };

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

@@ -3,6 +3,7 @@ import { CalendarCell } from "./CalendarCell.js";
 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 = [
 	0,
 	1,
@@ -11,7 +12,7 @@ var WEEK_INDICES = [
 	4,
 	5
 ];
-const CalendarGrid = ({ state, onApply, shouldCloseOnSelect, offset = {}, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, ...props }) => {
+var CalendarGrid = ({ state, onApply, shouldCloseOnSelect, offset = {}, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, ...props }) => {
 	const { gridProps, headerProps, weekDays } = useCalendarGrid({
 		...props,
 		weekdayStyle: "short"
@@ -47,4 +48,5 @@ const CalendarGrid = ({ state, onApply, shouldCloseOnSelect, offset = {}, onDate
 		})
 	});
 };
+//#endregion
 export { CalendarGrid };

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

@@ -8,11 +8,12 @@ import { clsx } from "clsx";
 import { Button, ToggleButtonGroup } from "react-aria-components";
 import { Time } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
+//#region src/components/inputs/DateTime/shared/CalendarHeader.tsx
 var HourCycle = {
 	12: "h12",
 	24: "h23"
 };
-const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, toggleState, setToggleState }) => {
+var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, toggleState, setToggleState }) => {
 	const formatter = useDateFormatter({
 		month: "long",
 		timeZone: calendarState.timeZone
@@ -86,4 +87,5 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
 		]
 	});
 };
+//#endregion
 export { CalendarHeader };

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

@@ -5,13 +5,14 @@ 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 { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
 import { Select } from "../../Selection/Select/Select.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useDateFormatter } from "@react-aria/i18n";
-const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
+//#region src/components/inputs/DateTime/shared/CalendarSelectHeader.tsx
+var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
 	const { t } = useTranslation("ui");
 	const displayDate = state.visibleRange.start.add(offset);
 	const currentMonth = displayDate.month - 1;
@@ -172,4 +173,5 @@ const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled,
 		]
 	});
 };
+//#endregion
 export { CalendarSelectHeader };

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

@@ -5,7 +5,8 @@ import { useEffect, useImperativeHandle, useRef } from "react";
 import { useDateField, useLocale } from "react-aria";
 import { createCalendar } from "@internationalized/date";
 import { useDateFieldState } from "react-stately";
-const DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, ...props }) => {
+//#region src/components/inputs/DateTime/shared/DateField.tsx
+var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, ...props }) => {
 	const { locale } = useLocale();
 	const state = useDateFieldState({
 		...props,
@@ -86,4 +87,5 @@ const DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableMan
 		})
 	});
 };
+//#endregion
 export { DateField };