@ozen-ui/kit 0.46.0 → 0.47.0

package/Calendar/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/Calendar/index.js",
+	"module": "../__inner__/esm/components/Calendar/index.js",
+	"types": "../__inner__/esm/components/Calendar/index.d.ts"
+}

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

@@ -0,0 +1,43 @@
+/* stylelint-disable */
+.Calendar {
+  --calendar-grid-gap: var(--spacing-4xs);
+  --calendar-grid-margin: var(--spacing-2xs);
+  display: inline-flex;
+  flex-direction: column;
+}
+.Calendar_size_s {
+      --calendar-grid-size: 236px;
+      --calendar-switcher-height: var(--control-height-s);
+      --calendar-switcher-margin: 0 var(--spacing-xs);
+      --calendar-switcher-padding: 0 var(--control-padding-2xs);
+
+      font: var(--typography-text-s-font);
+
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+
+      text-transform: var(--typography-text-s-text_transform, none);
+    }
+.Calendar_size_m {
+      --calendar-grid-size: 292px;
+      --calendar-switcher-height: var(--control-height-m);
+      --calendar-switcher-margin: 0 var(--spacing-xs);
+      --calendar-switcher-padding: 0 var(--control-padding-xs);
+
+      font: var(--typography-text-m-font);
+
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+
+      text-transform: var(--typography-text-m-text_transform, none);
+    }
+.Calendar_size_l {
+      --calendar-grid-size: 348px;
+      --calendar-switcher-height: var(--control-height-l);
+      --calendar-switcher-margin: 0 var(--spacing-xs);
+      --calendar-switcher-padding: 0 var(--control-padding-s);
+
+      font: var(--typography-text-l-font);
+
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+
+      text-transform: var(--typography-text-l-text_transform, none);
+    }

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

@@ -0,0 +1,4 @@
+import './Calendar.css';
+import type { CalendarBaseProps } from './types';
+export declare const cnCalendar: import("@bem-react/classname").ClassNameFormatter;
+export declare const Calendar: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CalendarBaseProps, "div">;

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

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = exports.cnCalendar = void 0;
+var tslib_1 = require("tslib");
+require("./Calendar.css");
+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 classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var Divider_1 = require("../Divider");
+var CalendarContext_1 = require("./CalendarContext");
+var components_1 = require("./components");
+var constants_1 = require("./constants");
+exports.cnCalendar = (0, classname_1.cn)('Calendar');
+exports.Calendar = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(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, _c = props.as, Tag = _c === void 0 ? constants_1.CALENDAR_DEFAULT_AS : _c, 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, calendarSwitcherProps = props.calendarSwitcherProps, other = tslib_1.__rest(props, ["size", "startDay", "as", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "calendarSwitcherProps"]);
+    var _d = tslib_1.__read((0, react_1.useState)('days'), 2), step = _d[0], setStep = _d[1];
+    var _e = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'Calendar',
+        state: 'value',
+    }), 2), valueState = _e[0], setValueState = _e[1];
+    var _f = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: offsetDateProp,
+        defaultValue: defaultOffsetDate,
+        name: 'Calendar',
+        state: 'offsetDate',
+    }), 2), offsetDateState = _f[0], setOffsetDateState = _f[1];
+    var onChange = function (data) {
+        var value = data[0];
+        if (value) {
+            setValueState(value);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
+        }
+    };
+    var onOffsetDateChange = function (date) {
+        setOffsetDateState(date);
+        onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
+    };
+    (0, react_1.useEffect)(function () {
+        if (valueState)
+            onOffsetDateChange(valueState);
+    }, [valueState]);
+    var config = {
+        calendar: {
+            startDay: startDay,
+        },
+        locale: {
+            locale: locale,
+            weekday: 'short',
+            day: 'numeric',
+        },
+        exclude: exclude,
+        onDatesChange: onChange,
+        years: { numberOfYears: 15 },
+        onOffsetChange: onOffsetDateChange,
+        offsetDate: offsetDateState || new Date(),
+        dates: { minDate: minDate, maxDate: maxDate },
+        selectedDates: valueState ? [valueState] : [],
+    };
+    // Управление представлениями календаря
+    var goStep = function (step) {
+        setStep(step);
+    };
+    return (react_1.default.createElement(datepicker_1.DatePickerProvider, { config: config },
+        react_1.default.createElement(CalendarContext_1.CalendarContext.Provider, { value: {
+                size: size,
+                step: step,
+                goStep: goStep,
+                minDate: minDate,
+                maxDate: maxDate,
+                onMonthClick: onMonthClick,
+                onDayClick: onDayClick,
+                onYearClick: onYearClick,
+                onOffsetChange: setOffsetDateState,
+            } },
+            react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnCalendar)({ size: size }, [className]) }, other, { ref: ref }),
+                react_1.default.createElement(components_1.CalendarSwitcher, tslib_1.__assign({}, calendarSwitcherProps)),
+                react_1.default.createElement(Divider_1.Divider, { color: "secondary" }),
+                react_1.default.createElement(components_1.CalendarGrid, null),
+                react_1.default.createElement(components_1.CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
+});
+exports.Calendar.displayName = 'Calendar';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { CalendarStepVariant, CalendarSizeVariant, CalendarBaseProps } from './types';
+export interface CalendarContextValue {
+    size?: CalendarSizeVariant;
+    step: CalendarStepVariant;
+    goStep?: (step: CalendarStepVariant) => void;
+    onMonthClick?: CalendarBaseProps['onMonthClick'];
+    onDayClick?: CalendarBaseProps['onDayClick'];
+    onYearClick?: CalendarBaseProps['onYearClick'];
+    minDate?: Date;
+    maxDate?: Date;
+    onOffsetChange?(d: Date): void;
+}
+export declare const CalendarContext: React.Context<CalendarContextValue>;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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',
+});

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

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

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

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

package/__inner__/cjs/components/Calendar/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[0] },
+        }))));
+};
+exports.CalendarAdditionalControls = CalendarAdditionalControls;

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

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

package/__inner__/cjs/components/Calendar/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/CalendarGrid/CalendarGrid.css

@@ -0,0 +1,44 @@
+.CalendarGrid {
+  display: grid;
+  justify-content: start;
+  gap: var(--calendar-grid-gap);
+  block-size: var(--calendar-grid-size);
+  inline-size: var(--calendar-grid-size);
+  margin: var(--calendar-grid-margin);
+}
+
+  .CalendarGrid > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+.CalendarDays {
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.CalendarDays > * {
+    inline-size: calc(
+      (var(--calendar-grid-size) - var(--calendar-grid-gap) * 6) / 7
+    );
+  }
+
+.CalendarMonths {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.CalendarMonths > * {
+    block-size: calc(
+      (var(--calendar-grid-size) - var(--calendar-grid-gap) * 3) / 4
+    );
+  }
+
+.CalendarYears {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.CalendarYears > * {
+    block-size: calc(
+      (var(--calendar-grid-size) - var(--calendar-grid-gap) * 4) / 5
+    );
+  }

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

@@ -0,0 +1,7 @@
+import './CalendarGrid.css';
+import React from 'react';
+export declare const cnCalendarGrid: import("@bem-react/classname").ClassNameFormatter;
+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;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarGrid = exports.cnCalendarYears = exports.cnCalendarMoths = exports.cnCalendarDays = exports.cnCalendarGrid = void 0;
+var tslib_1 = require("tslib");
+require("./CalendarGrid.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var classnames_1 = require("@bem-react/classnames");
+var datepicker_1 = require("@rehookify/datepicker");
+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");
+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, year = _e.year;
+    var handleClickOnDay = function (e, date) {
+        onDayClick === null || onDayClick === void 0 ? void 0 : onDayClick(e, date);
+    };
+    var handleClickOnMonth = function (e, date) {
+        goStep === null || goStep === void 0 ? void 0 : goStep('days');
+        onMonthClick === null || onMonthClick === void 0 ? void 0 : onMonthClick(e, date);
+    };
+    var handleClickOnYear = function (e, date) {
+        goStep === null || goStep === void 0 ? void 0 : goStep('months');
+        onYearClick === null || onYearClick === void 0 ? void 0 : onYearClick(e, date);
+    };
+    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, {
+                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 && dpMonth.active) ||
+                (dpMonth.active && !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: String(dpYear.year) === year, size: size }, yearButton(dpYear, {
+            onClick: handleClickOnYear,
+        }), { tabIndex: dpYear.disabled ? -1 : 0 }), dpYear.year)); })))));
+};
+exports.CalendarGrid = CalendarGrid;

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

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

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

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

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

@@ -0,0 +1,2 @@
+export declare const isBeforeMinMonth: (month: Date, minDate: Date | undefined) => boolean;
+export declare const isAfterMaxMonth: (month: Date, maxDate: Date | undefined) => boolean;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAfterMaxMonth = exports.isBeforeMinMonth = void 0;
+var isBeforeMinMonth = function (month, minDate) {
+    var _a;
+    if (!minDate) {
+        return false;
+    }
+    return (month.getTime() <
+        ((_a = new Date(minDate === null || minDate === void 0 ? void 0 : minDate.getFullYear(), minDate === null || minDate === void 0 ? void 0 : minDate.getMonth(), 1)) === null || _a === void 0 ? void 0 : _a.getTime()));
+};
+exports.isBeforeMinMonth = isBeforeMinMonth;
+var isAfterMaxMonth = function (month, maxDate) {
+    var _a;
+    if (!maxDate) {
+        return false;
+    }
+    return (month.getTime() >
+        ((_a = new Date(maxDate === null || maxDate === void 0 ? void 0 : maxDate.getFullYear(), maxDate === null || maxDate === void 0 ? void 0 : maxDate.getMonth(), 1)) === null || _a === void 0 ? void 0 : _a.getTime()));
+};
+exports.isAfterMaxMonth = isAfterMaxMonth;

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

@@ -0,0 +1,13 @@
+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>>;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarItem = exports.cnCalendarItem = 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');
+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));
+});
+exports.CalendarItem.displayName = 'CalendarItem';

package/__inner__/cjs/components/Calendar/components/CalendarItem/CalendatItem.css

@@ -0,0 +1,55 @@
+/* stylelint-disable */
+.CalendarItem {
+  border: none;
+  color: var(--color-content-primary);
+  background-color: inherit;
+  cursor: pointer;
+  transition:
+    background-color var(--transition-default),
+    border-color var(--transition-default),
+    box-shadow var(--transition-default),
+    opacity var(--transition-default);
+}
+.CalendarItem_current {
+    color: var(--color-content-action);
+  }
+.CalendarItem_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 {
+      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 {
+      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) {
+    background-color: var(--color-background-main-hover);
+  }
+.CalendarItem:active:not(.CalendarItem_selected) {
+    background-color: var(--color-background-main-pressed);
+  }
+.CalendarItem_selected {
+    color: var(--color-content-action-on);
+    background-color: var(--color-background-action);
+  }
+.CalendarItem_disabled {
+    pointer-events: none;
+    background-color: inherit;
+    color: var(--color-content-tertiary);
+  }
+.CalendarItem:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+.CalendarItem:focus {
+    outline: 0;
+    box-shadow: var(--shadow-outline-focused);
+  }

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

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

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

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

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

@@ -0,0 +1,25 @@
+.CalendarSwitcher {
+  block-size: var(--calendar-switcher-height);
+  margin: var(--calendar-switcher-margin);
+  padding: var(--calendar-switcher-padding);
+
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+
+  .CalendarSwitcher-StartActions,
+  .CalendarSwitcher-EndActions {
+    display: flex;
+    align-items: center;
+  }
+
+  .CalendarSwitcher-StartActions {
+    gap: var(--spacing-2xs);
+  }
+
+  .CalendarSwitcher-EndActions {
+    gap: var(--spacing-m);
+  }

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

@@ -0,0 +1,10 @@
+import './CalendarSwitcher.css';
+import type { ComponentPropsWithRef, ComponentRef } 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];
+} & 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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarSwitcher = exports.cnCalendarSwitcher = void 0;
+var tslib_1 = require("tslib");
+require("./CalendarSwitcher.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var datepicker_1 = require("@rehookify/datepicker");
+var capitalizeFirstLetter_1 = require("../../../../utils/capitalizeFirstLetter");
+var classname_1 = require("../../../../utils/classname");
+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");
+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 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];
+    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') },
+                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 })))))),
+        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)),
+            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({ years: 1 }))),
+                react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ variant: "function", type: "button", color: "primary", icon: icons_1.ChevronRightIcon, size: size, "aria-label": NEXT, title: NEXT }, addOffset({ years: 1 })))))),
+        step === 'years' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: (0, exports.cnCalendarSwitcher)('StartActions') },
+                react_1.default.createElement(Typography_1.Typography, tslib_1.__assign({ color: "primary" }, (size && { variant: "text-".concat(size) })), (_b = years === null || years === void 0 ? void 0 : years[0]) === null || _b === void 0 ? void 0 :
+                    _b.year,
+                    " - ", (_c = years === null || years === void 0 ? void 0 : years[years.length - 1]) === null || _c === void 0 ? void 0 :
+                    _c.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 }, previousYearsButton())),
+                react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ variant: "function", type: "button", color: "primary", icon: icons_1.ChevronRightIcon, size: size, "aria-label": NEXT, title: NEXT }, nextYearsButton())))))));
+});
+exports.CalendarSwitcher.displayName = 'CalendarSwitcher';

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { CalendarStepVariant } from '../../index';
+export declare const getPeriodSwitchAriaLabel: (step: CalendarStepVariant) => string[];

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPeriodSwitchAriaLabel = void 0;
+var getPeriodSwitchAriaLabel = function (step) {
+    if (step === 'days') {
+        return ['Previous month', 'Next month'];
+    }
+    if (step === 'months') {
+        return ['Previous year', 'Next year'];
+    }
+    return ['Previous period', 'Next period'];
+};
+exports.getPeriodSwitchAriaLabel = getPeriodSwitchAriaLabel;

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

@@ -0,0 +1,4 @@
+export * from './CalendarItem';
+export * from './CalendarSwitcher';
+export * from './CalendarGrid';
+export * from './CalendarAdditionalControls';

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

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

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

@@ -0,0 +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";

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

@@ -0,0 +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_START_DAY = 1;
+exports.CALENDAR_ITEM_DEFAULT_TAG = 'button';
+exports.CALENDAR_DEFAULT_SIZE = 'm';

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

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

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

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