@megafon/ui-core 8.17.1 → 8.17.3

package/dist/es/components/Calendar/components/_Day/Day.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.index-of.js";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import { useDay } from '@datepicker-react/hooks';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import isFirstDayOfMonth from 'date-fns/isFirstDayOfMonth';
+import isLastDayOfMonth from 'date-fns/isLastDayOfMonth';
+import isMonday from 'date-fns/isMonday';
+import isSunday from 'date-fns/isSunday';
+import "./Day.css";
+var cn = cnCreate('mfui-day');
+var Day = function Day(_a) {
+  var dataAttrs = _a.dataAttrs,
+    _a$isBetween = _a.isBetween,
+    isBetween = _a$isBetween === void 0 ? false : _a$isBetween,
+    dayLabel = _a.dayLabel,
+    date = _a.date,
+    _a$isModern = _a.isModern,
+    isModern = _a$isModern === void 0 ? false : _a$isModern,
+    onMouseLeave = _a.onMouseLeave,
+    pickerProps = __rest(_a, ["dataAttrs", "isBetween", "dayLabel", "date", "isModern", "onMouseLeave"]);
+  var dayRef = React.useRef(null);
+  var _useDay = useDay(_extends({
+      date: date,
+      dayRef: dayRef
+    }, pickerProps)),
+    isSelected = _useDay.isSelected,
+    isSelectedStartOrEnd = _useDay.isSelectedStartOrEnd,
+    isDateDisabled = _useDay.disabledDate,
+    onClick = _useDay.onClick,
+    onKeyDown = _useDay.onKeyDown,
+    onMouseEnter = _useDay.onMouseEnter,
+    tabIndex = _useDay.tabIndex;
+  var modernClasses = {
+    modern: isModern,
+    disabled: isDateDisabled,
+    'active-modern': isSelectedStartOrEnd,
+    'between-modern': isBetween || isSelected && !isSelectedStartOrEnd,
+    'sunday-modern': isSunday(date),
+    'monday-modern': isMonday(date),
+    'first-modern': !isSelectedStartOrEnd && isFirstDayOfMonth(date),
+    'last-modern': !isSelectedStartOrEnd && isLastDayOfMonth(date)
+  };
+  var classicClasses = {
+    active: isSelectedStartOrEnd,
+    between: isBetween || isSelected && !isSelectedStartOrEnd,
+    sunday: isSunday(date),
+    monday: isMonday(date),
+    first: !isSelectedStartOrEnd && isFirstDayOfMonth(date),
+    last: !isSelectedStartOrEnd && isLastDayOfMonth(date),
+    disabled: isDateDisabled
+  };
+  var modClasses = isModern ? modernClasses : classicClasses;
+  var handleMouseLeave = function handleMouseLeave() {
+    onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+  };
+  return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    tabIndex: tabIndex,
+    type: "button",
+    ref: dayRef,
+    className: cn(modClasses)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('label', {
+      modern: isModern
+    })
+  }, dayLabel));
+};
+export default Day;

package/dist/es/components/Calendar/components/_Month/Month.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-month{position:relative;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:28px 0;width:284px}.mfui-month,.mfui-month__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-month__header{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:20px;text-transform:capitalize;width:282px}.mfui-month__header svg{cursor:pointer;height:24.5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:var(--content)}.mfui-month__title{font-size:15px;font-weight:500;line-height:24px;text-align:center;width:224px}.mfui-month__weekday-labels{border-bottom:1px solid var(--spbSky1);-webkit-column-gap:22px;-moz-column-gap:22px;column-gap:22px;display:grid;grid-template-columns:repeat(7,1fr);padding-bottom:13px;width:272px}.mfui-month__weekday{color:var(--content);font-size:12px;font-weight:600;height:16px;line-height:18px;line-height:24px;text-align:center;text-transform:capitalize;width:20px}.mfui-month__days{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;display:grid;grid-template-columns:repeat(7,1fr);margin-top:8px;row-gap:0;width:284px}.mfui-month svg.mfui-month__arrow_disabled{cursor:default;opacity:.5}.mfui-month_modern{padding:0 16px 24px 0;width:100%}.mfui-month_modern .mfui-month__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:16px;text-transform:capitalize;width:100%}.mfui-month_modern .mfui-month__title{font-size:15px;font-weight:500;line-height:24px;margin:0 auto;text-align:center;width:224px}.mfui-month_modern .mfui-month__weekday-labels{border-bottom:none;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;display:grid;grid-template-columns:repeat(7,1fr);padding-bottom:0;width:100%}.mfui-month_modern .mfui-month__weekday{color:var(--spbSky3);font-size:15px;font-weight:400;height:24px;line-height:24px;margin:0 auto;text-align:center;text-transform:capitalize;width:20px}.mfui-month_modern .mfui-month__days{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;display:grid;grid-template-columns:repeat(7,1fr);margin-top:10px;row-gap:0;width:100%}

package/dist/es/components/Calendar/components/_Month/Month.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { FirstDayOfWeek, MonthType, UseMonthResult } from '@datepicker-react/hooks';
+import './Month.scss';
+export interface IMonthPickerProps {
+    firstDayOfWeek: FirstDayOfWeek;
+    activeMonths: MonthType[];
+    goToPreviousMonths: () => void;
+    goToNextMonths: () => void;
+}
+export interface IMonthProps {
+    dataAttrs?: {
+        root?: Record<string, string>;
+        arrowLeft?: Record<string, string>;
+        arrowRight?: Record<string, string>;
+    };
+    isPrevMonthDisabled: boolean;
+    isNextMonthDisabled: boolean;
+    year: number;
+    month: number;
+    firstDayOfWeek?: FirstDayOfWeek;
+    goToPreviousMonth: () => void;
+    goToNextMonth: () => void;
+    isModern?: boolean;
+    renderDays: (days: UseMonthResult['days']) => React.ReactNode;
+}
+declare const Month: React.FC<IMonthProps>;
+export default Month;

package/dist/es/components/Calendar/components/_Month/Month.js

@@ -0,0 +1,117 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { useMonth } from '@datepicker-react/hooks';
+import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import format from 'date-fns/format';
+import ruLocale from 'date-fns/locale/ru';
+import "./Month.css";
+var ArrowLeft = function ArrowLeft(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12 6v8l-5-4z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+var ArrowRight = function ArrowRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8 14V6l5 4z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+var formatDate = function formatDate(date, pattern) {
+  var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ruLocale;
+  return format(date, pattern, {
+    locale: locale
+  });
+};
+var weekdayLabelFormat = function weekdayLabelFormat(date) {
+  return formatDate(date, 'EEEEEE');
+};
+var dayLabelFormat = function dayLabelFormat(date) {
+  return formatDate(date, 'd');
+};
+var monthLabelFormat = function monthLabelFormat(date) {
+  return formatDate(date, 'LLLL');
+};
+var cn = cnCreate('mfui-month');
+var Month = function Month(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    isPrevMonthDisabled = _ref.isPrevMonthDisabled,
+    isNextMonthDisabled = _ref.isNextMonthDisabled,
+    year = _ref.year,
+    month = _ref.month,
+    firstDayOfWeek = _ref.firstDayOfWeek,
+    goToPreviousMonth = _ref.goToPreviousMonth,
+    goToNextMonth = _ref.goToNextMonth,
+    _ref$isModern = _ref.isModern,
+    isModern = _ref$isModern === void 0 ? false : _ref$isModern,
+    renderDays = _ref.renderDays;
+  var _useMonth = useMonth({
+      year: year,
+      month: month,
+      firstDayOfWeek: firstDayOfWeek,
+      dayLabelFormat: dayLabelFormat,
+      weekdayLabelFormat: weekdayLabelFormat,
+      monthLabelFormat: monthLabelFormat
+    }),
+    days = _useMonth.days,
+    weekdayLabels = _useMonth.weekdayLabels,
+    monthLabel = _useMonth.monthLabel;
+  var handleArrowLeftClick = function handleArrowLeftClick(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      !isPrevMonthDisabled && goToPreviousMonth();
+    }
+  };
+  var handleArrowRightClick = function handleArrowRightClick(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      !isNextMonthDisabled && goToNextMonth();
+    }
+  };
+  var getTabIndex = function getTabIndex(hasFocus) {
+    var tabIndexWithFocus = 0;
+    var tabIndexWithoutFocus = -1;
+    return hasFocus ? tabIndexWithFocus : tabIndexWithoutFocus;
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      modern: isModern
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, !isModern && /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft), {
+    role: "button",
+    tabIndex: getTabIndex(!isPrevMonthDisabled),
+    className: cn('arrow', {
+      disabled: isPrevMonthDisabled
+    }),
+    onKeyDown: handleArrowLeftClick,
+    onClick: handleArrowLeftClick
+  })), /*#__PURE__*/React.createElement("span", {
+    className: cn('title')
+  }, "".concat(monthLabel, " ").concat(year)), !isModern && /*#__PURE__*/React.createElement(ArrowRight, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight), {
+    role: "button",
+    tabIndex: getTabIndex(!isNextMonthDisabled),
+    className: cn('arrow', {
+      disabled: isNextMonthDisabled
+    }),
+    onKeyDown: handleArrowRightClick,
+    onClick: handleArrowRightClick
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: cn('weekday-labels')
+  }, weekdayLabels.map(function (dayLabel, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('weekday'),
+      key: dayLabel + index
+    }, dayLabel);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('days')
+  }, renderDays(days)));
+};
+export default Month;

package/dist/es/components/Caption/Caption.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-caption{font-family:inherit;font-size:12px;line-height:18px;margin:0}.mfui-caption_variant_normal{font-weight:400}.mfui-caption_variant_medium{font-weight:500}.mfui-caption_space_wide{line-height:18px}.mfui-caption_space_tight{line-height:14px}.mfui-caption_align_left{text-align:left}.mfui-caption_align_center{text-align:center}.mfui-caption_align_right{text-align:right}.mfui-caption_has-margin{margin:0 0 16px}.mfui-caption_color_inherit{color:inherit}.mfui-caption_color_default{color:var(--content)}.mfui-caption_color_gray{color:var(--spbSky3)}.mfui-caption_color_white{color:var(--stcWhite)}.mfui-caption_color_green{color:var(--brandGreen)}.mfui-caption_color_purple{color:var(--brandPurple)}

package/dist/es/components/Caption/Caption.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import './Caption.scss';
+declare const COLORS: {
+    readonly INHERIT: "inherit";
+    readonly DEFAULT: "default";
+    readonly GRAY: "gray";
+    readonly WHITE: "white";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+type ColorType = (typeof COLORS)[keyof typeof COLORS];
+export interface ICaptionProps {
+    /** Выравнивание по горизонтали */
+    align?: 'left' | 'center' | 'right';
+    /** Поведение текста при встраивании в широкий или узкий контейнер */
+    space?: 'wide' | 'tight';
+    /** Начертание шрифта: обычный или полужирный */
+    variant?: 'normal' | 'medium';
+    /** Вертикальный отступ */
+    hasMargin?: boolean;
+    /** Цвет текста */
+    color?: ColorType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    /** Дочерние элементы */
+    children?: React.ReactNode;
+}
+declare const Caption: React.FC<ICaptionProps>;
+export default Caption;

package/dist/es/components/Caption/Caption.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./Caption.css";
+var COLORS = {
+  INHERIT: 'inherit',
+  DEFAULT: 'default',
+  GRAY: 'gray',
+  WHITE: 'white',
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+var cn = cnCreate('mfui-caption');
+var Caption = function Caption(_ref) {
+  var align = _ref.align,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$space = _ref.space,
+    space = _ref$space === void 0 ? 'wide' : _ref$space,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
+    className = _ref.className,
+    _ref$hasMargin = _ref.hasMargin,
+    hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("p", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      align: align,
+      color: color,
+      space: space,
+      variant: variant,
+      'has-margin': hasMargin
+    }, className)
+  }), children);
+};
+export default Caption;

package/dist/es/components/Carousel/Carousel.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-carousel,.mfui-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-carousel__swiper{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-20px 0 -25px;overflow:hidden;padding:20px 0 25px}@media screen and (min-width:1024px){.mfui-carousel__swiper{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-carousel__swiper_gradient:after,.mfui-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}.mfui-carousel__swiper_gradient:before{background:-webkit-gradient(linear,right top,left top,from(rgba(var(--gradientColorRGB),0)),to(var(--gradientColor)));background:linear-gradient(270deg,rgba(var(--gradientColorRGB),0) 0,var(--gradientColor) 100%);left:0}.mfui-carousel__swiper_gradient:after{background:-webkit-gradient(linear,right top,left top,from(var(--gradientColor)),to(rgba(var(--gradientColorRGB),0)));background:linear-gradient(270deg,var(--gradientColor) 0,rgba(var(--gradientColorRGB),0) 100%);right:0}.mfui-carousel__swiper_gradient-color_default{--gradientColor:var(--background);--gradientColorRGB:var(--background-rgb)}.mfui-carousel__swiper_gradient-color_green{--gradientColor:var(--brandGreen);--gradientColorRGB:var(--brandGreen-rgb)}.mfui-carousel__swiper_gradient-color_black{--gradientColor:var(--stcBlack);--gradientColorRGB:var(--stcBlack-rgb)}.mfui-carousel__swiper_gradient-color_spbSky0{--gradientColor:var(--spbSky0);--gradientColorRGB:var(--spbSky0-rgb)}.mfui-carousel__swiper_gradient-color_spbSky1{--gradientColor:var(--spbSky1);--gradientColorRGB:var(--spbSky1-rgb)}.mfui-carousel__swiper_gradient-color_spbSky2{--gradientColor:var(--spbSky2);--gradientColorRGB:var(--spbSky2-rgb)}.mfui-carousel .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1}.mfui-carousel__slide{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width:1024px){.mfui-carousel__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-carousel .swiper-slide-visible{opacity:1;-webkit-transition:opacity .4s;transition:opacity .4s}}.mfui-carousel__arrow{position:absolute;top:50%;-webkit-transform:translateY(calc(-50% - 20px));transform:translateY(calc(-50% - 20px));z-index:6}@media screen and (max-width:1023px){.mfui-carousel__arrow{display:none}}.mfui-carousel__arrow_prev{right:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-carousel__arrow_prev{right:calc(100% + 20px)}}.mfui-carousel__arrow_next{left:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-carousel__arrow_next{left:calc(100% + 20px)}}.mfui-carousel__arrow_locked{display:none}.mfui-carousel .swiper-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-self:center;-webkit-box-ordinal-group:3;-ms-flex-order:2;border-radius:12px;order:2;padding-top:32px;width:100%}.mfui-carousel .swiper-pagination.swiper-pagination-lock{display:none}.mfui-carousel .swiper-pagination-bullet{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:8px;justify-content:center;-webkit-transition:all .5s,background-color .3s;transition:all .5s,background-color .3s;width:8px}.mfui-carousel .swiper-pagination-bullet:before{border-radius:50%;content:"";display:block;height:100%;-webkit-transition:border-radius .5s;transition:border-radius .5s;width:100%}.mfui-carousel_nav-theme_green .swiper-pagination-bullet:before{background-color:var(--stcWhite50)}.mfui-carousel_nav-theme_light .swiper-pagination-bullet:before{background-color:var(--spbSky2)}.mfui-carousel .swiper-pagination-bullet-active{cursor:default;-webkit-transform:scaleX(2.3);transform:scaleX(2.3)}.mfui-carousel .swiper-pagination-bullet-active:before{border-radius:40%}.mfui-carousel_nav-theme_green .swiper-pagination-bullet-active:before{background-color:var(--base)}.mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before{background-color:var(--brandGreen)}

package/dist/es/components/Carousel/Carousel.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import type { SwiperClass } from 'swiper/react';
+import { PaginationOptions } from 'swiper/types';
+import { ThemeType as ArrowThemeType } from '../NavArrow/NavArrow';
+import './Carousel.scss';
+export declare const NavTheme: {
+    readonly LIGHT: "light";
+    readonly GREEN: "green";
+};
+export declare const EffectTheme: {
+    readonly SLIDE: "slide";
+    readonly FADE: "fade";
+};
+declare const SlidesPerView: {
+    readonly AUTO: "auto";
+};
+declare const GradientTheme: {
+    readonly DEFAULT: "default";
+    readonly GREEN: "green";
+    readonly BLACK: "black";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_2: "spbSky2";
+};
+type SlidesPerViewType = (typeof SlidesPerView)[keyof typeof SlidesPerView];
+type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
+type EffectThemeType = (typeof EffectTheme)[keyof typeof EffectTheme];
+type GradientThemeType = (typeof GradientTheme)[keyof typeof GradientTheme];
+export type SlidesSettingsType = {
+    [key: number]: {
+        slidesPerView: number | SlidesPerViewType;
+        slidesPerGroup?: number;
+        spaceBetween: number;
+    };
+};
+export interface ICarouselProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительные классы для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        innerIndents?: string;
+        container?: string;
+        containerModifier?: string;
+        prev?: string;
+        next?: string;
+        slide?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        slider?: Record<string, string>;
+        prev?: Record<string, string>;
+        next?: Record<string, string>;
+        slide?: Record<string, string>;
+    };
+    /** Настройки слайдов */
+    slidesSettings?: SlidesSettingsType;
+    /** Смена слайдов с зацикливанием */
+    loop?: boolean;
+    /** Автоматическая прокрутка */
+    autoPlay?: boolean;
+    /** Настройки пагинации */
+    pagination?: PaginationOptions;
+    /** Задержка для авто прокрутки */
+    autoPlayDelay?: number;
+    /** Скорость смены слайдов */
+    transitionSpeed?: number;
+    /** Пороговое значение свайпа при котором выполняется сдвиг слайдов в карусели */
+    threshold?: number;
+    /** Порядковый номер первого видимого слайда */
+    initialSlide?: number;
+    /** Отключение смены слайда свайпами */
+    disableTouchMove?: boolean;
+    /** Активный слайд по центру экрана */
+    centeredSlides?: boolean;
+    /** Тема навигации */
+    navTheme?: NavThemeType;
+    /** Эффект анимации */
+    effectTheme?: EffectThemeType;
+    /** Отключение стрелок */
+    disableArrows?: boolean;
+    /** Тема стрелок */
+    arrowTheme?: ArrowThemeType;
+    /** Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов */
+    noSwipingSelector?: string;
+    /** Свайп к слайду, по которому произведен клик */
+    slideToClickedSlide?: boolean;
+    /** Ref на swiper */
+    getSwiper?: (instance: SwiperClass) => void;
+    /** Обработчик клика по стрелке вперед (должен быть обернут в useCallback) */
+    onNextClick?: (index: number) => void;
+    /** Обработчик клика по стрелке назад (должен быть обернут в useCallback) */
+    onPrevClick?: (index: number) => void;
+    /** Обработчик смены слайда (должен быть обернут в useCallback) */
+    onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
+    /** Наличие градиента по краям контейнера */
+    gradient?: boolean;
+    /** Цвет градиента */
+    gradientColor?: GradientThemeType;
+    /** Отключить переключение слайдов при фокусе на дочерних элементах */
+    disableChildFocusPropagation?: boolean;
+    children?: React.ReactNode;
+}
+declare const Carousel: React.FC<ICarouselProps>;
+export default Carousel;