@povio/ui 2.3.3 → 3.0.0-rc.1

package/dist/components/inputs/shared/InputClear.js

@@ -2,23 +2,99 @@ import { CloseIcon } from "../../../assets/icons/Close.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import "../../../config/i18n.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
-var InputClear = ({ onClear, className, style, show }) => {
-	const { t } = useTranslation("ui");
+var InputClear = (t0) => {
+	const $ = c(12);
+	const { onClear, className, style, show, renderStatic } = t0;
 	const alwaysShowClear = UIConfig.useConfig().input.alwaysShowClear;
-	return /* @__PURE__ */ jsx(InlineIconButton, {
-		color: "secondary",
-		className: clsx("relative z-1 flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
-		label: t(($) => $.ui.clearAlt),
-		icon: CloseIcon,
-		onPress: onClear,
-		onMouseDown: (e) => e.preventDefault(),
-		excludeFromTabOrder: true,
-		style
-	});
+	let clearClassName;
+	let t1;
+	if ($[0] !== alwaysShowClear || $[1] !== className || $[2] !== renderStatic || $[3] !== show || $[4] !== style) {
+		t1 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			clearClassName = clsx("relative z-1 flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className);
+			if (renderStatic) {
+				let t2;
+				if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+					t2 = /* @__PURE__ */ jsx(CloseIcon, { className: "h-6 w-6 shrink-0" });
+					$[7] = t2;
+				} else t2 = $[7];
+				t1 = /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-hidden": "true",
+					tabIndex: -1,
+					className: clsx("group inline-flex items-center justify-center border border-solid border-support-transparent-outline", "rounded-button-rounding-s p-0 text-interactive-text-secondary-idle", clearClassName),
+					style,
+					children: t2
+				});
+				break bb0;
+			}
+		}
+		$[0] = alwaysShowClear;
+		$[1] = className;
+		$[2] = renderStatic;
+		$[3] = show;
+		$[4] = style;
+		$[5] = clearClassName;
+		$[6] = t1;
+	} else {
+		clearClassName = $[5];
+		t1 = $[6];
+	}
+	if (t1 !== Symbol.for("react.early_return_sentinel")) return t1;
+	let t2;
+	if ($[8] !== clearClassName || $[9] !== onClear || $[10] !== style) {
+		t2 = /* @__PURE__ */ jsx(InputClearButton, {
+			onClear,
+			className: clearClassName,
+			style
+		});
+		$[8] = clearClassName;
+		$[9] = onClear;
+		$[10] = style;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
+};
+var InputClearButton = (t0) => {
+	const $ = c(7);
+	const { onClear, className, style } = t0;
+	const { t } = useTranslation("ui");
+	let t1;
+	if ($[0] !== t) {
+		t1 = t(_temp);
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== className || $[3] !== onClear || $[4] !== style || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			className,
+			label: t1,
+			icon: CloseIcon,
+			onPress: onClear,
+			onMouseDown: _temp2,
+			excludeFromTabOrder: true,
+			style
+		});
+		$[2] = className;
+		$[3] = onClear;
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
 };
+function _temp($) {
+	return $.ui.clearAlt;
+}
+function _temp2(e) {
+	return e.preventDefault();
+}
 //#endregion
 export { InputClear };

package/dist/components/inputs/shared/TooltipWrapper.js

@@ -1,21 +1,60 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
+import { tooltipWrapperTrigger } from "./tooltipWrapper.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/shared/TooltipWrapper.tsx
 var TooltipWrapper = (props) => {
+	const $ = c(14);
+	const tooltipWrapperTriggerCva = UIOverrides.useCva("tooltipWrapper.triggerCva", tooltipWrapperTrigger);
 	if (props.as !== "inline") return props.children;
-	return /* @__PURE__ */ jsx(Tooltip, {
-		text: props.error || void 0,
-		placement: "bottom",
-		color: "error",
-		hidden: !props.error,
-		isNonInteractiveTrigger: true,
-		triggerClassName: props.triggerClassName,
-		triggerTabIndex: props.triggerTabIndex,
-		children: /* @__PURE__ */ jsx("div", {
+	const t0 = props.error || void 0;
+	const t1 = !props.error;
+	let t2;
+	if ($[0] !== props.triggerClassName || $[1] !== tooltipWrapperTriggerCva) {
+		t2 = tooltipWrapperTriggerCva({ className: props.triggerClassName });
+		$[0] = props.triggerClassName;
+		$[1] = tooltipWrapperTriggerCva;
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = props.triggerTabIndex;
+	let t4;
+	if ($[3] !== tooltipWrapperTriggerCva) {
+		t4 = tooltipWrapperTriggerCva({});
+		$[3] = tooltipWrapperTriggerCva;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== props.children || $[6] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
 			tabIndex: -1,
+			className: t4,
 			children: props.children
-		})
-	});
+		});
+		$[5] = props.children;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== props.triggerTabIndex || $[9] !== t0 || $[10] !== t1 || $[11] !== t2 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Tooltip, {
+			text: t0,
+			placement: "bottom",
+			color: "error",
+			hidden: t1,
+			isNonInteractiveTrigger: true,
+			triggerClassName: t2,
+			triggerTabIndex: t3,
+			children: t5
+		});
+		$[8] = props.triggerTabIndex;
+		$[9] = t0;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
 };
 //#endregion
 export { TooltipWrapper };

package/dist/components/inputs/shared/input.cva.d.ts

@@ -1,22 +1,143 @@
-import { VariantProps } from 'class-variance-authority';
 import { ClassProp } from 'class-variance-authority/types';
-export declare const inputBase: (props?: ({
-    variant?: "outlined" | "filled" | null | undefined;
-    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
-} & ClassProp) | undefined) => string;
-export interface InputBaseProps extends VariantProps<typeof inputBase> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const inputBaseDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly outlined: "";
+            readonly filled: "";
+        };
+        readonly as: {
+            readonly default: "rounded-input-rounding-default";
+            readonly floating: "rounded-input-rounding-default";
+            readonly filter: "rounded-input-rounding-default";
+            readonly inline: ["h-full", "border-transparent border-b-0 bg-transparent text-text-default-1", "hover:border-input-outlined-outline-hover", "focus-within:border-input-outlined-outline-active", "invalid:border-input-outlined-outline-error", "has-invalid:border-input-outlined-outline-error", "disabled:hover:border-transparent", "has-disabled:hover:border-transparent"];
+        };
+    }>;
+};
+export type InputBaseConfig = NonNullable<typeof inputBaseDefinition.config>;
+export interface InputBaseProps extends UIOverrides.VariantProps<InputBaseConfig> {
 }
-export declare const inputSize: (props?: ({
-    size?: "small" | "default" | "extra-small" | "large" | null | undefined;
-    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
-} & ClassProp) | undefined) => string;
-export interface InputSizeProps extends VariantProps<typeof inputSize> {
+export declare const inputSizeDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly "extra-small": "text-label-1";
+            readonly small: "text-label-1";
+            readonly default: "text-label-1";
+            readonly large: "text-label-1";
+        };
+        readonly as: {
+            readonly default: "";
+            readonly floating: ["px-input-side-m", "py-floating-label-input-height-empty", "input-filled:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]", "input-filled:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]"];
+            readonly filter: "";
+            readonly inline: "";
+        };
+    }>;
+};
+export type InputSizeConfig = NonNullable<typeof inputSizeDefinition.config>;
+export interface InputSizeProps extends UIOverrides.VariantProps<InputSizeConfig> {
 }
-export declare const inputSide: (props?: ({
-    size?: "small" | "default" | "extra-small" | "large" | null | undefined;
-    type?: "left" | "right" | "var" | null | undefined;
-} & ClassProp) | undefined) => string;
-export interface InputSideProps extends VariantProps<typeof inputSide> {
+export declare const inputBase: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly outlined: "";
+            readonly filled: "";
+        };
+        readonly as: {
+            readonly default: "rounded-input-rounding-default";
+            readonly floating: "rounded-input-rounding-default";
+            readonly filter: "rounded-input-rounding-default";
+            readonly inline: ["h-full", "border-transparent border-b-0 bg-transparent text-text-default-1", "hover:border-input-outlined-outline-hover", "focus-within:border-input-outlined-outline-active", "invalid:border-input-outlined-outline-error", "has-invalid:border-input-outlined-outline-error", "disabled:hover:border-transparent", "has-disabled:hover:border-transparent"];
+        };
+    }>;
+};
+export declare const inputSize: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly "extra-small": "text-label-1";
+            readonly small: "text-label-1";
+            readonly default: "text-label-1";
+            readonly large: "text-label-1";
+        };
+        readonly as: {
+            readonly default: "";
+            readonly floating: ["px-input-side-m", "py-floating-label-input-height-empty", "input-filled:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]", "input-filled:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]"];
+            readonly filter: "";
+            readonly inline: "";
+        };
+    }>;
+};
+export declare const inputContentWrapperDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly as: {
+            readonly default: "";
+            readonly floating: "flex-col";
+            readonly filter: "gap-input-gap-input-text-to-elements";
+            readonly inline: "";
+        };
+    }>;
+};
+export declare const inputContentWrapper: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly as: {
+            readonly default: "";
+            readonly floating: "flex-col";
+            readonly filter: "gap-input-gap-input-text-to-elements";
+            readonly inline: "";
+        };
+    }>;
+};
+export type InputContentWrapperConfig = NonNullable<typeof inputContentWrapperDefinition.config>;
+export interface InputContentWrapperProps extends UIOverrides.VariantProps<InputContentWrapperConfig> {
+}
+export declare const inputClearClassDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly as: {
+            readonly default: "";
+            readonly floating: "";
+            readonly filter: "";
+            readonly inline: "";
+        };
+    }>;
+};
+export declare const inputClearClass: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly as: {
+            readonly default: "";
+            readonly floating: "";
+            readonly filter: "";
+            readonly inline: "";
+        };
+    }>;
+};
+export type InputClearClassConfig = NonNullable<typeof inputClearClassDefinition.config>;
+export interface InputClearClassProps extends UIOverrides.VariantProps<InputClearClassConfig> {
+}
+export declare const inputSideDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly "extra-small": "";
+            readonly small: "";
+            readonly default: "";
+            readonly large: "";
+        };
+        readonly type: {
+            readonly left: "";
+            readonly right: "";
+            readonly var: "";
+        };
+    }>;
+};
+export type InputSideConfig = NonNullable<typeof inputSideDefinition.config>;
+export interface InputSideProps extends UIOverrides.VariantProps<InputSideConfig> {
 }
 export interface InputVariantProps extends InputBaseProps, InputSizeProps {
 }