premium-react-loaders 3.1.1 → 4.1.0

package/dist/index40.js

@@ -1,18 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-const ShimmerButton = forwardRef(
+const ShimmerBox = forwardRef(
   ({
-    width = 120,
-    height = 40,
+    width = 200,
+    height,
     borderRadius = 8,
     baseColor = "#e5e7eb",
     highlightColor = "#f3f4f6",
     direction = "left-to-right",
-    variant = "solid",
-    showIcon = false,
-    iconPosition = "left",
+    aspectRatio,
     speed = "normal",
     respectMotionPreference = true,
     delay = 0,
@@ -20,9 +18,9 @@ const ShimmerButton = forwardRef(
     transition,
     className,
     style,
-    testId = "shimmer-button",
+    testId = "shimmer-box",
     visible = true,
-    ariaLabel = "Loading button...",
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
@@ -34,48 +32,42 @@ const ShimmerButton = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const getAnimationName = () => {
+    const getGradientDirection = () => {
       switch (direction) {
         case "right-to-left":
-          return "shimmer-rtl";
+          return "to left";
         case "top-to-bottom":
-          return "shimmer-ttb";
+          return "to bottom";
         case "bottom-to-top":
-          return "shimmer-btt";
+          return "to top";
         default:
-          return "shimmer-ltr";
+          return "to right";
       }
     };
-    const getGradientDirection = () => {
+    const getAnimationName = () => {
       switch (direction) {
         case "right-to-left":
-          return "to left";
+          return "shimmer-rtl";
         case "top-to-bottom":
-          return "to bottom";
+          return "shimmer-ttb";
         case "bottom-to-top":
-          return "to top";
+          return "shimmer-btt";
         default:
-          return "to right";
+          return "shimmer-ltr";
       }
     };
-    const normalizedHeight = typeof height === "number" ? height : 40;
-    const iconSize = Math.floor(normalizedHeight * 0.5);
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn(
-          "relative overflow-hidden inline-flex items-center justify-center gap-2",
-          className
-        ),
+        className: cn("relative overflow-hidden", className),
         style: {
           width: typeof width === "number" ? `${width}px` : width,
-          height: typeof height === "number" ? `${height}px` : height,
+          height: aspectRatio ? void 0 : typeof height === "number" ? `${height}px` : height || "100px",
+          aspectRatio,
           borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
-          backgroundColor: variant === "solid" ? baseColor : "transparent",
-          border: variant === "outline" ? `2px solid ${baseColor}` : "none",
-          padding: "0 16px",
+          backgroundColor: baseColor,
           opacity,
           transition: transitionStyle,
           ...style
@@ -84,86 +76,21 @@ const ShimmerButton = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: [
-          showIcon && iconPosition === "left" && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "relative overflow-hidden rounded-full flex-shrink-0",
-              style: {
-                width: iconSize,
-                height: iconSize,
-                backgroundColor: variant === "solid" ? highlightColor : baseColor
-              },
-              children: /* @__PURE__ */ 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__ */ jsx(
-            "div",
-            {
-              className: "relative overflow-hidden flex-1",
-              style: {
-                height: Math.floor(normalizedHeight * 0.35),
-                borderRadius: 4,
-                backgroundColor: variant === "solid" ? highlightColor : baseColor
-              },
-              children: /* @__PURE__ */ 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__ */ jsx(
-            "div",
-            {
-              className: "relative overflow-hidden rounded-full flex-shrink-0",
-              style: {
-                width: iconSize,
-                height: iconSize,
-                backgroundColor: variant === "solid" ? highlightColor : baseColor
-              },
-              children: /* @__PURE__ */ 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__ */ 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`
-              }
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              background: `linear-gradient(${getGradientDirection()}, transparent 0%, ${highlightColor} 50%, transparent 100%)`,
+              animation: `${getAnimationName()} ${effectiveDuration} infinite`
             }
-          )
-        ]
+          }
+        )
       }
     );
   }
 );
-ShimmerButton.displayName = "ShimmerButton";
+ShimmerBox.displayName = "ShimmerBox";
 export {
-  ShimmerButton
+  ShimmerBox
 };

package/dist/index41.cjs

@@ -2,29 +2,29 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
-const colors = require("./index4.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
-const OrbitDots = react.forwardRef(
+const ShimmerText = react.forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    secondaryColor,
-    dotCount = 4,
-    dotSize = 8,
-    orbitRadius = 0.4,
-    stagger = true,
+    width = "100%",
+    height = 16,
+    borderRadius = 4,
+    baseColor = "#e5e7eb",
+    highlightColor = "#f3f4f6",
+    direction = "left-to-right",
+    lines = 3,
+    lineGap = 12,
+    lastLineWidth = "75%",
     speed = "normal",
-    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "orbit-dots",
+    testId = "shimmer-text",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel = "Loading text...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = hooks.useReducedMotion();
@@ -36,18 +36,39 @@ const OrbitDots = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const normalizedSize = colors.normalizeSize(size);
-    const sizeNum = parseInt(normalizedSize, 10);
-    const radius = sizeNum * orbitRadius;
+    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("inline-flex items-center justify-center", className),
+        className: classNames.cn("flex flex-col", className),
         style: {
-          width: normalizedSize,
-          height: normalizedSize,
+          gap: normalizedGap,
           opacity,
           transition: transitionStyle,
           ...style
@@ -56,42 +77,37 @@ const OrbitDots = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "relative w-full h-full",
-            style: {
-              animation: `orbit-rotate ${effectiveDuration} linear infinite`,
-              animationDirection: reverse ? "reverse" : "normal"
-            },
-            children: Array.from({ length: dotCount }, (_, index) => {
-              const angle = 360 / dotCount * index;
-              const dotColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
-              const staggerDelay = stagger ? `${index / dotCount * 300}ms` : "0ms";
-              return /* @__PURE__ */ jsxRuntime.jsx(
+        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 rounded-full",
+                  className: "absolute inset-0",
                   style: {
-                    width: dotSize,
-                    height: dotSize,
-                    backgroundColor: dotColor,
-                    left: "50%",
-                    top: "50%",
-                    transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${radius}px)`,
-                    opacity: stagger ? void 0 : 1,
-                    animation: stagger ? `orbit-dot-pulse 1s ease-in-out infinite` : void 0,
-                    animationDelay: staggerDelay
+                    background: `linear-gradient(${getGradientDirection()}, transparent 0%, ${highlightColor} 50%, transparent 100%)`,
+                    animation: `${getAnimationName()} ${effectiveDuration} infinite`,
+                    animationDelay: `${index * 100}ms`
                   }
-                },
-                index
-              );
-            })
-          }
-        )
+                }
+              )
+            },
+            index
+          );
+        })
       }
     );
   }
 );
-OrbitDots.displayName = "OrbitDots";
-exports.OrbitDots = OrbitDots;
+ShimmerText.displayName = "ShimmerText";
+exports.ShimmerText = ShimmerText;

package/dist/index41.js

@@ -1,28 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
-import { normalizeSize } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-const OrbitDots = forwardRef(
+const ShimmerText = forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    secondaryColor,
-    dotCount = 4,
-    dotSize = 8,
-    orbitRadius = 0.4,
-    stagger = true,
+    width = "100%",
+    height = 16,
+    borderRadius = 4,
+    baseColor = "#e5e7eb",
+    highlightColor = "#f3f4f6",
+    direction = "left-to-right",
+    lines = 3,
+    lineGap = 12,
+    lastLineWidth = "75%",
     speed = "normal",
-    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "orbit-dots",
+    testId = "shimmer-text",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel = "Loading text...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
@@ -34,18 +34,39 @@ const OrbitDots = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const normalizedSize = normalizeSize(size);
-    const sizeNum = parseInt(normalizedSize, 10);
-    const radius = sizeNum * orbitRadius;
+    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("inline-flex items-center justify-center", className),
+        className: cn("flex flex-col", className),
         style: {
-          width: normalizedSize,
-          height: normalizedSize,
+          gap: normalizedGap,
           opacity,
           transition: transitionStyle,
           ...style
@@ -54,44 +75,39 @@ const OrbitDots = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "relative w-full h-full",
-            style: {
-              animation: `orbit-rotate ${effectiveDuration} linear infinite`,
-              animationDirection: reverse ? "reverse" : "normal"
-            },
-            children: Array.from({ length: dotCount }, (_, index) => {
-              const angle = 360 / dotCount * index;
-              const dotColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
-              const staggerDelay = stagger ? `${index / dotCount * 300}ms` : "0ms";
-              return /* @__PURE__ */ jsx(
+        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 rounded-full",
+                  className: "absolute inset-0",
                   style: {
-                    width: dotSize,
-                    height: dotSize,
-                    backgroundColor: dotColor,
-                    left: "50%",
-                    top: "50%",
-                    transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${radius}px)`,
-                    opacity: stagger ? void 0 : 1,
-                    animation: stagger ? `orbit-dot-pulse 1s ease-in-out infinite` : void 0,
-                    animationDelay: staggerDelay
+                    background: `linear-gradient(${getGradientDirection()}, transparent 0%, ${highlightColor} 50%, transparent 100%)`,
+                    animation: `${getAnimationName()} ${effectiveDuration} infinite`,
+                    animationDelay: `${index * 100}ms`
                   }
-                },
-                index
-              );
-            })
-          }
-        )
+                }
+              )
+            },
+            index
+          );
+        })
       }
     );
   }
 );
-OrbitDots.displayName = "OrbitDots";
+ShimmerText.displayName = "ShimmerText";
 export {
-  OrbitDots
+  ShimmerText
 };