Week Picker in five frameworks

import { Field } from '@hamur/react/field'
import { WeekCalendar } from '@hamur/react/week-calendar'
import { WeekPicker } from '@hamur/react/week-picker'

export default function WeekPickerExample() {
  return (
    <Field.Root className="field">
      <Field.Label>Reporting week</Field.Label>
      <WeekPicker.Root locale="en-US" today="2026-11-11">
        <WeekPicker.Trigger className="week-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>
          <WeekPicker.Value className="week-picker-value" />
        </WeekPicker.Trigger>
        <WeekPicker.Portal>
          <WeekPicker.Positioner sideOffset={8}>
            <WeekPicker.Popup className="popover date-picker-popup">
              <WeekPicker.Calendar className="calendar">
                <div className="calendar-header">
                  <WeekCalendar.PrevButton className="calendar-nav">‹</WeekCalendar.PrevButton>
                  <WeekCalendar.Heading className="calendar-heading" />
                  <WeekCalendar.NextButton className="calendar-nav">›</WeekCalendar.NextButton>
                </div>
                <WeekCalendar.Grid className="calendar-grid week-calendar-grid">
                  {(grid) => (
                    <>
                      <WeekCalendar.GridHeader>
                        <WeekCalendar.GridRow>
                          <WeekCalendar.WeekNumberHeaderCell className="calendar-weekday">
                            Wk
                          </WeekCalendar.WeekNumberHeaderCell>
                          {grid.weekdays.map((weekday) => (
                            <WeekCalendar.HeaderCell
                              key={weekday.index}
                              weekday={weekday.index}
                              className="calendar-weekday"
                            />
                          ))}
                        </WeekCalendar.GridRow>
                      </WeekCalendar.GridHeader>
                      <WeekCalendar.GridBody>
                        {grid.weeks.map(({ week, days }) => (
                          <WeekCalendar.Row
                            key={week.start}
                            value={week.start}
                            className="week-calendar-row"
                          >
                            <WeekCalendar.WeekNumber className="week-calendar-number" />
                            {days.map((day) => (
                              <WeekCalendar.Cell
                                key={day.date}
                                date={day.date}
                                className="week-calendar-cell"
                              >
                                <WeekCalendar.Day className="calendar-day" />
                              </WeekCalendar.Cell>
                            ))}
                          </WeekCalendar.Row>
                        ))}
                      </WeekCalendar.GridBody>
                    </>
                  )}
                </WeekCalendar.Grid>
              </WeekPicker.Calendar>
              <WeekPicker.Close className="button date-picker-close">
                Close
              </WeekPicker.Close>
            </WeekPicker.Popup>
          </WeekPicker.Positioner>
        </WeekPicker.Portal>
      </WeekPicker.Root>
    </Field.Root>
  )
}