@povio/ui 2.3.0-rc.8 → 2.3.0-rc.9

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

@@ -342,7 +342,7 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
 			inputClassName: props.inputClassName,
-			contentClassName: "pr-0!",
+			contentClassName: clsx(as === "inline" && "h-full", "pr-0!"),
 			trailingClassName: "py-0! pl-0!",
 			wrapContentAndTrailing: true,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {

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

@@ -326,7 +326,7 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
 			inputClassName: props.inputClassName,
-			contentClassName: "pr-0!",
+			contentClassName: clsx(as === "inline" && "h-full", "pr-0!"),
 			trailingClassName: "py-0! pl-0!",
 			wrapContentAndTrailing: true,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {

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

@@ -1,6 +1,7 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
+import { selectInputTagsContentWrapperCva } from "../shared/selectInput.cva.js";
 import { SelectBase } from "../shared/SelectBase.js";
 import { StaticSelectTrailingContent } from "../shared/StaticSelectTrailingContent.js";
 import { getStaticSelectValue } from "../shared/staticSelect.utils.js";
@@ -95,7 +96,7 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
-			contentWrapperClassName: "flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate",
+			contentWrapperClassName: selectInputTagsContentWrapperCva({ isSearchable: true }),
 			labelPlacement: "content-row",
 			dataAttributes,
 			renderStatic: true,

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

@@ -2,6 +2,7 @@ import { Typography } from "../../../text/Typography/Typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
+import { selectInputTagsContentWrapperCva } from "../shared/selectInput.cva.js";
 import { SelectBase } from "../shared/SelectBase.js";
 import { StaticSelectTrailingContent } from "../shared/StaticSelectTrailingContent.js";
 import { getStaticSelectValue } from "../shared/staticSelect.utils.js";
@@ -104,6 +105,7 @@ function Select({ renderStaticInput, ...props }) {
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
+			contentWrapperClassName: selectInputTagsContentWrapperCva({ isSearchable }),
 			typographySize: "label-1",
 			labelPlacement: "content-row",
 			dataAttributes,

package/dist/components/inputs/Selection/shared/SelectInput.js

@@ -7,6 +7,7 @@ import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputClearClass, inputSize } from "../../shared/input.cva.js";
 import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
+import { selectInputTagsContentWrapperCva } from "./selectInput.cva.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -171,7 +172,7 @@ var SelectInput = (t0) => {
 	let t26;
 	if ($0[32] !== as || $0[33] !== collapseAfter || $0[34] !== fieldProps || $0[35] !== inputClassName || $0[36] !== isDisabled || $0[37] !== isSearchable || $0[38] !== onBlur || $0[39] !== onKeyDown || $0[40] !== onRemove || $0[41] !== placeholder || $0[42] !== selectedItems || $0[43] !== selectedTagsType || $0[44] !== showTags) {
 		t26 = (showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
-			className: clsx("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", !isSearchable && "pointer-events-none z-1"),
+			className: selectInputTagsContentWrapperCva({ isSearchable }),
 			children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
 				selectedItems,
 				isDisabled,

package/dist/components/inputs/Selection/shared/selectInput.cva.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const selectInputTagsContentWrapperCva: (props?: ({
+    isSearchable?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type SelectInputTagsContentWrapperCva = VariantProps<typeof selectInputTagsContentWrapperCva>;

package/dist/components/inputs/Selection/shared/selectInput.cva.js

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/Selection/shared/selectInput.cva.ts
+var selectInputTagsContentWrapperCva = cva("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", { variants: { isSearchable: { false: "pointer-events-none z-1" } } });
+//#endregion
+export { selectInputTagsContentWrapperCva };

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

@@ -14,7 +14,7 @@ import { clsx } from "clsx";
 import { isValidElement, useId } from "react";
 //#region src/components/inputs/Skeleton/InputFrame.tsx
 var InputFrame = (props) => {
-	const $ = c(183);
+	const $ = c(182);
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
@@ -166,38 +166,36 @@ var InputFrame = (props) => {
 			$[86] = t21;
 		} else t21 = $[86];
 		const resolvedContentWrapperClassName = t21;
-		const t22 = as === "inline" && "h-full";
-		if ($[87] !== as || $[88] !== contentClassName || $[89] !== inputSizeCva || $[90] !== size || $[91] !== t22 || $[92] !== typographyCva || $[93] !== typographySize) {
-			let t23;
-			if ($[95] !== typographyCva || $[96] !== typographySize) {
-				t23 = typographySize && typographyCva({ size: typographySize });
-				$[95] = typographyCva;
-				$[96] = typographySize;
-				$[97] = t23;
-			} else t23 = $[97];
-			t9 = clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements", t22, inputSizeCva({
+		if ($[87] !== as || $[88] !== contentClassName || $[89] !== inputSizeCva || $[90] !== size || $[91] !== typographyCva || $[92] !== typographySize) {
+			let t22;
+			if ($[94] !== typographyCva || $[95] !== typographySize) {
+				t22 = typographySize && typographyCva({ size: typographySize });
+				$[94] = typographyCva;
+				$[95] = typographySize;
+				$[96] = t22;
+			} else t22 = $[96];
+			t9 = clsx("group/input-frame flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements", inputSizeCva({
 				size,
 				as
-			}), t23, contentClassName);
+			}), t22, contentClassName);
 			$[87] = as;
 			$[88] = contentClassName;
 			$[89] = inputSizeCva;
 			$[90] = size;
-			$[91] = t22;
-			$[92] = typographyCva;
-			$[93] = typographySize;
-			$[94] = t9;
-		} else t9 = $[94];
+			$[91] = typographyCva;
+			$[92] = typographySize;
+			$[93] = t9;
+		} else t9 = $[93];
 		t10 = leadingContent;
-		if ($[98] !== isLeadingIconElement || $[99] !== leadingIcon) {
+		if ($[97] !== isLeadingIconElement || $[98] !== leadingIcon) {
 			t11 = leadingIcon && /* @__PURE__ */ jsx("div", {
 				className: clsx(!isLeadingIconElement && "pointer-events-none"),
 				children: renderIconVisual(leadingIcon)
 			});
-			$[98] = isLeadingIconElement;
-			$[99] = leadingIcon;
-			$[100] = t11;
-		} else t11 = $[100];
+			$[97] = isLeadingIconElement;
+			$[98] = leadingIcon;
+			$[99] = t11;
+		} else t11 = $[99];
 		t12 = labelPlacement === "content-row" && labelContent;
 		t13 = actionContentPlacement === "content-row" && actionContent;
 		t5 = resolvedContentWrapperClassName;
@@ -266,7 +264,7 @@ var InputFrame = (props) => {
 		t9 = $[47];
 	}
 	let t14;
-	if ($[101] !== t5 || $[102] !== t6 || $[103] !== t7 || $[104] !== t8) {
+	if ($[100] !== t5 || $[101] !== t6 || $[102] !== t7 || $[103] !== t8) {
 		t14 = /* @__PURE__ */ jsxs("div", {
 			className: t5,
 			children: [
@@ -275,14 +273,14 @@ var InputFrame = (props) => {
 				t8
 			]
 		});
-		$[101] = t5;
-		$[102] = t6;
-		$[103] = t7;
-		$[104] = t8;
-		$[105] = t14;
-	} else t14 = $[105];
+		$[100] = t5;
+		$[101] = t6;
+		$[102] = t7;
+		$[103] = t8;
+		$[104] = t14;
+	} else t14 = $[104];
 	let t15;
-	if ($[106] !== t10 || $[107] !== t11 || $[108] !== t12 || $[109] !== t13 || $[110] !== t14 || $[111] !== t9) {
+	if ($[105] !== t10 || $[106] !== t11 || $[107] !== t12 || $[108] !== t13 || $[109] !== t14 || $[110] !== t9) {
 		t15 = /* @__PURE__ */ jsxs("div", {
 			className: t9,
 			children: [
@@ -293,17 +291,17 @@ var InputFrame = (props) => {
 				t14
 			]
 		});
-		$[106] = t10;
-		$[107] = t11;
-		$[108] = t12;
-		$[109] = t13;
-		$[110] = t14;
-		$[111] = t9;
-		$[112] = t15;
-	} else t15 = $[112];
+		$[105] = t10;
+		$[106] = t11;
+		$[107] = t12;
+		$[108] = t13;
+		$[109] = t14;
+		$[110] = t9;
+		$[111] = t15;
+	} else t15 = $[111];
 	const contentRow = t15;
 	let t16;
-	if ($[113] !== action || $[114] !== clearClassName || $[115] !== hasClear || $[116] !== hasTrailingContent || $[117] !== isDisabled || $[118] !== isLoading || $[119] !== onClear || $[120] !== renderStatic || $[121] !== showClear || $[122] !== trailingAction || $[123] !== trailingContent || $[124] !== trailingIcon || $[125] !== typographyCva || $[126] !== unit) {
+	if ($[112] !== action || $[113] !== clearClassName || $[114] !== hasClear || $[115] !== hasTrailingContent || $[116] !== isDisabled || $[117] !== isLoading || $[118] !== onClear || $[119] !== renderStatic || $[120] !== showClear || $[121] !== trailingAction || $[122] !== trailingContent || $[123] !== trailingIcon || $[124] !== typographyCva || $[125] !== unit) {
 		t16 = hasTrailingContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
 			hasClear && /* @__PURE__ */ jsx(InputClear, {
 				onClear: () => onClear?.(),
@@ -337,25 +335,25 @@ var InputFrame = (props) => {
 			!isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
 			trailingAction
 		] }) : null;
-		$[113] = action;
-		$[114] = clearClassName;
-		$[115] = hasClear;
-		$[116] = hasTrailingContent;
-		$[117] = isDisabled;
-		$[118] = isLoading;
-		$[119] = onClear;
-		$[120] = renderStatic;
-		$[121] = showClear;
-		$[122] = trailingAction;
-		$[123] = trailingContent;
-		$[124] = trailingIcon;
-		$[125] = typographyCva;
-		$[126] = unit;
-		$[127] = t16;
-	} else t16 = $[127];
+		$[112] = action;
+		$[113] = clearClassName;
+		$[114] = hasClear;
+		$[115] = hasTrailingContent;
+		$[116] = isDisabled;
+		$[117] = isLoading;
+		$[118] = onClear;
+		$[119] = renderStatic;
+		$[120] = showClear;
+		$[121] = trailingAction;
+		$[122] = trailingContent;
+		$[123] = trailingIcon;
+		$[124] = typographyCva;
+		$[125] = unit;
+		$[126] = t16;
+	} else t16 = $[126];
 	const trailingContentNodes = t16;
 	let t17;
-	if ($[128] !== as || $[129] !== inputSizeCva || $[130] !== isTrailingInteractive || $[131] !== size || $[132] !== trailingClassName || $[133] !== trailingContentNodes || $[134] !== wrapTrailingContent) {
+	if ($[127] !== as || $[128] !== inputSizeCva || $[129] !== isTrailingInteractive || $[130] !== size || $[131] !== trailingClassName || $[132] !== trailingContentNodes || $[133] !== wrapTrailingContent) {
 		t17 = wrapTrailingContent && trailingContentNodes ? /* @__PURE__ */ jsx("div", {
 			className: clsx("flex items-center gap-input-gap-trailing-elements", inputSizeCva({
 				size,
@@ -363,70 +361,70 @@ var InputFrame = (props) => {
 			}), !isTrailingInteractive && "pointer-events-none", trailingClassName),
 			children: trailingContentNodes
 		}) : trailingContentNodes;
-		$[128] = as;
-		$[129] = inputSizeCva;
-		$[130] = isTrailingInteractive;
-		$[131] = size;
-		$[132] = trailingClassName;
-		$[133] = trailingContentNodes;
-		$[134] = wrapTrailingContent;
-		$[135] = t17;
-	} else t17 = $[135];
+		$[127] = as;
+		$[128] = inputSizeCva;
+		$[129] = isTrailingInteractive;
+		$[130] = size;
+		$[131] = trailingClassName;
+		$[132] = trailingContentNodes;
+		$[133] = wrapTrailingContent;
+		$[134] = t17;
+	} else t17 = $[134];
 	const trailingRow = t17;
 	let t18;
-	if ($[136] !== contentAndTrailingClassName || $[137] !== contentRow || $[138] !== trailingRow || $[139] !== wrapContentAndTrailing) {
+	if ($[135] !== contentAndTrailingClassName || $[136] !== contentRow || $[137] !== trailingRow || $[138] !== wrapContentAndTrailing) {
 		t18 = wrapContentAndTrailing ? /* @__PURE__ */ jsxs("div", {
 			className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements", contentAndTrailingClassName),
 			children: [contentRow, trailingRow]
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [contentRow, trailingRow] });
-		$[136] = contentAndTrailingClassName;
-		$[137] = contentRow;
-		$[138] = trailingRow;
-		$[139] = wrapContentAndTrailing;
-		$[140] = t18;
-	} else t18 = $[140];
+		$[135] = contentAndTrailingClassName;
+		$[136] = contentRow;
+		$[137] = trailingRow;
+		$[138] = wrapContentAndTrailing;
+		$[139] = t18;
+	} else t18 = $[139];
 	const inputFrameContent = t18;
 	const t19 = as === "inline" ? -1 : void 0;
 	const t20 = as === "inline" ? -1 : void 0;
 	let t21;
-	if ($[141] !== onMouseEnter || $[142] !== onStaticInteract || $[143] !== renderStatic) {
+	if ($[140] !== onMouseEnter || $[141] !== onStaticInteract || $[142] !== renderStatic) {
 		t21 = (event) => {
 			onMouseEnter?.(event);
 			if (renderStatic) onStaticInteract?.(false);
 		};
-		$[141] = onMouseEnter;
-		$[142] = onStaticInteract;
-		$[143] = renderStatic;
-		$[144] = t21;
-	} else t21 = $[144];
+		$[140] = onMouseEnter;
+		$[141] = onStaticInteract;
+		$[142] = renderStatic;
+		$[143] = t21;
+	} else t21 = $[143];
 	let t22;
-	if ($[145] !== onFocusCapture || $[146] !== onStaticInteract || $[147] !== renderStatic) {
+	if ($[144] !== onFocusCapture || $[145] !== onStaticInteract || $[146] !== renderStatic) {
 		t22 = (event_0) => {
 			onFocusCapture?.(event_0);
 			if (renderStatic) onStaticInteract?.(true);
 		};
-		$[145] = onFocusCapture;
-		$[146] = onStaticInteract;
-		$[147] = renderStatic;
-		$[148] = t22;
-	} else t22 = $[148];
+		$[144] = onFocusCapture;
+		$[145] = onStaticInteract;
+		$[146] = renderStatic;
+		$[147] = t22;
+	} else t22 = $[147];
 	let t23;
-	if ($[149] !== as || $[150] !== inputBaseCva || $[151] !== inputClassName || $[152] !== variant) {
+	if ($[148] !== as || $[149] !== inputBaseCva || $[150] !== inputClassName || $[151] !== variant) {
 		t23 = clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
 			variant,
 			as
 		}), inputClassName);
-		$[149] = as;
-		$[150] = inputBaseCva;
-		$[151] = inputClassName;
-		$[152] = variant;
-		$[153] = t23;
-	} else t23 = $[153];
+		$[148] = as;
+		$[149] = inputBaseCva;
+		$[150] = inputClassName;
+		$[151] = variant;
+		$[152] = t23;
+	} else t23 = $[152];
 	const t24 = renderStatic ? isDisabled ? -1 : 0 : void 0;
 	let t25;
 	let t26;
 	let t27;
-	if ($[154] !== onStaticInteract || $[155] !== renderStatic) {
+	if ($[153] !== onStaticInteract || $[154] !== renderStatic) {
 		t25 = () => {
 			if (renderStatic) onStaticInteract?.(true);
 		};
@@ -436,18 +434,18 @@ var InputFrame = (props) => {
 		t27 = () => {
 			if (renderStatic) onStaticInteract?.(true);
 		};
-		$[154] = onStaticInteract;
-		$[155] = renderStatic;
-		$[156] = t25;
-		$[157] = t26;
-		$[158] = t27;
+		$[153] = onStaticInteract;
+		$[154] = renderStatic;
+		$[155] = t25;
+		$[156] = t26;
+		$[157] = t27;
 	} else {
-		t25 = $[156];
-		t26 = $[157];
-		t27 = $[158];
+		t25 = $[155];
+		t26 = $[156];
+		t27 = $[157];
 	}
 	let t28;
-	if ($[159] !== dataAttributeProps || $[160] !== inputFrameContent || $[161] !== ref || $[162] !== t23 || $[163] !== t24 || $[164] !== t25 || $[165] !== t26 || $[166] !== t27) {
+	if ($[158] !== dataAttributeProps || $[159] !== inputFrameContent || $[160] !== ref || $[161] !== t23 || $[162] !== t24 || $[163] !== t25 || $[164] !== t26 || $[165] !== t27) {
 		t28 = /* @__PURE__ */ jsx("div", {
 			ref,
 			...dataAttributeProps,
@@ -459,18 +457,18 @@ var InputFrame = (props) => {
 			"data-rac": "",
 			children: inputFrameContent
 		});
-		$[159] = dataAttributeProps;
-		$[160] = inputFrameContent;
-		$[161] = ref;
-		$[162] = t23;
-		$[163] = t24;
-		$[164] = t25;
-		$[165] = t26;
-		$[166] = t27;
-		$[167] = t28;
-	} else t28 = $[167];
+		$[158] = dataAttributeProps;
+		$[159] = inputFrameContent;
+		$[160] = ref;
+		$[161] = t23;
+		$[162] = t24;
+		$[163] = t25;
+		$[164] = t26;
+		$[165] = t27;
+		$[166] = t28;
+	} else t28 = $[166];
 	let t29;
-	if ($[168] !== as || $[169] !== dataAttributeProps || $[170] !== formFieldProps || $[171] !== formFieldRef || $[172] !== labelProps || $[173] !== t20 || $[174] !== t21 || $[175] !== t22 || $[176] !== t28) {
+	if ($[167] !== as || $[168] !== dataAttributeProps || $[169] !== formFieldProps || $[170] !== formFieldRef || $[171] !== labelProps || $[172] !== t20 || $[173] !== t21 || $[174] !== t22 || $[175] !== t28) {
 		t29 = /* @__PURE__ */ jsx(FormField, {
 			...formFieldProps,
 			...dataAttributeProps,
@@ -482,31 +480,31 @@ var InputFrame = (props) => {
 			onFocusCapture: t22,
 			children: t28
 		});
-		$[168] = as;
-		$[169] = dataAttributeProps;
-		$[170] = formFieldProps;
-		$[171] = formFieldRef;
-		$[172] = labelProps;
-		$[173] = t20;
-		$[174] = t21;
-		$[175] = t22;
-		$[176] = t28;
-		$[177] = t29;
-	} else t29 = $[177];
+		$[167] = as;
+		$[168] = dataAttributeProps;
+		$[169] = formFieldProps;
+		$[170] = formFieldRef;
+		$[171] = labelProps;
+		$[172] = t20;
+		$[173] = t21;
+		$[174] = t22;
+		$[175] = t28;
+		$[176] = t29;
+	} else t29 = $[176];
 	let t30;
-	if ($[178] !== as || $[179] !== error || $[180] !== t19 || $[181] !== t29) {
+	if ($[177] !== as || $[178] !== error || $[179] !== t19 || $[180] !== t29) {
 		t30 = /* @__PURE__ */ jsx(TooltipWrapper, {
 			as,
 			error,
 			triggerTabIndex: t19,
 			children: t29
 		});
-		$[178] = as;
-		$[179] = error;
-		$[180] = t19;
-		$[181] = t29;
-		$[182] = t30;
-	} else t30 = $[182];
+		$[177] = as;
+		$[178] = error;
+		$[179] = t19;
+		$[180] = t29;
+		$[181] = t30;
+	} else t30 = $[181];
 	return t30;
 };
 var renderIconVisual = (icon) => {

package/package.json

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