premium-react-loaders 1.0.0

package/dist/index12.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getAnimationDuration, normalizeSize } from "./index4.js";
+import { cn } from "./index3.js";
+const SpinnerCircle = forwardRef(
+  ({
+    size = 40,
+    color = "#3b82f6",
+    thickness = 4,
+    speed = "normal",
+    className,
+    style,
+    testId = "spinner-circle",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "animate-spinner-rotate",
+            style: {
+              width: normalizeSize(size),
+              height: normalizeSize(size),
+              animationDuration: getAnimationDuration(speed)
+            },
+            viewBox: "0 0 50 50",
+            children: /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "25",
+                cy: "25",
+                r: 25 - thickness * 2,
+                fill: "none",
+                stroke: color,
+                strokeWidth: thickness,
+                strokeDasharray: "80, 200",
+                strokeLinecap: "round"
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+SpinnerCircle.displayName = "SpinnerCircle";
+export {
+  SpinnerCircle
+};
+//# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index12.js","sources":["../src/components/spinner/SpinnerCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerCircleProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerCircle - Basic rotating circle spinner\n *\n * A simple, elegant circular spinner with a partial arc that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerCircle size={40} color=\"#3b82f6\" />\n * <SpinnerCircle size={24} thickness={3} speed=\"fast\" />\n * ```\n */\nexport const SpinnerCircle = forwardRef<HTMLDivElement, SpinnerCircleProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-circle',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\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        <svg\n          className=\"animate-spinner-rotate\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animationDuration: getAnimationDuration(speed),\n          }}\n          viewBox=\"0 0 50 50\"\n        >\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            r={25 - thickness * 2}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thickness}\n            strokeDasharray=\"80, 200\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nSpinnerCircle.displayName = 'SpinnerCircle';\n"],"names":[],"mappings":";;;;AAeO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,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,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,mBAAmB,qBAAqB,KAAK;AAAA,YAAA;AAAA,YAE/C,SAAQ;AAAA,YAER,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,KAAK,YAAY;AAAA,gBACpB,MAAK;AAAA,gBACL,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,iBAAgB;AAAA,gBAChB,eAAc;AAAA,cAAA;AAAA,YAAA;AAAA,UAChB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;"}

package/dist/index13.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const classNames = require("./index3.cjs");
+const colors = require("./index4.cjs");
+const SpinnerRing = react.forwardRef(
+  ({
+    size = 40,
+    color = "#3b82f6",
+    thickness = 4,
+    speed = "normal",
+    className,
+    style,
+    testId = "spinner-ring",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "rounded-full",
+            style: {
+              width: colors.normalizeSize(size),
+              height: colors.normalizeSize(size),
+              border: `${thickness}px solid rgba(0, 0, 0, 0.1)`,
+              borderTopColor: color,
+              animation: `spinner-rotate ${colors.getAnimationDuration(speed)} linear infinite`
+            }
+          }
+        )
+      }
+    );
+  }
+);
+SpinnerRing.displayName = "SpinnerRing";
+exports.SpinnerRing = SpinnerRing;
+//# sourceMappingURL=index13.cjs.map

package/dist/index13.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index13.cjs","sources":["../src/components/spinner/SpinnerRing.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerRingProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerRing - Border-only rotating spinner\n *\n * A ring-style spinner with a transparent center and colored border.\n *\n * @example\n * ```tsx\n * <SpinnerRing size={40} color=\"#8b5cf6\" />\n * <SpinnerRing size={32} thickness={3} speed=\"slow\" />\n * ```\n */\nexport const SpinnerRing = forwardRef<HTMLDivElement, SpinnerRingProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-ring',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\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=\"rounded-full\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            border: `${thickness}px solid rgba(0, 0, 0, 0.1)`,\n            borderTopColor: color,\n            animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`,\n          }}\n        />\n      </div>\n    );\n  }\n);\n\nSpinnerRing.displayName = 'SpinnerRing';\n"],"names":["forwardRef","jsx","cn","normalizeSize","getAnimationDuration"],"mappings":";;;;;;AAeO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,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,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,QAAQ,GAAG,SAAS;AAAA,cACpB,gBAAgB;AAAA,cAChB,WAAW,kBAAkBC,4BAAqB,KAAK,CAAC;AAAA,YAAA;AAAA,UAC1D;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}

package/dist/index13.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "./index3.js";
+import { getAnimationDuration, normalizeSize } from "./index4.js";
+const SpinnerRing = forwardRef(
+  ({
+    size = 40,
+    color = "#3b82f6",
+    thickness = 4,
+    speed = "normal",
+    className,
+    style,
+    testId = "spinner-ring",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rounded-full",
+            style: {
+              width: normalizeSize(size),
+              height: normalizeSize(size),
+              border: `${thickness}px solid rgba(0, 0, 0, 0.1)`,
+              borderTopColor: color,
+              animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`
+            }
+          }
+        )
+      }
+    );
+  }
+);
+SpinnerRing.displayName = "SpinnerRing";
+export {
+  SpinnerRing
+};
+//# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index13.js","sources":["../src/components/spinner/SpinnerRing.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerRingProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerRing - Border-only rotating spinner\n *\n * A ring-style spinner with a transparent center and colored border.\n *\n * @example\n * ```tsx\n * <SpinnerRing size={40} color=\"#8b5cf6\" />\n * <SpinnerRing size={32} thickness={3} speed=\"slow\" />\n * ```\n */\nexport const SpinnerRing = forwardRef<HTMLDivElement, SpinnerRingProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-ring',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\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=\"rounded-full\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            border: `${thickness}px solid rgba(0, 0, 0, 0.1)`,\n            borderTopColor: color,\n            animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`,\n          }}\n        />\n      </div>\n    );\n  }\n);\n\nSpinnerRing.displayName = 'SpinnerRing';\n"],"names":[],"mappings":";;;;AAeO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,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,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,QAAQ,GAAG,SAAS;AAAA,cACpB,gBAAgB;AAAA,cAChB,WAAW,kBAAkB,qBAAqB,KAAK,CAAC;AAAA,YAAA;AAAA,UAC1D;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}

package/dist/index14.cjs

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const classNames = require("./index3.cjs");
+const colors = require("./index4.cjs");
+const SpinnerDots = react.forwardRef(
+  ({
+    size = 40,
+    color = "#3b82f6",
+    dotCount = 8,
+    dotSize = 4,
+    speed = "normal",
+    className,
+    style,
+    testId = "spinner-dots",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
+    const radius = (sizeValue - dotSize) / 2;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "relative",
+            style: {
+              width: colors.normalizeSize(size),
+              height: colors.normalizeSize(size),
+              animation: `spinner-rotate ${colors.getAnimationDuration(speed)} linear infinite`
+            },
+            children: Array.from({ length: dotCount }).map((_, index) => {
+              const angle = 360 / dotCount * index;
+              const radian = angle * Math.PI / 180;
+              const x = radius * Math.cos(radian) + radius;
+              const y = radius * Math.sin(radian) + radius;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute rounded-full",
+                  style: {
+                    width: colors.normalizeSize(dotSize),
+                    height: colors.normalizeSize(dotSize),
+                    backgroundColor: color,
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    opacity: 1 - index / dotCount * 0.7
+                    // Fade effect
+                  }
+                },
+                index
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+SpinnerDots.displayName = "SpinnerDots";
+exports.SpinnerDots = SpinnerDots;
+//# sourceMappingURL=index14.cjs.map

package/dist/index14.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index14.cjs","sources":["../src/components/spinner/SpinnerDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerDotsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerDots - Multiple dots rotating around center\n *\n * A spinner with multiple dots arranged in a circle that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerDots size={40} color=\"#3b82f6\" />\n * <SpinnerDots size={48} dotCount={8} dotSize={6} />\n * ```\n */\nexport const SpinnerDots = forwardRef<HTMLDivElement, SpinnerDotsProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      dotCount = 8,\n      dotSize = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-dots',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n    const radius = (sizeValue - dotSize) / 2;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`,\n          }}\n        >\n          {Array.from({ length: dotCount }).map((_, index) => {\n            const angle = (360 / dotCount) * index;\n            const radian = (angle * Math.PI) / 180;\n            const x = radius * Math.cos(radian) + radius;\n            const y = radius * Math.sin(radian) + radius;\n\n            return (\n              <div\n                key={index}\n                className=\"absolute rounded-full\"\n                style={{\n                  width: normalizeSize(dotSize),\n                  height: normalizeSize(dotSize),\n                  backgroundColor: color,\n                  left: `${x}px`,\n                  top: `${y}px`,\n                  opacity: 1 - (index / dotCount) * 0.7, // Fade effect\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerDots.displayName = 'SpinnerDots';\n"],"names":["forwardRef","jsx","cn","normalizeSize","getAnimationDuration"],"mappings":";;;;;;AAeO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,UAAU,YAAY,WAAW;AAEvC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,WAAW,kBAAkBC,4BAAqB,KAAK,CAAC;AAAA,YAAA;AAAA,YAGzD,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,oBAAM,QAAS,MAAM,WAAY;AACjC,oBAAM,SAAU,QAAQ,KAAK,KAAM;AACnC,oBAAM,IAAI,SAAS,KAAK,IAAI,MAAM,IAAI;AACtC,oBAAM,IAAI,SAAS,KAAK,IAAI,MAAM,IAAI;AAEtC,qBACEH,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAOE,OAAAA,cAAc,OAAO;AAAA,oBAC5B,QAAQA,OAAAA,cAAc,OAAO;AAAA,oBAC7B,iBAAiB;AAAA,oBACjB,MAAM,GAAG,CAAC;AAAA,oBACV,KAAK,GAAG,CAAC;AAAA,oBACT,SAAS,IAAK,QAAQ,WAAY;AAAA;AAAA,kBAAA;AAAA,gBACpC;AAAA,gBATK;AAAA,cAAA;AAAA,YAYX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}

package/dist/index14.js

@@ -0,0 +1,74 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "./index3.js";
+import { getAnimationDuration, normalizeSize } from "./index4.js";
+const SpinnerDots = forwardRef(
+  ({
+    size = 40,
+    color = "#3b82f6",
+    dotCount = 8,
+    dotSize = 4,
+    speed = "normal",
+    className,
+    style,
+    testId = "spinner-dots",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
+    const radius = (sizeValue - dotSize) / 2;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative",
+            style: {
+              width: normalizeSize(size),
+              height: normalizeSize(size),
+              animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`
+            },
+            children: Array.from({ length: dotCount }).map((_, index) => {
+              const angle = 360 / dotCount * index;
+              const radian = angle * Math.PI / 180;
+              const x = radius * Math.cos(radian) + radius;
+              const y = radius * Math.sin(radian) + radius;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute rounded-full",
+                  style: {
+                    width: normalizeSize(dotSize),
+                    height: normalizeSize(dotSize),
+                    backgroundColor: color,
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    opacity: 1 - index / dotCount * 0.7
+                    // Fade effect
+                  }
+                },
+                index
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+SpinnerDots.displayName = "SpinnerDots";
+export {
+  SpinnerDots
+};
+//# sourceMappingURL=index14.js.map

package/dist/index14.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index14.js","sources":["../src/components/spinner/SpinnerDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerDotsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerDots - Multiple dots rotating around center\n *\n * A spinner with multiple dots arranged in a circle that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerDots size={40} color=\"#3b82f6\" />\n * <SpinnerDots size={48} dotCount={8} dotSize={6} />\n * ```\n */\nexport const SpinnerDots = forwardRef<HTMLDivElement, SpinnerDotsProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      dotCount = 8,\n      dotSize = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-dots',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n    const radius = (sizeValue - dotSize) / 2;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"relative\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`,\n          }}\n        >\n          {Array.from({ length: dotCount }).map((_, index) => {\n            const angle = (360 / dotCount) * index;\n            const radian = (angle * Math.PI) / 180;\n            const x = radius * Math.cos(radian) + radius;\n            const y = radius * Math.sin(radian) + radius;\n\n            return (\n              <div\n                key={index}\n                className=\"absolute rounded-full\"\n                style={{\n                  width: normalizeSize(dotSize),\n                  height: normalizeSize(dotSize),\n                  backgroundColor: color,\n                  left: `${x}px`,\n                  top: `${y}px`,\n                  opacity: 1 - (index / dotCount) * 0.7, // Fade effect\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerDots.displayName = 'SpinnerDots';\n"],"names":[],"mappings":";;;;AAeO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,UAAU,YAAY,WAAW;AAEvC,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,WAAW,kBAAkB,qBAAqB,KAAK,CAAC;AAAA,YAAA;AAAA,YAGzD,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,oBAAM,QAAS,MAAM,WAAY;AACjC,oBAAM,SAAU,QAAQ,KAAK,KAAM;AACnC,oBAAM,IAAI,SAAS,KAAK,IAAI,MAAM,IAAI;AACtC,oBAAM,IAAI,SAAS,KAAK,IAAI,MAAM,IAAI;AAEtC,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,cAAc,OAAO;AAAA,oBAC5B,QAAQ,cAAc,OAAO;AAAA,oBAC7B,iBAAiB;AAAA,oBACjB,MAAM,GAAG,CAAC;AAAA,oBACV,KAAK,GAAG,CAAC;AAAA,oBACT,SAAS,IAAK,QAAQ,WAAY;AAAA;AAAA,kBAAA;AAAA,gBACpC;AAAA,gBATK;AAAA,cAAA;AAAA,YAYX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}

package/dist/index15.cjs

@@ -0,0 +1,58 @@
+"use strict";
+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 SpinnerBars = react.forwardRef(
+  ({
+    size = 40,
+    color = "#3b82f6",
+    barCount = 5,
+    speed = "normal",
+    className,
+    style,
+    testId = "spinner-bars",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
+    const barWidth = Math.floor(sizeValue / (barCount * 2));
+    const animationDuration = colors.getAnimationDuration(speed);
+    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) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "rounded-sm",
+            style: {
+              width: `${barWidth}px`,
+              height: "100%",
+              backgroundColor: color,
+              animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
+              animationDelay: `${index * 0.1}s`
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+SpinnerBars.displayName = "SpinnerBars";
+exports.SpinnerBars = SpinnerBars;
+//# sourceMappingURL=index15.cjs.map

package/dist/index15.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index15.cjs","sources":["../src/components/spinner/SpinnerBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerBarsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerBars - Vertical bars with wave animation\n *\n * A spinner with vertical bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <SpinnerBars size={40} color=\"#3b82f6\" />\n * <SpinnerBars size={32} barCount={5} speed=\"fast\" />\n * ```\n */\nexport const SpinnerBars = forwardRef<HTMLDivElement, SpinnerBarsProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      barCount = 5,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-bars',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n    const barWidth = Math.floor(sizeValue / (barCount * 2));\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => (\n          <div\n            key={index}\n            className=\"rounded-sm\"\n            style={{\n              width: `${barWidth}px`,\n              height: '100%',\n              backgroundColor: color,\n              animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n              animationDelay: `${index * 0.1}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSpinnerBars.displayName = 'SpinnerBars';\n"],"names":["forwardRef","getAnimationDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;AAeO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;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,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,EAAE;AACtD,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxCF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,GAAG,QAAQ;AAAA,cAClB,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW,cAAc,iBAAiB;AAAA,cAC1C,gBAAgB,GAAG,QAAQ,GAAG;AAAA,YAAA;AAAA,UAChC;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,YAAY,cAAc;;"}

package/dist/index15.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { normalizeSize, getAnimationDuration } from "./index4.js";
+import { cn } from "./index3.js";
+const SpinnerBars = forwardRef(
+  ({
+    size = 40,
+    color = "#3b82f6",
+    barCount = 5,
+    speed = "normal",
+    className,
+    style,
+    testId = "spinner-bars",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
+    const barWidth = Math.floor(sizeValue / (barCount * 2));
+    const animationDuration = getAnimationDuration(speed);
+    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) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rounded-sm",
+            style: {
+              width: `${barWidth}px`,
+              height: "100%",
+              backgroundColor: color,
+              animation: `pulse-wave ${animationDuration} ease-in-out infinite`,
+              animationDelay: `${index * 0.1}s`
+            }
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+SpinnerBars.displayName = "SpinnerBars";
+export {
+  SpinnerBars
+};
+//# sourceMappingURL=index15.js.map

package/dist/index15.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index15.js","sources":["../src/components/spinner/SpinnerBars.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerBarsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerBars - Vertical bars with wave animation\n *\n * A spinner with vertical bars that animate in a wave pattern.\n *\n * @example\n * ```tsx\n * <SpinnerBars size={40} color=\"#3b82f6\" />\n * <SpinnerBars size={32} barCount={5} speed=\"fast\" />\n * ```\n */\nexport const SpinnerBars = forwardRef<HTMLDivElement, SpinnerBarsProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      barCount = 5,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-bars',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n    const barWidth = Math.floor(sizeValue / (barCount * 2));\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center gap-1', className)}\n        style={{\n          height: normalizeSize(size),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: barCount }).map((_, index) => (\n          <div\n            key={index}\n            className=\"rounded-sm\"\n            style={{\n              width: `${barWidth}px`,\n              height: '100%',\n              backgroundColor: color,\n              animation: `pulse-wave ${animationDuration} ease-in-out infinite`,\n              animationDelay: `${index * 0.1}s`,\n            }}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSpinnerBars.displayName = 'SpinnerBars';\n"],"names":[],"mappings":";;;;AAeO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;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,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,WAAW,KAAK,MAAM,aAAa,WAAW,EAAE;AACtD,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iDAAiD,SAAS;AAAA,QACxE,OAAO;AAAA,UACL,QAAQ,cAAc,IAAI;AAAA,UAC1B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,UAAU,EAAE,IAAI,CAAC,GAAG,UACxC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,GAAG,QAAQ;AAAA,cAClB,QAAQ;AAAA,cACR,iBAAiB;AAAA,cACjB,WAAW,cAAc,iBAAiB;AAAA,cAC1C,gBAAgB,GAAG,QAAQ,GAAG;AAAA,YAAA;AAAA,UAChC;AAAA,UARK;AAAA,QAAA,CAUR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,YAAY,cAAc;"}

package/dist/index16.cjs

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const classNames = require("./index3.cjs");
+const colors = require("./index4.cjs");
+const SpinnerGrid = react.forwardRef(
+  ({
+    size = 40,
+    color = "#3b82f6",
+    gridSize = 3,
+    speed = "normal",
+    className,
+    style,
+    testId = "spinner-grid",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
+    const cellSize = Math.floor(sizeValue / gridSize) - 2;
+    const animationDuration = colors.getAnimationDuration(speed);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "grid gap-0.5",
+            style: {
+              width: colors.normalizeSize(size),
+              height: colors.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__ */ jsxRuntime.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
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+SpinnerGrid.displayName = "SpinnerGrid";
+exports.SpinnerGrid = SpinnerGrid;
+//# sourceMappingURL=index16.cjs.map

package/dist/index16.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index16.cjs","sources":["../src/components/spinner/SpinnerGrid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerGridProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } 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 = typeof size === 'number' ? size : parseInt(String(size), 10);\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":["forwardRef","getAnimationDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;AAeO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;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,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,WAAW,KAAK,MAAM,YAAY,QAAQ,IAAI;AACpD,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,qBAAqB,UAAU,QAAQ;AAAA,YAAA;AAAA,YAGxC,UAAA,MAAM,KAAK,EAAE,QAAQ,WAAW,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAC7D,oBAAM,MAAM,KAAK,MAAM,QAAQ,QAAQ;AACvC,oBAAM,MAAM,QAAQ;AACpB,oBAAM,SAAS,MAAM,OAAO;AAE5B,qBACEF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,GAAG,QAAQ;AAAA,oBAClB,QAAQ,GAAG,QAAQ;AAAA,oBACnB,iBAAiB;AAAA,oBACjB,WAAW,cAAc,iBAAiB;AAAA,oBAC1C,gBAAgB,GAAG,KAAK;AAAA,kBAAA;AAAA,gBAC1B;AAAA,gBARK;AAAA,cAAA;AAAA,YAWX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}

package/dist/index16.js

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "./index3.js";
+import { normalizeSize, getAnimationDuration } from "./index4.js";
+const SpinnerGrid = forwardRef(
+  ({
+    size = 40,
+    color = "#3b82f6",
+    gridSize = 3,
+    speed = "normal",
+    className,
+    style,
+    testId = "spinner-grid",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
+    const cellSize = Math.floor(sizeValue / gridSize) - 2;
+    const animationDuration = getAnimationDuration(speed);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        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
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+SpinnerGrid.displayName = "SpinnerGrid";
+export {
+  SpinnerGrid
+};
+//# sourceMappingURL=index16.js.map

package/dist/index16.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index16.js","sources":["../src/components/spinner/SpinnerGrid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerGridProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } 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 = typeof size === 'number' ? size : parseInt(String(size), 10);\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,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,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;"}