@mantine/dates 8.3.15 → 9.0.0-alpha.1

package/lib/components/CalendarHeader/CalendarHeader.d.ts

@@ -25,16 +25,18 @@ export interface CalendarHeaderSettings {
     nextDisabled?: boolean;
     /** Disables previous control */
     previousDisabled?: boolean;
-    /** Determines whether next level button should be enabled @default `true` */
+    /** Determines whether next level button should be enabled @default true */
     hasNextLevel?: boolean;
-    /** Determines whether next control should be rendered @default `true` */
+    /** Determines whether next control should be rendered @default true */
     withNext?: boolean;
-    /** Determines whether previous control should be rendered @default `true` */
+    /** Determines whether previous control should be rendered @default true */
     withPrevious?: boolean;
     /** Component size */
     size?: MantineSize;
-    /** Controls order @default `['previous', 'level', 'next']` */
+    /** Controls order @default ['previous', 'level', 'next'] */
     headerControlsOrder?: ('previous' | 'next' | 'level')[];
+    /** Determines whether the header should take the full width of its container @default false */
+    fullWidth?: boolean;
 }
 export interface CalendarHeaderProps extends BoxProps, CalendarHeaderSettings, StylesApiProps<CalendarHeaderFactory>, ElementProps<'div'> {
     __staticSelector?: string;

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

@@ -1,2 +1,10 @@
+import type { CalendarHeaderCssVariables, CalendarHeaderFactory, CalendarHeaderProps, CalendarHeaderSettings, CalendarHeaderStylesNames } from './CalendarHeader';
 export { CalendarHeader } from './CalendarHeader';
-export type { CalendarHeaderProps, CalendarHeaderCssVariables, CalendarHeaderSettings, CalendarHeaderFactory, CalendarHeaderStylesNames, } from './CalendarHeader';
+export type { CalendarHeaderProps, CalendarHeaderStylesNames, CalendarHeaderCssVariables, CalendarHeaderSettings, CalendarHeaderFactory, };
+export declare namespace CalendarHeader {
+    type Props = CalendarHeaderProps;
+    type StylesNames = CalendarHeaderStylesNames;
+    type CssVariables = CalendarHeaderCssVariables;
+    type Settings = CalendarHeaderSettings;
+    type Factory = CalendarHeaderFactory;
+}

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

@@ -1,4 +1,4 @@
-import { __BaseInputProps, __InputStylesNames, BoxProps, ElementProps, Factory, InputVariant, PopoverProps, StylesApiProps } from '@mantine/core';
+import { __BaseInputProps, __InputStylesNames, BoxProps, ClearSectionMode, ElementProps, Factory, InputVariant, PopoverProps, StylesApiProps } from '@mantine/core';
 import { CalendarLevel, DateStringValue, DateValue } from '../../types';
 import { CalendarBaseProps, CalendarStylesNames } from '../Calendar';
 import { DecadeLevelSettings } from '../DecadeLevel';
@@ -16,17 +16,19 @@ export interface DateInputProps extends BoxProps, Omit<__BaseInputProps, 'size'>
     onChange?: (value: DateStringValue | null) => void;
     /** Props passed down to the `Popover` component */
     popoverProps?: Partial<Omit<PopoverProps, 'children'>>;
-    /** If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. @default `false` */
+    /** If set, clear button is displayed in the `rightSection` when the component has value. Ignored if `rightSection` prop is set. @default false */
     clearable?: boolean;
+    /** Determines how the clear button and rightSection are rendered @default 'both' */
+    clearSectionMode?: ClearSectionMode;
     /** Props passed down to the clear button */
-    clearButtonProps?: React.ComponentPropsWithoutRef<'button'>;
+    clearButtonProps?: React.ComponentProps<'button'>;
     /** `dayjs` format to display input value, `"MMMM D, YYYY"` by default  */
     valueFormat?: string;
     /** If set to `false`, invalid user input is preserved and is not corrected on blur */
     fixOnBlur?: boolean;
     /** If set, the value can be deselected by deleting everything from the input or by clicking the selected date in the dropdown. By default, `true` if `clearable` prop is set, `false` otherwise. */
     allowDeselect?: boolean;
-    /** 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;

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' | 'placeholder' | 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,26 +11,28 @@ 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;
+    /** Determines whether the day should take the full width of its cell @default false */
+    fullWidth?: boolean;
 }
 export type DayFactory = Factory<{
     props: DayProps;

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'> {
@@ -17,6 +17,8 @@ export interface DecadeLevelProps extends BoxProps, DecadeLevelSettings, Omit<St
     decade: DateStringValue;
     /** Level control `aria-label` */
     levelControlAriaLabel?: string;
+    /** Determines whether the calendar should take the full width of its container @default false */
+    fullWidth?: boolean;
 }
 export type DecadeLevelFactory = Factory<{
     props: DecadeLevelProps;

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

@@ -13,6 +13,8 @@ export interface DecadeLevelGroupProps extends BoxProps, Omit<StylesApiProps<Dec
     decade: DateStringValue;
     /** Function that returns level control `aria-label` based on year date */
     levelControlAriaLabel?: ((decade: DateStringValue) => string) | string;
+    /** Determines whether the calendar should take the full width of its container @default false */
+    fullWidth?: boolean;
 }
 export type DecadeLevelGroupFactory = Factory<{
     props: DecadeLevelGroupProps;

package/lib/components/LevelsGroup/LevelsGroup.d.ts

@@ -3,6 +3,8 @@ export type LevelsGroupStylesNames = 'levelsGroup';
 export interface LevelsGroupProps extends BoxProps, StylesApiProps<LevelsGroupFactory>, ElementProps<'div'> {
     __staticSelector?: string;
     size?: MantineSize;
+    /** Determines whether the group should take the full width of its container @default false */
+    fullWidth?: boolean;
 }
 export type LevelsGroupFactory = Factory<{
     props: LevelsGroupProps;

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,24 @@ 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;
+    /** Determines whether the month should take the full width of its container @default false */
+    fullWidth?: 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 +64,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;
+}