<script lang="ts">
	import { Toggle } from 'stwui';
</script>

<Toggle name="toggle-1" />

<script lang="ts">
	import { Toggle } from 'stwui';
</script>

<Toggle name="toggle-2">
	<Toggle.ContentLeft slot="content-left">
		<Toggle.ContentLeft.Label slot="label">Left Label</Toggle.ContentLeft.Label>
	</Toggle.ContentLeft>
</Toggle>

<script lang="ts">
	import { Toggle } from 'stwui';
</script>

<Toggle name="toggle-4">
	<Toggle.ContentLeft slot="content-left">
		<Toggle.ContentLeft.Label slot="label">Left Label</Toggle.ContentLeft.Label>
	</Toggle.ContentLeft>
	<Toggle.ContentRight slot="content-right">
		<Toggle.ContentRight.Label slot="label">Right Label</Toggle.ContentRight.Label>
	</Toggle.ContentRight>
</Toggle>

<script lang="ts">
	import { Toggle } from 'stwui';
</script>

<Toggle name="toggle-5">
	<Toggle.ContentRight slot="content-right">
		<Toggle.ContentRight.Label slot="label">Right Label</Toggle.ContentRight.Label>
		<Toggle.ContentRight.Description slot="description"
			>(10% off)</Toggle.ContentRight.Description
		>
	</Toggle.ContentRight>
</Toggle>

<script lang="ts">
	import { Toggle } from 'stwui';

	let on = false;
	let error: string | undefined = 'Here is an error!';
	$: if (on) {
		error = undefined;
	} else {
		error = 'Here is an error!';
	}
</script>

<Toggle name="toggle" {error} bind:on />

<script lang="ts">
	import { Toggle } from 'stwui';
</script>

<Toggle name="toggle">
	<Toggle.LeftIcon slot="left-icon" data={brightness_5} class="text-white" />
	<Toggle.RightIcon slot="right-icon" data={brightness_4} />
</Toggle>