premium-react-loaders 2.3.1 → 3.1.0

package/dist/index21.js

@@ -1,14 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index36.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
-import { normalizeSize } from "./index4.js";
-const SpinnerWave = forwardRef(
+const SpinnerBars = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    ripples = 3,
-    maxScale = 2,
+    barCount = 5,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -17,7 +16,7 @@ const SpinnerWave = forwardRef(
     transition,
     className,
     style,
-    testId = "spinner-wave",
+    testId = "spinner-bars",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -31,14 +30,16 @@ const SpinnerWave = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const sizeValue = normalizeSize(size);
+    const sizeValue = parseSizeToNumber(size, 40);
+    const barWidth = Math.floor(sizeValue / (barCount * 2));
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
+        className: cn("inline-flex items-center justify-center gap-1", className),
         style: {
+          height: normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
@@ -47,36 +48,25 @@ const SpinnerWave = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx(
+        children: Array.from({ length: barCount }).map((_, index) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: "relative",
+            className: "rounded-sm",
             style: {
-              width: sizeValue,
-              height: sizeValue
-            },
-            children: Array.from({ length: ripples }).map((_, index) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "absolute inset-0 rounded-full border-2",
-                style: {
-                  borderColor: color,
-                  animation: `ripple-expand ${effectiveDuration} ease-out infinite`,
-                  animationDelay: reverse ? `${(ripples - index - 1) * 0.4}s` : `${index * 0.4}s`,
-                  animationDirection: reverse ? "reverse" : "normal",
-                  // @ts-ignore - CSS variable for animation
-                  "--max-scale": maxScale
-                }
-              },
-              index
-            ))
-          }
-        )
+              width: `${barWidth}px`,
+              height: "100%",
+              backgroundColor: color,
+              animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(barCount - index - 1) * 0.1}s` : `${index * 0.1}s`
+            }
+          },
+          index
+        ))
       }
     );
   }
 );
-SpinnerWave.displayName = "SpinnerWave";
+SpinnerBars.displayName = "SpinnerBars";
 export {
-  SpinnerWave
+  SpinnerBars
 };

package/dist/index22.cjs

@@ -2,15 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index36.cjs");
+const hooks = require("./index56.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
-const SpinnerPulse = react.forwardRef(
+const SpinnerGrid = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    pulses = 2,
-    maxScale = 1.8,
+    gridSize = 3,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -19,7 +18,7 @@ const SpinnerPulse = react.forwardRef(
     transition,
     className,
     style,
-    testId = "spinner-pulse",
+    testId = "spinner-grid",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -33,7 +32,8 @@ const SpinnerPulse = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const sizeValue = colors.normalizeSize(size);
+    const sizeValue = colors.parseSizeToNumber(size, 40);
+    const cellSize = Math.floor(sizeValue / gridSize) - 2;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -49,49 +49,40 @@ const SpinnerPulse = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
+        children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "relative",
+            className: "grid gap-0.5",
             style: {
-              width: sizeValue,
-              height: sizeValue
+              width: colors.normalizeSize(size),
+              height: colors.normalizeSize(size),
+              gridTemplateColumns: `repeat(${gridSize}, 1fr)`
             },
-            children: [
-              Array.from({ length: pulses }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            children: Array.from({ length: gridSize * gridSize }).map((_, index) => {
+              const row = Math.floor(index / gridSize);
+              const col = index % gridSize;
+              const maxDelay = (gridSize - 1) * 2;
+              const delay2 = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;
+              return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: "absolute inset-0 rounded-full",
+                  className: "rounded-sm",
                   style: {
+                    width: `${cellSize}px`,
+                    height: `${cellSize}px`,
                     backgroundColor: color,
-                    animation: `heartbeat-pulse ${effectiveDuration} ease-out infinite`,
-                    animationDelay: reverse ? `${(pulses - index - 1) * 0.3}s` : `${index * 0.3}s`,
-                    animationDirection: reverse ? "reverse" : "normal",
-                    // @ts-ignore - CSS variable for animation
-                    "--max-scale": maxScale
+                    animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,
+                    animationDelay: `${delay2}s`
                   }
                 },
                 index
-              )),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "absolute rounded-full",
-                  style: {
-                    backgroundColor: color,
-                    width: "50%",
-                    height: "50%",
-                    top: "25%",
-                    left: "25%"
-                  }
-                }
-              )
-            ]
+              );
+            })
           }
         )
       }
     );
   }
 );
-SpinnerPulse.displayName = "SpinnerPulse";
-exports.SpinnerPulse = SpinnerPulse;
+SpinnerGrid.displayName = "SpinnerGrid";
+exports.SpinnerGrid = SpinnerGrid;

package/dist/index22.js

@@ -1,14 +1,13 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index36.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
 import { cn } from "./index3.js";
-import { normalizeSize } from "./index4.js";
-const SpinnerPulse = forwardRef(
+import { normalizeSize, parseSizeToNumber } from "./index4.js";
+const SpinnerGrid = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    pulses = 2,
-    maxScale = 1.8,
+    gridSize = 3,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -17,7 +16,7 @@ const SpinnerPulse = forwardRef(
     transition,
     className,
     style,
-    testId = "spinner-pulse",
+    testId = "spinner-grid",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -31,7 +30,8 @@ const SpinnerPulse = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const sizeValue = normalizeSize(size);
+    const sizeValue = parseSizeToNumber(size, 40);
+    const cellSize = Math.floor(sizeValue / gridSize) - 2;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -47,51 +47,42 @@ const SpinnerPulse = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "relative",
+            className: "grid gap-0.5",
             style: {
-              width: sizeValue,
-              height: sizeValue
+              width: normalizeSize(size),
+              height: normalizeSize(size),
+              gridTemplateColumns: `repeat(${gridSize}, 1fr)`
             },
-            children: [
-              Array.from({ length: pulses }).map((_, index) => /* @__PURE__ */ jsx(
+            children: Array.from({ length: gridSize * gridSize }).map((_, index) => {
+              const row = Math.floor(index / gridSize);
+              const col = index % gridSize;
+              const maxDelay = (gridSize - 1) * 2;
+              const delay2 = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;
+              return /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "absolute inset-0 rounded-full",
+                  className: "rounded-sm",
                   style: {
+                    width: `${cellSize}px`,
+                    height: `${cellSize}px`,
                     backgroundColor: color,
-                    animation: `heartbeat-pulse ${effectiveDuration} ease-out infinite`,
-                    animationDelay: reverse ? `${(pulses - index - 1) * 0.3}s` : `${index * 0.3}s`,
-                    animationDirection: reverse ? "reverse" : "normal",
-                    // @ts-ignore - CSS variable for animation
-                    "--max-scale": maxScale
+                    animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,
+                    animationDelay: `${delay2}s`
                   }
                 },
                 index
-              )),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "absolute rounded-full",
-                  style: {
-                    backgroundColor: color,
-                    width: "50%",
-                    height: "50%",
-                    top: "25%",
-                    left: "25%"
-                  }
-                }
-              )
-            ]
+              );
+            })
           }
         )
       }
     );
   }
 );
-SpinnerPulse.displayName = "SpinnerPulse";
+SpinnerGrid.displayName = "SpinnerGrid";
 export {
-  SpinnerPulse
+  SpinnerGrid
 };

package/dist/index23.cjs

@@ -2,19 +2,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const colors = require("./index4.cjs");
-const hooks = require("./index36.cjs");
+const hooks = require("./index56.cjs");
 const classNames = require("./index3.cjs");
-const ProgressBar = react.forwardRef(
+const colors = require("./index4.cjs");
+const SpinnerWave = react.forwardRef(
   ({
-    value = 0,
-    indeterminate = false,
-    showValue = false,
-    height = "0.5rem",
+    size = "md",
     color = "#3b82f6",
-    secondaryColor = "#e0e0e0",
-    gradient = false,
-    buffer,
+    ripples = 3,
+    maxScale = 2,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -23,14 +19,13 @@ const ProgressBar = react.forwardRef(
     transition,
     className,
     style,
-    testId = "progress-bar",
+    testId = "spinner-wave",
     visible = true,
-    ariaLabel,
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const gradientId = react.useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
       visible,
       delay,
@@ -38,81 +33,50 @@ const ProgressBar = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const clampedValue = Math.min(100, Math.max(0, value));
-    const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
-    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const sizeValue = colors.normalizeSize(size);
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("relative w-full overflow-hidden rounded-full", className),
+        className: classNames.cn("inline-flex items-center justify-center", className),
         style: {
-          height: colors.normalizeSize(height),
-          backgroundColor: secondaryColor,
           ...style,
           opacity,
           transition: transitionStyle
         },
-        role: "progressbar",
-        "aria-label": progressLabel,
-        "aria-valuenow": indeterminate ? void 0 : clampedValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
         ...rest,
-        children: [
-          gradient && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color }),
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: secondaryColor || "#8b5cf6" })
-          ] }) }) }),
-          clampedBuffer !== void 0 && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "absolute h-full rounded-full opacity-30",
-              style: {
-                width: `${clampedBuffer}%`,
-                backgroundColor: color
-              }
-            }
-          ),
-          indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "absolute h-full rounded-full",
-              style: {
-                backgroundColor: gradient ? `url(#${gradientId})` : color,
-                animation: `progress-indeterminate ${effectiveDuration} ease-in-out infinite`,
-                animationDirection: reverse ? "reverse" : "normal",
-                width: "40%"
-              }
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "h-full rounded-full transition-all duration-300 ease-in-out",
-              style: {
-                width: `${clampedValue}%`,
-                background: gradient ? `url(#${gradientId})` : color
-              }
-            }
-          ),
-          showValue && !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: "absolute inset-0 flex items-center justify-center text-xs font-medium",
-              style: {
-                color: clampedValue > 50 ? colors.getContrastColor(color) : secondaryColor === "#e0e0e0" ? "#000000" : colors.getContrastColor(secondaryColor)
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "relative",
+            style: {
+              width: sizeValue,
+              height: sizeValue
+            },
+            children: Array.from({ length: ripples }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute inset-0 rounded-full border-2",
+                style: {
+                  borderColor: color,
+                  animation: `ripple-expand ${effectiveDuration} ease-out infinite`,
+                  animationDelay: reverse ? `${(ripples - index - 1) * 0.4}s` : `${index * 0.4}s`,
+                  animationDirection: reverse ? "reverse" : "normal",
+                  // @ts-ignore - CSS variable for animation
+                  "--max-scale": maxScale
+                }
               },
-              children: [
-                clampedValue,
-                "%"
-              ]
-            }
-          )
-        ]
+              index
+            ))
+          }
+        )
       }
     );
   }
 );
-ProgressBar.displayName = "ProgressBar";
-exports.ProgressBar = ProgressBar;
+SpinnerWave.displayName = "SpinnerWave";
+exports.SpinnerWave = SpinnerWave;

package/dist/index23.js

@@ -1,18 +1,14 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { normalizeSize, getContrastColor } from "./index4.js";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index36.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
 import { cn } from "./index3.js";
-const ProgressBar = forwardRef(
+import { normalizeSize } from "./index4.js";
+const SpinnerWave = forwardRef(
   ({
-    value = 0,
-    indeterminate = false,
-    showValue = false,
-    height = "0.5rem",
+    size = "md",
     color = "#3b82f6",
-    secondaryColor = "#e0e0e0",
-    gradient = false,
-    buffer,
+    ripples = 3,
+    maxScale = 2,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -21,14 +17,13 @@ const ProgressBar = forwardRef(
     transition,
     className,
     style,
-    testId = "progress-bar",
+    testId = "spinner-wave",
     visible = true,
-    ariaLabel,
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
@@ -36,83 +31,52 @@ const ProgressBar = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const clampedValue = Math.min(100, Math.max(0, value));
-    const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
-    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    return /* @__PURE__ */ jsxs(
+    const sizeValue = normalizeSize(size);
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("relative w-full overflow-hidden rounded-full", className),
+        className: cn("inline-flex items-center justify-center", className),
         style: {
-          height: normalizeSize(height),
-          backgroundColor: secondaryColor,
           ...style,
           opacity,
           transition: transitionStyle
         },
-        role: "progressbar",
-        "aria-label": progressLabel,
-        "aria-valuenow": indeterminate ? void 0 : clampedValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
         ...rest,
-        children: [
-          gradient && !indeterminate && /* @__PURE__ */ jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color }),
-            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: secondaryColor || "#8b5cf6" })
-          ] }) }) }),
-          clampedBuffer !== void 0 && !indeterminate && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute h-full rounded-full opacity-30",
-              style: {
-                width: `${clampedBuffer}%`,
-                backgroundColor: color
-              }
-            }
-          ),
-          indeterminate ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute h-full rounded-full",
-              style: {
-                backgroundColor: gradient ? `url(#${gradientId})` : color,
-                animation: `progress-indeterminate ${effectiveDuration} ease-in-out infinite`,
-                animationDirection: reverse ? "reverse" : "normal",
-                width: "40%"
-              }
-            }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "h-full rounded-full transition-all duration-300 ease-in-out",
-              style: {
-                width: `${clampedValue}%`,
-                background: gradient ? `url(#${gradientId})` : color
-              }
-            }
-          ),
-          showValue && !indeterminate && /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: "absolute inset-0 flex items-center justify-center text-xs font-medium",
-              style: {
-                color: clampedValue > 50 ? getContrastColor(color) : secondaryColor === "#e0e0e0" ? "#000000" : getContrastColor(secondaryColor)
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative",
+            style: {
+              width: sizeValue,
+              height: sizeValue
+            },
+            children: Array.from({ length: ripples }).map((_, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute inset-0 rounded-full border-2",
+                style: {
+                  borderColor: color,
+                  animation: `ripple-expand ${effectiveDuration} ease-out infinite`,
+                  animationDelay: reverse ? `${(ripples - index - 1) * 0.4}s` : `${index * 0.4}s`,
+                  animationDirection: reverse ? "reverse" : "normal",
+                  // @ts-ignore - CSS variable for animation
+                  "--max-scale": maxScale
+                }
               },
-              children: [
-                clampedValue,
-                "%"
-              ]
-            }
-          )
-        ]
+              index
+            ))
+          }
+        )
       }
     );
   }
 );
-ProgressBar.displayName = "ProgressBar";
+SpinnerWave.displayName = "SpinnerWave";
 export {
-  ProgressBar
+  SpinnerWave
 };