@povio/ui 2.2.11 → 2.3.0-rc.1

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

@@ -13,8 +13,11 @@ interface NumberInputBaseProps extends FormFieldProps, InputVariantProps, Omit<I
     value?: number | null;
     onChange?: (value: number | null) => void;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    autoFocusOnMount?: boolean;
 }
-export type NumberInputProps = NumberInputBaseProps;
+export type NumberInputProps = NumberInputBaseProps & {
+    renderStaticInput?: boolean;
+};
 export type ControlledNumberInputProps<TFieldValues extends FieldValues> = ControlProps<NumberInputProps, TFieldValues>;
-export declare const NumberInput: <TFieldValues extends FieldValues>(props: ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberInput: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,21 +3,24 @@ import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { inputBase } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
+import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
 import { InputContent } from "../shared/InputContent.js";
+import { getStaticNumberDisplayValue } from "../shared/numberStatic.utils.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Input, useLocale } from "react-aria-components";
 import { useFocusVisible, useNumberField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 import { useNumberFieldState } from "react-stately";
 //#region src/components/inputs/Input/NumberInput/NumberInput.tsx
 var NumberInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputRef = useRef(null);
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
 	const numberFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { locale } = useLocale();
@@ -34,6 +37,10 @@ var NumberInputBase = (props) => {
 		formatOptions
 	};
 	const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
 	const formFieldProps = {
 		error,
 		label,
@@ -90,6 +97,8 @@ var NumberInputBase = (props) => {
 					...rest
 				}), inputClassName),
 				onClick: () => inputRef.current?.focus(),
+				"data-is-empty": value === null || value === void 0 || void 0,
+				"data-is-required": isRequired || void 0,
 				children: /* @__PURE__ */ jsx(InputContent, {
 					...inputContentProps,
 					headerProps,
@@ -101,6 +110,7 @@ var NumberInputBase = (props) => {
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-empty": value === null || value === void 0 || void 0,
+						"data-is-filled": !("" + value === "" || value === null || value === void 0) || void 0,
 						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
 						className: "w-full outline-none",
 						onFocus: (e) => {
@@ -113,7 +123,66 @@ var NumberInputBase = (props) => {
 		})
 	});
 };
-var NumberInput = (props) => {
+var NumberInput = ({ renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const { locale } = useLocale();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const inputRef = useRef(null);
+	const { shouldFocus, renderRealInput, replayStaticInputChange } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput
+	});
+	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;
+	if (!renderInput) {
+		const staticValue = watchedValue ?? props.value ?? props.defaultValue;
+		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
+		const displayValue = getStaticNumberDisplayValue(staticValue, new Intl.NumberFormat(locale, formatOptions)) ?? "";
+		const hasValue = displayValue !== "";
+		const as = props.as ?? ui.input.as;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const dataAttributes = {
+			dataIsEmpty: !hasValue,
+			dataIsFilled: hasValue,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!props.error,
+			dataHasSelection: hasValue
+		};
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			isDisabled,
+			className: clsx("group w-full", as === "inline" && "h-full", props.className),
+			dataAttributes,
+			renderStatic: true,
+			onStaticInteract: renderRealInput,
+			inputClassName: props.inputClassName,
+			contentClassName: "pr-0!",
+			trailingClassName: "py-0! pl-0!",
+			wrapContentAndTrailing: true,
+			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
+				type: "text",
+				ref: inputRef,
+				disabled: isDisabled,
+				inputMode: "numeric",
+				tabIndex: -1,
+				value: displayValue,
+				placeholder: as === "floating" ? "" : props.placeholder,
+				className: "w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
+				onChange: (event) => replayStaticInputChange(event.target.value),
+				...dataAttributeProps,
+				"data-rac": true
+			})
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -121,17 +190,22 @@ var NumberInput = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(NumberInputBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
+				error: props.error ?? error?.message,
+				autoFocusOnMount: shouldFocus
 			}, field.value === null || field.value === void 0 ? "empty" : "filled")
 		});
 	}
-	return /* @__PURE__ */ jsx(NumberInputBase, { ...props }, props.value === null || props.value === void 0 ? "empty" : "filled");
+	return /* @__PURE__ */ jsx(NumberInputBase, {
+		...props,
+		ref: mergeRefs(props.ref, inputRef),
+		autoFocusOnMount: shouldFocus
+	}, props.value === null || props.value === void 0 ? "empty" : "filled");
 };
 //#endregion
 export { NumberInput };

package/dist/components/inputs/Input/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

@@ -0,0 +1,35 @@
+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 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;
+    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;

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

@@ -0,0 +1,235 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { inputBase, inputSize } from "../../shared/input.cva.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
+import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
+import { getStaticNumberDisplayValue } from "../shared/numberStatic.utils.js";
+import { NumberRangeField } from "./NumberRangeField.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useRef, useState } from "react";
+import { useLocale } from "react-aria-components";
+import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
+import { Controller, useWatch } from "react-hook-form";
+//#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 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 clearRangeSide = (side) => {
+		updateRange(side, null);
+		onBlur?.({ target: { value: "" } });
+	};
+	return /* @__PURE__ */ jsx(NumberRangeField, {
+		...rest,
+		ref,
+		as,
+		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 }) => {
+	const ui = UIConfig.useConfig();
+	const { locale } = useLocale();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const { shouldFocus, renderRealInput } = useStaticInputHandoff({
+		inputRef: useRef(null),
+		renderInput,
+		setRenderInput
+	});
+	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;
+	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 = getStaticNumberDisplayValue(staticValue.min, formatter);
+		const maxDisplay = getStaticNumberDisplayValue(staticValue.max, formatter);
+		const hasValue = minDisplay !== null || maxDisplay !== null;
+		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;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		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,
+			isDisabled,
+			className: clsx("group w-full", as === "inline" && "h-full", props.className),
+			inputClassName: props.inputClassName,
+			contentClassName: "pr-0!",
+			trailingClassName: "py-0! pl-0!",
+			contentWrapperClassName: "flex w-full items-center gap-input-gap-input-text-to-elements",
+			dataAttributes,
+			renderStatic: true,
+			onStaticInteract: renderRealInput,
+			isClearable: false,
+			labelPlacement: "content-row",
+			children: ({ id, ...dataAttributeProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("input", {
+					id,
+					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", {
+					id: `${id}-max`,
+					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) {
+		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/TextArea/TextArea.cva.d.ts

@@ -0,0 +1,4 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const textAreaWrapper: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface TextAreaWrapperVariantProps extends VariantProps<typeof textAreaWrapper> {
+}

package/dist/components/inputs/Input/TextArea/TextArea.cva.js

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/Input/TextArea/TextArea.cva.ts
+var textAreaWrapper = cva("group/text-area relative h-full");
+//#endregion
+export { textAreaWrapper };

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

@@ -5,6 +5,7 @@ import { InputClear } from "../../shared/InputClear.js";
 import { inputSide, inputSize, useInputCva } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { textAreaWrapper } from "./TextArea.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef } from "react";
@@ -18,6 +19,7 @@ var TextAreaBase = (props) => {
 	const inputCva = useInputCva();
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputSideCva = UIStyle.useCva("input.sideCva", inputSide);
+	const textAreaWrapperCva = UIStyle.useCva("textArea.wrapperCva", textAreaWrapper);
 	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, isClearable = ui.input.isClearable, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { labelProps, inputProps } = useTextField({
@@ -66,7 +68,7 @@ var TextAreaBase = (props) => {
 			className: clsx("w-full", className),
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "group/text-area relative h-full",
+				className: textAreaWrapperCva({}),
 				"data-text-area": true,
 				children: [
 					as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {