@ozen-ui/kit 0.53.0 → 0.55.0

package/__inner__/esm/components/ButtonNext/Button.d.ts

@@ -1,51 +1,4 @@
 import './Button.css';
-import type { ReactNode, ElementType, ComponentPropsWithRef } from 'react';
-import type { IconProps, IconSize } from '@ozen-ui/icons';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
-import type { RenderContentType } from '../../utils/renderContent';
-import { BUTTON_DEFAULT_TAG } from './constants';
-export declare const buttonVariant: readonly ["contained", "contained-additional", "ghost", "function"];
-export declare const buttonColorVariant: readonly ["primary", "secondary", "tertiary", "error"];
-export type ButtonVariant = (typeof buttonVariant)[number];
-export type ButtonColorVariant = (typeof buttonColorVariant)[number];
-export type ButtonIcon = RenderContentType<IconProps & {
-    size?: IconSize;
-}>['content'];
-type ButtonBaseProps = {
-    /**
-     * Вариант отображения кнопки
-     * @default contained
-     * */
-    variant?: ButtonVariant;
-    /**
-     * Размер
-     * @default m
-     * */
-    size?: FormElementSizeVariant;
-    /**
-     * Цвет
-     * @default primary
-     * */
-    color?: ButtonColorVariant;
-    /** Содержимое кнопки */
-    children?: ReactNode;
-    /** Если {true} делает кнопку заблокированной */
-    disabled?: boolean;
-    /** Если {true} переводит кнопку в состояние загрузки  */
-    loading?: boolean;
-    /** Дополнительные CSS-классы */
-    className?: string;
-    /** Иконка слева */
-    iconLeft?: ButtonIcon;
-    /** Иконка справа */
-    iconRight?: ButtonIcon;
-    /** Если {true} растягивает кнопку на всю ширину родительского контейнера */
-    fullWidth?: boolean;
-    /** Свойства лейбла кнопки */
-    labelProps?: ComponentPropsWithRef<'span'>;
-};
-export type ButtonProps<As extends ElementType = typeof BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseProps, As>;
+import type { ButtonBaseProps } from './index';
 export declare const cnButton: import("@bem-react/classname").ClassNameFormatter;
 export declare const Button: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseProps, "button">;
-export {};

package/__inner__/esm/components/ButtonNext/Button.js

@@ -1,6 +1,6 @@
 import { __assign, __rest } from "tslib";
 import './Button.css';
-import React from 'react';
+import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
@@ -10,24 +10,13 @@ import { renderContent } from '../../utils/renderContent';
 import { ButtonBase } from '../ButtonBase';
 import { Loader } from '../Loader';
 import { BUTTON_DEFAULT_SIZE, BUTTON_DEFAULT_VARIANT, BUTTON_DEFAULT_COLOR, BUTTON_DEFAULT_TAG, } from './constants';
-export var buttonVariant = [
-    'contained',
-    'contained-additional',
-    'ghost',
-    'function',
-];
-export var buttonColorVariant = [
-    'primary',
-    'secondary',
-    'tertiary',
-    'error',
-];
 export var cnButton = cn('ButtonNext');
 export var Button = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'ButtonNext',
     });
+    var loaderRef = useRef(null);
     var _a = props.as, Tag = _a === void 0 ? BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, labelProps = props.labelProps, onClick = props.onClick, other = __rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "labelProps", "onClick"]);
     var iconSize = getIconSizeToFormElement(size);
     var renderIcon = function (content) {
@@ -43,8 +32,8 @@ export var Button = polymorphicComponentWithRef(function (inProps, ref) {
             renderIcon(iconLeft),
             React.createElement("span", __assign({}, labelProps, { className: cnButton('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
             renderIcon(iconRight)),
-        React.createElement(CSSTransition, { in: loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
-            React.createElement(Loader, { size: iconSize, className: cnButton('Loader') }))));
+        React.createElement(CSSTransition, { nodeRef: loaderRef, in: loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
+            React.createElement(Loader, { size: iconSize, className: cnButton('Loader'), ref: loaderRef }))));
     return (React.createElement(ButtonBase, __assign({ as: Tag, disabled: disabled, loading: loading, onClick: onClick, className: cnButton({
             variant: variant,
             size: size,

package/__inner__/esm/components/ButtonNext/index.d.ts

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

package/__inner__/esm/components/ButtonNext/index.js

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

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

@@ -0,0 +1,45 @@
+import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import type { IconProps } from '@ozen-ui/icons';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
+import type { BUTTON_DEFAULT_TAG } from './constants';
+export declare const buttonVariant: readonly ["contained", "contained-additional", "ghost", "function"];
+export declare const buttonColorVariant: readonly ["primary", "secondary", "tertiary", "error"];
+export type ButtonVariant = (typeof buttonVariant)[number];
+export type ButtonColorVariant = (typeof buttonColorVariant)[number];
+export type ButtonIcon = RenderContentType<IconProps>['content'];
+export type ButtonBaseProps = {
+    /**
+     * Вариант отображения кнопки
+     * @default contained
+     * */
+    variant?: ButtonVariant;
+    /**
+     * Размер
+     * @default m
+     * */
+    size?: FormElementSizeVariant;
+    /**
+     * Цвет
+     * @default primary
+     * */
+    color?: ButtonColorVariant;
+    /** Содержимое кнопки */
+    children?: ReactNode;
+    /** Если {true} делает кнопку заблокированной */
+    disabled?: boolean;
+    /** Если {true} переводит кнопку в состояние загрузки  */
+    loading?: boolean;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Иконка слева */
+    iconLeft?: ButtonIcon;
+    /** Иконка справа */
+    iconRight?: ButtonIcon;
+    /** Если {true} растягивает кнопку на всю ширину родительского контейнера */
+    fullWidth?: boolean;
+    /** Свойства лейбла кнопки */
+    labelProps?: ComponentPropsWithRef<'span'>;
+};
+export type ButtonProps<As extends ElementType = typeof BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseProps, As>;

package/__inner__/esm/components/ButtonNext/types.js

@@ -0,0 +1,12 @@
+export var buttonVariant = [
+    'contained',
+    'contained-additional',
+    'ghost',
+    'function',
+];
+export var buttonColorVariant = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'error',
+];

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

@@ -6,6 +6,7 @@
   flex-direction: column;
 }
 .Calendar_size_s {
+      --calendar-width: 252px;
       --calendar-grid-size: 236px;
       --calendar-switcher-height: var(--control-height-s);
       --calendar-switcher-margin: 0 var(--spacing-xs);
@@ -18,6 +19,7 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .Calendar_size_m {
+      --calendar-width: 308px;
       --calendar-grid-size: 292px;
       --calendar-switcher-height: var(--control-height-m);
       --calendar-switcher-margin: 0 var(--spacing-xs);
@@ -30,6 +32,7 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .Calendar_size_l {
+      --calendar-width: 364px;
       --calendar-grid-size: 348px;
       --calendar-switcher-height: var(--control-height-l);
       --calendar-switcher-margin: 0 var(--spacing-xs);

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

@@ -1,4 +1,3 @@
 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">;
+import type { CalendarComponent } from './types';
+export declare const Calendar: CalendarComponent;

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

@@ -1,87 +1,23 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __rest } from "tslib";
 import './Calendar.css';
-import React, { useState, useEffect } from 'react';
-import { DatePickerProvider } from '@rehookify/datepicker';
-import { useControlled } from '../../hooks/useControlled';
+import React, { forwardRef } from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
-import { cn } from '../../utils/classname';
-import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
-import { Divider } from '../Divider';
-import { CalendarContext } from './CalendarContext';
-import { CalendarAdditionalControls, CalendarGrid, CalendarSwitcher, } from './components';
-import { CALENDAR_DEFAULT_AS, CALENDAR_DEFAULT_SIZE, CALENDAR_DEFAULT_START_DAY, } from './constants';
-export var cnCalendar = cn('Calendar');
-export var Calendar = polymorphicComponentWithRef(function (inProps, ref) {
+import { getByMap } from '../../utils/getByMap';
+import { CalendarModeRange, CalendarModeSingle } from './components';
+import { CALENDAR_DEFAULT_MODE, CALENDAR_DEFAULT_SIZE, CALENDAR_DEFAULT_START_DAY, } from './constants';
+import { getPeriodSwitchAriaLabel as createPeriodSwitchAriaLabel } from './utils';
+var typeMap = {
+    range: CalendarModeRange,
+    single: CalendarModeSingle,
+};
+// eslint-disable-next-line react/display-name
+export var Calendar = 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, _c = props.as, Tag = _c === void 0 ? 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 = __rest(props, ["size", "startDay", "as", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "calendarSwitcherProps"]);
-    var _d = __read(useState('days'), 2), step = _d[0], setStep = _d[1];
-    var _e = __read(useControlled({
-        value: valueProp,
-        defaultValue: defaultValue,
-        name: 'Calendar',
-        state: 'value',
-    }), 2), value = _e[0], setValue = _e[1];
-    var _f = __read(useControlled({
-        value: offsetDateProp,
-        defaultValue: defaultOffsetDate,
-        name: 'Calendar',
-        state: 'offsetDate',
-    }), 2), offsetDate = _f[0], setOffsetDateState = _f[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);
-    };
-    useEffect(function () {
-        if (value)
-            onOffsetChange(value);
-    }, [value]);
-    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] : [],
-    };
-    // Управление представлениями календаря
-    var goStep = function (step) {
-        setStep(step);
-    };
-    return (React.createElement(DatePickerProvider, { config: config },
-        React.createElement(CalendarContext.Provider, { value: {
-                size: size,
-                step: step,
-                goStep: goStep,
-                minDate: minDate,
-                maxDate: maxDate,
-                onMonthClick: onMonthClick,
-                onDayClick: onDayClick,
-                onYearClick: onYearClick,
-                onOffsetChange: setOffsetDateState,
-            } },
-            React.createElement(Tag, __assign({ className: cnCalendar({ size: size }, [className]) }, other, { ref: ref }),
-                React.createElement(CalendarSwitcher, __assign({}, calendarSwitcherProps)),
-                React.createElement(Divider, { color: "secondary" }),
-                React.createElement(CalendarGrid, null),
-                React.createElement(CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
+    var _a = props.size, size = _a === void 0 ? CALENDAR_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? CALENDAR_DEFAULT_MODE : _b, _c = props.startDay, startDay = _c === void 0 ? CALENDAR_DEFAULT_START_DAY : _c, getPeriodSwitchAriaLabelProp = props.getPeriodSwitchAriaLabel, other = __rest(props, ["size", "mode", "startDay", "getPeriodSwitchAriaLabel"]);
+    var getPeriodSwitchAriaLabel = getPeriodSwitchAriaLabelProp || createPeriodSwitchAriaLabel;
+    var Component = getByMap(typeMap, mode);
+    return (React.createElement(Component, __assign({ size: size, startDay: startDay, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel }, other, { ref: ref })));
 });
-Calendar.displayName = 'Calendar';

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

@@ -1,14 +1,14 @@
 import React from 'react';
-import type { CalendarStepVariant, CalendarSizeVariant, CalendarBaseProps } from './types';
+import type { CalendarSizeVariant, CalendarProps } 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;
+    size?: CalendarSizeVariant;
     onOffsetChange?(d: Date): void;
+    onDayClick?: CalendarProps['onDayClick'];
+    onYearClick?: CalendarProps['onYearClick'];
+    onMonthClick?: CalendarProps['onMonthClick'];
+    getPeriodSwitchAriaLabel?: CalendarProps['getPeriodSwitchAriaLabel'];
 }
 export declare const CalendarContext: React.Context<CalendarContextValue>;
+export declare const useCalendar: () => CalendarContextValue;

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

@@ -1,4 +1,3 @@
-import React from 'react';
-export var CalendarContext = React.createContext({
-    step: 'days',
-});
+import React, { useContext } from 'react';
+export var CalendarContext = React.createContext({});
+export var useCalendar = function () { return useContext(CalendarContext); };

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

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

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

@@ -1,21 +1,23 @@
 import { __assign } from "tslib";
 import './CalendarGrid.css';
-import React, { useContext } from 'react';
+import React, { forwardRef } from 'react';
 import { classnames } from '@bem-react/classnames';
 import { useDatePickerContext } from '@rehookify/datepicker';
 import { capitalizeFirstLetter as capitalize } from '../../../../utils/capitalizeFirstLetter';
 import { cn } from '../../../../utils/classname';
 import { Typography } from '../../../Typography';
-import { CalendarContext } from '../../CalendarContext';
-import { CalendarItem } from '../CalendarItem';
+import { useCalendar } from '../../CalendarContext';
+import { CalendarGridItem } from '../CalendarGridItem';
+import { useCalendarItem } from '../CalendarItem/CalendarItemContext';
 export var cnCalendarGrid = cn('CalendarGrid');
 export var cnCalendarDays = cn('CalendarDays');
 export var cnCalendarMoths = cn('CalendarMonths');
 export var cnCalendarYears = cn('CalendarYears');
-export var CalendarGrid = function () {
-    var _a = useContext(CalendarContext), step = _a.step, goStep = _a.goStep, size = _a.size, onYearClick = _a.onYearClick, onDayClick = _a.onDayClick, onMonthClick = _a.onMonthClick;
-    var _b = 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;
+export var CalendarGrid = forwardRef(function () {
+    var _a = useCalendar(), size = _a.size, onYearClick = _a.onYearClick, onDayClick = _a.onDayClick, onMonthClick = _a.onMonthClick;
+    var _b = useCalendarItem(), step = _b.step, goStep = _b.goStep, calendar = _b.calendar;
+    var _c = useDatePickerContext(), _d = _c.data, weekDays = _d.weekDays, years = _d.years, months = _d.months, _e = _c.propGetters, dayButton = _e.dayButton, monthButton = _e.monthButton, yearButton = _e.yearButton;
+    var _f = calendar || {}, days = _f.days, month = _f.month;
     var handleClickOnDay = function (e, date) {
         onDayClick === null || onDayClick === void 0 ? void 0 : onDayClick(e, date);
     };
@@ -29,15 +31,16 @@ export var CalendarGrid = function () {
     };
     return (React.createElement(React.Fragment, null,
         step === 'days' && (React.createElement("div", { className: classnames(cnCalendarGrid(), cnCalendarDays()) },
-            weekDays.map(function (day) { return (React.createElement(Typography, __assign({ key: "".concat(month, "-").concat(day), color: "tertiary" }, (size && { variant: "text-".concat(size) })), day && capitalize(day))); }), days === null || days === void 0 ? void 0 :
-            days.map(function (dpDay) { return (React.createElement(CalendarItem, __assign({ size: size, current: dpDay.now, selected: dpDay.selected, key: dpDay.$date.toDateString() }, dayButton(dpDay, {
+            weekDays.map(function (day) { return (React.createElement(Typography, __assign({ role: "row", key: "".concat(month, "-").concat(day), color: "tertiary" }, (size && { variant: "text-".concat(size) })), day && capitalize(day))); }), days === null || days === void 0 ? void 0 :
+            days.map(function (dpDay) { return (React.createElement(CalendarGridItem, __assign({ size: size, current: dpDay.now, range: dpDay.range, selected: dpDay.selected, key: "".concat(month, " ").concat(dpDay.$date.toDateString()) }, dayButton(dpDay, {
                 onClick: handleClickOnDay,
                 disabled: dpDay.disabled || !dpDay.inCurrentMonth,
             }), { tabIndex: dpDay.disabled || !dpDay.inCurrentMonth ? -1 : 0 }), dpDay.day)); }))),
-        step === 'months' && (React.createElement("div", { className: classnames(cnCalendarGrid(), cnCalendarMoths()) }, months === null || months === void 0 ? void 0 : months.map(function (dpMonth) { return (React.createElement(CalendarItem, __assign({ size: size, current: dpMonth.now, key: dpMonth.$date.toDateString(), selected: dpMonth.selected }, monthButton(dpMonth, {
+        step === 'months' && (React.createElement("div", { className: classnames(cnCalendarGrid(), cnCalendarMoths()) }, months === null || months === void 0 ? void 0 : months.map(function (dpMonth) { return (React.createElement(CalendarGridItem, __assign({ size: size, current: dpMonth.now, key: dpMonth.$date.toDateString(), selected: dpMonth.selected }, monthButton(dpMonth, {
             onClick: handleClickOnMonth,
         }), { tabIndex: dpMonth.disabled ? -1 : 0 }), dpMonth.month && capitalize(dpMonth.month))); }))),
-        step === 'years' && (React.createElement("div", { className: classnames(cnCalendarGrid(), cnCalendarYears()) }, years === null || years === void 0 ? void 0 : years.map(function (dpYear) { return (React.createElement(CalendarItem, __assign({ key: dpYear.$date.toDateString(), current: dpYear.now, selected: dpYear.selected, size: size }, yearButton(dpYear, {
+        step === 'years' && (React.createElement("div", { className: classnames(cnCalendarGrid(), cnCalendarYears()) }, years === null || years === void 0 ? void 0 : years.map(function (dpYear) { return (React.createElement(CalendarGridItem, __assign({ key: dpYear.$date.toDateString(), current: dpYear.now, selected: dpYear.selected, size: size }, yearButton(dpYear, {
             onClick: handleClickOnYear,
         }), { tabIndex: dpYear.disabled ? -1 : 0 }), dpYear.year)); })))));
-};
+});
+CalendarGrid.displayName = 'CalendarGrid';

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+export {};

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { __assign, __rest } from "tslib";
+import './CalendarGridItem.css';
+import React, { forwardRef } from 'react';
+import { cn } from '../../../../utils/classname';
+import { ButtonBase } from '../../../ButtonBase';
+export var cnCalendarGridItem = cn('CalendarGridItem');
+export var CalendarGridItem = forwardRef(function (_a, ref) {
+    var current = _a.current, selected = _a.selected, range = _a.range, disabled = _a.disabled, className = _a.className, size = _a.size, children = _a.children, other = __rest(_a, ["current", "selected", "range", "disabled", "className", "size", "children"]);
+    return (React.createElement(ButtonBase, __assign({ className: cnCalendarGridItem({
+            size: size,
+            current: current,
+            selected: selected,
+            disabled: disabled,
+            range: range,
+        }, [className]), disabled: disabled }, other, { ref: ref }), children));
+});
+CalendarGridItem.displayName = 'CalendarGridItem';

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -1,16 +1,46 @@
-import { __assign, __rest } from "tslib";
-import './CalendatItem.css';
-import React, { forwardRef } from 'react';
-import { cn } from '../../../../utils/classname';
-import { ButtonBase } from '../../../ButtonBase';
-export var cnCalendarItem = cn('CalendarItem');
+import { __assign, __read } from "tslib";
+import React, { forwardRef, useState } from 'react';
+import { Divider } from '../../../Divider';
+import { cnCalendar } from '../../utils';
+import { CalendarGrid, CalendarSwitcher } from '../index';
+import { CalendarItemContext } from './CalendarItemContext';
+import { CalendarItemNextMonth, CalendarItemPreviousMonth } from './components';
 export var CalendarItem = forwardRef(function (_a, ref) {
-    var current = _a.current, selected = _a.selected, disabled = _a.disabled, className = _a.className, size = _a.size, children = _a.children, other = __rest(_a, ["current", "selected", "disabled", "className", "size", "children"]);
-    return (React.createElement(ButtonBase, __assign({ className: cnCalendarItem({
-            size: size,
-            current: current,
-            selected: selected,
-            disabled: disabled,
-        }, [className]), disabled: disabled }, other, { ref: ref }), children));
+    var calendar = _a.calendar, type = _a.type;
+    var _b = __read(useState('days'), 2), step = _b[0], setStep = _b[1];
+    // Управление представлениями календаря
+    var goStep = function (step) {
+        setStep(step);
+    };
+    var getActions = function (type) {
+        if (type === 'single') {
+            return {
+                nextButton: (React.createElement("div", null,
+                    React.createElement(CalendarItemPreviousMonth, null),
+                    React.createElement(CalendarItemNextMonth, null))),
+            };
+        }
+        if (type === 'first') {
+            return {
+                prevButton: React.createElement(CalendarItemPreviousMonth, null),
+                nextButton: React.createElement("div", null),
+            };
+        }
+        if (type === 'last') {
+            return {
+                prevButton: React.createElement("div", null),
+                nextButton: React.createElement(CalendarItemNextMonth, null),
+            };
+        }
+        return {
+            prevButton: React.createElement("div", null),
+            nextButton: React.createElement("div", null),
+        };
+    };
+    return (React.createElement(CalendarItemContext.Provider, { value: { step: step, goStep: goStep, calendar: calendar } },
+        React.createElement("div", { ref: ref, className: cnCalendar('MonthContainer') },
+            React.createElement(CalendarSwitcher, __assign({}, getActions(type))),
+            React.createElement(Divider, { color: "secondary" }),
+            React.createElement(CalendarGrid, null))));
 });
 CalendarItem.displayName = 'CalendarItem';

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

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