@webority-technologies/mobile 0.0.5 → 0.0.7

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/Skeleton/Skeleton.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 _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); }
 const SPEED_DURATION = {
@@ -33,23 +34,30 @@ const resolveWidth = width => {
 const Skeleton = ({
   width = '100%',
   height = 16,
-  radius = 'sm',
-  variant = 'shimmer',
-  speed = 'normal',
+  radius,
+  variant,
+  speed,
+  colors,
   style,
   testID
 }) => {
   const theme = (0, _index.useTheme)();
+  const defaults = (0, _SkeletonProvider.useSkeletonDefaults)();
+  const resolvedVariant = variant ?? defaults.variant ?? 'shimmer';
+  const resolvedSpeed = speed ?? defaults.speed ?? 'normal';
+  const resolvedRadiusToken = radius ?? defaults.radius ?? 'sm';
+  const backgroundColor = colors?.background ?? defaults.colors?.background ?? theme.colors.skeleton.background;
+  const highlightColor = colors?.highlight ?? defaults.colors?.highlight ?? theme.colors.skeleton.highlight;
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const borderRadius = resolveRadius(theme, radius);
+  const borderRadius = resolveRadius(theme, resolvedRadiusToken);
   const resolvedWidth = resolveWidth(width);
   const resolvedHeight = _index2.Responsive.size(height);
   const progress = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
   const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
     progress.setValue(0);
-    const duration = variant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[speed];
-    const animation = variant === 'pulse' ? _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(progress, {
+    const duration = resolvedVariant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[resolvedSpeed];
+    const animation = resolvedVariant === 'pulse' ? _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(progress, {
       toValue: 1,
       duration: duration / 2,
       easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
@@ -69,17 +77,17 @@ const Skeleton = ({
     return () => {
       animation.stop();
     };
-  }, [progress, speed, variant]);
+  }, [progress, resolvedSpeed, resolvedVariant]);
   const handleLayout = event => {
     const next = event.nativeEvent.layout.width;
     if (next !== containerWidth) setContainerWidth(next);
   };
   const overlay = (0, _react.useMemo)(() => {
-    if (variant === 'pulse') {
+    if (resolvedVariant === 'pulse') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
         pointerEvents: "none",
         style: [_reactNative.StyleSheet.absoluteFillObject, {
-          backgroundColor: theme.colors.skeleton.highlight,
+          backgroundColor: highlightColor,
           opacity: progress.interpolate({
             inputRange: [0, 1],
             outputRange: [0, 0.6]
@@ -97,13 +105,13 @@ const Skeleton = ({
       pointerEvents: "none",
       style: [styles.shimmer, {
         width: highlightWidth,
-        backgroundColor: theme.colors.skeleton.highlight,
+        backgroundColor: highlightColor,
         transform: [{
           translateX
         }]
       }]
     });
-  }, [containerWidth, progress, styles.shimmer, theme.colors.skeleton.highlight, variant]);
+  }, [containerWidth, progress, styles.shimmer, highlightColor, resolvedVariant]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     onLayout: handleLayout,
     accessible: true,
@@ -115,7 +123,7 @@ const Skeleton = ({
       width: resolvedWidth,
       height: resolvedHeight,
       borderRadius,
-      backgroundColor: theme.colors.skeleton.background
+      backgroundColor
     }, style],
     children: overlay
   });

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

@@ -7,6 +7,7 @@ exports.default = exports.SkeletonContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _Skeleton = require("./Skeleton.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); }
 const flattenStyle = style => {
@@ -27,7 +28,7 @@ const resolveRadius = (raw, fallback) => {
   if (typeof raw === 'number') return raw;
   return fallback;
 };
-const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
+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, {
@@ -35,11 +36,12 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       height: 14,
       radius: "sm",
       variant: variant,
-      speed: speed
+      speed: speed,
+      colors: colors
     }, `${keyHint}-text`);
   }
   if (Array.isArray(node)) {
-    return _react.Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, `${keyHint}-${index}`));
+    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;
@@ -47,6 +49,13 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
   const elementStyle = flattenStyle(props.style);
   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`
+    });
+  }
+
   // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius
   if (elementType === _reactNative.Image) {
     const width = resolveWidth(elementStyle.width, '100%');
@@ -58,6 +67,7 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       radius: radius,
       variant: variant,
       speed: speed,
+      colors: colors,
       style: {
         margin: typeof elementStyle.margin === 'number' ? elementStyle.margin : undefined
       }
@@ -74,6 +84,7 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       radius: "sm",
       variant: variant,
       speed: speed,
+      colors: colors,
       style: {
         marginVertical: 2
       }
@@ -84,7 +95,7 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
   if (props.children != null) {
     return /*#__PURE__*/(0, _react.cloneElement)(element, {
       key: `${keyHint}-w`
-    }, skeletonizeNode(props.children, variant, speed, `${keyHint}-c`));
+    }, skeletonizeNode(props.children, variant, speed, colors, `${keyHint}-c`));
   }
 
   // Leaf <View /> with explicit dimensions → skeleton block
@@ -97,7 +108,8 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       height: height,
       radius: radius,
       variant: variant,
-      speed: speed
+      speed: speed,
+      colors: colors
     }, `${keyHint}-vw`);
   }
 
@@ -110,10 +122,11 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
 const SkeletonContent = ({
   loading,
   children,
-  variant = 'shimmer',
-  speed = 'normal',
+  variant,
+  speed,
   mode = 'auto',
   count = 1,
+  colors,
   style,
   testID
 }) => {
@@ -133,6 +146,7 @@ const SkeletonContent = ({
       testID: testID,
       variant: variant,
       speed: speed,
+      colors: colors,
       children: repeated
     });
   }
@@ -143,7 +157,7 @@ const SkeletonContent = ({
     accessibilityLabel: "Loading",
     accessibilityRole: "progressbar",
     accessibilityLiveRegion: "polite",
-    children: skeletonizeNode(repeated, variant, speed)
+    children: skeletonizeNode(repeated, variant, speed, colors)
   });
 };
 exports.SkeletonContent = SkeletonContent;
@@ -152,6 +166,7 @@ const BlockSkeleton = ({
   children,
   variant,
   speed,
+  colors,
   style,
   testID
 }) => {
@@ -188,7 +203,8 @@ const BlockSkeleton = ({
         height: size.height,
         radius: "md",
         variant: variant,
-        speed: speed
+        speed: speed,
+        colors: colors
       })
     }) : null]
   });

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

@@ -7,6 +7,7 @@ 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 }; }
 /**
@@ -32,9 +33,10 @@ function SkeletonListInner(props) {
     data,
     renderItem,
     renderPlaceholder,
-    placeholderCount = 3,
+    placeholderCount,
     variant,
     speed,
+    colors,
     placeholderContainerStyle,
     horizontal,
     contentContainerStyle,
@@ -42,9 +44,11 @@ function SkeletonListInner(props) {
     testID,
     ...rest
   } = props;
+  const defaults = (0, _SkeletonProvider.useSkeletonDefaults)();
+  const resolvedCount = placeholderCount ?? defaults.placeholderCount ?? 3;
   if (loading) {
     const slots = Array.from({
-      length: Math.max(0, placeholderCount)
+      length: Math.max(0, resolvedCount)
     }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
       children: renderPlaceholder ? renderPlaceholder(index) : null
     }, `sk-list-${index}`));
@@ -52,6 +56,7 @@ function SkeletonListInner(props) {
       loading: true,
       variant: variant,
       speed: speed,
+      colors: colors,
       style: style,
       testID: testID,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSkeletonDefaults = exports.SkeletonProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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.
+ */
+
+const SkeletonDefaultsContext = /*#__PURE__*/(0, _react.createContext)({});
+const SkeletonProvider = ({
+  children,
+  variant,
+  speed,
+  placeholderCount,
+  radius,
+  colors
+}) => {
+  const value = (0, _react.useMemo)(() => ({
+    variant,
+    speed,
+    placeholderCount,
+    radius,
+    colors
+  }), [variant, speed, placeholderCount, radius, colors]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonDefaultsContext.Provider, {
+    value: value,
+    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.
+ */
+const useSkeletonDefaults = () => {
+  return (0, _react.useContext)(SkeletonDefaultsContext);
+};
+exports.useSkeletonDefaults = useSkeletonDefaults;
+//# 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

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

@@ -45,6 +45,18 @@ Object.defineProperty(exports, "SkeletonListItem", {
     return _Skeleton.SkeletonListItem;
   }
 });
+Object.defineProperty(exports, "SkeletonProvider", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonProvider.SkeletonProvider;
+  }
+});
+Object.defineProperty(exports, "SkeletonSkip", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonSkip.SkeletonSkip;
+  }
+});
 Object.defineProperty(exports, "SkeletonText", {
   enumerable: true,
   get: function () {
@@ -57,8 +69,16 @@ Object.defineProperty(exports, "default", {
     return _Skeleton.default;
   }
 });
+Object.defineProperty(exports, "useSkeletonDefaults", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonProvider.useSkeletonDefaults;
+  }
+});
 var _Skeleton = _interopRequireWildcard(require("./Skeleton.js"));
 var _SkeletonContent = require("./SkeletonContent.js");
 var _SkeletonList = require("./SkeletonList.js");
+var _SkeletonProvider = require("./SkeletonProvider.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

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({