@synthaxai/ui 1.0.0

package/dist/navigation/StepIndicator/StepIndicator.svelte

@@ -0,0 +1,601 @@
+<!--
+  @component StepIndicator
+  
+  A world-class step indicator component for multi-step healthcare workflows.
+  Designed with full accessibility, clear visual states, and flexible layouts.
+  
+  Features:
+  - Horizontal and vertical orientations
+  - Size variants (sm, md, lg)
+  - Step descriptions and substeps
+  - Custom icons per step
+  - Optional step indicators
+  - Warning and error states
+  - Progress summary display
+  - Full keyboard navigation
+  - Screen reader announcements
+  
+  @example
+  <StepIndicator
+    steps={[
+      { id: 'patient', label: 'Patient Info', description: 'Enter patient details', state: 'completed' },
+      { id: 'insurance', label: 'Insurance', state: 'active' },
+      { id: 'verify', label: 'Verify', state: 'pending', optional: true }
+    ]}
+    showProgress
+  />
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Check, X, AlertTriangle } from 'lucide-svelte';
+	import type { Step, StepState } from '../../types/index.js';
+
+	type StepIndicatorSize = 'sm' | 'md' | 'lg';
+	type StepIndicatorVariant = 'default' | 'compact' | 'minimal';
+	type StepIndicatorOrientation = 'horizontal' | 'vertical';
+
+	interface Props {
+		/** Array of steps */
+		steps: Step[];
+		/** Size variant */
+		size?: StepIndicatorSize;
+		/** Display variant */
+		variant?: StepIndicatorVariant;
+		/** Layout orientation */
+		orientation?: StepIndicatorOrientation;
+		/** Whether to show labels */
+		showLabels?: boolean;
+		/** Whether to show step descriptions */
+		showDescriptions?: boolean;
+		/** Whether to show progress summary (e.g., "Step 2 of 5") */
+		showProgress?: boolean;
+		/** Custom progress format function */
+		progressFormat?: (current: number, total: number) => string;
+		/** Allow clicking on future steps (not just completed/active) */
+		allowFutureSteps?: boolean;
+		/** Custom icon snippet for steps */
+		stepIcon?: Snippet<[{ step: Step; index: number; state: StepState }]>;
+		/** Accessible label for the navigation */
+		ariaLabel?: string;
+		/** Additional CSS classes */
+		class?: string;
+		/** ID for the component */
+		id?: string;
+		/** Step click handler */
+		onStepClick?: (step: Step, index: number) => void;
+	}
+
+	let {
+		steps,
+		size = 'md',
+		variant = 'default',
+		orientation = 'horizontal',
+		showLabels = true,
+		showDescriptions = false,
+		showProgress = false,
+		progressFormat,
+		allowFutureSteps = false,
+		stepIcon,
+		ariaLabel = 'Progress',
+		class: className = '',
+		id,
+		onStepClick
+	}: Props = $props();
+
+	// Size configurations
+	const sizeConfig: Record<StepIndicatorSize, {
+		circleSize: string;
+		circleWidth: string;
+		circleHeight: string;
+		fontSize: string;
+		descriptionSize: string;
+		iconSize: number;
+		lineThickness: string;
+		gap: string;
+		labelGap: string;
+	}> = {
+		sm: {
+			circleSize: '1.5rem',
+			circleWidth: '1.5rem',
+			circleHeight: '1.5rem',
+			fontSize: '0.75rem',
+			descriptionSize: '0.6875rem',
+			iconSize: 12,
+			lineThickness: '2px',
+			gap: '0.5rem',
+			labelGap: '0.25rem'
+		},
+		md: {
+			circleSize: '2rem',
+			circleWidth: '2rem',
+			circleHeight: '2rem',
+			fontSize: '0.875rem',
+			descriptionSize: '0.75rem',
+			iconSize: 16,
+			lineThickness: '2px',
+			gap: '0.75rem',
+			labelGap: '0.375rem'
+		},
+		lg: {
+			circleSize: '2.5rem',
+			circleWidth: '2.5rem',
+			circleHeight: '2.5rem',
+			fontSize: '1rem',
+			descriptionSize: '0.8125rem',
+			iconSize: 20,
+			lineThickness: '3px',
+			gap: '1rem',
+			labelGap: '0.5rem'
+		}
+	};
+
+	const config = $derived(sizeConfig[size]);
+
+	// Calculate progress
+	const completedCount = $derived(steps.filter(s => s.state === 'completed').length);
+	const activeIndex = $derived(steps.findIndex(s => s.state === 'active'));
+	const currentStepNumber = $derived(activeIndex >= 0 ? activeIndex + 1 : completedCount + 1);
+
+	// Progress text
+	const progressText = $derived(
+		progressFormat
+			? progressFormat(currentStepNumber, steps.length)
+			: `Step ${currentStepNumber} of ${steps.length}`
+	);
+
+	// Check if step is clickable
+	function isClickable(step: Step, index: number): boolean {
+		if (!onStepClick) return false;
+		if (allowFutureSteps) return true;
+		return step.state === 'completed' || step.state === 'active' || step.state === 'error';
+	}
+
+	// Handle step click
+	function handleStepClick(step: Step, index: number) {
+		if (isClickable(step, index)) {
+			onStepClick?.(step, index);
+		}
+	}
+
+	// Handle keyboard navigation
+	function handleKeyDown(e: KeyboardEvent, step: Step, index: number) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			handleStepClick(step, index);
+		}
+	}
+
+	// Get line state between steps
+	function getLineState(index: number): 'completed' | 'active' | 'pending' {
+		const currentStep = steps[index];
+		if (currentStep?.state === 'completed') return 'completed';
+		if (currentStep?.state === 'active') return 'active';
+		return 'pending';
+	}
+</script>
+
+<div
+	{id}
+	class="step-indicator step-indicator-{orientation} step-indicator-{size} step-indicator-{variant} {className}"
+>
+	<!-- Progress summary -->
+	{#if showProgress}
+		<div class="step-indicator-progress" role="status" aria-live="polite">
+			<span class="step-indicator-progress-text">{progressText}</span>
+		</div>
+	{/if}
+
+	<nav aria-label={ariaLabel}>
+		<ol class="step-indicator-list" role="list">
+			{#each steps as step, index (step.id)}
+				{@const clickable = isClickable(step, index)}
+				<li
+					class="step-indicator-item"
+					class:step-indicator-item-last={index === steps.length - 1}
+				>
+					<!-- Step button/indicator -->
+					<button
+						type="button"
+						class="step-indicator-step"
+						class:step-indicator-step-clickable={clickable}
+						class:step-indicator-step-completed={step.state === 'completed'}
+						class:step-indicator-step-active={step.state === 'active'}
+						class:step-indicator-step-error={step.state === 'error'}
+						class:step-indicator-step-pending={step.state === 'pending'}
+						onclick={() => handleStepClick(step, index)}
+						onkeydown={(e) => handleKeyDown(e, step, index)}
+						disabled={!clickable}
+						aria-current={step.state === 'active' ? 'step' : undefined}
+						aria-describedby={step.description && showDescriptions ? `${id || 'step'}-${step.id}-desc` : undefined}
+					>
+						<!-- Circle indicator -->
+						<span
+							class="step-indicator-circle"
+							style="width: {config.circleWidth}; height: {config.circleHeight};"
+						>
+							{#if stepIcon}
+								{@render stepIcon({ step, index, state: step.state })}
+							{:else if step.state === 'completed'}
+								<Check size={config.iconSize} strokeWidth={3} aria-hidden="true" />
+							{:else if step.state === 'error'}
+								<X size={config.iconSize} strokeWidth={3} aria-hidden="true" />
+							{:else}
+								<span class="step-indicator-number" style="font-size: calc({config.fontSize} * 0.9);">
+									{index + 1}
+								</span>
+							{/if}
+						</span>
+
+						<!-- Label and description -->
+						{#if showLabels && variant !== 'minimal'}
+							<span class="step-indicator-content">
+								<span class="step-indicator-label" style="font-size: {config.fontSize};">
+									{step.label}
+									{#if step.optional}
+										<span class="step-indicator-optional">(optional)</span>
+									{/if}
+								</span>
+								{#if showDescriptions && step.description}
+									<span
+										id="{id || 'step'}-{step.id}-desc"
+										class="step-indicator-description"
+										style="font-size: {config.descriptionSize};"
+									>
+										{step.description}
+									</span>
+								{/if}
+							</span>
+						{/if}
+					</button>
+
+					<!-- Connector line -->
+					{#if index < steps.length - 1}
+						<div
+							class="step-indicator-line step-indicator-line-{getLineState(index)}"
+							style="--line-thickness: {config.lineThickness};"
+							aria-hidden="true"
+						></div>
+					{/if}
+				</li>
+			{/each}
+		</ol>
+	</nav>
+</div>
+
+<style>
+	/* ========================================
+	   BASE STYLES
+	   ======================================== */
+	.step-indicator {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.step-indicator-list {
+		display: flex;
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	/* ========================================
+	   HORIZONTAL ORIENTATION
+	   ======================================== */
+	.step-indicator-horizontal .step-indicator-list {
+		flex-direction: row;
+		align-items: flex-start;
+	}
+
+	.step-indicator-horizontal .step-indicator-item {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+
+	.step-indicator-horizontal .step-indicator-item-last {
+		flex: 0;
+	}
+
+	.step-indicator-horizontal .step-indicator-step {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.5rem;
+		background: none;
+		border: none;
+		padding: 0;
+		font: inherit;
+		cursor: default;
+		min-width: 0;
+	}
+
+	.step-indicator-horizontal .step-indicator-line {
+		flex: 1;
+		height: var(--line-thickness);
+		margin: 0 0.5rem;
+		border-radius: 9999px;
+		align-self: center;
+		margin-top: calc(-0.5rem - (var(--line-thickness) / 2));
+	}
+
+	.step-indicator-horizontal.step-indicator-default .step-indicator-line {
+		margin-top: 0;
+		align-self: flex-start;
+		transform: translateY(calc(1rem - (var(--line-thickness) / 2)));
+	}
+
+	.step-indicator-horizontal.step-indicator-sm .step-indicator-line {
+		transform: translateY(calc(0.75rem - (var(--line-thickness) / 2)));
+	}
+
+	.step-indicator-horizontal.step-indicator-lg .step-indicator-line {
+		transform: translateY(calc(1.25rem - (var(--line-thickness) / 2)));
+	}
+
+	/* ========================================
+	   VERTICAL ORIENTATION
+	   ======================================== */
+	.step-indicator-vertical .step-indicator-list {
+		flex-direction: column;
+	}
+
+	.step-indicator-vertical .step-indicator-item {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.step-indicator-vertical .step-indicator-step {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		gap: 0.75rem;
+		background: none;
+		border: none;
+		padding: 0;
+		font: inherit;
+		cursor: default;
+		text-align: left;
+	}
+
+	.step-indicator-vertical .step-indicator-line {
+		width: var(--line-thickness);
+		min-height: 2rem;
+		margin-left: calc(1rem - (var(--line-thickness) / 2));
+		margin-top: 0.5rem;
+		margin-bottom: 0.5rem;
+		border-radius: 9999px;
+	}
+
+	.step-indicator-vertical.step-indicator-sm .step-indicator-line {
+		margin-left: calc(0.75rem - (var(--line-thickness) / 2));
+	}
+
+	.step-indicator-vertical.step-indicator-lg .step-indicator-line {
+		margin-left: calc(1.25rem - (var(--line-thickness) / 2));
+	}
+
+	/* ========================================
+	   COMPACT VARIANT
+	   ======================================== */
+	.step-indicator-compact .step-indicator-step {
+		flex-direction: row;
+		gap: 0.5rem;
+	}
+
+	.step-indicator-compact.step-indicator-horizontal .step-indicator-line {
+		transform: none;
+		align-self: center;
+	}
+
+	/* ========================================
+	   MINIMAL VARIANT
+	   ======================================== */
+	.step-indicator-minimal .step-indicator-step {
+		flex-direction: row;
+	}
+
+	/* ========================================
+	   CIRCLE INDICATOR
+	   ======================================== */
+	.step-indicator-circle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9999px;
+		font-weight: 600;
+		flex-shrink: 0;
+		transition: all 0.2s ease;
+		border: 2px solid transparent;
+	}
+
+	/* Pending state */
+	.step-indicator-step-pending .step-indicator-circle {
+		background-color: var(--ui-bg-tertiary);
+		color: var(--ui-text-tertiary);
+		border-color: var(--ui-border-default);
+	}
+
+	/* Active state */
+	.step-indicator-step-active .step-indicator-circle {
+		background-color: rgb(var(--ui-color-primary));
+		color: white;
+		border-color: rgb(var(--ui-color-primary));
+	}
+
+	/* Completed state */
+	.step-indicator-step-completed .step-indicator-circle {
+		background-color: rgb(var(--ui-color-success));
+		color: white;
+		border-color: rgb(var(--ui-color-success));
+	}
+
+	/* Error state */
+	.step-indicator-step-error .step-indicator-circle {
+		background-color: rgb(var(--ui-color-error));
+		color: white;
+		border-color: rgb(var(--ui-color-error));
+	}
+
+	/* ========================================
+	   STEP NUMBER
+	   ======================================== */
+	.step-indicator-number {
+		line-height: 1;
+	}
+
+	/* ========================================
+	   CLICKABLE STEPS
+	   ======================================== */
+	.step-indicator-step-clickable {
+		cursor: pointer;
+	}
+
+	.step-indicator-step-clickable:hover .step-indicator-circle {
+		transform: scale(1.05);
+	}
+
+	.step-indicator-step-clickable:active .step-indicator-circle {
+		transform: scale(0.98);
+	}
+
+	.step-indicator-step-clickable:focus-visible {
+		outline: none;
+	}
+
+	.step-indicator-step-clickable:focus-visible .step-indicator-circle {
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.3);
+	}
+
+	/* ========================================
+	   CONTENT (LABEL + DESCRIPTION)
+	   ======================================== */
+	.step-indicator-content {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		min-width: 0;
+	}
+
+	.step-indicator-horizontal .step-indicator-content {
+		align-items: center;
+		text-align: center;
+	}
+
+	.step-indicator-vertical .step-indicator-content {
+		align-items: flex-start;
+		text-align: left;
+		padding-top: 0.125rem;
+	}
+
+	.step-indicator-label {
+		font-weight: 500;
+		color: var(--ui-text-secondary);
+		transition: color 0.2s ease;
+		line-height: 1.3;
+	}
+
+	.step-indicator-step-active .step-indicator-label {
+		color: var(--ui-text-primary);
+		font-weight: 600;
+	}
+
+	.step-indicator-step-completed .step-indicator-label {
+		color: var(--ui-text-primary);
+	}
+
+	.step-indicator-step-error .step-indicator-label {
+		color: rgb(var(--ui-color-error));
+	}
+
+	.step-indicator-optional {
+		font-weight: 400;
+		color: var(--ui-text-tertiary);
+		font-size: 0.8em;
+	}
+
+	.step-indicator-description {
+		color: var(--ui-text-tertiary);
+		line-height: 1.4;
+	}
+
+	/* ========================================
+	   CONNECTOR LINES
+	   ======================================== */
+	.step-indicator-line {
+		background-color: var(--ui-border-default);
+		transition: background-color 0.3s ease;
+	}
+
+	.step-indicator-line-completed {
+		background-color: rgb(var(--ui-color-success));
+	}
+
+	.step-indicator-line-active {
+		background: linear-gradient(
+			to right,
+			rgb(var(--ui-color-primary)) 0%,
+			var(--ui-border-default) 100%
+		);
+	}
+
+	.step-indicator-vertical .step-indicator-line-active {
+		background: linear-gradient(
+			to bottom,
+			rgb(var(--ui-color-primary)) 0%,
+			var(--ui-border-default) 100%
+		);
+	}
+
+	/* ========================================
+	   PROGRESS SUMMARY
+	   ======================================== */
+	.step-indicator-progress {
+		margin-bottom: 0.5rem;
+	}
+
+	.step-indicator-progress-text {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--ui-text-secondary);
+	}
+
+	/* ========================================
+	   DISABLED STATE
+	   ======================================== */
+	.step-indicator-step:disabled {
+		cursor: default;
+	}
+
+	.step-indicator-step-pending {
+		opacity: 0.6;
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.step-indicator-circle,
+		.step-indicator-label,
+		.step-indicator-line,
+		.step-indicator-progress-fill {
+			transition: none;
+		}
+
+		.step-indicator-step-clickable:hover .step-indicator-circle {
+			transform: none;
+		}
+	}
+
+	/* ========================================
+	   RESPONSIVE
+	   ======================================== */
+	@media (max-width: 640px) {
+		.step-indicator-horizontal.step-indicator-default .step-indicator-content {
+			display: none;
+		}
+
+		.step-indicator-horizontal.step-indicator-default .step-indicator-line {
+			transform: translateY(calc(1rem - (var(--line-thickness) / 2)));
+		}
+	}
+</style>

package/dist/navigation/StepIndicator/StepIndicator.svelte.d.ts

@@ -0,0 +1,70 @@
+import type { Snippet } from 'svelte';
+import type { Step, StepState } from '../../types/index.js';
+type StepIndicatorSize = 'sm' | 'md' | 'lg';
+type StepIndicatorVariant = 'default' | 'compact' | 'minimal';
+type StepIndicatorOrientation = 'horizontal' | 'vertical';
+interface Props {
+    /** Array of steps */
+    steps: Step[];
+    /** Size variant */
+    size?: StepIndicatorSize;
+    /** Display variant */
+    variant?: StepIndicatorVariant;
+    /** Layout orientation */
+    orientation?: StepIndicatorOrientation;
+    /** Whether to show labels */
+    showLabels?: boolean;
+    /** Whether to show step descriptions */
+    showDescriptions?: boolean;
+    /** Whether to show progress summary (e.g., "Step 2 of 5") */
+    showProgress?: boolean;
+    /** Custom progress format function */
+    progressFormat?: (current: number, total: number) => string;
+    /** Allow clicking on future steps (not just completed/active) */
+    allowFutureSteps?: boolean;
+    /** Custom icon snippet for steps */
+    stepIcon?: Snippet<[{
+        step: Step;
+        index: number;
+        state: StepState;
+    }]>;
+    /** Accessible label for the navigation */
+    ariaLabel?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** ID for the component */
+    id?: string;
+    /** Step click handler */
+    onStepClick?: (step: Step, index: number) => void;
+}
+/**
+ * StepIndicator
+ *
+ * A world-class step indicator component for multi-step healthcare workflows.
+ * Designed with full accessibility, clear visual states, and flexible layouts.
+ *
+ * Features:
+ * - Horizontal and vertical orientations
+ * - Size variants (sm, md, lg)
+ * - Step descriptions and substeps
+ * - Custom icons per step
+ * - Optional step indicators
+ * - Warning and error states
+ * - Progress summary display
+ * - Full keyboard navigation
+ * - Screen reader announcements
+ *
+ * @example
+ * <StepIndicator
+ *   steps={[
+ *     { id: 'patient', label: 'Patient Info', description: 'Enter patient details', state: 'completed' },
+ *     { id: 'insurance', label: 'Insurance', state: 'active' },
+ *     { id: 'verify', label: 'Verify', state: 'pending', optional: true }
+ *   ]}
+ *   showProgress
+ * />
+ */
+declare const StepIndicator: import("svelte").Component<Props, {}, "">;
+type StepIndicator = ReturnType<typeof StepIndicator>;
+export default StepIndicator;
+//# sourceMappingURL=StepIndicator.svelte.d.ts.map

package/dist/navigation/StepIndicator/StepIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/navigation/StepIndicator/StepIndicator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG3D,KAAK,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,KAAK,oBAAoB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAC9D,KAAK,wBAAwB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D,UAAU,KAAK;IACd,qBAAqB;IACrB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,mBAAmB;IACnB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,sBAAsB;IACtB,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,yBAAyB;IACzB,WAAW,CAAC,EAAE,wBAAwB,CAAC;IACvC,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sCAAsC;IACtC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5D,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC,CAAC;IACtE,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yBAAyB;IACzB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAsLF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/navigation/StepIndicator/index.d.ts

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

package/dist/navigation/StepIndicator/index.d.ts.map

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

package/dist/navigation/StepIndicator/index.js

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

package/dist/navigation/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @synthaxai/ui - Navigation Components
+ *
+ * Components for navigation and multi-step workflows.
+ */
+export { StepIndicator } from './StepIndicator/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/navigation/index.js

@@ -0,0 +1,6 @@
+/**
+ * @synthaxai/ui - Navigation Components
+ *
+ * Components for navigation and multi-step workflows.
+ */
+export { StepIndicator } from './StepIndicator/index.js';