@webority-technologies/mobile 0.0.5 → 0.0.7

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

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

@@ -4,4 +4,8 @@ export { SkeletonContent } from './SkeletonContent';
 export type { SkeletonContentProps, SkeletonContentMode } from './SkeletonContent';
 export { SkeletonList } from './SkeletonList';
 export type { SkeletonListProps } from './SkeletonList';
+export { SkeletonProvider, useSkeletonDefaults } from './SkeletonProvider';
+export type { SkeletonColors, SkeletonProviderDefaults, SkeletonProviderProps } from './SkeletonProvider';
+export { SkeletonSkip } from './SkeletonSkip';
+export type { SkeletonSkipProps } from './SkeletonSkip';
 //# sourceMappingURL=index.d.ts.map

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/commonjs/components/index.d.ts

@@ -70,8 +70,8 @@ export { Select } from './Select';
 export type { SelectProps, SelectOption, SelectSize } from './Select';
 export { Stepper } from './Stepper';
 export type { StepperProps, StepperVariant, StepperStep, StepperTone } from './Stepper';
-export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonText } from './Skeleton';
-export type { SkeletonProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonCircleProps, SkeletonContentMode, SkeletonContentProps, SkeletonListItemProps, SkeletonListProps, SkeletonTextProps, SkeletonVariant, SkeletonSpeed } from './Skeleton';
+export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonProvider, SkeletonSkip, SkeletonText, useSkeletonDefaults } from './Skeleton';
+export type { SkeletonAvatarProps, SkeletonCardProps, SkeletonCircleProps, SkeletonColors, SkeletonContentMode, SkeletonContentProps, SkeletonListItemProps, SkeletonListProps, SkeletonProps, SkeletonProviderDefaults, SkeletonProviderProps, SkeletonSkipProps, SkeletonSpeed, SkeletonTextProps, SkeletonVariant } from './Skeleton';
 export { Slider } from './Slider';
 export type { SliderProps, SliderTone, SliderSize } from './Slider';
 export { Swipeable } from './Swipeable';

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

package/lib/typescript/module/components/Skeleton/index.d.ts

@@ -4,4 +4,8 @@ export { SkeletonContent } from './SkeletonContent';
 export type { SkeletonContentProps, SkeletonContentMode } from './SkeletonContent';
 export { SkeletonList } from './SkeletonList';
 export type { SkeletonListProps } from './SkeletonList';
+export { SkeletonProvider, useSkeletonDefaults } from './SkeletonProvider';
+export type { SkeletonColors, SkeletonProviderDefaults, SkeletonProviderProps } from './SkeletonProvider';
+export { SkeletonSkip } from './SkeletonSkip';
+export type { SkeletonSkipProps } from './SkeletonSkip';
 //# sourceMappingURL=index.d.ts.map

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/lib/typescript/module/components/index.d.ts

@@ -70,8 +70,8 @@ export { Select } from './Select';
 export type { SelectProps, SelectOption, SelectSize } from './Select';
 export { Stepper } from './Stepper';
 export type { StepperProps, StepperVariant, StepperStep, StepperTone } from './Stepper';
-export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonText } from './Skeleton';
-export type { SkeletonProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonCircleProps, SkeletonContentMode, SkeletonContentProps, SkeletonListItemProps, SkeletonListProps, SkeletonTextProps, SkeletonVariant, SkeletonSpeed } from './Skeleton';
+export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonCircle, SkeletonContent, SkeletonList, SkeletonListItem, SkeletonProvider, SkeletonSkip, SkeletonText, useSkeletonDefaults } from './Skeleton';
+export type { SkeletonAvatarProps, SkeletonCardProps, SkeletonCircleProps, SkeletonColors, SkeletonContentMode, SkeletonContentProps, SkeletonListItemProps, SkeletonListProps, SkeletonProps, SkeletonProviderDefaults, SkeletonProviderProps, SkeletonSkipProps, SkeletonSpeed, SkeletonTextProps, SkeletonVariant } from './Skeleton';
 export { Slider } from './Slider';
 export type { SliderProps, SliderTone, SliderSize } from './Slider';
 export { Swipeable } from './Swipeable';

package/package.json

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