import { ComponentPropsWithoutRef } from 'react'; import { WeekdayNumbers } from 'luxon'; import { IanaZone, Locale, LayoutUtilProps } from '../../types'; export type CalendarValue = string | undefined; export type CalendarRangeValue = { start?: string; end?: string; } | undefined; /** * Props for the Calendar component * @extends Omit, "value" | "defaultValue"> * @extends LayoutUtilProps */ type CalendarCommonProps = Omit, "value" | "defaultValue"> & { /** * @deprecated children will be overridden internally */ children?: ComponentPropsWithoutRef<"div">["children"]; /** * The default focused date. */ defaultFocusedDate?: string | null; /** * The focused date. Used to determine what month and year is currently selected. */ focusedDate?: string | null; /** * The minimum date allowed. */ minDate?: string; /** * The maximum date allowed. */ maxDate?: string; /** * @deprecated use unavailable.dates instead */ unavailableDates?: string[]; /** * The days of the week and dates that are unavailable. */ unavailable?: { /** * The days of the week that are unavailable. */ daysOfWeek?: WeekdayNumbers[]; /** * The specific dates that are unavailable. */ dates?: string[]; }; /** * The locale to use for the calendar. */ locale?: Locale; /** * The time zone to use for the calendar. */ defaultTimeZone?: IanaZone; /** * The day of the week to start the calendar on. */ startDay?: "Sunday" | "Monday"; /** * Whether the calendar should focus on the focused date. * @internal - Do not use this prop directly. */ _disableAutofocus?: boolean; }; type CalendarSingleProps = CalendarCommonProps & { /** * The function to call when the value changes. * * @param data - The data to pass to the function. */ onSelection?: (data: { value: CalendarValue; }) => void; /** * The default date value for uncontrolled mode. */ defaultValue?: string | false; /** * The value for controlled mode. */ value?: string; /** * Whether the calendar is in range mode. */ range?: false; }; type CalendarRangeProps = CalendarCommonProps & { /** * The function to call when the value changes. * * @param data.value - The date value that is selected. */ onSelection?: (data: { value: CalendarRangeValue; }) => void; /** * The default date value for uncontrolled mode. */ defaultValue?: { start?: string; end?: string; }; /** * The date value for controlled mode. */ value?: { start?: string; end?: string; }; /** * Whether the calendar is in range mode. */ range: true; }; export type CalendarProps = LayoutUtilProps & (CalendarSingleProps | CalendarRangeProps); /** * Calendar component for viewing and selecting a date or range of dates. * * Features: * - Single date and date range selection modes * - Month and year navigation with header buttons * - Configurable start day (Sunday or Monday) * - Date range restrictions with min/max dates * - Unavailable dates and days of week support * - Locale and timezone customization * - Full accessibility support with ARIA attributes * - Keyboard navigation support * - Responsive design with automatic width detection * - Month and year selection views * - Today button for quick navigation * * @example * console.log('Selected:', value)} * minDate="2024-01-01" * maxDate="2024-12-31" * /> */ export declare const Calendar: import('react').ForwardRefExoticComponent>; export {};