Toggle Group

<script lang="ts">
	import { ToggleGroup } from 'bits-ui';
	import { AlignCenter, AlignLeft, AlignRight } from '@lucide/svelte';

	let alignment = $state('left');
</script>

<div class="grid justify-items-center gap-4">
	<ToggleGroup.Root
		type="single"
		bind:value={alignment}
		aria-label="Text alignment"
		class="panel flex w-fit items-center gap-1 p-1"
	>
		<ToggleGroup.Item
			value="left"
			aria-label="Align left"
			class="inline-flex size-10 items-center justify-center rounded-lg text-ink-400 hover:bg-ink-800 hover:text-ink-50 data-[state=on]:bg-brand-500 data-[state=on]:text-ink-950"
		>
			<AlignLeft class="size-5" />
		</ToggleGroup.Item>
		<ToggleGroup.Item
			value="center"
			aria-label="Align center"
			class="inline-flex size-10 items-center justify-center rounded-lg text-ink-400 hover:bg-ink-800 hover:text-ink-50 data-[state=on]:bg-brand-500 data-[state=on]:text-ink-950"
		>
			<AlignCenter class="size-5" />
		</ToggleGroup.Item>
		<ToggleGroup.Item
			value="right"
			aria-label="Align right"
			class="inline-flex size-10 items-center justify-center rounded-lg text-ink-400 hover:bg-ink-800 hover:text-ink-50 data-[state=on]:bg-brand-500 data-[state=on]:text-ink-950"
		>
			<AlignRight class="size-5" />
		</ToggleGroup.Item>
	</ToggleGroup.Root>
	<p class="chip">Alignment: {alignment || 'none'}</p>
</div>

<script lang="ts">
	import { ToggleGroup } from 'bits-ui';
	import { Bold, Italic, Strikethrough, Underline } from '@lucide/svelte';

	let formats = $state<string[]>(['bold', 'underline']);
	const previewClass = $derived([
		formats.includes('bold') ? 'font-bold' : '',
		formats.includes('italic') ? 'italic' : '',
		formats.includes('underline') ? 'underline' : '',
		formats.includes('strike') ? 'line-through' : ''
	].filter(Boolean).join(' '));
</script>

<div class="grid gap-4">
	<ToggleGroup.Root
		type="multiple"
		bind:value={formats}
		aria-label="Text formatting"
		class="panel flex w-fit items-center gap-1 p-1"
	>
		<ToggleGroup.Item value="bold" aria-label="Bold" class="inline-flex size-10 items-center justify-center rounded-lg text-ink-400 hover:bg-ink-800 data-[state=on]:bg-brand-500 data-[state=on]:text-ink-950">
			<Bold class="size-5" />
		</ToggleGroup.Item>
		<ToggleGroup.Item value="italic" aria-label="Italic" class="inline-flex size-10 items-center justify-center rounded-lg text-ink-400 hover:bg-ink-800 data-[state=on]:bg-brand-500 data-[state=on]:text-ink-950">
			<Italic class="size-5" />
		</ToggleGroup.Item>
		<ToggleGroup.Item value="underline" aria-label="Underline" class="inline-flex size-10 items-center justify-center rounded-lg text-ink-400 hover:bg-ink-800 data-[state=on]:bg-brand-500 data-[state=on]:text-ink-950">
			<Underline class="size-5" />
		</ToggleGroup.Item>
		<ToggleGroup.Item value="strike" aria-label="Strikethrough" class="inline-flex size-10 items-center justify-center rounded-lg text-ink-400 hover:bg-ink-800 data-[state=on]:bg-brand-500 data-[state=on]:text-ink-950">
			<Strikethrough class="size-5" />
		</ToggleGroup.Item>
	</ToggleGroup.Root>

	<div class="rounded-lg border border-ink-800 bg-ink-950/60 p-4 text-sm text-ink-200">
		<p class={previewClass}>Ship precise interfaces, not piles of configuration.</p>
		<p class="muted mt-2 text-xs">Active: {formats.length ? formats.join(', ') : 'none'}</p>
	</div>
</div>