npm - @semcore/progress-bar - Versions diffs - 2.3.0 → 3.0.1 - Mend

@semcore/progress-bar 2.3.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.md +20 -0
package/lib/cjs/ProgressBar.js +23 -60
package/lib/cjs/ProgressBar.js.map +1 -1
package/lib/cjs/index.d.ts +40 -0
package/lib/cjs/index.js +2 -19
package/lib/cjs/index.js.map +1 -1
package/lib/cjs/style/progress-bar.shadow.css +20 -22
package/lib/es6/ProgressBar.js +22 -48
package/lib/es6/ProgressBar.js.map +1 -1
package/lib/es6/index.d.ts +40 -0
package/lib/es6/index.js +0 -1
package/lib/es6/index.js.map +1 -1
package/lib/es6/style/progress-bar.shadow.css +20 -22
package/lib/types/index.d.ts +0 -4
package/package.json +4 -1
package/src/{ProgressBar.js → ProgressBar.jsx} +5 -34
package/src/index.d.ts +0 -4
package/src/index.js +0 -1
package/src/style/progress-bar.shadow.css +20 -22

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,26 @@
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
+## [3.0.1] - 2022-05-19
+### Changed
+- Version patch update due to children dependencies update (`@semcore/utils` [3.32.0 ~> 3.32.1], `@semcore/flex-box` [4.5.1 ~> 4.5.3]).
+## [3.0.0] - 2022-05-17
+### BREAK
+- Updated styles according to the library redesign policy.
+- Remove named import "Progress" and "Bar".
+- Remove "animation" props, use "value=0".
+## [2.3.1] - 2022-03-14
+### Changed
+- Version patch update due to children dependencies update (`@semcore/utils` [3.31.2 ~> 3.31.2], `@semcore/flex-box` [4.5.0 ~> 4.5.1]).
 ## [2.3.0] - 2021-03-04
 ### Added

package/lib/cjs/ProgressBar.js CHANGED Viewed

@@ -7,11 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Progress = exports.Bar = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+exports["default"] = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -33,10 +29,6 @@ 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; }
@@ -54,25 +46,25 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SProgressBar_1jx5f_gg_{position:relative;width:100%;overflow:hidden}.___SValue_1jx5f_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_1v03k;animation-name:loading_1v03k;-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_1jx5f_gg_._size_s_1jx5f_gg_,.___SValue_1jx5f_gg_._size_s_1jx5f_gg_{height:4px;border-radius:2px;background-size:8px 8px}.___SProgressBar_1jx5f_gg_._size_m_1jx5f_gg_,.___SValue_1jx5f_gg_._size_m_1jx5f_gg_{height:8px;border-radius:4px;background-size:12px 12px}.___SProgressBar_1jx5f_gg_._size_l_1jx5f_gg_,.___SValue_1jx5f_gg_._size_l_1jx5f_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_1jx5f_gg_._theme_dark_1jx5f_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_1jx5f_gg_._theme_invert_1jx5f_gg_{background-color:#dee3e5}@-webkit-keyframes loading_1v03k{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1v03k{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{background-image:linear-gradient(-45deg,#c8ccce 25%,#dee3e5 0,#dee3e5 50%,#c8ccce 0,#c8ccce 76%,#dee3e5 0);-webkit-animation-name:loading_1v03k;animation-name:loading_1v03k;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_1jx5f_gg_._theme_custom_1jx5f_gg_{background-color:var(--backgroundColor_1v03k)}.___SProgressBar_1jx5f_gg_._theme_custom_1jx5f_gg_{background-image:var(--backgroundColor_1v03k)}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{-webkit-animation-duration:var(--duration_1v03k);animation-duration:var(--duration_1v03k)}.___SValue_1jx5f_gg_{width:var(--width_1v03k);-webkit-animation-duration:var(--duration_1v03k);animation-duration:var(--duration_1v03k)}.___SValue_1jx5f_gg_.__theme_1jx5f_gg_{background-color:var(--backgroundColor_1v03k);background-image:var(--backgroundColor_1v03k)}@media (prefers-reduced-motion){.___SValue_1jx5f_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{-webkit-animation-name:none;animation-name:none}}"
+".___SProgressBar_8d83n_gg_{position:relative;width:100%;overflow:hidden}.___SValue_8d83n_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#008f74 25%,#009f81 0,#009f81 50%,#008f74 0,#008f74 76%,#009f81 0);overflow:hidden;-webkit-animation-name:loading_1tcsv8p;animation-name:loading_1tcsv8p;-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_8d83n_gg_._size_s_8d83n_gg_,.___SValue_8d83n_gg_._size_s_8d83n_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_8d83n_gg_._size_m_8d83n_gg_,.___SValue_8d83n_gg_._size_m_8d83n_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_8d83n_gg_._size_l_8d83n_gg_,.___SValue_8d83n_gg_._size_l_8d83n_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_8d83n_gg_._theme_dark_8d83n_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_8d83n_gg_._theme_invert_8d83n_gg_{background-color:#e0e1e9}@-webkit-keyframes loading_1tcsv8p{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1tcsv8p{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);-webkit-animation-name:loading_1tcsv8p;animation-name:loading_1tcsv8p;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_8d83n_gg_._theme_custom_8d83n_gg_{background-color:var(--\u0441olorBg_1tcsv8p);background-image:var(--\u0441olorBg_1tcsv8p)}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{-webkit-animation-duration:var(--duration_1tcsv8p);animation-duration:var(--duration_1tcsv8p)}.___SValue_8d83n_gg_{width:var(--width_1tcsv8p);-webkit-animation-duration:var(--duration_1tcsv8p);animation-duration:var(--duration_1tcsv8p)}.___SValue_8d83n_gg_.__theme_8d83n_gg_{background-color:var(--\u0441olorBg_1tcsv8p);background-image:var(--\u0441olorBg_1tcsv8p)}@media (prefers-reduced-motion){.___SValue_8d83n_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{-webkit-animation-name:none;animation-name:none}}"
 /*__inner_css_end__*/
-, "1v03k_gg_")
+, "1tcsv8p_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SProgressBar": "___SProgressBar_1jx5f_gg_",
-  "__SValue": "___SValue_1jx5f_gg_",
-  "_size_s": "_size_s_1jx5f_gg_",
-  "_size_m": "_size_m_1jx5f_gg_",
-  "_size_l": "_size_l_1jx5f_gg_",
-  "_theme_dark": "_theme_dark_1jx5f_gg_",
-  "_theme_invert": "_theme_invert_1jx5f_gg_",
-  "@loading": "loading_1v03k",
-  "_animation": "__animation_1jx5f_gg_",
-  "_theme_custom": "_theme_custom_1jx5f_gg_",
-  "--backgroundColor": "--backgroundColor_1v03k",
-  "--duration": "--duration_1v03k",
-  "--width": "--width_1v03k",
-  "_theme": "__theme_1jx5f_gg_"
+  "__SProgressBar": "___SProgressBar_8d83n_gg_",
+  "__SValue": "___SValue_8d83n_gg_",
+  "_size_s": "_size_s_8d83n_gg_",
+  "_size_m": "_size_m_8d83n_gg_",
+  "_size_l": "_size_l_8d83n_gg_",
+  "_theme_dark": "_theme_dark_8d83n_gg_",
+  "_theme_invert": "_theme_invert_8d83n_gg_",
+  "@loading": "loading_1tcsv8p",
+  "_animation": "__animation_8d83n_gg_",
+  "_theme_custom": "_theme_custom_8d83n_gg_",
+  "--\u0441olorBg": "--\u0441olorBg_1tcsv8p",
+  "--duration": "--duration_1tcsv8p",
+  "--width": "--width_1tcsv8p",
+  "_theme": "__theme_8d83n_gg_"
 });
 function isCustomTheme(theme) {
@@ -105,7 +97,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref3;
       var SProgressBar = _flexBox.Box;
@@ -113,21 +105,14 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
           Children = _this$asProps2.Children,
           styles = _this$asProps2.styles,
           duration = _this$asProps2.duration,
-          size = _this$asProps2.size,
           theme = _this$asProps2.theme,
-          value = _this$asProps2.value,
-          animation = _this$asProps2.animation,
-          other = (0, _objectWithoutProperties2["default"])(_this$asProps2, _excluded);
+          value = _this$asProps2.value;
       var useTheme = isCustomTheme(theme) ? 'custom' : theme;
-      var color = (0, _color["default"])(theme);
-      _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:animation": !value,
         "use:duration": "".concat(duration, "ms"),
-        "backgroundColor": color
+        "\u0441olorBg": (0, _color["default"])(theme)
       }, _ref))), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})));
     }
   }]);
@@ -146,21 +131,19 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
 });
 function Value(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = 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 color = (0, _color["default"])(theme);
   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
+    "\u0441olorBg": (0, _color["default"])(theme)
   }, _ref2))));
 }
@@ -169,24 +152,4 @@ var ProgressBar = (0, _core["default"])(ProgressBarRoot, {
 });
 var _default = ProgressBar;
 exports["default"] = _default;
-var Progress = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  _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
-  }, props));
-});
-exports.Progress = Progress;
-var Bar = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  _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
-  }, props));
-});
-exports.Bar = Bar;
 //# sourceMappingURL=ProgressBar.js.map

package/lib/cjs/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AACA;;AADA;;AAEA;;AACA~~;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAIA,SAASA,aAAT,CAAuBC,KAAvB,EAA8B;AAC5B,SAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;WAUJ,yBAAgB;AACd,0BAAkC,KAAKC,OAAvC;AAAA,UAAQC,KAAR,iBAAQA,KAAR;AAAA,UAAeC,QAAf,iBAAeA,QAAf;AAAA,UAAyBC,IAAzB,iBAAyBA,IAAzB;AACA,aAAO;AACLF,QAAAA,KAAK,EAALA,KADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,IAAI,EAAJA;AAHK,OAAP;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,~~GAaNC~~,~~YAbZ~~;AACA,~~2BAAgF~~,KAAKL,~~OAArF~~;AAAA,UAAQM,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BL,QAA1B,kBAA0BA,QAA1B;AAAA,~~UAAoCC~~,~~IAApC~~,kBAAoCA,~~IAApC~~;AAAA,~~UAA0CN~~,~~KAA1C~~,~~kBAA0CA~~,~~KAA1C~~;~~AAAA,UAAiDI,KAAjD,kBAAiDA,KAAjD;AAAA,UAAwDO,SAAxD,kBAAwDA,SAAxD;AAAA,UAAsEC,KAAtE;~~AACA,~~UAAMC~~,QAAQ,~~GAAGd~~,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;~~AACA~~,~~UAAMc,KAAK,GAAG,uBAAad,KAAb,CAAd;;AAEAe,yBAAOC,IAAP,CACEL,SAAS,KAAKM,SADhB,EAEE,qDAFF,EAGEL,KAAK,CAAC,cAAD,CAAL,IAAyBV,eAAe,CAACgB,WAH3C;;AAMA,~~qBAAO,~~mBAAQR~~,MAAR,CAAP,eACE,gCAAC,YAAD;AAAA,~~qBAEaG~~,QAFb;AAAA,~~yBAGiBF~~,~~SAAS~~,~~KAAKM,SAAd,GAA0B,CAACb,KAA3B,GAAmCO,SAHpD~~;AAAA,~~kCAImBN~~,QAJnB;AAAA,~~2BAKmBS~~;~~AALnB~~,+BAOE,gCAAC,QAAD,2BAPF,CADF;AAWD;;;~~EA1C2BK~~,e;;~~iCAAxBjB~~,e,iBACiB,a;iCADjBA,e,~~WAEWkB~~,K;~~iCAFXlB~~,e,kBAGkB;AAAA,SAAO;AAC3BG,IAAAA,QAAQ,EAAE,IADiB;AAE3BC,IAAAA,IAAI,EAAE,GAFqB;AAG3BN,IAAAA,KAAK,EAAE,QAHoB;~~AAI3BqB~~,IAAAA,QAAQ,eAAE,gCAAC,WAAD,CAAa,KAAb;AAJiB,GAAP;AAAA,C;;~~AA0CxB~~,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMC,MAAM,~~GAOAhB~~,~~YAPZ~~;AACA,MAAQE,MAAR,~~GAAiDa~~,~~KAAjD~~,~~CAAQb~~,MAAR;AAAA,MAAgBN,KAAhB,~~GAAiDmB~~,~~KAAjD~~,~~CAAgBnB~~,KAAhB;AAAA,~~MAAuBE~~,~~IAAvB~~,~~GAAiDiB~~,~~KAAjD~~,~~CAAuBjB~~,~~IAAvB~~;AAAA,~~MAA6BN~~,~~KAA7B~~,~~GAAiDuB~~,~~KAAjD~~,~~CAA6BvB~~,~~KAA7B~~;~~AAAA,MAAoCK,QAApC,GAAiDkB,KAAjD,CAAoClB,QAApC;~~AACA,~~MAAMoB~~,KAAK,~~aAAMrB~~,KAAN,MAAX;~~AACA,MAAMU,KAAK,GAAG,uBAAad,KAAb,CAAd;~~AAEA,iBAAO,~~mBAAQU~~,MAAR,CAAP,eACE,gCAAC,MAAD;AAAA,~~iBAEae~~,KAFb;AAAA,~~8BAGmBpB~~,QAHnB;AAAA,~~uBAImBS~~;~~AAJnB~~,cADF;AAQD;;AAED,~~IAAMY~~,WAAW,GAAG,~~sBAAgBxB~~,eAAhB,EAAiC;~~AACnDoB~~,EAAAA,KAAK,EAALA;AADmD,CAAjC,CAApB;eAIeI,W;;;AAEf,IAAMC,QAAQ,gBAAGC,kBAAMC,UAAN,CAAiB,UAAUN,KAAV,EAAiBO,GAAjB,EAAsB;AACtDf,qBAAOC,IAAP,CACE,IADF,EAEE,mEAFF,EAGEO,KAAK,CAAC,cAAD,CAAL,IAAyBG,WAAW,CAACR,WAHvC;;AAKA,sBAAO,gCAAC,WAAD,CAAa,KAAb;AAAmB,IAAA,GAAG,EAAEY;AAAxB,KAAiCP,KAAjC,EAAP;AACD,CAPgB,CAAjB;;;;AASA,IAAMQ,GAAG,gBAAGH,kBAAMC,UAAN,CAAiB,UAAUN,KAAV,EAAiBO,GAAjB,EAAsB;AACjDf,qBAAOC,IAAP,CACE,IADF,EAEE,+DAFF,EAGEO,KAAK,CAAC,cAAD,CAAL,IAAyBG,WAAW,CAACR,WAHvC;;AAKA,sBAAO,gCAAC,WAAD;AAAa,IAAA,GAAG,EAAEY;AAAlB,KAA2BP,KAA3B,EAAP;AACD,CAPW,CAAZ","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"}
1	+ {"version":3,"sources":["../../src/ProgressBar.jsx"],"names":["isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Box","Children","styles","useTheme","Component","style","children","Value","props","SValue","width","ProgressBar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASA,aAAT,CAAuBC,KAAvB,EAA8B;AAC5B,SAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;WAUJ,yBAAgB;AACd,0BAAkC,KAAKC,OAAvC;AAAA,UAAQC,KAAR,iBAAQA,KAAR;AAAA,UAAeC,QAAf,iBAAeA,QAAf;AAAA,UAAyBC,IAAzB,iBAAyBA,IAAzB;AACA,aAAO;AACLF,QAAAA,KAAK,EAALA,KADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,IAAI,EAAJA;AAHK,OAAP;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAMNC,YANZ;AACA,2BAAqD,KAAKL,OAA1D;AAAA,UAAQM,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BL,QAA1B,kBAA0BA,QAA1B;AAAA,UAAoCL,KAApC,kBAAoCA,KAApC;AAAA,UAA2CI,KAA3C,kBAA2CA,KAA3C;AACA,UAAMO,QAAQ,GAAGZ,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;AAEA,qBAAO,mBAAQU,MAAR,CAAP,eACE,gCAAC,YAAD;AAAA,qBAEaC,QAFb;AAAA,yBAGiB,CAACP,KAHlB;AAAA,kCAImBC,QAJnB;AAAA,wBAKW,uBAAaL,KAAb;AALX,+BAOE,gCAAC,QAAD,2BAPF,CADF;AAWD;;;EAnC2BY,e;;iCAAxBV,e,iBACiB,a;iCADjBA,e,WAEWW,K;iCAFXX,e,kBAGkB;AAAA,SAAO;AAC3BG,IAAAA,QAAQ,EAAE,IADiB;AAE3BC,IAAAA,IAAI,EAAE,GAFqB;AAG3BN,IAAAA,KAAK,EAAE,QAHoB;AAI3Bc,IAAAA,QAAQ,eAAE,gCAAC,WAAD,CAAa,KAAb;AAJiB,GAAP;AAAA,C;;AAmCxB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMC,MAAM,GAMAT,YANZ;AACA,MAAQE,MAAR,GAA2CM,KAA3C,CAAQN,MAAR;AAAA,MAAgBN,KAAhB,GAA2CY,KAA3C,CAAgBZ,KAAhB;AAAA,MAAuBJ,KAAvB,GAA2CgB,KAA3C,CAAuBhB,KAAvB;AAAA,MAA8BK,QAA9B,GAA2CW,KAA3C,CAA8BX,QAA9B;AACA,MAAMa,KAAK,aAAMd,KAAN,MAAX;AAEA,iBAAO,mBAAQM,MAAR,CAAP,eACE,gCAAC,MAAD;AAAA,iBAEaQ,KAFb;AAAA,8BAGmBb,QAHnB;AAAA,oBAIW,uBAAaL,KAAb;AAJX,cADF;AAQD;;AAED,IAAMmB,WAAW,GAAG,sBAAgBjB,eAAhB,EAAiC;AACnDa,EAAAA,KAAK,EAALA;AADmD,CAAjC,CAApB;eAIeI,W","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';\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, theme, value } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={!value}\n use:duration={`${duration}ms`}\n сolorBg={resolveColor(theme)}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration } = props;\n const width = `${value}%`;\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n сolorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"file":"ProgressBar.js"}

package/lib/cjs/index.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+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;
+}
+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/lib/cjs/index.js CHANGED Viewed

@@ -1,11 +1,10 @@
 "use strict";
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
   }
 });
-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() {
-      return _ProgressBar[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; }
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './ProgressBar';\n"],"file":"index.js"}

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

@@ -12,12 +12,12 @@ SValue {
   left: 0;
   background-image: linear-gradient(
     -45deg,
-    color-mod(var(--green) shade(10%)) 25%,
-    var(--green) 0,
-    var(--green) 50%,
-    color-mod(var(--green) shade(10%)) 0,
-    color-mod(var(--green) shade(10%)) 76%,
-    var(--green) 0
+    color-mod(var(--green-400) shade(10%)) 25%,
+    var(--green-400) 0,
+    var(--green-400) 50%,
+    color-mod(var(--green-400) shade(10%)) 0,
+    color-mod(var(--green-400) shade(10%)) 76%,
+    var(--green-400) 0
   );
   overflow: hidden;
@@ -32,21 +32,21 @@ SValue {
 SProgressBar[size='s'],
 SValue[size='s'] {
   height: 4px;
-  border-radius: 2px;
+  border-radius: var(--rounded-m);
   background-size: 8px 8px;
 }
 SProgressBar[size='m'],
 SValue[size='m'] {
   height: 8px;
-  border-radius: 4px;
+  border-radius: var(--rounded-m);
   background-size: 12px 12px;
 }
 SProgressBar[size='l'],
 SValue[size='l'] {
   height: 12px;
-  border-radius: 6px;
+  border-radius: var(--rounded-m);
   background-size: 16px 16px;
 }
@@ -55,7 +55,7 @@ SProgressBar[theme='dark'] {
 }
 SProgressBar[theme='invert'] {
-  background-color: var(--mercury);
+  background-color: var(--gray-100);
 }
 @keyframes loading {
@@ -70,12 +70,12 @@ SProgressBar[theme='invert'] {
 SProgressBar[animation] {
   background-image: linear-gradient(
     -45deg,
-    color-mod(var(--mercury) shade(10%)) 25%,
-    var(--mercury) 0,
-    var(--mercury) 50%,
-    color-mod(var(--mercury) shade(10%)) 0,
-    color-mod(var(--mercury) shade(10%)) 76%,
-    var(--mercury) 0
+    color-mod(var(--gray-100) shade(10%)) 25%,
+    var(--gray-100) 0,
+    var(--gray-100) 50%,
+    color-mod(var(--gray-100) shade(10%)) 0,
+    color-mod(var(--gray-100) shade(10%)) 76%,
+    var(--gray-100) 0
   );
   animation-name: loading;
   animation-timing-function: linear;
@@ -83,10 +83,8 @@ SProgressBar[animation] {
 }
 SProgressBar[theme='custom'] {
-  background-color: var(--backgroundColor);
-}
-SProgressBar[theme='custom'] {
-  background-image: var(--backgroundColor);
+  background-color: var(--сolorBg);
+  background-image: var(--сolorBg);
 }
 SProgressBar[animation] {
   animation-duration: var(--duration);
@@ -97,8 +95,8 @@ SValue {
   animation-duration: var(--duration);
 }
 SValue[theme] {
-  background-color: var(--backgroundColor);
-  background-image: var(--backgroundColor);
+  background-color: var(--сolorBg);
+  background-image: var(--сolorBg);
 }
 @media (prefers-reduced-motion) {

package/lib/es6/ProgressBar.js CHANGED Viewed

@@ -1,5 +1,3 @@
-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";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -9,7 +7,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
@@ -23,32 +20,31 @@ 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';
 /*__reshadow-styles__:"./style/progress-bar.shadow.css"*/
 var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SProgressBar_1jx5f_gg_{position:relative;width:100%;overflow:hidden}.___SValue_1jx5f_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_1v03k;animation-name:loading_1v03k;-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_1jx5f_gg_._size_s_1jx5f_gg_,.___SValue_1jx5f_gg_._size_s_1jx5f_gg_{height:4px;border-radius:2px;background-size:8px 8px}.___SProgressBar_1jx5f_gg_._size_m_1jx5f_gg_,.___SValue_1jx5f_gg_._size_m_1jx5f_gg_{height:8px;border-radius:4px;background-size:12px 12px}.___SProgressBar_1jx5f_gg_._size_l_1jx5f_gg_,.___SValue_1jx5f_gg_._size_l_1jx5f_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_1jx5f_gg_._theme_dark_1jx5f_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_1jx5f_gg_._theme_invert_1jx5f_gg_{background-color:#dee3e5}@-webkit-keyframes loading_1v03k{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1v03k{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{background-image:linear-gradient(-45deg,#c8ccce 25%,#dee3e5 0,#dee3e5 50%,#c8ccce 0,#c8ccce 76%,#dee3e5 0);-webkit-animation-name:loading_1v03k;animation-name:loading_1v03k;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_1jx5f_gg_._theme_custom_1jx5f_gg_{background-color:var(--backgroundColor_1v03k)}.___SProgressBar_1jx5f_gg_._theme_custom_1jx5f_gg_{background-image:var(--backgroundColor_1v03k)}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{-webkit-animation-duration:var(--duration_1v03k);animation-duration:var(--duration_1v03k)}.___SValue_1jx5f_gg_{width:var(--width_1v03k);-webkit-animation-duration:var(--duration_1v03k);animation-duration:var(--duration_1v03k)}.___SValue_1jx5f_gg_.__theme_1jx5f_gg_{background-color:var(--backgroundColor_1v03k);background-image:var(--backgroundColor_1v03k)}@media (prefers-reduced-motion){.___SValue_1jx5f_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_1jx5f_gg_.__animation_1jx5f_gg_{-webkit-animation-name:none;animation-name:none}}"
+".___SProgressBar_8d83n_gg_{position:relative;width:100%;overflow:hidden}.___SValue_8d83n_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#008f74 25%,#009f81 0,#009f81 50%,#008f74 0,#008f74 76%,#009f81 0);overflow:hidden;-webkit-animation-name:loading_1tcsv8p;animation-name:loading_1tcsv8p;-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_8d83n_gg_._size_s_8d83n_gg_,.___SValue_8d83n_gg_._size_s_8d83n_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_8d83n_gg_._size_m_8d83n_gg_,.___SValue_8d83n_gg_._size_m_8d83n_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_8d83n_gg_._size_l_8d83n_gg_,.___SValue_8d83n_gg_._size_l_8d83n_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_8d83n_gg_._theme_dark_8d83n_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_8d83n_gg_._theme_invert_8d83n_gg_{background-color:#e0e1e9}@-webkit-keyframes loading_1tcsv8p{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1tcsv8p{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);-webkit-animation-name:loading_1tcsv8p;animation-name:loading_1tcsv8p;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_8d83n_gg_._theme_custom_8d83n_gg_{background-color:var(--\u0441olorBg_1tcsv8p);background-image:var(--\u0441olorBg_1tcsv8p)}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{-webkit-animation-duration:var(--duration_1tcsv8p);animation-duration:var(--duration_1tcsv8p)}.___SValue_8d83n_gg_{width:var(--width_1tcsv8p);-webkit-animation-duration:var(--duration_1tcsv8p);animation-duration:var(--duration_1tcsv8p)}.___SValue_8d83n_gg_.__theme_8d83n_gg_{background-color:var(--\u0441olorBg_1tcsv8p);background-image:var(--\u0441olorBg_1tcsv8p)}@media (prefers-reduced-motion){.___SValue_8d83n_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_8d83n_gg_.__animation_8d83n_gg_{-webkit-animation-name:none;animation-name:none}}"
 /*__inner_css_end__*/
-, "1v03k_gg_")
+, "1tcsv8p_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SProgressBar": "___SProgressBar_1jx5f_gg_",
-  "__SValue": "___SValue_1jx5f_gg_",
-  "_size_s": "_size_s_1jx5f_gg_",
-  "_size_m": "_size_m_1jx5f_gg_",
-  "_size_l": "_size_l_1jx5f_gg_",
-  "_theme_dark": "_theme_dark_1jx5f_gg_",
-  "_theme_invert": "_theme_invert_1jx5f_gg_",
-  "@loading": "loading_1v03k",
-  "_animation": "__animation_1jx5f_gg_",
-  "_theme_custom": "_theme_custom_1jx5f_gg_",
-  "--backgroundColor": "--backgroundColor_1v03k",
-  "--duration": "--duration_1v03k",
-  "--width": "--width_1v03k",
-  "_theme": "__theme_1jx5f_gg_"
+  "__SProgressBar": "___SProgressBar_8d83n_gg_",
+  "__SValue": "___SValue_8d83n_gg_",
+  "_size_s": "_size_s_8d83n_gg_",
+  "_size_m": "_size_m_8d83n_gg_",
+  "_size_l": "_size_l_8d83n_gg_",
+  "_theme_dark": "_theme_dark_8d83n_gg_",
+  "_theme_invert": "_theme_invert_8d83n_gg_",
+  "@loading": "loading_1tcsv8p",
+  "_animation": "__animation_8d83n_gg_",
+  "_theme_custom": "_theme_custom_8d83n_gg_",
+  "--\u0441olorBg": "--\u0441olorBg_1tcsv8p",
+  "--duration": "--duration_1tcsv8p",
+  "--width": "--width_1tcsv8p",
+  "_theme": "__theme_8d83n_gg_"
 });
 function isCustomTheme(theme) {
@@ -82,29 +78,22 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref3;
       var SProgressBar = Box;
       var _this$asProps2 = this.asProps,
           Children = _this$asProps2.Children,
           styles = _this$asProps2.styles,
           duration = _this$asProps2.duration,
-          size = _this$asProps2.size,
           theme = _this$asProps2.theme,
-          value = _this$asProps2.value,
-          animation = _this$asProps2.animation,
-          other = _objectWithoutProperties(_this$asProps2, _excluded);
+          value = _this$asProps2.value;
       var useTheme = isCustomTheme(theme) ? 'custom' : theme;
-      var color = resolveColor(theme);
-      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:animation": !value,
         "use:duration": "".concat(duration, "ms"),
-        "backgroundColor": color
+        "\u0441olorBg": resolveColor(theme)
       }, _ref))), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})));
     }
   }]);
@@ -126,21 +115,19 @@ _defineProperty(ProgressBarRoot, "defaultProps", function () {
 });
 function Value(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = 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 color = resolveColor(theme);
   return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SValue, _ref4.cn("SValue", _objectSpread({}, _assignProps2({
     "use:width": width,
     "use:duration": "".concat(duration, "ms"),
-    "backgroundColor": color
+    "\u0441olorBg": resolveColor(theme)
   }, _ref2))));
 }
@@ -148,17 +135,4 @@ var ProgressBar = createComponent(ProgressBarRoot, {
   Value: Value
 });
 export default ProgressBar;
-var Progress = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  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, "Component '<Bar/>' is deprecated, please use '<ProgressBar/>'", props['data-ui-name'] || ProgressBar.displayName);
-  return /*#__PURE__*/React.createElement(ProgressBar, _extends({
-    ref: ref
-  }, props));
-});
-export { Bar, Progress };
 //# sourceMappingURL=ProgressBar.js.map

package/lib/es6/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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":"~~;;;;;;;;;;;;;;;;;;;;;~~AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,MAAyB,0BAAzB~~;AACA,OAAOC,MAAP,MAAmB,2BAAnB~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASC,aAAT,CAAuBC,KAAvB,EAA8B;AAC5B,SAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;;WAUJ,yBAAgB;AACd,0BAAkC,KAAKC,OAAvC;AAAA,UAAQC,KAAR,iBAAQA,KAAR;AAAA,UAAeC,QAAf,iBAAeA,QAAf;AAAA,UAAyBC,IAAzB,iBAAyBA,IAAzB;AACA,aAAO;AACLF,QAAAA,KAAK,EAALA,KADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,IAAI,EAAJA;AAHK,OAAP;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,~~GAaNX~~,~~GAbZ;;~~AACA,~~2BAAgF~~,~~KAAKO~~,~~OAArF~~;AAAA,UAAQK,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BJ,QAA1B,kBAA0BA,QAA1B;AAAA,~~UAAoCC~~,~~IAApC~~,kBAAoCA,~~IAApC~~;AAAA,~~UAA0CN~~,~~KAA1C~~,~~kBAA0CA~~,~~KAA1C~~;~~AAAA,UAAiDI,KAAjD,kBAAiDA,KAAjD;AAAA,UAAwDM,SAAxD,kBAAwDA,SAAxD;AAAA,UAAsEC,KAAtE;;~~AACA,~~UAAMC~~,QAAQ,~~GAAGb~~,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;~~AACA~~,~~UAAMa~~,~~KAAK~~,~~GAAGhB,YAAY,CAACG,KAAD,CAA1B;AAEAF,MAAAA,MAAM,CAACgB,IAAP,CACEJ,SAAS,KAAKK,SADhB,EAEE,qDAFF,EAGEJ,KAAK,CAAC,cAAD,CAAL,IAAyBT,eAAe,~~CAACc,~~WAH3C;AAMA,qBAAOtB,OAAO,CAACe,~~MAAD,CAAd,eACE,oBAAC,YAAD;AAAA,~~qBAEaG~~,QAFb;AAAA,~~yBAGiBF~~,~~SAAS~~,~~KAAKK,SAAd,GAA0B,CAACX,KAA3B,GAAmCM,SAHpD~~;AAAA,~~kCAImBL~~,QAJnB;AAAA,~~2BAKmBQ~~;~~AALnB~~,+BAOE,oBAAC,QAAD,2BAPF,CADF;AAWD;;;;~~EA1C2BpB~~,S;;~~gBAAxBS~~,e,iBACiB,a;;gBADjBA,e,~~WAEWe~~,K;;~~gBAFXf~~,e,kBAGkB;AAAA,SAAO;AAC3BG,IAAAA,QAAQ,EAAE,IADiB;AAE3BC,IAAAA,IAAI,EAAE,GAFqB;AAG3BN,IAAAA,KAAK,EAAE,QAHoB;~~AAI3BkB~~,IAAAA,QAAQ,eAAE,oBAAC,WAAD,CAAa,KAAb;AAJiB,GAAP;AAAA,C;;~~AA0CxB~~,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMC,MAAM,~~GAOAzB~~,~~GAPZ~~;AACA,~~MAAQa~~,MAAR,~~GAAiDW~~,~~KAAjD~~,~~CAAQX~~,MAAR;AAAA,MAAgBL,KAAhB,~~GAAiDgB~~,~~KAAjD~~,~~CAAgBhB~~,KAAhB;AAAA,~~MAAuBE~~,~~IAAvB~~,~~GAAiDc~~,~~KAAjD~~,CAAuBd,~~IAAvB~~;AAAA,~~MAA6BN~~,~~KAA7B~~,~~GAAiDoB~~,~~KAAjD~~,~~CAA6BpB~~,~~KAA7B~~;~~AAAA,MAAoCK,QAApC,GAAiDe,KAAjD,CAAoCf,QAApC;~~AACA,~~MAAMiB~~,KAAK,~~aAAMlB~~,KAAN,MAAX;~~AACA,MAAMS,KAAK,GAAGhB,YAAY,CAACG,KAAD,CAA1B;~~AAEA,~~iBAAON~~,OAAO,~~CAACe~~,MAAD,CAAd,eACE,oBAAC,MAAD;AAAA,~~iBAEaa~~,KAFb;AAAA,~~8BAGmBjB~~,QAHnB;AAAA,~~uBAImBQ~~;~~AAJnB~~,cADF;AAQD;;AAED,~~IAAMU~~,WAAW,~~GAAG/B~~,eAAe,~~CAACU~~,eAAD,EAAkB;~~AACnDiB~~,EAAAA,KAAK,EAALA;AADmD,CAAlB,CAAnC;AAIA,eAAeI,WAAf;AAEA,IAAMC,QAAQ,gBAAGjC,KAAK,CAACkC,UAAN,CAAiB,UAAUL,KAAV,EAAiBM,GAAjB,EAAsB;AACtD5B,EAAAA,MAAM,CAACgB,IAAP,CACE,IADF,EAEE,mEAFF,EAGEM,KAAK,CAAC,cAAD,CAAL,IAAyBG,WAAW,CAACP,WAHvC;AAKA,sBAAO,oBAAC,WAAD,CAAa,KAAb;AAAmB,IAAA,GAAG,EAAEU;AAAxB,KAAiCN,KAAjC,EAAP;AACD,CAPgB,CAAjB;AASA,IAAMO,GAAG,gBAAGpC,KAAK,CAACkC,UAAN,CAAiB,UAAUL,KAAV,EAAiBM,GAAjB,EAAsB;AACjD5B,EAAAA,MAAM,CAACgB,IAAP,CACE,IADF,EAEE,+DAFF,EAGEM,KAAK,CAAC,cAAD,CAAL,IAAyBG,WAAW,CAACP,WAHvC;AAKA,sBAAO,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAEU;AAAlB,KAA2BN,KAA3B,EAAP;AACD,CAPW,CAAZ;AASA,SAASO,GAAT,EAAcH,QAAd","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"}
1	+ {"version":3,"sources":["../../src/ProgressBar.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Children","styles","useTheme","style","children","Value","props","SValue","width","ProgressBar"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,MAAyB,0BAAzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASC,aAAT,CAAuBC,KAAvB,EAA8B;AAC5B,SAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;;WAUJ,yBAAgB;AACd,0BAAkC,KAAKC,OAAvC;AAAA,UAAQC,KAAR,iBAAQA,KAAR;AAAA,UAAeC,QAAf,iBAAeA,QAAf;AAAA,UAAyBC,IAAzB,iBAAyBA,IAAzB;AACA,aAAO;AACLF,QAAAA,KAAK,EAALA,KADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,IAAI,EAAJA;AAHK,OAAP;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAMNV,GANZ;AACA,2BAAqD,KAAKM,OAA1D;AAAA,UAAQK,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BJ,QAA1B,kBAA0BA,QAA1B;AAAA,UAAoCL,KAApC,kBAAoCA,KAApC;AAAA,UAA2CI,KAA3C,kBAA2CA,KAA3C;AACA,UAAMM,QAAQ,GAAGX,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;AAEA,qBAAOL,OAAO,CAACc,MAAD,CAAd,eACE,oBAAC,YAAD;AAAA,qBAEaC,QAFb;AAAA,yBAGiB,CAACN,KAHlB;AAAA,kCAImBC,QAJnB;AAAA,wBAKWP,YAAY,CAACE,KAAD;AALvB,+BAOE,oBAAC,QAAD,2BAPF,CADF;AAWD;;;;EAnC2BN,S;;gBAAxBQ,e,iBACiB,a;;gBADjBA,e,WAEWS,K;;gBAFXT,e,kBAGkB;AAAA,SAAO;AAC3BG,IAAAA,QAAQ,EAAE,IADiB;AAE3BC,IAAAA,IAAI,EAAE,GAFqB;AAG3BN,IAAAA,KAAK,EAAE,QAHoB;AAI3BY,IAAAA,QAAQ,eAAE,oBAAC,WAAD,CAAa,KAAb;AAJiB,GAAP;AAAA,C;;AAmCxB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMC,MAAM,GAMAlB,GANZ;AACA,MAAQY,MAAR,GAA2CK,KAA3C,CAAQL,MAAR;AAAA,MAAgBL,KAAhB,GAA2CU,KAA3C,CAAgBV,KAAhB;AAAA,MAAuBJ,KAAvB,GAA2Cc,KAA3C,CAAuBd,KAAvB;AAAA,MAA8BK,QAA9B,GAA2CS,KAA3C,CAA8BT,QAA9B;AACA,MAAMW,KAAK,aAAMZ,KAAN,MAAX;AAEA,iBAAOT,OAAO,CAACc,MAAD,CAAd,eACE,oBAAC,MAAD;AAAA,iBAEaO,KAFb;AAAA,8BAGmBX,QAHnB;AAAA,oBAIWP,YAAY,CAACE,KAAD;AAJvB,cADF;AAQD;;AAED,IAAMiB,WAAW,GAAGxB,eAAe,CAACS,eAAD,EAAkB;AACnDW,EAAAA,KAAK,EAALA;AADmD,CAAlB,CAAnC;AAIA,eAAeI,WAAf","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';\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, theme, value } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={!value}\n use:duration={`${duration}ms`}\n сolorBg={resolveColor(theme)}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration } = props;\n const width = `${value}%`;\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n сolorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"file":"ProgressBar.js"}

package/lib/es6/index.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+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;
+}
+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/lib/es6/index.js CHANGED Viewed

@@ -1,3 +1,2 @@
 export { default } from './ProgressBar';
-export * from './ProgressBar';
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB","sourcesContent":["export { default } from './ProgressBar';\n"],"file":"index.js"}

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

@@ -12,12 +12,12 @@ SValue {
   left: 0;
   background-image: linear-gradient(
     -45deg,
-    color-mod(var(--green) shade(10%)) 25%,
-    var(--green) 0,
-    var(--green) 50%,
-    color-mod(var(--green) shade(10%)) 0,
-    color-mod(var(--green) shade(10%)) 76%,
-    var(--green) 0
+    color-mod(var(--green-400) shade(10%)) 25%,
+    var(--green-400) 0,
+    var(--green-400) 50%,
+    color-mod(var(--green-400) shade(10%)) 0,
+    color-mod(var(--green-400) shade(10%)) 76%,
+    var(--green-400) 0
   );
   overflow: hidden;
@@ -32,21 +32,21 @@ SValue {
 SProgressBar[size='s'],
 SValue[size='s'] {
   height: 4px;
-  border-radius: 2px;
+  border-radius: var(--rounded-m);
   background-size: 8px 8px;
 }
 SProgressBar[size='m'],
 SValue[size='m'] {
   height: 8px;
-  border-radius: 4px;
+  border-radius: var(--rounded-m);
   background-size: 12px 12px;
 }
 SProgressBar[size='l'],
 SValue[size='l'] {
   height: 12px;
-  border-radius: 6px;
+  border-radius: var(--rounded-m);
   background-size: 16px 16px;
 }
@@ -55,7 +55,7 @@ SProgressBar[theme='dark'] {
 }
 SProgressBar[theme='invert'] {
-  background-color: var(--mercury);
+  background-color: var(--gray-100);
 }
 @keyframes loading {
@@ -70,12 +70,12 @@ SProgressBar[theme='invert'] {
 SProgressBar[animation] {
   background-image: linear-gradient(
     -45deg,
-    color-mod(var(--mercury) shade(10%)) 25%,
-    var(--mercury) 0,
-    var(--mercury) 50%,
-    color-mod(var(--mercury) shade(10%)) 0,
-    color-mod(var(--mercury) shade(10%)) 76%,
-    var(--mercury) 0
+    color-mod(var(--gray-100) shade(10%)) 25%,
+    var(--gray-100) 0,
+    var(--gray-100) 50%,
+    color-mod(var(--gray-100) shade(10%)) 0,
+    color-mod(var(--gray-100) shade(10%)) 76%,
+    var(--gray-100) 0
   );
   animation-name: loading;
   animation-timing-function: linear;
@@ -83,10 +83,8 @@ SProgressBar[animation] {
 }
 SProgressBar[theme='custom'] {
-  background-color: var(--backgroundColor);
-}
-SProgressBar[theme='custom'] {
-  background-image: var(--backgroundColor);
+  background-color: var(--сolorBg);
+  background-image: var(--сolorBg);
 }
 SProgressBar[animation] {
   animation-duration: var(--duration);
@@ -97,8 +95,8 @@ SValue {
   animation-duration: var(--duration);
 }
 SValue[theme] {
-  background-color: var(--backgroundColor);
-  background-image: var(--backgroundColor);
+  background-color: var(--сolorBg);
+  background-image: var(--сolorBg);
 }
 @media (prefers-reduced-motion) {

package/lib/types/index.d.ts CHANGED Viewed

@@ -18,10 +18,6 @@ export interface IProgressBarProps extends IBoxProps {
    * @default 1000
    */
   duration?: number;
-  /** Sets an animated background
-   * @deprecated v2.0.0 {@link IProgressBarProps.value}
-   * */
-  animation?: boolean;
 }
 export interface IValueProps extends IBoxProps {

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/progress-bar",
   "description": "SEMRush ProgressBar Component",
-  "version": "2.3.0",
+  "version": "3.0.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -27,5 +27,8 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/progress-bar"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0"
   }
 }

package/src/{ProgressBar.js → ProgressBar.jsx} RENAMED Viewed

@@ -2,7 +2,6 @@ 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';
@@ -31,23 +30,16 @@ class ProgressBarRoot extends Component {
   render() {
     const SProgressBar = Root;
-    const { Children, styles, duration, size, theme, value, animation, ...other } = this.asProps;
+    const { Children, styles, duration, theme, value } = 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:animation={!value}
         use:duration={`${duration}ms`}
-        backgroundColor={color}
+        сolorBg={resolveColor(theme)}
       >
         <Children />
       </SProgressBar>,
@@ -57,16 +49,15 @@ class ProgressBarRoot extends Component {
 function Value(props) {
   const SValue = Root;
-  const { styles, value, size, theme, duration } = props;
+  const { styles, value, 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}
+      сolorBg={resolveColor(theme)}
     />,
   );
 }
@@ -76,23 +67,3 @@ const ProgressBar = createComponent(ProgressBarRoot, {
 });
 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 CHANGED Viewed

@@ -18,10 +18,6 @@ export interface IProgressBarProps extends IBoxProps {
    * @default 1000
    */
   duration?: number;
-  /** Sets an animated background
-   * @deprecated v2.0.0 {@link IProgressBarProps.value}
-   * */
-  animation?: boolean;
 }
 export interface IValueProps extends IBoxProps {

package/src/index.js CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export { default } from './ProgressBar';
2	- export * from './ProgressBar';

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

@@ -12,12 +12,12 @@ SValue {
   left: 0;
   background-image: linear-gradient(
     -45deg,
-    color-mod(var(--green) shade(10%)) 25%,
-    var(--green) 0,
-    var(--green) 50%,
-    color-mod(var(--green) shade(10%)) 0,
-    color-mod(var(--green) shade(10%)) 76%,
-    var(--green) 0
+    color-mod(var(--green-400) shade(10%)) 25%,
+    var(--green-400) 0,
+    var(--green-400) 50%,
+    color-mod(var(--green-400) shade(10%)) 0,
+    color-mod(var(--green-400) shade(10%)) 76%,
+    var(--green-400) 0
   );
   overflow: hidden;
@@ -32,21 +32,21 @@ SValue {
 SProgressBar[size='s'],
 SValue[size='s'] {
   height: 4px;
-  border-radius: 2px;
+  border-radius: var(--rounded-m);
   background-size: 8px 8px;
 }
 SProgressBar[size='m'],
 SValue[size='m'] {
   height: 8px;
-  border-radius: 4px;
+  border-radius: var(--rounded-m);
   background-size: 12px 12px;
 }
 SProgressBar[size='l'],
 SValue[size='l'] {
   height: 12px;
-  border-radius: 6px;
+  border-radius: var(--rounded-m);
   background-size: 16px 16px;
 }
@@ -55,7 +55,7 @@ SProgressBar[theme='dark'] {
 }
 SProgressBar[theme='invert'] {
-  background-color: var(--mercury);
+  background-color: var(--gray-100);
 }
 @keyframes loading {
@@ -70,12 +70,12 @@ SProgressBar[theme='invert'] {
 SProgressBar[animation] {
   background-image: linear-gradient(
     -45deg,
-    color-mod(var(--mercury) shade(10%)) 25%,
-    var(--mercury) 0,
-    var(--mercury) 50%,
-    color-mod(var(--mercury) shade(10%)) 0,
-    color-mod(var(--mercury) shade(10%)) 76%,
-    var(--mercury) 0
+    color-mod(var(--gray-100) shade(10%)) 25%,
+    var(--gray-100) 0,
+    var(--gray-100) 50%,
+    color-mod(var(--gray-100) shade(10%)) 0,
+    color-mod(var(--gray-100) shade(10%)) 76%,
+    var(--gray-100) 0
   );
   animation-name: loading;
   animation-timing-function: linear;
@@ -83,10 +83,8 @@ SProgressBar[animation] {
 }
 SProgressBar[theme='custom'] {
-  background-color: var(--backgroundColor);
-}
-SProgressBar[theme='custom'] {
-  background-image: var(--backgroundColor);
+  background-color: var(--сolorBg);
+  background-image: var(--сolorBg);
 }
 SProgressBar[animation] {
   animation-duration: var(--duration);
@@ -97,8 +95,8 @@ SValue {
   animation-duration: var(--duration);
 }
 SValue[theme] {
-  background-color: var(--backgroundColor);
-  background-image: var(--backgroundColor);
+  background-color: var(--сolorBg);
+  background-image: var(--сolorBg);
 }
 @media (prefers-reduced-motion) {