@povio/ui 3.4.0-rc.15 → 3.4.0-rc.17

package/dist/components/navigation/Stepper/stepper.types.d.ts

@@ -1,41 +1,33 @@
-import { StepperItemVariantProps, StepperVariantProps } from './stepper.cva';
+import { StepperItemVariantProps, StepperVariantProps } from "./stepper.cva.js";
+//#region src/components/navigation/Stepper/stepper.types.d.ts
 /** A single step definition passed by the consumer. */
-export interface StepItem {
-    /** Unique key for React rendering. */
-    id: string;
-    /** Step title text. Rendered unless iconsOnly is true. */
-    title: string;
-    /** Optional subtext beneath the title. Only rendered in default (full) mode. */
-    subtext?: string;
+interface StepItem {
+  /** Unique key for React rendering. */
+  id: string;
+  /** Step title text. Rendered unless iconsOnly is true. */
+  title: string;
+  /** Optional subtext beneath the title. Only rendered in default (full) mode. */
+  subtext?: string;
 }
-/** Derived step status, computed from currentStep index. */
-export type StepStatus = "completed" | "active" | "todo";
 /** Public props for the Stepper component. */
-export interface StepperProps extends StepperVariantProps, StepperItemVariantProps {
-    /** Array of step definitions. Order determines step numbering (1-based). */
-    steps: StepItem[];
-    /**
-     * The current active step index (0-based).
-     * - Steps at index < currentStep are "completed"
-     * - Step at index === currentStep is "active"
-     * - Steps at index > currentStep are "todo"
-     */
-    currentStep: number;
-    /** When true, only step indicator icons are rendered (no title or subtext). */
-    iconsOnly?: boolean;
-    /** When true, step indicator icons and titles are rendered (no subtext). Takes no effect if iconsOnly is true. */
-    titlesOnly?: boolean;
-    /** Callback when a completed step is clicked. Receives the 0-based step index. */
-    onStepClick?: (stepIndex: number) => void;
-    /** Optional className for the root container. */
-    className?: string;
-}
-/** Internal props for StepperItem sub-component. */
-export interface StepperItemProps extends StepperItemVariantProps {
-    step: StepItem;
-    stepNumber: number;
-    status: StepStatus;
-    iconsOnly?: boolean;
-    titlesOnly?: boolean;
-    onPress?: () => void;
+interface StepperProps extends StepperVariantProps, StepperItemVariantProps {
+  /** Array of step definitions. Order determines step numbering (1-based). */
+  steps: StepItem[];
+  /**
+   * The current active step index (0-based).
+   * - Steps at index < currentStep are "completed"
+   * - Step at index === currentStep is "active"
+   * - Steps at index > currentStep are "todo"
+   */
+  currentStep: number;
+  /** When true, only step indicator icons are rendered (no title or subtext). */
+  iconsOnly?: boolean;
+  /** When true, step indicator icons and titles are rendered (no subtext). Takes no effect if iconsOnly is true. */
+  titlesOnly?: boolean;
+  /** Callback when a completed step is clicked. Receives the 0-based step index. */
+  onStepClick?: (stepIndex: number) => void;
+  /** Optional className for the root container. */
+  className?: string;
 }
+//#endregion
+export { StepItem, StepperProps };

package/dist/components/number-input.d.ts

@@ -0,0 +1,27 @@
+import { FieldValues } from "./inputs/shared/form.binding.js";
+import { ControlProps } from "./inputs/shared/form.types.js";
+import { InputVariantProps } from "./inputs/shared/input.cva.js";
+import { InputContentProps } from "./inputs/Input/shared/InputContent.js";
+import { FormFieldProps } from "./form-field.js";
+import { FocusEvent, Ref } from "react";
+import { NumberFieldProps } from "react-aria-components";
+//#region src/components/inputs/Input/NumberInput/NumberInput.d.ts
+interface NumberInputBaseProps extends FormFieldProps, InputVariantProps, Omit<InputContentProps, "ref" | "value" | "onChange" | "onBlur">, Omit<NumberFieldProps, "value" | "onChange" | "className" | "onBlur"> {
+  ref?: Ref<HTMLInputElement>;
+  placeholder?: string;
+  inputClassName?: string;
+  isDirty?: boolean;
+  value?: number | null;
+  onChange?: (value: number | null) => void;
+  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+  autoFocusOnMount?: boolean;
+}
+type NumberInputProps = NumberInputBaseProps & {
+  renderStaticInput?: boolean;
+};
+type ControlledNumberInputProps<TFieldValues extends FieldValues> = ControlProps<NumberInputProps, TFieldValues>;
+/** @internal Exported for production render benchmarks. */
+declare const NumberInputComponent: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+declare const NumberInput: typeof NumberInputComponent;
+//#endregion
+export { ControlledNumberInputProps, NumberInput, NumberInputComponent, NumberInputProps };

package/dist/components/number-input.js

@@ -0,0 +1,245 @@
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { UIConfig } from "../config/uiConfig.context.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { FormField } from "./form-field.js";
+import { inputBaseDefinition } from "./inputs/shared/input.cva.js";
+import { IntlUtils } from "../utils/intl.utils.js";
+import { TooltipWrapper } from "./inputs/shared/TooltipWrapper.js";
+import { InputFrame } from "./inputs/Skeleton/InputFrame.js";
+import { useStaticInputHandoff } from "./inputs/shared/useStaticInputHandoff.js";
+import { InputContent } from "./inputs/Input/shared/InputContent.js";
+import { useFieldAccessibility } from "./inputs/shared/useFieldAccessibility.js";
+import { getStaticNumberDisplayValue } from "./inputs/Input/shared/numberStatic.utils.js";
+import { clsx } from "clsx";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Input, useLocale } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+import { useFocusVisible, useNumberField } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { useNumberFieldState } from "react-stately";
+//#region src/components/inputs/Input/NumberInput/NumberInput.tsx
+const NumberInputBase = (props) => {
+	"use no memo";
+	const ui = UIConfig.useConfig();
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const hasControlledValue = "value" in props;
+	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: formatOptionsProp, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, isClearableIfDisabled, autoFocusOnMount, ...rest } = props;
+	const formatOptions = formatOptionsProp ?? ui.numberInput.formatOptions;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const numberFieldRef = useRef(null);
+	const { isFocusVisible } = useFocusVisible();
+	const { locale } = useLocale();
+	const numberProps = {
+		...rest,
+		value: hasControlledValue ? value ?? NaN : void 0,
+		label,
+		isDisabled,
+		isInvalid: !!error,
+		isRequired,
+		onChange: (nextValue) => onChange?.(Number.isNaN(nextValue) ? null : nextValue),
+		onBlur: (e) => onBlur?.({ target: e.target }),
+		locale,
+		formatOptions
+	};
+	const state = useNumberFieldState(numberProps);
+	const { labelProps, inputProps } = useNumberField(numberProps, state, numberFieldRef);
+	const { describedBy, errorMessageId, helperTextId } = useFieldAccessibility({
+		describedBy: inputProps["aria-describedby"],
+		error,
+		helperText
+	});
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
+	const formFieldProps = {
+		errorMessageId,
+		error,
+		label,
+		tooltipText,
+		helperText,
+		helperTextId,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const handleInputBlur = useCallback((e) => {
+		const target = numberFieldRef.current ?? e?.target;
+		onBlur?.({ target });
+	}, [onBlur]);
+	const inputContentProps = {
+		unit,
+		isLoading,
+		isDisabled,
+		action,
+		leadingIcon,
+		trailingIcon,
+		isClearable,
+		isClearableIfDisabled,
+		onChange: (nextValue) => {
+			if (nextValue === "") state.setInputValue("");
+			onChange?.(nextValue === "" ? null : Number(nextValue));
+		},
+		value: state.inputValue,
+		onBlur: handleInputBlur
+	};
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const dataIsDisabled = isDisabled || void 0;
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: clsx("group w-full", className),
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
+					variant,
+					as,
+					...rest
+				}), inputClassName),
+				onClick: () => inputRef.current?.focus(),
+				"data-is-empty": value === null || value === void 0 || void 0,
+				"data-is-required": isRequired || void 0,
+				"data-is-disabled": dataIsDisabled,
+				children: /* @__PURE__ */ jsx(InputContent, {
+					...inputContentProps,
+					headerProps,
+					as,
+					size,
+					children: /* @__PURE__ */ jsx(Input, {
+						...inputProps,
+						"aria-describedby": describedBy,
+						"aria-errormessage": errorMessageId,
+						ref: mergeRefs(ref, inputRef, numberFieldRef),
+						"data-is-dirty": isDirty || void 0,
+						"data-is-required": isRequired || void 0,
+						"data-is-empty": state.inputValue === "" || state.inputValue === void 0 || state.inputValue === null || void 0,
+						"data-is-filled": !("" + value === "" || value === null || value === void 0) || void 0,
+						"data-is-disabled": dataIsDisabled,
+						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
+						className: "w-full bg-transparent outline-none",
+						onFocus: (e) => {
+							inputProps.onFocus?.(e);
+							if (isFocusVisible) e.target.select();
+						}
+					})
+				})
+			})
+		})
+	});
+};
+const NumberInputInner = ({ renderStaticInput, isFormControlDisabled, ...props }) => {
+	"use no memo";
+	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
+	});
+	if (!renderInput) {
+		const staticValue = props.value ?? props.defaultValue;
+		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
+		const displayValue = getStaticNumberDisplayValue(staticValue, IntlUtils.getNumberFormatter(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,
+			onStaticInteract: renderRealInput,
+			inputClassName: props.inputClassName,
+			contentClassName: clsx(as === "inline" && "h-full", "pr-0!"),
+			trailingClassName: "py-0! pl-0!",
+			wrapContentAndTrailing: true,
+			reserveTrailingContent: 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",
+				onChange: (event) => replayStaticInputChange(event.target.value),
+				...dataAttributeProps,
+				"data-rac": true
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberInputBase, {
+		...props,
+		ref: mergeRefs(props.ref, inputRef),
+		autoFocusOnMount: shouldFocus
+	});
+};
+/** @internal Exported for production render benchmarks. */
+const NumberInputComponent = ({ renderStaticInput, ...props }) => {
+	"use no memo";
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		const controlWithOptions = field.form;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(NumberInputInner, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				isFormControlDisabled: !!controlWithOptions._options?.disabled,
+				error: props.error ?? error?.message,
+				renderStaticInput
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberInputInner, {
+		...props,
+		renderStaticInput
+	});
+};
+const NumberInput = memo(NumberInputComponent);
+//#endregion
+export { NumberInput, NumberInputComponent };

package/dist/components/number-range-input.d.ts

@@ -0,0 +1,39 @@
+import { FieldValues } from "./inputs/shared/form.binding.js";
+import { ControlProps } from "./inputs/shared/form.types.js";
+import { InputVariantProps } from "./inputs/shared/input.cva.js";
+import { FormFieldProps } from "./form-field.js";
+import { NumberRangeValue } from "./inputs/Input/NumberRangeInput/NumberRangeField.js";
+import { FocusEvent, Ref } from "react";
+import { NumberFieldProps } from "react-aria-components";
+//#region src/components/inputs/Input/NumberRangeInput/NumberRangeInput.d.ts
+interface NumberRangeInputBaseProps extends FormFieldProps, InputVariantProps, Omit<NumberFieldProps, "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;
+  isClearableIfDisabled?: boolean;
+  autoFocusOnMount?: boolean;
+  onChange?: (value: NumberRangeValue) => void;
+  onMinChange?: (value: number | null) => void;
+  onMaxChange?: (value: number | null) => void;
+  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+}
+type NumberRangeInputProps = NumberRangeInputBaseProps & {
+  renderStaticInput?: boolean;
+};
+type ControlledNumberRangeInputProps<TFieldValues extends FieldValues> = ControlProps<NumberRangeInputProps, TFieldValues>;
+declare const NumberRangeInputComponent: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledNumberRangeInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+declare const NumberRangeInput: typeof NumberRangeInputComponent;
+//#endregion
+export { ControlledNumberRangeInputProps, NumberRangeInput, NumberRangeInputProps, type NumberRangeValue };

package/dist/components/number-range-input.js

@@ -0,0 +1,267 @@
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { UIConfig } from "../config/uiConfig.context.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { FormFieldLabel } from "./inputs/FormField/FormFieldLabel.js";
+import { inputBaseDefinition, inputSizeDefinition } from "./inputs/shared/input.cva.js";
+import { IntlUtils } from "../utils/intl.utils.js";
+import { InputClear } from "./inputs/shared/InputClear.js";
+import { InputFrame } from "./inputs/Skeleton/InputFrame.js";
+import { useStaticInputHandoff } from "./inputs/shared/useStaticInputHandoff.js";
+import { getStaticNumberDisplayValue } from "./inputs/Input/shared/numberStatic.utils.js";
+import { NumberRangeField } from "./inputs/Input/NumberRangeInput/NumberRangeField.js";
+import { clsx } from "clsx";
+import { memo, useRef, useState } from "react";
+import { useLocale } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
+//#region src/components/inputs/Input/NumberRangeInput/NumberRangeInput.tsx
+const EMPTY_RANGE = {
+	min: null,
+	max: null
+};
+const normalizeRangeValue = (value, minValue, maxValue) => {
+	if (value) return value;
+	return {
+		min: minValue ?? null,
+		max: maxValue ?? null
+	};
+};
+const NumberRangeInputBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	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, isClearableIfDisabled, 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,
+		isClearableIfDisabled,
+		autoFocusOnMount,
+		isDisabled,
+		isRequired,
+		isEmpty,
+		isHovered,
+		isFocused,
+		isFocusVisible,
+		focusWithinProps,
+		hoverProps,
+		onRangeSideChange: updateRange,
+		onRangeSideClear: clearRangeSide,
+		onBlur
+	});
+};
+const NumberRangeInputInner = ({ renderStaticInput, isFormControlDisabled, ...props }) => {
+	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
+	const ui = UIConfig.useConfig();
+	const { locale } = useLocale();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const inputRef = useRef(null);
+	const { shouldFocus, renderRealInput } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput
+	});
+	if (!renderInput) {
+		const staticValue = normalizeRangeValue(props.value, props.minValue, props.maxValue);
+		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
+		const formatter = IntlUtils.getNumberFormatter(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;
+		const size = props.size ?? ui.input.size;
+		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: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0! py-0! px-0!", inputSizeCva({
+				size,
+				as
+			})),
+			dataAttributes,
+			onStaticInteract: renderRealInput,
+			isClearable: false,
+			labelPlacement: "content-wrapper",
+			children: ({ id, ...dataAttributeProps }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+						label: props.minLabel ?? "Minimum",
+						isRequired: props.isRequired,
+						isDisabled,
+						className: clsx((props.hideInnerLabels ?? true) && "sr-only")
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-input-gap-trailing-elements",
+						children: [/* @__PURE__ */ jsx("input", {
+							id,
+							readOnly: true,
+							disabled: isDisabled,
+							tabIndex: -1,
+							value: minDisplay ?? "",
+							placeholder: props.minPlaceholder ?? "Min",
+							className: clsx("w-full min-w-0 bg-transparent outline-none", props.minInputClassName),
+							...dataAttributeProps,
+							"data-rac": true
+						}), isClearable && (!isDisabled || props.isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
+							onClear: () => {},
+							show: staticValue.min !== null,
+							renderStatic: true
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none shrink-0 select-none text-label-2 text-text-default-3",
+					children: "-"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx(FormFieldLabel, {
+						label: props.maxLabel ?? "Maximum",
+						isRequired: props.isRequired,
+						isDisabled,
+						className: clsx((props.hideInnerLabels ?? true) && "sr-only")
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-input-gap-trailing-elements",
+						children: [/* @__PURE__ */ jsx("input", {
+							id: `${id}-max`,
+							readOnly: true,
+							disabled: isDisabled,
+							tabIndex: -1,
+							value: maxDisplay ?? "",
+							placeholder: props.maxPlaceholder ?? "Max",
+							className: clsx("w-full min-w-0 bg-transparent outline-none", props.maxInputClassName),
+							...dataAttributeProps,
+							"data-rac": true
+						}), isClearable && (!isDisabled || props.isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
+							onClear: () => {},
+							show: staticValue.max !== null,
+							renderStatic: true
+						})]
+					})]
+				})
+			] })
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberRangeInputBase, {
+		...props,
+		autoFocusOnMount: shouldFocus
+	});
+};
+const NumberRangeInputComponent = ({ renderStaticInput, ...props }) => {
+	if ("field" in props && props.field) {
+		const { field, ...innerProps } = props;
+		const controlWithOptions = field.form;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(NumberRangeInputInner, {
+				...innerProps,
+				value: field.value ?? EMPTY_RANGE,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDisabled: field.disabled || !!controlWithOptions._options?.disabled || props.isDisabled,
+				isFormControlDisabled: !!controlWithOptions._options?.disabled,
+				error: props.error ?? error?.message,
+				renderStaticInput
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberRangeInputInner, {
+		...props,
+		renderStaticInput
+	});
+};
+const NumberRangeInput = memo(NumberRangeInputComponent);
+//#endregion
+export { NumberRangeInput };

package/dist/components/outline.clsx.d.ts

@@ -1,2 +1,4 @@
-export declare const uiOutlineClass: string;
-export declare const uiGroupOutlineClass: string;
+//#region src/components/outline.clsx.d.ts
+declare const uiOutlineClass: string;
+//#endregion
+export { uiOutlineClass };

package/dist/components/outline.clsx.js

@@ -1,6 +1,6 @@
 import { clsx } from "clsx";
 //#region src/components/outline.clsx.ts
-var uiOutlineClass = clsx("focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2", "has-focus-visible:outline has-focus-visible:outline-2 has-focus-visible:outline-solid has-focus-visible:outline-offset-2");
-var uiGroupOutlineClass = clsx("group-focus:outline-none group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-solid group-focus-visible:outline-offset-2");
+const uiOutlineClass = clsx("focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2", "has-focus-visible:outline has-focus-visible:outline-2 has-focus-visible:outline-solid has-focus-visible:outline-offset-2");
+const uiGroupOutlineClass = clsx("group-focus:outline-none group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-solid group-focus-visible:outline-offset-2");
 //#endregion
 export { uiGroupOutlineClass, uiOutlineClass };