jfs-components 0.1.28 → 0.1.32

package/lib/commonjs/components/ValueBackMetric/ValueBackMetric.js

@@ -0,0 +1,219 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(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 _Link = _interopRequireDefault(require("../Link/Link"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TITLE_LINE_HEIGHT_RATIO = 1.2;
+const VALUE_LINE_HEIGHT_RATIO = 1.2;
+const CAPTION_LINE_HEIGHT_RATIO = 1.5;
+
+// The Figma node binds the header-icon size and the per-part font sizes/weights
+// to `valueBackMetric/*` variables, but those tokens are NOT in the committed
+// variables snapshot (`npm run tokens -- find valueBackMetric` → no matches).
+// They also intentionally differ from the `metricdata/*` typography defaults
+// (e.g. `metricdata/value` resolves to 20px/700, whereas this component's value
+// is 16px/500). So the sizes/weights below are encoded as literal constants
+// matching the Figma design exactly. Colours, gaps and padding DO exist as real
+// `metricdata/*` tokens (and match the design), so those resolve through
+// `getVariableByName` and stay themeable.
+const TITLE_FONT_SIZE = 12;
+const TITLE_FONT_WEIGHT = '500';
+const VALUE_FONT_SIZE = 16;
+const VALUE_FONT_WEIGHT = '500';
+const CAPTION_FONT_SIZE = 12;
+const CAPTION_FONT_WEIGHT = '400';
+const FONT_FAMILY = 'JioType Var';
+const CARD_BACKGROUND = '#ffffff';
+const CARD_MIN_HEIGHT = 82;
+const ICON_SIZE = 18;
+// Figma renders the header glyph flush (all `icon/padding/*` tokens are 0); the
+// shared Icon pulls padding from those tokens, so mirror MetricData and zero it
+// explicitly to keep the icon flush against the title.
+const ICON_PADDING_RESET = {
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  paddingBottom: 0
+};
+/**
+ * ValueBackMetric — a compact, left-aligned "value back" card.
+ *
+ * Stacks a branded header row (icon + `title`, e.g. "JioPoints"), a prominent
+ * `value`, a muted `caption`, and an optional bottom `linkLabel` (e.g. "Earn").
+ * `value`, `caption` and `linkLabel` each render only when provided; the header
+ * (icon + title) always shows.
+ *
+ * Colours, gaps and padding resolve from the `metricdata/*` tokens; the header
+ * glyph from the `icon/*` tokens (default 18px gold); the link entirely from
+ * the `link/*` + `text/foreground` tokens via the shared {@link Link}, with
+ * `Text Appearance: Secondary` and `Text Sizes: Small` seeded so it renders
+ * purple at 12px like the design (caller `modes` win). The per-part font
+ * sizes/weights come from the Figma `valueBackMetric/*` variables, which are
+ * not yet in the committed token snapshot, so they are encoded as constants
+ * matching the design.
+ *
+ * @example
+ * ```tsx
+ * <ValueBackMetric
+ *   title="JioPoints"
+ *   value="Value"
+ *   caption="Earn 10 point with UPI"
+ *   linkLabel="Earn"
+ *   onPress={() => navigation.navigate('ValueBack')}
+ *   onLinkPress={() => navigation.navigate('EarnPoints')}
+ * />
+ * ```
+ */
+function ValueBackMetric({
+  icon = 'ic_rupee_coin',
+  title = 'JioPoints',
+  value,
+  caption,
+  linkLabel,
+  onLinkPress,
+  onPress,
+  disabled,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  accessibilityLabel
+}) {
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/title/color', modes) ?? '#000000';
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/value/color', modes) ?? '#000000';
+  const captionColor = (0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/color', modes) ?? '#777777';
+  // The design's link is purple (`text/foreground` under `Text Appearance:
+  // Secondary`) at 12px (`link/fontSize` under `Text Sizes: Small`), while the
+  // header icon keeps the default gold `icon/color`. Seed only the link's
+  // modes; caller-supplied modes win.
+  const linkModes = _react.default.useMemo(() => ({
+    'Text Appearance': 'Secondary',
+    'Text Sizes': 'Small',
+    ...modes
+  }), [modes]);
+
+  // The header glyph is token-driven: `icon/color` (gold by default, retinted
+  // via `AppearanceBrand`) and `icon/size` (18px). Passing them explicitly — as
+  // MetricData does — makes the glyph deterministic instead of relying on the
+  // shared Icon's internal token lookups.
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', modes) ?? '#ad8444';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', modes) ?? ICON_SIZE;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/gap', modes) ?? 4;
+  const valueWrapGap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/valueWrap/gap', modes) ?? 4;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/horizontal', modes) ?? 10;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/vertical', modes) ?? 10;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    minHeight: CARD_MIN_HEIGHT,
+    backgroundColor: CARD_BACKGROUND
+  };
+  const titleTextStyle = {
+    color: titleColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: TITLE_FONT_SIZE,
+    fontWeight: TITLE_FONT_WEIGHT,
+    lineHeight: TITLE_FONT_SIZE * TITLE_LINE_HEIGHT_RATIO
+  };
+  const valueTextStyle = {
+    color: valueColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: VALUE_FONT_SIZE,
+    fontWeight: VALUE_FONT_WEIGHT,
+    lineHeight: VALUE_FONT_SIZE * VALUE_LINE_HEIGHT_RATIO
+  };
+  const captionTextStyle = {
+    color: captionColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: CAPTION_FONT_SIZE,
+    fontWeight: CAPTION_FONT_WEIGHT,
+    lineHeight: CAPTION_FONT_SIZE * CAPTION_LINE_HEIGHT_RATIO
+  };
+
+  // Mirrors the Figma swap slot, whose preferred instances are `Icon` and
+  // `Image`. A registry name renders the token-driven `Icon` (18px, gold,
+  // flush — all from the `icon/*` tokens); a custom node (`<Icon/>`,
+  // `<Image/>`, anything) renders as-is with `modes` cascaded into it, so an
+  // Icon instance follows the icon tokens while an Image keeps its own sizing.
+  const iconNode = icon == null ? null : typeof icon === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    iconName: icon,
+    size: iconSize,
+    color: iconColor,
+    modes: modes,
+    style: ICON_PADDING_RESET
+  }) : (0, _reactUtils.cloneChildrenWithModes)(icon, modes);
+  const hasValue = value !== undefined && value !== null && value !== '';
+  const hasCaption = caption !== undefined && caption !== '';
+  const resolvedLabel = accessibilityLabel ?? ([title, typeof value === 'string' ? value : undefined, caption, linkLabel].filter(Boolean).join(', ') || undefined);
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: valueWrapGap
+      },
+      children: [iconNode, title !== undefined && title !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [titleTextStyle, titleStyle],
+        children: title
+      }) : null]
+    }), hasValue || hasCaption ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 4
+      },
+      children: [hasValue ? typeof value === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [valueTextStyle, valueStyle],
+        children: value
+      }) : value : null, hasCaption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [captionTextStyle, captionStyle],
+        children: caption
+      }) : null]
+    }) : null, linkLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+      text: linkLabel,
+      autolayout: "Hug",
+      modes: linkModes,
+      ...(onLinkPress ? {
+        onPress: onLinkPress
+      } : null)
+    }) : null]
+  });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      ...(resolvedLabel !== undefined ? {
+        accessibilityLabel: resolvedLabel
+      } : null),
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessible: true,
+    ...(resolvedLabel !== undefined ? {
+      accessibilityLabel: resolvedLabel
+    } : null),
+    children: content
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(ValueBackMetric);

package/lib/commonjs/components/index.js

@@ -207,6 +207,12 @@ Object.defineProperty(exports, "CarouselCardAccounts", {
     return _CarouselCardAccounts.default;
   }
 });
+Object.defineProperty(exports, "CategoryCard", {
+  enumerable: true,
+  get: function () {
+    return _CategoryCard.default;
+  }
+});
 Object.defineProperty(exports, "CcCard", {
   enumerable: true,
   get: function () {
@@ -285,6 +291,12 @@ Object.defineProperty(exports, "ContentSheet", {
     return _ContentSheet.default;
   }
 });
+Object.defineProperty(exports, "CounterBadge", {
+  enumerable: true,
+  get: function () {
+    return _CounterBadge.default;
+  }
+});
 Object.defineProperty(exports, "CoverageBarComparison", {
   enumerable: true,
   get: function () {
@@ -369,6 +381,12 @@ Object.defineProperty(exports, "ExpandableCheckbox", {
     return _ExpandableCheckbox.default;
   }
 });
+Object.defineProperty(exports, "FavoriteToggle", {
+  enumerable: true,
+  get: function () {
+    return _FavoriteToggle.default;
+  }
+});
 Object.defineProperty(exports, "FilterBar", {
   enumerable: true,
   get: function () {
@@ -417,6 +435,12 @@ Object.defineProperty(exports, "HStack", {
     return _HStack.default;
   }
 });
+Object.defineProperty(exports, "HelloJioInput", {
+  enumerable: true,
+  get: function () {
+    return _HelloJioInput.default;
+  }
+});
 Object.defineProperty(exports, "HeroSection", {
   enumerable: true,
   get: function () {
@@ -987,6 +1011,12 @@ Object.defineProperty(exports, "VStack", {
     return _VStack.default;
   }
 });
+Object.defineProperty(exports, "ValueBackMetric", {
+  enumerable: true,
+  get: function () {
+    return _ValueBackMetric.default;
+  }
+});
 Object.defineProperty(exports, "addToast", {
   enumerable: true,
   get: function () {
@@ -1053,6 +1083,7 @@ var _CardFeedback = _interopRequireDefault(require("./CardFeedback/CardFeedback"
 var _CardFinancialCondition = _interopRequireDefault(require("./CardFinancialCondition/CardFinancialCondition"));
 var _CardInsight = _interopRequireDefault(require("./CardInsight/CardInsight"));
 var _CcCard = _interopRequireDefault(require("./CcCard/CcCard"));
+var _CategoryCard = _interopRequireDefault(require("./CategoryCard/CategoryCard"));
 var _Disclaimer = _interopRequireDefault(require("./Disclaimer/Disclaimer"));
 var _Divider = _interopRequireDefault(require("./Divider/Divider"));
 var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
@@ -1079,6 +1110,7 @@ var _AllocationComparisonChart = _interopRequireDefault(require("./AllocationCom
 var _MonthlyStatusGrid = _interopRequireWildcard(require("./MonthlyStatusGrid/MonthlyStatusGrid"));
 var _Gauge = _interopRequireDefault(require("./Gauge/Gauge"));
 var _HeroSection = _interopRequireDefault(require("./HeroSection/HeroSection"));
+var _HelloJioInput = _interopRequireDefault(require("./HelloJioInput/HelloJioInput"));
 var _HoldingsCard = _interopRequireDefault(require("./HoldingsCard/HoldingsCard"));
 var _HStack = _interopRequireDefault(require("./HStack/HStack"));
 var _Icon = _interopRequireDefault(require("./Icon/Icon"));
@@ -1182,5 +1214,8 @@ var _SegmentedControl = _interopRequireDefault(require("./SegmentedControl/Segme
 var _Toggle = _interopRequireDefault(require("./Toggle/Toggle"));
 var _AutoplayControl = _interopRequireDefault(require("./AutoplayControl/AutoplayControl"));
 var _NumberPagination = _interopRequireDefault(require("./NumberPagination/NumberPagination"));
+var _CounterBadge = _interopRequireDefault(require("./CounterBadge/CounterBadge"));
+var _FavoriteToggle = _interopRequireDefault(require("./FavoriteToggle/FavoriteToggle"));
+var _ValueBackMetric = _interopRequireDefault(require("./ValueBackMetric/ValueBackMetric"));
 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); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -325,6 +325,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
   "CardProviderInfo": ["AppearanceBrand", "Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "Carousel": ["peekOffset"],
   "CarouselCardAccounts": ["peekOffset"],
+  "CategoryCard": ["AppearanceBrand", "Badge Size", "Color Mode", "Emphasis", "Radius"],
   "CcCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context 8", "Context2", "Context4", "context5", "context7", "Emphasis", "List Item Style", "ListItem State", "NavArrow Direction", "Page type", "Profile Card Appearance", "Radius", "Selectable", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
   "Checkbox": ["Color Mode"],
   "CheckboxGroup": ["Color Mode"],
@@ -354,6 +355,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
   "FullscreenModal": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context5", "Emphasis", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
   "Gauge": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "FormField States", "Semantic Intent", "Status"],
   "Grid": ["Background", "Color Mode", "Context", "Padding", "Page type", "Slot gap"],
+  "HelloJioInput": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis"],
   "HeroSection": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "context 9", "context7", "Emphasis", "FormField States", "InputState", "Page type", "Status"],
   "HoldingsCard": ["AppearanceBrand", "Color Mode"],
   "HStack": ["Context", "Padding", "Page type", "Slot gap"],
@@ -422,6 +424,7 @@ const FIGMA_COMPONENT_MODES = exports.FIGMA_COMPONENT_MODES = {
   "TransactionBubble": ["Color Mode", "context 10", "Context2", "Context3", "context5", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance", "Transaction Status"],
   "TransactionStatus": ["Transaction Status"],
   "UpiHandle": ["Color Mode", "context 10", "Profile Card Appearance", "UPI Handle Image"],
+  "ValueBackMetric": ["AppearanceBrand", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Profile Card Appearance", "Text Appearance", "Text Sizes", "Weight"],
   "VStack": ["Context", "Padding", "Page type", "Slot gap"]
 };