premium-react-loaders 3.0.0 → 3.1.0

package/dist/index47.cjs

@@ -1,125 +1,106 @@
 "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("./index56.cjs");
+const colors = require("./index4.cjs");
+const classNames = require("./index3.cjs");
+const MobiusLoader = react.forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    thickness = 2,
+    segments = 6,
+    twist = true,
+    ribbonWidth = 8,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "mobius-loader",
+    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;
+    const normalizedSize = colors.normalizeSize(size);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const durationNum = parseInt(effectiveDuration, 10);
+    const centerX = sizeNum / 2;
+    const centerY = sizeNum / 2;
+    const radiusX = (sizeNum - ribbonWidth) / 2;
+    const radiusY = (sizeNum - ribbonWidth) / 3;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: {
+          width: normalizedSize,
+          height: normalizedSize,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "relative w-full h-full",
+            style: {
+              animation: `mobius-rotate ${durationNum}ms linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
+            },
+            children: Array.from({ length: segments }, (_, index) => {
+              const angle = 360 / segments * index;
+              const radians = angle * Math.PI / 180;
+              const x = centerX + radiusX * Math.cos(radians);
+              const y = centerY + radiusY * Math.sin(radians);
+              const twistAngle = twist ? angle + 90 : 90;
+              const segmentOpacity = 0.3 + 0.7 * (index / segments);
+              const segmentColor = secondaryColor && index % 2 === 0 ? secondaryColor : color;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute",
+                  style: {
+                    width: ribbonWidth,
+                    height: thickness,
+                    backgroundColor: segmentColor,
+                    borderRadius: thickness / 2,
+                    left: x - ribbonWidth / 2,
+                    top: y - thickness / 2,
+                    transform: `rotate(${twistAngle}deg)`,
+                    opacity: segmentOpacity,
+                    animation: `mobius-segment ${durationNum}ms ease-in-out infinite`,
+                    animationDelay: `${index / segments * durationNum}ms`
+                  }
+                },
+                index
+              );
+            })
           }
-        }, 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;
+    );
+  }
+);
+MobiusLoader.displayName = "MobiusLoader";
+exports.MobiusLoader = MobiusLoader;

package/dist/index47.js

@@ -1,125 +1,106 @@
-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 "./index56.js";
+import { normalizeSize } from "./index4.js";
+import { cn } from "./index3.js";
+const MobiusLoader = forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    thickness = 2,
+    segments = 6,
+    twist = true,
+    ribbonWidth = 8,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "mobius-loader",
+    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 normalizedSize = normalizeSize(size);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const durationNum = parseInt(effectiveDuration, 10);
+    const centerX = sizeNum / 2;
+    const centerY = sizeNum / 2;
+    const radiusX = (sizeNum - ribbonWidth) / 2;
+    const radiusY = (sizeNum - ribbonWidth) / 3;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style: {
+          width: normalizedSize,
+          height: normalizedSize,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative w-full h-full",
+            style: {
+              animation: `mobius-rotate ${durationNum}ms linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
+            },
+            children: Array.from({ length: segments }, (_, index) => {
+              const angle = 360 / segments * index;
+              const radians = angle * Math.PI / 180;
+              const x = centerX + radiusX * Math.cos(radians);
+              const y = centerY + radiusY * Math.sin(radians);
+              const twistAngle = twist ? angle + 90 : 90;
+              const segmentOpacity = 0.3 + 0.7 * (index / segments);
+              const segmentColor = secondaryColor && index % 2 === 0 ? secondaryColor : color;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute",
+                  style: {
+                    width: ribbonWidth,
+                    height: thickness,
+                    backgroundColor: segmentColor,
+                    borderRadius: thickness / 2,
+                    left: x - ribbonWidth / 2,
+                    top: y - thickness / 2,
+                    transform: `rotate(${twistAngle}deg)`,
+                    opacity: segmentOpacity,
+                    animation: `mobius-segment ${durationNum}ms ease-in-out infinite`,
+                    animationDelay: `${index / segments * durationNum}ms`
+                  }
+                },
+                index
+              );
+            })
           }
-        }, 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
-  };
-}
+    );
+  }
+);
+MobiusLoader.displayName = "MobiusLoader";
 export {
-  getEffectiveDuration,
-  useLoaderVisibility,
-  useReducedMotion
+  MobiusLoader
 };

package/dist/index48.cjs

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index56.cjs");
+const classNames = require("./index3.cjs");
+const LoadingText = react.forwardRef(
+  ({
+    text = "Loading",
+    animation = "dots",
+    fontSize = 16,
+    fontWeight = 500,
+    color = "#374151",
+    dotCount = 3,
+    showEllipsis = true,
+    textClassName,
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "loading-text",
+    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
+    );
+    if (!shouldRender) return null;
+    const durationNum = parseInt(effectiveDuration, 10);
+    const normalizedFontSize = typeof fontSize === "number" ? `${fontSize}px` : fontSize;
+    const renderDots = () => {
+      if (!showEllipsis) return null;
+      switch (animation) {
+        case "dots":
+          return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: Array.from({ length: dotCount }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                animation: `loading-text-dot ${durationNum}ms ease-in-out infinite`,
+                animationDelay: `${index * (durationNum / dotCount / 2)}ms`
+              },
+              children: "."
+            },
+            index
+          )) });
+        case "fade":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                animation: `loading-text-fade ${durationNum}ms ease-in-out infinite`
+              },
+              children: "..."
+            }
+          );
+        case "bounce":
+          return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: Array.from({ length: dotCount }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "inline-block",
+              style: {
+                animation: `loading-text-bounce ${durationNum}ms ease-in-out infinite`,
+                animationDelay: `${index * (durationNum / dotCount / 2)}ms`
+              },
+              children: "."
+            },
+            index
+          )) });
+        case "wave":
+          return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: Array.from({ length: dotCount }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "inline-block",
+              style: {
+                animation: `loading-text-wave ${durationNum}ms ease-in-out infinite`,
+                animationDelay: `${index * (durationNum / dotCount / 1.5)}ms`
+              },
+              children: "."
+            },
+            index
+          )) });
+        default:
+          return "...";
+      }
+    };
+    const renderText = () => {
+      if (animation === "wave" || animation === "bounce") {
+        return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text.split("").map((char, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "inline-block",
+            style: {
+              animation: `loading-text-${animation} ${durationNum}ms ease-in-out infinite`,
+              animationDelay: `${index * 50}ms`
+            },
+            children: char === " " ? " " : char
+          },
+          index
+        )) });
+      }
+      if (animation === "fade") {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              animation: `loading-text-fade ${durationNum}ms ease-in-out infinite`
+            },
+            children: text
+          }
+        );
+      }
+      return text;
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center", className),
+        style: {
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel || `${text}...`,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: classNames.cn("inline-flex items-baseline", textClassName),
+            style: {
+              fontSize: normalizedFontSize,
+              fontWeight,
+              color
+            },
+            children: [
+              renderText(),
+              renderDots()
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+LoadingText.displayName = "LoadingText";
+exports.LoadingText = LoadingText;