Calendar

Calendar is React DayPicker with the package's classes. It needs the react-day-picker peer package, which only products that import @booleanpress/ui/calendar install. mode is "single", "multiple" or "range"; selected and onSelect follow the mode (a Date, a Date[] or a { from, to } range).

import { useState } from "react"
import { Calendar } from "@booleanpress/ui/calendar"

export function SendDate() {
  const [date, setDate] = useState<Date | undefined>()
  return <Calendar mode="single" selected={date} onSelect={setDate} />
}

The calendar renders no label of its own: put it under a visible heading, or in a popover whose content has an aria-label. Block days with disabled (a Date, an array, { before }, { after }, { dayOfWeek }, or a function). Limit the months people can reach with startMonth and endMonth; with captionLayout="dropdown", those limits fill the month and year dropdowns. For a date field, put the calendar in a Popover opened by a Button, and close it in onSelect.

The calendar takes its direction from BooleanUIProvider's dir, so in right-to-left the arrow keys follow the reading direction and the month arrows mirror. Dates and month names are formatted with the browser's locale; pass DayPicker's locale to change that.

Chosen days are --primary; the days between the ends of a range, and today, are --accent; outside days are --muted-foreground. The cell size is the --cell-size custom property (32 px), which you can set on the calendar's className. Inside a Card or Popover, the calendar's own background is transparent.