premium-react-loaders 3.1.1 → 4.1.0

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;

package/dist/index67.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { cn } from "./index3.js";
+const ParticleField = 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 = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = 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__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: 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__ */ 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";
+export {
+  ParticleField
+};

package/dist/index68.cjs

@@ -0,0 +1,64 @@
+"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 GLOW_SPREAD = {
+  low: 4,
+  medium: 8,
+  high: 16
+};
+const NeonPulse = react.forwardRef(
+  ({
+    size = 60,
+    color = "#3b82f6",
+    glowIntensity = "medium",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "neon-pulse",
+    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 spread = GLOW_SPREAD[glowIntensity];
+    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: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "rounded-full animate-neon-pulse",
+            style: {
+              width: size * 0.8,
+              height: size * 0.8,
+              border: `2px solid ${color}`,
+              animationDuration: effectiveDuration,
+              ["--neon-color"]: color,
+              ["--neon-glow-spread"]: `${spread}px`
+            }
+          }
+        )
+      }
+    );
+  }
+);
+NeonPulse.displayName = "NeonPulse";
+exports.NeonPulse = NeonPulse;

package/dist/index68.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { cn } from "./index3.js";
+const GLOW_SPREAD = {
+  low: 4,
+  medium: 8,
+  high: 16
+};
+const NeonPulse = forwardRef(
+  ({
+    size = 60,
+    color = "#3b82f6",
+    glowIntensity = "medium",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "neon-pulse",
+    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 spread = GLOW_SPREAD[glowIntensity];
+    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: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rounded-full animate-neon-pulse",
+            style: {
+              width: size * 0.8,
+              height: size * 0.8,
+              border: `2px solid ${color}`,
+              animationDuration: effectiveDuration,
+              ["--neon-color"]: color,
+              ["--neon-glow-spread"]: `${spread}px`
+            }
+          }
+        )
+      }
+    );
+  }
+);
+NeonPulse.displayName = "NeonPulse";
+export {
+  NeonPulse
+};

package/dist/index69.cjs

@@ -0,0 +1,60 @@
+"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 NeonSpinner = react.forwardRef(
+  ({
+    size = 60,
+    color = "#a855f7",
+    thickness = 4,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "neon-spinner",
+    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 glowSize = thickness * 3;
+    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: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "rounded-full animate-neon-spinner",
+            style: {
+              width: size,
+              height: size,
+              border: `${thickness}px solid transparent`,
+              borderTopColor: color,
+              borderRightColor: color,
+              boxShadow: `0 0 ${glowSize}px ${color}, inset 0 0 ${glowSize}px transparent`,
+              animationDuration: effectiveDuration
+            }
+          }
+        )
+      }
+    );
+  }
+);
+NeonSpinner.displayName = "NeonSpinner";
+exports.NeonSpinner = NeonSpinner;

package/dist/index69.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { cn } from "./index3.js";
+const NeonSpinner = forwardRef(
+  ({
+    size = 60,
+    color = "#a855f7",
+    thickness = 4,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "neon-spinner",
+    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 glowSize = thickness * 3;
+    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: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rounded-full animate-neon-spinner",
+            style: {
+              width: size,
+              height: size,
+              border: `${thickness}px solid transparent`,
+              borderTopColor: color,
+              borderRightColor: color,
+              boxShadow: `0 0 ${glowSize}px ${color}, inset 0 0 ${glowSize}px transparent`,
+              animationDuration: effectiveDuration
+            }
+          }
+        )
+      }
+    );
+  }
+);
+NeonSpinner.displayName = "NeonSpinner";
+export {
+  NeonSpinner
+};

package/dist/index7.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const Skeleton = react.forwardRef(

package/dist/index7.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const Skeleton = forwardRef(

package/dist/index70.cjs

@@ -0,0 +1,57 @@
+"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 NeonText = react.forwardRef(
+  ({
+    text = "LOADING",
+    color = "#22d3ee",
+    fontSize = 18,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "neon-text",
+    visible = true,
+    ariaLabel,
+    ...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;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: { opacity, transition: transitionStyle, ...style },
+        role: "status",
+        "aria-label": ariaLabel ?? text,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "animate-neon-text-glow font-bold tracking-widest uppercase",
+            style: {
+              color,
+              fontSize,
+              animationDuration: effectiveDuration,
+              ["--neon-color"]: color
+            },
+            children: text
+          }
+        )
+      }
+    );
+  }
+);
+NeonText.displayName = "NeonText";
+exports.NeonText = NeonText;

package/dist/index70.js

@@ -0,0 +1,57 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { cn } from "./index3.js";
+const NeonText = forwardRef(
+  ({
+    text = "LOADING",
+    color = "#22d3ee",
+    fontSize = 18,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "neon-text",
+    visible = true,
+    ariaLabel,
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(visible, delay, minDuration, transition);
+    if (!shouldRender) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style: { opacity, transition: transitionStyle, ...style },
+        role: "status",
+        "aria-label": ariaLabel ?? text,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "animate-neon-text-glow font-bold tracking-widest uppercase",
+            style: {
+              color,
+              fontSize,
+              animationDuration: effectiveDuration,
+              ["--neon-color"]: color
+            },
+            children: text
+          }
+        )
+      }
+    );
+  }
+);
+NeonText.displayName = "NeonText";
+export {
+  NeonText
+};