react-native-skelo 0.0.1 → 0.0.2

package/lib/module/components/SkeletonRenderer.js

@@ -0,0 +1,264 @@
+import React from 'react';
+import { View } from 'react-native';
+import { registry } from '../core/registry';
+import { SkeletonBox, SkeletonText, SkeletonImage, SkeletonCircle } from './primitives';
+import { MeasuredBlock } from './MeasuredBlock';
+import { resolveStyle, extractDimensions } from '../utils/styleUtils';
+import { randomWidth } from '../utils/componentUtils';
+
+/**
+ * Host component types the renderer knows how to skeletonize directly.
+ * Anything else is treated as an opaque component and measured at runtime.
+ */
+const HOST_CONTAINER_TYPES = new Set(['View', 'ScrollView', 'SafeAreaView', 'KeyboardAvoidingView', 'TouchableOpacity', 'TouchableHighlight', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'Pressable', 'Fragment']);
+const HOST_LIST_TYPES = new Set(['FlatList', 'SectionList', 'VirtualizedList']);
+
+// Track which opaque component names we've already warned about (dev only).
+const warnedOpaqueTypes = new Set();
+/**
+ * Renders skeleton from parsed component tree
+ *
+ * Uses plugins to transform components into skeleton equivalents:
+ * - View -> SkeletonBox
+ * - Text -> SkeletonText
+ * - Image -> SkeletonImage
+ * - Custom components -> Plugin strategies
+ */
+export function SkeletonRenderer({
+  tree,
+  config,
+  accessible,
+  accessibilityLabel,
+  debug
+}) {
+  /**
+   * Render a single component node
+   */
+  const renderNode = (node, index) => {
+    if (__DEV__ && debug) {
+      console.log(`[Skelo] Rendering node: ${node.type}`, node);
+    }
+
+    // Skeleton.Ignore escape hatch: render the real children untouched.
+    if (node.type === 'Skeleton.Ignore') {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, node.props?.children);
+    }
+
+    // Check for registered plugin
+    const plugin = registry.getPluginByName(node.type);
+    if (plugin) {
+      try {
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: index
+        }, plugin.strategy(node.props, {
+          config,
+          theme: 'light',
+          // TODO: Add theme detection
+          parseChildren: children => {
+            const parsed = typeof children === 'object' && children !== null ? [children] : [];
+            return parsed.map((child, i) => renderNode(child, i));
+          },
+          primitives: {
+            Box: SkeletonBox,
+            Text: SkeletonText,
+            Image: SkeletonImage,
+            Circle: SkeletonCircle
+          },
+          utils: {
+            resolveStyle,
+            extractDimensions,
+            randomWidth
+          }
+        }));
+      } catch (error) {
+        if (__DEV__) {
+          console.error(`[Skelo] Plugin "${plugin.name}" failed:`, error);
+        }
+      }
+    }
+
+    // Built-in host component handling
+    switch (node.type) {
+      case 'Text':
+        return renderText(node, index);
+      case 'Image':
+        return renderImage(node, index);
+    }
+    if (HOST_LIST_TYPES.has(node.type) || node.type === 'ScrollView') {
+      return renderScrollableView(node, index);
+    }
+    if (HOST_CONTAINER_TYPES.has(node.type)) {
+      return renderView(node, index);
+    }
+
+    // Opaque component: the parser can't see inside it (a user-defined
+    // function/class component). Render it hidden and measure its real size,
+    // then overlay a size-matched shimmer.
+    return renderOpaque(node, index);
+  };
+
+  /**
+   * Render an opaque (non-host) component via runtime measurement.
+   */
+  const renderOpaque = (node, index) => {
+    if (__DEV__ && !warnedOpaqueTypes.has(node.type)) {
+      warnedOpaqueTypes.add(node.type);
+      console.warn(`[Skelo] "${node.type}" is a custom component, so Skelo can't inspect ` + `its internal View/Text/Image structure. It will be measured and ` + `shown as a single size-matched skeleton block.\n` + `For a structured skeleton, either compose "${node.type}" from host ` + `elements directly inside <Skeleton>, register a plugin via ` + `Skelo.register(${node.type}, ...), or provide a manual skeleton.`);
+    }
+
+    // If we still have the original element, measure it. Otherwise fall back
+    // to a container/box render.
+    if (node.element) {
+      return /*#__PURE__*/React.createElement(MeasuredBlock, {
+        key: index,
+        config: config
+      }, node.element);
+    }
+    return renderView(node, index);
+  };
+
+  /**
+   * Render View component
+   */
+  const renderView = (node, index) => {
+    const {
+      width,
+      height
+    } = node.style;
+    const hasChildren = node.children && node.children.length > 0;
+
+    // If View has explicit dimensions, render as box
+    if (width && height) {
+      return /*#__PURE__*/React.createElement(SkeletonBox, {
+        key: index,
+        width: width,
+        height: height,
+        borderRadius: node.style.borderRadius ?? config.borderRadius,
+        animation: config.animation,
+        baseColor: config.baseColor,
+        highlightColor: config.highlightColor,
+        duration: config.duration,
+        style: node.style
+      });
+    }
+
+    // If View has children, render container with children
+    if (hasChildren) {
+      return /*#__PURE__*/React.createElement(View, {
+        key: index,
+        style: node.style
+      }, node.children.map((child, i) => renderNode(child, i)));
+    }
+
+    // Empty View with no dimensions - render as small box
+    return /*#__PURE__*/React.createElement(SkeletonBox, {
+      key: index,
+      width: width ?? 100,
+      height: height ?? 20,
+      borderRadius: node.style.borderRadius ?? config.borderRadius,
+      animation: config.animation,
+      baseColor: config.baseColor,
+      highlightColor: config.highlightColor,
+      duration: config.duration,
+      style: node.style
+    });
+  };
+
+  /**
+   * Render Text component
+   */
+  const renderText = (node, index) => {
+    const fontSize = node.style.fontSize ?? 14;
+    const lineHeight = node.style.lineHeight ?? fontSize * 1.4;
+
+    // Estimate number of lines from text content
+    const textContent = node.props.children;
+    const estimatedLines = estimateTextLines(textContent);
+    return /*#__PURE__*/React.createElement(SkeletonText, {
+      key: index,
+      lines: estimatedLines,
+      fontSize: fontSize,
+      lineHeight: lineHeight,
+      width: node.style.width ?? '100%',
+      animation: config.animation,
+      baseColor: config.baseColor,
+      highlightColor: config.highlightColor,
+      duration: config.duration,
+      style: node.style
+    });
+  };
+
+  /**
+   * Render Image component
+   */
+  const renderImage = (node, index) => {
+    const width = node.style.width ?? 100;
+    const height = node.style.height ?? 100;
+    const borderRadius = node.style.borderRadius ?? 0;
+
+    // Check if it's a circular image (avatar)
+    const isCircle = typeof width === 'number' && typeof height === 'number' && width === height && borderRadius === width / 2;
+    if (isCircle) {
+      return /*#__PURE__*/React.createElement(SkeletonCircle, {
+        key: index,
+        size: width,
+        animation: config.animation,
+        baseColor: config.baseColor,
+        highlightColor: config.highlightColor,
+        duration: config.duration,
+        style: node.style
+      });
+    }
+    return /*#__PURE__*/React.createElement(SkeletonImage, {
+      key: index,
+      width: width,
+      height: height,
+      borderRadius: borderRadius,
+      animation: config.animation,
+      baseColor: config.baseColor,
+      highlightColor: config.highlightColor,
+      duration: config.duration,
+      style: node.style
+    });
+  };
+
+  /**
+   * Render scrollable views
+   */
+  const renderScrollableView = (node, index) => {
+    // For scrollable views, render their children
+    return /*#__PURE__*/React.createElement(View, {
+      key: index,
+      style: node.style
+    }, node.children.map((child, i) => renderNode(child, i)));
+  };
+
+  /**
+   * Estimate number of lines from text content
+   */
+  const estimateTextLines = children => {
+    if (!children) return 1;
+    if (typeof children === 'string' || typeof children === 'number') {
+      const text = String(children);
+      const avgCharsPerLine = 40;
+      const estimatedLines = Math.ceil(text.length / avgCharsPerLine);
+      return Math.max(1, Math.min(estimatedLines, 5)); // Cap at 5 lines
+    }
+    if (Array.isArray(children)) {
+      // Multiple text nodes - count as separate lines
+      return Math.min(children.length, 5);
+    }
+    return 1;
+  };
+
+  // Render the skeleton tree
+  return /*#__PURE__*/React.createElement(View, {
+    accessible: accessible,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "progressbar"
+  }, tree.map((node, index) => renderNode(node, index)));
+}
+SkeletonRenderer.displayName = 'SkeletonRenderer';
+//# sourceMappingURL=SkeletonRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","registry","SkeletonBox","SkeletonText","SkeletonImage","SkeletonCircle","MeasuredBlock","resolveStyle","extractDimensions","randomWidth","HOST_CONTAINER_TYPES","Set","HOST_LIST_TYPES","warnedOpaqueTypes","SkeletonRenderer","tree","config","accessible","accessibilityLabel","debug","renderNode","node","index","__DEV__","console","log","type","createElement","Fragment","key","props","children","plugin","getPluginByName","strategy","theme","parseChildren","parsed","map","child","i","primitives","Box","Text","Image","Circle","utils","error","name","renderText","renderImage","has","renderScrollableView","renderView","renderOpaque","add","warn","element","width","height","style","hasChildren","length","borderRadius","animation","baseColor","highlightColor","duration","fontSize","lineHeight","textContent","estimatedLines","estimateTextLines","lines","isCircle","size","text","String","avgCharsPerLine","Math","ceil","max","min","Array","isArray","accessibilityRole","displayName"],"sourceRoot":"../../../src","sources":["components/SkeletonRenderer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/primitives/SkeletonBox.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { AnimationWrapper } from '../../animations';
+/**
+ * Basic box skeleton primitive
+ *
+ * @example
+ * ```tsx
+ * <SkeletonBox width={100} height={50} borderRadius={8} />
+ * ```
+ */
+export function SkeletonBox({
+  width,
+  height,
+  borderRadius = 4,
+  style,
+  children,
+  animation = 'shimmer',
+  baseColor,
+  highlightColor,
+  duration
+}) {
+  return /*#__PURE__*/React.createElement(AnimationWrapper, {
+    animation: animation,
+    width: width,
+    height: height,
+    borderRadius: borderRadius,
+    baseColor: baseColor,
+    highlightColor: highlightColor,
+    duration: duration,
+    style: [styles.box, style]
+  }, children);
+}
+const styles = StyleSheet.create({
+  box: {
+    overflow: 'hidden'
+  }
+});
+SkeletonBox.displayName = 'Skeleton.Box';
+//# sourceMappingURL=SkeletonBox.js.map

package/lib/module/components/primitives/SkeletonBox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","AnimationWrapper","SkeletonBox","width","height","borderRadius","style","children","animation","baseColor","highlightColor","duration","createElement","styles","box","create","overflow","displayName"],"sourceRoot":"../../../../src","sources":["components/primitives/SkeletonBox.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,gBAAgB,QAAQ,kBAAkB;AAGnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAAC;EAC1BC,KAAK;EACLC,MAAM;EACNC,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC,QAAQ;EACRC,SAAS,GAAG,SAAS;EACrBC,SAAS;EACTC,cAAc;EACdC;AAMF,CAAC,EAAE;EACD,oBACEZ,KAAA,CAAAa,aAAA,CAACX,gBAAgB;IACfO,SAAS,EAAEA,SAAU;IACrBL,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfC,YAAY,EAAEA,YAAa;IAC3BI,SAAS,EAAEA,SAAU;IACrBC,cAAc,EAAEA,cAAe;IAC/BC,QAAQ,EAAEA,QAAS;IACnBL,KAAK,EAAE,CAACO,MAAM,CAACC,GAAG,EAAER,KAAK;EAAE,GAE1BC,QACe,CAAC;AAEvB;AAEA,MAAMM,MAAM,GAAGb,UAAU,CAACe,MAAM,CAAC;EAC/BD,GAAG,EAAE;IACHE,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEFd,WAAW,CAACe,WAAW,GAAG,cAAc","ignoreList":[]}

package/lib/module/components/primitives/SkeletonCircle.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { AnimationWrapper } from '../../animations';
+/**
+ * Circle skeleton primitive (useful for avatars)
+ *
+ * @example
+ * ```tsx
+ * <SkeletonCircle size={40} />
+ * ```
+ */
+export function SkeletonCircle({
+  size = 40,
+  style,
+  animation = 'shimmer',
+  baseColor,
+  highlightColor,
+  duration
+}) {
+  return /*#__PURE__*/React.createElement(AnimationWrapper, {
+    animation: animation,
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    baseColor: baseColor,
+    highlightColor: highlightColor,
+    duration: duration,
+    style: [styles.circle, style]
+  });
+}
+const styles = StyleSheet.create({
+  circle: {
+    overflow: 'hidden'
+  }
+});
+SkeletonCircle.displayName = 'Skeleton.Circle';
+//# sourceMappingURL=SkeletonCircle.js.map

package/lib/module/components/primitives/SkeletonCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","AnimationWrapper","SkeletonCircle","size","style","animation","baseColor","highlightColor","duration","createElement","width","height","borderRadius","styles","circle","create","overflow","displayName"],"sourceRoot":"../../../../src","sources":["components/primitives/SkeletonCircle.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,gBAAgB,QAAQ,kBAAkB;AAGnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAC;EAC7BC,IAAI,GAAG,EAAE;EACTC,KAAK;EACLC,SAAS,GAAG,SAAS;EACrBC,SAAS;EACTC,cAAc;EACdC;AAMF,CAAC,EAAE;EACD,oBACET,KAAA,CAAAU,aAAA,CAACR,gBAAgB;IACfI,SAAS,EAAEA,SAAU;IACrBK,KAAK,EAAEP,IAAK;IACZQ,MAAM,EAAER,IAAK;IACbS,YAAY,EAAET,IAAI,GAAG,CAAE;IACvBG,SAAS,EAAEA,SAAU;IACrBC,cAAc,EAAEA,cAAe;IAC/BC,QAAQ,EAAEA,QAAS;IACnBJ,KAAK,EAAE,CAACS,MAAM,CAACC,MAAM,EAAEV,KAAK;EAAE,CAC/B,CAAC;AAEN;AAEA,MAAMS,MAAM,GAAGb,UAAU,CAACe,MAAM,CAAC;EAC/BD,MAAM,EAAE;IACNE,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEFd,cAAc,CAACe,WAAW,GAAG,iBAAiB","ignoreList":[]}

package/lib/module/components/primitives/SkeletonImage.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { AnimationWrapper } from '../../animations';
+/**
+ * Image skeleton primitive
+ *
+ * @example
+ * ```tsx
+ * <SkeletonImage width={80} height={80} borderRadius={40} />
+ * ```
+ */
+export function SkeletonImage({
+  width = 100,
+  height = 100,
+  borderRadius = 0,
+  style,
+  animation = 'shimmer',
+  baseColor,
+  highlightColor,
+  duration
+}) {
+  return /*#__PURE__*/React.createElement(AnimationWrapper, {
+    animation: animation,
+    width: width,
+    height: height,
+    borderRadius: borderRadius,
+    baseColor: baseColor,
+    highlightColor: highlightColor,
+    duration: duration,
+    style: [styles.image, style]
+  });
+}
+const styles = StyleSheet.create({
+  image: {
+    overflow: 'hidden'
+  }
+});
+SkeletonImage.displayName = 'Skeleton.Image';
+//# sourceMappingURL=SkeletonImage.js.map

package/lib/module/components/primitives/SkeletonImage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","AnimationWrapper","SkeletonImage","width","height","borderRadius","style","animation","baseColor","highlightColor","duration","createElement","styles","image","create","overflow","displayName"],"sourceRoot":"../../../../src","sources":["components/primitives/SkeletonImage.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,gBAAgB,QAAQ,kBAAkB;AAGnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAAC;EAC5BC,KAAK,GAAG,GAAG;EACXC,MAAM,GAAG,GAAG;EACZC,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC,SAAS,GAAG,SAAS;EACrBC,SAAS;EACTC,cAAc;EACdC;AAMF,CAAC,EAAE;EACD,oBACEX,KAAA,CAAAY,aAAA,CAACV,gBAAgB;IACfM,SAAS,EAAEA,SAAU;IACrBJ,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfC,YAAY,EAAEA,YAAa;IAC3BG,SAAS,EAAEA,SAAU;IACrBC,cAAc,EAAEA,cAAe;IAC/BC,QAAQ,EAAEA,QAAS;IACnBJ,KAAK,EAAE,CAACM,MAAM,CAACC,KAAK,EAAEP,KAAK;EAAE,CAC9B,CAAC;AAEN;AAEA,MAAMM,MAAM,GAAGZ,UAAU,CAACc,MAAM,CAAC;EAC/BD,KAAK,EAAE;IACLE,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEFb,aAAa,CAACc,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/lib/module/components/primitives/SkeletonText.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AnimationWrapper } from '../../animations';
+/**
+ * Text skeleton primitive with multiple lines
+ *
+ * @example
+ * ```tsx
+ * <SkeletonText lines={3} fontSize={16} lastLineWidth="70%" />
+ * ```
+ */
+export function SkeletonText({
+  lines = 1,
+  fontSize = 14,
+  lineHeight,
+  width = '100%',
+  lastLineWidth = '60%',
+  style,
+  animation = 'shimmer',
+  baseColor,
+  highlightColor,
+  duration
+}) {
+  const calculatedLineHeight = lineHeight || fontSize * 1.4;
+  return /*#__PURE__*/React.createElement(View, {
+    style: style
+  }, Array.from({
+    length: lines
+  }).map((_, index) => {
+    const isLastLine = index === lines - 1;
+    const lineWidth = isLastLine && lines > 1 ? lastLineWidth : width;
+    return /*#__PURE__*/React.createElement(AnimationWrapper, {
+      key: index,
+      animation: animation,
+      width: lineWidth,
+      height: fontSize,
+      borderRadius: 4,
+      baseColor: baseColor,
+      highlightColor: highlightColor,
+      duration: duration,
+      style: [styles.line, {
+        marginBottom: index < lines - 1 ? calculatedLineHeight - fontSize : 0
+      }]
+    });
+  }));
+}
+const styles = StyleSheet.create({
+  line: {
+    overflow: 'hidden'
+  }
+});
+SkeletonText.displayName = 'Skeleton.Text';
+//# sourceMappingURL=SkeletonText.js.map

package/lib/module/components/primitives/SkeletonText.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","AnimationWrapper","SkeletonText","lines","fontSize","lineHeight","width","lastLineWidth","style","animation","baseColor","highlightColor","duration","calculatedLineHeight","createElement","Array","from","length","map","_","index","isLastLine","lineWidth","key","height","borderRadius","styles","line","marginBottom","create","overflow","displayName"],"sourceRoot":"../../../../src","sources":["components/primitives/SkeletonText.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAE/C,SAASC,gBAAgB,QAAQ,kBAAkB;AAGnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAAC;EAC3BC,KAAK,GAAG,CAAC;EACTC,QAAQ,GAAG,EAAE;EACbC,UAAU;EACVC,KAAK,GAAG,MAAM;EACdC,aAAa,GAAG,KAAK;EACrBC,KAAK;EACLC,SAAS,GAAG,SAAS;EACrBC,SAAS;EACTC,cAAc;EACdC;AAMF,CAAC,EAAE;EACD,MAAMC,oBAAoB,GAAGR,UAAU,IAAID,QAAQ,GAAG,GAAG;EAEzD,oBACEN,KAAA,CAAAgB,aAAA,CAACf,IAAI;IAACS,KAAK,EAAEA;EAAM,GAChBO,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEd;EAAM,CAAC,CAAC,CAACe,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAK;IAC/C,MAAMC,UAAU,GAAGD,KAAK,KAAKjB,KAAK,GAAG,CAAC;IACtC,MAAMmB,SAAS,GAAGD,UAAU,IAAIlB,KAAK,GAAG,CAAC,GAAGI,aAAa,GAAGD,KAAK;IAEjE,oBACER,KAAA,CAAAgB,aAAA,CAACb,gBAAgB;MACfsB,GAAG,EAAEH,KAAM;MACXX,SAAS,EAAEA,SAAU;MACrBH,KAAK,EAAEgB,SAAU;MACjBE,MAAM,EAAEpB,QAAS;MACjBqB,YAAY,EAAE,CAAE;MAChBf,SAAS,EAAEA,SAAU;MACrBC,cAAc,EAAEA,cAAe;MAC/BC,QAAQ,EAAEA,QAAS;MACnBJ,KAAK,EAAE,CACLkB,MAAM,CAACC,IAAI,EACX;QACEC,YAAY,EAAER,KAAK,GAAGjB,KAAK,GAAG,CAAC,GAAGU,oBAAoB,GAAGT,QAAQ,GAAG;MACtE,CAAC;IACD,CACH,CAAC;EAEN,CAAC,CACG,CAAC;AAEX;AAEA,MAAMsB,MAAM,GAAG1B,UAAU,CAAC6B,MAAM,CAAC;EAC/BF,IAAI,EAAE;IACJG,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF5B,YAAY,CAAC6B,WAAW,GAAG,eAAe","ignoreList":[]}

package/lib/module/components/primitives/index.js

@@ -0,0 +1,5 @@
+export { SkeletonBox } from './SkeletonBox';
+export { SkeletonText } from './SkeletonText';
+export { SkeletonImage } from './SkeletonImage';
+export { SkeletonCircle } from './SkeletonCircle';
+//# sourceMappingURL=index.js.map

package/lib/module/components/primitives/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SkeletonBox","SkeletonText","SkeletonImage","SkeletonCircle"],"sourceRoot":"../../../../src","sources":["components/primitives/index.ts"],"mappings":"AAAA,SAASA,WAAW,QAAQ,eAAe;AAC3C,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,cAAc,QAAQ,kBAAkB","ignoreList":[]}

package/lib/module/components/withSkeleton.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Skeleton } from './Skeleton';
+/**
+ * Higher-order component that adds a loading skeleton to any component.
+ *
+ * The returned component accepts a `loading` prop (plus the wrapped
+ * component's own props). While `loading` is true it renders a skeleton
+ * derived from `options.styles`; otherwise it renders the real component.
+ *
+ * @example
+ * ```tsx
+ * const Home = withSkeleton(HomeScreen, { styles });
+ *
+ * <Home loading={isLoading} user={user} />
+ * ```
+ */
+export function withSkeleton(Component, options = {}) {
+  const WithSkeleton = props => {
+    const {
+      loading,
+      ...componentProps
+    } = props;
+    return /*#__PURE__*/React.createElement(Skeleton, {
+      loading: loading,
+      styles: options.styles,
+      excludeStyles: options.excludeStyles,
+      animation: options.animation,
+      duration: options.duration,
+      baseColor: options.baseColor,
+      highlightColor: options.highlightColor,
+      borderRadius: options.borderRadius
+    }, /*#__PURE__*/React.createElement(Component, componentProps));
+  };
+  const name = Component.displayName || Component.name || 'Component';
+  WithSkeleton.displayName = `withSkeleton(${name})`;
+  return WithSkeleton;
+}
+//# sourceMappingURL=withSkeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Skeleton","withSkeleton","Component","options","WithSkeleton","props","loading","componentProps","createElement","styles","excludeStyles","animation","duration","baseColor","highlightColor","borderRadius","name","displayName"],"sourceRoot":"../../../src","sources":["components/withSkeleton.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,SAASC,QAAQ,QAAQ,YAAY;AAgBrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAC1BC,SAA2B,EAC3BC,OAA4B,GAAG,CAAC,CAAC,EACjC;EACA,MAAMC,YAAY,GAAIC,KAA+B,IAAK;IACxD,MAAM;MAAEC,OAAO;MAAE,GAAGC;IAAe,CAAC,GAAGF,KAAK;IAE5C,oBACEN,KAAA,CAAAS,aAAA,CAACR,QAAQ;MACPM,OAAO,EAAEA,OAAQ;MACjBG,MAAM,EAAEN,OAAO,CAACM,MAAO;MACvBC,aAAa,EAAEP,OAAO,CAACO,aAAc;MACrCC,SAAS,EAAER,OAAO,CAACQ,SAAU;MAC7BC,QAAQ,EAAET,OAAO,CAACS,QAAS;MAC3BC,SAAS,EAAEV,OAAO,CAACU,SAAU;MAC7BC,cAAc,EAAEX,OAAO,CAACW,cAAe;MACvCC,YAAY,EAAEZ,OAAO,CAACY;IAAa,gBAEnChB,KAAA,CAAAS,aAAA,CAACN,SAAS,EAAMK,cAAkC,CAC1C,CAAC;EAEf,CAAC;EAED,MAAMS,IAAI,GAAGd,SAAS,CAACe,WAAW,IAAIf,SAAS,CAACc,IAAI,IAAI,WAAW;EACnEZ,YAAY,CAACa,WAAW,GAAG,gBAAgBD,IAAI,GAAG;EAElD,OAAOZ,YAAY;AACrB","ignoreList":[]}

package/lib/module/constants/defaults.js

@@ -0,0 +1,37 @@
+/**
+ * Default skeleton configuration
+ */
+export const DEFAULT_CONFIG = {
+  animation: 'shimmer',
+  duration: 1200,
+  baseColor: '#E1E9EE',
+  highlightColor: '#F0F4F8',
+  borderRadius: 4,
+  debug: false
+};
+
+/**
+ * Dark mode colors
+ */
+export const DARK_MODE_COLORS = {
+  baseColor: '#2A3F4F',
+  highlightColor: '#3A5364'
+};
+
+/**
+ * Default dimensions for components without explicit sizing
+ */
+export const DEFAULT_DIMENSIONS = {
+  image: {
+    width: 100,
+    height: 100
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 20
+  },
+  box: {
+    height: 50
+  }
+};
+//# sourceMappingURL=defaults.js.map

package/lib/module/constants/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_CONFIG","animation","duration","baseColor","highlightColor","borderRadius","debug","DARK_MODE_COLORS","DEFAULT_DIMENSIONS","image","width","height","text","fontSize","lineHeight","box"],"sourceRoot":"../../../src","sources":["constants/defaults.ts"],"mappings":"AAEA;AACA;AACA;AACA,OAAO,MAAMA,cAAwC,GAAG;EACtDC,SAAS,EAAE,SAAS;EACpBC,QAAQ,EAAE,IAAI;EACdC,SAAS,EAAE,SAAS;EACpBC,cAAc,EAAE,SAAS;EACzBC,YAAY,EAAE,CAAC;EACfC,KAAK,EAAE;AACT,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAG;EAC9BJ,SAAS,EAAE,SAAS;EACpBC,cAAc,EAAE;AAClB,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMI,kBAAkB,GAAG;EAChCC,KAAK,EAAE;IACLC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE;EACd,CAAC;EACDC,GAAG,EAAE;IACHJ,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/lib/module/core/deepRegistry.js

@@ -0,0 +1,11 @@
+// Deep expansion is opt-in so the core bundle never depends on react-reconciler.
+// `react-native-skelo/deep` registers the expander; Skeleton reads it here.
+
+let expander = null;
+export function setDeepExpander(fn) {
+  expander = fn;
+}
+export function getDeepExpander() {
+  return expander;
+}
+//# sourceMappingURL=deepRegistry.js.map

package/lib/module/core/deepRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["expander","setDeepExpander","fn","getDeepExpander"],"sourceRoot":"../../../src","sources":["core/deepRegistry.ts"],"mappings":"AAGA;AACA;;AAGA,IAAIA,QAA6B,GAAG,IAAI;AAExC,OAAO,SAASC,eAAeA,CAACC,EAAgB,EAAQ;EACtDF,QAAQ,GAAGE,EAAE;AACf;AAEA,OAAO,SAASC,eAAeA,CAAA,EAAwB;EACrD,OAAOH,QAAQ;AACjB","ignoreList":[]}