@synthaxai/ui 1.0.0

package/dist/feedback/Spinner/Spinner.svelte

@@ -0,0 +1,434 @@
+<!--
+  @component Spinner
+  
+  A world-class loading spinner component with multiple styles, sizes, and accessibility features.
+  Designed for healthcare applications where clear feedback during data operations is critical.
+  
+  Features:
+  - Multiple animation styles (ring, dots, pulse)
+  - Proper ARIA announcements
+  - Reduced motion support
+  - Optional delay to prevent flash on fast operations
+  - Overlay mode for blocking interactions
+  
+  @example
+  <Spinner />
+  
+  @example
+  <Spinner size="lg" label="Loading patient data..." showLabel />
+  
+  @example
+  <Spinner style="dots" variant="primary" />
+-->
+<script lang="ts">
+	type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	type SpinnerVariant = 'primary' | 'secondary' | 'white' | 'success' | 'error';
+	type SpinnerStyle = 'ring' | 'dots' | 'pulse';
+
+	interface Props {
+		/** Size of the spinner */
+		size?: SpinnerSize;
+		/** Color variant */
+		variant?: SpinnerVariant;
+		/** Animation style */
+		style?: SpinnerStyle;
+		/** Accessible label for screen readers */
+		label?: string;
+		/** Whether to show the label visually */
+		showLabel?: boolean;
+		/** Delay before showing spinner (prevents flash on fast loads) */
+		delay?: number;
+		/** Show as overlay covering parent container */
+		overlay?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** ID for the spinner element */
+		id?: string;
+	}
+
+	let {
+		size = 'md',
+		variant = 'primary',
+		style = 'ring',
+		label = 'Loading...',
+		showLabel = false,
+		delay = 0,
+		overlay = false,
+		class: className = '',
+		id
+	}: Props = $props();
+
+	// Delay visibility to prevent flash on fast operations
+	let isVisible = $state(false);
+	
+	// Use $effect to handle delay reactively
+	$effect(() => {
+		if (delay === 0) {
+			isVisible = true;
+			return;
+		}
+		
+		isVisible = false;
+		const timer = setTimeout(() => {
+			isVisible = true;
+		}, delay);
+		
+		return () => clearTimeout(timer);
+	});
+
+	// Size configurations
+	const sizeConfig: Record<SpinnerSize, { dimension: number; stroke: number; fontSize: string; dotSize: number }> = {
+		xs: { dimension: 16, stroke: 2, fontSize: 'text-xs', dotSize: 4 },
+		sm: { dimension: 20, stroke: 2.5, fontSize: 'text-sm', dotSize: 5 },
+		md: { dimension: 28, stroke: 3, fontSize: 'text-sm', dotSize: 6 },
+		lg: { dimension: 40, stroke: 3.5, fontSize: 'text-base', dotSize: 8 },
+		xl: { dimension: 56, stroke: 4, fontSize: 'text-lg', dotSize: 10 }
+	};
+
+	const config = $derived(sizeConfig[size]);
+</script>
+
+{#if isVisible}
+	<div
+		{id}
+		class="spinner spinner-{size} spinner-{variant} {className}"
+		class:spinner-overlay={overlay}
+		role="status"
+		aria-live="polite"
+		aria-busy="true"
+		aria-label={label}
+	>
+		<div class="spinner-content">
+			<!-- Ring Spinner (Default) -->
+			{#if style === 'ring'}
+				<svg
+					class="spinner-ring"
+					width={config.dimension}
+					height={config.dimension}
+					viewBox="0 0 24 24"
+					fill="none"
+					aria-hidden="true"
+				>
+					<!-- Background track -->
+					<circle
+						class="spinner-track"
+						cx="12"
+						cy="12"
+						r="10"
+						stroke="currentColor"
+						stroke-width={config.stroke}
+						opacity="0.2"
+					/>
+					<!-- Spinning arc -->
+					<circle
+						class="spinner-arc"
+						cx="12"
+						cy="12"
+						r="10"
+						stroke="currentColor"
+						stroke-width={config.stroke}
+						stroke-linecap="round"
+						stroke-dasharray="32 32"
+						stroke-dashoffset="0"
+					/>
+				</svg>
+			{/if}
+
+			<!-- Dots Spinner -->
+			{#if style === 'dots'}
+				<div 
+					class="spinner-dots"
+					style="--dot-size: {config.dotSize}px; --spinner-dimension: {config.dimension}px;"
+					aria-hidden="true"
+				>
+					<span class="dot dot-1"></span>
+					<span class="dot dot-2"></span>
+					<span class="dot dot-3"></span>
+				</div>
+			{/if}
+
+			<!-- Pulse Spinner -->
+			{#if style === 'pulse'}
+				<div 
+					class="spinner-pulse"
+					style="width: {config.dimension}px; height: {config.dimension}px;"
+					aria-hidden="true"
+				>
+					<span class="pulse-ring pulse-ring-1"></span>
+					<span class="pulse-ring pulse-ring-2"></span>
+					<span class="pulse-dot"></span>
+				</div>
+			{/if}
+
+			<!-- Label -->
+			{#if showLabel}
+				<span class="spinner-label {config.fontSize}">
+					{label}
+				</span>
+			{:else}
+				<span class="sr-only">{label}</span>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	/* ========================================
+	   BASE SPINNER STYLES
+	   ======================================== */
+	.spinner {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.spinner-content {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.spinner-label {
+		color: var(--ui-text-secondary);
+	}
+
+	/* Screen reader only class */
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	/* ========================================
+	   OVERLAY MODE
+	   ======================================== */
+	.spinner-overlay {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgb(var(--ui-bg-primary-rgb, 255 255 255) / 0.8);
+		backdrop-filter: blur(2px);
+		z-index: 10;
+		border-radius: inherit;
+	}
+
+	:global([data-theme='dark']) .spinner-overlay {
+		background: rgb(10 10 10 / 0.8);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .spinner-overlay {
+			background: rgb(10 10 10 / 0.8);
+		}
+	}
+
+	/* ========================================
+	   VARIANT COLORS
+	   ======================================== */
+	.spinner-primary {
+		color: rgb(var(--ui-color-primary));
+	}
+
+	.spinner-secondary {
+		color: var(--ui-text-tertiary);
+	}
+
+	.spinner-white {
+		color: white;
+	}
+
+	.spinner-success {
+		color: rgb(var(--ui-color-success));
+	}
+
+	.spinner-error {
+		color: rgb(var(--ui-color-error));
+	}
+
+	/* Dark mode adjustments */
+	:global([data-theme='dark']) .spinner-primary {
+		color: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .spinner-primary {
+			color: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	/* ========================================
+	   RING SPINNER (Default)
+	   ======================================== */
+	.spinner-ring {
+		animation: spin 1s linear infinite;
+	}
+
+	.spinner-track {
+		opacity: 0.15;
+	}
+
+	.spinner-arc {
+		transform-origin: center;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* ========================================
+	   DOTS SPINNER
+	   ======================================== */
+	.spinner-dots {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: calc(var(--dot-size) * 0.6);
+		height: var(--spinner-dimension);
+	}
+
+	.dot {
+		width: var(--dot-size);
+		height: var(--dot-size);
+		border-radius: 50%;
+		background-color: currentColor;
+		animation: dot-bounce 1.4s ease-in-out infinite both;
+	}
+
+	.dot-1 {
+		animation-delay: -0.32s;
+	}
+
+	.dot-2 {
+		animation-delay: -0.16s;
+	}
+
+	.dot-3 {
+		animation-delay: 0s;
+	}
+
+	@keyframes dot-bounce {
+		0%, 80%, 100% {
+			transform: scale(0.6);
+			opacity: 0.5;
+		}
+		40% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	/* ========================================
+	   PULSE SPINNER
+	   ======================================== */
+	.spinner-pulse {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.pulse-ring {
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+		border: 2px solid currentColor;
+		opacity: 0;
+		animation: pulse-ring 2s ease-out infinite;
+	}
+
+	.pulse-ring-2 {
+		animation-delay: 1s;
+	}
+
+	.pulse-dot {
+		width: 30%;
+		height: 30%;
+		border-radius: 50%;
+		background-color: currentColor;
+		animation: pulse-dot 2s ease-in-out infinite;
+	}
+
+	@keyframes pulse-ring {
+		0% {
+			transform: scale(0.5);
+			opacity: 0.8;
+		}
+		100% {
+			transform: scale(1.2);
+			opacity: 0;
+		}
+	}
+
+	@keyframes pulse-dot {
+		0%, 100% {
+			transform: scale(0.8);
+			opacity: 0.8;
+		}
+		50% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.spinner-ring {
+			animation: none;
+		}
+
+		.spinner-arc {
+			stroke-dasharray: 16 48;
+			opacity: 0.8;
+		}
+
+		.dot {
+			animation: none;
+			opacity: 0.7;
+		}
+
+		.dot-1 {
+			opacity: 0.4;
+		}
+
+		.dot-2 {
+			opacity: 0.7;
+		}
+
+		.dot-3 {
+			opacity: 1;
+		}
+
+		.pulse-ring,
+		.pulse-dot {
+			animation: none;
+		}
+
+		.pulse-ring {
+			opacity: 0.3;
+			transform: scale(1);
+		}
+
+		.pulse-ring-2 {
+			display: none;
+		}
+
+		.pulse-dot {
+			opacity: 1;
+		}
+	}
+</style>

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

@@ -0,0 +1,49 @@
+type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerVariant = 'primary' | 'secondary' | 'white' | 'success' | 'error';
+type SpinnerStyle = 'ring' | 'dots' | 'pulse';
+interface Props {
+    /** Size of the spinner */
+    size?: SpinnerSize;
+    /** Color variant */
+    variant?: SpinnerVariant;
+    /** Animation style */
+    style?: SpinnerStyle;
+    /** Accessible label for screen readers */
+    label?: string;
+    /** Whether to show the label visually */
+    showLabel?: boolean;
+    /** Delay before showing spinner (prevents flash on fast loads) */
+    delay?: number;
+    /** Show as overlay covering parent container */
+    overlay?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** ID for the spinner element */
+    id?: string;
+}
+/**
+ * Spinner
+ *
+ * A world-class loading spinner component with multiple styles, sizes, and accessibility features.
+ * Designed for healthcare applications where clear feedback during data operations is critical.
+ *
+ * Features:
+ * - Multiple animation styles (ring, dots, pulse)
+ * - Proper ARIA announcements
+ * - Reduced motion support
+ * - Optional delay to prevent flash on fast operations
+ * - Overlay mode for blocking interactions
+ *
+ * @example
+ * <Spinner />
+ *
+ * @example
+ * <Spinner size="lg" label="Loading patient data..." showLabel />
+ *
+ * @example
+ * <Spinner style="dots" variant="primary" />
+ */
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;
+//# sourceMappingURL=Spinner.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAGC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpD,KAAK,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9E,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9C,UAAU,KAAK;IACd,0BAA0B;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,sBAAsB;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AAiGF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as Spinner } from './Spinner.svelte';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/feedback/Spinner/index.js

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.svelte';