@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/Skeleton/SkeletonClock.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSkeletonClock = exports.SkeletonClockProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * SkeletonClock — single shared animation tick for every <Skeleton> on screen.
+ *
+ * Why this exists: previously every Skeleton primitive ran its own
+ * `Animated.loop` on its own `Animated.Value`. A list of 20 placeholders =
+ * 20 independent native-driver timers, each starting at a slightly different
+ * mount frame, so their shimmer bands drift out of phase within ~1s and the
+ * surface feels noisy. CSS-driven web skeleton libs (react-loading-skeleton,
+ * MUI) avoid this because the browser owns a single timeline. We emulate
+ * that on RN by hoisting the loop into context.
+ *
+ * The clock produces a value in `[0, 1)` that wraps every `duration` ms. Each
+ * Skeleton interpolates that value into its own translateX / opacity output.
+ * One native-driver loop, no drift, ~zero JS cost.
+ */
+
+const SHIMMER_DURATION = {
+  slow: 1800,
+  normal: 1200,
+  fast: 800
+};
+const PULSE_DURATION = 1000;
+const SkeletonClockContext = /*#__PURE__*/(0, _react.createContext)(null);
+/**
+ * Owns the loops. Mount one of these inside `SkeletonProvider`; every
+ * `<Skeleton>` below it shares the same animated values.
+ */
+const SkeletonClockProvider = ({
+  speed,
+  enabled,
+  variant: _variant,
+  children
+}) => {
+  const shimmer = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const pulse = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  (0, _react.useEffect)(() => {
+    if (!enabled) {
+      // Park the values at a deterministic "off" state so any consumer that
+      // happens to be reading them still gets a visible (static) skeleton.
+      shimmer.setValue(0);
+      pulse.setValue(0.5);
+      return;
+    }
+
+    // Both loops use the native driver — the JS thread doesn't tick for
+    // either. Both run continuously; consumers read whichever they need.
+    // The negligible cost of running the *other* loop is worth keeping
+    // variant switching instant (no remount, no loop teardown).
+    const shimmerLoop = _reactNative.Animated.loop(_reactNative.Animated.timing(shimmer, {
+      toValue: 1,
+      duration: SHIMMER_DURATION[speed],
+      easing: _reactNative.Easing.linear,
+      useNativeDriver: true
+    }));
+    const pulseLoop = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(pulse, {
+      toValue: 1,
+      duration: PULSE_DURATION / 2,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(pulse, {
+      toValue: 0,
+      duration: PULSE_DURATION / 2,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
+      useNativeDriver: true
+    })]));
+    shimmerLoop.start();
+    pulseLoop.start();
+    return () => {
+      shimmerLoop.stop();
+      pulseLoop.stop();
+    };
+    // `variant` is intentionally NOT a dependency — both loops always run
+    // so switching variants is a single render with no loop teardown.
+  }, [speed, enabled, shimmer, pulse]);
+  const value = (0, _react.useMemo)(() => ({
+    shimmer,
+    pulse,
+    enabled
+  }), [shimmer, pulse, enabled]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonClockContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+exports.SkeletonClockProvider = SkeletonClockProvider;
+SkeletonClockProvider.displayName = 'SkeletonClockProvider';
+
+/**
+ * Read the active clock. Returns a fallback "always-still" clock when no
+ * provider is mounted, so the primitives still render (statically) outside
+ * one — keeps demo/storybook usage friction-free.
+ */
+const useSkeletonClock = () => {
+  const ctx = (0, _react.useContext)(SkeletonClockContext);
+  if (ctx) {
+    return ctx;
+  }
+  // Fallback: a permanently-stopped clock. Created once at module scope.
+  return fallbackClock;
+};
+exports.useSkeletonClock = useSkeletonClock;
+const fallbackClock = {
+  shimmer: (0, _index.createAnimatedValue)(0),
+  pulse: (0, _index.createAnimatedValue)(0.5),
+  enabled: false
+};
+//# sourceMappingURL=SkeletonClock.js.map

package/lib/commonjs/components/Skeleton/SkeletonContent.js

@@ -0,0 +1,309 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SkeletonContent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _Skeleton = require("./Skeleton.js");
+var _SkeletonProvider = require("./SkeletonProvider.js");
+var _SkeletonSkip = require("./SkeletonSkip.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * SkeletonContent — show placeholder shapes while data is loading, then
+ * cross-fade to the real children once it arrives.
+ *
+ * Three usage patterns, listed in order of preference:
+ *
+ *   1. **Explicit placeholder** (recommended):
+ *
+ *        <SkeletonContent loading={isLoading} placeholder={<Card.Skeleton />}>
+ *          <Card>{realChildren}</Card>
+ *        </SkeletonContent>
+ *
+ *      Renders `placeholder` verbatim while loading and `children` once loaded.
+ *      Most precise and predictable — what you write is exactly what shimmers.
+ *      Prefer this for any non-trivial layout.
+ *
+ *   2. **Self-describing components inside an auto-walked tree**:
+ *
+ *        <SkeletonContent loading={isLoading}>
+ *          <Stepper steps={steps} />
+ *          <Card>...</Card>
+ *        </SkeletonContent>
+ *
+ *      With no `placeholder` prop, the walker substitutes each element. For
+ *      library components, the walker checks for a `Component.Skeleton` static
+ *      and replaces the element wholesale with it (the component author knows
+ *      its shape best). For plain `<Text>`, `<Image>`, and sized `<View>`
+ *      leaves the walker substitutes shape-matched `<Skeleton>` blocks based
+ *      on the element's own style. Good for screen-level wrappers.
+ *
+ *   3. **Hand-authored primitive trees** (legacy / quick prototyping):
+ *
+ *        <SkeletonContent loading={isLoading}>
+ *          <View>
+ *            <Text style={{ fontSize: 20 }}>Title</Text>
+ *            <Text>Subtitle</Text>
+ *          </View>
+ *        </SkeletonContent>
+ *
+ *      Same walker as (2) — the Text/Image/View introspection handles
+ *      primitive trees that mirror the loaded layout.
+ *
+ * Cross-fade: when `loading` flips from true to false, real children fade in
+ * over `fadeDuration` ms. The first render is guarded — content that was
+ * never in a loading state does NOT fade on mount, only the actual
+ * loading→loaded transition does. Matches Chakra UI's `isLoaded` feel.
+ */
+
+/**
+ * Components that ship their own placeholder shape declare this static. The
+ * walker looks for it before falling back to primitive introspection. The
+ * function receives the original component's props so consumer-customizable
+ * dimensions (size, count, etc.) carry through to the placeholder.
+ */
+
+const flattenStyle = style => {
+  if (!style) {
+    return {};
+  }
+  const flat = _reactNative.StyleSheet.flatten(style);
+  return flat ?? {};
+};
+const resolveWidth = (raw, fallback) => {
+  if (typeof raw === 'number') {
+    return raw;
+  }
+  if (typeof raw === 'string') {
+    if (raw === 'auto' || raw === '100%' || /^\d+(\.\d+)?%$/.test(raw)) {
+      return raw;
+    }
+  }
+  return fallback;
+};
+const resolveRadius = (raw, fallback) => {
+  if (typeof raw === 'number') {
+    return raw;
+  }
+  return fallback;
+};
+const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
+  if (node == null || typeof node === 'boolean') {
+    return null;
+  }
+  if (typeof node === 'string' || typeof node === 'number') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+      shape: "text",
+      width: "60%",
+      height: 14,
+      variant: variant,
+      speed: speed,
+      colors: colors
+    }, `${keyHint}-text`);
+  }
+  if (Array.isArray(node)) {
+    return _react.Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, colors, `${keyHint}-${index}`));
+  }
+  if (! /*#__PURE__*/(0, _react.isValidElement)(node)) {
+    return null;
+  }
+  const element = node;
+  const props = element.props ?? {};
+  const elementType = element.type;
+
+  // <SkeletonSkip /> → opt-out marker; render its children unchanged.
+  if (elementType === _SkeletonSkip.SkeletonSkip) {
+    return /*#__PURE__*/(0, _react.cloneElement)(element, {
+      key: `${keyHint}-skip`
+    });
+  }
+
+  // Self-describing component path. If a custom component (Stepper, Card,
+  // Banner, etc.) ships a `Skeleton` static, prefer it over the primitive
+  // walker — the component author knows the shape better than we can guess.
+  // Forwards the original props so consumer-tunable params (size, count,
+  // tone) flow through. Crucially this short-circuits the walker BEFORE
+  // it tries to recurse into custom-component children, so we never end up
+  // rendering half-real / half-placeholder UI.
+  if (typeof elementType === 'function' || typeof elementType === 'object') {
+    const SkeletonStatic = elementType.Skeleton;
+    if (SkeletonStatic) {
+      const Sk = SkeletonStatic;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Sk, {
+        ...props
+      }, `${keyHint}-self`);
+    }
+  }
+
+  // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius.
+  if (elementType === _reactNative.Image) {
+    const elementStyle = flattenStyle(props.style);
+    const width = resolveWidth(elementStyle.width, '100%');
+    const height = typeof elementStyle.height === 'number' ? elementStyle.height : 120;
+    const radius = resolveRadius(elementStyle.borderRadius, 'sm');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+      width: width,
+      height: height,
+      radius: radius,
+      variant: variant,
+      speed: speed,
+      colors: colors,
+      style: {
+        margin: typeof elementStyle.margin === 'number' ? elementStyle.margin : undefined
+      }
+    }, `${keyHint}-img`);
+  }
+
+  // <Text /> → text-line skeleton matching font size.
+  if (elementType === _reactNative.Text) {
+    const elementStyle = flattenStyle(props.style);
+    const fontSize = typeof elementStyle.fontSize === 'number' ? elementStyle.fontSize : 14;
+    const width = resolveWidth(elementStyle.width, '85%');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+      shape: "text",
+      width: width,
+      height: Math.round(fontSize * 1.15),
+      variant: variant,
+      speed: speed,
+      colors: colors,
+      style: {
+        marginVertical: 2
+      }
+    }, `${keyHint}-txt`);
+  }
+
+  // Element with children → recurse, preserving the wrapper (View, Pressable,
+  // custom layouts). Runs AFTER the self-describing check so any component
+  // with `.Skeleton` is replaced wholesale.
+  if (props.children != null) {
+    return /*#__PURE__*/(0, _react.cloneElement)(element, {
+      key: `${keyHint}-w`
+    }, skeletonizeNode(props.children, variant, speed, colors, `${keyHint}-c`));
+  }
+
+  // Leaf <View /> with explicit dimensions → skeleton block.
+  if (elementType === _reactNative.View) {
+    const elementStyle = flattenStyle(props.style);
+    if (elementStyle.width != null || elementStyle.height != null) {
+      const width = resolveWidth(elementStyle.width, '100%');
+      const height = typeof elementStyle.height === 'number' ? elementStyle.height : 20;
+      const radius = resolveRadius(elementStyle.borderRadius, 'sm');
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
+        width: width,
+        height: height,
+        radius: radius,
+        variant: variant,
+        speed: speed,
+        colors: colors
+      }, `${keyHint}-vw`);
+    }
+  }
+
+  // Opaque leaf (custom component without inspectable children and without a
+  // `.Skeleton` static) → leave as-is. Consumers should provide an explicit
+  // `placeholder` or author a `.Skeleton` static to handle these.
+  return /*#__PURE__*/(0, _react.cloneElement)(element, {
+    key: `${keyHint}-leaf`
+  });
+};
+const SkeletonContent = ({
+  loading,
+  children,
+  placeholder,
+  variant,
+  speed,
+  count = 1,
+  colors,
+  fadeDuration,
+  style,
+  testID
+}) => {
+  const defaults = (0, _SkeletonProvider.useSkeletonDefaults)();
+  const resolvedFadeDuration = fadeDuration ?? defaults.fadeDuration ?? 300;
+
+  // Cross-fade: opacity goes 0 → 1 when loading just flipped off. First
+  // render is guarded with `wasLoadingRef` so already-loaded content
+  // doesn't fade in on mount.
+  const wasLoadingRef = (0, _react.useRef)(loading);
+  const fadeAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(loading ? 0 : 1)).current;
+  (0, _react.useEffect)(() => {
+    let anim;
+    if (wasLoadingRef.current && !loading) {
+      fadeAnim.setValue(0);
+      anim = _reactNative.Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: resolvedFadeDuration,
+        useNativeDriver: true
+      });
+      anim.start();
+    } else if (!wasLoadingRef.current && loading) {
+      // Going back into loading from loaded — snap opacity so the
+      // placeholder appears instantly when data invalidates.
+      fadeAnim.setValue(1);
+    }
+    wasLoadingRef.current = loading;
+    return () => anim?.stop();
+  }, [loading, fadeAnim, resolvedFadeDuration]);
+  if (!loading) {
+    if (resolvedFadeDuration <= 0) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: children
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [style, {
+        opacity: fadeAnim
+      }],
+      testID: testID,
+      children: children
+    });
+  }
+
+  // Explicit placeholder path — no walker, no introspection.
+  if (placeholder !== undefined) {
+    const slots = count > 1 ? Array.from({
+      length: count
+    }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+      children: placeholder
+    }, `sk-ph-${i}`)) : placeholder;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: style,
+      testID: testID,
+      accessible: true,
+      accessibilityLabel: "Loading",
+      accessibilityRole: "progressbar",
+      accessibilityState: {
+        busy: true
+      },
+      accessibilityLiveRegion: "polite",
+      children: slots
+    });
+  }
+
+  // Walker path — auto-substitute primitives and self-describing components.
+  const repeated = count > 1 ? Array.from({
+    length: count
+  }, (_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+    children: children
+  }, `sk-rep-${i}`)) : children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style,
+    testID: testID,
+    accessible: true,
+    accessibilityLabel: "Loading",
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    accessibilityLiveRegion: "polite",
+    children: skeletonizeNode(repeated, variant, speed, colors)
+  });
+};
+exports.SkeletonContent = SkeletonContent;
+SkeletonContent.displayName = 'SkeletonContent';
+var _default = exports.default = SkeletonContent;
+//# sourceMappingURL=SkeletonContent.js.map

package/lib/commonjs/components/Skeleton/SkeletonList.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _SkeletonContent = require("./SkeletonContent.js");
+var _SkeletonProvider = require("./SkeletonProvider.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Drop-in FlatList replacement that renders `placeholderCount` skeleton rows while
+ * `loading` is true, then transitions to a real `<FlatList>` of `data` once loaded.
+ *
+ * Solves the "FlatList with empty data renders nothing" problem so consumer screens
+ * don't have to maintain a separate placeholder branch.
+ *
+ * Inside a vertical ScrollView, pass `scrollEnabled={false}` and let the outer
+ * view scroll: once `loading` flips false a real VirtualizedList mounts, and RN
+ * logs a nesting error for a same-orientation list — which only shows up after
+ * the data arrives, never on first render.
+ *
+ * @example
+ * <SkeletonList
+ *   loading={isLoading}
+ *   data={sites}
+ *   renderItem={({ item }) => <SiteCard item={item} />}
+ *   renderPlaceholder={() => <SiteCard loading />}
+ *   placeholderCount={3}
+ *   horizontal
+ * />
+ */
+function SkeletonListInner(props) {
+  const {
+    loading,
+    data,
+    renderItem,
+    renderPlaceholder,
+    placeholderCount,
+    variant,
+    speed,
+    colors,
+    placeholderContainerStyle,
+    horizontal,
+    contentContainerStyle,
+    style,
+    testID,
+    ...rest
+  } = props;
+  const defaults = (0, _SkeletonProvider.useSkeletonDefaults)();
+  const resolvedCount = placeholderCount ?? defaults.placeholderCount ?? 3;
+  if (loading) {
+    const slots = Array.from({
+      length: Math.max(0, resolvedCount)
+    }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+      children: renderPlaceholder ? renderPlaceholder(index) : null
+    }, `sk-list-${index}`));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonContent.SkeletonContent, {
+      loading: true,
+      variant: variant,
+      speed: speed,
+      colors: colors,
+      style: style,
+      testID: testID,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [horizontal ? styles.row : styles.column, placeholderContainerStyle],
+        children: slots
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+    data: data ?? [],
+    renderItem: renderItem,
+    horizontal: horizontal,
+    contentContainerStyle: contentContainerStyle,
+    style: style,
+    testID: testID,
+    ...rest
+  });
+}
+const styles = {
+  row: {
+    flexDirection: 'row'
+  },
+  column: {
+    flexDirection: 'column'
+  }
+};
+const SkeletonList = exports.SkeletonList = SkeletonListInner;
+//# sourceMappingURL=SkeletonList.js.map

package/lib/commonjs/components/Skeleton/SkeletonProvider.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSkeletonDefaults = exports.useReduceMotion = exports.SkeletonProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _SkeletonClock = require("./SkeletonClock.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * SkeletonProvider — app-level defaults for every <Skeleton> below it.
+ *
+ * Two responsibilities:
+ *   1. Broadcasts the default variant / speed / colors / radius /
+ *      placeholderCount so consumers don't repeat them per call site.
+ *   2. Mounts the shared `SkeletonClockProvider` (see SkeletonClock.tsx) so
+ *      every primitive shares a single Animated.Value — synchronized shimmer
+ *      across the whole subtree, one native-driver loop per provider.
+ *
+ * Also honors the OS "Reduce Motion" preference: when enabled, the clock is
+ * paused and skeletons render as static dim blocks. The detection is live —
+ * if the user toggles the setting while the app is open the skeletons stop
+ * shimmering immediately.
+ */
+
+/**
+ * Per-instance color override for a skeleton. `background` is the resting
+ * tone of the placeholder; `highlight` is the moving shimmer band (or pulse
+ * fade). Either can be omitted — missing keys fall back to the active theme.
+ */
+
+const SkeletonDefaultsContext = /*#__PURE__*/(0, _react.createContext)({});
+const SkeletonProvider = ({
+  children,
+  variant,
+  speed,
+  placeholderCount,
+  radius,
+  colors,
+  fadeDuration,
+  animation = 'auto'
+}) => {
+  const reduceMotion = useReduceMotion();
+  // Resolve whether the clock should actually tick. `'never'` forces off,
+  // `'always'` forces on, `'auto'` follows the OS preference.
+  const animationsEnabled = animation === 'always' ? true : animation === 'never' ? false : !reduceMotion;
+  const resolvedSpeed = speed ?? 'normal';
+  const resolvedVariant = variant ?? 'shimmer';
+  const value = (0, _react.useMemo)(() => ({
+    variant,
+    speed,
+    placeholderCount,
+    radius,
+    colors,
+    fadeDuration,
+    animation
+  }), [variant, speed, placeholderCount, radius, colors, fadeDuration, animation]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonDefaultsContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonClock.SkeletonClockProvider, {
+      speed: resolvedSpeed,
+      variant: resolvedVariant,
+      enabled: animationsEnabled,
+      children: children
+    })
+  });
+};
+exports.SkeletonProvider = SkeletonProvider;
+SkeletonProvider.displayName = 'SkeletonProvider';
+
+/**
+ * Read the current SkeletonProvider defaults. Returns an empty object when
+ * no provider is mounted, so the skeleton primitives still work outside of
+ * one — but without a shared clock or theme-coordinated colors.
+ */
+const useSkeletonDefaults = () => {
+  return (0, _react.useContext)(SkeletonDefaultsContext);
+};
+
+/**
+ * Subscribes to the OS "Reduce Motion" preference. Live — updates when the
+ * user toggles the setting while the app is open. Used internally by
+ * `SkeletonProvider`; exposed so consumer screens can branch on it too.
+ */
+exports.useSkeletonDefaults = useSkeletonDefaults;
+const useReduceMotion = () => {
+  const [reduce, setReduce] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    let mounted = true;
+    _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(value => {
+      if (mounted) {
+        setReduce(value);
+      }
+    }).catch(() => {
+      // Some platforms / older RN versions throw if the native module is
+      // missing. Treat as "motion allowed" — degrade quietly to shimmer.
+      if (mounted) {
+        setReduce(false);
+      }
+    });
+    const sub = _reactNative.AccessibilityInfo.addEventListener('reduceMotionChanged', value => {
+      setReduce(value);
+    });
+    return () => {
+      mounted = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+};
+exports.useReduceMotion = useReduceMotion;
+//# sourceMappingURL=SkeletonProvider.js.map

package/lib/commonjs/components/Skeleton/SkeletonSkip.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonSkip = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Pass-through marker that opts a subtree out of `SkeletonContent`'s auto walker.
+ *
+ * The walker recognizes this element type and returns its children unchanged
+ * even while `loading` is true. Use it to keep a specific Text/Image/View
+ * visible inside a skeleton block — e.g., a brand mark, a status icon, or a
+ * decorative element that should never shimmer.
+ *
+ * @example
+ *   <SkeletonContent loading>
+ *     <View style={styles.card}>
+ *       <SkeletonSkip>
+ *         <Image source={Logo} style={styles.brandMark} />
+ *       </SkeletonSkip>
+ *       <Text>Loading…</Text>
+ *     </View>
+ *   </SkeletonContent>
+ */
+const SkeletonSkip = ({
+  children
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
+};
+exports.SkeletonSkip = SkeletonSkip;
+SkeletonSkip.displayName = 'SkeletonSkip';
+//# sourceMappingURL=SkeletonSkip.js.map