premium-react-loaders 4.0.0 → 4.1.0

package/dist/index41.js

@@ -1,28 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.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
 };

package/dist/index42.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("./index64.cjs");
-const colors = require("./index4.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
-const OrbitRings = react.forwardRef(
+const ShimmerButton = react.forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    secondaryColor,
-    thickness = 2,
-    ringCount = 3,
-    ringGap = 6,
-    alternate = true,
+    width = 120,
+    height = 40,
+    borderRadius = 8,
+    baseColor = "#e5e7eb",
+    highlightColor = "#f3f4f6",
+    direction = "left-to-right",
+    variant = "solid",
+    showIcon = false,
+    iconPosition = "left",
     speed = "normal",
-    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "orbit-rings",
+    testId = "shimmer-button",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel = "Loading button...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = hooks.useReducedMotion();
@@ -36,18 +36,48 @@ const OrbitRings = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const normalizedSize = colors.normalizeSize(size);
-    const sizeNum = parseInt(normalizedSize, 10);
-    const durationNum = parseInt(effectiveDuration, 10);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    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 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 normalizedHeight = typeof height === "number" ? height : 40;
+    const iconSize = Math.floor(normalizedHeight * 0.5);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center", className),
+        className: classNames.cn(
+          "relative overflow-hidden inline-flex items-center justify-center gap-2",
+          className
+        ),
         style: {
-          width: normalizedSize,
-          height: normalizedSize,
+          width: typeof width === "number" ? `${width}px` : width,
+          height: typeof height === "number" ? `${height}px` : height,
+          borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+          backgroundColor: variant === "solid" ? baseColor : "transparent",
+          border: variant === "outline" ? `2px solid ${baseColor}` : "none",
+          padding: "0 16px",
           opacity,
           transition: transitionStyle,
           ...style
@@ -56,35 +86,84 @@ const OrbitRings = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full", children: Array.from({ length: ringCount }, (_, index) => {
-          const ringSize = sizeNum - index * (ringGap + thickness) * 2;
-          if (ringSize <= 0) return null;
-          const ringColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
-          const shouldReverse = alternate ? index % 2 === 1 !== reverse : reverse;
-          const ringDuration = durationNum + index * 200;
-          return /* @__PURE__ */ jsxRuntime.jsx(
+        children: [
+          showIcon && iconPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "relative overflow-hidden rounded-full flex-shrink-0",
+              style: {
+                width: iconSize,
+                height: iconSize,
+                backgroundColor: variant === "solid" ? highlightColor : baseColor
+              },
+              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "relative overflow-hidden flex-1",
+              style: {
+                height: Math.floor(normalizedHeight * 0.35),
+                borderRadius: 4,
+                backgroundColor: variant === "solid" ? highlightColor : baseColor
+              },
+              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "relative overflow-hidden rounded-full flex-shrink-0",
+              style: {
+                width: iconSize,
+                height: iconSize,
+                backgroundColor: variant === "solid" ? highlightColor : baseColor
+              },
+              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "absolute rounded-full",
+              className: "absolute inset-0 pointer-events-none",
               style: {
-                width: ringSize,
-                height: ringSize,
-                left: "50%",
-                top: "50%",
-                transform: "translate(-50%, -50%)",
-                border: `${thickness}px solid transparent`,
-                borderTopColor: ringColor,
-                borderRightColor: ringColor,
-                animation: `orbit-rotate ${ringDuration}ms linear infinite`,
-                animationDirection: shouldReverse ? "reverse" : "normal"
+                background: `linear-gradient(${getGradientDirection()}, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)`,
+                animation: `${getAnimationName()} ${effectiveDuration} infinite`
               }
-            },
-            index
-          );
-        }) })
+            }
+          )
+        ]
       }
     );
   }
 );
-OrbitRings.displayName = "OrbitRings";
-exports.OrbitRings = OrbitRings;
+ShimmerButton.displayName = "ShimmerButton";
+exports.ShimmerButton = ShimmerButton;

package/dist/index42.js

@@ -1,28 +1,28 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
-import { normalizeSize } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-const OrbitRings = forwardRef(
+const ShimmerButton = forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    secondaryColor,
-    thickness = 2,
-    ringCount = 3,
-    ringGap = 6,
-    alternate = true,
+    width = 120,
+    height = 40,
+    borderRadius = 8,
+    baseColor = "#e5e7eb",
+    highlightColor = "#f3f4f6",
+    direction = "left-to-right",
+    variant = "solid",
+    showIcon = false,
+    iconPosition = "left",
     speed = "normal",
-    reverse = false,
     respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "orbit-rings",
+    testId = "shimmer-button",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel = "Loading button...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
@@ -34,18 +34,48 @@ const OrbitRings = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const normalizedSize = normalizeSize(size);
-    const sizeNum = parseInt(normalizedSize, 10);
-    const durationNum = parseInt(effectiveDuration, 10);
-    return /* @__PURE__ */ jsx(
+    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 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 normalizedHeight = typeof height === "number" ? height : 40;
+    const iconSize = Math.floor(normalizedHeight * 0.5);
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
+        className: cn(
+          "relative overflow-hidden inline-flex items-center justify-center gap-2",
+          className
+        ),
         style: {
-          width: normalizedSize,
-          height: normalizedSize,
+          width: typeof width === "number" ? `${width}px` : width,
+          height: typeof height === "number" ? `${height}px` : height,
+          borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+          backgroundColor: variant === "solid" ? baseColor : "transparent",
+          border: variant === "outline" ? `2px solid ${baseColor}` : "none",
+          padding: "0 16px",
           opacity,
           transition: transitionStyle,
           ...style
@@ -54,37 +84,86 @@ const OrbitRings = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full", children: Array.from({ length: ringCount }, (_, index) => {
-          const ringSize = sizeNum - index * (ringGap + thickness) * 2;
-          if (ringSize <= 0) return null;
-          const ringColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
-          const shouldReverse = alternate ? index % 2 === 1 !== reverse : reverse;
-          const ringDuration = durationNum + index * 200;
-          return /* @__PURE__ */ jsx(
+        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 rounded-full",
+              className: "absolute inset-0 pointer-events-none",
               style: {
-                width: ringSize,
-                height: ringSize,
-                left: "50%",
-                top: "50%",
-                transform: "translate(-50%, -50%)",
-                border: `${thickness}px solid transparent`,
-                borderTopColor: ringColor,
-                borderRightColor: ringColor,
-                animation: `orbit-rotate ${ringDuration}ms linear infinite`,
-                animationDirection: shouldReverse ? "reverse" : "normal"
+                background: `linear-gradient(${getGradientDirection()}, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)`,
+                animation: `${getAnimationName()} ${effectiveDuration} infinite`
               }
-            },
-            index
-          );
-        }) })
+            }
+          )
+        ]
       }
     );
   }
 );
-OrbitRings.displayName = "OrbitRings";
+ShimmerButton.displayName = "ShimmerButton";
 export {
-  OrbitRings
+  ShimmerButton
 };