jfs-components 0.0.99 → 0.1.2

package/src/components/Badge/Badge.tsx

@@ -10,12 +10,13 @@ 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'
 
 type BadgeProps = {
   /** Visible label text shown inside the badge */
   label?: string
   /** Modes used to resolve design tokens (e.g. Appearance, Size) */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Optional press handler to make the badge interactive */
   onPress?: () => void
   accessibilityLabel?: string

package/src/components/Balance/Balance.tsx

@@ -2,7 +2,16 @@ import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import MoneyValue from '../MoneyValue/MoneyValue'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+// The Balance design renders its money value at the 36 px / 900-weight scale.
+// The `moneyValue/*` tokens alias into the `Context3` collection, where the
+// `Balance & Cards` mode supplies those larger values. Applied *before* the
+// caller's `modes` so any consumer can still override individual keys.
+const DEFAULT_MONEY_VALUE_MODES: Record<string, string> = {
+    Context3: 'Balance & Cards',
+}
 
 export type BalanceProps = {
     /**
@@ -23,7 +32,7 @@ export type BalanceProps = {
     /**
      * Mode configuration for design tokens.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides for the container.
      */
@@ -58,7 +67,7 @@ function Balance({
     // Title styles
     const titleColor = getVariableByName('balance/title/foreground', modes) ?? '#0c0d10'
     const titleFontSize = getVariableByName('balance/title/fontSize', modes) ?? 14
-    const titleFontFamily = getVariableByName('balance/title/fontFamily', modes) ?? 'System'
+    const titleFontFamily = getVariableByName('balance/title/fontFamily', modes) ?? 'JioType Var'
     const titleLineHeight = getVariableByName('balance/title/lineHeight', modes) ?? 18
     const titleFontWeightValue = getVariableByName('balance/title/fontWeight', modes) ?? 500
     const titleFontWeight = typeof titleFontWeightValue === 'number'
@@ -79,13 +88,10 @@ function Balance({
         fontWeight: titleFontWeight as any,
     }
 
-    // Handle slot children or default content
-    const content = React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-            return React.cloneElement(child, { modes } as any)
-        }
-        return child
-    })
+    // The money value renders at the Balance & Cards scale. Merge the default
+    // context mode first so the caller's `modes` can still override it, and
+    // force that context onto any slotted children so custom money values match.
+    const moneyValueModes: Modes = { ...DEFAULT_MONEY_VALUE_MODES, ...modes }
 
     return (
         <View style={[containerStyle, style]} data-node-id="1986:6203">
@@ -93,12 +99,12 @@ function Balance({
                 {title}
             </Text>
             {children ? (
-                content
+                cloneChildrenWithModes(children, modes, DEFAULT_MONEY_VALUE_MODES)
             ) : (
                 <MoneyValue
                     value={amount}
                     currency={currency}
-                    modes={modes}
+                    modes={moneyValueModes}
                 />
             )}
         </View>

package/src/components/BottomNav/BottomNav.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import BottomNavItem from '../BottomNavItem/BottomNavItem'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type BottomNavProps = {
   /**
@@ -20,7 +21,7 @@ type BottomNavProps = {
    */
   children?: React.ReactNode;
 
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;

package/src/components/BottomNavItem/BottomNavItem.tsx

@@ -15,11 +15,12 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type BottomNavItemProps = SafePressableProps & {
   iconName?: string;
   label?: string;
-  modes?: Record<string, any>;
+  modes?: Modes;
   onPress?: () => void;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -51,7 +52,7 @@ interface BottomNavItemTokens {
 }
 
 function resolveBottomNavItemTokens(
-  modes: Record<string, any>,
+  modes: Modes,
   disabled: boolean,
   iconColorOverride?: string,
   iconSizeOverride?: number,

package/src/components/BrandChip/BrandChip.tsx

@@ -12,6 +12,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Avatar from '../Avatar/Avatar'
+import type { Modes } from '../../design-tokens'
 
 export type BrandChipProps = {
   /** Visible label (e.g. `"Axis Bank • 0245"`). */
@@ -30,7 +31,7 @@ export type BrandChipProps = {
   /** Optional press handler — when provided, the chip becomes a `Pressable`. */
   onPress?: () => void
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: StyleProp<ViewStyle>
   /** Label style override. */
@@ -64,7 +65,7 @@ const toFontWeight = (
   return fallback
 }
 
-function resolveBrandChipTokens(modes: Record<string, any>): BrandChipTokens {
+function resolveBrandChipTokens(modes: Modes): BrandChipTokens {
   const background =
     (getVariableByName('brandChip/background', modes) as string | null) ??
     '#ffffff'

package/src/components/BubbleChart/BubbleChart.tsx

@@ -7,6 +7,7 @@ import {
     type ViewStyle,
 } from 'react-native'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 import ClusterBubble, {
     type ClusterBubbleLabelDirection,
     type ClusterBubbleLabelPlacement,
@@ -78,7 +79,7 @@ export type BubbleChartProps = {
     /** Notified when a bubble is pressed. Makes every bubble pressable. */
     onBubblePress?: (datum: BubbleDatum, index: number) => void
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Container style override. */
     style?: StyleProp<ViewStyle>
     /** Accessibility label for the whole chart. */

package/src/components/Button/Button.tsx

@@ -16,6 +16,7 @@ import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
+import type { Modes } from '../../design-tokens'
 
 export type ButtonProps = SafePressableProps & {
   label?: string;
@@ -44,7 +45,7 @@ export type ButtonProps = SafePressableProps & {
    * Takes precedence over `trailing` if both are provided.
    */
   icon?: string;
-  modes?: Record<string, any>;
+  modes?: Modes;
   onPress?: () => void;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -112,7 +113,7 @@ interface ButtonTokens {
   accessoryOffset: number;
 }
 
-function resolveButtonTokens(modes: Record<string, any>, disabled: boolean): ButtonTokens {
+function resolveButtonTokens(modes: Modes, disabled: boolean): ButtonTokens {
   const backgroundColor = getVariableByName('button/background', modes) || '#cfa159'
   const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)'
   const borderWidth = getVariableByName('button/border/size', modes)

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -7,6 +7,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
 import IconButton from '../IconButton/IconButton'
+import type { Modes } from '../../design-tokens'
 
 export type ButtonGroupProps = {
     /**
@@ -18,7 +19,7 @@ export type ButtonGroupProps = {
      * Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
      * These modes are passed down to all child components.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Additional styles for the container
      */

package/src/components/Card/Card.tsx

@@ -2,13 +2,14 @@ import React, { createContext, useContext, isValidElement, cloneElement, useMemo
 import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import type { Modes } from '../../design-tokens'
 
 /**
  * Context to share 'modes' with child components like Card.Title and Card.SupportText.
  * This ensures that nested components can resolve their tokens correctly without 
  * needing explicit mode prop passing for every child.
  */
-const CardContext = createContext<{ modes?: Record<string, any> }>({});
+const CardContext = createContext<{ modes?: Modes }>({});
 
 export interface CardProps {
     /**
@@ -28,7 +29,7 @@ export interface CardProps {
     /**
      * Modes object for token resolution (e.g. { "Mode": "Dark" }).
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Aspect ratio for the media slot container.
      * Default is based on Figma design 154/116 (~1.328).
@@ -151,7 +152,7 @@ export function Card({
 export interface CardTextProps {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }
 
 /**

package/src/components/CardAdvisory/CardAdvisory.tsx

@@ -12,6 +12,7 @@ import Icon from '../../icons/Icon'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import CircularProgressBar from '../CircularProgressBar/CircularProgressBar'
 import Nudge from '../Nudge/Nudge'
+import type { Modes } from '../../design-tokens'
 
 type CardAdvisoryBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
 
@@ -41,7 +42,7 @@ export type CardAdvisoryProps = CardAdvisoryBaseProps & {
   /** Optional slot replacing the bottom nudge. Receives `modes` recursively. */
   nudgeSlot?: React.ReactNode
   /** Design token modes forwarded to token lookups and child components. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Optional container style override. */
   style?: StyleProp<ViewStyle>
   /** Optional main content row style override. */
@@ -94,7 +95,7 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
   return fallback
 }
 
-function resolveCardAdvisoryTokens(modes: Record<string, any>): CardAdvisoryTokens {
+function resolveCardAdvisoryTokens(modes: Modes): CardAdvisoryTokens {
   const width = toNumber(getVariableByName('cardAdvisory/width', modes), 360)
   const gap = toNumber(getVariableByName('cardAdvisory/gap', modes), 16)
   const paddingHorizontal = toNumber(getVariableByName('cardAdvisory/padding/horizontal', modes), 0)

package/src/components/CardBankAccount/CardBankAccount.tsx

@@ -12,6 +12,7 @@ import Badge from '../Badge/Badge'
 import Button from '../Button/Button'
 import InstitutionBadge from '../InstitutionBadge/InstitutionBadge'
 import type { UnifiedSource } from '../../utils/MediaSource'
+import type { Modes } from '../../design-tokens'
 
 export type CardBankAccountItem = {
     /** Left-aligned label text (e.g. "Account type"). */
@@ -74,7 +75,7 @@ export type CardBankAccountProps = {
      * out of the box. Caller-supplied modes are merged on top and can
      * override any of the default keys.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Container style override. */
     style?: StyleProp<ViewStyle>
     /** Accessibility label for the card region. */

package/src/components/CardCTA/CardCTA.tsx

@@ -8,12 +8,13 @@ import Button from '../Button/Button'
 import Badge from '../Badge/Badge'
 import ButtonGroup from '../ButtonGroup/ButtonGroup'
 import IconButton from '../IconButton/IconButton'
+import type { Modes } from '../../design-tokens'
 
 export type CardCTAType = 'cta' | 'rating'
 
 const optionalTokenAvailability = new Map<string, boolean>()
 
-function getOptionalVariableByName<T>(name: string, modes: Record<string, any>, fallback: T): T {
+function getOptionalVariableByName<T>(name: string, modes: Modes, fallback: T): T {
     let isAvailable = optionalTokenAvailability.get(name)
 
     if (isAvailable === undefined) {
@@ -50,7 +51,7 @@ export type CardCTAProps = {
     /** Callback for the default dislike action */
     onPressDislike?: () => void;
     /** Mode configuration for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Slot: replaces the default icon area (right side) */
     iconSlot?: React.ReactNode;
     /** Slot: replaces the default Button */

package/src/components/CardFeedback/CardFeedback.tsx

@@ -2,11 +2,12 @@ import React, { createContext, useContext, isValidElement, cloneElement } from '
 import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Image } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import IconComponent from '../../icons/Icon';
+import type { Modes } from '../../design-tokens'
 
 /**
  * Context to share 'modes' with child components.
  */
-const CardFeedbackContext = createContext<{ modes?: Record<string, any> }>({});
+const CardFeedbackContext = createContext<{ modes?: Modes }>({});
 
 export interface CardFeedbackProps {
     /**
@@ -16,7 +17,7 @@ export interface CardFeedbackProps {
     /**
      * Modes object for token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Style overrides for the card container.
      */
@@ -75,7 +76,7 @@ export function CardFeedback({
  * Icon Wrapper
  * Tokens: cardFeedback/icon/size, appearanceFeedback/cardFeedback/icon/color
  */
-export function Icon({ children, style, modes: propModes, icon }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any>; icon?: string }) {
+export function Icon({ children, style, modes: propModes, icon }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Modes; icon?: string }) {
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
@@ -94,7 +95,7 @@ export function Icon({ children, style, modes: propModes, icon }: { children?: R
     // Pass modes to children (e.g., icon components that accept modes)
     const childrenWithModes = React.Children.map(children, child => {
         if (isValidElement(child)) {
-            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } });
+            return cloneElement(child as React.ReactElement<{ modes?: Modes }>, { modes: { ...(child.props as any).modes, ...modes } });
         }
         return child;
     });
@@ -115,7 +116,7 @@ export function Icon({ children, style, modes: propModes, icon }: { children?: R
  * Wraps Title, Body, and sometimes Action.
  * Tokens: cardFeedback/text/gap
  */
-export function Content({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
+export function Content({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Modes }) {
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
@@ -124,7 +125,7 @@ export function Content({ children, style, modes: propModes }: { children?: Reac
     // Pass modes to children (Title, Body, etc.)
     const childrenWithModes = React.Children.map(children, child => {
         if (isValidElement(child)) {
-            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } });
+            return cloneElement(child as React.ReactElement<{ modes?: Modes }>, { modes: { ...(child.props as any).modes, ...modes } });
         }
         return child;
     });
@@ -140,7 +141,7 @@ export function Content({ children, style, modes: propModes }: { children?: Reac
  * Title Component
  * Tokens: cardFeedback/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(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
@@ -165,7 +166,7 @@ export function Title({ children, style, modes: propModes }: { children?: React.
  * Body Component
  * Tokens: cardFeedback/body/*
  */
-export function Body({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
+export function Body({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Modes }) {
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
@@ -190,7 +191,7 @@ export function Body({ children, style, modes: propModes }: { children?: React.R
  * Action Slot Wrapper
  * Tokens: cardFeedback/actionSlot/gap
  */
-export function Action({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
+export function Action({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Modes }) {
     const context = useContext(CardFeedbackContext);
     const modes = propModes || context.modes || {};
 
@@ -199,7 +200,7 @@ export function Action({ children, style, modes: propModes }: { children?: React
     // "Maximise existing component usage" -> Pass modes to children (Buttons)
     const childrenWithModes = React.Children.map(children, child => {
         if (isValidElement(child)) {
-            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } });
+            return cloneElement(child as React.ReactElement<{ modes?: Modes }>, { modes: { ...(child.props as any).modes, ...modes } });
         }
         return child;
     });

package/src/components/CardFinancialCondition/CardFinancialCondition.tsx

@@ -15,6 +15,7 @@ import CircularProgressBar, {
 } from '../CircularProgressBar/CircularProgressBar'
 import Divider from '../Divider/Divider'
 import Nudge from '../Nudge/Nudge'
+import type { Modes } from '../../design-tokens'
 
 type CardFinancialConditionBaseProps = Omit<
   React.ComponentProps<typeof View>,
@@ -51,7 +52,7 @@ export type CardFinancialConditionProps = CardFinancialConditionBaseProps & {
   /** Slot replacing the default action button. Receives `modes` recursively. */
   buttonSlot?: React.ReactNode
   /** Design token modes forwarded to token lookups and child components. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: StyleProp<ViewStyle>
   /** Header row style override. */
@@ -100,7 +101,7 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
 }
 
 function resolveCardFinancialConditionTokens(
-  modes: Record<string, any>
+  modes: Modes
 ): CardFinancialConditionTokens {
   const background =
     (getVariableByName('financialConditionCard/background', modes) as string) ||

package/src/components/CardInsight/CardInsight.tsx

@@ -12,6 +12,7 @@ import Badge from '../Badge/Badge'
 import Divider from '../Divider/Divider'
 import Nudge from '../Nudge/Nudge'
 import SavingsGoalSummary from '../SavingsGoalSummary/SavingsGoalSummary'
+import type { Modes } from '../../design-tokens'
 
 export type CardInsightProps = {
     /** Card title rendered in the header (left of the badge). */
@@ -41,7 +42,7 @@ export type CardInsightProps = {
      */
     divider?: React.ReactNode | boolean
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override container styles. */
     style?: StyleProp<ViewStyle>
 }

package/src/components/CardProviderInfo/CardProviderInfo.tsx

@@ -3,6 +3,7 @@ import { View, type ViewStyle, type StyleProp, type ImageSourcePropType } from '
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import ProductLabel from '../ProductLabel/ProductLabel'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type CardProviderInfoProps = {
   /** Product name shown in the ProductLabel header. */
@@ -12,7 +13,7 @@ export type CardProviderInfoProps = {
   /** Slot content — typically StatItem components arranged in a 2-column grid. */
   children?: React.ReactNode
   /** Design token modes for theming. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override container styles. */
   style?: StyleProp<ViewStyle>
 }

package/src/components/Carousel/Carousel.tsx

@@ -20,13 +20,14 @@ 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'
 
 // ---------------------------------------------------------------------------
 // Context
 // ---------------------------------------------------------------------------
 
 interface CarouselContextValue {
-  modes: Record<string, any>
+  modes: Modes
   activeIndex: number
   totalItems: number
   goTo: (index: number) => void
@@ -51,7 +52,7 @@ export interface CarouselProps {
   /** Content items to display (should be Carousel.Item or any React nodes). */
   children?: React.ReactNode
   /** Modes object for design-token resolution. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Enable auto-play. Default: false. */
   autoPlay?: boolean
   /** Auto-play interval in ms. Default: 4000. */
@@ -342,7 +343,7 @@ export function Carousel({
 
 export interface CarouselItemProps {
   children?: React.ReactNode
-  modes?: Record<string, any>
+  modes?: Modes
   style?: StyleProp<ViewStyle>
 }
 
@@ -359,7 +360,7 @@ export function Item({ children, modes: _modes, style }: CarouselItemProps) {
 // ---------------------------------------------------------------------------
 
 export interface PaginationProps {
-  modes?: Record<string, any>
+  modes?: Modes
   style?: StyleProp<ViewStyle>
 }
 

package/src/components/Checkbox/Checkbox.tsx

@@ -9,6 +9,7 @@ import {
 import Svg, { Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /**
  * Tracks whether the last user interaction was a keyboard event (Tab).
@@ -80,7 +81,7 @@ export interface CheckboxProps {
   /** Whether the checkbox 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 */

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -3,6 +3,7 @@ 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 CheckboxItem from '../CheckboxItem/CheckboxItem'
+import type { Modes } from '../../design-tokens'
 
 export type CheckboxGroupProps = {
   /**
@@ -14,7 +15,7 @@ export type CheckboxGroupProps = {
    */
   children?: React.ReactNode
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override container styles. */
   style?: StyleProp<ViewStyle>
   /** Accessibility label for the surrounding group. */

package/src/components/CheckboxItem/CheckboxItem.tsx

@@ -10,6 +10,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Checkbox from '../Checkbox/Checkbox'
+import type { Modes } from '../../design-tokens'
 
 export type CheckboxItemProps = {
   /** Whether the checkbox is checked (controlled). */
@@ -43,7 +44,7 @@ export type CheckboxItemProps = {
   /** Width of the end slot container in pixels. Defaults to 80 to match the Figma reference. */
   endSlotWidth?: number
   /** 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/ChipGroup/ChipGroup.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, flattenChildren } from '../../utils/react-utils';
+import type { Modes } from '../../design-tokens'
 
 export type ChipGroupProps = {
     /**
@@ -13,7 +14,7 @@ export type ChipGroupProps = {
      * Mode configuration for design tokens.
      * These modes are passed down to all child components.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Additional styles for the container.
      */

package/src/components/ChipSelect/ChipSelect.tsx

@@ -3,6 +3,7 @@ import { View, Text, TouchableOpacity, type StyleProp, type ViewStyle, type Text
 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 ChipSelectProps = {
     /**
@@ -23,7 +24,7 @@ export type ChipSelectProps = {
     /**
      * Modes for design token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides.
      */

package/src/components/CircularProgressBar/CircularProgressBar.tsx

@@ -5,6 +5,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import { IconMinus } from '../../icons/components/IconMinus'
+import type { Modes } from '../../design-tokens'
 
 type CircularProgressBarBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
 
@@ -26,7 +27,7 @@ export type CircularProgressBarProps = CircularProgressBarBaseProps & {
    */
   supportText?: string
   /** Design token modes forwarded to token lookups. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: StyleProp<ViewStyle>
   /** Track stroke style override. */

package/src/components/CircularProgressBarDoted/CircularProgressBarDoted.tsx

@@ -13,6 +13,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import { IconChevronright } from '../../icons/components/IconChevronright'
+import type { Modes } from '../../design-tokens'
 
 type CircularProgressBarDotedBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
 
@@ -32,7 +33,7 @@ export type CircularProgressBarDotedProps = CircularProgressBarDotedBaseProps &
   /** Called when the tier row is pressed. */
   onTierPress?: () => void
   /** Design token modes forwarded to token lookups and slot children. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Slot rendered in the center of the dotted ring. Receives `modes` recursively. */
   children?: React.ReactNode
   /** Container style override. */