@dorsk/tsumikit

<script lang="ts">
	import { Button, Cluster, Text, toasts } from '@dorsk/tsumikit';

	let saving = $state(false);
	async function save() {
		saving = true;
		await new Promise((r) => setTimeout(r, 900));
		saving = false;
		toasts.show('Workspace settings saved');
	}
</script>

<Text tone="muted" size="sm">Changes apply to all 12 members of the workspace.</Text>
<Cluster justify="flex-end">
	<Button variant="ghost">Cancel</Button>
	<Button>Reset to defaults</Button>
	<Button variant="primary" loading={saving} onclick={save}>Save changes</Button>
</Cluster>

<script lang="ts">
	import { Button, Cluster, Text } from '@dorsk/tsumikit';
</script>

<Cluster>
	<Button>Default</Button>
	<Button variant="primary">Primary</Button>
	<Button variant="ghost">Ghost</Button>
	<Button variant="danger">Delete</Button>
	<Button variant="link">Learn more</Button>
</Cluster>
<Cluster>
	<Button tone="accent">Notify me</Button>
	<Button tone="success">Approve</Button>
	<Button tone="info">Cold start</Button>
	<Button tone="warn">Retry</Button>
	<Button tone="warn" control>Send <Text numeric>0:09</Text></Button>
</Cluster>
<Cluster align="center">
	<Button size="sm">Small</Button>
	<Button size="md">Medium</Button>
	<Button size="lg">Large</Button>
	<Button control>Control height</Button>
	<Button pill>Pill</Button>
	<Button pill variant="primary" size="sm">Pill small</Button>
</Cluster>

<script lang="ts">
	import { Button, Cluster } from '@dorsk/tsumikit';

	let starred = $state(false);
</script>

<Cluster>
	<Button disabled>Disabled</Button>
	<Button variant="primary" loading>Deploying</Button>
	<Button pressed={starred} onclick={() => (starred = !starred)}>{starred ? 'Starred' : 'Star'}</Button>
	<Button count={3}>Inbox</Button>
	<Button variant="primary" count={12}>Apply filters</Button>
	<Button variant="danger" count={120}>Failed jobs</Button>
	<Button tone="warn" count={1500} countMax={999}>Queued</Button>
	<Button count={0}>Zero hides</Button>
</Cluster>
<Button block variant="primary">Continue to checkout</Button>
<Cluster>
	<Button>A label long enough to show how a button behaves when its text wraps onto a second line</Button>
	<Button shrink={false}>No shrink</Button>
</Cluster>

<script lang="ts">
	import { Button, Cluster } from '@dorsk/tsumikit';
</script>

<Cluster>
	<Button layout="stacked" size="sm" glyph="■" shortcut="1" tone="danger">Disarm</Button>
	<Button layout="stacked" size="sm" glyph="⇢" shortcut="2">Go zone</Button>
	<Button layout="stacked" size="sm" glyph="$" shortcut="3" disabled>Sell all</Button>
	<Button layout="stacked" size="sm" glyph="☰" shortcut="G" pressed count={2}>Group</Button>
	<Button layout="stacked" glyph="search" shortcut="F">Find</Button>
	<Button layout="stacked" size="lg" glyph="star" shortcut="S">Star</Button>
</Cluster>
<Cluster>
	<Button href="https://github.com/DorskFR/tsumikit" target="_blank">Open repository</Button>
	<Button as="a" href="#button" variant="ghost">Back to top of section</Button>
	<Button href="#nowhere" disabled>Inactive link</Button>
</Cluster>

<script lang="ts">
	import { Button, Cluster } from '@dorsk/tsumikit';

	const variants = ['default', 'primary', 'ghost', 'danger'] as const;
	const tones = ['none', 'accent', 'success', 'info', 'warn', 'danger'] as const;
</script>

{#each variants as variant (variant)}
	<Cluster>
		{#each tones as tone (tone)}
			<Button {variant} {tone}>{variant}/{tone}</Button>
		{/each}
	</Cluster>
{/each}

<script lang="ts">
	import { FontScalePicker, SoundSettings, Text, ThemePicker, Toolbar } from '@dorsk/tsumikit';
</script>

<Toolbar label="Preferences" density="compact">
	<Text size="sm" tone="muted">Preferences</Text>
	<SoundSettings size="sm" />
	<FontScalePicker box="sm" />
	<ThemePicker box="sm" />
</Toolbar>

<script lang="ts">
	import { SoundSettings } from '@dorsk/tsumikit';
</script>

<SoundSettings size="sm" />
<SoundSettings size="md" />
<SoundSettings size="md" variant="primary" label="Audio" />

<script lang="ts">
	import { Button, Cluster, SoundSettings, Text, sound, type SoundName } from '@dorsk/tsumikit';

	const palette: { name: SoundName; hint: string }[] = [
		{ name: 'click', hint: 'buttons, selections' },
		{ name: 'toggle-on', hint: 'switch on' },
		{ name: 'toggle-off', hint: 'switch off' },
		{ name: 'open', hint: 'modal, menu, drawer' },
		{ name: 'close', hint: 'dismiss' },
		{ name: 'success', hint: 'ok toast, copied' },
		{ name: 'error', hint: 'error toast' },
		{ name: 'tick', hint: 'slider step' },
	];
</script>

<Cluster align="center">
	<SoundSettings size="sm" />
	<Text size="sm" tone="muted">
		{sound.muted === 'off'
			? 'Turn sounds on to audition the palette.'
			: sound.muted === 'reduced-motion'
				? 'Reduced motion: only success and error play.'
				: `Volume ${Math.round(sound.volume * 100)}%`}
	</Text>
</Cluster>
<Cluster>
	{#each palette as { name, hint } (name)}
		<Button sound={false} title={hint} onclick={() => sound.play(name)}>{name}</Button>
	{/each}
</Cluster>