Inputs
Calendar
The month grid (Figma "Calendar" 2080:10866).
A WAI-ARIA date grid: arrows move a day or a week, Home/End go to the week's ends, PageUp/PageDown change month (with Shift, year); Enter or Space picks. Single or range selection. The popover around it belongs to Overlays (Date Input brings its own).
<Calendar value={day} onValueChange={setDay} min="1910-01-01" max="2026-10-19" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Calendar
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Product · App
| Months | Calendar | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| One | Outubro de 2026
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Two | Outubro de 2026
Novembro de 2026
|
Product · Backoffice
| Months | Calendar | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| One | Outubro de 2026
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Two | Outubro de 2026
Novembro de 2026
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Two stacked | Outubro de 2026
Novembro de 2026
|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
CalendarDayProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| product? | "app" | "backoffice" | null | "app" | |
| selected? | boolean | null | false | |
| inRange? | boolean | null | false | |
| outside? | boolean | null | false | |
| disabled? | boolean | null | false | |
| className? | string | — | |
| onClick? | React.MouseEventHandler<HTMLButtonElement> | — |
CalendarProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| mode? | "range" | "single" | — | |
| value? | string | CalendarRange | null | — | |
| defaultValue? | string | CalendarRange | null | — | |
| onValueChange? | ((value: string) => void) | ((value: CalendarRange) => void) | — |