Custom Components

Date range

A prev-arrow / calendar / range-text / next-arrow control, styled like an Input. Not yet part of the design system - documented here until a stakeholder decides where (or whether) it belongs.

What lives in this section

Components built for a specific screen because nothing in components/base/** or components/application/** covers the pattern - real and working, not a ? placeholder, but not yet reviewed or adopted as part of the design system either. Once a stakeholder picks a direction for a given pattern, it moves out of components/custom/** and into components/base or components/application (with a real entry in the Components section) - or gets replaced entirely if the direction changes. Nothing here should be treated as a locked API yet.

Live example

Fully working, not a static mock - click the centre to open the range calendar, or the outer arrows to step the whole range forward/back by its own length.

Default

Why this is custom, not real DEW

components/base/input/input-date.tsx (InputDate) is a single-value DateField driven by react-aria DateSegments - it has no prev/range-text/ next composition, and no notion of a range at all. This control needs both, so no existing DEW component matches it. It's built from real primitives rather than invented from scratch though: react-aria's RangeCalendar/DialogTrigger for the interaction, and the real DEW Popover (components/base/select/popover.tsx) for the overlay shell - so promoting it later is mostly a matter of relocating the file and settling on an API, not rebuilding it.

Behaviour

Interactions

Centre (calendar icon + range text) opens a popover with a two-week-style month range calendar.
Selecting a new start/end date in the calendar updates the trigger text and closes on completion.
The outer chevrons step the whole range forward/back by its own length (e.g. a 5-day range steps by 5 days) without opening the popover.
Uncontrolled by default (defaults to the last 5 days) - pass value/onChange to own the state.

API

Prop	Type	Default
`defaultValue`	`DateRange`	`last 5 days`
`value`	`DateRange`	`-`
`onChange`	`(value: DateRange) => void`	`-`
`className`	`string`	`-`

DateRange is { start: DateValue; end: DateValue }, both re-exported from react-aria-components.

Usage

import { DateRangeControl } from "@/components/custom/date-range/date-range-control";

<DateRangeControl />

// Controlled
<DateRangeControl value={range} onChange={setRange} />

Where it's used

app/pages/dashboard/page.tsx - the registered-user dashboard. Previously a ?-blocked gap marker there; replaced with this once its shape was clear enough to build for real.