@synthaxai/ui 1.0.0

package/dist/feedback/EmptyState/EmptyState.svelte

@@ -0,0 +1,377 @@
+<!--
+  @component EmptyState
+  
+  A world-class empty state component for displaying zero-data states with
+  contextual messaging, illustrations, and clear calls-to-action.
+  Designed for healthcare applications where empty states should guide users
+  without creating confusion or anxiety.
+  
+  Features:
+  - Multiple visual variants (default, search, error, first-use, success)
+  - Custom illustrations/icons
+  - Primary and secondary actions
+  - Compact mode for inline use
+  - Professional, calming design
+  
+  @example
+  <EmptyState
+    title="No patients found"
+    description="Try adjusting your search criteria"
+  />
+  
+  @example
+  <EmptyState
+    variant="first-use"
+    title="Welcome to Patient Records"
+    description="Get started by adding your first patient"
+  >
+    {#snippet action()}
+      <Button>Add Patient</Button>
+    {/snippet}
+  </EmptyState>
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { 
+		Inbox, 
+		Search, 
+		AlertCircle, 
+		Sparkles, 
+		CheckCircle2,
+		FileX
+	} from 'lucide-svelte';
+
+	type EmptyStateSize = 'sm' | 'md' | 'lg';
+	type EmptyStateVariant = 'default' | 'search' | 'error' | 'first-use' | 'success' | 'no-results';
+
+	interface Props {
+		/** Title text */
+		title: string;
+		/** Description text */
+		description?: string;
+		/** Size variant */
+		size?: EmptyStateSize;
+		/** Visual variant - determines icon and styling */
+		variant?: EmptyStateVariant;
+		/** Custom icon snippet (overrides variant icon) */
+		icon?: Snippet;
+		/** Primary action button/content snippet */
+		action?: Snippet;
+		/** Secondary action button/content snippet */
+		secondaryAction?: Snippet;
+		/** Whether to show a subtle background */
+		showBackground?: boolean;
+		/** Whether to use compact horizontal layout */
+		compact?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** ID for the element */
+		id?: string;
+	}
+
+	let { 
+		title, 
+		description = '', 
+		size = 'md', 
+		variant = 'default',
+		icon, 
+		action, 
+		secondaryAction,
+		showBackground = false,
+		compact = false,
+		class: className = '',
+		id
+	}: Props = $props();
+
+	// Size configurations with refined spacing
+	const sizeConfig: Record<
+		EmptyStateSize,
+		{
+			iconSize: number;
+			iconWrapperSize: string;
+			titleClass: string;
+			descriptionClass: string;
+			contentMaxWidth: string;
+			contentGap: string;
+		}
+	> = {
+		sm: {
+			iconSize: 22,
+			iconWrapperSize: '2.75rem',
+			titleClass: 'empty-state-title-sm',
+			descriptionClass: 'empty-state-desc-sm',
+			contentMaxWidth: '18rem',
+			contentGap: '0.25rem'
+		},
+		md: {
+			iconSize: 28,
+			iconWrapperSize: '3.5rem',
+			titleClass: 'empty-state-title-md',
+			descriptionClass: 'empty-state-desc-md',
+			contentMaxWidth: '22rem',
+			contentGap: '0.375rem'
+		},
+		lg: {
+			iconSize: 36,
+			iconWrapperSize: '4.5rem',
+			titleClass: 'empty-state-title-lg',
+			descriptionClass: 'empty-state-desc-lg',
+			contentMaxWidth: '26rem',
+			contentGap: '0.5rem'
+		}
+	};
+
+	// Variant configurations
+	const variantConfig: Record<
+		EmptyStateVariant,
+		{
+			iconBg: string;
+			iconColor: string;
+		}
+	> = {
+		default: {
+			iconBg: 'var(--ui-bg-tertiary)',
+			iconColor: 'var(--ui-text-tertiary)'
+		},
+		search: {
+			iconBg: 'rgb(var(--ui-color-info) / 0.12)',
+			iconColor: 'rgb(var(--ui-color-info))'
+		},
+		error: {
+			iconBg: 'rgb(var(--ui-color-error) / 0.12)',
+			iconColor: 'rgb(var(--ui-color-error))'
+		},
+		'first-use': {
+			iconBg: 'rgb(var(--ui-color-primary) / 0.12)',
+			iconColor: 'rgb(var(--ui-color-primary))'
+		},
+		success: {
+			iconBg: 'rgb(var(--ui-color-success) / 0.12)',
+			iconColor: 'rgb(var(--ui-color-success))'
+		},
+		'no-results': {
+			iconBg: 'rgb(var(--ui-color-warning) / 0.12)',
+			iconColor: 'rgb(var(--ui-color-warning))'
+		}
+	};
+
+	const config = $derived(sizeConfig[size]);
+	const variantStyle = $derived(variantConfig[variant]);
+
+	// Get default icon based on variant
+	const getDefaultIcon = () => {
+		switch (variant) {
+			case 'search':
+				return Search;
+			case 'error':
+				return AlertCircle;
+			case 'first-use':
+				return Sparkles;
+			case 'success':
+				return CheckCircle2;
+			case 'no-results':
+				return FileX;
+			default:
+				return Inbox;
+		}
+	};
+
+	const DefaultIcon = $derived(getDefaultIcon());
+</script>
+
+<div
+	{id}
+	class="empty-state empty-state-{size} {className}"
+	class:empty-state-compact={compact}
+	class:empty-state-bg={showBackground}
+	role="status"
+>
+	<!-- Icon -->
+	<div
+		class="empty-state-icon"
+		style="
+			width: {config.iconWrapperSize};
+			height: {config.iconWrapperSize};
+			background-color: {variantStyle.iconBg};
+			color: {variantStyle.iconColor};
+		"
+		aria-hidden="true"
+	>
+		{#if icon}
+			{@render icon()}
+		{:else}
+			{@const Icon = DefaultIcon}
+			<Icon size={config.iconSize} strokeWidth={1.5} />
+		{/if}
+	</div>
+
+	<!-- Content -->
+	<div 
+		class="empty-state-content"
+		style="max-width: {config.contentMaxWidth}; gap: {config.contentGap};"
+	>
+		<h3 class="empty-state-title {config.titleClass}">
+			{title}
+		</h3>
+
+		{#if description}
+			<p class="empty-state-description {config.descriptionClass}">
+				{description}
+			</p>
+		{/if}
+	</div>
+
+	<!-- Actions -->
+	{#if action || secondaryAction}
+		<div class="empty-state-actions">
+			{#if action}
+				{@render action()}
+			{/if}
+			{#if secondaryAction}
+				{@render secondaryAction()}
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* ========================================
+	   BASE STYLES
+	   ======================================== */
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+	}
+
+	/* Size-specific padding */
+	.empty-state-sm {
+		padding: 1.5rem 1rem;
+		gap: 0.75rem;
+	}
+
+	.empty-state-md {
+		padding: 2rem 1.5rem;
+		gap: 1rem;
+	}
+
+	.empty-state-lg {
+		padding: 3rem 2rem;
+		gap: 1.25rem;
+	}
+
+	/* ========================================
+	   COMPACT VARIANT (Horizontal)
+	   ======================================== */
+	.empty-state-compact {
+		flex-direction: row;
+		text-align: left;
+		padding: 1rem 1.25rem;
+		gap: 1rem;
+	}
+
+	.empty-state-compact .empty-state-icon {
+		width: 2.5rem !important;
+		height: 2.5rem !important;
+	}
+
+	.empty-state-compact .empty-state-content {
+		max-width: none !important;
+		gap: 0.125rem !important;
+		flex: 1;
+	}
+
+	.empty-state-compact .empty-state-actions {
+		margin-top: 0;
+		margin-left: auto;
+		flex-shrink: 0;
+	}
+
+	/* ========================================
+	   BACKGROUND VARIANT
+	   ======================================== */
+	.empty-state-bg {
+		background-color: var(--ui-bg-secondary);
+		border: 1px solid var(--ui-border-default);
+		border-radius: 0.75rem;
+	}
+
+	/* ========================================
+	   ICON STYLES
+	   ======================================== */
+	.empty-state-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9999px;
+		flex-shrink: 0;
+	}
+
+	/* ========================================
+	   CONTENT STYLES
+	   ======================================== */
+	.empty-state-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.empty-state-compact .empty-state-content {
+		align-items: flex-start;
+	}
+
+	.empty-state-title {
+		font-weight: 600;
+		color: var(--ui-text-primary);
+		margin: 0;
+		line-height: 1.35;
+	}
+
+	.empty-state-title-sm {
+		font-size: 0.9375rem;
+	}
+
+	.empty-state-title-md {
+		font-size: 1.0625rem;
+	}
+
+	.empty-state-title-lg {
+		font-size: 1.25rem;
+	}
+
+	.empty-state-description {
+		color: var(--ui-text-secondary);
+		margin: 0;
+		line-height: 1.5;
+	}
+
+	.empty-state-desc-sm {
+		font-size: 0.8125rem;
+	}
+
+	.empty-state-desc-md {
+		font-size: 0.875rem;
+	}
+
+	.empty-state-desc-lg {
+		font-size: 0.9375rem;
+	}
+
+	/* ========================================
+	   ACTIONS STYLES
+	   ======================================== */
+	.empty-state-actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		gap: 0.625rem;
+		margin-top: 0.25rem;
+	}
+
+	.empty-state-compact .empty-state-actions {
+		justify-content: flex-start;
+	}
+</style>

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

@@ -0,0 +1,63 @@
+import type { Snippet } from 'svelte';
+type EmptyStateSize = 'sm' | 'md' | 'lg';
+type EmptyStateVariant = 'default' | 'search' | 'error' | 'first-use' | 'success' | 'no-results';
+interface Props {
+    /** Title text */
+    title: string;
+    /** Description text */
+    description?: string;
+    /** Size variant */
+    size?: EmptyStateSize;
+    /** Visual variant - determines icon and styling */
+    variant?: EmptyStateVariant;
+    /** Custom icon snippet (overrides variant icon) */
+    icon?: Snippet;
+    /** Primary action button/content snippet */
+    action?: Snippet;
+    /** Secondary action button/content snippet */
+    secondaryAction?: Snippet;
+    /** Whether to show a subtle background */
+    showBackground?: boolean;
+    /** Whether to use compact horizontal layout */
+    compact?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** ID for the element */
+    id?: string;
+}
+/**
+ * EmptyState
+ *
+ * A world-class empty state component for displaying zero-data states with
+ * contextual messaging, illustrations, and clear calls-to-action.
+ * Designed for healthcare applications where empty states should guide users
+ * without creating confusion or anxiety.
+ *
+ * Features:
+ * - Multiple visual variants (default, search, error, first-use, success)
+ * - Custom illustrations/icons
+ * - Primary and secondary actions
+ * - Compact mode for inline use
+ * - Professional, calming design
+ *
+ * @example
+ * <EmptyState
+ *   title="No patients found"
+ *   description="Try adjusting your search criteria"
+ * />
+ *
+ * @example
+ * <EmptyState
+ *   variant="first-use"
+ *   title="Welcome to Patient Records"
+ *   description="Get started by adding your first patient"
+ * >
+ *   {#snippet action()}
+ *     <Button>Add Patient</Button>
+ *   {/snippet}
+ * </EmptyState>
+ */
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;
+//# sourceMappingURL=EmptyState.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/EmptyState/EmptyState.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAWrC,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,iBAAiB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,GAAG,YAAY,CAAC;AAEjG,UAAU,KAAK;IACd,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mDAAmD;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0CAA0C;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AAqKF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

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

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

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

package/dist/feedback/EmptyState/index.js

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