@synthaxai/ui 1.0.0

package/dist/forms/index.js

@@ -0,0 +1,12 @@
+/**
+ * @synthaxai/ui - Form Components
+ *
+ * Accessible form components with validation support,
+ * designed for healthcare data entry workflows.
+ */
+export { TextInput } from './TextInput/index.js';
+export { Textarea } from './Textarea/index.js';
+export { Select } from './Select/index.js';
+export { Checkbox } from './Checkbox/index.js';
+export { RadioGroup } from './RadioGroup/index.js';
+export { FormField } from './FormField/index.js';

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @synthaxai/ui
+ *
+ * Production-quality UI component library for Synthax healthcare applications.
+ *
+ * Built with:
+ * - Svelte 5 (runes)
+ * - Tailwind CSS 4
+ * - TypeScript
+ * - WCAG 2.1 AA accessibility compliance
+ *
+ * @packageDocumentation
+ */
+export { Button } from './primitives/Button/index.js';
+export { Badge } from './primitives/Badge/index.js';
+export { TextInput } from './forms/TextInput/index.js';
+export { Textarea } from './forms/Textarea/index.js';
+export { Select } from './forms/Select/index.js';
+export { Checkbox } from './forms/Checkbox/index.js';
+export { RadioGroup } from './forms/RadioGroup/index.js';
+export { FormField } from './forms/FormField/index.js';
+export { Spinner } from './feedback/Spinner/index.js';
+export { ProgressBar } from './feedback/ProgressBar/index.js';
+export { EmptyState } from './feedback/EmptyState/index.js';
+export { Toast, ToastContainer, toasts } from './feedback/Toast/index.js';
+export { Alert } from './feedback/Alert/index.js';
+export { Skeleton } from './feedback/Skeleton/index.js';
+export { Card } from './layout/Card/index.js';
+export { Container } from './layout/Container/index.js';
+export { StatCard } from './data-display/StatCard/index.js';
+export { DataTable } from './data-display/DataTable/index.js';
+export { StepIndicator } from './navigation/StepIndicator/index.js';
+export { Modal } from './dialogs/Modal/index.js';
+export { ConfirmDialog } from './dialogs/ConfirmDialog/index.js';
+export type { Size, Variant, Status, LoadingState, ValidationResult, ValidatorFn, FieldState, InputMode, AutoComplete, Step, StepState, TableColumn, SortDirection, SortState, DialogVariant, DialogPosition, Toast as ToastType, AriaLive, AriaRole, IconComponent, WithRequired, PartialExcept } from './types/index.js';
+export { cn, createVariants, type ClassValue, type VariantConfig, Keys, isKey, isActivationKey, isNavigationKey, createListNavigation, createFocusTrap, generateId, type Key, type ListNavigationOptions, type FocusTrap, announce, prefersReducedMotion, getAnimationDuration, prefersHighContrast, createDescription, formatForAnnouncement, isElementFocusable, getFocusableElements, createFieldLabel, createErrorProps, healthcareRoles, srOnlyClass } from './utils/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAKH,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAKpD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAKvD,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAKxD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAKxD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAK9D,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAKpE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAKjE,YAAY,EAEX,IAAI,EACJ,OAAO,EACP,MAAM,EACN,YAAY,EAEZ,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,SAAS,EACT,YAAY,EAEZ,IAAI,EACJ,SAAS,EAET,WAAW,EACX,aAAa,EACb,SAAS,EAET,aAAa,EACb,cAAc,EAEd,KAAK,IAAI,SAAS,EAElB,QAAQ,EACR,QAAQ,EAER,aAAa,EACb,YAAY,EACZ,aAAa,EACb,MAAM,kBAAkB,CAAC;AAK1B,OAAO,EAEN,EAAE,EACF,cAAc,EACd,KAAK,UAAU,EACf,KAAK,aAAa,EAElB,IAAI,EACJ,KAAK,EACL,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,KAAK,GAAG,EACR,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAEd,QAAQ,EACR,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,65 @@
+/**
+ * @synthaxai/ui
+ *
+ * Production-quality UI component library for Synthax healthcare applications.
+ *
+ * Built with:
+ * - Svelte 5 (runes)
+ * - Tailwind CSS 4
+ * - TypeScript
+ * - WCAG 2.1 AA accessibility compliance
+ *
+ * @packageDocumentation
+ */
+// ============================================================================
+// Primitive Components
+// ============================================================================
+export { Button } from './primitives/Button/index.js';
+export { Badge } from './primitives/Badge/index.js';
+// ============================================================================
+// Form Components
+// ============================================================================
+export { TextInput } from './forms/TextInput/index.js';
+export { Textarea } from './forms/Textarea/index.js';
+export { Select } from './forms/Select/index.js';
+export { Checkbox } from './forms/Checkbox/index.js';
+export { RadioGroup } from './forms/RadioGroup/index.js';
+export { FormField } from './forms/FormField/index.js';
+// ============================================================================
+// Feedback Components
+// ============================================================================
+export { Spinner } from './feedback/Spinner/index.js';
+export { ProgressBar } from './feedback/ProgressBar/index.js';
+export { EmptyState } from './feedback/EmptyState/index.js';
+export { Toast, ToastContainer, toasts } from './feedback/Toast/index.js';
+export { Alert } from './feedback/Alert/index.js';
+export { Skeleton } from './feedback/Skeleton/index.js';
+// ============================================================================
+// Layout Components
+// ============================================================================
+export { Card } from './layout/Card/index.js';
+export { Container } from './layout/Container/index.js';
+// ============================================================================
+// Data Display Components
+// ============================================================================
+export { StatCard } from './data-display/StatCard/index.js';
+export { DataTable } from './data-display/DataTable/index.js';
+// ============================================================================
+// Navigation Components
+// ============================================================================
+export { StepIndicator } from './navigation/StepIndicator/index.js';
+// ============================================================================
+// Dialog Components
+// ============================================================================
+export { Modal } from './dialogs/Modal/index.js';
+export { ConfirmDialog } from './dialogs/ConfirmDialog/index.js';
+// ============================================================================
+// Utilities
+// ============================================================================
+export { 
+// Class name utilities
+cn, createVariants, 
+// Keyboard navigation
+Keys, isKey, isActivationKey, isNavigationKey, createListNavigation, createFocusTrap, generateId, 
+// Accessibility utilities
+announce, prefersReducedMotion, getAnimationDuration, prefersHighContrast, createDescription, formatForAnnouncement, isElementFocusable, getFocusableElements, createFieldLabel, createErrorProps, healthcareRoles, srOnlyClass } from './utils/index.js';

package/dist/layout/Card/Card.svelte

@@ -0,0 +1,316 @@
+<!--
+  @component Card
+  
+  A world-class card component for grouping related content.
+  Designed for healthcare applications following accessibility best practices.
+  
+  Features:
+  - Multiple variants (default, elevated, outlined, glass, accent)
+  - Semantic element support (div, article, section)
+  - Header and footer slots with proper spacing
+  - Interactive mode with keyboard support
+  - Status indicator for healthcare workflows
+  - Proper ARIA support
+  
+  @example
+  <Card>
+    <h2>Patient Information</h2>
+    <p>Card content here</p>
+  </Card>
+  
+  @example
+  <Card variant="accent" accentColor="success" interactive>
+    <p>Approved insurance coverage</p>
+  </Card>
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+	type CardVariant = 'default' | 'elevated' | 'outlined' | 'glass' | 'accent';
+	type AccentColor = 'primary' | 'success' | 'warning' | 'error' | 'info';
+
+	interface Props {
+		/** Visual variant of the card */
+		variant?: CardVariant;
+		/** Internal padding */
+		padding?: CardPadding;
+		/** Accent color for accent variant */
+		accentColor?: AccentColor;
+		/** Whether the card is interactive (hover effects) */
+		interactive?: boolean;
+		/** Whether to render as a button element */
+		asButton?: boolean;
+		/** Semantic element type */
+		as?: 'div' | 'article' | 'section';
+		/** Optional ID for the card */
+		id?: string;
+		/** ID of the element that labels this card */
+		ariaLabelledby?: string;
+		/** Additional CSS classes */
+		class?: string;
+		/** Header content */
+		header?: Snippet;
+		/** Footer content */
+		footer?: Snippet;
+		/** Main content */
+		children?: Snippet;
+		/** Click handler */
+		onclick?: (event: MouseEvent) => void;
+		/** Keyboard handler */
+		onkeydown?: (event: KeyboardEvent) => void;
+	}
+
+	let {
+		variant = 'default',
+		padding = 'md',
+		accentColor = 'primary',
+		interactive = false,
+		asButton = false,
+		as = 'div',
+		id,
+		ariaLabelledby,
+		class: className = '',
+		header,
+		footer,
+		children,
+		onclick,
+		onkeydown
+	}: Props = $props();
+
+	// Padding values for CSS
+	const paddingValues: Record<CardPadding, string> = {
+		none: '0',
+		sm: '1rem',
+		md: '1.5rem',
+		lg: '2rem',
+		xl: '3rem'
+	};
+
+	const currentPadding = $derived(paddingValues[padding]);
+</script>
+
+{#snippet cardContent()}
+	{#if header}
+		<div 
+			class="card-header"
+			style="margin: calc(-1 * {currentPadding}) calc(-1 * {currentPadding}) {currentPadding}; padding: 1rem {currentPadding};"
+		>
+			{@render header()}
+		</div>
+	{/if}
+
+	{#if children}
+		<div class="card-content">
+			{@render children()}
+		</div>
+	{/if}
+
+	{#if footer}
+		<div 
+			class="card-footer"
+			style="margin: {currentPadding} calc(-1 * {currentPadding}) calc(-1 * {currentPadding}); padding: 1rem {currentPadding};"
+		>
+			{@render footer()}
+		</div>
+	{/if}
+{/snippet}
+
+{#if asButton}
+	<button
+		type="button"
+		{id}
+		class="card card-{variant} card-padding-{padding} {interactive ? 'card-interactive' : ''} {className}"
+		class:card-accent-primary={variant === 'accent' && accentColor === 'primary'}
+		class:card-accent-success={variant === 'accent' && accentColor === 'success'}
+		class:card-accent-warning={variant === 'accent' && accentColor === 'warning'}
+		class:card-accent-error={variant === 'accent' && accentColor === 'error'}
+		class:card-accent-info={variant === 'accent' && accentColor === 'info'}
+		aria-labelledby={ariaLabelledby}
+		{onclick}
+		{onkeydown}
+	>
+		{@render cardContent()}
+	</button>
+{:else if interactive || onclick}
+	<svelte:element
+		this={as}
+		{id}
+		class="card card-{variant} card-padding-{padding} card-interactive {className}"
+		class:card-accent-primary={variant === 'accent' && accentColor === 'primary'}
+		class:card-accent-success={variant === 'accent' && accentColor === 'success'}
+		class:card-accent-warning={variant === 'accent' && accentColor === 'warning'}
+		class:card-accent-error={variant === 'accent' && accentColor === 'error'}
+		class:card-accent-info={variant === 'accent' && accentColor === 'info'}
+		role="button"
+		tabindex={0}
+		aria-labelledby={ariaLabelledby}
+		onclick={onclick}
+		onkeydown={onkeydown}
+	>
+		{@render cardContent()}
+	</svelte:element>
+{:else}
+	<svelte:element
+		this={as}
+		{id}
+		class="card card-{variant} card-padding-{padding} {className}"
+		class:card-accent-primary={variant === 'accent' && accentColor === 'primary'}
+		class:card-accent-success={variant === 'accent' && accentColor === 'success'}
+		class:card-accent-warning={variant === 'accent' && accentColor === 'warning'}
+		class:card-accent-error={variant === 'accent' && accentColor === 'error'}
+		class:card-accent-info={variant === 'accent' && accentColor === 'info'}
+		aria-labelledby={ariaLabelledby}
+	>
+		{@render cardContent()}
+	</svelte:element>
+{/if}
+
+<style>
+	/* ========================================
+	   BASE CARD STYLES
+	   ======================================== */
+	.card {
+		border-radius: 0.75rem;
+		transition: all 0.2s ease;
+		position: relative;
+		overflow: hidden;
+	}
+
+	/* Reset button styles when rendered as button */
+	button.card {
+		width: 100%;
+		text-align: left;
+		font: inherit;
+	}
+
+	/* ========================================
+	   PADDING VARIANTS
+	   ======================================== */
+	.card-padding-none {
+		padding: 0;
+	}
+
+	.card-padding-sm {
+		padding: 1rem;
+	}
+
+	.card-padding-md {
+		padding: 1.5rem;
+	}
+
+	.card-padding-lg {
+		padding: 2rem;
+	}
+
+	.card-padding-xl {
+		padding: 3rem;
+	}
+
+	/* ========================================
+	   VISUAL VARIANTS
+	   ======================================== */
+	.card-default {
+		background-color: var(--ui-bg-secondary);
+		border: 1px solid var(--ui-border-default);
+	}
+
+	.card-elevated {
+		background-color: var(--ui-bg-primary);
+		border: 1px solid var(--ui-border-default);
+	}
+
+	.card-outlined {
+		background-color: transparent;
+		border: 2px solid var(--ui-border-default);
+	}
+
+	.card-glass {
+		background-color: var(--ui-glass-bg, rgba(255, 255, 255, 0.8));
+		border: 1px solid var(--ui-glass-border, rgba(255, 255, 255, 0.3));
+		backdrop-filter: blur(24px);
+		-webkit-backdrop-filter: blur(24px);
+	}
+
+	.card-accent {
+		background-color: var(--ui-bg-primary);
+		border: 1px solid var(--ui-border-default);
+		border-left-width: 4px;
+	}
+
+	/* Accent colors */
+	.card-accent-primary {
+		border-left-color: rgb(var(--ui-color-primary));
+	}
+
+	.card-accent-success {
+		border-left-color: rgb(var(--ui-color-success));
+	}
+
+	.card-accent-warning {
+		border-left-color: rgb(var(--ui-color-warning));
+	}
+
+	.card-accent-error {
+		border-left-color: rgb(var(--ui-color-error));
+	}
+
+	.card-accent-info {
+		border-left-color: rgb(var(--ui-color-info));
+	}
+
+	/* ========================================
+	   INTERACTIVE STATES
+	   ======================================== */
+	.card-interactive {
+		cursor: pointer;
+	}
+
+	.card-interactive:hover {
+		transform: translateY(-2px);
+		border-color: var(--ui-border-hover);
+	}
+
+	.card-interactive:active {
+		transform: translateY(0);
+	}
+
+	.card-interactive:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	:global([data-theme='dark']) .card-interactive: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'])) .card-interactive:focus-visible {
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+	}
+
+	/* ========================================
+	   HEADER & FOOTER
+	   ======================================== */
+	.card-header {
+		border-bottom: 1px solid var(--ui-border-default);
+	}
+
+	.card-footer {
+		border-top: 1px solid var(--ui-border-default);
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.card {
+			transition: none;
+		}
+
+		.card-interactive:hover {
+			transform: none;
+		}
+	}
+</style>

package/dist/layout/Card/Card.svelte.d.ts

@@ -0,0 +1,63 @@
+import type { Snippet } from 'svelte';
+type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type CardVariant = 'default' | 'elevated' | 'outlined' | 'glass' | 'accent';
+type AccentColor = 'primary' | 'success' | 'warning' | 'error' | 'info';
+interface Props {
+    /** Visual variant of the card */
+    variant?: CardVariant;
+    /** Internal padding */
+    padding?: CardPadding;
+    /** Accent color for accent variant */
+    accentColor?: AccentColor;
+    /** Whether the card is interactive (hover effects) */
+    interactive?: boolean;
+    /** Whether to render as a button element */
+    asButton?: boolean;
+    /** Semantic element type */
+    as?: 'div' | 'article' | 'section';
+    /** Optional ID for the card */
+    id?: string;
+    /** ID of the element that labels this card */
+    ariaLabelledby?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** Header content */
+    header?: Snippet;
+    /** Footer content */
+    footer?: Snippet;
+    /** Main content */
+    children?: Snippet;
+    /** Click handler */
+    onclick?: (event: MouseEvent) => void;
+    /** Keyboard handler */
+    onkeydown?: (event: KeyboardEvent) => void;
+}
+/**
+ * Card
+ *
+ * A world-class card component for grouping related content.
+ * Designed for healthcare applications following accessibility best practices.
+ *
+ * Features:
+ * - Multiple variants (default, elevated, outlined, glass, accent)
+ * - Semantic element support (div, article, section)
+ * - Header and footer slots with proper spacing
+ * - Interactive mode with keyboard support
+ * - Status indicator for healthcare workflows
+ * - Proper ARIA support
+ *
+ * @example
+ * <Card>
+ *   <h2>Patient Information</h2>
+ *   <p>Card content here</p>
+ * </Card>
+ *
+ * @example
+ * <Card variant="accent" accentColor="success" interactive>
+ *   <p>Approved insurance coverage</p>
+ * </Card>
+ */
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;
+//# sourceMappingURL=Card.svelte.d.ts.map

package/dist/layout/Card/Card.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,KAAK,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC5E,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAExE,UAAU,KAAK;IACd,iCAAiC;IACjC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,uBAAuB;IACvB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;IACnC,+BAA+B;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,uBAAuB;IACvB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AA4EF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/layout/Card/index.d.ts

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

package/dist/layout/Card/index.d.ts.map

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

package/dist/layout/Card/index.js

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