jfs-components 0.0.62 → 0.0.64

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -8,6 +8,7 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type SegmentedControlItem = {
   key: React.Key
@@ -33,7 +34,7 @@ function SegmentedControlSegment({
   label,
   active,
   onPress,
-  modes = {},
+  modes = EMPTY_MODES,
 }: {
   label: string
   active: boolean
@@ -117,7 +118,7 @@ function SegmentedControl({
   selectedKey: controlledSelectedKey,
   defaultSelectedKey,
   onSelectionChange,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
 }: SegmentedControlProps) {
   const isControlled = controlledSelectedKey !== undefined

package/src/components/StatItem/StatItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type StatItemProps = {
   /** The small descriptive label above the value. */
@@ -23,7 +24,7 @@ export type StatItemProps = {
 function StatItem({
   label = 'Purity verified by NABL',
   value = '99.99%',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
 }: StatItemProps) {
   const gap = getVariableByName('statItem/gap', modes) ?? 2

package/src/components/StatusHero/StatusHero.tsx

@@ -4,6 +4,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'
 
 export type StatusHeroProps = {
   /**
@@ -57,7 +58,7 @@ export default function StatusHero({
   iconName = 'ic_confirm',
   value = '50',
   currency = 'INR',
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
 }: StatusHeroProps) {
   const { modes: globalModes } = useTokens()

package/src/components/Stepper/Step.tsx

@@ -3,6 +3,7 @@ import { View, Text, type ViewStyle, type TextStyle } 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'
 
 export type StepStatus = 'number' | 'complete' | 'error' | 'warning'
 
@@ -25,7 +26,7 @@ export type StepProps = {
 
 export function Step({
     children,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
     index = 0,
     connectorStyle,

package/src/components/Stepper/StepLabel.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type StepLabelProps = {
     title?: string
@@ -12,7 +13,7 @@ export type StepLabelProps = {
 export function StepLabel({
     title = 'Stepper Item',
     supportingText,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
 }: StepLabelProps) {
     // Title styles

package/src/components/Stepper/Stepper.tsx

@@ -3,6 +3,7 @@ import { View, type ViewStyle } 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'
 
 export { Step, StepLabel }
 
@@ -14,7 +15,7 @@ type StepperProps = {
 
 export default function Stepper({
     children,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
 }: StepperProps) {
     // Stepper container styles

package/src/components/SupportText/SupportText.tsx

@@ -3,6 +3,7 @@ import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'reac
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import SupportTextIcon, { type SupportTextStatus } from './SupportTextIcon';
+import { EMPTY_MODES } from '../../utils/react-utils';
 
 export type SupportTextProps = {
     /**
@@ -39,7 +40,7 @@ function SupportText({
     status = 'Neutral',
     iconSlot,
     textSlot,
-    modes: propModes = {},
+    modes: propModes = EMPTY_MODES,
     style,
 }: SupportTextProps) {
     const { modes: globalModes } = useTokens();

package/src/components/SupportText/SupportTextIcon.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View, type ViewStyle } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
+import { EMPTY_MODES } from '../../utils/react-utils';
 
 export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success' | 'Loading';
 
@@ -21,7 +22,7 @@ const STATUS_ICON_MAP: Record<SupportTextStatus, string> = {
 
 function SupportTextIcon({
     status = 'Neutral',
-    modes = {},
+    modes = EMPTY_MODES,
     style,
 }: SupportTextIconProps) {
     const iconName = STATUS_ICON_MAP[status] || 'ic_info';

package/src/components/SwappableAmount/SwappableAmount.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Button from '../Button/Button'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type SwappableAmountProps = {
   /** Large display value (e.g. "49g"). */
@@ -29,7 +30,7 @@ function SwappableAmount({
   amountLabel = '₹5100',
   onSchedulePress,
   onAmountPress,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
 }: SwappableAmountProps) {
   const gap = getVariableByName('swappableAmount/gap', modes) ?? 24

package/src/components/Tabs/TabItem.tsx

@@ -8,6 +8,7 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export interface TabItemProps {
   /** Label text to display */
@@ -39,7 +40,7 @@ function TabItem({
   label = 'Tab item',
   active = false,
   onPress,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   labelStyle,
   accessibilityLabel,

package/src/components/Tabs/Tabs.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import TabItem from './TabItem'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export interface TabsProps {
   /**
@@ -48,7 +49,7 @@ export interface TabsProps {
  */
 function Tabs({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   scrollable = false,
   style,
 }: TabsProps) {

package/src/components/Text/Text.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type TextProps = {
   /** The text content to display. */
@@ -23,7 +24,7 @@ const TEXT_ALIGN_MAP: Record<NonNullable<TextProps['textAlign']>, TextStyle['tex
 function Text({
   text = 'Korem ipsum ',
   textAlign = 'Left',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   numberOfLines,
 }: TextProps) {

package/src/components/TextInput/TextInput.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Pressable, View, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } 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.
@@ -116,7 +116,7 @@ function TextInput({
   leadingIconName = 'ic_search',
   leading,
   trailing,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   inputStyle,
   onFocus,
@@ -298,7 +298,7 @@ function TextInputSearch({
   value = '',
   onChangeText,
   leading,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   inputStyle,
   accessibilityLabel,

package/src/components/ThreadHero/ThreadHero.tsx

@@ -1,6 +1,7 @@
 import React, { isValidElement, cloneElement, type ReactNode } from 'react'
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type ThreadHeroProps = {
     /** Title text, e.g. "Subhash Rajan" */
@@ -25,7 +26,7 @@ export default function ThreadHero({
     subtitle = 'Banking name: SHIVASHANKAR RAJAN',
     caption,
     renderAvatar,
-    modes = {},
+    modes = EMPTY_MODES,
     style,
 }: ThreadHeroProps) {
     // Container Gaps

package/src/components/Title/Title.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type TitleProps = {
   title?: string;
@@ -28,7 +29,7 @@ function Title({
   title = 'Title',
   subtitle,
   textAlign = 'Left',
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   textStyle,
   subtitleStyle,

package/src/components/Toast/Toast.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native'
 import Animated, { FadeIn, FadeOut, SlideInDown, SlideInUp } from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { closeToast, type ToastPlacement } from './useToast'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export interface ToastProps {
   id: string
@@ -21,7 +22,7 @@ function Toast({
   title,
   timeout = 4000,
   onClose,
-  modes = {},
+  modes = EMPTY_MODES,
   placement = 'bottom',
   style,
 }: ToastProps) {

package/src/components/Toggle/Toggle.tsx

@@ -7,6 +7,7 @@ import {
   type ViewStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export interface ToggleProps {
   /** Whether the toggle is on (controlled) */
@@ -39,7 +40,7 @@ function Toggle({
   defaultValue = false,
   onValueChange,
   disabled = false,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel,
 }: ToggleProps) {

package/src/components/Tooltip/Tooltip.tsx

@@ -21,6 +21,7 @@ import {
 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 ---
 
@@ -92,7 +93,7 @@ export type TooltipProps = {
 
 export function Tooltip({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   open,
   onOpenChange,
   defaultOpen = false,

package/src/components/TransactionBubble/TransactionBubble.tsx

@@ -4,7 +4,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, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 
 export type TransactionBubbleProps = {
@@ -49,7 +49,7 @@ function TransactionBubble({
   date = '20 Mar 2025',
   statusSlot,
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   onPress,
   style,
   accessibilityLabel,

package/src/components/TransactionDetails/TransactionDetails.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } 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 =====
 
@@ -40,7 +40,7 @@ export type TransactionDetailsItemProps = {
 function Item({
   label = 'Label',
   value = 'Value',
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   labelStyle,
   valueStyle,
@@ -158,7 +158,7 @@ export type TransactionDetailsProps = {
  */
 function TransactionDetails({
   children,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
   accessibilityLabel,
   ...rest

package/src/components/TransactionStatus/TransactionStatus.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle } 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 ---
 type StatusIconProps = {
@@ -12,7 +13,7 @@ type StatusIconProps = {
 }
 
 const StatusIcon = ({
-    modes = {},
+    modes = EMPTY_MODES,
     width = 15,
     height = 15,
     color,
@@ -54,7 +55,7 @@ export type TransactionStatusProps = {
 export default function TransactionStatus({
     status = 'Expired',
     date = '20 Mar 2025',
-    modes = {},
+    modes = EMPTY_MODES,
     style,
 }: TransactionStatusProps) {
     const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes)) || 4