@synthaxai/ui 1.0.0

package/dist/feedback/Skeleton/Skeleton.svelte

@@ -0,0 +1,568 @@
+<!--
+  @component Skeleton
+  
+  A world-class loading placeholder component with multiple variants and animations.
+  Designed for healthcare applications where data loading states must be clearly 
+  communicated without causing anxiety.
+  
+  Features:
+  - Multiple preset variants (text, avatar, card, table-row, patient-card, etc.)
+  - Wave animation (perceived as faster than pulse)
+  - Composite skeletons for common patterns
+  - Proper accessibility without over-announcing
+  - Reduced motion support
+  
+  @example
+  <Skeleton width="200px" height="20px" />
+  
+  @example
+  <Skeleton variant="text" lines={3} />
+  
+  @example
+  <Skeleton variant="patient-card" />
+-->
+<script lang="ts">
+	type SkeletonVariant = 
+		| 'rectangle' 
+		| 'circle' 
+		| 'text' 
+		| 'avatar' 
+		| 'button' 
+		| 'card'
+		| 'image'
+		| 'table-row'
+		| 'patient-card'
+		| 'stat-card'
+		| 'list-item';
+	
+	type SkeletonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	type SkeletonAnimation = 'wave' | 'pulse' | 'none';
+
+	interface Props {
+		/** Skeleton variant */
+		variant?: SkeletonVariant;
+		/** Size preset (for avatar, button, text variants) */
+		size?: SkeletonSize;
+		/** Custom width (CSS value) */
+		width?: string;
+		/** Custom height (CSS value) */
+		height?: string;
+		/** Number of lines (for text variant) */
+		lines?: number;
+		/** Animation style - wave is perceived as faster */
+		animation?: SkeletonAnimation;
+		/** Border radius preset or custom CSS value */
+		rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
+		/** Accessible label for screen readers */
+		label?: string;
+		/** Number of items for list-based variants (table-row, list-item) */
+		count?: number;
+		/** Additional CSS classes */
+		class?: string;
+		/** ID for the skeleton element */
+		id?: string;
+	}
+
+	let {
+		variant = 'rectangle',
+		size = 'md',
+		width,
+		height,
+		lines = 1,
+		animation = 'wave',
+		rounded = 'md',
+		label = 'Loading content',
+		count = 1,
+		class: className = '',
+		id
+	}: Props = $props();
+
+	// Size presets for different variants
+	const avatarSizes: Record<SkeletonSize, { width: string; height: string }> = {
+		xs: { width: '1.5rem', height: '1.5rem' },
+		sm: { width: '2rem', height: '2rem' },
+		md: { width: '2.5rem', height: '2.5rem' },
+		lg: { width: '3rem', height: '3rem' },
+		xl: { width: '4rem', height: '4rem' }
+	};
+
+	const buttonSizes: Record<SkeletonSize, { width: string; height: string }> = {
+		xs: { width: '4rem', height: '1.75rem' },
+		sm: { width: '5rem', height: '2rem' },
+		md: { width: '6rem', height: '2.5rem' },
+		lg: { width: '8rem', height: '3rem' },
+		xl: { width: '10rem', height: '3.5rem' }
+	};
+
+	const textHeights: Record<SkeletonSize, string> = {
+		xs: '0.625rem',
+		sm: '0.75rem',
+		md: '1rem',
+		lg: '1.25rem',
+		xl: '1.5rem'
+	};
+
+	// Border radius presets
+	const radiusMap: Record<string, string> = {
+		none: '0',
+		sm: '0.25rem',
+		md: '0.375rem',
+		lg: '0.5rem',
+		xl: '0.75rem',
+		full: '9999px'
+	};
+
+	const getRadius = (r: string) => radiusMap[r] || r;
+
+	// Generate array for multiple items
+	const itemArray = $derived(Array.from({ length: count }, (_, i) => i));
+	const lineArray = $derived(Array.from({ length: lines }, (_, i) => i));
+
+	// Last line width for text variant (shorter to look natural)
+	const getLineWidth = (index: number) => {
+		if (lines === 1) return '100%';
+		if (index === lines - 1) return `${55 + Math.random() * 25}%`;
+		return '100%';
+	};
+
+	// Check if variant is a composite type
+	const isComposite = $derived(
+		['patient-card', 'stat-card', 'table-row', 'list-item'].includes(variant)
+	);
+</script>
+
+<!-- Composite: Patient Card Skeleton -->
+{#if variant === 'patient-card'}
+	<div
+		{id}
+		class="skeleton-composite skeleton-patient-card {className}"
+		class:skeleton-wave={animation === 'wave'}
+		class:skeleton-pulse={animation === 'pulse'}
+		role="status"
+		aria-label={label}
+		aria-busy="true"
+	>
+		<span class="sr-only">{label}</span>
+		<div class="skeleton-patient-header">
+			<div class="skeleton-base skeleton-avatar" aria-hidden="true"></div>
+			<div class="skeleton-patient-info">
+				<div class="skeleton-base skeleton-text-lg" aria-hidden="true"></div>
+				<div class="skeleton-base skeleton-text-sm skeleton-short" aria-hidden="true"></div>
+			</div>
+		</div>
+		<div class="skeleton-patient-body">
+			<div class="skeleton-base skeleton-text-md" aria-hidden="true"></div>
+			<div class="skeleton-base skeleton-text-md skeleton-medium" aria-hidden="true"></div>
+		</div>
+	</div>
+
+<!-- Composite: Stat Card Skeleton -->
+{:else if variant === 'stat-card'}
+	<div
+		{id}
+		class="skeleton-composite skeleton-stat-card {className}"
+		class:skeleton-wave={animation === 'wave'}
+		class:skeleton-pulse={animation === 'pulse'}
+		role="status"
+		aria-label={label}
+		aria-busy="true"
+	>
+		<span class="sr-only">{label}</span>
+		<div class="skeleton-base skeleton-text-sm skeleton-short" aria-hidden="true"></div>
+		<div class="skeleton-base skeleton-stat-value" aria-hidden="true"></div>
+		<div class="skeleton-base skeleton-text-xs skeleton-medium" aria-hidden="true"></div>
+	</div>
+
+<!-- Composite: Table Row Skeleton -->
+{:else if variant === 'table-row'}
+	<div
+		{id}
+		class="skeleton-composite skeleton-table-rows {className}"
+		role="status"
+		aria-label={label}
+		aria-busy="true"
+	>
+		<span class="sr-only">{label}</span>
+		{#each itemArray as index (index)}
+			<div 
+				class="skeleton-table-row"
+				class:skeleton-wave={animation === 'wave'}
+				class:skeleton-pulse={animation === 'pulse'}
+				aria-hidden="true"
+			>
+				<div class="skeleton-base skeleton-cell skeleton-cell-sm"></div>
+				<div class="skeleton-base skeleton-cell skeleton-cell-lg"></div>
+				<div class="skeleton-base skeleton-cell skeleton-cell-md"></div>
+				<div class="skeleton-base skeleton-cell skeleton-cell-sm"></div>
+			</div>
+		{/each}
+	</div>
+
+<!-- Composite: List Item Skeleton -->
+{:else if variant === 'list-item'}
+	<div
+		{id}
+		class="skeleton-composite skeleton-list-items {className}"
+		role="status"
+		aria-label={label}
+		aria-busy="true"
+	>
+		<span class="sr-only">{label}</span>
+		{#each itemArray as index (index)}
+			<div 
+				class="skeleton-list-item"
+				class:skeleton-wave={animation === 'wave'}
+				class:skeleton-pulse={animation === 'pulse'}
+				aria-hidden="true"
+			>
+				<div class="skeleton-base skeleton-avatar-sm"></div>
+				<div class="skeleton-list-content">
+					<div class="skeleton-base skeleton-text-md skeleton-medium"></div>
+					<div class="skeleton-base skeleton-text-sm skeleton-short"></div>
+				</div>
+			</div>
+		{/each}
+	</div>
+
+<!-- Text with multiple lines -->
+{:else if variant === 'text' && lines > 1}
+	<div
+		{id}
+		class="skeleton-text-group {className}"
+		role="status"
+		aria-label={label}
+		aria-busy="true"
+	>
+		<span class="sr-only">{label}</span>
+		{#each lineArray as index (index)}
+			<div
+				class="skeleton-base skeleton-text"
+				class:skeleton-wave={animation === 'wave'}
+				class:skeleton-pulse={animation === 'pulse'}
+				style="width: {getLineWidth(index)}; height: {textHeights[size]};"
+				aria-hidden="true"
+			></div>
+		{/each}
+	</div>
+
+<!-- Simple variants -->
+{:else}
+	<div
+		{id}
+		class="skeleton-base {className}"
+		class:skeleton-wave={animation === 'wave'}
+		class:skeleton-pulse={animation === 'pulse'}
+		style="
+			width: {width || (variant === 'avatar' || variant === 'circle' ? avatarSizes[size].width : variant === 'button' ? buttonSizes[size].width : variant === 'text' ? '100%' : variant === 'card' ? '100%' : variant === 'image' ? '100%' : '100%')};
+			height: {height || (variant === 'avatar' || variant === 'circle' ? avatarSizes[size].height : variant === 'button' ? buttonSizes[size].height : variant === 'text' ? textHeights[size] : variant === 'card' ? '8rem' : variant === 'image' ? '12rem' : '1rem')};
+			border-radius: {variant === 'avatar' || variant === 'circle' ? '9999px' : variant === 'button' ? '0.5rem' : variant === 'card' || variant === 'image' ? '0.75rem' : getRadius(rounded)};
+		"
+		role="status"
+		aria-label={label}
+		aria-busy="true"
+	>
+		<span class="sr-only">{label}</span>
+	</div>
+{/if}
+
+<style>
+	/* ========================================
+	   BASE SKELETON STYLES
+	   ======================================== */
+	.skeleton-base {
+		background-color: var(--ui-bg-tertiary);
+		position: relative;
+		overflow: hidden;
+	}
+
+	/* Screen reader only */
+	.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;
+	}
+
+	/* ========================================
+	   WAVE ANIMATION (Perceived as faster)
+	   Uses clip-path to prevent overflow issues
+	   ======================================== */
+	.skeleton-wave {
+		overflow: hidden;
+	}
+
+	.skeleton-wave::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: linear-gradient(
+			90deg,
+			transparent 0%,
+			rgba(255, 255, 255, 0.4) 50%,
+			transparent 100%
+		);
+		animation: skeleton-wave 1.6s ease-in-out infinite;
+		transform: translateX(-100%);
+	}
+
+	:global([data-theme='dark']) .skeleton-wave::after {
+		background: linear-gradient(
+			90deg,
+			transparent 0%,
+			rgba(255, 255, 255, 0.08) 50%,
+			transparent 100%
+		);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .skeleton-wave::after {
+			background: linear-gradient(
+				90deg,
+				transparent 0%,
+				rgba(255, 255, 255, 0.08) 50%,
+				transparent 100%
+			);
+		}
+	}
+
+	@keyframes skeleton-wave {
+		0% {
+			transform: translateX(-100%);
+		}
+		60%, 100% {
+			transform: translateX(100%);
+		}
+	}
+
+	/* ========================================
+	   PULSE ANIMATION
+	   ======================================== */
+	.skeleton-pulse {
+		animation: skeleton-pulse 2s ease-in-out infinite;
+	}
+
+	@keyframes skeleton-pulse {
+		0%, 100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.5;
+		}
+	}
+
+	/* ========================================
+	   TEXT SKELETON
+	   ======================================== */
+	.skeleton-text-group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		overflow: hidden;
+	}
+
+	.skeleton-text {
+		border-radius: 0.25rem;
+		overflow: hidden;
+	}
+
+	/* ========================================
+	   COMPOSITE SHARED STYLES
+	   ======================================== */
+	.skeleton-composite {
+		overflow: hidden;
+	}
+
+	/* ========================================
+	   COMPOSITE: PATIENT CARD
+	   ======================================== */
+	.skeleton-patient-card {
+		padding: 1rem;
+		background: var(--ui-bg-primary);
+		border: 1px solid var(--ui-border-default);
+		border-radius: 0.75rem;
+		overflow: hidden;
+	}
+
+	.skeleton-patient-header {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		margin-bottom: 1rem;
+	}
+
+	.skeleton-avatar {
+		width: 3rem;
+		height: 3rem;
+		border-radius: 9999px;
+		flex-shrink: 0;
+	}
+
+	.skeleton-avatar-sm {
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 9999px;
+		flex-shrink: 0;
+	}
+
+	.skeleton-patient-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.skeleton-patient-body {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	/* ========================================
+	   COMPOSITE: STAT CARD
+	   ======================================== */
+	.skeleton-stat-card {
+		padding: 1.25rem;
+		background: var(--ui-bg-primary);
+		border: 1px solid var(--ui-border-default);
+		border-radius: 0.75rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		overflow: hidden;
+	}
+
+	.skeleton-stat-value {
+		height: 2rem;
+		width: 5rem;
+		border-radius: 0.375rem;
+	}
+
+	/* ========================================
+	   COMPOSITE: TABLE ROW
+	   ======================================== */
+	.skeleton-table-rows {
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.skeleton-table-row {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		padding: 0.875rem 1rem;
+		border-bottom: 1px solid var(--ui-border-default);
+		overflow: hidden;
+	}
+
+	.skeleton-table-row:last-child {
+		border-bottom: none;
+	}
+
+	.skeleton-cell {
+		height: 1rem;
+		border-radius: 0.25rem;
+	}
+
+	.skeleton-cell-sm {
+		width: 4rem;
+	}
+
+	.skeleton-cell-md {
+		width: 8rem;
+	}
+
+	.skeleton-cell-lg {
+		flex: 1;
+	}
+
+	/* ========================================
+	   COMPOSITE: LIST ITEM
+	   ======================================== */
+	.skeleton-list-items {
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.skeleton-list-item {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.75rem 0;
+		border-bottom: 1px solid var(--ui-border-default);
+		overflow: hidden;
+	}
+
+	.skeleton-list-item:last-child {
+		border-bottom: none;
+	}
+
+	.skeleton-list-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	/* ========================================
+	   TEXT SIZE HELPERS
+	   ======================================== */
+	.skeleton-text-xs {
+		height: 0.625rem;
+		border-radius: 0.125rem;
+	}
+
+	.skeleton-text-sm {
+		height: 0.75rem;
+		border-radius: 0.125rem;
+	}
+
+	.skeleton-text-md {
+		height: 1rem;
+		border-radius: 0.25rem;
+	}
+
+	.skeleton-text-lg {
+		height: 1.25rem;
+		border-radius: 0.25rem;
+	}
+
+	/* Width helpers */
+	.skeleton-short {
+		width: 40%;
+	}
+
+	.skeleton-medium {
+		width: 70%;
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.skeleton-wave::after {
+			animation: none;
+			transform: none;
+			background: none;
+		}
+
+		.skeleton-pulse {
+			animation: none;
+		}
+
+		/* Show static slightly lighter state instead */
+		.skeleton-wave,
+		.skeleton-pulse {
+			opacity: 0.7;
+		}
+	}
+</style>

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

@@ -0,0 +1,54 @@
+type SkeletonVariant = 'rectangle' | 'circle' | 'text' | 'avatar' | 'button' | 'card' | 'image' | 'table-row' | 'patient-card' | 'stat-card' | 'list-item';
+type SkeletonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SkeletonAnimation = 'wave' | 'pulse' | 'none';
+interface Props {
+    /** Skeleton variant */
+    variant?: SkeletonVariant;
+    /** Size preset (for avatar, button, text variants) */
+    size?: SkeletonSize;
+    /** Custom width (CSS value) */
+    width?: string;
+    /** Custom height (CSS value) */
+    height?: string;
+    /** Number of lines (for text variant) */
+    lines?: number;
+    /** Animation style - wave is perceived as faster */
+    animation?: SkeletonAnimation;
+    /** Border radius preset or custom CSS value */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
+    /** Accessible label for screen readers */
+    label?: string;
+    /** Number of items for list-based variants (table-row, list-item) */
+    count?: number;
+    /** Additional CSS classes */
+    class?: string;
+    /** ID for the skeleton element */
+    id?: string;
+}
+/**
+ * Skeleton
+ *
+ * A world-class loading placeholder component with multiple variants and animations.
+ * Designed for healthcare applications where data loading states must be clearly
+ * communicated without causing anxiety.
+ *
+ * Features:
+ * - Multiple preset variants (text, avatar, card, table-row, patient-card, etc.)
+ * - Wave animation (perceived as faster than pulse)
+ * - Composite skeletons for common patterns
+ * - Proper accessibility without over-announcing
+ * - Reduced motion support
+ *
+ * @example
+ * <Skeleton width="200px" height="20px" />
+ *
+ * @example
+ * <Skeleton variant="text" lines={3} />
+ *
+ * @example
+ * <Skeleton variant="patient-card" />
+ */
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;
+//# sourceMappingURL=Skeleton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Skeleton/Skeleton.svelte.ts"],"names":[],"mappings":"AAGC,KAAK,eAAe,GACjB,WAAW,GACX,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,OAAO,GACP,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,CAAC;AAEf,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,KAAK,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD,UAAU,KAAK;IACd,uBAAuB;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,sDAAsD;IACtD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AA2JF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

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

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

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

package/dist/feedback/Skeleton/index.js

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