jfs-components 0.1.2 → 0.1.12

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

@@ -1,9 +1,17 @@
 import React from 'react';
 import { View, type ViewStyle, type TextStyle } from 'react-native';
 import type { Modes } from '../../design-tokens';
-type BadgeProps = {
+export type BadgeType = 'default' | 'glass';
+export type BadgeProps = {
     /** Visible label text shown inside the badge */
     label?: string;
+    /**
+     * Visual style (matches the Figma `type` property). `'default'` is a solid
+     * token-colored pill; `'glass'` is a frosted, translucent pill backed by a
+     * real background blur (`GlassFill`) — the same glass surface used at the
+     * bottom of media/merchandising cards.
+     */
+    type?: BadgeType;
     /** Modes used to resolve design tokens (e.g. Appearance, Size) */
     modes?: Modes;
     /** Optional press handler to make the badge interactive */
@@ -11,13 +19,35 @@ type BadgeProps = {
     accessibilityLabel?: string;
     style?: ViewStyle;
     labelStyle?: TextStyle;
+    /**
+     * Optional leading node (icon/image) rendered before the label, inside the
+     * badge surface. When present, the badge lays its contents out in a row.
+     */
+    leading?: React.ReactNode;
+    /**
+     * Glass-only override for the translucent overlay color painted over the live
+     * blur. Defaults to the `badge/glass/color/background` token. Ignored for the
+     * `'default'` type.
+     */
+    glassOverlayColor?: string;
+    /**
+     * Glass-only override for the blur intensity on the 0–100 scale. Defaults to
+     * the `blur/minimal` token. Ignored for the `'default'` type.
+     */
+    glassIntensity?: number;
     /**
      * Explicit per-instance loading override. When `true`, renders a
      * badge-shaped skeleton placeholder instead of the badge. Defaults to
      * inheriting from the surrounding `<SkeletonGroup>`.
      */
     loading?: boolean;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel' | 'accessibilityRole'>;
-declare function Badge({ label, modes, onPress, accessibilityLabel, style, labelStyle, loading, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ label, type, modes, onPress, accessibilityLabel, style, labelStyle, loading, disableTruncation, leading, glassOverlayColor, glassIntensity, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export default Badge;
 //# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single benefit row rendered with the shared `ListItem` primitive: a
+ * leading icon, a title and an optional right-aligned trailing value.
+ */
+export interface BenefitCardItem {
+    /** Registry icon name for the leading glyph (e.g. `'ic_jewellery_diamond'`). */
+    icon?: string;
+    /** Per-item override for the leading icon color. Defaults to the brand token. */
+    iconColor?: string;
+    /** Full override for the leading node. Takes precedence over `icon`. */
+    leading?: React.ReactNode;
+    /** Row title (e.g. `"JioPoints"`). */
+    title: string;
+    /** Optional right-aligned trailing value (e.g. `"Up to 2000 pts"`). */
+    trailingText?: string;
+    /** Full override for the trailing node. Takes precedence over `trailingText`. */
+    trailing?: React.ReactNode;
+    /** Makes the row pressable. */
+    onPress?: () => void;
+}
+export interface BenefitCardProps {
+    /** Header section title (e.g. `"You will earn"`). */
+    headerTitle?: string;
+    /**
+     * Highlighted item shown directly under the header title (icon + title +
+     * optional trailing value). Rendered above the divider.
+     */
+    headerItem?: BenefitCardItem;
+    /**
+     * Toggles the whole header section (title + item + divider). Mirrors the
+     * Figma `showHeader` property. Defaults to `true`.
+     */
+    showHeader?: boolean;
+    /** Body section title (e.g. `"Upgrade to JioFinance+ and earn more"`). */
+    bodyTitle?: string;
+    /**
+     * Body benefit rows. Ignored when `children` is provided (the slot wins).
+     */
+    items?: BenefitCardItem[];
+    /**
+     * Real slot for the body "list wrap". When provided, these children render
+     * instead of `items`; `modes` (plus the `List Item Style: Minimal` style)
+     * cascade into every child automatically.
+     */
+    children?: React.ReactNode;
+    /** CTA button label. Defaults to `"Upgrade"`. */
+    buttonLabel?: string;
+    /** CTA press handler. */
+    onButtonPress?: () => void;
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode;
+    /**
+     * Toggles the CTA button. Mirrors the Figma `showButton` property.
+     * 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 (`344`). 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;
+}
+/**
+ * BenefitCard — Figma node 5352:1077 ("Benefit Card").
+ *
+ * A white, rounded card that summarises the rewards a user will earn. It is
+ * composed entirely from the shared design-system primitives so it stays in
+ * sync with the rest of the library:
+ *
+ *  - **Header** — a section title + a single highlighted {@link ListItem}
+ *    (leading `Icon`, title, right-aligned trailing value) followed by a
+ *    `Divider`.
+ *  - **Body** — a section title + a column of benefit {@link ListItem}s. The
+ *    list is a real slot: pass `children` to fully control it, or `items` for
+ *    the declarative path.
+ *  - **CTA** — a small {@link Button} (Figma `Button / Size = S`).
+ *
+ * The list rows resolve through the `List Item Style: Minimal` mode (12px /
+ * regular title, 4px gap, no padding) and the leading icons use the
+ * `AppearanceBrand: Secondary` brand color, exactly matching the design. All
+ * three defaults can be overridden via `modes`.
+ */
+declare function BenefitCard({ headerTitle, headerItem, showHeader, bodyTitle, items, children, buttonLabel, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: BenefitCardProps): import("react/jsx-runtime").JSX.Element;
+export default BenefitCard;
+//# sourceMappingURL=BenefitCard.d.ts.map

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

@@ -25,6 +25,12 @@ export type BrandChipProps = {
     labelStyle?: StyleProp<TextStyle>;
     /** Accessibility label. Defaults to `label`. */
     accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
 /**
  * `BrandChip` renders a compact pill that pairs a small institution avatar
@@ -38,7 +44,7 @@ export type BrandChipProps = {
  * @component
  * @param {BrandChipProps} props
  */
-declare function BrandChip({ label, imageSource, avatarSlot, onPress, modes: propModes, style, labelStyle, accessibilityLabel, }: BrandChipProps): import("react/jsx-runtime").JSX.Element;
+declare function BrandChip({ label, imageSource, avatarSlot, onPress, modes: propModes, style, labelStyle, accessibilityLabel, disableTruncation, }: BrandChipProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof BrandChip>;
 export default _default;
 //# sourceMappingURL=BrandChip.d.ts.map

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

@@ -48,6 +48,12 @@ export type ButtonProps = SafePressableProps & {
      * the group.
      */
     loading?: boolean;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
 /**
  * Button component that maps directly to the Figma design using design tokens.
@@ -84,7 +90,7 @@ export type ButtonProps = SafePressableProps & {
  *    advantage of this should pass stable `modes` (the default `EMPTY_MODES`
  *    is already stable) and stable callback props.
  */
-declare function ButtonImpl({ label, children, renderContent, leading, trailing, icon, modes, onPress, disabled, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, loading, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonImpl({ label, children, renderContent, leading, trailing, icon, modes, onPress, disabled, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, loading, disableTruncation, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const Button: React.MemoExoticComponent<typeof ButtonImpl>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -43,8 +43,14 @@ export type CardAdvisoryProps = CardAdvisoryBaseProps & {
     nudgeStyle?: StyleProp<ViewStyle>;
     /** Accessibility label for the full card. */
     accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
-declare function CardAdvisory({ title, description, value, valueLabel, showInfoIcon, showNudge, nudgeBody, nudgeButtonLabel, onPressNudgeButton, titleEndSlot, progressSlot, nudgeSlot, modes: propModes, style, mainContentStyle, titleStyle, descriptionStyle, progressStyle, nudgeStyle, accessibilityLabel, ...rest }: CardAdvisoryProps): import("react/jsx-runtime").JSX.Element;
+declare function CardAdvisory({ title, description, value, valueLabel, showInfoIcon, showNudge, nudgeBody, nudgeButtonLabel, onPressNudgeButton, titleEndSlot, progressSlot, nudgeSlot, modes: propModes, style, mainContentStyle, titleStyle, descriptionStyle, progressStyle, nudgeStyle, accessibilityLabel, disableTruncation, ...rest }: CardAdvisoryProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CardAdvisory>;
 export default _default;
 //# sourceMappingURL=CardAdvisory.d.ts.map

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

@@ -67,6 +67,12 @@ export type CardBankAccountProps = {
     style?: StyleProp<ViewStyle>;
     /** Accessibility label for the card region. */
     accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
 /**
  * `CardBankAccount` renders a bank account summary card composed of:
@@ -82,6 +88,6 @@ export type CardBankAccountProps = {
  * @component
  * @param {CardBankAccountProps} props
  */
-declare function CardBankAccount({ institutionName, institutionAvatar, badge, headerSlot, items, children, buttonLabel, onButtonPress, footer, modes: propModes, style, accessibilityLabel, }: CardBankAccountProps): import("react/jsx-runtime").JSX.Element;
+declare function CardBankAccount({ institutionName, institutionAvatar, badge, headerSlot, items, children, buttonLabel, onButtonPress, footer, modes: propModes, style, accessibilityLabel, disableTruncation, }: CardBankAccountProps): import("react/jsx-runtime").JSX.Element;
 export default CardBankAccount;
 //# sourceMappingURL=CardBankAccount.d.ts.map

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

@@ -1,10 +1,22 @@
 import React from 'react';
-import { type ViewStyle, type StyleProp } from 'react-native';
+import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
 import type { Modes } from '../../design-tokens';
-export type CardCTAType = 'cta' | 'rating';
+export type CardCTAType = 'cta' | 'rating' | 'sip';
+/**
+ * Accepted `type` values. The canonical (and historical) values are lowercase
+ * (`'cta' | 'rating' | 'sip'`). The Figma variant names are PascalCase
+ * (`'CTA' | 'Rating' | 'Sip'`) — we accept those too and normalize internally
+ * so callers can pass either casing without a breaking change.
+ */
+export type CardCTATypeInput = CardCTAType | 'CTA' | 'Rating' | 'Sip';
 export type CardCTAProps = {
-    /** Visual layout variant */
-    type?: CardCTAType;
+    /**
+     * Visual layout variant. `'cta'` (default) is the horizontal CTA card,
+     * `'rating'` is the rating card, and `'sip'` is the avatar-led card with a
+     * headline/description/subtitle footer. PascalCase Figma names
+     * (`'CTA' | 'Rating' | 'Sip'`) are also accepted.
+     */
+    type?: CardCTATypeInput;
     /** Title text */
     title?: string;
     /** Body / subtitle text */
@@ -23,6 +35,14 @@ export type CardCTAProps = {
     onPressLike?: () => void;
     /** Callback for the default dislike action */
     onPressDislike?: () => void;
+    /** [sip] Headline text shown above the description row */
+    headline?: string;
+    /** [sip] Description text (left of subtitle) */
+    description?: string;
+    /** [sip] Subtitle text (right of description) */
+    subtitle?: string;
+    /** [sip] Image source for the default Avatar */
+    avatarSource?: ImageSourcePropType | string;
     /** Mode configuration for design token resolution */
     modes?: Modes;
     /** Slot: replaces the default icon area (right side) */
@@ -33,9 +53,11 @@ export type CardCTAProps = {
     ratingBadgeSlot?: React.ReactNode;
     /** Slot: replaces the default like/dislike action group */
     ratingActionsSlot?: React.ReactNode;
+    /** [sip] Slot: replaces the default Avatar */
+    avatarSlot?: React.ReactNode;
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
 };
-declare function CardCTA({ type, title, body, iconName, buttonLabel, onPressButton, ratingLabel, showRatingActions, onPressLike, onPressDislike, modes: propModes, iconSlot, buttonSlot, ratingBadgeSlot, ratingActionsSlot, style, }: CardCTAProps): import("react/jsx-runtime").JSX.Element;
+declare function CardCTA({ type, title, body, iconName, buttonLabel, onPressButton, ratingLabel, showRatingActions, onPressLike, onPressDislike, headline, description, subtitle, avatarSource, modes: propModes, iconSlot, buttonSlot, ratingBadgeSlot, ratingActionsSlot, avatarSlot, style, }: CardCTAProps): import("react/jsx-runtime").JSX.Element;
 export default CardCTA;
 //# sourceMappingURL=CardCTA.d.ts.map

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,5 @@
-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) */
@@ -26,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/CheckboxItem/CheckboxItem.d.ts

@@ -1,5 +1,5 @@
 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). */
@@ -68,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/CircularProgressBar/CircularProgressBar.d.ts

@@ -32,7 +32,13 @@ export type CircularProgressBarProps = CircularProgressBarBaseProps & {
     supportTextStyle?: StyleProp<TextStyle>;
     /** Accessibility label for the whole progress component. */
     accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
-declare function CircularProgressBar({ value, state, valueLabel, supportText, modes: propModes, style, trackStyle, progressStyle, valueStyle, supportTextStyle, accessibilityLabel, ...rest }: CircularProgressBarProps): import("react/jsx-runtime").JSX.Element;
+declare function CircularProgressBar({ value, state, valueLabel, supportText, modes: propModes, style, trackStyle, progressStyle, valueStyle, supportTextStyle, accessibilityLabel, disableTruncation, ...rest }: CircularProgressBarProps): import("react/jsx-runtime").JSX.Element;
 export default CircularProgressBar;
 //# sourceMappingURL=CircularProgressBar.d.ts.map

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

@@ -43,7 +43,13 @@ export type CircularProgressBarDotedProps = CircularProgressBarDotedBaseProps &
     tierLabelStyle?: StyleProp<TextStyle>;
     /** Accessibility label for the whole progress component. */
     accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
-declare function CircularProgressBarDoted({ value, dotCount, label, tierLabel, showChevron, onPress, onTierPress, modes: propModes, children, style, ringStyle, trackDotStyle, progressDotStyle, contentStyle, scoreTierStyle, scoreTrendStyle, labelStyle, scoreLabelStyle, tierLabelStyle, accessibilityLabel, onLayout, ...rest }: CircularProgressBarDotedProps): import("react/jsx-runtime").JSX.Element;
+declare function CircularProgressBarDoted({ value, dotCount, label, tierLabel, showChevron, onPress, onTierPress, modes: propModes, children, style, ringStyle, trackDotStyle, progressDotStyle, contentStyle, scoreTierStyle, scoreTrendStyle, labelStyle, scoreLabelStyle, tierLabelStyle, accessibilityLabel, disableTruncation, onLayout, ...rest }: CircularProgressBarDotedProps): import("react/jsx-runtime").JSX.Element;
 export default CircularProgressBarDoted;
 //# sourceMappingURL=CircularProgressBarDoted.d.ts.map

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

@@ -43,8 +43,14 @@ export type CircularRatingProps = CircularRatingBaseProps & {
     nudgeStyle?: StyleProp<ViewStyle>;
     /** Accessibility label for the whole component. */
     accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
-declare function CircularRating({ value, dotCount, label, tierLabel, footerText, showFooterIcon, showNudge, nudgeBody, nudgeButtonLabel, onPressNudgeButton, onTierPress, footerSlot, nudgeSlot, modes: propModes, style, ratingStyle, footerStyle, footerTextStyle, nudgeStyle, accessibilityLabel, ...rest }: CircularRatingProps): import("react/jsx-runtime").JSX.Element;
+declare function CircularRating({ value, dotCount, label, tierLabel, footerText, showFooterIcon, showNudge, nudgeBody, nudgeButtonLabel, onPressNudgeButton, onTierPress, footerSlot, nudgeSlot, modes: propModes, style, ratingStyle, footerStyle, footerTextStyle, nudgeStyle, accessibilityLabel, disableTruncation, ...rest }: CircularRatingProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CircularRating>;
 export default _default;
 //# sourceMappingURL=CircularRating.d.ts.map

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

@@ -61,6 +61,12 @@ export type ClusterBubbleProps = {
     modes?: Modes;
     /** Accessibility label. Defaults to a `value + label` composite. */
     accessibilityLabel?: string;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
 };
 /**
  * `ClusterBubble` is the atomic circle that composes a `BubbleChart`. It renders
@@ -72,6 +78,6 @@ export type ClusterBubbleProps = {
  *
  * @component
  */
-declare function ClusterBubble({ value, label, size, appearance, color, labelPlacement, labelDirection, labelGap, autoInsideMinSize, insideTextColor, onPress, valueStyle, labelStyle, circleStyle, style, modes: propModes, accessibilityLabel, }: ClusterBubbleProps): import("react/jsx-runtime").JSX.Element;
+declare function ClusterBubble({ value, label, size, appearance, color, labelPlacement, labelDirection, labelGap, autoInsideMinSize, insideTextColor, onPress, valueStyle, labelStyle, circleStyle, style, modes: propModes, accessibilityLabel, disableTruncation, }: ClusterBubbleProps): import("react/jsx-runtime").JSX.Element;
 export default ClusterBubble;
 //# sourceMappingURL=ClusterBubble.d.ts.map

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

@@ -0,0 +1,94 @@
+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>;
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
+};
+/**
+ * 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, disableTruncation, }: CompareTableProps): import("react/jsx-runtime").JSX.Element;
+export default CompareTable;
+//# sourceMappingURL=CompareTable.d.ts.map