@syraui/core 0.1.0

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2026 SYRA Studio
+
+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...

package/README.md

@@ -0,0 +1,129 @@
+# @syraui/core
+
+> UX components every developer is too lazy to build from scratch.
+> Works with React, React Native, Next.js, Vite, and Expo — same API, different import path.
+
+[![npm version](https://img.shields.io/npm/v/@syraui/core.svg)](https://www.npmjs.com/package/@syraui/core)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
+
+---
+
+## Installation
+
+```bash
+npm install @syraui/core
+```
+
+---
+
+## Platform Support
+
+| Platform     | Import                |
+| ------------ | --------------------- |
+| React        | `@syraui/core`        |
+| Next.js      | `@syraui/core`        |
+| Vite         | `@syraui/core`        |
+| React Native | `@syraui/core/native` |
+| Expo         | `@syraui/core/native` |
+
+---
+
+## Components
+
+- [`<Skeleton>`](#skeleton) — Auto-generates shimmer from any component's shape
+
+---
+
+## Skeleton
+
+Wrap any component. Get its skeleton. Zero config.
+
+### Web — React / Next.js / Vite
+
+```tsx
+import { Skeleton } from "@syraui/core";
+
+<Skeleton loading={isLoading}>
+  <ProfileCard user={user} />
+</Skeleton>;
+```
+
+### React Native / Expo
+
+Wrap elements you want shimmer'd with `<SkeletonItem>`. It reads dimensions directly from the child's style — no duplication needed.
+
+```tsx
+import { Skeleton, SkeletonItem } from "@syraui/core/native";
+
+<Skeleton loading={isLoading}>
+  <View style={s.card}>
+    <SkeletonItem>
+      <Image source={{ uri: user.avatar }} style={s.avatar} />
+    </SkeletonItem>
+    <SkeletonItem>
+      <Text style={s.name}>{user.name}</Text>
+    </SkeletonItem>
+    <SkeletonItem>
+      <Text style={s.bio}>{user.bio}</Text>
+    </SkeletonItem>
+    <Button title="Follow" />
+  </View>
+</Skeleton>;
+```
+
+> **Expo** — requires `expo prebuild` or bare workflow. Does not run in Expo Go.
+
+---
+
+## Props
+
+### `<Skeleton>`
+
+| Prop             | Type                             | Default     | Description                                       |
+| ---------------- | -------------------------------- | ----------- | ------------------------------------------------- |
+| `loading`        | `boolean`                        | —           | Toggle between shimmer and real content           |
+| `children`       | `ReactNode`                      | —           | Your real component                               |
+| `animation`      | `"shimmer" \| "pulse" \| "none"` | `"shimmer"` | Animation style                                   |
+| `baseColor`      | `string`                         | `"#EAECF0"` | Background color of skeleton blocks               |
+| `highlightColor` | `string`                         | `"#F8F9FB"` | Shimmer highlight color                           |
+| `speed`          | `number`                         | `1.8`       | Animation speed in seconds. Higher = slower       |
+| `borderRadius`   | `string \| number`               | auto        | Override border radius on all blocks              |
+| `direction`      | `"ltr" \| "rtl"`                 | `"ltr"`     | Shimmer sweep direction                           |
+| `fadeDuration`   | `number`                         | `250`       | Fade-in duration (ms) when loading ends. Web only |
+| `className`      | `string`                         | —           | CSS class on wrapper. Web only                    |
+| `style`          | `CSSProperties \| ViewStyle`     | —           | Inline styles                                     |
+
+### `<SkeletonItem>` _(React Native only)_
+
+| Prop           | Type           | Default | Description                           |
+| -------------- | -------------- | ------- | ------------------------------------- |
+| `children`     | `ReactElement` | —       | The element to shimmer                |
+| `borderRadius` | `number`       | auto    | Override border radius for this block |
+
+---
+
+## Theming
+
+```tsx
+// Dark mode
+<Skeleton loading={isLoading} baseColor="#1E293B" highlightColor="#334155">
+  <Card />
+</Skeleton>
+
+// Pulse animation
+<Skeleton loading={isLoading} animation="pulse" speed={1.5}>
+  <Card />
+</Skeleton>
+
+// RTL
+<Skeleton loading={isLoading} direction="rtl">
+  <Card />
+</Skeleton>
+```
+
+---
+
+## License
+
+MIT © [SyraUI](https://github.com/syraui)

package/dist/index.d.mts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties } from 'react';
+
+interface SkeletonTheme {
+    baseColor?: string;
+    highlightColor?: string;
+    speed?: number;
+    animation?: "shimmer" | "pulse" | "none";
+    borderRadius?: string | number;
+    fadeDuration?: number;
+    direction?: "ltr" | "rtl";
+}
+interface SkeletonBlock {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: number;
+}
+
+interface SkeletonProps extends SkeletonTheme {
+    loading: boolean;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Skeleton({ loading, children, className, style, ...theme }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { Skeleton, type SkeletonBlock, type SkeletonProps, type SkeletonTheme };

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties } from 'react';
+
+interface SkeletonTheme {
+    baseColor?: string;
+    highlightColor?: string;
+    speed?: number;
+    animation?: "shimmer" | "pulse" | "none";
+    borderRadius?: string | number;
+    fadeDuration?: number;
+    direction?: "ltr" | "rtl";
+}
+interface SkeletonBlock {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: number;
+}
+
+interface SkeletonProps extends SkeletonTheme {
+    loading: boolean;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Skeleton({ loading, children, className, style, ...theme }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { Skeleton, type SkeletonBlock, type SkeletonProps, type SkeletonTheme };

package/dist/index.js

@@ -0,0 +1,234 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var _injected = false;
+function injectKeyframes() {
+  if (_injected || typeof document === "undefined") return;
+  _injected = true;
+  const el = document.createElement("style");
+  el.textContent = `
+    @keyframes _sx     { 0% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
+    @keyframes _sx-rtl { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }
+    @keyframes _sx-pulse  { 0%, 100% { opacity: 1 } 50% { opacity: 0.45 } }
+    @keyframes _sx-fadein { from { opacity: 0 } to { opacity: 1 } }
+    [data-sx] * { visibility: hidden !important; }
+    [data-sx-cover] { background: transparent !important; background-image: none !important; }
+    .syra-fadein { animation: _sx-fadein var(--sx-fade, 250ms) ease-out forwards; }
+  `;
+  document.head.appendChild(el);
+}
+var MEDIA = /* @__PURE__ */ new Set(["img", "svg", "video", "picture", "canvas"]);
+var LEAF = /* @__PURE__ */ new Set(["button", "input", "textarea", "select"]);
+var TEXT = /* @__PURE__ */ new Set([
+  "p",
+  "span",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "label",
+  "li",
+  "a",
+  "strong",
+  "em",
+  "small",
+  "time",
+  "code"
+]);
+function classify(el) {
+  var _a, _b;
+  const tag = el.tagName.toLowerCase();
+  const cs = window.getComputedStyle(el);
+  if (cs.display === "none") return "skip";
+  const rect = el.getBoundingClientRect();
+  if (rect.width < 2 || rect.height < 2) return "skip";
+  if (MEDIA.has(tag)) return "media";
+  if (LEAF.has(tag)) return "leaf";
+  if (TEXT.has(tag)) {
+    const hasVisibleChildren = Array.from(el.children).some(
+      (c) => window.getComputedStyle(c).display !== "none"
+    );
+    return hasVisibleChildren ? "cover" : "leaf";
+  }
+  if (!el.children.length && ((_a = el.textContent) == null ? void 0 : _a.trim())) return "leaf";
+  const bgImg = cs.backgroundImage;
+  if (bgImg && bgImg !== "none") return "leaf";
+  const cls = (_b = el.className) != null ? _b : "";
+  if (typeof cls === "string" && (cls.includes("bg-gradient") || cls.includes("from-")))
+    return "leaf";
+  if (!el.children.length) {
+    const bg = cs.backgroundColor;
+    if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") return "leaf";
+  }
+  return "cover";
+}
+var SAVED = /* @__PURE__ */ new WeakMap();
+function saveEl(el) {
+  var _a;
+  SAVED.set(el, {
+    style: (_a = el.getAttribute("style")) != null ? _a : "",
+    src: el.src,
+    srcset: el.srcset
+  });
+}
+function restoreAll(tagged, fade, fadeDuration) {
+  var _a;
+  tagged.forEach((el) => {
+    var _a2;
+    el.removeAttribute("data-sx");
+    el.removeAttribute("data-sx-cover");
+    const saved = SAVED.get(el);
+    if (!saved) return;
+    const h = el;
+    if (el.tagName.toLowerCase() === "img" && saved.src) {
+      el.src = saved.src;
+      el.srcset = (_a2 = saved.srcset) != null ? _a2 : "";
+    }
+    saved.style ? h.setAttribute("style", saved.style) : h.removeAttribute("style");
+    SAVED.delete(el);
+  });
+  if (!fade || tagged.length === 0 || fadeDuration <= 0) return;
+  const root = (_a = tagged[0]) == null ? void 0 : _a.closest("[aria-busy]");
+  if (!root) return;
+  root.style.setProperty("--sx-fade", `${fadeDuration}ms`);
+  root.classList.add("syra-fadein");
+  root.addEventListener(
+    "animationend",
+    () => {
+      root.classList.remove("syra-fadein");
+      root.style.removeProperty("--sx-fade");
+    },
+    { once: true }
+  );
+}
+function shimmerStyle(base, hl, speed, br, anim, dir) {
+  const base_props = [
+    `color: transparent`,
+    `overflow: hidden`,
+    `border-radius: ${br}`
+  ];
+  if (anim === "pulse")
+    return [
+      ...base_props,
+      `background: ${base}`,
+      `animation: _sx-pulse ${speed}s ease-in-out infinite`
+    ].join("; ");
+  if (anim === "none") return [...base_props, `background: ${base}`].join("; ");
+  const kf = dir === "rtl" ? "_sx-rtl" : "_sx";
+  const pos = dir === "rtl" ? "0% 50%" : "100% 50%";
+  return [
+    ...base_props,
+    `background: linear-gradient(90deg, ${base} 0%, ${base} 30%, ${hl} 50%, ${base} 70%, ${base} 100%)`,
+    `background-size: 300% 100%`,
+    `background-position: ${pos}`,
+    `animation: ${kf} ${speed}s ease-in-out infinite`
+  ].join("; ");
+}
+function applyAll(root, theme) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const tagged = [];
+  const base = (_a = theme.baseColor) != null ? _a : "#EAECF0";
+  const hl = (_b = theme.highlightColor) != null ? _b : "#F8F9FB";
+  const speed = (_c = theme.speed) != null ? _c : 1.8;
+  const anim = (_d = theme.animation) != null ? _d : "shimmer";
+  const dir = (_e = theme.direction) != null ? _e : "ltr";
+  const defaultBr = typeof theme.borderRadius === "number" ? `${theme.borderRadius}px` : (_f = theme.borderRadius) != null ? _f : "6px";
+  const textBr = typeof theme.borderRadius === "number" ? `${theme.borderRadius}px` : (_g = theme.borderRadius) != null ? _g : "4px";
+  function walk(el) {
+    const type = classify(el);
+    if (type === "skip") return;
+    const h = el;
+    if (type === "media") {
+      const cs = window.getComputedStyle(el);
+      const rect = el.getBoundingClientRect();
+      const isCircle = Math.abs(rect.width - rect.height) < 4 && parseInt(cs.borderRadius) >= rect.width / 2 - 2;
+      const br = isCircle ? "50%" : cs.borderRadius !== "0px" ? cs.borderRadius : defaultBr;
+      saveEl(el);
+      if (el.tagName.toLowerCase() === "img") {
+        el.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+        el.srcset = "";
+      }
+      el.setAttribute("data-sx", "");
+      h.style.cssText = shimmerStyle(base, hl, speed, br, anim, dir);
+      tagged.push(el);
+      return;
+    }
+    if (type === "leaf") {
+      const cs = window.getComputedStyle(el);
+      const tag = el.tagName.toLowerCase();
+      const br = cs.borderRadius !== "0px" ? cs.borderRadius : TEXT.has(tag) ? textBr : defaultBr;
+      saveEl(el);
+      el.setAttribute("data-sx", "");
+      h.style.cssText = shimmerStyle(base, hl, speed, br, anim, dir);
+      tagged.push(el);
+      return;
+    }
+    saveEl(el);
+    el.setAttribute("data-sx-cover", "");
+    h.style.setProperty("background", "transparent", "important");
+    h.style.setProperty("background-image", "none", "important");
+    tagged.push(el);
+    Array.from(el.children).forEach(walk);
+  }
+  Array.from(root.children).forEach((card) => {
+    const type = classify(card);
+    if (type === "skip") return;
+    if (type === "media" || type === "leaf") {
+      walk(card);
+      return;
+    }
+    tagged.push(card);
+    Array.from(card.children).forEach(walk);
+  });
+  return tagged;
+}
+function Skeleton(_a) {
+  var _b = _a, {
+    loading,
+    children,
+    className,
+    style
+  } = _b, theme = __objRest(_b, [
+    "loading",
+    "children",
+    "className",
+    "style"
+  ]);
+  injectKeyframes();
+  const wrapRef = react.useRef(null);
+  const taggedRef = react.useRef([]);
+  const prevRef = react.useRef(null);
+  react.useLayoutEffect(() => {
+    var _a2;
+    const el = wrapRef.current;
+    if (!el || prevRef.current === loading) return;
+    prevRef.current = loading;
+    restoreAll(taggedRef.current, !loading, (_a2 = theme.fadeDuration) != null ? _a2 : 250);
+    taggedRef.current = [];
+    if (loading) taggedRef.current = applyAll(el, theme);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapRef, className, style, "aria-busy": loading, children });
+}
+
+exports.Skeleton = Skeleton;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton/Skeleton.web.tsx"],"names":["_a","useRef","useLayoutEffect","jsx"],"mappings":"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","file":"index.js","sourcesContent":["\"use client\";\n\nimport {\n  useLayoutEffect,\n  useRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport type { SkeletonTheme } from \"../types/skeleton\";\n\nlet _injected = false;\n\nfunction injectKeyframes() {\n  if (_injected || typeof document === \"undefined\") return;\n  _injected = true;\n  const el = document.createElement(\"style\");\n  el.textContent = `\n    @keyframes _sx     { 0% { background-position: 100% 50% } 100% { background-position: 0% 50% } }\n    @keyframes _sx-rtl { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }\n    @keyframes _sx-pulse  { 0%, 100% { opacity: 1 } 50% { opacity: 0.45 } }\n    @keyframes _sx-fadein { from { opacity: 0 } to { opacity: 1 } }\n    [data-sx] * { visibility: hidden !important; }\n    [data-sx-cover] { background: transparent !important; background-image: none !important; }\n    .syra-fadein { animation: _sx-fadein var(--sx-fade, 250ms) ease-out forwards; }\n  `;\n  document.head.appendChild(el);\n}\n\nconst MEDIA = new Set([\"img\", \"svg\", \"video\", \"picture\", \"canvas\"]);\nconst LEAF = new Set([\"button\", \"input\", \"textarea\", \"select\"]);\nconst TEXT = new Set([\n  \"p\",\n  \"span\",\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"h5\",\n  \"h6\",\n  \"label\",\n  \"li\",\n  \"a\",\n  \"strong\",\n  \"em\",\n  \"small\",\n  \"time\",\n  \"code\",\n]);\n\ntype ElType = \"media\" | \"leaf\" | \"cover\" | \"skip\";\n\nfunction classify(el: Element): ElType {\n  const tag = el.tagName.toLowerCase();\n  const cs = window.getComputedStyle(el);\n  if (cs.display === \"none\") return \"skip\";\n  const rect = el.getBoundingClientRect();\n  if (rect.width < 2 || rect.height < 2) return \"skip\";\n  if (MEDIA.has(tag)) return \"media\";\n  if (LEAF.has(tag)) return \"leaf\";\n  if (TEXT.has(tag)) {\n    const hasVisibleChildren = Array.from(el.children).some(\n      (c) => window.getComputedStyle(c).display !== \"none\",\n    );\n    return hasVisibleChildren ? \"cover\" : \"leaf\";\n  }\n  if (!el.children.length && el.textContent?.trim()) return \"leaf\";\n\n  // Element with a background-image (gradient, url) — treat as leaf\n  // Works for both CSS classes (Tailwind bg-*) and inline styles\n  const bgImg = cs.backgroundImage;\n  if (bgImg && bgImg !== \"none\") return \"leaf\";\n\n  // Tailwind gradient classes use background-image — catch them via className\n  // e.g. bg-gradient-to-r, from-*, via-*, to-*\n  const cls = (el as HTMLElement).className ?? \"\";\n  if (\n    typeof cls === \"string\" &&\n    (cls.includes(\"bg-gradient\") || cls.includes(\"from-\"))\n  )\n    return \"leaf\";\n\n  // Non-transparent background-color with no children = decorative block (banner, divider)\n  if (!el.children.length) {\n    const bg = cs.backgroundColor;\n    if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") return \"leaf\";\n  }\n\n  return \"cover\";\n}\n\ninterface Saved {\n  style: string;\n  src?: string;\n  srcset?: string;\n}\nconst SAVED = new WeakMap<Element, Saved>();\n\nfunction saveEl(el: Element) {\n  SAVED.set(el, {\n    style: (el as HTMLElement).getAttribute(\"style\") ?? \"\",\n    src: (el as HTMLImageElement).src,\n    srcset: (el as HTMLImageElement).srcset,\n  });\n}\n\nfunction restoreAll(tagged: Element[], fade: boolean, fadeDuration: number) {\n  tagged.forEach((el) => {\n    el.removeAttribute(\"data-sx\");\n    el.removeAttribute(\"data-sx-cover\");\n    const saved = SAVED.get(el);\n    if (!saved) return;\n    const h = el as HTMLElement;\n    if (el.tagName.toLowerCase() === \"img\" && saved.src) {\n      (el as HTMLImageElement).src = saved.src;\n      (el as HTMLImageElement).srcset = saved.srcset ?? \"\";\n    }\n    saved.style\n      ? h.setAttribute(\"style\", saved.style)\n      : h.removeAttribute(\"style\");\n    SAVED.delete(el);\n  });\n  if (!fade || tagged.length === 0 || fadeDuration <= 0) return;\n  const root = tagged[0]?.closest(\"[aria-busy]\") as HTMLElement | null;\n  if (!root) return;\n  root.style.setProperty(\"--sx-fade\", `${fadeDuration}ms`);\n  root.classList.add(\"syra-fadein\");\n  root.addEventListener(\n    \"animationend\",\n    () => {\n      root.classList.remove(\"syra-fadein\");\n      root.style.removeProperty(\"--sx-fade\");\n    },\n    { once: true },\n  );\n}\n\nfunction shimmerStyle(\n  base: string,\n  hl: string,\n  speed: number,\n  br: string,\n  anim: \"shimmer\" | \"pulse\" | \"none\",\n  dir: \"ltr\" | \"rtl\",\n): string {\n  const base_props = [\n    `color: transparent`,\n    `overflow: hidden`,\n    `border-radius: ${br}`,\n  ];\n  if (anim === \"pulse\")\n    return [\n      ...base_props,\n      `background: ${base}`,\n      `animation: _sx-pulse ${speed}s ease-in-out infinite`,\n    ].join(\"; \");\n  if (anim === \"none\") return [...base_props, `background: ${base}`].join(\"; \");\n  const kf = dir === \"rtl\" ? \"_sx-rtl\" : \"_sx\";\n  const pos = dir === \"rtl\" ? \"0% 50%\" : \"100% 50%\";\n  return [\n    ...base_props,\n    `background: linear-gradient(90deg, ${base} 0%, ${base} 30%, ${hl} 50%, ${base} 70%, ${base} 100%)`,\n    `background-size: 300% 100%`,\n    `background-position: ${pos}`,\n    `animation: ${kf} ${speed}s ease-in-out infinite`,\n  ].join(\"; \");\n}\n\nfunction applyAll(root: HTMLElement, theme: SkeletonTheme): Element[] {\n  const tagged: Element[] = [];\n  const base = theme.baseColor ?? \"#EAECF0\";\n  const hl = theme.highlightColor ?? \"#F8F9FB\";\n  const speed = theme.speed ?? 1.8;\n  const anim = theme.animation ?? \"shimmer\";\n  const dir = theme.direction ?? \"ltr\";\n  const defaultBr =\n    typeof theme.borderRadius === \"number\"\n      ? `${theme.borderRadius}px`\n      : (theme.borderRadius ?? \"6px\");\n  const textBr =\n    typeof theme.borderRadius === \"number\"\n      ? `${theme.borderRadius}px`\n      : (theme.borderRadius ?? \"4px\");\n\n  function walk(el: Element) {\n    const type = classify(el);\n    if (type === \"skip\") return;\n    const h = el as HTMLElement;\n\n    if (type === \"media\") {\n      const cs = window.getComputedStyle(el);\n      const rect = el.getBoundingClientRect();\n      const isCircle =\n        Math.abs(rect.width - rect.height) < 4 &&\n        parseInt(cs.borderRadius) >= rect.width / 2 - 2;\n      const br = isCircle\n        ? \"50%\"\n        : cs.borderRadius !== \"0px\"\n          ? cs.borderRadius\n          : defaultBr;\n      saveEl(el);\n      if (el.tagName.toLowerCase() === \"img\") {\n        (el as HTMLImageElement).src =\n          \"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\";\n        (el as HTMLImageElement).srcset = \"\";\n      }\n      el.setAttribute(\"data-sx\", \"\");\n      h.style.cssText = shimmerStyle(base, hl, speed, br, anim, dir);\n      tagged.push(el);\n      return;\n    }\n\n    if (type === \"leaf\") {\n      const cs = window.getComputedStyle(el);\n      const tag = el.tagName.toLowerCase();\n      const br =\n        cs.borderRadius !== \"0px\"\n          ? cs.borderRadius\n          : TEXT.has(tag)\n            ? textBr\n            : defaultBr;\n      saveEl(el);\n      el.setAttribute(\"data-sx\", \"\");\n      h.style.cssText = shimmerStyle(base, hl, speed, br, anim, dir);\n      tagged.push(el);\n      return;\n    }\n\n    saveEl(el);\n    el.setAttribute(\"data-sx-cover\", \"\");\n    h.style.setProperty(\"background\", \"transparent\", \"important\");\n    h.style.setProperty(\"background-image\", \"none\", \"important\");\n    tagged.push(el);\n    Array.from(el.children).forEach(walk);\n  }\n\n  Array.from(root.children).forEach((card) => {\n    const type = classify(card);\n    if (type === \"skip\") return;\n    if (type === \"media\" || type === \"leaf\") {\n      walk(card);\n      return;\n    }\n    tagged.push(card);\n    Array.from(card.children).forEach(walk);\n  });\n\n  return tagged;\n}\n\nexport interface SkeletonProps extends SkeletonTheme {\n  loading: boolean;\n  children: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function Skeleton({\n  loading,\n  children,\n  className,\n  style,\n  ...theme\n}: SkeletonProps) {\n  injectKeyframes();\n\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const taggedRef = useRef<Element[]>([]);\n  const prevRef = useRef<boolean | null>(null);\n\n  useLayoutEffect(() => {\n    const el = wrapRef.current;\n    if (!el || prevRef.current === loading) return;\n    prevRef.current = loading;\n    restoreAll(taggedRef.current, !loading, theme.fadeDuration ?? 250);\n    taggedRef.current = [];\n    if (loading) taggedRef.current = applyAll(el, theme);\n  });\n\n  return (\n    <div ref={wrapRef} className={className} style={style} aria-busy={loading}>\n      {children}\n    </div>\n  );\n}\n"]}