premium-react-loaders 3.1.1 → 4.1.0

package/dist/index57.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { cn } from "./index3.js";
+const LiveRegion = forwardRef(
+  ({
+    message,
+    politeness = "polite",
+    clearAfter,
+    atomic = true,
+    relevant = "additions",
+    className
+  }, ref) => {
+    const [displayMessage, setDisplayMessage] = useState(message);
+    const clearTimerRef = useRef(null);
+    useEffect(() => {
+      setDisplayMessage(message);
+      if (clearTimerRef.current) {
+        clearTimeout(clearTimerRef.current);
+        clearTimerRef.current = null;
+      }
+      if (clearAfter && message) {
+        clearTimerRef.current = setTimeout(() => {
+          setDisplayMessage("");
+        }, clearAfter);
+      }
+      return () => {
+        if (clearTimerRef.current) {
+          clearTimeout(clearTimerRef.current);
+        }
+      };
+    }, [message, clearAfter]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        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
+      }
+    );
+  }
+);
+LiveRegion.displayName = "LiveRegion";
+export {
+  LiveRegion
+};

package/dist/index58.cjs

@@ -0,0 +1,55 @@
+"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 MorphBlob = react.forwardRef(
+  ({
+    size = 80,
+    color = "#3b82f6",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "morph-blob",
+    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;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: { opacity, transition: transitionStyle, ...style },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        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`
+            }
+          }
+        )
+      }
+    );
+  }
+);
+MorphBlob.displayName = "MorphBlob";
+exports.MorphBlob = MorphBlob;

package/dist/index58.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { cn } from "./index3.js";
+const MorphBlob = forwardRef(
+  ({
+    size = 80,
+    color = "#3b82f6",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "morph-blob",
+    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;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style: { opacity, transition: transitionStyle, ...style },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        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`
+            }
+          }
+        )
+      }
+    );
+  }
+);
+MorphBlob.displayName = "MorphBlob";
+export {
+  MorphBlob
+};

package/dist/index59.cjs

@@ -0,0 +1,119 @@
+"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 LiquidFill = react.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
+  }, 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 progressLabel = ariaLabel || (isIndeterminate ? "Loading..." : `Loading ${clampedValue}%`);
+    const fillBottom = `${clampedValue}%`;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: { opacity, transition: transitionStyle, ...style },
+        role: "status",
+        "aria-label": progressLabel,
+        "aria-busy": "true",
+        ...rest,
+        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,
+                    "%"
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+LiquidFill.displayName = "LiquidFill";
+exports.LiquidFill = LiquidFill;

package/dist/index59.js

@@ -0,0 +1,119 @@
+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 LiquidFill = 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
+  }, 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 progressLabel = ariaLabel || (isIndeterminate ? "Loading..." : `Loading ${clampedValue}%`);
+    const fillBottom = `${clampedValue}%`;
+    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,
+                    "%"
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+LiquidFill.displayName = "LiquidFill";
+export {
+  LiquidFill
+};

package/dist/index60.cjs

@@ -0,0 +1,70 @@
+"use strict";
+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("./index71.cjs");
+const classNames = require("./index3.cjs");
+const WaveCircle = react.forwardRef(
+  ({
+    size = 80,
+    color = "#3b82f6",
+    ringCount = 3,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "wave-circle",
+    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(5, Math.max(2, ringCount));
+    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: size * 0.15, height: size * 0.15, backgroundColor: color }
+            }
+          ),
+          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;

package/dist/index60.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { parseDurationMs } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { cn } from "./index3.js";
+const WaveCircle = forwardRef(
+  ({
+    size = 80,
+    color = "#3b82f6",
+    ringCount = 3,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "wave-circle",
+    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(5, Math.max(2, ringCount));
+    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: size * 0.15, height: size * 0.15, backgroundColor: color }
+            }
+          ),
+          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";
+export {
+  WaveCircle
+};

package/dist/index61.cjs

@@ -0,0 +1,66 @@
+"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 GradientSpinner = react.forwardRef(
+  ({
+    size = 48,
+    color = "#3b82f6",
+    secondaryColor = "#8b5cf6",
+    thickness = 4,
+    backgroundColor = "white",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "gradient-spinner",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(visible, delay, minDuration, transition);
+    if (!shouldRender) return null;
+    const 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: `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 }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+GradientSpinner.displayName = "GradientSpinner";
+exports.GradientSpinner = GradientSpinner;

package/dist/index61.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
+import { cn } from "./index3.js";
+const GradientSpinner = forwardRef(
+  ({
+    size = 48,
+    color = "#3b82f6",
+    secondaryColor = "#8b5cf6",
+    thickness = 4,
+    backgroundColor = "white",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "gradient-spinner",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(visible, delay, minDuration, transition);
+    if (!shouldRender) return null;
+    const 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: `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 }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+GradientSpinner.displayName = "GradientSpinner";
+export {
+  GradientSpinner
+};