@synthaxai/ui 1.0.0

package/dist/data-display/DataTable/DataTable.svelte.d.ts

@@ -0,0 +1,120 @@
+import type { Snippet } from 'svelte';
+import type { TableColumn, SortState } from '../../types/index.js';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        /** Column definitions */
+        columns: TableColumn<T>[];
+        /** Data rows */
+        data: T[];
+        /** Table caption for accessibility - describes the table's purpose */
+        caption?: string;
+        /** Whether to visually hide the caption (still available to screen readers) */
+        captionHidden?: boolean;
+        /** Size variant */
+        size?: "sm" | "md" | "lg";
+        /** Initial sort state */
+        sortState?: SortState;
+        /** Whether rows are hoverable */
+        hoverable?: boolean;
+        /** Whether rows are striped */
+        striped?: boolean;
+        /** Whether the header should stick when scrolling */
+        stickyHeader?: boolean;
+        /** Maximum height for scrollable table (enables sticky header behavior) */
+        maxHeight?: string;
+        /** Whether rows are selectable */
+        selectable?: boolean;
+        /** Currently selected row keys */
+        selectedKeys?: Set<string>;
+        /** Whether the table is loading */
+        loading?: boolean;
+        /** Number of skeleton rows to show when loading */
+        loadingRows?: number;
+        /** Empty state message */
+        emptyMessage?: string;
+        /** Empty state description */
+        emptyDescription?: string;
+        /** Row key function */
+        getRowKey?: (row: T, index: number) => string;
+        /** Custom cell renderer */
+        cellRenderer?: Snippet<[{
+            value: unknown;
+            row: T;
+            column: TableColumn<T>;
+        }]>;
+        /** Custom empty state snippet */
+        emptyState?: Snippet;
+        /** Row click handler */
+        onRowClick?: (row: T) => void;
+        /** Sort change handler */
+        onSort?: (state: SortState) => void;
+        /** Selection change handler */
+        onSelectionChange?: (selectedKeys: Set<string>) => void;
+        /** Pagination - current page (1-indexed) */
+        currentPage?: number;
+        /** Pagination - items per page */
+        pageSize?: number;
+        /** Pagination - total items (for server-side pagination) */
+        totalItems?: number;
+        /** Pagination - page change handler */
+        onPageChange?: (page: number) => void;
+        /** Row highlight function - return variant name for highlighting */
+        getRowHighlight?: (row: T) => "error" | "warning" | "success" | "info" | null;
+        /** Additional CSS classes */
+        class?: string;
+        /** ID for the table */
+        id?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * DataTable
+ *
+ * A world-class responsive data table component designed for healthcare applications.
+ * Features sorting, row selection, sticky headers, pagination, and full accessibility.
+ *
+ * Features:
+ * - Full WCAG 2.1 AA compliance with proper semantic markup
+ * - Sortable columns with keyboard support
+ * - Row selection with checkbox support
+ * - Sticky header option for long tables
+ * - Size variants (sm, md, lg) for different data densities
+ * - Loading state with skeleton placeholders
+ * - Empty state with customizable message
+ * - Pagination support for large datasets
+ * - Mobile-responsive with column hiding
+ *
+ * @example
+ * <DataTable
+ *   columns={[
+ *     { key: 'name', header: 'Patient Name', sortable: true },
+ *     { key: 'status', header: 'Status' },
+ *     { key: 'date', header: 'Date', hideOnMobile: true }
+ *   ]}
+ *   data={patients}
+ *   caption="Patient list for Dr. Smith"
+ *   selectable
+ *   stickyHeader
+ * />
+ */
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T extends Record<string, unknown>> = InstanceType<typeof DataTable<T>>;
+export default DataTable;
+//# sourceMappingURL=DataTable.svelte.d.ts.map

package/dist/data-display/DataTable/DataTable.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../../src/data-display/DataTable/DataTable.svelte.ts"],"names":[],"mappings":"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"}

package/dist/data-display/DataTable/index.d.ts

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

package/dist/data-display/DataTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/data-display/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/data-display/DataTable/index.js

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

package/dist/data-display/StatCard/StatCard.svelte

@@ -0,0 +1,409 @@
+<!--
+  @component StatCard
+  
+  A world-class card component for displaying statistics with icon, value, label,
+  and optional trend indicator. Designed for healthcare dashboards and KPI displays.
+  
+  Features:
+  - Multiple size variants (sm, md, lg)
+  - Trend indicators with direction and color coding
+  - Comparison context display
+  - Loading state with skeleton
+  - Sparkline slot for mini charts
+  - Interactive mode with proper accessibility
+  - Info variant for neutral metrics
+  
+  @example
+  <StatCard
+    value="1,234"
+    label="Total Patients"
+    trend="+12%"
+    trendDirection="up"
+  />
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { TrendingUp, TrendingDown, Minus, HelpCircle } from 'lucide-svelte';
+	import { Skeleton } from '../../feedback/Skeleton/index.js';
+
+	type StatCardVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+	type StatCardSize = 'sm' | 'md' | 'lg';
+	type TrendDirection = 'up' | 'down' | 'neutral';
+
+	interface Props {
+		/** The main value to display */
+		value: string | number;
+		/** Label describing the value */
+		label: string;
+		/** Size variant */
+		size?: StatCardSize;
+		/** Optional period/context (e.g., "Last 30 days") */
+		period?: string;
+		/** Optional comparison text (e.g., "vs last month") */
+		comparison?: string;
+		/** Optional trend indicator text (e.g., "+12%") */
+		trend?: string;
+		/** Direction of the trend */
+		trendDirection?: TrendDirection;
+		/** Visual variant for icon styling */
+		variant?: StatCardVariant;
+		/** Whether the card is in loading state */
+		loading?: boolean;
+		/** Whether the card is interactive */
+		interactive?: boolean;
+		/** Icon snippet */
+		icon?: Snippet;
+		/** Sparkline/chart snippet */
+		sparkline?: Snippet;
+		/** Optional help/info text */
+		helpText?: string;
+		/** Additional CSS classes */
+		class?: string;
+		/** Click handler */
+		onclick?: () => void;
+	}
+
+	let {
+		value,
+		label,
+		size = 'md',
+		period = '',
+		comparison = '',
+		trend = '',
+		trendDirection = 'neutral',
+		variant = 'default',
+		loading = false,
+		interactive = false,
+		icon,
+		sparkline,
+		helpText = '',
+		class: className = '',
+		onclick
+	}: Props = $props();
+
+	// Size configurations
+	const sizeConfig: Record<StatCardSize, {
+		padding: string;
+		iconSize: string;
+		iconWrapperSize: string;
+		valueSize: string;
+		labelSize: string;
+		gap: string;
+	}> = {
+		sm: {
+			padding: '1rem',
+			iconSize: '1.125rem',
+			iconWrapperSize: '2.25rem',
+			valueSize: '1.5rem',
+			labelSize: '0.75rem',
+			gap: '0.75rem'
+		},
+		md: {
+			padding: '1.25rem',
+			iconSize: '1.25rem',
+			iconWrapperSize: '2.75rem',
+			valueSize: '1.75rem',
+			labelSize: '0.8125rem',
+			gap: '1rem'
+		},
+		lg: {
+			padding: '1.5rem',
+			iconSize: '1.5rem',
+			iconWrapperSize: '3.5rem',
+			valueSize: '2.25rem',
+			labelSize: '0.875rem',
+			gap: '1.25rem'
+		}
+	};
+
+	const config = $derived(sizeConfig[size]);
+</script>
+
+{#snippet statContent()}
+	<!-- Icon -->
+	{#if icon && !loading}
+		<div
+			class="stat-card-icon stat-card-icon-{variant}"
+			style="width: {config.iconWrapperSize}; height: {config.iconWrapperSize}; font-size: {config.iconSize};"
+			aria-hidden="true"
+		>
+			{@render icon()}
+		</div>
+	{:else if loading}
+		<Skeleton variant="circle" width={config.iconWrapperSize} height={config.iconWrapperSize} animation="wave" />
+	{/if}
+
+	<!-- Content -->
+	<div class="stat-card-content">
+		{#if loading}
+			<Skeleton variant="text" width="4rem" height={config.valueSize} animation="wave" />
+			<Skeleton variant="text" width="6rem" height={config.labelSize} animation="wave" />
+		{:else}
+			<!-- Value Row -->
+			<div class="stat-card-value-row">
+				<span class="stat-card-value" style="font-size: {config.valueSize};">
+					{value}
+				</span>
+				{#if trend}
+					<span class="stat-card-trend stat-card-trend-{trendDirection}">
+						{#if trendDirection === 'up'}
+							<TrendingUp size={14} />
+						{:else if trendDirection === 'down'}
+							<TrendingDown size={14} />
+						{:else}
+							<Minus size={14} />
+						{/if}
+						{trend}
+					</span>
+				{/if}
+				{#if helpText}
+					<span class="stat-card-help" title={helpText}>
+						<HelpCircle size={14} />
+					</span>
+				{/if}
+			</div>
+
+			<!-- Label -->
+			<span class="stat-card-label" style="font-size: {config.labelSize};">
+				{label}
+			</span>
+
+			<!-- Period / Comparison -->
+			{#if period || comparison}
+				<span class="stat-card-period">
+					{period}
+					{#if period && comparison}
+						<span class="stat-card-separator">·</span>
+					{/if}
+					{comparison}
+				</span>
+			{/if}
+		{/if}
+	</div>
+
+	<!-- Sparkline -->
+	{#if sparkline && !loading}
+		<div class="stat-card-sparkline" aria-hidden="true">
+			{@render sparkline()}
+		</div>
+	{/if}
+{/snippet}
+
+{#if interactive}
+	<button
+		type="button"
+		class="stat-card stat-card-{size} stat-card-interactive {className}"
+		style="padding: {config.padding}; gap: {config.gap};"
+		onclick={onclick}
+	>
+		{@render statContent()}
+	</button>
+{:else}
+	<div
+		class="stat-card stat-card-{size} {className}"
+		style="padding: {config.padding}; gap: {config.gap};"
+	>
+		{@render statContent()}
+	</div>
+{/if}
+
+<style>
+	/* ========================================
+	   BASE STYLES
+	   ======================================== */
+	.stat-card {
+		display: flex;
+		align-items: center;
+		background-color: var(--ui-bg-primary);
+		border: 1px solid var(--ui-border-default);
+		border-radius: 0.75rem;
+		transition: all 0.2s ease;
+		overflow: hidden;
+	}
+
+	/* Reset button styles */
+	button.stat-card {
+		width: 100%;
+		text-align: left;
+		font: inherit;
+	}
+
+	/* ========================================
+	   INTERACTIVE STATE
+	   ======================================== */
+	.stat-card-interactive {
+		cursor: pointer;
+	}
+
+	.stat-card-interactive:hover {
+		transform: translateY(-2px);
+		border-color: var(--ui-border-hover);
+	}
+
+	.stat-card-interactive:active {
+		transform: translateY(0);
+	}
+
+	.stat-card-interactive:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	:global([data-theme='dark']) .stat-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'])) .stat-card-interactive:focus-visible {
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+	}
+
+	/* ========================================
+	   ICON STYLES
+	   ======================================== */
+	.stat-card-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 0.75rem;
+		flex-shrink: 0;
+	}
+
+	.stat-card-icon-default,
+	.stat-card-icon-primary {
+		background-color: rgb(var(--ui-color-primary) / 0.1);
+		color: rgb(var(--ui-color-primary));
+	}
+
+	.stat-card-icon-success {
+		background-color: rgb(var(--ui-color-success) / 0.1);
+		color: rgb(var(--ui-color-success));
+	}
+
+	.stat-card-icon-warning {
+		background-color: rgb(var(--ui-color-warning) / 0.1);
+		color: rgb(var(--ui-color-warning));
+	}
+
+	.stat-card-icon-error {
+		background-color: rgb(var(--ui-color-error) / 0.1);
+		color: rgb(var(--ui-color-error));
+	}
+
+	.stat-card-icon-info {
+		background-color: rgb(var(--ui-color-info) / 0.1);
+		color: rgb(var(--ui-color-info));
+	}
+
+	/* ========================================
+	   CONTENT STYLES
+	   ======================================== */
+	.stat-card-content {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		flex: 1;
+		gap: 0.125rem;
+	}
+
+	.stat-card-value-row {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	.stat-card-value {
+		font-weight: 700;
+		color: var(--ui-text-primary);
+		line-height: 1.2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.stat-card-label {
+		color: var(--ui-text-secondary);
+		line-height: 1.4;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.stat-card-period {
+		font-size: 0.6875rem;
+		color: var(--ui-text-tertiary);
+		line-height: 1.4;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.stat-card-separator {
+		margin: 0 0.25rem;
+	}
+
+	/* ========================================
+	   TREND INDICATOR
+	   ======================================== */
+	.stat-card-trend {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.125rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+	}
+
+	.stat-card-trend-up {
+		color: rgb(var(--ui-color-success));
+		background-color: rgb(var(--ui-color-success) / 0.1);
+	}
+
+	.stat-card-trend-down {
+		color: rgb(var(--ui-color-error));
+		background-color: rgb(var(--ui-color-error) / 0.1);
+	}
+
+	.stat-card-trend-neutral {
+		color: var(--ui-text-tertiary);
+		background-color: var(--ui-bg-tertiary);
+	}
+
+	/* ========================================
+	   HELP ICON
+	   ======================================== */
+	.stat-card-help {
+		color: var(--ui-text-tertiary);
+		cursor: help;
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.stat-card-help:hover {
+		color: var(--ui-text-secondary);
+	}
+
+	/* ========================================
+	   SPARKLINE
+	   ======================================== */
+	.stat-card-sparkline {
+		margin-left: auto;
+		flex-shrink: 0;
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.stat-card {
+			transition: none;
+		}
+
+		.stat-card-interactive:hover {
+			transform: none;
+		}
+	}
+</style>

package/dist/data-display/StatCard/StatCard.svelte.d.ts

@@ -0,0 +1,63 @@
+import type { Snippet } from 'svelte';
+type StatCardVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+type StatCardSize = 'sm' | 'md' | 'lg';
+type TrendDirection = 'up' | 'down' | 'neutral';
+interface Props {
+    /** The main value to display */
+    value: string | number;
+    /** Label describing the value */
+    label: string;
+    /** Size variant */
+    size?: StatCardSize;
+    /** Optional period/context (e.g., "Last 30 days") */
+    period?: string;
+    /** Optional comparison text (e.g., "vs last month") */
+    comparison?: string;
+    /** Optional trend indicator text (e.g., "+12%") */
+    trend?: string;
+    /** Direction of the trend */
+    trendDirection?: TrendDirection;
+    /** Visual variant for icon styling */
+    variant?: StatCardVariant;
+    /** Whether the card is in loading state */
+    loading?: boolean;
+    /** Whether the card is interactive */
+    interactive?: boolean;
+    /** Icon snippet */
+    icon?: Snippet;
+    /** Sparkline/chart snippet */
+    sparkline?: Snippet;
+    /** Optional help/info text */
+    helpText?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** Click handler */
+    onclick?: () => void;
+}
+/**
+ * StatCard
+ *
+ * A world-class card component for displaying statistics with icon, value, label,
+ * and optional trend indicator. Designed for healthcare dashboards and KPI displays.
+ *
+ * Features:
+ * - Multiple size variants (sm, md, lg)
+ * - Trend indicators with direction and color coding
+ * - Comparison context display
+ * - Loading state with skeleton
+ * - Sparkline slot for mini charts
+ * - Interactive mode with proper accessibility
+ * - Info variant for neutral metrics
+ *
+ * @example
+ * <StatCard
+ *   value="1,234"
+ *   label="Total Patients"
+ *   trend="+12%"
+ *   trendDirection="up"
+ * />
+ */
+declare const StatCard: import("svelte").Component<Props, {}, "">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;
+//# sourceMappingURL=StatCard.svelte.d.ts.map

package/dist/data-display/StatCard/StatCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/data-display/StatCard/StatCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKrC,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACxF,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvC,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD,UAAU,KAAK;IACd,gCAAgC;IAChC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,sCAAsC;IACtC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAmJF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/data-display/StatCard/index.d.ts

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

package/dist/data-display/StatCard/index.d.ts.map

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

package/dist/data-display/StatCard/index.js

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

package/dist/data-display/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @synthaxai/ui - Data Display Components
+ *
+ * Components for displaying data in tables, cards, and other formats.
+ */
+export { StatCard } from './StatCard/index.js';
+export { DataTable } from './DataTable/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/data-display/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/data-display/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/data-display/index.js

@@ -0,0 +1,7 @@
+/**
+ * @synthaxai/ui - Data Display Components
+ *
+ * Components for displaying data in tables, cards, and other formats.
+ */
+export { StatCard } from './StatCard/index.js';
+export { DataTable } from './DataTable/index.js';