premium-react-loaders 4.0.0 → 4.1.1

package/dist/index39.cjs

@@ -2,112 +2,166 @@
 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 ShimmerText = react.forwardRef(
+const LoaderTransition = react.forwardRef(
   ({
-    width = "100%",
-    height = 16,
-    borderRadius = 4,
-    baseColor = "#e5e7eb",
-    highlightColor = "#f3f4f6",
-    direction = "left-to-right",
-    lines = 3,
-    lineGap = 12,
-    lastLineWidth = "75%",
-    speed = "normal",
-    respectMotionPreference = true,
-    delay = 0,
-    minDuration = 0,
-    transition,
+    loading,
+    loadingContent,
+    children,
+    transitionType = "fade",
+    duration = 300,
+    timing = "ease-out",
+    keepMounted = false,
+    exitDelay = 0,
+    appearOnMount = false,
     className,
     style,
-    testId = "shimmer-text",
+    testId = "loader-transition",
+    ariaLabel,
     visible = true,
-    ariaLabel = "Loading text...",
+    delay = 0,
+    minDuration = 0,
+    transition: transitionProp,
     ...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 getGradientDirection = () => {
-      switch (direction) {
-        case "right-to-left":
-          return "to left";
-        case "top-to-bottom":
-          return "to bottom";
-        case "bottom-to-top":
-          return "to top";
-        default:
-          return "to right";
+    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;
       }
-    };
-    const getAnimationName = () => {
-      switch (direction) {
-        case "right-to-left":
-          return "shimmer-rtl";
-        case "top-to-bottom":
-          return "shimmer-ttb";
-        case "bottom-to-top":
-          return "shimmer-btt";
-        default:
-          return "shimmer-ltr";
+      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 {
+        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);
+        }
+      }
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, [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}`;
+      }
+      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 (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 (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;
     };
-    const normalizedGap = typeof lineGap === "number" ? `${lineGap}px` : lineGap;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const shouldShowLoading = showLoading || keepMounted && loading;
+    const shouldShowContent = showContent || keepMounted && !loading;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("flex flex-col", className),
-        style: {
-          gap: normalizedGap,
-          opacity,
-          transition: transitionStyle,
-          ...style
-        },
+        className: classNames.cn("relative", className),
+        style,
         role: "status",
         "aria-label": ariaLabel,
-        "aria-busy": "true",
+        "aria-busy": loading,
         ...rest,
-        children: Array.from({ length: lines }, (_, index) => {
-          const isLastLine = index === lines - 1;
-          const lineWidth = isLastLine && lines > 1 ? lastLineWidth : width;
-          return /* @__PURE__ */ jsxRuntime.jsx(
+        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: "relative overflow-hidden",
+              className: getTransitionClasses(false, isTransitioning),
               style: {
-                width: typeof lineWidth === "number" ? `${lineWidth}px` : lineWidth,
-                height: typeof height === "number" ? `${height}px` : height,
-                borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
-                backgroundColor: baseColor
+                transitionDuration: `${duration}ms`,
+                display: showContent ? "block" : "none"
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "absolute inset-0",
-                  style: {
-                    background: `linear-gradient(${getGradientDirection()}, transparent 0%, ${highlightColor} 50%, transparent 100%)`,
-                    animation: `${getAnimationName()} ${effectiveDuration} infinite`,
-                    animationDelay: `${index * 100}ms`
-                  }
-                }
-              )
-            },
-            index
-          );
-        })
+              children
+            }
+          )
+        ]
       }
     );
   }
 );
-ShimmerText.displayName = "ShimmerText";
-exports.ShimmerText = ShimmerText;
+LoaderTransition.displayName = "LoaderTransition";
+exports.LoaderTransition = LoaderTransition;

package/dist/index39.js

@@ -1,113 +1,167 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
 import { cn } from "./index3.js";
-const ShimmerText = forwardRef(
+const LoaderTransition = forwardRef(
   ({
-    width = "100%",
-    height = 16,
-    borderRadius = 4,
-    baseColor = "#e5e7eb",
-    highlightColor = "#f3f4f6",
-    direction = "left-to-right",
-    lines = 3,
-    lineGap = 12,
-    lastLineWidth = "75%",
-    speed = "normal",
-    respectMotionPreference = true,
-    delay = 0,
-    minDuration = 0,
-    transition,
+    loading,
+    loadingContent,
+    children,
+    transitionType = "fade",
+    duration = 300,
+    timing = "ease-out",
+    keepMounted = false,
+    exitDelay = 0,
+    appearOnMount = false,
     className,
     style,
-    testId = "shimmer-text",
+    testId = "loader-transition",
+    ariaLabel,
     visible = true,
-    ariaLabel = "Loading text...",
+    delay = 0,
+    minDuration = 0,
+    transition: transitionProp,
     ...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 getGradientDirection = () => {
-      switch (direction) {
-        case "right-to-left":
-          return "to left";
-        case "top-to-bottom":
-          return "to bottom";
-        case "bottom-to-top":
-          return "to top";
-        default:
-          return "to right";
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [showLoading, setShowLoading] = useState(appearOnMount ? loading : false);
+    const [showContent, setShowContent] = useState(!appearOnMount && !loading);
+    const timeoutRef = useRef(null);
+    const entryTimeRef = useRef(null);
+    useEffect(() => {
+      if (!visible) {
+        setShowLoading(false);
+        setShowContent(false);
+        return;
       }
-    };
-    const getAnimationName = () => {
-      switch (direction) {
-        case "right-to-left":
-          return "shimmer-rtl";
-        case "top-to-bottom":
-          return "shimmer-ttb";
-        case "bottom-to-top":
-          return "shimmer-btt";
-        default:
-          return "shimmer-ltr";
+      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 {
+        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);
+        }
+      }
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, [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}`;
+      }
+      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 (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 (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;
     };
-    const normalizedGap = typeof lineGap === "number" ? `${lineGap}px` : lineGap;
-    return /* @__PURE__ */ jsx(
+    const shouldShowLoading = showLoading || keepMounted && loading;
+    const shouldShowContent = showContent || keepMounted && !loading;
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("flex flex-col", className),
-        style: {
-          gap: normalizedGap,
-          opacity,
-          transition: transitionStyle,
-          ...style
-        },
+        className: cn("relative", className),
+        style,
         role: "status",
         "aria-label": ariaLabel,
-        "aria-busy": "true",
+        "aria-busy": loading,
         ...rest,
-        children: Array.from({ length: lines }, (_, index) => {
-          const isLastLine = index === lines - 1;
-          const lineWidth = isLastLine && lines > 1 ? lastLineWidth : width;
-          return /* @__PURE__ */ jsx(
+        children: [
+          shouldShowLoading && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: getTransitionClasses(true, isTransitioning),
+              style: {
+                transitionDuration: `${duration}ms`,
+                display: showLoading ? "block" : "none"
+              },
+              children: loadingContent
+            }
+          ),
+          shouldShowContent && /* @__PURE__ */ jsx(
             "div",
             {
-              className: "relative overflow-hidden",
+              className: getTransitionClasses(false, isTransitioning),
               style: {
-                width: typeof lineWidth === "number" ? `${lineWidth}px` : lineWidth,
-                height: typeof height === "number" ? `${height}px` : height,
-                borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
-                backgroundColor: baseColor
+                transitionDuration: `${duration}ms`,
+                display: showContent ? "block" : "none"
               },
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "absolute inset-0",
-                  style: {
-                    background: `linear-gradient(${getGradientDirection()}, transparent 0%, ${highlightColor} 50%, transparent 100%)`,
-                    animation: `${getAnimationName()} ${effectiveDuration} infinite`,
-                    animationDelay: `${index * 100}ms`
-                  }
-                }
-              )
-            },
-            index
-          );
-        })
+              children
+            }
+          )
+        ]
       }
     );
   }
 );
-ShimmerText.displayName = "ShimmerText";
+LoaderTransition.displayName = "LoaderTransition";
 export {
-  ShimmerText
+  LoaderTransition
 };