premium-react-loaders 2.0.0 → 2.1.0

package/dist/index30.js

@@ -1,125 +1,78 @@
-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 "./index32.js";
+import { normalizeSize } from "./index4.js";
+import { cn } from "./index3.js";
+const TypingIndicator = forwardRef(
+  ({
+    size,
+    color = "#3b82f6",
+    dotCount = 3,
+    dotSize = 8,
+    gap = 4,
+    variant = "bounce",
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "typing-indicator",
+    visible = true,
+    ariaLabel = "Typing...",
+    ...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 gapValue = normalizeSize(gap);
+    const durationMs = typeof effectiveDuration === "string" ? parseFloat(effectiveDuration) * 1e3 : effectiveDuration;
+    const delayBetweenDots = durationMs * 0.15 / 1e3;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center", className),
+        style: {
+          gap: gapValue,
+          height: size ? normalizeSize(size) : "auto",
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: dotCount }).map((_, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rounded-full",
+            style: {
+              width: normalizeSize(dotSize),
+              height: normalizeSize(dotSize),
+              backgroundColor: color,
+              animation: `typing-${variant} ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(dotCount - index - 1) * delayBetweenDots}s` : `${index * delayBetweenDots}s`,
+              willChange: "transform, opacity"
+            }
+          },
+          index
+        ))
       }
-      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
-  };
-}
+    );
+  }
+);
+TypingIndicator.displayName = "TypingIndicator";
 export {
-  getEffectiveDuration,
-  useLoaderVisibility,
-  useReducedMotion
+  TypingIndicator
 };

package/dist/index31.cjs

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index32.cjs");
+const classNames = require("./index3.cjs");
+const LoaderOverlay = react.forwardRef(
+  ({
+    loading = false,
+    loader,
+    children,
+    position = "fixed",
+    backdropOpacity = 0.5,
+    backdropColor = "#000000",
+    blur = false,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "loader-overlay",
+    ariaLabel = "Loading content...",
+    zIndex = 9999,
+    ...rest
+  }, ref) => {
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      loading,
+      delay,
+      minDuration,
+      transition
+    );
+    const backdropStyles = {
+      backgroundColor: backdropColor,
+      opacity: backdropOpacity,
+      backdropFilter: blur ? "blur(4px)" : void 0,
+      WebkitBackdropFilter: blur ? "blur(4px)" : void 0
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("relative", className),
+        style,
+        ...rest,
+        children: [
+          children,
+          shouldRender && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: classNames.cn(
+                "inset-0 flex items-center justify-center",
+                position === "fixed" ? "fixed" : "absolute"
+              ),
+              style: {
+                zIndex,
+                opacity,
+                transition: transitionStyle
+              },
+              role: "status",
+              "aria-label": ariaLabel,
+              "aria-busy": "true",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0",
+                    style: backdropStyles,
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: loader })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+LoaderOverlay.displayName = "LoaderOverlay";
+exports.LoaderOverlay = LoaderOverlay;

package/dist/index31.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLoaderVisibility } from "./index32.js";
+import { cn } from "./index3.js";
+const LoaderOverlay = forwardRef(
+  ({
+    loading = false,
+    loader,
+    children,
+    position = "fixed",
+    backdropOpacity = 0.5,
+    backdropColor = "#000000",
+    blur = false,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "loader-overlay",
+    ariaLabel = "Loading content...",
+    zIndex = 9999,
+    ...rest
+  }, ref) => {
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      loading,
+      delay,
+      minDuration,
+      transition
+    );
+    const backdropStyles = {
+      backgroundColor: backdropColor,
+      opacity: backdropOpacity,
+      backdropFilter: blur ? "blur(4px)" : void 0,
+      WebkitBackdropFilter: blur ? "blur(4px)" : void 0
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("relative", className),
+        style,
+        ...rest,
+        children: [
+          children,
+          shouldRender && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "inset-0 flex items-center justify-center",
+                position === "fixed" ? "fixed" : "absolute"
+              ),
+              style: {
+                zIndex,
+                opacity,
+                transition: transitionStyle
+              },
+              role: "status",
+              "aria-label": ariaLabel,
+              "aria-busy": "true",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0",
+                    style: backdropStyles,
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "relative z-10", children: loader })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+LoaderOverlay.displayName = "LoaderOverlay";
+export {
+  LoaderOverlay
+};

package/dist/index32.cjs

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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);
+      } 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;

package/dist/index32.js

@@ -0,0 +1,125 @@
+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);
+      }
+      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
+  };
+}
+export {
+  getEffectiveDuration,
+  useLoaderVisibility,
+  useReducedMotion
+};