premium-react-loaders 1.0.0 → 1.0.2

package/dist/index12.js

@@ -1,63 +1,152 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { getAnimationDuration, normalizeSize } from "./index4.js";
+import { Skeleton } from "./index5.js";
+import { SkeletonText } from "./index6.js";
+import { SkeletonAvatar } from "./index7.js";
 import { cn } from "./index3.js";
-const SpinnerCircle = forwardRef(
+const SkeletonPage = forwardRef(
   ({
-    size = 40,
-    color = "#3b82f6",
-    thickness = 4,
-    speed = "normal",
+    variant = "default",
+    animate = true,
+    baseColor = "#e0e0e0",
+    highlightColor = "#f5f5f5",
     className,
     style,
-    testId = "spinner-circle",
+    testId = "skeleton-page",
     visible = true,
-    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const commonProps = {
+      animate,
+      baseColor,
+      highlightColor
+    };
+    const renderDefault = () => /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b pb-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: 200, height: 32, ...commonProps }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps }),
+          /* @__PURE__ */ jsx(SkeletonAvatar, { size: 40, ...commonProps })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(SkeletonText, { lines: 3, ...commonProps }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { height: 120, borderRadius: 8, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { height: 120, borderRadius: 8, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { height: 120, borderRadius: 8, ...commonProps })
+        ] }),
+        /* @__PURE__ */ jsx(SkeletonText, { lines: 5, ...commonProps })
+      ] })
+    ] });
+    const renderDashboard = () => /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 180, height: 28, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 120, height: 36, borderRadius: 6, ...commonProps })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "p-4 border rounded-lg space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 16, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 80, height: 32, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 60, height: 12, ...commonProps })
+        ] }, i)) })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 300, borderRadius: 8, ...commonProps }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 20, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 20, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 20, ...commonProps })
+        ] }),
+        [...Array(5)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 16, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 16, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 16, ...commonProps })
+        ] }, i))
+      ] })
+    ] });
+    const renderArticle = () => /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: "80%", height: 40, ...commonProps }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(SkeletonAvatar, { size: 48, ...commonProps }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2 flex-1", children: [
+            /* @__PURE__ */ jsx(Skeleton, { width: 120, height: 16, ...commonProps }),
+            /* @__PURE__ */ jsx(Skeleton, { width: 180, height: 14, ...commonProps })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 400, borderRadius: 8, ...commonProps }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(SkeletonText, { lines: 4, ...commonProps }),
+        /* @__PURE__ */ jsx(Skeleton, { height: 200, borderRadius: 8, ...commonProps }),
+        /* @__PURE__ */ jsx(SkeletonText, { lines: 6, ...commonProps }),
+        /* @__PURE__ */ jsx(Skeleton, { height: 250, borderRadius: 8, ...commonProps }),
+        /* @__PURE__ */ jsx(SkeletonText, { lines: 4, ...commonProps })
+      ] })
+    ] });
+    const renderProfile = () => /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-6 border-b pb-6", children: [
+        /* @__PURE__ */ jsx(SkeletonAvatar, { size: 120, ...commonProps }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 200, height: 32, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 20, ...commonProps }),
+          /* @__PURE__ */ jsx(SkeletonText, { lines: 2, ...commonProps }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps }),
+            /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 20, ...commonProps }),
+          [...Array(4)].map((_, i) => /* @__PURE__ */ jsx(Skeleton, { height: 16, ...commonProps }, i))
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "col-span-2 space-y-4", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "p-4 border rounded-lg space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(SkeletonAvatar, { size: 40, ...commonProps }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 16, ...commonProps }),
+              /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 12, ...commonProps })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(SkeletonText, { lines: 2, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { height: 200, borderRadius: 6, ...commonProps })
+        ] }, i)) })
+      ] })
+    ] });
+    const renderContent = () => {
+      switch (variant) {
+        case "dashboard":
+          return renderDashboard();
+        case "article":
+          return renderArticle();
+        case "profile":
+          return renderProfile();
+        default:
+          return renderDefault();
+      }
+    };
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
+        className: cn("w-full p-6", className),
         style,
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": "Loading page...",
         "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"
-              }
-            )
-          }
-        )
+        children: renderContent()
       }
     );
   }
 );
-SpinnerCircle.displayName = "SpinnerCircle";
+SkeletonPage.displayName = "SkeletonPage";
 export {
-  SpinnerCircle
+  SkeletonPage
 };
 //# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -1 +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;"}
+{"version":3,"file":"index12.js","sources":["../src/components/skeleton/SkeletonPage.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonPageProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonText } from './SkeletonText';\nimport { SkeletonAvatar } from './SkeletonAvatar';\n\n/**\n * SkeletonPage - Pre-built page loading skeleton\n *\n * A ready-to-use skeleton layout for full page loading states.\n * Displays a common page structure with header, navigation, and content sections.\n *\n * @example\n * ```tsx\n * <SkeletonPage />\n * <SkeletonPage variant=\"dashboard\" />\n * <SkeletonPage variant=\"article\" animate={false} />\n * ```\n */\nexport const SkeletonPage = forwardRef<HTMLDivElement, SkeletonPageProps>(\n  (\n    {\n      variant = 'default',\n      animate = true,\n      baseColor = '#e0e0e0',\n      highlightColor = '#f5f5f5',\n      className,\n      style,\n      testId = 'skeleton-page',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const commonProps = {\n      animate,\n      baseColor,\n      highlightColor,\n    };\n\n    const renderDefault = () => (\n      <div className=\"space-y-6\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between border-b pb-4\">\n          <Skeleton width={200} height={32} {...commonProps} />\n          <div className=\"flex items-center gap-4\">\n            <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n            <SkeletonAvatar size={40} {...commonProps} />\n          </div>\n        </div>\n\n        {/* Content */}\n        <div className=\"space-y-4\">\n          <SkeletonText lines={3} {...commonProps} />\n          <div className=\"grid grid-cols-3 gap-4\">\n            <Skeleton height={120} borderRadius={8} {...commonProps} />\n            <Skeleton height={120} borderRadius={8} {...commonProps} />\n            <Skeleton height={120} borderRadius={8} {...commonProps} />\n          </div>\n          <SkeletonText lines={5} {...commonProps} />\n        </div>\n      </div>\n    );\n\n    const renderDashboard = () => (\n      <div className=\"space-y-6\">\n        {/* Header with stats */}\n        <div className=\"space-y-4\">\n          <div className=\"flex items-center justify-between\">\n            <Skeleton width={180} height={28} {...commonProps} />\n            <Skeleton width={120} height={36} borderRadius={6} {...commonProps} />\n          </div>\n          <div className=\"grid grid-cols-4 gap-4\">\n            {[...Array(4)].map((_, i) => (\n              <div key={i} className=\"p-4 border rounded-lg space-y-2\">\n                <Skeleton width={100} height={16} {...commonProps} />\n                <Skeleton width={80} height={32} {...commonProps} />\n                <Skeleton width={60} height={12} {...commonProps} />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Chart area */}\n        <Skeleton height={300} borderRadius={8} {...commonProps} />\n\n        {/* Table */}\n        <div className=\"space-y-3\">\n          <div className=\"flex gap-4\">\n            <Skeleton width={150} height={20} {...commonProps} />\n            <Skeleton width={150} height={20} {...commonProps} />\n            <Skeleton width={150} height={20} {...commonProps} />\n          </div>\n          {[...Array(5)].map((_, i) => (\n            <div key={i} className=\"flex gap-4\">\n              <Skeleton width={150} height={16} {...commonProps} />\n              <Skeleton width={150} height={16} {...commonProps} />\n              <Skeleton width={150} height={16} {...commonProps} />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n\n    const renderArticle = () => (\n      <div className=\"max-w-3xl mx-auto space-y-6\">\n        {/* Article header */}\n        <div className=\"space-y-4\">\n          <Skeleton width=\"80%\" height={40} {...commonProps} />\n          <div className=\"flex items-center gap-3\">\n            <SkeletonAvatar size={48} {...commonProps} />\n            <div className=\"space-y-2 flex-1\">\n              <Skeleton width={120} height={16} {...commonProps} />\n              <Skeleton width={180} height={14} {...commonProps} />\n            </div>\n          </div>\n        </div>\n\n        {/* Featured image */}\n        <Skeleton height={400} borderRadius={8} {...commonProps} />\n\n        {/* Article content */}\n        <div className=\"space-y-4\">\n          <SkeletonText lines={4} {...commonProps} />\n          <Skeleton height={200} borderRadius={8} {...commonProps} />\n          <SkeletonText lines={6} {...commonProps} />\n          <Skeleton height={250} borderRadius={8} {...commonProps} />\n          <SkeletonText lines={4} {...commonProps} />\n        </div>\n      </div>\n    );\n\n    const renderProfile = () => (\n      <div className=\"space-y-6\">\n        {/* Profile header */}\n        <div className=\"flex items-start gap-6 border-b pb-6\">\n          <SkeletonAvatar size={120} {...commonProps} />\n          <div className=\"flex-1 space-y-3\">\n            <Skeleton width={200} height={32} {...commonProps} />\n            <Skeleton width={150} height={20} {...commonProps} />\n            <SkeletonText lines={2} {...commonProps} />\n            <div className=\"flex gap-3\">\n              <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n              <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n            </div>\n          </div>\n        </div>\n\n        {/* Profile content grid */}\n        <div className=\"grid grid-cols-3 gap-6\">\n          {/* Left sidebar */}\n          <div className=\"space-y-4\">\n            <div className=\"space-y-2\">\n              <Skeleton width={100} height={20} {...commonProps} />\n              {[...Array(4)].map((_, i) => (\n                <Skeleton key={i} height={16} {...commonProps} />\n              ))}\n            </div>\n          </div>\n\n          {/* Main content */}\n          <div className=\"col-span-2 space-y-4\">\n            {[...Array(3)].map((_, i) => (\n              <div key={i} className=\"p-4 border rounded-lg space-y-3\">\n                <div className=\"flex items-center gap-3\">\n                  <SkeletonAvatar size={40} {...commonProps} />\n                  <div className=\"flex-1 space-y-2\">\n                    <Skeleton width={150} height={16} {...commonProps} />\n                    <Skeleton width={100} height={12} {...commonProps} />\n                  </div>\n                </div>\n                <SkeletonText lines={2} {...commonProps} />\n                <Skeleton height={200} borderRadius={6} {...commonProps} />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    );\n\n    const renderContent = () => {\n      switch (variant) {\n        case 'dashboard':\n          return renderDashboard();\n        case 'article':\n          return renderArticle();\n        case 'profile':\n          return renderProfile();\n        default:\n          return renderDefault();\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('w-full p-6', className)}\n        style={style}\n        role=\"status\"\n        aria-label=\"Loading page...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {renderContent()}\n      </div>\n    );\n  }\n);\n\nSkeletonPage.displayName = 'SkeletonPage';\n"],"names":[],"mappings":"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"}

package/dist/index13.cjs

@@ -2,9 +2,9 @@
 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(
+const classNames = require("./index3.cjs");
+const SpinnerCircle = react.forwardRef(
   ({
     size = 40,
     color = "#3b82f6",
@@ -12,7 +12,7 @@ const SpinnerRing = react.forwardRef(
     speed = "normal",
     className,
     style,
-    testId = "spinner-ring",
+    testId = "spinner-circle",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -30,22 +30,34 @@ const SpinnerRing = react.forwardRef(
         "aria-busy": "true",
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          "svg",
           {
-            className: "rounded-full",
+            className: "animate-spinner-rotate",
             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`
-            }
+              animationDuration: colors.getAnimationDuration(speed)
+            },
+            viewBox: "0 0 50 50",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                cx: "25",
+                cy: "25",
+                r: 25 - thickness * 2,
+                fill: "none",
+                stroke: color,
+                strokeWidth: thickness,
+                strokeDasharray: "80, 200",
+                strokeLinecap: "round"
+              }
+            )
           }
         )
       }
     );
   }
 );
-SpinnerRing.displayName = "SpinnerRing";
-exports.SpinnerRing = SpinnerRing;
+SpinnerCircle.displayName = "SpinnerCircle";
+exports.SpinnerCircle = SpinnerCircle;
 //# sourceMappingURL=index13.cjs.map

package/dist/index13.cjs.map

@@ -1 +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;;"}
+{"version":3,"file":"index13.cjs","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":["forwardRef","jsx","cn","normalizeSize","getAnimationDuration"],"mappings":";;;;;;AAeO,MAAM,gBAAgBA,MAAAA;AAAAA,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,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,mBAAmBC,OAAAA,qBAAqB,KAAK;AAAA,YAAA;AAAA,YAE/C,SAAQ;AAAA,YAER,UAAAH,2BAAAA;AAAAA,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.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { cn } from "./index3.js";
 import { getAnimationDuration, normalizeSize } from "./index4.js";
-const SpinnerRing = forwardRef(
+import { cn } from "./index3.js";
+const SpinnerCircle = forwardRef(
   ({
     size = 40,
     color = "#3b82f6",
@@ -10,7 +10,7 @@ const SpinnerRing = forwardRef(
     speed = "normal",
     className,
     style,
-    testId = "spinner-ring",
+    testId = "spinner-circle",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -28,24 +28,36 @@ const SpinnerRing = forwardRef(
         "aria-busy": "true",
         ...rest,
         children: /* @__PURE__ */ jsx(
-          "div",
+          "svg",
           {
-            className: "rounded-full",
+            className: "animate-spinner-rotate",
             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`
-            }
+              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"
+              }
+            )
           }
         )
       }
     );
   }
 );
-SpinnerRing.displayName = "SpinnerRing";
+SpinnerCircle.displayName = "SpinnerCircle";
 export {
-  SpinnerRing
+  SpinnerCircle
 };
 //# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -1 +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;"}
+{"version":3,"file":"index13.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/index14.cjs

@@ -4,23 +4,21 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
-const SpinnerDots = react.forwardRef(
+const SpinnerRing = react.forwardRef(
   ({
     size = 40,
     color = "#3b82f6",
-    dotCount = 8,
-    dotSize = 4,
+    secondaryColor = "rgba(0, 0, 0, 0.1)",
+    thickness = 4,
     speed = "normal",
     className,
     style,
-    testId = "spinner-dots",
+    testId = "spinner-ring",
     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",
       {
@@ -35,40 +33,20 @@ const SpinnerDots = react.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "relative",
+            className: "rounded-full",
             style: {
               width: colors.normalizeSize(size),
               height: colors.normalizeSize(size),
+              border: `${thickness}px solid ${secondaryColor}`,
+              borderTopColor: color,
               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;
+SpinnerRing.displayName = "SpinnerRing";
+exports.SpinnerRing = SpinnerRing;
 //# sourceMappingURL=index14.cjs.map

package/dist/index14.cjs.map

@@ -1 +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;;"}
+{"version":3,"file":"index14.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 * <SpinnerRing size={40} color=\"#3b82f6\" secondaryColor=\"#e0e0e0\" />\n * ```\n */\nexport const SpinnerRing = forwardRef<HTMLDivElement, SpinnerRingProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      secondaryColor = 'rgba(0, 0, 0, 0.1)',\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 ${secondaryColor}`,\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":";;;;;;AAgBO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,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,YAAY,cAAc;AAAA,cAC9C,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/index14.js

@@ -2,23 +2,21 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "./index3.js";
 import { getAnimationDuration, normalizeSize } from "./index4.js";
-const SpinnerDots = forwardRef(
+const SpinnerRing = forwardRef(
   ({
     size = 40,
     color = "#3b82f6",
-    dotCount = 8,
-    dotSize = 4,
+    secondaryColor = "rgba(0, 0, 0, 0.1)",
+    thickness = 4,
     speed = "normal",
     className,
     style,
-    testId = "spinner-dots",
+    testId = "spinner-ring",
     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",
       {
@@ -33,42 +31,22 @@ const SpinnerDots = forwardRef(
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "relative",
+            className: "rounded-full",
             style: {
               width: normalizeSize(size),
               height: normalizeSize(size),
+              border: `${thickness}px solid ${secondaryColor}`,
+              borderTopColor: color,
               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";
+SpinnerRing.displayName = "SpinnerRing";
 export {
-  SpinnerDots
+  SpinnerRing
 };
 //# sourceMappingURL=index14.js.map

package/dist/index14.js.map

@@ -1 +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;"}
+{"version":3,"file":"index14.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 * <SpinnerRing size={40} color=\"#3b82f6\" secondaryColor=\"#e0e0e0\" />\n * ```\n */\nexport const SpinnerRing = forwardRef<HTMLDivElement, SpinnerRingProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      secondaryColor = 'rgba(0, 0, 0, 0.1)',\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 ${secondaryColor}`,\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":";;;;AAgBO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,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,YAAY,cAAc;AAAA,cAC9C,gBAAgB;AAAA,cAChB,WAAW,kBAAkB,qBAAqB,KAAK,CAAC;AAAA,YAAA;AAAA,UAC1D;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}