@webority-technologies/mobile 0.0.14 → 0.0.20

package/lib/typescript/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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 {

package/lib/typescript/commonjs/components/Stepper/Stepper.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, TextStyle, View as RNView, ViewStyle } from 'react-native';
 export type StepperVariant = 'horizontal' | 'vertical';
 export type StepperTone = 'primary' | 'success';
 export interface StepperStep {
@@ -13,19 +12,32 @@ export interface StepperProps {
     steps: StepperStep[];
     activeStep: number;
     onStepPress?: (index: number) => void;
+    /**
+     * Gate for tap-to-jump on completed steps. Default false — even when
+     * `onStepPress` is provided, taps are no-op unless this is true. Keeps
+     * progress-display use cases (the common case) from accidentally becoming
+     * navigable.
+     */
+    allowStepPress?: boolean;
     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.
+     * 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>;
+    circleStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    connectorStyle?: StyleProp<ViewStyle>;
     testID?: string;
 }
-declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<View>>;
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<StepperProps>;
+};
 export { Stepper };
 export default Stepper;
 //# sourceMappingURL=Stepper.d.ts.map

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

@@ -36,6 +36,8 @@ export interface SwipeableProps {
     onSwipeClose?: () => void;
     disabled?: boolean;
     containerStyle?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    actionStyle?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     testID?: string;
 }

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

@@ -19,6 +19,7 @@ export interface SwitchProps extends Omit<PressableProps, 'style' | 'children' |
      */
     bounce?: boolean;
     style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
     trackStyle?: StyleProp<ViewStyle>;
     thumbStyle?: StyleProp<ViewStyle>;
     testID?: string;

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

@@ -9,14 +9,16 @@
  * native driver does not support layout props.
  */
 import React from 'react';
-import { View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, View } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 export type TabsVariant = 'underline' | 'pills';
 export type TabsAlign = 'left' | 'center';
 export interface TabItem {
     key: string;
     label: string;
     icon?: React.ReactNode;
+    /** Optional numeric/string badge — rendered inline after the label when provided. */
+    badge?: string | number;
     disabled?: boolean;
 }
 export interface TabsProps {
@@ -27,7 +29,29 @@ export interface TabsProps {
     scrollable?: boolean;
     align?: TabsAlign;
     style?: StyleProp<ViewStyle>;
+    /** Alias of `style`. Applied to the outer container View. Additive — both merge. */
+    containerStyle?: StyleProp<ViewStyle>;
     tabStyle?: StyleProp<ViewStyle>;
+    /** Style override applied to each tab label Text. */
+    tabLabelStyle?: StyleProp<TextStyle>;
+    /** Style override applied to the per-tab icon wrapper. */
+    tabIconStyle?: StyleProp<ViewStyle>;
+    /** Style override applied to the per-tab badge wrapper. */
+    tabBadgeStyle?: StyleProp<ViewStyle>;
+    /** Style override applied to the bottom divider line (underline variant only). */
+    dividerStyle?: StyleProp<ViewStyle>;
+    /** Style override applied to the animated indicator (underline or pill). */
+    indicatorStyle?: StyleProp<ViewStyle>;
+    /**
+     * Optional fractional active-index (0..tabs.length-1). When supplied and
+     * every tab has been measured, the indicator's translateX + width track
+     * this value via interpolation instead of springing on activeKey change.
+     * Wire it to a horizontal pager's `scrollX / pageWidth` to make the
+     * indicator follow drags in real time. Press-driven `onChange` still fires
+     * the same way; consumers typically scroll the pager in response so the
+     * progress value catches up.
+     */
+    progress?: Animated.AnimatedInterpolation<number> | Animated.Value;
     accessibilityLabel?: string;
     testID?: string;
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase';
 export type TimeFormat = '12h' | '24h';
 export type Period = 'AM' | 'PM';
 export type MinuteStep = 1 | 5 | 15 | 30;
@@ -7,11 +8,23 @@ export interface TimeValue {
     hour: number;
     minute: number;
 }
+/**
+ * TimePicker supports two modes:
+ *
+ * 1. Controlled-modal mode — pass `visible`, `onSelect`, `onClose`. The
+ *    component renders only the modal sheet and the caller owns open/close
+ *    state plus its own trigger UI.
+ * 2. Trigger mode — omit `visible`. The component renders a PickerTrigger
+ *    field (label / value / placeholder / chevron / clear / helper / error)
+ *    and manages its own modal open state. `onSelect` is still called on
+ *    confirm.
+ */
 export interface TimePickerProps {
-    visible: boolean;
+    /** Controlled-modal visibility. When omitted, the component enters trigger mode. */
+    visible?: boolean;
     value?: TimeValue | null;
-    onSelect: (time: TimeValue) => void;
-    onClose: () => void;
+    onSelect?: (time: TimeValue) => void;
+    onClose?: () => void;
     format?: TimeFormat;
     minuteStep?: MinuteStep;
     title?: string;
@@ -19,6 +32,26 @@ export interface TimePickerProps {
     cancelLabel?: string;
     testID?: string;
     style?: StyleProp<ViewStyle>;
+    /** Outer container style applied to the bottom sheet. */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style override for the title text container. */
+    headerLabelStyle?: StyleProp<ViewStyle>;
+    /** Style override for the cancel/confirm footer buttons. */
+    footerButtonStyle?: StyleProp<ViewStyle>;
+    label?: string;
+    placeholder?: string;
+    helperText?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    size?: FieldBaseSize;
+    variant?: FieldBaseVariant;
+    clearable?: boolean;
+    onClear?: () => void;
+    /** Override the trigger field's value formatting. Defaults to `format`-aware h:mm/HH:mm. */
+    formatValue?: (time: TimeValue) => string;
+    /** Style passed through to the PickerTrigger field row. */
+    triggerStyle?: StyleProp<ViewStyle>;
 }
 declare const TimePicker: React.FC<TimePickerProps>;
 export { TimePicker };

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

@@ -18,8 +18,16 @@ export interface ToastOptions {
     icon?: React.ReactNode;
     /** Style applied to the toast container (override radius, padding, shadow per-toast). */
     style?: StyleProp<ViewStyle>;
+    /** Alias of `style`. Applied to the toast container (merged additively). */
+    containerStyle?: StyleProp<ViewStyle>;
     /** Style applied to the toast message Text. */
     textStyle?: StyleProp<TextStyle>;
+    /** Style applied to the leading icon circle wrapper. */
+    iconCircleStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the message Text (alias-ish of `textStyle` but kept distinct for slot symmetry). */
+    messageStyle?: StyleProp<TextStyle>;
+    /** Style applied to the trailing action Pressable. */
+    actionButtonStyle?: StyleProp<ViewStyle>;
 }
 export interface ToastItem extends ToastOptions {
     id: string;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right' | 'auto';
 export type TooltipTrigger = 'longPress' | 'press' | 'manual';
 export interface TooltipProps {
@@ -14,6 +14,12 @@ export interface TooltipProps {
     showArrow?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
+    /** Alias of `style`. Applied to the outer animated tooltip wrapper (merged additively). */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style override applied to the arrow caret View. */
+    arrowStyle?: StyleProp<ViewStyle>;
+    /** Style override applied to the message Text (only when `content` is a string). */
+    messageStyle?: StyleProp<TextStyle>;
     testID?: string;
 }
 declare const Tooltip: React.FC<TooltipProps>;

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

@@ -35,13 +35,11 @@ export type { EmptyStateProps, EmptyStateAction, EmptyStateSize } from './EmptyS
 export { FormField } from './FormField';
 export type { FormFieldProps, FormFieldLayout } from './FormField';
 export { FloatingActionButton, FloatingActionButtonGroup } from './FloatingActionButton';
-export type { FloatingActionButtonProps, FloatingActionButtonSize, FloatingActionButtonTone, FloatingActionButtonPosition, FloatingActionButtonIconConfig, FloatingActionButtonGroupProps, FloatingActionButtonGroupAction } from './FloatingActionButton';
+export type { FloatingActionButtonProps, FloatingActionButtonSize, FloatingActionButtonTone, FloatingActionButtonPosition, FloatingActionButtonGroupProps, FloatingActionButtonGroupAction } from './FloatingActionButton';
 export { ForceUpdateDialog } from './ForceUpdateDialog';
 export type { ForceUpdateDialogProps } from './ForceUpdateDialog';
 export { AppBar } from './AppBar';
 export type { AppBarProps, AppBarAction, AppBarVariant } from './AppBar';
-export { AppIcon } from './AppIcon';
-export type { AppIconProps, IconFamily, IconSize, IconTone } from './AppIcon';
 export { ImageGallery } from './ImageGallery';
 export type { ImageGalleryProps, GalleryImage } from './ImageGallery';
 export { Input } from './Input';
@@ -56,6 +54,8 @@ export { NumberInput } from './NumberInput';
 export type { NumberInputProps, NumberInputRef, NumberInputSize, NumberInputVariant } from './NumberInput';
 export { OTPInput } from './OTPInput';
 export type { OTPInputProps, OTPInputRef, OTPInputSize } from './OTPInput';
+export { PickerTrigger } from './PickerTrigger';
+export type { PickerTriggerProps, PickerTriggerSize, PickerTriggerVariant } from './PickerTrigger';
 export { ProgressBar } from './ProgressBar';
 export type { ProgressBarProps, ProgressBarTone } from './ProgressBar';
 export { Radio, RadioGroup } from './Radio';
@@ -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, 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 { Skeleton, SkeletonCircle, SkeletonClockProvider, SkeletonContent, SkeletonList, SkeletonProvider, SkeletonSkip, SkeletonText, useReduceMotion, useSkeletonClock, useSkeletonDefaults } from './Skeleton';
+export type { SkeletonCircleProps, SkeletonClockProviderProps, SkeletonClockValue, SkeletonColors, SkeletonContentProps, SkeletonListProps, SkeletonProps, SkeletonProviderDefaults, SkeletonProviderProps, SkeletonRadius, SkeletonShape, SkeletonSkipProps, SkeletonSpeed, SkeletonStaticOf, SkeletonTextProps, SkeletonVariant, SkeletonWidth } from './Skeleton';
 export { Slider } from './Slider';
 export type { SliderProps, SliderTone, SliderSize } from './Slider';
 export { Swipeable } from './Swipeable';