@webority-technologies/mobile 0.0.14 → 0.0.20

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

@@ -32,16 +32,18 @@ export interface ImageGalleryProps {
     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.
+     * When true, renders the component as its authored skeleton placeholder shape.
+     * The placeholder mirrors the real layout's footprint so the UI doesn't reflow
+     * when data arrives. Use this while the data driving the component is being fetched.
      */
     loading?: boolean;
     accessibilityLabel?: string;
     containerStyle?: StyleProp<ViewStyle>;
     testID?: string;
 }
-declare const ImageGallery: React.FC<ImageGalleryProps>;
+declare const ImageGallery: React.FC<ImageGalleryProps> & {
+    Skeleton: React.FC<ImageGalleryProps>;
+};
 export { ImageGallery };
 export default ImageGallery;
 //# sourceMappingURL=ImageGallery.d.ts.map

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

@@ -43,8 +43,14 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
      */
     parse?: (formatted: string) => string;
     style?: StyleProp<ViewStyle>;
+    /** Style applied to the bordered field wrapper (the bit you'd colour or pad). Distinct from `style`, which targets the outermost container. */
+    containerStyle?: StyleProp<ViewStyle>;
     inputStyle?: StyleProp<TextStyle>;
     labelStyle?: StyleProp<TextStyle>;
+    /** Style applied to the helper/error text below the field. */
+    messageStyle?: StyleProp<TextStyle>;
+    /** Per-instance override for the field's corner radius. Wins over `theme.components.input.borderRadius` and size defaults. */
+    borderRadius?: number;
     onFocus?: (e: FocusEvent) => void;
     onBlur?: (e: BlurEvent) => void;
     accessibilityLabel?: string;

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

@@ -1,14 +1,13 @@
 import React from 'react';
-import { View } from 'react-native';
-import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
+import type { GestureResponderEvent, StyleProp, TextStyle, View as RNView, ViewStyle } from 'react-native';
 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.
+     * When true, renders the component as its authored skeleton placeholder shape.
+     * The placeholder mirrors the real layout's footprint so the UI doesn't reflow
+     * when data arrives. Use this while the data driving the component is being fetched.
      */
     loading?: boolean;
     subtitle?: string;
@@ -28,9 +27,17 @@ export interface ListItemProps {
     accessibilityLabel?: string;
     accessibilityHint?: string;
     style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    titleStyle?: StyleProp<TextStyle>;
+    subtitleStyle?: StyleProp<TextStyle>;
+    descriptionStyle?: StyleProp<TextStyle>;
+    leftSlotStyle?: StyleProp<ViewStyle>;
+    rightSlotStyle?: StyleProp<ViewStyle>;
     testID?: string;
 }
-declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<View>>;
+declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<ListItemProps>;
+};
 export { ListItem };
 export default ListItem;
 //# sourceMappingURL=ListItem.d.ts.map

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

@@ -24,7 +24,10 @@ export interface NumberInputProps {
     unit?: string;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
     inputStyle?: StyleProp<TextStyle>;
+    buttonStyle?: StyleProp<ViewStyle>;
+    unitStyle?: StyleProp<TextStyle>;
     labelStyle?: StyleProp<TextStyle>;
     textInputProps?: Omit<TextInputProps, 'value' | 'onChangeText' | 'onBlur' | 'keyboardType' | 'editable'>;
     testID?: string;

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

@@ -0,0 +1,57 @@
+/**
+ * PickerTrigger — the tappable input field that opens a modal picker.
+ *
+ * Standalone read-only field built on FieldBase, used by DatePicker,
+ * TimePicker and DateRangePicker (and any consumer-built picker) to render
+ * the closed-state row that matches Input / Select pixel-for-pixel.
+ *
+ * The component is purely visual + interactive — it does not own picker
+ * state. Consumers either:
+ *   - Use the built-in trigger mode on a picker, which composes this
+ *     internally and manages its own open/close.
+ *   - Render PickerTrigger themselves alongside a controlled picker.
+ */
+import React from 'react';
+import { View } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase';
+export type PickerTriggerSize = FieldBaseSize;
+export type PickerTriggerVariant = FieldBaseVariant;
+export interface PickerTriggerProps {
+    /** The currently selected value rendered as the trigger's primary text. */
+    value?: string;
+    /** Shown when `value` is empty. Falls back to "Select…". */
+    placeholder?: string;
+    /** Static label rendered above the field. */
+    label?: string;
+    /** Helper text shown below the field. Hidden when `error` is set. */
+    helperText?: string;
+    /** Error message shown below the field (and red-borders the field). */
+    error?: string;
+    /** Adds a red asterisk after the label. */
+    required?: boolean;
+    /** Tap handler — typically opens the modal picker. */
+    onPress: () => void;
+    /** Render a clear (×) affordance when `value` is non-empty. */
+    clearable?: boolean;
+    /** Called when the clear affordance is pressed. */
+    onClear?: () => void;
+    /** Leading icon slot (e.g. calendar / clock). */
+    leadingIcon?: React.ReactNode;
+    /** Trailing slot — defaults to a chevron when unset. Pass `null` to suppress. */
+    trailing?: React.ReactNode;
+    disabled?: boolean;
+    size?: PickerTriggerSize;
+    variant?: PickerTriggerVariant;
+    style?: StyleProp<ViewStyle>;
+    triggerStyle?: StyleProp<ViewStyle>;
+    valueStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    messageStyle?: StyleProp<TextStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+declare const PickerTrigger: React.ForwardRefExoticComponent<PickerTriggerProps & React.RefAttributes<View>>;
+export { PickerTrigger };
+export default PickerTrigger;
+//# sourceMappingURL=PickerTrigger.d.ts.map

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

@@ -0,0 +1,3 @@
+export { PickerTrigger, default } from './PickerTrigger';
+export type { PickerTriggerProps, PickerTriggerSize, PickerTriggerVariant } from './PickerTrigger';
+//# sourceMappingURL=index.d.ts.map

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

@@ -12,6 +12,8 @@ export interface ProgressBarProps {
     barColor?: string;
     animated?: boolean;
     style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    barStyle?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     testID?: string;
 }

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

@@ -23,7 +23,10 @@ export interface RadioProps extends Omit<PressableProps, 'style' | 'children' |
     accessibilityLabel?: string;
     haptic?: HapticType | false;
     style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
     circleStyle?: StyleProp<ViewStyle>;
+    dotStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<ViewStyle>;
     testID?: string;
 }
 declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<View>>;

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, View as RNView, ViewStyle } from 'react-native';
 export type RatingTone = 'primary' | 'warning';
 export type RatingSize = 'sm' | 'md' | 'lg' | number;
 export interface RatingProps {
@@ -13,16 +12,20 @@ export interface RatingProps {
     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.
+     * When true, renders the component as its authored skeleton placeholder shape.
+     * The placeholder mirrors the real layout's footprint so the UI doesn't reflow
+     * when data arrives. Use this while the data driving the component is being fetched.
      */
     loading?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    starContainerStyle?: StyleProp<ViewStyle>;
     testID?: string;
 }
-declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<View>>;
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<RatingProps>;
+};
 export { Rating };
 export default Rating;
 //# sourceMappingURL=Rating.d.ts.map

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

@@ -26,8 +26,11 @@ export interface SegmentedControlProps {
     tone?: SegmentedControlTone;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
     segmentStyle?: StyleProp<ViewStyle>;
+    selectedIndicatorStyle?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
     testID?: string;
 }
 declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<View>>;

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

@@ -1,51 +1,80 @@
+/**
+ * Skeleton — the leaf placeholder primitive.
+ *
+ * Every Skeleton on screen reads the shared shimmer/pulse clock from
+ * `SkeletonProvider` (see SkeletonClock.tsx). One native-driver loop per
+ * provider drives every instance, so 50 placeholders on a list don't spawn
+ * 50 timers and the shimmer bands never drift out of phase.
+ *
+ * Visual:
+ *   - A View with the base color and `overflow: hidden` + radius gives the
+ *     placeholder its shape.
+ *   - For `animation: 'shimmer'`, an Animated.View carrying a 3-stop
+ *     `LinearGradient` (transparent → highlight → transparent) translates
+ *     across the box. The radius clips it to the right outline automatically.
+ *   - For `animation: 'pulse'`, a full-fill Animated.View fades its opacity
+ *     between 0 and 0.6. Cheap and useful for tiny shapes where a sweep
+ *     would barely be visible.
+ *   - For `animation: 'none'` (or when the OS Reduce Motion preference is
+ *     on), just the base color renders.
+ *
+ * `variant` describes the SHAPE: rect (default), rounded (theme.radius.md),
+ * circle (50%), or text (small radius, slightly inset height). Set width /
+ * height directly for full control.
+ */
 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';
+/** Animation pattern. */
+export type SkeletonVariant = 'shimmer' | 'pulse' | 'none';
+/** Sweep speed for the shimmer band. Ignored for pulse / none. */
 export type SkeletonSpeed = 'slow' | 'normal' | 'fast';
+/** Pre-defined shape archetype. Plays nicely with `width`/`height` overrides. */
+export type SkeletonShape = 'rect' | 'rounded' | 'circle' | 'text';
+/** `theme.radius` token name or a literal pixel value. */
 export type SkeletonRadius = keyof Pick<RadiusScale, 'sm' | 'md' | 'lg' | 'xl' | 'full'> | number;
 export type SkeletonWidth = number | 'auto' | '100%' | `${number}%`;
-export type SkeletonAvatarSize = 'sm' | 'md' | 'lg';
 export interface SkeletonProps {
+    /**
+     * Pre-defined shape archetype. Sets sensible defaults for the missing
+     * dimensions/radius. Override individual values via `width`, `height`,
+     * `radius` as needed.
+     * - `'rect'`: default, sharp corners.
+     * - `'rounded'`: `theme.radius.md` corners — for cards / buttons.
+     * - `'circle'`: 50% radius — for avatars / icons (provide `width` = `height`).
+     * - `'text'`: small radius + roughly text-line height. `height` becomes
+     *   `1.15× fontSize` if a `fontSize` would have been passed.
+     */
+    shape?: SkeletonShape;
     width?: SkeletonWidth;
     height?: number;
     radius?: SkeletonRadius;
+    /** Animation pattern. */
     variant?: SkeletonVariant;
+    /** Sweep speed for shimmer. */
     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={{...}}>`.
+     * Per-instance color override. Falls back to provider defaults, then theme.
+     * Use for one-off contrast adjustments (dark shimmer on a light banner);
+     * prefer `<SkeletonProvider colors={...}>` for app-wide overrides.
      */
     colors?: SkeletonColors;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }
-export interface SkeletonCircleProps extends Omit<SkeletonProps, 'width' | 'height' | 'radius'> {
+export interface SkeletonCircleProps extends Omit<SkeletonProps, 'width' | 'height' | 'shape'> {
     size: number;
 }
-export interface SkeletonTextProps extends Omit<SkeletonProps, 'height'> {
+export interface SkeletonTextProps extends Omit<SkeletonProps, 'height' | 'shape'> {
     lines?: number;
     lastLineWidth?: SkeletonWidth;
     spacing?: number;
     fontSize?: number;
 }
-export interface SkeletonAvatarProps extends Omit<SkeletonProps, 'width' | 'height' | 'radius'> {
-    size?: SkeletonAvatarSize;
-}
-export type SkeletonCardProps = Omit<SkeletonProps, 'height'>;
-export interface SkeletonListItemProps extends Omit<SkeletonProps, 'width' | 'height'> {
-    avatarSize?: SkeletonAvatarSize;
-}
 declare const Skeleton: React.FC<SkeletonProps>;
 declare const SkeletonCircle: React.FC<SkeletonCircleProps>;
 declare const SkeletonText: React.FC<SkeletonTextProps>;
-declare const SkeletonAvatar: React.FC<SkeletonAvatarProps>;
-declare const SkeletonCard: React.FC<SkeletonCardProps>;
-declare const SkeletonListItem: React.FC<SkeletonListItemProps>;
-export { Skeleton, SkeletonCircle, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonListItem };
+export { Skeleton, SkeletonCircle, SkeletonText };
 export default Skeleton;
 //# sourceMappingURL=Skeleton.d.ts.map

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

@@ -0,0 +1,60 @@
+/**
+ * SkeletonClock — single shared animation tick for every <Skeleton> on screen.
+ *
+ * Why this exists: previously every Skeleton primitive ran its own
+ * `Animated.loop` on its own `Animated.Value`. A list of 20 placeholders =
+ * 20 independent native-driver timers, each starting at a slightly different
+ * mount frame, so their shimmer bands drift out of phase within ~1s and the
+ * surface feels noisy. CSS-driven web skeleton libs (react-loading-skeleton,
+ * MUI) avoid this because the browser owns a single timeline. We emulate
+ * that on RN by hoisting the loop into context.
+ *
+ * The clock produces a value in `[0, 1)` that wraps every `duration` ms. Each
+ * Skeleton interpolates that value into its own translateX / opacity output.
+ * One native-driver loop, no drift, ~zero JS cost.
+ */
+import React from 'react';
+import type { ReactNode } from 'react';
+import { Animated } from 'react-native';
+import type { SkeletonSpeed, SkeletonVariant } from './Skeleton';
+export interface SkeletonClockValue {
+    /**
+     * `Animated.Value` looping 0→1 for the shimmer variant. Each Skeleton
+     * interpolates this into translateX. One value per provider scope =
+     * perfectly synchronized shimmer bands across the whole subtree.
+     */
+    shimmer: Animated.Value;
+    /**
+     * Separate value for the pulse variant (different duration / easing).
+     * Lives alongside shimmer so swapping `variant` per-instance is cheap.
+     */
+    pulse: Animated.Value;
+    /** Whether the clock is currently running (false in reduced-motion mode). */
+    enabled: boolean;
+}
+export interface SkeletonClockProviderProps {
+    /** Drives the shimmer band's speed. */
+    speed: SkeletonSpeed;
+    /** Pause the clock entirely — e.g., when reduced-motion is on. */
+    enabled: boolean;
+    /**
+     * Default variant flag. Both loops always run regardless (it's cheap),
+     * but we accept this prop so the provider's API matches the user-facing
+     * variant default. Reserved for future use; currently the prop is purely
+     * descriptive.
+     */
+    variant: SkeletonVariant;
+    children: ReactNode;
+}
+/**
+ * Owns the loops. Mount one of these inside `SkeletonProvider`; every
+ * `<Skeleton>` below it shares the same animated values.
+ */
+export declare const SkeletonClockProvider: React.FC<SkeletonClockProviderProps>;
+/**
+ * Read the active clock. Returns a fallback "always-still" clock when no
+ * provider is mounted, so the primitives still render (statically) outside
+ * one — keeps demo/storybook usage friction-free.
+ */
+export declare const useSkeletonClock: () => SkeletonClockValue;
+//# sourceMappingURL=SkeletonClock.d.ts.map

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

@@ -1,37 +1,98 @@
+/**
+ * SkeletonContent — show placeholder shapes while data is loading, then
+ * cross-fade to the real children once it arrives.
+ *
+ * Three usage patterns, listed in order of preference:
+ *
+ *   1. **Explicit placeholder** (recommended):
+ *
+ *        <SkeletonContent loading={isLoading} placeholder={<Card.Skeleton />}>
+ *          <Card>{realChildren}</Card>
+ *        </SkeletonContent>
+ *
+ *      Renders `placeholder` verbatim while loading and `children` once loaded.
+ *      Most precise and predictable — what you write is exactly what shimmers.
+ *      Prefer this for any non-trivial layout.
+ *
+ *   2. **Self-describing components inside an auto-walked tree**:
+ *
+ *        <SkeletonContent loading={isLoading}>
+ *          <Stepper steps={steps} />
+ *          <Card>...</Card>
+ *        </SkeletonContent>
+ *
+ *      With no `placeholder` prop, the walker substitutes each element. For
+ *      library components, the walker checks for a `Component.Skeleton` static
+ *      and replaces the element wholesale with it (the component author knows
+ *      its shape best). For plain `<Text>`, `<Image>`, and sized `<View>`
+ *      leaves the walker substitutes shape-matched `<Skeleton>` blocks based
+ *      on the element's own style. Good for screen-level wrappers.
+ *
+ *   3. **Hand-authored primitive trees** (legacy / quick prototyping):
+ *
+ *        <SkeletonContent loading={isLoading}>
+ *          <View>
+ *            <Text style={{ fontSize: 20 }}>Title</Text>
+ *            <Text>Subtitle</Text>
+ *          </View>
+ *        </SkeletonContent>
+ *
+ *      Same walker as (2) — the Text/Image/View introspection handles
+ *      primitive trees that mirror the loaded layout.
+ *
+ * Cross-fade: when `loading` flips from true to false, real children fade in
+ * over `fadeDuration` ms. The first render is guarded — content that was
+ * never in a loading state does NOT fade on mount, only the actual
+ * loading→loaded transition does. Matches Chakra UI's `isLoaded` feel.
+ */
 import React from 'react';
-import type { ReactNode } from 'react';
+import type { ComponentType, 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';
+/**
+ * Components that ship their own placeholder shape declare this static. The
+ * walker looks for it before falling back to primitive introspection. The
+ * function receives the original component's props so consumer-customizable
+ * dimensions (size, count, etc.) carry through to the placeholder.
+ */
+export type SkeletonStaticOf<P> = ComponentType<P> & {
+    Skeleton?: ComponentType<P>;
+};
 export interface SkeletonContentProps {
-    /** When true, replace children with skeleton placeholders. */
+    /** When true, render the placeholder (or walker output) instead of `children`. */
     loading: boolean;
     children: ReactNode;
-    /** Animation style — same as Skeleton. */
-    variant?: SkeletonVariant;
-    /** Animation speed — same as Skeleton. */
-    speed?: SkeletonSpeed;
     /**
-     * - `'auto'` (default): walks the children tree and replaces every `<Text>`, `<Image>`, and
-     *   sized leaf `<View>` with a `<Skeleton>` matching the element's style dimensions.
-     *   Use this when your loading layout mirrors your real layout (typical case).
-     * - `'block'`: renders a single rectangular skeleton sized to the children's overall bounds.
-     *   Useful when children are opaque components whose props (e.g. `Button title=...`) the walker
-     *   cannot inspect.
+     * Explicit placeholder JSX. When provided, the walker is bypassed entirely
+     * and `placeholder` is rendered verbatim while `loading` is true. This is
+     * the recommended path for any non-trivial layout — most precise and most
+     * predictable. Combine with `count` to repeat the shape.
      */
-    mode?: SkeletonContentMode;
+    placeholder?: ReactNode;
+    /** Animation style forwarded to walker-produced `<Skeleton>` blocks. */
+    variant?: SkeletonVariant;
+    /** Animation speed forwarded to walker-produced `<Skeleton>` blocks. */
+    speed?: SkeletonSpeed;
     /**
-     * Repeat `children` this many times while loading. Useful for list layouts where the
-     * placeholder shape should appear N times (e.g. 3 site cards, 5 list rows). Ignored when
-     * `loading` is false. Default: `1`.
+     * Repeat `placeholder` (or `children`, when no placeholder is provided)
+     * this many times while loading. Useful for list layouts where the
+     * placeholder shape should appear N times (e.g. 3 site cards, 5 list rows).
+     * Ignored when `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.
+     * Colour override forwarded to every walker-produced `<Skeleton>`. Either
+     * or both keys can be set; missing keys fall back to provider defaults /
+     * theme. Has no effect when `placeholder` is provided — author colours
+     * directly on the placeholder JSX instead.
      */
     colors?: SkeletonColors;
+    /**
+     * Duration in ms for the load→content cross-fade. Default `300`. Set `0`
+     * to disable. Per-instance overrides the provider's `fadeDuration`.
+     */
+    fadeDuration?: number;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

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

@@ -1,10 +1,25 @@
+/**
+ * SkeletonProvider — app-level defaults for every <Skeleton> below it.
+ *
+ * Two responsibilities:
+ *   1. Broadcasts the default variant / speed / colors / radius /
+ *      placeholderCount so consumers don't repeat them per call site.
+ *   2. Mounts the shared `SkeletonClockProvider` (see SkeletonClock.tsx) so
+ *      every primitive shares a single Animated.Value — synchronized shimmer
+ *      across the whole subtree, one native-driver loop per provider.
+ *
+ * Also honors the OS "Reduce Motion" preference: when enabled, the clock is
+ * paused and skeletons render as static dim blocks. The detection is live —
+ * if the user toggles the setting while the app is open the skeletons stop
+ * shimmering immediately.
+ */
 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.
+ * 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;
@@ -19,14 +34,33 @@ export interface SkeletonProviderDefaults {
     radius?: SkeletonRadius;
     /** App-wide colour overrides for the shimmer base + highlight. */
     colors?: SkeletonColors;
+    /**
+     * Fade duration in ms for the `loading → loaded` cross-fade inside
+     * `SkeletonContent`. Default `300`. Set to `0` to disable.
+     */
+    fadeDuration?: number;
+    /**
+     * Hard override for animation. `'auto'` (default) follows the OS
+     * "Reduce Motion" preference: shimmer when off, static when on. `'always'`
+     * forces shimmer regardless. `'never'` forces static — useful for tests or
+     * battery-sensitive screens.
+     */
+    animation?: 'auto' | 'always' | 'never';
 }
 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.
+ * Read the current SkeletonProvider defaults. Returns an empty object when
+ * no provider is mounted, so the skeleton primitives still work outside of
+ * one — but without a shared clock or theme-coordinated colors.
  */
 export declare const useSkeletonDefaults: () => SkeletonProviderDefaults;
+/**
+ * Subscribes to the OS "Reduce Motion" preference. Live — updates when the
+ * user toggles the setting while the app is open. Used internally by
+ * `SkeletonProvider`; exposed so consumer screens can branch on it too.
+ */
+export declare const useReduceMotion: () => boolean;
 //# sourceMappingURL=SkeletonProvider.d.ts.map

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

@@ -1,11 +1,13 @@
-export { Skeleton, SkeletonCircle, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonListItem, default } from './Skeleton';
-export type { SkeletonProps, SkeletonCircleProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonListItemProps, SkeletonVariant, SkeletonSpeed, SkeletonRadius, SkeletonWidth, SkeletonAvatarSize } from './Skeleton';
+export { Skeleton, SkeletonCircle, SkeletonText, default } from './Skeleton';
+export type { SkeletonProps, SkeletonCircleProps, SkeletonTextProps, SkeletonVariant, SkeletonSpeed, SkeletonShape, SkeletonRadius, SkeletonWidth } from './Skeleton';
 export { SkeletonContent } from './SkeletonContent';
-export type { SkeletonContentProps, SkeletonContentMode } from './SkeletonContent';
+export type { SkeletonContentProps, SkeletonStaticOf } from './SkeletonContent';
 export { SkeletonList } from './SkeletonList';
 export type { SkeletonListProps } from './SkeletonList';
-export { SkeletonProvider, useSkeletonDefaults } from './SkeletonProvider';
+export { SkeletonProvider, useSkeletonDefaults, useReduceMotion } from './SkeletonProvider';
 export type { SkeletonColors, SkeletonProviderDefaults, SkeletonProviderProps } from './SkeletonProvider';
+export { SkeletonClockProvider, useSkeletonClock } from './SkeletonClock';
+export type { SkeletonClockValue, SkeletonClockProviderProps } from './SkeletonClock';
 export { SkeletonSkip } from './SkeletonSkip';
 export type { SkeletonSkipProps } from './SkeletonSkip';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 export type SliderTone = 'primary' | 'success' | 'warning' | 'error';
 export type SliderSize = 'sm' | 'md' | 'lg';
 interface SliderCommonProps {
@@ -14,6 +14,17 @@ interface SliderCommonProps {
     formatLabel?: (value: number) => string;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    trackStyle?: StyleProp<ViewStyle>;
+    fillStyle?: StyleProp<ViewStyle>;
+    thumbStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    /** Override the thumb press-scale target (default 1.1). */
+    thumbPressScale?: number;
+    /** Override the label fade duration (default theme.motion.duration.fast). */
+    labelShowDuration?: number;
+    /** Override the label final opacity when visible (default 1). */
+    labelOpacity?: number;
     testID?: string;
 }
 interface SliderSingleProps extends SliderCommonProps {