Checkbox experimental

<script lang="ts">
  import { Checkbox, CheckboxGroup } from '@odbd/svelte'

  let value = $state(['email'])
</script>

<div class="preview-stack">
  <Checkbox label="Receive updates" />
  <Checkbox label="Enabled by default" checked />

  <CheckboxGroup {value} onValueChange={(next: string[]) => (value = next)}>
    <Checkbox value="email" label="이메일 알림" />
    <Checkbox value="sms" label="SMS 알림" />
    <Checkbox value="push" label="푸시 알림" />
  </CheckboxGroup>

  <p class="preview-note">선택한 채널: {value.join(', ') || '없음'}</p>
</div>

<style>
  .preview-note {
    margin: 0;
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }
</style>