<script lang="ts">
	import { Switch } from 'bits-ui';

	let {
		checked = $bindable(false),
		disabled = false,
		class: className = '',
		onchange,
	}: {
		checked?: boolean;
		disabled?: boolean;
		class?: string;
		onchange?: (checked: boolean) => void;
	} = $props();
</script>

<Switch.Root
	class="saas-switch {className}"
	{disabled}
	{checked}
	onCheckedChange={(next) => {
		checked = next;
		onchange?.(next);
	}}
>
	<Switch.Thumb class="saas-switch-thumb" />
</Switch.Root>
