@ozen-ui/kit 0.61.0 → 0.62.1

package/__inner__/cjs/utils/date/monthDiff/monthDiff.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.monthDiff = void 0;
 var monthDiff = function (d1, d2) {
+    if (!d1 || !d2) {
+        return 0;
+    }
     var months;
     months = (d2.getFullYear() - d1.getFullYear()) * 12;
     months -= d1.getMonth();

package/__inner__/esm/components/AutocompleteNext/Autocomplete.css

@@ -187,7 +187,7 @@
 
   .AutocompleteNext-Dropdown {
     overflow: hidden auto;
-    max-block-size: 40vb;
+    max-block-size: 40vh;
 }
 .AutocompleteNext-Dropdown-animation-enter {
     opacity: 0;

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;

package/__inner__/esm/components/DataList/DataList.css

@@ -28,7 +28,7 @@
   }
   .DataList {
   overflow: hidden auto;
-  max-block-size: 40vb;
+  max-block-size: 40vh;
 }
 .DataList-animation-enter {
     opacity: 0;

package/__inner__/esm/components/DatePicker/DatePicker.css

@@ -1,4 +1,15 @@
-.DatePicker-RenderRight {
+.DatePicker_mode_date-range {
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+    .DatePicker_mode_date-range .DatePicker-Fields > * {
+        flex: 1 1 auto;
+      }
+  .DatePicker_fullWidth {
+    inline-size: 100%;
+  }
+  .DatePicker-RenderRight {
     display: flex;
     gap: var(--spacing-2xs);
   }

package/__inner__/esm/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,4 @@
 import './DatePicker.css';
-import React from 'react';
-import type { DatePickerProps } from './types';
+import type { DatePickerComponent } from './types';
 export declare const cnDatePicker: import("@bem-react/classname").ClassNameFormatter;
-export declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: DatePickerComponent;