premium-react-loaders 1.2.0 → 2.0.0

package/dist/index9.cjs

@@ -4,6 +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("./index30.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonCard = react.forwardRef(
   ({
@@ -14,20 +15,33 @@ const SkeletonCard = react.forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-card",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
         className: classNames.cn("flex gap-3", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": "Loading card...",
         "aria-busy": "true",
@@ -74,4 +88,3 @@ const SkeletonCard = react.forwardRef(
 );
 SkeletonCard.displayName = "SkeletonCard";
 exports.SkeletonCard = SkeletonCard;
-//# sourceMappingURL=index9.cjs.map

package/dist/index9.js

@@ -2,6 +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 "./index30.js";
 import { cn } from "./index3.js";
 const SkeletonCard = forwardRef(
   ({
@@ -12,20 +13,33 @@ const SkeletonCard = forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-card",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
         className: cn("flex gap-3", className),
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": "Loading card...",
         "aria-busy": "true",
@@ -74,4 +88,3 @@ SkeletonCard.displayName = "SkeletonCard";
 export {
   SkeletonCard
 };
-//# sourceMappingURL=index9.js.map