react-native-skelo 0.0.1 → 0.0.2

package/lib/module/core/resolver/StyleResolver.js

@@ -0,0 +1,77 @@
+import { resolveStyle, extractDimensions } from '../../utils';
+
+/**
+ * StyleResolver class for extracting and resolving component styles
+ */
+export class StyleResolver {
+  /**
+   * Resolve styles from a React element
+   *
+   * @param element - React element
+   * @returns Resolved style object
+   */
+  static resolve(element) {
+    const props = element.props || {};
+    const style = props.style;
+    return resolveStyle(style);
+  }
+
+  /**
+   * Get dimensions from element props and style
+   *
+   * @param element - React element
+   * @returns Object with width and height
+   */
+  static getDimensions(element) {
+    const style = this.resolve(element);
+    return extractDimensions(style);
+  }
+
+  /**
+   * Check if element has explicit dimensions
+   *
+   * @param element - React element
+   * @returns True if both width and height are defined
+   */
+  static hasExplicitDimensions(element) {
+    const {
+      width,
+      height
+    } = this.getDimensions(element);
+    return width !== undefined && height !== undefined;
+  }
+
+  /**
+   * Get border radius from style
+   *
+   * @param element - React element
+   * @returns Border radius value or undefined
+   */
+  static getBorderRadius(element) {
+    const style = this.resolve(element);
+    return style.borderRadius;
+  }
+
+  /**
+   * Get font size from style
+   *
+   * @param element - React element
+   * @returns Font size value or undefined
+   */
+  static getFontSize(element) {
+    const style = this.resolve(element);
+    return style.fontSize;
+  }
+
+  /**
+   * Get line height from style
+   *
+   * @param element - React element
+   * @returns Line height value or undefined
+   */
+  static getLineHeight(element) {
+    const style = this.resolve(element);
+    return style.lineHeight;
+  }
+}
+//# sourceMappingURL=StyleResolver.js.map

package/lib/module/core/resolver/StyleResolver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["resolveStyle","extractDimensions","StyleResolver","resolve","element","props","style","getDimensions","hasExplicitDimensions","width","height","undefined","getBorderRadius","borderRadius","getFontSize","fontSize","getLineHeight","lineHeight"],"sourceRoot":"../../../../src","sources":["core/resolver/StyleResolver.ts"],"mappings":"AAGA,SAASA,YAAY,EAAEC,iBAAiB,QAAQ,aAAa;;AAE7D;AACA;AACA;AACA,OAAO,MAAMC,aAAa,CAAC;EACzB;AACF;AACA;AACA;AACA;AACA;EACE,OAAOC,OAAOA,CAACC,OAAqB,EAAiB;IACnD,MAAMC,KAAK,GAAGD,OAAO,CAACC,KAAK,IAAI,CAAC,CAAC;IACjC,MAAMC,KAAK,GAAGD,KAAK,CAACC,KAAK;IAEzB,OAAON,YAAY,CAACM,KAAK,CAAC;EAC5B;;EAEA;AACF;AACA;AACA;AACA;AACA;EACE,OAAOC,aAAaA,CAACH,OAAqB,EAGxC;IACA,MAAME,KAAK,GAAG,IAAI,CAACH,OAAO,CAACC,OAAO,CAAC;IACnC,OAAOH,iBAAiB,CAACK,KAAK,CAAC;EACjC;;EAEA;AACF;AACA;AACA;AACA;AACA;EACE,OAAOE,qBAAqBA,CAACJ,OAAqB,EAAW;IAC3D,MAAM;MAAEK,KAAK;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACH,aAAa,CAACH,OAAO,CAAC;IACrD,OAAOK,KAAK,KAAKE,SAAS,IAAID,MAAM,KAAKC,SAAS;EACpD;;EAEA;AACF;AACA;AACA;AACA;AACA;EACE,OAAOC,eAAeA,CAACR,OAAqB,EAAsB;IAChE,MAAME,KAAK,GAAG,IAAI,CAACH,OAAO,CAACC,OAAO,CAAC;IACnC,OAAOE,KAAK,CAACO,YAAY;EAC3B;;EAEA;AACF;AACA;AACA;AACA;AACA;EACE,OAAOC,WAAWA,CAACV,OAAqB,EAAsB;IAC5D,MAAME,KAAK,GAAG,IAAI,CAACH,OAAO,CAACC,OAAO,CAAC;IACnC,OAAOE,KAAK,CAACS,QAAQ;EACvB;;EAEA;AACF;AACA;AACA;AACA;AACA;EACE,OAAOC,aAAaA,CAACZ,OAAqB,EAAsB;IAC9D,MAAME,KAAK,GAAG,IAAI,CAACH,OAAO,CAACC,OAAO,CAAC;IACnC,OAAOE,KAAK,CAACW,UAAU;EACzB;AACF","ignoreList":[]}

package/lib/module/core/resolver/index.js

@@ -0,0 +1,2 @@
+export { StyleResolver } from './StyleResolver';
+//# sourceMappingURL=index.js.map

package/lib/module/core/resolver/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleResolver"],"sourceRoot":"../../../../src","sources":["core/resolver/index.ts"],"mappings":"AAAA,SAASA,aAAa,QAAQ,iBAAiB","ignoreList":[]}

package/lib/module/deep.js

@@ -0,0 +1,11 @@
+// Opt-in deep mode. Import once in your app entry to enable `<Skeleton deep>`:
+//
+//   import 'react-native-skelo/deep';
+//
+// This is the only module that pulls in react-reconciler, so apps that don't
+// use deep mode never bundle it. Requires `react-reconciler` to be installed.
+import { setDeepExpander } from './core/deepRegistry';
+import { expandToComponentNodes } from './core/parser/expandOffline';
+setDeepExpander(expandToComponentNodes);
+export const deepEnabled = true;
+//# sourceMappingURL=deep.js.map

package/lib/module/deep.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["setDeepExpander","expandToComponentNodes","deepEnabled"],"sourceRoot":"../../src","sources":["deep.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,eAAe,QAAQ,qBAAqB;AACrD,SAASC,sBAAsB,QAAQ,6BAA6B;AAEpED,eAAe,CAACC,sBAAsB,CAAC;AAEvC,OAAO,MAAMC,WAAW,GAAG,IAAI","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,21 @@
+/**
+ * Skelo - Automatic skeleton loading for React Native
+ *
+ * Write your UI once. Skelo builds the loading state automatically.
+ *
+ * @packageDocumentation
+ */
+
+// Main component
+export { Skeleton } from './components/Skeleton';
+export { SkeletonIgnore } from './components/SkeletonIgnore';
+export { withSkeleton } from './components/withSkeleton';
+export { StyleSkeleton } from './core/generator/StyleSkeleton';
+// Global API
+export { Skelo } from './Skelo';
+
+// Types
+
+// Primitives (for plugin development)
+export { SkeletonBox, SkeletonText, SkeletonImage, SkeletonCircle } from './components/primitives';
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skeleton","SkeletonIgnore","withSkeleton","StyleSkeleton","Skelo","SkeletonBox","SkeletonText","SkeletonImage","SkeletonCircle"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,YAAY,QAAQ,2BAA2B;AAExD,SAASC,aAAa,QAAQ,gCAAgC;AAG9D;AACA,SAASC,KAAK,QAAQ,SAAS;;AAE/B;;AASA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,yBAAyB","ignoreList":[]}

package/lib/module/plugins/ImagePlugin.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Image } from 'react-native';
+/**
+ * Built-in plugin for React Native Image component
+ *
+ * Renders Image as:
+ * - SkeletonCircle if circular (avatar-like)
+ * - SkeletonImage otherwise
+ */
+export const ImagePlugin = {
+  name: 'Image',
+  component: Image,
+  version: '1.0.0',
+  strategy: (props, context) => {
+    const {
+      primitives,
+      config
+    } = context;
+    const style = props.style || {};
+    const flatStyle = Array.isArray(style) ? Object.assign({}, ...style) : style;
+    const width = flatStyle.width ?? 100;
+    const height = flatStyle.height ?? 100;
+    const borderRadius = flatStyle.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(primitives.Circle, {
+        size: width,
+        animation: config.animation,
+        baseColor: config.baseColor,
+        highlightColor: config.highlightColor,
+        duration: config.duration,
+        style: flatStyle
+      });
+    }
+    return /*#__PURE__*/React.createElement(primitives.Image, {
+      width: width,
+      height: height,
+      borderRadius: borderRadius,
+      animation: config.animation,
+      baseColor: config.baseColor,
+      highlightColor: config.highlightColor,
+      duration: config.duration,
+      style: flatStyle
+    });
+  },
+  metadata: {
+    description: 'Automatic skeleton generation for Image components',
+    author: 'Skelo'
+  }
+};
+//# sourceMappingURL=ImagePlugin.js.map

package/lib/module/plugins/ImagePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","ImagePlugin","name","component","version","strategy","props","context","primitives","config","style","flatStyle","Array","isArray","Object","assign","width","height","borderRadius","isCircle","createElement","Circle","size","animation","baseColor","highlightColor","duration","metadata","description","author"],"sourceRoot":"../../../src","sources":["plugins/ImagePlugin.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,cAAc;AAIpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAuC,GAAG;EACrDC,IAAI,EAAE,OAAO;EACbC,SAAS,EAAEH,KAAK;EAChBI,OAAO,EAAE,OAAO;EAEhBC,QAAQ,EAAEA,CAACC,KAAK,EAAEC,OAAO,KAAK;IAC5B,MAAM;MAAEC,UAAU;MAAEC;IAAO,CAAC,GAAGF,OAAO;IACtC,MAAMG,KAAK,GAAGJ,KAAK,CAACI,KAAK,IAAI,CAAC,CAAC;IAC/B,MAAMC,SAAS,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAAGI,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAGL,KAAK,CAAC,GAAGA,KAAK;IAE5E,MAAMM,KAAK,GAAGL,SAAS,CAACK,KAAK,IAAI,GAAG;IACpC,MAAMC,MAAM,GAAGN,SAAS,CAACM,MAAM,IAAI,GAAG;IACtC,MAAMC,YAAY,GAAGP,SAAS,CAACO,YAAY,IAAI,CAAC;;IAEhD;IACA,MAAMC,QAAQ,GACZ,OAAOH,KAAK,KAAK,QAAQ,IACzB,OAAOC,MAAM,KAAK,QAAQ,IAC1BD,KAAK,KAAKC,MAAM,IAChBC,YAAY,KAAKF,KAAK,GAAG,CAAC;IAE5B,IAAIG,QAAQ,EAAE;MACZ,oBACEpB,KAAA,CAAAqB,aAAA,CAACZ,UAAU,CAACa,MAAM;QAChBC,IAAI,EAAEN,KAAgB;QACtBO,SAAS,EAAEd,MAAM,CAACc,SAAU;QAC5BC,SAAS,EAAEf,MAAM,CAACe,SAAU;QAC5BC,cAAc,EAAEhB,MAAM,CAACgB,cAAe;QACtCC,QAAQ,EAAEjB,MAAM,CAACiB,QAAS;QAC1BhB,KAAK,EAAEC;MAAU,CAClB,CAAC;IAEN;IAEA,oBACEZ,KAAA,CAAAqB,aAAA,CAACZ,UAAU,CAACR,KAAK;MACfgB,KAAK,EAAEA,KAAM;MACbC,MAAM,EAAEA,MAAO;MACfC,YAAY,EAAEA,YAAuB;MACrCK,SAAS,EAAEd,MAAM,CAACc,SAAU;MAC5BC,SAAS,EAAEf,MAAM,CAACe,SAAU;MAC5BC,cAAc,EAAEhB,MAAM,CAACgB,cAAe;MACtCC,QAAQ,EAAEjB,MAAM,CAACiB,QAAS;MAC1BhB,KAAK,EAAEC;IAAU,CAClB,CAAC;EAEN,CAAC;EAEDgB,QAAQ,EAAE;IACRC,WAAW,EAAE,oDAAoD;IACjEC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/lib/module/plugins/TextPlugin.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Text } from 'react-native';
+/**
+ * Built-in plugin for React Native Text component
+ *
+ * Renders Text as SkeletonText with:
+ * - Estimated line count from text content
+ * - Font size from style
+ * - Line height from style
+ */
+export const TextPlugin = {
+  name: 'Text',
+  component: Text,
+  version: '1.0.0',
+  strategy: (props, context) => {
+    const {
+      primitives,
+      config
+    } = context;
+    const style = props.style || {};
+    const flatStyle = Array.isArray(style) ? Object.assign({}, ...style) : style;
+    const fontSize = flatStyle.fontSize ?? 14;
+    const lineHeight = flatStyle.lineHeight ?? fontSize * 1.4;
+
+    // Estimate number of lines from text content
+    const textContent = props.children;
+    const estimatedLines = estimateTextLines(textContent);
+    return /*#__PURE__*/React.createElement(primitives.Text, {
+      lines: estimatedLines,
+      fontSize: fontSize,
+      lineHeight: lineHeight,
+      width: flatStyle.width ?? '100%',
+      animation: config.animation,
+      baseColor: config.baseColor,
+      highlightColor: config.highlightColor,
+      duration: config.duration,
+      style: flatStyle
+    });
+  },
+  metadata: {
+    description: 'Automatic skeleton generation for Text components',
+    author: 'Skelo'
+  }
+};
+
+/**
+ * Estimate number of lines from text content
+ */
+function 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;
+}
+//# sourceMappingURL=TextPlugin.js.map

package/lib/module/plugins/TextPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","TextPlugin","name","component","version","strategy","props","context","primitives","config","style","flatStyle","Array","isArray","Object","assign","fontSize","lineHeight","textContent","children","estimatedLines","estimateTextLines","createElement","lines","width","animation","baseColor","highlightColor","duration","metadata","description","author","text","String","avgCharsPerLine","Math","ceil","length","max","min"],"sourceRoot":"../../../src","sources":["plugins/TextPlugin.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAInC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAqC,GAAG;EACnDC,IAAI,EAAE,MAAM;EACZC,SAAS,EAAEH,IAAI;EACfI,OAAO,EAAE,OAAO;EAEhBC,QAAQ,EAAEA,CAACC,KAAK,EAAEC,OAAO,KAAK;IAC5B,MAAM;MAAEC,UAAU;MAAEC;IAAO,CAAC,GAAGF,OAAO;IACtC,MAAMG,KAAK,GAAGJ,KAAK,CAACI,KAAK,IAAI,CAAC,CAAC;IAC/B,MAAMC,SAAS,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAAGI,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAGL,KAAK,CAAC,GAAGA,KAAK;IAE5E,MAAMM,QAAQ,GAAGL,SAAS,CAACK,QAAQ,IAAI,EAAE;IACzC,MAAMC,UAAU,GAAGN,SAAS,CAACM,UAAU,IAAID,QAAQ,GAAG,GAAG;;IAEzD;IACA,MAAME,WAAW,GAAGZ,KAAK,CAACa,QAAQ;IAClC,MAAMC,cAAc,GAAGC,iBAAiB,CAACH,WAAW,CAAC;IAErD,oBACEnB,KAAA,CAAAuB,aAAA,CAACd,UAAU,CAACR,IAAI;MACduB,KAAK,EAAEH,cAAe;MACtBJ,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBO,KAAK,EAAEb,SAAS,CAACa,KAAK,IAAI,MAAO;MACjCC,SAAS,EAAEhB,MAAM,CAACgB,SAAU;MAC5BC,SAAS,EAAEjB,MAAM,CAACiB,SAAU;MAC5BC,cAAc,EAAElB,MAAM,CAACkB,cAAe;MACtCC,QAAQ,EAAEnB,MAAM,CAACmB,QAAS;MAC1BlB,KAAK,EAAEC;IAAU,CAClB,CAAC;EAEN,CAAC;EAEDkB,QAAQ,EAAE;IACRC,WAAW,EAAE,mDAAmD;IAChEC,MAAM,EAAE;EACV;AACF,CAAC;;AAED;AACA;AACA;AACA,SAASV,iBAAiBA,CAACF,QAAa,EAAU;EAChD,IAAI,CAACA,QAAQ,EAAE,OAAO,CAAC;EAEvB,IAAI,OAAOA,QAAQ,KAAK,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ,EAAE;IAChE,MAAMa,IAAI,GAAGC,MAAM,CAACd,QAAQ,CAAC;IAC7B,MAAMe,eAAe,GAAG,EAAE;IAC1B,MAAMd,cAAc,GAAGe,IAAI,CAACC,IAAI,CAACJ,IAAI,CAACK,MAAM,GAAGH,eAAe,CAAC;IAC/D,OAAOC,IAAI,CAACG,GAAG,CAAC,CAAC,EAAEH,IAAI,CAACI,GAAG,CAACnB,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;EACnD;EAEA,IAAIR,KAAK,CAACC,OAAO,CAACM,QAAQ,CAAC,EAAE;IAC3B;IACA,OAAOgB,IAAI,CAACI,GAAG,CAACpB,QAAQ,CAACkB,MAAM,EAAE,CAAC,CAAC;EACrC;EAEA,OAAO,CAAC;AACV","ignoreList":[]}

package/lib/module/plugins/ViewPlugin.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View } from 'react-native';
+/**
+ * Built-in plugin for React Native View component
+ *
+ * Renders View as:
+ * - SkeletonBox if has explicit width/height
+ * - Container with parsed children otherwise
+ */
+export const ViewPlugin = {
+  name: 'View',
+  component: View,
+  version: '1.0.0',
+  strategy: (props, context) => {
+    const {
+      primitives,
+      parseChildren,
+      config
+    } = context;
+    const style = props.style || {};
+    const flatStyle = Array.isArray(style) ? Object.assign({}, ...style) : style;
+    const width = flatStyle.width;
+    const height = flatStyle.height;
+    const borderRadius = flatStyle.borderRadius ?? config.borderRadius;
+
+    // If View has explicit dimensions, render as box
+    if (width && height) {
+      return /*#__PURE__*/React.createElement(primitives.Box, {
+        width: width,
+        height: height,
+        borderRadius: borderRadius,
+        animation: config.animation,
+        baseColor: config.baseColor,
+        highlightColor: config.highlightColor,
+        duration: config.duration,
+        style: flatStyle
+      });
+    }
+
+    // If View has children, render as container
+    if (props.children) {
+      return /*#__PURE__*/React.createElement(View, {
+        style: flatStyle
+      }, parseChildren(props.children));
+    }
+
+    // Empty View - render as small placeholder
+    return /*#__PURE__*/React.createElement(primitives.Box, {
+      width: width ?? 100,
+      height: height ?? 20,
+      borderRadius: borderRadius,
+      animation: config.animation,
+      baseColor: config.baseColor,
+      highlightColor: config.highlightColor,
+      duration: config.duration,
+      style: flatStyle
+    });
+  },
+  metadata: {
+    description: 'Automatic skeleton generation for View components',
+    author: 'Skelo'
+  }
+};
+//# sourceMappingURL=ViewPlugin.js.map

package/lib/module/plugins/ViewPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","ViewPlugin","name","component","version","strategy","props","context","primitives","parseChildren","config","style","flatStyle","Array","isArray","Object","assign","width","height","borderRadius","createElement","Box","animation","baseColor","highlightColor","duration","children","metadata","description","author"],"sourceRoot":"../../../src","sources":["plugins/ViewPlugin.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAInC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAqC,GAAG;EACnDC,IAAI,EAAE,MAAM;EACZC,SAAS,EAAEH,IAAI;EACfI,OAAO,EAAE,OAAO;EAEhBC,QAAQ,EAAEA,CAACC,KAAK,EAAEC,OAAO,KAAK;IAC5B,MAAM;MAAEC,UAAU;MAAEC,aAAa;MAAEC;IAAO,CAAC,GAAGH,OAAO;IACrD,MAAMI,KAAK,GAAGL,KAAK,CAACK,KAAK,IAAI,CAAC,CAAC;IAC/B,MAAMC,SAAS,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAAGI,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAGL,KAAK,CAAC,GAAGA,KAAK;IAE5E,MAAMM,KAAK,GAAGL,SAAS,CAACK,KAAK;IAC7B,MAAMC,MAAM,GAAGN,SAAS,CAACM,MAAM;IAC/B,MAAMC,YAAY,GAAGP,SAAS,CAACO,YAAY,IAAIT,MAAM,CAACS,YAAY;;IAElE;IACA,IAAIF,KAAK,IAAIC,MAAM,EAAE;MACnB,oBACEnB,KAAA,CAAAqB,aAAA,CAACZ,UAAU,CAACa,GAAG;QACbJ,KAAK,EAAEA,KAAM;QACbC,MAAM,EAAEA,MAAO;QACfC,YAAY,EAAEA,YAAa;QAC3BG,SAAS,EAAEZ,MAAM,CAACY,SAAU;QAC5BC,SAAS,EAAEb,MAAM,CAACa,SAAU;QAC5BC,cAAc,EAAEd,MAAM,CAACc,cAAe;QACtCC,QAAQ,EAAEf,MAAM,CAACe,QAAS;QAC1Bd,KAAK,EAAEC;MAAU,CAClB,CAAC;IAEN;;IAEA;IACA,IAAIN,KAAK,CAACoB,QAAQ,EAAE;MAClB,oBAAO3B,KAAA,CAAAqB,aAAA,CAACpB,IAAI;QAACW,KAAK,EAAEC;MAAU,GAAEH,aAAa,CAACH,KAAK,CAACoB,QAAQ,CAAQ,CAAC;IACvE;;IAEA;IACA,oBACE3B,KAAA,CAAAqB,aAAA,CAACZ,UAAU,CAACa,GAAG;MACbJ,KAAK,EAAEA,KAAK,IAAI,GAAI;MACpBC,MAAM,EAAEA,MAAM,IAAI,EAAG;MACrBC,YAAY,EAAEA,YAAa;MAC3BG,SAAS,EAAEZ,MAAM,CAACY,SAAU;MAC5BC,SAAS,EAAEb,MAAM,CAACa,SAAU;MAC5BC,cAAc,EAAEd,MAAM,CAACc,cAAe;MACtCC,QAAQ,EAAEf,MAAM,CAACe,QAAS;MAC1Bd,KAAK,EAAEC;IAAU,CAClB,CAAC;EAEN,CAAC;EAEDe,QAAQ,EAAE;IACRC,WAAW,EAAE,mDAAmD;IAChEC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/lib/module/plugins/index.js

@@ -0,0 +1,4 @@
+export { ViewPlugin } from './ViewPlugin';
+export { TextPlugin } from './TextPlugin';
+export { ImagePlugin } from './ImagePlugin';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ViewPlugin","TextPlugin","ImagePlugin"],"sourceRoot":"../../../src","sources":["plugins/index.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,WAAW,QAAQ,eAAe","ignoreList":[]}

package/lib/module/types/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/index.ts"],"mappings":"","ignoreList":[]}

package/lib/module/types/plugin.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=plugin.js.map

package/lib/module/types/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/plugin.ts"],"mappings":"","ignoreList":[]}

package/lib/module/types/skeleton.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=skeleton.js.map

package/lib/module/types/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/skeleton.ts"],"mappings":"","ignoreList":[]}

package/lib/module/utils/componentUtils.js

@@ -0,0 +1,123 @@
+import React, { isValidElement } from 'react';
+import { View, Text, Image, ImageBackground, ScrollView, SafeAreaView, FlatList, SectionList, VirtualizedList, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, Pressable, KeyboardAvoidingView } from 'react-native';
+
+// Re-exported so consumers can access it from the skelo utils surface
+export { isValidElement };
+
+/**
+ * Reference map of React Native host components to their canonical names.
+ *
+ * Modern RN components (View/Text/Image/...) are `forwardRef`/`memo` objects,
+ * not plain functions or strings, so name/displayName sniffing is unreliable.
+ * Identifying them by reference is exact. This works across the library/app
+ * module boundary because Metro resolves a single `react-native` instance.
+ */
+const RN_COMPONENT_NAMES = new Map([[View, 'View'], [Text, 'Text'], [Image, 'Image'], [ImageBackground, 'ImageBackground'], [ScrollView, 'ScrollView'], [SafeAreaView, 'SafeAreaView'], [FlatList, 'FlatList'], [SectionList, 'SectionList'], [VirtualizedList, 'VirtualizedList'], [TouchableOpacity, 'TouchableOpacity'], [TouchableHighlight, 'TouchableHighlight'], [TouchableWithoutFeedback, 'TouchableWithoutFeedback'], [Pressable, 'Pressable'], [KeyboardAvoidingView, 'KeyboardAvoidingView']]);
+
+/**
+ * Get component display name or type name
+ *
+ * @param element - React element
+ * @returns Component name as string
+ */
+export function getComponentName(element) {
+  const type = element.type;
+  if (type === React.Fragment) {
+    return 'Fragment';
+  }
+
+  // Exact identification of RN host components (forwardRef/memo objects).
+  const mapped = RN_COMPONENT_NAMES.get(type);
+  if (mapped) {
+    return mapped;
+  }
+
+  // Intrinsic host string (e.g. web/DOM or raw native tags).
+  if (typeof type === 'string') {
+    return type;
+  }
+
+  // Plain function/class components.
+  if (typeof type === 'function') {
+    const fn = type;
+    return fn.displayName || fn.name || 'Anonymous';
+  }
+
+  // forwardRef / memo wrappers: unwrap to find a usable name.
+  if (typeof type === 'object' && type !== null) {
+    const obj = type;
+    if (obj.displayName) {
+      return obj.displayName;
+    }
+    if (obj.render) {
+      return obj.render.displayName || obj.render.name || 'Anonymous';
+    }
+    // memo(Component) nests the real component under `.type`.
+    if (obj.type) {
+      return getComponentName({
+        type: obj.type
+      });
+    }
+    return 'Anonymous';
+  }
+  return 'Unknown';
+}
+
+/**
+ * Check if element is a React Fragment
+ *
+ * @param element - React element
+ * @returns True if element is a Fragment
+ */
+export function isFragment(element) {
+  return element.type === React.Fragment;
+}
+
+/**
+ * Flatten children, handling Fragments recursively
+ *
+ * @param children - React children
+ * @returns Flattened array of children
+ */
+export function flattenChildren(children) {
+  const result = [];
+  React.Children.forEach(children, child => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      result.push(child);
+      return;
+    }
+    if (isFragment(child)) {
+      // Recursively flatten fragment children
+      const fragmentChildren = flattenChildren(child.props.children);
+      result.push(...fragmentChildren);
+    } else {
+      result.push(child);
+    }
+  });
+  return result;
+}
+
+/**
+ * Check if component is a touchable component
+ *
+ * @param element - React element
+ * @returns True if component is touchable
+ */
+export function isTouchableComponent(element) {
+  const name = getComponentName(element);
+  const touchableTypes = ['TouchableOpacity', 'TouchableHighlight', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'Pressable'];
+  return touchableTypes.includes(name);
+}
+
+/**
+ * Generate random width percentage for natural skeleton look
+ *
+ * @param min - Minimum percentage (0-100)
+ * @param max - Maximum percentage (0-100)
+ * @returns Random percentage as string (e.g., "75%")
+ */
+export function randomWidth(min = 60, max = 90) {
+  const random = Math.floor(Math.random() * (max - min + 1)) + min;
+  return `${random}%`;
+}
+//# sourceMappingURL=componentUtils.js.map

package/lib/module/utils/componentUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","isValidElement","View","Text","Image","ImageBackground","ScrollView","SafeAreaView","FlatList","SectionList","VirtualizedList","TouchableOpacity","TouchableHighlight","TouchableWithoutFeedback","Pressable","KeyboardAvoidingView","RN_COMPONENT_NAMES","Map","getComponentName","element","type","Fragment","mapped","get","fn","displayName","name","obj","render","isFragment","flattenChildren","children","result","Children","forEach","child","push","fragmentChildren","props","isTouchableComponent","touchableTypes","includes","randomWidth","min","max","random","Math","floor"],"sourceRoot":"../../../src","sources":["utils/componentUtils.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/utils/index.js

@@ -0,0 +1,3 @@
+export { resolveStyle, extractDimensions, isPercentage, percentageToNumber } from './styleUtils';
+export { getComponentName, isFragment, flattenChildren, isTouchableComponent, randomWidth } from './componentUtils';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["resolveStyle","extractDimensions","isPercentage","percentageToNumber","getComponentName","isFragment","flattenChildren","isTouchableComponent","randomWidth"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":"AAAA,SAASA,YAAY,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,kBAAkB,QAAQ,cAAc;AAEhG,SACEC,gBAAgB,EAChBC,UAAU,EACVC,eAAe,EACfC,oBAAoB,EACpBC,WAAW,QACN,kBAAkB","ignoreList":[]}

package/lib/module/utils/styleUtils.js

@@ -0,0 +1,66 @@
+import { StyleSheet } from 'react-native';
+/**
+ * Flatten and resolve styles from React Native style prop
+ *
+ * @param style - Style prop (can be object, array, or StyleSheet reference)
+ * @returns Flattened style object
+ */
+export function resolveStyle(style) {
+  if (!style) {
+    return {};
+  }
+  try {
+    const flattened = StyleSheet.flatten(style);
+    return flattened;
+  } catch (error) {
+    // Handle invalid styles gracefully
+    if (__DEV__) {
+      console.warn('[Skelo] Failed to resolve style:', error);
+    }
+    return {};
+  }
+}
+
+/**
+ * Extract dimensions from resolved style
+ *
+ * @param style - Resolved style object
+ * @returns Object with width and height (if present)
+ */
+export function extractDimensions(style) {
+  return {
+    width: style.width,
+    height: style.height
+  };
+}
+
+/**
+ * Check if a resolved style declares both an explicit width and height
+ *
+ * @param style - Resolved style object
+ * @returns True if both width and height are defined
+ */
+export function hasExplicitSize(style) {
+  return style.width !== undefined && style.height !== undefined;
+}
+
+/**
+ * Check if a value is a percentage string
+ *
+ * @param value - Value to check
+ * @returns True if value is a percentage string
+ */
+export function isPercentage(value) {
+  return typeof value === 'string' && value.includes('%');
+}
+
+/**
+ * Convert percentage to number (strips %)
+ *
+ * @param value - Percentage string (e.g., "50%")
+ * @returns Number without % sign
+ */
+export function percentageToNumber(value) {
+  return parseFloat(value.replace('%', ''));
+}
+//# sourceMappingURL=styleUtils.js.map

package/lib/module/utils/styleUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","resolveStyle","style","flattened","flatten","error","__DEV__","console","warn","extractDimensions","width","height","hasExplicitSize","undefined","isPercentage","value","includes","percentageToNumber","parseFloat","replace"],"sourceRoot":"../../../src","sources":["utils/styleUtils.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AAIzC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAACC,KAAU,EAAiB;EACtD,IAAI,CAACA,KAAK,EAAE;IACV,OAAO,CAAC,CAAC;EACX;EAEA,IAAI;IACF,MAAMC,SAAS,GAAGH,UAAU,CAACI,OAAO,CAACF,KAAK,CAAC;IAC3C,OAAOC,SAAS;EAClB,CAAC,CAAC,OAAOE,KAAK,EAAE;IACd;IACA,IAAIC,OAAO,EAAE;MACXC,OAAO,CAACC,IAAI,CAAC,kCAAkC,EAAEH,KAAK,CAAC;IACzD;IACA,OAAO,CAAC,CAAC;EACX;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,iBAAiBA,CAACP,KAAoB,EAGpD;EACA,OAAO;IACLQ,KAAK,EAAER,KAAK,CAACQ,KAAK;IAClBC,MAAM,EAAET,KAAK,CAACS;EAChB,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAACV,KAAoB,EAAW;EAC7D,OAAOA,KAAK,CAACQ,KAAK,KAAKG,SAAS,IAAIX,KAAK,CAACS,MAAM,KAAKE,SAAS;AAChE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAACC,KAAU,EAAW;EAChD,OAAO,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACC,QAAQ,CAAC,GAAG,CAAC;AACzD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAACF,KAAa,EAAU;EACxD,OAAOG,UAAU,CAACH,KAAK,CAACI,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AAC3C","ignoreList":[]}

package/lib/typescript/Skelo.d.ts

@@ -0,0 +1,76 @@
+import type { ComponentType, ReactElement } from 'react';
+import type { SkeletonConfig, SkeletonPlugin } from './types';
+import { type StyleInput } from './core/generator/StyleSkeleton';
+/**
+ * Global Skelo API for plugin management
+ *
+ * @example
+ * ```tsx
+ * import { Skelo } from 'react-native-skelo';
+ * import { Avatar } from 'my-ui-library';
+ *
+ * Skelo.register({
+ *   name: 'Avatar',
+ *   component: Avatar,
+ *   strategy: (props, { primitives }) => {
+ *     return <primitives.Circle size={props.size || 40} />;
+ *   },
+ * });
+ * ```
+ */
+export declare const Skelo: {
+    /**
+     * Register a plugin
+     *
+     * @param plugin - Plugin configuration
+     */
+    register<P = any>(plugin: SkeletonPlugin<P>): void;
+    /**
+     * Unregister a plugin
+     *
+     * @param component - Component type to unregister
+     */
+    unregister(component: ComponentType): void;
+    /**
+     * Get plugin for component
+     *
+     * @param component - Component type
+     * @returns Plugin or undefined
+     */
+    getPlugin(component: ComponentType): SkeletonPlugin | undefined;
+    /**
+     * Check if plugin exists
+     *
+     * @param component - Component type
+     * @returns True if plugin is registered
+     */
+    hasPlugin(component: ComponentType): boolean;
+    /**
+     * Get all plugins
+     *
+     * @returns Array of all registered plugins
+     */
+    getAllPlugins(): SkeletonPlugin[];
+    /**
+     * Clear all plugins (useful for testing)
+     */
+    clearPlugins(): void;
+    /**
+     * Generate a skeleton element directly from a set of styles.
+     *
+     * @param styles - A `StyleSheet.create` object or an array of styles
+     * @param config - Optional animation/color overrides
+     * @returns A skeleton React element
+     *
+     * @example
+     * ```tsx
+     * {loading ? Skelo.fromStyles(styles) : <Screen />}
+     * ```
+     */
+    fromStyles(styles: StyleInput, config?: Partial<SkeletonConfig>): ReactElement;
+    /**
+     * Library version
+     */
+    version: string;
+};
+//# sourceMappingURL=Skelo.d.ts.map