jfs-components 0.1.23 → 0.1.25

package/lib/module/components/CardCTA/CardCTA.js

@@ -225,22 +225,39 @@ function CardCTA({
     zIndex: 1
   };
 
-  // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
-  // `flex: 2` shorthand expands to `{ flexGrow: 2, flexShrink: 1, flexBasis: 0 }`,
-  // which — combined with `minWidth: 0` — lets Yoga shrink this wrapper below
-  // its own padding+IconCapsule width when leftWrap's text is long. Once that
-  // happens the horizontal padding collapses, `alignItems: 'flex-end'` pins
-  // the IconCapsule against the inner edge, and the icon ends up visually
-  // touching the body text (the wrapper "appears not to exist"). Web hides
-  // this because browsers honor `min-width: auto` on flex items. Use
-  // explicit `flexGrow`/`flexShrink: 0`/`flexBasis: 'auto'` so the wrapper
-  // is sized to its content as a floor and only grows for the design's
-  // 3:2 ratio when extra space is available. leftWrap already absorbs tight
-  // space via `flexShrink: 1` + `minWidth: 0`.
+  // NOTE: rightWrap must implement the design's TRUE `2fr` column.
+  //
+  // History of this style — two Yoga pitfalls pull in opposite directions:
+  //
+  //  1. `flex: 2` (=> flexBasis: 0, flexShrink: 1): on Android, Yoga could
+  //     shrink the wrapper below its padding+IconCapsule width when the left
+  //     text was long, collapsing the padding and gluing the icon to the
+  //     text. Browsers hide this because they honor `min-width: auto`; Yoga
+  //     always treats min-width as 0 unless told otherwise.
+  //  2. The previous workaround, `flexBasis: 'auto'` + `flexGrow: 2`, fixed
+  //     #1 but broke the column ratio: Yoga then sizes the wrapper to its
+  //     content FIRST (icon + padding) and distributes only the leftover
+  //     space 3:2. The icon width gets baked in on top of the 2fr share, so
+  //     the right column ends up much wider than the design's 2fr and the
+  //     body text wraps early with dead space to its right.
+  //
+  // Fundamental fix: keep the genuine fr-unit geometry (`flexBasis: 0`,
+  // grow 3:2, no shrink) and replace Yoga's missing `min-width: auto` with
+  // an explicit computed floor — the resolved IconCapsule size plus the
+  // wrapper's own horizontal padding. The column is exactly 2fr whenever
+  // space allows and can never collapse below its content.
+  const iconCapsuleModes = {
+    ...modes,
+    'IconCapsule / Size': 'M',
+    Emphasis: 'Medium',
+    AppearanceBrand: 'Secondary'
+  };
+  const rightWrapMinWidth = (getVariableByName('iconCapsule/size', iconCapsuleModes) || 0) + (rightPaddingH || 0) * 2;
   const rightWrapStyle = {
     flexGrow: 2,
     flexShrink: 0,
-    flexBasis: 'auto',
+    flexBasis: 0,
+    minWidth: rightWrapMinWidth,
     paddingHorizontal: rightPaddingH,
     paddingVertical: rightPaddingV,
     alignItems: 'flex-end',
@@ -494,19 +511,9 @@ function CardCTA({
       })]
     }), /*#__PURE__*/_jsx(View, {
       style: rightWrapStyle,
-      children: iconSlot ? cloneChildrenWithModes(iconSlot, {
-        ...modes,
-        'IconCapsule / Size': 'M',
-        Emphasis: 'Medium',
-        AppearanceBrand: 'Secondary'
-      }) : /*#__PURE__*/_jsx(IconCapsule, {
+      children: iconSlot ? cloneChildrenWithModes(iconSlot, iconCapsuleModes) : /*#__PURE__*/_jsx(IconCapsule, {
         iconName: iconName,
-        modes: {
-          ...modes,
-          'IconCapsule / Size': 'M',
-          Emphasis: 'Medium',
-          AppearanceBrand: 'Secondary'
-        }
+        modes: iconCapsuleModes
       })
     })]
   });

package/lib/module/components/ChipSelect/ChipSelect.js

@@ -14,6 +14,7 @@ function ChipSelect({
   label = 'Date',
   active = false,
   icon = 'ic_calendar_week',
+  showCloseIcon = true,
   modes = EMPTY_MODES,
   style,
   labelSlot,
@@ -87,7 +88,7 @@ function ChipSelect({
       name: icon,
       size: iconSize,
       color: textColor
-    }), renderLabel(), active && /*#__PURE__*/_jsx(Icon, {
+    }), renderLabel(), active && showCloseIcon && /*#__PURE__*/_jsx(Icon, {
       name: "ic_close",
       size: iconSize,
       color: textColor

package/lib/module/components/ListItem/ListItem.js

@@ -249,13 +249,20 @@ function ListItemImpl({
   const renderSupportContent = () => {
     if (processedSupportSlot) return processedSupportSlot;
 
-    // Default support text:
-    //  - vertical layout: main text (line-broken on spaces)
-    //  - horizontal layout: secondary line (clamped to 2 lines)
+    // Default support text — ONE `<Text>` hard-clamped to 2 lines via
+    // `numberOfLines={2}`, the only mechanism React Native actually enforces
+    // on iOS/Android (native has no `white-space: nowrap` equivalent, so any
+    // style-based trick cannot stop a too-wide word from wrapping).
+    //
+    //  - vertical layout: line-broken on spaces so each word gets its own line
+    //    ("Split Payments" → "Split" / "Payments"). If a word is still wider
+    //    than the cell (or there are 3+ words), RN cuts it off at line 2 with
+    //    a trailing ellipsis instead of ever spilling onto a third line.
+    //  - horizontal layout: natural wrapping, same 2-line clamp.
     const displayText = layout === 'Vertical' ? supportText.replace(/ /g, '\n') : supportText;
     return /*#__PURE__*/_jsx(Text, {
       style: layout === 'Vertical' ? [tokens.supportTextStyle, verticalSupportTextOverride] : tokens.supportTextStyle,
-      ...resolveTruncation(disableTruncation, layout === 'Horizontal' ? 2 : undefined),
+      ...resolveTruncation(disableTruncation, 2, 'tail'),
       children: displayText
     });
   };

package/lib/module/components/MetricData/MetricData.js

@@ -0,0 +1,127 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import Icon from '../Icon/Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LINE_HEIGHT_RATIO = 1.2;
+const ICON_SIZE = 18;
+// Figma renders the value-row icon with no surrounding padding; the shared Icon
+// component pulls padding from `icon/padding/*` tokens, so we zero it here.
+const ICON_PADDING_RESET = {
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  paddingBottom: 0
+};
+/**
+ * MetricData — a compact, centered metric block.
+ *
+ * Stacks a small `title`, a prominent `value` (with an optional leading
+ * `icon`), and a muted `caption`. Typography, colours, gaps and padding all
+ * resolve from the `metricdata/*` design tokens. `title`, `caption` and `icon`
+ * are optional; only `value` is shown by default.
+ *
+ * @example
+ * ```tsx
+ * <MetricData title="Balance" value="₹1,20,000" caption="as of today" />
+ * <MetricData title="Cards" value="12" icon="ic_card" caption="active" />
+ * ```
+ */
+function MetricData({
+  title,
+  value,
+  caption,
+  icon,
+  modes = EMPTY_MODES,
+  style,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  accessibilityLabel
+}) {
+  const titleColor = getVariableByName('metricdata/title/color', modes) ?? '#000000';
+  const titleFontFamily = getVariableByName('metricdata/title/fontfamily', modes) ?? 'JioType Var';
+  const titleFontSize = getVariableByName('metricdata/title/fontsize', modes) ?? 12;
+  const titleFontWeight = String(getVariableByName('metricdata/title/fontweight', modes) ?? 400);
+  const valueColor = getVariableByName('metricdata/value/color', modes) ?? '#000000';
+  const valueFontFamily = getVariableByName('metricdata/value/fontfamily', modes) ?? 'JioType Var';
+  const valueFontSize = getVariableByName('metricdata/value/fontsize', modes) ?? 20;
+  const valueFontWeight = String(getVariableByName('metricdata/value/fontweight', modes) ?? 700);
+  const captionColor = getVariableByName('metricdata/caption/color', modes) ?? '#777777';
+  const captionFontFamily = getVariableByName('metricdata/caption/fontfamily', modes) ?? 'JioType Var';
+  const captionFontSize = getVariableByName('metricdata/caption/fontsize', modes) ?? 12;
+  const captionFontWeight = String(getVariableByName('metricdata/caption/fontweight', modes) ?? 500);
+  const gap = getVariableByName('metricdata/gap', modes) ?? 4;
+  const valueWrapGap = getVariableByName('metricdata/valueWrap/gap', modes) ?? 4;
+  const paddingHorizontal = getVariableByName('metricdata/padding/horizontal', modes) ?? 10;
+  const paddingVertical = getVariableByName('metricdata/padding/vertical', modes) ?? 10;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical
+  };
+  const titleTextStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center'
+  };
+  const valueTextStyle = {
+    color: valueColor,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    fontWeight: valueFontWeight,
+    lineHeight: valueFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center'
+  };
+  const captionTextStyle = {
+    color: captionColor,
+    fontFamily: captionFontFamily,
+    fontSize: captionFontSize,
+    fontWeight: captionFontWeight,
+    lineHeight: captionFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center'
+  };
+  const iconNode = icon == null ? null : typeof icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
+    iconName: icon,
+    size: ICON_SIZE,
+    color: valueColor,
+    modes: modes,
+    style: ICON_PADDING_RESET
+  }) : icon;
+  const resolvedLabel = accessibilityLabel ?? ([title, typeof value === 'string' ? value : undefined, caption].filter(Boolean).join(', ') || undefined);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessible: true,
+    ...(resolvedLabel !== undefined ? {
+      accessibilityLabel: resolvedLabel
+    } : null),
+    children: [title !== undefined && title !== '' ? /*#__PURE__*/_jsx(Text, {
+      style: [titleTextStyle, titleStyle],
+      children: title
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: valueWrapGap
+      },
+      children: [iconNode, typeof value === 'string' ? /*#__PURE__*/_jsx(Text, {
+        style: [valueTextStyle, valueStyle],
+        children: value
+      }) : value]
+    }), caption !== undefined && caption !== '' ? /*#__PURE__*/_jsx(Text, {
+      style: [captionTextStyle, captionStyle],
+      children: caption
+    }) : null]
+  });
+}
+export default /*#__PURE__*/React.memo(MetricData);

package/lib/module/components/Rating/Rating.js

@@ -0,0 +1,132 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Star glyph taken directly from the Figma `Rating` component. Filled and empty
+ * stars share this shape and differ only by fill color, so a single path keeps
+ * the row perfectly aligned.
+ */
+const STAR_PATH = 'M40.7187 15.3334C40.4728 14.6159 40.0426 13.9805 39.4688 13.4885C38.8951 12.9965 38.1985 12.689 37.4403 12.566L28.3018 11.1721L24.2038 2.35741C23.8759 1.66044 23.3432 1.06596 22.6875 0.635476C22.0318 0.225491 21.2737 0 20.4951 0C19.7165 0 18.9583 0.225491 18.3027 0.635476C17.647 1.04546 17.1142 1.63994 16.7864 2.35741L12.6884 11.1721L3.4679 12.566C2.73026 12.689 2.01311 12.9965 1.43939 13.4885C0.865675 13.9805 0.435385 14.6159 0.189505 15.3334C-0.0358854 16.0304 -0.0563753 16.7889 0.107545 17.5063C0.271465 18.2238 0.640285 18.9003 1.15254 19.4333L7.89374 26.362L6.29552 36.1811C6.17258 36.9396 6.27503 37.7186 6.56189 38.4156C6.84875 39.1125 7.34051 39.7275 7.9757 40.1785C8.65187 40.691 9.49196 40.978 10.3525 40.9985C11.0697 40.9985 11.7664 40.8345 12.4015 40.486L20.5771 35.9761L28.7526 40.486C29.3673 40.8345 30.0844 41.019 30.8016 40.9985C31.6621 40.9985 32.4817 40.732 33.1784 40.24C33.7931 39.789 34.2849 39.1945 34.5922 38.4771C34.8791 37.7801 34.9815 37.0011 34.8586 36.2426L33.2604 26.4235L40.0016 19.4948C40.4933 18.9413 40.8007 18.2443 40.9441 17.5063C41.0671 16.7684 40.9851 16.0099 40.7187 15.3334Z';
+const STAR_VIEWBOX = '0 0 41 41';
+
+// Fallbacks mirror the Figma `Rating Star / Output` + `Rating Star State` tokens.
+const DEFAULT_STAR_SIZE = 41;
+const DEFAULT_GAP = 12;
+const SELECTED_FALLBACK = '#5D00B5';
+const IDLE_FALLBACK = '#F6F3FF';
+
+/**
+ * `ratingStar/background` is state-driven: the same token resolves to the filled
+ * color when `Rating Star State = selected` and to the empty color when `idle`.
+ */
+const RATING_STATE_COLLECTION = 'Rating Star State';
+const toNumber = (value, fallback) => {
+  const n = typeof value === 'string' ? Number(value) : value;
+  return typeof n === 'number' && Number.isFinite(n) ? n : fallback;
+};
+function Star({
+  width,
+  height,
+  color
+}) {
+  return /*#__PURE__*/_jsx(Svg, {
+    width: width,
+    height: height,
+    viewBox: STAR_VIEWBOX,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: STAR_PATH,
+      fill: color
+    })
+  });
+}
+function Rating({
+  value = 0,
+  max = 5,
+  onChange,
+  readOnly = false,
+  starSize,
+  gap,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const {
+    selectedColor,
+    idleColor,
+    starWidth,
+    starHeight,
+    resolvedGap
+  } = useMemo(() => {
+    const selected = getVariableByName('ratingStar/background', {
+      ...modes,
+      [RATING_STATE_COLLECTION]: 'selected'
+    });
+    const idle = getVariableByName('ratingStar/background', {
+      ...modes,
+      [RATING_STATE_COLLECTION]: 'idle'
+    });
+    return {
+      selectedColor: selected ?? SELECTED_FALLBACK,
+      idleColor: idle ?? IDLE_FALLBACK,
+      starWidth: starSize ?? toNumber(getVariableByName('ratingStar/width', modes), DEFAULT_STAR_SIZE),
+      starHeight: starSize ?? toNumber(getVariableByName('ratingStar/height', modes), DEFAULT_STAR_SIZE),
+      resolvedGap: gap ?? toNumber(getVariableByName('rating/gap', modes), DEFAULT_GAP)
+    };
+  }, [modes, starSize, gap]);
+  const total = Math.max(0, Math.round(max));
+  const filledCount = Math.max(0, Math.min(total, Math.round(value)));
+  const interactive = !readOnly && typeof onChange === 'function';
+  const label = accessibilityLabel ?? `${filledCount} of ${total} stars`;
+  return /*#__PURE__*/_jsx(View, {
+    ...rest,
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: resolvedGap
+    }, style],
+    accessibilityRole: interactive ? 'adjustable' : 'image',
+    accessibilityLabel: label,
+    accessibilityValue: interactive ? {
+      min: 0,
+      max: total,
+      now: filledCount
+    } : undefined,
+    children: Array.from({
+      length: total
+    }, (_, index) => {
+      const color = index < filledCount ? selectedColor : idleColor;
+      const star = /*#__PURE__*/_jsx(Star, {
+        width: starWidth,
+        height: starHeight,
+        color: color
+      });
+      if (!interactive) {
+        return /*#__PURE__*/_jsx(React.Fragment, {
+          children: star
+        }, index);
+      }
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => onChange?.(index + 1),
+        accessibilityRole: "button",
+        accessibilityLabel: `Rate ${index + 1} of ${total} stars`,
+        hitSlop: 8,
+        children: star
+      }, index);
+    })
+  });
+}
+export default /*#__PURE__*/React.memo(Rating);

package/lib/module/design-tokens/figma-modes.generated.js

@@ -357,6 +357,7 @@ export const FIGMA_COMPONENT_MODES = {
   "MediaCard": ["Contrast Context"],
   "MerchantProfile": ["Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "MessageField": ["Color Mode", "FormField States"],
+  "MetricData": ["AppearanceBrand", "Badge Size", "Color Mode", "context 10", "Context4", "Emphasis", "Profile Card Appearance"],
   "MetricLegendItem": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
   "MoneyValue": ["Color Mode", "Context3"],
   "MonthlyStatusGrid": ["Appearance / DataViz", "Calendar Glyph State", "Color Mode", "Emphasis / DataViz"],
@@ -375,6 +376,7 @@ export const FIGMA_COMPONENT_MODES = {
   "ProjectionMarker": ["Color Mode", "context 10", "Profile Card Appearance"],
   "Radio": ["Color Mode"],
   "RangeTrack": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "Rating": ["Color Mode", "Rating Star State"],
   "RechargeCard": ["Avatar Size", "Badge Size", "Color Mode", "Context3", "Context4"],
   "SavingsGoalSummary": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Color Mode", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Semantic Intent"],
   "Screen": ["Color Mode", "Page type"],