react-native-skelo 0.0.1 → 0.0.2

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,69 @@
+import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withSequence, withTiming, Easing } from 'react-native-reanimated';
+/**
+ * Pulse animation component using Reanimated 3
+ *
+ * Creates a subtle breathing/pulsing effect using:
+ * - Shared values for performance
+ * - Worklets for 60 FPS on UI thread
+ * - Opacity animation for pulse effect
+ *
+ * @example
+ * ```tsx
+ * <PulseAnimation
+ *   width={200}
+ *   height={20}
+ *   borderRadius={4}
+ * />
+ * ```
+ */
+export function PulseAnimation({
+  width,
+  height,
+  baseColor = '#E1E9EE',
+  duration = 1000,
+  borderRadius = 4,
+  style,
+  children
+}) {
+  // Shared value for opacity (0 to 1)
+  const opacity = useSharedValue(1);
+  useEffect(() => {
+    // Start infinite pulse animation
+    // Sequence: fade out -> fade in
+    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,
+    // Infinite repeat
+    false // Don't reverse
+    );
+  }, [duration, opacity]);
+
+  // Animated style for pulse effect
+  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;AA+ChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;EACA,MAAMC,OAAO,GAAGd,cAAc,CAAC,CAAC,CAAC;EAEjCH,SAAS,CAAC,MAAM;IACd;IACA;IACAiB,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;IAAE;IACJ,KAAK,CAAC;IACR,CAAC;EACH,CAAC,EAAE,CAACR,QAAQ,EAAEI,OAAO,CAAC,CAAC;;EAEvB;EACA,MAAMK,aAAa,GAAGlB,gBAAgB,CAAC,MAAM;IAC3C,SAAS;;IAET,OAAO;MACLa,OAAO,EAAEA,OAAO,CAACC;IACnB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEnB,KAAA,CAAAwB,aAAA,CAACrB,QAAQ,CAACsB,IAAI;IACZT,KAAK,EAAE,CACLU,MAAM,CAACC,SAAS,EAChB;MACEhB,KAAK;MACLC,MAAM;MACNG,YAAY;MACZa,eAAe,EAAEf;IACnB,CAAC,EACDU,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,96 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, interpolate, Easing } from 'react-native-reanimated';
+import { LinearGradient } from 'react-native-linear-gradient';
+/**
+ * Shimmer animation component using Reanimated 3
+ *
+ * Creates a smooth left-to-right shimmer effect using:
+ * - Shared values for performance
+ * - Worklets for 60 FPS on UI thread
+ * - Linear gradient for shimmer effect
+ *
+ * @example
+ * ```tsx
+ * <ShimmerAnimation
+ *   width={200}
+ *   height={20}
+ *   borderRadius={4}
+ * />
+ * ```
+ */
+export function ShimmerAnimation({
+  width,
+  height,
+  baseColor = '#E1E9EE',
+  highlightColor = '#F2F8FC',
+  duration = 1500,
+  borderRadius = 4,
+  style,
+  children
+}) {
+  // Shared value for animation progress (0 to 1)
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    // Start infinite shimmer animation
+    progress.value = withRepeat(withTiming(1, {
+      duration,
+      easing: Easing.linear
+    }), -1,
+    // Infinite repeat
+    false // Don't reverse
+    );
+  }, [duration, progress]);
+
+  // Animated style for shimmer overlay
+  const animatedStyle = useAnimatedStyle(() => {
+    'worklet';
+
+    // Calculate shimmer position
+    // Interpolate from -100% to 100% to create left-to-right sweep
+    const translateX = interpolate(progress.value, [0, 1], [-1, 1]);
+    return {
+      transform: [{
+        translateX: translateX * (typeof width === 'number' ? width : 200)
+      }]
+    };
+  }, [width]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      width,
+      height,
+      borderRadius,
+      backgroundColor: baseColor
+    }, style]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [StyleSheet.absoluteFill, {
+      overflow: 'hidden',
+      borderRadius
+    }]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.shimmer, {
+      width: typeof width === 'number' ? width : '100%',
+      height: '100%'
+    }, animatedStyle]
+  }, /*#__PURE__*/React.createElement(LinearGradient, {
+    colors: [baseColor, highlightColor, highlightColor, baseColor],
+    start: {
+      x: 0,
+      y: 0
+    },
+    end: {
+      x: 1,
+      y: 0
+    },
+    style: StyleSheet.absoluteFill
+  }))), children);
+}
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden'
+  },
+  shimmer: {
+    position: 'absolute'
+  }
+});
+//# sourceMappingURL=ShimmerAnimation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","StyleSheet","View","Animated","useSharedValue","useAnimatedStyle","withRepeat","withTiming","interpolate","Easing","LinearGradient","ShimmerAnimation","width","height","baseColor","highlightColor","duration","borderRadius","style","children","progress","value","easing","linear","animatedStyle","translateX","transform","createElement","styles","container","backgroundColor","absoluteFill","overflow","shimmer","colors","start","x","y","end","create","position"],"sourceRoot":"../../../src","sources":["animations/ShimmerAnimation.tsx"],"mappings":"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","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":[]}