premium-react-loaders 1.0.1 → 1.1.0

package/dist/index18.js

@@ -1,81 +1,71 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
-const ProgressBar = forwardRef(
+import { normalizeSize, getAnimationDuration, parseSizeToNumber } from "./index4.js";
+const SpinnerGrid = forwardRef(
   ({
-    value = 0,
-    indeterminate = false,
-    showValue = false,
-    height = "0.5rem",
+    size = 40,
     color = "#3b82f6",
-    secondaryColor = "#e0e0e0",
+    gridSize = 3,
+    speed = "normal",
     className,
     style,
-    testId = "progress-bar",
+    testId = "spinner-grid",
     visible = true,
-    ariaLabel,
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const clampedValue = Math.min(100, Math.max(0, value));
-    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    return /* @__PURE__ */ jsxs(
+    const sizeValue = parseSizeToNumber(size, 40);
+    const cellSize = Math.floor(sizeValue / gridSize) - 2;
+    const animationDuration = getAnimationDuration(speed);
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("relative w-full overflow-hidden rounded-full", className),
-        style: {
-          height: normalizeSize(height),
-          backgroundColor: secondaryColor,
-          ...style
-        },
-        role: "progressbar",
-        "aria-label": progressLabel,
-        "aria-valuenow": indeterminate ? void 0 : clampedValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
+        className: cn("inline-flex items-center justify-center", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
         ...rest,
-        children: [
-          indeterminate ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute h-full rounded-full",
-              style: {
-                backgroundColor: color,
-                animation: "progress-indeterminate 1.5s ease-in-out infinite",
-                width: "40%"
-              }
-            }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "h-full rounded-full transition-all duration-300 ease-in-out",
-              style: {
-                width: `${clampedValue}%`,
-                backgroundColor: color
-              }
-            }
-          ),
-          showValue && !indeterminate && /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: "absolute inset-0 flex items-center justify-center text-xs font-medium",
-              style: { color: clampedValue > 50 ? "white" : color },
-              children: [
-                clampedValue,
-                "%"
-              ]
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid gap-0.5",
+            style: {
+              width: normalizeSize(size),
+              height: normalizeSize(size),
+              gridTemplateColumns: `repeat(${gridSize}, 1fr)`
+            },
+            children: Array.from({ length: gridSize * gridSize }).map((_, index) => {
+              const row = Math.floor(index / gridSize);
+              const col = index % gridSize;
+              const delay = (row + col) * 0.1;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "rounded-sm",
+                  style: {
+                    width: `${cellSize}px`,
+                    height: `${cellSize}px`,
+                    backgroundColor: color,
+                    animation: `fade-pulse ${animationDuration} ease-in-out infinite`,
+                    animationDelay: `${delay}s`
+                  }
+                },
+                index
+              );
+            })
+          }
+        )
       }
     );
   }
 );
-ProgressBar.displayName = "ProgressBar";
+SpinnerGrid.displayName = "SpinnerGrid";
 export {
-  ProgressBar
+  SpinnerGrid
 };
 //# sourceMappingURL=index18.js.map

package/dist/index18.js.map

@@ -1 +1 @@
-{"version":3,"file":"index18.js","sources":["../src/components/progress/ProgressBar.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { ProgressBarProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\n\n/**\n * ProgressBar - Linear progress bar\n *\n * A horizontal progress bar that can be determinate (showing specific progress) or indeterminate (loading animation).\n *\n * @example\n * ```tsx\n * <ProgressBar value={75} showValue />\n * <ProgressBar indeterminate />\n * <ProgressBar value={50} height={8} color=\"#8b5cf6\" />\n * ```\n */\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      height = '0.5rem',\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      className,\n      style,\n      testId = 'progress-bar',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative w-full overflow-hidden rounded-full', className)}\n        style={{\n          height: normalizeSize(height),\n          backgroundColor: secondaryColor,\n          ...style,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        {indeterminate ? (\n          <div\n            className=\"absolute h-full rounded-full\"\n            style={{\n              backgroundColor: color,\n              animation: 'progress-indeterminate 1.5s ease-in-out infinite',\n              width: '40%',\n            }}\n          />\n        ) : (\n          <div\n            className=\"h-full rounded-full transition-all duration-300 ease-in-out\"\n            style={{\n              width: `${clampedValue}%`,\n              backgroundColor: color,\n            }}\n          />\n        )}\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute inset-0 flex items-center justify-center text-xs font-medium\"\n            style={{ color: clampedValue > 50 ? 'white' : color }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,gBAAgB,aAAa,WAAW,YAAY;AAE1D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,gDAAgD,SAAS;AAAA,QACvE,OAAO;AAAA,UACL,QAAQ,cAAc,MAAM;AAAA,UAC5B,iBAAiB;AAAA,UACjB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,iBAAe;AAAA,QACd,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,iBAAiB;AAAA,gBACjB,WAAW;AAAA,gBACX,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,UAAA,IAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,YAAY;AAAA,gBACtB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA;AAAA,UAGH,aAAa,CAAC,iBACb;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,eAAe,KAAK,UAAU,MAAA;AAAA,cAE7C,UAAA;AAAA,gBAAA;AAAA,gBAAa;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"index18.js","sources":["../src/components/spinner/SpinnerGrid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerGridProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration, parseSizeToNumber } 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={40} color=\"#3b82f6\" />\n * <SpinnerGrid size={48} gridSize={4} />\n * ```\n */\nexport const SpinnerGrid = forwardRef<HTMLDivElement, SpinnerGridProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      gridSize = 3,\n      speed = 'normal',\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 sizeValue = parseSizeToNumber(size, 40);\n    const cellSize = Math.floor(sizeValue / gridSize) - 2;\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', 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 delay = (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 ${animationDuration} 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;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,YAAY,QAAQ,IAAI;AACpD,UAAM,oBAAoB,qBAAqB,KAAK;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,SAAS,MAAM,OAAO;AAE5B,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;"}

package/dist/index19.cjs

@@ -2,106 +2,64 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
-const ProgressCircle = react.forwardRef(
+const colors = require("./index4.cjs");
+const SpinnerWave = react.forwardRef(
   ({
-    value = 0,
-    indeterminate = false,
-    showValue = false,
-    size = 60,
-    thickness = 4,
+    size = 40,
     color = "#3b82f6",
-    secondaryColor = "#e0e0e0",
+    ripples = 3,
+    maxScale = 2,
+    speed = "normal",
     className,
     style,
-    testId = "progress-circle",
+    testId = "spinner-wave",
     visible = true,
-    ariaLabel,
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const clampedValue = Math.min(100, Math.max(0, value));
-    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
-    const thicknessValue = typeof thickness === "number" ? thickness : parseInt(String(thickness), 10);
-    const radius = (sizeValue - thicknessValue * 2) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const strokeDashoffset = circumference - clampedValue / 100 * circumference;
-    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const animationDuration = colors.getAnimationDuration(speed);
+    const sizeValue = colors.normalizeSize(size);
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center relative", className),
-        style: {
-          width: colors.normalizeSize(size),
-          height: colors.normalizeSize(size),
-          ...style
-        },
-        role: "progressbar",
-        "aria-label": progressLabel,
-        "aria-valuenow": indeterminate ? void 0 : clampedValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
         ...rest,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "svg",
-            {
-              className: classNames.cn(indeterminate && "animate-spinner-rotate"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "relative",
+            style: {
               width: sizeValue,
-              height: sizeValue,
-              viewBox: `0 0 ${sizeValue} ${sizeValue}`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: secondaryColor,
-                    strokeWidth: thicknessValue
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: color,
-                    strokeWidth: thicknessValue,
-                    strokeLinecap: "round",
-                    strokeDasharray: circumference,
-                    strokeDashoffset: indeterminate ? circumference * 0.75 : strokeDashoffset,
-                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
-                    style: {
-                      transition: indeterminate ? "none" : "stroke-dashoffset 0.3s ease-in-out"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          showValue && !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: "absolute text-sm font-medium",
-              style: { color },
-              children: [
-                clampedValue,
-                "%"
-              ]
-            }
-          )
-        ]
+              height: sizeValue
+            },
+            children: Array.from({ length: ripples }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute inset-0 rounded-full border-2",
+                style: {
+                  borderColor: color,
+                  animation: `ripple-expand ${animationDuration} ease-out infinite`,
+                  animationDelay: `${index * 0.4}s`,
+                  // @ts-ignore - CSS variable for animation
+                  "--max-scale": maxScale
+                }
+              },
+              index
+            ))
+          }
+        )
       }
     );
   }
 );
-ProgressCircle.displayName = "ProgressCircle";
-exports.ProgressCircle = ProgressCircle;
+SpinnerWave.displayName = "SpinnerWave";
+exports.SpinnerWave = SpinnerWave;
 //# sourceMappingURL=index19.cjs.map

package/dist/index19.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index19.cjs","sources":["../src/components/progress/ProgressCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { ProgressCircleProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\n\n/**\n * ProgressCircle - SVG-based circular progress indicator\n *\n * A circular progress indicator that shows progress as a partial circle.\n *\n * @example\n * ```tsx\n * <ProgressCircle value={75} showValue />\n * <ProgressCircle value={50} size={80} thickness={6} />\n * <ProgressCircle indeterminate />\n * ```\n */\nexport const ProgressCircle = forwardRef<HTMLDivElement, ProgressCircleProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      size = 60,\n      thickness = 4,\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      className,\n      style,\n      testId = 'progress-circle',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n    const thicknessValue = typeof thickness === 'number' ? thickness : parseInt(String(thickness), 10);\n    const radius = (sizeValue - thicknessValue * 2) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const strokeDashoffset = circumference - (clampedValue / 100) * circumference;\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center relative', className)}\n        style={{\n          width: normalizeSize(size),\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        <svg\n          className={cn(indeterminate && 'animate-spinner-rotate')}\n          width={sizeValue}\n          height={sizeValue}\n          viewBox={`0 0 ${sizeValue} ${sizeValue}`}\n        >\n          {/* Background circle */}\n          <circle\n            cx={sizeValue / 2}\n            cy={sizeValue / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={secondaryColor}\n            strokeWidth={thicknessValue}\n          />\n          {/* Progress circle */}\n          <circle\n            cx={sizeValue / 2}\n            cy={sizeValue / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thicknessValue}\n            strokeLinecap=\"round\"\n            strokeDasharray={circumference}\n            strokeDashoffset={indeterminate ? circumference * 0.75 : strokeDashoffset}\n            transform={`rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`}\n            style={{\n              transition: indeterminate ? 'none' : 'stroke-dashoffset 0.3s ease-in-out',\n            }}\n          />\n        </svg>\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute text-sm font-medium\"\n            style={{ color }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressCircle.displayName = 'ProgressCircle';\n"],"names":["forwardRef","jsxs","cn","normalizeSize","jsx"],"mappings":";;;;;;AAgBO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,iBAAiB,OAAO,cAAc,WAAW,YAAY,SAAS,OAAO,SAAS,GAAG,EAAE;AACjG,UAAM,UAAU,YAAY,iBAAiB,KAAK;AAClD,UAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,UAAM,mBAAmB,gBAAiB,eAAe,MAAO;AAChE,UAAM,gBAAgB,aAAa,WAAW,YAAY;AAE1D,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,oDAAoD,SAAS;AAAA,QAC3E,OAAO;AAAA,UACL,OAAOC,OAAAA,cAAc,IAAI;AAAA,UACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,iBAAe;AAAA,QACd,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,WAAAA,GAAG,iBAAiB,wBAAwB;AAAA,cACvD,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS,OAAO,SAAS,IAAI,SAAS;AAAA,cAGtC,UAAA;AAAA,gBAAAE,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,YAAY;AAAA,oBAChB,IAAI,YAAY;AAAA,oBAChB,GAAG;AAAA,oBACH,MAAK;AAAA,oBACL,QAAQ;AAAA,oBACR,aAAa;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGfA,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,YAAY;AAAA,oBAChB,IAAI,YAAY;AAAA,oBAChB,GAAG;AAAA,oBACH,MAAK;AAAA,oBACL,QAAQ;AAAA,oBACR,aAAa;AAAA,oBACb,eAAc;AAAA,oBACd,iBAAiB;AAAA,oBACjB,kBAAkB,gBAAgB,gBAAgB,OAAO;AAAA,oBACzD,WAAW,cAAc,YAAY,CAAC,IAAI,YAAY,CAAC;AAAA,oBACvD,OAAO;AAAA,sBACL,YAAY,gBAAgB,SAAS;AAAA,oBAAA;AAAA,kBACvC;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA;AAAA,UAED,aAAa,CAAC,iBACbH,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,MAAA;AAAA,cAER,UAAA;AAAA,gBAAA;AAAA,gBAAa;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,eAAe,cAAc;;"}
+{"version":3,"file":"index19.cjs","sources":["../src/components/spinner/SpinnerWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerWaveProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerWave - Ripple wave spinner\n *\n * A spinner with expanding ripple circles creating a wave effect.\n *\n * @example\n * ```tsx\n * <SpinnerWave size={60} color=\"#3b82f6\" />\n * <SpinnerWave size={80} ripples={5} />\n * <SpinnerWave size={50} maxScale={2.5} speed=\"fast\" />\n * ```\n */\nexport const SpinnerWave = forwardRef<HTMLDivElement, SpinnerWaveProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      ripples = 3,\n      maxScale = 2,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-wave',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const animationDuration = getAnimationDuration(speed);\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: sizeValue,\n            height: sizeValue,\n          }}\n        >\n          {/* Expanding ripples */}\n          {Array.from({ length: ripples }).map((_, index) => (\n            <div\n              key={index}\n              className=\"absolute inset-0 rounded-full border-2\"\n              style={{\n                borderColor: color,\n                animation: `ripple-expand ${animationDuration} ease-out infinite`,\n                animationDelay: `${index * 0.4}s`,\n                // @ts-ignore - CSS variable for animation\n                '--max-scale': maxScale,\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerWave.displayName = 'SpinnerWave';\n"],"names":["forwardRef","getAnimationDuration","normalizeSize","jsx","cn"],"mappings":";;;;;;AAgBO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AACpD,UAAM,YAAYC,OAAAA,cAAc,IAAI;AAEpC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,YAIT,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,EAAE,IAAI,CAAC,GAAG,UACvCA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,aAAa;AAAA,kBACb,WAAW,iBAAiB,iBAAiB;AAAA,kBAC7C,gBAAgB,GAAG,QAAQ,GAAG;AAAA;AAAA,kBAE9B,eAAe;AAAA,gBAAA;AAAA,cACjB;AAAA,cARK;AAAA,YAAA,CAUR;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}

package/dist/index19.js

@@ -1,107 +1,65 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
-const ProgressCircle = forwardRef(
+import { normalizeSize, getAnimationDuration } from "./index4.js";
+const SpinnerWave = forwardRef(
   ({
-    value = 0,
-    indeterminate = false,
-    showValue = false,
-    size = 60,
-    thickness = 4,
+    size = 40,
     color = "#3b82f6",
-    secondaryColor = "#e0e0e0",
+    ripples = 3,
+    maxScale = 2,
+    speed = "normal",
     className,
     style,
-    testId = "progress-circle",
+    testId = "spinner-wave",
     visible = true,
-    ariaLabel,
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const clampedValue = Math.min(100, Math.max(0, value));
-    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
-    const thicknessValue = typeof thickness === "number" ? thickness : parseInt(String(thickness), 10);
-    const radius = (sizeValue - thicknessValue * 2) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const strokeDashoffset = circumference - clampedValue / 100 * circumference;
-    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
-    return /* @__PURE__ */ jsxs(
+    const animationDuration = getAnimationDuration(speed);
+    const sizeValue = normalizeSize(size);
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center relative", className),
-        style: {
-          width: normalizeSize(size),
-          height: normalizeSize(size),
-          ...style
-        },
-        role: "progressbar",
-        "aria-label": progressLabel,
-        "aria-valuenow": indeterminate ? void 0 : clampedValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
+        className: cn("inline-flex items-center justify-center", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
         ...rest,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              className: cn(indeterminate && "animate-spinner-rotate"),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative",
+            style: {
               width: sizeValue,
-              height: sizeValue,
-              viewBox: `0 0 ${sizeValue} ${sizeValue}`,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: secondaryColor,
-                    strokeWidth: thicknessValue
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: sizeValue / 2,
-                    cy: sizeValue / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: color,
-                    strokeWidth: thicknessValue,
-                    strokeLinecap: "round",
-                    strokeDasharray: circumference,
-                    strokeDashoffset: indeterminate ? circumference * 0.75 : strokeDashoffset,
-                    transform: `rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`,
-                    style: {
-                      transition: indeterminate ? "none" : "stroke-dashoffset 0.3s ease-in-out"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          showValue && !indeterminate && /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: "absolute text-sm font-medium",
-              style: { color },
-              children: [
-                clampedValue,
-                "%"
-              ]
-            }
-          )
-        ]
+              height: sizeValue
+            },
+            children: Array.from({ length: ripples }).map((_, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute inset-0 rounded-full border-2",
+                style: {
+                  borderColor: color,
+                  animation: `ripple-expand ${animationDuration} ease-out infinite`,
+                  animationDelay: `${index * 0.4}s`,
+                  // @ts-ignore - CSS variable for animation
+                  "--max-scale": maxScale
+                }
+              },
+              index
+            ))
+          }
+        )
       }
     );
   }
 );
-ProgressCircle.displayName = "ProgressCircle";
+SpinnerWave.displayName = "SpinnerWave";
 export {
-  ProgressCircle
+  SpinnerWave
 };
 //# sourceMappingURL=index19.js.map

package/dist/index19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index19.js","sources":["../src/components/progress/ProgressCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { ProgressCircleProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\n\n/**\n * ProgressCircle - SVG-based circular progress indicator\n *\n * A circular progress indicator that shows progress as a partial circle.\n *\n * @example\n * ```tsx\n * <ProgressCircle value={75} showValue />\n * <ProgressCircle value={50} size={80} thickness={6} />\n * <ProgressCircle indeterminate />\n * ```\n */\nexport const ProgressCircle = forwardRef<HTMLDivElement, ProgressCircleProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      size = 60,\n      thickness = 4,\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      className,\n      style,\n      testId = 'progress-circle',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n    const thicknessValue = typeof thickness === 'number' ? thickness : parseInt(String(thickness), 10);\n    const radius = (sizeValue - thicknessValue * 2) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const strokeDashoffset = circumference - (clampedValue / 100) * circumference;\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center relative', className)}\n        style={{\n          width: normalizeSize(size),\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        <svg\n          className={cn(indeterminate && 'animate-spinner-rotate')}\n          width={sizeValue}\n          height={sizeValue}\n          viewBox={`0 0 ${sizeValue} ${sizeValue}`}\n        >\n          {/* Background circle */}\n          <circle\n            cx={sizeValue / 2}\n            cy={sizeValue / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={secondaryColor}\n            strokeWidth={thicknessValue}\n          />\n          {/* Progress circle */}\n          <circle\n            cx={sizeValue / 2}\n            cy={sizeValue / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thicknessValue}\n            strokeLinecap=\"round\"\n            strokeDasharray={circumference}\n            strokeDashoffset={indeterminate ? circumference * 0.75 : strokeDashoffset}\n            transform={`rotate(-90 ${sizeValue / 2} ${sizeValue / 2})`}\n            style={{\n              transition: indeterminate ? 'none' : 'stroke-dashoffset 0.3s ease-in-out',\n            }}\n          />\n        </svg>\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute text-sm font-medium\"\n            style={{ color }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressCircle.displayName = 'ProgressCircle';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,iBAAiB,OAAO,cAAc,WAAW,YAAY,SAAS,OAAO,SAAS,GAAG,EAAE;AACjG,UAAM,UAAU,YAAY,iBAAiB,KAAK;AAClD,UAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,UAAM,mBAAmB,gBAAiB,eAAe,MAAO;AAChE,UAAM,gBAAgB,aAAa,WAAW,YAAY;AAE1D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,oDAAoD,SAAS;AAAA,QAC3E,OAAO;AAAA,UACL,OAAO,cAAc,IAAI;AAAA,UACzB,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,iBAAe;AAAA,QACd,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,iBAAiB,wBAAwB;AAAA,cACvD,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS,OAAO,SAAS,IAAI,SAAS;AAAA,cAGtC,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,YAAY;AAAA,oBAChB,IAAI,YAAY;AAAA,oBAChB,GAAG;AAAA,oBACH,MAAK;AAAA,oBACL,QAAQ;AAAA,oBACR,aAAa;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGf;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,YAAY;AAAA,oBAChB,IAAI,YAAY;AAAA,oBAChB,GAAG;AAAA,oBACH,MAAK;AAAA,oBACL,QAAQ;AAAA,oBACR,aAAa;AAAA,oBACb,eAAc;AAAA,oBACd,iBAAiB;AAAA,oBACjB,kBAAkB,gBAAgB,gBAAgB,OAAO;AAAA,oBACzD,WAAW,cAAc,YAAY,CAAC,IAAI,YAAY,CAAC;AAAA,oBACvD,OAAO;AAAA,sBACL,YAAY,gBAAgB,SAAS;AAAA,oBAAA;AAAA,kBACvC;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA;AAAA,UAED,aAAa,CAAC,iBACb;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,MAAA;AAAA,cAER,UAAA;AAAA,gBAAA;AAAA,gBAAa;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,eAAe,cAAc;"}
+{"version":3,"file":"index19.js","sources":["../src/components/spinner/SpinnerWave.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerWaveProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerWave - Ripple wave spinner\n *\n * A spinner with expanding ripple circles creating a wave effect.\n *\n * @example\n * ```tsx\n * <SpinnerWave size={60} color=\"#3b82f6\" />\n * <SpinnerWave size={80} ripples={5} />\n * <SpinnerWave size={50} maxScale={2.5} speed=\"fast\" />\n * ```\n */\nexport const SpinnerWave = forwardRef<HTMLDivElement, SpinnerWaveProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      ripples = 3,\n      maxScale = 2,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-wave',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const animationDuration = getAnimationDuration(speed);\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: sizeValue,\n            height: sizeValue,\n          }}\n        >\n          {/* Expanding ripples */}\n          {Array.from({ length: ripples }).map((_, index) => (\n            <div\n              key={index}\n              className=\"absolute inset-0 rounded-full border-2\"\n              style={{\n                borderColor: color,\n                animation: `ripple-expand ${animationDuration} ease-out infinite`,\n                animationDelay: `${index * 0.4}s`,\n                // @ts-ignore - CSS variable for animation\n                '--max-scale': maxScale,\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerWave.displayName = 'SpinnerWave';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,oBAAoB,qBAAqB,KAAK;AACpD,UAAM,YAAY,cAAc,IAAI;AAEpC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,YAIT,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,EAAE,IAAI,CAAC,GAAG,UACvC;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,aAAa;AAAA,kBACb,WAAW,iBAAiB,iBAAiB;AAAA,kBAC7C,gBAAgB,GAAG,QAAQ,GAAG;AAAA;AAAA,kBAE9B,eAAe;AAAA,gBAAA;AAAA,cACjB;AAAA,cARK;AAAA,YAAA,CAUR;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}