@rubenpazch/loading-spinner 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/LoadingSpinner.d.ts.map +1 -1
  2. package/dist/index.cjs.js +43 -37
  3. package/dist/index.esm.js +43 -37
  4. package/package.json +4 -2
package/dist/LoadingSpinner.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../src/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACnC;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2IjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../src/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACnC;AAMD;;;;;;;GAOG;AACH,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuKjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
package/dist/index.cjs.js CHANGED
@@ -424,6 +424,40 @@ function requireJsxRuntime () {
424
424
 
425
425
  var jsxRuntimeExports = requireJsxRuntime();
426
426
 
427
+ function styleInject(css, ref) {
428
+ if ( ref === void 0 ) ref = {};
429
+ var insertAt = ref.insertAt;
430
+
431
+ if (typeof document === 'undefined') { return; }
432
+
433
+ var head = document.head || document.getElementsByTagName('head')[0];
434
+ var style = document.createElement('style');
435
+ style.type = 'text/css';
436
+
437
+ if (insertAt === 'top') {
438
+ if (head.firstChild) {
439
+ head.insertBefore(style, head.firstChild);
440
+ } else {
441
+ head.appendChild(style);
442
+ }
443
+ } else {
444
+ head.appendChild(style);
445
+ }
446
+
447
+ if (style.styleSheet) {
448
+ style.styleSheet.cssText = css;
449
+ } else {
450
+ style.appendChild(document.createTextNode(css));
451
+ }
452
+ }
453
+
454
+ var css_248z = "/* Container */\n.LoadingSpinner-module_container__PHl1j {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.LoadingSpinner-module_containerInline__eD4FZ {\n display: inline-flex;\n}\n\n/* Inner wrapper */\n.LoadingSpinner-module_inner__SvATp {\n text-align: center;\n}\n\n.LoadingSpinner-module_innerInline__MPS3Y {\n display: inline-flex;\n}\n\n/* Spinner base */\n.LoadingSpinner-module_spinner__vu6Ri {\n border-radius: 9999px;\n border-width: 2px;\n animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n/* Sizes */\n.LoadingSpinner-module_sizeSm__tL-IR {\n height: 1rem;\n width: 1rem;\n}\n\n.LoadingSpinner-module_sizeMd__AT592 {\n height: 2rem;\n width: 2rem;\n}\n\n.LoadingSpinner-module_sizeLg__jyX27 {\n height: 3rem;\n width: 3rem;\n}\n\n/* Colors - spinner */\n.LoadingSpinner-module_colorBlue__Jtuu1 {\n border-color: #2563eb;\n}\n\n.LoadingSpinner-module_colorGray__-EMqs {\n border-color: #4b5563;\n}\n\n.LoadingSpinner-module_colorWhite__95Hoo {\n border-color: #ffffff;\n}\n\n/* Spinner transparent borders */\n.LoadingSpinner-module_spinnerTransparent__G3zcb {\n border-top-color: transparent;\n border-right-color: transparent;\n}\n\n/* Spacing */\n.LoadingSpinner-module_spacingDefault__8At6H {\n margin: 0 auto 1rem auto;\n}\n\n/* Dots container */\n.LoadingSpinner-module_dotsContainer__l3FsV {\n display: flex;\n gap: 0.25rem;\n}\n\n.LoadingSpinner-module_dotsContainerInline__Kl4Fz {\n display: flex;\n gap: 0.25rem;\n}\n\n/* Dot sizes */\n.LoadingSpinner-module_dotSizeSm__YuBra {\n height: 0.375rem;\n width: 0.375rem;\n}\n\n.LoadingSpinner-module_dotSizeMd__rXeyS {\n height: 0.625rem;\n width: 0.625rem;\n}\n\n.LoadingSpinner-module_dotSizeLg__M8etz {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n/* Dot colors */\n.LoadingSpinner-module_dotColorBlue__5evmc {\n background-color: #2563eb;\n}\n\n.LoadingSpinner-module_dotColorGray__dr80J {\n background-color: #4b5563;\n}\n\n.LoadingSpinner-module_dotColorWhite__54ur- {\n background-color: #ffffff;\n}\n\n/* Dot */\n.LoadingSpinner-module_dot__tz0lA {\n border-radius: 9999px;\n animation: LoadingSpinner-module_bounce__7Raih 1s ease-in-out infinite;\n}\n\n.LoadingSpinner-module_dotDelay1__-94Os {\n animation-delay: 0ms;\n}\n\n.LoadingSpinner-module_dotDelay2__Oy8E- {\n animation-delay: 150ms;\n}\n\n.LoadingSpinner-module_dotDelay3__7EZYH {\n animation-delay: 300ms;\n}\n\n/* Pulse */\n.LoadingSpinner-module_pulse__gKUHJ {\n border-radius: 9999px;\n animation: LoadingSpinner-module_pulse__gKUHJ 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Ring */\n.LoadingSpinner-module_ringContainer__4p8NG {\n position: relative;\n}\n\n.LoadingSpinner-module_ringBackground__aF2w1 {\n position: absolute;\n inset: 0;\n border-radius: 9999px;\n border-width: 2px;\n opacity: 0.25;\n}\n\n.LoadingSpinner-module_ringSpinner__b92-S {\n position: absolute;\n inset: 0;\n border-radius: 9999px;\n border-width: 2px;\n border-color: transparent;\n animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n.LoadingSpinner-module_ringSpinnerBlue__zGTgw {\n border-top-color: #2563eb;\n}\n\n.LoadingSpinner-module_ringSpinnerGray__kHnkJ {\n border-top-color: #4b5563;\n}\n\n.LoadingSpinner-module_ringSpinnerWhite__yu8d0 {\n border-top-color: #ffffff;\n}\n\n.LoadingSpinner-module_ringTransparent__DTSbu {\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Message */\n.LoadingSpinner-module_message__FoOvh {\n color: #4b5563;\n font-size: 0.875rem;\n line-height: 1.25rem;\n margin-top: 0.5rem;\n}\n\n/* Animations */\n@keyframes LoadingSpinner-module_spin__vEieX {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes LoadingSpinner-module_bounce__7Raih {\n 0%,\n 100% {\n transform: translateY(0);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n 50% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n}\n\n@keyframes LoadingSpinner-module_pulse__gKUHJ {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n";
455
+ var styles = {"container":"LoadingSpinner-module_container__PHl1j","containerInline":"LoadingSpinner-module_containerInline__eD4FZ","inner":"LoadingSpinner-module_inner__SvATp","innerInline":"LoadingSpinner-module_innerInline__MPS3Y","spinner":"LoadingSpinner-module_spinner__vu6Ri","spin":"LoadingSpinner-module_spin__vEieX","sizeSm":"LoadingSpinner-module_sizeSm__tL-IR","sizeMd":"LoadingSpinner-module_sizeMd__AT592","sizeLg":"LoadingSpinner-module_sizeLg__jyX27","colorBlue":"LoadingSpinner-module_colorBlue__Jtuu1","colorGray":"LoadingSpinner-module_colorGray__-EMqs","colorWhite":"LoadingSpinner-module_colorWhite__95Hoo","spinnerTransparent":"LoadingSpinner-module_spinnerTransparent__G3zcb","spacingDefault":"LoadingSpinner-module_spacingDefault__8At6H","dotsContainer":"LoadingSpinner-module_dotsContainer__l3FsV","dotsContainerInline":"LoadingSpinner-module_dotsContainerInline__Kl4Fz","dotSizeSm":"LoadingSpinner-module_dotSizeSm__YuBra","dotSizeMd":"LoadingSpinner-module_dotSizeMd__rXeyS","dotSizeLg":"LoadingSpinner-module_dotSizeLg__M8etz","dotColorBlue":"LoadingSpinner-module_dotColorBlue__5evmc","dotColorGray":"LoadingSpinner-module_dotColorGray__dr80J","dotColorWhite":"LoadingSpinner-module_dotColorWhite__54ur-","dot":"LoadingSpinner-module_dot__tz0lA","bounce":"LoadingSpinner-module_bounce__7Raih","dotDelay1":"LoadingSpinner-module_dotDelay1__-94Os","dotDelay2":"LoadingSpinner-module_dotDelay2__Oy8E-","dotDelay3":"LoadingSpinner-module_dotDelay3__7EZYH","pulse":"LoadingSpinner-module_pulse__gKUHJ","ringContainer":"LoadingSpinner-module_ringContainer__4p8NG","ringBackground":"LoadingSpinner-module_ringBackground__aF2w1","ringSpinner":"LoadingSpinner-module_ringSpinner__b92-S","ringSpinnerBlue":"LoadingSpinner-module_ringSpinnerBlue__zGTgw","ringSpinnerGray":"LoadingSpinner-module_ringSpinnerGray__kHnkJ","ringSpinnerWhite":"LoadingSpinner-module_ringSpinnerWhite__yu8d0","ringTransparent":"LoadingSpinner-module_ringTransparent__DTSbu","message":"LoadingSpinner-module_message__FoOvh"};
456
+ styleInject(css_248z);
457
+
458
+ function classNames(...classes) {
459
+ return classes.filter(Boolean).join(" ");
460
+ }
427
461
  /**
428
462
  * LoadingSpinner component
429
463
  * Displays a loading indicator with multiple style variants
@@ -433,54 +467,26 @@ var jsxRuntimeExports = requireJsxRuntime();
433
467
  * @param color - Color scheme: 'blue' (default), 'gray', 'white'
434
468
  */
435
469
  const LoadingSpinner = ({ message, size = "md", className = "", variant = "spinner", inline = false, color = "blue", }) => {
436
- const sizeClasses = {
437
- sm: "h-4 w-4",
438
- md: "h-8 w-8",
439
- lg: "h-12 w-12",
440
- };
441
- const colorClasses = {
442
- blue: "border-blue-600",
443
- gray: "border-gray-600",
444
- white: "border-white",
445
- };
446
- const dotColorClasses = {
447
- blue: "bg-blue-600",
448
- gray: "bg-gray-600",
449
- white: "bg-white",
450
- };
451
- const dotSizeClasses = {
452
- sm: "h-1.5 w-1.5",
453
- md: "h-2.5 w-2.5",
454
- lg: "h-3.5 w-3.5",
455
- };
470
+ const sizeClass = styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`];
471
+ const colorClass = styles[`color${color.charAt(0).toUpperCase() + color.slice(1)}`];
472
+ const dotColorClass = styles[`dotColor${color.charAt(0).toUpperCase() + color.slice(1)}`];
473
+ const dotSizeClass = styles[`dotSize${size.charAt(0).toUpperCase() + size.slice(1)}`];
456
474
  // Spinner variant (circular border)
457
475
  if (variant === "spinner") {
458
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `animate-spin rounded-full border-2 ${colorClasses[color]} ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, style: {
459
- borderTopColor: "transparent",
460
- borderRightColor: "transparent",
461
- } }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
476
+ return (jsxRuntimeExports.jsx("div", { className: classNames(inline ? styles.containerInline : styles.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles.innerInline : styles.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames(styles.spinner, styles.spinnerTransparent, colorClass, sizeClass, !inline ? styles.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles.message, children: message })] }) }));
462
477
  }
463
478
  // Dots variant (three bouncing dots)
464
479
  if (variant === "dots") {
465
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "flex gap-1" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `flex gap-1 ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "0ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "150ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "300ms" } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
480
+ return (jsxRuntimeExports.jsx("div", { className: classNames(inline ? styles.containerInline : styles.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles.innerInline : styles.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames(inline ? styles.dotsContainerInline : styles.dotsContainer, !inline ? styles.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames(styles.dot, dotSizeClass, dotColorClass, styles.dotDelay1) }), jsxRuntimeExports.jsx("div", { className: classNames(styles.dot, dotSizeClass, dotColorClass, styles.dotDelay2) }), jsxRuntimeExports.jsx("div", { className: classNames(styles.dot, dotSizeClass, dotColorClass, styles.dotDelay3) })] }), message && jsxRuntimeExports.jsx("p", { className: styles.message, children: message })] }) }));
466
481
  }
467
482
  // Pulse variant (pulsing circle)
468
483
  if (variant === "pulse") {
469
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `${sizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-pulse ${inline ? "" : "mx-auto mb-4"}` }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
484
+ return (jsxRuntimeExports.jsx("div", { className: classNames(inline ? styles.containerInline : styles.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles.innerInline : styles.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames(styles.pulse, sizeClass, dotColorClass, !inline ? styles.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles.message, children: message })] }) }));
470
485
  }
471
486
  // Ring variant (rotating ring with gradient)
472
487
  if (variant === "ring") {
473
- const ringColorMap = {
474
- blue: "border-blue-600",
475
- gray: "border-gray-600",
476
- white: "border-white",
477
- };
478
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `relative ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 ${colorClasses[color]} opacity-25` }), jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 border-transparent ${ringColorMap[color]} animate-spin`, style: {
479
- borderTopColor: "currentColor",
480
- borderRightColor: "transparent",
481
- borderBottomColor: "transparent",
482
- borderLeftColor: "transparent",
483
- } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
488
+ const ringSpinnerColorClass = styles[`ringSpinner${color.charAt(0).toUpperCase() + color.slice(1)}`];
489
+ return (jsxRuntimeExports.jsx("div", { className: classNames(inline ? styles.containerInline : styles.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles.innerInline : styles.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames(styles.ringContainer, sizeClass, !inline ? styles.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames(styles.ringBackground, colorClass) }), jsxRuntimeExports.jsx("div", { className: classNames(styles.ringSpinner, styles.ringTransparent, ringSpinnerColorClass) })] }), message && jsxRuntimeExports.jsx("p", { className: styles.message, children: message })] }) }));
484
490
  }
485
491
  return null;
486
492
  };
package/dist/index.esm.js CHANGED
@@ -422,6 +422,40 @@ function requireJsxRuntime () {
422
422
 
423
423
  var jsxRuntimeExports = requireJsxRuntime();
424
424
 
425
+ function styleInject(css, ref) {
426
+ if ( ref === void 0 ) ref = {};
427
+ var insertAt = ref.insertAt;
428
+
429
+ if (typeof document === 'undefined') { return; }
430
+
431
+ var head = document.head || document.getElementsByTagName('head')[0];
432
+ var style = document.createElement('style');
433
+ style.type = 'text/css';
434
+
435
+ if (insertAt === 'top') {
436
+ if (head.firstChild) {
437
+ head.insertBefore(style, head.firstChild);
438
+ } else {
439
+ head.appendChild(style);
440
+ }
441
+ } else {
442
+ head.appendChild(style);
443
+ }
444
+
445
+ if (style.styleSheet) {
446
+ style.styleSheet.cssText = css;
447
+ } else {
448
+ style.appendChild(document.createTextNode(css));
449
+ }
450
+ }
451
+
452
+ var css_248z = "/* Container */\n.LoadingSpinner-module_container__PHl1j {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.LoadingSpinner-module_containerInline__eD4FZ {\n display: inline-flex;\n}\n\n/* Inner wrapper */\n.LoadingSpinner-module_inner__SvATp {\n text-align: center;\n}\n\n.LoadingSpinner-module_innerInline__MPS3Y {\n display: inline-flex;\n}\n\n/* Spinner base */\n.LoadingSpinner-module_spinner__vu6Ri {\n border-radius: 9999px;\n border-width: 2px;\n animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n/* Sizes */\n.LoadingSpinner-module_sizeSm__tL-IR {\n height: 1rem;\n width: 1rem;\n}\n\n.LoadingSpinner-module_sizeMd__AT592 {\n height: 2rem;\n width: 2rem;\n}\n\n.LoadingSpinner-module_sizeLg__jyX27 {\n height: 3rem;\n width: 3rem;\n}\n\n/* Colors - spinner */\n.LoadingSpinner-module_colorBlue__Jtuu1 {\n border-color: #2563eb;\n}\n\n.LoadingSpinner-module_colorGray__-EMqs {\n border-color: #4b5563;\n}\n\n.LoadingSpinner-module_colorWhite__95Hoo {\n border-color: #ffffff;\n}\n\n/* Spinner transparent borders */\n.LoadingSpinner-module_spinnerTransparent__G3zcb {\n border-top-color: transparent;\n border-right-color: transparent;\n}\n\n/* Spacing */\n.LoadingSpinner-module_spacingDefault__8At6H {\n margin: 0 auto 1rem auto;\n}\n\n/* Dots container */\n.LoadingSpinner-module_dotsContainer__l3FsV {\n display: flex;\n gap: 0.25rem;\n}\n\n.LoadingSpinner-module_dotsContainerInline__Kl4Fz {\n display: flex;\n gap: 0.25rem;\n}\n\n/* Dot sizes */\n.LoadingSpinner-module_dotSizeSm__YuBra {\n height: 0.375rem;\n width: 0.375rem;\n}\n\n.LoadingSpinner-module_dotSizeMd__rXeyS {\n height: 0.625rem;\n width: 0.625rem;\n}\n\n.LoadingSpinner-module_dotSizeLg__M8etz {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n/* Dot colors */\n.LoadingSpinner-module_dotColorBlue__5evmc {\n background-color: #2563eb;\n}\n\n.LoadingSpinner-module_dotColorGray__dr80J {\n background-color: #4b5563;\n}\n\n.LoadingSpinner-module_dotColorWhite__54ur- {\n background-color: #ffffff;\n}\n\n/* Dot */\n.LoadingSpinner-module_dot__tz0lA {\n border-radius: 9999px;\n animation: LoadingSpinner-module_bounce__7Raih 1s ease-in-out infinite;\n}\n\n.LoadingSpinner-module_dotDelay1__-94Os {\n animation-delay: 0ms;\n}\n\n.LoadingSpinner-module_dotDelay2__Oy8E- {\n animation-delay: 150ms;\n}\n\n.LoadingSpinner-module_dotDelay3__7EZYH {\n animation-delay: 300ms;\n}\n\n/* Pulse */\n.LoadingSpinner-module_pulse__gKUHJ {\n border-radius: 9999px;\n animation: LoadingSpinner-module_pulse__gKUHJ 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Ring */\n.LoadingSpinner-module_ringContainer__4p8NG {\n position: relative;\n}\n\n.LoadingSpinner-module_ringBackground__aF2w1 {\n position: absolute;\n inset: 0;\n border-radius: 9999px;\n border-width: 2px;\n opacity: 0.25;\n}\n\n.LoadingSpinner-module_ringSpinner__b92-S {\n position: absolute;\n inset: 0;\n border-radius: 9999px;\n border-width: 2px;\n border-color: transparent;\n animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n.LoadingSpinner-module_ringSpinnerBlue__zGTgw {\n border-top-color: #2563eb;\n}\n\n.LoadingSpinner-module_ringSpinnerGray__kHnkJ {\n border-top-color: #4b5563;\n}\n\n.LoadingSpinner-module_ringSpinnerWhite__yu8d0 {\n border-top-color: #ffffff;\n}\n\n.LoadingSpinner-module_ringTransparent__DTSbu {\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Message */\n.LoadingSpinner-module_message__FoOvh {\n color: #4b5563;\n font-size: 0.875rem;\n line-height: 1.25rem;\n margin-top: 0.5rem;\n}\n\n/* Animations */\n@keyframes LoadingSpinner-module_spin__vEieX {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes LoadingSpinner-module_bounce__7Raih {\n 0%,\n 100% {\n transform: translateY(0);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n 50% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n}\n\n@keyframes LoadingSpinner-module_pulse__gKUHJ {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n";
453
+ var styles = {"container":"LoadingSpinner-module_container__PHl1j","containerInline":"LoadingSpinner-module_containerInline__eD4FZ","inner":"LoadingSpinner-module_inner__SvATp","innerInline":"LoadingSpinner-module_innerInline__MPS3Y","spinner":"LoadingSpinner-module_spinner__vu6Ri","spin":"LoadingSpinner-module_spin__vEieX","sizeSm":"LoadingSpinner-module_sizeSm__tL-IR","sizeMd":"LoadingSpinner-module_sizeMd__AT592","sizeLg":"LoadingSpinner-module_sizeLg__jyX27","colorBlue":"LoadingSpinner-module_colorBlue__Jtuu1","colorGray":"LoadingSpinner-module_colorGray__-EMqs","colorWhite":"LoadingSpinner-module_colorWhite__95Hoo","spinnerTransparent":"LoadingSpinner-module_spinnerTransparent__G3zcb","spacingDefault":"LoadingSpinner-module_spacingDefault__8At6H","dotsContainer":"LoadingSpinner-module_dotsContainer__l3FsV","dotsContainerInline":"LoadingSpinner-module_dotsContainerInline__Kl4Fz","dotSizeSm":"LoadingSpinner-module_dotSizeSm__YuBra","dotSizeMd":"LoadingSpinner-module_dotSizeMd__rXeyS","dotSizeLg":"LoadingSpinner-module_dotSizeLg__M8etz","dotColorBlue":"LoadingSpinner-module_dotColorBlue__5evmc","dotColorGray":"LoadingSpinner-module_dotColorGray__dr80J","dotColorWhite":"LoadingSpinner-module_dotColorWhite__54ur-","dot":"LoadingSpinner-module_dot__tz0lA","bounce":"LoadingSpinner-module_bounce__7Raih","dotDelay1":"LoadingSpinner-module_dotDelay1__-94Os","dotDelay2":"LoadingSpinner-module_dotDelay2__Oy8E-","dotDelay3":"LoadingSpinner-module_dotDelay3__7EZYH","pulse":"LoadingSpinner-module_pulse__gKUHJ","ringContainer":"LoadingSpinner-module_ringContainer__4p8NG","ringBackground":"LoadingSpinner-module_ringBackground__aF2w1","ringSpinner":"LoadingSpinner-module_ringSpinner__b92-S","ringSpinnerBlue":"LoadingSpinner-module_ringSpinnerBlue__zGTgw","ringSpinnerGray":"LoadingSpinner-module_ringSpinnerGray__kHnkJ","ringSpinnerWhite":"LoadingSpinner-module_ringSpinnerWhite__yu8d0","ringTransparent":"LoadingSpinner-module_ringTransparent__DTSbu","message":"LoadingSpinner-module_message__FoOvh"};
454
+ styleInject(css_248z);
455
+
456
+ function classNames(...classes) {
457
+ return classes.filter(Boolean).join(" ");
458
+ }
425
459
  /**
426
460
  * LoadingSpinner component
427
461
  * Displays a loading indicator with multiple style variants
@@ -431,54 +465,26 @@ var jsxRuntimeExports = requireJsxRuntime();
431
465
  * @param color - Color scheme: 'blue' (default), 'gray', 'white'
432
466
  */
433
467
  const LoadingSpinner = ({ message, size = "md", className = "", variant = "spinner", inline = false, color = "blue", }) => {
434
- const sizeClasses = {
435
- sm: "h-4 w-4",
436
- md: "h-8 w-8",
437
- lg: "h-12 w-12",
438
- };
439
- const colorClasses = {
440
- blue: "border-blue-600",
441
- gray: "border-gray-600",
442
- white: "border-white",
443
- };
444
- const dotColorClasses = {
445
- blue: "bg-blue-600",
446
- gray: "bg-gray-600",
447
- white: "bg-white",
448
- };
449
- const dotSizeClasses = {
450
- sm: "h-1.5 w-1.5",
451
- md: "h-2.5 w-2.5",
452
- lg: "h-3.5 w-3.5",
453
- };
468
+ const sizeClass = styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`];
469
+ const colorClass = styles[`color${color.charAt(0).toUpperCase() + color.slice(1)}`];
470
+ const dotColorClass = styles[`dotColor${color.charAt(0).toUpperCase() + color.slice(1)}`];
471
+ const dotSizeClass = styles[`dotSize${size.charAt(0).toUpperCase() + size.slice(1)}`];
454
472
  // Spinner variant (circular border)
455
473
  if (variant === "spinner") {
456
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `animate-spin rounded-full border-2 ${colorClasses[color]} ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, style: {
457
- borderTopColor: "transparent",
458
- borderRightColor: "transparent",
459
- } }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
474
+ return (jsxRuntimeExports.jsx("div", { className: classNames(inline ? styles.containerInline : styles.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles.innerInline : styles.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames(styles.spinner, styles.spinnerTransparent, colorClass, sizeClass, !inline ? styles.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles.message, children: message })] }) }));
460
475
  }
461
476
  // Dots variant (three bouncing dots)
462
477
  if (variant === "dots") {
463
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "flex gap-1" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `flex gap-1 ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "0ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "150ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "300ms" } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
478
+ return (jsxRuntimeExports.jsx("div", { className: classNames(inline ? styles.containerInline : styles.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles.innerInline : styles.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames(inline ? styles.dotsContainerInline : styles.dotsContainer, !inline ? styles.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames(styles.dot, dotSizeClass, dotColorClass, styles.dotDelay1) }), jsxRuntimeExports.jsx("div", { className: classNames(styles.dot, dotSizeClass, dotColorClass, styles.dotDelay2) }), jsxRuntimeExports.jsx("div", { className: classNames(styles.dot, dotSizeClass, dotColorClass, styles.dotDelay3) })] }), message && jsxRuntimeExports.jsx("p", { className: styles.message, children: message })] }) }));
464
479
  }
465
480
  // Pulse variant (pulsing circle)
466
481
  if (variant === "pulse") {
467
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `${sizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-pulse ${inline ? "" : "mx-auto mb-4"}` }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
482
+ return (jsxRuntimeExports.jsx("div", { className: classNames(inline ? styles.containerInline : styles.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles.innerInline : styles.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames(styles.pulse, sizeClass, dotColorClass, !inline ? styles.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles.message, children: message })] }) }));
468
483
  }
469
484
  // Ring variant (rotating ring with gradient)
470
485
  if (variant === "ring") {
471
- const ringColorMap = {
472
- blue: "border-blue-600",
473
- gray: "border-gray-600",
474
- white: "border-white",
475
- };
476
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `relative ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 ${colorClasses[color]} opacity-25` }), jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 border-transparent ${ringColorMap[color]} animate-spin`, style: {
477
- borderTopColor: "currentColor",
478
- borderRightColor: "transparent",
479
- borderBottomColor: "transparent",
480
- borderLeftColor: "transparent",
481
- } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
486
+ const ringSpinnerColorClass = styles[`ringSpinner${color.charAt(0).toUpperCase() + color.slice(1)}`];
487
+ return (jsxRuntimeExports.jsx("div", { className: classNames(inline ? styles.containerInline : styles.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles.innerInline : styles.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames(styles.ringContainer, sizeClass, !inline ? styles.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames(styles.ringBackground, colorClass) }), jsxRuntimeExports.jsx("div", { className: classNames(styles.ringSpinner, styles.ringTransparent, ringSpinnerColorClass) })] }), message && jsxRuntimeExports.jsx("p", { className: styles.message, children: message })] }) }));
482
488
  }
483
489
  return null;
484
490
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rubenpazch/loading-spinner",
3
- "version": "2.0.0",
3
+ "version": "3.0.0",
4
4
  "description": "LoadingSpinner component",
5
5
  "private": false,
6
6
  "main": "dist/index.cjs.js",
@@ -16,7 +16,9 @@
16
16
  "files": [
17
17
  "dist"
18
18
  ],
19
- "sideEffects": false,
19
+ "sideEffects": [
20
+ "**/*.css"
21
+ ],
20
22
  "exports": {
21
23
  ".": {
22
24
  "import": "./dist/index.esm.js",