jfs-components 0.1.0 → 0.1.8

package/src/components/StatItem/StatItem.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 StatItemLabelPosition = 'Top' | 'Bottom'
 
@@ -25,7 +26,7 @@ export type StatItemProps = {
    */
   labelPosition?: StatItemLabelPosition
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override container styles. */
   style?: StyleProp<ViewStyle>
   /** Override the label text styles. */

package/src/components/StatusHero/StatusHero.tsx

@@ -5,6 +5,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import MoneyValue from '../MoneyValue/MoneyValue'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type StatusHeroProps = {
   /**
@@ -26,7 +27,7 @@ export type StatusHeroProps = {
   /** Currency symbol or ISO code for the default MoneyValue */
   currency?: string
   /** Mode configuration for design tokens */
-  modes?: Record<string, any>
+  modes?: Modes
   style?: ViewStyle
 }
 

package/src/components/Stepper/Step.tsx

@@ -4,12 +4,13 @@ import Svg, { Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { StepLabel } from './StepLabel'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type StepStatus = 'number' | 'complete' | 'error' | 'warning'
 
 export type StepProps = {
     children?: React.ReactNode
-    modes?: Record<string, any>
+    modes?: Modes
     style?: ViewStyle
     // Injected by Stepper, or provided manually
     index?: number

package/src/components/Stepper/StepLabel.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle } 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 StepLabelProps = {
     title?: string
@@ -9,7 +10,7 @@ export type StepLabelProps = {
     metaText?: string
     subtitle?: boolean
     meta?: boolean
-    modes?: Record<string, any>
+    modes?: Modes
     style?: ViewStyle
 }
 

package/src/components/Stepper/Stepper.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { Step } from './Step'
 import { StepLabel } from './StepLabel'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export { Step, StepLabel }
 export type { StepProps, StepStatus } from './Step'
@@ -11,7 +12,7 @@ export type { StepLabelProps } from './StepLabel'
 
 export type StepperProps = {
     children?: React.ReactNode
-    modes?: Record<string, any>
+    modes?: Modes
     style?: ViewStyle
 }
 

package/src/components/StrengthIndicator/StrengthIndicator.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /**
  * Confidence levels supported by the indicator. Mirrors the Figma `Confidence`
@@ -40,7 +41,7 @@ export type StrengthIndicatorProps = {
      */
     confidence?: StrengthIndicatorConfidenceValue
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override container styles. */
     style?: StyleProp<ViewStyle>
 } & Omit<React.ComponentProps<typeof View>, 'style'>

package/src/components/SuggestiveSearch/SuggestiveSearch.tsx

@@ -23,6 +23,7 @@ import { EMPTY_MODES } from '../../utils/react-utils'
 import SupportText from '../SupportText/SupportText'
 import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
 import Dropdown, { DropdownItem } from '../Dropdown/Dropdown'
+import type { Modes } from '../../design-tokens'
 
 const IS_WEB = Platform.OS === 'web'
 
@@ -134,7 +135,7 @@ export type SuggestiveSearchProps = {
     /** Replaces `supportText` when `isInvalid` is true. */
     errorMessage?: string
     /** 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. */
@@ -180,7 +181,7 @@ const defaultFilter = (query: string, option: SuggestiveSearchOption) =>
 // Token resolution
 // ---------------------------------------------------------------------------
 
-function useFormFieldTokens(modes: Record<string, any>) {
+function useFormFieldTokens(modes: Modes) {
     return useMemo(() => {
         const labelColor =
             (getVariableByName('formField/label/color', modes) as string) ||
@@ -261,7 +262,7 @@ function useFormFieldTokens(modes: Record<string, any>) {
     }, [modes])
 }
 
-function useDropdownItemTextTokens(modes: Record<string, any>) {
+function useDropdownItemTextTokens(modes: Modes) {
     return useMemo(() => {
         const foreground =
             (getVariableByName('dropdownItem/foreground', modes) as string) ||

package/src/components/SummaryTile/SummaryTile.tsx

@@ -15,6 +15,7 @@ import NavArrow from '../NavArrow/NavArrow'
 import StrengthIndicator, {
     type StrengthIndicatorConfidenceValue,
 } from '../StrengthIndicator/StrengthIndicator'
+import type { Modes } from '../../design-tokens'
 
 export type SummaryTileProps = {
     /** Bold heading shown at the top-left of the tile. */
@@ -50,7 +51,7 @@ export type SummaryTileProps = {
      */
     onPress?: () => void
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override container styles. */
     style?: StyleProp<ViewStyle>
     /** Override the title text styles. */

package/src/components/SupportText/SupportText.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import SupportTextIcon, { type SupportTextStatus } from './SupportTextIcon';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import type { Modes } from '../../design-tokens'
 
 export type SupportTextProps = {
     /**
@@ -27,7 +28,7 @@ export type SupportTextProps = {
     /**
      * Modes object for design token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
 
     style?: StyleProp<ViewStyle>;
 };

package/src/components/SupportText/SupportTextIcon.tsx

@@ -3,12 +3,13 @@ import { View, type ViewStyle } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import type { Modes } from '../../design-tokens'
 
 export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success' | 'Loading';
 
 export type SupportTextIconProps = {
     status?: SupportTextStatus;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 

package/src/components/SwappableAmount/SwappableAmount.tsx

@@ -3,6 +3,7 @@ import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Button from '../Button/Button'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type SwappableAmountProps = {
   /** Large display value (e.g. "49g"). */
@@ -18,7 +19,7 @@ export type SwappableAmountProps = {
   /** Callback when the amount/swap button is pressed. */
   onAmountPress?: () => void
   /** Modes configuration for design token resolution. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: ViewStyle
 }

package/src/components/Tabs/TabItem.tsx

@@ -9,6 +9,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 interface TabItemProps {
   /** Label text to display */
@@ -18,7 +19,7 @@ export interface TabItemProps {
   /** Callback when this tab item is pressed */
   onPress?: () => void
   /** Design token modes for theming */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override container styles */
   style?: StyleProp<ViewStyle>
   /** Override label text styles */

package/src/components/Tabs/Tabs.tsx

@@ -8,6 +8,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import TabItem from './TabItem'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export interface TabsProps {
   /**
@@ -16,7 +17,7 @@ export interface TabsProps {
    */
   children: React.ReactNode
   /** Design token modes for theming */
-  modes?: Record<string, any>
+  modes?: Modes
   /**
    * When true, the tabs row scrolls horizontally (useful for many items).
    * @default false

package/src/components/TestimonialsCard/TestimonialsCard.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 TestimonialsCardProps = {
   /**
@@ -23,7 +24,7 @@ export type TestimonialsCardProps = {
    * Mode configuration passed to the token resolver. Also forwarded to the
    * Avatar child for consistent theming.
    */
-  modes?: Record<string, any>
+  modes?: Modes
   /**
    * Optional style overrides for the card container.
    */

package/src/components/Text/Text.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
+import type { Modes } from '../../design-tokens'
 
 export type TextProps = {
   /**
@@ -20,7 +21,7 @@ export type TextProps = {
   /** Horizontal alignment of the text. */
   textAlign?: 'Left' | 'Center'
   /** Modes configuration for design token resolution. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Style override for the text. */
   style?: StyleProp<TextStyle>
   /** Number of lines to limit the text to. */

package/src/components/TextInput/TextInput.tsx

@@ -1,8 +1,9 @@
-import React, { useRef, useState } from 'react'
+import React, { forwardRef, useRef, useState } from 'react'
 import { Platform, Pressable, View, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, mergeRefs } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /**
  * TextInput component that mirrors the Figma "textInput" component.
@@ -102,7 +103,7 @@ type TextInputProps = {
   leadingIconName?: string;
   leading?: React.ReactNode;
   trailing?: React.ReactNode;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   inputStyle?: StyleProp<TextStyle>;
   onFocus?: (e: any) => void;
@@ -111,7 +112,7 @@ type TextInputProps = {
   accessibilityHint?: string;
 } & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
 
-function TextInput({
+const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput({
   placeholder = '',
   value = '',
   onChangeText,
@@ -126,7 +127,7 @@ function TextInput({
   accessibilityLabel,
   accessibilityHint,
   ...rest
-}: TextInputProps) {
+}: TextInputProps, ref: React.Ref<RNTextInput>) {
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
@@ -250,7 +251,7 @@ function TextInput({
         </View>
       )}
       <RNTextInput
-        ref={inputRef}
+        ref={mergeRefs(inputRef, ref)}
         accessibilityLabel={undefined}
         accessibilityHint={accessibilityHint}
         placeholder={displayPlaceholder}
@@ -289,7 +290,7 @@ function TextInput({
   }
 
   return <View style={containerStyleArray}>{inner}</View>
-}
+})
 
 /**
  * TextInput.Search component that mirrors the Figma "textInput.search" component.
@@ -315,7 +316,7 @@ type TextInputSearchProps = {
   value?: string;
   onChangeText?: (text: string) => void;
   leading?: React.ReactNode;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   inputStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;
@@ -324,7 +325,7 @@ type TextInputSearchProps = {
   onBlur?: (e: any) => void;
 } & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
 
-function TextInputSearch({
+const TextInputSearch = forwardRef<RNTextInput, TextInputSearchProps>(function TextInputSearch({
   placeholder = 'Search',
   value = '',
   onChangeText,
@@ -337,7 +338,7 @@ function TextInputSearch({
   onFocus,
   onBlur,
   ...rest
-}: TextInputSearchProps) {
+}: TextInputSearchProps, ref: React.Ref<RNTextInput>) {
   // Resolve icon tokens for default search icon
   const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b'
   const iconSize = getVariableByName('textInput/icon/size', modes) || 18
@@ -378,10 +379,14 @@ function TextInputSearch({
     textInputProps.accessibilityHint = accessibilityHint
   }
 
-  return <TextInput {...(textInputProps as TextInputProps)} />
-}
+  return <TextInput ref={ref} {...(textInputProps as TextInputProps)} />
+})
 
-// Attach Search as a property of TextInput using namespace pattern
+// Attach Search as a property of TextInput using namespace pattern. The base
+// component is created via forwardRef, so we compose the static onto a typed
+// alias to keep `TextInput.Search` strongly typed.
+type TextInputComponent = typeof TextInputBase & { Search: typeof TextInputSearch }
+const TextInput = TextInputBase as TextInputComponent
 TextInput.Search = TextInputSearch
 
 export default TextInput

package/src/components/TextSegment/TextSegment.tsx

@@ -0,0 +1,166 @@
+import React, { useMemo } from 'react'
+import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single coloured run inside a {@link TextSegment}. Each run can carry its own
+ * `modes`, so individual fragments of the same paragraph can resolve different
+ * design tokens (most commonly a different `text/foreground` colour) while still
+ * flowing — and wrapping — inline as one continuous line of text.
+ */
+export type TextSegmentRun = {
+  /** The text for this run. Include trailing/leading spaces yourself when you want spacing between runs (inline text has no gap concept). */
+  text: string
+  /**
+   * Per-run mode overrides. Merged on top of the parent `TextSegment` modes, so
+   * a run only needs to specify what differs (e.g. `{ 'Text Appearance': 'Primary' }`
+   * to recolour just that fragment). Everything else is inherited.
+   */
+  modes?: Modes
+  /** Optional per-run style override applied last, on top of the token-resolved style. */
+  style?: StyleProp<TextStyle>
+}
+
+export type TextSegmentProps = {
+  /**
+   * Declarative, data-driven way to compose a multi-colour string. Each entry
+   * becomes an inline run. This is the simplest API when the segments are known
+   * up front:
+   *
+   * ```tsx
+   * <TextSegment segments={[
+   *   { text: 'Upsell message ' },
+   *   { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+   * ]} />
+   * ```
+   *
+   * When both `segments` and `children` are provided, `children` win.
+   */
+  segments?: TextSegmentRun[]
+  /**
+   * Compositional alternative to {@link TextSegmentProps.segments}. Pass library
+   * `Text` elements (or plain strings) as children and they are rendered nested
+   * inside the same paragraph so they wrap together. The parent `modes` cascade
+   * down to every child via `cloneChildrenWithModes`, and each child may still
+   * override with its own `modes`:
+   *
+   * ```tsx
+   * <TextSegment>
+   *   <Text>Upsell message </Text>
+   *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+   * </TextSegment>
+   * ```
+   */
+  children?: React.ReactNode
+  /** Horizontal alignment of the whole paragraph. */
+  textAlign?: 'Left' | 'Center'
+  /** Clamp the paragraph to this many lines (truncates with an ellipsis). Applies to the whole composed line, not per-run. */
+  numberOfLines?: number
+  /** Mode configuration used for the base style and cascaded to every run/child. */
+  modes?: Modes
+  /** Style override applied to the outer paragraph (e.g. width constraints to force wrapping). */
+  style?: StyleProp<TextStyle>
+}
+
+const TEXT_ALIGN_MAP: Record<NonNullable<TextSegmentProps['textAlign']>, TextStyle['textAlign']> = {
+  Left: 'left',
+  Center: 'center',
+}
+
+/**
+ * Resolves the `text/*` design tokens for a given modes object into an RN
+ * `TextStyle`. Shared by the outer paragraph and every inline run so a run that
+ * only overrides colour still inherits the family/size/weight/spacing.
+ */
+function resolveTextStyle(modes: Modes): TextStyle {
+  return {
+    color: (getVariableByName('text/foreground', modes) ?? '#000000') as string,
+    fontFamily: (getVariableByName('text/fontFamily', modes) ?? 'JioType') as string,
+    fontSize: (getVariableByName('text/fontSize', modes) ?? 14) as number,
+    fontWeight: String(getVariableByName('text/fontWeight', modes) ?? '500') as TextStyle['fontWeight'],
+    lineHeight: (getVariableByName('text/lineHeight', modes) ?? 20) as number,
+    letterSpacing: (getVariableByName('text/letterSpacing', modes) ?? -0.5) as number,
+  }
+}
+
+/**
+ * TextSegment — composes several differently-styled text runs into a single
+ * paragraph that wraps as one continuous line.
+ *
+ * On the web you would reach for `<span>`s inside a `<p>`; the React Native
+ * equivalent is nesting `<Text>` inside a parent `<Text>`. That nesting is the
+ * whole trick: sibling `<View>`s would lay out as flex blocks and break onto
+ * rigid rows, but nested `<Text>` nodes flow inline and wrap naturally at word
+ * boundaries — exactly like a real paragraph — while each nested run keeps its
+ * own colour/weight resolved from its own `modes`.
+ *
+ * Two equivalent ways to author content:
+ *  - **`segments` prop** — declarative array of `{ text, modes }` runs.
+ *  - **`children`** — pass library `Text` elements (or strings); the parent
+ *    `modes` cascade down and each child may override its own.
+ *
+ * @example Data-driven
+ * ```tsx
+ * <TextSegment
+ *   segments={[
+ *     { text: 'Upsell message ' },
+ *     { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Compositional
+ * ```tsx
+ * <TextSegment numberOfLines={2}>
+ *   <Text>Pay with </Text>
+ *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+ *   <Text> and earn rewards on every transaction.</Text>
+ * </TextSegment>
+ * ```
+ */
+function TextSegment({
+  segments,
+  children,
+  textAlign = 'Left',
+  numberOfLines,
+  modes = EMPTY_MODES,
+  style,
+}: TextSegmentProps) {
+  const baseStyle = useMemo<TextStyle>(
+    () => ({ ...resolveTextStyle(modes), textAlign: TEXT_ALIGN_MAP[textAlign] }),
+    [modes, textAlign]
+  )
+
+  // children win over `segments` so the compositional API can always override.
+  const hasChildren = children !== undefined && children !== null && children !== false
+
+  const renderedSegments = useMemo(() => {
+    if (hasChildren || !segments?.length) return null
+    return segments.map((run, index) => {
+      // Parent modes first, then the run's own modes override them — mirrors the
+      // merge order used by `cloneChildrenWithModes` for the children API.
+      const runModes = run.modes ? { ...modes, ...run.modes } : modes
+      const runStyle = run.modes ? resolveTextStyle(runModes) : undefined
+      return (
+        <RNText key={index} style={[runStyle, run.style]}>
+          {run.text}
+        </RNText>
+      )
+    })
+  }, [segments, hasChildren, modes])
+
+  // The cascade: every child (and its descendants) receives the parent modes so
+  // nested library `Text` runs resolve their tokens against the same baseline,
+  // while still honouring any per-child `modes` override.
+  const content = hasChildren ? cloneChildrenWithModes(children, modes) : renderedSegments
+
+  return (
+    <RNText style={[baseStyle, style]} numberOfLines={numberOfLines}>
+      {content}
+    </RNText>
+  )
+}
+
+export default React.memo(TextSegment)

package/src/components/ThreadHero/ThreadHero.tsx

@@ -2,6 +2,7 @@ import React, { isValidElement, cloneElement, type ReactNode } from 'react'
 import { View, Text, type ViewStyle, type TextStyle } 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 ThreadHeroProps = {
     /** Title text, e.g. "Subhash Rajan" */
@@ -13,7 +14,7 @@ export type ThreadHeroProps = {
     /** Slot for Avatar component */
     renderAvatar?: ReactNode
     /** Modes for design token resolution */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Optional container style */
     style?: ViewStyle
 }

package/src/components/Title/Title.tsx

@@ -3,6 +3,7 @@ import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'reac
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type TitleProps = {
   title?: string;
@@ -10,7 +11,7 @@ export type TitleProps = {
   subtitle?: string;
   /** Horizontal alignment of the title text. */
   textAlign?: 'Left' | 'Center';
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   /** Optional style overrides for the subtitle text. */

package/src/components/Toast/Toast.tsx

@@ -4,13 +4,14 @@ import Animated, { FadeIn, FadeOut, SlideInDown, SlideInUp } from 'react-native-
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { closeToast, type ToastPlacement } from './useToast'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export interface ToastProps {
   id: string
   title: string
   timeout?: number | undefined
   onClose?: (() => void) | undefined
-  modes?: Record<string, any> | undefined
+  modes?: Modes | undefined
   placement?: ToastPlacement | undefined
   style?: StyleProp<ViewStyle> | undefined
 }

package/src/components/Toast/ToastProvider.tsx

@@ -3,12 +3,13 @@ import { StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useToast, type ToastPlacement } from './useToast'
 import Toast from './Toast'
+import type { Modes } from '../../design-tokens'
 
 export interface ToastProviderProps {
   children: React.ReactNode
   maxVisibleToasts?: number
   placement?: ToastPlacement
-  modes?: Record<string, any>
+  modes?: Modes
 }
 
 function ToastProvider({

package/src/components/Toast/useToast.ts

@@ -1,4 +1,5 @@
 import { useCallback, useSyncExternalStore } from 'react'
+import type { Modes } from '../../design-tokens'
 
 export type ToastPlacement = 'top' | 'bottom'
 
@@ -6,7 +7,7 @@ export interface ToastOptions {
   title: string
   timeout?: number
   onClose?: () => void
-  modes?: Record<string, any>
+  modes?: Modes
 }
 
 export interface ToastEntry {
@@ -14,7 +15,7 @@ export interface ToastEntry {
   title: string
   timeout: number
   onClose?: (() => void) | undefined
-  modes?: Record<string, any> | undefined
+  modes?: Modes | undefined
 }
 
 type Listener = () => void

package/src/components/Toggle/Toggle.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 interface ToggleProps {
   /** Whether the toggle is on (controlled) */
@@ -19,7 +20,7 @@ export interface ToggleProps {
   /** Whether the toggle is disabled */
   disabled?: boolean
   /** Design token modes for theming */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override container styles */
   style?: StyleProp<ViewStyle>
   /** Accessibility label for screen readers */