@webority-technologies/mobile 0.0.14 → 0.0.20

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

@@ -0,0 +1,117 @@
+"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.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [speed, enabled]);
+  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

@@ -6,10 +6,67 @@ Object.defineProperty(exports, "__esModule", {
 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 _SkeletonSkip = require("./SkeletonSkip.js");
+var _SkeletonProvider = require("./SkeletonProvider.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);
@@ -32,9 +89,9 @@ 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,
-      radius: "sm",
       variant: variant,
       speed: speed,
       colors: colors
@@ -46,18 +103,35 @@ const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
   if (! /*#__PURE__*/(0, _react.isValidElement)(node)) return null;
   const element = node;
   const props = element.props ?? {};
-  const elementStyle = flattenStyle(props.style);
   const elementType = element.type;
 
-  // <SkeletonSkip /> → opt-out marker; render its children unchanged
+  // <SkeletonSkip /> → opt-out marker; render its children unchanged.
   if (elementType === _SkeletonSkip.SkeletonSkip) {
     return /*#__PURE__*/(0, _react.cloneElement)(element, {
       key: `${keyHint}-skip`
     });
   }
 
-  // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius
+  // 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');
@@ -74,14 +148,15 @@ const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
     }, `${keyHint}-img`);
   }
 
-  // <Text /> → text-line skeleton matching font size
+  // <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),
-      radius: "sm",
       variant: variant,
       speed: speed,
       colors: colors,
@@ -91,30 +166,36 @@ const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
     }, `${keyHint}-txt`);
   }
 
-  // Element with children → recurse, preserving the wrapper (View, Pressable, custom layouts)
+  // 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 && (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`);
+  // 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) → leave as-is.
-  // Consumers should use mode='block' when wrapping such elements.
+  // 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`
   });
@@ -122,92 +203,94 @@ const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
 const SkeletonContent = ({
   loading,
   children,
+  placeholder,
   variant,
   speed,
-  mode = 'auto',
   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)(() => {
+    if (wasLoadingRef.current && !loading) {
+      fadeAnim.setValue(0);
+      _reactNative.Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: resolvedFadeDuration,
+        useNativeDriver: true
+      }).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;
+  }, [loading, fadeAnim, resolvedFadeDuration]);
   if (!loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    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;
-  if (mode === 'block') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockSkeleton, {
-      style: style,
-      testID: testID,
-      variant: variant,
-      speed: speed,
-      colors: colors,
-      children: repeated
-    });
-  }
   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';
-const BlockSkeleton = ({
-  children,
-  variant,
-  speed,
-  colors,
-  style,
-  testID
-}) => {
-  const [size, setSize] = (0, _react.useState)(null);
-  const onLayout = event => {
-    const {
-      width,
-      height
-    } = event.nativeEvent.layout;
-    if (!size || size.width !== width || size.height !== height) {
-      setSize({
-        width,
-        height
-      });
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: style,
-    testID: testID,
-    onLayout: onLayout,
-    accessible: true,
-    accessibilityLabel: "Loading",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        opacity: 0
-      },
-      pointerEvents: "none",
-      children: children
-    }), size != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: _reactNative.StyleSheet.absoluteFill,
-      pointerEvents: "none",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
-        width: size.width,
-        height: size.height,
-        radius: "md",
-        variant: variant,
-        speed: speed,
-        colors: colors
-      })
-    }) : null]
-  });
-};
 var _default = exports.default = SkeletonContent;
 //# sourceMappingURL=SkeletonContent.js.map

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

@@ -3,14 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSkeletonDefaults = exports.SkeletonProvider = void 0;
+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); }
 /**
- * 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.
+ * 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)({});
@@ -20,29 +38,73 @@ const SkeletonProvider = ({
   speed,
   placeholderCount,
   radius,
-  colors
+  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
-  }), [variant, speed, placeholderCount, radius, colors]);
+    colors,
+    fadeDuration,
+    animation
+  }), [variant, speed, placeholderCount, radius, colors, fadeDuration, animation]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonDefaultsContext.Provider, {
     value: value,
-    children: children
+    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.
+ * 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/index.js

@@ -9,22 +9,16 @@ Object.defineProperty(exports, "Skeleton", {
     return _Skeleton.Skeleton;
   }
 });
-Object.defineProperty(exports, "SkeletonAvatar", {
-  enumerable: true,
-  get: function () {
-    return _Skeleton.SkeletonAvatar;
-  }
-});
-Object.defineProperty(exports, "SkeletonCard", {
+Object.defineProperty(exports, "SkeletonCircle", {
   enumerable: true,
   get: function () {
-    return _Skeleton.SkeletonCard;
+    return _Skeleton.SkeletonCircle;
   }
 });
-Object.defineProperty(exports, "SkeletonCircle", {
+Object.defineProperty(exports, "SkeletonClockProvider", {
   enumerable: true,
   get: function () {
-    return _Skeleton.SkeletonCircle;
+    return _SkeletonClock.SkeletonClockProvider;
   }
 });
 Object.defineProperty(exports, "SkeletonContent", {
@@ -39,12 +33,6 @@ Object.defineProperty(exports, "SkeletonList", {
     return _SkeletonList.SkeletonList;
   }
 });
-Object.defineProperty(exports, "SkeletonListItem", {
-  enumerable: true,
-  get: function () {
-    return _Skeleton.SkeletonListItem;
-  }
-});
 Object.defineProperty(exports, "SkeletonProvider", {
   enumerable: true,
   get: function () {
@@ -69,6 +57,18 @@ Object.defineProperty(exports, "default", {
     return _Skeleton.default;
   }
 });
+Object.defineProperty(exports, "useReduceMotion", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonProvider.useReduceMotion;
+  }
+});
+Object.defineProperty(exports, "useSkeletonClock", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonClock.useSkeletonClock;
+  }
+});
 Object.defineProperty(exports, "useSkeletonDefaults", {
   enumerable: true,
   get: function () {
@@ -79,6 +79,7 @@ var _Skeleton = _interopRequireWildcard(require("./Skeleton.js"));
 var _SkeletonContent = require("./SkeletonContent.js");
 var _SkeletonList = require("./SkeletonList.js");
 var _SkeletonProvider = require("./SkeletonProvider.js");
+var _SkeletonClock = require("./SkeletonClock.js");
 var _SkeletonSkip = require("./SkeletonSkip.js");
 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); }
 //# sourceMappingURL=index.js.map