jfs-components 0.0.74 → 0.0.78

package/src/components/Text/Text.tsx

@@ -2,6 +2,8 @@ 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'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 export type TextProps = {
   /**
@@ -23,6 +25,25 @@ export type TextProps = {
   style?: StyleProp<TextStyle>
   /** Number of lines to limit the text to. */
   numberOfLines?: number
+  /**
+   * Explicit per-instance loading override. When `true`, this `Text` renders
+   * a skeleton placeholder regardless of any surrounding `<SkeletonGroup>`.
+   * When `false`, the surrounding group is ignored for this instance. When
+   * omitted, the surrounding group's `loading` flag wins.
+   */
+  loading?: boolean
+  /**
+   * Optional width used while the skeleton is showing. Numbers are dp;
+   * `'100%'` (etc.) is a valid RN dimension. Defaults to a character-count
+   * heuristic based on the resolved font size and the supplied content.
+   */
+  skeletonWidth?: number | `${number}%`
+  /**
+   * Optional explicit line count for the skeleton placeholder. Defaults to
+   * `numberOfLines ?? 1`. Useful when `numberOfLines` is intentionally
+   * unbounded but you want a sensible multi-line placeholder.
+   */
+  skeletonLines?: number
 }
 
 const TEXT_ALIGN_MAP: Record<NonNullable<TextProps['textAlign']>, TextStyle['textAlign']> = {
@@ -37,6 +58,9 @@ function Text({
   modes = EMPTY_MODES,
   style,
   numberOfLines,
+  loading,
+  skeletonWidth,
+  skeletonLines,
 }: TextProps) {
   const foreground = getVariableByName('text/foreground', modes) ?? '#000000'
   const fontFamily = getVariableByName('text/fontFamily', modes) ?? 'JioType'
@@ -45,6 +69,36 @@ function Text({
   const lineHeight = getVariableByName('text/lineHeight', modes) ?? 20
   const letterSpacing = getVariableByName('text/letterSpacing', modes) ?? -0.5
 
+  // Skeleton short-circuit. The hook is always called (stable order); the
+  // surrounding group's `active` flag is the default, but an explicit
+  // `loading` prop overrides both directions.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+  if (isLoading) {
+    const resolvedFontSize = fontSize as number
+    const resolvedLineHeight = lineHeight as number
+    const lines = Math.max(1, skeletonLines ?? numberOfLines ?? 1)
+    // Heuristic width based on the actual content length so the placeholder
+    // visually matches what's about to load. Capped to a reasonable lower
+    // bound so very short labels still produce a visible block.
+    const contentLength =
+      typeof children === 'string'
+        ? children.length
+        : typeof text === 'string'
+          ? text.length
+          : 12
+    const charWidth = resolvedFontSize * 0.55
+    const computedWidth = Math.max(charWidth * 4, contentLength * charWidth)
+    return (
+      <Skeleton
+        kind="text"
+        width={skeletonWidth ?? computedWidth}
+        height={resolvedLineHeight * lines}
+        modes={modes}
+      />
+    )
+  }
+
   const textStyle: TextStyle = {
     color: foreground as string,
     fontFamily: fontFamily as string,

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

@@ -24,9 +24,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';
@@ -47,9 +49,11 @@ export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/Lin
 export { default as LinearProgress, type LinearProgressProps } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as LottieIntroBlock, type LottieIntroBlockProps } from './LottieIntroBlock/LottieIntroBlock';
+export { default as LottiePlayer, type LottiePlayerProps, type LottieAnimationSource } from './LottiePlayer/LottiePlayer';
 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';
@@ -59,9 +63,9 @@ 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 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';
@@ -82,6 +86,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';