jfs-components 0.1.12 → 0.1.18

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

@@ -3,7 +3,6 @@
 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';
@@ -14,32 +13,30 @@ const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
 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).
+ * Alpha stop on the no-native-blur fallback gradient. `offset` is the vertical
+ * position (0 = top of the surface, 1 = bottom); `opacity` is the tint alpha
+ * there (0 = fully clear, 1 = full fallback color).
  *
- * 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.
+ * Using several stops (rather than a single linear 0 → 1 ramp) eases the tint
+ * in, so it swells smoothly toward the bottom instead of along a hard seam —
+ * the soft S-curve that gives the surface its "glass" feel.
  */
 
 /**
- * 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`.
+ * A single bottom-anchored band of the progressive blur stack.
+ *  - `start` is where the band begins, as a fraction from the top (0 = covers
+ *    the whole surface, 0.8 = only the bottom 20%). Each band runs from `start`
+ *    to the bottom.
+ *  - `amount` is the band's own blur strength as a share (0–1) of the peak.
  *
- * 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.
+ * Because each `BlurView` re-blurs everything rendered behind it, the bands
+ * COMPOUND where they overlap (toward the bottom), so the effective radius grows
+ * downward without any masking. The top region is covered only by the first,
+ * faint band; the bottom is covered by all of them.
  */
 
-// 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.
+// Eased tint ramp for the no-native-blur fallback scrim. A faint trace begins
+// near the very top and grows steadily downward.
 const BASE_MASK_STOPS = [{
   offset: 0.0,
   opacity: 0
@@ -56,26 +53,26 @@ const BASE_MASK_STOPS = [{
   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
-  }]
+
+// Bottom-anchored blur bands (top → bottom). The first band is faint and covers
+// the whole surface so the top reads as barely-there glass; each subsequent band
+// starts lower and adds strength, compounding toward the bottom for a smooth
+// variable-radius result. Quadrature of these shares lands the bottom at ~peak.
+const PROGRESSIVE_BANDS = [{
+  start: 0.0,
+  amount: 0.18
+}, {
+  start: 0.3,
+  amount: 0.28
+}, {
+  start: 0.52,
+  amount: 0.38
+}, {
+  start: 0.7,
+  amount: 0.5
+}, {
+  start: 0.84,
+  amount: 0.6
 }];
 
 /**
@@ -108,13 +105,14 @@ const NATIVE_BLUR_SUPPORTED = (() => {
 })();
 
 /**
- * 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.
+ * Vertical color-gradient scrim drawn with `react-native-svg` — used as the
+ * no-native-blur fallback. Paints `color` at the eased per-stop alpha so the
+ * tint swells smoothly from clear (top) to full (bottom), exactly mirroring the
+ * old `MaskedView`-over-solid-color fallback but with no native-view masking.
  */
-function GradientMask({
+function GradientScrim({
   id,
+  color,
   stops
 }) {
   return /*#__PURE__*/_jsxs(Svg, {
@@ -129,7 +127,7 @@ function GradientMask({
         y2: "1",
         children: stops.map((s, i) => /*#__PURE__*/_jsx(Stop, {
           offset: s.offset,
-          stopColor: "#000000",
+          stopColor: color,
           stopOpacity: s.opacity
         }, i))
       })
@@ -194,38 +192,37 @@ function GlassFill({
       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
-            }]
-          })
+        children: /*#__PURE__*/_jsx(GradientScrim, {
+          id: `${maskId}-fb`,
+          color: fallbackColor,
+          stops: BASE_MASK_STOPS
         })
       });
     }
     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);
+      children: PROGRESSIVE_BANDS.map((band, i) => {
+        const amount = Math.max(1, Math.round(peakBlur * band.amount));
+        return (
+          /*#__PURE__*/
+          // Each band is clipped to start at `band.start` and run to
+          // the bottom; its `BlurView` blurs the content (and any
+          // lower bands) behind it, so the radius compounds downward.
+          _jsx(View, {
+            style: [StyleSheet.absoluteFill, {
+              top: `${band.start * 100}%`,
+              overflow: 'hidden'
+            }],
+            pointerEvents: "none",
+            children: /*#__PURE__*/_jsx(BlurView, {
+              style: StyleSheet.absoluteFill,
+              blurType: blurType,
+              blurAmount: amount,
+              reducedTransparencyFallbackColor: fallbackColor
+            })
+          }, i)
+        );
       })
     });
   }

package/lib/module/utils/index.js

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

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

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

package/lib/module/utils/shadow.js

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

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

@@ -25,17 +25,46 @@ export interface BenefitCardProps {
     /** Header section title (e.g. `"You will earn"`). */
     headerTitle?: string;
     /**
-     * Highlighted item shown directly under the header title (icon + title +
-     * optional trailing value). Rendered above the divider.
+     * @deprecated The header is now a multi-row list wrap. A single item still
+     * works and is rendered as a one-row list (lowest precedence, after
+     * `header` and `headerItems`). Prefer `headerItems` (declarative) or
+     * `header` (slot).
      */
     headerItem?: BenefitCardItem;
+    /**
+     * Declarative header list-wrap rows shown under the header title and above
+     * the divider (icon + title + optional trailing value). Replaces the
+     * legacy single {@link BenefitCardProps.headerItem}. Ignored when the
+     * `header` slot is provided.
+     */
+    headerItems?: BenefitCardItem[];
+    /**
+     * Real slot for the header "list wrap" (the rows under the header title).
+     * Highest precedence — when provided, these children render instead of
+     * `headerItems` / `headerItem`; `modes` (plus the `List Item Style:
+     * Minimal` style) cascade into every child automatically.
+     */
+    header?: React.ReactNode;
     /**
      * Toggles the whole header section (title + item + divider). Mirrors the
      * Figma `showHeader` property. Defaults to `true`.
      */
     showHeader?: boolean;
-    /** Body section title (e.g. `"Upgrade to JioFinance+ and earn more"`). */
+    /**
+     * @deprecated In the Figma redesign the plain body title was replaced by a
+     * slot-based upsell `Nudge` ({@link BenefitCardProps.bodyHeader}). Still
+     * honored for backward compatibility: when set, it renders as a plain text
+     * title in place of the default nudge. Prefer `bodyHeader`.
+     */
     bodyTitle?: string;
+    /**
+     * Real slot rendered between the header divider and the body list — in the
+     * Figma reference this is an upsell `Nudge` (avatar + highlighted
+     * "JioFinance+" message). Defaults to that nudge. Pass `null`/`false` to
+     * hide it, `bodyTitle` for the legacy plain-text title, or any `ReactNode`
+     * for full control; `modes` cascade into the slot.
+     */
+    bodyHeader?: React.ReactNode;
     /**
      * Body benefit rows. Ignored when `children` is provided (the slot wins).
      */
@@ -88,6 +117,6 @@ export interface BenefitCardProps {
  * `AppearanceBrand: Secondary` brand color, exactly matching the design. All
  * three defaults can be overridden via `modes`.
  */
-declare function BenefitCard({ headerTitle, headerItem, showHeader, bodyTitle, items, children, buttonLabel, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: BenefitCardProps): import("react/jsx-runtime").JSX.Element;
+declare function BenefitCard({ headerTitle, headerItem, headerItems, header, showHeader, bodyTitle, bodyHeader, items, children, buttonLabel, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: BenefitCardProps): import("react/jsx-runtime").JSX.Element;
 export default BenefitCard;
 //# sourceMappingURL=BenefitCard.d.ts.map

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

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

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

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

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

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