premium-react-loaders 4.0.0 → 4.1.0

package/dist/index60.cjs

@@ -2,14 +2,14 @@
 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 GradientRing = react.forwardRef(
+const WaveCircle = react.forwardRef(
   ({
-    size = 48,
-    colors = ["#3b82f6", "#8b5cf6", "#ec4899"],
-    thickness = 6,
-    backgroundColor = "white",
+    size = 80,
+    color = "#3b82f6",
+    ringCount = 3,
     speed = "normal",
     respectMotionPreference = true,
     delay = 0,
@@ -17,7 +17,7 @@ const GradientRing = react.forwardRef(
     transition,
     className,
     style,
-    testId = "gradient-ring",
+    testId = "wave-circle",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -26,9 +26,8 @@ const GradientRing = react.forwardRef(
     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;
+    const clampedCount = Math.min(5, Math.max(2, ringCount));
+    const durationMs = colors.parseDurationMs(effectiveDuration);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -44,25 +43,28 @@ const GradientRing = react.forwardRef(
           /* @__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`
-              }
+              className: "absolute rounded-full z-10",
+              style: { width: size * 0.15, height: size * 0.15, backgroundColor: color }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          Array.from({ length: clampedCount }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "absolute rounded-full",
-              style: { width: inner, height: inner, backgroundColor }
-            }
-          )
+              className: "absolute rounded-full border-2",
+              style: {
+                width: size,
+                height: size,
+                borderColor: color,
+                animation: `wave-circle-expand ${effectiveDuration} ease-out infinite`,
+                animationDelay: `${i / clampedCount * durationMs}ms`
+              }
+            },
+            i
+          ))
         ]
       }
     );
   }
 );
-GradientRing.displayName = "GradientRing";
-exports.GradientRing = GradientRing;
+WaveCircle.displayName = "WaveCircle";
+exports.WaveCircle = WaveCircle;

package/dist/index60.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
+import { parseDurationMs } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-const GradientRing = forwardRef(
+const WaveCircle = forwardRef(
   ({
-    size = 48,
-    colors = ["#3b82f6", "#8b5cf6", "#ec4899"],
-    thickness = 6,
-    backgroundColor = "white",
+    size = 80,
+    color = "#3b82f6",
+    ringCount = 3,
     speed = "normal",
     respectMotionPreference = true,
     delay = 0,
@@ -15,7 +15,7 @@ const GradientRing = forwardRef(
     transition,
     className,
     style,
-    testId = "gradient-ring",
+    testId = "wave-circle",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -24,9 +24,8 @@ const GradientRing = forwardRef(
     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;
+    const clampedCount = Math.min(5, Math.max(2, ringCount));
+    const durationMs = parseDurationMs(effectiveDuration);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -42,27 +41,30 @@ const GradientRing = forwardRef(
           /* @__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`
-              }
+              className: "absolute rounded-full z-10",
+              style: { width: size * 0.15, height: size * 0.15, backgroundColor: color }
             }
           ),
-          /* @__PURE__ */ jsx(
+          Array.from({ length: clampedCount }, (_, i) => /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute rounded-full",
-              style: { width: inner, height: inner, backgroundColor }
-            }
-          )
+              className: "absolute rounded-full border-2",
+              style: {
+                width: size,
+                height: size,
+                borderColor: color,
+                animation: `wave-circle-expand ${effectiveDuration} ease-out infinite`,
+                animationDelay: `${i / clampedCount * durationMs}ms`
+              }
+            },
+            i
+          ))
         ]
       }
     );
   }
 );
-GradientRing.displayName = "GradientRing";
+WaveCircle.displayName = "WaveCircle";
 export {
-  GradientRing
+  WaveCircle
 };

package/dist/index61.cjs

@@ -2,17 +2,15 @@
 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 GradientBar = react.forwardRef(
+const GradientSpinner = react.forwardRef(
   ({
-    value,
-    width = "100%",
-    height = 8,
+    size = 48,
     color = "#3b82f6",
     secondaryColor = "#8b5cf6",
-    onComplete,
+    thickness = 4,
+    backgroundColor = "white",
     speed = "normal",
     respectMotionPreference = true,
     delay = 0,
@@ -20,80 +18,49 @@ const GradientBar = react.forwardRef(
     transition,
     className,
     style,
-    testId = "gradient-bar",
+    testId = "gradient-spinner",
     visible = true,
-    ariaLabel,
+    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);
-    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(
+    const inner = size - thickness * 2;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "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,
+        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: 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`
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute inset-0 rounded-full",
+              style: {
+                background: `conic-gradient(from 0deg, ${color}, ${secondaryColor}, transparent)`,
+                animation: `gradient-spin ${effectiveDuration} linear 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"
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute rounded-full",
+              style: { width: inner, height: inner, backgroundColor }
             }
-          }
-        )
+          )
+        ]
       }
     );
   }
 );
-GradientBar.displayName = "GradientBar";
-exports.GradientBar = GradientBar;
+GradientSpinner.displayName = "GradientSpinner";
+exports.GradientSpinner = GradientSpinner;

package/dist/index61.js

@@ -1,16 +1,14 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
-import { normalizeSize } from "./index4.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-const GradientBar = forwardRef(
+const GradientSpinner = forwardRef(
   ({
-    value,
-    width = "100%",
-    height = 8,
+    size = 48,
     color = "#3b82f6",
     secondaryColor = "#8b5cf6",
-    onComplete,
+    thickness = 4,
+    backgroundColor = "white",
     speed = "normal",
     respectMotionPreference = true,
     delay = 0,
@@ -18,82 +16,51 @@ const GradientBar = forwardRef(
     transition,
     className,
     style,
-    testId = "gradient-bar",
+    testId = "gradient-spinner",
     visible = true,
-    ariaLabel,
+    ariaLabel = "Loading...",
     ...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(
+    const inner = size - thickness * 2;
+    return /* @__PURE__ */ jsxs(
       "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,
+        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: 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`
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 rounded-full",
+              style: {
+                background: `conic-gradient(from 0deg, ${color}, ${secondaryColor}, transparent)`,
+                animation: `gradient-spin ${effectiveDuration} linear 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"
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute rounded-full",
+              style: { width: inner, height: inner, backgroundColor }
             }
-          }
-        )
+          )
+        ]
       }
     );
   }
 );
-GradientBar.displayName = "GradientBar";
+GradientSpinner.displayName = "GradientSpinner";
 export {
-  GradientBar
+  GradientSpinner
 };

package/dist/index62.cjs

@@ -2,15 +2,14 @@
 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 ParticleBurst = react.forwardRef(
+const GradientRing = react.forwardRef(
   ({
-    size = 60,
-    count = 8,
-    color = "#3b82f6",
-    particleSize = 6,
+    size = 48,
+    colors = ["#3b82f6", "#8b5cf6", "#ec4899"],
+    thickness = 6,
+    backgroundColor = "white",
     speed = "normal",
     respectMotionPreference = true,
     delay = 0,
@@ -18,7 +17,7 @@ const ParticleBurst = react.forwardRef(
     transition,
     className,
     style,
-    testId = "particle-burst",
+    testId = "gradient-ring",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -27,10 +26,10 @@ const ParticleBurst = react.forwardRef(
     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(
+    const stops = colors.join(", ");
+    const gradientStyle = `linear-gradient(135deg, ${stops}, ${colors[0]})`;
+    const inner = size - thickness * 2;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
@@ -41,35 +40,29 @@ const ParticleBurst = react.forwardRef(
         "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(
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "absolute rounded-full",
+              className: "absolute inset-0 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`
+                background: gradientStyle,
+                backgroundSize: "200% 200%",
+                animation: `gradient-flow ${effectiveDuration} ease infinite, gradient-spin ${effectiveDuration} linear infinite`
               }
-            },
-            i
-          );
-        })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute rounded-full",
+              style: { width: inner, height: inner, backgroundColor }
+            }
+          )
+        ]
       }
     );
   }
 );
-ParticleBurst.displayName = "ParticleBurst";
-exports.ParticleBurst = ParticleBurst;
+GradientRing.displayName = "GradientRing";
+exports.GradientRing = GradientRing;

package/dist/index62.js

@@ -1,14 +1,13 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
-import { parseDurationMs } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-const ParticleBurst = forwardRef(
+const GradientRing = forwardRef(
   ({
-    size = 60,
-    count = 8,
-    color = "#3b82f6",
-    particleSize = 6,
+    size = 48,
+    colors = ["#3b82f6", "#8b5cf6", "#ec4899"],
+    thickness = 6,
+    backgroundColor = "white",
     speed = "normal",
     respectMotionPreference = true,
     delay = 0,
@@ -16,7 +15,7 @@ const ParticleBurst = forwardRef(
     transition,
     className,
     style,
-    testId = "particle-burst",
+    testId = "gradient-ring",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -25,10 +24,10 @@ const ParticleBurst = forwardRef(
     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(
+    const stops = colors.join(", ");
+    const gradientStyle = `linear-gradient(135deg, ${stops}, ${colors[0]})`;
+    const inner = size - thickness * 2;
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
@@ -39,37 +38,31 @@ const ParticleBurst = forwardRef(
         "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(
+        children: [
+          /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute rounded-full",
+              className: "absolute inset-0 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`
+                background: gradientStyle,
+                backgroundSize: "200% 200%",
+                animation: `gradient-flow ${effectiveDuration} ease infinite, gradient-spin ${effectiveDuration} linear infinite`
               }
-            },
-            i
-          );
-        })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute rounded-full",
+              style: { width: inner, height: inner, backgroundColor }
+            }
+          )
+        ]
       }
     );
   }
 );
-ParticleBurst.displayName = "ParticleBurst";
+GradientRing.displayName = "GradientRing";
 export {
-  ParticleBurst
+  GradientRing
 };