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

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

@@ -172,6 +172,7 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 	const ui = UIConfig.useConfig();
 	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const { locale } = useLocale();
+	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
 	const [shouldFocus, setShouldFocus] = useState(false);
 	const inputRef = useRef(null);
@@ -218,8 +219,8 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticDateValue = rawValue ? parseCalendarDate(rawValue) : null;
-		const displayValue = staticDateValue ? DateTimeUtils.formatCalendarDateLocalized(staticDateValue, locale) : "";
-		const staticPlaceholder = rawValue ? "" : props.placeholder ?? DateTimeUtils.getDatePlaceholder(locale);
+		const displayValue = staticDateValue ? DateTimeUtils.formatCalendarDateLocalized(staticDateValue, locale, { shouldForceLeadingZeros }) : "";
+		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros });
 		return /* @__PURE__ */ jsx(StaticInput, {
 			...props,
 			onInteract: (focus) => {

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

@@ -548,6 +548,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 	const ui = UIConfig.useConfig();
 	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const { locale } = useLocale$1();
+	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
 	const [shouldFocus, setShouldFocus] = useState(false);
 	const inputRef = useRef(null);
@@ -615,8 +616,9 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const defaultDatePlaceholder = DateTimeUtils.getDatePlaceholder(locale);
-		const staticPlaceholder = !!(rawValue?.start || rawValue?.end) ? "" : props.placeholder ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+		const defaultDatePlaceholder = DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros });
+		const hasProvidedRangeValue = !!(rawValue?.start || rawValue?.end);
+		const staticPlaceholder = props.placeholder ?? /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("span", { children: defaultDatePlaceholder }),
 			/* @__PURE__ */ jsx("span", {
 				className: "pointer-events-none select-none",
@@ -628,7 +630,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			if (!value) return "";
 			const parsedDate = parseCalendarDate(value);
 			if (!parsedDate) return "";
-			return DateTimeUtils.formatCalendarDateLocalized(parsedDate, locale);
+			return DateTimeUtils.formatCalendarDateLocalized(parsedDate, locale, { shouldForceLeadingZeros });
 		};
 		const start = formatStaticDate(rawValue?.start ?? null);
 		const end = formatStaticDate(rawValue?.end ?? null);
@@ -657,7 +659,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			isDisabled,
 			placeholder: staticPlaceholder,
 			displayValue,
-			isEmpty: !hasRangeValue,
+			isEmpty: !hasProvidedRangeValue,
 			dataAttributes: {
 				dataIsEmpty: !hasRangeValue,
 				dataIsFilled: hasRangeValue,

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

@@ -192,6 +192,7 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const { locale } = useLocale();
+	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
 	const [shouldFocus, setShouldFocus] = useState(false);
 	const inputRef = useRef(null);
@@ -231,8 +232,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticDateTimeValue = rawValue ? parseDateValue(rawValue) : null;
-		const displayValue = staticDateTimeValue && "hour" in staticDateTimeValue ? DateTimeUtils.formatCalendarDateTimeLocalized(staticDateTimeValue, locale) : "";
-		const staticPlaceholder = rawValue ? "" : props.placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale);
+		const displayValue = staticDateTimeValue && "hour" in staticDateTimeValue ? DateTimeUtils.formatCalendarDateTimeLocalized(staticDateTimeValue, locale, { shouldForceLeadingZeros }) : "";
+		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale, { shouldForceLeadingZeros });
 		return /* @__PURE__ */ jsx(StaticInput, {
 			...props,
 			onInteract: (focus) => {

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

@@ -179,7 +179,7 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticTimeValue = rawValue ? parseTimeValue(rawValue) : null;
 		const displayValue = staticTimeValue ? DateTimeUtils.formatTimeLocalized(staticTimeValue, locale) : "";
-		const staticPlaceholder = rawValue ? "" : props.placeholder ?? DateTimeUtils.getTimePlaceholder(locale);
+		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getTimePlaceholder(locale);
 		return /* @__PURE__ */ jsx(StaticInput, {
 			...props,
 			onInteract: (focus) => {

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

@@ -177,16 +177,16 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 			isDisabled,
 			className: clsx("group w-full", as === "inline" && "h-full", props.className),
 			inputClassName: props.inputClassName,
-			placeholder: as === "floating" || staticValue ? "" : props.placeholder,
+			placeholder: props.placeholder,
 			displayValue,
 			isEmpty: !hasValue,
 			dataAttributes: {
-				dataIsEmpty: !!!staticValue,
+				dataIsEmpty: !staticValue,
 				dataIsFilled: !(`${staticValue}` === "" || staticValue === null || staticValue === void 0),
 				dataIsDirty: props.isDirty,
 				dataIsRequired: props.isRequired,
-				dataIsDisabled: isDisabled,
-				dataDisabled: isDisabled,
+				dataIsDisabled: props.isDisabled,
+				dataDisabled: props.isDisabled,
 				dataInvalid: !!props.error,
 				dataHasSelection: hasValue
 			},

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

@@ -0,0 +1,38 @@
+import { FocusEvent, Ref } from 'react';
+import { NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { FormFieldProps } from '../../FormField/FormField';
+import { ControlProps } from '../../shared/form.types';
+import { InputVariantProps } from '../../shared/input.cva';
+export interface NumberRangeValue {
+    min: number | null;
+    max: number | null;
+}
+interface NumberRangeInputBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaNumberFieldProps, "className" | "defaultValue" | "label" | "maxValue" | "minValue" | "onBlur" | "onChange" | "value"> {
+    ref?: Ref<HTMLDivElement>;
+    value?: NumberRangeValue | null;
+    minValue?: number | null;
+    maxValue?: number | null;
+    minPlaceholder?: string;
+    maxPlaceholder?: string;
+    minLabel?: string;
+    maxLabel?: string;
+    invalidRangeError?: string;
+    inputClassName?: string;
+    minInputClassName?: string;
+    maxInputClassName?: string;
+    hideInnerLabels?: boolean;
+    isDirty?: boolean;
+    isClearable?: boolean;
+    autoFocusOnMount?: boolean;
+    onChange?: (value: NumberRangeValue) => void;
+    onMinChange?: (value: number | null) => void;
+    onMaxChange?: (value: number | null) => void;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+}
+export type NumberRangeInputProps = NumberRangeInputBaseProps & {
+    renderStaticInput?: boolean;
+};
+export type ControlledNumberRangeInputProps<TFieldValues extends FieldValues> = ControlProps<NumberRangeInputProps, TFieldValues>;
+export declare const NumberRangeInput: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledNumberRangeInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,317 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { inputBase, inputSize } from "../../shared/input.cva.js";
+import { FormField } from "../../FormField/FormField.js";
+import { StaticInput } from "../../shared/StaticInput.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useEffect, useRef, useState } from "react";
+import { Input, useLocale } from "react-aria-components";
+import { useFocusVisible, useFocusWithin, useHover, useNumberField } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller, useWatch } from "react-hook-form";
+import { useNumberFieldState } from "react-stately";
+//#region src/components/inputs/Input/NumberRangeInput/NumberRangeInput.tsx
+var EMPTY_RANGE = {
+	min: null,
+	max: null
+};
+var normalizeRangeValue = (value, minValue, maxValue) => {
+	if (value) return value;
+	return {
+		min: minValue ?? null,
+		max: maxValue ?? null
+	};
+};
+var NumberRangeField = ({ label, value, placeholder, isDisabled, isInvalid, isRequired, formatOptions, hideInnerLabels, autoFocusOnMount, className, onChange, onBlur, ...rest }) => {
+	const ui = UIConfig.useConfig();
+	const { locale } = useLocale();
+	const { isFocusVisible } = useFocusVisible();
+	const inputRef = useRef(null);
+	const numberFieldRef = useRef(null);
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
+	const numberProps = {
+		...rest,
+		label,
+		value: value ?? void 0,
+		placeholder,
+		isDisabled,
+		isInvalid,
+		isRequired,
+		onChange,
+		onBlur: (e) => onBlur?.({ target: e.target }),
+		locale,
+		formatOptions: formatOptions ?? ui.numberInput.formatOptions
+	};
+	const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+			label,
+			labelProps,
+			isRequired,
+			isDisabled,
+			className: clsx(hideInnerLabels && "sr-only")
+		}), /* @__PURE__ */ jsx(Input, {
+			...inputProps,
+			ref: mergeRefs(inputRef, numberFieldRef),
+			placeholder: inputProps.placeholder,
+			className: clsx("w-full bg-transparent outline-none", className),
+			onFocus: (e) => {
+				inputProps.onFocus?.(e);
+				if (isFocusVisible) e.target.select();
+			}
+		})]
+	});
+};
+var NumberRangeInputBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, inputClassName, minInputClassName, maxInputClassName, value, minValue, maxValue, minPlaceholder = "Min", maxPlaceholder = "Max", minLabel = "Minimum", maxLabel = "Maximum", invalidRangeError = "Minimum cannot be greater than maximum", hideInnerLabels = true, isDirty, autoFocusOnMount, onChange, onMinChange, onMaxChange, onBlur, isClearable: isClearableProps, as: asProp, variant: variantProps, size: sizeProps, hideLabel: hideLabelProps, ...rest } = props;
+	const isClearable = isClearableProps ?? ui.input.isClearable;
+	const as = asProp ?? ui.input.as;
+	const variant = variantProps ?? ui.input.variant;
+	const size = sizeProps ?? ui.input.size;
+	const hideLabel = hideLabelProps ?? ui.input.hideLabel;
+	const rangeValue = normalizeRangeValue(value, minValue, maxValue);
+	const isEmpty = rangeValue.min === null && rangeValue.max === null;
+	const rangeError = rangeValue.min !== null && rangeValue.max !== null && rangeValue.min > rangeValue.max ? invalidRangeError : void 0;
+	const effectiveError = error || rangeError;
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const { isFocusVisible } = useFocusVisible();
+	const [isFocused, setIsFocused] = useState(false);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+	const formFieldProps = {
+		error: effectiveError,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName
+	};
+	const updateRange = (side, nextValue) => {
+		const nextRange = {
+			...rangeValue,
+			[side]: nextValue
+		};
+		onChange?.(nextRange);
+		if (side === "min") onMinChange?.(nextValue);
+		else onMaxChange?.(nextValue);
+	};
+	const onClear = () => {
+		const nextRange = { ...EMPTY_RANGE };
+		onChange?.(nextRange);
+		onMinChange?.(null);
+		onMaxChange?.(null);
+		onBlur?.({ target: { value: "" } });
+	};
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error: effectiveError,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			ref,
+			as,
+			className: clsx("group w-full", className),
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx(inputBaseCva({
+					variant,
+					as
+				}), "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", inputClassName),
+				"data-rac": "",
+				"data-hovered": isHovered || void 0,
+				"data-disabled": isDisabled || void 0,
+				"data-invalid": !!effectiveError || void 0,
+				"data-is-empty": isEmpty || void 0,
+				"data-focus-within": isFocused || void 0,
+				"data-focus-visible": isFocused && isFocusVisible || void 0,
+				"data-has-selection": !isEmpty || void 0,
+				"data-is-dirty": isDirty || void 0,
+				"data-is-required": isRequired || void 0,
+				"data-is-filled": !isEmpty || void 0,
+				...focusWithinProps,
+				...hoverProps,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
+						size,
+						as
+					})),
+					children: [
+						as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+							as,
+							...headerProps
+						}),
+						/* @__PURE__ */ jsx(NumberRangeField, {
+							...rest,
+							label: minLabel,
+							placeholder: minPlaceholder,
+							value: rangeValue.min,
+							onChange: (nextValue) => {
+								updateRange("min", nextValue);
+							},
+							onBlur,
+							isDisabled,
+							isInvalid: !!effectiveError,
+							isRequired,
+							hideInnerLabels,
+							autoFocusOnMount,
+							className: minInputClassName
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: clsx("pointer-events-none shrink-0 select-none text-label-2 text-text-default-3", isDisabled && "text-interactive-text-secondary-disabled"),
+							children: "-"
+						}),
+						/* @__PURE__ */ jsx(NumberRangeField, {
+							...rest,
+							label: maxLabel,
+							placeholder: maxPlaceholder,
+							value: rangeValue.max,
+							onChange: (nextValue) => {
+								updateRange("max", nextValue);
+							},
+							onBlur,
+							isDisabled,
+							isInvalid: !!effectiveError,
+							isRequired,
+							hideInnerLabels,
+							className: maxInputClassName
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
+						size,
+						as
+					})),
+					children: isClearable && /* @__PURE__ */ jsx(InputClear, {
+						onClear,
+						show: !isEmpty && !isDisabled
+					})
+				})]
+			})
+		})
+	});
+};
+var NumberRangeInput = ({ renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const { locale } = useLocale();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const [shouldFocus, setShouldFocus] = useState(false);
+	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;
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const staticValue = normalizeRangeValue(watchedValue, props.minValue, props.maxValue);
+		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
+		const formatter = new Intl.NumberFormat(locale, formatOptions);
+		const minDisplay = staticValue.min == null ? null : formatter.format(staticValue.min);
+		const maxDisplay = staticValue.max == null ? null : formatter.format(staticValue.max);
+		const hasValue = minDisplay !== "" || maxDisplay !== "";
+		const displayValue = /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: clsx("w-full bg-transparent outline-none", minDisplay ? props.minInputClassName : "text-text-default-3"),
+				children: minDisplay ?? props.minPlaceholder
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none shrink-0 select-none text-label-2 text-text-default-3",
+				children: "-"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: clsx("w-full bg-transparent outline-none", maxDisplay ? props.maxInputClassName : "text-text-default-3"),
+				children: maxDisplay ?? props.maxPlaceholder
+			})
+		] });
+		const rangeError = staticValue.min !== null && staticValue.max !== null && staticValue.min > staticValue.max ? props.invalidRangeError ?? "Minimum cannot be greater than maximum" : void 0;
+		const effectiveError = props.error || rangeError;
+		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 isClearable = props.isClearable ?? ui.input.isClearable;
+		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			error: effectiveError,
+			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,
+			displayValue,
+			isEmpty: !hasValue,
+			hasClearIcon: !props.isDisabled && isClearable,
+			dataAttributes: {
+				dataIsEmpty: !hasValue,
+				dataIsFilled: hasValue,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!effectiveError,
+				dataHasSelection: hasValue
+			}
+		});
+	}
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(NumberRangeInputBase, {
+				...innerProps,
+				ref,
+				value: field.value ?? EMPTY_RANGE,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message,
+				autoFocusOnMount: shouldFocus
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberRangeInputBase, {
+		...props,
+		autoFocusOnMount: shouldFocus
+	});
+};
+//#endregion
+export { NumberRangeInput };

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

@@ -175,7 +175,7 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 			isDisabled,
 			className: clsx("group w-full", as === "inline" && "h-full", props.className),
 			inputClassName: props.inputClassName,
-			placeholder: as === "floating" ? "" : props.placeholder,
+			placeholder: props.placeholder,
 			displayValue,
 			isEmpty: !hasValue,
 			dataAttributes: {

package/dist/components/inputs/Inputs/InputItem.d.ts

@@ -8,6 +8,7 @@ declare const componentRegistry: {
     readonly toggle: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Toggle/Toggle').ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly checkbox: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Checkbox/Checkbox').ControlledCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly numberInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberInput/NumberInput').ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly numberRangeInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberRangeInput/NumberRangeInput').ControlledNumberRangeInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly slider: <TFieldValues extends import('react-hook-form').FieldValues, IsRange extends boolean = false>(props: import('../Slider/Slider').ControlledSliderProps<TFieldValues, IsRange>) => import("react/jsx-runtime").JSX.Element;
     readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Inputs/InputItem.js

@@ -6,6 +6,7 @@ import { DateRangePicker } from "../DateTime/DateRangePicker/DateRangePicker.js"
 import { DateTimePicker } from "../DateTime/DateTimePicker/DateTimePicker.js";
 import { TimePicker } from "../DateTime/TimePicker/TimePicker.js";
 import { NumberInput } from "../Input/NumberInput/NumberInput.js";
+import { NumberRangeInput } from "../Input/NumberRangeInput/NumberRangeInput.js";
 import { PasswordInput } from "../Input/PasswordInput/PasswordInput.js";
 import { TextArea } from "../Input/TextArea/TextArea.js";
 import { Autocomplete } from "../Selection/Autocomplete/Autocomplete.js";
@@ -21,6 +22,7 @@ var componentRegistry = {
 	toggle: Toggle,
 	checkbox: Checkbox,
 	numberInput: NumberInput,
+	numberRangeInput: NumberRangeInput,
 	slider: Slider,
 	textInput: TextInput,
 	passwordInput: PasswordInput,

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

@@ -84,7 +84,8 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
-			placeholder: as === "floating" || mode === "single" && !isEmpty ? "" : props.placeholder,
+			placeholder: props.placeholder,
+			showPlacholderIfFilled: mode !== "single",
 			displayValue,
 			isEmpty,
 			dataAttributes: {

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

@@ -53,6 +53,7 @@ function Select({ renderStaticInput, ...props }) {
 		const as = props.as ?? ui.input.as;
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
+		const isClearable = props.isClearable ?? ui.input.isClearable;
 		const mode = props.selectionMode ?? ui.select.selectionMode;
 		const { displayValue, isEmpty } = getStaticSelectValue({
 			items: props.items,
@@ -73,6 +74,7 @@ function Select({ renderStaticInput, ...props }) {
 				setRenderInput(true);
 			},
 			as,
+			typographySize: "label-1",
 			size: props.size ?? ui.input.size,
 			variant: props.variant ?? ui.input.variant,
 			isHeaderHidden: props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
@@ -80,7 +82,8 @@ function Select({ renderStaticInput, ...props }) {
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
-			placeholder: as === "floating" || mode === "single" && !isEmpty ? "" : props.placeholder,
+			placeholder: props.placeholder,
+			showPlacholderIfFilled: mode !== "single",
 			displayValue,
 			isEmpty,
 			dataAttributes: {
@@ -95,6 +98,7 @@ function Select({ renderStaticInput, ...props }) {
 				dataHasSearch: false
 			},
 			leadingContent: props.leadingContent,
+			hasClearIcon: isClearable,
 			trailingContent
 		});
 	}

package/dist/components/inputs/Selection/shared/staticSelect.utils.js

@@ -27,7 +27,10 @@ var getStaticSelectValue = ({ items, value, selectionMode, initialSelection, map
 	return {
 		selectedItem,
 		selectedItems,
-		displayValue: selectedItem != null ? showSelectionContent && selectedItem.content ? selectedItem.content : selectedItem.label : "",
+		displayValue: selectedItem != null ? showSelectionContent && selectedItem.content ? selectedItem.content : /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 truncate",
+			children: selectedItem.label
+		}) : "",
 		isEmpty: selectedItem == null
 	};
 };

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

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { FormFieldProps } from '../FormField/FormField';
 import { TextInputProps } from '../Input/TextInput/TextInput';
 import { InputSizeProps, InputVariantProps } from './input.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 type StaticInputDataAttributes = {
     dataDisabled?: boolean;
     dataHasSearch?: boolean;
@@ -16,19 +17,22 @@ type StaticInputDataAttributes = {
 interface StaticInputProps extends FormFieldProps {
     onInteract: (shouldFocus: boolean) => void;
     as?: TextInputProps["as"];
+    typographySize?: TypographyVariantProps["size"];
     size?: InputSizeProps["size"];
     variant?: InputVariantProps["variant"];
     applyMinInputWidth?: boolean;
     placeholder?: ReactNode;
+    showPlacholderIfFilled?: boolean;
     displayValue?: ReactNode;
     isEmpty?: boolean;
     leadingVisual?: ReactNode;
     leadingContent?: ReactNode;
     leadingContentClassName?: string;
+    hasClearIcon?: boolean;
     trailingContent?: ReactNode;
     contentRowClassName?: string;
     inputClassName?: string;
     dataAttributes?: StaticInputDataAttributes;
 }
-export declare const StaticInput: ({ onInteract, as, size, variant, applyMinInputWidth, placeholder, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StaticInput: ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, hasClearIcon, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,18 +1,21 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.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, applyMinInputWidth, placeholder, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }) => {
+var StaticInput = ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled = false, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, hasClearIcon, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
 	let hasValue = !!displayValue;
 	if (isEmpty != null) hasValue = !isEmpty;
 	let staticDisplayContent = placeholder;
 	if (hasValue) staticDisplayContent = displayValue;
 	else if (as === "floating") staticDisplayContent = null;
+	const shouldRenderPlaceholderAfterValue = showPlacholderIfFilled && placeholder && hasValue;
 	const shouldRenderFloatingLineSpacer = as === "floating" && !hasValue;
 	const inputDataAttributes = {
 		dataIsEmpty: !hasValue,
@@ -45,42 +48,55 @@ var StaticInput = ({ onInteract, as, size, variant, applyMinInputWidth, placehol
 			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
-			}), !hasValue && "text-text-default-3", inputClassName),
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: clsx("group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
-					size,
-					as
-				}), contentRowClassName),
-				children: [
-					leadingVisual && /* @__PURE__ */ jsx("div", {
-						className: "pointer-events-none shrink-0",
-						children: leadingVisual
-					}),
-					as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
-						as,
+			}), inputClassName),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: clsx("group/input-content flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
 						size,
-						label: formFieldProps.label,
-						isRequired: formFieldProps.isRequired,
-						isDisabled: formFieldProps.isDisabled
-					}),
-					leadingContent && /* @__PURE__ */ jsx("div", {
-						className: clsx("ml-input-side-default flex shrink-0 items-center", leadingContentClassName),
-						children: leadingContent
-					}),
-					staticDisplayContent,
-					shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }),
-					placeholder && hasValue && /* @__PURE__ */ jsx("div", {
-						className: "text-text-default-3",
-						children: placeholder
-					})
-				]
-			}), 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: trailingContent
-			})]
+						as
+					}), typographySize && typographyCva({ size: typographySize }), 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: clsx("ml-input-side-default flex shrink-0 items-center", leadingContentClassName),
+							children: leadingContent
+						}),
+						!hasValue ? /* @__PURE__ */ jsx("div", {
+							className: "text-text-default-3",
+							children: staticDisplayContent
+						}) : staticDisplayContent,
+						shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }),
+						shouldRenderPlaceholderAfterValue && /* @__PURE__ */ jsx("div", {
+							className: "shrink-0 text-text-default-3",
+							children: placeholder
+						})
+					]
+				}),
+				hasClearIcon && /* @__PURE__ */ jsx("div", {
+					className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
+						size,
+						as
+					})),
+					children: /* @__PURE__ */ jsx("div", { className: "size-6 shrink-0" })
+				}),
+				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: trailingContent
+				})
+			]
 		})
 	});
 };

package/dist/index.d.ts

@@ -78,6 +78,8 @@ export type { FormFieldProps } from './components/inputs/FormField/FormField';
 export { FormField } from './components/inputs/FormField/FormField';
 export type { ControlledNumberInputProps, NumberInputProps } from './components/inputs/Input/NumberInput/NumberInput';
 export { NumberInput } from './components/inputs/Input/NumberInput/NumberInput';
+export type { ControlledNumberRangeInputProps, NumberRangeInputProps, NumberRangeValue, } from './components/inputs/Input/NumberRangeInput/NumberRangeInput';
+export { NumberRangeInput } from './components/inputs/Input/NumberRangeInput/NumberRangeInput';
 export type { ControlledPasswordInputProps, PasswordInputProps, } from './components/inputs/Input/PasswordInput/PasswordInput';
 export { PasswordInput } from './components/inputs/Input/PasswordInput/PasswordInput';
 export type { ControlledTextAreaProps, TextAreaProps } from './components/inputs/Input/TextArea/TextArea';

package/dist/index.js

@@ -85,6 +85,7 @@ import { FileUpload } from "./components/inputs/File/FileUpload.js";
 import { FileUploadContainer } from "./components/inputs/File/FileUploadContainer.js";
 import { InputUpload } from "./components/inputs/File/InputUpload.js";
 import { NumberInput } from "./components/inputs/Input/NumberInput/NumberInput.js";
+import { NumberRangeInput } from "./components/inputs/Input/NumberRangeInput/NumberRangeInput.js";
 import { PasswordInput } from "./components/inputs/Input/PasswordInput/PasswordInput.js";
 import { TextArea } from "./components/inputs/Input/TextArea/TextArea.js";
 import { Autocomplete } from "./components/inputs/Selection/Autocomplete/Autocomplete.js";
@@ -136,4 +137,4 @@ import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
 import { ArrayUtils } from "./utils/array.utils.js";
 import { QueriesUtils } from "./utils/queries.utils.js";
 import { RoutingUtils } from "./utils/routing.utils.js";
-export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, QuerySelect, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };
+export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberRangeInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, QuerySelect, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };

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

@@ -1,24 +1,28 @@
 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: {
+    interface LocalizedDateFormatOptions {
+        shouldForceLeadingZeros?: boolean;
+    }
+    export function getDatePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function getTimePlaceholder(locale?: string): string;
+    export function getDateTimePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function getDateRangePlaceholder(locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function formatCalendarDateLocalized(calendarDate: CalendarDate, locale?: string, options?: LocalizedDateFormatOptions): string;
+    export 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;
-    function fromDateValueToLocal(dateValue: DateValue): Date;
-    function fromCalendarDateToUTCISO(calendarDate: CalendarDate, options?: {
+    export function formatCalendarDateTimeLocalized(calendarDateTime: Pick<CalendarDateTime, "day" | "month" | "year" | "hour" | "minute">, locale?: string, options?: LocalizedDateFormatOptions): string;
+    export function fromISOtoZonedDateTime(isoString: string): ZonedDateTime;
+    export function fromDateValueToISO(dateValue: DateValue): string;
+    export function fromLocalToZonedDateTime(date: Date): ZonedDateTime;
+    export function fromDateValueToLocal(dateValue: DateValue): Date;
+    export function fromCalendarDateToUTCISO(calendarDate: CalendarDate, options?: {
         endOfDay?: boolean;
     }): string;
-    function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
-    function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
-    function fromUTCISOToCalendarDateTime(isoString: string): CalendarDateTime;
-    function formatTextDateToCalendarDateTime(textDate: string | null): CalendarDateTime | null;
+    export function fromUTCISOToCalendarDate(isoString: string): CalendarDate;
+    export function fromCalendarDateTimeToUTCISO(calendarDateTime: CalendarDateTime): string;
+    export function fromUTCISOToCalendarDateTime(isoString: string): CalendarDateTime;
+    export function formatTextDateToCalendarDateTime(textDate: string | null): CalendarDateTime | null;
+    export {};
 }

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

@@ -4,9 +4,10 @@ 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",
+	const getDayMonthFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
+	const getDatePlaceholderFormatter = (locale, options) => new Intl.DateTimeFormat(locale, {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric"
 	});
 	const getTimePlaceholderFormatter = (locale) => new Intl.DateTimeFormat(locale, {
@@ -18,9 +19,9 @@ var DateTimeUtils;
 		if (locale) return locale;
 		return new Intl.DateTimeFormat().resolvedOptions().locale;
 	};
-	const getDateFormatter = (locale) => new DateFormatter(getResolvedLocale(locale), {
-		day: "2-digit",
-		month: "2-digit",
+	const getDateFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric",
 		timeZone: "UTC"
 	});
@@ -30,9 +31,9 @@ var DateTimeUtils;
 		hourCycle: "h23",
 		timeZone: "UTC"
 	});
-	const getDateTimeFormatter = (locale) => new DateFormatter(getResolvedLocale(locale), {
-		day: "2-digit",
-		month: "2-digit",
+	const getDateTimeFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
+		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
+		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric",
 		hour: "2-digit",
 		minute: "2-digit",
@@ -57,25 +58,34 @@ var DateTimeUtils;
 	const formatPlaceholder = (formatter, sampleDate) => {
 		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);
+	const removeLeadingZero = (value) => value.replace(/^0+(?=\d)/u, "");
+	const removeDateSeparatorSpacing = (value) => value.replace(/([./-])\s+(?=\d)/gu, "$1");
+	const formatLocalizedDateParts = (formatter, date, options) => {
+		if (options?.shouldForceLeadingZeros !== false) return removeDateSeparatorSpacing(formatter.format(date));
+		return removeDateSeparatorSpacing(formatter.formatToParts(date).map((part) => {
+			if (part.type === "day" || part.type === "month") return removeLeadingZero(part.value);
+			return part.value;
+		}).join(""));
+	};
+	function getDatePlaceholder(locale, options) {
+		return formatPlaceholder(getDatePlaceholderFormatter(locale, options), 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)}`;
+	function getDateTimePlaceholder(locale, options) {
+		return `${getDatePlaceholder(locale, options)}, ${getTimePlaceholder(locale)}`;
 	}
 	_DateTimeUtils.getDateTimePlaceholder = getDateTimePlaceholder;
-	function getDateRangePlaceholder(locale) {
-		const datePlaceholder = getDatePlaceholder(locale);
+	function getDateRangePlaceholder(locale, options) {
+		const datePlaceholder = getDatePlaceholder(locale, options);
 		return `${datePlaceholder} – ${datePlaceholder}`;
 	}
 	_DateTimeUtils.getDateRangePlaceholder = getDateRangePlaceholder;
-	function formatCalendarDateLocalized(calendarDate, locale) {
-		return getDateFormatter(locale).format(calendarDate.toDate("UTC"));
+	function formatCalendarDateLocalized(calendarDate, locale, options) {
+		return formatLocalizedDateParts(getDateFormatter(locale, options), calendarDate.toDate("UTC"), options);
 	}
 	_DateTimeUtils.formatCalendarDateLocalized = formatCalendarDateLocalized;
 	function formatTimeLocalized(timeValue, locale) {
@@ -83,9 +93,9 @@ var DateTimeUtils;
 		return getTimeFormatter(locale).format(dateTime.toDate("UTC"));
 	}
 	_DateTimeUtils.formatTimeLocalized = formatTimeLocalized;
-	function formatCalendarDateTimeLocalized(calendarDateTime, locale) {
+	function formatCalendarDateTimeLocalized(calendarDateTime, locale, options) {
 		const normalizedValue = new CalendarDateTime(calendarDateTime.year, calendarDateTime.month, calendarDateTime.day, calendarDateTime.hour, calendarDateTime.minute);
-		return getDateTimeFormatter(locale).format(normalizedValue.toDate("UTC"));
+		return formatLocalizedDateParts(getDateTimeFormatter(locale, options), normalizedValue.toDate("UTC"), options);
 	}
 	_DateTimeUtils.formatCalendarDateTimeLocalized = formatCalendarDateTimeLocalized;
 	function fromISOtoZonedDateTime(isoString) {

package/package.json

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