Drawer experimental

<script lang="ts">
  import { Checkbox } from '@odbd/svelte'
  import * as Drawer from '@odbd/svelte/drawer'
  import * as Select from '@odbd/svelte/select'
  import { createListCollection } from '@odbd/svelte/select'

  const times = createListCollection({ items: ['오전 9시', '오후 1시', '오후 6시'] })
</script>

<div class="drawer-demo">
  <Drawer.Root>
    <Drawer.Trigger class="odbd-button" data-variant="solid" data-size="md">
      알림 설정 열기
    </Drawer.Trigger>
    <Drawer.Backdrop />
    <Drawer.Positioner>
      <Drawer.Content>
        <Drawer.Grabber>
          <Drawer.GrabberIndicator />
        </Drawer.Grabber>
        <div class="drawer-demo__header">
          <div>
            <Drawer.Title>알림 설정</Drawer.Title>
            <Drawer.Description>팀 알림을 받을 채널과 시간을 조정하세요.</Drawer.Description>
          </div>
          <Drawer.CloseTrigger
            class="odbd-button"
            data-variant="ghost"
            data-size="icon"
            aria-label="닫기"
          >
            ×
          </Drawer.CloseTrigger>
        </div>

        <div class="drawer-demo__body">
          <Checkbox label="이메일 알림" checked />
          <Checkbox label="긴급 알림" />
          <div class="drawer-demo__field">
            <Select.Root collection={times} defaultValue={['오전 9시']}>
              <Select.Label>요약 시간</Select.Label>
              <Select.Control>
                <Select.Trigger>
                  <Select.ValueText />
                  <Select.Indicator>▾</Select.Indicator>
                </Select.Trigger>
              </Select.Control>
              <Select.Positioner>
                <Select.Content>
                  {#each times.items as item}
                    <Select.Item {item}>
                      <Select.ItemText>{item}</Select.ItemText>
                      <Select.ItemIndicator>✓</Select.ItemIndicator>
                    </Select.Item>
                  {/each}
                </Select.Content>
              </Select.Positioner>
              <Select.HiddenSelect />
            </Select.Root>
          </div>
        </div>

        <div class="drawer-demo__actions">
          <Drawer.CloseTrigger class="odbd-button" data-variant="outline" data-size="md">
            취소
          </Drawer.CloseTrigger>
          <button type="button" class="odbd-button" data-variant="solid" data-size="md">
            저장
          </button>
        </div>
      </Drawer.Content>
    </Drawer.Positioner>
  </Drawer.Root>
</div>

<style>
  .drawer-demo {
    display: grid;
    justify-items: center;
  }

  .drawer-demo :global([data-part='trigger']) {
    inline-size: fit-content;
    min-inline-size: 12rem;
    padding-inline: var(--odbd-space-5);
  }

  .drawer-demo__header,
  .drawer-demo__actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--odbd-space-3);
  }

  .drawer-demo__body {
    display: grid;
    gap: var(--odbd-space-3);
    max-width: 22rem;
  }

  .drawer-demo__field {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--odbd-space-3);
  }

  .drawer-demo__actions {
    justify-content: flex-end;
  }
</style>