@webority-technologies/mobile 0.0.6 → 0.0.7

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/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/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

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

@@ -0,0 +1,31 @@
+"use strict";
+
+import React from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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>
+ */
+export const SkeletonSkip = ({
+  children
+}) => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+};
+SkeletonSkip.displayName = 'SkeletonSkip';
+//# sourceMappingURL=SkeletonSkip.js.map

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

@@ -3,4 +3,6 @@
 export { Skeleton, SkeletonCircle, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonListItem, default } from "./Skeleton.js";
 export { SkeletonContent } from "./SkeletonContent.js";
 export { SkeletonList } from "./SkeletonList.js";
+export { SkeletonProvider, useSkeletonDefaults } from "./SkeletonProvider.js";
+export { SkeletonSkip } from "./SkeletonSkip.js";
 //# sourceMappingURL=index.js.map

package/lib/module/components/index.js

@@ -36,7 +36,7 @@ export { SearchBar } from "./SearchBar/index.js";
 export { SegmentedControl } from "./SegmentedControl/index.js";
 export { Select } from "./Select/index.js";
 export { Stepper } from "./Stepper/index.js";
-export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonText } from "./Skeleton/index.js";
+export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonProvider, SkeletonSkip, SkeletonText, useSkeletonDefaults } from "./Skeleton/index.js";
 export { Slider } from "./Slider/index.js";
 export { Swipeable } from "./Swipeable/index.js";
 export { Switch } from "./Switch/index.js";

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { RadiusScale } from '../../theme/types';
+import type { SkeletonColors } from './SkeletonProvider';
 export type SkeletonVariant = 'shimmer' | 'pulse';
 export type SkeletonSpeed = 'slow' | 'normal' | 'fast';
 export type SkeletonRadius = keyof Pick<RadiusScale, 'sm' | 'md' | 'lg' | 'xl' | 'full'> | number;
@@ -12,6 +13,14 @@ export interface SkeletonProps {
     radius?: SkeletonRadius;
     variant?: SkeletonVariant;
     speed?: SkeletonSpeed;
+    /**
+     * Per-instance colour override. Either `background` or `highlight` (or both)
+     * can be set; missing keys fall back to the SkeletonProvider's defaults
+     * and finally to the theme. Use this for one-off contrast adjustments
+     * (dark shimmer on a light banner, etc.) — for app-wide overrides prefer
+     * `<SkeletonProvider colors={{...}}>`.
+     */
+    colors?: SkeletonColors;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/commonjs/components/Skeleton/SkeletonContent.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { SkeletonSpeed, SkeletonVariant } from './Skeleton';
+import type { SkeletonColors } from './SkeletonProvider';
 export type SkeletonContentMode = 'auto' | 'block';
 export interface SkeletonContentProps {
     /** When true, replace children with skeleton placeholders. */
@@ -26,6 +27,11 @@ export interface SkeletonContentProps {
      * `loading` is false. Default: `1`.
      */
     count?: number;
+    /**
+     * Colour override forwarded to every `<Skeleton>` produced by the walker. Either or both
+     * keys can be set; missing keys fall back to provider defaults / theme.
+     */
+    colors?: SkeletonColors;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/commonjs/components/Skeleton/SkeletonList.d.ts

@@ -1,6 +1,7 @@
 import type { ReactElement, ReactNode } from 'react';
 import type { FlatListProps, StyleProp, ViewStyle } from 'react-native';
 import type { SkeletonSpeed, SkeletonVariant } from './Skeleton';
+import type { SkeletonColors } from './SkeletonProvider';
 export interface SkeletonListProps<ItemT> extends Omit<FlatListProps<ItemT>, 'data' | 'renderItem'> {
     /** Whether the list is in its initial loading state. */
     loading: boolean;
@@ -19,6 +20,8 @@ export interface SkeletonListProps<ItemT> extends Omit<FlatListProps<ItemT>, 'da
     variant?: SkeletonVariant;
     /** Animation speed — same as Skeleton. */
     speed?: SkeletonSpeed;
+    /** Colour override forwarded to the placeholder skeletons. */
+    colors?: SkeletonColors;
     /** Style applied to the wrapper View around the placeholders. */
     placeholderContainerStyle?: StyleProp<ViewStyle>;
     testID?: string;

package/lib/typescript/commonjs/components/Skeleton/SkeletonProvider.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { SkeletonRadius, SkeletonSpeed, SkeletonVariant } from './Skeleton';
+/**
+ * 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.
+ */
+export interface SkeletonColors {
+    background?: string;
+    highlight?: string;
+}
+export interface SkeletonProviderDefaults {
+    variant?: SkeletonVariant;
+    speed?: SkeletonSpeed;
+    /** Default `placeholderCount` for `<SkeletonList>` when not specified per-instance. */
+    placeholderCount?: number;
+    /** Default `radius` for `<Skeleton>` when not specified per-instance. */
+    radius?: SkeletonRadius;
+    /** App-wide colour overrides for the shimmer base + highlight. */
+    colors?: SkeletonColors;
+}
+export interface SkeletonProviderProps extends SkeletonProviderDefaults {
+    children: ReactNode;
+}
+export declare const SkeletonProvider: React.FC<SkeletonProviderProps>;
+/**
+ * Read the current SkeletonProvider defaults. Returns an empty object when no
+ * provider is mounted, so the skeleton primitives still work outside of one.
+ */
+export declare const useSkeletonDefaults: () => SkeletonProviderDefaults;
+//# sourceMappingURL=SkeletonProvider.d.ts.map

package/lib/typescript/commonjs/components/Skeleton/SkeletonSkip.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+export interface SkeletonSkipProps {
+    children: ReactNode;
+}
+/**
+ * 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>
+ */
+export declare const SkeletonSkip: React.FC<SkeletonSkipProps>;
+//# sourceMappingURL=SkeletonSkip.d.ts.map