jfs-components 0.1.8 → 0.1.17

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/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.
  *
@@ -72,6 +73,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 +127,86 @@ 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
+  };
+}
+/**
+ * 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/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