premium-react-loaders 4.0.0 → 4.1.0

package/dist/index57.js

@@ -1,119 +1,53 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
 import { cn } from "./index3.js";
-const LiquidFill = forwardRef(
+const LiveRegion = forwardRef(
   ({
-    value,
-    size = 80,
-    color = "#3b82f6",
-    waveAmplitude = 4,
-    onComplete,
-    speed = "normal",
-    respectMotionPreference = true,
-    delay = 0,
-    minDuration = 0,
-    transition,
-    className,
-    style,
-    testId = "liquid-fill",
-    visible = true,
-    ariaLabel,
-    ...rest
+    message,
+    politeness = "polite",
+    clearAfter,
+    atomic = true,
+    relevant = "additions",
+    className
   }, 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 isIndeterminate = value === void 0;
-    const clampedValue = isIndeterminate ? 50 : Math.min(100, Math.max(0, value));
+    const [displayMessage, setDisplayMessage] = useState(message);
+    const clearTimerRef = useRef(null);
     useEffect(() => {
-      if (!isIndeterminate && clampedValue === 100 && onCompleteRef.current) {
-        onCompleteRef.current();
+      setDisplayMessage(message);
+      if (clearTimerRef.current) {
+        clearTimeout(clearTimerRef.current);
+        clearTimerRef.current = null;
       }
-    }, [clampedValue, isIndeterminate]);
-    if (!shouldRender) return null;
-    const progressLabel = ariaLabel || (isIndeterminate ? "Loading..." : `Loading ${clampedValue}%`);
-    const fillBottom = `${clampedValue}%`;
+      if (clearAfter && message) {
+        clearTimerRef.current = setTimeout(() => {
+          setDisplayMessage("");
+        }, clearAfter);
+      }
+      return () => {
+        if (clearTimerRef.current) {
+          clearTimeout(clearTimerRef.current);
+        }
+      };
+    }, [message, clearAfter]);
     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": progressLabel,
-        "aria-busy": "true",
-        ...rest,
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "relative overflow-hidden rounded-full",
-            style: { width: size, height: size },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "absolute inset-0 rounded-full",
-                  style: { backgroundColor: `${color}20` }
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "absolute left-0 right-0 bottom-0",
-                  style: {
-                    height: fillBottom,
-                    transition: isIndeterminate ? void 0 : "height 0.4s ease-in-out",
-                    overflow: "hidden"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          top: -waveAmplitude * 2,
-                          left: 0,
-                          width: "200%",
-                          height: waveAmplitude * 4,
-                          backgroundColor: color,
-                          borderRadius: "40%",
-                          animation: `liquid-wave ${effectiveDuration} linear infinite`
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "absolute bottom-0 left-0 right-0",
-                        style: { backgroundColor: color, top: waveAmplitude * 2 }
-                      }
-                    )
-                  ]
-                }
-              ),
-              !isIndeterminate && /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  className: "absolute inset-0 flex items-center justify-center text-xs font-bold",
-                  style: { color: clampedValue > 50 ? "#fff" : color },
-                  children: [
-                    clampedValue,
-                    "%"
-                  ]
-                }
-              )
-            ]
-          }
-        )
+        className: cn(
+          // Visually hidden but accessible to screen readers
+          "sr-only absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0",
+          className
+        ),
+        role: politeness === "assertive" ? "alert" : "status",
+        "aria-live": politeness,
+        "aria-atomic": atomic,
+        "aria-relevant": relevant,
+        children: displayMessage
       }
     );
   }
 );
-LiquidFill.displayName = "LiquidFill";
+LiveRegion.displayName = "LiveRegion";
 export {
-  LiquidFill
+  LiveRegion
 };

package/dist/index58.cjs

@@ -2,14 +2,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const colors = require("./index4.cjs");
-const hooks = require("./index64.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
-const WaveCircle = react.forwardRef(
+const MorphBlob = react.forwardRef(
   ({
     size = 80,
     color = "#3b82f6",
-    ringCount = 3,
     speed = "normal",
     respectMotionPreference = true,
     delay = 0,
@@ -17,7 +15,7 @@ const WaveCircle = react.forwardRef(
     transition,
     className,
     style,
-    testId = "wave-circle",
+    testId = "morph-blob",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -26,45 +24,32 @@ const WaveCircle = 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(5, Math.max(2, ringCount));
-    const durationMs = colors.parseDurationMs(effectiveDuration);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    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 },
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: { 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: size * 0.15, height: size * 0.15, backgroundColor: color }
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: size,
+              height: size,
+              backgroundColor: color,
+              borderRadius: "60% 40% 30% 70% / 60% 30% 70% 40%",
+              animation: `morph-blob ${effectiveDuration} ease-in-out infinite`
             }
-          ),
-          Array.from({ length: clampedCount }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              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
-          ))
-        ]
+          }
+        )
       }
     );
   }
 );
-WaveCircle.displayName = "WaveCircle";
-exports.WaveCircle = WaveCircle;
+MorphBlob.displayName = "MorphBlob";
+exports.MorphBlob = MorphBlob;

package/dist/index58.js

@@ -1,13 +1,11 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { parseDurationMs } from "./index4.js";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-const WaveCircle = forwardRef(
+const MorphBlob = forwardRef(
   ({
     size = 80,
     color = "#3b82f6",
-    ringCount = 3,
     speed = "normal",
     respectMotionPreference = true,
     delay = 0,
@@ -15,7 +13,7 @@ const WaveCircle = forwardRef(
     transition,
     className,
     style,
-    testId = "wave-circle",
+    testId = "morph-blob",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -24,47 +22,34 @@ const WaveCircle = forwardRef(
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(visible, delay, minDuration, transition);
     if (!shouldRender) return null;
-    const clampedCount = Math.min(5, Math.max(2, ringCount));
-    const durationMs = parseDurationMs(effectiveDuration);
-    return /* @__PURE__ */ jsxs(
+    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 },
+        className: cn("inline-flex items-center justify-center", className),
+        style: { 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: size * 0.15, height: size * 0.15, backgroundColor: color }
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: size,
+              height: size,
+              backgroundColor: color,
+              borderRadius: "60% 40% 30% 70% / 60% 30% 70% 40%",
+              animation: `morph-blob ${effectiveDuration} ease-in-out infinite`
             }
-          ),
-          Array.from({ length: clampedCount }, (_, i) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              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
-          ))
-        ]
+          }
+        )
       }
     );
   }
 );
-WaveCircle.displayName = "WaveCircle";
+MorphBlob.displayName = "MorphBlob";
 export {
-  WaveCircle
+  MorphBlob
 };

package/dist/index59.cjs

@@ -2,15 +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 hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
-const GradientSpinner = react.forwardRef(
+const LiquidFill = react.forwardRef(
   ({
-    size = 48,
+    value,
+    size = 80,
     color = "#3b82f6",
-    secondaryColor = "#8b5cf6",
-    thickness = 4,
-    backgroundColor = "white",
+    waveAmplitude = 4,
+    onComplete,
     speed = "normal",
     respectMotionPreference = true,
     delay = 0,
@@ -18,49 +18,102 @@ const GradientSpinner = react.forwardRef(
     transition,
     className,
     style,
-    testId = "gradient-spinner",
+    testId = "liquid-fill",
     visible = true,
-    ariaLabel = "Loading...",
+    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 isIndeterminate = value === void 0;
+    const clampedValue = isIndeterminate ? 50 : Math.min(100, Math.max(0, value));
+    react.useEffect(() => {
+      if (!isIndeterminate && clampedValue === 100 && onCompleteRef.current) {
+        onCompleteRef.current();
+      }
+    }, [clampedValue, isIndeterminate]);
     if (!shouldRender) return null;
-    const inner = size - thickness * 2;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const progressLabel = ariaLabel || (isIndeterminate ? "Loading..." : `Loading ${clampedValue}%`);
+    const fillBottom = `${clampedValue}%`;
+    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 },
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: { opacity, transition: transitionStyle, ...style },
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": progressLabel,
         "aria-busy": "true",
         ...rest,
-        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: "absolute rounded-full",
-              style: { width: inner, height: inner, backgroundColor }
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "relative overflow-hidden rounded-full",
+            style: { width: size, height: size },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 rounded-full",
+                  style: { backgroundColor: `${color}20` }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "absolute left-0 right-0 bottom-0",
+                  style: {
+                    height: fillBottom,
+                    transition: isIndeterminate ? void 0 : "height 0.4s ease-in-out",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          top: -waveAmplitude * 2,
+                          left: 0,
+                          width: "200%",
+                          height: waveAmplitude * 4,
+                          backgroundColor: color,
+                          borderRadius: "40%",
+                          animation: `liquid-wave ${effectiveDuration} linear infinite`
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "absolute bottom-0 left-0 right-0",
+                        style: { backgroundColor: color, top: waveAmplitude * 2 }
+                      }
+                    )
+                  ]
+                }
+              ),
+              !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: "absolute inset-0 flex items-center justify-center text-xs font-bold",
+                  style: { color: clampedValue > 50 ? "#fff" : color },
+                  children: [
+                    clampedValue,
+                    "%"
+                  ]
+                }
+              )
+            ]
+          }
+        )
       }
     );
   }
 );
-GradientSpinner.displayName = "GradientSpinner";
-exports.GradientSpinner = GradientSpinner;
+LiquidFill.displayName = "LiquidFill";
+exports.LiquidFill = LiquidFill;

package/dist/index59.js

@@ -1,14 +1,14 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-const GradientSpinner = forwardRef(
+const LiquidFill = forwardRef(
   ({
-    size = 48,
+    value,
+    size = 80,
     color = "#3b82f6",
-    secondaryColor = "#8b5cf6",
-    thickness = 4,
-    backgroundColor = "white",
+    waveAmplitude = 4,
+    onComplete,
     speed = "normal",
     respectMotionPreference = true,
     delay = 0,
@@ -16,51 +16,104 @@ const GradientSpinner = forwardRef(
     transition,
     className,
     style,
-    testId = "gradient-spinner",
+    testId = "liquid-fill",
     visible = true,
-    ariaLabel = "Loading...",
+    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 isIndeterminate = value === void 0;
+    const clampedValue = isIndeterminate ? 50 : Math.min(100, Math.max(0, value));
+    useEffect(() => {
+      if (!isIndeterminate && clampedValue === 100 && onCompleteRef.current) {
+        onCompleteRef.current();
+      }
+    }, [clampedValue, isIndeterminate]);
     if (!shouldRender) return null;
-    const inner = size - thickness * 2;
-    return /* @__PURE__ */ jsxs(
+    const progressLabel = ariaLabel || (isIndeterminate ? "Loading..." : `Loading ${clampedValue}%`);
+    const fillBottom = `${clampedValue}%`;
+    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 },
+        className: cn("inline-flex items-center justify-center", className),
+        style: { opacity, transition: transitionStyle, ...style },
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": progressLabel,
         "aria-busy": "true",
         ...rest,
-        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: "absolute rounded-full",
-              style: { width: inner, height: inner, backgroundColor }
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative overflow-hidden rounded-full",
+            style: { width: size, height: size },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 rounded-full",
+                  style: { backgroundColor: `${color}20` }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "absolute left-0 right-0 bottom-0",
+                  style: {
+                    height: fillBottom,
+                    transition: isIndeterminate ? void 0 : "height 0.4s ease-in-out",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          top: -waveAmplitude * 2,
+                          left: 0,
+                          width: "200%",
+                          height: waveAmplitude * 4,
+                          backgroundColor: color,
+                          borderRadius: "40%",
+                          animation: `liquid-wave ${effectiveDuration} linear infinite`
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "absolute bottom-0 left-0 right-0",
+                        style: { backgroundColor: color, top: waveAmplitude * 2 }
+                      }
+                    )
+                  ]
+                }
+              ),
+              !isIndeterminate && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "absolute inset-0 flex items-center justify-center text-xs font-bold",
+                  style: { color: clampedValue > 50 ? "#fff" : color },
+                  children: [
+                    clampedValue,
+                    "%"
+                  ]
+                }
+              )
+            ]
+          }
+        )
       }
     );
   }
 );
-GradientSpinner.displayName = "GradientSpinner";
+LiquidFill.displayName = "LiquidFill";
 export {
-  GradientSpinner
+  LiquidFill
 };