Input Date

---
import InputDate from "../InputDate.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <InputDate id="astro-demo-input-date-default" />
</div>

<script lang="ts">
  import InputDate from "../input-date.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let value = $state<Date | null>(null);
</script>

<div class={stack({ gap: "md" })}>
  <InputDate bind:value />
  <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
    value: {value ? value.toISOString().slice(0, 10) : "(null)"}
  </p>
</div>

---
import InputDateRange from "../InputDateRange.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <InputDateRange id="astro-demo-input-date-range" />
</div>

<script lang="ts">
  import InputDateRange from "../input-date-range.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let start = $state<Date | null>(null);
  let end = $state<Date | null>(null);
</script>

<div class={stack({ gap: "md" })}>
  <InputDateRange bind:start bind:end />
  <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
    start: {start ? start.toISOString().slice(0, 10) : "(null)"} — end:
    {end ? end.toISOString().slice(0, 10) : "(null)"}
  </p>
</div>