@semcore/progress-bar 4.41.0-prerelease.0 → 4.41.0-prerelease.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.
- package/lib/cjs/ProgressBar.js +32 -28
- package/lib/cjs/ProgressBar.js.map +1 -1
- package/lib/cjs/index.d.js +2 -0
- package/lib/cjs/index.d.js.map +1 -0
- package/lib/cjs/index.js +1 -14
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/ProgressBar.js +25 -24
- package/lib/es6/ProgressBar.js.map +1 -1
- package/lib/es6/index.d.js +2 -0
- package/lib/es6/index.d.js.map +1 -0
- package/lib/es6/index.js +0 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/esm/ProgressBar.mjs +30 -28
- package/lib/esm/index.mjs +0 -1
- package/lib/types/index.d.ts +44 -2
- package/package.json +4 -4
- package/lib/cjs/ProgressBar.type.js +0 -2
- package/lib/cjs/ProgressBar.type.js.map +0 -1
- package/lib/es6/ProgressBar.type.js +0 -2
- package/lib/es6/ProgressBar.type.js.map +0 -1
- package/lib/esm/ProgressBar.type.mjs +0 -1
- package/lib/types/ProgressBar.d.ts +0 -3
- package/lib/types/ProgressBar.type.d.ts +0 -48
package/lib/cjs/ProgressBar.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
@@ -8,43 +9,44 @@ exports["default"] = void 0;
|
|
|
8
9
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
-
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
12
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
|
+
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
13
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
|
|
15
|
+
var _index = require("@semcore/utils/lib/core/index");
|
|
16
|
+
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
17
17
|
var _react = _interopRequireDefault(require("react"));
|
|
18
|
+
var _flexBox = require("@semcore/flex-box");
|
|
19
|
+
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
18
20
|
/*!__reshadow-styles__:"./style/progress-bar.shadow.css"*/
|
|
19
|
-
var style = (/*__reshadow_css_start__*/
|
|
21
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/"@keyframes loading_7uqhu{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_7uqhu_gg_{position:relative;width:100%;overflow:hidden;background-color:var(--intergalactic-progress-bar-bg, rgb(241, 242, 242))}.___SProgressBar_7uqhu_gg_._theme_dark_7uqhu_gg_{background-color:var(--intergalactic-progress-bar-bg-invert, rgb(84, 86, 84))}.___SValue_7uqhu_gg_{position:absolute;top:0;left:0;background-color:var(--intergalactic-progress-bar-value-bg, rgb(255, 255, 255));background-image:var(--intergalactic-progress-bar-value-gradient,\n linear-gradient(-45deg, rgb(177, 125, 241) 25%, rgb(192, 142, 255) 0%, rgb(192, 142, 255) 50%, rgb(177, 125, 241) 0%, rgb(177, 125, 241) 75%, rgb(192, 142, 255) 0%));overflow:hidden;animation-name:loading_7uqhu;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;width:var(--width_7uqhu);animation-duration:var(--duration_7uqhu);transition-duration:var(--duration_7uqhu)}@supports (color:color(display-p3 0 0 0)){.___SValue_7uqhu_gg_{background-image:var(--intergalactic-progress-bar-value-gradient,\n linear-gradient(-45deg, rgb(177, 125, 241) 25%, rgb(192, 142, 255) 0%, rgb(192, 142, 255) 50%, rgb(177, 125, 241) 0%, rgb(177, 125, 241) 75%, rgb(192, 142, 255) 0%))}@media (color-gamut:p3){.___SValue_7uqhu_gg_{background-image:var(--intergalactic-progress-bar-value-gradient,\n linear-gradient(-45deg, rgb(177, 125, 241) 25%, color(display-p3 0.72564 0.56096 0.98326) 0%, color(display-p3 0.72564 0.56096 0.98326) 50%, rgb(177, 125, 241) 0%, rgb(177, 125, 241) 75%, color(display-p3 0.72564 0.56096 0.98326) 0%))}}}.___SValue_7uqhu_gg_.__theme_7uqhu_gg_{background-color:var(--colorBg_7uqhu);background-image:var(--colorBg_7uqhu)}.___SProgressBar_7uqhu_gg_._size_s_7uqhu_gg_,.___SValue_7uqhu_gg_._size_s_7uqhu_gg_{height:4px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:8px 8px}.___SProgressBar_7uqhu_gg_._size_m_7uqhu_gg_,.___SValue_7uqhu_gg_._size_m_7uqhu_gg_{height:8px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:12px 12px}.___SProgressBar_7uqhu_gg_._size_l_7uqhu_gg_,.___SValue_7uqhu_gg_._size_l_7uqhu_gg_{height:12px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:16px 16px}.___SProgressBar_7uqhu_gg_._theme_invert_7uqhu_gg_{background-color:var(--intergalactic-progress-bar-bg, rgb(241, 242, 242))}.___SProgressBar_7uqhu_gg_.__animation_7uqhu_gg_{background-color:var(--intergalactic-progress-bar-value-bg, rgb(255, 255, 255));background-image:var(--intergalactic-progress-bar-pattern-gradient,\n linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 25%, rgb(241, 242, 242) 0%, rgb(241, 242, 242) 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 75%, rgb(241, 242, 242) 0%));animation-name:loading_7uqhu;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--duration_7uqhu)}.___SProgressBar_7uqhu_gg_._theme_custom_7uqhu_gg_{background-color:var(--colorBg_7uqhu);background-image:var(--colorBg_7uqhu)}@media (prefers-reduced-motion){.___SProgressBar_7uqhu_gg_.__animation_7uqhu_gg_,.___SValue_7uqhu_gg_{animation-name:none}}", /*__inner_css_end__*/"7uqhu_gg_"),
|
|
20
22
|
/*__reshadow_css_end__*/
|
|
21
23
|
{
|
|
22
|
-
"__SProgressBar": "
|
|
23
|
-
"_theme_dark": "
|
|
24
|
-
"__SValue": "
|
|
25
|
-
"--width": "--
|
|
26
|
-
"--duration": "--
|
|
27
|
-
"_theme": "
|
|
28
|
-
"--colorBg": "--
|
|
29
|
-
"_size_s": "
|
|
30
|
-
"_size_m": "
|
|
31
|
-
"_size_l": "
|
|
32
|
-
"_theme_invert": "
|
|
33
|
-
"@loading": "
|
|
34
|
-
"_animation": "
|
|
35
|
-
"_theme_custom": "
|
|
24
|
+
"__SProgressBar": "___SProgressBar_7uqhu_gg_",
|
|
25
|
+
"_theme_dark": "_theme_dark_7uqhu_gg_",
|
|
26
|
+
"__SValue": "___SValue_7uqhu_gg_",
|
|
27
|
+
"--width": "--width_7uqhu",
|
|
28
|
+
"--duration": "--duration_7uqhu",
|
|
29
|
+
"_theme": "__theme_7uqhu_gg_",
|
|
30
|
+
"--colorBg": "--colorBg_7uqhu",
|
|
31
|
+
"_size_s": "_size_s_7uqhu_gg_",
|
|
32
|
+
"_size_m": "_size_m_7uqhu_gg_",
|
|
33
|
+
"_size_l": "_size_l_7uqhu_gg_",
|
|
34
|
+
"_theme_invert": "_theme_invert_7uqhu_gg_",
|
|
35
|
+
"@loading": "loading_7uqhu",
|
|
36
|
+
"_animation": "__animation_7uqhu_gg_",
|
|
37
|
+
"_theme_custom": "_theme_custom_7uqhu_gg_"
|
|
36
38
|
});
|
|
37
39
|
function isCustomTheme(theme) {
|
|
38
|
-
if (!theme) return false;
|
|
39
40
|
return !['dark', 'invert'].includes(theme);
|
|
40
41
|
}
|
|
41
42
|
var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
43
|
+
(0, _inherits2["default"])(ProgressBarRoot, _Component);
|
|
44
|
+
var _super = (0, _createSuper2["default"])(ProgressBarRoot);
|
|
42
45
|
function ProgressBarRoot() {
|
|
43
46
|
(0, _classCallCheck2["default"])(this, ProgressBarRoot);
|
|
44
|
-
return (
|
|
47
|
+
return _super.apply(this, arguments);
|
|
45
48
|
}
|
|
46
|
-
(0,
|
|
47
|
-
return (0, _createClass2["default"])(ProgressBarRoot, [{
|
|
49
|
+
(0, _createClass2["default"])(ProgressBarRoot, [{
|
|
48
50
|
key: "getValueProps",
|
|
49
51
|
value: function getValueProps() {
|
|
50
52
|
var _this$asProps = this.asProps,
|
|
@@ -64,7 +66,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
64
66
|
value: function render() {
|
|
65
67
|
var _ref = this.asProps,
|
|
66
68
|
_ref3;
|
|
67
|
-
var SProgressBar =
|
|
69
|
+
var SProgressBar = _flexBox.Box;
|
|
68
70
|
var _this$asProps2 = this.asProps,
|
|
69
71
|
Children = _this$asProps2.Children,
|
|
70
72
|
styles = _this$asProps2.styles,
|
|
@@ -83,6 +85,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
83
85
|
}, _ref))), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})));
|
|
84
86
|
}
|
|
85
87
|
}]);
|
|
88
|
+
return ProgressBarRoot;
|
|
86
89
|
}(_core.Component);
|
|
87
90
|
(0, _defineProperty2["default"])(ProgressBarRoot, "displayName", 'ProgressBar');
|
|
88
91
|
(0, _defineProperty2["default"])(ProgressBarRoot, "style", style);
|
|
@@ -98,7 +101,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
98
101
|
function Value(props) {
|
|
99
102
|
var _ref2 = arguments[0],
|
|
100
103
|
_ref4;
|
|
101
|
-
var SValue =
|
|
104
|
+
var SValue = _flexBox.Box;
|
|
102
105
|
var styles = props.styles,
|
|
103
106
|
value = props.value,
|
|
104
107
|
theme = props.theme,
|
|
@@ -111,8 +114,9 @@ function Value(props) {
|
|
|
111
114
|
"colorBg": resolveColor(theme)
|
|
112
115
|
}, _ref2))));
|
|
113
116
|
}
|
|
114
|
-
var ProgressBar = (0, _core
|
|
117
|
+
var ProgressBar = (0, _core["default"])(ProgressBarRoot, {
|
|
115
118
|
Value: Value
|
|
116
119
|
});
|
|
117
|
-
var _default =
|
|
120
|
+
var _default = ProgressBar;
|
|
121
|
+
exports["default"] = _default;
|
|
118
122
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","names":["_core","
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_resolveColorEnhance","style","_index","sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","getValueProps","_this$asProps","asProps","duration","size","resolveColor","render","_ref","_ref3","SProgressBar","Box","_this$asProps2","Children","styles","useTheme","createElement","cn","_objectSpread2","assignProps","concat","Component","_defineProperty2","resolveColorEnhance","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","createComponent","_default","exports"],"sources":["../../src/ProgressBar.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\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 enhance = [resolveColorEnhance()];\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, resolveColor } = this.asProps;\n return {\n value,\n duration,\n size,\n resolveColor,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, theme, value, resolveColor } = 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 colorBg={resolveColor(theme)}\n role='progressbar'\n aria-valuenow={value}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration, resolveColor } = 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 colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface IProgressBarProps extends ProgressBarProps, UnknownProperties {}\nexport type ProgressBarProps = BoxProps & {\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};\n\n/** @deprecated */\nexport interface IValueProps extends ValueProps, UnknownProperties {}\nexport type ValueProps = BoxProps & {\n size?: 's' | 'm' | 'l';\n value?: number;\n duration?: number;\n theme?: string;\n};\n\n/** @deprecated */\nexport interface IProgressBarCxt extends ProgressBarCxt, UnknownProperties {}\nexport type ProgressBarCxt = {\n getValueProps: PropGetterFn;\n};\n\ndeclare const ProgressBar: Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt> & {\n Value: Intergalactic.Component<'div', ValueProps>;\n};\n\nexport default ProgressBar;\n"],"mappings":""}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
var _exportNames = {};
|
|
8
7
|
Object.defineProperty(exports, "default", {
|
|
9
8
|
enumerable: true,
|
|
10
9
|
get: function get() {
|
|
@@ -12,16 +11,4 @@ Object.defineProperty(exports, "default", {
|
|
|
12
11
|
}
|
|
13
12
|
});
|
|
14
13
|
var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
|
|
15
|
-
var _ProgressBar2 = require("./ProgressBar.type");
|
|
16
|
-
Object.keys(_ProgressBar2).forEach(function (key) {
|
|
17
|
-
if (key === "default" || key === "__esModule") return;
|
|
18
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
19
|
-
if (key in exports && exports[key] === _ProgressBar2[key]) return;
|
|
20
|
-
Object.defineProperty(exports, key, {
|
|
21
|
-
enumerable: true,
|
|
22
|
-
get: function get() {
|
|
23
|
-
return _ProgressBar2[key];
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
});
|
|
27
14
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_ProgressBar","_interopRequireDefault","require"
|
|
1
|
+
{"version":3,"file":"index.js","names":["_ProgressBar","_interopRequireDefault","require"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './ProgressBar';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA"}
|
package/lib/es6/ProgressBar.js
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
5
4
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
5
|
+
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
6
6
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
|
-
import { sstyled as _sstyled } from "@semcore/core";
|
|
7
|
+
import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
|
|
8
8
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
9
9
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
10
|
-
import { Box } from '@semcore/base-components';
|
|
11
|
-
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
12
|
-
import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
|
|
13
10
|
import React from 'react';
|
|
11
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
12
|
+
import { Box } from '@semcore/flex-box';
|
|
13
|
+
import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
|
|
14
14
|
/*!__reshadow-styles__:"./style/progress-bar.shadow.css"*/
|
|
15
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes
|
|
15
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/"@keyframes loading_7uqhu{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_7uqhu_gg_{position:relative;width:100%;overflow:hidden;background-color:var(--intergalactic-progress-bar-bg, rgb(241, 242, 242))}.___SProgressBar_7uqhu_gg_._theme_dark_7uqhu_gg_{background-color:var(--intergalactic-progress-bar-bg-invert, rgb(84, 86, 84))}.___SValue_7uqhu_gg_{position:absolute;top:0;left:0;background-color:var(--intergalactic-progress-bar-value-bg, rgb(255, 255, 255));background-image:var(--intergalactic-progress-bar-value-gradient,\n linear-gradient(-45deg, rgb(177, 125, 241) 25%, rgb(192, 142, 255) 0%, rgb(192, 142, 255) 50%, rgb(177, 125, 241) 0%, rgb(177, 125, 241) 75%, rgb(192, 142, 255) 0%));overflow:hidden;animation-name:loading_7uqhu;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;width:var(--width_7uqhu);animation-duration:var(--duration_7uqhu);transition-duration:var(--duration_7uqhu)}@supports (color:color(display-p3 0 0 0)){.___SValue_7uqhu_gg_{background-image:var(--intergalactic-progress-bar-value-gradient,\n linear-gradient(-45deg, rgb(177, 125, 241) 25%, rgb(192, 142, 255) 0%, rgb(192, 142, 255) 50%, rgb(177, 125, 241) 0%, rgb(177, 125, 241) 75%, rgb(192, 142, 255) 0%))}@media (color-gamut:p3){.___SValue_7uqhu_gg_{background-image:var(--intergalactic-progress-bar-value-gradient,\n linear-gradient(-45deg, rgb(177, 125, 241) 25%, color(display-p3 0.72564 0.56096 0.98326) 0%, color(display-p3 0.72564 0.56096 0.98326) 50%, rgb(177, 125, 241) 0%, rgb(177, 125, 241) 75%, color(display-p3 0.72564 0.56096 0.98326) 0%))}}}.___SValue_7uqhu_gg_.__theme_7uqhu_gg_{background-color:var(--colorBg_7uqhu);background-image:var(--colorBg_7uqhu)}.___SProgressBar_7uqhu_gg_._size_s_7uqhu_gg_,.___SValue_7uqhu_gg_._size_s_7uqhu_gg_{height:4px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:8px 8px}.___SProgressBar_7uqhu_gg_._size_m_7uqhu_gg_,.___SValue_7uqhu_gg_._size_m_7uqhu_gg_{height:8px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:12px 12px}.___SProgressBar_7uqhu_gg_._size_l_7uqhu_gg_,.___SValue_7uqhu_gg_._size_l_7uqhu_gg_{height:12px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:16px 16px}.___SProgressBar_7uqhu_gg_._theme_invert_7uqhu_gg_{background-color:var(--intergalactic-progress-bar-bg, rgb(241, 242, 242))}.___SProgressBar_7uqhu_gg_.__animation_7uqhu_gg_{background-color:var(--intergalactic-progress-bar-value-bg, rgb(255, 255, 255));background-image:var(--intergalactic-progress-bar-pattern-gradient,\n linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 25%, rgb(241, 242, 242) 0%, rgb(241, 242, 242) 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 75%, rgb(241, 242, 242) 0%));animation-name:loading_7uqhu;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--duration_7uqhu)}.___SProgressBar_7uqhu_gg_._theme_custom_7uqhu_gg_{background-color:var(--colorBg_7uqhu);background-image:var(--colorBg_7uqhu)}@media (prefers-reduced-motion){.___SProgressBar_7uqhu_gg_.__animation_7uqhu_gg_,.___SValue_7uqhu_gg_{animation-name:none}}", /*__inner_css_end__*/"7uqhu_gg_"),
|
|
16
16
|
/*__reshadow_css_end__*/
|
|
17
17
|
{
|
|
18
|
-
"__SProgressBar": "
|
|
19
|
-
"_theme_dark": "
|
|
20
|
-
"__SValue": "
|
|
21
|
-
"--width": "--
|
|
22
|
-
"--duration": "--
|
|
23
|
-
"_theme": "
|
|
24
|
-
"--colorBg": "--
|
|
25
|
-
"_size_s": "
|
|
26
|
-
"_size_m": "
|
|
27
|
-
"_size_l": "
|
|
28
|
-
"_theme_invert": "
|
|
29
|
-
"@loading": "
|
|
30
|
-
"_animation": "
|
|
31
|
-
"_theme_custom": "
|
|
18
|
+
"__SProgressBar": "___SProgressBar_7uqhu_gg_",
|
|
19
|
+
"_theme_dark": "_theme_dark_7uqhu_gg_",
|
|
20
|
+
"__SValue": "___SValue_7uqhu_gg_",
|
|
21
|
+
"--width": "--width_7uqhu",
|
|
22
|
+
"--duration": "--duration_7uqhu",
|
|
23
|
+
"_theme": "__theme_7uqhu_gg_",
|
|
24
|
+
"--colorBg": "--colorBg_7uqhu",
|
|
25
|
+
"_size_s": "_size_s_7uqhu_gg_",
|
|
26
|
+
"_size_m": "_size_m_7uqhu_gg_",
|
|
27
|
+
"_size_l": "_size_l_7uqhu_gg_",
|
|
28
|
+
"_theme_invert": "_theme_invert_7uqhu_gg_",
|
|
29
|
+
"@loading": "loading_7uqhu",
|
|
30
|
+
"_animation": "__animation_7uqhu_gg_",
|
|
31
|
+
"_theme_custom": "_theme_custom_7uqhu_gg_"
|
|
32
32
|
});
|
|
33
33
|
function isCustomTheme(theme) {
|
|
34
|
-
if (!theme) return false;
|
|
35
34
|
return !['dark', 'invert'].includes(theme);
|
|
36
35
|
}
|
|
37
36
|
var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
37
|
+
_inherits(ProgressBarRoot, _Component);
|
|
38
|
+
var _super = _createSuper(ProgressBarRoot);
|
|
38
39
|
function ProgressBarRoot() {
|
|
39
40
|
_classCallCheck(this, ProgressBarRoot);
|
|
40
|
-
return
|
|
41
|
+
return _super.apply(this, arguments);
|
|
41
42
|
}
|
|
42
|
-
|
|
43
|
-
return _createClass(ProgressBarRoot, [{
|
|
43
|
+
_createClass(ProgressBarRoot, [{
|
|
44
44
|
key: "getValueProps",
|
|
45
45
|
value: function getValueProps() {
|
|
46
46
|
var _this$asProps = this.asProps,
|
|
@@ -79,6 +79,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
79
79
|
}, _ref))), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})));
|
|
80
80
|
}
|
|
81
81
|
}]);
|
|
82
|
+
return ProgressBarRoot;
|
|
82
83
|
}(Component);
|
|
83
84
|
_defineProperty(ProgressBarRoot, "displayName", 'ProgressBar');
|
|
84
85
|
_defineProperty(ProgressBarRoot, "style", style);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","names":["
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","names":["React","createComponent","Component","sstyled","Root","Box","resolveColorEnhance","style","_sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","getValueProps","_this$asProps","asProps","duration","size","resolveColor","render","_ref","_ref3","SProgressBar","_this$asProps2","Children","styles","useTheme","createElement","cn","_objectSpread","_assignProps","concat","_defineProperty","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","_assignProps2"],"sources":["../../src/ProgressBar.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\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 enhance = [resolveColorEnhance()];\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, resolveColor } = this.asProps;\n return {\n value,\n duration,\n size,\n resolveColor,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, theme, value, resolveColor } = 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 colorBg={resolveColor(theme)}\n role='progressbar'\n aria-valuenow={value}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration, resolveColor } = 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 colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface IProgressBarProps extends ProgressBarProps, UnknownProperties {}\nexport type ProgressBarProps = BoxProps & {\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};\n\n/** @deprecated */\nexport interface IValueProps extends ValueProps, UnknownProperties {}\nexport type ValueProps = BoxProps & {\n size?: 's' | 'm' | 'l';\n value?: number;\n duration?: number;\n theme?: string;\n};\n\n/** @deprecated */\nexport interface IProgressBarCxt extends ProgressBarCxt, UnknownProperties {}\nexport type ProgressBarCxt = {\n getValueProps: PropGetterFn;\n};\n\ndeclare const ProgressBar: Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt> & {\n Value: Intergalactic.Component<'div', ValueProps>;\n};\n\nexport default ProgressBar;\n"],"mappings":""}
|
package/lib/es6/index.js
CHANGED
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './ProgressBar';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAe"}
|
package/lib/esm/ProgressBar.mjs
CHANGED
|
@@ -1,50 +1,51 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/esm/callSuper";
|
|
5
4
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
5
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
6
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { sstyled
|
|
8
|
-
import {
|
|
9
|
-
import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
|
|
7
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
8
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
10
9
|
import React from "react";
|
|
10
|
+
import { Box } from "@semcore/flex-box";
|
|
11
|
+
import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
|
|
11
12
|
/*!__reshadow-styles__:"./style/progress-bar.shadow.css"*/
|
|
12
13
|
var style = (
|
|
13
14
|
/*__reshadow_css_start__*/
|
|
14
15
|
(sstyled.insert(
|
|
15
16
|
/*__inner_css_start__*/
|
|
16
|
-
"@keyframes
|
|
17
|
+
"@keyframes loading_7uqhu{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_7uqhu_gg_{position:relative;width:100%;overflow:hidden;background-color:var(--intergalactic-progress-bar-bg, rgb(241, 242, 242))}.___SProgressBar_7uqhu_gg_._theme_dark_7uqhu_gg_{background-color:var(--intergalactic-progress-bar-bg-invert, rgb(84, 86, 84))}.___SValue_7uqhu_gg_{position:absolute;top:0;left:0;background-color:var(--intergalactic-progress-bar-value-bg, rgb(255, 255, 255));background-image:var(--intergalactic-progress-bar-value-gradient,\n linear-gradient(-45deg, rgb(177, 125, 241) 25%, rgb(192, 142, 255) 0%, rgb(192, 142, 255) 50%, rgb(177, 125, 241) 0%, rgb(177, 125, 241) 75%, rgb(192, 142, 255) 0%));overflow:hidden;animation-name:loading_7uqhu;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;width:var(--width_7uqhu);animation-duration:var(--duration_7uqhu);transition-duration:var(--duration_7uqhu)}@supports (color:color(display-p3 0 0 0)){.___SValue_7uqhu_gg_{background-image:var(--intergalactic-progress-bar-value-gradient,\n linear-gradient(-45deg, rgb(177, 125, 241) 25%, rgb(192, 142, 255) 0%, rgb(192, 142, 255) 50%, rgb(177, 125, 241) 0%, rgb(177, 125, 241) 75%, rgb(192, 142, 255) 0%))}@media (color-gamut:p3){.___SValue_7uqhu_gg_{background-image:var(--intergalactic-progress-bar-value-gradient,\n linear-gradient(-45deg, rgb(177, 125, 241) 25%, color(display-p3 0.72564 0.56096 0.98326) 0%, color(display-p3 0.72564 0.56096 0.98326) 50%, rgb(177, 125, 241) 0%, rgb(177, 125, 241) 75%, color(display-p3 0.72564 0.56096 0.98326) 0%))}}}.___SValue_7uqhu_gg_.__theme_7uqhu_gg_{background-color:var(--colorBg_7uqhu);background-image:var(--colorBg_7uqhu)}.___SProgressBar_7uqhu_gg_._size_s_7uqhu_gg_,.___SValue_7uqhu_gg_._size_s_7uqhu_gg_{height:4px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:8px 8px}.___SProgressBar_7uqhu_gg_._size_m_7uqhu_gg_,.___SValue_7uqhu_gg_._size_m_7uqhu_gg_{height:8px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:12px 12px}.___SProgressBar_7uqhu_gg_._size_l_7uqhu_gg_,.___SValue_7uqhu_gg_._size_l_7uqhu_gg_{height:12px;border-radius:var(--intergalactic-progress-bar-rounded, 6px);background-size:16px 16px}.___SProgressBar_7uqhu_gg_._theme_invert_7uqhu_gg_{background-color:var(--intergalactic-progress-bar-bg, rgb(241, 242, 242))}.___SProgressBar_7uqhu_gg_.__animation_7uqhu_gg_{background-color:var(--intergalactic-progress-bar-value-bg, rgb(255, 255, 255));background-image:var(--intergalactic-progress-bar-pattern-gradient,\n linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 25%, rgb(241, 242, 242) 0%, rgb(241, 242, 242) 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 75%, rgb(241, 242, 242) 0%));animation-name:loading_7uqhu;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--duration_7uqhu)}.___SProgressBar_7uqhu_gg_._theme_custom_7uqhu_gg_{background-color:var(--colorBg_7uqhu);background-image:var(--colorBg_7uqhu)}@media (prefers-reduced-motion){.___SProgressBar_7uqhu_gg_.__animation_7uqhu_gg_,.___SValue_7uqhu_gg_{animation-name:none}}",
|
|
17
18
|
/*__inner_css_end__*/
|
|
18
|
-
"
|
|
19
|
+
"7uqhu_gg_"
|
|
19
20
|
), /*__reshadow_css_end__*/
|
|
20
21
|
{
|
|
21
|
-
"__SProgressBar": "
|
|
22
|
-
"_theme_dark": "
|
|
23
|
-
"__SValue": "
|
|
24
|
-
"--width": "--
|
|
25
|
-
"--duration": "--
|
|
26
|
-
"_theme": "
|
|
27
|
-
"--colorBg": "--
|
|
28
|
-
"_size_s": "
|
|
29
|
-
"_size_m": "
|
|
30
|
-
"_size_l": "
|
|
31
|
-
"_theme_invert": "
|
|
32
|
-
"@loading": "
|
|
33
|
-
"_animation": "
|
|
34
|
-
"_theme_custom": "
|
|
22
|
+
"__SProgressBar": "___SProgressBar_7uqhu_gg_",
|
|
23
|
+
"_theme_dark": "_theme_dark_7uqhu_gg_",
|
|
24
|
+
"__SValue": "___SValue_7uqhu_gg_",
|
|
25
|
+
"--width": "--width_7uqhu",
|
|
26
|
+
"--duration": "--duration_7uqhu",
|
|
27
|
+
"_theme": "__theme_7uqhu_gg_",
|
|
28
|
+
"--colorBg": "--colorBg_7uqhu",
|
|
29
|
+
"_size_s": "_size_s_7uqhu_gg_",
|
|
30
|
+
"_size_m": "_size_m_7uqhu_gg_",
|
|
31
|
+
"_size_l": "_size_l_7uqhu_gg_",
|
|
32
|
+
"_theme_invert": "_theme_invert_7uqhu_gg_",
|
|
33
|
+
"@loading": "loading_7uqhu",
|
|
34
|
+
"_animation": "__animation_7uqhu_gg_",
|
|
35
|
+
"_theme_custom": "_theme_custom_7uqhu_gg_"
|
|
35
36
|
})
|
|
36
37
|
);
|
|
37
38
|
function isCustomTheme(theme) {
|
|
38
|
-
if (!theme) return false;
|
|
39
39
|
return !["dark", "invert"].includes(theme);
|
|
40
40
|
}
|
|
41
|
-
var ProgressBarRoot = /* @__PURE__ */
|
|
41
|
+
var ProgressBarRoot = /* @__PURE__ */ function(_Component) {
|
|
42
|
+
_inherits(ProgressBarRoot2, _Component);
|
|
43
|
+
var _super = _createSuper(ProgressBarRoot2);
|
|
42
44
|
function ProgressBarRoot2() {
|
|
43
45
|
_classCallCheck(this, ProgressBarRoot2);
|
|
44
|
-
return
|
|
46
|
+
return _super.apply(this, arguments);
|
|
45
47
|
}
|
|
46
|
-
|
|
47
|
-
return _createClass(ProgressBarRoot2, [{
|
|
48
|
+
_createClass(ProgressBarRoot2, [{
|
|
48
49
|
key: "getValueProps",
|
|
49
50
|
value: function getValueProps() {
|
|
50
51
|
var _this$asProps = this.asProps, value = _this$asProps.value, duration = _this$asProps.duration, size = _this$asProps.size, resolveColor = _this$asProps.resolveColor;
|
|
@@ -62,7 +63,7 @@ var ProgressBarRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
62
63
|
var SProgressBar = Box;
|
|
63
64
|
var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles, duration = _this$asProps2.duration, theme = _this$asProps2.theme, value = _this$asProps2.value, resolveColor = _this$asProps2.resolveColor;
|
|
64
65
|
var useTheme = isCustomTheme(theme) ? "custom" : theme;
|
|
65
|
-
return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SProgressBar, _ref3.cn("SProgressBar", _objectSpread({}, assignProps({
|
|
66
|
+
return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SProgressBar, _ref3.cn("SProgressBar", _objectSpread({}, assignProps({
|
|
66
67
|
"use:theme": useTheme,
|
|
67
68
|
"use:animation": !value,
|
|
68
69
|
"use:duration": "".concat(duration, "ms"),
|
|
@@ -72,7 +73,8 @@ var ProgressBarRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
72
73
|
}, _ref))), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {})));
|
|
73
74
|
}
|
|
74
75
|
}]);
|
|
75
|
-
|
|
76
|
+
return ProgressBarRoot2;
|
|
77
|
+
}(Component);
|
|
76
78
|
_defineProperty(ProgressBarRoot, "displayName", "ProgressBar");
|
|
77
79
|
_defineProperty(ProgressBarRoot, "style", style);
|
|
78
80
|
_defineProperty(ProgressBarRoot, "enhance", [resolveColorEnhance()]);
|
|
@@ -89,7 +91,7 @@ function Value(props) {
|
|
|
89
91
|
var SValue = Box;
|
|
90
92
|
var styles = props.styles, value = props.value, theme = props.theme, duration = props.duration, resolveColor = props.resolveColor;
|
|
91
93
|
var width = "".concat(value, "%");
|
|
92
|
-
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref4.cn("SValue", _objectSpread({}, assignProps({
|
|
94
|
+
return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SValue, _ref4.cn("SValue", _objectSpread({}, assignProps({
|
|
93
95
|
"use:width": width,
|
|
94
96
|
"use:duration": "".concat(duration, "ms"),
|
|
95
97
|
"colorBg": resolveColor(theme)
|
package/lib/esm/index.mjs
CHANGED
package/lib/types/index.d.ts
CHANGED
|
@@ -1,2 +1,44 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
2
|
+
import { BoxProps } from '@semcore/flex-box';
|
|
3
|
+
|
|
4
|
+
/** @deprecated */
|
|
5
|
+
export interface IProgressBarProps extends ProgressBarProps, UnknownProperties {}
|
|
6
|
+
export type ProgressBarProps = BoxProps & {
|
|
7
|
+
/**
|
|
8
|
+
* Progress bar theme
|
|
9
|
+
* @default invert
|
|
10
|
+
*/
|
|
11
|
+
theme?: 'dark' | 'invert' | string;
|
|
12
|
+
/**
|
|
13
|
+
* Progress bar size
|
|
14
|
+
* @default m
|
|
15
|
+
*/
|
|
16
|
+
size?: 's' | 'm' | 'l';
|
|
17
|
+
/** Value as a percentage */
|
|
18
|
+
value?: number;
|
|
19
|
+
/** Duration of animation, ms
|
|
20
|
+
* @default 1000
|
|
21
|
+
*/
|
|
22
|
+
duration?: number;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
/** @deprecated */
|
|
26
|
+
export interface IValueProps extends ValueProps, UnknownProperties {}
|
|
27
|
+
export type ValueProps = BoxProps & {
|
|
28
|
+
size?: 's' | 'm' | 'l';
|
|
29
|
+
value?: number;
|
|
30
|
+
duration?: number;
|
|
31
|
+
theme?: string;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
/** @deprecated */
|
|
35
|
+
export interface IProgressBarCxt extends ProgressBarCxt, UnknownProperties {}
|
|
36
|
+
export type ProgressBarCxt = {
|
|
37
|
+
getValueProps: PropGetterFn;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
declare const ProgressBar: Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt> & {
|
|
41
|
+
Value: Intergalactic.Component<'div', ValueProps>;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export default ProgressBar;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/progress-bar",
|
|
3
3
|
"description": "Semrush ProgressBar Component",
|
|
4
|
-
"version": "4.41.0-prerelease.
|
|
4
|
+
"version": "4.41.0-prerelease.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/flex-box": "5.42.0-prerelease.
|
|
18
|
-
"@semcore/utils": "4.49.0-prerelease.
|
|
17
|
+
"@semcore/flex-box": "5.42.0-prerelease.1",
|
|
18
|
+
"@semcore/utils": "4.49.0-prerelease.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
-
"@semcore/core": "^2.40.0-prerelease.
|
|
21
|
+
"@semcore/core": "^2.40.0-prerelease.1",
|
|
22
22
|
"react": "16.8 - 18",
|
|
23
23
|
"react-dom": "16.8 - 18"
|
|
24
24
|
},
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.type.js","names":[],"sources":["../../src/ProgressBar.type.ts"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\ndeclare namespace NSProgressBar {\n type Props = BoxProps & {\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 };\n\n type Ctx = {\n getValueProps: PropGetterFn;\n };\n\n namespace Value {\n type Props = BoxProps & {\n /** Controls the size of the value bar */\n size?: 's' | 'm' | 'l';\n /** Progress value */\n value?: number;\n /** Animation diration in milliseconds for transitions */\n duration?: number;\n /** Color theme */\n theme?: string;\n };\n\n type Component = Intergalactic.Component<'div', Props>;\n }\n\n type Component = Intergalactic.Component<'div', Props, Ctx> & {\n Value: Value.Component;\n };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type ProgressBarProps = NSProgressBar.Props;\n/** @deprecated It will be removed in v18. */\nexport type ValueProps = NSProgressBar.Value.Props;\n/** @deprecated It will be removed in v18. */\nexport type ProgressBarCxt = NSProgressBar.Ctx;\n\nexport type { NSProgressBar };\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.type.js","names":[],"sources":["../../src/ProgressBar.type.ts"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\ndeclare namespace NSProgressBar {\n type Props = BoxProps & {\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 };\n\n type Ctx = {\n getValueProps: PropGetterFn;\n };\n\n namespace Value {\n type Props = BoxProps & {\n /** Controls the size of the value bar */\n size?: 's' | 'm' | 'l';\n /** Progress value */\n value?: number;\n /** Animation diration in milliseconds for transitions */\n duration?: number;\n /** Color theme */\n theme?: string;\n };\n\n type Component = Intergalactic.Component<'div', Props>;\n }\n\n type Component = Intergalactic.Component<'div', Props, Ctx> & {\n Value: Value.Component;\n };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type ProgressBarProps = NSProgressBar.Props;\n/** @deprecated It will be removed in v18. */\nexport type ValueProps = NSProgressBar.Value.Props;\n/** @deprecated It will be removed in v18. */\nexport type ProgressBarCxt = NSProgressBar.Ctx;\n\nexport type { NSProgressBar };\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import type { BoxProps } from '@semcore/base-components';
|
|
2
|
-
import type { PropGetterFn, Intergalactic } from '@semcore/core';
|
|
3
|
-
declare namespace NSProgressBar {
|
|
4
|
-
type Props = BoxProps & {
|
|
5
|
-
/**
|
|
6
|
-
* Progress bar theme
|
|
7
|
-
* @default invert
|
|
8
|
-
*/
|
|
9
|
-
theme?: 'dark' | 'invert' | string;
|
|
10
|
-
/**
|
|
11
|
-
* Progress bar size
|
|
12
|
-
* @default m
|
|
13
|
-
*/
|
|
14
|
-
size?: 's' | 'm' | 'l';
|
|
15
|
-
/** Value as a percentage */
|
|
16
|
-
value?: number;
|
|
17
|
-
/** Duration of animation, ms
|
|
18
|
-
* @default 1000
|
|
19
|
-
*/
|
|
20
|
-
duration?: number;
|
|
21
|
-
};
|
|
22
|
-
type Ctx = {
|
|
23
|
-
getValueProps: PropGetterFn;
|
|
24
|
-
};
|
|
25
|
-
namespace Value {
|
|
26
|
-
type Props = BoxProps & {
|
|
27
|
-
/** Controls the size of the value bar */
|
|
28
|
-
size?: 's' | 'm' | 'l';
|
|
29
|
-
/** Progress value */
|
|
30
|
-
value?: number;
|
|
31
|
-
/** Animation diration in milliseconds for transitions */
|
|
32
|
-
duration?: number;
|
|
33
|
-
/** Color theme */
|
|
34
|
-
theme?: string;
|
|
35
|
-
};
|
|
36
|
-
type Component = Intergalactic.Component<'div', Props>;
|
|
37
|
-
}
|
|
38
|
-
type Component = Intergalactic.Component<'div', Props, Ctx> & {
|
|
39
|
-
Value: Value.Component;
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
/** @deprecated It will be removed in v18. */
|
|
43
|
-
export type ProgressBarProps = NSProgressBar.Props;
|
|
44
|
-
/** @deprecated It will be removed in v18. */
|
|
45
|
-
export type ValueProps = NSProgressBar.Value.Props;
|
|
46
|
-
/** @deprecated It will be removed in v18. */
|
|
47
|
-
export type ProgressBarCxt = NSProgressBar.Ctx;
|
|
48
|
-
export type { NSProgressBar };
|