jfs-components 0.0.73 → 0.0.74

package/lib/typescript/src/components/index.d.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,7 @@ 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';
 export { default as TransactionBubble, type TransactionBubbleProps } from './TransactionBubble/TransactionBubble';
@@ -98,8 +102,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';

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-05-15T16:18:56.427Z
+ * Generated: 2026-05-19T16:28:08.570Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -36,8 +36,6 @@
     "storybook-web": "storybook dev -p 6006",
     "build:storybook-web": "storybook build",
     "deploy:storybook": "vercel --prod",
-    "example": "yarn --cwd example start",
-    "example:install": "yarn --cwd example install",
     "postinstall": "patch-package",
     "icons:generate": "node scripts/generate-icon-registry.js",
     "prepare": "bob build",

package/src/components/AccountCard/AccountCard.tsx

@@ -0,0 +1,376 @@
+import React, { useCallback, useMemo, useRef } from 'react'
+import {
+    Image as RNImage,
+    Platform,
+    Pressable,
+    Text,
+    View,
+    type ImageSourcePropType,
+    type ImageStyle,
+    type PressableStateCallbackType,
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Icon from '../../icons/Icon'
+
+const IS_IOS = Platform.OS === 'ios'
+const PRESS_DELAY = IS_IOS ? 130 : 0
+const DEFAULT_IMAGE_RATIO = 125 / 82
+
+const pressedOverlayStyle: ViewStyle = { opacity: 0.7 }
+
+// Default modes for the "Add" placeholder icon (`iconButton/*` tokens).
+// Caller-supplied `modes` are merged on top so every key here can be overridden.
+const ADD_ICON_DEFAULT_MODES: Readonly<Record<string, any>> = Object.freeze({
+    AppearanceBrand: 'Secondary',
+    Emphasis: 'Low',
+    "Button / Size": "M",
+})
+
+export type AccountCardState = 'connected' | 'add'
+
+export type AccountCardProps = {
+    /**
+     * Visual variant of the card.
+     *  - `'connected'` (default): renders a card preview image, a `title` and a
+     *    `subtitle` below it (e.g. account name + masked number).
+     *  - `'add'`: renders an empty placeholder field with a centred `+` icon
+     *    and only the `title`. Use this for the "Add new account" affordance
+     *    that pairs with a list of connected `AccountCard`s.
+     */
+    state?: AccountCardState
+    /** Title rendered below the image / placeholder. */
+    title?: string
+    /**
+     * Subtitle rendered below the title (e.g. masked account number).
+     * Only displayed when `state === 'connected'`.
+     */
+    subtitle?: string
+    /**
+     * Card preview image. Only used when `state === 'connected'` and
+     * `cardSlot` is not provided. Accepts a URL string or any
+     * `ImageSourcePropType` (e.g. `require('./card.png')`).
+     */
+    imageSource?: ImageSourcePropType | string
+    /**
+     * Aspect ratio (width / height) of the image / placeholder area.
+     * Defaults to the Figma reference ratio (`125 / 82` ≈ `1.524`).
+     */
+    imageRatio?: number
+    /**
+     * Override the entire image / placeholder area with a custom node
+     * (e.g. a smaller `DebitCard`, a brand logo, a remote image).
+     * Receives `modes` automatically through `cloneChildrenWithModes`.
+     */
+    cardSlot?: React.ReactNode
+    /**
+     * Icon name shown inside the "Add" placeholder. Defaults to `'ic_add'`.
+     * Only used when `state === 'add'`.
+     */
+    addIcon?: string
+    /**
+     * Press handler. Applied to the whole card so the entire surface is a
+     * single touch target — particularly important for the `'add'` state,
+     * which behaves like a button.
+     */
+    onPress?: () => void
+    /** Disable interaction (also dims the card). */
+    disabled?: boolean
+    /** Design token modes (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>
+    /** Accessibility label (defaults to `title`). */
+    accessibilityLabel?: string
+    /** Accessibility hint forwarded to the underlying `Pressable`. */
+    accessibilityHint?: string
+}
+
+const toNumber = (value: unknown, fallback: number): number => {
+    if (typeof value === 'number') return Number.isFinite(value) ? value : fallback
+    if (typeof value === 'string') {
+        const parsed = Number(value)
+        return Number.isFinite(parsed) ? parsed : fallback
+    }
+    return fallback
+}
+
+const toFontWeight = (
+    value: unknown,
+    fallback: TextStyle['fontWeight']
+): TextStyle['fontWeight'] => {
+    if (typeof value === 'number') return String(value) as TextStyle['fontWeight']
+    if (typeof value === 'string') return value as TextStyle['fontWeight']
+    return fallback
+}
+
+const normalizeImageSource = (
+    src: AccountCardProps['imageSource']
+): ImageSourcePropType | undefined => {
+    if (src == null) return undefined
+    if (typeof src === 'string') return { uri: src }
+    return src
+}
+
+/**
+ * `AccountCard` — a compact card preview used to represent a linked
+ * financial account in lists / grids.
+ *
+ * Two visual states are supported via the `state` prop:
+ *
+ *  1. `'connected'` (default): renders a small card-art preview, a bold
+ *     `title` and a regular-weight `subtitle` (e.g. masked account number).
+ *  2. `'add'`: renders a soft-tinted placeholder field with a centred `+`
+ *     icon and the `title` underneath, intended as the "add new account"
+ *     entry-point at the end of a list of connected accounts.
+ *
+ * All values resolve through the `accountCard/*` design tokens with
+ * sensible Figma defaults so the card renders correctly out of the box.
+ *
+ * @component
+ * @param {AccountCardProps} props
+ */
+function AccountCard({
+    state = 'connected',
+    title = 'Personal account',
+    subtitle = '**** 5651',
+    imageSource,
+    imageRatio = DEFAULT_IMAGE_RATIO,
+    cardSlot,
+    addIcon = 'ic_add',
+    onPress,
+    disabled = false,
+    modes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+    accessibilityHint,
+}: AccountCardProps) {
+    const iconModes = useMemo(
+        () =>
+            modes === EMPTY_MODES
+                ? ADD_ICON_DEFAULT_MODES
+                : { ...ADD_ICON_DEFAULT_MODES, ...modes },
+        [modes],
+    )
+
+    // ---- Tokens ---------------------------------------------------------
+    const gap = toNumber(getVariableByName('accountCard/gap', modes), 8)
+    const textWrapGap = toNumber(getVariableByName('accountCard/textWrap/gap', modes), 0)
+
+    const titleColor =
+        (getVariableByName('accountCard/title/foreground', modes) as string | null) ?? '#0d0d0f'
+    const titleFontFamily =
+        (getVariableByName('accountCard/title/fontFamily', modes) as string | null) ?? 'JioType Var'
+    const titleFontSize = toNumber(getVariableByName('accountCard/title/fontSize', modes), 12)
+    const titleLineHeight = toNumber(getVariableByName('accountCard/title/lineHeight', modes), 16)
+    const titleFontWeight = toFontWeight(
+        getVariableByName('accountCard/title/fontWeight', modes),
+        '700'
+    )
+
+    const subtitleColor =
+        (getVariableByName('accountCard/subtitle/foreground', modes) as string | null) ?? '#24262b'
+    const subtitleFontFamily =
+        (getVariableByName('accountCard/subtitle/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const subtitleFontSize = toNumber(
+        getVariableByName('accountCard/subtitle/fontSize', modes),
+        12
+    )
+    const subtitleLineHeight = toNumber(
+        getVariableByName('accountCard/subtitle/lineHeight', modes),
+        16
+    )
+    const subtitleFontWeight = toFontWeight(
+        getVariableByName('accountCard/subtitle/fontWeight', modes),
+        '400'
+    )
+
+    const addFieldRadius = toNumber(
+        getVariableByName('accountCard/addItemField/radius', modes),
+        8
+    )
+    const addFieldBg =
+        (getVariableByName('accountCard/addItemField/bg', modes) as string | null) ?? '#ede8ff'
+
+    const addIconColor =
+        (getVariableByName('iconButton/icon/color', iconModes) as string | null) ?? '#5d00b5'
+    const addIconSize = toNumber(getVariableByName('iconButton/icon/size', iconModes), 16)
+
+    // ---- Styles ---------------------------------------------------------
+    const titleStyle: TextStyle = {
+        color: titleColor,
+        fontFamily: titleFontFamily,
+        fontSize: titleFontSize,
+        lineHeight: titleLineHeight,
+        fontWeight: titleFontWeight,
+        width: '100%',
+    }
+
+    const subtitleStyle: TextStyle = {
+        color: subtitleColor,
+        fontFamily: subtitleFontFamily,
+        fontSize: subtitleFontSize,
+        lineHeight: subtitleLineHeight,
+        fontWeight: subtitleFontWeight,
+        width: '100%',
+    }
+
+    const imageBoxStyle: ViewStyle = {
+        width: '100%',
+        aspectRatio: imageRatio,
+        overflow: 'hidden',
+    }
+
+    // RN's `<Image>` accepts `ImageStyle`, which has a narrower `overflow`
+    // union than `ViewStyle`. Build the image-only style separately so the
+    // shared box dimensions can be reused without a cast.
+    const imageStyle: ImageStyle = {
+        width: '100%',
+        aspectRatio: imageRatio,
+    }
+
+    const addFieldStyle: ViewStyle = {
+        ...imageBoxStyle,
+        backgroundColor: addFieldBg,
+        borderRadius: addFieldRadius,
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+
+    // ---- Image / placeholder area --------------------------------------
+    const renderCardArea = (): React.ReactNode => {
+        if (cardSlot !== undefined && cardSlot !== null) {
+            const processed = cloneChildrenWithModes(cardSlot, modes)
+            return (
+                <View style={imageBoxStyle} pointerEvents="box-none">
+                    {processed.length === 1 ? processed[0] : processed}
+                </View>
+            )
+        }
+
+        if (state === 'add') {
+            return (
+                <View style={addFieldStyle} accessibilityElementsHidden importantForAccessibility="no">
+                    <Icon name={addIcon} size={addIconSize} color={addIconColor} />
+                </View>
+            )
+        }
+
+        const normalized = normalizeImageSource(imageSource)
+        if (normalized) {
+            return (
+                <RNImage
+                    source={normalized}
+                    style={imageStyle}
+                    resizeMode="cover"
+                    accessibilityElementsHidden
+                    importantForAccessibility="no"
+                />
+            )
+        }
+
+        return <View style={imageBoxStyle} />
+    }
+
+    // ---- Pressable wiring ----------------------------------------------
+    // Keep React state out of the press path. `Pressable`'s style callback
+    // applies the pressed visual without a re-render.
+    const userHandlersRef = useRef<{
+        onPressIn?: (e: any) => void
+        onPressOut?: (e: any) => void
+    }>({})
+
+    const handlePressIn = useCallback((e: any) => {
+        userHandlersRef.current.onPressIn?.(e)
+    }, [])
+    const handlePressOut = useCallback((e: any) => {
+        userHandlersRef.current.onPressOut?.(e)
+    }, [])
+
+    const containerStyle: ViewStyle = useMemo(
+        () => ({
+            width: '100%',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            gap,
+            opacity: disabled ? 0.5 : 1,
+        }),
+        [gap, disabled]
+    )
+
+    const pressableStyle = useCallback(
+        ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+            containerStyle,
+            style,
+            pressed && !disabled && onPress ? pressedOverlayStyle : null,
+        ],
+        [containerStyle, style, disabled, onPress]
+    )
+
+    const showSubtitle = state === 'connected' && subtitle != null && subtitle !== ''
+
+    const a11yRole = onPress ? 'button' : undefined
+    const a11yLabel = accessibilityLabel ?? title
+
+    const content = (
+        <>
+            {renderCardArea()}
+            {(title != null && title !== '') || showSubtitle ? (
+                <View
+                    style={{
+                        width: '100%',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        gap: textWrapGap,
+                    }}
+                >
+                    {title != null && title !== '' ? (
+                        <Text style={titleStyle} numberOfLines={1}>
+                            {title}
+                        </Text>
+                    ) : null}
+                    {showSubtitle ? (
+                        <Text style={subtitleStyle} numberOfLines={1}>
+                            {subtitle}
+                        </Text>
+                    ) : null}
+                </View>
+            ) : null}
+        </>
+    )
+
+    if (!onPress) {
+        return (
+            <View
+                accessibilityLabel={a11yLabel}
+                accessibilityHint={accessibilityHint}
+                style={[containerStyle, style]}
+            >
+                {content}
+            </View>
+        )
+    }
+
+    return (
+        <Pressable
+            accessibilityRole={a11yRole}
+            accessibilityLabel={a11yLabel}
+            accessibilityHint={accessibilityHint}
+            accessibilityState={{ disabled }}
+            onPress={disabled ? undefined : onPress}
+            disabled={disabled}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            unstable_pressDelay={PRESS_DELAY}
+            style={pressableStyle}
+        >
+            {content}
+        </Pressable>
+    )
+}
+
+export default React.memo(AccountCard)

package/src/components/AppBar/AppBar.tsx

@@ -89,12 +89,13 @@ export default function AppBar({
   const containerStyle: ViewStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    // No `justifyContent` here: with the inline middle slot using `flex: 1`
+    // the three sections lay out naturally (leading | middle | actions).
+    // When middleSlot is absent we fall back to `space-between` at the wrapper
+    // level so leading & actions still anchor to the edges.
     paddingHorizontal: paddingHorizontal ?? 16,
     paddingVertical: paddingVertical ?? (isMain ? 16 : 10),
     backgroundColor: backgroundColor ?? '#FFFFFF',
-    // We can set minHeight if we want to enforce consistency, but padding should dictate it mostly.
-    // Figma shows specific heights implicitly via padding + content.
     // MainPage: h=68 (16 top/bot padding? 36 height content?)
     // SubPage: h=52
   }
@@ -159,9 +160,18 @@ export default function AppBar({
     ? <View style={actionsStyle}>{cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)}</View>
     : null
 
+  // When there is no middleSlot we want leading & actions pinned to the
+  // outer edges, so we apply `space-between` at the wrapper. With a middle
+  // slot present, the middle (flex: 1) absorbs the remaining space, so
+  // `space-between` is a no-op.
+  const wrapperStyle: ViewStyle = {
+    ...containerStyle,
+    justifyContent: processedMiddle ? 'flex-start' : 'space-between',
+  }
+
   return (
     <View
-      style={[containerStyle, style]}
+      style={[wrapperStyle, style]}
       accessibilityRole="header"
       accessibilityLabel={undefined}
       {...(accessibilityHint ? { accessibilityHint } : {})}
@@ -172,21 +182,22 @@ export default function AppBar({
         {processedLeading}
       </View>
 
-      {/* Middle Section (Absolute centered often, or flex? Figma shows "Slot 'Middle'" inside a wrapper that is absolute center) */}
-      {/* Figma: "absolute flex h-full items-center justify-center left-1/2 ... translate-x-[-50%]" */}
-      {/* We should only render this wrapper if there IS middle content, to avoid z-index blocking hits. */}
+      {/*
+       * Middle Section — rendered as an in-flow flex item (`flex: 1`) so it
+       * occupies the space between leading and actions but never overflows
+       * past them. This fixes wide children (e.g. <LinearProgress /> with
+       * width: '100%') stretching edge-to-edge under the leading/actions.
+       * `minWidth: 0` is required so the flex item can shrink below its
+       * content's intrinsic width on platforms that respect it (web).
+       */}
       {processedMiddle && (
         <View
           style={{
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
+            flex: 1,
+            minWidth: 0,
             alignItems: 'center',
             justifyContent: 'center',
-            zIndex: -1, // Behind actions if overlap? Or should be on top? 
-            // Usually middle title shouldn't block actions. `pointerEvents="box-none"` is safer.
+            paddingHorizontal: 8,
           }}
           pointerEvents="box-none"
         >

package/src/components/CardBankAccount/CardBankAccount.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
     View,
     Text,
@@ -66,7 +66,14 @@ export type CardBankAccountProps = {
      * `false`/`null` to hide it entirely.
      */
     footer?: React.ReactNode | false | null
-    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    /**
+     * Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`).
+     *
+     * Defaults to `{ 'Button / Size': 'S', AppearanceBrand: 'Secondary',
+     * Emphasis: 'Medium' }` so the footer button matches the Figma reference
+     * out of the box. Caller-supplied modes are merged on top and can
+     * override any of the default keys.
+     */
     modes?: Record<string, any>
     /** Container style override. */
     style?: StyleProp<ViewStyle>
@@ -80,6 +87,14 @@ const DEFAULT_ITEMS: CardBankAccountItem[] = [
     { label: 'Last updated', value: 'Korem ipsum' },
 ]
 
+// Component-level defaults that match the Figma reference. Caller-provided
+// `modes` are merged on top so every key here can be overridden per-instance.
+const DEFAULT_MODES: Readonly<Record<string, any>> = Object.freeze({
+    'Button / Size': 'S',
+    AppearanceBrand: 'Secondary',
+    Emphasis: 'Medium',
+})
+
 const toNumber = (value: unknown, fallback: number): number => {
     if (typeof value === 'number') return Number.isFinite(value) ? value : fallback
     if (typeof value === 'string') {
@@ -119,10 +134,21 @@ function CardBankAccount({
     buttonLabel = 'Button',
     onButtonPress,
     footer,
-    modes = EMPTY_MODES,
+    modes: propModes = EMPTY_MODES,
     style,
     accessibilityLabel,
 }: CardBankAccountProps) {
+    // Merge caller modes on top of `DEFAULT_MODES` so every default key
+    // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
+    // per-instance while still applying out of the box.
+    const modes = useMemo(
+        () =>
+            propModes === EMPTY_MODES
+                ? DEFAULT_MODES
+                : { ...DEFAULT_MODES, ...propModes },
+        [propModes],
+    )
+
     const background =
         (getVariableByName('bankAccountCard/background', modes) as string | null) ?? '#ffffff'
     const radius = toNumber(getVariableByName('bankAccountCard/radius', modes), 16)