@webority-technologies/mobile 0.0.5 → 0.0.6

package/README.md

@@ -396,7 +396,8 @@ For runnable usage of every component, see [`example/`](../../example/).
 
 ## Designing skeleton-aware components
 
-Presentational primitives (`Card`, `ListItem`, `Avatar`, `Badge`) accept an optional
+Presentational primitives (`Card`, `ListItem`, `Avatar`, `Badge`, `Banner`, `Chip`,
+`Rating`, `Stepper`, `ImageGallery`) accept an optional
 `loading?: boolean` prop. When `true`, the component renders its normal layout wrapped
 in `<SkeletonContent loading mode="auto">` — the walker replaces every `<Text>`,
 `<Image>`, and sized leaf `<View>` with a shimmer block matching the element's
@@ -420,20 +421,47 @@ Before / after with `Card`:
 
 ```tsx
 // Before — caller hand-rolls a placeholder branch
-{loading ? (
-  <SkeletonCard />
-) : (
-  <Card>
-    <Text>{site.name}</Text>
-    <Text>{site.address}</Text>
-  </Card>
-)}
+{
+  loading ? (
+    <SkeletonCard />
+  ) : (
+    <Card>
+      <Text>{site.name}</Text>
+      <Text>{site.address}</Text>
+    </Card>
+  );
+}
 
 // After — Card itself is skeleton-aware
 <Card loading={loading}>
   <Text>{site?.name ?? ' '}</Text>
   <Text>{site?.address ?? ' '}</Text>
-</Card>
+</Card>;
+```
+
+### Two flavours of `loading`
+
+Same prop name, different semantic by category:
+
+- **Display primitives** (`Card`, `ListItem`, `Avatar`, `Badge`, `Banner`, `Chip`, `Rating`,
+  `Stepper`, `ImageGallery`) — `loading={true}` renders the component as a skeleton placeholder
+  via `SkeletonContent`'s auto walker. Use when the data driving the component is still being
+  fetched.
+- **Interactive triggers** (`Button`) — `loading={true}` swaps the label for an inline `Spinner`,
+  hides leading/trailing icons, and disables press handling. The button keeps its footprint and
+  visual style. Use when an action is in flight (submit, save, delete) — pending action, not
+  data fetch.
+
+Before / after with `Button`:
+
+```tsx
+// Before — caller swaps a separate spinner in
+{
+  submitting ? <Spinner size="small" /> : <Button title="Save" onPress={save} />;
+}
+
+// After — Button itself signals the in-flight action
+<Button title="Save" loading={submitting} onPress={save} />;
 ```
 
 ---

package/lib/commonjs/components/Accordion/Accordion.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
+var _index2 = require("../Skeleton/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); }
 const AccordionGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -92,7 +93,8 @@ const Accordion = props => {
     style,
     headerStyle,
     contentStyle,
-    testID
+    testID,
+    loading = false
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
@@ -158,6 +160,23 @@ const Accordion = props => {
     backgroundColor: theme.colors.background.elevated,
     borderRadius: theme.radius.md
   }] : null;
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      style: [cardStyle, style],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.header,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.title, {
+            fontSize: theme.typography.fontSize.base
+          }],
+          numberOfLines: 1,
+          children: title ?? ' '
+        })
+      })
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [cardStyle, style],
     testID: testID,

package/lib/commonjs/components/Banner/Banner.js

@@ -7,6 +7,7 @@ exports.default = exports.Banner = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
+var _index2 = require("../Skeleton/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); }
 const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
@@ -20,6 +21,7 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     onDismiss,
     visible = true,
     animateMount = true,
+    loading = false,
     accessibilityLabel,
     style,
     testID
@@ -64,6 +66,8 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
   if (!mounted) return null;
+  const safeTitle = title ?? ' ';
+  const safeMessageString = typeof message === 'string' ? message ?? ' ' : '';
   const renderIcon = () => {
     if (icon === false) return null;
     if (icon) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -86,7 +90,7 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const messageString = typeof message === 'string' ? message : '';
   const builtA11y = accessibilityLabel ?? (title ? `${title}. ${messageString}` : messageString || undefined);
   const liveRegion = variant === 'error' ? 'assertive' : 'polite';
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  const rendered = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     ref: ref,
     accessibilityRole: 'alert',
     accessibilityLiveRegion: liveRegion,
@@ -109,7 +113,7 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       style: styles.row,
       children: [renderIcon(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.textBlock,
-        children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        children: [title || loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: {
             color: theme.colors.text.primary,
             fontSize: theme.typography.fontSize.base,
@@ -117,15 +121,15 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             lineHeight: 20
           },
           numberOfLines: 2,
-          children: title
-        }) : null, typeof message === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          children: safeTitle
+        }) : null, typeof message === 'string' || loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: {
             color: theme.colors.text.secondary,
             fontSize: theme.typography.fontSize.sm,
             lineHeight: 18,
             marginTop: title ? 2 : 0
           },
-          children: message
+          children: safeMessageString || ' '
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: {
             marginTop: title ? 2 : 0
@@ -179,6 +183,14 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       })
     }) : null]
   });
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Banner.displayName = 'Banner';
 const tintFor = (theme, variant) => {

package/lib/commonjs/components/Button/Button.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _usePressAnimation = require("../../hooks/usePressAnimation.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
+var _index2 = require("../Spinner/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); }
 const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
@@ -55,9 +56,11 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const accessibleLabel = accessibilityLabel ?? title;
   const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.contentRow,
-    children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+    children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Spinner, {
+      variant: "circular",
+      size: "small",
       color: variantStyles.textColor,
-      size: size === 'xs' || size === 'sm' ? 'small' : 'small'
+      accessibilityLabel: "Loading"
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.iconLeft,

package/lib/commonjs/components/Carousel/Carousel.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _index3 = require("../Skeleton/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); }
 /**
@@ -54,7 +55,8 @@ const CarouselInner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     accessibilityLabel,
     testID,
     showThumbnails = false,
-    renderThumbnail
+    renderThumbnail,
+    loading = false
   } = props;
   const theme = (0, _index.useTheme)();
   const isControlled = typeof controlledIndex === 'number';
@@ -215,6 +217,21 @@ const CarouselInner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     offset: slideStride * i,
     index: i
   }), [slideStride]);
+  if (loading) {
+    const slideWidth = itemWidth === 'screen' ? containerWidth || 320 : itemWidth;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      style: [styles.container, containerStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: slideWidth,
+          height: 160,
+          borderRadius: 12
+        }
+      })
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.container, containerStyle],
     onLayout: e => setContainerWidth(e.nativeEvent.layout.width),

package/lib/commonjs/components/Chip/Chip.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _usePressAnimation = require("../../hooks/usePressAnimation.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
+var _index2 = require("../Skeleton/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); }
 const toneFor = (theme, tone) => {
@@ -101,6 +102,7 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     tone = 'neutral',
     size = 'md',
     disabled = false,
+    loading = false,
     accessibilityLabel,
     style,
     textStyle,
@@ -159,7 +161,7 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
         fontWeight: theme.typography.fontWeight.medium
       }, textStyle],
       numberOfLines: 1,
-      children: label
+      children: label ?? ' '
     }), onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
       onPress: handleClose,
       disabled: disabled,
@@ -200,8 +202,9 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     borderColor,
     opacity: disabled ? 0.55 : 1
   };
+  let rendered;
   if (isPressable) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: {
         transform: [{
           scale
@@ -233,20 +236,29 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
         children: content
       })
     });
+  } else {
+    rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ref: ref,
+      style: [styles.base, baseStyle, style],
+      accessible: true,
+      accessibilityRole: "text",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: {
+        selected,
+        disabled
+      },
+      testID: testID,
+      children: content
+    });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    ref: ref,
-    style: [styles.base, baseStyle, style],
-    accessible: true,
-    accessibilityRole: "text",
-    accessibilityLabel: a11yLabel,
-    accessibilityState: {
-      selected,
-      disabled
-    },
-    testID: testID,
-    children: content
-  });
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Chip.displayName = 'Chip';
 const styles = _reactNative.StyleSheet.create({

package/lib/commonjs/components/ImageGallery/ImageGallery.js

@@ -10,8 +10,9 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _index = require("../Carousel/index.js");
 var _index2 = require("../AppIcon/index.js");
-var _index3 = require("../../theme/index.js");
-var _index4 = require("../../utils/index.js");
+var _index3 = require("../Skeleton/index.js");
+var _index4 = require("../../theme/index.js");
+var _index5 = require("../../utils/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); }
 /**
@@ -49,11 +50,12 @@ const ImageGallery = ({
   enableLightbox = true,
   enablePinchZoom = true,
   onIndexChange,
+  loading = false,
   accessibilityLabel,
   containerStyle,
   testID
 }) => {
-  const theme = (0, _index3.useTheme)();
+  const theme = (0, _index4.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const [currentIndex, setCurrentIndex] = (0, _react.useState)(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
   const [lightboxOpen, setLightboxOpen] = (0, _react.useState)(false);
@@ -63,11 +65,11 @@ const ImageGallery = ({
   }, [onIndexChange]);
   const openLightbox = (0, _react.useCallback)(() => {
     if (!enableLightbox) return;
-    (0, _index4.triggerHaptic)('selection');
+    (0, _index5.triggerHaptic)('selection');
     setLightboxOpen(true);
   }, [enableLightbox]);
   const closeLightbox = (0, _react.useCallback)(() => {
-    (0, _index4.triggerHaptic)('selection');
+    (0, _index5.triggerHaptic)('selection');
     setLightboxOpen(false);
   }, []);
   const renderImage = (0, _react.useCallback)((image, idx) => {
@@ -90,7 +92,7 @@ const ImageGallery = ({
     style: styles.thumbnailImage,
     resizeMode: "cover"
   }), [styles]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  const rendered = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.container, containerStyle],
     testID: testID,
     accessibilityLabel: accessibilityLabel ?? 'Image gallery',
@@ -125,6 +127,14 @@ const ImageGallery = ({
       onIndexChange: handleIndexChange
     }) : null]
   });
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 };
 exports.ImageGallery = ImageGallery;
 ImageGallery.displayName = 'ImageGallery';
@@ -140,13 +150,13 @@ const Lightbox = ({
   onClose,
   onIndexChange
 }) => {
-  const theme = (0, _index3.useTheme)();
+  const theme = (0, _index4.useTheme)();
   const styles = (0, _react.useMemo)(() => buildLightboxStyles(theme), [theme]);
   const carouselRef = (0, _react.useRef)(null);
   const [activeIndex, setActiveIndex] = (0, _react.useState)(initialIndex);
   const handleSwipe = (0, _react.useCallback)(idx => {
     if (idx !== activeIndex) {
-      (0, _index4.triggerHaptic)('selection');
+      (0, _index5.triggerHaptic)('selection');
       setActiveIndex(idx);
       onIndexChange(idx);
     }
@@ -255,7 +265,7 @@ const ZoomableImage = ({
       savedTranslateY.value = 0;
     }
   }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
-  const triggerImpact = (0, _react.useCallback)(() => (0, _index4.triggerHaptic)('impactLight'), []);
+  const triggerImpact = (0, _react.useCallback)(() => (0, _index5.triggerHaptic)('impactLight'), []);
   const pinch = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pinch().enabled(enabled).onStart(() => {
     'worklet';
 

package/lib/commonjs/components/Rating/Rating.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
+var _index2 = require("../Skeleton/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); }
 const sizePxMap = {
@@ -83,6 +84,7 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     size = 'md',
     tone = 'warning',
     label,
+    loading = false,
     accessibilityLabel,
     style,
     testID
@@ -168,7 +170,7 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       children: star
     }, i));
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  const rendered = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.wrapper, style],
     ref: ref,
     testID: testID,
@@ -198,6 +200,14 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       children: stars
     })]
   });
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Rating.displayName = 'Rating';
 const starStyles = _reactNative.StyleSheet.create({

package/lib/commonjs/components/Stepper/Stepper.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
+var _index2 = require("../Skeleton/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); }
 const CIRCLE_SIZE = 24;
@@ -164,6 +165,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
     onStepPress,
     variant = 'horizontal',
     tone = 'primary',
+    loading = false,
     accessibilityLabel,
     style,
     testID
@@ -238,7 +240,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
             fontSize: theme.typography.fontSize.xs
           }],
           numberOfLines: 1,
-          children: step.label
+          children: step?.label ?? ' '
         })]
       }, step.key);
     })]
@@ -286,7 +288,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
               fontWeight: theme.typography.fontWeight.semibold
             }],
             numberOfLines: 1,
-            children: step.label
+            children: step?.label ?? ' '
           }), step.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.vDescription, {
               color: theme.colors.text.secondary,
@@ -299,7 +301,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
       }, step.key);
     })
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  const rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     ref: ref,
     style: [styles.container, style],
     testID: testID,
@@ -312,6 +314,14 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
     },
     children: variant === 'horizontal' ? renderHorizontal() : renderVertical()
   });
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Stepper.displayName = 'Stepper';
 const buildStyles = theme => _reactNative.StyleSheet.create({

package/lib/module/components/Accordion/Accordion.js

@@ -4,6 +4,7 @@ import React, { createContext, useCallback, useContext, useEffect, useMemo, useR
 import { Animated, Easing, LayoutAnimation, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionGroupContext = /*#__PURE__*/createContext(null);
 const useAccordionGroup = () => useContext(AccordionGroupContext);
@@ -86,7 +87,8 @@ const Accordion = props => {
     style,
     headerStyle,
     contentStyle,
-    testID
+    testID,
+    loading = false
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
@@ -152,6 +154,23 @@ const Accordion = props => {
     backgroundColor: theme.colors.background.elevated,
     borderRadius: theme.radius.md
   }] : null;
+  if (loading) {
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      style: [cardStyle, style],
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.header,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.title, {
+            fontSize: theme.typography.fontSize.base
+          }],
+          numberOfLines: 1,
+          children: title ?? ' '
+        })
+      })
+    });
+  }
   return /*#__PURE__*/_jsxs(View, {
     style: [cardStyle, style],
     testID: testID,

package/lib/module/components/Banner/Banner.js

@@ -3,6 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
+import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Banner = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -15,6 +16,7 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
     onDismiss,
     visible = true,
     animateMount = true,
+    loading = false,
     accessibilityLabel,
     style,
     testID
@@ -59,6 +61,8 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
   if (!mounted) return null;
+  const safeTitle = title ?? ' ';
+  const safeMessageString = typeof message === 'string' ? message ?? ' ' : '';
   const renderIcon = () => {
     if (icon === false) return null;
     if (icon) return /*#__PURE__*/_jsx(View, {
@@ -81,7 +85,7 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
   const messageString = typeof message === 'string' ? message : '';
   const builtA11y = accessibilityLabel ?? (title ? `${title}. ${messageString}` : messageString || undefined);
   const liveRegion = variant === 'error' ? 'assertive' : 'polite';
-  return /*#__PURE__*/_jsxs(Animated.View, {
+  const rendered = /*#__PURE__*/_jsxs(Animated.View, {
     ref: ref,
     accessibilityRole: 'alert',
     accessibilityLiveRegion: liveRegion,
@@ -104,7 +108,7 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
       style: styles.row,
       children: [renderIcon(), /*#__PURE__*/_jsxs(View, {
         style: styles.textBlock,
-        children: [title ? /*#__PURE__*/_jsx(Text, {
+        children: [title || loading ? /*#__PURE__*/_jsx(Text, {
           style: {
             color: theme.colors.text.primary,
             fontSize: theme.typography.fontSize.base,
@@ -112,15 +116,15 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
             lineHeight: 20
           },
           numberOfLines: 2,
-          children: title
-        }) : null, typeof message === 'string' ? /*#__PURE__*/_jsx(Text, {
+          children: safeTitle
+        }) : null, typeof message === 'string' || loading ? /*#__PURE__*/_jsx(Text, {
           style: {
             color: theme.colors.text.secondary,
             fontSize: theme.typography.fontSize.sm,
             lineHeight: 18,
             marginTop: title ? 2 : 0
           },
-          children: message
+          children: safeMessageString || ' '
         }) : /*#__PURE__*/_jsx(View, {
           style: {
             marginTop: title ? 2 : 0
@@ -174,6 +178,14 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
       })
     }) : null]
   });
+  if (loading) {
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Banner.displayName = 'Banner';
 const tintFor = (theme, variant) => {

package/lib/module/components/Button/Button.js

@@ -1,10 +1,11 @@
 "use strict";
 
 import React, { forwardRef, useMemo } from 'react';
-import { ActivityIndicator, Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { Spinner } from "../Spinner/index.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const Button = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -50,9 +51,11 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
   const accessibleLabel = accessibilityLabel ?? title;
   const content = /*#__PURE__*/_jsx(View, {
     style: styles.contentRow,
-    children: loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+    children: loading ? /*#__PURE__*/_jsx(Spinner, {
+      variant: "circular",
+      size: "small",
       color: variantStyles.textColor,
-      size: size === 'xs' || size === 'sm' ? 'small' : 'small'
+      accessibilityLabel: "Loading"
     }) : /*#__PURE__*/_jsxs(_Fragment, {
       children: [leftIcon ? /*#__PURE__*/_jsx(View, {
         style: styles.iconLeft,

package/lib/module/components/Carousel/Carousel.js

@@ -26,6 +26,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo
 import { Animated, Dimensions, FlatList, Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
+import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // We intentionally use a generic forwardRef wrapper — the inner component is
 // untyped at the generic level (forwardRef can't preserve generics in TS yet),
@@ -49,7 +50,8 @@ const CarouselInner = /*#__PURE__*/forwardRef((props, ref) => {
     accessibilityLabel,
     testID,
     showThumbnails = false,
-    renderThumbnail
+    renderThumbnail,
+    loading = false
   } = props;
   const theme = useTheme();
   const isControlled = typeof controlledIndex === 'number';
@@ -210,6 +212,21 @@ const CarouselInner = /*#__PURE__*/forwardRef((props, ref) => {
     offset: slideStride * i,
     index: i
   }), [slideStride]);
+  if (loading) {
+    const slideWidth = itemWidth === 'screen' ? containerWidth || 320 : itemWidth;
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      style: [styles.container, containerStyle],
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          width: slideWidth,
+          height: 160,
+          borderRadius: 12
+        }
+      })
+    });
+  }
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, containerStyle],
     onLayout: e => setContainerWidth(e.nativeEvent.layout.width),

package/lib/module/components/Chip/Chip.js

@@ -5,6 +5,7 @@ import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const toneFor = (theme, tone) => {
   switch (tone) {
@@ -96,6 +97,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
     tone = 'neutral',
     size = 'md',
     disabled = false,
+    loading = false,
     accessibilityLabel,
     style,
     textStyle,
@@ -154,7 +156,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
         fontWeight: theme.typography.fontWeight.medium
       }, textStyle],
       numberOfLines: 1,
-      children: label
+      children: label ?? ' '
     }), onClose ? /*#__PURE__*/_jsx(Pressable, {
       onPress: handleClose,
       disabled: disabled,
@@ -195,8 +197,9 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
     borderColor,
     opacity: disabled ? 0.55 : 1
   };
+  let rendered;
   if (isPressable) {
-    return /*#__PURE__*/_jsx(Animated.View, {
+    rendered = /*#__PURE__*/_jsx(Animated.View, {
       style: {
         transform: [{
           scale
@@ -228,20 +231,29 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
         children: content
       })
     });
+  } else {
+    rendered = /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      style: [styles.base, baseStyle, style],
+      accessible: true,
+      accessibilityRole: "text",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: {
+        selected,
+        disabled
+      },
+      testID: testID,
+      children: content
+    });
   }
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [styles.base, baseStyle, style],
-    accessible: true,
-    accessibilityRole: "text",
-    accessibilityLabel: a11yLabel,
-    accessibilityState: {
-      selected,
-      disabled
-    },
-    testID: testID,
-    children: content
-  });
+  if (loading) {
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Chip.displayName = 'Chip';
 const styles = StyleSheet.create({

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -25,6 +25,7 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { Carousel } from "../Carousel/index.js";
 import { AppIcon } from "../AppIcon/index.js";
+import { SkeletonContent } from "../Skeleton/index.js";
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -44,6 +45,7 @@ const ImageGallery = ({
   enableLightbox = true,
   enablePinchZoom = true,
   onIndexChange,
+  loading = false,
   accessibilityLabel,
   containerStyle,
   testID
@@ -85,7 +87,7 @@ const ImageGallery = ({
     style: styles.thumbnailImage,
     resizeMode: "cover"
   }), [styles]);
-  return /*#__PURE__*/_jsxs(View, {
+  const rendered = /*#__PURE__*/_jsxs(View, {
     style: [styles.container, containerStyle],
     testID: testID,
     accessibilityLabel: accessibilityLabel ?? 'Image gallery',
@@ -120,6 +122,14 @@ const ImageGallery = ({
       onIndexChange: handleIndexChange
     }) : null]
   });
+  if (loading) {
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 };
 ImageGallery.displayName = 'ImageGallery';
 

package/lib/module/components/Rating/Rating.js

@@ -4,6 +4,7 @@ import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizePxMap = {
   sm: 16,
@@ -78,6 +79,7 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
     size = 'md',
     tone = 'warning',
     label,
+    loading = false,
     accessibilityLabel,
     style,
     testID
@@ -163,7 +165,7 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
       children: star
     }, i));
   }
-  return /*#__PURE__*/_jsxs(View, {
+  const rendered = /*#__PURE__*/_jsxs(View, {
     style: [styles.wrapper, style],
     ref: ref,
     testID: testID,
@@ -193,6 +195,14 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
       children: stars
     })]
   });
+  if (loading) {
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Rating.displayName = 'Rating';
 const starStyles = StyleSheet.create({

package/lib/module/components/Stepper/Stepper.js

@@ -4,6 +4,7 @@ import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CIRCLE_SIZE = 24;
 const PULSE_SIZE = 32;
@@ -159,6 +160,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
     onStepPress,
     variant = 'horizontal',
     tone = 'primary',
+    loading = false,
     accessibilityLabel,
     style,
     testID
@@ -233,7 +235,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
             fontSize: theme.typography.fontSize.xs
           }],
           numberOfLines: 1,
-          children: step.label
+          children: step?.label ?? ' '
         })]
       }, step.key);
     })]
@@ -281,7 +283,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
               fontWeight: theme.typography.fontWeight.semibold
             }],
             numberOfLines: 1,
-            children: step.label
+            children: step?.label ?? ' '
           }), step.description ? /*#__PURE__*/_jsx(Text, {
             style: [styles.vDescription, {
               color: theme.colors.text.secondary,
@@ -294,7 +296,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
       }, step.key);
     })
   });
-  return /*#__PURE__*/_jsx(View, {
+  const rendered = /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [styles.container, style],
     testID: testID,
@@ -307,6 +309,14 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
     },
     children: variant === 'horizontal' ? renderHorizontal() : renderVertical()
   });
+  if (loading) {
+    return /*#__PURE__*/_jsx(SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Stepper.displayName = 'Stepper';
 const buildStyles = theme => StyleSheet.create({

package/lib/typescript/commonjs/components/Accordion/Accordion.d.ts

@@ -16,6 +16,13 @@ export interface AccordionProps {
     headerStyle?: StyleProp<ViewStyle>;
     contentStyle?: StyleProp<ViewStyle>;
     testID?: string;
+    /**
+     * When true, renders the accordion as a skeleton placeholder via
+     * SkeletonContent's auto walker. The header title and any sized content
+     * leaves are replaced with shimmer blocks. Use this when the data driving
+     * the accordion is still being fetched.
+     */
+    loading?: boolean;
 }
 export interface AccordionGroupProps {
     children: React.ReactNode;

package/lib/typescript/commonjs/components/Banner/Banner.d.ts

@@ -17,6 +17,12 @@ export interface BannerProps {
     onDismiss?: () => void;
     visible?: boolean;
     animateMount?: boolean;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     testID?: string;

package/lib/typescript/commonjs/components/Button/Button.d.ts

@@ -11,6 +11,11 @@ export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'>
     variant?: ButtonVariant;
     tone?: ButtonTone;
     size?: ButtonSize;
+    /**
+     * When true, the button is disabled and renders a Spinner in place of the title (icons hidden).
+     * Use for in-flight submissions. This is **not** SkeletonContent — interactive controls signal
+     * pending action with an inline spinner, not a placeholder shimmer.
+     */
     loading?: boolean;
     disabled?: boolean;
     fullWidth?: boolean;

package/lib/typescript/commonjs/components/Carousel/Carousel.d.ts

@@ -52,6 +52,13 @@ export interface CarouselProps<T = unknown> {
      * shape is `{ uri: string }`, otherwise a numbered placeholder.
      */
     renderThumbnail?: (item: T, index: number) => React.ReactNode;
+    /**
+     * When true, renders the carousel as a skeleton placeholder via
+     * SkeletonContent's auto walker. The walker replaces Text/Image/sized View
+     * leaves in the rendered slides with shimmer blocks. Use this when the data
+     * driving the carousel is still being fetched.
+     */
+    loading?: boolean;
 }
 export interface CarouselRef {
     scrollTo: (index: number, animated?: boolean) => void;

package/lib/typescript/commonjs/components/Chip/Chip.d.ts

@@ -14,6 +14,12 @@ export interface ChipProps {
     tone?: ChipTone;
     size?: ChipSize;
     disabled?: boolean;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;

package/lib/typescript/commonjs/components/ImageGallery/ImageGallery.d.ts

@@ -31,6 +31,12 @@ export interface ImageGalleryProps {
     enableLightbox?: boolean;
     enablePinchZoom?: boolean;
     onIndexChange?: (idx: number) => void;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     containerStyle?: StyleProp<ViewStyle>;
     testID?: string;

package/lib/typescript/commonjs/components/Rating/Rating.d.ts

@@ -12,6 +12,12 @@ export interface RatingProps {
     size?: RatingSize;
     tone?: RatingTone;
     label?: string;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     testID?: string;

package/lib/typescript/commonjs/components/Stepper/Stepper.d.ts

@@ -15,6 +15,12 @@ export interface StepperProps {
     onStepPress?: (index: number) => void;
     variant?: StepperVariant;
     tone?: StepperTone;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     testID?: string;

package/lib/typescript/module/components/Accordion/Accordion.d.ts

@@ -16,6 +16,13 @@ export interface AccordionProps {
     headerStyle?: StyleProp<ViewStyle>;
     contentStyle?: StyleProp<ViewStyle>;
     testID?: string;
+    /**
+     * When true, renders the accordion as a skeleton placeholder via
+     * SkeletonContent's auto walker. The header title and any sized content
+     * leaves are replaced with shimmer blocks. Use this when the data driving
+     * the accordion is still being fetched.
+     */
+    loading?: boolean;
 }
 export interface AccordionGroupProps {
     children: React.ReactNode;

package/lib/typescript/module/components/Banner/Banner.d.ts

@@ -17,6 +17,12 @@ export interface BannerProps {
     onDismiss?: () => void;
     visible?: boolean;
     animateMount?: boolean;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     testID?: string;

package/lib/typescript/module/components/Button/Button.d.ts

@@ -11,6 +11,11 @@ export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'>
     variant?: ButtonVariant;
     tone?: ButtonTone;
     size?: ButtonSize;
+    /**
+     * When true, the button is disabled and renders a Spinner in place of the title (icons hidden).
+     * Use for in-flight submissions. This is **not** SkeletonContent — interactive controls signal
+     * pending action with an inline spinner, not a placeholder shimmer.
+     */
     loading?: boolean;
     disabled?: boolean;
     fullWidth?: boolean;

package/lib/typescript/module/components/Carousel/Carousel.d.ts

@@ -52,6 +52,13 @@ export interface CarouselProps<T = unknown> {
      * shape is `{ uri: string }`, otherwise a numbered placeholder.
      */
     renderThumbnail?: (item: T, index: number) => React.ReactNode;
+    /**
+     * When true, renders the carousel as a skeleton placeholder via
+     * SkeletonContent's auto walker. The walker replaces Text/Image/sized View
+     * leaves in the rendered slides with shimmer blocks. Use this when the data
+     * driving the carousel is still being fetched.
+     */
+    loading?: boolean;
 }
 export interface CarouselRef {
     scrollTo: (index: number, animated?: boolean) => void;

package/lib/typescript/module/components/Chip/Chip.d.ts

@@ -14,6 +14,12 @@ export interface ChipProps {
     tone?: ChipTone;
     size?: ChipSize;
     disabled?: boolean;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;

package/lib/typescript/module/components/ImageGallery/ImageGallery.d.ts

@@ -31,6 +31,12 @@ export interface ImageGalleryProps {
     enableLightbox?: boolean;
     enablePinchZoom?: boolean;
     onIndexChange?: (idx: number) => void;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     containerStyle?: StyleProp<ViewStyle>;
     testID?: string;

package/lib/typescript/module/components/Rating/Rating.d.ts

@@ -12,6 +12,12 @@ export interface RatingProps {
     size?: RatingSize;
     tone?: RatingTone;
     label?: string;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     testID?: string;

package/lib/typescript/module/components/Stepper/Stepper.d.ts

@@ -15,6 +15,12 @@ export interface StepperProps {
     onStepPress?: (index: number) => void;
     variant?: StepperVariant;
     tone?: StepperTone;
+    /**
+     * When true, renders the component as a skeleton placeholder via SkeletonContent's auto walker.
+     * Component still renders its normal layout — the walker replaces Text/Image/sized View leaves
+     * with shimmer blocks. Use this when the data driving the component is still being fetched.
+     */
+    loading?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     testID?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Beautiful, animated, accessible React Native components plus API/auth/logging/network/storage utilities for Webority projects.",
   "keywords": [
     "react-native",