premium-react-loaders 1.1.0 → 1.3.0

package/dist/index5.cjs

@@ -2,6 +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 colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const Skeleton = react.forwardRef(
@@ -13,13 +14,22 @@ const Skeleton = react.forwardRef(
     animate = true,
     baseColor = "#e0e0e0",
     highlightColor = "#f5f5f5",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const getBorderRadius = () => {
       if (borderRadius !== void 0) return colors.normalizeSize(borderRadius);
       switch (variant) {
@@ -50,7 +60,9 @@ const Skeleton = react.forwardRef(
           borderRadius: getBorderRadius(),
           backgroundColor: baseColor,
           "--skeleton-highlight-color": highlightColor,
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": "Loading...",

package/dist/index5.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index5.cjs","sources":["../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SkeletonProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\n\n/**\n * Skeleton - Base skeleton loader component\n *\n * A versatile skeleton loader that can be used standalone or as a building block for more complex loaders.\n *\n * @example\n * ```tsx\n * <Skeleton width={200} height={20} />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * ```\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      width = '100%',\n      height = '1rem',\n      borderRadius,\n      variant = 'text',\n      animate = true,\n      baseColor = '#e0e0e0',\n      highlightColor = '#f5f5f5',\n      className,\n      style,\n      testId = 'skeleton',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const getBorderRadius = () => {\n      if (borderRadius !== undefined) return normalizeSize(borderRadius);\n\n      switch (variant) {\n        case 'circular':\n          return '50%';\n        case 'rounded':\n          return '0.5rem';\n        case 'text':\n          return '0.25rem';\n        case 'rectangular':\n        default:\n          return '0';\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn(\n          'skeleton',\n          animate && 'skeleton-animate',\n          className\n        )}\n        style={{\n          width: normalizeSize(width),\n          height: normalizeSize(height),\n          borderRadius: getBorderRadius(),\n          backgroundColor: baseColor,\n          '--skeleton-highlight-color': highlightColor,\n          ...style,\n        } as React.CSSProperties}\n        role=\"status\"\n        aria-label=\"Loading...\"\n        aria-busy=\"true\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["forwardRef","normalizeSize","jsx","cn"],"mappings":";;;;;;AAeO,MAAM,WAAWA,MAAAA;AAAAA,EACtB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,kBAAkB,MAAM;AAC5B,UAAI,iBAAiB,OAAW,QAAOC,OAAAA,cAAc,YAAY;AAEjE,cAAQ,SAAA;AAAA,QACN,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MAAA;AAAA,IAEb;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA;AAAAA,UACT;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,OAAOF,OAAAA,cAAc,KAAK;AAAA,UAC1B,QAAQA,OAAAA,cAAc,MAAM;AAAA,UAC5B,cAAc,gBAAA;AAAA,UACd,iBAAiB;AAAA,UACjB,8BAA8B;AAAA,UAC9B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,SAAS,cAAc;;"}
+{"version":3,"file":"index5.cjs","sources":["../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SkeletonProps } from '../../types';\nimport { cn, normalizeSize, useLoaderVisibility } from '../../utils';\n\n/**\n * Skeleton - Base skeleton loader component\n *\n * A versatile skeleton loader that can be used standalone or as a building block for more complex loaders.\n *\n * @example\n * ```tsx\n * <Skeleton width={200} height={20} />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * ```\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      width = '100%',\n      height = '1rem',\n      borderRadius,\n      variant = 'text',\n      animate = true,\n      baseColor = '#e0e0e0',\n      highlightColor = '#f5f5f5',\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton',\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 getBorderRadius = () => {\n      if (borderRadius !== undefined) return normalizeSize(borderRadius);\n\n      switch (variant) {\n        case 'circular':\n          return '50%';\n        case 'rounded':\n          return '0.5rem';\n        case 'text':\n          return '0.25rem';\n        case 'rectangular':\n        default:\n          return '0';\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn(\n          'skeleton',\n          animate && 'skeleton-animate',\n          className\n        )}\n        style={{\n          width: normalizeSize(width),\n          height: normalizeSize(height),\n          borderRadius: getBorderRadius(),\n          backgroundColor: baseColor,\n          '--skeleton-highlight-color': highlightColor,\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        } as React.CSSProperties}\n        role=\"status\"\n        aria-label=\"Loading...\"\n        aria-busy=\"true\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["forwardRef","useLoaderVisibility","normalizeSize","jsx","cn"],"mappings":";;;;;;;AAeO,MAAM,WAAWA,MAAAA;AAAAA,EACtB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,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,kBAAkB,MAAM;AAC5B,UAAI,iBAAiB,OAAW,QAAOC,OAAAA,cAAc,YAAY;AAEjE,cAAQ,SAAA;AAAA,QACN,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MAAA;AAAA,IAEb;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA;AAAAA,UACT;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,OAAOF,OAAAA,cAAc,KAAK;AAAA,UAC1B,QAAQA,OAAAA,cAAc,MAAM;AAAA,UAC5B,cAAc,gBAAA;AAAA,UACd,iBAAiB;AAAA,UACjB,8BAA8B;AAAA,UAC9B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,SAAS,cAAc;;"}

package/dist/index5.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useLoaderVisibility } from "./index31.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const Skeleton = forwardRef(
@@ -11,13 +12,22 @@ const Skeleton = forwardRef(
     animate = true,
     baseColor = "#e0e0e0",
     highlightColor = "#f5f5f5",
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     const getBorderRadius = () => {
       if (borderRadius !== void 0) return normalizeSize(borderRadius);
       switch (variant) {
@@ -48,7 +58,9 @@ const Skeleton = forwardRef(
           borderRadius: getBorderRadius(),
           backgroundColor: baseColor,
           "--skeleton-highlight-color": highlightColor,
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": "Loading...",

package/dist/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":["../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SkeletonProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\n\n/**\n * Skeleton - Base skeleton loader component\n *\n * A versatile skeleton loader that can be used standalone or as a building block for more complex loaders.\n *\n * @example\n * ```tsx\n * <Skeleton width={200} height={20} />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * ```\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      width = '100%',\n      height = '1rem',\n      borderRadius,\n      variant = 'text',\n      animate = true,\n      baseColor = '#e0e0e0',\n      highlightColor = '#f5f5f5',\n      className,\n      style,\n      testId = 'skeleton',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const getBorderRadius = () => {\n      if (borderRadius !== undefined) return normalizeSize(borderRadius);\n\n      switch (variant) {\n        case 'circular':\n          return '50%';\n        case 'rounded':\n          return '0.5rem';\n        case 'text':\n          return '0.25rem';\n        case 'rectangular':\n        default:\n          return '0';\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn(\n          'skeleton',\n          animate && 'skeleton-animate',\n          className\n        )}\n        style={{\n          width: normalizeSize(width),\n          height: normalizeSize(height),\n          borderRadius: getBorderRadius(),\n          backgroundColor: baseColor,\n          '--skeleton-highlight-color': highlightColor,\n          ...style,\n        } as React.CSSProperties}\n        role=\"status\"\n        aria-label=\"Loading...\"\n        aria-busy=\"true\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeleton.displayName = 'Skeleton';\n"],"names":[],"mappings":";;;;AAeO,MAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,kBAAkB,MAAM;AAC5B,UAAI,iBAAiB,OAAW,QAAO,cAAc,YAAY;AAEjE,cAAQ,SAAA;AAAA,QACN,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MAAA;AAAA,IAEb;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,OAAO,cAAc,KAAK;AAAA,UAC1B,QAAQ,cAAc,MAAM;AAAA,UAC5B,cAAc,gBAAA;AAAA,UACd,iBAAiB;AAAA,UACjB,8BAA8B;AAAA,UAC9B,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,SAAS,cAAc;"}
+{"version":3,"file":"index5.js","sources":["../src/components/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { SkeletonProps } from '../../types';\nimport { cn, normalizeSize, useLoaderVisibility } from '../../utils';\n\n/**\n * Skeleton - Base skeleton loader component\n *\n * A versatile skeleton loader that can be used standalone or as a building block for more complex loaders.\n *\n * @example\n * ```tsx\n * <Skeleton width={200} height={20} />\n * <Skeleton variant=\"circular\" width={40} height={40} />\n * ```\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      width = '100%',\n      height = '1rem',\n      borderRadius,\n      variant = 'text',\n      animate = true,\n      baseColor = '#e0e0e0',\n      highlightColor = '#f5f5f5',\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton',\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 getBorderRadius = () => {\n      if (borderRadius !== undefined) return normalizeSize(borderRadius);\n\n      switch (variant) {\n        case 'circular':\n          return '50%';\n        case 'rounded':\n          return '0.5rem';\n        case 'text':\n          return '0.25rem';\n        case 'rectangular':\n        default:\n          return '0';\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn(\n          'skeleton',\n          animate && 'skeleton-animate',\n          className\n        )}\n        style={{\n          width: normalizeSize(width),\n          height: normalizeSize(height),\n          borderRadius: getBorderRadius(),\n          backgroundColor: baseColor,\n          '--skeleton-highlight-color': highlightColor,\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        } as React.CSSProperties}\n        role=\"status\"\n        aria-label=\"Loading...\"\n        aria-busy=\"true\"\n        {...rest}\n      />\n    );\n  }\n);\n\nSkeleton.displayName = 'Skeleton';\n"],"names":[],"mappings":";;;;;AAeO,MAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,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,kBAAkB,MAAM;AAC5B,UAAI,iBAAiB,OAAW,QAAO,cAAc,YAAY;AAEjE,cAAQ,SAAA;AAAA,QACN,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MAAA;AAAA,IAEb;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,OAAO,cAAc,KAAK;AAAA,UAC1B,QAAQ,cAAc,MAAM;AAAA,UAC5B,cAAc,gBAAA;AAAA,UACd,iBAAiB;AAAA,UACjB,8BAA8B;AAAA,UAC9B,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,SAAS,cAAc;"}

package/dist/index6.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 classNames = require("./index3.cjs");
 const SkeletonText = react.forwardRef(
@@ -15,13 +16,22 @@ const SkeletonText = react.forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-text",
     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(
       "div",
       {
@@ -30,7 +40,9 @@ const SkeletonText = react.forwardRef(
         className: classNames.cn("flex flex-col", className),
         style: {
           gap: colors.normalizeSize(gap),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": "Loading text...",

package/dist/index6.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index6.cjs","sources":["../src/components/skeleton/SkeletonText.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTextProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonText - Multi-line text skeleton loader\n *\n * Renders multiple skeleton lines to mimic text content while loading.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={3} />\n * <SkeletonText lines={5} gap={8} lastLineWidth=\"60%\" />\n * ```\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (\n    {\n      lines = 3,\n      width = '100%',\n      height = '1rem',\n      gap = '0.5rem',\n      lastLineWidth = '80%',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-text',\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 flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label=\"Loading text...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: lines }).map((_, index) => {\n          // Last line uses custom width or default (80%)\n          const lineWidth = index === lines - 1 ? lastLineWidth : width;\n\n          return (\n            <Skeleton\n              key={index}\n              width={lineWidth}\n              height={height}\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n              variant=\"text\"\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nSkeletonText.displayName = 'SkeletonText';\n"],"names":["forwardRef","jsx","cn","normalizeSize","Skeleton"],"mappings":";;;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,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,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAKC,OAAAA,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAE/C,gBAAM,YAAY,UAAU,QAAQ,IAAI,gBAAgB;AAExD,iBACEF,2BAAAA;AAAAA,YAACG,SAAAA;AAAAA,YAAA;AAAA,cAEC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,YAAA;AAAA,YANH;AAAA,UAAA;AAAA,QASX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}
+{"version":3,"file":"index6.cjs","sources":["../src/components/skeleton/SkeletonText.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTextProps } from '../../types';\nimport { cn, normalizeSize, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonText - Multi-line text skeleton loader\n *\n * Renders multiple skeleton lines to mimic text content while loading.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={3} />\n * <SkeletonText lines={5} gap={8} lastLineWidth=\"60%\" />\n * ```\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (\n    {\n      lines = 3,\n      width = '100%',\n      height = '1rem',\n      gap = '0.5rem',\n      lastLineWidth = '80%',\n      animate = true,\n      baseColor,\n      highlightColor,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-text',\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 flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label=\"Loading text...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: lines }).map((_, index) => {\n          // Last line uses custom width or default (80%)\n          const lineWidth = index === lines - 1 ? lastLineWidth : width;\n\n          return (\n            <Skeleton\n              key={index}\n              width={lineWidth}\n              height={height}\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n              variant=\"text\"\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nSkeletonText.displayName = 'SkeletonText';\n"],"names":["forwardRef","useLoaderVisibility","jsx","cn","normalizeSize","Skeleton"],"mappings":";;;;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,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,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAKC,OAAAA,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAE/C,gBAAM,YAAY,UAAU,QAAQ,IAAI,gBAAgB;AAExD,iBACEF,2BAAAA;AAAAA,YAACG,SAAAA;AAAAA,YAAA;AAAA,cAEC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,YAAA;AAAA,YANH;AAAA,UAAA;AAAA,QASX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}

package/dist/index6.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";
 import { cn } from "./index3.js";
 const SkeletonText = forwardRef(
@@ -13,13 +14,22 @@ const SkeletonText = forwardRef(
     animate = true,
     baseColor,
     highlightColor,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "skeleton-text",
     visible = true,
     ...rest
   }, ref) => {
-    if (!visible) return null;
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
+    if (!shouldRender) return null;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -28,7 +38,9 @@ const SkeletonText = forwardRef(
         className: cn("flex flex-col", className),
         style: {
           gap: normalizeSize(gap),
-          ...style
+          ...style,
+          opacity,
+          transition: transitionStyle
         },
         role: "status",
         "aria-label": "Loading text...",

package/dist/index6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index6.js","sources":["../src/components/skeleton/SkeletonText.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTextProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonText - Multi-line text skeleton loader\n *\n * Renders multiple skeleton lines to mimic text content while loading.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={3} />\n * <SkeletonText lines={5} gap={8} lastLineWidth=\"60%\" />\n * ```\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (\n    {\n      lines = 3,\n      width = '100%',\n      height = '1rem',\n      gap = '0.5rem',\n      lastLineWidth = '80%',\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-text',\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 flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label=\"Loading text...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: lines }).map((_, index) => {\n          // Last line uses custom width or default (80%)\n          const lineWidth = index === lines - 1 ? lastLineWidth : width;\n\n          return (\n            <Skeleton\n              key={index}\n              width={lineWidth}\n              height={height}\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n              variant=\"text\"\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nSkeletonText.displayName = 'SkeletonText';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,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,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAK,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAE/C,gBAAM,YAAY,UAAU,QAAQ,IAAI,gBAAgB;AAExD,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,YAAA;AAAA,YANH;AAAA,UAAA;AAAA,QASX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"index6.js","sources":["../src/components/skeleton/SkeletonText.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTextProps } from '../../types';\nimport { cn, normalizeSize, useLoaderVisibility } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonText - Multi-line text skeleton loader\n *\n * Renders multiple skeleton lines to mimic text content while loading.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={3} />\n * <SkeletonText lines={5} gap={8} lastLineWidth=\"60%\" />\n * ```\n */\nexport const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  (\n    {\n      lines = 3,\n      width = '100%',\n      height = '1rem',\n      gap = '0.5rem',\n      lastLineWidth = '80%',\n      animate = true,\n      baseColor,\n      highlightColor,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'skeleton-text',\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 flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n          opacity,\n          transition: transitionStyle,\n        }}\n        role=\"status\"\n        aria-label=\"Loading text...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: lines }).map((_, index) => {\n          // Last line uses custom width or default (80%)\n          const lineWidth = index === lines - 1 ? lastLineWidth : width;\n\n          return (\n            <Skeleton\n              key={index}\n              width={lineWidth}\n              height={height}\n              animate={animate}\n              baseColor={baseColor}\n              highlightColor={highlightColor}\n              variant=\"text\"\n            />\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nSkeletonText.displayName = 'SkeletonText';\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,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,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAK,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,UACH;AAAA,UACA,YAAY;AAAA,QAAA;AAAA,QAEd,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAAC,GAAG,UAAU;AAE/C,gBAAM,YAAY,UAAU,QAAQ,IAAI,gBAAgB;AAExD,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,YAAA;AAAA,YANH;AAAA,UAAA;AAAA,QASX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}

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;"}