@povio/ui 2.3.2 → 3.0.0-rc.1

package/dist/components/status/Alert/alert.cva.js

@@ -1,64 +1,67 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/status/Alert/alert.cva.ts
-var alert = cva("min-h-0 overflow-hidden rounded-alert-rounding-default p-0", {
-	variants: {
-		variant: {
-			outlined: "border bg-elevation-fill-default-1 text-text-default-1",
-			contained: "text-text-inverted-1"
+var alertDefinition = UIOverrides.defineConfig({
+	base: ["min-h-0 overflow-hidden rounded-alert-rounding-default p-0"],
+	config: {
+		variants: {
+			variant: {
+				outlined: "border bg-elevation-fill-default-1 text-text-default-1",
+				contained: "text-text-inverted-1"
+			},
+			color: {
+				neutral: "",
+				success: "",
+				warning: "",
+				error: ""
+			}
 		},
-		color: {
-			neutral: "",
-			success: "",
-			warning: "",
-			error: ""
-		}
-	},
-	compoundVariants: [
-		{
-			variant: "outlined",
-			color: "neutral",
-			className: "border-elevation-outline-default-1"
-		},
-		{
+		compoundVariants: [
+			{
+				variant: "outlined",
+				color: "neutral",
+				className: "border-elevation-outline-default-1"
+			},
+			{
+				variant: "outlined",
+				color: "success",
+				className: "border-elevation-outline-success-1"
+			},
+			{
+				variant: "outlined",
+				color: "warning",
+				className: "border-elevation-outline-warning-1"
+			},
+			{
+				variant: "outlined",
+				color: "error",
+				className: "border-elevation-outline-error-1"
+			},
+			{
+				variant: "contained",
+				color: "neutral",
+				className: "bg-elevation-fill-inverted-1"
+			},
+			{
+				variant: "contained",
+				color: "success",
+				className: "bg-elevation-fill-success-1"
+			},
+			{
+				variant: "contained",
+				color: "warning",
+				className: "bg-elevation-fill-warning-1"
+			},
+			{
+				variant: "contained",
+				color: "error",
+				className: "bg-elevation-fill-error-1"
+			}
+		],
+		defaultVariants: {
 			variant: "outlined",
-			color: "success",
-			className: "border-elevation-outline-success-1"
-		},
-		{
-			variant: "outlined",
-			color: "warning",
-			className: "border-elevation-outline-warning-1"
-		},
-		{
-			variant: "outlined",
-			color: "error",
-			className: "border-elevation-outline-error-1"
-		},
-		{
-			variant: "contained",
-			color: "neutral",
-			className: "bg-elevation-fill-inverted-1"
-		},
-		{
-			variant: "contained",
-			color: "success",
-			className: "bg-elevation-fill-success-1"
-		},
-		{
-			variant: "contained",
-			color: "warning",
-			className: "bg-elevation-fill-warning-1"
-		},
-		{
-			variant: "contained",
-			color: "error",
-			className: "bg-elevation-fill-error-1"
+			color: "neutral"
 		}
-	],
-	defaultVariants: {
-		variant: "outlined",
-		color: "neutral"
 	}
 });
 //#endregion
-export { alert };
+export { alertDefinition };

package/dist/components/status/Loader/Loader.js

@@ -1,34 +1,89 @@
 import { loader, loaderWrapper } from "./loader.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/status/Loader/Loader.tsx
-var Loader = ({ size, className, ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: loaderWrapper({
+var Loader = (t0) => {
+	const $ = c(18);
+	let className;
+	let props;
+	let size;
+	if ($[0] !== t0) {
+		({size, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = size;
+	} else {
+		className = $[1];
+		props = $[2];
+		size = $[3];
+	}
+	let t1;
+	if ($[4] !== className || $[5] !== size) {
+		t1 = loaderWrapper({
 			size,
 			className
-		}),
-		children: /* @__PURE__ */ jsxs("svg", {
-			className: loader({
-				size,
-				className
-			}),
+		});
+		$[4] = className;
+		$[5] = size;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== className || $[8] !== size) {
+		t2 = loader({
+			size,
+			className
+		});
+		$[7] = className;
+		$[8] = size;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	let t4;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("circle", {
+			className: "opacity-20",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4"
+		});
+		t4 = /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		});
+		$[10] = t3;
+		$[11] = t4;
+	} else {
+		t3 = $[10];
+		t4 = $[11];
+	}
+	let t5;
+	if ($[12] !== props || $[13] !== t2) {
+		t5 = /* @__PURE__ */ jsxs("svg", {
+			className: t2,
 			xmlns: "http://www.w3.org/2000/svg",
 			fill: "none",
 			viewBox: "0 0 24 24",
 			...props,
-			children: [/* @__PURE__ */ jsx("circle", {
-				className: "opacity-20",
-				cx: "12",
-				cy: "12",
-				r: "10",
-				stroke: "currentColor",
-				strokeWidth: "4"
-			}), /* @__PURE__ */ jsx("path", {
-				fill: "currentColor",
-				d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-			})]
-		})
-	});
+			children: [t3, t4]
+		});
+		$[12] = props;
+		$[13] = t2;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== t1 || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t5
+		});
+		$[15] = t1;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
 };
 //#endregion
 export { Loader };

package/dist/components/status/Loader/loader.cva.d.ts

@@ -1,9 +1,28 @@
-import { VariantProps } from 'class-variance-authority';
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const loaderWrapperDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly default: "size-6";
+            readonly l: "size-16";
+        };
+    }>;
+};
 export declare const loaderWrapper: (props?: ({
-    size?: "default" | "l" | null | undefined;
+    readonly size?: "default" | "l" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const loaderDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly size: {
+            readonly default: "size-3-5";
+            readonly l: "size-8";
+        };
+    }>;
+};
 export declare const loader: (props?: ({
-    size?: "default" | "l" | null | undefined;
+    readonly size?: "default" | "l" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface LoaderVariantProps extends VariantProps<typeof loader> {
+export type LoaderConfig = NonNullable<typeof loaderDefinition.config>;
+export interface LoaderVariantProps extends UIOverrides.VariantProps<LoaderConfig> {
 }

package/dist/components/status/Loader/loader.cva.js

@@ -1,18 +1,27 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/status/Loader/loader.cva.ts
-var loaderWrapper = cva("flex items-center justify-center", {
-	variants: { size: {
-		default: "size-6",
-		l: "size-16"
-	} },
-	defaultVariants: { size: "default" }
+var loaderWrapperDefinition = UIOverrides.defineConfig({
+	base: ["flex items-center justify-center"],
+	config: {
+		variants: { size: {
+			default: "size-6",
+			l: "size-16"
+		} },
+		defaultVariants: { size: "default" }
+	}
 });
-var loader = cva("animate-loader-spin", {
-	variants: { size: {
-		default: "size-3-5",
-		l: "size-8"
-	} },
-	defaultVariants: { size: "default" }
+var loaderWrapper = cva(loaderWrapperDefinition.base, loaderWrapperDefinition.config);
+var loaderDefinition = UIOverrides.defineConfig({
+	base: ["animate-loader-spin"],
+	config: {
+		variants: { size: {
+			default: "size-3-5",
+			l: "size-8"
+		} },
+		defaultVariants: { size: "default" }
+	}
 });
+var loader = cva(loaderDefinition.base, loaderDefinition.config);
 //#endregion
-export { loader, loaderWrapper };
+export { loader, loaderDefinition, loaderWrapper, loaderWrapperDefinition };

package/dist/components/status/Toast/Toast.js

@@ -1,20 +1,20 @@
-import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { Loader } from "../Loader/Loader.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { Button } from "../../buttons/Button/Button.js";
-import { statusIcon, statusSeparator } from "../shared/status.cva.js";
-import { buttonColorVariant, toast as toast$1, toastContainer, toastWrapper } from "./toast.cva.js";
+import { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainer, toastDefinition, toastWrapper } from "./toast.cva.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ToastContainer } from "react-toastify";
 //#region src/components/status/Toast/Toast.tsx
 var Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) => {
 	const uiConfig = UIConfig.useConfig();
 	const { variant = uiConfig.toast.variant, ...restProps } = props;
-	const toastCva = UIStyle.useCva("toast.cva", toast$1);
-	const buttonColor = UIStyle.useMapper("toast.buttonColor", buttonColorVariant);
-	const iconCva = UIStyle.useCva("status.iconCva", statusIcon);
-	const separatorCva = UIStyle.useCva("status.separatorCva", statusSeparator);
+	const toastCva = UIOverrides.useCva("toast.cva", toastDefinition);
+	const buttonColor = UIOverrides.useMapper("toast.buttonColor", buttonColorVariant);
+	const iconCva = UIOverrides.useCva("status.iconCva", statusIconDefinition);
+	const separatorCva = UIOverrides.useCva("status.separatorCva", statusSeparatorDefinition);
 	const variantProps = {
 		variant,
 		...restProps
@@ -48,19 +48,26 @@ var Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) =>
 	});
 };
 var ToastContainer$1 = () => {
-	return /* @__PURE__ */ jsx(ToastContainer, {
-		className: (params) => {
-			return toastContainer({
-				position: params?.position,
-				className: params?.defaultClassName
-			});
-		},
-		toastClassName: toastWrapper,
-		autoClose: 2500,
-		icon: false,
-		closeButton: false,
-		hideProgressBar: true
-	});
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(ToastContainer, {
+			className: _temp,
+			toastClassName: toastWrapper,
+			autoClose: 2500,
+			icon: false,
+			closeButton: false,
+			hideProgressBar: true
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
 };
+function _temp(params) {
+	return toastContainer({
+		position: params?.position,
+		className: params?.defaultClassName
+	});
+}
 //#endregion
 export { Toast, ToastContainer$1 as ToastContainer };

package/dist/components/status/Toast/toast.cva.d.ts

@@ -1,18 +1,69 @@
-import { VariantProps } from 'class-variance-authority';
 import { ButtonVariantProps } from '../../buttons/Button/button.cva';
+import { UIOverrides } from '../../../config/uiOverrides.context';
 export declare const toastContainer: (props?: ({
     position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const toastWrapper: string;
-export declare const toast: (props?: ({
-    variant?: "contained" | "outlined" | null | undefined;
-    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
-    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ToastVariantProps extends VariantProps<typeof toast> {
+export declare const toastDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly outlined: "border bg-elevation-fill-default-1 text-text-default-1";
+            readonly contained: "text-text-inverted-1";
+        };
+        readonly color: {
+            readonly neutral: "";
+            readonly success: "";
+            readonly warning: "";
+            readonly error: "";
+        };
+        readonly position: {
+            readonly "bottom-right": "";
+            readonly "bottom-left": "";
+            readonly "bottom-center": "";
+            readonly "top-right": "";
+            readonly "top-left": "";
+            readonly "top-center": "";
+        };
+    }>;
+};
+export type ToastConfig = NonNullable<typeof toastDefinition.config>;
+export interface ToastVariantProps extends UIOverrides.VariantProps<ToastConfig> {
 }
 export declare const buttonColorVariant: (props: {
-    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
-    variant?: "contained" | "outlined" | null | undefined;
-    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
+    readonly variant?: "contained" | "outlined" | null | undefined;
+    readonly color?: "success" | "warning" | "error" | "neutral" | null | undefined;
+    readonly position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-center" | "top-center" | null | undefined;
 }) => Pick<ButtonVariantProps, "color" | "inverted"> | undefined;
+export declare const statusIconDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly outlined: "";
+            readonly contained: "text-text-inverted-1";
+        };
+        readonly color: {
+            readonly neutral: "";
+            readonly success: "";
+            readonly warning: "";
+            readonly error: "";
+        };
+    }>;
+};
+export type StatusIconConfig = NonNullable<typeof statusIconDefinition.config>;
+export declare const statusSeparatorDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly variant: {
+            readonly outlined: "";
+            readonly contained: "hidden";
+        };
+        readonly color: {
+            readonly neutral: "bg-elevation-outline-default-1";
+            readonly success: "bg-elevation-outline-success-1";
+            readonly warning: "bg-elevation-outline-warning-1";
+            readonly error: "bg-elevation-outline-error-1";
+        };
+    }>;
+};
+export type StatusSeparatorConfig = NonNullable<typeof statusSeparatorDefinition.config>;

package/dist/components/status/Toast/toast.cva.js

@@ -1,3 +1,4 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
@@ -11,72 +12,75 @@ var toastContainer = cva("m-toast-gap-margin-mobile w-auto gap-toast-gap-margin-
 	"top-center": "top-0"
 } } });
 var toastWrapper = clsx("m-0! min-h-0! w-auto! max-w-toast bg-transparent! p-0! shadow-none!");
-var toast = cva("m-0 inline-flex w-auto flex-col items-center overflow-hidden rounded-toast-rounding-default shadow-4 md:flex-row", {
-	variants: {
-		variant: {
-			outlined: "border bg-elevation-fill-default-1 text-text-default-1",
-			contained: "text-text-inverted-1"
-		},
-		color: {
-			neutral: "",
-			success: "",
-			warning: "",
-			error: ""
-		},
-		position: {
-			"bottom-right": "",
-			"bottom-left": "",
-			"bottom-center": "",
-			"top-right": "",
-			"top-left": "",
-			"top-center": ""
-		}
-	},
-	compoundVariants: [
-		{
-			variant: "outlined",
-			color: "neutral",
-			className: "border-elevation-outline-default-1"
-		},
-		{
-			variant: "outlined",
-			color: "success",
-			className: "border-elevation-outline-success-1"
-		},
-		{
-			variant: "outlined",
-			color: "warning",
-			className: "border-elevation-outline-warning-1"
+var toastDefinition = UIOverrides.defineConfig({
+	base: ["m-0 inline-flex w-auto flex-col items-center overflow-hidden rounded-toast-rounding-default shadow-4 md:flex-row"],
+	config: {
+		variants: {
+			variant: {
+				outlined: "border bg-elevation-fill-default-1 text-text-default-1",
+				contained: "text-text-inverted-1"
+			},
+			color: {
+				neutral: "",
+				success: "",
+				warning: "",
+				error: ""
+			},
+			position: {
+				"bottom-right": "",
+				"bottom-left": "",
+				"bottom-center": "",
+				"top-right": "",
+				"top-left": "",
+				"top-center": ""
+			}
 		},
-		{
+		compoundVariants: [
+			{
+				variant: "outlined",
+				color: "neutral",
+				className: "border-elevation-outline-default-1"
+			},
+			{
+				variant: "outlined",
+				color: "success",
+				className: "border-elevation-outline-success-1"
+			},
+			{
+				variant: "outlined",
+				color: "warning",
+				className: "border-elevation-outline-warning-1"
+			},
+			{
+				variant: "outlined",
+				color: "error",
+				className: "border-elevation-outline-error-1"
+			},
+			{
+				variant: "contained",
+				color: "neutral",
+				className: "bg-elevation-fill-inverted-1"
+			},
+			{
+				variant: "contained",
+				color: "success",
+				className: "bg-elevation-fill-success-1"
+			},
+			{
+				variant: "contained",
+				color: "warning",
+				className: "bg-elevation-fill-warning-1"
+			},
+			{
+				variant: "contained",
+				color: "error",
+				className: "bg-elevation-fill-error-1"
+			}
+		],
+		defaultVariants: {
 			variant: "outlined",
-			color: "error",
-			className: "border-elevation-outline-error-1"
-		},
-		{
-			variant: "contained",
-			color: "neutral",
-			className: "bg-elevation-fill-inverted-1"
-		},
-		{
-			variant: "contained",
-			color: "success",
-			className: "bg-elevation-fill-success-1"
-		},
-		{
-			variant: "contained",
-			color: "warning",
-			className: "bg-elevation-fill-warning-1"
-		},
-		{
-			variant: "contained",
-			color: "error",
-			className: "bg-elevation-fill-error-1"
+			color: "neutral"
 		}
-	],
-	defaultVariants: {
-		variant: "outlined",
-		color: "neutral"
 	}
 });
 var buttonColorVariant = compoundMapper({
@@ -140,5 +144,66 @@ var buttonColorVariant = compoundMapper({
 	},
 	default: { color: "secondary" }
 });
+var statusIconDefinition = UIOverrides.defineConfig({
+	base: ["size-6 shrink-0"],
+	config: {
+		variants: {
+			variant: {
+				outlined: "",
+				contained: "text-text-inverted-1"
+			},
+			color: {
+				neutral: "",
+				success: "",
+				warning: "",
+				error: ""
+			}
+		},
+		compoundVariants: [
+			{
+				variant: "outlined",
+				color: "neutral",
+				className: "text-text-default-2"
+			},
+			{
+				variant: "outlined",
+				color: "success",
+				className: "text-text-success-1"
+			},
+			{
+				variant: "outlined",
+				color: "warning",
+				className: "text-text-warning-1"
+			},
+			{
+				variant: "outlined",
+				color: "error",
+				className: "text-text-error-1"
+			}
+		],
+		defaultVariants: {
+			variant: "outlined",
+			color: "neutral"
+		}
+	}
+});
+var statusSeparatorDefinition = UIOverrides.defineConfig({
+	base: ["h-px shrink-0 self-stretch md:h-auto md:w-px"],
+	config: {
+		variants: {
+			variant: {
+				outlined: "",
+				contained: "hidden"
+			},
+			color: {
+				neutral: "bg-elevation-outline-default-1",
+				success: "bg-elevation-outline-success-1",
+				warning: "bg-elevation-outline-warning-1",
+				error: "bg-elevation-outline-error-1"
+			}
+		},
+		defaultVariants: { color: "neutral" }
+	}
+});
 //#endregion
-export { buttonColorVariant, toast, toastContainer, toastWrapper };
+export { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainer, toastDefinition, toastWrapper };