@salmexio/ui 0.4.0 → 1.1.0

package/dist/feedback/Toast/Toaster.svelte

@@ -0,0 +1,431 @@
+<!--
+  @component Toaster
+
+  INFRARED — Toast notification container.
+  Renders stacked toast notifications with slide-in/out animations,
+  auto-dismiss with pause-on-hover, keyboard dismiss, and ARIA live region.
+
+  Place once at your app root:
+  @example
+  <Toaster />
+-->
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { toasts } from './toastStore.js';
+import type { ToastItem } from './toastStore.js';
+import { onMount } from 'svelte';
+
+type ToastPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+
+interface Props {
+	/** Position on screen */
+	position?: ToastPosition;
+	/** Additional CSS class */
+	class?: string;
+}
+
+let {
+	position = 'bottom-right',
+	class: className = ''
+}: Props = $props();
+
+let timers = new Map<string, ReturnType<typeof setTimeout>>();
+let pausedToasts = new Set<string>();
+let dismissingIds = $state(new Set<string>());
+
+function startTimer(toast: ToastItem) {
+	if (!toast.duration || toast.duration <= 0) return;
+	clearTimer(toast.id);
+	timers.set(
+		toast.id,
+		setTimeout(() => dismiss(toast.id), toast.duration)
+	);
+}
+
+function clearTimer(id: string) {
+	const t = timers.get(id);
+	if (t) {
+		clearTimeout(t);
+		timers.delete(id);
+	}
+}
+
+function pauseTimer(id: string) {
+	pausedToasts.add(id);
+	clearTimer(id);
+}
+
+function resumeTimer(toast: ToastItem) {
+	pausedToasts.delete(toast.id);
+	startTimer(toast);
+}
+
+function dismiss(id: string) {
+	dismissingIds = new Set([...dismissingIds, id]);
+	clearTimer(id);
+	setTimeout(() => {
+		dismissingIds = new Set([...dismissingIds].filter((d) => d !== id));
+		toasts.dismiss(id);
+	}, 150);
+}
+
+function handleKeydown(e: KeyboardEvent, id: string) {
+	if (e.key === 'Escape') {
+		e.stopPropagation();
+		dismiss(id);
+	}
+}
+
+function getIcon(type: ToastItem['type']): string {
+	switch (type) {
+		case 'success': return 'M9 12l2 2 4-4';
+		case 'error': return 'M18 6L6 18M6 6l12 12';
+		case 'warning': return 'M12 9v4m0 4h.01';
+		case 'info': return 'M12 16v-4m0-4h.01';
+	}
+}
+
+// Start timers for new toasts
+$effect(() => {
+	const currentToasts = $toasts;
+	for (const toast of currentToasts) {
+		if (!timers.has(toast.id) && !pausedToasts.has(toast.id) && !dismissingIds.has(toast.id)) {
+			startTimer(toast);
+		}
+	}
+});
+
+onMount(() => {
+	return () => {
+		for (const t of timers.values()) clearTimeout(t);
+		timers.clear();
+	};
+});
+</script>
+
+<div
+	class={cn('sx-toaster', `sx-toaster-${position}`, className)}
+	aria-live="polite"
+	aria-atomic="false"
+	role="region"
+	aria-label="Notifications"
+>
+	{#each $toasts as toast (toast.id)}
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<div
+			class={cn(
+				'sx-toast',
+				`sx-toast-${toast.type}`,
+				dismissingIds.has(toast.id) && 'sx-toast-exit'
+			)}
+			role="status"
+			aria-atomic="true"
+			tabindex={-1}
+			onmouseenter={() => pauseTimer(toast.id)}
+			onmouseleave={() => resumeTimer(toast)}
+			onkeydown={(e) => handleKeydown(e, toast.id)}
+		>
+			<span class="sx-toast-icon" aria-hidden="true">
+				{#if toast.type === 'success'}
+					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<circle cx="12" cy="12" r="10" /><path d={getIcon(toast.type)} />
+					</svg>
+				{:else if toast.type === 'error'}
+					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<circle cx="12" cy="12" r="10" /><path d={getIcon(toast.type)} />
+					</svg>
+				{:else if toast.type === 'warning'}
+					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" /><path d={getIcon(toast.type)} />
+					</svg>
+				{:else}
+					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<circle cx="12" cy="12" r="10" /><path d={getIcon(toast.type)} />
+					</svg>
+				{/if}
+			</span>
+
+			<div class="sx-toast-content">
+				<p class="sx-toast-message">{toast.message}</p>
+				{#if toast.description}
+					<p class="sx-toast-description">{toast.description}</p>
+				{/if}
+			</div>
+
+			<div class="sx-toast-actions">
+				{#if toast.action}
+					<button
+						type="button"
+						class="sx-toast-action-btn"
+						onclick={() => { toast.action?.onclick(); dismiss(toast.id); }}
+					>
+						{toast.action.label}
+					</button>
+				{/if}
+				{#if toast.dismissible}
+					<button
+						type="button"
+						class="sx-toast-close"
+						onclick={() => dismiss(toast.id)}
+						aria-label="Dismiss notification"
+					>
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+							<path d="M18 6L6 18M6 6l12 12" />
+						</svg>
+					</button>
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.sx-toaster {
+		position: fixed;
+		z-index: var(--sx-z-tooltip);
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-2);
+		pointer-events: none;
+		max-width: 380px;
+		width: 100%;
+		padding: var(--sx-space-5);
+	}
+
+	.sx-toaster-bottom-right {
+		bottom: 0;
+		right: 0;
+	}
+
+	.sx-toaster-bottom-left {
+		bottom: 0;
+		left: 0;
+	}
+
+	.sx-toaster-top-right {
+		top: 0;
+		right: 0;
+	}
+
+	.sx-toaster-top-left {
+		top: 0;
+		left: 0;
+	}
+
+	/* ========== TOAST ========== */
+	.sx-toast {
+		pointer-events: auto;
+		display: flex;
+		align-items: flex-start;
+		gap: var(--sx-space-3);
+		padding: var(--sx-space-3) var(--sx-space-4);
+		background: var(--sx-glass-bg-strong);
+		backdrop-filter: var(--sx-glass-blur);
+		-webkit-backdrop-filter: var(--sx-glass-blur);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		box-shadow: var(--sx-shadow-lg);
+		border-left: 3px solid var(--sx-color-text-secondary);
+		animation: sx-toast-in 250ms var(--sx-ease-out) both;
+		outline: none;
+	}
+
+	.sx-toast:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 2px;
+	}
+
+	.sx-toast-exit {
+		animation: sx-toast-out 150ms ease-in both;
+	}
+
+	/* Type border colors */
+	.sx-toast-success {
+		border-left-color: var(--sx-color-green);
+	}
+
+	.sx-toast-error {
+		border-left-color: var(--sx-color-red);
+	}
+
+	.sx-toast-warning {
+		border-left-color: var(--sx-color-secondary);
+	}
+
+	.sx-toast-info {
+		border-left-color: var(--sx-color-primary);
+	}
+
+	/* Icon */
+	.sx-toast-icon {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		margin-top: 1px;
+	}
+
+	.sx-toast-success .sx-toast-icon {
+		color: var(--sx-color-green);
+	}
+
+	.sx-toast-error .sx-toast-icon {
+		color: var(--sx-color-red);
+	}
+
+	.sx-toast-warning .sx-toast-icon {
+		color: var(--sx-color-secondary);
+	}
+
+	.sx-toast-info .sx-toast-icon {
+		color: var(--sx-color-primary);
+	}
+
+	/* Content */
+	.sx-toast-content {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.sx-toast-message {
+		margin: 0;
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text);
+		line-height: var(--sx-leading-normal);
+	}
+
+	.sx-toast-description {
+		margin: var(--sx-space-1) 0 0;
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
+		line-height: var(--sx-leading-relaxed);
+	}
+
+	/* Actions */
+	.sx-toast-actions {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		gap: var(--sx-space-1);
+	}
+
+	.sx-toast-action-btn {
+		border: none;
+		background: none;
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-xs);
+		font-weight: 600;
+		color: var(--sx-color-primary);
+		cursor: pointer;
+		padding: var(--sx-space-1) var(--sx-space-2);
+		border-radius: var(--sx-radius-sm);
+		white-space: nowrap;
+	}
+
+	.sx-toast-action-btn:hover {
+		background: var(--sx-color-primary-subtle);
+	}
+
+	.sx-toast-action-btn:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 1px;
+	}
+
+	.sx-toast-close {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border: none;
+		background: transparent;
+		color: var(--sx-color-text-disabled);
+		cursor: pointer;
+		border-radius: var(--sx-radius-sm);
+		padding: 0;
+	}
+
+	.sx-toast-close:hover {
+		background: var(--sx-color-surface-2);
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-toast-close:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 1px;
+	}
+
+	/* Animations */
+	@keyframes sx-toast-in {
+		from {
+			opacity: 0;
+			transform: translateX(100%) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(0) scale(1);
+		}
+	}
+
+	@keyframes sx-toast-out {
+		from {
+			opacity: 1;
+			transform: translateX(0) scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: translateX(100%) scale(0.95);
+		}
+	}
+
+	.sx-toaster-bottom-left .sx-toast,
+	.sx-toaster-top-left .sx-toast {
+		animation-name: sx-toast-in-left;
+	}
+
+	.sx-toaster-bottom-left .sx-toast-exit,
+	.sx-toaster-top-left .sx-toast-exit {
+		animation-name: sx-toast-out-left;
+	}
+
+	@keyframes sx-toast-in-left {
+		from {
+			opacity: 0;
+			transform: translateX(-100%) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(0) scale(1);
+		}
+	}
+
+	@keyframes sx-toast-out-left {
+		from {
+			opacity: 1;
+			transform: translateX(0) scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: translateX(-100%) scale(0.95);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-toast,
+		.sx-toast-exit {
+			animation: none;
+		}
+	}
+
+	/* Mobile: full width at bottom */
+	@media (max-width: 480px) {
+		.sx-toaster {
+			max-width: 100%;
+			left: 0;
+			right: 0;
+			padding: var(--sx-space-3);
+		}
+	}
+</style>

package/dist/feedback/Toast/Toaster.svelte.d.ts

@@ -0,0 +1,22 @@
+type ToastPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+interface Props {
+    /** Position on screen */
+    position?: ToastPosition;
+    /** Additional CSS class */
+    class?: string;
+}
+/**
+ * Toaster
+ *
+ * INFRARED — Toast notification container.
+ * Renders stacked toast notifications with slide-in/out animations,
+ * auto-dismiss with pause-on-hover, keyboard dismiss, and ARIA live region.
+ *
+ * Place once at your app root:
+ * @example
+ * <Toaster />
+ */
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;
+//# sourceMappingURL=Toaster.svelte.d.ts.map

package/dist/feedback/Toast/Toaster.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Toast/Toaster.svelte.ts"],"names":[],"mappings":"AASA,KAAK,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/E,UAAU,KAAK;IACd,yBAAyB;IACzB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAkJD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/feedback/Toast/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Toaster } from './Toaster.svelte';
+export { toasts } from './toastStore.js';
+export type { ToastItem, ToastOptions, ToastType } from './toastStore.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/feedback/Toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/feedback/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/feedback/Toast/index.js

@@ -0,0 +1,2 @@
+export { default as Toaster } from './Toaster.svelte';
+export { toasts } from './toastStore.js';

package/dist/feedback/Toast/toastStore.d.ts

@@ -0,0 +1,34 @@
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+export interface ToastItem {
+    id: string;
+    type: ToastType;
+    message: string;
+    description?: string;
+    duration?: number;
+    dismissible?: boolean;
+    action?: {
+        label: string;
+        onclick: () => void;
+    };
+}
+export interface ToastOptions {
+    type?: ToastType;
+    description?: string;
+    duration?: number;
+    dismissible?: boolean;
+    action?: {
+        label: string;
+        onclick: () => void;
+    };
+}
+export declare const toasts: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<ToastItem[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    add: (message: string, options?: ToastOptions) => string;
+    dismiss: (id: string) => void;
+    clear: () => void;
+    success: (message: string, options?: Omit<ToastOptions, "type">) => string;
+    error: (message: string, options?: Omit<ToastOptions, "type">) => string;
+    warning: (message: string, options?: Omit<ToastOptions, "type">) => string;
+    info: (message: string, options?: Omit<ToastOptions, "type">) => string;
+};
+//# sourceMappingURL=toastStore.d.ts.map

package/dist/feedback/Toast/toastStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toastStore.d.ts","sourceRoot":"","sources":["../../../src/feedback/Toast/toastStore.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,SAAS;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CAChD;AAED,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CAChD;AAsDD,eAAO,MAAM,MAAM;;mBA9CI,MAAM,YAAW,YAAY,KAAQ,MAAM;kBAsB5C,MAAM;;uBAaP,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC;qBAE9C,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC;uBAE1C,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC;oBAE/C,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC;CAKtB,CAAC"}

package/dist/feedback/Toast/toastStore.js

@@ -0,0 +1,43 @@
+import { writable } from 'svelte/store';
+const MAX_VISIBLE = 5;
+let counter = 0;
+function createToastStore() {
+    const { subscribe, update } = writable([]);
+    function add(message, options = {}) {
+        const id = `toast-${++counter}`;
+        const toast = {
+            id,
+            type: options.type ?? 'info',
+            message,
+            description: options.description,
+            duration: options.duration ?? 5000,
+            dismissible: options.dismissible ?? true,
+            action: options.action
+        };
+        update((toasts) => {
+            const next = [toast, ...toasts];
+            // Keep queue bounded
+            if (next.length > MAX_VISIBLE)
+                return next.slice(0, MAX_VISIBLE);
+            return next;
+        });
+        return id;
+    }
+    function dismiss(id) {
+        update((toasts) => toasts.filter((t) => t.id !== id));
+    }
+    function clear() {
+        update(() => []);
+    }
+    return {
+        subscribe,
+        add,
+        dismiss,
+        clear,
+        success: (message, options) => add(message, { ...options, type: 'success' }),
+        error: (message, options) => add(message, { ...options, type: 'error' }),
+        warning: (message, options) => add(message, { ...options, type: 'warning' }),
+        info: (message, options) => add(message, { ...options, type: 'info' })
+    };
+}
+export const toasts = createToastStore();

package/dist/feedback/index.d.ts

@@ -1,3 +1,7 @@
 export { Alert } from './Alert/index.js';
 export { Spinner } from './Spinner/index.js';
+export { Toaster, toasts } from './Toast/index.js';
+export type { ToastItem, ToastOptions, ToastType } from './Toast/index.js';
+export { ProgressBar } from './ProgressBar/index.js';
+export { Skeleton } from './Skeleton/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/feedback/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feedback/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feedback/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACnD,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/feedback/index.js

@@ -1,2 +1,5 @@
 export { Alert } from './Alert/index.js';
 export { Spinner } from './Spinner/index.js';
+export { Toaster, toasts } from './Toast/index.js';
+export { ProgressBar } from './ProgressBar/index.js';
+export { Skeleton } from './Skeleton/index.js';