@websline/system-components 1.3.24 → 1.3.26

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.d.ts

@@ -1,161 +1,131 @@
 export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     size: {
-        small: {
-            button: string;
-        };
         medium: {
-            button: string;
-            span: string;
+            content: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, undefined, {
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     size: {
-        small: {
-            button: string;
-        };
         medium: {
-            button: string;
-            span: string;
+            content: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, import("tailwind-variants").TVReturnType<{
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     size: {
-        small: {
-            button: string;
-        };
         medium: {
-            button: string;
-            span: string;
+            content: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, undefined, unknown, unknown, undefined>>;
 export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnType<{
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, undefined, {
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, import("tailwind-variants").TVReturnType<{
     isActive: {
         true: {
-            button: string;
+            base: string;
         };
         false: {
-            button: string;
+            base: string;
         };
     };
     width: {
         full: {
             base: string;
-            button: string;
         };
     };
 }, {
     base: string;
-    button: string;
     content: string;
     icon: string;
-    span: string;
     trigger: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.js

@@ -2,36 +2,28 @@ import { tv } from "../../../utils/tailwind.js";
 
 const toggleGroupItemVariants = tv({
 	slots: {
-		base: "relative h-full whitespace-nowrap",
-		button:
-			"block h-full cursor-pointer rounded-sm bg-transparent ui-select-label font-medium transition-[background,color]",
-		content: "relative z-2 flex items-center justify-center",
-		icon: "shrink-0",
-		span: "",
+		base: "relative inline-flex h-full cursor-pointer items-center justify-center rounded-sm bg-transparent px-1 ui-select-label font-medium whitespace-nowrap transition-[background,color]",
+		content: "relative z-2",
+		icon: "relative z-2 shrink-0",
 		trigger: "absolute inset-0 z-1 rounded-sm bg-white shadow-sm",
 	},
 	variants: {
 		isActive: {
 			true: {
-				button: "text-neutral-900 dark:text-neutral-200",
+				base: "text-neutral-900 dark:text-neutral-200",
 			},
 			false: {
-				button: "text-neutral-500",
+				base: "text-neutral-500",
 			},
 		},
 		size: {
-			small: {
-				button: "px-1",
-			},
 			medium: {
-				button: "px-2.5",
-				span: "px-2",
+				content: "px-2",
 			},
 		},
 		width: {
 			full: {
 				base: "w-full",
-				button: "w-full",
 			},
 		},
 	},
@@ -39,16 +31,14 @@ const toggleGroupItemVariants = tv({
 		{
 			appearance: "default",
 			class: {
-				button:
-					"hover:bg-neutral-300 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
+				base: "hover:bg-neutral-300 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
 				trigger: "dark:bg-neutral-700",
 			},
 		},
 		{
 			appearance: "raised",
 			class: {
-				button:
-					"hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
+				base: "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
 				trigger: "dark:bg-neutral-800",
 			},
 		},
@@ -57,26 +47,23 @@ const toggleGroupItemVariants = tv({
 
 const toggleGroupItemTabVariants = tv({
 	slots: {
-		base: "relative h-full whitespace-nowrap text-neutral-900 dark:text-neutral-200",
-		button: "h-full cursor-pointer ui-button-default transition-[color]",
-		content: "flex items-center justify-center gap-1",
+		base: "relative inline-flex h-full cursor-pointer items-center justify-center gap-1 ui-button-default whitespace-nowrap transition-[color]",
+		content: "",
 		icon: "shrink-0",
-		span: "",
 		trigger: "absolute -bottom-px left-0 h-0.5 w-full rounded-t-xs bg-current",
 	},
 	variants: {
 		isActive: {
 			true: {
-				button: "text-current",
+				base: "text-neutral-900 dark:text-neutral-200",
 			},
 			false: {
-				button: "text-neutral-500 hover:text-current",
+				base: "text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-200",
 			},
 		},
 		width: {
 			full: {
 				base: "w-full",
-				button: "w-full",
 			},
 		},
 	},

package/dist/components/organisms/notificationGroup/NotificationGroup.svelte

@@ -1,68 +1,100 @@
 <script>
-	import { onMount } from "svelte";
-	import { fly } from "svelte/transition";
+	import { settled } from "svelte";
 	import { cubicOut } from "svelte/easing";
-	import { Notification } from "../../../index.js";
+	import { fly } from "svelte/transition";
+	import { SvelteMap } from "svelte/reactivity";
+	import { NOTIFICATION_POSITIONS } from "../../../utils/notification.js";
 	import { notificationGroupVariants } from "./notificationGroup.variants.js";
 
-	onMount(() => {
-		document.body.addEventListener("notification:show", addNotification);
+	const MOVE_MS = 400;
+	const IN_MS = 220;
+	const STAGGER = MOVE_MS - 200;
 
-		return () => {
-			document.body.removeEventListener("notification:show", addNotification);
-		};
-	});
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to each notification column
+	 */
 
-	const addNotification = (e) => {
-		const { detail } = e;
+	/** @type {Props} */
+	let { class: className = "" } = $props();
 
-		if (detail.position === "bottom-left") {
-			dataBottomLeft.push(detail);
-		} else if (detail.position === "bottom-right") {
-			dataBottomRight.push(detail);
+	let data = new SvelteMap();
+	let showColumns = $state(false);
+
+	const zPoints = {};
+	let zOrder = $state([]);
+
+	let styles = $derived(notificationGroupVariants());
+
+	const handleShow = async (e) => {
+		if (!showColumns) {
+			showColumns = true;
+			await settled();
 		}
+
+		const { detail } = e;
+		data.set(detail.id, detail);
+
+		updateZOrder(detail.position);
 	};
 
-	let dataBottomLeft = $state([]);
-	let dataBottomRight = $state([]);
+	const handleClose = (id) => {
+		data.delete(id);
+	};
 
-	let { bottomLeft, bottomRight } = $derived(notificationGroupVariants());
+	const handleLastClose = () => {
+		showColumns = false;
+	};
 
-	const MOVE_MS = 400;
-	const IN_MS = 220;
-	const STAGGER = MOVE_MS - 200;
+	// ensure the column with the latest update is on top
+	const updateZOrder = (topPosition) => {
+		zPoints[topPosition] = Date.now();
 
-	const handleClose = (id, position) => {
-		if (position === "bottom-left") {
-			const index = dataBottomLeft.findIndex((n) => n.id === id);
-			if (index !== -1) dataBottomLeft.splice(index, 1);
-		} else if (position === "bottom-right") {
-			const index = dataBottomRight.findIndex((n) => n.id === id);
-			if (index !== -1) dataBottomRight.splice(index, 1);
-		}
+		zOrder = Object.entries(zPoints)
+			.sort(([, aTs], [, bTs]) => aTs - bTs)
+			.map(([key]) => key);
 	};
 </script>
 
-{#each [{ data: dataBottomLeft, class: bottomLeft(), x: -32, position: "bottom-left" }, { data: dataBottomRight, class: bottomRight(), x: 32, position: "bottom-right" }] as { data, class: cls, x, position }, idx (idx)}
-	<div class={cls}>
-		{#each data as item, i (item.id)}
+<svelte:body onnotification:show={handleShow} />
+
+{#snippet column(position, x = 0, y = 0)}
+	{@const items = [...data.values()].filter((item) => item.position === position)}
+	<div
+		class={styles.base({
+			class: className,
+			position,
+			zOrder: zOrder.findIndex((key) => key === position),
+		})}>
+		{#each items as { id, el, props }, i (id)}
 			<div
 				in:fly={{
 					x,
-					y: 0,
+					y,
 					duration: IN_MS,
-					delay: i === data.length - 1 ? STAGGER : 0,
+					delay: i === items.length - 1 ? STAGGER : 0,
 					easing: cubicOut,
 				}}
 				out:fly={{
 					x,
-					y: 0,
+					y,
 					duration: IN_MS,
-					delay: i === data.length - 1 ? STAGGER : 0,
+					delay: i === items.length - 1 ? STAGGER : 0,
 					easing: cubicOut,
-				}}>
-				<Notification {...item} onClose={() => handleClose(item.id, position)} />
+				}}
+				onoutroend={data.size === 0 ? handleLastClose : null}>
+				{@render el?.({
+					...props,
+					class: styles.item({ class: props.class }),
+					onClose: () => handleClose(id),
+				})}
 			</div>
 		{/each}
 	</div>
-{/each}
+{/snippet}
+
+{#if showColumns}
+	{@render column(NOTIFICATION_POSITIONS.BOTTOM_LEFT, -32)}
+	{@render column(NOTIFICATION_POSITIONS.BOTTOM_CENTER, 0, 32)}
+	{@render column(NOTIFICATION_POSITIONS.BOTTOM_RIGHT, 32)}
+{/if}

package/dist/components/organisms/notificationGroup/NotificationGroup.svelte.d.ts

@@ -1,6 +1,17 @@
 export default NotificationGroup;
 type NotificationGroup = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, never>>): void;
+    $set?(props: Partial<Props>): void;
+};
+declare const NotificationGroup: import("svelte").Component<{
+    /**
+     * Additional CSS classes to apply to each notification column
+     */
+    class?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Additional CSS classes to apply to each notification column
+     */
+    class?: string;
 };
-declare const NotificationGroup: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/organisms/notificationGroup/notificationGroup.variants.d.ts

@@ -1,24 +1,79 @@
 export const notificationGroupVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            bottomLeft?: import("tailwind-variants").ClassValue;
-            bottomRight?: import("tailwind-variants").ClassValue;
+    position: {
+        bc: {
+            base: string;
+        };
+        bl: {
+            base: string;
+        };
+        br: {
+            base: string;
+        };
+    };
+    zOrder: {
+        0: {
+            base: string;
+        };
+        1: {
+            base: string;
+        };
+        2: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+}, undefined, {
+    position: {
+        bc: {
+            base: string;
+        };
+        bl: {
+            base: string;
+        };
+        br: {
+            base: string;
         };
     };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            bottomLeft?: import("tailwind-variants").ClassValue;
-            bottomRight?: import("tailwind-variants").ClassValue;
+    zOrder: {
+        0: {
+            base: string;
+        };
+        1: {
+            base: string;
+        };
+        2: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        bc: {
+            base: string;
+        };
+        bl: {
+            base: string;
+        };
+        br: {
+            base: string;
+        };
+    };
+    zOrder: {
+        0: {
+            base: string;
+        };
+        1: {
+            base: string;
+        };
+        2: {
+            base: string;
         };
     };
 }, {
-    bottomLeft: string;
-    bottomRight: string;
-}, undefined, any, {
-    bottomLeft: string;
-    bottomRight: string;
-}, import("tailwind-variants").TVReturnType<any, {
-    bottomLeft: string;
-    bottomRight: string;
+    base: string;
+    item: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/organisms/notificationGroup/notificationGroup.variants.js

@@ -2,10 +2,20 @@ import { tv } from "../../../utils/tailwind.js";
 
 const notificationGroupVariants = tv({
 	slots: {
-		bottomLeft:
-			"absolute bottom-4 left-4 z-snackbar flex flex-col gap-2 overflow-hidden",
-		bottomRight:
-			"absolute right-4 bottom-4 z-snackbar flex flex-col gap-2 overflow-hidden",
+		base: "pointer-events-none fixed inset-x-0 bottom-0 flex flex-col gap-2 overflow-hidden p-4",
+		item: "pointer-events-auto max-w-xs shadow-sm",
+	},
+	variants: {
+		position: {
+			bc: { base: "items-center" },
+			bl: { base: "items-start" },
+			br: { base: "items-end" },
+		},
+		zOrder: {
+			0: { base: "z-10000" },
+			1: { base: "z-10001" },
+			2: { base: "z-10002" },
+		},
 	},
 });
 

package/dist/index.css

@@ -136,7 +136,7 @@
 	--font-body: "Borna", "sans-serif";
 	--font-sans: "Borna", sans-serif;
 
-	/* Box Shadows */
+	/* Box Shadows - NOTE: dark mode values defined bellow theme */
 
 	--shadow-sm: 0 2px 16px 0 rgba(0, 0, 0, 0.08);
 	--shadow-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
@@ -220,3 +220,11 @@
 	--color-green-800: #2f461a;
 	--color-green-900: #18230d;
 }
+
+@layer utilities {
+	&:where(.dark, .dark *) {
+		.shadow-sm {
+			--tw-shadow: 0 2px 16px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.24));
+		}
+	}
+}

package/dist/index.d.ts

@@ -26,10 +26,11 @@ export { default as ComboBox } from "./components/molecules/comboBox/ComboBox.sv
 export { default as FormActions } from "./components/molecules/formActions/FormActions.svelte";
 export { default as FormField } from "./components/molecules/formField/FormField.svelte";
 export { default as FormLayout } from "./components/molecules/formLayout/FormLayout.svelte";
-export { default as Notification } from "./components/molecules/notification/Notification.svelte";
 export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
 export { default as SelectorCard } from "./components/molecules/selectorCard/SelectorCard.svelte";
+export { default as SystemAlert } from "./components/molecules/notifications/systemAlert/SystemAlert.svelte";
 export { default as TagSelector } from "./components/molecules/tagSelector/TagSelector.svelte";
+export { default as Toast } from "./components/molecules/notifications/toast/Toast.svelte";
 export { default as ToggleGroup } from "./components/molecules/toggleGroup/ToggleGroup.svelte";
 export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/ToggleGroupItem.svelte";
 export * as Dialog from "./components/organisms/dialog/index.js";

package/dist/index.js

@@ -36,10 +36,11 @@ export { default as ComboBox } from "./components/molecules/comboBox/ComboBox.sv
 export { default as FormActions } from "./components/molecules/formActions/FormActions.svelte";
 export { default as FormField } from "./components/molecules/formField/FormField.svelte";
 export { default as FormLayout } from "./components/molecules/formLayout/FormLayout.svelte";
-export { default as Notification } from "./components/molecules/notification/Notification.svelte";
 export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
 export { default as SelectorCard } from "./components/molecules/selectorCard/SelectorCard.svelte";
+export { default as SystemAlert } from "./components/molecules/notifications/systemAlert/SystemAlert.svelte";
 export { default as TagSelector } from "./components/molecules/tagSelector/TagSelector.svelte";
+export { default as Toast } from "./components/molecules/notifications/toast/Toast.svelte";
 export { default as ToggleGroup } from "./components/molecules/toggleGroup/ToggleGroup.svelte";
 export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/ToggleGroupItem.svelte";
 

package/dist/utils/notification.d.ts

@@ -1 +1,6 @@
-export function showNotification(props: any): void;
+export namespace NOTIFICATION_POSITIONS {
+    let BOTTOM_CENTER: string;
+    let BOTTOM_LEFT: string;
+    let BOTTOM_RIGHT: string;
+}
+export function showNotification(el: any, position?: string, props?: {}): string;

package/dist/utils/notification.js

@@ -1,11 +1,25 @@
-import { v4 as uuidv4 } from "uuid";
+import { generateId } from "./a11y.js";
+
+const NOTIFICATION_POSITIONS = {
+	BOTTOM_CENTER: "bc",
+	BOTTOM_LEFT: "bl",
+	BOTTOM_RIGHT: "br",
+};
+
+const showNotification = (
+	el,
+	position = NOTIFICATION_POSITIONS.BOTTOM_LEFT,
+	props = {},
+) => {
+	const id = generateId();
 
-const showNotification = (props) => {
 	document.body.dispatchEvent(
 		new CustomEvent("notification:show", {
-			detail: { id: uuidv4(), ...props },
+			detail: { el, id, position, props },
 		}),
 	);
+
+	return id;
 };
 
-export { showNotification };
+export { NOTIFICATION_POSITIONS, showNotification };