premium-react-loaders 4.0.0 → 4.1.0

package/dist/index46.js

@@ -1,26 +1,25 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-import { normalizeSize } from "./index4.js";
-const InfinityLoader = forwardRef(
+const BouncingDots = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
     secondaryColor,
-    thickness = 3,
-    gradient = false,
-    showDot = false,
-    dotSize = 6,
+    dotCount = 3,
+    dotSize = 10,
+    gap = 8,
+    bounceHeight = 1,
+    staggerDelay = 150,
     speed = "normal",
-    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "infinity-loader",
+    testId = "bouncing-dots",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -34,26 +33,17 @@ const InfinityLoader = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const normalizedSize = normalizeSize(size);
-    const sizeNum = parseInt(normalizedSize, 10);
-    const width = sizeNum;
-    const height = sizeNum * 0.5;
-    const infinityPath = `M ${width * 0.15} ${height * 0.5}
-      C ${width * 0.15} ${height * 0.1}, ${width * 0.4} ${height * 0.1}, ${width * 0.5} ${height * 0.5}
-      C ${width * 0.6} ${height * 0.9}, ${width * 0.85} ${height * 0.9}, ${width * 0.85} ${height * 0.5}
-      C ${width * 0.85} ${height * 0.1}, ${width * 0.6} ${height * 0.1}, ${width * 0.5} ${height * 0.5}
-      C ${width * 0.4} ${height * 0.9}, ${width * 0.15} ${height * 0.9}, ${width * 0.15} ${height * 0.5}`;
-    const gradientId = `infinity-gradient-${testId}`;
-    const pathId = `infinity-path-${testId}`;
+    const totalWidth = dotCount * dotSize + (dotCount - 1) * gap;
+    const bounceDistance = dotSize * bounceHeight;
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
+        className: cn("inline-flex items-end justify-center", className),
         style: {
-          width,
-          height,
+          width: totalWidth,
+          height: dotSize + bounceDistance,
           opacity,
           transition: transitionStyle,
           ...style
@@ -62,74 +52,31 @@ const InfinityLoader = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            width,
-            height,
-            viewBox: `0 0 ${width} ${height}`,
-            fill: "none",
-            children: [
-              gradient && secondaryColor && /* @__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 })
-              ] }) }),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: infinityPath,
-                  stroke: gradient && secondaryColor ? `url(#${gradientId})` : color,
-                  strokeWidth: thickness,
-                  strokeLinecap: "round",
-                  fill: "none",
-                  opacity: 0.2
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  id: pathId,
-                  d: infinityPath,
-                  stroke: gradient && secondaryColor ? `url(#${gradientId})` : color,
-                  strokeWidth: thickness,
-                  strokeLinecap: "round",
-                  fill: "none",
-                  style: {
-                    strokeDasharray: "50 200",
-                    animation: `infinity-dash ${effectiveDuration} linear infinite`,
-                    animationDirection: reverse ? "reverse" : "normal"
-                  }
-                }
-              ),
-              showDot && /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  r: dotSize / 2,
-                  fill: secondaryColor || color,
-                  style: {
-                    animation: `infinity-dot ${effectiveDuration} linear infinite`,
-                    animationDirection: reverse ? "reverse" : "normal"
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "animateMotion",
-                    {
-                      dur: effectiveDuration,
-                      repeatCount: "indefinite",
-                      path: infinityPath,
-                      keyPoints: reverse ? "1;0" : "0;1",
-                      keyTimes: "0;1"
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        )
+        children: Array.from({ length: dotCount }, (_, index) => {
+          const dotColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
+          const animationDelay = `${index * staggerDelay}ms`;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "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`
+              }
+            },
+            index
+          );
+        })
       }
     );
   }
 );
-InfinityLoader.displayName = "InfinityLoader";
+BouncingDots.displayName = "BouncingDots";
 export {
-  InfinityLoader
+  BouncingDots
 };

package/dist/index47.cjs

@@ -2,27 +2,27 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index64.cjs");
-const colors = require("./index4.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
-const MobiusLoader = react.forwardRef(
+const BouncingBalls = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
     secondaryColor,
-    thickness = 2,
-    segments = 6,
-    twist = true,
-    ribbonWidth = 8,
+    ballCount = 3,
+    ballSize = 14,
+    gap = 10,
+    bounceHeight = 1.5,
+    shadow = true,
+    squash = true,
     speed = "normal",
-    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "mobius-loader",
+    testId = "bouncing-balls",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -36,22 +36,19 @@ const MobiusLoader = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const normalizedSize = colors.normalizeSize(size);
-    const sizeNum = parseInt(normalizedSize, 10);
-    const durationNum = parseInt(effectiveDuration, 10);
-    const centerX = sizeNum / 2;
-    const centerY = sizeNum / 2;
-    const radiusX = (sizeNum - ribbonWidth) / 2;
-    const radiusY = (sizeNum - ribbonWidth) / 3;
+    const totalWidth = ballCount * ballSize + (ballCount - 1) * gap;
+    const bounceDistance = ballSize * bounceHeight;
+    const shadowSize = ballSize * 0.8;
+    const staggerDelay = 200;
     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-end justify-center", className),
         style: {
-          width: normalizedSize,
-          height: normalizedSize,
+          width: totalWidth,
+          height: ballSize + bounceDistance + (shadow ? 8 : 0),
           opacity,
           transition: transitionStyle,
           ...style
@@ -60,47 +57,54 @@ const MobiusLoader = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "relative w-full h-full",
-            style: {
-              animation: `mobius-rotate ${durationNum}ms linear infinite`,
-              animationDirection: reverse ? "reverse" : "normal"
-            },
-            children: Array.from({ length: segments }, (_, index) => {
-              const angle = 360 / segments * index;
-              const radians = angle * Math.PI / 180;
-              const x = centerX + radiusX * Math.cos(radians);
-              const y = centerY + radiusY * Math.sin(radians);
-              const twistAngle = twist ? angle + 90 : 90;
-              const segmentOpacity = 0.3 + 0.7 * (index / segments);
-              const segmentColor = secondaryColor && index % 2 === 0 ? secondaryColor : color;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "absolute",
-                  style: {
-                    width: ribbonWidth,
-                    height: thickness,
-                    backgroundColor: segmentColor,
-                    borderRadius: thickness / 2,
-                    left: x - ribbonWidth / 2,
-                    top: y - thickness / 2,
-                    transform: `rotate(${twistAngle}deg)`,
-                    opacity: segmentOpacity,
-                    animation: `mobius-segment ${durationNum}ms ease-in-out infinite`,
-                    animationDelay: `${index / segments * durationNum}ms`
+        children: Array.from({ length: ballCount }, (_, index) => {
+          const ballColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
+          const animationDelay = `${index * staggerDelay}ms`;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "relative flex flex-col items-center",
+              style: {
+                marginRight: index < ballCount - 1 ? gap : 0
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "rounded-full",
+                    style: {
+                      width: ballSize,
+                      height: ballSize,
+                      backgroundColor: ballColor,
+                      animation: squash ? `bounce-ball-squash ${effectiveDuration} ease-in-out infinite` : `bounce-ball ${effectiveDuration} ease-in-out infinite`,
+                      animationDelay,
+                      ["--bounce-height"]: `${bounceDistance}px`,
+                      transformOrigin: "center bottom"
+                    }
+                  }
+                ),
+                shadow && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "absolute bottom-0 rounded-full",
+                    style: {
+                      width: shadowSize,
+                      height: shadowSize * 0.3,
+                      backgroundColor: "rgba(0, 0, 0, 0.2)",
+                      animation: `bounce-shadow ${effectiveDuration} ease-in-out infinite`,
+                      animationDelay,
+                      filter: "blur(2px)"
+                    }
                   }
-                },
-                index
-              );
-            })
-          }
-        )
+                )
+              ]
+            },
+            index
+          );
+        })
       }
     );
   }
 );
-MobiusLoader.displayName = "MobiusLoader";
-exports.MobiusLoader = MobiusLoader;
+BouncingBalls.displayName = "BouncingBalls";
+exports.BouncingBalls = BouncingBalls;

package/dist/index47.js

@@ -1,26 +1,26 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
-import { normalizeSize } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-const MobiusLoader = forwardRef(
+const BouncingBalls = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
     secondaryColor,
-    thickness = 2,
-    segments = 6,
-    twist = true,
-    ribbonWidth = 8,
+    ballCount = 3,
+    ballSize = 14,
+    gap = 10,
+    bounceHeight = 1.5,
+    shadow = true,
+    squash = true,
     speed = "normal",
-    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "mobius-loader",
+    testId = "bouncing-balls",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -34,22 +34,19 @@ const MobiusLoader = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const normalizedSize = normalizeSize(size);
-    const sizeNum = parseInt(normalizedSize, 10);
-    const durationNum = parseInt(effectiveDuration, 10);
-    const centerX = sizeNum / 2;
-    const centerY = sizeNum / 2;
-    const radiusX = (sizeNum - ribbonWidth) / 2;
-    const radiusY = (sizeNum - ribbonWidth) / 3;
+    const totalWidth = ballCount * ballSize + (ballCount - 1) * gap;
+    const bounceDistance = ballSize * bounceHeight;
+    const shadowSize = ballSize * 0.8;
+    const staggerDelay = 200;
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
+        className: cn("inline-flex items-end justify-center", className),
         style: {
-          width: normalizedSize,
-          height: normalizedSize,
+          width: totalWidth,
+          height: ballSize + bounceDistance + (shadow ? 8 : 0),
           opacity,
           transition: transitionStyle,
           ...style
@@ -58,49 +55,56 @@ const MobiusLoader = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "relative w-full h-full",
-            style: {
-              animation: `mobius-rotate ${durationNum}ms linear infinite`,
-              animationDirection: reverse ? "reverse" : "normal"
-            },
-            children: Array.from({ length: segments }, (_, index) => {
-              const angle = 360 / segments * index;
-              const radians = angle * Math.PI / 180;
-              const x = centerX + radiusX * Math.cos(radians);
-              const y = centerY + radiusY * Math.sin(radians);
-              const twistAngle = twist ? angle + 90 : 90;
-              const segmentOpacity = 0.3 + 0.7 * (index / segments);
-              const segmentColor = secondaryColor && index % 2 === 0 ? secondaryColor : color;
-              return /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "absolute",
-                  style: {
-                    width: ribbonWidth,
-                    height: thickness,
-                    backgroundColor: segmentColor,
-                    borderRadius: thickness / 2,
-                    left: x - ribbonWidth / 2,
-                    top: y - thickness / 2,
-                    transform: `rotate(${twistAngle}deg)`,
-                    opacity: segmentOpacity,
-                    animation: `mobius-segment ${durationNum}ms ease-in-out infinite`,
-                    animationDelay: `${index / segments * durationNum}ms`
+        children: Array.from({ length: ballCount }, (_, index) => {
+          const ballColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
+          const animationDelay = `${index * staggerDelay}ms`;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "relative flex flex-col items-center",
+              style: {
+                marginRight: index < ballCount - 1 ? gap : 0
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "rounded-full",
+                    style: {
+                      width: ballSize,
+                      height: ballSize,
+                      backgroundColor: ballColor,
+                      animation: squash ? `bounce-ball-squash ${effectiveDuration} ease-in-out infinite` : `bounce-ball ${effectiveDuration} ease-in-out infinite`,
+                      animationDelay,
+                      ["--bounce-height"]: `${bounceDistance}px`,
+                      transformOrigin: "center bottom"
+                    }
+                  }
+                ),
+                shadow && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute bottom-0 rounded-full",
+                    style: {
+                      width: shadowSize,
+                      height: shadowSize * 0.3,
+                      backgroundColor: "rgba(0, 0, 0, 0.2)",
+                      animation: `bounce-shadow ${effectiveDuration} ease-in-out infinite`,
+                      animationDelay,
+                      filter: "blur(2px)"
+                    }
                   }
-                },
-                index
-              );
-            })
-          }
-        )
+                )
+              ]
+            },
+            index
+          );
+        })
       }
     );
   }
 );
-MobiusLoader.displayName = "MobiusLoader";
+BouncingBalls.displayName = "BouncingBalls";
 export {
-  MobiusLoader
+  BouncingBalls
 };