premium-react-loaders 1.1.0 → 1.3.0

package/dist/index25.cjs

@@ -2,15 +2,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const hooks = require("./index31.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const PulseDots = react.forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     dotCount = 3,
     dotSize = 10,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "pulse-dots",
@@ -18,8 +24,15 @@ const PulseDots = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
-    const animationDuration = colors.getAnimationDuration(speed);
+    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",
       {
@@ -28,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,
@@ -42,8 +57,8 @@ const PulseDots = react.forwardRef(
               width: colors.normalizeSize(dotSize),
               height: colors.normalizeSize(dotSize),
               backgroundColor: color,
-              animation: `pulse-bounce ${animationDuration} ease-in-out infinite`,
-              animationDelay: `${index * 0.15}s`
+              animation: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`
             }
           },
           index

package/dist/index25.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index25.cjs","sources":["../src/components/pulse/PulseDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseDotsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * PulseDots - Bouncing dots loader\n *\n * A loader with bouncing dots that scale and fade in a sequence.\n *\n * @example\n * ```tsx\n * <PulseDots size={40} color=\"#3b82f6\" />\n * <PulseDots size={32} dotCount={5} speed=\"fast\" />\n * ```\n */\nexport const PulseDots = forwardRef<HTMLDivElement, PulseDotsProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      dotCount = 3,\n      dotSize = 10,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'pulse-dots',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-2', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: dotCount }).map((_, index) => (\n          <div\n            key={index}\n            className=\"rounded-full\"\n            style={{\n              width: normalizeSize(dotSize),\n              height: normalizeSize(dotSize),\n              backgroundColor: color,\n              animation: `pulse-bounce ${animationDuration} ease-in-out infinite`,\n              animationDelay: `${index * 0.15}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nPulseDots.displayName = 'PulseDots';\n"],"names":["forwardRef","getAnimationDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;AAeO,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxCF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,OAAO;AAAA,cAC5B,QAAQA,OAAAA,cAAc,OAAO;AAAA,cAC7B,iBAAiB;AAAA,cACjB,WAAW,gBAAgB,iBAAiB;AAAA,cAC5C,gBAAgB,GAAG,QAAQ,IAAI;AAAA,YAAA;AAAA,UACjC;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;;"}
+{"version":3,"file":"index25.cjs","sources":["../src/components/pulse/PulseDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseDotsProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * PulseDots - Bouncing dots loader\n *\n * A loader with bouncing dots that scale and fade in a sequence.\n *\n * @example\n * ```tsx\n * <PulseDots size=\"lg\" color=\"#3b82f6\" />\n * <PulseDots size=\"sm\" dotCount={5} speed=\"fast\" reverse />\n * ```\n */\nexport const PulseDots = forwardRef<HTMLDivElement, PulseDotsProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      dotCount = 3,\n      dotSize = 10,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'pulse-dots',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-2', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: dotCount }).map((_, index) => (\n          <div\n            key={index}\n            className=\"rounded-full\"\n            style={{\n              width: normalizeSize(dotSize),\n              height: normalizeSize(dotSize),\n              backgroundColor: color,\n              animation: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,\n              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nPulseDots.displayName = 'PulseDots';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","useLoaderVisibility","jsx","cn","normalizeSize"],"mappings":";;;;;;;AAeO,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxCF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,OAAO;AAAA,cAC5B,QAAQA,OAAAA,cAAc,OAAO;AAAA,cAC7B,iBAAiB;AAAA,cACjB,WAAW,gBAAgB,iBAAiB;AAAA,cAC5C,gBAAgB,UAAU,IAAI,WAAW,QAAQ,KAAK,IAAI,MAAM,GAAG,QAAQ,IAAI;AAAA,YAAA;AAAA,UACjF;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;;"}

package/dist/index25.js

@@ -1,14 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize, getAnimationDuration } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
+import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const PulseDots = forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     dotCount = 3,
     dotSize = 10,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "pulse-dots",
@@ -16,8 +22,15 @@ const PulseDots = forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
-    const animationDuration = getAnimationDuration(speed);
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -26,7 +39,9 @@ const PulseDots = forwardRef(
         className: cn("inline-flex items-center justify-center gap-2", className),
         style: {
           height: normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -40,8 +55,8 @@ const PulseDots = forwardRef(
               width: normalizeSize(dotSize),
               height: normalizeSize(dotSize),
               backgroundColor: color,
-              animation: `pulse-bounce ${animationDuration} ease-in-out infinite`,
-              animationDelay: `${index * 0.15}s`
+              animation: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`
             }
           },
           index

package/dist/index25.js.map

@@ -1 +1 @@
-{"version":3,"file":"index25.js","sources":["../src/components/pulse/PulseDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseDotsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * PulseDots - Bouncing dots loader\n *\n * A loader with bouncing dots that scale and fade in a sequence.\n *\n * @example\n * ```tsx\n * <PulseDots size={40} color=\"#3b82f6\" />\n * <PulseDots size={32} dotCount={5} speed=\"fast\" />\n * ```\n */\nexport const PulseDots = forwardRef<HTMLDivElement, PulseDotsProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      dotCount = 3,\n      dotSize = 10,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'pulse-dots',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-2', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: dotCount }).map((_, index) => (\n          <div\n            key={index}\n            className=\"rounded-full\"\n            style={{\n              width: normalizeSize(dotSize),\n              height: normalizeSize(dotSize),\n              backgroundColor: color,\n              animation: `pulse-bounce ${animationDuration} ease-in-out infinite`,\n              animationDelay: `${index * 0.15}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nPulseDots.displayName = 'PulseDots';\n"],"names":[],"mappings":";;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,OAAO;AAAA,cAC5B,QAAQ,cAAc,OAAO;AAAA,cAC7B,iBAAiB;AAAA,cACjB,WAAW,gBAAgB,iBAAiB;AAAA,cAC5C,gBAAgB,GAAG,QAAQ,IAAI;AAAA,YAAA;AAAA,UACjC;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}
+{"version":3,"file":"index25.js","sources":["../src/components/pulse/PulseDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseDotsProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * PulseDots - Bouncing dots loader\n *\n * A loader with bouncing dots that scale and fade in a sequence.\n *\n * @example\n * ```tsx\n * <PulseDots size=\"lg\" color=\"#3b82f6\" />\n * <PulseDots size=\"sm\" dotCount={5} speed=\"fast\" reverse />\n * ```\n */\nexport const PulseDots = forwardRef<HTMLDivElement, PulseDotsProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      dotCount = 3,\n      dotSize = 10,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'pulse-dots',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-2', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: dotCount }).map((_, index) => (\n          <div\n            key={index}\n            className=\"rounded-full\"\n            style={{\n              width: normalizeSize(dotSize),\n              height: normalizeSize(dotSize),\n              backgroundColor: color,\n              animation: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,\n              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nPulseDots.displayName = 'PulseDots';\n"],"names":[],"mappings":";;;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,OAAO;AAAA,cAC5B,QAAQ,cAAc,OAAO;AAAA,cAC7B,iBAAiB;AAAA,cACjB,WAAW,gBAAgB,iBAAiB;AAAA,cAC5C,gBAAgB,UAAU,IAAI,WAAW,QAAQ,KAAK,IAAI,MAAM,GAAG,QAAQ,IAAI;AAAA,YAAA;AAAA,UACjF;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}

package/dist/index26.cjs

@@ -2,14 +2,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const hooks = require("./index31.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const PulseWave = react.forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     barCount = 5,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "pulse-wave",
@@ -17,10 +23,17 @@ const PulseWave = 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.parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2.5));
-    const animationDuration = colors.getAnimationDuration(speed);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -29,14 +42,16 @@ const PulseWave = react.forwardRef(
         className: classNames.cn("inline-flex items-end justify-center gap-1", className),
         style: {
           height: colors.normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
         children: Array.from({ length: barCount }).map((_, index) => {
-          const delay = index / barCount * 0.5;
+          const delay2 = reverse ? (barCount - index - 1) / barCount * 0.5 : index / barCount * 0.5;
           return /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -45,8 +60,8 @@ const PulseWave = react.forwardRef(
                 width: `${barWidth}px`,
                 height: "100%",
                 backgroundColor: color,
-                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
-                animationDelay: `${delay}s`,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+                animationDelay: `${delay2}s`,
                 transformOrigin: "bottom"
               }
             },

package/dist/index26.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index26.cjs","sources":["../src/components/pulse/PulseWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseWaveProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration, parseSizeToNumber } from '../../utils';\n\n/**\n * PulseWave - Wave pattern loader\n *\n * A loader with bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <PulseWave size={40} color=\"#3b82f6\" />\n * <PulseWave size={32} barCount={7} speed=\"slow\" />\n * ```\n */\nexport const PulseWave = forwardRef<HTMLDivElement, PulseWaveProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      barCount = 5,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'pulse-wave',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const barWidth = Math.floor(sizeValue / (barCount * 2.5));\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-end justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => {\n          const delay = (index / barCount) * 0.5;\n\n          return (\n            <div\n              key={index}\n              className=\"rounded-sm\"\n              style={{\n                width: `${barWidth}px`,\n                height: '100%',\n                backgroundColor: color,\n                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n                animationDelay: `${delay}s`,\n                transformOrigin: 'bottom',\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nPulseWave.displayName = 'PulseWave';\n"],"names":["forwardRef","parseSizeToNumber","getAnimationDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;AAeO,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAYC,OAAAA,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,IAAI;AACxD,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,8CAA8C,SAAS;AAAA,QACrE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,gBAAM,QAAS,QAAQ,WAAY;AAEnC,iBACEF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAG,KAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YATK;AAAA,UAAA;AAAA,QAYX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;;"}
+{"version":3,"file":"index26.cjs","sources":["../src/components/pulse/PulseWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseWaveProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * PulseWave - Wave pattern loader\n *\n * A loader with bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <PulseWave size=\"lg\" color=\"#3b82f6\" />\n * <PulseWave size=\"sm\" barCount={7} speed=\"slow\" reverse />\n * ```\n */\nexport const PulseWave = forwardRef<HTMLDivElement, PulseWaveProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      barCount = 5,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'pulse-wave',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const barWidth = Math.floor(sizeValue / (barCount * 2.5));\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-end justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => {\n          const delay = reverse ? ((barCount - index - 1) / barCount) * 0.5 : (index / barCount) * 0.5;\n\n          return (\n            <div\n              key={index}\n              className=\"rounded-sm\"\n              style={{\n                width: `${barWidth}px`,\n                height: '100%',\n                backgroundColor: color,\n                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,\n                animationDelay: `${delay}s`,\n                transformOrigin: 'bottom',\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nPulseWave.displayName = 'PulseWave';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","useLoaderVisibility","parseSizeToNumber","jsx","cn","normalizeSize","delay"],"mappings":";;;;;;;AAeO,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAYC,OAAAA,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,IAAI;AAExD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,8CAA8C,SAAS;AAAA,QACrE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,gBAAMC,SAAQ,WAAY,WAAW,QAAQ,KAAK,WAAY,MAAO,QAAQ,WAAY;AAEzF,iBACEH,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAGG,MAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YATK;AAAA,UAAA;AAAA,QAYX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;;"}

package/dist/index26.js

@@ -1,13 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize, getAnimationDuration, parseSizeToNumber } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
+import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const PulseWave = forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     barCount = 5,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "pulse-wave",
@@ -15,10 +21,17 @@ const PulseWave = 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 = parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2.5));
-    const animationDuration = getAnimationDuration(speed);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -27,14 +40,16 @@ const PulseWave = forwardRef(
         className: cn("inline-flex items-end justify-center gap-1", className),
         style: {
           height: normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
         children: Array.from({ length: barCount }).map((_, index) => {
-          const delay = index / barCount * 0.5;
+          const delay2 = reverse ? (barCount - index - 1) / barCount * 0.5 : index / barCount * 0.5;
           return /* @__PURE__ */ jsx(
             "div",
             {
@@ -43,8 +58,8 @@ const PulseWave = forwardRef(
                 width: `${barWidth}px`,
                 height: "100%",
                 backgroundColor: color,
-                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
-                animationDelay: `${delay}s`,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+                animationDelay: `${delay2}s`,
                 transformOrigin: "bottom"
               }
             },

package/dist/index26.js.map

@@ -1 +1 @@
-{"version":3,"file":"index26.js","sources":["../src/components/pulse/PulseWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseWaveProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration, parseSizeToNumber } from '../../utils';\n\n/**\n * PulseWave - Wave pattern loader\n *\n * A loader with bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <PulseWave size={40} color=\"#3b82f6\" />\n * <PulseWave size={32} barCount={7} speed=\"slow\" />\n * ```\n */\nexport const PulseWave = forwardRef<HTMLDivElement, PulseWaveProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      barCount = 5,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'pulse-wave',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const barWidth = Math.floor(sizeValue / (barCount * 2.5));\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-end justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => {\n          const delay = (index / barCount) * 0.5;\n\n          return (\n            <div\n              key={index}\n              className=\"rounded-sm\"\n              style={{\n                width: `${barWidth}px`,\n                height: '100%',\n                backgroundColor: color,\n                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n                animationDelay: `${delay}s`,\n                transformOrigin: 'bottom',\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nPulseWave.displayName = 'PulseWave';\n"],"names":[],"mappings":";;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,IAAI;AACxD,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,8CAA8C,SAAS;AAAA,QACrE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,gBAAM,QAAS,QAAQ,WAAY;AAEnC,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAG,KAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YATK;AAAA,UAAA;AAAA,QAYX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}
+{"version":3,"file":"index26.js","sources":["../src/components/pulse/PulseWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseWaveProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * PulseWave - Wave pattern loader\n *\n * A loader with bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <PulseWave size=\"lg\" color=\"#3b82f6\" />\n * <PulseWave size=\"sm\" barCount={7} speed=\"slow\" reverse />\n * ```\n */\nexport const PulseWave = forwardRef<HTMLDivElement, PulseWaveProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      barCount = 5,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'pulse-wave',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const barWidth = Math.floor(sizeValue / (barCount * 2.5));\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-end justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => {\n          const delay = reverse ? ((barCount - index - 1) / barCount) * 0.5 : (index / barCount) * 0.5;\n\n          return (\n            <div\n              key={index}\n              className=\"rounded-sm\"\n              style={{\n                width: `${barWidth}px`,\n                height: '100%',\n                backgroundColor: color,\n                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,\n                animationDelay: `${delay}s`,\n                transformOrigin: 'bottom',\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nPulseWave.displayName = 'PulseWave';\n"],"names":["delay"],"mappings":";;;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAY,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,IAAI;AAExD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,8CAA8C,SAAS;AAAA,QACrE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,gBAAMA,SAAQ,WAAY,WAAW,QAAQ,KAAK,WAAY,MAAO,QAAQ,WAAY;AAEzF,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAGA,MAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YATK;AAAA,UAAA;AAAA,QAYX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}

package/dist/index27.cjs

@@ -2,14 +2,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const hooks = require("./index31.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const PulseBars = react.forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     barCount = 4,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "pulse-bars",
@@ -17,10 +23,17 @@ const PulseBars = 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.parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2));
-    const animationDuration = colors.getAnimationDuration(speed);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -29,7 +42,9 @@ const PulseBars = react.forwardRef(
         className: classNames.cn("inline-flex items-center justify-center gap-1", className),
         style: {
           height: colors.normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -37,7 +52,8 @@ const PulseBars = react.forwardRef(
         ...rest,
         children: Array.from({ length: barCount }).map((_, index) => {
           const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];
-          const delay = delays[index % delays.length];
+          const reversedDelays = [...delays].reverse();
+          const delay2 = reverse ? reversedDelays[index % reversedDelays.length] : delays[index % delays.length];
           return /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -47,8 +63,8 @@ const PulseBars = react.forwardRef(
                 minHeight: "30%",
                 height: "100%",
                 backgroundColor: color,
-                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
-                animationDelay: `${delay}s`,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+                animationDelay: `${delay2}s`,
                 transformOrigin: "center"
               }
             },

package/dist/index27.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index27.cjs","sources":["../src/components/pulse/PulseBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseBarsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration, parseSizeToNumber } from '../../utils';\n\n/**\n * PulseBars - Equalizer-style bars loader\n *\n * A loader with bars that pulse like an audio equalizer.\n *\n * @example\n * ```tsx\n * <PulseBars size={40} color=\"#3b82f6\" />\n * <PulseBars size={48} barCount={6} speed=\"fast\" />\n * ```\n */\nexport const PulseBars = forwardRef<HTMLDivElement, PulseBarsProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      barCount = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'pulse-bars',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const barWidth = Math.floor(sizeValue / (barCount * 2));\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => {\n          // Random-looking delays for equalizer effect\n          const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];\n          const delay = delays[index % delays.length];\n\n          return (\n            <div\n              key={index}\n              className=\"rounded-sm\"\n              style={{\n                width: `${barWidth}px`,\n                minHeight: '30%',\n                height: '100%',\n                backgroundColor: color,\n                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n                animationDelay: `${delay}s`,\n                transformOrigin: 'center',\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nPulseBars.displayName = 'PulseBars';\n"],"names":["forwardRef","parseSizeToNumber","getAnimationDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;AAeO,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAYC,OAAAA,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,EAAE;AACtD,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAElD,gBAAM,SAAS,CAAC,GAAG,KAAK,KAAK,KAAK,KAAK,GAAG;AAC1C,gBAAM,QAAQ,OAAO,QAAQ,OAAO,MAAM;AAE1C,iBACEF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,WAAW;AAAA,gBACX,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAG,KAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YAVK;AAAA,UAAA;AAAA,QAaX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;;"}
+{"version":3,"file":"index27.cjs","sources":["../src/components/pulse/PulseBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseBarsProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * PulseBars - Equalizer-style bars loader\n *\n * A loader with bars that pulse like an audio equalizer.\n *\n * @example\n * ```tsx\n * <PulseBars size=\"lg\" color=\"#3b82f6\" />\n * <PulseBars size=\"md\" barCount={6} speed=\"fast\" reverse />\n * ```\n */\nexport const PulseBars = forwardRef<HTMLDivElement, PulseBarsProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      barCount = 4,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'pulse-bars',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const barWidth = Math.floor(sizeValue / (barCount * 2));\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => {\n          // Random-looking delays for equalizer effect\n          const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];\n          const reversedDelays = [...delays].reverse();\n          const delay = reverse ? reversedDelays[index % reversedDelays.length] : delays[index % delays.length];\n\n          return (\n            <div\n              key={index}\n              className=\"rounded-sm\"\n              style={{\n                width: `${barWidth}px`,\n                minHeight: '30%',\n                height: '100%',\n                backgroundColor: color,\n                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,\n                animationDelay: `${delay}s`,\n                transformOrigin: 'center',\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nPulseBars.displayName = 'PulseBars';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","useLoaderVisibility","parseSizeToNumber","jsx","cn","normalizeSize","delay"],"mappings":";;;;;;;AAeO,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAYC,OAAAA,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,EAAE;AAEtD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAElD,gBAAM,SAAS,CAAC,GAAG,KAAK,KAAK,KAAK,KAAK,GAAG;AAC1C,gBAAM,iBAAiB,CAAC,GAAG,MAAM,EAAE,QAAA;AACnC,gBAAMC,SAAQ,UAAU,eAAe,QAAQ,eAAe,MAAM,IAAI,OAAO,QAAQ,OAAO,MAAM;AAEpG,iBACEH,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,WAAW;AAAA,gBACX,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAGG,MAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YAVK;AAAA,UAAA;AAAA,QAaX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;;"}

package/dist/index27.js

@@ -1,13 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize, getAnimationDuration, parseSizeToNumber } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
+import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const PulseBars = forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     barCount = 4,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "pulse-bars",
@@ -15,10 +21,17 @@ const PulseBars = 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 = parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2));
-    const animationDuration = getAnimationDuration(speed);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -27,7 +40,9 @@ const PulseBars = forwardRef(
         className: cn("inline-flex items-center justify-center gap-1", className),
         style: {
           height: normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -35,7 +50,8 @@ const PulseBars = forwardRef(
         ...rest,
         children: Array.from({ length: barCount }).map((_, index) => {
           const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];
-          const delay = delays[index % delays.length];
+          const reversedDelays = [...delays].reverse();
+          const delay2 = reverse ? reversedDelays[index % reversedDelays.length] : delays[index % delays.length];
           return /* @__PURE__ */ jsx(
             "div",
             {
@@ -45,8 +61,8 @@ const PulseBars = forwardRef(
                 minHeight: "30%",
                 height: "100%",
                 backgroundColor: color,
-                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
-                animationDelay: `${delay}s`,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+                animationDelay: `${delay2}s`,
                 transformOrigin: "center"
               }
             },

package/dist/index27.js.map

@@ -1 +1 @@
-{"version":3,"file":"index27.js","sources":["../src/components/pulse/PulseBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseBarsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration, parseSizeToNumber } from '../../utils';\n\n/**\n * PulseBars - Equalizer-style bars loader\n *\n * A loader with bars that pulse like an audio equalizer.\n *\n * @example\n * ```tsx\n * <PulseBars size={40} color=\"#3b82f6\" />\n * <PulseBars size={48} barCount={6} speed=\"fast\" />\n * ```\n */\nexport const PulseBars = forwardRef<HTMLDivElement, PulseBarsProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      barCount = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'pulse-bars',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const barWidth = Math.floor(sizeValue / (barCount * 2));\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => {\n          // Random-looking delays for equalizer effect\n          const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];\n          const delay = delays[index % delays.length];\n\n          return (\n            <div\n              key={index}\n              className=\"rounded-sm\"\n              style={{\n                width: `${barWidth}px`,\n                minHeight: '30%',\n                height: '100%',\n                backgroundColor: color,\n                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n                animationDelay: `${delay}s`,\n                transformOrigin: 'center',\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nPulseBars.displayName = 'PulseBars';\n"],"names":[],"mappings":";;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,EAAE;AACtD,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAElD,gBAAM,SAAS,CAAC,GAAG,KAAK,KAAK,KAAK,KAAK,GAAG;AAC1C,gBAAM,QAAQ,OAAO,QAAQ,OAAO,MAAM;AAE1C,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,WAAW;AAAA,gBACX,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAG,KAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YAVK;AAAA,UAAA;AAAA,QAaX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}
+{"version":3,"file":"index27.js","sources":["../src/components/pulse/PulseBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseBarsProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * PulseBars - Equalizer-style bars loader\n *\n * A loader with bars that pulse like an audio equalizer.\n *\n * @example\n * ```tsx\n * <PulseBars size=\"lg\" color=\"#3b82f6\" />\n * <PulseBars size=\"md\" barCount={6} speed=\"fast\" reverse />\n * ```\n */\nexport const PulseBars = forwardRef<HTMLDivElement, PulseBarsProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      barCount = 4,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'pulse-bars',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const barWidth = Math.floor(sizeValue / (barCount * 2));\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => {\n          // Random-looking delays for equalizer effect\n          const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];\n          const reversedDelays = [...delays].reverse();\n          const delay = reverse ? reversedDelays[index % reversedDelays.length] : delays[index % delays.length];\n\n          return (\n            <div\n              key={index}\n              className=\"rounded-sm\"\n              style={{\n                width: `${barWidth}px`,\n                minHeight: '30%',\n                height: '100%',\n                backgroundColor: color,\n                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,\n                animationDelay: `${delay}s`,\n                transformOrigin: 'center',\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nPulseBars.displayName = 'PulseBars';\n"],"names":["delay"],"mappings":";;;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAY,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAElD,gBAAM,SAAS,CAAC,GAAG,KAAK,KAAK,KAAK,KAAK,GAAG;AAC1C,gBAAM,iBAAiB,CAAC,GAAG,MAAM,EAAE,QAAA;AACnC,gBAAMA,SAAQ,UAAU,eAAe,QAAQ,eAAe,MAAM,IAAI,OAAO,QAAQ,OAAO,MAAM;AAEpG,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,QAAQ;AAAA,gBAClB,WAAW;AAAA,gBACX,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,WAAW,cAAc,iBAAiB;AAAA,gBAC1C,gBAAgB,GAAGA,MAAK;AAAA,gBACxB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,YAVK;AAAA,UAAA;AAAA,QAaX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}

package/dist/index28.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("./index31.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const TypingIndicator = react.forwardRef(
@@ -13,6 +14,11 @@ const TypingIndicator = react.forwardRef(
     gap = 4,
     variant = "bounce",
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "typing-indicator",
@@ -20,8 +26,15 @@ const TypingIndicator = react.forwardRef(
     ariaLabel = "Typing...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
-    const animationDuration = colors.getAnimationDuration(speed);
+    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);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -32,7 +45,9 @@ const TypingIndicator = react.forwardRef(
         style: {
           gap: gapValue,
           height: size ? colors.normalizeSize(size) : "auto",
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -46,8 +61,8 @@ const TypingIndicator = react.forwardRef(
               width: colors.normalizeSize(dotSize),
               height: colors.normalizeSize(dotSize),
               backgroundColor: color,
-              animation: `typing-${variant} ${animationDuration} ease-in-out infinite`,
-              animationDelay: `${index * 0.2}s`
+              animation: `typing-${variant} ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(dotCount - index - 1) * 0.2}s` : `${index * 0.2}s`
             }
           },
           index

package/dist/index28.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index28.cjs","sources":["../src/components/pulse/TypingIndicator.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { TypingIndicatorProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * TypingIndicator - Chat typing indicator\n *\n * A loader for messaging/chat applications showing typing activity.\n *\n * @example\n * ```tsx\n * <TypingIndicator />\n * <TypingIndicator variant=\"fade\" />\n * <TypingIndicator dotCount={5} color=\"#3b82f6\" />\n * <TypingIndicator dotSize={10} gap={6} />\n * ```\n */\nexport const TypingIndicator = forwardRef<HTMLDivElement, TypingIndicatorProps>(\n  (\n    {\n      size,\n      color = '#3b82f6',\n      dotCount = 3,\n      dotSize = 8,\n      gap = 4,\n      variant = 'bounce',\n      speed = 'normal',\n      className,\n      style,\n      testId = 'typing-indicator',\n      visible = true,\n      ariaLabel = 'Typing...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const animationDuration = getAnimationDuration(speed);\n    const gapValue = normalizeSize(gap);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center', className)}\n        style={{\n          gap: gapValue,\n          height: size ? normalizeSize(size) : 'auto',\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: dotCount }).map((_, index) => (\n          <div\n            key={index}\n            className=\"rounded-full\"\n            style={{\n              width: normalizeSize(dotSize),\n              height: normalizeSize(dotSize),\n              backgroundColor: color,\n              animation: `typing-${variant} ${animationDuration} ease-in-out infinite`,\n              animationDelay: `${index * 0.2}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nTypingIndicator.displayName = 'TypingIndicator';\n"],"names":["forwardRef","getAnimationDuration","normalizeSize","jsx","cn"],"mappings":";;;;;;AAiBO,MAAM,kBAAkBA,MAAAA;AAAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AACpD,UAAM,WAAWC,OAAAA,cAAc,GAAG;AAElC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,4BAA4B,SAAS;AAAA,QACnD,OAAO;AAAA,UACL,KAAK;AAAA,UACL,QAAQ,OAAOF,qBAAc,IAAI,IAAI;AAAA,UACrC,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOD,OAAAA,cAAc,OAAO;AAAA,cAC5B,QAAQA,OAAAA,cAAc,OAAO;AAAA,cAC7B,iBAAiB;AAAA,cACjB,WAAW,UAAU,OAAO,IAAI,iBAAiB;AAAA,cACjD,gBAAgB,GAAG,QAAQ,GAAG;AAAA,YAAA;AAAA,UAChC;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,gBAAgB,cAAc;;"}
+{"version":3,"file":"index28.cjs","sources":["../src/components/pulse/TypingIndicator.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { TypingIndicatorProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * TypingIndicator - Chat typing indicator\n *\n * A loader for messaging/chat applications showing typing activity.\n *\n * @example\n * ```tsx\n * <TypingIndicator />\n * <TypingIndicator variant=\"fade\" />\n * <TypingIndicator dotCount={5} color=\"#3b82f6\" />\n * <TypingIndicator dotSize={10} gap={6} />\n * ```\n */\nexport const TypingIndicator = forwardRef<HTMLDivElement, TypingIndicatorProps>(\n  (\n    {\n      size,\n      color = '#3b82f6',\n      dotCount = 3,\n      dotSize = 8,\n      gap = 4,\n      variant = 'bounce',\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'typing-indicator',\n      visible = true,\n      ariaLabel = 'Typing...',\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n    const gapValue = normalizeSize(gap);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center', className)}\n        style={{\n          gap: gapValue,\n          height: size ? normalizeSize(size) : 'auto',\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: dotCount }).map((_, index) => (\n          <div\n            key={index}\n            className=\"rounded-full\"\n            style={{\n              width: normalizeSize(dotSize),\n              height: normalizeSize(dotSize),\n              backgroundColor: color,\n              animation: `typing-${variant} ${effectiveDuration} ease-in-out infinite`,\n              animationDelay: reverse ? `${(dotCount - index - 1) * 0.2}s` : `${index * 0.2}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nTypingIndicator.displayName = 'TypingIndicator';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","useLoaderVisibility","normalizeSize","jsx","cn"],"mappings":";;;;;;;AAiBO,MAAM,kBAAkBA,MAAAA;AAAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAC1B,UAAM,WAAWC,OAAAA,cAAc,GAAG;AAElC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,4BAA4B,SAAS;AAAA,QACnD,OAAO;AAAA,UACL,KAAK;AAAA,UACL,QAAQ,OAAOF,qBAAc,IAAI,IAAI;AAAA,UACrC,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOD,OAAAA,cAAc,OAAO;AAAA,cAC5B,QAAQA,OAAAA,cAAc,OAAO;AAAA,cAC7B,iBAAiB;AAAA,cACjB,WAAW,UAAU,OAAO,IAAI,iBAAiB;AAAA,cACjD,gBAAgB,UAAU,IAAI,WAAW,QAAQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG;AAAA,YAAA;AAAA,UAC/E;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,gBAAgB,cAAc;;"}