premium-react-loaders 1.2.0 → 2.0.0

package/dist/index19.cjs

@@ -2,7 +2,7 @@
 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("./index30.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerWave = react.forwardRef(
@@ -14,6 +14,9 @@ const SpinnerWave = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-wave",
@@ -21,9 +24,15 @@ const SpinnerWave = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     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 sizeValue = colors.normalizeSize(size);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -31,7 +40,11 @@ const SpinnerWave = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -67,4 +80,3 @@ const SpinnerWave = react.forwardRef(
 );
 SpinnerWave.displayName = "SpinnerWave";
 exports.SpinnerWave = SpinnerWave;
-//# sourceMappingURL=index19.cjs.map

package/dist/index19.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SpinnerWave = forwardRef(
@@ -12,6 +12,9 @@ const SpinnerWave = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-wave",
@@ -19,9 +22,15 @@ const SpinnerWave = forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = normalizeSize(size);
     return /* @__PURE__ */ jsx(
       "div",
@@ -29,7 +38,11 @@ const SpinnerWave = forwardRef(
         ref,
         "data-testid": testId,
         className: cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -67,4 +80,3 @@ SpinnerWave.displayName = "SpinnerWave";
 export {
   SpinnerWave
 };
-//# sourceMappingURL=index19.js.map

package/dist/index20.cjs

@@ -2,7 +2,7 @@
 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("./index30.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerPulse = react.forwardRef(
@@ -14,6 +14,9 @@ const SpinnerPulse = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-pulse",
@@ -21,9 +24,15 @@ const SpinnerPulse = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     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 sizeValue = colors.normalizeSize(size);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -31,7 +40,11 @@ const SpinnerPulse = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -82,4 +95,3 @@ const SpinnerPulse = react.forwardRef(
 );
 SpinnerPulse.displayName = "SpinnerPulse";
 exports.SpinnerPulse = SpinnerPulse;
-//# sourceMappingURL=index20.cjs.map

package/dist/index20.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SpinnerPulse = forwardRef(
@@ -12,6 +12,9 @@ const SpinnerPulse = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-pulse",
@@ -19,9 +22,15 @@ const SpinnerPulse = forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = normalizeSize(size);
     return /* @__PURE__ */ jsx(
       "div",
@@ -29,7 +38,11 @@ const SpinnerPulse = forwardRef(
         ref,
         "data-testid": testId,
         className: cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -82,4 +95,3 @@ SpinnerPulse.displayName = "SpinnerPulse";
 export {
   SpinnerPulse
 };
-//# sourceMappingURL=index20.js.map

package/dist/index21.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const colors = require("./index4.cjs");
-const hooks = require("./index31.cjs");
+const hooks = require("./index30.cjs");
 const classNames = require("./index3.cjs");
 const ProgressBar = react.forwardRef(
   ({
@@ -18,6 +18,9 @@ const ProgressBar = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "progress-bar",
@@ -25,13 +28,19 @@ const ProgressBar = react.forwardRef(
     ariaLabel,
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const gradientId = react.useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    const gradientId = react.useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -41,7 +50,9 @@ const ProgressBar = react.forwardRef(
         style: {
           height: colors.normalizeSize(height),
           backgroundColor: secondaryColor,
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "progressbar",
         "aria-label": progressLabel,
@@ -105,4 +116,3 @@ const ProgressBar = react.forwardRef(
 );
 ProgressBar.displayName = "ProgressBar";
 exports.ProgressBar = ProgressBar;
-//# sourceMappingURL=index21.cjs.map

package/dist/index21.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { normalizeSize, getContrastColor } from "./index4.js";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { cn } from "./index3.js";
 const ProgressBar = forwardRef(
   ({
@@ -16,6 +16,9 @@ const ProgressBar = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "progress-bar",
@@ -23,13 +26,19 @@ const ProgressBar = forwardRef(
     ariaLabel,
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -39,7 +48,9 @@ const ProgressBar = forwardRef(
         style: {
           height: normalizeSize(height),
           backgroundColor: secondaryColor,
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "progressbar",
         "aria-label": progressLabel,
@@ -105,4 +116,3 @@ ProgressBar.displayName = "ProgressBar";
 export {
   ProgressBar
 };
-//# sourceMappingURL=index21.js.map

package/dist/index22.cjs

@@ -2,7 +2,7 @@
 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("./index30.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const ProgressCircle = react.forwardRef(
@@ -18,6 +18,9 @@ const ProgressCircle = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "progress-circle",
@@ -25,9 +28,15 @@ const ProgressCircle = react.forwardRef(
     ariaLabel,
     ...rest
   }, ref) => {
-    if (!visible) return null;
     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 clampedValue = Math.min(100, Math.max(0, value));
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const sizeValue = colors.parseSizeToNumber(size, 56);
@@ -46,7 +55,9 @@ const ProgressCircle = react.forwardRef(
         style: {
           width: colors.normalizeSize(size),
           height: colors.normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "progressbar",
         "aria-label": progressLabel,
@@ -133,4 +144,3 @@ const ProgressCircle = react.forwardRef(
 );
 ProgressCircle.displayName = "ProgressCircle";
 exports.ProgressCircle = ProgressCircle;
-//# sourceMappingURL=index22.cjs.map

package/dist/index22.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const ProgressCircle = forwardRef(
@@ -16,6 +16,9 @@ const ProgressCircle = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "progress-circle",
@@ -23,9 +26,15 @@ const ProgressCircle = forwardRef(
     ariaLabel,
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const sizeValue = parseSizeToNumber(size, 56);
@@ -44,7 +53,9 @@ const ProgressCircle = forwardRef(
         style: {
           width: normalizeSize(size),
           height: normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "progressbar",
         "aria-label": progressLabel,
@@ -133,4 +144,3 @@ ProgressCircle.displayName = "ProgressCircle";
 export {
   ProgressCircle
 };
-//# sourceMappingURL=index22.js.map

package/dist/index23.cjs

@@ -2,7 +2,7 @@
 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("./index30.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const ProgressRing = react.forwardRef(
@@ -19,6 +19,9 @@ const ProgressRing = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "progress-ring",
@@ -26,9 +29,16 @@ const ProgressRing = react.forwardRef(
     ariaLabel,
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const gradientId = react.useMemo(() => `progress-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const sizeValue = colors.parseSizeToNumber(size, 56);
@@ -38,7 +48,6 @@ const ProgressRing = react.forwardRef(
     const strokeDashoffset = circumference - clampedValue / 100 * circumference;
     const bufferDashoffset = clampedBuffer !== void 0 ? circumference - clampedBuffer / 100 * circumference : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    const gradientId = react.useMemo(() => `progress-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -48,7 +57,9 @@ const ProgressRing = react.forwardRef(
         style: {
           width: colors.normalizeSize(size),
           height: colors.normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "progressbar",
         "aria-label": progressLabel,
@@ -139,4 +150,3 @@ const ProgressRing = react.forwardRef(
 );
 ProgressRing.displayName = "ProgressRing";
 exports.ProgressRing = ProgressRing;
-//# sourceMappingURL=index23.cjs.map

package/dist/index23.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const ProgressRing = forwardRef(
@@ -17,6 +17,9 @@ const ProgressRing = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "progress-ring",
@@ -24,9 +27,16 @@ const ProgressRing = forwardRef(
     ariaLabel,
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const gradientId = useMemo(() => `progress-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const sizeValue = parseSizeToNumber(size, 56);
@@ -36,7 +46,6 @@ const ProgressRing = forwardRef(
     const strokeDashoffset = circumference - clampedValue / 100 * circumference;
     const bufferDashoffset = clampedBuffer !== void 0 ? circumference - clampedBuffer / 100 * circumference : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    const gradientId = useMemo(() => `progress-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -46,7 +55,9 @@ const ProgressRing = forwardRef(
         style: {
           width: normalizeSize(size),
           height: normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "progressbar",
         "aria-label": progressLabel,
@@ -139,4 +150,3 @@ ProgressRing.displayName = "ProgressRing";
 export {
   ProgressRing
 };
-//# sourceMappingURL=index23.js.map

package/dist/index24.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const hooks = require("./index30.cjs");
 const classNames = require("./index3.cjs");
 const ProgressSteps = react.forwardRef(
   ({
@@ -15,6 +16,9 @@ const ProgressSteps = react.forwardRef(
     completedColor,
     activeColor,
     inactiveColor = "#e0e0e0",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "progress-steps",
@@ -22,7 +26,13 @@ const ProgressSteps = react.forwardRef(
     ariaLabel = "Progress steps",
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const completed = completedColor || color;
     const active = activeColor || color;
     const getStepStatus = (index) => {
@@ -49,7 +59,11 @@ const ProgressSteps = react.forwardRef(
           isHorizontal ? "flex-row items-center w-full" : "flex-col items-start",
           className
         ),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "progressbar",
         "aria-label": ariaLabel,
         "aria-valuenow": currentStep,
@@ -128,4 +142,3 @@ const ProgressSteps = react.forwardRef(
 );
 ProgressSteps.displayName = "ProgressSteps";
 exports.ProgressSteps = ProgressSteps;
-//# sourceMappingURL=index24.cjs.map

package/dist/index24.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, Fragment } from "react";
+import { useLoaderVisibility } from "./index30.js";
 import { cn } from "./index3.js";
 const ProgressSteps = forwardRef(
   ({
@@ -13,6 +14,9 @@ const ProgressSteps = forwardRef(
     completedColor,
     activeColor,
     inactiveColor = "#e0e0e0",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "progress-steps",
@@ -20,7 +24,13 @@ const ProgressSteps = forwardRef(
     ariaLabel = "Progress steps",
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const completed = completedColor || color;
     const active = activeColor || color;
     const getStepStatus = (index) => {
@@ -47,7 +57,11 @@ const ProgressSteps = forwardRef(
           isHorizontal ? "flex-row items-center w-full" : "flex-col items-start",
           className
         ),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "progressbar",
         "aria-label": ariaLabel,
         "aria-valuenow": currentStep,
@@ -128,4 +142,3 @@ ProgressSteps.displayName = "ProgressSteps";
 export {
   ProgressSteps
 };
-//# sourceMappingURL=index24.js.map

package/dist/index25.cjs

@@ -2,7 +2,7 @@
 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("./index30.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const PulseDots = react.forwardRef(
@@ -14,6 +14,9 @@ const PulseDots = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "pulse-dots",
@@ -21,9 +24,15 @@ const PulseDots = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     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;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -32,7 +41,9 @@ const PulseDots = react.forwardRef(
         className: classNames.cn("inline-flex items-center justify-center gap-2", className),
         style: {
           height: colors.normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -58,4 +69,3 @@ const PulseDots = react.forwardRef(
 );
 PulseDots.displayName = "PulseDots";
 exports.PulseDots = PulseDots;
-//# sourceMappingURL=index25.cjs.map