premium-react-loaders 1.1.0 → 1.2.0

package/dist/index25.js

@@ -1,14 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize, getAnimationDuration } from "./index4.js";
+import { useReducedMotion, 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,
     className,
     style,
     testId = "pulse-dots",
@@ -17,7 +20,8 @@ const PulseDots = forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const animationDuration = getAnimationDuration(speed);
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -40,8 +44,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 } 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      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 prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\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 ${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;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,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,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,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,17 @@
 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,
     className,
     style,
     testId = "pulse-wave",
@@ -18,9 +21,10 @@ const PulseWave = react.forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const sizeValue = colors.parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2.5));
-    const animationDuration = colors.getAnimationDuration(speed);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -36,7 +40,7 @@ const PulseWave = react.forwardRef(
         "aria-busy": "true",
         ...rest,
         children: Array.from({ length: barCount }).map((_, index) => {
-          const delay = index / barCount * 0.5;
+          const delay = reverse ? (barCount - index - 1) / barCount * 0.5 : index / barCount * 0.5;
           return /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -45,7 +49,7 @@ const PulseWave = react.forwardRef(
                 width: `${barWidth}px`,
                 height: "100%",
                 backgroundColor: color,
-                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
                 animationDelay: `${delay}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 } 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      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 prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\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        }}\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","parseSizeToNumber","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,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;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,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,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,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,QAAQ,WAAY,WAAW,QAAQ,KAAK,WAAY,MAAO,QAAQ,WAAY;AAEzF,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;;"}

package/dist/index26.js

@@ -1,13 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize, getAnimationDuration, parseSizeToNumber } from "./index4.js";
+import { useReducedMotion, 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,
     className,
     style,
     testId = "pulse-wave",
@@ -16,9 +19,10 @@ const PulseWave = forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const sizeValue = parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2.5));
-    const animationDuration = getAnimationDuration(speed);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -34,7 +38,7 @@ const PulseWave = forwardRef(
         "aria-busy": "true",
         ...rest,
         children: Array.from({ length: barCount }).map((_, index) => {
-          const delay = index / barCount * 0.5;
+          const delay = reverse ? (barCount - index - 1) / barCount * 0.5 : index / barCount * 0.5;
           return /* @__PURE__ */ jsx(
             "div",
             {
@@ -43,7 +47,7 @@ const PulseWave = forwardRef(
                 width: `${barWidth}px`,
                 height: "100%",
                 backgroundColor: color,
-                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
                 animationDelay: `${delay}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 } 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      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 prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\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        }}\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":[],"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;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,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,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,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,QAAQ,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,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;"}

package/dist/index27.cjs

@@ -2,14 +2,17 @@
 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,
     className,
     style,
     testId = "pulse-bars",
@@ -18,9 +21,10 @@ const PulseBars = react.forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const sizeValue = colors.parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2));
-    const animationDuration = colors.getAnimationDuration(speed);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -37,7 +41,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 delay = reverse ? reversedDelays[index % reversedDelays.length] : delays[index % delays.length];
           return /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -47,7 +52,7 @@ const PulseBars = react.forwardRef(
                 minHeight: "30%",
                 height: "100%",
                 backgroundColor: color,
-                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
                 animationDelay: `${delay}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 } 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      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 prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\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        }}\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","parseSizeToNumber","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,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;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,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,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,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,iBAAiB,CAAC,GAAG,MAAM,EAAE,QAAA;AACnC,gBAAM,QAAQ,UAAU,eAAe,QAAQ,eAAe,MAAM,IAAI,OAAO,QAAQ,OAAO,MAAM;AAEpG,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;;"}

package/dist/index27.js

@@ -1,13 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize, getAnimationDuration, parseSizeToNumber } from "./index4.js";
+import { useReducedMotion, 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,
     className,
     style,
     testId = "pulse-bars",
@@ -16,9 +19,10 @@ const PulseBars = forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const sizeValue = parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2));
-    const animationDuration = getAnimationDuration(speed);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -35,7 +39,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 delay = reverse ? reversedDelays[index % reversedDelays.length] : delays[index % delays.length];
           return /* @__PURE__ */ jsx(
             "div",
             {
@@ -45,7 +50,7 @@ const PulseBars = forwardRef(
                 minHeight: "30%",
                 height: "100%",
                 backgroundColor: color,
-                animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
                 animationDelay: `${delay}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 } 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      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 prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\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        }}\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":[],"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;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,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,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,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,iBAAiB,CAAC,GAAG,MAAM,EAAE,QAAA;AACnC,gBAAM,QAAQ,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,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;"}

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,8 @@ const TypingIndicator = react.forwardRef(
     gap = 4,
     variant = "bounce",
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     className,
     style,
     testId = "typing-indicator",
@@ -21,7 +24,8 @@ const TypingIndicator = react.forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const animationDuration = colors.getAnimationDuration(speed);
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const gapValue = colors.normalizeSize(gap);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -46,8 +50,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 } 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      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 prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\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} ${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","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;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,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,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,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;;"}

package/dist/index28.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize, getAnimationDuration } from "./index4.js";
+import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const TypingIndicator = forwardRef(
   ({
@@ -11,6 +12,8 @@ const TypingIndicator = forwardRef(
     gap = 4,
     variant = "bounce",
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     className,
     style,
     testId = "typing-indicator",
@@ -19,7 +22,8 @@ const TypingIndicator = forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const animationDuration = getAnimationDuration(speed);
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const gapValue = normalizeSize(gap);
     return /* @__PURE__ */ jsx(
       "div",
@@ -44,8 +48,8 @@ const TypingIndicator = forwardRef(
               width: normalizeSize(dotSize),
               height: 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.js.map

@@ -1 +1 @@
-{"version":3,"file":"index28.js","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":[],"mappings":";;;;AAiBO,MAAM,kBAAkB;AAAA,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,oBAAoB,qBAAqB,KAAK;AACpD,UAAM,WAAW,cAAc,GAAG;AAElC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,4BAA4B,SAAS;AAAA,QACnD,OAAO;AAAA,UACL,KAAK;AAAA,UACL,QAAQ,OAAO,cAAc,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,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,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.js","sources":["../src/components/pulse/TypingIndicator.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { TypingIndicatorProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration } 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      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 prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\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} ${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":[],"mappings":";;;;;AAiBO,MAAM,kBAAkB;AAAA,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;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,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,WAAW,cAAc,GAAG;AAElC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,4BAA4B,SAAS;AAAA,QACnD,OAAO;AAAA,UACL,KAAK;AAAA,UACL,QAAQ,OAAO,cAAc,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,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,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;"}

package/dist/index31.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function useReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
+  react.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    } else {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, []);
+  return prefersReducedMotion;
+}
+function getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion) {
+  if (respectMotionPreference && prefersReducedMotion) {
+    return "0.01ms";
+  }
+  if (typeof speed === "number") {
+    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(1e4, speed)) : 1e3;
+    return `${validSpeed}ms`;
+  }
+  const speedMap = {
+    slow: "2s",
+    normal: "1s",
+    fast: "0.5s"
+  };
+  return speedMap[speed] || speedMap.normal;
+}
+exports.getEffectiveDuration = getEffectiveDuration;
+exports.useReducedMotion = useReducedMotion;
+//# sourceMappingURL=index31.cjs.map

package/dist/index31.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index31.cjs","sources":["../src/utils/hooks.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Hook to detect user's reduced motion preference\n * Returns true if user prefers reduced motion\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    // Check if matchMedia is available (SSR safety)\n    if (typeof window === 'undefined' || !window.matchMedia) {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n    // Set initial value\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    // Listen for changes\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    // Use addEventListener if available (modern browsers)\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handleChange);\n      return () => mediaQuery.removeEventListener('change', handleChange);\n    } else {\n      // Fallback for older browsers\n      mediaQuery.addListener(handleChange);\n      return () => mediaQuery.removeListener(handleChange);\n    }\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * Get effective animation duration based on speed and reduced motion preference\n */\nexport function getEffectiveDuration(\n  speed: 'slow' | 'normal' | 'fast' | number,\n  respectMotionPreference: boolean,\n  prefersReducedMotion: boolean\n): string {\n  // If user prefers reduced motion and we should respect it, use a very short duration\n  if (respectMotionPreference && prefersReducedMotion) {\n    return '0.01ms';\n  }\n\n  if (typeof speed === 'number') {\n    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(10000, speed)) : 1000;\n    return `${validSpeed}ms`;\n  }\n\n  const speedMap = {\n    slow: '2s',\n    normal: '1s',\n    fast: '0.5s',\n  };\n\n  return speedMap[speed] || speedMap.normal;\n}\n"],"names":["useState","useEffect"],"mappings":";;;AAMO,SAAS,mBAA4B;AAC1C,QAAM,CAAC,sBAAsB,uBAAuB,IAAIA,MAAAA,SAAS,KAAK;AAEtEC,QAAAA,UAAU,MAAM;AAEd,QAAI,OAAO,WAAW,eAAe,CAAC,OAAO,YAAY;AACvD;AAAA,IACF;AAEA,UAAM,aAAa,OAAO,WAAW,kCAAkC;AAGvE,4BAAwB,WAAW,OAAO;AAG1C,UAAM,eAAe,CAAC,UAA+B;AACnD,8BAAwB,MAAM,OAAO;AAAA,IACvC;AAGA,QAAI,WAAW,kBAAkB;AAC/B,iBAAW,iBAAiB,UAAU,YAAY;AAClD,aAAO,MAAM,WAAW,oBAAoB,UAAU,YAAY;AAAA,IACpE,OAAO;AAEL,iBAAW,YAAY,YAAY;AACnC,aAAO,MAAM,WAAW,eAAe,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;AAKO,SAAS,qBACd,OACA,yBACA,sBACQ;AAER,MAAI,2BAA2B,sBAAsB;AACnD,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,aAAa,CAAC,MAAM,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,KAAO,KAAK,CAAC,IAAI;AACvF,WAAO,GAAG,UAAU;AAAA,EACtB;AAEA,QAAM,WAAW;AAAA,IACf,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAGR,SAAO,SAAS,KAAK,KAAK,SAAS;AACrC;;;"}

package/dist/index31.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+function useReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    } else {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, []);
+  return prefersReducedMotion;
+}
+function getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion) {
+  if (respectMotionPreference && prefersReducedMotion) {
+    return "0.01ms";
+  }
+  if (typeof speed === "number") {
+    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(1e4, speed)) : 1e3;
+    return `${validSpeed}ms`;
+  }
+  const speedMap = {
+    slow: "2s",
+    normal: "1s",
+    fast: "0.5s"
+  };
+  return speedMap[speed] || speedMap.normal;
+}
+export {
+  getEffectiveDuration,
+  useReducedMotion
+};
+//# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index31.js","sources":["../src/utils/hooks.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Hook to detect user's reduced motion preference\n * Returns true if user prefers reduced motion\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    // Check if matchMedia is available (SSR safety)\n    if (typeof window === 'undefined' || !window.matchMedia) {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n    // Set initial value\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    // Listen for changes\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    // Use addEventListener if available (modern browsers)\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handleChange);\n      return () => mediaQuery.removeEventListener('change', handleChange);\n    } else {\n      // Fallback for older browsers\n      mediaQuery.addListener(handleChange);\n      return () => mediaQuery.removeListener(handleChange);\n    }\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * Get effective animation duration based on speed and reduced motion preference\n */\nexport function getEffectiveDuration(\n  speed: 'slow' | 'normal' | 'fast' | number,\n  respectMotionPreference: boolean,\n  prefersReducedMotion: boolean\n): string {\n  // If user prefers reduced motion and we should respect it, use a very short duration\n  if (respectMotionPreference && prefersReducedMotion) {\n    return '0.01ms';\n  }\n\n  if (typeof speed === 'number') {\n    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(10000, speed)) : 1000;\n    return `${validSpeed}ms`;\n  }\n\n  const speedMap = {\n    slow: '2s',\n    normal: '1s',\n    fast: '0.5s',\n  };\n\n  return speedMap[speed] || speedMap.normal;\n}\n"],"names":[],"mappings":";AAMO,SAAS,mBAA4B;AAC1C,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,KAAK;AAEtE,YAAU,MAAM;AAEd,QAAI,OAAO,WAAW,eAAe,CAAC,OAAO,YAAY;AACvD;AAAA,IACF;AAEA,UAAM,aAAa,OAAO,WAAW,kCAAkC;AAGvE,4BAAwB,WAAW,OAAO;AAG1C,UAAM,eAAe,CAAC,UAA+B;AACnD,8BAAwB,MAAM,OAAO;AAAA,IACvC;AAGA,QAAI,WAAW,kBAAkB;AAC/B,iBAAW,iBAAiB,UAAU,YAAY;AAClD,aAAO,MAAM,WAAW,oBAAoB,UAAU,YAAY;AAAA,IACpE,OAAO;AAEL,iBAAW,YAAY,YAAY;AACnC,aAAO,MAAM,WAAW,eAAe,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;AAKO,SAAS,qBACd,OACA,yBACA,sBACQ;AAER,MAAI,2BAA2B,sBAAsB;AACnD,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,aAAa,CAAC,MAAM,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,KAAO,KAAK,CAAC,IAAI;AACvF,WAAO,GAAG,UAAU;AAAA,EACtB;AAEA,QAAM,WAAW;AAAA,IACf,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAGR,SAAO,SAAS,KAAK,KAAK,SAAS;AACrC;"}

package/dist/index4.cjs

@@ -27,6 +27,16 @@ function getAnimationDuration(speed = "normal") {
   return speedMap[speed] || speedMap.normal;
 }
 function normalizeSize(size) {
+  const sizePresetMap = {
+    xs: 16,
+    sm: 24,
+    md: 40,
+    lg: 56,
+    xl: 72
+  };
+  if (typeof size === "string" && size in sizePresetMap) {
+    return `${sizePresetMap[size]}px`;
+  }
   if (typeof size === "number") {
     return `${size}px`;
   }

package/dist/index4.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index4.cjs","sources":["../src/utils/colors.ts"],"sourcesContent":["/**\n * Check if a color is a valid hex color\n */\nexport function isHexColor(color: string): boolean {\n  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);\n}\n\n/**\n * Check if a color is a valid RGB/RGBA color\n */\nexport function isRgbColor(color: string): boolean {\n  return /^rgba?\\([\\d\\s,./]+\\)$/.test(color);\n}\n\n/**\n * Convert hex color to RGB\n */\nexport function hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n  return result\n    ? {\n        r: parseInt(result[1], 16),\n        g: parseInt(result[2], 16),\n        b: parseInt(result[3], 16),\n      }\n    : null;\n}\n\n/**\n * Get animation duration in CSS format\n */\nexport function getAnimationDuration(speed: 'slow' | 'normal' | 'fast' | number = 'normal'): string {\n  if (typeof speed === 'number') {\n    // Validate number is valid and positive, clamp to reasonable range (50ms - 10000ms)\n    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(10000, speed)) : 1000;\n    return `${validSpeed}ms`;\n  }\n\n  const speedMap = {\n    slow: '2s',\n    normal: '1s',\n    fast: '0.5s',\n  };\n\n  return speedMap[speed] || speedMap.normal;\n}\n\n/**\n * Normalize size value to CSS string\n */\nexport function normalizeSize(size?: number | string): string {\n  if (typeof size === 'number') {\n    return `${size}px`;\n  }\n  return size || 'auto';\n}\n\n/**\n * Safely parse size to number with fallback\n */\nexport function parseSizeToNumber(size: number | string | undefined, fallback: number): number {\n  if (typeof size === 'number') {\n    return !isNaN(size) && size > 0 ? size : fallback;\n  }\n\n  if (typeof size === 'string') {\n    const parsed = parseInt(size, 10);\n    return !isNaN(parsed) && parsed > 0 ? parsed : fallback;\n  }\n\n  return fallback;\n}\n\n/**\n * Calculate relative luminance of a color (0-1 scale)\n * Used for determining if text should be light or dark for contrast\n */\nexport function getColorLuminance(color: string): number {\n  // Try to parse hex color\n  if (isHexColor(color)) {\n    const rgb = hexToRgb(color);\n    if (rgb) {\n      // Convert RGB to relative luminance using WCAG formula\n      const { r, g, b } = rgb;\n      const [rs, gs, bs] = [r, g, b].map((c) => {\n        const val = c / 255;\n        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);\n      });\n      return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n    }\n  }\n\n  // Try to parse RGB/RGBA color\n  if (isRgbColor(color)) {\n    const match = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n    if (match) {\n      const [, r, g, b] = match.map(Number);\n      const [rs, gs, bs] = [r, g, b].map((c) => {\n        const val = c / 255;\n        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);\n      });\n      return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n    }\n  }\n\n  // Default to 0.5 (medium luminance) if unable to parse\n  return 0.5;\n}\n\n/**\n * Get contrast color (black or white) based on background luminance\n */\nexport function getContrastColor(backgroundColor: string): string {\n  const luminance = getColorLuminance(backgroundColor);\n  // WCAG standard: use white text on dark backgrounds (luminance < 0.5)\n  return luminance < 0.5 ? '#ffffff' : '#000000';\n}\n"],"names":[],"mappings":";;AAGO,SAAS,WAAW,OAAwB;AACjD,SAAO,qCAAqC,KAAK,KAAK;AACxD;AAKO,SAAS,WAAW,OAAwB;AACjD,SAAO,wBAAwB,KAAK,KAAK;AAC3C;AAKO,SAAS,SAAS,KAAyD;AAChF,QAAM,SAAS,4CAA4C,KAAK,GAAG;AACnE,SAAO,SACH;AAAA,IACE,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,IACzB,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,IACzB,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,EAAA,IAE3B;AACN;AAKO,SAAS,qBAAqB,QAA6C,UAAkB;AAClG,MAAI,OAAO,UAAU,UAAU;AAE7B,UAAM,aAAa,CAAC,MAAM,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,KAAO,KAAK,CAAC,IAAI;AACvF,WAAO,GAAG,UAAU;AAAA,EACtB;AAEA,QAAM,WAAW;AAAA,IACf,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAGR,SAAO,SAAS,KAAK,KAAK,SAAS;AACrC;AAKO,SAAS,cAAc,MAAgC;AAC5D,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,GAAG,IAAI;AAAA,EAChB;AACA,SAAO,QAAQ;AACjB;AAKO,SAAS,kBAAkB,MAAmC,UAA0B;AAC7F,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,CAAC,MAAM,IAAI,KAAK,OAAO,IAAI,OAAO;AAAA,EAC3C;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,UAAM,SAAS,SAAS,MAAM,EAAE;AAChC,WAAO,CAAC,MAAM,MAAM,KAAK,SAAS,IAAI,SAAS;AAAA,EACjD;AAEA,SAAO;AACT;AAMO,SAAS,kBAAkB,OAAuB;AAEvD,MAAI,WAAW,KAAK,GAAG;AACrB,UAAM,MAAM,SAAS,KAAK;AAC1B,QAAI,KAAK;AAEP,YAAM,EAAE,GAAG,GAAG,EAAA,IAAM;AACpB,YAAM,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM;AACxC,cAAM,MAAM,IAAI;AAChB,eAAO,OAAO,UAAU,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS,OAAO,GAAG;AAAA,MAC3E,CAAC;AACD,aAAO,SAAS,KAAK,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,EACF;AAGA,MAAI,WAAW,KAAK,GAAG;AACrB,UAAM,QAAQ,MAAM,MAAM,gCAAgC;AAC1D,QAAI,OAAO;AACT,YAAM,CAAA,EAAG,GAAG,GAAG,CAAC,IAAI,MAAM,IAAI,MAAM;AACpC,YAAM,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM;AACxC,cAAM,MAAM,IAAI;AAChB,eAAO,OAAO,UAAU,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS,OAAO,GAAG;AAAA,MAC3E,CAAC;AACD,aAAO,SAAS,KAAK,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,EACF;AAGA,SAAO;AACT;AAKO,SAAS,iBAAiB,iBAAiC;AAChE,QAAM,YAAY,kBAAkB,eAAe;AAEnD,SAAO,YAAY,MAAM,YAAY;AACvC;;;;;;;;;"}
+{"version":3,"file":"index4.cjs","sources":["../src/utils/colors.ts"],"sourcesContent":["/**\n * Check if a color is a valid hex color\n */\nexport function isHexColor(color: string): boolean {\n  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);\n}\n\n/**\n * Check if a color is a valid RGB/RGBA color\n */\nexport function isRgbColor(color: string): boolean {\n  return /^rgba?\\([\\d\\s,./]+\\)$/.test(color);\n}\n\n/**\n * Convert hex color to RGB\n */\nexport function hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n  return result\n    ? {\n        r: parseInt(result[1], 16),\n        g: parseInt(result[2], 16),\n        b: parseInt(result[3], 16),\n      }\n    : null;\n}\n\n/**\n * Get animation duration in CSS format\n */\nexport function getAnimationDuration(speed: 'slow' | 'normal' | 'fast' | number = 'normal'): string {\n  if (typeof speed === 'number') {\n    // Validate number is valid and positive, clamp to reasonable range (50ms - 10000ms)\n    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(10000, speed)) : 1000;\n    return `${validSpeed}ms`;\n  }\n\n  const speedMap = {\n    slow: '2s',\n    normal: '1s',\n    fast: '0.5s',\n  };\n\n  return speedMap[speed] || speedMap.normal;\n}\n\n/**\n * Normalize size value to CSS string\n * Supports size presets ('xs', 'sm', 'md', 'lg', 'xl'), numeric values, or CSS strings\n */\nexport function normalizeSize(size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | string): string {\n  // Handle size presets\n  const sizePresetMap = {\n    xs: 16,\n    sm: 24,\n    md: 40,\n    lg: 56,\n    xl: 72,\n  };\n\n  if (typeof size === 'string' && size in sizePresetMap) {\n    return `${sizePresetMap[size as keyof typeof sizePresetMap]}px`;\n  }\n\n  if (typeof size === 'number') {\n    return `${size}px`;\n  }\n  return size || 'auto';\n}\n\n/**\n * Safely parse size to number with fallback\n */\nexport function parseSizeToNumber(size: number | string | undefined, fallback: number): number {\n  if (typeof size === 'number') {\n    return !isNaN(size) && size > 0 ? size : fallback;\n  }\n\n  if (typeof size === 'string') {\n    const parsed = parseInt(size, 10);\n    return !isNaN(parsed) && parsed > 0 ? parsed : fallback;\n  }\n\n  return fallback;\n}\n\n/**\n * Calculate relative luminance of a color (0-1 scale)\n * Used for determining if text should be light or dark for contrast\n */\nexport function getColorLuminance(color: string): number {\n  // Try to parse hex color\n  if (isHexColor(color)) {\n    const rgb = hexToRgb(color);\n    if (rgb) {\n      // Convert RGB to relative luminance using WCAG formula\n      const { r, g, b } = rgb;\n      const [rs, gs, bs] = [r, g, b].map((c) => {\n        const val = c / 255;\n        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);\n      });\n      return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n    }\n  }\n\n  // Try to parse RGB/RGBA color\n  if (isRgbColor(color)) {\n    const match = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n    if (match) {\n      const [, r, g, b] = match.map(Number);\n      const [rs, gs, bs] = [r, g, b].map((c) => {\n        const val = c / 255;\n        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);\n      });\n      return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;\n    }\n  }\n\n  // Default to 0.5 (medium luminance) if unable to parse\n  return 0.5;\n}\n\n/**\n * Get contrast color (black or white) based on background luminance\n */\nexport function getContrastColor(backgroundColor: string): string {\n  const luminance = getColorLuminance(backgroundColor);\n  // WCAG standard: use white text on dark backgrounds (luminance < 0.5)\n  return luminance < 0.5 ? '#ffffff' : '#000000';\n}\n"],"names":[],"mappings":";;AAGO,SAAS,WAAW,OAAwB;AACjD,SAAO,qCAAqC,KAAK,KAAK;AACxD;AAKO,SAAS,WAAW,OAAwB;AACjD,SAAO,wBAAwB,KAAK,KAAK;AAC3C;AAKO,SAAS,SAAS,KAAyD;AAChF,QAAM,SAAS,4CAA4C,KAAK,GAAG;AACnE,SAAO,SACH;AAAA,IACE,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,IACzB,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,IACzB,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;AAAA,EAAA,IAE3B;AACN;AAKO,SAAS,qBAAqB,QAA6C,UAAkB;AAClG,MAAI,OAAO,UAAU,UAAU;AAE7B,UAAM,aAAa,CAAC,MAAM,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,KAAO,KAAK,CAAC,IAAI;AACvF,WAAO,GAAG,UAAU;AAAA,EACtB;AAEA,QAAM,WAAW;AAAA,IACf,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAGR,SAAO,SAAS,KAAK,KAAK,SAAS;AACrC;AAMO,SAAS,cAAc,MAAmE;AAE/F,QAAM,gBAAgB;AAAA,IACpB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAGN,MAAI,OAAO,SAAS,YAAY,QAAQ,eAAe;AACrD,WAAO,GAAG,cAAc,IAAkC,CAAC;AAAA,EAC7D;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,GAAG,IAAI;AAAA,EAChB;AACA,SAAO,QAAQ;AACjB;AAKO,SAAS,kBAAkB,MAAmC,UAA0B;AAC7F,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,CAAC,MAAM,IAAI,KAAK,OAAO,IAAI,OAAO;AAAA,EAC3C;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,UAAM,SAAS,SAAS,MAAM,EAAE;AAChC,WAAO,CAAC,MAAM,MAAM,KAAK,SAAS,IAAI,SAAS;AAAA,EACjD;AAEA,SAAO;AACT;AAMO,SAAS,kBAAkB,OAAuB;AAEvD,MAAI,WAAW,KAAK,GAAG;AACrB,UAAM,MAAM,SAAS,KAAK;AAC1B,QAAI,KAAK;AAEP,YAAM,EAAE,GAAG,GAAG,EAAA,IAAM;AACpB,YAAM,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM;AACxC,cAAM,MAAM,IAAI;AAChB,eAAO,OAAO,UAAU,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS,OAAO,GAAG;AAAA,MAC3E,CAAC;AACD,aAAO,SAAS,KAAK,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,EACF;AAGA,MAAI,WAAW,KAAK,GAAG;AACrB,UAAM,QAAQ,MAAM,MAAM,gCAAgC;AAC1D,QAAI,OAAO;AACT,YAAM,CAAA,EAAG,GAAG,GAAG,CAAC,IAAI,MAAM,IAAI,MAAM;AACpC,YAAM,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM;AACxC,cAAM,MAAM,IAAI;AAChB,eAAO,OAAO,UAAU,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS,OAAO,GAAG;AAAA,MAC3E,CAAC;AACD,aAAO,SAAS,KAAK,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,EACF;AAGA,SAAO;AACT;AAKO,SAAS,iBAAiB,iBAAiC;AAChE,QAAM,YAAY,kBAAkB,eAAe;AAEnD,SAAO,YAAY,MAAM,YAAY;AACvC;;;;;;;;;"}

package/dist/index4.js

@@ -25,6 +25,16 @@ function getAnimationDuration(speed = "normal") {
   return speedMap[speed] || speedMap.normal;
 }
 function normalizeSize(size) {
+  const sizePresetMap = {
+    xs: 16,
+    sm: 24,
+    md: 40,
+    lg: 56,
+    xl: 72
+  };
+  if (typeof size === "string" && size in sizePresetMap) {
+    return `${sizePresetMap[size]}px`;
+  }
   if (typeof size === "number") {
     return `${size}px`;
   }