@ozen-ui/kit 0.60.0 → 0.62.0

package/__inner__/esm/components/AutocompleteNext/helpers.d.ts

@@ -2,7 +2,7 @@ import type { AutocompleteDefaultOption, AutocompletePropGetOptionDisabled, Auto
 export declare const defaultGetOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption>;
 export declare const defaultGetOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption>;
 export declare const defaultGetOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption>;
-export declare function withDefaultGetters<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false>(props: AutocompleteProps<OPTION, MULTIPLE>): ({
+export declare function withDefaultGetters<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false>(props: AutocompleteProps<OPTION, MULTIPLE>): {
     multiple?: MULTIPLE | undefined;
     limitTags?: number | "responsive";
     renderTag?: import("./types").AutocompletePropRenderTag;
@@ -11,76 +11,8 @@ export declare function withDefaultGetters<OPTION = AutocompleteDefaultOption, M
     size?: import("./types").AutocompletePropSize;
     value?: import("./types").AutocompletePropValue<OPTION, MULTIPLE>;
     defaultValue?: import("./types").AutocompletePropValue<OPTION, MULTIPLE>;
-    onChange?: import("./types").AutocompleteOnChange<OPTION, MULTIPLE> | undefined;
-    inputValue?: string;
-    onInputChange?: import("./types").AutocompleteOnInputChange;
-    renderInput?: import("./types").AutocompletePropRenderInput;
-    renderOption?: import("./types").AutocompletePropRenderOption<OPTION> | undefined;
-    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
-    getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
-    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
-    disableCloseOnSelect?: boolean;
-    allowCustomValue?: boolean;
-    loading?: boolean;
-    noOptionsText?: import("react").ReactNode;
-    clearText?: string;
-    openText?: string;
-    closeText?: string;
-    loadingText?: import("react").ReactNode;
-    onClose?(): void;
-    onOpen?(): void;
-    disableClearButton?: boolean;
-    searchFunction?: import("./types").AutocompletePropSearchFunction<OPTION> | undefined;
-    disableShowEmptyOptionsList?: boolean;
-    disableShowChevron?: boolean;
-    popoverProps?: import("./components").AutocompleteDropdownProps["popoverProps"];
-    listProps?: import("./components").AutocompleteDropdownProps["listProps"];
-} & {
-    error?: boolean | undefined;
-    label?: string | undefined;
-    style?: import("react").CSSProperties | undefined;
-    className?: string | undefined;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-    autoFocus?: boolean | undefined;
-    disabled?: boolean | undefined;
-    placeholder?: string | undefined;
-    required?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    disableStroke?: boolean | undefined;
-    hint?: string | null | undefined;
-    renderLeft?: import("../FieldIcon").FieldIconProps["icon"];
-    renderRight?: import("../FieldIcon").FieldIconProps["icon"];
-    inputProps?: import("../FieldInput").FieldInputProps | undefined;
-    bodyProps?: import("react").ComponentPropsWithRef<"label"> | undefined;
-    hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
-} & {
     open?: boolean;
-    defaultOpen?: never;
-} & (OPTION extends {
-    label: AutocompleteDefaultOption["label"];
-} ? Record<string, unknown> : {
-    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
-}) & (OPTION extends {
-    id: AutocompleteDefaultOption["id"];
-} ? Record<string, unknown> : {
-    getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
-}) & (OPTION extends {
-    disabled: AutocompleteDefaultOption["disabled"];
-} ? Record<string, unknown> : {
-    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
-}) & {
-    getOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption> | AutocompletePropGetOptionLabel<OPTION>;
-    getOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption> | AutocompletePropGetOptionKey<OPTION>;
-    getOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption> | AutocompletePropGetOptionDisabled<OPTION>;
-}) | ({
-    multiple?: MULTIPLE | undefined;
-    limitTags?: number | "responsive";
-    renderTag?: import("./types").AutocompletePropRenderTag;
-    renderMoreTag?: import("./types").AutocompletePropRenderMoreTag<OPTION> | undefined;
-    options: OPTION[];
-    size?: import("./types").AutocompletePropSize;
-    value?: import("./types").AutocompletePropValue<OPTION, MULTIPLE>;
-    defaultValue?: import("./types").AutocompletePropValue<OPTION, MULTIPLE>;
+    defaultOpen?: boolean;
     onChange?: import("./types").AutocompleteOnChange<OPTION, MULTIPLE> | undefined;
     inputValue?: string;
     onInputChange?: import("./types").AutocompleteOnInputChange;
@@ -105,6 +37,7 @@ export declare function withDefaultGetters<OPTION = AutocompleteDefaultOption, M
     disableShowChevron?: boolean;
     popoverProps?: import("./components").AutocompleteDropdownProps["popoverProps"];
     listProps?: import("./components").AutocompleteDropdownProps["listProps"];
+    ref?: import("react").Ref<HTMLDivElement>;
 } & {
     error?: boolean | undefined;
     label?: string | undefined;
@@ -123,25 +56,22 @@ export declare function withDefaultGetters<OPTION = AutocompleteDefaultOption, M
     inputProps?: import("../FieldInput").FieldInputProps | undefined;
     bodyProps?: import("react").ComponentPropsWithRef<"label"> | undefined;
     hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
-} & {
-    open?: never;
-    defaultOpen?: boolean;
 } & (OPTION extends {
     label: AutocompleteDefaultOption["label"];
-} ? Record<string, unknown> : {
+} ? object : {
     getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
 }) & (OPTION extends {
     id: AutocompleteDefaultOption["id"];
-} ? Record<string, unknown> : {
+} ? object : {
     getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
 }) & (OPTION extends {
     disabled: AutocompleteDefaultOption["disabled"];
-} ? Record<string, unknown> : {
+} ? object : {
     getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
 }) & {
     getOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption> | AutocompletePropGetOptionLabel<OPTION>;
     getOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption> | AutocompletePropGetOptionKey<OPTION>;
     getOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption> | AutocompletePropGetOptionDisabled<OPTION>;
-});
+};
 export declare const isMultipleParams: <OPTION>(params: AutocompleteProps<OPTION, boolean>) => params is AutocompleteProps<OPTION, true>;
 export declare const isNotMultipleParams: <OPTION>(params: AutocompleteProps<OPTION, boolean>) => params is AutocompleteProps<OPTION, false>;

package/__inner__/esm/components/AutocompleteNext/types.d.ts

@@ -33,18 +33,6 @@ export type AutocompleteRenderMoreTagProps<OPTION> = {
     omittedValues?: AutocompletePropValue<OPTION, true>;
 };
 export type AutocompletePropRenderMoreTag<OPTION> = (props: AutocompleteRenderMoreTagProps<OPTION>, ref?: Ref<TagRef>) => ReactNode;
-type AutocompleteOpenControlledProps = {
-    /** Текущее состояние списка. Если `true`, список отображается. */
-    open?: boolean;
-    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
-    defaultOpen?: never;
-};
-type AutocompleteOpenUncontrolledProps = {
-    /** Текущее состояние списка. Если `true`, список отображается. */
-    open?: never;
-    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
-    defaultOpen?: boolean;
-};
 type AutocompleteInputProps = Pick<InputProps, 'hint' | 'style' | 'error' | 'label' | 'disabled' | 'required' | 'autoFocus' | 'fullWidth' | 'className' | 'hintProps' | 'bodyProps' | 'onKeyDown' | 'inputProps' | 'renderLeft' | 'renderRight' | 'placeholder' | 'disableStroke'>;
 export type AutocompleteOnChange<OPTION, MULTIPLE extends boolean> = (e: SyntheticEvent | KeyboardEvent, value: (MULTIPLE extends true ? OPTION[] : OPTION) | null) => void;
 export type AutocompleteOnInputChange = (e: ChangeEvent<HTMLInputElement> | null, value: string) => void;
@@ -67,6 +55,10 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption, MULTIPLE exten
     value?: AutocompletePropValue<OPTION, MULTIPLE>;
     /** Выбранное значение опции по умолчанию */
     defaultValue?: AutocompletePropValue<OPTION, MULTIPLE>;
+    /** Текущее состояние списка. Если `true`, список отображается. */
+    open?: boolean;
+    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
+    defaultOpen?: boolean;
     /** Функция обратного вызова, которая будет вызвана при выборе значения */
     onChange?: AutocompleteOnChange<OPTION, MULTIPLE>;
     /** Введённое значение в текстовом поле */
@@ -115,17 +107,19 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption, MULTIPLE exten
     popoverProps?: AutocompleteDropdownProps['popoverProps'];
     /** Свойства компонента List */
     listProps?: AutocompleteDropdownProps['listProps'];
-} & AutocompleteInputProps & (AutocompleteOpenControlledProps | AutocompleteOpenUncontrolledProps) & (OPTION extends {
+    /** Ссылка на HTML элемент */
+    ref?: Ref<HTMLDivElement>;
+} & AutocompleteInputProps & (OPTION extends {
     label: AutocompleteDefaultOption['label'];
-} ? Record<string, unknown> : {
+} ? object : {
     getOptionLabel?: AutocompletePropGetOptionLabel<OPTION>;
 }) & (OPTION extends {
     id: AutocompleteDefaultOption['id'];
-} ? Record<string, unknown> : {
+} ? object : {
     getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
 }) & (OPTION extends {
     disabled: AutocompleteDefaultOption['disabled'];
-} ? Record<string, unknown> : {
+} ? object : {
     getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
 });
 export type AutocompleteComponent = <OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false>(props: AutocompleteProps<OPTION, MULTIPLE>) => ReactElement | null;

package/__inner__/esm/components/Calendar/Calendar.js

@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { getByMap } from '../../utils/getByMap';
 import { CalendarModeRange, CalendarModeSingle } from './components';
-import { CALENDAR_DEFAULT_MODE, CALENDAR_DEFAULT_SIZE, CALENDAR_DEFAULT_START_DAY, } from './constants';
+import { CALENDAR_DEFAULT_CALENDARS, CALENDAR_DEFAULT_MODE, CALENDAR_DEFAULT_SIZE, CALENDAR_DEFAULT_START_DAY, } from './constants';
 import { getPeriodSwitchAriaLabel as createPeriodSwitchAriaLabel } from './utils';
 var typeMap = {
     range: CalendarModeRange,
@@ -16,8 +16,8 @@ export var Calendar = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'Calendar',
     });
-    var _a = props.size, size = _a === void 0 ? CALENDAR_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? CALENDAR_DEFAULT_MODE : _b, _c = props.startDay, startDay = _c === void 0 ? CALENDAR_DEFAULT_START_DAY : _c, getPeriodSwitchAriaLabelProp = props.getPeriodSwitchAriaLabel, other = __rest(props, ["size", "mode", "startDay", "getPeriodSwitchAriaLabel"]);
+    var _a = props.size, size = _a === void 0 ? CALENDAR_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? CALENDAR_DEFAULT_MODE : _b, _c = props.startDay, startDay = _c === void 0 ? CALENDAR_DEFAULT_START_DAY : _c, _d = props.calendars, calendars = _d === void 0 ? CALENDAR_DEFAULT_CALENDARS : _d, getPeriodSwitchAriaLabelProp = props.getPeriodSwitchAriaLabel, other = __rest(props, ["size", "mode", "startDay", "calendars", "getPeriodSwitchAriaLabel"]);
     var getPeriodSwitchAriaLabel = getPeriodSwitchAriaLabelProp || createPeriodSwitchAriaLabel;
     var Component = getByMap(typeMap, mode);
-    return (React.createElement(Component, __assign({ size: size, startDay: startDay, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel }, other, { ref: ref })));
+    return (React.createElement(Component, __assign({ size: size, startDay: startDay, calendars: calendars, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel }, other, { ref: ref })));
 });

package/__inner__/esm/components/Calendar/CalendarContext.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import type { CalendarSizeVariant, CalendarProps } from './types';
+import type { CalendarPropSize, CalendarProps } from './types';
 export interface CalendarContextValue {
     minDate?: Date;
     maxDate?: Date;
-    size?: CalendarSizeVariant;
-    onOffsetChange?(d: Date): void;
+    size?: CalendarPropSize;
     onDayClick?: CalendarProps['onDayClick'];
     onYearClick?: CalendarProps['onYearClick'];
     onMonthClick?: CalendarProps['onMonthClick'];

package/__inner__/esm/components/Calendar/components/CalendarGridItem/types.d.ts

@@ -1,12 +1,12 @@
 import type { ComponentRef } from 'react';
 import type { DPDayRange } from '@rehookify/datepicker';
 import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
-import type { CalendarSizeVariant } from '../../index';
+import type { CalendarPropSize } from '../../index';
 export type CalendarGridItemRef = ComponentRef<'button'>;
 export type CalendarGridItemProps = ExtendableComponentPropsWithRef<{
     current?: boolean;
     selected?: boolean;
     disabled?: boolean;
     range?: DPDayRange;
-    size?: CalendarSizeVariant;
+    size?: CalendarPropSize;
 }, 'button'>;

package/__inner__/esm/components/Calendar/components/CalendarModeRange/CalendarModeRange.d.ts

@@ -1,2 +1,2 @@
-import type { CalendarTypeComponent } from '../../types';
-export declare const CalendarModeRange: CalendarTypeComponent<'range'>;
+import type { CalendarModeComponent } from '../../types';
+export declare const CalendarModeRange: CalendarModeComponent<'range'>;

package/__inner__/esm/components/Calendar/components/CalendarModeRange/CalendarModeRange.js

@@ -4,50 +4,46 @@ import { DatePickerProvider } from '@rehookify/datepicker';
 import { useControlled } from '../../../../hooks/useControlled';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { CalendarContext } from '../../CalendarContext';
-import { CALENDAR_DEFAULT_SIZE, CALENDAR_DEFAULT_START_DAY, } from '../../constants';
 import { cnCalendar } from '../../utils';
-import { CalendarAdditionalControls, CalendarConsumer } from './components';
+import { Calendars } from '../index';
+import { CalendarAdditionalControls } from './components';
 // eslint-disable-next-line react/display-name
 export var CalendarModeRange = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Calendar',
     });
-    var _a = props.size, size = _a === void 0 ? CALENDAR_DEFAULT_SIZE : _a, _b = props.startDay, startDay = _b === void 0 ? CALENDAR_DEFAULT_START_DAY : _b, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onOffsetDateChangeProp = props.onOffsetDateChange, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, other = __rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "getPeriodSwitchAriaLabel"]);
-    var _c = __read(useControlled({
+    var size = props.size, startDay = props.startDay, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onCalendarsChange = props.onCalendarsChange, onOffsetDateChangeProp = props.onOffsetDateChange, calendars = props.calendars, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, other = __rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onCalendarsChange", "onOffsetDateChange", "calendars", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "getPeriodSwitchAriaLabel"]);
+    var _a = __read(useControlled({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'Calendar',
         state: 'value',
-    }), 2), value = _c[0], setValue = _c[1];
-    var _d = __read(useControlled({
+    }), 2), value = _a[0], setValue = _a[1];
+    var _b = __read(useControlled({
         value: offsetDateProp,
         defaultValue: defaultOffsetDate,
         name: 'Calendar',
         state: 'offsetDate',
-    }), 2), offsetDate = _d[0], setOffsetDateState = _d[1];
+    }), 2), offsetDate = _b[0], setOffsetDateState = _b[1];
+    var onOffsetChange = function (date) {
+        setOffsetDateState(date);
+        onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
+    };
     var onDatesChange = function (data) {
         if (data) {
             setValue(data);
             onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(data);
         }
     };
-    var onOffsetChange = function (date) {
-        setOffsetDateState(date);
-        onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
-    };
     var config = {
-        calendar: {
-            startDay: startDay,
-            offsets: [1],
-        },
+        calendar: __assign({ startDay: startDay }, (calendars && calendars > 1 && { offsets: [1] })),
         locale: {
             locale: locale,
             day: 'numeric',
             weekday: 'short',
         },
         exclude: exclude,
-        offsetDate: offsetDate,
         onDatesChange: onDatesChange,
         onOffsetChange: onOffsetChange,
         dates: {
@@ -56,8 +52,9 @@ export var CalendarModeRange = forwardRef(function (inProps, ref) {
             mode: 'range',
             selectSameDate: true,
         },
-        years: { numberOfYears: 15 },
         selectedDates: value || [],
+        years: { numberOfYears: 15 },
+        offsetDate: offsetDate || undefined,
     };
     return (React.createElement(DatePickerProvider, { config: config },
         React.createElement(CalendarContext.Provider, { value: {
@@ -68,9 +65,8 @@ export var CalendarModeRange = forwardRef(function (inProps, ref) {
                 onYearClick: onYearClick,
                 onMonthClick: onMonthClick,
                 getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel,
-                onOffsetChange: onOffsetChange,
             } },
             React.createElement("div", __assign({ className: cnCalendar({ size: size }, [className]) }, other, { ref: ref }),
-                React.createElement(CalendarConsumer, null),
+                React.createElement(Calendars, { onCalendarsChange: onCalendarsChange }),
                 React.createElement(CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
 });

package/__inner__/esm/components/Calendar/components/CalendarModeRange/components/index.d.ts

@@ -1,2 +1 @@
 export * from './CalendarAdditionalControls';
-export * from './CalendarConsumer';

package/__inner__/esm/components/Calendar/components/CalendarModeRange/components/index.js

@@ -1,2 +1 @@
 export * from './CalendarAdditionalControls';
-export * from './CalendarConsumer';

package/__inner__/esm/components/Calendar/components/CalendarModeSingle/CalendarModeSingle.d.ts

@@ -1,2 +1,2 @@
-import type { CalendarTypeComponent } from '../../types';
-export declare const CalendarModeSingle: CalendarTypeComponent<'single'>;
+import type { CalendarModeComponent } from '../../types';
+export declare const CalendarModeSingle: CalendarModeComponent<'single'>;

package/__inner__/esm/components/Calendar/components/CalendarModeSingle/CalendarModeSingle.js

@@ -2,30 +2,25 @@ import { __assign, __read, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { DatePickerProvider } from '@rehookify/datepicker';
 import { useControlled } from '../../../../hooks/useControlled';
-import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { CalendarContext } from '../../CalendarContext';
-import { CALENDAR_DEFAULT_SIZE, CALENDAR_DEFAULT_START_DAY, } from '../../constants';
 import { cnCalendar } from '../../utils';
-import { CalendarAdditionalControls, CalendarConsumer } from './components';
+import { Calendars } from '../index';
+import { CalendarAdditionalControls } from './components';
 // eslint-disable-next-line react/display-name
-export var CalendarModeSingle = forwardRef(function (inProps, ref) {
-    var props = useThemeProps({
-        props: inProps,
-        name: 'Calendar',
-    });
-    var _a = props.size, size = _a === void 0 ? CALENDAR_DEFAULT_SIZE : _a, _b = props.startDay, startDay = _b === void 0 ? CALENDAR_DEFAULT_START_DAY : _b, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onOffsetDateChangeProp = props.onOffsetDateChange, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, other = __rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "getPeriodSwitchAriaLabel"]);
-    var _c = __read(useControlled({
+export var CalendarModeSingle = forwardRef(function (props, ref) {
+    var size = props.size, startDay = props.startDay, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onOffsetDateChangeProp = props.onOffsetDateChange, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, onCalendarsChange = props.onCalendarsChange, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, calendars = props.calendars, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, other = __rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "onCalendarsChange", "defaultOffsetDate", "exclude", "minDate", "maxDate", "calendars", "className", "getPeriodSwitchAriaLabel"]);
+    var _a = __read(useControlled({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'Calendar',
         state: 'value',
-    }), 2), value = _c[0], setValue = _c[1];
-    var _d = __read(useControlled({
+    }), 2), value = _a[0], setValue = _a[1];
+    var _b = __read(useControlled({
         value: offsetDateProp,
         defaultValue: defaultOffsetDate,
         name: 'Calendar',
         state: 'offsetDate',
-    }), 2), offsetDate = _d[0], setOffsetDateState = _d[1];
+    }), 2), offsetDate = _b[0], setOffsetDateState = _b[1];
     var onDatesChange = function (data) {
         var value = data[0];
         if (value) {
@@ -38,20 +33,18 @@ export var CalendarModeSingle = forwardRef(function (inProps, ref) {
         onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
     };
     var config = {
-        calendar: {
-            startDay: startDay,
-        },
+        calendar: __assign({ startDay: startDay }, (calendars && calendars > 1 && { offsets: [1] })),
         locale: {
             locale: locale,
             day: 'numeric',
             weekday: 'short',
         },
         exclude: exclude,
-        offsetDate: offsetDate,
         onDatesChange: onDatesChange,
         onOffsetChange: onOffsetChange,
         dates: { minDate: minDate, maxDate: maxDate },
         years: { numberOfYears: 15 },
+        offsetDate: offsetDate || undefined,
         selectedDates: value ? [value] : [],
     };
     return (React.createElement(DatePickerProvider, { config: config },
@@ -63,9 +56,8 @@ export var CalendarModeSingle = forwardRef(function (inProps, ref) {
                 onYearClick: onYearClick,
                 onMonthClick: onMonthClick,
                 getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel,
-                onOffsetChange: onOffsetChange,
             } },
             React.createElement("div", __assign({ className: cnCalendar({ size: size }, [className]) }, other, { ref: ref }),
-                React.createElement(CalendarConsumer, null),
+                React.createElement(Calendars, { onCalendarsChange: onCalendarsChange }),
                 React.createElement(CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
 });

package/__inner__/esm/components/Calendar/components/CalendarModeSingle/components/index.d.ts

@@ -1,2 +1 @@
 export * from './CalendarAdditionalControls';
-export * from './CalendarConsumer';

package/__inner__/esm/components/Calendar/components/CalendarModeSingle/components/index.js

@@ -1,2 +1 @@
 export * from './CalendarAdditionalControls';
-export * from './CalendarConsumer';

package/__inner__/esm/components/Calendar/components/Calendars/Calendars.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { CalendarProps } from '../../index';
+type CalendarsProps = Pick<CalendarProps, 'onCalendarsChange'>;
+export declare const Calendars: FC<CalendarsProps>;
+export {};

package/__inner__/esm/components/Calendar/components/Calendars/Calendars.js

@@ -0,0 +1,41 @@
+import { __read } from "tslib";
+import React, { useEffect } from 'react';
+import { useDatePickerContext } from '@rehookify/datepicker';
+import { useMutableRef } from '../../../../hooks/useMutableRef';
+import { Stack } from '../../../Stack';
+import { CalendarItem } from '../index';
+export var Calendars = function (_a) {
+    var onCalendarsChange = _a.onCalendarsChange;
+    var calendars = useDatePickerContext().data.calendars;
+    var _b = __read(calendars || [], 2), calendarFrom = _b[0], calendarTo = _b[1];
+    var savedOnCalendarsChange = useMutableRef(onCalendarsChange);
+    var calendarFromHash = "".concat(calendarFrom === null || calendarFrom === void 0 ? void 0 : calendarFrom.month, "-").concat(calendarFrom === null || calendarFrom === void 0 ? void 0 : calendarFrom.year);
+    var calendarToHash = "".concat(calendarTo === null || calendarTo === void 0 ? void 0 : calendarTo.month, "-").concat(calendarTo === null || calendarTo === void 0 ? void 0 : calendarTo.year);
+    useEffect(function () {
+        var _a, _b, _c, _d, _e;
+        var calendarFromDays = calendarFrom === null || calendarFrom === void 0 ? void 0 : calendarFrom.days;
+        var calendarToDays = calendarTo === null || calendarTo === void 0 ? void 0 : calendarTo.days;
+        var startPeriod = (_a = calendarFromDays === null || calendarFromDays === void 0 ? void 0 : calendarFromDays.find(function (_a) {
+            var inCurrentMonth = _a.inCurrentMonth;
+            return inCurrentMonth;
+        })) === null || _a === void 0 ? void 0 : _a.$date;
+        var endPeriod = calendarToDays
+            ? (_c = (_b = calendarToDays === null || calendarToDays === void 0 ? void 0 : calendarToDays.reverse()) === null || _b === void 0 ? void 0 : _b.find(function (_a) {
+                var inCurrentMonth = _a.inCurrentMonth;
+                return inCurrentMonth;
+            })) === null || _c === void 0 ? void 0 : _c.$date
+            : (_d = calendarFromDays === null || calendarFromDays === void 0 ? void 0 : calendarFromDays.reverse().find(function (_a) {
+                var inCurrentMonth = _a.inCurrentMonth;
+                return inCurrentMonth;
+            })) === null || _d === void 0 ? void 0 : _d.$date;
+        if (startPeriod && endPeriod) {
+            (_e = savedOnCalendarsChange.current) === null || _e === void 0 ? void 0 : _e.call(savedOnCalendarsChange, [startPeriod, endPeriod]);
+        }
+    }, [calendarFromHash, calendarToHash]);
+    // There should not be more than two calendars
+    if (calendars.length > 2)
+        return null;
+    return (React.createElement(Stack, null,
+        calendarFrom && (React.createElement(CalendarItem, { calendar: calendarFrom, type: calendars.length === 1 ? 'single' : 'first' })),
+        calendarTo && React.createElement(CalendarItem, { calendar: calendarTo, type: "last" })));
+};

package/__inner__/esm/components/Calendar/components/Calendars/index.d.ts

@@ -0,0 +1 @@
+export * from './Calendars';

package/__inner__/esm/components/Calendar/components/Calendars/index.js

@@ -0,0 +1 @@
+export * from './Calendars';

package/__inner__/esm/components/Calendar/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './CalendarGrid';
 export * from './CalendarModeSingle';
 export * from './CalendarModeRange';
 export * from './CalendarItem';
+export * from './Calendars';

package/__inner__/esm/components/Calendar/components/index.js

@@ -4,3 +4,4 @@ export * from './CalendarGrid';
 export * from './CalendarModeSingle';
 export * from './CalendarModeRange';
 export * from './CalendarItem';
+export * from './Calendars';

package/__inner__/esm/components/Calendar/constants.d.ts

@@ -1,4 +1,4 @@
 export declare const CALENDAR_DEFAULT_START_DAY = 1;
-export declare const CALENDAR_ITEM_DEFAULT_TAG = "button";
 export declare const CALENDAR_DEFAULT_SIZE = "m";
 export declare const CALENDAR_DEFAULT_MODE = "single";
+export declare const CALENDAR_DEFAULT_CALENDARS = 1;

package/__inner__/esm/components/Calendar/constants.js

@@ -1,4 +1,4 @@
 export var CALENDAR_DEFAULT_START_DAY = 1;
-export var CALENDAR_ITEM_DEFAULT_TAG = 'button';
 export var CALENDAR_DEFAULT_SIZE = 'm';
 export var CALENDAR_DEFAULT_MODE = 'single';
+export var CALENDAR_DEFAULT_CALENDARS = 1;

package/__inner__/esm/components/Calendar/types.d.ts

@@ -1,57 +1,93 @@
-import type { ComponentPropsWithRef, MouseEvent, ReactElement, ReactNode } from 'react';
+import type { MouseEvent, ReactElement, ReactNode } from 'react';
 import type { DPExcludeConfig, DPDayInteger } from '@rehookify/datepicker';
+import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
 import type { CALENDAR_DEFAULT_MODE } from './constants';
 export declare const calendarStepVariant: readonly ["days", "months", "years"];
 export declare const calendarSizeVariant: readonly ["s", "m", "l"];
 export declare const calendarModeVariant: readonly ["single", "range"];
 export type CalendarStepVariant = (typeof calendarStepVariant)[number];
 export type CalendarModeVariant = (typeof calendarModeVariant)[number];
-export type CalendarValue<MODE extends CalendarModeVariant> = (MODE extends 'range' ? Date[] : Date) | null;
-export type CalendarOnChange<MODE extends CalendarModeVariant> = (date: CalendarValue<MODE>) => void;
-export type CalendarOnOffsetDateChange = (date: Date) => void;
-export type CalendarSizeVariant = (typeof calendarSizeVariant)[number];
-export type CalendarExclude = DPExcludeConfig;
-export type CalendarStartDay = DPDayInteger;
-export type CalendarRenderAdditionalControls<MODE extends CalendarModeVariant> = (props: {
+export type CalendarPropValue<MODE extends CalendarModeVariant> = (MODE extends 'range' ? Date[] : Date) | null;
+export type CalendarPropOnChange<MODE extends CalendarModeVariant> = (date: CalendarPropValue<MODE>) => void;
+export type CalendarPropOnOffsetDateChange = (date: Date) => void;
+export type CalendarPropSize = (typeof calendarSizeVariant)[number];
+export type CalendarPropExclude = DPExcludeConfig;
+export type CalendarPropStartDay = DPDayInteger;
+export type CalendarPropRenderAdditionalControls<MODE extends CalendarModeVariant> = (props: {
     date?: MODE extends 'range' ? Date[] : Date;
 }) => ReactElement;
-export type CalendarProps<MODE extends CalendarModeVariant = typeof CALENDAR_DEFAULT_MODE> = {
+export type CalendarPropCalendars = 1 | 2;
+/**
+ * @deprecated
+ * Use the `CalendarPropOnChange` type to replace it.
+ * */
+export type CalendarOnChange<MODE extends CalendarModeVariant> = CalendarPropOnChange<MODE>;
+/**
+ * @deprecated
+ * Use the `CalendarPropOnOffsetDateChange` type to replace it.
+ * */
+export type CalendarOnOffsetDateChange = CalendarPropOnOffsetDateChange;
+/**
+ * @deprecated
+ * Use the `CalendarPropSize` type to replace it.
+ * */
+export type CalendarSizeVariant = CalendarPropSize;
+/**
+ * @deprecated
+ * Use the `CalendarPropExclude` type to replace it.
+ * */
+export type CalendarExclude = CalendarPropExclude;
+/**
+ * @deprecated
+ * Use the `CalendarPropStartDay` type to replace it.
+ * */
+export type CalendarStartDay = CalendarPropStartDay;
+export type CalendarRenderAdditionalControls<MODE extends CalendarModeVariant> = CalendarPropRenderAdditionalControls<MODE>;
+export type CalendarProps<MODE extends CalendarModeVariant = typeof CALENDAR_DEFAULT_MODE> = ExtendableComponentPropsWithRef<{
+    /** Способ выбора даты:
+     * - `single` — позволяет выбрать одну дату (показывает один календарь).
+     * - `range` — позволяет выбрать период: дату начала и дату конца (показывает два календаря).
+     * */
     mode?: MODE;
     /** Выбранная дата */
-    value?: CalendarValue<MODE>;
+    value?: CalendarPropValue<MODE>;
     /** Выбранная дата по умолчанию (неконтролируемое состояние) */
-    defaultValue?: CalendarValue<MODE>;
+    defaultValue?: CalendarPropValue<MODE>;
     /** Смещение календаря — на какой странице показать календарь */
-    offsetDate?: Date;
+    offsetDate?: Date | null;
     /** Смещение календаря по умолчанию */
     defaultOffsetDate?: Date;
     /** Обработчик событий выбора даты */
-    onChange?: CalendarOnChange<MODE>;
+    onChange?: CalendarPropOnChange<MODE>;
     /** Обработчик событий на смещение календаря */
-    onOffsetDateChange?: CalendarOnOffsetDateChange;
+    onOffsetDateChange?: CalendarPropOnOffsetDateChange;
     /** Локализация */
     locale?: Intl.LocalesArgument;
     /** Первый день недели календаря */
-    startDay?: CalendarStartDay;
+    startDay?: CalendarPropStartDay;
     /** Размер */
-    size?: CalendarSizeVariant;
+    size?: CalendarPropSize;
     /** Исключенные даты календаря */
-    exclude?: CalendarExclude;
+    exclude?: CalendarPropExclude;
     /** Ограничение выбора дат по меньшей дате */
     minDate?: Date;
     /** Ограничение выбора дат по большей дате */
     maxDate?: Date;
     /** Обработчик нажатия на кнопку месяца */
-    onMonthClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
+    onMonthClick?(e: MouseEvent<HTMLElement>, date: Date): void;
     /** Обработчик нажатия на кнопку дня */
-    onDayClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
+    onDayClick?(e: MouseEvent<HTMLElement>, date: Date): void;
     /** Обработчик нажатия на кнопку года */
-    onYearClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
+    onYearClick?(e: MouseEvent<HTMLElement>, date: Date): void;
     /** Дополнительные контролы — рендер функция */
-    renderAdditionalControls?: CalendarRenderAdditionalControls<MODE>;
-    /** Функция форматирования атрибута aria-label для кнопок переключения периодов */
+    renderAdditionalControls?: CalendarPropRenderAdditionalControls<MODE>;
+    /** Функция форматирования атрибута `aria-label` для кнопок переключения периодов */
     getPeriodSwitchAriaLabel?: (step: CalendarStepVariant) => [string, string];
+    /** Обработчик событий на изменение календарей */
+    onCalendarsChange?(period: [Date, Date]): void;
+    /** Количество отображаемых календарей в компоненте: один или два */
+    calendars?: CalendarPropCalendars;
     children?: never;
-} & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>;
+}, 'div'>;
 export type CalendarComponent = <MODE extends CalendarModeVariant = typeof CALENDAR_DEFAULT_MODE>(props: CalendarProps<MODE>) => ReactNode;
-export type CalendarTypeComponent<MODE extends CalendarModeVariant> = (props: Omit<CalendarProps<MODE>, 'mode'>) => ReactNode;
+export type CalendarModeComponent<MODE extends CalendarModeVariant> = (props: Omit<CalendarProps<MODE>, 'mode'>) => ReactNode;