Standalone Date Picker

<script lang="ts">
  import * as DatePicker from '@odbd/svelte/date-picker'
  import { parseDate } from '@odbd/svelte/date-picker'

  const selectedDate = parseDate('2026-06-12')
</script>

<div class="examples-standalone-date">
  <DatePicker.Root
    inline
    defaultOpen
    defaultValue={[selectedDate]}
    defaultFocusedValue={selectedDate}
    locale="ko-KR"
    startOfWeek={1}
    fixedWeeks
    class="examples-standalone-date__picker"
  >
    <div class="examples-standalone-date__summary">
      <DatePicker.Label>배포일</DatePicker.Label>
      <DatePicker.ValueText />
    </div>

    <DatePicker.Content>
      <DatePicker.View view="day">
        <DatePicker.Context>
          {#snippet render(api)}
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger aria-label="이전 달">‹</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger aria-label="다음 달">›</DatePicker.NextTrigger>
            </DatePicker.ViewControl>

            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  {#each api().weekDays as weekDay}
                    <DatePicker.TableHeader>{weekDay.narrow}</DatePicker.TableHeader>
                  {/each}
                </DatePicker.TableRow>
              </DatePicker.TableHead>
              <DatePicker.TableBody>
                {#each api().weeks as week}
                  <DatePicker.TableRow>
                    {#each week as day}
                      <DatePicker.TableCell value={day}>
                        <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                      </DatePicker.TableCell>
                    {/each}
                  </DatePicker.TableRow>
                {/each}
              </DatePicker.TableBody>
            </DatePicker.Table>
          {/snippet}
        </DatePicker.Context>
      </DatePicker.View>

      <!-- PresetTrigger는 전부 range 프리셋이라 단일 선택 picker를 2개 값으로
           오염시킨다 — selectToday()로 단일 날짜를 선택한다 -->
      <DatePicker.Context>
        {#snippet render(api)}
          <div class="examples-standalone-date__actions">
            <button
              type="button"
              class="odbd-button"
              data-variant="ghost"
              data-size="sm"
              onclick={() => api().selectToday()}>오늘</button
            >
            <DatePicker.ClearTrigger>지우기</DatePicker.ClearTrigger>
          </div>
        {/snippet}
      </DatePicker.Context>
    </DatePicker.Content>
  </DatePicker.Root>
</div>

<style>
  .examples-standalone-date {
    display: grid;
    width: min(100%, 22rem);
    place-items: center;
  }

  .examples-standalone-date__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--odbd-space-3);
  }

  .examples-standalone-date__summary :global(.odbd-date-picker__value-text) {
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }

  .examples-standalone-date :global(.odbd-date-picker__content) {
    width: 100%;
    box-shadow: var(--odbd-shadow-sm);
  }

  .examples-standalone-date__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--odbd-space-2);
  }

  @media (max-width: 420px) {
    .examples-standalone-date {
      width: min(100%, 19rem);
    }

    .examples-standalone-date :global(.odbd-date-picker__table-cell-trigger) {
      width: 2rem;
      height: 2rem;
    }
  }
</style>