jfs-components 0.0.62 → 0.0.64

package/lib/module/components/SegmentedControl/SegmentedControl.js

@@ -3,12 +3,13 @@
 import React, { useState, useCallback } from 'react';
 import { View, Pressable, Text } 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 SegmentedControlSegment({
   label,
   active,
   onPress,
-  modes = {}
+  modes = EMPTY_MODES
 }) {
   const resolvedModes = {
     ...modes,
@@ -89,7 +90,7 @@ function SegmentedControl({
   selectedKey: controlledSelectedKey,
   defaultSelectedKey,
   onSelectionChange,
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   const isControlled = controlledSelectedKey !== undefined;

package/lib/module/components/StatItem/StatItem.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * StatItem displays a label/value pair with the value in a large, bold style.
@@ -14,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function StatItem({
   label = 'Purity verified by NABL',
   value = '99.99%',
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   const gap = getVariableByName('statItem/gap', modes) ?? 2;

package/lib/module/components/StatusHero/StatusHero.js

@@ -6,6 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import IconCapsule from '../IconCapsule/IconCapsule';
 import MoneyValue from '../MoneyValue/MoneyValue';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * StatusHero component that displays a hero section for payment/transaction status screens.
@@ -35,7 +36,7 @@ export default function StatusHero({
   iconName = 'ic_confirm',
   value = '50',
   currency = 'INR',
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style
 }) {
   const {

package/lib/module/components/Stepper/Step.js

@@ -5,10 +5,11 @@ import { View, Text } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { StepLabel } from './StepLabel';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Step({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   index = 0,
   connectorStyle,

package/lib/module/components/Stepper/StepLabel.js

@@ -3,11 +3,12 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StepLabel({
   title = 'Stepper Item',
   supportingText,
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   // Title styles

package/lib/module/components/Stepper/Stepper.js

@@ -5,11 +5,12 @@ import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { Step } from './Step';
 import { StepLabel } from './StepLabel';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export { Step, StepLabel };
 export default function Stepper({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   // Stepper container styles

package/lib/module/components/SupportText/SupportText.js

@@ -5,6 +5,7 @@ import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import SupportTextIcon from './SupportTextIcon';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * SupportText component displaying a status icon and label.
@@ -14,7 +15,7 @@ function SupportText({
   status = 'Neutral',
   iconSlot,
   textSlot,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style
 }) {
   const {

package/lib/module/components/SupportText/SupportTextIcon.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const STATUS_ICON_MAP = {
   Neutral: 'ic_info',
@@ -14,7 +15,7 @@ const STATUS_ICON_MAP = {
 };
 function SupportTextIcon({
   status = 'Neutral',
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   const iconName = STATUS_ICON_MAP[status] || 'ic_info';

package/lib/module/components/SwappableAmount/SwappableAmount.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Button from '../Button/Button';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function SwappableAmount({
   value = '49g',
@@ -12,7 +13,7 @@ function SwappableAmount({
   amountLabel = '₹5100',
   onSchedulePress,
   onAmountPress,
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   const gap = getVariableByName('swappableAmount/gap', modes) ?? 24;

package/lib/module/components/Tabs/TabItem.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Individual tab item used inside the Tabs container.
@@ -17,7 +18,7 @@ function TabItem({
   label = 'Tab item',
   active = false,
   onPress,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   labelStyle,
   accessibilityLabel

package/lib/module/components/Tabs/Tabs.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { ScrollView, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import TabItem from './TabItem';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Tabs container component that lays out TabItem children horizontally.
@@ -28,7 +29,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function Tabs({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   scrollable = false,
   style
 }) {

package/lib/module/components/Text/Text.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { Text as RNText } 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 TEXT_ALIGN_MAP = {
   Left: 'left',
@@ -11,7 +12,7 @@ const TEXT_ALIGN_MAP = {
 function Text({
   text = 'Korem ipsum ',
   textAlign = 'Left',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   numberOfLines
 }) {

package/lib/module/components/TextInput/TextInput.js

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Pressable, View, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 
 /**
  * TextInput component that mirrors the Figma "textInput" component.
@@ -102,7 +102,7 @@ function TextInput({
   leadingIconName = 'ic_search',
   leading,
   trailing,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   inputStyle,
   onFocus,
@@ -256,7 +256,7 @@ function TextInputSearch({
   value = '',
   onChangeText,
   leading,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   inputStyle,
   accessibilityLabel,

package/lib/module/components/ThreadHero/ThreadHero.js

@@ -3,6 +3,7 @@
 import React, { isValidElement, cloneElement } from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ThreadHero component displaying a central identity with avatar, title, subtitle, and caption.
@@ -12,7 +13,7 @@ export default function ThreadHero({
   subtitle = 'Banking name: SHIVASHANKAR RAJAN',
   caption,
   renderAvatar,
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   // Container Gaps

package/lib/module/components/Title/Title.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { View, Text } 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TEXT_ALIGN_MAP = {
   Left: 'left',
@@ -13,7 +14,7 @@ function Title({
   title = 'Title',
   subtitle,
   textAlign = 'Left',
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   textStyle,
   subtitleStyle,

package/lib/module/components/Toast/Toast.js

@@ -5,6 +5,7 @@ import { StyleSheet, Text } from 'react-native';
 import Animated, { FadeOut, SlideInDown, SlideInUp } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { closeToast } from './useToast';
+import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ANIMATION_DURATION = 250;
 function Toast({
@@ -12,7 +13,7 @@ function Toast({
   title,
   timeout = 4000,
   onClose,
-  modes = {},
+  modes = EMPTY_MODES,
   placement = 'bottom',
   style
 }) {

package/lib/module/components/Toggle/Toggle.js

@@ -3,6 +3,7 @@
 import React, { useCallback, useState } from 'react';
 import { Pressable, View, 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";
 /**
  * Toggle (switch) component that maps directly to the Figma design using design tokens.
@@ -18,7 +19,7 @@ function Toggle({
   defaultValue = false,
   onValueChange,
   disabled = false,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel
 }) {

package/lib/module/components/Tooltip/Tooltip.js

@@ -5,6 +5,7 @@ import { View, Text, Modal, Pressable, Platform, StyleSheet, Dimensions } from '
 import Svg, { Path } from 'react-native-svg';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 
 // --- Types ---
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,7 +24,7 @@ function useTooltipContext() {
 
 export function Tooltip({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   open,
   onOpenChange,
   defaultOpen = false,

package/lib/module/components/TransactionBubble/TransactionBubble.js

@@ -6,7 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import MoneyValue from '../MoneyValue/MoneyValue';
 import TransactionStatus from '../TransactionStatus/TransactionStatus';
 import NavArrow from '../NavArrow/NavArrow';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -34,7 +34,7 @@ function TransactionBubble({
   date = '20 Mar 2025',
   statusSlot,
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   onPress,
   style,
   accessibilityLabel,

package/lib/module/components/TransactionDetails/TransactionDetails.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 
 // ===== Item Subcomponent =====
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Item({
   label = 'Label',
   value = 'Value',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   labelStyle,
   valueStyle,
@@ -116,7 +116,7 @@ function Item({
  */
 function TransactionDetails({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel,
   ...rest

package/lib/module/components/TransactionStatus/TransactionStatus.js

@@ -4,11 +4,12 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
 
 // --- Internal Icon Component ---
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StatusIcon = ({
-  modes = {},
+  modes = EMPTY_MODES,
   width = 15,
   height = 15,
   color
@@ -35,7 +36,7 @@ const StatusIcon = ({
 export default function TransactionStatus({
   status = 'Expired',
   date = '20 Mar 2025',
-  modes = {},
+  modes = EMPTY_MODES,
   style
 }) {
   const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes)) || 4;