@synthaxai/ui 1.0.0

package/dist/feedback/Toast/Toast.svelte

@@ -0,0 +1,587 @@
+<!--
+  @component Toast
+  
+  A beautiful toast notification component for displaying temporary messages.
+  Features glass morphism design, action buttons, progress indicator, and
+  comprehensive accessibility support for healthcare applications.
+  
+  @example
+  <Toast
+    type="success"
+    message="Patient record saved successfully"
+  />
+  
+  @example
+  <Toast
+    type="error"
+    title="Save Failed"
+    message="Unable to save patient record"
+    requestId="REQ-12345"
+    showProgress
+    duration={6000}
+  />
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { X, CheckCircle2, AlertCircle, AlertTriangle, Info, Bell } from 'lucide-svelte';
+	import type { Status } from '../../types/index.js';
+
+	type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+
+	interface Props {
+		/** Toast message */
+		message: string;
+		/** Toast type/status */
+		type?: Status | 'clinical';
+		/** Optional title */
+		title?: string;
+		/** Whether the toast can be dismissed */
+		dismissible?: boolean;
+		/** Show progress bar for auto-dismiss countdown */
+		showProgress?: boolean;
+		/** Duration in ms (0 = no auto-dismiss) */
+		duration?: number;
+		/** Request ID for error tracking (displayed for errors) */
+		requestId?: string;
+		/** Action buttons slot */
+		actions?: Snippet;
+		/** Additional CSS classes */
+		class?: string;
+		/** Dismiss handler */
+		ondismiss?: () => void;
+		/** Custom dismiss button aria-label */
+		dismissAriaLabel?: string;
+		/** Unique ID for the toast */
+		id?: string;
+	}
+
+	let {
+		message,
+		type = 'info',
+		title = '',
+		dismissible = true,
+		showProgress = false,
+		duration = 5000,
+		requestId = '',
+		actions,
+		class: className = '',
+		ondismiss,
+		dismissAriaLabel,
+		id
+	}: Props = $props();
+
+	// Generate unique ID (use prop directly, generate fallback once)
+	const generatedId = `toast-${Math.random().toString(36).substr(2, 9)}`;
+	const toastId = $derived(id || generatedId);
+
+	// Compute dismiss aria-label
+	const closeLabel = $derived(
+		dismissAriaLabel || `Dismiss ${title || type} notification`
+	);
+
+	// Determine ARIA attributes based on type
+	const ariaRole = $derived(type === 'error' || type === 'warning' || type === 'clinical' ? 'alert' : 'status');
+	const ariaLive = $derived(type === 'error' || type === 'clinical' ? 'assertive' : 'polite');
+
+	function handleDismiss() {
+		ondismiss?.();
+	}
+</script>
+
+<output
+	{id}
+	class="toast toast-{type} {className}"
+	role={ariaRole}
+	aria-live={ariaLive}
+	aria-atomic="true"
+>
+	<!-- Icon with circular background -->
+	<span class="toast-icon" aria-hidden="true">
+		{#if type === 'success'}
+			<CheckCircle2 size={20} strokeWidth={2.5} />
+		{:else if type === 'error'}
+			<AlertCircle size={20} strokeWidth={2.5} />
+		{:else if type === 'warning'}
+			<AlertTriangle size={20} strokeWidth={2.5} />
+		{:else if type === 'clinical'}
+			<Bell size={20} strokeWidth={2.5} />
+		{:else}
+			<Info size={20} strokeWidth={2.5} />
+		{/if}
+	</span>
+
+	<!-- Content -->
+	<div class="toast-content">
+		{#if title}
+			<p class="toast-title">{title}</p>
+		{/if}
+		<p class="toast-message">{message}</p>
+		
+		{#if requestId}
+			<p class="toast-request-id">
+				<span class="request-id-label">Request ID:</span>
+				<code class="request-id-code">{requestId}</code>
+			</p>
+		{/if}
+
+		{#if actions}
+			<div class="toast-actions">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Dismiss button -->
+	{#if dismissible}
+		<button
+			type="button"
+			class="toast-dismiss"
+			onclick={handleDismiss}
+			aria-label={closeLabel}
+		>
+			<X size={18} strokeWidth={2} />
+		</button>
+	{/if}
+
+	<!-- Progress bar for auto-dismiss -->
+	{#if showProgress && duration > 0}
+		<div 
+			class="toast-progress"
+			style="animation-duration: {duration}ms"
+		></div>
+	{/if}
+</output>
+
+<style>
+	/* ========================================
+	   BASE TOAST STYLES - Glass Morphism
+	   ======================================== */
+	.toast {
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		gap: 0.875rem;
+		padding: 1rem 1.125rem;
+		border-radius: 12px;
+		border: 1px solid;
+		min-width: 320px;
+		max-width: 420px;
+		font-family: var(--ui-font-sans, 'Inter', system-ui, sans-serif);
+		
+		/* Ensure proper stacking */
+		z-index: 1;
+		
+		/* Glass morphism effect */
+		backdrop-filter: blur(20px) saturate(180%);
+		-webkit-backdrop-filter: blur(20px) saturate(180%);
+		
+		/* Elevated shadow */
+		box-shadow:
+			0 8px 32px rgba(0, 0, 0, 0.12),
+			0 2px 8px rgba(0, 0, 0, 0.08),
+			inset 0 1px 0 rgba(255, 255, 255, 0.1);
+		
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		overflow: hidden;
+	}
+
+	.toast:hover {
+		transform: translateY(-1px);
+		box-shadow:
+			0 12px 40px rgba(0, 0, 0, 0.15),
+			0 4px 12px rgba(0, 0, 0, 0.1),
+			inset 0 1px 0 rgba(255, 255, 255, 0.15);
+	}
+
+	/* ========================================
+	   TYPE STYLES
+	   ======================================== */
+	
+	/* Success */
+	.toast-success {
+		background: 
+			linear-gradient(135deg, rgb(var(--ui-color-success) / 0.15) 0%, rgb(var(--ui-color-success) / 0.08) 100%),
+			var(--ui-bg-primary);
+		border-color: rgb(var(--ui-color-success) / 0.3);
+	}
+
+	.toast-success .toast-icon {
+		color: rgb(var(--ui-color-success));
+		background: rgb(var(--ui-color-success) / 0.15);
+	}
+
+	.toast-success .toast-progress {
+		background: rgb(var(--ui-color-success));
+	}
+
+	/* Error */
+	.toast-error {
+		background: 
+			linear-gradient(135deg, rgb(var(--ui-color-error) / 0.15) 0%, rgb(var(--ui-color-error) / 0.08) 100%),
+			var(--ui-bg-primary);
+		border-color: rgb(var(--ui-color-error) / 0.3);
+	}
+
+	.toast-error .toast-icon {
+		color: rgb(var(--ui-color-error));
+		background: rgb(var(--ui-color-error) / 0.15);
+	}
+
+	.toast-error .toast-progress {
+		background: rgb(var(--ui-color-error));
+	}
+
+	/* Warning */
+	.toast-warning {
+		background: 
+			linear-gradient(135deg, rgb(var(--ui-color-warning) / 0.15) 0%, rgb(var(--ui-color-warning) / 0.08) 100%),
+			var(--ui-bg-primary);
+		border-color: rgb(var(--ui-color-warning) / 0.3);
+	}
+
+	.toast-warning .toast-icon {
+		color: rgb(var(--ui-color-warning));
+		background: rgb(var(--ui-color-warning) / 0.15);
+	}
+
+	.toast-warning .toast-progress {
+		background: rgb(var(--ui-color-warning));
+	}
+
+	/* Info */
+	.toast-info {
+		background: 
+			linear-gradient(135deg, rgb(var(--ui-color-info) / 0.15) 0%, rgb(var(--ui-color-info) / 0.08) 100%),
+			var(--ui-bg-primary);
+		border-color: rgb(var(--ui-color-info) / 0.3);
+	}
+
+	.toast-info .toast-icon {
+		color: rgb(var(--ui-color-info));
+		background: rgb(var(--ui-color-info) / 0.15);
+	}
+
+	.toast-info .toast-progress {
+		background: rgb(var(--ui-color-info));
+	}
+
+	/* Neutral */
+	.toast-neutral {
+		background: linear-gradient(135deg, var(--ui-bg-tertiary) 0%, var(--ui-bg-secondary) 100%);
+		border-color: var(--ui-border-default);
+	}
+
+	.toast-neutral .toast-icon {
+		color: var(--ui-text-tertiary);
+		background: var(--ui-bg-tertiary);
+	}
+
+	.toast-neutral .toast-progress {
+		background: var(--ui-text-tertiary);
+	}
+
+	/* Clinical */
+	.toast-clinical {
+		background: 
+			linear-gradient(135deg, rgb(var(--ui-color-primary) / 0.15) 0%, rgb(var(--ui-color-primary) / 0.08) 100%),
+			var(--ui-bg-primary);
+		border-color: rgb(var(--ui-color-primary) / 0.3);
+	}
+
+	.toast-clinical .toast-icon {
+		color: rgb(var(--ui-color-primary));
+		background: rgb(var(--ui-color-primary) / 0.15);
+	}
+
+	.toast-clinical .toast-progress {
+		background: rgb(var(--ui-color-primary));
+	}
+
+	/* ========================================
+	   DARK MODE ADJUSTMENTS
+	   ======================================== */
+	:global([data-theme='dark']) .toast-success {
+		background: linear-gradient(135deg, rgb(var(--ui-color-success) / 0.25) 0%, rgb(var(--ui-color-success) / 0.12) 100%);
+		border-color: rgb(var(--ui-color-success) / 0.4);
+	}
+
+	:global([data-theme='dark']) .toast-success .toast-icon {
+		color: rgb(var(--ui-color-success-light, var(--ui-color-success)));
+		background: rgb(var(--ui-color-success) / 0.2);
+	}
+
+	:global([data-theme='dark']) .toast-error {
+		background: linear-gradient(135deg, rgb(var(--ui-color-error) / 0.25) 0%, rgb(var(--ui-color-error) / 0.12) 100%);
+		border-color: rgb(var(--ui-color-error) / 0.4);
+	}
+
+	:global([data-theme='dark']) .toast-error .toast-icon {
+		color: rgb(var(--ui-color-error-light, var(--ui-color-error)));
+		background: rgb(var(--ui-color-error) / 0.2);
+	}
+
+	:global([data-theme='dark']) .toast-warning {
+		background: linear-gradient(135deg, rgb(var(--ui-color-warning) / 0.25) 0%, rgb(var(--ui-color-warning) / 0.12) 100%);
+		border-color: rgb(var(--ui-color-warning) / 0.4);
+	}
+
+	:global([data-theme='dark']) .toast-warning .toast-icon {
+		color: rgb(var(--ui-color-warning-light, var(--ui-color-warning)));
+		background: rgb(var(--ui-color-warning) / 0.2);
+	}
+
+	:global([data-theme='dark']) .toast-info {
+		background: linear-gradient(135deg, rgb(var(--ui-color-info) / 0.25) 0%, rgb(var(--ui-color-info) / 0.12) 100%);
+		border-color: rgb(var(--ui-color-info) / 0.4);
+	}
+
+	:global([data-theme='dark']) .toast-info .toast-icon {
+		color: rgb(var(--ui-color-info-light, var(--ui-color-info)));
+		background: rgb(var(--ui-color-info) / 0.2);
+	}
+
+	:global([data-theme='dark']) .toast-clinical {
+		background: linear-gradient(135deg, rgb(var(--ui-color-primary-light) / 0.25) 0%, rgb(var(--ui-color-primary-light) / 0.12) 100%);
+		border-color: rgb(var(--ui-color-primary-light) / 0.4);
+	}
+
+	:global([data-theme='dark']) .toast-clinical .toast-icon {
+		color: rgb(var(--ui-color-primary-light));
+		background: rgb(var(--ui-color-primary-light) / 0.2);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .toast-success {
+			background: linear-gradient(135deg, rgb(var(--ui-color-success) / 0.25) 0%, rgb(var(--ui-color-success) / 0.12) 100%);
+			border-color: rgb(var(--ui-color-success) / 0.4);
+		}
+
+		:global(:root:not([data-theme='light'])) .toast-success .toast-icon {
+			color: rgb(var(--ui-color-success-light, var(--ui-color-success)));
+			background: rgb(var(--ui-color-success) / 0.2);
+		}
+
+		:global(:root:not([data-theme='light'])) .toast-error {
+			background: linear-gradient(135deg, rgb(var(--ui-color-error) / 0.25) 0%, rgb(var(--ui-color-error) / 0.12) 100%);
+			border-color: rgb(var(--ui-color-error) / 0.4);
+		}
+
+		:global(:root:not([data-theme='light'])) .toast-error .toast-icon {
+			color: rgb(var(--ui-color-error-light, var(--ui-color-error)));
+			background: rgb(var(--ui-color-error) / 0.2);
+		}
+
+		:global(:root:not([data-theme='light'])) .toast-warning {
+			background: linear-gradient(135deg, rgb(var(--ui-color-warning) / 0.25) 0%, rgb(var(--ui-color-warning) / 0.12) 100%);
+			border-color: rgb(var(--ui-color-warning) / 0.4);
+		}
+
+		:global(:root:not([data-theme='light'])) .toast-warning .toast-icon {
+			color: rgb(var(--ui-color-warning-light, var(--ui-color-warning)));
+			background: rgb(var(--ui-color-warning) / 0.2);
+		}
+
+		:global(:root:not([data-theme='light'])) .toast-info {
+			background: linear-gradient(135deg, rgb(var(--ui-color-info) / 0.25) 0%, rgb(var(--ui-color-info) / 0.12) 100%);
+			border-color: rgb(var(--ui-color-info) / 0.4);
+		}
+
+		:global(:root:not([data-theme='light'])) .toast-info .toast-icon {
+			color: rgb(var(--ui-color-info-light, var(--ui-color-info)));
+			background: rgb(var(--ui-color-info) / 0.2);
+		}
+
+		:global(:root:not([data-theme='light'])) .toast-clinical {
+			background: linear-gradient(135deg, rgb(var(--ui-color-primary-light) / 0.25) 0%, rgb(var(--ui-color-primary-light) / 0.12) 100%);
+			border-color: rgb(var(--ui-color-primary-light) / 0.4);
+		}
+
+		:global(:root:not([data-theme='light'])) .toast-clinical .toast-icon {
+			color: rgb(var(--ui-color-primary-light));
+			background: rgb(var(--ui-color-primary-light) / 0.2);
+		}
+	}
+
+	/* ========================================
+	   ICON STYLES
+	   ======================================== */
+	.toast-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 36px;
+		height: 36px;
+		border-radius: 50%;
+		transition: transform 0.2s ease;
+	}
+
+	.toast:hover .toast-icon {
+		transform: scale(1.05);
+	}
+
+	/* ========================================
+	   CONTENT STYLES
+	   ======================================== */
+	.toast-content {
+		flex: 1;
+		min-width: 0;
+		padding-top: 0.25rem;
+	}
+
+	.toast-title {
+		margin: 0 0 0.25rem 0;
+		font-size: 0.9375rem;
+		font-weight: 600;
+		line-height: 1.4;
+		color: var(--ui-text-primary);
+	}
+
+	.toast-message {
+		margin: 0;
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1.5;
+		color: var(--ui-text-primary);
+		word-wrap: break-word;
+	}
+
+	/* Request ID for error tracking */
+	.toast-request-id {
+		margin: 0.5rem 0 0 0;
+		font-size: 0.75rem;
+		line-height: 1.4;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.375rem;
+		opacity: 0.8;
+	}
+
+	.request-id-label {
+		color: var(--ui-text-secondary);
+		font-weight: 500;
+	}
+
+	.request-id-code {
+		font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
+		font-size: 0.6875rem;
+		padding: 0.125rem 0.375rem;
+		border-radius: 4px;
+		background: var(--ui-bg-tertiary);
+		color: var(--ui-text-primary);
+		border: 1px solid var(--ui-border-default);
+		font-weight: 600;
+		letter-spacing: -0.01em;
+	}
+
+	/* Action buttons */
+	.toast-actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem;
+		margin-top: 0.75rem;
+	}
+
+	/* ========================================
+	   DISMISS BUTTON
+	   ======================================== */
+	.toast-dismiss {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 28px;
+		height: 28px;
+		border-radius: 50%;
+		background: transparent;
+		border: none;
+		color: var(--ui-text-secondary);
+		cursor: pointer;
+		transition: all 0.2s ease;
+		padding: 0;
+		margin-top: 0.125rem;
+	}
+
+	.toast-dismiss:hover {
+		background: var(--ui-bg-tertiary);
+		color: var(--ui-text-primary);
+		transform: scale(1.1);
+	}
+
+	.toast-dismiss:active {
+		transform: scale(0.95);
+	}
+
+	.toast-dismiss:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	:global([data-theme='dark']) .toast-dismiss:focus-visible {
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .toast-dismiss:focus-visible {
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+	}
+
+	/* ========================================
+	   PROGRESS BAR
+	   ======================================== */
+	.toast-progress {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		height: 3px;
+		width: 100%;
+		border-radius: 0 0 12px 12px;
+		transform-origin: left;
+		animation: shrink linear forwards;
+		opacity: 0.8;
+	}
+
+	@keyframes shrink {
+		from {
+			transform: scaleX(1);
+		}
+		to {
+			transform: scaleX(0);
+		}
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.toast,
+		.toast-icon,
+		.toast-dismiss {
+			transition: none;
+		}
+
+		.toast-progress {
+			animation: none;
+			transform: scaleX(0);
+		}
+	}
+
+	/* ========================================
+	   RESPONSIVE
+	   ======================================== */
+	@media (max-width: 480px) {
+		.toast {
+			min-width: 280px;
+			max-width: 100%;
+			padding: 0.875rem 1rem;
+		}
+
+		.toast-icon {
+			width: 32px;
+			height: 32px;
+		}
+	}
+</style>

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

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import type { Status } from '../../types/index.js';
+interface Props {
+    /** Toast message */
+    message: string;
+    /** Toast type/status */
+    type?: Status | 'clinical';
+    /** Optional title */
+    title?: string;
+    /** Whether the toast can be dismissed */
+    dismissible?: boolean;
+    /** Show progress bar for auto-dismiss countdown */
+    showProgress?: boolean;
+    /** Duration in ms (0 = no auto-dismiss) */
+    duration?: number;
+    /** Request ID for error tracking (displayed for errors) */
+    requestId?: string;
+    /** Action buttons slot */
+    actions?: Snippet;
+    /** Additional CSS classes */
+    class?: string;
+    /** Dismiss handler */
+    ondismiss?: () => void;
+    /** Custom dismiss button aria-label */
+    dismissAriaLabel?: string;
+    /** Unique ID for the toast */
+    id?: string;
+}
+/**
+ * Toast
+ *
+ * A beautiful toast notification component for displaying temporary messages.
+ * Features glass morphism design, action buttons, progress indicator, and
+ * comprehensive accessibility support for healthcare applications.
+ *
+ * @example
+ * <Toast
+ *   type="success"
+ *   message="Patient record saved successfully"
+ * />
+ *
+ * @example
+ * <Toast
+ *   type="error"
+ *   title="Save Failed"
+ *   message="Unable to save patient record"
+ *   requestId="REQ-12345"
+ *   showProgress
+ *   duration={6000}
+ * />
+ */
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;
+//# sourceMappingURL=Toast.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Toast/Toast.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAKlD,UAAU,KAAK;IACd,oBAAoB;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AAgGF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}