@chayns-components/core 5.0.28 → 5.0.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/popup/Popup.js +10 -4
- package/lib/cjs/components/popup/Popup.js.map +1 -1
- package/lib/cjs/components/progress-bar/ProgressBar.js +229 -116
- package/lib/cjs/components/progress-bar/ProgressBar.js.map +1 -1
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js +6 -1
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/esm/components/popup/Popup.js +10 -4
- package/lib/esm/components/popup/Popup.js.map +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.js +219 -105
- package/lib/esm/components/progress-bar/ProgressBar.js.map +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js +6 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/types/components/popup/Popup.d.ts +4 -0
- package/lib/types/components/progress-bar/ProgressBar.d.ts +1 -0
- package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +6 -3
- package/package.json +2 -2
|
@@ -1,132 +1,246 @@
|
|
|
1
|
+
import { c as _c } from "react-compiler-runtime";
|
|
1
2
|
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
2
3
|
import { useUuid } from '../../hooks/uuid';
|
|
3
4
|
import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper, StyledProgressBarShine, StyledProgressBarStep, StyledProgressBarStepWrapper, StyledProgressBarThumbLabel } from './ProgressBar.styles';
|
|
4
5
|
import { PopupAlignment } from '../../types/popup';
|
|
5
6
|
import { ThemeContext, ThemeProvider } from 'styled-components';
|
|
6
7
|
import Popup from '../popup/Popup';
|
|
7
|
-
const ProgressBar =
|
|
8
|
-
|
|
9
|
-
label,
|
|
10
|
-
shouldHideProgress = false,
|
|
11
|
-
shouldShowLabelInline = false,
|
|
12
|
-
steps,
|
|
13
|
-
colors,
|
|
14
|
-
thumbLabel,
|
|
15
|
-
showShine = false,
|
|
16
|
-
height
|
|
17
|
-
}) => {
|
|
18
|
-
'use memo';
|
|
8
|
+
const ProgressBar = t0 => {
|
|
9
|
+
"use memo";
|
|
19
10
|
|
|
11
|
+
const $ = _c(39);
|
|
12
|
+
const {
|
|
13
|
+
percentage,
|
|
14
|
+
label,
|
|
15
|
+
shouldHideProgress: t1,
|
|
16
|
+
shouldShowLabelInline: t2,
|
|
17
|
+
steps,
|
|
18
|
+
colors,
|
|
19
|
+
thumbLabel,
|
|
20
|
+
showShine: t3,
|
|
21
|
+
height
|
|
22
|
+
} = t0;
|
|
23
|
+
const shouldHideProgress = t1 === undefined ? false : t1;
|
|
24
|
+
const shouldShowLabelInline = t2 === undefined ? false : t2;
|
|
25
|
+
const showShine = t3 === undefined ? false : t3;
|
|
20
26
|
const uuid = useUuid();
|
|
21
27
|
const [coordinates, setCoordinates] = useState();
|
|
22
28
|
const popupRef = useRef(null);
|
|
23
|
-
const
|
|
29
|
+
const [hostContainer, setHostContainer] = useState(null);
|
|
24
30
|
const theme = useContext(ThemeContext);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
31
|
+
let t4;
|
|
32
|
+
bb0: {
|
|
33
|
+
if (!showShine || percentage === undefined) {
|
|
34
|
+
t4 = null;
|
|
35
|
+
break bb0;
|
|
36
|
+
}
|
|
30
37
|
const t = percentage / 100;
|
|
31
|
-
const shineCount = Math.ceil(
|
|
32
|
-
const speed =
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
$
|
|
39
|
-
$
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
38
|
+
const shineCount = Math.ceil(6 * t);
|
|
39
|
+
const speed = 1 + 4 * t;
|
|
40
|
+
let t5;
|
|
41
|
+
if ($[0] !== shineCount) {
|
|
42
|
+
t5 = Array.from({
|
|
43
|
+
length: shineCount
|
|
44
|
+
});
|
|
45
|
+
$[0] = shineCount;
|
|
46
|
+
$[1] = t5;
|
|
47
|
+
} else {
|
|
48
|
+
t5 = $[1];
|
|
49
|
+
}
|
|
50
|
+
let t6;
|
|
51
|
+
if ($[2] !== shineCount || $[3] !== speed || $[4] !== t5) {
|
|
52
|
+
t6 = t5.map((_, index) => /*#__PURE__*/React.createElement(StyledProgressBarShine, {
|
|
53
|
+
key: `progress-bar-shine__${shineCount}__${index}`,
|
|
54
|
+
$speed: speed,
|
|
55
|
+
$delay: -(speed / shineCount) * index
|
|
56
|
+
}));
|
|
57
|
+
$[2] = shineCount;
|
|
58
|
+
$[3] = speed;
|
|
59
|
+
$[4] = t5;
|
|
60
|
+
$[5] = t6;
|
|
61
|
+
} else {
|
|
62
|
+
t6 = $[5];
|
|
51
63
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
64
|
+
t4 = t6;
|
|
65
|
+
}
|
|
66
|
+
const shineEffect = t4;
|
|
67
|
+
let t5;
|
|
68
|
+
let t6;
|
|
69
|
+
if ($[6] !== hostContainer || $[7] !== thumbLabel) {
|
|
70
|
+
t5 = () => {
|
|
71
|
+
if (thumbLabel) {
|
|
72
|
+
setCoordinates(hostContainer?.getBoundingClientRect());
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
t6 = [hostContainer, thumbLabel];
|
|
76
|
+
$[6] = hostContainer;
|
|
77
|
+
$[7] = thumbLabel;
|
|
78
|
+
$[8] = t5;
|
|
79
|
+
$[9] = t6;
|
|
80
|
+
} else {
|
|
81
|
+
t5 = $[8];
|
|
82
|
+
t6 = $[9];
|
|
83
|
+
}
|
|
84
|
+
useEffect(t5, t6);
|
|
85
|
+
let t7;
|
|
86
|
+
let t8;
|
|
87
|
+
if ($[10] !== coordinates) {
|
|
88
|
+
t7 = () => {
|
|
89
|
+
if (coordinates) {
|
|
90
|
+
popupRef.current?.show();
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
t8 = [coordinates];
|
|
94
|
+
$[10] = coordinates;
|
|
95
|
+
$[11] = t7;
|
|
96
|
+
$[12] = t8;
|
|
97
|
+
} else {
|
|
98
|
+
t7 = $[11];
|
|
99
|
+
t8 = $[12];
|
|
100
|
+
}
|
|
101
|
+
useEffect(t7, t8);
|
|
102
|
+
let t9;
|
|
103
|
+
if ($[13] !== colors?.backgroundColor || $[14] !== colors?.primaryTextColor || $[15] !== colors?.progressColor || $[16] !== colors?.secondaryTextColor || $[17] !== colors?.stepColor || $[18] !== colors?.thumbLabelColor || $[19] !== height || $[20] !== hostContainer || $[21] !== label || $[22] !== percentage || $[23] !== shineEffect || $[24] !== shouldHideProgress || $[25] !== shouldShowLabelInline || $[26] !== showShine || $[27] !== steps || $[28] !== theme || $[29] !== thumbLabel || $[30] !== uuid) {
|
|
104
|
+
colors?.backgroundColor;
|
|
105
|
+
colors?.primaryTextColor;
|
|
106
|
+
colors?.progressColor;
|
|
107
|
+
colors?.secondaryTextColor;
|
|
108
|
+
colors?.stepColor;
|
|
109
|
+
colors?.thumbLabelColor;
|
|
110
|
+
t9 = (() => {
|
|
111
|
+
if (shouldHideProgress) {
|
|
112
|
+
return null;
|
|
113
|
+
}
|
|
114
|
+
if (percentage === undefined) {
|
|
115
|
+
return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
|
|
116
|
+
key: `progress-bar-loop__${uuid}`,
|
|
117
|
+
$color: colors?.progressColor,
|
|
118
|
+
initial: {
|
|
119
|
+
width: "200px",
|
|
120
|
+
left: "-200px"
|
|
121
|
+
},
|
|
122
|
+
animate: {
|
|
123
|
+
width: "200px",
|
|
124
|
+
left: "100%"
|
|
125
|
+
},
|
|
126
|
+
exit: {
|
|
127
|
+
width: "200px",
|
|
128
|
+
left: "100%"
|
|
129
|
+
},
|
|
130
|
+
transition: {
|
|
131
|
+
type: "tween",
|
|
132
|
+
repeat: Infinity,
|
|
133
|
+
repeatDelay: 0,
|
|
134
|
+
duration: 1
|
|
135
|
+
}
|
|
136
|
+
}), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
|
|
137
|
+
$color: colors?.backgroundColor
|
|
138
|
+
}));
|
|
139
|
+
}
|
|
140
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
141
|
+
ref: instance => setHostContainer(instance),
|
|
142
|
+
style: {
|
|
143
|
+
border: 0
|
|
144
|
+
}
|
|
145
|
+
}, /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, {
|
|
146
|
+
$isBig: shouldShowLabelInline,
|
|
147
|
+
$height: height
|
|
148
|
+
}, !!steps?.length && /*#__PURE__*/React.createElement(StyledProgressBarStepWrapper, null, steps.map(step => /*#__PURE__*/React.createElement(StyledProgressBarStep, {
|
|
149
|
+
$position: step,
|
|
150
|
+
key: `progress-step-${step}`,
|
|
151
|
+
$color: colors?.stepColor
|
|
152
|
+
}))), /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
|
|
153
|
+
$height: height,
|
|
55
154
|
$color: colors?.progressColor,
|
|
155
|
+
key: `progress-bar__${uuid}`,
|
|
56
156
|
initial: {
|
|
57
|
-
width:
|
|
58
|
-
left: '-200px'
|
|
157
|
+
width: "0%"
|
|
59
158
|
},
|
|
60
159
|
animate: {
|
|
61
|
-
width:
|
|
62
|
-
left: '100%'
|
|
160
|
+
width: `${percentage}%`
|
|
63
161
|
},
|
|
64
162
|
exit: {
|
|
65
|
-
width:
|
|
66
|
-
left: '100%'
|
|
163
|
+
width: "0%"
|
|
67
164
|
},
|
|
68
165
|
transition: {
|
|
69
|
-
type:
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
166
|
+
type: "tween"
|
|
167
|
+
},
|
|
168
|
+
onUpdate: () => popupRef.current?.show(),
|
|
169
|
+
onAnimationComplete: () => popupRef.current?.show()
|
|
170
|
+
}, showShine && shineEffect, thumbLabel && /*#__PURE__*/React.createElement(StyledProgressBarThumbLabel, {
|
|
171
|
+
onClick: _temp
|
|
172
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
173
|
+
theme: {
|
|
174
|
+
"000": colors?.thumbLabelColor ?? theme?.["104"],
|
|
175
|
+
text: colors?.secondaryTextColor ?? theme?.["300"]
|
|
73
176
|
}
|
|
74
|
-
}
|
|
177
|
+
}, /*#__PURE__*/React.createElement(Popup, {
|
|
178
|
+
ref: popupRef,
|
|
179
|
+
content: thumbLabel,
|
|
180
|
+
alignment: PopupAlignment.TopCenter,
|
|
181
|
+
onHide: () => popupRef.current?.show(),
|
|
182
|
+
container: hostContainer ?? undefined,
|
|
183
|
+
shouldUseChildrenWidth: true,
|
|
184
|
+
shouldBeOpen: true
|
|
185
|
+
})))), shouldShowLabelInline && label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
|
|
186
|
+
$shouldShowLabelInline: shouldShowLabelInline,
|
|
187
|
+
$primaryColor: colors?.primaryTextColor,
|
|
188
|
+
$secondaryColor: colors?.secondaryTextColor,
|
|
189
|
+
$colorSplitPosition: percentage
|
|
190
|
+
}, label), /*#__PURE__*/React.createElement(StyledProgressBarBackground, {
|
|
75
191
|
$color: colors?.backgroundColor
|
|
76
|
-
}));
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
},
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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]);
|
|
192
|
+
})));
|
|
193
|
+
})();
|
|
194
|
+
$[13] = colors?.backgroundColor;
|
|
195
|
+
$[14] = colors?.primaryTextColor;
|
|
196
|
+
$[15] = colors?.progressColor;
|
|
197
|
+
$[16] = colors?.secondaryTextColor;
|
|
198
|
+
$[17] = colors?.stepColor;
|
|
199
|
+
$[18] = colors?.thumbLabelColor;
|
|
200
|
+
$[19] = height;
|
|
201
|
+
$[20] = hostContainer;
|
|
202
|
+
$[21] = label;
|
|
203
|
+
$[22] = percentage;
|
|
204
|
+
$[23] = shineEffect;
|
|
205
|
+
$[24] = shouldHideProgress;
|
|
206
|
+
$[25] = shouldShowLabelInline;
|
|
207
|
+
$[26] = showShine;
|
|
208
|
+
$[27] = steps;
|
|
209
|
+
$[28] = theme;
|
|
210
|
+
$[29] = thumbLabel;
|
|
211
|
+
$[30] = uuid;
|
|
212
|
+
$[31] = t9;
|
|
213
|
+
} else {
|
|
214
|
+
t9 = $[31];
|
|
215
|
+
}
|
|
216
|
+
const progressBar = t9;
|
|
217
|
+
colors?.primaryTextColor;
|
|
218
|
+
let t10;
|
|
219
|
+
if ($[32] !== colors?.primaryTextColor || $[33] !== label || $[34] !== shouldShowLabelInline) {
|
|
220
|
+
t10 = label && !shouldShowLabelInline && /*#__PURE__*/React.createElement(StyledProgressBarLabel, {
|
|
221
|
+
$primaryColor: colors?.primaryTextColor
|
|
222
|
+
}, label);
|
|
223
|
+
$[32] = colors?.primaryTextColor;
|
|
224
|
+
$[33] = label;
|
|
225
|
+
$[34] = shouldShowLabelInline;
|
|
226
|
+
$[35] = t10;
|
|
227
|
+
} else {
|
|
228
|
+
t10 = $[35];
|
|
229
|
+
}
|
|
230
|
+
let t11;
|
|
231
|
+
if ($[36] !== progressBar || $[37] !== t10) {
|
|
232
|
+
t11 = /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, t10);
|
|
233
|
+
$[36] = progressBar;
|
|
234
|
+
$[37] = t10;
|
|
235
|
+
$[38] = t11;
|
|
236
|
+
} else {
|
|
237
|
+
t11 = $[38];
|
|
238
|
+
}
|
|
239
|
+
return t11;
|
|
129
240
|
};
|
|
130
241
|
ProgressBar.displayName = 'ProgressBar';
|
|
131
242
|
export default ProgressBar;
|
|
243
|
+
function _temp(event) {
|
|
244
|
+
return event.stopPropagation();
|
|
245
|
+
}
|
|
132
246
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
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":[]}
|
|
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","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","coordinates","setCoordinates","popupRef","hostContainer","setHostContainer","theme","t4","bb0","t","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","getBoundingClientRect","t7","t8","current","show","t9","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","thumbLabelColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","ref","instance","style","border","step","onUpdate","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","container","shouldUseChildrenWidth","shouldBeOpen","$primaryColor","$secondaryColor","progressBar","t10","t11","displayName","event","stopPropagation"],"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 thumbLabelColor?: 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 [hostContainer, setHostContainer] = useState<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(hostContainer?.getBoundingClientRect());\n }, [hostContainer, 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={(instance) => setHostContainer(instance)} style={{ border: 0 }}>\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 $height={height}\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?.thumbLabelColor ?? 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={hostContainer ?? undefined}\n shouldUseChildrenWidth\n shouldBeOpen\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 colors?.thumbLabelColor,\n height,\n hostContainer,\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":[]}
|
|
@@ -22,7 +22,7 @@ export const StyledProgressBarProgressWrapper = styled.div`
|
|
|
22
22
|
border-radius: ${({
|
|
23
23
|
$height,
|
|
24
24
|
$isBig
|
|
25
|
-
}) => $
|
|
25
|
+
}) => $height || ($isBig ? 20 : 10)}px;
|
|
26
26
|
`;
|
|
27
27
|
const shineMove = keyframes`
|
|
28
28
|
from {
|
|
@@ -68,6 +68,10 @@ export const StyledMotionProgressBarProgress = styled(motion.div)`
|
|
|
68
68
|
theme,
|
|
69
69
|
$color
|
|
70
70
|
}) => $color ?? theme.headline};
|
|
71
|
+
border-radius: ${({
|
|
72
|
+
$height,
|
|
73
|
+
$isBig
|
|
74
|
+
}) => $height || ($isBig ? 20 : 10)}px;
|
|
71
75
|
`;
|
|
72
76
|
export const StyledProgressBarLabel = styled.div`
|
|
73
77
|
font-size: 85%;
|
|
@@ -126,5 +130,6 @@ export const StyledProgressBarStep = styled.div`
|
|
|
126
130
|
export const StyledProgressBarThumbLabel = styled.div`
|
|
127
131
|
position: absolute;
|
|
128
132
|
right: 0;
|
|
133
|
+
height: 100%;
|
|
129
134
|
`;
|
|
130
135
|
//# sourceMappingURL=ProgressBar.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
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 }) =>
|
|
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 }) => $height || ($isBig ? 20 : 10)}px;\n`;\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\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }> & {\n $height?: number;\n $isBig?: boolean;\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 border-radius: ${({ $height, $isBig }) => $height || ($isBig ? 20 : 10)}px;\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 height: 100%;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -49,6 +49,10 @@ export type PopupProps = {
|
|
|
49
49
|
* The Y offset of the popup to the children.
|
|
50
50
|
*/
|
|
51
51
|
yOffset?: number;
|
|
52
|
+
/**
|
|
53
|
+
* Whether the popup should be open. This can be used to control the popup from outside.
|
|
54
|
+
*/
|
|
55
|
+
shouldBeOpen?: boolean;
|
|
52
56
|
};
|
|
53
57
|
declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<PopupRef>>;
|
|
54
58
|
export default Popup;
|
|
@@ -9,15 +9,18 @@ type StyledProgressBarProgressWrapperProps = WithTheme<{
|
|
|
9
9
|
$height?: number;
|
|
10
10
|
}>;
|
|
11
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;
|
|
12
|
-
type StyledProgressBarProgressProps = WithTheme<{
|
|
13
|
-
$color?: string;
|
|
14
|
-
}>;
|
|
15
12
|
export declare const StyledProgressBarShine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
16
13
|
ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
|
|
17
14
|
}>, {
|
|
18
15
|
$speed?: number;
|
|
19
16
|
$delay?: number;
|
|
20
17
|
}>, never>> & string;
|
|
18
|
+
type StyledProgressBarProgressProps = WithTheme<{
|
|
19
|
+
$color?: string;
|
|
20
|
+
}> & {
|
|
21
|
+
$height?: number;
|
|
22
|
+
$isBig?: boolean;
|
|
23
|
+
};
|
|
21
24
|
export declare const StyledMotionProgressBarProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
22
25
|
ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
|
|
23
26
|
}, StyledProgressBarProgressProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.30",
|
|
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": "
|
|
89
|
+
"gitHead": "967a4778c7076a348d77e11df30e20888169ce22"
|
|
90
90
|
}
|