@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-PUPM2YGF.js → chunk-ROCUG24E.js}

@@ -1,14 +1,28 @@
-import { useColorTransition } from './chunk-ITTYJZWX.js';
-import { Badge } from './chunk-SBMNWWBV.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { usePayLabels } from './chunk-GEIGMWNF.js';
+import { useColorTransition } from './chunk-7BUIKDD6.js';
+import { Badge } from './chunk-TN2ZNJUI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { View, Text, Easing, Pressable, Animated } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { brandTone, BRANDS, mask } from '@btndprojects/loam-pay';
+import { brandTone, BRANDS, brandLabel, mask, methodText } from '@btndprojects/loam-pay';
 import { icons } from '@btndprojects/loam-icons';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+// src/payment-method/payment-method-labels.ts
+var DEFAULT_LABELS = {
+  paymentMethod: "Payment method",
+  orPayWithCard: "or pay with card",
+  expires: (expiry) => `Expires ${expiry}`,
+  defaultBadge: "default",
+  useDifferentCard: "Use a different card",
+  manageCards: "Manage cards",
+  checkingWallet: "Checking for a wallet on this device",
+  payWith: (name) => `Pay with ${name}`,
+  expressPay: "Express pay"
+};
 var PickerContext = React.createContext(null);
 function methodIcon(name) {
   if (Object.prototype.hasOwnProperty.call(icons, name)) return name;
@@ -18,20 +32,28 @@ function CardBrandMark({
   brand,
   label,
   size = "sm",
+  labels: labelsProp,
   style,
   testID
 }) {
+  const pay = usePayLabels(labelsProp);
   const tone = brandTone(brand);
   const { styles } = useStyles(sheet, { plateTone: tone, plateSize: size });
   const def = BRANDS.find((b) => b.id === brand);
-  const text = label ?? def?.label ?? "Card";
+  const text = label ?? (def ? brandLabel(def, pay) : pay.genericBrand);
   return /* @__PURE__ */ jsx(View, { testID, style: [styles.plate, style], children: /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.plateText, children: text }) });
 }
-function OrDivider({ label = "or pay with card", style, testID }) {
+function OrDivider({
+  label,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const labels = useLabels("paymentMethod", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
   return /* @__PURE__ */ jsxs(View, { testID, style: [styles.divider, style], children: [
     /* @__PURE__ */ jsx(View, { "aria-hidden": true, testID: "or-divider-rule", style: styles.dividerRule }),
-    /* @__PURE__ */ jsx(Text, { style: styles.dividerLabel, children: label }),
+    /* @__PURE__ */ jsx(Text, { style: styles.dividerLabel, children: label ?? labels.orPayWithCard }),
     /* @__PURE__ */ jsx(View, { "aria-hidden": true, testID: "or-divider-rule", style: styles.dividerRule })
   ] });
 }
@@ -47,12 +69,14 @@ function PaymentMethodRow({
   selected,
   showCost = false,
   disabled = false,
+  reason,
   motion = "full",
   onSelect,
+  labels: labelsProp,
   style,
   testID
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("payment-method");
   const { styles } = useStyles(sheet, { selected, disabled });
   const picker = React.useContext(PickerContext);
   const nodeRef = React.useRef(null);
@@ -63,7 +87,7 @@ function PaymentMethodRow({
   entryRef.current.focus = () => nodeRef.current?.focus?.();
   const register = picker?.register;
   React.useEffect(() => register?.(entryRef.current), [register]);
-  const animate = useResolvedMotion(motion) !== "none";
+  const animate = useResolvedMotion(motion, "payment-method") !== "none";
   const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
   const borderColor = useColorTransition(
     disabled ? theme.color.border : selected ? theme.focus.ringColor : theme.color.border,
@@ -97,7 +121,14 @@ function PaymentMethodRow({
       ref: nodeRef,
       testID,
       accessibilityRole: "radio",
-      accessibilityLabel: [label, stored ? mask(stored.brand, stored.last4) : null, badge].filter(Boolean).join(", "),
+      accessibilityLabel: [
+        label,
+        stored ? mask(stored.brand, stored.last4) : null,
+        badge,
+        disabled && reason ? reason : sub,
+        showCost ? settle : null,
+        showCost ? fee : null
+      ].filter(Boolean).join(", "),
       accessibilityState: { checked: selected, disabled },
       "aria-checked": selected,
       disabled,
@@ -118,12 +149,12 @@ function PaymentMethodRow({
           /* @__PURE__ */ jsxs(View, { style: styles.rowTitle, children: [
             /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.label, children: label }),
             stored ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(CardBrandMark, { brand: stored.brand }),
+              /* @__PURE__ */ jsx(CardBrandMark, { brand: stored.brand, labels: labelsProp }),
               /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.mask, children: mask(stored.brand, stored.last4) })
             ] }) : null,
             badge ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "accent", size: "sm", children: badge }) : null
           ] }),
-          sub ? /* @__PURE__ */ jsx(Text, { style: styles.sub, children: sub }) : null
+          disabled && reason ? /* @__PURE__ */ jsx(Text, { style: styles.sub, children: reason }) : sub ? /* @__PURE__ */ jsx(Text, { style: styles.sub, children: sub }) : null
         ] }),
         showCost && (settle || fee) ? /* @__PURE__ */ jsxs(View, { style: styles.costColumn, children: [
           settle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.settle, children: settle }) : null,
@@ -139,15 +170,19 @@ function PaymentMethodPicker({
   onChange,
   showCost = false,
   verbose = false,
-  label = "Payment method",
+  label,
   stored,
   unavailable,
+  unavailableReasons,
   badges,
   motion = "full",
+  labels: labelsProp,
   style,
   testID
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("paymentMethod", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const theme = useLoamTheme("payment-method");
   const { styles } = useStyles(sheet);
   const itemsRef = React.useRef([]);
   const [, bump] = React.useReducer((c) => c + 1, 0);
@@ -198,27 +233,32 @@ function PaymentMethodPicker({
     {
       testID,
       accessibilityRole: "radiogroup",
-      accessibilityLabel: label,
+      accessibilityLabel: label ?? labels.paymentMethod,
       style: [styles.group, style],
-      children: methods.map((method) => /* @__PURE__ */ jsx(
-        PaymentMethodRow,
-        {
-          id: method.id,
-          label: method.label,
-          sub: verbose ? method.note : method.settle,
-          icon: methodIcon(method.icon),
-          stored: stored?.[method.id],
-          badge: badges?.[method.id],
-          settle: method.settle,
-          fee: method.fee,
-          selected: value === method.id,
-          showCost,
-          disabled: unavailable?.includes(method.id) ?? false,
-          motion,
-          onSelect: (id) => onChange(id)
-        },
-        method.id
-      ))
+      children: methods.map((method) => {
+        const text = methodText(method.id, pay) ?? method;
+        return /* @__PURE__ */ jsx(
+          PaymentMethodRow,
+          {
+            id: method.id,
+            label: text.label,
+            sub: verbose ? text.note : showCost ? void 0 : text.settle,
+            icon: methodIcon(method.icon),
+            stored: stored?.[method.id],
+            badge: badges?.[method.id],
+            settle: text.settle,
+            fee: text.fee,
+            selected: value === method.id,
+            showCost,
+            disabled: unavailable?.includes(method.id) ?? false,
+            reason: unavailableReasons?.[method.id],
+            motion,
+            onSelect: (id) => onChange(id),
+            labels: labelsProp
+          },
+          method.id
+        );
+      })
     }
   ) });
 }
@@ -373,4 +413,4 @@ var sheet = createStyleSheet((theme) => ({
   rowBadge: { alignSelf: "center" }
 }));
 
-export { CardBrandMark, OrDivider, PaymentMethodPicker, PaymentMethodRow, methodIcon };
+export { CardBrandMark, DEFAULT_LABELS, OrDivider, PaymentMethodPicker, PaymentMethodRow, methodIcon };