@websline/system-components 0.0.1

package/dist/components/atoms/icon/components/Link.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Link;
+type Link = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Link: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/ListOrdered.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M10 4H21M10 9.33333H21M10 14.6667H21M10 20H21M3 14.6667H6V16.2667L3 19.4667V20H6M3.5 5.06667L4.5 4V9.33333M4.5 9.33333H3.5M4.5 9.33333H5.5"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/ListOrdered.svelte.d.ts

@@ -0,0 +1,41 @@
+export default ListOrdered;
+type ListOrdered = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ListOrdered: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/ListUnordered.svelte

@@ -0,0 +1,26 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M10.2 12H21M10.2 19H21M10.2 5H21M3 17H6.6V21H3V17ZM3 10H6.6V14H3V10ZM3 3H6.6V7H3V3Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/ListUnordered.svelte.d.ts

@@ -0,0 +1,41 @@
+export default ListUnordered;
+type ListUnordered = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ListUnordered: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Refresh.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M21 4V12C21 7.02945 16.9706 3 12 3C9.45725 3 7.1608 4.05448 5.52405 5.75M3 20V12C3 16.9706 7.02945 21 12 21C14.4278 21 16.6311 20.0387 18.25 18.476"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Refresh.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Refresh;
+type Refresh = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Refresh: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Underline.svelte

@@ -0,0 +1,26 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M4 21H20M18 3C18 6.22917 18 7.47388 18 10.7031C18 14.1808 15.3137 17 12 17C8.68629 17 6 14.1808 6 10.7031C6 7.47388 6 6.22917 6 3"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round" />
+</svg>

package/dist/components/atoms/icon/components/Underline.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Underline;
+type Underline = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Underline: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/index.d.ts

@@ -0,0 +1,20 @@
+export namespace registry {
+    export { Academy as academy };
+    export { Bold as bold };
+    export { Close as close };
+    export { Italic as italic };
+    export { Link as link };
+    export { ListOrdered as listOrdered };
+    export { ListUnordered as listUnordered };
+    export { Refresh as refresh };
+    export { Underline as underline };
+}
+import Academy from "./components/Academy.svelte";
+import Bold from "./components/Bold.svelte";
+import Close from "./components/Close.svelte";
+import Italic from "./components/Italic.svelte";
+import Link from "./components/Link.svelte";
+import ListOrdered from "./components/ListOrdered.svelte";
+import ListUnordered from "./components/ListUnordered.svelte";
+import Refresh from "./components/Refresh.svelte";
+import Underline from "./components/Underline.svelte";

package/dist/components/atoms/icon/index.js

@@ -0,0 +1,21 @@
+import Academy from "./components/Academy.svelte";
+import Bold from "./components/Bold.svelte";
+import Close from "./components/Close.svelte";
+import Italic from "./components/Italic.svelte";
+import Link from "./components/Link.svelte";
+import ListOrdered from "./components/ListOrdered.svelte";
+import ListUnordered from "./components/ListUnordered.svelte";
+import Refresh from "./components/Refresh.svelte";
+import Underline from "./components/Underline.svelte";
+
+export const registry = {
+	academy: Academy,
+	bold: Bold,
+	close: Close,
+	italic: Italic,
+	link: Link,
+	listOrdered: ListOrdered,
+	listUnordered: ListUnordered,
+	refresh: Refresh,
+	underline: Underline,
+};

package/dist/components/atoms/loading/spinner/Spinner.svelte

@@ -0,0 +1,40 @@
+<script>
+	import { tv } from "tailwind-variants";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {"small" | "medium" | "large"} [size="medium"] Spinner size
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 */
+
+	/** @type {Props} */
+	let { class: className = "", size = "medium" } = $props();
+
+	const spinnerVariants = tv({
+		base: "inline-flex animate-[spin_0.7s_linear_infinite]",
+		variants: {
+			size: {
+				small: "h-4 w-4",
+				medium: "h-6 w-6",
+				large: "h-8 w-8",
+			},
+		},
+		defaultVariants: {
+			size: "medium",
+		},
+	});
+</script>
+
+<svg
+	class={spinnerVariants({ class: className, size })}
+	role="status"
+	viewBox="0 0 100 101"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+		fill="#fff"></path>
+	<path
+		d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+		fill="#77736f"></path>
+</svg>

package/dist/components/atoms/loading/spinner/Spinner.svelte.d.ts

@@ -0,0 +1,25 @@
+export default Spinner;
+type Spinner = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Spinner: import("svelte").Component<{
+    /**
+     * Spinner size
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Spinner size
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+};

package/dist/components/molecules/notification/Notification.svelte

@@ -0,0 +1,42 @@
+<script>
+	import { CloseButton, Icon } from "../../../index.js";
+	import { notificationVariants } from "./notification.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [autoClose=true] Whether to automatically close the notification after a duration
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {string} [icon=""] Icon to display in the notification
+	 * @property {string} [message=""] Message to display in the notification
+	 * @property {string} [title=""] Title to display in the notification
+	 * @property {"info" | "success" | "warning" | "danger"} [variant="info"] Notification variant
+	 */
+
+	/** @type {Props} */
+	let {
+		autoClose = true,
+		class: className = "",
+		icon = "",
+		message = "",
+		onClose,
+		title = "",
+		variant = "",
+	} = $props();
+
+	let styles = $derived(notificationVariants({ variant }));
+</script>
+
+<div class={styles.base({ class: className })}>
+	<div class={styles.icon({ variant })}>
+		<Icon name={icon} />
+	</div>
+	<div class={styles.content()}>
+		{#if title}
+			<p class={styles.title()}>{title}</p>
+		{/if}
+		{#if message}
+			<p class={styles.message()}>{message}</p>
+		{/if}
+	</div>
+	<CloseButton {autoClose} class={styles.close()} {onClose} />
+</div>

package/dist/components/molecules/notification/Notification.svelte.d.ts

@@ -0,0 +1,57 @@
+export default Notification;
+type Notification = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Notification: import("svelte").Component<{
+    /**
+     * Whether to automatically close the notification after a duration
+     */
+    autoClose?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Icon to display in the notification
+     */
+    icon?: string;
+    /**
+     * Message to display in the notification
+     */
+    message?: string;
+    /**
+     * Title to display in the notification
+     */
+    title?: string;
+    /**
+     * Notification variant
+     */
+    variant?: "info" | "success" | "warning" | "danger";
+}, {}, "">;
+type Props = {
+    /**
+     * Whether to automatically close the notification after a duration
+     */
+    autoClose?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Icon to display in the notification
+     */
+    icon?: string;
+    /**
+     * Message to display in the notification
+     */
+    message?: string;
+    /**
+     * Title to display in the notification
+     */
+    title?: string;
+    /**
+     * Notification variant
+     */
+    variant?: "info" | "success" | "warning" | "danger";
+};

package/dist/components/molecules/notification/notification.variants.d.ts

@@ -0,0 +1,67 @@
+export const notificationVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        info: {
+            icon: string;
+        };
+        success: {
+            icon: string;
+        };
+        warning: {
+            icon: string;
+        };
+        danger: {
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    close: string;
+    icon: string;
+    content: string;
+    message: string;
+    title: string;
+}, undefined, {
+    variant: {
+        info: {
+            icon: string;
+        };
+        success: {
+            icon: string;
+        };
+        warning: {
+            icon: string;
+        };
+        danger: {
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    close: string;
+    icon: string;
+    content: string;
+    message: string;
+    title: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        info: {
+            icon: string;
+        };
+        success: {
+            icon: string;
+        };
+        warning: {
+            icon: string;
+        };
+        danger: {
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    close: string;
+    icon: string;
+    content: string;
+    message: string;
+    title: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/notification/notification.variants.js

@@ -0,0 +1,30 @@
+import { tv } from "tailwind-variants";
+
+const notificationVariants = tv({
+	slots: {
+		base: "bg-white dark:bg-neutral-900 border-neutral-300 dark:border-neutral-700 border-1 rounded-lg p-2 grid grid-cols-[40px_1fr_24px] gap-2",
+		close: "col-[3] self-start",
+		icon: "flex h-10 items-center justify-center rounded-sm text-white w-10",
+		content: "flex flex-col justify-center",
+		message: "body-extra-small text-neutral-500",
+		title: "body-default dark:text-white",
+	},
+	variants: {
+		variant: {
+			info: {
+				icon: "bg-blue-500",
+			},
+			success: {
+				icon: "bg-green-500",
+			},
+			warning: {
+				icon: "bg-yellow-500",
+			},
+			danger: {
+				icon: "bg-red-500",
+			},
+		},
+	},
+});
+
+export { notificationVariants };