smart-skeleton-loader 1.0.0

package/README.md

@@ -0,0 +1,144 @@
+# react-auto-skeleton
+
+> **The smartest skeleton loader for React.**
+> Automatically generate perfectly matching skeletons by measuring your actual components.
+
+[![npm version](https://img.shields.io/npm/v/react-auto-skeleton.svg)](https://www.npmjs.com/package/react-auto-skeleton)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+`react-auto-skeleton` eliminates the need to manually create and maintain skeleton versions of your components. It renders your actual component responsibly (hidden), measures its layout, and overlays precise skeletons for text, images, and containers.
+
+## ✨ Features
+
+- 📏 **Auto-Measurement**: Measures rendered elements to perfectly match dimensions.
+- 🧠 **Smart Detection**:
+  - **Text**: Detects text blocks and wraps them.
+  - **Content**: Automatically handles `<img>`, `<input>`, `<button>`, `<textarea>`.
+  - **Containers**: **NEW!** Detects cards and sections with borders/shadows and renders a static structural skeleton for them.
+- 🧘 **No Layout Shift**: Preserves the exact container space while loading to prevent CLS (Cumulative Layout Shift).
+- 🎨 **Customizable**: Control colors, border radius, and animations.
+- ♻️ **Template Pattern**: Use your actual components mock data to generate skeletons for data-fetching lists.
+
+## 📦 Installation
+
+```bash
+npm install react-auto-skeleton framer-motion
+# or
+yarn add react-auto-skeleton framer-motion
+```
+
+_Note: `framer-motion` is a peer dependency used for the smooth pulse animations._
+
+## 🚀 Usage
+
+### 1. Basic Example
+
+Wrap your component in `AutoSkeleton` and control the `loading` state.
+
+```tsx
+import { AutoSkeleton } from "react-auto-skeleton";
+
+const UserProfile = ({ loading, user }) => {
+  return (
+    <AutoSkeleton loading={loading}>
+      <div className="card">
+        {/* Use a placeholder fallback so the skeleton knows the size if data is null! */}
+        <img src={user?.avatar || "/placeholder.png"} alt="Avatar" />
+        <h3>{user?.name || "Loading Name..."}</h3>
+        <p>{user?.bio || "This is a long line of text to simulate the bio."}</p>
+        <button>Follow</button>
+      </div>
+    </AutoSkeleton>
+  );
+};
+```
+
+### 2. Data Fetching (The Template Pattern)
+
+When fetching lists, you might start with an empty array. **How can we measure an empty array?**
+
+The solution is the **Template Pattern**: Render "dummy" items while loading. `react-auto-skeleton` will measure these dummies and create the skeleton layout.
+
+```tsx
+const UserList = () => {
+  const { data, isLoading } = useFetchUsers();
+
+  return (
+    <div className="list">
+      {isLoading
+        ? // RENDER 3 TEMPLATES WHILE LOADING
+          Array.from({ length: 3 }).map((_, i) => (
+            <AutoSkeleton key={i} loading={true}>
+              <UserCard
+                name="Template User Name"
+                bio="This is a template bio for measurement."
+                avatar="/placeholder.png"
+              />
+            </AutoSkeleton>
+          ))
+        : // RENDER REAL DATA
+          data.map((user) => <UserCard key={user.id} {...user} />)}
+    </div>
+  );
+};
+```
+
+### 3. Container Detection (Cards)
+
+`react-auto-skeleton` intelligently distinguishes between **Content** and **Containers**.
+
+- **Content** (Text, Images, Buttons) -> Renders as a **Pulsing Gray Box**.
+- **Containers** (Elements with visible `border`, `background-color`, or `box-shadow`) -> Renders as a **Static Clone** (with your exact styles) and **NO** pulse.
+
+This means a "Card" looks like a card (white background, shadow), and the content inside it pulses.
+
+## ⚙️ Configuration
+
+Customize the appearance via the `config` prop:
+
+```tsx
+<AutoSkeleton
+  loading={true}
+  config={{
+    color: "#e0e0e0", // Base color of the skeleton pulse
+    highlightColor: "#f5f5f5", // Shine color
+    borderRadius: "8px", // Global border radius (auto-detects if not set)
+  }}
+>
+  <MyComponent />
+</AutoSkeleton>
+```
+
+## 🧩 API Reference
+
+| Prop       | Type        | Default | Description                                         |
+| ---------- | ----------- | ------- | --------------------------------------------------- |
+| `loading`  | `boolean`   | `true`  | Whether to show the skeleton or the actual content. |
+| `children` | `ReactNode` | -       | The content to measure.                             |
+| `config`   | `object`    | -       | Customization options.                              |
+
+### Config Object
+
+| Key              | Type     | Default   | Description                                          |
+| ---------------- | -------- | --------- | ---------------------------------------------------- |
+| `color`          | `string` | `#eee`    | Background color of primitives.                      |
+| `highlightColor` | `string` | `#f5f5f5` | Animation highlight color.                           |
+| `borderRadius`   | `string` | `4px`     | Fallback radius (Auto-detection is attempted first). |
+
+## 🛠 How It Works
+
+1.  **Invisible Measurement**: When `loading={true}`, your children are rendered in the DOM but hidden using `opacity: 0`. This allows them to take up space and be measured by the browser.
+2.  **Smart Scan**: We use a `TreeWalker` to scan the DOM elements.
+    - If it finds text/images -> It creates a **Primitive Skeleton**.
+    - If it finds a styled container -> It creates a **Container Skeleton**.
+3.  **Overlay**: We render absolute positioned `divs` (using Framer Motion) exactly over the measured elements.
+4.  **No Shift**: Because the hidden content is already holding the space, when `loading` becomes `false`, we simply fade `opacity` to 1. No jumping content!
+
+## ⚠️ Notes
+
+- **Placeholders**: For images, ensure you provide a `src` (even a placeholder) or explicit `width/height` style so the image takes up space to be measured.
+- **Opacity vs Visibility**: We use `opacity: 0` to hide content. This ensures that even elements that might behave strangely with `visibility: hidden` are correctly measured.
+
+## License
+
+MIT © 2026

package/dist/index.cjs

@@ -0,0 +1,247 @@
+'use strict';
+
+var react = require('react');
+var framerMotion = require('framer-motion');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/AutoSkeleton.tsx
+var SkeletonPrimitive = ({
+  width,
+  height,
+  borderRadius = "4px",
+  color = "var(--auto-skeleton-color, #eee)",
+  highlightColor = "var(--auto-skeleton-highlight, #f5f5f5)",
+  style,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      style: {
+        width,
+        height,
+        borderRadius,
+        backgroundColor: color,
+        ...style
+      },
+      animate: {
+        backgroundColor: [color, highlightColor, color]
+      },
+      transition: {
+        duration: 1.5,
+        repeat: Infinity,
+        ease: "easeInOut"
+      },
+      "data-testid": "skeleton",
+      ...props
+    }
+  );
+};
+var AutoSkeleton = ({
+  loading,
+  children,
+  config
+}) => {
+  const theme = config?.theme || "auto";
+  const containerRef = react.useRef(null);
+  const [skeletons, setSkeletons] = react.useState([]);
+  const updateSkeletons = () => {
+    if (!containerRef.current) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const newSkeletons = [];
+    const getSkeletonType = (el) => {
+      const tagName = el.tagName.toLowerCase();
+      const style = window.getComputedStyle(el);
+      if (["img", "input", "button", "textarea", "select"].includes(tagName)) {
+        return { type: "primitive" };
+      }
+      const hasText = Array.from(el.childNodes).some(
+        (n) => n.nodeType === Node.TEXT_NODE && n.textContent?.trim()
+      );
+      if (hasText) return { type: "primitive" };
+      const hasBackground = style.backgroundColor !== "rgba(0, 0, 0, 0)" && style.backgroundColor !== "transparent";
+      const hasBorder = style.borderWidth !== "0px" && style.borderStyle !== "none" && style.borderColor !== "rgba(0, 0, 0, 0)" && style.borderColor !== "transparent";
+      const hasShadow = style.boxShadow !== "none";
+      if (hasBackground || hasBorder || hasShadow) {
+        return {
+          type: "container",
+          styles: {
+            backgroundColor: style.backgroundColor,
+            border: style.border,
+            borderRadius: style.borderRadius,
+            boxShadow: style.boxShadow
+          }
+        };
+      }
+      return null;
+    };
+    const walker = document.createTreeWalker(
+      containerRef.current,
+      NodeFilter.SHOW_ELEMENT,
+      {
+        acceptNode: (node2) => {
+          const el = node2;
+          const style = window.getComputedStyle(el);
+          if (style.display === "none") return NodeFilter.FILTER_REJECT;
+          if (getSkeletonType(el)) return NodeFilter.FILTER_ACCEPT;
+          return NodeFilter.FILTER_SKIP;
+        }
+      }
+    );
+    let node = walker.nextNode();
+    let idx = 0;
+    while (node) {
+      const el = node;
+      const rect = el.getBoundingClientRect();
+      const typeData = getSkeletonType(el);
+      if (typeData) {
+        let borderRadius = config?.borderRadius || typeData.styles?.borderRadius || window.getComputedStyle(el).borderRadius;
+        if (typeData.type === "primitive") {
+          if (borderRadius === "0px" || !borderRadius) {
+            if (window.getComputedStyle(el).borderRadius === "50%" || rect.width === rect.height && rect.width < 50) ;
+            borderRadius = "4px";
+            if (el.tagName.toLowerCase() === "button") borderRadius = "6px";
+            if (el.tagName.toLowerCase() === "img") borderRadius = "4px";
+          }
+        }
+        newSkeletons.push({
+          key: `${idx++}`,
+          type: typeData.type,
+          width: rect.width,
+          height: rect.height,
+          top: rect.top - containerRect.top,
+          left: rect.left - containerRect.left,
+          borderRadius,
+          style: typeData.styles
+        });
+      }
+      node = walker.nextNode();
+    }
+    if (newSkeletons.length === 0 && (containerRect.width > 0 || containerRect.height > 0)) {
+      newSkeletons.push({
+        key: "fallback",
+        type: "primitive",
+        width: containerRect.width,
+        height: containerRect.height,
+        top: 0,
+        left: 0,
+        borderRadius: config?.borderRadius || "4px"
+      });
+    }
+    setSkeletons(newSkeletons);
+  };
+  react.useEffect(() => {
+    if (!containerRef.current) return;
+    updateSkeletons();
+    const observer = new ResizeObserver(() => {
+      updateSkeletons();
+    });
+    observer.observe(containerRef.current);
+    const mutationObserver = new MutationObserver(() => updateSkeletons());
+    mutationObserver.observe(containerRef.current, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      observer.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [loading, children]);
+  const getEffectiveColors = () => {
+    if (config?.color || config?.highlightColor) {
+      return {
+        color: config.color,
+        highlightColor: config.highlightColor
+      };
+    }
+    if (theme === "dark" && (config?.darkColor || config?.darkHighlightColor)) {
+      return {
+        color: config.darkColor,
+        highlightColor: config.darkHighlightColor
+      };
+    }
+    if (theme === "light" && (config?.lightColor || config?.lightHighlightColor)) {
+      return {
+        color: config.lightColor,
+        highlightColor: config.lightHighlightColor
+      };
+    }
+    return { color: void 0, highlightColor: void 0 };
+  };
+  const effectiveColors = getEffectiveColors();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: { position: "relative", display: "inline-block", width: "auto" },
+      ...theme !== "auto" ? { "data-skeleton-theme": theme } : {},
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: containerRef,
+            style: {
+              opacity: loading ? 0 : 1,
+              transition: "opacity 0.2s ease"
+              // Smooth transition when loading finishes
+            },
+            "aria-hidden": loading,
+            children
+          }
+        ),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none"
+            },
+            children: skeletons.map((sk) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: { position: "absolute", top: sk.top, left: sk.left },
+                children: sk.type === "primitive" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  SkeletonPrimitive,
+                  {
+                    width: sk.width,
+                    height: sk.height,
+                    borderRadius: sk.borderRadius,
+                    color: effectiveColors.color,
+                    highlightColor: effectiveColors.highlightColor
+                  }
+                ) : (
+                  /* Container Clone: Renders static style */
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        width: sk.width,
+                        height: sk.height,
+                        borderRadius: sk.borderRadius,
+                        ...sk.style,
+                        // Apply captured container styles
+                        // Ensure it doesn't hide children if z-index issues arise,
+                        // but since we render in DOM order, children come later and sit on top.
+                        boxSizing: "border-box"
+                      }
+                    }
+                  )
+                )
+              },
+              sk.key
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.AutoSkeleton = AutoSkeleton;
+exports.SkeletonPrimitive = SkeletonPrimitive;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SkeletonPrimitive.tsx","../src/AutoSkeleton.tsx"],"names":["jsx","motion","useRef","useState","node","useEffect","jsxs"],"mappings":";;;;;;;AAWO,IAAM,oBAAsD,CAAC;AAAA,EAClE,KAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,GAAe,KAAA;AAAA,EACf,KAAA,GAAQ,kCAAA;AAAA,EACR,cAAA,GAAiB,yCAAA;AAAA,EACjB,KAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,uBACEA,cAAA;AAAA,IAACC,mBAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,KAAA,EAAO;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,YAAA;AAAA,QACA,eAAA,EAAiB,KAAA;AAAA,QACjB,GAAG;AAAA,OACL;AAAA,MACA,OAAA,EAAS;AAAA,QACP,eAAA,EAAiB,CAAC,KAAA,EAAO,cAAA,EAAgB,KAAK;AAAA,OAChD;AAAA,MACA,UAAA,EAAY;AAAA,QACV,QAAA,EAAU,GAAA;AAAA,QACV,MAAA,EAAQ,QAAA;AAAA,QACR,IAAA,EAAM;AAAA,OACR;AAAA,MACA,aAAA,EAAY,UAAA;AAAA,MACX,GAAG;AAAA;AAAA,GACN;AAEJ;ACtBO,IAAM,eAA4C,CAAC;AAAA,EACxD,OAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,KAAA,GAAQ,QAAQ,KAAA,IAAS,MAAA;AAC/B,EAAA,MAAM,YAAA,GAAeC,aAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,cAAA,CAWhC,EAAE,CAAA;AAEJ,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,IAAI,CAAC,aAAa,OAAA,EAAS;AAE3B,IAAA,MAAM,aAAA,GAAgB,YAAA,CAAa,OAAA,CAAQ,qBAAA,EAAsB;AACjE,IAAA,MAAM,eAAiC,EAAC;AAGxC,IAAA,MAAM,eAAA,GAAkB,CACtB,EAAA,KAIU;AACV,MAAA,MAAM,OAAA,GAAU,EAAA,CAAG,OAAA,CAAQ,WAAA,EAAY;AACvC,MAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,gBAAA,CAAiB,EAAE,CAAA;AAGxC,MAAA,IAAI,CAAC,OAAO,OAAA,EAAS,QAAA,EAAU,YAAY,QAAQ,CAAA,CAAE,QAAA,CAAS,OAAO,CAAA,EAAG;AACtE,QAAA,OAAO,EAAE,MAAM,WAAA,EAAY;AAAA,MAC7B;AAGA,MAAA,MAAM,OAAA,GAAU,KAAA,CAAM,IAAA,CAAK,EAAA,CAAG,UAAU,CAAA,CAAE,IAAA;AAAA,QACxC,CAAC,MAAM,CAAA,CAAE,QAAA,KAAa,KAAK,SAAA,IAAa,CAAA,CAAE,aAAa,IAAA;AAAK,OAC9D;AACA,MAAA,IAAI,OAAA,EAAS,OAAO,EAAE,IAAA,EAAM,WAAA,EAAY;AAIxC,MAAA,MAAM,aAAA,GACJ,KAAA,CAAM,eAAA,KAAoB,kBAAA,IAC1B,MAAM,eAAA,KAAoB,aAAA;AAC5B,MAAA,MAAM,SAAA,GACJ,KAAA,CAAM,WAAA,KAAgB,KAAA,IACtB,KAAA,CAAM,WAAA,KAAgB,MAAA,IACtB,KAAA,CAAM,WAAA,KAAgB,kBAAA,IACtB,KAAA,CAAM,WAAA,KAAgB,aAAA;AACxB,MAAA,MAAM,SAAA,GAAY,MAAM,SAAA,KAAc,MAAA;AAEtC,MAAA,IAAI,aAAA,IAAiB,aAAa,SAAA,EAAW;AAC3C,QAAA,OAAO;AAAA,UACL,IAAA,EAAM,WAAA;AAAA,UACN,MAAA,EAAQ;AAAA,YACN,iBAAiB,KAAA,CAAM,eAAA;AAAA,YACvB,QAAQ,KAAA,CAAM,MAAA;AAAA,YACd,cAAc,KAAA,CAAM,YAAA;AAAA,YACpB,WAAW,KAAA,CAAM;AAAA;AACnB,SACF;AAAA,MACF;AAEA,MAAA,OAAO,IAAA;AAAA,IACT,CAAA;AAGA,IAAA,MAAM,SAAS,QAAA,CAAS,gBAAA;AAAA,MACtB,YAAA,CAAa,OAAA;AAAA,MACb,UAAA,CAAW,YAAA;AAAA,MACX;AAAA,QACE,UAAA,EAAY,CAACC,KAAAA,KAAS;AACpB,UAAA,MAAM,EAAA,GAAKA,KAAAA;AACX,UAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,gBAAA,CAAiB,EAAE,CAAA;AACxC,UAAA,IAAI,KAAA,CAAM,OAAA,KAAY,MAAA,EAAQ,OAAO,UAAA,CAAW,aAAA;AAKhD,UAAA,IAAI,eAAA,CAAgB,EAAE,CAAA,EAAG,OAAO,UAAA,CAAW,aAAA;AAE3C,UAAA,OAAO,UAAA,CAAW,WAAA;AAAA,QACpB;AAAA;AACF,KACF;AAEA,IAAA,IAAI,IAAA,GAAO,OAAO,QAAA,EAAS;AAC3B,IAAA,IAAI,GAAA,GAAM,CAAA;AACV,IAAA,OAAO,IAAA,EAAM;AACX,MAAA,MAAM,EAAA,GAAK,IAAA;AACX,MAAA,MAAM,IAAA,GAAO,GAAG,qBAAA,EAAsB;AACtC,MAAA,MAAM,QAAA,GAAW,gBAAgB,EAAE,CAAA;AAEnC,MAAA,IAAI,QAAA,EAAU;AAEZ,QAAA,IAAI,YAAA,GACF,QAAQ,YAAA,IACR,QAAA,CAAS,QAAQ,YAAA,IACjB,MAAA,CAAO,gBAAA,CAAiB,EAAE,CAAA,CAAE,YAAA;AAE9B,QAAA,IAAI,QAAA,CAAS,SAAS,WAAA,EAAa;AAEjC,UAAA,IAAI,YAAA,KAAiB,KAAA,IAAS,CAAC,YAAA,EAAc;AAC3C,YAAA,IACE,MAAA,CAAO,gBAAA,CAAiB,EAAE,CAAA,CAAE,YAAA,KAAiB,KAAA,IAC5C,IAAA,CAAK,KAAA,KAAU,IAAA,CAAK,MAAA,IAAU,IAAA,CAAK,KAAA,GAAQ,EAAA,EAC5C;AAGF,YAAA,YAAA,GAAe,KAAA;AACf,YAAA,IAAI,EAAA,CAAG,OAAA,CAAQ,WAAA,EAAY,KAAM,UAAU,YAAA,GAAe,KAAA;AAC1D,YAAA,IAAI,EAAA,CAAG,OAAA,CAAQ,WAAA,EAAY,KAAM,OAAO,YAAA,GAAe,KAAA;AAAA,UACzD;AAAA,QACF;AAEA,QAAA,YAAA,CAAa,IAAA,CAAK;AAAA,UAChB,GAAA,EAAK,GAAG,GAAA,EAAK,CAAA,CAAA;AAAA,UACb,MAAM,QAAA,CAAS,IAAA;AAAA,UACf,OAAO,IAAA,CAAK,KAAA;AAAA,UACZ,QAAQ,IAAA,CAAK,MAAA;AAAA,UACb,GAAA,EAAK,IAAA,CAAK,GAAA,GAAM,aAAA,CAAc,GAAA;AAAA,UAC9B,IAAA,EAAM,IAAA,CAAK,IAAA,GAAO,aAAA,CAAc,IAAA;AAAA,UAChC,YAAA;AAAA,UACA,OAAO,QAAA,CAAS;AAAA,SACjB,CAAA;AAAA,MACH;AAEA,MAAA,IAAA,GAAO,OAAO,QAAA,EAAS;AAAA,IACzB;AAKA,IAAA,IACE,YAAA,CAAa,WAAW,CAAA,KACvB,aAAA,CAAc,QAAQ,CAAA,IAAK,aAAA,CAAc,SAAS,CAAA,CAAA,EACnD;AACA,MAAA,YAAA,CAAa,IAAA,CAAK;AAAA,QAChB,GAAA,EAAK,UAAA;AAAA,QACL,IAAA,EAAM,WAAA;AAAA,QACN,OAAO,aAAA,CAAc,KAAA;AAAA,QACrB,QAAQ,aAAA,CAAc,MAAA;AAAA,QACtB,GAAA,EAAK,CAAA;AAAA,QACL,IAAA,EAAM,CAAA;AAAA,QACN,YAAA,EAAe,QAAQ,YAAA,IAA2B;AAAA,OACnD,CAAA;AAAA,IACH;AAEA,IAAA,YAAA,CAAa,YAAY,CAAA;AAAA,EAC3B,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,aAAa,OAAA,EAAS;AAG3B,IAAA,eAAA,EAAgB;AAEhB,IAAA,MAAM,QAAA,GAAW,IAAI,cAAA,CAAe,MAAM;AACxC,MAAA,eAAA,EAAgB;AAAA,IAClB,CAAC,CAAA;AAED,IAAA,QAAA,CAAS,OAAA,CAAQ,aAAa,OAAO,CAAA;AAGrC,IAAA,MAAM,gBAAA,GAAmB,IAAI,gBAAA,CAAiB,MAAM,iBAAiB,CAAA;AACrE,IAAA,gBAAA,CAAiB,OAAA,CAAQ,aAAa,OAAA,EAAS;AAAA,MAC7C,SAAA,EAAW,IAAA;AAAA,MACX,OAAA,EAAS,IAAA;AAAA,MACT,aAAA,EAAe;AAAA,KAChB,CAAA;AAED,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,UAAA,EAAW;AACpB,MAAA,gBAAA,CAAiB,UAAA,EAAW;AAAA,IAC9B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,QAAQ,CAAC,CAAA;AAGtB,EAAA,MAAM,qBAAqB,MAAM;AAE/B,IAAA,IAAI,MAAA,EAAQ,KAAA,IAAS,MAAA,EAAQ,cAAA,EAAgB;AAC3C,MAAA,OAAO;AAAA,QACL,OAAO,MAAA,CAAO,KAAA;AAAA,QACd,gBAAgB,MAAA,CAAO;AAAA,OACzB;AAAA,IACF;AAEA,IAAA,IAAI,KAAA,KAAU,MAAA,KAAW,MAAA,EAAQ,SAAA,IAAa,QAAQ,kBAAA,CAAA,EAAqB;AACzE,MAAA,OAAO;AAAA,QACL,OAAO,MAAA,CAAO,SAAA;AAAA,QACd,gBAAgB,MAAA,CAAO;AAAA,OACzB;AAAA,IACF;AACA,IAAA,IACE,KAAA,KAAU,OAAA,KACT,MAAA,EAAQ,UAAA,IAAc,QAAQ,mBAAA,CAAA,EAC/B;AACA,MAAA,OAAO;AAAA,QACL,OAAO,MAAA,CAAO,UAAA;AAAA,QACd,gBAAgB,MAAA,CAAO;AAAA,OACzB;AAAA,IACF;AAEA,IAAA,OAAO,EAAE,KAAA,EAAO,MAAA,EAAW,cAAA,EAAgB,MAAA,EAAU;AAAA,EACvD,CAAA;AAEA,EAAA,MAAM,kBAAkB,kBAAA,EAAmB;AAE3C,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,QAAA,EAAU,YAAY,OAAA,EAAS,cAAA,EAAgB,OAAO,MAAA,EAAO;AAAA,MACrE,GAAI,KAAA,KAAU,MAAA,GAAS,EAAE,qBAAA,EAAuB,KAAA,KAAU,EAAC;AAAA,MAE5D,QAAA,EAAA;AAAA,wBAAAN,cAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,YAAA;AAAA,YACL,KAAA,EAAO;AAAA,cACL,OAAA,EAAS,UAAU,CAAA,GAAI,CAAA;AAAA,cACvB,UAAA,EAAY;AAAA;AAAA,aACd;AAAA,YACA,aAAA,EAAa,OAAA;AAAA,YAEZ;AAAA;AAAA,SACH;AAAA,QAEC,2BACCA,cAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO;AAAA,cACL,QAAA,EAAU,UAAA;AAAA,cACV,GAAA,EAAK,CAAA;AAAA,cACL,IAAA,EAAM,CAAA;AAAA,cACN,KAAA,EAAO,MAAA;AAAA,cACP,MAAA,EAAQ,MAAA;AAAA,cACR,aAAA,EAAe;AAAA,aACjB;AAAA,YAEC,QAAA,EAAA,SAAA,CAAU,GAAA,CAAI,CAAC,EAAA,qBACdA,cAAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBAEC,KAAA,EAAO,EAAE,QAAA,EAAU,UAAA,EAAY,KAAK,EAAA,CAAG,GAAA,EAAK,IAAA,EAAM,EAAA,CAAG,IAAA,EAAK;AAAA,gBAEzD,QAAA,EAAA,EAAA,CAAG,IAAA,KAAS,WAAA,mBACXA,cAAAA;AAAA,kBAAC,iBAAA;AAAA,kBAAA;AAAA,oBACC,OAAO,EAAA,CAAG,KAAA;AAAA,oBACV,QAAQ,EAAA,CAAG,MAAA;AAAA,oBACX,cAAc,EAAA,CAAG,YAAA;AAAA,oBACjB,OAAO,eAAA,CAAgB,KAAA;AAAA,oBACvB,gBAAgB,eAAA,CAAgB;AAAA;AAAA,iBAClC;AAAA;AAAA,kCAGAA,cAAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBACC,KAAA,EAAO;AAAA,wBACL,OAAO,EAAA,CAAG,KAAA;AAAA,wBACV,QAAQ,EAAA,CAAG,MAAA;AAAA,wBACX,cAAc,EAAA,CAAG,YAAA;AAAA,wBACjB,GAAG,EAAA,CAAG,KAAA;AAAA;AAAA;AAAA;AAAA,wBAGN,SAAA,EAAW;AAAA;AACb;AAAA;AACF;AAAA,eAAA;AAAA,cAvBG,EAAA,CAAG;AAAA,aA0BX;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ","file":"index.cjs","sourcesContent":["import React from \"react\";\nimport { motion, HTMLMotionProps } from \"framer-motion\";\n\nexport interface SkeletonPrimitiveProps extends HTMLMotionProps<\"div\"> {\n  width?: string | number;\n  height?: string | number;\n  borderRadius?: string | number;\n  color?: string;\n  highlightColor?: string;\n}\n\nexport const SkeletonPrimitive: React.FC<SkeletonPrimitiveProps> = ({\n  width,\n  height,\n  borderRadius = \"4px\",\n  color = \"var(--auto-skeleton-color, #eee)\",\n  highlightColor = \"var(--auto-skeleton-highlight, #f5f5f5)\",\n  style,\n  ...props\n}) => {\n  return (\n    <motion.div\n      style={{\n        width,\n        height,\n        borderRadius,\n        backgroundColor: color,\n        ...style,\n      }}\n      animate={{\n        backgroundColor: [color, highlightColor, color],\n      }}\n      transition={{\n        duration: 1.5,\n        repeat: Infinity,\n        ease: \"easeInOut\",\n      }}\n      data-testid=\"skeleton\"\n      {...props}\n    />\n  );\n};\n","import React, { useRef, useEffect, useState, ReactNode } from \"react\";\nimport { SkeletonPrimitive } from \"./SkeletonPrimitive\";\n\nexport interface AutoSkeletonProps {\n  loading: boolean;\n  children: ReactNode;\n  config?: {\n    color?: string;\n    highlightColor?: string;\n    borderRadius?: string | number;\n    theme?: \"light\" | \"dark\" | \"auto\";\n    // Theme-specific colors (override CSS variables)\n    lightColor?: string;\n    lightHighlightColor?: string;\n    darkColor?: string;\n    darkHighlightColor?: string;\n  };\n}\n\nexport const AutoSkeleton: React.FC<AutoSkeletonProps> = ({\n  loading,\n  children,\n  config,\n}) => {\n  const theme = config?.theme || \"auto\";\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [skeletons, setSkeletons] = useState<\n    Array<{\n      key: string;\n      type: \"primitive\" | \"container\";\n      width: number;\n      height: number;\n      top: number;\n      left: number;\n      borderRadius: string;\n      style?: React.CSSProperties; // For container styles\n    }>\n  >([]);\n\n  const updateSkeletons = () => {\n    if (!containerRef.current) return;\n\n    const containerRect = containerRef.current.getBoundingClientRect();\n    const newSkeletons: typeof skeletons = [];\n\n    // Helper to categorize node\n    const getSkeletonType = (\n      el: Element,\n    ): {\n      type: \"primitive\" | \"container\";\n      styles?: React.CSSProperties;\n    } | null => {\n      const tagName = el.tagName.toLowerCase();\n      const style = window.getComputedStyle(el);\n\n      // 1. Atomic Content (always pulse)\n      if ([\"img\", \"input\", \"button\", \"textarea\", \"select\"].includes(tagName)) {\n        return { type: \"primitive\" };\n      }\n\n      // 2. Text Content (always pulse)\n      const hasText = Array.from(el.childNodes).some(\n        (n) => n.nodeType === Node.TEXT_NODE && n.textContent?.trim(),\n      );\n      if (hasText) return { type: \"primitive\" };\n\n      // 3. Structural Container (static clone)\n      // If it has visible styles but no direct text => it's a container\n      const hasBackground =\n        style.backgroundColor !== \"rgba(0, 0, 0, 0)\" &&\n        style.backgroundColor !== \"transparent\";\n      const hasBorder =\n        style.borderWidth !== \"0px\" &&\n        style.borderStyle !== \"none\" &&\n        style.borderColor !== \"rgba(0, 0, 0, 0)\" &&\n        style.borderColor !== \"transparent\";\n      const hasShadow = style.boxShadow !== \"none\";\n\n      if (hasBackground || hasBorder || hasShadow) {\n        return {\n          type: \"container\",\n          styles: {\n            backgroundColor: style.backgroundColor,\n            border: style.border,\n            borderRadius: style.borderRadius,\n            boxShadow: style.boxShadow,\n          },\n        };\n      }\n\n      return null;\n    };\n\n    // Traverse\n    const walker = document.createTreeWalker(\n      containerRef.current,\n      NodeFilter.SHOW_ELEMENT,\n      {\n        acceptNode: (node) => {\n          const el = node as Element;\n          const style = window.getComputedStyle(el);\n          if (style.display === \"none\") return NodeFilter.FILTER_REJECT;\n\n          // If it matches a type, accept it.\n          // Note: We want to accept containers AND traverse their children.\n          // FILTER_ACCEPT does both.\n          if (getSkeletonType(el)) return NodeFilter.FILTER_ACCEPT;\n\n          return NodeFilter.FILTER_SKIP;\n        },\n      },\n    );\n\n    let node = walker.nextNode();\n    let idx = 0;\n    while (node) {\n      const el = node as Element;\n      const rect = el.getBoundingClientRect();\n      const typeData = getSkeletonType(el);\n\n      if (typeData) {\n        // Determine border radius logic\n        let borderRadius =\n          config?.borderRadius ||\n          typeData.styles?.borderRadius ||\n          window.getComputedStyle(el).borderRadius;\n\n        if (typeData.type === \"primitive\") {\n          // Auto-detect circle for rounded primitives\n          if (borderRadius === \"0px\" || !borderRadius) {\n            if (\n              window.getComputedStyle(el).borderRadius === \"50%\" ||\n              (rect.width === rect.height && rect.width < 50)\n            ) {\n              // Keep heuristic or default\n            }\n            borderRadius = \"4px\";\n            if (el.tagName.toLowerCase() === \"button\") borderRadius = \"6px\";\n            if (el.tagName.toLowerCase() === \"img\") borderRadius = \"4px\";\n          }\n        }\n\n        newSkeletons.push({\n          key: `${idx++}`,\n          type: typeData.type,\n          width: rect.width,\n          height: rect.height,\n          top: rect.top - containerRect.top,\n          left: rect.left - containerRect.left,\n          borderRadius: borderRadius as string,\n          style: typeData.styles,\n        });\n      }\n\n      node = walker.nextNode();\n    }\n\n    // If no content nodes found, but container has size (maybe a canvas or simple div w/ background),\n    // Fallback? Or maybe user wants the single block behavior.\n    // Let's add that fallback if newSkeletons is empty but container has dimension.\n    if (\n      newSkeletons.length === 0 &&\n      (containerRect.width > 0 || containerRect.height > 0)\n    ) {\n      newSkeletons.push({\n        key: \"fallback\",\n        type: \"primitive\",\n        width: containerRect.width,\n        height: containerRect.height,\n        top: 0,\n        left: 0,\n        borderRadius: (config?.borderRadius as string) || \"4px\",\n      });\n    }\n\n    setSkeletons(newSkeletons);\n  };\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    // Initial measure\n    updateSkeletons();\n\n    const observer = new ResizeObserver(() => {\n      updateSkeletons();\n    });\n\n    observer.observe(containerRef.current);\n    // Also observe children mutations if possible, but ResizeObserver on container catches layout changes often.\n    // For robust child changes:\n    const mutationObserver = new MutationObserver(() => updateSkeletons());\n    mutationObserver.observe(containerRef.current, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n\n    return () => {\n      observer.disconnect();\n      mutationObserver.disconnect();\n    };\n  }, [loading, children]); // Re-scan when children change\n\n  // Determine effective colors based on theme\n  const getEffectiveColors = () => {\n    // If user passed explicit color/highlightColor, use those\n    if (config?.color || config?.highlightColor) {\n      return {\n        color: config.color,\n        highlightColor: config.highlightColor,\n      };\n    }\n    // If theme-specific colors are provided, use them\n    if (theme === \"dark\" && (config?.darkColor || config?.darkHighlightColor)) {\n      return {\n        color: config.darkColor,\n        highlightColor: config.darkHighlightColor,\n      };\n    }\n    if (\n      theme === \"light\" &&\n      (config?.lightColor || config?.lightHighlightColor)\n    ) {\n      return {\n        color: config.lightColor,\n        highlightColor: config.lightHighlightColor,\n      };\n    }\n    // Otherwise, let CSS variables handle it (undefined = use CSS var defaults)\n    return { color: undefined, highlightColor: undefined };\n  };\n\n  const effectiveColors = getEffectiveColors();\n\n  return (\n    <div\n      style={{ position: \"relative\", display: \"inline-block\", width: \"auto\" }}\n      {...(theme !== \"auto\" ? { \"data-skeleton-theme\": theme } : {})}\n    >\n      <div\n        ref={containerRef}\n        style={{\n          opacity: loading ? 0 : 1,\n          transition: \"opacity 0.2s ease\", // Smooth transition when loading finishes\n        }}\n        aria-hidden={loading}\n      >\n        {children}\n      </div>\n\n      {loading && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            width: \"100%\",\n            height: \"100%\",\n            pointerEvents: \"none\",\n          }}\n        >\n          {skeletons.map((sk) => (\n            <div\n              key={sk.key}\n              style={{ position: \"absolute\", top: sk.top, left: sk.left }}\n            >\n              {sk.type === \"primitive\" ? (\n                <SkeletonPrimitive\n                  width={sk.width}\n                  height={sk.height}\n                  borderRadius={sk.borderRadius}\n                  color={effectiveColors.color}\n                  highlightColor={effectiveColors.highlightColor}\n                />\n              ) : (\n                /* Container Clone: Renders static style */\n                <div\n                  style={{\n                    width: sk.width,\n                    height: sk.height,\n                    borderRadius: sk.borderRadius,\n                    ...sk.style, // Apply captured container styles\n                    // Ensure it doesn't hide children if z-index issues arise,\n                    // but since we render in DOM order, children come later and sit on top.\n                    boxSizing: \"border-box\",\n                  }}\n                />\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/index.d.cts

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+
+interface AutoSkeletonProps {
+    loading: boolean;
+    children: ReactNode;
+    config?: {
+        color?: string;
+        highlightColor?: string;
+        borderRadius?: string | number;
+        theme?: "light" | "dark" | "auto";
+        lightColor?: string;
+        lightHighlightColor?: string;
+        darkColor?: string;
+        darkHighlightColor?: string;
+    };
+}
+declare const AutoSkeleton: React.FC<AutoSkeletonProps>;
+
+interface SkeletonPrimitiveProps extends HTMLMotionProps<"div"> {
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string | number;
+    color?: string;
+    highlightColor?: string;
+}
+declare const SkeletonPrimitive: React.FC<SkeletonPrimitiveProps>;
+
+export { AutoSkeleton, type AutoSkeletonProps, SkeletonPrimitive, type SkeletonPrimitiveProps };

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+
+interface AutoSkeletonProps {
+    loading: boolean;
+    children: ReactNode;
+    config?: {
+        color?: string;
+        highlightColor?: string;
+        borderRadius?: string | number;
+        theme?: "light" | "dark" | "auto";
+        lightColor?: string;
+        lightHighlightColor?: string;
+        darkColor?: string;
+        darkHighlightColor?: string;
+    };
+}
+declare const AutoSkeleton: React.FC<AutoSkeletonProps>;
+
+interface SkeletonPrimitiveProps extends HTMLMotionProps<"div"> {
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string | number;
+    color?: string;
+    highlightColor?: string;
+}
+declare const SkeletonPrimitive: React.FC<SkeletonPrimitiveProps>;
+
+export { AutoSkeleton, type AutoSkeletonProps, SkeletonPrimitive, type SkeletonPrimitiveProps };

package/dist/index.js

@@ -0,0 +1,244 @@
+import { useRef, useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/AutoSkeleton.tsx
+var SkeletonPrimitive = ({
+  width,
+  height,
+  borderRadius = "4px",
+  color = "var(--auto-skeleton-color, #eee)",
+  highlightColor = "var(--auto-skeleton-highlight, #f5f5f5)",
+  style,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      style: {
+        width,
+        height,
+        borderRadius,
+        backgroundColor: color,
+        ...style
+      },
+      animate: {
+        backgroundColor: [color, highlightColor, color]
+      },
+      transition: {
+        duration: 1.5,
+        repeat: Infinity,
+        ease: "easeInOut"
+      },
+      "data-testid": "skeleton",
+      ...props
+    }
+  );
+};
+var AutoSkeleton = ({
+  loading,
+  children,
+  config
+}) => {
+  const theme = config?.theme || "auto";
+  const containerRef = useRef(null);
+  const [skeletons, setSkeletons] = useState([]);
+  const updateSkeletons = () => {
+    if (!containerRef.current) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const newSkeletons = [];
+    const getSkeletonType = (el) => {
+      const tagName = el.tagName.toLowerCase();
+      const style = window.getComputedStyle(el);
+      if (["img", "input", "button", "textarea", "select"].includes(tagName)) {
+        return { type: "primitive" };
+      }
+      const hasText = Array.from(el.childNodes).some(
+        (n) => n.nodeType === Node.TEXT_NODE && n.textContent?.trim()
+      );
+      if (hasText) return { type: "primitive" };
+      const hasBackground = style.backgroundColor !== "rgba(0, 0, 0, 0)" && style.backgroundColor !== "transparent";
+      const hasBorder = style.borderWidth !== "0px" && style.borderStyle !== "none" && style.borderColor !== "rgba(0, 0, 0, 0)" && style.borderColor !== "transparent";
+      const hasShadow = style.boxShadow !== "none";
+      if (hasBackground || hasBorder || hasShadow) {
+        return {
+          type: "container",
+          styles: {
+            backgroundColor: style.backgroundColor,
+            border: style.border,
+            borderRadius: style.borderRadius,
+            boxShadow: style.boxShadow
+          }
+        };
+      }
+      return null;
+    };
+    const walker = document.createTreeWalker(
+      containerRef.current,
+      NodeFilter.SHOW_ELEMENT,
+      {
+        acceptNode: (node2) => {
+          const el = node2;
+          const style = window.getComputedStyle(el);
+          if (style.display === "none") return NodeFilter.FILTER_REJECT;
+          if (getSkeletonType(el)) return NodeFilter.FILTER_ACCEPT;
+          return NodeFilter.FILTER_SKIP;
+        }
+      }
+    );
+    let node = walker.nextNode();
+    let idx = 0;
+    while (node) {
+      const el = node;
+      const rect = el.getBoundingClientRect();
+      const typeData = getSkeletonType(el);
+      if (typeData) {
+        let borderRadius = config?.borderRadius || typeData.styles?.borderRadius || window.getComputedStyle(el).borderRadius;
+        if (typeData.type === "primitive") {
+          if (borderRadius === "0px" || !borderRadius) {
+            if (window.getComputedStyle(el).borderRadius === "50%" || rect.width === rect.height && rect.width < 50) ;
+            borderRadius = "4px";
+            if (el.tagName.toLowerCase() === "button") borderRadius = "6px";
+            if (el.tagName.toLowerCase() === "img") borderRadius = "4px";
+          }
+        }
+        newSkeletons.push({
+          key: `${idx++}`,
+          type: typeData.type,
+          width: rect.width,
+          height: rect.height,
+          top: rect.top - containerRect.top,
+          left: rect.left - containerRect.left,
+          borderRadius,
+          style: typeData.styles
+        });
+      }
+      node = walker.nextNode();
+    }
+    if (newSkeletons.length === 0 && (containerRect.width > 0 || containerRect.height > 0)) {
+      newSkeletons.push({
+        key: "fallback",
+        type: "primitive",
+        width: containerRect.width,
+        height: containerRect.height,
+        top: 0,
+        left: 0,
+        borderRadius: config?.borderRadius || "4px"
+      });
+    }
+    setSkeletons(newSkeletons);
+  };
+  useEffect(() => {
+    if (!containerRef.current) return;
+    updateSkeletons();
+    const observer = new ResizeObserver(() => {
+      updateSkeletons();
+    });
+    observer.observe(containerRef.current);
+    const mutationObserver = new MutationObserver(() => updateSkeletons());
+    mutationObserver.observe(containerRef.current, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      observer.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [loading, children]);
+  const getEffectiveColors = () => {
+    if (config?.color || config?.highlightColor) {
+      return {
+        color: config.color,
+        highlightColor: config.highlightColor
+      };
+    }
+    if (theme === "dark" && (config?.darkColor || config?.darkHighlightColor)) {
+      return {
+        color: config.darkColor,
+        highlightColor: config.darkHighlightColor
+      };
+    }
+    if (theme === "light" && (config?.lightColor || config?.lightHighlightColor)) {
+      return {
+        color: config.lightColor,
+        highlightColor: config.lightHighlightColor
+      };
+    }
+    return { color: void 0, highlightColor: void 0 };
+  };
+  const effectiveColors = getEffectiveColors();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { position: "relative", display: "inline-block", width: "auto" },
+      ...theme !== "auto" ? { "data-skeleton-theme": theme } : {},
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            style: {
+              opacity: loading ? 0 : 1,
+              transition: "opacity 0.2s ease"
+              // Smooth transition when loading finishes
+            },
+            "aria-hidden": loading,
+            children
+          }
+        ),
+        loading && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none"
+            },
+            children: skeletons.map((sk) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { position: "absolute", top: sk.top, left: sk.left },
+                children: sk.type === "primitive" ? /* @__PURE__ */ jsx(
+                  SkeletonPrimitive,
+                  {
+                    width: sk.width,
+                    height: sk.height,
+                    borderRadius: sk.borderRadius,
+                    color: effectiveColors.color,
+                    highlightColor: effectiveColors.highlightColor
+                  }
+                ) : (
+                  /* Container Clone: Renders static style */
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: sk.width,
+                        height: sk.height,
+                        borderRadius: sk.borderRadius,
+                        ...sk.style,
+                        // Apply captured container styles
+                        // Ensure it doesn't hide children if z-index issues arise,
+                        // but since we render in DOM order, children come later and sit on top.
+                        boxSizing: "border-box"
+                      }
+                    }
+                  )
+                )
+              },
+              sk.key
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { AutoSkeleton, SkeletonPrimitive };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SkeletonPrimitive.tsx","../src/AutoSkeleton.tsx"],"names":["node","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import React from \"react\";\nimport { motion, HTMLMotionProps } from \"framer-motion\";\n\nexport interface SkeletonPrimitiveProps extends HTMLMotionProps<\"div\"> {\n  width?: string | number;\n  height?: string | number;\n  borderRadius?: string | number;\n  color?: string;\n  highlightColor?: string;\n}\n\nexport const SkeletonPrimitive: React.FC<SkeletonPrimitiveProps> = ({\n  width,\n  height,\n  borderRadius = \"4px\",\n  color = \"var(--auto-skeleton-color, #eee)\",\n  highlightColor = \"var(--auto-skeleton-highlight, #f5f5f5)\",\n  style,\n  ...props\n}) => {\n  return (\n    <motion.div\n      style={{\n        width,\n        height,\n        borderRadius,\n        backgroundColor: color,\n        ...style,\n      }}\n      animate={{\n        backgroundColor: [color, highlightColor, color],\n      }}\n      transition={{\n        duration: 1.5,\n        repeat: Infinity,\n        ease: \"easeInOut\",\n      }}\n      data-testid=\"skeleton\"\n      {...props}\n    />\n  );\n};\n","import React, { useRef, useEffect, useState, ReactNode } from \"react\";\nimport { SkeletonPrimitive } from \"./SkeletonPrimitive\";\n\nexport interface AutoSkeletonProps {\n  loading: boolean;\n  children: ReactNode;\n  config?: {\n    color?: string;\n    highlightColor?: string;\n    borderRadius?: string | number;\n    theme?: \"light\" | \"dark\" | \"auto\";\n    // Theme-specific colors (override CSS variables)\n    lightColor?: string;\n    lightHighlightColor?: string;\n    darkColor?: string;\n    darkHighlightColor?: string;\n  };\n}\n\nexport const AutoSkeleton: React.FC<AutoSkeletonProps> = ({\n  loading,\n  children,\n  config,\n}) => {\n  const theme = config?.theme || \"auto\";\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [skeletons, setSkeletons] = useState<\n    Array<{\n      key: string;\n      type: \"primitive\" | \"container\";\n      width: number;\n      height: number;\n      top: number;\n      left: number;\n      borderRadius: string;\n      style?: React.CSSProperties; // For container styles\n    }>\n  >([]);\n\n  const updateSkeletons = () => {\n    if (!containerRef.current) return;\n\n    const containerRect = containerRef.current.getBoundingClientRect();\n    const newSkeletons: typeof skeletons = [];\n\n    // Helper to categorize node\n    const getSkeletonType = (\n      el: Element,\n    ): {\n      type: \"primitive\" | \"container\";\n      styles?: React.CSSProperties;\n    } | null => {\n      const tagName = el.tagName.toLowerCase();\n      const style = window.getComputedStyle(el);\n\n      // 1. Atomic Content (always pulse)\n      if ([\"img\", \"input\", \"button\", \"textarea\", \"select\"].includes(tagName)) {\n        return { type: \"primitive\" };\n      }\n\n      // 2. Text Content (always pulse)\n      const hasText = Array.from(el.childNodes).some(\n        (n) => n.nodeType === Node.TEXT_NODE && n.textContent?.trim(),\n      );\n      if (hasText) return { type: \"primitive\" };\n\n      // 3. Structural Container (static clone)\n      // If it has visible styles but no direct text => it's a container\n      const hasBackground =\n        style.backgroundColor !== \"rgba(0, 0, 0, 0)\" &&\n        style.backgroundColor !== \"transparent\";\n      const hasBorder =\n        style.borderWidth !== \"0px\" &&\n        style.borderStyle !== \"none\" &&\n        style.borderColor !== \"rgba(0, 0, 0, 0)\" &&\n        style.borderColor !== \"transparent\";\n      const hasShadow = style.boxShadow !== \"none\";\n\n      if (hasBackground || hasBorder || hasShadow) {\n        return {\n          type: \"container\",\n          styles: {\n            backgroundColor: style.backgroundColor,\n            border: style.border,\n            borderRadius: style.borderRadius,\n            boxShadow: style.boxShadow,\n          },\n        };\n      }\n\n      return null;\n    };\n\n    // Traverse\n    const walker = document.createTreeWalker(\n      containerRef.current,\n      NodeFilter.SHOW_ELEMENT,\n      {\n        acceptNode: (node) => {\n          const el = node as Element;\n          const style = window.getComputedStyle(el);\n          if (style.display === \"none\") return NodeFilter.FILTER_REJECT;\n\n          // If it matches a type, accept it.\n          // Note: We want to accept containers AND traverse their children.\n          // FILTER_ACCEPT does both.\n          if (getSkeletonType(el)) return NodeFilter.FILTER_ACCEPT;\n\n          return NodeFilter.FILTER_SKIP;\n        },\n      },\n    );\n\n    let node = walker.nextNode();\n    let idx = 0;\n    while (node) {\n      const el = node as Element;\n      const rect = el.getBoundingClientRect();\n      const typeData = getSkeletonType(el);\n\n      if (typeData) {\n        // Determine border radius logic\n        let borderRadius =\n          config?.borderRadius ||\n          typeData.styles?.borderRadius ||\n          window.getComputedStyle(el).borderRadius;\n\n        if (typeData.type === \"primitive\") {\n          // Auto-detect circle for rounded primitives\n          if (borderRadius === \"0px\" || !borderRadius) {\n            if (\n              window.getComputedStyle(el).borderRadius === \"50%\" ||\n              (rect.width === rect.height && rect.width < 50)\n            ) {\n              // Keep heuristic or default\n            }\n            borderRadius = \"4px\";\n            if (el.tagName.toLowerCase() === \"button\") borderRadius = \"6px\";\n            if (el.tagName.toLowerCase() === \"img\") borderRadius = \"4px\";\n          }\n        }\n\n        newSkeletons.push({\n          key: `${idx++}`,\n          type: typeData.type,\n          width: rect.width,\n          height: rect.height,\n          top: rect.top - containerRect.top,\n          left: rect.left - containerRect.left,\n          borderRadius: borderRadius as string,\n          style: typeData.styles,\n        });\n      }\n\n      node = walker.nextNode();\n    }\n\n    // If no content nodes found, but container has size (maybe a canvas or simple div w/ background),\n    // Fallback? Or maybe user wants the single block behavior.\n    // Let's add that fallback if newSkeletons is empty but container has dimension.\n    if (\n      newSkeletons.length === 0 &&\n      (containerRect.width > 0 || containerRect.height > 0)\n    ) {\n      newSkeletons.push({\n        key: \"fallback\",\n        type: \"primitive\",\n        width: containerRect.width,\n        height: containerRect.height,\n        top: 0,\n        left: 0,\n        borderRadius: (config?.borderRadius as string) || \"4px\",\n      });\n    }\n\n    setSkeletons(newSkeletons);\n  };\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    // Initial measure\n    updateSkeletons();\n\n    const observer = new ResizeObserver(() => {\n      updateSkeletons();\n    });\n\n    observer.observe(containerRef.current);\n    // Also observe children mutations if possible, but ResizeObserver on container catches layout changes often.\n    // For robust child changes:\n    const mutationObserver = new MutationObserver(() => updateSkeletons());\n    mutationObserver.observe(containerRef.current, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n\n    return () => {\n      observer.disconnect();\n      mutationObserver.disconnect();\n    };\n  }, [loading, children]); // Re-scan when children change\n\n  // Determine effective colors based on theme\n  const getEffectiveColors = () => {\n    // If user passed explicit color/highlightColor, use those\n    if (config?.color || config?.highlightColor) {\n      return {\n        color: config.color,\n        highlightColor: config.highlightColor,\n      };\n    }\n    // If theme-specific colors are provided, use them\n    if (theme === \"dark\" && (config?.darkColor || config?.darkHighlightColor)) {\n      return {\n        color: config.darkColor,\n        highlightColor: config.darkHighlightColor,\n      };\n    }\n    if (\n      theme === \"light\" &&\n      (config?.lightColor || config?.lightHighlightColor)\n    ) {\n      return {\n        color: config.lightColor,\n        highlightColor: config.lightHighlightColor,\n      };\n    }\n    // Otherwise, let CSS variables handle it (undefined = use CSS var defaults)\n    return { color: undefined, highlightColor: undefined };\n  };\n\n  const effectiveColors = getEffectiveColors();\n\n  return (\n    <div\n      style={{ position: \"relative\", display: \"inline-block\", width: \"auto\" }}\n      {...(theme !== \"auto\" ? { \"data-skeleton-theme\": theme } : {})}\n    >\n      <div\n        ref={containerRef}\n        style={{\n          opacity: loading ? 0 : 1,\n          transition: \"opacity 0.2s ease\", // Smooth transition when loading finishes\n        }}\n        aria-hidden={loading}\n      >\n        {children}\n      </div>\n\n      {loading && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: 0,\n            left: 0,\n            width: \"100%\",\n            height: \"100%\",\n            pointerEvents: \"none\",\n          }}\n        >\n          {skeletons.map((sk) => (\n            <div\n              key={sk.key}\n              style={{ position: \"absolute\", top: sk.top, left: sk.left }}\n            >\n              {sk.type === \"primitive\" ? (\n                <SkeletonPrimitive\n                  width={sk.width}\n                  height={sk.height}\n                  borderRadius={sk.borderRadius}\n                  color={effectiveColors.color}\n                  highlightColor={effectiveColors.highlightColor}\n                />\n              ) : (\n                /* Container Clone: Renders static style */\n                <div\n                  style={{\n                    width: sk.width,\n                    height: sk.height,\n                    borderRadius: sk.borderRadius,\n                    ...sk.style, // Apply captured container styles\n                    // Ensure it doesn't hide children if z-index issues arise,\n                    // but since we render in DOM order, children come later and sit on top.\n                    boxSizing: \"border-box\",\n                  }}\n                />\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/styles.css

@@ -0,0 +1,24 @@
+/* src/styles.css */
+:root {
+  --auto-skeleton-color: #eee;
+  --auto-skeleton-highlight: #f5f5f5;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --auto-skeleton-color: #2a2a2a;
+    --auto-skeleton-highlight: #333;
+  }
+}
+[data-skeleton-theme=light] {
+  --auto-skeleton-color: #eee;
+  --auto-skeleton-highlight: #f5f5f5;
+}
+[data-skeleton-theme=dark] {
+  --auto-skeleton-color: #2a2a2a;
+  --auto-skeleton-highlight: #333;
+}
+:root .dark {
+  --auto-skeleton-color: #2a2a2a;
+  --auto-skeleton-highlight: #333;
+}
+/*# sourceMappingURL=styles.css.map */

package/dist/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles.css"],"sourcesContent":[":root {\n  --auto-skeleton-color: #eee;\n  --auto-skeleton-highlight: #f5f5f5;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --auto-skeleton-color: #2a2a2a;\n    --auto-skeleton-highlight: #333;\n  }\n}\n\n[data-skeleton-theme=\"light\"] {\n  --auto-skeleton-color: #eee;\n  --auto-skeleton-highlight: #f5f5f5;\n}\n\n[data-skeleton-theme=\"dark\"] {\n  --auto-skeleton-color: #2a2a2a;\n  --auto-skeleton-highlight: #333;\n}\n\n/* Optional generic support if user uses .dark class on a parent */\n/* .dark [data-skeleton-theme] { } */\n\n/* To keep it simple, we let the data-skeleton-theme control itself, \n   and the media query handles the auto case at :root level. \n   If a user puts .dark on body, they might expect us to change.\n   We can support that by hooking into standard dark selectors if we want.\n   But typically libs just rely on CSS vars inherited. \n   Since we define variables at :root, if the user redefines them in .dark, it works.\n   \n   Here, we forcefully set them for our defaults.\n*/\n\n:root .dark {\n  --auto-skeleton-color: #2a2a2a;\n  --auto-skeleton-highlight: #333;\n}\n"],"mappings":";AAAA;AACE,yBAAuB;AACvB,6BAA2B;AAC7B;AAEA,QAAO,sBAAuB;AAC5B;AACE,2BAAuB;AACvB,+BAA2B;AAC7B;AACF;AAEA,CAAC;AACC,yBAAuB;AACvB,6BAA2B;AAC7B;AAEA,CAAC;AACC,yBAAuB;AACvB,6BAA2B;AAC7B;AAeA,MAAM,CAAC;AACL,yBAAuB;AACvB,6BAA2B;AAC7B;","names":[]}

package/dist/styles.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "smart-skeleton-loader",
+  "version": "1.0.0",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DashnyamB/smart-skeleton-loader.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/DashnyamB/smart-skeleton-loader/issues"
+  },
+  "homepage": "https://github.com/DashnyamB/smart-skeleton-loader#readme",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/styles.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest",
+    "test:unit": "vitest --run",
+    "test:browser": "vitest --run --config vitest.storybook.config.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "author": "dashnyamb",
+  "license": "MIT",
+  "description": "",
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.29.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-a11y": "^10.2.1",
+    "@storybook/addon-docs": "^10.2.1",
+    "@storybook/addon-onboarding": "^10.2.1",
+    "@storybook/addon-vitest": "^10.2.1",
+    "@storybook/react-vite": "^10.2.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.2.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "autoprefixer": "^10.4.23",
+    "jsdom": "^27.4.0",
+    "playwright": "^1.58.0",
+    "postcss": "^8.5.6",
+    "semantic-release": "^24.2.9",
+    "storybook": "^10.2.1",
+    "tailwindcss": "^4.1.18",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  }
+}