@alfalab/core-components 23.13.0 → 25.1.0

package/calendar/esm/Component.js

@@ -1,27 +1,71 @@
-import { _ as __assign } from './tslib.es6-b934f8ee.js';
+import { _ as __assign } from './tslib.es6-6caa176b.js';
 import React, { forwardRef, useState, useMemo, useCallback } from 'react';
 import cn from 'classnames';
-import { startOfMonth, startOfDay, endOfDay } from 'date-fns';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import endOfDay from 'date-fns/endOfDay';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 import { Header } from './components/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 { limitDate } from './utils.js';
 import { DaysTable } from './components/days-table/Component.js';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
 import './components/select-button/Component.js';
 import { MonthsTable } from './components/months-table/Component.js';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
 import { YearsTable } from './components/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 './components/period-slider/utils.js';
 import { PeriodSlider } from './components/period-slider/Component.js';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
 import 'react-merge-refs';
 import { useCalendar } from './useCalendar.js';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import { MonthYearHeader } from './components/month-year-header/Component.js';
 
-var styles = {"component":"calendar__component_1b8hx","container":"calendar__container_1b8hx","sixWeeks":"calendar__sixWeeks_1b8hx","period":"calendar__period_1b8hx"};
+var styles = {"component":"calendar__component_1ah1m","container":"calendar__container_1ah1m","sixWeeks":"calendar__sixWeeks_1ah1m","period":"calendar__period_1ah1m","monthYear":"calendar__monthYear_1ah1m"};
 require('./index.css');
 
 var Calendar = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, offDays = _a.offDays, events = _a.events, onChange = _a.onChange, onMonthChange = _a.onMonthChange, dataTestId = _a.dataTestId;
+    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, onChange = _a.onChange, onMonthChange = _a.onMonthChange, dataTestId = _a.dataTestId;
     var _f = useState(defaultView), view = _f[0], setView = _f[1];
     var _g = useState(false), scrolled = _g[0], setScrolled = _g[1];
     var selected = useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
@@ -84,10 +128,9 @@ var Calendar = forwardRef(function (_a, ref) {
     return (React.createElement("div", __assign({}, getRootProps({ ref: ref }), { className: cn(styles.component, className, (_b = {},
             _b[styles.sixWeeks] = weeks.length === 6,
             _b)), "data-test-id": dataTestId }),
-        React.createElement(Header, { view: selectorView, withShadow: scrolled },
-            React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onMonthClick: handleMonthClick, onYearClick: handleYearClick, view: selectorView === 'month-only' ? 'period' : 'full' })),
-        React.createElement("div", { className: styles.container },
-            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted })),
+        React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick }))),
+        React.createElement("div", { className: cn(styles.container, styles[view]) },
+            view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete })),
             view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps })),
             view === 'years' && (React.createElement(YearsTable, { selectedYear: activeMonth, years: years, getYearProps: getYearProps, onScroll: handleScroll })))));
 });

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

@@ -17,6 +17,10 @@ type DaysTableProps = {
      * Конец выделенного периода
      */
     selectedTo?: Date | number;
+    /**
+     * Индикатор, что выбран полный период
+     */
+    rangeComplete?: boolean;
     /**
      * Подсвеченная дата (ховер)
      */

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

@@ -1,17 +1,41 @@
-import { _ as __assign } from '../../tslib.es6-b934f8ee.js';
+import { _ as __assign } from '../../tslib.es6-6caa176b.js';
 import React, { useRef, useCallback } from 'react';
 import cn from 'classnames';
-import { startOfMonth, isToday, isEqual, isSameDay, isWithinInterval, isLastDayOfMonth } from 'date-fns';
+import 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
 import { usePrevious } from '@alfalab/hooks';
 import { Button } from '../../../../button/esm';
+import isEqual from 'date-fns/isEqual';
+import isLastDayOfMonth from 'date-fns/isLastDayOfMonth';
+import isSameDay from 'date-fns/isSameDay';
+import isToday from 'date-fns/isToday';
+import isWithinInterval from 'date-fns/isWithinInterval';
 import { TransitionGroup, CSSTransition } from '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 { getSelectionRange, WEEKDAYS } from '../../utils.js';
 
-var styles = {"daysTable":"calendar__daysTable_1vsi3","transitLeft":"calendar__transitLeft_1vsi3","transitRight":"calendar__transitRight_1vsi3","dayName":"calendar__dayName_1vsi3","day":"calendar__day_1vsi3","event":"calendar__event_1vsi3","today":"calendar__today_1vsi3","highlighted":"calendar__highlighted_1vsi3","disabled":"calendar__disabled_1vsi3","range":"calendar__range_1vsi3","selected":"calendar__selected_1vsi3","rangeStart":"calendar__rangeStart_1vsi3","firstDay":"calendar__firstDay_1vsi3","lastDay":"calendar__lastDay_1vsi3","left":"calendar__left_1vsi3","daysEnter":"calendar__daysEnter_1vsi3","daysEnterActive":"calendar__daysEnterActive_1vsi3","daysExit":"calendar__daysExit_1vsi3","daysExitActive":"calendar__daysExitActive_1vsi3","right":"calendar__right_1vsi3"};
+var styles = {"daysTable":"calendar__daysTable_wqljm","dayName":"calendar__dayName_wqljm","day":"calendar__day_wqljm","highlighted":"calendar__highlighted_wqljm","range":"calendar__range_wqljm","disabled":"calendar__disabled_wqljm","today":"calendar__today_wqljm","rangeComplete":"calendar__rangeComplete_wqljm","selected":"calendar__selected_wqljm","dayWrapper":"calendar__dayWrapper_wqljm","rangeEnd":"calendar__rangeEnd_wqljm","rangeStart":"calendar__rangeStart_wqljm","transitLeft":"calendar__transitLeft_wqljm","transitRight":"calendar__transitRight_wqljm","left":"calendar__left_wqljm","daysEnter":"calendar__daysEnter_wqljm","daysEnterActive":"calendar__daysEnterActive_wqljm","daysExit":"calendar__daysExit_wqljm","daysExitActive":"calendar__daysExitActive_wqljm","right":"calendar__right_wqljm","dot":"calendar__dot_wqljm"};
 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, getDayProps = _a.getDayProps;
+    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 activeMonthRef = useRef(activeMonth);
     activeMonthRef.current = activeMonth;
     var prevActiveMonth = usePrevious(activeMonth);
@@ -20,41 +44,48 @@ var DaysTable = function (_a) {
     var renderHeader = useCallback(function () {
         return WEEKDAYS.map(function (dayName) { return (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)); });
     }, []);
-    var renderDay = function (day) {
-        var _a;
+    var renderDay = function (day, dayIdx) {
+        var _a, _b;
+        if (!day)
+            return React.createElement("td", { key: dayIdx });
         var daySelected = day.selected ||
             (selectedFrom && isSameDay(day.date, selectedFrom)) ||
             (selectedTo && isSameDay(day.date, selectedTo));
-        var inRange = !daySelected && selection && isWithinInterval(day.date, selection);
+        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 rangeStart = selection && isSameDay(day.date, selection.start);
+        var rangeEnd = selection && isSameDay(day.date, selection.end);
         var dayProps = getDayProps(day);
-        return (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, (_a = {},
-                _a[styles.selected] = daySelected,
+        return (React.createElement("td", { key: day.date.getTime(), className: cn(styles.dayWrapper, (_a = {},
                 _a[styles.range] = inRange,
-                _a[styles.rangeStart] = rangeStart,
+                _a[styles.rangeComplete] = inRange && rangeComplete,
                 _a[styles.transitLeft] = transitLeft,
                 _a[styles.transitRight] = transitRight,
-                _a[styles.today] = isToday(day.date),
-                _a[styles.firstDay] = firstDay,
-                _a[styles.lastDay] = lastDay,
-                _a[styles.event] = day.event,
-                _a[styles.disabled] = day.disabled,
-                _a[styles.highlighted] = highlighted && isEqual(day.date, highlighted),
-                _a)) }), day.date.getDate()));
+                _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 = {},
+                    _b[styles.selected] = daySelected,
+                    _b[styles.today] = isToday(day.date),
+                    _b[styles.disabled] = day.disabled,
+                    _b[styles.highlighted] = dayHighlighted,
+                    _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(function (day, dayIdx) { return (React.createElement("td", { key: day ? day.date.getTime() : dayIdx }, day && renderDay(day))); }))); };
+    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())),

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

@@ -1,17 +1,19 @@
-/* hash: 1h5vf */
+/* hash: 3b2az */
 :root {
     --color-static-graphic-solitude: #e8f2fe;
 }
 :root {
-    --color-light-border-key: #0b1f35;
     --color-light-graphic-neutral: #dbdee1;
     --color-light-graphic-primary: #0b1f35;
-    --color-light-graphic-tertiary: #b6bcc3;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
     --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-light-text-link: #007aff;
     --color-light-text-primary: #0b1f35;
     --color-light-text-primary-inverted: #fff;
     --color-light-text-secondary: #546272;
     --color-light-text-tertiary: #b6bcc3;
+    --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
 }
 :root {
 
@@ -25,8 +27,8 @@
     --gap-2xs: 4px;
 }
 :root {
-    --border-radius-s: 4px;
     --border-radius-circle: 50%;
+    --border-radius-pill: 99px;
 }
 :root {
 
@@ -36,10 +38,10 @@
 
     /* День */
     --calendar-day-size: 40px;
-    --calendar-day-border-radius: var(--border-radius-s);
+    --calendar-day-border-radius: var(--border-radius-pill);
 
     /* today */
-    --calendar-today-border-color: var(--color-light-border-key);
+    --calendar-today-color: var(--color-light-text-link);
 
     /* highlighted */
     --calendar-highlighted-color: var(--color-light-text-primary);
@@ -47,206 +49,249 @@
 
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
-    --calendar-range-background: var(--color-static-graphic-solitude);
+    --calendar-range-background: var(--color-light-specialbg-component);
+    --calendar-range-complete-background: var(--color-static-graphic-solitude);
 
     /* selected */
     --calendar-selected-color: var(--color-light-text-primary-inverted);
     --calendar-selected-background: var(--color-light-graphic-primary);
+    --calendar-selected-hover-background: var(--color-light-graphic-primary-tint-15);
 
     /* disabled */
     --calendar-disabled-color: var(--color-light-text-tertiary);
     --calendar-disabled-background: transparent;
 
     /* marker */
-    --calendar-marker-background: var(--color-light-graphic-tertiary);
+    --calendar-marker-background: var(--color-light-graphic-primary);
+    --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
 }
-.calendar__daysTable_1vsi3 {
+.calendar__daysTable_wqljm {
     border-collapse: separate;
     border-spacing: 0;
     position: relative
 }
-.calendar__daysTable_1vsi3 th {
+.calendar__daysTable_wqljm th {
         padding: 0;
     }
-.calendar__daysTable_1vsi3 td {
-        padding: var(--gap-2xs) 0 0
+.calendar__daysTable_wqljm td {
+        padding: var(--gap-2xs) 0 0;
     }
-.calendar__daysTable_1vsi3 td:first-child .calendar__transitLeft_1vsi3 {
-            background: linear-gradient(
-                270deg,
-                var(--calendar-range-background) 0%,
-                var(--color-light-specialbg-nulled) 100%
-            )
-        }
-.calendar__daysTable_1vsi3 td:first-child .calendar__transitLeft_1vsi3:after {
-                display: none;
-            }
-.calendar__daysTable_1vsi3 td:last-child .calendar__transitRight_1vsi3 {
-            background: linear-gradient(
-                270deg,
-                var(--color-light-specialbg-nulled) 0%,
-                var(--calendar-range-background) 100%
-            )
-        }
-.calendar__daysTable_1vsi3 td:last-child .calendar__transitRight_1vsi3:after {
-                display: none;
-            }
-.calendar__dayName_1vsi3 {
+.calendar__dayName_wqljm {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
-    height: 40px;
+    height: var(--calendar-day-size);
     color: var(--color-light-text-secondary)
 }
 @media (max-width: 374px) {
-.calendar__dayName_1vsi3 {
+.calendar__dayName_wqljm {
         height: 36px
 }
     }
-.calendar__day_1vsi3 {
+.calendar__day_wqljm {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
 
     position: relative;
-    width: 40px;
-    height: 40px;
+    width: var(--calendar-day-size);
+    height: var(--calendar-day-size);
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     box-sizing: border-box;
     border-radius: var(--calendar-day-border-radius);
-    color: var(--color-light-text-primary)
+    color: var(--color-light-text-primary);
+    z-index: 1
 }
 @media (max-width: 374px) {
-.calendar__day_1vsi3 {
+.calendar__day_wqljm {
         width: 36px;
         height: 36px
 }
     }
-.calendar__day_1vsi3.calendar__event_1vsi3:before {
-            content: '';
-            display: block;
-            position: absolute;
-            bottom: 2px;
-            width: 6px;
-            height: 6px;
-            border-radius: var(--border-radius-circle);
-            background: var(--calendar-marker-background);
-        }
-.calendar__day_1vsi3.calendar__today_1vsi3 {
-        font-weight: bold
-    }
-.calendar__day_1vsi3.calendar__today_1vsi3 span:after {
-            content: '';
-            border: 1px solid var(--calendar-today-border-color);
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            border-radius: var(--calendar-day-border-radius);
-            box-sizing: border-box;
-        }
-.calendar__day_1vsi3.calendar__highlighted_1vsi3 {
+.calendar__day_wqljm.calendar__highlighted_wqljm,
+    .calendar__day_wqljm.calendar__range_wqljm.calendar__highlighted_wqljm:not(.calendar__disabled_wqljm) {
         color: var(--calendar-highlighted-color);
         background: var(--calendar-highlighted-background);
     }
-.calendar__day_1vsi3.calendar__disabled_1vsi3 {
+.calendar__day_wqljm.calendar__disabled_wqljm {
         pointer-events: none;
         color: var(--calendar-disabled-color);
 
         background: var(--calendar-disabled-background);
         cursor: default;
     }
-.calendar__day_1vsi3.calendar__range_1vsi3 {
-        color: var(--calendar-range-color);
-        background: var(--calendar-range-background);
-        border-radius: 0;
+.calendar__day_wqljm.calendar__today_wqljm {
+        font-weight: bold;
+        color: var(--calendar-today-color);
+    }
+.calendar__day_wqljm.calendar__rangeComplete_wqljm {
+        background: var(--calendar-range-complete-background);
     }
-.calendar__day_1vsi3.calendar__selected_1vsi3,
-    .calendar__day_1vsi3.calendar__disabled_1vsi3.calendar__selected_1vsi3 {
+.calendar__day_wqljm.calendar__today_wqljm {
+        font-weight: bold;
+        color: var(--color-light-text-link);
+    }
+.calendar__day_wqljm.calendar__selected_wqljm,
+    .calendar__day_wqljm.calendar__disabled_wqljm.calendar__selected_wqljm {
         color: var(--calendar-selected-color);
         background: var(--calendar-selected-background);
-        cursor: default;
     }
-.calendar__day_1vsi3.calendar__rangeStart_1vsi3 {
-        cursor: pointer;
+.calendar__day_wqljm.calendar__selected_wqljm:hover {
+            background: var(--calendar-selected-hover-background);
+        }
+.calendar__day_wqljm:focus {
+        z-index: 1;
+    }
+/* RANGE */
+.calendar__dayWrapper_wqljm {
+    position: relative
+}
+.calendar__dayWrapper_wqljm:before {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: var(--calendar-day-size);
+    }
+.calendar__range_wqljm .calendar__day_wqljm:not(.calendar__selected_wqljm):not(.calendar__disabled_wqljm):not(.calendar__today_wqljm) {
+        color: var(--calendar-range-color);
+    }
+.calendar__range_wqljm:before {
+        background: var(--calendar-range-background);
+    }
+.calendar__rangeEnd_wqljm:before {
+        border-bottom-right-radius: 50%;
+        border-top-right-radius: 50%;
+        width: var(--calendar-day-size);
+    }
+.calendar__rangeEnd_wqljm:after {
+        opacity: 0;
+    }
+.calendar__rangeStart_wqljm:before {
+        left: auto;
+        right: 0;
+        border-bottom-left-radius: 50%;
+        border-top-left-radius: 50%;
+        width: var(--calendar-day-size);
+    }
+.calendar__rangeStart_wqljm:after {
+        opacity: 0;
+    }
+.calendar__rangeComplete_wqljm:before {
+        background: var(--calendar-range-complete-background);
+    }
+.calendar__transitLeft_wqljm:after, .calendar__transitRight_wqljm:after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: var(--calendar-day-size);
+        bottom: 0;
+        pointer-events: none;
+    }
+.calendar__transitLeft_wqljm:after {
+        right: 100%;
+        background: linear-gradient(
+            270deg,
+            var(--calendar-range-background) 0%,
+            var(--color-light-specialbg-nulled) 100%
+        );
     }
-.calendar__day_1vsi3.calendar__firstDay_1vsi3:after, .calendar__day_1vsi3.calendar__lastDay_1vsi3:after {
-            transition: opacity 0.2s ease;
-            content: '';
-            position: absolute;
-            display: block;
-            width: 100%;
-            height: 100%;
+.calendar__transitLeft_wqljm:first-child:before {
             opacity: 0;
-            pointer-events: none;
         }
-.calendar__day_1vsi3.calendar__firstDay_1vsi3:after {
-            right: 100%;
-            background: linear-gradient(
-                270deg,
-                var(--calendar-range-background) 0%,
-                var(--color-light-specialbg-nulled) 100%
-            );
+.calendar__transitLeft_wqljm:first-child:after {
+            right: 0;
         }
-.calendar__day_1vsi3.calendar__lastDay_1vsi3:after {
-            left: 100%;
-            background: linear-gradient(
-                270deg,
-                var(--color-light-specialbg-nulled) 0%,
-                var(--calendar-range-background) 100%
-            );
+.calendar__transitRight_wqljm:after {
+        left: 100%;
+        background: linear-gradient(
+            270deg,
+            var(--color-light-specialbg-nulled) 0%,
+            var(--calendar-range-background) 100%
+        );
+    }
+.calendar__transitRight_wqljm:last-child:before {
+            opacity: 0;
         }
-.calendar__day_1vsi3.calendar__transitLeft_1vsi3:after, .calendar__day_1vsi3.calendar__transitRight_1vsi3:after {
-            opacity: 1;
+.calendar__transitRight_wqljm:last-child:after {
+            left: 0;
         }
-.calendar__day_1vsi3:focus {
-        z-index: 1;
+.calendar__rangeComplete_wqljm.calendar__transitLeft_wqljm:after {
+        background: linear-gradient(
+            270deg,
+            var(--calendar-range-complete-background) 0%,
+            var(--color-light-specialbg-nulled) 100%
+        );
     }
-.calendar__left_1vsi3 .calendar__daysEnter_1vsi3 {
+.calendar__rangeComplete_wqljm.calendar__transitRight_wqljm:after {
+        background: linear-gradient(
+            270deg,
+            var(--color-light-specialbg-nulled) 0%,
+            var(--calendar-range-complete-background) 100%
+        );
+    }
+/* SLIDE ANIMATION */
+.calendar__left_wqljm .calendar__daysEnter_wqljm {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__left_1vsi3 .calendar__daysEnterActive_1vsi3 {
+.calendar__left_wqljm .calendar__daysEnterActive_wqljm {
         transform: translateX(0%);
     }
-.calendar__left_1vsi3 .calendar__daysExit_1vsi3 {
+.calendar__left_wqljm .calendar__daysExit_wqljm {
         transform: translateX(0%);
     }
-.calendar__left_1vsi3 .calendar__daysExitActive_1vsi3 {
+.calendar__left_wqljm .calendar__daysExitActive_wqljm {
         transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
-.calendar__right_1vsi3 .calendar__daysEnter_1vsi3 {
+.calendar__right_wqljm .calendar__daysEnter_wqljm {
         transform: translateX(calc(-1 * var(--calendar-day-size)));
     }
-.calendar__right_1vsi3 .calendar__daysEnterActive_1vsi3 {
+.calendar__right_wqljm .calendar__daysEnterActive_wqljm {
         transform: translateX(0%);
     }
-.calendar__right_1vsi3 .calendar__daysExit_1vsi3 {
+.calendar__right_wqljm .calendar__daysExit_wqljm {
         transform: translateX(0%);
     }
-.calendar__right_1vsi3 .calendar__daysExitActive_1vsi3 {
+.calendar__right_wqljm .calendar__daysExitActive_wqljm {
         transform: translateX(var(--calendar-day-size));
     }
-.calendar__daysEnter_1vsi3 {
+.calendar__dot_wqljm {
+    display: block;
+    position: absolute;
+    bottom: 4px;
+    width: 4px;
+    height: 4px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: var(--border-radius-circle);
+    background: var(--calendar-marker-background);
+}
+.calendar__selected_wqljm .calendar__dot_wqljm {
+    background: var(--calendar-marker-selected-background);
+}
+.calendar__daysEnter_wqljm {
     opacity: 0;
     position: absolute;
     left: 0;
 }
-.calendar__daysEnterActive_1vsi3 {
+.calendar__daysEnterActive_wqljm {
     opacity: 1;
 }
-.calendar__daysExit_1vsi3 {
+.calendar__daysExit_wqljm {
     pointer-events: none;
     opacity: 1;
 }
-.calendar__daysExitActive_1vsi3 {
+.calendar__daysExitActive_wqljm {
     opacity: 0;
 }
-.calendar__daysEnterActive_1vsi3,
-.calendar__daysExitActive_1vsi3 {
+.calendar__daysEnterActive_wqljm,
+.calendar__daysExitActive_wqljm {
     transition: opacity 300ms, transform 300ms;
 }

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

@@ -1,9 +1,33 @@
-import '../../tslib.es6-b934f8ee.js';
+import '../../tslib.es6-6caa176b.js';
 import 'react';
 import 'classnames';
-import 'date-fns';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
 import '@alfalab/hooks';
 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';
 export { DaysTable } from './Component.js';