@oxy.so/bloom 4.0.0 → 4.1.0

package/lib/commonjs/payment-method/PaymentMethodList.js

@@ -0,0 +1,291 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentMethodList = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _membership = require("../field/membership.js");
+var _RiAddLine = require("../icons/remix/RiAddLine.js");
+var _RiBankCardLine = require("../icons/remix/RiBankCardLine.js");
+var _index = require("../item/index.js");
+var Skeleton = _interopRequireWildcard(require("../skeleton/index.js"));
+var _surfaceLevels = require("../styles/surface-levels.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index3 = require("../typography/index.js");
+var _PaymentMethodRow = require("./PaymentMethodRow.js");
+var _constants = require("./constants.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * Written as a value rather than inline so the row's role stays one decision:
+ * `PaymentMethodRow` translates it through `Item`, which is where the
+ * role-to-ARIA-state mapping lives.
+ */
+const PICKER_ROW_ROLE = 'radio';
+
+/** The name a list falls back to when neither a caller nor a `Field` gives one. */
+const LAST_RESORT_NAME = 'Payment methods';
+
+/**
+ * The saved methods, with the default marked, an add row, an empty state and a
+ * loading state.
+ *
+ * THE VARIANT IS THE ANNOUNCED TREE, not a style. `list` is a set of methods a
+ * reader is managing: a `list` of `listitem`s, each wrapping a button. `picker`
+ * is a set they are choosing ONE of: a `radiogroup` of `radio`s carrying
+ * `aria-checked`. Both roles exist on both platforms, which is why the picker
+ * is a radio group rather than the listbox ARIA would suggest — React Native
+ * has no `listbox`, and a role that reaches one platform is the silent half of
+ * an accessibility bug.
+ *
+ * ## The picker is a `Field` MEMBER, not a hand-rolled radiogroup
+ *
+ * It resolves `useFieldMembership()` the way `RadioGroup` does, so a `Field`
+ * around it names the group, describes it with its error, marks it invalid and
+ * disables every row — and a row inside a disabled field cannot re-enable
+ * itself, because `disabled` combines with `||` rather than deferring.
+ *
+ * That is the difference between this and the three families `docs/composition.mdx`
+ * records as an open gap: writing `role="radiogroup"` is the easy half, and a
+ * group nothing can name or disable is what is left when it is the only half
+ * done.
+ *
+ * `accessibilityLabel` is the caller's and wins; the field's label is next;
+ * `"Payment methods"` is the last resort, and it is a LAST resort rather than a
+ * default because a default here would outrank the one string on screen the
+ * user can actually read.
+ *
+ * ## The add row is not one of the choices
+ *
+ * "Add a payment method" is an action, not a method, so it is drawn OUTSIDE the
+ * `radiogroup`. A `button` among the radios would be announced as part of the
+ * choice and counted in "3 of 4".
+ *
+ *   rows     4 apart, at the row's own geometry
+ *   loading  placeholder rows at the plate's own size, announced busy so a
+ *            reader is told to wait rather than told nothing
+ *   empty    a 32 glyph, a title and a line, centred with 32 of air — and the
+ *            add row is still drawn under it, because an empty list is exactly
+ *            when a reader needs it
+ */
+function PaymentMethodListComponent({
+  methods,
+  selectedId,
+  onSelect,
+  variant = 'list',
+  density = 'comfortable',
+  disabled = false,
+  onAdd,
+  addLabel = 'Add a payment method',
+  addIcon: AddIcon = _RiAddLine.RiAddLine,
+  loading = false,
+  loadingRows = 3,
+  empty,
+  emptyTitle = 'No saved payment methods',
+  emptyDescription,
+  emptyIcon: EmptyIcon = _RiBankCardLine.RiBankCardLine,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const surface = (0, _surfaceLevels.useSurfaceFill)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolvePaymentMethodPaint)(theme, surface), [theme, surface]);
+  const g = _constants.PAYMENT_METHOD_GEOMETRY[density];
+  const picker = variant === 'picker';
+  // The group is one control made of several, so a `Field` around it names the
+  // GROUP and disables every row. `accessibilityLabel` is the caller's own name
+  // and outranks the field's; `disabled` is a CONSTRAINT and combines.
+  const field = (0, _membership.useFieldMembership)({
+    accessibilityLabel,
+    disabled
+  });
+  const isDisabled = field.disabled;
+  const name = field.accessibilityLabel ?? LAST_RESORT_NAME;
+
+  // A disabled row keeps its press HANDLER and is handed `disabled` instead:
+  // `Item` then renders a real disabled control, which still announces itself
+  // as a radio and as unavailable. Withholding the handler would have made the
+  // row a plain `View` — present, silent, and gone from the choice.
+  const press = (0, _react.useCallback)(entry => onSelect ? () => onSelect(entry.id) : undefined, [onSelect]);
+  const addRow = onAdd ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Item, {
+    title: addLabel,
+    leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: testID ? `${testID}-add-plate` : undefined,
+      style: {
+        width: g.plateWidth,
+        height: g.plateHeight,
+        borderRadius: g.plateRadius,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: paint.plate
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AddIcon, {
+        width: g.glyph,
+        height: g.glyph,
+        fill: paint.textSecondary
+      })
+    }),
+    onPress: isDisabled ? undefined : onAdd,
+    disabled: isDisabled,
+    density: density,
+    accessibilityLabel: addLabel,
+    testID: testID ? `${testID}-add` : undefined
+  }) : null;
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      "aria-busy": true,
+      accessibilityLabel: name,
+      testID: testID,
+      style: [{
+        gap: _constants.PAYMENT_METHOD_LIST_GAP
+      }, style],
+      children: Array.from({
+        length: loadingRows
+      }, (_unused, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        testID: testID ? `${testID}-placeholder-${index}` : undefined,
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12,
+          paddingHorizontal: 16,
+          paddingVertical: 10
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Box, {
+          width: g.plateWidth,
+          height: g.plateHeight,
+          borderRadius: g.plateRadius
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            flex: 1,
+            minWidth: 0,
+            gap: 4
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Text, {
+            style: {
+              width: '50%',
+              lineHeight: 16
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton.Text, {
+            style: {
+              width: '32%',
+              lineHeight: 14
+            }
+          })]
+        })]
+      }, index))
+    });
+  }
+  if (methods.length === 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: testID,
+      style: [{
+        gap: _constants.PAYMENT_METHOD_LIST_GAP
+      }, style],
+      children: [empty ?? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        testID: testID ? `${testID}-empty` : undefined,
+        style: {
+          alignItems: 'center',
+          gap: 8,
+          paddingVertical: 32,
+          paddingHorizontal: 16
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyIcon, {
+          width: 32,
+          height: 32,
+          fill: paint.textTertiary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+          variant: "body-medium",
+          style: {
+            color: paint.text,
+            textAlign: 'center'
+          },
+          children: emptyTitle
+        }), emptyDescription ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+          variant: "body-2-regular",
+          style: {
+            color: paint.textSecondary,
+            textAlign: 'center'
+          },
+          children: emptyDescription
+        }) : null]
+      }), addRow]
+    });
+  }
+  const rows = methods.map((entry, index) => {
+    const row = /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaymentMethodRow.PaymentMethodRow, {
+      scheme: entry.scheme,
+      masked: entry.masked,
+      expiry: entry.expiry,
+      kind: entry.kind,
+      icon: entry.icon,
+      image: entry.image,
+      leading: entry.leading,
+      isDefault: entry.isDefault,
+      defaultLabel: entry.defaultLabel,
+      state: entry.state,
+      stateMessage: entry.stateMessage,
+      action: entry.action,
+      disabled: isDisabled || entry.disabled === true,
+      density: density,
+      accessibilityLabel: entry.accessibilityLabel,
+      style: entry.style,
+      onPress: press(entry),
+      ...(picker ? {
+        role: PICKER_ROW_ROLE,
+        selectable: true,
+        selected: selectedId === entry.id
+      } : {}),
+      testID: entry.testID ?? (testID ? `${testID}-row-${index}` : undefined)
+    }, entry.id);
+    if (picker) return row;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      role: "listitem",
+      children: row
+    }, entry.id);
+  });
+  if (picker) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [{
+        gap: _constants.PAYMENT_METHOD_LIST_GAP
+      }, style],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        role: "radiogroup",
+        accessibilityRole: "radiogroup",
+        accessibilityLabel: name,
+        "aria-label": name,
+        "aria-describedby": field.describedBy,
+        "aria-invalid": field.invalid || undefined
+        // A `View` has no `disabled` prop for react-native-web to derive
+        // `aria-disabled` from, and it never reads `accessibilityState`.
+        ,
+        "aria-disabled": isDisabled || undefined,
+        style: {
+          gap: _constants.PAYMENT_METHOD_LIST_GAP
+        },
+        testID: testID,
+        children: rows
+      }), addRow]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      gap: _constants.PAYMENT_METHOD_LIST_GAP
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      role: "list",
+      accessibilityLabel: name,
+      style: {
+        gap: _constants.PAYMENT_METHOD_LIST_GAP
+      },
+      testID: testID,
+      children: rows
+    }), addRow]
+  });
+}
+const PaymentMethodList = exports.PaymentMethodList = /*#__PURE__*/(0, _react.memo)(PaymentMethodListComponent);
+PaymentMethodList.displayName = 'PaymentMethodList';
+//# sourceMappingURL=PaymentMethodList.js.map

package/lib/commonjs/payment-method/PaymentMethodList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_membership","_RiAddLine","_RiBankCardLine","_index","Skeleton","_surfaceLevels","_useTheme","_index3","_PaymentMethodRow","_constants","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PICKER_ROW_ROLE","LAST_RESORT_NAME","PaymentMethodListComponent","methods","selectedId","onSelect","variant","density","disabled","onAdd","addLabel","addIcon","AddIcon","RiAddLine","loading","loadingRows","empty","emptyTitle","emptyDescription","emptyIcon","EmptyIcon","RiBankCardLine","accessibilityLabel","style","testID","theme","useTheme","surface","useSurfaceFill","paint","useMemo","resolvePaymentMethodPaint","g","PAYMENT_METHOD_GEOMETRY","picker","field","useFieldMembership","isDisabled","name","press","useCallback","entry","id","undefined","addRow","jsx","Item","title","leading","View","width","plateWidth","height","plateHeight","borderRadius","plateRadius","alignItems","justifyContent","backgroundColor","plate","children","glyph","fill","textSecondary","onPress","gap","PAYMENT_METHOD_LIST_GAP","Array","from","length","_unused","index","jsxs","flexDirection","paddingHorizontal","paddingVertical","Box","flex","minWidth","Text","lineHeight","textTertiary","color","text","textAlign","rows","map","row","PaymentMethodRow","scheme","masked","expiry","kind","icon","image","isDefault","defaultLabel","state","stateMessage","action","role","selectable","selected","accessibilityRole","describedBy","invalid","PaymentMethodList","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["payment-method/PaymentMethodList.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/payment-method/PaymentMethodMark.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentMethodMark = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _surfaceLevels = require("../styles/surface-levels.js");
+var _accentColors = require("../theme/accent-colors.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index = require("../typography/index.js");
+var _constants = require("./constants.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * The brand mark — and Bloom's is deliberately NOT a brand.
+ *
+ * **This never draws a scheme's logo, and it ships no list of schemes.** What it
+ * draws is a plate the shape of a card, a neutral glyph on it, and — when the
+ * caller gives one — the scheme's NAME as text beside it. Bloom does not know
+ * what schemes exist, is not licensed to reproduce their artwork, and a library
+ * that shipped twelve logos would be a library that quietly took on the
+ * trademark question for every app using it.
+ *
+ * An app that HAS the rights passes `image`: it is drawn inside the plate, at
+ * the plate's geometry, and everything else stays the same. That is the whole
+ * escape hatch, and it belongs to the app because the rights do.
+ *
+ *   plate    40 x 28, radius 6 (compact 32 x 22, radius 5), one surface step
+ *            off whatever is behind it — wider than tall is what reads as a
+ *            card rather than an app tile
+ *   glyph    18 in the secondary text rung (compact 14)
+ *   name     body-2-medium, 8 after the plate
+ *   state    `expired`/`declined` paint the plate in the state's tint, so a
+ *            row that cannot be used says so before its words are read
+ */
+function PaymentMethodMarkComponent({
+  scheme,
+  kind = 'card',
+  icon,
+  image,
+  state = 'ok',
+  density = 'comfortable',
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const surface = (0, _surfaceLevels.useSurfaceFill)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolvePaymentMethodPaint)(theme, surface), [theme, surface]);
+  const g = _constants.PAYMENT_METHOD_GEOMETRY[density];
+  const Glyph = icon ?? _constants.PAYMENT_METHOD_KIND_ICON[kind];
+  const tone = _constants.PAYMENT_METHOD_STATE_TONE[state];
+  // `resolveAccentColors`, never an appended alpha: the tint and the glyph that
+  // sits on it are a PAIR the colour policy generates together (`docs/badge.mdx`).
+  const accent = tone ? (0, _accentColors.resolveAccentColors)(theme.colors, tone, 'subtle') : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: _constants.PAYMENT_METHOD_MARK_GAP
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: testID ? `${testID}-plate` : undefined,
+      style: {
+        width: g.plateWidth,
+        height: g.plateHeight,
+        borderRadius: g.plateRadius,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        backgroundColor: accent ? accent.background : paint.plate
+      },
+      children: image !== undefined ? image : /*#__PURE__*/(0, _jsxRuntime.jsx)(Glyph, {
+        width: g.glyph,
+        height: g.glyph,
+        fill: accent ? accent.foreground : paint.textSecondary
+      })
+    }), scheme ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      variant: "body-2-medium",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-scheme` : undefined,
+      style: {
+        flexShrink: 1,
+        minWidth: 0,
+        color: paint.text
+      },
+      children: scheme
+    }) : null]
+  });
+}
+const PaymentMethodMark = exports.PaymentMethodMark = /*#__PURE__*/(0, _react.memo)(PaymentMethodMarkComponent);
+PaymentMethodMark.displayName = 'PaymentMethodMark';
+//# sourceMappingURL=PaymentMethodMark.js.map

package/lib/commonjs/payment-method/PaymentMethodMark.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_surfaceLevels","_accentColors","_useTheme","_index","_constants","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PaymentMethodMarkComponent","scheme","kind","icon","image","state","density","style","testID","theme","useTheme","surface","useSurfaceFill","paint","useMemo","resolvePaymentMethodPaint","g","PAYMENT_METHOD_GEOMETRY","Glyph","PAYMENT_METHOD_KIND_ICON","tone","PAYMENT_METHOD_STATE_TONE","accent","resolveAccentColors","colors","undefined","jsxs","View","flexDirection","alignItems","gap","PAYMENT_METHOD_MARK_GAP","children","jsx","width","plateWidth","height","plateHeight","borderRadius","plateRadius","justifyContent","overflow","backgroundColor","background","plate","glyph","fill","foreground","textSecondary","Text","variant","numberOfLines","flexShrink","minWidth","color","text","PaymentMethodMark","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["payment-method/PaymentMethodMark.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/payment-method/PaymentMethodRow.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentMethodRow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../badge/index.js");
+var _index2 = require("../item/index.js");
+var _index3 = require("../radio-indicator/index.js");
+var _surfaceLevels = require("../styles/surface-levels.js");
+var _tokens = require("../styles/tokens.js");
+var _accentColors = require("../theme/accent-colors.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index4 = require("../typography/index.js");
+var _PaymentMethodMark = require("./PaymentMethodMark.js");
+var _constants = require("./constants.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * A way to pay, as a row: the mark, the scheme, the masked identifier, when it
+ * runs out, whether it is the default one, and either a trailing action or a
+ * selection control.
+ *
+ * It is `Item` with a payment method's slots filled in, for the same reason
+ * `AddressRow` is: the row, the press target, the selected wash, the density
+ * rungs, the disabled opacity and the ARIA role translation are `Item`'s job,
+ * and this family owns no second copy of any of them. What it adds is the card
+ * plate, the scheme/masked pairing on the title line, the default badge, the
+ * state line and the radio dot.
+ *
+ *   mark     `PaymentMethodMark`, plate only — the row draws the name itself,
+ *            so the title line can hold the masked tail and the badge too
+ *   title    scheme in `Item`'s own title rung; the masked identifier beside it
+ *            in body-2 TABULAR figures, so four rows of digits line up
+ *   line 2   the expiry, secondary
+ *   line 3   the state's words in the state's own colour, drawn only when the
+ *            method cannot be used
+ *   trailing the radio dot (`selectable`) or the action
+ *
+ * NOTHING HERE IS SENSITIVE. `masked` is a string the app already masked; this
+ * row never unmasks, parses, stores, logs or transmits anything, and there is no
+ * prop that takes a full number.
+ */
+function PaymentMethodRowComponent({
+  scheme,
+  masked,
+  expiry,
+  kind = 'card',
+  icon,
+  image,
+  leading,
+  isDefault = false,
+  defaultLabel = 'Default',
+  state = 'ok',
+  stateMessage,
+  selectable = false,
+  selected,
+  action,
+  onPress,
+  disabled = false,
+  density = 'comfortable',
+  role,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const surface = (0, _surfaceLevels.useSurfaceFill)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolvePaymentMethodPaint)(theme, surface), [theme, surface]);
+  const g = _constants.PAYMENT_METHOD_GEOMETRY[density];
+  const tone = _constants.PAYMENT_METHOD_STATE_TONE[state];
+  const stateWords = (0, _shared.paymentMethodStateMessage)(state, stateMessage);
+  // The state's words are read as TEXT on the row's own surface, so they take
+  // the tone's `accent` member (`outlined` foreground) rather than the fill.
+  const stateColor = tone ? (0, _accentColors.resolveAccentColors)(theme.colors, tone, 'outlined').foreground : undefined;
+  const media = leading !== undefined ? leading : /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaymentMethodMark.PaymentMethodMark, {
+    kind: kind,
+    icon: icon,
+    image: image,
+    state: state,
+    density: density,
+    testID: testID ? `${testID}-mark` : undefined
+  });
+  const titleNode = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      minWidth: 0
+    },
+    children: [scheme ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+      variant: "headline-medium",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-scheme` : undefined,
+      style: {
+        flexShrink: 1,
+        minWidth: 0,
+        color: paint.text
+      },
+      children: scheme
+    }) : null, masked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+      variant: "body-2-regular",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-masked` : undefined,
+      style: {
+        flexShrink: 1,
+        minWidth: 0,
+        color: paint.textSecondary,
+        fontVariant: ['tabular-nums']
+      },
+      children: masked
+    }) : null, isDefault ?
+    /*#__PURE__*/
+    // The badge does not SHRINK: it is two or three words that mean
+    // "this is the one", and a truncated "D…" says nothing. The masked
+    // identifier beside it gives way instead, which is the part a reader
+    // can still recognise from its first characters.
+    (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flexShrink: 0
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Badge, {
+        content: defaultLabel,
+        variant: "subtle",
+        color: "primary",
+        size: "label-small",
+        testID: testID ? `${testID}-default` : undefined
+      })
+    }) : null]
+  });
+  const subtitleNode = expiry || stateWords ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      gap: 2,
+      minWidth: 0
+    },
+    children: [expiry ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+      variant: "body-2-regular",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-expiry` : undefined,
+      style: {
+        color: paint.textSecondary,
+        fontVariant: ['tabular-nums']
+      },
+      children: expiry
+    }) : null, stateWords ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+      variant: "body-2-medium",
+      numberOfLines: 2,
+      testID: testID ? `${testID}-state` : undefined,
+      style: {
+        color: stateColor ?? paint.textSecondary
+      },
+      children: stateWords
+    }) : null]
+  }) : null;
+
+  // A PRESSABLE row is a real `<button>` on web, so a control cannot live
+  // inside it: a button in a button is invalid HTML and, unlike native, a web
+  // click on the inner control ALSO fires the row. The selection DOT is not a
+  // control — it draws no press target of its own — so it stays inside; an
+  // `action` does not. The mechanism is measured in `address/AddressRow.tsx`.
+  const splitAction = action != null && onPress != null;
+  const trailing = selectable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.RadioIndicator, {
+    selected: selected === true,
+    size: g.dot,
+    testID: testID ? `${testID}-dot` : undefined
+  }) : splitAction ? null : action ?? null;
+  const row = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Item, {
+    title: titleNode,
+    subtitle: subtitleNode,
+    leading: media,
+    trailing: trailing,
+    onPress: onPress,
+    disabled: disabled,
+    selected: selected,
+    density: density,
+    role: role,
+    accessibilityLabel: accessibilityLabel ?? (0, _shared.composePaymentMethodName)([scheme, masked, expiry, isDefault && defaultLabel, stateWords])
+    // `paddingRight`, never `paddingHorizontal`: `Item` writes the longhand,
+    // and on web a shorthand here would outrank it while native honoured it.
+    ,
+    style: splitAction ? {
+      paddingRight: _tokens.space.sm
+    } : style,
+    testID: testID
+  });
+  if (!splitAction) return row;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingRight: _tokens.space.lg
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flex: 1,
+        minWidth: 0
+      },
+      children: row
+    }), action]
+  });
+}
+const PaymentMethodRow = exports.PaymentMethodRow = /*#__PURE__*/(0, _react.memo)(PaymentMethodRowComponent);
+PaymentMethodRow.displayName = 'PaymentMethodRow';
+//# sourceMappingURL=PaymentMethodRow.js.map

package/lib/commonjs/payment-method/PaymentMethodRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_index2","_index3","_surfaceLevels","_tokens","_accentColors","_useTheme","_index4","_PaymentMethodMark","_constants","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PaymentMethodRowComponent","scheme","masked","expiry","kind","icon","image","leading","isDefault","defaultLabel","state","stateMessage","selectable","selected","action","onPress","disabled","density","role","accessibilityLabel","style","testID","theme","useTheme","surface","useSurfaceFill","paint","useMemo","resolvePaymentMethodPaint","g","PAYMENT_METHOD_GEOMETRY","tone","PAYMENT_METHOD_STATE_TONE","stateWords","paymentMethodStateMessage","stateColor","resolveAccentColors","colors","foreground","undefined","media","jsx","PaymentMethodMark","titleNode","jsxs","View","flexDirection","alignItems","gap","minWidth","children","Text","variant","numberOfLines","flexShrink","color","text","textSecondary","fontVariant","Badge","content","size","subtitleNode","splitAction","trailing","RadioIndicator","dot","row","Item","title","subtitle","composePaymentMethodName","paddingRight","space","sm","lg","flex","PaymentMethodRow","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["payment-method/PaymentMethodRow.tsx"],"mappings":"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","ignoreList":[]}