<script lang="ts">
  import Root from 'bits-ui';
  import { cn, type WithoutChildren } from '$lib/utils/cn.svelte.js';
  import type { Snippet } from 'svelte';

  type Props = WithoutChildren<Root.Switch.RootProps> & {
    children?: Snippet;
    class?: string;
  };

  let {
    ref = $bindable(null),
    checked = $bindable(false),
    class: className,
    children,
    ...restProps
  }: Props = $props();
</script>

<Root.Switch.Root
  bind:ref
  bind:checked
  data-slot="switch"
  class={cn(
    'peer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] data-[state=unchecked]:bg-input data-[state=checked]:bg-primary disabled:cursor-not-allowed disabled:opacity-50',
    className
  )}
  {...restProps}
>
  <Root.Switch.Thumb
    data-slot="switch-thumb"
    class="bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
  >
    {@render children?.()}
  </Root.Switch.Thumb>
</Root.Switch.Root>