premium-react-loaders 3.1.1 → 4.0.0

package/dist/index46.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const InfinityLoader = forwardRef(

package/dist/index47.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index64.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const MobiusLoader = react.forwardRef(

package/dist/index47.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const MobiusLoader = forwardRef(

package/dist/index48.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index64.cjs");
 const classNames = require("./index3.cjs");
 const LoadingText = react.forwardRef(
   ({

package/dist/index48.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
 import { cn } from "./index3.js";
 const LoadingText = forwardRef(
   ({

package/dist/index49.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index64.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const CubeSpinner = react.forwardRef(

package/dist/index49.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const CubeSpinner = forwardRef(

package/dist/index50.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index64.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const FlipCard = react.forwardRef(

package/dist/index50.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const FlipCard = forwardRef(

package/dist/index51.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index64.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const PlaneRotate = react.forwardRef(

package/dist/index51.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const PlaneRotate = forwardRef(

package/dist/index52.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index64.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const Helix = react.forwardRef(

package/dist/index52.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
 import { cn } from "./index3.js";
 import { parseSizeToNumber, normalizeSize } from "./index4.js";
 const Helix = forwardRef(

package/dist/index53.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index64.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const PerspectiveRing = react.forwardRef(

package/dist/index53.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const PerspectiveRing = forwardRef(

package/dist/index54.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
-const hooks = require("./index56.cjs");
+const hooks = require("./index64.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const FormFieldLoader = react.forwardRef(

package/dist/index54.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index64.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const FormFieldLoader = forwardRef(

package/dist/index56.cjs

@@ -1,125 +1,55 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-function useReducedMotion() {
-  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
-  react.useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) {
-      return;
-    }
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setPrefersReducedMotion(mediaQuery.matches);
-    const handleChange = (event) => {
-      setPrefersReducedMotion(event.matches);
-    };
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", handleChange);
-      return () => mediaQuery.removeEventListener("change", handleChange);
-    } else {
-      mediaQuery.addListener(handleChange);
-      return () => mediaQuery.removeListener(handleChange);
-    }
-  }, []);
-  return prefersReducedMotion;
-}
-function getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion) {
-  if (respectMotionPreference && prefersReducedMotion) {
-    return "0.01ms";
-  }
-  if (typeof speed === "number") {
-    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(1e4, speed)) : 1e3;
-    return `${validSpeed}ms`;
-  }
-  const speedMap = {
-    slow: "2s",
-    normal: "1s",
-    fast: "0.5s"
-  };
-  return speedMap[speed] || speedMap.normal;
-}
-function useLoaderVisibility(visible = true, delay = 0, minDuration = 0, transition) {
-  const transitionDuration = transition === true ? 150 : typeof transition === "number" ? transition : 0;
-  const hasTransition = transitionDuration > 0;
-  const [shouldRender, setShouldRender] = react.useState(visible && delay === 0);
-  const [isTransitioning, setIsTransitioning] = react.useState(visible && delay === 0 && hasTransition);
-  const showTimeRef = react.useRef(visible && delay === 0 ? Date.now() : null);
-  const delayTimerRef = react.useRef(null);
-  const minDurationTimerRef = react.useRef(null);
-  const transitionTimerRef = react.useRef(null);
-  react.useEffect(() => {
-    if (delayTimerRef.current) {
-      clearTimeout(delayTimerRef.current);
-      delayTimerRef.current = null;
-    }
-    if (minDurationTimerRef.current) {
-      clearTimeout(minDurationTimerRef.current);
-      minDurationTimerRef.current = null;
-    }
-    if (transitionTimerRef.current) {
-      clearTimeout(transitionTimerRef.current);
-      transitionTimerRef.current = null;
-    }
-    if (visible) {
-      if (delay > 0) {
-        delayTimerRef.current = setTimeout(() => {
-          setShouldRender(true);
-          showTimeRef.current = Date.now();
-          if (hasTransition) {
-            setIsTransitioning(true);
+const hooks = require("./index64.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`
+            }
           }
-        }, delay);
-      } else {
-        setShouldRender(true);
-        showTimeRef.current = Date.now();
-        if (hasTransition) {
-          setIsTransitioning(true);
-        }
-      }
-    } else {
-      const hideLoader = () => {
-        if (hasTransition) {
-          setIsTransitioning(false);
-          transitionTimerRef.current = setTimeout(() => {
-            setShouldRender(false);
-            showTimeRef.current = null;
-          }, transitionDuration);
-        } else {
-          setShouldRender(false);
-          showTimeRef.current = null;
-        }
-      };
-      if (showTimeRef.current !== null && minDuration > 0) {
-        const elapsedTime = Date.now() - showTimeRef.current;
-        const remainingTime = minDuration - elapsedTime;
-        if (remainingTime > 0) {
-          minDurationTimerRef.current = setTimeout(hideLoader, remainingTime);
-        } else {
-          hideLoader();
-        }
-      } else {
-        hideLoader();
-      }
-    }
-    return () => {
-      if (delayTimerRef.current) {
-        clearTimeout(delayTimerRef.current);
+        )
       }
-      if (minDurationTimerRef.current) {
-        clearTimeout(minDurationTimerRef.current);
-      }
-      if (transitionTimerRef.current) {
-        clearTimeout(transitionTimerRef.current);
-      }
-    };
-  }, [visible, delay, minDuration, hasTransition, transitionDuration]);
-  const opacity = hasTransition ? isTransitioning ? 1 : 0 : 1;
-  const transitionStyle = hasTransition ? `opacity ${transitionDuration}ms ease-in-out` : "none";
-  return {
-    shouldRender,
-    opacity,
-    transitionStyle
-  };
-}
-exports.getEffectiveDuration = getEffectiveDuration;
-exports.useLoaderVisibility = useLoaderVisibility;
-exports.useReducedMotion = useReducedMotion;
+    );
+  }
+);
+MorphBlob.displayName = "MorphBlob";
+exports.MorphBlob = MorphBlob;

package/dist/index56.js

@@ -1,125 +1,55 @@
-import { useState, useRef, useEffect } from "react";
-function useReducedMotion() {
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) {
-      return;
-    }
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setPrefersReducedMotion(mediaQuery.matches);
-    const handleChange = (event) => {
-      setPrefersReducedMotion(event.matches);
-    };
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", handleChange);
-      return () => mediaQuery.removeEventListener("change", handleChange);
-    } else {
-      mediaQuery.addListener(handleChange);
-      return () => mediaQuery.removeListener(handleChange);
-    }
-  }, []);
-  return prefersReducedMotion;
-}
-function getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion) {
-  if (respectMotionPreference && prefersReducedMotion) {
-    return "0.01ms";
-  }
-  if (typeof speed === "number") {
-    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(1e4, speed)) : 1e3;
-    return `${validSpeed}ms`;
-  }
-  const speedMap = {
-    slow: "2s",
-    normal: "1s",
-    fast: "0.5s"
-  };
-  return speedMap[speed] || speedMap.normal;
-}
-function useLoaderVisibility(visible = true, delay = 0, minDuration = 0, transition) {
-  const transitionDuration = transition === true ? 150 : typeof transition === "number" ? transition : 0;
-  const hasTransition = transitionDuration > 0;
-  const [shouldRender, setShouldRender] = useState(visible && delay === 0);
-  const [isTransitioning, setIsTransitioning] = useState(visible && delay === 0 && hasTransition);
-  const showTimeRef = useRef(visible && delay === 0 ? Date.now() : null);
-  const delayTimerRef = useRef(null);
-  const minDurationTimerRef = useRef(null);
-  const transitionTimerRef = useRef(null);
-  useEffect(() => {
-    if (delayTimerRef.current) {
-      clearTimeout(delayTimerRef.current);
-      delayTimerRef.current = null;
-    }
-    if (minDurationTimerRef.current) {
-      clearTimeout(minDurationTimerRef.current);
-      minDurationTimerRef.current = null;
-    }
-    if (transitionTimerRef.current) {
-      clearTimeout(transitionTimerRef.current);
-      transitionTimerRef.current = null;
-    }
-    if (visible) {
-      if (delay > 0) {
-        delayTimerRef.current = setTimeout(() => {
-          setShouldRender(true);
-          showTimeRef.current = Date.now();
-          if (hasTransition) {
-            setIsTransitioning(true);
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.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`
+            }
           }
-        }, delay);
-      } else {
-        setShouldRender(true);
-        showTimeRef.current = Date.now();
-        if (hasTransition) {
-          setIsTransitioning(true);
-        }
-      }
-    } else {
-      const hideLoader = () => {
-        if (hasTransition) {
-          setIsTransitioning(false);
-          transitionTimerRef.current = setTimeout(() => {
-            setShouldRender(false);
-            showTimeRef.current = null;
-          }, transitionDuration);
-        } else {
-          setShouldRender(false);
-          showTimeRef.current = null;
-        }
-      };
-      if (showTimeRef.current !== null && minDuration > 0) {
-        const elapsedTime = Date.now() - showTimeRef.current;
-        const remainingTime = minDuration - elapsedTime;
-        if (remainingTime > 0) {
-          minDurationTimerRef.current = setTimeout(hideLoader, remainingTime);
-        } else {
-          hideLoader();
-        }
-      } else {
-        hideLoader();
-      }
-    }
-    return () => {
-      if (delayTimerRef.current) {
-        clearTimeout(delayTimerRef.current);
+        )
       }
-      if (minDurationTimerRef.current) {
-        clearTimeout(minDurationTimerRef.current);
-      }
-      if (transitionTimerRef.current) {
-        clearTimeout(transitionTimerRef.current);
-      }
-    };
-  }, [visible, delay, minDuration, hasTransition, transitionDuration]);
-  const opacity = hasTransition ? isTransitioning ? 1 : 0 : 1;
-  const transitionStyle = hasTransition ? `opacity ${transitionDuration}ms ease-in-out` : "none";
-  return {
-    shouldRender,
-    opacity,
-    transitionStyle
-  };
-}
+    );
+  }
+);
+MorphBlob.displayName = "MorphBlob";
 export {
-  getEffectiveDuration,
-  useLoaderVisibility,
-  useReducedMotion
+  MorphBlob
 };

package/dist/index57.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("./index64.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;