jfs-components 0.0.72 → 0.0.74

package/src/components/AccordionCheckbox/AccordionCheckbox.tsx

@@ -0,0 +1,323 @@
+import React, { useCallback, useState } from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+  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 Checkbox from '../Checkbox/Checkbox'
+import Divider from '../Divider/Divider'
+import Icon from '../../icons/Icon'
+
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true)
+}
+
+export type AccordionCheckboxProps = {
+  /** Title shown next to the checkbox (e.g. "Axis Bank"). */
+  title?: string
+  /** Subtitle shown beneath the title (e.g. "3 accounts"). */
+  subtitle?: string
+  /** Initial expanded state (uncontrolled). Defaults to `false`. */
+  defaultExpanded?: boolean
+  /** Controlled expanded state. When provided, the component becomes controlled. */
+  expanded?: boolean
+  /** Callback fired whenever the expanded state changes. */
+  onExpandedChange?: (expanded: boolean) => void
+  /** Initial checked state of the header checkbox (uncontrolled). */
+  defaultChecked?: boolean
+  /** Controlled checked state of the header checkbox. */
+  checked?: boolean
+  /** Callback fired whenever the header checkbox value changes. */
+  onCheckedChange?: (checked: boolean) => void
+  /** Disables the entire component (header press + checkbox + content). */
+  disabled?: boolean
+  /**
+   * Slot — content rendered below the divider when expanded. Typically a
+   * `CheckboxGroup` of child `CheckboxItem`s. The `modes` prop is forwarded
+   * recursively to every child.
+   */
+  children?: React.ReactNode
+  /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+  modes?: Record<string, any>
+  /** Override outer container styles. */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label for the header press target. Defaults to `title`. */
+  accessibilityLabel?: string
+}
+
+/**
+ * AccordionCheckbox composes a header (with a `Checkbox`, title, subtitle and
+ * chevron) and a collapsible content slot. It mirrors the Figma
+ * "Accordion Checkbox" component.
+ *
+ * Two independent interactions live inside the header:
+ *  - **Pressing the checkbox** toggles the parent checked state via
+ *    `onCheckedChange` (typically used for "select all" behaviour).
+ *  - **Pressing anywhere else on the header** toggles the expanded state via
+ *    `onExpandedChange`.
+ *
+ * When expanded, a divider is shown and `children` are rendered with `modes`
+ * automatically forwarded through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @param {AccordionCheckboxProps} props
+ *
+ * @example
+ * ```tsx
+ * <AccordionCheckbox
+ *   title="Axis Bank"
+ *   subtitle="3 accounts"
+ *   defaultExpanded
+ *   defaultChecked
+ *   modes={{ 'Color Mode': 'Light' }}
+ * >
+ *   <CheckboxGroup>
+ *     <CheckboxItem label="Fixed deposit • 0245" />
+ *     <CheckboxItem label="Recurring deposit • 1182" />
+ *     <CheckboxItem label="Mutual fund • Equity" />
+ *   </CheckboxGroup>
+ * </AccordionCheckbox>
+ * ```
+ */
+function AccordionCheckbox({
+  title = 'Axis Bank',
+  subtitle = '3 accounts',
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  defaultChecked = false,
+  checked: controlledChecked,
+  onCheckedChange,
+  disabled = false,
+  children,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+}: AccordionCheckboxProps) {
+  const isExpandedControlled = controlledExpanded !== undefined
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
+  const isExpanded = isExpandedControlled ? controlledExpanded : internalExpanded
+
+  const isCheckedControlled = controlledChecked !== undefined
+  const [internalChecked, setInternalChecked] = useState(defaultChecked)
+  const isChecked = isCheckedControlled ? controlledChecked : internalChecked
+
+  const handleToggleExpanded = useCallback(() => {
+    if (disabled) return
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    const next = !isExpanded
+    if (!isExpandedControlled) {
+      setInternalExpanded(next)
+    }
+    onExpandedChange?.(next)
+  }, [disabled, isExpanded, isExpandedControlled, onExpandedChange])
+
+  const handleToggleChecked = useCallback(
+    (next: boolean) => {
+      if (disabled) return
+      if (!isCheckedControlled) {
+        setInternalChecked(next)
+      }
+      onCheckedChange?.(next)
+    },
+    [disabled, isCheckedControlled, onCheckedChange]
+  )
+
+  const background =
+    (getVariableByName('accordionCheckbox/background', modes) as string | null) ?? '#ffffff'
+  const radius = (getVariableByName('accordionCheckbox/radius', modes) as number | null) ?? 12
+  const paddingHorizontal =
+    (getVariableByName('accordionCheckbox/padding/horizontal', modes) as number | null) ?? 12
+  const paddingVertical =
+    (getVariableByName('accordionCheckbox/padding/vertical', modes) as number | null) ?? 16
+  const containerGap =
+    (getVariableByName('accordionCheckbox/gap', modes) as number | null) ?? 12
+  const borderColor =
+    (getVariableByName('accordionCheckbox/border/color', modes) as string | null) ?? '#ebebed'
+  const borderSize =
+    (getVariableByName('accordionCheckbox/border/size', modes) as number | null) ?? 1
+
+  const headerGap =
+    (getVariableByName('accordionCheckbox/header/gap', modes) as number | null) ?? 12
+  const headerPaddingHorizontal =
+    (getVariableByName('accordionCheckbox/header/padding/horizontal', modes) as number | null) ?? 0
+  const headerPaddingVertical =
+    (getVariableByName('accordionCheckbox/header/padding/vertical', modes) as number | null) ?? 0
+  const headerWrapGap =
+    (getVariableByName('accordionCheckbox/header/wrap/gap', modes) as number | null) ?? 12
+
+  const textWrapGap =
+    (getVariableByName('accordionCheckbox/textWrap/gap', modes) as number | null) ?? 2
+
+  const titleColor =
+    (getVariableByName('accordionCheckbox/title/color', modes) as string | null) ?? '#000000'
+  const titleFontSize =
+    (getVariableByName('accordionCheckbox/title/fontSize', modes) as number | null) ?? 14
+  const titleFontFamily =
+    (getVariableByName('accordionCheckbox/title/fontFamily', modes) as string | null) ?? 'JioType Var'
+  const titleLineHeight =
+    (getVariableByName('accordionCheckbox/title/lineHeight', modes) as number | null) ?? 18
+  const titleFontWeightRaw =
+    getVariableByName('accordionCheckbox/title/fontWeight', modes) ?? 600
+  const titleFontWeight = String(titleFontWeightRaw) as TextStyle['fontWeight']
+
+  const subtitleColor =
+    (getVariableByName('accordionCheckbox/subtitle/color', modes) as string | null) ?? '#23190a'
+  const subtitleFontSize =
+    (getVariableByName('accordionCheckbox/subtitle/fontSize', modes) as number | null) ?? 12
+  const subtitleFontFamily =
+    (getVariableByName('accordionCheckbox/subtitle/fontFamily', modes) as string | null) ?? 'JioType Var'
+  const subtitleLineHeight =
+    (getVariableByName('accordionCheckbox/subtitle/lineHeight', modes) as number | null) ?? 16
+  const subtitleFontWeightRaw =
+    getVariableByName('accordionCheckbox/subtitle/fontWeight', modes) ?? 500
+  const subtitleFontWeight = String(subtitleFontWeightRaw) as TextStyle['fontWeight']
+
+  const iconColor =
+    (getVariableByName('accordionCheckbox/icon/color', modes) as string | null) ?? '#000000'
+  const iconSize =
+    (getVariableByName('accordionCheckbox/icon/size', modes) as number | null) ?? 24
+
+  const contentGap =
+    (getVariableByName('accordionCheckbox/content/gap', modes) as number | null) ?? 0
+  const contentPaddingTop =
+    (getVariableByName('accordionCheckbox/content/padding/top', modes) as number | null) ?? 8
+  const contentPaddingBottom =
+    (getVariableByName('accordionCheckbox/content/padding/bottom', modes) as number | null) ?? 0
+  const contentPaddingHorizontal =
+    (getVariableByName('accordionCheckbox/content/padding/horizontal', modes) as number | null) ?? 0
+
+  const containerStyle: ViewStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    paddingHorizontal,
+    paddingVertical,
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: containerGap,
+    overflow: 'hidden',
+    ...(isExpanded
+      ? { borderWidth: borderSize, borderColor }
+      : null),
+    ...(disabled ? { opacity: 0.6 } : null),
+  }
+
+  const headerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: headerGap,
+    paddingHorizontal: headerPaddingHorizontal,
+    paddingVertical: headerPaddingVertical,
+  }
+
+  const wrapStyle: ViewStyle = {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: headerWrapGap,
+  }
+
+  const textWrapStyle: ViewStyle = {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: textWrapGap,
+  }
+
+  const titleStyle: TextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight,
+  }
+
+  const subtitleStyle: TextStyle = {
+    color: subtitleColor,
+    fontSize: subtitleFontSize,
+    lineHeight: subtitleLineHeight,
+    fontFamily: subtitleFontFamily,
+    fontWeight: subtitleFontWeight,
+  }
+
+  const contentStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    justifyContent: 'center',
+    gap: contentGap,
+    paddingTop: contentPaddingTop,
+    paddingBottom: contentPaddingBottom,
+    paddingHorizontal: contentPaddingHorizontal,
+  }
+
+  const a11yLabel = accessibilityLabel ?? title
+
+  return (
+    <View style={[containerStyle, style]}>
+      <Pressable
+        onPress={handleToggleExpanded}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isExpanded, disabled }}
+        accessibilityLabel={a11yLabel}
+        accessibilityHint={isExpanded ? 'Collapse' : 'Expand'}
+        style={({ pressed }) => [
+          headerStyle,
+          pressed && !disabled ? { opacity: 0.9 } : null,
+        ]}
+      >
+        <View style={wrapStyle}>
+          <Checkbox
+            checked={isChecked}
+            onValueChange={handleToggleChecked}
+            disabled={disabled}
+            modes={modes}
+            accessibilityLabel={
+              typeof title === 'string' ? `Select ${title}` : undefined
+            }
+          />
+          <View style={textWrapStyle}>
+            <Text style={titleStyle} numberOfLines={1} selectable={false}>
+              {title}
+            </Text>
+            {subtitle ? (
+              <Text style={subtitleStyle} numberOfLines={1} selectable={false}>
+                {subtitle}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+        <Icon
+          name={isExpanded ? 'ic_chevron_up' : 'ic_chevron_down'}
+          size={iconSize}
+          color={iconColor}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        />
+      </Pressable>
+
+      {isExpanded ? (
+        <>
+          <Divider modes={modes} />
+          {children ? (
+            <View style={contentStyle}>
+              {cloneChildrenWithModes(children, modes)}
+            </View>
+          ) : null}
+        </>
+      ) : null}
+    </View>
+  )
+}
+
+export default AccordionCheckbox

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)