@ozen-ui/kit 0.52.0 → 0.54.0

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarModeRange = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var datepicker_1 = require("@rehookify/datepicker");
+var useControlled_1 = require("../../../../hooks/useControlled");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var CalendarContext_1 = require("../../CalendarContext");
+var constants_1 = require("../../constants");
+var utils_1 = require("../../utils");
+var components_1 = require("./components");
+// eslint-disable-next-line react/display-name
+exports.CalendarModeRange = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Calendar',
+    });
+    var _a = props.size, size = _a === void 0 ? constants_1.CALENDAR_DEFAULT_SIZE : _a, _b = props.startDay, startDay = _b === void 0 ? constants_1.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 = tslib_1.__rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "getPeriodSwitchAriaLabel"]);
+    var _c = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'Calendar',
+        state: 'value',
+    }), 2), value = _c[0], setValue = _c[1];
+    var _d = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: offsetDateProp,
+        defaultValue: defaultOffsetDate,
+        name: 'Calendar',
+        state: 'offsetDate',
+    }), 2), offsetDate = _d[0], setOffsetDateState = _d[1];
+    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],
+        },
+        locale: {
+            locale: locale,
+            day: 'numeric',
+            weekday: 'short',
+        },
+        exclude: exclude,
+        offsetDate: offsetDate,
+        onDatesChange: onDatesChange,
+        onOffsetChange: onOffsetChange,
+        dates: {
+            minDate: minDate,
+            maxDate: maxDate,
+            mode: 'range',
+            selectSameDate: true,
+        },
+        years: { numberOfYears: 15 },
+        selectedDates: value || [],
+    };
+    return (react_1.default.createElement(datepicker_1.DatePickerProvider, { config: config },
+        react_1.default.createElement(CalendarContext_1.CalendarContext.Provider, { value: {
+                size: size,
+                minDate: minDate,
+                maxDate: maxDate,
+                onDayClick: onDayClick,
+                onYearClick: onYearClick,
+                onMonthClick: onMonthClick,
+                getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel,
+                onOffsetChange: onOffsetChange,
+            } },
+            react_1.default.createElement("div", tslib_1.__assign({ className: (0, utils_1.cnCalendar)({ size: size }, [className]) }, other, { ref: ref }),
+                react_1.default.createElement(components_1.CalendarConsumer, null),
+                react_1.default.createElement(components_1.CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
+});

package/__inner__/{esm/components/Calendar → cjs/components/Calendar/components/CalendarModeRange}/components/CalendarAdditionalControls/CalendarAdditionalControls.d.ts

@@ -1,9 +1,9 @@
 import './CalendarAdditionalControls.css';
 import type { FC } from 'react';
-import type { CalendarBaseProps } from '../../index';
+import type { CalendarProps } from '../../../../index';
 export declare const cnCalendarAdditionalControls: import("@bem-react/classname").ClassNameFormatter;
 type CalendarAdditionalControlsProps = {
-    renderAdditionalControls?: CalendarBaseProps['renderAdditionalControls'];
+    renderAdditionalControls?: CalendarProps<'range'>['renderAdditionalControls'];
 };
 export declare const CalendarAdditionalControls: FC<CalendarAdditionalControlsProps>;
 export {};

package/__inner__/cjs/components/Calendar/components/CalendarModeRange/components/CalendarAdditionalControls/CalendarAdditionalControls.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarAdditionalControls = exports.cnCalendarAdditionalControls = void 0;
+var tslib_1 = require("tslib");
+require("./CalendarAdditionalControls.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var datepicker_1 = require("@rehookify/datepicker");
+var classname_1 = require("../../../../../../utils/classname");
+var renderContent_1 = require("../../../../../../utils/renderContent");
+var Divider_1 = require("../../../../../Divider");
+exports.cnCalendarAdditionalControls = (0, classname_1.cn)('CalendarAdditionalControls');
+var CalendarAdditionalControls = function (_a) {
+    var renderAdditionalControls = _a.renderAdditionalControls;
+    var selectedDates = (0, datepicker_1.useDatePickerContext)().data.selectedDates;
+    if (!renderAdditionalControls) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Divider_1.Divider, { color: "secondary" }),
+        react_1.default.createElement("div", { className: (0, exports.cnCalendarAdditionalControls)() }, (0, renderContent_1.renderContent)({
+            content: renderAdditionalControls,
+            props: { date: selectedDates },
+        }))));
+};
+exports.CalendarAdditionalControls = CalendarAdditionalControls;

package/__inner__/cjs/components/Calendar/components/CalendarModeRange/components/CalendarConsumer/CalendarConsumer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CalendarConsumer: () => React.JSX.Element | null;

package/__inner__/cjs/components/Calendar/components/CalendarModeRange/components/CalendarConsumer/CalendarConsumer.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarConsumer = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var datepicker_1 = require("@rehookify/datepicker");
+var useMutableRef_1 = require("../../../../../../hooks/useMutableRef");
+var monthDiff_1 = require("../../../../../../utils/date/monthDiff");
+var CalendarContext_1 = require("../../../../../Calendar/CalendarContext");
+var Stack_1 = require("../../../../../Stack");
+var CalendarItem_1 = require("../../../CalendarItem");
+var CalendarConsumer = function () {
+    var _a = (0, datepicker_1.useDatePickerContext)().data, calendars = _a.calendars, selectedDates = _a.selectedDates;
+    var onOffsetChange = (0, CalendarContext_1.useCalendar)().onOffsetChange;
+    var savedFirstCalendar = (0, useMutableRef_1.useMutableRef)(calendars[0]);
+    var savedSecondCalendar = (0, useMutableRef_1.useMutableRef)(calendars[1]);
+    (0, react_1.useEffect)(function () {
+        if (!savedFirstCalendar.current || !savedSecondCalendar.current)
+            return;
+        var res;
+        var _a = tslib_1.__read(selectedDates, 2), start = _a[0], end = _a[1];
+        if (start && end) {
+            if ((0, monthDiff_1.monthDiff)(start, end) === 0) {
+                res = start;
+            }
+            if ((0, monthDiff_1.monthDiff)(start, end) === 1) {
+                res = start;
+            }
+            if ((0, monthDiff_1.monthDiff)(start, end) > 1) {
+                var d = new Date(end);
+                d.setDate(1);
+                d.setMonth(d.getMonth() - 1);
+                res = d;
+            }
+        }
+        if (res)
+            onOffsetChange === null || onOffsetChange === void 0 ? void 0 : onOffsetChange(res);
+    }, [selectedDates]);
+    if (!calendars[0] || !calendars[1])
+        return null;
+    return (react_1.default.createElement(Stack_1.Stack, null,
+        react_1.default.createElement(CalendarItem_1.CalendarItem, { calendar: calendars[0], type: "first" }),
+        react_1.default.createElement(CalendarItem_1.CalendarItem, { calendar: calendars[1], type: "last" })));
+};
+exports.CalendarConsumer = CalendarConsumer;

package/__inner__/cjs/components/Calendar/components/CalendarModeRange/components/CalendarConsumer/index.d.ts

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

package/__inner__/cjs/components/Calendar/components/CalendarModeRange/components/CalendarConsumer/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CalendarConsumer"), exports);

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CalendarAdditionalControls"), exports);
+tslib_1.__exportStar(require("./CalendarConsumer"), exports);

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CalendarModeRange"), exports);

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

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

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarModeSingle = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var datepicker_1 = require("@rehookify/datepicker");
+var useControlled_1 = require("../../../../hooks/useControlled");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var CalendarContext_1 = require("../../CalendarContext");
+var constants_1 = require("../../constants");
+var utils_1 = require("../../utils");
+var components_1 = require("./components");
+// eslint-disable-next-line react/display-name
+exports.CalendarModeSingle = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'Calendar',
+    });
+    var _a = props.size, size = _a === void 0 ? constants_1.CALENDAR_DEFAULT_SIZE : _a, _b = props.startDay, startDay = _b === void 0 ? constants_1.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 = tslib_1.__rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "getPeriodSwitchAriaLabel"]);
+    var _c = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'Calendar',
+        state: 'value',
+    }), 2), value = _c[0], setValue = _c[1];
+    var _d = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: offsetDateProp,
+        defaultValue: defaultOffsetDate,
+        name: 'Calendar',
+        state: 'offsetDate',
+    }), 2), offsetDate = _d[0], setOffsetDateState = _d[1];
+    var onDatesChange = function (data) {
+        var value = data[0];
+        if (value) {
+            setValue(value);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
+        }
+    };
+    var onOffsetChange = function (date) {
+        setOffsetDateState(date);
+        onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
+    };
+    var config = {
+        calendar: {
+            startDay: startDay,
+        },
+        locale: {
+            locale: locale,
+            day: 'numeric',
+            weekday: 'short',
+        },
+        exclude: exclude,
+        offsetDate: offsetDate,
+        onDatesChange: onDatesChange,
+        onOffsetChange: onOffsetChange,
+        dates: { minDate: minDate, maxDate: maxDate },
+        years: { numberOfYears: 15 },
+        selectedDates: value ? [value] : [],
+    };
+    return (react_1.default.createElement(datepicker_1.DatePickerProvider, { config: config },
+        react_1.default.createElement(CalendarContext_1.CalendarContext.Provider, { value: {
+                size: size,
+                minDate: minDate,
+                maxDate: maxDate,
+                onDayClick: onDayClick,
+                onYearClick: onYearClick,
+                onMonthClick: onMonthClick,
+                getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel,
+                onOffsetChange: onOffsetChange,
+            } },
+            react_1.default.createElement("div", tslib_1.__assign({ className: (0, utils_1.cnCalendar)({ size: size }, [className]) }, other, { ref: ref }),
+                react_1.default.createElement(components_1.CalendarConsumer, null),
+                react_1.default.createElement(components_1.CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
+});

package/__inner__/cjs/components/Calendar/components/CalendarModeSingle/components/CalendarAdditionalControls/CalendarAdditionalControls.d.ts

@@ -0,0 +1,9 @@
+import './CalendarAdditionalControls.css';
+import type { FC } from 'react';
+import type { CalendarProps } from '../../../../index';
+export declare const cnCalendarAdditionalControls: import("@bem-react/classname").ClassNameFormatter;
+type CalendarAdditionalControlsProps = {
+    renderAdditionalControls?: CalendarProps<'single'>['renderAdditionalControls'];
+};
+export declare const CalendarAdditionalControls: FC<CalendarAdditionalControlsProps>;
+export {};

package/__inner__/cjs/components/Calendar/components/{CalendarAdditionalControls → CalendarModeSingle/components/CalendarAdditionalControls}/CalendarAdditionalControls.js

@@ -5,9 +5,9 @@ var tslib_1 = require("tslib");
 require("./CalendarAdditionalControls.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var datepicker_1 = require("@rehookify/datepicker");
-var classname_1 = require("../../../../utils/classname");
-var renderContent_1 = require("../../../../utils/renderContent");
-var Divider_1 = require("../../../Divider");
+var classname_1 = require("../../../../../../utils/classname");
+var renderContent_1 = require("../../../../../../utils/renderContent");
+var Divider_1 = require("../../../../../Divider");
 exports.cnCalendarAdditionalControls = (0, classname_1.cn)('CalendarAdditionalControls');
 var CalendarAdditionalControls = function (_a) {
     var renderAdditionalControls = _a.renderAdditionalControls;

package/__inner__/cjs/components/Calendar/components/CalendarModeSingle/components/CalendarAdditionalControls/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CalendarAdditionalControls"), exports);

package/__inner__/cjs/components/Calendar/components/CalendarModeSingle/components/CalendarConsumer/CalendarConsumer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CalendarConsumer: () => React.JSX.Element | null;

package/__inner__/cjs/components/Calendar/components/CalendarModeSingle/components/CalendarConsumer/CalendarConsumer.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarConsumer = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var datepicker_1 = require("@rehookify/datepicker");
+var useMutableRef_1 = require("../../../../../../hooks/useMutableRef");
+var CalendarContext_1 = require("../../../../../Calendar/CalendarContext");
+var utils_1 = require("../../../../../DatePicker/utils");
+var CalendarItem_1 = require("../../../CalendarItem");
+var CalendarConsumer = function () {
+    var _a = (0, datepicker_1.useDatePickerContext)().data, calendars = _a.calendars, selectedDates = _a.selectedDates;
+    var onOffsetChange = (0, CalendarContext_1.useCalendar)().onOffsetChange;
+    var calendar = calendars[0];
+    var savedCalendar = (0, useMutableRef_1.useMutableRef)(calendar);
+    var _b = tslib_1.__read(selectedDates, 1), value = _b[0];
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (!savedCalendar.current)
+            return;
+        var daysInCurrentMonth = savedCalendar.current.days.filter(function (_a) {
+            var inCurrentMonth = _a.inCurrentMonth;
+            return inCurrentMonth;
+        });
+        var valueIsOutOfRange = (0, utils_1.isOutOfRange)({
+            minDate: (_a = daysInCurrentMonth[0]) === null || _a === void 0 ? void 0 : _a.$date,
+            maxDate: (_b = daysInCurrentMonth[daysInCurrentMonth.length - 1]) === null || _b === void 0 ? void 0 : _b.$date,
+            value: value,
+        });
+        if (valueIsOutOfRange && value) {
+            onOffsetChange === null || onOffsetChange === void 0 ? void 0 : onOffsetChange(value);
+        }
+    }, [value]);
+    if (!calendars[0]) {
+        return null;
+    }
+    return react_1.default.createElement(CalendarItem_1.CalendarItem, { calendar: calendars[0], type: "single" });
+};
+exports.CalendarConsumer = CalendarConsumer;

package/__inner__/cjs/components/Calendar/components/CalendarModeSingle/components/CalendarConsumer/index.d.ts

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

package/__inner__/cjs/components/Calendar/components/CalendarModeSingle/components/CalendarConsumer/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CalendarConsumer"), exports);

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CalendarAdditionalControls"), exports);
+tslib_1.__exportStar(require("./CalendarConsumer"), exports);

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CalendarModeSingle"), exports);

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.css

@@ -10,16 +10,14 @@
   box-sizing: border-box;
 }
 
-  .CalendarSwitcher-StartActions,
-  .CalendarSwitcher-EndActions {
+  .CalendarSwitcher > * {
     display: flex;
     align-items: center;
+    gap: var(--spacing-m);
   }
 
-  .CalendarSwitcher-StartActions {
+  .CalendarSwitcher-Actions {
+    display: flex;
+    align-items: center;
     gap: var(--spacing-2xs);
   }
-
-  .CalendarSwitcher-EndActions {
-    gap: var(--spacing-m);
-  }

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.d.ts

@@ -1,10 +1,10 @@
 import './CalendarSwitcher.css';
-import type { ComponentPropsWithRef, ComponentRef } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, ReactNode } from 'react';
 import React from 'react';
-import type { CalendarStepVariant } from '../../index';
 export declare const cnCalendarSwitcher: import("@bem-react/classname").ClassNameFormatter;
 export type CalendarSwitcherProps = {
-    getPeriodSwitchAriaLabel?: (step: CalendarStepVariant) => [string, string];
+    prevButton?: ReactNode;
+    nextButton?: ReactNode;
 } & ComponentPropsWithRef<'div'>;
 export type CalendarSwitcherRef = ComponentRef<'div'>;
 export declare const CalendarSwitcher: React.ForwardRefExoticComponent<Omit<CalendarSwitcherProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.js

@@ -12,29 +12,29 @@ var ButtonNext_1 = require("../../../ButtonNext");
 var IconButtonNext_1 = require("../../../IconButtonNext");
 var Typography_1 = require("../../../Typography");
 var CalendarContext_1 = require("../../CalendarContext");
-var utils_1 = require("./utils");
+var CalendarItemContext_1 = require("../CalendarItem/CalendarItemContext");
 exports.cnCalendarSwitcher = (0, classname_1.cn)('CalendarSwitcher');
 exports.CalendarSwitcher = (0, react_1.forwardRef)(function (_a, ref) {
     var _b, _c;
-    var className = _a.className, _d = _a.getPeriodSwitchAriaLabel, getPeriodSwitchAriaLabel = _d === void 0 ? utils_1.getPeriodSwitchAriaLabel : _d, other = tslib_1.__rest(_a, ["className", "getPeriodSwitchAriaLabel"]);
-    var _e = (0, react_1.useContext)(CalendarContext_1.CalendarContext), step = _e.step, goStep = _e.goStep, size = _e.size;
-    var _f = (0, datepicker_1.useDatePickerContext)(), _g = _f.data, calendars = _g.calendars, years = _g.years, _h = _f.propGetters, subtractOffset = _h.subtractOffset, addOffset = _h.addOffset, nextYearsButton = _h.nextYearsButton, previousYearsButton = _h.previousYearsButton;
-    var _j = calendars[0] || {}, year = _j.year, month = _j.month;
+    var className = _a.className, prevButton = _a.prevButton, nextButton = _a.nextButton, other = tslib_1.__rest(_a, ["className", "prevButton", "nextButton"]);
+    var _d = (0, CalendarContext_1.useCalendar)(), size = _d.size, getPeriodSwitchAriaLabel = _d.getPeriodSwitchAriaLabel;
+    var _e = (0, CalendarItemContext_1.useCalendarItem)(), step = _e.step, goStep = _e.goStep, calendar = _e.calendar;
+    var _f = (0, datepicker_1.useDatePickerContext)(), years = _f.data.years, _g = _f.propGetters, addOffset = _g.addOffset, subtractOffset = _g.subtractOffset, nextYearsButton = _g.nextYearsButton, previousYearsButton = _g.previousYearsButton;
+    var _h = calendar || {}, year = _h.year, month = _h.month;
     var handleClickOnMonths = function () {
         goStep === null || goStep === void 0 ? void 0 : goStep('months');
     };
     var handleClickOnYears = function () {
         goStep === null || goStep === void 0 ? void 0 : goStep('years');
     };
-    var _k = tslib_1.__read(getPeriodSwitchAriaLabel(step), 2), PREVIOUS = _k[0], NEXT = _k[1];
+    var _j = tslib_1.__read((getPeriodSwitchAriaLabel === null || getPeriodSwitchAriaLabel === void 0 ? void 0 : getPeriodSwitchAriaLabel(step)) || [], 2), PREVIOUS = _j[0], NEXT = _j[1];
     return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, exports.cnCalendarSwitcher)({ size: size }, [className]) }, other, { ref: ref }),
         step === 'days' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: (0, exports.cnCalendarSwitcher)('StartActions') },
+            prevButton,
+            react_1.default.createElement("div", { className: (0, exports.cnCalendarSwitcher)('Actions') },
                 react_1.default.createElement(ButtonNext_1.Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnMonths, size: size }, month && (0, capitalizeFirstLetter_1.capitalizeFirstLetter)(month)),
                 react_1.default.createElement(ButtonNext_1.Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)),
-            react_1.default.createElement("div", { className: (0, exports.cnCalendarSwitcher)('EndActions') },
-                react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ variant: "function", type: "button", color: "primary", icon: icons_1.ChevronLeftIcon, size: size, "aria-label": PREVIOUS, title: PREVIOUS }, subtractOffset({ months: 1 }))),
-                react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ variant: "function", color: "primary", icon: icons_1.ChevronRightIcon, size: size, "aria-label": NEXT, title: NEXT }, addOffset({ months: 1 })))))),
+            nextButton)),
         step === 'months' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: (0, exports.cnCalendarSwitcher)('StartActions') },
                 react_1.default.createElement(ButtonNext_1.Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)),

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

@@ -1,4 +1,6 @@
-export * from './CalendarItem';
+export * from './CalendarGridItem';
 export * from './CalendarSwitcher';
 export * from './CalendarGrid';
-export * from './CalendarAdditionalControls';
+export * from './CalendarModeSingle';
+export * from './CalendarModeRange';
+export * from './CalendarItem';

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

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./CalendarItem"), exports);
+tslib_1.__exportStar(require("./CalendarGridItem"), exports);
 tslib_1.__exportStar(require("./CalendarSwitcher"), exports);
 tslib_1.__exportStar(require("./CalendarGrid"), exports);
-tslib_1.__exportStar(require("./CalendarAdditionalControls"), exports);
+tslib_1.__exportStar(require("./CalendarModeSingle"), exports);
+tslib_1.__exportStar(require("./CalendarModeRange"), exports);
+tslib_1.__exportStar(require("./CalendarItem"), exports);

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

@@ -1,4 +1,4 @@
-export declare const CALENDAR_DEFAULT_AS = "div";
 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";

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CALENDAR_DEFAULT_SIZE = exports.CALENDAR_ITEM_DEFAULT_TAG = exports.CALENDAR_DEFAULT_START_DAY = exports.CALENDAR_DEFAULT_AS = void 0;
-exports.CALENDAR_DEFAULT_AS = 'div';
+exports.CALENDAR_DEFAULT_MODE = exports.CALENDAR_DEFAULT_SIZE = exports.CALENDAR_ITEM_DEFAULT_TAG = exports.CALENDAR_DEFAULT_START_DAY = void 0;
 exports.CALENDAR_DEFAULT_START_DAY = 1;
 exports.CALENDAR_ITEM_DEFAULT_TAG = 'button';
 exports.CALENDAR_DEFAULT_SIZE = 'm';
+exports.CALENDAR_DEFAULT_MODE = 'single';

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

@@ -1,30 +1,32 @@
-import type { ElementType, MouseEvent, ReactElement } from 'react';
+import type { ComponentPropsWithRef, MouseEvent, ReactElement, ReactNode } from 'react';
 import type { DPExcludeConfig, DPDayInteger } from '@rehookify/datepicker';
-import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
-import type { CalendarSwitcherProps } from './components';
-import type { CALENDAR_DEFAULT_AS } from './constants';
+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 CalendarOnChange = (date: Date | null) => void;
+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 = (props: {
-    date?: Date;
+export type CalendarRenderAdditionalControls<MODE extends CalendarModeVariant> = (props: {
+    date?: MODE extends 'range' ? Date[] : Date;
 }) => ReactElement;
-export type CalendarBaseProps = {
+export type CalendarProps<MODE extends CalendarModeVariant = typeof CALENDAR_DEFAULT_MODE> = {
+    mode?: MODE;
     /** Выбранная дата */
-    value?: Date | null;
+    value?: CalendarValue<MODE>;
     /** Выбранная дата по умолчанию (неконтролируемое состояние) */
-    defaultValue?: Date;
+    defaultValue?: CalendarValue<MODE>;
     /** Смещение календаря – на какой странице показать календарь */
     offsetDate?: Date;
     /** Смещение календаря по умолчанию */
     defaultOffsetDate?: Date;
     /** Обработчик событий выбора даты */
-    onChange?: CalendarOnChange;
+    onChange?: CalendarOnChange<MODE>;
     /** Обработчик событий на смещение календаря */
     onOffsetDateChange?: CalendarOnOffsetDateChange;
     /** Локализация */
@@ -46,9 +48,10 @@ export type CalendarBaseProps = {
     /** Обработчик нажатия на кнопку года */
     onYearClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
     /** Дополнительные контролы – рендер функция */
-    renderAdditionalControls?: CalendarRenderAdditionalControls;
-    /** Cвойства компонента CalendarSwitcher */
-    calendarSwitcherProps?: CalendarSwitcherProps;
+    renderAdditionalControls?: CalendarRenderAdditionalControls<MODE>;
+    /** Функция форматирования атрибута aria-label для кнопок переключения периодов */
+    getPeriodSwitchAriaLabel?: (step: CalendarStepVariant) => [string, string];
     children?: never;
-};
-export type CalendarProps<As extends ElementType = typeof CALENDAR_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<CalendarBaseProps, As>;
+} & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>;
+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;

package/__inner__/cjs/components/Calendar/types.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calendarSizeVariant = exports.calendarStepVariant = void 0;
+exports.calendarModeVariant = exports.calendarSizeVariant = exports.calendarStepVariant = void 0;
 exports.calendarStepVariant = ['days', 'months', 'years'];
 exports.calendarSizeVariant = ['s', 'm', 'l'];
+exports.calendarModeVariant = ['single', 'range'];

package/__inner__/cjs/components/Calendar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { CalendarProps } from './index';
+export declare const cnCalendar: import("@bem-react/classname").ClassNameFormatter;
+export declare const getPeriodSwitchAriaLabel: CalendarProps['getPeriodSwitchAriaLabel'];

package/__inner__/cjs/components/Calendar/{components/CalendarSwitcher/utils.js → utils.js}

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPeriodSwitchAriaLabel = void 0;
+exports.getPeriodSwitchAriaLabel = exports.cnCalendar = void 0;
+var classname_1 = require("../../utils/classname");
+exports.cnCalendar = (0, classname_1.cn)('Calendar');
 var getPeriodSwitchAriaLabel = function (step) {
     if (step === 'days') {
         return ['Previous month', 'Next month'];