premium-react-loaders 4.0.0 → 4.1.0

package/dist/index48.cjs

@@ -2,28 +2,29 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index64.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
-const LoadingText = react.forwardRef(
+const colors = require("./index4.cjs");
+const InfinityLoader = react.forwardRef(
   ({
-    text = "Loading",
-    animation = "dots",
-    fontSize = 16,
-    fontWeight = 500,
-    color = "#374151",
-    dotCount = 3,
-    showEllipsis = true,
-    textClassName,
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    thickness = 3,
+    gradient = false,
+    showDot = false,
+    dotSize = 6,
     speed = "normal",
+    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "loading-text",
+    testId = "infinity-loader",
     visible = true,
-    ariaLabel,
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = hooks.useReducedMotion();
@@ -35,118 +36,94 @@ const LoadingText = react.forwardRef(
       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;
-    };
+    const normalizedSize = colors.normalizeSize(size);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const width = sizeNum;
+    const height = sizeNum * 0.5;
+    const infinityPath = `M ${width * 0.15} ${height * 0.5}
+      C ${width * 0.15} ${height * 0.1}, ${width * 0.4} ${height * 0.1}, ${width * 0.5} ${height * 0.5}
+      C ${width * 0.6} ${height * 0.9}, ${width * 0.85} ${height * 0.9}, ${width * 0.85} ${height * 0.5}
+      C ${width * 0.85} ${height * 0.1}, ${width * 0.6} ${height * 0.1}, ${width * 0.5} ${height * 0.5}
+      C ${width * 0.4} ${height * 0.9}, ${width * 0.15} ${height * 0.9}, ${width * 0.15} ${height * 0.5}`;
+    const gradientId = `infinity-gradient-${testId}`;
+    const pathId = `infinity-path-${testId}`;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center", className),
+        className: classNames.cn("inline-flex items-center justify-center", className),
         style: {
+          width,
+          height,
           opacity,
           transition: transitionStyle,
           ...style
         },
         role: "status",
-        "aria-label": ariaLabel || `${text}...`,
+        "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
+          "svg",
           {
-            className: classNames.cn("inline-flex items-baseline", textClassName),
-            style: {
-              fontSize: normalizedFontSize,
-              fontWeight,
-              color
-            },
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            fill: "none",
             children: [
-              renderText(),
-              renderDots()
+              gradient && secondaryColor && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: secondaryColor })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: infinityPath,
+                  stroke: gradient && secondaryColor ? `url(#${gradientId})` : color,
+                  strokeWidth: thickness,
+                  strokeLinecap: "round",
+                  fill: "none",
+                  opacity: 0.2
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  id: pathId,
+                  d: infinityPath,
+                  stroke: gradient && secondaryColor ? `url(#${gradientId})` : color,
+                  strokeWidth: thickness,
+                  strokeLinecap: "round",
+                  fill: "none",
+                  style: {
+                    strokeDasharray: "50 200",
+                    animation: `infinity-dash ${effectiveDuration} linear infinite`,
+                    animationDirection: reverse ? "reverse" : "normal"
+                  }
+                }
+              ),
+              showDot && /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  r: dotSize / 2,
+                  fill: secondaryColor || color,
+                  style: {
+                    animation: `infinity-dot ${effectiveDuration} linear infinite`,
+                    animationDirection: reverse ? "reverse" : "normal"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "animateMotion",
+                    {
+                      dur: effectiveDuration,
+                      repeatCount: "indefinite",
+                      path: infinityPath,
+                      keyPoints: reverse ? "1;0" : "0;1",
+                      keyTimes: "0;1"
+                    }
+                  )
+                }
+              )
             ]
           }
         )
@@ -154,5 +131,5 @@ const LoadingText = react.forwardRef(
     );
   }
 );
-LoadingText.displayName = "LoadingText";
-exports.LoadingText = LoadingText;
+InfinityLoader.displayName = "InfinityLoader";
+exports.InfinityLoader = InfinityLoader;

package/dist/index48.js

@@ -1,27 +1,28 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-const LoadingText = forwardRef(
+import { normalizeSize } from "./index4.js";
+const InfinityLoader = forwardRef(
   ({
-    text = "Loading",
-    animation = "dots",
-    fontSize = 16,
-    fontWeight = 500,
-    color = "#374151",
-    dotCount = 3,
-    showEllipsis = true,
-    textClassName,
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    thickness = 3,
+    gradient = false,
+    showDot = false,
+    dotSize = 6,
     speed = "normal",
+    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "loading-text",
+    testId = "infinity-loader",
     visible = true,
-    ariaLabel,
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
@@ -33,118 +34,94 @@ const LoadingText = forwardRef(
       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__ */ jsx("span", { className: "inline-flex", children: Array.from({ length: dotCount }, (_, index) => /* @__PURE__ */ 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__ */ jsx(
-            "span",
-            {
-              style: {
-                animation: `loading-text-fade ${durationNum}ms ease-in-out infinite`
-              },
-              children: "..."
-            }
-          );
-        case "bounce":
-          return /* @__PURE__ */ jsx("span", { className: "inline-flex", children: Array.from({ length: dotCount }, (_, index) => /* @__PURE__ */ 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__ */ jsx("span", { className: "inline-flex", children: Array.from({ length: dotCount }, (_, index) => /* @__PURE__ */ 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__ */ jsx(Fragment, { children: text.split("").map((char, index) => /* @__PURE__ */ 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__ */ jsx(
-          "span",
-          {
-            style: {
-              animation: `loading-text-fade ${durationNum}ms ease-in-out infinite`
-            },
-            children: text
-          }
-        );
-      }
-      return text;
-    };
+    const normalizedSize = normalizeSize(size);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const width = sizeNum;
+    const height = sizeNum * 0.5;
+    const infinityPath = `M ${width * 0.15} ${height * 0.5}
+      C ${width * 0.15} ${height * 0.1}, ${width * 0.4} ${height * 0.1}, ${width * 0.5} ${height * 0.5}
+      C ${width * 0.6} ${height * 0.9}, ${width * 0.85} ${height * 0.9}, ${width * 0.85} ${height * 0.5}
+      C ${width * 0.85} ${height * 0.1}, ${width * 0.6} ${height * 0.1}, ${width * 0.5} ${height * 0.5}
+      C ${width * 0.4} ${height * 0.9}, ${width * 0.15} ${height * 0.9}, ${width * 0.15} ${height * 0.5}`;
+    const gradientId = `infinity-gradient-${testId}`;
+    const pathId = `infinity-path-${testId}`;
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center", className),
+        className: cn("inline-flex items-center justify-center", className),
         style: {
+          width,
+          height,
           opacity,
           transition: transitionStyle,
           ...style
         },
         role: "status",
-        "aria-label": ariaLabel || `${text}...`,
+        "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
         children: /* @__PURE__ */ jsxs(
-          "span",
+          "svg",
           {
-            className: cn("inline-flex items-baseline", textClassName),
-            style: {
-              fontSize: normalizedFontSize,
-              fontWeight,
-              color
-            },
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            fill: "none",
             children: [
-              renderText(),
-              renderDots()
+              gradient && secondaryColor && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: secondaryColor })
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: infinityPath,
+                  stroke: gradient && secondaryColor ? `url(#${gradientId})` : color,
+                  strokeWidth: thickness,
+                  strokeLinecap: "round",
+                  fill: "none",
+                  opacity: 0.2
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  id: pathId,
+                  d: infinityPath,
+                  stroke: gradient && secondaryColor ? `url(#${gradientId})` : color,
+                  strokeWidth: thickness,
+                  strokeLinecap: "round",
+                  fill: "none",
+                  style: {
+                    strokeDasharray: "50 200",
+                    animation: `infinity-dash ${effectiveDuration} linear infinite`,
+                    animationDirection: reverse ? "reverse" : "normal"
+                  }
+                }
+              ),
+              showDot && /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  r: dotSize / 2,
+                  fill: secondaryColor || color,
+                  style: {
+                    animation: `infinity-dot ${effectiveDuration} linear infinite`,
+                    animationDirection: reverse ? "reverse" : "normal"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "animateMotion",
+                    {
+                      dur: effectiveDuration,
+                      repeatCount: "indefinite",
+                      path: infinityPath,
+                      keyPoints: reverse ? "1;0" : "0;1",
+                      keyTimes: "0;1"
+                    }
+                  )
+                }
+              )
             ]
           }
         )
@@ -152,7 +129,7 @@ const LoadingText = forwardRef(
     );
   }
 );
-LoadingText.displayName = "LoadingText";
+InfinityLoader.displayName = "InfinityLoader";
 export {
-  LoadingText
+  InfinityLoader
 };