@povio/ui 2.2.7 → 2.2.8-rc

package/README.md

@@ -31,6 +31,7 @@ This is required for buttons to behave as expected. It is based on [Tailwind Upg
 
 In order for Tailwind to also compile classes for @povio/ui package, you need to include @source directive in Tailwind config.
 In your globals.css add (make sure path is correct):
+
 ```css
 @source "../../node_modules/@povio/ui/dist";
 ```
@@ -42,6 +43,7 @@ We are using `react-aria-components` for our UI components including their plugi
 ### Custom Tailwind plugin
 
 We also use a custom tailwind plugin to shorten some selectors inside the @povio/ui package. Install it by adding the following line to your `base.css`.
+
 ```css
 @plugin "@povio/ui/tw-ui-plugin";
 ```

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

@@ -1,17 +1,20 @@
+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";
@@ -151,6 +154,18 @@ var DatePickerBase = (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);
@@ -167,6 +182,47 @@ 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 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, {
@@ -175,7 +231,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 +244,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.js

@@ -1,21 +1,24 @@
+import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.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";
@@ -530,6 +533,18 @@ var DateRangePickerBase = (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 {
@@ -568,6 +583,76 @@ 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 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, {
@@ -576,7 +661,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 +674,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.js

@@ -1,16 +1,19 @@
+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
@@ -174,6 +177,18 @@ var DateTimePickerBase = (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);
@@ -183,6 +198,47 @@ 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 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, {
@@ -190,7 +246,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,
@@ -202,6 +258,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

@@ -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,23 +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,
@@ -90,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),
@@ -107,7 +110,8 @@ var TimePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				disableManualEntry,
-				placeholder
+				placeholder,
+				className: inputClassName
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -124,6 +128,18 @@ var TimePickerBase = (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;
@@ -134,6 +150,45 @@ 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 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, {
@@ -141,7 +196,7 @@ var 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,
@@ -152,6 +207,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/TimePickerInput.d.ts

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

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

@@ -12,7 +12,7 @@ import { useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 //#region src/components/inputs/DateTime/shared/TimePickerInput.tsx
-var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, onPress, ...props }) => {
+var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -23,12 +23,11 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInva
 	const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: inputBaseCva({
+		className: clsx(inputBaseCva({
 			variant,
 			as,
-			...props,
-			className: clsx("group/date-picker-content relative min-w-input-width-min-width", "flex items-center justify-between gap-input-gap-input-text-to-elements")
-		}),
+			...props
+		}), "group/date-picker-content relative min-w-input-width-min-width", "flex items-center justify-between gap-input-gap-input-text-to-elements", className),
 		"data-rac": "",
 		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,

package/dist/components/inputs/Input/NumberInput/NumberInput.d.ts

@@ -13,6 +13,7 @@ interface NumberInputBaseProps extends FormFieldProps, InputVariantProps, Omit<I
     value?: number | null;
     onChange?: (value: number | null) => void;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    autoFocusOnMount?: boolean;
 }
 export type NumberInputProps = NumberInputBaseProps;
 export type ControlledNumberInputProps<TFieldValues extends FieldValues> = ControlProps<NumberInputProps, TFieldValues>;

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -1,23 +1,25 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { Loader } from "../../../status/Loader/Loader.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { inputBase } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useRef } from "react";
+import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
 import { Input, useLocale } from "react-aria-components";
 import { useFocusVisible, useNumberField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 import { useNumberFieldState } from "react-stately";
 //#region src/components/inputs/Input/NumberInput/NumberInput.tsx
 var NumberInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputRef = useRef(null);
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
 	const numberFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { locale } = useLocale();
@@ -34,6 +36,10 @@ var NumberInputBase = (props) => {
 		formatOptions
 	};
 	const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
 	const formFieldProps = {
 		error,
 		label,
@@ -113,7 +119,68 @@ var NumberInputBase = (props) => {
 		})
 	});
 };
+var renderIconVisual = (icon) => {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
+};
 var NumberInput = (props) => {
+	const ui = UIConfig.useConfig();
+	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;
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const staticValue = watchedValue ?? props.value ?? props.defaultValue;
+		const displayValue = staticValue == null ? "" : `${staticValue}`;
+		const hasValue = displayValue !== "";
+		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 trailingVisual = !!props.unit || !!props.isLoading || !!props.action && !props.isLoading || !!props.trailingIcon && !props.isLoading && !props.action ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			props.unit && /* @__PURE__ */ jsx("span", {
+				className: "text-label-2 text-text-default-3",
+				children: props.unit
+			}),
+			props.isLoading && /* @__PURE__ */ jsx(Loader, {}),
+			!props.isLoading && props.action && renderIconVisual(props.action.icon),
+			!props.isLoading && !props.action && props.trailingIcon && renderIconVisual(props.trailingIcon)
+		] }) : void 0;
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			size,
+			variant,
+			hideLabel,
+			isHeaderHidden,
+			isDisabled,
+			className: clsx("group w-full", as === "inline" && "h-full", props.className),
+			inputClassName: props.inputClassName,
+			placeholder: as === "floating" ? "" : props.placeholder,
+			displayValue,
+			isEmpty: !hasValue,
+			leadingVisual: renderIconVisual(props.leadingIcon),
+			trailingVisual
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -121,17 +188,22 @@ var NumberInput = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(NumberInputBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
+				error: props.error ?? error?.message,
+				autoFocusOnMount: shouldFocus
 			}, field.value === null || field.value === void 0 ? "empty" : "filled")
 		});
 	}
-	return /* @__PURE__ */ jsx(NumberInputBase, { ...props }, props.value === null || props.value === void 0 ? "empty" : "filled");
+	return /* @__PURE__ */ jsx(NumberInputBase, {
+		...props,
+		ref: mergeRefs(props.ref, inputRef),
+		autoFocusOnMount: shouldFocus
+	}, props.value === null || props.value === void 0 ? "empty" : "filled");
 };
 //#endregion
 export { NumberInput };

package/dist/components/inputs/Input/TextInput/TextInput.d.ts

@@ -13,6 +13,7 @@ interface TextInputBaseProps extends FormFieldProps, InputVariantProps, Omit<Inp
     type?: AllowedHTMLInputTypeAttribute;
     todayIcon?: boolean;
     isDirty?: boolean;
+    autoFocusOnMount?: boolean;
 }
 export interface TextInputProps extends TextInputBaseProps {
 }

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -1,22 +1,24 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { Loader } from "../../../status/Loader/Loader.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { inputBase } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useRef } from "react";
+import { isValidElement, useEffect, useRef, useState } from "react";
 import { Input } from "react-aria-components";
 import { useFocusVisible, useTextField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 //#region src/components/inputs/Input/TextInput/TextInput.tsx
 var TextInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputRef = useRef(null);
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { labelProps, inputProps } = useTextField({
@@ -29,6 +31,10 @@ var TextInputBase = (props) => {
 		onChange,
 		onBlur
 	}, textFieldRef);
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
 	const formFieldProps = {
 		error,
 		label,
@@ -106,7 +112,71 @@ var TextInputBase = (props) => {
 		})
 	});
 };
+var renderIconVisual = (icon) => {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
+};
 var TextInput = (props) => {
+	const ui = UIConfig.useConfig();
+	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 staticValue = watchedValue ?? props.value ?? props.defaultValue ?? "";
+	const inputType = props.type;
+	if (!renderInput && inputType === "password" && `${staticValue}`.length > 0) setRenderInput(true);
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => inputRef.current?.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 maskedPasswordValue = inputType === "password" && `${staticValue}`.length > 0 ? "•".repeat(`${staticValue}`.length) : staticValue;
+		const displayValue = maskedPasswordValue == null ? "" : `${maskedPasswordValue}`;
+		const hasValue = displayValue !== "";
+		const trailingVisual = !!props.unit || !!props.isLoading || !!props.action && !props.isLoading || !!props.trailingIcon && !props.isLoading && !props.action ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			props.unit && /* @__PURE__ */ jsx("span", {
+				className: "text-label-2 text-text-default-3",
+				children: props.unit
+			}),
+			props.isLoading && /* @__PURE__ */ jsx(Loader, {}),
+			!props.isLoading && props.action && renderIconVisual(props.action.icon),
+			!props.isLoading && !props.action && props.trailingIcon && renderIconVisual(props.trailingIcon)
+		] }) : void 0;
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			size,
+			variant,
+			hideLabel,
+			isHeaderHidden,
+			isDisabled,
+			className: clsx("group w-full", as === "inline" && "h-full", props.className),
+			inputClassName: props.inputClassName,
+			placeholder: as === "floating" ? "" : props.placeholder,
+			displayValue,
+			isEmpty: !hasValue,
+			leadingVisual: renderIconVisual(props.leadingIcon),
+			trailingVisual
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -114,17 +184,22 @@ var TextInput = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextInputBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
+				error: props.error ?? error?.message,
+				autoFocusOnMount: shouldFocus
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx(TextInputBase, { ...props });
+	return /* @__PURE__ */ jsx(TextInputBase, {
+		...props,
+		ref: mergeRefs(props.ref, inputRef),
+		autoFocusOnMount: shouldFocus
+	});
 };
 //#endregion
 export { TextInput };

package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js

@@ -1,9 +1,13 @@
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { SelectBase } from "../shared/SelectBase.js";
 import { jsx } from "react/jsx-runtime";
+import { isValidElement, useEffect, useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
-var Autocomplete = (props) => {
+var _Autocomplete = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -26,5 +30,61 @@ var Autocomplete = (props) => {
 		isSearchable: true
 	});
 };
+var Autocomplete = (props) => {
+	const ui = UIConfig.useConfig();
+	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const rootRef = useRef(null);
+	const currentValue = ("formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value) ?? props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => {
+			(rootRef.current?.querySelector("input, [data-type='select-trigger'], button, [tabindex]"))?.focus();
+		});
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const getItemLabel = (id) => {
+			const item = props.items.find((innerItem) => innerItem.id === id);
+			if (!item) return "";
+			if (props.showSelectionContent && item.content) return isValidElement(item.content) ? item.label : item.content;
+			return item.label;
+		};
+		const mode = props.selectionMode ?? ui.select.selectionMode;
+		let displayValue = "";
+		if (mode === "multiple") {
+			if (Array.isArray(currentValue) && currentValue.length > 0) displayValue = currentValue.map((id) => getItemLabel(id)).filter(Boolean).join(", ");
+		} else if (currentValue != null) displayValue = getItemLabel(currentValue);
+		const as = props.as ?? ui.input.as;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			size: props.size ?? ui.input.size,
+			variant: props.variant ?? ui.input.variant,
+			isHeaderHidden: props.isHeaderHidden || as === "inline",
+			hideLabel: props.hideLabel ?? ui.input.hideLabel,
+			isDisabled,
+			placeholder: as === "floating" ? "" : props.placeholder,
+			displayValue,
+			isEmpty: !displayValue,
+			trailingVisual: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" })
+		});
+	}
+	return /* @__PURE__ */ jsx(_Autocomplete, {
+		...props,
+		ref: mergeRefs(props.ref, rootRef)
+	});
+};
 //#endregion
 export { Autocomplete };

package/dist/components/inputs/Selection/Select/Select.js

@@ -1,9 +1,13 @@
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { SelectBase } from "../shared/SelectBase.js";
 import { jsx } from "react/jsx-runtime";
+import { isValidElement, useEffect, useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/Select.tsx
-var Select = (props) => {
+var _Select = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -22,5 +26,62 @@ var Select = (props) => {
 	}
 	return /* @__PURE__ */ jsx(SelectBase, { ...props });
 };
+var Select = (props) => {
+	const ui = UIConfig.useConfig();
+	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const rootRef = useRef(null);
+	const currentValue = ("formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value) ?? props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	if (!renderInput && props.selectionMode !== "multiple" && !!props.showSelectionContent && currentValue != null) setRenderInput(true);
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => {
+			(rootRef.current?.querySelector("[data-type='select-trigger'], input, button, [tabindex]"))?.focus();
+		});
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const getItemLabel = (id) => {
+			const item = props.items.find((innerItem) => innerItem.id === id);
+			if (!item) return "";
+			if (props.showSelectionContent && item.content) return isValidElement(item.content) ? item.label : item.content;
+			return item.label;
+		};
+		const mode = props.selectionMode ?? ui.select.selectionMode;
+		let displayValue = "";
+		if (mode === "multiple") {
+			if (Array.isArray(currentValue) && currentValue.length > 0) displayValue = currentValue.map((id) => getItemLabel(id)).filter(Boolean).join(", ");
+		} else if (currentValue != null) displayValue = getItemLabel(currentValue);
+		const as = props.as ?? ui.input.as;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			size: props.size ?? ui.input.size,
+			variant: props.variant ?? ui.input.variant,
+			isHeaderHidden: props.isHeaderHidden || as === "inline",
+			hideLabel: props.hideLabel ?? ui.input.hideLabel,
+			isDisabled,
+			placeholder: as === "floating" ? "" : props.placeholder,
+			displayValue,
+			isEmpty: !displayValue,
+			trailingVisual: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" })
+		});
+	}
+	return /* @__PURE__ */ jsx(_Select, {
+		...props,
+		ref: mergeRefs(props.ref, rootRef)
+	});
+};
 //#endregion
 export { Select };

package/dist/components/inputs/shared/StaticInput.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { FormFieldProps } from '../FormField/FormField';
+import { TextInputProps } from '../Input/TextInput/TextInput';
+import { InputSizeProps, InputVariantProps } from './input.cva';
+interface StaticInputProps extends FormFieldProps {
+    onInteract: (shouldFocus: boolean) => void;
+    as?: TextInputProps["as"];
+    size?: InputSizeProps["size"];
+    variant?: InputVariantProps["variant"];
+    placeholder?: ReactNode;
+    displayValue?: ReactNode;
+    isEmpty?: boolean;
+    leadingVisual?: ReactNode;
+    trailingVisual?: ReactNode;
+    inputClassName?: string;
+}
+export declare const StaticInput: ({ onInteract, as, size, variant, placeholder, displayValue, isEmpty, leadingVisual, trailingVisual, inputClassName, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/shared/StaticInput.js

@@ -0,0 +1,69 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { inputBase, inputSize } from "./input.cva.js";
+import { FormField } from "../FormField/FormField.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/inputs/shared/StaticInput.tsx
+var StaticInput = ({ onInteract, as, size, variant, placeholder, displayValue, isEmpty, leadingVisual, trailingVisual, inputClassName, className, ...formFieldProps }) => {
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	let hasValue = !!displayValue;
+	if (isEmpty != null) hasValue = !isEmpty;
+	let staticDisplayContent = placeholder;
+	if (hasValue) staticDisplayContent = displayValue;
+	else if (as === "floating") staticDisplayContent = null;
+	const shouldRenderFloatingLineSpacer = as === "floating" && !hasValue;
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		as,
+		className,
+		onMouseEnter: () => onInteract(false),
+		tabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsxs("div", {
+			tabIndex: formFieldProps.isDisabled ? -1 : 0,
+			onFocus: () => onInteract(true),
+			onClick: () => onInteract(true),
+			onPointerDown: () => onInteract(true),
+			"data-is-empty": !hasValue || void 0,
+			"data-disabled": formFieldProps.isDisabled || void 0,
+			"data-is-disabled": formFieldProps.isDisabled || void 0,
+			"data-has-selection": hasValue || void 0,
+			"data-rac": "",
+			className: clsx("group/static-input group/input-content group/select-content relative flex min-w-input-width-min-width items-center justify-between gap-input-gap-input-text-to-elements", inputBaseCva({
+				as,
+				variant
+			}), inputClassName),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx(inputSizeCva({
+					size,
+					as
+				}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!"),
+				children: [leadingVisual && /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none shrink-0",
+					children: leadingVisual
+				}), /* @__PURE__ */ jsxs("div", {
+					className: clsx("flex w-full truncate", as === "floating" && "flex-col", as === "filter" && "gap-input-gap-input-text-to-elements"),
+					children: [as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
+						as,
+						size,
+						label: formFieldProps.label,
+						isRequired: formFieldProps.isRequired,
+						isDisabled: formFieldProps.isDisabled
+					}), /* @__PURE__ */ jsxs("div", {
+						className: clsx("truncate", !hasValue && "text-text-default-3"),
+						children: [staticDisplayContent, shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" })]
+					})]
+				})]
+			}), trailingVisual && /* @__PURE__ */ jsx("div", {
+				className: clsx(inputSizeCva({
+					size,
+					as
+				}), "pointer-events-none flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
+				children: trailingVisual
+			})]
+		})
+	});
+};
+//#endregion
+export { StaticInput };

package/dist/config/uiConfig.context.d.ts

@@ -19,6 +19,7 @@ export declare namespace UIConfig {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
+        renderStaticInput: boolean;
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;

package/dist/config/uiConfig.context.js

@@ -6,6 +6,7 @@ import { createContext, use } from "react";
 var UIConfig;
 (function(_UIConfig) {
 	const DEFAULT_CONFIG = {
+		renderStaticInput: true,
 		input: {
 			variant: "outlined",
 			as: "default",

package/dist/utils/date-time.utils.d.ts

@@ -1,5 +1,15 @@
 import { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
 export declare namespace DateTimeUtils {
+    function getDatePlaceholder(locale?: string): string;
+    function getTimePlaceholder(locale?: string): string;
+    function getDateTimePlaceholder(locale?: string): string;
+    function getDateRangePlaceholder(locale?: string): string;
+    function formatCalendarDateLocalized(calendarDate: CalendarDate, locale?: string): string;
+    function formatTimeLocalized(timeValue: {
+        hour: number;
+        minute: number;
+    }, locale?: string): string;
+    function formatCalendarDateTimeLocalized(calendarDateTime: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute">, locale?: string): string;
     function fromISOtoZonedDateTime(isoString: string): ZonedDateTime;
     function fromDateValueToISO(dateValue: DateValue): string;
     function fromLocalToZonedDateTime(date: Date): ZonedDateTime;

package/dist/utils/date-time.utils.js

@@ -1,7 +1,88 @@
-import { CalendarDate, CalendarDateTime, fromDate, getLocalTimeZone, parseAbsolute, parseAbsoluteToLocal } from "@internationalized/date";
+import { CalendarDate, CalendarDateTime, DateFormatter, fromDate, getLocalTimeZone, parseAbsolute, parseAbsoluteToLocal } from "@internationalized/date";
 //#region src/utils/date-time.utils.ts
 var DateTimeUtils;
 (function(_DateTimeUtils) {
+	const DATE_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22));
+	const TIME_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22, 13, 45));
+	const getDatePlaceholderFormatter = (locale) => new Intl.DateTimeFormat(locale, {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	});
+	const getTimePlaceholderFormatter = (locale) => new Intl.DateTimeFormat(locale, {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	});
+	const getResolvedLocale = (locale) => {
+		if (locale) return locale;
+		return new Intl.DateTimeFormat().resolvedOptions().locale;
+	};
+	const getDateFormatter = (locale) => new DateFormatter(getResolvedLocale(locale), {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric",
+		timeZone: "UTC"
+	});
+	const getTimeFormatter = (locale) => new DateFormatter(getResolvedLocale(locale), {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23",
+		timeZone: "UTC"
+	});
+	const getDateTimeFormatter = (locale) => new DateFormatter(getResolvedLocale(locale), {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23",
+		timeZone: "UTC"
+	});
+	const mapTypeToPlaceholder = (type) => {
+		switch (type) {
+			case "day": return "dd";
+			case "month": return "mm";
+			case "year": return "yyyy";
+			case "hour": return "hh";
+			case "minute": return "mm";
+			default: return null;
+		}
+	};
+	const formatPlaceholder = (formatter, sampleDate) => {
+		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type) ?? part.value).join("");
+	};
+	function getDatePlaceholder(locale) {
+		return formatPlaceholder(getDatePlaceholderFormatter(locale), DATE_SAMPLE_DATE_UTC);
+	}
+	_DateTimeUtils.getDatePlaceholder = getDatePlaceholder;
+	function getTimePlaceholder(locale) {
+		return formatPlaceholder(getTimePlaceholderFormatter(locale), TIME_SAMPLE_DATE_UTC);
+	}
+	_DateTimeUtils.getTimePlaceholder = getTimePlaceholder;
+	function getDateTimePlaceholder(locale) {
+		return `${getDatePlaceholder(locale)}, ${getTimePlaceholder(locale)}`;
+	}
+	_DateTimeUtils.getDateTimePlaceholder = getDateTimePlaceholder;
+	function getDateRangePlaceholder(locale) {
+		const datePlaceholder = getDatePlaceholder(locale);
+		return `${datePlaceholder} – ${datePlaceholder}`;
+	}
+	_DateTimeUtils.getDateRangePlaceholder = getDateRangePlaceholder;
+	function formatCalendarDateLocalized(calendarDate, locale) {
+		return getDateFormatter(locale).format(calendarDate.toDate("UTC"));
+	}
+	_DateTimeUtils.formatCalendarDateLocalized = formatCalendarDateLocalized;
+	function formatTimeLocalized(timeValue, locale) {
+		const dateTime = new CalendarDateTime(2e3, 11, 22, timeValue.hour, timeValue.minute);
+		return getTimeFormatter(locale).format(dateTime.toDate("UTC"));
+	}
+	_DateTimeUtils.formatTimeLocalized = formatTimeLocalized;
+	function formatCalendarDateTimeLocalized(calendarDateTime, locale) {
+		const normalizedValue = new CalendarDateTime(calendarDateTime.year, calendarDateTime.month, calendarDateTime.day, calendarDateTime.hour, calendarDateTime.minute);
+		return getDateTimeFormatter(locale).format(normalizedValue.toDate("UTC"));
+	}
+	_DateTimeUtils.formatCalendarDateTimeLocalized = formatCalendarDateTimeLocalized;
 	function fromISOtoZonedDateTime(isoString) {
 		return parseAbsoluteToLocal(isoString);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.7",
+  "version": "2.2.8-rc",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",