@webority-technologies/mobile 0.0.5 → 0.0.7

package/lib/commonjs/components/index.js

@@ -273,6 +273,18 @@ Object.defineProperty(exports, "SkeletonListItem", {
     return _index35.SkeletonListItem;
   }
 });
+Object.defineProperty(exports, "SkeletonProvider", {
+  enumerable: true,
+  get: function () {
+    return _index35.SkeletonProvider;
+  }
+});
+Object.defineProperty(exports, "SkeletonSkip", {
+  enumerable: true,
+  get: function () {
+    return _index35.SkeletonSkip;
+  }
+});
 Object.defineProperty(exports, "SkeletonText", {
   enumerable: true,
   get: function () {
@@ -345,6 +357,12 @@ Object.defineProperty(exports, "toast", {
     return _index41.toast;
   }
 });
+Object.defineProperty(exports, "useSkeletonDefaults", {
+  enumerable: true,
+  get: function () {
+    return _index35.useSkeletonDefaults;
+  }
+});
 Object.defineProperty(exports, "useToast", {
   enumerable: true,
   get: function () {

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/Skeleton/Skeleton.js

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
 import { Responsive } from "../../utils/index.js";
+import { useSkeletonDefaults } from "./SkeletonProvider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SPEED_DURATION = {
   slow: 1800,
@@ -28,23 +29,30 @@ const resolveWidth = width => {
 const Skeleton = ({
   width = '100%',
   height = 16,
-  radius = 'sm',
-  variant = 'shimmer',
-  speed = 'normal',
+  radius,
+  variant,
+  speed,
+  colors,
   style,
   testID
 }) => {
   const theme = useTheme();
+  const defaults = 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 = useMemo(() => buildStyles(theme), [theme]);
-  const borderRadius = resolveRadius(theme, radius);
+  const borderRadius = resolveRadius(theme, resolvedRadiusToken);
   const resolvedWidth = resolveWidth(width);
   const resolvedHeight = Responsive.size(height);
   const progress = useRef(new Animated.Value(0)).current;
   const [containerWidth, setContainerWidth] = useState(0);
   useEffect(() => {
     progress.setValue(0);
-    const duration = variant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[speed];
-    const animation = variant === 'pulse' ? Animated.loop(Animated.sequence([Animated.timing(progress, {
+    const duration = resolvedVariant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[resolvedSpeed];
+    const animation = resolvedVariant === 'pulse' ? Animated.loop(Animated.sequence([Animated.timing(progress, {
       toValue: 1,
       duration: duration / 2,
       easing: Easing.inOut(Easing.ease),
@@ -64,17 +72,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 = useMemo(() => {
-    if (variant === 'pulse') {
+    if (resolvedVariant === 'pulse') {
       return /*#__PURE__*/_jsx(Animated.View, {
         pointerEvents: "none",
         style: [StyleSheet.absoluteFillObject, {
-          backgroundColor: theme.colors.skeleton.highlight,
+          backgroundColor: highlightColor,
           opacity: progress.interpolate({
             inputRange: [0, 1],
             outputRange: [0, 0.6]
@@ -92,13 +100,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__*/_jsx(View, {
     onLayout: handleLayout,
     accessible: true,
@@ -110,7 +118,7 @@ const Skeleton = ({
       width: resolvedWidth,
       height: resolvedHeight,
       borderRadius,
-      backgroundColor: theme.colors.skeleton.background
+      backgroundColor
     }, style],
     children: overlay
   });

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

@@ -3,6 +3,7 @@
 import React, { Children, cloneElement, isValidElement, useState } from 'react';
 import { Image, StyleSheet, Text, View } from 'react-native';
 import { Skeleton } from "./Skeleton.js";
+import { SkeletonSkip } from "./SkeletonSkip.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const flattenStyle = style => {
   if (!style) return {};
@@ -22,7 +23,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__*/_jsx(Skeleton, {
@@ -30,11 +31,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 Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, `${keyHint}-${index}`));
+    return Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, colors, `${keyHint}-${index}`));
   }
   if (! /*#__PURE__*/isValidElement(node)) return null;
   const element = node;
@@ -42,6 +44,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) {
+    return /*#__PURE__*/cloneElement(element, {
+      key: `${keyHint}-skip`
+    });
+  }
+
   // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius
   if (elementType === Image) {
     const width = resolveWidth(elementStyle.width, '100%');
@@ -53,6 +62,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
       }
@@ -69,6 +79,7 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       radius: "sm",
       variant: variant,
       speed: speed,
+      colors: colors,
       style: {
         marginVertical: 2
       }
@@ -79,7 +90,7 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
   if (props.children != null) {
     return /*#__PURE__*/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
@@ -92,7 +103,8 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       height: height,
       radius: radius,
       variant: variant,
-      speed: speed
+      speed: speed,
+      colors: colors
     }, `${keyHint}-vw`);
   }
 
@@ -105,10 +117,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
 }) => {
@@ -128,6 +141,7 @@ const SkeletonContent = ({
       testID: testID,
       variant: variant,
       speed: speed,
+      colors: colors,
       children: repeated
     });
   }
@@ -138,7 +152,7 @@ const SkeletonContent = ({
     accessibilityLabel: "Loading",
     accessibilityRole: "progressbar",
     accessibilityLiveRegion: "polite",
-    children: skeletonizeNode(repeated, variant, speed)
+    children: skeletonizeNode(repeated, variant, speed, colors)
   });
 };
 SkeletonContent.displayName = 'SkeletonContent';
@@ -146,6 +160,7 @@ const BlockSkeleton = ({
   children,
   variant,
   speed,
+  colors,
   style,
   testID
 }) => {
@@ -182,7 +197,8 @@ const BlockSkeleton = ({
         height: size.height,
         radius: "md",
         variant: variant,
-        speed: speed
+        speed: speed,
+        colors: colors
       })
     }) : null]
   });

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

@@ -3,6 +3,7 @@
 import React from 'react';
 import { FlatList, View } from 'react-native';
 import { SkeletonContent } from "./SkeletonContent.js";
+import { useSkeletonDefaults } from "./SkeletonProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Drop-in FlatList replacement that renders `placeholderCount` skeleton rows while
@@ -27,9 +28,10 @@ function SkeletonListInner(props) {
     data,
     renderItem,
     renderPlaceholder,
-    placeholderCount = 3,
+    placeholderCount,
     variant,
     speed,
+    colors,
     placeholderContainerStyle,
     horizontal,
     contentContainerStyle,
@@ -37,9 +39,11 @@ function SkeletonListInner(props) {
     testID,
     ...rest
   } = props;
+  const defaults = 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__*/_jsx(React.Fragment, {
       children: renderPlaceholder ? renderPlaceholder(index) : null
     }, `sk-list-${index}`));
@@ -47,6 +51,7 @@ function SkeletonListInner(props) {
       loading: true,
       variant: variant,
       speed: speed,
+      colors: colors,
       style: style,
       testID: testID,
       children: /*#__PURE__*/_jsx(View, {

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

@@ -0,0 +1,41 @@
+"use strict";
+
+import React, { createContext, useContext, useMemo } from 'react';
+
+/**
+ * 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.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const SkeletonDefaultsContext = /*#__PURE__*/createContext({});
+export const SkeletonProvider = ({
+  children,
+  variant,
+  speed,
+  placeholderCount,
+  radius,
+  colors
+}) => {
+  const value = useMemo(() => ({
+    variant,
+    speed,
+    placeholderCount,
+    radius,
+    colors
+  }), [variant, speed, placeholderCount, radius, colors]);
+  return /*#__PURE__*/_jsx(SkeletonDefaultsContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+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.
+ */
+export const useSkeletonDefaults = () => {
+  return useContext(SkeletonDefaultsContext);
+};
+//# sourceMappingURL=SkeletonProvider.js.map