@websline/system-components 1.3.24 → 1.3.26

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

@@ -3,8 +3,8 @@ import { tv } from "../../../../utils/tailwind.js";
 const closeButtonVariants = tv({
 	slots: {
 		button:
-			"relative cursor-pointer overflow-hidden bg-white p-1 transition duration-200 select-none dark:bg-neutral-800 dark:text-white",
-		bar: "absolute inset-[0px] z-0 bg-gray-300 dark:bg-neutral-700",
+			"relative cursor-pointer overflow-hidden bg-neutral-100 p-1 text-neutral-700 transition duration-200 select-none dark:bg-neutral-900 dark:text-neutral-300",
+		bar: "absolute inset-0 z-0 bg-neutral-300 dark:bg-neutral-700",
 	},
 	variants: {
 		shape: {
@@ -12,7 +12,7 @@ const closeButtonVariants = tv({
 				button: "rounded-full",
 			},
 			square: {
-				button: "rounded-md",
+				button: "rounded-sm",
 			},
 		},
 	},

package/dist/components/atoms/actions/iconButton/IconButton.svelte

@@ -6,7 +6,7 @@
 	 * @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 {"default" | "primary" | "secondary" | "success" | "danger" | "transparent"} [color="default"] Button color
+	 * @property {"default" | "primary" | "secondary" | "success" | "error" | "transparent"} [color="default"] Button color
 	 * @property {boolean} [disabled=false] Whether the button is disabled
 	 * @property {boolean} [loading=false] Whether the button is in a loading state, for example after a form submission
 	 * @property {string} [icon=""] Icon name

package/dist/components/atoms/actions/iconButton/IconButton.svelte.d.ts

@@ -15,7 +15,7 @@ declare const IconButton: import("svelte").Component<{
     /**
      * Button color
      */
-    color?: "default" | "primary" | "secondary" | "success" | "danger" | "transparent";
+    color?: "default" | "primary" | "secondary" | "success" | "error" | "transparent";
     /**
      * Whether the button is disabled
      */
@@ -61,7 +61,7 @@ type Props = {
     /**
      * Button color
      */
-    color?: "default" | "primary" | "secondary" | "success" | "danger" | "transparent";
+    color?: "default" | "primary" | "secondary" | "success" | "error" | "transparent";
     /**
      * Whether the button is disabled
      */

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

@@ -73,13 +73,13 @@ const iconButtonVariants = tv({
 				"border-green-500 text-green-500 hover:border-green-700 hover:bg-green-700 hover:text-white dark:border-green-500 dark:text-green-500 dark:hover:border-green-700 dark:hover:bg-green-700",
 		},
 		{
-			color: "danger",
+			color: "error",
 			variant: "filled",
 			class:
 				"bg-red-500 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-700",
 		},
 		{
-			color: "danger",
+			color: "error",
 			variant: "outlined",
 			class:
 				"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",

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

@@ -4,10 +4,10 @@ const inputVariants = tv({
 	extend: inputBaseVariant,
 	slots: {
 		adornmentStart:
-			"pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
+			"pointer-events-none shrink-0 body-small text-neutral-900 dark:text-neutral-200",
 		adornmentEnd:
-			"pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
-		base: "relative h-10",
+			"pointer-events-none shrink-0 body-small text-neutral-900 dark:text-neutral-200",
+		base: "flex h-10 items-center gap-2",
 		input:
 			"h-full w-full border-0 bg-transparent p-0 [font-size:inherit] leading-[inherit] focus:shadow-none focus:ring-0 focus:outline-0",
 	},

package/dist/components/atoms/select/Select.svelte

@@ -4,6 +4,7 @@
 
 	/**
 	 * @typedef {Object} Props
+	 * @property {string|import("svelte").SvelteComponent|Function} [adornmentStart=""] Content to display at the start of the field (e.g., icon or text)
 	 * @property {"default" | "raised"} [buttonAppearance="default"] Appearance of the button variant
 	 * @property {"small" | "medium" | "large"} [buttonSize="medium"] Size of the button variant
 	 * @property {string} [class=""] Additional CSS classes for the select
@@ -19,6 +20,7 @@
 
 	/** @type {Props} */
 	let {
+		adornmentStart = "",
 		buttonAppearance = "default",
 		buttonSize = "medium",
 		class: className = "",
@@ -43,6 +45,7 @@
 			error: error ?? storeValues.error ?? false,
 			id: id ?? storeValues.id ?? "",
 			required: required ?? storeValues.required ?? false,
+			value: value ?? "",
 		};
 	});
 
@@ -50,32 +53,48 @@
 		selectVariants({
 			buttonAppearance,
 			buttonSize,
-			defaultValue: variant === "default" && (value === "" || value == null),
+			defaultValue: variant === "default" && localValues.value === "",
 			error: localValues.error,
 			variant,
 		}),
 	);
+
+	const setValue = (v) => (value = v);
 </script>
 
-<select
-	class={styles.base({ class: className, disabled: localValues.disabled })}
-	disabled={localValues.disabled}
-	id={localValues.id}
-	required={localValues.required}
-	bind:value
-	{...rest}>
-	{#if placeholder}
-		<option class={styles.option({ disabled: true })} hidden readonly value=""
-			>{placeholder}</option>
+<div class={styles.base({ class: className, disabled: localValues.disabled })}>
+	{#if adornmentStart}
+		<div class={styles.adornmentStart()}>
+			{#if typeof adornmentStart === "function"}
+				{@render adornmentStart()}
+			{:else}
+				{adornmentStart}
+			{/if}
+		</div>
 	{/if}
-	{#each options as { disabled, label, value: optValue } (optValue)}
-		<option
-			class={styles.option({ disabled })}
-			{disabled}
-			selected={value === optValue}
-			value={optValue}>{label}</option>
-	{/each}
-</select>
+	<select
+		class={styles.select()}
+		disabled={localValues.disabled}
+		id={localValues.id}
+		required={localValues.required}
+		bind:value={() => localValues.value, setValue}
+		{...rest}>
+		{#if placeholder}
+			<option
+				class={styles.option({ disabled: localValues.required })}
+				hidden={localValues.required}
+				readonly
+				value="">{placeholder}</option>
+		{/if}
+		{#each options as { disabled, label, value: optValue } (optValue)}
+			<option
+				class={styles.option({ disabled })}
+				{disabled}
+				selected={value === optValue}
+				value={optValue}>{label}</option>
+		{/each}
+	</select>
+</div>
 
 <style>
 	select {

package/dist/components/atoms/select/Select.svelte.d.ts

@@ -4,6 +4,10 @@ type Select = {
     $set?(props: Partial<Props>): void;
 };
 declare const Select: import("svelte").Component<{
+    /**
+     * Content to display at the start of the field (e.g., icon or text)
+     */
+    adornmentStart?: string | import("svelte").SvelteComponent | Function;
     /**
      * Appearance of the button variant
      */
@@ -54,6 +58,10 @@ declare const Select: import("svelte").Component<{
     variant?: "default" | "button";
 }, {}, "value">;
 type Props = {
+    /**
+     * Content to display at the start of the field (e.g., icon or text)
+     */
+    adornmentStart?: string | import("svelte").SvelteComponent | Function;
     /**
      * Appearance of the button variant
      */

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

@@ -2,6 +2,7 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
     disabled: {
         false: {
             option: string;
+            select: string;
         };
         true: {
             option: string;
@@ -9,15 +10,19 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
     };
     variant: {
         default: {
+            adornmentStart: string;
             base: string;
         };
         button: {
+            adornmentStart: string;
             base: string;
         };
     };
 }, {
-    base: string[];
+    adornmentStart: string;
+    base: string;
     option: string[];
+    select: string[];
 }, undefined, {
     disabled: {
         true: {

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

@@ -3,29 +3,32 @@ import { inputBaseVariant, tv } from "../../../utils/tailwind.js";
 const selectVariants = tv({
 	extend: inputBaseVariant,
 	slots: {
-		base: [
-			"flex items-center",
-			"[&::picker(select)]:my-1 [&::picker(select)]:rounded-sm [&::picker(select)]:border-0 [&::picker(select)]:p-1",
-			"[&::picker-icon]:hidden",
-			"[&::picker(select)]:bg-white [&::picker(select)]:shadow-sm dark:[&::picker(select)]:bg-neutral-800",
-			"bg-none after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
-			"after:ml-auto after:size-5 after:shrink-0",
-			"[&:open]:after:rotate-180",
-		],
+		adornmentStart: "pointer-events-none shrink-0 body-small leading-[inherit]",
+		base: "flex items-center ui-select-label",
 		option: [
-			"flex rounded-sm p-2 ui-select-label",
+			"flex rounded-sm p-2",
 			"bg-white dark:bg-neutral-800",
 			"bg-linear-to-r to-transparent",
 			"[&::checkmark]:order-1 [&::checkmark]:ml-auto [&::checkmark]:shrink-0",
 			"[&::checkmark]:bg-current [&::checkmark]:bg-size-[100%] [&::checkmark]:bg-center [&::checkmark]:bg-no-repeat",
 			"[&::checkmark]:size-4 [&::checkmark]:content-['']",
 		],
+		select: [
+			"flex size-full items-center border-0 bg-transparent p-0 [font-size:inherit] leading-[inherit] focus:shadow-none focus:ring-0 focus:outline-0",
+			"[&::picker(select)]:my-1 [&::picker(select)]:rounded-sm [&::picker(select)]:border-0 [&::picker(select)]:p-1",
+			"[&::picker-icon]:hidden",
+			"[&::picker(select)]:bg-white [&::picker(select)]:shadow-sm dark:[&::picker(select)]:bg-neutral-800",
+			"bg-none after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
+			"after:ml-auto after:size-5 after:shrink-0",
+			"[&:open]:after:rotate-180",
+		],
 	},
 	variants: {
 		disabled: {
 			false: {
 				option:
 					"cursor-pointer text-neutral-900 hover:from-black/15 dark:text-neutral-200 dark:hover:from-white/15",
+				select: "cursor-pointer",
 			},
 			true: {
 				option: "text-neutral-500 dark:text-neutral-500 [&::checkmark]:hidden",
@@ -33,9 +36,11 @@ const selectVariants = tv({
 		},
 		variant: {
 			default: {
-				base: "min-h-10 border border-neutral-300 pr-2 pl-4",
+				adornmentStart: "text-neutral-900 dark:text-neutral-200",
+				base: "min-h-10 gap-2 border border-neutral-300 pr-2 pl-4",
 			},
 			button: {
+				adornmentStart: "text-neutral-500",
 				base: "gap-0.5 border-none bg-white pr-1 pl-2 leading-5 ring-transparent! dark:bg-neutral-800",
 			},
 		},
@@ -65,7 +70,7 @@ const selectVariants = tv({
 			variant: "button",
 			disabled: false,
 			class: {
-				base: "cursor-pointer focus-within:bg-neutral-300 hover:bg-neutral-300 focus:ring-2 focus:ring-blue-500 dark:focus-within:bg-neutral-600 dark:hover:bg-neutral-600",
+				base: "focus-within:bg-neutral-300 hover:bg-neutral-300 focus:ring-2 focus:ring-blue-500 dark:focus-within:bg-neutral-600 dark:hover:bg-neutral-600",
 			},
 		},
 		{

package/dist/components/molecules/{notification/Notification.svelte → notifications/systemAlert/SystemAlert.svelte}

@@ -1,15 +1,15 @@
 <script>
-	import { CloseButton, Icon } from "../../../index.js";
-	import { notificationVariants } from "./notification.variants.js";
+	import { CloseButton, Icon } from "../../../../index.js";
+	import { systemAlertVariants } from "./systemAlert.variants.js";
 
 	/**
 	 * @typedef {Object} Props
-	 * @property {boolean} [autoClose=true] Whether to automatically close the notification after a duration
+	 * @property {boolean} [autoClose=true] Whether to automatically close the system alert 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
+	 * @property {string} [icon=""] Icon to display in the system alert
+	 * @property {string} [message=""] Message to display in the system alert
+	 * @property {string} [title=""] Title to display in the system alert
+	 * @property {"info" | "success" | "warning" | "error"} [variant="info"] System alert variant
 	 */
 
 	/** @type {Props} */
@@ -24,7 +24,7 @@
 		...rest
 	} = $props();
 
-	let styles = $derived(notificationVariants({ variant }));
+	let styles = $derived(systemAlertVariants({ variant }));
 </script>
 
 <div class={styles.base({ class: className })} {...rest}>

package/dist/components/molecules/notifications/systemAlert/SystemAlert.svelte.d.ts

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

package/dist/components/molecules/{notification/notification.variants.d.ts → notifications/systemAlert/systemAlert.variants.d.ts}

@@ -1,4 +1,4 @@
-export const notificationVariants: import("tailwind-variants").TVReturnType<{
+export const systemAlertVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         info: {
             icon: string;
@@ -9,7 +9,7 @@ export const notificationVariants: import("tailwind-variants").TVReturnType<{
         warning: {
             icon: string;
         };
-        danger: {
+        error: {
             icon: string;
         };
     };
@@ -31,7 +31,7 @@ export const notificationVariants: import("tailwind-variants").TVReturnType<{
         warning: {
             icon: string;
         };
-        danger: {
+        error: {
             icon: string;
         };
     };
@@ -53,7 +53,7 @@ export const notificationVariants: import("tailwind-variants").TVReturnType<{
         warning: {
             icon: string;
         };
-        danger: {
+        error: {
             icon: string;
         };
     };

package/dist/components/molecules/{notification/notification.variants.js → notifications/systemAlert/systemAlert.variants.js}

@@ -1,13 +1,13 @@
-import { tv } from "../../../utils/tailwind.js";
+import { tv } from "../../../../utils/tailwind.js";
 
-const notificationVariants = tv({
+const systemAlertVariants = tv({
 	slots: {
-		base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border border-neutral-300 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900",
+		base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border border-neutral-200 bg-white/90 p-2 backdrop-blur-sm dark:border-neutral-700 dark:bg-neutral-800/90",
 		close: "col-3 self-start",
 		icon: "flex h-10 w-10 items-center justify-center rounded-sm text-white",
 		content: "flex flex-col justify-center",
 		message: "ui-caption-helper text-neutral-500",
-		title: "body-small dark:text-white",
+		title: "body-small dark:text-neutral-200",
 	},
 	variants: {
 		variant: {
@@ -20,11 +20,11 @@ const notificationVariants = tv({
 			warning: {
 				icon: "bg-yellow-500",
 			},
-			danger: {
+			error: {
 				icon: "bg-red-500",
 			},
 		},
 	},
 });
 
-export { notificationVariants };
+export { systemAlertVariants };

package/dist/components/molecules/notifications/toast/Toast.svelte

@@ -0,0 +1,51 @@
+<script>
+	import { Icon, Spinner } from "../../../../index.js";
+	import { toastVariants } from "./toast.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {number} [durationInSeconds=6] Duration in seconds before auto-close triggers
+	 * @property {string} [message=""] Message to display in the toast
+	 * @property {(event) => void} [onClose] Function to call when the toast is auto-closed
+	 * @property {"info" | "loading" | "error"} [variant="info"] Toast variant
+	 */
+
+	const ICONS_BY_VARIANT = {
+		error: "closeSmall",
+		info: "check",
+	};
+
+	/** @type {Props} */
+	let {
+		class: className = "",
+		durationInSeconds = 6,
+		message = "",
+		onClose,
+		variant = "info",
+		...rest
+	} = $props();
+
+	let to;
+	let styles = $derived(toastVariants({ variant }));
+
+	$effect(() => {
+		clearTimeout(to);
+		if (variant !== "loading" && durationInSeconds > 0) {
+			to = setTimeout(() => {
+				onClose?.();
+			}, durationInSeconds * 1e3);
+		}
+	});
+</script>
+
+<div class={styles.base({ class: className })} {...rest}>
+	<div class={styles.icon()}>
+		{#if variant === "loading"}
+			<Spinner size="small" />
+		{:else}
+			<Icon name={ICONS_BY_VARIANT[variant]} size={24} />
+		{/if}
+	</div>
+	<p class={styles.message()}>{message}</p>
+</div>

package/dist/components/molecules/notifications/toast/Toast.svelte.d.ts

@@ -0,0 +1,49 @@
+export default Toast;
+type Toast = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Toast: import("svelte").Component<{
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Duration in seconds before auto-close triggers
+     */
+    durationInSeconds?: number;
+    /**
+     * Message to display in the toast
+     */
+    message?: string;
+    /**
+     * Function to call when the toast is auto-closed
+     */
+    onClose?: (event: any) => void;
+    /**
+     * Toast variant
+     */
+    variant?: "info" | "loading" | "error";
+}, {}, "">;
+type Props = {
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Duration in seconds before auto-close triggers
+     */
+    durationInSeconds?: number;
+    /**
+     * Message to display in the toast
+     */
+    message?: string;
+    /**
+     * Function to call when the toast is auto-closed
+     */
+    onClose?: (event: any) => void;
+    /**
+     * Toast variant
+     */
+    variant?: "info" | "loading" | "error";
+};

package/dist/components/molecules/notifications/toast/toast.variants.d.ts

@@ -0,0 +1,31 @@
+export const toastVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        error: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    message: string;
+}, undefined, {
+    variant: {
+        error: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    message: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        error: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    message: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/notifications/toast/toast.variants.js

@@ -0,0 +1,18 @@
+import { tv } from "../../../../utils/tailwind.js";
+
+const toastVariants = tv({
+	slots: {
+		base: "flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2 text-neutral-200",
+		icon: "grid size-6 place-items-center",
+		message: "ui-select-label font-medium",
+	},
+	variants: {
+		variant: {
+			error: {
+				base: "bg-red-500",
+			},
+		},
+	},
+});
+
+export { toastVariants };

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte

@@ -44,31 +44,30 @@
 	});
 </script>
 
-<div class={stylesByVariant.base({ class: baseClass })} {...rest}>
-	<button
-		class={stylesByVariant.button({ class: className })}
-		role="tab"
-		onclick={() => {
-			store.update(localeValue);
-		}}
-		type="button">
+<button
+	class={stylesByVariant.base({ class: baseClass || className })}
+	role="tab"
+	onclick={() => {
+		store.update(localeValue);
+	}}
+	type="button"
+	{...rest}>
+	{#if icon}
+		<Icon
+			class={stylesByVariant.icon()}
+			name={icon}
+			size={variant === "tabs" || size === "small" ? 16 : 24} />
+	{/if}
+	{#if children}
 		<div class={stylesByVariant.content()}>
-			{#if icon}
-				<Icon
-					class={stylesByVariant.icon()}
-					name={icon}
-					size={variant === "tabs" || size === "small" ? 16 : 24} />
-			{/if}
-			<span class={stylesByVariant.span()}>
-				{@render children?.()}
-			</span>
+			{@render children()}
 		</div>
-		{#if isActive}
-			<div
-				class={stylesByVariant.trigger({ appearance })}
-				in:send={{ key: "active-tab" }}
-				out:receive={{ key: "active-tab" }}>
-			</div>
-		{/if}
-	</button>
-</div>
+	{/if}
+	{#if isActive}
+		<div
+			class={stylesByVariant.trigger({ appearance })}
+			in:send={{ key: "active-tab" }}
+			out:receive={{ key: "active-tab" }}>
+		</div>
+	{/if}
+</button>