DateRangePicker

---
import { DatePicker, DateRangePicker } from '@santi020k/lumen-astro'
---

{/* The runtime keeps the range consistent: picking a start date sets the
    minimum of the end input, and vice versa. */}
<DateRangePicker>
  <DatePicker aria-label="Start date" value="2026-07-06" />
  <DatePicker aria-label="End date" value="2026-07-10" />
</DateRangePicker>

import { DatePicker, DateRangePicker } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    {/* The runtime keeps the range consistent: picking a start date sets the
        minimum of the end input, and vice versa. */}
    <DateRangePicker>
      <DatePicker aria-label="Start date" defaultValue="2026-07-06" />
      <DatePicker aria-label="End date" defaultValue="2026-07-10" />
    </DateRangePicker>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

{/* The runtime keeps the range consistent: picking a start date sets the
    minimum of the end input, and vice versa. */}
<lumen-date-range-picker>
  <lumen-date-picker aria-label="Start date" value="2026-07-06"></lumen-date-picker>
  <lumen-date-picker aria-label="End date" value="2026-07-10"></lumen-date-picker>
</lumen-date-range-picker>