premium-react-loaders 3.1.1 → 4.1.0

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("./index56.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 "./index56.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
 };

package/dist/index43.cjs

@@ -2,19 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
-const AtomLoader = react.forwardRef(
+const OrbitDots = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
     secondaryColor,
-    orbits = 3,
-    nucleusSize = 8,
-    electronSize = 5,
-    showNucleus = true,
-    thickness = 1,
+    dotCount = 4,
+    dotSize = 8,
+    orbitRadius = 0.4,
+    stagger = true,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -23,7 +22,7 @@ const AtomLoader = react.forwardRef(
     transition,
     className,
     style,
-    testId = "atom-loader",
+    testId = "orbit-dots",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -38,8 +37,8 @@ const AtomLoader = react.forwardRef(
     );
     if (!shouldRender) return null;
     const normalizedSize = colors.normalizeSize(size);
-    const durationNum = parseInt(effectiveDuration, 10);
-    const orbitAngles = Array.from({ length: orbits }, (_, i) => 180 / orbits * i);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const radius = sizeNum * orbitRadius;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -57,83 +56,42 @@ const AtomLoader = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full", children: [
-          showNucleus && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "absolute rounded-full",
-              style: {
-                width: nucleusSize,
-                height: nucleusSize,
-                backgroundColor: secondaryColor || color,
-                left: "50%",
-                top: "50%",
-                transform: "translate(-50%, -50%)"
-              }
-            }
-          ),
-          orbitAngles.map((angle, index) => {
-            const orbitDuration = durationNum + index * 150;
-            const shouldReverse = index % 2 === 1 ? !reverse : reverse;
-            const electronColor = secondaryColor && index % 2 === 1 ? secondaryColor : color;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "absolute inset-0",
-                style: {
-                  transform: `rotate(${angle}deg)`
+        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(
+                "div",
+                {
+                  className: "absolute rounded-full",
+                  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
+                  }
                 },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "absolute rounded-full",
-                      style: {
-                        width: "100%",
-                        height: "60%",
-                        left: "0",
-                        top: "20%",
-                        border: `${thickness}px solid ${color}20`
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "absolute",
-                      style: {
-                        width: "100%",
-                        height: "60%",
-                        left: "0",
-                        top: "20%",
-                        animation: `atom-orbit ${orbitDuration}ms linear infinite`,
-                        animationDirection: shouldReverse ? "reverse" : "normal"
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: "absolute rounded-full",
-                          style: {
-                            width: electronSize,
-                            height: electronSize,
-                            backgroundColor: electronColor,
-                            left: "50%",
-                            top: 0,
-                            transform: "translate(-50%, -50%)"
-                          }
-                        }
-                      )
-                    }
-                  )
-                ]
-              },
-              index
-            );
-          })
-        ] })
+                index
+              );
+            })
+          }
+        )
       }
     );
   }
 );
-AtomLoader.displayName = "AtomLoader";
-exports.AtomLoader = AtomLoader;
+OrbitDots.displayName = "OrbitDots";
+exports.OrbitDots = OrbitDots;