import { type ViewProps } from 'react-native'; import { type CalendarSystem, type DateLocale } from '../../utils/date.js'; export type CalendarMode = 'single' | 'multiple' | 'range'; export type CalendarCaptionLayout = 'label' | 'dropdown'; /** A range under construction: `to` is undefined between the two taps. */ export interface DateRange { from: Date; to?: Date; } /** * What a `mode` selects. Written as a map so the root, the parts and the * caller all read the same association rather than each casting their own way. */ export interface CalendarSelection { single: Date | undefined; multiple: Date[]; range: DateRange | undefined; } /** * Which days cannot be picked. A list, a span, or a rule — a rule because * "no weekends" and "not in the past" are the two most common cases and * neither can be written as a list that stays right tomorrow. */ export type CalendarDisabled = Date[] | { from: Date; to: Date; } | ((date: Date) => boolean); export interface CalendarProps extends Omit { className?: string; /** One day, several, or a span with two ends. */ mode?: Mode; /** Controlled selection. Its shape follows `mode`. */ selected?: CalendarSelection[Mode]; /** Starting selection when uncontrolled. */ defaultSelected?: CalendarSelection[Mode]; onSelect?: (selected: CalendarSelection[Mode]) => void; /** Controlled visible month. Any day inside it will do. */ month?: Date; /** Month shown first when uncontrolled. Defaults to the selection, or today. */ defaultMonth?: Date; onMonthChange?: (month: Date) => void; /** Months side by side. Two is what picking a range across a boundary wants. */ numberOfMonths?: number; /** * `dropdown` turns the caption into month and year pickers, which is the * difference between choosing a birthday in four taps and in four hundred. */ captionLayout?: CalendarCaptionLayout; /** Days that cannot be picked: a list, a span, or a rule. */ disabled?: CalendarDisabled; /** Earliest selectable day. Also stops the caption paging back past it. */ minDate?: Date; /** Latest selectable day. */ maxDate?: Date; /** * Earliest month the caption's pickers offer. Defaults to `minDate`, and to * a hundred years back when there is none. * * Separate from `minDate` because they answer different questions: `minDate` * is about which days can be picked, this is about how far the month and year * lists reach. A birthday picker wants a century of years on offer and no * bound at all on the days inside them. */ startMonth?: Date; /** Latest month the caption's pickers offer. Defaults to `maxDate`, else ten years on. */ endMonth?: Date; /** * Which day the week's first column is. `0` is Sunday. * * `auto` asks the locale, which is what most of the world wants — `en-GB` and * `fr-FR` start on Monday, and a calendar that says otherwise is wrong in a * way its reader notices immediately. It is not the default only because * changing an existing calendar's columns out from under it is not something * a version bump should do. Out-of-range numbers wrap rather than producing * a blank column. */ weekStartsOn?: number | 'auto'; /** Draw the neighbouring months' days rather than leaving the cells blank. */ showOutsideDays?: boolean; /** * Let a tap on a neighbouring month's day select it. Off by default: those * cells exist to keep the grid six rows tall, and a tap on one is far more * often a misfire than an attempt to reach into July from June. Paging to the * month is the way to pick a day in it. */ selectOutsideDays?: boolean; /** * Draw the calendar's own panel — a rounded, bordered card. On by default, * for a calendar standing on a page. Turn it off when it is already inside * something that draws one, which is what `DatePicker` does. */ bordered?: boolean; /** BCP 47 tag for the month and weekday names. The device's own by default. */ locale?: DateLocale; /** * Which calendar the months and the day numbers are counted in. * * `gregory` by default rather than `auto`: a grid whose month boundaries move * with the device's language is a surprise, and it is the caller — not the * locale — who knows whether the dates being picked are Hijri ones. `auto` * follows the locale for the cases where they are the same question. */ calendar?: CalendarSystem; } declare function CalendarRoot({ className, mode, selected, defaultSelected, onSelect, month: monthProp, defaultMonth, onMonthChange, numberOfMonths, captionLayout, disabled, minDate, maxDate, startMonth, endMonth, weekStartsOn: weekStartsOnProp, showOutsideDays, selectOutsideDays, bordered, locale, calendar, ...props }: CalendarProps): import("react").JSX.Element; declare namespace CalendarRoot { var displayName: string; } export interface CalendarHeaderProps { /** Which month of the run this header sits over. `0` is the first. */ offset?: number; /** The last offset in the run, so the header knows whether it owns the arrow. */ lastOffset?: number; } /** * The row over a month: an arrow at each edge and the month's name between * them. * * The arrows are pinned to the edges of the calendar rather than packed around * the label, so the two targets are as far apart as the panel allows and the * name sits centred over its own grid. With several months shown they are split * across the run — back on the first, forward on the last — because both sets * on both headers would page the whole run and give two ways to do one thing. * The month that owns neither still lays out a spacer, or its name would slide * off centre. */ declare function CalendarHeader({ offset, lastOffset }: CalendarHeaderProps): import("react").JSX.Element; export interface CalendarNavProps { direction: 'previous' | 'next'; disabled?: boolean; onPress?: () => void; } /** * One paging arrow. * * Borderless: two bordered squares at the ends of a bordered panel read as a * row of boxes rather than as controls, and the chevron is legible enough on * its own. The target is still 32px with another 8 of slop around it. */ declare function CalendarNav({ direction, disabled, onPress }: CalendarNavProps): import("react").JSX.Element; interface GridProps { month: Date; mode: CalendarMode; value: unknown; onSelect: (date: Date) => void; disabled?: CalendarDisabled; minDate?: Date; maxDate?: Date; weekStartsOn: number; showOutsideDays: boolean; selectOutsideDays?: boolean; locale: DateLocale; system: 'gregory' | 'islamic'; } declare function CalendarGrid({ month, mode, value, onSelect, disabled, minDate, maxDate, weekStartsOn, showOutsideDays, selectOutsideDays, locale, system, }: GridProps): import("react").JSX.Element; interface DayProps { date: Date; outside: boolean; selected: boolean; /** Anywhere inside the range, ends included. */ inRange: boolean; rangeStart?: boolean; rangeEnd?: boolean; today: boolean; disabled: boolean; /** The band carries on past this cell's leading edge. */ openStart: boolean; /** The band carries on past this cell's trailing edge. */ openEnd: boolean; locale: DateLocale; system: 'gregory' | 'islamic'; onPress: () => void; } declare function CalendarDay({ date, outside, selected, inRange, rangeStart, rangeEnd, today, disabled, openStart, openEnd, locale, system, onPress, }: DayProps): import("react").JSX.Element; export declare const Calendar: typeof CalendarRoot & { Header: typeof CalendarHeader; Nav: typeof CalendarNav; Grid: typeof CalendarGrid; Day: typeof CalendarDay; }; export {}; //# sourceMappingURL=index.d.ts.map