Date Range Picker in five frameworks

import * as React from 'react'
import { Calendar } from '@hamur/react/calendar'
import { DateRangePicker } from '@hamur/react/date-range-picker'
import { Field } from '@hamur/react/field'

export default function DateRangePickerExample() {
  const [stay, setStay] = React.useState<{ start: string; end: string } | null>(null)
  return (
    <div className="stack">
      <Field.Root className="field">
        <Field.Label>Stay</Field.Label>
        <DateRangePicker.Root
          locale="en-US"
          today="2026-11-07"
          onValueChange={setStay}
        >
          <DateRangePicker.Control className="date-field date-picker-control">
            <DateRangePicker.Input
              type="start"
              className="date-field-input date-range-picker-input"
            />
            <DateRangePicker.Separator
              className="date-range-picker-separator"
            >
              –
            </DateRangePicker.Separator>
            <DateRangePicker.Input
              type="end"
              className="date-field-input date-range-picker-input"
            />
            <DateRangePicker.Clear className="date-field-clear">
              ×
            </DateRangePicker.Clear>
            <DateRangePicker.Trigger className="date-picker-trigger">
              <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
                <path d="M2.5 3.5h11v10h-11zM2.5 6.5h11M5.5 1.5v3M10.5 1.5v3" />
              </svg>
            </DateRangePicker.Trigger>
          </DateRangePicker.Control>
          <DateRangePicker.Portal>
            <DateRangePicker.Positioner sideOffset={8}>
              <DateRangePicker.Popup className="popover date-picker-popup">
                <DateRangePicker.Calendar className="calendar">
                  <div className="calendar-header">
                    <Calendar.PrevButton className="calendar-nav">‹</Calendar.PrevButton>
                    <Calendar.Heading className="calendar-heading" />
                    <Calendar.NextButton className="calendar-nav">›</Calendar.NextButton>
                  </div>
                  <Calendar.Grid className="calendar-grid">
                    {(grid) => (
                      <>
                        <Calendar.GridHeader>
                          <Calendar.GridRow>
                            {grid.weekdays.map((weekday) => (
                              <Calendar.HeaderCell
                                key={weekday.index}
                                weekday={weekday.index}
                                className="calendar-weekday"
                              />
                            ))}
                          </Calendar.GridRow>
                        </Calendar.GridHeader>
                        <Calendar.GridBody>
                          {grid.weeks.map((week, index) => (
                            <Calendar.GridRow key={index}>
                              {week.map((day) => (
                                <Calendar.Cell
                                  key={day.date}
                                  date={day.date}
                                  className="calendar-cell"
                                >
                                  <Calendar.Day className="calendar-day" />
                                </Calendar.Cell>
                              ))}
                            </Calendar.GridRow>
                          ))}
                        </Calendar.GridBody>
                      </>
                    )}
                  </Calendar.Grid>
                </DateRangePicker.Calendar>
                <DateRangePicker.Close className="button date-picker-close">
                  Close
                </DateRangePicker.Close>
              </DateRangePicker.Popup>
            </DateRangePicker.Positioner>
          </DateRangePicker.Portal>
        </DateRangePicker.Root>
      </Field.Root>
      <p className="muted">Stay: {stay ? `${stay.start} to ${stay.end}` : 'none'}</p>
    </div>
  )
}