premium-react-loaders 1.2.0 → 1.3.0

package/dist/index7.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("./index31.cjs");
 const colors = require("./index4.cjs");
 const SkeletonAvatar = react.forwardRef(
   ({
@@ -11,13 +12,22 @@ const SkeletonAvatar = react.forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-avatar",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = colors.normalizeSize(size);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Skeleton,
@@ -31,7 +41,11 @@ const SkeletonAvatar = react.forwardRef(
         baseColor,
         highlightColor,
         className,
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         "aria-label": "Loading avatar...",
         ...rest
       }

package/dist/index7.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index7.cjs","sources":["../src/components/skeleton/SkeletonAvatar.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonAvatarProps } from '../../types';\nimport { normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonAvatar - Avatar skeleton loader\n *\n * A skeleton loader for avatar placeholders with circle or square shapes.\n *\n * @example\n * ```tsx\n * <SkeletonAvatar size={40} />\n * <SkeletonAvatar size={64} shape=\"square\" />\n * ```\n */\nexport const SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  (\n    {\n      size = 40,\n      shape = 'circle',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-avatar',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={sizeValue}\n        height={sizeValue}\n        variant={shape === 'circle' ? 'circular' : 'rounded'}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={style}\n        aria-label=\"Loading avatar...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n"],"names":["forwardRef","normalizeSize","jsx","Skeleton"],"mappings":";;;;;;AAgBO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAYC,OAAAA,cAAc,IAAI;AAEpC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS,UAAU,WAAW,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,eAAe,cAAc;;"}
+{"version":3,"file":"index7.cjs","sources":["../src/components/skeleton/SkeletonAvatar.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonAvatarProps } from '../../types';\nimport { normalizeSize, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonAvatar - Avatar skeleton loader\n *\n * A skeleton loader for avatar placeholders with circle or square shapes.\n *\n * @example\n * ```tsx\n * <SkeletonAvatar size={40} />\n * <SkeletonAvatar size={64} shape=\"square\" />\n * ```\n */\nexport const SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  (\n    {\n      size = 40,\n      shape = 'circle',\n      animate = true,\n      baseColor,\n      highlightColor,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-avatar',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={sizeValue}\n        height={sizeValue}\n        variant={shape === 'circle' ? 'circular' : 'rounded'}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={{\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        aria-label=\"Loading avatar...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n"],"names":["forwardRef","useLoaderVisibility","normalizeSize","jsx","Skeleton"],"mappings":";;;;;;;AAgBO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAYC,OAAAA,cAAc,IAAI;AAEpC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS,UAAU,WAAW,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,eAAe,cAAc;;"}

package/dist/index7.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
+import { useLoaderVisibility } from "./index31.js";
 import { normalizeSize } from "./index4.js";
 const SkeletonAvatar = forwardRef(
   ({
@@ -9,13 +10,22 @@ const SkeletonAvatar = forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-avatar",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const sizeValue = normalizeSize(size);
     return /* @__PURE__ */ jsx(
       Skeleton,
@@ -29,7 +39,11 @@ const SkeletonAvatar = forwardRef(
         baseColor,
         highlightColor,
         className,
-        style,
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         "aria-label": "Loading avatar...",
         ...rest
       }

package/dist/index7.js.map

@@ -1 +1 @@
-{"version":3,"file":"index7.js","sources":["../src/components/skeleton/SkeletonAvatar.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonAvatarProps } from '../../types';\nimport { normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonAvatar - Avatar skeleton loader\n *\n * A skeleton loader for avatar placeholders with circle or square shapes.\n *\n * @example\n * ```tsx\n * <SkeletonAvatar size={40} />\n * <SkeletonAvatar size={64} shape=\"square\" />\n * ```\n */\nexport const SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  (\n    {\n      size = 40,\n      shape = 'circle',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-avatar',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={sizeValue}\n        height={sizeValue}\n        variant={shape === 'circle' ? 'circular' : 'rounded'}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={style}\n        aria-label=\"Loading avatar...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,cAAc,IAAI;AAEpC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS,UAAU,WAAW,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,eAAe,cAAc;"}
+{"version":3,"file":"index7.js","sources":["../src/components/skeleton/SkeletonAvatar.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonAvatarProps } from '../../types';\nimport { normalizeSize, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonAvatar - Avatar skeleton loader\n *\n * A skeleton loader for avatar placeholders with circle or square shapes.\n *\n * @example\n * ```tsx\n * <SkeletonAvatar size={40} />\n * <SkeletonAvatar size={64} shape=\"square\" />\n * ```\n */\nexport const SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  (\n    {\n      size = 40,\n      shape = 'circle',\n      animate = true,\n      baseColor,\n      highlightColor,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-avatar',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    const sizeValue = normalizeSize(size);\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={sizeValue}\n        height={sizeValue}\n        variant={shape === 'circle' ? 'circular' : 'rounded'}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={{\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        aria-label=\"Loading avatar...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,UAAM,YAAY,cAAc,IAAI;AAEpC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS,UAAU,WAAW,aAAa;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,eAAe,cAAc;"}

package/dist/index8.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("./index31.cjs");
 const SkeletonImage = react.forwardRef(
   ({
     width = "100%",
@@ -12,13 +13,22 @@ const SkeletonImage = react.forwardRef(
     baseColor,
     highlightColor,
     borderRadius = "0.5rem",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-image",
     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.jsx(
       Skeleton.Skeleton,
       {
@@ -34,7 +44,9 @@ const SkeletonImage = react.forwardRef(
         className,
         style: {
           aspectRatio: aspectRatio || void 0,
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         "aria-label": "Loading image...",
         ...rest

package/dist/index8.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index8.cjs","sources":["../src/components/skeleton/SkeletonImage.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonImageProps } from '../../types';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonImage - Image skeleton loader\n *\n * A skeleton loader for image placeholders with optional aspect ratio.\n *\n * @example\n * ```tsx\n * <SkeletonImage width={300} height={200} />\n * <SkeletonImage aspectRatio=\"16/9\" width=\"100%\" />\n * ```\n */\nexport const SkeletonImage = forwardRef<HTMLDivElement, SkeletonImageProps>(\n  (\n    {\n      width = '100%',\n      height = '200px',\n      aspectRatio,\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      className,\n      style,\n      testId = 'skeleton-image',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={width}\n        height={aspectRatio ? 'auto' : height}\n        variant=\"rounded\"\n        borderRadius={borderRadius}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={{\n          aspectRatio: aspectRatio || undefined,\n          ...style,\n        }}\n        aria-label=\"Loading image...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonImage.displayName = 'SkeletonImage';\n"],"names":["forwardRef","jsx","Skeleton"],"mappings":";;;;;AAeO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,QAAQ,cAAc,SAAS;AAAA,QAC/B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,aAAa,eAAe;AAAA,UAC5B,GAAG;AAAA,QAAA;AAAA,QAEL,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;;"}
+{"version":3,"file":"index8.cjs","sources":["../src/components/skeleton/SkeletonImage.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonImageProps } from '../../types';\nimport { useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonImage - Image skeleton loader\n *\n * A skeleton loader for image placeholders with optional aspect ratio.\n *\n * @example\n * ```tsx\n * <SkeletonImage width={300} height={200} />\n * <SkeletonImage aspectRatio=\"16/9\" width=\"100%\" />\n * ```\n */\nexport const SkeletonImage = forwardRef<HTMLDivElement, SkeletonImageProps>(\n  (\n    {\n      width = '100%',\n      height = '200px',\n      aspectRatio,\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-image',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={width}\n        height={aspectRatio ? 'auto' : height}\n        variant=\"rounded\"\n        borderRadius={borderRadius}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={{\n          aspectRatio: aspectRatio || undefined,\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        aria-label=\"Loading image...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonImage.displayName = 'SkeletonImage';\n"],"names":["forwardRef","useLoaderVisibility","jsx","Skeleton"],"mappings":";;;;;;AAgBO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,QAAQ,cAAc,SAAS;AAAA,QAC/B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,aAAa,eAAe;AAAA,UAC5B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;;"}

package/dist/index8.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index5.js";
+import { useLoaderVisibility } from "./index31.js";
 const SkeletonImage = forwardRef(
   ({
     width = "100%",
@@ -10,13 +11,22 @@ const SkeletonImage = forwardRef(
     baseColor,
     highlightColor,
     borderRadius = "0.5rem",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-image",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsx(
       Skeleton,
       {
@@ -32,7 +42,9 @@ const SkeletonImage = forwardRef(
         className,
         style: {
           aspectRatio: aspectRatio || void 0,
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         "aria-label": "Loading image...",
         ...rest

package/dist/index8.js.map

@@ -1 +1 @@
-{"version":3,"file":"index8.js","sources":["../src/components/skeleton/SkeletonImage.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonImageProps } from '../../types';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonImage - Image skeleton loader\n *\n * A skeleton loader for image placeholders with optional aspect ratio.\n *\n * @example\n * ```tsx\n * <SkeletonImage width={300} height={200} />\n * <SkeletonImage aspectRatio=\"16/9\" width=\"100%\" />\n * ```\n */\nexport const SkeletonImage = forwardRef<HTMLDivElement, SkeletonImageProps>(\n  (\n    {\n      width = '100%',\n      height = '200px',\n      aspectRatio,\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      className,\n      style,\n      testId = 'skeleton-image',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={width}\n        height={aspectRatio ? 'auto' : height}\n        variant=\"rounded\"\n        borderRadius={borderRadius}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={{\n          aspectRatio: aspectRatio || undefined,\n          ...style,\n        }}\n        aria-label=\"Loading image...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonImage.displayName = 'SkeletonImage';\n"],"names":[],"mappings":";;;AAeO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,QAAQ,cAAc,SAAS;AAAA,QAC/B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,aAAa,eAAe;AAAA,UAC5B,GAAG;AAAA,QAAA;AAAA,QAEL,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;"}
+{"version":3,"file":"index8.js","sources":["../src/components/skeleton/SkeletonImage.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonImageProps } from '../../types';\nimport { useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonImage - Image skeleton loader\n *\n * A skeleton loader for image placeholders with optional aspect ratio.\n *\n * @example\n * ```tsx\n * <SkeletonImage width={300} height={200} />\n * <SkeletonImage aspectRatio=\"16/9\" width=\"100%\" />\n * ```\n */\nexport const SkeletonImage = forwardRef<HTMLDivElement, SkeletonImageProps>(\n  (\n    {\n      width = '100%',\n      height = '200px',\n      aspectRatio,\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-image',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    return (\n      <Skeleton\n        ref={ref}\n        data-testid={testId}\n        width={width}\n        height={aspectRatio ? 'auto' : height}\n        variant=\"rounded\"\n        borderRadius={borderRadius}\n        animate={animate}\n        baseColor={baseColor}\n        highlightColor={highlightColor}\n        className={className}\n        style={{\n          aspectRatio: aspectRatio || undefined,\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        aria-label=\"Loading image...\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeletonImage.displayName = 'SkeletonImage';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,QAAQ,cAAc,SAAS;AAAA,QAC/B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,aAAa,eAAe;AAAA,UAC5B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;"}

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("./index31.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",

package/dist/index9.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index9.cjs","sources":["../src/components/skeleton/SkeletonCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonCardProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonAvatar } from './SkeletonAvatar';\n\n/**\n * SkeletonCard - Card skeleton loader\n *\n * A composite skeleton loader for card layouts with optional avatar, title, and description lines.\n *\n * @example\n * ```tsx\n * <SkeletonCard />\n * <SkeletonCard hasAvatar={true} lines={3} />\n * <SkeletonCard hasAvatar={false} titleWidth=\"60%\" />\n * ```\n */\nexport const SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      hasAvatar = true,\n      titleWidth = '60%',\n      lines = 2,\n      avatarSize = 40,\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-card',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex gap-3', className)}\n        style={style}\n        role=\"status\"\n        aria-label=\"Loading card...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {hasAvatar && (\n          <SkeletonAvatar\n            size={avatarSize}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        )}\n        <div className=\"flex-1 space-y-2\">\n          {/* Title */}\n          <Skeleton\n            width={titleWidth}\n            height=\"1.25rem\"\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n          {/* Description lines */}\n          {Array.from({ length: lines }).map((_, index) => (\n            <Skeleton\n              key={index}\n              width={index === lines - 1 ? '70%' : '100%'}\n              height=\"1rem\"\n              variant=\"text\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonCard.displayName = 'SkeletonCard';\n"],"names":["forwardRef","jsxs","cn","jsx","SkeletonAvatar","Skeleton"],"mappings":";;;;;;;AAkBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,cAAc,SAAS;AAAA,QACrC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aACCC,2BAAAA;AAAAA,YAACC,eAAAA;AAAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBAEb,UAAA;AAAA,YAAAE,2BAAAA;AAAAA,cAACE,SAAAA;AAAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UACrCF,2BAAAA;AAAAA,cAACE,SAAAA;AAAAA,cAAA;AAAA,gBAEC,OAAO,UAAU,QAAQ,IAAI,QAAQ;AAAA,gBACrC,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cANK;AAAA,YAAA,CAQR;AAAA,UAAA,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"index9.cjs","sources":["../src/components/skeleton/SkeletonCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonCardProps } from '../../types';\nimport { cn, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonAvatar } from './SkeletonAvatar';\n\n/**\n * SkeletonCard - Card skeleton loader\n *\n * A composite skeleton loader for card layouts with optional avatar, title, and description lines.\n *\n * @example\n * ```tsx\n * <SkeletonCard />\n * <SkeletonCard hasAvatar={true} lines={3} />\n * <SkeletonCard hasAvatar={false} titleWidth=\"60%\" />\n * ```\n */\nexport const SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      hasAvatar = true,\n      titleWidth = '60%',\n      lines = 2,\n      avatarSize = 40,\n      animate = true,\n      baseColor,\n      highlightColor,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-card',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex gap-3', className)}\n        style={{\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label=\"Loading card...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {hasAvatar && (\n          <SkeletonAvatar\n            size={avatarSize}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        )}\n        <div className=\"flex-1 space-y-2\">\n          {/* Title */}\n          <Skeleton\n            width={titleWidth}\n            height=\"1.25rem\"\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n          {/* Description lines */}\n          {Array.from({ length: lines }).map((_, index) => (\n            <Skeleton\n              key={index}\n              width={index === lines - 1 ? '70%' : '100%'}\n              height=\"1rem\"\n              variant=\"text\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonCard.displayName = 'SkeletonCard';\n"],"names":["forwardRef","useLoaderVisibility","jsxs","cn","jsx","SkeletonAvatar","Skeleton"],"mappings":";;;;;;;;AAkBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,cAAc,SAAS;AAAA,QACrC,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aACCC,2BAAAA;AAAAA,YAACC,eAAAA;AAAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBAEb,UAAA;AAAA,YAAAE,2BAAAA;AAAAA,cAACE,SAAAA;AAAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UACrCF,2BAAAA;AAAAA,cAACE,SAAAA;AAAAA,cAAA;AAAA,gBAEC,OAAO,UAAU,QAAQ,IAAI,QAAQ;AAAA,gBACrC,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cANK;AAAA,YAAA,CAQR;AAAA,UAAA,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;;"}

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 "./index31.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",

package/dist/index9.js.map

@@ -1 +1 @@
-{"version":3,"file":"index9.js","sources":["../src/components/skeleton/SkeletonCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonCardProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonAvatar } from './SkeletonAvatar';\n\n/**\n * SkeletonCard - Card skeleton loader\n *\n * A composite skeleton loader for card layouts with optional avatar, title, and description lines.\n *\n * @example\n * ```tsx\n * <SkeletonCard />\n * <SkeletonCard hasAvatar={true} lines={3} />\n * <SkeletonCard hasAvatar={false} titleWidth=\"60%\" />\n * ```\n */\nexport const SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      hasAvatar = true,\n      titleWidth = '60%',\n      lines = 2,\n      avatarSize = 40,\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-card',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex gap-3', className)}\n        style={style}\n        role=\"status\"\n        aria-label=\"Loading card...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {hasAvatar && (\n          <SkeletonAvatar\n            size={avatarSize}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        )}\n        <div className=\"flex-1 space-y-2\">\n          {/* Title */}\n          <Skeleton\n            width={titleWidth}\n            height=\"1.25rem\"\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n          {/* Description lines */}\n          {Array.from({ length: lines }).map((_, index) => (\n            <Skeleton\n              key={index}\n              width={index === lines - 1 ? '70%' : '100%'}\n              height=\"1rem\"\n              variant=\"text\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonCard.displayName = 'SkeletonCard';\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,cAAc,SAAS;AAAA,QACrC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,qBAAC,OAAA,EAAI,WAAU,oBAEb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UACrC;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO,UAAU,QAAQ,IAAI,QAAQ;AAAA,gBACrC,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cANK;AAAA,YAAA,CAQR;AAAA,UAAA,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"index9.js","sources":["../src/components/skeleton/SkeletonCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonCardProps } from '../../types';\nimport { cn, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonAvatar } from './SkeletonAvatar';\n\n/**\n * SkeletonCard - Card skeleton loader\n *\n * A composite skeleton loader for card layouts with optional avatar, title, and description lines.\n *\n * @example\n * ```tsx\n * <SkeletonCard />\n * <SkeletonCard hasAvatar={true} lines={3} />\n * <SkeletonCard hasAvatar={false} titleWidth=\"60%\" />\n * ```\n */\nexport const SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      hasAvatar = true,\n      titleWidth = '60%',\n      lines = 2,\n      avatarSize = 40,\n      animate = true,\n      baseColor,\n      highlightColor,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-card',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      visible,\n      delay,\n      minDuration,\n      transition\n    );\n\n    if (!shouldRender) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex gap-3', className)}\n        style={{\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label=\"Loading card...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {hasAvatar && (\n          <SkeletonAvatar\n            size={avatarSize}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        )}\n        <div className=\"flex-1 space-y-2\">\n          {/* Title */}\n          <Skeleton\n            width={titleWidth}\n            height=\"1.25rem\"\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n          {/* Description lines */}\n          {Array.from({ length: lines }).map((_, index) => (\n            <Skeleton\n              key={index}\n              width={index === lines - 1 ? '70%' : '100%'}\n              height=\"1rem\"\n              variant=\"text\"\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonCard.displayName = 'SkeletonCard';\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,QAAI,CAAC,aAAc,QAAO;AAE1B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,cAAc,SAAS;AAAA,QACrC,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,qBAAC,OAAA,EAAI,WAAU,oBAEb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UACrC;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO,UAAU,QAAQ,IAAI,QAAQ;AAAA,gBACrC,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cANK;AAAA,YAAA,CAQR;AAAA,UAAA,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;"}

package/dist/premium-react-loaders.css

@@ -164,6 +164,26 @@
   animation-duration: var(--animation-duration-fast, 0.5s);
 }
 
+/* Transition utility classes */
+
+.loader-fade-enter {
+  opacity: 0;
+}
+
+.loader-fade-enter-active {
+  opacity: 1;
+  transition: opacity var(--transition-duration, 150ms) ease-in;
+}
+
+.loader-fade-exit {
+  opacity: 1;
+}
+
+.loader-fade-exit-active {
+  opacity: 0;
+  transition: opacity var(--transition-duration, 150ms) ease-out;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -708,10 +728,6 @@ video {
   inset: 0px;
 }
 
-.\!visible {
-  visibility: visible !important;
-}
-
 .visible {
   visibility: visible;
 }
@@ -773,6 +789,18 @@ video {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -789,6 +817,10 @@ video {
   width: 50%;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
 .w-3\/4 {
   width: 75%;
 }
@@ -892,6 +924,12 @@ video {
   gap: 1.5rem;
 }
 
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -953,6 +991,11 @@ video {
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
 
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -963,6 +1006,31 @@ video {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
+}
+
+.bg-indigo-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
+}
+
+.bg-orange-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
+}
+
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -980,6 +1048,16 @@ video {
   padding: 2rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1005,6 +1083,11 @@ video {
   line-height: 2rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1027,11 +1110,26 @@ video {
   font-weight: 600;
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .opacity-30 {
   opacity: 0.3;
 }
@@ -1075,6 +1173,10 @@ video {
   transition-duration: 300ms;
 }
 
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1096,3 +1198,33 @@ video {
 }
 
 /* Base loader styles */
+
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-green-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-indigo-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-orange-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-purple-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
+}

package/dist/types/common.d.ts

@@ -31,6 +31,12 @@ export interface BaseLoaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
     reverse?: boolean;
     /** Respect user's reduced motion preference (default: true) */
     respectMotionPreference?: boolean;
+    /** Delay in milliseconds before showing the loader (prevents flash on fast loads, default: 0) */
+    delay?: number;
+    /** Minimum duration in milliseconds to show loader once visible (prevents jarring quick disappear, default: 0) */
+    minDuration?: number;
+    /** Enable fade transition (true for 150ms default, or specify duration in milliseconds) */
+    transition?: boolean | number;
     /** Test ID for testing */
     testId?: string;
 }

package/dist/types/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMtD,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpF,6EAA6E;IAC7E,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAEpC,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAE5C,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIpD,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMtD,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpF,6EAA6E;IAC7E,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAEpC,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAE5C,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,kHAAkH;IAClH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,2FAA2F;IAC3F,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAE9B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIpD,CAAC"}

package/dist/utils/hooks.d.ts

@@ -7,4 +7,13 @@ export declare function useReducedMotion(): boolean;
  * Get effective animation duration based on speed and reduced motion preference
  */
 export declare function getEffectiveDuration(speed: 'slow' | 'normal' | 'fast' | number, respectMotionPreference: boolean, prefersReducedMotion: boolean): string;
+/**
+ * Hook to manage loader visibility with delay, minimum duration, and transitions
+ * Prevents flashing on fast loads and jarring quick disappears
+ */
+export declare function useLoaderVisibility(visible?: boolean, delay?: number, minDuration?: number, transition?: boolean | number): {
+    shouldRender: boolean;
+    opacity: number;
+    transitionStyle: string;
+};
 //# sourceMappingURL=hooks.d.ts.map

package/dist/utils/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/utils/hooks.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CA+B1C;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,EAC1C,uBAAuB,EAAE,OAAO,EAChC,oBAAoB,EAAE,OAAO,GAC5B,MAAM,CAkBR"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/utils/hooks.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CA+B1C;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,EAC1C,uBAAuB,EAAE,OAAO,EAChC,oBAAoB,EAAE,OAAO,GAC5B,MAAM,CAkBR;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,OAAc,EACvB,KAAK,GAAE,MAAU,EACjB,WAAW,GAAE,MAAU,EACvB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,GAC5B;IACD,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;CACzB,CA0GA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "premium-react-loaders",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Premium, production-ready loading components for React with TypeScript and Tailwind CSS",
   "author": "Ishan Karunaratne",
   "license": "MIT",