jfs-components 0.0.61 → 0.0.63

package/lib/commonjs/utils/react-utils.js

@@ -3,17 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.EMPTY_MODES = void 0;
 exports.cloneChildrenWithModes = cloneChildrenWithModes;
 exports.flattenChildren = flattenChildren;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * A shared, frozen empty modes object.
+ *
+ * Components that accept a `modes` prop should use this as the default value
+ * instead of the inline `{}` literal. The literal allocates a new object on
+ * every render, which:
+ *   1. Forces `React.memo` shallow comparisons to fail.
+ *   2. Forces `useMemo`/`useEffect` deps that include `modes` to re-run.
+ *   3. Forces the design-token resolver to re-serialize the modes object on
+ *      every call (see `serializeModes` in `figma-variables-resolver.ts`).
+ *
+ * Sharing a single frozen object across the tree makes all of those checks
+ * O(1) identity comparisons in the common "no modes provided" path.
+ */
+const EMPTY_MODES = exports.EMPTY_MODES = Object.freeze({});
+
 /**
  * Helper function to recursively clone children and pass modes prop to components that accept it.
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
 function cloneChildrenWithModes(children, modes, forcedModes) {
   const result = [];
-  _react.default.Children.forEach(children, child => {
+
+  // toArray assigns stable keys to sibling lists and flattens top-level Fragments.
+  // Raw arrays from flattenChildren / concat have no keys; forEach alone does not add them.
+  _react.default.Children.forEach(_react.default.Children.toArray(children), child => {
     if (! /*#__PURE__*/_react.default.isValidElement(child)) {
       if (child !== null && child !== undefined) {
         result.push(child);
@@ -25,7 +45,7 @@ function cloneChildrenWithModes(children, modes, forcedModes) {
     // so recurse into their children and process each one individually.
     if (child.type === _react.default.Fragment) {
       const fragment = child;
-      result.push(...cloneChildrenWithModes(fragment.props.children, modes, forcedModes));
+      result.push(...cloneChildrenWithModes(_react.default.Children.toArray(fragment.props.children ?? null), modes, forcedModes));
       return;
     }
     const childChildren = child.props?.children;
@@ -53,7 +73,10 @@ function cloneChildrenWithModes(children, modes, forcedModes) {
       modes: mergedModes
     }, processedChildren));
   });
-  return result;
+
+  // Ensure the returned list always has keys for each entry (cloneElement can drop
+  // keys in some paths; Views that render this array require keyed siblings).
+  return _react.default.Children.toArray(result);
 }
 
 /**

package/lib/module/components/Accordion/Accordion.js

@@ -5,7 +5,7 @@ import { View, Text, Pressable, LayoutAnimation, Platform, UIManager } from 'rea
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 
 // Enable LayoutAnimation on Android
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,7 +45,7 @@ function Accordion({
   onExpandedChange,
   disabled = false,
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel,
   accessibilityHint,

package/lib/module/components/ActionFooter/ActionFooter.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
 import IconButton from '../IconButton/IconButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -35,7 +35,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function ActionFooter({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel = undefined
 }) {

package/lib/module/components/ActionTile/ActionTile.js

@@ -5,6 +5,7 @@ import { View, Text, TouchableOpacity } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import IconCapsule from '../IconCapsule/IconCapsule';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ActionTile component from Figma design.
@@ -15,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ActionTile({
   label = 'Cards',
   icon,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   onPress
 }) {

package/lib/module/components/AmountInput/AmountInput.js

@@ -6,6 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import MoneyValue from '../MoneyValue/MoneyValue';
 import NoteInput from '../NoteInput/NoteInput';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AmountInput component that combines MoneyValue and NoteInput from Figma design.
@@ -15,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function AmountInput({
   moneyValueSlot,
   noteInputSlot,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style
 }) {
   const {

package/lib/module/components/AppBar/AppBar.js

@@ -5,14 +5,14 @@ import { View, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import NavArrow from '../NavArrow/NavArrow';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function AppBar({
   type = 'MainPage',
   leadingSlot,
   middleSlot,
   actionsSlot,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   onLeadingPress,
   style,
   accessibilityLabel,

package/lib/module/components/Avatar/Avatar.js

@@ -1,20 +1,102 @@
 "use strict";
 
-import React from 'react';
-import { Pressable, View, Image, Text } from 'react-native';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Pressable, View, Image, Text, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png');
 
+// ---------------------------------------------------------------------------
+// Module-scope constants — never re-allocated per render.
+// ---------------------------------------------------------------------------
+
+const IS_WEB = Platform.OS === 'web';
+const IS_IOS = Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+
+// Pressed visual is applied through Pressable's style callback so the host
+// view updates without scheduling a React render.
+const pressedOverlayStyle = {
+  transform: [{
+    scale: 0.98
+  }]
+};
+const focusOverlayStyle = {
+  borderColor: '#222',
+  borderWidth: 1
+};
+const imageContainerStyle = {
+  width: '100%',
+  height: '100%',
+  overflow: 'hidden'
+};
+const imageBaseStyle = {
+  width: '100%',
+  height: '100%'
+};
+const monogramContainerStyle = {
+  width: '100%',
+  height: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingVertical: 7,
+  paddingHorizontal: 5
+};
+
+// ---------------------------------------------------------------------------
+// Token resolution — collapsed into one useMemo per (modes, style) tuple.
+// ---------------------------------------------------------------------------
+
+function resolveAvatarTokens(modes, isMonogram) {
+  const size = getVariableByName('avatar/size', modes) || 29;
+  const radiusRaw = getVariableByName('avatar/radius', modes) || 9999;
+  const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff';
+  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const borderSize = getVariableByName('avatar/border/size', modes) || 1;
+  const labelColor = getVariableByName('avatar/label/color', modes) || '#5c00b5';
+  const labelFontSize = getVariableByName('avatar/label/fontSize', modes) || 12;
+  const labelLineHeight = getVariableByName('avatar/label/lineHeight', modes) || 14;
+  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes) || 500;
+  const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
+  const labelFontFamily = getVariableByName('avatar/label/fontFamily', modes) || 'Inter';
+
+  // 9999 is the design-token sentinel for "perfect circle"
+  const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw;
+  return {
+    containerStyle: {
+      width: size,
+      height: size,
+      borderRadius,
+      borderWidth: borderSize,
+      borderColor: borderColor,
+      overflow: 'hidden',
+      ...(isMonogram ? {
+        backgroundColor: backgroundColor
+      } : {})
+    },
+    imageContainerStyle: {
+      ...imageContainerStyle,
+      borderRadius
+    },
+    imageStyle: {
+      ...imageBaseStyle,
+      borderRadius
+    },
+    monogramTextStyle: {
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight,
+      fontWeight: labelFontWeight,
+      fontFamily: labelFontFamily,
+      color: labelColor,
+      textAlign: 'center'
+    }
+  };
+}
+
 /**
  * Avatar component that displays either an image or a monogram.
- * 
- * This component supports two styles:
- * - Image: Displays a user's profile picture
- * - Monogram: Displays user initials in a circular background
- * 
- * All styling values are resolved from Figma design tokens using the provided modes.
- * 
+ *
  * @component
  * @param {Object} props - Component props
  * @param {string} [props.monogram="MS"] - The initials to display when style is "Monogram"
@@ -22,182 +104,122 @@ const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png');
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Avatar Size": "M"})
  * @param {string} [props.imageSource] - Optional image source for Image style (defaults to built-in image)
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses monogram or "User avatar"
- * 
- * @example
- * ```jsx
- * // Image style
- * <Avatar style="Image" modes={{"Avatar Size": "M"}} />
- * 
- * // Monogram style
- * <Avatar style="Monogram" monogram="JD" modes={{"Avatar Size": "L"}} />
- * ```
+ *
+ * Performance notes:
+ *  - All token reads are folded into a single `useMemo([modes, isMonogram])`.
+ *  - Press visual goes through Pressable's `({ pressed })` style callback so
+ *    a scroll-cancelled touch never schedules a React render. iOS gets
+ *    `unstable_pressDelay={130}` for additional safety inside scrollables.
+ *  - Focus state stays in React (it's a sustained visual) but the setter is
+ *    gated to web only, where focus events actually fire.
  */
 
 function Avatar({
-  monogram = "MS",
-  style = "Image",
-  modes = {},
+  monogram = 'MS',
+  style = 'Image',
+  modes = EMPTY_MODES,
   imageSource,
-  accessibilityLabel,
+  // accessibilityLabel is accepted on the type for API back-compat but the
+  // component intentionally renders `accessibilityLabel={undefined}` on the
+  // wrapper (the inner Text/Image carry the label instead).
+  accessibilityLabel: _accessibilityLabel,
   ...rest
 }) {
-  // Resolve design tokens using the provided modes
-  const size = getVariableByName('avatar/size', modes) || 29;
-  const radius = getVariableByName('avatar/radius', modes) || 9999;
-  const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff';
-  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = getVariableByName('avatar/border/size', modes) || 1;
-  const labelColor = getVariableByName('avatar/label/color', modes) || '#5c00b5';
-  const labelFontSize = getVariableByName('avatar/label/fontSize', modes) || 12;
-  const labelLineHeight = getVariableByName('avatar/label/lineHeight', modes) || 14;
-  const labelFontWeight = getVariableByName('avatar/label/fontWeight', modes) || 500;
-  const labelFontFamily = getVariableByName('avatar/label/fontFamily', modes) || 'Inter';
+  const isMonogram = style === 'Monogram';
+  const tokens = useMemo(() => resolveAvatarTokens(modes, isMonogram), [modes, isMonogram]);
 
-  // Convert radius to React Native format (if 9999, use size/2 for perfect circle)
-  const borderRadius = radius === 9999 ? size / 2 : radius;
-
-  // Container style
-  const containerStyle = {
-    width: size,
-    height: size,
-    borderRadius: borderRadius,
-    borderWidth: borderSize,
-    borderColor: borderColor,
-    overflow: 'hidden',
-    ...(style === 'Monogram' ? {
-      backgroundColor: backgroundColor
-    } : {})
-  };
+  // Focus is a sustained visible state — keep mirroring on web; gate the
+  // setter so it never fires on native (where focus events don't fire on
+  // these elements anyway).
+  const [isFocused, setIsFocused] = useState(false);
 
-  // Image container style
-  const imageContainerStyle = {
-    width: '100%',
-    height: '100%',
-    borderRadius: borderRadius,
-    overflow: 'hidden'
-  };
-
-  // Image style
-  const imageStyle = {
-    width: '100%',
-    height: '100%',
-    borderRadius: borderRadius
-  };
+  // Mirror user handlers in a ref so our wrappers can stay referentially
+  // stable across renders.
+  const userHandlersRef = useRef({});
+  userHandlersRef.current.onPressIn = rest?.onPressIn;
+  userHandlersRef.current.onPressOut = rest?.onPressOut;
+  userHandlersRef.current.onFocus = rest?.onFocus;
+  userHandlersRef.current.onBlur = rest?.onBlur;
+  const handlePressIn = useCallback(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = useCallback(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const handleFocus = useCallback(e => {
+    if (IS_WEB) setIsFocused(true);
+    userHandlersRef.current.onFocus?.(e);
+  }, []);
+  const handleBlur = useCallback(e => {
+    if (IS_WEB) setIsFocused(false);
+    userHandlersRef.current.onBlur?.(e);
+  }, []);
+  const pressableStyle = useCallback(({
+    pressed
+  }) => [tokens.containerStyle, pressed ? pressedOverlayStyle : null, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
+  const staticContainerStyle = useMemo(() => [tokens.containerStyle, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
 
-  // Monogram container style
-  const monogramContainerStyle = {
-    width: '100%',
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 7,
-    paddingHorizontal: 5
-  };
-
-  // Monogram text style
-  const monogramTextStyle = {
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight,
-    fontFamily: labelFontFamily,
-    color: labelColor,
-    textAlign: 'center'
-  };
-
-  // Generate default accessibility label
-  const defaultAccessibilityLabel = accessibilityLabel || (style === "Monogram" ? `Avatar with initials ${monogram}` : "User avatar");
-  // Interaction placeholders for press/focus
-  const [isPressed, setIsPressed] = React.useState(false);
-  const [isFocused, setIsFocused] = React.useState(false);
-  const pressedStyle = isPressed ? {
-    transform: [{
-      scale: 0.98
-    }]
-  } : null;
-  const focusStyle = isFocused ? {
-    borderColor: '#222',
-    borderWidth: 1
-  } : null;
-  if (style === "Monogram") {
-    const Wrapper = rest?.onPress ? Pressable : View;
-    return /*#__PURE__*/_jsx(Wrapper, {
-      style: [containerStyle, pressedStyle, focusStyle],
+  // The inner content varies; everything else (wrapper, handlers, style) is shared.
+  const innerContent = isMonogram ? /*#__PURE__*/_jsx(View, {
+    style: monogramContainerStyle,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: tokens.monogramTextStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: monogram
+    })
+  }) : /*#__PURE__*/_jsx(ImageContent, {
+    tokens: tokens,
+    imageSource: imageSource
+  });
+  const isPressable = !!rest?.onPress;
+  if (isPressable) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: pressableStyle,
       accessibilityRole: "image",
       accessibilityLabel: undefined,
-      onPressIn: e => {
-        setIsPressed(true);
-        rest?.onPressIn?.(e);
-      },
-      onPressOut: e => {
-        setIsPressed(false);
-        rest?.onPressOut?.(e);
-      },
-      onFocus: e => {
-        setIsFocused(true);
-        rest?.onFocus?.(e);
-      },
-      onBlur: e => {
-        setIsFocused(false);
-        rest?.onBlur?.(e);
-      },
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      unstable_pressDelay: PRESS_DELAY,
       ...rest,
-      children: /*#__PURE__*/_jsx(View, {
-        style: monogramContainerStyle,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: monogramTextStyle,
-          accessibilityElementsHidden: true,
-          importantForAccessibility: "no",
-          children: monogram
-        })
-      })
+      children: innerContent
     });
   }
+  return /*#__PURE__*/_jsx(View, {
+    style: staticContainerStyle,
+    accessibilityRole: "image",
+    accessibilityLabel: undefined,
+    ...rest,
+    children: innerContent
+  });
+}
 
-  // Normalize imageSource: if it's a string (URL), convert to { uri: string } format
-  // Otherwise, use it as-is (could be require() result or already { uri: ... } object)
-  const normalizedImageSource = React.useMemo(() => {
+// Memoize the image normalization so a string URL that doesn't change
+// doesn't keep producing a new `{ uri }` object every render.
+function ImageContent({
+  tokens,
+  imageSource
+}) {
+  const normalizedImageSource = useMemo(() => {
     if (!imageSource) return avatarImage;
     if (typeof imageSource === 'string') {
-      // If it's a string, treat it as a URL
       return {
         uri: imageSource
       };
     }
-    // Otherwise, use it as-is (could be require() result or { uri: ... } object)
     return imageSource;
   }, [imageSource]);
-  const Wrapper = rest?.onPress ? Pressable : View;
-  return /*#__PURE__*/_jsx(Wrapper, {
-    style: [containerStyle, pressedStyle, focusStyle],
-    accessibilityRole: "image",
-    accessibilityLabel: undefined,
-    onPressIn: e => {
-      setIsPressed(true);
-      rest?.onPressIn?.(e);
-    },
-    onPressOut: e => {
-      setIsPressed(false);
-      rest?.onPressOut?.(e);
-    },
-    onFocus: e => {
-      setIsFocused(true);
-      rest?.onFocus?.(e);
-    },
-    onBlur: e => {
-      setIsFocused(false);
-      rest?.onBlur?.(e);
-    },
-    ...rest,
-    children: /*#__PURE__*/_jsx(View, {
-      style: imageContainerStyle,
-      children: /*#__PURE__*/_jsx(Image, {
-        source: normalizedImageSource,
-        resizeMode: "cover",
-        style: imageStyle,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no"
-      })
+  return /*#__PURE__*/_jsx(View, {
+    style: tokens.imageContainerStyle,
+    children: /*#__PURE__*/_jsx(Image, {
+      source: normalizedImageSource,
+      resizeMode: "cover",
+      style: tokens.imageStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
     })
   });
 }
-export default Avatar;
+export default /*#__PURE__*/React.memo(Avatar);

package/lib/module/components/AvatarGroup/AvatarGroup.js

@@ -5,10 +5,10 @@ import { View, Platform } from 'react-native';
 import MaskedView from '@react-native-masked-view/masked-view';
 import Svg, { Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 function AvatarGroup({
-  modes = {},
+  modes = EMPTY_MODES,
   children,
   style,
   ...rest

package/lib/module/components/Badge/Badge.js

@@ -3,10 +3,11 @@
 import React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 function Badge({
   label = 'Label',
-  modes = {},
+  modes = EMPTY_MODES,
   onPress,
   accessibilityLabel,
   style,

package/lib/module/components/Balance/Balance.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import MoneyValue from '../MoneyValue/MoneyValue';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Balance component that displays a title and a monetary value.
@@ -18,7 +19,7 @@ function Balance({
   title = "Total owed to people",
   amount = "500",
   currency = "₹",
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   children
 }) {

package/lib/module/components/BottomNav/BottomNav.js

@@ -5,6 +5,7 @@ import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import BottomNavItem from '../BottomNavItem/BottomNavItem';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Bottom navigation bar using a composite component pattern (Slots).
@@ -21,7 +22,7 @@ function BottomNav({
   value,
   onChange,
   children,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   accessibilityLabel = undefined,
   accessibilityHint,