@websline/system-components 0.0.1

package/dist/components/atoms/avatar/Avatar.svelte

@@ -0,0 +1,78 @@
+<script>
+	import { avatarVariants } from "./avatar.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [as="div"] The HTML element to use for the avatar
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [lazy=true] Whether the avatar should be lazy-loaded
+	 * @property {string} [name=""] The name of the avatar
+	 * @property {"circle" | "square"} [shape="square"] The shape of the avatar
+	 * @property {"small" | "medium" | "large" | "extraLarge"} [size="medium"] Avatar size
+	 * @property {string} [src=""] The source URL of the avatar image
+	 */
+
+	/** @type {Props} */
+	let {
+		as = "button",
+		class: className = "",
+		lazy = true,
+		name,
+		shape = "square",
+		size = "medium",
+		src,
+		...rest
+	} = $props();
+
+	let initials = $derived.by(() => {
+		if (name) {
+			return (
+				name
+					.split(" ")
+					.map((word) => word.charAt(0).toUpperCase())
+					.join("")
+					?.slice(0, 2) || ""
+			);
+		}
+		return "";
+	});
+
+	let avatarSize = $derived.by(() => {
+		switch (size) {
+			case "small":
+				return 24;
+			case "medium":
+				return 40;
+			case "large":
+				return 56;
+			case "extraLarge":
+				return 64;
+			default:
+				return 40;
+		}
+	});
+
+	let { base, image, fallback } = avatarVariants();
+
+	let showImage = $derived(Boolean(src));
+</script>
+
+<svelte:element
+	this={as}
+	class={base({ as, class: className, shape })}
+	style={`width: ${avatarSize}px; height: ${avatarSize}px;`}
+	type={as === "button" ? "button" : undefined}
+	{...src && showImage ? {} : { role: "img", "aria-label": name || "" }}
+	{...rest}>
+	{#if src && showImage}
+		<img
+			alt={name || ""}
+			class={image()}
+			decoding="async"
+			loading={lazy ? "lazy" : "eager"}
+			{src}
+			onerror={() => (showImage = false)} />
+	{:else}
+		<span class={fallback()}>{initials}</span>
+	{/if}
+</svelte:element>

package/dist/components/atoms/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,65 @@
+export default Avatar;
+type Avatar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Avatar: import("svelte").Component<{
+    /**
+     * The HTML element to use for the avatar
+     */
+    as?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the avatar should be lazy-loaded
+     */
+    lazy?: boolean;
+    /**
+     * The name of the avatar
+     */
+    name?: string;
+    /**
+     * The shape of the avatar
+     */
+    shape?: "circle" | "square";
+    /**
+     * Avatar size
+     */
+    size?: "small" | "medium" | "large" | "extraLarge";
+    /**
+     * The source URL of the avatar image
+     */
+    src?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * The HTML element to use for the avatar
+     */
+    as?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the avatar should be lazy-loaded
+     */
+    lazy?: boolean;
+    /**
+     * The name of the avatar
+     */
+    name?: string;
+    /**
+     * The shape of the avatar
+     */
+    shape?: "circle" | "square";
+    /**
+     * Avatar size
+     */
+    size?: "small" | "medium" | "large" | "extraLarge";
+    /**
+     * The source URL of the avatar image
+     */
+    src?: string;
+};

package/dist/components/atoms/avatar/avatar.variants.d.ts

@@ -0,0 +1,37 @@
+export const avatarVariants: import("tailwind-variants").TVReturnType<{
+    as: {
+        button: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, {
+    base: string;
+    image: string;
+    fallback: string;
+}, undefined, {
+    as: {
+        button: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, {
+    base: string;
+    image: string;
+    fallback: string;
+}, import("tailwind-variants").TVReturnType<{
+    as: {
+        button: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, {
+    base: string;
+    image: string;
+    fallback: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/atoms/avatar/avatar.variants.js

@@ -0,0 +1,20 @@
+import { tv } from "tailwind-variants";
+
+const avatarVariants = tv({
+	slots: {
+		base: "overflow-hidden flex",
+		image: "object-cover w-full h-full",
+		fallback: "bg-blue-100 w-full h-full flex items-center justify-center heading-h6",
+	},
+	variants: {
+		as: {
+			button: "cursor-pointer",
+		},
+		shape: {
+			circle: "rounded-full",
+			square: "rounded",
+		},
+	},
+});
+
+export { avatarVariants };

package/dist/components/atoms/closeButton/CloseButton.svelte

@@ -0,0 +1,92 @@
+<script>
+	import { Icon } from "../../../index.js";
+	import { closeButtonVariants } from "./closeButton.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {"circle" | "square"} [shape="round"] Button shape
+	 */
+
+	/** @type {Props} */
+	let {
+		autoClose = false,
+		class: className = "",
+		durationInSeconds = 6,
+		onClose,
+		shape = "square",
+		...rest
+	} = $props();
+
+	let barEl = $state();
+	let animate = $derived(autoClose);
+
+	const handleMouseOver = () => {
+		if (!barEl) {
+			animate = true;
+			calculatedDurationInSeconds = 2 * 100;
+			return;
+		}
+
+		const parent = barEl.parentElement;
+		const parentW = parent.getBoundingClientRect().width;
+		const currentW = barEl.getBoundingClientRect().width;
+
+		barEl.style.animation = "none";
+		barEl.style.width = `${currentW}px`;
+
+		void barEl.offsetWidth;
+
+		barEl.style.transition = "width 300ms";
+		barEl.style.width = `${parentW}px`;
+	};
+
+	let { bar, button } = closeButtonVariants();
+
+	let calculatedDurationInSeconds = $derived(durationInSeconds * 1000);
+
+	const handleClose = () => {
+		onClose();
+	};
+
+	const handleAnimationComplete = () => {
+		if (autoClose) onClose();
+	};
+</script>
+
+<button
+	class={button({
+		animate,
+		class: className,
+		shape,
+	})}
+	onclick={handleClose}
+	onmouseenter={handleMouseOver}
+	{...rest}>
+	<Icon class="relative z-10" name="close" size={16} />
+	{#if animate}
+		<span
+			bind:this={barEl}
+			class={bar()}
+			style={`animation-duration: ${calculatedDurationInSeconds}ms`}
+			onanimationend={handleAnimationComplete}>
+		</span>
+	{/if}
+</button>
+
+<style>
+	span {
+		animation-fill-mode: forwards;
+		animation-name: fill;
+		animation-timing-function: linear;
+	}
+
+	@keyframes fill {
+		from {
+			width: 0%;
+		}
+		to {
+			width: 100%;
+		}
+	}
+</style>

package/dist/components/atoms/closeButton/CloseButton.svelte.d.ts

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

package/dist/components/atoms/closeButton/closeButton.variants.d.ts

@@ -0,0 +1,37 @@
+export const closeButtonVariants: import("tailwind-variants").TVReturnType<{
+    shape: {
+        circle: {
+            button: string;
+        };
+        square: {
+            button: string;
+        };
+    };
+}, {
+    button: string;
+    bar: string;
+}, undefined, {
+    shape: {
+        circle: {
+            button: string;
+        };
+        square: {
+            button: string;
+        };
+    };
+}, {
+    button: string;
+    bar: string;
+}, import("tailwind-variants").TVReturnType<{
+    shape: {
+        circle: {
+            button: string;
+        };
+        square: {
+            button: string;
+        };
+    };
+}, {
+    button: string;
+    bar: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/atoms/closeButton/closeButton.variants.js

@@ -0,0 +1,21 @@
+import { tv } from "tailwind-variants";
+
+const closeButtonVariants = tv({
+	slots: {
+		button:
+			"cursor-pointer select-none p-1 transition duration-200 bg-white dark:bg-neutral-800 dark:text-white overflow-hidden relative",
+		bar: "absolute bg-gray-300 dark:bg-neutral-700 inset-[0px] z-0",
+	},
+	variants: {
+		shape: {
+			circle: {
+				button: "rounded-full",
+			},
+			square: {
+				button: "rounded-md",
+			},
+		},
+	},
+});
+
+export { closeButtonVariants };

package/dist/components/atoms/form/button/Button.svelte

@@ -0,0 +1,67 @@
+<script>
+	import { Spinner } from "../../../../index.js";
+	import { buttonVariants } from "./button.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [as="button"] The HTML element to use for the button
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {"primary" | "secondary" | "tertiary" | "success" | "danger"} [color="primary"] Button color
+	 * @property {boolean} [disabled=false] Whether the button is disabled
+	 * @property {boolean} [fullWidth=false] Whether the button should take the full width of its container
+	 * @property {boolean} [loading=false] Whether the button is in a loading state, for example after a form submission
+	 * @property {"small" | "medium" | "large"} [size="medium"] Button size
+	 * @property {string} [type="button"] Button type, e.g. "button", "submit", "reset"
+	 * @property {"filled" | "outlined"} [variant="filled"] Button style
+	 */
+
+	/** @type {Props} */
+	let {
+		as = "button",
+		children,
+		class: className = "",
+		color = "primary",
+		disabled = false,
+		fullWidth = false,
+		loading = false,
+		size = "medium",
+		type = "button",
+		variant = "filled",
+		...rest
+	} = $props();
+
+	let isButton = $derived(as === "button");
+
+	let tagSpecificProps = $derived.by(() => {
+		if (isButton) {
+			return {
+				disabled: disabled || loading,
+				type,
+			};
+		}
+
+		return {
+			"aria-disabled": disabled || loading ? "true" : undefined,
+		};
+	});
+</script>
+
+<svelte:element
+	this={as}
+	aria-busy={loading}
+	class={buttonVariants({
+		color,
+		class: className,
+		disabled,
+		fullWidth,
+		loading,
+		size,
+		variant,
+	})}
+	{...tagSpecificProps}
+	{...rest}>
+	{#if loading}
+		<Spinner size="small" />
+	{/if}
+	{@render children?.()}
+</svelte:element>

package/dist/components/atoms/form/button/Button.svelte.d.ts

@@ -0,0 +1,81 @@
+export default Button;
+type Button = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Button: import("svelte").Component<{
+    /**
+     * The HTML element to use for the button
+     */
+    as?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Button color
+     */
+    color?: "primary" | "secondary" | "tertiary" | "success" | "danger";
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button should take the full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is in a loading state, for example after a form submission
+     */
+    loading?: boolean;
+    /**
+     * Button size
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Button type, e.g. "button", "submit", "reset"
+     */
+    type?: string;
+    /**
+     * Button style
+     */
+    variant?: "filled" | "outlined";
+}, {}, "">;
+type Props = {
+    /**
+     * The HTML element to use for the button
+     */
+    as?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Button color
+     */
+    color?: "primary" | "secondary" | "tertiary" | "success" | "danger";
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button should take the full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is in a loading state, for example after a form submission
+     */
+    loading?: boolean;
+    /**
+     * Button size
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Button type, e.g. "button", "submit", "reset"
+     */
+    type?: string;
+    /**
+     * Button style
+     */
+    variant?: "filled" | "outlined";
+};

package/dist/components/atoms/form/button/button.variants.d.ts

@@ -0,0 +1,58 @@
+export const buttonVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    variant: {
+        filled: string;
+        outlined: string;
+    };
+}, undefined, "flex items-center rounded cursor-pointer transition duration-200 select-none", {
+    disabled: {
+        true: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    variant: {
+        filled: string;
+        outlined: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    variant: {
+        filled: string;
+        outlined: string;
+    };
+}, undefined, "flex items-center rounded cursor-pointer transition duration-200 select-none", unknown, unknown, undefined>>;

package/dist/components/atoms/form/button/button.variants.js

@@ -0,0 +1,82 @@
+import { tv } from "tailwind-variants";
+
+const buttonVariants = tv({
+	base: "flex items-center rounded cursor-pointer transition duration-200 select-none",
+	variants: {
+		disabled: {
+			true: "opacity-40 pointer-events-none",
+		},
+		fullWidth: {
+			true: "w-full justify-center",
+		},
+		loading: {
+			true: "pointer-events-none",
+		},
+		size: {
+			small: "py-1.25 px-3 gap-2 button-small",
+			medium: "py-1.5 px-3 gap-2 button-default",
+			large: "py-2.5 px-3 gap-3 button-default",
+		},
+		variant: {
+			filled: "border-transparent border-1",
+			outlined: "border-1",
+		},
+	},
+	compoundVariants: [
+		{
+			color: "primary",
+			variant: "filled",
+			class:
+				"bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-400 dark:hover:bg-blue-500",
+		},
+		{
+			color: "primary",
+			variant: "outlined",
+			class:
+				"text-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600 hover:text-white dark:text-blue-400 dark:border-blue-400 dark:hover:bg-blue-500 dark:hover:border-blue-500",
+		},
+		{
+			color: "secondary",
+			variant: "filled",
+			class:
+				"bg-neutral-900 text-white hover:bg-neutral-700 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-500",
+		},
+		{
+			color: "secondary",
+			variant: "outlined",
+			class:
+				"text-neutral-900 hover:bg-neutral-700 hover:text-white hover:border-neutral-700 dark:border-white dark:text-white dark:hover:bg-neutral-500 dark:hover:border-neutral-500 dark:hover:text-inherit",
+		},
+		{
+			color: "tertiary",
+			class:
+				"relative !px-0 after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-[1.5px] after:w-0 after:bg-blue-500 hover:after:w-full after:transition-all after:duration-300 dark:text-white dark:after:bg-blue-400",
+		},
+		{
+			color: "success",
+			variant: "filled",
+			class:
+				"bg-green-500 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-700",
+		},
+		{
+			color: "success",
+			variant: "outlined",
+			class:
+				"text-green-500 border-green-500 hover:bg-green-700 hover:border-green-700 hover:text-white dark:text-green-500 dark:border-green-500 dark:hover:bg-green-700 dark:hover:border-green-700",
+		},
+		{
+			color: "danger",
+			variant: "filled",
+			class:
+				"bg-red-500 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-700",
+		},
+		{
+			color: "danger",
+			variant: "outlined",
+			class:
+				"text-red-500 border-red-500 hover:bg-red-700 hover:border-red-700 hover:text-white dark:text-red-500 dark:border-red-500 dark:hover:bg-red-700 dark:hover:border-red-700",
+		},
+	],
+});
+
+export { buttonVariants };