@alfalab/core-components 27.10.0 → 27.13.0

package/calendar/esm/components/calendar-mobile/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/calendar/esm/components/calendar-mobile/index.js

@@ -0,0 +1,66 @@
+import '../../tslib.es6-e7fceaf2.js';
+import 'react';
+import 'classnames';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
+import 'date-fns/endOfDay';
+import '@alfalab/hooks';
+import '../header/Component.js';
+import '../../../../button/esm';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isSameDay';
+import 'date-fns/isToday';
+import 'date-fns/isWithinInterval';
+import 'react-transition-group';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/startOfYear';
+import 'date-fns/endOfYear';
+import 'date-fns/isBefore';
+import 'date-fns/isAfter';
+import 'date-fns/min';
+import 'date-fns/max';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/endOfWeek';
+import 'date-fns/startOfWeek';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import 'date-fns/format';
+import 'date-fns/parse';
+import '../../utils.js';
+import '../days-table/Component.js';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import '../select-button/Component.js';
+import '../months-table/Component.js';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import '../years-table/Component.js';
+import '../../../../icon-button/esm';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/addYears';
+import 'date-fns/endOfMonth';
+import 'date-fns/endOfQuarter';
+import 'date-fns/getQuarter';
+import 'date-fns/getYear';
+import 'date-fns/isYesterday';
+import 'date-fns/startOfQuarter';
+import '../period-slider/utils.js';
+import '../period-slider/Component.js';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import 'react-merge-refs';
+import '../../useCalendar.js';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '../month-year-header/Component.js';
+import '../../Component.js';
+import 'date-fns/differenceInDays';
+import 'react-virtuoso';
+import '../../../../modal/esm/mobile';
+export { CalendarMobile } from './Component.js';

package/calendar/esm/components/days-table/Component.d.ts

@@ -1,4 +1,6 @@
-import { FC, RefCallback } from 'react';
+/// <reference types="react" />
+import React from 'react';
+import { FC, RefCallback } from "react";
 import { Day } from "../../typings";
 type DaysTableProps = {
     /**
@@ -29,8 +31,17 @@ type DaysTableProps = {
      * Доп. пропсы для переданного дня
      */
     getDayProps: (day: Day) => Record<string, unknown> & {
-        ref: RefCallback<HTMLButtonElement>;
+        ref: RefCallback<HTMLTableDataCellElement>;
+        onClick: (e: React.MouseEvent<HTMLTableDataCellElement>) => void;
     };
+    /**
+     * Нужно ли рендерить шапку
+     */
+    hasHeader?: boolean;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
 };
 declare const DaysTable: FC<DaysTableProps>;
 export { DaysTableProps, DaysTable };

package/calendar/esm/components/days-table/Component.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-928f8251.js';
+import { _ as __assign } from '../../tslib.es6-e7fceaf2.js';
 import React, { useRef, useCallback } from 'react';
 import cn from 'classnames';
 import 'date-fns/startOfDay';
@@ -29,13 +29,14 @@ import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import 'date-fns/format';
 import 'date-fns/parse';
-import { getSelectionRange, WEEKDAYS } from '../../utils.js';
+import { getSelectionRange, WEEKDAYS, russianWeekDay } from '../../utils.js';
 
-var styles = {"daysTable":"calendar__daysTable_1dttu","dayName":"calendar__dayName_1dttu","day":"calendar__day_1dttu","highlighted":"calendar__highlighted_1dttu","range":"calendar__range_1dttu","disabled":"calendar__disabled_1dttu","today":"calendar__today_1dttu","rangeComplete":"calendar__rangeComplete_1dttu","selected":"calendar__selected_1dttu","dayWrapper":"calendar__dayWrapper_1dttu","rangeEnd":"calendar__rangeEnd_1dttu","rangeStart":"calendar__rangeStart_1dttu","transitLeft":"calendar__transitLeft_1dttu","transitRight":"calendar__transitRight_1dttu","left":"calendar__left_1dttu","daysEnter":"calendar__daysEnter_1dttu","daysEnterActive":"calendar__daysEnterActive_1dttu","daysExit":"calendar__daysExit_1dttu","daysExitActive":"calendar__daysExitActive_1dttu","right":"calendar__right_1dttu","dot":"calendar__dot_1dttu"};
+var styles = {"daysTable":"calendar__daysTable_k67qg","responsive":"calendar__responsive_k67qg","dayName":"calendar__dayName_k67qg","day":"calendar__day_k67qg","highlighted":"calendar__highlighted_k67qg","range":"calendar__range_k67qg","disabled":"calendar__disabled_k67qg","holiday":"calendar__holiday_k67qg","today":"calendar__today_k67qg","rangeComplete":"calendar__rangeComplete_k67qg","selected":"calendar__selected_k67qg","dayWrapper":"calendar__dayWrapper_k67qg","cursorPointer":"calendar__cursorPointer_k67qg","rangeEnd":"calendar__rangeEnd_k67qg","rangeStart":"calendar__rangeStart_k67qg","transitLeft":"calendar__transitLeft_k67qg","transitRight":"calendar__transitRight_k67qg","sharpTransitLeft":"calendar__sharpTransitLeft_k67qg","sharpTransitRight":"calendar__sharpTransitRight_k67qg","daysEnter":"calendar__daysEnter_k67qg","left":"calendar__left_k67qg","daysEnterActive":"calendar__daysEnterActive_k67qg","daysExit":"calendar__daysExit_k67qg","daysExitActive":"calendar__daysExitActive_k67qg","right":"calendar__right_k67qg","dot":"calendar__dot_k67qg"};
 require('./index.css');
 
 var DaysTable = function (_a) {
-    var _b = _a.weeks, weeks = _b === void 0 ? [] : _b, _c = _a.activeMonth, activeMonth = _c === void 0 ? new Date() : _c, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _d = _a.rangeComplete, rangeComplete = _d === void 0 ? selectedFrom && selectedTo : _d, getDayProps = _a.getDayProps;
+    var _b;
+    var _c = _a.weeks, weeks = _c === void 0 ? [] : _c, _d = _a.activeMonth, activeMonth = _d === void 0 ? new Date() : _d, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _e = _a.rangeComplete, rangeComplete = _e === void 0 ? selectedFrom && selectedTo : _e, getDayProps = _a.getDayProps, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive;
     var activeMonthRef = useRef(activeMonth);
     activeMonthRef.current = activeMonth;
     var prevActiveMonth = usePrevious(activeMonth);
@@ -53,42 +54,67 @@ var DaysTable = function (_a) {
             (selectedTo && isSameDay(day.date, selectedTo));
         var dayHighlighted = highlighted && isEqual(day.date, highlighted);
         var inRange = selection && isWithinInterval(day.date, selection);
-        var firstDay = day.date.getDate() === 1;
-        var lastDay = isLastDayOfMonth(day.date);
-        var transitLeft = firstDay && inRange && selection && day.date > selection.start;
-        var transitRight = lastDay && inRange && selection && day.date < selection.end;
+        var firstDayOfMonth = day.date.getDate() === 1;
+        var lastDayOfMonth = isLastDayOfMonth(day.date);
+        var firstDayOfWeek = russianWeekDay(day.date) === 0;
+        var lastDayOfWeek = russianWeekDay(day.date) === 6;
+        var transitLeft = firstDayOfMonth && inRange && selection && day.date > selection.start;
+        var transitRight = lastDayOfMonth && inRange && selection && day.date < selection.end;
         var rangeStart = selection && isSameDay(day.date, selection.start);
         var rangeEnd = selection && isSameDay(day.date, selection.end);
+        var sharpTransitLeft = firstDayOfWeek &&
+            firstDayOfMonth &&
+            inRange &&
+            selection &&
+            (isSameDay(day.date, selection.start) || isSameDay(day.date, selection.end));
+        var sharpTransitRight = lastDayOfWeek &&
+            lastDayOfMonth &&
+            inRange &&
+            selection &&
+            (isSameDay(day.date, selection.start) || isSameDay(day.date, selection.end));
         var dayProps = getDayProps(day);
-        return (React.createElement("td", { key: day.date.getTime(), className: cn(styles.dayWrapper, (_a = {},
+        var onClick = dayProps.onClick;
+        var handleDayClick = function (e) {
+            if (!day.disabled)
+                onClick(e);
+        };
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+        React.createElement("td", __assign({}, dayProps, { key: day.date.getTime(), className: cn(styles.dayWrapper, (_a = {},
                 _a[styles.range] = inRange,
                 _a[styles.rangeComplete] = inRange && rangeComplete,
                 _a[styles.transitLeft] = transitLeft,
                 _a[styles.transitRight] = transitRight,
+                _a[styles.sharpTransitLeft] = sharpTransitLeft,
+                _a[styles.sharpTransitRight] = sharpTransitRight,
                 _a[styles.rangeStart] = rangeStart,
                 _a[styles.rangeEnd] = rangeEnd,
-                _a)) },
-            React.createElement(Button, __assign({}, dayProps, { ref: function (node) {
-                    /**
-                     * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
-                     * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
-                     */
-                    if (startOfMonth(day.date).getTime() === activeMonthRef.current.getTime()) {
-                        dayProps.ref(node);
-                    }
-                }, type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn(styles.day, (_b = {},
+                _a[styles.cursorPointer] = !day.disabled,
+                _a)), align: 'center', ref: function (node) {
+                /**
+                 * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
+                 * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
+                 */
+                if (startOfMonth(day.date).getTime() === activeMonthRef.current.getTime()) {
+                    dayProps.ref(node);
+                }
+            }, onClick: handleDayClick }),
+            React.createElement(Button, { type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn(styles.day, (_b = {},
                     _b[styles.selected] = daySelected,
                     _b[styles.today] = isToday(day.date),
                     _b[styles.disabled] = day.disabled,
+                    _b[styles.holiday] = !day.disabled && day.holiday,
                     _b[styles.highlighted] = dayHighlighted,
-                    _b)) }),
+                    _b)) },
                 day.event && React.createElement("span", { className: styles.dot }),
                 day.date.getDate())));
     };
     var renderWeek = function (week, weekIdx) { return (React.createElement("tr", { key: weekIdx }, week.map(renderDay))); };
-    return (React.createElement("table", { className: cn(styles.daysTable, direction && styles[direction]) },
-        React.createElement("thead", null,
-            React.createElement("tr", null, renderHeader())),
+    return (React.createElement("table", { className: cn(styles.daysTable, direction && styles[direction], (_b = {},
+            _b[styles.responsive] = responsive,
+            _b)) },
+        hasHeader && (React.createElement("thead", null,
+            React.createElement("tr", null, renderHeader()))),
         React.createElement(TransitionGroup, { component: null },
             React.createElement(CSSTransition, { key: activeMonth.getTime(), timeout: 300, classNames: {
                     enter: styles.daysEnter,

package/calendar/esm/components/days-table/index.css

@@ -1,4 +1,4 @@
-/* hash: 1woyj */
+/* hash: 1s87d */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -727,8 +727,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -748,6 +758,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);
@@ -766,18 +779,21 @@
     --calendar-marker-background: var(--color-light-graphic-primary);
     --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
 }
-.calendar__daysTable_1dttu {
+.calendar__daysTable_k67qg {
     border-collapse: separate;
     border-spacing: 0;
     position: relative
 }
-.calendar__daysTable_1dttu th {
+.calendar__daysTable_k67qg.calendar__responsive_k67qg {
+        width: 100%;
+    }
+.calendar__daysTable_k67qg th {
         padding: 0;
     }
-.calendar__daysTable_1dttu td {
+.calendar__daysTable_k67qg td {
         padding: var(--gap-2xs) 0 0;
     }
-.calendar__dayName_1dttu {
+.calendar__dayName_k67qg {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -786,15 +802,17 @@
     color: var(--color-light-text-secondary)
 }
 @media (max-width: 374px) {
-.calendar__dayName_1dttu {
+.calendar__dayName_k67qg {
         height: 36px
 }
     }
-.calendar__day_1dttu {
+.calendar__day_k67qg {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
 
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
     position: relative;
     width: var(--calendar-day-size);
     height: var(--calendar-day-size);
@@ -808,46 +826,52 @@
     z-index: 1
 }
 @media (max-width: 374px) {
-.calendar__day_1dttu {
+.calendar__day_k67qg {
         width: 36px;
         height: 36px
 }
     }
-.calendar__day_1dttu.calendar__highlighted_1dttu,
-    .calendar__day_1dttu.calendar__range_1dttu.calendar__highlighted_1dttu:not(.calendar__disabled_1dttu) {
+.calendar__day_k67qg.calendar__highlighted_k67qg,
+    .calendar__day_k67qg.calendar__range_k67qg.calendar__highlighted_k67qg:not(.calendar__disabled_k67qg) {
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
     }
-.calendar__day_1dttu.calendar__disabled_1dttu {
+.calendar__day_k67qg.calendar__holiday_k67qg {
+        color: var(--calendar-holiday-color);
+    }
+.calendar__day_k67qg.calendar__disabled_k67qg {
         pointer-events: none;
         color: var(--calendar-disabled-color);
 
         background: var(--calendar-disabled-background);
         cursor: default;
     }
-.calendar__day_1dttu.calendar__today_1dttu {
+.calendar__day_k67qg.calendar__today_k67qg {
         font-weight: bold;
         color: var(--calendar-today-color);
     }
-.calendar__day_1dttu.calendar__rangeComplete_1dttu {
+.calendar__day_k67qg.calendar__rangeComplete_k67qg {
         background: var(--calendar-range-complete-background);
     }
-.calendar__day_1dttu.calendar__selected_1dttu,
-    .calendar__day_1dttu.calendar__disabled_1dttu.calendar__selected_1dttu {
+.calendar__day_k67qg.calendar__selected_k67qg,
+    .calendar__day_k67qg.calendar__disabled_k67qg.calendar__selected_k67qg {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
     }
-.calendar__day_1dttu.calendar__selected_1dttu:hover {
-            background: var(--calendar-selected-hover-background);
+@media (hover) {
+            .calendar__day_k67qg.calendar__selected_k67qg:hover {
+                background: var(--calendar-selected-hover-background);
+            }
         }
-.calendar__day_1dttu:focus {
+.calendar__day_k67qg:focus {
         z-index: 1;
     }
 /* RANGE */
-.calendar__dayWrapper_1dttu {
+.calendar__dayWrapper_k67qg {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     position: relative
 }
-.calendar__dayWrapper_1dttu:before {
+.calendar__dayWrapper_k67qg:before {
         content: '';
         display: block;
         position: absolute;
@@ -856,34 +880,34 @@
         width: 100%;
         height: var(--calendar-day-size);
     }
-.calendar__range_1dttu .calendar__day_1dttu:not(.calendar__selected_1dttu):not(.calendar__disabled_1dttu):not(.calendar__today_1dttu) {
+.calendar__dayWrapper_k67qg:focus {
+        outline: none;
+    }
+.calendar__dayWrapper_k67qg.calendar__cursorPointer_k67qg {
+        cursor: pointer;
+    }
+.calendar__range_k67qg .calendar__day_k67qg:not(.calendar__selected_k67qg):not(.calendar__disabled_k67qg):not(.calendar__today_k67qg):not(.calendar__holiday_k67qg) {
         color: var(--calendar-range-color);
     }
-.calendar__range_1dttu:before {
+.calendar__range_k67qg:before {
         background: var(--calendar-range-background);
     }
-.calendar__rangeEnd_1dttu:before {
-        border-bottom-right-radius: 50%;
-        border-top-right-radius: 50%;
-        width: var(--calendar-day-size);
-    }
-.calendar__rangeEnd_1dttu:after {
-        opacity: 0;
+.calendar__rangeEnd_k67qg:before {
+        width: calc(50% + 20px);
+        border-top-right-radius: var(--calendar-day-border-radius);
+        border-bottom-right-radius: var(--calendar-day-border-radius);
     }
-.calendar__rangeStart_1dttu:before {
+.calendar__rangeStart_k67qg:before {
         left: auto;
         right: 0;
-        border-bottom-left-radius: 50%;
-        border-top-left-radius: 50%;
-        width: var(--calendar-day-size);
+        width: calc(50% + 20px);
+        border-top-left-radius: var(--calendar-day-border-radius);
+        border-bottom-left-radius: var(--calendar-day-border-radius);
     }
-.calendar__rangeStart_1dttu:after {
-        opacity: 0;
-    }
-.calendar__rangeComplete_1dttu:before {
+.calendar__rangeComplete_k67qg:before {
         background: var(--calendar-range-complete-background);
     }
-.calendar__transitLeft_1dttu:after, .calendar__transitRight_1dttu:after {
+.calendar__transitLeft_k67qg:after, .calendar__transitRight_k67qg:after {
         content: '';
         position: absolute;
         display: block;
@@ -892,7 +916,7 @@
         bottom: 0;
         pointer-events: none;
     }
-.calendar__transitLeft_1dttu:after {
+.calendar__transitLeft_k67qg:after {
         right: 100%;
         background: linear-gradient(
             270deg,
@@ -900,13 +924,13 @@
             var(--color-light-specialbg-nulled) 100%
         );
     }
-.calendar__transitLeft_1dttu:first-child:before {
+.calendar__transitLeft_k67qg:first-child:before {
             opacity: 0;
         }
-.calendar__transitLeft_1dttu:first-child:after {
+.calendar__transitLeft_k67qg:first-child:after {
             right: 0;
         }
-.calendar__transitRight_1dttu:after {
+.calendar__transitRight_k67qg:after {
         left: 100%;
         background: linear-gradient(
             270deg,
@@ -914,20 +938,32 @@
             var(--calendar-range-background) 100%
         );
     }
-.calendar__transitRight_1dttu:last-child:before {
+.calendar__transitRight_k67qg:last-child:before {
             opacity: 0;
         }
-.calendar__transitRight_1dttu:last-child:after {
+.calendar__transitRight_k67qg:last-child:after {
             left: 0;
         }
-.calendar__rangeComplete_1dttu.calendar__transitLeft_1dttu:after {
+.calendar__sharpTransitLeft_k67qg:first-child:before {
+            opacity: 1;
+        }
+.calendar__sharpTransitLeft_k67qg:first-child:after {
+            opacity: 0;
+        }
+.calendar__sharpTransitRight_k67qg:last-child:before {
+            opacity: 1;
+        }
+.calendar__sharpTransitRight_k67qg:last-child:after {
+            opacity: 0;
+        }
+.calendar__rangeComplete_k67qg.calendar__transitLeft_k67qg:after {
         background: linear-gradient(
             270deg,
             var(--calendar-range-complete-background) 0%,
             var(--color-light-specialbg-nulled) 100%
         );
     }
-.calendar__rangeComplete_1dttu.calendar__transitRight_1dttu:after {
+.calendar__rangeComplete_k67qg.calendar__transitRight_k67qg:after {
         background: linear-gradient(
             270deg,
             var(--color-light-specialbg-nulled) 0%,
@@ -935,31 +971,34 @@
         );
     }
 /* SLIDE ANIMATION */
-.calendar__left_1dttu .calendar__daysEnter_1dttu {
-        transform: translateX(var(--calendar-day-size));
+.calendar__daysEnter_k67qg .calendar__dayWrapper_k67qg {
+    width: 100px;
+}
+.calendar__left_k67qg .calendar__daysEnter_k67qg {
+        transform: translateX(50px);
     }
-.calendar__left_1dttu .calendar__daysEnterActive_1dttu {
-        transform: translateX(0%);
+.calendar__left_k67qg .calendar__daysEnterActive_k67qg {
+        transform: translateX(0);
     }
-.calendar__left_1dttu .calendar__daysExit_1dttu {
-        transform: translateX(0%);
+.calendar__left_k67qg .calendar__daysExit_k67qg {
+        transform: translateX(0);
     }
-.calendar__left_1dttu .calendar__daysExitActive_1dttu {
-        transform: translateX(calc(-1 * var(--calendar-day-size)));
+.calendar__left_k67qg .calendar__daysExitActive_k67qg {
+        transform: translateX(-50px);
     }
-.calendar__right_1dttu .calendar__daysEnter_1dttu {
-        transform: translateX(calc(-1 * var(--calendar-day-size)));
+.calendar__right_k67qg .calendar__daysEnter_k67qg {
+        transform: translateX(-50px);
     }
-.calendar__right_1dttu .calendar__daysEnterActive_1dttu {
-        transform: translateX(0%);
+.calendar__right_k67qg .calendar__daysEnterActive_k67qg {
+        transform: translateX(0);
     }
-.calendar__right_1dttu .calendar__daysExit_1dttu {
-        transform: translateX(0%);
+.calendar__right_k67qg .calendar__daysExit_k67qg {
+        transform: translateX(0);
     }
-.calendar__right_1dttu .calendar__daysExitActive_1dttu {
-        transform: translateX(var(--calendar-day-size));
+.calendar__right_k67qg .calendar__daysExitActive_k67qg {
+        transform: translateX(50px);
     }
-.calendar__dot_1dttu {
+.calendar__dot_k67qg {
     display: block;
     position: absolute;
     bottom: 4px;
@@ -970,25 +1009,25 @@
     border-radius: var(--border-radius-circle);
     background: var(--calendar-marker-background);
 }
-.calendar__selected_1dttu .calendar__dot_1dttu {
+.calendar__selected_k67qg .calendar__dot_k67qg {
     background: var(--calendar-marker-selected-background);
 }
-.calendar__daysEnter_1dttu {
+.calendar__daysEnter_k67qg {
     opacity: 0;
     position: absolute;
     left: 0;
 }
-.calendar__daysEnterActive_1dttu {
+.calendar__daysEnterActive_k67qg {
     opacity: 1;
 }
-.calendar__daysExit_1dttu {
+.calendar__daysExit_k67qg {
     pointer-events: none;
     opacity: 1;
 }
-.calendar__daysExitActive_1dttu {
+.calendar__daysExitActive_k67qg {
     opacity: 0;
 }
-.calendar__daysEnterActive_1dttu,
-.calendar__daysExitActive_1dttu {
-    transition: opacity 300ms, transform 300ms;
+.calendar__daysEnterActive_k67qg,
+.calendar__daysExitActive_k67qg {
+    transition: opacity 200ms, transform 300ms;
 }

package/calendar/esm/components/days-table/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-928f8251.js';
+import '../../tslib.es6-e7fceaf2.js';
 import 'react';
 import 'classnames';
 import 'date-fns/startOfDay';

package/calendar/esm/components/header/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"header":"calendar__header_uvt29","withShadow":"calendar__withShadow_uvt29"};
+var styles = {"header":"calendar__header_zlpek","withShadow":"calendar__withShadow_zlpek"};
 require('./index.css');
 
 var Header = function (_a) {

package/calendar/esm/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 3k7js */
+/* hash: xwve2 */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -727,8 +727,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -748,6 +758,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);
@@ -766,7 +779,7 @@
     --calendar-marker-background: var(--color-light-graphic-primary);
     --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
 }
-.calendar__header_uvt29 {
+.calendar__header_zlpek {
     width: 100%;
     box-sizing: border-box;
     padding: var(--gap-m) 0 var(--gap-s);
@@ -774,6 +787,6 @@
     display: flex;
     justify-content: center;
 }
-.calendar__withShadow_uvt29 {
+.calendar__withShadow_zlpek {
     box-shadow: var(--shadow-s);
 }

package/calendar/esm/components/month-year-header/Component.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-928f8251.js';
+import '../../tslib.es6-e7fceaf2.js';
 import React from 'react';
 import cn from 'classnames';
 import 'date-fns/startOfDay';
@@ -27,7 +27,7 @@ import { monthName } from '../../utils.js';
 import { SelectButton } from '../select-button/Component.js';
 import { ChevronDownCompactSIcon } from '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 
-var styles = {"component":"calendar__component_1sogb","button":"calendar__button_1sogb","month":"calendar__month_1sogb","year":"calendar__year_1sogb","buttonContent":"calendar__buttonContent_1sogb","upDownIcon":"calendar__upDownIcon_1sogb"};
+var styles = {"component":"calendar__component_hmq6w","button":"calendar__button_hmq6w","month":"calendar__month_hmq6w","year":"calendar__year_hmq6w","buttonContent":"calendar__buttonContent_hmq6w","upDownIcon":"calendar__upDownIcon_hmq6w"};
 require('./index.css');
 
 var MonthYearHeader = function (_a) {