@povio/ui 2.2.9-rc.37 → 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/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, {

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/RadioGroup/RadioGroup.js

@@ -5,7 +5,7 @@ import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
 import { inputBase, inputSize } from "../shared/input.cva.js";
 import { FormField } from "../FormField/FormField.js";
 import { TooltipWrapper } from "../shared/TooltipWrapper.js";
-import { radio, radioContentClassName, radioIndicatorClass, radioTypography } from "./radio.cva.js";
+import { radio, radioContentClassName, radioContentRow, radioContentWrapper, radioIndicatorClass, radioTypography } from "./radio.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Radio, RadioGroup } from "react-aria-components";
@@ -16,6 +16,8 @@ import { Controller } from "react-hook-form";
 var RadioGroupBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const radioCva = UIStyle.useCva("radio.cva", radio);
+	const radioContentWrapperCva = UIStyle.useCva("radio.contentWrapperCva", radioContentWrapper);
+	const radioContentRowCva = UIStyle.useCva("radio.contentRowCva", radioContentRow);
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const radioTypographyMap = UIStyle.useMapper("radio.typography", radioTypography);
@@ -97,26 +99,39 @@ var RadioGroupBase = (props) => {
 					"data-has-selection": selectedValue != null && selectedValue !== "" ? true : void 0,
 					"data-radio-group-content": "",
 					children: /* @__PURE__ */ jsxs("div", {
-						className: clsx("relative flex", as === "inline" || as === "filter" ? "flex-row flex-wrap items-center gap-2" : "flex-col", shouldRenderInputFrame && clsx("gap-2", inputSizeCva({
+						className: clsx(radioContentWrapperCva({
+							variant,
+							as,
+							hasInputFrame: shouldRenderInputFrame,
+							...rest
+						}), shouldRenderInputFrame && inputSizeCva({
 							as,
 							size
-						}))),
+						})),
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						children: [as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
 							as,
 							size,
 							...headerProps
-						}), options.map((option) => /* @__PURE__ */ jsxs(Radio, {
-							value: option.value,
-							className: clsx("relative", radioIndicatorClass),
-							children: [/* @__PURE__ */ jsx("div", { className: radioClassName }), /* @__PURE__ */ jsx(CheckContent, {
-								typography: radioTypographyProps,
-								contentClassName: radioContentClassNameValue,
-								className: labelClassName,
-								children: option.label
-							})]
-						}, option.value))]
+						}), /* @__PURE__ */ jsx("div", {
+							className: radioContentRowCva({
+								variant,
+								as,
+								hasInputFrame: shouldRenderInputFrame,
+								...rest
+							}),
+							children: options.map((option) => /* @__PURE__ */ jsxs(Radio, {
+								value: option.value,
+								className: clsx("relative", radioIndicatorClass),
+								children: [/* @__PURE__ */ jsx("div", { className: radioClassName }), /* @__PURE__ */ jsx(CheckContent, {
+									typography: radioTypographyProps,
+									contentClassName: radioContentClassNameValue,
+									className: labelClassName,
+									children: option.label
+								})]
+							}, option.value))
+						})]
 					})
 				})
 			})

package/dist/components/inputs/RadioGroup/radio.cva.d.ts

@@ -5,6 +5,20 @@ export declare const radio: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface RadioVariantProps extends VariantProps<typeof radio> {
 }
+export declare const radioContentWrapper: (props?: ({
+    variant?: "default" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+    hasInputFrame?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface RadioContentWrapperVariantProps extends VariantProps<typeof radioContentWrapper> {
+}
+export declare const radioContentRow: (props?: ({
+    variant?: "default" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+    hasInputFrame?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface RadioContentRowVariantProps extends VariantProps<typeof radioContentRow> {
+}
 export declare const radioIndicatorClass = "group flex items-center gap-2";
 export declare const radioTypography: (props: {
     variant?: "default" | null | undefined;

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

@@ -25,6 +25,46 @@ var radio = cva([
 	] } },
 	defaultVariants: { variant: "default" }
 });
+var radioContentWrapper = cva("relative flex", {
+	variants: {
+		variant: { default: "" },
+		as: {
+			default: "flex-col",
+			floating: "flex-col",
+			filter: "flex-row flex-wrap items-center gap-2",
+			inline: "flex-row flex-wrap items-center gap-2"
+		},
+		hasInputFrame: {
+			true: "gap-2",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		as: "default",
+		hasInputFrame: false
+	}
+});
+var radioContentRow = cva("flex", {
+	variants: {
+		variant: { default: "" },
+		as: {
+			default: "flex-col",
+			floating: "flex-col",
+			filter: "flex-row flex-wrap items-center gap-2",
+			inline: "flex-row flex-wrap items-center gap-2"
+		},
+		hasInputFrame: {
+			true: "gap-2",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		as: "default",
+		hasInputFrame: false
+	}
+});
 var radioIndicatorClass = "group flex items-center gap-2";
 var radioTypography = compoundMapper({ default: {
 	size: "label-1",
@@ -33,4 +73,4 @@ var radioTypography = compoundMapper({ default: {
 } });
 var radioContentClassName = compoundMapper({ default: "text-text-default-2" });
 //#endregion
-export { radio, radioContentClassName, radioIndicatorClass, radioTypography };
+export { radio, radioContentClassName, radioContentRow, radioContentWrapper, radioIndicatorClass, radioTypography };

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/dist/config/uiStyle.context.d.ts

@@ -8,7 +8,8 @@ import { DatePickerInputContentRowProps } from '../components/inputs/DateTime/sh
 import { FormFieldErrorVariantProps } from '../components/inputs/FormField/formFieldError.cva';
 import { FormFieldHeaderVariantProps } from '../components/inputs/FormField/formFieldHeader.cva';
 import { FormFieldHelperVariantProps } from '../components/inputs/FormField/formFieldHelper.cva';
-import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
+import { TextAreaWrapperVariantProps } from '../components/inputs/Input/TextArea/TextArea.cva';
+import { RadioContentRowVariantProps, RadioContentWrapperVariantProps, RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
 import { SelectPopoverCva } from '../components/inputs/Selection/shared/selectDesktop.cva';
 import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
 import { InputBaseProps, InputClearClassProps, InputContentWrapperProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
@@ -54,6 +55,8 @@ export declare namespace UIStyle {
         };
         radio: {
             cva?: Cva<RadioVariantProps>;
+            contentWrapperCva?: Cva<RadioContentWrapperVariantProps>;
+            contentRowCva?: Cva<RadioContentRowVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, RadioVariantProps>;
             contentClassName?: CompoundMapper<string, RadioVariantProps>;
         };
@@ -75,6 +78,9 @@ export declare namespace UIStyle {
             sizeCva?: Cva<InputSizeProps>;
             sideCva?: Cva<InputSideProps>;
         };
+        textArea: {
+            wrapperCva?: Cva<TextAreaWrapperVariantProps>;
+        };
         tooltipWrapper: {
             triggerCva?: Cva<TooltipWrapperTriggerVariantProps>;
         };

package/package.json

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