premium-react-loaders 1.3.0 → 2.1.0

package/dist/index16.js

@@ -1,14 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize, parseSizeToNumber } from "./index4.js";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index32.js";
 import { cn } from "./index3.js";
-const SpinnerDots = forwardRef(
+import { normalizeSize } from "./index4.js";
+const SpinnerCircle = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    dotCount = 8,
-    dotSize = 4,
+    thickness = 4,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -17,7 +16,7 @@ const SpinnerDots = forwardRef(
     transition,
     className,
     style,
-    testId = "spinner-dots",
+    testId = "spinner-circle",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -31,9 +30,6 @@ const SpinnerDots = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const sizeValue = parseSizeToNumber(size, 40);
-    const dotSizeValue = parseSizeToNumber(dotSize, 4);
-    const radius = (sizeValue - dotSizeValue) / 2;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -50,45 +46,36 @@ const SpinnerDots = forwardRef(
         "aria-busy": "true",
         ...rest,
         children: /* @__PURE__ */ jsx(
-          "div",
+          "svg",
           {
-            className: "relative",
+            className: "animate-spinner-rotate",
             style: {
               width: normalizeSize(size),
               height: normalizeSize(size),
-              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+              animationDuration: effectiveDuration,
               animationDirection: reverse ? "reverse" : "normal"
             },
-            children: Array.from({ length: dotCount }).map((_, index) => {
-              const angle = 360 / dotCount * index;
-              const radian = angle * Math.PI / 180;
-              const x = radius * Math.cos(radian) + radius;
-              const y = radius * Math.sin(radian) + radius;
-              return /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "absolute rounded-full",
-                  style: {
-                    width: normalizeSize(dotSize),
-                    height: normalizeSize(dotSize),
-                    backgroundColor: color,
-                    left: `${x}px`,
-                    top: `${y}px`,
-                    opacity: 1 - index / dotCount * 0.7
-                    // Fade effect
-                  }
-                },
-                index
-              );
-            })
+            viewBox: "0 0 50 50",
+            children: /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "25",
+                cy: "25",
+                r: 25 - thickness * 2,
+                fill: "none",
+                stroke: color,
+                strokeWidth: thickness,
+                strokeDasharray: "80, 200",
+                strokeLinecap: "round"
+              }
+            )
           }
         )
       }
     );
   }
 );
-SpinnerDots.displayName = "SpinnerDots";
+SpinnerCircle.displayName = "SpinnerCircle";
 export {
-  SpinnerDots
+  SpinnerCircle
 };
-//# sourceMappingURL=index16.js.map

package/dist/index17.cjs

@@ -2,14 +2,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index31.cjs");
-const colors = require("./index4.cjs");
+const hooks = require("./index32.cjs");
 const classNames = require("./index3.cjs");
-const SpinnerBars = react.forwardRef(
+const colors = require("./index4.cjs");
+const SpinnerRing = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    barCount = 5,
+    secondaryColor = "rgba(0, 0, 0, 0.1)",
+    thickness = 4,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -18,7 +19,7 @@ const SpinnerBars = react.forwardRef(
     transition,
     className,
     style,
-    testId = "spinner-bars",
+    testId = "spinner-ring",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -32,16 +33,13 @@ const SpinnerBars = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const sizeValue = colors.parseSizeToNumber(size, 40);
-    const barWidth = Math.floor(sizeValue / (barCount * 2));
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center gap-1", className),
+        className: classNames.cn("inline-flex items-center justify-center", className),
         style: {
-          height: colors.normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
@@ -50,24 +48,23 @@ const SpinnerBars = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: Array.from({ length: barCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "rounded-sm",
+            className: "rounded-full",
             style: {
-              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`
+              width: colors.normalizeSize(size),
+              height: colors.normalizeSize(size),
+              border: `${thickness}px solid ${secondaryColor}`,
+              borderTopColor: color,
+              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
             }
-          },
-          index
-        ))
+          }
+        )
       }
     );
   }
 );
-SpinnerBars.displayName = "SpinnerBars";
-exports.SpinnerBars = SpinnerBars;
-//# sourceMappingURL=index17.cjs.map
+SpinnerRing.displayName = "SpinnerRing";
+exports.SpinnerRing = SpinnerRing;

package/dist/index17.js

@@ -1,13 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
-import { normalizeSize, parseSizeToNumber } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index32.js";
 import { cn } from "./index3.js";
-const SpinnerBars = forwardRef(
+import { normalizeSize } from "./index4.js";
+const SpinnerRing = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    barCount = 5,
+    secondaryColor = "rgba(0, 0, 0, 0.1)",
+    thickness = 4,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -16,7 +17,7 @@ const SpinnerBars = forwardRef(
     transition,
     className,
     style,
-    testId = "spinner-bars",
+    testId = "spinner-ring",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -30,16 +31,13 @@ const SpinnerBars = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    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 gap-1", className),
+        className: cn("inline-flex items-center justify-center", className),
         style: {
-          height: normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
@@ -48,26 +46,25 @@ const SpinnerBars = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: Array.from({ length: barCount }).map((_, index) => /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "rounded-sm",
+            className: "rounded-full",
             style: {
-              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`
+              width: normalizeSize(size),
+              height: normalizeSize(size),
+              border: `${thickness}px solid ${secondaryColor}`,
+              borderTopColor: color,
+              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
             }
-          },
-          index
-        ))
+          }
+        )
       }
     );
   }
 );
-SpinnerBars.displayName = "SpinnerBars";
+SpinnerRing.displayName = "SpinnerRing";
 export {
-  SpinnerBars
+  SpinnerRing
 };
-//# sourceMappingURL=index17.js.map

package/dist/index18.cjs

@@ -2,14 +2,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index31.cjs");
-const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
-const SpinnerGrid = react.forwardRef(
+const hooks = require("./index32.cjs");
+const classNames = require("./index3.cjs");
+const SpinnerDots = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    gridSize = 3,
+    dotCount = 8,
+    dotSize = 4,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -18,7 +19,7 @@ const SpinnerGrid = react.forwardRef(
     transition,
     className,
     style,
-    testId = "spinner-grid",
+    testId = "spinner-dots",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -33,7 +34,8 @@ const SpinnerGrid = react.forwardRef(
     );
     if (!shouldRender) return null;
     const sizeValue = colors.parseSizeToNumber(size, 40);
-    const cellSize = Math.floor(sizeValue / gridSize) - 2;
+    const dotSizeValue = colors.parseSizeToNumber(dotSize, 4);
+    const radius = (sizeValue - dotSizeValue) / 2;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -52,27 +54,30 @@ const SpinnerGrid = react.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "grid gap-0.5",
+            className: "relative",
             style: {
               width: colors.normalizeSize(size),
               height: colors.normalizeSize(size),
-              gridTemplateColumns: `repeat(${gridSize}, 1fr)`
+              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
             },
-            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;
+            children: Array.from({ length: dotCount }).map((_, index) => {
+              const angle = 360 / dotCount * index;
+              const radian = angle * Math.PI / 180;
+              const x = radius * Math.cos(radian) + radius;
+              const y = radius * Math.sin(radian) + radius;
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: "rounded-sm",
+                  className: "absolute rounded-full",
                   style: {
-                    width: `${cellSize}px`,
-                    height: `${cellSize}px`,
+                    width: colors.normalizeSize(dotSize),
+                    height: colors.normalizeSize(dotSize),
                     backgroundColor: color,
-                    animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,
-                    animationDelay: `${delay2}s`
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    opacity: 1 - index / dotCount * 0.7
+                    // Fade effect
                   }
                 },
                 index
@@ -84,6 +89,5 @@ const SpinnerGrid = react.forwardRef(
     );
   }
 );
-SpinnerGrid.displayName = "SpinnerGrid";
-exports.SpinnerGrid = SpinnerGrid;
-//# sourceMappingURL=index18.cjs.map
+SpinnerDots.displayName = "SpinnerDots";
+exports.SpinnerDots = SpinnerDots;

package/dist/index18.js

@@ -1,13 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
-import { cn } from "./index3.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
-const SpinnerGrid = forwardRef(
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index32.js";
+import { cn } from "./index3.js";
+const SpinnerDots = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    gridSize = 3,
+    dotCount = 8,
+    dotSize = 4,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -16,7 +17,7 @@ const SpinnerGrid = forwardRef(
     transition,
     className,
     style,
-    testId = "spinner-grid",
+    testId = "spinner-dots",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -31,7 +32,8 @@ const SpinnerGrid = forwardRef(
     );
     if (!shouldRender) return null;
     const sizeValue = parseSizeToNumber(size, 40);
-    const cellSize = Math.floor(sizeValue / gridSize) - 2;
+    const dotSizeValue = parseSizeToNumber(dotSize, 4);
+    const radius = (sizeValue - dotSizeValue) / 2;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -50,27 +52,30 @@ const SpinnerGrid = forwardRef(
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "grid gap-0.5",
+            className: "relative",
             style: {
               width: normalizeSize(size),
               height: normalizeSize(size),
-              gridTemplateColumns: `repeat(${gridSize}, 1fr)`
+              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
             },
-            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;
+            children: Array.from({ length: dotCount }).map((_, index) => {
+              const angle = 360 / dotCount * index;
+              const radian = angle * Math.PI / 180;
+              const x = radius * Math.cos(radian) + radius;
+              const y = radius * Math.sin(radian) + radius;
               return /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "rounded-sm",
+                  className: "absolute rounded-full",
                   style: {
-                    width: `${cellSize}px`,
-                    height: `${cellSize}px`,
+                    width: normalizeSize(dotSize),
+                    height: normalizeSize(dotSize),
                     backgroundColor: color,
-                    animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,
-                    animationDelay: `${delay2}s`
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    opacity: 1 - index / dotCount * 0.7
+                    // Fade effect
                   }
                 },
                 index
@@ -82,8 +87,7 @@ const SpinnerGrid = forwardRef(
     );
   }
 );
-SpinnerGrid.displayName = "SpinnerGrid";
+SpinnerDots.displayName = "SpinnerDots";
 export {
-  SpinnerGrid
+  SpinnerDots
 };
-//# sourceMappingURL=index18.js.map

package/dist/index19.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("./index31.cjs");
-const classNames = require("./index3.cjs");
+const hooks = require("./index32.cjs");
 const colors = require("./index4.cjs");
-const SpinnerWave = react.forwardRef(
+const classNames = require("./index3.cjs");
+const SpinnerBars = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    ripples = 3,
-    maxScale = 2,
+    barCount = 5,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -19,7 +18,7 @@ const SpinnerWave = react.forwardRef(
     transition,
     className,
     style,
-    testId = "spinner-wave",
+    testId = "spinner-bars",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -33,14 +32,16 @@ const SpinnerWave = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const sizeValue = colors.normalizeSize(size);
+    const sizeValue = colors.parseSizeToNumber(size, 40);
+    const barWidth = Math.floor(sizeValue / (barCount * 2));
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center", className),
+        className: classNames.cn("inline-flex items-center justify-center gap-1", className),
         style: {
+          height: colors.normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
@@ -49,35 +50,23 @@ const SpinnerWave = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: Array.from({ length: barCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "relative",
+            className: "rounded-sm",
             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
-                }
-              },
-              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";
-exports.SpinnerWave = SpinnerWave;
-//# sourceMappingURL=index19.cjs.map
+SpinnerBars.displayName = "SpinnerBars";
+exports.SpinnerBars = SpinnerBars;

package/dist/index19.js

@@ -1,14 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index32.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,37 +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
 };
-//# sourceMappingURL=index19.js.map