premium-react-loaders 1.0.2 → 1.2.0

package/dist/index13.cjs

@@ -2,62 +2,81 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const Skeleton = require("./index5.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
-const SpinnerCircle = react.forwardRef(
+const SkeletonForm = react.forwardRef(
   ({
-    size = 40,
-    color = "#3b82f6",
-    thickness = 4,
-    speed = "normal",
+    fields = 3,
+    showLabels = true,
+    showButton = true,
+    gap = 16,
+    buttonWidth = "120px",
+    buttonPosition = "left",
+    animate = true,
+    baseColor,
+    highlightColor,
     className,
     style,
-    testId = "spinner-circle",
+    testId = "skeleton-form",
     visible = true,
-    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const gapValue = colors.normalizeSize(gap);
+    const buttonAlign = buttonPosition === "left" ? "justify-start" : buttonPosition === "right" ? "justify-end" : "justify-center";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        className: classNames.cn("w-full", className),
+        style: { ...style, display: "flex", flexDirection: "column", gap: gapValue },
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": "Loading form...",
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            className: "animate-spinner-rotate",
-            style: {
-              width: colors.normalizeSize(size),
-              height: colors.normalizeSize(size),
-              animationDuration: colors.getAnimationDuration(speed)
-            },
-            viewBox: "0 0 50 50",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "circle",
+        children: [
+          Array.from({ length: fields }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+            showLabels && /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton.Skeleton,
               {
-                cx: "25",
-                cy: "25",
-                r: 25 - thickness * 2,
-                fill: "none",
-                stroke: color,
-                strokeWidth: thickness,
-                strokeDasharray: "80, 200",
-                strokeLinecap: "round"
+                width: "30%",
+                height: "0.875rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton.Skeleton,
+              {
+                width: "100%",
+                height: "2.5rem",
+                variant: "rectangular",
+                animate,
+                baseColor,
+                highlightColor
               }
             )
-          }
-        )
+          ] }, index)),
+          showButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames.cn("flex", buttonAlign), style: { marginTop: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Skeleton.Skeleton,
+            {
+              width: buttonWidth,
+              height: "2.5rem",
+              variant: "rounded",
+              animate,
+              baseColor,
+              highlightColor
+            }
+          ) })
+        ]
       }
     );
   }
 );
-SpinnerCircle.displayName = "SpinnerCircle";
-exports.SpinnerCircle = SpinnerCircle;
+SkeletonForm.displayName = "SkeletonForm";
+exports.SkeletonForm = SkeletonForm;
 //# sourceMappingURL=index13.cjs.map

package/dist/index13.cjs.map

@@ -1 +1 @@
-{"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;;"}
+{"version":3,"file":"index13.cjs","sources":["../src/components/skeleton/SkeletonForm.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonFormProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonForm - Form loading skeleton\n *\n * A skeleton loader for form layouts with configurable fields, labels, and submit button.\n *\n * @example\n * ```tsx\n * <SkeletonForm />\n * <SkeletonForm fields={5} showLabels={true} />\n * <SkeletonForm fields={3} showButton={false} />\n * <SkeletonForm fields={4} buttonPosition=\"right\" />\n * ```\n */\nexport const SkeletonForm = forwardRef<HTMLDivElement, SkeletonFormProps>(\n  (\n    {\n      fields = 3,\n      showLabels = true,\n      showButton = true,\n      gap = 16,\n      buttonWidth = '120px',\n      buttonPosition = 'left',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-form',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const gapValue = normalizeSize(gap);\n    const buttonAlign =\n      buttonPosition === 'left'\n        ? 'justify-start'\n        : buttonPosition === 'right'\n        ? 'justify-end'\n        : 'justify-center';\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('w-full', className)}\n        style={{ ...style, display: 'flex', flexDirection: 'column', gap: gapValue }}\n        role=\"status\"\n        aria-label=\"Loading form...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {/* Form Fields */}\n        {Array.from({ length: fields }).map((_, index) => (\n          <div key={index} className=\"w-full\" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n            {/* Field Label */}\n            {showLabels && (\n              <Skeleton\n                width=\"30%\"\n                height=\"0.875rem\"\n                variant=\"text\"\n                animate={animate}\n                baseColor={baseColor}\n                highlightColor={highlightColor}\n              />\n            )}\n            {/* Field Input */}\n            <Skeleton\n              width=\"100%\"\n              height=\"2.5rem\"\n              variant=\"rectangular\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          </div>\n        ))}\n\n        {/* Submit Button */}\n        {showButton && (\n          <div className={cn('flex', buttonAlign)} style={{ marginTop: '8px' }}>\n            <Skeleton\n              width={buttonWidth}\n              height=\"2.5rem\"\n              variant=\"rounded\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nSkeletonForm.displayName = 'SkeletonForm';\n"],"names":["forwardRef","normalizeSize","jsxs","cn","jsx","Skeleton"],"mappings":";;;;;;;AAkBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,SAAS;AAAA,IACT,aAAa;AAAA,IACb,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,WAAWC,OAAAA,cAAc,GAAG;AAClC,UAAM,cACJ,mBAAmB,SACf,kBACA,mBAAmB,UACnB,gBACA;AAEN,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,UAAU,SAAS;AAAA,QACjC,OAAO,EAAE,GAAG,OAAO,SAAS,QAAQ,eAAe,UAAU,KAAK,SAAA;AAAA,QAClE,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAA,CAAQ,EAAE,IAAI,CAAC,GAAG,UACtCD,2BAAAA,KAAC,SAAgB,WAAU,UAAS,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAA,GAEzF,UAAA;AAAA,YAAA,cACCE,2BAAAA;AAAAA,cAACC,SAAAA;AAAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAIJD,2BAAAA;AAAAA,cAACC,SAAAA;AAAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,EAAA,GApBQ,KAqBV,CACD;AAAA,UAGA,cACCD,2BAAAA,IAAC,OAAA,EAAI,WAAWD,WAAAA,GAAG,QAAQ,WAAW,GAAG,OAAO,EAAE,WAAW,MAAA,GAC3D,UAAAC,2BAAAA;AAAAA,YAACC,SAAAA;AAAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAO;AAAA,cACP,SAAQ;AAAA,cACR;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA,EACF,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,aAAa,cAAc;;"}

package/dist/index13.js

@@ -1,63 +1,82 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { getAnimationDuration, normalizeSize } from "./index4.js";
+import { Skeleton } from "./index5.js";
+import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
-const SpinnerCircle = forwardRef(
+const SkeletonForm = forwardRef(
   ({
-    size = 40,
-    color = "#3b82f6",
-    thickness = 4,
-    speed = "normal",
+    fields = 3,
+    showLabels = true,
+    showButton = true,
+    gap = 16,
+    buttonWidth = "120px",
+    buttonPosition = "left",
+    animate = true,
+    baseColor,
+    highlightColor,
     className,
     style,
-    testId = "spinner-circle",
+    testId = "skeleton-form",
     visible = true,
-    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
-    return /* @__PURE__ */ jsx(
+    const gapValue = normalizeSize(gap);
+    const buttonAlign = buttonPosition === "left" ? "justify-start" : buttonPosition === "right" ? "justify-end" : "justify-center";
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
-        style,
+        className: cn("w-full", className),
+        style: { ...style, display: "flex", flexDirection: "column", gap: gapValue },
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": "Loading form...",
         "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",
+        children: [
+          Array.from({ length: fields }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: "w-full", style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+            showLabels && /* @__PURE__ */ jsx(
+              Skeleton,
               {
-                cx: "25",
-                cy: "25",
-                r: 25 - thickness * 2,
-                fill: "none",
-                stroke: color,
-                strokeWidth: thickness,
-                strokeDasharray: "80, 200",
-                strokeLinecap: "round"
+                width: "30%",
+                height: "0.875rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                width: "100%",
+                height: "2.5rem",
+                variant: "rectangular",
+                animate,
+                baseColor,
+                highlightColor
               }
             )
-          }
-        )
+          ] }, index)),
+          showButton && /* @__PURE__ */ jsx("div", { className: cn("flex", buttonAlign), style: { marginTop: "8px" }, children: /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              width: buttonWidth,
+              height: "2.5rem",
+              variant: "rounded",
+              animate,
+              baseColor,
+              highlightColor
+            }
+          ) })
+        ]
       }
     );
   }
 );
-SpinnerCircle.displayName = "SpinnerCircle";
+SkeletonForm.displayName = "SkeletonForm";
 export {
-  SpinnerCircle
+  SkeletonForm
 };
 //# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"index13.js","sources":["../src/components/skeleton/SkeletonForm.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonFormProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonForm - Form loading skeleton\n *\n * A skeleton loader for form layouts with configurable fields, labels, and submit button.\n *\n * @example\n * ```tsx\n * <SkeletonForm />\n * <SkeletonForm fields={5} showLabels={true} />\n * <SkeletonForm fields={3} showButton={false} />\n * <SkeletonForm fields={4} buttonPosition=\"right\" />\n * ```\n */\nexport const SkeletonForm = forwardRef<HTMLDivElement, SkeletonFormProps>(\n  (\n    {\n      fields = 3,\n      showLabels = true,\n      showButton = true,\n      gap = 16,\n      buttonWidth = '120px',\n      buttonPosition = 'left',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-form',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const gapValue = normalizeSize(gap);\n    const buttonAlign =\n      buttonPosition === 'left'\n        ? 'justify-start'\n        : buttonPosition === 'right'\n        ? 'justify-end'\n        : 'justify-center';\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('w-full', className)}\n        style={{ ...style, display: 'flex', flexDirection: 'column', gap: gapValue }}\n        role=\"status\"\n        aria-label=\"Loading form...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {/* Form Fields */}\n        {Array.from({ length: fields }).map((_, index) => (\n          <div key={index} className=\"w-full\" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n            {/* Field Label */}\n            {showLabels && (\n              <Skeleton\n                width=\"30%\"\n                height=\"0.875rem\"\n                variant=\"text\"\n                animate={animate}\n                baseColor={baseColor}\n                highlightColor={highlightColor}\n              />\n            )}\n            {/* Field Input */}\n            <Skeleton\n              width=\"100%\"\n              height=\"2.5rem\"\n              variant=\"rectangular\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          </div>\n        ))}\n\n        {/* Submit Button */}\n        {showButton && (\n          <div className={cn('flex', buttonAlign)} style={{ marginTop: '8px' }}>\n            <Skeleton\n              width={buttonWidth}\n              height=\"2.5rem\"\n              variant=\"rounded\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nSkeletonForm.displayName = 'SkeletonForm';\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,SAAS;AAAA,IACT,aAAa;AAAA,IACb,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,WAAW,cAAc,GAAG;AAClC,UAAM,cACJ,mBAAmB,SACf,kBACA,mBAAmB,UACnB,gBACA;AAEN,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,UAAU,SAAS;AAAA,QACjC,OAAO,EAAE,GAAG,OAAO,SAAS,QAAQ,eAAe,UAAU,KAAK,SAAA;AAAA,QAClE,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAA,CAAQ,EAAE,IAAI,CAAC,GAAG,UACtC,qBAAC,SAAgB,WAAU,UAAS,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAA,GAEzF,UAAA;AAAA,YAAA,cACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAIJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,EAAA,GApBQ,KAqBV,CACD;AAAA,UAGA,cACC,oBAAC,OAAA,EAAI,WAAW,GAAG,QAAQ,WAAW,GAAG,OAAO,EAAE,WAAW,MAAA,GAC3D,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAO;AAAA,cACP,SAAQ;AAAA,cACR;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA,EACF,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,aAAa,cAAc;"}

package/dist/index14.cjs

@@ -2,23 +2,27 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const hooks = require("./index31.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
-const SpinnerRing = react.forwardRef(
+const SpinnerCircle = react.forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
-    secondaryColor = "rgba(0, 0, 0, 0.1)",
     thickness = 4,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     className,
     style,
-    testId = "spinner-ring",
+    testId = "spinner-circle",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -31,22 +35,35 @@ 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 ${secondaryColor}`,
-              borderTopColor: color,
-              animation: `spinner-rotate ${colors.getAnimationDuration(speed)} linear infinite`
-            }
+              animationDuration: effectiveDuration,
+              animationDirection: reverse ? "reverse" : "normal"
+            },
+            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=index14.cjs.map

package/dist/index14.cjs.map

@@ -1 +1 @@
-{"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;;"}
+{"version":3,"file":"index14.cjs","sources":["../src/components/spinner/SpinnerCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerCircleProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration } 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=\"lg\" thickness={3} speed=\"fast\" />\n * <SpinnerCircle size=\"md\" reverse />\n * ```\n */\nexport const SpinnerCircle = forwardRef<HTMLDivElement, SpinnerCircleProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\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    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', 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: effectiveDuration,\n            animationDirection: reverse ? 'reverse' : 'normal',\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","useReducedMotion","getEffectiveDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;;AAgBO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,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,mBAAmB;AAAA,cACnB,oBAAoB,UAAU,YAAY;AAAA,YAAA;AAAA,YAE5C,SAAQ;AAAA,YAER,UAAAF,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/index14.js

@@ -1,22 +1,26 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useReducedMotion, getEffectiveDuration } from "./index31.js";
 import { cn } from "./index3.js";
-import { getAnimationDuration, normalizeSize } from "./index4.js";
-const SpinnerRing = forwardRef(
+import { normalizeSize } from "./index4.js";
+const SpinnerCircle = forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
-    secondaryColor = "rgba(0, 0, 0, 0.1)",
     thickness = 4,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     className,
     style,
-    testId = "spinner-ring",
+    testId = "spinner-circle",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -29,24 +33,37 @@ 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 ${secondaryColor}`,
-              borderTopColor: color,
-              animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`
-            }
+              animationDuration: effectiveDuration,
+              animationDirection: reverse ? "reverse" : "normal"
+            },
+            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=index14.js.map

package/dist/index14.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"index14.js","sources":["../src/components/spinner/SpinnerCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerCircleProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration } 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=\"lg\" thickness={3} speed=\"fast\" />\n * <SpinnerCircle size=\"md\" reverse />\n * ```\n */\nexport const SpinnerCircle = forwardRef<HTMLDivElement, SpinnerCircleProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\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    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', 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: effectiveDuration,\n            animationDirection: reverse ? 'reverse' : 'normal',\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":";;;;;AAgBO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,uBAAuB,iBAAA;AAC7B,UAAM,oBAAoB,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,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;AAAA,cACnB,oBAAoB,UAAU,YAAY;AAAA,YAAA;AAAA,YAE5C,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/index15.cjs

@@ -2,26 +2,28 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const colors = require("./index4.cjs");
+const hooks = require("./index31.cjs");
 const classNames = require("./index3.cjs");
-const SpinnerDots = react.forwardRef(
+const colors = require("./index4.cjs");
+const SpinnerRing = react.forwardRef(
   ({
-    size = 40,
+    size = "md",
     color = "#3b82f6",
-    dotCount = 8,
-    dotSize = 4,
+    secondaryColor = "rgba(0, 0, 0, 0.1)",
+    thickness = 4,
     speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     className,
     style,
-    testId = "spinner-dots",
+    testId = "spinner-ring",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const sizeValue = colors.parseSizeToNumber(size, 40);
-    const dotSizeValue = colors.parseSizeToNumber(dotSize, 4);
-    const radius = (sizeValue - dotSizeValue) / 2;
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -36,40 +38,21 @@ const SpinnerDots = react.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "relative",
+            className: "rounded-full",
             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
-              );
-            })
+              border: `${thickness}px solid ${secondaryColor}`,
+              borderTopColor: color,
+              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+              animationDirection: reverse ? "reverse" : "normal"
+            }
           }
         )
       }
     );
   }
 );
-SpinnerDots.displayName = "SpinnerDots";
-exports.SpinnerDots = SpinnerDots;
+SpinnerRing.displayName = "SpinnerRing";
+exports.SpinnerRing = SpinnerRing;
 //# sourceMappingURL=index15.cjs.map

package/dist/index15.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index15.cjs","sources":["../src/components/spinner/SpinnerDots.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerDotsProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration, parseSizeToNumber } 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 = parseSizeToNumber(size, 40);\n    const dotSizeValue = parseSizeToNumber(dotSize, 4);\n    const radius = (sizeValue - dotSizeValue) / 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","parseSizeToNumber","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,YAAYC,OAAAA,kBAAkB,MAAM,EAAE;AAC5C,UAAM,eAAeA,OAAAA,kBAAkB,SAAS,CAAC;AACjD,UAAM,UAAU,YAAY,gBAAgB;AAE5C,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":"index15.cjs","sources":["../src/components/spinner/SpinnerRing.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerRingProps } from '../../types';\nimport { cn, normalizeSize, useReducedMotion, getEffectiveDuration } 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=\"lg\" color=\"#8b5cf6\" />\n * <SpinnerRing size=\"sm\" thickness={3} speed=\"slow\" />\n * <SpinnerRing size=\"md\" color=\"#3b82f6\" secondaryColor=\"#e0e0e0\" reverse />\n * ```\n */\nexport const SpinnerRing = forwardRef<HTMLDivElement, SpinnerRingProps>(\n  (\n    {\n      size = 'md',\n      color = '#3b82f6',\n      secondaryColor = 'rgba(0, 0, 0, 0.1)',\n      thickness = 4,\n      speed = 'normal',\n      reverse = false,\n      respectMotionPreference = true,\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    const prefersReducedMotion = useReducedMotion();\n    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', 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 ${effectiveDuration} linear infinite`,\n            animationDirection: reverse ? 'reverse' : 'normal',\n          }}\n        />\n      </div>\n    );\n  }\n);\n\nSpinnerRing.displayName = 'SpinnerRing';\n"],"names":["forwardRef","useReducedMotion","getEffectiveDuration","jsx","cn","normalizeSize"],"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,UAAU;AAAA,IACV,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,uBAAuBC,MAAAA,iBAAA;AAC7B,UAAM,oBAAoBC,MAAAA,qBAAqB,OAAO,yBAAyB,oBAAoB;AAEnG,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,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,kBAAkB,iBAAiB;AAAA,cAC9C,oBAAoB,UAAU,YAAY;AAAA,YAAA;AAAA,UAC5C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}