jfs-components 0.1.2 → 0.1.12

package/lib/commonjs/components/CardAdvisory/CardAdvisory.js

@@ -126,6 +126,7 @@ function CardAdvisory({
   progressStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -163,7 +164,7 @@ function CardAdvisory({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: tokens.headerStyle,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             style: [tokens.titleStyle, titleStyle],
             children: title
           }), processedTitleEndSlot || (showInfoIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {

package/lib/commonjs/components/CardBankAccount/CardBankAccount.js

@@ -72,7 +72,8 @@ function CardBankAccount({
   footer,
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   // Merge caller modes on top of `DEFAULT_MODES` so every default key
   // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
@@ -189,7 +190,7 @@ function CardBankAccount({
           })
         }), typeof item.value === 'string' || typeof item.value === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: valueTextStyle,
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: item.value
         }) : (0, _reactUtils.cloneChildrenWithModes)(item.value, modes)]
       }, `${item.label}-${index}`))

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -14,9 +14,18 @@ var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Badge = _interopRequireDefault(require("../Badge/Badge"));
 var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup/ButtonGroup"));
 var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Accepted `type` values. The canonical (and historical) values are lowercase
+ * (`'cta' | 'rating' | 'sip'`). The Figma variant names are PascalCase
+ * (`'CTA' | 'Rating' | 'Sip'`) — we accept those too and normalize internally
+ * so callers can pass either casing without a breaking change.
+ */
+
 const optionalTokenAvailability = new Map();
+const toWeight = w => typeof w === 'number' ? `${w}` : w;
 function getOptionalVariableByName(name, modes, fallback) {
   let isAvailable = optionalTokenAvailability.get(name);
   if (isAvailable === undefined) {
@@ -39,11 +48,16 @@ function CardCTA({
   showRatingActions = true,
   onPressLike,
   onPressDislike,
+  headline = 'Headline',
+  description = 'Description',
+  subtitle = 'Subtitle',
+  avatarSource,
   modes: propModes = _reactUtils.EMPTY_MODES,
   iconSlot,
   buttonSlot,
   ratingBadgeSlot,
   ratingActionsSlot,
+  avatarSlot,
   style
 }) {
   const {
@@ -53,7 +67,10 @@ function CardCTA({
     ...globalModes,
     ...propModes
   };
-  const isRating = type === 'rating';
+  // Accept both lowercase (canonical) and Figma PascalCase variant names.
+  const normalizedType = typeof type === 'string' ? type.toLowerCase() : 'cta';
+  const isRating = normalizedType === 'rating';
+  const isSip = normalizedType === 'sip';
   const background = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/background', modes) || '#ffffff';
   const radius = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/radius', modes) || 12;
   const borderSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/border/size', modes) || 1;
@@ -67,13 +84,13 @@ function CardCTA({
   const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/color', modes) || '#0c0d10';
   const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontFamily', modes) || 'JioType Var';
   const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontSize', modes) || 16;
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/lineHeight', modes) || 17.6;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/lineHeight', modes) || 18;
   const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/title/fontWeight', modes) || 700;
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
   const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/color', modes) || '#13002d';
   const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontFamily', modes) || 'JioType Var';
-  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontSize', modes) || 10;
-  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes) || 12;
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontSize', modes) || 14;
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/lineHeight', modes) || 17;
   const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardCTA/body/fontWeight', modes) || 400;
   const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
   const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12);
@@ -82,6 +99,33 @@ function CardCTA({
   const ratingFooterPaddingH = getOptionalVariableByName('cardCTA/rating/footer/horizontal', modes, 16);
   const ratingFooterPaddingTop = getOptionalVariableByName('cardCTA/rating/footer/top', modes, 0);
   const ratingFooterPaddingBottom = getOptionalVariableByName('cardCTA/rating/footer/bottom', modes, 12);
+
+  // Sip variant footer text block (Headline / Description / Subtitle). These
+  // `ccCard/*` tokens were introduced for the Sip layout — resolve them
+  // optionally so older token snapshots that lack them fall back gracefully.
+  const sipFooterGap = getOptionalVariableByName('ccCard/footer/textWrap/gap', modes, 4);
+  const sipHeadlineColor = getOptionalVariableByName('ccCard/headline/color', modes, '#707275');
+  const sipHeadlineFontFamily = getOptionalVariableByName('ccCard/headline/fontFamily', modes, 'JioType Var');
+  const sipHeadlineFontSize = getOptionalVariableByName('ccCard/headline/fontSize', modes, 10);
+  const sipHeadlineLineHeight = getOptionalVariableByName('ccCard/headline/lineHeight', modes, 13);
+  const sipHeadlineFontWeightRaw = getOptionalVariableByName('ccCard/headline/fontWeight', modes, 500);
+  const sipHeadlineFontWeight = typeof sipHeadlineFontWeightRaw === 'number' ? sipHeadlineFontWeightRaw.toString() : sipHeadlineFontWeightRaw;
+  const sipDescriptionColor = getOptionalVariableByName('ccCard/title/color', modes, '#081007');
+  const sipDescriptionFontFamily = getOptionalVariableByName('ccCard/title/fontFamily', modes, 'JioType Var');
+  const sipDescriptionFontSize = getOptionalVariableByName('ccCard/title/fontSize', modes, 14);
+  const sipDescriptionLineHeight = getOptionalVariableByName('ccCard/title/lineHeight', modes, 15);
+  const sipDescriptionFontWeightRaw = getOptionalVariableByName('ccCard/title/fontWeight', modes, 700);
+  const sipDescriptionFontWeight = typeof sipDescriptionFontWeightRaw === 'number' ? sipDescriptionFontWeightRaw.toString() : sipDescriptionFontWeightRaw;
+  const sipSubtitleColor = getOptionalVariableByName('ccCard/subtitle/color', modes, '#707275');
+  const sipSubtitleFontFamily = getOptionalVariableByName('ccCard/subtitle/fontFamily', modes, 'JioType Var');
+  const sipSubtitleFontSize = getOptionalVariableByName('ccCard/subtitle/fontSize', modes, 10);
+  const sipSubtitleLineHeight = getOptionalVariableByName('ccCard/subtitle/lineHeight', modes, 13);
+  const sipSubtitleFontWeightRaw = getOptionalVariableByName('ccCard/subtitle/fontWeight', modes, 500);
+  const sipSubtitleFontWeight = typeof sipSubtitleFontWeightRaw === 'number' ? sipSubtitleFontWeightRaw.toString() : sipSubtitleFontWeightRaw;
+  const avatarModes = {
+    ...modes,
+    'Avatar Size': 'L'
+  };
   const buttonModes = {
     ...modes,
     AppearanceBrand: 'Secondary',
@@ -98,25 +142,72 @@ function CardCTA({
   const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = _react.default.useState(null);
   const buttonPaddingH = (0, _figmaVariablesResolver.getVariableByName)('button/padding/horizontal', buttonModes) || 20;
   const buttonBorderSize = (0, _figmaVariablesResolver.getVariableByName)('button/border/size', buttonModes) ?? 1;
-  const measuredButtonWidth = measuredButtonLabelWidth === null ? undefined : Math.ceil(measuredButtonLabelWidth + buttonPaddingH * 2 + buttonBorderSize * 2);
-  const handleButtonLabelTextLayout = _react.default.useCallback(event => {
-    const lines = event?.nativeEvent?.lines;
-    if (!Array.isArray(lines) || lines.length === 0) return;
-    const nextWidth = Math.ceil(lines.reduce((sum, line) => sum + (typeof line?.width === 'number' ? line.width : 0), 0));
-    if (nextWidth <= 0) return;
-    setMeasuredButtonLabelWidth(currentWidth => {
-      if (currentWidth !== null && Math.abs(currentWidth - nextWidth) < 1) {
-        return currentWidth;
-      }
-      return nextWidth;
-    });
+  // Small safety pad so sub-pixel rounding between the measure pass and the
+  // rendered glyph run can never clip the final character.
+  const measuredButtonWidth = measuredButtonLabelWidth === null ? undefined : Math.ceil(measuredButtonLabelWidth + buttonPaddingH * 2 + buttonBorderSize * 2 + 2);
+
+  // ROOT-CAUSE FIX for the Android "jumping button" feedback loop + clipping.
+  //
+  // Previously the *visible* label measured itself via `onTextLayout` and we
+  // fed that width straight back onto the same Button. Because the button is
+  // width-constrained by its parent, Android clamps the overflowing text and
+  // even character-breaks a single word ("Save" -> "Sav"/"e"); the re-applied
+  // width re-triggers layout, producing an endless ~60fps width oscillation.
+  //
+  // We now measure an *off-screen* copy of the label, laid out at an
+  // effectively unbounded width, so its reported single-line width is
+  // intrinsic and constant regardless of the button's applied width — the
+  // measurement can no longer depend on the value it produces, so the loop is
+  // impossible. Crucially the measurer reuses the Button's own resolved label
+  // styles (passed into `renderContent`), so the measured font matches the
+  // rendered font exactly and the width is never an under-estimate. The label
+  // is always a single line that overflows rather than wraps or truncates.
+  const handleMeasureTextLayout = _react.default.useCallback(event => {
+    const line = event?.nativeEvent?.lines?.[0];
+    const width = line && typeof line.width === 'number' ? line.width : 0;
+    if (width <= 0) return;
+    setMeasuredButtonLabelWidth(currentWidth => currentWidth !== null && Math.abs(currentWidth - width) < 0.5 ? currentWidth : Math.ceil(width));
   }, []);
+
+  // Off-screen measurer wrapper: absolute + opacity 0 + pointerEvents none =>
+  // out of flow, invisible, never intercepts touches, zero layout impact.
+  const measurerWrapStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    opacity: 0
+  };
+
+  // Renders the visible single-line label (never wraps, never ellipsizes) plus
+  // the co-located off-screen measurer that shares the Button's exact label
+  // styles. `width: 9999` forces the measurer onto one line so `onTextLayout`
+  // reports the true intrinsic width.
+  const renderButtonContent = labelExtraStyle => labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      numberOfLines: 1,
+      ellipsizeMode: "clip",
+      style: [labelStyles, labelExtraStyle],
+      children: nonWrappingButtonLabel
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      style: measurerWrapStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [labelStyles, {
+          width: 9999
+        }],
+        onTextLayout: handleMeasureTextLayout,
+        children: nonWrappingButtonLabel
+      })
+    })]
+  });
   const containerStyle = {
     backgroundColor: background,
     borderRadius: radius,
     borderWidth: borderSize,
     borderColor,
-    flexDirection: isRating ? 'column' : 'row',
+    flexDirection: isRating || isSip ? 'column' : 'row',
     overflow: 'visible'
   };
 
@@ -202,6 +293,47 @@ function CardCTA({
     lineHeight: bodyLineHeight,
     fontWeight: bodyFontWeight
   };
+  const sipWrapStyle = {
+    width: '100%',
+    paddingHorizontal: leftPaddingH,
+    paddingVertical: leftPaddingV,
+    gap: leftGap,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    overflow: 'visible'
+  };
+  const sipFooterTextWrapStyle = {
+    gap: sipFooterGap,
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    minWidth: 0
+  };
+  const sipDescriptionWrapStyle = {
+    flexDirection: 'row',
+    gap: sipFooterGap,
+    alignItems: 'flex-end'
+  };
+  const sipHeadlineStyle = {
+    color: sipHeadlineColor,
+    fontFamily: sipHeadlineFontFamily,
+    fontSize: sipHeadlineFontSize,
+    lineHeight: sipHeadlineLineHeight,
+    fontWeight: toWeight(sipHeadlineFontWeightRaw)
+  };
+  const sipDescriptionStyle = {
+    color: sipDescriptionColor,
+    fontFamily: sipDescriptionFontFamily,
+    fontSize: sipDescriptionFontSize,
+    lineHeight: sipDescriptionLineHeight,
+    fontWeight: toWeight(sipDescriptionFontWeightRaw)
+  };
+  const sipSubtitleStyle = {
+    color: sipSubtitleColor,
+    fontFamily: sipSubtitleFontFamily,
+    fontSize: sipSubtitleFontSize,
+    lineHeight: sipSubtitleLineHeight,
+    fontWeight: toWeight(sipSubtitleFontWeightRaw)
+  };
   const ratingContentStyle = {
     paddingHorizontal: ratingContentPaddingH,
     paddingVertical: ratingContentPaddingV,
@@ -248,6 +380,52 @@ function CardCTA({
     flexShrink: 0,
     flexWrap: 'nowrap'
   };
+  if (isSip) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [containerStyle, style],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: sipWrapStyle,
+        children: [avatarSlot ? (0, _reactUtils.cloneChildrenWithModes)(avatarSlot, avatarModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          style: "Image",
+          imageSource: avatarSource,
+          modes: avatarModes
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: textWrapStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: titleStyle,
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: bodyStyle,
+            children: body
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: sipFooterTextWrapStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: sipHeadlineStyle,
+            children: headline
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: sipDescriptionWrapStyle,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: sipDescriptionStyle,
+              children: description
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: sipSubtitleStyle,
+              children: subtitle
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: buttonWrapStyle,
+          children: buttonSlot ? (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, buttonModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            label: effectiveButtonLabel,
+            onPress: onPressButton || (() => {}),
+            modes: buttonModes,
+            style: buttonStyle,
+            renderContent: renderButtonContent(buttonLabelStyle)
+          })
+        })]
+      })
+    });
+  }
   if (isRating) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [containerStyle, style],
@@ -275,11 +453,7 @@ function CardCTA({
             onPress: onPressButton || (() => {}),
             modes: buttonModes,
             style: ratingButtonStyle,
-            renderContent: labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              onTextLayout: handleButtonLabelTextLayout,
-              style: [labelStyles, ratingButtonLabelStyle],
-              children: nonWrappingButtonLabel
-            })
+            renderContent: renderButtonContent(ratingButtonLabelStyle)
           })
         }), showRatingActions ? ratingActionsSlot ? (0, _reactUtils.cloneChildrenWithModes)(ratingActionsSlot, iconButtonModes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
           modes: iconButtonModes,
@@ -320,11 +494,7 @@ function CardCTA({
           onPress: onPressButton || (() => {}),
           modes: buttonModes,
           style: buttonStyle,
-          renderContent: labelStyles => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            onTextLayout: handleButtonLabelTextLayout,
-            style: [labelStyles, buttonLabelStyle],
-            children: nonWrappingButtonLabel
-          })
+          renderContent: renderButtonContent(buttonLabelStyle)
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/CardInsight/CardInsight.js

@@ -36,7 +36,9 @@ function CardInsight({
   style
 }) {
   const background = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/background', modes) ?? '#ffffff';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/radius', modes) ?? 16;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/radius', modes) ?? 12;
+  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/borderWidth', modes) ?? 1;
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/border/color', modes) ?? '#ffffff';
   const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/padding/horizontal', modes) ?? 12;
   const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/padding/vertical', modes) ?? 16;
   const gap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/gap', modes) ?? 12;
@@ -109,6 +111,8 @@ function CardInsight({
       width,
       backgroundColor: background,
       borderRadius: radius,
+      borderWidth,
+      borderColor,
       paddingHorizontal,
       paddingVertical,
       gap,