@websline/system-components 0.0.1 → 0.0.3

package/dist/components/atoms/{form → actions}/button/Button.svelte

@@ -1,18 +1,21 @@
 <script>
-	import { Spinner } from "../../../../index.js";
+	import { Icon, Spinner } from "../../../../index.js";
 	import { buttonVariants } from "./button.variants.js";
 
 	/**
 	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
 	 * @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 {"primary" | "secondary" | "success" | "error"} [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 {string} [icon=""] Name of the icon to add to this button
+	 * @property {"start" | "end"} [iconPosition="start"] Position for this button's icon
 	 * @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
+	 * @property {"filled" | "outlined" | "text"} [variant="filled"] Button style
 	 */
 
 	/** @type {Props} */
@@ -23,6 +26,8 @@
 		color = "primary",
 		disabled = false,
 		fullWidth = false,
+		icon = "",
+		iconPosition = "start",
 		loading = false,
 		size = "medium",
 		type = "button",
@@ -44,24 +49,41 @@
 			"aria-disabled": disabled || loading ? "true" : undefined,
 		};
 	});
+
+	let hasIcon = $derived(icon.length > 0);
+
+	let styles = $derived(
+		buttonVariants({
+			color,
+			class: className,
+			disabled,
+			fullWidth,
+			hasIcon,
+			iconPosition,
+			loading,
+			size,
+			variant,
+		}),
+	);
 </script>
 
 <svelte:element
 	this={as}
 	aria-busy={loading}
-	class={buttonVariants({
-		color,
+	class={styles.base({
 		class: className,
-		disabled,
-		fullWidth,
-		loading,
-		size,
-		variant,
 	})}
 	{...tagSpecificProps}
 	{...rest}>
 	{#if loading}
-		<Spinner size="small" />
+		<div class={styles.spinner()}>
+			<Spinner size="small" />
+		</div>
+	{/if}
+	{#if hasIcon && !loading}
+		<div class={styles.icon()}>
+			<Icon name={icon} size={size === "small" ? 16 : 20} />
+		</div>
 	{/if}
 	{@render children?.()}
 </svelte:element>

package/dist/components/atoms/{form → actions}/button/Button.svelte.d.ts

@@ -4,6 +4,10 @@ type Button = {
     $set?(props: Partial<Props>): void;
 };
 declare const Button: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
     /**
      * The HTML element to use for the button
      */
@@ -15,7 +19,7 @@ declare const Button: import("svelte").Component<{
     /**
      * Button color
      */
-    color?: "primary" | "secondary" | "tertiary" | "success" | "danger";
+    color?: "primary" | "secondary" | "success" | "error";
     /**
      * Whether the button is disabled
      */
@@ -24,6 +28,14 @@ declare const Button: import("svelte").Component<{
      * Whether the button should take the full width of its container
      */
     fullWidth?: boolean;
+    /**
+     * Name of the icon to add to this button
+     */
+    icon?: string;
+    /**
+     * Position for this button's icon
+     */
+    iconPosition?: "start" | "end";
     /**
      * Whether the button is in a loading state, for example after a form submission
      */
@@ -39,9 +51,13 @@ declare const Button: import("svelte").Component<{
     /**
      * Button style
      */
-    variant?: "filled" | "outlined";
+    variant?: "filled" | "outlined" | "text";
 }, {}, "">;
 type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
     /**
      * The HTML element to use for the button
      */
@@ -53,7 +69,7 @@ type Props = {
     /**
      * Button color
      */
-    color?: "primary" | "secondary" | "tertiary" | "success" | "danger";
+    color?: "primary" | "secondary" | "success" | "error";
     /**
      * Whether the button is disabled
      */
@@ -62,6 +78,14 @@ type Props = {
      * Whether the button should take the full width of its container
      */
     fullWidth?: boolean;
+    /**
+     * Name of the icon to add to this button
+     */
+    icon?: string;
+    /**
+     * Position for this button's icon
+     */
+    iconPosition?: "start" | "end";
     /**
      * Whether the button is in a loading state, for example after a form submission
      */
@@ -77,5 +101,5 @@ type Props = {
     /**
      * Button style
      */
-    variant?: "filled" | "outlined";
+    variant?: "filled" | "outlined" | "text";
 };

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

@@ -0,0 +1,151 @@
+export const buttonVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+    iconPosition: {
+        end: {
+            base: string;
+        };
+    };
+    loading: {
+        true: {
+            base: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+            spinner: string;
+        };
+        medium: {
+            base: string;
+            spinner: string;
+        };
+        large: {
+            base: string;
+            spinner: string;
+        };
+    };
+    variant: {
+        filled: {
+            base: string;
+        };
+        outlined: {
+            base: string;
+        };
+        text: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    spinner: string;
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+    iconPosition: {
+        end: {
+            base: string;
+        };
+    };
+    loading: {
+        true: {
+            base: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+            spinner: string;
+        };
+        medium: {
+            base: string;
+            spinner: string;
+        };
+        large: {
+            base: string;
+            spinner: string;
+        };
+    };
+    variant: {
+        filled: {
+            base: string;
+        };
+        outlined: {
+            base: string;
+        };
+        text: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    spinner: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+    iconPosition: {
+        end: {
+            base: string;
+        };
+    };
+    loading: {
+        true: {
+            base: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+            spinner: string;
+        };
+        medium: {
+            base: string;
+            spinner: string;
+        };
+        large: {
+            base: string;
+            spinner: string;
+        };
+    };
+    variant: {
+        filled: {
+            base: string;
+        };
+        outlined: {
+            base: string;
+        };
+        text: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    spinner: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,143 @@
+import { tv } from "tailwind-variants";
+
+const buttonVariants = tv({
+	slots: {
+		base: "inline-flex cursor-pointer items-center rounded align-middle transition duration-200 select-none",
+		icon: "flex h-lh items-center",
+		spinner: "flex h-lh items-center justify-center",
+	},
+	variants: {
+		disabled: {
+			true: {
+				base: "opacity-40 pointer-events-none",
+			},
+		},
+		fullWidth: {
+			true: {
+				base: "w-full justify-center",
+			},
+		},
+		iconPosition: {
+			end: {
+				base: "flex-row-reverse",
+			},
+		},
+		loading: {
+			true: {
+				base: "pointer-events-none",
+			},
+		},
+		size: {
+			small: {
+				base: "py-1.25 px-3 gap-2 button-small",
+				spinner: "w-4",
+			},
+			medium: {
+				base: "py-1.5 px-3 gap-2 button-default",
+				spinner: "w-5",
+			},
+			large: {
+				base: "py-2.5 px-3 gap-3 button-default",
+				spinner: "w-5",
+			},
+		},
+		variant: {
+			filled: {
+				base: "border-transparent border-1",
+			},
+			outlined: {
+				base: "border-1",
+			},
+			text: {
+				base: "relative !px-0 after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-[1.5px] after:w-0 hover:after:w-full after:transition-all after:duration-300",
+			},
+		},
+	},
+	compoundVariants: [
+		{
+			color: "primary",
+			variant: "filled",
+			class: {
+				base: "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-400 dark:hover:bg-blue-500",
+			},
+		},
+		{
+			color: "primary",
+			variant: "outlined",
+			class: {
+				base: "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: {
+				base: "text-neutral-900 hover:bg-neutral-700 hover:text-white hover:border-neutral-700 dark:border-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:hover:border-neutral-500 dark:hover:text-inherit",
+			},
+		},
+		{
+			color: "success",
+			variant: "filled",
+			class: {
+				base: "bg-green-500 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-700",
+			},
+		},
+		{
+			color: "success",
+			variant: "outlined",
+			class: {
+				base: "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: "error",
+			variant: "filled",
+			class: {
+				base: "bg-red-500 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-700",
+			},
+		},
+		{
+			color: "error",
+			variant: "outlined",
+			class: {
+				base: "border-red-500 text-red-500 hover:border-red-700 hover:bg-red-700 hover:text-white dark:border-red-500 dark:text-red-500 dark:hover:border-red-700 dark:hover:bg-red-700",
+			},
+		},
+		{
+			color: "primary",
+			variant: "text",
+			class: {
+				base: "text-blue-500 after:bg-blue-500 dark:text-blue-400 dark:after:bg-blue-400",
+			},
+		},
+		{
+			color: "secondary",
+			variant: "text",
+			class: {
+				base: "text-neutral-900 after:bg-neutral-900 dark:text-neutral-200 dark:after:bg-neutral-200",
+			},
+		},
+		{
+			color: "success",
+			variant: "text",
+			class: {
+				base: "text-green-500 after:bg-green-500",
+			},
+		},
+		{
+			color: "error",
+			variant: "text",
+			class: {
+				base: "text-red-500 after:bg-red-500",
+			},
+		},
+	],
+});
+
+export { buttonVariants };

package/dist/components/atoms/{closeButton → actions/closeButton}/CloseButton.svelte

@@ -1,9 +1,12 @@
 <script>
-	import { Icon } from "../../../index.js";
+	import { Icon } from "../../../../index.js";
 	import { closeButtonVariants } from "./closeButton.variants.js";
 
 	/**
 	 * @typedef {Object} Props
+	 * @property {boolean} [autoClose=false] Whether the button should automatically close after a duration
+	 * @property {number} [durationInSeconds=6] Duration in seconds before auto-close triggers
+	 * @property {() => void} onClose Function to call when the button is clicked or auto-closed
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
 	 * @property {"circle" | "square"} [shape="round"] Button shape
 	 */
@@ -41,12 +44,12 @@
 		barEl.style.width = `${parentW}px`;
 	};
 
-	let { bar, button } = closeButtonVariants();
+	let styles = $derived(closeButtonVariants({ animate, shape }));
 
 	let calculatedDurationInSeconds = $derived(durationInSeconds * 1000);
 
 	const handleClose = () => {
-		onClose();
+		if (onClose) onClose();
 	};
 
 	const handleAnimationComplete = () => {
@@ -55,10 +58,8 @@
 </script>
 
 <button
-	class={button({
-		animate,
+	class={styles.button({
 		class: className,
-		shape,
 	})}
 	onclick={handleClose}
 	onmouseenter={handleMouseOver}
@@ -67,7 +68,7 @@
 	{#if animate}
 		<span
 			bind:this={barEl}
-			class={bar()}
+			class={styles.bar()}
 			style={`animation-duration: ${calculatedDurationInSeconds}ms`}
 			onanimationend={handleAnimationComplete}>
 		</span>

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

@@ -0,0 +1,49 @@
+export default CloseButton;
+type CloseButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const CloseButton: import("svelte").Component<{
+    /**
+     * Whether the button should automatically close after a duration
+     */
+    autoClose?: boolean;
+    /**
+     * Duration in seconds before auto-close triggers
+     */
+    durationInSeconds?: number;
+    /**
+     * Function to call when the button is clicked or auto-closed
+     */
+    onClose: () => void;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Button shape
+     */
+    shape?: "circle" | "square";
+}, {}, "">;
+type Props = {
+    /**
+     * Whether the button should automatically close after a duration
+     */
+    autoClose?: boolean;
+    /**
+     * Duration in seconds before auto-close triggers
+     */
+    durationInSeconds?: number;
+    /**
+     * Function to call when the button is clicked or auto-closed
+     */
+    onClose: () => void;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Button shape
+     */
+    shape?: "circle" | "square";
+};

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

@@ -52,14 +52,14 @@
 		}
 	});
 
-	let { base, image, fallback } = avatarVariants();
+	let styles = $derived(avatarVariants({ as, shape }));
 
 	let showImage = $derived(Boolean(src));
 </script>
 
 <svelte:element
 	this={as}
-	class={base({ as, class: className, shape })}
+	class={styles.base({ class: className })}
 	style={`width: ${avatarSize}px; height: ${avatarSize}px;`}
 	type={as === "button" ? "button" : undefined}
 	{...src && showImage ? {} : { role: "img", "aria-label": name || "" }}
@@ -67,12 +67,12 @@
 	{#if src && showImage}
 		<img
 			alt={name || ""}
-			class={image()}
+			class={styles.image()}
 			decoding="async"
 			loading={lazy ? "lazy" : "eager"}
 			{src}
 			onerror={() => (showImage = false)} />
 	{:else}
-		<span class={fallback()}>{initials}</span>
+		<span class={styles.fallback()}>{initials}</span>
 	{/if}
 </svelte:element>

package/dist/components/atoms/badge/Badge.svelte

@@ -0,0 +1,44 @@
+<script>
+	import { badgeVariants } from "./badge.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {"start" | "end"} [align="end"] Horizontal position of the badge
+	 * @property {"top" | "center" | "bottom" | "inline"} [anchor="top"] Vertical position of the badge
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the badge
+	 * @property {"primary" | "secondary" | "error"} [color="primary"] Set the color of the badge
+	 * @property {number} [count=0] Set the visible number in the badge
+	 * @property {string} [wrapperClass=""] Additional CSS classes to apply to the badge wrapper
+	 */
+
+	/** @type {Props} */
+	let {
+		align = "end",
+		anchor = "top",
+		children,
+		class: className = "",
+		color = "primary",
+		count = 0,
+		wrapperClass = "",
+		...rest
+	} = $props();
+
+	let styles = $derived(
+		badgeVariants({
+			align,
+			anchor,
+			color,
+			count: !!count,
+		}),
+	);
+</script>
+
+<div class={styles.wrapper({ class: wrapperClass })}>
+	<div class={styles.base({ class: className })} {...rest}>
+		{#if count > 0}
+			{count > 99 ? 99 + "+" : count}
+		{/if}
+	</div>
+	{@render children?.()}
+</div>

package/dist/components/atoms/badge/Badge.svelte.d.ts

@@ -0,0 +1,65 @@
+export default Badge;
+type Badge = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Badge: import("svelte").Component<{
+    /**
+     * Horizontal position of the badge
+     */
+    align?: "start" | "end";
+    /**
+     * Vertical position of the badge
+     */
+    anchor?: "top" | "center" | "bottom" | "inline";
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the badge
+     */
+    class?: string;
+    /**
+     * Set the color of the badge
+     */
+    color?: "primary" | "secondary" | "error";
+    /**
+     * Set the visible number in the badge
+     */
+    count?: number;
+    /**
+     * Additional CSS classes to apply to the badge wrapper
+     */
+    wrapperClass?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Horizontal position of the badge
+     */
+    align?: "start" | "end";
+    /**
+     * Vertical position of the badge
+     */
+    anchor?: "top" | "center" | "bottom" | "inline";
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the badge
+     */
+    class?: string;
+    /**
+     * Set the color of the badge
+     */
+    color?: "primary" | "secondary" | "error";
+    /**
+     * Set the visible number in the badge
+     */
+    count?: number;
+    /**
+     * Additional CSS classes to apply to the badge wrapper
+     */
+    wrapperClass?: string;
+};