premium-react-loaders 3.0.0 → 3.1.0

package/dist/index41.cjs

@@ -2,19 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index47.cjs");
+const hooks = require("./index56.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
-const AtomLoader = react.forwardRef(
+const OrbitDots = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
     secondaryColor,
-    orbits = 3,
-    nucleusSize = 8,
-    electronSize = 5,
-    showNucleus = true,
-    thickness = 1,
+    dotCount = 4,
+    dotSize = 8,
+    orbitRadius = 0.4,
+    stagger = true,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -23,7 +22,7 @@ const AtomLoader = react.forwardRef(
     transition,
     className,
     style,
-    testId = "atom-loader",
+    testId = "orbit-dots",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -38,8 +37,8 @@ const AtomLoader = react.forwardRef(
     );
     if (!shouldRender) return null;
     const normalizedSize = colors.normalizeSize(size);
-    const durationNum = parseInt(effectiveDuration, 10);
-    const orbitAngles = Array.from({ length: orbits }, (_, i) => 180 / orbits * i);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const radius = sizeNum * orbitRadius;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -57,83 +56,42 @@ const AtomLoader = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full", children: [
-          showNucleus && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "absolute rounded-full",
-              style: {
-                width: nucleusSize,
-                height: nucleusSize,
-                backgroundColor: secondaryColor || color,
-                left: "50%",
-                top: "50%",
-                transform: "translate(-50%, -50%)"
-              }
-            }
-          ),
-          orbitAngles.map((angle, index) => {
-            const orbitDuration = durationNum + index * 150;
-            const shouldReverse = index % 2 === 1 ? !reverse : reverse;
-            const electronColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "absolute inset-0",
-                style: {
-                  transform: `rotate(${angle}deg)`
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "relative w-full h-full",
+            style: {
+              animation: `orbit-rotate ${effectiveDuration} linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
+            },
+            children: Array.from({ length: dotCount }, (_, index) => {
+              const angle = 360 / dotCount * index;
+              const dotColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
+              const staggerDelay = stagger ? `${index / dotCount * 300}ms` : "0ms";
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute rounded-full",
+                  style: {
+                    width: dotSize,
+                    height: dotSize,
+                    backgroundColor: dotColor,
+                    left: "50%",
+                    top: "50%",
+                    transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${radius}px)`,
+                    opacity: stagger ? void 0 : 1,
+                    animation: stagger ? `orbit-dot-pulse 1s ease-in-out infinite` : void 0,
+                    animationDelay: staggerDelay
+                  }
                 },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "absolute rounded-full",
-                      style: {
-                        width: "100%",
-                        height: "60%",
-                        left: "0",
-                        top: "20%",
-                        border: `${thickness}px solid ${color}20`
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "absolute",
-                      style: {
-                        width: "100%",
-                        height: "60%",
-                        left: "0",
-                        top: "20%",
-                        animation: `atom-orbit ${orbitDuration}ms linear infinite`,
-                        animationDirection: shouldReverse ? "reverse" : "normal"
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: "absolute rounded-full",
-                          style: {
-                            width: electronSize,
-                            height: electronSize,
-                            backgroundColor: electronColor,
-                            left: "50%",
-                            top: 0,
-                            transform: "translate(-50%, -50%)"
-                          }
-                        }
-                      )
-                    }
-                  )
-                ]
-              },
-              index
-            );
-          })
-        ] })
+                index
+              );
+            })
+          }
+        )
       }
     );
   }
 );
-AtomLoader.displayName = "AtomLoader";
-exports.AtomLoader = AtomLoader;
+OrbitDots.displayName = "OrbitDots";
+exports.OrbitDots = OrbitDots;

package/dist/index41.js

@@ -1,18 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
-const AtomLoader = forwardRef(
+const OrbitDots = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
     secondaryColor,
-    orbits = 3,
-    nucleusSize = 8,
-    electronSize = 5,
-    showNucleus = true,
-    thickness = 1,
+    dotCount = 4,
+    dotSize = 8,
+    orbitRadius = 0.4,
+    stagger = true,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -21,7 +20,7 @@ const AtomLoader = forwardRef(
     transition,
     className,
     style,
-    testId = "atom-loader",
+    testId = "orbit-dots",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -36,8 +35,8 @@ const AtomLoader = forwardRef(
     );
     if (!shouldRender) return null;
     const normalizedSize = normalizeSize(size);
-    const durationNum = parseInt(effectiveDuration, 10);
-    const orbitAngles = Array.from({ length: orbits }, (_, i) => 180 / orbits * i);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const radius = sizeNum * orbitRadius;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -55,85 +54,44 @@ const AtomLoader = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full", children: [
-          showNucleus && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute rounded-full",
-              style: {
-                width: nucleusSize,
-                height: nucleusSize,
-                backgroundColor: secondaryColor || color,
-                left: "50%",
-                top: "50%",
-                transform: "translate(-50%, -50%)"
-              }
-            }
-          ),
-          orbitAngles.map((angle, index) => {
-            const orbitDuration = durationNum + index * 150;
-            const shouldReverse = index % 2 === 1 ? !reverse : reverse;
-            const electronColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "absolute inset-0",
-                style: {
-                  transform: `rotate(${angle}deg)`
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative w-full h-full",
+            style: {
+              animation: `orbit-rotate ${effectiveDuration} linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
+            },
+            children: Array.from({ length: dotCount }, (_, index) => {
+              const angle = 360 / dotCount * index;
+              const dotColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
+              const staggerDelay = stagger ? `${index / dotCount * 300}ms` : "0ms";
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute rounded-full",
+                  style: {
+                    width: dotSize,
+                    height: dotSize,
+                    backgroundColor: dotColor,
+                    left: "50%",
+                    top: "50%",
+                    transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${radius}px)`,
+                    opacity: stagger ? void 0 : 1,
+                    animation: stagger ? `orbit-dot-pulse 1s ease-in-out infinite` : void 0,
+                    animationDelay: staggerDelay
+                  }
                 },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "absolute rounded-full",
-                      style: {
-                        width: "100%",
-                        height: "60%",
-                        left: "0",
-                        top: "20%",
-                        border: `${thickness}px solid ${color}20`
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "absolute",
-                      style: {
-                        width: "100%",
-                        height: "60%",
-                        left: "0",
-                        top: "20%",
-                        animation: `atom-orbit ${orbitDuration}ms linear infinite`,
-                        animationDirection: shouldReverse ? "reverse" : "normal"
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: "absolute rounded-full",
-                          style: {
-                            width: electronSize,
-                            height: electronSize,
-                            backgroundColor: electronColor,
-                            left: "50%",
-                            top: 0,
-                            transform: "translate(-50%, -50%)"
-                          }
-                        }
-                      )
-                    }
-                  )
-                ]
-              },
-              index
-            );
-          })
-        ] })
+                index
+              );
+            })
+          }
+        )
       }
     );
   }
 );
-AtomLoader.displayName = "AtomLoader";
+OrbitDots.displayName = "OrbitDots";
 export {
-  AtomLoader
+  OrbitDots
 };

package/dist/index42.cjs

@@ -2,26 +2,27 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index47.cjs");
+const hooks = require("./index56.cjs");
+const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
-const BouncingDots = react.forwardRef(
+const OrbitRings = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
     secondaryColor,
-    dotCount = 3,
-    dotSize = 10,
-    gap = 8,
-    bounceHeight = 1,
-    staggerDelay = 150,
+    thickness = 2,
+    ringCount = 3,
+    ringGap = 6,
+    alternate = true,
     speed = "normal",
+    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "bouncing-dots",
+    testId = "orbit-rings",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -35,17 +36,18 @@ const BouncingDots = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const totalWidth = dotCount * dotSize + (dotCount - 1) * gap;
-    const bounceDistance = dotSize * bounceHeight;
+    const normalizedSize = colors.normalizeSize(size);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const durationNum = parseInt(effectiveDuration, 10);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-end justify-center", className),
+        className: classNames.cn("inline-flex items-center justify-center", className),
         style: {
-          width: totalWidth,
-          height: dotSize + bounceDistance,
+          width: normalizedSize,
+          height: normalizedSize,
           opacity,
           transition: transitionStyle,
           ...style
@@ -54,29 +56,35 @@ const BouncingDots = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: Array.from({ length: dotCount }, (_, index) => {
-          const dotColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
-          const animationDelay = `${index * staggerDelay}ms`;
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full", children: Array.from({ length: ringCount }, (_, index) => {
+          const ringSize = sizeNum - index * (ringGap + thickness) * 2;
+          if (ringSize <= 0) return null;
+          const ringColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
+          const shouldReverse = alternate ? index % 2 === 1 !== reverse : reverse;
+          const ringDuration = durationNum + index * 200;
           return /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "rounded-full",
+              className: "absolute rounded-full",
               style: {
-                width: dotSize,
-                height: dotSize,
-                backgroundColor: dotColor,
-                marginRight: index < dotCount - 1 ? gap : 0,
-                animation: `bounce-dot ${effectiveDuration} ease-in-out infinite`,
-                animationDelay,
-                ["--bounce-height"]: `${bounceDistance}px`
+                width: ringSize,
+                height: ringSize,
+                left: "50%",
+                top: "50%",
+                transform: "translate(-50%, -50%)",
+                border: `${thickness}px solid transparent`,
+                borderTopColor: ringColor,
+                borderRightColor: ringColor,
+                animation: `orbit-rotate ${ringDuration}ms linear infinite`,
+                animationDirection: shouldReverse ? "reverse" : "normal"
               }
             },
             index
           );
-        })
+        }) })
       }
     );
   }
 );
-BouncingDots.displayName = "BouncingDots";
-exports.BouncingDots = BouncingDots;
+OrbitRings.displayName = "OrbitRings";
+exports.OrbitRings = OrbitRings;

package/dist/index42.js

@@ -1,25 +1,26 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
-const BouncingDots = forwardRef(
+const OrbitRings = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
     secondaryColor,
-    dotCount = 3,
-    dotSize = 10,
-    gap = 8,
-    bounceHeight = 1,
-    staggerDelay = 150,
+    thickness = 2,
+    ringCount = 3,
+    ringGap = 6,
+    alternate = true,
     speed = "normal",
+    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "bouncing-dots",
+    testId = "orbit-rings",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -33,17 +34,18 @@ const BouncingDots = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const totalWidth = dotCount * dotSize + (dotCount - 1) * gap;
-    const bounceDistance = dotSize * bounceHeight;
+    const normalizedSize = normalizeSize(size);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const durationNum = parseInt(effectiveDuration, 10);
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-end justify-center", className),
+        className: cn("inline-flex items-center justify-center", className),
         style: {
-          width: totalWidth,
-          height: dotSize + bounceDistance,
+          width: normalizedSize,
+          height: normalizedSize,
           opacity,
           transition: transitionStyle,
           ...style
@@ -52,31 +54,37 @@ const BouncingDots = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: Array.from({ length: dotCount }, (_, index) => {
-          const dotColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
-          const animationDelay = `${index * staggerDelay}ms`;
+        children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full", children: Array.from({ length: ringCount }, (_, index) => {
+          const ringSize = sizeNum - index * (ringGap + thickness) * 2;
+          if (ringSize <= 0) return null;
+          const ringColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
+          const shouldReverse = alternate ? index % 2 === 1 !== reverse : reverse;
+          const ringDuration = durationNum + index * 200;
           return /* @__PURE__ */ jsx(
             "div",
             {
-              className: "rounded-full",
+              className: "absolute rounded-full",
               style: {
-                width: dotSize,
-                height: dotSize,
-                backgroundColor: dotColor,
-                marginRight: index < dotCount - 1 ? gap : 0,
-                animation: `bounce-dot ${effectiveDuration} ease-in-out infinite`,
-                animationDelay,
-                ["--bounce-height"]: `${bounceDistance}px`
+                width: ringSize,
+                height: ringSize,
+                left: "50%",
+                top: "50%",
+                transform: "translate(-50%, -50%)",
+                border: `${thickness}px solid transparent`,
+                borderTopColor: ringColor,
+                borderRightColor: ringColor,
+                animation: `orbit-rotate ${ringDuration}ms linear infinite`,
+                animationDirection: shouldReverse ? "reverse" : "normal"
               }
             },
             index
           );
-        })
+        }) })
       }
     );
   }
 );
-BouncingDots.displayName = "BouncingDots";
+OrbitRings.displayName = "OrbitRings";
 export {
-  BouncingDots
+  OrbitRings
 };