Radio Group

<script lang="ts">
	import { RadioGroup, RadioGroupItem } from 'lithesome';

	const items = [
		{ value: 'aang', label: 'Avatar Aang' },
		{ value: 'zuko', label: 'Firelord Zuko' },
		{ value: 'toph', label: 'Greatest Earthbender' },
		{ value: 'azula', label: 'Firebending Prodigy', disabled: true },
		{ value: 'iroh', label: 'Uncle Iroh' }
	];
	let value = $state<string>('zuko');
</script>

<RadioGroup bind:value class="space-y-4">
	{#each items as { value, label, disabled }}
		<RadioGroupItem
			{value}
			{disabled}
			class={({ disabled }) => [
				'group flex cursor-pointer items-center gap-2',
				disabled && 'pointer-events-none opacity-40'
			]}
		>
			{#snippet children({ selected })}
				<div
					class={[
						'flex size-6 rounded-full border',
						selected
							? 'border-teal-500'
							: ['border-zinc-600 group-hover:border-zinc-900', 'dark:border-zinc-400 dark:group-hover:border-zinc-200']
					]}
				>
					{#if selected}
						<div class="m-auto size-4 rounded-full bg-teal-500"></div>
					{/if}
				</div>
				<span class="select-none">
					{label}
				</span>
			{/snippet}
		</RadioGroupItem>
	{/each}
</RadioGroup>

<span class="site-value">{value}</span>