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

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

@@ -212,9 +212,6 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 		const dateValue = rawValue ? parseCalendarDate(rawValue) : null;
 		const as = props.as ?? ui.input.as;
 		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
@@ -230,8 +227,6 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			isHeaderHidden,
-			hideLabel,
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
@@ -252,9 +247,6 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 				setShouldFocus(focus);
 				setRenderInput(true);
 			},
-			as,
-			size,
-			variant,
 			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments

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

@@ -612,9 +612,6 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		const hasProvidedRangeValue = !!(rawValue?.start || rawValue?.end);
 		const as = props.as ?? ui.input.as;
 		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
@@ -631,8 +628,6 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			isHeaderHidden,
-			hideLabel,
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
@@ -653,9 +648,6 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 				setShouldFocus(focus);
 				setRenderInput(true);
 			},
-			as,
-			size,
-			variant,
 			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments

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

@@ -226,9 +226,6 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		const dateTimeValue = rawValue ? parseDateValue(rawValue) : null;
 		const as = props.as ?? ui.input.as;
 		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
@@ -244,8 +241,6 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			isHeaderHidden,
-			hideLabel,
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
@@ -266,9 +261,6 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 				setShouldFocus(focus);
 				setRenderInput(true);
 			},
-			as,
-			size,
-			variant,
 			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
 			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,
 			children: staticSegments

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

@@ -171,10 +171,6 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 	if (!renderInput) {
 		const timeValue = rawValue ? parseTimeValue(rawValue) : null;
 		const as = props.as ?? ui.input.as;
-		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
@@ -187,8 +183,6 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			isHeaderHidden,
-			hideLabel,
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
@@ -208,9 +202,6 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 				setShouldFocus(focus);
 				setRenderInput(true);
 			},
-			as,
-			size,
-			variant,
 			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0,
 			children: staticSegments
 		});

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

@@ -143,10 +143,6 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 		const displayValue = getStaticNumberDisplayValue(staticValue, new Intl.NumberFormat(locale, formatOptions)) ?? "";
 		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 dataAttributes = {
@@ -161,8 +157,6 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 		};
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			isHeaderHidden,
-			hideLabel,
 			isDisabled,
 			className: clsx("group w-full", as === "inline" && "h-full", props.className),
 			dataAttributes,
@@ -172,9 +166,6 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 				setRenderInput(true);
 			},
 			inputClassName: props.inputClassName,
-			as,
-			size,
-			variant,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				readOnly: true,

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

@@ -0,0 +1,45 @@
+import { FocusEvent, HTMLAttributes, Ref } from 'react';
+import { NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
+import { FormFieldProps } from '../../FormField/FormField';
+import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
+import { InputVariantProps } from '../../shared/input.cva';
+export interface NumberRangeValue {
+    min: number | null;
+    max: number | null;
+}
+type NumberRangeFieldInputProps = Omit<AriaNumberFieldProps, "className" | "defaultValue" | "label" | "maxValue" | "minValue" | "onBlur" | "onChange" | "value">;
+export interface NumberRangeFieldProps extends NumberRangeFieldInputProps {
+    ref?: Ref<HTMLDivElement>;
+    as: InputVariantProps["as"];
+    className?: string;
+    inputClassName?: string;
+    minInputClassName?: string;
+    maxInputClassName?: string;
+    inputBaseClassName: string;
+    inputSizeClassName: string;
+    formFieldProps: FormFieldProps;
+    headerProps: FormFieldHeaderProps;
+    rangeValue: NumberRangeValue;
+    effectiveError?: string;
+    minPlaceholder: string;
+    maxPlaceholder: string;
+    minLabel: string;
+    maxLabel: string;
+    hideInnerLabels?: boolean;
+    isDirty?: boolean;
+    isClearable?: boolean;
+    autoFocusOnMount?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isEmpty: boolean;
+    isHovered: boolean;
+    isFocused: boolean;
+    isFocusVisible: boolean;
+    focusWithinProps: HTMLAttributes<HTMLElement>;
+    hoverProps: HTMLAttributes<HTMLElement>;
+    onRangeSideChange: (side: keyof NumberRangeValue, nextValue: number | null) => void;
+    onRangeSideClear: (side: keyof NumberRangeValue) => void;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+}
+export declare const NumberRangeField: ({ ref, as, className, inputClassName, minInputClassName, maxInputClassName, inputBaseClassName, inputSizeClassName, formFieldProps, headerProps, rangeValue, effectiveError, minPlaceholder, maxPlaceholder, minLabel, maxLabel, hideInnerLabels, isDirty, isClearable, autoFocusOnMount, isDisabled, isRequired, isEmpty, isHovered, isFocused, isFocusVisible, focusWithinProps, hoverProps, onRangeSideChange, onRangeSideClear, onBlur, ...numberFieldProps }: NumberRangeFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,146 @@
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useEffect, useRef } from "react";
+import { Input, useLocale } from "react-aria-components";
+import { useFocusVisible, useNumberField } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { useNumberFieldState } from "react-stately";
+//#region src/components/inputs/Input/NumberRangeInput/NumberRangeField.tsx
+var NumberRangeValueField = ({ label, value, placeholder, isDisabled, isInvalid, isRequired, formatOptions, hideInnerLabels, autoFocusOnMount, isClearable, className, onChange, onClear, 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 ?? NaN,
+		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__ */ jsxs("div", {
+			className: "flex items-center gap-input-gap-trailing-elements",
+			children: [/* @__PURE__ */ jsx(Input, {
+				...inputProps,
+				ref: mergeRefs(inputRef, numberFieldRef),
+				placeholder: inputProps.placeholder,
+				className: clsx("w-full min-w-0 bg-transparent outline-none", className),
+				onFocus: (e) => {
+					inputProps.onFocus?.(e);
+					if (isFocusVisible) e.target.select();
+				}
+			}), isClearable && /* @__PURE__ */ jsx(InputClear, {
+				onClear,
+				show: value !== null && !isDisabled
+			})]
+		})]
+	});
+};
+var NumberRangeField = ({ ref, as, className, inputClassName, minInputClassName, maxInputClassName, inputBaseClassName, inputSizeClassName, formFieldProps, headerProps, rangeValue, effectiveError, minPlaceholder, maxPlaceholder, minLabel, maxLabel, hideInnerLabels, isDirty, isClearable, autoFocusOnMount, isDisabled, isRequired, isEmpty, isHovered, isFocused, isFocusVisible, focusWithinProps, hoverProps, onRangeSideChange, onRangeSideClear, onBlur, ...numberFieldProps }) => /* @__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__ */ jsx("div", {
+			className: clsx(inputBaseClassName, "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-is-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!", inputSizeClassName),
+				children: [
+					as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+						as,
+						...headerProps
+					}),
+					/* @__PURE__ */ jsx(NumberRangeValueField, {
+						...numberFieldProps,
+						label: minLabel,
+						placeholder: minPlaceholder,
+						value: rangeValue.min,
+						onChange: (nextValue) => {
+							onRangeSideChange("min", nextValue);
+						},
+						onBlur,
+						isDisabled,
+						isInvalid: !!effectiveError,
+						isRequired,
+						hideInnerLabels,
+						autoFocusOnMount,
+						isClearable,
+						onClear: () => {
+							onRangeSideClear("min");
+						},
+						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(NumberRangeValueField, {
+						...numberFieldProps,
+						label: maxLabel,
+						placeholder: maxPlaceholder,
+						value: rangeValue.max,
+						onChange: (nextValue) => {
+							onRangeSideChange("max", nextValue);
+						},
+						onBlur,
+						isDisabled,
+						isInvalid: !!effectiveError,
+						isRequired,
+						hideInnerLabels,
+						isClearable,
+						onClear: () => {
+							onRangeSideClear("max");
+						},
+						className: maxInputClassName
+					})
+				]
+			})
+		})
+	})
+});
+//#endregion
+export { NumberRangeField };

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

@@ -2,12 +2,10 @@ 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 { NumberRangeValue } from './NumberRangeField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
-export interface NumberRangeValue {
-    min: number | null;
-    max: number | null;
-}
+export type { NumberRangeValue } from './NumberRangeField';
 interface NumberRangeInputBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaNumberFieldProps, "className" | "defaultValue" | "label" | "maxValue" | "minValue" | "onBlur" | "onChange" | "value"> {
     ref?: Ref<HTMLDivElement>;
     value?: NumberRangeValue | null;
@@ -35,4 +33,3 @@ export type NumberRangeInputProps = NumberRangeInputBaseProps & {
 };
 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

@@ -1,20 +1,16 @@
 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 { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { getStaticNumberDisplayValue } from "../shared/numberStatic.utils.js";
-import { StaticInput } from "../../shared/StaticInput.js";
+import { NumberRangeField } from "./NumberRangeField.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 { useEffect, useState } from "react";
+import { useLocale } from "react-aria-components";
+import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 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,
@@ -27,56 +23,6 @@ var normalizeRangeValue = (value, minValue, maxValue) => {
 		max: maxValue ?? null
 	};
 };
-var NumberRangeField = ({ label, value, placeholder, isDisabled, isInvalid, isRequired, formatOptions, hideInnerLabels, autoFocusOnMount, isClearable, className, onChange, onClear, 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 ?? NaN,
-		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__ */ jsxs("div", {
-			className: "flex items-center gap-input-gap-trailing-elements",
-			children: [/* @__PURE__ */ jsx(Input, {
-				...inputProps,
-				ref: mergeRefs(inputRef, numberFieldRef),
-				placeholder: inputProps.placeholder,
-				className: clsx("w-full min-w-0 bg-transparent outline-none", className),
-				onFocus: (e) => {
-					inputProps.onFocus?.(e);
-					if (isFocusVisible) e.target.select();
-				}
-			}), isClearable && /* @__PURE__ */ jsx(InputClear, {
-				onClear,
-				show: value !== null && !isDisabled
-			})]
-		})]
-	});
-};
 var NumberRangeInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
@@ -131,92 +77,45 @@ var NumberRangeInputBase = (props) => {
 		updateRange(side, null);
 		onBlur?.({ target: { value: "" } });
 	};
-	return /* @__PURE__ */ jsx(TooltipWrapper, {
+	return /* @__PURE__ */ jsx(NumberRangeField, {
+		...rest,
+		ref,
 		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__ */ jsx("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-is-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,
-							isClearable,
-							onClear: () => {
-								clearRangeSide("min");
-							},
-							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,
-							isClearable,
-							onClear: () => {
-								clearRangeSide("max");
-							},
-							className: maxInputClassName
-						})
-					]
-				})
-			})
-		})
+		className,
+		inputClassName,
+		minInputClassName,
+		maxInputClassName,
+		inputBaseClassName: inputBaseCva({
+			variant,
+			as
+		}),
+		inputSizeClassName: inputSizeCva({
+			size,
+			as
+		}),
+		formFieldProps,
+		headerProps,
+		rangeValue,
+		effectiveError,
+		minPlaceholder,
+		maxPlaceholder,
+		minLabel,
+		maxLabel,
+		hideInnerLabels,
+		isDirty,
+		isClearable,
+		autoFocusOnMount,
+		isDisabled,
+		isRequired,
+		isEmpty,
+		isHovered,
+		isFocused,
+		isFocusVisible,
+		focusWithinProps,
+		hoverProps,
+		onRangeSideChange: updateRange,
+		onRangeSideClear: clearRangeSide,
+		onBlur
 	});
 };
 var NumberRangeInput = ({ renderStaticInput, ...props }) => {
@@ -241,55 +140,70 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 		const minDisplay = getStaticNumberDisplayValue(staticValue.min, formatter);
 		const maxDisplay = getStaticNumberDisplayValue(staticValue.max, formatter);
 		const hasValue = minDisplay !== null || maxDisplay !== null;
-		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 ?? "Min"
-			}),
-			/* @__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 ?? "Max"
-			})
-		] });
 		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 isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
-		return /* @__PURE__ */ jsx(StaticInput, {
+		const isClearable = props.isClearable ?? ui.input.isClearable;
+		const dataAttributes = {
+			dataIsEmpty: !hasValue,
+			dataIsFilled: hasValue,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!effectiveError,
+			dataHasSelection: hasValue
+		};
+		return /* @__PURE__ */ jsx(InputFrame, {
 			...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,
-			dataAttributes: {
-				dataIsEmpty: !hasValue,
-				dataIsFilled: hasValue,
-				dataIsDirty: props.isDirty,
-				dataIsRequired: props.isRequired,
-				dataIsDisabled: isDisabled,
-				dataDisabled: isDisabled,
-				dataInvalid: !!effectiveError,
-				dataHasSelection: hasValue
-			}
+			contentWrapperClassName: "flex w-full items-center gap-input-gap-input-text-to-elements",
+			dataAttributes,
+			renderStatic: true,
+			onStaticInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			isClearable: false,
+			children: (dataAttributeProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("input", {
+					readOnly: true,
+					disabled: isDisabled,
+					tabIndex: -1,
+					value: minDisplay ?? "",
+					placeholder: props.minPlaceholder ?? "Min",
+					className: clsx("w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.minInputClassName),
+					...dataAttributeProps,
+					"data-rac": true
+				}),
+				isClearable && /* @__PURE__ */ jsx(InputClear, {
+					onClear: () => {},
+					renderStatic: true
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none shrink-0 select-none text-label-2 text-text-default-3",
+					children: "-"
+				}),
+				/* @__PURE__ */ jsx("input", {
+					readOnly: true,
+					disabled: isDisabled,
+					tabIndex: -1,
+					value: maxDisplay ?? "",
+					placeholder: props.maxPlaceholder ?? "Max",
+					className: clsx("w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.maxInputClassName),
+					...dataAttributeProps,
+					"data-rac": true
+				}),
+				isClearable && /* @__PURE__ */ jsx(InputClear, {
+					onClear: () => {},
+					renderStatic: true
+				})
+			] })
 		});
 	}
 	if ("formControl" in props && props.formControl) {

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

@@ -137,10 +137,6 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 	}, [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;
@@ -158,8 +154,6 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 		};
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			isHeaderHidden,
-			hideLabel,
 			isDisabled,
 			className: clsx("group w-full", as === "inline" && "h-full", props.className),
 			dataAttributes,
@@ -169,9 +163,6 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 				setRenderInput(true);
 			},
 			inputClassName: props.inputClassName,
-			as,
-			size,
-			variant,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				type: inputType === "hidden" ? "password" : inputType,

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

@@ -87,8 +87,6 @@ function Autocomplete({ renderStaticInput, ...props }) {
 		};
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			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),
@@ -100,9 +98,6 @@ function Autocomplete({ renderStaticInput, ...props }) {
 				setShouldFocus(focus);
 				setRenderInput(true);
 			},
-			as,
-			size: props.size ?? ui.input.size,
-			variant: props.variant ?? ui.input.variant,
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
 				children: props.leadingContent

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

@@ -53,7 +53,6 @@ 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 isMultiple = mode === "multiple";
 		const { selectedItem, displayValue, isEmpty } = getStaticSelectValue({
@@ -89,8 +88,6 @@ function Select({ renderStaticInput, ...props }) {
 		}) : displayValue;
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			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),
@@ -102,14 +99,10 @@ function Select({ renderStaticInput, ...props }) {
 				setShouldFocus(focus);
 				setRenderInput(true);
 			},
-			as,
-			size: props.size ?? ui.input.size,
-			variant: props.variant ?? ui.input.variant,
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
 				children: props.leadingContent
 			}),
-			isClearable,
 			showClear: false,
 			trailingContent,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsxs(Fragment, { children: [isMultiple && !isEmpty && displayValue, isSearchable ? /* @__PURE__ */ jsx("input", {

package/dist/components/inputs/Skeleton/InputFrame.d.ts

@@ -64,5 +64,5 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     labelPlacement?: InputFrameLabelPlacement;
     trailingClassName?: string;
 }
-export declare const InputFrame: ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, labelPlacement, trailingClassName, variant, as, size, }: InputFrameProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputFrame: (props: InputFrameProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Skeleton/InputFrame.js

@@ -1,6 +1,7 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { typography } from "../../text/Typography/typography.cva.js";
 import { Loader } from "../../status/Loader/Loader.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";
@@ -11,12 +12,18 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
 //#region src/components/inputs/Skeleton/InputFrame.tsx
-var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, labelPlacement = "content-wrapper", trailingClassName, variant, as, size }) => {
+var InputFrame = (props) => {
+	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
 	const typographyCva = UIStyle.useCva("typography.cva", typography);
-	const hasClear = !!isClearable;
+	const { ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, labelPlacement = "content-wrapper", trailingClassName, variant: variantProp, as: asProp, size: sizeProp } = props;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const variant = variantProp ?? ui.input.variant;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const hasClear = !!(isClearableProp ?? ui.input.isClearable);
 	const isLeadingIconElement = leadingIcon && isValidElement(leadingIcon);
 	const isTrailingIconElement = trailingIcon && isValidElement(trailingIcon);
 	const hasTrailingContent = hasClear || !!trailingContent || !!unit || !!isLoading || !!action || !!trailingIcon || !!trailingAction;

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

@@ -6,8 +6,8 @@ import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
 var InputClear = ({ onClear, className, style, show, renderStatic }) => {
-	if (renderStatic) return /* @__PURE__ */ jsx("div", {
-		className: clsx("size-6 shrink-0", className),
+	if (renderStatic) return /* @__PURE__ */ jsx("button", {
+		className: clsx("invisible relative z-1 flex items-center size-6 shrink-0", "group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
 		style
 	});
 	return /* @__PURE__ */ jsx(InputClearButton, {

package/package.json

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

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

@@ -1,104 +0,0 @@
-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, 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,
-		dataDisabled: formFieldProps.isDisabled,
-		dataIsDisabled: formFieldProps.isDisabled,
-		dataHasSelection: hasValue,
-		...dataAttributes
-	};
-	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": inputDataAttributes.dataIsEmpty || void 0,
-			"data-disabled": inputDataAttributes.dataDisabled || void 0,
-			"data-is-disabled": inputDataAttributes.dataIsDisabled || void 0,
-			"data-has-selection": inputDataAttributes.dataHasSelection || void 0,
-			"data-has-search": inputDataAttributes.dataHasSearch || void 0,
-			"data-invalid": inputDataAttributes.dataInvalid || void 0,
-			"data-is-dirty": inputDataAttributes.dataIsDirty || void 0,
-			"data-is-filled": inputDataAttributes.dataIsFilled || void 0,
-			"data-is-required": inputDataAttributes.dataIsRequired || void 0,
-			"data-rac": "",
-			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("group/input-content flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
-						size,
-						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
-				})
-			]
-		})
-	});
-};
-//#endregion
-export { StaticInput };