auto-skeleton-react 1.0.2 → 1.0.4

package/dist/auto-skeleton-react.js

@@ -1,15 +1,15 @@
-import { jsx as p, jsxs as ge } from "react/jsx-runtime";
-import { useMemo as fe, useRef as ye, useState as Se, useLayoutEffect as oe } from "react";
-function de(e) {
+import { jsx as p, jsxs as Ae } from "react/jsx-runtime";
+import { useMemo as Re, useRef as Ce, useState as Te, useLayoutEffect as me } from "react";
+function xe(e) {
   var r;
-  return e ? (r = e.hasAttribute) != null && r.call(e, "data-no-skeleton") ? !0 : de(e.parentElement) : !1;
+  return e ? (r = e.hasAttribute) != null && r.call(e, "data-no-skeleton") ? !0 : xe(e.parentElement) : !1;
 }
-function ce(e, r, i = 0) {
+function ve(e, r, i = 0) {
   if (i > r.maxDepth) return null;
-  if (de(e)) {
+  if (xe(e)) {
     const c = e.getBoundingClientRect(), l = window.getComputedStyle(e), o = {};
-    for (const u of e.attributes)
-      o[u.name] = u.value;
+    for (const f of e.attributes)
+      o[f.name] = f.value;
     return {
       rect: c,
       style: l,
@@ -23,34 +23,34 @@ function ce(e, r, i = 0) {
   }
   for (const c of r.ignoreSelectors)
     if (e.matches(c)) return null;
-  const t = e.getBoundingClientRect(), s = window.getComputedStyle(e), y = e.tagName === "IMG", n = y ? e : null, S = n == null ? void 0 : n.getAttribute("src"), m = (n == null ? void 0 : n.src) || "", f = (n == null ? void 0 : n.naturalWidth) === 0 || (n == null ? void 0 : n.naturalHeight) === 0, a = !S || S === "", w = m === window.location.href || m.endsWith("/"), R = y && (a || w || f);
+  const t = e.getBoundingClientRect(), s = window.getComputedStyle(e), y = e.tagName === "IMG", n = y ? e : null, S = n == null ? void 0 : n.getAttribute("src"), m = (n == null ? void 0 : n.src) || "", u = (n == null ? void 0 : n.naturalWidth) === 0 || (n == null ? void 0 : n.naturalHeight) === 0, a = !S || S === "", w = m === window.location.href || m.endsWith("/"), R = y && (a || w || u);
   let v = t;
   if (R && n) {
     let c = 0, l = 0;
-    const o = e.parentElement, u = o ? window.getComputedStyle(o) : null;
-    let x = 0;
+    const o = e.parentElement, f = o ? window.getComputedStyle(o) : null;
+    let b = 0;
     if (o) {
-      const d = o.getBoundingClientRect(), H = parseFloat((u == null ? void 0 : u.paddingLeft) || "0"), L = parseFloat((u == null ? void 0 : u.paddingRight) || "0");
-      x = d.width - H - L;
+      const d = o.getBoundingClientRect(), H = parseFloat((f == null ? void 0 : f.paddingLeft) || "0"), B = parseFloat((f == null ? void 0 : f.paddingRight) || "0");
+      b = d.width - H - B;
     }
-    const b = n.style.width, C = n.style.height;
-    if (C && !C.includes("%")) {
-      const d = parseFloat(C);
+    const x = n.style.width, T = n.style.height;
+    if (T && !T.includes("%")) {
+      const d = parseFloat(T);
       !isNaN(d) && d > 0 && (l = d);
     }
     if (l === 0) {
       const d = parseFloat(s.height);
       !isNaN(d) && d > 50 && (l = d);
     }
-    if (b)
-      if (b.includes("%")) {
-        const d = parseFloat(b) / 100;
-        !isNaN(d) && x > 0 && (c = x * d);
+    if (x)
+      if (x.includes("%")) {
+        const d = parseFloat(x) / 100;
+        !isNaN(d) && b > 0 && (c = b * d);
       } else {
-        const d = parseFloat(b);
+        const d = parseFloat(x);
         !isNaN(d) && d > 0 && (c = d);
       }
-    if (c === 0 && x > 0 && (c = x), c === 0) {
+    if (c === 0 && b > 0 && (c = b), c === 0) {
       const d = n.getAttribute("width");
       d && (c = parseFloat(d));
     }
@@ -78,7 +78,7 @@ function ce(e, r, i = 0) {
   const A = [];
   for (const c of e.children)
     if (c instanceof HTMLElement) {
-      const l = ce(c, r, i + 1);
+      const l = ve(c, r, i + 1);
       l && A.push(l);
     }
   return {
@@ -90,19 +90,19 @@ function ce(e, r, i = 0) {
     children: A
   };
 }
-const he = ["TABLE", "THEAD", "TBODY", "TFOOT", "TR"], pe = ["TH", "TD"];
-function me(e) {
+const be = ["TABLE", "THEAD", "TBODY", "TFOOT", "TR"], we = ["TH", "TD"];
+function Ne(e) {
   var S, m;
   const { tagName: r, textContent: i, children: t, style: s, rect: y } = e;
-  if (y.width * y.height < 100 || he.includes(r) || pe.includes(r)) return !1;
+  if (y.width * y.height < 100 || be.includes(r) || we.includes(r)) return !1;
   if (r.match(/^(IMG|BUTTON|INPUT|TEXTAREA|SELECT|SVG)$/) || i != null && i.trim() && t.length === 0) return !0;
   if (t.length === 1 && (i != null && i.trim())) {
-    const f = t[0];
-    if ((S = f.textContent) != null && S.trim() && f.children.length === 0) return !0;
+    const u = t[0];
+    if ((S = u.textContent) != null && S.trim() && u.children.length === 0) return !0;
   }
   return t.length > 1 || (m = s.display) != null && m.match(/flex|grid/) ? !1 : t.length === 0;
 }
-function B(e, r) {
+function L(e, r) {
   var c;
   if (e.passthrough)
     return {
@@ -121,8 +121,8 @@ function B(e, r) {
     const l = m;
     let o = 1;
     if (l === "text") {
-      const u = parseFloat(t.lineHeight), x = parseFloat(t.fontSize), b = u || x * 1.2;
-      b > 0 && i.height > b && (o = Math.ceil(i.height / b));
+      const f = parseFloat(t.lineHeight), b = parseFloat(t.fontSize), x = f || b * 1.2;
+      x > 0 && i.height > x && (o = Math.ceil(i.height / x));
     }
     return {
       type: l,
@@ -152,8 +152,8 @@ function B(e, r) {
       }
     };
   }
-  if (he.includes(s)) {
-    const l = S.map((o) => B(o, r)).filter((o) => o.type !== "skip");
+  if (be.includes(s)) {
+    const l = S.map((o) => L(o, r)).filter((o) => o.type !== "skip");
     return {
       type: s.toLowerCase(),
       tagName: s,
@@ -177,8 +177,8 @@ function B(e, r) {
       }
     };
   }
-  if (pe.includes(s)) {
-    const l = S.map((o) => B(o, r)).filter((o) => o.type !== "skip");
+  if (we.includes(s)) {
+    const l = S.map((o) => L(o, r)).filter((o) => o.type !== "skip");
     return {
       type: s.toLowerCase(),
       tagName: s,
@@ -202,8 +202,8 @@ function B(e, r) {
       }
     };
   }
-  if (!me(e)) {
-    const l = S.map((o) => B(o, r)).filter((o) => o.type !== "skip");
+  if (!Ne(e)) {
+    const l = S.map((o) => L(o, r)).filter((o) => o.type !== "skip");
     return {
       type: "container",
       rect: {
@@ -222,16 +222,25 @@ function B(e, r) {
         padding: t.padding,
         border: t.border,
         boxSizing: t.boxSizing,
+        flex: t.flex,
+        flexGrow: t.flexGrow,
+        flexShrink: t.flexShrink,
+        flexBasis: t.flexBasis,
+        alignSelf: t.alignSelf,
+        justifySelf: t.justifySelf,
         justifyContent: t.justifyContent,
         alignItems: t.alignItems,
         flexDirection: t.flexDirection,
         minHeight: t.minHeight,
         gridTemplateColumns: t.gridTemplateColumns,
-        gridTemplateRows: t.gridTemplateRows
+        gridTemplateRows: t.gridTemplateRows,
+        gridColumn: t.gridColumn,
+        gridRow: t.gridRow,
+        gridArea: t.gridArea
       }
     };
   }
-  const f = i.width * i.height, a = {
+  const u = i.width * i.height, a = {
     text: 0,
     image: 0,
     icon: 0,
@@ -242,16 +251,16 @@ function B(e, r) {
   };
   y && y.trim().length > 0 && (a.text += 40), i.height < r.minTextHeight * 3 && i.height >= r.minTextHeight && (a.text += 30), s.match(/^(P|SPAN|H[1-6]|LABEL|A|DIV)$/) && (a.text += 20);
   const w = parseFloat(t.fontSize);
-  w > 0 && w < 100 && (a.text += 20), s === "IMG" && (a.image += 100), n.role === "img" && (a.image += 60), t.backgroundImage !== "none" && (a.image += 50), f > r.minImageSize ** 2 && (a.image += 30), s === "SVG" && (a.icon += 70);
+  w > 0 && w < 100 && (a.text += 20), s === "IMG" && (a.image += 100), n.role === "img" && (a.image += 60), t.backgroundImage !== "none" && (a.image += 50), u > r.minImageSize ** 2 && (a.image += 30), s === "SVG" && (a.icon += 70);
   const R = i.width / i.height;
-  f < r.iconMaxSize ** 2 && R > 0.8 && R < 1.2 && (a.icon += 40), s === "BUTTON" && (a.button += 80), n.role === "button" && (a.button += 60), t.cursor === "pointer" && f < 2e4 && (a.button += 30), s.match(/^(INPUT|TEXTAREA|SELECT)$/) && (a.input += 80), n.contenteditable && (a.input += 50), S.length > 1 && (a.container += 50), (c = t.display) != null && c.match(/flex|grid/) && (a.container += 30), f < 100 && (a.skip += 50), (i.height < 5 || i.width < 5) && (a.skip += 40);
+  u < r.iconMaxSize ** 2 && R > 0.8 && R < 1.2 && (a.icon += 40), s === "BUTTON" && (a.button += 80), n.role === "button" && (a.button += 60), t.cursor === "pointer" && u < 2e4 && (a.button += 30), s.match(/^(INPUT|TEXTAREA|SELECT)$/) && (a.input += 80), n.contenteditable && (a.input += 50), S.length > 1 && (a.container += 50), (c = t.display) != null && c.match(/flex|grid/) && (a.container += 30), u < 100 && (a.skip += 50), (i.height < 5 || i.width < 5) && (a.skip += 40);
   const v = Object.entries(a).filter(
     ([l]) => l !== "container"
   ).reduce((l, o) => o[1] > l[1] ? o : l), k = v[1] > 30 ? v[0] : "text";
   let A = 1;
   if (k === "text") {
-    const l = parseFloat(t.lineHeight), o = parseFloat(t.fontSize), u = l || o * 1.2;
-    u > 0 && i.height > u && (A = Math.ceil(i.height / u));
+    const l = parseFloat(t.lineHeight), o = parseFloat(t.fontSize), f = l || o * 1.2;
+    f > 0 && i.height > f && (A = Math.ceil(i.height / f));
   }
   return {
     type: k,
@@ -281,16 +290,16 @@ function B(e, r) {
     }
   };
 }
-function be({
+function He({
   blueprint: e,
   baseColor: r,
   highlightColor: i,
   animation: t
 }) {
-  return T(e, r, i, t);
+  return C(e, r, i, t);
 }
-function T(e, r, i, t, s) {
-  var a, w, R, v, k, A, c, l, o, u, x, b, C, d, H, L, I, z, G, E, j, D, M, O, W, _, P, U, V, $, J, X, q, Y, K, Q, Z, ee, te, ie, re, se, le, ne, ae;
+function C(e, r, i, t, s) {
+  var a, w, R, v, k, A, c, l, o, f, b, x, T, d, H, B, F, I, z, j, E, D, M, O, W, _, P, U, V, $, J, X, q, Y, K, Q, Z, ee, te, ie, re, se, le, ne, ae, oe, de, ce, he, pe, fe, ge, ue, ye, Se;
   if (e.type === "passthrough")
     return e.passthroughHtml ? /* @__PURE__ */ p(
       "div",
@@ -311,34 +320,34 @@ function T(e, r, i, t, s) {
           tableLayout: (R = e.preservedStyles) == null ? void 0 : R.tableLayout
         },
         children: (v = e.children) == null ? void 0 : v.map(
-          (h, g) => T(h, r, i, t, g)
+          (h, g) => C(h, r, i, t, g)
         )
       },
       s
     );
   if (e.type === "thead")
     return /* @__PURE__ */ p("thead", { children: (k = e.children) == null ? void 0 : k.map(
-      (h, g) => T(h, r, i, t, g)
+      (h, g) => C(h, r, i, t, g)
     ) }, s);
   if (e.type === "tbody")
     return /* @__PURE__ */ p("tbody", { children: (A = e.children) == null ? void 0 : A.map(
-      (h, g) => T(h, r, i, t, g)
+      (h, g) => C(h, r, i, t, g)
     ) }, s);
   if (e.type === "tr")
     return /* @__PURE__ */ p("tr", { children: (c = e.children) == null ? void 0 : c.map(
-      (h, g) => T(h, r, i, t, g)
+      (h, g) => C(h, r, i, t, g)
     ) }, s);
   if (e.type === "th" || e.type === "td") {
     const h = e.type, g = {
       padding: (l = e.preservedStyles) == null ? void 0 : l.padding,
       borderBottom: (o = e.preservedStyles) == null ? void 0 : o.borderBottom,
-      backgroundColor: (u = e.preservedStyles) == null ? void 0 : u.backgroundColor,
-      textAlign: (x = e.preservedStyles) == null ? void 0 : x.textAlign,
-      verticalAlign: (b = e.preservedStyles) == null ? void 0 : b.verticalAlign,
-      width: (C = e.preservedStyles) == null ? void 0 : C.width
+      backgroundColor: (f = e.preservedStyles) == null ? void 0 : f.backgroundColor,
+      textAlign: (b = e.preservedStyles) == null ? void 0 : b.textAlign,
+      verticalAlign: (x = e.preservedStyles) == null ? void 0 : x.verticalAlign,
+      width: (T = e.preservedStyles) == null ? void 0 : T.width
     };
     return e.children && e.children.length > 0 ? /* @__PURE__ */ p(h, { style: g, children: e.children.map(
-      (N, ue) => T(N, r, i, t, ue)
+      (N, ke) => C(N, r, i, t, ke)
     ) }, s) : /* @__PURE__ */ p(h, { style: g, children: /* @__PURE__ */ p("div", { style: {
       width: "80%",
       height: 16,
@@ -359,20 +368,30 @@ function T(e, r, i, t, s) {
           // Don't set fixed height - let container size naturally from children
           // This avoids issues with incorrect height measurement from alt text
           boxSizing: "border-box",
-          padding: (H = e.preservedStyles) == null ? void 0 : H.padding,
-          border: g ? (L = e.preservedStyles) == null ? void 0 : L.border : void 0,
+          margin: (H = e.preservedStyles) == null ? void 0 : H.margin,
+          padding: (B = e.preservedStyles) == null ? void 0 : B.padding,
+          border: g ? (F = e.preservedStyles) == null ? void 0 : F.border : void 0,
           borderRadius: e.borderRadius,
-          justifyContent: (I = e.preservedStyles) == null ? void 0 : I.justifyContent,
-          alignItems: (z = e.preservedStyles) == null ? void 0 : z.alignItems,
-          flexDirection: (G = e.preservedStyles) == null ? void 0 : G.flexDirection,
-          minHeight: (E = e.preservedStyles) == null ? void 0 : E.minHeight,
+          flex: (I = e.preservedStyles) == null ? void 0 : I.flex,
+          flexGrow: (z = e.preservedStyles) != null && z.flexGrow ? Number(e.preservedStyles.flexGrow) : void 0,
+          flexShrink: (j = e.preservedStyles) != null && j.flexShrink ? Number(e.preservedStyles.flexShrink) : void 0,
+          flexBasis: (E = e.preservedStyles) == null ? void 0 : E.flexBasis,
+          alignSelf: (D = e.preservedStyles) == null ? void 0 : D.alignSelf,
+          justifySelf: (M = e.preservedStyles) == null ? void 0 : M.justifySelf,
+          justifyContent: (O = e.preservedStyles) == null ? void 0 : O.justifyContent,
+          alignItems: (W = e.preservedStyles) == null ? void 0 : W.alignItems,
+          flexDirection: (_ = e.preservedStyles) == null ? void 0 : _.flexDirection,
+          minHeight: (P = e.preservedStyles) == null ? void 0 : P.minHeight,
           // Preserve measured grid template so responsive breakpoints (e.g. md:grid-cols-*)
           // are kept exactly during skeleton rendering.
-          gridTemplateColumns: (j = e.preservedStyles) == null ? void 0 : j.gridTemplateColumns,
-          gridTemplateRows: (D = e.preservedStyles) == null ? void 0 : D.gridTemplateRows
+          gridTemplateColumns: (U = e.preservedStyles) == null ? void 0 : U.gridTemplateColumns,
+          gridTemplateRows: (V = e.preservedStyles) == null ? void 0 : V.gridTemplateRows,
+          gridColumn: ($ = e.preservedStyles) == null ? void 0 : $.gridColumn,
+          gridRow: (J = e.preservedStyles) == null ? void 0 : J.gridRow,
+          gridArea: (X = e.preservedStyles) == null ? void 0 : X.gridArea
         },
         children: e.children.map(
-          (F, N) => T(F, r, i, t, N)
+          (G, N) => C(G, r, i, t, N)
         )
       },
       s
@@ -386,7 +405,7 @@ function T(e, r, i, t, s) {
       backgroundColor: r,
       display: "block",
       boxSizing: "border-box",
-      margin: (M = e.preservedStyles) == null ? void 0 : M.margin
+      margin: (q = e.preservedStyles) == null ? void 0 : q.margin
     };
     return t === "pulse" && (h.animation = "skeleton-pulse 2s ease-in-out infinite"), /* @__PURE__ */ p("div", { style: h, className: "skeleton-image" }, s);
   }
@@ -399,50 +418,50 @@ function T(e, r, i, t, s) {
       minHeight: e.rect.height,
       boxSizing: "border-box",
       // Preserve flex-item properties
-      margin: (O = e.preservedStyles) == null ? void 0 : O.margin,
-      flex: (W = e.preservedStyles) == null ? void 0 : W.flex,
-      flexGrow: (_ = e.preservedStyles) != null && _.flexGrow ? Number(e.preservedStyles.flexGrow) : void 0,
+      margin: (Y = e.preservedStyles) == null ? void 0 : Y.margin,
+      flex: (K = e.preservedStyles) == null ? void 0 : K.flex,
+      flexGrow: (Q = e.preservedStyles) != null && Q.flexGrow ? Number(e.preservedStyles.flexGrow) : void 0,
       flexShrink: 0,
       // Prevent flex compression
-      flexBasis: (P = e.preservedStyles) == null ? void 0 : P.flexBasis,
-      alignSelf: (U = e.preservedStyles) == null ? void 0 : U.alignSelf,
-      justifySelf: (V = e.preservedStyles) == null ? void 0 : V.justifySelf,
+      flexBasis: (Z = e.preservedStyles) == null ? void 0 : Z.flexBasis,
+      alignSelf: (ee = e.preservedStyles) == null ? void 0 : ee.alignSelf,
+      justifySelf: (te = e.preservedStyles) == null ? void 0 : te.justifySelf,
       // Grid properties
-      gridColumn: ($ = e.preservedStyles) == null ? void 0 : $.gridColumn,
-      gridRow: (J = e.preservedStyles) == null ? void 0 : J.gridRow,
-      gridArea: (X = e.preservedStyles) == null ? void 0 : X.gridArea,
+      gridColumn: (ie = e.preservedStyles) == null ? void 0 : ie.gridColumn,
+      gridRow: (re = e.preservedStyles) == null ? void 0 : re.gridRow,
+      gridArea: (se = e.preservedStyles) == null ? void 0 : se.gridArea,
       // Visual
       borderRadius: e.borderRadius,
       backgroundColor: r,
       // Preserve inline nature
       display: "inline-block",
-      verticalAlign: ((q = e.preservedStyles) == null ? void 0 : q.verticalAlign) || "middle"
+      verticalAlign: ((le = e.preservedStyles) == null ? void 0 : le.verticalAlign) || "middle"
     };
     return t === "pulse" && (h.animation = "skeleton-pulse 2s ease-in-out infinite"), /* @__PURE__ */ p("div", { style: h, className: `skeleton-${e.type}` }, s);
   }
   const n = {
     // Only margin for spacing between siblings
-    margin: (Y = e.preservedStyles) == null ? void 0 : Y.margin,
+    margin: (ne = e.preservedStyles) == null ? void 0 : ne.margin,
     // Flex-item properties
-    flex: (K = e.preservedStyles) == null ? void 0 : K.flex,
-    flexGrow: (Q = e.preservedStyles) != null && Q.flexGrow ? Number(e.preservedStyles.flexGrow) : void 0,
-    flexShrink: (Z = e.preservedStyles) != null && Z.flexShrink ? Number(e.preservedStyles.flexShrink) : void 0,
-    flexBasis: (ee = e.preservedStyles) == null ? void 0 : ee.flexBasis,
-    alignSelf: (te = e.preservedStyles) == null ? void 0 : te.alignSelf,
+    flex: (ae = e.preservedStyles) == null ? void 0 : ae.flex,
+    flexGrow: (oe = e.preservedStyles) != null && oe.flexGrow ? Number(e.preservedStyles.flexGrow) : void 0,
+    flexShrink: (de = e.preservedStyles) != null && de.flexShrink ? Number(e.preservedStyles.flexShrink) : void 0,
+    flexBasis: (ce = e.preservedStyles) == null ? void 0 : ce.flexBasis,
+    alignSelf: (he = e.preservedStyles) == null ? void 0 : he.alignSelf,
     // Grid-item properties
-    gridColumn: (ie = e.preservedStyles) == null ? void 0 : ie.gridColumn,
-    gridRow: (re = e.preservedStyles) == null ? void 0 : re.gridRow,
-    gridArea: (se = e.preservedStyles) == null ? void 0 : se.gridArea
-  }, S = ((le = e.preservedStyles) == null ? void 0 : le.display) === "inline" ? "inline-block" : "block", m = {
+    gridColumn: (pe = e.preservedStyles) == null ? void 0 : pe.gridColumn,
+    gridRow: (fe = e.preservedStyles) == null ? void 0 : fe.gridRow,
+    gridArea: (ge = e.preservedStyles) == null ? void 0 : ge.gridArea
+  }, S = ((ue = e.preservedStyles) == null ? void 0 : ue.display) === "inline" ? "inline-block" : "block", m = {
     width: e.rect.width,
     height: e.rect.height,
     borderRadius: e.borderRadius,
     backgroundColor: r,
     display: S,
-    verticalAlign: ((ne = e.preservedStyles) == null ? void 0 : ne.verticalAlign) || "middle"
+    verticalAlign: ((ye = e.preservedStyles) == null ? void 0 : ye.verticalAlign) || "middle"
   };
   if (t === "pulse" && (m.animation = "skeleton-pulse 2s ease-in-out infinite"), e.type === "text" && e.lines && e.lines > 1) {
-    const h = parseFloat(((ae = e.preservedStyles) == null ? void 0 : ae.lineHeight) || "1.2"), g = e.rect.height / e.lines;
+    const h = parseFloat(((Se = e.preservedStyles) == null ? void 0 : Se.lineHeight) || "1.2"), g = e.rect.height / e.lines;
     return /* @__PURE__ */ p(
       "div",
       {
@@ -452,7 +471,7 @@ function T(e, r, i, t, s) {
           flexDirection: "column",
           gap: h > g ? h - g : 4
         },
-        children: Array.from({ length: e.lines }).map((F, N) => /* @__PURE__ */ p(
+        children: Array.from({ length: e.lines }).map((G, N) => /* @__PURE__ */ p(
           "div",
           {
             style: {
@@ -469,10 +488,10 @@ function T(e, r, i, t, s) {
       s
     );
   }
-  const f = `skeleton-${e.type}`;
-  return /* @__PURE__ */ p("div", { style: n, children: /* @__PURE__ */ p("div", { style: m, className: f }) }, s);
+  const u = `skeleton-${e.type}`;
+  return /* @__PURE__ */ p("div", { style: n, children: /* @__PURE__ */ p("div", { style: m, className: u }) }, s);
 }
-const ve = {
+const Be = {
   animation: "pulse",
   baseColor: "#e0e0e0",
   highlightColor: "#f5f5f5",
@@ -483,38 +502,38 @@ const ve = {
   maxDepth: 10,
   ignoreSelectors: [".no-skeleton", "[data-skeleton-ignore]"]
 };
-function ke({
+function Fe({
   loading: e,
   children: r,
   config: i
 }) {
-  const t = fe(
-    () => ({ ...ve, ...i }),
+  const t = Re(
+    () => ({ ...Be, ...i }),
     [i]
-  ), s = ye(null), [y, n] = Se(null);
-  return oe(() => {
+  ), s = Ce(null), [y, n] = Te(null);
+  return me(() => {
     if (!e || !s.current)
       return;
-    const f = requestAnimationFrame(() => {
+    const u = requestAnimationFrame(() => {
       if (s.current)
         try {
-          const a = ce(s.current, t);
+          const a = ve(s.current, t);
           if (a) {
-            const w = B(a, t);
+            const w = L(a, t);
             n(w);
           }
         } catch (a) {
           console.error("AutoSkeleton measurement failed:", a), n(null);
         }
     });
-    return () => cancelAnimationFrame(f);
-  }, [e, t]), oe(() => {
+    return () => cancelAnimationFrame(u);
+  }, [e, t]), me(() => {
     if (e) return;
-    const f = setTimeout(() => {
+    const u = setTimeout(() => {
       n(null);
     }, 300);
-    return () => clearTimeout(f);
-  }, [e]), /* @__PURE__ */ ge("div", { style: { position: "relative" }, children: [
+    return () => clearTimeout(u);
+  }, [e]), /* @__PURE__ */ Ae("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ p("style", { children: `
         @keyframes skeleton-pulse {
           0%, 100% { opacity: 1; }
@@ -545,7 +564,7 @@ function ke({
           pointerEvents: e ? "auto" : "none"
         },
         children: /* @__PURE__ */ p(
-          be,
+          He,
           {
             blueprint: y,
             baseColor: t.baseColor,
@@ -574,5 +593,5 @@ function ke({
   ] });
 }
 export {
-  ke as AutoSkeleton
+  Fe as AutoSkeleton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-skeleton-react",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Auto-generate skeleton loading screens from your existing React DOM structure",
   "type": "module",
   "main": "dist/auto-skeleton-react.js",
@@ -34,7 +34,7 @@
   "bugs": {
     "url": "https://github.com/ShanukJ/auto-skeleton/issues"
   },
-  "homepage": "https://github.com/ShanukJ/auto-skeleton#readme",
+  "homepage": "https://autoskeleton.shanukj.me",
   "license": "MIT",
   "peerDependencies": {
     "react": ">=18.0.0",