npm - react-skeletonify - Versions diffs - 1.1.1 → 1.2.0 - Mend

react-skeletonify 1.1.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/LICENSE CHANGED Viewed

@@ -1,21 +1,21 @@
-MIT License
-Copyright (c) 2025 Mohammed Sinan Mp
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+Copyright (c) 2025 Mohammed Sinan Mp
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md CHANGED Viewed

@@ -1,171 +1,171 @@
-<p align="center">
-  <img src="https://raw.githubusercontent.com/Sinan0333/react-smart-skeleton/main/assets/logo.png" alt="React Skeletonify Logo" width="120" height="110" />
-</p>
-<p align="center">
-  <a href="https://www.npmjs.com/package/react-skeletonify">
-    <img src="https://img.shields.io/npm/v/react-skeletonify.svg" alt="npm version" />
-  </a>
-  <a href="https://www.npmjs.com/package/react-skeletonify">
-    <img src="https://img.shields.io/npm/dm/react-skeletonify.svg" alt="npm downloads" />
-  </a>
-  <a href="https://github.com/prettier/prettier">
-    <img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="code style: prettier" />
-  </a>
-</p>
-<h1 align="center">⚡ React Skeletonify</h1>
-A **lightweight and flexible skeleton loader** for React, built to make loading states feel smooth and natural.
-Unlike traditional static skeletons, **React Skeletonify** adapts to your components dynamically — letting you configure animations, styles, and exclusions globally or per-component.
-## 🎮 Live Demo
-👉 [Try it here](https://playcode.io/2556254)
-## 📚 Documentation
-For complete guides and examples check out the full documentation site:
-👉 [React Skeletonify Documentation](https://react-skeletonify.sinan-dev.in)
-## ✨ Features
-- 🎨 **Global & local configuration** with `SkeletonProvider` and `SkeletonWrapper`
-- ⚡ **Smooth animations** with multiple presets
-- 🛠️ **Highly customizable** styles, backgrounds, borders, and speed
-- 🧩 Works with **any React component**
-- 🧃 Exclude tags or groups (text, form, media, etc.) from skeleton rendering
-- 🪶 Lightweight, no external dependencies
-## 🚀 Installation
-```bash
-npm install react-skeletonify
-# or
-yarn add react-skeletonify
-```
-Import styles once:
-```tsx
-import "react-skeletonify/dist/index.css";
-```
-## 🔥 Quick Example
-```tsx
-import React from "react";
-import { SkeletonProvider, SkeletonWrapper } from "react-skeletonify";
-import "react-skeletonify/dist/index.css";
-function App() {
-  return (
-    <SkeletonProvider
-      config={{
-        animation: "animation-1",
-        borderRadius: "8px",
-        animationSpeed: 3,
-      }}>
-      <SkeletonWrapper loading={true}>
-        <div style={{ height: "120px", width: "400px", padding: "10px" }}>
-          <div
-            style={{
-              height: "50px",
-              width: "50px",
-              borderRadius: "100%",
-              marginBottom: "10px",
-            }}></div>
-          <h6>React Skeletonify</h6>
-          <p>This is an example with global provider config 🚀</p>
-        </div>
-      </SkeletonWrapper>
-    </SkeletonProvider>
-  );
-}
-export default App;
-```
-## ⚙️ API
-### 🔹 `SkeletonProvider`
-Provides **global configuration** for skeletons. Wrap your app (or part of it) in this provider.
-| Prop     | Type                      | Default | Description            |
-| -------- | ------------------------- | ------- | ---------------------- |
-| children | `ReactNode`               | `null`  | Child components       |
-| config   | `Partial<SkeletonConfig>` | `{}`    | Global skeleton config |
-| style    | `CSSProperties`           | `{}`    | Inline style overrides |
----
-### 🔹 `SkeletonWrapper`
-Wraps **specific content** and applies skeletons when `loading` is true.
-It can **inherit** from `SkeletonProvider` or override per instance.
-| Prop           | Type                      | Default | Description            |
-| -------------- | ------------------------- | ------- | ---------------------- |
-| loading        | `boolean`                 | `false` | Show skeleton if true  |
-| children       | `ReactNode`               | `null`  | Content to render      |
-| overrideConfig | `Partial<SkeletonConfig>` | `{}`    | Override global config |
-| style          | `CSSProperties`           | `{}`    | Inline style overrides |
----
-## 🎨 Configuration Options (`SkeletonConfig`)
-| Key             | Type                             | Default         | Description          |
-| --------------- | -------------------------------- | --------------- | -------------------- |
-| animationSpeed  | `number`                         | `3`             | Speed of animation   |
-| background      | `string`                         | `#aeaeae`       | Background color     |
-| border          | `string`                         | `"none"`        | Border style         |
-| borderRadius    | `string \| number`               | `"0"`           | Border radius        |
-| textTagsMargin  | `string`                         | `"0"`           | Margin for text tags |
-| className       | `string`                         | `""`            | Custom class         |
-| style           | `CSSProperties`                  | `{}`            | Inline styles        |
-| animation       | `"animation-1" \| "animation-2"` | `"animation-1"` | Animation type       |
-| exceptTags      | `string[]`                       | `[]`            | Excluded HTML tags   |
-| exceptTagGroups | `HtmlTagGroup[]`                 | `[]`            | Excluded tag groups  |
-**Available Tag Groups:**
-`TEXT_TAGS`, `STRUCTURE_TAGS`, `METADATA_TAGS`, `LIST_TAGS`, `TABLE_TAGS`, `FORM_TAGS`, `MEDIA_TAGS`, `INTERACTIVE_TAGS`, `MISC_TAGS`
----
-## 📦 Example with `exceptTags`
-```tsx
-<SkeletonWrapper
-  loading={true}
-  overrideConfig={{
-    exceptTags: ["img", "button"],
-    borderRadius: "6px",
-  }}>
-  <div>
-    <img src="/profile.jpg" alt="Profile" />
-    <h2>Hello World</h2>
-    <button>Click me</button>
-  </div>
-</SkeletonWrapper>
-```
-👉 In this case, the `img` and `button` will not be skeletonized.
-## 📌 Versioning
-We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [versions](https://www.npmjs.com/package/react-skeletonify?activeTab=versions).
-## 🤝 Contributing
-Contributions, issues, and feature requests are welcome! 🎉
-Feel free to open a PR or an issue.
-## 👨‍💻 Author
-- **Sinan** - [GitHub](https://github.com/Sinan0333) · [Portfolio](http://sinan-dev.in)
-## License
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+<p align="center">
+  <img src="https://raw.githubusercontent.com/Sinan0333/react-smart-skeleton/main/assets/logo.png" alt="React Skeletonify Logo" width="120" height="110" />
+</p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-skeletonify">
+    <img src="https://img.shields.io/npm/v/react-skeletonify.svg" alt="npm version" />
+  </a>
+  <a href="https://www.npmjs.com/package/react-skeletonify">
+    <img src="https://img.shields.io/npm/dm/react-skeletonify.svg" alt="npm downloads" />
+  </a>
+  <a href="https://github.com/prettier/prettier">
+    <img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="code style: prettier" />
+  </a>
+</p>
+<h1 align="center">⚡ React Skeletonify</h1>
+A **lightweight and flexible skeleton loader** for React, built to make loading states feel smooth and natural.
+Unlike traditional static skeletons, **React Skeletonify** adapts to your components dynamically — letting you configure animations, styles, and exclusions globally or per-component.
+## 🎮 Live Demo
+👉 [Try it here](https://playcode.io/2556254)
+## 📚 Documentation
+For complete guides and examples check out the full documentation site:
+👉 [React Skeletonify Documentation](https://react-skeletonify.sinan-dev.in)
+## ✨ Features
+- 🎨 **Global & local configuration** with `SkeletonProvider` and `SkeletonWrapper`
+- ⚡ **Smooth animations** with multiple presets
+- 🛠️ **Highly customizable** styles, backgrounds, borders, and speed
+- 🧩 Works with **any React component**
+- 🧃 Exclude tags or groups (text, form, media, etc.) from skeleton rendering
+- 🪶 Lightweight, no external dependencies
+## 🚀 Installation
+```bash
+npm install react-skeletonify
+# or
+yarn add react-skeletonify
+```
+Import styles once:
+```tsx
+import "react-skeletonify/dist/index.css";
+```
+## 🔥 Quick Example
+```tsx
+import React from "react";
+import { SkeletonProvider, SkeletonWrapper } from "react-skeletonify";
+import "react-skeletonify/dist/index.css";
+function App() {
+  return (
+    <SkeletonProvider
+      config={{
+        animation: "animation-1",
+        borderRadius: "8px",
+        animationSpeed: 3,
+      }}>
+      <SkeletonWrapper loading={true}>
+        <div style={{ height: "120px", width: "400px", padding: "10px" }}>
+          <div
+            style={{
+              height: "50px",
+              width: "50px",
+              borderRadius: "100%",
+              marginBottom: "10px",
+            }}></div>
+          <h6>React Skeletonify</h6>
+          <p>This is an example with global provider config 🚀</p>
+        </div>
+      </SkeletonWrapper>
+    </SkeletonProvider>
+  );
+}
+export default App;
+```
+## ⚙️ API
+### 🔹 `SkeletonProvider`
+Provides **global configuration** for skeletons. Wrap your app (or part of it) in this provider.
+| Prop     | Type                      | Default | Description            |
+| -------- | ------------------------- | ------- | ---------------------- |
+| children | `ReactNode`               | `null`  | Child components       |
+| config   | `Partial<SkeletonConfig>` | `{}`    | Global skeleton config |
+| style    | `CSSProperties`           | `{}`    | Inline style overrides |
+---
+### 🔹 `SkeletonWrapper`
+Wraps **specific content** and applies skeletons when `loading` is true.
+It can **inherit** from `SkeletonProvider` or override per instance.
+| Prop           | Type                      | Default | Description            |
+| -------------- | ------------------------- | ------- | ---------------------- |
+| loading        | `boolean`                 | `false` | Show skeleton if true  |
+| children       | `ReactNode`               | `null`  | Content to render      |
+| overrideConfig | `Partial<SkeletonConfig>` | `{}`    | Override global config |
+| style          | `CSSProperties`           | `{}`    | Inline style overrides |
+---
+## 🎨 Configuration Options (`SkeletonConfig`)
+| Key             | Type                             | Default         | Description          |
+| --------------- | -------------------------------- | --------------- | -------------------- |
+| animationSpeed  | `number`                         | `3`             | Speed of animation   |
+| background      | `string`                         | `#aeaeae`       | Background color     |
+| border          | `string`                         | `"none"`        | Border style         |
+| borderRadius    | `string \| number`               | `"0"`           | Border radius        |
+| textTagsMargin  | `string`                         | `"0"`           | Margin for text tags |
+| className       | `string`                         | `""`            | Custom class         |
+| style           | `CSSProperties`                  | `{}`            | Inline styles        |
+| animation       | `"animation-1" \| "animation-2"` | `"animation-1"` | Animation type       |
+| exceptTags      | `string[]`                       | `[]`            | Excluded HTML tags   |
+| exceptTagGroups | `HtmlTagGroup[]`                 | `[]`            | Excluded tag groups  |
+**Available Tag Groups:**
+`TEXT_TAGS`, `STRUCTURE_TAGS`, `METADATA_TAGS`, `LIST_TAGS`, `TABLE_TAGS`, `FORM_TAGS`, `MEDIA_TAGS`, `INTERACTIVE_TAGS`, `MISC_TAGS`
+---
+## 📦 Example with `exceptTags`
+```tsx
+<SkeletonWrapper
+  loading={true}
+  overrideConfig={{
+    exceptTags: ["img", "button"],
+    borderRadius: "6px",
+  }}>
+  <div>
+    <img src="/profile.jpg" alt="Profile" />
+    <h2>Hello World</h2>
+    <button>Click me</button>
+  </div>
+</SkeletonWrapper>
+```
+👉 In this case, the `img` and `button` will not be skeletonized.
+## 📌 Versioning
+We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [versions](https://www.npmjs.com/package/react-skeletonify?activeTab=versions).
+## 🤝 Contributing
+Contributions, issues, and feature requests are welcome! 🎉
+Feel free to open a PR or an issue.
+## 👨‍💻 Author
+- **Sinan** - [GitHub](https://github.com/Sinan0333) · [Portfolio](http://sinan-dev.in)
+## License
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

package/dist/index.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/styles/skeleton.css"],"sourcesContent":[".react-skeletonify {\n color: transparent !important;\n outline: none !important;\n pointer-events: none !important;\n}\n.react-skeletonify img {\n opacity: 0;\n}\n.react-skeletonify a {\n text-decoration: none !important;\n color: transparent !important;\n}\n.react-skeletonify-text {\n margin-top: 5px !important;\n}\n.react-skeletonify::placeholder {\n color: transparent !important;\n}\n\n/* Animation 1 /\n/ animation: react-skeletonify-animation-1 3s ease-in-out infinite;\nanimation-delay: 0.5s; /\n@keyframes react-skeletonify-animation-1 {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 1;\n }\n}\n\n/ Animation 2 /\n/ animation: react-skeletonify-animation-2 2s infinite;/\n@keyframes react-skeletonify-animation-2 {\n 100% {\n background-position: -100% 0;\n }\n}\n\n/ Animation 3 /\n/ animation: react-skeletonify-animation-3 1s linear infinite alternate; */\n@keyframes react-skeletonify-animation-3 {\n 0% {\n background-color: hsl(200, 20%, 80%);\n }\n 100% {\n background-color: hsl(200, 20%, 95%);\n }\n}\n"],"mappings":";AAAA,CAAC;AACC,SAAO;AACP,WAAS;AACT,kBAAgB;AAClB;AACA,CALC,kBAKkB;AACjB,WAAS;AACX;AACA,CARC,kBAQkB;AACjB,mBAAiB;AACjB,SAAO;AACT;AACA,CAAC;AACC,cAAY;AACd;AACA,CAfC,iBAeiB;AAChB,SAAO;AACT;AAKA,WAAW;AACT;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACF;AAIA,WAAW;AACT;AACE,yBAAqB,MAAM;AAC7B;AACF;AAIA,WAAW;AACT;AACE,sBAAkB,IAAI,GAAG,EAAE,GAAG,EAAE;AAClC;AACA;AACE,sBAAkB,IAAI,GAAG,EAAE,GAAG,EAAE;AAClC;AACF;","names":[]}
1	+ {"version":3,"sources":["../src/styles/skeleton.css"],"sourcesContent":[".react-skeletonify {\r\n color: transparent !important;\r\n outline: none !important;\r\n pointer-events: none !important;\r\n}\r\n.react-skeletonify img {\r\n opacity: 0;\r\n}\r\n.react-skeletonify a {\r\n text-decoration: none !important;\r\n color: transparent !important;\r\n}\r\n.react-skeletonify-text {\r\n margin-top: 5px !important;\r\n}\r\n.react-skeletonify::placeholder {\r\n color: transparent !important;\r\n}\r\n\r\n/* Animation 1 /\r\n/ animation: react-skeletonify-animation-1 3s ease-in-out infinite;\r\nanimation-delay: 0.5s; /\r\n@keyframes react-skeletonify-animation-1 {\r\n 0% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.4;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n/ Animation 2 /\r\n/ animation: react-skeletonify-animation-2 2s infinite;/\r\n@keyframes react-skeletonify-animation-2 {\r\n 100% {\r\n background-position: -100% 0;\r\n }\r\n}\r\n\r\n/ Animation 3 /\r\n/ animation: react-skeletonify-animation-3 1s linear infinite alternate; */\r\n@keyframes react-skeletonify-animation-3 {\r\n 0% {\r\n background-color: hsl(200, 20%, 80%);\r\n }\r\n 100% {\r\n background-color: hsl(200, 20%, 95%);\r\n }\r\n}\r\n"],"mappings":";AAAA,CAAC;AACC,SAAO;AACP,WAAS;AACT,kBAAgB;AAClB;AACA,CALC,kBAKkB;AACjB,WAAS;AACX;AACA,CARC,kBAQkB;AACjB,mBAAiB;AACjB,SAAO;AACT;AACA,CAAC;AACC,cAAY;AACd;AACA,CAfC,iBAeiB;AAChB,SAAO;AACT;AAKA,WAAW;AACT;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACF;AAIA,WAAW;AACT;AACE,yBAAqB,MAAM;AAC7B;AACF;AAIA,WAAW;AACT;AACE,sBAAkB,IAAI,GAAG,EAAE,GAAG,EAAE;AAClC;AACA;AACE,sBAAkB,IAAI,GAAG,EAAE,GAAG,EAAE;AAClC;AACF;","names":[]}

package/dist/index.d.mts CHANGED Viewed

@@ -23,6 +23,31 @@ interface SkeletonWrapperProps {
 }
 declare const SkeletonWrapper: React.FC<SkeletonWrapperProps>;
+interface SkeletonLeafProps {
+    loading: boolean;
+    children: React.ReactNode;
+    overrideConfig?: Partial<SkeletonConfig>;
+    style?: CSSProperties;
+}
+declare const SkeletonLeaf: React.FC<SkeletonLeafProps>;
+interface SkeletonKeepProps {
+    children: React.ReactNode;
+}
+declare const SkeletonKeep: React.FC<SkeletonKeepProps>;
+interface SkeletonIgnoreProps {
+    children: React.ReactNode;
+}
+declare const SkeletonIgnore: React.FC<SkeletonIgnoreProps>;
+interface SkeletonUniteProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const SkeletonUnite: React.FC<SkeletonUniteProps>;
 interface SkeletonProviderProps {
     children: React.ReactNode;
     config?: Partial<SkeletonConfig>;
@@ -31,4 +56,4 @@ interface SkeletonProviderProps {
 declare const SkeletonProvider: React.FC<SkeletonProviderProps>;
 declare const useSkeleton: () => SkeletonConfig;
-export { type SkeletonConfig, SkeletonProvider, SkeletonWrapper, useSkeleton };
+export { type SkeletonConfig, SkeletonIgnore, SkeletonKeep, SkeletonLeaf, SkeletonProvider, SkeletonUnite, SkeletonWrapper, useSkeleton };

package/dist/index.d.ts CHANGED Viewed

@@ -23,6 +23,31 @@ interface SkeletonWrapperProps {
 }
 declare const SkeletonWrapper: React.FC<SkeletonWrapperProps>;
+interface SkeletonLeafProps {
+    loading: boolean;
+    children: React.ReactNode;
+    overrideConfig?: Partial<SkeletonConfig>;
+    style?: CSSProperties;
+}
+declare const SkeletonLeaf: React.FC<SkeletonLeafProps>;
+interface SkeletonKeepProps {
+    children: React.ReactNode;
+}
+declare const SkeletonKeep: React.FC<SkeletonKeepProps>;
+interface SkeletonIgnoreProps {
+    children: React.ReactNode;
+}
+declare const SkeletonIgnore: React.FC<SkeletonIgnoreProps>;
+interface SkeletonUniteProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const SkeletonUnite: React.FC<SkeletonUniteProps>;
 interface SkeletonProviderProps {
     children: React.ReactNode;
     config?: Partial<SkeletonConfig>;
@@ -31,4 +56,4 @@ interface SkeletonProviderProps {
 declare const SkeletonProvider: React.FC<SkeletonProviderProps>;
 declare const useSkeleton: () => SkeletonConfig;
-export { type SkeletonConfig, SkeletonProvider, SkeletonWrapper, useSkeleton };
+export { type SkeletonConfig, SkeletonIgnore, SkeletonKeep, SkeletonLeaf, SkeletonProvider, SkeletonUnite, SkeletonWrapper, useSkeleton };

package/dist/index.js CHANGED Viewed

@@ -30,15 +30,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  SkeletonIgnore: () => SkeletonIgnore_default,
+  SkeletonKeep: () => SkeletonKeep_default,
+  SkeletonLeaf: () => SkeletonLeaf_default,
   SkeletonProvider: () => SkeletonProvider,
+  SkeletonUnite: () => SkeletonUnite_default,
   SkeletonWrapper: () => SkeletonWrapper_default,
   useSkeleton: () => useSkeleton
 });
 module.exports = __toCommonJS(index_exports);
-// src/components/SkeletonWrapper.tsx
-var import_react6 = require("react");
 // src/components/SkeletonElement.tsx
 var import_react4 = __toESM(require("react"));
@@ -234,10 +235,38 @@ function checkTagInGroup(tag, groups) {
   });
 }
-// src/utils/is-text-element.ts
-var is_text_element_default = (elementType) => {
+// src/components/SkeletonIgnore.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SkeletonIgnore = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+};
+var SkeletonIgnore_default = SkeletonIgnore;
+// src/components/SkeletonKeep.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SkeletonKeep = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+};
+var SkeletonKeep_default = SkeletonKeep;
+// src/components/SkeletonUnite.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SkeletonUnite = (props) => {
+  const { children, className, style } = props;
+  if (className && className.includes("react-skeletonify")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { opacity: 0 }, children }) });
+  }
+  return children;
+};
+var SkeletonUnite_default = SkeletonUnite;
+// src/utils/check-element.ts
+var isTextElement = (elementType) => {
   return TEXT_TAGS.includes(elementType) || LIST_TAGS.includes(elementType);
 };
+var isSkeletonIgnoreComponent = (element) => element === SkeletonIgnore_default;
+var isSkeletonKeepComponent = (element) => element === SkeletonKeep_default;
+var isSkeletonUniteComponent = (element) => element === SkeletonUnite_default;
 // src/hooks/useAddSkelton.ts
 function useAddSkelton(config) {
@@ -245,20 +274,20 @@ function useAddSkelton(config) {
   const CLASS_NAME = `react-skeletonify ${className} `;
   const style = create_style_default(config);
   const addSkeleton = (node) => {
-    if (!import_react3.default.isValidElement(node))
+    if (!import_react3.default.isValidElement(node)) {
       return createNodeWrapper(node, CLASS_NAME, style);
+    }
     const element = node;
     const { children } = element.props;
     const elementType = element.type;
+    if (isSkeletonKeepComponent(elementType)) return element;
+    if (isSkeletonIgnoreComponent(elementType)) return null;
+    if (isSkeletonUniteComponent(elementType)) {
+      return createLeafNode(element, CLASS_NAME, style);
+    }
     if (typeof elementType === "string") {
-      if (exceptTags.includes(elementType)) {
-        return element;
-      }
-      const isRestrictedGroupTag = checkTagInGroup(
-        elementType,
-        exceptTagGroups
-      );
-      if (isRestrictedGroupTag) return element;
+      if (exceptTags.includes(elementType)) return element;
+      if (checkTagInGroup(elementType, exceptTagGroups)) return element;
     }
     const hasChildren = import_react3.default.Children.count(children) > 0;
     const isValidChildren = typeof children !== "string";
@@ -266,8 +295,7 @@ function useAddSkelton(config) {
       const rendered = elementType(element.props);
       return addSkeleton(rendered);
     }
-    const isTextTag = is_text_element_default(elementType);
-    if (isTextTag) {
+    if (isTextElement(elementType)) {
       return createLeafNode(element, CLASS_NAME, {
         ...style,
         margin: textTagsMargin
@@ -297,6 +325,9 @@ var SkeletonElement = (props) => {
 };
 var SkeletonElement_default = SkeletonElement;
+// src/utils/create-config.ts
+var import_react6 = require("react");
 // src/context/SkeletonContext.tsx
 var import_react5 = require("react");
@@ -320,7 +351,7 @@ var defaultValues = {
 };
 // src/context/SkeletonContext.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var SkeletonContext = (0, import_react5.createContext)(defaultValues);
 var SkeletonProvider = (props) => {
   const { children, config, style } = props;
@@ -334,14 +365,12 @@ var SkeletonProvider = (props) => {
     }),
     [animation, background, config, style]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SkeletonContext.Provider, { value, children });
 };
 var useSkeleton = () => (0, import_react5.useContext)(SkeletonContext);
-// src/components/SkeletonWrapper.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var SkeletonWrapper = (props) => {
-  const { loading, children, overrideConfig, style } = props;
+// src/utils/create-config.ts
+var create_config_default = (overrideConfig, style) => {
   const mainConfig = useSkeleton();
   const config = (0, import_react6.useMemo)(
     () => ({
@@ -351,15 +380,41 @@ var SkeletonWrapper = (props) => {
     }),
     [overrideConfig, mainConfig]
   );
+  return config;
+};
+// src/components/SkeletonWrapper.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SkeletonWrapper = (props) => {
+  const { loading, children, overrideConfig, style } = props;
+  const config = create_config_default(overrideConfig, style);
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SkeletonElement_default, { config, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonElement_default, { config, children });
   }
   return children;
 };
 var SkeletonWrapper_default = SkeletonWrapper;
+// src/components/SkeletonLeaf.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SkeletonLeaf = (props) => {
+  const { loading, children, overrideConfig, style } = props;
+  const config = create_config_default(overrideConfig, style);
+  const skeletonStyle = create_style_default(config);
+  const className = `react-skeletonify ${config.className || ""}`;
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, style: skeletonStyle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { opacity: 0 }, children }) });
+  }
+  return children;
+};
+var SkeletonLeaf_default = SkeletonLeaf;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  SkeletonIgnore,
+  SkeletonKeep,
+  SkeletonLeaf,
   SkeletonProvider,
+  SkeletonUnite,
   SkeletonWrapper,
   useSkeleton
 });

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.tsx","../src/components/SkeletonWrapper.tsx","../src/components/SkeletonElement.tsx","../src/hooks/useAddSkelton.ts","../src/utils/create-node-wrapper.ts","../src/utils/create-leaf-node.ts","../src/utils/create-style.ts","../src/constants/tags.ts","../src/utils/check-tag-in-group.ts","../src/utils/is-text-element.ts","../src/context/SkeletonContext.tsx","../src/context/skeleton-config.ts"],"sourcesContent":["import \"./styles/skeleton.css\";\n\nexport { default as SkeletonWrapper } from \"./components/SkeletonWrapper\";\nexport { SkeletonProvider, useSkeleton } from \"./context/SkeletonContext\";\nexport type { SkeletonConfig } from \"./context/skeleton-config\";\n","import React, { CSSProperties, useMemo } from \"react\";\nimport SkeletonElement from \"./SkeletonElement\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\nimport { useSkeleton } from \"../context/SkeletonContext\";\n\ninterface SkeletonWrapperProps {\n loading: boolean;\n children: React.ReactNode;\n overrideConfig?: Partial<SkeletonConfig>;\n style?: CSSProperties;\n}\n\nconst SkeletonWrapper: React.FC<SkeletonWrapperProps> = (props) => {\n const { loading, children, overrideConfig, style } = props;\n const mainConfig = useSkeleton();\n\n const config: SkeletonConfig = useMemo(\n () => ({\n ...mainConfig,\n ...overrideConfig,\n style: { ...mainConfig.style, ...overrideConfig?.style, ...style },\n }),\n [overrideConfig, mainConfig]\n );\n\n if (loading) {\n return <SkeletonElement config={config}>{children}</SkeletonElement>;\n }\n return children;\n};\n\nexport default SkeletonWrapper;\n","import React from \"react\";\nimport useAddSkelton from \"../hooks/useAddSkelton\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\n\ninterface SkeletonElementProps {\n children: React.ReactNode;\n config: SkeletonConfig;\n}\n\nconst SkeletonElement: React.FC<SkeletonElementProps> = (props) => {\n const { children, config } = props;\n const addSkeleton = useAddSkelton(config);\n\n return React.Children.map(children, (child) => addSkeleton(child));\n};\n\nexport default SkeletonElement;\n","import React from \"react\";\nimport createNodeWrapper from \"../utils/create-node-wrapper\";\nimport createLeafNode from \"../utils/create-leaf-node\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\nimport createStyle from \"../utils/create-style\";\nimport checkTagInGroup from \"../utils/check-tag-in-group\";\nimport isTextElement from \"../utils/is-text-element\";\n\nfunction useAddSkelton(config: SkeletonConfig) {\n const { className, exceptTags, exceptTagGroups, textTagsMargin } = config;\n const CLASS_NAME = `react-skeletonify ${className} `;\n const style = createStyle(config);\n\n const addSkeleton = (node: React.ReactNode): React.ReactNode => {\n if (!React.isValidElement(node))\n return createNodeWrapper(node as any, CLASS_NAME, style);\n\n const element = node as React.ReactElement<any>;\n const { children } = element.props;\n const elementType = element.type;\n\n if (typeof elementType === \"string\") {\n if (exceptTags.includes(elementType)) {\n return element;\n }\n const isRestrictedGroupTag = checkTagInGroup(\n elementType,\n exceptTagGroups\n );\n\n if (isRestrictedGroupTag) return element;\n }\n\n const hasChildren = React.Children.count(children) > 0;\n const isValidChildren = typeof children !== \"string\";\n\n if (typeof elementType === \"function\") {\n const rendered = (elementType as any)(element.props);\n return addSkeleton(rendered);\n }\n\n const isTextTag = isTextElement(elementType);\n\n if (isTextTag) {\n return createLeafNode(element, CLASS_NAME, {\n ...style,\n margin: textTagsMargin,\n });\n }\n\n if (elementType === \"img\") {\n return createNodeWrapper(element, CLASS_NAME, style);\n }\n\n if (hasChildren && isValidChildren) {\n const childWithSkeletons = React.Children.map(children, addSkeleton);\n\n return React.cloneElement(element, {\n ...element.props,\n children: childWithSkeletons,\n } as typeof element.props);\n }\n\n return createLeafNode(element, CLASS_NAME, style);\n };\n\n return addSkeleton;\n}\n\nexport default useAddSkelton;\n","import React, { createElement, CSSProperties } from \"react\";\n\nexport default function createNodeWrapper(\n node: React.ReactElement<any>,\n className: string,\n style: CSSProperties\n) {\n if (!node) return null;\n\n return createElement(\n \"div\",\n {\n className: className + (node?.props?.className \|\| \"\"),\n style: {\n ...style,\n ...node?.props?.style,\n },\n },\n node\n );\n}\n","import React, { CSSProperties } from \"react\";\n\nexport default function createLeafNode(\n node: React.ReactElement<any>,\n className: string,\n style: CSSProperties\n): React.ReactElement {\n return React.cloneElement(node, {\n ...node.props,\n className: className + (node.props.className \|\| \"\"),\n style: {\n ...style,\n ...node.props.style,\n },\n } as typeof node.props);\n}\n","import { CSSProperties } from \"react\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\n\nconst getAnimation = (\n animation: string,\n animationSpeed: number,\n background: string\n) => {\n switch (animation) {\n case \"animation-1\":\n return {\n animation: `react-skeletonify-animation-1 ${animationSpeed}s ease-in-out infinite `,\n background: background,\n animationDelay: \"0.5s\",\n };\n case \"animation-2\":\n return {\n animation: `react-skeletonify-animation-2 ${animationSpeed}s infinite`,\n background: `linear-gradient(120deg, ${background} 30%, #f0f0f0 38%, #f0f0f0 40%, ${background} 48%)`,\n backgroundSize: \"200% 100%\",\n backgroundPosition: \"100% 0\",\n };\n case \"animation-3\":\n return {\n animation: `react-skeletonify-animation-3 ${animationSpeed}s linear infinite alternate`,\n backgroundColor: background,\n };\n }\n};\n\nexport default (config: SkeletonConfig) => {\n const { animationSpeed, background, border, borderRadius, animation, style } =\n config;\n\n const skeletonAnimation: CSSProperties = {\n ...getAnimation(animation, animationSpeed, background),\n border,\n borderRadius,\n ...style,\n };\n\n return skeletonAnimation;\n};\n","// --- Text & Content ---\nexport const TEXT_TAGS = [\n \"p\",\n \"span\",\n \"h1\",\n \"h2\",\n \"h3\",\n \"h4\",\n \"h5\",\n \"h6\",\n \"b\",\n \"strong\",\n \"i\",\n \"em\",\n \"u\",\n \"mark\",\n \"small\",\n \"sup\",\n \"sub\",\n \"abbr\",\n \"cite\",\n \"q\",\n \"blockquote\",\n \"code\",\n \"pre\",\n \"samp\",\n \"kbd\",\n \"var\",\n \"time\",\n \"br\",\n \"wbr\",\n];\n\n// --- Sectioning / Structure ---\nexport const STRUCTURE_TAGS = [\n \"html\",\n \"head\",\n \"body\",\n \"main\",\n \"header\",\n \"footer\",\n \"nav\",\n \"section\",\n \"article\",\n \"aside\",\n];\n\n// --- Metadata ---\nexport const METADATA_TAGS = [\"base\", \"link\", \"meta\", \"style\", \"title\"];\n\n// --- Lists ---\nexport const LIST_TAGS = [\"ul\", \"ol\", \"li\", \"dl\", \"dt\", \"dd\"];\n\n// --- Tables ---\nexport const TABLE_TAGS = [\n \"table\",\n \"caption\",\n \"thead\",\n \"tbody\",\n \"tfoot\",\n \"tr\",\n \"th\",\n \"td\",\n \"col\",\n \"colgroup\",\n];\n\n// --- Forms & Inputs ---\nexport const FORM_TAGS = [\n \"form\",\n \"input\",\n \"textarea\",\n \"button\",\n \"label\",\n \"select\",\n \"option\",\n \"optgroup\",\n \"fieldset\",\n \"legend\",\n \"datalist\",\n \"output\",\n \"meter\",\n \"progress\",\n];\n\n// --- Media ---\nexport const MEDIA_TAGS = [\n \"img\",\n \"audio\",\n \"video\",\n \"source\",\n \"track\",\n \"picture\",\n \"iframe\",\n \"embed\",\n \"object\",\n \"map\",\n \"area\",\n \"canvas\",\n];\n\n// --- Interactive ---\nexport const INTERACTIVE_TAGS = [\n \"details\",\n \"summary\",\n \"dialog\",\n \"script\",\n \"noscript\",\n \"template\",\n];\n\n// --- Other / Inline semantics ---\nexport const MISC_TAGS = [\"ins\", \"del\", \"s\", \"bdi\", \"bdo\", \"ruby\", \"rt\", \"rp\"];\n","import {\n FORM_TAGS,\n INTERACTIVE_TAGS,\n LIST_TAGS,\n MEDIA_TAGS,\n METADATA_TAGS,\n MISC_TAGS,\n STRUCTURE_TAGS,\n TABLE_TAGS,\n TEXT_TAGS,\n} from \"../constants/tags\";\nimport { HtmlTagGroup } from \"../context/skeleton-config\";\n\nexport default function checkTagInGroup(\n tag: string,\n groups: HtmlTagGroup[]\n): boolean {\n return groups.some((group) => {\n switch (group) {\n case \"TEXT_TAGS\":\n return TEXT_TAGS.includes(tag);\n case \"STRUCTURE_TAGS\":\n return STRUCTURE_TAGS.includes(tag);\n case \"METADATA_TAGS\":\n return METADATA_TAGS.includes(tag);\n case \"LIST_TAGS\":\n return LIST_TAGS.includes(tag);\n case \"TABLE_TAGS\":\n return TABLE_TAGS.includes(tag);\n case \"FORM_TAGS\":\n return FORM_TAGS.includes(tag);\n case \"MEDIA_TAGS\":\n return MEDIA_TAGS.includes(tag);\n case \"INTERACTIVE_TAGS\":\n return INTERACTIVE_TAGS.includes(tag);\n case \"MISC_TAGS\":\n return MISC_TAGS.includes(tag);\n }\n });\n}\n","import { LIST_TAGS, TEXT_TAGS } from \"../constants/tags\";\n\nexport default (elementType: string) => {\n return TEXT_TAGS.includes(elementType) \|\| LIST_TAGS.includes(elementType);\n};\n","import React, {\n createContext,\n CSSProperties,\n useContext,\n useMemo,\n} from \"react\";\nimport {\n SkeletonConfig,\n defaultBackground,\n defaultValues,\n} from \"./skeleton-config\";\n\nconst SkeletonContext = createContext<SkeletonConfig>(defaultValues);\ninterface SkeletonProviderProps {\n children: React.ReactNode;\n config?: Partial<SkeletonConfig>;\n style?: CSSProperties;\n}\n\nexport const SkeletonProvider: React.FC<SkeletonProviderProps> = (props) => {\n const { children, config, style } = props;\n const { animation = defaultValues.animation, background } = config \|\| {};\n\n const value: SkeletonConfig = useMemo(\n () => ({\n ...defaultValues,\n ...config,\n background: background ? background : defaultBackground[animation],\n style: { ...defaultValues.style, ...config?.style, ...style },\n }),\n [animation, background, config, style]\n );\n\n return (\n <SkeletonContext.Provider value={value}>\n {children}\n </SkeletonContext.Provider>\n );\n};\n\nexport const useSkeleton = () => useContext(SkeletonContext);\n","import { CSSProperties } from \"react\";\n\nexport const HTML_TAG_GROUPS = [\n \"TEXT_TAGS\",\n \"STRUCTURE_TAGS\",\n \"METADATA_TAGS\",\n \"LIST_TAGS\",\n \"TABLE_TAGS\",\n \"FORM_TAGS\",\n \"MEDIA_TAGS\",\n \"INTERACTIVE_TAGS\",\n \"MISC_TAGS\",\n] as const;\n\nexport type HtmlTagGroup = (typeof HTML_TAG_GROUPS)[number];\n\nexport const defaultBackground = {\n \"animation-1\": \"#aeaeae\",\n \"animation-2\": \"#e5e5e5\",\n \"animation-3\": \"hsl(210, 20%, 90%)\",\n};\n\nexport type SkeletonConfig = {\n animationSpeed: number;\n background: string;\n border: string;\n borderRadius: string;\n textTagsMargin: string;\n className?: string;\n style?: CSSProperties;\n animation: \"animation-1\" \| \"animation-2\";\n exceptTags: string[];\n exceptTagGroups: HtmlTagGroup[];\n};\n\nexport const defaultValues: SkeletonConfig = {\n animationSpeed: 3,\n background: \"#aeaeae\",\n border: \"none\",\n borderRadius: \"0\",\n textTagsMargin: \"0\",\n className: \"\",\n style: {},\n animation: \"animation-1\",\n exceptTags: [],\n exceptTagGroups: [],\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA8C;;;ACA9C,IAAAC,gBAAkB;;;ACAlB,IAAAC,gBAAkB;;;ACAlB,mBAAoD;AAErC,SAAR,kBACL,MACA,WACA,OACA;AANF;AAOE,MAAI,CAAC,KAAM,QAAO;AAElB,aAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,WAAW,eAAa,kCAAM,UAAN,mBAAa,cAAa;AAAA,MAClD,OAAO;AAAA,QACL,GAAG;AAAA,QACH,IAAG,kCAAM,UAAN,mBAAa;AAAA,MAClB;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;;;ACpBA,IAAAC,gBAAqC;AAEtB,SAAR,eACL,MACA,WACA,OACoB;AACpB,SAAO,cAAAC,QAAM,aAAa,MAAM;AAAA,IAC9B,GAAG,KAAK;AAAA,IACR,WAAW,aAAa,KAAK,MAAM,aAAa;AAAA,IAChD,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,KAAK,MAAM;AAAA,IAChB;AAAA,EACF,CAAsB;AACxB;;;ACZA,IAAM,eAAe,CACnB,WACA,gBACA,eACG;AACH,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO;AAAA,QACL,WAAW,iCAAiC,cAAc;AAAA,QAC1D;AAAA,QACA,gBAAgB;AAAA,MAClB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW,iCAAiC,cAAc;AAAA,QAC1D,YAAY,2BAA2B,UAAU,mCAAmC,UAAU;AAAA,QAC9F,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACtB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW,iCAAiC,cAAc;AAAA,QAC1D,iBAAiB;AAAA,MACnB;AAAA,EACJ;AACF;AAEA,IAAO,uBAAQ,CAAC,WAA2B;AACzC,QAAM,EAAE,gBAAgB,YAAY,QAAQ,cAAc,WAAW,MAAM,IACzE;AAEF,QAAM,oBAAmC;AAAA,IACvC,GAAG,aAAa,WAAW,gBAAgB,UAAU;AAAA,IACrD;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AAEA,SAAO;AACT;;;ACzCO,IAAM,YAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,iBAAiB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,gBAAgB,CAAC,QAAQ,QAAQ,QAAQ,SAAS,OAAO;AAG/D,IAAM,YAAY,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI;AAGrD,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,YAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,YAAY,CAAC,OAAO,OAAO,KAAK,OAAO,OAAO,QAAQ,MAAM,IAAI;;;ACnG9D,SAAR,gBACL,KACA,QACS;AACT,SAAO,OAAO,KAAK,CAAC,UAAU;AAC5B,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,MAC/B,KAAK;AACH,eAAO,eAAe,SAAS,GAAG;AAAA,MACpC,KAAK;AACH,eAAO,cAAc,SAAS,GAAG;AAAA,MACnC,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,MAC/B,KAAK;AACH,eAAO,WAAW,SAAS,GAAG;AAAA,MAChC,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,MAC/B,KAAK;AACH,eAAO,WAAW,SAAS,GAAG;AAAA,MAChC,KAAK;AACH,eAAO,iBAAiB,SAAS,GAAG;AAAA,MACtC,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,IACjC;AAAA,EACF,CAAC;AACH;;;ACrCA,IAAO,0BAAQ,CAAC,gBAAwB;AACtC,SAAO,UAAU,SAAS,WAAW,KAAK,UAAU,SAAS,WAAW;AAC1E;;;ANIA,SAAS,cAAc,QAAwB;AAC7C,QAAM,EAAE,WAAW,YAAY,iBAAiB,eAAe,IAAI;AACnE,QAAM,aAAa,qBAAqB,SAAS;AACjD,QAAM,QAAQ,qBAAY,MAAM;AAEhC,QAAM,cAAc,CAAC,SAA2C;AAC9D,QAAI,CAAC,cAAAC,QAAM,eAAe,IAAI;AAC5B,aAAO,kBAAkB,MAAa,YAAY,KAAK;AAEzD,UAAM,UAAU;AAChB,UAAM,EAAE,SAAS,IAAI,QAAQ;AAC7B,UAAM,cAAc,QAAQ;AAE5B,QAAI,OAAO,gBAAgB,UAAU;AACnC,UAAI,WAAW,SAAS,WAAW,GAAG;AACpC,eAAO;AAAA,MACT;AACA,YAAM,uBAAuB;AAAA,QAC3B;AAAA,QACA;AAAA,MACF;AAEA,UAAI,qBAAsB,QAAO;AAAA,IACnC;AAEA,UAAM,cAAc,cAAAA,QAAM,SAAS,MAAM,QAAQ,IAAI;AACrD,UAAM,kBAAkB,OAAO,aAAa;AAE5C,QAAI,OAAO,gBAAgB,YAAY;AACrC,YAAM,WAAY,YAAoB,QAAQ,KAAK;AACnD,aAAO,YAAY,QAAQ;AAAA,IAC7B;AAEA,UAAM,YAAY,wBAAc,WAAW;AAE3C,QAAI,WAAW;AACb,aAAO,eAAe,SAAS,YAAY;AAAA,QACzC,GAAG;AAAA,QACH,QAAQ;AAAA,MACV,CAAC;AAAA,IACH;AAEA,QAAI,gBAAgB,OAAO;AACzB,aAAO,kBAAkB,SAAS,YAAY,KAAK;AAAA,IACrD;AAEA,QAAI,eAAe,iBAAiB;AAClC,YAAM,qBAAqB,cAAAA,QAAM,SAAS,IAAI,UAAU,WAAW;AAEnE,aAAO,cAAAA,QAAM,aAAa,SAAS;AAAA,QACjC,GAAG,QAAQ;AAAA,QACX,UAAU;AAAA,MACZ,CAAyB;AAAA,IAC3B;AAEA,WAAO,eAAe,SAAS,YAAY,KAAK;AAAA,EAClD;AAEA,SAAO;AACT;AAEA,IAAO,wBAAQ;;;AD5Df,IAAM,kBAAkD,CAAC,UAAU;AACjE,QAAM,EAAE,UAAU,OAAO,IAAI;AAC7B,QAAM,cAAc,sBAAc,MAAM;AAExC,SAAO,cAAAC,QAAM,SAAS,IAAI,UAAU,CAAC,UAAU,YAAY,KAAK,CAAC;AACnE;AAEA,IAAO,0BAAQ;;;AQhBf,IAAAC,gBAKO;;;ACWA,IAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AACjB;AAeO,IAAM,gBAAgC;AAAA,EAC3C,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,EACX,YAAY,CAAC;AAAA,EACb,iBAAiB,CAAC;AACpB;;;ADZI;AAtBJ,IAAM,sBAAkB,6BAA8B,aAAa;AAO5D,IAAM,mBAAoD,CAAC,UAAU;AAC1E,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI;AACpC,QAAM,EAAE,YAAY,cAAc,WAAW,WAAW,IAAI,UAAU,CAAC;AAEvE,QAAM,YAAwB;AAAA,IAC5B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,YAAY,aAAa,aAAa,kBAAkB,SAAS;AAAA,MACjE,OAAO,EAAE,GAAG,cAAc,OAAO,GAAG,iCAAQ,OAAO,GAAG,MAAM;AAAA,IAC9D;AAAA,IACA,CAAC,WAAW,YAAY,QAAQ,KAAK;AAAA,EACvC;AAEA,SACE,4CAAC,gBAAgB,UAAhB,EAAyB,OACvB,UACH;AAEJ;AAEO,IAAM,cAAc,UAAM,0BAAW,eAAe;;;ATdhD,IAAAC,sBAAA;AAdX,IAAM,kBAAkD,CAAC,UAAU;AACjE,QAAM,EAAE,SAAS,UAAU,gBAAgB,MAAM,IAAI;AACrD,QAAM,aAAa,YAAY;AAE/B,QAAM,aAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO,EAAE,GAAG,WAAW,OAAO,GAAG,iDAAgB,OAAO,GAAG,MAAM;AAAA,IACnE;AAAA,IACA,CAAC,gBAAgB,UAAU;AAAA,EAC7B;AAEA,MAAI,SAAS;AACX,WAAO,6CAAC,2BAAgB,QAAiB,UAAS;AAAA,EACpD;AACA,SAAO;AACT;AAEA,IAAO,0BAAQ;","names":["import_react","import_react","import_react","import_react","React","React","React","import_react","import_jsx_runtime"]}
1	+ {"version":3,"sources":["../src/index.tsx","../src/components/SkeletonElement.tsx","../src/hooks/useAddSkelton.ts","../src/utils/create-node-wrapper.ts","../src/utils/create-leaf-node.ts","../src/utils/create-style.ts","../src/constants/tags.ts","../src/utils/check-tag-in-group.ts","../src/components/SkeletonIgnore.tsx","../src/components/SkeletonKeep.tsx","../src/components/SkeletonUnite.tsx","../src/utils/check-element.ts","../src/utils/create-config.ts","../src/context/SkeletonContext.tsx","../src/context/skeleton-config.ts","../src/components/SkeletonWrapper.tsx","../src/components/SkeletonLeaf.tsx"],"sourcesContent":["// Styles\r\nimport \"./styles/skeleton.css\";\r\n\r\n// All Components\r\nexport { default as SkeletonWrapper } from \"./components/SkeletonWrapper\";\r\nexport { default as SkeletonLeaf } from \"./components/SkeletonLeaf\";\r\nexport { default as SkeletonKeep } from \"./components/SkeletonKeep\";\r\nexport { default as SkeletonIgnore } from \"./components/SkeletonIgnore\";\r\nexport { default as SkeletonUnite } from \"./components/SkeletonUnite\";\r\n\r\n// Context\r\nexport { SkeletonProvider, useSkeleton } from \"./context/SkeletonContext\";\r\n\r\n// Types\r\nexport type { SkeletonConfig } from \"./context/skeleton-config\";\r\n","import React from \"react\";\r\nimport useAddSkelton from \"../hooks/useAddSkelton\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\n\r\ninterface SkeletonElementProps {\r\n children: React.ReactNode;\r\n config: SkeletonConfig;\r\n}\r\n\r\nconst SkeletonElement: React.FC<SkeletonElementProps> = (props) => {\r\n const { children, config } = props;\r\n const addSkeleton = useAddSkelton(config);\r\n\r\n return React.Children.map(children, (child) => addSkeleton(child));\r\n};\r\n\r\nexport default SkeletonElement;\r\n","import React from \"react\";\r\nimport createNodeWrapper from \"../utils/create-node-wrapper\";\r\nimport createLeafNode from \"../utils/create-leaf-node\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\nimport createStyle from \"../utils/create-style\";\r\nimport checkTagInGroup from \"../utils/check-tag-in-group\";\r\nimport {\r\n isSkeletonIgnoreComponent,\r\n isSkeletonKeepComponent,\r\n isSkeletonUniteComponent,\r\n isTextElement,\r\n} from \"../utils/check-element\";\r\n\r\nfunction useAddSkelton(config: SkeletonConfig) {\r\n const { className, exceptTags, exceptTagGroups, textTagsMargin } = config;\r\n const CLASS_NAME = `react-skeletonify ${className} `;\r\n const style = createStyle(config);\r\n\r\n const addSkeleton = (node: React.ReactNode): React.ReactNode => {\r\n if (!React.isValidElement(node)) {\r\n return createNodeWrapper(node as any, CLASS_NAME, style);\r\n }\r\n\r\n const element = node as React.ReactElement<any>;\r\n const { children } = element.props;\r\n const elementType = element.type;\r\n\r\n if (isSkeletonKeepComponent(elementType)) return element;\r\n if (isSkeletonIgnoreComponent(elementType)) return null;\r\n if (isSkeletonUniteComponent(elementType)) {\r\n return createLeafNode(element, CLASS_NAME, style);\r\n }\r\n\r\n if (typeof elementType === \"string\") {\r\n if (exceptTags.includes(elementType)) return element;\r\n if (checkTagInGroup(elementType, exceptTagGroups)) return element;\r\n }\r\n\r\n const hasChildren = React.Children.count(children) > 0;\r\n const isValidChildren = typeof children !== \"string\";\r\n\r\n if (typeof elementType === \"function\") {\r\n const rendered = (elementType as any)(element.props);\r\n return addSkeleton(rendered);\r\n }\r\n\r\n if (isTextElement(elementType)) {\r\n return createLeafNode(element, CLASS_NAME, {\r\n ...style,\r\n margin: textTagsMargin,\r\n });\r\n }\r\n\r\n if (elementType === \"img\") {\r\n return createNodeWrapper(element, CLASS_NAME, style);\r\n }\r\n\r\n if (hasChildren && isValidChildren) {\r\n const childWithSkeletons = React.Children.map(children, addSkeleton);\r\n\r\n return React.cloneElement(element, {\r\n ...element.props,\r\n children: childWithSkeletons,\r\n } as typeof element.props);\r\n }\r\n\r\n return createLeafNode(element, CLASS_NAME, style);\r\n };\r\n\r\n return addSkeleton;\r\n}\r\n\r\nexport default useAddSkelton;\r\n","import React, { createElement, CSSProperties } from \"react\";\r\n\r\nexport default function createNodeWrapper(\r\n node: React.ReactElement<any>,\r\n className: string,\r\n style: CSSProperties\r\n) {\r\n if (!node) return null;\r\n\r\n return createElement(\r\n \"div\",\r\n {\r\n className: className + (node?.props?.className \|\| \"\"),\r\n style: {\r\n ...style,\r\n ...node?.props?.style,\r\n },\r\n },\r\n node\r\n );\r\n}\r\n","import React, { CSSProperties } from \"react\";\r\n\r\nexport default function createLeafNode(\r\n node: React.ReactElement<any>,\r\n className: string,\r\n style: CSSProperties\r\n): React.ReactElement {\r\n return React.cloneElement(node, {\r\n ...node.props,\r\n className: className + (node.props.className \|\| \"\"),\r\n style: {\r\n ...style,\r\n ...node.props.style,\r\n },\r\n } as typeof node.props);\r\n}\r\n","import { CSSProperties } from \"react\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\n\r\nconst getAnimation = (\r\n animation: string,\r\n animationSpeed: number,\r\n background: string\r\n) => {\r\n switch (animation) {\r\n case \"animation-1\":\r\n return {\r\n animation: `react-skeletonify-animation-1 ${animationSpeed}s ease-in-out infinite `,\r\n background: background,\r\n animationDelay: \"0.5s\",\r\n };\r\n case \"animation-2\":\r\n return {\r\n animation: `react-skeletonify-animation-2 ${animationSpeed}s infinite`,\r\n background: `linear-gradient(120deg, ${background} 30%, #f0f0f0 38%, #f0f0f0 40%, ${background} 48%)`,\r\n backgroundSize: \"200% 100%\",\r\n backgroundPosition: \"100% 0\",\r\n };\r\n case \"animation-3\":\r\n return {\r\n animation: `react-skeletonify-animation-3 ${animationSpeed}s linear infinite alternate`,\r\n backgroundColor: background,\r\n };\r\n }\r\n};\r\n\r\nexport default (config: SkeletonConfig) => {\r\n const { animationSpeed, background, border, borderRadius, animation, style } =\r\n config;\r\n\r\n const skeletonAnimation: CSSProperties = {\r\n ...getAnimation(animation, animationSpeed, background),\r\n border,\r\n borderRadius,\r\n ...style,\r\n };\r\n\r\n return skeletonAnimation;\r\n};\r\n","// --- Text & Content ---\r\nexport const TEXT_TAGS = [\r\n \"p\",\r\n \"span\",\r\n \"h1\",\r\n \"h2\",\r\n \"h3\",\r\n \"h4\",\r\n \"h5\",\r\n \"h6\",\r\n \"b\",\r\n \"strong\",\r\n \"i\",\r\n \"em\",\r\n \"u\",\r\n \"mark\",\r\n \"small\",\r\n \"sup\",\r\n \"sub\",\r\n \"abbr\",\r\n \"cite\",\r\n \"q\",\r\n \"blockquote\",\r\n \"code\",\r\n \"pre\",\r\n \"samp\",\r\n \"kbd\",\r\n \"var\",\r\n \"time\",\r\n \"br\",\r\n \"wbr\",\r\n];\r\n\r\n// --- Sectioning / Structure ---\r\nexport const STRUCTURE_TAGS = [\r\n \"html\",\r\n \"head\",\r\n \"body\",\r\n \"main\",\r\n \"header\",\r\n \"footer\",\r\n \"nav\",\r\n \"section\",\r\n \"article\",\r\n \"aside\",\r\n];\r\n\r\n// --- Metadata ---\r\nexport const METADATA_TAGS = [\"base\", \"link\", \"meta\", \"style\", \"title\"];\r\n\r\n// --- Lists ---\r\nexport const LIST_TAGS = [\"ul\", \"ol\", \"li\", \"dl\", \"dt\", \"dd\"];\r\n\r\n// --- Tables ---\r\nexport const TABLE_TAGS = [\r\n \"table\",\r\n \"caption\",\r\n \"thead\",\r\n \"tbody\",\r\n \"tfoot\",\r\n \"tr\",\r\n \"th\",\r\n \"td\",\r\n \"col\",\r\n \"colgroup\",\r\n];\r\n\r\n// --- Forms & Inputs ---\r\nexport const FORM_TAGS = [\r\n \"form\",\r\n \"input\",\r\n \"textarea\",\r\n \"button\",\r\n \"label\",\r\n \"select\",\r\n \"option\",\r\n \"optgroup\",\r\n \"fieldset\",\r\n \"legend\",\r\n \"datalist\",\r\n \"output\",\r\n \"meter\",\r\n \"progress\",\r\n];\r\n\r\n// --- Media ---\r\nexport const MEDIA_TAGS = [\r\n \"img\",\r\n \"audio\",\r\n \"video\",\r\n \"source\",\r\n \"track\",\r\n \"picture\",\r\n \"iframe\",\r\n \"embed\",\r\n \"object\",\r\n \"map\",\r\n \"area\",\r\n \"canvas\",\r\n];\r\n\r\n// --- Interactive ---\r\nexport const INTERACTIVE_TAGS = [\r\n \"details\",\r\n \"summary\",\r\n \"dialog\",\r\n \"script\",\r\n \"noscript\",\r\n \"template\",\r\n];\r\n\r\n// --- Other / Inline semantics ---\r\nexport const MISC_TAGS = [\"ins\", \"del\", \"s\", \"bdi\", \"bdo\", \"ruby\", \"rt\", \"rp\"];\r\n","import {\r\n FORM_TAGS,\r\n INTERACTIVE_TAGS,\r\n LIST_TAGS,\r\n MEDIA_TAGS,\r\n METADATA_TAGS,\r\n MISC_TAGS,\r\n STRUCTURE_TAGS,\r\n TABLE_TAGS,\r\n TEXT_TAGS,\r\n} from \"../constants/tags\";\r\nimport { HtmlTagGroup } from \"../context/skeleton-config\";\r\n\r\nexport default function checkTagInGroup(\r\n tag: string,\r\n groups: HtmlTagGroup[]\r\n): boolean {\r\n return groups.some((group) => {\r\n switch (group) {\r\n case \"TEXT_TAGS\":\r\n return TEXT_TAGS.includes(tag);\r\n case \"STRUCTURE_TAGS\":\r\n return STRUCTURE_TAGS.includes(tag);\r\n case \"METADATA_TAGS\":\r\n return METADATA_TAGS.includes(tag);\r\n case \"LIST_TAGS\":\r\n return LIST_TAGS.includes(tag);\r\n case \"TABLE_TAGS\":\r\n return TABLE_TAGS.includes(tag);\r\n case \"FORM_TAGS\":\r\n return FORM_TAGS.includes(tag);\r\n case \"MEDIA_TAGS\":\r\n return MEDIA_TAGS.includes(tag);\r\n case \"INTERACTIVE_TAGS\":\r\n return INTERACTIVE_TAGS.includes(tag);\r\n case \"MISC_TAGS\":\r\n return MISC_TAGS.includes(tag);\r\n }\r\n });\r\n}\r\n","import React from \"react\";\r\n\r\ninterface SkeletonIgnoreProps {\r\n children: React.ReactNode;\r\n}\r\n\r\nconst SkeletonIgnore: React.FC<SkeletonIgnoreProps> = ({ children }) => {\r\n return <>{children}</>;\r\n};\r\n\r\nexport default SkeletonIgnore;\r\n","import React from \"react\";\r\n\r\ninterface SkeletonKeepProps {\r\n children: React.ReactNode;\r\n}\r\n\r\nconst SkeletonKeep: React.FC<SkeletonKeepProps> = ({ children }) => {\r\n return <>{children}</>;\r\n};\r\n\r\nexport default SkeletonKeep;\r\n","import React from \"react\";\r\n\r\ninterface SkeletonUniteProps {\r\n children: React.ReactNode;\r\n className?: string;\r\n style?: React.CSSProperties;\r\n}\r\n\r\nconst SkeletonUnite: React.FC<SkeletonUniteProps> = (props) => {\r\n const { children, className, style } = props;\r\n\r\n if (className && className.includes(\"react-skeletonify\")) {\r\n return (\r\n <div className={className} style={style}>\r\n <div style={{ opacity: 0 }}>{children}</div>\r\n </div>\r\n );\r\n }\r\n\r\n return children;\r\n};\r\n\r\nexport default SkeletonUnite;\r\n","import React from \"react\";\r\nimport { LIST_TAGS, TEXT_TAGS } from \"../constants/tags\";\r\n\r\nimport SkeletonIgnore from \"../components/SkeletonIgnore\";\r\nimport SkeletonKeep from \"../components/SkeletonKeep\";\r\nimport SkeletonUnite from \"../components/SkeletonUnite\";\r\n\r\nexport const isTextElement = (elementType: string): boolean => {\r\n return TEXT_TAGS.includes(elementType) \|\| LIST_TAGS.includes(elementType);\r\n};\r\n\r\nexport const isSkeletonIgnoreComponent = (\r\n element: React.ComponentType<any> \| string\r\n): boolean => element === SkeletonIgnore;\r\n\r\nexport const isSkeletonKeepComponent = (\r\n element: React.ComponentType<any> \| string\r\n): boolean => element === SkeletonKeep;\r\n\r\nexport const isSkeletonUniteComponent = (\r\n element: React.ComponentType<any> \| string\r\n): boolean => element === SkeletonUnite;\r\n","import { CSSProperties, useMemo } from \"react\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\nimport { useSkeleton } from \"../context/SkeletonContext\";\r\n\r\nexport default (\r\n overrideConfig?: Partial<SkeletonConfig>,\r\n style?: CSSProperties\r\n) => {\r\n const mainConfig = useSkeleton();\r\n\r\n const config: SkeletonConfig = useMemo(\r\n () => ({\r\n ...mainConfig,\r\n ...overrideConfig,\r\n style: { ...mainConfig.style, ...overrideConfig?.style, ...style },\r\n }),\r\n [overrideConfig, mainConfig]\r\n );\r\n\r\n return config;\r\n};\r\n","import React, {\r\n createContext,\r\n CSSProperties,\r\n useContext,\r\n useMemo,\r\n} from \"react\";\r\nimport {\r\n SkeletonConfig,\r\n defaultBackground,\r\n defaultValues,\r\n} from \"./skeleton-config\";\r\n\r\nconst SkeletonContext = createContext<SkeletonConfig>(defaultValues);\r\ninterface SkeletonProviderProps {\r\n children: React.ReactNode;\r\n config?: Partial<SkeletonConfig>;\r\n style?: CSSProperties;\r\n}\r\n\r\nexport const SkeletonProvider: React.FC<SkeletonProviderProps> = (props) => {\r\n const { children, config, style } = props;\r\n const { animation = defaultValues.animation, background } = config \|\| {};\r\n\r\n const value: SkeletonConfig = useMemo(\r\n () => ({\r\n ...defaultValues,\r\n ...config,\r\n background: background ? background : defaultBackground[animation],\r\n style: { ...defaultValues.style, ...config?.style, ...style },\r\n }),\r\n [animation, background, config, style]\r\n );\r\n\r\n return (\r\n <SkeletonContext.Provider value={value}>\r\n {children}\r\n </SkeletonContext.Provider>\r\n );\r\n};\r\n\r\nexport const useSkeleton = () => useContext(SkeletonContext);\r\n","import { CSSProperties } from \"react\";\r\n\r\nexport const HTML_TAG_GROUPS = [\r\n \"TEXT_TAGS\",\r\n \"STRUCTURE_TAGS\",\r\n \"METADATA_TAGS\",\r\n \"LIST_TAGS\",\r\n \"TABLE_TAGS\",\r\n \"FORM_TAGS\",\r\n \"MEDIA_TAGS\",\r\n \"INTERACTIVE_TAGS\",\r\n \"MISC_TAGS\",\r\n] as const;\r\n\r\nexport type HtmlTagGroup = (typeof HTML_TAG_GROUPS)[number];\r\n\r\nexport const defaultBackground = {\r\n \"animation-1\": \"#aeaeae\",\r\n \"animation-2\": \"#e5e5e5\",\r\n \"animation-3\": \"hsl(210, 20%, 90%)\",\r\n};\r\n\r\nexport type SkeletonConfig = {\r\n animationSpeed: number;\r\n background: string;\r\n border: string;\r\n borderRadius: string;\r\n textTagsMargin: string;\r\n className?: string;\r\n style?: CSSProperties;\r\n animation: \"animation-1\" \| \"animation-2\";\r\n exceptTags: string[];\r\n exceptTagGroups: HtmlTagGroup[];\r\n};\r\n\r\nexport const defaultValues: SkeletonConfig = {\r\n animationSpeed: 3,\r\n background: \"#aeaeae\",\r\n border: \"none\",\r\n borderRadius: \"0\",\r\n textTagsMargin: \"0\",\r\n className: \"\",\r\n style: {},\r\n animation: \"animation-1\",\r\n exceptTags: [],\r\n exceptTagGroups: [],\r\n};\r\n","import React, { CSSProperties } from \"react\";\r\nimport SkeletonElement from \"./SkeletonElement\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\nimport createConfig from \"../utils/create-config\";\r\n\r\ninterface SkeletonWrapperProps {\r\n loading: boolean;\r\n children: React.ReactNode;\r\n overrideConfig?: Partial<SkeletonConfig>;\r\n style?: CSSProperties;\r\n}\r\n\r\nconst SkeletonWrapper: React.FC<SkeletonWrapperProps> = (props) => {\r\n const { loading, children, overrideConfig, style } = props;\r\n const config = createConfig(overrideConfig, style);\r\n\r\n if (loading) {\r\n return <SkeletonElement config={config}>{children}</SkeletonElement>;\r\n }\r\n return children;\r\n};\r\n\r\nexport default SkeletonWrapper;\r\n","import React, { CSSProperties } from \"react\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\nimport createStyle from \"../utils/create-style\";\r\nimport createConfig from \"../utils/create-config\";\r\n\r\nexport interface SkeletonLeafProps {\r\n loading: boolean;\r\n children: React.ReactNode;\r\n overrideConfig?: Partial<SkeletonConfig>;\r\n style?: CSSProperties;\r\n}\r\n\r\nconst SkeletonLeaf: React.FC<SkeletonLeafProps> = (props) => {\r\n const { loading, children, overrideConfig, style } = props;\r\n const config = createConfig(overrideConfig, style);\r\n\r\n const skeletonStyle = createStyle(config);\r\n const className = `react-skeletonify ${config.className \|\| \"\"}`;\r\n\r\n if (loading) {\r\n return (\r\n <div className={className} style={skeletonStyle}>\r\n <div style={{ opacity: 0 }}>{children}</div>\r\n </div>\r\n );\r\n }\r\n\r\n return children;\r\n};\r\n\r\nexport default SkeletonLeaf;\r\n"],"mappings":"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","names":["import_react","import_react","import_react","React","import_jsx_runtime","import_jsx_runtime","React","React","import_react","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.mjs CHANGED Viewed

@@ -1,6 +1,3 @@
-// src/components/SkeletonWrapper.tsx
-import { useMemo as useMemo2 } from "react";
 // src/components/SkeletonElement.tsx
 import React4 from "react";
@@ -196,10 +193,38 @@ function checkTagInGroup(tag, groups) {
   });
 }
-// src/utils/is-text-element.ts
-var is_text_element_default = (elementType) => {
+// src/components/SkeletonIgnore.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var SkeletonIgnore = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var SkeletonIgnore_default = SkeletonIgnore;
+// src/components/SkeletonKeep.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+var SkeletonKeep = ({ children }) => {
+  return /* @__PURE__ */ jsx2(Fragment2, { children });
+};
+var SkeletonKeep_default = SkeletonKeep;
+// src/components/SkeletonUnite.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SkeletonUnite = (props) => {
+  const { children, className, style } = props;
+  if (className && className.includes("react-skeletonify")) {
+    return /* @__PURE__ */ jsx3("div", { className, style, children: /* @__PURE__ */ jsx3("div", { style: { opacity: 0 }, children }) });
+  }
+  return children;
+};
+var SkeletonUnite_default = SkeletonUnite;
+// src/utils/check-element.ts
+var isTextElement = (elementType) => {
   return TEXT_TAGS.includes(elementType) || LIST_TAGS.includes(elementType);
 };
+var isSkeletonIgnoreComponent = (element) => element === SkeletonIgnore_default;
+var isSkeletonKeepComponent = (element) => element === SkeletonKeep_default;
+var isSkeletonUniteComponent = (element) => element === SkeletonUnite_default;
 // src/hooks/useAddSkelton.ts
 function useAddSkelton(config) {
@@ -207,20 +232,20 @@ function useAddSkelton(config) {
   const CLASS_NAME = `react-skeletonify ${className} `;
   const style = create_style_default(config);
   const addSkeleton = (node) => {
-    if (!React3.isValidElement(node))
+    if (!React3.isValidElement(node)) {
       return createNodeWrapper(node, CLASS_NAME, style);
+    }
     const element = node;
     const { children } = element.props;
     const elementType = element.type;
+    if (isSkeletonKeepComponent(elementType)) return element;
+    if (isSkeletonIgnoreComponent(elementType)) return null;
+    if (isSkeletonUniteComponent(elementType)) {
+      return createLeafNode(element, CLASS_NAME, style);
+    }
     if (typeof elementType === "string") {
-      if (exceptTags.includes(elementType)) {
-        return element;
-      }
-      const isRestrictedGroupTag = checkTagInGroup(
-        elementType,
-        exceptTagGroups
-      );
-      if (isRestrictedGroupTag) return element;
+      if (exceptTags.includes(elementType)) return element;
+      if (checkTagInGroup(elementType, exceptTagGroups)) return element;
     }
     const hasChildren = React3.Children.count(children) > 0;
     const isValidChildren = typeof children !== "string";
@@ -228,8 +253,7 @@ function useAddSkelton(config) {
       const rendered = elementType(element.props);
       return addSkeleton(rendered);
     }
-    const isTextTag = is_text_element_default(elementType);
-    if (isTextTag) {
+    if (isTextElement(elementType)) {
       return createLeafNode(element, CLASS_NAME, {
         ...style,
         margin: textTagsMargin
@@ -259,6 +283,9 @@ var SkeletonElement = (props) => {
 };
 var SkeletonElement_default = SkeletonElement;
+// src/utils/create-config.ts
+import { useMemo as useMemo2 } from "react";
 // src/context/SkeletonContext.tsx
 import {
   createContext,
@@ -286,7 +313,7 @@ var defaultValues = {
 };
 // src/context/SkeletonContext.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var SkeletonContext = createContext(defaultValues);
 var SkeletonProvider = (props) => {
   const { children, config, style } = props;
@@ -300,14 +327,12 @@ var SkeletonProvider = (props) => {
     }),
     [animation, background, config, style]
   );
-  return /* @__PURE__ */ jsx(SkeletonContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx4(SkeletonContext.Provider, { value, children });
 };
 var useSkeleton = () => useContext(SkeletonContext);
-// src/components/SkeletonWrapper.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var SkeletonWrapper = (props) => {
-  const { loading, children, overrideConfig, style } = props;
+// src/utils/create-config.ts
+var create_config_default = (overrideConfig, style) => {
   const mainConfig = useSkeleton();
   const config = useMemo2(
     () => ({
@@ -317,14 +342,40 @@ var SkeletonWrapper = (props) => {
     }),
     [overrideConfig, mainConfig]
   );
+  return config;
+};
+// src/components/SkeletonWrapper.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SkeletonWrapper = (props) => {
+  const { loading, children, overrideConfig, style } = props;
+  const config = create_config_default(overrideConfig, style);
   if (loading) {
-    return /* @__PURE__ */ jsx2(SkeletonElement_default, { config, children });
+    return /* @__PURE__ */ jsx5(SkeletonElement_default, { config, children });
   }
   return children;
 };
 var SkeletonWrapper_default = SkeletonWrapper;
+// src/components/SkeletonLeaf.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SkeletonLeaf = (props) => {
+  const { loading, children, overrideConfig, style } = props;
+  const config = create_config_default(overrideConfig, style);
+  const skeletonStyle = create_style_default(config);
+  const className = `react-skeletonify ${config.className || ""}`;
+  if (loading) {
+    return /* @__PURE__ */ jsx6("div", { className, style: skeletonStyle, children: /* @__PURE__ */ jsx6("div", { style: { opacity: 0 }, children }) });
+  }
+  return children;
+};
+var SkeletonLeaf_default = SkeletonLeaf;
 export {
+  SkeletonIgnore_default as SkeletonIgnore,
+  SkeletonKeep_default as SkeletonKeep,
+  SkeletonLeaf_default as SkeletonLeaf,
   SkeletonProvider,
+  SkeletonUnite_default as SkeletonUnite,
   SkeletonWrapper_default as SkeletonWrapper,
   useSkeleton
 };

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SkeletonWrapper.tsx","../src/components/SkeletonElement.tsx","../src/hooks/useAddSkelton.ts","../src/utils/create-node-wrapper.ts","../src/utils/create-leaf-node.ts","../src/utils/create-style.ts","../src/constants/tags.ts","../src/utils/check-tag-in-group.ts","../src/utils/is-text-element.ts","../src/context/SkeletonContext.tsx","../src/context/skeleton-config.ts"],"sourcesContent":["import React, { CSSProperties, useMemo } from \"react\";\nimport SkeletonElement from \"./SkeletonElement\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\nimport { useSkeleton } from \"../context/SkeletonContext\";\n\ninterface SkeletonWrapperProps {\n loading: boolean;\n children: React.ReactNode;\n overrideConfig?: Partial<SkeletonConfig>;\n style?: CSSProperties;\n}\n\nconst SkeletonWrapper: React.FC<SkeletonWrapperProps> = (props) => {\n const { loading, children, overrideConfig, style } = props;\n const mainConfig = useSkeleton();\n\n const config: SkeletonConfig = useMemo(\n () => ({\n ...mainConfig,\n ...overrideConfig,\n style: { ...mainConfig.style, ...overrideConfig?.style, ...style },\n }),\n [overrideConfig, mainConfig]\n );\n\n if (loading) {\n return <SkeletonElement config={config}>{children}</SkeletonElement>;\n }\n return children;\n};\n\nexport default SkeletonWrapper;\n","import React from \"react\";\nimport useAddSkelton from \"../hooks/useAddSkelton\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\n\ninterface SkeletonElementProps {\n children: React.ReactNode;\n config: SkeletonConfig;\n}\n\nconst SkeletonElement: React.FC<SkeletonElementProps> = (props) => {\n const { children, config } = props;\n const addSkeleton = useAddSkelton(config);\n\n return React.Children.map(children, (child) => addSkeleton(child));\n};\n\nexport default SkeletonElement;\n","import React from \"react\";\nimport createNodeWrapper from \"../utils/create-node-wrapper\";\nimport createLeafNode from \"../utils/create-leaf-node\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\nimport createStyle from \"../utils/create-style\";\nimport checkTagInGroup from \"../utils/check-tag-in-group\";\nimport isTextElement from \"../utils/is-text-element\";\n\nfunction useAddSkelton(config: SkeletonConfig) {\n const { className, exceptTags, exceptTagGroups, textTagsMargin } = config;\n const CLASS_NAME = `react-skeletonify ${className} `;\n const style = createStyle(config);\n\n const addSkeleton = (node: React.ReactNode): React.ReactNode => {\n if (!React.isValidElement(node))\n return createNodeWrapper(node as any, CLASS_NAME, style);\n\n const element = node as React.ReactElement<any>;\n const { children } = element.props;\n const elementType = element.type;\n\n if (typeof elementType === \"string\") {\n if (exceptTags.includes(elementType)) {\n return element;\n }\n const isRestrictedGroupTag = checkTagInGroup(\n elementType,\n exceptTagGroups\n );\n\n if (isRestrictedGroupTag) return element;\n }\n\n const hasChildren = React.Children.count(children) > 0;\n const isValidChildren = typeof children !== \"string\";\n\n if (typeof elementType === \"function\") {\n const rendered = (elementType as any)(element.props);\n return addSkeleton(rendered);\n }\n\n const isTextTag = isTextElement(elementType);\n\n if (isTextTag) {\n return createLeafNode(element, CLASS_NAME, {\n ...style,\n margin: textTagsMargin,\n });\n }\n\n if (elementType === \"img\") {\n return createNodeWrapper(element, CLASS_NAME, style);\n }\n\n if (hasChildren && isValidChildren) {\n const childWithSkeletons = React.Children.map(children, addSkeleton);\n\n return React.cloneElement(element, {\n ...element.props,\n children: childWithSkeletons,\n } as typeof element.props);\n }\n\n return createLeafNode(element, CLASS_NAME, style);\n };\n\n return addSkeleton;\n}\n\nexport default useAddSkelton;\n","import React, { createElement, CSSProperties } from \"react\";\n\nexport default function createNodeWrapper(\n node: React.ReactElement<any>,\n className: string,\n style: CSSProperties\n) {\n if (!node) return null;\n\n return createElement(\n \"div\",\n {\n className: className + (node?.props?.className \|\| \"\"),\n style: {\n ...style,\n ...node?.props?.style,\n },\n },\n node\n );\n}\n","import React, { CSSProperties } from \"react\";\n\nexport default function createLeafNode(\n node: React.ReactElement<any>,\n className: string,\n style: CSSProperties\n): React.ReactElement {\n return React.cloneElement(node, {\n ...node.props,\n className: className + (node.props.className \|\| \"\"),\n style: {\n ...style,\n ...node.props.style,\n },\n } as typeof node.props);\n}\n","import { CSSProperties } from \"react\";\nimport { SkeletonConfig } from \"../context/skeleton-config\";\n\nconst getAnimation = (\n animation: string,\n animationSpeed: number,\n background: string\n) => {\n switch (animation) {\n case \"animation-1\":\n return {\n animation: `react-skeletonify-animation-1 ${animationSpeed}s ease-in-out infinite `,\n background: background,\n animationDelay: \"0.5s\",\n };\n case \"animation-2\":\n return {\n animation: `react-skeletonify-animation-2 ${animationSpeed}s infinite`,\n background: `linear-gradient(120deg, ${background} 30%, #f0f0f0 38%, #f0f0f0 40%, ${background} 48%)`,\n backgroundSize: \"200% 100%\",\n backgroundPosition: \"100% 0\",\n };\n case \"animation-3\":\n return {\n animation: `react-skeletonify-animation-3 ${animationSpeed}s linear infinite alternate`,\n backgroundColor: background,\n };\n }\n};\n\nexport default (config: SkeletonConfig) => {\n const { animationSpeed, background, border, borderRadius, animation, style } =\n config;\n\n const skeletonAnimation: CSSProperties = {\n ...getAnimation(animation, animationSpeed, background),\n border,\n borderRadius,\n ...style,\n };\n\n return skeletonAnimation;\n};\n","// --- Text & Content ---\nexport const TEXT_TAGS = [\n \"p\",\n \"span\",\n \"h1\",\n \"h2\",\n \"h3\",\n \"h4\",\n \"h5\",\n \"h6\",\n \"b\",\n \"strong\",\n \"i\",\n \"em\",\n \"u\",\n \"mark\",\n \"small\",\n \"sup\",\n \"sub\",\n \"abbr\",\n \"cite\",\n \"q\",\n \"blockquote\",\n \"code\",\n \"pre\",\n \"samp\",\n \"kbd\",\n \"var\",\n \"time\",\n \"br\",\n \"wbr\",\n];\n\n// --- Sectioning / Structure ---\nexport const STRUCTURE_TAGS = [\n \"html\",\n \"head\",\n \"body\",\n \"main\",\n \"header\",\n \"footer\",\n \"nav\",\n \"section\",\n \"article\",\n \"aside\",\n];\n\n// --- Metadata ---\nexport const METADATA_TAGS = [\"base\", \"link\", \"meta\", \"style\", \"title\"];\n\n// --- Lists ---\nexport const LIST_TAGS = [\"ul\", \"ol\", \"li\", \"dl\", \"dt\", \"dd\"];\n\n// --- Tables ---\nexport const TABLE_TAGS = [\n \"table\",\n \"caption\",\n \"thead\",\n \"tbody\",\n \"tfoot\",\n \"tr\",\n \"th\",\n \"td\",\n \"col\",\n \"colgroup\",\n];\n\n// --- Forms & Inputs ---\nexport const FORM_TAGS = [\n \"form\",\n \"input\",\n \"textarea\",\n \"button\",\n \"label\",\n \"select\",\n \"option\",\n \"optgroup\",\n \"fieldset\",\n \"legend\",\n \"datalist\",\n \"output\",\n \"meter\",\n \"progress\",\n];\n\n// --- Media ---\nexport const MEDIA_TAGS = [\n \"img\",\n \"audio\",\n \"video\",\n \"source\",\n \"track\",\n \"picture\",\n \"iframe\",\n \"embed\",\n \"object\",\n \"map\",\n \"area\",\n \"canvas\",\n];\n\n// --- Interactive ---\nexport const INTERACTIVE_TAGS = [\n \"details\",\n \"summary\",\n \"dialog\",\n \"script\",\n \"noscript\",\n \"template\",\n];\n\n// --- Other / Inline semantics ---\nexport const MISC_TAGS = [\"ins\", \"del\", \"s\", \"bdi\", \"bdo\", \"ruby\", \"rt\", \"rp\"];\n","import {\n FORM_TAGS,\n INTERACTIVE_TAGS,\n LIST_TAGS,\n MEDIA_TAGS,\n METADATA_TAGS,\n MISC_TAGS,\n STRUCTURE_TAGS,\n TABLE_TAGS,\n TEXT_TAGS,\n} from \"../constants/tags\";\nimport { HtmlTagGroup } from \"../context/skeleton-config\";\n\nexport default function checkTagInGroup(\n tag: string,\n groups: HtmlTagGroup[]\n): boolean {\n return groups.some((group) => {\n switch (group) {\n case \"TEXT_TAGS\":\n return TEXT_TAGS.includes(tag);\n case \"STRUCTURE_TAGS\":\n return STRUCTURE_TAGS.includes(tag);\n case \"METADATA_TAGS\":\n return METADATA_TAGS.includes(tag);\n case \"LIST_TAGS\":\n return LIST_TAGS.includes(tag);\n case \"TABLE_TAGS\":\n return TABLE_TAGS.includes(tag);\n case \"FORM_TAGS\":\n return FORM_TAGS.includes(tag);\n case \"MEDIA_TAGS\":\n return MEDIA_TAGS.includes(tag);\n case \"INTERACTIVE_TAGS\":\n return INTERACTIVE_TAGS.includes(tag);\n case \"MISC_TAGS\":\n return MISC_TAGS.includes(tag);\n }\n });\n}\n","import { LIST_TAGS, TEXT_TAGS } from \"../constants/tags\";\n\nexport default (elementType: string) => {\n return TEXT_TAGS.includes(elementType) \|\| LIST_TAGS.includes(elementType);\n};\n","import React, {\n createContext,\n CSSProperties,\n useContext,\n useMemo,\n} from \"react\";\nimport {\n SkeletonConfig,\n defaultBackground,\n defaultValues,\n} from \"./skeleton-config\";\n\nconst SkeletonContext = createContext<SkeletonConfig>(defaultValues);\ninterface SkeletonProviderProps {\n children: React.ReactNode;\n config?: Partial<SkeletonConfig>;\n style?: CSSProperties;\n}\n\nexport const SkeletonProvider: React.FC<SkeletonProviderProps> = (props) => {\n const { children, config, style } = props;\n const { animation = defaultValues.animation, background } = config \|\| {};\n\n const value: SkeletonConfig = useMemo(\n () => ({\n ...defaultValues,\n ...config,\n background: background ? background : defaultBackground[animation],\n style: { ...defaultValues.style, ...config?.style, ...style },\n }),\n [animation, background, config, style]\n );\n\n return (\n <SkeletonContext.Provider value={value}>\n {children}\n </SkeletonContext.Provider>\n );\n};\n\nexport const useSkeleton = () => useContext(SkeletonContext);\n","import { CSSProperties } from \"react\";\n\nexport const HTML_TAG_GROUPS = [\n \"TEXT_TAGS\",\n \"STRUCTURE_TAGS\",\n \"METADATA_TAGS\",\n \"LIST_TAGS\",\n \"TABLE_TAGS\",\n \"FORM_TAGS\",\n \"MEDIA_TAGS\",\n \"INTERACTIVE_TAGS\",\n \"MISC_TAGS\",\n] as const;\n\nexport type HtmlTagGroup = (typeof HTML_TAG_GROUPS)[number];\n\nexport const defaultBackground = {\n \"animation-1\": \"#aeaeae\",\n \"animation-2\": \"#e5e5e5\",\n \"animation-3\": \"hsl(210, 20%, 90%)\",\n};\n\nexport type SkeletonConfig = {\n animationSpeed: number;\n background: string;\n border: string;\n borderRadius: string;\n textTagsMargin: string;\n className?: string;\n style?: CSSProperties;\n animation: \"animation-1\" \| \"animation-2\";\n exceptTags: string[];\n exceptTagGroups: HtmlTagGroup[];\n};\n\nexport const defaultValues: SkeletonConfig = {\n animationSpeed: 3,\n background: \"#aeaeae\",\n border: \"none\",\n borderRadius: \"0\",\n textTagsMargin: \"0\",\n className: \"\",\n style: {},\n animation: \"animation-1\",\n exceptTags: [],\n exceptTagGroups: [],\n};\n"],"mappings":";AAAA,SAA+B,WAAAA,gBAAe;;;ACA9C,OAAOC,YAAW;;;ACAlB,OAAOC,YAAW;;;ACAlB,SAAgB,qBAAoC;AAErC,SAAR,kBACL,MACA,WACA,OACA;AANF;AAOE,MAAI,CAAC,KAAM,QAAO;AAElB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,WAAW,eAAa,kCAAM,UAAN,mBAAa,cAAa;AAAA,MAClD,OAAO;AAAA,QACL,GAAG;AAAA,QACH,IAAG,kCAAM,UAAN,mBAAa;AAAA,MAClB;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;;;ACpBA,OAAOC,YAA8B;AAEtB,SAAR,eACL,MACA,WACA,OACoB;AACpB,SAAOA,OAAM,aAAa,MAAM;AAAA,IAC9B,GAAG,KAAK;AAAA,IACR,WAAW,aAAa,KAAK,MAAM,aAAa;AAAA,IAChD,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,KAAK,MAAM;AAAA,IAChB;AAAA,EACF,CAAsB;AACxB;;;ACZA,IAAM,eAAe,CACnB,WACA,gBACA,eACG;AACH,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO;AAAA,QACL,WAAW,iCAAiC,cAAc;AAAA,QAC1D;AAAA,QACA,gBAAgB;AAAA,MAClB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW,iCAAiC,cAAc;AAAA,QAC1D,YAAY,2BAA2B,UAAU,mCAAmC,UAAU;AAAA,QAC9F,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,MACtB;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW,iCAAiC,cAAc;AAAA,QAC1D,iBAAiB;AAAA,MACnB;AAAA,EACJ;AACF;AAEA,IAAO,uBAAQ,CAAC,WAA2B;AACzC,QAAM,EAAE,gBAAgB,YAAY,QAAQ,cAAc,WAAW,MAAM,IACzE;AAEF,QAAM,oBAAmC;AAAA,IACvC,GAAG,aAAa,WAAW,gBAAgB,UAAU;AAAA,IACrD;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AAEA,SAAO;AACT;;;ACzCO,IAAM,YAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,iBAAiB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,gBAAgB,CAAC,QAAQ,QAAQ,QAAQ,SAAS,OAAO;AAG/D,IAAM,YAAY,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI;AAGrD,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,YAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,IAAM,YAAY,CAAC,OAAO,OAAO,KAAK,OAAO,OAAO,QAAQ,MAAM,IAAI;;;ACnG9D,SAAR,gBACL,KACA,QACS;AACT,SAAO,OAAO,KAAK,CAAC,UAAU;AAC5B,YAAQ,OAAO;AAAA,MACb,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,MAC/B,KAAK;AACH,eAAO,eAAe,SAAS,GAAG;AAAA,MACpC,KAAK;AACH,eAAO,cAAc,SAAS,GAAG;AAAA,MACnC,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,MAC/B,KAAK;AACH,eAAO,WAAW,SAAS,GAAG;AAAA,MAChC,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,MAC/B,KAAK;AACH,eAAO,WAAW,SAAS,GAAG;AAAA,MAChC,KAAK;AACH,eAAO,iBAAiB,SAAS,GAAG;AAAA,MACtC,KAAK;AACH,eAAO,UAAU,SAAS,GAAG;AAAA,IACjC;AAAA,EACF,CAAC;AACH;;;ACrCA,IAAO,0BAAQ,CAAC,gBAAwB;AACtC,SAAO,UAAU,SAAS,WAAW,KAAK,UAAU,SAAS,WAAW;AAC1E;;;ANIA,SAAS,cAAc,QAAwB;AAC7C,QAAM,EAAE,WAAW,YAAY,iBAAiB,eAAe,IAAI;AACnE,QAAM,aAAa,qBAAqB,SAAS;AACjD,QAAM,QAAQ,qBAAY,MAAM;AAEhC,QAAM,cAAc,CAAC,SAA2C;AAC9D,QAAI,CAACC,OAAM,eAAe,IAAI;AAC5B,aAAO,kBAAkB,MAAa,YAAY,KAAK;AAEzD,UAAM,UAAU;AAChB,UAAM,EAAE,SAAS,IAAI,QAAQ;AAC7B,UAAM,cAAc,QAAQ;AAE5B,QAAI,OAAO,gBAAgB,UAAU;AACnC,UAAI,WAAW,SAAS,WAAW,GAAG;AACpC,eAAO;AAAA,MACT;AACA,YAAM,uBAAuB;AAAA,QAC3B;AAAA,QACA;AAAA,MACF;AAEA,UAAI,qBAAsB,QAAO;AAAA,IACnC;AAEA,UAAM,cAAcA,OAAM,SAAS,MAAM,QAAQ,IAAI;AACrD,UAAM,kBAAkB,OAAO,aAAa;AAE5C,QAAI,OAAO,gBAAgB,YAAY;AACrC,YAAM,WAAY,YAAoB,QAAQ,KAAK;AACnD,aAAO,YAAY,QAAQ;AAAA,IAC7B;AAEA,UAAM,YAAY,wBAAc,WAAW;AAE3C,QAAI,WAAW;AACb,aAAO,eAAe,SAAS,YAAY;AAAA,QACzC,GAAG;AAAA,QACH,QAAQ;AAAA,MACV,CAAC;AAAA,IACH;AAEA,QAAI,gBAAgB,OAAO;AACzB,aAAO,kBAAkB,SAAS,YAAY,KAAK;AAAA,IACrD;AAEA,QAAI,eAAe,iBAAiB;AAClC,YAAM,qBAAqBA,OAAM,SAAS,IAAI,UAAU,WAAW;AAEnE,aAAOA,OAAM,aAAa,SAAS;AAAA,QACjC,GAAG,QAAQ;AAAA,QACX,UAAU;AAAA,MACZ,CAAyB;AAAA,IAC3B;AAEA,WAAO,eAAe,SAAS,YAAY,KAAK;AAAA,EAClD;AAEA,SAAO;AACT;AAEA,IAAO,wBAAQ;;;AD5Df,IAAM,kBAAkD,CAAC,UAAU;AACjE,QAAM,EAAE,UAAU,OAAO,IAAI;AAC7B,QAAM,cAAc,sBAAc,MAAM;AAExC,SAAOC,OAAM,SAAS,IAAI,UAAU,CAAC,UAAU,YAAY,KAAK,CAAC;AACnE;AAEA,IAAO,0BAAQ;;;AQhBf;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;;;ACWA,IAAM,oBAAoB;AAAA,EAC/B,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AACjB;AAeO,IAAM,gBAAgC;AAAA,EAC3C,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,EACX,YAAY,CAAC;AAAA,EACb,iBAAiB,CAAC;AACpB;;;ADZI;AAtBJ,IAAM,kBAAkB,cAA8B,aAAa;AAO5D,IAAM,mBAAoD,CAAC,UAAU;AAC1E,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI;AACpC,QAAM,EAAE,YAAY,cAAc,WAAW,WAAW,IAAI,UAAU,CAAC;AAEvE,QAAM,QAAwB;AAAA,IAC5B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,YAAY,aAAa,aAAa,kBAAkB,SAAS;AAAA,MACjE,OAAO,EAAE,GAAG,cAAc,OAAO,GAAG,iCAAQ,OAAO,GAAG,MAAM;AAAA,IAC9D;AAAA,IACA,CAAC,WAAW,YAAY,QAAQ,KAAK;AAAA,EACvC;AAEA,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OACvB,UACH;AAEJ;AAEO,IAAM,cAAc,MAAM,WAAW,eAAe;;;ATdhD,gBAAAC,YAAA;AAdX,IAAM,kBAAkD,CAAC,UAAU;AACjE,QAAM,EAAE,SAAS,UAAU,gBAAgB,MAAM,IAAI;AACrD,QAAM,aAAa,YAAY;AAE/B,QAAM,SAAyBC;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO,EAAE,GAAG,WAAW,OAAO,GAAG,iDAAgB,OAAO,GAAG,MAAM;AAAA,IACnE;AAAA,IACA,CAAC,gBAAgB,UAAU;AAAA,EAC7B;AAEA,MAAI,SAAS;AACX,WAAO,gBAAAD,KAAC,2BAAgB,QAAiB,UAAS;AAAA,EACpD;AACA,SAAO;AACT;AAEA,IAAO,0BAAQ;","names":["useMemo","React","React","React","React","React","jsx","useMemo"]}
1	+ {"version":3,"sources":["../src/components/SkeletonElement.tsx","../src/hooks/useAddSkelton.ts","../src/utils/create-node-wrapper.ts","../src/utils/create-leaf-node.ts","../src/utils/create-style.ts","../src/constants/tags.ts","../src/utils/check-tag-in-group.ts","../src/components/SkeletonIgnore.tsx","../src/components/SkeletonKeep.tsx","../src/components/SkeletonUnite.tsx","../src/utils/check-element.ts","../src/utils/create-config.ts","../src/context/SkeletonContext.tsx","../src/context/skeleton-config.ts","../src/components/SkeletonWrapper.tsx","../src/components/SkeletonLeaf.tsx"],"sourcesContent":["import React from \"react\";\r\nimport useAddSkelton from \"../hooks/useAddSkelton\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\n\r\ninterface SkeletonElementProps {\r\n children: React.ReactNode;\r\n config: SkeletonConfig;\r\n}\r\n\r\nconst SkeletonElement: React.FC<SkeletonElementProps> = (props) => {\r\n const { children, config } = props;\r\n const addSkeleton = useAddSkelton(config);\r\n\r\n return React.Children.map(children, (child) => addSkeleton(child));\r\n};\r\n\r\nexport default SkeletonElement;\r\n","import React from \"react\";\r\nimport createNodeWrapper from \"../utils/create-node-wrapper\";\r\nimport createLeafNode from \"../utils/create-leaf-node\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\nimport createStyle from \"../utils/create-style\";\r\nimport checkTagInGroup from \"../utils/check-tag-in-group\";\r\nimport {\r\n isSkeletonIgnoreComponent,\r\n isSkeletonKeepComponent,\r\n isSkeletonUniteComponent,\r\n isTextElement,\r\n} from \"../utils/check-element\";\r\n\r\nfunction useAddSkelton(config: SkeletonConfig) {\r\n const { className, exceptTags, exceptTagGroups, textTagsMargin } = config;\r\n const CLASS_NAME = `react-skeletonify ${className} `;\r\n const style = createStyle(config);\r\n\r\n const addSkeleton = (node: React.ReactNode): React.ReactNode => {\r\n if (!React.isValidElement(node)) {\r\n return createNodeWrapper(node as any, CLASS_NAME, style);\r\n }\r\n\r\n const element = node as React.ReactElement<any>;\r\n const { children } = element.props;\r\n const elementType = element.type;\r\n\r\n if (isSkeletonKeepComponent(elementType)) return element;\r\n if (isSkeletonIgnoreComponent(elementType)) return null;\r\n if (isSkeletonUniteComponent(elementType)) {\r\n return createLeafNode(element, CLASS_NAME, style);\r\n }\r\n\r\n if (typeof elementType === \"string\") {\r\n if (exceptTags.includes(elementType)) return element;\r\n if (checkTagInGroup(elementType, exceptTagGroups)) return element;\r\n }\r\n\r\n const hasChildren = React.Children.count(children) > 0;\r\n const isValidChildren = typeof children !== \"string\";\r\n\r\n if (typeof elementType === \"function\") {\r\n const rendered = (elementType as any)(element.props);\r\n return addSkeleton(rendered);\r\n }\r\n\r\n if (isTextElement(elementType)) {\r\n return createLeafNode(element, CLASS_NAME, {\r\n ...style,\r\n margin: textTagsMargin,\r\n });\r\n }\r\n\r\n if (elementType === \"img\") {\r\n return createNodeWrapper(element, CLASS_NAME, style);\r\n }\r\n\r\n if (hasChildren && isValidChildren) {\r\n const childWithSkeletons = React.Children.map(children, addSkeleton);\r\n\r\n return React.cloneElement(element, {\r\n ...element.props,\r\n children: childWithSkeletons,\r\n } as typeof element.props);\r\n }\r\n\r\n return createLeafNode(element, CLASS_NAME, style);\r\n };\r\n\r\n return addSkeleton;\r\n}\r\n\r\nexport default useAddSkelton;\r\n","import React, { createElement, CSSProperties } from \"react\";\r\n\r\nexport default function createNodeWrapper(\r\n node: React.ReactElement<any>,\r\n className: string,\r\n style: CSSProperties\r\n) {\r\n if (!node) return null;\r\n\r\n return createElement(\r\n \"div\",\r\n {\r\n className: className + (node?.props?.className \|\| \"\"),\r\n style: {\r\n ...style,\r\n ...node?.props?.style,\r\n },\r\n },\r\n node\r\n );\r\n}\r\n","import React, { CSSProperties } from \"react\";\r\n\r\nexport default function createLeafNode(\r\n node: React.ReactElement<any>,\r\n className: string,\r\n style: CSSProperties\r\n): React.ReactElement {\r\n return React.cloneElement(node, {\r\n ...node.props,\r\n className: className + (node.props.className \|\| \"\"),\r\n style: {\r\n ...style,\r\n ...node.props.style,\r\n },\r\n } as typeof node.props);\r\n}\r\n","import { CSSProperties } from \"react\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\n\r\nconst getAnimation = (\r\n animation: string,\r\n animationSpeed: number,\r\n background: string\r\n) => {\r\n switch (animation) {\r\n case \"animation-1\":\r\n return {\r\n animation: `react-skeletonify-animation-1 ${animationSpeed}s ease-in-out infinite `,\r\n background: background,\r\n animationDelay: \"0.5s\",\r\n };\r\n case \"animation-2\":\r\n return {\r\n animation: `react-skeletonify-animation-2 ${animationSpeed}s infinite`,\r\n background: `linear-gradient(120deg, ${background} 30%, #f0f0f0 38%, #f0f0f0 40%, ${background} 48%)`,\r\n backgroundSize: \"200% 100%\",\r\n backgroundPosition: \"100% 0\",\r\n };\r\n case \"animation-3\":\r\n return {\r\n animation: `react-skeletonify-animation-3 ${animationSpeed}s linear infinite alternate`,\r\n backgroundColor: background,\r\n };\r\n }\r\n};\r\n\r\nexport default (config: SkeletonConfig) => {\r\n const { animationSpeed, background, border, borderRadius, animation, style } =\r\n config;\r\n\r\n const skeletonAnimation: CSSProperties = {\r\n ...getAnimation(animation, animationSpeed, background),\r\n border,\r\n borderRadius,\r\n ...style,\r\n };\r\n\r\n return skeletonAnimation;\r\n};\r\n","// --- Text & Content ---\r\nexport const TEXT_TAGS = [\r\n \"p\",\r\n \"span\",\r\n \"h1\",\r\n \"h2\",\r\n \"h3\",\r\n \"h4\",\r\n \"h5\",\r\n \"h6\",\r\n \"b\",\r\n \"strong\",\r\n \"i\",\r\n \"em\",\r\n \"u\",\r\n \"mark\",\r\n \"small\",\r\n \"sup\",\r\n \"sub\",\r\n \"abbr\",\r\n \"cite\",\r\n \"q\",\r\n \"blockquote\",\r\n \"code\",\r\n \"pre\",\r\n \"samp\",\r\n \"kbd\",\r\n \"var\",\r\n \"time\",\r\n \"br\",\r\n \"wbr\",\r\n];\r\n\r\n// --- Sectioning / Structure ---\r\nexport const STRUCTURE_TAGS = [\r\n \"html\",\r\n \"head\",\r\n \"body\",\r\n \"main\",\r\n \"header\",\r\n \"footer\",\r\n \"nav\",\r\n \"section\",\r\n \"article\",\r\n \"aside\",\r\n];\r\n\r\n// --- Metadata ---\r\nexport const METADATA_TAGS = [\"base\", \"link\", \"meta\", \"style\", \"title\"];\r\n\r\n// --- Lists ---\r\nexport const LIST_TAGS = [\"ul\", \"ol\", \"li\", \"dl\", \"dt\", \"dd\"];\r\n\r\n// --- Tables ---\r\nexport const TABLE_TAGS = [\r\n \"table\",\r\n \"caption\",\r\n \"thead\",\r\n \"tbody\",\r\n \"tfoot\",\r\n \"tr\",\r\n \"th\",\r\n \"td\",\r\n \"col\",\r\n \"colgroup\",\r\n];\r\n\r\n// --- Forms & Inputs ---\r\nexport const FORM_TAGS = [\r\n \"form\",\r\n \"input\",\r\n \"textarea\",\r\n \"button\",\r\n \"label\",\r\n \"select\",\r\n \"option\",\r\n \"optgroup\",\r\n \"fieldset\",\r\n \"legend\",\r\n \"datalist\",\r\n \"output\",\r\n \"meter\",\r\n \"progress\",\r\n];\r\n\r\n// --- Media ---\r\nexport const MEDIA_TAGS = [\r\n \"img\",\r\n \"audio\",\r\n \"video\",\r\n \"source\",\r\n \"track\",\r\n \"picture\",\r\n \"iframe\",\r\n \"embed\",\r\n \"object\",\r\n \"map\",\r\n \"area\",\r\n \"canvas\",\r\n];\r\n\r\n// --- Interactive ---\r\nexport const INTERACTIVE_TAGS = [\r\n \"details\",\r\n \"summary\",\r\n \"dialog\",\r\n \"script\",\r\n \"noscript\",\r\n \"template\",\r\n];\r\n\r\n// --- Other / Inline semantics ---\r\nexport const MISC_TAGS = [\"ins\", \"del\", \"s\", \"bdi\", \"bdo\", \"ruby\", \"rt\", \"rp\"];\r\n","import {\r\n FORM_TAGS,\r\n INTERACTIVE_TAGS,\r\n LIST_TAGS,\r\n MEDIA_TAGS,\r\n METADATA_TAGS,\r\n MISC_TAGS,\r\n STRUCTURE_TAGS,\r\n TABLE_TAGS,\r\n TEXT_TAGS,\r\n} from \"../constants/tags\";\r\nimport { HtmlTagGroup } from \"../context/skeleton-config\";\r\n\r\nexport default function checkTagInGroup(\r\n tag: string,\r\n groups: HtmlTagGroup[]\r\n): boolean {\r\n return groups.some((group) => {\r\n switch (group) {\r\n case \"TEXT_TAGS\":\r\n return TEXT_TAGS.includes(tag);\r\n case \"STRUCTURE_TAGS\":\r\n return STRUCTURE_TAGS.includes(tag);\r\n case \"METADATA_TAGS\":\r\n return METADATA_TAGS.includes(tag);\r\n case \"LIST_TAGS\":\r\n return LIST_TAGS.includes(tag);\r\n case \"TABLE_TAGS\":\r\n return TABLE_TAGS.includes(tag);\r\n case \"FORM_TAGS\":\r\n return FORM_TAGS.includes(tag);\r\n case \"MEDIA_TAGS\":\r\n return MEDIA_TAGS.includes(tag);\r\n case \"INTERACTIVE_TAGS\":\r\n return INTERACTIVE_TAGS.includes(tag);\r\n case \"MISC_TAGS\":\r\n return MISC_TAGS.includes(tag);\r\n }\r\n });\r\n}\r\n","import React from \"react\";\r\n\r\ninterface SkeletonIgnoreProps {\r\n children: React.ReactNode;\r\n}\r\n\r\nconst SkeletonIgnore: React.FC<SkeletonIgnoreProps> = ({ children }) => {\r\n return <>{children}</>;\r\n};\r\n\r\nexport default SkeletonIgnore;\r\n","import React from \"react\";\r\n\r\ninterface SkeletonKeepProps {\r\n children: React.ReactNode;\r\n}\r\n\r\nconst SkeletonKeep: React.FC<SkeletonKeepProps> = ({ children }) => {\r\n return <>{children}</>;\r\n};\r\n\r\nexport default SkeletonKeep;\r\n","import React from \"react\";\r\n\r\ninterface SkeletonUniteProps {\r\n children: React.ReactNode;\r\n className?: string;\r\n style?: React.CSSProperties;\r\n}\r\n\r\nconst SkeletonUnite: React.FC<SkeletonUniteProps> = (props) => {\r\n const { children, className, style } = props;\r\n\r\n if (className && className.includes(\"react-skeletonify\")) {\r\n return (\r\n <div className={className} style={style}>\r\n <div style={{ opacity: 0 }}>{children}</div>\r\n </div>\r\n );\r\n }\r\n\r\n return children;\r\n};\r\n\r\nexport default SkeletonUnite;\r\n","import React from \"react\";\r\nimport { LIST_TAGS, TEXT_TAGS } from \"../constants/tags\";\r\n\r\nimport SkeletonIgnore from \"../components/SkeletonIgnore\";\r\nimport SkeletonKeep from \"../components/SkeletonKeep\";\r\nimport SkeletonUnite from \"../components/SkeletonUnite\";\r\n\r\nexport const isTextElement = (elementType: string): boolean => {\r\n return TEXT_TAGS.includes(elementType) \|\| LIST_TAGS.includes(elementType);\r\n};\r\n\r\nexport const isSkeletonIgnoreComponent = (\r\n element: React.ComponentType<any> \| string\r\n): boolean => element === SkeletonIgnore;\r\n\r\nexport const isSkeletonKeepComponent = (\r\n element: React.ComponentType<any> \| string\r\n): boolean => element === SkeletonKeep;\r\n\r\nexport const isSkeletonUniteComponent = (\r\n element: React.ComponentType<any> \| string\r\n): boolean => element === SkeletonUnite;\r\n","import { CSSProperties, useMemo } from \"react\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\nimport { useSkeleton } from \"../context/SkeletonContext\";\r\n\r\nexport default (\r\n overrideConfig?: Partial<SkeletonConfig>,\r\n style?: CSSProperties\r\n) => {\r\n const mainConfig = useSkeleton();\r\n\r\n const config: SkeletonConfig = useMemo(\r\n () => ({\r\n ...mainConfig,\r\n ...overrideConfig,\r\n style: { ...mainConfig.style, ...overrideConfig?.style, ...style },\r\n }),\r\n [overrideConfig, mainConfig]\r\n );\r\n\r\n return config;\r\n};\r\n","import React, {\r\n createContext,\r\n CSSProperties,\r\n useContext,\r\n useMemo,\r\n} from \"react\";\r\nimport {\r\n SkeletonConfig,\r\n defaultBackground,\r\n defaultValues,\r\n} from \"./skeleton-config\";\r\n\r\nconst SkeletonContext = createContext<SkeletonConfig>(defaultValues);\r\ninterface SkeletonProviderProps {\r\n children: React.ReactNode;\r\n config?: Partial<SkeletonConfig>;\r\n style?: CSSProperties;\r\n}\r\n\r\nexport const SkeletonProvider: React.FC<SkeletonProviderProps> = (props) => {\r\n const { children, config, style } = props;\r\n const { animation = defaultValues.animation, background } = config \|\| {};\r\n\r\n const value: SkeletonConfig = useMemo(\r\n () => ({\r\n ...defaultValues,\r\n ...config,\r\n background: background ? background : defaultBackground[animation],\r\n style: { ...defaultValues.style, ...config?.style, ...style },\r\n }),\r\n [animation, background, config, style]\r\n );\r\n\r\n return (\r\n <SkeletonContext.Provider value={value}>\r\n {children}\r\n </SkeletonContext.Provider>\r\n );\r\n};\r\n\r\nexport const useSkeleton = () => useContext(SkeletonContext);\r\n","import { CSSProperties } from \"react\";\r\n\r\nexport const HTML_TAG_GROUPS = [\r\n \"TEXT_TAGS\",\r\n \"STRUCTURE_TAGS\",\r\n \"METADATA_TAGS\",\r\n \"LIST_TAGS\",\r\n \"TABLE_TAGS\",\r\n \"FORM_TAGS\",\r\n \"MEDIA_TAGS\",\r\n \"INTERACTIVE_TAGS\",\r\n \"MISC_TAGS\",\r\n] as const;\r\n\r\nexport type HtmlTagGroup = (typeof HTML_TAG_GROUPS)[number];\r\n\r\nexport const defaultBackground = {\r\n \"animation-1\": \"#aeaeae\",\r\n \"animation-2\": \"#e5e5e5\",\r\n \"animation-3\": \"hsl(210, 20%, 90%)\",\r\n};\r\n\r\nexport type SkeletonConfig = {\r\n animationSpeed: number;\r\n background: string;\r\n border: string;\r\n borderRadius: string;\r\n textTagsMargin: string;\r\n className?: string;\r\n style?: CSSProperties;\r\n animation: \"animation-1\" \| \"animation-2\";\r\n exceptTags: string[];\r\n exceptTagGroups: HtmlTagGroup[];\r\n};\r\n\r\nexport const defaultValues: SkeletonConfig = {\r\n animationSpeed: 3,\r\n background: \"#aeaeae\",\r\n border: \"none\",\r\n borderRadius: \"0\",\r\n textTagsMargin: \"0\",\r\n className: \"\",\r\n style: {},\r\n animation: \"animation-1\",\r\n exceptTags: [],\r\n exceptTagGroups: [],\r\n};\r\n","import React, { CSSProperties } from \"react\";\r\nimport SkeletonElement from \"./SkeletonElement\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\nimport createConfig from \"../utils/create-config\";\r\n\r\ninterface SkeletonWrapperProps {\r\n loading: boolean;\r\n children: React.ReactNode;\r\n overrideConfig?: Partial<SkeletonConfig>;\r\n style?: CSSProperties;\r\n}\r\n\r\nconst SkeletonWrapper: React.FC<SkeletonWrapperProps> = (props) => {\r\n const { loading, children, overrideConfig, style } = props;\r\n const config = createConfig(overrideConfig, style);\r\n\r\n if (loading) {\r\n return <SkeletonElement config={config}>{children}</SkeletonElement>;\r\n }\r\n return children;\r\n};\r\n\r\nexport default SkeletonWrapper;\r\n","import React, { CSSProperties } from \"react\";\r\nimport { SkeletonConfig } from \"../context/skeleton-config\";\r\nimport createStyle from \"../utils/create-style\";\r\nimport createConfig from \"../utils/create-config\";\r\n\r\nexport interface SkeletonLeafProps {\r\n loading: boolean;\r\n children: React.ReactNode;\r\n overrideConfig?: Partial<SkeletonConfig>;\r\n style?: CSSProperties;\r\n}\r\n\r\nconst SkeletonLeaf: React.FC<SkeletonLeafProps> = (props) => {\r\n const { loading, children, overrideConfig, style } = props;\r\n const config = createConfig(overrideConfig, style);\r\n\r\n const skeletonStyle = createStyle(config);\r\n const className = `react-skeletonify ${config.className \|\| \"\"}`;\r\n\r\n if (loading) {\r\n return (\r\n <div className={className} style={skeletonStyle}>\r\n <div style={{ opacity: 0 }}>{children}</div>\r\n </div>\r\n );\r\n }\r\n\r\n return children;\r\n};\r\n\r\nexport default SkeletonLeaf;\r\n"],"mappings":"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","names":["React","React","React","Fragment","jsx","jsx","React","React","useMemo","jsx","useMemo","jsx","jsx"]}

package/package.json CHANGED Viewed

@@ -1,50 +1,51 @@
-{
-  "name": "react-skeletonify",
-  "version": "1.1.1",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "clean": "rm -rf dist",
-    "build": "tsup",
-    "prepublishOnly": "npm run clean && npm run build"
-  },
-  "keywords": [
-    "react",
-    "skeleton",
-    "skeleton loader",
-    "loading state",
-    "placeholder",
-    "react component",
-    "react ui",
-    "react skeleton loader",
-    "react shimmer"
-  ],
-  "author": "Sinan sinan.m.p333@gmail.com",
-  "license": "MIT",
-  "description": "A lightweight React package to add smart skeleton loaders to any component",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Sinan0333/react-skeletonify"
-  },
-  "homepage": "https://react-skeletonify.sinan-dev.in",
-  "bugs": {
-    "url": "https://github.com/Sinan0333/react-skeletonify/issues"
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.8",
-    "tsup": "^8.5.0",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.3",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
-  }
-}
+{
+  "name": "react-skeletonify",
+  "version": "1.2.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "tsup",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "keywords": [
+    "react",
+    "skeleton",
+    "skeleton loader",
+    "loading state",
+    "placeholder",
+    "react component",
+    "react ui",
+    "react skeleton loader",
+    "react shimmer"
+  ],
+  "author": "Sinan sinan.m.p333@gmail.com",
+  "license": "MIT",
+  "description": "A lightweight React package to add smart skeleton loaders to any component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Sinan0333/react-skeletonify"
+  },
+  "homepage": "https://react-skeletonify.sinan-dev.in",
+  "bugs": {
+    "url": "https://github.com/Sinan0333/react-skeletonify/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.8",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "rimraf": "^6.1.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.3"
+  }
+}