premium-react-loaders 4.0.0 → 4.1.0

package/dist/index64.js

@@ -1,125 +1,75 @@
-import { useState, useRef, useEffect } from "react";
-function useReducedMotion() {
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) {
-      return;
-    }
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setPrefersReducedMotion(mediaQuery.matches);
-    const handleChange = (event) => {
-      setPrefersReducedMotion(event.matches);
-    };
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", handleChange);
-      return () => mediaQuery.removeEventListener("change", handleChange);
-    } else {
-      mediaQuery.addListener(handleChange);
-      return () => mediaQuery.removeListener(handleChange);
-    }
-  }, []);
-  return prefersReducedMotion;
-}
-function getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion) {
-  if (respectMotionPreference && prefersReducedMotion) {
-    return "0.01ms";
-  }
-  if (typeof speed === "number") {
-    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(1e4, speed)) : 1e3;
-    return `${validSpeed}ms`;
-  }
-  const speedMap = {
-    slow: "2s",
-    normal: "1s",
-    fast: "0.5s"
-  };
-  return speedMap[speed] || speedMap.normal;
-}
-function useLoaderVisibility(visible = true, delay = 0, minDuration = 0, transition) {
-  const transitionDuration = transition === true ? 150 : typeof transition === "number" ? transition : 0;
-  const hasTransition = transitionDuration > 0;
-  const [shouldRender, setShouldRender] = useState(visible && delay === 0);
-  const [isTransitioning, setIsTransitioning] = useState(visible && delay === 0 && hasTransition);
-  const showTimeRef = useRef(visible && delay === 0 ? Date.now() : null);
-  const delayTimerRef = useRef(null);
-  const minDurationTimerRef = useRef(null);
-  const transitionTimerRef = useRef(null);
-  useEffect(() => {
-    if (delayTimerRef.current) {
-      clearTimeout(delayTimerRef.current);
-      delayTimerRef.current = null;
-    }
-    if (minDurationTimerRef.current) {
-      clearTimeout(minDurationTimerRef.current);
-      minDurationTimerRef.current = null;
-    }
-    if (transitionTimerRef.current) {
-      clearTimeout(transitionTimerRef.current);
-      transitionTimerRef.current = null;
-    }
-    if (visible) {
-      if (delay > 0) {
-        delayTimerRef.current = setTimeout(() => {
-          setShouldRender(true);
-          showTimeRef.current = Date.now();
-          if (hasTransition) {
-            setIsTransitioning(true);
-          }
-        }, delay);
-      } else {
-        setShouldRender(true);
-        showTimeRef.current = Date.now();
-        if (hasTransition) {
-          setIsTransitioning(true);
-        }
-      }
-    } else {
-      const hideLoader = () => {
-        if (hasTransition) {
-          setIsTransitioning(false);
-          transitionTimerRef.current = setTimeout(() => {
-            setShouldRender(false);
-            showTimeRef.current = null;
-          }, transitionDuration);
-        } else {
-          setShouldRender(false);
-          showTimeRef.current = null;
-        }
-      };
-      if (showTimeRef.current !== null && minDuration > 0) {
-        const elapsedTime = Date.now() - showTimeRef.current;
-        const remainingTime = minDuration - elapsedTime;
-        if (remainingTime > 0) {
-          minDurationTimerRef.current = setTimeout(hideLoader, remainingTime);
-        } else {
-          hideLoader();
-        }
-      } else {
-        hideLoader();
-      }
-    }
-    return () => {
-      if (delayTimerRef.current) {
-        clearTimeout(delayTimerRef.current);
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { parseDurationMs } from "./index4.js";
+import { cn } from "./index3.js";
+const ParticleBurst = forwardRef(
+  ({
+    size = 60,
+    count = 8,
+    color = "#3b82f6",
+    particleSize = 6,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "particle-burst",
+    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 clampedCount = Math.min(20, Math.max(4, count));
+    const radius = size / 2;
+    const durationMs = parseDurationMs(effectiveDuration);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("relative inline-flex items-center justify-center", className),
+        style: { width: size, height: size, opacity, transition: transitionStyle, ...style },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: clampedCount }, (_, i) => {
+          const angle = i / clampedCount * 2 * Math.PI;
+          const tx = Math.cos(angle) * radius;
+          const ty = Math.sin(angle) * radius;
+          const animationDelay = `${i / clampedCount * durationMs}ms`;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute rounded-full",
+              style: {
+                width: particleSize,
+                height: particleSize,
+                backgroundColor: color,
+                top: "50%",
+                left: "50%",
+                marginTop: -particleSize / 2,
+                marginLeft: -particleSize / 2,
+                animation: `particle-burst ${effectiveDuration} ease-out infinite`,
+                animationDelay,
+                ["--tx"]: `${tx}px`,
+                ["--ty"]: `${ty}px`
+              }
+            },
+            i
+          );
+        })
       }
-      if (minDurationTimerRef.current) {
-        clearTimeout(minDurationTimerRef.current);
-      }
-      if (transitionTimerRef.current) {
-        clearTimeout(transitionTimerRef.current);
-      }
-    };
-  }, [visible, delay, minDuration, hasTransition, transitionDuration]);
-  const opacity = hasTransition ? isTransitioning ? 1 : 0 : 1;
-  const transitionStyle = hasTransition ? `opacity ${transitionDuration}ms ease-in-out` : "none";
-  return {
-    shouldRender,
-    opacity,
-    transitionStyle
-  };
-}
+    );
+  }
+);
+ParticleBurst.displayName = "ParticleBurst";
 export {
-  getEffectiveDuration,
-  useLoaderVisibility,
-  useReducedMotion
+  ParticleBurst
 };

package/dist/index65.cjs

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index71.cjs");
+const colors = require("./index4.cjs");
+const classNames = require("./index3.cjs");
+const ParticleOrbit = react.forwardRef(
+  ({
+    size = 80,
+    count = 5,
+    color = "#3b82f6",
+    centerColor,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "particle-orbit",
+    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 clampedCount = Math.min(8, Math.max(3, count));
+    const orbitRadius = size * 0.35;
+    const particleSize = size * 0.1;
+    const centerSize = size * 0.15;
+    const dotColor = centerColor || color;
+    const durationMs = colors.parseDurationMs(effectiveDuration);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("relative inline-flex items-center justify-center", className),
+        style: { width: size, height: size, opacity, transition: transitionStyle, ...style },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute rounded-full z-10",
+              style: {
+                width: centerSize,
+                height: centerSize,
+                backgroundColor: dotColor,
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)"
+              }
+            }
+          ),
+          Array.from({ length: clampedCount }, (_, i) => {
+            const startAngle = `${i / clampedCount * 360}deg`;
+            const staggerDelay = `-${i / clampedCount * durationMs}ms`;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute rounded-full",
+                style: {
+                  width: particleSize,
+                  height: particleSize,
+                  backgroundColor: color,
+                  top: "50%",
+                  left: "50%",
+                  marginTop: -particleSize / 2,
+                  marginLeft: -particleSize / 2,
+                  animation: `particle-orbit ${effectiveDuration} linear infinite`,
+                  animationDelay: staggerDelay,
+                  ["--start-angle"]: startAngle,
+                  ["--orbit-radius"]: `${orbitRadius}px`
+                }
+              },
+              i
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+ParticleOrbit.displayName = "ParticleOrbit";
+exports.ParticleOrbit = ParticleOrbit;

package/dist/index65.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { parseDurationMs } from "./index4.js";
+import { cn } from "./index3.js";
+const ParticleOrbit = forwardRef(
+  ({
+    size = 80,
+    count = 5,
+    color = "#3b82f6",
+    centerColor,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "particle-orbit",
+    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 clampedCount = Math.min(8, Math.max(3, count));
+    const orbitRadius = size * 0.35;
+    const particleSize = size * 0.1;
+    const centerSize = size * 0.15;
+    const dotColor = centerColor || color;
+    const durationMs = parseDurationMs(effectiveDuration);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("relative inline-flex items-center justify-center", className),
+        style: { width: size, height: size, opacity, transition: transitionStyle, ...style },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute rounded-full z-10",
+              style: {
+                width: centerSize,
+                height: centerSize,
+                backgroundColor: dotColor,
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)"
+              }
+            }
+          ),
+          Array.from({ length: clampedCount }, (_, i) => {
+            const startAngle = `${i / clampedCount * 360}deg`;
+            const staggerDelay = `-${i / clampedCount * durationMs}ms`;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute rounded-full",
+                style: {
+                  width: particleSize,
+                  height: particleSize,
+                  backgroundColor: color,
+                  top: "50%",
+                  left: "50%",
+                  marginTop: -particleSize / 2,
+                  marginLeft: -particleSize / 2,
+                  animation: `particle-orbit ${effectiveDuration} linear infinite`,
+                  animationDelay: staggerDelay,
+                  ["--start-angle"]: startAngle,
+                  ["--orbit-radius"]: `${orbitRadius}px`
+                }
+              },
+              i
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+ParticleOrbit.displayName = "ParticleOrbit";
+export {
+  ParticleOrbit
+};

package/dist/index66.cjs

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index71.cjs");
+const colors = require("./index4.cjs");
+const classNames = require("./index3.cjs");
+const ParticleTrail = react.forwardRef(
+  ({
+    size = 60,
+    count = 6,
+    color = "#3b82f6",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "particle-trail",
+    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 clampedCount = Math.min(10, Math.max(3, count));
+    const orbitRadius = size * 0.35;
+    const particleSize = Math.max(3, size * 0.08);
+    const durationMs = colors.parseDurationMs(effectiveDuration);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("relative inline-flex items-center justify-center", className),
+        style: { width: size, height: size, opacity, transition: transitionStyle, ...style },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: clampedCount }, (_, i) => {
+          const trailOpacity = 1 - i / clampedCount * 0.85;
+          const trailScale = 1 - i / clampedCount * 0.6;
+          const startAngle = `${i / clampedCount * 360}deg`;
+          const staggerDelay = `-${i / clampedCount * durationMs}ms`;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute rounded-full animate-particle-trail",
+              style: {
+                width: particleSize * trailScale,
+                height: particleSize * trailScale,
+                backgroundColor: color,
+                top: "50%",
+                left: "50%",
+                marginTop: -(particleSize * trailScale) / 2,
+                marginLeft: -(particleSize * trailScale) / 2,
+                opacity: trailOpacity,
+                animationDuration: effectiveDuration,
+                animationDelay: staggerDelay,
+                ["--start-angle"]: startAngle,
+                ["--orbit-radius"]: `${orbitRadius}px`
+              }
+            },
+            i
+          );
+        })
+      }
+    );
+  }
+);
+ParticleTrail.displayName = "ParticleTrail";
+exports.ParticleTrail = ParticleTrail;

package/dist/index66.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { parseDurationMs } from "./index4.js";
+import { cn } from "./index3.js";
+const ParticleTrail = forwardRef(
+  ({
+    size = 60,
+    count = 6,
+    color = "#3b82f6",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "particle-trail",
+    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 clampedCount = Math.min(10, Math.max(3, count));
+    const orbitRadius = size * 0.35;
+    const particleSize = Math.max(3, size * 0.08);
+    const durationMs = parseDurationMs(effectiveDuration);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("relative inline-flex items-center justify-center", className),
+        style: { width: size, height: size, opacity, transition: transitionStyle, ...style },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: clampedCount }, (_, i) => {
+          const trailOpacity = 1 - i / clampedCount * 0.85;
+          const trailScale = 1 - i / clampedCount * 0.6;
+          const startAngle = `${i / clampedCount * 360}deg`;
+          const staggerDelay = `-${i / clampedCount * durationMs}ms`;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute rounded-full animate-particle-trail",
+              style: {
+                width: particleSize * trailScale,
+                height: particleSize * trailScale,
+                backgroundColor: color,
+                top: "50%",
+                left: "50%",
+                marginTop: -(particleSize * trailScale) / 2,
+                marginLeft: -(particleSize * trailScale) / 2,
+                opacity: trailOpacity,
+                animationDuration: effectiveDuration,
+                animationDelay: staggerDelay,
+                ["--start-angle"]: startAngle,
+                ["--orbit-radius"]: `${orbitRadius}px`
+              }
+            },
+            i
+          );
+        })
+      }
+    );
+  }
+);
+ParticleTrail.displayName = "ParticleTrail";
+export {
+  ParticleTrail
+};

package/dist/index67.cjs

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index71.cjs");
+const classNames = require("./index3.cjs");
+const ParticleField = react.forwardRef(
+  ({
+    width = 120,
+    height = 120,
+    count = 12,
+    color = "#3b82f6",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "particle-field",
+    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 clampedCount = Math.min(30, Math.max(5, count));
+    const particles = Array.from({ length: clampedCount }, (_, i) => {
+      const seed = i * 137.508;
+      const x = seed * 7.3 % width;
+      const drift = seed * 3.1 % 20 - 10;
+      const size = 2 + seed % 4;
+      const particleOpacity = 0.4 + seed % 0.6;
+      const durationMultiplier = 0.6 + i / clampedCount * 0.8;
+      const delayMs = -(i / clampedCount * 3e3);
+      return { x, drift, size, particleOpacity, durationMultiplier, delayMs };
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("relative inline-block overflow-hidden", className),
+        style: { width, height, opacity, transition: transitionStyle, ...style },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: particles.map(({ x, drift, size: pSize, particleOpacity, durationMultiplier, delayMs }, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute rounded-full animate-particle-field-float",
+            style: {
+              width: pSize,
+              height: pSize,
+              backgroundColor: color,
+              left: x,
+              bottom: 0,
+              animationDuration: `calc(${effectiveDuration} * ${durationMultiplier})`,
+              animationDelay: `${delayMs}ms`,
+              ["--tx-start"]: `${drift}px`,
+              ["--tx-end"]: `${drift * 1.5}px`,
+              ["--field-height"]: `${height}px`,
+              ["--particle-opacity"]: `${particleOpacity}`
+            }
+          },
+          i
+        ))
+      }
+    );
+  }
+);
+ParticleField.displayName = "ParticleField";
+exports.ParticleField = ParticleField;