premium-react-loaders 1.3.0 → 2.0.0

package/dist/index25.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const PulseDots = forwardRef(
@@ -69,4 +69,3 @@ PulseDots.displayName = "PulseDots";
 export {
   PulseDots
 };
-//# sourceMappingURL=index25.js.map

package/dist/index26.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("./index31.cjs");
+const hooks = require("./index30.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const PulseWave = react.forwardRef(
@@ -74,4 +74,3 @@ const PulseWave = react.forwardRef(
 );
 PulseWave.displayName = "PulseWave";
 exports.PulseWave = PulseWave;
-//# sourceMappingURL=index26.cjs.map

package/dist/index26.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const PulseWave = forwardRef(
@@ -74,4 +74,3 @@ PulseWave.displayName = "PulseWave";
 export {
   PulseWave
 };
-//# sourceMappingURL=index26.js.map

package/dist/index27.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("./index31.cjs");
+const hooks = require("./index30.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const PulseBars = react.forwardRef(
@@ -77,4 +77,3 @@ const PulseBars = react.forwardRef(
 );
 PulseBars.displayName = "PulseBars";
 exports.PulseBars = PulseBars;
-//# sourceMappingURL=index27.cjs.map

package/dist/index27.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const PulseBars = forwardRef(
@@ -77,4 +77,3 @@ PulseBars.displayName = "PulseBars";
 export {
   PulseBars
 };
-//# sourceMappingURL=index27.js.map

package/dist/index28.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("./index31.cjs");
+const hooks = require("./index30.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const TypingIndicator = react.forwardRef(
@@ -73,4 +73,3 @@ const TypingIndicator = react.forwardRef(
 );
 TypingIndicator.displayName = "TypingIndicator";
 exports.TypingIndicator = TypingIndicator;
-//# sourceMappingURL=index28.cjs.map

package/dist/index28.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const TypingIndicator = forwardRef(
@@ -73,4 +73,3 @@ TypingIndicator.displayName = "TypingIndicator";
 export {
   TypingIndicator
 };
-//# sourceMappingURL=index28.js.map

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("./index31.cjs");
+const hooks = require("./index30.cjs");
 const classNames = require("./index3.cjs");
 const LoaderOverlay = react.forwardRef(
   ({
@@ -80,4 +80,3 @@ const LoaderOverlay = react.forwardRef(
 );
 LoaderOverlay.displayName = "LoaderOverlay";
 exports.LoaderOverlay = LoaderOverlay;
-//# sourceMappingURL=index29.cjs.map

package/dist/index29.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useLoaderVisibility } from "./index31.js";
+import { useLoaderVisibility } from "./index30.js";
 import { cn } from "./index3.js";
 const LoaderOverlay = forwardRef(
   ({
@@ -80,4 +80,3 @@ LoaderOverlay.displayName = "LoaderOverlay";
 export {
   LoaderOverlay
 };
-//# sourceMappingURL=index29.js.map

package/dist/index3.cjs

@@ -1,8 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("./index30.cjs");
 function cn(...inputs) {
-  return clsx.clsx(inputs);
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (Array.isArray(input)) {
+      const result = cn(...input);
+      if (result) classes.push(result);
+    }
+  }
+  return classes.join(" ");
 }
 exports.cn = cn;
-//# sourceMappingURL=index3.cjs.map

package/dist/index3.js

@@ -1,8 +1,16 @@
-import { clsx } from "./index30.js";
 function cn(...inputs) {
-  return clsx(inputs);
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (Array.isArray(input)) {
+      const result = cn(...input);
+      if (result) classes.push(result);
+    }
+  }
+  return classes.join(" ");
 }
 export {
   cn
 };
-//# sourceMappingURL=index3.js.map

package/dist/index30.cjs

@@ -1,18 +1,125 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
+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 clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
+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;
 }
-exports.clsx = clsx;
-exports.default = clsx;
-//# sourceMappingURL=index30.cjs.map
+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/index30.js

@@ -1,18 +1,125 @@
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
+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 clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
+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 {
-  clsx,
-  clsx as default
+  getEffectiveDuration,
+  useLoaderVisibility,
+  useReducedMotion
 };
-//# sourceMappingURL=index30.js.map

package/dist/index4.cjs

@@ -89,4 +89,3 @@ exports.isHexColor = isHexColor;
 exports.isRgbColor = isRgbColor;
 exports.normalizeSize = normalizeSize;
 exports.parseSizeToNumber = parseSizeToNumber;
-//# sourceMappingURL=index4.cjs.map

package/dist/index4.js

@@ -89,4 +89,3 @@ export {
   normalizeSize,
   parseSizeToNumber
 };
-//# sourceMappingURL=index4.js.map

package/dist/index5.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("./index31.cjs");
+const hooks = require("./index30.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const Skeleton = react.forwardRef(
@@ -74,4 +74,3 @@ const Skeleton = react.forwardRef(
 );
 Skeleton.displayName = "Skeleton";
 exports.Skeleton = Skeleton;
-//# sourceMappingURL=index5.cjs.map

package/dist/index5.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useLoaderVisibility } from "./index31.js";
+import { useLoaderVisibility } from "./index30.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const Skeleton = forwardRef(
@@ -74,4 +74,3 @@ Skeleton.displayName = "Skeleton";
 export {
   Skeleton
 };
-//# sourceMappingURL=index5.js.map

package/dist/index6.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index5.cjs");
-const hooks = require("./index31.cjs");
+const hooks = require("./index30.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonText = react.forwardRef(
@@ -69,4 +69,3 @@ const SkeletonText = react.forwardRef(
 );
 SkeletonText.displayName = "SkeletonText";
 exports.SkeletonText = SkeletonText;
-//# sourceMappingURL=index6.cjs.map

package/dist/index6.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
-import { useLoaderVisibility } from "./index31.js";
+import { useLoaderVisibility } from "./index30.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const SkeletonText = forwardRef(
@@ -69,4 +69,3 @@ SkeletonText.displayName = "SkeletonText";
 export {
   SkeletonText
 };
-//# sourceMappingURL=index6.js.map

package/dist/index7.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index5.cjs");
-const hooks = require("./index31.cjs");
+const hooks = require("./index30.cjs");
 const colors = require("./index4.cjs");
 const SkeletonAvatar = react.forwardRef(
   ({
@@ -54,4 +54,3 @@ const SkeletonAvatar = react.forwardRef(
 );
 SkeletonAvatar.displayName = "SkeletonAvatar";
 exports.SkeletonAvatar = SkeletonAvatar;
-//# sourceMappingURL=index7.cjs.map

package/dist/index7.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
-import { useLoaderVisibility } from "./index31.js";
+import { useLoaderVisibility } from "./index30.js";
 import { normalizeSize } from "./index4.js";
 const SkeletonAvatar = forwardRef(
   ({
@@ -54,4 +54,3 @@ SkeletonAvatar.displayName = "SkeletonAvatar";
 export {
   SkeletonAvatar
 };
-//# sourceMappingURL=index7.js.map

package/dist/index8.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index5.cjs");
-const hooks = require("./index31.cjs");
+const hooks = require("./index30.cjs");
 const SkeletonImage = react.forwardRef(
   ({
     width = "100%",
@@ -56,4 +56,3 @@ const SkeletonImage = react.forwardRef(
 );
 SkeletonImage.displayName = "SkeletonImage";
 exports.SkeletonImage = SkeletonImage;
-//# sourceMappingURL=index8.cjs.map

package/dist/index8.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
-import { useLoaderVisibility } from "./index31.js";
+import { useLoaderVisibility } from "./index30.js";
 const SkeletonImage = forwardRef(
   ({
     width = "100%",
@@ -56,4 +56,3 @@ SkeletonImage.displayName = "SkeletonImage";
 export {
   SkeletonImage
 };
-//# sourceMappingURL=index8.js.map

package/dist/index9.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index5.cjs");
 const SkeletonAvatar = require("./index7.cjs");
-const hooks = require("./index31.cjs");
+const hooks = require("./index30.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonCard = react.forwardRef(
   ({
@@ -88,4 +88,3 @@ const SkeletonCard = react.forwardRef(
 );
 SkeletonCard.displayName = "SkeletonCard";
 exports.SkeletonCard = SkeletonCard;
-//# sourceMappingURL=index9.cjs.map

package/dist/index9.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
 import { SkeletonAvatar } from "./index7.js";
-import { useLoaderVisibility } from "./index31.js";
+import { useLoaderVisibility } from "./index30.js";
 import { cn } from "./index3.js";
 const SkeletonCard = forwardRef(
   ({
@@ -88,4 +88,3 @@ SkeletonCard.displayName = "SkeletonCard";
 export {
   SkeletonCard
 };
-//# sourceMappingURL=index9.js.map