@povio/ui 2.2.9-rc.38 → 2.2.9-rc.39

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

@@ -165,10 +165,12 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
 			inputClassName: props.inputClassName,
+			wrapContentAndTrailing: true,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				type: "text",
 				ref: inputRef,
 				disabled: isDisabled,
+				inputMode: "numeric",
 				tabIndex: -1,
 				value: displayValue,
 				placeholder: as === "floating" ? "" : props.placeholder,

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

@@ -160,6 +160,7 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
 			inputClassName: props.inputClassName,
+			wrapContentAndTrailing: true,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				type: inputType === "hidden" ? "password" : inputType,

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

@@ -69,6 +69,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     inputClassName?: string;
     contentClassName?: string;
     contentWrapperClassName?: string;
+    wrapContentAndTrailing?: boolean;
     labelPlacement?: InputFrameLabelPlacement;
     trailingClassName?: string;
 }

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

@@ -8,7 +8,7 @@ import { InputClear } from "../shared/InputClear.js";
 import { inputBase, inputContentWrapper, inputSize } from "../shared/input.cva.js";
 import { FormField } from "../FormField/FormField.js";
 import { TooltipWrapper } from "../shared/TooltipWrapper.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement, useId } from "react";
 //#region src/components/inputs/Skeleton/InputFrame.tsx
@@ -19,7 +19,7 @@ var InputFrame = (props) => {
 	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
 	const typographyCva = UIStyle.useCva("typography.cva", typography);
 	const generatedInputId = useId();
-	const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement = "content-wrapper", trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, labelPlacement = "content-wrapper", trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
+	const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement = "content-wrapper", trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, wrapContentAndTrailing, labelPlacement = "content-wrapper", trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
 	const as = asProp ?? ui.input.as;
 	const size = sizeProp ?? ui.input.size;
 	const variant = variantProp ?? ui.input.variant;
@@ -70,6 +70,75 @@ var InputFrame = (props) => {
 		...resolvedHeaderProps
 	}) : null;
 	const resolvedContentWrapperClassName = contentWrapperClassName ?? inputContentWrapperCva({ as });
+	const contentRow = /* @__PURE__ */ jsxs("div", {
+		className: clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full", inputSizeCva({
+			size,
+			as
+		}), typographySize && typographyCva({ size: typographySize }), contentClassName),
+		children: [
+			leadingContent,
+			leadingIcon && /* @__PURE__ */ jsx("div", {
+				className: clsx(!isLeadingIconElement && "pointer-events-none"),
+				children: renderIconVisual(leadingIcon)
+			}),
+			labelPlacement === "content-row" && labelContent,
+			actionContentPlacement === "content-row" && actionContent,
+			/* @__PURE__ */ jsxs("div", {
+				className: resolvedContentWrapperClassName,
+				children: [
+					labelPlacement === "content-wrapper" && labelContent,
+					actionContentPlacement === "content-wrapper" && actionContent,
+					typeof children === "function" ? children({
+						...dataAttributeProps,
+						id: inputId
+					}) : children
+				]
+			})
+		]
+	});
+	const trailingRow = hasTrailingContent ? /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
+			size,
+			as
+		}), !isTrailingInteractive && "pointer-events-none", trailingClassName),
+		children: [
+			hasClear && /* @__PURE__ */ jsx(InputClear, {
+				onClear: () => onClear?.(),
+				className: clearClassName,
+				show: !!showClear,
+				renderStatic
+			}),
+			trailingContent,
+			unit && /* @__PURE__ */ jsx("span", {
+				className: typographyCva({
+					size: "label-2",
+					sizeMobile: "label-2",
+					variant: "prominent-1",
+					className: "text-text-default-3"
+				}),
+				children: unit
+			}),
+			isLoading && /* @__PURE__ */ jsx("div", {
+				className: "inline-flex",
+				children: /* @__PURE__ */ jsx(Loader, {})
+			}),
+			!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+				color: "secondary",
+				icon: action.icon,
+				isDisabled,
+				onPress: action.onClick,
+				excludeFromTabOrder: true,
+				label: action.altText,
+				className: clsx("border-0!", action.className)
+			}),
+			!isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
+			trailingAction
+		]
+	}) : null;
+	const inputFrameContent = wrapContentAndTrailing ? /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center gap-input-gap-input-text-to-elements",
+		children: [contentRow, trailingRow]
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [contentRow, trailingRow] });
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
 		as,
 		error,
@@ -89,7 +158,7 @@ var InputFrame = (props) => {
 				onFocusCapture?.(event);
 				if (renderStatic) onStaticInteract?.(true);
 			},
-			children: /* @__PURE__ */ jsxs("div", {
+			children: /* @__PURE__ */ jsx("div", {
 				ref,
 				...dataAttributeProps,
 				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
@@ -107,70 +176,7 @@ var InputFrame = (props) => {
 					if (renderStatic) onStaticInteract?.(true);
 				},
 				"data-rac": "",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full", inputSizeCva({
-						size,
-						as
-					}), typographySize && typographyCva({ size: typographySize }), contentClassName),
-					children: [
-						leadingContent,
-						leadingIcon && /* @__PURE__ */ jsx("div", {
-							className: clsx(!isLeadingIconElement && "pointer-events-none"),
-							children: renderIconVisual(leadingIcon)
-						}),
-						labelPlacement === "content-row" && labelContent,
-						actionContentPlacement === "content-row" && actionContent,
-						/* @__PURE__ */ jsxs("div", {
-							className: resolvedContentWrapperClassName,
-							children: [
-								labelPlacement === "content-wrapper" && labelContent,
-								actionContentPlacement === "content-wrapper" && actionContent,
-								typeof children === "function" ? children({
-									...dataAttributeProps,
-									id: inputId
-								}) : children
-							]
-						})
-					]
-				}), hasTrailingContent && /* @__PURE__ */ jsxs("div", {
-					className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
-						size,
-						as
-					}), !isTrailingInteractive && "pointer-events-none", trailingClassName),
-					children: [
-						hasClear && /* @__PURE__ */ jsx(InputClear, {
-							onClear: () => onClear?.(),
-							className: clearClassName,
-							show: !!showClear,
-							renderStatic
-						}),
-						trailingContent,
-						unit && /* @__PURE__ */ jsx("span", {
-							className: typographyCva({
-								size: "label-2",
-								sizeMobile: "label-2",
-								variant: "prominent-1",
-								className: "text-text-default-3"
-							}),
-							children: unit
-						}),
-						isLoading && /* @__PURE__ */ jsx("div", {
-							className: "inline-flex",
-							children: /* @__PURE__ */ jsx(Loader, {})
-						}),
-						!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
-							color: "secondary",
-							icon: action.icon,
-							isDisabled,
-							onPress: action.onClick,
-							excludeFromTabOrder: true,
-							label: action.altText,
-							className: clsx("border-0!", action.className)
-						}),
-						!isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
-						trailingAction
-					]
-				})]
+				children: inputFrameContent
 			})
 		})
 	});

package/package.json

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