@websline/system-components 0.0.1

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

@@ -0,0 +1,69 @@
+import { tv } from "tailwind-variants";
+
+const toggleGroupItemVariants = tv({
+	slots: {
+		base: "relative h-full w-full whitespace-nowrap",
+		button:
+			"button-small w-full h-full cursor-pointer block bg-transparent transition-[background,color] rounded-sm",
+		span: "relative z-2 block",
+		trigger: "absolute inset-0 z-1 bg-white shadow-sm rounded-sm",
+	},
+	variants: {
+		isActive: {
+			true: {
+				button: "text-neutral-900 dark:text-white",
+			},
+			false: {
+				button: "text-neutral-500",
+			},
+		},
+		size: {
+			small: {
+				button: "px-1.5",
+			},
+			medium: {
+				button: "px-3",
+			},
+		},
+	},
+	compoundVariants: [
+		{
+			appearance: "default",
+			class: {
+				button:
+					"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",
+				trigger: "dark:bg-neutral-800",
+			},
+		},
+	],
+});
+
+const toggleGroupItemTabVariants = tv({
+	slots: {
+		base: "relative h-full w-full whitespace-nowrap px-1",
+		button: "button-default w-full h-full cursor-pointer transition-[color]",
+		span: "block",
+		trigger:
+			"bg-blue-500 h-0.5 w-full absolute -bottom-px left-0 rounded-t-xs dark:bg-blue-400",
+	},
+	variants: {
+		isActive: {
+			true: {
+				button: "text-neutral-900 dark:text-white",
+			},
+			false: {
+				button: "text-neutral-500 hover:text-neutral-900 dark:hover:text-white",
+			},
+		},
+	},
+});
+
+export { toggleGroupItemVariants, toggleGroupItemTabVariants };

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

@@ -0,0 +1,68 @@
+<script>
+	import { onMount } from "svelte";
+	import { fly } from "svelte/transition";
+	import { cubicOut } from "svelte/easing";
+	import { Notification } from "../../../index.js";
+	import { notificationGroupVariants } from "./notificationGroup.variants.js";
+
+	onMount(() => {
+		document.body.addEventListener("notification:show", addNotification);
+
+		return () => {
+			document.body.removeEventListener("notification:show", addNotification);
+		};
+	});
+
+	const addNotification = (e) => {
+		const { detail } = e;
+
+		if (detail.position === "bottom-left") {
+			dataBottomLeft.push(detail);
+		} else if (detail.position === "bottom-right") {
+			dataBottomRight.push(detail);
+		}
+	};
+
+	let dataBottomLeft = $state([]);
+	let dataBottomRight = $state([]);
+
+	let { bottomLeft, bottomRight } = notificationGroupVariants();
+
+	const MOVE_MS = 400;
+	const IN_MS = 220;
+	const STAGGER = MOVE_MS - 200;
+
+	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);
+		}
+	};
+</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)}
+			<div
+				in:fly={{
+					x,
+					y: 0,
+					duration: IN_MS,
+					delay: i === data.length - 1 ? STAGGER : 0,
+					easing: cubicOut,
+				}}
+				out:fly={{
+					x,
+					y: 0,
+					duration: IN_MS,
+					delay: i === data.length - 1 ? STAGGER : 0,
+					easing: cubicOut,
+				}}>
+				<Notification {...item} onClose={() => handleClose(item.id, position)} />
+			</div>
+		{/each}
+	</div>
+{/each}

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

@@ -0,0 +1,6 @@
+export default NotificationGroup;
+type NotificationGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const NotificationGroup: import("svelte").Component<Record<string, never>, {}, "">;

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

@@ -0,0 +1,24 @@
+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;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            bottomLeft?: import("tailwind-variants").ClassValue;
+            bottomRight?: import("tailwind-variants").ClassValue;
+        };
+    };
+}, {
+    bottomLeft: string;
+    bottomRight: string;
+}, undefined, any, {
+    bottomLeft: string;
+    bottomRight: string;
+}, import("tailwind-variants").TVReturnType<any, {
+    bottomLeft: string;
+    bottomRight: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,11 @@
+import { tv } from "tailwind-variants";
+
+const notificationGroupVariants = tv({
+	slots: {
+		bottomLeft: "flex flex-col gap-2 absolute bottom-4 left-4 z-9999 overflow-hidden",
+		bottomRight:
+			"flex flex-col gap-2 absolute bottom-4 right-4 z-9999 overflow-hidden",
+	},
+});
+
+export { notificationGroupVariants };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export * as utils from "./utils/index.js";
+export { default as Avatar } from "./components/atoms/avatar/Avatar.svelte";
+export { default as Button } from "./components/atoms/form/button/Button.svelte";
+export { default as CloseButton } from "./components/atoms/closeButton/CloseButton.svelte";
+export { default as FormField } from "./components/atoms/form/formField/FormField.svelte";
+export { default as HelperText } from "./components/atoms/form/helperText/HelperText.svelte";
+export { default as Icon } from "./components/atoms/icon/Icon.svelte";
+export { default as IconButton } from "./components/atoms/form/iconButton/IconButton.svelte";
+export { default as Input } from "./components/atoms/form/input/Input.svelte";
+export { default as Label } from "./components/atoms/form/label/Label.svelte";
+export { default as Spinner } from "./components/atoms/loading/spinner/Spinner.svelte";
+export { default as Textarea } from "./components/atoms/form/textarea/Textarea.svelte";
+export { default as Notification } from "./components/molecules/notification/Notification.svelte";
+export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
+export { default as ToggleGroup } from "./components/molecules/toggleGroup/ToggleGroup.svelte";
+export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/ToggleGroupItem.svelte";
+export { default as NotificationGroup } from "./components/organisms/notificationGroup/NotificationGroup.svelte";

package/dist/index.js

@@ -0,0 +1,32 @@
+export * as utils from "./utils/index.js";
+
+/**
+ * Atoms
+ */
+
+export { default as Avatar } from "./components/atoms/avatar/Avatar.svelte";
+export { default as Button } from "./components/atoms/form/button/Button.svelte";
+export { default as CloseButton } from "./components/atoms/closeButton/CloseButton.svelte";
+export { default as FormField } from "./components/atoms/form/formField/FormField.svelte";
+export { default as HelperText } from "./components/atoms/form/helperText/HelperText.svelte";
+export { default as Icon } from "./components/atoms/icon/Icon.svelte";
+export { default as IconButton } from "./components/atoms/form/iconButton/IconButton.svelte";
+export { default as Input } from "./components/atoms/form/input/Input.svelte";
+export { default as Label } from "./components/atoms/form/label/Label.svelte";
+export { default as Spinner } from "./components/atoms/loading/spinner/Spinner.svelte";
+export { default as Textarea } from "./components/atoms/form/textarea/Textarea.svelte";
+
+/**
+ * Molecules
+ */
+
+export { default as Notification } from "./components/molecules/notification/Notification.svelte";
+export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
+export { default as ToggleGroup } from "./components/molecules/toggleGroup/ToggleGroup.svelte";
+export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/ToggleGroupItem.svelte";
+
+/**
+ * Organisms
+ */
+
+export { default as NotificationGroup } from "./components/organisms/notificationGroup/NotificationGroup.svelte";

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./notification.js";

package/dist/utils/index.js

@@ -0,0 +1 @@
+export * from "./notification.js";

package/dist/utils/notification.d.ts

@@ -0,0 +1 @@
+export function showNotification(props: any): void;

package/dist/utils/notification.js

@@ -0,0 +1,11 @@
+import { v4 as uuidv4 } from "uuid";
+
+const showNotification = (props) => {
+	document.body.dispatchEvent(
+		new CustomEvent("notification:show", {
+			detail: { id: uuidv4(), ...props },
+		}),
+	);
+};
+
+export { showNotification };

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@websline/system-components",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Websline/websline.system-components.git"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@tiptap/core": "^3.4.0",
+    "@tiptap/extension-color": "^3.4.0",
+    "@tiptap/extension-highlight": "^3.4.0",
+    "@tiptap/extension-link": "^3.4.0",
+    "@tiptap/extension-placeholder": "^3.4.0",
+    "@tiptap/extension-text-align": "^3.4.0",
+    "@tiptap/extension-text-style": "^3.4.0",
+    "@tiptap/extension-underline": "^3.4.0",
+    "@tiptap/pm": "^3.4.0",
+    "@tiptap/starter-kit": "^3.4.0",
+    "dompurify": "^3.2.6",
+    "tailwind-variants": "^3.1.0",
+    "uuid": "^11.1.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.38.6"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "^9.34.0",
+    "@storybook/addon-a11y": "^9.1.4",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-svelte-csf": "^5.0.8",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/sveltekit": "^9.1.4",
+    "@storybook/theming": "^8.6.14",
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.37.0",
+    "@sveltejs/package": "^2.5.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.4",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.12",
+    "@types/node": "^24.3.0",
+    "@vitest/browser": "^3.2.4",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-storybook": "^9.1.4",
+    "eslint-plugin-svelte": "^3.12.1",
+    "globals": "^16.3.0",
+    "playwright": "^1.55.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "publint": "^0.3.12",
+    "storybook": "^9.1.4",
+    "svelte": "^5.38.6",
+    "tailwindcss": "^4.1.12",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.4",
+    "vitest": "^3.2.4",
+    "vitest-browser-svelte": "^1.1.0"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}