@ozen-ui/kit 0.53.0 → 0.54.0

package/__inner__/esm/components/Calendar/components/CalendarModeRange/components/CalendarAdditionalControls/CalendarAdditionalControls.css

@@ -0,0 +1,3 @@
+.CalendarAdditionalControls {
+  margin: var(--calendar-grid-margin);
+}

package/__inner__/{cjs/components/Calendar → esm/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__/esm/components/Calendar/components/CalendarModeRange/components/CalendarAdditionalControls/CalendarAdditionalControls.js

@@ -0,0 +1,20 @@
+import './CalendarAdditionalControls.css';
+import React from 'react';
+import { useDatePickerContext } from '@rehookify/datepicker';
+import { cn } from '../../../../../../utils/classname';
+import { renderContent } from '../../../../../../utils/renderContent';
+import { Divider } from '../../../../../Divider';
+export var cnCalendarAdditionalControls = cn('CalendarAdditionalControls');
+export var CalendarAdditionalControls = function (_a) {
+    var renderAdditionalControls = _a.renderAdditionalControls;
+    var selectedDates = useDatePickerContext().data.selectedDates;
+    if (!renderAdditionalControls) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Divider, { color: "secondary" }),
+        React.createElement("div", { className: cnCalendarAdditionalControls() }, renderContent({
+            content: renderAdditionalControls,
+            props: { date: selectedDates },
+        }))));
+};

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

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

package/__inner__/esm/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__/esm/components/Calendar/components/CalendarModeRange/components/CalendarConsumer/CalendarConsumer.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 { monthDiff } from '../../../../../../utils/date/monthDiff';
+import { useCalendar } from '../../../../../Calendar/CalendarContext';
+import { Stack } from '../../../../../Stack';
+import { CalendarItem } from '../../../CalendarItem';
+export var CalendarConsumer = function () {
+    var _a = useDatePickerContext().data, calendars = _a.calendars, selectedDates = _a.selectedDates;
+    var onOffsetChange = useCalendar().onOffsetChange;
+    var savedFirstCalendar = useMutableRef(calendars[0]);
+    var savedSecondCalendar = useMutableRef(calendars[1]);
+    useEffect(function () {
+        if (!savedFirstCalendar.current || !savedSecondCalendar.current)
+            return;
+        var res;
+        var _a = __read(selectedDates, 2), start = _a[0], end = _a[1];
+        if (start && end) {
+            if (monthDiff(start, end) === 0) {
+                res = start;
+            }
+            if (monthDiff(start, end) === 1) {
+                res = start;
+            }
+            if (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.createElement(Stack, null,
+        React.createElement(CalendarItem, { calendar: calendars[0], type: "first" }),
+        React.createElement(CalendarItem, { calendar: calendars[1], type: "last" })));
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,71 @@
+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';
+// 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({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'Calendar',
+        state: 'value',
+    }), 2), value = _c[0], setValue = _c[1];
+    var _d = __read(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.createElement(DatePickerProvider, { config: config },
+        React.createElement(CalendarContext.Provider, { value: {
+                size: size,
+                minDate: minDate,
+                maxDate: maxDate,
+                onDayClick: onDayClick,
+                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(CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
+});

package/__inner__/esm/components/Calendar/components/CalendarModeSingle/components/CalendarAdditionalControls/CalendarAdditionalControls.css

@@ -0,0 +1,3 @@
+.CalendarAdditionalControls {
+  margin: var(--calendar-grid-margin);
+}

package/__inner__/esm/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__/esm/components/Calendar/components/{CalendarAdditionalControls → CalendarModeSingle/components/CalendarAdditionalControls}/CalendarAdditionalControls.js

@@ -1,9 +1,9 @@
 import './CalendarAdditionalControls.css';
 import React from 'react';
 import { useDatePickerContext } from '@rehookify/datepicker';
-import { cn } from '../../../../utils/classname';
-import { renderContent } from '../../../../utils/renderContent';
-import { Divider } from '../../../Divider';
+import { cn } from '../../../../../../utils/classname';
+import { renderContent } from '../../../../../../utils/renderContent';
+import { Divider } from '../../../../../Divider';
 export var cnCalendarAdditionalControls = cn('CalendarAdditionalControls');
 export var CalendarAdditionalControls = function (_a) {
     var renderAdditionalControls = _a.renderAdditionalControls;

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

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

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

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

package/__inner__/esm/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__/esm/components/Calendar/components/CalendarModeSingle/components/CalendarConsumer/CalendarConsumer.js

@@ -0,0 +1,35 @@
+import { __read } from "tslib";
+import React, { useEffect } from 'react';
+import { useDatePickerContext } from '@rehookify/datepicker';
+import { useMutableRef } from '../../../../../../hooks/useMutableRef';
+import { useCalendar } from '../../../../../Calendar/CalendarContext';
+import { isOutOfRange } from '../../../../../DatePicker/utils';
+import { CalendarItem } from '../../../CalendarItem';
+export var CalendarConsumer = function () {
+    var _a = useDatePickerContext().data, calendars = _a.calendars, selectedDates = _a.selectedDates;
+    var onOffsetChange = useCalendar().onOffsetChange;
+    var calendar = calendars[0];
+    var savedCalendar = useMutableRef(calendar);
+    var _b = __read(selectedDates, 1), value = _b[0];
+    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 = 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.createElement(CalendarItem, { calendar: calendars[0], type: "single" });
+};

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

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

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

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

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

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

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

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

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

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

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

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

package/__inner__/esm/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__/esm/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__/esm/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.js

@@ -1,6 +1,6 @@
 import { __assign, __read, __rest } from "tslib";
 import './CalendarSwitcher.css';
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@ozen-ui/icons';
 import { useDatePickerContext } from '@rehookify/datepicker';
 import { capitalizeFirstLetter as capitalize } from '../../../../utils/capitalizeFirstLetter';
@@ -8,30 +8,30 @@ import { cn } from '../../../../utils/classname';
 import { Button } from '../../../ButtonNext';
 import { IconButton } from '../../../IconButtonNext';
 import { Typography } from '../../../Typography';
-import { CalendarContext } from '../../CalendarContext';
-import { getPeriodSwitchAriaLabel as createPeriodSwitchAriaLabel } from './utils';
+import { useCalendar } from '../../CalendarContext';
+import { useCalendarItem } from '../CalendarItem/CalendarItemContext';
 export var cnCalendarSwitcher = cn('CalendarSwitcher');
 export var CalendarSwitcher = forwardRef(function (_a, ref) {
     var _b, _c;
-    var className = _a.className, _d = _a.getPeriodSwitchAriaLabel, getPeriodSwitchAriaLabel = _d === void 0 ? createPeriodSwitchAriaLabel : _d, other = __rest(_a, ["className", "getPeriodSwitchAriaLabel"]);
-    var _e = useContext(CalendarContext), step = _e.step, goStep = _e.goStep, size = _e.size;
-    var _f = 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 = __rest(_a, ["className", "prevButton", "nextButton"]);
+    var _d = useCalendar(), size = _d.size, getPeriodSwitchAriaLabel = _d.getPeriodSwitchAriaLabel;
+    var _e = useCalendarItem(), step = _e.step, goStep = _e.goStep, calendar = _e.calendar;
+    var _f = 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 = __read(getPeriodSwitchAriaLabel(step), 2), PREVIOUS = _k[0], NEXT = _k[1];
+    var _j = __read((getPeriodSwitchAriaLabel === null || getPeriodSwitchAriaLabel === void 0 ? void 0 : getPeriodSwitchAriaLabel(step)) || [], 2), PREVIOUS = _j[0], NEXT = _j[1];
     return (React.createElement("div", __assign({ className: cnCalendarSwitcher({ size: size }, [className]) }, other, { ref: ref }),
         step === 'days' && (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: cnCalendarSwitcher('StartActions') },
+            prevButton,
+            React.createElement("div", { className: cnCalendarSwitcher('Actions') },
                 React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnMonths, size: size }, month && capitalize(month)),
                 React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)),
-            React.createElement("div", { className: cnCalendarSwitcher('EndActions') },
-                React.createElement(IconButton, __assign({ variant: "function", type: "button", color: "primary", icon: ChevronLeftIcon, size: size, "aria-label": PREVIOUS, title: PREVIOUS }, subtractOffset({ months: 1 }))),
-                React.createElement(IconButton, __assign({ variant: "function", color: "primary", icon: ChevronRightIcon, size: size, "aria-label": NEXT, title: NEXT }, addOffset({ months: 1 })))))),
+            nextButton)),
         step === 'months' && (React.createElement(React.Fragment, null,
             React.createElement("div", { className: cnCalendarSwitcher('StartActions') },
                 React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)),

package/__inner__/esm/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__/esm/components/Calendar/components/index.js

@@ -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__/esm/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__/esm/components/Calendar/constants.js

@@ -1,4 +1,4 @@
-export var CALENDAR_DEFAULT_AS = 'div';
 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';

package/__inner__/esm/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__/esm/components/Calendar/types.js

@@ -1,2 +1,3 @@
 export var calendarStepVariant = ['days', 'months', 'years'];
 export var calendarSizeVariant = ['s', 'm', 'l'];
+export var calendarModeVariant = ['single', 'range'];

package/__inner__/esm/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__/esm/components/Calendar/{components/CalendarSwitcher/utils.js → utils.js}

@@ -1,3 +1,5 @@
+import { cn } from '../../utils/classname';
+export var cnCalendar = cn('Calendar');
 export var getPeriodSwitchAriaLabel = function (step) {
     if (step === 'days') {
         return ['Previous month', 'Next month'];

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

@@ -1,39 +1,39 @@
 import './DatePicker.css';
 import React from 'react';
-import type { CalendarOnChange } from '../Calendar';
+import type { DatePickerOnChange } from './types';
 export declare const cnDatePicker: import("@bem-react/classname").ClassNameFormatter;
 export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
     value?: Date | null | undefined;
     defaultValue?: Date | null | undefined;
-    onChange?: CalendarOnChange | undefined;
+    onChange?: DatePickerOnChange | undefined;
     onInputChange?: import("./types").DatePickerOnInputChange | undefined;
     onClose?: (() => void) | undefined;
     onOpen?: (() => void) | undefined;
-    calendarProps?: import("../Calendar").CalendarBaseProps | undefined;
+    calendarProps?: import("../Calendar").CalendarProps | undefined;
     popoverProps?: import("../Popover").PopoverBaseProps | undefined;
     clearText?: string | undefined;
     disableClearButton?: boolean | undefined;
     onError?: import("./types").DatePickerPropOnError | undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
+}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps"> & {
     open?: boolean | undefined;
     defaultOpen?: undefined;
 }, "ref"> | Omit<{
     value?: Date | null | undefined;
     defaultValue?: Date | null | undefined;
-    onChange?: CalendarOnChange | undefined;
+    onChange?: DatePickerOnChange | undefined;
     onInputChange?: import("./types").DatePickerOnInputChange | undefined;
     onClose?: (() => void) | undefined;
     onOpen?: (() => void) | undefined;
-    calendarProps?: import("../Calendar").CalendarBaseProps | undefined;
+    calendarProps?: import("../Calendar").CalendarProps | undefined;
     popoverProps?: import("../Popover").PopoverBaseProps | undefined;
     clearText?: string | undefined;
     disableClearButton?: boolean | undefined;
     onError?: import("./types").DatePickerPropOnError | undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
+}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps"> & {
     open?: undefined;
     defaultOpen?: boolean | undefined;
 }, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/DatePicker/DatePicker.js

@@ -12,7 +12,7 @@ import { Popover } from '../Popover';
 import { DateInput, DatePickerRenderRight } from './components';
 import { isCompleted } from './components/DateInput/utils';
 import { DATE_PICKER_DEFAULT_SIZE } from './constants';
-import { formatDateToString, formatStringToDate, isInExclude, isOutOfRange, matchCalendarSizeToFormElement, } from './utils';
+import { formatDateToString, formatStringToDate, isInExclude, isOutOfRange, getCalendarSizeToFormElement, } from './utils';
 export var cnDatePicker = cn('DatePicker');
 export var DatePicker = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
@@ -41,7 +41,7 @@ export var DatePicker = forwardRef(function (inProps, ref) {
         state: 'value',
     }), 2), value = _d[0], setValue = _d[1];
     /** Соотношение размера календаря к размеру элемента контроля */
-    var calendarSize = matchCalendarSizeToFormElement[size];
+    var calendarSize = getCalendarSizeToFormElement(size);
     /** Вычисление border-radius по размеру компонента */
     var radius = getPaperSizeToFormElement(size);
     var callOnChange = function (value) {

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

@@ -1,8 +1,8 @@
 import type { ComponentPropsWithRef, ChangeEvent } from 'react';
-import type { CalendarBaseProps, CalendarOnChange } from '../Calendar';
+import type { CalendarProps, CalendarOnChange } from '../Calendar';
 import type { InputProps } from '../Input';
 import type { PopoverBaseProps } from '../Popover';
-export type DatePickerOnChange = CalendarOnChange;
+export type DatePickerOnChange = CalendarOnChange<'single'>;
 export type DatePickerOnInputChange = (e: ChangeEvent<HTMLInputElement> | null, value: string) => void;
 export type DatePickerPropOnError = (props: {
     type: 'outOfRange';
@@ -39,7 +39,7 @@ export type DatePickerProps = {
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
     onOpen?: () => void;
     /** Свойства компонента Calendar */
-    calendarProps?: CalendarBaseProps;
+    calendarProps?: CalendarProps;
     /** Свойства компонента Popover */
     popoverProps?: PopoverBaseProps;
     /** Текст для кнопки очистки поля */
@@ -48,5 +48,5 @@ export type DatePickerProps = {
     disableClearButton?: boolean;
     /** Функция обратно вызова, которая сработает если пользователь ввёл дату с ошибкой */
     onError?: DatePickerPropOnError;
-} & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue' | 'onError'> & Pick<CalendarBaseProps, 'minDate' | 'maxDate' | 'exclude' | 'offsetDate'> & Pick<InputProps, 'label' | 'hint' | 'onKeyDown' | 'size' | 'error' | 'required' | 'fullWidth' | 'disabled' | 'renderLeft' | 'renderRight' | 'placeholder' | 'inputProps'> & (DatePickerOpenControlledProps | DatePickerOpenUncontrolledProps);
+} & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue' | 'onError'> & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude' | 'offsetDate'> & Pick<InputProps, 'label' | 'hint' | 'onKeyDown' | 'size' | 'error' | 'required' | 'fullWidth' | 'disableStroke' | 'disabled' | 'renderLeft' | 'renderRight' | 'placeholder' | 'inputProps' | 'hintProps'> & (DatePickerOpenControlledProps | DatePickerOpenUncontrolledProps);
 export {};

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

@@ -0,0 +1,2 @@
+import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
+export declare const getCalendarSizeToFormElement: (size: FormElementSizeVariant) => "s" | "m" | "l";

package/__inner__/esm/components/DatePicker/utils/getCalendarSizeToFormElement/getCalendarSizeToFormElement.js

@@ -0,0 +1,11 @@
+import { getByMap } from '../../../../utils/getByMap';
+var typeMap = {
+    '2xs': 's',
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'l',
+};
+export var getCalendarSizeToFormElement = function (size) {
+    return getByMap(typeMap, size);
+};

package/__inner__/esm/components/DatePicker/utils/getCalendarSizeToFormElement/index.d.ts

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