premium-react-loaders 2.3.0 → 3.0.0

package/dist/index36.js

@@ -1,125 +1,96 @@
-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);
-          }
-        }, 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);
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
+import { cn } from "./index3.js";
+const ShimmerBox = forwardRef(
+  ({
+    width = 200,
+    height,
+    borderRadius = 8,
+    baseColor = "#e5e7eb",
+    highlightColor = "#f3f4f6",
+    direction = "left-to-right",
+    aspectRatio,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "shimmer-box",
+    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 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";
       }
-      if (minDurationTimerRef.current) {
-        clearTimeout(minDurationTimerRef.current);
-      }
-      if (transitionTimerRef.current) {
-        clearTimeout(transitionTimerRef.current);
+    };
+    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";
       }
     };
-  }, [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
-  };
-}
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("relative overflow-hidden", className),
+        style: {
+          width: typeof width === "number" ? `${width}px` : width,
+          height: aspectRatio ? void 0 : typeof height === "number" ? `${height}px` : height || "100px",
+          aspectRatio,
+          borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+          backgroundColor: baseColor,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              background: `linear-gradient(${getGradientDirection()}, transparent 0%, ${highlightColor} 50%, transparent 100%)`,
+              animation: `${getAnimationName()} ${effectiveDuration} infinite`
+            }
+          }
+        )
+      }
+    );
+  }
+);
+ShimmerBox.displayName = "ShimmerBox";
 export {
-  getEffectiveDuration,
-  useLoaderVisibility,
-  useReducedMotion
+  ShimmerBox
 };

package/dist/index37.cjs

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index47.cjs");
+const classNames = require("./index3.cjs");
+const ShimmerText = 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,
+    className,
+    style,
+    testId = "shimmer-text",
+    visible = true,
+    ariaLabel = "Loading text...",
+    ...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 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";
+      }
+    };
+    const normalizedGap = typeof lineGap === "number" ? `${lineGap}px` : lineGap;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("flex flex-col", className),
+        style: {
+          gap: normalizedGap,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: lines }, (_, index) => {
+          const isLastLine = index === lines - 1;
+          const lineWidth = isLastLine && lines > 1 ? lastLineWidth : width;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "relative overflow-hidden",
+              style: {
+                width: typeof lineWidth === "number" ? `${lineWidth}px` : lineWidth,
+                height: typeof height === "number" ? `${height}px` : height,
+                borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+                backgroundColor: baseColor
+              },
+              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
+          );
+        })
+      }
+    );
+  }
+);
+ShimmerText.displayName = "ShimmerText";
+exports.ShimmerText = ShimmerText;

package/dist/index37.js

@@ -0,0 +1,113 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index47.js";
+import { cn } from "./index3.js";
+const ShimmerText = 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,
+    className,
+    style,
+    testId = "shimmer-text",
+    visible = true,
+    ariaLabel = "Loading text...",
+    ...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 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";
+      }
+    };
+    const normalizedGap = typeof lineGap === "number" ? `${lineGap}px` : lineGap;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("flex flex-col", className),
+        style: {
+          gap: normalizedGap,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: lines }, (_, index) => {
+          const isLastLine = index === lines - 1;
+          const lineWidth = isLastLine && lines > 1 ? lastLineWidth : width;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "relative overflow-hidden",
+              style: {
+                width: typeof lineWidth === "number" ? `${lineWidth}px` : lineWidth,
+                height: typeof height === "number" ? `${height}px` : height,
+                borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+                backgroundColor: baseColor
+              },
+              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
+          );
+        })
+      }
+    );
+  }
+);
+ShimmerText.displayName = "ShimmerText";
+export {
+  ShimmerText
+};

package/dist/index38.cjs

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index47.cjs");
+const classNames = require("./index3.cjs");
+const ShimmerButton = react.forwardRef(
+  ({
+    width = 120,
+    height = 40,
+    borderRadius = 8,
+    baseColor = "#e5e7eb",
+    highlightColor = "#f3f4f6",
+    direction = "left-to-right",
+    variant = "solid",
+    showIcon = false,
+    iconPosition = "left",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "shimmer-button",
+    visible = true,
+    ariaLabel = "Loading button...",
+    ...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 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";
+      }
+    };
+    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 normalizedHeight = typeof height === "number" ? height : 40;
+    const iconSize = Math.floor(normalizedHeight * 0.5);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn(
+          "relative overflow-hidden inline-flex items-center justify-center gap-2",
+          className
+        ),
+        style: {
+          width: typeof width === "number" ? `${width}px` : width,
+          height: typeof height === "number" ? `${height}px` : height,
+          borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+          backgroundColor: variant === "solid" ? baseColor : "transparent",
+          border: variant === "outline" ? `2px solid ${baseColor}` : "none",
+          padding: "0 16px",
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: [
+          showIcon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "relative overflow-hidden rounded-full flex-shrink-0",
+              style: {
+                width: iconSize,
+                height: iconSize,
+                backgroundColor: variant === "solid" ? highlightColor : baseColor
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    background: `linear-gradient(${getGradientDirection()}, transparent 0%, ${variant === "solid" ? baseColor : highlightColor} 50%, transparent 100%)`,
+                    animation: `${getAnimationName()} ${effectiveDuration} infinite`
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "relative overflow-hidden flex-1",
+              style: {
+                height: Math.floor(normalizedHeight * 0.35),
+                borderRadius: 4,
+                backgroundColor: variant === "solid" ? highlightColor : baseColor
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    background: `linear-gradient(${getGradientDirection()}, transparent 0%, ${variant === "solid" ? baseColor : highlightColor} 50%, transparent 100%)`,
+                    animation: `${getAnimationName()} ${effectiveDuration} infinite`
+                  }
+                }
+              )
+            }
+          ),
+          showIcon && iconPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "relative overflow-hidden rounded-full flex-shrink-0",
+              style: {
+                width: iconSize,
+                height: iconSize,
+                backgroundColor: variant === "solid" ? highlightColor : baseColor
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    background: `linear-gradient(${getGradientDirection()}, transparent 0%, ${variant === "solid" ? baseColor : highlightColor} 50%, transparent 100%)`,
+                    animation: `${getAnimationName()} ${effectiveDuration} infinite`
+                  }
+                }
+              )
+            }
+          ),
+          variant === "solid" && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute inset-0 pointer-events-none",
+              style: {
+                background: `linear-gradient(${getGradientDirection()}, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)`,
+                animation: `${getAnimationName()} ${effectiveDuration} infinite`
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ShimmerButton.displayName = "ShimmerButton";
+exports.ShimmerButton = ShimmerButton;