@chayns-components/core 5.0.26 → 5.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/lib/cjs/components/progress-bar/ProgressBar.js +117 -176
  2. package/lib/cjs/components/progress-bar/ProgressBar.js.map +1 -1
  3. package/lib/cjs/components/progress-bar/ProgressBar.styles.js +6 -4
  4. package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map +1 -1
  5. package/lib/esm/components/progress-bar/ProgressBar.js +107 -168
  6. package/lib/esm/components/progress-bar/ProgressBar.js.map +1 -1
  7. package/lib/esm/components/progress-bar/ProgressBar.styles.js +6 -4
  8. package/lib/esm/components/progress-bar/ProgressBar.styles.js.map +1 -1
  9. package/lib/types/components/progress-bar/ProgressBar.d.ts +4 -0
  10. package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +1 -0
  11. package/package.json +2 -2
package/lib/cjs/components/progress-bar/ProgressBar.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _reactCompilerRuntime = require("react-compiler-runtime");
8
7
  var _react = _interopRequireWildcard(require("react"));
9
8
  var _uuid = require("../../hooks/uuid");
10
9
  var _ProgressBar = require("./ProgressBar.styles");
@@ -13,198 +12,140 @@ var _styledComponents = require("styled-components");
13
12
  var _Popup = _interopRequireDefault(require("../popup/Popup"));
14
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
14
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
16
- const ProgressBar = t0 => {
17
- "use memo";
15
+ const ProgressBar = ({
16
+ percentage,
17
+ label,
18
+ shouldHideProgress = false,
19
+ shouldShowLabelInline = false,
20
+ steps,
21
+ colors,
22
+ thumbLabel,
23
+ showShine = false,
24
+ height
25
+ }) => {
26
+ 'use memo';
18
27
 
19
- const $ = (0, _reactCompilerRuntime.c)(29);
20
- const {
21
- percentage,
22
- label,
23
- shouldHideProgress: t1,
24
- shouldShowLabelInline: t2,
25
- steps,
26
- colors,
27
- thumbLabel,
28
- showShine: t3
29
- } = t0;
30
- const shouldHideProgress = t1 === undefined ? false : t1;
31
- const shouldShowLabelInline = t2 === undefined ? false : t2;
32
- const showShine = t3 === undefined ? false : t3;
33
28
  const uuid = (0, _uuid.useUuid)();
29
+ const [coordinates, setCoordinates] = (0, _react.useState)();
34
30
  const popupRef = (0, _react.useRef)(null);
31
+ const hostContainerRef = (0, _react.useRef)(null);
35
32
  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
36
- let t4;
37
- bb0: {
38
- if (!showShine || percentage === undefined) {
39
- t4 = null;
40
- break bb0;
33
+ const shineEffect = (0, _react.useMemo)(() => {
34
+ if (!showShine || percentage === undefined) return null;
35
+ const MIN_ANIMATION_LENGTH = 1;
36
+ const MAX_ANIMATION_LENGTH = 5;
37
+ const MAX_SHINE_COUNT = 6;
38
+ const t = percentage / 100;
39
+ const shineCount = Math.ceil(MAX_SHINE_COUNT * t);
40
+ const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;
41
+ return Array.from({
42
+ length: shineCount
43
+ }).map((_, index) => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarShine
44
+ /* eslint-disable-next-line react/no-array-index-key */, {
45
+ key: `progress-bar-shine__${shineCount}__${index}`,
46
+ $speed: speed,
47
+ $delay: -(speed / shineCount) * index
48
+ }));
49
+ }, [percentage, showShine]);
50
+ (0, _react.useEffect)(() => {
51
+ var _hostContainerRef$cur;
52
+ if (thumbLabel) setCoordinates((_hostContainerRef$cur = hostContainerRef.current) === null || _hostContainerRef$cur === void 0 ? void 0 : _hostContainerRef$cur.getBoundingClientRect());
53
+ }, [thumbLabel]);
54
+ (0, _react.useEffect)(() => {
55
+ var _popupRef$current;
56
+ if (coordinates) (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 || _popupRef$current.show();
57
+ }, [coordinates]);
58
+ const progressBar = (0, _react.useMemo)(() => {
59
+ if (shouldHideProgress) {
60
+ return null;
41
61
  }
42
- const shineCount = Math.ceil(6 * (percentage / 100));
43
- const speed = 5 * (percentage / 100);
44
- let t5;
45
- if ($[0] !== shineCount) {
46
- t5 = Array.from({
47
- length: shineCount
48
- });
49
- $[0] = shineCount;
50
- $[1] = t5;
51
- } else {
52
- t5 = $[1];
53
- }
54
- let t6;
55
- if ($[2] !== shineCount || $[3] !== speed || $[4] !== t5) {
56
- t6 = t5.map((_, index) => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarShine, {
57
- key: `progress-bar-shine__${shineCount}__${index}`,
58
- $speed: speed,
59
- $delay: 5 / shineCount * index
60
- }));
61
- $[2] = shineCount;
62
- $[3] = speed;
63
- $[4] = t5;
64
- $[5] = t6;
65
- } else {
66
- t6 = $[5];
67
- }
68
- t4 = t6;
69
- }
70
- const shineEffect = t4;
71
- let t5;
72
- if ($[6] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[7] !== (colors === null || colors === void 0 ? void 0 : colors.primaryTextColor) || $[8] !== (colors === null || colors === void 0 ? void 0 : colors.progressColor) || $[9] !== (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) || $[10] !== (colors === null || colors === void 0 ? void 0 : colors.stepColor) || $[11] !== label || $[12] !== percentage || $[13] !== shineEffect || $[14] !== shouldHideProgress || $[15] !== shouldShowLabelInline || $[16] !== showShine || $[17] !== steps || $[18] !== theme || $[19] !== thumbLabel || $[20] !== uuid) {
73
- colors === null || colors === void 0 || colors.backgroundColor;
74
- colors === null || colors === void 0 || colors.primaryTextColor;
75
- colors === null || colors === void 0 || colors.progressColor;
76
- colors === null || colors === void 0 || colors.secondaryTextColor;
77
- colors === null || colors === void 0 || colors.stepColor;
78
- t5 = (() => {
79
- if (shouldHideProgress) {
80
- return null;
81
- }
82
- if (percentage === undefined) {
83
- return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, null, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
84
- key: `progress-bar-loop__${uuid}`,
85
- $color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
86
- initial: {
87
- width: "200px",
88
- left: "-200px"
89
- },
90
- animate: {
91
- width: "200px",
92
- left: "100%"
93
- },
94
- exit: {
95
- width: "200px",
96
- left: "100%"
97
- },
98
- transition: {
99
- type: "tween",
100
- repeat: Infinity,
101
- repeatDelay: 0,
102
- duration: 1
103
- }
104
- }), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
105
- $color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
106
- }));
107
- }
108
- return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, {
109
- $isBig: shouldShowLabelInline
110
- }, !!(steps !== null && steps !== void 0 && steps.length) && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStep, {
111
- $position: step,
112
- key: `progress-step-${step}`,
113
- $color: colors === null || colors === void 0 ? void 0 : colors.stepColor
114
- }))), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
62
+ if (percentage === undefined) {
63
+ return /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, null, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
64
+ key: `progress-bar-loop__${uuid}`,
115
65
  $color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
116
- key: `progress-bar__${uuid}`,
117
66
  initial: {
118
- width: "0%"
67
+ width: '200px',
68
+ left: '-200px'
119
69
  },
120
70
  animate: {
121
- width: `${percentage}%`
71
+ width: '200px',
72
+ left: '100%'
122
73
  },
123
74
  exit: {
124
- width: "0%"
75
+ width: '200px',
76
+ left: '100%'
125
77
  },
126
78
  transition: {
127
- type: "tween"
128
- },
129
- onUpdate: () => {
130
- var _popupRef$current;
131
- return (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.show();
132
- },
133
- onAnimationComplete: () => {
134
- var _popupRef$current2;
135
- return (_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.show();
136
- }
137
- }, showShine && shineEffect, thumbLabel && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarThumbLabel, {
138
- onClick: _temp
139
- }, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
140
- theme: {
141
- "000": (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) ?? (theme === null || theme === void 0 ? void 0 : theme["104"]),
142
- text: (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) ?? (theme === null || theme === void 0 ? void 0 : theme["300"])
143
- }
144
- }, /*#__PURE__*/_react.default.createElement(_Popup.default, {
145
- ref: popupRef,
146
- content: thumbLabel,
147
- alignment: _popup.PopupAlignment.TopCenter,
148
- onHide: () => {
149
- var _popupRef$current3;
150
- return (_popupRef$current3 = popupRef.current) === null || _popupRef$current3 === void 0 ? void 0 : _popupRef$current3.show();
79
+ type: 'tween',
80
+ repeat: Infinity,
81
+ repeatDelay: 0,
82
+ duration: 1
151
83
  }
152
- })))), shouldShowLabelInline && label && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
153
- $shouldShowLabelInline: shouldShowLabelInline,
154
- $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor,
155
- $secondaryColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
156
- $colorSplitPosition: percentage
157
- }, label), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
84
+ }), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
158
85
  $color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
159
86
  }));
160
- })();
161
- $[6] = colors === null || colors === void 0 ? void 0 : colors.backgroundColor;
162
- $[7] = colors === null || colors === void 0 ? void 0 : colors.primaryTextColor;
163
- $[8] = colors === null || colors === void 0 ? void 0 : colors.progressColor;
164
- $[9] = colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor;
165
- $[10] = colors === null || colors === void 0 ? void 0 : colors.stepColor;
166
- $[11] = label;
167
- $[12] = percentage;
168
- $[13] = shineEffect;
169
- $[14] = shouldHideProgress;
170
- $[15] = shouldShowLabelInline;
171
- $[16] = showShine;
172
- $[17] = steps;
173
- $[18] = theme;
174
- $[19] = thumbLabel;
175
- $[20] = uuid;
176
- $[21] = t5;
177
- } else {
178
- t5 = $[21];
179
- }
180
- const progressBar = t5;
181
- colors === null || colors === void 0 || colors.primaryTextColor;
182
- let t6;
183
- if ($[22] !== (colors === null || colors === void 0 ? void 0 : colors.primaryTextColor) || $[23] !== label || $[24] !== shouldShowLabelInline) {
184
- t6 = label && !shouldShowLabelInline && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
185
- $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor
186
- }, label);
187
- $[22] = colors === null || colors === void 0 ? void 0 : colors.primaryTextColor;
188
- $[23] = label;
189
- $[24] = shouldShowLabelInline;
190
- $[25] = t6;
191
- } else {
192
- t6 = $[25];
193
- }
194
- let t7;
195
- if ($[26] !== progressBar || $[27] !== t6) {
196
- t7 = /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBar, null, progressBar, t6);
197
- $[26] = progressBar;
198
- $[27] = t6;
199
- $[28] = t7;
200
- } else {
201
- t7 = $[28];
202
- }
203
- return t7;
87
+ }
88
+ return /*#__PURE__*/_react.default.createElement("div", {
89
+ ref: hostContainerRef
90
+ }, /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarProgressWrapper, {
91
+ $isBig: shouldShowLabelInline,
92
+ $height: height
93
+ }, !!(steps !== null && steps !== void 0 && steps.length) && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarStep, {
94
+ $position: step,
95
+ key: `progress-step-${step}`,
96
+ $color: colors === null || colors === void 0 ? void 0 : colors.stepColor
97
+ }))), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledMotionProgressBarProgress, {
98
+ $color: colors === null || colors === void 0 ? void 0 : colors.progressColor,
99
+ key: `progress-bar__${uuid}`,
100
+ initial: {
101
+ width: '0%'
102
+ },
103
+ animate: {
104
+ width: `${percentage}%`
105
+ },
106
+ exit: {
107
+ width: '0%'
108
+ },
109
+ transition: {
110
+ type: 'tween'
111
+ },
112
+ onUpdate: () => {
113
+ var _popupRef$current2;
114
+ return (_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 ? void 0 : _popupRef$current2.show();
115
+ },
116
+ onAnimationComplete: () => {
117
+ var _popupRef$current3;
118
+ return (_popupRef$current3 = popupRef.current) === null || _popupRef$current3 === void 0 ? void 0 : _popupRef$current3.show();
119
+ }
120
+ }, showShine && shineEffect, thumbLabel && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarThumbLabel, {
121
+ onClick: event => event.stopPropagation()
122
+ }, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
123
+ theme: {
124
+ '000': (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) ?? (theme === null || theme === void 0 ? void 0 : theme['104']),
125
+ text: (colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor) ?? (theme === null || theme === void 0 ? void 0 : theme['300'])
126
+ }
127
+ }, /*#__PURE__*/_react.default.createElement(_Popup.default, {
128
+ ref: popupRef,
129
+ content: thumbLabel,
130
+ alignment: _popup.PopupAlignment.TopCenter,
131
+ onHide: () => {
132
+ var _popupRef$current4;
133
+ return (_popupRef$current4 = popupRef.current) === null || _popupRef$current4 === void 0 ? void 0 : _popupRef$current4.show();
134
+ },
135
+ container: hostContainerRef.current ?? undefined
136
+ })))), shouldShowLabelInline && label && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
137
+ $shouldShowLabelInline: shouldShowLabelInline,
138
+ $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor,
139
+ $secondaryColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
140
+ $colorSplitPosition: percentage
141
+ }, label), /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarBackground, {
142
+ $color: colors === null || colors === void 0 ? void 0 : colors.backgroundColor
143
+ })));
144
+ }, [colors === null || colors === void 0 ? void 0 : colors.backgroundColor, colors === null || colors === void 0 ? void 0 : colors.primaryTextColor, colors === null || colors === void 0 ? void 0 : colors.progressColor, colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor, colors === null || colors === void 0 ? void 0 : colors.stepColor, height, label, percentage, shineEffect, shouldHideProgress, shouldShowLabelInline, showShine, steps, theme, thumbLabel, uuid]);
145
+ return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBar, null, progressBar, label && !shouldShowLabelInline && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarLabel, {
146
+ $primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryTextColor
147
+ }, label)), [colors === null || colors === void 0 ? void 0 : colors.primaryTextColor, label, progressBar, shouldShowLabelInline]);
204
148
  };
205
149
  ProgressBar.displayName = 'ProgressBar';
206
150
  var _default = exports.default = ProgressBar;
207
- function _temp(event) {
208
- return event.stopPropagation();
209
- }
210
151
  //# sourceMappingURL=ProgressBar.js.map
package/lib/cjs/components/progress-bar/ProgressBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.js","names":["_react","_interopRequireWildcard","require","_uuid","_ProgressBar","_popup","_styledComponents","_Popup","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","t0","$","_reactCompilerRuntime","c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","undefined","uuid","useUuid","popupRef","useRef","theme","useContext","ThemeContext","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","StyledProgressBarShine","key","$delay","shineEffect","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","StyledProgressBarStepWrapper","step","StyledProgressBarStep","onUpdate","_popupRef$current","current","show","onAnimationComplete","_popupRef$current2","StyledProgressBarThumbLabel","onClick","_temp","ThemeProvider","text","alignment","PopupAlignment","TopCenter","onHide","_popupRef$current3","StyledProgressBarLabel","$primaryColor","$secondaryColor","progressBar","t7","StyledProgressBar","displayName","_default","exports","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useMemo, useRef } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n /**\n * The colors of the ProgressBar.\n */\n colors?: Colors;\n /**\n * The label that should be displayed under the progressbar.\n */\n label?: string;\n /**\n * The percentage of the progress. Number between 0 and 100.\n */\n percentage?: Range<0, 101>;\n /**\n * Whether the progress should be hide and just display the label.\n */\n shouldHideProgress?: boolean;\n /**\n * Whether the label should be displayed inside the ProgressBar.\n */\n shouldShowLabelInline?: boolean;\n /**\n * Visual marked steps.\n */\n steps?: Range<0, 101>[];\n /**\n * The label that should be displayed on the thumb of the progress bar.\n */\n thumbLabel?: React.ReactNode;\n /**\n * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n */\n showShine?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const popupRef = useRef<PopupRef | null>(null);\n\n const theme = useContext(ThemeContext) as Theme | undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine || percentage === undefined) return null;\n const FULL_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT * (percentage / 100));\n const speed = FULL_ANIMATION_LENGTH * (percentage / 100);\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key */\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={(FULL_ANIMATION_LENGTH / shineCount) * index}\n />\n ));\n }, [percentage, showShine]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel onClick={(event) => event.stopPropagation()}>\n <ThemeProvider\n theme={{\n '000': colors?.backgroundColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ProgressBar.js","names":["_react","_interopRequireWildcard","require","_uuid","_ProgressBar","_popup","_styledComponents","_Popup","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","percentage","label","shouldHideProgress","shouldShowLabelInline","steps","colors","thumbLabel","showShine","height","uuid","useUuid","coordinates","setCoordinates","useState","popupRef","useRef","hostContainerRef","theme","useContext","ThemeContext","shineEffect","useMemo","undefined","MIN_ANIMATION_LENGTH","MAX_ANIMATION_LENGTH","MAX_SHINE_COUNT","shineCount","Math","ceil","speed","Array","from","length","map","_","index","createElement","StyledProgressBarShine","key","$speed","$delay","useEffect","_hostContainerRef$cur","current","getBoundingClientRect","_popupRef$current","show","progressBar","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","$color","progressColor","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","backgroundColor","ref","$isBig","$height","StyledProgressBarStepWrapper","step","StyledProgressBarStep","$position","stepColor","onUpdate","_popupRef$current2","onAnimationComplete","_popupRef$current3","StyledProgressBarThumbLabel","onClick","event","stopPropagation","ThemeProvider","text","secondaryTextColor","content","alignment","PopupAlignment","TopCenter","onHide","_popupRef$current4","container","StyledProgressBarLabel","$shouldShowLabelInline","$primaryColor","primaryTextColor","$secondaryColor","$colorSplitPosition","StyledProgressBar","displayName","_default","exports"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n /**\n * The colors of the ProgressBar.\n */\n colors?: Colors;\n /**\n * The label that should be displayed under the progressbar.\n */\n label?: string;\n /**\n * The percentage of the progress. Number between 0 and 100.\n */\n percentage?: Range<0, 101>;\n /**\n * Whether the progress should be hide and just display the label.\n */\n shouldHideProgress?: boolean;\n /**\n * Whether the label should be displayed inside the ProgressBar.\n */\n shouldShowLabelInline?: boolean;\n /**\n * Visual marked steps.\n */\n steps?: Range<0, 101>[];\n /**\n * The label that should be displayed on the thumb of the progress bar.\n */\n thumbLabel?: React.ReactNode;\n /**\n * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n */\n showShine?: boolean;\n /**\n * The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n */\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();\n const popupRef = useRef<PopupRef | null>(null);\n const hostContainerRef = useRef<HTMLDivElement | null>(null);\n\n const theme = useContext(ThemeContext) as Theme | undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine || percentage === undefined) return null;\n const MIN_ANIMATION_LENGTH = 1;\n const MAX_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n const t = percentage / 100;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT * t);\n\n const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;\n\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key */\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={-(speed / shineCount) * index}\n />\n ));\n }, [percentage, showShine]);\n\n useEffect(() => {\n if (thumbLabel) setCoordinates(hostContainerRef.current?.getBoundingClientRect());\n }, [thumbLabel]);\n\n useEffect(() => {\n if (coordinates) popupRef.current?.show();\n }, [coordinates]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <div ref={hostContainerRef}>\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline} $height={height}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel\n onClick={(event) => event.stopPropagation()}\n >\n <ThemeProvider\n theme={{\n '000': colors?.backgroundColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n container={hostContainerRef.current ?? undefined}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </div>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n height,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AAWA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAEA,IAAAK,MAAA,GAAAC,sBAAA,CAAAN,OAAA;AAAmC,SAAAM,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAZ,uBAAA,YAAAA,CAAAQ,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAuDnC,MAAMgB,WAAiC,GAAGA,CAAC;EACvCC,UAAU;EACVC,KAAK;EACLC,kBAAkB,GAAG,KAAK;EAC1BC,qBAAqB,GAAG,KAAK;EAC7BC,KAAK;EACLC,MAAM;EACNC,UAAU;EACVC,SAAS,GAAG,KAAK;EACjBC;AACJ,CAAC,KAAK;EACF,UAAU;;EAEV,MAAMC,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;EACtB,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAA2B,CAAC;EAC1E,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAkB,IAAI,CAAC;EAC9C,MAAMC,gBAAgB,GAAG,IAAAD,aAAM,EAAwB,IAAI,CAAC;EAE5D,MAAME,KAAK,GAAG,IAAAC,iBAAU,EAACC,8BAAY,CAAsB;EAE3D,MAAMC,WAAW,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC9B,IAAI,CAACd,SAAS,IAAIP,UAAU,KAAKsB,SAAS,EAAE,OAAO,IAAI;IACvD,MAAMC,oBAAoB,GAAG,CAAC;IAC9B,MAAMC,oBAAoB,GAAG,CAAC;IAC9B,MAAMC,eAAe,GAAG,CAAC;IACzB,MAAM1C,CAAC,GAAGiB,UAAU,GAAG,GAAG;IAE1B,MAAM0B,UAAU,GAAGC,IAAI,CAACC,IAAI,CAACH,eAAe,GAAG1C,CAAC,CAAC;IAEjD,MAAM8C,KAAK,GAAGN,oBAAoB,GAAG,CAACC,oBAAoB,GAAGD,oBAAoB,IAAIxC,CAAC;IAEtF,OAAO+C,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAEN;IAAW,CAAC,CAAC,CAACO,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,kBACnDhE,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAA8D;IACG;MACAC,GAAG,EAAE,uBAAuBZ,UAAU,KAAKS,KAAK,EAAG;MACnDI,MAAM,EAAEV,KAAM;MACdW,MAAM,EAAE,EAAEX,KAAK,GAAGH,UAAU,CAAC,GAAGS;IAAM,CACzC,CACJ,CAAC;EACN,CAAC,EAAE,CAACnC,UAAU,EAAEO,SAAS,CAAC,CAAC;EAE3B,IAAAkC,gBAAS,EAAC,MAAM;IAAA,IAAAC,qBAAA;IACZ,IAAIpC,UAAU,EAAEM,cAAc,EAAA8B,qBAAA,GAAC1B,gBAAgB,CAAC2B,OAAO,cAAAD,qBAAA,uBAAxBA,qBAAA,CAA0BE,qBAAqB,CAAC,CAAC,CAAC;EACrF,CAAC,EAAE,CAACtC,UAAU,CAAC,CAAC;EAEhB,IAAAmC,gBAAS,EAAC,MAAM;IAAA,IAAAI,iBAAA;IACZ,IAAIlC,WAAW,EAAE,CAAAkC,iBAAA,GAAA/B,QAAQ,CAAC6B,OAAO,cAAAE,iBAAA,eAAhBA,iBAAA,CAAkBC,IAAI,CAAC,CAAC;EAC7C,CAAC,EAAE,CAACnC,WAAW,CAAC,CAAC;EAEjB,MAAMoC,WAAW,GAAG,IAAA1B,cAAO,EAAC,MAAM;IAC9B,IAAInB,kBAAkB,EAAE;MACpB,OAAO,IAAI;IACf;IAEA,IAAIF,UAAU,KAAKsB,SAAS,EAAE;MAC1B,oBACInD,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAAyE,gCAAgC,qBAC7B7E,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAA0E,+BAA+B;QAC5BX,GAAG,EAAE,sBAAsB7B,IAAI,EAAG;QAClCyC,MAAM,EAAE7C,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE8C,aAAc;QAC9BC,OAAO,EAAE;UAAEC,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAS,CAAE;QAC5CC,OAAO,EAAE;UAAEF,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QAC1CE,IAAI,EAAE;UAAEH,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QACvCG,UAAU,EAAE;UACRC,IAAI,EAAE,OAAO;UACbC,MAAM,EAAEC,QAAQ;UAChBC,WAAW,EAAE,CAAC;UACdC,QAAQ,EAAE;QACd;MAAE,CACL,CAAC,eACF3F,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAAwF,2BAA2B;QAACb,MAAM,EAAE7C,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE2D;MAAgB,CAAE,CACjC,CAAC;IAE3C;IAEA,oBACI7F,MAAA,CAAAW,OAAA,CAAAsD,aAAA;MAAK6B,GAAG,EAAEjD;IAAiB,gBACvB7C,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAAyE,gCAAgC;MAACkB,MAAM,EAAE/D,qBAAsB;MAACgE,OAAO,EAAE3D;IAAO,GAC5E,CAAC,EAACJ,KAAK,aAALA,KAAK,eAALA,KAAK,CAAE4B,MAAM,kBACZ7D,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAA6F,4BAA4B,QACxBhE,KAAK,CAAC6B,GAAG,CAAEoC,IAAI,iBACZlG,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAA+F,qBAAqB;MAClBC,SAAS,EAAEF,IAAK;MAChB/B,GAAG,EAAE,iBAAiB+B,IAAI,EAAG;MAC7BnB,MAAM,EAAE7C,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEmE;IAAU,CAC7B,CACJ,CACyB,CACjC,eACDrG,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAA0E,+BAA+B;MAC5BC,MAAM,EAAE7C,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE8C,aAAc;MAC9Bb,GAAG,EAAE,iBAAiB7B,IAAI,EAAG;MAC7B2C,OAAO,EAAE;QAAEC,KAAK,EAAE;MAAK,CAAE;MACzBE,OAAO,EAAE;QAAEF,KAAK,EAAE,GAAGrD,UAAU;MAAI,CAAE;MACrCwD,IAAI,EAAE;QAAEH,KAAK,EAAE;MAAK,CAAE;MACtBI,UAAU,EAAE;QAAEC,IAAI,EAAE;MAAQ,CAAE;MAC9Be,QAAQ,EAAEA,CAAA;QAAA,IAAAC,kBAAA;QAAA,QAAAA,kBAAA,GAAM5D,QAAQ,CAAC6B,OAAO,cAAA+B,kBAAA,uBAAhBA,kBAAA,CAAkB5B,IAAI,CAAC,CAAC;MAAA,CAAC;MACzC6B,mBAAmB,EAAEA,CAAA;QAAA,IAAAC,kBAAA;QAAA,QAAAA,kBAAA,GAAM9D,QAAQ,CAAC6B,OAAO,cAAAiC,kBAAA,uBAAhBA,kBAAA,CAAkB9B,IAAI,CAAC,CAAC;MAAA;IAAC,GAEnDvC,SAAS,IAAIa,WAAW,EACxBd,UAAU,iBACPnC,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAAsG,2BAA2B;MACxBC,OAAO,EAAGC,KAAK,IAAKA,KAAK,CAACC,eAAe,CAAC;IAAE,gBAE5C7G,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC3D,iBAAA,CAAAwG,aAAa;MACVhE,KAAK,EAAE;QACH,KAAK,EAAE,CAAAZ,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE2D,eAAe,MAAI/C,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,KAAK,CAAC;QAChDiE,IAAI,EAAE,CAAA7E,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE8E,kBAAkB,MAAIlE,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,KAAK,CAAC;MACtD;IAAE,gBAEF9C,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC1D,MAAA,CAAAI,OAAK;MACFmF,GAAG,EAAEnD,QAAS;MACdsE,OAAO,EAAE9E,UAAW;MACpB+E,SAAS,EAAEC,qBAAc,CAACC,SAAU;MACpCC,MAAM,EAAEA,CAAA;QAAA,IAAAC,kBAAA;QAAA,QAAAA,kBAAA,GAAM3E,QAAQ,CAAC6B,OAAO,cAAA8C,kBAAA,uBAAhBA,kBAAA,CAAkB3C,IAAI,CAAC,CAAC;MAAA,CAAC;MACvC4C,SAAS,EAAE1E,gBAAgB,CAAC2B,OAAO,IAAIrB;IAAU,CAG9C,CACI,CACU,CAEJ,CAAC,EAEjCnB,qBAAqB,IAAIF,KAAK,iBAC3B9B,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAAoH,sBAAsB;MACnBC,sBAAsB,EAAEzF,qBAAsB;MAC9C0F,aAAa,EAAExF,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEyF,gBAAiB;MACxCC,eAAe,EAAE1F,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE8E,kBAAmB;MAC5Ca,mBAAmB,EAAEhG;IAAW,GAE/BC,KACmB,CAC3B,eAED9B,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAAwF,2BAA2B;MAACb,MAAM,EAAE7C,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE2D;IAAgB,CAAE,CACjC,CACjC,CAAC;EAEd,CAAC,EAAE,CACC3D,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE2D,eAAe,EACvB3D,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEyF,gBAAgB,EACxBzF,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE8C,aAAa,EACrB9C,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE8E,kBAAkB,EAC1B9E,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEmE,SAAS,EACjBhE,MAAM,EACNP,KAAK,EACLD,UAAU,EACVoB,WAAW,EACXlB,kBAAkB,EAClBC,qBAAqB,EACrBI,SAAS,EACTH,KAAK,EACLa,KAAK,EACLX,UAAU,EACVG,IAAI,CACP,CAAC;EAEF,OAAO,IAAAY,cAAO,EACV,mBACIlD,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAA0H,iBAAiB,QACblD,WAAW,EACX9C,KAAK,IAAI,CAACE,qBAAqB,iBAC5BhC,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC7D,YAAA,CAAAoH,sBAAsB;IAACE,aAAa,EAAExF,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEyF;EAAiB,GAC3D7F,KACmB,CAEb,CACtB,EACD,CAACI,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEyF,gBAAgB,EAAE7F,KAAK,EAAE8C,WAAW,EAAE5C,qBAAqB,CACxE,CAAC;AACL,CAAC;AAEDJ,WAAW,CAACmG,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtH,OAAA,GAEzBiB,WAAW","ignoreList":[]}
package/lib/cjs/components/progress-bar/ProgressBar.styles.js CHANGED
@@ -23,18 +23,20 @@ const StyledProgressBarProgressWrapper = exports.StyledProgressBarProgressWrappe
23
23
  position: relative;
24
24
  width: 100%;
25
25
  height: ${({
26
+ $height,
26
27
  $isBig
27
- }) => $isBig ? 20 : 10}px;
28
+ }) => $height || ($isBig ? 20 : 10)}px;
28
29
  border-radius: ${({
30
+ $height,
29
31
  $isBig
30
- }) => $isBig ? 20 : 2}px;
32
+ }) => $isBig ? $height ?? 20 : ($height ?? 10) / 5}px;
31
33
  `;
32
34
  const shineMove = (0, _styledComponents.keyframes)`
33
35
  from {
34
- transform: translateX(-150%);
36
+ transform: translateX(-100%);
35
37
  }
36
38
  to {
37
- transform: translateX(150%);
39
+ transform: translateX(100%);
38
40
  }
39
41
  `;
40
42
  const StyledProgressBarShine = exports.StyledProgressBarShine = _styledComponents.default.div.attrs(({
package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledProgressBar","exports","styled","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","shineMove","keyframes","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","motion","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","css","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $isBig }) => ($isBig ? 20 : 10)}px;\n border-radius: ${({ $isBig }) => ($isBig ? 20 : 2)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-150%);\n }\n to {\n transform: translateX(150%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ProgressBar.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledProgressBar","exports","styled","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","keyframes","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","motion","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","css","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height || ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => ($isBig ? ($height ?? 20) : ($height ?? 10) / 5)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n`;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/progress-bar/ProgressBar.js CHANGED
@@ -1,193 +1,132 @@
1
- import { c as _c } from "react-compiler-runtime";
2
- import React, { useContext, useMemo, useRef } from 'react';
1
+ import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
3
2
  import { useUuid } from '../../hooks/uuid';
4
3
  import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper, StyledProgressBarShine, StyledProgressBarStep, StyledProgressBarStepWrapper, StyledProgressBarThumbLabel } from './ProgressBar.styles';
5
4
  import { PopupAlignment } from '../../types/popup';
6
5
  import { ThemeContext, ThemeProvider } from 'styled-components';
7
6
  import Popup from '../popup/Popup';
8
- const ProgressBar = t0 => {
9
- "use memo";
7
+ const ProgressBar = ({
8
+ percentage,
9
+ label,
10
+ shouldHideProgress = false,
11
+ shouldShowLabelInline = false,
12
+ steps,
13
+ colors,
14
+ thumbLabel,
15
+ showShine = false,
16
+ height
17
+ }) => {
18
+ 'use memo';
10
19
 
11
- const $ = _c(29);
12
- const {
13
- percentage,
14
- label,
15
- shouldHideProgress: t1,
16
- shouldShowLabelInline: t2,
17
- steps,
18
- colors,
19
- thumbLabel,
20
- showShine: t3
21
- } = t0;
22
- const shouldHideProgress = t1 === undefined ? false : t1;
23
- const shouldShowLabelInline = t2 === undefined ? false : t2;
24
- const showShine = t3 === undefined ? false : t3;
25
20
  const uuid = useUuid();
21
+ const [coordinates, setCoordinates] = useState();
26
22
  const popupRef = useRef(null);
23
+ const hostContainerRef = useRef(null);
27
24
  const theme = useContext(ThemeContext);
28
- let t4;
29
- bb0: {
30
- if (!showShine || percentage === undefined) {
31
- t4 = null;
32
- break bb0;
25
+ const shineEffect = useMemo(() => {
26
+ if (!showShine || percentage === undefined) return null;
27
+ const MIN_ANIMATION_LENGTH = 1;
28
+ const MAX_ANIMATION_LENGTH = 5;
29
+ const MAX_SHINE_COUNT = 6;
30
+ const t = percentage / 100;
31
+ const shineCount = Math.ceil(MAX_SHINE_COUNT * t);
32
+ const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;
33
+ return Array.from({
34
+ length: shineCount
35
+ }).map((_, index) => /*#__PURE__*/React.createElement(StyledProgressBarShine
36
+ /* eslint-disable-next-line react/no-array-index-key */, {
37
+ key: `progress-bar-shine__${shineCount}__${index}`,
38
+ $speed: speed,
39
+ $delay: -(speed / shineCount) * index
40
+ }));
41
+ }, [percentage, showShine]);
42
+ useEffect(() => {
43
+ if (thumbLabel) setCoordinates(hostContainerRef.current?.getBoundingClientRect());
44
+ }, [thumbLabel]);
45
+ useEffect(() => {
46
+ if (coordinates) popupRef.current?.show();
47
+ }, [coordinates]);
48
+ const progressBar = useMemo(() => {
49
+ if (shouldHideProgress) {
50
+ return null;
33
51
  }
34
- const shineCount = Math.ceil(6 * (percentage / 100));
35
- const speed = 5 * (percentage / 100);
36
- let t5;
37
- if ($[0] !== shineCount) {
38
- t5 = Array.from({
39
- length: shineCount
40
- });
41
- $[0] = shineCount;
42
- $[1] = t5;
43
- } else {
44
- t5 = $[1];
45
- }
46
- let t6;
47
- if ($[2] !== shineCount || $[3] !== speed || $[4] !== t5) {
48
- t6 = t5.map((_, index) => /*#__PURE__*/React.createElement(StyledProgressBarShine, {
49
- key: `progress-bar-shine__${shineCount}__${index}`,
50
- $speed: speed,
51
- $delay: 5 / shineCount * index
52
- }));
53
- $[2] = shineCount;
54
- $[3] = speed;
55
- $[4] = t5;
56
- $[5] = t6;
57
- } else {
58
- t6 = $[5];
59
- }
60
- t4 = t6;
61
- }
62
- const shineEffect = t4;
63
- let t5;
64
- if ($[6] !== colors?.backgroundColor || $[7] !== colors?.primaryTextColor || $[8] !== colors?.progressColor || $[9] !== colors?.secondaryTextColor || $[10] !== colors?.stepColor || $[11] !== label || $[12] !== percentage || $[13] !== shineEffect || $[14] !== shouldHideProgress || $[15] !== shouldShowLabelInline || $[16] !== showShine || $[17] !== steps || $[18] !== theme || $[19] !== thumbLabel || $[20] !== uuid) {
65
- colors?.backgroundColor;
66
- colors?.primaryTextColor;
67
- colors?.progressColor;
68
- colors?.secondaryTextColor;
69
- colors?.stepColor;
70
- t5 = (() => {
71
- if (shouldHideProgress) {
72
- return null;
73
- }
74
- if (percentage === undefined) {
75
- return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
76
- key: `progress-bar-loop__${uuid}`,
77
- $color: colors?.progressColor,
78
- initial: {
79
- width: "200px",
80
- left: "-200px"
81
- },
82
- animate: {
83
- width: "200px",
84
- left: "100%"
85
- },
86
- exit: {
87
- width: "200px",
88
- left: "100%"
89
- },
90
- transition: {
91
- type: "tween",
92
- repeat: Infinity,
93
- repeatDelay: 0,
94
- duration: 1
95
- }
96
- }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
97
- $color: colors?.backgroundColor
98
- }));
99
- }
100
- return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, {
101
- $isBig: shouldShowLabelInline
102
- }, !!steps?.length && /*#__PURE__*/React.createElement(StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/React.createElement(StyledProgressBarStep, {
103
- $position: step,
104
- key: `progress-step-${step}`,
105
- $color: colors?.stepColor
106
- }))), /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
52
+ if (percentage === undefined) {
53
+ return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
54
+ key: `progress-bar-loop__${uuid}`,
107
55
  $color: colors?.progressColor,
108
- key: `progress-bar__${uuid}`,
109
56
  initial: {
110
- width: "0%"
57
+ width: '200px',
58
+ left: '-200px'
111
59
  },
112
60
  animate: {
113
- width: `${percentage}%`
61
+ width: '200px',
62
+ left: '100%'
114
63
  },
115
64
  exit: {
116
- width: "0%"
65
+ width: '200px',
66
+ left: '100%'
117
67
  },
118
68
  transition: {
119
- type: "tween"
120
- },
121
- onUpdate: () => popupRef.current?.show(),
122
- onAnimationComplete: () => popupRef.current?.show()
123
- }, showShine && shineEffect, thumbLabel && /*#__PURE__*/React.createElement(StyledProgressBarThumbLabel, {
124
- onClick: _temp
125
- }, /*#__PURE__*/React.createElement(ThemeProvider, {
126
- theme: {
127
- "000": colors?.backgroundColor ?? theme?.["104"],
128
- text: colors?.secondaryTextColor ?? theme?.["300"]
69
+ type: 'tween',
70
+ repeat: Infinity,
71
+ repeatDelay: 0,
72
+ duration: 1
129
73
  }
130
- }, /*#__PURE__*/React.createElement(Popup, {
131
- ref: popupRef,
132
- content: thumbLabel,
133
- alignment: PopupAlignment.TopCenter,
134
- onHide: () => popupRef.current?.show()
135
- })))), shouldShowLabelInline && label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
136
- $shouldShowLabelInline: shouldShowLabelInline,
137
- $primaryColor: colors?.primaryTextColor,
138
- $secondaryColor: colors?.secondaryTextColor,
139
- $colorSplitPosition: percentage
140
- }, label), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
74
+ }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
141
75
  $color: colors?.backgroundColor
142
76
  }));
143
- })();
144
- $[6] = colors?.backgroundColor;
145
- $[7] = colors?.primaryTextColor;
146
- $[8] = colors?.progressColor;
147
- $[9] = colors?.secondaryTextColor;
148
- $[10] = colors?.stepColor;
149
- $[11] = label;
150
- $[12] = percentage;
151
- $[13] = shineEffect;
152
- $[14] = shouldHideProgress;
153
- $[15] = shouldShowLabelInline;
154
- $[16] = showShine;
155
- $[17] = steps;
156
- $[18] = theme;
157
- $[19] = thumbLabel;
158
- $[20] = uuid;
159
- $[21] = t5;
160
- } else {
161
- t5 = $[21];
162
- }
163
- const progressBar = t5;
164
- colors?.primaryTextColor;
165
- let t6;
166
- if ($[22] !== colors?.primaryTextColor || $[23] !== label || $[24] !== shouldShowLabelInline) {
167
- t6 = label && !shouldShowLabelInline && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
168
- $primaryColor: colors?.primaryTextColor
169
- }, label);
170
- $[22] = colors?.primaryTextColor;
171
- $[23] = label;
172
- $[24] = shouldShowLabelInline;
173
- $[25] = t6;
174
- } else {
175
- t6 = $[25];
176
- }
177
- let t7;
178
- if ($[26] !== progressBar || $[27] !== t6) {
179
- t7 = /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, t6);
180
- $[26] = progressBar;
181
- $[27] = t6;
182
- $[28] = t7;
183
- } else {
184
- t7 = $[28];
185
- }
186
- return t7;
77
+ }
78
+ return /*#__PURE__*/React.createElement("div", {
79
+ ref: hostContainerRef
80
+ }, /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, {
81
+ $isBig: shouldShowLabelInline,
82
+ $height: height
83
+ }, !!steps?.length && /*#__PURE__*/React.createElement(StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/React.createElement(StyledProgressBarStep, {
84
+ $position: step,
85
+ key: `progress-step-${step}`,
86
+ $color: colors?.stepColor
87
+ }))), /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
88
+ $color: colors?.progressColor,
89
+ key: `progress-bar__${uuid}`,
90
+ initial: {
91
+ width: '0%'
92
+ },
93
+ animate: {
94
+ width: `${percentage}%`
95
+ },
96
+ exit: {
97
+ width: '0%'
98
+ },
99
+ transition: {
100
+ type: 'tween'
101
+ },
102
+ onUpdate: () => popupRef.current?.show(),
103
+ onAnimationComplete: () => popupRef.current?.show()
104
+ }, showShine && shineEffect, thumbLabel && /*#__PURE__*/React.createElement(StyledProgressBarThumbLabel, {
105
+ onClick: event => event.stopPropagation()
106
+ }, /*#__PURE__*/React.createElement(ThemeProvider, {
107
+ theme: {
108
+ '000': colors?.backgroundColor ?? theme?.['104'],
109
+ text: colors?.secondaryTextColor ?? theme?.['300']
110
+ }
111
+ }, /*#__PURE__*/React.createElement(Popup, {
112
+ ref: popupRef,
113
+ content: thumbLabel,
114
+ alignment: PopupAlignment.TopCenter,
115
+ onHide: () => popupRef.current?.show(),
116
+ container: hostContainerRef.current ?? undefined
117
+ })))), shouldShowLabelInline && label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
118
+ $shouldShowLabelInline: shouldShowLabelInline,
119
+ $primaryColor: colors?.primaryTextColor,
120
+ $secondaryColor: colors?.secondaryTextColor,
121
+ $colorSplitPosition: percentage
122
+ }, label), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
123
+ $color: colors?.backgroundColor
124
+ })));
125
+ }, [colors?.backgroundColor, colors?.primaryTextColor, colors?.progressColor, colors?.secondaryTextColor, colors?.stepColor, height, label, percentage, shineEffect, shouldHideProgress, shouldShowLabelInline, showShine, steps, theme, thumbLabel, uuid]);
126
+ return useMemo(() => /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, label && !shouldShowLabelInline && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
127
+ $primaryColor: colors?.primaryTextColor
128
+ }, label)), [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline]);
187
129
  };
188
130
  ProgressBar.displayName = 'ProgressBar';
189
131
  export default ProgressBar;
190
- function _temp(event) {
191
- return event.stopPropagation();
192
- }
193
132
  //# sourceMappingURL=ProgressBar.js.map
package/lib/esm/components/progress-bar/ProgressBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.js","names":["React","useContext","useMemo","useRef","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","undefined","uuid","popupRef","theme","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","step","onUpdate","current","show","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","$primaryColor","$secondaryColor","progressBar","t7","displayName","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useMemo, useRef } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n /**\n * The colors of the ProgressBar.\n */\n colors?: Colors;\n /**\n * The label that should be displayed under the progressbar.\n */\n label?: string;\n /**\n * The percentage of the progress. Number between 0 and 100.\n */\n percentage?: Range<0, 101>;\n /**\n * Whether the progress should be hide and just display the label.\n */\n shouldHideProgress?: boolean;\n /**\n * Whether the label should be displayed inside the ProgressBar.\n */\n shouldShowLabelInline?: boolean;\n /**\n * Visual marked steps.\n */\n steps?: Range<0, 101>[];\n /**\n * The label that should be displayed on the thumb of the progress bar.\n */\n thumbLabel?: React.ReactNode;\n /**\n * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n */\n showShine?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const popupRef = useRef<PopupRef | null>(null);\n\n const theme = useContext(ThemeContext) as Theme | undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine || percentage === undefined) return null;\n const FULL_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT * (percentage / 100));\n const speed = FULL_ANIMATION_LENGTH * (percentage / 100);\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key */\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={(FULL_ANIMATION_LENGTH / shineCount) * index}\n />\n ));\n }, [percentage, showShine]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel onClick={(event) => event.stopPropagation()}>\n <ThemeProvider\n theme={{\n '000': colors?.backgroundColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ProgressBar.js","names":["React","useContext","useEffect","useMemo","useRef","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","percentage","label","shouldHideProgress","shouldShowLabelInline","steps","colors","thumbLabel","showShine","height","uuid","coordinates","setCoordinates","popupRef","hostContainerRef","theme","shineEffect","undefined","MIN_ANIMATION_LENGTH","MAX_ANIMATION_LENGTH","MAX_SHINE_COUNT","t","shineCount","Math","ceil","speed","Array","from","length","map","_","index","createElement","key","$speed","$delay","current","getBoundingClientRect","show","progressBar","$color","progressColor","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","backgroundColor","ref","$isBig","$height","step","$position","stepColor","onUpdate","onAnimationComplete","onClick","event","stopPropagation","text","secondaryTextColor","content","alignment","TopCenter","onHide","container","$shouldShowLabelInline","$primaryColor","primaryTextColor","$secondaryColor","$colorSplitPosition","displayName"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n}\n\nexport type ProgressBarProps = {\n /**\n * The colors of the ProgressBar.\n */\n colors?: Colors;\n /**\n * The label that should be displayed under the progressbar.\n */\n label?: string;\n /**\n * The percentage of the progress. Number between 0 and 100.\n */\n percentage?: Range<0, 101>;\n /**\n * Whether the progress should be hide and just display the label.\n */\n shouldHideProgress?: boolean;\n /**\n * Whether the label should be displayed inside the ProgressBar.\n */\n shouldShowLabelInline?: boolean;\n /**\n * Visual marked steps.\n */\n steps?: Range<0, 101>[];\n /**\n * The label that should be displayed on the thumb of the progress bar.\n */\n thumbLabel?: React.ReactNode;\n /**\n * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n */\n showShine?: boolean;\n /**\n * The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n */\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();\n const popupRef = useRef<PopupRef | null>(null);\n const hostContainerRef = useRef<HTMLDivElement | null>(null);\n\n const theme = useContext(ThemeContext) as Theme | undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine || percentage === undefined) return null;\n const MIN_ANIMATION_LENGTH = 1;\n const MAX_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n const t = percentage / 100;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT * t);\n\n const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;\n\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key */\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={-(speed / shineCount) * index}\n />\n ));\n }, [percentage, showShine]);\n\n useEffect(() => {\n if (thumbLabel) setCoordinates(hostContainerRef.current?.getBoundingClientRect());\n }, [thumbLabel]);\n\n useEffect(() => {\n if (coordinates) popupRef.current?.show();\n }, [coordinates]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <div ref={hostContainerRef}>\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline} $height={height}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel\n onClick={(event) => event.stopPropagation()}\n >\n <ThemeProvider\n theme={{\n '000': colors?.backgroundColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n container={hostContainerRef.current ?? undefined}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </div>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n height,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/progress-bar/ProgressBar.styles.js CHANGED
@@ -16,18 +16,20 @@ export const StyledProgressBarProgressWrapper = styled.div`
16
16
  position: relative;
17
17
  width: 100%;
18
18
  height: ${({
19
+ $height,
19
20
  $isBig
20
- }) => $isBig ? 20 : 10}px;
21
+ }) => $height || ($isBig ? 20 : 10)}px;
21
22
  border-radius: ${({
23
+ $height,
22
24
  $isBig
23
- }) => $isBig ? 20 : 2}px;
25
+ }) => $isBig ? $height ?? 20 : ($height ?? 10) / 5}px;
24
26
  `;
25
27
  const shineMove = keyframes`
26
28
  from {
27
- transform: translateX(-150%);
29
+ transform: translateX(-100%);
28
30
  }
29
31
  to {
30
- transform: translateX(150%);
32
+ transform: translateX(100%);
31
33
  }
32
34
  `;
33
35
  export const StyledProgressBarShine = styled.div.attrs(({
package/lib/esm/components/progress-bar/ProgressBar.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $isBig }) => ($isBig ? 20 : 10)}px;\n border-radius: ${({ $isBig }) => ($isBig ? 20 : 2)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-150%);\n }\n to {\n transform: translateX(150%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAG1D,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAG;AAC3C;AACA,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGL,MAAM,CAACI,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAMD,OAAO,MAAME,gCAAgC,GAAGR,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,EAAG;AAChD,qBAAqB,CAAC;EAAEA;AAAO,CAAC,KAAMA,MAAM,GAAG,EAAE,GAAG,CAAE;AACtD,CAAC;AAID,MAAMC,SAAS,GAAGR,SAAS;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMS,sBAAsB,GAAGX,MAAM,CAACI,GAAG,CAACQ,KAAK,CAClD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IAAEC,cAAc,EAAE,GAAGF,MAAM,IAAI,CAAC;EAAI;AAC/C,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBH,SAAS,IAAI,CAAC;EAAEM,MAAM,GAAG;AAAE,CAAC,KAAK,GAAGA,MAAM,GAAG;AAC9D;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGjB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACY,QAAQ;AAChC,CAAC;AASD,OAAO,MAAMC,sBAAsB,GAAGnB,MAAM,CAACI,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEc;AAAoD,CAAC,KACpEA,sBAAsB,GAAGd,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACY,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAEjB;AAAM,CAAC,KAC7De,mBAAmB,IACnBpB,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBqB,aAAa,IAAIhB,KAAK,CAAC,KAAK,CAAC,IAAIe,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIjB,KAAK,CAAC,KAAK,CAAC,IAAIe,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAGxB,MAAM,CAACI,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMqB,qBAAqB,GAAGzB,MAAM,CAACI,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEoB;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAG3B,MAAM,CAACI,GAAG;AACrD;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height || ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => ($isBig ? ($height ?? 20) : ($height ?? 10) / 5)}px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }>;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAG1D,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAG;AAC3C;AACA,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGL,MAAM,CAACI,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAOD,OAAO,MAAME,gCAAgC,GAAGR,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK,OAAO;EAAEC;AAAO,CAAC,KAAKD,OAAO,KAAKC,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC;AACpE,qBAAqB,CAAC;EAAED,OAAO;EAAEC;AAAO,CAAC,KAAMA,MAAM,GAAID,OAAO,IAAI,EAAE,GAAI,CAACA,OAAO,IAAI,EAAE,IAAI,CAAE;AAC9F,CAAC;AAID,MAAME,SAAS,GAAGT,SAAS;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMU,sBAAsB,GAAGZ,MAAM,CAACI,GAAG,CAACS,KAAK,CAClD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IAAEC,cAAc,EAAE,GAAGF,MAAM,IAAI,CAAC;EAAI;AAC/C,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBH,SAAS,IAAI,CAAC;EAAEM,MAAM,GAAG;AAAE,CAAC,KAAK,GAAGA,MAAM,GAAG;AAC9D;AACA,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGlB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACa,QAAQ;AAChC,CAAC;AASD,OAAO,MAAMC,sBAAsB,GAAGpB,MAAM,CAACI,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEe;AAAoD,CAAC,KACpEA,sBAAsB,GAAGf,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACa,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAElB;AAAM,CAAC,KAC7DgB,mBAAmB,IACnBrB,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBsB,aAAa,IAAIjB,KAAK,CAAC,KAAK,CAAC,IAAIgB,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIlB,KAAK,CAAC,KAAK,CAAC,IAAIgB,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAGzB,MAAM,CAACI,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMsB,qBAAqB,GAAG1B,MAAM,CAACI,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEqB;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAG5B,MAAM,CAACI,GAAG;AACrD;AACA;AACA,CAAC","ignoreList":[]}
package/lib/types/components/progress-bar/ProgressBar.d.ts CHANGED
@@ -41,6 +41,10 @@ export type ProgressBarProps = {
41
41
  * Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.
42
42
  */
43
43
  showShine?: boolean;
44
+ /**
45
+ * The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.
46
+ */
47
+ height?: number;
44
48
  };
45
49
  declare const ProgressBar: FC<ProgressBarProps>;
46
50
  export default ProgressBar;
package/lib/types/components/progress-bar/ProgressBar.styles.d.ts CHANGED
@@ -6,6 +6,7 @@ type StyledProgressBarBackgroundProps = WithTheme<{
6
6
  export declare const StyledProgressBarBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarBackgroundProps>> & string;
7
7
  type StyledProgressBarProgressWrapperProps = WithTheme<{
8
8
  $isBig?: boolean;
9
+ $height?: number;
9
10
  }>;
10
11
  export declare const StyledProgressBarProgressWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarProgressWrapperProps>> & string;
11
12
  type StyledProgressBarProgressProps = WithTheme<{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.26",
3
+ "version": "5.0.28",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -86,5 +86,5 @@
86
86
  "publishConfig": {
87
87
  "access": "public"
88
88
  },
89
- "gitHead": "17847c5f29ec81a09043d75bb8ff4180e7048f91"
89
+ "gitHead": "73767c299ffefdadd9a7aeace40f43fc0181fee7"
90
90
  }