jfs-components 0.1.0 → 0.1.2

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

@@ -1,7 +1,6 @@
 "use strict";
 
 import React from 'react';
-
 /**
  * A shared, frozen empty modes object.
  *

package/lib/typescript/scripts/extract-component-tokens.d.ts

@@ -3,7 +3,7 @@
  */
 export function extractAllTokens(): {};
 /**
- * Extract all getVariableByName calls from a component file
+ * Backwards-compatible helper: just the token names for a file.
  */
 export function extractTokensFromFile(filePath: any): any[];
 //# sourceMappingURL=extract-component-tokens.d.ts.map

package/lib/typescript/scripts/generate-mode-types.d.ts

@@ -0,0 +1,2 @@
+export function generate(): void;
+//# sourceMappingURL=generate-mode-types.d.ts.map

package/lib/typescript/scripts/retype-modes.d.cts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=retype-modes.d.cts.map

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

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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type CardProviderInfoProps = {
     /** Product name shown in the ProductLabel header. */
     label?: string;
@@ -8,7 +9,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/lib/typescript/src/components/Carousel/Carousel.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
 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. */
@@ -29,7 +30,7 @@ export declare namespace Carousel {
 }
 export interface CarouselItemProps {
     children?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
 }
 /**
@@ -38,7 +39,7 @@ export interface CarouselItemProps {
  */
 export declare function Item({ children, modes: _modes, style }: CarouselItemProps): import("react/jsx-runtime").JSX.Element;
 export interface PaginationProps {
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
 }
 export declare function Pagination({ modes: propModes, style }: PaginationProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,5 @@
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface CheckboxProps {
     /** Whether the checkbox is checked (controlled) */
     checked?: boolean;
@@ -9,7 +10,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/lib/typescript/src/components/CheckboxGroup/CheckboxGroup.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 CheckboxGroupProps = {
     /**
      * Slot — a list of `CheckboxItem` (or compatible) elements to render inside
@@ -10,7 +11,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/lib/typescript/src/components/CheckboxItem/CheckboxItem.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type CheckboxItemProps = {
     /** Whether the checkbox is checked (controlled). */
     checked?: boolean;
@@ -32,7 +33,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/lib/typescript/src/components/ChipGroup/ChipGroup.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 ChipGroupProps = {
     /**
      * Child elements to be rendered inside the chip group.
@@ -10,7 +11,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.
      */