@semcore/progress-bar 2.1.0 → 2.2.2

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [2.2.2] - 2022-02-24
+
+### Added
+
+- Added repository field to package.json file.
+
+## [2.2.1] - 2021-8-26
+
+### Changed
+
+- Add 'sideEffect=false' for more optimal build via webpack
+
+## [2.2.0] - 2021-07-05
+
+### Changed
+
+- Version of dependence `@semcore/core` has been changed to `1.11`.
+- Improved performance. Removed one component wrapper.
+- The style processing system has been changed.
+- Removed the ability to apply media styles via a plugin `babel-plugin-react-semcore`.
+- [TS] rewrite code from TS to JS
+
 ## [2.1.0] - 2020-12-17
 
 ### Added

package/lib/cjs/ProgressBar.js

@@ -1,13 +1,15 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Progress = exports.Bar = exports["default"] = void 0;
+exports["default"] = exports.Progress = exports.Bar = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -23,76 +25,60 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _core = _interopRequireWildcard(require("@semcore/core"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = _interopRequireWildcard(require("@semcore/core"));
-
 var _flexBox = require("@semcore/flex-box");
 
 var _color = _interopRequireDefault(require("@semcore/utils/lib/color"));
 
 var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
 
+var _excluded = ["Children", "styles", "duration", "size", "theme", "value", "animation"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 /*__reshadow-styles__:"./style/progress-bar.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-(0, _core.__css__)(
+_core.sstyled.insert(
 /*__inner_css_start__*/
-".___SProgressBar_w4qdd_gg_{position:relative;width:100%;overflow:hidden}.___SValue_w4qdd_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#479d2e 25%,#4fae33 0,#4fae33 50%,#479d2e 0,#479d2e 76%,#4fae33 0);overflow:hidden;-webkit-animation-name:_loading_w4qdd_gg_;animation-name:_loading_w4qdd_gg_;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;transition-duration:1s}.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_s_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_s_w4qdd_gg_{height:4px;border-radius:2px;background-size:8px 8px}.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_m_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_m_w4qdd_gg_{height:8px;border-radius:4px;background-size:12px 12px}.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_l_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_l_w4qdd_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_w4qdd_gg_.__theme_w4qdd_gg_.__theme_dark_w4qdd_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_w4qdd_gg_.__theme_w4qdd_gg_.__theme_invert_w4qdd_gg_{background-color:#dee3e5}@-webkit-keyframes _loading_w4qdd_gg_{0%{background-position:0 0}to{background-position:60px 0}}@keyframes _loading_w4qdd_gg_{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_w4qdd_gg_.__animation_w4qdd_gg_{background-image:linear-gradient(-45deg,#c8ccce 25%,#dee3e5 0,#dee3e5 50%,#c8ccce 0,#c8ccce 76%,#dee3e5 0);-webkit-animation-name:_loading_w4qdd_gg_;animation-name:_loading_w4qdd_gg_;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}"
+".___SProgressBar_k9rlr_gg_{position:relative;width:100%;overflow:hidden}.___SValue_k9rlr_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#479d2e 25%,#4fae33 0,#4fae33 50%,#479d2e 0,#479d2e 76%,#4fae33 0);overflow:hidden;-webkit-animation-name:loading_1wbyfk1;animation-name:loading_1wbyfk1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;transition-duration:1s}.___SProgressBar_k9rlr_gg_._size_s_k9rlr_gg_,.___SValue_k9rlr_gg_._size_s_k9rlr_gg_{height:4px;border-radius:2px;background-size:8px 8px}.___SProgressBar_k9rlr_gg_._size_m_k9rlr_gg_,.___SValue_k9rlr_gg_._size_m_k9rlr_gg_{height:8px;border-radius:4px;background-size:12px 12px}.___SProgressBar_k9rlr_gg_._size_l_k9rlr_gg_,.___SValue_k9rlr_gg_._size_l_k9rlr_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_k9rlr_gg_._theme_dark_k9rlr_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_k9rlr_gg_._theme_invert_k9rlr_gg_{background-color:#dee3e5}@-webkit-keyframes loading_1wbyfk1{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1wbyfk1{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_k9rlr_gg_.__animation_k9rlr_gg_{background-image:linear-gradient(-45deg,#c8ccce 25%,#dee3e5 0,#dee3e5 50%,#c8ccce 0,#c8ccce 76%,#dee3e5 0);-webkit-animation-name:loading_1wbyfk1;animation-name:loading_1wbyfk1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_k9rlr_gg_._theme_custom_k9rlr_gg_{background-color:var(--backgroundColor_1wbyfk1)}.___SProgressBar_k9rlr_gg_._theme_custom_k9rlr_gg_{background-image:var(--backgroundColor_1wbyfk1)}.___SProgressBar_k9rlr_gg_.__animation_k9rlr_gg_{-webkit-animation-duration:var(--duration_1wbyfk1);animation-duration:var(--duration_1wbyfk1)}.___SValue_k9rlr_gg_{width:var(--width_1wbyfk1);-webkit-animation-duration:var(--duration_1wbyfk1);animation-duration:var(--duration_1wbyfk1)}.___SValue_k9rlr_gg_.__theme_k9rlr_gg_{background-color:var(--backgroundColor_1wbyfk1);background-image:var(--backgroundColor_1wbyfk1)}"
 /*__inner_css_end__*/
-, "w35m8y_gg_")
+, "1wbyfk1_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SProgressBar": "___SProgressBar_w4qdd_gg_",
-  "__SValue": "___SValue_w4qdd_gg_",
-  "loading": "_loading_w4qdd_gg_",
-  "_size": "__size_w4qdd_gg_",
-  "_size_s": "__size_s_w4qdd_gg_",
-  "_size_m": "__size_m_w4qdd_gg_",
-  "_size_l": "__size_l_w4qdd_gg_",
-  "_theme": "__theme_w4qdd_gg_",
-  "_theme_dark": "__theme_dark_w4qdd_gg_",
-  "_theme_invert": "__theme_invert_w4qdd_gg_",
-  "_animation": "__animation_w4qdd_gg_"
-}),
-    style = (0, _extends2["default"])({}, _ref);
-
-if (false) {
-  /*__reshadow_css_start__*/
-  (0, _core.__css__)(
-  /*__inner_css_start__*/
-  "@media (max-width: 768px) {\n\n.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_s_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_s_w4qdd_gg_ {\n  height: 5.2px;\n  background-size: 10.4px 10.4px;\n}\n\n.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_m_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_m_w4qdd_gg_ {\n  height: 10.4px;\n  background-size: 15.6px 15.6px;\n}\n\n.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_l_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_l_w4qdd_gg_ {\n  height: 15.6px;\n  background-size: 20.8px 20.8px;\n}}"
-  /*__inner_css_end__*/
-  , "3a459m_gg_")
-  /*__reshadow_css_end__*/
-  ;
-}
+  "__SProgressBar": "___SProgressBar_k9rlr_gg_",
+  "__SValue": "___SValue_k9rlr_gg_",
+  "_size_s": "_size_s_k9rlr_gg_",
+  "_size_m": "_size_m_k9rlr_gg_",
+  "_size_l": "_size_l_k9rlr_gg_",
+  "_theme_dark": "_theme_dark_k9rlr_gg_",
+  "_theme_invert": "_theme_invert_k9rlr_gg_",
+  "@loading": "loading_1wbyfk1",
+  "_animation": "__animation_k9rlr_gg_",
+  "_theme_custom": "_theme_custom_k9rlr_gg_",
+  "--backgroundColor": "--backgroundColor_1wbyfk1",
+  "--duration": "--duration_1wbyfk1",
+  "--width": "--width_1wbyfk1",
+  "_theme": "__theme_k9rlr_gg_"
+});
 
 function isCustomTheme(theme) {
   return !['dark', 'invert'].includes(theme);
 }
 
-var styled_c8 = (0, _core.create)([(
-/*__reshadow_css_start__*/
-(0, _core.__css__)(
-/*__inner_css_start__*/
-".___SProgressBar_1yrpf_gg_.__theme_1yrpf_gg_.__theme_custom_1yrpf_gg_{background-color:var(--1romxg5_0);background-image:var(--1romxg5_0)}.___SProgressBar_1yrpf_gg_.__animation_1yrpf_gg_{-webkit-animation-duration:var(--1romxg5_2);animation-duration:var(--1romxg5_2)}"
-/*__inner_css_end__*/
-, "15rpvmm_gg_")
-/*__reshadow_css_end__*/
-, {
-  "__SProgressBar": "___SProgressBar_1yrpf_gg_",
-  "_theme": "__theme_1yrpf_gg_",
-  "_theme_custom": "__theme_custom_1yrpf_gg_",
-  "_animation": "__animation_1yrpf_gg_"
-})]);
-
 var ProgressBarRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(ProgressBarRoot, _Component);
 
@@ -119,7 +105,10 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var SProgressBar = this.Root;
+      var _ref = this ? this.asProps : arguments[0],
+          _ref3;
+
+      var SProgressBar = _flexBox.Box;
       var _this$asProps2 = this.asProps,
           Children = _this$asProps2.Children,
           styles = _this$asProps2.styles,
@@ -128,25 +117,18 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
           theme = _this$asProps2.theme,
           value = _this$asProps2.value,
           animation = _this$asProps2.animation,
-          other = (0, _objectWithoutProperties2["default"])(_this$asProps2, ["Children", "styles", "duration", "size", "theme", "value", "animation"]);
-      var speedValue = "".concat(duration, "ms");
+          other = (0, _objectWithoutProperties2["default"])(_this$asProps2, _excluded);
       var useTheme = isCustomTheme(theme) ? 'custom' : theme;
       var color = (0, _color["default"])(theme);
 
-      _logger["default"].warn(animation !== undefined, "Свойство 'animation' является устаревшим, используйте 'value'", other['data-ui-name'] || ProgressBarRoot.displayName);
-
-      return (0, _core.styled)(((0, _core.set)([styled_c8, styles], {
-        "--1romxg5_0": color,
-        "--1romxg5_2": speedValue
-      }), /*#__PURE__*/_react["default"].createElement(SProgressBar, (0, _core.map)("SProgressBar", {
-        render: _flexBox.Box,
-        theme: useTheme,
-        animation: animation === undefined ? !value : animation,
-        size: size,
-        $$style: _core.styled.$$style
-      }), /*#__PURE__*/_react["default"].createElement(Children, {
-        className: _core.styled.styles["__Children"]
-      }))));
+      _logger["default"].warn(animation !== undefined, "The 'animation' property is deprecated, use 'value'", other['data-ui-name'] || ProgressBarRoot.displayName);
+
+      return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SProgressBar, _ref3.cn("SProgressBar", _objectSpread({}, (0, _core.assignProps)({
+        "use:theme": useTheme,
+        "use:animation": animation === undefined ? !value : animation,
+        "use:duration": "".concat(duration, "ms"),
+        "backgroundColor": color
+      }, _ref))), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})));
     }
   }]);
   return ProgressBarRoot;
@@ -162,39 +144,24 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
     children: /*#__PURE__*/_react["default"].createElement(ProgressBar.Value, null)
   };
 });
-var styled_12c = (0, _core.create)([(
-/*__reshadow_css_start__*/
-(0, _core.__css__)(
-/*__inner_css_start__*/
-".___SValue_ongkf_gg_{width:var(--1romxg5_0);-webkit-animation-duration:var(--1romxg5_1);animation-duration:var(--1romxg5_1)}.___SValue_ongkf_gg_.__theme_ongkf_gg_{background-color:var(--1romxg5_2);background-image:var(--1romxg5_2)}"
-/*__inner_css_end__*/
-, "qg3glx_gg_")
-/*__reshadow_css_end__*/
-, {
-  "__SValue": "___SValue_ongkf_gg_",
-  "_theme": "__theme_ongkf_gg_"
-})]);
 
 function Value(props) {
-  var SValue = props.Root,
-      styles = props.styles,
+  var _ref2 = this ? this.asProps : arguments[0],
+      _ref4;
+
+  var SValue = _flexBox.Box;
+  var styles = props.styles,
       value = props.value,
       size = props.size,
       theme = props.theme,
       duration = props.duration;
   var width = "".concat(value, "%");
-  var durationBackground = "".concat(duration, "ms");
   var color = (0, _color["default"])(theme);
-  return (0, _core.styled)(((0, _core.set)([styled_12c, styles], {
-    "--1romxg5_0": width,
-    "--1romxg5_1": durationBackground,
-    "--1romxg5_2": color
-  }), /*#__PURE__*/_react["default"].createElement(SValue, (0, _core.map)("SValue", {
-    render: _flexBox.Box,
-    theme: theme,
-    size: size,
-    $$style: _core.styled.$$style
-  }))));
+  return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SValue, _ref4.cn("SValue", _objectSpread({}, (0, _core.assignProps)({
+    "use:width": width,
+    "use:duration": "".concat(duration, "ms"),
+    "backgroundColor": color
+  }, _ref2))));
 }
 
 var ProgressBar = (0, _core["default"])(ProgressBarRoot, {
@@ -204,7 +171,7 @@ var _default = ProgressBar;
 exports["default"] = _default;
 
 var Progress = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  _logger["default"].warn(true, "Компонент '<Progress/>' является устаревшим, используйте '<ProgressBar.Value/>'", props['data-ui-name'] || ProgressBar.displayName);
+  _logger["default"].warn(true, "Component '<Progress/>' is deprecated, use '<ProgressBar.Value/>'", props['data-ui-name'] || ProgressBar.displayName);
 
   return /*#__PURE__*/_react["default"].createElement(ProgressBar.Value, (0, _extends2["default"])({
     ref: ref
@@ -214,7 +181,7 @@ var Progress = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
 exports.Progress = Progress;
 
 var Bar = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  _logger["default"].warn(true, "Компонент '<Bar/>' является устаревшим, используйте '<ProgressBar/>'", props['data-ui-name'] || ProgressBar.displayName);
+  _logger["default"].warn(true, "Component '<Bar/>' is deprecated, please use '<ProgressBar/>'", props['data-ui-name'] || ProgressBar.displayName);
 
   return /*#__PURE__*/_react["default"].createElement(ProgressBar, (0, _extends2["default"])({
     ref: ref

package/lib/cjs/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ProgressBar.tsx"],"names":["isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Root","Children","styles","animation","other","speedValue","useTheme","color","logger","warn","undefined","displayName","Box","Component","style","children","Value","props","SValue","width","durationBackground","ProgressBar","Progress","React","forwardRef","ref","Bar"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, IFunctionProps, Merge, styled } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport logger from '@semcore/utils/lib/logger';\n\nimport style from './style/progress-bar.shadow.css';\n\nexport interface IProgressBarProps extends IBoxProps {\n  /**\n   * Progress bar theme\n   * @default invert\n   */\n  theme?: 'dark' | 'invert' | string;\n  /**\n   * Progress bar size\n   * @default m\n   */\n  size?: 's' | 'm' | 'l';\n  /** Value as a percentage */\n  value?: number;\n  /** ДDuration of animation, ms\n   * @default 1000\n   */\n  duration?: number;\n  /** Sets an animated background\n   * @deprecated v2.0.0 {@link IProgressBarProps.value}\n   * */\n  animation?: boolean;\n}\n\nexport interface IValueProps extends IBoxProps {\n  size?: 's' | 'm' | 'l';\n  value?: number;\n  duration?: number;\n  theme?: string;\n}\n\nfunction isCustomTheme(theme) {\n  return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component<IProgressBarProps> {\n  static displayName = 'ProgressBar';\n  static style = style;\n  static defaultProps = () => ({\n    duration: 1000,\n    size: 'm',\n    theme: 'invert',\n    children: <ProgressBar.Value />,\n  });\n\n  getValueProps() {\n    const { value, duration, size } = this.asProps;\n    return {\n      value,\n      duration,\n      size,\n    };\n  }\n\n  render() {\n    const { Root: SProgressBar } = this;\n    const { Children, styles, duration, size, theme, value, animation, ...other } = this.asProps;\n    const speedValue = `${duration}ms`;\n    const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n    const color = resolveColor(theme);\n\n    logger.warn(\n      animation !== undefined,\n      \"Свойство 'animation' является устаревшим, используйте 'value'\",\n      other['data-ui-name'] || ProgressBarRoot.displayName,\n    );\n\n    return styled(styles)`\n      SProgressBar[theme='custom'] {\n        background-color: ${color};\n      }\n      SProgressBar[theme='custom'] {\n        background-image: ${color};\n      }\n      SProgressBar[animation] {\n        animation-duration: ${speedValue};\n      }\n    `(\n      <SProgressBar\n        render={Box}\n        theme={useTheme}\n        animation={animation === undefined ? !value : animation}\n        size={size}\n      >\n        <Children />\n      </SProgressBar>,\n    );\n  }\n}\n\nfunction Value(props: IFunctionProps<IValueProps>) {\n  const { Root: SValue, styles, value, size, theme, duration } = props;\n  const width = `${value}%`;\n  const durationBackground = `${duration}ms`;\n  const color = resolveColor(theme);\n\n  return styled(styles)`\n    SValue {\n      width: ${width};\n      animation-duration: ${durationBackground};\n    }\n    SValue[theme] {\n      background-color: ${color};\n      background-image: ${color};\n    }\n  `(<SValue render={Box} theme={theme} size={size} />);\n}\n\nconst ProgressBar = createComponent<\n  Merge<IProgressBarProps, React.HTMLAttributes<HTMLDivElement>>,\n  {\n    Value: Merge<IValueProps, React.HTMLAttributes<HTMLDivElement>>;\n  }\n>(ProgressBarRoot, {\n  Value,\n});\n\nexport default ProgressBar;\n\nconst Progress = React.forwardRef<\n  unknown,\n  Merge<IValueProps, React.HTMLAttributes<HTMLDivElement>>\n>(function (props, ref) {\n  logger.warn(\n    true,\n    \"Компонент '<Progress/>' является устаревшим, используйте '<ProgressBar.Value/>'\",\n    props['data-ui-name'] || ProgressBar.displayName,\n  );\n  return <ProgressBar.Value ref={ref} {...props} />;\n});\n\nconst Bar = React.forwardRef<\n  unknown,\n  Merge<IProgressBarProps, React.HTMLAttributes<HTMLDivElement>>\n>(function (props, ref) {\n  logger.warn(\n    true,\n    \"Компонент '<Bar/>' является устаревшим, используйте '<ProgressBar/>'\",\n    props['data-ui-name'] || ProgressBar.displayName,\n  );\n  return <ProgressBar ref={ref} {...props} />;\n});\n\nexport { Bar, Progress };\n"],"file":"ProgressBar.js"}
+{"version":3,"sources":["../../src/ProgressBar.js"],"names":["isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Box","Children","styles","animation","other","useTheme","color","logger","warn","undefined","displayName","Component","style","children","Value","props","SValue","width","ProgressBar","Progress","React","forwardRef","ref","Bar"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport logger from '@semcore/utils/lib/logger';\n\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme) {\n  return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component {\n  static displayName = 'ProgressBar';\n  static style = style;\n  static defaultProps = () => ({\n    duration: 1000,\n    size: 'm',\n    theme: 'invert',\n    children: <ProgressBar.Value />,\n  });\n\n  getValueProps() {\n    const { value, duration, size } = this.asProps;\n    return {\n      value,\n      duration,\n      size,\n    };\n  }\n\n  render() {\n    const SProgressBar = Root;\n    const { Children, styles, duration, size, theme, value, animation, ...other } = this.asProps;\n    const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n    const color = resolveColor(theme);\n\n    logger.warn(\n      animation !== undefined,\n      \"The 'animation' property is deprecated, use 'value'\",\n      other['data-ui-name'] || ProgressBarRoot.displayName,\n    );\n\n    return sstyled(styles)(\n      <SProgressBar\n        render={Box}\n        use:theme={useTheme}\n        use:animation={animation === undefined ? !value : animation}\n        use:duration={`${duration}ms`}\n        backgroundColor={color}\n      >\n        <Children />\n      </SProgressBar>,\n    );\n  }\n}\n\nfunction Value(props) {\n  const SValue = Root;\n  const { styles, value, size, theme, duration } = props;\n  const width = `${value}%`;\n  const color = resolveColor(theme);\n\n  return sstyled(styles)(\n    <SValue\n      render={Box}\n      use:width={width}\n      use:duration={`${duration}ms`}\n      backgroundColor={color}\n    />,\n  );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n  Value,\n});\n\nexport default ProgressBar;\n\nconst Progress = React.forwardRef(function (props, ref) {\n  logger.warn(\n    true,\n    \"Component '<Progress/>' is deprecated, use '<ProgressBar.Value/>'\",\n    props['data-ui-name'] || ProgressBar.displayName,\n  );\n  return <ProgressBar.Value ref={ref} {...props} />;\n});\n\nconst Bar = React.forwardRef(function (props, ref) {\n  logger.warn(\n    true,\n    \"Component '<Bar/>' is deprecated, please use '<ProgressBar/>'\",\n    props['data-ui-name'] || ProgressBar.displayName,\n  );\n  return <ProgressBar ref={ref} {...props} />;\n});\n\nexport { Bar, Progress };\n"],"file":"ProgressBar.js"}

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -18,6 +18,7 @@ var _ProgressBar = _interopRequireWildcard(require("./ProgressBar"));
 Object.keys(_ProgressBar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ProgressBar[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
@@ -25,4 +26,8 @@ Object.keys(_ProgressBar).forEach(function (key) {
     }
   });
 });
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './ProgressBar';\nexport * from './ProgressBar';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './ProgressBar';\nexport * from './ProgressBar';\n"],"file":"index.js"}

package/lib/cjs/style/progress-bar.shadow.css

@@ -31,23 +31,23 @@ SValue {
 
 SProgressBar[size='s'],
 SValue[size='s'] {
-  height: media(4px);
+  height: 4px;
   border-radius: 2px;
-  background-size: media(8px) media(8px);
+  background-size: 8px 8px;
 }
 
 SProgressBar[size='m'],
 SValue[size='m'] {
-  height: media(8px);
+  height: 8px;
   border-radius: 4px;
-  background-size: media(12px) media(12px);
+  background-size: 12px 12px;
 }
 
 SProgressBar[size='l'],
 SValue[size='l'] {
-  height: media(12px);
+  height: 12px;
   border-radius: 6px;
-  background-size: media(16px) media(16px);
+  background-size: 16px 16px;
 }
 
 SProgressBar[theme='dark'] {
@@ -81,3 +81,22 @@ SProgressBar[animation] {
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 }
+
+SProgressBar[theme='custom'] {
+  background-color: var(--backgroundColor);
+}
+SProgressBar[theme='custom'] {
+  background-image: var(--backgroundColor);
+}
+SProgressBar[animation] {
+  animation-duration: var(--duration);
+}
+
+SValue {
+  width: var(--width);
+  animation-duration: var(--duration);
+}
+SValue[theme] {
+  background-color: var(--backgroundColor);
+  background-image: var(--backgroundColor);
+}

package/lib/es6/ProgressBar.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -5,72 +6,55 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps2 } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+var _excluded = ["Children", "styles", "duration", "size", "theme", "value", "animation"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import createComponent, { Component, styled, css, __css__, set, create, map } from '@semcore/core';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
 import resolveColor from '@semcore/utils/lib/color';
 import logger from '@semcore/utils/lib/logger';
 
 /*__reshadow-styles__:"./style/progress-bar.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-__css__(
+_sstyled.insert(
 /*__inner_css_start__*/
-".___SProgressBar_w4qdd_gg_{position:relative;width:100%;overflow:hidden}.___SValue_w4qdd_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#479d2e 25%,#4fae33 0,#4fae33 50%,#479d2e 0,#479d2e 76%,#4fae33 0);overflow:hidden;-webkit-animation-name:_loading_w4qdd_gg_;animation-name:_loading_w4qdd_gg_;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;transition-duration:1s}.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_s_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_s_w4qdd_gg_{height:4px;border-radius:2px;background-size:8px 8px}.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_m_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_m_w4qdd_gg_{height:8px;border-radius:4px;background-size:12px 12px}.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_l_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_l_w4qdd_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_w4qdd_gg_.__theme_w4qdd_gg_.__theme_dark_w4qdd_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_w4qdd_gg_.__theme_w4qdd_gg_.__theme_invert_w4qdd_gg_{background-color:#dee3e5}@-webkit-keyframes _loading_w4qdd_gg_{0%{background-position:0 0}to{background-position:60px 0}}@keyframes _loading_w4qdd_gg_{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_w4qdd_gg_.__animation_w4qdd_gg_{background-image:linear-gradient(-45deg,#c8ccce 25%,#dee3e5 0,#dee3e5 50%,#c8ccce 0,#c8ccce 76%,#dee3e5 0);-webkit-animation-name:_loading_w4qdd_gg_;animation-name:_loading_w4qdd_gg_;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}"
+".___SProgressBar_k9rlr_gg_{position:relative;width:100%;overflow:hidden}.___SValue_k9rlr_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#479d2e 25%,#4fae33 0,#4fae33 50%,#479d2e 0,#479d2e 76%,#4fae33 0);overflow:hidden;-webkit-animation-name:loading_1wbyfk1;animation-name:loading_1wbyfk1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;transition-duration:1s}.___SProgressBar_k9rlr_gg_._size_s_k9rlr_gg_,.___SValue_k9rlr_gg_._size_s_k9rlr_gg_{height:4px;border-radius:2px;background-size:8px 8px}.___SProgressBar_k9rlr_gg_._size_m_k9rlr_gg_,.___SValue_k9rlr_gg_._size_m_k9rlr_gg_{height:8px;border-radius:4px;background-size:12px 12px}.___SProgressBar_k9rlr_gg_._size_l_k9rlr_gg_,.___SValue_k9rlr_gg_._size_l_k9rlr_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_k9rlr_gg_._theme_dark_k9rlr_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_k9rlr_gg_._theme_invert_k9rlr_gg_{background-color:#dee3e5}@-webkit-keyframes loading_1wbyfk1{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1wbyfk1{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_k9rlr_gg_.__animation_k9rlr_gg_{background-image:linear-gradient(-45deg,#c8ccce 25%,#dee3e5 0,#dee3e5 50%,#c8ccce 0,#c8ccce 76%,#dee3e5 0);-webkit-animation-name:loading_1wbyfk1;animation-name:loading_1wbyfk1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_k9rlr_gg_._theme_custom_k9rlr_gg_{background-color:var(--backgroundColor_1wbyfk1)}.___SProgressBar_k9rlr_gg_._theme_custom_k9rlr_gg_{background-image:var(--backgroundColor_1wbyfk1)}.___SProgressBar_k9rlr_gg_.__animation_k9rlr_gg_{-webkit-animation-duration:var(--duration_1wbyfk1);animation-duration:var(--duration_1wbyfk1)}.___SValue_k9rlr_gg_{width:var(--width_1wbyfk1);-webkit-animation-duration:var(--duration_1wbyfk1);animation-duration:var(--duration_1wbyfk1)}.___SValue_k9rlr_gg_.__theme_k9rlr_gg_{background-color:var(--backgroundColor_1wbyfk1);background-image:var(--backgroundColor_1wbyfk1)}"
 /*__inner_css_end__*/
-, "w35m8y_gg_")
+, "1wbyfk1_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SProgressBar": "___SProgressBar_w4qdd_gg_",
-  "__SValue": "___SValue_w4qdd_gg_",
-  "loading": "_loading_w4qdd_gg_",
-  "_size": "__size_w4qdd_gg_",
-  "_size_s": "__size_s_w4qdd_gg_",
-  "_size_m": "__size_m_w4qdd_gg_",
-  "_size_l": "__size_l_w4qdd_gg_",
-  "_theme": "__theme_w4qdd_gg_",
-  "_theme_dark": "__theme_dark_w4qdd_gg_",
-  "_theme_invert": "__theme_invert_w4qdd_gg_",
-  "_animation": "__animation_w4qdd_gg_"
-}),
-    style = _extends({}, _ref);
-
-if (false) {
-  /*__reshadow_css_start__*/
-  __css__(
-  /*__inner_css_start__*/
-  "@media (max-width: 768px) {\n\n.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_s_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_s_w4qdd_gg_ {\n  height: 5.2px;\n  background-size: 10.4px 10.4px;\n}\n\n.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_m_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_m_w4qdd_gg_ {\n  height: 10.4px;\n  background-size: 15.6px 15.6px;\n}\n\n.___SProgressBar_w4qdd_gg_.__size_w4qdd_gg_.__size_l_w4qdd_gg_,.___SValue_w4qdd_gg_.__size_w4qdd_gg_.__size_l_w4qdd_gg_ {\n  height: 15.6px;\n  background-size: 20.8px 20.8px;\n}}"
-  /*__inner_css_end__*/
-  , "3a459m_gg_")
-  /*__reshadow_css_end__*/
-  ;
-}
+  "__SProgressBar": "___SProgressBar_k9rlr_gg_",
+  "__SValue": "___SValue_k9rlr_gg_",
+  "_size_s": "_size_s_k9rlr_gg_",
+  "_size_m": "_size_m_k9rlr_gg_",
+  "_size_l": "_size_l_k9rlr_gg_",
+  "_theme_dark": "_theme_dark_k9rlr_gg_",
+  "_theme_invert": "_theme_invert_k9rlr_gg_",
+  "@loading": "loading_1wbyfk1",
+  "_animation": "__animation_k9rlr_gg_",
+  "_theme_custom": "_theme_custom_k9rlr_gg_",
+  "--backgroundColor": "--backgroundColor_1wbyfk1",
+  "--duration": "--duration_1wbyfk1",
+  "--width": "--width_1wbyfk1",
+  "_theme": "__theme_k9rlr_gg_"
+});
 
 function isCustomTheme(theme) {
   return !['dark', 'invert'].includes(theme);
 }
 
-var styled_c8 = create([(
-/*__reshadow_css_start__*/
-__css__(
-/*__inner_css_start__*/
-".___SProgressBar_1yrpf_gg_.__theme_1yrpf_gg_.__theme_custom_1yrpf_gg_{background-color:var(--1romxg5_0);background-image:var(--1romxg5_0)}.___SProgressBar_1yrpf_gg_.__animation_1yrpf_gg_{-webkit-animation-duration:var(--1romxg5_2);animation-duration:var(--1romxg5_2)}"
-/*__inner_css_end__*/
-, "15rpvmm_gg_")
-/*__reshadow_css_end__*/
-, {
-  "__SProgressBar": "___SProgressBar_1yrpf_gg_",
-  "_theme": "__theme_1yrpf_gg_",
-  "_theme_custom": "__theme_custom_1yrpf_gg_",
-  "_animation": "__animation_1yrpf_gg_"
-})]);
-
 var ProgressBarRoot = /*#__PURE__*/function (_Component) {
   _inherits(ProgressBarRoot, _Component);
 
@@ -98,7 +82,10 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var SProgressBar = this.Root;
+      var _ref = this ? this.asProps : arguments[0],
+          _ref3;
+
+      var SProgressBar = Box;
 
       var _this$asProps2 = this.asProps,
           Children = _this$asProps2.Children,
@@ -108,24 +95,17 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
           theme = _this$asProps2.theme,
           value = _this$asProps2.value,
           animation = _this$asProps2.animation,
-          other = _objectWithoutProperties(_this$asProps2, ["Children", "styles", "duration", "size", "theme", "value", "animation"]);
+          other = _objectWithoutProperties(_this$asProps2, _excluded);
 
-      var speedValue = "".concat(duration, "ms");
       var useTheme = isCustomTheme(theme) ? 'custom' : theme;
       var color = resolveColor(theme);
-      logger.warn(animation !== undefined, "Свойство 'animation' является устаревшим, используйте 'value'", other['data-ui-name'] || ProgressBarRoot.displayName);
-      return styled((set([styled_c8, styles], {
-        "--1romxg5_0": color,
-        "--1romxg5_2": speedValue
-      }), /*#__PURE__*/React.createElement(SProgressBar, map("SProgressBar", {
-        render: Box,
-        theme: useTheme,
-        animation: animation === undefined ? !value : animation,
-        size: size,
-        $$style: styled.$$style
-      }), /*#__PURE__*/React.createElement(Children, {
-        className: styled.styles["__Children"]
-      }))));
+      logger.warn(animation !== undefined, "The 'animation' property is deprecated, use 'value'", other['data-ui-name'] || ProgressBarRoot.displayName);
+      return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SProgressBar, _ref3.cn("SProgressBar", _objectSpread({}, _assignProps({
+        "use:theme": useTheme,
+        "use:animation": animation === undefined ? !value : animation,
+        "use:duration": "".concat(duration, "ms"),
+        "backgroundColor": color
+      }, _ref))), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})));
     }
   }]);
 
@@ -145,39 +125,23 @@ _defineProperty(ProgressBarRoot, "defaultProps", function () {
   };
 });
 
-var styled_12c = create([(
-/*__reshadow_css_start__*/
-__css__(
-/*__inner_css_start__*/
-".___SValue_ongkf_gg_{width:var(--1romxg5_0);-webkit-animation-duration:var(--1romxg5_1);animation-duration:var(--1romxg5_1)}.___SValue_ongkf_gg_.__theme_ongkf_gg_{background-color:var(--1romxg5_2);background-image:var(--1romxg5_2)}"
-/*__inner_css_end__*/
-, "qg3glx_gg_")
-/*__reshadow_css_end__*/
-, {
-  "__SValue": "___SValue_ongkf_gg_",
-  "_theme": "__theme_ongkf_gg_"
-})]);
-
 function Value(props) {
-  var SValue = props.Root,
-      styles = props.styles,
+  var _ref2 = this ? this.asProps : arguments[0],
+      _ref4;
+
+  var SValue = Box;
+  var styles = props.styles,
       value = props.value,
       size = props.size,
       theme = props.theme,
       duration = props.duration;
   var width = "".concat(value, "%");
-  var durationBackground = "".concat(duration, "ms");
   var color = resolveColor(theme);
-  return styled((set([styled_12c, styles], {
-    "--1romxg5_0": width,
-    "--1romxg5_1": durationBackground,
-    "--1romxg5_2": color
-  }), /*#__PURE__*/React.createElement(SValue, map("SValue", {
-    render: Box,
-    theme: theme,
-    size: size,
-    $$style: styled.$$style
-  }))));
+  return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SValue, _ref4.cn("SValue", _objectSpread({}, _assignProps2({
+    "use:width": width,
+    "use:duration": "".concat(duration, "ms"),
+    "backgroundColor": color
+  }, _ref2))));
 }
 
 var ProgressBar = createComponent(ProgressBarRoot, {
@@ -185,13 +149,13 @@ var ProgressBar = createComponent(ProgressBarRoot, {
 });
 export default ProgressBar;
 var Progress = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  logger.warn(true, "Компонент '<Progress/>' является устаревшим, используйте '<ProgressBar.Value/>'", props['data-ui-name'] || ProgressBar.displayName);
+  logger.warn(true, "Component '<Progress/>' is deprecated, use '<ProgressBar.Value/>'", props['data-ui-name'] || ProgressBar.displayName);
   return /*#__PURE__*/React.createElement(ProgressBar.Value, _extends({
     ref: ref
   }, props));
 });
 var Bar = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  logger.warn(true, "Компонент '<Bar/>' является устаревшим, используйте '<ProgressBar/>'", props['data-ui-name'] || ProgressBar.displayName);
+  logger.warn(true, "Component '<Bar/>' is deprecated, please use '<ProgressBar/>'", props['data-ui-name'] || ProgressBar.displayName);
   return /*#__PURE__*/React.createElement(ProgressBar, _extends({
     ref: ref
   }, props));

package/lib/es6/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ProgressBar.tsx"],"names":["React","createComponent","Component","styled","Box","resolveColor","logger","isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Root","Children","styles","animation","other","speedValue","useTheme","color","warn","undefined","displayName","style","children","Value","props","SValue","width","durationBackground","ProgressBar","Progress","forwardRef","ref","Bar"],"mappings":";;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAA4DC,MAA5D,wCAA0E,qBAA1E;AACA,SAASC,GAAT,QAA+B,yBAA/B;AACA,OAAOC,YAAP,MAAyB,gCAAzB;AACA,OAAOC,MAAP,MAAmB,iCAAnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAASC,aAAT,CAAuBC,KAAvB,EAA8B;AAC5B,SAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;;;;;;;;;;;;;;;;IAEKE,e;;;;;;;;;;;;;oCAUY;AAAA,0BACoB,KAAKC,OADzB;AAAA,UACNC,KADM,iBACNA,KADM;AAAA,UACCC,QADD,iBACCA,QADD;AAAA,UACWC,IADX,iBACWA,IADX;AAEd,aAAO;AACLF,QAAAA,KAAK,EAALA,KADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,IAAI,EAAJA;AAHK,OAAP;AAKD;;;6BAEQ;AAAA,UACOC,YADP,GACwB,IADxB,CACCC,IADD;;AAAA,2BAEyE,KAAKL,OAF9E;AAAA,UAECM,QAFD,kBAECA,QAFD;AAAA,UAEWC,MAFX,kBAEWA,MAFX;AAAA,UAEmBL,QAFnB,kBAEmBA,QAFnB;AAAA,UAE6BC,IAF7B,kBAE6BA,IAF7B;AAAA,UAEmCN,KAFnC,kBAEmCA,KAFnC;AAAA,UAE0CI,KAF1C,kBAE0CA,KAF1C;AAAA,UAEiDO,SAFjD,kBAEiDA,SAFjD;AAAA,UAE+DC,KAF/D;;AAGP,UAAMC,UAAU,aAAMR,QAAN,OAAhB;AACA,UAAMS,QAAQ,GAAGf,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;AACA,UAAMe,KAAK,GAAGlB,YAAY,CAACG,KAAD,CAA1B;AAEAF,MAAAA,MAAM,CAACkB,IAAP,CACEL,SAAS,KAAKM,SADhB,EAEE,+DAFF,EAGEL,KAAK,CAAC,cAAD,CAAL,IAAyBV,eAAe,CAACgB,WAH3C;AAMA,aAAO,wBAAOR,MAAP;AAAA,uBAEiBK,KAFjB;AAAA,uBAQmBF;AARnB,uBAWL,oBAAC,YAAD;AAAA,gBACUjB,GADV;AAAA,eAESkB,QAFT;AAAA,mBAGaH,SAAS,KAAKM,SAAd,GAA0B,CAACb,KAA3B,GAAmCO,SAHhD;AAAA,cAIQL,IAJR;AAAA;AAAA,uBAME,oBAAC,QAAD;AAAA;AAAA,QANF,CAXK,EAAP;AAoBD;;;;EApD2BZ,S;;gBAAxBQ,e,iBACiB,a;;gBADjBA,e,WAEWiB,K;;gBAFXjB,e,kBAGkB;AAAA,SAAO;AAC3BG,IAAAA,QAAQ,EAAE,IADiB;AAE3BC,IAAAA,IAAI,EAAE,GAFqB;AAG3BN,IAAAA,KAAK,EAAE,QAHoB;AAI3BoB,IAAAA,QAAQ,eAAE,oBAAC,WAAD,CAAa,KAAb;AAJiB,GAAP;AAAA,C;;;;;;;;;;;;;;;AAoDxB,SAASC,KAAT,CAAeC,KAAf,EAAmD;AAAA,MACnCC,MADmC,GACcD,KADd,CACzCd,IADyC;AAAA,MAC3BE,MAD2B,GACcY,KADd,CAC3BZ,MAD2B;AAAA,MACnBN,KADmB,GACckB,KADd,CACnBlB,KADmB;AAAA,MACZE,IADY,GACcgB,KADd,CACZhB,IADY;AAAA,MACNN,KADM,GACcsB,KADd,CACNtB,KADM;AAAA,MACCK,QADD,GACciB,KADd,CACCjB,QADD;AAEjD,MAAMmB,KAAK,aAAMpB,KAAN,MAAX;AACA,MAAMqB,kBAAkB,aAAMpB,QAAN,OAAxB;AACA,MAAMU,KAAK,GAAGlB,YAAY,CAACG,KAAD,CAA1B;AAEA,SAAO,yBAAOU,MAAP;AAAA,mBAEMc,KAFN;AAAA,mBAGmBC,kBAHnB;AAAA,mBAMiBV;AANjB,mBASL,oBAAC,MAAD;AAAA,YAAgBnB,GAAhB;AAAA,WAA4BI,KAA5B;AAAA,UAAyCM,IAAzC;AAAA;AAAA,KATK,EAAP;AAUD;;AAED,IAAMoB,WAAW,GAAGjC,eAAe,CAKjCS,eALiC,EAKhB;AACjBmB,EAAAA,KAAK,EAALA;AADiB,CALgB,CAAnC;AASA,eAAeK,WAAf;AAEA,IAAMC,QAAQ,gBAAGnC,KAAK,CAACoC,UAAN,CAGf,UAAUN,KAAV,EAAiBO,GAAjB,EAAsB;AACtB/B,EAAAA,MAAM,CAACkB,IAAP,CACE,IADF,EAEE,iFAFF,EAGEM,KAAK,CAAC,cAAD,CAAL,IAAyBI,WAAW,CAACR,WAHvC;AAKA,sBAAO,oBAAC,WAAD,CAAa,KAAb;AAAmB,IAAA,GAAG,EAAEW;AAAxB,KAAiCP,KAAjC,EAAP;AACD,CAVgB,CAAjB;AAYA,IAAMQ,GAAG,gBAAGtC,KAAK,CAACoC,UAAN,CAGV,UAAUN,KAAV,EAAiBO,GAAjB,EAAsB;AACtB/B,EAAAA,MAAM,CAACkB,IAAP,CACE,IADF,EAEE,sEAFF,EAGEM,KAAK,CAAC,cAAD,CAAL,IAAyBI,WAAW,CAACR,WAHvC;AAKA,sBAAO,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAEW;AAAlB,KAA2BP,KAA3B,EAAP;AACD,CAVW,CAAZ;AAYA,SAASQ,GAAT,EAAcH,QAAd","sourcesContent":["import React from 'react';\nimport createComponent, { Component, IFunctionProps, Merge, styled } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport logger from '@semcore/utils/lib/logger';\n\nimport style from './style/progress-bar.shadow.css';\n\nexport interface IProgressBarProps extends IBoxProps {\n  /**\n   * Progress bar theme\n   * @default invert\n   */\n  theme?: 'dark' | 'invert' | string;\n  /**\n   * Progress bar size\n   * @default m\n   */\n  size?: 's' | 'm' | 'l';\n  /** Value as a percentage */\n  value?: number;\n  /** ДDuration of animation, ms\n   * @default 1000\n   */\n  duration?: number;\n  /** Sets an animated background\n   * @deprecated v2.0.0 {@link IProgressBarProps.value}\n   * */\n  animation?: boolean;\n}\n\nexport interface IValueProps extends IBoxProps {\n  size?: 's' | 'm' | 'l';\n  value?: number;\n  duration?: number;\n  theme?: string;\n}\n\nfunction isCustomTheme(theme) {\n  return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component<IProgressBarProps> {\n  static displayName = 'ProgressBar';\n  static style = style;\n  static defaultProps = () => ({\n    duration: 1000,\n    size: 'm',\n    theme: 'invert',\n    children: <ProgressBar.Value />,\n  });\n\n  getValueProps() {\n    const { value, duration, size } = this.asProps;\n    return {\n      value,\n      duration,\n      size,\n    };\n  }\n\n  render() {\n    const { Root: SProgressBar } = this;\n    const { Children, styles, duration, size, theme, value, animation, ...other } = this.asProps;\n    const speedValue = `${duration}ms`;\n    const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n    const color = resolveColor(theme);\n\n    logger.warn(\n      animation !== undefined,\n      \"Свойство 'animation' является устаревшим, используйте 'value'\",\n      other['data-ui-name'] || ProgressBarRoot.displayName,\n    );\n\n    return styled(styles)`\n      SProgressBar[theme='custom'] {\n        background-color: ${color};\n      }\n      SProgressBar[theme='custom'] {\n        background-image: ${color};\n      }\n      SProgressBar[animation] {\n        animation-duration: ${speedValue};\n      }\n    `(\n      <SProgressBar\n        render={Box}\n        theme={useTheme}\n        animation={animation === undefined ? !value : animation}\n        size={size}\n      >\n        <Children />\n      </SProgressBar>,\n    );\n  }\n}\n\nfunction Value(props: IFunctionProps<IValueProps>) {\n  const { Root: SValue, styles, value, size, theme, duration } = props;\n  const width = `${value}%`;\n  const durationBackground = `${duration}ms`;\n  const color = resolveColor(theme);\n\n  return styled(styles)`\n    SValue {\n      width: ${width};\n      animation-duration: ${durationBackground};\n    }\n    SValue[theme] {\n      background-color: ${color};\n      background-image: ${color};\n    }\n  `(<SValue render={Box} theme={theme} size={size} />);\n}\n\nconst ProgressBar = createComponent<\n  Merge<IProgressBarProps, React.HTMLAttributes<HTMLDivElement>>,\n  {\n    Value: Merge<IValueProps, React.HTMLAttributes<HTMLDivElement>>;\n  }\n>(ProgressBarRoot, {\n  Value,\n});\n\nexport default ProgressBar;\n\nconst Progress = React.forwardRef<\n  unknown,\n  Merge<IValueProps, React.HTMLAttributes<HTMLDivElement>>\n>(function (props, ref) {\n  logger.warn(\n    true,\n    \"Компонент '<Progress/>' является устаревшим, используйте '<ProgressBar.Value/>'\",\n    props['data-ui-name'] || ProgressBar.displayName,\n  );\n  return <ProgressBar.Value ref={ref} {...props} />;\n});\n\nconst Bar = React.forwardRef<\n  unknown,\n  Merge<IProgressBarProps, React.HTMLAttributes<HTMLDivElement>>\n>(function (props, ref) {\n  logger.warn(\n    true,\n    \"Компонент '<Bar/>' является устаревшим, используйте '<ProgressBar/>'\",\n    props['data-ui-name'] || ProgressBar.displayName,\n  );\n  return <ProgressBar ref={ref} {...props} />;\n});\n\nexport { Bar, Progress };\n"],"file":"ProgressBar.js"}
+{"version":3,"sources":["../../src/ProgressBar.js"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","logger","isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Children","styles","animation","other","useTheme","color","warn","undefined","displayName","style","children","Value","props","SValue","width","ProgressBar","Progress","forwardRef","ref","Bar"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\nimport logger from '@semcore/utils/lib/logger';\n\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme) {\n  return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component {\n  static displayName = 'ProgressBar';\n  static style = style;\n  static defaultProps = () => ({\n    duration: 1000,\n    size: 'm',\n    theme: 'invert',\n    children: <ProgressBar.Value />,\n  });\n\n  getValueProps() {\n    const { value, duration, size } = this.asProps;\n    return {\n      value,\n      duration,\n      size,\n    };\n  }\n\n  render() {\n    const SProgressBar = Root;\n    const { Children, styles, duration, size, theme, value, animation, ...other } = this.asProps;\n    const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n    const color = resolveColor(theme);\n\n    logger.warn(\n      animation !== undefined,\n      \"The 'animation' property is deprecated, use 'value'\",\n      other['data-ui-name'] || ProgressBarRoot.displayName,\n    );\n\n    return sstyled(styles)(\n      <SProgressBar\n        render={Box}\n        use:theme={useTheme}\n        use:animation={animation === undefined ? !value : animation}\n        use:duration={`${duration}ms`}\n        backgroundColor={color}\n      >\n        <Children />\n      </SProgressBar>,\n    );\n  }\n}\n\nfunction Value(props) {\n  const SValue = Root;\n  const { styles, value, size, theme, duration } = props;\n  const width = `${value}%`;\n  const color = resolveColor(theme);\n\n  return sstyled(styles)(\n    <SValue\n      render={Box}\n      use:width={width}\n      use:duration={`${duration}ms`}\n      backgroundColor={color}\n    />,\n  );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n  Value,\n});\n\nexport default ProgressBar;\n\nconst Progress = React.forwardRef(function (props, ref) {\n  logger.warn(\n    true,\n    \"Component '<Progress/>' is deprecated, use '<ProgressBar.Value/>'\",\n    props['data-ui-name'] || ProgressBar.displayName,\n  );\n  return <ProgressBar.Value ref={ref} {...props} />;\n});\n\nconst Bar = React.forwardRef(function (props, ref) {\n  logger.warn(\n    true,\n    \"Component '<Bar/>' is deprecated, please use '<ProgressBar/>'\",\n    props['data-ui-name'] || ProgressBar.displayName,\n  );\n  return <ProgressBar ref={ref} {...props} />;\n});\n\nexport { Bar, Progress };\n"],"file":"ProgressBar.js"}

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB;AACA,cAAc,eAAd","sourcesContent":["export { default } from './ProgressBar';\nexport * from './ProgressBar';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB;AACA,cAAc,eAAd","sourcesContent":["export { default } from './ProgressBar';\nexport * from './ProgressBar';\n"],"file":"index.js"}

package/lib/es6/style/progress-bar.shadow.css

@@ -31,23 +31,23 @@ SValue {
 
 SProgressBar[size='s'],
 SValue[size='s'] {
-  height: media(4px);
+  height: 4px;
   border-radius: 2px;
-  background-size: media(8px) media(8px);
+  background-size: 8px 8px;
 }
 
 SProgressBar[size='m'],
 SValue[size='m'] {
-  height: media(8px);
+  height: 8px;
   border-radius: 4px;
-  background-size: media(12px) media(12px);
+  background-size: 12px 12px;
 }
 
 SProgressBar[size='l'],
 SValue[size='l'] {
-  height: media(12px);
+  height: 12px;
   border-radius: 6px;
-  background-size: media(16px) media(16px);
+  background-size: 16px 16px;
 }
 
 SProgressBar[theme='dark'] {
@@ -81,3 +81,22 @@ SProgressBar[animation] {
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 }
+
+SProgressBar[theme='custom'] {
+  background-color: var(--backgroundColor);
+}
+SProgressBar[theme='custom'] {
+  background-image: var(--backgroundColor);
+}
+SProgressBar[animation] {
+  animation-duration: var(--duration);
+}
+
+SValue {
+  width: var(--width);
+  animation-duration: var(--duration);
+}
+SValue[theme] {
+  background-color: var(--backgroundColor);
+  background-image: var(--backgroundColor);
+}

package/lib/types/index.d.ts

@@ -1,2 +1,44 @@
-export { default } from './ProgressBar';
-export * from './ProgressBar';
+import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';
+import { IBoxProps } from '@semcore/flex-box';
+
+export interface IProgressBarProps extends IBoxProps {
+  /**
+   * Progress bar theme
+   * @default invert
+   */
+  theme?: 'dark' | 'invert' | string;
+  /**
+   * Progress bar size
+   * @default m
+   */
+  size?: 's' | 'm' | 'l';
+  /** Value as a percentage */
+  value?: number;
+  /** Duration of animation, ms
+   * @default 1000
+   */
+  duration?: number;
+  /** Sets an animated background
+   * @deprecated v2.0.0 {@link IProgressBarProps.value}
+   * */
+  animation?: boolean;
+}
+
+export interface IValueProps extends IBoxProps {
+  size?: 's' | 'm' | 'l';
+  value?: number;
+  duration?: number;
+  theme?: string;
+}
+
+export interface IProgressBarCxt {
+  getValueProps: PropGetterFn;
+}
+
+declare const ProgressBar: (<T>(
+  props: CProps<IProgressBarProps & T, IProgressBarCxt>,
+) => ReturnEl) & {
+  Value: <T>(props: IValueProps & T) => ReturnEl;
+};
+
+export default ProgressBar;

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@semcore/progress-bar",
   "description": "SEMRush ProgressBar Component",
-  "version": "2.1.0",
+  "version": "2.2.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
+  "sideEffects": false,
   "author": "Roman Lysov <r.lysov@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "build",
+    "build": "build --source=js",
     "test": "jest"
   },
   "dependencies": {
@@ -16,10 +17,15 @@
     "@semcore/flex-box": "^4"
   },
   "peerDependencies": {
-    "@semcore/core": "^1",
+    "@semcore/core": "^1.11",
     "react": "16.8 - 17"
   },
   "jest": {
-    "preset": "jest-preset-ui"
+    "preset": "@semcore/jest-preset-ui"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/semrush/intergalactic.git",
+    "directory": "semcore/progress-bar"
   }
 }

package/src/ProgressBar.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import { Box } from '@semcore/flex-box';
+import resolveColor from '@semcore/utils/lib/color';
+import logger from '@semcore/utils/lib/logger';
+
+import style from './style/progress-bar.shadow.css';
+
+function isCustomTheme(theme) {
+  return !['dark', 'invert'].includes(theme);
+}
+
+class ProgressBarRoot extends Component {
+  static displayName = 'ProgressBar';
+  static style = style;
+  static defaultProps = () => ({
+    duration: 1000,
+    size: 'm',
+    theme: 'invert',
+    children: <ProgressBar.Value />,
+  });
+
+  getValueProps() {
+    const { value, duration, size } = this.asProps;
+    return {
+      value,
+      duration,
+      size,
+    };
+  }
+
+  render() {
+    const SProgressBar = Root;
+    const { Children, styles, duration, size, theme, value, animation, ...other } = this.asProps;
+    const useTheme = isCustomTheme(theme) ? 'custom' : theme;
+    const color = resolveColor(theme);
+
+    logger.warn(
+      animation !== undefined,
+      "The 'animation' property is deprecated, use 'value'",
+      other['data-ui-name'] || ProgressBarRoot.displayName,
+    );
+
+    return sstyled(styles)(
+      <SProgressBar
+        render={Box}
+        use:theme={useTheme}
+        use:animation={animation === undefined ? !value : animation}
+        use:duration={`${duration}ms`}
+        backgroundColor={color}
+      >
+        <Children />
+      </SProgressBar>,
+    );
+  }
+}
+
+function Value(props) {
+  const SValue = Root;
+  const { styles, value, size, theme, duration } = props;
+  const width = `${value}%`;
+  const color = resolveColor(theme);
+
+  return sstyled(styles)(
+    <SValue
+      render={Box}
+      use:width={width}
+      use:duration={`${duration}ms`}
+      backgroundColor={color}
+    />,
+  );
+}
+
+const ProgressBar = createComponent(ProgressBarRoot, {
+  Value,
+});
+
+export default ProgressBar;
+
+const Progress = React.forwardRef(function (props, ref) {
+  logger.warn(
+    true,
+    "Component '<Progress/>' is deprecated, use '<ProgressBar.Value/>'",
+    props['data-ui-name'] || ProgressBar.displayName,
+  );
+  return <ProgressBar.Value ref={ref} {...props} />;
+});
+
+const Bar = React.forwardRef(function (props, ref) {
+  logger.warn(
+    true,
+    "Component '<Bar/>' is deprecated, please use '<ProgressBar/>'",
+    props['data-ui-name'] || ProgressBar.displayName,
+  );
+  return <ProgressBar ref={ref} {...props} />;
+});
+
+export { Bar, Progress };

package/src/index.d.ts

@@ -0,0 +1,44 @@
+import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';
+import { IBoxProps } from '@semcore/flex-box';
+
+export interface IProgressBarProps extends IBoxProps {
+  /**
+   * Progress bar theme
+   * @default invert
+   */
+  theme?: 'dark' | 'invert' | string;
+  /**
+   * Progress bar size
+   * @default m
+   */
+  size?: 's' | 'm' | 'l';
+  /** Value as a percentage */
+  value?: number;
+  /** Duration of animation, ms
+   * @default 1000
+   */
+  duration?: number;
+  /** Sets an animated background
+   * @deprecated v2.0.0 {@link IProgressBarProps.value}
+   * */
+  animation?: boolean;
+}
+
+export interface IValueProps extends IBoxProps {
+  size?: 's' | 'm' | 'l';
+  value?: number;
+  duration?: number;
+  theme?: string;
+}
+
+export interface IProgressBarCxt {
+  getValueProps: PropGetterFn;
+}
+
+declare const ProgressBar: (<T>(
+  props: CProps<IProgressBarProps & T, IProgressBarCxt>,
+) => ReturnEl) & {
+  Value: <T>(props: IValueProps & T) => ReturnEl;
+};
+
+export default ProgressBar;

package/src/style/progress-bar.shadow.css

@@ -31,23 +31,23 @@ SValue {
 
 SProgressBar[size='s'],
 SValue[size='s'] {
-  height: media(4px);
+  height: 4px;
   border-radius: 2px;
-  background-size: media(8px) media(8px);
+  background-size: 8px 8px;
 }
 
 SProgressBar[size='m'],
 SValue[size='m'] {
-  height: media(8px);
+  height: 8px;
   border-radius: 4px;
-  background-size: media(12px) media(12px);
+  background-size: 12px 12px;
 }
 
 SProgressBar[size='l'],
 SValue[size='l'] {
-  height: media(12px);
+  height: 12px;
   border-radius: 6px;
-  background-size: media(16px) media(16px);
+  background-size: 16px 16px;
 }
 
 SProgressBar[theme='dark'] {
@@ -81,3 +81,22 @@ SProgressBar[animation] {
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 }
+
+SProgressBar[theme='custom'] {
+  background-color: var(--backgroundColor);
+}
+SProgressBar[theme='custom'] {
+  background-image: var(--backgroundColor);
+}
+SProgressBar[animation] {
+  animation-duration: var(--duration);
+}
+
+SValue {
+  width: var(--width);
+  animation-duration: var(--duration);
+}
+SValue[theme] {
+  background-color: var(--backgroundColor);
+  background-image: var(--backgroundColor);
+}

package/lib/types/ProgressBar.d.ts

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Merge } from '@semcore/core';
-import { IBoxProps } from '@semcore/flex-box';
-export interface IProgressBarProps extends IBoxProps {
-    /**
-     * Progress bar theme
-     * @default invert
-     */
-    theme?: 'dark' | 'invert' | string;
-    /**
-     * Progress bar size
-     * @default m
-     */
-    size?: 's' | 'm' | 'l';
-    /** Value as a percentage */
-    value?: number;
-    /** ДDuration of animation, ms
-     * @default 1000
-     */
-    duration?: number;
-    /** Sets an animated background
-     * @deprecated v2.0.0 {@link IProgressBarProps.value}
-     * */
-    animation?: boolean;
-}
-export interface IValueProps extends IBoxProps {
-    size?: 's' | 'm' | 'l';
-    value?: number;
-    duration?: number;
-    theme?: string;
-}
-declare const ProgressBar: import("@semcore/core").ComponentType<Merge<IProgressBarProps, React.HTMLAttributes<HTMLDivElement>>, {
-    Value: Merge<IValueProps, React.HTMLAttributes<HTMLDivElement>>;
-}, {}, {
-    [key: string]: (arg: unknown) => void;
-}, null>;
-export default ProgressBar;
-declare const Progress: React.ForwardRefExoticComponent<Pick<Merge<IValueProps, React.HTMLAttributes<HTMLDivElement>>, import("csstype").FlexProperty<string>> & React.RefAttributes<unknown>>;
-declare const Bar: React.ForwardRefExoticComponent<Pick<Merge<IProgressBarProps, React.HTMLAttributes<HTMLDivElement>>, import("csstype").FlexProperty<string>> & React.RefAttributes<unknown>>;
-export { Bar, Progress };

package/src/ProgressBar.tsx

@@ -1,151 +0,0 @@
-import React from 'react';
-import createComponent, { Component, IFunctionProps, Merge, styled } from '@semcore/core';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import resolveColor from '@semcore/utils/lib/color';
-import logger from '@semcore/utils/lib/logger';
-
-import style from './style/progress-bar.shadow.css';
-
-export interface IProgressBarProps extends IBoxProps {
-  /**
-   * Progress bar theme
-   * @default invert
-   */
-  theme?: 'dark' | 'invert' | string;
-  /**
-   * Progress bar size
-   * @default m
-   */
-  size?: 's' | 'm' | 'l';
-  /** Value as a percentage */
-  value?: number;
-  /** ДDuration of animation, ms
-   * @default 1000
-   */
-  duration?: number;
-  /** Sets an animated background
-   * @deprecated v2.0.0 {@link IProgressBarProps.value}
-   * */
-  animation?: boolean;
-}
-
-export interface IValueProps extends IBoxProps {
-  size?: 's' | 'm' | 'l';
-  value?: number;
-  duration?: number;
-  theme?: string;
-}
-
-function isCustomTheme(theme) {
-  return !['dark', 'invert'].includes(theme);
-}
-
-class ProgressBarRoot extends Component<IProgressBarProps> {
-  static displayName = 'ProgressBar';
-  static style = style;
-  static defaultProps = () => ({
-    duration: 1000,
-    size: 'm',
-    theme: 'invert',
-    children: <ProgressBar.Value />,
-  });
-
-  getValueProps() {
-    const { value, duration, size } = this.asProps;
-    return {
-      value,
-      duration,
-      size,
-    };
-  }
-
-  render() {
-    const { Root: SProgressBar } = this;
-    const { Children, styles, duration, size, theme, value, animation, ...other } = this.asProps;
-    const speedValue = `${duration}ms`;
-    const useTheme = isCustomTheme(theme) ? 'custom' : theme;
-    const color = resolveColor(theme);
-
-    logger.warn(
-      animation !== undefined,
-      "Свойство 'animation' является устаревшим, используйте 'value'",
-      other['data-ui-name'] || ProgressBarRoot.displayName,
-    );
-
-    return styled(styles)`
-      SProgressBar[theme='custom'] {
-        background-color: ${color};
-      }
-      SProgressBar[theme='custom'] {
-        background-image: ${color};
-      }
-      SProgressBar[animation] {
-        animation-duration: ${speedValue};
-      }
-    `(
-      <SProgressBar
-        render={Box}
-        theme={useTheme}
-        animation={animation === undefined ? !value : animation}
-        size={size}
-      >
-        <Children />
-      </SProgressBar>,
-    );
-  }
-}
-
-function Value(props: IFunctionProps<IValueProps>) {
-  const { Root: SValue, styles, value, size, theme, duration } = props;
-  const width = `${value}%`;
-  const durationBackground = `${duration}ms`;
-  const color = resolveColor(theme);
-
-  return styled(styles)`
-    SValue {
-      width: ${width};
-      animation-duration: ${durationBackground};
-    }
-    SValue[theme] {
-      background-color: ${color};
-      background-image: ${color};
-    }
-  `(<SValue render={Box} theme={theme} size={size} />);
-}
-
-const ProgressBar = createComponent<
-  Merge<IProgressBarProps, React.HTMLAttributes<HTMLDivElement>>,
-  {
-    Value: Merge<IValueProps, React.HTMLAttributes<HTMLDivElement>>;
-  }
->(ProgressBarRoot, {
-  Value,
-});
-
-export default ProgressBar;
-
-const Progress = React.forwardRef<
-  unknown,
-  Merge<IValueProps, React.HTMLAttributes<HTMLDivElement>>
->(function (props, ref) {
-  logger.warn(
-    true,
-    "Компонент '<Progress/>' является устаревшим, используйте '<ProgressBar.Value/>'",
-    props['data-ui-name'] || ProgressBar.displayName,
-  );
-  return <ProgressBar.Value ref={ref} {...props} />;
-});
-
-const Bar = React.forwardRef<
-  unknown,
-  Merge<IProgressBarProps, React.HTMLAttributes<HTMLDivElement>>
->(function (props, ref) {
-  logger.warn(
-    true,
-    "Компонент '<Bar/>' является устаревшим, используйте '<ProgressBar/>'",
-    props['data-ui-name'] || ProgressBar.displayName,
-  );
-  return <ProgressBar ref={ref} {...props} />;
-});
-
-export { Bar, Progress };