jfs-components 0.0.72 → 0.0.74

package/CHANGELOG.md

@@ -4,6 +4,34 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.0.74] - 2026-05-19
+
+- Added new account and onboarding components: `AccountCard` (connected/add variants), `PageHero`, `LottieIntroBlock`, and `PoweredByLabel`.
+- Added new selection primitives: `Dropdown` + `DropdownItem` (compound API) and `DropdownInput` (options-based form control).
+- Added Storybook coverage for the existing `Icon` primitive (no API change).
+- Major `FormField` rewrite — re-bound directly to React Native `TextInput` (no longer wraps `TextInput` component), gained `number` / `phone` / `url` types, `Form` context integration, and improved Figma/token alignment.
+- Compound `Tooltip` upgrade — `TooltipContent` now acts as a vertical slot with `gap` and `alignItems` props, and exports `TooltipPlacement` / trigger / content types from the package barrel.
+- `Text` now accepts JSX `children` (drop-in `<Text>label</Text>` works) in addition to the `text` prop; `AppBar` middle slot lays out via `flex: 1` with `space-between` fallback when absent.
+- `CheckboxItem` gained a `control` prop (`leading` / `trailing`) that swaps the checkbox and the end slot to either edge of the row.
+- `CardBankAccount` ships sensible default `Button / Size` + Appearance modes so the footer button matches Figma out of the box.
+- Figma/token sync pass across `FormField`, `CardBankAccount`, `CardFinancialCondition`, `CheckboxItem`, `CircularProgressBar`, `CoverageBarComparison`, `DonutChart`, `DonutChartSummary`, `Gauge`, `LinearProgress`, `MetricLegendItem`, `MonthlyStatusGrid`, `Nudge`, `RangeTrack`, `SavingsGoalSummary`, and `SegmentedTrack`; refreshed Coin Variables tokens, `.token-metadata.json`, and icons registry.
+- Repo cleanup: removed the legacy `example/` app, `.expo/` artifacts, and the `example` / `example:install` scripts; updated `tsconfig.build.json` and `scripts/generate-component-docs.js`; added `.tgz` and `.expo/` to `.gitignore`.
+
+---
+
+## [0.0.73] - 2026-05-15
+
+- Added new chart, progress, and coverage components: `DonutChart`, `DonutChartSummary`, `LinearProgress`, `SavingsGoalSummary`, `CoverageRing`, `CoverageBarComparison`, `MonthlyStatusGrid`, `MetricLegendItem`, `RangeTrack`, `SegmentedTrack`, `StatGroup`, `StrengthIndicator`, and `SummaryTile`.
+- Added new form/selection primitives: `AccordionCheckbox`, `CheckboxGroup`, `CheckboxItem`, and `Radio` (renamed from `RadioButton`; the old name is kept as a deprecated re-export).
+- Added new card and badge components: `CardBankAccount`, `CardInsight`, `ProductOverview`, and `BrandChip`.
+- Major `OTP` overhaul (new API, stories, and MDX) and `LinearMeter` refactor; `Carousel` pagination/maxHeight refresh and `HoldingsCard` migration to `Radio`.
+- Enhanced `CircularProgressBar` with an in-ring `supportText` caption (driven by `circularProgressBar/supportText/*` tokens) and a centered text stack; reworked `StatItem` API and stories.
+- Token surface refresh: added `XS` to `Button / Size` (surfaced on `Button`, `CardCTA`, `IconButton`); split `LinearProgress` / `SavingsGoalSummary` `Appearance / DataViz` into `Appearance Type` + `AppearanceBrand` + `AppearanceSystem` and renamed `Emphasis / DataViz` → `Emphasis`; added `Auto` status + `FormField States` to `SupportText`, `SupportTextIcon`, `InputSearch`; added `Error` state and `Color Mode` to `FormField`; added `Page type` (MainPage / SubPage) to `Title`.
+- New `number-utils` (+ tests) exported from `src/utils`; refreshed icons registry, Coin Variables tokens, and `.token-metadata.json`.
+- Expanded Storybook and MDX coverage for all new and updated components, plus docs for `HStack`, `VStack`, and `Section`.
+
+---
+
 ## [0.0.72] - 2026-05-04
 
 High-level summary (one line per point):

package/lib/commonjs/components/AccordionCheckbox/AccordionCheckbox.js

@@ -0,0 +1,239 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Checkbox = _interopRequireDefault(require("../Checkbox/Checkbox"));
+var _Divider = _interopRequireDefault(require("../Divider/Divider"));
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+if (_reactNative.Platform.OS === 'android' && _reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
+  _reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+/**
+ * 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 = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const isExpandedControlled = controlledExpanded !== undefined;
+  const [internalExpanded, setInternalExpanded] = (0, _react.useState)(defaultExpanded);
+  const isExpanded = isExpandedControlled ? controlledExpanded : internalExpanded;
+  const isCheckedControlled = controlledChecked !== undefined;
+  const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
+  const isChecked = isCheckedControlled ? controlledChecked : internalChecked;
+  const handleToggleExpanded = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
+    const next = !isExpanded;
+    if (!isExpandedControlled) {
+      setInternalExpanded(next);
+    }
+    onExpandedChange?.(next);
+  }, [disabled, isExpanded, isExpandedControlled, onExpandedChange]);
+  const handleToggleChecked = (0, _react.useCallback)(next => {
+    if (disabled) return;
+    if (!isCheckedControlled) {
+      setInternalChecked(next);
+    }
+    onCheckedChange?.(next);
+  }, [disabled, isCheckedControlled, onCheckedChange]);
+  const background = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/background', modes) ?? '#ffffff';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/radius', modes) ?? 12;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/padding/horizontal', modes) ?? 12;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/padding/vertical', modes) ?? 16;
+  const containerGap = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/gap', modes) ?? 12;
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/border/color', modes) ?? '#ebebed';
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/border/size', modes) ?? 1;
+  const headerGap = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/header/gap', modes) ?? 12;
+  const headerPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/header/padding/horizontal', modes) ?? 0;
+  const headerPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/header/padding/vertical', modes) ?? 0;
+  const headerWrapGap = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/header/wrap/gap', modes) ?? 12;
+  const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/textWrap/gap', modes) ?? 2;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/title/color', modes) ?? '#000000';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/title/fontSize', modes) ?? 14;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/title/fontFamily', modes) ?? 'JioType Var';
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/title/lineHeight', modes) ?? 18;
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/title/fontWeight', modes) ?? 600;
+  const titleFontWeight = String(titleFontWeightRaw);
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/subtitle/color', modes) ?? '#23190a';
+  const subtitleFontSize = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/subtitle/fontSize', modes) ?? 12;
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/subtitle/fontFamily', modes) ?? 'JioType Var';
+  const subtitleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/subtitle/lineHeight', modes) ?? 16;
+  const subtitleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/subtitle/fontWeight', modes) ?? 500;
+  const subtitleFontWeight = String(subtitleFontWeightRaw);
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/icon/color', modes) ?? '#000000';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/icon/size', modes) ?? 24;
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/content/gap', modes) ?? 0;
+  const contentPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/content/padding/top', modes) ?? 8;
+  const contentPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/content/padding/bottom', modes) ?? 0;
+  const contentPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('accordionCheckbox/content/padding/horizontal', modes) ?? 0;
+  const containerStyle = {
+    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 = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: headerGap,
+    paddingHorizontal: headerPaddingHorizontal,
+    paddingVertical: headerPaddingVertical
+  };
+  const wrapStyle = {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: headerWrapGap
+  };
+  const textWrapStyle = {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: textWrapGap
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight
+  };
+  const subtitleStyle = {
+    color: subtitleColor,
+    fontSize: subtitleFontSize,
+    lineHeight: subtitleLineHeight,
+    fontFamily: subtitleFontFamily,
+    fontWeight: subtitleFontWeight
+  };
+  const contentStyle = {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    justifyContent: 'center',
+    gap: contentGap,
+    paddingTop: contentPaddingTop,
+    paddingBottom: contentPaddingBottom,
+    paddingHorizontal: contentPaddingHorizontal
+  };
+  const a11yLabel = accessibilityLabel ?? title;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: wrapStyle,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+          checked: isChecked,
+          onValueChange: handleToggleChecked,
+          disabled: disabled,
+          modes: modes,
+          accessibilityLabel: typeof title === 'string' ? `Select ${title}` : undefined
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: textWrapStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: titleStyle,
+            numberOfLines: 1,
+            selectable: false,
+            children: title
+          }), subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: subtitleStyle,
+            numberOfLines: 1,
+            selectable: false,
+            children: subtitle
+          }) : null]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: isExpanded ? 'ic_chevron_up' : 'ic_chevron_down',
+        size: iconSize,
+        color: iconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })]
+    }), isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+        modes: modes
+      }), children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: contentStyle,
+        children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
+      }) : null]
+    }) : null]
+  });
+}
+var _default = exports.default = AccordionCheckbox;

package/lib/commonjs/components/AccountCard/AccountCard.js

@@ -0,0 +1,247 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const IS_IOS = _reactNative.Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+const DEFAULT_IMAGE_RATIO = 125 / 82;
+const pressedOverlayStyle = {
+  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 = Object.freeze({
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Low',
+  "Button / Size": "M"
+});
+const toNumber = (value, fallback) => {
+  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, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+const normalizeImageSource = src => {
+  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 = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  const iconModes = (0, _react.useMemo)(() => modes === _reactUtils.EMPTY_MODES ? ADD_ICON_DEFAULT_MODES : {
+    ...ADD_ICON_DEFAULT_MODES,
+    ...modes
+  }, [modes]);
+
+  // ---- Tokens ---------------------------------------------------------
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('accountCard/gap', modes), 8);
+  const textWrapGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('accountCard/textWrap/gap', modes), 0);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('accountCard/title/foreground', modes) ?? '#0d0d0f';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('accountCard/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('accountCard/title/fontSize', modes), 12);
+  const titleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('accountCard/title/lineHeight', modes), 16);
+  const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('accountCard/title/fontWeight', modes), '700');
+  const subtitleColor = (0, _figmaVariablesResolver.getVariableByName)('accountCard/subtitle/foreground', modes) ?? '#24262b';
+  const subtitleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('accountCard/subtitle/fontFamily', modes) ?? 'JioType Var';
+  const subtitleFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('accountCard/subtitle/fontSize', modes), 12);
+  const subtitleLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('accountCard/subtitle/lineHeight', modes), 16);
+  const subtitleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('accountCard/subtitle/fontWeight', modes), '400');
+  const addFieldRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('accountCard/addItemField/radius', modes), 8);
+  const addFieldBg = (0, _figmaVariablesResolver.getVariableByName)('accountCard/addItemField/bg', modes) ?? '#ede8ff';
+  const addIconColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/color', iconModes) ?? '#5d00b5';
+  const addIconSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/size', iconModes), 16);
+
+  // ---- Styles ---------------------------------------------------------
+  const titleStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontWeight: titleFontWeight,
+    width: '100%'
+  };
+  const subtitleStyle = {
+    color: subtitleColor,
+    fontFamily: subtitleFontFamily,
+    fontSize: subtitleFontSize,
+    lineHeight: subtitleLineHeight,
+    fontWeight: subtitleFontWeight,
+    width: '100%'
+  };
+  const imageBoxStyle = {
+    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 = {
+    width: '100%',
+    aspectRatio: imageRatio
+  };
+  const addFieldStyle = {
+    ...imageBoxStyle,
+    backgroundColor: addFieldBg,
+    borderRadius: addFieldRadius,
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  // ---- Image / placeholder area --------------------------------------
+  const renderCardArea = () => {
+    if (cardSlot !== undefined && cardSlot !== null) {
+      const processed = (0, _reactUtils.cloneChildrenWithModes)(cardSlot, modes);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: imageBoxStyle,
+        pointerEvents: "box-none",
+        children: processed.length === 1 ? processed[0] : processed
+      });
+    }
+    if (state === 'add') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: addFieldStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: addIcon,
+          size: addIconSize,
+          color: addIconColor
+        })
+      });
+    }
+    const normalized = normalizeImageSource(imageSource);
+    if (normalized) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: normalized,
+        style: imageStyle,
+        resizeMode: "cover",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = (0, _react.useRef)({});
+  const handlePressIn = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = (0, _react.useCallback)(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const containerStyle = (0, _react.useMemo)(() => ({
+    width: '100%',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap,
+    opacity: disabled ? 0.5 : 1
+  }), [gap, disabled]);
+  const pressableStyle = (0, _react.useCallback)(({
+    pressed
+  }) => [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 = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [renderCardArea(), title != null && title !== '' || showSubtitle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        width: '100%',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: textWrapGap
+      },
+      children: [title != null && title !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleStyle,
+        numberOfLines: 1,
+        children: title
+      }) : null, showSubtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: subtitleStyle,
+        numberOfLines: 1,
+        children: subtitle
+      }) : null]
+    }) : null]
+  });
+  if (!onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      accessibilityLabel: a11yLabel,
+      accessibilityHint: accessibilityHint,
+      style: [containerStyle, style],
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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,
+    children: content
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(AccountCard);

package/lib/commonjs/components/AppBar/AppBar.js

@@ -47,12 +47,13 @@ function AppBar({
   const containerStyle = {
     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
   };
@@ -115,8 +116,17 @@ function AppBar({
     style: actionsStyle,
     children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(actionsSlot), modes)
   }) : 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 = {
+    ...containerStyle,
+    justifyContent: processedMiddle ? 'flex-start' : 'space-between'
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [containerStyle, style],
+    style: [wrapperStyle, style],
     accessibilityRole: "header",
     accessibilityLabel: undefined,
     ...(accessibilityHint ? {
@@ -131,15 +141,11 @@ function AppBar({
       children: processedLeading
     }), processedMiddle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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",
       children: processedMiddle