jfs-components 0.1.0 → 0.1.8

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,56 +1,37 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native';
-type TextInputProps = {
+import { TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+declare const TextInputBase: React.ForwardRefExoticComponent<{
     placeholder?: string;
     value?: string;
     onChangeText?: (text: string) => void;
     leadingIconName?: string;
     leading?: React.ReactNode;
     trailing?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     inputStyle?: StyleProp<TextStyle>;
     onFocus?: (e: any) => void;
     onBlur?: (e: any) => void;
     accessibilityLabel?: string;
     accessibilityHint?: string;
-} & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
-declare function TextInput({ placeholder, value, onChangeText, leadingIconName, leading, trailing, modes, style, inputStyle, onFocus, onBlur, accessibilityLabel, accessibilityHint, ...rest }: TextInputProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TextInput {
-    var Search: typeof TextInputSearch;
-}
-/**
- * TextInput.Search component that mirrors the Figma "textInput.search" component.
- *
- * This is a convenience variant that pre-configures the TextInput with:
- *  - Default search icon in the leading slot
- *  - No trailing slot
- *  - Default placeholder text "Search"
- *
- * @component
- * @param {Object} props
- * @param {string} [props.placeholder='Search'] - Placeholder text (defaults to "Search")
- * @param {string} [props.value=''] - Current value of the input
- * @param {Function} [props.onChangeText] - Callback function called when text changes
- * @param {React.ReactNode} [props.leading] - Optional leading slot (defaults to search icon)
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
- * @param {Object} [props.style] - Optional container style overrides
- * @param {Object} [props.inputStyle] - Optional text input style overrides
- * @param {Object} [props.rest] - Additional props passed to the underlying TextInput
- */
-type TextInputSearchProps = {
+} & Omit<RNTextInputProps, "style" | "value" | "onFocus" | "onBlur" | "placeholder" | "onChangeText"> & React.RefAttributes<RNTextInput>>;
+declare const TextInputSearch: React.ForwardRefExoticComponent<{
     placeholder?: string;
     value?: string;
     onChangeText?: (text: string) => void;
     leading?: React.ReactNode;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     inputStyle?: StyleProp<TextStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;
     onFocus?: (e: any) => void;
     onBlur?: (e: any) => void;
-} & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
-declare function TextInputSearch({ placeholder, value, onChangeText, leading, modes, style, inputStyle, accessibilityLabel, accessibilityHint, onFocus, onBlur, ...rest }: TextInputSearchProps): import("react/jsx-runtime").JSX.Element;
+} & Omit<RNTextInputProps, "style" | "value" | "onFocus" | "onBlur" | "placeholder" | "onChangeText"> & React.RefAttributes<RNTextInput>>;
+type TextInputComponent = typeof TextInputBase & {
+    Search: typeof TextInputSearch;
+};
+declare const TextInput: TextInputComponent;
 export default TextInput;
 //# sourceMappingURL=TextInput.d.ts.map

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import { type TextStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single coloured run inside a {@link TextSegment}. Each run can carry its own
+ * `modes`, so individual fragments of the same paragraph can resolve different
+ * design tokens (most commonly a different `text/foreground` colour) while still
+ * flowing — and wrapping — inline as one continuous line of text.
+ */
+export type TextSegmentRun = {
+    /** The text for this run. Include trailing/leading spaces yourself when you want spacing between runs (inline text has no gap concept). */
+    text: string;
+    /**
+     * Per-run mode overrides. Merged on top of the parent `TextSegment` modes, so
+     * a run only needs to specify what differs (e.g. `{ 'Text Appearance': 'Primary' }`
+     * to recolour just that fragment). Everything else is inherited.
+     */
+    modes?: Modes;
+    /** Optional per-run style override applied last, on top of the token-resolved style. */
+    style?: StyleProp<TextStyle>;
+};
+export type TextSegmentProps = {
+    /**
+     * Declarative, data-driven way to compose a multi-colour string. Each entry
+     * becomes an inline run. This is the simplest API when the segments are known
+     * up front:
+     *
+     * ```tsx
+     * <TextSegment segments={[
+     *   { text: 'Upsell message ' },
+     *   { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+     * ]} />
+     * ```
+     *
+     * When both `segments` and `children` are provided, `children` win.
+     */
+    segments?: TextSegmentRun[];
+    /**
+     * Compositional alternative to {@link TextSegmentProps.segments}. Pass library
+     * `Text` elements (or plain strings) as children and they are rendered nested
+     * inside the same paragraph so they wrap together. The parent `modes` cascade
+     * down to every child via `cloneChildrenWithModes`, and each child may still
+     * override with its own `modes`:
+     *
+     * ```tsx
+     * <TextSegment>
+     *   <Text>Upsell message </Text>
+     *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+     * </TextSegment>
+     * ```
+     */
+    children?: React.ReactNode;
+    /** Horizontal alignment of the whole paragraph. */
+    textAlign?: 'Left' | 'Center';
+    /** Clamp the paragraph to this many lines (truncates with an ellipsis). Applies to the whole composed line, not per-run. */
+    numberOfLines?: number;
+    /** Mode configuration used for the base style and cascaded to every run/child. */
+    modes?: Modes;
+    /** Style override applied to the outer paragraph (e.g. width constraints to force wrapping). */
+    style?: StyleProp<TextStyle>;
+};
+/**
+ * TextSegment — composes several differently-styled text runs into a single
+ * paragraph that wraps as one continuous line.
+ *
+ * On the web you would reach for `<span>`s inside a `<p>`; the React Native
+ * equivalent is nesting `<Text>` inside a parent `<Text>`. That nesting is the
+ * whole trick: sibling `<View>`s would lay out as flex blocks and break onto
+ * rigid rows, but nested `<Text>` nodes flow inline and wrap naturally at word
+ * boundaries — exactly like a real paragraph — while each nested run keeps its
+ * own colour/weight resolved from its own `modes`.
+ *
+ * Two equivalent ways to author content:
+ *  - **`segments` prop** — declarative array of `{ text, modes }` runs.
+ *  - **`children`** — pass library `Text` elements (or strings); the parent
+ *    `modes` cascade down and each child may override its own.
+ *
+ * @example Data-driven
+ * ```tsx
+ * <TextSegment
+ *   segments={[
+ *     { text: 'Upsell message ' },
+ *     { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Compositional
+ * ```tsx
+ * <TextSegment numberOfLines={2}>
+ *   <Text>Pay with </Text>
+ *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+ *   <Text> and earn rewards on every transaction.</Text>
+ * </TextSegment>
+ * ```
+ */
+declare function TextSegment({ segments, children, textAlign, numberOfLines, modes, style, }: TextSegmentProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TextSegment>;
+export default _default;
+//# sourceMappingURL=TextSegment.d.ts.map

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

@@ -5,6 +5,7 @@ export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
 export { default as Badge } from './Badge/Badge';
+export { default as BenefitCard, type BenefitCardProps, type BenefitCardItem } from './BenefitCard/BenefitCard';
 export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as BrandChip, type BrandChipProps } from './BrandChip/BrandChip';
@@ -20,11 +21,12 @@ export { default as CheckboxGroup, type CheckboxGroupProps } from './CheckboxGro
 export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
 export { default as CardFinancialCondition, type CardFinancialConditionProps } from './CardFinancialCondition/CardFinancialCondition';
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight';
+export { default as CcCard, type CcCardProps, type CcCardBadge, type CcCardListItem } from './CcCard/CcCard';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
-export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
+export { default as DropdownInput, type DropdownInputProps, type DropdownInputHandle, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
 export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';
 export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA';
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
@@ -38,6 +40,7 @@ export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating';
 export { default as CoverageRing, type CoverageRingProps } from './CoverageRing/CoverageRing';
 export { default as CoverageBarComparison, type CoverageBarComparisonProps, type CoverageBarComparisonItem } from './CoverageBarComparison/CoverageBarComparison';
+export { default as ComparisonBar, type ComparisonBarProps, type ComparisonBarItem } from './ComparisonBar/ComparisonBar';
 export { default as AllocationComparisonChart, type AllocationComparisonChartProps, type AllocationSegment } from './AllocationComparisonChart/AllocationComparisonChart';
 export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps } from './MonthlyStatusGrid/MonthlyStatusGrid';
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
@@ -63,9 +66,11 @@ 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';
+export { default as Slider, type SliderProps, type SliderHandle } from './Slider/Slider';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
 export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
@@ -116,12 +121,16 @@ export { default as ToastProvider, type ToastProviderProps } from './Toast/Toast
 export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';
 export { default as AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
 export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
+export { default as PdpCcCard, type PdpCcCardProps, type PdpCcCardMetric } from './PdpCcCard/PdpCcCard';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
 export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue } from './PlanComparisonCard/PlanComparisonCard';
+export { default as CompareTable, type CompareTableProps, type CompareTableColumn, type CompareTableRow, type CompareTableCellValue, type CompareTableSection } from './CompareTable/CompareTable';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
+export { default as ProductMerchandisingCard, type ProductMerchandisingCardProps } from './ProductMerchandisingCard/ProductMerchandisingCard';
 export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';
+export { default as ProjectionMarker, type ProjectionMarkerProps } from './ProjectionMarker/ProjectionMarker';
 export { default as ProgressBadge, type ProgressBadgeProps } from './ProgressBadge/ProgressBadge';
 export { default as SwappableAmount, type SwappableAmountProps } from './SwappableAmount/SwappableAmount';
 export { default as OTP, OTPResend, useOtpResend, type OTPProps, type OTPResendProps, type OTPResendConfig, type UseOtpResendOptions, type UseOtpResendReturn, type OtpResendState, } from './OTP/OTP';
@@ -132,6 +141,7 @@ export { default as StrengthIndicator, type StrengthIndicatorProps, type Strengt
 export { default as SummaryTile, type SummaryTileProps } from './SummaryTile/SummaryTile';
 export { default as TestimonialsCard, type TestimonialsCardProps } from './TestimonialsCard/TestimonialsCard';
 export { default as Text, type TextProps } from './Text/Text';
+export { default as TextSegment, type TextSegmentProps, type TextSegmentRun } from './TextSegment/TextSegment';
 export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';
 //# sourceMappingURL=index.d.ts.map

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