jfs-components 0.1.0 → 0.1.8

package/lib/typescript/src/components/DonutChart/DonutChart.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * Per-segment data definition for the data-driven `segments` prop.
  *
@@ -20,7 +21,7 @@ export type DonutChartSegmentData = {
      * Per-segment design token mode overrides. Merged on top of parent
      * `modes` and the per-index `Appearance / DataViz` defaults.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Per-segment accessibility label. */
     accessibilityLabel?: string;
 };
@@ -60,7 +61,7 @@ export type DonutChartProps = {
      */
     gap?: number;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
     /** Override default value text styles. */
@@ -79,7 +80,7 @@ type DonutChartSegmentProps = {
      * Design token modes for the segment. Merged with parent `modes` and
      * the per-index `Appearance / DataViz` defaults.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Per-segment accessibility label. */
     accessibilityLabel?: string;
 };

package/lib/typescript/src/components/DonutChartSummary/DonutChartSummary.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * One row of the `DonutChartSummary`. Each item drives BOTH a donut
  * segment and the matching legend row, so the segment and indicator
@@ -36,7 +37,7 @@ export type DonutChartSummaryItem = {
      * (`Senary`, `Primary`, `Secondary`, `Tertiary`, `Quaternary`,
      * `Quinary`, then cycles).
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Accessibility label for the segment + legend row pairing. */
     accessibilityLabel?: string;
 };
@@ -73,7 +74,7 @@ export type DonutChartSummaryProps = {
      */
     donutGap?: number;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override outer container styles. */
     style?: StyleProp<ViewStyle>;
     /** Override the legend container styles. */

package/lib/typescript/src/components/Drawer/Drawer.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { Modes } from '../../design-tokens';
 export type DrawerProps = {
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: import('react-native').StyleProp<import('react-native').ViewStyle>;
     title?: string;
     /**
@@ -41,6 +42,19 @@ export type DrawerProps = {
      * expanded), so parent components can react programmatically.
      */
     onStateChange?: (state: 'collapsed' | 'expanded') => void;
+    /**
+     * When `true`, renders a full-screen semi-transparent {@link Overlay} scrim
+     * behind the drawer sheet (dimming everything else on screen). Defaults to
+     * `false`, in which case nothing is rendered behind the sheet and behaviour
+     * is unchanged.
+     */
+    showOverlay?: boolean;
+    /**
+     * Called when the overlay scrim (the area outside the sheet) is pressed.
+     * Only relevant when `showOverlay` is `true` — typically used to collapse
+     * or dismiss the drawer.
+     */
+    onOverlayPress?: () => void;
 };
 /**
  * Imperative handle exposed via `ref` for programmatic control of the drawer.

package/lib/typescript/src/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type DropdownItemProps = {
     /** Display text for the item. Ignored when `children` is provided. */
     label?: string;
@@ -25,7 +26,7 @@ export type DropdownItemProps = {
     /** Optional custom child content (overrides `label`). */
     children?: React.ReactNode;
     /** Modes for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides for the item container. */
     style?: StyleProp<ViewStyle>;
     /** Style overrides for the item label text. */
@@ -45,7 +46,7 @@ export type DropdownProps = {
      */
     maxHeight?: number;
     /** Modes for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides for the popup container. */
     style?: StyleProp<ViewStyle>;
     /** Accessibility label for the menu surface. */

package/lib/typescript/src/components/DropdownInput/DropdownInput.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type DropdownInputOptionValue = string | number;
 export type DropdownInputOption = {
     /** Stable, unique value used to identify the option. */
@@ -13,6 +14,25 @@ export type DropdownInputOption = {
     /** Whether the option is non-selectable. */
     disabled?: boolean;
 };
+/**
+ * Imperative handle exposed via `ref`. Lets the consumer drive the dropdown
+ * from outside — e.g. close it when an Android hardware/system button is
+ * pressed, or open it programmatically from a sibling control.
+ */
+export type DropdownInputHandle = {
+    /** Opens the options menu (no-op when disabled / read-only). */
+    open: () => void;
+    /** Closes the options menu. */
+    close: () => void;
+    /** Toggles the options menu open/closed. */
+    toggle: () => void;
+    /** Moves focus to the trigger (web). */
+    focus: () => void;
+    /** Removes focus from the trigger (web). */
+    blur: () => void;
+    /** Measures the trigger in window coordinates. */
+    measureInWindow: (callback: (x: number, y: number, width: number, height: number) => void) => void;
+};
 export type DropdownInputProps = {
     /** Label rendered above the input. */
     label?: string;
@@ -87,7 +107,7 @@ export type DropdownInputProps = {
     /** Whether tapping the backdrop closes the menu. */
     closeOnBackdropPress?: boolean;
     /** Modes for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides for the outermost wrapper. */
     style?: StyleProp<ViewStyle>;
     /** Style overrides for the input row. */
@@ -103,6 +123,6 @@ export type DropdownInputProps = {
     /** Called when the trigger loses focus (web only). */
     onBlur?: (e: any) => void;
 };
-declare function DropdownInput({ label, placeholder, items, value, defaultValue, onValueChange, children, renderValue, open, defaultOpen, onOpenChange, placement, isRequired, isDisabled, isInvalid, isReadOnly, supportText, errorMessage, menuMaxHeight, menuOffset, matchTriggerWidth, closeOnBackdropPress, modes: propModes, style, inputStyle, menuStyle, accessibilityLabel, accessibilityHint, onFocus, onBlur, }: DropdownInputProps): import("react/jsx-runtime").JSX.Element;
+declare const DropdownInput: React.ForwardRefExoticComponent<DropdownInputProps & React.RefAttributes<DropdownInputHandle>>;
 export default DropdownInput;
 //# sourceMappingURL=DropdownInput.d.ts.map

package/lib/typescript/src/components/EmptyState/EmptyState.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type EmptyStateProps = {
     /**
      * Title text for the empty state
@@ -29,7 +30,7 @@ export type EmptyStateProps = {
     /**
      * Mode configuration for theming
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 };

package/lib/typescript/src/components/ExpandableCheckbox/ExpandableCheckbox.d.ts

@@ -1,4 +1,5 @@
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type ExpandableCheckboxProps = {
     /** Long text label rendered next to the checkbox. */
     label?: string;
@@ -23,7 +24,7 @@ export type ExpandableCheckboxProps = {
     /** Number of lines to show when collapsed. Defaults to `1`. */
     collapsedLines?: number;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override outer container styles. */
     style?: StyleProp<ViewStyle>;
     /** Override the label text styles. */

package/lib/typescript/src/components/FilterBar/FilterBar.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 type RenderInputArgs = {
     placeholder: string;
     value: string;
     onChangeText?: ((text: string) => void) | undefined;
-    modes: Record<string, any>;
+    modes: Modes;
     accessibilityLabel: string;
     accessibilityHint?: string | undefined;
     onFocus?: (e: any) => void;
@@ -25,7 +26,7 @@ type FilterBarProps = {
      * respect the higher-level FilterBar API.
      */
     renderInput?: (args: RenderInputArgs) => React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;

package/lib/typescript/src/components/Form/Form.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 type FormContextValue = {
     validationErrors: Record<string, string | string[]>;
     onFieldChange: (name: string) => void;
@@ -9,7 +10,7 @@ export type FormProps = {
     children: React.ReactNode;
     validationErrors?: Record<string, string | string[]>;
     onSubmit?: () => void;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     testID?: string;

package/lib/typescript/src/components/FormField/FormField.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { type StyleProp, type TextInputProps as RNTextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+import { TextInput as RNTextInput, type StyleProp, type TextInputProps as RNTextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type FormFieldType = 'text' | 'password' | 'email' | 'search' | 'number' | 'phone' | 'url';
 export type FormFieldProps = {
     /** Label rendered above the input. */
@@ -59,7 +60,7 @@ export type FormFieldProps = {
     /** When true, focuses the input on mount. */
     autoFocus?: boolean;
     /** Modes for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides for the outermost wrapper. */
     style?: StyleProp<ViewStyle>;
     /** Style overrides for the input row container. */
@@ -79,6 +80,6 @@ export type FormFieldProps = {
     /** Test identifier. */
     testID?: string;
 };
-declare function FormField({ label, placeholder, value, onChangeText, type, name, leading, trailing, leadingIconName, isRequired, isDisabled, isInvalid, isReadOnly, supportText, errorMessage, maxLength, autoFocus, modes: propModes, style, inputStyle, inputTextStyle, onFocus, onBlur, onSubmitEditing, accessibilityLabel, accessibilityHint, testID, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<RNTextInput>>;
 export default FormField;
 //# sourceMappingURL=FormField.d.ts.map

package/lib/typescript/src/components/FullscreenModal/FullscreenModal.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type FullscreenModalProps = {
     /** Small eyebrow line above the headline. */
     eyebrow?: string;
@@ -57,7 +58,7 @@ export type FullscreenModalProps = {
      * and `context5` is always forced to `'Fullscreen Modal'` (non-overridable).
      * The resolved modes cascade to the body, hero media, and the `ActionFooter`.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides for the outer container. */
     style?: StyleProp<ViewStyle>;
     /** Style overrides for the transparent body wrapper. */

package/lib/typescript/src/components/Gauge/Gauge.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import { type SupportTextProps } from '../SupportText/SupportText';
+import type { Modes } from '../../design-tokens';
 type GaugeBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
 export type GaugeProps = GaugeBaseProps & {
     /** Current gauge value. Interpreted against `min` and `max`. */
@@ -26,7 +27,7 @@ export type GaugeProps = GaugeBaseProps & {
     /** Hides default support text when no custom readout slot is provided. */
     showSupportText?: boolean;
     /** Design token modes forwarded to token lookups and slot children. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Slot rendered in the center of the gauge arc. Receives `modes` recursively. */
     children?: React.ReactNode;
     /** Container style override. */

package/lib/typescript/src/components/HStack/HStack.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ViewStyle, ViewProps } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface HStackProps extends ViewProps {
     /**
      * The content to display inside the stack.
@@ -31,7 +32,7 @@ export interface HStackProps extends ViewProps {
     /**
      * Modes object to override default variable values.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
 }
 /**
  * HStack component for horizontal layout using design token spacing.

package/lib/typescript/src/components/HoldingsCard/HoldingsCard.d.ts

@@ -1,4 +1,5 @@
 import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface HoldingsCardDetailItem {
     label: string;
     value: string;
@@ -19,7 +20,7 @@ export interface HoldingsCardProps {
     /** Called when the card is pressed (toggles selection). */
     onPress?: () => void;
     /** Modes object for design-token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Custom style for the outer container. */
     style?: StyleProp<ViewStyle>;
     /** Test ID for testing. */

package/lib/typescript/src/components/Icon/Icon.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type AccessibilityProps, type StyleProp, type ViewStyle } from 'react-native';
 import type { UnifiedSource } from '../../utils/MediaSource';
+import type { Modes } from '../../design-tokens';
 type IconProps = AccessibilityProps & {
     /**
      * Built-in icon name from the registry, in the `ic_something` format
@@ -33,7 +34,7 @@ type IconProps = AccessibilityProps & {
      * from the `icon/size` design token.
      */
     size?: number;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
 };
 /**

package/lib/typescript/src/components/IconButton/IconButton.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type AccessibilityState, type StyleProp, type ViewStyle } from 'react-native';
 import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils';
 import type { UnifiedSource } from '../../utils/MediaSource';
+import type { Modes } from '../../design-tokens';
 type IconButtonProps = SafePressableProps & {
     /** Built-in icon name from the registry (default state). */
     iconName?: string;
@@ -13,7 +14,7 @@ type IconButtonProps = SafePressableProps & {
      * follows design tokens just like a built-in icon. See {@link UnifiedSource}.
      */
     source?: UnifiedSource;
-    modes?: Record<string, any>;
+    modes?: Modes;
     onPress?: () => void;
     disabled?: boolean;
     style?: StyleProp<ViewStyle>;

package/lib/typescript/src/components/IconCapsule/IconCapsule.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { UnifiedSource } from '../../utils/MediaSource';
+import type { Modes } from '../../design-tokens';
 type IconCapsuleProps = {
     iconName?: string;
     /**
@@ -12,7 +13,7 @@ type IconCapsuleProps = {
      * {@link UnifiedSource}.
      */
     source?: UnifiedSource;
-    modes?: Record<string, any>;
+    modes?: Modes;
     accessibilityLabel?: string;
     accessibilityRole?: string;
 } & React.ComponentProps<typeof View>;

package/lib/typescript/src/components/Image/Image.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ImageSourcePropType, type ImageStyle, type StyleProp, type ViewStyle, type ImageResizeMode } from 'react-native';
+type ImageResizeMethod = 'auto' | 'resize' | 'scale' | 'none';
 export type ImageProps = {
     /**
      * Image source. Accepts the same shapes as React Native's `<Image>` plus a
@@ -22,6 +23,21 @@ export type ImageProps = {
     ratio?: number | undefined;
     /** How the image is fit inside its box. Defaults to `'cover'`. */
     resizeMode?: ImageResizeMode | undefined;
+    /**
+     * (Android only) How the bitmap is resampled when the source resolution
+     * differs from the rendered box.
+     *
+     * RN's own default is `'auto'`, which for large source images silently picks
+     * `'resize'`: a pre-decode software downsample that DESTROYS detail and makes
+     * big hero/background images look soft/pixelated even when the asset is
+     * high-res. To avoid that, this component defaults to:
+     *   - `'none'` when an explicit `width` + `height` box is set (full-bleed
+     *     hero/background usage — full resolution, maximum sharpness), and
+     *   - `'scale'` otherwise (GPU scaling — high quality and memory-safe for
+     *     ordinary aspect-ratio images).
+     * Pass an explicit value to override. No-op on iOS/web.
+     */
+    resizeMethod?: ImageResizeMethod | undefined;
     /**
      * Optional explicit width. If omitted and a `ratio` is set, the image
      * defaults to `width: '100%'` so it fills its parent.
@@ -46,7 +62,7 @@ export type ImageProps = {
      */
     loading?: boolean | undefined;
 };
-declare function Image({ imageSource, ratio, resizeMode, width, height, borderRadius, style, accessibilityLabel, accessibilityElementsHidden, importantForAccessibility, loading, }: ImageProps): import("react/jsx-runtime").JSX.Element;
+declare function Image({ imageSource, ratio, resizeMode, resizeMethod, width, height, borderRadius, style, accessibilityLabel, accessibilityElementsHidden, importantForAccessibility, loading, }: ImageProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Image>;
 export default _default;
 //# sourceMappingURL=Image.d.ts.map

package/lib/typescript/src/components/InputSearch/InputSearch.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle, type TextStyle, type TextInputProps as RNTextInputProps } from 'react-native';
+import { TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextStyle, type TextInputProps as RNTextInputProps } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type InputSearchProps = {
     supportText?: boolean;
     supportTextLabel?: string;
@@ -8,7 +9,7 @@ export type InputSearchProps = {
      * (e.g. 'ic_info', 'ic_cart'). Defaults to 'ic_info'.
      */
     supportTextIcon?: string;
-    modes?: Record<string, any>;
+    modes?: Modes;
     containerStyle?: StyleProp<ViewStyle>;
     placeholder?: string;
     value?: string;
@@ -21,5 +22,26 @@ export type InputSearchProps = {
     accessibilityLabel?: string;
     accessibilityHint?: string;
 } & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
-export default function InputSearch({ supportText, supportTextLabel, supportTextIcon, modes, containerStyle, placeholder, value, onChangeText, onFocus, onBlur, leading, trailing, inputStyle, ...rest }: InputSearchProps): import("react/jsx-runtime").JSX.Element;
+declare const InputSearch: React.ForwardRefExoticComponent<{
+    supportText?: boolean;
+    supportTextLabel?: string;
+    /**
+     * Icon name from the icon registry to render inside the support text
+     * (e.g. 'ic_info', 'ic_cart'). Defaults to 'ic_info'.
+     */
+    supportTextIcon?: string;
+    modes?: Modes;
+    containerStyle?: StyleProp<ViewStyle>;
+    placeholder?: string;
+    value?: string;
+    onChangeText?: (text: string) => void;
+    onFocus?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    inputStyle?: StyleProp<TextStyle>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+} & Omit<RNTextInputProps, "style" | "value" | "onFocus" | "onBlur" | "placeholder" | "onChangeText"> & React.RefAttributes<RNTextInput>>;
+export default InputSearch;
 //# sourceMappingURL=InputSearch.d.ts.map

package/lib/typescript/src/components/InstitutionBadge/InstitutionBadge.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import { type UnifiedSource } from '../../utils/MediaSource';
+import type { Modes } from '../../design-tokens';
 type InstitutionBadgeBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
 export type InstitutionBadgeProps = InstitutionBadgeBaseProps & {
     /** Visible label for the institution (e.g. bank name). */
@@ -16,7 +17,7 @@ export type InstitutionBadgeProps = InstitutionBadgeBaseProps & {
     /** Slot replacing the default Avatar (e.g. for monogram avatars). Receives `modes` recursively. */
     avatarSlot?: React.ReactNode;
     /** Design token modes forwarded to token lookups and the Avatar slot. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Label style override. */

package/lib/typescript/src/components/LazyList/LazyList.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 type LazyListProps = {
     listGroupsSlot?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;

package/lib/typescript/src/components/LinearMeter/LinearMeter.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 type LinearMeterLabelProps = {
     children: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<TextStyle>;
 } & React.ComponentProps<typeof Text>;
 export type LinearMeterProps = {
     value?: number;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     trackStyle?: StyleProp<ViewStyle>;
     indicatorStyle?: StyleProp<ViewStyle>;

package/lib/typescript/src/components/LinearProgress/LinearProgress.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type LinearProgressProps = {
     /** Progress value between 0 and 1. Values are clamped. */
     value?: number;
     /** Design token modes for theming */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles (the track wrapper) */
     style?: StyleProp<ViewStyle>;
     /** Override the track styles */

package/lib/typescript/src/components/ListGroup/ListGroup.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 type ListGroupProps = {
     label?: string;
     listGroupSlot?: React.ReactNode;
     children?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle, type AccessibilityState } from 'react-native';
 import { type WebAccessibilityProps } from '../../utils/web-platform-utils';
+import type { Modes } from '../../design-tokens';
 type ListItemProps = {
     layout?: 'Vertical' | 'Horizontal';
     title?: string;
@@ -19,7 +20,7 @@ type ListItemProps = {
     endSlot?: React.ReactNode;
     /** Whether to show the NavArrow on the far right (Horizontal layout only). Defaults to true. */
     navArrow?: boolean;
-    modes?: Record<string, any>;
+    modes?: Modes;
     onPress?: () => void;
     style?: StyleProp<ViewStyle>;
     contentStyle?: StyleProp<ViewStyle>;

package/lib/typescript/src/components/LottieIntroBlock/LottieIntroBlock.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type LottieIntroBlockProps = {
     /** Headline text shown below the media area. */
     title?: string;
@@ -27,7 +28,7 @@ export type LottieIntroBlockProps = {
      */
     buttonSlot?: React.ReactNode;
     /** Mode configuration for design-token theming. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides applied to the outer container. */
     style?: StyleProp<ViewStyle>;
     testID?: string;

package/lib/typescript/src/components/LottiePlayer/LottiePlayer.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * A parsed Lottie animation. The JSON object you get from
  * `require('./animation.json')` or `fetch().then(r => r.json())`. We keep the
@@ -36,7 +37,7 @@ export type LottiePlayerProps = {
     /** Loop the animation. Defaults to `true`. */
     loop?: boolean;
     /** Mode configuration for design-token theming. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides applied to the underlying view. */
     style?: StyleProp<ViewStyle>;
     /** Accessibility label. Lottie is decorative by default. */

package/lib/typescript/src/components/LottiePlayer/LottiePlayer.web.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type LottieAnimationSource = Record<string, unknown>;
 export type LottiePlayerProps = {
     source: LottieAnimationSource;
@@ -9,7 +10,7 @@ export type LottiePlayerProps = {
     };
     autoPlay?: boolean;
     loop?: boolean;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     testID?: string;