@povio/ui 2.2.6 → 2.2.8-rc

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

@@ -4,7 +4,8 @@ import { labelBase, labelTypography } from "../shared/label.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Label } from "react-aria-components";
-const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps, className }) => {
+//#region src/components/inputs/FormField/FormFieldLabel.tsx
+var FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps, className }) => {
 	const typographyCva = UIStyle.useCva("typography.cva", typography);
 	const labelTypographyMap = UIStyle.useMapper("label.typography", labelTypography);
 	const labelBaseCva = UIStyle.useCva("label.cva", labelBase);
@@ -23,4 +24,5 @@ const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps, cl
 		})]
 	});
 };
+//#endregion
 export { FormFieldLabel };

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

@@ -1,9 +1,11 @@
 import { cva } from "class-variance-authority";
-const formFieldError = cva("text-label-3 text-text-error-1", {
+//#region src/components/inputs/FormField/formFieldError.cva.ts
+var formFieldError = cva("text-label-3 text-text-error-1", {
 	variants: { visible: {
 		true: "mt-1-5",
 		false: "sr-only"
 	} },
 	defaultVariants: { visible: false }
 });
+//#endregion
 export { formFieldError };

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

@@ -1,9 +1,11 @@
 import { cva } from "class-variance-authority";
-const formFieldHelper = cva("text-label-3 text-text-default-2", {
+//#region src/components/inputs/FormField/formFieldHelper.cva.ts
+var formFieldHelper = cva("text-label-3 text-text-default-2", {
 	variants: { visible: {
 		true: "mt-1-5",
 		false: "sr-only"
 	} },
 	defaultVariants: { visible: false }
 });
+//#endregion
 export { formFieldHelper };

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

@@ -13,6 +13,7 @@ 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 ControlledNumberInputProps<TFieldValues extends FieldValues> = ControlProps<NumberInputProps, TFieldValues>;

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

@@ -1,22 +1,25 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { Loader } from "../../../status/Loader/Loader.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { inputBase } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useRef } from "react";
+import { isValidElement, 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();
@@ -33,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,
@@ -112,7 +119,68 @@ var NumberInputBase = (props) => {
 		})
 	});
 };
-const NumberInput = (props) => {
+var renderIconVisual = (icon) => {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
+};
+var NumberInput = (props) => {
+	const ui = UIConfig.useConfig();
+	const [renderInput, setRenderInput] = useState(!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 displayValue = staticValue == null ? "" : `${staticValue}`;
+		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 trailingVisual = !!props.unit || !!props.isLoading || !!props.action && !props.isLoading || !!props.trailingIcon && !props.isLoading && !props.action ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			props.unit && /* @__PURE__ */ jsx("span", {
+				className: "text-label-2 text-text-default-3",
+				children: props.unit
+			}),
+			props.isLoading && /* @__PURE__ */ jsx(Loader, {}),
+			!props.isLoading && props.action && renderIconVisual(props.action.icon),
+			!props.isLoading && !props.action && props.trailingIcon && renderIconVisual(props.trailingIcon)
+		] }) : void 0;
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			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,
+			placeholder: as === "floating" ? "" : props.placeholder,
+			displayValue,
+			isEmpty: !hasValue,
+			leadingVisual: renderIconVisual(props.leadingIcon),
+			trailingVisual
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -120,16 +188,22 @@ const 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/PasswordInput/PasswordInput.js

@@ -1,11 +1,12 @@
 import { VisibilityIcon } from "../../../../assets/icons/Visibility.js";
 import { VisibilityOffIcon } from "../../../../assets/icons/VisibilityOff.js";
-import { ns } from "../../../../config/i18n.js";
+import "../../../../config/i18n.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-const PasswordInput = (props) => {
+//#region src/components/inputs/Input/PasswordInput/PasswordInput.tsx
+var PasswordInput = (props) => {
 	const { t } = useTranslation("ui");
 	const [isRevealed, setIsRevealed] = useState(false);
 	return /* @__PURE__ */ jsx(TextInput, {
@@ -18,4 +19,5 @@ const PasswordInput = (props) => {
 		}
 	});
 };
+//#endregion
 export { PasswordInput };

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

@@ -12,6 +12,7 @@ import { TextArea } from "react-aria-components";
 import { useTextField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
+//#region src/components/inputs/Input/TextArea/TextArea.tsx
 var TextAreaBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputCva = useInputCva();
@@ -105,7 +106,7 @@ var TextAreaBase = (props) => {
 		})
 	});
 };
-const TextArea$1 = (props) => {
+var TextArea$1 = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -125,4 +126,5 @@ const TextArea$1 = (props) => {
 	}
 	return /* @__PURE__ */ jsx(TextAreaBase, { ...props });
 };
+//#endregion
 export { TextArea$1 as TextArea };

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

@@ -13,6 +13,7 @@ interface TextInputBaseProps extends FormFieldProps, InputVariantProps, Omit<Inp
     type?: AllowedHTMLInputTypeAttribute;
     todayIcon?: boolean;
     isDirty?: boolean;
+    autoFocusOnMount?: boolean;
 }
 export interface TextInputProps extends TextInputBaseProps {
 }

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

@@ -1,21 +1,24 @@
 import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { Loader } from "../../../status/Loader/Loader.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { inputBase } from "../../shared/input.cva.js";
 import { FormField } from "../../FormField/FormField.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputContent } from "../shared/InputContent.js";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useRef } from "react";
+import { isValidElement, useEffect, useRef, useState } from "react";
 import { Input } from "react-aria-components";
 import { useFocusVisible, useTextField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
+//#region src/components/inputs/Input/TextInput/TextInput.tsx
 var TextInputBase = (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, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, 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, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { labelProps, inputProps } = useTextField({
@@ -28,6 +31,10 @@ var TextInputBase = (props) => {
 		onChange,
 		onBlur
 	}, textFieldRef);
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
 	const formFieldProps = {
 		error,
 		label,
@@ -105,7 +112,71 @@ var TextInputBase = (props) => {
 		})
 	});
 };
-const TextInput = (props) => {
+var renderIconVisual = (icon) => {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
+};
+var TextInput = (props) => {
+	const ui = UIConfig.useConfig();
+	const [renderInput, setRenderInput] = useState(!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;
+	const staticValue = watchedValue ?? props.value ?? props.defaultValue ?? "";
+	const inputType = props.type;
+	if (!renderInput && inputType === "password" && `${staticValue}`.length > 0) setRenderInput(true);
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+		setShouldFocus(false);
+	}, [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;
+		const displayValue = maskedPasswordValue == null ? "" : `${maskedPasswordValue}`;
+		const hasValue = displayValue !== "";
+		const trailingVisual = !!props.unit || !!props.isLoading || !!props.action && !props.isLoading || !!props.trailingIcon && !props.isLoading && !props.action ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			props.unit && /* @__PURE__ */ jsx("span", {
+				className: "text-label-2 text-text-default-3",
+				children: props.unit
+			}),
+			props.isLoading && /* @__PURE__ */ jsx(Loader, {}),
+			!props.isLoading && props.action && renderIconVisual(props.action.icon),
+			!props.isLoading && !props.action && props.trailingIcon && renderIconVisual(props.trailingIcon)
+		] }) : void 0;
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			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,
+			placeholder: as === "floating" ? "" : props.placeholder,
+			displayValue,
+			isEmpty: !hasValue,
+			leadingVisual: renderIconVisual(props.leadingIcon),
+			trailingVisual
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -113,16 +184,22 @@ const TextInput = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextInputBase, {
 				...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
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx(TextInputBase, { ...props });
+	return /* @__PURE__ */ jsx(TextInputBase, {
+		...props,
+		ref: mergeRefs(props.ref, inputRef),
+		autoFocusOnMount: shouldFocus
+	});
 };
+//#endregion
 export { TextInput };

package/dist/components/inputs/Input/shared/InputContent.js

@@ -8,7 +8,8 @@ import { inputSize } from "../../shared/input.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
-const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size }) => {
+//#region src/components/inputs/Input/shared/InputContent.tsx
+var InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size }) => {
 	const typographyCva = UIStyle.useCva("typography.cva", typography);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
@@ -72,4 +73,5 @@ const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, un
 		})]
 	});
 };
+//#endregion
 export { InputContent };

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

@@ -5,6 +5,7 @@ import { getDefaultInputComponentType } from "../../../helpers/dynamicInputs.js"
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { z } from "zod";
+//#region src/components/inputs/Inputs/Form.tsx
 var createFieldComponent = (field, schemaKeyType, form) => {
 	return function FieldComponent({ inputType, label, placeholder, ...inputProps }) {
 		return /* @__PURE__ */ jsx(InputItem, {
@@ -39,4 +40,5 @@ function Form({ form, schema, onSubmit, onError, className, children }) {
 		children: children(components)
 	});
 }
+//#endregion
 export { Form };

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

@@ -14,6 +14,7 @@ import { Slider } from "../Slider/Slider.js";
 import { Toggle } from "../Toggle/Toggle.js";
 import { Segment } from "../../segment/Segment.js";
 import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/Inputs/InputItem.tsx
 var componentRegistry = {
 	toggle: Toggle,
 	checkbox: Checkbox,
@@ -51,4 +52,5 @@ function InputItem({ form, inputDef }) {
 	});
 	return inputWrapper ? inputWrapper(inputComponent, label) : inputComponent;
 }
+//#endregion
 export { InputItem };

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

@@ -1,5 +1,6 @@
 import { InputItem } from "./InputItem.js";
 import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/Inputs/Inputs.tsx
 function Inputs({ form, inputDefs, children }) {
 	if (!children) return inputDefs.map((inputDef) => /* @__PURE__ */ jsx(InputItem, {
 		form,
@@ -12,4 +13,5 @@ function Inputs({ form, inputDefs, children }) {
 	});
 	return children(childrenParams);
 }
+//#endregion
 export { Inputs };

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -8,6 +8,7 @@ import { clsx } from "clsx";
 import { Radio, RadioGroup } from "react-aria-components";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
+//#region src/components/inputs/RadioGroup/RadioGroup.tsx
 var RadioGroupBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const radioCva = UIStyle.useCva("radio.cva", radio);
@@ -56,7 +57,7 @@ var RadioGroupBase = (props) => {
 		})
 	});
 };
-const RadioGroup$1 = (props) => {
+var RadioGroup$1 = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -77,4 +78,5 @@ const RadioGroup$1 = (props) => {
 	}
 	return /* @__PURE__ */ jsx(RadioGroupBase, { ...props });
 };
+//#endregion
 export { RadioGroup$1 as RadioGroup };

package/dist/components/inputs/RadioGroup/radio.cva.js

@@ -1,7 +1,8 @@
 import { uiGroupOutlineClass } from "../../outline.clsx.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { cva } from "class-variance-authority";
-const radio = cva([
+//#region src/components/inputs/RadioGroup/radio.cva.ts
+var radio = cva([
 	"flex items-center justify-center border-2",
 	"relative size-3-5 rounded-full p-1-5",
 	"before:absolute before:hidden before:size-1 before:rounded-full",
@@ -24,10 +25,11 @@ const radio = cva([
 	] } },
 	defaultVariants: { variant: "default" }
 });
-const radioIndicatorClass = "group flex items-center gap-2";
-const radioTypography = compoundMapper({ default: {
+var radioIndicatorClass = "group flex items-center gap-2";
+var radioTypography = compoundMapper({ default: {
 	size: "label-1",
 	sizeMobile: "label-1",
 	variant: "default"
 } });
+//#endregion
 export { radio, radioIndicatorClass, radioTypography };

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

@@ -1,8 +1,13 @@
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { StaticInput } from "../../shared/StaticInput.js";
 import { SelectBase } from "../shared/SelectBase.js";
 import { jsx } from "react/jsx-runtime";
+import { isValidElement, useEffect, useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
-const Autocomplete = (props) => {
+import { Controller, useWatch } from "react-hook-form";
+//#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
+var _Autocomplete = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -25,4 +30,61 @@ const Autocomplete = (props) => {
 		isSearchable: true
 	});
 };
+var Autocomplete = (props) => {
+	const ui = UIConfig.useConfig();
+	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const rootRef = useRef(null);
+	const currentValue = ("formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value) ?? props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => {
+			(rootRef.current?.querySelector("input, [data-type='select-trigger'], button, [tabindex]"))?.focus();
+		});
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const getItemLabel = (id) => {
+			const item = props.items.find((innerItem) => innerItem.id === id);
+			if (!item) return "";
+			if (props.showSelectionContent && item.content) return isValidElement(item.content) ? item.label : item.content;
+			return item.label;
+		};
+		const mode = props.selectionMode ?? ui.select.selectionMode;
+		let displayValue = "";
+		if (mode === "multiple") {
+			if (Array.isArray(currentValue) && currentValue.length > 0) displayValue = currentValue.map((id) => getItemLabel(id)).filter(Boolean).join(", ");
+		} else if (currentValue != null) displayValue = getItemLabel(currentValue);
+		const as = props.as ?? ui.input.as;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			as,
+			size: props.size ?? ui.input.size,
+			variant: props.variant ?? ui.input.variant,
+			isHeaderHidden: props.isHeaderHidden || as === "inline",
+			hideLabel: props.hideLabel ?? ui.input.hideLabel,
+			isDisabled,
+			placeholder: as === "floating" ? "" : props.placeholder,
+			displayValue,
+			isEmpty: !displayValue,
+			trailingVisual: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" })
+		});
+	}
+	return /* @__PURE__ */ jsx(_Autocomplete, {
+		...props,
+		ref: mergeRefs(props.ref, rootRef)
+	});
+};
+//#endregion
 export { Autocomplete };

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

@@ -1,7 +1,8 @@
 import { Autocomplete } from "./Autocomplete.js";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
-const QueryAutocomplete = ({ query, queryParams, queryOptions, ...props }) => {
+//#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
+var QueryAutocomplete = ({ query, queryParams, queryOptions, ...props }) => {
 	const [search, setSearch] = useState("");
 	const { data: items, isLoading } = query({
 		search,
@@ -15,4 +16,5 @@ const QueryAutocomplete = ({ query, queryParams, queryOptions, ...props }) => {
 		isLoading
 	});
 };
+//#endregion
 export { QueryAutocomplete };