Date + Time
The date and time family covers segment-based text entry for dates, date ranges, and times, plus the standalone calendar pickers. All three field types share the same container chrome as regular inputs: a hairline border, bg-transparent fill, and focus-within:hairline-ring on the container when any segment is active. Individual segments highlight with Color palette: light tokens.css-token:accent on focus. Calendars carry their own visual budget: a p-3 root, --vueda-cal-day for cell sizing, and Color palette: light tokens.css-token:primary for selected cells.
This page is the visual contract the default theme guarantees. Because the focus ring on segment fields is triggered by real keyboard focus inside the container rather than by a focus-visible pseudo-class, it cannot be simulated by the docs harness. Click into any segment below to see the accent highlight and container ring live.
For the mechanics of overriding any of this, see Customize VUEDA Appearance.
DateField: composition matrix
DateField is a segment-based date input. The default slot exposes { segments } — an array of objects each with part and value. Pass part to DateFieldInput for each segment; Reka renders literal separators (slashes) as non-interactive spans automatically.
Theme keys: DateField, DateFieldInput. Token surface: Color palette: light tokens.css-token:border (container border), Color palette: light tokens.css-token:ring (focus ring), Color palette: light tokens.css-token:accent (active segment fill), Color palette: light tokens.css-token:muted (read-only fill).
DateRangeField: composition matrix
DateRangeField extends the segment pattern to a start–end pair. The default slot exposes { segments } as { start: [...], end: [...] }. Iterate each array with DateRangeFieldInput, passing type="start" or type="end" alongside part. A visual separator between the two halves is the consumer's responsibility and typically rendered as a plain <span>.
Theme keys: DateRangeField, DateRangeFieldInput. Token surface mirrors DateField.
TimeField: composition matrix
TimeField renders hour, minute, and optional second segments plus an AM/PM period segment when hourCycle is 12. The slot API is identical to DateField: { segments } as a flat array, iterated with TimeFieldInput.
Theme keys: TimeField, TimeFieldInput. Token surface mirrors DateField.
Calendar: state matrix
Calendar is a fully self-contained composite: it renders the header, nav buttons, weekday row, and date grid internally. Consumers mount it directly with v-model or default-value. The layout prop switches the heading between a static text label, a month dropdown, a year dropdown, or the combined month-and-year dropdowns.
Theme keys: Calendar, CalendarCell, CalendarCellTrigger. Token surface: Color palette: light tokens.css-token:accent (today highlight, range fill), Color palette: light tokens.css-token:primary (selected cell), Color palette: light tokens.css-token:muted-foreground (outside-month and disabled cells), Color palette: light tokens.css-token:destructive (unavailable cells).
RangeCalendar: state matrix
RangeCalendar renders a date range picker. The selected range fills with Color palette: light tokens.css-token:accent between start and end; the two endpoint cells use Color palette: light tokens.css-token:primary. The RangeCalendarCell CSS handles the rounded-corner transitions at the selection boundaries.
Theme keys: RangeCalendar, RangeCalendarCell, RangeCalendarCellTrigger. Token surface mirrors Calendar.
CalendarFooter
CalendarFooter is the chin paired with Calendar or RangeCalendar inside date-picker popovers. It carries a border-t and renders a leading mono range summary alongside a trailing action row. The summary span uses the same mono / tabular / slashed-zero treatment as segment text so multi-day range labels stay digit-aligned.
Theme keys: CalendarFooter. Token surface: Color palette: light tokens.css-token:border (top divider), Color palette: light tokens.css-token:muted-foreground (summary text).
Display components
The families above all edit a value. DateTimeDisplay and DateRangeDisplayread one: they take a value and render formatted, non-editable text. Reach for them in a table cell, a read view, or an audit row, where a field control would imply the value can be changed in place.
DateTimeDisplay accepts an ISO string, a JS Date, or a Luxon DateTime, and DateRangeDisplay takes a start and an end. Both parse in the reader's own time zone, so the rendered text below depends on where the page is opened; the values are fixed, the zone is not. Neither component claims a locale beyond the en-CA Luxon locale it sets internally.
DateTimeDisplay also renders a relative label ("4 months ago") next to the absolute one by default, and refreshes it on a timer. That output moves with the clock, so the first card below turns it off to stay deterministic and the second shows it on with that caveat stated.
Theme keys: DateTimeDisplay, DateRangeDisplay.