@fuf-stack/pixels 0.41.3 → 0.41.4

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.
@@ -2,12 +2,12 @@
2
2
 
3
3
 
4
4
 
5
- var _chunkQKTRIE4Rcjs = require('../chunk-QKTRIE4R.cjs');
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 = _chunkQKTRIE4Rcjs.Progress_default; exports.default = _chunkQKTRIE4Rcjs.Progress_default2; exports.progressVariants = _chunkQKTRIE4Rcjs.progressVariants;
12
+ exports.Progress = _chunkPK723NKOcjs.Progress_default; exports.default = _chunkPK723NKOcjs.Progress_default2; exports.progressVariants = _chunkPK723NKOcjs.progressVariants;
13
13
  //# sourceMappingURL=index.cjs.map
@@ -2,7 +2,7 @@ import {
2
2
  Progress_default,
3
3
  Progress_default2,
4
4
  progressVariants
5
- } from "../chunk-EFE7F3MZ.js";
5
+ } from "../chunk-OGK2OQXX.js";
6
6
  import "../chunk-B3XKBNXD.js";
7
7
  import "../chunk-J7N2552D.js";
8
8
  export {
@@ -2,12 +2,12 @@
2
2
 
3
3
 
4
4
 
5
- var _chunkESDUZ6J3cjs = require('../chunk-ESDUZ6J3.cjs');
5
+ var _chunkJS2PJ6SLcjs = require('../chunk-JS2PJ6SL.cjs');
6
6
  require('../chunk-OLI32URU.cjs');
7
7
  require('../chunk-D4TLDLEX.cjs');
8
8
 
9
9
 
10
10
 
11
11
 
12
- exports.ProgressCircular = _chunkESDUZ6J3cjs.ProgressCircular_default; exports.default = _chunkESDUZ6J3cjs.ProgressCircular_default2; exports.progressCircularVariants = _chunkESDUZ6J3cjs.progressCircularVariants;
12
+ exports.ProgressCircular = _chunkJS2PJ6SLcjs.ProgressCircular_default; exports.default = _chunkJS2PJ6SLcjs.ProgressCircular_default2; exports.progressCircularVariants = _chunkJS2PJ6SLcjs.progressCircularVariants;
13
13
  //# sourceMappingURL=index.cjs.map
@@ -1,5 +1,5 @@
1
- import { P as ProgressCircular } from '../ProgressCircular-U4kPZ1T1.cjs';
2
- export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-U4kPZ1T1.cjs';
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-U4kPZ1T1.js';
2
- export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-U4kPZ1T1.js';
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';
@@ -2,7 +2,7 @@ import {
2
2
  ProgressCircular_default,
3
3
  ProgressCircular_default2,
4
4
  progressCircularVariants
5
- } from "../chunk-JB6PTM4V.js";
5
+ } from "../chunk-GK225P72.js";
6
6
  import "../chunk-B3XKBNXD.js";
7
7
  import "../chunk-J7N2552D.js";
8
8
  export {
@@ -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;
@@ -39,6 +39,11 @@ 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",
@@ -75,14 +80,20 @@ var ProgressCircular = ({
75
80
  color = "info"
76
81
  }) => {
77
82
  const isInitialRenderCycle = useIsInitialRenderCycle();
78
- const variants = progressCircularVariants({ color, hasError, size });
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);
81
92
  let progressColor = color;
82
93
  if (hasError) {
83
94
  progressColor = "danger";
84
95
  value = /* @__PURE__ */ jsx(FaTimes, { className: "text-danger" });
85
- } else if (percent >= 100) {
96
+ } else if (isFinished) {
86
97
  progressColor = "success";
87
98
  value = /* @__PURE__ */ jsx(FaCheck, { className: "text-success" });
88
99
  }
@@ -95,7 +106,7 @@ var ProgressCircular = ({
95
106
  "aria-label": ariaLabel,
96
107
  classNames,
97
108
  color: heroUiColor,
98
- disableAnimation: isInitialRenderCycle && disableAnimation,
109
+ disableAnimation: isInitialRenderCycle || disableAnimation,
99
110
  showValueLabel: true,
100
111
  strokeWidth: 2,
101
112
  value: percent || 0,
@@ -113,4 +124,4 @@ export {
113
124
  ProgressCircular_default,
114
125
  ProgressCircular_default2
115
126
  };
116
- //# sourceMappingURL=chunk-JB6PTM4V.js.map
127
+ //# sourceMappingURL=chunk-GK225P72.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-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 isFinished: {\n true: {\n svg: 'text-success',\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 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 // 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={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;AAyH7B;AArHL,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,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;AAAA,MAEb,OAAO,WAAW;AAAA,MAClB,YAAY;AAAA;AAAA,EACd;AAEJ;AAEA,IAAO,2BAAQ;;;ACxJf,IAAOA,4BAAQ;","names":["ProgressCircular_default"]}
@@ -39,6 +39,11 @@ 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",
@@ -75,14 +80,20 @@ var ProgressCircular = ({
75
80
  color = "info"
76
81
  }) => {
77
82
  const isInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle.call(void 0, );
78
- const variants = progressCircularVariants({ color, hasError, size });
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);
81
92
  let progressColor = color;
82
93
  if (hasError) {
83
94
  progressColor = "danger";
84
95
  value = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, { className: "text-danger" });
85
- } else if (percent >= 100) {
96
+ } else if (isFinished) {
86
97
  progressColor = "success";
87
98
  value = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaCheck, { className: "text-success" });
88
99
  }
@@ -95,7 +106,7 @@ var ProgressCircular = ({
95
106
  "aria-label": ariaLabel,
96
107
  classNames,
97
108
  color: heroUiColor,
98
- disableAnimation: isInitialRenderCycle && disableAnimation,
109
+ disableAnimation: isInitialRenderCycle || disableAnimation,
99
110
  showValueLabel: true,
100
111
  strokeWidth: 2,
101
112
  value: percent || 0,
@@ -113,4 +124,4 @@ var ProgressCircular_default2 = ProgressCircular_default;
113
124
 
114
125
 
115
126
  exports.progressCircularVariants = progressCircularVariants; exports.ProgressCircular_default = ProgressCircular_default; exports.ProgressCircular_default2 = ProgressCircular_default2;
116
- //# sourceMappingURL=chunk-ESDUZ6J3.cjs.map
127
+ //# sourceMappingURL=chunk-JS2PJ6SL.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-JS2PJ6SL.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;AAyH7B,+CAAA;AArHL,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,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;AAGiB,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;AAEK,MAAA;AACN,MAAA;AAAA,IAAA;AACd,EAAA;AAEJ;AAEe;ADzCuB;AACA;AEhHvB;AFkHuB;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-JS2PJ6SL.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 isFinished: {\n true: {\n svg: 'text-success',\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 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 // 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={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"]}
@@ -76,7 +76,7 @@ var Progress = ({
76
76
  "aria-label": ariaLabel,
77
77
  classNames,
78
78
  "data-testid": testId,
79
- disableAnimation: isInitialRenderCycle && disableAnimation,
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-EFE7F3MZ.js.map
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 && 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"]}
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 && disableAnimation,
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-QKTRIE4R.cjs.map
99
+ //# sourceMappingURL=chunk-PK723NKO.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-QKTRIE4R.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-QKTRIE4R.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"]}
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 _chunkQKTRIE4Rcjs = require('./chunk-QKTRIE4R.cjs');
4
+ var _chunkPK723NKOcjs = require('./chunk-PK723NKO.cjs');
5
5
 
6
6
 
7
7
 
8
- var _chunkESDUZ6J3cjs = require('./chunk-ESDUZ6J3.cjs');
8
+ var _chunkJS2PJ6SLcjs = require('./chunk-JS2PJ6SL.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 = _chunkQKTRIE4Rcjs.Progress_default; exports.ProgressCircular = _chunkESDUZ6J3cjs.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 = _chunkESDUZ6J3cjs.progressCircularVariants; exports.progressVariants = _chunkQKTRIE4Rcjs.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;
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 = _chunkJS2PJ6SLcjs.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 = _chunkJS2PJ6SLcjs.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-U4kPZ1T1.cjs';
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-U4kPZ1T1.js';
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-EFE7F3MZ.js";
4
+ } from "./chunk-OGK2OQXX.js";
5
5
  import {
6
6
  ProgressCircular_default,
7
7
  progressCircularVariants
8
- } from "./chunk-JB6PTM4V.js";
8
+ } from "./chunk-GK225P72.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.3",
5
+ "version": "0.41.4",
6
6
  "type": "module",
7
7
  "main": "./dist/index.cjs",
8
8
  "module": "./dist/index.js",
@@ -192,9 +192,9 @@
192
192
  "@uiw/react-json-view": "2.0.0-alpha.30",
193
193
  "react": "19.0.0",
194
194
  "react-dom": "19.0.0",
195
+ "@repo/storybook-config": "0.0.1",
195
196
  "@repo/tailwind-config": "0.0.1",
196
197
  "@repo/tsup-config": "0.0.1",
197
- "@repo/storybook-config": "0.0.1",
198
198
  "@repo/vite-config": "0.0.1"
199
199
  },
200
200
  "scripts": {
@@ -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"]}