premium-react-loaders 2.0.0 → 2.2.0

package/dist/index33.cjs

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index35.cjs");
+const classNames = require("./index3.cjs");
+const colors = require("./index4.cjs");
+const SuccessCheckmark = react.forwardRef(
+  ({
+    size = "md",
+    color = "#10b981",
+    strokeWidth = 3,
+    duration = 500,
+    showCircle = false,
+    circleColor,
+    fillCircle = false,
+    delay = 0,
+    minDuration = 0,
+    transition = true,
+    className,
+    style,
+    testId = "success-checkmark",
+    visible = true,
+    ariaLabel = "Success",
+    ...rest
+  }, ref) => {
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const effectiveCircleColor = circleColor || color;
+    const sizeValue = colors.normalizeSize(size);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: "animate-success-scale",
+            style: {
+              width: sizeValue,
+              height: sizeValue,
+              animationDuration: `${duration}ms`
+            },
+            viewBox: "0 0 52 52",
+            children: [
+              showCircle && /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: "animate-success-circle",
+                  cx: "26",
+                  cy: "26",
+                  r: "23",
+                  fill: fillCircle ? effectiveCircleColor : "none",
+                  stroke: effectiveCircleColor,
+                  strokeWidth,
+                  style: {
+                    animationDuration: `${duration}ms`
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: "animate-success-check",
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M14.1 27.2l7.1 7.2 16.7-16.8",
+                  style: {
+                    animationDuration: `${duration}ms`,
+                    animationDelay: showCircle ? `${duration * 0.3}ms` : "0ms"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SuccessCheckmark.displayName = "SuccessCheckmark";
+exports.SuccessCheckmark = SuccessCheckmark;

package/dist/index33.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLoaderVisibility } from "./index35.js";
+import { cn } from "./index3.js";
+import { normalizeSize } from "./index4.js";
+const SuccessCheckmark = forwardRef(
+  ({
+    size = "md",
+    color = "#10b981",
+    strokeWidth = 3,
+    duration = 500,
+    showCircle = false,
+    circleColor,
+    fillCircle = false,
+    delay = 0,
+    minDuration = 0,
+    transition = true,
+    className,
+    style,
+    testId = "success-checkmark",
+    visible = true,
+    ariaLabel = "Success",
+    ...rest
+  }, ref) => {
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const effectiveCircleColor = circleColor || color;
+    const sizeValue = normalizeSize(size);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        ...rest,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "animate-success-scale",
+            style: {
+              width: sizeValue,
+              height: sizeValue,
+              animationDuration: `${duration}ms`
+            },
+            viewBox: "0 0 52 52",
+            children: [
+              showCircle && /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "animate-success-circle",
+                  cx: "26",
+                  cy: "26",
+                  r: "23",
+                  fill: fillCircle ? effectiveCircleColor : "none",
+                  stroke: effectiveCircleColor,
+                  strokeWidth,
+                  style: {
+                    animationDuration: `${duration}ms`
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "animate-success-check",
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M14.1 27.2l7.1 7.2 16.7-16.8",
+                  style: {
+                    animationDuration: `${duration}ms`,
+                    animationDelay: showCircle ? `${duration * 0.3}ms` : "0ms"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SuccessCheckmark.displayName = "SuccessCheckmark";
+export {
+  SuccessCheckmark
+};

package/dist/index34.cjs

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index35.cjs");
+const classNames = require("./index3.cjs");
+const colors = require("./index4.cjs");
+const ErrorIndicator = react.forwardRef(
+  ({
+    size = "md",
+    color = "#ef4444",
+    strokeWidth = 3,
+    duration = 500,
+    showCircle = false,
+    circleColor,
+    fillCircle = false,
+    shake = true,
+    delay = 0,
+    minDuration = 0,
+    transition = true,
+    className,
+    style,
+    testId = "error-indicator",
+    visible = true,
+    ariaLabel = "Error",
+    ...rest
+  }, ref) => {
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const effectiveCircleColor = circleColor || color;
+    const sizeValue = colors.normalizeSize(size);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: shake ? "animate-error-shake" : "animate-error-scale",
+            style: {
+              width: sizeValue,
+              height: sizeValue,
+              animationDuration: `${duration}ms`
+            },
+            viewBox: "0 0 52 52",
+            children: [
+              showCircle && /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: "animate-error-circle",
+                  cx: "26",
+                  cy: "26",
+                  r: "23",
+                  fill: fillCircle ? effectiveCircleColor : "none",
+                  stroke: effectiveCircleColor,
+                  strokeWidth,
+                  style: {
+                    animationDuration: `${duration}ms`
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "g",
+                {
+                  className: "animate-error-x",
+                  style: {
+                    animationDuration: `${duration}ms`,
+                    animationDelay: showCircle ? `${duration * 0.3}ms` : "0ms"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        fill: "none",
+                        stroke: color,
+                        strokeWidth,
+                        strokeLinecap: "round",
+                        d: "M16 16 36 36"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        fill: "none",
+                        stroke: color,
+                        strokeWidth,
+                        strokeLinecap: "round",
+                        d: "M36 16 16 36"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ErrorIndicator.displayName = "ErrorIndicator";
+exports.ErrorIndicator = ErrorIndicator;

package/dist/index34.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLoaderVisibility } from "./index35.js";
+import { cn } from "./index3.js";
+import { normalizeSize } from "./index4.js";
+const ErrorIndicator = forwardRef(
+  ({
+    size = "md",
+    color = "#ef4444",
+    strokeWidth = 3,
+    duration = 500,
+    showCircle = false,
+    circleColor,
+    fillCircle = false,
+    shake = true,
+    delay = 0,
+    minDuration = 0,
+    transition = true,
+    className,
+    style,
+    testId = "error-indicator",
+    visible = true,
+    ariaLabel = "Error",
+    ...rest
+  }, ref) => {
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
+    const effectiveCircleColor = circleColor || color;
+    const sizeValue = normalizeSize(size);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        ...rest,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: shake ? "animate-error-shake" : "animate-error-scale",
+            style: {
+              width: sizeValue,
+              height: sizeValue,
+              animationDuration: `${duration}ms`
+            },
+            viewBox: "0 0 52 52",
+            children: [
+              showCircle && /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "animate-error-circle",
+                  cx: "26",
+                  cy: "26",
+                  r: "23",
+                  fill: fillCircle ? effectiveCircleColor : "none",
+                  stroke: effectiveCircleColor,
+                  strokeWidth,
+                  style: {
+                    animationDuration: `${duration}ms`
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "g",
+                {
+                  className: "animate-error-x",
+                  style: {
+                    animationDuration: `${duration}ms`,
+                    animationDelay: showCircle ? `${duration * 0.3}ms` : "0ms"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        fill: "none",
+                        stroke: color,
+                        strokeWidth,
+                        strokeLinecap: "round",
+                        d: "M16 16 36 36"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        fill: "none",
+                        stroke: color,
+                        strokeWidth,
+                        strokeLinecap: "round",
+                        d: "M36 16 16 36"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ErrorIndicator.displayName = "ErrorIndicator";
+export {
+  ErrorIndicator
+};

package/dist/index35.cjs

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function useReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
+  react.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    } else {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, []);
+  return prefersReducedMotion;
+}
+function getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion) {
+  if (respectMotionPreference && prefersReducedMotion) {
+    return "0.01ms";
+  }
+  if (typeof speed === "number") {
+    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(1e4, speed)) : 1e3;
+    return `${validSpeed}ms`;
+  }
+  const speedMap = {
+    slow: "2s",
+    normal: "1s",
+    fast: "0.5s"
+  };
+  return speedMap[speed] || speedMap.normal;
+}
+function useLoaderVisibility(visible = true, delay = 0, minDuration = 0, transition) {
+  const transitionDuration = transition === true ? 150 : typeof transition === "number" ? transition : 0;
+  const hasTransition = transitionDuration > 0;
+  const [shouldRender, setShouldRender] = react.useState(visible && delay === 0);
+  const [isTransitioning, setIsTransitioning] = react.useState(visible && delay === 0 && hasTransition);
+  const showTimeRef = react.useRef(visible && delay === 0 ? Date.now() : null);
+  const delayTimerRef = react.useRef(null);
+  const minDurationTimerRef = react.useRef(null);
+  const transitionTimerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (delayTimerRef.current) {
+      clearTimeout(delayTimerRef.current);
+      delayTimerRef.current = null;
+    }
+    if (minDurationTimerRef.current) {
+      clearTimeout(minDurationTimerRef.current);
+      minDurationTimerRef.current = null;
+    }
+    if (transitionTimerRef.current) {
+      clearTimeout(transitionTimerRef.current);
+      transitionTimerRef.current = null;
+    }
+    if (visible) {
+      if (delay > 0) {
+        delayTimerRef.current = setTimeout(() => {
+          setShouldRender(true);
+          showTimeRef.current = Date.now();
+          if (hasTransition) {
+            setIsTransitioning(true);
+          }
+        }, delay);
+      } else {
+        setShouldRender(true);
+        showTimeRef.current = Date.now();
+        if (hasTransition) {
+          setIsTransitioning(true);
+        }
+      }
+    } else {
+      const hideLoader = () => {
+        if (hasTransition) {
+          setIsTransitioning(false);
+          transitionTimerRef.current = setTimeout(() => {
+            setShouldRender(false);
+            showTimeRef.current = null;
+          }, transitionDuration);
+        } else {
+          setShouldRender(false);
+          showTimeRef.current = null;
+        }
+      };
+      if (showTimeRef.current !== null && minDuration > 0) {
+        const elapsedTime = Date.now() - showTimeRef.current;
+        const remainingTime = minDuration - elapsedTime;
+        if (remainingTime > 0) {
+          minDurationTimerRef.current = setTimeout(hideLoader, remainingTime);
+        } else {
+          hideLoader();
+        }
+      } else {
+        hideLoader();
+      }
+    }
+    return () => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+      }
+      if (minDurationTimerRef.current) {
+        clearTimeout(minDurationTimerRef.current);
+      }
+      if (transitionTimerRef.current) {
+        clearTimeout(transitionTimerRef.current);
+      }
+    };
+  }, [visible, delay, minDuration, hasTransition, transitionDuration]);
+  const opacity = hasTransition ? isTransitioning ? 1 : 0 : 1;
+  const transitionStyle = hasTransition ? `opacity ${transitionDuration}ms ease-in-out` : "none";
+  return {
+    shouldRender,
+    opacity,
+    transitionStyle
+  };
+}
+exports.getEffectiveDuration = getEffectiveDuration;
+exports.useLoaderVisibility = useLoaderVisibility;
+exports.useReducedMotion = useReducedMotion;

package/dist/index35.js

@@ -0,0 +1,125 @@
+import { useState, useRef, useEffect } from "react";
+function useReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    } else {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, []);
+  return prefersReducedMotion;
+}
+function getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion) {
+  if (respectMotionPreference && prefersReducedMotion) {
+    return "0.01ms";
+  }
+  if (typeof speed === "number") {
+    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(1e4, speed)) : 1e3;
+    return `${validSpeed}ms`;
+  }
+  const speedMap = {
+    slow: "2s",
+    normal: "1s",
+    fast: "0.5s"
+  };
+  return speedMap[speed] || speedMap.normal;
+}
+function useLoaderVisibility(visible = true, delay = 0, minDuration = 0, transition) {
+  const transitionDuration = transition === true ? 150 : typeof transition === "number" ? transition : 0;
+  const hasTransition = transitionDuration > 0;
+  const [shouldRender, setShouldRender] = useState(visible && delay === 0);
+  const [isTransitioning, setIsTransitioning] = useState(visible && delay === 0 && hasTransition);
+  const showTimeRef = useRef(visible && delay === 0 ? Date.now() : null);
+  const delayTimerRef = useRef(null);
+  const minDurationTimerRef = useRef(null);
+  const transitionTimerRef = useRef(null);
+  useEffect(() => {
+    if (delayTimerRef.current) {
+      clearTimeout(delayTimerRef.current);
+      delayTimerRef.current = null;
+    }
+    if (minDurationTimerRef.current) {
+      clearTimeout(minDurationTimerRef.current);
+      minDurationTimerRef.current = null;
+    }
+    if (transitionTimerRef.current) {
+      clearTimeout(transitionTimerRef.current);
+      transitionTimerRef.current = null;
+    }
+    if (visible) {
+      if (delay > 0) {
+        delayTimerRef.current = setTimeout(() => {
+          setShouldRender(true);
+          showTimeRef.current = Date.now();
+          if (hasTransition) {
+            setIsTransitioning(true);
+          }
+        }, delay);
+      } else {
+        setShouldRender(true);
+        showTimeRef.current = Date.now();
+        if (hasTransition) {
+          setIsTransitioning(true);
+        }
+      }
+    } else {
+      const hideLoader = () => {
+        if (hasTransition) {
+          setIsTransitioning(false);
+          transitionTimerRef.current = setTimeout(() => {
+            setShouldRender(false);
+            showTimeRef.current = null;
+          }, transitionDuration);
+        } else {
+          setShouldRender(false);
+          showTimeRef.current = null;
+        }
+      };
+      if (showTimeRef.current !== null && minDuration > 0) {
+        const elapsedTime = Date.now() - showTimeRef.current;
+        const remainingTime = minDuration - elapsedTime;
+        if (remainingTime > 0) {
+          minDurationTimerRef.current = setTimeout(hideLoader, remainingTime);
+        } else {
+          hideLoader();
+        }
+      } else {
+        hideLoader();
+      }
+    }
+    return () => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+      }
+      if (minDurationTimerRef.current) {
+        clearTimeout(minDurationTimerRef.current);
+      }
+      if (transitionTimerRef.current) {
+        clearTimeout(transitionTimerRef.current);
+      }
+    };
+  }, [visible, delay, minDuration, hasTransition, transitionDuration]);
+  const opacity = hasTransition ? isTransitioning ? 1 : 0 : 1;
+  const transitionStyle = hasTransition ? `opacity ${transitionDuration}ms ease-in-out` : "none";
+  return {
+    shouldRender,
+    opacity,
+    transitionStyle
+  };
+}
+export {
+  getEffectiveDuration,
+  useLoaderVisibility,
+  useReducedMotion
+};