premium-react-loaders 1.0.1 → 1.0.2

package/dist/components/progress/ProgressBar.d.ts

@@ -9,6 +9,8 @@ import { ProgressBarProps } from '../../types';
  * <ProgressBar value={75} showValue />
  * <ProgressBar indeterminate />
  * <ProgressBar value={50} height={8} color="#8b5cf6" />
+ * <ProgressBar value={50} buffer={75} /> // YouTube-style buffering
+ * <ProgressBar value={60} gradient /> // Gradient progress
  * ```
  */
 export declare const ProgressBar: import('react').ForwardRefExoticComponent<ProgressBarProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/progress/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GAqEvB,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,6GAuGvB,CAAC"}

package/dist/components/progress/ProgressCircle.d.ts

@@ -8,7 +8,8 @@ import { ProgressCircleProps } from '../../types';
  * ```tsx
  * <ProgressCircle value={75} showValue />
  * <ProgressCircle value={50} size={80} thickness={6} />
- * <ProgressCircle indeterminate />
+ * <ProgressCircle indeterminate speed="fast" />
+ * <ProgressCircle value={50} buffer={75} />
  * ```
  */
 export declare const ProgressCircle: import('react').ForwardRefExoticComponent<ProgressCircleProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/progress/ProgressCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,gHAyF1B,CAAC"}
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressCircle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,gHA+G1B,CAAC"}

package/dist/components/progress/ProgressRing.d.ts

@@ -8,7 +8,8 @@ import { ProgressRingProps } from '../../types';
  * ```tsx
  * <ProgressRing value={75} showValue />
  * <ProgressRing value={60} gradient secondaryColor="#8b5cf6" />
- * <ProgressRing indeterminate />
+ * <ProgressRing indeterminate speed="fast" />
+ * <ProgressRing value={50} buffer={75} />
  * ```
  */
 export declare const ProgressRing: import('react').ForwardRefExoticComponent<ProgressRingProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/progress/ProgressRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,8GAmGxB,CAAC"}
+{"version":3,"file":"ProgressRing.d.ts","sourceRoot":"","sources":["../../../src/components/progress/ProgressRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GAyHxB,CAAC"}

package/dist/components/skeleton/SkeletonText.d.ts

@@ -7,7 +7,7 @@ import { SkeletonTextProps } from '../../types';
  * @example
  * ```tsx
  * <SkeletonText lines={3} />
- * <SkeletonText lines={5} gap={8} />
+ * <SkeletonText lines={5} gap={8} lastLineWidth="60%" />
  * ```
  */
 export declare const SkeletonText: import('react').ForwardRefExoticComponent<SkeletonTextProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/skeleton/SkeletonText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GAqDxB,CAAC"}
+{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,8GAsDxB,CAAC"}

package/dist/components/spinner/SpinnerDots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerDots.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAkEvB,CAAC"}
+{"version":3,"file":"SpinnerDots.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAmEvB,CAAC"}

package/dist/components/spinner/SpinnerRing.d.ts

@@ -8,6 +8,7 @@ import { SpinnerRingProps } from '../../types';
  * ```tsx
  * <SpinnerRing size={40} color="#8b5cf6" />
  * <SpinnerRing size={32} thickness={3} speed="slow" />
+ * <SpinnerRing size={40} color="#3b82f6" secondaryColor="#e0e0e0" />
  * ```
  */
 export declare const SpinnerRing: import('react').ForwardRefExoticComponent<SpinnerRingProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/spinner/SpinnerRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerRing.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GA0CvB,CAAC"}
+{"version":3,"file":"SpinnerRing.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,6GA2CvB,CAAC"}

package/dist/index.cjs

@@ -23,7 +23,7 @@ const PulseDots = require("./index21.cjs");
 const PulseWave = require("./index22.cjs");
 const PulseBars = require("./index23.cjs");
 const LoaderOverlay = require("./index24.cjs");
-const version = "1.0.0";
+const version = "1.0.2";
 exports.cn = classNames.cn;
 exports.getAnimationDuration = colors.getAnimationDuration;
 exports.normalizeSize = colors.normalizeSize;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.0';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.2';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -2,5 +2,5 @@ export * from './components';
 export type * from './types';
 export { cn } from './utils/classNames';
 export { getAnimationDuration, normalizeSize } from './utils/colors';
-export declare const version = "1.0.0";
+export declare const version = "1.0.2";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -21,7 +21,7 @@ import { PulseDots } from "./index21.js";
 import { PulseWave } from "./index22.js";
 import { PulseBars } from "./index23.js";
 import { LoaderOverlay } from "./index24.js";
-const version = "1.0.0";
+const version = "1.0.2";
 export {
   LoaderOverlay,
   ProgressBar,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.0';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.2';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;"}

package/dist/index14.cjs

@@ -8,6 +8,7 @@ const SpinnerRing = react.forwardRef(
   ({
     size = 40,
     color = "#3b82f6",
+    secondaryColor = "rgba(0, 0, 0, 0.1)",
     thickness = 4,
     speed = "normal",
     className,
@@ -36,7 +37,7 @@ const SpinnerRing = react.forwardRef(
             style: {
               width: colors.normalizeSize(size),
               height: colors.normalizeSize(size),
-              border: `${thickness}px solid rgba(0, 0, 0, 0.1)`,
+              border: `${thickness}px solid ${secondaryColor}`,
               borderTopColor: color,
               animation: `spinner-rotate ${colors.getAnimationDuration(speed)} linear infinite`
             }

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 * ```\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":"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

@@ -6,6 +6,7 @@ const SpinnerRing = forwardRef(
   ({
     size = 40,
     color = "#3b82f6",
+    secondaryColor = "rgba(0, 0, 0, 0.1)",
     thickness = 4,
     speed = "normal",
     className,
@@ -34,7 +35,7 @@ const SpinnerRing = forwardRef(
             style: {
               width: normalizeSize(size),
               height: normalizeSize(size),
-              border: `${thickness}px solid rgba(0, 0, 0, 0.1)`,
+              border: `${thickness}px solid ${secondaryColor}`,
               borderTopColor: color,
               animation: `spinner-rotate ${getAnimationDuration(speed)} linear infinite`
             }

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 * ```\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":"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;"}

package/dist/index15.cjs

@@ -2,8 +2,8 @@
 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 classNames = require("./index3.cjs");
 const SpinnerDots = react.forwardRef(
   ({
     size = 40,
@@ -19,8 +19,9 @@ const SpinnerDots = react.forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
-    const radius = (sizeValue - dotSize) / 2;
+    const sizeValue = colors.parseSizeToNumber(size, 40);
+    const dotSizeValue = colors.parseSizeToNumber(dotSize, 4);
+    const radius = (sizeValue - dotSizeValue) / 2;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {

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 } 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":"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;;"}

package/dist/index15.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { getAnimationDuration, normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
-import { getAnimationDuration, normalizeSize } from "./index4.js";
 const SpinnerDots = forwardRef(
   ({
     size = 40,
@@ -17,8 +17,9 @@ const SpinnerDots = forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
-    const radius = (sizeValue - dotSize) / 2;
+    const sizeValue = parseSizeToNumber(size, 40);
+    const dotSizeValue = parseSizeToNumber(dotSize, 4);
+    const radius = (sizeValue - dotSizeValue) / 2;
     return /* @__PURE__ */ jsx(
       "div",
       {

package/dist/index15.js.map

@@ -1 +1 @@
-{"version":3,"file":"index15.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":"index15.js","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":[],"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,kBAAkB,MAAM,EAAE;AAC5C,UAAM,eAAe,kBAAkB,SAAS,CAAC;AACjD,UAAM,UAAU,YAAY,gBAAgB;AAE5C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,IAAI;AAAA,cACzB,QAAQ,cAAc,IAAI;AAAA,cAC1B,WAAW,kBAAkB,qBAAqB,KAAK,CAAC;AAAA,YAAA;AAAA,YAGzD,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAClD,oBAAM,QAAS,MAAM,WAAY;AACjC,oBAAM,SAAU,QAAQ,KAAK,KAAM;AACnC,oBAAM,IAAI,SAAS,KAAK,IAAI,MAAM,IAAI;AACtC,oBAAM,IAAI,SAAS,KAAK,IAAI,MAAM,IAAI;AAEtC,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,cAAc,OAAO;AAAA,oBAC5B,QAAQ,cAAc,OAAO;AAAA,oBAC7B,iBAAiB;AAAA,oBACjB,MAAM,GAAG,CAAC;AAAA,oBACV,KAAK,GAAG,CAAC;AAAA,oBACT,SAAS,IAAK,QAAQ,WAAY;AAAA;AAAA,kBAAA;AAAA,gBACpC;AAAA,gBATK;AAAA,cAAA;AAAA,YAYX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}

package/dist/index16.cjs

@@ -18,7 +18,7 @@ const SpinnerBars = react.forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
+    const sizeValue = colors.parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2));
     const animationDuration = colors.getAnimationDuration(speed);
     return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/index16.cjs.map

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

package/dist/index16.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { normalizeSize, getAnimationDuration } from "./index4.js";
+import { normalizeSize, getAnimationDuration, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const SpinnerBars = forwardRef(
   ({
@@ -16,7 +16,7 @@ const SpinnerBars = forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
+    const sizeValue = parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2));
     const animationDuration = getAnimationDuration(speed);
     return /* @__PURE__ */ jsx(

package/dist/index16.js.map

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

package/dist/index17.cjs

@@ -18,7 +18,7 @@ const SpinnerGrid = react.forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
+    const sizeValue = colors.parseSizeToNumber(size, 40);
     const cellSize = Math.floor(sizeValue / gridSize) - 2;
     const animationDuration = colors.getAnimationDuration(speed);
     return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/index17.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index17.cjs","sources":["../src/components/spinner/SpinnerGrid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerGridProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerGrid - Grid of fading squares\n *\n * A spinner with a grid of squares that fade in and out in a pattern.\n *\n * @example\n * ```tsx\n * <SpinnerGrid size={40} color=\"#3b82f6\" />\n * <SpinnerGrid size={48} gridSize={4} />\n * ```\n */\nexport const SpinnerGrid = forwardRef<HTMLDivElement, SpinnerGridProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      gridSize = 3,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-grid',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n    const cellSize = Math.floor(sizeValue / gridSize) - 2;\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"grid gap-0.5\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            gridTemplateColumns: `repeat(${gridSize}, 1fr)`,\n          }}\n        >\n          {Array.from({ length: gridSize * gridSize }).map((_, index) => {\n            const row = Math.floor(index / gridSize);\n            const col = index % gridSize;\n            const delay = (row + col) * 0.1;\n\n            return (\n              <div\n                key={index}\n                className=\"rounded-sm\"\n                style={{\n                  width: `${cellSize}px`,\n                  height: `${cellSize}px`,\n                  backgroundColor: color,\n                  animation: `fade-pulse ${animationDuration} ease-in-out infinite`,\n                  animationDelay: `${delay}s`,\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerGrid.displayName = 'SpinnerGrid';\n"],"names":["forwardRef","getAnimationDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;AAeO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,WAAW,KAAK,MAAM,YAAY,QAAQ,IAAI;AACpD,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,qBAAqB,UAAU,QAAQ;AAAA,YAAA;AAAA,YAGxC,UAAA,MAAM,KAAK,EAAE,QAAQ,WAAW,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAC7D,oBAAM,MAAM,KAAK,MAAM,QAAQ,QAAQ;AACvC,oBAAM,MAAM,QAAQ;AACpB,oBAAM,SAAS,MAAM,OAAO;AAE5B,qBACEF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,GAAG,QAAQ;AAAA,oBAClB,QAAQ,GAAG,QAAQ;AAAA,oBACnB,iBAAiB;AAAA,oBACjB,WAAW,cAAc,iBAAiB;AAAA,oBAC1C,gBAAgB,GAAG,KAAK;AAAA,kBAAA;AAAA,gBAC1B;AAAA,gBARK;AAAA,cAAA;AAAA,YAWX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"index17.cjs","sources":["../src/components/spinner/SpinnerGrid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerGridProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration, parseSizeToNumber } from '../../utils';\n\n/**\n * SpinnerGrid - Grid of fading squares\n *\n * A spinner with a grid of squares that fade in and out in a pattern.\n *\n * @example\n * ```tsx\n * <SpinnerGrid size={40} color=\"#3b82f6\" />\n * <SpinnerGrid size={48} gridSize={4} />\n * ```\n */\nexport const SpinnerGrid = forwardRef<HTMLDivElement, SpinnerGridProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      gridSize = 3,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-grid',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const cellSize = Math.floor(sizeValue / gridSize) - 2;\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"grid gap-0.5\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            gridTemplateColumns: `repeat(${gridSize}, 1fr)`,\n          }}\n        >\n          {Array.from({ length: gridSize * gridSize }).map((_, index) => {\n            const row = Math.floor(index / gridSize);\n            const col = index % gridSize;\n            const delay = (row + col) * 0.1;\n\n            return (\n              <div\n                key={index}\n                className=\"rounded-sm\"\n                style={{\n                  width: `${cellSize}px`,\n                  height: `${cellSize}px`,\n                  backgroundColor: color,\n                  animation: `fade-pulse ${animationDuration} ease-in-out infinite`,\n                  animationDelay: `${delay}s`,\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerGrid.displayName = 'SpinnerGrid';\n"],"names":["forwardRef","parseSizeToNumber","getAnimationDuration","jsx","cn","normalizeSize"],"mappings":";;;;;;AAeO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAYC,OAAAA,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,YAAY,QAAQ,IAAI;AACpD,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AAEpD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,qBAAqB,UAAU,QAAQ;AAAA,YAAA;AAAA,YAGxC,UAAA,MAAM,KAAK,EAAE,QAAQ,WAAW,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAC7D,oBAAM,MAAM,KAAK,MAAM,QAAQ,QAAQ;AACvC,oBAAM,MAAM,QAAQ;AACpB,oBAAM,SAAS,MAAM,OAAO;AAE5B,qBACEF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,GAAG,QAAQ;AAAA,oBAClB,QAAQ,GAAG,QAAQ;AAAA,oBACnB,iBAAiB;AAAA,oBACjB,WAAW,cAAc,iBAAiB;AAAA,oBAC1C,gBAAgB,GAAG,KAAK;AAAA,kBAAA;AAAA,gBAC1B;AAAA,gBARK;AAAA,cAAA;AAAA,YAWX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;;"}

package/dist/index17.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "./index3.js";
-import { normalizeSize, getAnimationDuration } from "./index4.js";
+import { normalizeSize, getAnimationDuration, parseSizeToNumber } from "./index4.js";
 const SpinnerGrid = forwardRef(
   ({
     size = 40,
@@ -16,7 +16,7 @@ const SpinnerGrid = forwardRef(
     ...rest
   }, ref) => {
     if (!visible) return null;
-    const sizeValue = typeof size === "number" ? size : parseInt(String(size), 10);
+    const sizeValue = parseSizeToNumber(size, 40);
     const cellSize = Math.floor(sizeValue / gridSize) - 2;
     const animationDuration = getAnimationDuration(speed);
     return /* @__PURE__ */ jsx(

package/dist/index17.js.map

@@ -1 +1 @@
-{"version":3,"file":"index17.js","sources":["../src/components/spinner/SpinnerGrid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerGridProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerGrid - Grid of fading squares\n *\n * A spinner with a grid of squares that fade in and out in a pattern.\n *\n * @example\n * ```tsx\n * <SpinnerGrid size={40} color=\"#3b82f6\" />\n * <SpinnerGrid size={48} gridSize={4} />\n * ```\n */\nexport const SpinnerGrid = forwardRef<HTMLDivElement, SpinnerGridProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      gridSize = 3,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-grid',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = typeof size === 'number' ? size : parseInt(String(size), 10);\n    const cellSize = Math.floor(sizeValue / gridSize) - 2;\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"grid gap-0.5\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            gridTemplateColumns: `repeat(${gridSize}, 1fr)`,\n          }}\n        >\n          {Array.from({ length: gridSize * gridSize }).map((_, index) => {\n            const row = Math.floor(index / gridSize);\n            const col = index % gridSize;\n            const delay = (row + col) * 0.1;\n\n            return (\n              <div\n                key={index}\n                className=\"rounded-sm\"\n                style={{\n                  width: `${cellSize}px`,\n                  height: `${cellSize}px`,\n                  backgroundColor: color,\n                  animation: `fade-pulse ${animationDuration} ease-in-out infinite`,\n                  animationDelay: `${delay}s`,\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerGrid.displayName = 'SpinnerGrid';\n"],"names":[],"mappings":";;;;AAeO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,OAAO,SAAS,WAAW,OAAO,SAAS,OAAO,IAAI,GAAG,EAAE;AAC7E,UAAM,WAAW,KAAK,MAAM,YAAY,QAAQ,IAAI;AACpD,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,IAAI;AAAA,cACzB,QAAQ,cAAc,IAAI;AAAA,cAC1B,qBAAqB,UAAU,QAAQ;AAAA,YAAA;AAAA,YAGxC,UAAA,MAAM,KAAK,EAAE,QAAQ,WAAW,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAC7D,oBAAM,MAAM,KAAK,MAAM,QAAQ,QAAQ;AACvC,oBAAM,MAAM,QAAQ;AACpB,oBAAM,SAAS,MAAM,OAAO;AAE5B,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,GAAG,QAAQ;AAAA,oBAClB,QAAQ,GAAG,QAAQ;AAAA,oBACnB,iBAAiB;AAAA,oBACjB,WAAW,cAAc,iBAAiB;AAAA,oBAC1C,gBAAgB,GAAG,KAAK;AAAA,kBAAA;AAAA,gBAC1B;AAAA,gBARK;AAAA,cAAA;AAAA,YAWX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"index17.js","sources":["../src/components/spinner/SpinnerGrid.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerGridProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration, parseSizeToNumber } from '../../utils';\n\n/**\n * SpinnerGrid - Grid of fading squares\n *\n * A spinner with a grid of squares that fade in and out in a pattern.\n *\n * @example\n * ```tsx\n * <SpinnerGrid size={40} color=\"#3b82f6\" />\n * <SpinnerGrid size={48} gridSize={4} />\n * ```\n */\nexport const SpinnerGrid = forwardRef<HTMLDivElement, SpinnerGridProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      gridSize = 3,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-grid',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = parseSizeToNumber(size, 40);\n    const cellSize = Math.floor(sizeValue / gridSize) - 2;\n    const animationDuration = getAnimationDuration(speed);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <div\n          className=\"grid gap-0.5\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            gridTemplateColumns: `repeat(${gridSize}, 1fr)`,\n          }}\n        >\n          {Array.from({ length: gridSize * gridSize }).map((_, index) => {\n            const row = Math.floor(index / gridSize);\n            const col = index % gridSize;\n            const delay = (row + col) * 0.1;\n\n            return (\n              <div\n                key={index}\n                className=\"rounded-sm\"\n                style={{\n                  width: `${cellSize}px`,\n                  height: `${cellSize}px`,\n                  backgroundColor: color,\n                  animation: `fade-pulse ${animationDuration} ease-in-out infinite`,\n                  animationDelay: `${delay}s`,\n                }}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n\nSpinnerGrid.displayName = 'SpinnerGrid';\n"],"names":[],"mappings":";;;;AAeO,MAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,kBAAkB,MAAM,EAAE;AAC5C,UAAM,WAAW,KAAK,MAAM,YAAY,QAAQ,IAAI;AACpD,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,cAAc,IAAI;AAAA,cACzB,QAAQ,cAAc,IAAI;AAAA,cAC1B,qBAAqB,UAAU,QAAQ;AAAA,YAAA;AAAA,YAGxC,UAAA,MAAM,KAAK,EAAE,QAAQ,WAAW,SAAA,CAAU,EAAE,IAAI,CAAC,GAAG,UAAU;AAC7D,oBAAM,MAAM,KAAK,MAAM,QAAQ,QAAQ;AACvC,oBAAM,MAAM,QAAQ;AACpB,oBAAM,SAAS,MAAM,OAAO;AAE5B,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,GAAG,QAAQ;AAAA,oBAClB,QAAQ,GAAG,QAAQ;AAAA,oBACnB,iBAAiB;AAAA,oBACjB,WAAW,cAAc,iBAAiB;AAAA,oBAC1C,gBAAgB,GAAG,KAAK;AAAA,kBAAA;AAAA,gBAC1B;AAAA,gBARK;AAAA,cAAA;AAAA,YAWX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;"}

package/dist/index18.cjs

@@ -12,6 +12,9 @@ const ProgressBar = react.forwardRef(
     height = "0.5rem",
     color = "#3b82f6",
     secondaryColor = "#e0e0e0",
+    gradient = false,
+    buffer,
+    speed = "normal",
     className,
     style,
     testId = "progress-bar",
@@ -21,7 +24,10 @@ const ProgressBar = react.forwardRef(
   }, ref) => {
     if (!visible) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
+    const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
+    const animationDuration = colors.getAnimationDuration(speed);
+    const gradientId = react.useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -40,13 +46,27 @@ const ProgressBar = react.forwardRef(
         "aria-valuemax": 100,
         ...rest,
         children: [
+          gradient && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: secondaryColor || "#8b5cf6" })
+          ] }) }) }),
+          clampedBuffer !== void 0 && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute h-full rounded-full opacity-30",
+              style: {
+                width: `${clampedBuffer}%`,
+                backgroundColor: color
+              }
+            }
+          ),
           indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: "absolute h-full rounded-full",
               style: {
-                backgroundColor: color,
-                animation: "progress-indeterminate 1.5s ease-in-out infinite",
+                backgroundColor: gradient ? `url(#${gradientId})` : color,
+                animation: `progress-indeterminate ${animationDuration} ease-in-out infinite`,
                 width: "40%"
               }
             }
@@ -56,7 +76,7 @@ const ProgressBar = react.forwardRef(
               className: "h-full rounded-full transition-all duration-300 ease-in-out",
               style: {
                 width: `${clampedValue}%`,
-                backgroundColor: color
+                background: gradient ? `url(#${gradientId})` : color
               }
             }
           ),
@@ -64,7 +84,9 @@ const ProgressBar = react.forwardRef(
             "span",
             {
               className: "absolute inset-0 flex items-center justify-center text-xs font-medium",
-              style: { color: clampedValue > 50 ? "white" : color },
+              style: {
+                color: clampedValue > 50 ? colors.getContrastColor(color) : secondaryColor === "#e0e0e0" ? "#000000" : colors.getContrastColor(secondaryColor)
+              },
               children: [
                 clampedValue,
                 "%"

package/dist/index18.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index18.cjs","sources":["../src/components/progress/ProgressBar.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { ProgressBarProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\n\n/**\n * ProgressBar - Linear progress bar\n *\n * A horizontal progress bar that can be determinate (showing specific progress) or indeterminate (loading animation).\n *\n * @example\n * ```tsx\n * <ProgressBar value={75} showValue />\n * <ProgressBar indeterminate />\n * <ProgressBar value={50} height={8} color=\"#8b5cf6\" />\n * ```\n */\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      height = '0.5rem',\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      className,\n      style,\n      testId = 'progress-bar',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative w-full overflow-hidden rounded-full', className)}\n        style={{\n          height: normalizeSize(height),\n          backgroundColor: secondaryColor,\n          ...style,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        {indeterminate ? (\n          <div\n            className=\"absolute h-full rounded-full\"\n            style={{\n              backgroundColor: color,\n              animation: 'progress-indeterminate 1.5s ease-in-out infinite',\n              width: '40%',\n            }}\n          />\n        ) : (\n          <div\n            className=\"h-full rounded-full transition-all duration-300 ease-in-out\"\n            style={{\n              width: `${clampedValue}%`,\n              backgroundColor: color,\n            }}\n          />\n        )}\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute inset-0 flex items-center justify-center text-xs font-medium\"\n            style={{ color: clampedValue > 50 ? 'white' : color }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":["forwardRef","jsxs","cn","normalizeSize","jsx"],"mappings":";;;;;;AAgBO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,gBAAgB,aAAa,WAAW,YAAY;AAE1D,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,gDAAgD,SAAS;AAAA,QACvE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,MAAM;AAAA,UAC5B,iBAAiB;AAAA,UACjB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,iBAAe;AAAA,QACd,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,gBACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,iBAAiB;AAAA,gBACjB,WAAW;AAAA,gBACX,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,UAAA,IAGFA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,YAAY;AAAA,gBACtB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA;AAAA,UAGH,aAAa,CAAC,iBACbH,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,eAAe,KAAK,UAAU,MAAA;AAAA,cAE7C,UAAA;AAAA,gBAAA;AAAA,gBAAa;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"index18.cjs","sources":["../src/components/progress/ProgressBar.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { ProgressBarProps } from '../../types';\nimport { cn, normalizeSize, getContrastColor, getAnimationDuration } from '../../utils';\n\n/**\n * ProgressBar - Linear progress bar\n *\n * A horizontal progress bar that can be determinate (showing specific progress) or indeterminate (loading animation).\n *\n * @example\n * ```tsx\n * <ProgressBar value={75} showValue />\n * <ProgressBar indeterminate />\n * <ProgressBar value={50} height={8} color=\"#8b5cf6\" />\n * <ProgressBar value={50} buffer={75} /> // YouTube-style buffering\n * <ProgressBar value={60} gradient /> // Gradient progress\n * ```\n */\nexport const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value = 0,\n      indeterminate = false,\n      showValue = false,\n      height = '0.5rem',\n      color = '#3b82f6',\n      secondaryColor = '#e0e0e0',\n      gradient = false,\n      buffer,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'progress-bar',\n      visible = true,\n      ariaLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const clampedValue = Math.min(100, Math.max(0, value));\n    const clampedBuffer = buffer !== undefined ? Math.min(100, Math.max(0, buffer)) : undefined;\n    const progressLabel = ariaLabel || `Loading ${clampedValue}%`;\n    const animationDuration = getAnimationDuration(speed);\n\n    // Generate gradient ID for SVG-based gradient\n    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative w-full overflow-hidden rounded-full', className)}\n        style={{\n          height: normalizeSize(height),\n          backgroundColor: secondaryColor,\n          ...style,\n        }}\n        role=\"progressbar\"\n        aria-label={progressLabel}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        {...rest}\n      >\n        {/* Gradient SVG definition */}\n        {gradient && !indeterminate && (\n          <svg width=\"0\" height=\"0\" style={{ position: 'absolute' }}>\n            <defs>\n              <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                <stop offset=\"0%\" stopColor={color} />\n                <stop offset=\"100%\" stopColor={secondaryColor || '#8b5cf6'} />\n              </linearGradient>\n            </defs>\n          </svg>\n        )}\n\n        {/* Buffer indicator (shows behind main progress) */}\n        {clampedBuffer !== undefined && !indeterminate && (\n          <div\n            className=\"absolute h-full rounded-full opacity-30\"\n            style={{\n              width: `${clampedBuffer}%`,\n              backgroundColor: color,\n            }}\n          />\n        )}\n\n        {indeterminate ? (\n          <div\n            className=\"absolute h-full rounded-full\"\n            style={{\n              backgroundColor: gradient ? `url(#${gradientId})` : color,\n              animation: `progress-indeterminate ${animationDuration} ease-in-out infinite`,\n              width: '40%',\n            }}\n          />\n        ) : (\n          <div\n            className=\"h-full rounded-full transition-all duration-300 ease-in-out\"\n            style={{\n              width: `${clampedValue}%`,\n              background: gradient ? `url(#${gradientId})` : color,\n            }}\n          />\n        )}\n\n        {showValue && !indeterminate && (\n          <span\n            className=\"absolute inset-0 flex items-center justify-center text-xs font-medium\"\n            style={{\n              color: clampedValue > 50 ? getContrastColor(color) : secondaryColor === '#e0e0e0' ? '#000000' : getContrastColor(secondaryColor)\n            }}\n          >\n            {clampedValue}%\n          </span>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n"],"names":["forwardRef","getAnimationDuration","useMemo","jsxs","cn","normalizeSize","jsx","getContrastColor"],"mappings":";;;;;;AAkBO,MAAM,cAAcA,MAAAA;AAAAA,EACzB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,eAAe,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACrD,UAAM,gBAAgB,WAAW,SAAY,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,MAAM,CAAC,IAAI;AAClF,UAAM,gBAAgB,aAAa,WAAW,YAAY;AAC1D,UAAM,oBAAoBC,OAAAA,qBAAqB,KAAK;AAGpD,UAAM,aAAaC,MAAAA,QAAQ,MAAM,yBAAyB,KAAK,SAAS,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE;AAEvG,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,gDAAgD,SAAS;AAAA,QACvE,OAAO;AAAA,UACL,QAAQC,OAAAA,cAAc,MAAM;AAAA,UAC5B,iBAAiB;AAAA,UACjB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAe,gBAAgB,SAAY;AAAA,QAC3C,iBAAe;AAAA,QACf,iBAAe;AAAA,QACd,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,YAAY,CAAC,iBACZC,2BAAAA,IAAC,OAAA,EAAI,OAAM,KAAI,QAAO,KAAI,OAAO,EAAE,UAAU,WAAA,GAC3C,yCAAC,QAAA,EACC,UAAAH,2BAAAA,KAAC,kBAAA,EAAe,IAAI,YAAY,IAAG,MAAK,IAAG,MAAK,IAAG,QAAO,IAAG,MAC3D,UAAA;AAAA,YAAAG,2BAAAA,IAAC,QAAA,EAAK,QAAO,MAAK,WAAW,OAAO;AAAA,2CACnC,QAAA,EAAK,QAAO,QAAO,WAAW,kBAAkB,UAAA,CAAW;AAAA,UAAA,EAAA,CAC9D,GACF,GACF;AAAA,UAID,kBAAkB,UAAa,CAAC,iBAC/BA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,aAAa;AAAA,gBACvB,iBAAiB;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA;AAAA,UAIH,gBACCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,iBAAiB,WAAW,QAAQ,UAAU,MAAM;AAAA,gBACpD,WAAW,0BAA0B,iBAAiB;AAAA,gBACtD,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,UAAA,IAGFA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,GAAG,YAAY;AAAA,gBACtB,YAAY,WAAW,QAAQ,UAAU,MAAM;AAAA,cAAA;AAAA,YACjD;AAAA,UAAA;AAAA,UAIH,aAAa,CAAC,iBACbH,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,OAAO,eAAe,KAAKI,wBAAiB,KAAK,IAAI,mBAAmB,YAAY,YAAYA,OAAAA,iBAAiB,cAAc;AAAA,cAAA;AAAA,cAGhI,UAAA;AAAA,gBAAA;AAAA,gBAAa;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,YAAY,cAAc;;"}

package/dist/index18.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { normalizeSize } from "./index4.js";
+import { forwardRef, useMemo } from "react";
+import { normalizeSize, getAnimationDuration, getContrastColor } from "./index4.js";
 import { cn } from "./index3.js";
 const ProgressBar = forwardRef(
   ({
@@ -10,6 +10,9 @@ const ProgressBar = forwardRef(
     height = "0.5rem",
     color = "#3b82f6",
     secondaryColor = "#e0e0e0",
+    gradient = false,
+    buffer,
+    speed = "normal",
     className,
     style,
     testId = "progress-bar",
@@ -19,7 +22,10 @@ const ProgressBar = forwardRef(
   }, ref) => {
     if (!visible) return null;
     const clampedValue = Math.min(100, Math.max(0, value));
+    const clampedBuffer = buffer !== void 0 ? Math.min(100, Math.max(0, buffer)) : void 0;
     const progressLabel = ariaLabel || `Loading ${clampedValue}%`;
+    const animationDuration = getAnimationDuration(speed);
+    const gradientId = useMemo(() => `progress-bar-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -38,13 +44,27 @@ const ProgressBar = forwardRef(
         "aria-valuemax": 100,
         ...rest,
         children: [
+          gradient && !indeterminate && /* @__PURE__ */ jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: secondaryColor || "#8b5cf6" })
+          ] }) }) }),
+          clampedBuffer !== void 0 && !indeterminate && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute h-full rounded-full opacity-30",
+              style: {
+                width: `${clampedBuffer}%`,
+                backgroundColor: color
+              }
+            }
+          ),
           indeterminate ? /* @__PURE__ */ jsx(
             "div",
             {
               className: "absolute h-full rounded-full",
               style: {
-                backgroundColor: color,
-                animation: "progress-indeterminate 1.5s ease-in-out infinite",
+                backgroundColor: gradient ? `url(#${gradientId})` : color,
+                animation: `progress-indeterminate ${animationDuration} ease-in-out infinite`,
                 width: "40%"
               }
             }
@@ -54,7 +74,7 @@ const ProgressBar = forwardRef(
               className: "h-full rounded-full transition-all duration-300 ease-in-out",
               style: {
                 width: `${clampedValue}%`,
-                backgroundColor: color
+                background: gradient ? `url(#${gradientId})` : color
               }
             }
           ),
@@ -62,7 +82,9 @@ const ProgressBar = forwardRef(
             "span",
             {
               className: "absolute inset-0 flex items-center justify-center text-xs font-medium",
-              style: { color: clampedValue > 50 ? "white" : color },
+              style: {
+                color: clampedValue > 50 ? getContrastColor(color) : secondaryColor === "#e0e0e0" ? "#000000" : getContrastColor(secondaryColor)
+              },
               children: [
                 clampedValue,
                 "%"