react-loadly 1.0.0 → 1.0.1

package/dist/{index.js → index.cjs.js}

@@ -1,7 +1,6 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 
 /**
  * Merges default props with user props, handling undefined values gracefully
@@ -173,7 +172,7 @@ const Dot = ({ size = 8, color = "var(--react-loadly-color)", opacity = 1, class
         boxShadow: glowIntensity > 0 ? `0 0 ${glowIntensity * 10}px ${color}` : undefined,
         ...style,
     };
-    return jsxRuntime.jsx("div", { className: `react-loadly-dot ${className}`.trim(), style: dotStyle, "data-testid": dataTestId, ...props });
+    return React.createElement("div", { className: `react-loadly-dot ${className}`.trim(), style: dotStyle, "data-testid": dataTestId, ...props });
 };
 
 const Line = ({ width = 30, height = 4, color = "var(--react-loadly-color)", opacity = 1, borderRadius = 2, className = "", style = {}, animation, animationDuration, animationDelay, orientation = "horizontal", "data-testid": dataTestId, ...props }) => {
@@ -191,7 +190,7 @@ const Line = ({ width = 30, height = 4, color = "var(--react-loadly-color)", opa
         display: "inline-block",
         ...style,
     };
-    return (jsxRuntime.jsx("div", { className: `react-loadly-line react-loadly-line-${orientation} ${className}`.trim(), style: lineStyle, "data-testid": dataTestId, ...props }));
+    return (React.createElement("div", { className: `react-loadly-line react-loadly-line-${orientation} ${className}`.trim(), style: lineStyle, "data-testid": dataTestId, ...props }));
 };
 
 const Rectangle = ({ width = 20, height = 20, color = "var(--react-loadly-color)", borderColor, borderWidth = 0, borderRadius = 0, opacity = 1, className = "", style = {}, animation, animationDuration, animationDelay, "data-testid": dataTestId, ...props }) => {
@@ -211,7 +210,7 @@ const Rectangle = ({ width = 20, height = 20, color = "var(--react-loadly-color)
         display: "inline-block",
         ...style,
     };
-    return jsxRuntime.jsx("div", { className: `react-loadly-rectangle ${className}`.trim(), style: rectangleStyle, "data-testid": dataTestId, ...props });
+    return React.createElement("div", { className: `react-loadly-rectangle ${className}`.trim(), style: rectangleStyle, "data-testid": dataTestId, ...props });
 };
 
 const Circle = ({ size = 20, color = "var(--react-loadly-color)", borderColor, borderWidth = 0, opacity = 1, className = "", style = {}, animation, animationDuration, animationDelay, "data-testid": dataTestId, ...props }) => {
@@ -229,7 +228,7 @@ const Circle = ({ size = 20, color = "var(--react-loadly-color)", borderColor, b
         display: "inline-block",
         ...style,
     };
-    return jsxRuntime.jsx("div", { className: `react-loadly-circle ${className}`.trim(), style: circleStyle, "data-testid": dataTestId, ...props });
+    return React.createElement("div", { className: `react-loadly-circle ${className}`.trim(), style: circleStyle, "data-testid": dataTestId, ...props });
 };
 
 const DotCluster = ({ count = 3, dotSize = 8, color = "var(--react-loadly-color)", secondaryColor, spacing = 8, speed = 1, arrangement = "linear", className = "", style = {}, animationType = "wave", "data-testid": dataTestId, ...props }) => {
@@ -282,7 +281,7 @@ const DotCluster = ({ count = 3, dotSize = 8, color = "var(--react-loadly-color)
         ...getArrangementStyle(),
         ...style,
     };
-    return (jsxRuntime.jsx("div", { className: `react-loadly-dot-cluster react-loadly-dot-cluster-${arrangement} ${className}`.trim(), style: containerStyle, "data-testid": dataTestId, ...props, children: Array.from({ length: count }, (_, index) => (jsxRuntime.jsx(Dot, { size: dotSize, color: secondaryColor && index % 2 === 1 ? secondaryColor : color, animation: `react-loadly-${animationType}`, animationDuration: animationDuration, animationDelay: getDotAnimationDelay(index), style: getDotPosition(index), "data-testid": dataTestId ? `${dataTestId}-dot-${index}` : undefined }, index))) }));
+    return (React.createElement("div", { className: `react-loadly-dot-cluster react-loadly-dot-cluster-${arrangement} ${className}`.trim(), style: containerStyle, "data-testid": dataTestId, ...props }, Array.from({ length: count }, (_, index) => (React.createElement(Dot, { key: index, size: dotSize, color: secondaryColor && index % 2 === 1 ? secondaryColor : color, animation: `react-loadly-${animationType}`, animationDuration: animationDuration, animationDelay: getDotAnimationDelay(index), style: getDotPosition(index), "data-testid": dataTestId ? `${dataTestId}-dot-${index}` : undefined })))));
 };
 
 const LineGroup = ({ count = 5, lineWidth = 4, lineHeight = 35, color = "var(--react-loadly-color)", secondaryColor, spacing = 6, speed = 1, arrangement = "parallel", orientation = "vertical", className = "", style = {}, animationType = "wave", "data-testid": dataTestId, ...props }) => {
@@ -341,7 +340,7 @@ const LineGroup = ({ count = 5, lineWidth = 4, lineHeight = 35, color = "var(--r
         ...getArrangementStyle(),
         ...style,
     };
-    return (jsxRuntime.jsx("div", { className: `react-loadly-line-group react-loadly-line-group-${arrangement} ${className}`.trim(), style: containerStyle, "data-testid": dataTestId, ...props, children: Array.from({ length: count }, (_, index) => (jsxRuntime.jsx(Line, { width: orientation === "horizontal" ? lineWidth : lineHeight, height: orientation === "horizontal" ? lineHeight : lineWidth, color: secondaryColor && index % 2 === 1 ? secondaryColor : color, orientation: orientation, animation: `react-loadly-${animationType}`, animationDuration: animationDuration, animationDelay: getLineAnimationDelay(index), style: getLinePosition(index), "data-testid": dataTestId ? `${dataTestId}-line-${index}` : undefined }, index))) }));
+    return (React.createElement("div", { className: `react-loadly-line-group react-loadly-line-group-${arrangement} ${className}`.trim(), style: containerStyle, "data-testid": dataTestId, ...props }, Array.from({ length: count }, (_, index) => (React.createElement(Line, { key: index, width: orientation === "horizontal" ? lineWidth : lineHeight, height: orientation === "horizontal" ? lineHeight : lineWidth, color: secondaryColor && index % 2 === 1 ? secondaryColor : color, orientation: orientation, animation: `react-loadly-${animationType}`, animationDuration: animationDuration, animationDelay: getLineAnimationDelay(index), style: getLinePosition(index), "data-testid": dataTestId ? `${dataTestId}-line-${index}` : undefined })))));
 };
 
 const ShapeGroup = ({ count = 4, shapeSize = 16, color = "var(--react-loadly-color)", secondaryColor, spacing = 8, speed = 1, arrangement = "linear", shapeTypes = ["circle", "rectangle"], className = "", style = {}, animationType = "pulse", borderWidth = 0, "data-testid": dataTestId, ...props }) => {
@@ -423,13 +422,75 @@ const ShapeGroup = ({ count = 4, shapeSize = 16, color = "var(--react-loadly-col
             "data-testid": dataTestId ? `${dataTestId}-shape-${index}` : undefined,
         };
         if (shapeType === "circle") {
-            return jsxRuntime.jsx(Circle, { ...commonProps, size: shapeSize });
+            return React.createElement(Circle, { ...commonProps, size: shapeSize });
         }
         else {
-            return jsxRuntime.jsx(Rectangle, { ...commonProps, width: shapeSize, height: shapeSize });
+            return React.createElement(Rectangle, { ...commonProps, width: shapeSize, height: shapeSize });
         }
     };
-    return (jsxRuntime.jsx("div", { className: `react-loadly-shape-group react-loadly-shape-group-${arrangement} ${className}`.trim(), style: containerStyle, "data-testid": dataTestId, ...props, children: Array.from({ length: count }, (_, index) => renderShape(index)) }));
+    return (React.createElement("div", { className: `react-loadly-shape-group react-loadly-shape-group-${arrangement} ${className}`.trim(), style: containerStyle, "data-testid": dataTestId, ...props }, Array.from({ length: count }, (_, index) => renderShape(index))));
+};
+
+const defaultProps$e = {
+    size: 20,
+    color: "var(--react-loadly-color)",
+    speed: 1,
+    loading: true,
+    count: 5,
+    "aria-label": "Loading...",
+};
+const BarsLoader = (userProps) => {
+    const props = mergeProps(defaultProps$e, userProps);
+    const { size, color, speed, loading, className = "", style = {}, count = 5, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
+    const id = React.useMemo(() => generateId("bars-loader"), []);
+    const sizeValue = getSizeValue(size);
+    const animationSettings = getOptimizedAnimationSettings(speed);
+    if (!loading)
+        return null;
+    const containerStyle = {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
+    };
+    const barsContainerStyle = {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "4px",
+    };
+    const barStyle = {
+        width: "4px",
+        height: sizeValue,
+        backgroundColor: color,
+        borderRadius: "2px",
+        animation: `react-loadly-bars ${animationSettings.duration} ease-in-out infinite`,
+        animationPlayState: animationSettings.playState,
+    };
+    // Create bars with different animation delays
+    const bars = Array.from({ length: count }).map((_, index) => {
+        const delay = `${index * 0.1}s`;
+        const heightFactor = 0.5 + (index % 3) * 0.25; // Vary heights for visual interest
+        return (React.createElement("div", { key: index, style: {
+                ...barStyle,
+                animationDelay: delay,
+                height: `${parseFloat(sizeValue) * heightFactor}px`,
+            }, "data-testid": dataTestId ? `${dataTestId}-bar-${index}` : undefined }));
+    });
+    return (React.createElement("div", { className: `react-loadly react-loadly-bars  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement("div", { style: barsContainerStyle }, bars),
+        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
 };
 
 const defaultProps$d = {
@@ -444,7 +505,7 @@ const defaultProps$d = {
 const BlobLoader = (userProps) => {
     const props = mergeProps(defaultProps$d, userProps);
     const { size, color, secondaryColor, speed, loading, fluidity, amplitude, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const id = react.useMemo(() => generateId("blob-loader"), []);
+    const id = React.useMemo(() => generateId("blob-loader"), []);
     const sizeValue = getSizeValue(size);
     const animationDuration = getAnimationDuration(2500, speed);
     if (!loading)
@@ -475,7 +536,8 @@ const BlobLoader = (userProps) => {
         animation: `blob-inner ${animationDuration} ease-in-out infinite reverse`,
         opacity: 0.7,
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: `
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, `
         @keyframes blob-morph {
           0%, 100% {
             border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
@@ -509,21 +571,244 @@ const BlobLoader = (userProps) => {
             transform: scale(${0.9 + (fluidity ?? 1) * 0.05}) rotate(-240deg);
           }
         }
-      ` }), jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-blob  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("div", { style: blobStyle, "data-testid": dataTestId ? `${dataTestId}-blob` : undefined, children: jsxRuntime.jsx("div", { style: innerBlobStyle }) }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] })] }));
+      `),
+        React.createElement("div", { className: `react-loadly react-loadly-blob  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+            React.createElement("div", { style: blobStyle, "data-testid": dataTestId ? `${dataTestId}-blob` : undefined },
+                React.createElement("div", { style: innerBlobStyle })),
+            showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
+            React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel))));
+};
+
+const defaultProps$c = {
+    size: 15,
+    color: "var(--react-loadly-color)",
+    speed: 1,
+    loading: true,
+    count: 3,
+    "aria-label": "Loading...",
+};
+const BounceLoader = (userProps) => {
+    const props = mergeProps(defaultProps$c, userProps);
+    const { size, color, speed, loading, className = "", style = {}, count = 3, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
+    const id = React.useMemo(() => generateId("bounce-loader"), []);
+    const sizeValue = getSizeValue(size);
+    const animationSettings = getOptimizedAnimationSettings(speed);
+    if (!loading)
+        return null;
+    const containerStyle = {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
+    };
+    const bounceContainerStyle = {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8px",
+    };
+    const bounceBallStyle = {
+        width: sizeValue,
+        height: sizeValue,
+        borderRadius: "50%",
+        backgroundColor: color,
+        animation: `react-loadly-bounce ${animationSettings.duration} ease-in-out infinite`,
+        animationPlayState: animationSettings.playState,
+    };
+    // Create bounce animation delays for each ball
+    const balls = Array.from({ length: count }).map((_, index) => {
+        const delay = `${index * 0.1}s`;
+        return (React.createElement("div", { key: index, style: {
+                ...bounceBallStyle,
+                animationDelay: delay,
+            }, "data-testid": dataTestId ? `${dataTestId}-ball-${index}` : undefined }));
+    });
+    return (React.createElement("div", { className: `react-loadly react-loadly-bounce ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement("div", { style: bounceContainerStyle }, balls),
+        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
 };
 
-const ErrorIcon = ({ className = "" }) => (jsxRuntime.jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: jsxRuntime.jsx("path", { clipRule: "evenodd", fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" }) }));
-const NetworkIcon = ({ className = "" }) => (jsxRuntime.jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M9.243 3.03a1 1 0 01.727 1.213L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H16a1 1 0 110 2h-1.97l-1 4H15a1 1 0 110 2h-2.47l-.56 2.242a1 1 0 11-1.94-.485L10.47 14H7.53l-.56 2.242a1 1 0 11-1.94-.485L5.47 14H4a1 1 0 110-2h1.97l1-4H5a1 1 0 110-2h2.47l.56-2.243a1 1 0 011.213-.727zM9.03 8l-1 4h2.94l1-4H9.03z", clipRule: "evenodd" }) }));
-const TimeoutIcon = ({ className = "" }) => (jsxRuntime.jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }));
-const FallbackLoader = ({ error = "Something went wrong", onRetry, showRetry = true, children, type = "error" }) => {
+const defaultProps$b = {
+    size: 12,
+    color: "var(--react-loadly-color)",
+    speed: 1,
+    loading: true,
+    count: 3,
+    "aria-label": "Loading...",
+};
+const DotsLoader = (userProps) => {
+    const props = mergeProps(defaultProps$b, userProps);
+    const { size, color, speed, loading, className = "", style = {}, count = 3, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
+    const id = React.useMemo(() => generateId("dots-loader"), []);
+    const sizeValue = getSizeValue(size);
+    const animationSettings = getOptimizedAnimationSettings(speed);
+    if (!loading)
+        return null;
+    const containerStyle = {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
+    };
+    const dotsContainerStyle = {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "6px",
+    };
+    const dotStyle = {
+        width: sizeValue,
+        height: sizeValue,
+        borderRadius: "50%",
+        backgroundColor: color,
+        animation: `react-loadly-dots ${animationSettings.duration} ease-in-out infinite`,
+        animationPlayState: animationSettings.playState,
+    };
+    // Create dots with different animation delays
+    const dots = Array.from({ length: count }).map((_, index) => {
+        const delay = `${index * 0.2}s`;
+        return (React.createElement("div", { key: index, style: {
+                ...dotStyle,
+                animationDelay: delay,
+            }, "data-testid": dataTestId ? `${dataTestId}-dot-${index}` : undefined }));
+    });
+    return (React.createElement("div", { className: `react-loadly react-loadly-dots  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement("div", { style: dotsContainerStyle }, dots),
+        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
+};
+
+const defaultProps$a = {
+    size: 60,
+    speed: 1,
+    loading: true,
+    animationType: "spin",
+    glowIntensity: 0.3,
+    "aria-label": "Loading...",
+};
+const ElementLoader = (userProps) => {
+    const props = mergeProps(defaultProps$a, userProps);
+    const { size, width, height, speed = 1, loading, animationType, glowIntensity, className = "", style = {}, color = "var(--react-loadly-color)", "aria-label": ariaLabel, loadingText, showText, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, children, ...restProps } = props;
+    if (!loading)
+        return null;
+    const containerStyle = {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
+    };
+    // Enhanced animation variants for ElementLoader
+    const getAnimation = () => {
+        switch (animationType) {
+            case "pulse":
+                return `react-loadly-pulse ${getAnimationDuration(2000, speed)} infinite`;
+            case "glow":
+                return `react-loadly-glow ${getAnimationDuration(2000, speed)} infinite`;
+            case "bounce":
+                return `react-loadly-bounce ${getAnimationDuration(2000, speed)} infinite`;
+            case "flip":
+                return `react-loadly-flip ${getAnimationDuration(2000, speed)} infinite`;
+            case "spin":
+            default:
+                return `react-loadly-spin ${getAnimationDuration(2000, speed)} infinite`;
+        }
+    };
+    // Calculate dimensions, prioritizing width/height props over size
+    const elementWidth = width || size;
+    const elementHeight = height || size;
+    const elementStyle = {
+        width: typeof elementWidth === "number" ? `${elementWidth}px` : elementWidth,
+        height: typeof elementHeight === "number" ? `${elementHeight}px` : elementHeight,
+        animation: getAnimation(),
+        filter: (glowIntensity ?? 0) > 0 ? `drop-shadow(0 0 ${(glowIntensity ?? 0) * 20}px ${color})` : undefined,
+        transformStyle: "preserve-3d",
+        willChange: "transform",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    };
+    // Add additional animated elements for enhanced visual effect
+    const innerElementStyle = {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        width: "60%",
+        height: "60%",
+        borderRadius: "50%",
+        backgroundColor: color,
+        opacity: 0.3,
+        transform: "translate(-50%, -50%)",
+        animation: `react-loadly-pulse ${getAnimationDuration(1500, speed * 1.5)} infinite`,
+        zIndex: -1,
+    };
+    const outerElementStyle = {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        width: "120%",
+        height: "120%",
+        borderRadius: "50%",
+        border: `2px solid ${color}`,
+        opacity: 0.2,
+        transform: "translate(-50%, -50%)",
+        animation: `react-loadly-spin ${getAnimationDuration(3000, speed * 0.8)} infinite reverse`,
+        zIndex: -2,
+    };
+    return (React.createElement("div", { className: `react-loadly react-loadly-element-loader ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center" } },
+            React.createElement("div", { style: outerElementStyle }),
+            React.createElement("div", { style: innerElementStyle }),
+            React.createElement("div", { style: elementStyle, className: "react-loadly-element", "data-testid": dataTestId ? `${dataTestId}-element` : undefined }, children)),
+        showText && (React.createElement("div", { className: "react-loadly-text", "aria-live": "polite" }, loadingText || ariaLabel)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
+};
+
+const ErrorIcon = ({ className = "" }) => (React.createElement("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+    React.createElement("path", { clipRule: "evenodd", fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" })));
+const NetworkIcon = ({ className = "" }) => (React.createElement("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+    React.createElement("path", { fillRule: "evenodd", d: "M9.243 3.03a1 1 0 01.727 1.213L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H16a1 1 0 110 2h-1.97l-1 4H15a1 1 0 110 2h-2.47l-.56 2.242a1 1 0 11-1.94-.485L10.47 14H7.53l-.56 2.242a1 1 0 11-1.94-.485L5.47 14H4a1 1 0 110-2h1.97l1-4H5a1 1 0 110-2h2.47l.56-2.243a1 1 0 011.213-.727zM9.03 8l-1 4h2.94l1-4H9.03z", clipRule: "evenodd" })));
+const TimeoutIcon = ({ className = "" }) => (React.createElement("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+    React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" })));
+const FallbackLoader = ({ error = "Something went wrong", onRetry, showRetry = true, children, type = "error", className = "", style = {}, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps }) => {
     const getIcon = () => {
         switch (type) {
             case "network":
-                return jsxRuntime.jsx(NetworkIcon, { className: "react-loadly-error-icon" });
+                return React.createElement(NetworkIcon, { className: "react-loadly-error-icon" });
             case "timeout":
-                return jsxRuntime.jsx(TimeoutIcon, { className: "react-loadly-error-icon" });
+                return React.createElement(TimeoutIcon, { className: "react-loadly-error-icon" });
             default:
-                return jsxRuntime.jsx(ErrorIcon, { className: "react-loadly-error-icon" });
+                return React.createElement(ErrorIcon, { className: "react-loadly-error-icon" });
         }
     };
     const getMessage = () => {
@@ -536,13 +821,32 @@ const FallbackLoader = ({ error = "Something went wrong", onRetry, showRetry = t
                 return error || "Something went wrong. Please try again.";
         }
     };
+    const containerStyle = {
+        ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-error-background)",
+            zIndex: 9999,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
+    };
     if (children) {
-        return jsxRuntime.jsx("div", { className: "react-loadly-fallback", children: children });
+        return React.createElement("div", { className: `react-loadly-fallback ${className}`.trim(), style: containerStyle, ...restProps }, children);
     }
-    return (jsxRuntime.jsxs("div", { className: "react-loadly-error", role: "alert", "aria-live": "polite", children: [getIcon(), jsxRuntime.jsx("p", { className: "react-loadly-error-message", children: getMessage() }), showRetry && onRetry && (jsxRuntime.jsx("button", { className: "react-loadly-retry-button", onClick: onRetry, type: "button", "aria-label": "Retry loading", children: "Try Again" }))] }));
+    return (React.createElement("div", { className: `react-loadly-error ${className}`.trim(), style: containerStyle, role: "alert", "aria-live": "polite", ...restProps },
+        getIcon(),
+        React.createElement("p", { className: "react-loadly-error-message" }, getMessage()),
+        showRetry && onRetry && (React.createElement("button", { className: "react-loadly-retry-button", onClick: onRetry, type: "button", "aria-label": "Retry loading" }, "Try Again"))));
 };
 
-const defaultProps$c = {
+const defaultProps$9 = {
     size: 60,
     color: "var(--react-loadly-color)",
     speed: 1,
@@ -552,9 +856,9 @@ const defaultProps$c = {
     "aria-label": "Loading...",
 };
 const FlowLoader = (userProps) => {
-    const props = mergeProps(defaultProps$c, userProps);
-    const { size, color, secondaryColor, speed, loading, amplitude, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const id = react.useMemo(() => generateId("flow-loader"), []);
+    const props = mergeProps(defaultProps$9, userProps);
+    const { size, color, secondaryColor, speed, loading, amplitude, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
+    const id = React.useMemo(() => generateId("flow-loader"), []);
     const sizeValue = getSizeValue(size);
     const numericSize = parseInt(sizeValue);
     const containerHeight = Math.max(numericSize * 0.4, 10); // Minimum height of 10px
@@ -566,6 +870,16 @@ const FlowLoader = (userProps) => {
         flexDirection: "column",
         alignItems: "center",
         ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
     };
     const flowContainerStyle = {
         width: sizeValue,
@@ -583,7 +897,7 @@ const FlowLoader = (userProps) => {
         // Scale particle size based on container size
         const minParticleSize = Math.max(numericSize / 10, 4); // Minimum 4px
         const particleSize = minParticleSize + (index % 3) * (minParticleSize / 2);
-        return (jsxRuntime.jsx("div", { style: {
+        return (React.createElement("div", { key: index, style: {
                 position: "absolute",
                 width: `${particleSize}px`,
                 height: `${particleSize}px`,
@@ -594,9 +908,10 @@ const FlowLoader = (userProps) => {
                 opacity: 0.8 - index * 0.1,
                 left: "0px", // Start at the beginning of the container
                 top: `${(containerHeight - particleSize) / 2 + (index % 3) * (containerHeight / (particleCount + 1))}px`, // Distribute vertically
-            }, "data-testid": dataTestId ? `${dataTestId}-particle-${index}` : undefined }, index));
+            }, "data-testid": dataTestId ? `${dataTestId}-particle-${index}` : undefined }));
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: `
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, `
         @keyframes flow-particle-${id} {
           0% {
             transform: translateX(0) translateY(0) scale(0);
@@ -619,10 +934,14 @@ const FlowLoader = (userProps) => {
             opacity: 0;
           }
         }
-      ` }), jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-flow  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("div", { style: flowContainerStyle, "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: Array.from({ length: particleCount }, (_, index) => createParticle(index)) }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] })] }));
+      `),
+        React.createElement("div", { className: `react-loadly react-loadly-flow  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+            React.createElement("div", { style: flowContainerStyle, "data-testid": dataTestId ? `${dataTestId}-container` : undefined }, Array.from({ length: particleCount }, (_, index) => createParticle(index))),
+            showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
+            React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel))));
 };
 
-const defaultProps$b = {
+const defaultProps$8 = {
     size: 40,
     color: "var(--react-loadly-color)",
     speed: 1,
@@ -631,10 +950,10 @@ const defaultProps$b = {
     "aria-label": "Loading...",
 };
 const GridLoader = (userProps) => {
-    const props = mergeProps(defaultProps$b, userProps);
-    const { size, color, secondaryColor, speed, loading, count, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const id = react.useMemo(() => generateId("grid-loader"), []);
-    const shapeSize = react.useMemo(() => {
+    const props = mergeProps(defaultProps$8, userProps);
+    const { size, color, secondaryColor, speed = 1, loading, count, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
+    const id = React.useMemo(() => generateId("grid-loader"), []);
+    const shapeSize = React.useMemo(() => {
         const sizeNum = typeof size === "number" ? size : parseInt(getSizeValue(size));
         const gridSize = Math.ceil(Math.sqrt(count || 4));
         return Math.max(sizeNum / (gridSize * 1.5), 8);
@@ -646,22 +965,35 @@ const GridLoader = (userProps) => {
         flexDirection: "column",
         alignItems: "center",
         ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
     };
-    return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-grid  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("div", { style: {
-                    display: "grid",
-                    gridTemplateColumns: `repeat(${Math.ceil(Math.sqrt(count || 4))}, 1fr)`,
-                    gap: `${shapeSize / 4}px`,
-                }, children: Array.from({ length: count || 4 }, (_, index) => (jsxRuntime.jsx("div", { style: {
-                        width: shapeSize,
-                        height: shapeSize,
-                        backgroundColor: index % 2 === 0 ? color : secondaryColor || color,
-                        borderRadius: "2px",
-                        animation: `react-loadly-scale ${1.2 / (speed || 1)}s ease-in-out infinite`,
-                        animationDelay: `${(index * 0.1) / (speed || 1)}s`,
-                    }, "data-testid": dataTestId ? `${dataTestId}-shape-${index}` : undefined }, index))) }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
+    return (React.createElement("div", { className: `react-loadly react-loadly-grid  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement("div", { className: "react-loadly-grid-container", style: {
+                display: "grid",
+                gridTemplateColumns: `repeat(${Math.ceil(Math.sqrt(count || 4))}, 1fr)`,
+                gap: `${shapeSize / 3}px`,
+            }, "data-testid": dataTestId ? `${dataTestId}-grid` : undefined }, Array.from({ length: count || 4 }).map((_, index) => (React.createElement("div", { key: index, className: "react-loadly-grid-item", style: {
+                width: `${shapeSize}px`,
+                height: `${shapeSize}px`,
+                backgroundColor: index % 2 === 0 ? color : secondaryColor || color,
+                borderRadius: "20%",
+                animation: `react-loadly-scale ${1.2 / (speed || 1)}s ease-in-out infinite`,
+                animationDelay: `${(index * 0.1) / (speed || 1)}s`,
+            } })))),
+        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
 };
 
-const defaultProps$a = {
+const defaultProps$7 = {
     size: 60,
     color: "var(--react-loadly-color)",
     speed: 1,
@@ -671,9 +1003,9 @@ const defaultProps$a = {
     "aria-label": "Loading...",
 };
 const LiquidLoader = (userProps) => {
-    const props = mergeProps(defaultProps$a, userProps);
-    const { size, color, secondaryColor, speed, loading, amplitude, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const id = react.useMemo(() => generateId("liquid-loader"), []);
+    const props = mergeProps(defaultProps$7, userProps);
+    const { size, color, secondaryColor, speed, loading, amplitude, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
+    const id = React.useMemo(() => generateId("liquid-loader"), []);
     const sizeValue = getSizeValue(size);
     const animationDuration = getAnimationDuration(2000, speed);
     if (!loading)
@@ -683,6 +1015,16 @@ const LiquidLoader = (userProps) => {
         flexDirection: "column",
         alignItems: "center",
         ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
     };
     const liquidStyle = {
         width: sizeValue,
@@ -713,7 +1055,8 @@ const LiquidLoader = (userProps) => {
         animationDelay: `${ -0.5 / (speed ?? 1)}s`,
         opacity: 0.8,
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: `
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, `
         @keyframes react-loadly-liquid-wave {
           0%, 100% {
             transform: translate(-25%, 50%) rotate(0deg);
@@ -722,20 +1065,27 @@ const LiquidLoader = (userProps) => {
             transform: translate(-25%, ${translateY}%) rotate(180deg);
           }
         }
-      ` }), jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-liquid  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsxs("div", { style: liquidStyle, "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsxRuntime.jsx("div", { style: waveStyle }), jsxRuntime.jsx("div", { style: wave2Style })] }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] })] }));
+      `),
+        React.createElement("div", { className: `react-loadly react-loadly-liquid  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+            React.createElement("div", { style: liquidStyle, "data-testid": dataTestId ? `${dataTestId}-container` : undefined },
+                React.createElement("div", { style: waveStyle }),
+                React.createElement("div", { style: wave2Style })),
+            showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
+            React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel))));
 };
 
-const defaultProps$9 = {
+const defaultProps$6 = {
     size: 60,
     speed: 1,
     loading: true,
     animationType: "spin",
     glowIntensity: 0.3,
     "aria-label": "Loading...",
+    alt: "Loading",
 };
 const LogoSpinLoader = (userProps) => {
-    const props = mergeProps(defaultProps$9, userProps);
-    const { src, alt = "Loading", size, speed, loading, animationType, glowIntensity, className = "", style = {}, color = "var(--react-loadly-color)", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
+    const props = mergeProps(defaultProps$6, userProps);
+    const { src, alt, size, speed, loading, animationType, glowIntensity, className = "", style = {}, color = "var(--react-loadly-color)", "aria-label": ariaLabel, loadingText, showText, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
     if (!loading)
         return null;
     const containerStyle = {
@@ -743,6 +1093,16 @@ const LogoSpinLoader = (userProps) => {
         flexDirection: "column",
         alignItems: "center",
         ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
     };
     const logoStyle = {
         width: typeof size === "number" ? `${size}px` : size,
@@ -750,19 +1110,13 @@ const LogoSpinLoader = (userProps) => {
         animation: `react-loadly-${animationType} ${getAnimationDuration(2000, speed)} infinite`,
         filter: (glowIntensity ?? 0) > 0 ? `drop-shadow(0 0 ${(glowIntensity ?? 0) * 20}px ${color})` : undefined,
     };
-    // If no src provided, show a default loading circle
-    if (!src) {
-        return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-logo  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("div", { style: {
-                        ...logoStyle,
-                        borderRadius: "50%",
-                        backgroundColor: color,
-                        opacity: 0.8,
-                    }, "data-testid": dataTestId ? `${dataTestId}-default` : undefined }), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
-    }
-    return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-logo  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("img", { src: src, alt: alt, style: logoStyle, "data-testid": dataTestId ? `${dataTestId}-image` : undefined }), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
+    return (React.createElement("div", { className: `react-loadly react-loadly-logo-spin  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement("img", { src: src, alt: alt, style: logoStyle, className: "react-loadly-logo", "data-testid": dataTestId ? `${dataTestId}-logo` : undefined }),
+        showText && (React.createElement("div", { className: "react-loadly-text", "aria-live": "polite" }, loadingText || ariaLabel)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
 };
 
-const defaultProps$8 = {
+const defaultProps$5 = {
     size: 40,
     color: "var(--react-loadly-color)",
     speed: 1,
@@ -771,10 +1125,10 @@ const defaultProps$8 = {
     "aria-label": "Loading...",
 };
 const PulseLoader = (userProps) => {
-    const props = mergeProps(defaultProps$8, userProps);
-    const { size, color, secondaryColor, speed, loading, count, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const id = react.useMemo(() => generateId("pulse-loader"), []);
-    const dotSize = react.useMemo(() => {
+    const props = mergeProps(defaultProps$5, userProps);
+    const { size, color, secondaryColor, speed, loading, count, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
+    const id = React.useMemo(() => generateId("pulse-loader"), []);
+    const dotSize = React.useMemo(() => {
         const sizeNum = typeof size === "number" ? size : parseInt(getSizeValue(size));
         return Math.max(sizeNum / 5, 6); // Ensure minimum dot size
     }, [size]);
@@ -785,25 +1139,39 @@ const PulseLoader = (userProps) => {
         flexDirection: "column",
         alignItems: "center",
         ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
     };
-    return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-pulse  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx(DotCluster, { count: count, dotSize: dotSize, color: color, secondaryColor: secondaryColor, speed: speed, arrangement: "linear", animationType: "pulse", spacing: dotSize / 2, "data-testid": dataTestId ? `${dataTestId}-dots` : undefined }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
+    return (React.createElement("div", { className: `react-loadly react-loadly-pulse  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement(DotCluster, { count: count, dotSize: dotSize, color: color, secondaryColor: secondaryColor, speed: speed, arrangement: "linear", animationType: "pulse", spacing: dotSize / 2, "data-testid": dataTestId ? `${dataTestId}-dots` : undefined }),
+        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
 };
 
-const defaultProps$7 = {
-    size: 40,
+const defaultProps$4 = {
+    size: 60,
     color: "var(--react-loadly-color)",
     speed: 1,
     loading: true,
     borderWidth: 4,
     "aria-label": "Loading...",
 };
-const SpinLoader = (userProps) => {
-    const props = mergeProps(defaultProps$7, userProps);
-    const { size, color, speed, loading, className = "", style = {}, borderWidth, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
+const RingLoader = (userProps) => {
+    const props = mergeProps(defaultProps$4, userProps);
+    const { size, color, speed, loading, className = "", style = {}, borderWidth, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
     // Use useRef instead of useMemo for better compatibility
-    const idRef = react.useRef(generateId("spin-loader"));
+    const idRef = React.useRef(generateId("ring-loader"));
     const sizeValue = getSizeValue(size);
     const animationSettings = getOptimizedAnimationSettings(speed);
+    // Don't render anything if not loading
     if (!loading)
         return null;
     const containerStyle = {
@@ -811,168 +1179,49 @@ const SpinLoader = (userProps) => {
         flexDirection: "column",
         alignItems: "center",
         ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
     };
-    const spinnerStyle = {
+    const ringStyle = {
+        position: "relative",
+        width: sizeValue,
+        height: sizeValue,
+    };
+    const ringSegmentStyle = {
+        boxSizing: "border-box",
+        display: "block",
+        position: "absolute",
         width: sizeValue,
         height: sizeValue,
         border: `${borderWidth}px solid transparent`,
         borderTop: `${borderWidth}px solid ${color}`,
+        borderBottom: `${borderWidth}px solid ${color}`,
         borderRadius: "50%",
-        animation: `react-loadly-spin ${animationSettings.duration} linear infinite`,
-        animationPlayState: animationSettings.playState,
-    };
-    return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-spin  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("div", { style: spinnerStyle, "data-testid": dataTestId ? `${dataTestId}-spinner` : undefined }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${idRef.current}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
-};
-
-const defaultProps$6 = {
-    text: "Loading...",
-    speed: 1,
-    loading: true,
-    charDelay: 100,
-    "aria-label": "Loading...",
-};
-const TypingLoader = (userProps) => {
-    const props = mergeProps(defaultProps$6, userProps);
-    const { text, speed, loading, charDelay, className = "", style = {}, color = "var(--react-loadly-text-color)", fontFamily, fontWeight = 500, "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const [displayText, setDisplayText] = react.useState("");
-    const [isTyping, setIsTyping] = react.useState(false);
-    const timeoutRef = react.useRef(null);
-    react.useEffect(() => {
-        // Clear any existing timeout
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
-        }
-        if (!loading || !text) {
-            setDisplayText("");
-            return;
-        }
-        setIsTyping(true);
-        setDisplayText("");
-        let currentIndex = 0;
-        const typeChar = () => {
-            if (currentIndex < text.length) {
-                setDisplayText(text.slice(0, currentIndex + 1));
-                currentIndex++;
-                timeoutRef.current = setTimeout(typeChar, (charDelay ?? 100) / (speed ?? 1));
-            }
-            else {
-                setIsTyping(false);
-                // Reset and start over
-                timeoutRef.current = setTimeout(() => {
-                    currentIndex = 0;
-                    setDisplayText("");
-                    if (loading)
-                        typeChar();
-                }, 1000 / (speed ?? 1));
-            }
-        };
-        typeChar();
-        return () => {
-            setIsTyping(false);
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-                timeoutRef.current = null;
-            }
-        };
-    }, [text, loading, charDelay, speed]);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        alignItems: "center",
-        fontFamily: fontFamily || "var(--react-loadly-font-family)",
-        fontSize: "var(--react-loadly-font-size)",
-        fontWeight,
-        color,
-        ...style,
-    };
-    const cursorStyle = {
-        marginLeft: "2px",
-        animation: isTyping ? "none" : "react-loadly-fade 1s infinite",
-        opacity: isTyping ? 1 : 0.5,
-    };
-    return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-typing  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("span", { children: displayText }), jsxRuntime.jsx("span", { style: cursorStyle, children: "|" }), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
-};
-
-const defaultProps$5 = {
-    size: 40,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    count: 5,
-    "aria-label": "Loading...",
-};
-const WaveLoader = (userProps) => {
-    const props = mergeProps(defaultProps$5, userProps);
-    const { size, color, secondaryColor, speed, loading, count, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const id = react.useMemo(() => generateId("wave-loader"), []);
-    const lineSpecs = react.useMemo(() => {
-        const sizeNum = typeof size === "number" ? size : parseInt(getSizeValue(size));
-        return {
-            width: Math.max(sizeNum / 10, 3), // Line thickness
-            height: sizeNum, // Line height
-            spacing: Math.max(sizeNum / 8, 4), // Spacing between lines
-        };
-    }, [size]);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-    };
-    return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-wave  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx(LineGroup, { count: count, lineWidth: lineSpecs.width, lineHeight: lineSpecs.height, color: color, secondaryColor: secondaryColor, speed: speed, arrangement: "staggered", orientation: "vertical", animationType: "wave", spacing: lineSpecs.spacing, "data-testid": dataTestId ? `${dataTestId}-lines` : undefined }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
-};
-
-const defaultProps$4 = {
-    size: 20,
-    color: "var(--react-loadly-color)",
-    speed: 1,
-    loading: true,
-    count: 5,
-    "aria-label": "Loading...",
-};
-const BarsLoader = (userProps) => {
-    const props = mergeProps(defaultProps$4, userProps);
-    const { size, color, speed, loading, className = "", style = {}, count = 5, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const id = react.useMemo(() => generateId("bars-loader"), []);
-    const sizeValue = getSizeValue(size);
-    const animationSettings = getOptimizedAnimationSettings(speed);
-    if (!loading)
-        return null;
-    const containerStyle = {
-        display: "inline-flex",
-        flexDirection: "column",
-        alignItems: "center",
-        ...style,
-    };
-    const barsContainerStyle = {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "4px",
-    };
-    const barStyle = {
-        width: "4px",
-        height: sizeValue,
-        backgroundColor: color,
-        borderRadius: "2px",
-        animation: `react-loadly-bars ${animationSettings.duration} ease-in-out infinite`,
+        animation: `react-loadly-ring ${animationSettings.duration} cubic-bezier(0.5, 0, 0.5, 1) infinite`,
         animationPlayState: animationSettings.playState,
     };
-    // Create bars with different animation delays
-    const bars = Array.from({ length: count }).map((_, index) => {
-        const delay = `${index * 0.1}s`;
-        const heightFactor = 0.5 + (index % 3) * 0.25; // Vary heights for visual interest
-        return (jsxRuntime.jsx("div", { style: {
-                ...barStyle,
+    // Create the 4 ring segments with their specific styles
+    const segments = Array.from({ length: 4 }).map((_, index) => {
+        const rotation = `${index * 90}deg`;
+        const delay = `${index * -0.15}s`;
+        return (React.createElement("div", { key: index, style: {
+                ...ringSegmentStyle,
+                transform: `rotate(${rotation})`,
                 animationDelay: delay,
-                height: `${parseFloat(sizeValue) * heightFactor}px`,
-            }, "data-testid": dataTestId ? `${dataTestId}-bar-${index}` : undefined }, index));
+            }, "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined }));
     });
-    return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-bars  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("div", { style: barsContainerStyle, children: bars }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
+    return (React.createElement("div", { className: `react-loadly react-loadly-ring  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement("div", { style: ringStyle }, segments),
+        showText && (React.createElement("div", { className: "react-loadly-text", id: `${idRef.current}-text`, "aria-live": "polite" }, loadingText)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
 };
 
 const defaultProps$3 = {
@@ -980,13 +1229,13 @@ const defaultProps$3 = {
     color: "var(--react-loadly-color)",
     speed: 1,
     loading: true,
-    count: 3,
+    count: 2,
     "aria-label": "Loading...",
 };
-const BounceLoader = (userProps) => {
+const RotateLoader = (userProps) => {
     const props = mergeProps(defaultProps$3, userProps);
-    const { size, color, speed, loading, className = "", style = {}, count = 3, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const id = react.useMemo(() => generateId("bounce-loader"), []);
+    const { size, color, speed, loading, className = "", style = {}, count = 2, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
+    const id = React.useMemo(() => generateId("rotate-loader"), []);
     const sizeValue = getSizeValue(size);
     const animationSettings = getOptimizedAnimationSettings(speed);
     if (!loading)
@@ -996,44 +1245,67 @@ const BounceLoader = (userProps) => {
         flexDirection: "column",
         alignItems: "center",
         ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
     };
-    const bounceContainerStyle = {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "8px",
+    const rotateContainerStyle = {
+        position: "relative",
+        width: sizeValue,
+        height: sizeValue,
     };
-    const bounceBallStyle = {
+    const rotateElementStyle = {
+        position: "absolute",
         width: sizeValue,
         height: sizeValue,
+        border: "2px solid transparent",
+        borderTopColor: color,
+        borderBottomColor: color,
         borderRadius: "50%",
-        backgroundColor: color,
-        animation: `react-loadly-bounce ${animationSettings.duration} ease-in-out infinite`,
+        animation: `react-loadly-ring ${animationSettings.duration} cubic-bezier(0.5, 0, 0.5, 1) infinite`,
         animationPlayState: animationSettings.playState,
+        transform: "rotate(0deg)",
     };
-    // Create bounce animation delays for each ball
-    const balls = Array.from({ length: count }).map((_, index) => {
-        const delay = `${index * 0.1}s`;
-        return (jsxRuntime.jsx("div", { style: {
-                ...bounceBallStyle,
+    // Create rotating elements
+    const elements = Array.from({ length: count }).map((_, index) => {
+        const sizeFactor = 1 - index * 0.2;
+        const borderWidth = 2 + index;
+        const delay = `${index * -0.15}s`;
+        return (React.createElement("div", { key: index, style: {
+                ...rotateElementStyle,
+                width: `${parseFloat(sizeValue) * sizeFactor}px`,
+                height: `${parseFloat(sizeValue) * sizeFactor}px`,
+                borderWidth: `${borderWidth}px`,
+                animationDuration: `${parseFloat(animationSettings.duration) * (1 + index * 0.5)}ms`,
                 animationDelay: delay,
-            }, "data-testid": dataTestId ? `${dataTestId}-ball-${index}` : undefined }, index));
+            }, "data-testid": dataTestId ? `${dataTestId}-element-${index}` : undefined }));
     });
-    return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-bounce ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("div", { style: bounceContainerStyle, children: balls }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
+    return (React.createElement("div", { className: `react-loadly react-loadly-ring  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement("div", { style: rotateContainerStyle }, elements),
+        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
 };
 
 const defaultProps$2 = {
-    size: 12,
+    size: 40,
     color: "var(--react-loadly-color)",
     speed: 1,
     loading: true,
-    count: 3,
+    borderWidth: 4,
     "aria-label": "Loading...",
 };
-const DotsLoader = (userProps) => {
+const SpinLoader = (userProps) => {
     const props = mergeProps(defaultProps$2, userProps);
-    const { size, color, speed, loading, className = "", style = {}, count = 3, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const id = react.useMemo(() => generateId("dots-loader"), []);
+    const { size, color, speed, loading, className = "", style = {}, borderWidth, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
+    // Use useRef instead of useMemo for better compatibility
+    const idRef = React.useRef(generateId("spin-loader"));
     const sizeValue = getSizeValue(size);
     const animationSettings = getOptimizedAnimationSettings(speed);
     if (!loading)
@@ -1043,48 +1315,81 @@ const DotsLoader = (userProps) => {
         flexDirection: "column",
         alignItems: "center",
         ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
     };
-    const dotsContainerStyle = {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "6px",
-    };
-    const dotStyle = {
+    const spinnerStyle = {
         width: sizeValue,
         height: sizeValue,
+        border: `${borderWidth}px solid transparent`,
+        borderTop: `${borderWidth}px solid ${color}`,
         borderRadius: "50%",
-        backgroundColor: color,
-        animation: `react-loadly-dots ${animationSettings.duration} ease-in-out infinite`,
+        animation: `react-loadly-spin ${animationSettings.duration} linear infinite`,
         animationPlayState: animationSettings.playState,
     };
-    // Create dots with different animation delays
-    const dots = Array.from({ length: count }).map((_, index) => {
-        const delay = `${index * 0.2}s`;
-        return (jsxRuntime.jsx("div", { style: {
-                ...dotStyle,
-                animationDelay: delay,
-            }, "data-testid": dataTestId ? `${dataTestId}-dot-${index}` : undefined }, index));
-    });
-    return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-dots  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("div", { style: dotsContainerStyle, children: dots }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
+    return (React.createElement("div", { className: `react-loadly react-loadly-spin  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement("div", { style: spinnerStyle, "data-testid": dataTestId ? `${dataTestId}-spinner` : undefined }),
+        showText && (React.createElement("div", { className: "react-loadly-text", id: `${idRef.current}-text`, "aria-live": "polite" }, loadingText)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
 };
 
 const defaultProps$1 = {
-    size: 60,
-    color: "var(--react-loadly-color)",
     speed: 1,
     loading: true,
-    borderWidth: 4,
+    charDelay: 100,
     "aria-label": "Loading...",
+    loop: true,
 };
-const RingLoader = (userProps) => {
+const TypingLoader = (userProps) => {
     const props = mergeProps(defaultProps$1, userProps);
-    const { size, color, speed, loading, className = "", style = {}, borderWidth, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    // Use useRef instead of useMemo for better compatibility
-    const idRef = react.useRef(generateId("ring-loader"));
-    const sizeValue = getSizeValue(size);
-    const animationSettings = getOptimizedAnimationSettings(speed);
-    // Don't render anything if not loading
+    const { loadingText, speed = 1, loading, charDelay = 100, loop, className = "", style = {}, color = "var(--react-loadly-text-color)", fontFamily, fontWeight = 500, "aria-label": ariaLabel, "data-testid": dataTestId, showText, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
+    const [displayText, setDisplayText] = React.useState("");
+    const [isTyping, setIsTyping] = React.useState(false);
+    const timeoutRef = React.useRef(null);
+    React.useEffect(() => {
+        // Clear any existing timeout
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (!loading || !loadingText) {
+            setDisplayText("");
+            return;
+        }
+        setIsTyping(true);
+        setDisplayText("");
+        const typeText = (index = 0) => {
+            if (index < loadingText.length) {
+                setDisplayText(loadingText.substring(0, index + 1));
+                timeoutRef.current = setTimeout(() => typeText(index + 1), charDelay / speed);
+            }
+            else if (loop) {
+                // Reset and start over if looping
+                timeoutRef.current = setTimeout(() => {
+                    setDisplayText("");
+                    typeText(0);
+                }, charDelay * 2);
+            }
+            else {
+                setIsTyping(false);
+            }
+        };
+        typeText(0);
+        // Cleanup timeouts on unmount or when dependencies change
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [loading, loadingText, charDelay, speed, loop]);
     if (!loading)
         return null;
     const containerStyle = {
@@ -1092,52 +1397,57 @@ const RingLoader = (userProps) => {
         flexDirection: "column",
         alignItems: "center",
         ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
     };
-    const ringStyle = {
-        position: "relative",
-        width: sizeValue,
-        height: sizeValue,
-    };
-    const ringSegmentStyle = {
-        boxSizing: "border-box",
-        display: "block",
-        position: "absolute",
-        width: sizeValue,
-        height: sizeValue,
-        border: `${borderWidth}px solid transparent`,
-        borderTop: `${borderWidth}px solid ${color}`,
-        borderBottom: `${borderWidth}px solid ${color}`,
-        borderRadius: "50%",
-        animation: `react-loadly-ring ${animationSettings.duration} cubic-bezier(0.5, 0, 0.5, 1) infinite`,
-        animationPlayState: animationSettings.playState,
+    const textStyle = {
+        color,
+        fontFamily,
+        fontWeight,
+        fontSize: "1.2em",
+        whiteSpace: "pre",
     };
-    // Create the 4 ring segments with their specific styles
-    const segments = Array.from({ length: 4 }).map((_, index) => {
-        const rotation = `${index * 90}deg`;
-        const delay = `${index * -0.15}s`;
-        return (jsxRuntime.jsx("div", { style: {
-                ...ringSegmentStyle,
-                transform: `rotate(${rotation})`,
-                animationDelay: delay,
-            }, "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined }, index));
-    });
-    return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-ring  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("div", { style: ringStyle, children: segments }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${idRef.current}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
+    return (React.createElement("div", { className: `react-loadly react-loadly-typing  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement("div", { style: textStyle, "data-testid": dataTestId ? `${dataTestId}-text` : undefined },
+            displayText,
+            React.createElement("span", { className: "react-loadly-typing-cursor", style: {
+                    display: isTyping ? "inline-block" : "none",
+                    animation: `react-loadly-blink ${1 / speed}s step-end infinite`,
+                    marginLeft: "2px",
+                    verticalAlign: "baseline",
+                } }, "|")),
+        showText && (React.createElement("div", { className: "react-loadly-text", "aria-live": "polite" }, loadingText)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
 };
 
 const defaultProps = {
-    size: 15,
+    size: 40,
     color: "var(--react-loadly-color)",
     speed: 1,
     loading: true,
-    count: 2,
+    count: 5,
     "aria-label": "Loading...",
 };
-const RotateLoader = (userProps) => {
+const WaveLoader = (userProps) => {
     const props = mergeProps(defaultProps, userProps);
-    const { size, color, speed, loading, className = "", style = {}, count = 2, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, ...restProps } = props;
-    const id = react.useMemo(() => generateId("rotate-loader"), []);
-    const sizeValue = getSizeValue(size);
-    const animationSettings = getOptimizedAnimationSettings(speed);
+    const { size, color, secondaryColor, speed, loading, count, className = "", style = {}, showText, loadingText = "Loading...", "aria-label": ariaLabel, "data-testid": dataTestId, fullscreen, screenWidth, screenHeight, loaderCenter, screenBackground, ...restProps } = props;
+    const id = React.useMemo(() => generateId("wave-loader"), []);
+    const lineSpecs = React.useMemo(() => {
+        const sizeNum = typeof size === "number" ? size : parseInt(getSizeValue(size));
+        return {
+            width: Math.max(sizeNum / 10, 3), // Line thickness
+            height: sizeNum, // Line height
+            spacing: Math.max(sizeNum / 8, 4), // Spacing between lines
+        };
+    }, [size]);
     if (!loading)
         return null;
     const containerStyle = {
@@ -1145,39 +1455,21 @@ const RotateLoader = (userProps) => {
         flexDirection: "column",
         alignItems: "center",
         ...style,
+        ...(fullscreen && {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: screenWidth || "100vw",
+            height: screenHeight || "100vh",
+            backgroundColor: screenBackground || "var(--react-loadly-background)",
+            zIndex: 9999,
+            justifyContent: loaderCenter ? "center" : style.justifyContent,
+        }),
     };
-    const rotateContainerStyle = {
-        position: "relative",
-        width: sizeValue,
-        height: sizeValue,
-    };
-    const rotateElementStyle = {
-        position: "absolute",
-        width: sizeValue,
-        height: sizeValue,
-        border: "2px solid transparent",
-        borderTopColor: color,
-        borderBottomColor: color,
-        borderRadius: "50%",
-        animation: `react-loadly-ring ${animationSettings.duration} cubic-bezier(0.5, 0, 0.5, 1) infinite`,
-        animationPlayState: animationSettings.playState,
-        transform: "rotate(0deg)",
-    };
-    // Create rotating elements
-    const elements = Array.from({ length: count }).map((_, index) => {
-        const sizeFactor = 1 - index * 0.2;
-        const borderWidth = 2 + index;
-        const delay = `${index * -0.15}s`;
-        return (jsxRuntime.jsx("div", { style: {
-                ...rotateElementStyle,
-                width: `${parseFloat(sizeValue) * sizeFactor}px`,
-                height: `${parseFloat(sizeValue) * sizeFactor}px`,
-                borderWidth: `${borderWidth}px`,
-                animationDuration: `${parseFloat(animationSettings.duration) * (1 + index * 0.5)}ms`,
-                animationDelay: delay,
-            }, "data-testid": dataTestId ? `${dataTestId}-element-${index}` : undefined }, index));
-    });
-    return (jsxRuntime.jsxs("div", { className: `react-loadly react-loadly-ring  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps, children: [jsxRuntime.jsx("div", { style: rotateContainerStyle, children: elements }), showText && (jsxRuntime.jsx("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite", children: loadingText })), jsxRuntime.jsx("span", { className: "react-loadly-sr-only", children: ariaLabel })] }));
+    return (React.createElement("div", { className: `react-loadly react-loadly-wave  ${className}`.trim(), style: containerStyle, role: "status", "aria-label": ariaLabel, "aria-live": "polite", "aria-busy": loading, "data-testid": dataTestId, ...restProps },
+        React.createElement(LineGroup, { count: count, lineWidth: lineSpecs.width, lineHeight: lineSpecs.height, color: color, secondaryColor: secondaryColor, speed: speed, arrangement: "staggered", orientation: "vertical", animationType: "wave", spacing: lineSpecs.spacing, "data-testid": dataTestId ? `${dataTestId}-lines` : undefined }),
+        showText && (React.createElement("div", { className: "react-loadly-text", id: `${id}-text`, "aria-live": "polite" }, loadingText)),
+        React.createElement("span", { className: "react-loadly-sr-only" }, ariaLabel)));
 };
 
 /**
@@ -1188,17 +1480,17 @@ const RotateLoader = (userProps) => {
  * @returns Object containing state and methods to control the loader
  */
 const useLoaderState = (options = {}) => {
-    const { initialLoading = false, timeout, maxRetries = 3, onLoadingChange, onError, onProgress, } = options;
-    const [state, setState] = react.useState({
+    const { initialLoading = false, timeout, maxRetries = 3, onLoadingChange, onError, onProgress } = options;
+    const [state, setState] = React.useState({
         isLoading: initialLoading,
         progress: 0,
         error: null,
         retryCount: 0,
     });
-    const timeoutRef = react.useRef();
-    const retryTimeoutRef = react.useRef();
+    const timeoutRef = React.useRef(null);
+    const retryTimeoutRef = React.useRef(null);
     // Clear timeouts on unmount
-    react.useEffect(() => {
+    React.useEffect(() => {
         return () => {
             if (timeoutRef.current) {
                 clearTimeout(timeoutRef.current);
@@ -1209,7 +1501,7 @@ const useLoaderState = (options = {}) => {
         };
     }, []);
     // Handle timeout
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (state.isLoading && timeout) {
             timeoutRef.current = setTimeout(() => {
                 setState((prev) => ({
@@ -1230,16 +1522,16 @@ const useLoaderState = (options = {}) => {
         };
     }, [state.isLoading, timeout, onError]);
     // Call onLoadingChange when loading state changes
-    react.useEffect(() => {
+    React.useEffect(() => {
         onLoadingChange?.(state.isLoading);
     }, [state.isLoading, onLoadingChange]);
     // Call onProgress when progress changes
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (state.progress !== undefined) {
             onProgress?.(state.progress);
         }
     }, [state.progress, onProgress]);
-    const setLoading = react.useCallback((loading) => {
+    const setLoading = React.useCallback((loading) => {
         setState((prev) => ({
             ...prev,
             isLoading: loading,
@@ -1247,7 +1539,7 @@ const useLoaderState = (options = {}) => {
             progress: loading ? 0 : prev.progress, // Reset progress when starting
         }));
     }, []);
-    const setProgress = react.useCallback((progress) => {
+    const setProgress = React.useCallback((progress) => {
         const clampedProgress = Math.min(Math.max(progress, 0), 100);
         setState((prev) => ({
             ...prev,
@@ -1256,7 +1548,7 @@ const useLoaderState = (options = {}) => {
             isLoading: clampedProgress >= 100 ? false : prev.isLoading,
         }));
     }, []);
-    const setError = react.useCallback((error) => {
+    const setError = React.useCallback((error) => {
         setState((prev) => ({
             ...prev,
             error,
@@ -1266,7 +1558,7 @@ const useLoaderState = (options = {}) => {
             onError?.(error);
         }
     }, [onError]);
-    const retry = react.useCallback(() => {
+    const retry = React.useCallback(() => {
         setState((prev) => {
             const newRetryCount = (prev.retryCount || 0) + 1;
             if (newRetryCount > maxRetries) {
@@ -1291,7 +1583,7 @@ const useLoaderState = (options = {}) => {
             setState((prev) => ({ ...prev, isLoading: true }));
         }, backoffDelay);
     }, [state.retryCount, maxRetries, onError]);
-    const reset = react.useCallback(() => {
+    const reset = React.useCallback(() => {
         setState({
             isLoading: false,
             progress: 0,
@@ -1342,8 +1634,8 @@ const useMultipleLoaderStates = (keys, options = {}) => {
  */
 const useAsyncLoader = (asyncFn, dependencies = [], options = {}) => {
     const loaderState = useLoaderState(options);
-    const [data, setData] = react.useState(null);
-    const execute = react.useCallback(async () => {
+    const [data, setData] = React.useState(null);
+    const execute = React.useCallback(async () => {
         try {
             loaderState.setLoading(true);
             loaderState.setError(null);
@@ -1359,7 +1651,7 @@ const useAsyncLoader = (asyncFn, dependencies = [], options = {}) => {
         }
     }, [asyncFn, loaderState]);
     // Auto-execute on dependency changes
-    react.useEffect(() => {
+    React.useEffect(() => {
         execute();
     }, dependencies);
     return {
@@ -1376,6 +1668,7 @@ exports.Circle = Circle;
 exports.Dot = Dot;
 exports.DotCluster = DotCluster;
 exports.DotsLoader = DotsLoader;
+exports.ElementLoader = ElementLoader;
 exports.FallbackLoader = FallbackLoader;
 exports.FlowLoader = FlowLoader;
 exports.GridLoader = GridLoader;
@@ -1406,4 +1699,4 @@ exports.sanitizeCSSValue = sanitizeCSSValue;
 exports.useAsyncLoader = useAsyncLoader;
 exports.useLoaderState = useLoaderState;
 exports.useMultipleLoaderStates = useMultipleLoaderStates;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.js.map