jfs-components 0.0.72 → 0.0.74

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/BrandChip/BrandChip.tsx

@@ -0,0 +1,235 @@
+import React, { useMemo } from 'react'
+import {
+  Pressable,
+  Text,
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Avatar from '../Avatar/Avatar'
+
+export type BrandChipProps = {
+  /** Visible label (e.g. `"Axis Bank • 0245"`). */
+  label?: string
+  /**
+   * Image shown in the avatar. Forwarded to the underlying `Avatar`'s
+   * `imageSource` prop. Pass a `require()`-ed asset, an `{ uri }` object
+   * or a remote URL string. Ignored when `avatarSlot` is provided.
+   */
+  imageSource?: ImageSourcePropType | string
+  /**
+   * Slot replacing the default `Avatar`. Receives `modes` recursively, so
+   * inner `Avatar` / `IconCapsule` instances inherit theming.
+   */
+  avatarSlot?: React.ReactNode
+  /** Optional press handler — when provided, the chip becomes a `Pressable`. */
+  onPress?: () => void
+  /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+  modes?: Record<string, any>
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Label style override. */
+  labelStyle?: StyleProp<TextStyle>
+  /** Accessibility label. Defaults to `label`. */
+  accessibilityLabel?: string
+}
+
+interface BrandChipTokens {
+  containerStyle: ViewStyle
+  labelStyle: TextStyle
+}
+
+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
+}
+
+function resolveBrandChipTokens(modes: Record<string, any>): BrandChipTokens {
+  const background =
+    (getVariableByName('brandChip/background', modes) as string | null) ??
+    '#ffffff'
+  const foreground =
+    (getVariableByName('brandChip/foreground', modes) as string | null) ??
+    '#0d0d0f'
+  const borderColor =
+    (getVariableByName('brandChip/border/color', modes) as string | null) ??
+    '#e0e0e3'
+  const borderSize = toNumber(
+    getVariableByName('brandChip/border/size', modes),
+    1
+  )
+  const gap = toNumber(getVariableByName('brandChip/gap', modes), 8)
+  const paddingLeft = toNumber(
+    getVariableByName('brandChip/padding/left', modes),
+    8
+  )
+  const paddingRight = toNumber(
+    getVariableByName('brandChip/padding/right', modes),
+    12
+  )
+  const paddingVertical = toNumber(
+    getVariableByName('brandChip/padding/vertical', modes),
+    5
+  )
+  // The Figma token uses 25000 as a sentinel for "always pill-shaped".
+  // Cap it to a value React Native renders predictably.
+  const radiusRaw = toNumber(getVariableByName('brandChip/radius', modes), 9999)
+  const radius = radiusRaw >= 9999 ? 9999 : radiusRaw
+
+  const fontFamily =
+    (getVariableByName('brandChip/label/fontFamily', modes) as string | null) ??
+    'JioType Var'
+  const fontSize = toNumber(
+    getVariableByName('brandChip/label/fontSize', modes),
+    16
+  )
+  const lineHeight = toNumber(
+    getVariableByName('brandChip/label/lineHeight', modes),
+    21
+  )
+  const fontWeight = toFontWeight(
+    getVariableByName('brandChip/label/fontWeight', modes),
+    '500'
+  )
+
+  return {
+    containerStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      backgroundColor: background,
+      borderColor,
+      borderWidth: borderSize,
+      borderStyle: 'solid',
+      borderRadius: radius,
+      paddingLeft,
+      paddingRight,
+      paddingTop: paddingVertical,
+      paddingBottom: paddingVertical,
+      gap,
+    },
+    labelStyle: {
+      color: foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+    },
+  }
+}
+
+// The Figma reference renders the avatar at 29px which is the `S` size in
+// the Avatar Size collection. Callers can override via `modes`.
+const DEFAULT_AVATAR_SIZE_MODE = 'S'
+
+/**
+ * `BrandChip` renders a compact pill that pairs a small institution avatar
+ * with a short identifier label (e.g. `"Axis Bank • 0245"`). It's typically
+ * used to surface the currently-selected linked account in headers, sticky
+ * bars, or selectors.
+ *
+ * All visual values resolve through the `brandChip/*` design tokens with
+ * sensible Figma defaults so the chip renders correctly out of the box.
+ *
+ * @component
+ * @param {BrandChipProps} props
+ */
+function BrandChip({
+  label = 'Axis Bank • 0245',
+  imageSource,
+  avatarSlot,
+  onPress,
+  modes: propModes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+}: BrandChipProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const avatarModes = useMemo(
+    () => ({ 'Avatar Size': DEFAULT_AVATAR_SIZE_MODE, ...modes }),
+    [modes]
+  )
+
+  const tokens = useMemo(() => resolveBrandChipTokens(modes), [modes])
+
+  const processedAvatarSlot = useMemo(() => {
+    if (!avatarSlot) return null
+    const processed = cloneChildrenWithModes(avatarSlot, avatarModes)
+    return processed.length === 1 ? processed[0] : processed
+  }, [avatarSlot, avatarModes])
+
+  const avatarNode =
+    processedAvatarSlot ??
+    (imageSource !== undefined ? (
+      <Avatar style="Image" imageSource={imageSource} modes={avatarModes} />
+    ) : (
+      <Avatar style="Image" modes={avatarModes} />
+    ))
+
+  const a11yLabel = accessibilityLabel ?? label
+
+  const content = (
+    <>
+      {avatarNode}
+      <Text
+        style={[tokens.labelStyle, labelStyle]}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+      >
+        {label}
+      </Text>
+    </>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={a11yLabel}
+        onPress={onPress}
+        style={[tokens.containerStyle, style]}
+      >
+        {content}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View
+      accessibilityLabel={a11yLabel}
+      style={[tokens.containerStyle, style]}
+    >
+      {content}
+    </View>
+  )
+}
+
+export default React.memo(BrandChip)

package/src/components/CardBankAccount/CardBankAccount.tsx

@@ -0,0 +1,321 @@
+import React, { useMemo } from 'react'
+import {
+    View,
+    Text,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Badge from '../Badge/Badge'
+import Button from '../Button/Button'
+import InstitutionBadge from '../InstitutionBadge/InstitutionBadge'
+import type { UnifiedSource } from '../../utils/MediaSource'
+
+export type CardBankAccountItem = {
+    /** Left-aligned label text (e.g. "Account type"). */
+    label: string
+    /**
+     * Right-aligned value. Strings render through the `text/*` design tokens.
+     * Pass any `ReactNode` to fully customise the value (e.g. obfuscated
+     * account numbers, masked dots, icons).
+     */
+    value: React.ReactNode
+}
+
+export type CardBankAccountProps = {
+    /**
+     * Institution name shown in the header next to the avatar. Pass an empty
+     * string and `headerSlot` to fully replace the default header.
+     */
+    institutionName?: string
+    /**
+     * Avatar source for the institution. Forwarded to the underlying
+     * `InstitutionBadge`. Accepts any {@link UnifiedSource}.
+     */
+    institutionAvatar?: UnifiedSource
+    /**
+     * Header badge. Pass a string to render the default `Badge` with that
+     * label, or a custom `ReactNode` for full control. Pass `false`/`null`
+     * to hide the badge entirely.
+     */
+    badge?: React.ReactNode | string | false | null
+    /**
+     * Override the entire header. When provided, replaces the default
+     * `InstitutionBadge` + `Badge` row.
+     */
+    headerSlot?: React.ReactNode
+    /**
+     * Data rows shown in the middle. Each entry renders a left-aligned label
+     * and a right-aligned value. Defaults to three placeholder rows that
+     * match the Figma reference.
+     */
+    items?: CardBankAccountItem[]
+    /**
+     * Custom content slot rendered between the header and the footer.
+     * Overrides `items` when provided.
+     */
+    children?: React.ReactNode
+    /** Footer button label. Ignored when `footer` is provided. */
+    buttonLabel?: string
+    /** Footer button press handler. Ignored when `footer` is provided. */
+    onButtonPress?: () => void
+    /**
+     * Override the footer. Pass a `ReactNode` for full control or
+     * `false`/`null` to hide it entirely.
+     */
+    footer?: React.ReactNode | false | null
+    /**
+     * 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>
+    /** Accessibility label for the card region. */
+    accessibilityLabel?: string
+}
+
+const DEFAULT_ITEMS: CardBankAccountItem[] = [
+    { label: 'Account type', value: 'Korem ipsum' },
+    { label: 'Account number', value: 'Korem ipsum' },
+    { 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') {
+        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
+}
+
+/**
+ * `CardBankAccount` renders a bank account summary card composed of:
+ *
+ * 1. A header with an `InstitutionBadge` (avatar + bank name) and an
+ *    optional trailing `Badge`.
+ * 2. A configurable list of label/value rows describing the account.
+ * 3. A footer `Button` for the primary action.
+ *
+ * All values resolve through the `bankAccountCard/*` design tokens with
+ * sensible Figma defaults so the card renders correctly out of the box.
+ *
+ * @component
+ * @param {CardBankAccountProps} props
+ */
+function CardBankAccount({
+    institutionName = 'State Bank of India',
+    institutionAvatar,
+    badge,
+    headerSlot,
+    items = DEFAULT_ITEMS,
+    children,
+    buttonLabel = 'Button',
+    onButtonPress,
+    footer,
+    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)
+    const paddingHorizontal = toNumber(
+        getVariableByName('bankAccountCard/padding/horizontal', modes),
+        12
+    )
+    const paddingVertical = toNumber(
+        getVariableByName('bankAccountCard/padding/vertical', modes),
+        16
+    )
+    const gap = toNumber(getVariableByName('bankAccountCard/gap', modes), 16)
+    const headerGap = toNumber(getVariableByName('bankAccountCard/header/gap', modes), 8)
+
+    const listGroupGap = toNumber(getVariableByName('listGroup/gap', modes), 12)
+    const rowGap = toNumber(getVariableByName('listItem/gap', modes), 8)
+
+    const titleColor =
+        (getVariableByName('listItem/title/color', modes) as string | null) ?? '#0f0d0a'
+    const titleFontFamily =
+        (getVariableByName('listItem/title/fontFamily', modes) as string | null) ?? 'JioType Var'
+    const titleFontSize = toNumber(getVariableByName('listItem/title/fontSize', modes), 14)
+    const titleLineHeight = toNumber(getVariableByName('listItem/title/lineHeight', modes), 16)
+    const titleFontWeight = toFontWeight(
+        getVariableByName('listItem/title/fontWeight', modes),
+        '700'
+    )
+
+    const valueColor =
+        (getVariableByName('text/foreground', modes) as string | null) ?? '#000000'
+    const valueFontFamily =
+        (getVariableByName('text/fontFamily', modes) as string | null) ?? 'JioType Var'
+    const valueFontSize = toNumber(getVariableByName('text/fontSize', modes), 14)
+    const valueLineHeight = toNumber(getVariableByName('text/lineHeight', modes), 20)
+    const valueLetterSpacing = toNumber(getVariableByName('text/letterSpacing', modes), -0.5)
+    const valueFontWeight = toFontWeight(getVariableByName('text/fontWeight', modes), '500')
+
+    const labelStyle: TextStyle = {
+        color: titleColor,
+        fontFamily: titleFontFamily,
+        fontSize: titleFontSize,
+        lineHeight: titleLineHeight,
+        fontWeight: titleFontWeight,
+    }
+
+    const valueTextStyle: TextStyle = {
+        color: valueColor,
+        fontFamily: valueFontFamily,
+        fontSize: valueFontSize,
+        lineHeight: valueLineHeight,
+        letterSpacing: valueLetterSpacing,
+        fontWeight: valueFontWeight,
+    }
+
+    const renderBadge = (): React.ReactNode => {
+        if (badge === false || badge === null || badge === undefined) return null
+        if (typeof badge === 'string') {
+            return <Badge label={badge} modes={modes} />
+        }
+        const processed = cloneChildrenWithModes(badge, modes)
+        return processed.length === 1 ? processed[0] : processed
+    }
+
+    const renderHeader = (): React.ReactNode => {
+        if (headerSlot !== undefined) {
+            const processed = cloneChildrenWithModes(headerSlot, modes)
+            return processed.length === 1 ? processed[0] : processed
+        }
+        return (
+            <View
+                style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: headerGap,
+                    width: '100%',
+                }}
+            >
+                <View style={{ flex: 1, minWidth: 0 }}>
+                    <InstitutionBadge
+                        label={institutionName}
+                        {...(institutionAvatar !== undefined ? { source: institutionAvatar } : {})}
+                        modes={modes}
+                    />
+                </View>
+                {renderBadge()}
+            </View>
+        )
+    }
+
+    const renderItems = (): React.ReactNode => {
+        if (children !== undefined && children !== null) {
+            const processed = cloneChildrenWithModes(children, modes)
+            if (processed.length === 0) return null
+            return (
+                <View style={{ width: '100%', gap: listGroupGap }}>
+                    {processed.length === 1 ? processed[0] : processed}
+                </View>
+            )
+        }
+
+        if (!items || items.length === 0) return null
+
+        return (
+            <View style={{ width: '100%', gap: listGroupGap }}>
+                {items.map((item, index) => (
+                    <View
+                        key={`${item.label}-${index}`}
+                        style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: rowGap,
+                            width: '100%',
+                        }}
+                    >
+                        <View style={{ flex: 1, minWidth: 0 }}>
+                            <Text style={labelStyle}>{item.label}</Text>
+                        </View>
+                        {typeof item.value === 'string' || typeof item.value === 'number' ? (
+                            <Text style={valueTextStyle} numberOfLines={1}>
+                                {item.value}
+                            </Text>
+                        ) : (
+                            cloneChildrenWithModes(item.value, modes)
+                        )}
+                    </View>
+                ))}
+            </View>
+        )
+    }
+
+    const renderFooter = (): React.ReactNode => {
+        if (footer === false || footer === null) return null
+        if (footer === undefined) {
+            return (
+                <Button
+                    label={buttonLabel}
+                    {...(onButtonPress ? { onPress: onButtonPress } : {})}
+                    modes={modes}
+                    style={{ width: '100%' }}
+                />
+            )
+        }
+        const processed = cloneChildrenWithModes(footer, modes)
+        return processed.length === 1 ? processed[0] : processed
+    }
+
+    return (
+        <View
+            accessibilityLabel={accessibilityLabel ?? institutionName}
+            style={[
+                {
+                    backgroundColor: background,
+                    borderRadius: radius,
+                    paddingHorizontal,
+                    paddingVertical,
+                    gap,
+                    alignItems: 'flex-start',
+                    width: '100%',
+                },
+                style,
+            ]}
+        >
+            {renderHeader()}
+            {renderItems()}
+            {renderFooter()}
+        </View>
+    )
+}
+
+export default CardBankAccount