import { WeekdayNumbers } from 'luxon'; import { ComponentPropsWithoutRef } from 'react'; import { IanaZone, LayoutUtilProps, Locale } 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. Used to determine what month and year is shown. */ defaultFocusedDate?: string | null; /** * The focused date. Used to determine what month and year is currently shown. */ focusedDate?: string | null; /** * The minimum date allowed. */ minDate?: string; /** * The maximum date allowed. */ maxDate?: 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; /** Whether the calendar should set all tab indexes to -1. * @internal - Do not use this prop directly. */ _disableFocus?: 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> & { /** * Calendar.Now component for navigating to today's date. * * Features: * - Quick navigation to current date * - Accessible button with proper ARIA labels * - Integrates with calendar context * - Data tracking integration for analytics * * @example * */ Now: import('react').ForwardRefExoticComponent<{ onClick?: (e: import('react').MouseEvent, date: string | null) => void; onClickFixed?: import('react').MouseEventHandler | undefined; } & Omit & import('react').RefAttributes>; /** * Calendar.Month component for displaying the month grid. * * Features: * - Displays calendar days in a table format * - Handles day selection and navigation * - Supports range selection mode * - Accessible with proper ARIA attributes * - Data tracking integration for analytics * * @example * */ Month: import('react').ForwardRefExoticComponent, HTMLTableElement>, "ref"> & import('react').RefAttributes>; /** * Calendar.Next component for navigating to the next month. * * Features: * - Navigation to next month * - Accessible button with proper ARIA labels * - Integrates with calendar context * - Data tracking integration for analytics * * @example * */ Next: import('react').ForwardRefExoticComponent>; /** * Calendar.Prev component for navigating to the previous month. * * Features: * - Navigation to previous month * - Accessible button with proper ARIA labels * - Integrates with calendar context * - Data tracking integration for analytics * * @example * */ Prev: import('react').ForwardRefExoticComponent>; /** * Calendar.MonthButton component for switching to month selection view. * * Features: * - Switches calendar to month selection mode * - Accessible button with proper ARIA labels * - Integrates with calendar context * - Data tracking integration for analytics * * @example * */ MonthButton: import('react').ForwardRefExoticComponent>; /** * Calendar.YearButton component for switching to year selection view. * * Features: * - Switches calendar to year selection mode * - Accessible button with proper ARIA labels * - Integrates with calendar context * - Data tracking integration for analytics * * @example * */ YearButton: import('react').ForwardRefExoticComponent>; }; export declare const CalendarElement: import('react').ForwardRefExoticComponent> & { /** * Calendar.Now component for navigating to today's date. * * Features: * - Quick navigation to current date * - Accessible button with proper ARIA labels * - Integrates with calendar context * - Data tracking integration for analytics * * @example * */ Now: import('react').ForwardRefExoticComponent<{ onClick?: (e: import('react').MouseEvent, date: string | null) => void; onClickFixed?: import('react').MouseEventHandler | undefined; } & Omit & import('react').RefAttributes>; /** * Calendar.Month component for displaying the month grid. * * Features: * - Displays calendar days in a table format * - Handles day selection and navigation * - Supports range selection mode * - Accessible with proper ARIA attributes * - Data tracking integration for analytics * * @example * */ Month: import('react').ForwardRefExoticComponent, HTMLTableElement>, "ref"> & import('react').RefAttributes>; /** * Calendar.Next component for navigating to the next month. * * Features: * - Navigation to next month * - Accessible button with proper ARIA labels * - Integrates with calendar context * - Data tracking integration for analytics * * @example * */ Next: import('react').ForwardRefExoticComponent>; /** * Calendar.Prev component for navigating to the previous month. * * Features: * - Navigation to previous month * - Accessible button with proper ARIA labels * - Integrates with calendar context * - Data tracking integration for analytics * * @example * */ Prev: import('react').ForwardRefExoticComponent>; /** * Calendar.MonthButton component for switching to month selection view. * * Features: * - Switches calendar to month selection mode * - Accessible button with proper ARIA labels * - Integrates with calendar context * - Data tracking integration for analytics * * @example * */ MonthButton: import('react').ForwardRefExoticComponent>; /** * Calendar.YearButton component for switching to year selection view. * * Features: * - Switches calendar to year selection mode * - Accessible button with proper ARIA labels * - Integrates with calendar context * - Data tracking integration for analytics * * @example * */ YearButton: import('react').ForwardRefExoticComponent>; }; export {};