Basic date selector

<!--
  Известное расхождение сетки календаря (react-day-picker `<table>` vs
  reka-ui Calendar на `<div>`) — задокументировано в docs/PORTING.md §5/§13
  для примитива `date-selector`; здесь `DateSelector` смонтирован напрямую
  (не за закрытым попапом), поэтому расхождение ожидаемо и здесь.
-->
<script setup lang="ts">
import { DateSelector } from "@/components/reui/date-selector"
import { Card, CardContent } from "@/components/ui/card"

const value = undefined
</script>

<template>
  <div class="flex w-full flex-col items-center gap-5">
    <Card class="p-0">
      <CardContent class="p-3">
        <DateSelector :value="value" label="Due date" input-hint="Try: 2025, Q4, 05/10/2025" />
      </CardContent>
    </Card>

    <pre v-if="value" class="bg-muted w-full overflow-auto rounded-md p-3 font-mono text-xs md:w-[500px]">{{ JSON.stringify(value, null, 2) }}</pre>
    <div v-else class="text-muted-foreground text-sm">
      No value selected. Select a date to see the debug information.
    </div>
  </div>
</template>