Radio Group experimental

<script lang="ts">
  import * as RadioGroup from '@odbd/svelte/radio-group'

  const notificationScopes = [
    { value: 'all', label: '전체 알림', description: '중요 업데이트와 운영 알림을 모두 받아요.' },
    { value: 'important', label: '중요 알림만', description: '결제, 보안, 장애 알림만 받아요.' },
    { value: 'none', label: '알림 끄기', description: '서비스 화면 안에서만 확인해요.' },
  ]
</script>

<RadioGroup.Root defaultValue="important" name="notification-scope" style="max-width: 30rem;">
  <RadioGroup.Label>알림 범위</RadioGroup.Label>
  {#each notificationScopes as scope}
    <RadioGroup.Item value={scope.value}>
      <RadioGroup.ItemControl />
      <RadioGroup.ItemText>
        {scope.label}
        <span class="radio-group-description">{scope.description}</span>
      </RadioGroup.ItemText>
      <RadioGroup.ItemHiddenInput />
    </RadioGroup.Item>
  {/each}
</RadioGroup.Root>

<style>
  .radio-group-description {
    display: block;
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
    font-weight: 400;
  }
</style>