@synthaxai/ui 1.0.0

package/dist/feedback/Toast/ToastContainer.svelte

@@ -0,0 +1,168 @@
+<!--
+  @component ToastContainer
+  
+  A container component for managing and displaying multiple toast notifications.
+  Add this once to your root layout to display toast notifications.
+  Use with the toast store for programmatic toast triggering.
+  
+  @example
+  In your root layout:
+  <ToastContainer position="top-right" />
+  
+  @example
+  With custom max toasts:
+  <ToastContainer position="bottom-right" maxToasts={4} />
+-->
+<script lang="ts">
+	import { toasts, type ToastData } from './toast-store.js';
+	import Toast from './Toast.svelte';
+
+	type Position = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+
+	interface Props {
+		/** Position of the toast container */
+		position?: Position;
+		/** Maximum number of toasts to display */
+		maxToasts?: number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		position = 'top-right',
+		maxToasts = 5,
+		class: className = ''
+	}: Props = $props();
+
+	// Limit displayed toasts
+	const displayedToasts = $derived($toasts.slice(-maxToasts));
+
+	function handleDismiss(id: string) {
+		toasts.remove(id);
+	}
+</script>
+
+<div 
+	class="toast-container toast-{position} {className}"
+	style="z-index: 2147483647 !important;"
+	role="region"
+	aria-label="Notifications"
+	aria-live="polite"
+>
+	{#each displayedToasts as toast (toast.id)}
+		<div class="toast-wrapper toast-animate-in">
+			<Toast
+				id={toast.id}
+				type={toast.type}
+				title={toast.title}
+				message={toast.message}
+				dismissible={toast.dismissible}
+				showProgress={toast.showProgress}
+				duration={toast.duration}
+				requestId={toast.requestId}
+				ondismiss={() => handleDismiss(toast.id)}
+			/>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.toast-container {
+		position: fixed;
+		z-index: 2147483647; /* Maximum z-index value */
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		pointer-events: none;
+		padding: 1rem;
+	}
+
+	.toast-wrapper {
+		pointer-events: auto;
+	}
+
+	/* CSS animation for entry - maintains z-index throughout */
+	.toast-animate-in {
+		animation: toastSlideIn 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+	}
+
+	@keyframes toastSlideIn {
+		0% {
+			opacity: 0;
+			transform: translateY(-16px) scale(0.96);
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	/* Position variants */
+	.toast-top-right {
+		top: 0;
+		right: 0;
+		align-items: flex-end;
+	}
+
+	.toast-top-left {
+		top: 0;
+		left: 0;
+		align-items: flex-start;
+	}
+
+	.toast-top-center {
+		top: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		align-items: center;
+	}
+
+	.toast-bottom-right {
+		bottom: 0;
+		right: 0;
+		align-items: flex-end;
+		flex-direction: column-reverse;
+	}
+
+	.toast-bottom-left {
+		bottom: 0;
+		left: 0;
+		align-items: flex-start;
+		flex-direction: column-reverse;
+	}
+
+	.toast-bottom-center {
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		align-items: center;
+		flex-direction: column-reverse;
+	}
+
+	/* Responsive adjustments */
+	@media (max-width: 480px) {
+		.toast-container {
+			left: 0;
+			right: 0;
+			padding: 0.75rem;
+		}
+
+		.toast-top-center,
+		.toast-bottom-center {
+			transform: none;
+		}
+
+		.toast-container:not(.toast-top-center):not(.toast-bottom-center) {
+			align-items: stretch;
+		}
+	}
+
+	/* Reduced motion */
+	@media (prefers-reduced-motion: reduce) {
+		.toast-animate-in {
+			animation: none;
+			opacity: 1;
+			transform: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,28 @@
+type Position = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+interface Props {
+    /** Position of the toast container */
+    position?: Position;
+    /** Maximum number of toasts to display */
+    maxToasts?: number;
+    /** Additional CSS classes */
+    class?: string;
+}
+/**
+ * ToastContainer
+ *
+ * A container component for managing and displaying multiple toast notifications.
+ * Add this once to your root layout to display toast notifications.
+ * Use with the toast store for programmatic toast triggering.
+ *
+ * @example
+ * In your root layout:
+ * <ToastContainer position="top-right" />
+ *
+ * @example
+ * With custom max toasts:
+ * <ToastContainer position="bottom-right" maxToasts={4} />
+ */
+declare const ToastContainer: import("svelte").Component<Props, {}, "">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;
+//# sourceMappingURL=ToastContainer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Toast/ToastContainer.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,aAAa,GAAG,eAAe,CAAC;AAE3G,UAAU,KAAK;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAkCF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,4 @@
+export { default as Toast } from './Toast.svelte';
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { toasts, type ToastData, type ToastType, type ToastOptions } from './toast-store.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,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/feedback/Toast/index.js

@@ -0,0 +1,3 @@
+export { default as Toast } from './Toast.svelte';
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { toasts } from './toast-store.js';

package/dist/feedback/Toast/toast-store.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Toast Notification Store
+ *
+ * Centralized notification system for user feedback.
+ * Provides programmatic API for showing toasts with automatic cleanup.
+ *
+ * @example
+ * // In your component
+ * import { toasts } from '@synthaxai/ui';
+ *
+ * // Show a success toast
+ * toasts.success('Patient record saved successfully');
+ *
+ * // Show an error with request ID
+ * toasts.error('Failed to save record', { requestId: 'REQ-12345' });
+ *
+ * // Show with custom options
+ * toasts.show({
+ *   type: 'warning',
+ *   title: 'Attention Required',
+ *   message: 'Patient has documented allergies',
+ *   duration: 8000
+ * });
+ */
+import type { Status } from '../../types/index.js';
+export type ToastType = Status | 'clinical';
+export interface ToastData {
+    id: string;
+    type: ToastType;
+    message: string;
+    title?: string;
+    duration: number;
+    dismissible: boolean;
+    showProgress: boolean;
+    requestId?: string;
+    createdAt: number;
+}
+export interface ToastOptions {
+    type?: ToastType;
+    title?: string;
+    message: string;
+    duration?: number;
+    dismissible?: boolean;
+    showProgress?: boolean;
+    requestId?: string;
+}
+interface ToastMethodOptions {
+    title?: string;
+    duration?: number;
+    dismissible?: boolean;
+    showProgress?: boolean;
+    requestId?: string;
+}
+export declare const toasts: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<ToastData[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    show: (options: ToastOptions) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+    success: (message: string, options?: ToastMethodOptions) => string;
+    error: (message: string, options?: ToastMethodOptions) => string;
+    warning: (message: string, options?: ToastMethodOptions) => string;
+    info: (message: string, options?: ToastMethodOptions) => string;
+    clinical: (message: string, options?: ToastMethodOptions) => string;
+    neutral: (message: string, options?: ToastMethodOptions) => string;
+    promise: <T>(promise: Promise<T>, options: {
+        loading: string;
+        success: string | ((data: T) => string);
+        error: string | ((error: unknown) => string);
+    }) => Promise<T>;
+};
+export {};
+//# sourceMappingURL=toast-store.d.ts.map

package/dist/feedback/Toast/toast-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-store.d.ts","sourceRoot":"","sources":["../../../src/feedback/Toast/toast-store.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;AAE5C,MAAM,WAAW,SAAS;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,kBAAkB;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AA+JD,eAAO,MAAM,MAAM;;oBA1IK,YAAY,KAAG,MAAM;iBA8BxB,MAAM,KAAG,IAAI;iBAcf,IAAI;uBAUI,MAAM,YAAY,kBAAkB,KAAG,MAAM;qBAO/C,MAAM,YAAY,kBAAkB,KAAG,MAAM;uBAO3C,MAAM,YAAY,kBAAkB,KAAG,MAAM;oBAOhD,MAAM,YAAY,kBAAkB,KAAG,MAAM;wBAOzC,MAAM,YAAY,kBAAkB,KAAG,MAAM;uBAO9C,MAAM,YAAY,kBAAkB,KAAG,MAAM;cAOhD,CAAC,WACd,OAAO,CAAC,CAAC,CAAC,WACV;QACR,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;QACxC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;KAC7C,KACC,OAAO,CAAC,CAAC,CAAC;CAmC0B,CAAC"}

package/dist/feedback/Toast/toast-store.js

@@ -0,0 +1,157 @@
+/**
+ * Toast Notification Store
+ *
+ * Centralized notification system for user feedback.
+ * Provides programmatic API for showing toasts with automatic cleanup.
+ *
+ * @example
+ * // In your component
+ * import { toasts } from '@synthaxai/ui';
+ *
+ * // Show a success toast
+ * toasts.success('Patient record saved successfully');
+ *
+ * // Show an error with request ID
+ * toasts.error('Failed to save record', { requestId: 'REQ-12345' });
+ *
+ * // Show with custom options
+ * toasts.show({
+ *   type: 'warning',
+ *   title: 'Attention Required',
+ *   message: 'Patient has documented allergies',
+ *   duration: 8000
+ * });
+ */
+import { writable } from 'svelte/store';
+// Default durations (WCAG recommends 6+ seconds for readability)
+const DEFAULT_DURATIONS = {
+    success: 4000,
+    info: 5000,
+    warning: 6000,
+    error: 8000,
+    neutral: 5000,
+    clinical: 8000
+};
+function createToastStore() {
+    const { subscribe, update, set } = writable([]);
+    let nextId = 1;
+    const timeouts = new Map();
+    /**
+     * Show a toast with full options
+     */
+    function show(options) {
+        const type = options.type || 'info';
+        const id = `toast-${nextId++}`;
+        const toast = {
+            id,
+            type,
+            message: options.message,
+            title: options.title,
+            duration: options.duration ?? DEFAULT_DURATIONS[type],
+            dismissible: options.dismissible ?? true,
+            showProgress: options.showProgress ?? (options.duration !== 0 && options.duration !== undefined),
+            requestId: options.requestId,
+            createdAt: Date.now()
+        };
+        update((toasts) => [...toasts, toast]);
+        // Auto-dismiss if duration > 0
+        if (toast.duration > 0) {
+            const timeout = setTimeout(() => remove(id), toast.duration);
+            timeouts.set(id, timeout);
+        }
+        return id;
+    }
+    /**
+     * Remove a toast by ID
+     */
+    function remove(id) {
+        // Clear any pending timeout
+        const timeout = timeouts.get(id);
+        if (timeout) {
+            clearTimeout(timeout);
+            timeouts.delete(id);
+        }
+        update((toasts) => toasts.filter((t) => t.id !== id));
+    }
+    /**
+     * Clear all toasts
+     */
+    function clear() {
+        // Clear all timeouts
+        timeouts.forEach((timeout) => clearTimeout(timeout));
+        timeouts.clear();
+        set([]);
+    }
+    /**
+     * Show a success toast
+     */
+    function success(message, options) {
+        return show({ ...options, type: 'success', message });
+    }
+    /**
+     * Show an error toast
+     */
+    function error(message, options) {
+        return show({ ...options, type: 'error', message });
+    }
+    /**
+     * Show a warning toast
+     */
+    function warning(message, options) {
+        return show({ ...options, type: 'warning', message });
+    }
+    /**
+     * Show an info toast
+     */
+    function info(message, options) {
+        return show({ ...options, type: 'info', message });
+    }
+    /**
+     * Show a clinical alert toast
+     */
+    function clinical(message, options) {
+        return show({ ...options, type: 'clinical', message });
+    }
+    /**
+     * Show a neutral toast
+     */
+    function neutral(message, options) {
+        return show({ ...options, type: 'neutral', message });
+    }
+    /**
+     * Promise-based toast - shows loading, then success/error
+     */
+    async function promise(promise, options) {
+        const loadingId = show({
+            type: 'info',
+            message: options.loading,
+            duration: 0,
+            dismissible: false
+        });
+        try {
+            const result = await promise;
+            remove(loadingId);
+            success(typeof options.success === 'function' ? options.success(result) : options.success);
+            return result;
+        }
+        catch (err) {
+            remove(loadingId);
+            error(typeof options.error === 'function' ? options.error(err) : options.error);
+            throw err;
+        }
+    }
+    return {
+        subscribe,
+        show,
+        remove,
+        clear,
+        success,
+        error,
+        warning,
+        info,
+        clinical,
+        neutral,
+        promise
+    };
+}
+export const toasts = createToastStore();

package/dist/feedback/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @synthaxai/ui - Feedback Components
+ *
+ * Components for displaying loading states, progress, notifications,
+ * and empty states in healthcare workflows.
+ */
+export { Spinner } from './Spinner/index.js';
+export { ProgressBar } from './ProgressBar/index.js';
+export { EmptyState } from './EmptyState/index.js';
+export { Toast } from './Toast/index.js';
+export { Alert } from './Alert/index.js';
+export { Skeleton } from './Skeleton/index.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/feedback/index.js

@@ -0,0 +1,12 @@
+/**
+ * @synthaxai/ui - Feedback Components
+ *
+ * Components for displaying loading states, progress, notifications,
+ * and empty states in healthcare workflows.
+ */
+export { Spinner } from './Spinner/index.js';
+export { ProgressBar } from './ProgressBar/index.js';
+export { EmptyState } from './EmptyState/index.js';
+export { Toast } from './Toast/index.js';
+export { Alert } from './Alert/index.js';
+export { Skeleton } from './Skeleton/index.js';