premium-react-loaders 1.0.2 → 1.2.0

package/dist/index24.js.map

@@ -1 +1 @@
-{"version":3,"file":"index24.js","sources":["../src/components/overlay/LoaderOverlay.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { LoaderOverlayProps } from '../../types';\nimport { cn } from '../../utils';\n\n/**\n * LoaderOverlay - Overlay wrapper for displaying loaders over content\n *\n * A flexible overlay component that displays a loader over content during loading states.\n * Supports both full-screen and container-relative positioning.\n *\n * @example\n * ```tsx\n * // Full screen overlay\n * <LoaderOverlay loading={isLoading} loader={<SpinnerCircle />}>\n *   <YourContent />\n * </LoaderOverlay>\n *\n * // Container overlay with custom backdrop\n * <LoaderOverlay\n *   loading={isLoading}\n *   loader={<SpinnerRing />}\n *   position=\"absolute\"\n *   backdropOpacity={0.7}\n *   blur\n * >\n *   <YourContent />\n * </LoaderOverlay>\n * ```\n */\nexport const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(\n  (\n    {\n      loading = false,\n      loader,\n      children,\n      position = 'fixed',\n      backdropOpacity = 0.5,\n      backdropColor = '#000000',\n      blur = false,\n      className,\n      style,\n      testId = 'loader-overlay',\n      ariaLabel = 'Loading content...',\n      zIndex = 9999,\n      ...rest\n    },\n    ref\n  ) => {\n    const backdropStyles = {\n      backgroundColor: backdropColor,\n      opacity: backdropOpacity,\n      backdropFilter: blur ? 'blur(4px)' : undefined,\n      WebkitBackdropFilter: blur ? 'blur(4px)' : undefined,\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n\n        {loading && (\n          <div\n            className={cn(\n              'inset-0 flex items-center justify-center',\n              position === 'fixed' ? 'fixed' : 'absolute'\n            )}\n            style={{\n              zIndex,\n            }}\n            role=\"status\"\n            aria-label={ariaLabel}\n            aria-busy=\"true\"\n          >\n            {/* Backdrop */}\n            <div\n              className=\"absolute inset-0\"\n              style={backdropStyles}\n              aria-hidden=\"true\"\n            />\n\n            {/* Loader */}\n            <div className=\"relative z-10\">{loader}</div>\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nLoaderOverlay.displayName = 'LoaderOverlay';\n"],"names":[],"mappings":";;;AA6BO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB;AAAA,MACrB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,gBAAgB,OAAO,cAAc;AAAA,MACrC,sBAAsB,OAAO,cAAc;AAAA,IAAA;AAG7C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UAEA,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,aAAa,UAAU,UAAU;AAAA,cAAA;AAAA,cAEnC,OAAO;AAAA,gBACL;AAAA,cAAA;AAAA,cAEF,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,aAAU;AAAA,cAGV,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,oBACP,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAId,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,cAAc,cAAc;"}
+{"version":3,"file":"index24.js","sources":["../src/components/progress/ProgressSteps.tsx"],"sourcesContent":["import { forwardRef, Fragment } from 'react';\nimport { ProgressStepsProps } from '../../types';\nimport { cn } from '../../utils';\n\n/**\n * ProgressSteps - Multi-step progress indicator\n *\n * A step-by-step progress indicator for wizards, forms, and workflows.\n *\n * @example\n * ```tsx\n * <ProgressSteps steps={4} currentStep={1} />\n * <ProgressSteps steps={5} currentStep={2} labels={['Info', 'Review', 'Payment', 'Confirm', 'Done']} />\n * <ProgressSteps steps={3} currentStep={1} orientation=\"vertical\" />\n * <ProgressSteps steps={4} currentStep={2} connector=\"none\" />\n * ```\n */\nexport const ProgressSteps = forwardRef<HTMLDivElement, ProgressStepsProps>(\n  (\n    {\n      steps,\n      currentStep,\n      labels,\n      showNumbers = true,\n      orientation = 'horizontal',\n      connector = 'line',\n      color = '#3b82f6',\n      completedColor,\n      activeColor,\n      inactiveColor = '#e0e0e0',\n      className,\n      style,\n      testId = 'progress-steps',\n      visible = true,\n      ariaLabel = 'Progress steps',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const completed = completedColor || color;\n    const active = activeColor || color;\n\n    const getStepStatus = (index: number): 'completed' | 'active' | 'inactive' => {\n      if (index < currentStep) return 'completed';\n      if (index === currentStep) return 'active';\n      return 'inactive';\n    };\n\n    const getStepColor = (status: 'completed' | 'active' | 'inactive'): string => {\n      if (status === 'completed') return completed;\n      if (status === 'active') return active;\n      return inactiveColor;\n    };\n\n    const getConnectorColor = (index: number): string => {\n      return index < currentStep ? completed : inactiveColor;\n    };\n\n    const isHorizontal = orientation === 'horizontal';\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn(\n          'flex',\n          isHorizontal ? 'flex-row items-center w-full' : 'flex-col items-start',\n          className\n        )}\n        style={style}\n        role=\"progressbar\"\n        aria-label={ariaLabel}\n        aria-valuenow={currentStep}\n        aria-valuemin={0}\n        aria-valuemax={steps - 1}\n        {...rest}\n      >\n        {Array.from({ length: steps }).map((_, index) => {\n          const status = getStepStatus(index);\n          const stepColor = getStepColor(status);\n          const showConnector = index < steps - 1 && connector === 'line';\n\n          return (\n            <Fragment key={index}>\n              {/* Step */}\n              <div\n                className={cn(\n                  'flex items-center',\n                  isHorizontal ? 'flex-col' : 'flex-row gap-3'\n                )}\n              >\n                {/* Step Circle */}\n                <div\n                  className=\"rounded-full flex items-center justify-center font-medium text-sm transition-colors\"\n                  style={{\n                    width: '2rem',\n                    height: '2rem',\n                    backgroundColor: stepColor,\n                    color: '#ffffff',\n                  }}\n                >\n                  {showNumbers && <span>{index + 1}</span>}\n                </div>\n\n                {/* Step Label */}\n                {labels?.[index] && (\n                  <span\n                    className={cn(\n                      'text-xs mt-1 transition-colors',\n                      isHorizontal ? 'text-center' : 'text-left'\n                    )}\n                    style={{\n                      color: status === 'inactive' ? '#9ca3af' : '#374151',\n                      maxWidth: isHorizontal ? '80px' : 'none',\n                    }}\n                  >\n                    {labels[index]}\n                  </span>\n                )}\n              </div>\n\n              {/* Connector */}\n              {showConnector && (\n                <div\n                  className=\"transition-colors\"\n                  style={{\n                    backgroundColor: getConnectorColor(index),\n                    ...(isHorizontal\n                      ? {\n                          height: '2px',\n                          flex: 1,\n                          marginLeft: '4px',\n                          marginRight: '4px',\n                        }\n                      : {\n                          width: '2px',\n                          height: '32px',\n                          marginLeft: '15px',\n                          marginTop: labels?.[index] ? '4px' : '0',\n                          marginBottom: '4px',\n                        }),\n                  }}\n                />\n              )}\n            </Fragment>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nProgressSteps.displayName = 'ProgressSteps';\n"],"names":[],"mappings":";;;AAiBO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,kBAAkB;AACpC,UAAM,SAAS,eAAe;AAE9B,UAAM,gBAAgB,CAAC,UAAuD;AAC5E,UAAI,QAAQ,YAAa,QAAO;AAChC,UAAI,UAAU,YAAa,QAAO;AAClC,aAAO;AAAA,IACT;AAEA,UAAM,eAAe,CAAC,WAAwD;AAC5E,UAAI,WAAW,YAAa,QAAO;AACnC,UAAI,WAAW,SAAU,QAAO;AAChC,aAAO;AAAA,IACT;AAEA,UAAM,oBAAoB,CAAC,UAA0B;AACnD,aAAO,QAAQ,cAAc,YAAY;AAAA,IAC3C;AAEA,UAAM,eAAe,gBAAgB;AAErC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA,eAAe,iCAAiC;AAAA,UAChD;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe,QAAQ;AAAA,QACtB,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAC/C,gBAAM,SAAS,cAAc,KAAK;AAClC,gBAAM,YAAY,aAAa,MAAM;AACrC,gBAAM,gBAAgB,QAAQ,QAAQ,KAAK,cAAc;AAEzD,sCACG,UAAA,EAEC,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,eAAe,aAAa;AAAA,gBAAA;AAAA,gBAI9B,UAAA;AAAA,kBAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO;AAAA,wBACL,OAAO;AAAA,wBACP,QAAQ;AAAA,wBACR,iBAAiB;AAAA,wBACjB,OAAO;AAAA,sBAAA;AAAA,sBAGR,UAAA,eAAe,oBAAC,QAAA,EAAM,UAAA,QAAQ,EAAA,CAAE;AAAA,oBAAA;AAAA,kBAAA;AAAA,mBAIlC,iCAAS,WACR;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAW;AAAA,wBACT;AAAA,wBACA,eAAe,gBAAgB;AAAA,sBAAA;AAAA,sBAEjC,OAAO;AAAA,wBACL,OAAO,WAAW,aAAa,YAAY;AAAA,wBAC3C,UAAU,eAAe,SAAS;AAAA,sBAAA;AAAA,sBAGnC,iBAAO,KAAK;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACf;AAAA,cAAA;AAAA,YAAA;AAAA,YAKH,iBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,iBAAiB,kBAAkB,KAAK;AAAA,kBACxC,GAAI,eACA;AAAA,oBACE,QAAQ;AAAA,oBACR,MAAM;AAAA,oBACN,YAAY;AAAA,oBACZ,aAAa;AAAA,kBAAA,IAEf;AAAA,oBACE,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,YAAY;AAAA,oBACZ,YAAW,iCAAS,UAAS,QAAQ;AAAA,oBACrC,cAAc;AAAA,kBAAA;AAAA,gBAChB;AAAA,cACN;AAAA,YAAA;AAAA,UACF,EAAA,GA3DW,KA6Df;AAAA,QAEJ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,cAAc,cAAc;"}

package/dist/index25.cjs

@@ -1,18 +1,61 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-exports.clsx = clsx;
-exports.default = clsx;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index31.cjs");
+const colors = require("./index4.cjs");
+const classNames = require("./index3.cjs");
+const PulseDots = react.forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    dotCount = 3,
+    dotSize = 10,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    className,
+    style,
+    testId = "pulse-dots",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center gap-2", className),
+        style: {
+          height: colors.normalizeSize(size),
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: dotCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "rounded-full",
+            style: {
+              width: colors.normalizeSize(dotSize),
+              height: colors.normalizeSize(dotSize),
+              backgroundColor: color,
+              animation: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+PulseDots.displayName = "PulseDots";
+exports.PulseDots = PulseDots;
 //# sourceMappingURL=index25.cjs.map

package/dist/index25.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index25.cjs","sources":["../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":[],"mappings":";;AAAA,SAAS,EAAE,GAAE;AAAC,MAAI,GAAE,GAAE,IAAE;AAAG,MAAG,YAAU,OAAO,KAAG,YAAU,OAAO,EAAE,MAAG;AAAA,WAAU,YAAU,OAAO,EAAE,KAAG,MAAM,QAAQ,CAAC,GAAE;AAAC,QAAI,IAAE,EAAE;AAAO,SAAI,IAAE,GAAE,IAAE,GAAE,IAAI,GAAE,CAAC,MAAI,IAAE,EAAE,EAAE,CAAC,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAA,EAAE,MAAM,MAAI,KAAK,EAAE,GAAE,CAAC,MAAI,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAQ,SAAS,OAAM;AAAC,WAAQ,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE,IAAI,EAAC,IAAE,UAAU,CAAC,OAAK,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index25.cjs","sources":["../src/components/pulse/PulseDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseDotsProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * PulseDots - Bouncing dots loader\n *\n * A loader with bouncing dots that scale and fade in a sequence.\n *\n * @example\n * ```tsx\n * <PulseDots size=\"lg\" color=\"#3b82f6\" />\n * <PulseDots size=\"sm\" dotCount={5} speed=\"fast\" reverse />\n * ```\n */\nexport const PulseDots = forwardRef<HTMLDivElement, PulseDotsProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      dotCount = 3,\n      dotSize = 10,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      className,\n      style,\n      testId = 'pulse-dots',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-2', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: dotCount }).map((_, index) => (\n          <div\n            key={index}\n            className=\"rounded-full\"\n            style={{\n              width: normalizeSize(dotSize),\n              height: normalizeSize(dotSize),\n              backgroundColor: color,\n              animation: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,\n              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nPulseDots.displayName = 'PulseDots';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;;AAeO,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;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,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxCF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,OAAO;AAAA,cAC5B,QAAQA,OAAAA,cAAc,OAAO;AAAA,cAC7B,iBAAiB;AAAA,cACjB,WAAW,gBAAgB,iBAAiB;AAAA,cAC5C,gBAAgB,UAAU,IAAI,WAAW,QAAQ,KAAK,IAAI,MAAM,GAAG,QAAQ,IAAI;AAAA,YAAA;AAAA,UACjF;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;;"}

package/dist/index25.js

@@ -1,18 +1,61 @@
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { normalizeSize } from "./index4.js";
+import { cn } from "./index3.js";
+const PulseDots = forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    dotCount = 3,
+    dotSize = 10,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    className,
+    style,
+    testId = "pulse-dots",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center gap-2", className),
+        style: {
+          height: normalizeSize(size),
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: dotCount }).map((_, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rounded-full",
+            style: {
+              width: normalizeSize(dotSize),
+              height: normalizeSize(dotSize),
+              backgroundColor: color,
+              animation: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+PulseDots.displayName = "PulseDots";
 export {
-  clsx,
-  clsx as default
+  PulseDots
 };
 //# sourceMappingURL=index25.js.map

package/dist/index25.js.map

@@ -1 +1 @@
-{"version":3,"file":"index25.js","sources":["../node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":[],"mappings":"AAAA,SAAS,EAAE,GAAE;AAAC,MAAI,GAAE,GAAE,IAAE;AAAG,MAAG,YAAU,OAAO,KAAG,YAAU,OAAO,EAAE,MAAG;AAAA,WAAU,YAAU,OAAO,EAAE,KAAG,MAAM,QAAQ,CAAC,GAAE;AAAC,QAAI,IAAE,EAAE;AAAO,SAAI,IAAE,GAAE,IAAE,GAAE,IAAI,GAAE,CAAC,MAAI,IAAE,EAAE,EAAE,CAAC,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAA,EAAE,MAAM,MAAI,KAAK,EAAE,GAAE,CAAC,MAAI,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAQ,SAAS,OAAM;AAAC,WAAQ,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE,IAAI,EAAC,IAAE,UAAU,CAAC,OAAK,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;","x_google_ignoreList":[0]}
+{"version":3,"file":"index25.js","sources":["../src/components/pulse/PulseDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { PulseDotsProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration } from '../../utils';\n\n/**\n * PulseDots - Bouncing dots loader\n *\n * A loader with bouncing dots that scale and fade in a sequence.\n *\n * @example\n * ```tsx\n * <PulseDots size=\"lg\" color=\"#3b82f6\" />\n * <PulseDots size=\"sm\" dotCount={5} speed=\"fast\" reverse />\n * ```\n */\nexport const PulseDots = forwardRef<HTMLDivElement, PulseDotsProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      dotCount = 3,\n      dotSize = 10,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\n      className,\n      style,\n      testId = 'pulse-dots',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-2', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: dotCount }).map((_, index) => (\n          <div\n            key={index}\n            className=\"rounded-full\"\n            style={{\n              width: normalizeSize(dotSize),\n              height: normalizeSize(dotSize),\n              backgroundColor: color,\n              animation: `pulse-bounce ${effectiveDuration} ease-in-out infinite`,\n              animationDelay: reverse ? `${(dotCount - index - 1) * 0.15}s` : `${index * 0.15}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nPulseDots.displayName = 'PulseDots';\n"],"names":[],"mappings":";;;;;AAeO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,OAAO;AAAA,cAC5B,QAAQ,cAAc,OAAO;AAAA,cAC7B,iBAAiB;AAAA,cACjB,WAAW,gBAAgB,iBAAiB;AAAA,cAC5C,gBAAgB,UAAU,IAAI,WAAW,QAAQ,KAAK,IAAI,MAAM,GAAG,QAAQ,IAAI;AAAA,YAAA;AAAA,UACjF;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,UAAU,cAAc;"}

package/dist/index26.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index31.cjs");
+const colors = require("./index4.cjs");
+const classNames = require("./index3.cjs");
+const PulseWave = react.forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    barCount = 5,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    className,
+    style,
+    testId = "pulse-wave",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const sizeValue = colors.parseSizeToNumber(size, 40);
+    const barWidth = Math.floor(sizeValue / (barCount * 2.5));
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-end justify-center gap-1", className),
+        style: {
+          height: colors.normalizeSize(size),
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: barCount }).map((_, index) => {
+          const delay = reverse ? (barCount - index - 1) / barCount * 0.5 : index / barCount * 0.5;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "rounded-sm",
+              style: {
+                width: `${barWidth}px`,
+                height: "100%",
+                backgroundColor: color,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+                animationDelay: `${delay}s`,
+                transformOrigin: "bottom"
+              }
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+PulseWave.displayName = "PulseWave";
+exports.PulseWave = PulseWave;
+//# sourceMappingURL=index26.cjs.map

package/dist/index26.cjs.map

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

package/dist/index26.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { normalizeSize, parseSizeToNumber } from "./index4.js";
+import { cn } from "./index3.js";
+const PulseWave = forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    barCount = 5,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    className,
+    style,
+    testId = "pulse-wave",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const sizeValue = parseSizeToNumber(size, 40);
+    const barWidth = Math.floor(sizeValue / (barCount * 2.5));
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-end justify-center gap-1", className),
+        style: {
+          height: normalizeSize(size),
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: barCount }).map((_, index) => {
+          const delay = reverse ? (barCount - index - 1) / barCount * 0.5 : index / barCount * 0.5;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "rounded-sm",
+              style: {
+                width: `${barWidth}px`,
+                height: "100%",
+                backgroundColor: color,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+                animationDelay: `${delay}s`,
+                transformOrigin: "bottom"
+              }
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+PulseWave.displayName = "PulseWave";
+export {
+  PulseWave
+};
+//# sourceMappingURL=index26.js.map

package/dist/index26.js.map

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

package/dist/index27.cjs

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index31.cjs");
+const colors = require("./index4.cjs");
+const classNames = require("./index3.cjs");
+const PulseBars = react.forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    barCount = 4,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    className,
+    style,
+    testId = "pulse-bars",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const sizeValue = colors.parseSizeToNumber(size, 40);
+    const barWidth = Math.floor(sizeValue / (barCount * 2));
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center gap-1", className),
+        style: {
+          height: colors.normalizeSize(size),
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: barCount }).map((_, index) => {
+          const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];
+          const reversedDelays = [...delays].reverse();
+          const delay = reverse ? reversedDelays[index % reversedDelays.length] : delays[index % delays.length];
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "rounded-sm",
+              style: {
+                width: `${barWidth}px`,
+                minHeight: "30%",
+                height: "100%",
+                backgroundColor: color,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+                animationDelay: `${delay}s`,
+                transformOrigin: "center"
+              }
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+PulseBars.displayName = "PulseBars";
+exports.PulseBars = PulseBars;
+//# sourceMappingURL=index27.cjs.map

package/dist/index27.cjs.map

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

package/dist/index27.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { normalizeSize, parseSizeToNumber } from "./index4.js";
+import { cn } from "./index3.js";
+const PulseBars = forwardRef(
+  ({
+    size = "md",
+    color = "#3b82f6",
+    barCount = 4,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    className,
+    style,
+    testId = "pulse-bars",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const sizeValue = parseSizeToNumber(size, 40);
+    const barWidth = Math.floor(sizeValue / (barCount * 2));
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center gap-1", className),
+        style: {
+          height: normalizeSize(size),
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: barCount }).map((_, index) => {
+          const delays = [0, 0.2, 0.4, 0.1, 0.3, 0.5];
+          const reversedDelays = [...delays].reverse();
+          const delay = reverse ? reversedDelays[index % reversedDelays.length] : delays[index % delays.length];
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "rounded-sm",
+              style: {
+                width: `${barWidth}px`,
+                minHeight: "30%",
+                height: "100%",
+                backgroundColor: color,
+                animation: `pulse-wave ${effectiveDuration} ease-in-out infinite`,
+                animationDelay: `${delay}s`,
+                transformOrigin: "center"
+              }
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+PulseBars.displayName = "PulseBars";
+export {
+  PulseBars
+};
+//# sourceMappingURL=index27.js.map

package/dist/index27.js.map

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

package/dist/index28.cjs

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index31.cjs");
+const colors = require("./index4.cjs");
+const classNames = require("./index3.cjs");
+const TypingIndicator = react.forwardRef(
+  ({
+    size,
+    color = "#3b82f6",
+    dotCount = 3,
+    dotSize = 8,
+    gap = 4,
+    variant = "bounce",
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    className,
+    style,
+    testId = "typing-indicator",
+    visible = true,
+    ariaLabel = "Typing...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const gapValue = colors.normalizeSize(gap);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center", className),
+        style: {
+          gap: gapValue,
+          height: size ? colors.normalizeSize(size) : "auto",
+          ...style
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: dotCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "rounded-full",
+            style: {
+              width: colors.normalizeSize(dotSize),
+              height: colors.normalizeSize(dotSize),
+              backgroundColor: color,
+              animation: `typing-${variant} ${effectiveDuration} ease-in-out infinite`,
+              animationDelay: reverse ? `${(dotCount - index - 1) * 0.2}s` : `${index * 0.2}s`
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+TypingIndicator.displayName = "TypingIndicator";
+exports.TypingIndicator = TypingIndicator;
+//# sourceMappingURL=index28.cjs.map

package/dist/index28.cjs.map

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