jfs-components 0.1.0 → 0.1.8

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/CcCard/CcCard.d.ts

@@ -0,0 +1,137 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+import { type TextSegmentRun } from '../TextSegment/TextSegment';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single coloured chip rendered in the card header. Each badge resolves its
+ * own design tokens through `modes`, so different appearances (brand, tonal,
+ * etc.) can sit side-by-side in the same group.
+ */
+export interface CcCardBadge {
+    /** Visible label text. */
+    label: string;
+    /** Per-badge mode overrides (e.g. `{ AppearanceBrand: 'Tertiary' }`). */
+    modes?: Modes;
+    /** Background color override (wins over the token-resolved value). */
+    color?: string;
+    /** Label color override (wins over the token-resolved value). */
+    labelColor?: string;
+}
+/**
+ * A single benefit row in the card's list, rendered through the shared
+ * {@link ListItem} primitive (leading icon + title).
+ */
+export interface CcCardListItem {
+    /**
+     * Registry icon name for the leading glyph. Defaults to `'ic_card'`. Pass
+     * `null` to omit the leading icon.
+     */
+    icon?: string | null;
+    /** Per-row override for the leading icon color. */
+    iconColor?: string;
+    /** Full override for the leading node. Takes precedence over `icon`. */
+    leading?: React.ReactNode;
+    /** Row title (e.g. `"4 domestic + 2 intl. lounge access yearly"`). */
+    title: string;
+    /** Makes the row pressable. */
+    onPress?: () => void;
+}
+export interface CcCardProps {
+    /**
+     * Compact variant. Renders only the leading media slot (an `Avatar` by
+     * default) followed by the footer **without** its CTA button — a condensed
+     * representation of the card. Mirrors the Figma `compact` property.
+     */
+    compact?: boolean;
+    /** Toggles the header badge row. Defaults to `true`. */
+    showHeader?: boolean;
+    /** Leading (left) badge group. */
+    badges?: CcCardBadge[];
+    /** Trailing (right-aligned) badge group. */
+    trailingBadges?: CcCardBadge[];
+    /** Full override for the header. Takes precedence over `badges`/`trailingBadges`. */
+    header?: React.ReactNode;
+    /**
+     * Image source for the default media slot. Accepts a URL string or any RN
+     * `ImageSourcePropType`. Ignored when `media` is provided.
+     */
+    imageSource?: ImageSourcePropType | string;
+    /** Default media image width. Defaults to the Figma spec (`88`). */
+    imageWidth?: number;
+    /** Default media image height. Defaults to the Figma spec (`54`). */
+    imageHeight?: number;
+    /** Product title rendered next to the media slot (non-compact only). */
+    title?: string;
+    /** Product subtitle rendered below the title (non-compact only). */
+    subtitle?: string;
+    /**
+     * Full override for the media slot's visual. Whatever you pass here is
+     * rendered **in both the compact and non-compact variants** — e.g. pass an
+     * `Avatar` and it stays an avatar in both, pass an `Image` and it stays an
+     * image in both. `modes` cascade into it automatically. Defaults to an
+     * `Image` driven by `imageSource`.
+     */
+    media?: React.ReactNode;
+    /** Benefit rows rendered in the list. Defaults to three sample rows. */
+    items?: CcCardListItem[];
+    /** Toggles the upsell nudge row. Defaults to `true`. */
+    showNudge?: boolean;
+    /**
+     * Declarative content for the nudge's inline text. Defaults to a sample
+     * "Upsell message JioFinance+" string with the last run brand-coloured.
+     */
+    nudgeSegments?: TextSegmentRun[];
+    /** Avatar image source shown at the start of the nudge row. */
+    nudgeAvatarSource?: ImageSourcePropType | string;
+    /** Full override for the nudge row. Takes precedence over the declarative props. */
+    nudge?: React.ReactNode;
+    /** Small muted label above the footer title (`ccCard/headline/*`). */
+    headline?: string;
+    /** Bold footer value (`ccCard/title/*`). */
+    description?: string;
+    /** Muted caption rendered inline after the description (`ccCard/subtitle/*`). */
+    footerSubtitle?: string;
+    /** Full override for the footer text block. */
+    footer?: React.ReactNode;
+    /** CTA button label. Defaults to `"Button"`. */
+    buttonLabel?: string;
+    /** CTA press handler. */
+    onButtonPress?: () => void;
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode;
+    /** Toggles the CTA button (non-compact). Defaults to `true`. */
+    showButton?: boolean;
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void;
+    /** Card width. Defaults to the Figma spec (`343`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`;
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes;
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string;
+}
+/**
+ * CcCard — Figma node 5434:1992 ("Cc Card").
+ *
+ * A white, rounded credit-card product card composed entirely from the shared
+ * design-system primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Header** — two {@link Badge} groups (a leading group + a right-aligned
+ *    trailing group), e.g. `Pre-qualified` / `Lifetime free`.
+ *  - **Media** — a product `Image` + a {@link Title} (title + subtitle resolved
+ *    through the `context7: Card` mode → 14px/12px).
+ *  - **List** — a column of benefit {@link ListItem}s (`List Item Style:
+ *    Minimal`) with leading icons.
+ *  - **Nudge** — an inline upsell row: an {@link Avatar} + a {@link TextSegment}.
+ *  - **Footer** — a headline + description + subtitle text block alongside a
+ *    small {@link Button} (`Button / Size: S`, `AppearanceBrand: Secondary`).
+ *
+ * The {@link CcCardProps.compact} variant collapses the card to just the
+ * leading avatar slot + the footer text block (no CTA button). All defaults can
+ * be overridden via `modes`.
+ */
+declare function CcCard({ compact, showHeader, badges, trailingBadges, header, imageSource, imageWidth, imageHeight, title, subtitle, media, items, showNudge, nudgeSegments, nudgeAvatarSource, nudge, headline, description, footerSubtitle, footer, buttonLabel, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: CcCardProps): import("react/jsx-runtime").JSX.Element;
+export default CcCard;
+//# sourceMappingURL=CcCard.d.ts.map

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

@@ -1,4 +1,6 @@
-import { type StyleProp, type ViewStyle } from 'react-native';
+import React from 'react';
+import { View, 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 +11,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 */
@@ -25,6 +27,6 @@ export interface CheckboxProps {
  * @component
  * @param {CheckboxProps} props
  */
-declare function Checkbox({ checked: controlledChecked, defaultChecked, onValueChange, disabled, modes, style, accessibilityLabel, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<View>>;
 export default Checkbox;
 //# sourceMappingURL=Checkbox.d.ts.map

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 { View, 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. */
@@ -67,6 +68,6 @@ export type CheckboxItemProps = {
  * />
  * ```
  */
-declare function CheckboxItem({ checked: controlledChecked, defaultChecked, onValueChange, disabled, label, control, endSlot, endSlotWidth, modes, style, labelStyle, accessibilityLabel, }: CheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+declare const CheckboxItem: React.ForwardRefExoticComponent<CheckboxItemProps & React.RefAttributes<View>>;
 export default CheckboxItem;
 //# sourceMappingURL=CheckboxItem.d.ts.map

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

package/lib/typescript/src/components/ChipSelect/ChipSelect.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 ChipSelectProps = {
     /**
      * Label text to display.
@@ -19,7 +20,7 @@ export type ChipSelectProps = {
     /**
      * Modes for design token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides.
      */

package/lib/typescript/src/components/CircularProgressBar/CircularProgressBar.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 CircularProgressBarBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
 export type CircularProgressBarState = 'Active' | 'Inactive';
 export type CircularProgressBarProps = CircularProgressBarBaseProps & {
@@ -18,7 +19,7 @@ export type CircularProgressBarProps = CircularProgressBarBaseProps & {
      */
     supportText?: string;
     /** Design token modes forwarded to token lookups. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Track stroke style override. */

package/lib/typescript/src/components/CircularProgressBarDoted/CircularProgressBarDoted.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 CircularProgressBarDotedBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
 export type CircularProgressBarDotedProps = CircularProgressBarDotedBaseProps & {
     /** Progress value. Clamped between 0 and 100. */
@@ -17,7 +18,7 @@ export type CircularProgressBarDotedProps = CircularProgressBarDotedBaseProps &
     /** Called when the tier row is pressed. */
     onTierPress?: () => void;
     /** Design token modes forwarded to token lookups and slot children. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Slot rendered in the center of the dotted ring. Receives `modes` recursively. */
     children?: React.ReactNode;
     /** Container style override. */

package/lib/typescript/src/components/CircularRating/CircularRating.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 CircularRatingBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
 export type CircularRatingProps = CircularRatingBaseProps & {
     /** Rating value. Clamped by CircularProgressBarDoted between 0 and 100. */
@@ -29,7 +30,7 @@ export type CircularRatingProps = CircularRatingBaseProps & {
     /** Optional nudge slot. 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 overrides. */
     style?: StyleProp<ViewStyle>;
     /** Optional rating ring wrapper style overrides. */

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /** Where the value/label text sits relative to the circle. */
 export type ClusterBubbleLabelPlacement = 'inside' | 'outside' | 'auto';
 /** Which side of the circle an *outside* label is anchored to. */
@@ -57,7 +58,7 @@ export type ClusterBubbleProps = {
     /** Style override for the outer container. */
     style?: StyleProp<ViewStyle>;
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Accessibility label. Defaults to a `value + label` composite. */
     accessibilityLabel?: string;
 };

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single product/plan column rendered as a selection card at the top of the
+ * table. The card order maps 1:1 to each {@link CompareTableRow}'s `values`.
+ */
+export type CompareTableColumn = {
+    /** Product / plan name shown under the image. */
+    label?: string;
+    /** Thumbnail / logo image. Accepts a URL string or an RN image source. */
+    imageSource?: ImageSourcePropType | string;
+    /** CTA link text (e.g. "View details"). Omit to hide the link. */
+    actionLabel?: string;
+    /** Handler for the CTA link. Implies the link is shown. */
+    onActionPress?: () => void;
+    /** When provided, renders a tappable close icon to remove the column. */
+    onRemove?: () => void;
+    /** Stable key. Falls back to the label / index. */
+    key?: React.Key;
+};
+/**
+ * Value rendered inside a comparison cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React element → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+export type CompareTableCellValue = string | number | boolean | null | undefined | React.ReactElement;
+export type CompareTableRow = {
+    /** One value per column, in the same order as `columns`. */
+    values: CompareTableCellValue[];
+    /** Stable key. Falls back to the index. */
+    key?: React.Key;
+};
+/**
+ * A collapsible section. Each section renders as an `Accordion` whose body is a
+ * comparison table that spans the same columns as the selection cards.
+ */
+export type CompareTableSection = {
+    /** Accordion header label, e.g. "Fees & charges". */
+    title: string;
+    /** Optional full-width header row shown at the top of the table body. */
+    header?: string;
+    /** Comparison rows; each row's `values` map 1:1 to `columns`. */
+    rows: CompareTableRow[];
+    /** Initial expanded state. Defaults to `true` for the first section. */
+    defaultExpanded?: boolean;
+    /** Stable key. Falls back to the title / index. */
+    key?: React.Key;
+};
+export type CompareTableProps = {
+    /**
+     * Product / plan columns rendered as selection cards. Their order maps 1:1
+     * to each row's `values` array. Supports any number of columns.
+     */
+    columns?: CompareTableColumn[];
+    /** Collapsible comparison sections. */
+    sections?: CompareTableSection[];
+    /**
+     * When provided, renders an "Add a card" tile after the columns. Hidden once
+     * `columns.length` reaches `maxColumns`.
+     */
+    onAddColumn?: () => void;
+    /** Label for the add-a-card tile. @default 'Add a card' */
+    addColumnLabel?: string;
+    /** Maximum number of columns before the add tile is hidden. @default 4 */
+    maxColumns?: number;
+    /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
+    modes?: Modes;
+    /** Override the outer container style. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * CompareTable renders a product comparison surface: a row of selection cards
+ * (one per column) followed by one or more collapsible sections, each holding a
+ * comparison table whose cells line up beneath their column.
+ *
+ * The selection card is an internal sub-component and is intentionally not
+ * exported — it should only be used through `CompareTable`. Implementation of
+ * Figma node `5568:3496` (`Compare table`) with sub-component `5568:3487`
+ * (`selectioncard`).
+ *
+ * @component
+ */
+declare function CompareTable({ columns, sections, onAddColumn, addColumnLabel, maxColumns, modes, style, }: CompareTableProps): import("react/jsx-runtime").JSX.Element;
+export default CompareTable;
+//# sourceMappingURL=CompareTable.d.ts.map

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single slot in the {@link ComparisonBar}. Each item is either empty (the
+ * "Add" state — a tappable `+` capsule) or filled with an image (the
+ * "Image Added" state — the image plus a dismiss capsule in the corner).
+ *
+ * The presence of {@link ComparisonBarItem.imageSource} is what toggles the
+ * state: provide a source to show the image, leave it `undefined`/`null` to
+ * show the empty add slot. This keeps the component fully controlled — the
+ * `ComparisonBar` never owns the image state itself, so the consumer decides
+ * (e.g. after opening a file/asset picker) when and how an item flips between
+ * the two states.
+ */
+export type ComparisonBarItem = {
+    /**
+     * Stable identifier for this slot. Returned to callbacks so the consumer
+     * can target the exact item that was interacted with. Falls back to the
+     * array index when omitted.
+     */
+    id?: string | number;
+    /**
+     * Image to render in the slot. When provided the slot renders in the
+     * "Image Added" state; when omitted/`null` it renders the empty "Add" state.
+     * Accepts the same shapes as the library `Image` component (remote URL
+     * string, `{ uri }`, or a `require()`d asset).
+     */
+    imageSource?: ImageSourcePropType | string | null;
+    /** Accessibility label for the slot. Defaults to a generic add/remove label. */
+    accessibilityLabel?: string;
+};
+export type ComparisonBarProps = {
+    /**
+     * The slots rendered before the Compare button. Each entry controls its own
+     * add/image state via {@link ComparisonBarItem.imageSource}.
+     */
+    items: ComparisonBarItem[];
+    /**
+     * Fired when an empty (Add) slot is tapped. The consumer is expected to react
+     * by opening whatever picker is appropriate and then updating that item's
+     * `imageSource` to flip it into the "Image Added" state — the component does
+     * not know how images are sourced. Receives the item's `id` (or index when no
+     * id was supplied) and the slot index.
+     */
+    onItemPress?: (id: ComparisonBarItem['id'], index: number) => void;
+    /**
+     * Fired when a filled slot is tapped. For better mobile ergonomics the
+     * *entire* filled slot is the remove target (the dismiss capsule is just a
+     * visual affordance), so a fingertip anywhere on the item triggers this. The
+     * consumer is expected to clear that item's `imageSource` to return it to the
+     * "Add" state. Receives the item's `id` (or index) and the slot index.
+     */
+    onItemRemove?: (id: ComparisonBarItem['id'], index: number) => void;
+    /** Fired when the Compare button is pressed. */
+    onCompare?: () => void;
+    /** Label for the trailing action button. Defaults to `"Compare"`. */
+    compareLabel?: string;
+    /**
+     * Explicitly controls the Compare button's *functional* disabled state — a
+     * truly disabled button is non-interactive (its `onPress` never fires), not
+     * just dimmed. Note that `modes` only affects appearance, so dimming the
+     * button via tokens does NOT stop taps; that is what this prop is for.
+     *
+     * When provided (a boolean), it always wins over
+     * {@link ComparisonBarProps.disableCompareWhenEmpty}. Leave it `undefined`
+     * to fall back to the auto behavior.
+     */
+    compareDisabled?: boolean;
+    /**
+     * When `true` (default) the Compare button is automatically (and truly)
+     * disabled while no slot has an image — there is nothing to compare yet. Set
+     * to `false` to keep it tappable even when empty. Ignored when
+     * {@link ComparisonBarProps.compareDisabled} is set explicitly.
+     */
+    disableCompareWhenEmpty?: boolean;
+    /** Mode configuration passed to the token resolver. */
+    modes?: Modes;
+    /** Style overrides for the outer floating card. */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * ComparisonBar — a floating card that lets a user assemble a set of items to
+ * compare, then trigger the comparison.
+ *
+ * Each slot is fully controlled via its `imageSource`: an empty slot shows a
+ * tappable `+` (the "Add" state) and a filled slot shows the image with a
+ * dismiss capsule (the "Image Added" state). The component never sources or
+ * stores images itself — when an empty slot is pressed it fires `onItemPress`
+ * with the item's id/index so the consumer can open whatever picker is
+ * appropriate and then update that item's `imageSource` to flip its state.
+ * Tapping a filled slot (anywhere on it — a mobile-friendly hit target, with
+ * the dismiss capsule as a visual affordance) fires `onItemRemove` so the
+ * consumer can clear the source again.
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState<ComparisonBarItem[]>([
+ *   { id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' },
+ * ])
+ *
+ * <ComparisonBar
+ *   items={items}
+ *   onItemPress={async (id) => {
+ *     const uri = await openImagePicker()
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: uri } : it))
+ *   }}
+ *   onItemRemove={(id) =>
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: null } : it))
+ *   }
+ *   onCompare={runComparison}
+ * />
+ * ```
+ */
+declare function ComparisonBar({ items, onItemPress, onItemRemove, onCompare, compareLabel, compareDisabled, disableCompareWhenEmpty, modes: propModes, style, }: ComparisonBarProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ComparisonBar>;
+export default _default;
+//# sourceMappingURL=ComparisonBar.d.ts.map

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * One entry in the {@link CoverageBarComparisonProps.bars} array.
  *
@@ -41,7 +42,7 @@ export type CoverageBarComparisonItem = {
      * Per-bar design token mode overrides. Merged on top of the parent `modes`
      * and the per-index `Emphasis / DataViz` defaults injected by the parent.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Per-bar accessibility label. */
     accessibilityLabel?: string;
 };
@@ -71,7 +72,7 @@ export type CoverageBarComparisonProps = {
      */
     legendGap?: number;
     /** 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 chart row (the bars container). */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import { type ButtonProps } from '../Button/Button';
+import type { Modes } from '../../design-tokens';
 type CoverageRingBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
 export type CoverageRingProps = CoverageRingBaseProps & {
     /**
@@ -59,7 +60,7 @@ export type CoverageRingProps = CoverageRingBaseProps & {
      */
     children?: React.ReactNode;
     /** Design token modes forwarded to token lookups and slot children. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Override the support-text style inside the ring. */

package/lib/typescript/src/components/DebitCard/DebitCard.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 DebitCardProps = {
     /** Cardholder name displayed in the footer */
     cardholderName?: string;
@@ -18,7 +19,7 @@ export type DebitCardProps = {
     /** Slot: custom content for the provider logo area (right side of header, after cardType text) */
     providerLogoSlot?: React.ReactNode;
     /** Mode configuration for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
 };

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 type DisclaimerProps = {
     disclaimer?: string;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
     accessibilityLabel?: string;

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

@@ -1,4 +1,5 @@
 import { type ViewStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type DividerDirection = 'horizontal' | 'vertical';
 export type DividerProps = {
     /**
@@ -10,7 +11,7 @@ export type DividerProps = {
     /**
      * Mode configuration passed to the token resolver.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides for the divider
      */