premium-react-loaders 1.0.0 → 1.0.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/README.md +49 -3
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/overlay/LoaderOverlay.d.ts +28 -0
- package/dist/components/overlay/LoaderOverlay.d.ts.map +1 -0
- package/dist/components/overlay/index.d.ts +2 -0
- package/dist/components/overlay/index.d.ts.map +1 -0
- package/dist/components/skeleton/SkeletonPage.d.ts +16 -0
- package/dist/components/skeleton/SkeletonPage.d.ts.map +1 -0
- package/dist/components/skeleton/index.d.ts +1 -0
- package/dist/components/skeleton/index.d.ts.map +1 -1
- package/dist/index.cjs +15 -11
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +15 -11
- package/dist/index.js.map +1 -1
- package/dist/index12.cjs +126 -37
- package/dist/index12.cjs.map +1 -1
- package/dist/index12.js +127 -38
- package/dist/index12.js.map +1 -1
- package/dist/index13.cjs +23 -11
- package/dist/index13.cjs.map +1 -1
- package/dist/index13.js +23 -11
- package/dist/index13.js.map +1 -1
- package/dist/index14.cjs +9 -32
- package/dist/index14.cjs.map +1 -1
- package/dist/index14.js +9 -32
- package/dist/index14.js.map +1 -1
- package/dist/index15.cjs +40 -24
- package/dist/index15.cjs.map +1 -1
- package/dist/index15.js +40 -24
- package/dist/index15.js.map +1 -1
- package/dist/index16.cjs +23 -36
- package/dist/index16.cjs.map +1 -1
- package/dist/index16.js +23 -36
- package/dist/index16.js.map +1 -1
- package/dist/index17.cjs +48 -58
- package/dist/index17.cjs.map +1 -1
- package/dist/index17.js +49 -59
- package/dist/index17.js.map +1 -1
- package/dist/index18.cjs +27 -53
- package/dist/index18.cjs.map +1 -1
- package/dist/index18.js +27 -53
- package/dist/index18.js.map +1 -1
- package/dist/index19.cjs +8 -14
- package/dist/index19.cjs.map +1 -1
- package/dist/index19.js +8 -14
- package/dist/index19.js.map +1 -1
- package/dist/index20.cjs +84 -28
- package/dist/index20.cjs.map +1 -1
- package/dist/index20.js +86 -30
- package/dist/index20.js.map +1 -1
- package/dist/index21.cjs +21 -26
- package/dist/index21.cjs.map +1 -1
- package/dist/index21.js +21 -26
- package/dist/index21.js.map +1 -1
- package/dist/index22.cjs +9 -11
- package/dist/index22.cjs.map +1 -1
- package/dist/index22.js +9 -11
- package/dist/index22.js.map +1 -1
- package/dist/index23.cjs +62 -16
- package/dist/index23.cjs.map +1 -1
- package/dist/index23.js +61 -15
- package/dist/index23.js.map +1 -1
- package/dist/index24.cjs +71 -0
- package/dist/index24.cjs.map +1 -0
- package/dist/index24.js +71 -0
- package/dist/index24.js.map +1 -0
- package/dist/index25.cjs +18 -0
- package/dist/index25.cjs.map +1 -0
- package/dist/index25.js +18 -0
- package/dist/index25.js.map +1 -0
- package/dist/index3.cjs +1 -1
- package/dist/index3.js +1 -1
- package/dist/premium-react-loaders.css +98 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/overlay.d.ts +24 -0
- package/dist/types/overlay.d.ts.map +1 -0
- package/dist/types/skeleton.d.ts +7 -0
- package/dist/types/skeleton.d.ts.map +1 -1
- package/package.json +7 -1
package/dist/index21.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index21.js","sources":["../src/components/pulse/
|
|
1
|
+
{"version":3,"file":"index21.js","sources":["../src/components/pulse/PulseDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseDotsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * PulseDots - Bouncing dots loader\n *\n * A loader with bouncing dots that scale and fade in a sequence.\n *\n * @example\n * ```tsx\n * <PulseDots size={40} color=\"#3b82f6\" />\n * <PulseDots size={32} dotCount={5} speed=\"fast\" />\n * ```\n */\nexport const PulseDots = forwardRef<HTMLDivElement, PulseDotsProps>(\n (\n {\n size = 40,\n color = '#3b82f6',\n dotCount = 3,\n dotSize = 10,\n speed = 'normal',\n className,\n style,\n testId = 'pulse-dots',\n visible = true,\n ariaLabel = 'Loading...',\n ...rest\n },\n ref\n ) => {\n if (!visible) return null;\n\n const animationDuration = getAnimationDuration(speed);\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('inline-flex items-center justify-center gap-2', className)}\n style={{\n height: normalizeSize(size),\n ...style,\n }}\n role=\"status\"\n aria-label={ariaLabel}\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: dotCount }).map((_, index) => (\n <div\n key={index}\n className=\"rounded-full\"\n style={{\n width: normalizeSize(dotSize),\n height: normalizeSize(dotSize),\n backgroundColor: color,\n animation: `pulse-bounce ${animationDuration} ease-in-out infinite`,\n animationDelay: `${index * 0.15}s`,\n }}\n />\n ))}\n </div>\n );\n }\n);\n\nPulseDots.displayName = 'PulseDots';\n"],"names":[],"mappings":";;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,OAAO;AAAA,cAC5B,QAAQ,cAAc,OAAO;AAAA,cAC7B,iBAAiB;AAAA,cACjB,WAAW,gBAAgB,iBAAiB;AAAA,cAC5C,gBAAgB,GAAG,QAAQ,IAAI;AAAA,YAAA;AAAA,UACjC;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}
|
package/dist/index22.cjs
CHANGED
|
@@ -4,29 +4,29 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
4
4
|
const react = require("react");
|
|
5
5
|
const colors = require("./index4.cjs");
|
|
6
6
|
const classNames = require("./index3.cjs");
|
|
7
|
-
const
|
|
7
|
+
const PulseWave = react.forwardRef(
|
|
8
8
|
({
|
|
9
9
|
size = 40,
|
|
10
10
|
color = "#3b82f6",
|
|
11
|
-
barCount =
|
|
11
|
+
barCount = 5,
|
|
12
12
|
speed = "normal",
|
|
13
13
|
className,
|
|
14
14
|
style,
|
|
15
|
-
testId = "pulse-
|
|
15
|
+
testId = "pulse-wave",
|
|
16
16
|
visible = true,
|
|
17
17
|
ariaLabel = "Loading...",
|
|
18
18
|
...rest
|
|
19
19
|
}, ref) => {
|
|
20
20
|
if (!visible) return null;
|
|
21
21
|
const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
|
|
22
|
-
const barWidth = Math.floor(sizeValue / (barCount * 2));
|
|
22
|
+
const barWidth = Math.floor(sizeValue / (barCount * 2.5));
|
|
23
23
|
const animationDuration = colors.getAnimationDuration(speed);
|
|
24
24
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
25
|
"div",
|
|
26
26
|
{
|
|
27
27
|
ref,
|
|
28
28
|
"data-testid": testId,
|
|
29
|
-
className: classNames.cn("inline-flex items-
|
|
29
|
+
className: classNames.cn("inline-flex items-end justify-center gap-1", className),
|
|
30
30
|
style: {
|
|
31
31
|
height: colors.normalizeSize(size),
|
|
32
32
|
...style
|
|
@@ -36,20 +36,18 @@ const PulseBars = react.forwardRef(
|
|
|
36
36
|
"aria-busy": "true",
|
|
37
37
|
...rest,
|
|
38
38
|
children: Array.from({ length: barCount }).map((_, index) => {
|
|
39
|
-
const
|
|
40
|
-
const delay = delays[index % delays.length];
|
|
39
|
+
const delay = index / barCount * 0.5;
|
|
41
40
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
41
|
"div",
|
|
43
42
|
{
|
|
44
43
|
className: "rounded-sm",
|
|
45
44
|
style: {
|
|
46
45
|
width: `${barWidth}px`,
|
|
47
|
-
minHeight: "30%",
|
|
48
46
|
height: "100%",
|
|
49
47
|
backgroundColor: color,
|
|
50
48
|
animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
|
|
51
49
|
animationDelay: `${delay}s`,
|
|
52
|
-
transformOrigin: "
|
|
50
|
+
transformOrigin: "bottom"
|
|
53
51
|
}
|
|
54
52
|
},
|
|
55
53
|
index
|
|
@@ -59,6 +57,6 @@ const PulseBars = react.forwardRef(
|
|
|
59
57
|
);
|
|
60
58
|
}
|
|
61
59
|
);
|
|
62
|
-
|
|
63
|
-
exports.
|
|
60
|
+
PulseWave.displayName = "PulseWave";
|
|
61
|
+
exports.PulseWave = PulseWave;
|
|
64
62
|
//# sourceMappingURL=index22.cjs.map
|
package/dist/index22.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index22.cjs","sources":["../src/components/pulse/
|
|
1
|
+
{"version":3,"file":"index22.cjs","sources":["../src/components/pulse/PulseWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseWaveProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * PulseWave - Wave pattern loader\n *\n * A loader with bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <PulseWave size={40} color=\"#3b82f6\" />\n * <PulseWave size={32} barCount={7} speed=\"slow\" />\n * ```\n */\nexport const PulseWave = forwardRef<HTMLDivElement, PulseWaveProps>(\n (\n {\n size = 40,\n color = '#3b82f6',\n barCount = 5,\n speed = 'normal',\n className,\n style,\n testId = 'pulse-wave',\n visible = true,\n ariaLabel = 'Loading...',\n ...rest\n },\n ref\n ) => {\n if (!visible) return null;\n\n const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n const barWidth = Math.floor(sizeValue / (barCount * 2.5));\n const animationDuration = getAnimationDuration(speed);\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('inline-flex items-end justify-center gap-1', className)}\n style={{\n height: normalizeSize(size),\n ...style,\n }}\n role=\"status\"\n aria-label={ariaLabel}\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: barCount }).map((_, index) => {\n const delay = (index / barCount) * 0.5;\n\n return (\n <div\n key={index}\n className=\"rounded-sm\"\n style={{\n width: `${barWidth}px`,\n height: '100%',\n backgroundColor: color,\n animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n animationDelay: `${delay}s`,\n transformOrigin: 'bottom',\n }}\n />\n );\n })}\n </div>\n );\n }\n);\n\nPulseWave.displayName = 'PulseWave';\n"],"names":["forwardRef","getAnimationDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;AAeO,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,IAAI;AACxD,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,8CAA8C,SAAS;AAAA,QACrE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,gBAAM,QAAS,QAAQ,WAAY;AAEnC,iBACEF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAG,KAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YATK;AAAA,UAAA;AAAA,QAYX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;;"}
|
package/dist/index22.js
CHANGED
|
@@ -2,29 +2,29 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { normalizeSize, getAnimationDuration } from "./index4.js";
|
|
4
4
|
import { cn } from "./index3.js";
|
|
5
|
-
const
|
|
5
|
+
const PulseWave = forwardRef(
|
|
6
6
|
({
|
|
7
7
|
size = 40,
|
|
8
8
|
color = "#3b82f6",
|
|
9
|
-
barCount =
|
|
9
|
+
barCount = 5,
|
|
10
10
|
speed = "normal",
|
|
11
11
|
className,
|
|
12
12
|
style,
|
|
13
|
-
testId = "pulse-
|
|
13
|
+
testId = "pulse-wave",
|
|
14
14
|
visible = true,
|
|
15
15
|
ariaLabel = "Loading...",
|
|
16
16
|
...rest
|
|
17
17
|
}, ref) => {
|
|
18
18
|
if (!visible) return null;
|
|
19
19
|
const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
|
|
20
|
-
const barWidth = Math.floor(sizeValue / (barCount * 2));
|
|
20
|
+
const barWidth = Math.floor(sizeValue / (barCount * 2.5));
|
|
21
21
|
const animationDuration = getAnimationDuration(speed);
|
|
22
22
|
return /* @__PURE__ */ jsx(
|
|
23
23
|
"div",
|
|
24
24
|
{
|
|
25
25
|
ref,
|
|
26
26
|
"data-testid": testId,
|
|
27
|
-
className: cn("inline-flex items-
|
|
27
|
+
className: cn("inline-flex items-end justify-center gap-1", className),
|
|
28
28
|
style: {
|
|
29
29
|
height: normalizeSize(size),
|
|
30
30
|
...style
|
|
@@ -34,20 +34,18 @@ const PulseBars = forwardRef(
|
|
|
34
34
|
"aria-busy": "true",
|
|
35
35
|
...rest,
|
|
36
36
|
children: Array.from({ length: barCount }).map((_, index) => {
|
|
37
|
-
const
|
|
38
|
-
const delay = delays[index % delays.length];
|
|
37
|
+
const delay = index / barCount * 0.5;
|
|
39
38
|
return /* @__PURE__ */ jsx(
|
|
40
39
|
"div",
|
|
41
40
|
{
|
|
42
41
|
className: "rounded-sm",
|
|
43
42
|
style: {
|
|
44
43
|
width: `${barWidth}px`,
|
|
45
|
-
minHeight: "30%",
|
|
46
44
|
height: "100%",
|
|
47
45
|
backgroundColor: color,
|
|
48
46
|
animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
|
|
49
47
|
animationDelay: `${delay}s`,
|
|
50
|
-
transformOrigin: "
|
|
48
|
+
transformOrigin: "bottom"
|
|
51
49
|
}
|
|
52
50
|
},
|
|
53
51
|
index
|
|
@@ -57,8 +55,8 @@ const PulseBars = forwardRef(
|
|
|
57
55
|
);
|
|
58
56
|
}
|
|
59
57
|
);
|
|
60
|
-
|
|
58
|
+
PulseWave.displayName = "PulseWave";
|
|
61
59
|
export {
|
|
62
|
-
|
|
60
|
+
PulseWave
|
|
63
61
|
};
|
|
64
62
|
//# sourceMappingURL=index22.js.map
|
package/dist/index22.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index22.js","sources":["../src/components/pulse/
|
|
1
|
+
{"version":3,"file":"index22.js","sources":["../src/components/pulse/PulseWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseWaveProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * PulseWave - Wave pattern loader\n *\n * A loader with bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <PulseWave size={40} color=\"#3b82f6\" />\n * <PulseWave size={32} barCount={7} speed=\"slow\" />\n * ```\n */\nexport const PulseWave = forwardRef<HTMLDivElement, PulseWaveProps>(\n (\n {\n size = 40,\n color = '#3b82f6',\n barCount = 5,\n speed = 'normal',\n className,\n style,\n testId = 'pulse-wave',\n visible = true,\n ariaLabel = 'Loading...',\n ...rest\n },\n ref\n ) => {\n if (!visible) return null;\n\n const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n const barWidth = Math.floor(sizeValue / (barCount * 2.5));\n const animationDuration = getAnimationDuration(speed);\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('inline-flex items-end justify-center gap-1', className)}\n style={{\n height: normalizeSize(size),\n ...style,\n }}\n role=\"status\"\n aria-label={ariaLabel}\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: barCount }).map((_, index) => {\n const delay = (index / barCount) * 0.5;\n\n return (\n <div\n key={index}\n className=\"rounded-sm\"\n style={{\n width: `${barWidth}px`,\n height: '100%',\n backgroundColor: color,\n animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n animationDelay: `${delay}s`,\n transformOrigin: 'bottom',\n }}\n />\n );\n })}\n </div>\n );\n }\n);\n\nPulseWave.displayName = 'PulseWave';\n"],"names":[],"mappings":";;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,IAAI;AACxD,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,8CAA8C,SAAS;AAAA,QACrE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,gBAAM,QAAS,QAAQ,WAAY;AAEnC,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAG,KAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YATK;AAAA,UAAA;AAAA,QAYX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}
|
package/dist/index23.cjs
CHANGED
|
@@ -1,18 +1,64 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
Object.
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const react = require("react");
|
|
5
|
+
const colors = require("./index4.cjs");
|
|
6
|
+
const classNames = require("./index3.cjs");
|
|
7
|
+
const PulseBars = react.forwardRef(
|
|
8
|
+
({
|
|
9
|
+
size = 40,
|
|
10
|
+
color = "#3b82f6",
|
|
11
|
+
barCount = 4,
|
|
12
|
+
speed = "normal",
|
|
13
|
+
className,
|
|
14
|
+
style,
|
|
15
|
+
testId = "pulse-bars",
|
|
16
|
+
visible = true,
|
|
17
|
+
ariaLabel = "Loading...",
|
|
18
|
+
...rest
|
|
19
|
+
}, ref) => {
|
|
20
|
+
if (!visible) return null;
|
|
21
|
+
const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
|
|
22
|
+
const barWidth = Math.floor(sizeValue / (barCount * 2));
|
|
23
|
+
const animationDuration = colors.getAnimationDuration(speed);
|
|
24
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
|
+
"div",
|
|
26
|
+
{
|
|
27
|
+
ref,
|
|
28
|
+
"data-testid": testId,
|
|
29
|
+
className: classNames.cn("inline-flex items-center justify-center gap-1", className),
|
|
30
|
+
style: {
|
|
31
|
+
height: colors.normalizeSize(size),
|
|
32
|
+
...style
|
|
33
|
+
},
|
|
34
|
+
role: "status",
|
|
35
|
+
"aria-label": ariaLabel,
|
|
36
|
+
"aria-busy": "true",
|
|
37
|
+
...rest,
|
|
38
|
+
children: Array.from({ length: barCount }).map((_, index) => {
|
|
39
|
+
const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];
|
|
40
|
+
const delay = delays[index % delays.length];
|
|
41
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
className: "rounded-sm",
|
|
45
|
+
style: {
|
|
46
|
+
width: `${barWidth}px`,
|
|
47
|
+
minHeight: "30%",
|
|
48
|
+
height: "100%",
|
|
49
|
+
backgroundColor: color,
|
|
50
|
+
animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
|
|
51
|
+
animationDelay: `${delay}s`,
|
|
52
|
+
transformOrigin: "center"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
index
|
|
56
|
+
);
|
|
57
|
+
})
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
PulseBars.displayName = "PulseBars";
|
|
63
|
+
exports.PulseBars = PulseBars;
|
|
18
64
|
//# sourceMappingURL=index23.cjs.map
|
package/dist/index23.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index23.cjs","sources":["../
|
|
1
|
+
{"version":3,"file":"index23.cjs","sources":["../src/components/pulse/PulseBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseBarsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * PulseBars - Equalizer-style bars loader\n *\n * A loader with bars that pulse like an audio equalizer.\n *\n * @example\n * ```tsx\n * <PulseBars size={40} color=\"#3b82f6\" />\n * <PulseBars size={48} barCount={6} speed=\"fast\" />\n * ```\n */\nexport const PulseBars = forwardRef<HTMLDivElement, PulseBarsProps>(\n (\n {\n size = 40,\n color = '#3b82f6',\n barCount = 4,\n speed = 'normal',\n className,\n style,\n testId = 'pulse-bars',\n visible = true,\n ariaLabel = 'Loading...',\n ...rest\n },\n ref\n ) => {\n if (!visible) return null;\n\n const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n const barWidth = Math.floor(sizeValue / (barCount * 2));\n const animationDuration = getAnimationDuration(speed);\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('inline-flex items-center justify-center gap-1', className)}\n style={{\n height: normalizeSize(size),\n ...style,\n }}\n role=\"status\"\n aria-label={ariaLabel}\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: barCount }).map((_, index) => {\n // Random-looking delays for equalizer effect\n const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];\n const delay = delays[index % delays.length];\n\n return (\n <div\n key={index}\n className=\"rounded-sm\"\n style={{\n width: `${barWidth}px`,\n minHeight: '30%',\n height: '100%',\n backgroundColor: color,\n animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n animationDelay: `${delay}s`,\n transformOrigin: 'center',\n }}\n />\n );\n })}\n </div>\n );\n }\n);\n\nPulseBars.displayName = 'PulseBars';\n"],"names":["forwardRef","getAnimationDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;AAeO,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,EAAE;AACtD,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAElD,gBAAM,SAAS,CAAC,GAAG,KAAK,KAAK,KAAK,KAAK,GAAG;AAC1C,gBAAM,QAAQ,OAAO,QAAQ,OAAO,MAAM;AAE1C,iBACEF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,WAAW;AAAA,gBACX,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAG,KAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YAVK;AAAA,UAAA;AAAA,QAaX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;;"}
|
package/dist/index23.js
CHANGED
|
@@ -1,18 +1,64 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { normalizeSize, getAnimationDuration } from "./index4.js";
|
|
4
|
+
import { cn } from "./index3.js";
|
|
5
|
+
const PulseBars = forwardRef(
|
|
6
|
+
({
|
|
7
|
+
size = 40,
|
|
8
|
+
color = "#3b82f6",
|
|
9
|
+
barCount = 4,
|
|
10
|
+
speed = "normal",
|
|
11
|
+
className,
|
|
12
|
+
style,
|
|
13
|
+
testId = "pulse-bars",
|
|
14
|
+
visible = true,
|
|
15
|
+
ariaLabel = "Loading...",
|
|
16
|
+
...rest
|
|
17
|
+
}, ref) => {
|
|
18
|
+
if (!visible) return null;
|
|
19
|
+
const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
|
|
20
|
+
const barWidth = Math.floor(sizeValue / (barCount * 2));
|
|
21
|
+
const animationDuration = getAnimationDuration(speed);
|
|
22
|
+
return /* @__PURE__ */ jsx(
|
|
23
|
+
"div",
|
|
24
|
+
{
|
|
25
|
+
ref,
|
|
26
|
+
"data-testid": testId,
|
|
27
|
+
className: cn("inline-flex items-center justify-center gap-1", className),
|
|
28
|
+
style: {
|
|
29
|
+
height: normalizeSize(size),
|
|
30
|
+
...style
|
|
31
|
+
},
|
|
32
|
+
role: "status",
|
|
33
|
+
"aria-label": ariaLabel,
|
|
34
|
+
"aria-busy": "true",
|
|
35
|
+
...rest,
|
|
36
|
+
children: Array.from({ length: barCount }).map((_, index) => {
|
|
37
|
+
const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];
|
|
38
|
+
const delay = delays[index % delays.length];
|
|
39
|
+
return /* @__PURE__ */ jsx(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
className: "rounded-sm",
|
|
43
|
+
style: {
|
|
44
|
+
width: `${barWidth}px`,
|
|
45
|
+
minHeight: "30%",
|
|
46
|
+
height: "100%",
|
|
47
|
+
backgroundColor: color,
|
|
48
|
+
animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
|
|
49
|
+
animationDelay: `${delay}s`,
|
|
50
|
+
transformOrigin: "center"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
index
|
|
54
|
+
);
|
|
55
|
+
})
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
PulseBars.displayName = "PulseBars";
|
|
14
61
|
export {
|
|
15
|
-
|
|
16
|
-
clsx as default
|
|
62
|
+
PulseBars
|
|
17
63
|
};
|
|
18
64
|
//# sourceMappingURL=index23.js.map
|
package/dist/index23.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index23.js","sources":["../
|
|
1
|
+
{"version":3,"file":"index23.js","sources":["../src/components/pulse/PulseBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseBarsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * PulseBars - Equalizer-style bars loader\n *\n * A loader with bars that pulse like an audio equalizer.\n *\n * @example\n * ```tsx\n * <PulseBars size={40} color=\"#3b82f6\" />\n * <PulseBars size={48} barCount={6} speed=\"fast\" />\n * ```\n */\nexport const PulseBars = forwardRef<HTMLDivElement, PulseBarsProps>(\n (\n {\n size = 40,\n color = '#3b82f6',\n barCount = 4,\n speed = 'normal',\n className,\n style,\n testId = 'pulse-bars',\n visible = true,\n ariaLabel = 'Loading...',\n ...rest\n },\n ref\n ) => {\n if (!visible) return null;\n\n const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n const barWidth = Math.floor(sizeValue / (barCount * 2));\n const animationDuration = getAnimationDuration(speed);\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('inline-flex items-center justify-center gap-1', className)}\n style={{\n height: normalizeSize(size),\n ...style,\n }}\n role=\"status\"\n aria-label={ariaLabel}\n aria-busy=\"true\"\n {...rest}\n >\n {Array.from({ length: barCount }).map((_, index) => {\n // Random-looking delays for equalizer effect\n const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];\n const delay = delays[index % delays.length];\n\n return (\n <div\n key={index}\n className=\"rounded-sm\"\n style={{\n width: `${barWidth}px`,\n minHeight: '30%',\n height: '100%',\n backgroundColor: color,\n animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n animationDelay: `${delay}s`,\n transformOrigin: 'center',\n }}\n />\n );\n })}\n </div>\n );\n }\n);\n\nPulseBars.displayName = 'PulseBars';\n"],"names":[],"mappings":";;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,EAAE;AACtD,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAElD,gBAAM,SAAS,CAAC,GAAG,KAAK,KAAK,KAAK,KAAK,GAAG;AAC1C,gBAAM,QAAQ,OAAO,QAAQ,OAAO,MAAM;AAE1C,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,WAAW;AAAA,gBACX,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAG,KAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YAVK;AAAA,UAAA;AAAA,QAaX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}
|
package/dist/index24.cjs
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const react = require("react");
|
|
5
|
+
const classNames = require("./index3.cjs");
|
|
6
|
+
const LoaderOverlay = react.forwardRef(
|
|
7
|
+
({
|
|
8
|
+
loading = false,
|
|
9
|
+
loader,
|
|
10
|
+
children,
|
|
11
|
+
position = "fixed",
|
|
12
|
+
backdropOpacity = 0.5,
|
|
13
|
+
backdropColor = "#000000",
|
|
14
|
+
blur = false,
|
|
15
|
+
className,
|
|
16
|
+
style,
|
|
17
|
+
testId = "loader-overlay",
|
|
18
|
+
ariaLabel = "Loading content...",
|
|
19
|
+
zIndex = 9999,
|
|
20
|
+
...rest
|
|
21
|
+
}, ref) => {
|
|
22
|
+
const backdropStyles = {
|
|
23
|
+
backgroundColor: backdropColor,
|
|
24
|
+
opacity: backdropOpacity,
|
|
25
|
+
backdropFilter: blur ? "blur(4px)" : void 0,
|
|
26
|
+
WebkitBackdropFilter: blur ? "blur(4px)" : void 0
|
|
27
|
+
};
|
|
28
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
29
|
+
"div",
|
|
30
|
+
{
|
|
31
|
+
ref,
|
|
32
|
+
"data-testid": testId,
|
|
33
|
+
className: classNames.cn("relative", className),
|
|
34
|
+
style,
|
|
35
|
+
...rest,
|
|
36
|
+
children: [
|
|
37
|
+
children,
|
|
38
|
+
loading && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
39
|
+
"div",
|
|
40
|
+
{
|
|
41
|
+
className: classNames.cn(
|
|
42
|
+
"inset-0 flex items-center justify-center",
|
|
43
|
+
position === "fixed" ? "fixed" : "absolute"
|
|
44
|
+
),
|
|
45
|
+
style: {
|
|
46
|
+
zIndex
|
|
47
|
+
},
|
|
48
|
+
role: "status",
|
|
49
|
+
"aria-label": ariaLabel,
|
|
50
|
+
"aria-busy": "true",
|
|
51
|
+
children: [
|
|
52
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
53
|
+
"div",
|
|
54
|
+
{
|
|
55
|
+
className: "absolute inset-0",
|
|
56
|
+
style: backdropStyles,
|
|
57
|
+
"aria-hidden": "true"
|
|
58
|
+
}
|
|
59
|
+
),
|
|
60
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: loader })
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
)
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
LoaderOverlay.displayName = "LoaderOverlay";
|
|
70
|
+
exports.LoaderOverlay = LoaderOverlay;
|
|
71
|
+
//# sourceMappingURL=index24.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index24.cjs","sources":["../src/components/overlay/LoaderOverlay.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { LoaderOverlayProps } from '../../types';\nimport { cn } from '../../utils';\n\n/**\n * LoaderOverlay - Overlay wrapper for displaying loaders over content\n *\n * A flexible overlay component that displays a loader over content during loading states.\n * Supports both full-screen and container-relative positioning.\n *\n * @example\n * ```tsx\n * // Full screen overlay\n * <LoaderOverlay loading={isLoading} loader={<SpinnerCircle />}>\n * <YourContent />\n * </LoaderOverlay>\n *\n * // Container overlay with custom backdrop\n * <LoaderOverlay\n * loading={isLoading}\n * loader={<SpinnerRing />}\n * position=\"absolute\"\n * backdropOpacity={0.7}\n * blur\n * >\n * <YourContent />\n * </LoaderOverlay>\n * ```\n */\nexport const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(\n (\n {\n loading = false,\n loader,\n children,\n position = 'fixed',\n backdropOpacity = 0.5,\n backdropColor = '#000000',\n blur = false,\n className,\n style,\n testId = 'loader-overlay',\n ariaLabel = 'Loading content...',\n zIndex = 9999,\n ...rest\n },\n ref\n ) => {\n const backdropStyles = {\n backgroundColor: backdropColor,\n opacity: backdropOpacity,\n backdropFilter: blur ? 'blur(4px)' : undefined,\n WebkitBackdropFilter: blur ? 'blur(4px)' : undefined,\n };\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('relative', className)}\n style={style}\n {...rest}\n >\n {children}\n\n {loading && (\n <div\n className={cn(\n 'inset-0 flex items-center justify-center',\n position === 'fixed' ? 'fixed' : 'absolute'\n )}\n style={{\n zIndex,\n }}\n role=\"status\"\n aria-label={ariaLabel}\n aria-busy=\"true\"\n >\n {/* Backdrop */}\n <div\n className=\"absolute inset-0\"\n style={backdropStyles}\n aria-hidden=\"true\"\n />\n\n {/* Loader */}\n <div className=\"relative z-10\">{loader}</div>\n </div>\n )}\n </div>\n );\n }\n);\n\nLoaderOverlay.displayName = 'LoaderOverlay';\n"],"names":["forwardRef","jsxs","cn","jsx"],"mappings":";;;;;AA6BO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB;AAAA,MACrB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,gBAAgB,OAAO,cAAc;AAAA,MACrC,sBAAsB,OAAO,cAAc;AAAA,IAAA;AAG7C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,YAAY,SAAS;AAAA,QACnC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UAEA,WACCD,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,WAAAA;AAAAA,gBACT;AAAA,gBACA,aAAa,UAAU,UAAU;AAAA,cAAA;AAAA,cAEnC,OAAO;AAAA,gBACL;AAAA,cAAA;AAAA,cAEF,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,aAAU;AAAA,cAGV,UAAA;AAAA,gBAAAC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,oBACP,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAIdA,2BAAAA,IAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,cAAc,cAAc;;"}
|
package/dist/index24.js
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { cn } from "./index3.js";
|
|
4
|
+
const LoaderOverlay = forwardRef(
|
|
5
|
+
({
|
|
6
|
+
loading = false,
|
|
7
|
+
loader,
|
|
8
|
+
children,
|
|
9
|
+
position = "fixed",
|
|
10
|
+
backdropOpacity = 0.5,
|
|
11
|
+
backdropColor = "#000000",
|
|
12
|
+
blur = false,
|
|
13
|
+
className,
|
|
14
|
+
style,
|
|
15
|
+
testId = "loader-overlay",
|
|
16
|
+
ariaLabel = "Loading content...",
|
|
17
|
+
zIndex = 9999,
|
|
18
|
+
...rest
|
|
19
|
+
}, ref) => {
|
|
20
|
+
const backdropStyles = {
|
|
21
|
+
backgroundColor: backdropColor,
|
|
22
|
+
opacity: backdropOpacity,
|
|
23
|
+
backdropFilter: blur ? "blur(4px)" : void 0,
|
|
24
|
+
WebkitBackdropFilter: blur ? "blur(4px)" : void 0
|
|
25
|
+
};
|
|
26
|
+
return /* @__PURE__ */ jsxs(
|
|
27
|
+
"div",
|
|
28
|
+
{
|
|
29
|
+
ref,
|
|
30
|
+
"data-testid": testId,
|
|
31
|
+
className: cn("relative", className),
|
|
32
|
+
style,
|
|
33
|
+
...rest,
|
|
34
|
+
children: [
|
|
35
|
+
children,
|
|
36
|
+
loading && /* @__PURE__ */ jsxs(
|
|
37
|
+
"div",
|
|
38
|
+
{
|
|
39
|
+
className: cn(
|
|
40
|
+
"inset-0 flex items-center justify-center",
|
|
41
|
+
position === "fixed" ? "fixed" : "absolute"
|
|
42
|
+
),
|
|
43
|
+
style: {
|
|
44
|
+
zIndex
|
|
45
|
+
},
|
|
46
|
+
role: "status",
|
|
47
|
+
"aria-label": ariaLabel,
|
|
48
|
+
"aria-busy": "true",
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ jsx(
|
|
51
|
+
"div",
|
|
52
|
+
{
|
|
53
|
+
className: "absolute inset-0",
|
|
54
|
+
style: backdropStyles,
|
|
55
|
+
"aria-hidden": "true"
|
|
56
|
+
}
|
|
57
|
+
),
|
|
58
|
+
/* @__PURE__ */ jsx("div", { className: "relative z-10", children: loader })
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
LoaderOverlay.displayName = "LoaderOverlay";
|
|
68
|
+
export {
|
|
69
|
+
LoaderOverlay
|
|
70
|
+
};
|
|
71
|
+
//# sourceMappingURL=index24.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index24.js","sources":["../src/components/overlay/LoaderOverlay.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { LoaderOverlayProps } from '../../types';\nimport { cn } from '../../utils';\n\n/**\n * LoaderOverlay - Overlay wrapper for displaying loaders over content\n *\n * A flexible overlay component that displays a loader over content during loading states.\n * Supports both full-screen and container-relative positioning.\n *\n * @example\n * ```tsx\n * // Full screen overlay\n * <LoaderOverlay loading={isLoading} loader={<SpinnerCircle />}>\n * <YourContent />\n * </LoaderOverlay>\n *\n * // Container overlay with custom backdrop\n * <LoaderOverlay\n * loading={isLoading}\n * loader={<SpinnerRing />}\n * position=\"absolute\"\n * backdropOpacity={0.7}\n * blur\n * >\n * <YourContent />\n * </LoaderOverlay>\n * ```\n */\nexport const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(\n (\n {\n loading = false,\n loader,\n children,\n position = 'fixed',\n backdropOpacity = 0.5,\n backdropColor = '#000000',\n blur = false,\n className,\n style,\n testId = 'loader-overlay',\n ariaLabel = 'Loading content...',\n zIndex = 9999,\n ...rest\n },\n ref\n ) => {\n const backdropStyles = {\n backgroundColor: backdropColor,\n opacity: backdropOpacity,\n backdropFilter: blur ? 'blur(4px)' : undefined,\n WebkitBackdropFilter: blur ? 'blur(4px)' : undefined,\n };\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n className={cn('relative', className)}\n style={style}\n {...rest}\n >\n {children}\n\n {loading && (\n <div\n className={cn(\n 'inset-0 flex items-center justify-center',\n position === 'fixed' ? 'fixed' : 'absolute'\n )}\n style={{\n zIndex,\n }}\n role=\"status\"\n aria-label={ariaLabel}\n aria-busy=\"true\"\n >\n {/* Backdrop */}\n <div\n className=\"absolute inset-0\"\n style={backdropStyles}\n aria-hidden=\"true\"\n />\n\n {/* Loader */}\n <div className=\"relative z-10\">{loader}</div>\n </div>\n )}\n </div>\n );\n }\n);\n\nLoaderOverlay.displayName = 'LoaderOverlay';\n"],"names":[],"mappings":";;;AA6BO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB;AAAA,MACrB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,gBAAgB,OAAO,cAAc;AAAA,MACrC,sBAAsB,OAAO,cAAc;AAAA,IAAA;AAG7C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UAEA,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,aAAa,UAAU,UAAU;AAAA,cAAA;AAAA,cAEnC,OAAO;AAAA,gBACL;AAAA,cAAA;AAAA,cAEF,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,aAAU;AAAA,cAGV,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,oBACP,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAId,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,cAAc,cAAc;"}
|
package/dist/index25.cjs
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
function r(e) {
|
|
4
|
+
var t, f, n = "";
|
|
5
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
6
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
7
|
+
var o = e.length;
|
|
8
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
9
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
10
|
+
return n;
|
|
11
|
+
}
|
|
12
|
+
function clsx() {
|
|
13
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
14
|
+
return n;
|
|
15
|
+
}
|
|
16
|
+
exports.clsx = clsx;
|
|
17
|
+
exports.default = clsx;
|
|
18
|
+
//# sourceMappingURL=index25.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index25.cjs","sources":["../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":[],"mappings":";;AAAA,SAAS,EAAE,GAAE;AAAC,MAAI,GAAE,GAAE,IAAE;AAAG,MAAG,YAAU,OAAO,KAAG,YAAU,OAAO,EAAE,MAAG;AAAA,WAAU,YAAU,OAAO,EAAE,KAAG,MAAM,QAAQ,CAAC,GAAE;AAAC,QAAI,IAAE,EAAE;AAAO,SAAI,IAAE,GAAE,IAAE,GAAE,IAAI,GAAE,CAAC,MAAI,IAAE,EAAE,EAAE,CAAC,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAA,EAAE,MAAM,MAAI,KAAK,EAAE,GAAE,CAAC,MAAI,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAQ,SAAS,OAAM;AAAC,WAAQ,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE,IAAI,EAAC,IAAE,UAAU,CAAC,OAAK,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;;;","x_google_ignoreList":[0]}
|
package/dist/index25.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
function r(e) {
|
|
2
|
+
var t, f, n = "";
|
|
3
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
4
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
5
|
+
var o = e.length;
|
|
6
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
7
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
8
|
+
return n;
|
|
9
|
+
}
|
|
10
|
+
function clsx() {
|
|
11
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
12
|
+
return n;
|
|
13
|
+
}
|
|
14
|
+
export {
|
|
15
|
+
clsx,
|
|
16
|
+
clsx as default
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=index25.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index25.js","sources":["../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":[],"mappings":"AAAA,SAAS,EAAE,GAAE;AAAC,MAAI,GAAE,GAAE,IAAE;AAAG,MAAG,YAAU,OAAO,KAAG,YAAU,OAAO,EAAE,MAAG;AAAA,WAAU,YAAU,OAAO,EAAE,KAAG,MAAM,QAAQ,CAAC,GAAE;AAAC,QAAI,IAAE,EAAE;AAAO,SAAI,IAAE,GAAE,IAAE,GAAE,IAAI,GAAE,CAAC,MAAI,IAAE,EAAE,EAAE,CAAC,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAA,EAAE,MAAM,MAAI,KAAK,EAAE,GAAE,CAAC,MAAI,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAQ,SAAS,OAAM;AAAC,WAAQ,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE,IAAI,EAAC,IAAE,UAAU,CAAC,OAAK,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;","x_google_ignoreList":[0]}
|
package/dist/index3.cjs
CHANGED
package/dist/index3.js
CHANGED