@semcore/progress-bar 17.2.2-prerelease.9 → 18.0.0-prerelease.0
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/CHANGELOG.md +7 -1
- package/lib/cjs/ProgressBar.js +35 -18
- package/lib/cjs/ProgressBar.js.map +1 -1
- package/lib/cjs/ProgressBar.type.js.map +1 -1
- package/lib/cjs/style/progress-bar.shadow.css +37 -18
- package/lib/es6/ProgressBar.js +35 -18
- package/lib/es6/ProgressBar.js.map +1 -1
- package/lib/es6/ProgressBar.type.js.map +1 -1
- package/lib/es6/style/progress-bar.shadow.css +37 -18
- package/lib/esm/ProgressBar.mjs +36 -19
- package/lib/esm/style/progress-bar.shadow.css +37 -18
- package/lib/types/ProgressBar.d.ts.map +1 -1
- package/lib/types/ProgressBar.type.d.ts +7 -4
- package/lib/types/ProgressBar.type.d.ts.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
package/lib/cjs/ProgressBar.js
CHANGED
|
@@ -11,27 +11,30 @@ var _baseComponents = require("@semcore/base-components");
|
|
|
11
11
|
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
|
|
12
12
|
var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
/*!__reshadow-styles__:"./style/progress-bar.shadow.css"*/
|
|
14
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
14
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SProgressBar_maju6_gg_{position:relative;width:100%;overflow:hidden}.___SValue_maju6_gg_{position:absolute;top:0;left:0;background-color:var(--intergalactic-progress-bar-value-bg,oklch(1 0 0));overflow:hidden;animation-name:loading_maju6;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;width:var(--width_maju6);animation-duration:var(--duration_maju6);transition-duration:var(--duration_maju6)}.___SValue_maju6_gg_.__stopAnimation_maju6_gg_{animation-name:none}.___SProgressBar_maju6_gg_.__theme_maju6_gg_ .___SValue_maju6_gg_.__colorBg_maju6_gg_{background-color:var(--colorBg_maju6);background-image:var(--colorBg_maju6)}.___SProgressBar_maju6_gg_._size_s_maju6_gg_,.___SValue_maju6_gg_._size_s_maju6_gg_{height:4px;border-radius:var(--intergalactic-progress-bar-rounded,6px);background-size:8px 8px}.___SProgressBar_maju6_gg_._size_m_maju6_gg_,.___SValue_maju6_gg_._size_m_maju6_gg_{height:8px;border-radius:var(--intergalactic-progress-bar-rounded,6px);background-size:12px 12px}.___SProgressBar_maju6_gg_._size_l_maju6_gg_,.___SValue_maju6_gg_._size_l_maju6_gg_{height:12px;border-radius:var(--intergalactic-progress-bar-rounded,6px);background-size:16px 16px}@keyframes loading_maju6{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_maju6_gg_.__animation_maju6_gg_{background-image:var(--intergalactic-progress-bar-pattern-gradient,linear-gradient(-45deg,#00110c2e 25%,oklch(.157 .029 176/.11) 0,oklch(.157 .029 176/.11) 50%,#00110c2e 0,#00110c2e 75%,oklch(.157 .029 176/.11) 0));animation-name:loading_maju6;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--duration_maju6)}.___SProgressBar_maju6_gg_.__animation_maju6_gg_:not(._theme_invert_maju6_gg_){background-color:initial}.___SProgressBar_maju6_gg_._theme_default_maju6_gg_{background-color:var(--intergalactic-progress-bar-bg,oklch(.157 .029 176/.11))}.___SProgressBar_maju6_gg_._theme_default_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient,linear-gradient(-45deg,#181c17c7 25%,oklch(.22 .01 140) 0,oklch(.22 .01 140) 50%,#181c17c7 0,#181c17c7 75%,oklch(.22 .01 140) 0))}.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_{background-color:var(--intergalactic-progress-bar-bg-invert,oklch(.987 .023 140/.212))}.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,#c08effc7 0,#c08effc7 75%,oklch(.74 .17 303) 0))}}@supports (color:color(display-p3 0 0 0%)) and (color:oklab(0% 0 0%)){.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,color(display-p3 .72564 .56096 .98326/.78) 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,color(display-p3 .72564 .56096 .98326/.78) 0,color(display-p3 .72564 .56096 .98326/.78) 75%,oklch(.74 .17 303) 0))}}}.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_{background-color:var(--intergalactic-progress-bar-bg,oklch(.157 .029 176/.11))}.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,#c08effc7 0,#c08effc7 75%,oklch(.74 .17 303) 0))}}@supports (color:color(display-p3 0 0 0%)) and (color:oklab(0% 0 0%)){.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,color(display-p3 .72564 .56096 .98326/.78) 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,color(display-p3 .72564 .56096 .98326/.78) 0,color(display-p3 .72564 .56096 .98326/.78) 75%,oklch(.74 .17 303) 0))}}}.___SProgressBar_maju6_gg_._theme_custom_maju6_gg_{background-color:var(--colorBg_maju6);background-image:var(--colorBg_maju6)}@media (prefers-reduced-motion){.___SProgressBar_maju6_gg_.__animation_maju6_gg_,.___SValue_maju6_gg_{animation-name:none}}", /*__inner_css_end__*/"maju6_gg_"),
|
|
15
15
|
/*__reshadow_css_end__*/
|
|
16
16
|
{
|
|
17
|
-
"__SProgressBar": "
|
|
18
|
-
"
|
|
19
|
-
"__SValue": "
|
|
20
|
-
"
|
|
21
|
-
"--
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
17
|
+
"__SProgressBar": "___SProgressBar_maju6_gg_",
|
|
18
|
+
"_theme": "__theme_maju6_gg_",
|
|
19
|
+
"__SValue": "___SValue_maju6_gg_",
|
|
20
|
+
"_colorBg": "__colorBg_maju6_gg_",
|
|
21
|
+
"--colorBg": "--colorBg_maju6",
|
|
22
|
+
"_size_s": "_size_s_maju6_gg_",
|
|
23
|
+
"_size_m": "_size_m_maju6_gg_",
|
|
24
|
+
"_size_l": "_size_l_maju6_gg_",
|
|
25
|
+
"@loading": "loading_maju6",
|
|
26
|
+
"_theme_custom": "_theme_custom_maju6_gg_",
|
|
27
|
+
"_animation": "__animation_maju6_gg_",
|
|
28
|
+
"--width": "--width_maju6",
|
|
29
|
+
"--duration": "--duration_maju6",
|
|
30
|
+
"_stopAnimation": "__stopAnimation_maju6_gg_",
|
|
31
|
+
"_theme_invert": "_theme_invert_maju6_gg_",
|
|
32
|
+
"_theme_default": "_theme_default_maju6_gg_",
|
|
33
|
+
"_theme_brand": "_theme_brand_maju6_gg_"
|
|
31
34
|
});
|
|
32
35
|
function isCustomTheme(theme) {
|
|
33
36
|
if (!theme) return false;
|
|
34
|
-
return !['
|
|
37
|
+
return !['default', 'invert', 'brand'].includes(theme);
|
|
35
38
|
}
|
|
36
39
|
class ProgressBarRoot extends _core.Component {
|
|
37
40
|
getValueProps() {
|
|
@@ -79,7 +82,7 @@ class ProgressBarRoot extends _core.Component {
|
|
|
79
82
|
(0, _defineProperty2.default)(ProgressBarRoot, "defaultProps", () => ({
|
|
80
83
|
duration: 1000,
|
|
81
84
|
size: 'm',
|
|
82
|
-
theme: '
|
|
85
|
+
theme: 'default',
|
|
83
86
|
children: /*#__PURE__*/_react.default.createElement(ProgressBar.Value, null)
|
|
84
87
|
}));
|
|
85
88
|
function Value(props) {
|
|
@@ -94,11 +97,25 @@ function Value(props) {
|
|
|
94
97
|
resolveColor
|
|
95
98
|
} = props;
|
|
96
99
|
const width = `${value}%`;
|
|
100
|
+
const [stopAnimation, setStopAnimation] = _react.default.useState(value === 100);
|
|
101
|
+
const handleTransitionEnd = _react.default.useCallback(() => {
|
|
102
|
+
if (value === 100) {
|
|
103
|
+
setTimeout(() => {
|
|
104
|
+
setStopAnimation(true);
|
|
105
|
+
});
|
|
106
|
+
} else {
|
|
107
|
+
setTimeout(() => {
|
|
108
|
+
setStopAnimation(false);
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
}, [value]);
|
|
97
112
|
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SValue, _ref4.cn("SValue", {
|
|
98
113
|
...(0, _core.assignProps)({
|
|
99
114
|
"use:width": width,
|
|
100
115
|
"use:duration": `${duration}ms`,
|
|
101
|
-
"colorBg": resolveColor(theme)
|
|
116
|
+
"colorBg": resolveColor(theme),
|
|
117
|
+
"onTransitionEnd": handleTransitionEnd,
|
|
118
|
+
"stopAnimation": stopAnimation
|
|
102
119
|
}, _ref2)
|
|
103
120
|
}));
|
|
104
121
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","names":["_core","require","_baseComponents","_resolveColorEnhance","_interopRequireDefault","_react","style","sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","Component","getValueProps","value","duration","size","resolveColor","asProps","render","_ref","_ref3","SProgressBar","Box","Children","styles","useTheme","default","createElement","cn","assignProps","_defineProperty2","resolveColorEnhance","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","createComponent","_default","exports"],"sources":["../../src/ProgressBar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport type { NSProgressBar } from './ProgressBar.type';\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme?: string) {\n if (!theme) return false;\n\n return !['
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","names":["_core","require","_baseComponents","_resolveColorEnhance","_interopRequireDefault","_react","style","sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","Component","getValueProps","value","duration","size","resolveColor","asProps","render","_ref","_ref3","SProgressBar","Box","Children","styles","useTheme","default","createElement","cn","assignProps","_defineProperty2","resolveColorEnhance","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","stopAnimation","setStopAnimation","React","useState","handleTransitionEnd","useCallback","setTimeout","createComponent","_default","exports"],"sources":["../../src/ProgressBar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport type { NSProgressBar } from './ProgressBar.type';\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme?: string) {\n if (!theme) return false;\n\n return !['default', 'invert', 'brand'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSProgressBar.Component>,\n typeof ProgressBarRoot.enhance,\n {},\n {},\n {},\n NSProgressBar.DefaultProps\n> {\n static displayName = 'ProgressBar';\n static style = style;\n static enhance = [resolveColorEnhance()] as const;\n static defaultProps = () => ({\n duration: 1000,\n size: 'm',\n theme: 'default',\n children: <ProgressBar.Value />,\n } as const);\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(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSProgressBar.Value.Component,\n typeof ProgressBarRoot,\n 'Value'\n >,\n) {\n const SValue = Root;\n const { styles, value, theme, duration, resolveColor } = props;\n const width = `${value}%`;\n\n const [stopAnimation, setStopAnimation] = React.useState(value === 100);\n\n const handleTransitionEnd = React.useCallback(() => {\n if (value === 100) {\n setTimeout(() => {\n setStopAnimation(true);\n });\n } else {\n setTimeout(() => {\n setStopAnimation(false);\n });\n }\n }, [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 onTransitionEnd={handleTransitionEnd}\n stopAnimation={stopAnimation}\n />,\n );\n}\n\n/**\n * ProgressBar\n *\n * {@link https://developer.semrush.com/intergalactic/components/progress-bar/progress-bar-api/|API} | {@link https://developer.semrush.com/intergalactic/components/progress-bar/progress-bar-code/|Examples}\n */\nconst ProgressBar = createComponent<\n NSProgressBar.Component,\n typeof ProgressBarRoot\n>(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.type.js","names":[],"sources":["../../src/ProgressBar.type.ts"],"sourcesContent":["import type { NSBox } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\ndeclare namespace NSProgressBar {\n type Props = NSBox.Props & {\n /**\n * Progress bar theme\n * @default
|
|
1
|
+
{"version":3,"file":"ProgressBar.type.js","names":[],"sources":["../../src/ProgressBar.type.ts"],"sourcesContent":["import type { NSBox } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\ndeclare namespace NSProgressBar {\n type Props = NSBox.Props & {\n /**\n * Progress bar theme\n * @default default\n */\n theme?: 'default' | 'invert' | 'brand' | 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 type DefaultProps = {\n duration: 1000;\n size: 'm';\n theme: 'default';\n children: React.ReactNode;\n };\n\n type Ctx = {\n getValueProps: PropGetterFn;\n };\n\n namespace Value {\n type Props = NSBox.Props & {\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 /**\n * Color theme\n * @deprecated. Use only predefined themes.\n */\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 v19. */\nexport type ProgressBarProps = NSProgressBar.Props;\n/** @deprecated It will be removed in v19. */\nexport type ValueProps = NSProgressBar.Value.Props;\n/** @deprecated It will be removed in v19. */\nexport type ProgressBarCxt = NSProgressBar.Ctx;\n\nexport type { NSProgressBar };\n"],"mappings":"","ignoreList":[]}
|
|
@@ -2,11 +2,6 @@ SProgressBar {
|
|
|
2
2
|
position: relative;
|
|
3
3
|
width: 100%;
|
|
4
4
|
overflow: hidden;
|
|
5
|
-
background-color: var(--intergalactic-progress-bar-bg, oklch(0.137 0.026 175.7 / 0.161));
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
SProgressBar[theme='dark'] {
|
|
9
|
-
background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.45 0.004 143.7));
|
|
10
5
|
}
|
|
11
6
|
|
|
12
7
|
SValue {
|
|
@@ -14,8 +9,6 @@ SValue {
|
|
|
14
9
|
top: 0;
|
|
15
10
|
left: 0;
|
|
16
11
|
background-color: var(--intergalactic-progress-bar-value-bg, oklch(1 0 0));
|
|
17
|
-
background-image: var(--intergalactic-progress-bar-value-gradient,
|
|
18
|
-
linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 0%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 75%, oklch(0.74 0.17 303) 0%));
|
|
19
12
|
overflow: hidden;
|
|
20
13
|
|
|
21
14
|
animation-name: loading;
|
|
@@ -26,9 +19,12 @@ SValue {
|
|
|
26
19
|
width: var(--width);
|
|
27
20
|
animation-duration: var(--duration);
|
|
28
21
|
transition-duration: var(--duration);
|
|
29
|
-
}
|
|
30
22
|
|
|
31
|
-
|
|
23
|
+
&[stopAnimation] {
|
|
24
|
+
animation-name: none;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
SProgressBar[theme] SValue[colorBg] {
|
|
32
28
|
background-color: var(--colorBg);
|
|
33
29
|
background-image: var(--colorBg);
|
|
34
30
|
}
|
|
@@ -54,12 +50,6 @@ SValue[size='l'] {
|
|
|
54
50
|
background-size: 16px 16px;
|
|
55
51
|
}
|
|
56
52
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
SProgressBar[theme='invert'] {
|
|
60
|
-
background-color: var(--intergalactic-progress-bar-bg, oklch(0.137 0.026 175.7 / 0.161));
|
|
61
|
-
}
|
|
62
|
-
|
|
63
53
|
@keyframes loading {
|
|
64
54
|
from {
|
|
65
55
|
background-position: 0 0;
|
|
@@ -71,13 +61,42 @@ SProgressBar[theme='invert'] {
|
|
|
71
61
|
}
|
|
72
62
|
|
|
73
63
|
SProgressBar[animation] {
|
|
74
|
-
background-color: var(--intergalactic-progress-bar-value-bg, oklch(1 0 0));
|
|
75
64
|
background-image: var(--intergalactic-progress-bar-pattern-gradient,
|
|
76
|
-
linear-gradient(-45deg, oklch(0 0 0 / 0.
|
|
65
|
+
linear-gradient(-45deg, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 25%, oklch(0.157 0.029 176 / 0.11) 0%, oklch(0.157 0.029 176 / 0.11) 50%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 0%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 75%, oklch(0.157 0.029 176 / 0.11) 0%));
|
|
77
66
|
animation-name: loading;
|
|
78
67
|
animation-timing-function: linear;
|
|
79
68
|
animation-iteration-count: infinite;
|
|
80
69
|
animation-duration: var(--duration);
|
|
70
|
+
&:not([theme='invert']) {
|
|
71
|
+
background-color: transparent;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
SProgressBar[theme='default'] {
|
|
76
|
+
background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11));
|
|
77
|
+
|
|
78
|
+
SValue {
|
|
79
|
+
background-image: var(--intergalactic-progress-bar-value-gradient,
|
|
80
|
+
linear-gradient(-45deg, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 25%, oklch(0.22 0.01 140) 0%, oklch(0.22 0.01 140) 50%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 0%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 75%, oklch(0.22 0.01 140) 0%));
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
SProgressBar[theme='invert'] {
|
|
85
|
+
background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.987 0.023 140 / 0.212));
|
|
86
|
+
|
|
87
|
+
SValue {
|
|
88
|
+
background-image: var(--intergalactic-progress-bar-value-gradient-invert,
|
|
89
|
+
linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 75%, oklch(0.74 0.17 303) 0%));
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
SProgressBar[theme='brand'] {
|
|
94
|
+
background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11));
|
|
95
|
+
|
|
96
|
+
SValue {
|
|
97
|
+
background-image: var(--intergalactic-progress-bar-value-gradient-invert,
|
|
98
|
+
linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 75%, oklch(0.74 0.17 303) 0%));
|
|
99
|
+
}
|
|
81
100
|
}
|
|
82
101
|
|
|
83
102
|
SProgressBar[theme='custom'] {
|
|
@@ -94,4 +113,4 @@ SProgressBar[theme='custom'] {
|
|
|
94
113
|
SProgressBar[animation] {
|
|
95
114
|
animation-name: none;
|
|
96
115
|
}
|
|
97
|
-
}
|
|
116
|
+
}
|
package/lib/es6/ProgressBar.js
CHANGED
|
@@ -7,27 +7,30 @@ import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
|
7
7
|
import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
|
|
8
8
|
import React from 'react';
|
|
9
9
|
/*!__reshadow-styles__:"./style/progress-bar.shadow.css"*/
|
|
10
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
10
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SProgressBar_maju6_gg_{position:relative;width:100%;overflow:hidden}.___SValue_maju6_gg_{position:absolute;top:0;left:0;background-color:var(--intergalactic-progress-bar-value-bg,oklch(1 0 0));overflow:hidden;animation-name:loading_maju6;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;width:var(--width_maju6);animation-duration:var(--duration_maju6);transition-duration:var(--duration_maju6)}.___SValue_maju6_gg_.__stopAnimation_maju6_gg_{animation-name:none}.___SProgressBar_maju6_gg_.__theme_maju6_gg_ .___SValue_maju6_gg_.__colorBg_maju6_gg_{background-color:var(--colorBg_maju6);background-image:var(--colorBg_maju6)}.___SProgressBar_maju6_gg_._size_s_maju6_gg_,.___SValue_maju6_gg_._size_s_maju6_gg_{height:4px;border-radius:var(--intergalactic-progress-bar-rounded,6px);background-size:8px 8px}.___SProgressBar_maju6_gg_._size_m_maju6_gg_,.___SValue_maju6_gg_._size_m_maju6_gg_{height:8px;border-radius:var(--intergalactic-progress-bar-rounded,6px);background-size:12px 12px}.___SProgressBar_maju6_gg_._size_l_maju6_gg_,.___SValue_maju6_gg_._size_l_maju6_gg_{height:12px;border-radius:var(--intergalactic-progress-bar-rounded,6px);background-size:16px 16px}@keyframes loading_maju6{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_maju6_gg_.__animation_maju6_gg_{background-image:var(--intergalactic-progress-bar-pattern-gradient,linear-gradient(-45deg,#00110c2e 25%,oklch(.157 .029 176/.11) 0,oklch(.157 .029 176/.11) 50%,#00110c2e 0,#00110c2e 75%,oklch(.157 .029 176/.11) 0));animation-name:loading_maju6;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--duration_maju6)}.___SProgressBar_maju6_gg_.__animation_maju6_gg_:not(._theme_invert_maju6_gg_){background-color:initial}.___SProgressBar_maju6_gg_._theme_default_maju6_gg_{background-color:var(--intergalactic-progress-bar-bg,oklch(.157 .029 176/.11))}.___SProgressBar_maju6_gg_._theme_default_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient,linear-gradient(-45deg,#181c17c7 25%,oklch(.22 .01 140) 0,oklch(.22 .01 140) 50%,#181c17c7 0,#181c17c7 75%,oklch(.22 .01 140) 0))}.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_{background-color:var(--intergalactic-progress-bar-bg-invert,oklch(.987 .023 140/.212))}.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,#c08effc7 0,#c08effc7 75%,oklch(.74 .17 303) 0))}}@supports (color:color(display-p3 0 0 0%)) and (color:oklab(0% 0 0%)){.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,color(display-p3 .72564 .56096 .98326/.78) 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,color(display-p3 .72564 .56096 .98326/.78) 0,color(display-p3 .72564 .56096 .98326/.78) 75%,oklch(.74 .17 303) 0))}}}.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_{background-color:var(--intergalactic-progress-bar-bg,oklch(.157 .029 176/.11))}.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,#c08effc7 0,#c08effc7 75%,oklch(.74 .17 303) 0))}}@supports (color:color(display-p3 0 0 0%)) and (color:oklab(0% 0 0%)){.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,color(display-p3 .72564 .56096 .98326/.78) 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,color(display-p3 .72564 .56096 .98326/.78) 0,color(display-p3 .72564 .56096 .98326/.78) 75%,oklch(.74 .17 303) 0))}}}.___SProgressBar_maju6_gg_._theme_custom_maju6_gg_{background-color:var(--colorBg_maju6);background-image:var(--colorBg_maju6)}@media (prefers-reduced-motion){.___SProgressBar_maju6_gg_.__animation_maju6_gg_,.___SValue_maju6_gg_{animation-name:none}}", /*__inner_css_end__*/"maju6_gg_"),
|
|
11
11
|
/*__reshadow_css_end__*/
|
|
12
12
|
{
|
|
13
|
-
"__SProgressBar": "
|
|
14
|
-
"
|
|
15
|
-
"__SValue": "
|
|
16
|
-
"
|
|
17
|
-
"--
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
13
|
+
"__SProgressBar": "___SProgressBar_maju6_gg_",
|
|
14
|
+
"_theme": "__theme_maju6_gg_",
|
|
15
|
+
"__SValue": "___SValue_maju6_gg_",
|
|
16
|
+
"_colorBg": "__colorBg_maju6_gg_",
|
|
17
|
+
"--colorBg": "--colorBg_maju6",
|
|
18
|
+
"_size_s": "_size_s_maju6_gg_",
|
|
19
|
+
"_size_m": "_size_m_maju6_gg_",
|
|
20
|
+
"_size_l": "_size_l_maju6_gg_",
|
|
21
|
+
"@loading": "loading_maju6",
|
|
22
|
+
"_theme_custom": "_theme_custom_maju6_gg_",
|
|
23
|
+
"_animation": "__animation_maju6_gg_",
|
|
24
|
+
"--width": "--width_maju6",
|
|
25
|
+
"--duration": "--duration_maju6",
|
|
26
|
+
"_stopAnimation": "__stopAnimation_maju6_gg_",
|
|
27
|
+
"_theme_invert": "_theme_invert_maju6_gg_",
|
|
28
|
+
"_theme_default": "_theme_default_maju6_gg_",
|
|
29
|
+
"_theme_brand": "_theme_brand_maju6_gg_"
|
|
27
30
|
});
|
|
28
31
|
function isCustomTheme(theme) {
|
|
29
32
|
if (!theme) return false;
|
|
30
|
-
return !['
|
|
33
|
+
return !['default', 'invert', 'brand'].includes(theme);
|
|
31
34
|
}
|
|
32
35
|
class ProgressBarRoot extends Component {
|
|
33
36
|
getValueProps() {
|
|
@@ -75,7 +78,7 @@ _defineProperty(ProgressBarRoot, "enhance", [resolveColorEnhance()]);
|
|
|
75
78
|
_defineProperty(ProgressBarRoot, "defaultProps", () => ({
|
|
76
79
|
duration: 1000,
|
|
77
80
|
size: 'm',
|
|
78
|
-
theme: '
|
|
81
|
+
theme: 'default',
|
|
79
82
|
children: /*#__PURE__*/React.createElement(ProgressBar.Value, null)
|
|
80
83
|
}));
|
|
81
84
|
function Value(props) {
|
|
@@ -90,11 +93,25 @@ function Value(props) {
|
|
|
90
93
|
resolveColor
|
|
91
94
|
} = props;
|
|
92
95
|
const width = `${value}%`;
|
|
96
|
+
const [stopAnimation, setStopAnimation] = React.useState(value === 100);
|
|
97
|
+
const handleTransitionEnd = React.useCallback(() => {
|
|
98
|
+
if (value === 100) {
|
|
99
|
+
setTimeout(() => {
|
|
100
|
+
setStopAnimation(true);
|
|
101
|
+
});
|
|
102
|
+
} else {
|
|
103
|
+
setTimeout(() => {
|
|
104
|
+
setStopAnimation(false);
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
}, [value]);
|
|
93
108
|
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SValue, _ref4.cn("SValue", {
|
|
94
109
|
..._assignProps2({
|
|
95
110
|
"use:width": width,
|
|
96
111
|
"use:duration": `${duration}ms`,
|
|
97
|
-
"colorBg": resolveColor(theme)
|
|
112
|
+
"colorBg": resolveColor(theme),
|
|
113
|
+
"onTransitionEnd": handleTransitionEnd,
|
|
114
|
+
"stopAnimation": stopAnimation
|
|
98
115
|
}, _ref2)
|
|
99
116
|
}));
|
|
100
117
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","names":["Box","createComponent","Component","sstyled","Root","resolveColorEnhance","React","style","_sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","getValueProps","value","duration","size","resolveColor","asProps","render","_ref","_ref3","SProgressBar","Children","styles","useTheme","createElement","cn","_assignProps","_defineProperty","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","_assignProps2"],"sources":["../../src/ProgressBar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport type { NSProgressBar } from './ProgressBar.type';\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme?: string) {\n if (!theme) return false;\n\n return !['
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","names":["Box","createComponent","Component","sstyled","Root","resolveColorEnhance","React","style","_sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","getValueProps","value","duration","size","resolveColor","asProps","render","_ref","_ref3","SProgressBar","Children","styles","useTheme","createElement","cn","_assignProps","_defineProperty","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","stopAnimation","setStopAnimation","useState","handleTransitionEnd","useCallback","setTimeout","_assignProps2"],"sources":["../../src/ProgressBar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport type { NSProgressBar } from './ProgressBar.type';\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme?: string) {\n if (!theme) return false;\n\n return !['default', 'invert', 'brand'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSProgressBar.Component>,\n typeof ProgressBarRoot.enhance,\n {},\n {},\n {},\n NSProgressBar.DefaultProps\n> {\n static displayName = 'ProgressBar';\n static style = style;\n static enhance = [resolveColorEnhance()] as const;\n static defaultProps = () => ({\n duration: 1000,\n size: 'm',\n theme: 'default',\n children: <ProgressBar.Value />,\n } as const);\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(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n NSProgressBar.Value.Component,\n typeof ProgressBarRoot,\n 'Value'\n >,\n) {\n const SValue = Root;\n const { styles, value, theme, duration, resolveColor } = props;\n const width = `${value}%`;\n\n const [stopAnimation, setStopAnimation] = React.useState(value === 100);\n\n const handleTransitionEnd = React.useCallback(() => {\n if (value === 100) {\n setTimeout(() => {\n setStopAnimation(true);\n });\n } else {\n setTimeout(() => {\n setStopAnimation(false);\n });\n }\n }, [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 onTransitionEnd={handleTransitionEnd}\n stopAnimation={stopAnimation}\n />,\n );\n}\n\n/**\n * ProgressBar\n *\n * {@link https://developer.semrush.com/intergalactic/components/progress-bar/progress-bar-api/|API} | {@link https://developer.semrush.com/intergalactic/components/progress-bar/progress-bar-code/|Examples}\n */\nconst ProgressBar = createComponent<\n NSProgressBar.Component,\n typeof ProgressBarRoot\n>(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"mappings":";;;;AAAA,SAASA,GAAG,QAAQ,0BAA0B;AAE9C,SAASC,eAAe,EAAEC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,OAAOC,mBAAmB,MAAM,sDAAsD;AACtF,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAK1B,SAASC,aAAaA,CAACC,KAAc,EAAE;EACrC,IAAI,CAACA,KAAK,EAAE,OAAO,KAAK;EAExB,OAAO,CAAC,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAACC,QAAQ,CAACD,KAAK,CAAC;AACxD;AAEA,MAAME,eAAe,SAASX,SAAS,CAOrC;EAWAY,aAAaA,CAAA,EAAG;IACd,MAAM;MAAEC,KAAK;MAAEC,QAAQ;MAAEC,IAAI;MAAEC;IAAa,CAAC,GAAG,IAAI,CAACC,OAAO;IAC5D,OAAO;MACLJ,KAAK;MACLC,QAAQ;MACRC,IAAI;MACJC;IACF,CAAC;EACH;EAEAE,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAF,OAAA;MAAAG,KAAA;IACP,MAAMC,YAAY,GAMNvB,GAAG;IALf,MAAM;MAAEwB,QAAQ;MAAEC,MAAM;MAAET,QAAQ;MAAEL,KAAK;MAAEI,KAAK;MAAEG;IAAa,CAAC,GAAG,IAAI,CAACC,OAAO;IAC/E,MAAMO,QAAQ,GAAGhB,aAAa,CAACC,KAAK,CAAC,GAAG,QAAQ,GAAGA,KAAK;IAExD,OAAAW,KAAA,GAAOnB,OAAO,CAACsB,MAAM,CAAC,eACpBnB,KAAA,CAAAqB,aAAA,CAACJ,YAAY,EAAAD,KAAA,CAAAM,EAAA;MAAA,GAAAC,YAAA;QAAA,aAEAH,QAAQ;QAAA,iBACJ,CAACX,KAAK;QAAA,gBACP,GAAGC,QAAQ,IAAI;QAAA,WACpBE,YAAY,CAACP,KAAK,CAAC;QAAA,QACvB,aAAa;QAAA,iBACHI;MAAK,GAAAM,IAAA;IAAA,iBAEpBf,KAAA,CAAAqB,aAAA,CAACH,QAAQ,EAAAF,KAAA,CAAAM,EAAA,gBAAE,CACC,CAAC;EAEnB;AACF;AAACE,eAAA,CA/CKjB,eAAe,iBAQE,aAAa;AAAAiB,eAAA,CAR9BjB,eAAe,WASJN,KAAK;AAAAuB,eAAA,CAThBjB,eAAe,aAUF,CAACR,mBAAmB,CAAC,CAAC,CAAC;AAAAyB,eAAA,CAVpCjB,eAAe,kBAWG,OAAO;EAC3BG,QAAQ,EAAE,IAAI;EACdC,IAAI,EAAE,GAAG;EACTN,KAAK,EAAE,SAAS;EAChBoB,QAAQ,eAAEzB,KAAA,CAAAqB,aAAA,CAACK,WAAW,CAACC,KAAK,MAAE;AAChC,CAAC,CAAU;AAiCb,SAASA,KAAKA,CACZC,KAIC,EACD;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACA,MAAMC,MAAM,GAoBAtC,GAAG;EAnBf,MAAM;IAAEyB,MAAM;IAAEV,KAAK;IAAEJ,KAAK;IAAEK,QAAQ;IAAEE;EAAa,CAAC,GAAGgB,KAAK;EAC9D,MAAMK,KAAK,GAAG,GAAGxB,KAAK,GAAG;EAEzB,MAAM,CAACyB,aAAa,EAAEC,gBAAgB,CAAC,GAAGnC,KAAK,CAACoC,QAAQ,CAAC3B,KAAK,KAAK,GAAG,CAAC;EAEvE,MAAM4B,mBAAmB,GAAGrC,KAAK,CAACsC,WAAW,CAAC,MAAM;IAClD,IAAI7B,KAAK,KAAK,GAAG,EAAE;MACjB8B,UAAU,CAAC,MAAM;QACfJ,gBAAgB,CAAC,IAAI,CAAC;MACxB,CAAC,CAAC;IACJ,CAAC,MAAM;MACLI,UAAU,CAAC,MAAM;QACfJ,gBAAgB,CAAC,KAAK,CAAC;MACzB,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAAC1B,KAAK,CAAC,CAAC;EAEX,OAAAsB,KAAA,GAAOlC,OAAO,CAACsB,MAAM,CAAC,eACpBnB,KAAA,CAAAqB,aAAA,CAACW,MAAM,EAAAD,KAAA,CAAAT,EAAA;IAAA,GAAAkB,aAAA;MAAA,aAEMP,KAAK;MAAA,gBACF,GAAGvB,QAAQ,IAAI;MAAA,WACpBE,YAAY,CAACP,KAAK,CAAC;MAAA,mBACXgC,mBAAmB;MAAA,iBACrBH;IAAa,GAAAL,KAAA;EAAA,EAC7B,CAAC;AAEN;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAMH,WAAW,GAAG/B,eAAe,CAGjCY,eAAe,EAAE;EACjBoB;AACF,CAAC,CAAC;AAEF,eAAeD,WAAW","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.type.js","names":[],"sources":["../../src/ProgressBar.type.ts"],"sourcesContent":["import type { NSBox } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\ndeclare namespace NSProgressBar {\n type Props = NSBox.Props & {\n /**\n * Progress bar theme\n * @default
|
|
1
|
+
{"version":3,"file":"ProgressBar.type.js","names":[],"sources":["../../src/ProgressBar.type.ts"],"sourcesContent":["import type { NSBox } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\ndeclare namespace NSProgressBar {\n type Props = NSBox.Props & {\n /**\n * Progress bar theme\n * @default default\n */\n theme?: 'default' | 'invert' | 'brand' | 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 type DefaultProps = {\n duration: 1000;\n size: 'm';\n theme: 'default';\n children: React.ReactNode;\n };\n\n type Ctx = {\n getValueProps: PropGetterFn;\n };\n\n namespace Value {\n type Props = NSBox.Props & {\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 /**\n * Color theme\n * @deprecated. Use only predefined themes.\n */\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 v19. */\nexport type ProgressBarProps = NSProgressBar.Props;\n/** @deprecated It will be removed in v19. */\nexport type ValueProps = NSProgressBar.Value.Props;\n/** @deprecated It will be removed in v19. */\nexport type ProgressBarCxt = NSProgressBar.Ctx;\n\nexport type { NSProgressBar };\n"],"mappings":"","ignoreList":[]}
|
|
@@ -2,11 +2,6 @@ SProgressBar {
|
|
|
2
2
|
position: relative;
|
|
3
3
|
width: 100%;
|
|
4
4
|
overflow: hidden;
|
|
5
|
-
background-color: var(--intergalactic-progress-bar-bg, oklch(0.137 0.026 175.7 / 0.161));
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
SProgressBar[theme='dark'] {
|
|
9
|
-
background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.45 0.004 143.7));
|
|
10
5
|
}
|
|
11
6
|
|
|
12
7
|
SValue {
|
|
@@ -14,8 +9,6 @@ SValue {
|
|
|
14
9
|
top: 0;
|
|
15
10
|
left: 0;
|
|
16
11
|
background-color: var(--intergalactic-progress-bar-value-bg, oklch(1 0 0));
|
|
17
|
-
background-image: var(--intergalactic-progress-bar-value-gradient,
|
|
18
|
-
linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 0%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 75%, oklch(0.74 0.17 303) 0%));
|
|
19
12
|
overflow: hidden;
|
|
20
13
|
|
|
21
14
|
animation-name: loading;
|
|
@@ -26,9 +19,12 @@ SValue {
|
|
|
26
19
|
width: var(--width);
|
|
27
20
|
animation-duration: var(--duration);
|
|
28
21
|
transition-duration: var(--duration);
|
|
29
|
-
}
|
|
30
22
|
|
|
31
|
-
|
|
23
|
+
&[stopAnimation] {
|
|
24
|
+
animation-name: none;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
SProgressBar[theme] SValue[colorBg] {
|
|
32
28
|
background-color: var(--colorBg);
|
|
33
29
|
background-image: var(--colorBg);
|
|
34
30
|
}
|
|
@@ -54,12 +50,6 @@ SValue[size='l'] {
|
|
|
54
50
|
background-size: 16px 16px;
|
|
55
51
|
}
|
|
56
52
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
SProgressBar[theme='invert'] {
|
|
60
|
-
background-color: var(--intergalactic-progress-bar-bg, oklch(0.137 0.026 175.7 / 0.161));
|
|
61
|
-
}
|
|
62
|
-
|
|
63
53
|
@keyframes loading {
|
|
64
54
|
from {
|
|
65
55
|
background-position: 0 0;
|
|
@@ -71,13 +61,42 @@ SProgressBar[theme='invert'] {
|
|
|
71
61
|
}
|
|
72
62
|
|
|
73
63
|
SProgressBar[animation] {
|
|
74
|
-
background-color: var(--intergalactic-progress-bar-value-bg, oklch(1 0 0));
|
|
75
64
|
background-image: var(--intergalactic-progress-bar-pattern-gradient,
|
|
76
|
-
linear-gradient(-45deg, oklch(0 0 0 / 0.
|
|
65
|
+
linear-gradient(-45deg, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 25%, oklch(0.157 0.029 176 / 0.11) 0%, oklch(0.157 0.029 176 / 0.11) 50%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 0%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 75%, oklch(0.157 0.029 176 / 0.11) 0%));
|
|
77
66
|
animation-name: loading;
|
|
78
67
|
animation-timing-function: linear;
|
|
79
68
|
animation-iteration-count: infinite;
|
|
80
69
|
animation-duration: var(--duration);
|
|
70
|
+
&:not([theme='invert']) {
|
|
71
|
+
background-color: transparent;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
SProgressBar[theme='default'] {
|
|
76
|
+
background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11));
|
|
77
|
+
|
|
78
|
+
SValue {
|
|
79
|
+
background-image: var(--intergalactic-progress-bar-value-gradient,
|
|
80
|
+
linear-gradient(-45deg, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 25%, oklch(0.22 0.01 140) 0%, oklch(0.22 0.01 140) 50%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 0%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 75%, oklch(0.22 0.01 140) 0%));
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
SProgressBar[theme='invert'] {
|
|
85
|
+
background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.987 0.023 140 / 0.212));
|
|
86
|
+
|
|
87
|
+
SValue {
|
|
88
|
+
background-image: var(--intergalactic-progress-bar-value-gradient-invert,
|
|
89
|
+
linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 75%, oklch(0.74 0.17 303) 0%));
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
SProgressBar[theme='brand'] {
|
|
94
|
+
background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11));
|
|
95
|
+
|
|
96
|
+
SValue {
|
|
97
|
+
background-image: var(--intergalactic-progress-bar-value-gradient-invert,
|
|
98
|
+
linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 75%, oklch(0.74 0.17 303) 0%));
|
|
99
|
+
}
|
|
81
100
|
}
|
|
82
101
|
|
|
83
102
|
SProgressBar[theme='custom'] {
|
|
@@ -94,4 +113,4 @@ SProgressBar[theme='custom'] {
|
|
|
94
113
|
SProgressBar[animation] {
|
|
95
114
|
animation-name: none;
|
|
96
115
|
}
|
|
97
|
-
}
|
|
116
|
+
}
|
package/lib/esm/ProgressBar.mjs
CHANGED
|
@@ -8,30 +8,33 @@ const style = (
|
|
|
8
8
|
/*__reshadow_css_start__*/
|
|
9
9
|
(sstyled.insert(
|
|
10
10
|
/*__inner_css_start__*/
|
|
11
|
-
".
|
|
11
|
+
".___SProgressBar_maju6_gg_{position:relative;width:100%;overflow:hidden}.___SValue_maju6_gg_{position:absolute;top:0;left:0;background-color:var(--intergalactic-progress-bar-value-bg,oklch(1 0 0));overflow:hidden;animation-name:loading_maju6;animation-timing-function:linear;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;width:var(--width_maju6);animation-duration:var(--duration_maju6);transition-duration:var(--duration_maju6)}.___SValue_maju6_gg_.__stopAnimation_maju6_gg_{animation-name:none}.___SProgressBar_maju6_gg_.__theme_maju6_gg_ .___SValue_maju6_gg_.__colorBg_maju6_gg_{background-color:var(--colorBg_maju6);background-image:var(--colorBg_maju6)}.___SProgressBar_maju6_gg_._size_s_maju6_gg_,.___SValue_maju6_gg_._size_s_maju6_gg_{height:4px;border-radius:var(--intergalactic-progress-bar-rounded,6px);background-size:8px 8px}.___SProgressBar_maju6_gg_._size_m_maju6_gg_,.___SValue_maju6_gg_._size_m_maju6_gg_{height:8px;border-radius:var(--intergalactic-progress-bar-rounded,6px);background-size:12px 12px}.___SProgressBar_maju6_gg_._size_l_maju6_gg_,.___SValue_maju6_gg_._size_l_maju6_gg_{height:12px;border-radius:var(--intergalactic-progress-bar-rounded,6px);background-size:16px 16px}@keyframes loading_maju6{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_maju6_gg_.__animation_maju6_gg_{background-image:var(--intergalactic-progress-bar-pattern-gradient,linear-gradient(-45deg,#00110c2e 25%,oklch(.157 .029 176/.11) 0,oklch(.157 .029 176/.11) 50%,#00110c2e 0,#00110c2e 75%,oklch(.157 .029 176/.11) 0));animation-name:loading_maju6;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--duration_maju6)}.___SProgressBar_maju6_gg_.__animation_maju6_gg_:not(._theme_invert_maju6_gg_){background-color:initial}.___SProgressBar_maju6_gg_._theme_default_maju6_gg_{background-color:var(--intergalactic-progress-bar-bg,oklch(.157 .029 176/.11))}.___SProgressBar_maju6_gg_._theme_default_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient,linear-gradient(-45deg,#181c17c7 25%,oklch(.22 .01 140) 0,oklch(.22 .01 140) 50%,#181c17c7 0,#181c17c7 75%,oklch(.22 .01 140) 0))}.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_{background-color:var(--intergalactic-progress-bar-bg-invert,oklch(.987 .023 140/.212))}.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,#c08effc7 0,#c08effc7 75%,oklch(.74 .17 303) 0))}}@supports (color:color(display-p3 0 0 0%)) and (color:oklab(0% 0 0%)){.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_invert_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,color(display-p3 .72564 .56096 .98326/.78) 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,color(display-p3 .72564 .56096 .98326/.78) 0,color(display-p3 .72564 .56096 .98326/.78) 75%,oklch(.74 .17 303) 0))}}}.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_{background-color:var(--intergalactic-progress-bar-bg,oklch(.157 .029 176/.11))}.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,#c08effc7 0,#c08effc7 75%,oklch(.74 .17 303) 0))}}@supports (color:color(display-p3 0 0 0%)) and (color:oklab(0% 0 0%)){.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,#c08effc7 25%,#c08eff 0,#c08eff 50%,#c08effc7 0,#c08effc7 75%,#c08eff 0))}@media (color-gamut:p3){.___SProgressBar_maju6_gg_._theme_brand_maju6_gg_ .___SValue_maju6_gg_{background-image:var(--intergalactic-progress-bar-value-gradient-invert,linear-gradient(-45deg,color(display-p3 .72564 .56096 .98326/.78) 25%,oklch(.74 .17 303) 0,oklch(.74 .17 303) 50%,color(display-p3 .72564 .56096 .98326/.78) 0,color(display-p3 .72564 .56096 .98326/.78) 75%,oklch(.74 .17 303) 0))}}}.___SProgressBar_maju6_gg_._theme_custom_maju6_gg_{background-color:var(--colorBg_maju6);background-image:var(--colorBg_maju6)}@media (prefers-reduced-motion){.___SProgressBar_maju6_gg_.__animation_maju6_gg_,.___SValue_maju6_gg_{animation-name:none}}",
|
|
12
12
|
/*__inner_css_end__*/
|
|
13
|
-
"
|
|
13
|
+
"maju6_gg_"
|
|
14
14
|
), /*__reshadow_css_end__*/
|
|
15
15
|
{
|
|
16
|
-
"__SProgressBar": "
|
|
17
|
-
"
|
|
18
|
-
"__SValue": "
|
|
19
|
-
"
|
|
20
|
-
"--
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
16
|
+
"__SProgressBar": "___SProgressBar_maju6_gg_",
|
|
17
|
+
"_theme": "__theme_maju6_gg_",
|
|
18
|
+
"__SValue": "___SValue_maju6_gg_",
|
|
19
|
+
"_colorBg": "__colorBg_maju6_gg_",
|
|
20
|
+
"--colorBg": "--colorBg_maju6",
|
|
21
|
+
"_size_s": "_size_s_maju6_gg_",
|
|
22
|
+
"_size_m": "_size_m_maju6_gg_",
|
|
23
|
+
"_size_l": "_size_l_maju6_gg_",
|
|
24
|
+
"@loading": "loading_maju6",
|
|
25
|
+
"_theme_custom": "_theme_custom_maju6_gg_",
|
|
26
|
+
"_animation": "__animation_maju6_gg_",
|
|
27
|
+
"--width": "--width_maju6",
|
|
28
|
+
"--duration": "--duration_maju6",
|
|
29
|
+
"_stopAnimation": "__stopAnimation_maju6_gg_",
|
|
30
|
+
"_theme_invert": "_theme_invert_maju6_gg_",
|
|
31
|
+
"_theme_default": "_theme_default_maju6_gg_",
|
|
32
|
+
"_theme_brand": "_theme_brand_maju6_gg_"
|
|
30
33
|
})
|
|
31
34
|
);
|
|
32
35
|
function isCustomTheme(theme) {
|
|
33
36
|
if (!theme) return false;
|
|
34
|
-
return !["
|
|
37
|
+
return !["default", "invert", "brand"].includes(theme);
|
|
35
38
|
}
|
|
36
39
|
class ProgressBarRoot extends Component {
|
|
37
40
|
getValueProps() {
|
|
@@ -78,7 +81,7 @@ _defineProperty(ProgressBarRoot, "enhance", [resolveColorEnhance()]);
|
|
|
78
81
|
_defineProperty(ProgressBarRoot, "defaultProps", () => ({
|
|
79
82
|
duration: 1e3,
|
|
80
83
|
size: "m",
|
|
81
|
-
theme: "
|
|
84
|
+
theme: "default",
|
|
82
85
|
children: /* @__PURE__ */ React.createElement(ProgressBar.Value, null)
|
|
83
86
|
}));
|
|
84
87
|
function Value(props) {
|
|
@@ -92,11 +95,25 @@ function Value(props) {
|
|
|
92
95
|
resolveColor
|
|
93
96
|
} = props;
|
|
94
97
|
const width = `${value}%`;
|
|
98
|
+
const [stopAnimation, setStopAnimation] = React.useState(value === 100);
|
|
99
|
+
const handleTransitionEnd = React.useCallback(() => {
|
|
100
|
+
if (value === 100) {
|
|
101
|
+
setTimeout(() => {
|
|
102
|
+
setStopAnimation(true);
|
|
103
|
+
});
|
|
104
|
+
} else {
|
|
105
|
+
setTimeout(() => {
|
|
106
|
+
setStopAnimation(false);
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
}, [value]);
|
|
95
110
|
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref4.cn("SValue", {
|
|
96
111
|
...assignProps({
|
|
97
112
|
"use:width": width,
|
|
98
113
|
"use:duration": `${duration}ms`,
|
|
99
|
-
"colorBg": resolveColor(theme)
|
|
114
|
+
"colorBg": resolveColor(theme),
|
|
115
|
+
"onTransitionEnd": handleTransitionEnd,
|
|
116
|
+
"stopAnimation": stopAnimation
|
|
100
117
|
}, _ref2)
|
|
101
118
|
}));
|
|
102
119
|
}
|
|
@@ -2,11 +2,6 @@ SProgressBar {
|
|
|
2
2
|
position: relative;
|
|
3
3
|
width: 100%;
|
|
4
4
|
overflow: hidden;
|
|
5
|
-
background-color: var(--intergalactic-progress-bar-bg, oklch(0.137 0.026 175.7 / 0.161));
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
SProgressBar[theme='dark'] {
|
|
9
|
-
background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.45 0.004 143.7));
|
|
10
5
|
}
|
|
11
6
|
|
|
12
7
|
SValue {
|
|
@@ -14,8 +9,6 @@ SValue {
|
|
|
14
9
|
top: 0;
|
|
15
10
|
left: 0;
|
|
16
11
|
background-color: var(--intergalactic-progress-bar-value-bg, oklch(1 0 0));
|
|
17
|
-
background-image: var(--intergalactic-progress-bar-value-gradient,
|
|
18
|
-
linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 0%, oklch(from oklch(0.74 0.17 303) calc(l - 0.05) c h) 75%, oklch(0.74 0.17 303) 0%));
|
|
19
12
|
overflow: hidden;
|
|
20
13
|
|
|
21
14
|
animation-name: loading;
|
|
@@ -26,9 +19,12 @@ SValue {
|
|
|
26
19
|
width: var(--width);
|
|
27
20
|
animation-duration: var(--duration);
|
|
28
21
|
transition-duration: var(--duration);
|
|
29
|
-
}
|
|
30
22
|
|
|
31
|
-
|
|
23
|
+
&[stopAnimation] {
|
|
24
|
+
animation-name: none;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
SProgressBar[theme] SValue[colorBg] {
|
|
32
28
|
background-color: var(--colorBg);
|
|
33
29
|
background-image: var(--colorBg);
|
|
34
30
|
}
|
|
@@ -54,12 +50,6 @@ SValue[size='l'] {
|
|
|
54
50
|
background-size: 16px 16px;
|
|
55
51
|
}
|
|
56
52
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
SProgressBar[theme='invert'] {
|
|
60
|
-
background-color: var(--intergalactic-progress-bar-bg, oklch(0.137 0.026 175.7 / 0.161));
|
|
61
|
-
}
|
|
62
|
-
|
|
63
53
|
@keyframes loading {
|
|
64
54
|
from {
|
|
65
55
|
background-position: 0 0;
|
|
@@ -71,13 +61,42 @@ SProgressBar[theme='invert'] {
|
|
|
71
61
|
}
|
|
72
62
|
|
|
73
63
|
SProgressBar[animation] {
|
|
74
|
-
background-color: var(--intergalactic-progress-bar-value-bg, oklch(1 0 0));
|
|
75
64
|
background-image: var(--intergalactic-progress-bar-pattern-gradient,
|
|
76
|
-
linear-gradient(-45deg, oklch(0 0 0 / 0.
|
|
65
|
+
linear-gradient(-45deg, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 25%, oklch(0.157 0.029 176 / 0.11) 0%, oklch(0.157 0.029 176 / 0.11) 50%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 0%, oklch(from oklch(0.157 0.029 176 / 0.11) l c h / 0.18) 75%, oklch(0.157 0.029 176 / 0.11) 0%));
|
|
77
66
|
animation-name: loading;
|
|
78
67
|
animation-timing-function: linear;
|
|
79
68
|
animation-iteration-count: infinite;
|
|
80
69
|
animation-duration: var(--duration);
|
|
70
|
+
&:not([theme='invert']) {
|
|
71
|
+
background-color: transparent;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
SProgressBar[theme='default'] {
|
|
76
|
+
background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11));
|
|
77
|
+
|
|
78
|
+
SValue {
|
|
79
|
+
background-image: var(--intergalactic-progress-bar-value-gradient,
|
|
80
|
+
linear-gradient(-45deg, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 25%, oklch(0.22 0.01 140) 0%, oklch(0.22 0.01 140) 50%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 0%, oklch(from oklch(0.22 0.01 140) l c h / 0.78) 75%, oklch(0.22 0.01 140) 0%));
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
SProgressBar[theme='invert'] {
|
|
85
|
+
background-color: var(--intergalactic-progress-bar-bg-invert, oklch(0.987 0.023 140 / 0.212));
|
|
86
|
+
|
|
87
|
+
SValue {
|
|
88
|
+
background-image: var(--intergalactic-progress-bar-value-gradient-invert,
|
|
89
|
+
linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 75%, oklch(0.74 0.17 303) 0%));
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
SProgressBar[theme='brand'] {
|
|
94
|
+
background-color: var(--intergalactic-progress-bar-bg, oklch(0.157 0.029 176 / 0.11));
|
|
95
|
+
|
|
96
|
+
SValue {
|
|
97
|
+
background-image: var(--intergalactic-progress-bar-value-gradient-invert,
|
|
98
|
+
linear-gradient(-45deg, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 25%, oklch(0.74 0.17 303) 0%, oklch(0.74 0.17 303) 50%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 0%, oklch(from oklch(0.74 0.17 303) l c h / 0.78) 75%, oklch(0.74 0.17 303) 0%));
|
|
99
|
+
}
|
|
81
100
|
}
|
|
82
101
|
|
|
83
102
|
SProgressBar[theme='custom'] {
|
|
@@ -94,4 +113,4 @@ SProgressBar[theme='custom'] {
|
|
|
94
113
|
SProgressBar[animation] {
|
|
95
114
|
animation-name: none;
|
|
96
115
|
}
|
|
97
|
-
}
|
|
116
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AA+
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AA+FxD;;;;GAIG;AACH,QAAA,MAAM,WAAW,yBAKf,CAAC;AAEH,eAAe,WAAW,CAAC"}
|
|
@@ -4,9 +4,9 @@ declare namespace NSProgressBar {
|
|
|
4
4
|
type Props = NSBox.Props & {
|
|
5
5
|
/**
|
|
6
6
|
* Progress bar theme
|
|
7
|
-
* @default
|
|
7
|
+
* @default default
|
|
8
8
|
*/
|
|
9
|
-
theme?: '
|
|
9
|
+
theme?: 'default' | 'invert' | 'brand' | string;
|
|
10
10
|
/**
|
|
11
11
|
* Progress bar size
|
|
12
12
|
* @default m
|
|
@@ -22,7 +22,7 @@ declare namespace NSProgressBar {
|
|
|
22
22
|
type DefaultProps = {
|
|
23
23
|
duration: 1000;
|
|
24
24
|
size: 'm';
|
|
25
|
-
theme: '
|
|
25
|
+
theme: 'default';
|
|
26
26
|
children: React.ReactNode;
|
|
27
27
|
};
|
|
28
28
|
type Ctx = {
|
|
@@ -36,7 +36,10 @@ declare namespace NSProgressBar {
|
|
|
36
36
|
value?: number;
|
|
37
37
|
/** Animation diration in milliseconds for transitions */
|
|
38
38
|
duration?: number;
|
|
39
|
-
/**
|
|
39
|
+
/**
|
|
40
|
+
* Color theme
|
|
41
|
+
* @deprecated. Use only predefined themes.
|
|
42
|
+
*/
|
|
40
43
|
theme?: string;
|
|
41
44
|
};
|
|
42
45
|
type Component = Intergalactic.Component<'div', Props>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.type.d.ts","sourceRoot":"","sources":["../../src/ProgressBar.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEjE,OAAO,WAAW,aAAa,CAAC;IAC9B,KAAK,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG;QACzB;;;WAGG;QACH,KAAK,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"ProgressBar.type.d.ts","sourceRoot":"","sources":["../../src/ProgressBar.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEjE,OAAO,WAAW,aAAa,CAAC;IAC9B,KAAK,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG;QACzB;;;WAGG;QACH,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;QAChD;;;WAGG;QACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;QACvB,4BAA4B;QAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,KAAK,YAAY,GAAG;QAClB,QAAQ,EAAE,IAAI,CAAC;QACf,IAAI,EAAE,GAAG,CAAC;QACV,KAAK,EAAE,SAAS,CAAC;QACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,CAAC;IAEF,KAAK,GAAG,GAAG;QACT,aAAa,EAAE,YAAY,CAAC;KAC7B,CAAC;IAEF,UAAU,KAAK,CAAC;QACd,KAAK,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG;YACzB,yCAAyC;YACzC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;YACvB,qBAAqB;YACrB,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,yDAAyD;YACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB;;;eAGG;YACH,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;QAEF,KAAK,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;KACxD;IAED,KAAK,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,GAAG;QAC5D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC;CACH;AAED,6CAA6C;AAC7C,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC,KAAK,CAAC;AACnD,6CAA6C;AAC7C,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC;AACnD,6CAA6C;AAC7C,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,GAAG,CAAC;AAE/C,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
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
|
+
"version": "18.0.0-prerelease.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"require": "./lib/cjs/index.js"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
|
-
"@semcore/base-components": "^
|
|
17
|
+
"@semcore/base-components": "^18.0.0-prerelease.0"
|
|
18
18
|
},
|
|
19
19
|
"repository": {
|
|
20
20
|
"type": "git",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"directory": "semcore/progress-bar"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@semcore/core": "17.3.1-prerelease.9",
|
|
26
25
|
"@semcore/testing-utils": "1.0.0",
|
|
27
|
-
"@semcore/base-components": "
|
|
26
|
+
"@semcore/base-components": "18.0.0-prerelease.0",
|
|
27
|
+
"@semcore/core": "18.0.0-prerelease.0"
|
|
28
28
|
},
|
|
29
29
|
"scripts": {
|
|
30
30
|
"build": "pnpm semcore-builder && pnpm vite build"
|