jfs-components 0.1.8 → 0.1.12

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

@@ -54,6 +54,12 @@ export type TextSegmentProps = {
     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;
+    /**
+     * When `true`, disables truncation entirely: the trailing ellipsis (`…`) is
+     * never shown and the `numberOfLines` clamp is ignored, so the paragraph
+     * wraps to as many lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
     /** 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). */
@@ -94,7 +100,7 @@ export type TextSegmentProps = {
  * </TextSegment>
  * ```
  */
-declare function TextSegment({ segments, children, textAlign, numberOfLines, modes, style, }: TextSegmentProps): import("react/jsx-runtime").JSX.Element;
+declare function TextSegment({ segments, children, textAlign, numberOfLines, disableTruncation, 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

@@ -14,9 +14,15 @@ export type ThreadHeroProps = {
     modes?: Modes;
     /** Optional container style */
     style?: 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;
 };
 /**
  * ThreadHero component displaying a central identity with avatar, title, subtitle, and caption.
  */
-export default function ThreadHero({ title, subtitle, caption, renderAvatar, modes, style, }: ThreadHeroProps): import("react/jsx-runtime").JSX.Element;
+export default function ThreadHero({ title, subtitle, caption, renderAvatar, modes, style, disableTruncation, }: ThreadHeroProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThreadHero.d.ts.map

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

@@ -13,9 +13,15 @@ export type TitleProps = {
     /** Optional style overrides for the subtitle text. */
     subtitleStyle?: StyleProp<TextStyle>;
     numberOfLines?: number;
+    /**
+     * When `true`, disables truncation for both the title and subtitle: the
+     * trailing ellipsis (`…`) is never shown and the `numberOfLines` clamp is
+     * ignored, so the text wraps fully even when horizontal space is tight.
+     */
+    disableTruncation?: boolean;
     accessibilityLabel?: string;
     accessibilityHint?: string;
 } & React.ComponentProps<typeof View>;
-declare function Title({ title, subtitle, textAlign, modes: propModes, style, textStyle, subtitleStyle, numberOfLines, accessibilityLabel, accessibilityHint, ...rest }: TitleProps): import("react/jsx-runtime").JSX.Element;
+declare function Title({ title, subtitle, textAlign, modes: propModes, style, textStyle, subtitleStyle, numberOfLines, disableTruncation, accessibilityLabel, accessibilityHint, ...rest }: TitleProps): import("react/jsx-runtime").JSX.Element;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

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

@@ -9,7 +9,13 @@ export interface ToastProps {
     modes?: Modes | undefined;
     placement?: ToastPlacement | undefined;
     style?: StyleProp<ViewStyle> | undefined;
+    /**
+     * 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 Toast({ id, title, timeout, onClose, modes, placement, style, }: ToastProps): import("react/jsx-runtime").JSX.Element;
+declare function Toast({ id, title, timeout, onClose, modes, placement, style, disableTruncation, }: ToastProps): import("react/jsx-runtime").JSX.Element;
 export default Toast;
 //# sourceMappingURL=Toast.d.ts.map

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

@@ -17,6 +17,12 @@ export type TransactionBubbleProps = {
     accessibilityLabel?: string;
     accessibilityHint?: string;
     webAccessibilityProps?: WebAccessibilityProps;
+    /**
+     * 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<PressableProps, 'style' | 'children' | 'onPress'>;
 /**
  * TransactionBubble — Figma node 1517:1155.
@@ -35,6 +41,6 @@ export type TransactionBubbleProps = {
  * statusWrap: TransactionStatus + NavArrow, horizontal row with `transactionBubble/statusWrap/gap`.
  * Container gap between sections: `transactionBubble/gap`.
  */
-declare function TransactionBubble({ description, value, currency, status, date, statusSlot, children, modes, onPress, style, accessibilityLabel, accessibilityHint, webAccessibilityProps, ...rest }: TransactionBubbleProps): import("react/jsx-runtime").JSX.Element;
+declare function TransactionBubble({ description, value, currency, status, date, statusSlot, children, modes, onPress, style, accessibilityLabel, accessibilityHint, webAccessibilityProps, disableTruncation, ...rest }: TransactionBubbleProps): import("react/jsx-runtime").JSX.Element;
 export default TransactionBubble;
 //# sourceMappingURL=TransactionBubble.d.ts.map

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

@@ -9,9 +9,15 @@ export type TransactionStatusProps = {
     modes?: Modes;
     /** Optional container style */
     style?: 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;
 };
 /**
  * TransactionStatus component displaying status icon, label, and date.
  */
-export default function TransactionStatus({ status, date, modes, style, }: TransactionStatusProps): import("react/jsx-runtime").JSX.Element;
+export default function TransactionStatus({ status, date, modes, style, disableTruncation, }: TransactionStatusProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TransactionStatus.d.ts.map

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

@@ -25,6 +25,12 @@ type UpiHandleProps = {
     onPress?: () => void;
     onClick?: () => void;
     disabled?: 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' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
 /**
  * UpiHandle pill that mirrors the Figma "UPI Handle" component.
@@ -49,7 +55,7 @@ type UpiHandleProps = {
  *  - Focus state is mirrored on web only (gated setter).
  *  - Wrapped in `React.memo`.
  */
-declare function UpiHandle({ label, modes: propModes, showIcon, iconName, source, avatarSource, onPress, onClick, disabled, accessibilityLabel: _accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
+declare function UpiHandle({ label, modes: propModes, showIcon, iconName, source, avatarSource, onPress, onClick, disabled, disableTruncation, accessibilityLabel: _accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof UpiHandle>;
 export default _default;
 //# sourceMappingURL=UpiHandle.d.ts.map

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

@@ -4,7 +4,7 @@ export { default as Attached, type AttachedProps, type AttachedPosition } from '
 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 Badge, type BadgeProps, type BadgeType } 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';
@@ -28,7 +28,7 @@ export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
 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 CardCTA, type CardCTAProps, type CardCTAType, type CardCTATypeInput } from './CardCTA/CardCTA';
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as FullscreenModal, type FullscreenModalProps } from './FullscreenModal/FullscreenModal';
@@ -72,6 +72,7 @@ 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 Stack, type StackProps, type StackLayoutDirection, } from './Stack/Stack';
 export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
 export { Step, type StepProps, type StepStatus } from './Stepper/Step';
@@ -126,6 +127,7 @@ 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 Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell, type TableProps, type TableColumn, type TableCellAlign, type TableHeaderProps, type TableHeaderCellProps, type TableBodyProps, type TableRowProps, type TableCellProps, } from './Table/Table';
 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';

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-06-12T12:48:07.304Z
+ * Generated: 2026-06-22T15:37:25.988Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/lib/typescript/src/{components/ProductMerchandisingCard → utils/GlassFill}/GlassFill.d.ts

@@ -31,13 +31,38 @@ export interface GlassFillProps {
      * along a hard seam. Works on iOS and Android with no extra native module.
      */
     progressive?: boolean;
+    /**
+     * Android-only: paint a barely-there white wash (`rgba(255,255,255,0.03)`)
+     * over the uniform blur to lift the community `RealtimeBlurView`, which
+     * otherwise reads slightly muddy. Defaults to `true` to match the
+     * media/merchandising card surfaces. Smaller surfaces (e.g. a Badge pill)
+     * pass `false` to keep the glass perfectly clear. No effect on iOS/web or
+     * on the progressive path.
+     */
+    androidTintWash?: boolean;
+    /**
+     * Web-only: multiplier converting the 0–100 `intensity` to CSS blur px (see
+     * `GlassFill.web.tsx`). Declared here purely for prop-type parity across the
+     * platform split — native always uses the fixed `blurAmount` scale and
+     * ignores this value.
+     */
+    webBlurScale?: number;
+    /**
+     * Web-only: upper clamp (px) on the resolved CSS blur. Declared here for
+     * parity with the web build; ignored on native.
+     */
+    webBlurMaxPx?: number;
     /** Container style overrides. Defaults to `StyleSheet.absoluteFill`. */
     style?: StyleProp<ViewStyle>;
 }
 /**
- * Glass / frosted surface for native (iOS + Android).
+ * Shared glass / frosted surface for native (iOS + Android).
  *
- * Why this lives in its own platform-split file (mirrors `MediaCard/GlassFill`):
+ * This is the single source of truth for the glass effect used by `MediaCard`,
+ * `ProductMerchandisingCard`, `Badge`, and any future consumer. It supersedes
+ * the per-component `GlassFill` copies that previously drifted apart.
+ *
+ * Why this lives in its own platform-split file:
  *   - `@react-native-community/blur` is a native-only module; importing it on
  *     web throws because it references native components not registered there.
  *     Metro's platform-extension resolution picks `GlassFill.tsx` for native
@@ -50,7 +75,10 @@ export interface GlassFillProps {
  * native module isn't linked in the running binary, the component degrades to
  * a translucent tinted scrim (`reducedTransparencyFallbackColor` / fallback
  * color) instead of rendering the "Unimplemented component" placeholder.
+ *
+ * NOTE: the consumer MUST clip this with `overflow: 'hidden'` on a rounded
+ * parent — the native blur view does not honor `borderRadius` itself.
  */
-declare function GlassFill({ tint, intensity, overlayColor, progressive, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
+declare function GlassFill({ tint, intensity, overlayColor, progressive, androidTintWash, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
 export default GlassFill;
 //# sourceMappingURL=GlassFill.d.ts.map

package/lib/typescript/src/{components/ProductMerchandisingCard → utils/GlassFill}/GlassFill.web.d.ts

@@ -12,16 +12,32 @@ export interface GlassFillProps {
      * smoothly toward the bottom.
      */
     progressive?: boolean;
+    /**
+     * Android-only knob on native; accepted on web for prop parity but unused
+     * (web has no equivalent realtime-blur muddiness to lift).
+     */
+    androidTintWash?: boolean;
+    /**
+     * Multiplier converting the 0–100 `intensity` to CSS blur px. Defaults to
+     * `0.32` to mirror the native `blurAmount` scale. Exposed so a consumer can
+     * preserve a legacy mapping (e.g. `MediaCard` uses `0.3`).
+     */
+    webBlurScale?: number;
+    /**
+     * Upper clamp (px) on the resolved CSS blur. Defaults to `32` to mirror the
+     * native cap. `MediaCard` passes `30` to preserve its historical value.
+     */
+    webBlurMaxPx?: number;
     style?: StyleProp<ViewStyle>;
 }
 /**
- * Web counterpart of `GlassFill`.
+ * Web counterpart of the shared `GlassFill`.
  *
  * `@react-native-community/blur` ships no web implementation, so on web we
  * render a translucent `View` with `backdrop-filter: blur()`. Native bundles
  * pick up `GlassFill.tsx` instead via Metro's platform resolver; the web
  * bundle picks up this file, so the native-only module is never imported here.
  */
-declare function GlassFill({ tint, intensity, overlayColor, progressive, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
+declare function GlassFill({ tint, intensity, overlayColor, progressive, webBlurScale, webBlurMaxPx, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
 export default GlassFill;
 //# sourceMappingURL=GlassFill.web.d.ts.map

package/lib/typescript/src/utils/react-utils.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { Modes } from '../design-tokens';
 /**
  * A shared, frozen empty modes object.
@@ -20,6 +21,29 @@ export declare const EMPTY_MODES: Readonly<Record<string, any>>;
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
 export declare function cloneChildrenWithModes(children: React.ReactNode, modes: Modes, forcedModes?: Modes): React.ReactNode[];
+/**
+ * Merges a style onto each direct (top-level) child element, with the injected
+ * style taking precedence over the child's own style.
+ *
+ * Used by the Stack family to *enforce* cross-axis stretching from the container
+ * itself: a child can set its own `alignSelf` (which, per the flexbox spec,
+ * overrides the parent's `alignItems`), so to guarantee equal heights / full
+ * width regardless of what individual children declare, we append
+ * `{ alignSelf: 'stretch' }` to every direct child.
+ *
+ * @remarks
+ * - Only top-level children are touched. Grandchildren are intentionally left
+ *   alone — we never want to leak layout styles deeper into the tree.
+ * - Non-element children (strings, numbers) are passed through untouched.
+ * - This relies on the child forwarding `style` to its outer/root view. Built-in
+ *   RN primitives and components that spread `style` onto their root honour it;
+ *   a child that fully ignores `style` cannot be forced (this is a hard React
+ *   Native limitation, not something this helper can work around).
+ * - Per Yoga, stretch has no effect on an axis where the child has a *fixed*
+ *   dimension (e.g. an explicit `height` for a row). Such children opt out by
+ *   design; this helper does not strip explicit dimensions.
+ */
+export declare function injectChildStyle(children: React.ReactNode, style: StyleProp<ViewStyle>): React.ReactNode;
 /**
  * Combines several refs (object refs and/or callback refs) into a single
  * callback ref. Useful when a component needs to keep its own internal ref to a
@@ -30,6 +54,19 @@ export declare function cloneChildrenWithModes(children: React.ReactNode, modes:
  * <RNTextInput ref={mergeRefs(inputRef, forwardedRef)} />
  */
 export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined | null>): React.RefCallback<T>;
+export type EllipsizeMode = 'head' | 'middle' | 'tail' | 'clip';
+/**
+ * Resolves the `numberOfLines` / `ellipsizeMode` pair for a `<Text>` based on a
+ * `disableTruncation` flag.
+ *
+ * When `disableTruncation` is `true`, both values are returned as `undefined`
+ * so the text wraps to as many lines as it needs and never shows the trailing
+ * ellipsis. Otherwise the provided values are passed through unchanged.
+ */
+export declare function resolveTruncation(disableTruncation: boolean | undefined, numberOfLines?: number, ellipsizeMode?: EllipsizeMode): {
+    numberOfLines?: number;
+    ellipsizeMode?: EllipsizeMode;
+};
 /**
  * Flattens React children, extracting them from Fragments.
  * Useful for Group components that need to process individual items (e.g., for layout or styling)

package/lib/typescript/src/utils/web-platform-utils.d.ts

@@ -1,3 +1,4 @@
+import type { RefObject } from 'react';
 import type { PressableProps } from 'react-native';
 /**
  * Web-specific props that should NOT be passed to React Native's Pressable component.
@@ -131,6 +132,41 @@ export declare function usePressableWebSupport({ restProps, onPress, disabled, a
     tabIndex?: 0 | -1;
     onKeyDown?: (e: any) => void;
 };
+/**
+ * Detects pointer presses (mouse / touch) that land OUTSIDE the node held by
+ * `containerRef` and invokes `onOutsidePress`.
+ *
+ * Why this exists:
+ * On web, React Native pressables (`Pressable`, `Button`, links, etc.) do not
+ * always claim DOM focus the way a native `<button>`/`<input>` does. As a
+ * result, tapping an *interactive* element outside a focused `<input>` may
+ * never trigger the input's native `blur` event, leaving a field stuck in its
+ * "Active" visual state. Listening for document-level pointer-down in the
+ * capture phase lets a component force a blur (or close a popover, etc.)
+ * regardless of whether the outside target takes focus.
+ *
+ * Behavior & safety:
+ *  - **Web only.** On native (or when `document` is unavailable) this is a
+ *    no-op, so it is safe to call unconditionally.
+ *  - Listeners are attached only while `enabled` is `true`, and are removed on
+ *    cleanup / when disabled — there is no standing global listener.
+ *  - Uses the **capture** phase so it runs before element-level handlers, and
+ *    listens to both `mousedown` and `touchstart` for parity across devices.
+ *  - The latest `onOutsidePress` is read through a ref, so passing a fresh
+ *    inline closure every render does NOT re-subscribe the listener.
+ *
+ * @param containerRef - Ref to the root host node to treat as "inside".
+ * @param onOutsidePress - Called when a pointer press occurs outside the node.
+ * @param enabled - When `false`, no listener is attached. Defaults to `true`.
+ *
+ * @example
+ * ```tsx
+ * const rootRef = useRef<View>(null)
+ * const inputRef = useRef<RNTextInput>(null)
+ * useWebOutsidePress(rootRef, () => inputRef.current?.blur(), isFocused)
+ * ```
+ */
+export declare function useWebOutsidePress(containerRef: RefObject<any>, onOutsidePress: () => void, enabled?: boolean): void;
 /**
  * Type guard to check if running on web platform
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.8",
+  "version": "0.1.12",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/Accordion/Accordion.tsx

@@ -14,7 +14,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 // Enable LayoutAnimation on Android
@@ -87,6 +87,12 @@ export type AccordionProps = {
   accessibilityState?: AccessibilityState;
   /** Web-specific accessibility props (only used on web platform) */
   webAccessibilityProps?: WebAccessibilityProps;
+  /**
+   * 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;
 } & React.ComponentProps<typeof View>;
 
 /**
@@ -117,6 +123,7 @@ function Accordion({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }: AccordionProps) {
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
@@ -253,7 +260,7 @@ function Accordion({
         ]}
         {...webProps}
       >
-        <Text style={titleStyle} numberOfLines={1}>
+        <Text style={titleStyle} {...resolveTruncation(disableTruncation, 1)}>
           {title}
         </Text>
         <Icon

package/src/components/AccordionCheckbox/AccordionCheckbox.tsx

@@ -11,7 +11,7 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import Checkbox from '../Checkbox/Checkbox'
 import Divider from '../Divider/Divider'
 import Icon from '../../icons/Icon'
@@ -52,6 +52,12 @@ export type AccordionCheckboxProps = {
   style?: StyleProp<ViewStyle>
   /** Accessibility label for the header press target. Defaults to `title`. */
   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
 }
 
 /**
@@ -102,6 +108,7 @@ function AccordionCheckbox({
   modes = EMPTY_MODES,
   style,
   accessibilityLabel,
+  disableTruncation,
 }: AccordionCheckboxProps) {
   const isExpandedControlled = controlledExpanded !== undefined
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
@@ -288,11 +295,11 @@ function AccordionCheckbox({
             }
           />
           <View style={textWrapStyle}>
-            <Text style={titleStyle} numberOfLines={1} selectable={false}>
+            <Text style={titleStyle} {...resolveTruncation(disableTruncation, 1)} selectable={false}>
               {title}
             </Text>
             {subtitle ? (
-              <Text style={subtitleStyle} numberOfLines={1} selectable={false}>
+              <Text style={subtitleStyle} {...resolveTruncation(disableTruncation, 1)} selectable={false}>
                 {subtitle}
               </Text>
             ) : null}

package/src/components/AccountCard/AccountCard.tsx

@@ -13,7 +13,7 @@ import {
     type ViewStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import type { Modes } from '../../design-tokens'
 
@@ -88,6 +88,12 @@ export type AccountCardProps = {
     accessibilityLabel?: string
     /** Accessibility hint forwarded to the underlying `Pressable`. */
     accessibilityHint?: 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
 }
 
 const toNumber = (value: unknown, fallback: number): number => {
@@ -148,6 +154,7 @@ function AccountCard({
     style,
     accessibilityLabel,
     accessibilityHint,
+    disableTruncation,
 }: AccountCardProps) {
     const iconModes = useMemo(
         () =>
@@ -330,12 +337,12 @@ function AccountCard({
                     }}
                 >
                     {title != null && title !== '' ? (
-                        <Text style={titleStyle} numberOfLines={1}>
+                        <Text style={titleStyle} {...resolveTruncation(disableTruncation, 1)}>
                             {title}
                         </Text>
                     ) : null}
                     {showSubtitle ? (
-                        <Text style={subtitleStyle} numberOfLines={1}>
+                        <Text style={subtitleStyle} {...resolveTruncation(disableTruncation, 1)}>
                             {subtitle}
                         </Text>
                     ) : null}

package/src/components/AllocationComparisonChart/AllocationComparisonChart.tsx

@@ -9,7 +9,7 @@ import {
 import Svg, { Line } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
 import type { Modes } from '../../design-tokens'
 
@@ -109,6 +109,12 @@ export type AllocationComparisonChartProps = {
     legendStyle?: StyleProp<ViewStyle>
     /** Accessibility label for the whole chart. */
     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
 }
 
 const DEFAULT_DATA: AllocationSegment[] = [
@@ -162,6 +168,7 @@ type SegmentBarProps = {
     baselineLabel: React.ReactNode
     showMarker: boolean
     theme: SegmentTheme
+    disableTruncation?: boolean
 }
 
 /**
@@ -177,6 +184,7 @@ function SegmentBar({
     baselineLabel,
     showMarker,
     theme,
+    disableTruncation,
 }: SegmentBarProps) {
     const { barWidth, pillRadius, gap, currentColor, baselineColor, lineColor, lineSize, labelStyle } =
         theme
@@ -195,7 +203,7 @@ function SegmentBar({
             accessibilityLabel={segment.accessibilityLabel}
         >
             {showValueLabel ? (
-                <Text numberOfLines={1} style={labelStyle}>
+                <Text {...resolveTruncation(disableTruncation, 1)} style={labelStyle}>
                     {segment.valueLabel}
                 </Text>
             ) : null}
@@ -247,7 +255,7 @@ function SegmentBar({
                                     />
                                 </Svg>
                                 {isShown(baselineLabel) ? (
-                                    <Text numberOfLines={1} style={[labelStyle, { marginLeft: 6 }]}>
+                                    <Text {...resolveTruncation(disableTruncation, 1)} style={[labelStyle, { marginLeft: 6 }]}>
                                         {baselineLabel}
                                     </Text>
                                 ) : null}
@@ -257,7 +265,7 @@ function SegmentBar({
                 ) : null}
             </View>
 
-            <Text numberOfLines={1} style={labelStyle}>
+            <Text {...resolveTruncation(disableTruncation, 1)} style={labelStyle}>
                 {segment.label}
             </Text>
         </View>
@@ -295,6 +303,7 @@ function AllocationComparisonChart({
     chartStyle,
     legendStyle,
     accessibilityLabel,
+    disableTruncation,
 }: AllocationComparisonChartProps) {
     const { modes: globalModes } = useTokens()
     const modes = React.useMemo(
@@ -440,6 +449,7 @@ function AllocationComparisonChart({
                             baselineLabel={baselineLabel}
                             showMarker={showMarker}
                             theme={theme}
+                            disableTruncation={disableTruncation}
                         />
                     )
                 })}