premium-react-loaders 3.0.0 → 3.1.0

package/dist/index33.cjs

@@ -2,99 +2,81 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index47.cjs");
+const hooks = require("./index56.cjs");
 const classNames = require("./index3.cjs");
-const colors = require("./index4.cjs");
-const SuccessCheckmark = react.forwardRef(
+const LoaderOverlay = react.forwardRef(
   ({
-    size = "md",
-    color = "#10b981",
-    strokeWidth = 3,
-    duration = 500,
-    showCircle = false,
-    circleColor,
-    fillCircle = false,
+    loading = false,
+    loader,
+    children,
+    position = "fixed",
+    backdropOpacity = 0.5,
+    backdropColor = "#000000",
+    blur = false,
     delay = 0,
     minDuration = 0,
-    transition = true,
+    transition,
     className,
     style,
-    testId = "success-checkmark",
-    visible = true,
-    ariaLabel = "Success",
+    testId = "loader-overlay",
+    ariaLabel = "Loading content...",
+    zIndex = 9999,
     ...rest
   }, ref) => {
     const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
-      visible,
+      loading,
       delay,
       minDuration,
       transition
     );
-    if (!shouldRender) return null;
-    const effectiveCircleColor = circleColor || color;
-    const sizeValue = colors.normalizeSize(size);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const backdropStyles = {
+      backgroundColor: backdropColor,
+      opacity: backdropOpacity,
+      backdropFilter: blur ? "blur(4px)" : void 0,
+      WebkitBackdropFilter: blur ? "blur(4px)" : void 0
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center", className),
-        style: {
-          ...style,
-          opacity,
-          transition: transitionStyle
-        },
-        role: "status",
-        "aria-label": ariaLabel,
+        className: classNames.cn("relative", className),
+        style,
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "svg",
-          {
-            className: "animate-success-scale",
-            style: {
-              width: sizeValue,
-              height: sizeValue,
-              animationDuration: `${duration}ms`
-            },
-            viewBox: "0 0 52 52",
-            children: [
-              showCircle && /* @__PURE__ */ jsxRuntime.jsx(
-                "circle",
-                {
-                  className: "animate-success-circle",
-                  cx: "26",
-                  cy: "26",
-                  r: "23",
-                  fill: fillCircle ? effectiveCircleColor : "none",
-                  stroke: effectiveCircleColor,
-                  strokeWidth,
-                  style: {
-                    animationDuration: `${duration}ms`
-                  }
-                }
+        children: [
+          children,
+          shouldRender && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: classNames.cn(
+                "inset-0 flex items-center justify-center",
+                position === "fixed" ? "fixed" : "absolute"
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  className: "animate-success-check",
-                  fill: "none",
-                  stroke: color,
-                  strokeWidth,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M14.1 27.2l7.1 7.2 16.7-16.8",
-                  style: {
-                    animationDuration: `${duration}ms`,
-                    animationDelay: showCircle ? `${duration * 0.3}ms` : "0ms"
+              style: {
+                zIndex,
+                opacity,
+                transition: transitionStyle
+              },
+              role: "status",
+              "aria-label": ariaLabel,
+              "aria-busy": "true",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0",
+                    style: backdropStyles,
+                    "aria-hidden": "true"
                   }
-                }
-              )
-            ]
-          }
-        )
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children: loader })
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
-SuccessCheckmark.displayName = "SuccessCheckmark";
-exports.SuccessCheckmark = SuccessCheckmark;
+LoaderOverlay.displayName = "LoaderOverlay";
+exports.LoaderOverlay = LoaderOverlay;

package/dist/index33.js

@@ -1,100 +1,82 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useLoaderVisibility } from "./index47.js";
+import { useLoaderVisibility } from "./index56.js";
 import { cn } from "./index3.js";
-import { normalizeSize } from "./index4.js";
-const SuccessCheckmark = forwardRef(
+const LoaderOverlay = forwardRef(
   ({
-    size = "md",
-    color = "#10b981",
-    strokeWidth = 3,
-    duration = 500,
-    showCircle = false,
-    circleColor,
-    fillCircle = false,
+    loading = false,
+    loader,
+    children,
+    position = "fixed",
+    backdropOpacity = 0.5,
+    backdropColor = "#000000",
+    blur = false,
     delay = 0,
     minDuration = 0,
-    transition = true,
+    transition,
     className,
     style,
-    testId = "success-checkmark",
-    visible = true,
-    ariaLabel = "Success",
+    testId = "loader-overlay",
+    ariaLabel = "Loading content...",
+    zIndex = 9999,
     ...rest
   }, ref) => {
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
-      visible,
+      loading,
       delay,
       minDuration,
       transition
     );
-    if (!shouldRender) return null;
-    const effectiveCircleColor = circleColor || color;
-    const sizeValue = normalizeSize(size);
-    return /* @__PURE__ */ jsx(
+    const backdropStyles = {
+      backgroundColor: backdropColor,
+      opacity: backdropOpacity,
+      backdropFilter: blur ? "blur(4px)" : void 0,
+      WebkitBackdropFilter: blur ? "blur(4px)" : void 0
+    };
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
-        style: {
-          ...style,
-          opacity,
-          transition: transitionStyle
-        },
-        role: "status",
-        "aria-label": ariaLabel,
+        className: cn("relative", className),
+        style,
         ...rest,
-        children: /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            className: "animate-success-scale",
-            style: {
-              width: sizeValue,
-              height: sizeValue,
-              animationDuration: `${duration}ms`
-            },
-            viewBox: "0 0 52 52",
-            children: [
-              showCircle && /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  className: "animate-success-circle",
-                  cx: "26",
-                  cy: "26",
-                  r: "23",
-                  fill: fillCircle ? effectiveCircleColor : "none",
-                  stroke: effectiveCircleColor,
-                  strokeWidth,
-                  style: {
-                    animationDuration: `${duration}ms`
-                  }
-                }
+        children: [
+          children,
+          shouldRender && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "inset-0 flex items-center justify-center",
+                position === "fixed" ? "fixed" : "absolute"
               ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  className: "animate-success-check",
-                  fill: "none",
-                  stroke: color,
-                  strokeWidth,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M14.1 27.2l7.1 7.2 16.7-16.8",
-                  style: {
-                    animationDuration: `${duration}ms`,
-                    animationDelay: showCircle ? `${duration * 0.3}ms` : "0ms"
+              style: {
+                zIndex,
+                opacity,
+                transition: transitionStyle
+              },
+              role: "status",
+              "aria-label": ariaLabel,
+              "aria-busy": "true",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute inset-0",
+                    style: backdropStyles,
+                    "aria-hidden": "true"
                   }
-                }
-              )
-            ]
-          }
-        )
+                ),
+                /* @__PURE__ */ jsx("div", { className: "relative z-10", children: loader })
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
-SuccessCheckmark.displayName = "SuccessCheckmark";
+LoaderOverlay.displayName = "LoaderOverlay";
 export {
-  SuccessCheckmark
+  LoaderOverlay
 };

package/dist/index34.cjs

@@ -2,39 +2,125 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index47.cjs");
+const hooks = require("./index56.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
-const ErrorIndicator = react.forwardRef(
+const ButtonSpinner = react.forwardRef(
   ({
-    size = "md",
-    color = "#ef4444",
-    strokeWidth = 3,
-    duration = 500,
-    showCircle = false,
-    circleColor,
-    fillCircle = false,
-    shake = true,
+    size = 16,
+    color = "currentColor",
+    variant = "circle",
+    position = "left",
+    thickness = 2,
+    dotCount = 3,
+    barCount = 3,
+    speed = "normal",
+    gap = 8,
+    showContent = true,
+    children,
     delay = 0,
     minDuration = 0,
-    transition = true,
+    transition,
+    respectMotionPreference = true,
     className,
     style,
-    testId = "error-indicator",
+    testId = "button-spinner",
     visible = true,
-    ariaLabel = "Error",
+    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 effectiveCircleColor = circleColor || color;
-    const sizeValue = colors.normalizeSize(size);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    if (!shouldRender) {
+      return children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children }) : null;
+    }
+    const spinnerSize = colors.normalizeSize(size);
+    const gapSize = typeof gap === "number" ? `${gap}px` : gap;
+    const renderSpinner = () => {
+      switch (variant) {
+        case "dots":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "inline-flex items-center justify-center",
+              style: { gap: `${parseInt(spinnerSize) / 8}px` },
+              children: Array.from({ length: dotCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "animate-button-dot-pulse",
+                  style: {
+                    width: `${parseInt(spinnerSize) / 3}px`,
+                    height: `${parseInt(spinnerSize) / 3}px`,
+                    backgroundColor: color,
+                    borderRadius: "50%",
+                    animationDuration: effectiveDuration,
+                    animationDelay: `${i * parseInt(effectiveDuration) / (dotCount * 3)}ms`
+                  }
+                },
+                i
+              ))
+            }
+          );
+        case "bars":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "inline-flex items-center justify-center",
+              style: { gap: `${parseInt(spinnerSize) / 8}px`, height: spinnerSize },
+              children: Array.from({ length: barCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "animate-button-bar-pulse",
+                  style: {
+                    width: `${parseInt(spinnerSize) / 6}px`,
+                    height: "100%",
+                    backgroundColor: color,
+                    borderRadius: "2px",
+                    animationDuration: effectiveDuration,
+                    animationDelay: `${i * parseInt(effectiveDuration) / (barCount * 3)}ms`
+                  }
+                },
+                i
+              ))
+            }
+          );
+        case "circle":
+        default:
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "animate-spinner-rotate",
+              style: {
+                width: spinnerSize,
+                height: spinnerSize,
+                animationDuration: effectiveDuration
+              },
+              viewBox: "0 0 50 50",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: "25",
+                  cy: "25",
+                  r: 25 - thickness * 4,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth: thickness * 2,
+                  strokeDasharray: "80, 200",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          );
+      }
+    };
+    const flexDirection = position === "right" ? "row-reverse" : "row";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
@@ -42,76 +128,22 @@ const ErrorIndicator = react.forwardRef(
         className: classNames.cn("inline-flex items-center justify-center", className),
         style: {
           ...style,
+          flexDirection: position === "center" ? "column" : flexDirection,
+          gap: showContent && children ? gapSize : 0,
           opacity,
           transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,
+        "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "svg",
-          {
-            className: shake ? "animate-error-shake" : "animate-error-scale",
-            style: {
-              width: sizeValue,
-              height: sizeValue,
-              animationDuration: `${duration}ms`
-            },
-            viewBox: "0 0 52 52",
-            children: [
-              showCircle && /* @__PURE__ */ jsxRuntime.jsx(
-                "circle",
-                {
-                  className: "animate-error-circle",
-                  cx: "26",
-                  cy: "26",
-                  r: "23",
-                  fill: fillCircle ? effectiveCircleColor : "none",
-                  stroke: effectiveCircleColor,
-                  strokeWidth,
-                  style: {
-                    animationDuration: `${duration}ms`
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "g",
-                {
-                  className: "animate-error-x",
-                  style: {
-                    animationDuration: `${duration}ms`,
-                    animationDelay: showCircle ? `${duration * 0.3}ms` : "0ms"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
-                      {
-                        fill: "none",
-                        stroke: color,
-                        strokeWidth,
-                        strokeLinecap: "round",
-                        d: "M16 16 36 36"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
-                      {
-                        fill: "none",
-                        stroke: color,
-                        strokeWidth,
-                        strokeLinecap: "round",
-                        d: "M36 16 16 36"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
+        children: [
+          renderSpinner(),
+          showContent && children && /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+        ]
       }
     );
   }
 );
-ErrorIndicator.displayName = "ErrorIndicator";
-exports.ErrorIndicator = ErrorIndicator;
+ButtonSpinner.displayName = "ButtonSpinner";
+exports.ButtonSpinner = ButtonSpinner;