premium-react-loaders 3.1.1 → 4.1.0

package/dist/index62.cjs

@@ -0,0 +1,68 @@
+"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 GradientRing = react.forwardRef(
+  ({
+    size = 48,
+    colors = ["#3b82f6", "#8b5cf6", "#ec4899"],
+    thickness = 6,
+    backgroundColor = "white",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "gradient-ring",
+    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 stops = colors.join(", ");
+    const gradientStyle = `linear-gradient(135deg, ${stops}, ${colors[0]})`;
+    const inner = size - thickness * 2;
+    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 inset-0 rounded-full",
+              style: {
+                background: gradientStyle,
+                backgroundSize: "200% 200%",
+                animation: `gradient-flow ${effectiveDuration} ease infinite, gradient-spin ${effectiveDuration} linear infinite`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute rounded-full",
+              style: { width: inner, height: inner, backgroundColor }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+GradientRing.displayName = "GradientRing";
+exports.GradientRing = GradientRing;

package/dist/index62.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { cn } from "./index3.js";
+const GradientRing = forwardRef(
+  ({
+    size = 48,
+    colors = ["#3b82f6", "#8b5cf6", "#ec4899"],
+    thickness = 6,
+    backgroundColor = "white",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "gradient-ring",
+    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 stops = colors.join(", ");
+    const gradientStyle = `linear-gradient(135deg, ${stops}, ${colors[0]})`;
+    const inner = size - thickness * 2;
+    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 inset-0 rounded-full",
+              style: {
+                background: gradientStyle,
+                backgroundSize: "200% 200%",
+                animation: `gradient-flow ${effectiveDuration} ease infinite, gradient-spin ${effectiveDuration} linear infinite`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute rounded-full",
+              style: { width: inner, height: inner, backgroundColor }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+GradientRing.displayName = "GradientRing";
+export {
+  GradientRing
+};

package/dist/index63.cjs

@@ -0,0 +1,99 @@
+"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 GradientBar = react.forwardRef(
+  ({
+    value,
+    width = "100%",
+    height = 8,
+    color = "#3b82f6",
+    secondaryColor = "#8b5cf6",
+    onComplete,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "gradient-bar",
+    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);
+    const onCompleteRef = react.useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const hasCompletedRef = react.useRef(false);
+    const isIndeterminate = value === void 0;
+    const clampedValue = isIndeterminate ? 0 : Math.min(100, Math.max(0, value));
+    react.useEffect(() => {
+      if (clampedValue < 100) {
+        hasCompletedRef.current = false;
+      }
+    }, [clampedValue]);
+    react.useEffect(() => {
+      if (!isIndeterminate && clampedValue === 100 && !hasCompletedRef.current && onCompleteRef.current) {
+        hasCompletedRef.current = true;
+        onCompleteRef.current();
+      }
+    }, [clampedValue, isIndeterminate]);
+    if (!shouldRender) return null;
+    const gradient = `linear-gradient(90deg, ${color}, ${secondaryColor}, ${color})`;
+    const progressLabel = ariaLabel || (isIndeterminate ? "Loading..." : `Loading ${clampedValue}%`);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("relative overflow-hidden rounded-full", className),
+        style: {
+          width: colors.normalizeSize(width),
+          height,
+          backgroundColor: `${color}20`,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "progressbar",
+        "aria-label": progressLabel,
+        "aria-valuenow": isIndeterminate ? void 0 : clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-busy": "true",
+        ...rest,
+        children: isIndeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute h-full rounded-full",
+            style: {
+              background: gradient,
+              backgroundSize: "200% 100%",
+              animation: `gradient-flow ${effectiveDuration} linear infinite, progress-indeterminate ${effectiveDuration} ease-in-out infinite`
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-full rounded-full",
+            style: {
+              width: `${clampedValue}%`,
+              background: gradient,
+              backgroundSize: "200% 100%",
+              animation: `gradient-flow ${effectiveDuration} linear infinite`,
+              transition: "width 0.3s ease-in-out"
+            }
+          }
+        )
+      }
+    );
+  }
+);
+GradientBar.displayName = "GradientBar";
+exports.GradientBar = GradientBar;

package/dist/index63.js

@@ -0,0 +1,99 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { normalizeSize } from "./index4.js";
+import { cn } from "./index3.js";
+const GradientBar = forwardRef(
+  ({
+    value,
+    width = "100%",
+    height = 8,
+    color = "#3b82f6",
+    secondaryColor = "#8b5cf6",
+    onComplete,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "gradient-bar",
+    visible = true,
+    ariaLabel,
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(visible, delay, minDuration, transition);
+    const onCompleteRef = useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const hasCompletedRef = useRef(false);
+    const isIndeterminate = value === void 0;
+    const clampedValue = isIndeterminate ? 0 : Math.min(100, Math.max(0, value));
+    useEffect(() => {
+      if (clampedValue < 100) {
+        hasCompletedRef.current = false;
+      }
+    }, [clampedValue]);
+    useEffect(() => {
+      if (!isIndeterminate && clampedValue === 100 && !hasCompletedRef.current && onCompleteRef.current) {
+        hasCompletedRef.current = true;
+        onCompleteRef.current();
+      }
+    }, [clampedValue, isIndeterminate]);
+    if (!shouldRender) return null;
+    const gradient = `linear-gradient(90deg, ${color}, ${secondaryColor}, ${color})`;
+    const progressLabel = ariaLabel || (isIndeterminate ? "Loading..." : `Loading ${clampedValue}%`);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("relative overflow-hidden rounded-full", className),
+        style: {
+          width: normalizeSize(width),
+          height,
+          backgroundColor: `${color}20`,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "progressbar",
+        "aria-label": progressLabel,
+        "aria-valuenow": isIndeterminate ? void 0 : clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-busy": "true",
+        ...rest,
+        children: isIndeterminate ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute h-full rounded-full",
+            style: {
+              background: gradient,
+              backgroundSize: "200% 100%",
+              animation: `gradient-flow ${effectiveDuration} linear infinite, progress-indeterminate ${effectiveDuration} ease-in-out infinite`
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full",
+            style: {
+              width: `${clampedValue}%`,
+              background: gradient,
+              backgroundSize: "200% 100%",
+              animation: `gradient-flow ${effectiveDuration} linear infinite`,
+              transition: "width 0.3s ease-in-out"
+            }
+          }
+        )
+      }
+    );
+  }
+);
+GradientBar.displayName = "GradientBar";
+export {
+  GradientBar
+};

package/dist/index64.cjs

@@ -0,0 +1,75 @@
+"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 ParticleBurst = react.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 = 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(20, Math.max(4, count));
+    const radius = size / 2;
+    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 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__ */ 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-burst ${effectiveDuration} ease-out infinite`,
+                animationDelay,
+                ["--tx"]: `${tx}px`,
+                ["--ty"]: `${ty}px`
+              }
+            },
+            i
+          );
+        })
+      }
+    );
+  }
+);
+ParticleBurst.displayName = "ParticleBurst";
+exports.ParticleBurst = ParticleBurst;

package/dist/index64.js

@@ -0,0 +1,75 @@
+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
+          );
+        })
+      }
+    );
+  }
+);
+ParticleBurst.displayName = "ParticleBurst";
+export {
+  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
+};