premium-react-loaders 2.0.0 → 2.2.0

package/dist/index26.cjs

@@ -2,29 +2,30 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index30.cjs");
-const colors = require("./index4.cjs");
+const hooks = require("./index35.cjs");
 const classNames = require("./index3.cjs");
-const PulseWave = react.forwardRef(
+const ProgressSteps = react.forwardRef(
   ({
-    size = "md",
+    steps,
+    currentStep,
+    labels,
+    showNumbers = true,
+    orientation = "horizontal",
+    connector = "line",
     color = "#3b82f6",
-    barCount = 5,
-    speed = "normal",
-    reverse = false,
-    respectMotionPreference = true,
+    completedColor,
+    activeColor,
+    inactiveColor = "#e0e0e0",
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "pulse-wave",
+    testId = "progress-steps",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel = "Progress steps",
     ...rest
   }, ref) => {
-    const prefersReducedMotion = hooks.useReducedMotion();
-    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
       visible,
       delay,
@@ -32,45 +33,112 @@ const PulseWave = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const sizeValue = colors.parseSizeToNumber(size, 40);
-    const barWidth = Math.floor(sizeValue / (barCount * 2.5));
+    const completed = completedColor || color;
+    const active = activeColor || color;
+    const getStepStatus = (index) => {
+      if (index < currentStep) return "completed";
+      if (index === currentStep) return "active";
+      return "inactive";
+    };
+    const getStepColor = (status) => {
+      if (status === "completed") return completed;
+      if (status === "active") return active;
+      return inactiveColor;
+    };
+    const getConnectorColor = (index) => {
+      return index < currentStep ? completed : inactiveColor;
+    };
+    const isHorizontal = orientation === "horizontal";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-end justify-center gap-1", className),
+        className: classNames.cn(
+          "flex",
+          isHorizontal ? "flex-row items-center w-full" : "flex-col items-start",
+          className
+        ),
         style: {
-          height: colors.normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
         },
-        role: "status",
+        role: "progressbar",
         "aria-label": ariaLabel,
-        "aria-busy": "true",
+        "aria-valuenow": currentStep,
+        "aria-valuemin": 0,
+        "aria-valuemax": steps - 1,
         ...rest,
-        children: Array.from({ length: barCount }).map((_, index) => {
-          const delay2 = reverse ? (barCount - index - 1) / barCount * 0.5 : index / barCount * 0.5;
-          return /* @__PURE__ */ jsxRuntime.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"
+        children: Array.from({ length: steps }).map((_, index) => {
+          const status = getStepStatus(index);
+          const stepColor = getStepColor(status);
+          const showConnector = index < steps - 1 && connector === "line";
+          return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: classNames.cn(
+                  "flex items-center",
+                  isHorizontal ? "flex-col" : "flex-row gap-3"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "rounded-full flex items-center justify-center font-medium text-sm transition-colors",
+                      style: {
+                        width: "2rem",
+                        height: "2rem",
+                        backgroundColor: stepColor,
+                        color: "#ffffff"
+                      },
+                      children: showNumbers && /* @__PURE__ */ jsxRuntime.jsx("span", { children: index + 1 })
+                    }
+                  ),
+                  (labels == null ? void 0 : labels[index]) && /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: classNames.cn(
+                        "text-xs mt-1 transition-colors",
+                        isHorizontal ? "text-center" : "text-left"
+                      ),
+                      style: {
+                        color: status === "inactive" ? "#9ca3af" : "#374151",
+                        maxWidth: isHorizontal ? "80px" : "none"
+                      },
+                      children: labels[index]
+                    }
+                  )
+                ]
               }
-            },
-            index
-          );
+            ),
+            showConnector && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "transition-colors",
+                style: {
+                  backgroundColor: getConnectorColor(index),
+                  ...isHorizontal ? {
+                    height: "2px",
+                    flex: 1,
+                    marginLeft: "4px",
+                    marginRight: "4px"
+                  } : {
+                    width: "2px",
+                    height: "32px",
+                    marginLeft: "15px",
+                    marginTop: (labels == null ? void 0 : labels[index]) ? "4px" : "0",
+                    marginBottom: "4px"
+                  }
+                }
+              }
+            )
+          ] }, index);
         })
       }
     );
   }
 );
-PulseWave.displayName = "PulseWave";
-exports.PulseWave = PulseWave;
+ProgressSteps.displayName = "ProgressSteps";
+exports.ProgressSteps = ProgressSteps;

package/dist/index26.js

@@ -1,28 +1,29 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
-import { normalizeSize, parseSizeToNumber } from "./index4.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment } from "react";
+import { useLoaderVisibility } from "./index35.js";
 import { cn } from "./index3.js";
-const PulseWave = forwardRef(
+const ProgressSteps = forwardRef(
   ({
-    size = "md",
+    steps,
+    currentStep,
+    labels,
+    showNumbers = true,
+    orientation = "horizontal",
+    connector = "line",
     color = "#3b82f6",
-    barCount = 5,
-    speed = "normal",
-    reverse = false,
-    respectMotionPreference = true,
+    completedColor,
+    activeColor,
+    inactiveColor = "#e0e0e0",
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "pulse-wave",
+    testId = "progress-steps",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel = "Progress steps",
     ...rest
   }, ref) => {
-    const prefersReducedMotion = useReducedMotion();
-    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
@@ -30,47 +31,114 @@ const PulseWave = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const sizeValue = parseSizeToNumber(size, 40);
-    const barWidth = Math.floor(sizeValue / (barCount * 2.5));
+    const completed = completedColor || color;
+    const active = activeColor || color;
+    const getStepStatus = (index) => {
+      if (index < currentStep) return "completed";
+      if (index === currentStep) return "active";
+      return "inactive";
+    };
+    const getStepColor = (status) => {
+      if (status === "completed") return completed;
+      if (status === "active") return active;
+      return inactiveColor;
+    };
+    const getConnectorColor = (index) => {
+      return index < currentStep ? completed : inactiveColor;
+    };
+    const isHorizontal = orientation === "horizontal";
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-end justify-center gap-1", className),
+        className: cn(
+          "flex",
+          isHorizontal ? "flex-row items-center w-full" : "flex-col items-start",
+          className
+        ),
         style: {
-          height: normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
         },
-        role: "status",
+        role: "progressbar",
         "aria-label": ariaLabel,
-        "aria-busy": "true",
+        "aria-valuenow": currentStep,
+        "aria-valuemin": 0,
+        "aria-valuemax": steps - 1,
         ...rest,
-        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"
+        children: Array.from({ length: steps }).map((_, index) => {
+          const status = getStepStatus(index);
+          const stepColor = getStepColor(status);
+          const showConnector = index < steps - 1 && connector === "line";
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center",
+                  isHorizontal ? "flex-col" : "flex-row gap-3"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "rounded-full flex items-center justify-center font-medium text-sm transition-colors",
+                      style: {
+                        width: "2rem",
+                        height: "2rem",
+                        backgroundColor: stepColor,
+                        color: "#ffffff"
+                      },
+                      children: showNumbers && /* @__PURE__ */ jsx("span", { children: index + 1 })
+                    }
+                  ),
+                  (labels == null ? void 0 : labels[index]) && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "text-xs mt-1 transition-colors",
+                        isHorizontal ? "text-center" : "text-left"
+                      ),
+                      style: {
+                        color: status === "inactive" ? "#9ca3af" : "#374151",
+                        maxWidth: isHorizontal ? "80px" : "none"
+                      },
+                      children: labels[index]
+                    }
+                  )
+                ]
               }
-            },
-            index
-          );
+            ),
+            showConnector && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "transition-colors",
+                style: {
+                  backgroundColor: getConnectorColor(index),
+                  ...isHorizontal ? {
+                    height: "2px",
+                    flex: 1,
+                    marginLeft: "4px",
+                    marginRight: "4px"
+                  } : {
+                    width: "2px",
+                    height: "32px",
+                    marginLeft: "15px",
+                    marginTop: (labels == null ? void 0 : labels[index]) ? "4px" : "0",
+                    marginBottom: "4px"
+                  }
+                }
+              }
+            )
+          ] }, index);
         })
       }
     );
   }
 );
-PulseWave.displayName = "PulseWave";
+ProgressSteps.displayName = "ProgressSteps";
 export {
-  PulseWave
+  ProgressSteps
 };

package/dist/index27.cjs

@@ -2,14 +2,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index30.cjs");
+const hooks = require("./index35.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
-const PulseBars = react.forwardRef(
+const PulseDots = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    barCount = 4,
+    dotCount = 3,
+    dotSize = 10,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -18,7 +19,7 @@ const PulseBars = react.forwardRef(
     transition,
     className,
     style,
-    testId = "pulse-bars",
+    testId = "pulse-dots",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -32,14 +33,12 @@ const PulseBars = react.forwardRef(
       transition
     );
     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("inline-flex items-center justify-center gap-1", className),
+        className: classNames.cn("inline-flex items-center justify-center gap-2", className),
         style: {
           height: colors.normalizeSize(size),
           ...style,
@@ -50,30 +49,23 @@ const PulseBars = react.forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        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: "rounded-sm",
-              style: {
-                width: `${barWidth}px`,
-                minHeight: "30%",
-                height: "100%",
-                backgroundColor: color,
-                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
-                animationDelay: `${delay2}s`,
-                transformOrigin: "center"
-              }
-            },
-            index
-          );
-        })
+        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: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`
+            }
+          },
+          index
+        ))
       }
     );
   }
 );
-PulseBars.displayName = "PulseBars";
-exports.PulseBars = PulseBars;
+PulseDots.displayName = "PulseDots";
+exports.PulseDots = PulseDots;

package/dist/index27.js

@@ -1,13 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
-import { normalizeSize, parseSizeToNumber } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index35.js";
+import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
-const PulseBars = forwardRef(
+const PulseDots = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    barCount = 4,
+    dotCount = 3,
+    dotSize = 10,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -16,7 +17,7 @@ const PulseBars = forwardRef(
     transition,
     className,
     style,
-    testId = "pulse-bars",
+    testId = "pulse-dots",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -30,14 +31,12 @@ const PulseBars = forwardRef(
       transition
     );
     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("inline-flex items-center justify-center gap-1", className),
+        className: cn("inline-flex items-center justify-center gap-2", className),
         style: {
           height: normalizeSize(size),
           ...style,
@@ -48,32 +47,25 @@ const PulseBars = forwardRef(
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        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: "rounded-sm",
-              style: {
-                width: `${barWidth}px`,
-                minHeight: "30%",
-                height: "100%",
-                backgroundColor: color,
-                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
-                animationDelay: `${delay2}s`,
-                transformOrigin: "center"
-              }
-            },
-            index
-          );
-        })
+        children: Array.from({ length: dotCount }).map((_, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rounded-full",
+            style: {
+              width: normalizeSize(dotSize),
+              height: normalizeSize(dotSize),
+              backgroundColor: color,
+              animation: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`
+            }
+          },
+          index
+        ))
       }
     );
   }
 );
-PulseBars.displayName = "PulseBars";
+PulseDots.displayName = "PulseDots";
 export {
-  PulseBars
+  PulseDots
 };

package/dist/index28.cjs

@@ -2,17 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index30.cjs");
+const hooks = require("./index35.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
-const TypingIndicator = react.forwardRef(
+const PulseWave = react.forwardRef(
   ({
-    size,
+    size = "md",
     color = "#3b82f6",
-    dotCount = 3,
-    dotSize = 8,
-    gap = 4,
-    variant = "bounce",
+    barCount = 5,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -21,9 +18,9 @@ const TypingIndicator = react.forwardRef(
     transition,
     className,
     style,
-    testId = "typing-indicator",
+    testId = "pulse-wave",
     visible = true,
-    ariaLabel = "Typing...",
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = hooks.useReducedMotion();
@@ -35,16 +32,16 @@ const TypingIndicator = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const gapValue = colors.normalizeSize(gap);
+    const sizeValue = colors.parseSizeToNumber(size, 40);
+    const barWidth = Math.floor(sizeValue / (barCount * 2.5));
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center", className),
+        className: classNames.cn("inline-flex items-end justify-center gap-1", className),
         style: {
-          gap: gapValue,
-          height: size ? colors.normalizeSize(size) : "auto",
+          height: colors.normalizeSize(size),
           ...style,
           opacity,
           transition: transitionStyle
@@ -53,23 +50,27 @@ const TypingIndicator = react.forwardRef(
         "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) * 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__ */ jsxRuntime.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";
-exports.TypingIndicator = TypingIndicator;
+PulseWave.displayName = "PulseWave";
+exports.PulseWave = PulseWave;