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

	let toggled = false;
</script>

<Toggle bind:on={toggled} />

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

	let toggled = false;
</script>

<Toggle bind:on={toggled}>
	<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';

	let toggled = false;
</script>

<Toggle bind:on={toggled}>
	<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';

	let toggled = false;
</script>

<Toggle bind:on={toggled}>
	<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 toggled = false;
	let error: string | undefined = 'Here is an error!';

	$: if (toggled) {
		error = undefined;
	} else {
		error = 'Here is an error!';
	}
</script>

<Toggle {error} bind:on={toggled} />

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

	let toggled = false;
</script>

<Toggle bind:on={toggled}>
	<Toggle.LeftIcon slot="left-icon" data={brightness_5} class="text-white" />
	<Toggle.RightIcon slot="right-icon" data={brightness_4} />
</Toggle>