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

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

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

<Root.Checkbox.Root
  bind:ref
  bind:checked
  data-slot="checkbox"
  class={cn(
    'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
    className
  )}
  {...restProps}
>
  {#snippet children({ checked })}
    <div class="flex items-center justify-center text-current transition-none">
      {#if checked}
        <CheckIcon class="size-3.5" />
      {/if}
    </div>
  {/snippet}
</Root.Checkbox.Root>