jfs-components 0.0.62 → 0.0.64

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

@@ -2,6 +2,22 @@
 
 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 = 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/src/components/Avatar/Avatar.d.ts

@@ -3,12 +3,6 @@ import { View, type ImageSourcePropType } from 'react-native';
 /**
  * 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"
@@ -17,24 +11,24 @@ import { View, type ImageSourcePropType } from 'react-native';
  * @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.
  */
 export type AvatarProps = {
     monogram?: string;
-    style?: "Image" | "Monogram";
+    style?: 'Image' | 'Monogram';
     modes?: Record<string, any>;
     imageSource?: ImageSourcePropType | string;
     accessibilityLabel?: string;
     onPress?: () => void;
     disabled?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel'>;
-declare function Avatar({ monogram, style, modes, imageSource, accessibilityLabel, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
-export default Avatar;
+declare function Avatar({ monogram, style, modes, imageSource, accessibilityLabel: _accessibilityLabel, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Avatar>;
+export default _default;
 //# sourceMappingURL=Avatar.d.ts.map

package/lib/typescript/src/components/BottomNavItem/BottomNavItem.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { type AccessibilityState, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils';
 type BottomNavItemProps = SafePressableProps & {
@@ -21,14 +22,17 @@ type BottomNavItemProps = SafePressableProps & {
 /**
  * Bottom navigation item with icon and label stacked vertically.
  *
- * All visual attributes resolve from Figma tokens via `getVariableByName`,
- * with the `modes` object passed straight through.
- *
- * @component
- * @param {Object} props
- * @param {string} [props.iconName="ic_home"] - Icon name from the registry.
- * ...
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes, disabled, iconColor, iconSize])`.
+ *  - Press visual via Pressable's `({ pressed })` style callback.
+ *  - Hover and focus state are mirrored on web only (gated setters).
+ *  - The previous version had no-op `onPressIn`/`onPressOut` handlers that
+ *    forwarded to user callbacks but did nothing else — they were still
+ *    creating fresh closures every render and forcing Pressable to re-bind.
+ *    Now stable via a ref-backed wrapper.
+ *  - Wrapped in `React.memo`.
  */
 declare function BottomNavItem({ iconName, label, modes: propModes, onPress, disabled, style, labelStyle, iconColor: iconColorOverride, iconSize: iconSizeOverride, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: BottomNavItemProps): import("react/jsx-runtime").JSX.Element;
-export default BottomNavItem;
+declare const _default: React.MemoExoticComponent<typeof BottomNavItem>;
+export default _default;
 //# sourceMappingURL=BottomNavItem.d.ts.map

package/lib/typescript/src/components/Button/Button.d.ts

@@ -59,7 +59,24 @@ export type ButtonProps = SafePressableProps & {
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label or children text
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ *
+ * Performance notes:
+ *  - The pressed visual (background/border swap) is applied through the
+ *    Pressable `style` callback, NOT a mirrored React state. This avoids the
+ *    flicker that scrolling parents previously caused: when a ScrollView
+ *    cancels a touch the host view simply reverts its style without React
+ *    rendering. On iOS we additionally use `unstable_pressDelay` so the
+ *    pressed visual is never even applied during a scroll-cancelled touch.
+ *  - Hover state is only mirrored into React state on web (where hover events
+ *    fire). On native the setter call is gated out so the component never
+ *    re-renders due to hover.
+ *  - All design-token reads are folded into a single `useMemo` keyed on
+ *    `(modes, disabled)`.
+ *  - The component is wrapped in `React.memo`. Callers that want to take
+ *    advantage of this should pass stable `modes` (the default `EMPTY_MODES`
+ *    is already stable) and stable callback props.
  */
-declare function Button({ label, children, renderContent, leading, trailing, icon, modes, onPress, disabled, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonImpl({ label, children, renderContent, leading, trailing, icon, modes, onPress, disabled, style, labelStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const Button: React.MemoExoticComponent<typeof ButtonImpl>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

package/lib/typescript/src/components/IconButton/IconButton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { type AccessibilityState, type StyleProp, type ViewStyle } from 'react-native';
 import { type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils';
 type IconButtonProps = SafePressableProps & {
@@ -33,35 +34,17 @@ type IconButtonProps = SafePressableProps & {
 /**
  * IconButton component that displays an icon within a pressable button container.
  *
- * This component displays an icon within a styled button container that can be pressed.
- * 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., {"Button / Size": "M", "Appearance": "high"})
- * @param {Function} [props.onPress] - Callback function called when the button is pressed
- * @param {boolean} [props.disabled=false] - Whether the button is disabled
- * @param {Object} [props.style] - Additional styles for the container
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
- * @param {Object} [props.accessibilityState] - Additional accessibility state information
- *
- * @example
- * ```jsx
- * // Default icon button
- * <IconButton modes={{}} />
- *
- * // Custom icon with size mode
- * <IconButton iconName="ic_rupee" modes={{"Button / Size": "M"}} />
- *
- * // With appearance mode
- * <IconButton modes={{"Appearance": "high"}} onPress={() => console.log('pressed')} />
- *
- * // With accessibility label
- * <IconButton iconName="ic_search" accessibilityLabel={undefined} accessibilityHint="Opens the search screen" />
- * ```
+ * Performance notes:
+ *  - Token reads collapsed into a single `useMemo([modes, disabled, isToggle, isActive])`.
+ *  - Press visual goes through Pressable's `({ pressed })` style callback so
+ *    a scroll-cancelled touch never schedules a React render. iOS gets
+ *    `unstable_pressDelay={130}`.
+ *  - Hover and focus state are mirrored on web only (gated setters).
+ *  - The previous version had a redundant `manualPressStyle` (a duplicate
+ *    pressed transform mirrored via React state) — removed.
+ *  - Wrapped in `React.memo`.
  */
 declare function IconButton({ iconName, modes, onPress, disabled, style, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, isToggle, activeIcon, inactiveIcon, isActive, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
-export default IconButton;
+declare const _default: React.MemoExoticComponent<typeof IconButton>;
+export default _default;
 //# sourceMappingURL=IconButton.d.ts.map

package/lib/typescript/src/components/IconCapsule/IconCapsule.d.ts

@@ -9,31 +9,23 @@ type IconCapsuleProps = {
 /**
  * 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.
  */
-declare function IconCapsule({ iconName, modes: propModes, accessibilityLabel, accessibilityRole, ...rest }: IconCapsuleProps): import("react/jsx-runtime").JSX.Element;
-export default IconCapsule;
+declare function IconCapsule({ iconName, modes: propModes, accessibilityLabel: _accessibilityLabel, accessibilityRole, style: styleProp, ...rest }: IconCapsuleProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof IconCapsule>;
+export default _default;
 //# sourceMappingURL=IconCapsule.d.ts.map

package/lib/typescript/src/components/InputSearch/InputSearch.d.ts

@@ -1,8 +1,13 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { type StyleProp, type ViewStyle, type TextStyle, type TextInputProps as RNTextInputProps } from 'react-native';
 export type InputSearchProps = {
     supportText?: boolean;
     supportTextLabel?: string;
+    /**
+     * Icon name from the icon registry to render inside the support text
+     * (e.g. 'ic_info', 'ic_cart'). Defaults to 'ic_info'.
+     */
+    supportTextIcon?: string;
     modes?: Record<string, any>;
     containerStyle?: StyleProp<ViewStyle>;
     placeholder?: string;
@@ -15,6 +20,6 @@ export type InputSearchProps = {
     inputStyle?: StyleProp<TextStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;
-};
-export default function InputSearch({ supportText, supportTextLabel, modes, containerStyle, placeholder, value, onChangeText, onFocus, onBlur, leading, trailing, inputStyle, ...rest }: InputSearchProps): import("react/jsx-runtime").JSX.Element;
+} & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
+export default function InputSearch({ supportText, supportTextLabel, supportTextIcon, modes, containerStyle, placeholder, value, onChangeText, onFocus, onBlur, leading, trailing, inputStyle, ...rest }: InputSearchProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=InputSearch.d.ts.map

package/lib/typescript/src/components/ListItem/ListItem.d.ts

@@ -54,7 +54,20 @@ type ListItemProps = {
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses title and supportText
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  * @param {Object} [props.accessibilityState] - Additional accessibility state information
+ *
+ * Performance notes:
+ *  - All token reads are folded into a single `useMemo([modes])`.
+ *  - The pressed visual is applied via Pressable's `style={({pressed}) => ...}`
+ *    callback so RN updates the host view directly — no React render is
+ *    scheduled by a touch. On iOS the touch is additionally delayed via
+ *    `unstable_pressDelay={130}` so a scroll-cancelled tap never even
+ *    transiently applies the pressed style. This is the fix for the
+ *    "People / Setup card flicker during scroll" report.
+ *  - User-supplied event handlers are read through a ref so the wrapper
+ *    handlers stay referentially stable across renders.
+ *  - The component is wrapped in `React.memo`.
  */
-declare function ListItem({ layout, title, supportText, showSupportText, leading, supportSlot, endSlot, navArrow, modes, onPress, style, contentStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItemImpl({ layout, title, supportText, showSupportText, leading, supportSlot, endSlot, navArrow, modes, onPress, style, contentStyle, accessibilityLabel, accessibilityHint, accessibilityState, webAccessibilityProps, ...rest }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+declare const ListItem: React.MemoExoticComponent<typeof ListItemImpl>;
 export default ListItem;
 //# sourceMappingURL=ListItem.d.ts.map

package/lib/typescript/src/components/NavArrow/NavArrow.d.ts

@@ -15,16 +15,17 @@ type NavArrowProps = {
  * 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`.
  */
-export default function NavArrow({ direction, modes, style, accessibilityLabel, ...rest }: NavArrowProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function NavArrow({ direction, modes, style, accessibilityLabel, ...rest }: NavArrowProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof NavArrow>;
+export default _default;
 //# sourceMappingURL=NavArrow.d.ts.map

package/lib/typescript/src/components/Section/Section.d.ts

@@ -18,34 +18,14 @@ type SectionProps = {
      */
     webAccessibilityProps?: WebAccessibilityProps;
 } & React.ComponentProps<typeof View>;
-/**
- * Section component that mirrors the Figma "Section" component.
- *
- * This component supports:
- *  - **header** with title, support text, and optional chevron icon
- *  - **slot** for custom content (typically ListItem components)
- *  - **design-token driven styling** via `getVariableByName` and `modes`
- *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "slot" → `slot`
- *
- * @component
- * @param {Object} props
- * @param {string} [props.title='Section title'] - Section title text
- * @param {string} [props.supportText='Section support text'] - Section support text
- * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text
- * @param {React.ReactNode} [props.slot] - Optional custom slot for content area (Figma Slot "slot")
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
- * @param {Function} [props.onPress] - Callback function called when the header is pressed
- * @param {Object} [props.style] - Optional container style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the section. If not provided, uses title
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
- */
-declare function Section({ title, supportText, showSupportText, slot, slotDirection, modes, onPress, style, accessibilityLabel, accessibilityHint, webAccessibilityProps, ...rest }: SectionProps): import("react/jsx-runtime").JSX.Element;
+declare function Section({ title, supportText, showSupportText, slot, slotDirection, modes, onPress, style, accessibilityLabel: _accessibilityLabel, accessibilityHint, webAccessibilityProps, ...rest }: SectionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Section {
     var Bento: typeof SectionBento;
 }
+type BentoToggleRenderState = {
+    expanded: boolean;
+    toggle: () => void;
+};
 type SectionBentoProps = {
     navSlot?: React.ReactNode;
     upiSlot?: React.ReactNode;
@@ -57,29 +37,44 @@ type SectionBentoProps = {
      * Web-specific accessibility props (only used on web platform)
      */
     webAccessibilityProps?: WebAccessibilityProps;
+    /**
+     * Total cell count visible when collapsed (real items + the toggle cell).
+     * Defaults to {@link SLOT_GRID_MAX_COLUMNS} (4) so the collapsed state fills
+     * exactly one row. When `navSlot.length <= collapsedCount`, expansion is
+     * disabled (no toggle injected, no animation wrappers — identical to the
+     * legacy behavior for back-compat).
+     */
+    collapsedCount?: number;
+    /**
+     * Uncontrolled initial expanded state. Ignored when `expanded` is provided.
+     * Defaults to `false`.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controlled expanded state. When provided, `onExpandedChange` should also
+     * be provided so the component can request changes.
+     */
+    expanded?: boolean;
+    /**
+     * Called when the user taps the toggle. Required in controlled mode; ignored
+     * in uncontrolled mode unless you want to observe the change.
+     */
+    onExpandedChange?: (next: boolean) => void;
+    /** Label shown on the toggle cell when collapsed. Default `'More'`. */
+    toggleMoreLabel?: string;
+    /** Label shown on the toggle cell when expanded. Default `'Less'`. */
+    toggleLessLabel?: string;
+    /** Icon name shown on the toggle when collapsed. Default `'ic_chevron_down'`. */
+    toggleMoreIcon?: string;
+    /** Icon name shown on the toggle when expanded. Default `'ic_chevron_up'`. */
+    toggleLessIcon?: string;
+    /**
+     * Escape hatch: render a custom toggle cell instead of the default ListItem.
+     * The provided node is rendered in the toggle's grid slot. Wire `toggle()` to
+     * any tap interaction inside it. Height + per-cell animations still apply.
+     */
+    renderToggle?: (state: BentoToggleRenderState) => React.ReactNode;
 } & React.ComponentProps<typeof View>;
-/**
- * Section.Bento component that mirrors the Figma "Section.Bento" component.
- *
- * This component supports:
- *  - **navSlot** for navigation items (typically ListItem components in vertical layout)
- *  - **upiSlot** for UPI handles (typically UpiHandle components)
- *  - **design-token driven styling** via `getVariableByName` and `modes`
- *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "Nav wrap" → `navSlot`
- *  - Slot "UPI wrap" → `upiSlot`
- *
- * @component
- * @param {Object} props
- * @param {React.ReactNode} [props.navSlot] - Optional custom slot for navigation items (Figma Slot "Nav wrap")
- * @param {React.ReactNode} [props.upiSlot] - Optional custom slot for UPI handles (Figma Slot "UPI wrap")
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
- * @param {Object} [props.style] - Optional container style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the section
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
- */
-declare function SectionBento({ navSlot, upiSlot, modes, style, accessibilityLabel, accessibilityHint, ...rest }: SectionBentoProps): import("react/jsx-runtime").JSX.Element;
+declare function SectionBento({ navSlot, upiSlot, modes, style, accessibilityLabel: _accessibilityLabel, accessibilityHint, collapsedCount, defaultExpanded, expanded: controlledExpanded, onExpandedChange, toggleMoreLabel, toggleLessLabel, toggleMoreIcon, toggleLessIcon, renderToggle, ...rest }: SectionBentoProps): import("react/jsx-runtime").JSX.Element;
 export default Section;
 //# sourceMappingURL=Section.d.ts.map

package/lib/typescript/src/components/UpiHandle/UpiHandle.d.ts

@@ -15,25 +15,26 @@ type UpiHandleProps = {
 /**
  * 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`.
  */
-declare function UpiHandle({ label, modes: propModes, showIcon, iconName, avatarSource, onPress, onClick, disabled, accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
-export default UpiHandle;
+declare function UpiHandle({ label, modes: propModes, showIcon, iconName, avatarSource, onPress, onClick, disabled, accessibilityLabel: _accessibilityLabel, accessibilityHint, ...rest }: UpiHandleProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof UpiHandle>;
+export default _default;
 //# sourceMappingURL=UpiHandle.d.ts.map

package/lib/typescript/src/icons/registry.d.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-20T20:41:14.535Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/lib/typescript/src/utils/react-utils.d.ts

@@ -1,4 +1,19 @@
 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 declare const EMPTY_MODES: Readonly<Record<string, any>>;
 /**
  * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -13,6 +13,7 @@
   "files": [
     "src",
     "lib",
+    "CHANGELOG.md",
     "!**/__tests__",
     "!**/*.stories.*",
     "!**/test-setup.*",
@@ -25,13 +26,8 @@
     "!**/.token-metadata.json"
   ],
   "scripts": {
-    "android": "yarn run prestorybook && react-native run-android",
-    "ios": "yarn run prestorybook && react-native run-ios",
-    "start": "react-native start",
     "test": "jest",
     "lint": "eslint .",
-    "prestorybook": "rnstl",
-    "storybook": "echo 'React Native Storybook is embedded in the app. Run: yarn ios or yarn android'",
     "build-react": "webpack --mode production",
     "start-react": "webpack-dev-server --config ./webpack.config.js --mode development",
     "extract-tokens": "node scripts/extract-component-tokens.js",
@@ -40,6 +36,8 @@
     "storybook-web": "storybook dev -p 6006",
     "build:storybook-web": "storybook build",
     "deploy:storybook": "vercel --prod",
+    "example": "yarn --cwd example start",
+    "example:install": "yarn --cwd example install",
     "postinstall": "patch-package",
     "icons:generate": "node scripts/generate-icon-registry.js",
     "prepare": "bob build",

package/src/components/Accordion/Accordion.tsx

@@ -14,7 +14,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 
 // Enable LayoutAnimation on Android
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
@@ -81,7 +81,7 @@ function Accordion({
   onExpandedChange,
   disabled = false,
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel,
   accessibilityHint,

package/src/components/ActionFooter/ActionFooter.tsx

@@ -6,7 +6,7 @@ import {
   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'
 
 export type ActionFooterProps = {
@@ -59,7 +59,7 @@ export type ActionFooterProps = {
  */
 function ActionFooter({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel = undefined,
 }: ActionFooterProps) {

package/src/components/ActionTile/ActionTile.tsx

@@ -3,6 +3,7 @@ import { View, Text, type ViewStyle, type TextStyle, TouchableOpacity } from 're
 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'
 
 export type ActionTileProps = {
     /** Label text, e.g. "Cards" */
@@ -30,7 +31,7 @@ export type ActionTileProps = {
 export default function ActionTile({
     label = 'Cards',
     icon,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     style,
     onPress,
 }: ActionTileProps) {

package/src/components/AmountInput/AmountInput.tsx

@@ -4,6 +4,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'
 
 export type AmountInputProps = {
     /**
@@ -28,7 +29,7 @@ export type AmountInputProps = {
 export default function AmountInput({
     moneyValueSlot,
     noteInputSlot,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     style,
 }: AmountInputProps) {
     const { modes: globalModes } = useTokens()

package/src/components/AppBar/AppBar.tsx

@@ -4,7 +4,7 @@ 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'
 
 type AppBarType = 'MainPage' | 'SubPage'
 
@@ -53,7 +53,7 @@ export default function AppBar({
   leadingSlot,
   middleSlot,
   actionsSlot,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   onLeadingPress,
   style,
   accessibilityLabel,