@megafon/ui-core 8.17.1 → 8.17.3

package/dist/lib/components/Snackbar/Snackbar.js

@@ -0,0 +1,242 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SnackbarTypes = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/web.timers.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _useSwipe2 = _interopRequireWildcard(require("../../hooks/useSwipe"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Caption = _interopRequireDefault(require("../Caption/Caption"));
+var _Header = _interopRequireDefault(require("../Header/Header"));
+var _Tile = _interopRequireDefault(require("../Tile/Tile"));
+var _SnackbarTimer = _interopRequireDefault(require("./SnackbarTimer/SnackbarTimer"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var HeartIcon16 = function HeartIcon16(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M13.25 3A3.78 3.78 0 0010 4.82 3.78 3.78 0 006.75 3C4.6 3 3 5.18 3 7.13a3.42 3.42 0 00.49 1.77c1.2 2 5 7.64 5.15 7.88l.15.22h2.51l.15-.22c.16-.24 4-5.83 5.1-7.92A4.14 4.14 0 0017 7.13C17 5.18 15.4 3 13.25 3zm2.41 5.4c-.94 1.81-4.16 6.53-4.89 7.59H9.32c-.73-1.09-3.92-5.87-5-7.62A2.42 2.42 0 014 7.13C4 5.71 5.23 4 6.75 4a2.73 2.73 0 012.67 2h1.15a2.73 2.73 0 012.67-2C14.77 4 16 5.71 16 7.13a3.14 3.14 0 01-.34 1.27z"
+  }));
+};
+var HeartIcon24 = function HeartIcon24(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M20.5 6A5.55 5.55 0 0016 8.27 5.55 5.55 0 0011.5 6C8.35 6 6 9.18 6 12a5 5 0 00.73 2.61c1.67 2.77 6.92 10.59 7.14 10.93l.3.44H18l.3-.43c.23-.33 5.58-8.09 7.09-11A6 6 0 0026 12c0-2.82-2.35-6-5.5-6zm3.07 7.65c-1.25 2.42-5.5 8.65-6.66 10.35h-1.68c-1.16-1.73-5.37-8-6.79-10.4A3 3 0 018 12c0-1.82 1.56-4 3.5-4a3.47 3.47 0 013.38 2.51h2.24A3.47 3.47 0 0120.5 8c1.94 0 3.5 2.2 3.5 4a4 4 0 01-.43 1.65z"
+  }));
+};
+var AttentionIcon16 = function AttentionIcon16(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M9 5h2v6H9V5zm1 8c-.2 0-.5.1-.7.3s-.3.4-.3.7.1.5.3.7.5.3.7.3.5-.1.7-.3.3-.4.3-.7-.1-.5-.3-.7c-.1-.2-.4-.3-.7-.3zm0 4c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zm-8-7c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8-8 3.6-8 8z"
+  }));
+};
+var CheckedIcon16 = function CheckedIcon16(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    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 AttentionIcon24 = function AttentionIcon24(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15 22h2v-2h-2v2zm0-4h2v-8h-2v8zm1 10C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zM6 16c0 5.5 4.5 10 10 10s10-4.5 10-10S21.5 6 16 6 6 10.5 6 16z"
+  }));
+};
+var CheckedIcon24 = function CheckedIcon24(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
+  }));
+};
+var CancelIcon = function CancelIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M20 18.586l6.364-6.364 1.414 1.414L21.414 20l6.364 6.364-1.414 1.414L20 21.414l-6.364 6.364-1.414-1.414L18.586 20l-6.364-6.364 1.414-1.414L20 18.586z"
+  }));
+};
+var DEFAULT_MAX_TIMER_SECONDS = 4;
+var CLOSE_DELAY_MS = 80;
+var SnackbarTypes = exports.SnackbarTypes = {
+  ATTENTION: 'attention',
+  SUCCESS: 'success',
+  TIMER: 'timer',
+  INFO: 'info'
+};
+var ATTENTION = SnackbarTypes.ATTENTION,
+  SUCCESS = SnackbarTypes.SUCCESS,
+  TIMER = SnackbarTypes.TIMER,
+  INFO = SnackbarTypes.INFO;
+var DEFAULT_SNACKBARS = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, ATTENTION, {
+  mobileIcon: /*#__PURE__*/React.createElement(AttentionIcon16, null),
+  desktopIcon: /*#__PURE__*/React.createElement(AttentionIcon24, null),
+  buttonText: 'Подробнее'
+}), SUCCESS, {
+  mobileIcon: /*#__PURE__*/React.createElement(CheckedIcon16, null),
+  desktopIcon: /*#__PURE__*/React.createElement(CheckedIcon24, null),
+  buttonText: 'Подробнее'
+}), TIMER, {
+  buttonText: 'Отмена'
+}), INFO, {
+  mobileIcon: /*#__PURE__*/React.createElement(HeartIcon16, null),
+  desktopIcon: /*#__PURE__*/React.createElement(HeartIcon24, null),
+  buttonText: 'Хорошо'
+});
+var cn = (0, _uiHelpers.cnCreate)('mfui-snackbar');
+var Snackbar = function Snackbar(_ref) {
+  var text = _ref.text,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? INFO : _ref$type,
+    icon = _ref.icon,
+    _ref$hasIcon = _ref.hasIcon,
+    hasIcon = _ref$hasIcon === void 0 ? true : _ref$hasIcon,
+    buttonText = _ref.buttonText,
+    _ref$maxTimerValue = _ref.maxTimerValue,
+    maxTimerValue = _ref$maxTimerValue === void 0 ? DEFAULT_MAX_TIMER_SECONDS : _ref$maxTimerValue,
+    _ref$hasTextButton = _ref.hasTextButton,
+    hasTextButton = _ref$hasTextButton === void 0 ? false : _ref$hasTextButton,
+    _ref$disableCloseAnim = _ref.disableCloseAnimation,
+    disableCloseAnimation = _ref$disableCloseAnim === void 0 ? false : _ref$disableCloseAnim,
+    _ref$disableAutoClose = _ref.disableAutoClose,
+    disableAutoClose = _ref$disableAutoClose === void 0 ? false : _ref$disableAutoClose,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    onClose = _ref.onClose,
+    onButtonClick = _ref.onButtonClick;
+  var _React$useState = React.useState(true),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isOpened = _React$useState2[0],
+    setIsOpened = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    containerRef = _React$useState4[0],
+    setContainerRef = _React$useState4[1];
+  var _useSwipe = (0, _useSwipe2["default"])(containerRef),
+    transform = _useSwipe.transform,
+    transitionStep = _useSwipe.transitionStep;
+  var isTransitionMoveStep = transitionStep === _useSwipe2.TransitionSteps.MOVE_STEP;
+  var isTransitionMoveEndStep = transitionStep === _useSwipe2.TransitionSteps.MOVE_END_STEP;
+  var defaultSnackbar = DEFAULT_SNACKBARS[type];
+  var isTimerType = type === TIMER;
+  var isInfoType = type === INFO;
+  var isHiddenIcon = isTimerType || !hasIcon && isInfoType;
+  var isCustomIcon = isInfoType && !!icon;
+  var currentButtonText = buttonText && !isTimerType ? buttonText : defaultSnackbar.buttonText;
+  var hideTimer = disableAutoClose && !isTimerType;
+  var setRef = function setRef(instance) {
+    return setContainerRef(instance);
+  };
+  var handleClose = React.useCallback(function () {
+    setIsOpened(false);
+  }, []);
+  React.useEffect(function () {
+    if (isOpened) {
+      return undefined;
+    }
+    if (disableCloseAnimation) {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+    var closeTimeoutId = setTimeout(function () {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, CLOSE_DELAY_MS);
+    return function () {
+      clearTimeout(closeTimeoutId);
+    };
+  }, [isOpened, disableCloseAnimation, onClose]);
+  React.useEffect(function () {
+    isTransitionMoveEndStep && handleClose();
+  }, [isTransitionMoveEndStep, handleClose]);
+  var handleTextButtonClick = React.useCallback(function () {
+    onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick();
+  }, [onButtonClick]);
+  var renderedTimer = React.useMemo(function () {
+    return /*#__PURE__*/React.createElement(_SnackbarTimer["default"], {
+      isTimerType: isTimerType,
+      maxTimerValue: maxTimerValue,
+      onTimerEnd: handleClose
+    });
+  }, [isTimerType, maxTimerValue, handleClose]);
+  var renderedIcons = React.useMemo(function () {
+    return isCustomIcon ? /*#__PURE__*/React.createElement("div", {
+      className: cn('icon-container', [classes.icon])
+    }, icon) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: cn('icon-container', {
+        mobile: true
+      }, [classes.icon])
+    }, defaultSnackbar.mobileIcon), /*#__PURE__*/React.createElement("div", {
+      className: cn('icon-container', {
+        desktop: true
+      }, [classes.icon])
+    }, defaultSnackbar.desktopIcon));
+  }, [isCustomIcon, icon, defaultSnackbar, classes]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      move: isTransitionMoveStep
+    }, [className, classes.root]),
+    ref: setRef,
+    style: transform !== 'none' ? {
+      transform: transform
+    } : undefined
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_Tile["default"], {
+    className: cn('tile', {
+      type: type,
+      closed: !isOpened
+    }, [classes.container]),
+    radius: "rounded"
+  }, !isHiddenIcon && renderedIcons, !hideTimer && renderedTimer, /*#__PURE__*/React.createElement("div", {
+    className: cn('text-wrapper')
+  }, /*#__PURE__*/React.createElement(_Caption["default"], {
+    className: cn('text', {
+      mobile: true
+    }, [classes.text]),
+    variant: "medium",
+    color: "inherit",
+    hasMargin: false,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text
+    }
+  }, text), /*#__PURE__*/React.createElement(_Header["default"], {
+    as: "h5",
+    color: "inherit",
+    className: cn('text', {
+      desktop: true,
+      "short": !!hasTextButton
+    }, [classes.text]),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text
+    }
+  }, text)), hasTextButton && /*#__PURE__*/React.createElement(_Button["default"], {
+    type: "text",
+    sizeAll: "small",
+    sizeMobile: "extra-small",
+    className: cn('text-button'),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.textButton
+    },
+    onClick: handleTextButtonClick
+  }, currentButtonText), /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({
+    type: "button",
+    className: cn('close-button')
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.closeButton), {
+    onClick: handleClose
+  }), /*#__PURE__*/React.createElement(CancelIcon, {
+    className: cn('close-button-icon')
+  }))));
+};
+var _default = exports["default"] = Snackbar;

package/dist/lib/components/Snackbar/SnackbarTimer/SnackbarTimer.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-snackbar-timer{color:var(--base);margin-right:8px}@-webkit-keyframes snackbar-progress-bar{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}@keyframes snackbar-progress-bar{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}.mfui-snackbar-timer__timer{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;height:24px;justify-content:center;width:24px}.mfui-snackbar-timer__timer svg{height:24px;position:absolute;width:24px}.mfui-snackbar-timer__timer-bg{fill:none;stroke:var(--spbSky0);stroke-width:1px}.mfui-snackbar-timer__timer-progress{-webkit-animation-name:snackbar-progress-bar;animation-name:snackbar-progress-bar;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;fill:none;stroke:var(--content);stroke-width:2px;stroke-dasharray:100;stroke-linecap:round}

package/dist/lib/components/Snackbar/SnackbarTimer/SnackbarTimer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import './SnackbarTimer.scss';
+type SnackbarTimerProps = {
+    isTimerType: boolean;
+    maxTimerValue: number;
+    onTimerEnd: () => void;
+};
+declare const SnackbarTimer: React.FC<SnackbarTimerProps>;
+export default SnackbarTimer;

package/dist/lib/components/Snackbar/SnackbarTimer/SnackbarTimer.js

@@ -0,0 +1,80 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/web.timers.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _Caption = _interopRequireDefault(require("../../Caption/Caption"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var TIMER_END_DELAY_MS = 100;
+var MS_IN_SECOND = 1000;
+var cn = (0, _uiHelpers.cnCreate)('mfui-snackbar-timer');
+var SnackbarTimer = function SnackbarTimer(_ref) {
+  var isTimerType = _ref.isTimerType,
+    maxTimerValue = _ref.maxTimerValue,
+    onTimerEnd = _ref.onTimerEnd;
+  var _React$useState = React.useState(null),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    timerValue = _React$useState2[0],
+    setTimerValue = _React$useState2[1];
+  React.useEffect(function () {
+    setTimerValue(maxTimerValue);
+  }, [maxTimerValue]);
+  React.useEffect(function () {
+    var timerTimeoutId;
+    var closeTimeoutId;
+    switch (timerValue) {
+      case null:
+        {
+          break;
+        }
+      case 0:
+        {
+          closeTimeoutId = setTimeout(function () {
+            setTimerValue(null);
+            onTimerEnd();
+          }, TIMER_END_DELAY_MS);
+          break;
+        }
+      default:
+        {
+          timerTimeoutId = setTimeout(function () {
+            return setTimerValue(timerValue - 1);
+          }, MS_IN_SECOND);
+        }
+    }
+    return function () {
+      clearTimeout(timerTimeoutId);
+      clearTimeout(closeTimeoutId);
+    };
+  }, [timerValue, onTimerEnd]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, isTimerType && /*#__PURE__*/React.createElement(_Caption["default"], {
+    color: "inherit",
+    variant: "medium",
+    hasMargin: false,
+    className: cn('timer')
+  }, /*#__PURE__*/React.createElement("svg", null, /*#__PURE__*/React.createElement("circle", {
+    className: cn('timer-bg'),
+    cx: "50%",
+    cy: "50%",
+    r: "11"
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: cn('timer-progress'),
+    style: {
+      animationDuration: "".concat(maxTimerValue * 1.5, "s")
+    },
+    cx: "50%",
+    cy: "50%",
+    r: "11"
+  })), timerValue));
+};
+var _default = exports["default"] = SnackbarTimer;

package/dist/lib/components/Switcher/Switcher.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-switcher{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-tap-highlight-color:transparent}.mfui-switcher__content{font-size:15px;font-weight:400;line-height:24px;-ms-flex-item-align:center;align-self:center;margin-left:12px}.mfui-switcher__content_size_small{font-size:12px;line-height:18px}.mfui-switcher__content_left{margin-left:0;margin-right:12px}.mfui-switcher__content_left+.mfui-switcher__input{margin-left:auto}.mfui-switcher__pointer{background-color:var(--stcWhite);border-radius:50%;height:24px;left:2px;position:relative;top:2px;-webkit-transition:all .3s;transition:all .3s;width:24px}.mfui-switcher__loader{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.mfui-switcher__loader:before{-webkit-animation:shining .8s linear infinite;animation:shining .8s linear infinite;background:-webkit-gradient(linear,left top,right top,from(var(--spbSky1)),color-stop(16%,var(--spbSky2)),color-stop(33%,var(--spbSky1)),color-stop(50%,var(--spbSky2)),color-stop(66%,var(--spbSky1)),color-stop(82%,var(--spbSky2)),to(var(--spbSky1)));background:linear-gradient(90deg,var(--spbSky1) 0,var(--spbSky2) 16%,var(--spbSky1) 33%,var(--spbSky2) 50%,var(--spbSky1) 66%,var(--spbSky2) 82%,var(--spbSky1) 100%);bottom:0;content:"";height:100%;left:0;position:absolute;top:0;width:300%}@-webkit-keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.mfui-switcher__timer{background:var(--base);border-radius:50%}.mfui-switcher__timer,.mfui-switcher__timer-icon{height:20px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mfui-switcher__timer-icon{fill:var(--spbSky2)}.mfui-switcher__input{position:relative;-ms-flex-item-align:start;align-self:flex-start;border-radius:15.5px;cursor:pointer;height:28px;min-width:48px;outline:none;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:background-color .3s;transition:background-color .3s;width:48px}.mfui-switcher__input,.mfui-switcher__input_disabled{background-color:var(--spbSky1)}.mfui-switcher__input_disabled,.mfui-switcher__input_loaded,.mfui-switcher__input_waiting{cursor:default}.mfui-switcher__input:hover:not(.mfui-switcher__input_disabled){background-color:var(--spbSky2)}.mfui-switcher__input_checked:not(.mfui-switcher__input_disabled){background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-switcher__input_checked:hover:not(.mfui-switcher__input_disabled){background-color:var(--buttonHoverGreen);border-color:var(--buttonHoverGreen)}.mfui-switcher__input_disabled .mfui-switcher__pointer{background-color:var(--spbSky2)}.mfui-switcher__input_checked .mfui-switcher__pointer{left:22px}.mfui-switcher__input_checked .mfui-switcher__loader:before{background:-webkit-gradient(linear,left top,right top,from(var(--brandGreen)),color-stop(16%,var(--buttonHoverGreen)),color-stop(33%,var(--brandGreen)),color-stop(50%,var(--buttonHoverGreen)),color-stop(66%,var(--brandGreen)),color-stop(82%,var(--buttonHoverGreen)),to(var(--brandGreen)));background:linear-gradient(90deg,var(--brandGreen) 0,var(--buttonHoverGreen) 16%,var(--brandGreen) 33%,var(--buttonHoverGreen) 50%,var(--brandGreen) 66%,var(--buttonHoverGreen) 82%,var(--brandGreen) 100%)}.mfui-switcher_disabled .mfui-switcher__content{color:var(--spbSky3)}.mfui-switcher_theme_on-gray .mfui-switcher__input:not(.mfui-switcher__input_checked),.mfui-switcher_theme_on-gray .mfui-switcher__input_disabled{background-color:var(--spbSky2)}.mfui-switcher_theme_on-gray .mfui-switcher__input:not(.mfui-switcher__input_checked):not(.mfui-switcher__input_disabled):hover,.mfui-switcher_theme_on-gray .mfui-switcher__input_disabled .mfui-switcher__pointer{background-color:var(--spbSky3)}.mfui-switcher_theme_on-gray .mfui-switcher__timer-icon{fill:var(--spbSky3)}

package/dist/lib/components/Switcher/Switcher.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { AccessibilityEventType } from '@megafon/ui-helpers';
+import './Switcher.scss';
+export interface ISwitcherProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        loader?: Record<string, string>;
+        pointer?: Record<string, string>;
+        timer?: Record<string, string>;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Тема */
+    theme?: 'on-white' | 'on-gray';
+    /** Управление состоянием вкл/выкл компонента */
+    checked?: boolean;
+    /** Состояние ожидание */
+    waiting?: boolean;
+    /** Состояние отключения */
+    disabled?: boolean;
+    /** Состояние загрузки */
+    showLoader?: boolean;
+    /** Размер текста лейбла */
+    textSize?: 'small' | 'medium';
+    /** Позиция лейбла относительно свитчера */
+    textPosition?: 'left' | 'right';
+    /** Обработчик изменения элемента */
+    onChange?: (e: AccessibilityEventType) => void;
+    children?: React.ReactNode;
+}
+declare const Switcher: React.FC<ISwitcherProps>;
+export default Switcher;

package/dist/lib/components/Switcher/Switcher.js

@@ -0,0 +1,89 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var WaitingIcon = function WaitingIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
+  }));
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-switcher');
+var Switcher = function Switcher(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'on-white' : _ref$theme,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$showLoader = _ref.showLoader,
+    showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
+    _ref$waiting = _ref.waiting,
+    waiting = _ref$waiting === void 0 ? false : _ref$waiting,
+    children = _ref.children,
+    _ref$textSize = _ref.textSize,
+    textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
+    _ref$textPosition = _ref.textPosition,
+    textPosition = _ref$textPosition === void 0 ? 'right' : _ref$textPosition,
+    onChange = _ref.onChange;
+  var isTouch = (0, _uiHelpers.detectTouch)();
+  var isLeftContent = !!children && textPosition === 'left';
+  var isRightContent = !!children && textPosition === 'right';
+  var isNoProcesses = disabled || waiting;
+  var isInteractiveDisabled = showLoader || isNoProcesses;
+  var isLoaderDisplayed = showLoader && !isNoProcesses;
+  var handleChange = React.useCallback(function (e) {
+    if (isInteractiveDisabled || !(0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
+      return;
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  }, [isInteractiveDisabled, onChange]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      disabled: disabled,
+      theme: theme
+    }, className)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isLeftContent && /*#__PURE__*/React.createElement("div", {
+    className: cn('content', {
+      size: textSize,
+      left: true
+    })
+  }, children), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    className: cn('input', {
+      checked: checked && !waiting,
+      disabled: isNoProcesses,
+      loaded: showLoader && !waiting,
+      'no-touch': !isTouch
+    }),
+    onClick: handleChange,
+    onKeyDown: handleChange,
+    tabIndex: isInteractiveDisabled ? undefined : 0
+  }), isLoaderDisplayed && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('loader')
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader))), waiting ? /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('timer')
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.timer)), /*#__PURE__*/React.createElement(WaitingIcon, {
+    className: cn('timer-icon')
+  })) : /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pointer), {
+    className: cn('pointer')
+  }))), isRightContent && /*#__PURE__*/React.createElement("div", {
+    className: cn('content', {
+      size: textSize
+    })
+  }, children));
+};
+var _default = exports["default"] = Switcher;

package/dist/lib/components/Tabs/Tab.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export interface ITabProps {
+    /** Заголовок таба */
+    title?: string;
+    /** Иконка таба */
+    icon?: React.ReactNode;
+    /** Текст бабла */
+    bubbleTitle?: string | number;
+    /** Наличие бабла нотификации */
+    hasBubble?: boolean;
+    /** Цвет бабла */
+    bubbleColor?: 'green' | 'red';
+    /** Ссылка */
+    href?: string;
+    /** Rel - атрибут тега <a> */
+    rel?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+    };
+    /** Дочерние элементы */
+    children?: React.ReactNode;
+    /** Функция рендера компонента-обертки для заголовка и иконки */
+    renderTabWrapper?: (tab: React.ReactNode) => React.ReactNode;
+}
+declare const Tab: React.FC<ITabProps>;
+export default Tab;

package/dist/lib/components/Tabs/Tab.js

@@ -0,0 +1,17 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+/* eslint-disable react/no-unused-prop-types */
+
+var Tab = function Tab(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+var _default = exports["default"] = Tab;

package/dist/lib/components/Tabs/Tabs.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-tabs .swiper-wrapper{position:relative;width:100%;z-index:0}.mfui-tabs .swiper-wrapper,.mfui-tabs__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-tabs__wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-tabs__swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.mfui-tabs__swiper-wrapper:after,.mfui-tabs__swiper-wrapper:before{background:-webkit-gradient(linear,right top,left top,from(var(--stcBlack5)),color-stop(64%,transparent));background:linear-gradient(270deg,var(--stcBlack5) 0,transparent 64%);border-radius:0 12px 12px 0;bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:64px;z-index:1}.mfui-tabs__swiper-wrapper:before{left:0;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.mfui-tabs__swiper-wrapper:after{right:0}.mfui-tabs__swiper-wrapper_beginning:before,.mfui-tabs__swiper-wrapper_end:after{display:none}.mfui-tabs__swiper{background-color:var(--spbSky0);border-radius:12px;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;overflow:hidden;padding:4px;position:relative;width:100%}.mfui-tabs__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-flex:1;-ms-flex:1;flex:1}.mfui-tabs__panel{display:none}.mfui-tabs__panel_current{display:block}.mfui-tabs__underline{background-color:var(--base);border-radius:8px;bottom:0;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);left:auto;overflow:hidden;position:absolute;top:0;-webkit-transition-duration:.3s;transition-duration:.3s;z-index:0}.mfui-tabs__underline:before{background-color:var(--stcWhite20);content:"";display:block;height:100%;width:100%}.mfui-tabs__arrow{background-color:var(--content);border-radius:50%;cursor:pointer;display:block;height:16px;opacity:1;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background-color,opacity;transition-property:background-color,opacity;width:16px;z-index:2;fill:var(--base)}@media screen and (max-width:1023px){.mfui-tabs__arrow{display:none}}.mfui-tabs__arrow:hover{background-color:var(--spbSky3)}.mfui-tabs__arrow:active{background-color:var(--buttonDown)}.mfui-tabs__arrow_prev{left:14px}.mfui-tabs__arrow_next{right:14px;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.mfui-tabs__arrow_hide{opacity:0;pointer-events:none}.mfui-tabs__tab-inner{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;font-weight:500;line-height:24px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;height:36px;justify-content:center;padding:2px 12px;text-align:center;text-decoration:none;-webkit-transition:color .3s,fill .3s;transition:color .3s,fill .3s;white-space:nowrap;fill:var(--content)}.mfui-tabs__tab-inner:hover{text-decoration:none}.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current){opacity:.8}@media screen and (min-width:1024px){.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover{color:var(--content);fill:var(--content)}}.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover{opacity:1}.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):active{color:var(--buttonDown);fill:var(--buttonDown)}.mfui-tabs__tab-inner_with-icon{padding-left:8px}.mfui-tabs__tab-inner_current{color:var(--content);cursor:auto;fill:var(--content)}.mfui-tabs__tab-icon{height:32px;margin-right:4px;width:32px}.mfui-tabs__tab-icon svg{height:100%;width:100%}.mfui-tabs__tab-bubble{margin-left:6px}.mfui-tabs_size_large .mfui-tabs__swiper{padding:6px}@media screen and (min-width:768px){.mfui-tabs_size_large .mfui-tabs__swiper{padding:8px}}.mfui-tabs_size_large .mfui-tabs__tab-inner{height:48px;padding:8px 24px}@media screen and (min-width:768px){.mfui-tabs_size_large .mfui-tabs__tab-inner{height:56px;padding:12px 40px}}.mfui-tabs_size_large .mfui-tabs__tab-inner_with-icon{padding-left:20px}@media screen and (min-width:768px){.mfui-tabs_size_large .mfui-tabs__tab-inner_with-icon{padding-left:28px}}.mfui-tabs_size_large .mfui-tabs__tab-icon{margin-right:6px}.mfui-tabs_size_large .mfui-tabs__tab-bubble{margin-left:12px}.mfui-tabs_size_large .mfui-tabs__tab-bubble_with-icon{margin-left:6px}.mfui-tabs_auto-width .mfui-tabs__swiper{max-width:100%;width:auto}.mfui-tabs_auto-width .mfui-tabs__slide{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mfui-tabs_auto-width.mfui-tabs_h-align_center .mfui-tabs__swiper-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:768px) and (max-width:1023px){.mfui-tabs_indents .mfui-tabs__swiper-wrapper{margin:0 -48px;padding:0 48px}}@media screen and (max-width:767px){.mfui-tabs_indents .mfui-tabs__swiper-wrapper{margin:0 -16px;padding:0 16px}}.mfui-tabs_sticky .mfui-tabs__swiper-wrapper{background-color:var(--base);left:0;position:fixed;right:0;top:0;z-index:100}.mfui-tabs_tab-color_gray .mfui-tabs__swiper{background-color:var(--spbSky1)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper{background-color:var(--stcBlack20)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current){color:var(--stcWhite);opacity:.8;fill:var(--stcWhite)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current):hover{color:var(--stcWhite);opacity:1;fill:var(--stcWhite)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current{color:var(--stcBlack);fill:var(--stcBlack)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__underline{background-color:var(--stcWhite)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow{background-color:var(--stcWhite);fill:var(--stcBlack)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow:hover{background-color:var(--stcWhite50)}.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow:active{background-color:var(--stcBlack0)}

package/dist/lib/components/Tabs/Tabs.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { ITabProps } from './Tab';
+import './Tabs.scss';
+export declare const TabAlign: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+};
+export declare const TabSize: {
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+export declare const TabColorTheme: {
+    readonly WHITE: "white";
+    readonly GREEN: "green";
+    readonly GRAY: "gray";
+};
+type TabSizeType = (typeof TabSize)[keyof typeof TabSize];
+type TabColorThemeType = (typeof TabColorTheme)[keyof typeof TabColorTheme];
+type TabAlignType = (typeof TabAlign)[keyof typeof TabAlign];
+export type TabsChildrenType = Array<React.ReactElement<ITabProps>>;
+export interface ITabsProps {
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        wrapper?: string;
+        swiperWrapper?: string;
+        innerIndents?: string;
+        tab?: string;
+        activeTab?: string;
+        panel?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        slider?: Record<string, string>;
+        panel?: Record<string, string>;
+        prev?: Record<string, string>;
+        next?: Record<string, string>;
+        wrapper?: Record<string, string>;
+        swiperWrapper?: Record<string, string>;
+    };
+    /** Размер табов */
+    size?: TabSizeType;
+    /** Цветовая тема табов для определенных фонов */
+    tabColorTheme?: TabColorThemeType;
+    /** Ширина табов по размеру содержимого */
+    autoWidth?: boolean;
+    /** Горизонтальное выравнивание (только для autoWidth = true) */
+    align?: TabAlignType;
+    /** Фиксация табов у верхней границы окна */
+    sticky?: boolean;
+    /** Индекс активного таба (включает режим управления табами снаружи) */
+    currentIndex?: number;
+    /** Индекс активного таба по умолчанию (не работает в режиме управления табами снаружи) */
+    defaultIndex?: number;
+    /** Рендер содержимого только для текущего таба */
+    renderOnlyCurrentPanel?: boolean;
+    /** Внешний контейнер для режима фиксация табов */
+    outerObserveContainer?: HTMLDivElement | null;
+    /** Обработчика клика по табам */
+    onTabClick?: (index: number) => void;
+    children: TabsChildrenType;
+}
+declare const Tabs: React.FC<ITabsProps>;
+export default Tabs;