Button groups

<script lang="ts">
	import { ButtonGroup, IconButton } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<ButtonGroup aria-label="Playback">
	<IconButton variant="tonal" width="narrow" size="m" title="Previous">
		<Icon>skip_previous</Icon>
	</IconButton>
	<IconButton variant="filled" width="wide" size="m" title="Play">
		<Icon>play_arrow</Icon>
	</IconButton>
	<IconButton variant="tonal" width="narrow" size="m" title="Next">
		<Icon>skip_next</Icon>
	</IconButton>
</ButtonGroup>

<script lang="ts">
	import { Button, ButtonGroup } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'

	const places = [
		{ value: 'work', label: 'Work', icon: 'work' },
		{ value: 'restaurant', label: 'Restaurant', icon: 'restaurant' },
		{ value: 'coffee', label: 'Coffee', icon: 'coffee' },
		{ value: 'home', label: 'Home', icon: 'home' },
	]
	let place = $state('work')
</script>

<ButtonGroup
	variant="connected"
	selection="single"
	required
	name="place"
	bind:value={place}
	aria-label="Place"
>
	{#each places as { value, label, icon } (value)}
		<Button variant="tonal" {value}>
			{#snippet start()}
				<Icon>{icon}</Icon>
			{/snippet}
			{label}
		</Button>
	{/each}
</ButtonGroup>

<script lang="ts">
	import { Button, ButtonGroup } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'

	let styles = $state(['bold'])
</script>

<ButtonGroup
	variant="connected"
	selection="multiple"
	name="style"
	bind:value={styles}
	aria-label="Text style"
>
	<Button variant="tonal" value="bold">
		{#snippet start()}
			<Icon>format_bold</Icon>
		{/snippet}
		Bold
	</Button>
	<Button variant="tonal" value="italic">
		{#snippet start()}
			<Icon>format_italic</Icon>
		{/snippet}
		Italic
	</Button>
	<Button variant="tonal" value="underline">
		{#snippet start()}
			<Icon>format_underlined</Icon>
		{/snippet}
		Underline
	</Button>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, IconButton } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'

	const alignments = [
		{ title: 'Align left', icon: 'format_align_left' },
		{ title: 'Align center', icon: 'format_align_center' },
		{ title: 'Align right', icon: 'format_align_right' },
	]
</script>

{#each ['xs', 'm'] as const as size (size)}
	<ButtonGroup variant="connected" aria-label="Alignment, size {size}">
		{#each alignments as alignment (alignment.icon)}
			<IconButton {size} variant="tonal" title={alignment.title}>
				<Icon>{alignment.icon}</Icon>
			</IconButton>
		{/each}
	</ButtonGroup>
{/each}

<script lang="ts">
	import { Button, ButtonGroup } from 'noph-ui'
</script>

<ButtonGroup expandedRatio={0.5} aria-label="Rating">
	<Button variant="tonal">Bad</Button>
	<Button variant="tonal">Fine</Button>
	<Button variant="tonal">Great</Button>
</ButtonGroup>

<script lang="ts">
	import { Button, ButtonGroup } from 'noph-ui'
</script>

<ButtonGroup
	variant="connected"
	aria-label="Custom button group"
	--np-button-group-space="0.25rem"
	--np-button-group-inner-corner="1rem"
>
	<Button variant="tonal">Start</Button>
	<Button variant="tonal">Middle</Button>
	<Button variant="tonal">End</Button>
</ButtonGroup>