Radarist project

Radarist / Design system

Documentation v0.1 · Product in progress

Design system contents

Components

Day navigation and date picker

Move between days and choose a date while preserving Today as an explicit reference.

On this page

Purpose and usage

Move between days and choose a date while preserving Today as an explicit reference.

Use for agenda selection; native date inputs in event forms have a different contract.

Anatomy

Anatomy
PartContract
Previous/next controlsChange selected day through the parent callback.
Date triggerNames Today or the selected calendar date.
Month dialogMonth navigation and day buttons.

Variants and configuration

Variants and configuration
ConfigurationBehavior
Presentationcompact, heroOverlay, iconOnly.
Controlled datesselectedDate, todayDate, onSelectDate.

State coverage

State coverage
StateImplemented behavior
TodayDate trigger identifies Today.
Another dayTrigger uses the selected calendar date.
Open pickerNonmodal dialog; current date has aria-current=date.

Interaction and responsive behavior

  • Pass local YYYY-MM-DD date keys from the existing helpers.
  • Keep next and previous controls available on phones.
  • Changing month in the picker is distinct from committing a selected day.

Accessibility contract

  • Day buttons have full-date accessible labels.
  • Picker is a nonmodal dialog, not a date grid with verified arrow-key navigation.
  • Escape and outside pointer close the surface.

Known gaps and readiness

Do not claim a full ARIA grid or calendar keyboard model. Screen-reader date discovery and focus return need further verification.

Composition example

<DayNavigator selectedDate={selectedDate}
  todayDate={todayDate} onSelectDate={setSelectedDate} />

Source references

Source references
FileResponsibility
app/components/day-navigator.tsxDate navigation and month picker
app/components/agenda-date-utils.tsLocal date keys and comparisons

Examples from the app

Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.

Day Navigator · Component detail · Light · Desktop · 1864 × 202 px
Day Navigator · Component detail · Light · Desktop · Open · 1864 × 1050 px

Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1