@ozen-ui/kit 0.53.0 → 0.55.0

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CalendarContext = void 0;
+exports.useCalendar = exports.CalendarContext = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
-exports.CalendarContext = react_1.default.createContext({
-    step: 'days',
-});
+var react_1 = tslib_1.__importStar(require("react"));
+exports.CalendarContext = react_1.default.createContext({});
+var useCalendar = function () { return (0, react_1.useContext)(exports.CalendarContext); };
+exports.useCalendar = useCalendar;

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

@@ -4,4 +4,6 @@ export declare const cnCalendarGrid: import("@bem-react/classname").ClassNameFor
 export declare const cnCalendarDays: import("@bem-react/classname").ClassNameFormatter;
 export declare const cnCalendarMoths: import("@bem-react/classname").ClassNameFormatter;
 export declare const cnCalendarYears: import("@bem-react/classname").ClassNameFormatter;
-export declare const CalendarGrid: () => React.JSX.Element;
+export declare const CalendarGrid: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -10,15 +10,17 @@ var capitalizeFirstLetter_1 = require("../../../../utils/capitalizeFirstLetter")
 var classname_1 = require("../../../../utils/classname");
 var Typography_1 = require("../../../Typography");
 var CalendarContext_1 = require("../../CalendarContext");
-var CalendarItem_1 = require("../CalendarItem");
+var CalendarGridItem_1 = require("../CalendarGridItem");
+var CalendarItemContext_1 = require("../CalendarItem/CalendarItemContext");
 exports.cnCalendarGrid = (0, classname_1.cn)('CalendarGrid');
 exports.cnCalendarDays = (0, classname_1.cn)('CalendarDays');
 exports.cnCalendarMoths = (0, classname_1.cn)('CalendarMonths');
 exports.cnCalendarYears = (0, classname_1.cn)('CalendarYears');
-var CalendarGrid = function () {
-    var _a = (0, react_1.useContext)(CalendarContext_1.CalendarContext), step = _a.step, goStep = _a.goStep, size = _a.size, onYearClick = _a.onYearClick, onDayClick = _a.onDayClick, onMonthClick = _a.onMonthClick;
-    var _b = (0, datepicker_1.useDatePickerContext)(), _c = _b.data, weekDays = _c.weekDays, calendars = _c.calendars, years = _c.years, months = _c.months, _d = _b.propGetters, dayButton = _d.dayButton, monthButton = _d.monthButton, yearButton = _d.yearButton;
-    var _e = calendars[0] || {}, days = _e.days, month = _e.month;
+exports.CalendarGrid = (0, react_1.forwardRef)(function () {
+    var _a = (0, CalendarContext_1.useCalendar)(), size = _a.size, onYearClick = _a.onYearClick, onDayClick = _a.onDayClick, onMonthClick = _a.onMonthClick;
+    var _b = (0, CalendarItemContext_1.useCalendarItem)(), step = _b.step, goStep = _b.goStep, calendar = _b.calendar;
+    var _c = (0, datepicker_1.useDatePickerContext)(), _d = _c.data, weekDays = _d.weekDays, years = _d.years, months = _d.months, _e = _c.propGetters, dayButton = _e.dayButton, monthButton = _e.monthButton, yearButton = _e.yearButton;
+    var _f = calendar || {}, days = _f.days, month = _f.month;
     var handleClickOnDay = function (e, date) {
         onDayClick === null || onDayClick === void 0 ? void 0 : onDayClick(e, date);
     };
@@ -32,16 +34,16 @@ var CalendarGrid = function () {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         step === 'days' && (react_1.default.createElement("div", { className: (0, classnames_1.classnames)((0, exports.cnCalendarGrid)(), (0, exports.cnCalendarDays)()) },
-            weekDays.map(function (day) { return (react_1.default.createElement(Typography_1.Typography, tslib_1.__assign({ key: "".concat(month, "-").concat(day), color: "tertiary" }, (size && { variant: "text-".concat(size) })), day && (0, capitalizeFirstLetter_1.capitalizeFirstLetter)(day))); }), days === null || days === void 0 ? void 0 :
-            days.map(function (dpDay) { return (react_1.default.createElement(CalendarItem_1.CalendarItem, tslib_1.__assign({ size: size, current: dpDay.now, selected: dpDay.selected, key: dpDay.$date.toDateString() }, dayButton(dpDay, {
+            weekDays.map(function (day) { return (react_1.default.createElement(Typography_1.Typography, tslib_1.__assign({ role: "row", key: "".concat(month, "-").concat(day), color: "tertiary" }, (size && { variant: "text-".concat(size) })), day && (0, capitalizeFirstLetter_1.capitalizeFirstLetter)(day))); }), days === null || days === void 0 ? void 0 :
+            days.map(function (dpDay) { return (react_1.default.createElement(CalendarGridItem_1.CalendarGridItem, tslib_1.__assign({ size: size, current: dpDay.now, range: dpDay.range, selected: dpDay.selected, key: "".concat(month, " ").concat(dpDay.$date.toDateString()) }, dayButton(dpDay, {
                 onClick: handleClickOnDay,
                 disabled: dpDay.disabled || !dpDay.inCurrentMonth,
             }), { tabIndex: dpDay.disabled || !dpDay.inCurrentMonth ? -1 : 0 }), dpDay.day)); }))),
-        step === 'months' && (react_1.default.createElement("div", { className: (0, classnames_1.classnames)((0, exports.cnCalendarGrid)(), (0, exports.cnCalendarMoths)()) }, months === null || months === void 0 ? void 0 : months.map(function (dpMonth) { return (react_1.default.createElement(CalendarItem_1.CalendarItem, tslib_1.__assign({ size: size, current: dpMonth.now, key: dpMonth.$date.toDateString(), selected: dpMonth.selected }, monthButton(dpMonth, {
+        step === 'months' && (react_1.default.createElement("div", { className: (0, classnames_1.classnames)((0, exports.cnCalendarGrid)(), (0, exports.cnCalendarMoths)()) }, months === null || months === void 0 ? void 0 : months.map(function (dpMonth) { return (react_1.default.createElement(CalendarGridItem_1.CalendarGridItem, tslib_1.__assign({ size: size, current: dpMonth.now, key: dpMonth.$date.toDateString(), selected: dpMonth.selected }, monthButton(dpMonth, {
             onClick: handleClickOnMonth,
         }), { tabIndex: dpMonth.disabled ? -1 : 0 }), dpMonth.month && (0, capitalizeFirstLetter_1.capitalizeFirstLetter)(dpMonth.month))); }))),
-        step === 'years' && (react_1.default.createElement("div", { className: (0, classnames_1.classnames)((0, exports.cnCalendarGrid)(), (0, exports.cnCalendarYears)()) }, years === null || years === void 0 ? void 0 : years.map(function (dpYear) { return (react_1.default.createElement(CalendarItem_1.CalendarItem, tslib_1.__assign({ key: dpYear.$date.toDateString(), current: dpYear.now, selected: dpYear.selected, size: size }, yearButton(dpYear, {
+        step === 'years' && (react_1.default.createElement("div", { className: (0, classnames_1.classnames)((0, exports.cnCalendarGrid)(), (0, exports.cnCalendarYears)()) }, years === null || years === void 0 ? void 0 : years.map(function (dpYear) { return (react_1.default.createElement(CalendarGridItem_1.CalendarGridItem, tslib_1.__assign({ key: dpYear.$date.toDateString(), current: dpYear.now, selected: dpYear.selected, size: size }, yearButton(dpYear, {
             onClick: handleClickOnYear,
         }), { tabIndex: dpYear.disabled ? -1 : 0 }), dpYear.year)); })))));
-};
-exports.CalendarGrid = CalendarGrid;
+});
+exports.CalendarGrid.displayName = 'CalendarGrid';

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

@@ -1 +1,2 @@
 export * from './CalendarGrid';
+export * from './types';

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./CalendarGrid"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithRef, ComponentRef } from 'react';
+export type CalendarGridRef = ComponentRef<'div'>;
+export type CalendarGridProps = ComponentPropsWithRef<'div'>;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/Calendar/components/{CalendarItem/CalendatItem.css → CalendarGridItem/CalendarGridItem.css}

@@ -1,5 +1,5 @@
 /* stylelint-disable */
-.CalendarItem {
+.CalendarGridItem {
   border: none;
   color: var(--color-content-primary);
   background-color: inherit;
@@ -10,46 +10,50 @@
     box-shadow var(--transition-default),
     opacity var(--transition-default);
 }
-.CalendarItem_current {
-    color: var(--color-content-action);
-  }
-.CalendarItem_size_s {
+.CalendarGridItem_size_s {
       font: var(--typography-text-s-font);
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
       text-transform: var(--typography-text-s-text_transform, none);
       border-radius: var(--border-radius-m);
     }
-.CalendarItem_size_m {
+.CalendarGridItem_size_m {
       font: var(--typography-text-m-font);
       letter-spacing: var(--typography-text-m-letter_spacing, 0);
       text-transform: var(--typography-text-m-text_transform, none);
       border-radius: var(--border-radius-m);
     }
-.CalendarItem_size_l {
+.CalendarGridItem_size_l {
       font: var(--typography-text-l-font);
       letter-spacing: var(--typography-text-l-letter_spacing, 0);
       text-transform: var(--typography-text-l-text_transform, none);
       border-radius: var(--border-radius-m);
     }
-.CalendarItem:hover:not(.CalendarItem_selected) {
+.CalendarGridItem_range_in-range,
+    .CalendarGridItem_range_will-be-in-range {
+      background-color: var(--color-background-action-light);
+    }
+.CalendarGridItem:hover:not(.CalendarGridItem_selected) {
     background-color: var(--color-background-main-hover);
   }
-.CalendarItem:active:not(.CalendarItem_selected) {
+.CalendarGridItem:active:not(.CalendarGridItem_selected) {
     background-color: var(--color-background-main-pressed);
   }
-.CalendarItem_selected {
+.CalendarGridItem_selected {
     color: var(--color-content-action-on);
     background-color: var(--color-background-action);
   }
-.CalendarItem_disabled {
+.CalendarGridItem_disabled {
     pointer-events: none;
     background-color: inherit;
     color: var(--color-content-tertiary);
   }
-.CalendarItem:focus:not(:focus-visible) {
+.CalendarGridItem_current:not(.CalendarGridItem_selected) {
+    color: var(--color-content-action);
+  }
+.CalendarGridItem:focus:not(:focus-visible) {
     box-shadow: none;
   }
-.CalendarItem:focus {
+.CalendarGridItem:focus {
     outline: 0;
     box-shadow: var(--shadow-outline-focused);
   }

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

@@ -0,0 +1,5 @@
+import './CalendarGridItem.css';
+import React from 'react';
+import type { CalendarGridItemProps } from './index';
+export declare const cnCalendarGridItem: import("@bem-react/classname").ClassNameFormatter;
+export declare const CalendarGridItem: React.ForwardRefExoticComponent<Omit<CalendarGridItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarGridItem = exports.cnCalendarGridItem = void 0;
+var tslib_1 = require("tslib");
+require("./CalendarGridItem.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var classname_1 = require("../../../../utils/classname");
+var ButtonBase_1 = require("../../../ButtonBase");
+exports.cnCalendarGridItem = (0, classname_1.cn)('CalendarGridItem');
+exports.CalendarGridItem = (0, react_1.forwardRef)(function (_a, ref) {
+    var current = _a.current, selected = _a.selected, range = _a.range, disabled = _a.disabled, className = _a.className, size = _a.size, children = _a.children, other = tslib_1.__rest(_a, ["current", "selected", "range", "disabled", "className", "size", "children"]);
+    return (react_1.default.createElement(ButtonBase_1.ButtonBase, tslib_1.__assign({ className: (0, exports.cnCalendarGridItem)({
+            size: size,
+            current: current,
+            selected: selected,
+            disabled: disabled,
+            range: range,
+        }, [className]), disabled: disabled }, other, { ref: ref }), children));
+});
+exports.CalendarGridItem.displayName = 'CalendarGridItem';

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

@@ -0,0 +1,2 @@
+export * from './CalendarGridItem';
+export * from './types';

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

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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,13 +1,3 @@
-import './CalendatItem.css';
-import type { ComponentPropsWithRef } from 'react';
 import React from 'react';
-import type { CALENDAR_ITEM_DEFAULT_TAG } from '../../constants';
-import type { CalendarSizeVariant } from '../../index';
-export declare const cnCalendarItem: import("@bem-react/classname").ClassNameFormatter;
-export type CalendarItemProps = Omit<ComponentPropsWithRef<typeof CALENDAR_ITEM_DEFAULT_TAG>, 'size'> & {
-    current?: boolean;
-    selected?: boolean;
-    disabled?: boolean;
-    size?: CalendarSizeVariant;
-};
-export declare const CalendarItem: React.ForwardRefExoticComponent<Omit<CalendarItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+import type { CalendarItemProp } from '../index';
+export declare const CalendarItem: React.ForwardRefExoticComponent<Omit<CalendarItemProp, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,19 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CalendarItem = exports.cnCalendarItem = void 0;
+exports.CalendarItem = void 0;
 var tslib_1 = require("tslib");
-require("./CalendatItem.css");
 var react_1 = tslib_1.__importStar(require("react"));
-var classname_1 = require("../../../../utils/classname");
-var ButtonBase_1 = require("../../../ButtonBase");
-exports.cnCalendarItem = (0, classname_1.cn)('CalendarItem');
+var Divider_1 = require("../../../Divider");
+var utils_1 = require("../../utils");
+var index_1 = require("../index");
+var CalendarItemContext_1 = require("./CalendarItemContext");
+var components_1 = require("./components");
 exports.CalendarItem = (0, react_1.forwardRef)(function (_a, ref) {
-    var current = _a.current, selected = _a.selected, disabled = _a.disabled, className = _a.className, size = _a.size, children = _a.children, other = tslib_1.__rest(_a, ["current", "selected", "disabled", "className", "size", "children"]);
-    return (react_1.default.createElement(ButtonBase_1.ButtonBase, tslib_1.__assign({ className: (0, exports.cnCalendarItem)({
-            size: size,
-            current: current,
-            selected: selected,
-            disabled: disabled,
-        }, [className]), disabled: disabled }, other, { ref: ref }), children));
+    var calendar = _a.calendar, type = _a.type;
+    var _b = tslib_1.__read((0, react_1.useState)('days'), 2), step = _b[0], setStep = _b[1];
+    // Управление представлениями календаря
+    var goStep = function (step) {
+        setStep(step);
+    };
+    var getActions = function (type) {
+        if (type === 'single') {
+            return {
+                nextButton: (react_1.default.createElement("div", null,
+                    react_1.default.createElement(components_1.CalendarItemPreviousMonth, null),
+                    react_1.default.createElement(components_1.CalendarItemNextMonth, null))),
+            };
+        }
+        if (type === 'first') {
+            return {
+                prevButton: react_1.default.createElement(components_1.CalendarItemPreviousMonth, null),
+                nextButton: react_1.default.createElement("div", null),
+            };
+        }
+        if (type === 'last') {
+            return {
+                prevButton: react_1.default.createElement("div", null),
+                nextButton: react_1.default.createElement(components_1.CalendarItemNextMonth, null),
+            };
+        }
+        return {
+            prevButton: react_1.default.createElement("div", null),
+            nextButton: react_1.default.createElement("div", null),
+        };
+    };
+    return (react_1.default.createElement(CalendarItemContext_1.CalendarItemContext.Provider, { value: { step: step, goStep: goStep, calendar: calendar } },
+        react_1.default.createElement("div", { ref: ref, className: (0, utils_1.cnCalendar)('MonthContainer') },
+            react_1.default.createElement(index_1.CalendarSwitcher, tslib_1.__assign({}, getActions(type))),
+            react_1.default.createElement(Divider_1.Divider, { color: "secondary" }),
+            react_1.default.createElement(index_1.CalendarGrid, null))));
 });
 exports.CalendarItem.displayName = 'CalendarItem';

package/__inner__/cjs/components/Calendar/components/CalendarItem/CalendarItemContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { DPCalendar } from '@rehookify/datepicker';
+import type { CalendarStepVariant } from '../../index';
+export interface CalendarItemContextValue {
+    step: CalendarStepVariant;
+    goStep?: (step: CalendarStepVariant) => void;
+    calendar?: DPCalendar;
+}
+export declare const CalendarItemContext: React.Context<CalendarItemContextValue>;
+export declare const useCalendarItem: () => CalendarItemContextValue;

package/__inner__/cjs/components/Calendar/components/CalendarItem/CalendarItemContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCalendarItem = exports.CalendarItemContext = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+exports.CalendarItemContext = react_1.default.createContext({
+    step: 'days',
+});
+var useCalendarItem = function () { return (0, react_1.useContext)(exports.CalendarItemContext); };
+exports.useCalendarItem = useCalendarItem;

package/__inner__/cjs/components/Calendar/components/CalendarItem/components/CalendarItemNextMonth/CalendarItemNextMonth.d.ts

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

package/__inner__/cjs/components/Calendar/components/CalendarItem/components/CalendarItemNextMonth/CalendarItemNextMonth.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarItemNextMonth = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var datepicker_1 = require("@rehookify/datepicker");
+var IconButtonNext_1 = require("../../../../../IconButtonNext");
+var CalendarContext_1 = require("../../../../CalendarContext");
+var CalendarItemNextMonth = function () {
+    var _a = (0, CalendarContext_1.useCalendar)(), getPeriodSwitchAriaLabel = _a.getPeriodSwitchAriaLabel, size = _a.size;
+    var _b = tslib_1.__read((getPeriodSwitchAriaLabel === null || getPeriodSwitchAriaLabel === void 0 ? void 0 : getPeriodSwitchAriaLabel('days')) || [], 2), NEXT = _b[1];
+    var addOffset = (0, datepicker_1.useDatePickerContext)().propGetters.addOffset;
+    return (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 }))));
+};
+exports.CalendarItemNextMonth = CalendarItemNextMonth;

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

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

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

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

package/__inner__/cjs/components/Calendar/components/CalendarItem/components/CalendarItemPreviousMonth/CalendarItemPreviousMonth.d.ts

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

package/__inner__/cjs/components/Calendar/components/CalendarItem/components/CalendarItemPreviousMonth/CalendarItemPreviousMonth.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarItemPreviousMonth = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var datepicker_1 = require("@rehookify/datepicker");
+var IconButtonNext_1 = require("../../../../../IconButtonNext");
+var CalendarContext_1 = require("../../../../CalendarContext");
+var CalendarItemPreviousMonth = function () {
+    var _a = (0, CalendarContext_1.useCalendar)(), getPeriodSwitchAriaLabel = _a.getPeriodSwitchAriaLabel, size = _a.size;
+    var _b = tslib_1.__read((getPeriodSwitchAriaLabel === null || getPeriodSwitchAriaLabel === void 0 ? void 0 : getPeriodSwitchAriaLabel('days')) || [], 1), PREVIOUS = _b[0];
+    var subtractOffset = (0, datepicker_1.useDatePickerContext)().propGetters.subtractOffset;
+    return (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 }))));
+};
+exports.CalendarItemPreviousMonth = CalendarItemPreviousMonth;

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

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

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

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

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

@@ -0,0 +1,2 @@
+export * from './CalendarItemNextMonth';
+export * from './CalendarItemPreviousMonth';

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

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

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

@@ -1 +1,2 @@
 export * from './CalendarItem';
+export * from './types';

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./CalendarItem"), exports);
+tslib_1.__exportStar(require("./types"), exports);

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

@@ -0,0 +1,9 @@
+import type { ComponentRef } from 'react';
+import type { DPCalendar } from '@rehookify/datepicker';
+import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
+import type { CalendarSwitcherProps } from '../index';
+export type CalendarItemProp = ExtendableComponentPropsWithRef<{
+    calendar: DPCalendar;
+    type?: 'first' | 'last' | 'single';
+} & Pick<CalendarSwitcherProps, 'nextButton' | 'prevButton'>, 'div'>;
+export type CalendarItemRef = ComponentRef<'div'>;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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';