jfs-components 0.0.78 → 0.0.84

package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx

@@ -129,10 +129,6 @@ function ExpandableCheckbox({
 
   const rowGap =
     (getVariableByName('checkboxItem/gap', modes) as number | null) ?? 8
-  const rowPaddingHorizontal =
-    (getVariableByName('checkboxItem/padding/horizontal', modes) as number | null) ?? 0
-  const rowPaddingVertical =
-    (getVariableByName('checkboxItem/padding/vertical', modes) as number | null) ?? 0
 
   const labelColor =
     (getVariableByName('checkboxItem/foreground', modes) as string | null) ?? '#1a1c1f'
@@ -163,12 +159,10 @@ function ExpandableCheckbox({
       alignSelf: isExpanded ? 'stretch' : 'auto',
       minWidth: 0,
       flexDirection: 'row',
-      alignItems: 'flex-start',
+      alignItems: isExpanded ? 'flex-start' : 'center',
       gap: rowGap,
-      paddingHorizontal: rowPaddingHorizontal,
-      paddingVertical: rowPaddingVertical,
     }),
-    [isExpanded, rowGap, rowPaddingHorizontal, rowPaddingVertical]
+    [isExpanded, rowGap]
   )
 
   const resolvedLabelStyle: TextStyle = useMemo(
@@ -180,6 +174,13 @@ function ExpandableCheckbox({
       fontSize: labelFontSize,
       lineHeight: labelLineHeight,
       fontWeight: labelFontWeight,
+      // Android adds asymmetric font padding and top-aligns the glyph inside
+      // an inflated line box when `lineHeight` is set. That makes the centered
+      // checkbox look like it drops below the text. Disabling the extra
+      // padding + centering the glyph keeps the single-line label optically
+      // aligned with the checkbox. No-op on iOS / web.
+      includeFontPadding: false,
+      textAlignVertical: isExpanded ? 'top' : 'center',
     }),
     [
       labelColor,
@@ -187,11 +188,14 @@ function ExpandableCheckbox({
       labelFontSize,
       labelLineHeight,
       labelFontWeight,
+      isExpanded,
     ]
   )
 
+  // Layer component modes first (e.g. Color Mode), then button defaults so
+  // Secondary / XS / Low always win unless a dedicated override prop is added.
   const buttonModes = useMemo(
-    () => ({ ...BUTTON_DEFAULT_MODES, ...modes }),
+    () => ({ ...modes, ...BUTTON_DEFAULT_MODES }),
     [modes]
   )
 

package/src/components/FormField/FormField.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
   View,
   Text,
-  Pressable,
   TextInput as RNTextInput,
   type StyleProp,
   type TextInputProps as RNTextInputProps,
@@ -347,16 +346,6 @@ function FormField({
   const [isFocused, setIsFocused] = useState(false)
   const interactive = !isDisabled && !isReadOnly
 
-  // Ref to the native input so tapping anywhere in the input row (padding,
-  // leading/trailing gutters) focuses it on the FIRST tap — fixing the Android
-  // "two taps to open the keyboard" issue caused by the row intercepting the
-  // initial touch.
-  const inputRef = useRef<RNTextInput>(null)
-  const focusInput = useCallback(() => {
-    if (!interactive) return
-    inputRef.current?.focus()
-  }, [interactive])
-
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -552,11 +541,7 @@ function FormField({
         </View>
       )}
 
-      <Pressable
-        style={[inputRowStyle, inputStyle]}
-        onPress={focusInput}
-        accessible={false}
-      >
+      <View style={[inputRowStyle, inputStyle]}>
         {processedLeading != null && (
           <View
             accessibilityElementsHidden
@@ -566,7 +551,6 @@ function FormField({
           </View>
         )}
         <RNTextInput
-          ref={inputRef}
           style={[inputTextStyles, inputTextStyle]}
           value={value ?? ''}
           onChangeText={handleChangeText}
@@ -594,7 +578,7 @@ function FormField({
             {processedTrailing}
           </View>
         )}
-      </Pressable>
+      </View>
 
       {supportLabel != null && supportLabel !== '' && (
         <SupportText

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -21,6 +21,7 @@ import Button from '../Button/Button'
 import Disclaimer from '../Disclaimer/Disclaimer'
 import IconButton from '../IconButton/IconButton'
 import ActionFooter from '../ActionFooter/ActionFooter'
+import Slot from '../Slot/Slot'
 
 // ---------------------------------------------------------------------------
 // Forced modes
@@ -351,7 +352,7 @@ function FullscreenModal({
     footerContent = footer
   } else if (primaryActionLabel) {
     footerContent = (
-      <View style={footerColumnStyle}>
+      <Slot layoutDirection="vertical" modes={modes}>
         <Button
           label={primaryActionLabel}
           modes={modes}
@@ -359,7 +360,7 @@ function FullscreenModal({
           {...(onPrimaryAction ? { onPress: onPrimaryAction } : {})}
         />
         {disclaimer ? <Disclaimer disclaimer={disclaimer} modes={modes} /> : null}
-      </View>
+      </Slot>
     )
   }
 
@@ -373,6 +374,9 @@ function FullscreenModal({
         showsVerticalScrollIndicator={false}
         onScroll={onScroll}
         scrollEventThrottle={16}
+        // Tap an input in the body and it focuses on the FIRST tap, even when
+        // the keyboard is already open (default 'never' eats that tap).
+        keyboardShouldPersistTaps="handled"
       >
         <View style={heroTextRegionStyle}>
           <HeroText
@@ -407,7 +411,6 @@ function FullscreenModal({
 const rootStyle: ViewStyle = { flex: 1, width: '100%', position: 'relative' }
 const scrollViewStyle: ViewStyle = { flex: 1 }
 const scrollContentStyle: ViewStyle = { flexGrow: 1 }
-const footerColumnStyle: ViewStyle = { width: '100%', gap: 8 }
 const fullWidthStyle: ViewStyle = { width: '100%' }
 const closeButtonStyle: ViewStyle = { position: 'absolute', top: 12, right: 12 }
 

package/src/components/ListItem/ListItem.tsx

@@ -11,7 +11,6 @@ import {
   type PressableStateCallbackType,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import IconCapsule from '../IconCapsule/IconCapsule'
 import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
@@ -21,8 +20,16 @@ type ListItemProps = {
   title?: string;
   supportText?: string;
   showSupportText?: boolean;
-  leading?: React.ReactNode;
+  /** Leading slot (Figma "leading"). Omitted or `null` renders nothing. */
+  leading?: React.ReactNode | null;
   supportSlot?: React.ReactNode;
+  /** Trailing slot (Figma "trailing"), e.g. `MoneyValue` or `Button`. Horizontal layout only. */
+  trailing?: React.ReactNode;
+  /**
+   * @deprecated Renamed to `trailing` for a symmetric `leading` / `trailing`
+   * slot API. Still honored for backward compatibility; `trailing` wins when
+   * both are provided. Will be removed in a future major version.
+   */
   endSlot?: React.ReactNode;
   /** Whether to show the NavArrow on the far right (Horizontal layout only). Defaults to true. */
   navArrow?: boolean;
@@ -46,9 +53,10 @@ type ListItemProps = {
 const IS_IOS = Platform.OS === 'ios'
 const PRESS_DELAY = IS_IOS ? 130 : 0
 
-// Forced modes for the endSlot — `Context: 'ListItem'` can never be
-// overridden by external modes. Frozen so identity is stable across renders.
-const END_SLOT_FORCED_MODES = Object.freeze({ Context: 'ListItem' })
+// Forced modes for the leading/trailing slots — `Context: 'ListItem'` can
+// never be overridden by external modes. Frozen so identity is stable across
+// renders. Applied to both slots so they cascade modes identically.
+const SLOT_FORCED_MODES = Object.freeze({ Context: 'ListItem' })
 
 // Pressed visual is applied on the host view through Pressable's style
 // callback, so a scroll-cancelled touch never schedules a React render.
@@ -72,7 +80,7 @@ interface ListItemTokens {
 }
 
 function resolveListItemTokens(modes: Record<string, any>): ListItemTokens {
-  // Modes used to cascade into slot children (leading / supportSlot / endSlot).
+  // Modes used to cascade into slot children (leading / supportSlot / trailing).
   // We do NOT inject an `AppearanceBrand` default here: slot content such as
   // Buttons or Badges carry their own intended appearance, so forcing one onto
   // them would be surprising.
@@ -167,9 +175,11 @@ const verticalSupportTextOverride: TextStyle = { textAlign: 'center' }
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
  * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
+ * dedicated React "slot" prop. The leading and trailing edges share a
+ * symmetric `leading` / `trailing` slot API:
+ *  - Slot "leading" → `leading`
  *  - Slot "support text" → `supportSlot`
- *  - Slot "end" → `endSlot`
+ *  - Slot "trailing" → `trailing`
  *
  * @component
  * @param {Object} props
@@ -177,9 +187,9 @@ const verticalSupportTextOverride: TextStyle = { textAlign: 'center' }
  * @param {string} [props.title='Title'] - Primary title used in the horizontal layout.
  * @param {string} [props.supportText='Support Text'] - Support text used in both layouts when `supportSlot` is not provided.
  * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text in Horizontal layout.
- * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to `IconCapsule`.
+ * @param {React.ReactNode|null} [props.leading] - Optional leading slot. Omitted or `null` renders nothing.
  * @param {React.ReactNode} [props.supportSlot] - Optional custom slot used instead of the default support text block.
- * @param {React.ReactNode} [props.endSlot] - Optional custom trailing slot (Figma Slot "end").
+ * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "trailing"). Horizontal layout only.
  * @param {boolean} [props.navArrow=true] - Whether to show NavArrow on the far right (Horizontal layout only).
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
  * @param {Function} [props.onPress] - When provided, the entire item becomes pressable (navigation variant).
@@ -208,6 +218,7 @@ function ListItemImpl({
   showSupportText = true,
   leading,
   supportSlot,
+  trailing,
   endSlot,
   navArrow = true,
   modes = EMPTY_MODES,
@@ -251,12 +262,15 @@ function ListItemImpl({
   // Process leading slot to pass modes to children. Memoized on
   // (leading, resolvedModes) so a parent re-render doesn't re-walk the tree.
   const leadingElement = useMemo(() => {
-    const processed = leading
-      ? cloneChildrenWithModes(React.Children.toArray(leading), tokens.resolvedModes)
-      : []
-    if (processed.length === 0) {
-      return <IconCapsule modes={tokens.resolvedModes} accessibilityLabel={undefined} />
-    }
+    if (leading == null) return null
+
+    const processed = cloneChildrenWithModes(
+      React.Children.toArray(leading),
+      tokens.resolvedModes,
+      SLOT_FORCED_MODES
+    )
+    if (processed.length === 0) return null
+
     return processed.length === 1 ? processed[0] : processed
   }, [leading, tokens.resolvedModes])
 
@@ -269,15 +283,18 @@ function ListItemImpl({
     return processed.length === 1 ? processed[0] : processed
   }, [supportSlot, tokens.resolvedModes])
 
-  const processedEndSlot = useMemo(() => {
-    if (!endSlot) return null
+  // `trailing` wins; `endSlot` is the deprecated alias kept for back-compat.
+  const trailingContent = trailing ?? endSlot
+
+  const processedTrailing = useMemo(() => {
+    if (!trailingContent) return null
     const processed = cloneChildrenWithModes(
-      React.Children.toArray(endSlot),
+      React.Children.toArray(trailingContent),
       tokens.resolvedModes,
-      END_SLOT_FORCED_MODES
+      SLOT_FORCED_MODES
     )
     return processed.length === 1 ? processed[0] : processed
-  }, [endSlot, tokens.resolvedModes])
+  }, [trailingContent, tokens.resolvedModes])
 
   const renderSupportContent = () => {
     if (processedSupportSlot) return processedSupportSlot
@@ -354,7 +371,7 @@ function ListItemImpl({
   if (layout === 'Horizontal') {
     const innerContent = (
       <View style={innerContentStyleArray}>
-        {leadingElement}
+        {leadingElement ?? null}
         <View
           style={{
             flex: 1,
@@ -370,8 +387,8 @@ function ListItemImpl({
           </Text>
           {showSupportText && renderSupportContent()}
         </View>
-        {processedEndSlot ? (
-          <View style={tokens.trailingWrapperStyle}>{processedEndSlot}</View>
+        {processedTrailing ? (
+          <View style={tokens.trailingWrapperStyle}>{processedTrailing}</View>
         ) : null}
         {navArrow && <NavArrow direction="Forward" modes={tokens.resolvedModes} />}
       </View>
@@ -412,7 +429,7 @@ function ListItemImpl({
   // Vertical layout — icon on top, support text/slot below
   const verticalContent = (
     <View style={verticalContentStyleArray}>
-      {leadingElement}
+      {leadingElement ?? null}
       {renderSupportContent()}
     </View>
   )

package/src/components/MessageField/MessageField.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
     View,
     Text,
-    Pressable,
     TextInput as RNTextInput,
     type StyleProp,
     type TextInputProps as RNTextInputProps,
@@ -297,15 +296,6 @@ function MessageField({
     const [isFocused, setIsFocused] = useState(false)
     const interactive = !isDisabled && !isReadOnly
 
-    // Ref to the native textarea so tapping anywhere in the (padded) textarea
-    // container focuses it on the FIRST tap, fixing the Android "two taps to
-    // open the keyboard" issue.
-    const inputRef = useRef<RNTextInput>(null)
-    const focusInput = useCallback(() => {
-        if (!interactive) return
-        inputRef.current?.focus()
-    }, [interactive])
-
     const { modes: globalModes } = useTokens()
     const baseModes = useMemo(
         () => ({ ...globalModes, ...propModes }),
@@ -508,13 +498,8 @@ function MessageField({
                 </View>
             )}
 
-            <Pressable
-                style={[textareaContainerStyle, textareaStyle]}
-                onPress={focusInput}
-                accessible={false}
-            >
+            <View style={[textareaContainerStyle, textareaStyle]}>
                 <RNTextInput
-                    ref={inputRef}
                     multiline
                     value={currentValue}
                     onChangeText={handleChangeText}
@@ -529,7 +514,7 @@ function MessageField({
                     accessibilityHint={accessibilityHint}
                     style={[inputTextStyle, inputStyle]}
                 />
-            </Pressable>
+            </View>
 
             {shouldShowCounter && (
                 <Text style={counterTextStyle} accessibilityElementsHidden>

package/src/components/PaymentFeedback/PaymentFeedback.tsx

@@ -1,9 +1,9 @@
-import React, { type ReactNode, isValidElement, cloneElement } from 'react'
+import React, { type ReactNode } from 'react'
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 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'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 
 export type PaymentFeedbackProps = {
   /** Large heading text, typically a monetary value (e.g. "₹50,000") */
@@ -20,7 +20,11 @@ export type PaymentFeedbackProps = {
   iconName?: string
   /** Optional custom media slot that replaces the default IconCapsule */
   renderMedia?: ReactNode
-  /** Mode configuration for design tokens */
+  /**
+   * Mode configuration for design tokens. Also drives the default
+   * IconCapsule's color — pass `AppearanceSystem: 'positive' | 'warning' |
+   * 'negative'` to render a green/orange/red capsule (defaults to `positive`).
+   */
   modes?: Record<string, any>
   style?: ViewStyle
 }
@@ -28,7 +32,7 @@ export type PaymentFeedbackProps = {
 export default function PaymentFeedback({
   title = '₹50,000',
   subtitle = 'Payment successful',
-  body = 'Your payment has been\nsuccessfully processed.',
+  body,
   details = '18 March 2025, 4:15 pm\nTransaction ID: TXN121466784',
   showDetails = true,
   iconName = 'ic_confirm',
@@ -123,14 +127,17 @@ export default function PaymentFeedback({
     textAlign: 'center',
   }
 
-  const mediaContent = isValidElement(renderMedia)
-    ? cloneElement(renderMedia as React.ReactElement<any>, { modes })
-    : renderMedia
+  // Cascade modes into a custom media slot (per the modes-cascade convention);
+  // any modes the consumer set on the slot child still take precedence.
+  const mediaContent =
+    renderMedia != null ? cloneChildrenWithModes(renderMedia, modes) : null
 
   const defaultMedia = (
     <IconCapsule
       iconName={iconName}
-      modes={{ ...modes, 'Icon Capsule Size': 'L', Emphasis: 'High', 'Semantic Intent': 'System', AppearanceSystem: 'positive' }}
+      // `positive` is the default; consumers override the capsule color by
+      // passing `AppearanceSystem` (or any other mode) via the `modes` prop.
+      modes={{ AppearanceSystem: 'positive', ...modes, 'Icon Capsule Size': 'L', Emphasis: 'High', 'Semantic Intent': 'System' }}
     />
   )