@fuf-stack/pixels 0.42.0 → 0.42.1
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/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-DdDYbP2p.d.cts → ProgressCircular-BrcYFzAa.d.cts} +3 -1
- package/dist/{ProgressCircular-DdDYbP2p.d.ts → ProgressCircular-BrcYFzAa.d.ts} +3 -1
- package/dist/{chunk-FC3IZIDH.js → chunk-OBOVWXA2.js} +16 -13
- package/dist/chunk-OBOVWXA2.js.map +1 -0
- package/dist/{chunk-3FBNPV4F.cjs → chunk-PPH46E24.cjs} +16 -13
- package/dist/chunk-PPH46E24.cjs.map +1 -0
- package/dist/index.cjs +2 -2
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-3FBNPV4F.cjs.map +0 -1
- package/dist/chunk-FC3IZIDH.js.map +0 -1
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _chunkPPH46E24cjs = require('../chunk-PPH46E24.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 = _chunkPPH46E24cjs.ProgressCircular_default; exports.default = _chunkPPH46E24cjs.ProgressCircular_default2; exports.progressCircularVariants = _chunkPPH46E24cjs.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-BrcYFzAa.cjs';
|
|
2
|
+
export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-BrcYFzAa.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-BrcYFzAa.js';
|
|
2
|
+
export { a as ProgressCircularProps, p as progressCircularVariants } from '../ProgressCircular-BrcYFzAa.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'tailwind-variants';
|
|
5
5
|
import 'tailwind-variants/dist/config.js';
|
|
@@ -440,10 +440,12 @@ interface ProgressCircularProps extends VariantProps {
|
|
|
440
440
|
percent: number;
|
|
441
441
|
/** size options */
|
|
442
442
|
size?: VariantProps['size'];
|
|
443
|
+
/** stroke width of the circular progress bar */
|
|
444
|
+
strokeWidth?: number;
|
|
443
445
|
}
|
|
444
446
|
/**
|
|
445
447
|
* ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)
|
|
446
448
|
*/
|
|
447
|
-
declare const ProgressCircular: ({ ariaLabel, className, format, hasError, percent, disableAnimation, size, color, }: ProgressCircularProps) => react_jsx_runtime.JSX.Element;
|
|
449
|
+
declare const ProgressCircular: ({ ariaLabel, className, format, hasError, percent, disableAnimation, size, color, strokeWidth: _strokeWidth, }: ProgressCircularProps) => react_jsx_runtime.JSX.Element;
|
|
448
450
|
|
|
449
451
|
export { ProgressCircular as P, type ProgressCircularProps as a, progressCircularVariants as p };
|
|
@@ -440,10 +440,12 @@ interface ProgressCircularProps extends VariantProps {
|
|
|
440
440
|
percent: number;
|
|
441
441
|
/** size options */
|
|
442
442
|
size?: VariantProps['size'];
|
|
443
|
+
/** stroke width of the circular progress bar */
|
|
444
|
+
strokeWidth?: number;
|
|
443
445
|
}
|
|
444
446
|
/**
|
|
445
447
|
* ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)
|
|
446
448
|
*/
|
|
447
|
-
declare const ProgressCircular: ({ ariaLabel, className, format, hasError, percent, disableAnimation, size, color, }: ProgressCircularProps) => react_jsx_runtime.JSX.Element;
|
|
449
|
+
declare const ProgressCircular: ({ ariaLabel, className, format, hasError, percent, disableAnimation, size, color, strokeWidth: _strokeWidth, }: ProgressCircularProps) => react_jsx_runtime.JSX.Element;
|
|
448
450
|
|
|
449
451
|
export { ProgressCircular as P, type ProgressCircularProps as a, progressCircularVariants as p };
|
|
@@ -77,7 +77,8 @@ var ProgressCircular = ({
|
|
|
77
77
|
percent,
|
|
78
78
|
disableAnimation = false,
|
|
79
79
|
size = "md",
|
|
80
|
-
color = "info"
|
|
80
|
+
color = "info",
|
|
81
|
+
strokeWidth: _strokeWidth = void 0
|
|
81
82
|
}) => {
|
|
82
83
|
const isInitialRenderCycle = useIsInitialRenderCycle();
|
|
83
84
|
const isFinished = !hasError && percent >= 100;
|
|
@@ -89,17 +90,19 @@ var ProgressCircular = ({
|
|
|
89
90
|
});
|
|
90
91
|
const classNames = variantsToClassNames(variants, className, "base");
|
|
91
92
|
let value = format(percent);
|
|
92
|
-
let strokeWidth;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
93
|
+
let strokeWidth = _strokeWidth;
|
|
94
|
+
if (_strokeWidth) {
|
|
95
|
+
switch (size) {
|
|
96
|
+
case "xs":
|
|
97
|
+
strokeWidth = 2;
|
|
98
|
+
break;
|
|
99
|
+
case "sm":
|
|
100
|
+
strokeWidth = 1.8;
|
|
101
|
+
break;
|
|
102
|
+
default:
|
|
103
|
+
strokeWidth = 1.6;
|
|
104
|
+
break;
|
|
105
|
+
}
|
|
103
106
|
}
|
|
104
107
|
let progressColor = color;
|
|
105
108
|
if (hasError) {
|
|
@@ -136,4 +139,4 @@ export {
|
|
|
136
139
|
ProgressCircular_default,
|
|
137
140
|
ProgressCircular_default2
|
|
138
141
|
};
|
|
139
|
-
//# sourceMappingURL=chunk-
|
|
142
|
+
//# sourceMappingURL=chunk-OBOVWXA2.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 /** stroke width of the circular progress bar */\n strokeWidth?: number;\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 strokeWidth: _strokeWidth = undefined,\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 = _strokeWidth;\n if (_strokeWidth) {\n switch (size) {\n case 'xs':\n strokeWidth = 2;\n break;\n case 'sm':\n strokeWidth = 1.8;\n break;\n default:\n strokeWidth = 1.6;\n break;\n }\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;AA4I7B;AAxIL,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;AA2BD,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;AAAA,EACR,aAAa,eAAe;AAC9B,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,MAAI,cAAc;AAChB,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,sBAAc;AACd;AAAA,MACF,KAAK;AACH,sBAAc;AACd;AAAA,MACF;AACE,sBAAc;AACd;AAAA,IACJ;AAAA,EACF;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;;;AC3Kf,IAAOA,4BAAQ;","names":["ProgressCircular_default"]}
|
|
@@ -77,7 +77,8 @@ var ProgressCircular = ({
|
|
|
77
77
|
percent,
|
|
78
78
|
disableAnimation = false,
|
|
79
79
|
size = "md",
|
|
80
|
-
color = "info"
|
|
80
|
+
color = "info",
|
|
81
|
+
strokeWidth: _strokeWidth = void 0
|
|
81
82
|
}) => {
|
|
82
83
|
const isInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle.call(void 0, );
|
|
83
84
|
const isFinished = !hasError && percent >= 100;
|
|
@@ -89,17 +90,19 @@ var ProgressCircular = ({
|
|
|
89
90
|
});
|
|
90
91
|
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, className, "base");
|
|
91
92
|
let value = format(percent);
|
|
92
|
-
let strokeWidth;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
93
|
+
let strokeWidth = _strokeWidth;
|
|
94
|
+
if (_strokeWidth) {
|
|
95
|
+
switch (size) {
|
|
96
|
+
case "xs":
|
|
97
|
+
strokeWidth = 2;
|
|
98
|
+
break;
|
|
99
|
+
case "sm":
|
|
100
|
+
strokeWidth = 1.8;
|
|
101
|
+
break;
|
|
102
|
+
default:
|
|
103
|
+
strokeWidth = 1.6;
|
|
104
|
+
break;
|
|
105
|
+
}
|
|
103
106
|
}
|
|
104
107
|
let progressColor = color;
|
|
105
108
|
if (hasError) {
|
|
@@ -136,4 +139,4 @@ var ProgressCircular_default2 = ProgressCircular_default;
|
|
|
136
139
|
|
|
137
140
|
|
|
138
141
|
exports.progressCircularVariants = progressCircularVariants; exports.ProgressCircular_default = ProgressCircular_default; exports.ProgressCircular_default2 = ProgressCircular_default2;
|
|
139
|
-
//# sourceMappingURL=chunk-
|
|
142
|
+
//# sourceMappingURL=chunk-PPH46E24.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-PPH46E24.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;AA4I7B,+CAAA;AAxIL,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;AA2BD,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;AACoB,EAAA;AACD;AAEE,EAAA;AAEG,EAAA;AACf,EAAA;AACf,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACD,EAAA;AACkB,EAAA;AAGO,EAAA;AAGR,EAAA;AACA,EAAA;AACF,IAAA;AACP,MAAA;AACW,QAAA;AACd,QAAA;AACG,MAAA;AACW,QAAA;AACd,QAAA;AACF,MAAA;AACgB,QAAA;AACd,QAAA;AACJ,IAAA;AACF,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;AD7CuB;AACA;AE/HvB;AFiIuB;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-PPH46E24.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 /** stroke width of the circular progress bar */\n strokeWidth?: number;\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 strokeWidth: _strokeWidth = undefined,\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 = _strokeWidth;\n if (_strokeWidth) {\n switch (size) {\n case 'xs':\n strokeWidth = 2;\n break;\n case 'sm':\n strokeWidth = 1.8;\n break;\n default:\n strokeWidth = 1.6;\n break;\n }\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"]}
|
package/dist/index.cjs
CHANGED
|
@@ -5,7 +5,7 @@ var _chunkPK723NKOcjs = require('./chunk-PK723NKO.cjs');
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var _chunkPPH46E24cjs = require('./chunk-PPH46E24.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 = _chunkPK723NKOcjs.Progress_default; exports.ProgressCircular =
|
|
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 = _chunkPPH46E24cjs.ProgressCircular_default; exports.Table = _chunkAJCAIA6Hcjs.Table_default; exports.Tabs = _chunkD5BXY6EGcjs.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 = _chunkPPH46E24cjs.progressCircularVariants; exports.progressVariants = _chunkPK723NKOcjs.progressVariants; exports.tableVariants = _chunkAJCAIA6Hcjs.tableVariants; exports.tabsVariants = _chunkD5BXY6EGcjs.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-BrcYFzAa.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-C1UEkvSr.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-BrcYFzAa.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-C1UEkvSr.js';
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-3FBNPV4F.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;AAuI7B,+CAAA;AAnIL,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;AAGtB,EAAA;AACU,EAAA;AACP,IAAA;AACW,MAAA;AACd,MAAA;AACG,IAAA;AACW,MAAA;AACd,MAAA;AACF,IAAA;AACgB,MAAA;AACd,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;AE5HvB;AF8HuB;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-3FBNPV4F.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: number;\n switch (size) {\n case 'xs':\n strokeWidth = 2;\n break;\n case 'sm':\n strokeWidth = 1.8;\n break;\n default:\n strokeWidth = 1.6;\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"]}
|
|
@@ -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-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: number;\n switch (size) {\n case 'xs':\n strokeWidth = 2;\n break;\n case 'sm':\n strokeWidth = 1.8;\n break;\n default:\n strokeWidth = 1.6;\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;AAuI7B;AAnIL,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;AACJ,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,oBAAc;AACd;AAAA,IACF,KAAK;AACH,oBAAc;AACd;AAAA,IACF;AACE,oBAAc;AACd;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;;;ACtKf,IAAOA,4BAAQ;","names":["ProgressCircular_default"]}
|