jfs-components 0.0.99 → 0.1.2

package/src/components/MediaCard/MediaCard.tsx

@@ -4,8 +4,9 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Image from '../Image/Image'
 import GlassFill, { type GlassTint } from './GlassFill'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
-const MediaCardContext = createContext<{ modes?: Record<string, any> }>({})
+const MediaCardContext = createContext<{ modes?: Modes }>({})
 
 export interface MediaCardProps {
     /**
@@ -34,7 +35,7 @@ export interface MediaCardProps {
     /**
      * Modes object for token resolution.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /**
      * Style overrides for the card container.
      */
@@ -137,7 +138,7 @@ export function Header({ children, style }: { children?: React.ReactNode; style?
  * Title component.
  * Tokens: cardMedia/title/*
  */
-export function Title({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
+export function Title({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Modes }) {
     const context = useContext(MediaCardContext)
     const modes = propModes || context.modes || {}
 
@@ -181,7 +182,7 @@ export function Title({ children, style, modes: propModes }: { children?: React.
  *
  * Tokens still drive the tint color, blur intensity and inner spacing.
  */
-export function Footer({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
+export function Footer({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Modes }) {
     const context = useContext(MediaCardContext)
     const modes = propModes || context.modes || {}
 
@@ -245,7 +246,7 @@ export function Footer({ children, style, modes: propModes }: { children?: React
  * Footer Title
  * Tokens: cardMedia/footer/title/*
  */
-export function FooterTitle({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
+export function FooterTitle({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Modes }) {
     const context = useContext(MediaCardContext)
     const modes = propModes || context.modes || {}
 
@@ -266,7 +267,7 @@ export function FooterTitle({ children, style, modes: propModes }: { children?:
  * Footer Subtitle
  * Tokens: cardMedia/footer/subtitle/*
  */
-export function FooterSubtitle({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
+export function FooterSubtitle({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Modes }) {
     const context = useContext(MediaCardContext)
     const modes = propModes || context.modes || {}
 

package/src/components/MerchantProfile/MerchantProfile.tsx

@@ -9,6 +9,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Avatar, { type AvatarProps } from '../Avatar/Avatar'
+import type { Modes } from '../../design-tokens'
 
 export type MerchantProfileProps = {
   /**
@@ -23,7 +24,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/src/components/MessageField/MessageField.tsx

@@ -12,6 +12,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import { useFormContext } from '../Form/Form'
+import type { Modes } from '../../design-tokens'
 
 // ---------------------------------------------------------------------------
 // Types
@@ -82,7 +83,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). */
@@ -129,7 +130,7 @@ function firstError(error: string | string[] | undefined): string | undefined {
     return error
 }
 
-function useMessageFieldTokens(modes: Record<string, any>) {
+function useMessageFieldTokens(modes: Modes) {
     return useMemo(() => {
         const wrapperGap = toNumber(getVariableByName('messageField/gap', modes), 8)
 

package/src/components/MetricLegendItem/MetricLegendItem.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type MetricLegendItemProps = {
     /** The label text on the left (after the indicator). */
@@ -29,7 +30,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/src/components/MoneyValue/MoneyValue.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 // Map of common ISO 4217 currency codes to display symbols
 const CURRENCY_SYMBOLS = {
@@ -58,7 +59,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/src/components/MonthlyStatusGrid/MonthlyStatusGrid.tsx

@@ -10,6 +10,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
+import type { Modes } from '../../design-tokens'
 
 /**
  * The three semantic states a calendar glyph can be in. Maps 1:1 to the
@@ -37,7 +38,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
 }
@@ -67,7 +68,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). */
@@ -162,7 +163,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. */
@@ -268,7 +269,7 @@ function CalendarGlyph({
  */
 function resolveStatusColors(
   status: MonthlyStatus,
-  modes: Record<string, any>
+  modes: Modes
 ): { bg: string; fg: string; statusModes: Record<string, any> } {
   const statusModes = { ...modes, 'Calendar Glyph State': status }
   const bg =

package/src/components/NavArrow/NavArrow.tsx

@@ -14,6 +14,7 @@ import {
   type SafePressableProps,
 } from '../../utils/web-platform-utils'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type NavArrowDirection = 'Back' | 'Forward' | 'Down'
 
@@ -33,7 +34,7 @@ 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 */
@@ -55,7 +56,7 @@ interface NavArrowTokens {
   backgroundColor: string
 }
 
-function resolveNavArrowTokens(modes: Record<string, any>): NavArrowTokens {
+function resolveNavArrowTokens(modes: Modes): NavArrowTokens {
   const iconColor =
     (getVariableByName('navArrow/icon/color', modes) as string) || '#24262b'
 

package/src/components/NoteInput/NoteInput.tsx

@@ -12,6 +12,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type NoteInputProps = {
     /** The value of the text input */
@@ -21,7 +22,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/src/components/Nudge/Nudge.tsx

@@ -5,6 +5,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 import Button from '../Button/Button'
 import Icon from '../../icons/Icon'
+import type { Modes } from '../../design-tokens'
 
 export type NudgeType = 'stacked-prominent' | 'stacked-detailed' | 'inline-compact'
 
@@ -31,7 +32,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>;
 };
@@ -61,7 +62,7 @@ function toFontWeight(value: unknown, fallback: TextStyle['fontWeight']): TextSt
   return fallback
 }
 
-function resolveNudgeTokens(modes: Record<string, any>): NudgeTokens {
+function resolveNudgeTokens(modes: Modes): NudgeTokens {
   const background = getVariableByName('nudge/background', modes) || '#f5f5f5'
   const radius = getVariableByName('nudge/radius', modes) || 12
   const paddingH = getVariableByName('nudge/padding/horizontal', modes) || 12

package/src/components/Numpad/Numpad.tsx

@@ -10,6 +10,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
+import type { Modes } from '../../design-tokens'
 
 export type NumpadKeyValue =
   | '0'
@@ -27,7 +28,7 @@ export type NumpadKeyValue =
 
 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/src/components/OTP/OTP.tsx

@@ -14,6 +14,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import SupportText, { type SupportTextProps } from '../SupportText/SupportText'
 import Button from '../Button/Button'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 // Default mode overrides for the resend Button. Per design: a small,
 // low-emphasis, neutral-appearance button. Consumers can override any of
@@ -223,7 +224,7 @@ export type OTPResendConfig = {
 }
 
 export type OTPResendProps = OTPResendConfig & {
-    modes?: Record<string, any>
+    modes?: Modes
     style?: StyleProp<ViewStyle>
 }
 
@@ -338,7 +339,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/src/components/Overlay/Overlay.tsx

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react'
+import {
+  Pressable,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+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>
+}
+
+const PLACEMENT_STYLE: Record<NonNullable<OverlayProps['contentPlacement']>, ViewStyle> = {
+  center: { justifyContent: 'center', alignItems: 'center' },
+  top: { justifyContent: 'flex-start', alignItems: 'stretch' },
+  bottom: { justifyContent: 'flex-end', alignItems: 'stretch' },
+  stretch: { justifyContent: 'center', alignItems: 'stretch' },
+}
+
+/**
+ * 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>
+ * ```
+ */
+function Overlay({
+  children,
+  contentPlacement = 'center',
+  onPress,
+  fill = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}: OverlayProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
+
+  const { containerStyle, processedChildren } = useMemo(() => {
+    const backgroundColor = (getVariableByName('overlay/background', modes) ??
+      'rgba(0, 0, 0, 0.7)') as string
+
+    const container: ViewStyle = {
+      backgroundColor,
+      overflow: 'hidden',
+      ...PLACEMENT_STYLE[contentPlacement],
+    }
+
+    const processed = children ? cloneChildrenWithModes(children, modes) : null
+
+    return { containerStyle: container, processedChildren: processed }
+  }, [children, modes, contentPlacement])
+
+  return (
+    <View
+      style={[fill && StyleSheet.absoluteFill, containerStyle, style]}
+      accessibilityViewIsModal
+      {...rest}
+    >
+      {onPress ? (
+        <Pressable
+          style={StyleSheet.absoluteFill}
+          onPress={onPress}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss overlay"
+        />
+      ) : null}
+      {processedChildren}
+    </View>
+  )
+}
+
+export default React.memo(Overlay)

package/src/components/PageHero/PageHero.tsx

@@ -10,6 +10,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Button from '../Button/Button'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type PageHeroProps = {
   /** Small eyebrow text shown above the headline. */
@@ -50,7 +51,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/src/components/PaymentFeedback/PaymentFeedback.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type PaymentFeedbackProps = {
   /** Large heading text, typically a monetary value (e.g. "₹50,000") */
@@ -25,7 +26,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
 }
 

package/src/components/PlanComparisonCard/PlanComparisonCard.tsx

@@ -11,6 +11,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
+import type { Modes } from '../../design-tokens'
 
 /** Figma grid: label column 1.8fr, each plan column 1fr. */
 const LABEL_COLUMN_FR = 1.8;
@@ -73,7 +74,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/src/components/Popup/Popup.tsx

@@ -13,6 +13,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import VStack from '../VStack/VStack'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type PopupRef = {
     open: () => void
@@ -31,7 +32,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/src/components/PortfolioHero/PortfolioHero.tsx

@@ -10,6 +10,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { cloneChildrenWithModes } from '../../utils/react-utils'
 import Avatar from '../Avatar/Avatar'
 import MoneyValue from '../MoneyValue/MoneyValue'
+import type { Modes } from '../../design-tokens'
 
 export type PortfolioHeroProps = {
   /** Product label text displayed next to the avatar. */
@@ -21,7 +22,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/src/components/PoweredByLabel/PoweredByLabel.tsx

@@ -11,6 +11,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
+import type { Modes } from '../../design-tokens'
 
 // Default bundled FINVU brand logo, matching the Figma reference so the
 // component renders correctly out of the box without any image prop.
@@ -52,7 +53,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/src/components/ProductLabel/ProductLabel.tsx

@@ -3,6 +3,7 @@ import { View, Text, type ViewStyle, type TextStyle, type ImageSourcePropType }
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Avatar from '../Avatar/Avatar'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type ProductLabelProps = {
   /** The product name label text. */
@@ -10,7 +11,7 @@ export type ProductLabelProps = {
   /** 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/src/components/ProductOverview/ProductOverview.tsx

@@ -11,6 +11,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Image from '../Image/Image'
 import ProductLabel from '../ProductLabel/ProductLabel'
+import type { Modes } from '../../design-tokens'
 
 export type ProductOverviewStat = {
     /** The large prominent value shown on top, e.g. "995", "3%". */
@@ -38,7 +39,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/src/components/ProgressBadge/ProgressBadge.tsx

@@ -9,6 +9,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type ProgressBadgeProps = {
     /** The text displayed in the badge (e.g. "Live price...") */
@@ -18,7 +19,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/src/components/Radio/Radio.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 // ---------------------------------------------------------------------------
 // Props
@@ -31,7 +32,7 @@ export interface RadioProps {
     /**
      * Modes object for design-token resolution.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /**
      * Custom style for the radio container.
      */

package/src/components/RangeTrack/RangeTrack.tsx

@@ -9,6 +9,7 @@ import SegmentedTrack, {
 } from '../SegmentedTrack/SegmentedTrack'
 import Tabs from '../Tabs/Tabs'
 import TabItem from '../Tabs/TabItem'
+import type { Modes } from '../../design-tokens'
 
 /**
  * One row of data inside a `RangeTrack` tab.
@@ -48,7 +49,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
 }
@@ -119,7 +120,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/src/components/RechargeCard/RechargeCard.tsx

@@ -5,6 +5,7 @@ import AvatarGroup from '../AvatarGroup/AvatarGroup';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import MoneyValue from '../MoneyValue/MoneyValue';
+import type { Modes } from '../../design-tokens'
 
 // Defaults applied to the inner ButtonGroup so the card matches Figma out of
 // the box. They are spread *before* the caller's `modes` so any consumer can
@@ -62,7 +63,7 @@ export type RechargeCardProps = {
     /**
      * Mode configuration for design tokens.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 

package/src/components/SavingsGoalSummary/SavingsGoalSummary.tsx

@@ -11,6 +11,7 @@ import { formatIndianNumber } from '../../utils/number-utils'
 import Title from '../Title/Title'
 import LinearProgress from '../LinearProgress/LinearProgress'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
+import type { Modes } from '../../design-tokens'
 
 /**
  * A single row in the savings-goal legend (current vs. target).
@@ -72,7 +73,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>
     /**