@povio/ui 2.3.2 → 3.0.0-rc.1

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

@@ -1,65 +1,70 @@
 import { Toast } from "./Toast.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
 import { toast } from "react-toastify";
 //#region src/components/status/Toast/useToast.tsx
 var useToast = () => {
-	const successToast = useCallback((params, options) => {
-		return toast.success(/* @__PURE__ */ jsx(Toast, {
-			color: "success",
-			...params
-		}), {
-			...options,
-			position: params.position,
-			data: { variant: params.variant }
-		});
-	}, []);
-	const errorToast = useCallback((params, options) => {
-		return toast.error(/* @__PURE__ */ jsx(Toast, {
-			color: "error",
-			...params
-		}), {
-			...options,
-			position: params.position,
-			data: { variant: params.variant }
-		});
-	}, []);
-	const warningToast = useCallback((params, options) => {
-		return toast.warning(/* @__PURE__ */ jsx(Toast, {
-			color: "warning",
-			...params
-		}), {
-			...options,
-			position: params.position,
-			data: { variant: params.variant }
-		});
-	}, []);
-	const neutralToast = useCallback((params, options) => {
-		return toast.info(/* @__PURE__ */ jsx(Toast, {
-			color: "neutral",
-			...params
-		}), {
-			...options,
-			position: params.position,
-			data: { variant: params.variant }
-		});
-	}, []);
-	const closeToast = useCallback((id) => {
-		toast.dismiss(id);
-	}, []);
-	return useMemo(() => ({
-		successToast,
-		errorToast,
-		warningToast,
-		neutralToast,
-		closeToast
-	}), [
-		successToast,
-		errorToast,
-		warningToast,
-		neutralToast,
-		closeToast
-	]);
+	const $ = c(1);
+	const successToast = _temp;
+	const errorToast = _temp2;
+	const warningToast = _temp3;
+	const neutralToast = _temp4;
+	const closeToast = _temp5;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			successToast,
+			errorToast,
+			warningToast,
+			neutralToast,
+			closeToast
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
 };
+function _temp(params, options) {
+	return toast.success(/* @__PURE__ */ jsx(Toast, {
+		color: "success",
+		...params
+	}), {
+		...options,
+		position: params.position,
+		data: { variant: params.variant }
+	});
+}
+function _temp2(params_0, options_0) {
+	return toast.error(/* @__PURE__ */ jsx(Toast, {
+		color: "error",
+		...params_0
+	}), {
+		...options_0,
+		position: params_0.position,
+		data: { variant: params_0.variant }
+	});
+}
+function _temp3(params_1, options_1) {
+	return toast.warning(/* @__PURE__ */ jsx(Toast, {
+		color: "warning",
+		...params_1
+	}), {
+		...options_1,
+		position: params_1.position,
+		data: { variant: params_1.variant }
+	});
+}
+function _temp4(params_2, options_2) {
+	return toast.info(/* @__PURE__ */ jsx(Toast, {
+		color: "neutral",
+		...params_2
+	}), {
+		...options_2,
+		position: params_2.position,
+		data: { variant: params_2.variant }
+	});
+}
+function _temp5(id) {
+	toast.dismiss(id);
+}
 //#endregion
 export { useToast };

package/dist/components/status/shared/status.cva.d.ts

@@ -1,8 +1,30 @@
-export declare const statusIcon: (props?: ({
-    variant?: "contained" | "outlined" | null | undefined;
-    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const statusSeparator: (props?: ({
-    variant?: "contained" | "outlined" | null | undefined;
-    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+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 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";
+        };
+    }>;
+};

package/dist/components/status/shared/status.cva.js

@@ -1,59 +1,65 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/status/shared/status.cva.ts
-var statusIcon = cva("size-6 shrink-0", {
-	variants: {
-		variant: {
-			outlined: "",
-			contained: "text-text-inverted-1"
+var statusIconDefinition = UIOverrides.defineConfig({
+	base: ["size-6 shrink-0"],
+	config: {
+		variants: {
+			variant: {
+				outlined: "",
+				contained: "text-text-inverted-1"
+			},
+			color: {
+				neutral: "",
+				success: "",
+				warning: "",
+				error: ""
+			}
 		},
-		color: {
-			neutral: "",
-			success: "",
-			warning: "",
-			error: ""
-		}
-	},
-	compoundVariants: [
-		{
-			variant: "outlined",
-			color: "neutral",
-			class: "text-text-default-2"
-		},
-		{
-			variant: "outlined",
-			color: "success",
-			class: "text-text-success-1"
-		},
-		{
+		compoundVariants: [
+			{
+				variant: "outlined",
+				color: "neutral",
+				class: "text-text-default-2"
+			},
+			{
+				variant: "outlined",
+				color: "success",
+				class: "text-text-success-1"
+			},
+			{
+				variant: "outlined",
+				color: "warning",
+				class: "text-text-warning-1"
+			},
+			{
+				variant: "outlined",
+				color: "error",
+				class: "text-text-error-1"
+			}
+		],
+		defaultVariants: {
 			variant: "outlined",
-			color: "warning",
-			class: "text-text-warning-1"
-		},
-		{
-			variant: "outlined",
-			color: "error",
-			class: "text-text-error-1"
+			color: "neutral"
 		}
-	],
-	defaultVariants: {
-		variant: "outlined",
-		color: "neutral"
 	}
 });
-var statusSeparator = cva("h-px shrink-0 self-stretch md:h-auto md:w-px", {
-	variants: {
-		variant: {
-			outlined: "",
-			contained: "hidden"
+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"
+			}
 		},
-		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" }
+		defaultVariants: { color: "neutral" }
+	}
 });
 //#endregion
-export { statusIcon, statusSeparator };
+export { statusIconDefinition, statusSeparatorDefinition };

package/dist/components/table/CellText.js

@@ -1,14 +1,14 @@
-import { UIStyle } from "../../config/uiStyle.context.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { Typography } from "../text/Typography/Typography.js";
 import { UIConfig } from "../../config/uiConfig.context.js";
-import { tableCellText } from "./table.cva.js";
+import { tableCellTextDefinition } from "./table.cva.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/table/CellText.tsx
 var CellText = (props) => {
 	const uiConfig = UIConfig.useConfig();
 	const { variant = uiConfig.tableCellText.variant, size = uiConfig.tableCellText.size, children, style, className } = props;
 	return /* @__PURE__ */ jsx(Typography, {
-		className: UIStyle.useCva("table.cellTextCva", tableCellText)({ className }),
+		className: UIOverrides.useCva("table.cellTextCva", tableCellTextDefinition)({ className }),
 		as: "span",
 		variant,
 		size,

package/dist/components/table/ColumnConfig.js

@@ -4,16 +4,37 @@ import { Checkbox } from "../inputs/Checkbox/Checkbox.js";
 import { Modal } from "../overlays/Modal/Modal.js";
 import { Table } from "./Table.js";
 import { useTranslationMemo } from "../../hooks/useTranslationMemo.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 //#region src/components/table/ColumnConfig.tsx
-var VisibilityCell = ({ original, onToggle }) => /* @__PURE__ */ jsx(Checkbox, {
-	isSelected: original.visible,
-	onChange: () => onToggle(original.id),
-	hideLabel: true,
-	children: original.label
-});
+var VisibilityCell = (t0) => {
+	const $ = c(7);
+	const { original, onToggle } = t0;
+	let t1;
+	if ($[0] !== onToggle || $[1] !== original.id) {
+		t1 = () => onToggle(original.id);
+		$[0] = onToggle;
+		$[1] = original.id;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = original.label;
+	let t3;
+	if ($[3] !== original.visible || $[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Checkbox, {
+			isSelected: original.visible,
+			onChange: t1,
+			hideLabel: true,
+			children: t2
+		});
+		$[3] = original.visible;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+};
 var getColumns = (t, handleToggleVisibility) => [{
 	id: "name",
 	header: t(($) => $.ui.table.column, { ns: "ui" }),
@@ -28,56 +49,139 @@ var getColumns = (t, handleToggleVisibility) => [{
 		onToggle: handleToggleVisibility
 	})
 }];
-function ColumnConfigModal({ isOpen, onClose, configColumns, visibleColumns, onVisibilityChange, onOrderChange }) {
+function ColumnConfigModal(t0) {
+	const $ = c(27);
+	const { isOpen, onClose, configColumns, visibleColumns, onVisibilityChange, onOrderChange } = t0;
 	const { t } = useTranslation("ui");
-	const [data, setData] = useState([]);
-	useEffect(() => {
-		setData(configColumns.map((column) => {
-			const columnId = column.id ?? column.accessorKey;
-			return {
-				id: columnId,
-				label: column.header,
-				visible: visibleColumns?.[columnId] ?? true
-			};
-		}));
-	}, [configColumns, visibleColumns]);
-	const handleToggleVisibility = useCallback((columnId) => {
-		onVisibilityChange({
-			...visibleColumns,
-			[columnId]: !visibleColumns[columnId]
-		});
-	}, [visibleColumns, onVisibilityChange]);
-	const columns = useTranslationMemo(useCallback((translateFn) => getColumns(translateFn, handleToggleVisibility), [handleToggleVisibility]));
-	const handleReorder = useCallback((reorderedItems) => {
-		setData(reorderedItems);
-		onOrderChange(reorderedItems.map((item) => item.id));
-	}, [onOrderChange]);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[0] = t1;
+	} else t1 = $[0];
+	const [data, setData] = useState(t1);
+	let t2;
+	let t3;
+	if ($[1] !== configColumns || $[2] !== visibleColumns) {
+		t2 = () => {
+			setData(configColumns.map((column) => {
+				const columnId = column.id ?? column.accessorKey;
+				return {
+					id: columnId,
+					label: column.header,
+					visible: visibleColumns?.[columnId] ?? true
+				};
+			}));
+		};
+		t3 = [configColumns, visibleColumns];
+		$[1] = configColumns;
+		$[2] = visibleColumns;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t2 = $[3];
+		t3 = $[4];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[5] !== onVisibilityChange || $[6] !== visibleColumns) {
+		t4 = (columnId_0) => {
+			onVisibilityChange({
+				...visibleColumns,
+				[columnId_0]: !visibleColumns[columnId_0]
+			});
+		};
+		$[5] = onVisibilityChange;
+		$[6] = visibleColumns;
+		$[7] = t4;
+	} else t4 = $[7];
+	const handleToggleVisibility = t4;
+	let t5;
+	if ($[8] !== handleToggleVisibility) {
+		t5 = (translateFn) => getColumns(translateFn, handleToggleVisibility);
+		$[8] = handleToggleVisibility;
+		$[9] = t5;
+	} else t5 = $[9];
+	const columns = useTranslationMemo(t5);
+	let t6;
+	if ($[10] !== onOrderChange) {
+		t6 = (reorderedItems) => {
+			setData(reorderedItems);
+			onOrderChange(reorderedItems.map(_temp));
+		};
+		$[10] = onOrderChange;
+		$[11] = t6;
+	} else t6 = $[11];
+	const handleReorder = t6;
 	if (!isOpen) return null;
-	return /* @__PURE__ */ jsx(Modal, {
-		isOpen,
-		onClose,
-		showCloseIcon: true,
-		children: /* @__PURE__ */ jsxs("div", {
+	let t7;
+	if ($[12] !== t) {
+		t7 = t(_temp2);
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Typography, {
+			as: "h2",
+			variant: "prominent-1",
+			size: "title-5",
+			children: t7
+		});
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== columns || $[17] !== data || $[18] !== handleReorder) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: "max-h-96 overflow-y-auto",
+			children: /* @__PURE__ */ jsx(Table, {
+				items: data,
+				columns,
+				showCellBorder: true,
+				className: "w-full",
+				enableDragDrop: true,
+				getRowId: _temp3,
+				onReorder: handleReorder
+			})
+		});
+		$[16] = columns;
+		$[17] = data;
+		$[18] = handleReorder;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t8 || $[21] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-2 p-4",
-			children: [/* @__PURE__ */ jsx(Typography, {
-				as: "h2",
-				variant: "prominent-1",
-				size: "title-5",
-				children: t(($) => $.ui.table.configureColumns)
-			}), /* @__PURE__ */ jsx("div", {
-				className: "max-h-96 overflow-y-auto",
-				children: /* @__PURE__ */ jsx(Table, {
-					items: data,
-					columns,
-					showCellBorder: true,
-					className: "w-full",
-					enableDragDrop: true,
-					getRowId: (row) => row.id,
-					onReorder: handleReorder
-				})
-			})]
-		})
-	});
+			children: [t8, t9]
+		});
+		$[20] = t8;
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== isOpen || $[24] !== onClose || $[25] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Modal, {
+			isOpen,
+			onClose,
+			showCloseIcon: true,
+			children: t10
+		});
+		$[23] = isOpen;
+		$[24] = onClose;
+		$[25] = t10;
+		$[26] = t11;
+	} else t11 = $[26];
+	return t11;
+}
+function _temp3(row) {
+	return row.id;
+}
+function _temp2($) {
+	return $.ui.table.configureColumns;
+}
+function _temp(item) {
+	return item.id;
 }
 //#endregion
 export { ColumnConfigModal };

package/dist/components/table/HeaderText.js

@@ -1,14 +1,14 @@
-import { UIStyle } from "../../config/uiStyle.context.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { Typography } from "../text/Typography/Typography.js";
 import { UIConfig } from "../../config/uiConfig.context.js";
-import { tableHeaderText } from "./table.cva.js";
+import { tableHeaderTextDefinition } from "./table.cva.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/table/HeaderText.tsx
 var HeaderText = (props) => {
 	const uiConfig = UIConfig.useConfig();
 	const { variant = uiConfig.tableHeaderText.variant, size = uiConfig.tableHeaderText.size, children, style, className } = props;
 	return /* @__PURE__ */ jsx(Typography, {
-		className: UIStyle.useCva("table.headerTextCva", tableHeaderText)({ className }),
+		className: UIOverrides.useCva("table.headerTextCva", tableHeaderTextDefinition)({ className }),
 		as: "span",
 		variant,
 		size,

package/dist/components/table/InfiniteTable.js

@@ -1,28 +1,79 @@
 import { Loader } from "../status/Loader/Loader.js";
 import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
 import { Table } from "./Table.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
 //#region src/components/table/InfiniteTable.tsx
-var InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage, ...rest }) => {
-	const { ref } = useIntersectionObserver({
-		onIntersection: useCallback(() => {
+var InfiniteTable = (t0) => {
+	const $ = c(20);
+	let fetchNextPage;
+	let hasNextPage;
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({hasNextPage, isFetchingNextPage: t1, fetchNextPage, ...rest} = t0);
+		$[0] = t0;
+		$[1] = fetchNextPage;
+		$[2] = hasNextPage;
+		$[3] = rest;
+		$[4] = t1;
+	} else {
+		fetchNextPage = $[1];
+		hasNextPage = $[2];
+		rest = $[3];
+		t1 = $[4];
+	}
+	const isFetchingNextPage = t1 === void 0 ? false : t1;
+	let t2;
+	if ($[5] !== fetchNextPage || $[6] !== hasNextPage || $[7] !== isFetchingNextPage) {
+		t2 = () => {
 			if (!isFetchingNextPage && hasNextPage) fetchNextPage();
-		}, [
-			isFetchingNextPage,
-			hasNextPage,
-			fetchNextPage
-		]),
-		rootMargin: "100px"
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col",
-		children: [/* @__PURE__ */ jsx(Table, { ...rest }), (hasNextPage || isFetchingNextPage) && /* @__PURE__ */ jsx("div", {
+		};
+		$[5] = fetchNextPage;
+		$[6] = hasNextPage;
+		$[7] = isFetchingNextPage;
+		$[8] = t2;
+	} else t2 = $[8];
+	const handleLoadMore = t2;
+	let t3;
+	if ($[9] !== handleLoadMore) {
+		t3 = {
+			onIntersection: handleLoadMore,
+			rootMargin: "100px"
+		};
+		$[9] = handleLoadMore;
+		$[10] = t3;
+	} else t3 = $[10];
+	const { ref } = useIntersectionObserver(t3);
+	let t4;
+	if ($[11] !== rest) {
+		t4 = /* @__PURE__ */ jsx(Table, { ...rest });
+		$[11] = rest;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== hasNextPage || $[14] !== isFetchingNextPage || $[15] !== ref) {
+		t5 = (hasNextPage || isFetchingNextPage) && /* @__PURE__ */ jsx("div", {
 			ref,
 			className: "flex justify-center py-4",
 			children: /* @__PURE__ */ jsx(Loader, {})
-		})]
-	});
+		});
+		$[13] = hasNextPage;
+		$[14] = isFetchingNextPage;
+		$[15] = ref;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== t4 || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col",
+			children: [t4, t5]
+		});
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
 };
 //#endregion
 export { InfiniteTable };