jfs-components 0.1.35 → 0.1.48

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

@@ -4,62 +4,97 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+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 _Link = _interopRequireDefault(require("../Link/Link"));
+var _Text = _interopRequireDefault(require("../Text/Text"));
 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); }
 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;
+const TEXT_WRAP_GAP = 4;
+
 // 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.
+// shared Icon pulls padding from those tokens, so zero it explicitly.
 const ICON_PADDING_RESET = {
   paddingLeft: 0,
   paddingRight: 0,
   paddingTop: 0,
   paddingBottom: 0
 };
+// The `valueBackMetric/*` layout + typography tokens are bound on the Figma
+// node but are NOT yet in the committed variables snapshot
+// (`npm run tokens -- find valueBackMetric` → no matches). Colours and the
+// header-row gap do exist as `metricdata/*` / `icon/*` tokens. Until the
+// export is re-synced, `getVariableByName` returns undefined for the
+// valueBackMetric names and the Figma-node fallbacks below take over.
+function resolveTokens(modes) {
+  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';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/title/fontfamily', modes) ?? 'JioType Var';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/title/fontsize', modes) ?? 12;
+  const titleFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/title/fontweight', modes) ?? 500);
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/value/fontfamily', modes) ?? 'JioType Var';
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/value/fontsize', modes) ?? 16;
+  // Figma binds the value face to JioType Medium; there is no dedicated
+  // valueBackMetric/value/fontweight token yet, so fall back to 500.
+  const valueFontWeight = '500';
+  const captionFontFamily = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/caption/fontfamily', modes) ?? 'JioType Var';
+  const captionFontSize = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/caption/fontsize', modes) ?? 12;
+  const captionFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/caption/fontweight', modes) ?? 400);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/gap', modes) ?? 4;
+  const valueWrapGap = (0, _figmaVariablesResolver.getVariableByName)('metricdata/valueWrap/gap', modes) ?? 4;
+  // Design padding is 0 — do NOT fall back to metricdata/padding (10).
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/padding/horizontal', modes) ?? 0;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/padding/vertical', modes) ?? 0;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('valueBackMetric/background/color', modes) ?? '#ffffff';
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('icon/color', modes) ?? '#ad8444';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('icon/size', modes) ?? ICON_SIZE;
+  return {
+    titleColor,
+    titleFontFamily,
+    titleFontSize,
+    titleFontWeight,
+    valueColor,
+    valueFontFamily,
+    valueFontSize,
+    valueFontWeight,
+    captionColor,
+    captionFontFamily,
+    captionFontSize,
+    captionFontWeight,
+    gap,
+    valueWrapGap,
+    paddingHorizontal,
+    paddingVertical,
+    backgroundColor,
+    iconColor,
+    iconSize
+  };
+}
+
 /**
  * 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.
+ * `value`, a muted `caption`, and an optional bottom CTA (`linkLabel` / `link`
+ * slot, e.g. "Earn"). `value`, `caption` and the CTA 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.
+ * Colours resolve from the `metricdata/*` tokens; the header glyph from the
+ * `icon/*` tokens (default 18px gold); the CTA from the shared {@link Text}
+ * with `Text Appearance: Secondary` + `Text Sizes: Small` seeded so it renders
+ * purple at 12px like the design (caller `modes` win). Layout/typography
+ * follow the Figma `valueBackMetric/*` variables — not yet in the committed
+ * token snapshot, so they resolve through `getVariableByName` with Figma-node
+ * fallbacks.
  *
  * @example
  * ```tsx
@@ -79,6 +114,7 @@ function ValueBackMetric({
   value,
   caption,
   linkLabel,
+  link,
   onLinkPress,
   onPress,
   disabled,
@@ -89,82 +125,81 @@ function ValueBackMetric({
   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(() => ({
+  const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
+
+  // Figma Code-Connects the CTA to Text (not Link): purple, no underline.
+  // Seed Secondary + Small so it matches the design; caller modes win.
+  const linkModes = (0, _react.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,
+    gap: tokens.gap,
+    paddingHorizontal: tokens.paddingHorizontal,
+    paddingVertical: tokens.paddingVertical,
     minHeight: CARD_MIN_HEIGHT,
-    backgroundColor: CARD_BACKGROUND
+    backgroundColor: tokens.backgroundColor
   };
   const titleTextStyle = {
-    color: titleColor,
-    fontFamily: FONT_FAMILY,
-    fontSize: TITLE_FONT_SIZE,
-    fontWeight: TITLE_FONT_WEIGHT,
-    lineHeight: TITLE_FONT_SIZE * TITLE_LINE_HEIGHT_RATIO
+    color: tokens.titleColor,
+    fontFamily: tokens.titleFontFamily,
+    fontSize: tokens.titleFontSize,
+    fontWeight: tokens.titleFontWeight,
+    lineHeight: tokens.titleFontSize * 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
+    color: tokens.valueColor,
+    fontFamily: tokens.valueFontFamily,
+    fontSize: tokens.valueFontSize,
+    fontWeight: tokens.valueFontWeight,
+    lineHeight: tokens.valueFontSize * 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
+    color: tokens.captionColor,
+    fontFamily: tokens.captionFontFamily,
+    fontSize: tokens.captionFontSize,
+    fontWeight: tokens.captionFontWeight,
+    lineHeight: tokens.captionFontSize * 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,
+    size: tokens.iconSize,
+    color: tokens.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 hasLinkSlot = link !== undefined && link !== null && link !== false;
+  const hasLinkLabel = linkLabel !== undefined && linkLabel !== '';
   const resolvedLabel = accessibilityLabel ?? ([title, typeof value === 'string' ? value : undefined, caption, linkLabel].filter(Boolean).join(', ') || undefined);
+
+  // Seed Secondary + Small into the CTA slot too, so a bare `<Text text="Earn" />`
+  // matches the design without the consumer re-seeding. Child-level modes still win.
+  const ctaNode = hasLinkSlot ? (0, _reactUtils.cloneChildrenWithModes)(link, linkModes) : hasLinkLabel ? onLinkPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: onLinkPress,
+    accessibilityRole: "link",
+    accessibilityLabel: linkLabel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      text: linkLabel,
+      textAlign: "Left",
+      modes: linkModes
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    text: linkLabel,
+    textAlign: "Left",
+    modes: linkModes
+  }) : null;
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: valueWrapGap
+        gap: tokens.valueWrapGap
       },
       children: [iconNode, title !== undefined && title !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [titleTextStyle, titleStyle],
@@ -174,7 +209,7 @@ function ValueBackMetric({
       style: {
         flexDirection: 'column',
         alignItems: 'flex-start',
-        gap: 4
+        gap: TEXT_WRAP_GAP
       },
       children: [hasValue ? typeof value === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [valueTextStyle, valueStyle],
@@ -183,14 +218,7 @@ function ValueBackMetric({
         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]
+    }) : null, ctaNode]
   });
   if (onPress) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {

package/lib/commonjs/components/index.js

@@ -489,6 +489,12 @@ Object.defineProperty(exports, "InstitutionBadge", {
     return _InstitutionBadge.default;
   }
 });
+Object.defineProperty(exports, "JioDot", {
+  enumerable: true,
+  get: function () {
+    return _AppBar.JioDot;
+  }
+});
 Object.defineProperty(exports, "LazyList", {
   enumerable: true,
   get: function () {
@@ -1062,7 +1068,7 @@ Object.defineProperty(exports, "useToast", {
 var _AccountCard = _interopRequireDefault(require("./AccountCard/AccountCard"));
 var _ActionFooter = _interopRequireDefault(require("./ActionFooter/ActionFooter"));
 var _Attached = _interopRequireDefault(require("./Attached/Attached"));
-var _AppBar = _interopRequireDefault(require("./AppBar/AppBar"));
+var _AppBar = _interopRequireWildcard(require("./AppBar/AppBar"));
 var _Avatar = _interopRequireDefault(require("./Avatar/Avatar"));
 var _AvatarGroup = _interopRequireDefault(require("./AvatarGroup/AvatarGroup"));
 var _Badge = _interopRequireDefault(require("./Badge/Badge"));