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

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

@@ -15,17 +15,30 @@ var getPlaceholder = (segment) => {
 var DateSegmentItem = ({ segment, state, isDisabled, timePickerOnly, hidePlaceholder }) => {
 	const ref = useRef(null);
 	const { segmentProps } = useDateSegment(segment, state, ref);
-	const isInputEmpty = !state.value;
+	return /* @__PURE__ */ jsx(DateSegmentItemView, {
+		ref,
+		segmentProps,
+		type: segment.type,
+		text: segment.text,
+		placeholder: getPlaceholder(segment),
+		isPlaceholder: segment.isPlaceholder,
+		isInputEmpty: !state.value,
+		isDisabled,
+		timePickerOnly,
+		hidePlaceholder
+	});
+};
+var DateSegmentItemView = ({ ref, segmentProps, type, text, placeholder, isPlaceholder, isInputEmpty, isDisabled, timePickerOnly, hidePlaceholder }) => {
 	return /* @__PURE__ */ jsx("div", {
 		...segmentProps,
 		ref,
-		className: clsx("box-content rounded-input-rounding-default", isDisabled && "text-interactive-text-secondary-disabled", !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1", !isDisabled && !isInputEmpty && "text-text-default-1", "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1", ["hour", "dayPeriod"].includes(segment.type) && !timePickerOnly && "ml-1", hidePlaceholder && "opacity-0"),
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [segment.isPlaceholder && /* @__PURE__ */ jsx("span", {
+		className: clsx("box-content rounded-input-rounding-default", isDisabled && "text-interactive-text-secondary-disabled", !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1", !isDisabled && !isInputEmpty && "text-text-default-1", "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1", type && ["hour", "dayPeriod"].includes(type) && !timePickerOnly && "ml-1", hidePlaceholder && "opacity-0"),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [isPlaceholder && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "pointer-events-none",
-			children: getPlaceholder(segment)
-		}), segment.isPlaceholder ? "" : segment.text] })
+			children: placeholder
+		}), isPlaceholder ? "" : text] })
 	});
 };
 //#endregion
-export { DateSegmentItem, getPlaceholder };
+export { DateSegmentItem, DateSegmentItemView, getPlaceholder };

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

@@ -1,6 +1,6 @@
-import { ClockIcon } from "../../../../assets/icons/Clock.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
@@ -13,6 +13,7 @@ import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 //#region src/components/inputs/DateTime/shared/TimePickerInput.tsx
 var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
+	const uiConfig = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -32,6 +33,7 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequ
 		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,
 		"data-disabled": isDisabled || void 0,
+		"data-is-disabled": isDisabled || void 0,
 		"data-invalid": isInvalid || void 0,
 		"data-is-empty": state.value === null || void 0,
 		"data-focus-within": isFocused || void 0,
@@ -83,7 +85,7 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequ
 				label: "",
 				color: "secondary",
 				onPress,
-				icon: ClockIcon,
+				icon: uiConfig.dateInput.timeIcon,
 				isDisabled,
 				className: "border-0!"
 			})]

package/dist/components/inputs/DateTime/shared/datePicker.types.d.ts

@@ -0,0 +1,4 @@
+import { IconButtonProps } from '../../../buttons/IconButton/IconButton';
+export type DatePickerTodayIcon = boolean | IconButtonProps["icon"];
+export type DatePickerTodayIconButtonSize = IconButtonProps["size"];
+export type DatePickerTodayIconPlacement = "content" | "fieldLabel";

package/dist/components/inputs/DateTime/shared/datePickerInput.cva.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputSizeProps } from '../../shared/input.cva';
+export declare const datePickerInputContentRow: (props?: ({
+    size?: "small" | "default" | "extra-small" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DatePickerInputContentRowProps extends VariantProps<typeof datePickerInputContentRow>, InputSizeProps {
+}

package/dist/components/inputs/DateTime/shared/datePickerInput.cva.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/DateTime/shared/datePickerInput.cva.ts
+var datePickerInputContentRow = cva("flex items-center gap-input-gap-input-text-to-elements", {
+	variants: { size: {
+		"extra-small": "",
+		small: "",
+		default: "",
+		large: ""
+	} },
+	defaultVariants: { size: "default" }
+});
+//#endregion
+export { datePickerInputContentRow };

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

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

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

@@ -0,0 +1,21 @@
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { TodayIcon } from "../../../../assets/icons/Today.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/DateTime/shared/datePickerTodayIcon.tsx
+var getDatePickerTodayIcon = (todayIcon) => {
+	if (!todayIcon) return null;
+	return todayIcon === true ? TodayIcon : todayIcon;
+};
+var renderDatePickerTodayIcon = (todayIcon, size = "none", className) => {
+	const icon = getDatePickerTodayIcon(todayIcon);
+	if (!icon) return;
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		label: "",
+		icon,
+		size,
+		staticRender: true,
+		className: className ?? "relative z-1 !border-none"
+	});
+};
+//#endregion
+export { getDatePickerTodayIcon, renderDatePickerTodayIcon };

package/dist/components/inputs/DateTime/shared/dateSegment.utils.d.ts

@@ -0,0 +1,2 @@
+import { DateSegment } from '@react-stately/datepicker';
+export declare const getTimeSegmentValue: (segment: DateSegment | undefined, fallbackValue?: number) => number;

package/dist/components/inputs/DateTime/shared/dateSegment.utils.js

@@ -0,0 +1,9 @@
+//#region src/components/inputs/DateTime/shared/dateSegment.utils.ts
+var getTimeSegmentValue = (segment, fallbackValue = 0) => {
+	if (!segment) return fallbackValue;
+	const parsedValue = Number.parseInt(segment.text, 10);
+	if (Number.isFinite(parsedValue)) return parsedValue;
+	return Number.isFinite(segment.value) ? segment.value ?? fallbackValue : fallbackValue;
+};
+//#endregion
+export { getTimeSegmentValue };

package/dist/components/inputs/DateTime/shared/dateSegment.utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,35 @@
+import { CalendarDate } from '@internationalized/date';
+import { DateValue, TimeValue } from 'react-aria';
+interface StaticSegmentProps {
+    isDisabled?: boolean;
+    hidePlaceholder?: boolean;
+}
+interface StaticCalendarDateSegmentsProps extends StaticSegmentProps {
+    value?: CalendarDate | null;
+    locale: string;
+    placeholder?: string;
+    shouldForceLeadingZeros?: boolean;
+}
+interface StaticCalendarDateTimeSegmentsProps extends StaticSegmentProps {
+    value?: DateValue | null;
+    locale: string;
+    placeholder?: string;
+    shouldForceLeadingZeros?: boolean;
+}
+interface StaticDateRangeSegmentsProps extends StaticSegmentProps {
+    start?: CalendarDate | null;
+    end?: CalendarDate | null;
+    locale: string;
+    placeholder?: string;
+    shouldForceLeadingZeros?: boolean;
+}
+interface StaticTimeSegmentsProps extends StaticSegmentProps {
+    value?: TimeValue | null;
+    locale: string;
+    placeholder?: string;
+}
+export declare const getStaticCalendarDateSegments: ({ value, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticCalendarDateSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticCalendarDateTimeSegments: ({ value, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticCalendarDateTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticDateRangeSegments: ({ start, end, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticDateRangeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticTimeSegments: ({ value, locale, placeholder, isDisabled, hidePlaceholder, }: StaticTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,80 @@
+import { DateSegmentItemView } from "./DateSegmentItem.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/DateTime/shared/staticDateTimeSegments.tsx
+var getStaticCalendarDateSegments = ({ value, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+	const hasValue = !!value;
+	return renderStaticSegments(value ? DateTimeUtils.formatCalendarDateLocalized(value, locale, { shouldForceLeadingZeros }) : placeholder ?? DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros }), {
+		isPlaceholder: !hasValue,
+		isInputEmpty: !hasValue,
+		isDisabled,
+		hidePlaceholder
+	});
+};
+var getStaticCalendarDateTimeSegments = ({ value, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+	const hasValue = !!(value && "hour" in value);
+	return renderStaticSegments(hasValue ? DateTimeUtils.formatCalendarDateTimeLocalized(value, locale, { shouldForceLeadingZeros }) : placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale, { shouldForceLeadingZeros }), {
+		isPlaceholder: !hasValue,
+		isInputEmpty: !hasValue,
+		isDisabled,
+		hidePlaceholder
+	});
+};
+var getStaticDateRangeSegments = ({ start, end, locale, placeholder, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+	const defaultPlaceholder = placeholder ?? DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		renderStaticSegments(start ? DateTimeUtils.formatCalendarDateLocalized(start, locale, { shouldForceLeadingZeros }) : defaultPlaceholder, {
+			isPlaceholder: !start,
+			isInputEmpty: !start,
+			isDisabled,
+			hidePlaceholder: hidePlaceholder && !start
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: isDisabled ? "pointer-events-none select-none text-interactive-text-secondary-disabled" : "pointer-events-none select-none",
+			children: "–"
+		}),
+		renderStaticSegments(end ? DateTimeUtils.formatCalendarDateLocalized(end, locale, { shouldForceLeadingZeros }) : defaultPlaceholder, {
+			isPlaceholder: !end,
+			isInputEmpty: !end,
+			isDisabled,
+			hidePlaceholder: hidePlaceholder && !end
+		})
+	] });
+};
+var getStaticTimeSegments = ({ value, locale, placeholder, isDisabled, hidePlaceholder }) => {
+	const hasValue = !!value;
+	return renderStaticSegments(value ? DateTimeUtils.formatTimeLocalized(value, locale) : placeholder ?? DateTimeUtils.getTimePlaceholder(locale), {
+		isPlaceholder: !hasValue,
+		isInputEmpty: !hasValue,
+		isDisabled,
+		hidePlaceholder,
+		timePickerOnly: true
+	});
+};
+var renderStaticSegments = (value, options) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex",
+		children: tokenizeStaticSegmentText(value).map((token, index) => /* @__PURE__ */ jsx(DateSegmentItemView, {
+			type: token.type,
+			text: getStaticSegmentText(token),
+			placeholder: getStaticSegmentText(token),
+			isPlaceholder: options.isPlaceholder && token.type !== "literal",
+			isInputEmpty: options.isInputEmpty,
+			isDisabled: options.isDisabled,
+			timePickerOnly: options.timePickerOnly,
+			hidePlaceholder: options.hidePlaceholder
+		}, index))
+	});
+};
+var tokenizeStaticSegmentText = (value) => {
+	return (value.match(/(\p{Letter}+|\p{Number}+|[^\p{Letter}\p{Number}]+)/gu) ?? [value]).map((text) => ({
+		text,
+		type: /^[^\p{Letter}\p{Number}]+$/u.test(text) ? "literal" : "day"
+	}));
+};
+var getStaticSegmentText = (token) => {
+	if (token.type !== "literal") return token.text;
+	return token.text.replaceAll(" ", "\xA0");
+};
+//#endregion
+export { getStaticCalendarDateSegments, getStaticCalendarDateTimeSegments, getStaticDateRangeSegments, getStaticTimeSegments };

package/dist/components/inputs/File/FileUpload.js

@@ -128,6 +128,7 @@ var FileUploadBase = (props) => {
 				...rest,
 				"data-rac": "",
 				"data-disabled": isDisabled || void 0,
+				"data-is-disabled": isDisabled || void 0,
 				"data-invalid": !!error || void 0,
 				"data-multiple": allowsMultiple || void 0,
 				"data-has-files": uploadState.length > 0 || void 0,

package/dist/components/inputs/File/shared/InputUploadContent.js

@@ -21,6 +21,7 @@ var InputUploadContent = (props) => {
 		children: /* @__PURE__ */ jsxs("div", {
 			"data-rac": "",
 			"data-disabled": isDisabled || void 0,
+			"data-is-disabled": isDisabled || void 0,
 			"data-invalid": !!error || void 0,
 			className: inputUploadButton({
 				variant,

package/dist/components/inputs/FormField/FormField.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, Ref } from 'react';
+import { FocusEventHandler, MouseEventHandler, PropsWithChildren, Ref } from 'react';
 import { FormFieldErrorProps } from './FormFieldError';
 import { FormFieldHeaderProps } from './FormFieldHeader';
 import { TextInputProps } from '../Input/TextInput/TextInput';
@@ -13,8 +13,8 @@ interface FormFieldComponentProps extends PropsWithChildren<FormFieldProps> {
     labelProps?: FormFieldHeaderProps["labelProps"];
     as?: TextInputProps["as"];
     tabIndex?: number;
-    onMouseEnter?: () => void;
-    onFocusCapture?: () => void;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
 }
 export declare const FormField: ({ ref, as, label, tooltipText, helperText, isRequired, rightContent, isDisabled, error, hideLabel, headerClassName, errorClassName, children, className, labelProps, isHeaderHidden, tabIndex, onMouseEnter, onFocusCapture, }: FormFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/FormField/FormFieldHeader.js

@@ -1,14 +1,16 @@
 import { InfoIcon } from "../../../assets/icons/Info.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { Tooltip as Tooltip$1 } from "../../overlays/Tooltip/Tooltip.js";
 import { FormFieldLabel } from "./FormFieldLabel.js";
+import { formFieldHeader } from "./formFieldHeader.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Focusable } from "react-aria-components";
 //#region src/components/inputs/FormField/FormFieldHeader.tsx
 var FormFieldHeader = ({ label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(isHeaderHidden ? "sr-only" : "mb-1", className),
+		className: clsx(UIStyle.useCva("formField.headerCva", formFieldHeader)({ visible: !isHeaderHidden }), className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-start justify-between",
 			children: [/* @__PURE__ */ jsxs("div", {

package/dist/components/inputs/FormField/formFieldHeader.cva.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const formFieldHeader: (props?: ({
+    visible?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface FormFieldHeaderVariantProps extends VariantProps<typeof formFieldHeader> {
+}

package/dist/components/inputs/FormField/formFieldHeader.cva.js

@@ -0,0 +1,11 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/FormField/formFieldHeader.cva.ts
+var formFieldHeader = cva("", {
+	variants: { visible: {
+		true: "mb-1",
+		false: "sr-only"
+	} },
+	defaultVariants: { visible: true }
+});
+//#endregion
+export { formFieldHeader };

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,23 @@ 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 { 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 +36,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,
@@ -114,7 +120,74 @@ 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 [shouldFocus, setShouldFocus] = useState(false);
+	const inputRef = useRef(null);
+	const watchedValue = "formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	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;
+		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 = {
+			dataIsEmpty: !hasValue,
+			dataIsFilled: hasValue,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!props.error,
+			dataHasSelection: hasValue
+		};
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			isHeaderHidden,
+			hideLabel,
+			isDisabled,
+			className: clsx("group w-full", as === "inline" && "h-full", props.className),
+			dataAttributes,
+			renderStatic: true,
+			onStaticInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			inputClassName: props.inputClassName,
+			as,
+			size,
+			variant,
+			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				readOnly: true,
+				disabled: isDisabled,
+				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",
+				...dataAttributeProps,
+				"data-rac": true
+			})
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -122,17 +195,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/NumberRangeInput.d.ts

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