@mrintel/villain-ui 0.3.0 → 0.7.1

package/dist/components/navigation/Navbar.svelte

@@ -1,32 +1,111 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    position?: 'sticky' | 'fixed';
-    height?: 'sm' | 'md' | 'lg';
-    children?: Snippet;
-  }
-
-  let {
-    position = 'sticky',
-    height = 'md',
-    children
-  }: Props = $props();
-
-  const positionClasses = {
-    sticky: 'sticky top-0',
-    fixed: 'fixed top-0 left-0 right-0'
-  };
-
-  const heightClasses = {
-    sm: 'h-14',
-    md: 'h-16',
-    lg: 'h-20'
-  };
-
-  const baseClasses = 'z-40 glass-panel flex items-center justify-between px-4 md:px-6 lg:px-8 transition-all duration-300 ease-[var(--ease-luxe)]';
-</script>
-
-<nav class="{baseClasses} {positionClasses[position]} {heightClasses[height]}">
-  {@render children?.()}
-</nav>
+<script lang="ts">let { position = 'sticky', height = 'md', navigationAlign = 'center', toggleButton, logo, navigation, actions, children, currentPath } = $props();
+const positionClasses = {
+    sticky: 'sticky top-0',
+    fixed: 'fixed top-0 left-0 right-0'
+};
+const heightClasses = {
+    sm: 'h-16',
+    md: 'h-18',
+    lg: 'h-24'
+};
+const baseClasses = 'z-[var(--z-50)] glass-panel flex items-center justify-between px-4 md:px-6 lg:px-8 transition-all duration-300 ease-[var(--ease-luxe)]';
+// Track elements modified by the effect to preserve manual .active classes
+let autoManagedElements = $state(new Set());
+let rootElement = $state(null);
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (!rootElement)
+        return;
+    // Clear auto-managed active classes when currentPath becomes falsy
+    if (!currentPath) {
+        autoManagedElements.forEach((element) => {
+            element.classList.remove('active');
+        });
+        autoManagedElements.clear();
+        return;
+    }
+    const elements = rootElement.querySelectorAll('a, button');
+    elements.forEach((element) => {
+        const href = element.getAttribute('href');
+        const dataHref = element.getAttribute('data-href');
+        const targetPath = href || dataHref;
+        // Match exact path or nested routes (e.g., /buttons matches /buttons/icon-button)
+        const isActive = targetPath === currentPath ||
+            (targetPath && currentPath.startsWith(targetPath + '/'));
+        if (isActive) {
+            // Only add to autoManagedElements if we're adding the class ourselves
+            if (!element.classList.contains('active')) {
+                element.classList.add('active');
+                autoManagedElements.add(element);
+            }
+        }
+        else if (autoManagedElements.has(element)) {
+            element.classList.remove('active');
+            autoManagedElements.delete(element);
+        }
+    });
+});
+export {};
+</script>
+
+<nav bind:this={rootElement} data-navbar class="{baseClasses} {positionClasses[position]} {heightClasses[height]}">
+  <!-- Left Section: Toggle Button and Logo -->
+  <div class="flex items-center gap-3">
+    {#if toggleButton}
+      {@render toggleButton()}
+    {/if}
+    {#if logo}
+      {@render logo()}
+    {/if}
+  </div>
+  
+  <!-- Center Section: Navigation Links -->
+  {#if navigation}
+    <div class="flex-1 flex items-center {navigationAlign === 'center' ? 'justify-center' : ''} gap-6 {logo ? 'ml-4' : ''}">
+      {@render navigation()}
+    </div>
+  {:else if children}
+    <div class="flex-1 flex items-center {navigationAlign === 'center' ? 'justify-center' : ''} gap-4 {logo ? 'ml-4' : ''}">
+      {@render children()}
+    </div>
+  {/if}
+  
+  <!-- Right Section: Actions -->
+  {#if actions}
+    <div class="flex items-center gap-3">
+      {@render actions()}
+    </div>
+  {/if}
+</nav>
+
+<style>
+  nav :global(.navbar-logo) {
+    color: var(--color-accent);
+    font-weight: 600;
+    font-size: var(--text-lg);
+  }
+
+  nav :global(a.active),
+  nav :global(button.active) {
+    color: var(--color-accent);
+    font-weight: 600;
+    position: relative;
+  }
+
+  nav :global(a.active::after),
+  nav :global(button.active::after) {
+    content: '';
+    position: absolute;
+    bottom: -0.5rem;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--color-accent);
+    box-shadow: var(--shadow-accent-glow);
+  }
+
+  nav :global(a:not(.active):hover),
+  nav :global(button:not(.active):hover) {
+    color: var(--color-accent-soft);
+  }</style>

package/dist/components/navigation/Navbar.svelte.d.ts

@@ -2,7 +2,13 @@ import type { Snippet } from 'svelte';
 interface Props {
     position?: 'sticky' | 'fixed';
     height?: 'sm' | 'md' | 'lg';
+    navigationAlign?: 'left' | 'center';
+    toggleButton?: Snippet;
+    logo?: Snippet;
+    navigation?: Snippet;
+    actions?: Snippet;
     children?: Snippet;
+    currentPath?: string;
 }
 declare const Navbar: import("svelte").Component<Props, {}, "">;
 type Navbar = ReturnType<typeof Navbar>;

package/dist/components/navigation/Sidebar.svelte

@@ -1,35 +1,236 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    open?: boolean;
-    side?: 'left' | 'right';
-    width?: 'sm' | 'md' | 'lg';
-    children?: Snippet;
-  }
-
-  let {
-    open = $bindable(true),
-    side = 'left',
-    width = 'md',
-    children
-  }: Props = $props();
-
-  const widthClasses = {
-    sm: { open: 'w-56', collapsed: 'w-14' },
-    md: { open: 'w-64', collapsed: 'w-16' },
-    lg: { open: 'w-80', collapsed: 'w-20' }
-  };
-
-  const sideClasses = {
-    left: 'left-0',
-    right: 'right-0'
-  };
-
-  const currentWidth = $derived(open ? widthClasses[width].open : widthClasses[width].collapsed);
-  const baseClasses = 'fixed top-0 bottom-0 z-30 glass-panel overflow-y-auto overflow-x-hidden transition-all duration-300 ease-[var(--ease-luxe)]';
-</script>
-
-<aside class="{baseClasses} {sideClasses[side]} {currentWidth}">
-  {@render children?.()}
-</aside>
+<script lang="ts">let { open = $bindable(true), side = 'left', width = 'md', header, children, currentPath } = $props();
+let navbarHeight = $state(0);
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    const navbarElement = document.querySelector('[data-navbar]');
+    if (navbarElement) {
+        // Initial height
+        navbarHeight = navbarElement.offsetHeight;
+        // Watch for height changes (responsive behavior, window resize, etc.)
+        if (typeof ResizeObserver !== 'undefined') {
+            const resizeObserver = new ResizeObserver(() => {
+                navbarHeight = navbarElement.offsetHeight;
+            });
+            resizeObserver.observe(navbarElement);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+    }
+    else {
+        navbarHeight = 0;
+    }
+});
+// Track elements modified by the effect to preserve manual .active classes
+let autoManagedElements = $state(new Set());
+let rootElement = $state(null);
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (!rootElement)
+        return;
+    // Clear auto-managed active classes when currentPath becomes falsy
+    if (!currentPath) {
+        autoManagedElements.forEach((element) => {
+            element.classList.remove('active');
+        });
+        autoManagedElements.clear();
+        return;
+    }
+    const elements = rootElement.querySelectorAll('a, button');
+    elements.forEach((element) => {
+        const href = element.getAttribute('href');
+        const dataHref = element.getAttribute('data-href');
+        const targetPath = href || dataHref;
+        // Match exact path or nested routes (e.g., /buttons matches /buttons/icon-button)
+        const isActive = targetPath === currentPath ||
+            (targetPath && currentPath.startsWith(targetPath + '/'));
+        if (isActive) {
+            // Only add to autoManagedElements if we're adding the class ourselves
+            if (!element.classList.contains('active')) {
+                element.classList.add('active');
+                autoManagedElements.add(element);
+            }
+        }
+        else if (autoManagedElements.has(element)) {
+            element.classList.remove('active');
+            autoManagedElements.delete(element);
+        }
+    });
+});
+// Collapsed state icon/text detection
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (!rootElement)
+        return;
+    // Reference open to make effect reactive to collapse/expand state changes
+    // This ensures detection runs when sidebar toggles
+    if (open === undefined)
+        return;
+    const elements = rootElement.querySelectorAll('a, button');
+    elements.forEach((element) => {
+        // Check for icon presence using documented .sidebar-item-icon class
+        const hasIcon = element.querySelector('.sidebar-item-icon');
+        if (hasIcon) {
+            element.setAttribute('data-sidebar-has-icon', 'true');
+            element.removeAttribute('data-sidebar-first-letter');
+        }
+        else {
+            // Extract first letter from .sidebar-item-label or fallback to text content
+            const label = element.querySelector('.sidebar-item-label');
+            const textContent = (label?.textContent || element.textContent)?.trim();
+            const firstChar = textContent?.[0];
+            // Only set first-letter if it's alphanumeric
+            if (firstChar && /[a-zA-Z0-9]/.test(firstChar)) {
+                element.setAttribute('data-sidebar-first-letter', firstChar.toUpperCase());
+                element.removeAttribute('data-sidebar-has-icon');
+            }
+            else {
+                // No valid first letter - don't show anything in collapsed mode
+                element.removeAttribute('data-sidebar-first-letter');
+                element.removeAttribute('data-sidebar-has-icon');
+            }
+        }
+    });
+});
+const widthClasses = {
+    sm: { open: 'w-56', collapsed: 'w-14' },
+    md: { open: 'w-64', collapsed: 'w-16' },
+    lg: { open: 'w-80', collapsed: 'w-20' }
+};
+const sideClasses = {
+    left: 'left-0',
+    right: 'right-0'
+};
+const currentWidth = $derived(open ? widthClasses[width].open : widthClasses[width].collapsed);
+const baseClasses = 'fixed bottom-0 z-[var(--z-40)] glass-panel overflow-y-auto overflow-x-hidden transition-all duration-300 ease-[var(--ease-luxe)]';
+export {};
+</script>
+
+<aside bind:this={rootElement} data-sidebar class="{baseClasses} {sideClasses[side]} {currentWidth}" style="top: {navbarHeight}px">
+  {#if header && open}
+    {@render header()}
+  {/if}
+  {@render children?.()}
+</aside>
+
+<style>
+  /* Header styling */
+  aside :global(.sidebar-header) {
+    padding: 1rem;
+    font-weight: 600;
+    color: var(--color-accent);
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    transition: all 0.2s var(--ease-luxe);
+  }
+
+  /* Collapsed state - center icons and hide text */
+  aside[class*="w-14"] :global(a[data-sidebar-has-icon]),
+  aside[class*="w-16"] :global(a[data-sidebar-has-icon]),
+  aside[class*="w-20"] :global(a[data-sidebar-has-icon]),
+  aside[class*="w-14"] :global(button[data-sidebar-has-icon]),
+  aside[class*="w-16"] :global(button[data-sidebar-has-icon]),
+  aside[class*="w-20"] :global(button[data-sidebar-has-icon]) {
+    justify-content: center;
+  }
+
+  aside[class*="w-14"] :global(a[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-16"] :global(a[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-20"] :global(a[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-14"] :global(button[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-16"] :global(button[data-sidebar-has-icon] .sidebar-item-label),
+  aside[class*="w-20"] :global(button[data-sidebar-has-icon] .sidebar-item-label) {
+    display: none;
+  }
+
+  aside[class*="w-14"] :global(a[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-16"] :global(a[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-20"] :global(a[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-14"] :global(button[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-16"] :global(button[data-sidebar-has-icon] .sidebar-item-icon),
+  aside[class*="w-20"] :global(button[data-sidebar-has-icon] .sidebar-item-icon) {
+    font-size: var(--text-2xl);
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  /* Collapsed state - first letter circle for items without icons */
+  aside[class*="w-14"] :global(a:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-16"] :global(a:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-20"] :global(a:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-14"] :global(button:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-16"] :global(button:not([data-sidebar-has-icon]))::before,
+  aside[class*="w-20"] :global(button:not([data-sidebar-has-icon]))::before {
+    content: attr(data-sidebar-first-letter);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--radius-pill);
+    background: var(--color-accent-overlay-20);
+    color: var(--color-accent);
+    font-weight: 600;
+    font-size: var(--text-lg);
+  }
+
+  aside[class*="w-14"] :global(a:not([data-sidebar-has-icon])),
+  aside[class*="w-16"] :global(a:not([data-sidebar-has-icon])),
+  aside[class*="w-20"] :global(a:not([data-sidebar-has-icon])),
+  aside[class*="w-14"] :global(button:not([data-sidebar-has-icon])),
+  aside[class*="w-16"] :global(button:not([data-sidebar-has-icon])),
+  aside[class*="w-20"] :global(button:not([data-sidebar-has-icon])) {
+    justify-content: center;
+  }
+
+  aside[class*="w-14"] :global(a:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-16"] :global(a:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-20"] :global(a:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-14"] :global(button:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-16"] :global(button:not([data-sidebar-has-icon]) .sidebar-item-label),
+  aside[class*="w-20"] :global(button:not([data-sidebar-has-icon]) .sidebar-item-label) {
+    display: none;
+  }
+
+  aside :global(a.active),
+  aside :global(button.active) {
+    background: var(--color-accent-overlay-15);
+    color: var(--color-accent);
+    border-left: 3px solid var(--color-accent);
+    font-weight: 600;
+  }
+
+  aside :global(a.active),
+  aside :global(button.active) {
+    box-shadow: var(--shadow-accent-glow);
+  }
+
+  aside :global(a:not(.active):hover),
+  aside :global(button:not(.active):hover) {
+    background: var(--color-base-3);
+    color: var(--color-accent-soft);
+  }
+
+  aside :global(a),
+  aside :global(button) {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    margin: 0.25rem 0.5rem;
+    border-radius: var(--radius-md);
+    color: var(--color-text-soft);
+    text-decoration: none;
+    transition: all 0.2s var(--ease-luxe);
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    width: calc(100% - 1rem);
+    text-align: left;
+    font-family: var(--font-body);
+    font-size: 0.875rem;
+  }</style>

package/dist/components/navigation/Sidebar.svelte.d.ts

@@ -3,7 +3,9 @@ interface Props {
     open?: boolean;
     side?: 'left' | 'right';
     width?: 'sm' | 'md' | 'lg';
+    header?: Snippet;
     children?: Snippet;
+    currentPath?: string;
 }
 declare const Sidebar: import("svelte").Component<Props, {}, "open">;
 type Sidebar = ReturnType<typeof Sidebar>;

package/dist/components/navigation/Stepper.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">let { steps, current = 0, states, variant = 'default', orientation = 'horizontal', showNumbers = true, showProgress = true, clickable = false, onStepClick, class: className = '' } = $props();
+/* ---------------------------------------------
+ * Normalize steps (stable IDs, StepForm friendly)
+ * --------------------------------------------- */
+const normalizedSteps = $derived(steps.map((step, _) => typeof step === 'string'
+    ? {
+        id: step.toLowerCase().replace(/\s+/g, '-'),
+        label: step
+    }
+    : step));
+/* ---------------------------------------------
+ * Resolve step states
+ * Priority:
+ * 1. explicit `states` prop
+ * 2. per-step `state`
+ * 3. derive from `current`
+ * --------------------------------------------- */
+const derivedStates = $derived(states && states.length === normalizedSteps.length
+    ? states
+    : normalizedSteps.map((step, i) => {
+        if (step.state)
+            return step.state;
+        if (i < current)
+            return 'completed';
+        if (i === current)
+            return 'active';
+        return 'idle';
+    }));
+/* ---------------------------------------------
+ * Progress bar percentage
+ * --------------------------------------------- */
+const progressPercent = $derived(normalizedSteps.length > 1
+    ? ((current + 1) / normalizedSteps.length) * 100
+    : 100);
+/* ---------------------------------------------
+ * Interaction handlers
+ * --------------------------------------------- */
+function handleStepClick(index) {
+    if (!clickable)
+        return;
+    const state = derivedStates[index];
+    if (state !== 'completed')
+        return;
+    onStepClick?.(index);
+}
+function handleKeyDown(event, index) {
+    if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        handleStepClick(index);
+    }
+}
+/* ---------------------------------------------
+ * Styling maps
+ * --------------------------------------------- */
+const stateStyles = {
+    idle: {
+        circle: 'bg-[var(--color-base-2)] text-[var(--color-text-tertiary)]',
+        label: 'text-[var(--color-text-tertiary)]',
+        connector: 'bg-[var(--color-base-2)]'
+    },
+    active: {
+        circle: 'bg-[var(--color-accent-primary)] text-white shadow-[0_0_0_4px_rgba(139,92,246,0.3)]',
+        label: 'text-[var(--color-accent-primary)]',
+        connector: 'bg-[var(--color-base-2)]'
+    },
+    completed: {
+        circle: 'bg-[var(--color-accent-primary)] text-white',
+        label: 'text-[var(--color-text-secondary)]',
+        connector: 'bg-[var(--color-accent-primary)]'
+    },
+    error: {
+        circle: 'bg-[var(--color-error)] text-white',
+        label: 'text-[var(--color-error)]',
+        connector: 'bg-[var(--color-error)]'
+    },
+    disabled: {
+        circle: 'bg-[var(--color-base-1)] text-[var(--color-text-tertiary)] opacity-50',
+        label: 'text-[var(--color-text-tertiary)] opacity-50',
+        connector: 'bg-[var(--color-base-1)]'
+    }
+};
+const sizeConfig = {
+    default: { circle: 'w-8 h-8', text: 'text-sm', connector: 'h-0.5', gap: 'gap-3' },
+    compact: { circle: 'w-6 h-6', text: 'text-xs', connector: 'h-0.5', gap: 'gap-2' },
+    minimal: { circle: 'w-3 h-3', text: 'text-xs', connector: 'h-0.5', gap: 'gap-1' }
+};
+const sizes = $derived(sizeConfig[variant]);
+export {};
+</script>
+
+<!-- ========================================================= -->
+<!-- Root -->
+<!-- ========================================================= -->
+<div
+	class="stepper {className}"
+	class:stepper-horizontal={orientation === 'horizontal'}
+	class:stepper-vertical={orientation === 'vertical'}
+	role="group"
+	aria-label="Progress"
+>
+	<!-- ========================================================= -->
+	<!-- Horizontal -->
+	<!-- ========================================================= -->
+	{#if orientation === 'horizontal'}
+		<div class="w-full">
+			{#if showProgress && variant !== 'minimal'}
+				<div class="relative mb-8">
+					<div class="h-2 rounded-full overflow-hidden bg-[var(--color-base-2)]">
+						<div
+							class="h-full transition-all duration-500 ease-out bg-[var(--color-accent-primary)]"
+							style="width: {progressPercent}%"
+						></div>
+					</div>
+
+					<div class="absolute top-0 left-0 right-0 flex justify-between items-center -mt-3">
+						{#each normalizedSteps as step, i}
+							{@const state = derivedStates[i]}
+							{@const styles = stateStyles[state]}
+							<div class="flex flex-col items-center">
+								<button
+									type="button"
+									class="{sizes.circle} rounded-full flex items-center justify-center transition-all duration-300 {styles.circle}"
+									class:cursor-pointer={clickable && state === 'completed'}
+									disabled={state === 'disabled'}
+									onclick={() => handleStepClick(i)}
+									onkeydown={(e) => handleKeyDown(e, i)}
+									aria-current={state === 'active' ? 'step' : undefined}
+								>
+									{#if state === 'completed' && variant !== 'minimal'}
+										✓
+									{:else if step.icon}
+										{@render step.icon()}
+									{:else if showNumbers && variant !== 'minimal'}
+										<span class="{sizes.text} font-bold">{i + 1}</span>
+									{/if}
+								</button>
+
+								{#if variant !== 'minimal'}
+									<span class="hidden md:block mt-2 {sizes.text} font-medium {styles.label}">
+										{step.label}
+									</span>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</div>
+
+	<!-- ========================================================= -->
+	<!-- Vertical -->
+	<!-- ========================================================= -->
+	{:else}
+		<div class="flex flex-col {sizes.gap}">
+			{#each normalizedSteps as step, i}
+				{@const state = derivedStates[i]}
+				{@const styles = stateStyles[state]}
+				{@const isLast = i === normalizedSteps.length - 1}
+
+				<div class="flex">
+					<div class="flex flex-col items-center mr-4">
+						<button
+							type="button"
+							class="{sizes.circle} rounded-full flex items-center justify-center transition-all duration-300 {styles.circle}"
+							class:cursor-pointer={clickable && state === 'completed'}
+							disabled={state === 'disabled'}
+							onclick={() => handleStepClick(i)}
+							onkeydown={(e) => handleKeyDown(e, i)}
+							aria-current={state === 'active' ? 'step' : undefined}
+						>
+							{#if state === 'completed' && variant !== 'minimal'}✓{/if}
+						</button>
+
+						{#if !isLast}
+							<div
+								class="w-0.5 flex-1 min-h-8 my-2 rounded-full transition-colors duration-300"
+								class:bg-[var(--color-accent-primary)]={state === 'completed'}
+								class:bg-[var(--color-base-2)]={state !== 'completed'}
+							></div>
+						{/if}
+					</div>
+
+					<div class="flex-1 pb-8">
+						<span class="{sizes.text} font-medium {styles.label}">
+							{step.label}
+						</span>
+						{#if step.description && variant === 'default'}
+							<p class="mt-1 text-xs text-[var(--color-text-tertiary)]">
+								{step.description}
+							</p>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	@media (prefers-reduced-motion: reduce) {
+		.stepper * {
+			transition-duration: 0.01ms !important;
+		}
+	}</style>

package/dist/components/navigation/Stepper.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+export type StepState = 'idle' | 'active' | 'completed' | 'error' | 'disabled';
+export interface StepConfig {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: Snippet;
+    state?: StepState;
+}
+interface Props {
+    /** Array of step labels or full step configs */
+    steps: (string | StepConfig)[];
+    /** Current step index (0-based) */
+    current?: number;
+    /** Optional explicit states (must match steps length) */
+    states?: StepState[];
+    /** Visual variant */
+    variant?: 'default' | 'compact' | 'minimal';
+    /** Orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Show step numbers */
+    showNumbers?: boolean;
+    /** Show progress bar (horizontal only) */
+    showProgress?: boolean;
+    /** Allow clicking on completed steps */
+    clickable?: boolean;
+    /** Callback when a step is clicked */
+    onStepClick?: (index: number) => void;
+    /** Additional CSS class */
+    class?: string;
+}
+declare const Stepper: import("svelte").Component<Props, {}, "">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;