jfs-components 0.1.8 → 0.1.12

package/src/components/TextSegment/TextSegment.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -58,6 +58,12 @@ export type TextSegmentProps = {
   textAlign?: 'Left' | 'Center'
   /** Clamp the paragraph to this many lines (truncates with an ellipsis). Applies to the whole composed line, not per-run. */
   numberOfLines?: number
+  /**
+   * When `true`, disables truncation entirely: the trailing ellipsis (`…`) is
+   * never shown and the `numberOfLines` clamp is ignored, so the paragraph
+   * wraps to as many lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
   /** Mode configuration used for the base style and cascaded to every run/child. */
   modes?: Modes
   /** Style override applied to the outer paragraph (e.g. width constraints to force wrapping). */
@@ -125,6 +131,7 @@ function TextSegment({
   children,
   textAlign = 'Left',
   numberOfLines,
+  disableTruncation,
   modes = EMPTY_MODES,
   style,
 }: TextSegmentProps) {
@@ -157,7 +164,7 @@ function TextSegment({
   const content = hasChildren ? cloneChildrenWithModes(children, modes) : renderedSegments
 
   return (
-    <RNText style={[baseStyle, style]} numberOfLines={numberOfLines}>
+    <RNText style={[baseStyle, style]} {...resolveTruncation(disableTruncation, numberOfLines)}>
       {content}
     </RNText>
   )

package/src/components/ThreadHero/ThreadHero.tsx

@@ -1,7 +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'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type ThreadHeroProps = {
@@ -17,6 +17,12 @@ export type ThreadHeroProps = {
     modes?: Modes
     /** Optional container style */
     style?: ViewStyle
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 /**
@@ -29,6 +35,7 @@ export default function ThreadHero({
     renderAvatar,
     modes = EMPTY_MODES,
     style,
+    disableTruncation,
 }: ThreadHeroProps) {
     // Container Gaps
     const containerGap = Number(getVariableByName('threadHero/gap', modes)) || 8
@@ -111,13 +118,13 @@ export default function ThreadHero({
                 {avatarContent}
                 {title ? <Text style={titleStyle}>{title}</Text> : null}
                 {subtitle ? (
-                    <Text style={subtitleStyle} numberOfLines={1} ellipsizeMode="tail">
+                    <Text style={subtitleStyle} {...resolveTruncation(disableTruncation, 1, 'tail')}>
                         {subtitle}
                     </Text>
                 ) : null}
             </View>
             {caption ? (
-                <Text style={captionStyle} numberOfLines={1} ellipsizeMode="tail">
+                <Text style={captionStyle} {...resolveTruncation(disableTruncation, 1, 'tail')}>
                     {caption}
                 </Text>
             ) : null}

package/src/components/Title/Title.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 { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type TitleProps = {
@@ -17,6 +17,12 @@ export type TitleProps = {
   /** Optional style overrides for the subtitle text. */
   subtitleStyle?: StyleProp<TextStyle>;
   numberOfLines?: number;
+  /**
+   * When `true`, disables truncation for both the title and subtitle: the
+   * trailing ellipsis (`…`) is never shown and the `numberOfLines` clamp is
+   * ignored, so the text wraps fully even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
   accessibilityLabel?: string;
   accessibilityHint?: string;
 } & React.ComponentProps<typeof View>;
@@ -35,6 +41,7 @@ function Title({
   textStyle,
   subtitleStyle,
   numberOfLines,
+  disableTruncation,
   accessibilityLabel,
   accessibilityHint,
   ...rest
@@ -128,7 +135,7 @@ function Title({
     >
       <Text
         style={[titleTextStyle, textStyle]}
-        numberOfLines={numberOfLines !== undefined ? numberOfLines : 1}
+        {...resolveTruncation(disableTruncation, numberOfLines !== undefined ? numberOfLines : 1)}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >

package/src/components/Toast/Toast.tsx

@@ -3,7 +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'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export interface ToastProps {
@@ -14,6 +14,12 @@ export interface ToastProps {
   modes?: Modes | undefined
   placement?: ToastPlacement | undefined
   style?: StyleProp<ViewStyle> | undefined
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 const ANIMATION_DURATION = 250
@@ -26,6 +32,7 @@ function Toast({
   modes = EMPTY_MODES,
   placement = 'bottom',
   style,
+  disableTruncation,
 }: ToastProps) {
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -88,7 +95,7 @@ function Toast({
       accessibilityRole="alert"
       accessibilityLiveRegion="assertive"
     >
-      <Text style={textStyle} numberOfLines={2}>
+      <Text style={textStyle} {...resolveTruncation(disableTruncation, 2)}>
         {title}
       </Text>
     </Animated.View>

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 { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import type { Modes } from '../../design-tokens'
 
@@ -23,6 +23,12 @@ export type TransactionBubbleProps = {
   accessibilityLabel?: string
   accessibilityHint?: string
   webAccessibilityProps?: WebAccessibilityProps
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 } & Omit<PressableProps, 'style' | 'children' | 'onPress'>
 
 /**
@@ -56,6 +62,7 @@ function TransactionBubble({
   accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }: TransactionBubbleProps) {
   const resolvedModes = {
@@ -122,7 +129,7 @@ function TransactionBubble({
   const mainContent = (
     <View style={{ gap: bubbleGap }}>
       <View style={{ gap: moneyValueWrapGap }}>
-        <Text style={descriptionStyle} numberOfLines={1}>{description}</Text>
+        <Text style={descriptionStyle} {...resolveTruncation(disableTruncation, 1)}>{description}</Text>
         <MoneyValue value={value} currency={currency} modes={resolvedModes} />
       </View>
       {processedChildren}

package/src/components/TransactionStatus/TransactionStatus.tsx

@@ -2,7 +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'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 // --- Internal Icon Component ---
@@ -48,6 +48,12 @@ export type TransactionStatusProps = {
     modes?: Modes
     /** Optional container style */
     style?: ViewStyle
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 /**
@@ -58,6 +64,7 @@ export default function TransactionStatus({
     date = '20 Mar 2025',
     modes = EMPTY_MODES,
     style,
+    disableTruncation,
 }: TransactionStatusProps) {
     const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes)) || 4
     // Using 'transactionStatus' tokens for text
@@ -88,7 +95,7 @@ export default function TransactionStatus({
     return (
         <View style={containerStyle}>
             <StatusIcon width={iconSize} height={iconSize} color={iconColor} modes={modes} />
-            <Text style={textStyle} numberOfLines={1}>
+            <Text style={textStyle} {...resolveTruncation(disableTruncation, 1)}>
                 {status} · {date}
             </Text>
         </View>

package/src/components/UpiHandle/UpiHandle.tsx

@@ -13,7 +13,7 @@ import {
 } 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 { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
 import Icon from '../../icons/Icon'
 import type { Modes } from '../../design-tokens'
@@ -52,6 +52,12 @@ type UpiHandleProps = {
   onPress?: () => void;
   onClick?: () => void;
   disabled?: boolean;
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
 
 interface UpiHandleTokens {
@@ -152,6 +158,7 @@ function UpiHandle({
   onPress,
   onClick,
   disabled,
+  disableTruncation,
   // accessibilityLabel is accepted on the type for API back-compat; the
   // wrapper renders `accessibilityLabel={undefined}` because the inner Text
   // already carries the label.
@@ -240,8 +247,7 @@ function UpiHandle({
       </View>
       <Text
         style={tokens.labelStyle}
-        numberOfLines={1}
-        ellipsizeMode="tail"
+        {...resolveTruncation(disableTruncation, 1, 'tail')}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >

package/src/components/index.ts

@@ -4,7 +4,7 @@ export { default as Attached, type AttachedProps, type AttachedPosition } from '
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
-export { default as Badge } from './Badge/Badge';
+export { default as Badge, type BadgeProps, type BadgeType } from './Badge/Badge';
 export { default as BenefitCard, type BenefitCardProps, type BenefitCardItem } from './BenefitCard/BenefitCard';
 export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
@@ -28,7 +28,7 @@ export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
 export { default as DropdownInput, type DropdownInputProps, type DropdownInputHandle, 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 CardCTA, type CardCTAProps, type CardCTAType, type CardCTATypeInput } 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';
@@ -72,6 +72,11 @@ export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
 export { default as Slider, type SliderProps, type SliderHandle } from './Slider/Slider';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
+export {
+    default as Stack,
+    type StackProps,
+    type StackLayoutDirection,
+} from './Stack/Stack';
 export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
 export { Step, type StepProps, type StepStatus } from './Stepper/Step';
@@ -135,6 +140,22 @@ 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 CompareTable, type CompareTableProps, type CompareTableColumn, type CompareTableRow, type CompareTableCellValue, type CompareTableSection } from './CompareTable/CompareTable';
+export {
+    default as Table,
+    TableHeader,
+    TableHeaderCell,
+    TableBody,
+    TableRow,
+    TableCell,
+    type TableProps,
+    type TableColumn,
+    type TableCellAlign,
+    type TableHeaderProps,
+    type TableHeaderCellProps,
+    type TableBodyProps,
+    type TableRowProps,
+    type TableCellProps,
+} from './Table/Table';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
 export { default as ProductMerchandisingCard, type ProductMerchandisingCardProps } from './ProductMerchandisingCard/ProductMerchandisingCard';