Choicebox

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { setChoiceboxContext } from './ctx';
4	import type { Snippet } from 'svelte';
5 
6	let {
7		value = $bindable(),
8		class: className,
9		children,
10		name,
11		onValueChange
12	}: {
13		value?: string;
14		class?: string;
15		children: Snippet;
16		name?: string;
17		onValueChange?: (value: string) => void;
18	} = $props();
19 
20	setChoiceboxContext({
21		activeValue: () => value,
22		setActive: (v) => {
23			value = v;
24			if (onValueChange) {
25				onValueChange(v);
26			}
27		}
28	});
29</script>
30 
31<div class={cn('flex flex-col gap-3', className)} role="radiogroup" aria-label={name}>
32	{@render children()}
33	{#if name}
34		<input type="hidden" {name} {value} />
35	{/if}
36</div>