react-native-smart-skeleton 0.0.1

package/lib/commonjs/utils/responsive.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRecommendedColumns = getRecommendedColumns;
+exports.getScreenSizeClass = getScreenSizeClass;
+exports.getScreenWidth = getScreenWidth;
+exports.pixelSnap = pixelSnap;
+exports.scaleBySize = scaleBySize;
+var _reactNative = require("react-native");
+/**
+ * Breakpoints (in dp) used to classify the current screen width.
+ * Roughly: phones -> "compact", small tablets / large phones landscape -> "regular",
+ * tablets / desktop-like windows -> "wide".
+ */
+const BREAKPOINTS = {
+  regular: 480,
+  wide: 768
+};
+
+/**
+ * Returns the current window width, with a safe fallback for environments
+ * where Dimensions may not be ready (e.g. very early app boot, tests).
+ */
+function getScreenWidth() {
+  try {
+    const {
+      width
+    } = _reactNative.Dimensions.get("window");
+    return width || 0;
+  } catch {
+    return 0;
+  }
+}
+
+/**
+ * Classify the current screen width into a coarse size bucket, useful for
+ * preset components that want to adapt column counts or avatar sizes.
+ */
+function getScreenSizeClass(width = getScreenWidth()) {
+  if (width >= BREAKPOINTS.wide) return "wide";
+  if (width >= BREAKPOINTS.regular) return "regular";
+  return "compact";
+}
+
+/**
+ * Scale a base dp value by the size class, useful for nudging preset
+ * dimensions (avatar size, line height) up slightly on larger screens.
+ */
+function scaleBySize(base, sizeClass) {
+  switch (sizeClass) {
+    case "wide":
+      return Math.round(base * 1.25);
+    case "regular":
+      return Math.round(base * 1.1);
+    default:
+      return base;
+  }
+}
+
+/**
+ * Resolve a recommended column count for grid-style presets (e.g. Product),
+ * based on the current screen size class.
+ */
+function getRecommendedColumns(sizeClass = getScreenSizeClass()) {
+  switch (sizeClass) {
+    case "wide":
+      return 4;
+    case "regular":
+      return 3;
+    default:
+      return 2;
+  }
+}
+
+/**
+ * Snap a dp value to the nearest physical pixel, reducing anti-aliased/blurry
+ * edges on skeleton borders, similar to React Native's own hairline handling.
+ */
+function pixelSnap(value) {
+  return _reactNative.PixelRatio.roundToNearestPixel(value);
+}
+//# sourceMappingURL=responsive.js.map

package/lib/commonjs/utils/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","BREAKPOINTS","regular","wide","getScreenWidth","width","Dimensions","get","getScreenSizeClass","scaleBySize","base","sizeClass","Math","round","getRecommendedColumns","pixelSnap","value","PixelRatio","roundToNearestPixel"],"sourceRoot":"../../../src","sources":["utils/responsive.ts"],"mappings":";;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAGA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAG;EAChBC,OAAO,EAAE,GAAG;EACZC,IAAI,EAAE;AACV,CAAC;;AAED;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAAA,EAAW;EACrC,IAAI;IACA,MAAM;MAAEC;IAAM,CAAC,GAAGC,uBAAU,CAACC,GAAG,CAAC,QAAQ,CAAC;IAC1C,OAAOF,KAAK,IAAI,CAAC;EACrB,CAAC,CAAC,MAAM;IACJ,OAAO,CAAC;EACZ;AACJ;;AAEA;AACA;AACA;AACA;AACO,SAASG,kBAAkBA,CAACH,KAAa,GAAGD,cAAc,CAAC,CAAC,EAAmB;EAClF,IAAIC,KAAK,IAAIJ,WAAW,CAACE,IAAI,EAAE,OAAO,MAAM;EAC5C,IAAIE,KAAK,IAAIJ,WAAW,CAACC,OAAO,EAAE,OAAO,SAAS;EAClD,OAAO,SAAS;AACpB;;AAEA;AACA;AACA;AACA;AACO,SAASO,WAAWA,CAACC,IAAY,EAAEC,SAA0B,EAAU;EAC1E,QAAQA,SAAS;IACb,KAAK,MAAM;MACP,OAAOC,IAAI,CAACC,KAAK,CAACH,IAAI,GAAG,IAAI,CAAC;IAClC,KAAK,SAAS;MACV,OAAOE,IAAI,CAACC,KAAK,CAACH,IAAI,GAAG,GAAG,CAAC;IACjC;MACI,OAAOA,IAAI;EACnB;AACJ;;AAEA;AACA;AACA;AACA;AACO,SAASI,qBAAqBA,CAACH,SAA0B,GAAGH,kBAAkB,CAAC,CAAC,EAAU;EAC7F,QAAQG,SAAS;IACb,KAAK,MAAM;MACP,OAAO,CAAC;IACZ,KAAK,SAAS;MACV,OAAO,CAAC;IACZ;MACI,OAAO,CAAC;EAChB;AACJ;;AAEA;AACA;AACA;AACA;AACO,SAASI,SAASA,CAACC,KAAa,EAAU;EAC7C,OAAOC,uBAAU,CAACC,mBAAmB,CAACF,KAAK,CAAC;AAChD","ignoreList":[]}

package/lib/commonjs/utils/theme.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultThemeColors = getDefaultThemeColors;
+exports.getSystemColorScheme = getSystemColorScheme;
+exports.resolveIsDark = resolveIsDark;
+var _reactNative = require("react-native");
+var _colors = require("./colors");
+/**
+ * Resolve a SkeletonThemeMode ("light" | "dark" | "system") plus the current
+ * OS color scheme into a concrete isDark boolean.
+ */
+function resolveIsDark(mode, systemScheme) {
+  if (mode === "light") return false;
+  if (mode === "dark") return true;
+  return systemScheme === "dark";
+}
+
+/**
+ * Synchronous read of the current system color scheme, for use outside
+ * of component render (e.g. computing an initial value).
+ */
+function getSystemColorScheme() {
+  try {
+    return _reactNative.Appearance.getColorScheme() ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Default theme colors for a resolved dark/light state.
+ */
+function getDefaultThemeColors(isDark) {
+  return isDark ? _colors.DEFAULT_DARK_COLORS : _colors.DEFAULT_LIGHT_COLORS;
+}
+//# sourceMappingURL=theme.js.map

package/lib/commonjs/utils/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_colors","resolveIsDark","mode","systemScheme","getSystemColorScheme","Appearance","getColorScheme","getDefaultThemeColors","isDark","DEFAULT_DARK_COLORS","DEFAULT_LIGHT_COLORS"],"sourceRoot":"../../../src","sources":["utils/theme.ts"],"mappings":";;;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAEA;AACA;AACA;AACA;AACO,SAASE,aAAaA,CAACC,IAAuB,EAAEC,YAAiD,EAAW;EAC/G,IAAID,IAAI,KAAK,OAAO,EAAE,OAAO,KAAK;EAClC,IAAIA,IAAI,KAAK,MAAM,EAAE,OAAO,IAAI;EAChC,OAAOC,YAAY,KAAK,MAAM;AAClC;;AAEA;AACA;AACA;AACA;AACO,SAASC,oBAAoBA,CAAA,EAGzB;EACP,IAAI;IACA,OAAOC,uBAAU,CAACC,cAAc,CAAC,CAAC,IAAI,IAAI;EAC9C,CAAC,CAAC,MAAM;IACJ,OAAO,IAAI;EACf;AACJ;;AAEA;AACA;AACA;AACO,SAASC,qBAAqBA,CAACC,MAAe,EAAE;EACnD,OAAOA,MAAM,GAAGC,2BAAmB,GAAGC,4BAAoB;AAC9D","ignoreList":[]}

package/lib/module/animations/breathing.js

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { Easing, cancelAnimation, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withTiming } from "react-native-reanimated";
+/**
+ * A slow, very gentle scale + opacity oscillation — softer and slower than
+ * "pulse" — intended as the most reduced-motion-friendly animation. This is
+ * the animation `Skeleton` falls back to (at a slowed rate) when the OS
+ * reduce-motion setting is on and the consumer hasn't explicitly chosen "none".
+ */
+export function useBreathingStyle({
+  duration = 2200,
+  delay = 0,
+  disabled = false,
+  performanceMode = "balanced",
+  minScale = 0.97,
+  maxScale = 1,
+  minOpacity = 0.85
+}) {
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    if (disabled) {
+      progress.value = 0;
+      return;
+    }
+    const effectiveDuration = performanceMode === "battery-saver" ? duration * 1.2 : duration;
+    progress.value = 0;
+    progress.value = withDelay(delay, withRepeat(withTiming(1, {
+      duration: effectiveDuration / 2,
+      easing: Easing.inOut(Easing.ease)
+    }), -1, true));
+    return () => {
+      cancelAnimation(progress);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, delay, disabled, performanceMode]);
+  const style = useAnimatedStyle(() => {
+    const scale = minScale + progress.value * (maxScale - minScale);
+    const opacity = minOpacity + progress.value * (1 - minOpacity);
+    return {
+      opacity,
+      transform: [{
+        scale
+      }]
+    };
+  }, [minScale, maxScale, minOpacity]);
+  return style;
+}
+//# sourceMappingURL=breathing.js.map

package/lib/module/animations/breathing.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","Easing","cancelAnimation","useAnimatedStyle","useSharedValue","withDelay","withRepeat","withTiming","useBreathingStyle","duration","delay","disabled","performanceMode","minScale","maxScale","minOpacity","progress","value","effectiveDuration","easing","inOut","ease","style","scale","opacity","transform"],"sourceRoot":"../../../src","sources":["animations/breathing.tsx"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SACIC,MAAM,EACNC,eAAe,EACfC,gBAAgB,EAChBC,cAAc,EACdC,SAAS,EACTC,UAAU,EACVC,UAAU,QACP,yBAAyB;AAgBhC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAC;EAC9BC,QAAQ,GAAG,IAAI;EACfC,KAAK,GAAG,CAAC;EACTC,QAAQ,GAAG,KAAK;EAChBC,eAAe,GAAG,UAAU;EAC5BC,QAAQ,GAAG,IAAI;EACfC,QAAQ,GAAG,CAAC;EACZC,UAAU,GAAG;AACC,CAAC,EAAE;EACjB,MAAMC,QAAQ,GAAGZ,cAAc,CAAC,CAAC,CAAC;EAElCJ,SAAS,CAAC,MAAM;IACZ,IAAIW,QAAQ,EAAE;MACVK,QAAQ,CAACC,KAAK,GAAG,CAAC;MAClB;IACJ;IAEA,MAAMC,iBAAiB,GACnBN,eAAe,KAAK,eAAe,GAAGH,QAAQ,GAAG,GAAG,GAAGA,QAAQ;IAEnEO,QAAQ,CAACC,KAAK,GAAG,CAAC;IAClBD,QAAQ,CAACC,KAAK,GAAGZ,SAAS,CACtBK,KAAK,EACLJ,UAAU,CACNC,UAAU,CAAC,CAAC,EAAE;MACVE,QAAQ,EAAES,iBAAiB,GAAG,CAAC;MAC/BC,MAAM,EAAElB,MAAM,CAACmB,KAAK,CAACnB,MAAM,CAACoB,IAAI;IACpC,CAAC,CAAC,EACF,CAAC,CAAC,EACF,IACJ,CACJ,CAAC;IAED,OAAO,MAAM;MACTnB,eAAe,CAACc,QAAQ,CAAC;IAC7B,CAAC;IACD;EACJ,CAAC,EAAE,CAACP,QAAQ,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,eAAe,CAAC,CAAC;EAEhD,MAAMU,KAAK,GAAGnB,gBAAgB,CAAC,MAAM;IACjC,MAAMoB,KAAK,GAAGV,QAAQ,GAAGG,QAAQ,CAACC,KAAK,IAAIH,QAAQ,GAAGD,QAAQ,CAAC;IAC/D,MAAMW,OAAO,GAAGT,UAAU,GAAGC,QAAQ,CAACC,KAAK,IAAI,CAAC,GAAGF,UAAU,CAAC;IAC9D,OAAO;MACHS,OAAO;MACPC,SAAS,EAAE,CAAC;QAAEF;MAAM,CAAC;IACzB,CAAC;EACL,CAAC,EAAE,CAACV,QAAQ,EAAEC,QAAQ,EAAEC,UAAU,CAAC,CAAC;EAEpC,OAAOO,KAAK;AAChB","ignoreList":[]}

package/lib/module/animations/pulse.js

@@ -0,0 +1,44 @@
+import { useEffect } from "react";
+import { Easing, cancelAnimation, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withTiming } from "react-native-reanimated";
+/**
+ * Classic fade in/out pulse: opacity oscillates between minOpacity and
+ * maxOpacity using an ease-in-out curve, looping indefinitely.
+ *
+ * Returns an animated style with just `opacity`, ready to spread onto the
+ * skeleton's base View.
+ */
+export function usePulseStyle({
+  duration = 1000,
+  delay = 0,
+  disabled = false,
+  performanceMode = "balanced",
+  minOpacity = 0.4,
+  maxOpacity = 1
+}) {
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    if (disabled) {
+      progress.value = 0;
+      return;
+    }
+    const effectiveDuration = performanceMode === "battery-saver" ? duration * 1.3 : duration;
+    progress.value = 0;
+    progress.value = withDelay(delay, withRepeat(withTiming(1, {
+      duration: effectiveDuration / 2,
+      easing: Easing.inOut(Easing.ease)
+    }), -1, true // reverse, giving the fade-in/fade-out loop
+    ));
+    return () => {
+      cancelAnimation(progress);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, delay, disabled, performanceMode]);
+  const style = useAnimatedStyle(() => {
+    const opacity = minOpacity + progress.value * (maxOpacity - minOpacity);
+    return {
+      opacity
+    };
+  }, [minOpacity, maxOpacity]);
+  return style;
+}
+//# sourceMappingURL=pulse.js.map

package/lib/module/animations/pulse.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","Easing","cancelAnimation","useAnimatedStyle","useSharedValue","withDelay","withRepeat","withTiming","usePulseStyle","duration","delay","disabled","performanceMode","minOpacity","maxOpacity","progress","value","effectiveDuration","easing","inOut","ease","style","opacity"],"sourceRoot":"../../../src","sources":["animations/pulse.tsx"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SACIC,MAAM,EACNC,eAAe,EACfC,gBAAgB,EAChBC,cAAc,EACdC,SAAS,EACTC,UAAU,EACVC,UAAU,QACP,yBAAyB;AAchC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAAC;EAC1BC,QAAQ,GAAG,IAAI;EACfC,KAAK,GAAG,CAAC;EACTC,QAAQ,GAAG,KAAK;EAChBC,eAAe,GAAG,UAAU;EAC5BC,UAAU,GAAG,GAAG;EAChBC,UAAU,GAAG;AACH,CAAC,EAAE;EACb,MAAMC,QAAQ,GAAGX,cAAc,CAAC,CAAC,CAAC;EAElCJ,SAAS,CAAC,MAAM;IACZ,IAAIW,QAAQ,EAAE;MACVI,QAAQ,CAACC,KAAK,GAAG,CAAC;MAClB;IACJ;IAEA,MAAMC,iBAAiB,GACnBL,eAAe,KAAK,eAAe,GAAGH,QAAQ,GAAG,GAAG,GAAGA,QAAQ;IAEnEM,QAAQ,CAACC,KAAK,GAAG,CAAC;IAClBD,QAAQ,CAACC,KAAK,GAAGX,SAAS,CACtBK,KAAK,EACLJ,UAAU,CACNC,UAAU,CAAC,CAAC,EAAE;MACVE,QAAQ,EAAEQ,iBAAiB,GAAG,CAAC;MAC/BC,MAAM,EAAEjB,MAAM,CAACkB,KAAK,CAAClB,MAAM,CAACmB,IAAI;IACpC,CAAC,CAAC,EACF,CAAC,CAAC,EACF,IAAI,CAAC;IACT,CACJ,CAAC;IAED,OAAO,MAAM;MACTlB,eAAe,CAACa,QAAQ,CAAC;IAC7B,CAAC;IACD;EACJ,CAAC,EAAE,CAACN,QAAQ,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,eAAe,CAAC,CAAC;EAEhD,MAAMS,KAAK,GAAGlB,gBAAgB,CAAC,MAAM;IACjC,MAAMmB,OAAO,GAAGT,UAAU,GAAGE,QAAQ,CAACC,KAAK,IAAIF,UAAU,GAAGD,UAAU,CAAC;IACvE,OAAO;MAAES;IAAQ,CAAC;EACtB,CAAC,EAAE,CAACT,UAAU,EAAEC,UAAU,CAAC,CAAC;EAE5B,OAAOO,KAAK;AAChB","ignoreList":[]}

package/lib/module/animations/shimmer.js

@@ -0,0 +1,61 @@
+import { useEffect } from "react";
+import { Easing, cancelAnimation, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withTiming } from "react-native-reanimated";
+/**
+ * Drives a 0 -> 1 -> 0 progress value looping indefinitely, intended to be
+ * mapped (by the consuming component) onto a translateX of a gradient
+ * overlay to create the classic "shimmer sweep" effect.
+ *
+ * Returns both the raw shared value-derived animated style (opacity passthrough,
+ * so it can be spread directly) and the progress itself isn't exposed —
+ * components should use `useShimmerTransform` below to get a transform style
+ * sized to their own width.
+ */
+export function useShimmerProgress({
+  duration = 1200,
+  delay = 0,
+  disabled = false,
+  performanceMode = "balanced"
+}) {
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    if (disabled) {
+      progress.value = 0;
+      return;
+    }
+    const effectiveDuration = performanceMode === "battery-saver" ? duration * 1.4 : duration;
+    progress.value = 0;
+    progress.value = withDelay(delay, withRepeat(withTiming(1, {
+      duration: effectiveDuration,
+      easing: Easing.linear
+    }), -1, false));
+    return () => {
+      cancelAnimation(progress);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, delay, disabled, performanceMode]);
+  return progress;
+}
+
+/**
+ * Convenience hook: given a measured width, returns an animated style that
+ * translates a highlight overlay (assumed ~60% of `width` wide) from off-screen
+ * left to off-screen right, looping. Use on an absolutely-positioned overlay
+ * View/LinearGradient layered on top of the base skeleton rect.
+ */
+export function useShimmerTransform(width, options) {
+  const progress = useShimmerProgress(options);
+  const sweepWidth = Math.max(width, 1) * 0.6;
+  const style = useAnimatedStyle(() => {
+    const translateX = -sweepWidth + progress.value * (width + sweepWidth);
+    return {
+      transform: [{
+        translateX
+      }]
+    };
+  }, [width, sweepWidth]);
+  return {
+    style,
+    sweepWidth
+  };
+}
+//# sourceMappingURL=shimmer.js.map

package/lib/module/animations/shimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","Easing","cancelAnimation","useAnimatedStyle","useSharedValue","withDelay","withRepeat","withTiming","useShimmerProgress","duration","delay","disabled","performanceMode","progress","value","effectiveDuration","easing","linear","useShimmerTransform","width","options","sweepWidth","Math","max","style","translateX","transform"],"sourceRoot":"../../../src","sources":["animations/shimmer.tsx"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SACIC,MAAM,EACNC,eAAe,EACfC,gBAAgB,EAChBC,cAAc,EACdC,SAAS,EACTC,UAAU,EACVC,UAAU,QACP,yBAAyB;AAWhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAAC;EAC/BC,QAAQ,GAAG,IAAI;EACfC,KAAK,GAAG,CAAC;EACTC,QAAQ,GAAG,KAAK;EAChBC,eAAe,GAAG;AACN,CAAC,EAAE;EACf,MAAMC,QAAQ,GAAGT,cAAc,CAAC,CAAC,CAAC;EAElCJ,SAAS,CAAC,MAAM;IACZ,IAAIW,QAAQ,EAAE;MACVE,QAAQ,CAACC,KAAK,GAAG,CAAC;MAClB;IACJ;IAEA,MAAMC,iBAAiB,GACnBH,eAAe,KAAK,eAAe,GAAGH,QAAQ,GAAG,GAAG,GAAGA,QAAQ;IAEnEI,QAAQ,CAACC,KAAK,GAAG,CAAC;IAClBD,QAAQ,CAACC,KAAK,GAAGT,SAAS,CACtBK,KAAK,EACLJ,UAAU,CACNC,UAAU,CAAC,CAAC,EAAE;MACVE,QAAQ,EAAEM,iBAAiB;MAC3BC,MAAM,EAAEf,MAAM,CAACgB;IACnB,CAAC,CAAC,EACF,CAAC,CAAC,EACF,KACJ,CACJ,CAAC;IAED,OAAO,MAAM;MACTf,eAAe,CAACW,QAAQ,CAAC;IAC7B,CAAC;IACD;EACJ,CAAC,EAAE,CAACJ,QAAQ,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,eAAe,CAAC,CAAC;EAEhD,OAAOC,QAAQ;AACnB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASK,mBAAmBA,CAACC,KAAa,EAAEC,OAAuB,EAAE;EACxE,MAAMP,QAAQ,GAAGL,kBAAkB,CAACY,OAAO,CAAC;EAC5C,MAAMC,UAAU,GAAGC,IAAI,CAACC,GAAG,CAACJ,KAAK,EAAE,CAAC,CAAC,GAAG,GAAG;EAE3C,MAAMK,KAAK,GAAGrB,gBAAgB,CAAC,MAAM;IACjC,MAAMsB,UAAU,GAAG,CAACJ,UAAU,GAAGR,QAAQ,CAACC,KAAK,IAAIK,KAAK,GAAGE,UAAU,CAAC;IACtE,OAAO;MACHK,SAAS,EAAE,CAAC;QAAED;MAAW,CAAC;IAC9B,CAAC;EACL,CAAC,EAAE,CAACN,KAAK,EAAEE,UAAU,CAAC,CAAC;EAEvB,OAAO;IAAEG,KAAK;IAAEH;EAAW,CAAC;AAChC","ignoreList":[]}

package/lib/module/animations/wave.js

@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import { Easing, cancelAnimation, interpolate, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withTiming } from "react-native-reanimated";
+/**
+ * Similar to shimmer, but drives a smoother sine-like sweep (ease-in-out
+ * instead of linear) intended for a softer "ripple" look, typically paired
+ * with a wider, lower-contrast gradient than shimmer uses.
+ *
+ * Returns a translateX-based animated style for a given measured width.
+ */
+export function useWaveTransform(width, options) {
+  const {
+    duration = 1500,
+    delay = 0,
+    disabled = false,
+    performanceMode = "balanced"
+  } = options;
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    if (disabled) {
+      progress.value = 0;
+      return;
+    }
+    const effectiveDuration = performanceMode === "battery-saver" ? duration * 1.4 : duration;
+    progress.value = 0;
+    progress.value = withDelay(delay, withRepeat(withTiming(1, {
+      duration: effectiveDuration,
+      easing: Easing.inOut(Easing.sin)
+    }), -1, false));
+    return () => {
+      cancelAnimation(progress);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, delay, disabled, performanceMode]);
+  const sweepWidth = Math.max(width, 1) * 0.8;
+  const style = useAnimatedStyle(() => {
+    const translateX = interpolate(progress.value, [0, 1], [-sweepWidth, width + sweepWidth]);
+    return {
+      transform: [{
+        translateX
+      }]
+    };
+  }, [width, sweepWidth]);
+  return {
+    style,
+    sweepWidth
+  };
+}
+//# sourceMappingURL=wave.js.map

package/lib/module/animations/wave.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","Easing","cancelAnimation","interpolate","useAnimatedStyle","useSharedValue","withDelay","withRepeat","withTiming","useWaveTransform","width","options","duration","delay","disabled","performanceMode","progress","value","effectiveDuration","easing","inOut","sin","sweepWidth","Math","max","style","translateX","transform"],"sourceRoot":"../../../src","sources":["animations/wave.tsx"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SACIC,MAAM,EACNC,eAAe,EACfC,WAAW,EACXC,gBAAgB,EAChBC,cAAc,EACdC,SAAS,EACTC,UAAU,EACVC,UAAU,QACP,yBAAyB;AAUhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAACC,KAAa,EAAEC,OAAoB,EAAE;EAClE,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC,KAAK,GAAG,CAAC;IAAEC,QAAQ,GAAG,KAAK;IAAEC,eAAe,GAAG;EAAW,CAAC,GAAGJ,OAAO;EAC9F,MAAMK,QAAQ,GAAGX,cAAc,CAAC,CAAC,CAAC;EAElCL,SAAS,CAAC,MAAM;IACZ,IAAIc,QAAQ,EAAE;MACVE,QAAQ,CAACC,KAAK,GAAG,CAAC;MAClB;IACJ;IAEA,MAAMC,iBAAiB,GACnBH,eAAe,KAAK,eAAe,GAAGH,QAAQ,GAAG,GAAG,GAAGA,QAAQ;IAEnEI,QAAQ,CAACC,KAAK,GAAG,CAAC;IAClBD,QAAQ,CAACC,KAAK,GAAGX,SAAS,CACtBO,KAAK,EACLN,UAAU,CACNC,UAAU,CAAC,CAAC,EAAE;MACVI,QAAQ,EAAEM,iBAAiB;MAC3BC,MAAM,EAAElB,MAAM,CAACmB,KAAK,CAACnB,MAAM,CAACoB,GAAG;IACnC,CAAC,CAAC,EACF,CAAC,CAAC,EACF,KACJ,CACJ,CAAC;IAED,OAAO,MAAM;MACTnB,eAAe,CAACc,QAAQ,CAAC;IAC7B,CAAC;IACD;EACJ,CAAC,EAAE,CAACJ,QAAQ,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,eAAe,CAAC,CAAC;EAEhD,MAAMO,UAAU,GAAGC,IAAI,CAACC,GAAG,CAACd,KAAK,EAAE,CAAC,CAAC,GAAG,GAAG;EAE3C,MAAMe,KAAK,GAAGrB,gBAAgB,CAAC,MAAM;IACjC,MAAMsB,UAAU,GAAGvB,WAAW,CAC1Ba,QAAQ,CAACC,KAAK,EACd,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAACK,UAAU,EAAEZ,KAAK,GAAGY,UAAU,CACpC,CAAC;IACD,OAAO;MACHK,SAAS,EAAE,CAAC;QAAED;MAAW,CAAC;IAC9B,CAAC;EACL,CAAC,EAAE,CAAChB,KAAK,EAAEY,UAAU,CAAC,CAAC;EAEvB,OAAO;IAAEG,KAAK;IAAEH;EAAW,CAAC;AAChC","ignoreList":[]}

package/lib/module/clone/SkeletonClone.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { View } from "react-native";
+import Skeleton from "../components/Skeleton";
+function renderNode(node, animation, keyPrefix) {
+  const {
+    shape = "rect",
+    width,
+    height,
+    borderRadius,
+    style,
+    children,
+    direction = "column",
+    gap = 8
+  } = node;
+  let resolvedBorderRadius = borderRadius;
+  if (shape === "circle") {
+    const numericSize = typeof width === "number" ? width : typeof height === "number" ? height : 50;
+    resolvedBorderRadius = numericSize / 2;
+  } else if (shape === "pill") {
+    const numericHeight = typeof height === "number" ? height : 24;
+    resolvedBorderRadius = resolvedBorderRadius ?? numericHeight / 2;
+  }
+  if (children && children.length > 0) {
+    return /*#__PURE__*/React.createElement(View, {
+      key: keyPrefix,
+      style: [{
+        flexDirection: direction === "row" ? "row" : "column"
+      }, style]
+    }, children.map((child, i) => /*#__PURE__*/React.createElement(View, {
+      key: `${keyPrefix}-${i}`,
+      style: direction === "row" ? {
+        marginLeft: i === 0 ? 0 : gap
+      } : {
+        marginTop: i === 0 ? 0 : gap
+      }
+    }, renderNode(child, animation, `${keyPrefix}-${i}`))));
+  }
+  return /*#__PURE__*/React.createElement(Skeleton, {
+    width: width ?? "100%",
+    height: height ?? 16,
+    borderRadius: resolvedBorderRadius ?? 4,
+    animation: animation,
+    style: style
+  });
+}
+
+/**
+ * Clones an arbitrary layout tree as skeleton placeholders. Useful when you
+ * have a complex, bespoke screen layout and don't want to hand-place a
+ * Skeleton for every element — instead describe the rough shape once as a
+ * `SkeletonCloneNode` tree (mirroring your real layout's structure) and let
+ * SkeletonClone render matching placeholders.
+ *
+ * @example
+ * <SkeletonClone
+ *   layout={{
+ *     direction: "row",
+ *     gap: 12,
+ *     children: [
+ *       { shape: "circle", width: 48, height: 48 },
+ *       {
+ *         direction: "column",
+ *         gap: 6,
+ *         children: [
+ *           { width: 120, height: 14 },
+ *           { width: 80, height: 12 },
+ *         ],
+ *       },
+ *     ],
+ *   }}
+ * />
+ */
+export default function SkeletonClone({
+  layout,
+  animation,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/React.createElement(View, {
+    style: style,
+    testID: testID
+  }, renderNode(layout, animation, "clone-root"));
+}
+//# sourceMappingURL=SkeletonClone.js.map

package/lib/module/clone/SkeletonClone.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Skeleton","renderNode","node","animation","keyPrefix","shape","width","height","borderRadius","style","children","direction","gap","resolvedBorderRadius","numericSize","numericHeight","length","createElement","key","flexDirection","map","child","i","marginLeft","marginTop","SkeletonClone","layout","testID"],"sourceRoot":"../../../src","sources":["clone/SkeletonClone.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,OAAOC,QAAQ,MAAM,wBAAwB;AAG7C,SAASC,UAAUA,CAACC,IAAuB,EAAEC,SAA0C,EAAEC,SAAiB,EAAE;EACxG,MAAM;IAAEC,KAAK,GAAG,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,YAAY;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS,GAAG,QAAQ;IAAEC,GAAG,GAAG;EAAE,CAAC,GAAGV,IAAI;EAE5G,IAAIW,oBAAoB,GAAGL,YAAY;EACvC,IAAIH,KAAK,KAAK,QAAQ,EAAE;IACpB,MAAMS,WAAW,GAAG,OAAOR,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAG,OAAOC,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,EAAE;IAChGM,oBAAoB,GAAGC,WAAW,GAAG,CAAC;EAC1C,CAAC,MAAM,IAAIT,KAAK,KAAK,MAAM,EAAE;IACzB,MAAMU,aAAa,GAAG,OAAOR,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,EAAE;IAC9DM,oBAAoB,GAAGA,oBAAoB,IAAIE,aAAa,GAAG,CAAC;EACpE;EAEA,IAAIL,QAAQ,IAAIA,QAAQ,CAACM,MAAM,GAAG,CAAC,EAAE;IACjC,oBACIlB,KAAA,CAAAmB,aAAA,CAAClB,IAAI;MACDmB,GAAG,EAAEd,SAAU;MACfK,KAAK,EAAE,CACH;QAAEU,aAAa,EAAER,SAAS,KAAK,KAAK,GAAG,KAAK,GAAG;MAAS,CAAC,EACzDF,KAAK;IACP,GAEDC,QAAQ,CAACU,GAAG,CAAC,CAACC,KAAK,EAAEC,CAAC,kBACnBxB,KAAA,CAAAmB,aAAA,CAAClB,IAAI;MACDmB,GAAG,EAAE,GAAGd,SAAS,IAAIkB,CAAC,EAAG;MACzBb,KAAK,EACDE,SAAS,KAAK,KAAK,GACb;QAAEY,UAAU,EAAED,CAAC,KAAK,CAAC,GAAG,CAAC,GAAGV;MAAI,CAAC,GACjC;QAAEY,SAAS,EAAEF,CAAC,KAAK,CAAC,GAAG,CAAC,GAAGV;MAAI;IACxC,GAEAX,UAAU,CAACoB,KAAK,EAAElB,SAAS,EAAE,GAAGC,SAAS,IAAIkB,CAAC,EAAE,CAC/C,CACT,CACC,CAAC;EAEf;EAEA,oBACIxB,KAAA,CAAAmB,aAAA,CAACjB,QAAQ;IACLM,KAAK,EAAEA,KAAK,IAAI,MAAO;IACvBC,MAAM,EAAEA,MAAM,IAAI,EAAG;IACrBC,YAAY,EAAEK,oBAAoB,IAAI,CAAE;IACxCV,SAAS,EAAEA,SAAU;IACrBM,KAAK,EAAEA;EAAM,CAChB,CAAC;AAEV;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASgB,aAAaA,CAAC;EAAEC,MAAM;EAAEvB,SAAS;EAAEM,KAAK;EAAEkB;AAA2B,CAAC,EAAE;EAC5F,oBAAO7B,KAAA,CAAAmB,aAAA,CAAClB,IAAI;IAACU,KAAK,EAAEA,KAAM;IAACkB,MAAM,EAAEA;EAAO,GAAE1B,UAAU,CAACyB,MAAM,EAAEvB,SAAS,EAAE,YAAY,CAAQ,CAAC;AACnG","ignoreList":[]}

package/lib/module/components/Circle.js

@@ -0,0 +1,20 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from "react";
+import Skeleton from "./Skeleton";
+/**
+ * A circular skeleton placeholder, commonly used for avatars.
+ *
+ * @example
+ * <Skeleton.Circle size={48} />
+ */
+export default function Circle({
+  size = 50,
+  ...props
+}) {
+  return /*#__PURE__*/React.createElement(Skeleton, _extends({
+    width: size,
+    height: size,
+    borderRadius: size / 2
+  }, props));
+}
+//# sourceMappingURL=Circle.js.map

package/lib/module/components/Circle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Skeleton","Circle","size","props","createElement","_extends","width","height","borderRadius"],"sourceRoot":"../../../src","sources":["components/Circle.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,YAAY;AAGjC;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,MAAMA,CAAC;EAAEC,IAAI,GAAG,EAAE;EAAE,GAAGC;AAA2B,CAAC,EAAE;EACzE,oBAAOJ,KAAA,CAAAK,aAAA,CAACJ,QAAQ,EAAAK,QAAA;IAACC,KAAK,EAAEJ,IAAK;IAACK,MAAM,EAAEL,IAAK;IAACM,YAAY,EAAEN,IAAI,GAAG;EAAE,GAAKC,KAAK,CAAG,CAAC;AACrF","ignoreList":[]}

package/lib/module/components/Group.js

@@ -0,0 +1,50 @@
+import React, { Children, isValidElement, cloneElement } from "react";
+import { View } from "react-native";
+/**
+ * Groups multiple skeleton children together and automatically staggers
+ * their animation start so they don't all pulse/shimmer perfectly in sync —
+ * a subtle touch that reads as more natural for lists of skeleton rows.
+ *
+ * Any direct child that accepts a `delay` prop (i.e. any Skeleton.* shape,
+ * or a custom component that forwards `delay` to one) will have an
+ * incremental delay injected automatically. Children that already specify
+ * their own `delay` are left untouched.
+ *
+ * @example
+ * <Skeleton.Group staggerDelay={80}>
+ *   <Skeleton.Rect width="100%" height={16} />
+ *   <Skeleton.Rect width="80%" height={16} />
+ *   <Skeleton.Rect width="60%" height={16} />
+ * </Skeleton.Group>
+ */
+export default function Group({
+  children,
+  staggerDelay = 80,
+  animation,
+  direction = "column",
+  style,
+  testID
+}) {
+  const items = Children.toArray(children);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [{
+      flexDirection: direction === "row" ? "row" : "column"
+    }, style],
+    testID: testID
+  }, items.map((child, index) => {
+    if (! /*#__PURE__*/isValidElement(child)) return child;
+    const existingProps = child.props;
+    const injectedProps = {};
+    if (existingProps.delay === undefined) {
+      injectedProps.delay = index * staggerDelay;
+    }
+    if (animation && existingProps.animation === undefined) {
+      injectedProps.animation = animation;
+    }
+    return /*#__PURE__*/cloneElement(child, {
+      key: child.key ?? index,
+      ...injectedProps
+    });
+  }));
+}
+//# sourceMappingURL=Group.js.map

package/lib/module/components/Group.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Children","isValidElement","cloneElement","View","Group","children","staggerDelay","animation","direction","style","testID","items","toArray","createElement","flexDirection","map","child","index","existingProps","props","injectedProps","delay","undefined","key"],"sourceRoot":"../../../src","sources":["components/Group.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,cAAc,EAAEC,YAAY,QAAQ,OAAO;AACrE,SAASC,IAAI,QAAQ,cAAc;AAGnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,KAAKA,CAAC;EAC1BC,QAAQ;EACRC,YAAY,GAAG,EAAE;EACjBC,SAAS;EACTC,SAAS,GAAG,QAAQ;EACpBC,KAAK;EACLC;AACgB,CAAC,EAAE;EACnB,MAAMC,KAAK,GAAGX,QAAQ,CAACY,OAAO,CAACP,QAAQ,CAAC;EAExC,oBACIN,KAAA,CAAAc,aAAA,CAACV,IAAI;IACDM,KAAK,EAAE,CAAC;MAAEK,aAAa,EAAEN,SAAS,KAAK,KAAK,GAAG,KAAK,GAAG;IAAS,CAAC,EAAEC,KAAK,CAAE;IAC1EC,MAAM,EAAEA;EAAO,GAEdC,KAAK,CAACI,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;IACzB,IAAI,eAAChB,cAAc,CAACe,KAAK,CAAC,EAAE,OAAOA,KAAK;IAExC,MAAME,aAAa,GAAGF,KAAK,CAACG,KAAgC;IAC5D,MAAMC,aAAsC,GAAG,CAAC,CAAC;IAEjD,IAAIF,aAAa,CAACG,KAAK,KAAKC,SAAS,EAAE;MACnCF,aAAa,CAACC,KAAK,GAAGJ,KAAK,GAAGX,YAAY;IAC9C;IAEA,IAAIC,SAAS,IAAIW,aAAa,CAACX,SAAS,KAAKe,SAAS,EAAE;MACpDF,aAAa,CAACb,SAAS,GAAGA,SAAS;IACvC;IAEA,oBAAOL,YAAY,CAACc,KAAK,EAAE;MAAEO,GAAG,EAAEP,KAAK,CAACO,GAAG,IAAIN,KAAK;MAAE,GAAGG;IAAc,CAAC,CAAC;EAC7E,CAAC,CACC,CAAC;AAEf","ignoreList":[]}

package/lib/module/components/Pill.js

@@ -0,0 +1,25 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from "react";
+import Skeleton from "./Skeleton";
+/**
+ * A fully-rounded "pill" skeleton placeholder, commonly used for buttons,
+ * tags/chips, or badges. Border radius is automatically derived from height
+ * unless overridden.
+ *
+ * @example
+ * <Skeleton.Pill width={80} height={28} />
+ */
+export default function Pill({
+  width = 80,
+  height = 24,
+  borderRadius,
+  ...props
+}) {
+  const numericHeight = typeof height === "number" ? height : 24;
+  return /*#__PURE__*/React.createElement(Skeleton, _extends({
+    width: width,
+    height: height,
+    borderRadius: borderRadius ?? numericHeight / 2
+  }, props));
+}
+//# sourceMappingURL=Pill.js.map

package/lib/module/components/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Skeleton","Pill","width","height","borderRadius","props","numericHeight","createElement","_extends"],"sourceRoot":"../../../src","sources":["components/Pill.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,YAAY;AAGjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,IAAIA,CAAC;EAAEC,KAAK,GAAG,EAAE;EAAEC,MAAM,GAAG,EAAE;EAAEC,YAAY;EAAE,GAAGC;AAAyB,CAAC,EAAE;EACjG,MAAMC,aAAa,GAAG,OAAOH,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,EAAE;EAC9D,oBACIJ,KAAA,CAAAQ,aAAA,CAACP,QAAQ,EAAAQ,QAAA;IACLN,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfC,YAAY,EAAEA,YAAY,IAAIE,aAAa,GAAG;EAAE,GAC5CD,KAAK,CACZ,CAAC;AAEV","ignoreList":[]}

package/lib/module/components/Rect.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Skeleton from "./Skeleton";
+/**
+ * A rectangular skeleton placeholder. Equivalent to `<Skeleton />` directly,
+ * provided for a consistent, explicit naming convention alongside
+ * `Skeleton.Circle`, `Skeleton.Square`, and `Skeleton.Pill`.
+ *
+ * @example
+ * <Skeleton.Rect width={200} height={20} />
+ */
+export default function Rect(props) {
+  return /*#__PURE__*/React.createElement(Skeleton, props);
+}
+//# sourceMappingURL=Rect.js.map

package/lib/module/components/Rect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Skeleton","Rect","props","createElement"],"sourceRoot":"../../../src","sources":["components/Rect.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,YAAY;AAGjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,IAAIA,CAACC,KAAoB,EAAE;EAC/C,oBAAOH,KAAA,CAAAI,aAAA,CAACH,QAAQ,EAAKE,KAAQ,CAAC;AAClC","ignoreList":[]}