jfs-components 0.1.8 → 0.1.17

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

@@ -150,9 +150,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
@@ -165,12 +169,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 = (0, _react.useId)();
@@ -252,7 +260,7 @@ function GlassFill({
       style: [_reactNative.StyleSheet.absoluteFill, {
         backgroundColor: overlayColor
       }]
-    }) : null, _reactNative.Platform.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }) : null, _reactNative.Platform.OS === 'android' && androidTintWash ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [_reactNative.StyleSheet.absoluteFill, {
         backgroundColor: 'rgba(255,255,255,0.03)',
         opacity: 0.6

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

@@ -10,6 +10,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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`
@@ -57,7 +59,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
@@ -69,15 +71,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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [_reactNative.StyleSheet.absoluteFill, style],
       pointerEvents: "none",

package/lib/commonjs/utils/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "MediaSource", {
     return _MediaSource.default;
   }
 });
+Object.defineProperty(exports, "boxShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.boxShadow;
+  }
+});
 Object.defineProperty(exports, "cloneChildrenWithModes", {
   enumerable: true,
   get: function () {
@@ -27,7 +33,26 @@ Object.defineProperty(exports, "formatIndianNumber", {
     return _numberUtils.formatIndianNumber;
   }
 });
+Object.defineProperty(exports, "parseBoxShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.parseBoxShadow;
+  }
+});
+Object.defineProperty(exports, "parseSingleShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.parseSingleShadow;
+  }
+});
+Object.defineProperty(exports, "supportsNativeBoxShadow", {
+  enumerable: true,
+  get: function () {
+    return _shadow.supportsNativeBoxShadow;
+  }
+});
 var _reactUtils = require("./react-utils");
 var _MediaSource = _interopRequireDefault(require("./MediaSource"));
 var _numberUtils = require("./number-utils");
+var _shadow = require("./shadow");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.EMPTY_MODES = void 0;
 exports.cloneChildrenWithModes = cloneChildrenWithModes;
 exports.flattenChildren = flattenChildren;
+exports.injectChildStyle = injectChildStyle;
 exports.mergeRefs = mergeRefs;
+exports.resolveTextLayout = resolveTextLayout;
+exports.resolveTruncation = resolveTruncation;
 var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * A shared, frozen empty modes object.
@@ -80,6 +84,40 @@ function cloneChildrenWithModes(children, modes, forcedModes) {
   return _react.default.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.
+ */
+function injectChildStyle(children, style) {
+  return _react.default.Children.map(children, child => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    }
+    const existingStyle = child.props?.style;
+    return /*#__PURE__*/_react.default.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
@@ -100,6 +138,86 @@ 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.
+ */
+function resolveTruncation(disableTruncation, numberOfLines, ellipsizeMode) {
+  if (disableTruncation) {
+    return {
+      numberOfLines: undefined,
+      ellipsizeMode: undefined
+    };
+  }
+  return {
+    numberOfLines,
+    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.
+ */
+function resolveTextLayout({
+  disableTruncation,
+  singleLine,
+  numberOfLines,
+  ellipsizeMode
+}) {
+  if (singleLine) {
+    return {
+      numberOfLines: undefined,
+      ellipsizeMode: undefined,
+      style: {
+        flexShrink: 0,
+        flexGrow: 0,
+        ...(_reactNative.Platform.OS === 'web' ? {
+          whiteSpace: 'nowrap',
+          overflow: 'visible'
+        } : {})
+      }
+    };
+  }
+  if (disableTruncation) {
+    return {
+      numberOfLines: undefined,
+      ellipsizeMode: undefined,
+      style: {
+        flexShrink: 0,
+        ...(_reactNative.Platform.OS === 'web' ? {
+          overflow: 'visible'
+        } : {})
+      }
+    };
+  }
+  return {
+    numberOfLines,
+    ellipsizeMode
+  };
+}
 
 /**
  * Flattens React children, extracting them from Fragments.

package/lib/commonjs/utils/shadow.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.boxShadow = boxShadow;
+exports.parseBoxShadow = parseBoxShadow;
+exports.parseSingleShadow = parseSingleShadow;
+exports.supportsNativeBoxShadow = supportsNativeBoxShadow;
+var _reactNative = require("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).
+ */
+function supportsNativeBoxShadow() {
+  if (_reactNative.Platform.OS === 'web') {
+    return true;
+  }
+  const version = _reactNative.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.
+ */
+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).
+ */
+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 (_reactNative.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`).
+ */
+function boxShadow(value, options) {
+  if (!value) {
+    return {};
+  }
+  if (supportsNativeBoxShadow()) {
+    return {
+      boxShadow: value
+    };
+  }
+  return legacyShadowStyle(value, options);
+}

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

@@ -10,6 +10,8 @@ exports.getWebAccessibilityProps = getWebAccessibilityProps;
 exports.isWeb = exports.isNative = void 0;
 exports.useKeyboardNavigation = useKeyboardNavigation;
 exports.usePressableWebSupport = usePressableWebSupport;
+exports.useWebOutsidePress = useWebOutsidePress;
+var _react = require("react");
 var _reactNative = require("react-native");
 /**
  * Web-specific props that should NOT be passed to React Native's Pressable component.
@@ -201,6 +203,63 @@ 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)
+ * ```
+ */
+function useWebOutsidePress(containerRef, onOutsidePress, enabled = true) {
+  const callbackRef = (0, _react.useRef)(onOutsidePress);
+  callbackRef.current = onOutsidePress;
+  (0, _react.useEffect)(() => {
+    if (_reactNative.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/module/components/Accordion/Accordion.js

@@ -5,7 +5,7 @@ import { View, Text, Pressable, LayoutAnimation, Platform, UIManager } from 'rea
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Enable LayoutAnimation on Android
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
@@ -61,6 +61,7 @@ function Accordion({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
@@ -160,7 +161,7 @@ function Accordion({
       ...webProps,
       children: [/*#__PURE__*/_jsx(Text, {
         style: titleStyle,
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: title
       }), /*#__PURE__*/_jsx(Icon, {
         name: isExpanded ? 'ic_minus' : 'ic_add',

package/lib/module/components/AccordionCheckbox/AccordionCheckbox.js

@@ -3,7 +3,7 @@
 import React, { useCallback, useState } from 'react';
 import { View, Text, Pressable, LayoutAnimation, Platform, UIManager } 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';
@@ -58,7 +58,8 @@ function AccordionCheckbox({
   children,
   modes = EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const isExpandedControlled = controlledExpanded !== undefined;
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
@@ -203,12 +204,12 @@ function AccordionCheckbox({
           style: textWrapStyle,
           children: [/*#__PURE__*/_jsx(Text, {
             style: titleStyle,
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             selectable: false,
             children: title
           }), subtitle ? /*#__PURE__*/_jsx(Text, {
             style: subtitleStyle,
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             selectable: false,
             children: subtitle
           }) : null]

package/lib/module/components/AccountCard/AccountCard.js

@@ -3,7 +3,7 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { Image as RNImage, Platform, Pressable, Text, View } 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const IS_IOS = Platform.OS === 'ios';
@@ -72,7 +72,8 @@ function AccountCard({
   modes = EMPTY_MODES,
   style,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  disableTruncation
 }) {
   const iconModes = useMemo(() => modes === EMPTY_MODES ? ADD_ICON_DEFAULT_MODES : {
     ...ADD_ICON_DEFAULT_MODES,
@@ -205,11 +206,11 @@ function AccountCard({
       },
       children: [title != null && title !== '' ? /*#__PURE__*/_jsx(Text, {
         style: titleStyle,
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: title
       }) : null, showSubtitle ? /*#__PURE__*/_jsx(Text, {
         style: subtitleStyle,
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: subtitle
       }) : null]
     }) : null]