premium-react-loaders 3.0.0 → 3.1.0

package/dist/index24.js

@@ -1,18 +1,14 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
-import { normalizeSize, parseSizeToNumber } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
 import { cn } from "./index3.js";
-const ProgressCircle = forwardRef(
+import { normalizeSize } from "./index4.js";
+const SpinnerPulse = forwardRef(
   ({
-    value = 0,
-    indeterminate = false,
-    showValue = false,
-    size = "lg",
-    thickness = 4,
+    size = "md",
     color = "#3b82f6",
-    secondaryColor = "#e0e0e0",
-    buffer,
+    pulses = 2,
+    maxScale = 1.8,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -21,9 +17,9 @@ const ProgressCircle = forwardRef(
     transition,
     className,
     style,
-    testId = "progress-circle",
+    testId = "spinner-pulse",
     visible = true,
-    ariaLabel,
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
@@ -35,112 +31,67 @@ const ProgressCircle = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const clampedValue = Math.min(100, Math.max(0, value));
-    const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
-    const sizeValue = parseSizeToNumber(size, 56);
-    const thicknessValue = parseSizeToNumber(thickness, 4);
-    const radius = (sizeValue - thicknessValue * 2) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const strokeDashoffset = circumference - clampedValue / 100 * circumference;
-    const bufferDashoffset = clampedBuffer !== void 0 ? circumference - clampedBuffer / 100 * circumference : void 0;
-    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    return /* @__PURE__ */ jsxs(
+    const sizeValue = normalizeSize(size);
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center relative", className),
+        className: cn("inline-flex items-center justify-center", className),
         style: {
-          width: normalizeSize(size),
-          height: normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
         },
-        role: "progressbar",
-        "aria-label": progressLabel,
-        "aria-valuenow": indeterminate ? void 0 : clampedValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
         ...rest,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              className: cn(indeterminate && "animate-spinner-rotate"),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative",
+            style: {
               width: sizeValue,
-              height: sizeValue,
-              viewBox: `0 0 ${sizeValue} ${sizeValue}`,
-              style: indeterminate ? {
-                animation: `spinner-rotate ${effectiveDuration} linear infinite`,
-                animationDirection: reverse ? "reverse" : "normal"
-              } : void 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: secondaryColor,
-                    strokeWidth: thicknessValue
+              height: sizeValue
+            },
+            children: [
+              Array.from({ length: pulses }).map((_, index) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 rounded-full",
+                  style: {
+                    backgroundColor: color,
+                    animation: `heartbeat-pulse ${effectiveDuration} ease-out infinite`,
+                    animationDelay: reverse ? `${(pulses - index - 1) * 0.3}s` : `${index * 0.3}s`,
+                    animationDirection: reverse ? "reverse" : "normal",
+                    // @ts-ignore - CSS variable for animation
+                    "--max-scale": maxScale
                   }
-                ),
-                bufferDashoffset !== void 0 && !indeterminate && /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: color,
-                    strokeWidth: thicknessValue,
-                    strokeLinecap: "round",
-                    strokeDasharray: circumference,
-                    strokeDashoffset: bufferDashoffset,
-                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
-                    opacity: 0.3
+                },
+                index
+              )),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute rounded-full",
+                  style: {
+                    backgroundColor: color,
+                    width: "50%",
+                    height: "50%",
+                    top: "25%",
+                    left: "25%"
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: color,
-                    strokeWidth: thicknessValue,
-                    strokeLinecap: "round",
-                    strokeDasharray: circumference,
-                    strokeDashoffset: indeterminate ? circumference * 0.75 : strokeDashoffset,
-                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
-                    style: {
-                      transition: indeterminate ? "none" : "stroke-dashoffset 0.3s ease-in-out"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          showValue && !indeterminate && /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: "absolute text-sm font-medium",
-              style: { color },
-              children: [
-                clampedValue,
-                "%"
-              ]
-            }
-          )
-        ]
+                }
+              )
+            ]
+          }
+        )
       }
     );
   }
 );
-ProgressCircle.displayName = "ProgressCircle";
+SpinnerPulse.displayName = "SpinnerPulse";
 export {
-  ProgressCircle
+  SpinnerPulse
 };

package/dist/index25.cjs

@@ -2,16 +2,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index47.cjs");
 const colors = require("./index4.cjs");
+const hooks = require("./index56.cjs");
 const classNames = require("./index3.cjs");
-const ProgressRing = react.forwardRef(
+const ProgressBar = react.forwardRef(
   ({
     value = 0,
     indeterminate = false,
     showValue = false,
-    size = "lg",
-    thickness = 4,
+    height = "0.5rem",
     color = "#3b82f6",
     secondaryColor = "#e0e0e0",
     gradient = false,
@@ -24,14 +23,14 @@ const ProgressRing = react.forwardRef(
     transition,
     className,
     style,
-    testId = "progress-ring",
+    testId = "progress-bar",
     visible = true,
     ariaLabel,
     ...rest
   }, ref) => {
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const gradientId = react.useMemo(() => `progress-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
+    const gradientId = react.useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
       visible,
       delay,
@@ -41,22 +40,16 @@ const ProgressRing = react.forwardRef(
     if (!shouldRender) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
-    const sizeValue = colors.parseSizeToNumber(size, 56);
-    const thicknessValue = colors.parseSizeToNumber(thickness, 4);
-    const radius = (sizeValue - thicknessValue * 2) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const strokeDashoffset = circumference - clampedValue / 100 * circumference;
-    const bufferDashoffset = clampedBuffer !== void 0 ? circumference - clampedBuffer / 100 * circumference : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center relative", className),
+        className: classNames.cn("relative w-full overflow-hidden rounded-full", className),
         style: {
-          width: colors.normalizeSize(size),
-          height: colors.normalizeSize(size),
+          height: colors.normalizeSize(height),
+          backgroundColor: secondaryColor,
           ...style,
           opacity,
           transition: transitionStyle
@@ -68,75 +61,48 @@ const ProgressRing = react.forwardRef(
         "aria-valuemax": 100,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "svg",
+          gradient && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: secondaryColor || "#8b5cf6" })
+          ] }) }) }),
+          clampedBuffer !== void 0 && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              className: classNames.cn(indeterminate && "animate-spinner-rotate"),
-              width: sizeValue,
-              height: sizeValue,
-              viewBox: `0 0 ${sizeValue} ${sizeValue}`,
-              style: indeterminate ? {
-                animation: `spinner-rotate ${effectiveDuration} linear infinite`,
-                animationDirection: reverse ? "reverse" : "normal"
-              } : void 0,
-              children: [
-                gradient && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color }),
-                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: secondaryColor === "#e0e0e0" ? "#8b5cf6" : secondaryColor })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: gradient ? "#e0e0e0" : secondaryColor,
-                    strokeWidth: thicknessValue
-                  }
-                ),
-                bufferDashoffset !== void 0 && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: gradient ? `url(#${gradientId})` : color,
-                    strokeWidth: thicknessValue,
-                    strokeLinecap: "round",
-                    strokeDasharray: circumference,
-                    strokeDashoffset: bufferDashoffset,
-                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
-                    opacity: 0.3
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: gradient ? `url(#${gradientId})` : color,
-                    strokeWidth: thicknessValue,
-                    strokeLinecap: "round",
-                    strokeDasharray: circumference,
-                    strokeDashoffset: indeterminate ? circumference * 0.75 : strokeDashoffset,
-                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
-                    style: {
-                      transition: indeterminate ? "none" : "stroke-dashoffset 0.3s ease-in-out"
-                    }
-                  }
-                )
-              ]
+              className: "absolute h-full rounded-full opacity-30",
+              style: {
+                width: `${clampedBuffer}%`,
+                backgroundColor: color
+              }
+            }
+          ),
+          indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute h-full rounded-full",
+              style: {
+                backgroundColor: gradient ? `url(#${gradientId})` : color,
+                animation: `progress-indeterminate ${effectiveDuration} ease-in-out infinite`,
+                animationDirection: reverse ? "reverse" : "normal",
+                width: "40%"
+              }
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "h-full rounded-full transition-all duration-300 ease-in-out",
+              style: {
+                width: `${clampedValue}%`,
+                background: gradient ? `url(#${gradientId})` : color
+              }
             }
           ),
           showValue && !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
-              className: "absolute text-sm font-semibold",
-              style: { color },
+              className: "absolute inset-0 flex items-center justify-center text-xs font-medium",
+              style: {
+                color: clampedValue > 50 ? colors.getContrastColor(color) : secondaryColor === "#e0e0e0" ? "#000000" : colors.getContrastColor(secondaryColor)
+              },
               children: [
                 clampedValue,
                 "%"
@@ -148,5 +114,5 @@ const ProgressRing = react.forwardRef(
     );
   }
 );
-ProgressRing.displayName = "ProgressRing";
-exports.ProgressRing = ProgressRing;
+ProgressBar.displayName = "ProgressBar";
+exports.ProgressBar = ProgressBar;

package/dist/index25.js

@@ -1,15 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
-import { normalizeSize, parseSizeToNumber } from "./index4.js";
+import { normalizeSize, getContrastColor } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
 import { cn } from "./index3.js";
-const ProgressRing = forwardRef(
+const ProgressBar = forwardRef(
   ({
     value = 0,
     indeterminate = false,
     showValue = false,
-    size = "lg",
-    thickness = 4,
+    height = "0.5rem",
     color = "#3b82f6",
     secondaryColor = "#e0e0e0",
     gradient = false,
@@ -22,14 +21,14 @@ const ProgressRing = forwardRef(
     transition,
     className,
     style,
-    testId = "progress-ring",
+    testId = "progress-bar",
     visible = true,
     ariaLabel,
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const gradientId = useMemo(() => `progress-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
+    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
@@ -39,22 +38,16 @@ const ProgressRing = forwardRef(
     if (!shouldRender) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
-    const sizeValue = parseSizeToNumber(size, 56);
-    const thicknessValue = parseSizeToNumber(thickness, 4);
-    const radius = (sizeValue - thicknessValue * 2) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const strokeDashoffset = circumference - clampedValue / 100 * circumference;
-    const bufferDashoffset = clampedBuffer !== void 0 ? circumference - clampedBuffer / 100 * circumference : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center relative", className),
+        className: cn("relative w-full overflow-hidden rounded-full", className),
         style: {
-          width: normalizeSize(size),
-          height: normalizeSize(size),
+          height: normalizeSize(height),
+          backgroundColor: secondaryColor,
           ...style,
           opacity,
           transition: transitionStyle
@@ -66,75 +59,48 @@ const ProgressRing = forwardRef(
         "aria-valuemax": 100,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxs(
-            "svg",
+          gradient && !indeterminate && /* @__PURE__ */ jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: secondaryColor || "#8b5cf6" })
+          ] }) }) }),
+          clampedBuffer !== void 0 && !indeterminate && /* @__PURE__ */ jsx(
+            "div",
             {
-              className: cn(indeterminate && "animate-spinner-rotate"),
-              width: sizeValue,
-              height: sizeValue,
-              viewBox: `0 0 ${sizeValue} ${sizeValue}`,
-              style: indeterminate ? {
-                animation: `spinner-rotate ${effectiveDuration} linear infinite`,
-                animationDirection: reverse ? "reverse" : "normal"
-              } : void 0,
-              children: [
-                gradient && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color }),
-                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: secondaryColor === "#e0e0e0" ? "#8b5cf6" : secondaryColor })
-                ] }) }),
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: gradient ? "#e0e0e0" : secondaryColor,
-                    strokeWidth: thicknessValue
-                  }
-                ),
-                bufferDashoffset !== void 0 && !indeterminate && /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: gradient ? `url(#${gradientId})` : color,
-                    strokeWidth: thicknessValue,
-                    strokeLinecap: "round",
-                    strokeDasharray: circumference,
-                    strokeDashoffset: bufferDashoffset,
-                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
-                    opacity: 0.3
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: gradient ? `url(#${gradientId})` : color,
-                    strokeWidth: thicknessValue,
-                    strokeLinecap: "round",
-                    strokeDasharray: circumference,
-                    strokeDashoffset: indeterminate ? circumference * 0.75 : strokeDashoffset,
-                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
-                    style: {
-                      transition: indeterminate ? "none" : "stroke-dashoffset 0.3s ease-in-out"
-                    }
-                  }
-                )
-              ]
+              className: "absolute h-full rounded-full opacity-30",
+              style: {
+                width: `${clampedBuffer}%`,
+                backgroundColor: color
+              }
+            }
+          ),
+          indeterminate ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute h-full rounded-full",
+              style: {
+                backgroundColor: gradient ? `url(#${gradientId})` : color,
+                animation: `progress-indeterminate ${effectiveDuration} ease-in-out infinite`,
+                animationDirection: reverse ? "reverse" : "normal",
+                width: "40%"
+              }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full rounded-full transition-all duration-300 ease-in-out",
+              style: {
+                width: `${clampedValue}%`,
+                background: gradient ? `url(#${gradientId})` : color
+              }
             }
           ),
           showValue && !indeterminate && /* @__PURE__ */ jsxs(
             "span",
             {
-              className: "absolute text-sm font-semibold",
-              style: { color },
+              className: "absolute inset-0 flex items-center justify-center text-xs font-medium",
+              style: {
+                color: clampedValue > 50 ? getContrastColor(color) : secondaryColor === "#e0e0e0" ? "#000000" : getContrastColor(secondaryColor)
+              },
               children: [
                 clampedValue,
                 "%"
@@ -146,7 +112,7 @@ const ProgressRing = forwardRef(
     );
   }
 );
-ProgressRing.displayName = "ProgressRing";
+ProgressBar.displayName = "ProgressBar";
 export {
-  ProgressRing
+  ProgressBar
 };