jfs-components 0.1.0 → 0.1.2

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * Per-segment data definition for the data-driven `segments` prop.
  *
@@ -31,7 +32,7 @@ export type SegmentedTrackSegmentData = {
      * Per-segment design token mode overrides. Merged on top of the parent
      * `modes` and the per-index Emphasis defaults.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override individual segment styles. */
     style?: StyleProp<ViewStyle>;
     /** Per-segment accessibility label. */
@@ -51,7 +52,7 @@ export type SegmentedTrackProps = {
      */
     children?: React.ReactNode;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override the container styles. */
     style?: StyleProp<ViewStyle>;
     /** Style applied to every segment (data-driven mode only). */
@@ -73,7 +74,7 @@ type SegmentedTrackSegmentProps = {
      * Design token modes for the segment. Merged with parent `modes` and the
      * per-index Emphasis defaults injected by the parent `SegmentedTrack`.
      */
-    modes?: Record<string, any> | undefined;
+    modes?: Modes | undefined;
     /** Override the segment styles. */
     style?: StyleProp<ViewStyle> | undefined;
     /** Per-segment accessibility label. */

package/lib/typescript/src/components/Slot/Slot.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';
 export type SlotLayoutDirection = 'vertical' | 'horizontal';
 export type SlotProps = ViewProps & {
     /**
@@ -25,7 +26,7 @@ export type SlotProps = ViewProps & {
     /**
      * Mode configuration passed to the token resolver and cascaded to children.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
 };
 /**

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

@@ -1,4 +1,5 @@
 import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * Per-segment colours, resolved from the Figma `spiner/*` tokens. Consumers can
  * override any subset via the `colors` prop.
@@ -34,7 +35,7 @@ export type SpinnerProps = SpinnerBaseProps & {
     /** When false, renders a static resting spinner (also honoured for reduced motion). Defaults to true. */
     animating?: boolean;
     /** Design token modes forwarded to token lookups. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Accessibility label announced to assistive tech. Defaults to "Loading". */

package/lib/typescript/src/components/StatGroup/StatGroup.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 StatGroupItem = {
     /** Stable key for the item. Falls back to the label / index. */
     key?: React.Key;
@@ -24,7 +25,7 @@ export type StatGroupProps = {
      */
     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>;
 };

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

@@ -1,4 +1,5 @@
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type StatItemLabelPosition = 'Top' | 'Bottom';
 export type StatItemProps = {
     /** The small descriptive label. */
@@ -14,7 +15,7 @@ export type StatItemProps = {
      */
     labelPosition?: StatItemLabelPosition;
     /** 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/StatusHero/StatusHero.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type StatusHeroProps = {
     /**
      * Custom media slot content.
@@ -20,7 +21,7 @@ export type StatusHeroProps = {
     /** Currency symbol or ISO code for the default MoneyValue */
     currency?: string;
     /** Mode configuration for design tokens */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 /**

package/lib/typescript/src/components/Stepper/Step.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type StepStatus = 'number' | 'complete' | 'error' | 'warning';
 export type StepProps = {
     children?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
     index?: number;
     showLine?: boolean;

package/lib/typescript/src/components/Stepper/StepLabel.d.ts

@@ -1,11 +1,12 @@
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type StepLabelProps = {
     title?: string;
     supportingText?: string;
     metaText?: string;
     subtitle?: boolean;
     meta?: boolean;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 export declare function StepLabel({ title, supportingText, metaText, subtitle, meta, modes, style, }: StepLabelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,12 +2,13 @@ import React from 'react';
 import { type ViewStyle } from 'react-native';
 import { Step } from './Step';
 import { StepLabel } from './StepLabel';
+import type { Modes } from '../../design-tokens';
 export { Step, StepLabel };
 export type { StepProps, StepStatus } from './Step';
 export type { StepLabelProps } from './StepLabel';
 export type StepperProps = {
     children?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 export default function Stepper({ children, modes, style, }: StepperProps): import("react/jsx-runtime").JSX.Element;

package/lib/typescript/src/components/StrengthIndicator/StrengthIndicator.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';
 /**
  * Confidence levels supported by the indicator. Mirrors the Figma `Confidence`
  * mode collection exactly (`High` | `Medium` | `Low` | `None`).
@@ -33,7 +34,7 @@ export type StrengthIndicatorProps = {
      */
     confidence?: StrengthIndicatorConfidenceValue;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
 } & Omit<React.ComponentProps<typeof View>, 'style'>;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type TextInputProps as RNTextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type SuggestiveSearchOptionValue = string | number;
 export type SuggestiveSearchOption = {
     /** Stable, unique value used to identify the suggestion. */
@@ -98,7 +99,7 @@ export type SuggestiveSearchProps = {
     /** Replaces `supportText` when `isInvalid` is true. */
     errorMessage?: string;
     /** Modes for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides for the outermost wrapper. */
     style?: StyleProp<ViewStyle>;
     /** Style overrides for the input row. */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
 import { type StrengthIndicatorConfidenceValue } from '../StrengthIndicator/StrengthIndicator';
+import type { Modes } from '../../design-tokens';
 export type SummaryTileProps = {
     /** Bold heading shown at the top-left of the tile. */
     title?: string;
@@ -35,7 +36,7 @@ export type SummaryTileProps = {
      */
     onPress?: () => void;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
     /** Override the title text styles. */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import { type SupportTextStatus } from './SupportTextIcon';
+import type { Modes } from '../../design-tokens';
 export type SupportTextProps = {
     /**
      * Text to display
@@ -23,7 +24,7 @@ export type SupportTextProps = {
     /**
      * Modes object for design token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
 };
 /**

package/lib/typescript/src/components/SupportText/SupportTextIcon.d.ts

@@ -1,8 +1,9 @@
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success' | 'Loading';
 export type SupportTextIconProps = {
     status?: SupportTextStatus;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 declare function SupportTextIcon({ status, modes, style, }: SupportTextIconProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,5 @@
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type SwappableAmountProps = {
     /** Large display value (e.g. "49g"). */
     value?: string;
@@ -13,7 +14,7 @@ export type SwappableAmountProps = {
     /** Callback when the amount/swap button is pressed. */
     onAmountPress?: () => void;
     /** Modes configuration for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: ViewStyle;
 };

package/lib/typescript/src/components/Tabs/TabItem.d.ts

@@ -1,4 +1,5 @@
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface TabItemProps {
     /** Label text to display */
     label?: string;
@@ -7,7 +8,7 @@ export interface TabItemProps {
     /** Callback when this tab item is pressed */
     onPress?: () => void;
     /** Design token modes for theming */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles */
     style?: StyleProp<ViewStyle>;
     /** Override label text styles */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import TabItem from './TabItem';
+import type { Modes } from '../../design-tokens';
 export interface TabsProps {
     /**
      * Tab item children. Each child should be a <TabItem> component.
@@ -8,7 +9,7 @@ export interface TabsProps {
      */
     children: React.ReactNode;
     /** Design token modes for theming */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * When true, the tabs row scrolls horizontally (useful for many items).
      * @default false

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
 import { type AvatarProps } from '../Avatar/Avatar';
+import type { Modes } from '../../design-tokens';
 export type TestimonialsCardProps = {
     /**
      * The testimonial heading, typically the author's name.
@@ -14,7 +15,7 @@ export type TestimonialsCardProps = {
      * Mode configuration passed to the token resolver. Also forwarded to the
      * Avatar child for consistent theming.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides for the card container.
      */

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type TextStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type TextProps = {
     /**
      * The text content to display. You may also pass content as JSX children
@@ -15,7 +16,7 @@ export type TextProps = {
     /** Horizontal alignment of the text. */
     textAlign?: 'Left' | 'Center';
     /** Modes configuration for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style override for the text. */
     style?: StyleProp<TextStyle>;
     /** Number of lines to limit the text to. */

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 type TextInputProps = {
     placeholder?: string;
     value?: string;
@@ -7,7 +8,7 @@ type TextInputProps = {
     leadingIconName?: string;
     leading?: React.ReactNode;
     trailing?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     inputStyle?: StyleProp<TextStyle>;
     onFocus?: (e: any) => void;
@@ -43,7 +44,7 @@ type TextInputSearchProps = {
     value?: string;
     onChangeText?: (text: string) => void;
     leading?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     inputStyle?: StyleProp<TextStyle>;
     accessibilityLabel?: string;

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type ThreadHeroProps = {
     /** Title text, e.g. "Subhash Rajan" */
     title?: string;
@@ -10,7 +11,7 @@ export type ThreadHeroProps = {
     /** Slot for Avatar component */
     renderAvatar?: ReactNode;
     /** Modes for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Optional container style */
     style?: ViewStyle;
 };

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type TitleProps = {
     title?: string;
     /** Optional subtitle displayed below the title. */
     subtitle?: string;
     /** Horizontal alignment of the title text. */
     textAlign?: 'Left' | 'Center';
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
     /** Optional style overrides for the subtitle text. */

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

@@ -1,11 +1,12 @@
 import { type StyleProp, type ViewStyle } from 'react-native';
 import { type ToastPlacement } from './useToast';
+import type { Modes } from '../../design-tokens';
 export interface ToastProps {
     id: string;
     title: string;
     timeout?: number | undefined;
     onClose?: (() => void) | undefined;
-    modes?: Record<string, any> | undefined;
+    modes?: Modes | undefined;
     placement?: ToastPlacement | undefined;
     style?: StyleProp<ViewStyle> | undefined;
 }

package/lib/typescript/src/components/Toast/ToastProvider.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { type ToastPlacement } from './useToast';
+import type { Modes } from '../../design-tokens';
 export interface ToastProviderProps {
     children: React.ReactNode;
     maxVisibleToasts?: number;
     placement?: ToastPlacement;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }
 declare function ToastProvider({ children, maxVisibleToasts, placement, modes, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
 export default ToastProvider;

package/lib/typescript/src/components/Toast/useToast.d.ts

@@ -1,16 +1,17 @@
+import type { Modes } from '../../design-tokens';
 export type ToastPlacement = 'top' | 'bottom';
 export interface ToastOptions {
     title: string;
     timeout?: number;
     onClose?: () => void;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }
 export interface ToastEntry {
     id: string;
     title: string;
     timeout: number;
     onClose?: (() => void) | undefined;
-    modes?: Record<string, any> | undefined;
+    modes?: Modes | undefined;
 }
 export declare function addToast(options: ToastOptions): string;
 export declare function closeToast(id: string): void;

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

@@ -1,4 +1,5 @@
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface ToggleProps {
     /** Whether the toggle is on (controlled) */
     value?: boolean;
@@ -9,7 +10,7 @@ export interface ToggleProps {
     /** Whether the toggle 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/Tooltip/Tooltip.d.ts

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export type TooltipProps = {
     children: ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Initial visibility state (controlled) */
     open?: boolean;
     /** Callback when visibility changes */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type ViewStyle, type PressableProps } from 'react-native';
 import { type WebAccessibilityProps } from '../../utils/web-platform-utils';
+import type { Modes } from '../../design-tokens';
 export type TransactionBubbleProps = {
     description?: string;
     value?: string | number;
@@ -10,7 +11,7 @@ export type TransactionBubbleProps = {
     /** Slot for the status area. When provided, replaces the default TransactionStatus + NavArrow. */
     statusSlot?: React.ReactNode;
     children?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     onPress?: () => void;
     style?: ViewStyle;
     accessibilityLabel?: string;

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type TransactionDetailsItemProps = {
     /** The label text displayed above the value (e.g., "UPI transaction ID") */
     label?: string;
     /** The value text displayed below the label (e.g., "101674916166") */
     value?: string;
     /** Modes object passed to `getVariableByName` for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Optional container style overrides */
     style?: StyleProp<ViewStyle>;
     /** Optional label text style overrides */
@@ -20,7 +21,7 @@ export type TransactionDetailsProps = {
     /** Slot for TransactionDetails.Item children */
     children?: React.ReactNode;
     /** Modes object passed to `getVariableByName` for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Optional container style overrides */
     style?: StyleProp<ViewStyle>;
     /** Accessibility label for screen readers */

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

@@ -1,11 +1,12 @@
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type TransactionStatusProps = {
     /** Status text, e.g. "Expired" */
     status?: string;
     /** Date text, e.g. "20 Mar 2025" */
     date?: string;
     /** Modes for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Optional container style */
     style?: ViewStyle;
 };

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { View, type ImageSourcePropType } from 'react-native';
 import { type UnifiedSource } from '../../utils/MediaSource';
+import type { Modes } from '../../design-tokens';
 type UpiHandleProps = {
     label?: string;
-    modes?: Record<string, any>;
+    modes?: Modes;
     showIcon?: boolean;
     iconName?: string;
     /**

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ViewStyle, ViewProps } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface VStackProps extends ViewProps {
     /**
      * The content to display inside the stack.
@@ -31,7 +32,7 @@ export interface VStackProps extends ViewProps {
     /**
      * Modes object to override default variable values.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
 }
 /**
  * VStack component for vertical layout using design token spacing.

package/lib/typescript/src/components/docs/modeControls.d.ts

@@ -0,0 +1,28 @@
+type Collections = readonly string[];
+/**
+ * Build `argTypes` entries — one `select` per multi-mode collection, grouped
+ * under a "Modes" category. Spread the result into your story `meta.argTypes`.
+ */
+export declare function modeArgTypes(componentOrCollections: string | Collections, extra?: Collections): Record<string, unknown>;
+/**
+ * A decorator that merges the picked collection modes into `args.modes` and
+ * strips the synthetic control args before they reach the component.
+ */
+export declare function modeDecorator(componentOrCollections: string | Collections, extra?: Collections): (Story: any, context: any) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Convenience: returns `{ argTypes, decorators }` to spread directly into a
+ * story `meta`.
+ *
+ * @example
+ * const meta = {
+ *   title: 'Components/Button',
+ *   component: Button,
+ *   ...withModeControls('Button'),
+ * }
+ */
+export declare function withModeControls(componentOrCollections: string | Collections, extra?: Collections): {
+    argTypes: Record<string, unknown>;
+    decorators: unknown[];
+};
+export {};
+//# sourceMappingURL=modeControls.d.ts.map

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

@@ -63,6 +63,7 @@ export { default as NoteInput, type NoteInputProps } from './NoteInput/NoteInput
 export { default as Nudge, type NudgeProps } from './Nudge/Nudge';
 export { default as NavArrow } from './NavArrow/NavArrow';
 export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Numpad/Numpad';
+export { default as Overlay, type OverlayProps } from './Overlay/Overlay';
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';

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

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import type { Modes } from './figma-modes.generated';
 /**
  * Shape of the TokenContext
  */
@@ -7,7 +8,7 @@ interface TokenContextType {
      * Current active modes map
      * @example { 'Color Mode': 'Dark', 'Platform': 'mobile' }
      */
-    modes: Record<string, any>;
+    modes: Modes;
     /**
      * Helper to resolve variable by name using the current context modes.
      */
@@ -18,7 +19,7 @@ interface JFSThemeProviderProps {
      * Modes to apply globally.
      * Can be used to set 'Color Mode', 'Platform', 'Density', etc.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     children: ReactNode;
 }
 /**
@@ -35,7 +36,7 @@ export declare const JFSThemeProvider: React.FC<JFSThemeProviderProps>;
  * Hook to access the current design token context.
  *
  * returns {
- *   modes: Record<string, any> - The current active modes
+ *   modes: Modes - The current active modes
  *   getVariable: (name: string) => any - Function to resolve a token value
  * }
  */