premium-react-loaders 2.3.1 → 3.1.0

package/dist/index40.cjs

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index56.cjs");
+const classNames = require("./index3.cjs");
+const ShimmerButton = react.forwardRef(
+  ({
+    width = 120,
+    height = 40,
+    borderRadius = 8,
+    baseColor = "#e5e7eb",
+    highlightColor = "#f3f4f6",
+    direction = "left-to-right",
+    variant = "solid",
+    showIcon = false,
+    iconPosition = "left",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "shimmer-button",
+    visible = true,
+    ariaLabel = "Loading button...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    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(
+          "relative overflow-hidden inline-flex items-center justify-center gap-2",
+          className
+        ),
+        style: {
+          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
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        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 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`
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ShimmerButton.displayName = "ShimmerButton";
+exports.ShimmerButton = ShimmerButton;

package/dist/index40.js

@@ -0,0 +1,169 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { cn } from "./index3.js";
+const ShimmerButton = forwardRef(
+  ({
+    width = 120,
+    height = 40,
+    borderRadius = 8,
+    baseColor = "#e5e7eb",
+    highlightColor = "#f3f4f6",
+    direction = "left-to-right",
+    variant = "solid",
+    showIcon = false,
+    iconPosition = "left",
+    speed = "normal",
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "shimmer-button",
+    visible = true,
+    ariaLabel = "Loading button...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    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(
+          "relative overflow-hidden inline-flex items-center justify-center gap-2",
+          className
+        ),
+        style: {
+          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
+        },
+        role: "status",
+        "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`
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ShimmerButton.displayName = "ShimmerButton";
+export {
+  ShimmerButton
+};

package/dist/index41.cjs

@@ -0,0 +1,97 @@
+"use strict";
+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 classNames = require("./index3.cjs");
+const OrbitDots = react.forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    dotCount = 4,
+    dotSize = 8,
+    orbitRadius = 0.4,
+    stagger = true,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "orbit-dots",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const normalizedSize = colors.normalizeSize(size);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const radius = sizeNum * orbitRadius;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: {
+          width: normalizedSize,
+          height: normalizedSize,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "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(
+                "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
+                  }
+                },
+                index
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+OrbitDots.displayName = "OrbitDots";
+exports.OrbitDots = OrbitDots;

package/dist/index41.js

@@ -0,0 +1,97 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { normalizeSize } from "./index4.js";
+import { cn } from "./index3.js";
+const OrbitDots = forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    dotCount = 4,
+    dotSize = 8,
+    orbitRadius = 0.4,
+    stagger = true,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "orbit-dots",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const normalizedSize = normalizeSize(size);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const radius = sizeNum * orbitRadius;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style: {
+          width: normalizedSize,
+          height: normalizedSize,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "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(
+                "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
+                  }
+                },
+                index
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+OrbitDots.displayName = "OrbitDots";
+export {
+  OrbitDots
+};

package/dist/index42.cjs

@@ -0,0 +1,90 @@
+"use strict";
+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 classNames = require("./index3.cjs");
+const OrbitRings = react.forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    secondaryColor,
+    thickness = 2,
+    ringCount = 3,
+    ringGap = 6,
+    alternate = true,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "orbit-rings",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const normalizedSize = colors.normalizeSize(size);
+    const sizeNum = parseInt(normalizedSize, 10);
+    const durationNum = parseInt(effectiveDuration, 10);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: {
+          width: normalizedSize,
+          height: normalizedSize,
+          opacity,
+          transition: transitionStyle,
+          ...style
+        },
+        role: "status",
+        "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(
+            "div",
+            {
+              className: "absolute rounded-full",
+              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"
+              }
+            },
+            index
+          );
+        }) })
+      }
+    );
+  }
+);
+OrbitRings.displayName = "OrbitRings";
+exports.OrbitRings = OrbitRings;