jfs-components 0.1.0 → 0.1.8

package/src/components/InputSearch/InputSearch.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react'
-import { View, Text, Pressable, type StyleProp, type ViewStyle, type TextStyle, type TextInputProps as RNTextInputProps } from 'react-native'
+import React, { forwardRef, useState } from 'react'
+import { View, Text, Pressable, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextStyle, type TextInputProps as RNTextInputProps } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import TextInput from '../TextInput/TextInput'
+import type { Modes } from '../../design-tokens'
 
 /**
  * SupportText component derived from Figma design.
@@ -15,7 +16,7 @@ type SupportTextProps = {
      * Defaults to 'ic_info'.
      */
     iconName?: string;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
 }
 
@@ -64,7 +65,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>;
 
     // Props to pass through to TextInput
@@ -80,7 +81,7 @@ export type InputSearchProps = {
     accessibilityHint?: string;
 } & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
 
-export default function InputSearch({
+const InputSearch = forwardRef<RNTextInput, InputSearchProps>(function InputSearch({
     supportText = true,
     supportTextLabel = "Support Text",
     supportTextIcon = "ic_info",
@@ -95,7 +96,7 @@ export default function InputSearch({
     trailing,
     inputStyle,
     ...rest
-}: InputSearchProps) {
+}: InputSearchProps, ref: React.Ref<RNTextInput>) {
     const [isFocused, setIsFocused] = useState(false)
 
     // Hardcode InputState based on the state prop, ignoring any external InputState passed in modes
@@ -155,6 +156,7 @@ export default function InputSearch({
             gap: formFieldGap,
         }, containerStyle]}>
             <TextInput
+                ref={ref}
                 placeholder={placeholder}
                 value={value || ''}
                 onChangeText={onChangeText || (() => { })}
@@ -177,4 +179,6 @@ export default function InputSearch({
             )}
         </View>
     )
-}
+})
+
+export default InputSearch

package/src/components/InstitutionBadge/InstitutionBadge.tsx

@@ -10,6 +10,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 avatar asset (shared with the Avatar component) so that
 // InstitutionBadge has a sensible visual fallback when no `source` is
@@ -35,7 +36,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. */
@@ -77,7 +78,7 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
 }
 
 function resolveInstitutionBadgeTokens(
-  modes: Record<string, any>
+  modes: Modes
 ): InstitutionBadgeTokens {
   const gap = toNumber(getVariableByName('institutionBadge/gap', modes), 8)
 

package/src/components/LazyList/LazyList.tsx

@@ -2,10 +2,11 @@ import React from 'react'
 import { View, type StyleProp, type ViewStyle } 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'
 
 type LazyListProps = {
   listGroupsSlot?: React.ReactNode;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;

package/src/components/LinearMeter/LinearMeter.tsx

@@ -4,10 +4,11 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import MoneyValue from '../MoneyValue/MoneyValue'
 import LinearProgress from '../LinearProgress/LinearProgress'
+import type { Modes } from '../../design-tokens'
 
 type LinearMeterLabelProps = {
     children: React.ReactNode
-    modes?: Record<string, any>
+    modes?: Modes
     style?: StyleProp<TextStyle>
 } & React.ComponentProps<typeof Text>
 
@@ -41,7 +42,7 @@ const LinearMeterLabel = ({
 
 export type LinearMeterProps = {
     value?: number // 0 to 1
-    modes?: Record<string, any>
+    modes?: Modes
     style?: StyleProp<ViewStyle>
     trackStyle?: StyleProp<ViewStyle>
     indicatorStyle?: StyleProp<ViewStyle>

package/src/components/LinearProgress/LinearProgress.tsx

@@ -7,12 +7,13 @@ 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 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/src/components/ListGroup/ListGroup.tsx

@@ -7,12 +7,13 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+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/src/components/ListItem/ListItem.tsx

@@ -14,6 +14,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type ListItemProps = {
   layout?: 'Vertical' | 'Horizontal';
@@ -33,7 +34,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>;
@@ -79,7 +80,7 @@ interface ListItemTokens {
   resolvedModes: Record<string, any>;
 }
 
-function resolveListItemTokens(modes: Record<string, any>): ListItemTokens {
+function resolveListItemTokens(modes: Modes): ListItemTokens {
   // Modes used to cascade into slot children (leading / supportSlot / trailing).
   // We do NOT inject an `AppearanceBrand` default here: slot content such as
   // Buttons or Badges carry their own intended appearance, so forcing one onto

package/src/components/LottieIntroBlock/LottieIntroBlock.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'
 
 const DEFAULT_MEDIA_SIZE = 117
 
@@ -40,7 +41,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/src/components/LottiePlayer/LottiePlayer.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import { getNativeLottieView } from './loadNativeLottieView'
+import type { Modes } from '../../design-tokens'
 
 /**
  * A parsed Lottie animation. The JSON object you get from
@@ -39,7 +40,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. */
@@ -51,7 +52,7 @@ const DEFAULT_SIZE = 117
 
 function resolveSize(
   size: LottiePlayerProps['size'],
-  modes: Record<string, any>
+  modes: Modes
 ) {
   if (typeof size === 'number') return { width: size, height: size }
   if (size && typeof size === 'object') return size

package/src/components/LottiePlayer/LottiePlayer.web.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import { getWebLottieView } from './loadWebLottieView'
+import type { Modes } from '../../design-tokens'
 
 export type LottieAnimationSource = Record<string, unknown>
 
@@ -12,7 +13,7 @@ export type LottiePlayerProps = {
   size?: number | { width: number; height: number }
   autoPlay?: boolean
   loop?: boolean
-  modes?: Record<string, any>
+  modes?: Modes
   style?: StyleProp<ViewStyle>
   accessibilityLabel?: string
   testID?: string
@@ -22,7 +23,7 @@ const DEFAULT_SIZE = 117
 
 function resolveSize(
   size: LottiePlayerProps['size'],
-  modes: Record<string, any>
+  modes: Modes
 ) {
   if (typeof size === 'number') return { width: size, height: size }
   if (size && typeof size === 'object') return size

package/src/components/LottiePlayer/loadNativeLottieView.tsx

@@ -14,17 +14,6 @@ const INSTALL_HINT =
   '  npm install lottie-react-native\n' +
   '  cd ios && pod install'
 
-/**
- * Metro resolves `require('lottie-react-native')` at bundle time even inside
- * try/catch, which breaks apps that import `jfs-components` without having
- * the optional peer installed. Splitting the module id into a runtime string
- * keeps Metro from statically linking it — the native module is loaded only
- * when present in the consumer's node_modules.
- */
-function resolveNativeLottieModuleName() {
-  return ['lottie', '-react', '-native'].join('')
-}
-
 function LottieUnavailableView({ style }: Pick<NativeLottieViewProps, 'style'>) {
   if (__DEV__) {
     return (
@@ -75,10 +64,17 @@ export function getNativeLottieView(): React.ComponentType<NativeLottieViewProps
   if (cachedView !== undefined) return cachedView
 
   try {
-    const mod = require(resolveNativeLottieModuleName()) as {
+    // Static require so Metro resolves the module by its build-time numeric id.
+    // A runtime-constructed string path is NOT resolvable by Metro's `require`
+    // (it indexes modules by number, not path), so it would always throw and
+    // fall back to the install hint even when the package is installed. The
+    // dependency stays an *optional* peer: apps that use LottiePlayer install
+    // it; apps that don't simply never import this module.
+    const mod = require('lottie-react-native') as {
       default?: React.ComponentType<NativeLottieViewProps>
+      LottieView?: React.ComponentType<NativeLottieViewProps>
     }
-    cachedView = mod.default ?? LottieUnavailable
+    cachedView = mod.default ?? mod.LottieView ?? LottieUnavailable
   } catch {
     cachedView = LottieUnavailable
   }

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react'
+import React, { forwardRef, useState, useRef } from 'react'
 import {
     View,
     TextInput as RNTextInput,
@@ -11,7 +11,8 @@ import {
     type TextInputProps,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, mergeRefs } 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 */
@@ -34,7 +35,7 @@ export type NoteInputProps = {
  * NoteInput component representing an interactive "Add note" badge style field.
  * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
  */
-export default function NoteInput({
+const NoteInput = forwardRef<RNTextInput, NoteInputProps>(function NoteInput({
     value = '',
     placeholder = 'Add note',
     onChangeText,
@@ -45,7 +46,7 @@ export default function NoteInput({
     onFocus,
     onBlur,
     ...rest
-}: NoteInputProps) {
+}: NoteInputProps, ref: React.Ref<RNTextInput>) {
     const [internalFocused, setInternalFocused] = useState(false)
     const inputRef = useRef<RNTextInput>(null)
 
@@ -119,7 +120,7 @@ export default function NoteInput({
                     {internalFocused ? (value || ' ') : (value || placeholder)}
                 </Text>
                 <RNTextInput
-                    ref={inputRef}
+                    ref={mergeRefs(inputRef, ref)}
                     value={value}
                     onChangeText={onChangeText}
                     placeholder={internalFocused ? '' : placeholder}
@@ -144,4 +145,6 @@ export default function NoteInput({
             </View>
         </Pressable>
     )
-}
+})
+
+export default NoteInput

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. */