jfs-components 0.0.77 → 0.0.79

package/src/components/TextInput/TextInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useRef, 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'
@@ -128,6 +128,11 @@ function TextInput({
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
+  // Ref to the underlying native input so a tap anywhere inside the Pressable
+  // wrapper can programmatically focus it. Without this, on Android the
+  // wrapping Pressable becomes the touch responder on the first tap and the
+  // native input only gains focus on the *second* tap.
+  const inputRef = useRef<RNTextInput>(null)
 
   // Resolve container tokens
   const backgroundColor = getVariableByName('textInput/background', modes) || '#f5f5f5'
@@ -227,6 +232,13 @@ function TextInput({
       style={[containerStyle, focusContainerStyle, hoverStyle, style]}
       onHoverIn={() => setIsHovered(true)}
       onHoverOut={() => setIsHovered(false)}
+      // Forward taps on the wrapper (padding, leading icon gutter, etc.) to the
+      // native input. This guarantees the keyboard opens on the FIRST tap on
+      // Android instead of requiring a second tap.
+      onPress={() => inputRef.current?.focus()}
+      // The native input is the real accessible element; don't add a redundant
+      // focusable node for screen readers.
+      accessible={false}
     >
       {processedLeading && (
         <View 
@@ -237,6 +249,7 @@ function TextInput({
         </View>
       )}
       <RNTextInput
+        ref={inputRef}
         accessibilityLabel={undefined}
         accessibilityHint={accessibilityHint}
         placeholder={displayPlaceholder}

package/src/components/Title/Title.tsx

@@ -50,8 +50,15 @@ function Title({
   const labelColor =
     getVariableByName('title/label/color', modes) || '#0d0d0f'
   const fontSize = getVariableByName('title/fontSize', modes) || 26
-  const lineHeight =
+  const rawLineHeight =
     getVariableByName('title/lineHeight', modes) || 26
+  // The Figma title tokens ship with `lineHeight === fontSize` (26/26). On
+  // native (especially Android) that produces a Text box exactly `lineHeight`
+  // tall, which clips descenders like p/g/y/q/j at the bottom — particularly
+  // noticeable with `numberOfLines={1}`. Clamp to ~1.2x fontSize so descenders
+  // always fit. When a downstream token already provides adequate leading,
+  // the original value is preserved.
+  const lineHeight = Math.max(rawLineHeight, Math.ceil(fontSize * 1.2))
   const fontFamily =
     getVariableByName('title/fontFamily', modes) || 'System'
   const fontWeightRaw =
@@ -65,8 +72,12 @@ function Title({
     getVariableByName('pageSubtitle/label/color', modes) || '#0d0d0f'
   const subtitleFontSize =
     getVariableByName('pageSubtitle/fontSize', modes) || 14
-  const subtitleLineHeight =
+  const subtitleRawLineHeight =
     getVariableByName('pageSubtitle/lineHeight', modes) || 18
+  const subtitleLineHeight = Math.max(
+    subtitleRawLineHeight,
+    Math.ceil(subtitleFontSize * 1.2)
+  )
   const subtitleFontFamily =
     getVariableByName('pageSubtitle/fontFamily', modes) || 'System'
   const subtitleFontWeightRaw =

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export { default as AccountCard, type AccountCardProps, type AccountCardState } from './AccountCard/AccountCard';
 export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
+export { default as Attached, type AttachedProps, type AttachedPosition } from './Attached/Attached';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
@@ -24,9 +25,11 @@ export { default as Divider, type DividerProps, type DividerDirection } from './
 export { default as Drawer } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
 export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
+export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';
 export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA'
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
+export { default as FullscreenModal, type FullscreenModalProps } from './FullscreenModal/FullscreenModal';
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
@@ -51,6 +54,7 @@ export { default as LottiePlayer, type LottiePlayerProps, type LottieAnimationSo
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard, type MediaCardProps } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
+export { default as MessageField, type MessageFieldProps, type MessageFieldState } from './MessageField/MessageField';
 export { default as MetricLegendItem, type MetricLegendItemProps } from './MetricLegendItem/MetricLegendItem';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
 export { default as NoteInput, type NoteInputProps } from './NoteInput/NoteInput';
@@ -60,9 +64,10 @@ export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Nump
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
-export { default as Stepper } from './Stepper/Stepper';
-export { Step } from './Stepper/Step';
-export { StepLabel } from './Stepper/StepLabel';
+export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
+export { default as Stepper, type StepperProps } from './Stepper/Stepper';
+export { Step, type StepProps, type StepStatus } from './Stepper/Step';
+export { StepLabel, type StepLabelProps } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
 export { default as StatusHero, type StatusHeroProps } from './StatusHero/StatusHero';
 export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/ThreadHero';
@@ -83,6 +88,7 @@ export { default as UpiHandle } from './UpiHandle/UpiHandle';
 export { default as VStack, type VStackProps } from './VStack/VStack';
 export { default as ChipGroup, type ChipGroupProps } from './ChipGroup/ChipGroup';
 export { default as EmptyState, type EmptyStateProps } from './EmptyState/EmptyState';
+export { default as ExpandableCheckbox, type ExpandableCheckboxProps } from './ExpandableCheckbox/ExpandableCheckbox';
 export { default as Accordion, type AccordionProps } from './Accordion/Accordion';
 export { default as AccordionCheckbox, type AccordionCheckboxProps } from './AccordionCheckbox/AccordionCheckbox';
 export { default as ActionTile, type ActionTileProps } from './ActionTile/ActionTile';
@@ -115,6 +121,7 @@ export { default as AmountInput, type AmountInputProps } from './AmountInput/Amo
 export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
+export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue } from './PlanComparisonCard/PlanComparisonCard';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
 export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';