premium-react-loaders 1.2.0 → 1.3.0

package/dist/index17.cjs

@@ -13,6 +13,9 @@ const SpinnerBars = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-bars",
@@ -20,9 +23,15 @@ const SpinnerBars = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = colors.parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2));
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -33,7 +42,9 @@ const SpinnerBars = react.forwardRef(
         className: classNames.cn("inline-flex items-center justify-center gap-1", className),
         style: {
           height: colors.normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,

package/dist/index17.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index17.cjs","sources":["../src/components/spinner/SpinnerBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerBarsProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * SpinnerBars - Vertical bars with wave animation\n *\n * A spinner with vertical bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <SpinnerBars size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerBars size=\"sm\" barCount={5} speed=\"fast\" reverse />\n * ```\n */\nexport const SpinnerBars = forwardRef<HTMLDivElement, SpinnerBarsProps>(\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 = 'spinner-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          <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: reverse ? `${(barCount - index - 1) * 0.1}s` : `${index * 0.1}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSpinnerBars.displayName = 'SpinnerBars';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","parseSizeToNumber","jsx","cn","normalizeSize"],"mappings":";;;;;;;AAeO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,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,UAAU,EAAE,IAAI,CAAC,GAAG,UACxCF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,GAAG,QAAQ;AAAA,cAClB,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW,cAAc,iBAAiB;AAAA,cAC1C,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,YAAY,cAAc;;"}
+{"version":3,"file":"index17.cjs","sources":["../src/components/spinner/SpinnerBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerBarsProps } from '../../types';\nimport {\n  cn,\n  normalizeSize,\n  parseSizeToNumber,\n  useReducedMotion,\n  getEffectiveDuration,\n  useLoaderVisibility,\n} from '../../utils';\n\n/**\n * SpinnerBars - Vertical bars with wave animation\n *\n * A spinner with vertical bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <SpinnerBars size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerBars size=\"sm\" barCount={5} speed=\"fast\" reverse />\n * ```\n */\nexport const SpinnerBars = forwardRef<HTMLDivElement, SpinnerBarsProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      barCount = 5,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'spinner-bars',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const barWidth = Math.floor(sizeValue / (barCount * 2));\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => (\n          <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: reverse ? `${(barCount - index - 1) * 0.1}s` : `${index * 0.1}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSpinnerBars.displayName = 'SpinnerBars';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","useLoaderVisibility","parseSizeToNumber","jsx","cn","normalizeSize"],"mappings":";;;;;;;AAsBO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAYC,OAAAA,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,EAAE;AAEtD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxCF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,GAAG,QAAQ;AAAA,cAClB,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW,cAAc,iBAAiB;AAAA,cAC1C,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,YAAY,cAAc;;"}

package/dist/index17.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const SpinnerBars = forwardRef(
@@ -11,6 +11,9 @@ const SpinnerBars = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-bars",
@@ -18,9 +21,15 @@ const SpinnerBars = forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2));
     return /* @__PURE__ */ jsx(
@@ -31,7 +40,9 @@ const SpinnerBars = forwardRef(
         className: cn("inline-flex items-center justify-center gap-1", className),
         style: {
           height: normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,

package/dist/index17.js.map

@@ -1 +1 @@
-{"version":3,"file":"index17.js","sources":["../src/components/spinner/SpinnerBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerBarsProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * SpinnerBars - Vertical bars with wave animation\n *\n * A spinner with vertical bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <SpinnerBars size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerBars size=\"sm\" barCount={5} speed=\"fast\" reverse />\n * ```\n */\nexport const SpinnerBars = forwardRef<HTMLDivElement, SpinnerBarsProps>(\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 = 'spinner-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          <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: reverse ? `${(barCount - index - 1) * 0.1}s` : `${index * 0.1}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSpinnerBars.displayName = 'SpinnerBars';\n"],"names":[],"mappings":";;;;;AAeO,MAAM,cAAc;AAAA,EACzB,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,UAAU,EAAE,IAAI,CAAC,GAAG,UACxC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,GAAG,QAAQ;AAAA,cAClB,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW,cAAc,iBAAiB;AAAA,cAC1C,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,YAAY,cAAc;"}
+{"version":3,"file":"index17.js","sources":["../src/components/spinner/SpinnerBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerBarsProps } from '../../types';\nimport {\n  cn,\n  normalizeSize,\n  parseSizeToNumber,\n  useReducedMotion,\n  getEffectiveDuration,\n  useLoaderVisibility,\n} from '../../utils';\n\n/**\n * SpinnerBars - Vertical bars with wave animation\n *\n * A spinner with vertical bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <SpinnerBars size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerBars size=\"sm\" barCount={5} speed=\"fast\" reverse />\n * ```\n */\nexport const SpinnerBars = forwardRef<HTMLDivElement, SpinnerBarsProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      barCount = 5,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'spinner-bars',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const barWidth = Math.floor(sizeValue / (barCount * 2));\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => (\n          <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: reverse ? `${(barCount - index - 1) * 0.1}s` : `${index * 0.1}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSpinnerBars.displayName = 'SpinnerBars';\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAY,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,GAAG,QAAQ;AAAA,cAClB,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW,cAAc,iBAAiB;AAAA,cAC1C,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,YAAY,cAAc;"}

package/dist/index18.cjs

@@ -13,6 +13,9 @@ const SpinnerGrid = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-grid",
@@ -20,9 +23,15 @@ const SpinnerGrid = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = colors.parseSizeToNumber(size, 40);
     const cellSize = Math.floor(sizeValue / gridSize) - 2;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -31,7 +40,11 @@ const SpinnerGrid = 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",
@@ -49,7 +62,7 @@ const SpinnerGrid = react.forwardRef(
               const row = Math.floor(index / gridSize);
               const col = index % gridSize;
               const maxDelay = (gridSize - 1) * 2;
-              const delay = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;
+              const delay2 = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -59,7 +72,7 @@ const SpinnerGrid = react.forwardRef(
                     height: `${cellSize}px`,
                     backgroundColor: color,
                     animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,
-                    animationDelay: `${delay}s`
+                    animationDelay: `${delay2}s`
                   }
                 },
                 index

package/dist/index18.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index18.cjs","sources":["../src/components/spinner/SpinnerGrid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerGridProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * SpinnerGrid - Grid of fading squares\n *\n * A spinner with a grid of squares that fade in and out in a pattern.\n *\n * @example\n * ```tsx\n * <SpinnerGrid size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerGrid size=\"md\" gridSize={4} reverse />\n * ```\n */\nexport const SpinnerGrid = forwardRef<HTMLDivElement, SpinnerGridProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      gridSize = 3,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      className,\n      style,\n      testId = 'spinner-grid',\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 cellSize = Math.floor(sizeValue / gridSize) - 2;\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=\"grid gap-0.5\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            gridTemplateColumns: `repeat(${gridSize}, 1fr)`,\n          }}\n        >\n          {Array.from({ length: gridSize * gridSize }).map((_, index) => {\n            const row = Math.floor(index / gridSize);\n            const col = index % gridSize;\n            const maxDelay = (gridSize - 1) * 2;\n            const delay = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;\n\n            return (\n              <div\n                key={index}\n                className=\"rounded-sm\"\n                style={{\n                  width: `${cellSize}px`,\n                  height: `${cellSize}px`,\n                  backgroundColor: color,\n                  animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,\n                  animationDelay: `${delay}s`,\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerGrid.displayName = 'SpinnerGrid';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","parseSizeToNumber","jsx","cn","normalizeSize"],"mappings":";;;;;;;AAeO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,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,YAAY,QAAQ,IAAI;AAEpD,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,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,qBAAqB,UAAU,QAAQ;AAAA,YAAA;AAAA,YAGxC,UAAA,MAAM,KAAK,EAAE,QAAQ,WAAW,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAC7D,oBAAM,MAAM,KAAK,MAAM,QAAQ,QAAQ;AACvC,oBAAM,MAAM,QAAQ;AACpB,oBAAM,YAAY,WAAW,KAAK;AAClC,oBAAM,QAAQ,WAAW,YAAY,MAAM,QAAQ,OAAO,MAAM,OAAO;AAEvE,qBACEF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,GAAG,QAAQ;AAAA,oBAClB,QAAQ,GAAG,QAAQ;AAAA,oBACnB,iBAAiB;AAAA,oBACjB,WAAW,cAAc,iBAAiB;AAAA,oBAC1C,gBAAgB,GAAG,KAAK;AAAA,kBAAA;AAAA,gBAC1B;AAAA,gBARK;AAAA,cAAA;AAAA,YAWX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"index18.cjs","sources":["../src/components/spinner/SpinnerGrid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerGridProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * SpinnerGrid - Grid of fading squares\n *\n * A spinner with a grid of squares that fade in and out in a pattern.\n *\n * @example\n * ```tsx\n * <SpinnerGrid size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerGrid size=\"md\" gridSize={4} reverse />\n * ```\n */\nexport const SpinnerGrid = forwardRef<HTMLDivElement, SpinnerGridProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      gridSize = 3,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'spinner-grid',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const cellSize = Math.floor(sizeValue / gridSize) - 2;\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=\"grid gap-0.5\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            gridTemplateColumns: `repeat(${gridSize}, 1fr)`,\n          }}\n        >\n          {Array.from({ length: gridSize * gridSize }).map((_, index) => {\n            const row = Math.floor(index / gridSize);\n            const col = index % gridSize;\n            const maxDelay = (gridSize - 1) * 2;\n            const delay = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;\n\n            return (\n              <div\n                key={index}\n                className=\"rounded-sm\"\n                style={{\n                  width: `${cellSize}px`,\n                  height: `${cellSize}px`,\n                  backgroundColor: color,\n                  animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,\n                  animationDelay: `${delay}s`,\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerGrid.displayName = 'SpinnerGrid';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","useLoaderVisibility","parseSizeToNumber","jsx","cn","normalizeSize","delay"],"mappings":";;;;;;;AAeO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAYC,OAAAA,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,YAAY,QAAQ,IAAI;AAEpD,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,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,qBAAqB,UAAU,QAAQ;AAAA,YAAA;AAAA,YAGxC,UAAA,MAAM,KAAK,EAAE,QAAQ,WAAW,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAC7D,oBAAM,MAAM,KAAK,MAAM,QAAQ,QAAQ;AACvC,oBAAM,MAAM,QAAQ;AACpB,oBAAM,YAAY,WAAW,KAAK;AAClC,oBAAMC,SAAQ,WAAW,YAAY,MAAM,QAAQ,OAAO,MAAM,OAAO;AAEvE,qBACEH,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,GAAG,QAAQ;AAAA,oBAClB,QAAQ,GAAG,QAAQ;AAAA,oBACnB,iBAAiB;AAAA,oBACjB,WAAW,cAAc,iBAAiB;AAAA,oBAC1C,gBAAgB,GAAGG,MAAK;AAAA,kBAAA;AAAA,gBAC1B;AAAA,gBARK;AAAA,cAAA;AAAA,YAWX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}

package/dist/index18.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
 import { cn } from "./index3.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 const SpinnerGrid = forwardRef(
@@ -11,6 +11,9 @@ const SpinnerGrid = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-grid",
@@ -18,9 +21,15 @@ const SpinnerGrid = forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = parseSizeToNumber(size, 40);
     const cellSize = Math.floor(sizeValue / gridSize) - 2;
     return /* @__PURE__ */ jsx(
@@ -29,7 +38,11 @@ const SpinnerGrid = 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",
@@ -47,7 +60,7 @@ const SpinnerGrid = forwardRef(
               const row = Math.floor(index / gridSize);
               const col = index % gridSize;
               const maxDelay = (gridSize - 1) * 2;
-              const delay = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;
+              const delay2 = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;
               return /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -57,7 +70,7 @@ const SpinnerGrid = forwardRef(
                     height: `${cellSize}px`,
                     backgroundColor: color,
                     animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,
-                    animationDelay: `${delay}s`
+                    animationDelay: `${delay2}s`
                   }
                 },
                 index

package/dist/index18.js.map

@@ -1 +1 @@
-{"version":3,"file":"index18.js","sources":["../src/components/spinner/SpinnerGrid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerGridProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * SpinnerGrid - Grid of fading squares\n *\n * A spinner with a grid of squares that fade in and out in a pattern.\n *\n * @example\n * ```tsx\n * <SpinnerGrid size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerGrid size=\"md\" gridSize={4} reverse />\n * ```\n */\nexport const SpinnerGrid = forwardRef<HTMLDivElement, SpinnerGridProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      gridSize = 3,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      className,\n      style,\n      testId = 'spinner-grid',\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 cellSize = Math.floor(sizeValue / gridSize) - 2;\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=\"grid gap-0.5\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            gridTemplateColumns: `repeat(${gridSize}, 1fr)`,\n          }}\n        >\n          {Array.from({ length: gridSize * gridSize }).map((_, index) => {\n            const row = Math.floor(index / gridSize);\n            const col = index % gridSize;\n            const maxDelay = (gridSize - 1) * 2;\n            const delay = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;\n\n            return (\n              <div\n                key={index}\n                className=\"rounded-sm\"\n                style={{\n                  width: `${cellSize}px`,\n                  height: `${cellSize}px`,\n                  backgroundColor: color,\n                  animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,\n                  animationDelay: `${delay}s`,\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerGrid.displayName = 'SpinnerGrid';\n"],"names":[],"mappings":";;;;;AAeO,MAAM,cAAc;AAAA,EACzB,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,YAAY,QAAQ,IAAI;AAEpD,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,cAAc,IAAI;AAAA,cACzB,QAAQ,cAAc,IAAI;AAAA,cAC1B,qBAAqB,UAAU,QAAQ;AAAA,YAAA;AAAA,YAGxC,UAAA,MAAM,KAAK,EAAE,QAAQ,WAAW,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAC7D,oBAAM,MAAM,KAAK,MAAM,QAAQ,QAAQ;AACvC,oBAAM,MAAM,QAAQ;AACpB,oBAAM,YAAY,WAAW,KAAK;AAClC,oBAAM,QAAQ,WAAW,YAAY,MAAM,QAAQ,OAAO,MAAM,OAAO;AAEvE,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,GAAG,QAAQ;AAAA,oBAClB,QAAQ,GAAG,QAAQ;AAAA,oBACnB,iBAAiB;AAAA,oBACjB,WAAW,cAAc,iBAAiB;AAAA,oBAC1C,gBAAgB,GAAG,KAAK;AAAA,kBAAA;AAAA,gBAC1B;AAAA,gBARK;AAAA,cAAA;AAAA,YAWX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"index18.js","sources":["../src/components/spinner/SpinnerGrid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerGridProps } from '../../types';\nimport { cn, normalizeSize, parseSizeToNumber, useReducedMotion, getEffectiveDuration, useLoaderVisibility } from '../../utils';\n\n/**\n * SpinnerGrid - Grid of fading squares\n *\n * A spinner with a grid of squares that fade in and out in a pattern.\n *\n * @example\n * ```tsx\n * <SpinnerGrid size=\"lg\" color=\"#3b82f6\" />\n * <SpinnerGrid size=\"md\" gridSize={4} reverse />\n * ```\n */\nexport const SpinnerGrid = forwardRef<HTMLDivElement, SpinnerGridProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      gridSize = 3,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'spinner-grid',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const cellSize = Math.floor(sizeValue / gridSize) - 2;\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=\"grid gap-0.5\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            gridTemplateColumns: `repeat(${gridSize}, 1fr)`,\n          }}\n        >\n          {Array.from({ length: gridSize * gridSize }).map((_, index) => {\n            const row = Math.floor(index / gridSize);\n            const col = index % gridSize;\n            const maxDelay = (gridSize - 1) * 2;\n            const delay = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;\n\n            return (\n              <div\n                key={index}\n                className=\"rounded-sm\"\n                style={{\n                  width: `${cellSize}px`,\n                  height: `${cellSize}px`,\n                  backgroundColor: color,\n                  animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,\n                  animationDelay: `${delay}s`,\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerGrid.displayName = 'SpinnerGrid';\n"],"names":["delay"],"mappings":";;;;;AAeO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AACnG,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAY,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,YAAY,QAAQ,IAAI;AAEpD,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,cAAc,IAAI;AAAA,cACzB,QAAQ,cAAc,IAAI;AAAA,cAC1B,qBAAqB,UAAU,QAAQ;AAAA,YAAA;AAAA,YAGxC,UAAA,MAAM,KAAK,EAAE,QAAQ,WAAW,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAC7D,oBAAM,MAAM,KAAK,MAAM,QAAQ,QAAQ;AACvC,oBAAM,MAAM,QAAQ;AACpB,oBAAM,YAAY,WAAW,KAAK;AAClC,oBAAMA,SAAQ,WAAW,YAAY,MAAM,QAAQ,OAAO,MAAM,OAAO;AAEvE,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,GAAG,QAAQ;AAAA,oBAClB,QAAQ,GAAG,QAAQ;AAAA,oBACnB,iBAAiB;AAAA,oBACjB,WAAW,cAAc,iBAAiB;AAAA,oBAC1C,gBAAgB,GAAGA,MAAK;AAAA,kBAAA;AAAA,gBAC1B;AAAA,gBARK;AAAA,cAAA;AAAA,YAWX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}

package/dist/index19.cjs

@@ -14,6 +14,9 @@ const SpinnerWave = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-wave",
@@ -21,9 +24,15 @@ const SpinnerWave = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = colors.normalizeSize(size);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -31,7 +40,11 @@ const SpinnerWave = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",

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

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, useReducedMotion, getEffectiveDuration } 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      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 prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\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 ${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;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,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,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;"}
+{"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

@@ -14,6 +14,9 @@ const SpinnerPulse = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-pulse",
@@ -21,9 +24,15 @@ const SpinnerPulse = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = colors.normalizeSize(size);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -31,7 +40,11 @@ const SpinnerPulse = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",

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

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, useReducedMotion, getEffectiveDuration } 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      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 prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\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 ${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;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,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,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;"}
+{"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

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