premium-react-loaders 1.1.0 → 1.3.0

package/dist/index19.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 classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerWave = react.forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     ripples = 3,
     maxScale = 2,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-wave",
@@ -18,8 +24,15 @@ const SpinnerWave = 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;
     const sizeValue = colors.normalizeSize(size);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -27,7 +40,11 @@ const SpinnerWave = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -46,8 +63,9 @@ const SpinnerWave = react.forwardRef(
                 className: "absolute inset-0 rounded-full border-2",
                 style: {
                   borderColor: color,
-                  animation: `ripple-expand ${animationDuration} ease-out infinite`,
-                  animationDelay: `${index * 0.4}s`,
+                  animation: `ripple-expand ${effectiveDuration} ease-out infinite`,
+                  animationDelay: reverse ? `${(ripples - index - 1) * 0.4}s` : `${index * 0.4}s`,
+                  animationDirection: reverse ? "reverse" : "normal",
                   // @ts-ignore - CSS variable for animation
                   "--max-scale": maxScale
                 }

package/dist/index19.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index19.cjs","sources":["../src/components/spinner/SpinnerWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerWaveProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerWave - Ripple wave spinner\n *\n * A spinner with expanding ripple circles creating a wave effect.\n *\n * @example\n * ```tsx\n * <SpinnerWave size={60} color=\"#3b82f6\" />\n * <SpinnerWave size={80} ripples={5} />\n * <SpinnerWave size={50} maxScale={2.5} speed=\"fast\" />\n * ```\n */\nexport const SpinnerWave = forwardRef<HTMLDivElement, SpinnerWaveProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      ripples = 3,\n      maxScale = 2,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-wave',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const animationDuration = getAnimationDuration(speed);\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: sizeValue,\n            height: sizeValue,\n          }}\n        >\n          {/* Expanding ripples */}\n          {Array.from({ length: ripples }).map((_, index) => (\n            <div\n              key={index}\n              className=\"absolute inset-0 rounded-full border-2\"\n              style={{\n                borderColor: color,\n                animation: `ripple-expand ${animationDuration} ease-out infinite`,\n                animationDelay: `${index * 0.4}s`,\n                // @ts-ignore - CSS variable for animation\n                '--max-scale': maxScale,\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerWave.displayName = 'SpinnerWave';\n"],"names":["forwardRef","getAnimationDuration","normalizeSize","jsx","cn"],"mappings":";;;;;;AAgBO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,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,oBAAoBC,OAAAA,qBAAqB,KAAK;AACpD,UAAM,YAAYC,OAAAA,cAAc,IAAI;AAEpC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,YAIT,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,EAAE,IAAI,CAAC,GAAG,UACvCA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,aAAa;AAAA,kBACb,WAAW,iBAAiB,iBAAiB;AAAA,kBAC7C,gBAAgB,GAAG,QAAQ,GAAG;AAAA;AAAA,kBAE9B,eAAe;AAAA,gBAAA;AAAA,cACjB;AAAA,cARK;AAAA,YAAA,CAUR;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"index19.cjs","sources":["../src/components/spinner/SpinnerWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerWaveProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * SpinnerWave - Ripple wave spinner\n *\n * A spinner with expanding ripple circles creating a wave effect.\n *\n * @example\n * ```tsx\n * <SpinnerWave size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerWave size=\"xl\" ripples={5} reverse />\n * <SpinnerWave size=\"md\" maxScale={2.5} speed=\"fast\" />\n * ```\n */\nexport const SpinnerWave = forwardRef<HTMLDivElement, SpinnerWaveProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      ripples = 3,\n      maxScale = 2,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'spinner-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    const sizeValue = normalizeSize(size);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={{\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: sizeValue,\n            height: sizeValue,\n          }}\n        >\n          {/* Expanding ripples */}\n          {Array.from({ length: ripples }).map((_, index) => (\n            <div\n              key={index}\n              className=\"absolute inset-0 rounded-full border-2\"\n              style={{\n                borderColor: color,\n                animation: `ripple-expand ${effectiveDuration} ease-out infinite`,\n                animationDelay: reverse ? `${(ripples - index - 1) * 0.4}s` : `${index * 0.4}s`,\n                animationDirection: reverse ? 'reverse' : 'normal',\n                // @ts-ignore - CSS variable for animation\n                '--max-scale': maxScale,\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerWave.displayName = 'SpinnerWave';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","useLoaderVisibility","normalizeSize","jsx","cn"],"mappings":";;;;;;;AAgBO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,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;AAC1B,UAAM,YAAYC,OAAAA,cAAc,IAAI;AAEpC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,YAIT,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,EAAE,IAAI,CAAC,GAAG,UACvCA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,aAAa;AAAA,kBACb,WAAW,iBAAiB,iBAAiB;AAAA,kBAC7C,gBAAgB,UAAU,IAAI,UAAU,QAAQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG;AAAA,kBAC5E,oBAAoB,UAAU,YAAY;AAAA;AAAA,kBAE1C,eAAe;AAAA,gBAAA;AAAA,cACjB;AAAA,cATK;AAAA,YAAA,CAWR;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}

package/dist/index19.js

@@ -1,14 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
 import { cn } from "./index3.js";
-import { normalizeSize, getAnimationDuration } from "./index4.js";
+import { normalizeSize } from "./index4.js";
 const SpinnerWave = forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     ripples = 3,
     maxScale = 2,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-wave",
@@ -16,8 +22,15 @@ const SpinnerWave = 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;
     const sizeValue = normalizeSize(size);
     return /* @__PURE__ */ jsx(
       "div",
@@ -25,7 +38,11 @@ const SpinnerWave = forwardRef(
         ref,
         "data-testid": testId,
         className: cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -44,8 +61,9 @@ const SpinnerWave = forwardRef(
                 className: "absolute inset-0 rounded-full border-2",
                 style: {
                   borderColor: color,
-                  animation: `ripple-expand ${animationDuration} ease-out infinite`,
-                  animationDelay: `${index * 0.4}s`,
+                  animation: `ripple-expand ${effectiveDuration} ease-out infinite`,
+                  animationDelay: reverse ? `${(ripples - index - 1) * 0.4}s` : `${index * 0.4}s`,
+                  animationDirection: reverse ? "reverse" : "normal",
                   // @ts-ignore - CSS variable for animation
                   "--max-scale": maxScale
                 }

package/dist/index19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index19.js","sources":["../src/components/spinner/SpinnerWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerWaveProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerWave - Ripple wave spinner\n *\n * A spinner with expanding ripple circles creating a wave effect.\n *\n * @example\n * ```tsx\n * <SpinnerWave size={60} color=\"#3b82f6\" />\n * <SpinnerWave size={80} ripples={5} />\n * <SpinnerWave size={50} maxScale={2.5} speed=\"fast\" />\n * ```\n */\nexport const SpinnerWave = forwardRef<HTMLDivElement, SpinnerWaveProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      ripples = 3,\n      maxScale = 2,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-wave',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const animationDuration = getAnimationDuration(speed);\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: sizeValue,\n            height: sizeValue,\n          }}\n        >\n          {/* Expanding ripples */}\n          {Array.from({ length: ripples }).map((_, index) => (\n            <div\n              key={index}\n              className=\"absolute inset-0 rounded-full border-2\"\n              style={{\n                borderColor: color,\n                animation: `ripple-expand ${animationDuration} ease-out infinite`,\n                animationDelay: `${index * 0.4}s`,\n                // @ts-ignore - CSS variable for animation\n                '--max-scale': maxScale,\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerWave.displayName = 'SpinnerWave';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,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,oBAAoB,qBAAqB,KAAK;AACpD,UAAM,YAAY,cAAc,IAAI;AAEpC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,YAIT,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,EAAE,IAAI,CAAC,GAAG,UACvC;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,aAAa;AAAA,kBACb,WAAW,iBAAiB,iBAAiB;AAAA,kBAC7C,gBAAgB,GAAG,QAAQ,GAAG;AAAA;AAAA,kBAE9B,eAAe;AAAA,gBAAA;AAAA,cACjB;AAAA,cARK;AAAA,YAAA,CAUR;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"index19.js","sources":["../src/components/spinner/SpinnerWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerWaveProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * SpinnerWave - Ripple wave spinner\n *\n * A spinner with expanding ripple circles creating a wave effect.\n *\n * @example\n * ```tsx\n * <SpinnerWave size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerWave size=\"xl\" ripples={5} reverse />\n * <SpinnerWave size=\"md\" maxScale={2.5} speed=\"fast\" />\n * ```\n */\nexport const SpinnerWave = forwardRef<HTMLDivElement, SpinnerWaveProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      ripples = 3,\n      maxScale = 2,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'spinner-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    const sizeValue = normalizeSize(size);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={{\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: sizeValue,\n            height: sizeValue,\n          }}\n        >\n          {/* Expanding ripples */}\n          {Array.from({ length: ripples }).map((_, index) => (\n            <div\n              key={index}\n              className=\"absolute inset-0 rounded-full border-2\"\n              style={{\n                borderColor: color,\n                animation: `ripple-expand ${effectiveDuration} ease-out infinite`,\n                animationDelay: reverse ? `${(ripples - index - 1) * 0.4}s` : `${index * 0.4}s`,\n                animationDirection: reverse ? 'reverse' : 'normal',\n                // @ts-ignore - CSS variable for animation\n                '--max-scale': maxScale,\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerWave.displayName = 'SpinnerWave';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,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;AAC1B,UAAM,YAAY,cAAc,IAAI;AAEpC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,YAIT,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,EAAE,IAAI,CAAC,GAAG,UACvC;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,aAAa;AAAA,kBACb,WAAW,iBAAiB,iBAAiB;AAAA,kBAC7C,gBAAgB,UAAU,IAAI,UAAU,QAAQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG;AAAA,kBAC5E,oBAAoB,UAAU,YAAY;AAAA;AAAA,kBAE1C,eAAe;AAAA,gBAAA;AAAA,cACjB;AAAA,cATK;AAAA,YAAA,CAWR;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}

package/dist/index20.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 classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SpinnerPulse = react.forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     pulses = 2,
     maxScale = 1.8,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-pulse",
@@ -18,8 +24,15 @@ const SpinnerPulse = 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;
     const sizeValue = colors.normalizeSize(size);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -27,7 +40,11 @@ const SpinnerPulse = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -47,8 +64,9 @@ const SpinnerPulse = react.forwardRef(
                   className: "absolute inset-0 rounded-full",
                   style: {
                     backgroundColor: color,
-                    animation: `heartbeat-pulse ${animationDuration} ease-out infinite`,
-                    animationDelay: `${index * 0.3}s`,
+                    animation: `heartbeat-pulse ${effectiveDuration} ease-out infinite`,
+                    animationDelay: reverse ? `${(pulses - index - 1) * 0.3}s` : `${index * 0.3}s`,
+                    animationDirection: reverse ? "reverse" : "normal",
                     // @ts-ignore - CSS variable for animation
                     "--max-scale": maxScale
                   }

package/dist/index20.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index20.cjs","sources":["../src/components/spinner/SpinnerPulse.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerPulseProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerPulse - Heartbeat pulse spinner\n *\n * A spinner with pulsing circles that scale and fade, creating a heartbeat effect.\n *\n * @example\n * ```tsx\n * <SpinnerPulse size={60} color=\"#3b82f6\" />\n * <SpinnerPulse size={80} pulses={3} />\n * <SpinnerPulse size={50} maxScale={2.5} speed=\"slow\" />\n * ```\n */\nexport const SpinnerPulse = forwardRef<HTMLDivElement, SpinnerPulseProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      pulses = 2,\n      maxScale = 1.8,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-pulse',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const animationDuration = getAnimationDuration(speed);\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: sizeValue,\n            height: sizeValue,\n          }}\n        >\n          {/* Pulsing circles */}\n          {Array.from({ length: pulses }).map((_, index) => (\n            <div\n              key={index}\n              className=\"absolute inset-0 rounded-full\"\n              style={{\n                backgroundColor: color,\n                animation: `heartbeat-pulse ${animationDuration} ease-out infinite`,\n                animationDelay: `${index * 0.3}s`,\n                // @ts-ignore - CSS variable for animation\n                '--max-scale': maxScale,\n              }}\n            />\n          ))}\n\n          {/* Static center circle */}\n          <div\n            className=\"absolute rounded-full\"\n            style={{\n              backgroundColor: color,\n              width: '50%',\n              height: '50%',\n              top: '25%',\n              left: '25%',\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerPulse.displayName = 'SpinnerPulse';\n"],"names":["forwardRef","getAnimationDuration","normalizeSize","jsx","cn","jsxs"],"mappings":";;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,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,oBAAoBC,OAAAA,qBAAqB,KAAK;AACpD,UAAM,YAAYC,OAAAA,cAAc,IAAI;AAEpC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,YAIT,UAAA;AAAA,cAAA,MAAM,KAAK,EAAE,QAAQ,OAAA,CAAQ,EAAE,IAAI,CAAC,GAAG,UACtCF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,iBAAiB;AAAA,oBACjB,WAAW,mBAAmB,iBAAiB;AAAA,oBAC/C,gBAAgB,GAAG,QAAQ,GAAG;AAAA;AAAA,oBAE9B,eAAe;AAAA,kBAAA;AAAA,gBACjB;AAAA,gBARK;AAAA,cAAA,CAUR;AAAA,cAGDA,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,iBAAiB;AAAA,oBACjB,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,KAAK;AAAA,oBACL,MAAM;AAAA,kBAAA;AAAA,gBACR;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"index20.cjs","sources":["../src/components/spinner/SpinnerPulse.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerPulseProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * SpinnerPulse - Heartbeat pulse spinner\n *\n * A spinner with pulsing circles that scale and fade, creating a heartbeat effect.\n *\n * @example\n * ```tsx\n * <SpinnerPulse size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerPulse size=\"xl\" pulses={3} reverse />\n * <SpinnerPulse size=\"md\" maxScale={2.5} speed=\"slow\" />\n * ```\n */\nexport const SpinnerPulse = forwardRef<HTMLDivElement, SpinnerPulseProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      pulses = 2,\n      maxScale = 1.8,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'spinner-pulse',\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    const sizeValue = normalizeSize(size);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={{\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: sizeValue,\n            height: sizeValue,\n          }}\n        >\n          {/* Pulsing circles */}\n          {Array.from({ length: pulses }).map((_, index) => (\n            <div\n              key={index}\n              className=\"absolute inset-0 rounded-full\"\n              style={{\n                backgroundColor: color,\n                animation: `heartbeat-pulse ${effectiveDuration} ease-out infinite`,\n                animationDelay: reverse ? `${(pulses - index - 1) * 0.3}s` : `${index * 0.3}s`,\n                animationDirection: reverse ? 'reverse' : 'normal',\n                // @ts-ignore - CSS variable for animation\n                '--max-scale': maxScale,\n              }}\n            />\n          ))}\n\n          {/* Static center circle */}\n          <div\n            className=\"absolute rounded-full\"\n            style={{\n              backgroundColor: color,\n              width: '50%',\n              height: '50%',\n              top: '25%',\n              left: '25%',\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerPulse.displayName = 'SpinnerPulse';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","useLoaderVisibility","normalizeSize","jsx","cn","jsxs"],"mappings":";;;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,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;AAC1B,UAAM,YAAYC,OAAAA,cAAc,IAAI;AAEpC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,YAIT,UAAA;AAAA,cAAA,MAAM,KAAK,EAAE,QAAQ,OAAA,CAAQ,EAAE,IAAI,CAAC,GAAG,UACtCF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,iBAAiB;AAAA,oBACjB,WAAW,mBAAmB,iBAAiB;AAAA,oBAC/C,gBAAgB,UAAU,IAAI,SAAS,QAAQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG;AAAA,oBAC3E,oBAAoB,UAAU,YAAY;AAAA;AAAA,oBAE1C,eAAe;AAAA,kBAAA;AAAA,gBACjB;AAAA,gBATK;AAAA,cAAA,CAWR;AAAA,cAGDA,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,iBAAiB;AAAA,oBACjB,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,KAAK;AAAA,oBACL,MAAM;AAAA,kBAAA;AAAA,gBACR;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;;"}

package/dist/index20.js

@@ -1,14 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
 import { cn } from "./index3.js";
-import { normalizeSize, getAnimationDuration } from "./index4.js";
+import { normalizeSize } from "./index4.js";
 const SpinnerPulse = forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
     pulses = 2,
     maxScale = 1.8,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-pulse",
@@ -16,8 +22,15 @@ const SpinnerPulse = 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;
     const sizeValue = normalizeSize(size);
     return /* @__PURE__ */ jsx(
       "div",
@@ -25,7 +38,11 @@ const SpinnerPulse = forwardRef(
         ref,
         "data-testid": testId,
         className: cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -45,8 +62,9 @@ const SpinnerPulse = forwardRef(
                   className: "absolute inset-0 rounded-full",
                   style: {
                     backgroundColor: color,
-                    animation: `heartbeat-pulse ${animationDuration} ease-out infinite`,
-                    animationDelay: `${index * 0.3}s`,
+                    animation: `heartbeat-pulse ${effectiveDuration} ease-out infinite`,
+                    animationDelay: reverse ? `${(pulses - index - 1) * 0.3}s` : `${index * 0.3}s`,
+                    animationDirection: reverse ? "reverse" : "normal",
                     // @ts-ignore - CSS variable for animation
                     "--max-scale": maxScale
                   }

package/dist/index20.js.map

@@ -1 +1 @@
-{"version":3,"file":"index20.js","sources":["../src/components/spinner/SpinnerPulse.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerPulseProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerPulse - Heartbeat pulse spinner\n *\n * A spinner with pulsing circles that scale and fade, creating a heartbeat effect.\n *\n * @example\n * ```tsx\n * <SpinnerPulse size={60} color=\"#3b82f6\" />\n * <SpinnerPulse size={80} pulses={3} />\n * <SpinnerPulse size={50} maxScale={2.5} speed=\"slow\" />\n * ```\n */\nexport const SpinnerPulse = forwardRef<HTMLDivElement, SpinnerPulseProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      pulses = 2,\n      maxScale = 1.8,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-pulse',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const animationDuration = getAnimationDuration(speed);\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: sizeValue,\n            height: sizeValue,\n          }}\n        >\n          {/* Pulsing circles */}\n          {Array.from({ length: pulses }).map((_, index) => (\n            <div\n              key={index}\n              className=\"absolute inset-0 rounded-full\"\n              style={{\n                backgroundColor: color,\n                animation: `heartbeat-pulse ${animationDuration} ease-out infinite`,\n                animationDelay: `${index * 0.3}s`,\n                // @ts-ignore - CSS variable for animation\n                '--max-scale': maxScale,\n              }}\n            />\n          ))}\n\n          {/* Static center circle */}\n          <div\n            className=\"absolute rounded-full\"\n            style={{\n              backgroundColor: color,\n              width: '50%',\n              height: '50%',\n              top: '25%',\n              left: '25%',\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerPulse.displayName = 'SpinnerPulse';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,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,oBAAoB,qBAAqB,KAAK;AACpD,UAAM,YAAY,cAAc,IAAI;AAEpC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,YAIT,UAAA;AAAA,cAAA,MAAM,KAAK,EAAE,QAAQ,OAAA,CAAQ,EAAE,IAAI,CAAC,GAAG,UACtC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,iBAAiB;AAAA,oBACjB,WAAW,mBAAmB,iBAAiB;AAAA,oBAC/C,gBAAgB,GAAG,QAAQ,GAAG;AAAA;AAAA,oBAE9B,eAAe;AAAA,kBAAA;AAAA,gBACjB;AAAA,gBARK;AAAA,cAAA,CAUR;AAAA,cAGD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,iBAAiB;AAAA,oBACjB,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,KAAK;AAAA,oBACL,MAAM;AAAA,kBAAA;AAAA,gBACR;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"index20.js","sources":["../src/components/spinner/SpinnerPulse.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerPulseProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * SpinnerPulse - Heartbeat pulse spinner\n *\n * A spinner with pulsing circles that scale and fade, creating a heartbeat effect.\n *\n * @example\n * ```tsx\n * <SpinnerPulse size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerPulse size=\"xl\" pulses={3} reverse />\n * <SpinnerPulse size=\"md\" maxScale={2.5} speed=\"slow\" />\n * ```\n */\nexport const SpinnerPulse = forwardRef<HTMLDivElement, SpinnerPulseProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      pulses = 2,\n      maxScale = 1.8,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'spinner-pulse',\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    const sizeValue = normalizeSize(size);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={{\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: sizeValue,\n            height: sizeValue,\n          }}\n        >\n          {/* Pulsing circles */}\n          {Array.from({ length: pulses }).map((_, index) => (\n            <div\n              key={index}\n              className=\"absolute inset-0 rounded-full\"\n              style={{\n                backgroundColor: color,\n                animation: `heartbeat-pulse ${effectiveDuration} ease-out infinite`,\n                animationDelay: reverse ? `${(pulses - index - 1) * 0.3}s` : `${index * 0.3}s`,\n                animationDirection: reverse ? 'reverse' : 'normal',\n                // @ts-ignore - CSS variable for animation\n                '--max-scale': maxScale,\n              }}\n            />\n          ))}\n\n          {/* Static center circle */}\n          <div\n            className=\"absolute rounded-full\"\n            style={{\n              backgroundColor: color,\n              width: '50%',\n              height: '50%',\n              top: '25%',\n              left: '25%',\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerPulse.displayName = 'SpinnerPulse';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,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;AAC1B,UAAM,YAAY,cAAc,IAAI;AAEpC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,YAIT,UAAA;AAAA,cAAA,MAAM,KAAK,EAAE,QAAQ,OAAA,CAAQ,EAAE,IAAI,CAAC,GAAG,UACtC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,iBAAiB;AAAA,oBACjB,WAAW,mBAAmB,iBAAiB;AAAA,oBAC/C,gBAAgB,UAAU,IAAI,SAAS,QAAQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG;AAAA,oBAC3E,oBAAoB,UAAU,YAAY;AAAA;AAAA,oBAE1C,eAAe;AAAA,kBAAA;AAAA,gBACjB;AAAA,gBATK;AAAA,cAAA,CAWR;AAAA,cAGD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,iBAAiB;AAAA,oBACjB,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,KAAK;AAAA,oBACL,MAAM;AAAA,kBAAA;AAAA,gBACR;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;"}

package/dist/index21.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const colors = require("./index4.cjs");
+const hooks = require("./index31.cjs");
 const classNames = require("./index3.cjs");
 const ProgressBar = react.forwardRef(
   ({
@@ -15,6 +16,11 @@ const ProgressBar = react.forwardRef(
     gradient = false,
     buffer,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "progress-bar",
@@ -22,12 +28,19 @@ const ProgressBar = react.forwardRef(
     ariaLabel,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const gradientId = react.useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    const animationDuration = colors.getAnimationDuration(speed);
-    const gradientId = react.useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -37,7 +50,9 @@ const ProgressBar = react.forwardRef(
         style: {
           height: colors.normalizeSize(height),
           backgroundColor: secondaryColor,
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "progressbar",
         "aria-label": progressLabel,
@@ -66,7 +81,8 @@ const ProgressBar = react.forwardRef(
               className: "absolute h-full rounded-full",
               style: {
                 backgroundColor: gradient ? `url(#${gradientId})` : color,
-                animation: `progress-indeterminate ${animationDuration} ease-in-out infinite`,
+                animation: `progress-indeterminate ${effectiveDuration} ease-in-out infinite`,
+                animationDirection: reverse ? "reverse" : "normal",
                 width: "40%"
               }
             }

package/dist/index21.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index21.cjs","sources":["../src/components/progress/ProgressBar.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { ProgressBarProps } from '../../types';\nimport { cn, normalizeSize, getContrastColor, getAnimationDuration } from '../../utils';\n\n/**\n * ProgressBar - Linear progress bar\n *\n * A horizontal progress bar that can be determinate (showing specific progress) or indeterminate (loading animation).\n *\n * @example\n * ```tsx\n * <ProgressBar value={75} showValue />\n * <ProgressBar indeterminate />\n * <ProgressBar value={50} height={8} color=\"#8b5cf6\" />\n * <ProgressBar value={50} buffer={75} /> // YouTube-style buffering\n * <ProgressBar value={60} gradient /> // Gradient progress\n * ```\n */\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      height = '0.5rem',\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      gradient = false,\n      buffer,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'progress-bar',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const clampedBuffer = buffer !== undefined ? Math.min(100, Math.max(0, buffer)) : undefined;\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n    const animationDuration = getAnimationDuration(speed);\n\n    // Generate gradient ID for SVG-based gradient\n    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative w-full overflow-hidden rounded-full', className)}\n        style={{\n          height: normalizeSize(height),\n          backgroundColor: secondaryColor,\n          ...style,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        {/* Gradient SVG definition */}\n        {gradient && !indeterminate && (\n          <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                <stop offset=\"0%\" stopColor={color} />\n                <stop offset=\"100%\" stopColor={secondaryColor || '#8b5cf6'} />\n              </linearGradient>\n            </defs>\n          </svg>\n        )}\n\n        {/* Buffer indicator (shows behind main progress) */}\n        {clampedBuffer !== undefined && !indeterminate && (\n          <div\n            className=\"absolute h-full rounded-full opacity-30\"\n            style={{\n              width: `${clampedBuffer}%`,\n              backgroundColor: color,\n            }}\n          />\n        )}\n\n        {indeterminate ? (\n          <div\n            className=\"absolute h-full rounded-full\"\n            style={{\n              backgroundColor: gradient ? `url(#${gradientId})` : color,\n              animation: `progress-indeterminate ${animationDuration} ease-in-out infinite`,\n              width: '40%',\n            }}\n          />\n        ) : (\n          <div\n            className=\"h-full rounded-full transition-all duration-300 ease-in-out\"\n            style={{\n              width: `${clampedValue}%`,\n              background: gradient ? `url(#${gradientId})` : color,\n            }}\n          />\n        )}\n\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute inset-0 flex items-center justify-center text-xs font-medium\"\n            style={{\n              color: clampedValue > 50 ? getContrastColor(color) : secondaryColor === '#e0e0e0' ? '#000000' : getContrastColor(secondaryColor)\n            }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":["forwardRef","getAnimationDuration","useMemo","jsxs","cn","normalizeSize","jsx","getContrastColor"],"mappings":"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"}
+{"version":3,"file":"index21.cjs","sources":["../src/components/progress/ProgressBar.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { ProgressBarProps } from '../../types';\nimport { cn, normalizeSize, getContrastColor, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * ProgressBar - Linear progress bar\n *\n * A horizontal progress bar that can be determinate (showing specific progress) or indeterminate (loading animation).\n *\n * @example\n * ```tsx\n * <ProgressBar value={75} showValue />\n * <ProgressBar indeterminate />\n * <ProgressBar value={50} height={8} color=\"#8b5cf6\" />\n * <ProgressBar value={50} buffer={75} /> // YouTube-style buffering\n * <ProgressBar value={60} gradient /> // Gradient progress\n * ```\n */\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      height = '0.5rem',\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      gradient = false,\n      buffer,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'progress-bar',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    // Generate gradient ID for SVG-based gradient (must be before early return)\n    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);\n\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const clampedBuffer = buffer !== undefined ? Math.min(100, Math.max(0, buffer)) : undefined;\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative w-full overflow-hidden rounded-full', className)}\n        style={{\n          height: normalizeSize(height),\n          backgroundColor: secondaryColor,\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        {/* Gradient SVG definition */}\n        {gradient && !indeterminate && (\n          <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                <stop offset=\"0%\" stopColor={color} />\n                <stop offset=\"100%\" stopColor={secondaryColor || '#8b5cf6'} />\n              </linearGradient>\n            </defs>\n          </svg>\n        )}\n\n        {/* Buffer indicator (shows behind main progress) */}\n        {clampedBuffer !== undefined && !indeterminate && (\n          <div\n            className=\"absolute h-full rounded-full opacity-30\"\n            style={{\n              width: `${clampedBuffer}%`,\n              backgroundColor: color,\n            }}\n          />\n        )}\n\n        {indeterminate ? (\n          <div\n            className=\"absolute h-full rounded-full\"\n            style={{\n              backgroundColor: gradient ? `url(#${gradientId})` : color,\n              animation: `progress-indeterminate ${effectiveDuration} ease-in-out infinite`,\n              animationDirection: reverse ? 'reverse' : 'normal',\n              width: '40%',\n            }}\n          />\n        ) : (\n          <div\n            className=\"h-full rounded-full transition-all duration-300 ease-in-out\"\n            style={{\n              width: `${clampedValue}%`,\n              background: gradient ? `url(#${gradientId})` : color,\n            }}\n          />\n        )}\n\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute inset-0 flex items-center justify-center text-xs font-medium\"\n            style={{\n              color: clampedValue > 50 ? getContrastColor(color) : secondaryColor === '#e0e0e0' ? '#000000' : getContrastColor(secondaryColor)\n            }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","useMemo","useLoaderVisibility","jsxs","cn","normalizeSize","jsx","getContrastColor"],"mappings":"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"}

package/dist/index21.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
-import { normalizeSize, getAnimationDuration, getContrastColor } from "./index4.js";
+import { normalizeSize, getContrastColor } from "./index4.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
 import { cn } from "./index3.js";
 const ProgressBar = forwardRef(
   ({
@@ -13,6 +14,11 @@ const ProgressBar = forwardRef(
     gradient = false,
     buffer,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "progress-bar",
@@ -20,12 +26,19 @@ const ProgressBar = forwardRef(
     ariaLabel,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    const animationDuration = getAnimationDuration(speed);
-    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -35,7 +48,9 @@ const ProgressBar = forwardRef(
         style: {
           height: normalizeSize(height),
           backgroundColor: secondaryColor,
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "progressbar",
         "aria-label": progressLabel,
@@ -64,7 +79,8 @@ const ProgressBar = forwardRef(
               className: "absolute h-full rounded-full",
               style: {
                 backgroundColor: gradient ? `url(#${gradientId})` : color,
-                animation: `progress-indeterminate ${animationDuration} ease-in-out infinite`,
+                animation: `progress-indeterminate ${effectiveDuration} ease-in-out infinite`,
+                animationDirection: reverse ? "reverse" : "normal",
                 width: "40%"
               }
             }

package/dist/index21.js.map

@@ -1 +1 @@
-{"version":3,"file":"index21.js","sources":["../src/components/progress/ProgressBar.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { ProgressBarProps } from '../../types';\nimport { cn, normalizeSize, getContrastColor, getAnimationDuration } from '../../utils';\n\n/**\n * ProgressBar - Linear progress bar\n *\n * A horizontal progress bar that can be determinate (showing specific progress) or indeterminate (loading animation).\n *\n * @example\n * ```tsx\n * <ProgressBar value={75} showValue />\n * <ProgressBar indeterminate />\n * <ProgressBar value={50} height={8} color=\"#8b5cf6\" />\n * <ProgressBar value={50} buffer={75} /> // YouTube-style buffering\n * <ProgressBar value={60} gradient /> // Gradient progress\n * ```\n */\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      height = '0.5rem',\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      gradient = false,\n      buffer,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'progress-bar',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const clampedBuffer = buffer !== undefined ? Math.min(100, Math.max(0, buffer)) : undefined;\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n    const animationDuration = getAnimationDuration(speed);\n\n    // Generate gradient ID for SVG-based gradient\n    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative w-full overflow-hidden rounded-full', className)}\n        style={{\n          height: normalizeSize(height),\n          backgroundColor: secondaryColor,\n          ...style,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        {/* Gradient SVG definition */}\n        {gradient && !indeterminate && (\n          <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                <stop offset=\"0%\" stopColor={color} />\n                <stop offset=\"100%\" stopColor={secondaryColor || '#8b5cf6'} />\n              </linearGradient>\n            </defs>\n          </svg>\n        )}\n\n        {/* Buffer indicator (shows behind main progress) */}\n        {clampedBuffer !== undefined && !indeterminate && (\n          <div\n            className=\"absolute h-full rounded-full opacity-30\"\n            style={{\n              width: `${clampedBuffer}%`,\n              backgroundColor: color,\n            }}\n          />\n        )}\n\n        {indeterminate ? (\n          <div\n            className=\"absolute h-full rounded-full\"\n            style={{\n              backgroundColor: gradient ? `url(#${gradientId})` : color,\n              animation: `progress-indeterminate ${animationDuration} ease-in-out infinite`,\n              width: '40%',\n            }}\n          />\n        ) : (\n          <div\n            className=\"h-full rounded-full transition-all duration-300 ease-in-out\"\n            style={{\n              width: `${clampedValue}%`,\n              background: gradient ? `url(#${gradientId})` : color,\n            }}\n          />\n        )}\n\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute inset-0 flex items-center justify-center text-xs font-medium\"\n            style={{\n              color: clampedValue > 50 ? getContrastColor(color) : secondaryColor === '#e0e0e0' ? '#000000' : getContrastColor(secondaryColor)\n            }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":[],"mappings":";;;;AAkBO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,gBAAgB,WAAW,SAAY,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,MAAM,CAAC,IAAI;AAClF,UAAM,gBAAgB,aAAa,WAAW,YAAY;AAC1D,UAAM,oBAAoB,qBAAqB,KAAK;AAGpD,UAAM,aAAa,QAAQ,MAAM,yBAAyB,KAAK,SAAS,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE;AAEvG,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,gDAAgD,SAAS;AAAA,QACvE,OAAO;AAAA,UACL,QAAQ,cAAc,MAAM;AAAA,UAC5B,iBAAiB;AAAA,UACjB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,iBAAe;AAAA,QACd,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,YAAY,CAAC,iBACZ,oBAAC,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,OAAO,EAAE,UAAU,WAAA,GAC3C,8BAAC,QAAA,EACC,UAAA,qBAAC,kBAAA,EAAe,IAAI,YAAY,IAAG,MAAK,IAAG,MAAK,IAAG,QAAO,IAAG,MAC3D,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAK,QAAO,MAAK,WAAW,OAAO;AAAA,gCACnC,QAAA,EAAK,QAAO,QAAO,WAAW,kBAAkB,UAAA,CAAW;AAAA,UAAA,EAAA,CAC9D,GACF,GACF;AAAA,UAID,kBAAkB,UAAa,CAAC,iBAC/B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,aAAa;AAAA,gBACvB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA;AAAA,UAIH,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,iBAAiB,WAAW,QAAQ,UAAU,MAAM;AAAA,gBACpD,WAAW,0BAA0B,iBAAiB;AAAA,gBACtD,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,UAAA,IAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,YAAY;AAAA,gBACtB,YAAY,WAAW,QAAQ,UAAU,MAAM;AAAA,cAAA;AAAA,YACjD;AAAA,UAAA;AAAA,UAIH,aAAa,CAAC,iBACb;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,eAAe,KAAK,iBAAiB,KAAK,IAAI,mBAAmB,YAAY,YAAY,iBAAiB,cAAc;AAAA,cAAA;AAAA,cAGhI,UAAA;AAAA,gBAAA;AAAA,gBAAa;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"index21.js","sources":["../src/components/progress/ProgressBar.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { ProgressBarProps } from '../../types';\nimport { cn, normalizeSize, getContrastColor, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * ProgressBar - Linear progress bar\n *\n * A horizontal progress bar that can be determinate (showing specific progress) or indeterminate (loading animation).\n *\n * @example\n * ```tsx\n * <ProgressBar value={75} showValue />\n * <ProgressBar indeterminate />\n * <ProgressBar value={50} height={8} color=\"#8b5cf6\" />\n * <ProgressBar value={50} buffer={75} /> // YouTube-style buffering\n * <ProgressBar value={60} gradient /> // Gradient progress\n * ```\n */\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      height = '0.5rem',\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      gradient = false,\n      buffer,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'progress-bar',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    // Generate gradient ID for SVG-based gradient (must be before early return)\n    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);\n\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const clampedBuffer = buffer !== undefined ? Math.min(100, Math.max(0, buffer)) : undefined;\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative w-full overflow-hidden rounded-full', className)}\n        style={{\n          height: normalizeSize(height),\n          backgroundColor: secondaryColor,\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        {/* Gradient SVG definition */}\n        {gradient && !indeterminate && (\n          <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                <stop offset=\"0%\" stopColor={color} />\n                <stop offset=\"100%\" stopColor={secondaryColor || '#8b5cf6'} />\n              </linearGradient>\n            </defs>\n          </svg>\n        )}\n\n        {/* Buffer indicator (shows behind main progress) */}\n        {clampedBuffer !== undefined && !indeterminate && (\n          <div\n            className=\"absolute h-full rounded-full opacity-30\"\n            style={{\n              width: `${clampedBuffer}%`,\n              backgroundColor: color,\n            }}\n          />\n        )}\n\n        {indeterminate ? (\n          <div\n            className=\"absolute h-full rounded-full\"\n            style={{\n              backgroundColor: gradient ? `url(#${gradientId})` : color,\n              animation: `progress-indeterminate ${effectiveDuration} ease-in-out infinite`,\n              animationDirection: reverse ? 'reverse' : 'normal',\n              width: '40%',\n            }}\n          />\n        ) : (\n          <div\n            className=\"h-full rounded-full transition-all duration-300 ease-in-out\"\n            style={{\n              width: `${clampedValue}%`,\n              background: gradient ? `url(#${gradientId})` : color,\n            }}\n          />\n        )}\n\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute inset-0 flex items-center justify-center text-xs font-medium\"\n            style={{\n              color: clampedValue > 50 ? getContrastColor(color) : secondaryColor === '#e0e0e0' ? '#000000' : getContrastColor(secondaryColor)\n            }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX;AAAA,IACA,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;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AAGnG,UAAM,aAAa,QAAQ,MAAM,yBAAyB,KAAK,SAAS,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE;AAEvG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,gBAAgB,WAAW,SAAY,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,MAAM,CAAC,IAAI;AAClF,UAAM,gBAAgB,aAAa,WAAW,YAAY;AAE1D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,gDAAgD,SAAS;AAAA,QACvE,OAAO;AAAA,UACL,QAAQ,cAAc,MAAM;AAAA,UAC5B,iBAAiB;AAAA,UACjB,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,iBAAe;AAAA,QACd,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,YAAY,CAAC,iBACZ,oBAAC,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,OAAO,EAAE,UAAU,WAAA,GAC3C,8BAAC,QAAA,EACC,UAAA,qBAAC,kBAAA,EAAe,IAAI,YAAY,IAAG,MAAK,IAAG,MAAK,IAAG,QAAO,IAAG,MAC3D,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAK,QAAO,MAAK,WAAW,OAAO;AAAA,gCACnC,QAAA,EAAK,QAAO,QAAO,WAAW,kBAAkB,UAAA,CAAW;AAAA,UAAA,EAAA,CAC9D,GACF,GACF;AAAA,UAID,kBAAkB,UAAa,CAAC,iBAC/B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,aAAa;AAAA,gBACvB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA;AAAA,UAIH,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,iBAAiB,WAAW,QAAQ,UAAU,MAAM;AAAA,gBACpD,WAAW,0BAA0B,iBAAiB;AAAA,gBACtD,oBAAoB,UAAU,YAAY;AAAA,gBAC1C,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,UAAA,IAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,YAAY;AAAA,gBACtB,YAAY,WAAW,QAAQ,UAAU,MAAM;AAAA,cAAA;AAAA,YACjD;AAAA,UAAA;AAAA,UAIH,aAAa,CAAC,iBACb;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,eAAe,KAAK,iBAAiB,KAAK,IAAI,mBAAmB,YAAY,YAAY,iBAAiB,cAAc;AAAA,cAAA;AAAA,cAGhI,UAAA;AAAA,gBAAA;AAAA,gBAAa;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,YAAY,cAAc;"}

package/dist/index22.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 ProgressCircle = react.forwardRef(
@@ -9,12 +10,17 @@ const ProgressCircle = react.forwardRef(
     value = 0,
     indeterminate = false,
     showValue = false,
-    size = 60,
+    size = "lg",
     thickness = 4,
     color = "#3b82f6",
     secondaryColor = "#e0e0e0",
     buffer,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "progress-circle",
@@ -22,17 +28,24 @@ const ProgressCircle = react.forwardRef(
     ariaLabel,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
     const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
-    const sizeValue = colors.parseSizeToNumber(size, 60);
+    const sizeValue = colors.parseSizeToNumber(size, 56);
     const thicknessValue = colors.parseSizeToNumber(thickness, 4);
     const radius = (sizeValue - thicknessValue * 2) / 2;
     const circumference = 2 * Math.PI * radius;
     const strokeDashoffset = circumference - clampedValue / 100 * circumference;
     const bufferDashoffset = clampedBuffer !== void 0 ? circumference - clampedBuffer / 100 * circumference : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    const animationDuration = colors.getAnimationDuration(speed);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -42,7 +55,9 @@ const ProgressCircle = react.forwardRef(
         style: {
           width: colors.normalizeSize(size),
           height: colors.normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "progressbar",
         "aria-label": progressLabel,
@@ -58,7 +73,10 @@ const ProgressCircle = react.forwardRef(
               width: sizeValue,
               height: sizeValue,
               viewBox: `0 0 ${sizeValue} ${sizeValue}`,
-              style: indeterminate ? { animation: `spinner-rotate ${animationDuration} linear infinite` } : void 0,
+              style: indeterminate ? {
+                animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+                animationDirection: reverse ? "reverse" : "normal"
+              } : void 0,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "circle",