@webority-technologies/mobile 0.0.4 → 0.0.6

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

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

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

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

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

@@ -14,6 +14,12 @@ export interface AvatarProps {
     statusPosition?: AvatarStatusPosition;
     backgroundColor?: string;
     color?: 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>;
     textStyle?: StyleProp<TextStyle>;

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

@@ -12,6 +12,12 @@ export interface BadgeProps {
     tone?: BadgeTone;
     size?: BadgeSize;
     invisible?: 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;
     children?: React.ReactNode;
     anchor?: BadgeAnchor;
     pulse?: boolean;

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/Card/Card.d.ts

@@ -18,6 +18,12 @@ export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
     imageHeight?: number;
     imageAspectRatio?: number;
     imageOverlay?: React.ReactNode;
+    /**
+     * 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;
     onPress?: (event: GestureResponderEvent) => void;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;

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/ListItem/ListItem.d.ts

@@ -5,6 +5,12 @@ import type { SwipeableAction } from '../Swipeable';
 export type ListItemSize = 'sm' | 'md' | 'lg';
 export interface ListItemProps {
     title: 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;
     subtitle?: string;
     description?: string;
     left?: React.ReactNode;

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

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

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

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

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

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

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

@@ -14,6 +14,12 @@ export interface AvatarProps {
     statusPosition?: AvatarStatusPosition;
     backgroundColor?: string;
     color?: 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>;
     textStyle?: StyleProp<TextStyle>;

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

@@ -12,6 +12,12 @@ export interface BadgeProps {
     tone?: BadgeTone;
     size?: BadgeSize;
     invisible?: 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;
     children?: React.ReactNode;
     anchor?: BadgeAnchor;
     pulse?: boolean;

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/Card/Card.d.ts

@@ -18,6 +18,12 @@ export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
     imageHeight?: number;
     imageAspectRatio?: number;
     imageOverlay?: React.ReactNode;
+    /**
+     * 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;
     onPress?: (event: GestureResponderEvent) => void;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;

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/ListItem/ListItem.d.ts

@@ -5,6 +5,12 @@ import type { SwipeableAction } from '../Swipeable';
 export type ListItemSize = 'sm' | 'md' | 'lg';
 export interface ListItemProps {
     title: 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;
     subtitle?: string;
     description?: string;
     left?: React.ReactNode;

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

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

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

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

package/package.json

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