@megafon/ui-core 3.3.0 → 3.5.0

package/dist/es/components/Switcher/Switcher.css

@@ -1,48 +1,121 @@
 .mfui-switcher {
-  top: 22px;
-  right: 28px;
-  width: 48px;
-  height: 28px;
-  border: 1px solid var(--stcBlack20);
-  border-radius: 15.5px;
-  background-color: var(--base);
-  cursor: pointer;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-switcher__content {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  -ms-flex-item-align: center;
+      align-self: center;
+  margin-left: 12px;
+}
+.mfui-switcher__content_size_small {
+  font-size: 12px;
+  line-height: 16px;
+}
+.mfui-switcher__content_left {
+  margin-right: 12px;
+  margin-left: 0;
+}
+.mfui-switcher__content_left + .mfui-switcher__input {
+  margin-left: auto;
 }
 .mfui-switcher__pointer {
   position: relative;
-  top: 1px;
-  left: 1px;
+  top: 2px;
+  left: 2px;
   width: 24px;
   height: 24px;
-  border: 1px solid var(--stcBlack20);
   border-radius: 50%;
-  background-color: var(--base);
-  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
-          box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
+  background-color: var(--stcWhite);
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
-.mfui-switcher_no-touch:hover:not(.mfui-switcher_disabled) {
+.mfui-switcher__loader {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+}
+.mfui-switcher__loader:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 300%;
+  height: 100%;
+  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%);
+  -webkit-animation: shining 0.8s linear infinite;
+          animation: shining 0.8s linear infinite;
+}
+@-webkit-keyframes shining {
+  0% {
+    -webkit-transform: translateX(-33%);
+            transform: translateX(-33%);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+}
+@keyframes shining {
+  0% {
+    -webkit-transform: translateX(-33%);
+            transform: translateX(-33%);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+}
+.mfui-switcher__input {
+  position: relative;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  width: 48px;
+  min-width: 48px;
+  height: 28px;
+  border-radius: 15.5px;
+  overflow: hidden;
+  background-color: var(--spbSky1);
+  cursor: pointer;
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+}
+.mfui-switcher__input_disabled {
   background-color: var(--spbSky1);
 }
-.mfui-switcher_checked {
+.mfui-switcher__input_disabled,
+.mfui-switcher__input_loaded {
+  cursor: default;
+}
+.mfui-switcher__input:hover:not(.mfui-switcher__input_disabled) {
+  background-color: var(--spbSky2);
+}
+.mfui-switcher__input_checked:not(.mfui-switcher__input_disabled) {
   border-color: var(--brandGreen);
   background-color: var(--brandGreen);
 }
-.mfui-switcher_checked .mfui-switcher__pointer {
-  left: 21px;
-}
-.mfui-switcher_checked.mfui-switcher_no-touch:hover {
+.mfui-switcher__input_checked:hover:not(.mfui-switcher__input_disabled) {
   border-color: var(--buttonHoverGreen);
   background-color: var(--buttonHoverGreen);
 }
-.mfui-switcher_disabled {
-  background-color: var(--spbSky1);
-  cursor: default;
-}
-.mfui-switcher_disabled.mfui-switcher_checked.mfui-switcher_no-touch {
-  border-color: var(--spbSky2);
+.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);
+}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { AccessibilityEventType } from '@megafon/ui-helpers';
 import './Switcher.less';
 export interface ISwitcherProps {
     /** Дополнительные data атрибуты к внутренним элементам */
@@ -9,10 +10,16 @@ export interface ISwitcherProps {
     className?: string;
     /** Управление состоянием вкл/выкл компонента */
     checked?: boolean;
-    /** Управление возможностью взаимодействия с компонентом */
+    /** Отключение переключателя */
     disabled?: boolean;
+    /** Cостояние загрузки */
+    showLoader?: boolean;
+    /** Размер текста лейбла */
+    textSize?: 'small' | 'medium';
+    /** Позиция лейбла относительно свитчера */
+    textPosition?: 'left' | 'right';
     /** Обработчик изменения элемента */
-    onChange?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onChange?: (e: AccessibilityEventType) => void;
 }
 declare const Switcher: React.FC<ISwitcherProps>;
 export default Switcher;

package/dist/es/components/Switcher/Switcher.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
+import { checkEventIsClickOrEnterPress, cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Switcher.css";
 var cn = cnCreate('mfui-switcher');
@@ -12,27 +12,53 @@ var Switcher = function Switcher(_ref) {
       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,
+      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 = detectTouch();
-
-  var handleChange = function handleChange(e) {
-    if (disabled) {
+  var isLeftContent = !!children && textPosition === 'left';
+  var isRightContent = !!children && textPosition === 'right';
+  var isInteractiveDisabled = showLoader || disabled;
+  var handleChange = React.useCallback(function (e) {
+    if (isInteractiveDisabled || !checkEventIsClickOrEnterPress(e)) {
       return;
     }
 
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
-  };
-
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  }, [isInteractiveDisabled, onChange]);
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
+      disabled: disabled
+    }, className)
+  }, 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", {
+    className: cn('input', {
       checked: checked,
       disabled: disabled,
+      loaded: showLoader,
       'no-touch': !isTouch
-    }, className),
-    onClick: handleChange
+    }),
+    onClick: handleChange,
+    onKeyDown: handleChange,
+    tabIndex: isInteractiveDisabled ? undefined : 0
+  }, showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
+    className: cn('loader')
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('pointer')
-  }));
+  })), isRightContent && /*#__PURE__*/React.createElement("div", {
+    className: cn('content', {
+      size: textSize
+    })
+  }, children));
 };
 
 Switcher.propTypes = {
@@ -40,8 +66,11 @@ Switcher.propTypes = {
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
+  textSize: PropTypes.oneOf(['small', 'medium']),
+  textPosition: PropTypes.oneOf(['left', 'right']),
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
+  showLoader: PropTypes.bool,
   onChange: PropTypes.func
 };
 export default Switcher;

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

@@ -31,7 +31,7 @@ export declare type TextFieldProps = {
     verification?: 'valid' | 'error';
     /** Подпись снизу, меняет цвет в зависимости от аргумента verification */
     noticeText?: string;
-    /** Управление возможностью взаимодействия с компонентом */
+    /** Отключение поля ввода */
     disabled?: boolean;
     /** Показывает обязательность поля  */
     required?: boolean;

package/dist/es/index.d.ts

@@ -40,5 +40,7 @@ export { default as Tabs } from './components/Tabs/Tabs';
 export { default as TextField } from './components/TextField/TextField';
 export { default as TextLink } from './components/TextLink/TextLink';
 export { default as Tile } from './components/Tile/Tile';
+export { default as Timer } from './components/Badges/components/TimerBadge/Timer/Timer';
+export { default as TimerBadge } from './components/Badges/components/TimerBadge/TimerBadge';
 export { default as Tooltip } from './components/Tooltip/Tooltip';
 export { default as usePagination } from './components/Pagination/usePagination';

package/dist/es/index.js

@@ -40,5 +40,7 @@ export { default as Tabs } from "./components/Tabs/Tabs";
 export { default as TextField } from "./components/TextField/TextField";
 export { default as TextLink } from "./components/TextLink/TextLink";
 export { default as Tile } from "./components/Tile/Tile";
+export { default as Timer } from "./components/Badges/components/TimerBadge/Timer/Timer";
+export { default as TimerBadge } from "./components/Badges/components/TimerBadge/TimerBadge";
 export { default as Tooltip } from "./components/Tooltip/Tooltip";
 export { default as usePagination } from "./components/Pagination/usePagination";

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.css

@@ -7,20 +7,23 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 4px;
+  padding: 2px;
   padding-right: 8px;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
-  height: 24px;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
   border-radius: 8px;
 }
 @media screen and (min-width: 1024px) {
   .mfui-price-badge_adaptive {
     font-size: 15px;
     line-height: 24px;
-    padding: 4px 8px;
-    height: 32px;
+    padding: 4px;
+    padding-right: 8px;
+    min-height: 32px;
     border-radius: 12px;
   }
 }
@@ -62,7 +65,12 @@
 }
 .mfui-price-badge__text {
   font-family: inherit;
-  margin-left: 4px;
+  margin-left: 2px;
+}
+.mfui-price-badge__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 .mfui-price-badge__icon {
   height: 20px;

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.js

@@ -113,9 +113,11 @@ var PriceBadge = function PriceBadge(_ref) {
       theme: theme,
       adaptive: isAdaptive
     }, className)
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-container')
+  }, /*#__PURE__*/React.createElement(Icon, {
     className: cn('icon')
-  }), /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement("span", {
     className: cn('text')
   }, children));
 };

package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.css

@@ -10,7 +10,7 @@
   width: -moz-fit-content;
   width: fit-content;
   border-radius: 8px;
-  color: var(--base);
+  color: var(--stcWhite);
 }
 .mfui-promo-badge_type_hit {
   background-color: var(--warmRedC);
@@ -18,6 +18,9 @@
 .mfui-promo-badge_type_new {
   background-color: var(--systemBlue);
 }
+.mfui-promo-badge_type_vip {
+  background-color: var(--brandPurple);
+}
 .mfui-promo-badge_type_popular {
   background-color: var(--137C);
 }

package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.d.ts

@@ -3,6 +3,7 @@ import './PromoBadge.less';
 export declare const PromoBadgeTypes: {
     readonly HIT: "hit";
     readonly NEW: "new";
+    readonly VIP: "vip";
     readonly POPULAR: "popular";
     readonly USER_CHOICE: "user-choice";
 };

package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.js

@@ -26,6 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var PromoBadgeTypes = {
   HIT: 'hit',
   NEW: 'new',
+  VIP: 'vip',
   POPULAR: 'popular',
   USER_CHOICE: 'user-choice'
 };

package/dist/lib/components/Badges/components/TimerBadge/Timer/Timer.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export declare const getCountdownText: (remainingTime?: number) => string;
+interface ITimerProps {
+    actualRemainingTime: number;
+    expirationDate: Date;
+    showCountdown: boolean;
+    additionalText?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Timer: React.FC<ITimerProps>;
+export default Timer;

package/dist/lib/components/Badges/components/TimerBadge/Timer/Timer.js

@@ -0,0 +1,123 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.getCountdownText = void 0;
+
+require("core-js/modules/es.array.concat");
+
+require("core-js/modules/es.date.to-string");
+
+require("core-js/modules/es.math.trunc");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _format = _interopRequireDefault(require("date-fns/format"));
+
+var _ru = _interopRequireDefault(require("date-fns/locale/ru"));
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var SECONDS_IN_DAY = 86400;
+var SECONDS_IN_HOUR = 3600;
+var SECONDS_IN_MINUTE = 60;
+
+var formatDate = function formatDate(date, pattern) {
+  return (0, _format["default"])(date, pattern, {
+    locale: _ru["default"]
+  });
+};
+
+var getCountdownText = function getCountdownText() {
+  var remainingTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var isMoreHourAndLessDay = remainingTime >= SECONDS_IN_HOUR && remainingTime < SECONDS_IN_DAY;
+
+  var truncTime = function truncTime() {
+    var divider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    return Math.trunc(remainingTime / divider);
+  };
+
+  switch (true) {
+    case remainingTime <= 0:
+      {
+        return '';
+      }
+
+    case remainingTime < SECONDS_IN_MINUTE:
+      {
+        var seconds = truncTime();
+        return "".concat(seconds, " \u0441\u0435\u043A");
+      }
+
+    case remainingTime < SECONDS_IN_HOUR:
+      {
+        var minutes = truncTime(SECONDS_IN_MINUTE);
+        return "".concat(minutes, " \u043C\u0438\u043D");
+      }
+
+    case isMoreHourAndLessDay:
+      {
+        var hours = truncTime(SECONDS_IN_HOUR);
+        var secondsLeft = remainingTime - hours * SECONDS_IN_HOUR;
+
+        var _minutes = Math.trunc(secondsLeft / SECONDS_IN_MINUTE);
+
+        return _minutes ? "".concat(hours, " \u0447 ").concat(_minutes, " \u043C\u0438\u043D") : "".concat(hours, " \u0447");
+      }
+
+    case remainingTime >= SECONDS_IN_DAY:
+      {
+        var days = truncTime(SECONDS_IN_DAY);
+
+        var _secondsLeft = remainingTime - days * SECONDS_IN_DAY;
+
+        var _hours = Math.trunc(_secondsLeft / SECONDS_IN_HOUR);
+
+        return _hours ? "".concat(days, " \u0434\u043D ").concat(_hours, " \u0447") : "".concat(days, " \u0434\u043D");
+      }
+
+    default:
+      {
+        return '';
+      }
+  }
+};
+
+exports.getCountdownText = getCountdownText;
+var cn = (0, _uiHelpers.cnCreate)('mfui-timer');
+
+var Timer = function Timer(_ref) {
+  var actualRemainingTime = _ref.actualRemainingTime,
+      expirationDate = _ref.expirationDate,
+      showCountdown = _ref.showCountdown,
+      additionalText = _ref.additionalText,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn()
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), additionalText && /*#__PURE__*/React.createElement("span", null, additionalText, " "), /*#__PURE__*/React.createElement("span", null, showCountdown ? getCountdownText(actualRemainingTime) : formatDate(expirationDate, 'dd MMMM yyyy')));
+};
+
+Timer.propTypes = {
+  expirationDate: PropTypes.instanceOf(Date).isRequired,
+  actualRemainingTime: PropTypes.number.isRequired,
+  showCountdown: PropTypes.bool.isRequired,
+  additionalText: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+var _default = Timer;
+exports["default"] = _default;

package/dist/lib/components/Badges/components/TimerBadge/TimerBadge.css

@@ -0,0 +1,60 @@
+.mfui-timer-badge {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 1px 2px;
+  padding-right: 8px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  border: 1px solid var(--spbSky1);
+  border-radius: 12px;
+  background: var(--base);
+  overflow: hidden;
+}
+.mfui-timer-badge_theme_grey .mfui-timer-badge__text {
+  color: var(--spbSky3);
+}
+.mfui-timer-badge_theme_grey .mfui-timer-badge__icon {
+  fill: var(--spbSky3);
+}
+.mfui-timer-badge_theme_red .mfui-timer-badge__text {
+  color: var(--fury);
+}
+.mfui-timer-badge_theme_red .mfui-timer-badge__icon {
+  fill: var(--fury);
+}
+.mfui-timer-badge__text {
+  font-size: 12px;
+  line-height: 16px;
+  font-family: inherit;
+  margin-left: 2px;
+  font-weight: 500;
+}
+.mfui-timer-badge__icon {
+  height: 20px;
+  width: 20px;
+}
+.mfui-timer-badge__icon-container {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-timer-badge__icon-container_shadow:before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  -webkit-box-shadow: 0px 0px 6px var(--fury);
+          box-shadow: 0px 0px 6px var(--fury);
+}

package/dist/lib/components/Badges/components/TimerBadge/TimerBadge.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import './TimerBadge.less';
+export interface ITimerBadgeProps {
+    /** Дата окончания таймера */
+    expirationDate: Date;
+    /** Граница переключения в режим обратного отсчёта, в секундах */
+    countdownStart?: number;
+    /** Отображение дополнительного текста */
+    hasPrefix?: boolean;
+    /** Текст перед таймером в режиме обратного отсчета. Появляется при hasPrefix=true. */
+    countdownText?: string;
+    /** Текст перед таймером в режиме даты. Появляется при hasPrefix=true. */
+    expirationDateText?: string;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        text?: Record<string, string>;
+        timer?: Record<string, string>;
+    };
+}
+declare const TimerBadge: React.FC<ITimerBadgeProps>;
+export default TimerBadge;