@fuf-stack/pixels 0.41.3 → 0.41.5
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/dist/Progress/index.cjs +2 -2
- package/dist/Progress/index.js +1 -1
- package/dist/ProgressCircular/index.cjs +2 -2
- package/dist/ProgressCircular/index.d.cts +2 -2
- package/dist/ProgressCircular/index.d.ts +2 -2
- package/dist/ProgressCircular/index.js +1 -1
- package/dist/{ProgressCircular-U4kPZ1T1.d.cts → ProgressCircular-DdDYbP2p.d.cts} +35 -0
- package/dist/{ProgressCircular-U4kPZ1T1.d.ts → ProgressCircular-DdDYbP2p.d.ts} +35 -0
- package/dist/{chunk-ESDUZ6J3.cjs → chunk-F2KT5QJ4.cjs} +30 -8
- package/dist/chunk-F2KT5QJ4.cjs.map +1 -0
- package/dist/{chunk-JB6PTM4V.js → chunk-NF7YMLX7.js} +30 -8
- package/dist/chunk-NF7YMLX7.js.map +1 -0
- package/dist/{chunk-EFE7F3MZ.js → chunk-OGK2OQXX.js} +2 -2
- package/dist/{chunk-EFE7F3MZ.js.map → chunk-OGK2OQXX.js.map} +1 -1
- package/dist/{chunk-QKTRIE4R.cjs → chunk-PK723NKO.cjs} +2 -2
- package/dist/{chunk-QKTRIE4R.cjs.map → chunk-PK723NKO.cjs.map} +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/package.json +3 -3
- package/dist/chunk-ESDUZ6J3.cjs.map +0 -1
- package/dist/chunk-JB6PTM4V.js.map +0 -1
package/dist/Progress/index.cjs
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _chunkPK723NKOcjs = require('../chunk-PK723NKO.cjs');
|
|
6
6
|
require('../chunk-OLI32URU.cjs');
|
|
7
7
|
require('../chunk-D4TLDLEX.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
exports.Progress =
|
|
12
|
+
exports.Progress = _chunkPK723NKOcjs.Progress_default; exports.default = _chunkPK723NKOcjs.Progress_default2; exports.progressVariants = _chunkPK723NKOcjs.progressVariants;
|
|
13
13
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Progress/index.js
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _chunkF2KT5QJ4cjs = require('../chunk-F2KT5QJ4.cjs');
|
|
6
6
|
require('../chunk-OLI32URU.cjs');
|
|
7
7
|
require('../chunk-D4TLDLEX.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
exports.ProgressCircular =
|
|
12
|
+
exports.ProgressCircular = _chunkF2KT5QJ4cjs.ProgressCircular_default; exports.default = _chunkF2KT5QJ4cjs.ProgressCircular_default2; exports.progressCircularVariants = _chunkF2KT5QJ4cjs.progressCircularVariants;
|
|
13
13
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { P as ProgressCircular } from '../ProgressCircular-
|
|
2
|
-
export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-
|
|
1
|
+
import { P as ProgressCircular } from '../ProgressCircular-DdDYbP2p.cjs';
|
|
2
|
+
export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-DdDYbP2p.cjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants';
|
|
5
5
|
import 'tailwind-variants/dist/config.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { P as ProgressCircular } from '../ProgressCircular-
|
|
2
|
-
export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-
|
|
1
|
+
import { P as ProgressCircular } from '../ProgressCircular-DdDYbP2p.js';
|
|
2
|
+
export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-DdDYbP2p.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants';
|
|
5
5
|
import 'tailwind-variants/dist/config.js';
|
|
@@ -33,6 +33,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
33
33
|
svg: string;
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
|
+
isFinished: {
|
|
37
|
+
true: {
|
|
38
|
+
svg: string;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
36
41
|
size: {
|
|
37
42
|
xs: {
|
|
38
43
|
svg: string;
|
|
@@ -92,6 +97,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
92
97
|
svg: string;
|
|
93
98
|
};
|
|
94
99
|
};
|
|
100
|
+
isFinished: {
|
|
101
|
+
true: {
|
|
102
|
+
svg: string;
|
|
103
|
+
};
|
|
104
|
+
};
|
|
95
105
|
size: {
|
|
96
106
|
xs: {
|
|
97
107
|
svg: string;
|
|
@@ -143,6 +153,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
143
153
|
svg: string;
|
|
144
154
|
};
|
|
145
155
|
};
|
|
156
|
+
isFinished: {
|
|
157
|
+
true: {
|
|
158
|
+
svg: string;
|
|
159
|
+
};
|
|
160
|
+
};
|
|
146
161
|
size: {
|
|
147
162
|
xs: {
|
|
148
163
|
svg: string;
|
|
@@ -194,6 +209,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
194
209
|
svg: string;
|
|
195
210
|
};
|
|
196
211
|
};
|
|
212
|
+
isFinished: {
|
|
213
|
+
true: {
|
|
214
|
+
svg: string;
|
|
215
|
+
};
|
|
216
|
+
};
|
|
197
217
|
size: {
|
|
198
218
|
xs: {
|
|
199
219
|
svg: string;
|
|
@@ -253,6 +273,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
253
273
|
svg: string;
|
|
254
274
|
};
|
|
255
275
|
};
|
|
276
|
+
isFinished: {
|
|
277
|
+
true: {
|
|
278
|
+
svg: string;
|
|
279
|
+
};
|
|
280
|
+
};
|
|
256
281
|
size: {
|
|
257
282
|
xs: {
|
|
258
283
|
svg: string;
|
|
@@ -312,6 +337,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
312
337
|
svg: string;
|
|
313
338
|
};
|
|
314
339
|
};
|
|
340
|
+
isFinished: {
|
|
341
|
+
true: {
|
|
342
|
+
svg: string;
|
|
343
|
+
};
|
|
344
|
+
};
|
|
315
345
|
size: {
|
|
316
346
|
xs: {
|
|
317
347
|
svg: string;
|
|
@@ -363,6 +393,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
363
393
|
svg: string;
|
|
364
394
|
};
|
|
365
395
|
};
|
|
396
|
+
isFinished: {
|
|
397
|
+
true: {
|
|
398
|
+
svg: string;
|
|
399
|
+
};
|
|
400
|
+
};
|
|
366
401
|
size: {
|
|
367
402
|
xs: {
|
|
368
403
|
svg: string;
|
|
@@ -33,6 +33,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
33
33
|
svg: string;
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
|
+
isFinished: {
|
|
37
|
+
true: {
|
|
38
|
+
svg: string;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
36
41
|
size: {
|
|
37
42
|
xs: {
|
|
38
43
|
svg: string;
|
|
@@ -92,6 +97,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
92
97
|
svg: string;
|
|
93
98
|
};
|
|
94
99
|
};
|
|
100
|
+
isFinished: {
|
|
101
|
+
true: {
|
|
102
|
+
svg: string;
|
|
103
|
+
};
|
|
104
|
+
};
|
|
95
105
|
size: {
|
|
96
106
|
xs: {
|
|
97
107
|
svg: string;
|
|
@@ -143,6 +153,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
143
153
|
svg: string;
|
|
144
154
|
};
|
|
145
155
|
};
|
|
156
|
+
isFinished: {
|
|
157
|
+
true: {
|
|
158
|
+
svg: string;
|
|
159
|
+
};
|
|
160
|
+
};
|
|
146
161
|
size: {
|
|
147
162
|
xs: {
|
|
148
163
|
svg: string;
|
|
@@ -194,6 +209,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
194
209
|
svg: string;
|
|
195
210
|
};
|
|
196
211
|
};
|
|
212
|
+
isFinished: {
|
|
213
|
+
true: {
|
|
214
|
+
svg: string;
|
|
215
|
+
};
|
|
216
|
+
};
|
|
197
217
|
size: {
|
|
198
218
|
xs: {
|
|
199
219
|
svg: string;
|
|
@@ -253,6 +273,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
253
273
|
svg: string;
|
|
254
274
|
};
|
|
255
275
|
};
|
|
276
|
+
isFinished: {
|
|
277
|
+
true: {
|
|
278
|
+
svg: string;
|
|
279
|
+
};
|
|
280
|
+
};
|
|
256
281
|
size: {
|
|
257
282
|
xs: {
|
|
258
283
|
svg: string;
|
|
@@ -312,6 +337,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
312
337
|
svg: string;
|
|
313
338
|
};
|
|
314
339
|
};
|
|
340
|
+
isFinished: {
|
|
341
|
+
true: {
|
|
342
|
+
svg: string;
|
|
343
|
+
};
|
|
344
|
+
};
|
|
315
345
|
size: {
|
|
316
346
|
xs: {
|
|
317
347
|
svg: string;
|
|
@@ -363,6 +393,11 @@ declare const progressCircularVariants: tailwind_variants.TVReturnType<{
|
|
|
363
393
|
svg: string;
|
|
364
394
|
};
|
|
365
395
|
};
|
|
396
|
+
isFinished: {
|
|
397
|
+
true: {
|
|
398
|
+
svg: string;
|
|
399
|
+
};
|
|
400
|
+
};
|
|
366
401
|
size: {
|
|
367
402
|
xs: {
|
|
368
403
|
svg: string;
|
|
@@ -24,7 +24,7 @@ var progressCircularVariants = _pixelutils.tv.call(void 0, {
|
|
|
24
24
|
// wrapper around progress svg and value span
|
|
25
25
|
svgWrapper: "",
|
|
26
26
|
// track of the circle (not finished part)
|
|
27
|
-
track: "stroke-default-
|
|
27
|
+
track: "stroke-default-300",
|
|
28
28
|
// outer span next to the svg
|
|
29
29
|
value: ""
|
|
30
30
|
},
|
|
@@ -39,14 +39,19 @@ var progressCircularVariants = _pixelutils.tv.call(void 0, {
|
|
|
39
39
|
svg: "text-danger"
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
|
+
isFinished: {
|
|
43
|
+
true: {
|
|
44
|
+
svg: "text-success"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
42
47
|
size: {
|
|
43
48
|
xs: {
|
|
44
49
|
svg: "h-10 w-10",
|
|
45
|
-
value: "text-
|
|
50
|
+
value: "text-[0.6rem]"
|
|
46
51
|
},
|
|
47
52
|
sm: {
|
|
48
53
|
svg: "h-12 w-12",
|
|
49
|
-
value: "text-
|
|
54
|
+
value: "text-xs"
|
|
50
55
|
},
|
|
51
56
|
md: {
|
|
52
57
|
svg: "h-16 w-16",
|
|
@@ -75,14 +80,31 @@ var ProgressCircular = ({
|
|
|
75
80
|
color = "info"
|
|
76
81
|
}) => {
|
|
77
82
|
const isInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle.call(void 0, );
|
|
78
|
-
const
|
|
83
|
+
const isFinished = !hasError && percent >= 100;
|
|
84
|
+
const variants = progressCircularVariants({
|
|
85
|
+
color,
|
|
86
|
+
hasError,
|
|
87
|
+
isFinished,
|
|
88
|
+
size
|
|
89
|
+
});
|
|
79
90
|
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
|
|
80
91
|
let value = format(percent);
|
|
92
|
+
let strokeWidth = 1.6;
|
|
93
|
+
switch (size) {
|
|
94
|
+
case "xs":
|
|
95
|
+
strokeWidth = 2.2;
|
|
96
|
+
break;
|
|
97
|
+
case "sm":
|
|
98
|
+
strokeWidth = 2;
|
|
99
|
+
break;
|
|
100
|
+
default:
|
|
101
|
+
break;
|
|
102
|
+
}
|
|
81
103
|
let progressColor = color;
|
|
82
104
|
if (hasError) {
|
|
83
105
|
progressColor = "danger";
|
|
84
106
|
value = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, { className: "text-danger" });
|
|
85
|
-
} else if (
|
|
107
|
+
} else if (isFinished) {
|
|
86
108
|
progressColor = "success";
|
|
87
109
|
value = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaCheck, { className: "text-success" });
|
|
88
110
|
}
|
|
@@ -95,9 +117,9 @@ var ProgressCircular = ({
|
|
|
95
117
|
"aria-label": ariaLabel,
|
|
96
118
|
classNames,
|
|
97
119
|
color: heroUiColor,
|
|
98
|
-
disableAnimation: isInitialRenderCycle
|
|
120
|
+
disableAnimation: isInitialRenderCycle || disableAnimation,
|
|
99
121
|
showValueLabel: true,
|
|
100
|
-
strokeWidth
|
|
122
|
+
strokeWidth,
|
|
101
123
|
value: percent || 0,
|
|
102
124
|
valueLabel: value
|
|
103
125
|
}
|
|
@@ -113,4 +135,4 @@ var ProgressCircular_default2 = ProgressCircular_default;
|
|
|
113
135
|
|
|
114
136
|
|
|
115
137
|
exports.progressCircularVariants = progressCircularVariants; exports.ProgressCircular_default = ProgressCircular_default; exports.ProgressCircular_default2 = ProgressCircular_default2;
|
|
116
|
-
//# sourceMappingURL=chunk-
|
|
138
|
+
//# sourceMappingURL=chunk-F2KT5QJ4.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-F2KT5QJ4.cjs","../src/ProgressCircular/ProgressCircular.tsx","../src/ProgressCircular/index.ts"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACHA,oCAAiC;AAEjC,4CAAyD;AACzD,sCAAiE;AAEjE,oDAAyC;AAsI7B,+CAAA;AAlIL,IAAM,yBAAA,EAA2B,4BAAA;AAAG,EACzC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,SAAA,EAAW,EAAA;AAAA;AAAA,IAEX,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,GAAA,EAAK,EAAA;AAAA;AAAA,IAEL,UAAA,EAAY,EAAA;AAAA;AAAA,IAEZ,KAAA,EAAO,oBAAA;AAAA;AAAA,IAEP,KAAA,EAAO;AAAA,EACT,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,8CAAA;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IAAA,CAAA,EAEG,uBAAA,CAA6B,QAAA,CAAS,KAAA,CAAA;AAAA,IAE3C,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AAyBD,IAAM,cAAA,EAAgB,CAAC,QAAA,EAAU,CAAA,EAAA,GAAM,CAAA,EAAA;AAKb;AACZ,EAAA;AACA,EAAA;AACH,EAAA;AACE,EAAA;AACX,EAAA;AACmB,EAAA;AACZ,EAAA;AACC,EAAA;AACmB;AAEE,EAAA;AAEG,EAAA;AACf,EAAA;AACf,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACD,EAAA;AACkB,EAAA;AAGO,EAAA;AAGR,EAAA;AACJ,EAAA;AACP,IAAA;AACW,MAAA;AACd,MAAA;AACG,IAAA;AACW,MAAA;AACd,MAAA;AACF,IAAA;AACE,MAAA;AACJ,EAAA;AAG2C,EAAA;AAC7B,EAAA;AACI,IAAA;AACP,IAAA;AACY,EAAA;AACL,IAAA;AACP,IAAA;AACX,EAAA;AAG2B,EAAA;AACI,IAAA;AAG3B,EAAA;AAGF,EAAA;AAAC,IAAA;AAAA,IAAA;AACa,MAAA;AACZ,MAAA;AACO,MAAA;AACW,MAAA;AACJ,MAAA;AACd,MAAA;AAEkB,MAAA;AACN,MAAA;AAAA,IAAA;AACd,EAAA;AAEJ;AAEe;AD3CuB;AACA;AE3HvB;AF6HuB;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-F2KT5QJ4.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { CircularProgressProps as HeroCircularProgressProps } from '@heroui/progress';\nimport type { ReactNode } from 'react';\n\nimport { FaCheck, FaTimes } from 'react-icons/fa';\n\nimport { CircularProgress as HeroCircularProgress } from '@heroui/progress';\nimport { circularProgress as heroCircularProgressVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\nexport const progressCircularVariants = tv({\n slots: {\n // wrapper around the whole component\n base: '',\n // indicator of the circle (finished part)\n indicator: '',\n // label next to the svgWrapper\n label: '',\n // wrapper for the circle\n svg: '',\n // wrapper around progress svg and value span\n svgWrapper: '',\n // track of the circle (not finished part)\n track: 'stroke-default-300',\n // outer span next to the svg\n value: '',\n },\n variants: {\n color: {\n info: {\n svg: 'text-info',\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n ...heroCircularProgressVariants.variants.color,\n },\n hasError: {\n true: {\n svg: 'text-danger',\n },\n },\n isFinished: {\n true: {\n svg: 'text-success',\n },\n },\n size: {\n xs: {\n svg: 'h-10 w-10',\n value: 'text-[0.6rem]',\n },\n sm: {\n svg: 'h-12 w-12',\n value: 'text-xs',\n },\n md: {\n svg: 'h-16 w-16',\n value: 'text-md',\n },\n lg: {\n svg: 'h-20 w-20',\n value: 'text-lg',\n },\n xl: {\n svg: 'h-24 w-24',\n value: 'text-xl',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof progressCircularVariants>;\ntype ClassName = TVClassName<typeof progressCircularVariants>;\n\nexport interface ProgressCircularProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** color options */\n color?: VariantProps['color'];\n /** disables all animations */\n disableAnimation?: boolean;\n /** formats the display value of the progress in the center */\n format?: (percent?: number) => ReactNode;\n /** enables error version */\n hasError?: boolean;\n /** percentage / progress of the circular progress bar */\n percent: number;\n /** size options */\n size?: VariantProps['size'];\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => `${percent}%`;\n\n/**\n * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)\n */\nconst ProgressCircular = ({\n ariaLabel = 'progress',\n className = undefined,\n format = defaultFormat,\n hasError = false,\n percent,\n disableAnimation = false,\n size = 'md',\n color = 'info',\n}: ProgressCircularProps) => {\n // used to disable animation on initial render cycle\n const isInitialRenderCycle = useIsInitialRenderCycle();\n\n const isFinished = !hasError && percent >= 100;\n const variants = progressCircularVariants({\n color,\n hasError,\n isFinished,\n size,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // format value\n let value = format(percent);\n\n // set strokeWidth based on size prop\n let strokeWidth = 1.6;\n switch (size) {\n case 'xs':\n strokeWidth = 2.2;\n break;\n case 'sm':\n strokeWidth = 2;\n break;\n default:\n break;\n }\n\n // handle special states\n let progressColor: VariantProps['color'] = color;\n if (hasError) {\n progressColor = 'danger';\n value = <FaTimes className=\"text-danger\" />;\n } else if (isFinished) {\n progressColor = 'success';\n value = <FaCheck className=\"text-success\" />;\n }\n\n // pass only HeroUI colors as props\n const heroUiColor = Object.keys(\n heroCircularProgressVariants.variants.color,\n ).includes(color)\n ? (progressColor as HeroCircularProgressProps['color'])\n : undefined;\n\n return (\n <HeroCircularProgress\n aria-label={ariaLabel}\n classNames={classNames}\n color={heroUiColor}\n disableAnimation={isInitialRenderCycle || disableAnimation}\n showValueLabel\n strokeWidth={strokeWidth}\n // we do not use spinner animation when no percent provided\n value={percent || 0}\n valueLabel={value}\n />\n );\n};\n\nexport default ProgressCircular;\n","import ProgressCircular, { progressCircularVariants } from './ProgressCircular';\n\nexport type { ProgressCircularProps } from './ProgressCircular';\n\nexport { ProgressCircular, progressCircularVariants };\n\nexport default ProgressCircular;\n"]}
|
|
@@ -24,7 +24,7 @@ var progressCircularVariants = tv({
|
|
|
24
24
|
// wrapper around progress svg and value span
|
|
25
25
|
svgWrapper: "",
|
|
26
26
|
// track of the circle (not finished part)
|
|
27
|
-
track: "stroke-default-
|
|
27
|
+
track: "stroke-default-300",
|
|
28
28
|
// outer span next to the svg
|
|
29
29
|
value: ""
|
|
30
30
|
},
|
|
@@ -39,14 +39,19 @@ var progressCircularVariants = tv({
|
|
|
39
39
|
svg: "text-danger"
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
|
+
isFinished: {
|
|
43
|
+
true: {
|
|
44
|
+
svg: "text-success"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
42
47
|
size: {
|
|
43
48
|
xs: {
|
|
44
49
|
svg: "h-10 w-10",
|
|
45
|
-
value: "text-
|
|
50
|
+
value: "text-[0.6rem]"
|
|
46
51
|
},
|
|
47
52
|
sm: {
|
|
48
53
|
svg: "h-12 w-12",
|
|
49
|
-
value: "text-
|
|
54
|
+
value: "text-xs"
|
|
50
55
|
},
|
|
51
56
|
md: {
|
|
52
57
|
svg: "h-16 w-16",
|
|
@@ -75,14 +80,31 @@ var ProgressCircular = ({
|
|
|
75
80
|
color = "info"
|
|
76
81
|
}) => {
|
|
77
82
|
const isInitialRenderCycle = useIsInitialRenderCycle();
|
|
78
|
-
const
|
|
83
|
+
const isFinished = !hasError && percent >= 100;
|
|
84
|
+
const variants = progressCircularVariants({
|
|
85
|
+
color,
|
|
86
|
+
hasError,
|
|
87
|
+
isFinished,
|
|
88
|
+
size
|
|
89
|
+
});
|
|
79
90
|
const classNames = variantsToClassNames(variants, className, "base");
|
|
80
91
|
let value = format(percent);
|
|
92
|
+
let strokeWidth = 1.6;
|
|
93
|
+
switch (size) {
|
|
94
|
+
case "xs":
|
|
95
|
+
strokeWidth = 2.2;
|
|
96
|
+
break;
|
|
97
|
+
case "sm":
|
|
98
|
+
strokeWidth = 2;
|
|
99
|
+
break;
|
|
100
|
+
default:
|
|
101
|
+
break;
|
|
102
|
+
}
|
|
81
103
|
let progressColor = color;
|
|
82
104
|
if (hasError) {
|
|
83
105
|
progressColor = "danger";
|
|
84
106
|
value = /* @__PURE__ */ jsx(FaTimes, { className: "text-danger" });
|
|
85
|
-
} else if (
|
|
107
|
+
} else if (isFinished) {
|
|
86
108
|
progressColor = "success";
|
|
87
109
|
value = /* @__PURE__ */ jsx(FaCheck, { className: "text-success" });
|
|
88
110
|
}
|
|
@@ -95,9 +117,9 @@ var ProgressCircular = ({
|
|
|
95
117
|
"aria-label": ariaLabel,
|
|
96
118
|
classNames,
|
|
97
119
|
color: heroUiColor,
|
|
98
|
-
disableAnimation: isInitialRenderCycle
|
|
120
|
+
disableAnimation: isInitialRenderCycle || disableAnimation,
|
|
99
121
|
showValueLabel: true,
|
|
100
|
-
strokeWidth
|
|
122
|
+
strokeWidth,
|
|
101
123
|
value: percent || 0,
|
|
102
124
|
valueLabel: value
|
|
103
125
|
}
|
|
@@ -113,4 +135,4 @@ export {
|
|
|
113
135
|
ProgressCircular_default,
|
|
114
136
|
ProgressCircular_default2
|
|
115
137
|
};
|
|
116
|
-
//# sourceMappingURL=chunk-
|
|
138
|
+
//# sourceMappingURL=chunk-NF7YMLX7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/ProgressCircular/ProgressCircular.tsx","../src/ProgressCircular/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { CircularProgressProps as HeroCircularProgressProps } from '@heroui/progress';\nimport type { ReactNode } from 'react';\n\nimport { FaCheck, FaTimes } from 'react-icons/fa';\n\nimport { CircularProgress as HeroCircularProgress } from '@heroui/progress';\nimport { circularProgress as heroCircularProgressVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\nexport const progressCircularVariants = tv({\n slots: {\n // wrapper around the whole component\n base: '',\n // indicator of the circle (finished part)\n indicator: '',\n // label next to the svgWrapper\n label: '',\n // wrapper for the circle\n svg: '',\n // wrapper around progress svg and value span\n svgWrapper: '',\n // track of the circle (not finished part)\n track: 'stroke-default-300',\n // outer span next to the svg\n value: '',\n },\n variants: {\n color: {\n info: {\n svg: 'text-info',\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n ...heroCircularProgressVariants.variants.color,\n },\n hasError: {\n true: {\n svg: 'text-danger',\n },\n },\n isFinished: {\n true: {\n svg: 'text-success',\n },\n },\n size: {\n xs: {\n svg: 'h-10 w-10',\n value: 'text-[0.6rem]',\n },\n sm: {\n svg: 'h-12 w-12',\n value: 'text-xs',\n },\n md: {\n svg: 'h-16 w-16',\n value: 'text-md',\n },\n lg: {\n svg: 'h-20 w-20',\n value: 'text-lg',\n },\n xl: {\n svg: 'h-24 w-24',\n value: 'text-xl',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof progressCircularVariants>;\ntype ClassName = TVClassName<typeof progressCircularVariants>;\n\nexport interface ProgressCircularProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** color options */\n color?: VariantProps['color'];\n /** disables all animations */\n disableAnimation?: boolean;\n /** formats the display value of the progress in the center */\n format?: (percent?: number) => ReactNode;\n /** enables error version */\n hasError?: boolean;\n /** percentage / progress of the circular progress bar */\n percent: number;\n /** size options */\n size?: VariantProps['size'];\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => `${percent}%`;\n\n/**\n * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)\n */\nconst ProgressCircular = ({\n ariaLabel = 'progress',\n className = undefined,\n format = defaultFormat,\n hasError = false,\n percent,\n disableAnimation = false,\n size = 'md',\n color = 'info',\n}: ProgressCircularProps) => {\n // used to disable animation on initial render cycle\n const isInitialRenderCycle = useIsInitialRenderCycle();\n\n const isFinished = !hasError && percent >= 100;\n const variants = progressCircularVariants({\n color,\n hasError,\n isFinished,\n size,\n });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // format value\n let value = format(percent);\n\n // set strokeWidth based on size prop\n let strokeWidth = 1.6;\n switch (size) {\n case 'xs':\n strokeWidth = 2.2;\n break;\n case 'sm':\n strokeWidth = 2;\n break;\n default:\n break;\n }\n\n // handle special states\n let progressColor: VariantProps['color'] = color;\n if (hasError) {\n progressColor = 'danger';\n value = <FaTimes className=\"text-danger\" />;\n } else if (isFinished) {\n progressColor = 'success';\n value = <FaCheck className=\"text-success\" />;\n }\n\n // pass only HeroUI colors as props\n const heroUiColor = Object.keys(\n heroCircularProgressVariants.variants.color,\n ).includes(color)\n ? (progressColor as HeroCircularProgressProps['color'])\n : undefined;\n\n return (\n <HeroCircularProgress\n aria-label={ariaLabel}\n classNames={classNames}\n color={heroUiColor}\n disableAnimation={isInitialRenderCycle || disableAnimation}\n showValueLabel\n strokeWidth={strokeWidth}\n // we do not use spinner animation when no percent provided\n value={percent || 0}\n valueLabel={value}\n />\n );\n};\n\nexport default ProgressCircular;\n","import ProgressCircular, { progressCircularVariants } from './ProgressCircular';\n\nexport type { ProgressCircularProps } from './ProgressCircular';\n\nexport { ProgressCircular, progressCircularVariants };\n\nexport default ProgressCircular;\n"],"mappings":";;;;;;;;AAIA,SAAS,SAAS,eAAe;AAEjC,SAAS,oBAAoB,4BAA4B;AACzD,SAAS,oBAAoB,oCAAoC;AAEjE,SAAS,IAAI,4BAA4B;AAsI7B;AAlIL,IAAM,2BAA2B,GAAG;AAAA,EACzC,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA;AAAA,IAEN,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA;AAAA,IAEL,YAAY;AAAA;AAAA,IAEZ,OAAO;AAAA;AAAA,IAEP,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,OAEG,6BAA6B,SAAS;AAAA,IAE3C,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAyBD,IAAM,gBAAgB,CAAC,UAAU,MAAM,GAAG,OAAO;AAKjD,IAAM,mBAAmB,CAAC;AAAA,EACxB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AACV,MAA6B;AAE3B,QAAM,uBAAuB,wBAAwB;AAErD,QAAM,aAAa,CAAC,YAAY,WAAW;AAC3C,QAAM,WAAW,yBAAyB;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAGnE,MAAI,QAAQ,OAAO,OAAO;AAG1B,MAAI,cAAc;AAClB,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,oBAAc;AACd;AAAA,IACF,KAAK;AACH,oBAAc;AACd;AAAA,IACF;AACE;AAAA,EACJ;AAGA,MAAI,gBAAuC;AAC3C,MAAI,UAAU;AACZ,oBAAgB;AAChB,YAAQ,oBAAC,WAAQ,WAAU,eAAc;AAAA,EAC3C,WAAW,YAAY;AACrB,oBAAgB;AAChB,YAAQ,oBAAC,WAAQ,WAAU,gBAAe;AAAA,EAC5C;AAGA,QAAM,cAAc,OAAO;AAAA,IACzB,6BAA6B,SAAS;AAAA,EACxC,EAAE,SAAS,KAAK,IACX,gBACD;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA,OAAO;AAAA,MACP,kBAAkB,wBAAwB;AAAA,MAC1C,gBAAc;AAAA,MACd;AAAA,MAEA,OAAO,WAAW;AAAA,MAClB,YAAY;AAAA;AAAA,EACd;AAEJ;AAEA,IAAO,2BAAQ;;;ACrKf,IAAOA,4BAAQ;","names":["ProgressCircular_default"]}
|
|
@@ -76,7 +76,7 @@ var Progress = ({
|
|
|
76
76
|
"aria-label": ariaLabel,
|
|
77
77
|
classNames,
|
|
78
78
|
"data-testid": testId,
|
|
79
|
-
disableAnimation: isInitialRenderCycle
|
|
79
|
+
disableAnimation: isInitialRenderCycle || disableAnimation,
|
|
80
80
|
isIndeterminate: indeterminate,
|
|
81
81
|
label,
|
|
82
82
|
showValueLabel,
|
|
@@ -96,4 +96,4 @@ export {
|
|
|
96
96
|
Progress_default,
|
|
97
97
|
Progress_default2
|
|
98
98
|
};
|
|
99
|
-
//# sourceMappingURL=chunk-
|
|
99
|
+
//# sourceMappingURL=chunk-OGK2OQXX.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Progress/Progress.tsx","../src/Progress/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Progress as HeroProgress } from '@heroui/progress';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\n// progress styling variants\nexport const progressVariants = tv({\n slots: {\n // wrapper around the whole component\n base: '',\n // indicator of the progress (finished part)\n indicator: '',\n // label at the top left of the progress bar\n label: '',\n // wrapper around progress label and label span\n labelWrapper: '',\n // track of the progress (not finished part)\n track: '',\n // span around the progress value\n value: '',\n },\n variants: {\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n color: {\n danger: {\n indicator: 'bg-danger',\n },\n default: {\n indicator: 'bg-default-400',\n },\n info: {\n indicator: 'bg-info',\n },\n primary: {\n indicator: 'bg-primary',\n },\n secondary: {\n indicator: 'bg-secondary',\n },\n success: {\n indicator: 'bg-success',\n },\n warning: {\n indicator: 'bg-warning',\n },\n },\n },\n});\n\nexport type VariantProps = TVProps<typeof progressVariants>;\ntype ClassName = TVClassName<typeof progressVariants>;\n\nexport interface ProgressProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** color of the progress bar */\n color?: VariantProps['color'];\n /** disables all animations */\n disableAnimation?: boolean;\n /** function to format the progress value */\n format?: (percent: number) => ReactNode;\n /** shows indeterminate progress animation */\n indeterminate?: boolean;\n /** label of the progress bar */\n label?: ReactNode;\n /** percentage / progress of the progress bar */\n percent: number;\n /** whether to show the value label */\n showValueLabel?: boolean;\n /** size of the progress bar */\n size?: 'sm' | 'md' | 'lg';\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => `${percent}%`;\n\n/**\n * Progress component based on [HeroUI Progress](https://www.heroui.com//docs/components/progress)\n */\nconst Progress = ({\n ariaLabel = 'progress',\n className = undefined,\n color = 'info',\n disableAnimation = false,\n format = defaultFormat,\n indeterminate = false,\n label = undefined,\n percent,\n showValueLabel = false,\n size = 'md',\n testId = undefined,\n}: ProgressProps) => {\n // used to disable animation on initial render cycle\n const isInitialRenderCycle = useIsInitialRenderCycle();\n\n // handle special states\n let progressColor: VariantProps['color'] = color;\n if (percent >= 100) {\n progressColor = 'success';\n }\n\n const variants = progressVariants({ color: progressColor });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const value = format(percent);\n\n return (\n <HeroProgress\n aria-label={ariaLabel}\n classNames={classNames}\n data-testid={testId}\n disableAnimation={isInitialRenderCycle
|
|
1
|
+
{"version":3,"sources":["../src/Progress/Progress.tsx","../src/Progress/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Progress as HeroProgress } from '@heroui/progress';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\n// progress styling variants\nexport const progressVariants = tv({\n slots: {\n // wrapper around the whole component\n base: '',\n // indicator of the progress (finished part)\n indicator: '',\n // label at the top left of the progress bar\n label: '',\n // wrapper around progress label and label span\n labelWrapper: '',\n // track of the progress (not finished part)\n track: '',\n // span around the progress value\n value: '',\n },\n variants: {\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n color: {\n danger: {\n indicator: 'bg-danger',\n },\n default: {\n indicator: 'bg-default-400',\n },\n info: {\n indicator: 'bg-info',\n },\n primary: {\n indicator: 'bg-primary',\n },\n secondary: {\n indicator: 'bg-secondary',\n },\n success: {\n indicator: 'bg-success',\n },\n warning: {\n indicator: 'bg-warning',\n },\n },\n },\n});\n\nexport type VariantProps = TVProps<typeof progressVariants>;\ntype ClassName = TVClassName<typeof progressVariants>;\n\nexport interface ProgressProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** color of the progress bar */\n color?: VariantProps['color'];\n /** disables all animations */\n disableAnimation?: boolean;\n /** function to format the progress value */\n format?: (percent: number) => ReactNode;\n /** shows indeterminate progress animation */\n indeterminate?: boolean;\n /** label of the progress bar */\n label?: ReactNode;\n /** percentage / progress of the progress bar */\n percent: number;\n /** whether to show the value label */\n showValueLabel?: boolean;\n /** size of the progress bar */\n size?: 'sm' | 'md' | 'lg';\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => `${percent}%`;\n\n/**\n * Progress component based on [HeroUI Progress](https://www.heroui.com//docs/components/progress)\n */\nconst Progress = ({\n ariaLabel = 'progress',\n className = undefined,\n color = 'info',\n disableAnimation = false,\n format = defaultFormat,\n indeterminate = false,\n label = undefined,\n percent,\n showValueLabel = false,\n size = 'md',\n testId = undefined,\n}: ProgressProps) => {\n // used to disable animation on initial render cycle\n const isInitialRenderCycle = useIsInitialRenderCycle();\n\n // handle special states\n let progressColor: VariantProps['color'] = color;\n if (percent >= 100) {\n progressColor = 'success';\n }\n\n const variants = progressVariants({ color: progressColor });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const value = format(percent);\n\n return (\n <HeroProgress\n aria-label={ariaLabel}\n classNames={classNames}\n data-testid={testId}\n disableAnimation={isInitialRenderCycle || disableAnimation}\n isIndeterminate={indeterminate}\n label={label}\n showValueLabel={showValueLabel}\n size={size}\n value={percent || 0}\n valueLabel={!!percent && value}\n />\n );\n};\n\nexport default Progress;\n","import Progress, { progressVariants } from './Progress';\n\nexport type { ProgressProps } from './Progress';\n\nexport { Progress, progressVariants };\n\nexport default Progress;\n"],"mappings":";;;;;AAGA,SAAS,YAAY,oBAAoB;AAEzC,SAAS,IAAI,4BAA4B;AA8GrC;AAzGG,IAAM,mBAAmB,GAAG;AAAA,EACjC,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA;AAAA,IAEN,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA;AAAA,IAEP,cAAc;AAAA;AAAA,IAEd,OAAO;AAAA;AAAA,IAEP,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA;AAAA,IAER,OAAO;AAAA,MACL,QAAQ;AAAA,QACN,WAAW;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACP,WAAW;AAAA,MACb;AAAA,MACA,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACP,WAAW;AAAA,MACb;AAAA,MACA,WAAW;AAAA,QACT,WAAW;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACP,WAAW;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACP,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF,CAAC;AA+BD,IAAM,gBAAgB,CAAC,UAAU,MAAM,GAAG,OAAO;AAKjD,IAAM,WAAW,CAAC;AAAA,EAChB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR;AAAA,EACA,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,SAAS;AACX,MAAqB;AAEnB,QAAM,uBAAuB,wBAAwB;AAGrD,MAAI,gBAAuC;AAC3C,MAAI,WAAW,KAAK;AAClB,oBAAgB;AAAA,EAClB;AAEA,QAAM,WAAW,iBAAiB,EAAE,OAAO,cAAc,CAAC;AAC1D,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAEnE,QAAM,QAAQ,OAAO,OAAO;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA,eAAa;AAAA,MACb,kBAAkB,wBAAwB;AAAA,MAC1C,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,WAAW;AAAA,MAClB,YAAY,CAAC,CAAC,WAAW;AAAA;AAAA,EAC3B;AAEJ;AAEA,IAAO,mBAAQ;;;AC5Hf,IAAOA,oBAAQ;","names":["Progress_default"]}
|
|
@@ -76,7 +76,7 @@ var Progress = ({
|
|
|
76
76
|
"aria-label": ariaLabel,
|
|
77
77
|
classNames,
|
|
78
78
|
"data-testid": testId,
|
|
79
|
-
disableAnimation: isInitialRenderCycle
|
|
79
|
+
disableAnimation: isInitialRenderCycle || disableAnimation,
|
|
80
80
|
isIndeterminate: indeterminate,
|
|
81
81
|
label,
|
|
82
82
|
showValueLabel,
|
|
@@ -96,4 +96,4 @@ var Progress_default2 = Progress_default;
|
|
|
96
96
|
|
|
97
97
|
|
|
98
98
|
exports.progressVariants = progressVariants; exports.Progress_default = Progress_default; exports.Progress_default2 = Progress_default2;
|
|
99
|
-
//# sourceMappingURL=chunk-
|
|
99
|
+
//# sourceMappingURL=chunk-PK723NKO.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-PK723NKO.cjs","../src/Progress/Progress.tsx","../src/Progress/index.ts"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACDA,4CAAyC;AAEzC,oDAAyC;AA8GrC,+CAAA;AAzGG,IAAM,iBAAA,EAAmB,4BAAA;AAAG,EACjC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,SAAA,EAAW,EAAA;AAAA;AAAA,IAEX,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,YAAA,EAAc,EAAA;AAAA;AAAA,IAEd,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,KAAA,EAAO;AAAA,EACT,CAAA;AAAA,EACA,QAAA,EAAU;AAAA;AAAA,IAER,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ;AAAA,QACN,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,SAAA,EAAW;AAAA,QACT,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AA+BD,IAAM,cAAA,EAAgB,CAAC,QAAA,EAAU,CAAA,EAAA,GAAM,CAAA,EAAA;AAKrB;AACJ,EAAA;AACA,EAAA;AACJ,EAAA;AACW,EAAA;AACV,EAAA;AACO,EAAA;AACR,EAAA;AACR,EAAA;AACiB,EAAA;AACV,EAAA;AACE,EAAA;AACU;AAEU,EAAA;AAGc,EAAA;AACvB,EAAA;AACF,IAAA;AAClB,EAAA;AAEoC,EAAA;AACjB,EAAA;AAES,EAAA;AAG1B,EAAA;AAAC,IAAA;AAAA,IAAA;AACa,MAAA;AACZ,MAAA;AACa,MAAA;AACK,MAAA;AACD,MAAA;AACjB,MAAA;AACA,MAAA;AACA,MAAA;AACkB,MAAA;AACO,MAAA;AAAA,IAAA;AAC3B,EAAA;AAEJ;AAEe;ADzCuB;AACA;AEpFvB;AFsFuB;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-PK723NKO.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Progress as HeroProgress } from '@heroui/progress';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\n// progress styling variants\nexport const progressVariants = tv({\n slots: {\n // wrapper around the whole component\n base: '',\n // indicator of the progress (finished part)\n indicator: '',\n // label at the top left of the progress bar\n label: '',\n // wrapper around progress label and label span\n labelWrapper: '',\n // track of the progress (not finished part)\n track: '',\n // span around the progress value\n value: '',\n },\n variants: {\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n color: {\n danger: {\n indicator: 'bg-danger',\n },\n default: {\n indicator: 'bg-default-400',\n },\n info: {\n indicator: 'bg-info',\n },\n primary: {\n indicator: 'bg-primary',\n },\n secondary: {\n indicator: 'bg-secondary',\n },\n success: {\n indicator: 'bg-success',\n },\n warning: {\n indicator: 'bg-warning',\n },\n },\n },\n});\n\nexport type VariantProps = TVProps<typeof progressVariants>;\ntype ClassName = TVClassName<typeof progressVariants>;\n\nexport interface ProgressProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** color of the progress bar */\n color?: VariantProps['color'];\n /** disables all animations */\n disableAnimation?: boolean;\n /** function to format the progress value */\n format?: (percent: number) => ReactNode;\n /** shows indeterminate progress animation */\n indeterminate?: boolean;\n /** label of the progress bar */\n label?: ReactNode;\n /** percentage / progress of the progress bar */\n percent: number;\n /** whether to show the value label */\n showValueLabel?: boolean;\n /** size of the progress bar */\n size?: 'sm' | 'md' | 'lg';\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => `${percent}%`;\n\n/**\n * Progress component based on [HeroUI Progress](https://www.heroui.com//docs/components/progress)\n */\nconst Progress = ({\n ariaLabel = 'progress',\n className = undefined,\n color = 'info',\n disableAnimation = false,\n format = defaultFormat,\n indeterminate = false,\n label = undefined,\n percent,\n showValueLabel = false,\n size = 'md',\n testId = undefined,\n}: ProgressProps) => {\n // used to disable animation on initial render cycle\n const isInitialRenderCycle = useIsInitialRenderCycle();\n\n // handle special states\n let progressColor: VariantProps['color'] = color;\n if (percent >= 100) {\n progressColor = 'success';\n }\n\n const variants = progressVariants({ color: progressColor });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const value = format(percent);\n\n return (\n <HeroProgress\n aria-label={ariaLabel}\n classNames={classNames}\n data-testid={testId}\n disableAnimation={isInitialRenderCycle || disableAnimation}\n isIndeterminate={indeterminate}\n label={label}\n showValueLabel={showValueLabel}\n size={size}\n value={percent || 0}\n valueLabel={!!percent && value}\n />\n );\n};\n\nexport default Progress;\n","import Progress, { progressVariants } from './Progress';\n\nexport type { ProgressProps } from './Progress';\n\nexport { Progress, progressVariants };\n\nexport default Progress;\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkPK723NKOcjs = require('./chunk-PK723NKO.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var _chunkF2KT5QJ4cjs = require('./chunk-F2KT5QJ4.cjs');
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
@@ -131,5 +131,5 @@ require('./chunk-D4TLDLEX.cjs');
|
|
|
131
131
|
|
|
132
132
|
|
|
133
133
|
|
|
134
|
-
exports.Accordion = _chunk2P5WWVQ6cjs.Accordion_default; exports.Alert = _chunkYVPRFCWIcjs.Alert_default; exports.Avatar = _chunk77J7NZYBcjs.Avatar_default; exports.AvatarGroup = _chunkLIZGYO24cjs.AvatarGroup_default; exports.Badge = _chunkJSANDW3Wcjs.Badge_default; exports.Breadcrumb = _chunkZZOEFQWQcjs.Breadcrumb_default; exports.Button = _chunkFLPLJTACcjs.Button_default; exports.ButtonGroup = _chunkY3RSI2KVcjs.ButtonGroup_default; exports.Card = _chunkMHZAWSFJcjs.Card_default; exports.Drawer = _chunk7RVUB6I5cjs.Drawer_default; exports.Json = _chunkJ63YGHTGcjs.Json_default; exports.Label = _chunkPLJWIGRScjs.Label_default; exports.Menu = _chunkXHOAZB2Zcjs.Menu_default; exports.Modal = _chunkPEUUQMJScjs.Modal_default; exports.Popover = _chunkEAX5J2I2cjs.Popover_default; exports.Progress =
|
|
134
|
+
exports.Accordion = _chunk2P5WWVQ6cjs.Accordion_default; exports.Alert = _chunkYVPRFCWIcjs.Alert_default; exports.Avatar = _chunk77J7NZYBcjs.Avatar_default; exports.AvatarGroup = _chunkLIZGYO24cjs.AvatarGroup_default; exports.Badge = _chunkJSANDW3Wcjs.Badge_default; exports.Breadcrumb = _chunkZZOEFQWQcjs.Breadcrumb_default; exports.Button = _chunkFLPLJTACcjs.Button_default; exports.ButtonGroup = _chunkY3RSI2KVcjs.ButtonGroup_default; exports.Card = _chunkMHZAWSFJcjs.Card_default; exports.Drawer = _chunk7RVUB6I5cjs.Drawer_default; exports.Json = _chunkJ63YGHTGcjs.Json_default; exports.Label = _chunkPLJWIGRScjs.Label_default; exports.Menu = _chunkXHOAZB2Zcjs.Menu_default; exports.Modal = _chunkPEUUQMJScjs.Modal_default; exports.Popover = _chunkEAX5J2I2cjs.Popover_default; exports.Progress = _chunkPK723NKOcjs.Progress_default; exports.ProgressCircular = _chunkF2KT5QJ4cjs.ProgressCircular_default; exports.Table = _chunkAJCAIA6Hcjs.Table_default; exports.Tabs = _chunkJUHSESWBcjs.Tabs_default; exports.Toast = _chunkGXIDQFQ6cjs.Toast; exports.ToastProvider = _chunkGXIDQFQ6cjs.ToastProvider_default; exports.Tooltip = _chunk25AJSW5Ecjs.Tooltip_default; exports.accordionVariants = _chunk2P5WWVQ6cjs.accordionVariants; exports.addToast = _chunkGXIDQFQ6cjs.addToast; exports.alertVariants = _chunkYVPRFCWIcjs.alertVariants; exports.breadcrumbVariants = _chunkZZOEFQWQcjs.breadcrumbVariants; exports.buttonVariants = _chunkFLPLJTACcjs.buttonVariants; exports.cardVariants = _chunkMHZAWSFJcjs.cardVariants; exports.drawerBackdrops = _chunk7RVUB6I5cjs.drawerBackdrops; exports.drawerPlacements = _chunk7RVUB6I5cjs.drawerPlacements; exports.drawerRadii = _chunk7RVUB6I5cjs.drawerRadii; exports.drawerSizes = _chunk7RVUB6I5cjs.drawerSizes; exports.drawerVariants = _chunk7RVUB6I5cjs.drawerVariants; exports.labelVariants = _chunkPLJWIGRScjs.labelVariants; exports.modalVariants = _chunkPEUUQMJScjs.modalVariants; exports.progressCircularVariants = _chunkF2KT5QJ4cjs.progressCircularVariants; exports.progressVariants = _chunkPK723NKOcjs.progressVariants; exports.tableVariants = _chunkAJCAIA6Hcjs.tableVariants; exports.tabsVariants = _chunkJUHSESWBcjs.tabsVariants; exports.toastVariants = _chunkGXIDQFQ6cjs.toastVariants; exports.useDebounce = _chunkOLI32URUcjs.useDebounce; exports.useIsInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle; exports.useLocalStorage = _chunkOLI32URUcjs.useLocalStorage;
|
|
135
135
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.cts
CHANGED
|
@@ -13,7 +13,7 @@ export { L as Label, a as LabelProps, l as labelVariants } from './Label-Bp9WZiD
|
|
|
13
13
|
export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Menu-DYi8oagz.cjs';
|
|
14
14
|
export { M as Modal, a as ModalProps, m as modalVariants } from './Modal-DI5ZdS_3.cjs';
|
|
15
15
|
export { _ as Popover, P as PopoverProps } from './Popover-DajWpbPN.cjs';
|
|
16
|
-
export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-
|
|
16
|
+
export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-DdDYbP2p.cjs';
|
|
17
17
|
export { P as Progress, a as ProgressProps, p as progressVariants } from './Progress-7yXUVioO.cjs';
|
|
18
18
|
export { T as Table, c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from './Table-D19f5nrd.cjs';
|
|
19
19
|
export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-xUYwXMX9.cjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ export { L as Label, a as LabelProps, l as labelVariants } from './Label-Bp9WZiD
|
|
|
13
13
|
export { M as Menu, b as MenuItem, a as MenuProps, c as MenuSection } from './Menu-DYi8oagz.js';
|
|
14
14
|
export { M as Modal, a as ModalProps, m as modalVariants } from './Modal-DI5ZdS_3.js';
|
|
15
15
|
export { _ as Popover, P as PopoverProps } from './Popover-DcZ3qt-u.js';
|
|
16
|
-
export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-
|
|
16
|
+
export { P as ProgressCircular, a as ProgressCircularProps, p as progressCircularVariants } from './ProgressCircular-DdDYbP2p.js';
|
|
17
17
|
export { P as Progress, a as ProgressProps, p as progressVariants } from './Progress-7yXUVioO.js';
|
|
18
18
|
export { T as Table, c as TableColumnProps, a as TableProps, b as TableRowProps, V as VariantProps, t as tableVariants } from './Table-D19f5nrd.js';
|
|
19
19
|
export { b as TabProps, T as Tabs, a as TabsProps, t as tabsVariants } from './Tabs-xUYwXMX9.js';
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Progress_default,
|
|
3
3
|
progressVariants
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-OGK2OQXX.js";
|
|
5
5
|
import {
|
|
6
6
|
ProgressCircular_default,
|
|
7
7
|
progressCircularVariants
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-NF7YMLX7.js";
|
|
9
9
|
import {
|
|
10
10
|
Table_default,
|
|
11
11
|
tableVariants
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@fuf-stack/pixels",
|
|
3
3
|
"description": "fuf core react component library",
|
|
4
4
|
"author": "Hannes Tiede",
|
|
5
|
-
"version": "0.41.
|
|
5
|
+
"version": "0.41.5",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/index.cjs",
|
|
8
8
|
"module": "./dist/index.js",
|
|
@@ -193,9 +193,9 @@
|
|
|
193
193
|
"react": "19.0.0",
|
|
194
194
|
"react-dom": "19.0.0",
|
|
195
195
|
"@repo/tailwind-config": "0.0.1",
|
|
196
|
-
"@repo/
|
|
196
|
+
"@repo/vite-config": "0.0.1",
|
|
197
197
|
"@repo/storybook-config": "0.0.1",
|
|
198
|
-
"@repo/
|
|
198
|
+
"@repo/tsup-config": "0.0.1"
|
|
199
199
|
},
|
|
200
200
|
"scripts": {
|
|
201
201
|
"build": "tsup --config node_modules/@repo/tsup-config/config.ts --dts-resolve",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-ESDUZ6J3.cjs","../src/ProgressCircular/ProgressCircular.tsx","../src/ProgressCircular/index.ts"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACHA,oCAAiC;AAEjC,4CAAyD;AACzD,sCAAiE;AAEjE,oDAAyC;AA8G7B,+CAAA;AA1GL,IAAM,yBAAA,EAA2B,4BAAA;AAAG,EACzC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,SAAA,EAAW,EAAA;AAAA;AAAA,IAEX,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,GAAA,EAAK,EAAA;AAAA;AAAA,IAEL,UAAA,EAAY,EAAA;AAAA;AAAA,IAEZ,KAAA,EAAO,mBAAA;AAAA;AAAA,IAEP,KAAA,EAAO;AAAA,EACT,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,8CAAA;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IAAA,CAAA,EAEG,uBAAA,CAA6B,QAAA,CAAS,KAAA,CAAA;AAAA,IAE3C,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AAyBD,IAAM,cAAA,EAAgB,CAAC,QAAA,EAAU,CAAA,EAAA,GAAM,CAAA,EAAA;AAKb;AACZ,EAAA;AACA,EAAA;AACH,EAAA;AACE,EAAA;AACX,EAAA;AACmB,EAAA;AACZ,EAAA;AACC,EAAA;AACmB;AAEE,EAAA;AAEZ,EAAA;AACE,EAAA;AAGO,EAAA;AAGiB,EAAA;AAC7B,EAAA;AACI,IAAA;AACP,IAAA;AACgB,EAAA;AACT,IAAA;AACP,IAAA;AACX,EAAA;AAG2B,EAAA;AACI,IAAA;AAG3B,EAAA;AAGF,EAAA;AAAC,IAAA;AAAA,IAAA;AACa,MAAA;AACZ,MAAA;AACO,MAAA;AACW,MAAA;AACJ,MAAA;AACD,MAAA;AAEK,MAAA;AACN,MAAA;AAAA,IAAA;AACd,EAAA;AAEJ;AAEe;ADzCuB;AACA;AErGvB;AFuGuB;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-ESDUZ6J3.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { CircularProgressProps as HeroCircularProgressProps } from '@heroui/progress';\nimport type { ReactNode } from 'react';\n\nimport { FaCheck, FaTimes } from 'react-icons/fa';\n\nimport { CircularProgress as HeroCircularProgress } from '@heroui/progress';\nimport { circularProgress as heroCircularProgressVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\nexport const progressCircularVariants = tv({\n slots: {\n // wrapper around the whole component\n base: '',\n // indicator of the circle (finished part)\n indicator: '',\n // label next to the svgWrapper\n label: '',\n // wrapper for the circle\n svg: '',\n // wrapper around progress svg and value span\n svgWrapper: '',\n // track of the circle (not finished part)\n track: 'stroke-default-50',\n // outer span next to the svg\n value: '',\n },\n variants: {\n color: {\n info: {\n svg: 'text-info',\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n ...heroCircularProgressVariants.variants.color,\n },\n hasError: {\n true: {\n svg: 'text-danger',\n },\n },\n size: {\n xs: {\n svg: 'h-10 w-10',\n value: 'text-xs',\n },\n sm: {\n svg: 'h-12 w-12',\n value: 'text-sm',\n },\n md: {\n svg: 'h-16 w-16',\n value: 'text-md',\n },\n lg: {\n svg: 'h-20 w-20',\n value: 'text-lg',\n },\n xl: {\n svg: 'h-24 w-24',\n value: 'text-xl',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof progressCircularVariants>;\ntype ClassName = TVClassName<typeof progressCircularVariants>;\n\nexport interface ProgressCircularProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** color options */\n color?: VariantProps['color'];\n /** disables all animations */\n disableAnimation?: boolean;\n /** formats the display value of the progress in the center */\n format?: (percent?: number) => ReactNode;\n /** enables error version */\n hasError?: boolean;\n /** percentage / progress of the circular progress bar */\n percent: number;\n /** size options */\n size?: VariantProps['size'];\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => `${percent}%`;\n\n/**\n * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)\n */\nconst ProgressCircular = ({\n ariaLabel = 'progress',\n className = undefined,\n format = defaultFormat,\n hasError = false,\n percent,\n disableAnimation = false,\n size = 'md',\n color = 'info',\n}: ProgressCircularProps) => {\n // used to disable animation on initial render cycle\n const isInitialRenderCycle = useIsInitialRenderCycle();\n\n const variants = progressCircularVariants({ color, hasError, size });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // format value\n let value = format(percent);\n\n // handle special states\n let progressColor: VariantProps['color'] = color;\n if (hasError) {\n progressColor = 'danger';\n value = <FaTimes className=\"text-danger\" />;\n } else if (percent >= 100) {\n progressColor = 'success';\n value = <FaCheck className=\"text-success\" />;\n }\n\n // pass only HeroUI colors as props\n const heroUiColor = Object.keys(\n heroCircularProgressVariants.variants.color,\n ).includes(color)\n ? (progressColor as HeroCircularProgressProps['color'])\n : undefined;\n\n return (\n <HeroCircularProgress\n aria-label={ariaLabel}\n classNames={classNames}\n color={heroUiColor}\n disableAnimation={isInitialRenderCycle && disableAnimation}\n showValueLabel\n strokeWidth={2}\n // we do not use spinner animation when no percent provided\n value={percent || 0}\n valueLabel={value}\n />\n );\n};\n\nexport default ProgressCircular;\n","import ProgressCircular, { progressCircularVariants } from './ProgressCircular';\n\nexport type { ProgressCircularProps } from './ProgressCircular';\n\nexport { ProgressCircular, progressCircularVariants };\n\nexport default ProgressCircular;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ProgressCircular/ProgressCircular.tsx","../src/ProgressCircular/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { CircularProgressProps as HeroCircularProgressProps } from '@heroui/progress';\nimport type { ReactNode } from 'react';\n\nimport { FaCheck, FaTimes } from 'react-icons/fa';\n\nimport { CircularProgress as HeroCircularProgress } from '@heroui/progress';\nimport { circularProgress as heroCircularProgressVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\nexport const progressCircularVariants = tv({\n slots: {\n // wrapper around the whole component\n base: '',\n // indicator of the circle (finished part)\n indicator: '',\n // label next to the svgWrapper\n label: '',\n // wrapper for the circle\n svg: '',\n // wrapper around progress svg and value span\n svgWrapper: '',\n // track of the circle (not finished part)\n track: 'stroke-default-50',\n // outer span next to the svg\n value: '',\n },\n variants: {\n color: {\n info: {\n svg: 'text-info',\n },\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n ...heroCircularProgressVariants.variants.color,\n },\n hasError: {\n true: {\n svg: 'text-danger',\n },\n },\n size: {\n xs: {\n svg: 'h-10 w-10',\n value: 'text-xs',\n },\n sm: {\n svg: 'h-12 w-12',\n value: 'text-sm',\n },\n md: {\n svg: 'h-16 w-16',\n value: 'text-md',\n },\n lg: {\n svg: 'h-20 w-20',\n value: 'text-lg',\n },\n xl: {\n svg: 'h-24 w-24',\n value: 'text-xl',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof progressCircularVariants>;\ntype ClassName = TVClassName<typeof progressCircularVariants>;\n\nexport interface ProgressCircularProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** CSS class name */\n className?: ClassName;\n /** color options */\n color?: VariantProps['color'];\n /** disables all animations */\n disableAnimation?: boolean;\n /** formats the display value of the progress in the center */\n format?: (percent?: number) => ReactNode;\n /** enables error version */\n hasError?: boolean;\n /** percentage / progress of the circular progress bar */\n percent: number;\n /** size options */\n size?: VariantProps['size'];\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => `${percent}%`;\n\n/**\n * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)\n */\nconst ProgressCircular = ({\n ariaLabel = 'progress',\n className = undefined,\n format = defaultFormat,\n hasError = false,\n percent,\n disableAnimation = false,\n size = 'md',\n color = 'info',\n}: ProgressCircularProps) => {\n // used to disable animation on initial render cycle\n const isInitialRenderCycle = useIsInitialRenderCycle();\n\n const variants = progressCircularVariants({ color, hasError, size });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // format value\n let value = format(percent);\n\n // handle special states\n let progressColor: VariantProps['color'] = color;\n if (hasError) {\n progressColor = 'danger';\n value = <FaTimes className=\"text-danger\" />;\n } else if (percent >= 100) {\n progressColor = 'success';\n value = <FaCheck className=\"text-success\" />;\n }\n\n // pass only HeroUI colors as props\n const heroUiColor = Object.keys(\n heroCircularProgressVariants.variants.color,\n ).includes(color)\n ? (progressColor as HeroCircularProgressProps['color'])\n : undefined;\n\n return (\n <HeroCircularProgress\n aria-label={ariaLabel}\n classNames={classNames}\n color={heroUiColor}\n disableAnimation={isInitialRenderCycle && disableAnimation}\n showValueLabel\n strokeWidth={2}\n // we do not use spinner animation when no percent provided\n value={percent || 0}\n valueLabel={value}\n />\n );\n};\n\nexport default ProgressCircular;\n","import ProgressCircular, { progressCircularVariants } from './ProgressCircular';\n\nexport type { ProgressCircularProps } from './ProgressCircular';\n\nexport { ProgressCircular, progressCircularVariants };\n\nexport default ProgressCircular;\n"],"mappings":";;;;;;;;AAIA,SAAS,SAAS,eAAe;AAEjC,SAAS,oBAAoB,4BAA4B;AACzD,SAAS,oBAAoB,oCAAoC;AAEjE,SAAS,IAAI,4BAA4B;AA8G7B;AA1GL,IAAM,2BAA2B,GAAG;AAAA,EACzC,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA;AAAA,IAEN,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA;AAAA,IAEP,KAAK;AAAA;AAAA,IAEL,YAAY;AAAA;AAAA,IAEZ,OAAO;AAAA;AAAA,IAEP,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,OAEG,6BAA6B,SAAS;AAAA,IAE3C,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACF,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAyBD,IAAM,gBAAgB,CAAC,UAAU,MAAM,GAAG,OAAO;AAKjD,IAAM,mBAAmB,CAAC;AAAA,EACxB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AACV,MAA6B;AAE3B,QAAM,uBAAuB,wBAAwB;AAErD,QAAM,WAAW,yBAAyB,EAAE,OAAO,UAAU,KAAK,CAAC;AACnE,QAAM,aAAa,qBAAqB,UAAU,WAAW,MAAM;AAGnE,MAAI,QAAQ,OAAO,OAAO;AAG1B,MAAI,gBAAuC;AAC3C,MAAI,UAAU;AACZ,oBAAgB;AAChB,YAAQ,oBAAC,WAAQ,WAAU,eAAc;AAAA,EAC3C,WAAW,WAAW,KAAK;AACzB,oBAAgB;AAChB,YAAQ,oBAAC,WAAQ,WAAU,gBAAe;AAAA,EAC5C;AAGA,QAAM,cAAc,OAAO;AAAA,IACzB,6BAA6B,SAAS;AAAA,EACxC,EAAE,SAAS,KAAK,IACX,gBACD;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA,OAAO;AAAA,MACP,kBAAkB,wBAAwB;AAAA,MAC1C,gBAAc;AAAA,MACd,aAAa;AAAA,MAEb,OAAO,WAAW;AAAA,MAClB,YAAY;AAAA;AAAA,EACd;AAEJ;AAEA,IAAO,2BAAQ;;;AC7If,IAAOA,4BAAQ;","names":["ProgressCircular_default"]}
|