@mantine/dates 7.16.3 → 8.0.0-alpha.0

package/lib/components/DateInputMask/DateInputMask.d.ts

@@ -0,0 +1,63 @@
+import { BoxProps, CloseButtonProps, DataAttributes, ElementProps, Factory, PopoverProps, StylesApiProps } from '@mantine/core';
+export type DateInputMaskStylesNames = 'fieldsRoot';
+export type DateInputMaskVariant = string;
+export interface DateInputMaskProps extends BoxProps, StylesApiProps<DateInputMaskFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
+    /** Controlled component value */
+    value?: Date | null;
+    /** Uncontrolled component default value */
+    defaultValue?: Date | null;
+    /** Called when the value changes */
+    onChange?: (value: Date | null) => void;
+    /** Determines whether the clear button should be displayed, `false` by default */
+    clearable?: boolean;
+    /** Called once when one of the inputs is focused, not called when focused is shifted between hours, minutes, seconds and am/pm inputs */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Called once when the focus is no longer on any of the inputs */
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    /** If set, the value cannot be updated */
+    readOnly?: boolean;
+    /** If set, the component becomes disabled */
+    disabled?: boolean;
+    /** `name` prop passed down to the hidden input */
+    name?: string;
+    /** `form` prop passed down to the hidden input */
+    form?: string;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
+    /** `aria-label` of days input */
+    daysInputLabel?: string;
+    /** `aria-label` of months input */
+    monthsInputLabel?: string;
+    /** `aria-label` of years input */
+    yearsInputLabel?: string;
+    /** Determines whether the dropdown with calendar should be visible when the input has focus, `false` by default */
+    withDropdown?: boolean;
+    /** Props passed down to `Popover` component */
+    popoverProps?: PopoverProps;
+    /** Props passed down to clear button */
+    clearButtonProps?: CloseButtonProps & ElementProps<'button'> & DataAttributes;
+    /** Props passed down to days input */
+    daysInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
+    /** Props passed down to months input */
+    monthsInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
+    /** Props passed down to years input */
+    yearsInputProps?: React.ComponentPropsWithoutRef<'input'> & DataAttributes;
+    /** A ref object to get node reference of the days input */
+    daysRef?: React.Ref<HTMLInputElement>;
+    /** A ref object to get node reference of the months input */
+    monthsRef?: React.Ref<HTMLInputElement>;
+    /** A ref object to get node reference of the years input */
+    yearsRef?: React.Ref<HTMLInputElement>;
+}
+export type DateInputMaskFactory = Factory<{
+    props: DateInputMaskProps;
+    ref: HTMLDivElement;
+    stylesNames: DateInputMaskStylesNames;
+    variant: DateInputMaskVariant;
+}>;
+export declare const DateInputMask: import("@mantine/core").MantineComponent<{
+    props: DateInputMaskProps;
+    ref: HTMLDivElement;
+    stylesNames: DateInputMaskStylesNames;
+    variant: DateInputMaskVariant;
+}>;

package/lib/components/DateInputMask/use-date-input-mask.d.ts

@@ -0,0 +1 @@
+export declare function useDateInputMask(): void;

package/lib/components/DatePicker/DatePicker.d.ts

@@ -6,11 +6,11 @@ import { MonthLevelBaseSettings } from '../MonthLevel';
 import { YearLevelBaseSettings } from '../YearLevel';
 export type DatePickerStylesNames = CalendarStylesNames;
 export interface DatePickerBaseProps<Type extends DatePickerType = 'default'> extends PickerBaseProps<Type>, DecadeLevelBaseSettings, YearLevelBaseSettings, MonthLevelBaseSettings, CalendarBaseProps, Omit<CalendarSettings, 'hasNextLevel'> {
-    /** Max level that user can go up to (decade, year, month), defaults to decade */
+    /** Max level that user can go up to, `'decade'` by default */
     maxLevel?: CalendarLevel;
-    /** Initial level displayed to the user (decade, year, month), used for uncontrolled component */
+    /** Initial displayed level (uncontrolled) */
     defaultLevel?: CalendarLevel;
-    /** Current level displayed to the user (decade, year, month), used for controlled component */
+    /** Current displayed level (controlled) */
     level?: CalendarLevel;
     /** Called when level changes */
     onLevelChange?: (level: CalendarLevel) => void;

package/lib/components/DatePickerInput/DatePickerInput.d.ts

@@ -5,7 +5,7 @@ import { DatePickerBaseProps } from '../DatePicker';
 import { DateInputSharedProps } from '../PickerInputBase';
 export type DatePickerInputStylesNames = __InputStylesNames | 'placeholder' | CalendarStylesNames;
 export interface DatePickerInputProps<Type extends DatePickerType = 'default'> extends BoxProps, DateInputSharedProps, DatePickerBaseProps<Type>, StylesApiProps<DatePickerInputFactory> {
-    /** Dayjs format to display input value, "MMMM D, YYYY" by default  */
+    /** dayjs format for input value, `"MMMM D, YYYY"` by default  */
     valueFormat?: string;
 }
 export type DatePickerInputFactory = Factory<{

package/lib/components/DateTimePicker/DateTimePicker.d.ts

@@ -1,27 +1,25 @@
 import { ActionIconProps, BoxProps, Factory, InputVariant, StylesApiProps } from '@mantine/core';
-import { CalendarLevel, DateValue } from '../../types';
+import { CalendarLevel, DateStringValue, DateValue } from '../../types';
 import { CalendarBaseProps, CalendarSettings, CalendarStylesNames } from '../Calendar';
 import { DateInputSharedProps, PickerInputBaseStylesNames } from '../PickerInputBase';
-import { TimeInputProps } from '../TimeInput';
+import { TimePickerProps } from '../TimePicker/TimePicker';
 export type DateTimePickerStylesNames = 'timeWrapper' | 'timeInput' | 'submitButton' | PickerInputBaseStylesNames | CalendarStylesNames;
 export interface DateTimePickerProps extends BoxProps, Omit<DateInputSharedProps, 'classNames' | 'styles' | 'closeOnChange' | 'size' | 'valueFormatter'>, Omit<CalendarBaseProps, 'defaultDate'>, Omit<CalendarSettings, 'onYearMouseEnter' | 'onMonthMouseEnter' | 'hasNextLevel'>, StylesApiProps<DateTimePickerFactory> {
-    /** Dayjs format to display input value, "DD/MM/YYYY HH:mm" by default  */
+    /** dayjs format for input value, `"DD/MM/YYYY HH:mm"` by default  */
     valueFormat?: string;
     /** Controlled component value */
     value?: DateValue;
-    /** Default value for uncontrolled component */
+    /** Uncontrolled component default value */
     defaultValue?: DateValue;
     /** Called when value changes */
-    onChange?: (value: DateValue) => void;
-    /** TimeInput component props */
-    timeInputProps?: Omit<TimeInputProps, 'defaultValue' | 'value'> & {
-        ref?: React.ComponentPropsWithRef<'input'>['ref'];
-    };
+    onChange?: (value: DateStringValue) => void;
+    /** Props passed down to `TimePicker` component */
+    timePickerProps?: Omit<TimePickerProps, 'defaultValue' | 'value'>;
     /** Props passed down to the submit button */
     submitButtonProps?: ActionIconProps & React.ComponentPropsWithoutRef<'button'>;
-    /** Determines whether seconds input should be rendered */
+    /** Determines whether the seconds input should be displayed, `false` by default */
     withSeconds?: boolean;
-    /** Max level that user can go up to (decade, year, month), defaults to decade */
+    /** Max level that user can go up to, `'decade'` by default */
     maxLevel?: CalendarLevel;
 }
 export type DateTimePickerFactory = Factory<{

package/lib/components/DateTimePicker/get-min-max-time/get-min-max-time.d.ts

@@ -0,0 +1,12 @@
+import { DateStringValue } from '../../../types';
+interface GetMinTimeInput {
+    minDate: DateStringValue | Date | undefined;
+    value: DateStringValue | null;
+}
+export declare function getMinTime({ minDate, value }: GetMinTimeInput): string | undefined;
+interface GetMaxTimeInput {
+    maxDate: DateStringValue | Date | undefined;
+    value: DateStringValue | null;
+}
+export declare function getMaxTime({ maxDate, value }: GetMaxTimeInput): string | undefined;
+export {};

package/lib/components/DatesProvider/DatesProvider.d.ts

@@ -1,7 +1,6 @@
 import { DayOfWeek } from '../../types';
 export interface DatesProviderValue {
     locale: string;
-    timezone: string | null;
     firstDayOfWeek: DayOfWeek;
     weekendDays: DayOfWeek[];
     labelSeparator: string;

package/lib/components/DatesProvider/use-dates-context.d.ts

@@ -1,12 +1,10 @@
 import { DayOfWeek } from '../../types';
 export declare function useDatesContext(): {
     getLocale: (input?: string) => string;
-    getTimezone: (input?: string) => string | undefined;
     getFirstDayOfWeek: (input?: DayOfWeek) => DayOfWeek;
     getWeekendDays: (input?: DayOfWeek[]) => DayOfWeek[];
     getLabelSeparator: (input?: string) => string;
     locale: string;
-    timezone: string | null;
     firstDayOfWeek: DayOfWeek;
     weekendDays: DayOfWeek[];
     labelSeparator: string;

package/lib/components/Day/Day.d.ts

@@ -1,17 +1,19 @@
 import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
+import { DateStringValue } from '../../types';
+export type RenderDay = (date: DateStringValue) => React.ReactNode;
 export type DayStylesNames = 'day';
 export type DayCssVariables = {
     day: '--day-size';
 };
 export interface DayProps extends BoxProps, StylesApiProps<DayFactory>, ElementProps<'button'> {
     __staticSelector?: string;
-    /** Determines which element should be used as root, `'button'` by default, `'div'` if static prop is set */
+    /** Determines which element is used as root, `'button'` by default, `'div'` if static prop is set */
     static?: boolean;
-    /** Date that should be displayed */
-    date: Date;
+    /** Date that is displayed in `YYYY-MM-DD` format */
+    date: DateStringValue;
     /** Control width and height of the day, `'sm'` by default */
     size?: MantineSize;
-    /** Determines whether the day should be considered to be a weekend, `false` by default */
+    /** Determines whether the day is considered to be a weekend, `false` by default */
     weekend?: boolean;
     /** Determines whether the day is outside of the current month, `false` by default */
     outside?: boolean;
@@ -26,7 +28,7 @@ export interface DayProps extends BoxProps, StylesApiProps<DayFactory>, ElementP
     /** Determines whether the day is last in range selection, `false` by default */
     lastInRange?: boolean;
     /** Controls day value rendering */
-    renderDay?: (date: Date) => React.ReactNode;
+    renderDay?: RenderDay;
     /** Determines whether today should be highlighted with a border, `false` by default */
     highlightToday?: boolean;
 }

package/lib/components/Day/index.d.ts

@@ -1,2 +1,2 @@
 export { Day } from './Day';
-export type { DayCssVariables, DayFactory, DayProps, DayStylesNames } from './Day';
+export type { DayCssVariables, DayFactory, DayProps, DayStylesNames, RenderDay } from './Day';

package/lib/components/DecadeLevel/DecadeLevel.d.ts

@@ -1,10 +1,11 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+import { DateStringValue } from '../../types';
 import { CalendarHeaderSettings, CalendarHeaderStylesNames } from '../CalendarHeader';
 import { YearsListSettings, YearsListStylesNames } from '../YearsList';
 export type DecadeLevelStylesNames = YearsListStylesNames | CalendarHeaderStylesNames;
 export interface DecadeLevelBaseSettings extends YearsListSettings {
-    /** Dayjs label format to display decade label or a function that returns decade label based on date value, defaults to "YYYY" */
-    decadeLabelFormat?: string | ((startOfDecade: Date, endOfDecade: Date) => React.ReactNode);
+    /** dayjs format for decade label or a function that returns decade label based on the date value, `"YYYY"` by default */
+    decadeLabelFormat?: string | ((startOfDecade: DateStringValue, endOfDecade: DateStringValue) => React.ReactNode);
 }
 export interface DecadeLevelSettings extends DecadeLevelBaseSettings, Omit<CalendarHeaderSettings, 'onLevelClick' | 'hasNextLevel'> {
 }
@@ -12,9 +13,9 @@ export interface DecadeLevelProps extends BoxProps, DecadeLevelSettings, Omit<St
     classNames?: Partial<Record<string, string>>;
     styles?: Partial<Record<string, React.CSSProperties>>;
     __staticSelector?: string;
-    /** Decade that is currently displayed */
-    decade: Date;
-    /** Aria-label for change level control */
+    /** Displayed decade */
+    decade: DateStringValue;
+    /** Level control `aria-label` */
     levelControlAriaLabel?: string;
 }
 export type DecadeLevelFactory = Factory<{

package/lib/components/DecadeLevel/get-decade-range/get-decade-range.d.ts

@@ -1 +1,2 @@
-export declare function getDecadeRange(decade: Date): readonly [Date, Date];
+import { DateStringValue } from '../../../types';
+export declare function getDecadeRange(decade: DateStringValue): readonly [string, string];

package/lib/components/DecadeLevelGroup/DecadeLevelGroup.d.ts

@@ -1,4 +1,5 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+import { DateStringValue } from '../../types';
 import { DecadeLevelSettings, DecadeLevelStylesNames } from '../DecadeLevel';
 import { LevelsGroupStylesNames } from '../LevelsGroup';
 export type DecadeLevelGroupStylesNames = LevelsGroupStylesNames | DecadeLevelStylesNames;
@@ -6,12 +7,12 @@ export interface DecadeLevelGroupProps extends BoxProps, Omit<StylesApiProps<Dec
     classNames?: Partial<Record<string, string>>;
     styles?: Partial<Record<string, React.CSSProperties>>;
     __staticSelector?: string;
-    /** Number of columns to render next to each other */
+    /** Number of columns to display next to each other */
     numberOfColumns?: number;
-    /** Decade that is currently displayed */
-    decade: Date;
-    /** Function that returns level control aria-label based on year date */
-    levelControlAriaLabel?: ((decade: Date) => string) | string;
+    /** Displayed decade */
+    decade: DateStringValue;
+    /** Function that returns level control `aria-label` based on year date */
+    levelControlAriaLabel?: ((decade: DateStringValue) => string) | string;
 }
 export type DecadeLevelGroupFactory = Factory<{
     props: DecadeLevelGroupProps;

package/lib/components/HiddenDatesInput/HiddenDatesInput.d.ts

@@ -5,8 +5,9 @@ export interface HiddenDatesInputProps {
     type: DatePickerType;
     name: string | undefined;
     form: string | undefined;
+    withTime?: boolean;
 }
-export declare function HiddenDatesInput({ value, type, name, form }: HiddenDatesInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function HiddenDatesInput({ value, type, name, form, withTime, }: HiddenDatesInputProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace HiddenDatesInput {
     var displayName: string;
 }

package/lib/components/Month/Month.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
-import { ControlKeydownPayload, DayOfWeek } from '../../types';
-import { DayProps, DayStylesNames } from '../Day';
+import { ControlKeydownPayload, DateLabelFormat, DateStringValue, DayOfWeek } from '../../types';
+import { DayProps, DayStylesNames, RenderDay } from '../Day';
 export type MonthStylesNames = 'month' | 'weekday' | 'weekdaysRow' | 'monthRow' | 'month' | 'monthThead' | 'monthTbody' | 'monthCell' | 'weekNumber' | DayStylesNames;
 export interface MonthSettings {
     /** Determines whether propagation for Escape key should be stopped */
@@ -8,50 +8,50 @@ export interface MonthSettings {
     /** Prevents focus shift when buttons are clicked */
     __preventFocus?: boolean;
     /** Called when day is clicked with click event and date */
-    __onDayClick?: (event: React.MouseEvent<HTMLButtonElement>, date: Date) => void;
+    __onDayClick?: (event: React.MouseEvent<HTMLButtonElement>, date: DateStringValue) => void;
     /** Called when mouse enters day */
-    __onDayMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>, date: Date) => void;
+    __onDayMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>, date: DateStringValue) => void;
     /** Called when any keydown event is registered on day, used for arrows navigation */
     __onDayKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, payload: ControlKeydownPayload) => void;
     /** Assigns ref of every day based on its position in the table, used for arrows navigation */
     __getDayRef?: (rowIndex: number, cellIndex: number, node: HTMLButtonElement) => void;
-    /** Dayjs locale, defaults to value defined in DatesProvider */
+    /** dayjs locale, the default value is defined by `DatesProvider` */
     locale?: string;
-    /** Number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday */
+    /** Number 0-6, where 0 – Sunday and 6 – Saturday. 1 – Monday by default */
     firstDayOfWeek?: DayOfWeek;
-    /** Dayjs format for weekdays names, defaults to "dd" */
-    weekdayFormat?: string | ((date: Date) => React.ReactNode);
-    /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider */
+    /** dayjs format for weekdays names, `'dd'` by default */
+    weekdayFormat?: DateLabelFormat;
+    /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider` */
     weekendDays?: DayOfWeek[];
-    /** Adds props to Day component based on date */
-    getDayProps?: (date: Date) => Omit<Partial<DayProps>, 'classNames' | 'styles' | 'vars'>;
+    /** Passes props down to `Day` components */
+    getDayProps?: (date: DateStringValue) => Omit<Partial<DayProps>, 'classNames' | 'styles' | 'vars'>;
     /** Callback function to determine whether the day should be disabled */
-    excludeDate?: (date: Date) => boolean;
-    /** Minimum possible date */
-    minDate?: Date;
-    /** Maximum possible date */
-    maxDate?: Date;
+    excludeDate?: (date: DateStringValue) => boolean;
+    /** Minimum possible date, in `YYYY-MM-DD` format */
+    minDate?: DateStringValue | Date;
+    /** Maximum possible date, in `YYYY-MM-DD` format */
+    maxDate?: DateStringValue | Date;
     /** Controls day value rendering */
-    renderDay?: (date: Date) => React.ReactNode;
-    /** Determines whether outside dates should be hidden, defaults to false */
+    renderDay?: RenderDay;
+    /** Determines whether outside dates should be hidden, `false` by default */
     hideOutsideDates?: boolean;
-    /** Determines whether weekdays row should be hidden, defaults to false */
+    /** Determines whether weekdays row should be hidden, `false` by default */
     hideWeekdays?: boolean;
-    /** Assigns aria-label to days based on date */
-    getDayAriaLabel?: (date: Date) => string;
+    /** Assigns `aria-label` to `Day` components based on date */
+    getDayAriaLabel?: (date: DateStringValue) => string;
     /** Controls size */
     size?: MantineSize;
-    /** Determines whether controls should be separated by spacing, true by default */
+    /** Determines whether controls should be separated by space, `true` by default */
     withCellSpacing?: boolean;
     /** Determines whether today should be highlighted with a border, `false` by default */
     highlightToday?: boolean;
-    /** Determines whether week numbers should be displayed */
+    /** Determines whether week numbers should be displayed, `false` by default */
     withWeekNumbers?: boolean;
 }
 export interface MonthProps extends BoxProps, MonthSettings, StylesApiProps<MonthFactory>, ElementProps<'div'> {
     __staticSelector?: string;
-    /** Month to display */
-    month: Date;
+    /** Month to display, value `YYYY-MM-DD` */
+    month: DateStringValue;
     /** Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way  */
     static?: boolean;
 }

package/lib/components/Month/get-date-in-tab-order/get-date-in-tab-order.d.ts

@@ -1,2 +1,13 @@
+import { DateStringValue } from '../../../types';
 import { DayProps } from '../../Day/Day';
-export declare function getDateInTabOrder(dates: Date[][], minDate: Date | undefined, maxDate: Date | undefined, getDateControlProps: ((date: Date) => Partial<DayProps>) | undefined, excludeDate: ((date: Date) => boolean) | undefined, hideOutsideDates: boolean | undefined, month: Date): Date;
+interface GetDateInTabOrderInput {
+    dates: DateStringValue[][];
+    minDate: DateStringValue | undefined;
+    maxDate: DateStringValue | undefined;
+    getDayProps: ((date: DateStringValue) => Partial<DayProps>) | undefined;
+    excludeDate: ((date: DateStringValue) => boolean) | undefined;
+    hideOutsideDates: boolean | undefined;
+    month: DateStringValue;
+}
+export declare function getDateInTabOrder({ dates, minDate, maxDate, getDayProps, excludeDate, hideOutsideDates, month, }: GetDateInTabOrderInput): string;
+export {};

package/lib/components/Month/get-end-of-week/get-end-of-week.d.ts

@@ -1,2 +1,2 @@
-import type { DayOfWeek } from '../../../types';
-export declare function getEndOfWeek(date: Date, firstDayOfWeek?: DayOfWeek): Date;
+import type { DateStringValue, DayOfWeek } from '../../../types';
+export declare function getEndOfWeek(date: DateStringValue, firstDayOfWeek?: DayOfWeek): string;

package/lib/components/Month/get-month-days/get-month-days.d.ts

@@ -1,8 +1,8 @@
-import { DayOfWeek } from '../../../types';
+import { DateStringValue, DayOfWeek } from '../../../types';
 interface GetMonthDaysInput {
-    month: Date;
+    month: DateStringValue;
     firstDayOfWeek: DayOfWeek | undefined;
     consistentWeeks: boolean | undefined;
 }
-export declare function getMonthDays({ month, firstDayOfWeek, consistentWeeks, }: GetMonthDaysInput): Date[][];
+export declare function getMonthDays({ month, firstDayOfWeek, consistentWeeks, }: GetMonthDaysInput): DateStringValue[][];
 export {};

package/lib/components/Month/get-start-of-week/get-start-of-week.d.ts

@@ -1,2 +1,2 @@
-import type { DayOfWeek } from '../../../types';
-export declare function getStartOfWeek(date: Date, firstDayOfWeek?: DayOfWeek): Date;
+import type { DateStringValue, DayOfWeek } from '../../../types';
+export declare function getStartOfWeek(date: DateStringValue, firstDayOfWeek?: DayOfWeek): string;

package/lib/components/Month/get-week-number/get-week-number.d.ts

@@ -1 +1,2 @@
-export declare function getWeekNumber(week: Date[]): number;
+import { DateStringValue } from '../../../types';
+export declare function getWeekNumber(week: DateStringValue[]): number;

package/lib/components/Month/is-after-min-date/is-after-min-date.d.ts

@@ -1 +1,2 @@
-export declare function isAfterMinDate(date: Date, minDate?: Date): boolean;
+import { DateStringValue } from '../../../types';
+export declare function isAfterMinDate(date: DateStringValue, minDate: DateStringValue | undefined): boolean;

package/lib/components/Month/is-before-max-date/is-before-max-date.d.ts

@@ -1 +1,2 @@
-export declare function isBeforeMaxDate(date: Date, maxDate?: Date): boolean;
+import { DateStringValue } from '../../../types';
+export declare function isBeforeMaxDate(date: DateStringValue, maxDate: DateStringValue | undefined): boolean;

package/lib/components/MonthLevel/MonthLevel.d.ts

@@ -1,10 +1,11 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+import { DateLabelFormat, DateStringValue } from '../../types';
 import { CalendarHeaderSettings, CalendarHeaderStylesNames } from '../CalendarHeader';
 import { MonthSettings, MonthStylesNames } from '../Month';
 export type MonthLevelStylesNames = MonthStylesNames | CalendarHeaderStylesNames;
 export interface MonthLevelBaseSettings extends MonthSettings {
-    /** Dayjs label format to display month label or a function that returns month label based on month value, defaults to "MMMM YYYY" */
-    monthLabelFormat?: string | ((month: Date) => React.ReactNode);
+    /** dayjs label format to display month label or a function that returns month label based on month value, `"MMMM YYYY"` */
+    monthLabelFormat?: DateLabelFormat;
 }
 export interface MonthLevelSettings extends MonthLevelBaseSettings, CalendarHeaderSettings {
 }
@@ -13,7 +14,7 @@ export interface MonthLevelProps extends BoxProps, MonthLevelSettings, Omit<Styl
     styles?: Partial<Record<string, React.CSSProperties>>;
     __staticSelector?: string;
     /** Month that is currently displayed */
-    month: Date;
+    month: DateStringValue;
     /** Aria-label for change level control */
     levelControlAriaLabel?: string;
     /** Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way  */

package/lib/components/MonthLevelGroup/MonthLevelGroup.d.ts

@@ -1,4 +1,5 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+import { DateStringValue } from '../../types';
 import { LevelsGroupStylesNames } from '../LevelsGroup';
 import { MonthLevelSettings, MonthLevelStylesNames } from '../MonthLevel';
 export type MonthLevelGroupStylesNames = MonthLevelStylesNames | LevelsGroupStylesNames;
@@ -6,13 +7,13 @@ export interface MonthLevelGroupProps extends BoxProps, Omit<MonthLevelSettings,
     classNames?: Partial<Record<string, string>>;
     styles?: Partial<Record<string, React.CSSProperties>>;
     __staticSelector?: string;
-    /** Number of columns to render next to each other */
+    /** Number of columns to display next to each other */
     numberOfColumns?: number;
-    /** Month that is currently displayed */
-    month: Date;
-    /** Function that returns level control aria-label based on month date */
-    levelControlAriaLabel?: ((month: Date) => string) | string;
-    /** Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way  */
+    /** Month to display */
+    month: DateStringValue;
+    /** Function that returns level control `aria-label` based on month date */
+    levelControlAriaLabel?: ((month: DateStringValue) => string) | string;
+    /** Passed as `isStatic` prop to `Month` component */
     static?: boolean;
 }
 export type MonthLevelGroupFactory = Factory<{

package/lib/components/MonthPicker/MonthPicker.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, ElementProps, Factory, MantineComponentStaticProperties, StylesApiProps } from '@mantine/core';
-import { CalendarLevel, DatePickerType, PickerBaseProps } from '../../types';
+import { CalendarLevel, DatePickerType, DateStringValue, PickerBaseProps } from '../../types';
 import { CalendarBaseProps } from '../Calendar';
 import { DecadeLevelBaseSettings } from '../DecadeLevel';
 import { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';
@@ -8,18 +8,18 @@ import { YearLevelGroupStylesNames } from '../YearLevelGroup';
 export type MonthPickerStylesNames = DecadeLevelGroupStylesNames | YearLevelGroupStylesNames;
 type MonthPickerLevel = Exclude<CalendarLevel, 'month'>;
 export interface MonthPickerBaseProps<Type extends DatePickerType = 'default'> extends PickerBaseProps<Type>, DecadeLevelBaseSettings, YearLevelBaseSettings, Omit<CalendarBaseProps, 'onNextMonth' | 'onPreviousMonth' | 'hasNextLevel'> {
-    /** Max level that user can go up to (decade, year), defaults to decade */
-    maxLevel?: MonthPickerLevel;
-    /** Initial level displayed to the user (decade, year, month), used for uncontrolled component */
-    defaultLevel?: MonthPickerLevel;
-    /** Current level displayed to the user (decade, year, month), used for controlled component */
-    level?: MonthPickerLevel;
+    /** Max level that user can go up to, `'decade'` by default */
+    maxLevel?: CalendarLevel;
+    /** Initial displayed level (uncontrolled) */
+    defaultLevel?: CalendarLevel;
+    /** Current displayed level (controlled) */
+    level?: CalendarLevel;
     /** Called when level changes */
     onLevelChange?: (level: MonthPickerLevel) => void;
 }
 export interface MonthPickerProps<Type extends DatePickerType = 'default'> extends BoxProps, MonthPickerBaseProps<Type>, StylesApiProps<MonthPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
     /** Called when month is selected */
-    onMonthSelect?: (date: Date) => void;
+    onMonthSelect?: (date: DateStringValue) => void;
 }
 export type MonthPickerFactory = Factory<{
     props: MonthPickerProps;

package/lib/components/MonthPickerInput/MonthPickerInput.d.ts

@@ -4,7 +4,7 @@ import { MonthPickerBaseProps, MonthPickerStylesNames } from '../MonthPicker';
 import { DateInputSharedProps } from '../PickerInputBase';
 export type MonthPickerInputStylesNames = __InputStylesNames | 'placeholder' | MonthPickerStylesNames;
 export interface MonthPickerInputProps<Type extends DatePickerType = 'default'> extends BoxProps, DateInputSharedProps, MonthPickerBaseProps<Type>, StylesApiProps<MonthPickerInputFactory> {
-    /** Dayjs format to display input value, "MMMM YYYY" by default  */
+    /** dayjs format for input value, `"MMMM YYYY"` by default  */
     valueFormat?: string;
 }
 export type MonthPickerInputFactory = Factory<{

package/lib/components/MonthsList/MonthsList.d.ts

@@ -1,23 +1,23 @@
 import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
-import { ControlsGroupSettings } from '../../types';
+import { ControlsGroupSettings, DateStringValue } from '../../types';
 import { PickerControlProps } from '../PickerControl';
 export type MonthsListStylesNames = 'monthsList' | 'monthsListCell' | 'monthsListRow' | 'monthsListControl';
 export interface MonthsListSettings extends ControlsGroupSettings {
-    /** Dayjs format for months list  */
+    /** dayjs format for months list */
     monthsListFormat?: string;
-    /** Adds props to month picker control based on date */
-    getMonthControlProps?: (date: Date) => Partial<PickerControlProps>;
-    /** Determines whether propagation for Escape key should be stopped */
-    __stopPropagation?: boolean;
-    /** Determines whether controls should be separated by spacing, true by default */
+    /** Passes props down month picker control */
+    getMonthControlProps?: (date: DateStringValue) => Partial<PickerControlProps>;
+    /** Determines whether controls should be separated, `true` by default */
     withCellSpacing?: boolean;
 }
 export interface MonthsListProps extends BoxProps, MonthsListSettings, StylesApiProps<MonthsListFactory>, ElementProps<'table'> {
     __staticSelector?: string;
     /** Prevents focus shift when buttons are clicked */
     __preventFocus?: boolean;
+    /** Determines whether propagation for Escape key should be stopped */
+    __stopPropagation?: boolean;
     /** Year for which months list should be displayed */
-    year: Date;
+    year: DateStringValue;
     /** Component size */
     size?: MantineSize;
 }

package/lib/components/MonthsList/get-month-in-tab-order/get-month-in-tab-order.d.ts

@@ -1,2 +1,10 @@
+import { DateStringValue } from '../../../types';
 import { PickerControlProps } from '../../PickerControl';
-export declare function getMonthInTabOrder(months: Date[][], minDate: Date | undefined, maxDate: Date | undefined, getMonthControlProps: ((month: Date) => Partial<PickerControlProps>) | undefined): Date;
+interface GetMonthInTabOrderInput {
+    months: DateStringValue[][];
+    minDate: DateStringValue | undefined;
+    maxDate: DateStringValue | undefined;
+    getMonthControlProps: ((month: DateStringValue) => Partial<PickerControlProps>) | undefined;
+}
+export declare function getMonthInTabOrder({ months, minDate, maxDate, getMonthControlProps, }: GetMonthInTabOrderInput): string;
+export {};

package/lib/components/MonthsList/get-months-data/get-months-data.d.ts

@@ -1 +1,2 @@
-export declare function getMonthsData(year: Date): Date[][];
+import { DateStringValue } from '../../../types';
+export declare function getMonthsData(year: DateStringValue): string[][];

package/lib/components/MonthsList/is-month-disabled/is-month-disabled.d.ts

@@ -1 +1,8 @@
-export declare function isMonthDisabled(month: Date, minDate: Date | null | undefined, maxDate: Date | null | undefined): boolean;
+import { DateStringValue } from '../../../types';
+interface IsMonthDisabledInput {
+    month: DateStringValue;
+    minDate: DateStringValue | undefined;
+    maxDate: DateStringValue | undefined;
+}
+export declare function isMonthDisabled({ month, minDate, maxDate }: IsMonthDisabledInput): boolean;
+export {};

package/lib/components/PickerControl/PickerControl.d.ts

@@ -7,15 +7,15 @@ export interface PickerControlProps extends BoxProps, StylesApiProps<PickerContr
     __staticSelector?: string;
     /** Control children */
     children?: React.ReactNode;
-    /** Determines whether control should be disabled */
+    /** Disables control */
     disabled?: boolean;
-    /** Determines whether control should have selected styles */
+    /** Assigns selected styles */
     selected?: boolean;
-    /** Determines whether control is selected in range */
+    /** Assigns in range styles */
     inRange?: boolean;
-    /** Determines whether control is first in range selection */
+    /** Assigns first in range styles */
     firstInRange?: boolean;
-    /** Determines whether control is last in range selection */
+    /** Assigns last in range styles */
     lastInRange?: boolean;
     /** Component size */
     size?: MantineSize;