Switch experimental

<script lang="ts">
  import * as Switch from '@odbd/svelte/switch'

  const settings = [
    {
      id: 'service-alerts',
      label: '서비스 알림',
      description: '장애와 배포 안내를 즉시 받아요.',
      checked: true,
    },
    {
      id: 'weekly-summary',
      label: '주간 요약',
      description: '매주 월요일 운영 리포트를 받아요.',
      checked: false,
    },
  ]
</script>

<div class="switch-demo">
  {#each settings as setting}
    <Switch.Root id={setting.id} defaultChecked={setting.checked}>
      <Switch.HiddenInput />
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <span class="switch-demo__copy">
        <Switch.Label>{setting.label}</Switch.Label>
        <span>{setting.description}</span>
      </span>
    </Switch.Root>
  {/each}
</div>

<style>
  .switch-demo {
    display: grid;
    max-width: 30rem;
    gap: var(--odbd-space-4);
  }

  .switch-demo__copy {
    display: grid;
    min-width: 0;
    gap: var(--odbd-space-1);
  }

  .switch-demo__copy > span:not(.odbd-switch__label) {
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }
</style>