jfs-components 0.1.2 → 0.1.12

package/CHANGELOG.md

@@ -4,6 +4,51 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.1.12] - 2026-06-22
+
+- Added `Stack` — token-driven vertical/horizontal layout container with `equalHeight` / `fullWidth` stretch enforcement, mode cascade to children, and `injectChildStyle` for cross-axis alignment that children cannot override.
+- Added `Table` — compound data table (`TableHeader`, `TableHeaderCell`, `TableBody`, `TableRow`, `TableCell`) with token-driven header/body styling and horizontal scroll support.
+- `CardCTA` — new `sip` variant (avatar-led card with headline / description / subtitle footer); accepts PascalCase Figma variant names (`CTA` / `Rating` / `Sip`) via `CardCTATypeInput`; body typography defaults aligned to Figma.
+- `Badge` — new `glass` type (frosted pill via shared `GlassFill`); optional `leading` slot; `glassOverlayColor` / `glassIntensity` overrides; exported `BadgeProps` and `BadgeType`.
+- `CompareTable` — feature rows now render through the shared `Table` primitive; selection cards pick up `selectionCard/radius`; `disableTruncation` support.
+- `ProductMerchandisingCard` — footer special badge now uses `<Badge type="glass">`; progressive footer blur via `MaskedView` + gradient mask on native; `disableTruncation` support.
+- `GlassFill` — consolidated into shared `src/utils/GlassFill/` (native blur + web `backdrop-filter`); removed per-component copies under `MediaCard` and `ProductMerchandisingCard`.
+- `FormField` — iOS single-line input no longer applies row-height token as `lineHeight` (fixes vertically sunk text on iOS); web blur-on-outside-press via `useWebOutsidePress` so fields exit Active state when tapping buttons/links outside.
+- Shared utilities — `injectChildStyle`, `resolveTruncation`, and `useWebOutsidePress` in `react-utils` / `web-platform-utils`.
+- `disableTruncation` — opt-out of ellipsis / `numberOfLines` clamps rolled out across interactive and data-display components (e.g. `ListItem`, `Button`, `CompareTable`, charts, form controls).
+- Figma/token sync pass; refreshed `.token-metadata.json`, `figma-modes.generated.ts`, icons registry, and Coin Variables tokens.
+
+---
+
+## [0.1.8] - 2026-06-12
+
+- Added `BenefitCard` — header highlight + body benefit rows with icon/title/trailing value and optional CTA.
+- Added `CcCard` — credit-card merchandising card with badge row, media, benefit list, footer CTA, and `compact` variant.
+- Added `CompareTable` — accordion-style product comparison table with selection-card columns and feature rows.
+- Added `ComparisonBar` — controlled add/remove image slots with a trailing Compare action.
+- Added `PdpCcCard` — PDP credit-card hero with media, title, metrics row, and footer CTA.
+- Added `ProductMerchandisingCard` — full-bleed media card with glass footer, avatar, badge, and CTA (`GlassFill` platform split for native blur / web `backdrop-filter`).
+- Added `ProjectionMarker` — investment projection timeline with start/end values and a center duration/rate badge.
+- Added `Slider` — token-driven range slider with SVG track, step snapping, and imperative ref API (`getValue` / `setValue` / `increment` / `decrement`).
+- Added `TextSegment` — token-driven multi-colour inline text via `segments` or compositional `Text` children.
+- `DropdownInput` — imperative ref API (`open` / `close` / `toggle` / `focus` / `blur` / `measureInWindow`).
+- Form inputs — refs forwarded through `Checkbox`, `CheckboxItem`, `Radio`, `TextInput`, `InputSearch`, `NoteInput`, `AmountInput`, and `FormField`.
+- Figma/token sync pass; refreshed `.token-metadata.json`, `figma-modes.generated.ts`, icons registry, and Coin Variables tokens.
+- Added `npm run tokens` script (`scripts/figma-token-explorer.js`); `tsconfig.build.json` now excludes `scripts/`.
+
+---
+
+## [0.1.2] - 2026-06-10
+
+- Added `Overlay` — full-screen scrim with optional dismiss-on-press and `contentPlacement` (`center` / `top` / `bottom` / `stretch`).
+- `Drawer` — optional `showOverlay` + `onOverlayPress` scrim behind the sheet.
+- `Image` — new `resizeMethod` prop for sharper high-res bitmap rendering.
+- `FullscreenModal` — defers hero media render until modal width is measured.
+- `DropdownInput` — popup animation set to `none`.
+- `LottiePlayer` — fixed native module resolution (static `require` so Metro resolves when the peer is installed).
+
+---
+
 ## [0.1.1] - 2026-06-10
 
 - Design tokens — the `modes` prop is now strongly typed end to end. A generated `Modes` type gives autocomplete and validation for both collection-name keys and mode-name values across every component, while staying fully backward compatible (opt-in `StrictModes` turns typos into compile errors). `FIGMA_MODES`, `CollectionName`, and `ModeOf` are exported from the package.

package/lib/commonjs/components/Accordion/Accordion.js

@@ -67,6 +67,7 @@ function Accordion({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const [internalExpanded, setInternalExpanded] = (0, _react.useState)(defaultExpanded);
@@ -166,7 +167,7 @@ function Accordion({
       ...webProps,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: titleStyle,
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: title
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: isExpanded ? 'ic_minus' : 'ic_add',

package/lib/commonjs/components/AccordionCheckbox/AccordionCheckbox.js

@@ -64,7 +64,8 @@ function AccordionCheckbox({
   children,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const isExpandedControlled = controlledExpanded !== undefined;
   const [internalExpanded, setInternalExpanded] = (0, _react.useState)(defaultExpanded);
@@ -209,12 +210,12 @@ function AccordionCheckbox({
           style: textWrapStyle,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: titleStyle,
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             selectable: false,
             children: title
           }), subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: subtitleStyle,
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             selectable: false,
             children: subtitle
           }) : null]

package/lib/commonjs/components/AccountCard/AccountCard.js

@@ -78,7 +78,8 @@ function AccountCard({
   modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  disableTruncation
 }) {
   const iconModes = (0, _react.useMemo)(() => modes === _reactUtils.EMPTY_MODES ? ADD_ICON_DEFAULT_MODES : {
     ...ADD_ICON_DEFAULT_MODES,
@@ -211,11 +212,11 @@ function AccountCard({
       },
       children: [title != null && title !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: titleStyle,
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: title
       }) : null, showSubtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: subtitleStyle,
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: subtitle
       }) : null]
     }) : null]

package/lib/commonjs/components/AllocationComparisonChart/AllocationComparisonChart.js

@@ -67,7 +67,8 @@ function SegmentBar({
   baselineHeightPx,
   baselineLabel,
   showMarker,
-  theme
+  theme,
+  disableTruncation
 }) {
   const {
     barWidth,
@@ -94,7 +95,7 @@ function SegmentBar({
     },
     accessibilityLabel: segment.accessibilityLabel,
     children: [showValueLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       style: labelStyle,
       children: segment.valueLabel
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -140,7 +141,7 @@ function SegmentBar({
               strokeDasharray: "2 2"
             })
           }), isShown(baselineLabel) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             style: [labelStyle, {
               marginLeft: 6
             }],
@@ -149,7 +150,7 @@ function SegmentBar({
         }) : null]
       }) : null
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       style: labelStyle,
       children: segment.label
     })]
@@ -186,7 +187,8 @@ function AllocationComparisonChart({
   style,
   chartStyle,
   legendStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -290,7 +292,8 @@ function AllocationComparisonChart({
           baselineHeightPx: baselineHeightPx,
           baselineLabel: baselineLabel,
           showMarker: showMarker,
-          theme: theme
+          theme: theme,
+          disableTruncation: disableTruncation
         }, segment.key ?? `segment-${index}`);
       })
     })]

package/lib/commonjs/components/AmountInput/AmountInput.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = AmountInput;
-var _react = _interopRequireDefault(require("react"));
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
@@ -13,17 +13,18 @@ var _NoteInput = _interopRequireDefault(require("../NoteInput/NoteInput"));
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * AmountInput component that combines MoneyValue and NoteInput from Figma design.
  *
  * @component
  */
-function AmountInput({
+const AmountInput = /*#__PURE__*/(0, _react.forwardRef)(function AmountInput({
   moneyValueSlot,
   noteInputSlot,
   modes: propModes = _reactUtils.EMPTY_MODES,
   style
-}) {
+}, ref) {
   const {
     modes: globalModes
   } = (0, _JFSThemeProvider.useTokens)();
@@ -77,7 +78,9 @@ function AmountInput({
     return noteInputSlot;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: ref,
     style: containerStyle,
     children: [renderMoneyValueSlot(), renderNoteInputSlot()]
   });
-}
+});
+var _default = exports.default = AmountInput;

package/lib/commonjs/components/AreaLineChart/AreaLineChart.js

@@ -123,7 +123,8 @@ function AreaLineChart({
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   children,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -243,8 +244,9 @@ function AreaLineChart({
     formatX,
     formatY,
     showDots,
-    modes
-  }), [plotWidth, height, inset, xScale, yScale, yTicks, indexXs, count, resolvedSeries, curve, activeIndex, setActiveIndex, xLabels, formatX, formatY, showDots, modes]);
+    modes,
+    disableTruncation
+  }), [plotWidth, height, inset, xScale, yScale, yTicks, indexXs, count, resolvedSeries, curve, activeIndex, setActiveIndex, xLabels, formatX, formatY, showDots, modes, disableTruncation]);
   const isMultiSeries = resolvedSeries.length > 1;
   const resolvedFormatValue = formatValue ?? (v => formatY(v));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartContext.Provider, {
@@ -385,7 +387,8 @@ function ChartYAxis({
     yScale,
     yTicks,
     formatY,
-    modes
+    modes,
+    disableTruncation
   } = useChart();
   const typo = useAxisTypography(modes);
   const format = formatLabel ?? formatY;
@@ -413,7 +416,7 @@ function ChartYAxis({
           },
           children: showLabels ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: typo.style,
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             children: format(t)
           }) : null
         }, `yl-${t}`);
@@ -464,7 +467,8 @@ function ChartXAxis({
     formatX,
     modes,
     activeIndex,
-    setActiveIndex
+    setActiveIndex,
+    disableTruncation
   } = useChart();
   const typo = useAxisTypography(modes);
   const format = formatLabel ?? formatX;
@@ -510,7 +514,7 @@ function ChartXAxis({
             color: activeColor,
             fontWeight: '700'
           } : null],
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: format(label, i)
         });
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/Badge/Badge.js

@@ -10,21 +10,34 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _reactUtils = require("../../utils/react-utils");
 var _Skeleton = _interopRequireDefault(require("../../skeleton/Skeleton"));
 var _SkeletonGroup = require("../../skeleton/SkeletonGroup");
+var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Badge({
   label = 'Label',
+  type = 'default',
   modes = _reactUtils.EMPTY_MODES,
   onPress,
   accessibilityLabel,
   style,
   labelStyle,
   loading,
+  disableTruncation,
+  leading,
+  glassOverlayColor,
+  glassIntensity,
   ...rest
 }) {
-  // Resolve token values (fall back to sensible defaults)
+  const isGlass = type === 'glass';
+  const hasLeading = leading != null;
+
+  // Resolve token values (fall back to sensible defaults). The glass type
+  // swaps the solid fill for a translucent overlay + white label, matching the
+  // Figma `badge/glass/*` tokens.
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('badge/color/background', modes) || '#d8effe';
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('badge/color/label', modes) || '#000000';
+  const glassBackground = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/background', modes) || '#ffffff26';
+  const glassLabelColor = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/label', modes) || '#ffffff';
+  const labelColor = isGlass ? glassLabelColor : (0, _figmaVariablesResolver.getVariableByName)('badge/color/label', modes) || '#000000';
   const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/fontSize', modes)) || 12;
   const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('badge/fontFamily', modes) || undefined;
   const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('badge/label/fontWeight', modes) || '600';
@@ -32,6 +45,9 @@ function Badge({
   const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/vertical', modes)) || 4;
   const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('badge/radius', modes)) || 4;
   const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/lineHeight', modes)) || Math.round(fontSize * 1.2);
+  // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale, the
+  // same 1:1 mapping the merchandising card footer uses.
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes)) || 29)));
 
   // Skeleton short-circuit. Size derived from the same tokens the loaded
   // badge would use so the placeholder occupies the same box.
@@ -54,13 +70,25 @@ function Badge({
   }
   const Container = onPress ? _reactNative.Pressable : _reactNative.View;
   const containerStyle = {
-    backgroundColor,
+    // Glass keeps the container transparent so the GlassFill blur shows through;
+    // `overflow: 'hidden'` clips the native blur view to the rounded pill (the
+    // blur view does not honor borderRadius itself).
+    backgroundColor: isGlass ? 'transparent' : backgroundColor,
     paddingHorizontal,
     paddingVertical,
     borderRadius,
     alignSelf: 'flex-start',
     alignItems: 'center',
     justifyContent: 'center',
+    // A leading node sits in-line before the label, so switch to a row with a
+    // small gap. Consumer `style` (spread last) can still override either.
+    ...(hasLeading ? {
+      flexDirection: 'row',
+      gap: 4
+    } : null),
+    ...(isGlass ? {
+      overflow: 'hidden'
+    } : null),
     ...(style || {})
   };
   const textStyle = {
@@ -73,19 +101,30 @@ function Badge({
     ...(labelStyle || {})
   };
   const defaultAccessibilityLabel = accessibilityLabel || label;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     style: containerStyle,
     accessibilityRole: onPress ? 'button' : 'text',
     accessibilityLabel: undefined,
     onPress: onPress,
     ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    children: [isGlass ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
+      tint: "light",
+      intensity: glassIntensity ?? blurIntensity,
+      overlayColor: glassOverlayColor ?? glassBackground,
+      androidTintWash: false
+    }) : null, hasLeading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: LEADING_WRAP,
+      children: leading
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: textStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1, 'tail'),
       accessibilityElementsHidden: false,
       children: label
-    })
+    })]
   });
 }
+const LEADING_WRAP = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
 var _default = exports.default = Badge;

package/lib/commonjs/components/BenefitCard/BenefitCard.js

@@ -0,0 +1,231 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _Text = _interopRequireDefault(require("../Text/Text"));
+var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
+var _Divider = _interopRequireDefault(require("../Divider/Divider"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * A single benefit row rendered with the shared `ListItem` primitive: a
+ * leading icon, a title and an optional right-aligned trailing value.
+ */
+
+/**
+ * BenefitCard — Figma node 5352:1077 ("Benefit Card").
+ *
+ * A white, rounded card that summarises the rewards a user will earn. It is
+ * composed entirely from the shared design-system primitives so it stays in
+ * sync with the rest of the library:
+ *
+ *  - **Header** — a section title + a single highlighted {@link ListItem}
+ *    (leading `Icon`, title, right-aligned trailing value) followed by a
+ *    `Divider`.
+ *  - **Body** — a section title + a column of benefit {@link ListItem}s. The
+ *    list is a real slot: pass `children` to fully control it, or `items` for
+ *    the declarative path.
+ *  - **CTA** — a small {@link Button} (Figma `Button / Size = S`).
+ *
+ * The list rows resolve through the `List Item Style: Minimal` mode (12px /
+ * regular title, 4px gap, no padding) and the leading icons use the
+ * `AppearanceBrand: Secondary` brand color, exactly matching the design. All
+ * three defaults can be overridden via `modes`.
+ */
+function BenefitCard({
+  headerTitle = 'You will earn',
+  headerItem,
+  showHeader = true,
+  bodyTitle = 'Upgrade to JioFinance+ and earn more',
+  items,
+  children,
+  buttonLabel = 'Upgrade',
+  onButtonPress,
+  button,
+  showButton = true,
+  onPress,
+  width = 344,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
+
+  // Sub-component modes. Consumer-supplied `modes` always win via spread order.
+  const listItemModes = (0, _react.useMemo)(() => ({
+    'List Item Style': 'Minimal',
+    ...modes
+  }), [modes]);
+  const iconModes = (0, _react.useMemo)(() => ({
+    AppearanceBrand: 'Secondary',
+    ...modes
+  }), [modes]);
+  const trailingTextModes = (0, _react.useMemo)(() => ({
+    'Text Sizes': 'Small',
+    Weight: 'Regular',
+    ...modes
+  }), [modes]);
+  const ctaModes = (0, _react.useMemo)(() => ({
+    'Button / Size': 'S',
+    ...modes
+  }), [modes]);
+  const renderItem = (item, key) => {
+    const leading = item.leading ?? (item.icon != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      iconName: item.icon,
+      color: item.iconColor,
+      modes: iconModes
+    }) : null);
+    const trailing = item.trailing ?? (item.trailingText != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      modes: trailingTextModes,
+      children: item.trailingText
+    }) : undefined);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItem.default, {
+      layout: "Horizontal",
+      navArrow: false,
+      showSupportText: false,
+      title: item.title,
+      leading: leading,
+      trailing: trailing,
+      onPress: item.onPress,
+      modes: listItemModes
+    }, key);
+  };
+  const headerNode = showHeader && (headerTitle != null || headerItem != null) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.section,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.cardHeader,
+      children: [headerTitle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: tokens.title,
+        children: headerTitle
+      }) : null, headerItem != null ? renderItem(headerItem, 'header-item') : null]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      modes: modes
+    })]
+  }) : null;
+  const bodyList = children ? (0, _reactUtils.cloneChildrenWithModes)(children, listItemModes) : (items ?? DEFAULT_ITEMS).map((item, index) => renderItem(item, index));
+  const ctaNode = button ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    label: buttonLabel,
+    modes: ctaModes,
+    onPress: onButtonPress
+  });
+  const containerStyle = (0, _react.useMemo)(() => ({
+    ...tokens.container,
+    width
+  }), [tokens.container, width]);
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [headerNode, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: tokens.body,
+      children: [bodyTitle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: tokens.title,
+        children: bodyTitle
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: tokens.listWrap,
+        children: bodyList
+      })]
+    }), showButton ? ctaNode : null]
+  });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: ({
+        pressed
+      }) => [containerStyle, pressed ? styles.pressed : null, style],
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? headerTitle ?? bodyTitle,
+      onPress: onPress,
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+// The "card header" inner gap (title -> highlighted item) is a fixed 4px in
+// the Figma node and has no dedicated token.
+const CARD_HEADER_GAP = 4;
+function asNum(raw, fallback) {
+  const n = typeof raw === 'number' ? raw : parseFloat(raw);
+  return Number.isFinite(n) ? n : fallback;
+}
+function asStr(raw, fallback) {
+  return raw != null ? String(raw) : fallback;
+}
+function resolveTokens(modes) {
+  // NOTE: token names are passed as string literals DIRECTLY to
+  // getVariableByName so the `extract-component-tokens` script can statically
+  // collect them for the generated docs. Do not refactor these into a helper
+  // that receives the name as a variable.
+  const background = asStr((0, _figmaVariablesResolver.getVariableByName)('benefitCard/background', modes), '#ffffff');
+  const paddingHorizontal = asNum((0, _figmaVariablesResolver.getVariableByName)('benefitCard/padding/horizontal', modes), 12);
+  const paddingVertical = asNum((0, _figmaVariablesResolver.getVariableByName)('benefitCard/padding/vertical', modes), 12);
+  const radius = asNum((0, _figmaVariablesResolver.getVariableByName)('benefitCard/radius', modes), 12);
+  const gap = asNum((0, _figmaVariablesResolver.getVariableByName)('benefitCard/gap', modes), 8);
+  const titleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('benefitCard/title/foreground', modes), '#000000');
+  const titleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('benefitCard/title/fontsize', modes), 14);
+  const titleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('benefitCard/title/fontFamily', modes), 'JioType Var');
+  const titleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('benefitCard/title/fontWeight', modes), '500');
+  return {
+    container: {
+      backgroundColor: background,
+      paddingHorizontal,
+      paddingVertical,
+      borderRadius: radius,
+      gap,
+      flexDirection: 'column',
+      alignItems: 'flex-start'
+    },
+    body: {
+      alignSelf: 'stretch',
+      gap
+    },
+    listWrap: {
+      alignSelf: 'stretch',
+      gap
+    },
+    title: {
+      color: titleColor,
+      fontSize: titleSize,
+      fontFamily: titleFamily,
+      fontWeight: titleWeight,
+      lineHeight: 20,
+      letterSpacing: -0.5,
+      includeFontPadding: false
+    }
+  };
+}
+const DEFAULT_ITEMS = [{
+  icon: 'ic_card',
+  title: 'Up to ₹5000 cashback'
+}, {
+  icon: 'ic_card',
+  title: '25% extra JioPoints'
+}];
+const styles = _reactNative.StyleSheet.create({
+  section: {
+    alignSelf: 'stretch',
+    gap: 8
+  },
+  cardHeader: {
+    alignSelf: 'stretch',
+    gap: CARD_HEADER_GAP
+  },
+  pressed: {
+    opacity: 0.92
+  }
+});
+var _default = exports.default = BenefitCard;

package/lib/commonjs/components/BrandChip/BrandChip.js

@@ -95,7 +95,8 @@ function BrandChip({
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -126,8 +127,7 @@ function BrandChip({
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [avatarNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [tokens.labelStyle, labelStyle],
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1, 'tail'),
       children: label
     })]
   });

package/lib/commonjs/components/Button/Button.js

@@ -176,6 +176,7 @@ function ButtonImpl({
   accessibilityState,
   webAccessibilityProps,
   loading,
+  disableTruncation,
   ...rest
 }) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -220,7 +221,7 @@ function ButtonImpl({
   } else {
     content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: activeLabelStyle,
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: label
     });
   }