jfs-components 0.1.0 → 0.1.8

package/lib/module/utils/react-utils.js

@@ -1,7 +1,6 @@
 "use strict";
 
 import React from 'react';
-
 /**
  * A shared, frozen empty modes object.
  *
@@ -73,6 +72,27 @@ export function cloneChildrenWithModes(children, modes, forcedModes) {
   return React.Children.toArray(result);
 }
 
+/**
+ * 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 function mergeRefs(...refs) {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
 /**
  * Flattens React children, extracting them from Fragments.
  * Useful for Group components that need to process individual items (e.g., for layout or styling)

package/lib/typescript/src/components/Accordion/Accordion.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle, type AccessibilityState } from 'react-native';
 import { type WebAccessibilityProps } from '../../utils/web-platform-utils';
+import type { Modes } from '../../design-tokens';
 export type AccordionProps = {
     /** The accordion header title */
     title?: string;
@@ -21,7 +22,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/lib/typescript/src/components/AccordionCheckbox/AccordionCheckbox.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type AccordionCheckboxProps = {
     /** Title shown next to the checkbox (e.g. "Axis Bank"). */
     title?: string;
@@ -26,7 +27,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/lib/typescript/src/components/AccountCard/AccountCard.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type AccountCardState = 'connected' | 'add';
 export type AccountCardProps = {
     /**
@@ -49,7 +50,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/lib/typescript/src/components/ActionFooter/ActionFooter.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type ActionFooterProps = {
     /**
      * Content to render inside the action footer slot.
@@ -13,7 +14,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/lib/typescript/src/components/ActionTile/ActionTile.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type ActionTileProps = {
     /** Label text, e.g. "Cards" */
     label?: string;
@@ -10,7 +11,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/lib/typescript/src/components/AllocationComparisonChart/AllocationComparisonChart.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * One vertical pill in the {@link AllocationComparisonChartProps.data} array.
  *
@@ -86,7 +87,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/lib/typescript/src/components/AmountInput/AmountInput.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { type ViewStyle } from 'react-native';
+import { View, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type AmountInputProps = {
     /**
      * Slot for the MoneyValue component.
@@ -10,7 +11,7 @@ export type AmountInputProps = {
      */
     noteInputSlot?: React.ReactNode;
     /** Modes for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Optional container style */
     style?: ViewStyle;
 };
@@ -19,5 +20,6 @@ export type AmountInputProps = {
  *
  * @component
  */
-export default function AmountInput({ moneyValueSlot, noteInputSlot, modes: propModes, style, }: AmountInputProps): import("react/jsx-runtime").JSX.Element;
+declare const AmountInput: React.ForwardRefExoticComponent<AmountInputProps & React.RefAttributes<View>>;
+export default AmountInput;
 //# sourceMappingURL=AmountInput.d.ts.map

package/lib/typescript/src/components/AppBar/AppBar.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 type AppBarType = 'MainPage' | 'SubPage';
 export type AppBarProps = {
     /**
@@ -39,7 +40,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/lib/typescript/src/components/AreaLineChart/AreaLineChart.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 import { type Curve, type LinearScale, type ResolvedPoint } from './chartMath';
 /** A single data point. Bare numbers are also accepted in `data`. */
 export type ChartPoint = {
@@ -97,7 +98,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. */
@@ -134,7 +135,7 @@ type ChartContextValue = {
     formatX: (label: string | number, index: number) => React.ReactNode;
     formatY: (value: number) => React.ReactNode;
     showDots: boolean;
-    modes: Record<string, any>;
+    modes: Modes;
 };
 /** Access the surrounding chart geometry from a decorator/sub-component. */
 export declare function useChart(): ChartContextValue;

package/lib/typescript/src/components/Attached/Attached.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * Anchor point on the main content where the attached `badge` is centered.
  * Mirrors the nine Figma `position` variants (corners, edge midpoints, center).
@@ -55,7 +56,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>;
 };
 declare function Attached({ children, badge, badgeSize, badgeRadius, position, circular, modes: propModes, style, ...rest }: AttachedProps): import("react/jsx-runtime").JSX.Element;

package/lib/typescript/src/components/Avatar/Avatar.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * Avatar component that displays either an image or a monogram.
  *
@@ -22,7 +23,7 @@ import { View, type ImageSourcePropType } from 'react-native';
 export type AvatarProps = {
     monogram?: string;
     style?: 'Image' | 'Monogram';
-    modes?: Record<string, any>;
+    modes?: Modes;
     imageSource?: ImageSourcePropType | string;
     accessibilityLabel?: string;
     onPress?: () => void;

package/lib/typescript/src/components/AvatarGroup/AvatarGroup.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { View, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 type AvatarGroupProps = {
-    modes?: Record<string, any>;
+    modes?: Modes;
     children?: React.ReactNode;
     style?: ViewStyle;
 } & React.ComponentProps<typeof View>;

package/lib/typescript/src/components/Badge/Badge.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { View, type ViewStyle, type TextStyle } from 'react-native';
+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/lib/typescript/src/components/Balance/Balance.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type BalanceProps = {
     /**
      * Title text displayed above the balance amount.
@@ -19,7 +20,7 @@ export type BalanceProps = {
     /**
      * Mode configuration for design tokens.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides for the container.
      */

package/lib/typescript/src/components/BenefitCard/BenefitCard.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single benefit row rendered with the shared `ListItem` primitive: a
+ * leading icon, a title and an optional right-aligned trailing value.
+ */
+export interface BenefitCardItem {
+    /** Registry icon name for the leading glyph (e.g. `'ic_jewellery_diamond'`). */
+    icon?: string;
+    /** Per-item override for the leading icon color. Defaults to the brand token. */
+    iconColor?: string;
+    /** Full override for the leading node. Takes precedence over `icon`. */
+    leading?: React.ReactNode;
+    /** Row title (e.g. `"JioPoints"`). */
+    title: string;
+    /** Optional right-aligned trailing value (e.g. `"Up to 2000 pts"`). */
+    trailingText?: string;
+    /** Full override for the trailing node. Takes precedence over `trailingText`. */
+    trailing?: React.ReactNode;
+    /** Makes the row pressable. */
+    onPress?: () => void;
+}
+export interface BenefitCardProps {
+    /** Header section title (e.g. `"You will earn"`). */
+    headerTitle?: string;
+    /**
+     * Highlighted item shown directly under the header title (icon + title +
+     * optional trailing value). Rendered above the divider.
+     */
+    headerItem?: BenefitCardItem;
+    /**
+     * Toggles the whole header section (title + item + divider). Mirrors the
+     * Figma `showHeader` property. Defaults to `true`.
+     */
+    showHeader?: boolean;
+    /** Body section title (e.g. `"Upgrade to JioFinance+ and earn more"`). */
+    bodyTitle?: string;
+    /**
+     * Body benefit rows. Ignored when `children` is provided (the slot wins).
+     */
+    items?: BenefitCardItem[];
+    /**
+     * Real slot for the body "list wrap". When provided, these children render
+     * instead of `items`; `modes` (plus the `List Item Style: Minimal` style)
+     * cascade into every child automatically.
+     */
+    children?: React.ReactNode;
+    /** CTA button label. Defaults to `"Upgrade"`. */
+    buttonLabel?: string;
+    /** CTA press handler. */
+    onButtonPress?: () => void;
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode;
+    /**
+     * Toggles the CTA button. Mirrors the Figma `showButton` property.
+     * Defaults to `true`.
+     */
+    showButton?: boolean;
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void;
+    /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`;
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes;
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string;
+}
+/**
+ * BenefitCard — Figma node 5352:1077 ("Benefit Card").
+ *
+ * A white, rounded card that summarises the rewards a user will earn. It is
+ * composed entirely from the shared design-system primitives so it stays in
+ * sync with the rest of the library:
+ *
+ *  - **Header** — a section title + a single highlighted {@link ListItem}
+ *    (leading `Icon`, title, right-aligned trailing value) followed by a
+ *    `Divider`.
+ *  - **Body** — a section title + a column of benefit {@link ListItem}s. The
+ *    list is a real slot: pass `children` to fully control it, or `items` for
+ *    the declarative path.
+ *  - **CTA** — a small {@link Button} (Figma `Button / Size = S`).
+ *
+ * The list rows resolve through the `List Item Style: Minimal` mode (12px /
+ * regular title, 4px gap, no padding) and the leading icons use the
+ * `AppearanceBrand: Secondary` brand color, exactly matching the design. All
+ * three defaults can be overridden via `modes`.
+ */
+declare function BenefitCard({ headerTitle, headerItem, showHeader, bodyTitle, items, children, buttonLabel, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: BenefitCardProps): import("react/jsx-runtime").JSX.Element;
+export default BenefitCard;
+//# sourceMappingURL=BenefitCard.d.ts.map

package/lib/typescript/src/components/BottomNav/BottomNav.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import BottomNavItem from '../BottomNavItem/BottomNavItem';
+import type { Modes } from '../../design-tokens';
 type BottomNavProps = {
     /**
      * Value of the currently selected item.
@@ -15,7 +16,7 @@ type BottomNavProps = {
      * The content of the component (BottomNav.Item components).
      */
     children?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;

package/lib/typescript/src/components/BottomNavItem/BottomNavItem.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { type AccessibilityState, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-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>;

package/lib/typescript/src/components/BrandChip/BrandChip.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ImageSourcePropType, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type BrandChipProps = {
     /** Visible label (e.g. `"Axis Bank • 0245"`). */
     label?: string;
@@ -17,7 +18,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. */

package/lib/typescript/src/components/BubbleChart/BubbleChart.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 import { type ClusterBubbleLabelPlacement } from '../ClusterBubble/ClusterBubble';
 /** One bubble in the chart. */
 export type BubbleDatum = {
@@ -58,7 +59,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/lib/typescript/src/components/Button/Button.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type AccessibilityState, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
 import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils';
+import type { Modes } from '../../design-tokens';
 export type ButtonProps = SafePressableProps & {
     label?: string;
     children?: React.ReactNode;
@@ -28,7 +29,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>;

package/lib/typescript/src/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type ButtonGroupProps = {
     /**
      * Child elements to be rendered inside the button group.
@@ -10,7 +11,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/lib/typescript/src/components/Card/Card.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface CardProps {
     /**
      * Content rendered in the header slot at the top of the card (e.g. a brand logo).
@@ -18,7 +19,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).
@@ -52,7 +53,7 @@ export declare namespace Card {
 export interface CardTextProps {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }
 export default Card;
 //# sourceMappingURL=Card.d.ts.map

package/lib/typescript/src/components/CardAdvisory/CardAdvisory.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 type CardAdvisoryBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
 export type CardAdvisoryProps = CardAdvisoryBaseProps & {
     /** Main heading text. */
@@ -27,7 +28,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. */

package/lib/typescript/src/components/CardBankAccount/CardBankAccount.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import type { UnifiedSource } from '../../utils/MediaSource';
+import type { Modes } from '../../design-tokens';
 export type CardBankAccountItem = {
     /** Left-aligned label text (e.g. "Account type"). */
     label: string;
@@ -61,7 +62,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/lib/typescript/src/components/CardCTA/CardCTA.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type CardCTAType = 'cta' | 'rating';
 export type CardCTAProps = {
     /** Visual layout variant */
@@ -23,7 +24,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/lib/typescript/src/components/CardFeedback/CardFeedback.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface CardFeedbackProps {
     /**
      * The main content of the card (Icon, Title, Body, Action).
@@ -8,7 +9,7 @@ export interface CardFeedbackProps {
     /**
      * Modes object for token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Style overrides for the card container.
      */
@@ -34,7 +35,7 @@ export declare namespace CardFeedback {
 export declare function Icon({ children, style, modes: propModes, icon }: {
     children?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
     icon?: string;
 }): import("react/jsx-runtime").JSX.Element;
 /**
@@ -45,7 +46,7 @@ export declare function Icon({ children, style, modes: propModes, icon }: {
 export declare function Content({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Title Component
@@ -54,7 +55,7 @@ export declare function Content({ children, style, modes: propModes }: {
 export declare function Title({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Body Component
@@ -63,7 +64,7 @@ export declare function Title({ children, style, modes: propModes }: {
 export declare function Body({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Action Slot Wrapper
@@ -72,7 +73,7 @@ export declare function Body({ children, style, modes: propModes }: {
 export declare function Action({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 export default CardFeedback;
 //# sourceMappingURL=CardFeedback.d.ts.map

package/lib/typescript/src/components/CardFinancialCondition/CardFinancialCondition.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import { type CircularProgressBarProps } from '../CircularProgressBar/CircularProgressBar';
+import type { Modes } from '../../design-tokens';
 type CardFinancialConditionBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
 export type CardFinancialConditionProps = CardFinancialConditionBaseProps & {
     /** Title text shown in the header. */
@@ -32,7 +33,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. */

package/lib/typescript/src/components/CardInsight/CardInsight.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type CardInsightProps = {
     /** Card title rendered in the header (left of the badge). */
     title?: string;
@@ -28,7 +29,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>;
 };