jfs-components 0.1.12 → 0.1.17

package/lib/module/utils/index.js

@@ -2,4 +2,5 @@
 
 export { cloneChildrenWithModes, flattenChildren } from './react-utils';
 export { default as MediaSource } from './MediaSource';
-export { formatIndianNumber } from './number-utils';
+export { formatIndianNumber } from './number-utils';
+export { boxShadow, supportsNativeBoxShadow, parseBoxShadow, parseSingleShadow } from './shadow';

package/lib/module/utils/react-utils.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import React from 'react';
+import { Platform } from 'react-native';
 /**
  * A shared, frozen empty modes object.
  *
@@ -146,6 +147,66 @@ export function resolveTruncation(disableTruncation, numberOfLines, ellipsizeMod
     ellipsizeMode
   };
 }
+/**
+ * Resolves the `<Text>` props + style for the two truncation escape hatches.
+ * This supersedes {@link resolveTruncation} for components that want the
+ * "brutal" overflow behaviour rather than just dropping the line clamp.
+ *
+ * - `disableTruncation`: never truncate. Drops `numberOfLines`/`ellipsizeMode`
+ *   AND sets `flexShrink: 0`, so a tight flex parent can no longer squeeze the
+ *   text into an ellipsis — instead the text keeps its intrinsic size and
+ *   overflows, even if that means blowing past (and visually breaking) the
+ *   parent layout. The text still wraps onto multiple lines.
+ * - `singleLine`: force everything onto one line with no wrapping. Implies
+ *   `disableTruncation` (the ellipsis is never shown). On web this adds
+ *   `whiteSpace: 'nowrap'` so the single line overflows horizontally instead of
+ *   wrapping. The text is never shrunk.
+ *
+ * Note (native): React Native's `<Text>` has no `white-space: nowrap`
+ * equivalent, so on iOS/Android `singleLine` cannot force a hard non-wrapping
+ * overflow — it behaves like `disableTruncation` (no ellipsis, no shrink). The
+ * hard single-line overflow is honoured on web (Storybook / react-native-web).
+ *
+ * When neither flag is set, the supplied `numberOfLines`/`ellipsizeMode` pass
+ * through unchanged and no extra style is returned.
+ */
+export function resolveTextLayout({
+  disableTruncation,
+  singleLine,
+  numberOfLines,
+  ellipsizeMode
+}) {
+  if (singleLine) {
+    return {
+      numberOfLines: undefined,
+      ellipsizeMode: undefined,
+      style: {
+        flexShrink: 0,
+        flexGrow: 0,
+        ...(Platform.OS === 'web' ? {
+          whiteSpace: 'nowrap',
+          overflow: 'visible'
+        } : {})
+      }
+    };
+  }
+  if (disableTruncation) {
+    return {
+      numberOfLines: undefined,
+      ellipsizeMode: undefined,
+      style: {
+        flexShrink: 0,
+        ...(Platform.OS === 'web' ? {
+          overflow: 'visible'
+        } : {})
+      }
+    };
+  }
+  return {
+    numberOfLines,
+    ellipsizeMode
+  };
+}
 
 /**
  * Flattens React children, extracting them from Fragments.

package/lib/module/utils/shadow.js

@@ -0,0 +1,194 @@
+"use strict";
+
+import { Platform } from 'react-native';
+
+/**
+ * Cross-platform drop-shadow helper with a backward-compatibility layer.
+ *
+ * Why this exists
+ * ----------------
+ * The spec-compliant `boxShadow` style prop only landed in React Native 0.76
+ * (and only on the New Architecture / Fabric). Older apps that consume this
+ * library are still on pre-0.76 React Native where `boxShadow` is silently
+ * ignored on native, so their shadows simply disappear.
+ *
+ * Rather than hand-rolling a `Platform.select` block in every component, route
+ * ALL drop shadows through this single helper. When `boxShadow` is natively
+ * supported it is used verbatim (web + RN 0.76+ Fabric). When it is NOT
+ * supported, the CSS-style shadow string is parsed and translated into the
+ * legacy native shadow API:
+ *   - iOS:     `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`
+ *   - Android: `elevation`
+ *
+ * @example
+ * ```tsx
+ * const style = boxShadow('0px 2px 4px 0px rgba(0,0,0,0.18)')
+ * <View style={[base, style]} />
+ * ```
+ */
+
+// `boxShadow` is intentionally absent from the @types/react-native surface in
+// this repo (pinned to 0.73), so we widen ViewStyle locally for the cases
+// where we DO emit the native/web boxShadow string.
+
+/**
+ * Whether the spec-compliant `boxShadow` style prop is honored at runtime.
+ * - Web (react-native-web) always supports it.
+ * - Native supports it from RN 0.76+ AND only on the New Architecture (Fabric).
+ */
+export function supportsNativeBoxShadow() {
+  if (Platform.OS === 'web') {
+    return true;
+  }
+  const version = Platform.constants?.reactNativeVersion;
+  const isVersionSupported = version ? version.major > 0 || version.major === 0 && version.minor >= 76 : false;
+
+  // Even on 0.76+, boxShadow is a New Architecture feature. Fabric exposes a
+  // global UI manager; its presence is the most reliable runtime signal.
+  const isFabric = typeof globalThis !== 'undefined' && globalThis.nativeFabricUIManager != null;
+  return isVersionSupported && isFabric;
+}
+
+/**
+ * Splits a (potentially multi-) box-shadow string on top-level commas, i.e.
+ * commas that are NOT inside a color function such as `rgba(12, 13, 16, 0.12)`.
+ */
+function splitShadows(value) {
+  const out = [];
+  let depth = 0;
+  let current = '';
+  for (const ch of value) {
+    if (ch === '(') depth++;else if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) {
+      if (current.trim()) out.push(current.trim());
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  if (current.trim()) out.push(current.trim());
+  return out;
+}
+
+/**
+ * Parses a single CSS box-shadow layer into its primitive parts.
+ * Supports: `[inset] offsetX offsetY [blur] [spread] color` in any sensible
+ * ordering of the keyword/color, with `rgb()/rgba()/hsl()/hsla()`, hex, or
+ * named colors.
+ */
+export function parseSingleShadow(input) {
+  let s = input.trim();
+  let inset = false;
+  if (/(^|\s)inset(\s|$)/i.test(s)) {
+    inset = true;
+    s = s.replace(/(^|\s)inset(\s|$)/i, ' ').trim();
+  }
+  let color = 'rgba(0,0,0,1)';
+  const fnColor = s.match(/(?:rgba?|hsla?)\([^)]*\)/i);
+  if (fnColor) {
+    color = fnColor[0];
+    s = s.replace(fnColor[0], ' ').trim();
+  } else {
+    const hex = s.match(/#[0-9a-fA-F]{3,8}\b/);
+    if (hex) {
+      color = hex[0];
+      s = s.replace(hex[0], ' ').trim();
+    } else {
+      // Fall back to a trailing named color token (e.g. "red", "black").
+      const tokens = s.split(/\s+/).filter(Boolean);
+      const last = tokens[tokens.length - 1];
+      if (last && Number.isNaN(parseFloat(last))) {
+        color = last;
+        tokens.pop();
+        s = tokens.join(' ');
+      }
+    }
+  }
+  const nums = s.split(/\s+/).filter(Boolean).map(t => parseFloat(t) || 0);
+  const [offsetX = 0, offsetY = 0, blur = 0, spread = 0] = nums;
+  return {
+    offsetX,
+    offsetY,
+    blur,
+    spread,
+    color,
+    inset
+  };
+}
+
+/**
+ * Parses a full box-shadow string (one or more comma-separated layers).
+ */
+export function parseBoxShadow(value) {
+  return splitShadows(value).map(parseSingleShadow);
+}
+
+/**
+ * Picks the visually dominant shadow layer (largest blur, then largest spread).
+ * iOS' legacy shadow API can only render a single shadow per view.
+ */
+function pickPrimary(shadows) {
+  if (shadows.length === 0) return undefined;
+  return shadows.reduce((best, s) => {
+    if (s.blur > best.blur) return s;
+    if (s.blur === best.blur && s.spread > best.spread) return s;
+    return best;
+  });
+}
+
+/**
+ * Translates the parsed shadow into the legacy native shadow style used by
+ * pre-0.76 React Native.
+ */
+function legacyShadowStyle(value, options) {
+  const shadows = parseBoxShadow(value);
+  const primary = pickPrimary(shadows);
+  if (!primary) {
+    return {};
+  }
+  if (Platform.OS === 'android') {
+    const elevation = options?.elevation ?? Math.max(0, Math.round(primary.blur / 2));
+    if (elevation <= 0) {
+      return {};
+    }
+    return {
+      elevation
+    };
+  }
+
+  // iOS: shadowOpacity defaults to 0 (invisible), so it MUST be set. We keep
+  // the full color (its own alpha is respected) and use opacity 1 as the
+  // multiplier so rgba() alpha is honored end-to-end.
+  return {
+    shadowColor: primary.color,
+    shadowOffset: {
+      width: primary.offsetX,
+      height: primary.offsetY
+    },
+    shadowOpacity: 1,
+    shadowRadius: primary.blur
+  };
+}
+
+/**
+ * Returns a style object that renders the given CSS-style box-shadow on every
+ * platform. Uses the native `boxShadow` prop when supported, otherwise falls
+ * back to the legacy `shadow*` (iOS) / `elevation` (Android) API.
+ *
+ * @param value   A CSS box-shadow string, e.g. `'0px 2px 4px 0px rgba(0,0,0,0.2)'`.
+ *                Multiple comma-separated layers are supported; on the legacy
+ *                fallback iOS uses the most prominent layer and Android uses a
+ *                single elevation.
+ * @param options Optional overrides (e.g. explicit Android `elevation`).
+ */
+export function boxShadow(value, options) {
+  if (!value) {
+    return {};
+  }
+  if (supportsNativeBoxShadow()) {
+    return {
+      boxShadow: value
+    };
+  }
+  return legacyShadowStyle(value, options);
+}

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

@@ -25,17 +25,46 @@ 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.
+     * @deprecated The header is now a multi-row list wrap. A single item still
+     * works and is rendered as a one-row list (lowest precedence, after
+     * `header` and `headerItems`). Prefer `headerItems` (declarative) or
+     * `header` (slot).
      */
     headerItem?: BenefitCardItem;
+    /**
+     * Declarative header list-wrap rows shown under the header title and above
+     * the divider (icon + title + optional trailing value). Replaces the
+     * legacy single {@link BenefitCardProps.headerItem}. Ignored when the
+     * `header` slot is provided.
+     */
+    headerItems?: BenefitCardItem[];
+    /**
+     * Real slot for the header "list wrap" (the rows under the header title).
+     * Highest precedence — when provided, these children render instead of
+     * `headerItems` / `headerItem`; `modes` (plus the `List Item Style:
+     * Minimal` style) cascade into every child automatically.
+     */
+    header?: React.ReactNode;
     /**
      * 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"`). */
+    /**
+     * @deprecated In the Figma redesign the plain body title was replaced by a
+     * slot-based upsell `Nudge` ({@link BenefitCardProps.bodyHeader}). Still
+     * honored for backward compatibility: when set, it renders as a plain text
+     * title in place of the default nudge. Prefer `bodyHeader`.
+     */
     bodyTitle?: string;
+    /**
+     * Real slot rendered between the header divider and the body list — in the
+     * Figma reference this is an upsell `Nudge` (avatar + highlighted
+     * "JioFinance+" message). Defaults to that nudge. Pass `null`/`false` to
+     * hide it, `bodyTitle` for the legacy plain-text title, or any `ReactNode`
+     * for full control; `modes` cascade into the slot.
+     */
+    bodyHeader?: React.ReactNode;
     /**
      * Body benefit rows. Ignored when `children` is provided (the slot wins).
      */
@@ -88,6 +117,6 @@ export interface BenefitCardProps {
  * `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;
+declare function BenefitCard({ headerTitle, headerItem, headerItems, header, showHeader, bodyTitle, bodyHeader, 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/Carousel/Carousel.d.ts

@@ -18,12 +18,22 @@ export interface CarouselProps {
     gap?: number;
     /** Width of each carousel item. When undefined, items take full container width. */
     itemWidth?: number;
+    /**
+     * Explicit horizontal padding (px) for the scroll content. When provided it
+     * overrides the token-derived padding verbatim — the built-in `carousel/
+     * padding/horizontal × 2` "peek" multiplier is NOT applied. Use this for
+     * presets (e.g. the account-card strip) whose own tokens define a flush,
+     * non-peeking layout.
+     */
+    paddingHorizontal?: number;
+    /** Explicit vertical padding (px) for the outer container. Overrides `carousel/padding/vertical`. */
+    paddingVertical?: number;
     /** Called when the active index changes. */
     onIndexChange?: (index: number) => void;
     /** Style overrides for the outermost container. */
     style?: StyleProp<ViewStyle>;
 }
-export declare function Carousel({ children, modes, autoPlay, autoPlayInterval, showPagination, loop, gap: gapProp, itemWidth: itemWidthProp, onIndexChange, style, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ children, modes, autoPlay, autoPlayInterval, showPagination, loop, gap: gapProp, itemWidth: itemWidthProp, paddingHorizontal: paddingHorizontalProp, paddingVertical: paddingVerticalProp, onIndexChange, style, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Carousel {
     var Item: typeof import("./Carousel").Item;
     var Pagination: typeof import("./Carousel").Pagination;

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export interface CarouselCardAccountsProps {
+    /**
+     * The account cards to render — this is the slot. Pass any number of
+     * `AccountCard` elements (or any node). Each becomes one horizontally
+     * scrollable, snap-aligned item. `modes` are forwarded to every child.
+     */
+    children?: React.ReactNode;
+    /** Design-token modes (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Modes;
+    /**
+     * Width of each card slot in px. Defaults to the Figma reference width
+     * (`125`). Combined with `gap` this drives the per-card snap interval.
+     */
+    itemWidth?: number;
+    /**
+     * Gap between cards in px. Resolved from the `carouselCardAccounts/gap`
+     * token (default `8`) when omitted.
+     */
+    gap?: number;
+    /**
+     * Show the pagination dots. Defaults to `false` — the account strip is a
+     * flush, free-scrolling row rather than a paged hero carousel.
+     */
+    showPagination?: boolean;
+    /** Loop back to the first card after the last. Default: `false`. */
+    loop?: boolean;
+    /** Called when the active (snapped) card index changes. */
+    onIndexChange?: (index: number) => void;
+    /** Style override for the outermost container. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * `CarouselCardAccounts` — a horizontally scrollable strip of compact
+ * `AccountCard`s (the Figma "Carousel / Card Accounts" component).
+ *
+ * It is a thin, opinionated preset over the shared {@link Carousel} scroll
+ * engine — so the snap/scroll/modes-cascade behaviour is **not** duplicated.
+ * Its niche is the account-selection strip: fixed-width card slots, flush
+ * (no peek) padding, per-card snapping, and no pagination by default.
+ *
+ * The cards are a real slot: pass any number of `AccountCard` children
+ * (typically a list of `connected` cards followed by a single `add` card).
+ *
+ * @example
+ * <CarouselCardAccounts modes={modes}>
+ *   <AccountCard title="Personal account" subtitle="**** 5651" imageSource={art} />
+ *   <AccountCard title="Salary account" subtitle="**** 1180" imageSource={art} />
+ *   <AccountCard state="add" title="Add a card" onPress={openLinkFlow} />
+ * </CarouselCardAccounts>
+ */
+declare function CarouselCardAccounts({ children, modes, itemWidth, gap: gapProp, showPagination, loop, onIndexChange, style, }: CarouselCardAccountsProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof CarouselCardAccounts>;
+export default _default;
+//# sourceMappingURL=CarouselCardAccounts.d.ts.map

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

@@ -27,6 +27,14 @@ export type SavingsGoalSummaryItem = {
     indicatorColor?: string;
 };
 export type SavingsGoalSummaryProps = {
+    /**
+     * Optional caption rendered directly above the percentage value
+     * (e.g. `"Credit usage"`), matching the Figma `savingsGoalSummary/label`
+     * slot. Pass a string for token-styled text, or any `ReactNode` for full
+     * control. Omit (the default) to hide it — preserving the original
+     * value-only layout for existing callers.
+     */
+    label?: React.ReactNode;
     /**
      * Currency symbol (e.g. `'₹'`, `'$'`) prefixed to every legend value.
      * Defaults to `'₹'`. The symbol is rendered as part of the formatted
@@ -69,6 +77,8 @@ export type SavingsGoalSummaryProps = {
      * computed from `current` / `target` and cannot be replaced.
      */
     titleStyle?: StyleProp<TextStyle>;
+    /** Override styles for the `label` caption text (string labels only). */
+    labelStyle?: StyleProp<TextStyle>;
     /** Override the inner legend container styles. */
     legendStyle?: StyleProp<ViewStyle>;
 };
@@ -91,6 +101,6 @@ export type SavingsGoalSummaryProps = {
  * @component
  * @param {SavingsGoalSummaryProps} props
  */
-declare function SavingsGoalSummary({ currency, current, target, children, modes, style, titleStyle, legendStyle, }: SavingsGoalSummaryProps): import("react/jsx-runtime").JSX.Element;
+declare function SavingsGoalSummary({ label, currency, current, target, children, modes, style, titleStyle, labelStyle, legendStyle, }: SavingsGoalSummaryProps): import("react/jsx-runtime").JSX.Element;
 export default SavingsGoalSummary;
 //# sourceMappingURL=SavingsGoalSummary.d.ts.map

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { ScrollView, type ScrollViewProps, type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * Axis (or axes) along which the content can be scrolled.
+ *
+ * - `vertical` (default) — content taller than the viewport scrolls up/down.
+ * - `horizontal` — content wider than the viewport scrolls left/right.
+ * - `both` — content larger on either axis scrolls in both directions
+ *   (implemented as a horizontal `ScrollView` nested in a vertical one).
+ */
+export type ScrollDirection = 'vertical' | 'horizontal' | 'both';
+export interface ScrollAreaProps extends Omit<ScrollViewProps, 'horizontal' | 'contentContainerStyle' | 'children'> {
+    /** Content that may be larger than the viewport. */
+    children?: React.ReactNode;
+    /**
+     * Scroll axis. Defaults to `vertical`.
+     * @default 'vertical'
+     */
+    direction?: ScrollDirection;
+    /**
+     * Whether to show the native scroll indicator (scrollbar). Mirrors the Figma
+     * design, which has no visible scrollbar, so this defaults to `false`.
+     * @default false
+     */
+    showScrollIndicator?: boolean;
+    /**
+     * Padding applied to all sides of the scrollable content. Individual sides
+     * (`paddingHorizontal`, `paddingTop`, …) take precedence when provided.
+     * @default 0
+     */
+    padding?: number;
+    /** Left + right padding of the scrollable content. */
+    paddingHorizontal?: number;
+    /** Top + bottom padding of the scrollable content. */
+    paddingVertical?: number;
+    /** Top padding of the scrollable content. */
+    paddingTop?: number;
+    /** Right padding of the scrollable content. */
+    paddingRight?: number;
+    /** Bottom padding of the scrollable content. */
+    paddingBottom?: number;
+    /** Left padding of the scrollable content. */
+    paddingLeft?: number;
+    /**
+     * Style for the viewport (the visible, clipping window). Constrain the
+     * scroll area's size here, e.g. `{ height: 240 }` or `{ flex: 1 }`. The
+     * component intentionally has no background of its own.
+     */
+    style?: StyleProp<ViewStyle>;
+    /** Style for the scrollable content wrapper (sits inside the viewport). */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /** Modes object for design-token resolution, cascaded to all children. */
+    modes?: Modes;
+}
+/**
+ * ScrollArea — a transparent, size-constrained viewport that makes content
+ * larger than itself smoothly scrollable (Figma node 6319:46886).
+ *
+ * It has no background of its own; constrain its size through `style`
+ * (`height`, `maxHeight`, or `flex`) and drop any over-sized content inside.
+ *
+ * @example
+ * // Vertical (default): a tall column inside a fixed-height window.
+ * <ScrollArea style={{ height: 240 }}>
+ *   <LongContent />
+ * </ScrollArea>
+ *
+ * @example
+ * // Horizontal: a wide row of cards inside a full-width window.
+ * <ScrollArea direction="horizontal">
+ *   <Card /> <Card /> <Card />
+ * </ScrollArea>
+ */
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<ScrollView>>;
+export default ScrollArea;
+//# sourceMappingURL=ScrollArea.d.ts.map

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

@@ -23,10 +23,19 @@ export type TextProps = {
     numberOfLines?: number;
     /**
      * When `true`, disables text truncation entirely: 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.
+     * is never shown and any `numberOfLines` clamp is ignored. The text is also
+     * never shrunk by a tight parent — it keeps its full intrinsic size and
+     * overflows (even breaking the parent layout) rather than clipping into an
+     * ellipsis. It still wraps onto multiple lines.
      */
     disableTruncation?: boolean;
+    /**
+     * When `true`, forces the text onto a single line with no wrapping (implies
+     * {@link disableTruncation}). On web the line overflows horizontally —
+     * brutally breaking the parent layout if it has to — instead of wrapping or
+     * truncating.
+     */
+    singleLine?: boolean;
     /**
      * Explicit per-instance loading override. When `true`, this `Text` renders
      * a skeleton placeholder regardless of any surrounding `<SkeletonGroup>`.
@@ -47,6 +56,6 @@ export type TextProps = {
      */
     skeletonLines?: number;
 };
-declare function Text({ text, children, textAlign, modes, style, numberOfLines, disableTruncation, loading, skeletonWidth, skeletonLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Text({ text, children, textAlign, modes, style, numberOfLines, disableTruncation, singleLine, loading, skeletonWidth, skeletonLines, }: TextProps): import("react/jsx-runtime").JSX.Element;
 export default Text;
 //# sourceMappingURL=Text.d.ts.map

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

@@ -56,10 +56,19 @@ export type TextSegmentProps = {
     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.
+     * never shown and the `numberOfLines` clamp is ignored. The paragraph is also
+     * never shrunk by a tight parent — it keeps its full intrinsic size and
+     * overflows (even breaking the parent layout) rather than clipping into an
+     * ellipsis. It still wraps onto multiple lines.
      */
     disableTruncation?: boolean;
+    /**
+     * When `true`, forces the whole paragraph onto a single line with no wrapping
+     * (implies {@link disableTruncation}). On web the line overflows horizontally
+     * — brutally breaking the parent layout if it has to — instead of wrapping or
+     * truncating.
+     */
+    singleLine?: 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). */
@@ -100,7 +109,7 @@ export type TextSegmentProps = {
  * </TextSegment>
  * ```
  */
-declare function TextSegment({ segments, children, textAlign, numberOfLines, disableTruncation, modes, style, }: TextSegmentProps): import("react/jsx-runtime").JSX.Element;
+declare function TextSegment({ segments, children, textAlign, numberOfLines, disableTruncation, singleLine, 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/Title/Title.d.ts

@@ -16,12 +16,22 @@ export type TitleProps = {
     /**
      * 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.
+     * ignored. The text is also never shrunk by a tight parent — it keeps its
+     * full intrinsic size and overflows (even breaking the parent layout) rather
+     * than ever clipping into an ellipsis. The text still wraps onto multiple
+     * lines.
      */
     disableTruncation?: boolean;
+    /**
+     * When `true`, forces both the title and subtitle onto a single line with no
+     * wrapping (implies {@link disableTruncation}). On web the line overflows
+     * horizontally — brutally breaking the parent layout if it has to — instead
+     * of wrapping or truncating.
+     */
+    singleLine?: boolean;
     accessibilityLabel?: string;
     accessibilityHint?: string;
 } & React.ComponentProps<typeof View>;
-declare function Title({ title, subtitle, textAlign, modes: propModes, style, textStyle, subtitleStyle, numberOfLines, disableTruncation, accessibilityLabel, accessibilityHint, ...rest }: TitleProps): import("react/jsx-runtime").JSX.Element;
+declare function Title({ title, subtitle, textAlign, modes: propModes, style, textStyle, subtitleStyle, numberOfLines, disableTruncation, singleLine, accessibilityLabel, accessibilityHint, ...rest }: TitleProps): import("react/jsx-runtime").JSX.Element;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

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

@@ -15,6 +15,7 @@ export { default as CardAdvisory, type CardAdvisoryProps } from './CardAdvisory/
 export { default as CardBankAccount, type CardBankAccountProps, type CardBankAccountItem } from './CardBankAccount/CardBankAccount';
 export { default as Carousel } from './Carousel/Carousel';
 export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
+export { default as CarouselCardAccounts, type CarouselCardAccountsProps } from './CarouselCardAccounts/CarouselCardAccounts';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
 export { default as CheckboxItem, type CheckboxItemProps } from './CheckboxItem/CheckboxItem';
 export { default as CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup/CheckboxGroup';
@@ -69,6 +70,7 @@ export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Nump
 export { default as Overlay, type OverlayProps } from './Overlay/Overlay';
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
+export { default as ScrollArea, type ScrollAreaProps, type ScrollDirection } from './ScrollArea/ScrollArea';
 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';