@megafon/ui-core 8.17.1 → 8.17.3

package/dist/es/components/Carousel/Carousel.js

@@ -0,0 +1,387 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.date.to-string.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.regexp.test.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import throttle from 'lodash.throttle';
+import throttleTime from "../../constants/throttleTime";
+import usePrevious from "../../hooks/usePrevious";
+import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
+import useGradient from "./useGradient";
+import "./Carousel.css";
+var Autoplay = null;
+var Pagination = null;
+var EffectFade = null;
+var FreeMode = null;
+var Swiper = null;
+var SwiperSlide = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+  var SwiperAll = require('swiper/react');
+  // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+  var Modules = require('swiper/modules');
+  Swiper = SwiperAll.Swiper;
+  SwiperSlide = SwiperAll.SwiperSlide;
+  Autoplay = Modules.Autoplay;
+  Pagination = Modules.Pagination;
+  EffectFade = Modules.EffectFade;
+  FreeMode = Modules.FreeMode;
+} catch (e) {
+  // eslint-disable-next-line no-console
+  console.warn("\n        WARNING: megafon/ui-core is using the latest version of swiper.\n        For more information about server-side rendering\n        please check the Carousel component documentation at:\n        https://ui.megafon.ru/components/carousel\n    ");
+}
+export var NavTheme = {
+  LIGHT: 'light',
+  GREEN: 'green'
+};
+export var EffectTheme = {
+  SLIDE: 'slide',
+  FADE: 'fade'
+};
+var SlidesPerView = {
+  AUTO: 'auto'
+};
+var GradientTheme = {
+  DEFAULT: 'default',
+  GREEN: 'green',
+  BLACK: 'black',
+  SPB_SKY_0: 'spbSky0',
+  SPB_SKY_1: 'spbSky1',
+  SPB_SKY_2: 'spbSky2'
+};
+var getAutoPlayConfig = function getAutoPlayConfig(delay) {
+  return {
+    delay: delay,
+    waitForTransition: false,
+    disableOnInteraction: false,
+    stopOnLastSlide: true
+  };
+};
+var defaultSlidesSettings = _defineProperty(_defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 16
+}), breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 3,
+  spaceBetween: 20
+}), breakpoints.DESKTOP_MIDDLE_START, {
+  slidesPerView: 4,
+  spaceBetween: 20
+});
+var cn = cnCreate('mfui-carousel');
+var Carousel = function Carousel(_ref) {
+  var rootRef = _ref.rootRef,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    rootClass = _ref$classes2.root,
+    innerIndentsClass = _ref$classes2.innerIndents,
+    prevClass = _ref$classes2.prev,
+    nextClass = _ref$classes2.next,
+    containerClass = _ref$classes2.container,
+    containerModifier = _ref$classes2.containerModifier,
+    slideClass = _ref$classes2.slide,
+    dataAttrs = _ref.dataAttrs,
+    _ref$slidesSettings = _ref.slidesSettings,
+    slidesSettings = _ref$slidesSettings === void 0 ? defaultSlidesSettings : _ref$slidesSettings,
+    _ref$autoPlay = _ref.autoPlay,
+    autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
+    _ref$autoPlayDelay = _ref.autoPlayDelay,
+    autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
+    _ref$loop = _ref.loop,
+    loop = _ref$loop === void 0 ? false : _ref$loop,
+    _ref$transitionSpeed = _ref.transitionSpeed,
+    transitionSpeed = _ref$transitionSpeed === void 0 ? 300 : _ref$transitionSpeed,
+    threshold = _ref.threshold,
+    _ref$initialSlide = _ref.initialSlide,
+    initialSlide = _ref$initialSlide === void 0 ? 1 : _ref$initialSlide,
+    _ref$disableTouchMove = _ref.disableTouchMove,
+    disableTouchMove = _ref$disableTouchMove === void 0 ? false : _ref$disableTouchMove,
+    _ref$centeredSlides = _ref.centeredSlides,
+    centeredSlides = _ref$centeredSlides === void 0 ? false : _ref$centeredSlides,
+    _ref$navTheme = _ref.navTheme,
+    navTheme = _ref$navTheme === void 0 ? 'light' : _ref$navTheme,
+    _ref$effectTheme = _ref.effectTheme,
+    effectTheme = _ref$effectTheme === void 0 ? 'slide' : _ref$effectTheme,
+    _ref$disableArrows = _ref.disableArrows,
+    disableArrows = _ref$disableArrows === void 0 ? false : _ref$disableArrows,
+    _ref$arrowTheme = _ref.arrowTheme,
+    arrowTheme = _ref$arrowTheme === void 0 ? ArrowTheme.PURPLE : _ref$arrowTheme,
+    noSwipingSelector = _ref.noSwipingSelector,
+    children = _ref.children,
+    pagination = _ref.pagination,
+    getSwiper = _ref.getSwiper,
+    onNextClick = _ref.onNextClick,
+    onPrevClick = _ref.onPrevClick,
+    onChange = _ref.onChange,
+    _ref$slideToClickedSl = _ref.slideToClickedSlide,
+    slideToClickedSlide = _ref$slideToClickedSl === void 0 ? false : _ref$slideToClickedSl,
+    _ref$gradient = _ref.gradient,
+    gradient = _ref$gradient === void 0 ? false : _ref$gradient,
+    _ref$gradientColor = _ref.gradientColor,
+    gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor,
+    _ref$disableChildFocu = _ref.disableChildFocusPropagation,
+    disableChildFocusPropagation = _ref$disableChildFocu === void 0 ? false : _ref$disableChildFocu;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    swiperInstance = _React$useState2[0],
+    setSwiperInstance = _React$useState2[1];
+  var _React$useState3 = React.useState(true),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isBeginning = _React$useState4[0],
+    setBeginning = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isEnd = _React$useState6[0],
+    setEnd = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isLocked = _React$useState8[0],
+    setLocked = _React$useState8[1];
+  var childrenLen = Array.isArray(children) ? children.length : 0;
+  var prevChildrenLen = usePrevious(childrenLen) || 0;
+  var isChildrenLenDiff = childrenLen !== prevChildrenLen;
+  var gradientStyles = useGradient(gradient, {
+    instance: swiperInstance,
+    slidesSettings: slidesSettings,
+    isLocked: isLocked
+  });
+  var increaseAutoplayDelay = React.useCallback(function (_ref2) {
+    var params = _ref2.params,
+      autoplay = _ref2.autoplay;
+    if (_typeof(params.autoplay) !== 'object' || !autoplay.running) {
+      return;
+    }
+    autoplay.stop();
+    // eslint-disable-next-line no-param-reassign
+    params.autoplay.delay = autoPlayDelay * 3;
+    autoplay.start();
+  }, [autoPlayDelay]);
+  var handlePrevClick = React.useCallback(function () {
+    if (!swiperInstance) {
+      return;
+    }
+    swiperInstance.slidePrev();
+    onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
+    increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
+  var handleNextClick = React.useCallback(function () {
+    if (!swiperInstance) {
+      return;
+    }
+    swiperInstance.slideNext();
+    onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
+    increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, onNextClick, increaseAutoplayDelay]);
+  var handleSwiper = React.useCallback(function (swiper) {
+    setSwiperInstance(swiper);
+    setLocked(swiper.isBeginning && swiper.isEnd);
+    getSwiper === null || getSwiper === void 0 ? void 0 : getSwiper(swiper);
+  }, [getSwiper]);
+  var handleReachBeginnig = React.useCallback(function () {
+    setBeginning(true);
+  }, []);
+  var handleReachEnd = React.useCallback(function (_ref3) {
+    var params = _ref3.params,
+      autoplay = _ref3.autoplay;
+    setEnd(true);
+    if (!params.loop && autoplay.running) {
+      autoplay.stop();
+    }
+  }, []);
+  var handleFromEdge = React.useCallback(function (swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+  }, []);
+  var handleSlideChange = React.useCallback(function (_ref4) {
+    var realIndex = _ref4.realIndex,
+      previousIndex = _ref4.previousIndex,
+      params = _ref4.params;
+    onChange === null || onChange === void 0 ? void 0 : onChange(realIndex, previousIndex, params.slidesPerView);
+  }, [onChange]);
+  var handleRootClick = function handleRootClick(e) {
+    var elem = e.target;
+    var isBullet = elem.classList.contains('swiper-pagination-bullet');
+    if (isBullet && swiperInstance) {
+      increaseAutoplayDelay(swiperInstance);
+    }
+  };
+  var handleNavDisplay = function handleNavDisplay(swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+    setLocked(swiper.isBeginning && swiper.isEnd);
+  };
+  // https://github.com/nolimits4web/Swiper/issues/2346
+  var handleSwiperResize = React.useCallback(function () {
+    throttle(function (swiper) {
+      handleNavDisplay(swiper);
+      if (swiper.params.slidesPerView === SlidesPerView.AUTO) {
+        var _iterator = _createForOfIteratorHelper(swiper.slides),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var slide = _step.value;
+            slide.style.width = '';
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+    }, throttleTime.resize);
+  }, []);
+  var handleSlideFocus = function handleSlideFocus(index) {
+    return function (e) {
+      var _a;
+      if (disableChildFocusPropagation && e.target !== e.currentTarget) {
+        return;
+      }
+      if (loop) {
+        // for correctly scroll the looped carousel to the focused element, we need to get its real index in the DOM-collection of slides
+        // because swiper does not provide this, only data-swiper-slide-index, whose values are in the range from 0 to children.length - 1,
+        // but method slideTo needs to be passed a real slide index in DOM-collection
+        var slideSelector = ".".concat(cn('slide'));
+        var slide = e.nativeEvent.target.closest(slideSelector);
+        var realIndex = Array.prototype.indexOf.call((_a = slide === null || slide === void 0 ? void 0 : slide.parentNode) === null || _a === void 0 ? void 0 : _a.children, slide);
+        swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(realIndex);
+        return;
+      }
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(index);
+    };
+  };
+  var disableFocusOnSlideClick = function disableFocusOnSlideClick(e) {
+    if (e.nativeEvent.target.closest(".".concat(cn()))) {
+      e.nativeEvent.preventDefault();
+    }
+  };
+  React.useEffect(function () {
+    if (!swiperInstance) {
+      return undefined;
+    }
+    var windowResizeHandler = function windowResizeHandler() {
+      return handleNavDisplay(swiperInstance);
+    };
+    var windowResizeHandlerThrottled = throttle(windowResizeHandler, throttleTime.resize);
+    window.addEventListener('resize', windowResizeHandlerThrottled);
+    return function () {
+      windowResizeHandlerThrottled.cancel();
+      window.removeEventListener('resize', windowResizeHandlerThrottled);
+    };
+  }, [slidesSettings, swiperInstance]);
+  React.useEffect(function () {
+    if (swiperInstance && isChildrenLenDiff) {
+      handleNavDisplay(swiperInstance);
+    }
+  }, [isChildrenLenDiff, swiperInstance]);
+  if (!Swiper || !Autoplay || !SwiperSlide) {
+    return null;
+  }
+  var swiperModules = [];
+  if (Autoplay) {
+    swiperModules.push(Autoplay);
+  }
+  if (Pagination) {
+    swiperModules.push(Pagination);
+  }
+  if (EffectFade) {
+    swiperModules.push(EffectFade);
+  }
+  if (FreeMode) {
+    swiperModules.push(FreeMode);
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef,
+    className: cn({
+      'nav-theme': navTheme
+    }, [className, rootClass]),
+    onClick: handleRootClick,
+    style: gradientStyles
+  }), /*#__PURE__*/React.createElement(Swiper, _extends({}, containerModifier ? {
+    containerModifierClass: containerModifier
+  } : {}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
+    className: cn('swiper', {
+      'default-inner-indents': !innerIndentsClass,
+      gradient: gradient,
+      'gradient-color': gradient && gradientColor
+    }, [innerIndentsClass, containerClass]),
+    breakpoints: slidesSettings,
+    watchSlidesProgress: true,
+    watchOverflow: true,
+    modules: swiperModules,
+    loop: loop,
+    pagination: _extends({
+      clickable: true
+    }, pagination),
+    autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
+    speed: transitionSpeed,
+    threshold: threshold,
+    initialSlide: initialSlide - 1,
+    allowTouchMove: !disableTouchMove,
+    centeredSlides: centeredSlides,
+    effect: effectTheme,
+    slideToClickedSlide: slideToClickedSlide,
+    fadeEffect: effectTheme === EffectTheme.FADE ? {
+      crossFade: effectTheme === EffectTheme.FADE
+    } : undefined,
+    touchMoveStopPropagation: true,
+    noSwipingSelector: noSwipingSelector ? ".swiper-pagination, ".concat(noSwipingSelector) : '.swiper-pagination',
+    onSwiper: handleSwiper,
+    onReachBeginning: handleReachBeginnig,
+    onReachEnd: handleReachEnd,
+    onFromEdge: handleFromEdge,
+    onSlideChange: handleSlideChange,
+    onTouchEnd: increaseAutoplayDelay,
+    onResize: handleSwiperResize
+  }), React.Children.map(children, function (child, i) {
+    return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
+      key: i,
+      className: cn('slide', slideClass),
+      tabIndex: disableChildFocusPropagation ? 0 : undefined,
+      onFocus: handleSlideFocus(i),
+      onMouseDown: disableFocusOnSlideClick
+    }), child);
+  })), /*#__PURE__*/React.createElement(NavArrow, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
+    },
+    className: cn('arrow', {
+      prev: true,
+      locked: isLocked || !loop && isBeginning || disableArrows
+    }, [prevClass]),
+    onClick: handlePrevClick,
+    theme: arrowTheme
+  }), /*#__PURE__*/React.createElement(NavArrow, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
+    },
+    className: cn('arrow', {
+      next: true,
+      locked: isLocked || !loop && isEnd || disableArrows
+    }, [nextClass]),
+    view: "next",
+    onClick: handleNextClick,
+    theme: arrowTheme
+  }));
+};
+export default Carousel;

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

@@ -0,0 +1,5 @@
+type ObjectType = {
+    [key: string]: unknown;
+};
+declare const checkBreakpointsPropTypes: (settingsPropTypes: ObjectType) => (object: ObjectType, key: string, componentName: string) => Error | null;
+export default checkBreakpointsPropTypes;

package/dist/es/components/Carousel/checkBreakpointsPropTypes.js

@@ -0,0 +1,14 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.number.constructor.js";
+import * as PropTypes from 'prop-types';
+var checkBreakpointsPropTypes = function checkBreakpointsPropTypes(settingsPropTypes) {
+  return function (object, key, componentName) {
+    if (!object[Number(key)]) {
+      return new Error("Invalid key name 'breakpoints.".concat(key, "' of type ").concat(_typeof(key), " supplied to ").concat(componentName, ", expected number"));
+    }
+    PropTypes.checkPropTypes(settingsPropTypes, object[key], 'prop', componentName);
+    return null;
+  };
+};
+export default checkBreakpointsPropTypes;

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+import SwiperCore from 'swiper';
+import { SlidesSettingsType } from './Carousel';
+type SwiperConfig = {
+    instance: SwiperCore | undefined;
+    slidesSettings: SlidesSettingsType;
+    isLocked: boolean;
+};
+declare const _default: (gradient: boolean, swiper: SwiperConfig) => CSSProperties;
+export default _default;

package/dist/es/components/Carousel/useGradient.js

@@ -0,0 +1,36 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+import throttle from 'lodash.throttle';
+import throttleTime from "../../constants/throttleTime";
+export default (function (gradient, swiper) {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    slidesGap = _useState2[0],
+    setSlidesGap = _useState2[1];
+  var swiperInstance = swiper.instance,
+    slidesSettings = swiper.slidesSettings,
+    isLocked = swiper.isLocked;
+  var isGradientEnable = gradient && !isLocked;
+  useEffect(function () {
+    var isPossibleToSetGap = isGradientEnable && swiperInstance;
+    if (!isPossibleToSetGap) {
+      return undefined;
+    }
+    var setCurrentSlidesGap = function setCurrentSlidesGap() {
+      var _a;
+      var currentBreakpoint = swiperInstance.currentBreakpoint;
+      var currentSpaceBetweenValue = (_a = slidesSettings[currentBreakpoint]) === null || _a === void 0 ? void 0 : _a.spaceBetween;
+      setSlidesGap(currentSpaceBetweenValue);
+    };
+    setCurrentSlidesGap();
+    var throttledHandler = throttle(setCurrentSlidesGap, throttleTime.resize);
+    window.addEventListener('resize', throttledHandler);
+    return function () {
+      window.removeEventListener('resize', throttledHandler);
+    };
+  }, [gradient, slidesSettings, swiperInstance, isLocked, isGradientEnable]);
+  var gradientStyles = {
+    '--gap': "".concat(slidesGap, "px")
+  };
+  return isGradientEnable ? gradientStyles : {};
+});

package/dist/es/components/Checkbox/Checkbox.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-checkbox_bottom-margin{margin-bottom:12px}.mfui-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-checkbox_single .mfui-checkbox__inner{padding-left:32px}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding-top:3px}.mfui-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding-top:6px}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import './Checkbox.scss';
+export interface ICheckboxProps {
+    /** Цвет чекбокса */
+    color?: 'dark' | 'light';
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        inner?: string;
+        icon?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+        input?: Record<string, string>;
+        customInput?: Record<string, string>;
+        extraContent?: Record<string, string>;
+    };
+    /** Размер текста */
+    fontSize?: 'regular' | 'small';
+    /** Имя компонента в DOM */
+    name?: string;
+    /** Значение чекбокса */
+    value?: string;
+    /** Управление состоянием вкл/выкл компонента */
+    checked?: boolean;
+    /** Отключение чекбокса */
+    disabled?: boolean;
+    /** Отобразить компонент в состоянии ошибки */
+    error?: boolean;
+    /** Дополнительный контент справа */
+    extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
+    /** Отключить нижний отступ */
+    disableBottomMargin?: boolean;
+    children?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
+    /** Обработчик изменения значения */
+    onChange?: (checked: boolean) => void;
+}
+declare const Checkbox: React.FC<ICheckboxProps>;
+export default Checkbox;

package/dist/es/components/Checkbox/Checkbox.js

@@ -0,0 +1,86 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.function.name.js";
+import * as React from 'react';
+import { checkEventIsClickOrEnterPress, cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
+import "./Checkbox.css";
+var CheckedIcon = function CheckedIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
+  }));
+};
+var CHANGE_KEY = 'change';
+var cn = cnCreate('mfui-checkbox');
+var Checkbox = function Checkbox(_ref) {
+  var className = _ref.className,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 'regular' : _ref$fontSize,
+    name = _ref.name,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'dark' : _ref$color,
+    value = _ref.value,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    disabled = _ref.disabled,
+    error = _ref.error,
+    children = _ref.children,
+    extraContent = _ref.extraContent,
+    dataAttrs = _ref.dataAttrs,
+    classes = _ref.classes,
+    _ref$disableBottomMar = _ref.disableBottomMargin,
+    disableBottomMargin = _ref$disableBottomMar === void 0 ? false : _ref$disableBottomMar,
+    onChange = _ref.onChange;
+  var isTouch = detectTouch();
+  var _React$useState = React.useState(checked),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isChecked = _React$useState2[0],
+    setIsChecked = _React$useState2[1];
+  React.useEffect(function () {
+    setIsChecked(checked);
+  }, [checked]);
+  var handleChange = function handleChange(e) {
+    if (checkEventIsClickOrEnterPress(e) || e.type === CHANGE_KEY) {
+      setIsChecked(!isChecked);
+      onChange === null || onChange === void 0 ? void 0 : onChange(!isChecked);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('', {
+      'font-size': fontSize,
+      color: color,
+      checked: isChecked,
+      disabled: disabled,
+      error: error,
+      'bottom-margin': !disableBottomMargin,
+      single: !children && !extraContent
+    }, className)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), /*#__PURE__*/React.createElement("label", {
+    className: cn('label', {
+      'no-touch': !isTouch
+    })
+  }, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    className: cn('input'),
+    type: "checkbox",
+    tabIndex: -1,
+    name: name,
+    value: value,
+    checked: isChecked,
+    onChange: handleChange,
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput), {
+    tabIndex: 0,
+    role: "checkbox",
+    "aria-checked": isChecked,
+    className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon]),
+    onKeyDown: handleChange
+  }), /*#__PURE__*/React.createElement(CheckedIcon, {
+    className: cn('icon')
+  })), children), extraContent && /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraContent), {
+    className: cn('extra-content')
+  }), extraContent)));
+};
+export default Checkbox;

package/dist/es/components/Chips/Chip.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-chip{padding:4px 12px}}.mfui-chip:hover{background-color:var(--spbSky1)}.mfui-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-chip__counter{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-chip__counter{margin-left:4px}}.mfui-chip__icon,.mfui-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-chip__icon svg,.mfui-chip__icon-arrow svg{display:block;height:100%;width:100%}.mfui-chip__icon{margin-right:6px}@media screen and (max-width:767px){.mfui-chip__icon{margin-right:4px}}.mfui-chip_disabled,.mfui-chip_disabled:hover{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-chip_disabled svg,.mfui-chip_disabled:hover svg{fill:var(--spbSky3)}.mfui-chip_disabled .mfui-chip__counter,.mfui-chip_disabled:hover .mfui-chip__counter{color:var(--spbSky2)}.mfui-chip_checked,.mfui-chip_checked:hover{background-color:var(--night);color:var(--stcWhite)}.mfui-chip_checked svg,.mfui-chip_checked:hover svg{fill:var(--stcWhite)}.mfui-chip_checked .mfui-chip__counter,.mfui-chip_checked:hover .mfui-chip__counter{color:var(--stcWhite)}.mfui-chip_checked.mfui-chip_color_black,.mfui-chip_checked.mfui-chip_color_black:hover{background-color:var(--content);color:var(--base)}.mfui-chip_checked.mfui-chip_color_black svg,.mfui-chip_checked.mfui-chip_color_black:hover svg{fill:var(--base)}.mfui-chip_checked.mfui-chip_color_black .mfui-chip__counter,.mfui-chip_checked.mfui-chip_color_black:hover .mfui-chip__counter{color:var(--base)}.mfui-chip_with-icon{padding-left:16px}@media screen and (max-width:767px){.mfui-chip_with-icon{padding-left:8px}}

package/dist/es/components/Chips/Chip.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import './Chip.scss';
+export type ChipIdType = number | string;
+export declare const ChipColors: {
+    readonly DEFAULT: "default";
+    readonly BLACK: "black";
+};
+export type ChipColorsType = (typeof ChipColors)[keyof typeof ChipColors];
+export declare const ChipArrow: {
+    readonly UP: "up";
+    readonly DOWN: "down";
+};
+export type ChipArrowType = (typeof ChipArrow)[keyof typeof ChipArrow];
+export interface IChipProps {
+    /** Идентификатор */
+    id: ChipIdType;
+    /** Заголовок */
+    title?: string;
+    /** Набор цветов для компонента */
+    color?: ChipColorsType;
+    /** Отображение в отмеченном (зажатом) состоянии */
+    checked?: boolean;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Значение счетчика */
+    counterValue?: number;
+    /** Стрелка вверх или вниз */
+    arrow?: ChipArrowType;
+    /** Обработчик нажатия */
+    onClick?: (e: React.SyntheticEvent<EventTarget>, id?: ChipIdType) => void;
+    /** Дочерние элементы */
+    children?: React.ReactNode;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        checked?: string;
+        inner?: string;
+        icon?: string;
+        counter?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+        icon?: Record<string, string>;
+        counter?: Record<string, string>;
+        arrow?: Record<string, string>;
+    };
+    /** Ссылка на элемент */
+    rootRef?: React.Ref<HTMLButtonElement>;
+}
+declare const Chip: React.FC<IChipProps>;
+export default Chip;