added some more Stepper UI sugar

src/lib/components/cleanup/Flows.svelte

@@ -1,79 +0,0 @@
-<script>
-	import { Stepper, Step } from '@skeletonlabs/skeleton';
-
-	let step = 1;
-	let name = '';
-	let age = '';
-	let flowData = {};
-
-	const handleNextStep = () => {
-		if (step === 1 && name.trim() === '') {
-			alert('Please enter a valid name.');
-			return;
-		}
-
-		if (step === 2 && age.trim() === '') {
-			alert('Please enter a valid age.');
-			return;
-		}
-
-		step += 1;
-	};
-
-	const handlePrevStep = () => {
-		step -= 1;
-	};
-
-	const handleConfirm = () => {
-		flowData = {
-			name,
-			age
-		};
-		alert('Flow data confirmed: ' + JSON.stringify(flowData));
-	};
-
-	const handleReset = () => {
-		step = 1;
-		name = '';
-		age = '';
-		flowData = {};
-	};
-</script>
-
-<Stepper start={step - 1}>
-	<Step>
-		<svelte:fragment slot="header">Step 1: Name</svelte:fragment>
-		<div>
-			<label for="name">Name:</label>
-			<input class="text-black" type="text" id="name" bind:value={name} />
-		</div>
-		<div slot="navigation">
-			<button class="btn variant-ghost" on:click={handleNextStep}>Next</button>
-		</div>
-	</Step>
-	<Step>
-		<svelte:fragment slot="header">Step 2: Age</svelte:fragment>
-		<div>
-			<label for="age">Age:</label>
-			<input class="text-black" type="number" id="age" bind:value={age} />
-		</div>
-		<div slot="navigation">
-			<button class="btn variant-ghost" on:click={handlePrevStep}>Previous</button>
-			<button class="btn variant-ghost" on:click={handleNextStep}>Next</button>
-		</div>
-	</Step>
-	<Step>
-		<svelte:fragment slot="header">Step 3: Confirm Summary</svelte:fragment>
-		<div>
-			<h3>Confirm Summary:</h3>
-			<p>Name: {name}</p>
-			<p>Age: {age}</p>
-		</div>
-		<div slot="navigation">
-			<button class="btn variant-ghost" on:click={handlePrevStep}>Previous</button>
-			<button class="btn variant-ghost-primary" on:click={handleConfirm}>Confirm</button>
-		</div>
-	</Step>
-</Stepper>
-
-<button on:click={handleReset}>Reset</button>

src/lib/components/refactor/ComposerForm.svelte

@@ -8,13 +8,17 @@
 	import SelectInput from './inputFields/SelectInput.svelte';
 	import TextAreaInput from './inputFields/TextAreaInput.svelte';
 	import NumberInput from './inputFields/NumberInput.svelte';
-	import { derived } from 'svelte/store';
+	import { derived, writable } from 'svelte/store';
-	import { createUser } from './userService';
+	import Stepper from './Stepper.svelte';
 
 	export let me;
 
 	const { fields, validators } = $me.context;
 
+	let stepperState = writable({ current: 0, total: fields.length });
+
+	$: stepperState.update((state) => ({ ...state, current: $state.context.currentField }));
+
 	let initialFormData = fields.reduce((acc, field) => {
 		acc[field.name] = field.placeholder;
 		return acc;
@@ -169,6 +173,10 @@
 						</p>
 					{/if}
 				</div>
+				<div class="py-4">
+					<Stepper {stepperState} stepStateName={fields[$state.context.currentField].name} />
+				</div>
+
 				{#if fields[$state.context.currentField].type === 'text'}
 					<TextInput {childInput} />
 				{:else if fields[$state.context.currentField].type === 'email'}

src/lib/components/refactor/Stepper.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { getContext } from 'svelte';
+
+	export let stepperState;
+	export let stepStateName = '';
+
+	const cHeader = 'flex items-center border-t mt-[15px]';
+	const cHeaderStep = '-mt-[15px] transition-all duration-300';
+	const active = 'variant-filled';
+	const badge = 'variant-filled-surface';
+
+	// Context
+	const stepTerm = getContext('stepTerm') || 'Step';
+
+	// State
+	$: isActive = (step) => step === $stepperState.current;
+
+	// Reactive
+	$: classesHeader = `${cHeader} `;
+	$: classesHeaderStep = `${cHeaderStep}`;
+	$: classesBadge = (step) => (isActive(step) ? active : badge);
+</script>
+
+<!-- Header -->
+{#if $stepperState.total}
+	<header class="stepper-header {classesHeader}" transition:fade|local={{ duration: 100 }}>
+		{#each Array.from(Array($stepperState.total).keys()) as step}
+			<div class="stepper-header-step {classesHeaderStep}" class:flex-1={isActive(step)}>
+				<span class="badge {classesBadge(step)}">
+					{isActive(step) ? `${stepStateName}` : ` ${step + 1}`}
+				</span>
+			</div>
+		{/each}
+	</header>
+{/if}