jfs-components 0.1.0 → 0.1.8

package/lib/typescript/src/design-tokens/figma-modes.generated.d.ts

@@ -0,0 +1,284 @@
+/**
+ * Every design-token collection and its available modes, keyed by the exact
+ * collection name used by the resolver and the `modes` prop.
+ */
+export declare const FIGMA_MODES: {
+    readonly "Accordion / Output": readonly ["Default"];
+    readonly "Accordion States": readonly ["Idle", "Hover", "Open", "Open Hover", "Disabled"];
+    readonly "AccordionCheckbox / Output": readonly ["Default"];
+    readonly "AccordionGroup / Output": readonly ["Default"];
+    readonly "AccountCard / Output": readonly ["Default"];
+    readonly Action: readonly ["True", "False"];
+    readonly "ActionFooter / Output": readonly ["Default"];
+    readonly "ActionNumpad / Output": readonly ["Default"];
+    readonly "ActionTile / Output": readonly ["Default"];
+    readonly "Allocation Comparison Chart / Output": readonly ["Default"];
+    readonly "AmountInput / Output": readonly ["Default"];
+    readonly "AppBar.MainPage / Output": readonly ["Default"];
+    readonly "AppBar.SubPage/ Output": readonly ["Default"];
+    readonly "Appearance / DataViz": readonly ["Primary", "Secondary", "Tertiary", "Quaternary", "Quinary", "Senary", "Neutral"];
+    readonly AppearanceBrand: readonly ["Primary", "Secondary", "Neutral", "Tertiary"];
+    readonly AppearanceSystem: readonly ["positive", "warning", "negative"];
+    readonly "Attached / Output": readonly ["Default"];
+    readonly "Avatar / Output": readonly ["Default"];
+    readonly "Avatar Group / Output": readonly ["Default"];
+    readonly "Avatar Size": readonly ["L", "M", "S", "XS"];
+    readonly "Avatar Type": readonly ["Avatar", "Icon", "Text"];
+    readonly "Axis / Output": readonly ["Default"];
+    readonly Background: readonly ["False", "True"];
+    readonly "Badge / Output": readonly ["Default"];
+    readonly "Badge Size": readonly ["Medium", "Small"];
+    readonly "Balance / Output": readonly ["Default"];
+    readonly "BankAccountCard / Output": readonly ["Default"];
+    readonly "Benefit Card": readonly ["Default"];
+    readonly Blur: readonly ["Default"];
+    readonly "bottomNav / Output": readonly ["Default"];
+    readonly "BottomNavItem / Output": readonly ["Default"];
+    readonly "BottomNavItem / State": readonly ["Idle", "Active"];
+    readonly Brand: readonly ["Jio Finance"];
+    readonly "Brand Chip / Output": readonly ["Default"];
+    readonly "Button / Output": readonly ["Default"];
+    readonly "Button / Size": readonly ["M", "S", "XS"];
+    readonly "Button / State": readonly ["Idle", "Hover", "Pressed", "Disabled"];
+    readonly "ButtonGroup / Output": readonly ["Default"];
+    readonly "Calendar Glyph / Output": readonly ["Default"];
+    readonly "Calendar Glyph State": readonly ["Idle", "notSaved", "saved"];
+    readonly "Card / Output": readonly ["Default"];
+    readonly "Card Feedback / Output": readonly ["Default"];
+    readonly "Card.Media": readonly ["Default"];
+    readonly "Card/CTA / Output": readonly ["Default"];
+    readonly "Card/Insight": readonly ["Mode 1"];
+    readonly "Card/ProviderInfo / Output": readonly ["Default"];
+    readonly "CardAdvisory / Output": readonly ["Default"];
+    readonly cardsShared: readonly ["Default"];
+    readonly "Carousel / Output": readonly ["Default"];
+    readonly "CarouselCardAccounts / Output": readonly ["Default"];
+    readonly "ccCard / Output": readonly ["Default"];
+    readonly "checkbox / Output": readonly ["Default"];
+    readonly "Checkbox / Output": readonly ["Default"];
+    readonly "Checkbox states": readonly ["Idle", "Hover", "Focus", "Focus Selected", "Selected Hover", "Disabled/Active", "Disabled", "Selected"];
+    readonly "CheckboxGroup / Output": readonly ["Default"];
+    readonly "CheckboxItem / Output": readonly ["Default"];
+    readonly "Chip / Output": readonly ["Default"];
+    readonly "Chip lineHeight": readonly ["Default"];
+    readonly "ChipGroup / Output": readonly ["Default"];
+    readonly "ChipSelect / Output": readonly ["Default"];
+    readonly "ChipSelect State": readonly ["Idle", "Active"];
+    readonly "Circular Progress Bar / Doted": readonly ["Default"];
+    readonly "Circular Rating / Output": readonly ["Defult"];
+    readonly "circularProgressBar / Output": readonly ["Default"];
+    readonly "circularProgressBar Size": readonly ["S", "M"];
+    readonly "clusterBubble / Output": readonly ["Default"];
+    readonly coincard: readonly ["Mode 1"];
+    readonly "Color Mode": readonly ["Light", "Dark"];
+    readonly comparetablecell: readonly ["Mode 1"];
+    readonly comparetableheader: readonly ["Mode 1"];
+    readonly "Comparison Floating card": readonly ["Default"];
+    readonly ComparisonCardItem: readonly ["Default"];
+    readonly Confidence: readonly ["High", "Medium", "Low", "None"];
+    readonly "ContentSheet / Output": readonly ["Default"];
+    readonly Context: readonly ["Default", "Nudge&Alert", "CTACard", "ListItem"];
+    readonly Context2: readonly ["Default", "AppBar"];
+    readonly Context3: readonly ["Default", "Transaction Bubble", "Balance & Cards", "Amount Input"];
+    readonly Context4: readonly ["Default", "Chip", "Button"];
+    readonly context5: readonly ["Default", "Fullscreen Modal"];
+    readonly context7: readonly ["Default", "Card"];
+    readonly "Contrast Context": readonly ["on dark", "on light"];
+    readonly "Conversation Feed / Output": readonly ["Default"];
+    readonly "Counter Badge / Output": readonly ["Mode 1"];
+    readonly "Coverage Bar Comparison / Output": readonly ["Default"];
+    readonly "CoverageRing / Output": readonly ["Mode 1"];
+    readonly "CTACard / Output": readonly ["Default"];
+    readonly "DataViz / Output": readonly ["Default"];
+    readonly "DebitCard / Output": readonly ["Default"];
+    readonly "DebitCard brand": readonly ["JFS", "SBI"];
+    readonly "DebitCardStack / Output": readonly ["Default"];
+    readonly "DetailItem / Output": readonly ["Default"];
+    readonly "Disclaimer / Output": readonly ["Default"];
+    readonly "Divider / Output": readonly ["Default"];
+    readonly "Donut Chart / Output": readonly ["Default"];
+    readonly "Drawer / Output": readonly ["Default"];
+    readonly "Dropdown / Output": readonly ["Default"];
+    readonly "Dropdown Item / Output": readonly ["Default"];
+    readonly "Dropdown Item State": readonly ["Idle", "Selected"];
+    readonly Emphasis: readonly ["High", "Medium", "Low"];
+    readonly "Emphasis / DataViz": readonly ["High", "Medium", "Low"];
+    readonly "EmptyState / Output": readonly ["Default"];
+    readonly "ExpandableCheckbox / Output": readonly ["Default"];
+    readonly "Feedback / Output": readonly ["Default"];
+    readonly "filterBar / Output": readonly ["Default"];
+    readonly "FinancialConditionCard / Output": readonly ["Default"];
+    readonly "Form / Output": readonly ["Default"];
+    readonly "FormField / Output": readonly ["Default"];
+    readonly "FormField States": readonly ["Idle", "Active", "Read Only", "Error", "Disabled"];
+    readonly FullScreenModal: readonly ["Default"];
+    readonly Gap: readonly ["S", "M", "L", "None"];
+    readonly "Gauge / Output": readonly ["Default"];
+    readonly "Handle Boolean": readonly ["False", "True"];
+    readonly "Heading / Output": readonly ["Default"];
+    readonly "Heading text": readonly ["Default", "Slot"];
+    readonly "Holdings card / Output": readonly ["Default"];
+    readonly "HStack / Output": readonly ["Default"];
+    readonly "Icon / Output": readonly ["Default"];
+    readonly "Icon Button / Output": readonly ["Default"];
+    readonly "Icon Capsule / Output": readonly ["Default"];
+    readonly "Icon Capsule Size": readonly ["M", "L", "S", "XS"];
+    readonly "Image / Output": readonly ["Default"];
+    readonly "Input / Output": readonly ["Default"];
+    readonly "Input/PINSlot  States": readonly ["Idle", "Active", "Error"];
+    readonly "Input/PINSlot / Output": readonly ["Default"];
+    readonly "InputField / Output": readonly ["Default"];
+    readonly InputState: readonly ["Idle", "Active"];
+    readonly "Institution Badge / Output": readonly ["Default"];
+    readonly isActive: readonly ["False", "True"];
+    readonly "lazyList / Output": readonly ["Default"];
+    readonly "LinearMeter / Output": readonly ["Default"];
+    readonly "LinearProgress / Output": readonly ["Default"];
+    readonly "LinearProgress Size": readonly ["M", "L"];
+    readonly "Link / Output": readonly ["Default"];
+    readonly "List Item / Output": readonly ["Default"];
+    readonly "List Item Style": readonly ["Default", "Boxed", "Minimal"];
+    readonly "listGroup / Output": readonly ["Default"];
+    readonly "ListItem State": readonly ["Idle", "Active"];
+    readonly "LottieIntroBlock / Output": readonly ["Default"];
+    readonly "Media / Output": readonly ["L", "M", "S"];
+    readonly MediaBlock: readonly ["IconCapsule", "Image"];
+    readonly "MerchantProfile / Output": readonly ["Default"];
+    readonly "Message Direction": readonly ["Incoming (Left)", "Outgoing (Right)"];
+    readonly "Message Row / Output": readonly ["Default"];
+    readonly "MessageField / Output": readonly ["Default"];
+    readonly metricdata: readonly ["Mode 1"];
+    readonly "MetricLegendItem / Output": readonly ["Default"];
+    readonly "Money Value / Output": readonly ["Default"];
+    readonly "MonthlyStatusGrid / Output": readonly ["Default"];
+    readonly Multipliers: readonly ["Idle"];
+    readonly NavArrow: readonly ["Default"];
+    readonly "NavArrow / Output": readonly ["Default"];
+    readonly "NavArrow Direction": readonly ["Left&Right", "Top&Bottom"];
+    readonly "NoteInput / Output": readonly ["Default"];
+    readonly "Nudge / Output": readonly ["Default"];
+    readonly "Nudge padding": readonly ["Default", "None"];
+    readonly "Numpad / Output": readonly ["Default"];
+    readonly "OTP / Output": readonly ["Mode 1"];
+    readonly "Overlay / Output": readonly ["Mode 1"];
+    readonly Padding: readonly ["Default", "None"];
+    readonly "Page type": readonly ["MainPage", "SubPage", "JioPlus"];
+    readonly "PageHero / Output": readonly ["Default"];
+    readonly "PaymnetFeedback / Output": readonly ["Default"];
+    readonly "PDP cc card": readonly ["Mode 1"];
+    readonly peekOffset: readonly ["Medium", "Small", "Large", "None"];
+    readonly Placement: readonly ["Prefix", "Suffix"];
+    readonly "PlanComparisonCard / Output": readonly ["Default"];
+    readonly "Popup / Output": readonly ["Default"];
+    readonly "PortfolioHero / Output": readonly ["Default"];
+    readonly PoweredByLabel: readonly ["Default"];
+    readonly "Product Merchandising card": readonly ["Mode 1"];
+    readonly "ProductLabel / Output": readonly ["Default"];
+    readonly "ProductOverview / Output": readonly ["Default"];
+    readonly "ProgressBadge / Output": readonly ["Default"];
+    readonly ProjectionMarker: readonly ["Mode 1"];
+    readonly "QR code / Output": readonly ["Idle"];
+    readonly "Radio / Output": readonly ["Default"];
+    readonly Radius: readonly ["S", "M", "L", "None"];
+    readonly "RangeTrack / Output": readonly ["Default"];
+    readonly "RechargeCard / Output": readonly ["Default"];
+    readonly rotfl: readonly ["Default"];
+    readonly "SavingsGoalSummary / Output": readonly ["Default"];
+    readonly "Screen / Output": readonly ["Default"];
+    readonly "SearchFilterBar / Output": readonly ["Default"];
+    readonly "Section / Output": readonly ["Defult"];
+    readonly "SectionBentoGrid / Output": readonly ["Default"];
+    readonly "Segment Indicator / Output": readonly ["Default"];
+    readonly "SegmentedControl / Output": readonly ["Default"];
+    readonly "SegmentedControl/Segment": readonly ["Idle", "Active"];
+    readonly "SegmentedControl/Segment / Output": readonly ["Default"];
+    readonly "SegmentedTrack / Output": readonly ["Default"];
+    readonly Selectable: readonly ["False", "True"];
+    readonly selectioncard: readonly ["Mode 1"];
+    readonly "Semantic Intent": readonly ["Brand", "System"];
+    readonly Skeleton: readonly ["Mode 1"];
+    readonly "Slider / Output": readonly ["Default"];
+    readonly "Slot gap": readonly ["S", "M", "L", "XL"];
+    readonly "special button": readonly ["Default"];
+    readonly "Spinner / Output": readonly ["Default"];
+    readonly "statGroup / Output": readonly ["Default"];
+    readonly "StatItem / Output": readonly ["Default"];
+    readonly "StatItem Label Position ": readonly ["Top", "Bottom"];
+    readonly Status: readonly ["Auto", "Warning", "Error", "Success", "Loading", "Neutral"];
+    readonly "StatusHero / Output": readonly ["Default"];
+    readonly "Step Indicator / Output": readonly ["Default"];
+    readonly "Step Status": readonly ["active", "inactive", "complete", "error", "warning"];
+    readonly "Steper Item / Output": readonly ["Default"];
+    readonly "Stepper / Output": readonly ["Default"];
+    readonly "StrengthIndicator / Output": readonly ["Default"];
+    readonly Sufix: readonly ["False", "True"];
+    readonly "SummaryTile / Output": readonly ["Default"];
+    readonly "SupportText / Output": readonly ["Default"];
+    readonly "Swappable subComponent / Output": readonly ["Default"];
+    readonly "SwappableAmount / Output": readonly ["Default"];
+    readonly "tabItem / Output": readonly ["Default"];
+    readonly "Tabs / Output": readonly ["Default"];
+    readonly TestimonialsCard: readonly ["Default"];
+    readonly "Text / Output": readonly ["Default"];
+    readonly "Text Appearance": readonly ["Neutral", "Primary", "Secondary", "Tertiary"];
+    readonly "Text Sizes": readonly ["Medium", "Small"];
+    readonly "textInput / Output": readonly ["Default"];
+    readonly "TextSegment / Output": readonly ["Default"];
+    readonly "Thread Hero / Output": readonly ["Default"];
+    readonly "Title / Output": readonly ["Default"];
+    readonly "Title Level": readonly ["Default", "Bold"];
+    readonly "Toggle / Output": readonly ["Default"];
+    readonly "Toggle States": readonly ["Off", "On", "Disabled Off", "Disabled On"];
+    readonly "ToggleIconButton / Output": readonly ["Default"];
+    readonly Tooltip: readonly ["True", "False"];
+    readonly "tooltip / Output": readonly ["Default"];
+    readonly "Tost Output": readonly ["Default"];
+    readonly "Transaction Status": readonly ["Request", "Paid", "Declined", "Expired"];
+    readonly "Transaction Status / Output": readonly ["Default"];
+    readonly "TransactionBubble / Output": readonly ["Default"];
+    readonly "TransationDetails / Output": readonly ["Default"];
+    readonly "UPI Handle / Output": readonly ["Default"];
+    readonly "ValueBar / Output": readonly ["Default"];
+    readonly "VStack / Output": readonly ["Default"];
+    readonly Weight: readonly ["Medium", "Regular", "Bold"];
+};
+/**
+ * Multi-mode collections each component actually uses (derived from the token
+ * tracing in `.token-metadata.json`). Drives the per-component Storybook mode
+ * select controls. Empty until `extract-component-tokens.js` has run.
+ */
+export declare const FIGMA_COMPONENT_MODES: Record<string, readonly string[]>;
+/**
+ * Allow the known literal values to drive autocomplete while still accepting any
+ * `string` — this keeps the typing fully backward compatible with dynamically
+ * computed / forced mode values.
+ */
+type LiteralUnion<T extends string> = T | (string & {});
+/** Union of every valid collection name (the keys of a `modes` object). */
+export type CollectionName = keyof typeof FIGMA_MODES;
+/** Valid mode names for a given collection. */
+export type ModeOf<C extends CollectionName> = (typeof FIGMA_MODES)[C][number];
+/**
+ * The typed `modes` prop. Known collection-name keys and their mode values
+ * drive autocomplete, while an index signature (plus `boolean`/`number` values)
+ * keeps it fully backward compatible with dynamically-built, forced, or legacy
+ * `modes` objects — nothing that compiled before starts failing.
+ *
+ * @example
+ * const modes: Modes = { 'Color Mode': 'Dark', 'Page type': 'JioPlus' }
+ */
+export type Modes = {
+    [K in CollectionName]?: LiteralUnion<ModeOf<K>> | boolean | number;
+} & {
+    [collection: string]: string | boolean | number | undefined;
+};
+/**
+ * Strict variant: only real collection-name keys and exact mode values are
+ * allowed (no `string` escape hatch, no unknown keys). Opt in when you want
+ * typos in mode keys/values to be a compile error.
+ */
+export type StrictModes = {
+    [K in CollectionName]?: ModeOf<K>;
+};
+export {};
+//# sourceMappingURL=figma-modes.generated.d.ts.map

package/lib/typescript/src/design-tokens/index.d.ts

@@ -1,3 +1,4 @@
 export * from './figma-variables-resolver';
 export * from './JFSThemeProvider';
+export * from './figma-modes.generated';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-06-09T13:55:40.250Z
+ * Generated: 2026-06-12T12:48:07.304Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/lib/typescript/src/skeleton/Skeleton.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type DimensionValue, type StyleProp, type ViewStyle } from 'react-native';
 import { type SkeletonKind } from './shimmer-tokens';
+import type { Modes } from '../design-tokens';
 export interface SkeletonProps {
     /**
      * Visual category — controls only the corner-radius token. Sizes are still
@@ -21,7 +22,7 @@ export interface SkeletonProps {
      * Modes for token resolution (forwarded to `getVariableByName`). Most
      * consumers can omit this — defaults work for every standard mode.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
 }
 /**
  * Atomic skeleton placeholder. Renders a base rectangle (background colour +

package/lib/typescript/src/utils/react-utils.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { Modes } from '../design-tokens';
 /**
  * A shared, frozen empty modes object.
  *
@@ -18,7 +19,17 @@ export declare const EMPTY_MODES: Readonly<Record<string, any>>;
  * Helper function to recursively clone children and pass modes prop to components that accept it.
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
-export declare function cloneChildrenWithModes(children: React.ReactNode, modes: Record<string, any>, forcedModes?: Record<string, any>): React.ReactNode[];
+export declare function cloneChildrenWithModes(children: React.ReactNode, modes: Modes, forcedModes?: Modes): React.ReactNode[];
+/**
+ * Combines several refs (object refs and/or callback refs) into a single
+ * callback ref. Useful when a component needs to keep its own internal ref to a
+ * node while still honouring a ref forwarded by the consumer.
+ *
+ * @example
+ * const inputRef = useRef<RNTextInput>(null)
+ * <RNTextInput ref={mergeRefs(inputRef, forwardedRef)} />
+ */
+export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined | null>): React.RefCallback<T>;
 /**
  * Flattens React children, extracting them from Fragments.
  * Useful for Group components that need to process individual items (e.g., for layout or styling)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.0",
+  "version": "0.1.8",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -30,9 +30,11 @@
     "lint": "eslint .",
     "build-react": "webpack --mode production",
     "start-react": "webpack-dev-server --config ./webpack.config.js --mode development",
+    "tokens": "node scripts/figma-token-explorer.js",
     "extract-tokens": "node scripts/extract-component-tokens.js",
+    "generate-mode-types": "node scripts/generate-mode-types.js",
     "generate-docs": "node scripts/generate-component-docs.js",
-    "prestorybook-web": "npm run extract-tokens && npm run generate-docs",
+    "prestorybook-web": "npm run extract-tokens && npm run generate-mode-types && npm run generate-docs",
     "storybook-web": "storybook dev -p 6006",
     "build:storybook-web": "storybook build",
     "deploy:storybook": "vercel --prod",

package/src/components/Accordion/Accordion.tsx

@@ -15,6 +15,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 // Enable LayoutAnimation on Android
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
@@ -75,7 +76,7 @@ export type AccordionProps = {
   /** Content to display when the accordion is expanded (Figma Slot: 'content') */
   children?: React.ReactNode;
   /** Modes object passed to getVariableByName for all design tokens */
-  modes?: Record<string, any>;
+  modes?: Modes;
   /** Optional container style overrides */
   style?: StyleProp<ViewStyle>;
   /** Accessibility label for screen readers. If not provided, uses title */

package/src/components/AccordionCheckbox/AccordionCheckbox.tsx

@@ -15,6 +15,7 @@ import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Checkbox from '../Checkbox/Checkbox'
 import Divider from '../Divider/Divider'
 import Icon from '../../icons/Icon'
+import type { Modes } from '../../design-tokens'
 
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true)
@@ -46,7 +47,7 @@ export type AccordionCheckboxProps = {
    */
   children?: React.ReactNode
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override outer container styles. */
   style?: StyleProp<ViewStyle>
   /** Accessibility label for the header press target. Defaults to `title`. */

package/src/components/AccountCard/AccountCard.tsx

@@ -15,6 +15,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'
 
 const IS_IOS = Platform.OS === 'ios'
 const PRESS_DELAY = IS_IOS ? 130 : 0
@@ -80,7 +81,7 @@ export type AccountCardProps = {
     /** Disable interaction (also dims the card). */
     disabled?: boolean
     /** Design token modes (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Container style override. */
     style?: StyleProp<ViewStyle>
     /** Accessibility label (defaults to `title`). */

package/src/components/ActionFooter/ActionFooter.tsx

@@ -11,6 +11,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
 import IconButton from '../IconButton/IconButton'
+import type { Modes } from '../../design-tokens'
 
 export type ActionFooterProps = {
   /**
@@ -25,7 +26,7 @@ export type ActionFooterProps = {
    * Automatically merged into every slot child via {@link cloneChildrenWithModes}
    * so callers don't have to thread modes down by hand.
    */
-  modes?: Record<string, any>
+  modes?: Modes
   /**
    * Optional style overrides for the outer container.
    */

package/src/components/ActionTile/ActionTile.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 } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type ActionTileProps = {
     /** Label text, e.g. "Cards" */
@@ -15,7 +16,7 @@ export type ActionTileProps = {
      */
     icon?: React.ReactNode
     /** Modes for design token resolution */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Optional container style */
     style?: ViewStyle
     /** Callback when tile is pressed */

package/src/components/AllocationComparisonChart/AllocationComparisonChart.tsx

@@ -11,6 +11,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'
 
 /**
  * One vertical pill in the {@link AllocationComparisonChartProps.data} array.
@@ -99,7 +100,7 @@ export type AllocationComparisonChartProps = {
      */
     formatValue?: (value: number) => string
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Container style override. */
     style?: StyleProp<ViewStyle>
     /** Style applied to the bars row. */

package/src/components/AmountInput/AmountInput.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { View, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import MoneyValue from '../MoneyValue/MoneyValue'
 import NoteInput from '../NoteInput/NoteInput'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type AmountInputProps = {
     /**
@@ -16,7 +17,7 @@ export type AmountInputProps = {
      */
     noteInputSlot?: React.ReactNode
     /** Modes for design token resolution */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Optional container style */
     style?: ViewStyle
 }
@@ -26,12 +27,12 @@ export type AmountInputProps = {
  *
  * @component
  */
-export default function AmountInput({
+const AmountInput = forwardRef<View, AmountInputProps>(function AmountInput({
     moneyValueSlot,
     noteInputSlot,
     modes: propModes = EMPTY_MODES,
     style,
-}: AmountInputProps) {
+}: AmountInputProps, ref: React.Ref<View>) {
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
 
@@ -74,9 +75,11 @@ export default function AmountInput({
     }
 
     return (
-        <View style={containerStyle}>
+        <View ref={ref} style={containerStyle}>
             {renderMoneyValueSlot()}
             {renderNoteInputSlot()}
         </View>
     )
-}
+})
+
+export default AmountInput

package/src/components/AppBar/AppBar.tsx

@@ -5,6 +5,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 
 import NavArrow from '../NavArrow/NavArrow'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type AppBarType = 'MainPage' | 'SubPage'
 
@@ -54,7 +55,7 @@ export type AppBarProps = {
   /**
    * Token modes to override.
    */
-  modes?: Record<string, any>;
+  modes?: Modes;
   /**
    * Callback for the default leading slot press (e.g. back button).
    */

package/src/components/AreaLineChart/AreaLineChart.tsx

@@ -25,6 +25,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'
 import {
     buildAreaPath,
     buildLineSegments,
@@ -141,7 +142,7 @@ export type AreaLineChartProps = {
     /** Enable hover/press-drag interaction + tooltip. Defaults to `true`. */
     interactive?: boolean
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Container style override. */
     style?: StyleProp<ViewStyle>
     /** Extra SVG-decorator children rendered on top of the default layers. */
@@ -182,7 +183,7 @@ type ChartContextValue = {
     formatX: (label: string | number, index: number) => React.ReactNode
     formatY: (value: number) => React.ReactNode
     showDots: boolean
-    modes: Record<string, any>
+    modes: Modes
 }
 
 const ChartContext = createContext<ChartContextValue | null>(null)
@@ -231,7 +232,7 @@ const appearanceFor = (index: number) =>
 const resolveLineColor = (
     color: string | undefined,
     appearance: string,
-    modes: Record<string, any>
+    modes: Modes
 ): string => {
     if (color) return color
     return (
@@ -248,7 +249,7 @@ const resolveAreaColor = (
     color: string | undefined,
     lineColor: string,
     appearance: string,
-    modes: Record<string, any>
+    modes: Modes
 ): string => {
     if (color) return color
     return (
@@ -281,7 +282,7 @@ const defaultFormatX = (label: string | number): React.ReactNode => String(label
  * @component
  */
 function AreaLineChart({
-    series,
+    series = [],
     xLabels,
     yMin,
     yMax,
@@ -1017,7 +1018,7 @@ function ChartTooltip({
     x: number
     width: number
     items: Array<{ key: string; label: string; value: React.ReactNode; color: string }>
-    modes: Record<string, any>
+    modes: Modes
 }) {
     const [size, setSize] = useState<{ width: number; height: number } | null>(null)
 
@@ -1098,7 +1099,7 @@ function ChartLegend() {
 // --- Shared hooks / utils --------------------------------------------------
 
 /** Resolve `axisItem/*` typography tokens into a memoized text style. */
-function useAxisTypography(modes: Record<string, any>) {
+function useAxisTypography(modes: Modes) {
     return useMemo(() => {
         const color = (getVariableByName('axisItem/color', modes) as string | null) ?? '#000000'
         const fontFamily =

package/src/components/Attached/Attached.tsx

@@ -9,6 +9,7 @@ import {
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /**
  * Anchor point on the main content where the attached `badge` is centered.
@@ -75,7 +76,7 @@ export type AttachedProps = Omit<ViewProps, 'children'> & {
    */
   circular?: boolean
   /** Mode configuration cascaded to the token resolver and all children. */
-  modes?: Record<string, any>
+  modes?: Modes
   style?: StyleProp<ViewStyle>
 }