@povio/ui 3.0.0-rc.3 → 3.1.0

package/dist/components/shared/pagination/PaginationList.js

@@ -5,26 +5,23 @@ import { ChevronsRightIcon } from "../../../assets/icons/ChevronsRight.js";
 import { Button } from "../../buttons/Button/Button.js";
 import "../../../config/i18n.js";
 import { minWidth } from "./minWidth.cva.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 //#region src/components/shared/pagination/PaginationList.tsx
-var PaginationList = (t0) => {
-	const $ = c(61);
-	const { page, totalPages, size, color, variant, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange } = t0;
+var PaginationList = ({ page, totalPages, size, color, variant, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange }) => {
 	const { t } = useTranslation("ui");
 	const isPrevDisabled = page <= 1;
 	const isNextDisabled = page >= totalPages;
-	let t1;
-	if ($[0] !== color || $[1] !== onPageChange || $[2] !== page || $[3] !== size || $[4] !== totalPages || $[5] !== variant) {
+	const renderPageNumbers = useMemo(() => {
 		const pagesToShow = [];
 		pagesToShow.push(1);
 		if (page > 3) pagesToShow.push("ellipsis");
 		for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) pagesToShow.push(i);
 		if (page < totalPages - 2) pagesToShow.push("ellipsis");
 		if (totalPages > 1 && !pagesToShow.includes(totalPages)) pagesToShow.push(totalPages);
-		t1 = pagesToShow.map((p, index) => {
+		return pagesToShow.map((p, index) => {
 			if (p === "ellipsis") return /* @__PURE__ */ jsx(Button, {
 				variant,
 				color,
@@ -44,167 +41,67 @@ var PaginationList = (t0) => {
 				children: p.toString()
 			}, `page-${p}`);
 		});
-		$[0] = color;
-		$[1] = onPageChange;
-		$[2] = page;
-		$[3] = size;
-		$[4] = totalPages;
-		$[5] = variant;
-		$[6] = t1;
-	} else t1 = $[6];
-	const renderPageNumbers = t1;
+	}, [
+		page,
+		color,
+		size,
+		variant,
+		totalPages,
+		onPageChange
+	]);
 	if (totalPages <= 1) return null;
-	let t2;
-	if ($[7] !== isNextDisabled || $[8] !== onPageChange || $[9] !== page) {
-		t2 = () => {
-			if (!isNextDisabled) onPageChange?.(page + 1);
-		};
-		$[7] = isNextDisabled;
-		$[8] = onPageChange;
-		$[9] = page;
-		$[10] = t2;
-	} else t2 = $[10];
-	const onNext = t2;
-	let t3;
-	if ($[11] !== isPrevDisabled || $[12] !== onPageChange || $[13] !== page) {
-		t3 = () => {
-			if (!isPrevDisabled) onPageChange?.(page - 1);
-		};
-		$[11] = isPrevDisabled;
-		$[12] = onPageChange;
-		$[13] = page;
-		$[14] = t3;
-	} else t3 = $[14];
-	const onPrevious = t3;
-	let t4;
-	if ($[15] !== className) {
-		t4 = clsx("flex items-center gap-pagination-button-to-button", className);
-		$[15] = className;
-		$[16] = t4;
-	} else t4 = $[16];
-	let t5;
-	if ($[17] !== color || $[18] !== hideFirstLast || $[19] !== hideText || $[20] !== isPrevDisabled || $[21] !== onPageChange || $[22] !== size || $[23] !== t || $[24] !== variant) {
-		t5 = !hideFirstLast && /* @__PURE__ */ jsx(Button, {
-			onClick: () => onPageChange?.(1),
-			isDisabled: isPrevDisabled,
-			size,
-			color,
-			variant,
-			iconOnly: hideText,
-			icon: ChevronsLeftIcon,
-			children: t(_temp)
-		});
-		$[17] = color;
-		$[18] = hideFirstLast;
-		$[19] = hideText;
-		$[20] = isPrevDisabled;
-		$[21] = onPageChange;
-		$[22] = size;
-		$[23] = t;
-		$[24] = variant;
-		$[25] = t5;
-	} else t5 = $[25];
-	let t6;
-	if ($[26] !== color || $[27] !== hidePrevNext || $[28] !== hideText || $[29] !== isPrevDisabled || $[30] !== onPrevious || $[31] !== size || $[32] !== t || $[33] !== variant) {
-		t6 = !hidePrevNext && /* @__PURE__ */ jsx(Button, {
-			onClick: onPrevious,
-			isDisabled: isPrevDisabled,
-			size,
-			color,
-			variant,
-			iconOnly: hideText,
-			icon: ChevronLeftIcon,
-			children: t(_temp2)
-		});
-		$[26] = color;
-		$[27] = hidePrevNext;
-		$[28] = hideText;
-		$[29] = isPrevDisabled;
-		$[30] = onPrevious;
-		$[31] = size;
-		$[32] = t;
-		$[33] = variant;
-		$[34] = t6;
-	} else t6 = $[34];
-	const t7 = !hideNumbers && renderPageNumbers;
-	let t8;
-	if ($[35] !== color || $[36] !== hidePrevNext || $[37] !== hideText || $[38] !== isNextDisabled || $[39] !== onNext || $[40] !== size || $[41] !== t || $[42] !== variant) {
-		t8 = !hidePrevNext && /* @__PURE__ */ jsx(Button, {
-			onClick: onNext,
-			isDisabled: isNextDisabled,
-			size,
-			color,
-			variant,
-			iconOnly: hideText,
-			icon: ChevronRightIcon,
-			children: t(_temp3)
-		});
-		$[35] = color;
-		$[36] = hidePrevNext;
-		$[37] = hideText;
-		$[38] = isNextDisabled;
-		$[39] = onNext;
-		$[40] = size;
-		$[41] = t;
-		$[42] = variant;
-		$[43] = t8;
-	} else t8 = $[43];
-	let t9;
-	if ($[44] !== color || $[45] !== hideFirstLast || $[46] !== hideText || $[47] !== isNextDisabled || $[48] !== onPageChange || $[49] !== size || $[50] !== t || $[51] !== totalPages || $[52] !== variant) {
-		t9 = !hideFirstLast && /* @__PURE__ */ jsx(Button, {
-			onClick: () => onPageChange?.(totalPages),
-			isDisabled: isNextDisabled,
-			size,
-			color,
-			variant,
-			iconOnly: hideText,
-			icon: ChevronsRightIcon,
-			children: t(_temp4)
-		});
-		$[44] = color;
-		$[45] = hideFirstLast;
-		$[46] = hideText;
-		$[47] = isNextDisabled;
-		$[48] = onPageChange;
-		$[49] = size;
-		$[50] = t;
-		$[51] = totalPages;
-		$[52] = variant;
-		$[53] = t9;
-	} else t9 = $[53];
-	let t10;
-	if ($[54] !== t4 || $[55] !== t5 || $[56] !== t6 || $[57] !== t7 || $[58] !== t8 || $[59] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("nav", {
-			className: t4,
-			children: [
-				t5,
-				t6,
-				t7,
-				t8,
-				t9
-			]
-		});
-		$[54] = t4;
-		$[55] = t5;
-		$[56] = t6;
-		$[57] = t7;
-		$[58] = t8;
-		$[59] = t9;
-		$[60] = t10;
-	} else t10 = $[60];
-	return t10;
+	const onNext = () => {
+		if (!isNextDisabled) onPageChange?.(page + 1);
+	};
+	const onPrevious = () => {
+		if (!isPrevDisabled) onPageChange?.(page - 1);
+	};
+	return /* @__PURE__ */ jsxs("nav", {
+		className: clsx("flex items-center gap-pagination-button-to-button", className),
+		children: [
+			!hideFirstLast && /* @__PURE__ */ jsx(Button, {
+				onClick: () => onPageChange?.(1),
+				isDisabled: isPrevDisabled,
+				size,
+				color,
+				variant,
+				iconOnly: hideText,
+				icon: ChevronsLeftIcon,
+				children: t(($) => $.ui.pagination.firstBtn)
+			}),
+			!hidePrevNext && /* @__PURE__ */ jsx(Button, {
+				onClick: onPrevious,
+				isDisabled: isPrevDisabled,
+				size,
+				color,
+				variant,
+				iconOnly: hideText,
+				icon: ChevronLeftIcon,
+				children: t(($) => $.ui.pagination.backBtn)
+			}),
+			!hideNumbers && renderPageNumbers,
+			!hidePrevNext && /* @__PURE__ */ jsx(Button, {
+				onClick: onNext,
+				isDisabled: isNextDisabled,
+				size,
+				color,
+				variant,
+				iconOnly: hideText,
+				icon: ChevronRightIcon,
+				children: t(($) => $.ui.pagination.nextBtn)
+			}),
+			!hideFirstLast && /* @__PURE__ */ jsx(Button, {
+				onClick: () => onPageChange?.(totalPages),
+				isDisabled: isNextDisabled,
+				size,
+				color,
+				variant,
+				iconOnly: hideText,
+				icon: ChevronsRightIcon,
+				children: t(($) => $.ui.pagination.lastBtn)
+			})
+		]
+	});
 };
-function _temp($) {
-	return $.ui.pagination.firstBtn;
-}
-function _temp2($_0) {
-	return $_0.ui.pagination.backBtn;
-}
-function _temp3($_1) {
-	return $_1.ui.pagination.nextBtn;
-}
-function _temp4($_2) {
-	return $_2.ui.pagination.lastBtn;
-}
 //#endregion
 export { PaginationList };

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

@@ -3,112 +3,45 @@ import { Typography } from "../../text/Typography/Typography.js";
 import { Loader } from "../Loader/Loader.js";
 import { alertDefinition } from "./alert.cva.js";
 import { statusIconDefinition, statusSeparatorDefinition } from "../shared/status.cva.js";
-import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/status/Alert/Alert.tsx
-var Alert = (t0) => {
-	const $ = c(31);
-	const { variant, color, text, isLoading: t1, rightContent, hasSeparator, icon: Icon, className } = t0;
-	const isLoading = t1 === void 0 ? false : t1;
+var Alert = ({ variant, color, text, isLoading = false, rightContent, hasSeparator, icon: Icon, className }) => {
 	const alertCva = UIOverrides.useCva("alert.cva", alertDefinition);
 	const iconCva = UIOverrides.useCva("status.iconCva", statusIconDefinition);
 	const separatorCva = UIOverrides.useCva("status.separatorCva", statusSeparatorDefinition);
-	let t2;
-	if ($[0] !== alertCva || $[1] !== className || $[2] !== color || $[3] !== variant) {
-		t2 = alertCva({
+	return /* @__PURE__ */ jsx("div", {
+		className: alertCva({
 			variant,
 			color,
 			className
-		});
-		$[0] = alertCva;
-		$[1] = className;
-		$[2] = color;
-		$[3] = variant;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== isLoading) {
-		t3 = isLoading && /* @__PURE__ */ jsx(Loader, {
-			size: "default",
-			className: "shrink-0"
-		});
-		$[5] = isLoading;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== Icon || $[8] !== color || $[9] !== iconCva || $[10] !== isLoading || $[11] !== variant) {
-		t4 = !isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({
-			variant,
-			color
-		}) });
-		$[7] = Icon;
-		$[8] = color;
-		$[9] = iconCva;
-		$[10] = isLoading;
-		$[11] = variant;
-		$[12] = t4;
-	} else t4 = $[12];
-	let t5;
-	if ($[13] !== text) {
-		t5 = /* @__PURE__ */ jsx(Typography, {
-			size: "label-2",
-			children: text
-		});
-		$[13] = text;
-		$[14] = t5;
-	} else t5 = $[14];
-	let t6;
-	if ($[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full items-start gap-alert-gap-icon-to-text px-alert-side-default py-alert-height-content",
-			children: [
-				t3,
-				t4,
-				t5
-			]
-		});
-		$[15] = t3;
-		$[16] = t4;
-		$[17] = t5;
-		$[18] = t6;
-	} else t6 = $[18];
-	let t7;
-	if ($[19] !== color || $[20] !== hasSeparator || $[21] !== rightContent || $[22] !== separatorCva || $[23] !== variant) {
-		t7 = !!rightContent && /* @__PURE__ */ jsxs(Fragment, { children: [hasSeparator && /* @__PURE__ */ jsx("div", { className: separatorCva({
-			variant,
-			color
-		}) }), /* @__PURE__ */ jsx("div", {
-			className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-alert-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop",
-			children: rightContent
-		})] });
-		$[19] = color;
-		$[20] = hasSeparator;
-		$[21] = rightContent;
-		$[22] = separatorCva;
-		$[23] = variant;
-		$[24] = t7;
-	} else t7 = $[24];
-	let t8;
-	if ($[25] !== t6 || $[26] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex w-auto flex-col items-center md:flex-row",
-			children: [t6, t7]
-		});
-		$[25] = t6;
-		$[26] = t7;
-		$[27] = t8;
-	} else t8 = $[27];
-	let t9;
-	if ($[28] !== t2 || $[29] !== t8) {
-		t9 = /* @__PURE__ */ jsx("div", {
-			className: t2,
-			children: t8
-		});
-		$[28] = t2;
-		$[29] = t8;
-		$[30] = t9;
-	} else t9 = $[30];
-	return t9;
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-start gap-alert-gap-icon-to-text px-alert-side-default py-alert-height-content",
+				children: [
+					isLoading && /* @__PURE__ */ jsx(Loader, {
+						size: "default",
+						className: "shrink-0"
+					}),
+					!isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({
+						variant,
+						color
+					}) }),
+					/* @__PURE__ */ jsx(Typography, {
+						size: "label-2",
+						children: text
+					})
+				]
+			}), !!rightContent && /* @__PURE__ */ jsxs(Fragment, { children: [hasSeparator && /* @__PURE__ */ jsx("div", { className: separatorCva({
+				variant,
+				color
+			}) }), /* @__PURE__ */ jsx("div", {
+				className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-alert-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop",
+				children: rightContent
+			})] })]
+		})
+	});
 };
 //#endregion
 export { Alert };

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

@@ -1,89 +1,34 @@
 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 = (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({
+var Loader = ({ size, className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: loaderWrapper({
 			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,
+		}),
+		children: /* @__PURE__ */ jsxs("svg", {
+			className: loader({
+				size,
+				className
+			}),
 			xmlns: "http://www.w3.org/2000/svg",
 			fill: "none",
 			viewBox: "0 0 24 24",
 			...props,
-			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;
+			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"
+			})]
+		})
+	});
 };
 //#endregion
 export { Loader };

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

@@ -3,8 +3,7 @@ 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 { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainer, toastDefinition, toastWrapper } from "./toast.cva.js";
-import { c } from "react/compiler-runtime";
+import { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainerDefinition, toastDefinition, toastWrapper } from "./toast.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ToastContainer } from "react-toastify";
 //#region src/components/status/Toast/Toast.tsx
@@ -48,26 +47,22 @@ var Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) =>
 	});
 };
 var ToastContainer$1 = () => {
-	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
+	const uiConfig = UIConfig.useConfig();
+	const containerCva = UIOverrides.useCva("toast.containerCva", toastContainerDefinition);
+	return /* @__PURE__ */ jsx(ToastContainer, {
+		position: uiConfig.toast.position,
+		className: (params) => {
+			return containerCva({
+				position: params?.position ?? uiConfig.toast.position,
+				className: params?.defaultClassName
+			});
+		},
+		toastClassName: toastWrapper,
+		autoClose: 2500,
+		icon: false,
+		closeButton: false,
+		hideProgressBar: true
 	});
-}
+};
 //#endregion
 export { Toast, ToastContainer$1 as ToastContainer };

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

@@ -1,8 +1,19 @@
 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 toastContainerDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly position: {
+            readonly "bottom-right": "right-0 bottom-0";
+            readonly "bottom-left": "bottom-0 left-0";
+            readonly "top-right": "top-0 right-0";
+            readonly "top-left": "top-0 left-0";
+            readonly "bottom-center": "bottom-0";
+            readonly "top-center": "top-0";
+        };
+    }>;
+};
+export type ToastContainerConfig = NonNullable<typeof toastContainerDefinition.config>;
 export declare const toastWrapper: string;
 export declare const toastDefinition: {
     base: string[];

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

@@ -1,16 +1,18 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { clsx } from "clsx";
-import { cva } from "class-variance-authority";
 //#region src/components/status/Toast/toast.cva.ts
-var toastContainer = cva("m-toast-gap-margin-mobile w-auto gap-toast-gap-margin-mobile p-0 md:m-toast-gap-margin-desktop md:gap-toast-gap-margin-desktop", { variants: { position: {
-	"bottom-right": "right-0 bottom-0",
-	"bottom-left": "bottom-0 left-0",
-	"top-right": "top-0 right-0",
-	"top-left": "top-0 left-0",
-	"bottom-center": "bottom-0",
-	"top-center": "top-0"
-} } });
+var toastContainerDefinition = UIOverrides.defineConfig({
+	base: ["m-toast-gap-margin-mobile w-auto gap-toast-gap-margin-mobile p-0 md:m-toast-gap-margin-desktop md:gap-toast-gap-margin-desktop"],
+	config: { variants: { position: {
+		"bottom-right": "right-0 bottom-0",
+		"bottom-left": "bottom-0 left-0",
+		"top-right": "top-0 right-0",
+		"top-left": "top-0 left-0",
+		"bottom-center": "bottom-0",
+		"top-center": "top-0"
+	} } }
+});
 var toastWrapper = clsx("m-0! min-h-0! w-auto! max-w-toast bg-transparent! p-0! shadow-none!");
 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"],
@@ -206,4 +208,4 @@ var statusSeparatorDefinition = UIOverrides.defineConfig({
 	}
 });
 //#endregion
-export { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainer, toastDefinition, toastWrapper };
+export { buttonColorVariant, statusIconDefinition, statusSeparatorDefinition, toastContainerDefinition, toastDefinition, toastWrapper };