jfs-components 0.1.0 → 0.1.8

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>
 }