jfs-components 0.1.8 → 0.1.12

package/lib/module/{components/ProductMerchandisingCard → utils/GlassFill}/GlassFill.js

@@ -144,9 +144,13 @@ function GradientMask({
 }
 
 /**
- * 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
@@ -159,12 +163,16 @@ function GradientMask({
  * 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.
  */
 function GlassFill({
   tint = 'dark',
   intensity = 50,
   overlayColor,
   progressive = false,
+  androidTintWash = true,
   style
 }) {
   const rawId = useId();
@@ -246,7 +254,7 @@ function GlassFill({
       style: [StyleSheet.absoluteFill, {
         backgroundColor: overlayColor
       }]
-    }) : null, Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {
+    }) : null, Platform.OS === 'android' && androidTintWash ? /*#__PURE__*/_jsx(View, {
       style: [StyleSheet.absoluteFill, {
         backgroundColor: 'rgba(255,255,255,0.03)',
         opacity: 0.6

package/lib/module/{components/ProductMerchandisingCard → utils/GlassFill}/GlassFill.web.js

@@ -5,6 +5,8 @@ import { View, StyleSheet } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DEFAULT_FALLBACK_DARK = '#1414174a';
 const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
+const DEFAULT_WEB_BLUR_SCALE = 0.32;
+const DEFAULT_WEB_BLUR_MAX_PX = 32;
 
 // Mirror of the native ramp (see GlassFill.tsx). Each layer is a `mask-image`
 // gradient whose alpha stops (0 = top, 1 = bottom) ease the blur in; `amount`
@@ -52,7 +54,7 @@ function toGradient(stops) {
 }
 
 /**
- * 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
@@ -64,15 +66,17 @@ function GlassFill({
   intensity = 50,
   overlayColor,
   progressive = false,
+  webBlurScale = DEFAULT_WEB_BLUR_SCALE,
+  webBlurMaxPx = DEFAULT_WEB_BLUR_MAX_PX,
   style
 }) {
-  // intensity 0-100 -> ~0-32px CSS blur, kept in parity with the native scale.
-  const blurPx = Math.max(0, Math.min(32, Math.round(intensity * 0.32)));
+  // intensity 0-100 -> ~0-maxPx CSS blur, kept in parity with the native scale.
+  const blurPx = Math.max(0, Math.min(webBlurMaxPx, Math.round(intensity * webBlurScale)));
   const tintColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
   if (progressive) {
     // Full peak blur (parity with native) so the frosted glass is clearly
     // engaged at the bottom; the eased masks keep the top fully clear.
-    const peakPx = Math.max(1, Math.min(32, Math.round(intensity * 0.32)));
+    const peakPx = Math.max(1, Math.min(webBlurMaxPx, Math.round(intensity * webBlurScale)));
     return /*#__PURE__*/_jsx(View, {
       style: [StyleSheet.absoluteFill, style],
       pointerEvents: "none",

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

@@ -72,6 +72,40 @@ export function cloneChildrenWithModes(children, modes, forcedModes) {
   return React.Children.toArray(result);
 }
 
+/**
+ * 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 function injectChildStyle(children, style) {
+  return React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+    const existingStyle = child.props?.style;
+    return /*#__PURE__*/React.cloneElement(child, {
+      style: existingStyle != null ? [existingStyle, style] : style
+    });
+  });
+}
+
 /**
  * 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
@@ -92,6 +126,26 @@ export function mergeRefs(...refs) {
     });
   };
 }
+/**
+ * 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 function resolveTruncation(disableTruncation, numberOfLines, ellipsizeMode) {
+  if (disableTruncation) {
+    return {
+      numberOfLines: undefined,
+      ellipsizeMode: undefined
+    };
+  }
+  return {
+    numberOfLines,
+    ellipsizeMode
+  };
+}
 
 /**
  * Flattens React children, extracting them from Fragments.

package/lib/module/utils/web-platform-utils.js

@@ -1,5 +1,6 @@
 "use strict";
 
+import { useEffect, useRef } from 'react';
 import { Platform } from 'react-native';
 /**
  * Web-specific props that should NOT be passed to React Native's Pressable component.
@@ -191,6 +192,63 @@ export function usePressableWebSupport({
   };
 }
 
+/**
+ * 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 function useWebOutsidePress(containerRef, onOutsidePress, enabled = true) {
+  const callbackRef = useRef(onOutsidePress);
+  callbackRef.current = onOutsidePress;
+  useEffect(() => {
+    if (Platform.OS !== 'web' || typeof document === 'undefined' || !enabled) {
+      return;
+    }
+    const handlePointerDown = event => {
+      const node = containerRef.current;
+      const target = event.target;
+      if (node?.contains && !node.contains(target)) {
+        callbackRef.current();
+      }
+    };
+    document.addEventListener('mousedown', handlePointerDown, true);
+    document.addEventListener('touchstart', handlePointerDown, true);
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown, true);
+      document.removeEventListener('touchstart', handlePointerDown, true);
+    };
+  }, [containerRef, enabled]);
+}
+
 /**
  * Type guard to check if running on web platform
  */

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

@@ -33,6 +33,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>;
 /**
  * Accordion component that mirrors the Figma "Accordion" component.
@@ -48,6 +54,6 @@ export type AccordionProps = {
  *
  * @component
  */
-declare function Accordion({ title, contained, defaultExpanded, expanded: controlledExpanded, onExpandedChange, disabled, children, modes, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ title, contained, defaultExpanded, expanded: controlledExpanded, onExpandedChange, disabled, children, modes, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, disableTruncation, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map

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

@@ -32,6 +32,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;
 };
 /**
  * AccordionCheckbox composes a header (with a `Checkbox`, title, subtitle and
@@ -67,6 +73,6 @@ export type AccordionCheckboxProps = {
  * </AccordionCheckbox>
  * ```
  */
-declare function AccordionCheckbox({ title, subtitle, defaultExpanded, expanded: controlledExpanded, onExpandedChange, defaultChecked, checked: controlledChecked, onCheckedChange, disabled, children, modes, style, accessibilityLabel, }: AccordionCheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionCheckbox({ title, subtitle, defaultExpanded, expanded: controlledExpanded, onExpandedChange, defaultChecked, checked: controlledChecked, onCheckedChange, disabled, children, modes, style, accessibilityLabel, disableTruncation, }: AccordionCheckboxProps): import("react/jsx-runtime").JSX.Element;
 export default AccordionCheckbox;
 //# sourceMappingURL=AccordionCheckbox.d.ts.map

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

@@ -57,6 +57,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;
 };
 /**
  * `AccountCard` — a compact card preview used to represent a linked
@@ -76,7 +82,7 @@ export type AccountCardProps = {
  * @component
  * @param {AccountCardProps} props
  */
-declare function AccountCard({ state, title, subtitle, imageSource, imageRatio, cardSlot, addIcon, onPress, disabled, modes, style, accessibilityLabel, accessibilityHint, }: AccountCardProps): import("react/jsx-runtime").JSX.Element;
+declare function AccountCard({ state, title, subtitle, imageSource, imageRatio, cardSlot, addIcon, onPress, disabled, modes, style, accessibilityLabel, accessibilityHint, disableTruncation, }: AccountCardProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof AccountCard>;
 export default _default;
 //# sourceMappingURL=AccountCard.d.ts.map

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

@@ -96,6 +96,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;
 };
 /**
  * `AllocationComparisonChart` plots a row of vertical pill bars that compare a
@@ -114,6 +120,6 @@ export type AllocationComparisonChartProps = {
  *
  * @component
  */
-declare function AllocationComparisonChart({ data, max, height, barWidth, showLegend, valueLegendLabel, baselineLegendLabel, formatValue, modes: propModes, style, chartStyle, legendStyle, accessibilityLabel, }: AllocationComparisonChartProps): import("react/jsx-runtime").JSX.Element;
+declare function AllocationComparisonChart({ data, max, height, barWidth, showLegend, valueLegendLabel, baselineLegendLabel, formatValue, modes: propModes, style, chartStyle, legendStyle, accessibilityLabel, disableTruncation, }: AllocationComparisonChartProps): import("react/jsx-runtime").JSX.Element;
 export default AllocationComparisonChart;
 //# sourceMappingURL=AllocationComparisonChart.d.ts.map

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

@@ -105,6 +105,12 @@ export type AreaLineChartProps = {
     children?: React.ReactNode;
     /** 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;
 };
 type ResolvedSeries = {
     key: React.Key;
@@ -136,6 +142,7 @@ type ChartContextValue = {
     formatY: (value: number) => React.ReactNode;
     showDots: boolean;
     modes: Modes;
+    disableTruncation?: boolean;
 };
 /** Access the surrounding chart geometry from a decorator/sub-component. */
 export declare function useChart(): ChartContextValue;
@@ -154,7 +161,7 @@ export declare function useChart(): ChartContextValue;
  *
  * @component
  */
-declare function AreaLineChart({ series, xLabels, yMin, yMax, numberOfTicks, curve, height, contentInset, showGrid, showXAxis, showYAxis, showLegend, showDots, formatX, formatY, formatValue, goalPin, activeIndex: activeIndexProp, defaultActiveIndex, onActiveIndexChange, interactive, modes: propModes, style, children, accessibilityLabel, }: AreaLineChartProps): import("react/jsx-runtime").JSX.Element;
+declare function AreaLineChart({ series, xLabels, yMin, yMax, numberOfTicks, curve, height, contentInset, showGrid, showXAxis, showYAxis, showLegend, showDots, formatX, formatY, formatValue, goalPin, activeIndex: activeIndexProp, defaultActiveIndex, onActiveIndexChange, interactive, modes: propModes, style, children, accessibilityLabel, disableTruncation, }: AreaLineChartProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AreaLineChart {
     var Grid: typeof ChartGrid;
     var XAxis: typeof ChartXAxis;

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

@@ -70,6 +70,12 @@ export type CompareTableProps = {
     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
@@ -83,6 +89,6 @@ export type CompareTableProps = {
  *
  * @component
  */
-declare function CompareTable({ columns, sections, onAddColumn, addColumnLabel, maxColumns, modes, style, }: CompareTableProps): import("react/jsx-runtime").JSX.Element;
+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