@webority-technologies/mobile 0.0.14 → 0.0.20

package/lib/module/components/Tooltip/Tooltip.js

@@ -4,12 +4,14 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Animated, Dimensions, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const TOOLTIP_GAP = 8;
-const SCREEN_PADDING = 8;
-const PRESS_AUTO_HIDE_MS = 4000;
-const ARROW_HALF_WIDTH = 4; // half of 8px arrow base
-const ARROW_HEIGHT = 6;
-const ARROW_CORNER_PADDING = 12;
+const DEFAULT_TOOLTIP_GAP = 8;
+const DEFAULT_SCREEN_PADDING = 8;
+const DEFAULT_PRESS_AUTO_HIDE_MS = 4000;
+const DEFAULT_ARROW_HALF_WIDTH = 4; // half of 8px arrow base
+const DEFAULT_ARROW_HEIGHT = 6;
+const DEFAULT_ARROW_CORNER_PADDING = 12;
+const DEFAULT_MAX_WIDTH = 240;
+const DEFAULT_LINE_HEIGHT = 18;
 const Tooltip = props => {
   const {
     content,
@@ -19,14 +21,28 @@ const Tooltip = props => {
     visible: controlledVisible,
     onVisibleChange,
     hideOnContentPress = true,
-    maxWidth = 240,
+    maxWidth,
     showArrow = true,
     accessibilityLabel,
     style,
+    containerStyle,
+    arrowStyle: arrowStyleOverride,
+    messageStyle,
     testID
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
+  const tooltipTokens = theme.components.tooltip;
+  const TOOLTIP_GAP = tooltipTokens?.gap ?? DEFAULT_TOOLTIP_GAP;
+  const SCREEN_PADDING = tooltipTokens?.screenPadding ?? DEFAULT_SCREEN_PADDING;
+  const PRESS_AUTO_HIDE_MS = tooltipTokens?.pressAutoHideMs ?? DEFAULT_PRESS_AUTO_HIDE_MS;
+  const ARROW_HALF_WIDTH = tooltipTokens?.arrowHalfWidth ?? DEFAULT_ARROW_HALF_WIDTH;
+  const ARROW_HEIGHT = tooltipTokens?.arrowHeight ?? DEFAULT_ARROW_HEIGHT;
+  const ARROW_CORNER_PADDING = tooltipTokens?.arrowCornerPadding ?? DEFAULT_ARROW_CORNER_PADDING;
+  const MESSAGE_LINE_HEIGHT = tooltipTokens?.lineHeight ?? DEFAULT_LINE_HEIGHT;
+  const resolvedMaxWidth = maxWidth ?? tooltipTokens?.maxWidth ?? DEFAULT_MAX_WIDTH;
+  const enableScaleAnimation = tooltipTokens?.enableScaleAnimation ?? false;
+  const exitDurationMs = tooltipTokens?.exitDurationMs ?? 150;
   const isControlled = trigger === 'manual' || typeof controlledVisible === 'boolean';
   const [internalVisible, setInternalVisible] = useState(false);
   const visible = isControlled ? Boolean(controlledVisible) : internalVisible;
@@ -36,7 +52,7 @@ const Tooltip = props => {
     height: 0
   });
   const wrapperRef = useRef(null);
-  const scale = useRef(createAnimatedValue(visible ? 1 : 0.85)).current;
+  const scale = useRef(createAnimatedValue(visible ? 1 : enableScaleAnimation ? 0.85 : 1)).current;
   const opacity = useRef(createAnimatedValue(visible ? 1 : 0)).current;
   const autoHideTimer = useRef(null);
   const didMount = useRef(false);
@@ -88,17 +104,21 @@ const Tooltip = props => {
     }
     if (visible) {
       measureAnchor();
-      Animated.parallel([Animated.spring(scale, {
-        toValue: 1,
-        damping: theme.motion.spring.snappy.damping,
-        stiffness: theme.motion.spring.snappy.stiffness,
-        mass: theme.motion.spring.snappy.mass,
-        useNativeDriver: true
-      }), Animated.timing(opacity, {
+      const enterAnims = [Animated.timing(opacity, {
         toValue: 1,
         duration: theme.motion.duration.fast,
         useNativeDriver: true
-      })]).start();
+      })];
+      if (enableScaleAnimation) {
+        enterAnims.push(Animated.spring(scale, {
+          toValue: 1,
+          damping: theme.motion.spring.snappy.damping,
+          stiffness: theme.motion.spring.snappy.stiffness,
+          mass: theme.motion.spring.snappy.mass,
+          useNativeDriver: true
+        }));
+      }
+      Animated.parallel(enterAnims).start();
       if (trigger === 'press') {
         if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
         autoHideTimer.current = setTimeout(() => {
@@ -106,15 +126,19 @@ const Tooltip = props => {
         }, PRESS_AUTO_HIDE_MS);
       }
     } else {
-      Animated.parallel([Animated.timing(scale, {
-        toValue: 0.85,
-        duration: 150,
-        useNativeDriver: true
-      }), Animated.timing(opacity, {
+      const exitAnims = [Animated.timing(opacity, {
         toValue: 0,
-        duration: 150,
+        duration: exitDurationMs,
         useNativeDriver: true
-      })]).start();
+      })];
+      if (enableScaleAnimation) {
+        exitAnims.push(Animated.timing(scale, {
+          toValue: 0.85,
+          duration: exitDurationMs,
+          useNativeDriver: true
+        }));
+      }
+      Animated.parallel(exitAnims).start();
       if (autoHideTimer.current) {
         clearTimeout(autoHideTimer.current);
         autoHideTimer.current = null;
@@ -151,7 +175,7 @@ const Tooltip = props => {
         arrowOffset: 0
       };
     }
-    const tooltipWidth = size.width || Math.min(maxWidth, screen.width - SCREEN_PADDING * 2);
+    const tooltipWidth = size.width || Math.min(resolvedMaxWidth, screen.width - SCREEN_PADDING * 2);
     const tooltipHeight = size.height || 0;
 
     // Choose placement.
@@ -210,7 +234,7 @@ const Tooltip = props => {
       placement: resolved,
       arrowOffset
     };
-  }, [anchor, size, placement, maxWidth]);
+  }, [anchor, size, placement, resolvedMaxWidth, SCREEN_PADDING, TOOLTIP_GAP, ARROW_CORNER_PADDING]);
 
   // Build the cloned trigger.
   const triggerProps = {};
@@ -287,7 +311,7 @@ const Tooltip = props => {
         rotate: '-90deg'
       }]
     };
-  }, [showArrow, position, theme]);
+  }, [showArrow, position, theme, ARROW_HALF_WIDTH, ARROW_HEIGHT]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(View, {
       ref: wrapperRef,
@@ -316,12 +340,12 @@ const Tooltip = props => {
             position: 'absolute',
             top: position.top,
             left: position.left,
-            maxWidth,
+            maxWidth: resolvedMaxWidth,
             opacity,
             transform: [{
               scale
             }]
-          }, style],
+          }, style, containerStyle],
           children: [/*#__PURE__*/_jsx(View, {
             style: [styles.tooltip, {
               backgroundColor: theme.colors.background.inverse,
@@ -332,15 +356,15 @@ const Tooltip = props => {
               shadowColor: theme.shadows.lg.shadowColor
             }],
             children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
-              style: {
+              style: [{
                 color: theme.colors.text.inverse,
                 fontSize: theme.typography.fontSize.sm,
-                lineHeight: 18
-              },
+                lineHeight: MESSAGE_LINE_HEIGHT
+              }, messageStyle],
               children: content
             }) : content
           }), arrowStyle ? /*#__PURE__*/_jsx(View, {
-            style: arrowStyle,
+            style: [arrowStyle, arrowStyleOverride],
             pointerEvents: "none"
           }) : null]
         }) : null

package/lib/module/components/index.js

@@ -21,7 +21,6 @@ export { FormField } from "./FormField/index.js";
 export { FloatingActionButton, FloatingActionButtonGroup } from "./FloatingActionButton/index.js";
 export { ForceUpdateDialog } from "./ForceUpdateDialog/index.js";
 export { AppBar } from "./AppBar/index.js";
-export { AppIcon } from "./AppIcon/index.js";
 export { ImageGallery } from "./ImageGallery/index.js";
 export { Input } from "./Input/index.js";
 export { ListItem } from "./ListItem/index.js";
@@ -29,6 +28,7 @@ export { Spinner } from "./Spinner/index.js";
 export { Modal } from "./Modal/index.js";
 export { NumberInput } from "./NumberInput/index.js";
 export { OTPInput } from "./OTPInput/index.js";
+export { PickerTrigger } from "./PickerTrigger/index.js";
 export { ProgressBar } from "./ProgressBar/index.js";
 export { Radio, RadioGroup } from "./Radio/index.js";
 export { Rating } from "./Rating/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, SkeletonProvider, SkeletonSkip, SkeletonText, useSkeletonDefaults } from "./Skeleton/index.js";
+export { Skeleton, SkeletonCircle, SkeletonClockProvider, SkeletonContent, SkeletonList, SkeletonProvider, SkeletonSkip, SkeletonText, useReduceMotion, useSkeletonClock, 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/module/theme/tokens.js

@@ -50,6 +50,39 @@ const radius = {
   '2xl': 28,
   full: 9999
 };
+
+// `field` tokens hold the canonical dimensions every input-like control
+// inherits via FieldBase. Heights, radii and padding ladders here are the
+// single source of truth — Input, Select, SearchBar, NumberInput, OTPInput
+// cell and PickerTrigger fall through to these unless their own component
+// tokens override. Fill / border colours resolve at theme-build time inside
+// the providers (which know `colors.*`) — these defaults are dimension-only.
+const fieldSizes = {
+  sm: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minHeight: 38,
+    fontSize: 13,
+    borderRadius: 10,
+    iconSize: 16
+  },
+  md: {
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    minHeight: 46,
+    fontSize: 15,
+    borderRadius: 12,
+    iconSize: 18
+  },
+  lg: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    minHeight: 54,
+    fontSize: 16,
+    borderRadius: 14,
+    iconSize: 20
+  }
+};
 const components = {
   button: {
     xs: {
@@ -118,26 +151,33 @@ const components = {
     }
   },
   searchBar: {
+    // `borderRadius: radius.full` keeps the historical pill shape as the
+    // library default. Brands wanting SearchBar to share Input / Select's
+    // rounded-rect shape override per size to match `field.<size>.borderRadius`
+    // (10 / 12 / 14), or drop a single value in via theme merge.
     sm: {
       height: 36,
       paddingHorizontal: 10,
       fontSize: 13,
       iconSize: 16,
-      gap: 6
+      gap: 6,
+      borderRadius: radius.full
     },
     md: {
       height: 44,
       paddingHorizontal: 12,
       fontSize: 15,
       iconSize: 18,
-      gap: 8
+      gap: 8,
+      borderRadius: radius.full
     },
     lg: {
       height: 52,
       paddingHorizontal: 14,
       fontSize: 16,
       iconSize: 20,
-      gap: 10
+      gap: 10,
+      borderRadius: radius.full
     },
     cancelButtonWidth: 72
   },
@@ -161,6 +201,14 @@ const components = {
       paddingVertical: '2xl'
     }
   },
+  field: {
+    defaultVariant: 'outlined',
+    sm: fieldSizes.sm,
+    md: fieldSizes.md,
+    lg: fieldSizes.lg
+    // Variant fill / border colours are filled in at theme-build time by the
+    // light/dark Theme objects below — they need access to `colors.*`.
+  },
   listItem: {
     sm: {
       paddingVertical: 'sm',
@@ -229,7 +277,6 @@ const components = {
     lg: {
       boxSize: 24
     },
-    borderWidth: 1.5,
     labelGap: 10
   },
   radio: {
@@ -245,7 +292,6 @@ const components = {
       outer: 24,
       inner: 12
     },
-    borderWidth: 1.5,
     labelGap: 10
   },
   switch: {
@@ -495,7 +541,8 @@ export const lightTheme = {
       primary: '#E5E5EC',
       secondary: '#EFEFF3',
       focus: '#5B5BD6',
-      error: '#E5484D'
+      error: '#E5484D',
+      width: 1.5
     },
     surface: {
       pressed: 'rgba(15, 15, 26, 0.06)',
@@ -549,7 +596,8 @@ export const darkTheme = {
       primary: '#27272F',
       secondary: '#1C1C26',
       focus: '#7C7CE8',
-      error: '#F87171'
+      error: '#F87171',
+      width: 1.5
     },
     surface: {
       pressed: 'rgba(255, 255, 255, 0.08)',

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

@@ -15,12 +15,15 @@ export interface AccordionProps {
     style?: StyleProp<ViewStyle>;
     headerStyle?: StyleProp<ViewStyle>;
     contentStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the animated wrapper around the expandable content. */
+    contentWrapperStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the outermost container View. */
+    containerStyle?: 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.
+     * When true, renders the accordion as its authored skeleton placeholder
+     * shape (header row, collapsed body). Footprint matches the closed live
+     * accordion so the layout doesn't shift when data arrives.
      */
     loading?: boolean;
 }
@@ -34,7 +37,9 @@ export interface AccordionGroupProps {
     testID?: string;
 }
 declare const AccordionGroup: React.FC<AccordionGroupProps>;
-declare const Accordion: React.FC<AccordionProps>;
+declare const Accordion: React.FC<AccordionProps> & {
+    Skeleton: React.FC<AccordionProps>;
+};
 export { Accordion, AccordionGroup };
 export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map

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

@@ -28,6 +28,14 @@ export interface AppBarProps {
      */
     scrollY?: Animated.Value | Animated.AnimatedInterpolation<number>;
     style?: StyleProp<ViewStyle>;
+    /** Alias for `style` applied to the outer container (animated when collapsing). */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the title Animated.Text. */
+    titleStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the subtitle Animated.Text. */
+    subtitleStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the right-action badge bubble. */
+    badgeStyle?: StyleProp<ViewStyle>;
     testID?: string;
 }
 declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<View>>;

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
-import type { ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ImageSourcePropType, StyleProp, TextStyle, View as RNView, ViewStyle } from 'react-native';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
 export type AvatarShape = 'circle' | 'square' | 'rounded';
 export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | null;
@@ -15,9 +14,14 @@ export interface AvatarProps {
     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.
+     * Per-instance initials font size in pixels. Wins over theme tokens
+     * (`avatar.fontSize` and `avatar.fontSizeRatio`) and the size-derived default.
+     */
+    fontSize?: number;
+    /**
+     * 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;
@@ -25,7 +29,9 @@ export interface AvatarProps {
     textStyle?: StyleProp<TextStyle>;
     testID?: string;
 }
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<View>>;
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<AvatarProps>;
+};
 export type AvatarGroupSpacing = 'tight' | 'normal' | 'loose';
 export type AvatarGroupOverflowVariant = 'count' | 'plus';
 export interface AvatarGroupProps {

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, View as RNView, ViewStyle } from 'react-native';
 export type BadgeVariant = 'standard' | 'dot';
 export type BadgeTone = 'primary' | 'success' | 'warning' | 'error' | 'neutral' | 'info';
 export type BadgeSize = 'sm' | 'md';
@@ -13,9 +12,9 @@ export interface BadgeProps {
     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.
+     * 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;
     children?: React.ReactNode;
@@ -27,7 +26,9 @@ export interface BadgeProps {
     textStyle?: StyleProp<TextStyle>;
     testID?: string;
 }
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<View>>;
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<BadgeProps>;
+};
 export { Badge };
 export default Badge;
 //# sourceMappingURL=Badge.d.ts.map

package/lib/typescript/commonjs/components/Banner/Banner.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 BannerVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
 export interface BannerAction {
     label: string;
@@ -18,16 +17,28 @@ export interface BannerProps {
     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.
+     * 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>;
+    /** Alias for `style` — applied to the outer animated container. */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the auto-rendered icon circle (when no custom `icon` is provided). */
+    iconCircleStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the leading tint bar. */
+    tintBarStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the dismiss/close button. */
+    closeButtonStyle?: StyleProp<ViewStyle>;
+    /** Style applied to each action button (Pressable). */
+    actionButtonStyle?: StyleProp<ViewStyle>;
     testID?: string;
 }
-declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<View>>;
+declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<BannerProps>;
+};
 export { Banner };
 export default Banner;
 //# sourceMappingURL=Banner.d.ts.map

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

@@ -28,6 +28,13 @@ export interface BottomSheetProps {
     onAnimate?: (from: number, to: number) => void;
     enablePanDownToClose?: boolean;
     enableBackdropPress?: boolean;
+    /**
+     * @deprecated Backdrop opacity is now controlled by the theme token
+     * `colors.background.overlay` (alpha baked into the rgba value). Animated
+     * opacity on the backdrop was unreliable under Fabric view-flattening, so
+     * the scrim is now a static plain View. To tune dim level, override
+     * `theme.colors.background.overlay` in your theme bridge.
+     */
     backdropOpacity?: number;
     /**
      * How the sheet reacts to the soft keyboard.

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
-import type { GestureResponderEvent, ImageSourcePropType, PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { GestureResponderEvent, ImageSourcePropType, PressableProps, StyleProp, View as RNView, ViewStyle } from 'react-native';
 import type { GradientDefinition } from '../../theme/types';
 export type CardVariant = 'elevated' | 'outlined' | 'filled';
 export type CardElevation = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -20,9 +19,9 @@ export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
     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.
+     * 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;
     /**
@@ -35,9 +34,21 @@ export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
     onPress?: (event: GestureResponderEvent) => void;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
+    /** Alias for `style` — applied to the outer card element. */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the header wrapper View. */
+    headerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the body wrapper View (only present when header or footer is provided). */
+    bodyStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the footer wrapper View. */
+    footerStyle?: StyleProp<ViewStyle>;
+    /** Per-instance override of the corner radius. Wins over the `radius` token. */
+    borderRadius?: number;
     testID?: string;
 }
-declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<View>>;
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<CardProps>;
+};
 export { Card };
 export default Card;
 //# sourceMappingURL=Card.d.ts.map

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

@@ -53,10 +53,9 @@ export interface CarouselProps<T = unknown> {
      */
     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.
+     * When true, renders the carousel as its authored skeleton placeholder
+     * shape: a single slide block plus pagination dots. Footprint matches the
+     * loaded carousel so the layout doesn't shift when data arrives.
      */
     loading?: boolean;
 }
@@ -65,9 +64,11 @@ export interface CarouselRef {
     next: () => void;
     prev: () => void;
 }
-declare const Carousel: <T = unknown>(props: CarouselProps<T> & {
+declare const Carousel: (<T = unknown>(props: CarouselProps<T> & {
     ref?: React.Ref<CarouselRef>;
-}) => React.ReactElement | null;
+}) => React.ReactElement | null) & {
+    Skeleton: React.FC<CarouselProps<unknown>>;
+};
 export { Carousel };
 export default Carousel;
 //# sourceMappingURL=Carousel.d.ts.map

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils';
 export type CheckboxSize = 'sm' | 'md' | 'lg';
 export type CheckboxTone = 'primary' | 'success' | 'warning' | 'error';
@@ -16,6 +16,14 @@ export interface CheckboxProps extends Omit<PressableProps, 'style' | 'children'
     haptic?: HapticType | false;
     style?: StyleProp<ViewStyle>;
     boxStyle?: StyleProp<ViewStyle>;
+    /** Style override for the check glyph (✓) inside the box. */
+    checkIconStyle?: StyleProp<TextStyle>;
+    /** Style override for the indeterminate bar inside the box. */
+    indeterminateBarStyle?: StyleProp<ViewStyle>;
+    /** Style override for the outer row container. */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style override for the label text. */
+    labelStyle?: StyleProp<TextStyle>;
     testID?: string;
 }
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<View>>;

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, View as RNView, ViewStyle } from 'react-native';
 export type ChipVariant = 'filled' | 'outlined';
 export type ChipTone = 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
 export type ChipSize = 'sm' | 'md';
@@ -15,17 +14,25 @@ export interface ChipProps {
     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.
+     * 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>;
     textStyle?: StyleProp<TextStyle>;
+    /** Style override for the chip outer container (alias to style, applied after). */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style override for the close (×) button pressable. */
+    closeButtonStyle?: StyleProp<ViewStyle>;
+    /** Style override for the close (×) glyph text. */
+    closeIconStyle?: StyleProp<TextStyle>;
     testID?: string;
 }
-declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<View>>;
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<ChipProps>;
+};
 export { Chip };
 export default Chip;
 //# sourceMappingURL=Chip.d.ts.map