premium-react-loaders 3.1.1 → 4.1.0

package/dist/index29.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const PulseDots = react.forwardRef(

package/dist/index29.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const PulseDots = forwardRef(

package/dist/index30.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const PulseWave = react.forwardRef(

package/dist/index30.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const PulseWave = forwardRef(

package/dist/index31.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const PulseBars = react.forwardRef(

package/dist/index31.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const PulseBars = forwardRef(

package/dist/index32.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const TypingIndicator = react.forwardRef(

package/dist/index32.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const TypingIndicator = forwardRef(

package/dist/index33.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const LoaderOverlay = react.forwardRef(
   ({

package/dist/index33.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 import { cn } from "./index3.js";
 const LoaderOverlay = forwardRef(
   ({

package/dist/index34.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const ButtonSpinner = react.forwardRef(

package/dist/index34.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const ButtonSpinner = forwardRef(

package/dist/index35.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const SuccessCheckmark = react.forwardRef(

package/dist/index35.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SuccessCheckmark = forwardRef(

package/dist/index36.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index56.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
 const ErrorIndicator = react.forwardRef(

package/dist/index36.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useLoaderVisibility } from "./index56.js";
+import { useLoaderVisibility } from "./index71.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const ErrorIndicator = forwardRef(

package/dist/index37.cjs

@@ -2,166 +2,80 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
-const LoaderTransition = react.forwardRef(
+const WarningIndicator = react.forwardRef(
   ({
-    loading,
-    loadingContent,
-    children,
-    transitionType = "fade",
-    duration = 300,
-    timing = "ease-out",
-    keepMounted = false,
-    exitDelay = 0,
-    appearOnMount = false,
+    size = 48,
+    color = "#f59e0b",
+    animate = true,
+    shake = false,
+    duration = 500,
+    delay = 0,
+    minDuration = 0,
+    transition = true,
     className,
     style,
-    testId = "loader-transition",
-    ariaLabel,
+    testId = "warning-indicator",
     visible = true,
-    delay = 0,
-    minDuration = 0,
-    transition: transitionProp,
+    ariaLabel = "Warning",
     ...rest
   }, ref) => {
-    const [isTransitioning, setIsTransitioning] = react.useState(false);
-    const [showLoading, setShowLoading] = react.useState(appearOnMount ? loading : false);
-    const [showContent, setShowContent] = react.useState(!appearOnMount && !loading);
-    const timeoutRef = react.useRef(null);
-    const entryTimeRef = react.useRef(null);
-    react.useEffect(() => {
-      if (!visible) {
-        setShowLoading(false);
-        setShowContent(false);
-        return;
-      }
-      if (loading) {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-        if (delay > 0) {
-          timeoutRef.current = setTimeout(() => {
-            setShowLoading(true);
-            setShowContent(false);
-            entryTimeRef.current = Date.now();
-          }, delay);
-        } else {
-          setShowLoading(true);
-          setShowContent(false);
-          entryTimeRef.current = Date.now();
-        }
-      } else {
-        const elapsed = entryTimeRef.current ? Date.now() - entryTimeRef.current : 0;
-        const remainingMinDuration = Math.max(0, minDuration - elapsed);
-        const totalDelay = exitDelay + remainingMinDuration;
-        if (totalDelay > 0) {
-          timeoutRef.current = setTimeout(() => {
-            setIsTransitioning(true);
-            timeoutRef.current = setTimeout(() => {
-              setShowLoading(false);
-              setShowContent(true);
-              setIsTransitioning(false);
-            }, duration);
-          }, totalDelay);
-        } else {
-          setIsTransitioning(true);
-          timeoutRef.current = setTimeout(() => {
-            setShowLoading(false);
-            setShowContent(true);
-            setIsTransitioning(false);
-          }, duration);
-        }
-      }
-      return () => {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-      };
-    }, [loading, visible, delay, minDuration, exitDelay, duration]);
-    const getTransitionClasses = (isLoading, isTransition) => {
-      const baseClasses = "loader-transition";
-      const timingClass = `loader-transition-${timing}`;
-      if (transitionType === "none") {
-        return baseClasses;
-      }
-      if (transitionType === "fade") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-fade-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-fade-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-fade-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      if (transitionType === "slide-up") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-up-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-up-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-up-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      if (transitionType === "slide-down") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-down-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-down-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-down-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      if (transitionType === "slide-left") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-left-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-left-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-left-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      if (transitionType === "slide-right") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-right-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-right-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-right-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      if (transitionType === "scale") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-scale-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-scale-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-scale-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      return baseClasses;
-    };
-    const shouldShowLoading = showLoading || keepMounted && loading;
-    const shouldShowContent = showContent || keepMounted && !loading;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const animClass = !animate ? "" : shake ? "animate-warning-shake" : "animate-warning-scale";
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("relative", className),
-        style,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: { opacity, transition: transitionStyle, ...style },
         role: "status",
         "aria-label": ariaLabel,
-        "aria-busy": loading,
         ...rest,
-        children: [
-          shouldShowLoading && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: getTransitionClasses(true, isTransitioning),
-              style: {
-                transitionDuration: `${duration}ms`,
-                display: showLoading ? "block" : "none"
-              },
-              children: loadingContent
-            }
-          ),
-          shouldShowContent && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: getTransitionClasses(false, isTransitioning),
-              style: {
-                transitionDuration: `${duration}ms`,
-                display: showContent ? "block" : "none"
-              },
-              children
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: animClass,
+            style: { width: size, height: size, animationDuration: `${duration}ms` },
+            viewBox: "0 0 52 52",
+            fill: "none",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M26 4 L49 46 L3 46 Z",
+                  fill: color,
+                  stroke: color,
+                  strokeWidth: 1,
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "line",
+                {
+                  x1: "26",
+                  y1: "19",
+                  x2: "26",
+                  y2: "33",
+                  stroke: "white",
+                  strokeWidth: 3.5,
+                  strokeLinecap: "round"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "26", cy: "39", r: "2", fill: "white" })
+            ]
+          }
+        )
       }
     );
   }
 );
-LoaderTransition.displayName = "LoaderTransition";
-exports.LoaderTransition = LoaderTransition;
+WarningIndicator.displayName = "WarningIndicator";
+exports.WarningIndicator = WarningIndicator;

package/dist/index37.js

@@ -1,167 +1,81 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLoaderVisibility } from "./index71.js";
 import { cn } from "./index3.js";
-const LoaderTransition = forwardRef(
+const WarningIndicator = forwardRef(
   ({
-    loading,
-    loadingContent,
-    children,
-    transitionType = "fade",
-    duration = 300,
-    timing = "ease-out",
-    keepMounted = false,
-    exitDelay = 0,
-    appearOnMount = false,
+    size = 48,
+    color = "#f59e0b",
+    animate = true,
+    shake = false,
+    duration = 500,
+    delay = 0,
+    minDuration = 0,
+    transition = true,
     className,
     style,
-    testId = "loader-transition",
-    ariaLabel,
+    testId = "warning-indicator",
     visible = true,
-    delay = 0,
-    minDuration = 0,
-    transition: transitionProp,
+    ariaLabel = "Warning",
     ...rest
   }, ref) => {
-    const [isTransitioning, setIsTransitioning] = useState(false);
-    const [showLoading, setShowLoading] = useState(appearOnMount ? loading : false);
-    const [showContent, setShowContent] = useState(!appearOnMount && !loading);
-    const timeoutRef = useRef(null);
-    const entryTimeRef = useRef(null);
-    useEffect(() => {
-      if (!visible) {
-        setShowLoading(false);
-        setShowContent(false);
-        return;
-      }
-      if (loading) {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-        if (delay > 0) {
-          timeoutRef.current = setTimeout(() => {
-            setShowLoading(true);
-            setShowContent(false);
-            entryTimeRef.current = Date.now();
-          }, delay);
-        } else {
-          setShowLoading(true);
-          setShowContent(false);
-          entryTimeRef.current = Date.now();
-        }
-      } else {
-        const elapsed = entryTimeRef.current ? Date.now() - entryTimeRef.current : 0;
-        const remainingMinDuration = Math.max(0, minDuration - elapsed);
-        const totalDelay = exitDelay + remainingMinDuration;
-        if (totalDelay > 0) {
-          timeoutRef.current = setTimeout(() => {
-            setIsTransitioning(true);
-            timeoutRef.current = setTimeout(() => {
-              setShowLoading(false);
-              setShowContent(true);
-              setIsTransitioning(false);
-            }, duration);
-          }, totalDelay);
-        } else {
-          setIsTransitioning(true);
-          timeoutRef.current = setTimeout(() => {
-            setShowLoading(false);
-            setShowContent(true);
-            setIsTransitioning(false);
-          }, duration);
-        }
-      }
-      return () => {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-      };
-    }, [loading, visible, delay, minDuration, exitDelay, duration]);
-    const getTransitionClasses = (isLoading, isTransition) => {
-      const baseClasses = "loader-transition";
-      const timingClass = `loader-transition-${timing}`;
-      if (transitionType === "none") {
-        return baseClasses;
-      }
-      if (transitionType === "fade") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-fade-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-fade-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-fade-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      if (transitionType === "slide-up") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-up-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-up-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-up-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      if (transitionType === "slide-down") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-down-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-down-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-down-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      if (transitionType === "slide-left") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-left-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-left-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-left-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      if (transitionType === "slide-right") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-right-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-right-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-slide-right-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      if (transitionType === "scale") {
-        if (isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-scale-enter-active`;
-        if (!isLoading && isTransition) return `${baseClasses} ${timingClass} loader-transition-scale-exit-active`;
-        if (!isLoading && !isTransition) return `${baseClasses} ${timingClass} loader-transition-scale-enter-active`;
-        return `${baseClasses} ${timingClass}`;
-      }
-      return baseClasses;
-    };
-    const shouldShowLoading = showLoading || keepMounted && loading;
-    const shouldShowContent = showContent || keepMounted && !loading;
-    return /* @__PURE__ */ jsxs(
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const animClass = !animate ? "" : shake ? "animate-warning-shake" : "animate-warning-scale";
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("relative", className),
-        style,
+        className: cn("inline-flex items-center justify-center", className),
+        style: { opacity, transition: transitionStyle, ...style },
         role: "status",
         "aria-label": ariaLabel,
-        "aria-busy": loading,
         ...rest,
-        children: [
-          shouldShowLoading && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: getTransitionClasses(true, isTransitioning),
-              style: {
-                transitionDuration: `${duration}ms`,
-                display: showLoading ? "block" : "none"
-              },
-              children: loadingContent
-            }
-          ),
-          shouldShowContent && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: getTransitionClasses(false, isTransitioning),
-              style: {
-                transitionDuration: `${duration}ms`,
-                display: showContent ? "block" : "none"
-              },
-              children
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: animClass,
+            style: { width: size, height: size, animationDuration: `${duration}ms` },
+            viewBox: "0 0 52 52",
+            fill: "none",
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M26 4 L49 46 L3 46 Z",
+                  fill: color,
+                  stroke: color,
+                  strokeWidth: 1,
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "line",
+                {
+                  x1: "26",
+                  y1: "19",
+                  x2: "26",
+                  y2: "33",
+                  stroke: "white",
+                  strokeWidth: 3.5,
+                  strokeLinecap: "round"
+                }
+              ),
+              /* @__PURE__ */ jsx("circle", { cx: "26", cy: "39", r: "2", fill: "white" })
+            ]
+          }
+        )
       }
     );
   }
 );
-LoaderTransition.displayName = "LoaderTransition";
+WarningIndicator.displayName = "WarningIndicator";
 export {
-  LoaderTransition
+  WarningIndicator
 };