premium-react-loaders 2.3.1 → 3.0.0

package/dist/index41.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
+import { normalizeSize } from "./index4.js";
+import { cn } from "./index3.js";
+const AtomLoader = forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    orbits = 3,
+    nucleusSize = 8,
+    electronSize = 5,
+    showNucleus = true,
+    thickness = 1,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "atom-loader",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const normalizedSize = normalizeSize(size);
+    const durationNum = parseInt(effectiveDuration, 10);
+    const orbitAngles = Array.from({ length: orbits }, (_, i) => 180 / orbits * i);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style: {
+          width: normalizedSize,
+          height: normalizedSize,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "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: "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
+            );
+          })
+        ] })
+      }
+    );
+  }
+);
+AtomLoader.displayName = "AtomLoader";
+export {
+  AtomLoader
+};

package/dist/index42.cjs

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index47.cjs");
+const classNames = require("./index3.cjs");
+const BouncingDots = react.forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    dotCount = 3,
+    dotSize = 10,
+    gap = 8,
+    bounceHeight = 1,
+    staggerDelay = 150,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "bouncing-dots",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const totalWidth = dotCount * dotSize + (dotCount - 1) * gap;
+    const bounceDistance = dotSize * bounceHeight;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-end justify-center", className),
+        style: {
+          width: totalWidth,
+          height: dotSize + bounceDistance,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "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`;
+          return /* @__PURE__ */ jsxRuntime.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
+          );
+        })
+      }
+    );
+  }
+);
+BouncingDots.displayName = "BouncingDots";
+exports.BouncingDots = BouncingDots;

package/dist/index42.js

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
+import { cn } from "./index3.js";
+const BouncingDots = forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    dotCount = 3,
+    dotSize = 10,
+    gap = 8,
+    bounceHeight = 1,
+    staggerDelay = 150,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "bouncing-dots",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const totalWidth = dotCount * dotSize + (dotCount - 1) * gap;
+    const bounceDistance = dotSize * bounceHeight;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-end justify-center", className),
+        style: {
+          width: totalWidth,
+          height: dotSize + bounceDistance,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "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`;
+          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
+          );
+        })
+      }
+    );
+  }
+);
+BouncingDots.displayName = "BouncingDots";
+export {
+  BouncingDots
+};

package/dist/index43.cjs

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index47.cjs");
+const classNames = require("./index3.cjs");
+const BouncingBalls = react.forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    ballCount = 3,
+    ballSize = 14,
+    gap = 10,
+    bounceHeight = 1.5,
+    shadow = true,
+    squash = true,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "bouncing-balls",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    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-end justify-center", className),
+        style: {
+          width: totalWidth,
+          height: ballSize + bounceDistance + (shadow ? 8 : 0),
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        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
+          );
+        })
+      }
+    );
+  }
+);
+BouncingBalls.displayName = "BouncingBalls";
+exports.BouncingBalls = BouncingBalls;

package/dist/index43.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
+import { cn } from "./index3.js";
+const BouncingBalls = forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    ballCount = 3,
+    ballSize = 14,
+    gap = 10,
+    bounceHeight = 1.5,
+    shadow = true,
+    squash = true,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "bouncing-balls",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    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-end justify-center", className),
+        style: {
+          width: totalWidth,
+          height: ballSize + bounceDistance + (shadow ? 8 : 0),
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        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
+          );
+        })
+      }
+    );
+  }
+);
+BouncingBalls.displayName = "BouncingBalls";
+export {
+  BouncingBalls
+};

package/dist/index44.cjs

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index47.cjs");
+const classNames = require("./index3.cjs");
+const colors = require("./index4.cjs");
+const InfinityLoader = react.forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    thickness = 3,
+    gradient = false,
+    showDot = false,
+    dotSize = 6,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "infinity-loader",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const normalizedSize = colors.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}`;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: {
+          width,
+          height,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            fill: "none",
+            children: [
+              gradient && secondaryColor && /* @__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 })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: infinityPath,
+                  stroke: gradient && secondaryColor ? `url(#${gradientId})` : color,
+                  strokeWidth: thickness,
+                  strokeLinecap: "round",
+                  fill: "none",
+                  opacity: 0.2
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  r: dotSize / 2,
+                  fill: secondaryColor || color,
+                  style: {
+                    animation: `infinity-dot ${effectiveDuration} linear infinite`,
+                    animationDirection: reverse ? "reverse" : "normal"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "animateMotion",
+                    {
+                      dur: effectiveDuration,
+                      repeatCount: "indefinite",
+                      path: infinityPath,
+                      keyPoints: reverse ? "1;0" : "0;1",
+                      keyTimes: "0;1"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+InfinityLoader.displayName = "InfinityLoader";
+exports.InfinityLoader = InfinityLoader;