premium-react-loaders 1.3.0 → 2.1.0

package/dist/index28.js

@@ -1,16 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
-import { normalizeSize } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index32.js";
+import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
-const TypingIndicator = forwardRef(
+const PulseWave = forwardRef(
   ({
-    size,
+    size = "md",
     color = "#3b82f6",
-    dotCount = 3,
-    dotSize = 8,
-    gap = 4,
-    variant = "bounce",
+    barCount = 5,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -19,9 +16,9 @@ const TypingIndicator = forwardRef(
     transition,
     className,
     style,
-    testId = "typing-indicator",
+    testId = "pulse-wave",
     visible = true,
-    ariaLabel = "Typing...",
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
@@ -33,16 +30,16 @@ const TypingIndicator = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const gapValue = normalizeSize(gap);
+    const sizeValue = parseSizeToNumber(size, 40);
+    const barWidth = Math.floor(sizeValue / (barCount * 2.5));
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center", className),
+        className: cn("inline-flex items-end justify-center gap-1", className),
         style: {
-          gap: gapValue,
-          height: size ? normalizeSize(size) : "auto",
+          height: normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
@@ -51,26 +48,29 @@ const TypingIndicator = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: Array.from({ length: dotCount }).map((_, index) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "rounded-full",
-            style: {
-              width: normalizeSize(dotSize),
-              height: normalizeSize(dotSize),
-              backgroundColor: color,
-              animation: `typing-${variant} ${effectiveDuration} ease-in-out infinite`,
-              animationDelay: reverse ? `${(dotCount - index - 1) * 0.2}s` : `${index * 0.2}s`
-            }
-          },
-          index
-        ))
+        children: Array.from({ length: barCount }).map((_, index) => {
+          const delay2 = reverse ? (barCount - index - 1) / barCount * 0.5 : index / barCount * 0.5;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "rounded-sm",
+              style: {
+                width: `${barWidth}px`,
+                height: "100%",
+                backgroundColor: color,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+                animationDelay: `${delay2}s`,
+                transformOrigin: "bottom"
+              }
+            },
+            index
+          );
+        })
       }
     );
   }
 );
-TypingIndicator.displayName = "TypingIndicator";
+PulseWave.displayName = "PulseWave";
 export {
-  TypingIndicator
+  PulseWave
 };
-//# sourceMappingURL=index28.js.map

package/dist/index29.cjs

@@ -2,82 +2,78 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index31.cjs");
+const hooks = require("./index32.cjs");
+const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
-const LoaderOverlay = react.forwardRef(
+const PulseBars = react.forwardRef(
   ({
-    loading = false,
-    loader,
-    children,
-    position = "fixed",
-    backdropOpacity = 0.5,
-    backdropColor = "#000000",
-    blur = false,
+    size = "md",
+    color = "#3b82f6",
+    barCount = 4,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "loader-overlay",
-    ariaLabel = "Loading content...",
-    zIndex = 9999,
+    testId = "pulse-bars",
+    visible = true,
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
-      loading,
+      visible,
       delay,
       minDuration,
       transition
     );
-    const backdropStyles = {
-      backgroundColor: backdropColor,
-      opacity: backdropOpacity,
-      backdropFilter: blur ? "blur(4px)" : void 0,
-      WebkitBackdropFilter: blur ? "blur(4px)" : void 0
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    if (!shouldRender) return null;
+    const sizeValue = colors.parseSizeToNumber(size, 40);
+    const barWidth = Math.floor(sizeValue / (barCount * 2));
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("relative", className),
-        style,
+        className: classNames.cn("inline-flex items-center justify-center gap-1", className),
+        style: {
+          height: colors.normalizeSize(size),
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
         ...rest,
-        children: [
-          children,
-          shouldRender && /* @__PURE__ */ jsxRuntime.jsxs(
+        children: Array.from({ length: barCount }).map((_, index) => {
+          const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];
+          const reversedDelays = [...delays].reverse();
+          const delay2 = reverse ? reversedDelays[index % reversedDelays.length] : delays[index % delays.length];
+          return /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: classNames.cn(
-                "inset-0 flex items-center justify-center",
-                position === "fixed" ? "fixed" : "absolute"
-              ),
+              className: "rounded-sm",
               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 })
-              ]
-            }
-          )
-        ]
+                width: `${barWidth}px`,
+                minHeight: "30%",
+                height: "100%",
+                backgroundColor: color,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+                animationDelay: `${delay2}s`,
+                transformOrigin: "center"
+              }
+            },
+            index
+          );
+        })
       }
     );
   }
 );
-LoaderOverlay.displayName = "LoaderOverlay";
-exports.LoaderOverlay = LoaderOverlay;
-//# sourceMappingURL=index29.cjs.map
+PulseBars.displayName = "PulseBars";
+exports.PulseBars = PulseBars;

package/dist/index29.js

@@ -1,83 +1,79 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useLoaderVisibility } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index32.js";
+import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
-const LoaderOverlay = forwardRef(
+const PulseBars = forwardRef(
   ({
-    loading = false,
-    loader,
-    children,
-    position = "fixed",
-    backdropOpacity = 0.5,
-    backdropColor = "#000000",
-    blur = false,
+    size = "md",
+    color = "#3b82f6",
+    barCount = 4,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "loader-overlay",
-    ariaLabel = "Loading content...",
-    zIndex = 9999,
+    testId = "pulse-bars",
+    visible = true,
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
-      loading,
+      visible,
       delay,
       minDuration,
       transition
     );
-    const backdropStyles = {
-      backgroundColor: backdropColor,
-      opacity: backdropOpacity,
-      backdropFilter: blur ? "blur(4px)" : void 0,
-      WebkitBackdropFilter: blur ? "blur(4px)" : void 0
-    };
-    return /* @__PURE__ */ jsxs(
+    if (!shouldRender) return null;
+    const sizeValue = parseSizeToNumber(size, 40);
+    const barWidth = Math.floor(sizeValue / (barCount * 2));
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("relative", className),
-        style,
+        className: cn("inline-flex items-center justify-center gap-1", className),
+        style: {
+          height: normalizeSize(size),
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
         ...rest,
-        children: [
-          children,
-          shouldRender && /* @__PURE__ */ jsxs(
+        children: Array.from({ length: barCount }).map((_, index) => {
+          const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];
+          const reversedDelays = [...delays].reverse();
+          const delay2 = reverse ? reversedDelays[index % reversedDelays.length] : delays[index % delays.length];
+          return /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn(
-                "inset-0 flex items-center justify-center",
-                position === "fixed" ? "fixed" : "absolute"
-              ),
+              className: "rounded-sm",
               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 })
-              ]
-            }
-          )
-        ]
+                width: `${barWidth}px`,
+                minHeight: "30%",
+                height: "100%",
+                backgroundColor: color,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+                animationDelay: `${delay2}s`,
+                transformOrigin: "center"
+              }
+            },
+            index
+          );
+        })
       }
     );
   }
 );
-LoaderOverlay.displayName = "LoaderOverlay";
+PulseBars.displayName = "PulseBars";
 export {
-  LoaderOverlay
+  PulseBars
 };
-//# sourceMappingURL=index29.js.map

package/dist/index3.cjs

@@ -1,8 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("./index30.cjs");
 function cn(...inputs) {
-  return clsx.clsx(inputs);
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (Array.isArray(input)) {
+      const result = cn(...input);
+      if (result) classes.push(result);
+    }
+  }
+  return classes.join(" ");
 }
 exports.cn = cn;
-//# sourceMappingURL=index3.cjs.map

package/dist/index3.js

@@ -1,8 +1,16 @@
-import { clsx } from "./index30.js";
 function cn(...inputs) {
-  return clsx(inputs);
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (Array.isArray(input)) {
+      const result = cn(...input);
+      if (result) classes.push(result);
+    }
+  }
+  return classes.join(" ");
 }
 export {
   cn
 };
-//# sourceMappingURL=index3.js.map

package/dist/index30.cjs

@@ -1,18 +1,78 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-exports.clsx = clsx;
-exports.default = clsx;
-//# sourceMappingURL=index30.cjs.map
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index32.cjs");
+const colors = require("./index4.cjs");
+const classNames = require("./index3.cjs");
+const TypingIndicator = react.forwardRef(
+  ({
+    size,
+    color = "#3b82f6",
+    dotCount = 3,
+    dotSize = 8,
+    gap = 4,
+    variant = "bounce",
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "typing-indicator",
+    visible = true,
+    ariaLabel = "Typing...",
+    ...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 gapValue = colors.normalizeSize(gap);
+    const durationMs = typeof effectiveDuration === "string" ? parseFloat(effectiveDuration) * 1e3 : effectiveDuration;
+    const delayBetweenDots = durationMs * 0.15 / 1e3;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center", className),
+        style: {
+          gap: gapValue,
+          height: size ? colors.normalizeSize(size) : "auto",
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: dotCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "rounded-full",
+            style: {
+              width: colors.normalizeSize(dotSize),
+              height: colors.normalizeSize(dotSize),
+              backgroundColor: color,
+              animation: `typing-${variant} ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(dotCount - index - 1) * delayBetweenDots}s` : `${index * delayBetweenDots}s`,
+              willChange: "transform, opacity"
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+TypingIndicator.displayName = "TypingIndicator";
+exports.TypingIndicator = TypingIndicator;

package/dist/index30.js

@@ -1,18 +1,78 @@
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index32.js";
+import { normalizeSize } from "./index4.js";
+import { cn } from "./index3.js";
+const TypingIndicator = forwardRef(
+  ({
+    size,
+    color = "#3b82f6",
+    dotCount = 3,
+    dotSize = 8,
+    gap = 4,
+    variant = "bounce",
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "typing-indicator",
+    visible = true,
+    ariaLabel = "Typing...",
+    ...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 gapValue = normalizeSize(gap);
+    const durationMs = typeof effectiveDuration === "string" ? parseFloat(effectiveDuration) * 1e3 : effectiveDuration;
+    const delayBetweenDots = durationMs * 0.15 / 1e3;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center", className),
+        style: {
+          gap: gapValue,
+          height: size ? normalizeSize(size) : "auto",
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: dotCount }).map((_, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rounded-full",
+            style: {
+              width: normalizeSize(dotSize),
+              height: normalizeSize(dotSize),
+              backgroundColor: color,
+              animation: `typing-${variant} ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(dotCount - index - 1) * delayBetweenDots}s` : `${index * delayBetweenDots}s`,
+              willChange: "transform, opacity"
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+TypingIndicator.displayName = "TypingIndicator";
 export {
-  clsx,
-  clsx as default
+  TypingIndicator
 };
-//# sourceMappingURL=index30.js.map