premium-react-loaders 4.0.0 → 4.1.1

package/dist/index50.js

@@ -1,39 +1,31 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } 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";
-import { normalizeSize } from "./index4.js";
-const FlipCard = forwardRef(
+const LoadingText = forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    secondaryColor = "#8b5cf6",
-    direction = "horizontal",
-    frontColor,
-    backColor,
-    width,
-    height,
-    interval,
-    perspective = 1e3,
+    text = "Loading",
+    animation = "dots",
+    fontSize = 16,
+    fontWeight = 500,
+    color = "#374151",
+    dotCount = 3,
+    showEllipsis = true,
+    textClassName,
     speed = "normal",
-    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "flip-card",
+    testId = "loading-text",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel,
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
-    const effectiveDuration = getEffectiveDuration(
-      interval !== void 0 ? interval : speed,
-      respectMotionPreference,
-      prefersReducedMotion
-    );
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
@@ -41,62 +33,118 @@ const FlipCard = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const cardWidth = width ? normalizeSize(width) : normalizeSize(size);
-    const cardHeight = height ? normalizeSize(height) : `calc(${normalizeSize(size)} * 0.6)`;
-    const front = frontColor || color;
-    const back = backColor || secondaryColor;
-    const animationClass = direction === "horizontal" ? "animate-flip-card-horizontal" : "animate-flip-card-vertical";
+    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;
+    };
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
+        className: cn("inline-flex items-center", className),
         style: {
-          ...style,
           opacity,
           transition: transitionStyle,
-          perspective: `${perspective}px`
+          ...style
         },
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": ariaLabel || `${text}...`,
         "aria-busy": "true",
         ...rest,
         children: /* @__PURE__ */ jsxs(
-          "div",
+          "span",
           {
-            className: cn("relative", animationClass),
+            className: cn("inline-flex items-baseline", textClassName),
             style: {
-              width: cardWidth,
-              height: cardHeight,
-              transformStyle: "preserve-3d",
-              animationDuration: effectiveDuration,
-              animationDirection: reverse ? "reverse" : "normal"
+              fontSize: normalizedFontSize,
+              fontWeight,
+              color
             },
             children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "absolute inset-0 rounded-md flex items-center justify-center",
-                  style: {
-                    backgroundColor: front,
-                    backfaceVisibility: "hidden",
-                    WebkitBackfaceVisibility: "hidden"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "absolute inset-0 rounded-md flex items-center justify-center",
-                  style: {
-                    backgroundColor: back,
-                    backfaceVisibility: "hidden",
-                    WebkitBackfaceVisibility: "hidden",
-                    transform: direction === "horizontal" ? "rotateY(180deg)" : "rotateX(180deg)"
-                  }
-                }
-              )
+              renderText(),
+              renderDots()
             ]
           }
         )
@@ -104,7 +152,7 @@ const FlipCard = forwardRef(
     );
   }
 );
-FlipCard.displayName = "FlipCard";
+LoadingText.displayName = "LoadingText";
 export {
-  FlipCard
+  LoadingText
 };

package/dist/index51.cjs

@@ -2,18 +2,18 @@
 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 colors = require("./index4.cjs");
-const PlaneRotate = react.forwardRef(
+const CubeSpinner = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    planeCount = 3,
-    spacing = 6,
-    rotationType = "staggered",
-    opacity: planeOpacity = 0.6,
-    showAxis = false,
+    faceColors,
+    rotationAxis = "diagonal",
+    perspective = 600,
+    showEdges = false,
+    edgeColor = "#000000",
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -22,27 +22,46 @@ const PlaneRotate = react.forwardRef(
     transition,
     className,
     style,
-    testId = "plane-rotate",
+    testId = "cube-spinner",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const { shouldRender, opacity: containerOpacity, transitionStyle } = hooks.useLoaderVisibility(
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
       visible,
       delay,
       minDuration,
       transition
     );
     if (!shouldRender) return null;
-    const planeSize = colors.normalizeSize(size);
-    const count = Math.min(Math.max(planeCount, 2), 6);
+    const cubeSize = colors.normalizeSize(size);
+    const halfSize = `calc(${cubeSize} / 2)`;
+    const defaultFaceColors = [
+      color,
+      // front
+      color,
+      // back
+      color,
+      // right
+      color,
+      // left
+      color,
+      // top
+      color
+      // bottom
+    ];
+    const colors$1 = faceColors && faceColors.length === 6 ? faceColors : defaultFaceColors;
     const animationClass = {
-      synchronized: "animate-plane-rotate-sync",
-      staggered: "animate-plane-rotate-stagger",
-      opposite: "animate-plane-rotate-opposite"
-    }[rotationType];
+      x: "animate-cube-rotate-x",
+      y: "animate-cube-rotate-y",
+      z: "animate-cube-rotate-z",
+      diagonal: "animate-cube-rotate-diagonal"
+    }[rotationAxis];
+    const edgeStyle = showEdges ? {
+      border: `1px solid ${edgeColor}`
+    } : {};
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -51,9 +70,9 @@ const PlaneRotate = react.forwardRef(
         className: classNames.cn("inline-flex items-center justify-center", className),
         style: {
           ...style,
-          opacity: containerOpacity,
+          opacity,
           transition: transitionStyle,
-          perspective: "600px"
+          perspective: `${perspective}px`
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -62,45 +81,81 @@ const PlaneRotate = react.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "relative",
+            className: classNames.cn("relative", animationClass),
             style: {
-              width: planeSize,
-              height: planeSize,
-              transformStyle: "preserve-3d"
+              width: cubeSize,
+              height: cubeSize,
+              transformStyle: "preserve-3d",
+              animationDuration: effectiveDuration,
+              animationDirection: reverse ? "reverse" : "normal"
             },
             children: [
-              showAxis && /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+                  className: "absolute inset-0",
                   style: {
-                    width: "2px",
-                    height: planeSize,
-                    backgroundColor: color,
-                    opacity: 0.3
+                    backgroundColor: colors$1[0],
+                    transform: `translateZ(${halfSize})`,
+                    ...edgeStyle
                   }
                 }
               ),
-              Array.from({ length: count }).map((_, index) => {
-                const delay2 = rotationType === "staggered" ? `${index * 0.15}s` : "0s";
-                const direction = rotationType === "opposite" && index % 2 === 1 ? reverse ? "normal" : "reverse" : reverse ? "reverse" : "normal";
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: classNames.cn("absolute inset-0", animationClass),
-                    style: {
-                      backgroundColor: color,
-                      opacity: planeOpacity,
-                      transformStyle: "preserve-3d",
-                      transform: `translateZ(${(index - count / 2) * spacing}px)`,
-                      animationDuration: effectiveDuration,
-                      animationDelay: delay2,
-                      animationDirection: direction
-                    }
-                  },
-                  index
-                );
-              })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors$1[1],
+                    transform: `translateZ(calc(-${halfSize})) rotateY(180deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors$1[2],
+                    transform: `translateX(${halfSize}) rotateY(90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors$1[3],
+                    transform: `translateX(calc(-${halfSize})) rotateY(-90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors$1[4],
+                    transform: `translateY(calc(-${halfSize})) rotateX(90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors$1[5],
+                    transform: `translateY(${halfSize}) rotateX(-90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              )
             ]
           }
         )
@@ -108,5 +163,5 @@ const PlaneRotate = react.forwardRef(
     );
   }
 );
-PlaneRotate.displayName = "PlaneRotate";
-exports.PlaneRotate = PlaneRotate;
+CubeSpinner.displayName = "CubeSpinner";
+exports.CubeSpinner = CubeSpinner;

package/dist/index51.js

@@ -1,17 +1,17 @@
 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";
 import { normalizeSize } from "./index4.js";
-const PlaneRotate = forwardRef(
+const CubeSpinner = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    planeCount = 3,
-    spacing = 6,
-    rotationType = "staggered",
-    opacity: planeOpacity = 0.6,
-    showAxis = false,
+    faceColors,
+    rotationAxis = "diagonal",
+    perspective = 600,
+    showEdges = false,
+    edgeColor = "#000000",
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -20,27 +20,46 @@ const PlaneRotate = forwardRef(
     transition,
     className,
     style,
-    testId = "plane-rotate",
+    testId = "cube-spinner",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const { shouldRender, opacity: containerOpacity, transitionStyle } = useLoaderVisibility(
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
       minDuration,
       transition
     );
     if (!shouldRender) return null;
-    const planeSize = normalizeSize(size);
-    const count = Math.min(Math.max(planeCount, 2), 6);
+    const cubeSize = normalizeSize(size);
+    const halfSize = `calc(${cubeSize} / 2)`;
+    const defaultFaceColors = [
+      color,
+      // front
+      color,
+      // back
+      color,
+      // right
+      color,
+      // left
+      color,
+      // top
+      color
+      // bottom
+    ];
+    const colors = faceColors && faceColors.length === 6 ? faceColors : defaultFaceColors;
     const animationClass = {
-      synchronized: "animate-plane-rotate-sync",
-      staggered: "animate-plane-rotate-stagger",
-      opposite: "animate-plane-rotate-opposite"
-    }[rotationType];
+      x: "animate-cube-rotate-x",
+      y: "animate-cube-rotate-y",
+      z: "animate-cube-rotate-z",
+      diagonal: "animate-cube-rotate-diagonal"
+    }[rotationAxis];
+    const edgeStyle = showEdges ? {
+      border: `1px solid ${edgeColor}`
+    } : {};
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -49,9 +68,9 @@ const PlaneRotate = forwardRef(
         className: cn("inline-flex items-center justify-center", className),
         style: {
           ...style,
-          opacity: containerOpacity,
+          opacity,
           transition: transitionStyle,
-          perspective: "600px"
+          perspective: `${perspective}px`
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -60,45 +79,81 @@ const PlaneRotate = forwardRef(
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "relative",
+            className: cn("relative", animationClass),
             style: {
-              width: planeSize,
-              height: planeSize,
-              transformStyle: "preserve-3d"
+              width: cubeSize,
+              height: cubeSize,
+              transformStyle: "preserve-3d",
+              animationDuration: effectiveDuration,
+              animationDirection: reverse ? "reverse" : "normal"
             },
             children: [
-              showAxis && /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+                  className: "absolute inset-0",
                   style: {
-                    width: "2px",
-                    height: planeSize,
-                    backgroundColor: color,
-                    opacity: 0.3
+                    backgroundColor: colors[0],
+                    transform: `translateZ(${halfSize})`,
+                    ...edgeStyle
                   }
                 }
               ),
-              Array.from({ length: count }).map((_, index) => {
-                const delay2 = rotationType === "staggered" ? `${index * 0.15}s` : "0s";
-                const direction = rotationType === "opposite" && index % 2 === 1 ? reverse ? "normal" : "reverse" : reverse ? "reverse" : "normal";
-                return /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn("absolute inset-0", animationClass),
-                    style: {
-                      backgroundColor: color,
-                      opacity: planeOpacity,
-                      transformStyle: "preserve-3d",
-                      transform: `translateZ(${(index - count / 2) * spacing}px)`,
-                      animationDuration: effectiveDuration,
-                      animationDelay: delay2,
-                      animationDirection: direction
-                    }
-                  },
-                  index
-                );
-              })
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors[1],
+                    transform: `translateZ(calc(-${halfSize})) rotateY(180deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors[2],
+                    transform: `translateX(${halfSize}) rotateY(90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors[3],
+                    transform: `translateX(calc(-${halfSize})) rotateY(-90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors[4],
+                    transform: `translateY(calc(-${halfSize})) rotateX(90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors[5],
+                    transform: `translateY(${halfSize}) rotateX(-90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              )
             ]
           }
         )
@@ -106,7 +161,7 @@ const PlaneRotate = forwardRef(
     );
   }
 );
-PlaneRotate.displayName = "PlaneRotate";
+CubeSpinner.displayName = "CubeSpinner";
 export {
-  PlaneRotate
+  CubeSpinner
 };