jfs-components 0.0.73 → 0.0.74

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,7 @@ 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 ListItem } from './ListItem/ListItem';
 export { default as MediaCard, type MediaCardProps } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
@@ -61,7 +65,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 +111,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';