DatePicker experimental

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

<DatePicker.Root locale="ko-KR" style="max-width: 18rem;">
  <DatePicker.Label>예약 날짜</DatePicker.Label>
  <DatePicker.Control>
    <DatePicker.Input />
    <DatePicker.Trigger aria-label="달력 열기">
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        stroke="currentColor"
        stroke-width="1.4"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <rect x="2.5" y="3" width="11" height="10.5" rx="1.5" />
        <path d="M2.5 6.25h11M5.25 1.75v2.5M10.75 1.75v2.5" />
      </svg>
    </DatePicker.Trigger>
  </DatePicker.Control>
  <DatePicker.Positioner>
    <DatePicker.Content>
      <DatePicker.View view="day">
        <DatePicker.Context>
          {#snippet render(api)}
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>‹</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>›</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  {#each api().weekDays as weekDay}
                    <DatePicker.TableHeader>{weekDay.short}</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>
            <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
              <DatePicker.PresetTrigger value="thisMonth">이번 달</DatePicker.PresetTrigger>
              <DatePicker.ClearTrigger>지우기</DatePicker.ClearTrigger>
            </div>
          {/snippet}
        </DatePicker.Context>
      </DatePicker.View>
    </DatePicker.Content>
  </DatePicker.Positioner>
</DatePicker.Root>