premium-react-loaders 2.2.0 → 2.3.0

package/dist/index29.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("./index35.cjs");
+const hooks = require("./index36.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const PulseBars = react.forwardRef(

package/dist/index29.js

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

package/dist/index30.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("./index35.cjs");
+const hooks = require("./index36.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const TypingIndicator = react.forwardRef(

package/dist/index30.js

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

package/dist/index31.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("./index35.cjs");
+const hooks = require("./index36.cjs");
 const classNames = require("./index3.cjs");
 const LoaderOverlay = react.forwardRef(
   ({

package/dist/index31.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useLoaderVisibility } from "./index35.js";
+import { useLoaderVisibility } from "./index36.js";
 import { cn } from "./index3.js";
 const LoaderOverlay = forwardRef(
   ({

package/dist/index32.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("./index35.cjs");
+const hooks = require("./index36.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const ButtonSpinner = react.forwardRef(

package/dist/index32.js

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

package/dist/index33.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("./index35.cjs");
+const hooks = require("./index36.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SuccessCheckmark = react.forwardRef(

package/dist/index33.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useLoaderVisibility } from "./index35.js";
+import { useLoaderVisibility } from "./index36.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SuccessCheckmark = forwardRef(

package/dist/index34.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("./index35.cjs");
+const hooks = require("./index36.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const ErrorIndicator = react.forwardRef(

package/dist/index34.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useLoaderVisibility } from "./index35.js";
+import { useLoaderVisibility } from "./index36.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const ErrorIndicator = forwardRef(

package/dist/index35.cjs

@@ -1,125 +1,167 @@
 "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);
-          }
-        }, delay);
+const classNames = require("./index3.cjs");
+const LoaderTransition = react.forwardRef(
+  ({
+    loading,
+    loadingContent,
+    children,
+    transitionType = "fade",
+    duration = 300,
+    timing = "ease-out",
+    keepMounted = false,
+    exitDelay = 0,
+    appearOnMount = false,
+    className,
+    style,
+    testId = "loader-transition",
+    ariaLabel,
+    visible = true,
+    delay = 0,
+    minDuration = 0,
+    transition: transitionProp,
+    ...rest
+  }, ref) => {
+    const [isTransitioning, setIsTransitioning] = react.useState(false);
+    const [showLoading, setShowLoading] = react.useState(appearOnMount ? loading : false);
+    const [showContent, setShowContent] = react.useState(!appearOnMount && !loading);
+    const timeoutRef = react.useRef(null);
+    const entryTimeRef = react.useRef(null);
+    react.useEffect(() => {
+      if (!visible) {
+        setShowLoading(false);
+        setShowContent(false);
+        return;
+      }
+      if (loading) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        if (delay > 0) {
+          timeoutRef.current = setTimeout(() => {
+            setShowLoading(true);
+            setShowContent(false);
+            entryTimeRef.current = Date.now();
+          }, delay);
+        } else {
+          setShowLoading(true);
+          setShowContent(false);
+          entryTimeRef.current = Date.now();
+        }
       } else {
-        setShouldRender(true);
-        showTimeRef.current = Date.now();
-        if (hasTransition) {
+        const elapsed = entryTimeRef.current ? Date.now() - entryTimeRef.current : 0;
+        const remainingMinDuration = Math.max(0, minDuration - elapsed);
+        const totalDelay = exitDelay + remainingMinDuration;
+        if (totalDelay > 0) {
+          timeoutRef.current = setTimeout(() => {
+            setIsTransitioning(true);
+            timeoutRef.current = setTimeout(() => {
+              setShowLoading(false);
+              setShowContent(true);
+              setIsTransitioning(false);
+            }, duration);
+          }, totalDelay);
+        } else {
           setIsTransitioning(true);
+          timeoutRef.current = setTimeout(() => {
+            setShowLoading(false);
+            setShowContent(true);
+            setIsTransitioning(false);
+          }, duration);
         }
       }
-    } else {
-      const hideLoader = () => {
-        if (hasTransition) {
-          setIsTransitioning(false);
-          transitionTimerRef.current = setTimeout(() => {
-            setShouldRender(false);
-            showTimeRef.current = null;
-          }, transitionDuration);
-        } else {
-          setShouldRender(false);
-          showTimeRef.current = null;
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
         }
       };
-      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();
+    }, [loading, visible, delay, minDuration, exitDelay, duration]);
+    const getTransitionClasses = (isLoading, isTransition) => {
+      const baseClasses = "loader-transition";
+      const timingClass = `loader-transition-${timing}`;
+      if (transitionType === "none") {
+        return baseClasses;
+      }
+      if (transitionType === "fade") {
+        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-fade-enter-active`;
+        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-fade-exit-active`;
+        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-fade-enter-active`;
+        return `${baseClasses} ${timingClass}`;
       }
-    }
-    return () => {
-      if (delayTimerRef.current) {
-        clearTimeout(delayTimerRef.current);
+      if (transitionType === "slide-up") {
+        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-up-enter-active`;
+        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-up-exit-active`;
+        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-up-enter-active`;
+        return `${baseClasses} ${timingClass}`;
       }
-      if (minDurationTimerRef.current) {
-        clearTimeout(minDurationTimerRef.current);
+      if (transitionType === "slide-down") {
+        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-down-enter-active`;
+        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-down-exit-active`;
+        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-down-enter-active`;
+        return `${baseClasses} ${timingClass}`;
       }
-      if (transitionTimerRef.current) {
-        clearTimeout(transitionTimerRef.current);
+      if (transitionType === "slide-left") {
+        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-left-enter-active`;
+        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-left-exit-active`;
+        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-left-enter-active`;
+        return `${baseClasses} ${timingClass}`;
       }
+      if (transitionType === "slide-right") {
+        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-right-enter-active`;
+        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-right-exit-active`;
+        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-right-enter-active`;
+        return `${baseClasses} ${timingClass}`;
+      }
+      if (transitionType === "scale") {
+        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-scale-enter-active`;
+        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-scale-exit-active`;
+        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-scale-enter-active`;
+        return `${baseClasses} ${timingClass}`;
+      }
+      return baseClasses;
     };
-  }, [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;
+    const shouldShowLoading = showLoading || keepMounted && loading;
+    const shouldShowContent = showContent || keepMounted && !loading;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("relative", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": loading,
+        ...rest,
+        children: [
+          shouldShowLoading && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: getTransitionClasses(true, isTransitioning),
+              style: {
+                transitionDuration: `${duration}ms`,
+                display: showLoading ? "block" : "none"
+              },
+              children: loadingContent
+            }
+          ),
+          shouldShowContent && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: getTransitionClasses(false, isTransitioning),
+              style: {
+                transitionDuration: `${duration}ms`,
+                display: showContent ? "block" : "none"
+              },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+LoaderTransition.displayName = "LoaderTransition";
+exports.LoaderTransition = LoaderTransition;