Stepper

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { setStepperContext } from './ctx';
4	import type { Snippet } from 'svelte';
5 
6	let {
7		value = $bindable(0),
8		orientation = 'horizontal',
9		class: className,
10		children
11	}: {
12		value: number;
13		orientation?: 'horizontal' | 'vertical';
14		class?: string;
15		children: Snippet;
16	} = $props();
17 
18	setStepperContext({
19		activeStep: () => value,
20		setStep: (s: number) => {
21			value = s;
22		},
23		orientation: () => orientation
24	});
25</script>
26 
27<div
28	class={cn(
29		'flex w-full gap-4',
30		orientation === 'vertical' ? 'flex-col' : 'flex-row items-start justify-between',
31		className
32	)}
33>
34	{@render children()}
35</div>