jfs-components 0.1.2 → 0.1.12

package/lib/module/utils/GlassFill/GlassFill.js

@@ -0,0 +1,265 @@
+"use strict";
+
+import React, { useId } from 'react';
+import { View, StyleSheet, Platform, UIManager } from 'react-native';
+import { BlurView } from '@react-native-community/blur';
+import MaskedView from '@react-native-masked-view/masked-view';
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_FALLBACK_DARK = '#1414174a';
+const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
+
+// The native view-manager name registered by `@react-native-community/blur`
+// (`AndroidBlurView` on Android, `BlurView` on iOS).
+const NATIVE_BLUR_NAME = Platform.OS === 'android' ? 'AndroidBlurView' : 'BlurView';
+
+/**
+ * Alpha stop on a layer's vertical reveal mask. `offset` is the vertical
+ * position (0 = top of the surface, 1 = bottom); `opacity` is the mask alpha
+ * there (0 = layer hidden / fully clear, 1 = layer fully applied).
+ *
+ * Using several stops (rather than a single linear 0 → 1 ramp) lets each layer
+ * EASE in, so the blur swells smoothly toward the bottom instead of appearing
+ * along a hard horizontal seam. That soft S-curve is what gives the surface its
+ * "glass" feel rather than a flat translucent panel.
+ */
+
+/**
+ * A single layer of the progressive ramp.
+ *  - `stops` describe how this layer is revealed from top to bottom.
+ *  - `amount` is this layer's share (0–1) of the max `blurAmount`.
+ *
+ * We stack just TWO layers on both platforms: a faint base blur that covers
+ * most of the footer and a slightly stronger accent concentrated near the
+ * bottom. Keeping the overlap shallow avoids compounding the dark tint of
+ * multiple `BlurView`s (which is what made the earlier 3-layer ramp read as a
+ * heavy block), while still giving a genuine variable-radius result — the blur
+ * radius grows toward the bottom where the two layers overlap.
+ */
+
+// Base reveal: a faint trace of blur begins near the very top and grows
+// steadily downward, so the upper half still carries visible glass rather than
+// snapping clear. Also reused for the no-native-blur fallback scrim.
+const BASE_MASK_STOPS = [{
+  offset: 0.0,
+  opacity: 0
+}, {
+  offset: 0.08,
+  opacity: 0.12
+}, {
+  offset: 0.35,
+  opacity: 0.4
+}, {
+  offset: 0.65,
+  opacity: 0.8
+}, {
+  offset: 1.0,
+  opacity: 1
+}];
+const PROGRESSIVE_LAYERS = [{
+  amount: 0.65,
+  stops: BASE_MASK_STOPS
+},
+// Accent: the strongest blur, gathering over the lower portion for depth.
+{
+  amount: 1.0,
+  stops: [{
+    offset: 0.0,
+    opacity: 0
+  }, {
+    offset: 0.3,
+    opacity: 0.15
+  }, {
+    offset: 0.65,
+    opacity: 0.65
+  }, {
+    offset: 1.0,
+    opacity: 1
+  }]
+}];
+
+/**
+ * Probe ONCE whether the native blur view is actually present in this binary.
+ *
+ * `@react-native-community/blur` is a peer dependency so its JS always imports,
+ * but on a build where the native module was never linked (e.g. `pod install`
+ * wasn't run on iOS) rendering `<BlurView>` shows React Native's red
+ * "Unimplemented component <BlurView>" placeholder. Detecting availability up
+ * front lets us fall back to a tinted scrim instead of crashing the surface.
+ *
+ *   - New architecture (bridgeless): `getViewManagerConfig` raises a soft error,
+ *     so we MUST use `hasViewManagerConfig` -> Fabric component registry.
+ *   - Old architecture (Paper): `getViewManagerConfig` returns null when the
+ *     view manager isn't registered.
+ */
+const NATIVE_BLUR_SUPPORTED = (() => {
+  try {
+    const um = UIManager;
+    if (typeof um.hasViewManagerConfig === 'function') {
+      return um.hasViewManagerConfig(NATIVE_BLUR_NAME) === true;
+    }
+    if (typeof um.getViewManagerConfig === 'function') {
+      return um.getViewManagerConfig(NATIVE_BLUR_NAME) != null;
+    }
+  } catch {
+    // Any probe failure -> treat blur as unavailable and use the fallback.
+  }
+  return false;
+})();
+
+/**
+ * Vertical alpha-gradient mask drawn with `react-native-svg`. `MaskedView`
+ * reveals its child in proportion to this mask's alpha, so feeding it an eased
+ * multi-stop gradient makes the layer's blur swell in smoothly from top to
+ * bottom instead of along a hard seam.
+ */
+function GradientMask({
+  id,
+  stops
+}) {
+  return /*#__PURE__*/_jsxs(Svg, {
+    width: "100%",
+    height: "100%",
+    children: [/*#__PURE__*/_jsx(Defs, {
+      children: /*#__PURE__*/_jsx(LinearGradient, {
+        id: id,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: stops.map((s, i) => /*#__PURE__*/_jsx(Stop, {
+          offset: s.offset,
+          stopColor: "#000000",
+          stopOpacity: s.opacity
+        }, i))
+      })
+    }), /*#__PURE__*/_jsx(Rect, {
+      x: "0",
+      y: "0",
+      width: "100%",
+      height: "100%",
+      fill: `url(#${id})`
+    })]
+  });
+}
+
+/**
+ * Shared glass / frosted surface for native (iOS + Android).
+ *
+ * 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
+ *     and `GlassFill.web.tsx` for web, keeping the web bundle native-free.
+ *   - Centralizes the `intensity` (0–100) -> `blurAmount` (0–32) mapping so the
+ *     Figma `blur/minimal` token semantics survive across platforms.
+ *
+ * On iOS (with the pod installed) this is a real `UIVisualEffectView` (true
+ * OS-level live blur). On Android it uses the community blur view. When the
+ * 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();
+  const maskId = `glass-mask-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const blurType = tint === 'light' ? 'light' : 'dark';
+  const uniformBlurAmount = Math.max(0, Math.min(32, Math.round(intensity * 0.32)));
+  const fallbackColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
+
+  // ----- Progressive (variable) blur -------------------------------------
+  if (progressive) {
+    // Peak blur radius (at the bottom). Full strength so the frosted glass
+    // is clearly engaged where the layers overlap, while the eased masks
+    // keep the top of the surface fully clear.
+    const peakBlur = Math.max(1, Math.min(32, Math.round(intensity * 0.32)));
+
+    // Native blur not linked -> tint eases from transparent (top) to a soft
+    // fallback color (bottom) so the surface still reads as gentle glass.
+    if (!NATIVE_BLUR_SUPPORTED) {
+      return /*#__PURE__*/_jsx(View, {
+        style: [StyleSheet.absoluteFill, style],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(MaskedView, {
+          style: StyleSheet.absoluteFill,
+          maskElement: /*#__PURE__*/_jsx(GradientMask, {
+            id: `${maskId}-fb`,
+            stops: BASE_MASK_STOPS
+          }),
+          children: /*#__PURE__*/_jsx(View, {
+            style: [StyleSheet.absoluteFill, {
+              backgroundColor: fallbackColor
+            }]
+          })
+        })
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, style],
+      pointerEvents: "none",
+      children: PROGRESSIVE_LAYERS.map((layer, i) => {
+        const amount = Math.max(1, Math.round(peakBlur * layer.amount));
+        return /*#__PURE__*/_jsx(MaskedView, {
+          style: StyleSheet.absoluteFill,
+          maskElement: /*#__PURE__*/_jsx(GradientMask, {
+            id: `${maskId}-${i}`,
+            stops: layer.stops
+          }),
+          children: /*#__PURE__*/_jsx(BlurView, {
+            style: StyleSheet.absoluteFill,
+            blurType: blurType,
+            blurAmount: amount,
+            reducedTransparencyFallbackColor: fallbackColor
+          })
+        }, i);
+      })
+    });
+  }
+
+  // ----- Uniform blur (default) ------------------------------------------
+  // Native blur not linked in this build -> render a translucent tinted scrim
+  // so the surface still reads as frosted glass and never shows RN's
+  // "Unimplemented component <BlurView>" box.
+  if (!NATIVE_BLUR_SUPPORTED) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: fallbackColor
+      }, style],
+      pointerEvents: "none"
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [StyleSheet.absoluteFill, style],
+    pointerEvents: "none",
+    children: [/*#__PURE__*/_jsx(BlurView, {
+      style: StyleSheet.absoluteFill,
+      blurType: blurType,
+      blurAmount: uniformBlurAmount,
+      reducedTransparencyFallbackColor: fallbackColor
+    }), overlayColor != null ? /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: overlayColor
+      }]
+    }) : null, Platform.OS === 'android' && androidTintWash ? /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: 'rgba(255,255,255,0.03)',
+        opacity: 0.6
+      }]
+    }) : null]
+  });
+}
+export default GlassFill;

package/lib/module/utils/GlassFill/GlassFill.web.js

@@ -0,0 +1,115 @@
+"use strict";
+
+import React from 'react';
+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`
+// is the layer's share of the max blur. Two gently-overlapping layers (faint
+// base + bottom accent) keep the surface subtle and glass-like rather than a
+// heavy frosted block.
+
+const PROGRESSIVE_LAYERS = [{
+  amount: 0.65,
+  stops: [{
+    offset: 0.0,
+    opacity: 0
+  }, {
+    offset: 0.08,
+    opacity: 0.12
+  }, {
+    offset: 0.35,
+    opacity: 0.4
+  }, {
+    offset: 0.65,
+    opacity: 0.8
+  }, {
+    offset: 1.0,
+    opacity: 1
+  }]
+}, {
+  amount: 1.0,
+  stops: [{
+    offset: 0.0,
+    opacity: 0
+  }, {
+    offset: 0.3,
+    opacity: 0.15
+  }, {
+    offset: 0.65,
+    opacity: 0.65
+  }, {
+    offset: 1.0,
+    opacity: 1
+  }]
+}];
+function toGradient(stops) {
+  const parts = stops.map(s => `rgba(0,0,0,${s.opacity}) ${Math.round(s.offset * 100)}%`).join(', ');
+  return `linear-gradient(to bottom, ${parts})`;
+}
+
+/**
+ * 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.
+ */
+function GlassFill({
+  tint = 'dark',
+  intensity = 50,
+  overlayColor,
+  progressive = false,
+  webBlurScale = DEFAULT_WEB_BLUR_SCALE,
+  webBlurMaxPx = DEFAULT_WEB_BLUR_MAX_PX,
+  style
+}) {
+  // 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(webBlurMaxPx, Math.round(intensity * webBlurScale)));
+    return /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, style],
+      pointerEvents: "none",
+      children: PROGRESSIVE_LAYERS.map((layer, i) => {
+        const px = Math.max(1, Math.round(peakPx * layer.amount));
+        const gradient = toGradient(layer.stops);
+        // web-only CSS (backdrop-filter / mask-image); cast because
+        // these keys aren't in RN's ViewStyle.
+        const webStyle = {
+          backdropFilter: `blur(${px}px)`,
+          WebkitBackdropFilter: `blur(${px}px)`,
+          maskImage: gradient,
+          WebkitMaskImage: gradient
+        };
+        return /*#__PURE__*/_jsx(View, {
+          style: [StyleSheet.absoluteFill, webStyle],
+          pointerEvents: "none"
+        }, i);
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [StyleSheet.absoluteFill, {
+      backgroundColor: tintColor
+    },
+    // backdrop-filter is web-only CSS; ignored by RN on native
+    // (we never bundle this file there anyway).
+    // @ts-ignore web-only style
+    {
+      backdropFilter: `blur(${blurPx}px)`,
+      WebkitBackdropFilter: `blur(${blurPx}px)`
+    }, style],
+    pointerEvents: "none"
+  });
+}
+export default GlassFill;

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

@@ -72,6 +72,81 @@ 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
+ * node while still honouring a ref forwarded by the consumer.
+ *
+ * @example
+ * const inputRef = useRef<RNTextInput>(null)
+ * <RNTextInput ref={mergeRefs(inputRef, forwardedRef)} />
+ */
+export function mergeRefs(...refs) {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+/**
+ * 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.
  * Useful for Group components that need to process individual items (e.g., for layout or styling)

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/AmountInput/AmountInput.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ViewStyle } from 'react-native';
+import { View, type ViewStyle } from 'react-native';
 import type { Modes } from '../../design-tokens';
 export type AmountInputProps = {
     /**
@@ -20,5 +20,6 @@ export type AmountInputProps = {
  *
  * @component
  */
-export default function AmountInput({ moneyValueSlot, noteInputSlot, modes: propModes, style, }: AmountInputProps): import("react/jsx-runtime").JSX.Element;
+declare const AmountInput: React.ForwardRefExoticComponent<AmountInputProps & React.RefAttributes<View>>;
+export default AmountInput;
 //# sourceMappingURL=AmountInput.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;