premium-react-loaders 1.2.0 → 1.3.0

package/dist/index29.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 classNames = require("./index3.cjs");
 const LoaderOverlay = react.forwardRef(
   ({
@@ -12,6 +13,9 @@ const LoaderOverlay = react.forwardRef(
     backdropOpacity = 0.5,
     backdropColor = "#000000",
     blur = false,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "loader-overlay",
@@ -19,6 +23,12 @@ const LoaderOverlay = react.forwardRef(
     zIndex = 9999,
     ...rest
   }, ref) => {
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      loading,
+      delay,
+      minDuration,
+      transition
+    );
     const backdropStyles = {
       backgroundColor: backdropColor,
       opacity: backdropOpacity,
@@ -35,7 +45,7 @@ const LoaderOverlay = react.forwardRef(
         ...rest,
         children: [
           children,
-          loading && /* @__PURE__ */ jsxRuntime.jsxs(
+          shouldRender && /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               className: classNames.cn(
@@ -43,7 +53,9 @@ const LoaderOverlay = react.forwardRef(
                 position === "fixed" ? "fixed" : "absolute"
               ),
               style: {
-                zIndex
+                zIndex,
+                opacity,
+                transition: transitionStyle
               },
               role: "status",
               "aria-label": ariaLabel,

package/dist/index29.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index29.cjs","sources":["../src/components/overlay/LoaderOverlay.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { LoaderOverlayProps } from '../../types';\nimport { cn } from '../../utils';\n\n/**\n * LoaderOverlay - Overlay wrapper for displaying loaders over content\n *\n * A flexible overlay component that displays a loader over content during loading states.\n * Supports both full-screen and container-relative positioning.\n *\n * @example\n * ```tsx\n * // Full screen overlay\n * <LoaderOverlay loading={isLoading} loader={<SpinnerCircle />}>\n *   <YourContent />\n * </LoaderOverlay>\n *\n * // Container overlay with custom backdrop\n * <LoaderOverlay\n *   loading={isLoading}\n *   loader={<SpinnerRing />}\n *   position=\"absolute\"\n *   backdropOpacity={0.7}\n *   blur\n * >\n *   <YourContent />\n * </LoaderOverlay>\n * ```\n */\nexport const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(\n  (\n    {\n      loading = false,\n      loader,\n      children,\n      position = 'fixed',\n      backdropOpacity = 0.5,\n      backdropColor = '#000000',\n      blur = false,\n      className,\n      style,\n      testId = 'loader-overlay',\n      ariaLabel = 'Loading content...',\n      zIndex = 9999,\n      ...rest\n    },\n    ref\n  ) => {\n    const backdropStyles = {\n      backgroundColor: backdropColor,\n      opacity: backdropOpacity,\n      backdropFilter: blur ? 'blur(4px)' : undefined,\n      WebkitBackdropFilter: blur ? 'blur(4px)' : undefined,\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n\n        {loading && (\n          <div\n            className={cn(\n              'inset-0 flex items-center justify-center',\n              position === 'fixed' ? 'fixed' : 'absolute'\n            )}\n            style={{\n              zIndex,\n            }}\n            role=\"status\"\n            aria-label={ariaLabel}\n            aria-busy=\"true\"\n          >\n            {/* Backdrop */}\n            <div\n              className=\"absolute inset-0\"\n              style={backdropStyles}\n              aria-hidden=\"true\"\n            />\n\n            {/* Loader */}\n            <div className=\"relative z-10\">{loader}</div>\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nLoaderOverlay.displayName = 'LoaderOverlay';\n"],"names":["forwardRef","jsxs","cn","jsx"],"mappings":";;;;;AA6BO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB;AAAA,MACrB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,gBAAgB,OAAO,cAAc;AAAA,MACrC,sBAAsB,OAAO,cAAc;AAAA,IAAA;AAG7C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,YAAY,SAAS;AAAA,QACnC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UAEA,WACCD,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,WAAAA;AAAAA,gBACT;AAAA,gBACA,aAAa,UAAU,UAAU;AAAA,cAAA;AAAA,cAEnC,OAAO;AAAA,gBACL;AAAA,cAAA;AAAA,cAEF,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,aAAU;AAAA,cAGV,UAAA;AAAA,gBAAAC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,oBACP,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAIdA,2BAAAA,IAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,cAAc,cAAc;;"}
+{"version":3,"file":"index29.cjs","sources":["../src/components/overlay/LoaderOverlay.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { LoaderOverlayProps } from '../../types';\nimport { cn, useLoaderVisibility } from '../../utils';\n\n/**\n * LoaderOverlay - Overlay wrapper for displaying loaders over content\n *\n * A flexible overlay component that displays a loader over content during loading states.\n * Supports both full-screen and container-relative positioning.\n *\n * @example\n * ```tsx\n * // Full screen overlay\n * <LoaderOverlay loading={isLoading} loader={<SpinnerCircle />}>\n *   <YourContent />\n * </LoaderOverlay>\n *\n * // Container overlay with custom backdrop\n * <LoaderOverlay\n *   loading={isLoading}\n *   loader={<SpinnerRing />}\n *   position=\"absolute\"\n *   backdropOpacity={0.7}\n *   blur\n * >\n *   <YourContent />\n * </LoaderOverlay>\n * ```\n */\nexport const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(\n  (\n    {\n      loading = false,\n      loader,\n      children,\n      position = 'fixed',\n      backdropOpacity = 0.5,\n      backdropColor = '#000000',\n      blur = false,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'loader-overlay',\n      ariaLabel = 'Loading content...',\n      zIndex = 9999,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      loading,\n      delay,\n      minDuration,\n      transition\n    );\n\n    const backdropStyles = {\n      backgroundColor: backdropColor,\n      opacity: backdropOpacity,\n      backdropFilter: blur ? 'blur(4px)' : undefined,\n      WebkitBackdropFilter: blur ? 'blur(4px)' : undefined,\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n\n        {shouldRender && (\n          <div\n            className={cn(\n              'inset-0 flex items-center justify-center',\n              position === 'fixed' ? 'fixed' : 'absolute'\n            )}\n            style={{\n              zIndex,\n              opacity,\n              transition: transitionStyle,\n            }}\n            role=\"status\"\n            aria-label={ariaLabel}\n            aria-busy=\"true\"\n          >\n            {/* Backdrop */}\n            <div\n              className=\"absolute inset-0\"\n              style={backdropStyles}\n              aria-hidden=\"true\"\n            />\n\n            {/* Loader */}\n            <div className=\"relative z-10\">{loader}</div>\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nLoaderOverlay.displayName = 'LoaderOverlay';\n"],"names":["forwardRef","useLoaderVisibility","jsxs","cn","jsx"],"mappings":";;;;;;AA6BO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoBC,MAAAA;AAAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,iBAAiB;AAAA,MACrB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,gBAAgB,OAAO,cAAc;AAAA,MACrC,sBAAsB,OAAO,cAAc;AAAA,IAAA;AAG7C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,YAAY,SAAS;AAAA,QACnC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UAEA,gBACCD,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,WAAAA;AAAAA,gBACT;AAAA,gBACA,aAAa,UAAU,UAAU;AAAA,cAAA;AAAA,cAEnC,OAAO;AAAA,gBACL;AAAA,gBACA;AAAA,gBACA,YAAY;AAAA,cAAA;AAAA,cAEd,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,aAAU;AAAA,cAGV,UAAA;AAAA,gBAAAC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,oBACP,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAIdA,2BAAAA,IAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,cAAc,cAAc;;"}

package/dist/index29.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useLoaderVisibility } from "./index31.js";
 import { cn } from "./index3.js";
 const LoaderOverlay = forwardRef(
   ({
@@ -10,6 +11,9 @@ const LoaderOverlay = forwardRef(
     backdropOpacity = 0.5,
     backdropColor = "#000000",
     blur = false,
+    delay = 0,
+    minDuration = 0,
+    transition,
     className,
     style,
     testId = "loader-overlay",
@@ -17,6 +21,12 @@ const LoaderOverlay = forwardRef(
     zIndex = 9999,
     ...rest
   }, ref) => {
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      loading,
+      delay,
+      minDuration,
+      transition
+    );
     const backdropStyles = {
       backgroundColor: backdropColor,
       opacity: backdropOpacity,
@@ -33,7 +43,7 @@ const LoaderOverlay = forwardRef(
         ...rest,
         children: [
           children,
-          loading && /* @__PURE__ */ jsxs(
+          shouldRender && /* @__PURE__ */ jsxs(
             "div",
             {
               className: cn(
@@ -41,7 +51,9 @@ const LoaderOverlay = forwardRef(
                 position === "fixed" ? "fixed" : "absolute"
               ),
               style: {
-                zIndex
+                zIndex,
+                opacity,
+                transition: transitionStyle
               },
               role: "status",
               "aria-label": ariaLabel,

package/dist/index29.js.map

@@ -1 +1 @@
-{"version":3,"file":"index29.js","sources":["../src/components/overlay/LoaderOverlay.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { LoaderOverlayProps } from '../../types';\nimport { cn } from '../../utils';\n\n/**\n * LoaderOverlay - Overlay wrapper for displaying loaders over content\n *\n * A flexible overlay component that displays a loader over content during loading states.\n * Supports both full-screen and container-relative positioning.\n *\n * @example\n * ```tsx\n * // Full screen overlay\n * <LoaderOverlay loading={isLoading} loader={<SpinnerCircle />}>\n *   <YourContent />\n * </LoaderOverlay>\n *\n * // Container overlay with custom backdrop\n * <LoaderOverlay\n *   loading={isLoading}\n *   loader={<SpinnerRing />}\n *   position=\"absolute\"\n *   backdropOpacity={0.7}\n *   blur\n * >\n *   <YourContent />\n * </LoaderOverlay>\n * ```\n */\nexport const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(\n  (\n    {\n      loading = false,\n      loader,\n      children,\n      position = 'fixed',\n      backdropOpacity = 0.5,\n      backdropColor = '#000000',\n      blur = false,\n      className,\n      style,\n      testId = 'loader-overlay',\n      ariaLabel = 'Loading content...',\n      zIndex = 9999,\n      ...rest\n    },\n    ref\n  ) => {\n    const backdropStyles = {\n      backgroundColor: backdropColor,\n      opacity: backdropOpacity,\n      backdropFilter: blur ? 'blur(4px)' : undefined,\n      WebkitBackdropFilter: blur ? 'blur(4px)' : undefined,\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n\n        {loading && (\n          <div\n            className={cn(\n              'inset-0 flex items-center justify-center',\n              position === 'fixed' ? 'fixed' : 'absolute'\n            )}\n            style={{\n              zIndex,\n            }}\n            role=\"status\"\n            aria-label={ariaLabel}\n            aria-busy=\"true\"\n          >\n            {/* Backdrop */}\n            <div\n              className=\"absolute inset-0\"\n              style={backdropStyles}\n              aria-hidden=\"true\"\n            />\n\n            {/* Loader */}\n            <div className=\"relative z-10\">{loader}</div>\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nLoaderOverlay.displayName = 'LoaderOverlay';\n"],"names":[],"mappings":";;;AA6BO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB;AAAA,MACrB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,gBAAgB,OAAO,cAAc;AAAA,MACrC,sBAAsB,OAAO,cAAc;AAAA,IAAA;AAG7C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UAEA,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,aAAa,UAAU,UAAU;AAAA,cAAA;AAAA,cAEnC,OAAO;AAAA,gBACL;AAAA,cAAA;AAAA,cAEF,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,aAAU;AAAA,cAGV,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,oBACP,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAId,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,cAAc,cAAc;"}
+{"version":3,"file":"index29.js","sources":["../src/components/overlay/LoaderOverlay.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { LoaderOverlayProps } from '../../types';\nimport { cn, useLoaderVisibility } from '../../utils';\n\n/**\n * LoaderOverlay - Overlay wrapper for displaying loaders over content\n *\n * A flexible overlay component that displays a loader over content during loading states.\n * Supports both full-screen and container-relative positioning.\n *\n * @example\n * ```tsx\n * // Full screen overlay\n * <LoaderOverlay loading={isLoading} loader={<SpinnerCircle />}>\n *   <YourContent />\n * </LoaderOverlay>\n *\n * // Container overlay with custom backdrop\n * <LoaderOverlay\n *   loading={isLoading}\n *   loader={<SpinnerRing />}\n *   position=\"absolute\"\n *   backdropOpacity={0.7}\n *   blur\n * >\n *   <YourContent />\n * </LoaderOverlay>\n * ```\n */\nexport const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(\n  (\n    {\n      loading = false,\n      loader,\n      children,\n      position = 'fixed',\n      backdropOpacity = 0.5,\n      backdropColor = '#000000',\n      blur = false,\n      delay = 0,\n      minDuration = 0,\n      transition,\n      className,\n      style,\n      testId = 'loader-overlay',\n      ariaLabel = 'Loading content...',\n      zIndex = 9999,\n      ...rest\n    },\n    ref\n  ) => {\n    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(\n      loading,\n      delay,\n      minDuration,\n      transition\n    );\n\n    const backdropStyles = {\n      backgroundColor: backdropColor,\n      opacity: backdropOpacity,\n      backdropFilter: blur ? 'blur(4px)' : undefined,\n      WebkitBackdropFilter: blur ? 'blur(4px)' : undefined,\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('relative', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n\n        {shouldRender && (\n          <div\n            className={cn(\n              'inset-0 flex items-center justify-center',\n              position === 'fixed' ? 'fixed' : 'absolute'\n            )}\n            style={{\n              zIndex,\n              opacity,\n              transition: transitionStyle,\n            }}\n            role=\"status\"\n            aria-label={ariaLabel}\n            aria-busy=\"true\"\n          >\n            {/* Backdrop */}\n            <div\n              className=\"absolute inset-0\"\n              style={backdropStyles}\n              aria-hidden=\"true\"\n            />\n\n            {/* Loader */}\n            <div className=\"relative z-10\">{loader}</div>\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nLoaderOverlay.displayName = 'LoaderOverlay';\n"],"names":[],"mappings":";;;;AA6BO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,EAAE,cAAc,SAAS,gBAAA,IAAoB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,iBAAiB;AAAA,MACrB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,gBAAgB,OAAO,cAAc;AAAA,MACrC,sBAAsB,OAAO,cAAc;AAAA,IAAA;AAG7C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UAEA,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,aAAa,UAAU,UAAU;AAAA,cAAA;AAAA,cAEnC,OAAO;AAAA,gBACL;AAAA,gBACA;AAAA,gBACA,YAAY;AAAA,cAAA;AAAA,cAEd,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,aAAU;AAAA,cAGV,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,oBACP,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAId,oBAAC,OAAA,EAAI,WAAU,iBAAiB,UAAA,OAAA,CAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,cAAc,cAAc;"}

package/dist/index31.cjs

@@ -37,6 +37,90 @@ function getEffectiveDuration(speed, respectMotionPreference, prefersReducedMoti
   };
   return speedMap[speed] || speedMap.normal;
 }
+function useLoaderVisibility(visible = true, delay = 0, minDuration = 0, transition) {
+  const transitionDuration = transition === true ? 150 : typeof transition === "number" ? transition : 0;
+  const hasTransition = transitionDuration > 0;
+  const [shouldRender, setShouldRender] = react.useState(visible && delay === 0);
+  const [isTransitioning, setIsTransitioning] = react.useState(visible && delay === 0 && hasTransition);
+  const showTimeRef = react.useRef(visible && delay === 0 ? Date.now() : null);
+  const delayTimerRef = react.useRef(null);
+  const minDurationTimerRef = react.useRef(null);
+  const transitionTimerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (delayTimerRef.current) {
+      clearTimeout(delayTimerRef.current);
+      delayTimerRef.current = null;
+    }
+    if (minDurationTimerRef.current) {
+      clearTimeout(minDurationTimerRef.current);
+      minDurationTimerRef.current = null;
+    }
+    if (transitionTimerRef.current) {
+      clearTimeout(transitionTimerRef.current);
+      transitionTimerRef.current = null;
+    }
+    if (visible) {
+      if (delay > 0) {
+        delayTimerRef.current = setTimeout(() => {
+          setShouldRender(true);
+          showTimeRef.current = Date.now();
+          if (hasTransition) {
+            setIsTransitioning(true);
+          }
+        }, delay);
+      } else {
+        setShouldRender(true);
+        showTimeRef.current = Date.now();
+        if (hasTransition) {
+          setIsTransitioning(true);
+        }
+      }
+    } else {
+      const hideLoader = () => {
+        if (hasTransition) {
+          setIsTransitioning(false);
+          transitionTimerRef.current = setTimeout(() => {
+            setShouldRender(false);
+            showTimeRef.current = null;
+          }, transitionDuration);
+        } else {
+          setShouldRender(false);
+          showTimeRef.current = null;
+        }
+      };
+      if (showTimeRef.current !== null && minDuration > 0) {
+        const elapsedTime = Date.now() - showTimeRef.current;
+        const remainingTime = minDuration - elapsedTime;
+        if (remainingTime > 0) {
+          minDurationTimerRef.current = setTimeout(hideLoader, remainingTime);
+        } else {
+          hideLoader();
+        }
+      } else {
+        hideLoader();
+      }
+    }
+    return () => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+      }
+      if (minDurationTimerRef.current) {
+        clearTimeout(minDurationTimerRef.current);
+      }
+      if (transitionTimerRef.current) {
+        clearTimeout(transitionTimerRef.current);
+      }
+    };
+  }, [visible, delay, minDuration, hasTransition, transitionDuration]);
+  const opacity = hasTransition ? isTransitioning ? 1 : 0 : 1;
+  const transitionStyle = hasTransition ? `opacity ${transitionDuration}ms ease-in-out` : "none";
+  return {
+    shouldRender,
+    opacity,
+    transitionStyle
+  };
+}
 exports.getEffectiveDuration = getEffectiveDuration;
+exports.useLoaderVisibility = useLoaderVisibility;
 exports.useReducedMotion = useReducedMotion;
 //# sourceMappingURL=index31.cjs.map

package/dist/index31.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index31.cjs","sources":["../src/utils/hooks.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Hook to detect user's reduced motion preference\n * Returns true if user prefers reduced motion\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    // Check if matchMedia is available (SSR safety)\n    if (typeof window === 'undefined' || !window.matchMedia) {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n    // Set initial value\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    // Listen for changes\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    // Use addEventListener if available (modern browsers)\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handleChange);\n      return () => mediaQuery.removeEventListener('change', handleChange);\n    } else {\n      // Fallback for older browsers\n      mediaQuery.addListener(handleChange);\n      return () => mediaQuery.removeListener(handleChange);\n    }\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * Get effective animation duration based on speed and reduced motion preference\n */\nexport function getEffectiveDuration(\n  speed: 'slow' | 'normal' | 'fast' | number,\n  respectMotionPreference: boolean,\n  prefersReducedMotion: boolean\n): string {\n  // If user prefers reduced motion and we should respect it, use a very short duration\n  if (respectMotionPreference && prefersReducedMotion) {\n    return '0.01ms';\n  }\n\n  if (typeof speed === 'number') {\n    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(10000, speed)) : 1000;\n    return `${validSpeed}ms`;\n  }\n\n  const speedMap = {\n    slow: '2s',\n    normal: '1s',\n    fast: '0.5s',\n  };\n\n  return speedMap[speed] || speedMap.normal;\n}\n"],"names":["useState","useEffect"],"mappings":";;;AAMO,SAAS,mBAA4B;AAC1C,QAAM,CAAC,sBAAsB,uBAAuB,IAAIA,MAAAA,SAAS,KAAK;AAEtEC,QAAAA,UAAU,MAAM;AAEd,QAAI,OAAO,WAAW,eAAe,CAAC,OAAO,YAAY;AACvD;AAAA,IACF;AAEA,UAAM,aAAa,OAAO,WAAW,kCAAkC;AAGvE,4BAAwB,WAAW,OAAO;AAG1C,UAAM,eAAe,CAAC,UAA+B;AACnD,8BAAwB,MAAM,OAAO;AAAA,IACvC;AAGA,QAAI,WAAW,kBAAkB;AAC/B,iBAAW,iBAAiB,UAAU,YAAY;AAClD,aAAO,MAAM,WAAW,oBAAoB,UAAU,YAAY;AAAA,IACpE,OAAO;AAEL,iBAAW,YAAY,YAAY;AACnC,aAAO,MAAM,WAAW,eAAe,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;AAKO,SAAS,qBACd,OACA,yBACA,sBACQ;AAER,MAAI,2BAA2B,sBAAsB;AACnD,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,aAAa,CAAC,MAAM,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,KAAO,KAAK,CAAC,IAAI;AACvF,WAAO,GAAG,UAAU;AAAA,EACtB;AAEA,QAAM,WAAW;AAAA,IACf,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAGR,SAAO,SAAS,KAAK,KAAK,SAAS;AACrC;;;"}
+{"version":3,"file":"index31.cjs","sources":["../src/utils/hooks.ts"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\n/**\n * Hook to detect user's reduced motion preference\n * Returns true if user prefers reduced motion\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    // Check if matchMedia is available (SSR safety)\n    if (typeof window === 'undefined' || !window.matchMedia) {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n    // Set initial value\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    // Listen for changes\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    // Use addEventListener if available (modern browsers)\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handleChange);\n      return () => mediaQuery.removeEventListener('change', handleChange);\n    } else {\n      // Fallback for older browsers\n      mediaQuery.addListener(handleChange);\n      return () => mediaQuery.removeListener(handleChange);\n    }\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * Get effective animation duration based on speed and reduced motion preference\n */\nexport function getEffectiveDuration(\n  speed: 'slow' | 'normal' | 'fast' | number,\n  respectMotionPreference: boolean,\n  prefersReducedMotion: boolean\n): string {\n  // If user prefers reduced motion and we should respect it, use a very short duration\n  if (respectMotionPreference && prefersReducedMotion) {\n    return '0.01ms';\n  }\n\n  if (typeof speed === 'number') {\n    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(10000, speed)) : 1000;\n    return `${validSpeed}ms`;\n  }\n\n  const speedMap = {\n    slow: '2s',\n    normal: '1s',\n    fast: '0.5s',\n  };\n\n  return speedMap[speed] || speedMap.normal;\n}\n\n/**\n * Hook to manage loader visibility with delay, minimum duration, and transitions\n * Prevents flashing on fast loads and jarring quick disappears\n */\nexport function useLoaderVisibility(\n  visible: boolean = true,\n  delay: number = 0,\n  minDuration: number = 0,\n  transition?: boolean | number\n): {\n  shouldRender: boolean;\n  opacity: number;\n  transitionStyle: string;\n} {\n  // Calculate transition duration\n  const transitionDuration =\n    transition === true ? 150 : typeof transition === 'number' ? transition : 0;\n  const hasTransition = transitionDuration > 0;\n\n  // Initialize shouldRender based on visible state and delay\n  // If visible and no delay, render immediately; otherwise start hidden\n  const [shouldRender, setShouldRender] = useState(visible && delay === 0);\n  const [isTransitioning, setIsTransitioning] = useState(visible && delay === 0 && hasTransition);\n  const showTimeRef = useRef<number | null>(visible && delay === 0 ? Date.now() : null);\n  const delayTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const minDurationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    // Clear any existing timers\n    if (delayTimerRef.current) {\n      clearTimeout(delayTimerRef.current);\n      delayTimerRef.current = null;\n    }\n    if (minDurationTimerRef.current) {\n      clearTimeout(minDurationTimerRef.current);\n      minDurationTimerRef.current = null;\n    }\n    if (transitionTimerRef.current) {\n      clearTimeout(transitionTimerRef.current);\n      transitionTimerRef.current = null;\n    }\n\n    if (visible) {\n      // Show loader after delay\n      if (delay > 0) {\n        delayTimerRef.current = setTimeout(() => {\n          setShouldRender(true);\n          showTimeRef.current = Date.now();\n          // Trigger transition\n          if (hasTransition) {\n            setIsTransitioning(true);\n          }\n        }, delay);\n      } else {\n        setShouldRender(true);\n        showTimeRef.current = Date.now();\n        // Trigger transition\n        if (hasTransition) {\n          setIsTransitioning(true);\n        }\n      }\n    } else {\n      // Hide loader, but respect minimum duration if it was shown\n      const hideLoader = () => {\n        if (hasTransition) {\n          setIsTransitioning(false);\n          // Wait for transition to complete before unmounting\n          transitionTimerRef.current = setTimeout(() => {\n            setShouldRender(false);\n            showTimeRef.current = null;\n          }, transitionDuration);\n        } else {\n          setShouldRender(false);\n          showTimeRef.current = null;\n        }\n      };\n\n      if (showTimeRef.current !== null && minDuration > 0) {\n        const elapsedTime = Date.now() - showTimeRef.current;\n        const remainingTime = minDuration - elapsedTime;\n\n        if (remainingTime > 0) {\n          minDurationTimerRef.current = setTimeout(hideLoader, remainingTime);\n        } else {\n          hideLoader();\n        }\n      } else {\n        hideLoader();\n      }\n    }\n\n    // Cleanup timers on unmount or when dependencies change\n    return () => {\n      if (delayTimerRef.current) {\n        clearTimeout(delayTimerRef.current);\n      }\n      if (minDurationTimerRef.current) {\n        clearTimeout(minDurationTimerRef.current);\n      }\n      if (transitionTimerRef.current) {\n        clearTimeout(transitionTimerRef.current);\n      }\n    };\n  }, [visible, delay, minDuration, hasTransition, transitionDuration]);\n\n  // Calculate opacity based on transition state\n  const opacity = hasTransition ? (isTransitioning ? 1 : 0) : 1;\n\n  // Build transition style\n  const transitionStyle = hasTransition\n    ? `opacity ${transitionDuration}ms ease-in-out`\n    : 'none';\n\n  return {\n    shouldRender,\n    opacity,\n    transitionStyle,\n  };\n}\n"],"names":["useState","useEffect","useRef"],"mappings":"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"}

package/dist/index31.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 function useReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
   useEffect(() => {
@@ -35,8 +35,92 @@ function getEffectiveDuration(speed, respectMotionPreference, prefersReducedMoti
   };
   return speedMap[speed] || speedMap.normal;
 }
+function useLoaderVisibility(visible = true, delay = 0, minDuration = 0, transition) {
+  const transitionDuration = transition === true ? 150 : typeof transition === "number" ? transition : 0;
+  const hasTransition = transitionDuration > 0;
+  const [shouldRender, setShouldRender] = useState(visible && delay === 0);
+  const [isTransitioning, setIsTransitioning] = useState(visible && delay === 0 && hasTransition);
+  const showTimeRef = useRef(visible && delay === 0 ? Date.now() : null);
+  const delayTimerRef = useRef(null);
+  const minDurationTimerRef = useRef(null);
+  const transitionTimerRef = useRef(null);
+  useEffect(() => {
+    if (delayTimerRef.current) {
+      clearTimeout(delayTimerRef.current);
+      delayTimerRef.current = null;
+    }
+    if (minDurationTimerRef.current) {
+      clearTimeout(minDurationTimerRef.current);
+      minDurationTimerRef.current = null;
+    }
+    if (transitionTimerRef.current) {
+      clearTimeout(transitionTimerRef.current);
+      transitionTimerRef.current = null;
+    }
+    if (visible) {
+      if (delay > 0) {
+        delayTimerRef.current = setTimeout(() => {
+          setShouldRender(true);
+          showTimeRef.current = Date.now();
+          if (hasTransition) {
+            setIsTransitioning(true);
+          }
+        }, delay);
+      } else {
+        setShouldRender(true);
+        showTimeRef.current = Date.now();
+        if (hasTransition) {
+          setIsTransitioning(true);
+        }
+      }
+    } else {
+      const hideLoader = () => {
+        if (hasTransition) {
+          setIsTransitioning(false);
+          transitionTimerRef.current = setTimeout(() => {
+            setShouldRender(false);
+            showTimeRef.current = null;
+          }, transitionDuration);
+        } else {
+          setShouldRender(false);
+          showTimeRef.current = null;
+        }
+      };
+      if (showTimeRef.current !== null && minDuration > 0) {
+        const elapsedTime = Date.now() - showTimeRef.current;
+        const remainingTime = minDuration - elapsedTime;
+        if (remainingTime > 0) {
+          minDurationTimerRef.current = setTimeout(hideLoader, remainingTime);
+        } else {
+          hideLoader();
+        }
+      } else {
+        hideLoader();
+      }
+    }
+    return () => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+      }
+      if (minDurationTimerRef.current) {
+        clearTimeout(minDurationTimerRef.current);
+      }
+      if (transitionTimerRef.current) {
+        clearTimeout(transitionTimerRef.current);
+      }
+    };
+  }, [visible, delay, minDuration, hasTransition, transitionDuration]);
+  const opacity = hasTransition ? isTransitioning ? 1 : 0 : 1;
+  const transitionStyle = hasTransition ? `opacity ${transitionDuration}ms ease-in-out` : "none";
+  return {
+    shouldRender,
+    opacity,
+    transitionStyle
+  };
+}
 export {
   getEffectiveDuration,
+  useLoaderVisibility,
   useReducedMotion
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.js","sources":["../src/utils/hooks.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Hook to detect user's reduced motion preference\n * Returns true if user prefers reduced motion\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    // Check if matchMedia is available (SSR safety)\n    if (typeof window === 'undefined' || !window.matchMedia) {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n    // Set initial value\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    // Listen for changes\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    // Use addEventListener if available (modern browsers)\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handleChange);\n      return () => mediaQuery.removeEventListener('change', handleChange);\n    } else {\n      // Fallback for older browsers\n      mediaQuery.addListener(handleChange);\n      return () => mediaQuery.removeListener(handleChange);\n    }\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * Get effective animation duration based on speed and reduced motion preference\n */\nexport function getEffectiveDuration(\n  speed: 'slow' | 'normal' | 'fast' | number,\n  respectMotionPreference: boolean,\n  prefersReducedMotion: boolean\n): string {\n  // If user prefers reduced motion and we should respect it, use a very short duration\n  if (respectMotionPreference && prefersReducedMotion) {\n    return '0.01ms';\n  }\n\n  if (typeof speed === 'number') {\n    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(10000, speed)) : 1000;\n    return `${validSpeed}ms`;\n  }\n\n  const speedMap = {\n    slow: '2s',\n    normal: '1s',\n    fast: '0.5s',\n  };\n\n  return speedMap[speed] || speedMap.normal;\n}\n"],"names":[],"mappings":";AAMO,SAAS,mBAA4B;AAC1C,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,KAAK;AAEtE,YAAU,MAAM;AAEd,QAAI,OAAO,WAAW,eAAe,CAAC,OAAO,YAAY;AACvD;AAAA,IACF;AAEA,UAAM,aAAa,OAAO,WAAW,kCAAkC;AAGvE,4BAAwB,WAAW,OAAO;AAG1C,UAAM,eAAe,CAAC,UAA+B;AACnD,8BAAwB,MAAM,OAAO;AAAA,IACvC;AAGA,QAAI,WAAW,kBAAkB;AAC/B,iBAAW,iBAAiB,UAAU,YAAY;AAClD,aAAO,MAAM,WAAW,oBAAoB,UAAU,YAAY;AAAA,IACpE,OAAO;AAEL,iBAAW,YAAY,YAAY;AACnC,aAAO,MAAM,WAAW,eAAe,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;AAKO,SAAS,qBACd,OACA,yBACA,sBACQ;AAER,MAAI,2BAA2B,sBAAsB;AACnD,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,aAAa,CAAC,MAAM,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,KAAO,KAAK,CAAC,IAAI;AACvF,WAAO,GAAG,UAAU;AAAA,EACtB;AAEA,QAAM,WAAW;AAAA,IACf,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAGR,SAAO,SAAS,KAAK,KAAK,SAAS;AACrC;"}
+{"version":3,"file":"index31.js","sources":["../src/utils/hooks.ts"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\n/**\n * Hook to detect user's reduced motion preference\n * Returns true if user prefers reduced motion\n */\nexport function useReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    // Check if matchMedia is available (SSR safety)\n    if (typeof window === 'undefined' || !window.matchMedia) {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n    // Set initial value\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    // Listen for changes\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    // Use addEventListener if available (modern browsers)\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handleChange);\n      return () => mediaQuery.removeEventListener('change', handleChange);\n    } else {\n      // Fallback for older browsers\n      mediaQuery.addListener(handleChange);\n      return () => mediaQuery.removeListener(handleChange);\n    }\n  }, []);\n\n  return prefersReducedMotion;\n}\n\n/**\n * Get effective animation duration based on speed and reduced motion preference\n */\nexport function getEffectiveDuration(\n  speed: 'slow' | 'normal' | 'fast' | number,\n  respectMotionPreference: boolean,\n  prefersReducedMotion: boolean\n): string {\n  // If user prefers reduced motion and we should respect it, use a very short duration\n  if (respectMotionPreference && prefersReducedMotion) {\n    return '0.01ms';\n  }\n\n  if (typeof speed === 'number') {\n    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(10000, speed)) : 1000;\n    return `${validSpeed}ms`;\n  }\n\n  const speedMap = {\n    slow: '2s',\n    normal: '1s',\n    fast: '0.5s',\n  };\n\n  return speedMap[speed] || speedMap.normal;\n}\n\n/**\n * Hook to manage loader visibility with delay, minimum duration, and transitions\n * Prevents flashing on fast loads and jarring quick disappears\n */\nexport function useLoaderVisibility(\n  visible: boolean = true,\n  delay: number = 0,\n  minDuration: number = 0,\n  transition?: boolean | number\n): {\n  shouldRender: boolean;\n  opacity: number;\n  transitionStyle: string;\n} {\n  // Calculate transition duration\n  const transitionDuration =\n    transition === true ? 150 : typeof transition === 'number' ? transition : 0;\n  const hasTransition = transitionDuration > 0;\n\n  // Initialize shouldRender based on visible state and delay\n  // If visible and no delay, render immediately; otherwise start hidden\n  const [shouldRender, setShouldRender] = useState(visible && delay === 0);\n  const [isTransitioning, setIsTransitioning] = useState(visible && delay === 0 && hasTransition);\n  const showTimeRef = useRef<number | null>(visible && delay === 0 ? Date.now() : null);\n  const delayTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const minDurationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    // Clear any existing timers\n    if (delayTimerRef.current) {\n      clearTimeout(delayTimerRef.current);\n      delayTimerRef.current = null;\n    }\n    if (minDurationTimerRef.current) {\n      clearTimeout(minDurationTimerRef.current);\n      minDurationTimerRef.current = null;\n    }\n    if (transitionTimerRef.current) {\n      clearTimeout(transitionTimerRef.current);\n      transitionTimerRef.current = null;\n    }\n\n    if (visible) {\n      // Show loader after delay\n      if (delay > 0) {\n        delayTimerRef.current = setTimeout(() => {\n          setShouldRender(true);\n          showTimeRef.current = Date.now();\n          // Trigger transition\n          if (hasTransition) {\n            setIsTransitioning(true);\n          }\n        }, delay);\n      } else {\n        setShouldRender(true);\n        showTimeRef.current = Date.now();\n        // Trigger transition\n        if (hasTransition) {\n          setIsTransitioning(true);\n        }\n      }\n    } else {\n      // Hide loader, but respect minimum duration if it was shown\n      const hideLoader = () => {\n        if (hasTransition) {\n          setIsTransitioning(false);\n          // Wait for transition to complete before unmounting\n          transitionTimerRef.current = setTimeout(() => {\n            setShouldRender(false);\n            showTimeRef.current = null;\n          }, transitionDuration);\n        } else {\n          setShouldRender(false);\n          showTimeRef.current = null;\n        }\n      };\n\n      if (showTimeRef.current !== null && minDuration > 0) {\n        const elapsedTime = Date.now() - showTimeRef.current;\n        const remainingTime = minDuration - elapsedTime;\n\n        if (remainingTime > 0) {\n          minDurationTimerRef.current = setTimeout(hideLoader, remainingTime);\n        } else {\n          hideLoader();\n        }\n      } else {\n        hideLoader();\n      }\n    }\n\n    // Cleanup timers on unmount or when dependencies change\n    return () => {\n      if (delayTimerRef.current) {\n        clearTimeout(delayTimerRef.current);\n      }\n      if (minDurationTimerRef.current) {\n        clearTimeout(minDurationTimerRef.current);\n      }\n      if (transitionTimerRef.current) {\n        clearTimeout(transitionTimerRef.current);\n      }\n    };\n  }, [visible, delay, minDuration, hasTransition, transitionDuration]);\n\n  // Calculate opacity based on transition state\n  const opacity = hasTransition ? (isTransitioning ? 1 : 0) : 1;\n\n  // Build transition style\n  const transitionStyle = hasTransition\n    ? `opacity ${transitionDuration}ms ease-in-out`\n    : 'none';\n\n  return {\n    shouldRender,\n    opacity,\n    transitionStyle,\n  };\n}\n"],"names":[],"mappings":"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"}

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