premium-react-loaders 1.2.0 → 2.0.0

package/dist/index13.cjs

@@ -3,6 +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("./index30.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonForm = react.forwardRef(
@@ -16,13 +17,22 @@ const SkeletonForm = react.forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-form",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const gapValue = colors.normalizeSize(gap);
     const buttonAlign = buttonPosition === "left" ? "justify-start" : buttonPosition === "right" ? "justify-end" : "justify-center";
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -31,7 +41,7 @@ const SkeletonForm = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("w-full", className),
-        style: { ...style, display: "flex", flexDirection: "column", gap: gapValue },
+        style: { ...style, display: "flex", flexDirection: "column", gap: gapValue, opacity, transition: transitionStyle },
         role: "status",
         "aria-label": "Loading form...",
         "aria-busy": "true",
@@ -79,4 +89,3 @@ const SkeletonForm = react.forwardRef(
 );
 SkeletonForm.displayName = "SkeletonForm";
 exports.SkeletonForm = SkeletonForm;
-//# sourceMappingURL=index13.cjs.map

package/dist/index13.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
+import { useLoaderVisibility } from "./index30.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const SkeletonForm = forwardRef(
@@ -14,13 +15,22 @@ const SkeletonForm = forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-form",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const gapValue = normalizeSize(gap);
     const buttonAlign = buttonPosition === "left" ? "justify-start" : buttonPosition === "right" ? "justify-end" : "justify-center";
     return /* @__PURE__ */ jsxs(
@@ -29,7 +39,7 @@ const SkeletonForm = forwardRef(
         ref,
         "data-testid": testId,
         className: cn("w-full", className),
-        style: { ...style, display: "flex", flexDirection: "column", gap: gapValue },
+        style: { ...style, display: "flex", flexDirection: "column", gap: gapValue, opacity, transition: transitionStyle },
         role: "status",
         "aria-label": "Loading form...",
         "aria-busy": "true",
@@ -79,4 +89,3 @@ SkeletonForm.displayName = "SkeletonForm";
 export {
   SkeletonForm
 };
-//# sourceMappingURL=index13.js.map

package/dist/index14.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 colors = require("./index4.cjs");
 const SpinnerCircle = react.forwardRef(
@@ -13,6 +13,9 @@ const SpinnerCircle = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-circle",
@@ -20,16 +23,26 @@ const SpinnerCircle = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
         className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -66,4 +79,3 @@ const SpinnerCircle = react.forwardRef(
 );
 SpinnerCircle.displayName = "SpinnerCircle";
 exports.SpinnerCircle = SpinnerCircle;
-//# sourceMappingURL=index14.cjs.map

package/dist/index14.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SpinnerCircle = forwardRef(
@@ -11,6 +11,9 @@ const SpinnerCircle = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-circle",
@@ -18,16 +21,26 @@ const SpinnerCircle = forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
         className: cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -66,4 +79,3 @@ SpinnerCircle.displayName = "SpinnerCircle";
 export {
   SpinnerCircle
 };
-//# sourceMappingURL=index14.js.map

package/dist/index15.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 colors = require("./index4.cjs");
 const SpinnerRing = react.forwardRef(
@@ -14,6 +14,9 @@ const SpinnerRing = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-ring",
@@ -21,16 +24,26 @@ const SpinnerRing = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
         className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -55,4 +68,3 @@ const SpinnerRing = react.forwardRef(
 );
 SpinnerRing.displayName = "SpinnerRing";
 exports.SpinnerRing = SpinnerRing;
-//# sourceMappingURL=index15.cjs.map

package/dist/index15.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
 const SpinnerRing = forwardRef(
@@ -12,6 +12,9 @@ const SpinnerRing = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-ring",
@@ -19,16 +22,26 @@ const SpinnerRing = forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
         className: cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -55,4 +68,3 @@ SpinnerRing.displayName = "SpinnerRing";
 export {
   SpinnerRing
 };
-//# sourceMappingURL=index15.js.map

package/dist/index16.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const colors = require("./index4.cjs");
-const hooks = require("./index31.cjs");
+const hooks = require("./index30.cjs");
 const classNames = require("./index3.cjs");
 const SpinnerDots = react.forwardRef(
   ({
@@ -14,6 +14,9 @@ const SpinnerDots = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-dots",
@@ -21,9 +24,15 @@ const SpinnerDots = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = colors.parseSizeToNumber(size, 40);
     const dotSizeValue = colors.parseSizeToNumber(dotSize, 4);
     const radius = (sizeValue - dotSizeValue) / 2;
@@ -33,7 +42,11 @@ const SpinnerDots = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -78,4 +91,3 @@ const SpinnerDots = react.forwardRef(
 );
 SpinnerDots.displayName = "SpinnerDots";
 exports.SpinnerDots = SpinnerDots;
-//# sourceMappingURL=index16.cjs.map

package/dist/index16.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { cn } from "./index3.js";
 const SpinnerDots = forwardRef(
   ({
@@ -12,6 +12,9 @@ const SpinnerDots = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-dots",
@@ -19,9 +22,15 @@ const SpinnerDots = forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = parseSizeToNumber(size, 40);
     const dotSizeValue = parseSizeToNumber(dotSize, 4);
     const radius = (sizeValue - dotSizeValue) / 2;
@@ -31,7 +40,11 @@ const SpinnerDots = forwardRef(
         ref,
         "data-testid": testId,
         className: cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -78,4 +91,3 @@ SpinnerDots.displayName = "SpinnerDots";
 export {
   SpinnerDots
 };
-//# sourceMappingURL=index16.js.map

package/dist/index17.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 SpinnerBars = react.forwardRef(
@@ -13,6 +13,9 @@ const SpinnerBars = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-bars",
@@ -20,9 +23,15 @@ const SpinnerBars = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = colors.parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2));
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -33,7 +42,9 @@ const SpinnerBars = react.forwardRef(
         className: classNames.cn("inline-flex items-center justify-center gap-1", className),
         style: {
           height: colors.normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -59,4 +70,3 @@ const SpinnerBars = react.forwardRef(
 );
 SpinnerBars.displayName = "SpinnerBars";
 exports.SpinnerBars = SpinnerBars;
-//# sourceMappingURL=index17.cjs.map

package/dist/index17.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 import { cn } from "./index3.js";
 const SpinnerBars = forwardRef(
@@ -11,6 +11,9 @@ const SpinnerBars = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-bars",
@@ -18,9 +21,15 @@ const SpinnerBars = forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = parseSizeToNumber(size, 40);
     const barWidth = Math.floor(sizeValue / (barCount * 2));
     return /* @__PURE__ */ jsx(
@@ -31,7 +40,9 @@ const SpinnerBars = forwardRef(
         className: cn("inline-flex items-center justify-center gap-1", className),
         style: {
           height: normalizeSize(size),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -59,4 +70,3 @@ SpinnerBars.displayName = "SpinnerBars";
 export {
   SpinnerBars
 };
-//# sourceMappingURL=index17.js.map

package/dist/index18.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 colors = require("./index4.cjs");
 const SpinnerGrid = react.forwardRef(
@@ -13,6 +13,9 @@ const SpinnerGrid = react.forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-grid",
@@ -20,9 +23,15 @@ const SpinnerGrid = react.forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = colors.parseSizeToNumber(size, 40);
     const cellSize = Math.floor(sizeValue / gridSize) - 2;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -31,7 +40,11 @@ const SpinnerGrid = react.forwardRef(
         ref,
         "data-testid": testId,
         className: classNames.cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -49,7 +62,7 @@ const SpinnerGrid = react.forwardRef(
               const row = Math.floor(index / gridSize);
               const col = index % gridSize;
               const maxDelay = (gridSize - 1) * 2;
-              const delay = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;
+              const delay2 = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -59,7 +72,7 @@ const SpinnerGrid = react.forwardRef(
                     height: `${cellSize}px`,
                     backgroundColor: color,
                     animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,
-                    animationDelay: `${delay}s`
+                    animationDelay: `${delay2}s`
                   }
                 },
                 index
@@ -73,4 +86,3 @@ const SpinnerGrid = react.forwardRef(
 );
 SpinnerGrid.displayName = "SpinnerGrid";
 exports.SpinnerGrid = SpinnerGrid;
-//# sourceMappingURL=index18.cjs.map

package/dist/index18.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, getEffectiveDuration } from "./index31.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index30.js";
 import { cn } from "./index3.js";
 import { normalizeSize, parseSizeToNumber } from "./index4.js";
 const SpinnerGrid = forwardRef(
@@ -11,6 +11,9 @@ const SpinnerGrid = forwardRef(
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "spinner-grid",
@@ -18,9 +21,15 @@ const SpinnerGrid = forwardRef(
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    if (!visible) return null;
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = parseSizeToNumber(size, 40);
     const cellSize = Math.floor(sizeValue / gridSize) - 2;
     return /* @__PURE__ */ jsx(
@@ -29,7 +38,11 @@ const SpinnerGrid = forwardRef(
         ref,
         "data-testid": testId,
         className: cn("inline-flex items-center justify-center", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
@@ -47,7 +60,7 @@ const SpinnerGrid = forwardRef(
               const row = Math.floor(index / gridSize);
               const col = index % gridSize;
               const maxDelay = (gridSize - 1) * 2;
-              const delay = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;
+              const delay2 = reverse ? (maxDelay - (row + col)) * 0.1 : (row + col) * 0.1;
               return /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -57,7 +70,7 @@ const SpinnerGrid = forwardRef(
                     height: `${cellSize}px`,
                     backgroundColor: color,
                     animation: `fade-pulse ${effectiveDuration} ease-in-out infinite`,
-                    animationDelay: `${delay}s`
+                    animationDelay: `${delay2}s`
                   }
                 },
                 index
@@ -73,4 +86,3 @@ SpinnerGrid.displayName = "SpinnerGrid";
 export {
   SpinnerGrid
 };
-//# sourceMappingURL=index18.js.map