react-native-skelo 0.0.1 → 0.0.3

package/lib/module/animations/AnimationWrapper.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { View } from 'react-native';
+import { ShimmerAnimation } from './ShimmerAnimation';
+import { PulseAnimation } from './PulseAnimation';
+/**
+ * Animation wrapper that selects the appropriate animation type
+ *
+ * Provides a unified interface for all skeleton animations:
+ * - shimmer: Left-to-right shimmer effect
+ * - pulse: Breathing/pulsing opacity
+ * - none: Static skeleton (no animation)
+ *
+ * @example
+ * ```tsx
+ * <AnimationWrapper
+ *   animation="shimmer"
+ *   width={200}
+ *   height={20}
+ * />
+ * ```
+ */
+export function AnimationWrapper({
+  animation = 'shimmer',
+  width,
+  height,
+  baseColor = '#E1E9EE',
+  highlightColor = '#F2F8FC',
+  duration,
+  borderRadius = 4,
+  style,
+  children
+}) {
+  // No animation - static skeleton
+  if (animation === 'none') {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [{
+        width,
+        height,
+        borderRadius,
+        backgroundColor: baseColor
+      }, style]
+    }, children);
+  }
+
+  // Shimmer animation
+  if (animation === 'shimmer') {
+    return /*#__PURE__*/React.createElement(ShimmerAnimation, {
+      width: width,
+      height: height,
+      baseColor: baseColor,
+      highlightColor: highlightColor,
+      duration: duration ?? 1500,
+      borderRadius: borderRadius,
+      style: style
+    }, children);
+  }
+
+  // Pulse animation
+  return /*#__PURE__*/React.createElement(PulseAnimation, {
+    width: width,
+    height: height,
+    baseColor: baseColor,
+    highlightColor: highlightColor,
+    duration: duration ?? 1000,
+    borderRadius: borderRadius,
+    style: style
+  }, children);
+}
+//# sourceMappingURL=AnimationWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","ShimmerAnimation","PulseAnimation","AnimationWrapper","animation","width","height","baseColor","highlightColor","duration","borderRadius","style","children","createElement","backgroundColor"],"sourceRoot":"../../../src","sources":["animations/AnimationWrapper.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,cAAc,QAAQ,kBAAkB;AAwDjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,SAAS,GAAG,SAAS;EACrBC,KAAK;EACLC,MAAM;EACNC,SAAS,GAAG,SAAS;EACrBC,cAAc,GAAG,SAAS;EAC1BC,QAAQ;EACRC,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC;AACqB,CAAC,EAAE;EACxB;EACA,IAAIR,SAAS,KAAK,MAAM,EAAE;IACxB,oBACEL,KAAA,CAAAc,aAAA,CAACb,IAAI;MACHW,KAAK,EAAE,CACL;QACEN,KAAK;QACLC,MAAM;QACNI,YAAY;QACZI,eAAe,EAAEP;MACnB,CAAC,EACDI,KAAK;IACL,GAEDC,QACG,CAAC;EAEX;;EAEA;EACA,IAAIR,SAAS,KAAK,SAAS,EAAE;IAC3B,oBACEL,KAAA,CAAAc,aAAA,CAACZ,gBAAgB;MACfI,KAAK,EAAEA,KAAM;MACbC,MAAM,EAAEA,MAAO;MACfC,SAAS,EAAEA,SAAU;MACrBC,cAAc,EAAEA,cAAe;MAC/BC,QAAQ,EAAEA,QAAQ,IAAI,IAAK;MAC3BC,YAAY,EAAEA,YAAa;MAC3BC,KAAK,EAAEA;IAAM,GAEZC,QACe,CAAC;EAEvB;;EAEA;EACA,oBACEb,KAAA,CAAAc,aAAA,CAACX,cAAc;IACbG,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfC,SAAS,EAAEA,SAAU;IACrBC,cAAc,EAAEA,cAAe;IAC/BC,QAAQ,EAAEA,QAAQ,IAAI,IAAK;IAC3BC,YAAY,EAAEA,YAAa;IAC3BC,KAAK,EAAEA;EAAM,GAEZC,QACa,CAAC;AAErB","ignoreList":[]}

package/lib/module/animations/PulseAnimation.js

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withSequence, withTiming, Easing } from 'react-native-reanimated';
+// Breathing opacity loop on the UI thread with Reanimated.
+export function PulseAnimation({
+  width,
+  height,
+  baseColor = '#E1E9EE',
+  duration = 1000,
+  borderRadius = 4,
+  style,
+  children
+}) {
+  const opacity = useSharedValue(1);
+  useEffect(() => {
+    opacity.value = withRepeat(withSequence(withTiming(0.5, {
+      duration: duration / 2,
+      easing: Easing.inOut(Easing.ease)
+    }), withTiming(1, {
+      duration: duration / 2,
+      easing: Easing.inOut(Easing.ease)
+    })), -1, false);
+  }, [duration, opacity]);
+  const animatedStyle = useAnimatedStyle(() => {
+    'worklet';
+
+    return {
+      opacity: opacity.value
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.container, {
+      width,
+      height,
+      borderRadius,
+      backgroundColor: baseColor
+    }, animatedStyle, style]
+  }, children);
+}
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden'
+  }
+});
+//# sourceMappingURL=PulseAnimation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","StyleSheet","Animated","useSharedValue","useAnimatedStyle","withRepeat","withSequence","withTiming","Easing","PulseAnimation","width","height","baseColor","duration","borderRadius","style","children","opacity","value","easing","inOut","ease","animatedStyle","createElement","View","styles","container","backgroundColor","create","overflow"],"sourceRoot":"../../../src","sources":["animations/PulseAnimation.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AAExC,SAASC,UAAU,QAAQ,cAAc;AACzC,OAAOC,QAAQ,IACbC,cAAc,EACdC,gBAAgB,EAChBC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,QACD,yBAAyB;AAahC;AACA,OAAO,SAASC,cAAcA,CAAC;EAC7BC,KAAK;EACLC,MAAM;EACNC,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC;AACU,CAAC,EAAE;EACb,MAAMC,OAAO,GAAGd,cAAc,CAAC,CAAC,CAAC;EAEjCH,SAAS,CAAC,MAAM;IACdiB,OAAO,CAACC,KAAK,GAAGb,UAAU,CACxBC,YAAY,CACVC,UAAU,CAAC,GAAG,EAAE;MACdM,QAAQ,EAAEA,QAAQ,GAAG,CAAC;MACtBM,MAAM,EAAEX,MAAM,CAACY,KAAK,CAACZ,MAAM,CAACa,IAAI;IAClC,CAAC,CAAC,EACFd,UAAU,CAAC,CAAC,EAAE;MACZM,QAAQ,EAAEA,QAAQ,GAAG,CAAC;MACtBM,MAAM,EAAEX,MAAM,CAACY,KAAK,CAACZ,MAAM,CAACa,IAAI;IAClC,CAAC,CACH,CAAC,EACD,CAAC,CAAC,EACF,KACF,CAAC;EACH,CAAC,EAAE,CAACR,QAAQ,EAAEI,OAAO,CAAC,CAAC;EAEvB,MAAMK,aAAa,GAAGlB,gBAAgB,CAAC,MAAM;IAC3C,SAAS;;IACT,OAAO;MAAEa,OAAO,EAAEA,OAAO,CAACC;IAAM,CAAC;EACnC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEnB,KAAA,CAAAwB,aAAA,CAACrB,QAAQ,CAACsB,IAAI;IACZT,KAAK,EAAE,CACLU,MAAM,CAACC,SAAS,EAChB;MAAEhB,KAAK;MAAEC,MAAM;MAAEG,YAAY;MAAEa,eAAe,EAAEf;IAAU,CAAC,EAC3DU,aAAa,EACbP,KAAK;EACL,GAEDC,QACY,CAAC;AAEpB;AAEA,MAAMS,MAAM,GAAGxB,UAAU,CAAC2B,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/animations/ShimmerAnimation.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, interpolate, Easing } from 'react-native-reanimated';
+// Shimmer with no gradient library: the sweeping overlay uses React Native's
+// built-in `experimental_backgroundImage` CSS gradient (New Architecture),
+// animated on the UI thread with Reanimated.
+export function ShimmerAnimation({
+  width,
+  height,
+  baseColor = '#E1E9EE',
+  highlightColor = '#F2F8FC',
+  duration = 1500,
+  borderRadius = 4,
+  style,
+  children
+}) {
+  const progress = useSharedValue(0);
+  const [measuredWidth, setMeasuredWidth] = useState(0);
+  useEffect(() => {
+    progress.value = withRepeat(withTiming(1, {
+      duration,
+      easing: Easing.linear
+    }), -1, false);
+  }, [duration, progress]);
+  const onLayout = event => {
+    const w = event.nativeEvent.layout.width;
+    setMeasuredWidth(prev => prev === w ? prev : w);
+  };
+  const containerWidth = typeof width === 'number' ? width : measuredWidth;
+  const animatedStyle = useAnimatedStyle(() => {
+    'worklet';
+
+    const translateX = interpolate(progress.value, [0, 1], [-containerWidth, containerWidth]);
+    return {
+      transform: [{
+        translateX
+      }]
+    };
+  }, [containerWidth]);
+
+  // `experimental_backgroundImage` isn't in the ViewStyle types yet.
+  const gradientStyle = {
+    ...StyleSheet.absoluteFillObject,
+    experimental_backgroundImage: `linear-gradient(to right, ${baseColor}, ${highlightColor}, ${baseColor})`
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    onLayout: onLayout,
+    style: [styles.container, {
+      width,
+      height,
+      borderRadius,
+      backgroundColor: baseColor
+    }, style]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    pointerEvents: "none",
+    style: [StyleSheet.absoluteFill, animatedStyle]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: gradientStyle
+  })), children);
+}
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden'
+  }
+});
+//# sourceMappingURL=ShimmerAnimation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","StyleSheet","View","Animated","useSharedValue","useAnimatedStyle","withRepeat","withTiming","interpolate","Easing","ShimmerAnimation","width","height","baseColor","highlightColor","duration","borderRadius","style","children","progress","measuredWidth","setMeasuredWidth","value","easing","linear","onLayout","event","w","nativeEvent","layout","prev","containerWidth","animatedStyle","translateX","transform","gradientStyle","absoluteFillObject","experimental_backgroundImage","createElement","styles","container","backgroundColor","pointerEvents","absoluteFill","create","overflow"],"sourceRoot":"../../../src","sources":["animations/ShimmerAnimation.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAOlD,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,QAAQ,IACbC,cAAc,EACdC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,MAAM,QACD,yBAAyB;AAahC;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,KAAK;EACLC,MAAM;EACNC,SAAS,GAAG,SAAS;EACrBC,cAAc,GAAG,SAAS;EAC1BC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC;AACY,CAAC,EAAE;EACf,MAAMC,QAAQ,GAAGf,cAAc,CAAC,CAAC,CAAC;EAClC,MAAM,CAACgB,aAAa,EAAEC,gBAAgB,CAAC,GAAGrB,QAAQ,CAAC,CAAC,CAAC;EAErDD,SAAS,CAAC,MAAM;IACdoB,QAAQ,CAACG,KAAK,GAAGhB,UAAU,CACzBC,UAAU,CAAC,CAAC,EAAE;MAAEQ,QAAQ;MAAEQ,MAAM,EAAEd,MAAM,CAACe;IAAO,CAAC,CAAC,EAClD,CAAC,CAAC,EACF,KACF,CAAC;EACH,CAAC,EAAE,CAACT,QAAQ,EAAEI,QAAQ,CAAC,CAAC;EAExB,MAAMM,QAAQ,GAAIC,KAAwB,IAAK;IAC7C,MAAMC,CAAC,GAAGD,KAAK,CAACE,WAAW,CAACC,MAAM,CAAClB,KAAK;IACxCU,gBAAgB,CAACS,IAAI,IAAKA,IAAI,KAAKH,CAAC,GAAGG,IAAI,GAAGH,CAAE,CAAC;EACnD,CAAC;EAED,MAAMI,cAAc,GAAG,OAAOpB,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGS,aAAa;EAExE,MAAMY,aAAa,GAAG3B,gBAAgB,CAAC,MAAM;IAC3C,SAAS;;IACT,MAAM4B,UAAU,GAAGzB,WAAW,CAC5BW,QAAQ,CAACG,KAAK,EACd,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAACS,cAAc,EAAEA,cAAc,CAClC,CAAC;IACD,OAAO;MAAEG,SAAS,EAAE,CAAC;QAAED;MAAW,CAAC;IAAE,CAAC;EACxC,CAAC,EAAE,CAACF,cAAc,CAAC,CAAC;;EAEpB;EACA,MAAMI,aAAa,GAAG;IACpB,GAAGlC,UAAU,CAACmC,kBAAkB;IAChCC,4BAA4B,EAAE,6BAA6BxB,SAAS,KAAKC,cAAc,KAAKD,SAAS;EACvG,CAAyB;EAEzB,oBACEf,KAAA,CAAAwC,aAAA,CAACpC,IAAI;IACHuB,QAAQ,EAAEA,QAAS;IACnBR,KAAK,EAAE,CACLsB,MAAM,CAACC,SAAS,EAChB;MAAE7B,KAAK;MAAEC,MAAM;MAAEI,YAAY;MAAEyB,eAAe,EAAE5B;IAAU,CAAC,EAC3DI,KAAK;EACL,gBAEFnB,KAAA,CAAAwC,aAAA,CAACnC,QAAQ,CAACD,IAAI;IACZwC,aAAa,EAAC,MAAM;IACpBzB,KAAK,EAAE,CAAChB,UAAU,CAAC0C,YAAY,EAAEX,aAAa;EAAE,gBAEhDlC,KAAA,CAAAwC,aAAA,CAACpC,IAAI;IAACe,KAAK,EAAEkB;EAAc,CAAE,CAChB,CAAC,EAEfjB,QACG,CAAC;AAEX;AAEA,MAAMqB,MAAM,GAAGtC,UAAU,CAAC2C,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/animations/index.js

@@ -0,0 +1,4 @@
+export { ShimmerAnimation } from './ShimmerAnimation';
+export { PulseAnimation } from './PulseAnimation';
+export { AnimationWrapper } from './AnimationWrapper';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ShimmerAnimation","PulseAnimation","AnimationWrapper"],"sourceRoot":"../../../src","sources":["animations/index.ts"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,gBAAgB,QAAQ,oBAAoB","ignoreList":[]}

package/lib/module/components/MeasuredBlock.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { AnimationWrapper } from '../animations';
+/**
+ * Renders an opaque (non-host) component hidden so it lays out at its real
+ * size, measures that size via `onLayout`, then overlays a shimmer block of
+ * exactly those dimensions.
+ *
+ * This is Skelo's runtime-measurement fallback: when the parser can't
+ * introspect a component (e.g. a user-defined function component), we can't
+ * know its internal View/Text/Image structure without native view-tree access,
+ * but we *can* render it off-screen and reproduce its footprint accurately.
+ *
+ * The result is a single, correctly-sized skeleton block rather than a
+ * misleading fixed-size placeholder.
+ */
+export function MeasuredBlock({
+  children,
+  config
+}) {
+  const [size, setSize] = useState(null);
+  const handleLayout = event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setSize(prev => prev && prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  };
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.hidden,
+    pointerEvents: "none",
+    importantForAccessibility: "no-hide-descendants",
+    accessibilityElementsHidden: true,
+    onLayout: handleLayout
+  }, children), size && size.width > 0 && size.height > 0 && /*#__PURE__*/React.createElement(View, {
+    style: StyleSheet.absoluteFill,
+    pointerEvents: "none"
+  }, /*#__PURE__*/React.createElement(AnimationWrapper, {
+    animation: config.animation,
+    width: size.width,
+    height: size.height,
+    baseColor: config.baseColor,
+    highlightColor: config.highlightColor,
+    duration: config.duration,
+    borderRadius: config.borderRadius
+  })));
+}
+const styles = StyleSheet.create({
+  hidden: {
+    opacity: 0
+  }
+});
+MeasuredBlock.displayName = 'Skeleton.MeasuredBlock';
+//# sourceMappingURL=MeasuredBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","StyleSheet","View","AnimationWrapper","MeasuredBlock","children","config","size","setSize","handleLayout","event","width","height","nativeEvent","layout","prev","createElement","style","styles","hidden","pointerEvents","importantForAccessibility","accessibilityElementsHidden","onLayout","absoluteFill","animation","baseColor","highlightColor","duration","borderRadius","create","opacity","displayName"],"sourceRoot":"../../../src","sources":["components/MeasuredBlock.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAG/C,SAASC,gBAAgB,QAAQ,eAAe;AAmBhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAAC;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,EAAE;EACtE,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGR,QAAQ,CAAc,IAAI,CAAC;EAEnD,MAAMS,YAAY,GAAIC,KAAwB,IAAK;IACjD,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,KAAK,CAACG,WAAW,CAACC,MAAM;IAClDN,OAAO,CAACO,IAAI,IACVA,IAAI,IAAIA,IAAI,CAACJ,KAAK,KAAKA,KAAK,IAAII,IAAI,CAACH,MAAM,KAAKA,MAAM,GAAGG,IAAI,GAAG;MAAEJ,KAAK;MAAEC;IAAO,CAClF,CAAC;EACH,CAAC;EAED,oBACEb,KAAA,CAAAiB,aAAA,CAACd,IAAI,qBAEHH,KAAA,CAAAiB,aAAA,CAACd,IAAI;IACHe,KAAK,EAAEC,MAAM,CAACC,MAAO;IACrBC,aAAa,EAAC,MAAM;IACpBC,yBAAyB,EAAC,qBAAqB;IAC/CC,2BAA2B;IAC3BC,QAAQ,EAAEd;EAAa,GAEtBJ,QACG,CAAC,EAGNE,IAAI,IAAIA,IAAI,CAACI,KAAK,GAAG,CAAC,IAAIJ,IAAI,CAACK,MAAM,GAAG,CAAC,iBACxCb,KAAA,CAAAiB,aAAA,CAACd,IAAI;IAACe,KAAK,EAAEhB,UAAU,CAACuB,YAAa;IAACJ,aAAa,EAAC;EAAM,gBACxDrB,KAAA,CAAAiB,aAAA,CAACb,gBAAgB;IACfsB,SAAS,EAAEnB,MAAM,CAACmB,SAAU;IAC5Bd,KAAK,EAAEJ,IAAI,CAACI,KAAM;IAClBC,MAAM,EAAEL,IAAI,CAACK,MAAO;IACpBc,SAAS,EAAEpB,MAAM,CAACoB,SAAU;IAC5BC,cAAc,EAAErB,MAAM,CAACqB,cAAe;IACtCC,QAAQ,EAAEtB,MAAM,CAACsB,QAAS;IAC1BC,YAAY,EAAEvB,MAAM,CAACuB;EAAa,CACnC,CACG,CAEJ,CAAC;AAEX;AAEA,MAAMX,MAAM,GAAGjB,UAAU,CAAC6B,MAAM,CAAC;EAC/BX,MAAM,EAAE;IACNY,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAEF3B,aAAa,CAAC4B,WAAW,GAAG,wBAAwB","ignoreList":[]}

package/lib/module/components/Skeleton.js

@@ -0,0 +1,138 @@
+import React, { useMemo } from 'react';
+import { Parser } from '../core/parser';
+import { SkeletonRenderer } from './SkeletonRenderer';
+import { SkeletonIgnore } from './SkeletonIgnore';
+import { StyleSkeleton } from '../core/generator/StyleSkeleton';
+import { getDeepExpander } from '../core/deepRegistry';
+import { DEFAULT_CONFIG } from '../constants/defaults';
+
+/**
+ * Main Skeleton component
+ *
+ * Automatically generates skeleton loading states for your React Native components.
+ * Wraps your UI and shows skeleton placeholders while loading.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton loading={isLoading}>
+ *   <ProfileScreen />
+ * </Skeleton>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Skeleton
+ *   loading={isLoading}
+ *   animation="pulse"
+ *   baseColor="#f0f0f0"
+ *   highlightColor="#ffffff"
+ * >
+ *   <View>
+ *     <Text>Hello World</Text>
+ *     <Image source={avatar} />
+ *   </View>
+ * </Skeleton>
+ * ```
+ */
+export function Skeleton({
+  loading,
+  children,
+  styles,
+  excludeStyles,
+  deep = false,
+  animation = DEFAULT_CONFIG.animation,
+  duration = DEFAULT_CONFIG.duration,
+  baseColor = DEFAULT_CONFIG.baseColor,
+  highlightColor = DEFAULT_CONFIG.highlightColor,
+  borderRadius = DEFAULT_CONFIG.borderRadius,
+  accessible = true,
+  accessibilityLabel = 'Loading content',
+  debug = false
+}) {
+  // Parse component tree and generate skeleton.
+  // Hooks must run unconditionally (rules of hooks), but parsing stays lazy:
+  // we skip the work entirely when not loading or in styles-driven mode.
+  const skeletonTree = useMemo(() => {
+    if (!loading || styles) {
+      return [];
+    }
+    if (__DEV__ && debug) {
+      console.log('[Skelo] Parsing component tree...');
+    }
+    try {
+      // Deep mode: expand opaque components into their real host tree via the
+      // opt-in expander (registered by importing 'react-native-skelo/deep').
+      // Falls back to static parsing if unavailable or it returns nothing.
+      if (deep) {
+        const expand = getDeepExpander();
+        if (expand) {
+          const expanded = expand(/*#__PURE__*/React.createElement(React.Fragment, null, children));
+          if (expanded && expanded.length > 0) {
+            return expanded;
+          }
+          if (__DEV__) {
+            console.warn('[Skelo] deep expansion returned nothing; falling back to static parsing.');
+          }
+        } else if (__DEV__) {
+          console.warn("[Skelo] `deep` requires react-reconciler. Install it and add `import 'react-native-skelo/deep';` in your app entry.");
+        }
+      }
+      const parsed = Parser.parse(children);
+      if (__DEV__ && debug) {
+        // Log a lightweight summary: the raw nodes hold React elements
+        // (`element`) and arbitrary props that aren't safely serializable.
+        const summarize = nodes => nodes.map(node => ({
+          type: node.type,
+          style: node.style,
+          children: summarize(node.children)
+        }));
+        console.log('[Skelo] Parsed tree:', JSON.stringify(summarize(parsed), null, 2));
+      }
+      return parsed;
+    } catch (error) {
+      if (__DEV__) {
+        console.error('[Skelo] Failed to parse component tree:', error);
+      }
+      return [];
+    }
+  }, [loading, styles, deep, children, debug]);
+
+  // Create skeleton config
+  const config = useMemo(() => ({
+    animation,
+    duration,
+    baseColor,
+    highlightColor,
+    borderRadius
+  }), [animation, duration, baseColor, highlightColor, borderRadius]);
+
+  // If not loading, render the real children directly.
+  if (!loading) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+
+  // Styles-driven mode: derive the skeleton from the provided styles instead of
+  // introspecting the child tree (useful when children are opaque components).
+  if (styles) {
+    return /*#__PURE__*/React.createElement(StyleSkeleton, {
+      styles: styles,
+      config: config,
+      exclude: excludeStyles
+    });
+  }
+  return /*#__PURE__*/React.createElement(SkeletonRenderer, {
+    tree: skeletonTree,
+    config: config,
+    accessible: accessible,
+    accessibilityLabel: accessibilityLabel,
+    debug: debug
+  });
+}
+Skeleton.displayName = 'Skeleton';
+
+/**
+ * Escape hatch to keep children as real content inside a loading `<Skeleton>`.
+ * @see SkeletonIgnore
+ */
+Skeleton.Ignore = SkeletonIgnore;
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Parser","SkeletonRenderer","SkeletonIgnore","StyleSkeleton","getDeepExpander","DEFAULT_CONFIG","Skeleton","loading","children","styles","excludeStyles","deep","animation","duration","baseColor","highlightColor","borderRadius","accessible","accessibilityLabel","debug","skeletonTree","__DEV__","console","log","expand","expanded","createElement","Fragment","length","warn","parsed","parse","summarize","nodes","map","node","type","style","JSON","stringify","error","config","exclude","tree","displayName","Ignore"],"sourceRoot":"../../../src","sources":["components/Skeleton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/SkeletonIgnore.js

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * Escape hatch that renders its children as real content, even inside a
+ * loading `<Skeleton>`. Use it for elements that should stay visible during
+ * loading — section headings, static labels, action buttons, etc.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton loading={loading}>
+ *   <Skeleton.Ignore>
+ *     <Text>Profile</Text>       // stays as real text
+ *   </Skeleton.Ignore>
+ *   <ProfileCard />              // becomes a skeleton
+ * </Skeleton>
+ * ```
+ */
+export function SkeletonIgnore({
+  children
+}) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+SkeletonIgnore.displayName = 'Skeleton.Ignore';
+//# sourceMappingURL=SkeletonIgnore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","SkeletonIgnore","children","createElement","Fragment","displayName"],"sourceRoot":"../../../src","sources":["components/SkeletonIgnore.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAOzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAC;EAAEC;AAA8B,CAAC,EAAE;EAChE,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,QAAW,CAAC;AACxB;AAEAD,cAAc,CAACI,WAAW,GAAG,iBAAiB","ignoreList":[]}