@syraui/core 0.1.0

package/dist/index.mjs

@@ -0,0 +1,232 @@
+import { useRef, useLayoutEffect } from 'react';
+import { jsx } from '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 = useRef(null);
+  const taggedRef = useRef([]);
+  const prevRef = useRef(null);
+  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__ */ jsx("div", { ref: wrapRef, className, style, "aria-busy": loading, children });
+}
+
+export { Skeleton };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton/Skeleton.web.tsx"],"names":["_a"],"mappings":"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","file":"index.mjs","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"]}

package/dist/native/index.d.mts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+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 SkeletonItemProps {
+    /** The element to shimmer. Its style is read automatically. */
+    children: React.ReactElement;
+    /** Override border radius. Defaults to the child's style borderRadius. */
+    borderRadius?: number;
+}
+/**
+ * Marks an element to be shimmer'd by the parent `<Skeleton>`.
+ * Reads dimensions directly from the child's style — no duplication needed.
+ *
+ * @example
+ * <Skeleton loading={loading}>
+ *   <View style={s.card}>
+ *     <SkeletonItem><Image source={...} style={s.avatar} /></SkeletonItem>
+ *     <SkeletonItem><Text style={s.name}>{name}</Text></SkeletonItem>
+ *   </View>
+ * </Skeleton>
+ */
+declare function SkeletonItem({ children, borderRadius: brOverride, }: SkeletonItemProps): React.JSX.Element;
+interface NativeSkeletonProps extends SkeletonTheme {
+    /** Toggle between skeleton and real content. */
+    loading: boolean;
+    /** Your component — wrap elements to shimmer with `<SkeletonItem>`. */
+    children: React.ReactNode;
+    /** Optional style for the outer container. */
+    style?: ViewStyle;
+}
+/**
+ * Wraps a component and renders shimmer blocks over elements
+ * marked with `<SkeletonItem>`.
+ */
+declare function Skeleton({ loading, children, style, ...theme }: NativeSkeletonProps): React.JSX.Element;
+
+export { type NativeSkeletonProps, Skeleton, type SkeletonBlock, SkeletonItem, type SkeletonItemProps, type SkeletonTheme };

package/dist/native/index.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+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 SkeletonItemProps {
+    /** The element to shimmer. Its style is read automatically. */
+    children: React.ReactElement;
+    /** Override border radius. Defaults to the child's style borderRadius. */
+    borderRadius?: number;
+}
+/**
+ * Marks an element to be shimmer'd by the parent `<Skeleton>`.
+ * Reads dimensions directly from the child's style — no duplication needed.
+ *
+ * @example
+ * <Skeleton loading={loading}>
+ *   <View style={s.card}>
+ *     <SkeletonItem><Image source={...} style={s.avatar} /></SkeletonItem>
+ *     <SkeletonItem><Text style={s.name}>{name}</Text></SkeletonItem>
+ *   </View>
+ * </Skeleton>
+ */
+declare function SkeletonItem({ children, borderRadius: brOverride, }: SkeletonItemProps): React.JSX.Element;
+interface NativeSkeletonProps extends SkeletonTheme {
+    /** Toggle between skeleton and real content. */
+    loading: boolean;
+    /** Your component — wrap elements to shimmer with `<SkeletonItem>`. */
+    children: React.ReactNode;
+    /** Optional style for the outer container. */
+    style?: ViewStyle;
+}
+/**
+ * Wraps a component and renders shimmer blocks over elements
+ * marked with `<SkeletonItem>`.
+ */
+declare function Skeleton({ loading, children, style, ...theme }: NativeSkeletonProps): React.JSX.Element;
+
+export { type NativeSkeletonProps, Skeleton, type SkeletonBlock, SkeletonItem, type SkeletonItemProps, type SkeletonTheme };

package/dist/native/index.js

@@ -0,0 +1,273 @@
+'use strict';
+
+var React = require('react');
+var reactNative = require('react-native');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+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;
+};
+function ShimmerBlock({
+  block,
+  theme,
+  progress,
+  containerWidth
+}) {
+  var _a, _b, _c, _d, _e;
+  const base = (_a = theme.baseColor) != null ? _a : "#EAECF0";
+  const highlight = (_b = theme.highlightColor) != null ? _b : "#F8F9FB";
+  const anim = (_c = theme.animation) != null ? _c : "shimmer";
+  const br = typeof theme.borderRadius === "number" ? theme.borderRadius : (_d = block.borderRadius) != null ? _d : 6;
+  if (anim === "pulse") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      reactNative.Animated.View,
+      {
+        style: {
+          position: "absolute",
+          top: block.y,
+          left: block.x,
+          width: block.width,
+          height: block.height,
+          borderRadius: br,
+          backgroundColor: base,
+          opacity: progress.interpolate({
+            inputRange: [0, 0.5, 1],
+            outputRange: [1, 0.4, 1]
+          })
+        }
+      }
+    );
+  }
+  if (anim === "none") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      reactNative.View,
+      {
+        style: {
+          position: "absolute",
+          top: block.y,
+          left: block.x,
+          width: block.width,
+          height: block.height,
+          borderRadius: br,
+          backgroundColor: base
+        }
+      }
+    );
+  }
+  const dir = (_e = theme.direction) != null ? _e : "ltr";
+  const translateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: dir === "rtl" ? [containerWidth, -containerWidth] : [-containerWidth, containerWidth]
+  });
+  return /* @__PURE__ */ React__default.default.createElement(
+    reactNative.View,
+    {
+      style: {
+        position: "absolute",
+        top: block.y,
+        left: block.x,
+        width: block.width,
+        height: block.height,
+        borderRadius: br,
+        backgroundColor: base,
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React__default.default.createElement(
+      reactNative.Animated.View,
+      {
+        style: [
+          reactNative.StyleSheet.absoluteFill,
+          {
+            backgroundColor: highlight,
+            opacity: 0.7,
+            transform: [{ translateX }]
+          }
+        ]
+      }
+    )
+  );
+}
+var SkeletonContext = React__default.default.createContext(null);
+var sx = reactNative.StyleSheet.create({
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 }
+});
+function SkeletonItem({
+  children,
+  borderRadius: brOverride
+}) {
+  var _a, _b, _c, _d;
+  const ctx = React__default.default.useContext(SkeletonContext);
+  const wrapRef = React.useRef(null);
+  const childProps = children.props;
+  const flatStyle = Array.isArray(childProps.style) ? Object.assign({}, ...childProps.style) : (_a = childProps.style) != null ? _a : {};
+  const br = (_b = brOverride != null ? brOverride : flatStyle.borderRadius) != null ? _b : 6;
+  const measure = React.useCallback(() => {
+    if (!ctx) return;
+    const self = wrapRef.current;
+    const container = ctx.containerRef.current;
+    if (!self || !container) return;
+    self.measureLayout(
+      container,
+      (x, y, width, height) => {
+        if (width > 1 && height > 1)
+          ctx.register({ x, y, width, height, borderRadius: br });
+      },
+      () => {
+      }
+    );
+  }, [ctx, br]);
+  React.useEffect(() => {
+    if (!(ctx == null ? void 0 : ctx.loading)) return;
+    const t = setTimeout(measure, 50);
+    return () => clearTimeout(t);
+  }, [ctx == null ? void 0 : ctx.loading, measure]);
+  const loading = (_c = ctx == null ? void 0 : ctx.loading) != null ? _c : false;
+  const base = (_d = ctx == null ? void 0 : ctx.theme.baseColor) != null ? _d : "#EAECF0";
+  return /* @__PURE__ */ React__default.default.createElement(
+    reactNative.View,
+    {
+      ref: wrapRef,
+      collapsable: false,
+      onLayout: measure,
+      style: flatStyle
+    },
+    /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: loading ? sx.hidden : sx.visible }, children),
+    loading && /* @__PURE__ */ React__default.default.createElement(
+      reactNative.View,
+      {
+        pointerEvents: "none",
+        style: [
+          reactNative.StyleSheet.absoluteFill,
+          { backgroundColor: base, borderRadius: br }
+        ]
+      }
+    )
+  );
+}
+function Skeleton(_a) {
+  var _b = _a, {
+    loading,
+    children,
+    style
+  } = _b, theme = __objRest(_b, [
+    "loading",
+    "children",
+    "style"
+  ]);
+  var _a2;
+  const progress = React.useRef(new reactNative.Animated.Value(0)).current;
+  const animRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const blocksMapRef = React.useRef(/* @__PURE__ */ new Map());
+  const childrenKeyRef = React.useRef("");
+  const [blocks, setBlocks] = React.useState([]);
+  const [containerWidth, setContainerWidth] = React.useState(320);
+  const register = React.useCallback((block) => {
+    const key = `${Math.round(block.x)}-${Math.round(block.y)}-${Math.round(block.width)}-${Math.round(block.height)}`;
+    blocksMapRef.current.set(key, block);
+    setBlocks(Array.from(blocksMapRef.current.values()));
+  }, []);
+  React.useEffect(() => {
+    const key = React__default.default.Children.count(children).toString();
+    if (childrenKeyRef.current !== key) {
+      childrenKeyRef.current = key;
+      blocksMapRef.current.clear();
+      setBlocks([]);
+    }
+  });
+  React.useEffect(() => {
+    var _a3, _b2, _c;
+    if (!loading) {
+      (_a3 = animRef.current) == null ? void 0 : _a3.stop();
+      return;
+    }
+    progress.setValue(0);
+    (_b2 = animRef.current) == null ? void 0 : _b2.stop();
+    animRef.current = reactNative.Animated.loop(
+      reactNative.Animated.timing(progress, {
+        toValue: 1,
+        duration: ((_c = theme.speed) != null ? _c : 1.8) * 1e3,
+        easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+        useNativeDriver: true
+      })
+    );
+    animRef.current.start();
+    return () => {
+      var _a4;
+      (_a4 = animRef.current) == null ? void 0 : _a4.stop();
+    };
+  }, [loading, theme.speed, theme.animation, progress]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    SkeletonContext.Provider,
+    {
+      value: { loading, containerRef, register, theme }
+    },
+    /* @__PURE__ */ React__default.default.createElement(
+      reactNative.View,
+      {
+        ref: containerRef,
+        style: [{ position: "relative" }, style],
+        onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width),
+        accessible: true,
+        accessibilityLabel: loading ? "Loading" : void 0
+      },
+      children,
+      loading && blocks.length > 0 && /* @__PURE__ */ React__default.default.createElement(
+        reactNative.View,
+        {
+          style: reactNative.StyleSheet.absoluteFill,
+          pointerEvents: "none",
+          accessibilityRole: "progressbar"
+        },
+        blocks.map((block, i) => /* @__PURE__ */ React__default.default.createElement(
+          ShimmerBlock,
+          {
+            key: i,
+            block,
+            theme,
+            progress,
+            containerWidth
+          }
+        ))
+      ),
+      loading && blocks.length === 0 && /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: reactNative.StyleSheet.absoluteFill, pointerEvents: "none" }, /* @__PURE__ */ React__default.default.createElement(
+        reactNative.Animated.View,
+        {
+          style: [
+            reactNative.StyleSheet.absoluteFill,
+            {
+              backgroundColor: (_a2 = theme.baseColor) != null ? _a2 : "#EAECF0",
+              borderRadius: typeof theme.borderRadius === "number" ? theme.borderRadius : 6,
+              opacity: progress.interpolate({
+                inputRange: [0, 0.5, 1],
+                outputRange: [0.4, 0.9, 0.4]
+              })
+            }
+          ]
+        }
+      ))
+    )
+  );
+}
+
+exports.Skeleton = Skeleton;
+exports.SkeletonItem = SkeletonItem;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map