jfs-components 0.0.73 → 0.0.77

package/CHANGELOG.md

@@ -4,14 +4,123 @@ 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.77] - 2026-05-25
+
+### Added
+
+- **Skeleton / shimmer loading system** — new `src/skeleton/` module exported from the package root. One context provider (`<SkeletonGroup loading>`) flips an entire subtree into shape-preserving placeholders. The following primitives auto-skeletonize when inside an active group: `Text`, `Image`, `Badge`, `Button`, `IconButton`, `Avatar`, and `Icon`. Each one also accepts a per-instance `loading?: boolean` override. The atomic `<Skeleton kind="text|image|badge|other" width height />` block is available for non-primitive layouts. Honours `prefers-reduced-motion` automatically; one Reanimated clock per group; gradient angle locked to 135° on any aspect ratio.
+- **`LottiePlayer`** — new component that renders Lottie animations using `lottie-react-native` (native) and `lottie-react` (web) via platform extensions (`LottiePlayer.web.tsx`). Both libraries are declared as **optional peer dependencies**, so installing `jfs-components` does not pull them in. Sizing is token-driven via `media/width` / `media/height` (`Media / Output` mode → `L | M | S` = `117 / 70 / 20`) — same contract `PageHero` and `LottieIntroBlock` already use for their media slots.
+- New on-device dev-client scaffold under `example/` (Expo dev client + Storybook + Playground host), with its native deps pinned independently from the library.
+
+### Changed
+
+- `ActionFooter` rewritten (~240 lines): `IconButton` children keep their intrinsic square size, every other child is auto-stretched to share the remaining horizontal space; modes now propagate to all slot children via `cloneChildrenWithModes`.
+- `PageHero` API expansion (+65 lines): improved Figma alignment, new examples in stories/MDX.
+- `RechargeCard` re-aligned to Figma node `2235:937`: container now draws the `rechargeCard/strokeWidth` + `rechargeCard/stroke/color` border, fallback colors for title/spec/disclaimer reset to `#000000`, `minWidth` falls back to `312`, and background fallback is now `#ffffff`. Hardcoded label/style overrides removed — colors come purely from tokens.
+- `RechargeCard` now ships sensible slot mode defaults (overridable via the consumer's `modes` prop):
+  - inner `MoneyValue` defaults to `Context3: 'Balance & Cards'` (36 px / 900-weight Figma scale).
+  - inner `ButtonGroup` defaults to `AppearanceBrand: 'Secondary'`, `Button / Size: 'S'`, `Emphasis: 'High'`. The previous typo (`Appearance.Brand`) is fixed to match the actual `AppearanceBrand` collection, and defaults are spread *before* `modes` so any key can be overridden externally.
+- Figma/token sync pass across `ActionFooter`, `DropdownInput`, `FormField`, `HStack`, `InputSearch`, `Nudge`, `Section`, `Stepper/StepLabel`, `SupportText/SupportTextIcon`, `VStack`, plus refreshed Coin Variables tokens, `.token-metadata.json`, and icons registry.
+- Storybook config: babel-transpile `storybook-assets/` alongside `src/` so Lottie + platform-extension demo files resolve cleanly; `tsconfig.build.json` now excludes `storybook-assets/`.
+
+### Library usage notes
+
+#### Lottie animations
+
+`LottiePlayer` is the only Lottie surface — `lottie-react-native` / `lottie-react` are optional peers and must be installed by the consumer:
+
+```sh
+# React Native (iOS / Android)
+npm install lottie-react-native
+cd ios && pod install
+
+# Web (or react-native-web)
+npm install lottie-react
+```
+
+Then pass a **parsed JSON object** (URI sources are intentionally not supported — web players need data pre-parsed):
+
+```tsx
+import { LottiePlayer, PageHero, LottieIntroBlock } from 'jfs-components'
+import animation from './assets/loader.json'
+
+<LottiePlayer source={animation} />                          // 117×117 (default)
+<LottiePlayer source={animation} size={70} />                // explicit size
+<LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} /> // 20×20 via token
+<PageHero media={<LottiePlayer source={animation} />} />     // any media slot
+<LottieIntroBlock mediaSlot={<LottiePlayer source={animation} />} />
+```
+
+#### Skeleton / shimmer loading
+
+Wrap any subtree in `<SkeletonGroup loading={!data}>` — **no other changes to the screen are required**. All instrumented JFS primitives inside (`Text`, `Image`, `Badge`, `Button`, `IconButton`, `Avatar`, `Icon`) automatically swap themselves for a shape-preserving shimmer placeholder while `loading` is `true`, and revert to their real content when it flips to `false`. Layout never jumps because the placeholder reuses the same measured box as the real element.
+
+```tsx
+import { SkeletonGroup, Card, Image, Text, Badge, Button } from 'jfs-components'
+
+function Profile({ user }) {
+  return (
+    <SkeletonGroup loading={!user}>
+      <Card media={<Image imageSource={user?.cover} ratio={16 / 9} />}>
+        <Card.Title>{user?.name}</Card.Title>
+        <Card.SupportText>{user?.role}</Card.SupportText>
+        <Badge label={user?.tier ?? 'Member'} />
+        <Button label="Follow" />
+      </Card>
+    </SkeletonGroup>
+  )
+}
+```
+
+Two escape hatches when the auto-instrumentation isn't enough:
+
+```tsx
+// 1) Bind a single primitive to its own load event, ignoring the group:
+<Image imageSource={uri} ratio={16/9} loading={!loaded} onLoad={() => setLoaded(true)} />
+
+// 2) Drop in atomic <Skeleton/> blocks for layouts not built on JFS primitives.
+//    Inside an active <SkeletonGroup> they shimmer with the same clock; outside one they render nothing.
+import { Skeleton } from 'jfs-components'
+<SkeletonGroup loading>
+  <View style={{ flexDirection: 'row', gap: 12 }}>
+    <Skeleton kind="other" width={48} height={48} />
+    <View style={{ flex: 1, gap: 6 }}>
+      <Skeleton kind="text" width="80%" height={16} />
+      <Skeleton kind="text" width="60%" height={14} />
+    </View>
+  </View>
+</SkeletonGroup>
+```
+
+Reduced motion is auto-detected from the OS (`AccessibilityInfo` on native, `prefers-reduced-motion` on web); override via `<SkeletonGroup reducedMotion>` for testing or forced behaviour.
+
+---
+
+## [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 coverage and tracking components: `CoverageRing`, `CoverageBarComparison`, and `MonthlyStatusGrid` (with exported `CalendarGlyph`).
-- Enhanced `CircularProgressBar` with an in-ring `supportText` caption (driven by `circularProgressBar/supportText/*` tokens) and a centered text stack.
-- Refreshed `LinearProgress` and `SavingsGoalSummary` token surface: split `Appearance / DataViz` into `Appearance Type` + `AppearanceBrand` + `AppearanceSystem`, and renamed `Emphasis / DataViz` to `Emphasis`.
-- Expanded `SupportText`, `SupportTextIcon`, and `InputSearch` with an `Auto` status mode and a new `FormField States` collection (Idle / Active / Read Only / Error).
-- Added `Error` state and `Color Mode` support to `FormField`, and a new `Page type` (MainPage / SubPage) collection on `Title`.
-- Refreshed component token metadata and updated Storybook/MDX coverage for all changed components.
+- 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`.
 
 ---
 

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/ActionFooter/ActionFooter.js

@@ -4,37 +4,104 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+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 _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 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_WEB = _reactNative.Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+// Yoga-safe stretch
+// ---------------------------------------------------------------------------
+//
+// React Native (Yoga) interprets the `flex: 1` shorthand as
+//   { flexGrow: 1, flexShrink: 1, flexBasis: 0 }
+// which is the *equal-share* variant. That is the correct math for what we
+// want here (equal-width action buttons), BUT Yoga has a well-known foot-gun
+// when this child sits inside a parent whose main-axis size hasn't been
+// resolved yet on the first layout pass: the child collapses to 0 and the
+// inner text gets clipped to "" before the parent ever measures.
+//
+// The defensive incantation used elsewhere in this codebase (see
+// `CardCTA.leftWrap` and the `MediaCard.Header` fix in CHANGELOG.md) is to
+// keep the equal-share math but explicitly clamp `minWidth` to 0 so Yoga
+// always allows the child to participate in the shrink algorithm, even when
+// the parent itself is in an undetermined state. Combined with explicit
+// `flexGrow`/`flexShrink`/`flexBasis` (NOT the `flex` shorthand) this
+// renders correctly on iOS, Android, and Web — and crucially never produces
+// the "buttons render as empty pills" failure mode the previous version had
+// on iOS dev clients.
+const STRETCH_STYLE = {
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: 0,
+  minWidth: 0
+};
+
+// Platform-specific drop shadow. Web boxShadow can't go through
+// Platform.select (RN's typed surface doesn't include it) so we keep it as a
+// separate constant and append it below.
+const NATIVE_SHADOW = _reactNative.Platform.select({
+  ios: {
+    shadowColor: '#0c0d10',
+    shadowOffset: {
+      width: 0,
+      height: -12
+    },
+    shadowOpacity: 0.16,
+    shadowRadius: 24
+  },
+  android: {
+    elevation: 16
+  },
+  default: {}
+});
+const WEB_SHADOW = IS_WEB ? {
+  boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)'
+} : null;
+
+// The runtime token a slot child must equal (by reference) to be treated as
+// an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
+// element.type identity comparison works for both `<IconButton />` from the
+// same module and any `React.memo`-wrapped re-export. The fallback check
+// (`type.type === IconButton`) catches one extra layer of `forwardRef` /
+// `memo` wrapping which can happen when consumers re-export the component.
+function isIconButtonElement(element) {
+  const t = element.type;
+  if (t === _IconButton.default) return true;
+  if (t && typeof t === 'object' && t.type === _IconButton.default) return true;
+  return false;
+}
+
 /**
- * ActionFooter component that provides a fixed footer container for action buttons.
- * 
- * This component is designed to hold action items like IconButton and Button components
- * at the bottom of a screen. It includes a shadow for visual separation from content above.
- * 
- * The `modes` prop is automatically passed to all slot children. If a child has its own
- * `modes` prop, it will be merged with the parent's modes (child modes take precedence).
- * 
- * @component
- * @param {Object} props - Component props
- * @param {React.ReactNode} [props.children] - Action elements to display (e.g., IconButton, Button)
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (automatically passed to children)
- * @param {Object} [props.style] - Optional style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the footer region
- * 
+ * ActionFooter — a sticky bottom container for primary screen actions.
+ *
+ * Layout contract:
+ *   - The outer container stretches horizontally (`alignSelf: 'stretch'`) so
+ *     it fills the parent regardless of whether the parent is a flex column,
+ *     a ScrollView contentContainer, or a plain View.
+ *   - The inner slot is a single row sized by its tallest child. It does NOT
+ *     use `flex: 1` — that previously caused the row to collapse to zero on
+ *     the first Yoga pass on native, taking the button labels with it.
+ *   - `IconButton` children keep their intrinsic square size.
+ *   - Every other child is auto-stretched with the Yoga-safe stretch style
+ *     above so two `<Button>` siblings render at equal width on iOS, Android,
+ *     and Web.
+ *
+ * The `modes` prop is automatically pushed down to every slot child via
+ * {@link cloneChildrenWithModes}; explicit child-level modes win over the
+ * parent's modes.
+ *
  * @example
  * ```tsx
- * // Basic usage - modes are automatically passed to all children.
- * // Non-IconButton children (e.g., Button) are auto-stretched to fill.
  * <ActionFooter modes={modes}>
  *   <IconButton iconName="ic_split" />
- *   <Button label="Request" />
- *   <Button label="Pay" />
+ *   <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
+ *   <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
  * </ActionFooter>
  * ```
  */
@@ -42,76 +109,74 @@ function ActionFooter({
   children,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  accessibilityLabel = undefined
+  accessibilityLabel
 }) {
-  // Resolve design tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/background', modes) ?? '#ffffff';
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/gap', modes) ?? 8;
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/horizontal', modes) ?? 16;
-  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/top', modes) ?? 10;
-  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/bottom', modes) ?? 41;
-
-  // Shadow styles - cross-platform
-  const shadowStyle = _reactNative.Platform.select({
-    ios: {
-      shadowColor: 'rgba(12, 13, 16, 1)',
-      shadowOffset: {
-        width: 0,
-        height: -12
-      },
-      shadowOpacity: 0.16,
-      shadowRadius: 24
-    },
-    android: {
-      elevation: 16
-    },
-    default: {
-      // Web shadow using boxShadow (RNW supports this)
-    }
-  });
-  const containerStyle = {
-    backgroundColor,
-    paddingLeft: paddingHorizontal,
-    paddingRight: paddingHorizontal,
-    paddingTop,
-    paddingBottom,
-    ...shadowStyle
-  };
-
-  // Slot container style for horizontal layout of action items
-  const slotStyle = {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap,
-    flex: 1
-  };
-
-  // Web-specific box-shadow
-  const webShadow = _reactNative.Platform.OS === 'web' ? {
-    boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)'
-  } : {};
-  const flatChildren = (0, _reactUtils.flattenChildren)(children);
-  const processedChildren = (0, _reactUtils.cloneChildrenWithModes)(flatChildren, modes);
-  const enhancedChildren = processedChildren.map((child, index) => {
-    if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
-    const element = child;
-    const isIconButton = element.type === _IconButton.default;
-    const stretchStyle = isIconButton ? undefined : {
-      flex: 1
+  // All token reads collapsed into a single useMemo keyed on `modes`. With
+  // the shared `EMPTY_MODES` default this resolves once for the common path
+  // and never re-allocates the container/slot style objects between renders.
+  const {
+    containerStyle,
+    slotStyle
+  } = (0, _react.useMemo)(() => {
+    const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/background', modes) ?? '#ffffff';
+    const gap = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/gap', modes) ?? 8;
+    const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/horizontal', modes) ?? 16;
+    const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/top', modes) ?? 10;
+    const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/bottom', modes) ?? 41;
+    const container = {
+      // `alignSelf: 'stretch'` is the cross-platform way to ask "fill the
+      // parent's cross axis" — in the common case (column parent) this gives
+      // us full-width without the caller needing to pass `width: '100%'`.
+      alignSelf: 'stretch',
+      backgroundColor,
+      paddingLeft: paddingHorizontal,
+      paddingRight: paddingHorizontal,
+      paddingTop,
+      paddingBottom,
+      ...NATIVE_SHADOW
     };
-    return /*#__PURE__*/_react.default.cloneElement(element, {
-      key: element.key ?? index,
-      style: [stretchStyle, element.props.style]
+    const slot = {
+      flexDirection: 'row',
+      // Vertically center the IconButton against the slightly taller Buttons
+      // so the row reads as a single optical baseline.
+      alignItems: 'center',
+      gap
+    };
+    return {
+      containerStyle: container,
+      slotStyle: slot
+    };
+  }, [modes]);
+
+  // Process children once per (children, modes) tuple:
+  //   1. Flatten Fragments so each action is its own keyed sibling.
+  //   2. Push `modes` down so callers don't have to thread it manually.
+  //   3. Auto-stretch every non-IconButton with the Yoga-safe stretch style.
+  //
+  // The result identity is stable across re-renders when the inputs don't
+  // change, which keeps the `React.memo`-wrapped Button/IconButton children
+  // from re-rendering for no reason.
+  const enhancedChildren = (0, _react.useMemo)(() => {
+    const flat = (0, _reactUtils.flattenChildren)(children);
+    const withModes = (0, _reactUtils.cloneChildrenWithModes)(flat, modes);
+    return withModes.map((child, index) => {
+      if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
+      const element = child;
+      if (isIconButtonElement(element)) return element;
+      return /*#__PURE__*/_react.default.cloneElement(element, {
+        key: element.key ?? `action-footer-item-${index}`,
+        style: [STRETCH_STYLE, element.props.style]
+      });
     });
-  });
+  }, [children, modes]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [containerStyle, webShadow, style],
+    style: [containerStyle, WEB_SHADOW, style],
     accessibilityRole: "toolbar",
-    accessibilityLabel: undefined,
+    accessibilityLabel: accessibilityLabel,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: slotStyle,
       children: enhancedChildren
     })
   });
 }
-var _default = exports.default = ActionFooter;
+var _default = exports.default = /*#__PURE__*/_react.default.memo(ActionFooter);