@mantine/dates 8.3.13 → 9.0.0-alpha.0

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

@@ -1,2 +1,8 @@
+import type { DateInputFactory, DateInputProps, DateInputStylesNames } from './DateInput';
 export { DateInput } from './DateInput';
-export type { DateInputProps, DateInputStylesNames, DateInputFactory } from './DateInput';
+export type { DateInputProps, DateInputStylesNames, DateInputFactory };
+export declare namespace DateInput {
+    type Props = DateInputProps;
+    type StylesNames = DateInputStylesNames;
+    type Factory = DateInputFactory;
+}

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

@@ -31,9 +31,10 @@ export type DatePickerFactory = Factory<{
     props: DatePickerProps;
     ref: HTMLDivElement;
     stylesNames: DatePickerStylesNames;
+    vars: DatePickerCssVariables;
 }>;
 type DatePickerComponent = (<Type extends DatePickerType = 'default'>(props: DatePickerProps<Type> & {
-    ref?: React.ForwardedRef<HTMLDivElement>;
+    ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element) & {
     displayName?: string;
 } & MantineComponentStaticProperties<DatePickerFactory>;

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

@@ -1,2 +1,12 @@
+import { DatePickerType } from '../../types';
+import type { DatePickerBaseProps, DatePickerCssVariables, DatePickerFactory, DatePickerPreset, DatePickerProps, DatePickerStylesNames } from './DatePicker';
 export { DatePicker } from './DatePicker';
-export type { DatePickerBaseProps, DatePickerProps, DatePickerFactory, DatePickerStylesNames, DatePickerPreset, DatePickerCssVariables, } from './DatePicker';
+export type { DatePickerProps, DatePickerBaseProps, DatePickerStylesNames, DatePickerFactory, DatePickerPreset, DatePickerCssVariables, };
+export declare namespace DatePicker {
+    type Props<Type extends DatePickerType> = DatePickerProps<Type>;
+    type BaseProps = DatePickerBaseProps;
+    type StylesNames = DatePickerStylesNames;
+    type Factory = DatePickerFactory;
+    type Preset<Type extends DatePickerType> = DatePickerPreset<Type>;
+    type CssVariables = DatePickerCssVariables;
+}

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

@@ -4,7 +4,7 @@ import { DatePickerBaseProps, DatePickerStylesNames } from '../DatePicker';
 import { DateInputSharedProps } from '../PickerInputBase';
 export type DatePickerInputStylesNames = __InputStylesNames | 'placeholder' | DatePickerStylesNames;
 export interface DatePickerInputProps<Type extends DatePickerType = 'default'> extends BoxProps, DateInputSharedProps, DatePickerBaseProps<Type>, StylesApiProps<DatePickerInputFactory> {
-    /** `dayjs` format for input value @default `"MMMM D, YYYY"` */
+    /** `dayjs` format for input value @default "MMMM D, YYYY" */
     valueFormat?: string;
 }
 export type DatePickerInputFactory = Factory<{
@@ -14,7 +14,7 @@ export type DatePickerInputFactory = Factory<{
     variant: InputVariant;
 }>;
 type DatePickerInputComponent = (<Type extends DatePickerType = 'default'>(props: DatePickerInputProps<Type> & {
-    ref?: React.ForwardedRef<HTMLButtonElement>;
+    ref?: React.Ref<HTMLButtonElement>;
 }) => React.JSX.Element) & {
     displayName?: string;
 } & MantineComponentStaticProperties<DatePickerInputFactory>;

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

@@ -1,2 +1,8 @@
+import type { DatePickerInputFactory, DatePickerInputProps, DatePickerInputStylesNames } from './DatePickerInput';
 export { DatePickerInput } from './DatePickerInput';
-export type { DatePickerInputProps, DatePickerInputStylesNames, DatePickerInputFactory, } from './DatePickerInput';
+export type { DatePickerInputProps, DatePickerInputStylesNames, DatePickerInputFactory };
+export declare namespace DatePickerInput {
+    type Props = DatePickerInputProps;
+    type StylesNames = DatePickerInputStylesNames;
+    type Factory = DatePickerInputFactory;
+}

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

@@ -6,7 +6,7 @@ import { DateInputSharedProps, PickerInputBaseStylesNames } from '../PickerInput
 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'>, CalendarBaseProps, Omit<CalendarSettings, 'onYearMouseEnter' | 'onMonthMouseEnter' | 'hasNextLevel'>, StylesApiProps<DateTimePickerFactory> {
-    /** `dayjs` format for input value @default `"DD/MM/YYYY HH:mm"  */
+    /** `dayjs` format for input value @default "DD/MM/YYYY HH:mm"  */
     valueFormat?: string;
     /** Controlled component value */
     value?: DateValue;
@@ -14,15 +14,15 @@ export interface DateTimePickerProps extends BoxProps, Omit<DateInputSharedProps
     defaultValue?: DateValue;
     /** Called when value changes */
     onChange?: (value: DateStringValue | null) => void;
-    /** Default time value in `HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. */
+    /** Default time value in HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. */
     defaultTimeValue?: string;
     /** 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 the seconds input should be displayed @default `false` */
+    submitButtonProps?: ActionIconProps & React.ComponentProps<'button'>;
+    /** Determines whether the seconds input should be displayed @default false */
     withSeconds?: boolean;
-    /** Max level that user can go up to @default `'decade'` */
+    /** Max level that user can go up to @default 'decade' */
     maxLevel?: CalendarLevel;
     /** Presets values */
     presets?: DatePickerPreset<'default'>[];

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

@@ -1,2 +1,8 @@
+import type { DateTimePickerFactory, DateTimePickerProps, DateTimePickerStylesNames } from './DateTimePicker';
 export { DateTimePicker } from './DateTimePicker';
-export type { DateTimePickerProps, DateTimePickerStylesNames, DateTimePickerFactory, } from './DateTimePicker';
+export type { DateTimePickerProps, DateTimePickerStylesNames, DateTimePickerFactory };
+export declare namespace DateTimePicker {
+    type Props = DateTimePickerProps;
+    type StylesNames = DateTimePickerStylesNames;
+    type Factory = DateTimePickerFactory;
+}

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

@@ -1,3 +1,8 @@
+import type { DatesProviderProps, DatesProviderSettings } from './DatesProvider';
 export { DATES_PROVIDER_DEFAULT_SETTINGS, DatesProvider } from './DatesProvider';
 export { useDatesContext } from './use-dates-context';
-export type { DatesProviderProps, DatesProviderSettings } from './DatesProvider';
+export type { DatesProviderProps, DatesProviderSettings };
+export declare namespace DatesProvider {
+    type Props = DatesProviderProps;
+    type Settings = DatesProviderSettings;
+}

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

@@ -11,25 +11,25 @@ export interface DayProps extends BoxProps, StylesApiProps<DayFactory>, ElementP
     static?: boolean;
     /** Date that is displayed in `YYYY-MM-DD` format */
     date: DateStringValue;
-    /** Control width and height of the day @default `'sm'` */
+    /** Control width and height of the day @default 'sm' */
     size?: MantineSize;
-    /** Determines whether the day is considered to be a weekend @default `false` */
+    /** Determines whether the day is considered to be a weekend @default false */
     weekend?: boolean;
-    /** Determines whether the day is outside of the current month @default `false` */
+    /** Determines whether the day is outside of the current month @default false */
     outside?: boolean;
-    /** Determines whether the day is selected @default `false` */
+    /** Determines whether the day is selected @default false */
     selected?: boolean;
-    /** Determines whether the day should not be displayed @default `false` */
+    /** Determines whether the day should not be displayed @default false */
     hidden?: boolean;
-    /** Determines whether the day is selected in range @default `false` */
+    /** Determines whether the day is selected in range @default false */
     inRange?: boolean;
-    /** Determines whether the day is first in range selection @default `false` */
+    /** Determines whether the day is first in range selection @default false */
     firstInRange?: boolean;
-    /** Determines whether the day is last in range selection @default `false` */
+    /** Determines whether the day is last in range selection @default false */
     lastInRange?: boolean;
     /** Controls day value rendering */
     renderDay?: RenderDay;
-    /** Determines whether today should be highlighted with a border @default `false` */
+    /** Determines whether today should be highlighted with a border @default false */
     highlightToday?: boolean;
 }
 export type DayFactory = Factory<{

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

@@ -1,2 +1,9 @@
+import type { DayCssVariables, DayFactory, DayProps, DayStylesNames, RenderDay } from './Day';
 export { Day } from './Day';
-export type { DayCssVariables, DayFactory, DayProps, DayStylesNames, RenderDay } from './Day';
+export type { DayProps, DayStylesNames, DayFactory, DayCssVariables, RenderDay };
+export declare namespace Day {
+    type Props = DayProps;
+    type StylesNames = DayStylesNames;
+    type Factory = DayFactory;
+    type CssVariables = DayCssVariables;
+}

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

@@ -4,7 +4,7 @@ import { CalendarHeaderSettings, CalendarHeaderStylesNames } from '../CalendarHe
 import { YearsListSettings, YearsListStylesNames } from '../YearsList';
 export type DecadeLevelStylesNames = YearsListStylesNames | CalendarHeaderStylesNames;
 export interface DecadeLevelBaseSettings extends YearsListSettings {
-    /** `dayjs` format for decade label or a function that returns decade label based on the date value @default `"YYYY"` */
+    /** `dayjs` format for decade label or a function that returns decade label based on the date value @default "YYYY" */
     decadeLabelFormat?: string | ((startOfDecade: DateStringValue, endOfDecade: DateStringValue) => React.ReactNode);
 }
 export interface DecadeLevelSettings extends DecadeLevelBaseSettings, Omit<CalendarHeaderSettings, 'onLevelClick' | 'hasNextLevel'> {

package/lib/components/MaskedDateInput/MaskedDateInput.context.d.ts

@@ -0,0 +1,7 @@
+import { type GetStylesApi } from '@mantine/core';
+import type { MaskedDateInputFactory } from './MaskedDateInput';
+interface MaskedDateInputContextValue {
+    getStyles: GetStylesApi<MaskedDateInputFactory>;
+}
+export declare const MaskedDateInputProvider: import("react").Context<MaskedDateInputContextValue | null>, useMaskedDateInputContext: () => MaskedDateInputContextValue;
+export {};

package/lib/components/MaskedDateInput/MaskedDateInput.d.ts

@@ -0,0 +1,123 @@
+import { __BaseInputProps, __InputStylesNames, BoxProps, CloseButtonProps, DataAttributes, ElementProps, Factory, InputVariant, MantineSize, PopoverProps, StylesApiProps } from '@mantine/core';
+import { DateStringValue } from '../../types';
+import { CalendarBaseProps, CalendarStylesNames } from '../Calendar';
+import { DecadeLevelSettings } from '../DecadeLevel';
+import { MonthLevelSettings } from '../MonthLevel';
+import { TimePickerAmPmLabels, TimePickerFormat } from '../TimePicker/TimePicker.types';
+import { YearLevelSettings } from '../YearLevel';
+import type { MaskedDateInputOrder, MaskedDateInputPasteSplit } from './MaskedDateInput.types';
+export type MaskedDateInputStylesNames = 'fieldsRoot' | 'fieldsGroup' | 'field' | 'yearField' | 'separator' | 'dropdown' | CalendarStylesNames | __InputStylesNames;
+export interface MaskedDateInputProps extends BoxProps, Omit<__BaseInputProps, 'size'>, CalendarBaseProps, Omit<DecadeLevelSettings, 'size'>, Omit<YearLevelSettings, 'size'>, Omit<MonthLevelSettings, 'size'>, StylesApiProps<MaskedDateInputFactory>, ElementProps<'div', 'onChange' | 'defaultValue' | 'size'> {
+    /** Component size */
+    size?: MantineSize;
+    /** Controlled component value in YYYY-MM-DD or YYYY-MM-DDTHH:MM:SS format */
+    value?: DateStringValue | null;
+    /** Uncontrolled component default value */
+    defaultValue?: DateStringValue | null;
+    /** Called when value changes */
+    onChange?: (value: DateStringValue | null) => void;
+    /** Order of date fields, @default ['day', 'month', 'year'] */
+    dateFieldsOrder?: MaskedDateInputOrder;
+    /** Separator between date fields, @default '/' */
+    dateSeparator?: string;
+    /** Separator between time fields, @default ':' */
+    timeSeparator?: string;
+    /** Separator between date and time fields, @default ' ' */
+    dateTimeSeparator?: string;
+    /** Determines whether to show time inputs, @default false */
+    withTime?: boolean;
+    /** Determines whether to show seconds input, @default false */
+    withSeconds?: boolean;
+    /** Time format, @default '24h' */
+    timeFormat?: TimePickerFormat;
+    /** Labels used for am/pm values, @default { am: 'AM', pm: 'PM' } */
+    amPmLabels?: TimePickerAmPmLabels;
+    /** Props passed down to the `Popover` component */
+    popoverProps?: PopoverProps;
+    /** Determines whether the clear button should be displayed, @default false */
+    clearable?: boolean;
+    /** Props passed down to clear button */
+    clearButtonProps?: CloseButtonProps & ElementProps<'button'> & DataAttributes;
+    /** `name` prop passed down to the hidden input */
+    name?: string;
+    /** `form` prop passed down to the hidden input */
+    form?: string;
+    /** Called once when one of the inputs is focused */
+    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;
+    /** Props passed down to day input */
+    dayInputProps?: React.ComponentProps<'input'> & DataAttributes;
+    /** Props passed down to month input */
+    monthInputProps?: React.ComponentProps<'input'> & DataAttributes;
+    /** Props passed down to year input */
+    yearInputProps?: React.ComponentProps<'input'> & DataAttributes;
+    /** Props passed down to hours input */
+    hoursInputProps?: React.ComponentProps<'input'> & DataAttributes;
+    /** Props passed down to minutes input */
+    minutesInputProps?: React.ComponentProps<'input'> & DataAttributes;
+    /** Props passed down to seconds input */
+    secondsInputProps?: React.ComponentProps<'input'> & DataAttributes;
+    /** Props passed down to am/pm select */
+    amPmSelectProps?: React.ComponentProps<'select'> & DataAttributes;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;
+    /** A function to transform paste values */
+    pasteSplit?: MaskedDateInputPasteSplit;
+    /** A ref object to get node reference of the day input */
+    dayRef?: React.Ref<HTMLInputElement>;
+    /** A ref object to get node reference of the month input */
+    monthRef?: React.Ref<HTMLInputElement>;
+    /** A ref object to get node reference of the year input */
+    yearRef?: React.Ref<HTMLInputElement>;
+    /** A ref object to get node reference of the hours input */
+    hoursRef?: React.Ref<HTMLInputElement>;
+    /** A ref object to get node reference of the minutes input */
+    minutesRef?: React.Ref<HTMLInputElement>;
+    /** A ref object to get node reference of the seconds input */
+    secondsRef?: React.Ref<HTMLInputElement>;
+    /** A ref object to get node reference of the am/pm select */
+    amPmRef?: React.Ref<HTMLSelectElement>;
+    /** Day input placeholder, @default 'DD' */
+    dayPlaceholder?: string;
+    /** Month input placeholder, @default 'MM' */
+    monthPlaceholder?: string;
+    /** Year input placeholder, @default 'YYYY' */
+    yearPlaceholder?: string;
+    /** Hours input placeholder, @default '--' */
+    hoursPlaceholder?: string;
+    /** Minutes input placeholder, @default '--' */
+    minutesPlaceholder?: string;
+    /** Seconds input placeholder, @default '--' */
+    secondsPlaceholder?: string;
+    /** `aria-label` for day input */
+    dayInputLabel?: string;
+    /** `aria-label` for month input */
+    monthInputLabel?: string;
+    /** `aria-label` for year input */
+    yearInputLabel?: string;
+    /** `aria-label` for hours input */
+    hoursInputLabel?: string;
+    /** `aria-label` for minutes input */
+    minutesInputLabel?: string;
+    /** `aria-label` for seconds input */
+    secondsInputLabel?: string;
+    /** `aria-label` of am/pm input */
+    amPmInputLabel?: string;
+}
+export type MaskedDateInputFactory = Factory<{
+    props: MaskedDateInputProps;
+    ref: HTMLDivElement;
+    stylesNames: MaskedDateInputStylesNames;
+    variant: InputVariant;
+}>;
+export declare const MaskedDateInput: import("@mantine/core").MantineComponent<{
+    props: MaskedDateInputProps;
+    ref: HTMLDivElement;
+    stylesNames: MaskedDateInputStylesNames;
+    variant: InputVariant;
+}>;

package/lib/components/MaskedDateInput/MaskedDateInput.types.d.ts

@@ -0,0 +1,19 @@
+import { TimePickerAmPmLabels, TimePickerFormat } from '../TimePicker/TimePicker.types';
+export type MaskedDateInputField = 'day' | 'month' | 'year';
+export type MaskedDateInputOrder = MaskedDateInputField[];
+export interface MaskedDateInputParsedValue {
+    day: number | null;
+    month: number | null;
+    year: number | null;
+    hours: number | null;
+    minutes: number | null;
+    seconds: number | null;
+    amPm: string | null;
+}
+export interface MaskedDateInputPasteSplit {
+    (input: {
+        value: string;
+        format: TimePickerFormat;
+        amPmLabels: TimePickerAmPmLabels;
+    }): MaskedDateInputParsedValue;
+}

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

@@ -0,0 +1,12 @@
+import type { MaskedDateInputFactory, MaskedDateInputProps, MaskedDateInputStylesNames } from './MaskedDateInput';
+import type { MaskedDateInputField, MaskedDateInputOrder, MaskedDateInputPasteSplit } from './MaskedDateInput.types';
+export { MaskedDateInput } from './MaskedDateInput';
+export type { MaskedDateInputProps, MaskedDateInputStylesNames, MaskedDateInputFactory, MaskedDateInputField, MaskedDateInputOrder, MaskedDateInputPasteSplit, };
+export declare namespace MaskedDateInput {
+    type Props = MaskedDateInputProps;
+    type StylesNames = MaskedDateInputStylesNames;
+    type Factory = MaskedDateInputFactory;
+    type Field = MaskedDateInputField;
+    type Order = MaskedDateInputOrder;
+    type PasteSplit = MaskedDateInputPasteSplit;
+}

package/lib/components/MaskedDateInput/use-masked-date-input.d.ts

@@ -0,0 +1,56 @@
+import { DateStringValue } from '../../types';
+import { TimePickerAmPmLabels, TimePickerFormat } from '../TimePicker/TimePicker.types';
+import type { MaskedDateInputPasteSplit } from './MaskedDateInput.types';
+interface UseMaskedDateInputInput {
+    value: DateStringValue | undefined;
+    defaultValue: DateStringValue | undefined;
+    onChange: ((value: DateStringValue | null) => void) | undefined;
+    withTime: boolean | undefined;
+    withSeconds: boolean | undefined;
+    format: TimePickerFormat;
+    amPmLabels: TimePickerAmPmLabels;
+    min: string | undefined;
+    max: string | undefined;
+    minDate: DateStringValue | Date | undefined;
+    maxDate: DateStringValue | Date | undefined;
+    readOnly: boolean | undefined;
+    disabled: boolean | undefined;
+    clearable: boolean | undefined;
+    pasteSplit: MaskedDateInputPasteSplit | undefined;
+}
+export declare function useMaskedDateInput({ value, defaultValue, onChange, withTime, withSeconds, format, amPmLabels, min, max, minDate, maxDate, clearable, readOnly, disabled, pasteSplit, }: UseMaskedDateInputInput): {
+    values: {
+        day: number | null;
+        month: number | null;
+        year: number | null;
+        hours: number | null;
+        minutes: number | null;
+        seconds: number | null;
+        amPm: string | null;
+    };
+    setDay: (val: number | null) => void;
+    setMonth: (val: number | null) => void;
+    setYear: (val: number | null) => void;
+    setHours: (val: number | null) => void;
+    setMinutes: (val: number | null) => void;
+    setSeconds: (val: number | null) => void;
+    setAmPm: (val: string | null) => void;
+    setDateValue: (dateValue: DateStringValue | null) => void;
+    clear: () => void;
+    isClearable: boolean | undefined;
+    refs: {
+        day: import("react").RefObject<HTMLInputElement | null>;
+        month: import("react").RefObject<HTMLInputElement | null>;
+        year: import("react").RefObject<HTMLInputElement | null>;
+        hours: import("react").RefObject<HTMLInputElement | null>;
+        minutes: import("react").RefObject<HTMLInputElement | null>;
+        seconds: import("react").RefObject<HTMLInputElement | null>;
+        amPm: import("react").RefObject<HTMLSelectElement | null>;
+    };
+    focus: (field: "day" | "month" | "year" | "hours" | "minutes" | "seconds" | "amPm") => void;
+    onPaste: (event: React.ClipboardEvent<any>) => void;
+    hiddenInputValue: string;
+    calendarValue: string | null;
+    getDaysInMonth: () => number;
+};
+export {};

package/lib/components/MiniCalendar/MiniCalendar.d.ts

@@ -20,7 +20,7 @@ export interface MiniCalendarProps extends BoxProps, StylesApiProps<MiniCalendar
     minDate?: Date | string;
     /** Number of days to display in the calendar @default 7 */
     numberOfDays?: number;
-    /** Dayjs format string for month label @default `MMM` */
+    /** Dayjs format string for month label @default MMM */
     monthLabelFormat?: string;
     /** Called when the next button is clicked */
     onNext?: () => void;
@@ -31,9 +31,9 @@ export interface MiniCalendarProps extends BoxProps, StylesApiProps<MiniCalendar
     /** Component size @default 'sm' */
     size?: MantineSize;
     /** Props passed to previous control button */
-    previousControlProps?: React.ComponentPropsWithoutRef<'button'> & DataAttributes;
+    previousControlProps?: React.ComponentProps<'button'> & DataAttributes;
     /** Props passed to next control button */
-    nextControlProps?: React.ComponentPropsWithoutRef<'button'> & DataAttributes;
+    nextControlProps?: React.ComponentProps<'button'> & DataAttributes;
     /** dayjs locale used for formatting */
     locale?: string;
 }

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

@@ -1,2 +1,9 @@
+import type { MiniCalendarCssVariables, MiniCalendarFactory, MiniCalendarProps, MiniCalendarStylesNames } from './MiniCalendar';
 export { MiniCalendar } from './MiniCalendar';
-export type { MiniCalendarCssVariables, MiniCalendarFactory, MiniCalendarStylesNames, MiniCalendarProps, } from './MiniCalendar';
+export type { MiniCalendarProps, MiniCalendarStylesNames, MiniCalendarFactory, MiniCalendarCssVariables, };
+export declare namespace MiniCalendar {
+    type Props = MiniCalendarProps;
+    type StylesNames = MiniCalendarStylesNames;
+    type Factory = MiniCalendarFactory;
+    type CssVariables = MiniCalendarCssVariables;
+}

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

@@ -2,6 +2,9 @@ import { BoxProps, DataAttributes, ElementProps, Factory, MantineSize, StylesApi
 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 type MonthCssVariables = {
+    weekNumber: '--wn-fz' | '--wn-size';
+};
 export interface MonthSettings {
     /** Determines whether propagation for `Escape` key should be stopped */
     __stopPropagation?: boolean;
@@ -17,9 +20,9 @@ export interface MonthSettings {
     __getDayRef?: (rowIndex: number, cellIndex: number, node: HTMLButtonElement) => void;
     /** `dayjs` locale, the default value is defined by `DatesProvider` */
     locale?: string;
-    /** Number 0-6, where 0 – Sunday and 6 – Saturday. @default `1` – Monday */
+    /** Number 0-6, where 0 – Sunday and 6 – Saturday. @default 1 – Monday */
     firstDayOfWeek?: DayOfWeek;
-    /** `dayjs` format for weekdays names @default `'dd'` */
+    /** `dayjs` format for weekdays names @default 'dd' */
     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[];
@@ -33,22 +36,22 @@ export interface MonthSettings {
     maxDate?: DateStringValue | Date;
     /** Controls day value rendering */
     renderDay?: RenderDay;
-    /** Determines whether outside dates should be hidden @default `false` */
+    /** Determines whether outside dates should be hidden @default false */
     hideOutsideDates?: boolean;
-    /** Determines whether weekdays row should be hidden @default `false` */
+    /** Determines whether weekdays row should be hidden @default false */
     hideWeekdays?: boolean;
     /** Assigns `aria-label` to `Day` components based on date */
     getDayAriaLabel?: (date: DateStringValue) => string;
     /** Controls size */
     size?: MantineSize;
-    /** Determines whether controls should be separated by space @default `true` */
+    /** Determines whether controls should be separated by space @default true */
     withCellSpacing?: boolean;
-    /** Determines whether today should be highlighted with a border @default `false` */
+    /** Determines whether today should be highlighted with a border @default false */
     highlightToday?: boolean;
-    /** Determines whether week numbers should be displayed @default `false` */
+    /** Determines whether week numbers should be displayed @default false */
     withWeekNumbers?: boolean;
 }
-export interface MonthProps extends BoxProps, MonthSettings, StylesApiProps<MonthFactory>, ElementProps<'div'> {
+export interface MonthProps extends BoxProps, MonthSettings, StylesApiProps<MonthFactory>, ElementProps<'table'> {
     __staticSelector?: string;
     /** Month to display, value `YYYY-MM-DD` */
     month: DateStringValue;
@@ -59,9 +62,11 @@ export type MonthFactory = Factory<{
     props: MonthProps;
     ref: HTMLTableElement;
     stylesNames: MonthStylesNames;
+    vars: MonthCssVariables;
 }>;
 export declare const Month: import("@mantine/core").MantineComponent<{
     props: MonthProps;
     ref: HTMLTableElement;
     stylesNames: MonthStylesNames;
+    vars: MonthCssVariables;
 }>;

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

@@ -1,6 +1,13 @@
+import type { MonthFactory, MonthProps, MonthSettings, MonthStylesNames } from './Month';
 export { getEndOfWeek } from './get-end-of-week/get-end-of-week';
 export { getStartOfWeek } from './get-start-of-week/get-start-of-week';
 export { getMonthDays } from './get-month-days/get-month-days';
 export { isSameMonth } from './is-same-month/is-same-month';
 export { Month } from './Month';
-export type { MonthProps, MonthSettings, MonthStylesNames, MonthFactory } from './Month';
+export type { MonthProps, MonthSettings, MonthStylesNames, MonthFactory };
+export declare namespace Month {
+    type Props = MonthProps;
+    type Settings = MonthSettings;
+    type StylesNames = MonthStylesNames;
+    type Factory = MonthFactory;
+}

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

@@ -4,7 +4,7 @@ import { CalendarHeaderSettings, CalendarHeaderStylesNames } from '../CalendarHe
 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 @default `"MMMM YYYY"` */
+    /** dayjs label format to display month label or a function that returns month label based on month value @default "MMMM YYYY" */
     monthLabelFormat?: DateLabelFormat;
 }
 export interface MonthLevelSettings extends MonthLevelBaseSettings, CalendarHeaderSettings {

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

@@ -8,7 +8,7 @@ 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 @default `'decade'` */
+    /** Max level that user can go up to @default 'decade' */
     maxLevel?: CalendarLevel;
     /** Initial displayed level (uncontrolled) */
     defaultLevel?: CalendarLevel;
@@ -27,7 +27,7 @@ export type MonthPickerFactory = Factory<{
     stylesNames: MonthPickerStylesNames;
 }>;
 type MonthPickerComponent = (<Type extends DatePickerType = 'default'>(props: MonthPickerProps<Type> & {
-    ref?: React.ForwardedRef<HTMLDivElement>;
+    ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element) & {
     displayName?: string;
 } & MantineComponentStaticProperties<MonthPickerFactory>;

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

@@ -1,2 +1,9 @@
+import { DatePickerType } from '../../types';
+import type { MonthPickerBaseProps, MonthPickerFactory, MonthPickerProps, MonthPickerStylesNames } from './MonthPicker';
 export { MonthPicker } from './MonthPicker';
-export type { MonthPickerBaseProps, MonthPickerProps, MonthPickerFactory, MonthPickerStylesNames, } from './MonthPicker';
+export type { MonthPickerBaseProps, MonthPickerProps, MonthPickerStylesNames, MonthPickerFactory };
+export declare namespace MonthPicker {
+    type Props<Type extends DatePickerType = 'default'> = MonthPickerProps<Type>;
+    type StylesNames = MonthPickerStylesNames;
+    type Factory = MonthPickerFactory;
+}

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 for input value @default `"MMMM YYYY"` */
+    /** `dayjs` format for input value @default "MMMM YYYY" */
     valueFormat?: string;
 }
 export type MonthPickerInputFactory = Factory<{
@@ -14,7 +14,7 @@ export type MonthPickerInputFactory = Factory<{
     variant: InputVariant;
 }>;
 type MonthPickerInputComponent = (<Type extends DatePickerType = 'default'>(props: MonthPickerInputProps<Type> & {
-    ref?: React.ForwardedRef<HTMLButtonElement>;
+    ref?: React.Ref<HTMLButtonElement>;
 }) => React.JSX.Element) & {
     displayName?: string;
 } & MantineComponentStaticProperties<MonthPickerInputFactory>;

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

@@ -1,2 +1,9 @@
+import { DatePickerType } from '../../types';
+import type { MonthPickerInputFactory, MonthPickerInputProps, MonthPickerInputStylesNames } from './MonthPickerInput';
 export { MonthPickerInput } from './MonthPickerInput';
-export type { MonthPickerInputProps, MonthPickerInputStylesNames, MonthPickerInputFactory, } from './MonthPickerInput';
+export type { MonthPickerInputProps, MonthPickerInputStylesNames, MonthPickerInputFactory };
+export declare namespace MonthPickerInput {
+    type Props<Type extends DatePickerType = 'default'> = MonthPickerInputProps<Type>;
+    type StylesNames = MonthPickerInputStylesNames;
+    type Factory = MonthPickerInputFactory;
+}

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

@@ -7,7 +7,7 @@ export interface MonthsListSettings extends ControlsGroupSettings {
     monthsListFormat?: string;
     /** Passes props down month picker control */
     getMonthControlProps?: (date: DateStringValue) => Partial<PickerControlProps> & DataAttributes;
-    /** Determines whether controls should be separated @default `true` */
+    /** Determines whether controls should be separated @default true */
     withCellSpacing?: boolean;
 }
 export interface MonthsListProps extends BoxProps, MonthsListSettings, StylesApiProps<MonthsListFactory>, ElementProps<'table'> {