@povio/ui 2.2.9-rc.16 → 2.2.9-rc.18

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

@@ -1,5 +1,5 @@
 import { CalendarDate, DateValue } from '@internationalized/date';
-import { Ref, FocusEvent } from 'react';
+import { FocusEvent, Ref } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { DatePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';

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

@@ -1,7 +1,8 @@
-import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { Calendar } from "../shared/Calendar.js";
+import { datePickerInputContentRow } from "../shared/datePickerInput.cva.js";
+import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
@@ -169,6 +170,7 @@ var DatePickerBase = (props) => {
 };
 var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const { locale } = useLocale();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
 	const [shouldFocus, setShouldFocus] = useState(false);
@@ -212,6 +214,7 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
+		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDatePlaceholder(locale);
@@ -234,8 +237,9 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 			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
+			contentRowClassName: datePickerInputContentRowCva({ size }),
+			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -1,8 +1,9 @@
-import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import "../../../../config/i18n.js";
-import { TodayIcon } from "../../../../assets/icons/Today.js";
+import { datePickerInputContentRow } from "../shared/datePickerInput.cva.js";
+import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
@@ -545,6 +546,7 @@ var DateRangePickerBase = (props) => {
 };
 var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const { locale } = useLocale$1();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
 	const [shouldFocus, setShouldFocus] = useState(false);
@@ -610,6 +612,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
+		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const defaultDatePlaceholder = DateTimeUtils.getDatePlaceholder(locale);
@@ -661,8 +664,9 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			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
+			contentRowClassName: datePickerInputContentRowCva({ size }),
+			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -1,7 +1,8 @@
-import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { Calendar } from "../shared/Calendar.js";
+import { datePickerInputContentRow } from "../shared/datePickerInput.cva.js";
+import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
@@ -189,6 +190,7 @@ var DateTimePickerBase = (props) => {
 };
 var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const { locale } = useLocale();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
 	const [shouldFocus, setShouldFocus] = useState(false);
@@ -225,6 +227,7 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
+		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale);
@@ -247,8 +250,9 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 			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
+			contentRowClassName: datePickerInputContentRowCva({ size }),
+			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -1,4 +1,3 @@
-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";
@@ -198,7 +197,7 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 			placeholder: staticPlaceholder,
 			displayValue,
 			isEmpty: !displayValue,
-			trailingVisual: showDropdown ? /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0
+			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -29,7 +29,7 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 			setToggleState("time");
 			return;
 		}
-		onApply(resolvedDate);
+		if (datePickerState?.value && !setDateValueOnDateSelection) onApply(resolvedDate);
 	};
 	const getContent = () => {
 		if (!toggleState) return /* @__PURE__ */ jsx(CalendarGrid, {

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

@@ -2,9 +2,9 @@ import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { DateField } from "./DateField.js";
 import { datePickerInputContentRow } from "./datePickerInput.cva.js";
+import { getDatePickerTodayIcon } from "./datePickerTodayIcon.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
@@ -71,7 +71,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		endFieldProps?.onBlur?.(null);
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
-	const todayIconComponent = todayIcon === true ? TodayIcon : todayIcon || null;
+	const todayIconComponent = getDatePickerTodayIcon(todayIcon);
 	const pickerIcon = isDateTime ? uiConfig.dateInput.dateTimeIcon : uiConfig.dateInput.calendarIcon;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,

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

@@ -1,6 +1,6 @@
-import { ClockIcon } from "../../../../assets/icons/Clock.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
@@ -13,6 +13,7 @@ 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, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
+	const uiConfig = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -83,7 +84,7 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequ
 				label: "",
 				color: "secondary",
 				onPress,
-				icon: ClockIcon,
+				icon: uiConfig.dateInput.timeIcon,
 				isDisabled,
 				className: "border-0!"
 			})]

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

@@ -0,0 +1,6 @@
+import { FC, ReactElement, SVGProps } from 'react';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from './datePicker.types';
+type TodayIconComponent = FC<SVGProps<SVGSVGElement>> | ReactElement;
+export declare const getDatePickerTodayIcon: (todayIcon: DatePickerTodayIcon | undefined) => TodayIconComponent | null;
+export declare const renderDatePickerTodayIcon: (todayIcon: DatePickerTodayIcon | undefined, size?: DatePickerTodayIconButtonSize, className?: string) => import("react/jsx-runtime").JSX.Element | undefined;
+export {};

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

@@ -0,0 +1,20 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { buttonIconSize } from "../../../buttons/Button/button.cva.js";
+import { TodayIcon } from "../../../../assets/icons/Today.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement } from "react";
+//#region src/components/inputs/DateTime/shared/datePickerTodayIcon.tsx
+var getDatePickerTodayIcon = (todayIcon) => {
+	if (!todayIcon) return null;
+	return todayIcon === true ? TodayIcon : todayIcon;
+};
+var renderDatePickerTodayIcon = (todayIcon, size = "none", className) => {
+	const buttonIconSizeCva = UIStyle.useCva("button.iconSize", buttonIconSize);
+	const icon = getDatePickerTodayIcon(todayIcon);
+	if (!icon) return;
+	if (isValidElement(icon)) return icon;
+	return /* @__PURE__ */ jsx(icon, { className: clsx(buttonIconSizeCva({ size }), "text-interactive-text-secondary-idle", className) });
+};
+//#endregion
+export { getDatePickerTodayIcon, renderDatePickerTodayIcon };

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

@@ -152,7 +152,7 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 		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: [
+		const trailingContent = !!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
@@ -179,7 +179,7 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 			displayValue,
 			isEmpty: !hasValue,
 			leadingVisual: renderIconVisual(props.leadingIcon),
-			trailingVisual
+			trailingContent
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -152,7 +152,7 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 		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: [
+		const trailingContent = !!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
@@ -179,7 +179,7 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 			displayValue,
 			isEmpty: !hasValue,
 			leadingVisual: renderIconVisual(props.leadingIcon),
-			trailingVisual
+			trailingContent
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -3,6 +3,7 @@ import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { StaticInput } from "../../shared/StaticInput.js";
 import { SelectBase } from "../shared/SelectBase.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { isValidElement, useEffect, useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller, useWatch } from "react-hook-form";
@@ -66,6 +67,7 @@ function Autocomplete({ renderStaticInput, ...props }) {
 		const as = props.as ?? ui.input.as;
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
+		const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" }) : void 0] }) : void 0;
 		return /* @__PURE__ */ jsx(StaticInput, {
 			...props,
 			onInteract: (focus) => {
@@ -75,13 +77,16 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			as,
 			size: props.size ?? ui.input.size,
 			variant: props.variant ?? ui.input.variant,
-			isHeaderHidden: props.isHeaderHidden || as === "inline",
+			isHeaderHidden: props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
 			hideLabel: props.hideLabel ?? ui.input.hideLabel,
 			isDisabled,
+			className: clsx("w-full", props.containerClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
 			placeholder: as === "floating" ? "" : props.placeholder,
 			displayValue,
 			isEmpty: !displayValue,
-			trailingVisual: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" })
+			leadingContent: props.leadingContent,
+			trailingContent
 		});
 	}
 	return /* @__PURE__ */ jsx(_Autocomplete, {

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

@@ -3,6 +3,7 @@ import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { StaticInput } from "../../shared/StaticInput.js";
 import { SelectBase } from "../shared/SelectBase.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { isValidElement, useEffect, useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller, useWatch } from "react-hook-form";
@@ -62,6 +63,7 @@ function Select({ renderStaticInput, ...props }) {
 		const as = props.as ?? ui.input.as;
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
+		const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: `size-6 shrink-0 ${isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle"}` }) : void 0] }) : void 0;
 		return /* @__PURE__ */ jsx(StaticInput, {
 			...props,
 			onInteract: (focus) => {
@@ -71,13 +73,15 @@ function Select({ renderStaticInput, ...props }) {
 			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,
+			className: clsx("w-full", props.containerClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
 			placeholder: as === "floating" ? "" : props.placeholder,
 			displayValue,
 			isEmpty: !displayValue,
-			trailingVisual: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" })
+			leadingContent: props.leadingContent,
+			trailingContent
 		});
 	}
 	return /* @__PURE__ */ jsx(_Select, {

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

@@ -12,8 +12,10 @@ interface StaticInputProps extends FormFieldProps {
     displayValue?: ReactNode;
     isEmpty?: boolean;
     leadingVisual?: ReactNode;
-    trailingVisual?: ReactNode;
+    leadingContent?: ReactNode;
+    trailingContent?: ReactNode;
+    contentRowClassName?: string;
     inputClassName?: string;
 }
-export declare const StaticInput: ({ onInteract, as, size, variant, applyMinInputWidth, placeholder, displayValue, isEmpty, leadingVisual, trailingVisual, inputClassName, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StaticInput: ({ onInteract, as, size, variant, applyMinInputWidth, placeholder, displayValue, isEmpty, leadingVisual, leadingContent, trailingContent, contentRowClassName, inputClassName, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,7 +5,7 @@ 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, applyMinInputWidth, placeholder, displayValue, isEmpty, leadingVisual, trailingVisual, inputClassName, className, ...formFieldProps }) => {
+var StaticInput = ({ onInteract, as, size, variant, applyMinInputWidth, placeholder, displayValue, isEmpty, leadingVisual, leadingContent, trailingContent, contentRowClassName, inputClassName, className, ...formFieldProps }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	let hasValue = !!displayValue;
@@ -30,37 +30,45 @@ var StaticInput = ({ onInteract, as, size, variant, applyMinInputWidth, placehol
 			"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 items-center justify-between gap-input-gap-input-text-to-elements", applyMinInputWidth && "min-w-input-width-min-width", inputBaseCva({
+			className: clsx("group/static-input group/input-content group/select-content relative flex items-center gap-input-gap-input-text-to-elements", applyMinInputWidth && "min-w-input-width-min-width", 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,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex w-full items-center gap-input-gap-input-text-to-elements",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: clsx(inputSizeCva({
 						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", {
+						as
+					}), "group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", contentRowClassName),
+					children: [
+						leadingVisual && /* @__PURE__ */ jsx("div", {
+							className: "pointer-events-none shrink-0",
+							children: leadingVisual
+						}),
+						as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
+							as,
+							size,
+							label: formFieldProps.label,
+							isRequired: formFieldProps.isRequired,
+							isDisabled: formFieldProps.isDisabled
+						}),
+						leadingContent && /* @__PURE__ */ jsx("div", {
+							className: "ml-input-side-default flex shrink-0 items-center",
+							children: leadingContent
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: clsx("w-full truncate", !hasValue && "text-text-default-3"),
+							children: [staticDisplayContent, shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" })]
+						})
+					]
+				})
+			}), trailingContent && /* @__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
+				children: trailingContent
 			})]
 		})
 	});

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

@@ -37,6 +37,7 @@ export declare namespace UIConfig {
         dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear"> & {
             calendarIcon?: ReactElement;
             dateTimeIcon?: ReactElement;
+            timeIcon?: ReactElement;
             setDateValueOnDateSelection?: boolean;
         };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;

package/dist/config/uiConfig.context.js

@@ -1,4 +1,5 @@
 import { CalendarIcon } from "../assets/icons/Calendar.js";
+import { ClockIcon } from "../assets/icons/Clock.js";
 import { DateTimeIcon } from "../assets/icons/DateTime.js";
 import { ObjectUtils } from "../utils/object.utils.js";
 import { useDeepCompareMemo } from "../hooks/useDeepCompare.js";
@@ -52,6 +53,7 @@ var UIConfig;
 			autoFixYear: false,
 			calendarIcon: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-5" }),
 			dateTimeIcon: /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-5" }),
+			timeIcon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }),
 			setDateValueOnDateSelection: false
 		},
 		actionModal: {

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

@@ -39,18 +39,23 @@ var DateTimeUtils;
 		hourCycle: "h23",
 		timeZone: "UTC"
 	});
-	const mapTypeToPlaceholder = (type) => {
+	const repeatLocalizedFieldLabel = (type, length, locale) => {
+		const placeholderChar = new Intl.DisplayNames(getResolvedLocale(locale), { type: "dateTimeField" }).of(type)?.trim().charAt(0).toLocaleLowerCase(getResolvedLocale(locale));
+		if (!placeholderChar) return null;
+		return placeholderChar.repeat(length);
+	};
+	const mapTypeToPlaceholder = (type, locale) => {
 		switch (type) {
-			case "day": return "dd";
-			case "month": return "mm";
-			case "year": return "yyyy";
-			case "hour": return "hh";
-			case "minute": return "mm";
+			case "day": return repeatLocalizedFieldLabel(type, 2, locale);
+			case "month": return repeatLocalizedFieldLabel(type, 2, locale);
+			case "year": return repeatLocalizedFieldLabel(type, 4, locale);
+			case "hour": return repeatLocalizedFieldLabel(type, 2, locale);
+			case "minute": return repeatLocalizedFieldLabel(type, 2, locale);
 			default: return null;
 		}
 	};
 	const formatPlaceholder = (formatter, sampleDate) => {
-		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type) ?? part.value).join("");
+		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type, formatter.resolvedOptions().locale) ?? part.value.replace(/\s+/gu, "")).join("");
 	};
 	function getDatePlaceholder(locale) {
 		return formatPlaceholder(getDatePlaceholderFormatter(locale), DATE_SAMPLE_DATE_UTC);

package/package.json

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