jfs-components 0.0.61 → 0.0.63

package/lib/commonjs/components/IconCapsule/IconCapsule.js

@@ -4,94 +4,98 @@ 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 _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+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 }; }
+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 resolveIconCapsuleTokens(modes) {
+  const size = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/size', modes) || 42;
+  const radiusRaw = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/radius', modes) || 9999;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/background', modes) || '#cfa159';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)';
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/size', modes) || 1;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/color', modes) || '#0f0d0a';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/size', modes) || 18;
+
+  // 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,
+      backgroundColor,
+      overflow: 'hidden',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    iconColor,
+    iconSize
+  };
+}
+
 /**
  * IconCapsule component that displays an icon within a circular or rounded container.
- * 
- * This component displays an icon (default: ic_card) within a styled capsule container.
+ *
  * All styling values are resolved from Figma design tokens using the provided modes.
- * 
+ *
  * @component
  * @param {Object} props - Component props
  * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
- * 
- * @example
- * ```jsx
- * // Default icon (ic_card)
- * <IconCapsule modes={{}} />
- * 
- * // Custom icon
- * <IconCapsule iconName="ic_rupee" modes={{}} />
- * 
- * // With appearance mode
- * <IconCapsule modes={{"Appearance": "Secondary"}} />
- * 
- * // With accessibility label
- * <IconCapsule iconName="ic_card" accessibilityLabel={undefined} />
- * ```
+ *
+ * Performance notes:
+ *  - All token reads collapsed into a single `useMemo([modes])`. The merged
+ *    `(globalModes + propModes)` object is also memoized so downstream
+ *    `getVariableByName` calls hit the resolver's per-modes-object cache.
+ *  - Wrapped in `React.memo`; with the shared `EMPTY_MODES` default the
+ *    common path benefits from full memoization.
  */
 function IconCapsule({
-  iconName = "ic_card",
-  modes: propModes = {},
-  accessibilityLabel,
-  accessibilityRole = "image",
+  iconName = 'ic_card',
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  // accessibilityLabel is accepted on the type for API back-compat but the
+  // component intentionally renders `accessibilityLabel={undefined}` (icons
+  // are decorative; the surrounding component owns the label).
+  accessibilityLabel: _accessibilityLabel,
+  accessibilityRole = 'image',
+  style: styleProp,
   ...rest
 }) {
   const {
     modes: globalModes
   } = (0, _JFSThemeProvider.useTokens)();
-  const modes = {
+
+  // Memoize the merged modes object so its identity is stable across renders
+  // when neither the global nor the prop modes change. This is what lets the
+  // resolver's WeakMap cache hit on every subsequent `getVariableByName`.
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
     ...globalModes,
     ...propModes
-  };
-  // Resolve design tokens using the provided modes
-  const size = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/size', modes) || 42;
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/radius', modes) || 9999;
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/background', modes) || '#cfa159';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/size', modes) || 1;
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/color', modes) || '#0f0d0a';
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/size', modes) || 18;
-
-  // 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,
-    backgroundColor: backgroundColor,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center'
-  };
-
-  // Generate default accessibility label from icon name if not provided
-  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveIconCapsuleTokens(modes), [modes]);
+  const composedStyle = (0, _react.useMemo)(() => styleProp ? [tokens.containerStyle, styleProp] : tokens.containerStyle, [tokens.containerStyle, styleProp]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: containerStyle,
+    style: composedStyle,
     accessibilityRole: accessibilityRole,
     accessibilityLabel: undefined,
     ...rest,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: iconName,
-      size: iconSize,
-      color: iconColor,
+      size: tokens.iconSize,
+      color: tokens.iconColor,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no"
     })
   });
 }
-var _default = exports.default = IconCapsule;
+var _default = exports.default = /*#__PURE__*/_react.default.memo(IconCapsule);

package/lib/commonjs/components/InputSearch/InputSearch.js

@@ -7,6 +7,7 @@ exports.default = InputSearch;
 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 _TextInput = _interopRequireDefault(require("../TextInput/TextInput"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,7 +19,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 function SupportText({
   label = "Support Text",
-  modes = {},
+  iconName = "ic_info",
+  modes = _reactUtils.EMPTY_MODES,
   style
 }) {
   // Resolve variables
@@ -37,7 +39,7 @@ function SupportText({
       gap: gap
     }, style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: "ic_info",
+      name: iconName,
       size: iconSize,
       color: foreground
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -55,7 +57,8 @@ function SupportText({
 function InputSearch({
   supportText = true,
   supportTextLabel = "Support Text",
-  modes = {},
+  supportTextIcon = "ic_info",
+  modes = _reactUtils.EMPTY_MODES,
   containerStyle,
   placeholder = "Search",
   value,
@@ -136,6 +139,7 @@ function InputSearch({
       ...rest
     }), supportText && /*#__PURE__*/(0, _jsxRuntime.jsx)(SupportText, {
       label: supportTextLabel,
+      iconName: supportTextIcon,
       modes: componentModes
     })]
   });

package/lib/commonjs/components/LazyList/LazyList.js

@@ -31,7 +31,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function LazyList({
   listGroupsSlot,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel = undefined,
   accessibilityHint,

package/lib/commonjs/components/LinearMeter/LinearMeter.js

@@ -7,12 +7,13 @@ 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 _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const LinearMeterLabel = ({
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   ...rest
 }) => {
@@ -37,7 +38,7 @@ const LinearMeterLabel = ({
 };
 const LinearMeter = ({
   value = 0,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   trackStyle,
   indicatorStyle,

package/lib/commonjs/components/ListGroup/ListGroup.js

@@ -44,7 +44,7 @@ function ListGroup({
   label = '',
   listGroupSlot,
   children,
-  modes = {},
+  modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel,
   accessibilityHint,
@@ -84,8 +84,7 @@ function ListGroup({
   // propagate modes.  Both props are interchangeable; when both are provided
   // the slot items render first, followed by children.
   const rawItems = [...(listGroupSlot ? (0, _reactUtils.flattenChildren)(listGroupSlot) : []), ...(children ? (0, _reactUtils.flattenChildren)(children) : [])];
-  const keyedItems = _react.default.Children.toArray(rawItems);
-  const processedSlot = keyedItems.length > 0 ? (0, _reactUtils.cloneChildrenWithModes)(keyedItems, modes) : null;
+  const processedSlot = rawItems.length > 0 ? (0, _reactUtils.cloneChildrenWithModes)(rawItems, modes) : null;
 
   // Use provided accessibilityLabel or fall back to label
   const defaultAccessibilityLabel = accessibilityLabel || label || "List group";