jfs-components 0.0.73 → 0.0.77

package/src/components/Text/Text.tsx

@@ -2,10 +2,21 @@ 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 = {
-  /** The text content to display. */
+  /**
+   * The text content to display. You may also pass content as JSX children
+   * (e.g. `<Text>Hello</Text>`) — when both are provided, `children` wins.
+   */
   text?: string
+  /**
+   * Child nodes (string, number, or nested <Text>/<RNText> elements). This
+   * mirrors the standard React Native `<Text>` API so the component is a
+   * near-drop-in replacement.
+   */
+  children?: React.ReactNode
   /** Horizontal alignment of the text. */
   textAlign?: 'Left' | 'Center'
   /** Modes configuration for design token resolution. */
@@ -14,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']> = {
@@ -22,11 +52,15 @@ const TEXT_ALIGN_MAP: Record<NonNullable<TextProps['textAlign']>, TextStyle['tex
 }
 
 function Text({
-  text = 'Korem ipsum ',
+  text,
+  children,
   textAlign = 'Left',
   modes = EMPTY_MODES,
   style,
   numberOfLines,
+  loading,
+  skeletonWidth,
+  skeletonLines,
 }: TextProps) {
   const foreground = getVariableByName('text/foreground', modes) ?? '#000000'
   const fontFamily = getVariableByName('text/fontFamily', modes) ?? 'JioType'
@@ -35,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,
@@ -45,12 +109,23 @@ function Text({
     textAlign: TEXT_ALIGN_MAP[textAlign],
   }
 
+  // Prefer JSX children when present, otherwise fall back to the `text` prop.
+  // Keep the storybook placeholder as a last resort so the Default story
+  // still renders something visible when no content is supplied via either
+  // route.
+  const content =
+    children !== undefined && children !== null && children !== false
+      ? children
+      : text !== undefined
+        ? text
+        : 'Korem ipsum '
+
   return (
     <RNText
       style={[textStyle, style]}
       numberOfLines={numberOfLines}
     >
-      {text}
+      {content}
     </RNText>
   )
 }

package/src/components/Tooltip/Tooltip.tsx

@@ -238,9 +238,25 @@ export function TooltipTrigger({ children, asChild, ...props }: TooltipTriggerPr
 export type TooltipContentProps = {
   children: ReactNode
   sideOffset?: number
+  /**
+   * Vertical spacing between slot children, in pixels.
+   * The content area acts as a vertical slot: any children passed in
+   * (text, icons, custom views, etc.) are stacked top-to-bottom with this gap.
+   */
+  gap?: number
+  /**
+   * Cross-axis alignment of slot children.
+   * Defaults to `flex-start` so multi-line/multi-element content lines up on the left.
+   */
+  alignItems?: ViewStyle['alignItems']
 }
 
-export function TooltipContent({ children, sideOffset = 4 }: TooltipContentProps) {
+export function TooltipContent({
+  children,
+  sideOffset = 4,
+  gap = 4,
+  alignItems = 'flex-start',
+}: TooltipContentProps) {
   const { isVisible, hide, triggerRect, setContentSize, contentSize, modes, placement: preferredPlacement } = useTooltipContext()
   const insets = useSafeAreaInsets()
   const { width: windowWidth, height: windowHeight } = Dimensions.get('window')
@@ -467,6 +483,37 @@ export function TooltipContent({ children, sideOffset = 4 }: TooltipContentProps
     paddingVertical: paddingV,
   }
 
+  // Vertical slot wrapper: stack arbitrary children top-to-bottom with a gap.
+  // Raw <Text> children still get auto-styled with the tooltip label tokens
+  // so the simple <TooltipContent><Text>label</Text></TooltipContent> usage
+  // keeps working without any changes.
+  const slotStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems,
+    gap,
+  }
+
+  const renderSlotChildren = () => {
+    if (typeof children === 'string') {
+      return <Text style={textStyle}>{children}</Text>
+    }
+    return (
+      <View style={slotStyle}>
+        {React.Children.map(children, (child) => {
+          if (
+            React.isValidElement(child) &&
+            (child.type === Text || (child.type as any).displayName === 'Text')
+          ) {
+            return React.cloneElement(child, {
+              style: [textStyle, (child.props as any).style],
+            } as any)
+          }
+          return child
+        })}
+      </View>
+    )
+  }
+
   if (!hasMeasured) {
     return (
       <Modal transparent visible={isVisible} animationType="fade">
@@ -475,18 +522,7 @@ export function TooltipContent({ children, sideOffset = 4 }: TooltipContentProps
                style={measureStyle} 
                onLayout={(e) => setContentSize(e.nativeEvent.layout)}
              >
-               {typeof children === 'string' ? (
-                 <Text style={textStyle}>{children}</Text>
-               ) : (
-                  <View>
-                    {React.Children.map(children, child => {
-                       if (React.isValidElement(child) && (child.type === Text || (child.type as any).displayName === 'Text')) {
-                           return React.cloneElement(child, { style: [textStyle, (child.props as any).style] } as any)
-                       }
-                       return child
-                    })}
-                  </View>
-               )}
+               {renderSlotChildren()}
              </View>
          </View>
       </Modal>
@@ -519,18 +555,7 @@ export function TooltipContent({ children, sideOffset = 4 }: TooltipContentProps
               }
             ]}
           >
-             {typeof children === 'string' ? (
-                 <Text style={textStyle}>{children}</Text>
-               ) : (
-                  <View>
-                     {React.Children.map(children, child => {
-                       if (React.isValidElement(child) && (child.type === Text || (child.type as any).displayName === 'Text')) {
-                           return React.cloneElement(child, { style: [textStyle, (child.props as any).style] } as any)
-                       }
-                       return child
-                    })}
-                  </View>
-               )}
+             {renderSlotChildren()}
              
              {/* Arrow */}
              {/* Render different arrow based on axis to avoid rotation gap issues */}

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as AccountCard, type AccountCardProps, type AccountCardState } from './AccountCard/AccountCard';
 export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
@@ -21,6 +22,8 @@ export { default as CardInsight, type CardInsightProps } from './CardInsight/Car
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 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 CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA'
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
@@ -43,6 +46,8 @@ export { default as LazyList } from './LazyList/LazyList';
 export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
 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';
@@ -61,7 +66,15 @@ export { StepLabel } 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';
-export { Tooltip } from './Tooltip/Tooltip';
+export {
+    Tooltip,
+    TooltipTrigger,
+    TooltipContent,
+    type TooltipProps,
+    type TooltipTriggerProps,
+    type TooltipContentProps,
+    type Placement as TooltipPlacement,
+} from './Tooltip/Tooltip';
 
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
 export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
@@ -99,8 +112,10 @@ export { default as Toast, type ToastProps } from './Toast/Toast';
 export { default as ToastProvider, type ToastProviderProps } from './Toast/ToastProvider';
 export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';
 export { default as AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
+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 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';
 export { default as ProgressBadge, type ProgressBadgeProps } from './ProgressBadge/ProgressBadge';