jfs-components 0.0.62 → 0.0.63

package/src/components/UpiHandle/UpiHandle.tsx

@@ -1,13 +1,33 @@
-import React, { useState } from 'react'
-import { Pressable, View, Text, Image, type ViewStyle, type TextStyle, type ImageStyle, type ImageSourcePropType } from 'react-native'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import {
+  Pressable,
+  View,
+  Text,
+  Image,
+  Platform,
+  type ViewStyle,
+  type TextStyle,
+  type ImageStyle,
+  type ImageSourcePropType,
+  type StyleProp,
+  type PressableStateCallbackType,
+} from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 
 // Default static asset from the component folder.
 // Consumers can override the image via the `avatarSource` prop if needed.
 const DEFAULT_AVATAR_IMAGE = require('./Image.png')
 
+const IS_WEB = Platform.OS === 'web'
+const IS_IOS = Platform.OS === 'ios'
+const PRESS_DELAY = IS_IOS ? 130 : 0
+
+const pressedOverlayStyle: ViewStyle = { transform: [{ scale: 0.98 }] }
+const focusOverlayStyle: ViewStyle = { borderWidth: 1, borderColor: '#222' }
+
 type UpiHandleProps = {
   label?: string;
   modes?: Record<string, any>;
@@ -21,160 +41,178 @@ type UpiHandleProps = {
   disabled?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
 
+interface UpiHandleTokens {
+  containerStyle: ViewStyle;
+  avatarStyle: ImageStyle;
+  labelStyle: TextStyle;
+  iconColor: string;
+  iconSize: number;
+  iconPlaceholderStyle: ViewStyle;
+}
+
+function resolveUpiHandleTokens(modes: Record<string, any>): UpiHandleTokens {
+  const backgroundColor = (getVariableByName('upiHandle/background', modes) || '#f5f5f5') as string
+  const radius = (getVariableByName('upiHandle/radius', modes) || 99999) as number
+  const paddingLeft = (getVariableByName('upiHandle/padding/left', modes) || 4) as number
+  const paddingRight = (getVariableByName('upiHandle/padding/right', modes) || 14) as number
+  const paddingVertical = (getVariableByName('upiHandle/padding/vertical', modes) || 3) as number
+  const gap = (getVariableByName('upiHandle/gap', modes) || 6) as number
+
+  const avatarSize = (getVariableByName('upiHandle/image/size', modes) || 23) as number
+  const avatarRadius = (getVariableByName('upiHandle/image/radius', modes) || 99999) as number
+
+  const labelColor = (getVariableByName('upiHandle/label/color', modes) || '#0d0d0f') as string
+  const labelFontSize = (getVariableByName('upiHandle/label/fontSize', modes) || 12) as number
+  const labelLineHeight = (getVariableByName('upiHandle/label/lineHeight', modes) || 23) as number
+  const labelFontFamily = (getVariableByName('upiHandle/label/fontFamily', modes) || 'System') as string
+  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes) || 500
+  const labelFontWeight =
+    typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw
+
+  const iconColor = (getVariableByName('upiHandle/icon/color', modes) || '#0d0d0f') as string
+  const iconSize = (getVariableByName('upiHandle/icon/size', modes) || 12) as number
+
+  return {
+    containerStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor,
+      paddingLeft,
+      paddingRight,
+      paddingVertical,
+      borderRadius: radius,
+      gap,
+    },
+    avatarStyle: {
+      width: avatarSize,
+      height: avatarSize,
+      borderRadius: avatarRadius,
+      overflow: 'hidden',
+    },
+    labelStyle: {
+      color: labelColor,
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight,
+      fontFamily: labelFontFamily,
+      fontWeight: labelFontWeight as TextStyle['fontWeight'],
+    },
+    iconColor,
+    iconSize,
+    iconPlaceholderStyle: {
+      width: iconSize,
+      height: iconSize,
+    },
+  }
+}
+
 /**
  * UpiHandle pill that mirrors the Figma "UPI Handle" component.
  *
- * Layout:
- *  - Circular image/avatar on the left
- *  - Label text in the center
- *  - Optional QR-code style icon on the right
- *
- * All visual styling is resolved from Figma variables via `getVariableByName`
- * using a `modes` configuration object, matching the rest of this library.
- *
  * @component
  * @param {Object} props
  * @param {string} [props.label="Label"] - UPI handle text to display.
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
- * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set (e.g. 'ic_qr_code', 'ic_scan_qr_code').
+ * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set.
  * @param {ImageSourcePropType} [props.avatarSource] - Optional custom image source for the avatar.
  * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ *
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes])`.
+ *  - 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 is mirrored on web only (gated setter).
+ *  - Wrapped in `React.memo`.
  */
 function UpiHandle({
   label = 'Label',
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   showIcon = true,
   iconName = 'ic_scan_qr_code',
   avatarSource,
   onPress,
   onClick,
   disabled,
-  accessibilityLabel,
+  // accessibilityLabel is accepted on the type for API back-compat; the
+  // wrapper renders `accessibilityLabel={undefined}` because the inner Text
+  // already carries the label.
+  accessibilityLabel: _accessibilityLabel,
   accessibilityHint,
   ...rest
 }: UpiHandleProps) {
   const { modes: globalModes } = useTokens()
-  const modes = { ...globalModes, ...propModes }
-  // Token‑driven container styling
-  const backgroundColor =
-    getVariableByName('upiHandle/background', modes) || '#f5f5f5'
-  const radius = getVariableByName('upiHandle/radius', modes) || 99999
-  const paddingLeft =
-    getVariableByName('upiHandle/padding/left', modes) || 4
-  const paddingRight =
-    getVariableByName('upiHandle/padding/right', modes) || 14
-  const paddingVertical =
-    getVariableByName('upiHandle/padding/vertical', modes) || 3
-  const gap = getVariableByName('upiHandle/gap', modes) || 6
-
-  // Avatar
-  const avatarSize =
-    getVariableByName('upiHandle/image/size', modes) || 23
-  const avatarRadius =
-    getVariableByName('upiHandle/image/radius', modes) || 99999
-
-  // Label typography
-  const labelColor =
-    getVariableByName('upiHandle/label/color', modes) || '#0d0d0f'
-  const labelFontSize =
-    getVariableByName('upiHandle/label/fontSize', modes) || 12
-  const labelLineHeight =
-    getVariableByName('upiHandle/label/lineHeight', modes) || 23
-  const labelFontFamily =
-    getVariableByName('upiHandle/label/fontFamily', modes) || 'System'
-  const labelFontWeightRaw =
-    getVariableByName('upiHandle/label/fontWeight', modes) || 500
-  const labelFontWeight =
-    typeof labelFontWeightRaw === 'number'
-      ? labelFontWeightRaw.toString()
-      : labelFontWeightRaw
-
-  // Icon sizing
-  const iconColor =
-    getVariableByName('upiHandle/icon/color', modes) || '#0d0d0f'
-  const iconSize =
-    getVariableByName('upiHandle/icon/size', modes) || 12
-
-  const containerStyle: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor,
-    paddingLeft,
-    paddingRight,
-    paddingVertical,
-    borderRadius: radius,
-    gap,
-  }
 
-  const avatarBaseStyle: ImageStyle = {
-    width: avatarSize,
-    height: avatarSize,
-    borderRadius: avatarRadius,
-    overflow: 'hidden',
-  }
+  const modes = useMemo(
+    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+      ? EMPTY_MODES
+      : { ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
 
-  const labelBaseStyle: TextStyle = {
-    color: labelColor,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontFamily: labelFontFamily,
-    fontWeight: labelFontWeight,
-  }
+  const tokens = useMemo(() => resolveUpiHandleTokens(modes), [modes])
 
-  const iconPlaceholderStyle = {
-    width: iconSize,
-    height: iconSize
-  }
-
-  // Use provided accessibilityLabel or fall back to label
-  const defaultAccessibilityLabel = accessibilityLabel || `UPI handle ${label}`
-  const [isPressed, setIsPressed] = useState(false)
+  // Focus is a sustained visible state (web-only). Setter is gated so it
+  // never fires on native.
   const [isFocused, setIsFocused] = useState(false)
-  const pressedStyle = isPressed ? { transform: [{ scale: 0.98 }] } : null
-  const focusStyle = isFocused ? { borderWidth: 1, borderColor: '#222' } : null
+
+  const userHandlersRef = useRef<{
+    onPressIn?: (e: any) => void
+    onPressOut?: (e: any) => void
+    onFocus?: (e: any) => void
+    onBlur?: (e: any) => void
+  }>({})
+  userHandlersRef.current.onPressIn = (rest as any)?.onPressIn
+  userHandlersRef.current.onPressOut = (rest as any)?.onPressOut
+  userHandlersRef.current.onFocus = (rest as any)?.onFocus
+  userHandlersRef.current.onBlur = (rest as any)?.onBlur
+
+  const handlePressIn = useCallback((e: any) => {
+    userHandlersRef.current.onPressIn?.(e)
+  }, [])
+  const handlePressOut = useCallback((e: any) => {
+    userHandlersRef.current.onPressOut?.(e)
+  }, [])
+  const handleFocus = useCallback((e: any) => {
+    if (IS_WEB) setIsFocused(true)
+    userHandlersRef.current.onFocus?.(e)
+  }, [])
+  const handleBlur = useCallback((e: any) => {
+    if (IS_WEB) setIsFocused(false)
+    userHandlersRef.current.onBlur?.(e)
+  }, [])
 
   const handlePress = onPress || onClick
-  const Wrapper: any = (rest as any)?.onPress || handlePress ? Pressable : View
+  const isPressable = !!((rest as any)?.onPress || handlePress)
 
-  return (
-    <Wrapper
-      style={[containerStyle, pressedStyle, focusStyle]}
-      accessibilityRole="text"
-      accessibilityLabel={undefined}
-      {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
-      onPress={handlePress}
-      disabled={(rest as any)?.disabled ?? disabled}
-      onPressIn={(e: any) => {
-        setIsPressed(true)
-          ; (rest as any)?.onPressIn?.(e)
-      }}
-      onPressOut={(e: any) => {
-        setIsPressed(false)
-          ; (rest as any)?.onPressOut?.(e)
-      }}
-      onFocus={(e: any) => {
-        setIsFocused(true)
-          ; (rest as any)?.onFocus?.(e)
-      }}
-      onBlur={(e: any) => {
-        setIsFocused(false)
-          ; (rest as any)?.onBlur?.(e)
-      }}
-      {...rest}
-    >
+  const pressableStyle = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+      tokens.containerStyle,
+      pressed ? pressedOverlayStyle : null,
+      isFocused ? focusOverlayStyle : null,
+    ],
+    [tokens.containerStyle, isFocused]
+  )
+
+  const staticContainerStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [tokens.containerStyle, isFocused ? focusOverlayStyle : null],
+    [tokens.containerStyle, isFocused]
+  )
+
+  const innerContent = (
+    <>
       <Image
         source={avatarSource || DEFAULT_AVATAR_IMAGE}
-        style={avatarBaseStyle}
+        style={tokens.avatarStyle}
         resizeMode="cover"
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       />
       <Text
-        style={labelBaseStyle}
+        style={tokens.labelStyle}
         numberOfLines={1}
         ellipsizeMode="tail"
         accessibilityElementsHidden={true}
@@ -185,18 +223,48 @@ function UpiHandle({
       {showIcon && (
         <Icon
           name={iconName}
-          size={iconSize}
-          color={iconColor}
-          style={iconPlaceholderStyle}
+          size={tokens.iconSize}
+          color={tokens.iconColor}
+          style={tokens.iconPlaceholderStyle}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         />
       )}
-    </Wrapper>
+    </>
   )
-}
-
-export default UpiHandle
 
+  if (isPressable) {
+    return (
+      <Pressable
+        style={pressableStyle}
+        accessibilityRole="text"
+        accessibilityLabel={undefined}
+        {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
+        onPress={handlePress}
+        disabled={(rest as any)?.disabled ?? disabled}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        unstable_pressDelay={PRESS_DELAY}
+        {...rest}
+      >
+        {innerContent}
+      </Pressable>
+    )
+  }
 
+  return (
+    <View
+      style={staticContainerStyle}
+      accessibilityRole="text"
+      accessibilityLabel={undefined}
+      {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
+      {...rest}
+    >
+      {innerContent}
+    </View>
+  )
+}
 
+export default React.memo(UpiHandle)

package/src/components/VStack/VStack.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, StyleProp, ViewStyle, ViewProps } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 
 export interface VStackProps extends ViewProps {
     /**
@@ -48,7 +48,7 @@ export const VStack = ({
     wrap,
     reverse = false,
     as,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     style,
     ...rest
 }: VStackProps) => {

package/src/design-tokens/figma-variables-resolver.ts

@@ -190,14 +190,32 @@ function resolveVariable(variableId, modesByCollectionName = {}) {
   return value;
 }
 
+// Per-object serialization cache. Most callers pass the same `modes` object
+// many times in a single render (e.g. one Button does ~21 token lookups with
+// the same `modes`); with a stable identity from the caller (see
+// `EMPTY_MODES` in `utils/react-utils.ts`) this collapses to a single
+// sort+join per modes object across the whole app.
+const serializedModesCache = new WeakMap();
+
 // Serialize modes object to create a stable cache key
 function serializeModes(modes) {
-  if (!modes || Object.keys(modes).length === 0) {
+  if (!modes || typeof modes !== 'object') {
+    return '';
+  }
+  const cached = serializedModesCache.get(modes);
+  if (cached !== undefined) {
+    return cached;
+  }
+  const keys = Object.keys(modes);
+  if (keys.length === 0) {
+    serializedModesCache.set(modes, '');
     return '';
   }
   // Sort keys for consistent serialization
-  const sortedKeys = Object.keys(modes).sort();
-  return sortedKeys.map(key => `${key}:${modes[key]}`).join('|');
+  keys.sort();
+  const result = keys.map(key => `${key}:${modes[key]}`).join('|');
+  serializedModesCache.set(modes, result);
+  return result;
 }
 
 // Get variable by name with dynamic mode resolution (optimized with O(1) lookup)

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-04-15T11:47:37.104Z
+ * Generated: 2026-04-20T08:18:55.051Z
  */
 
 // Icon name to SVG data mapping

package/src/utils/react-utils.ts

@@ -1,5 +1,21 @@
 import React from 'react';
 
+/**
+ * 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.
+ */
+export const EMPTY_MODES: Readonly<Record<string, any>> = 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.

package/lib/typescript/App.d.ts

@@ -1,2 +0,0 @@
-export default function App(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=App.d.ts.map

package/lib/typescript/index.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/metro.config.d.ts

@@ -1,78 +0,0 @@
-export = config;
-declare const config: import("expo/metro-config").MetroConfig & {
-    reporter: {
-        update(): void;
-    };
-    watchFolders: string[];
-    resolver: {
-        unstable_conditionsByPlatform: {
-            ios: string[];
-            android: string[];
-            web: string[];
-        };
-        resolverMainFields: string[];
-        platforms: string[];
-        assetExts: string[];
-        sourceExts: string[];
-        nodeModulesPaths: string[];
-        blockList: RegExp[];
-    };
-    cacheStores: import("@expo/metro-config/build/file-store").FileStore<any>[];
-    watcher: {
-        additionalExts: string[];
-    };
-    serializer: {
-        isThirdPartyModule(module: {
-            readonly path: string;
-        }): boolean;
-        createModuleIdFactory: () => (path: string, context?: {
-            platform: string;
-            environment?: string;
-        }) => number;
-        getModulesRunBeforeMainModule: () => string[];
-        getPolyfills: ({ platform }: {
-            platform?: null | string;
-        }) => any;
-    };
-    server: {
-        rewriteRequestUrl: (url: string) => string;
-        port: number;
-        unstable_serverRoot: string;
-    };
-    symbolicator: {
-        customizeFrame: ($$PARAM_0$$: {
-            readonly file?: null | string;
-            readonly lineNumber?: null | number;
-            readonly column?: null | number;
-            readonly methodName?: null | string;
-        }) => (null | undefined | {
-            readonly collapse?: boolean;
-        }) | Promise<null | undefined | {
-            readonly collapse?: boolean;
-        }>;
-    };
-    transformerPath: string;
-    transformer: {
-        unstable_renameRequire: false;
-        _expoRouterPath: string | undefined;
-        postcssHash: string | null;
-        browserslistHash: string | null;
-        sassVersion: string | null;
-        reanimatedVersion: string | null;
-        workletsVersion: string | null;
-        _expoRelativeProjectRoot: string;
-        unstable_allowRequireContext: true;
-        allowOptionalDependencies: true;
-        babelTransformerPath: string;
-        asyncRequireModulePath: string;
-        assetRegistryPath: string;
-        enableBabelRuntime: string | undefined;
-        getTransformOptions: () => Promise<{
-            transform: {
-                experimentalImportSupport: true;
-                inlineRequires: false;
-            };
-        }>;
-    };
-};
-//# sourceMappingURL=metro.config.d.ts.map

package/lib/typescript/react-native.config.d.ts

@@ -1,4 +0,0 @@
-export namespace dependency {
-    let assets: string[];
-}
-//# sourceMappingURL=react-native.config.d.ts.map