@mrintel/villain-ui 0.6.3 → 0.7.1

package/dist/components/cards/Card.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">let { padding = 'md', href, target = '_self', rel, class: className = '', children, header, footer, iconBefore, ...restProps } = $props();
+<script lang="ts">let { padding = 'md', href, target = '_self', rel, onclick, selected = false, disabled = false, class: className = '', children, header, footer, iconBefore, ...restProps } = $props();
 // Compute rel attribute: use explicit rel if provided, otherwise default to 'noopener noreferrer' for target='_blank'
 const relValue = $derived(rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined));
 const paddingClasses = {
@@ -7,54 +7,48 @@ const paddingClasses = {
     md: 'p-6',
     lg: 'p-8'
 };
-const baseClasses = $derived(`panel-raised rounded-[var(--radius-lg)] transition-all duration-300 ease-[var(--ease-luxe)] ${href ? 'no-underline' : ''}`);
+const isInteractive = $derived(!!href || !!onclick);
+const baseClasses = $derived(`panel-raised rounded-[var(--radius-lg)] transition-all duration-300 ease-[var(--ease-luxe)]` +
+    `${href ? ' no-underline' : ''}` +
+    `${isInteractive ? ' cursor-pointer hover-lift' : ''}` +
+    `${selected ? ' ring-2 ring-accent ring-offset-2 ring-offset-base-0' : ''}` +
+    `${disabled ? ' opacity-50 pointer-events-none' : ''}`);
 export {};
 </script>
 
-{#if href}
-  <a {href} {target} rel={relValue} class="{baseClasses} {paddingClasses[padding]} {className}" {...restProps}>
-    {#if iconBefore}
-      <div class="card-icon">
-        {@render iconBefore()}
-      </div>
-    {/if}
-    {#if header}
-      <div class="pb-3 mb-3 border-b border-border-strong">
-        {@render header()}
-      </div>
-    {/if}
+{#snippet cardContent()}
+  {#if iconBefore}
+    <div class="card-icon">
+      {@render iconBefore()}
+    </div>
+  {/if}
+  {#if header}
+    <div class="pb-3 mb-3 border-b border-border-strong">
+      {@render header()}
+    </div>
+  {/if}
+
+  <div>
+    {@render children?.()}
+  </div>
 
-    <div>
-      {@render children?.()}
+  {#if footer}
+    <div class="pt-3 mt-3 border-t border-border-strong">
+      {@render footer()}
     </div>
+  {/if}
+{/snippet}
 
-    {#if footer}
-      <div class="pt-3 mt-3 border-t border-border-strong">
-        {@render footer()}
-      </div>
-    {/if}
+{#if href}
+  <a {href} {target} rel={relValue} class="{baseClasses} {paddingClasses[padding]} {className}" aria-disabled={disabled || undefined} {...restProps}>
+    {@render cardContent()}
   </a>
+{:else if onclick}
+  <button type="button" {onclick} {disabled} aria-pressed={selected} class="{baseClasses} {paddingClasses[padding]} {className} text-left w-full" {...restProps}>
+    {@render cardContent()}
+  </button>
 {:else}
   <div class="{baseClasses} {paddingClasses[padding]} {className}" {...restProps}>
-    {#if iconBefore}
-      <div class="card-icon">
-        {@render iconBefore()}
-      </div>
-    {/if}
-    {#if header}
-      <div class="pb-3 mb-3 border-b border-border-strong">
-        {@render header()}
-      </div>
-    {/if}
-
-    <div>
-      {@render children?.()}
-    </div>
-
-    {#if footer}
-      <div class="pt-3 mt-3 border-t border-border-strong">
-        {@render footer()}
-      </div>
-    {/if}
+    {@render cardContent()}
   </div>
 {/if}

package/dist/components/cards/Card.svelte.d.ts

@@ -4,6 +4,9 @@ export interface Props {
     href?: string;
     target?: '_blank' | '_self' | '_parent' | '_top';
     rel?: string;
+    onclick?: (event: MouseEvent) => void;
+    selected?: boolean;
+    disabled?: boolean;
     class?: string;
     children?: Snippet;
     header?: Snippet;

package/dist/components/forms/Input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { createId } from '../../lib/internal/id.js';
 import { baseInputClasses, focusClasses, disabledClasses, } from './formClasses';
-let { type = 'text', value = $bindable(''), placeholder, disabled = false, error = false, label, id = createId('input'), oninput, iconBefore, iconAfter, validate, validationMessage, showValidation = true, class: className = '', } = $props();
+let { type = 'text', name, value = $bindable(''), placeholder, disabled = false, error = false, label, id = createId('input'), oninput, iconBefore, iconAfter, validate, validationMessage, showValidation = true, class: className = '', } = $props();
 // Built-in validation patterns
 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const urlPattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
@@ -91,6 +91,7 @@ function decrement() {
 			<!-- INPUT FIELD -->
 			<input
 				{type}
+				{name}
 				{id}
 				{placeholder}
 				{disabled}
@@ -153,6 +154,7 @@ function decrement() {
 
 			<input
 				{type}
+				{name}
 				{id}
 				{placeholder}
 				{disabled}

package/dist/components/forms/Input.svelte.d.ts

@@ -1,5 +1,6 @@
 export interface Props {
     type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'color' | 'search';
+    name?: string;
     value?: string | number;
     placeholder?: string;
     disabled?: boolean;

package/dist/components/forms/Step.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import { onMount, onDestroy } from 'svelte';
+import { getStepperContext } from './StepContext';
+let { id, label = id, fields = [], optional = false, order, children, } = $props();
+const context = getStepperContext();
+onMount(() => {
+    context?.registerStep({ id, label, fields, optional, order });
+});
+onDestroy(() => {
+    context?.unregisterStep(id);
+});
+const isActive = $derived(context?.currentStepId === id);
+const state = $derived(context?.getStepState(id) ?? 'idle');
+</script>
+
+{#if isActive && children}
+	<div
+		class="step-content"
+		data-step-id={id}
+		data-step-state={state}
+		role="tabpanel"
+		aria-labelledby={`step-${id}`}
+	>
+		{@render children()}
+	</div>
+{/if}

package/dist/components/forms/Step.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id: string;
+    label?: string;
+    fields?: string[];
+    optional?: boolean;
+    order?: number;
+    children?: Snippet;
+}
+declare const Step: import("svelte").Component<Props, {}, "">;
+type Step = ReturnType<typeof Step>;
+export default Step;

package/dist/components/forms/StepContext.d.ts

@@ -0,0 +1,3 @@
+import type { StepContext } from './Stepper.types';
+export declare const STEPPER_CONTEXT_KEY: unique symbol;
+export declare function getStepperContext(): StepContext | undefined;

package/dist/components/forms/StepContext.js

@@ -0,0 +1,5 @@
+import { getContext } from 'svelte';
+export const STEPPER_CONTEXT_KEY = Symbol('stepper-form-context');
+export function getStepperContext() {
+    return getContext(STEPPER_CONTEXT_KEY);
+}

package/dist/components/forms/Stepper.types.d.ts

@@ -0,0 +1,37 @@
+export type StepState = 'idle' | 'active' | 'completed' | 'error';
+export type ValidationMode = 'strict' | 'loose' | 'submit-only';
+export interface StepRegistration {
+    id: string;
+    label: string;
+    fields?: string[];
+    optional?: boolean;
+    order?: number;
+}
+export interface StepContext {
+    registerStep: (step: StepRegistration) => void;
+    unregisterStep: (id: string) => void;
+    currentStepId: string;
+    getStepState: (id: string) => StepState;
+}
+export interface StepMeta {
+    id: string;
+    label: string;
+    fields: string[];
+    optional: boolean;
+    state: StepState;
+}
+export interface StepperFormContext {
+    next: () => Promise<boolean>;
+    back: () => void;
+    goto: (stepId: string) => Promise<boolean>;
+    currentStep: number;
+    currentStepId: string;
+    totalSteps: number;
+    canNext: boolean;
+    canBack: boolean;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    steps: StepMeta[];
+    validateCurrentStep: () => Promise<boolean>;
+    getStepErrors: (stepId: string) => string[];
+}

package/dist/components/forms/Stepper.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/StepperForm.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">import { setContext, tick } from 'svelte';
+import { STEPPER_CONTEXT_KEY } from './StepContext';
+let { form, validationMode = 'strict', initialStep = 0, onStepChange, onValidationError, onComplete, header, footer, children, class: className = '', } = $props();
+let registeredSteps = $state([]);
+let currentStepIndex = $state(initialStep);
+let stepStates = $state(new Map());
+let stepErrors = $state(new Map());
+const totalSteps = $derived(registeredSteps.length);
+const currentStepId = $derived(registeredSteps[currentStepIndex]?.id ?? '');
+const isFirstStep = $derived(currentStepIndex === 0);
+const isLastStep = $derived(currentStepIndex === totalSteps - 1);
+const canBack = $derived(!isFirstStep);
+const canNext = $derived(validationMode === 'submit-only'
+    ? true
+    : (() => {
+        const step = registeredSteps[currentStepIndex];
+        if (!step)
+            return false;
+        return (stepErrors.get(step.id) ?? []).length === 0;
+    })());
+const steps = $derived(registeredSteps.map((step, i) => ({
+    id: step.id,
+    label: step.label,
+    fields: step.fields ?? [],
+    optional: step.optional ?? false,
+    state: stepStates.get(step.id) ??
+        (i < currentStepIndex
+            ? 'completed'
+            : i === currentStepIndex
+                ? 'active'
+                : 'idle'),
+})));
+async function validateStepFields(stepId) {
+    const step = registeredSteps.find((s) => s.id === stepId);
+    if (!step?.fields?.length)
+        return true;
+    const formErrors = form?.errors;
+    if (!formErrors)
+        return true;
+    const errors = [];
+    for (const field of step.fields) {
+        const fieldErrors = $state.snapshot(formErrors)?.[field];
+        if (Array.isArray(fieldErrors))
+            errors.push(...fieldErrors);
+    }
+    if (errors.length) {
+        stepErrors.set(stepId, errors);
+        stepStates.set(stepId, 'error');
+        onValidationError?.(stepId, errors);
+        return false;
+    }
+    stepErrors.delete(stepId);
+    stepStates.set(stepId, 'active');
+    return true;
+}
+async function validateCurrentStep() {
+    if (validationMode === 'submit-only')
+        return true;
+    return validateStepFields(currentStepId);
+}
+async function next() {
+    if (isLastStep) {
+        onComplete?.();
+        return true;
+    }
+    if (validationMode !== 'submit-only') {
+        const valid = validationMode === 'strict'
+            ? await validateCurrentStep()
+            : (await validateCurrentStep(), true);
+        if (!valid)
+            return false;
+    }
+    stepStates.set(currentStepId, 'completed');
+    currentStepIndex++;
+    const newStepId = registeredSteps[currentStepIndex].id;
+    stepStates.set(newStepId, 'active');
+    await tick();
+    onStepChange?.(currentStepIndex, newStepId);
+    return true;
+}
+function back() {
+    if (isFirstStep)
+        return;
+    stepStates.set(currentStepId, 'idle');
+    currentStepIndex--;
+    const newStepId = registeredSteps[currentStepIndex].id;
+    stepStates.set(newStepId, 'active');
+    onStepChange?.(currentStepIndex, newStepId);
+}
+async function goto(stepId) {
+    const targetIndex = registeredSteps.findIndex((s) => s.id === stepId);
+    if (targetIndex === -1)
+        return false;
+    if (targetIndex > currentStepIndex && validationMode === 'strict') {
+        for (let i = currentStepIndex; i < targetIndex; i++) {
+            const ok = await validateStepFields(registeredSteps[i].id);
+            if (!ok)
+                return false;
+            stepStates.set(registeredSteps[i].id, 'completed');
+        }
+    }
+    for (let i = 0; i < registeredSteps.length; i++) {
+        stepStates.set(registeredSteps[i].id, i < targetIndex
+            ? 'completed'
+            : i === targetIndex
+                ? 'active'
+                : 'idle');
+    }
+    currentStepIndex = targetIndex;
+    await tick();
+    onStepChange?.(targetIndex, stepId);
+    return true;
+}
+function getStepErrors(stepId) {
+    return stepErrors.get(stepId) ?? [];
+}
+function getStepState(id) {
+    return stepStates.get(id) ?? 'idle';
+}
+function registerStep(step) {
+    if (registeredSteps.some((s) => s.id === step.id))
+        return;
+    registeredSteps = [...registeredSteps, step].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    if (!registeredSteps[currentStepIndex]) {
+        currentStepIndex = 0;
+    }
+    const id = registeredSteps[currentStepIndex].id;
+    stepStates.set(id, 'active');
+}
+function unregisterStep(id) {
+    registeredSteps = registeredSteps.filter((s) => s.id !== id);
+    stepStates.delete(id);
+    stepErrors.delete(id);
+    if (currentStepIndex >= registeredSteps.length) {
+        currentStepIndex = Math.max(registeredSteps.length - 1, 0);
+    }
+    const active = registeredSteps[currentStepIndex];
+    if (active)
+        stepStates.set(active.id, 'active');
+}
+const stepContext = {
+    registerStep,
+    unregisterStep,
+    get currentStepId() {
+        return currentStepId;
+    },
+    getStepState,
+};
+setContext(STEPPER_CONTEXT_KEY, stepContext);
+const slotContext = $derived({
+    next,
+    back,
+    goto,
+    currentStep: currentStepIndex,
+    currentStepId,
+    totalSteps,
+    canNext,
+    canBack,
+    isFirstStep,
+    isLastStep,
+    steps,
+    validateCurrentStep,
+    getStepErrors,
+});
+</script>
+
+<div class={`stepper-form ${className}`} data-current-step={currentStepId}>
+	{#if header}
+		<div class="stepper-form-header">
+			{@render header(slotContext)}
+		</div>
+	{/if}
+
+	<div class="stepper-form-content">
+		{@render children?.(slotContext)}
+	</div>
+
+	{#if footer}
+		<div class="stepper-form-footer">
+			{@render footer(slotContext)}
+		</div>
+	{/if}
+</div>

package/dist/components/forms/StepperForm.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { ValidationMode, StepperFormContext } from './Stepper.types';
+interface Props {
+    form: any;
+    validationMode?: ValidationMode;
+    initialStep?: number;
+    onStepChange?: (stepIndex: number, stepId: string) => void;
+    onValidationError?: (stepId: string, errors: string[]) => void;
+    onComplete?: () => void;
+    header?: Snippet<[StepperFormContext]>;
+    footer?: Snippet<[StepperFormContext]>;
+    children?: Snippet<[StepperFormContext]>;
+    class?: string;
+}
+declare const StepperForm: import("svelte").Component<Props, {}, "">;
+type StepperForm = ReturnType<typeof StepperForm>;
+export default StepperForm;

package/dist/components/forms/index.d.ts

@@ -10,3 +10,6 @@ export { default as InputGroup } from './InputGroup.svelte';
 export { default as DatePicker } from './DatePicker.svelte';
 export { default as TimePicker } from './TimePicker.svelte';
 export { default as DateTimePicker } from './DateTimePicker.svelte';
+export { default as Step } from './Step.svelte';
+export { default as StepperForm } from './StepperForm.svelte';
+export type { StepState, ValidationMode, StepRegistration, StepperFormContext, StepMeta, StepContext } from './Stepper.types';

package/dist/components/forms/index.js

@@ -10,3 +10,5 @@ export { default as InputGroup } from './InputGroup.svelte';
 export { default as DatePicker } from './DatePicker.svelte';
 export { default as TimePicker } from './TimePicker.svelte';
 export { default as DateTimePicker } from './DateTimePicker.svelte';
+export { default as Step } from './Step.svelte';
+export { default as StepperForm } from './StepperForm.svelte';

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;

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

@@ -5,3 +5,4 @@ export { default as Breadcrumbs } from './Breadcrumbs.svelte';
 export { default as Menu } from './Menu.svelte';
 export { default as DropdownMenu } from './DropdownMenu.svelte';
 export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as Stepper } from './Stepper.svelte';

package/dist/components/navigation/index.js

@@ -5,3 +5,4 @@ export { default as Breadcrumbs } from './Breadcrumbs.svelte';
 export { default as Menu } from './Menu.svelte';
 export { default as DropdownMenu } from './DropdownMenu.svelte';
 export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as Stepper } from './Stepper.svelte';

package/dist/index.d.ts

@@ -4,11 +4,12 @@
  * This is the main entry point for the component library.
  */
 import './theme.css';
-export declare const version = "0.6.0";
+export declare const version = "0.7.1";
 export { Button, IconButton, ButtonGroup, LinkButton, FloatingActionButton } from './components/buttons';
-export { Input, Textarea, Select, Checkbox, Switch, RadioGroup, RangeSlider, FileUpload, InputGroup, DatePicker, TimePicker, DateTimePicker } from './components/forms';
+export { Input, Textarea, Select, Checkbox, Switch, RadioGroup, RangeSlider, FileUpload, InputGroup, DatePicker, TimePicker, DateTimePicker, StepperForm, Step } from './components/forms';
+export type { StepState, ValidationMode, StepRegistration, StepperFormContext, StepMeta, StepContext } from './components/forms';
 export { Card, Panel, Grid, Container, SectionHeader, Divider } from './components/cards';
-export { Navbar, Sidebar, Tabs, Breadcrumbs, Menu, DropdownMenu, ContextMenu } from './components/navigation';
+export { Navbar, Sidebar, Tabs, Breadcrumbs, Menu, DropdownMenu, ContextMenu, Stepper } from './components/navigation';
 export { Modal, Alert, Spinner, Tooltip, ProgressBar, SkeletonLoader, Toast, Drawer, Popover, Dropdown, CommandPalette } from './components/overlays';
 export { Heading, Text, Code } from './components/typography';
 export { Table, Pagination, Badge, Tag, List, Avatar, CodeBlock, Stat, CalendarGrid, Sparkline } from './components/data';
@@ -29,6 +30,8 @@ import type RadioGroup from './components/forms/RadioGroup.svelte';
 import type DatePicker from './components/forms/DatePicker.svelte';
 import type TimePicker from './components/forms/TimePicker.svelte';
 import type DateTimePicker from './components/forms/DateTimePicker.svelte';
+import type StepperForm from './components/forms/StepperForm.svelte';
+import type Step from './components/forms/Step.svelte';
 import type Card from './components/cards/Card.svelte';
 import type Tabs from './components/navigation/Tabs.svelte';
 import type Modal from './components/overlays/Modal.svelte';
@@ -37,6 +40,7 @@ import type Alert from './components/overlays/Alert.svelte';
 import type Tooltip from './components/overlays/Tooltip.svelte';
 import type Accordion from './components/utilities/Accordion.svelte';
 import type Sparkline from './components/data/Sparkline.svelte';
+import type Stepper from './components/navigation/Stepper.svelte';
 export type ButtonProps = ComponentProps<Button>;
 export type IconButtonProps = ComponentProps<IconButton>;
 export type FloatingActionButtonProps = ComponentProps<FloatingActionButton>;
@@ -50,6 +54,8 @@ export type RadioGroupProps = ComponentProps<RadioGroup>;
 export type DatePickerProps = ComponentProps<DatePicker>;
 export type TimePickerProps = ComponentProps<TimePicker>;
 export type DateTimePickerProps = ComponentProps<DateTimePicker>;
+export type StepperFormProps = ComponentProps<StepperForm>;
+export type StepProps = ComponentProps<Step>;
 export type CardProps = ComponentProps<Card>;
 export type TabsProps = ComponentProps<Tabs>;
 export type ModalProps = ComponentProps<Modal>;
@@ -58,3 +64,4 @@ export type AlertProps = ComponentProps<Alert>;
 export type TooltipProps = ComponentProps<Tooltip>;
 export type AccordionProps = ComponentProps<Accordion>;
 export type SparklineProps = ComponentProps<Sparkline>;
+export type StepperProps = ComponentProps<Stepper>;

package/dist/index.js

@@ -5,15 +5,15 @@
  */
 // Import theme CSS to ensure it's bundled
 import './theme.css';
-export const version = '0.6.0';
+export const version = '0.7.1';
 // ===== Button Components =====
 export { Button, IconButton, ButtonGroup, LinkButton, FloatingActionButton } from './components/buttons';
 // ===== Form Components =====
-export { Input, Textarea, Select, Checkbox, Switch, RadioGroup, RangeSlider, FileUpload, InputGroup, DatePicker, TimePicker, DateTimePicker } from './components/forms';
+export { Input, Textarea, Select, Checkbox, Switch, RadioGroup, RangeSlider, FileUpload, InputGroup, DatePicker, TimePicker, DateTimePicker, StepperForm, Step } from './components/forms';
 // ===== Layout Components =====
 export { Card, Panel, Grid, Container, SectionHeader, Divider } from './components/cards';
 // ===== Navigation Components =====
-export { Navbar, Sidebar, Tabs, Breadcrumbs, Menu, DropdownMenu, ContextMenu } from './components/navigation';
+export { Navbar, Sidebar, Tabs, Breadcrumbs, Menu, DropdownMenu, ContextMenu, Stepper } from './components/navigation';
 // ===== Overlay & Feedback Components =====
 export { Modal, Alert, Spinner, Tooltip, ProgressBar, SkeletonLoader, Toast, Drawer, Popover, Dropdown, CommandPalette } from './components/overlays';
 // ===== Typography Components =====

package/dist/theme.css

@@ -9,6 +9,7 @@
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-neutral-400: oklch(70.8% 0 0);
+    --color-white: #fff;
     --spacing: 0.25rem;
     --breakpoint-sm: 40rem;
     --breakpoint-md: 48rem;
@@ -43,6 +44,7 @@
     --radius-lg: 14px;
     --radius-xl: 18px;
     --radius-2xl: 24px;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --blur-md: 12px;
@@ -701,6 +703,9 @@
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
+  .-mt-3 {
+    margin-top: calc(var(--spacing) * -3);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -719,6 +724,9 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mr-4 {
+    margin-right: calc(var(--spacing) * 4);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -788,6 +796,9 @@
   .table {
     display: table;
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -848,9 +859,15 @@
   .max-h-\[400px\] {
     max-height: 400px;
   }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
   .min-h-\[100px\] {
     min-height: 100px;
   }
+  .w-0\.5 {
+    width: calc(var(--spacing) * 0.5);
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -1313,12 +1330,21 @@
   .bg-\[var\(--color-accent-overlay-20\)\] {
     background-color: var(--color-accent-overlay-20);
   }
+  .bg-\[var\(--color-accent-primary\)\] {
+    background-color: var(--color-accent-primary);
+  }
+  .bg-\[var\(--color-base-1\)\] {
+    background-color: var(--color-base-1);
+  }
   .bg-\[var\(--color-base-2\)\] {
     background-color: var(--color-base-2);
   }
   .bg-\[var\(--color-base-3\)\] {
     background-color: var(--color-base-3);
   }
+  .bg-\[var\(--color-error\)\] {
+    background-color: var(--color-error);
+  }
   .bg-\[var\(--color-error-overlay-15\)\] {
     background-color: var(--color-error-overlay-15);
   }
@@ -1451,6 +1477,9 @@
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -1545,6 +1574,9 @@
   .text-\[var\(--color-accent\)\] {
     color: var(--color-accent);
   }
+  .text-\[var\(--color-accent-primary\)\] {
+    color: var(--color-accent-primary);
+  }
   .text-\[var\(--color-accent-soft\)\] {
     color: var(--color-accent-soft);
   }
@@ -1563,9 +1595,15 @@
   .text-\[var\(--color-text-muted\)\] {
     color: var(--color-text-muted);
   }
+  .text-\[var\(--color-text-secondary\)\] {
+    color: var(--color-text-secondary);
+  }
   .text-\[var\(--color-text-soft\)\] {
     color: var(--color-text-soft);
   }
+  .text-\[var\(--color-text-tertiary\)\] {
+    color: var(--color-text-tertiary);
+  }
   .text-\[var\(--color-warning\)\] {
     color: var(--color-warning);
   }
@@ -1602,6 +1640,9 @@
   .text-warning {
     color: var(--color-warning);
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .lowercase {
     text-transform: lowercase;
   }
@@ -1636,6 +1677,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_0_0_4px_rgba\(139\,92\,246\,0\.3\)\] {
+    --tw-shadow: 0 0 0 4px var(--tw-shadow-color, rgba(139,92,246,0.3));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_0_12px_var\(--color-info-overlay-20\)\] {
     --tw-shadow: 0 0 12px var(--tw-shadow-color, var(--color-info-overlay-20));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1656,6 +1701,20 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-accent {
+    --tw-ring-color: var(--color-accent);
+  }
+  .ring-offset-2 {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  .ring-offset-base-0 {
+    --tw-ring-offset-color: var(--color-base-0);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1738,6 +1797,10 @@
     --tw-ease: var(--ease-luxe);
     transition-timing-function: var(--ease-luxe);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1997,6 +2060,11 @@
       margin-left: calc(var(--spacing) * 64);
     }
   }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrintel/villain-ui",
-  "version": "0.6.3",
+  "version": "0.7.1",
   "type": "module",
   "private": false,
   "description": "A luxury Svelte 5 component library with a distinctive dark aesthetic, built with TypeScript and Tailwind CSS v4",