Date Picker in five frameworks

import { Calendar } from '@hamur/react/calendar'
import { DatePicker } from '@hamur/react/date-picker'
import { Field } from '@hamur/react/field'

export default function DatePickerExample() {
  return (
    <Field.Root className="field">
      <Field.Label>Due date</Field.Label>
      <DatePicker.Root locale="en-US" today="2026-11-07">
        <DatePicker.Control className="date-field date-picker-control">
          <DatePicker.Input className="date-field-input">
            {({ segments }) =>
              segments.map((segment) => (
                <DatePicker.Segment
                  key={segment.index}
                  segment={segment}
                  className="date-field-segment"
                />
              ))
            }
          </DatePicker.Input>
          <DatePicker.Clear className="date-field-clear">
            ×
          </DatePicker.Clear>
          <DatePicker.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>
          </DatePicker.Trigger>
        </DatePicker.Control>
        <DatePicker.Portal>
          <DatePicker.Positioner sideOffset={8}>
            <DatePicker.Popup className="popover date-picker-popup">
              <DatePicker.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>
              </DatePicker.Calendar>
              <DatePicker.Close className="button date-picker-close">
                Close
              </DatePicker.Close>
            </DatePicker.Popup>
          </DatePicker.Positioner>
        </DatePicker.Portal>
      </DatePicker.Root>
    </Field.Root>
  )
}