jfs-components 0.0.99 → 0.1.2

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;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface MediaCardProps {
     /**
      * Image source for the background media. Same shape as the rest of the
@@ -27,7 +28,7 @@ export interface MediaCardProps {
     /**
      * Modes object for token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Style overrides for the card container.
      */
@@ -77,7 +78,7 @@ export declare function Header({ children, style }: {
 export declare function Title({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Glass Footer — pinned to the bottom of the card, **always** on top of the
@@ -105,7 +106,7 @@ export declare function Title({ children, style, modes: propModes }: {
 export declare function Footer({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Footer Title
@@ -114,7 +115,7 @@ export declare function Footer({ children, style, modes: propModes }: {
 export declare function FooterTitle({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Footer Subtitle
@@ -123,7 +124,7 @@ export declare function FooterTitle({ children, style, modes: propModes }: {
 export declare function FooterSubtitle({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 export default MediaCard;
 //# sourceMappingURL=MediaCard.d.ts.map

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

@@ -1,5 +1,6 @@
 import { type ViewStyle, type StyleProp } from 'react-native';
 import { type AvatarProps } from '../Avatar/Avatar';
+import type { Modes } from '../../design-tokens';
 export type MerchantProfileProps = {
     /**
      * The merchant's display name or title
@@ -13,7 +14,7 @@ export type MerchantProfileProps = {
      * Mode configuration passed to the token resolver.
      * Also passed to the Avatar child component for consistent theming.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides for the container
      */

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

@@ -1,4 +1,5 @@
 import { type StyleProp, type TextInputProps as RNTextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * Visual state of the textarea. Mirrors the `FormField States` collection so
  * MessageField slots into the same theming pipeline as FormField. The state
@@ -58,7 +59,7 @@ export type MessageFieldProps = {
     /** Auto-focus the textarea on mount. */
     autoFocus?: boolean;
     /** Modes for design token resolution (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides for the outermost wrapper. */
     style?: StyleProp<ViewStyle>;
     /** Style overrides for the textarea container (border/padding/etc). */

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type MetricLegendItemProps = {
     /** The label text on the left (after the indicator). */
     label?: React.ReactNode;
@@ -20,7 +21,7 @@ export type MetricLegendItemProps = {
      */
     indicatorShape?: 'dot' | 'line';
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
     /** Override the indicator (dot) styles. */

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Pressable, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type MoneyValueProps = {
     /** Monetary value to display. */
     value?: string | number;
@@ -12,7 +13,7 @@ export type MoneyValueProps = {
     /** When true, a blinking vertical cursor is shown at the end of the value text. */
     focused?: boolean;
     /** Modes configuration mapped to Figma tokens. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     valueStyle?: StyleProp<TextStyle>;
     currencyStyle?: StyleProp<TextStyle>;

package/lib/typescript/src/components/MonthlyStatusGrid/MonthlyStatusGrid.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';
 /**
  * The three semantic states a calendar glyph can be in. Maps 1:1 to the
  * Figma `Calendar Glyph State` collection modes (`Idle`, `notSaved`,
@@ -25,7 +26,7 @@ export type MonthlyStatusGridMonth = {
      * Per-month design token mode overrides. Merged on top of the parent
      * `modes` and the per-month `Calendar Glyph State` derived from `status`.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Per-month accessibility label. */
     accessibilityLabel?: string;
 };
@@ -54,7 +55,7 @@ export type MonthlyStatusGridProps = {
      */
     legendStatuses?: MonthlyStatus[];
     /** Design token modes (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Style applied to the months section (the rows wrapper). */
@@ -79,7 +80,7 @@ export type CalendarGlyphProps = {
      */
     status?: MonthlyStatus;
     /** Design token mode overrides. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Label text style override. */

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import { type SafePressableProps } from '../../utils/web-platform-utils';
+import type { Modes } from '../../design-tokens';
 type NavArrowDirection = 'Back' | 'Forward' | 'Down';
 type NavArrowProps = SafePressableProps & {
     /** Direction of the arrow: 'Back' (left chevron), 'Forward' (right chevron), or 'Down' */
     direction?: NavArrowDirection;
     /** Modes used to resolve design tokens */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Optional additional container style */
     style?: StyleProp<ViewStyle>;
     /** Accessibility label for the arrow */

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

@@ -1,4 +1,5 @@
 import { type StyleProp, type ViewStyle, type TextStyle, type TextInputProps } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type NoteInputProps = {
     /** The value of the text input */
     value?: string;
@@ -7,7 +8,7 @@ export type NoteInputProps = {
     /** Callback when text changes */
     onChangeText?: (text: string) => void;
     /** Design token modes (e.g., {'InputState': 'Idle', 'Color Mode': 'Light'}) */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Custom container style */
     style?: StyleProp<ViewStyle>;
     /** Custom text input style */

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type NudgeType = 'stacked-prominent' | 'stacked-detailed' | 'inline-compact';
 export type NudgeProps = {
     /**
@@ -24,7 +25,7 @@ export type NudgeProps = {
     /** Content slot — overrides default content, or provides detailed list content */
     children?: React.ReactNode;
     /** Mode configuration for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Optional container style overrides */
     style?: StyleProp<ViewStyle>;
 };

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

@@ -1,8 +1,9 @@
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type NumpadKeyValue = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '.' | 'backspace';
 export interface NumpadProps {
     /** Design token modes for theming (e.g., {"Color Mode": "Light"}) */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Callback fired when any key is pressed */
     onKeyPress?: (key: NumpadKeyValue) => void;
     /** Whether to show the decimal point key (default: true) */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
 import { type SupportTextProps } from '../SupportText/SupportText';
+import type { Modes } from '../../design-tokens';
 export type OtpResendState = 'counting' | 'ready' | 'sending';
 export type UseOtpResendOptions = {
     /** Countdown length in seconds. Defaults to 30. */
@@ -62,7 +63,7 @@ export type OTPResendConfig = {
     resendButtonModes?: Record<string, any>;
 };
 export type OTPResendProps = OTPResendConfig & {
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
 };
 export declare function OTPResend({ durationSeconds, onResend, autoStart, formatCountdown, sendingLabel, resendLabel, countdownStatus, resendButtonModes, modes: propModes, style, }: OTPResendProps): import("react/jsx-runtime").JSX.Element;
@@ -88,7 +89,7 @@ export type OTPProps = {
     /** Auto-focus the input on mount. */
     autoFocus?: boolean;
     /** Design token modes for Figma token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Optional SupportText rendered below the slots. Pass a string for the label or a ReactNode for full control. */

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type OverlayProps = Omit<ViewProps, 'children' | 'style'> & {
+    /**
+     * Content rendered on top of the scrim. `modes` are cascaded to every child
+     * via {@link cloneChildrenWithModes}. When omitted the overlay renders as a
+     * bare backdrop.
+     */
+    children?: React.ReactNode;
+    /**
+     * How `children` are positioned within the overlay.
+     * - `center` (default): centers content both axes
+     * - `top` / `bottom`: pins content to the top/bottom edge
+     * - `stretch`: stretches content to fill the overlay
+     */
+    contentPlacement?: 'center' | 'top' | 'bottom' | 'stretch';
+    /**
+     * Called when the scrim (the area outside `children`) is pressed. Typically
+     * used to dismiss the overlaid surface. When omitted the backdrop is inert.
+     */
+    onPress?: () => void;
+    /**
+     * When `true` (default) the overlay covers its parent via `StyleSheet.absoluteFill`.
+     * Set to `false` to lay it out in normal flow (driven by `style`).
+     */
+    fill?: boolean;
+    /**
+     * Mode configuration passed to the token resolver and cascaded to children.
+     */
+    modes?: Modes;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Overlay — a token-driven scrim that dims content behind an overlaid surface.
+ *
+ * Renders a semi-transparent backdrop using the `overlay/background` design
+ * token and optionally hosts content (e.g. a modal, sheet or dialog) on top.
+ * Pair it with a `Modal` for true full-screen overlays, or drop it inside any
+ * relatively-positioned container to dim just that region.
+ *
+ * @example
+ * ```tsx
+ * <Overlay modes={modes} onPress={close}>
+ *   <Card>Dialog content</Card>
+ * </Overlay>
+ * ```
+ */
+declare function Overlay({ children, contentPlacement, onPress, fill, modes: propModes, style, ...rest }: OverlayProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Overlay>;
+export default _default;
+//# sourceMappingURL=Overlay.d.ts.map

package/lib/typescript/src/components/PageHero/PageHero.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 PageHeroProps = {
     /** Small eyebrow text shown above the headline. */
     eyebrow?: string;
@@ -39,7 +40,7 @@ export type PageHeroProps = {
      */
     media?: 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/PaymentFeedback/PaymentFeedback.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type PaymentFeedbackProps = {
     /** Large heading text, typically a monetary value (e.g. "₹50,000") */
     title?: string;
@@ -20,7 +21,7 @@ export type PaymentFeedbackProps = {
      * IconCapsule's color — pass `AppearanceSystem: 'positive' | 'warning' |
      * 'negative'` to render a green/orange/red capsule (defaults to `positive`).
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 export default function PaymentFeedback({ title, subtitle, body, details, showDetails, iconName, renderMedia, modes: propModes, style, }: PaymentFeedbackProps): import("react/jsx-runtime").JSX.Element;

package/lib/typescript/src/components/PlanComparisonCard/PlanComparisonCard.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 single plan column header (the label column has no header of its own).
  */
@@ -48,7 +49,7 @@ export type PlanComparisonCardProps = {
     /** Feature rows compared across the plan columns. */
     rows?: PlanComparisonRow[];
     /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override the outer container style. */
     style?: StyleProp<ViewStyle>;
 };

package/lib/typescript/src/components/Popup/Popup.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 PopupRef = {
     open: () => void;
     close: () => void;
@@ -16,7 +17,7 @@ export type PopupProps = {
     /** Slot content displayed inside the popup. */
     children?: React.ReactNode;
     /** Mode configuration for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Whether pressing the backdrop closes the popup. */
     closeOnBackdropPress?: boolean;
     /** Backdrop overlay color. */

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type PortfolioHeroProps = {
     /** Product label text displayed next to the avatar. */
     label?: string;
@@ -10,7 +11,7 @@ export type PortfolioHeroProps = {
     /** Currency symbol or ISO code. */
     currency?: string;
     /** Modes configuration mapped to Figma tokens. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Slot content rendered below the money value (e.g. Badge, subtitle). */
     children?: React.ReactNode;
     /** Container style override. */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type ImageStyle, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import { type UnifiedSource } from '../../utils/MediaSource';
+import type { Modes } from '../../design-tokens';
 export type PoweredByLabelProps = {
     /**
      * Label copy. Defaults to "Powered by RBI-regulated account aggregator"
@@ -33,7 +34,7 @@ export type PoweredByLabelProps = {
     /**
      * Design token modes for theming (e.g. `{ 'Color Mode': 'Dark' }`).
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Label text style override. */

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

@@ -1,11 +1,12 @@
 import { type ViewStyle, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type ProductLabelProps = {
     /** The product name label text. */
     label?: string;
     /** Image source for the product avatar. */
     imageSource?: ImageSourcePropType | string;
     /** Modes configuration for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: ViewStyle;
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type ProductOverviewStat = {
     /** The large prominent value shown on top, e.g. "995", "3%". */
     value: string;
@@ -25,7 +26,7 @@ export type ProductOverviewProps = {
      */
     stats?: ProductOverviewStat[];
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /**

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type ProgressBadgeProps = {
     /** The text displayed in the badge (e.g. "Live price...") */
     taskName?: string;
@@ -8,7 +9,7 @@ export type ProgressBadgeProps = {
     /** The progress value between 0 and 100 */
     value?: number;
     /** Modes object passed to `getVariableByName` for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Optional container style overrides */
     style?: StyleProp<ViewStyle>;
     /** Optional text style overrides */

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

@@ -1,4 +1,5 @@
 import { ViewStyle, StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface RadioProps {
     /**
      * Whether the radio is selected.
@@ -15,7 +16,7 @@ export interface RadioProps {
     /**
      * Modes object for design-token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Custom style for the radio container.
      */

package/lib/typescript/src/components/RangeTrack/RangeTrack.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 data inside a `RangeTrack` tab.
  *
@@ -38,7 +39,7 @@ export type RangeTrackItem = {
      * `modes` and the per-index `Emphasis / DataViz` defaults
      * (`High`, `Medium`, `Low`, then cycles).
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Accessibility label for the segment + legend row pairing. */
     accessibilityLabel?: string;
 };
@@ -107,7 +108,7 @@ export type RangeTrackProps = {
      */
     scrollableTabs?: boolean;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override the outer container styles. */
     style?: StyleProp<ViewStyle>;
     /** Override the tab row styles. */

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type RechargeCardProps = {
     /**
      * Title of the card.
@@ -39,7 +40,7 @@ export type RechargeCardProps = {
     /**
      * Mode configuration for design tokens.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 /**

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * A single row in the savings-goal legend (current vs. target).
  *
@@ -59,7 +60,7 @@ export type SavingsGoalSummaryProps = {
      * which renders the thicker progress bar from the Figma reference. Caller
      * modes are merged on top and can override every default key.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
     /**

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface ScreenProps {
     /**
      * The content to display inside the screen.
@@ -8,7 +9,7 @@ export interface ScreenProps {
     /**
      * Modes object to override default variable values.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides for the container.
      */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { type WebAccessibilityProps } from '../../utils/web-platform-utils';
+import type { Modes } from '../../design-tokens';
 type SectionProps = {
     title?: string;
     supportText?: string;
@@ -8,7 +9,7 @@ type SectionProps = {
     slot?: React.ReactNode;
     /** Layout direction of the slot's children. Defaults to 'row' (horizontal). */
     slotDirection?: 'row' | 'column';
-    modes?: Record<string, any>;
+    modes?: Modes;
     onPress?: () => void;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
@@ -29,7 +30,7 @@ type BentoToggleRenderState = {
 type SectionBentoProps = {
     navSlot?: React.ReactNode;
     upiSlot?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;