jfs-components 0.0.62 → 0.0.63

package/lib/commonjs/components/NavArrow/NavArrow.js

@@ -3,91 +3,114 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = NavArrow;
-var _react = _interopRequireDefault(require("react"));
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 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 }; }
+function resolveNavArrowTokens(modes) {
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes) || '#24262b';
+  const widthToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes)) || 6;
+  const heightToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes)) || 10;
+  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes)) || 0;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes) || 'transparent';
+  const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes)) || 4;
+  const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes)) || 8;
+  const strokeWeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/strokeWeight', modes)) || 2;
+  return {
+    iconColor,
+    iconWidth,
+    iconHeight,
+    strokeWeight,
+    widthToken,
+    heightToken,
+    borderRadius,
+    backgroundColor
+  };
+}
+
 /**
  * NavArrow component that displays a chevron arrow for navigation.
  *
  * Renders a stroked SVG chevron whose dimensions and thickness are
- * fully driven by design tokens:
- * - navArrow/icon/color - chevron stroke color
- * - navArrow/icon/width - chevron arm width (horizontal spread)
- * - navArrow/icon/height - chevron arm height (vertical spread)
- * - navArrow/icon/strokeWeight - stroke thickness
- * - navArrow/width - container width
- * - navArrow/height - container height
- * - navArrow/radius - border radius
- * - navArrow/background - background color
+ * fully driven by design tokens.
+ *
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes])` so a parent
+ *    re-render (e.g. from a Section header press) doesn't re-do ~9 token
+ *    lookups per chevron.
+ *  - Container + SVG layout values are derived in a second `useMemo` keyed
+ *    on (tokens, direction, style).
+ *  - Wrapped in `React.memo`.
  */
 function NavArrow({
   direction = 'Back',
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel,
   ...rest
 }) {
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes) || '#24262b';
-  const widthToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes)) || 6;
-  const heightToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes)) || 10;
-  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes)) || 0;
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes) || 'transparent';
-  const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes)) || 4;
-  const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes)) || 8;
-  const strokeWeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/strokeWeight', modes)) || 2;
-  const isDown = direction === 'Down';
-  const containerWidth = isDown ? heightToken : widthToken;
-  const containerHeight = isDown ? widthToken : heightToken;
-  const containerStyle = {
-    width: containerWidth,
-    height: containerHeight,
-    borderRadius,
-    backgroundColor,
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...(style || {})
-  };
+  const tokens = (0, _react.useMemo)(() => resolveNavArrowTokens(modes), [modes]);
+  const computed = (0, _react.useMemo)(() => {
+    const isDown = direction === 'Down';
+    const containerWidth = isDown ? tokens.heightToken : tokens.widthToken;
+    const containerHeight = isDown ? tokens.widthToken : tokens.heightToken;
+    const containerStyle = {
+      width: containerWidth,
+      height: containerHeight,
+      borderRadius: tokens.borderRadius,
+      backgroundColor: tokens.backgroundColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...(style || {})
+    };
+    const chevronW = isDown ? tokens.iconHeight : tokens.iconWidth;
+    const chevronH = isDown ? tokens.iconWidth : tokens.iconHeight;
+    const pad = tokens.strokeWeight / 2;
+    const svgWidth = chevronW + pad * 2;
+    const svgHeight = chevronH + pad * 2;
+    let points;
+    switch (direction) {
+      case 'Forward':
+        points = `${pad},${pad} ${chevronW + pad},${chevronH / 2 + pad} ${pad},${chevronH + pad}`;
+        break;
+      case 'Down':
+        points = `${pad},${pad} ${chevronW / 2 + pad},${chevronH + pad} ${chevronW + pad},${pad}`;
+        break;
+      case 'Back':
+      default:
+        points = `${chevronW + pad},${pad} ${pad},${chevronH / 2 + pad} ${chevronW + pad},${chevronH + pad}`;
+        break;
+    }
+    return {
+      containerStyle,
+      svgWidth,
+      svgHeight,
+      points
+    };
+  }, [tokens, direction, style]);
   const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : direction === 'Forward' ? 'Go forward' : 'Go down');
-  const chevronW = isDown ? iconHeight : iconWidth;
-  const chevronH = isDown ? iconWidth : iconHeight;
-  const pad = strokeWeight / 2;
-  const svgWidth = chevronW + pad * 2;
-  const svgHeight = chevronH + pad * 2;
-  let points;
-  switch (direction) {
-    case 'Forward':
-      points = `${pad},${pad} ${chevronW + pad},${chevronH / 2 + pad} ${pad},${chevronH + pad}`;
-      break;
-    case 'Down':
-      points = `${pad},${pad} ${chevronW / 2 + pad},${chevronH + pad} ${chevronW + pad},${pad}`;
-      break;
-    case 'Back':
-    default:
-      points = `${chevronW + pad},${pad} ${pad},${chevronH / 2 + pad} ${chevronW + pad},${chevronH + pad}`;
-      break;
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: containerStyle,
+    style: computed.containerStyle,
     accessibilityRole: "image",
     accessibilityLabel: defaultAccessibilityLabel,
     ...rest,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
-      width: svgWidth,
-      height: svgHeight,
-      viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+      width: computed.svgWidth,
+      height: computed.svgHeight,
+      viewBox: `0 0 ${computed.svgWidth} ${computed.svgHeight}`,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Polyline, {
-        points: points,
-        stroke: iconColor,
-        strokeWidth: strokeWeight,
+        points: computed.points,
+        stroke: tokens.iconColor,
+        strokeWidth: tokens.strokeWeight,
         strokeLinecap: "round",
         strokeLinejoin: "round",
         fill: "none"
       })
     })
   });
-}
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(NavArrow);

package/lib/commonjs/components/NoteInput/NoteInput.js

@@ -7,6 +7,7 @@ exports.default = NoteInput;
 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 _jsxRuntime = require("react/jsx-runtime");
 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); }
 /**
@@ -17,7 +18,7 @@ function NoteInput({
   value = '',
   placeholder = 'Add note',
   onChangeText,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   textStyle,
   state: explicitState,

package/lib/commonjs/components/Nudge/Nudge.js

@@ -21,7 +21,7 @@ function Nudge({
   buttonSlot,
   startSlot,
   children,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const {

package/lib/commonjs/components/Numpad/Numpad.js

@@ -7,6 +7,7 @@ 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("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -31,7 +32,7 @@ function shuffleArray(arr) {
  * @param {NumpadProps} props
  */
 function Numpad({
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   onKeyPress,
   showDecimal = true,
   shuffle = true,

package/lib/commonjs/components/OTP/OTP.js

@@ -25,7 +25,7 @@ function OTP({
   isInvalid = false,
   allowedPattern = DIGITS_ONLY,
   autoFocus = false,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   supportText,
   supportTextStatus

package/lib/commonjs/components/PaymentFeedback/PaymentFeedback.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+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); }
@@ -20,7 +21,7 @@ function PaymentFeedback({
   showDetails = true,
   iconName = 'ic_confirm',
   renderMedia,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const {

package/lib/commonjs/components/Popup/Popup.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _VStack = _interopRequireDefault(require("../VStack/VStack"));
+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); }
@@ -18,7 +19,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(function Popup({
   onOpenChange,
   trigger,
   children,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   closeOnBackdropPress = true,
   backdropColor = '#000000',
   backdropOpacity: maxBackdropOpacity = 0.5,

package/lib/commonjs/components/ProductLabel/ProductLabel.js

@@ -8,12 +8,13 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ProductLabel({
   label = 'Gold',
   imageSource,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   const gap = (0, _figmaVariablesResolver.getVariableByName)('productLabel/gap', modes) ?? 8;

package/lib/commonjs/components/ProgressBadge/ProgressBadge.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -29,7 +30,7 @@ function ProgressBadge({
   taskName = 'Live price: [price] (00:43)',
   iconName = 'ic_live',
   value = 0,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   textStyle: textStyleOverride,
   accessibilityLabel,

package/lib/commonjs/components/RadioButton/RadioButton.js

@@ -8,6 +8,7 @@ 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 _jsxRuntime = require("react/jsx-runtime");
 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); }
 // ---------------------------------------------------------------------------
@@ -22,7 +23,7 @@ function RadioButton({
   selected = false,
   disabled = false,
   onPress,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   testID
 }) {

package/lib/commonjs/components/RechargeCard/RechargeCard.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _ButtonGroup = _interopRequireDefault(require("../ButtonGroup/ButtonGroup"));
 var _AvatarGroup = _interopRequireDefault(require("../AvatarGroup/AvatarGroup"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
 var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -24,7 +25,7 @@ function RechargeCard({
   disclaimer = "Data only pack (No Voice & No SMS)\nVoice: NA | SMS: NA...",
   subscriptionContent,
   actions,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   // Container Tokens

package/lib/commonjs/components/Screen/Screen.js

@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 const Screen = ({
   children,
-  modes: propModes = {},
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style
 }) => {
   const {