@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-AEB7KCHQ.js → chunk-3SCKCWF5.js}

@@ -1,6 +1,6 @@
 import { NAMED_ROLE } from './chunk-W23G6JLF.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -130,30 +130,24 @@ var TEXT_MODIFIER_ID = {
   opt: "alt",
   option: "alt"
 };
-var APPLE_MODIFIERS = {
-  cmd: "\u2318",
-  command: "\u2318",
-  meta: "\u2318",
-  super: "\u2318",
-  shift: "\u21E7",
-  ctrl: "\u2303",
-  control: "\u2303",
-  alt: "\u2325",
-  opt: "\u2325",
-  option: "\u2325"
-};
-var TEXT_MODIFIERS = {
-  cmd: "Cmd",
-  command: "Cmd",
-  meta: "Meta",
-  super: "Super",
-  shift: "Shift",
-  ctrl: "Ctrl",
-  control: "Ctrl",
-  alt: "Alt",
-  opt: "Alt",
-  option: "Alt"
-};
+var MODIFIER_ROWS = [
+  ["cmd", "\u2318", "Cmd"],
+  ["command", "\u2318", "Cmd"],
+  ["meta", "\u2318", "Meta"],
+  ["super", "\u2318", "Super"],
+  ["shift", "\u21E7", "Shift"],
+  ["ctrl", "\u2303", "Ctrl"],
+  ["control", "\u2303", "Ctrl"],
+  ["alt", "\u2325", "Alt"],
+  ["opt", "\u2325", "Alt"],
+  ["option", "\u2325", "Alt"]
+];
+var APPLE_MODIFIERS = Object.fromEntries(
+  MODIFIER_ROWS.map(([alias, apple]) => [alias, apple])
+);
+var TEXT_MODIFIERS = Object.fromEntries(
+  MODIFIER_ROWS.map(([alias, , text]) => [alias, text])
+);
 var GLYPH_ICON = {
   "\u2318": "key-command",
   "\u21E7": "key-shift",
@@ -200,6 +194,8 @@ function Kbd({
   keys,
   symbols = true,
   size = "md",
+  variant = "default",
+  tone = "neutral",
   // `motion` is accepted for API parity but intentionally unused — Kbd has no
   // animation. Destructured so it never lands on the underlying View.
   motion: _motion = "full",
@@ -211,20 +207,35 @@ function Kbd({
   const { styles } = useStyles(sheet, { size });
   const theme = useLoamTheme("kbd");
   const apple = theme.platform === "iOS";
+  const soft = tone === "neutral" ? void 0 : {
+    accent: { bg: theme.color.accentSoft, ink: theme.color.accentOnSoft },
+    good: { bg: theme.color.goodSoft, ink: theme.color.goodOnSoft },
+    warn: { bg: theme.color.warnSoft, ink: theme.color.warnOnSoft },
+    danger: { bg: theme.color.dangerSoft, ink: theme.color.dangerOnSoft },
+    info: { bg: theme.color.infoSoft, ink: theme.color.infoOnSoft }
+  }[tone];
+  const ink = soft?.ink ?? theme.color.text2;
+  const capStyle = [
+    styles.cap,
+    variant === "outline" && { backgroundColor: "transparent" },
+    variant === "ghost" && { backgroundColor: "transparent", borderColor: "transparent" },
+    soft && variant === "default" && { backgroundColor: soft.bg },
+    tone !== "neutral" && variant !== "ghost" && { borderColor: theme.edge[tone] }
+  ];
   const face = (label2) => {
     const icon = GLYPH_ICON[label2];
-    return icon ? /* @__PURE__ */ jsx(View, { testID: `kbd-glyph-${label2}`, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: ICON_SIZE[size ?? "md"], color: theme.color.text2, strokeWidth: 2 }) }) : /* @__PURE__ */ jsx(Text, { style: styles.label, children: label2 });
+    return icon ? /* @__PURE__ */ jsx(View, { testID: `kbd-glyph-${label2}`, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: ICON_SIZE[size ?? "md"], color: ink, strokeWidth: 2 }) }) : /* @__PURE__ */ jsx(Text, { style: [styles.label, soft && { color: ink }], children: label2 });
   };
   if (keys === void 0) {
     const label2 = accessibilityLabel ?? (typeof children === "string" ? spokenLabel([children], apple, labels) : void 0);
-    return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: NAMED_ROLE, accessibilityLabel: label2, style: styles.cap, children: typeof children === "string" ? face(children) : children });
+    return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: NAMED_ROLE, accessibilityLabel: label2, style: capStyle, children: typeof children === "string" ? face(children) : children });
   }
   const list = Array.isArray(keys) ? keys : String(keys).split("+");
   const parts = list.map((k) => k.trim()).filter((k) => k.length > 0);
   const label = accessibilityLabel ?? spokenLabel(parts, apple, labels);
   return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: NAMED_ROLE, accessibilityLabel: label, style: styles.group, children: parts.map((key, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
     i > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.plus, children: "+" }) : null,
-    /* @__PURE__ */ jsx(View, { style: styles.cap, children: face(resolveKey(key, symbols, apple, labels)) })
+    /* @__PURE__ */ jsx(View, { style: capStyle, children: face(resolveKey(key, symbols, apple, labels)) })
   ] }, `${key}-${i}`)) });
 }
 var sheet = createStyleSheet((theme) => ({

package/dist/chunk-3TZNDHKO.js

@@ -0,0 +1,187 @@
+import { Screen } from './chunk-EMWAJMAS.js';
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Input } from './chunk-KXLDK6HB.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  or: "or",
+  email: "Email",
+  continue: "Continue",
+  lastUsed: "Last used"
+};
+function SignInScreen({
+  title,
+  description,
+  icon = "lock",
+  providers,
+  lastUsed,
+  defaultEmail = "",
+  pending,
+  error,
+  onEmailSubmit,
+  legal,
+  onCredentialSheet,
+  insets,
+  platform,
+  surface,
+  size = "lg",
+  density = "comfortable",
+  labels: labelsProp,
+  testID
+}) {
+  const labels = useLabels("signInScreen", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("sign-in-screen");
+  const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme, platform);
+  const [email, setEmail] = React.useState(defaultEmail);
+  const busy = pending !== void 0;
+  const compact = density === "compact";
+  const sheetFirst = React.useRef(onCredentialSheet);
+  React.useEffect(() => {
+    if (android) sheetFirst.current?.();
+  }, [android]);
+  const titleType = android ? resolveTextRole(theme, "headlineMedium", true) : { ...resolveTextRole(theme, "title1", false), fontWeight: theme.fontWeight.bold };
+  const labelType = android ? { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium } : { fontSize: theme.fontSize[16], fontWeight: theme.fontWeight.semibold };
+  return /* @__PURE__ */ jsx(Screen, { testID, insets, padding: android ? 16 : 20, children: /* @__PURE__ */ jsxs(View, { style: [styles.stack, compact ? styles.stackCompact : null], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+      /* @__PURE__ */ jsx(IconTile, { icon, tone: "accent", size: "xl" }),
+      /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [styles.title, titleType], children: title }),
+      description ? /* @__PURE__ */ jsx(Text, { style: styles.body, children: description }) : null
+    ] }),
+    error ? /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error }) : null,
+    /* @__PURE__ */ jsx(View, { style: [styles.providers, compact ? styles.providersCompact : null], children: providers.map((p) => {
+      const isPending = pending === p.id;
+      const off = busy && !isPending;
+      return /* @__PURE__ */ jsxs(View, { style: styles.providerSlot, children: [
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            testID: `sign-in-provider-${p.id}`,
+            accessibilityRole: "button",
+            accessibilityLabel: p.label,
+            accessibilityState: { disabled: busy, busy: isPending },
+            disabled: busy,
+            onPress: p.onPress,
+            android_ripple: android ? { color: theme.state.pressed } : void 0,
+            style: ({ pressed }) => [
+              styles.provider,
+              {
+                height: theme.ctl[size],
+                paddingHorizontal: theme.ctl.px[size],
+                borderRadius: theme.ctl.r[size]
+              },
+              !android && pressed ? { backgroundColor: theme.state.pressed } : null,
+              off ? { opacity: theme.state.disabledOpacity } : null
+            ],
+            children: isPending ? /* @__PURE__ */ jsx(Spinner, { size: "md" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(View, { style: styles.mark, children: p.mark }),
+              /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.providerLabel, labelType], children: p.label })
+            ] })
+          }
+        ),
+        lastUsed === p.id ? /* @__PURE__ */ jsx(View, { style: styles.lastUsed, children: /* @__PURE__ */ jsx(Badge, { variant: "accent", size: "sm", children: labels.lastUsed }) }) : null
+      ] }, p.id);
+    }) }),
+    onEmailSubmit ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.divider, accessibilityElementsHidden: true, importantForAccessibility: "no", children: [
+        /* @__PURE__ */ jsx(View, { style: styles.rule }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.or, resolveTextRole(theme, "overline", android)], children: labels.or }),
+        /* @__PURE__ */ jsx(View, { style: styles.rule })
+      ] }),
+      /* @__PURE__ */ jsxs(View, { style: styles.email, children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            size,
+            surface,
+            platform: android ? "android" : "ios",
+            value: email,
+            onChangeText: setEmail,
+            placeholder: labels.email,
+            accessibilityLabel: labels.email,
+            keyboardType: "email-address",
+            autoCapitalize: "none",
+            autoComplete: "email",
+            textContentType: "emailAddress",
+            editable: !busy,
+            onSubmitEditing: () => email && onEmailSubmit(email)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            size,
+            fullWidth: true,
+            loading: pending === "email",
+            disabled: busy && pending !== "email",
+            onPress: () => onEmailSubmit(email),
+            children: labels.continue
+          }
+        )
+      ] })
+    ] }) : null,
+    legal ? /* @__PURE__ */ jsx(Text, { style: styles.legal, children: legal }) : null
+  ] }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  stack: { gap: theme.space[20] },
+  stackCompact: { gap: theme.space[12] },
+  providersCompact: { gap: theme.space[8] },
+  header: { alignItems: "center", gap: theme.space[12] },
+  title: { fontFamily: theme.font.sans, color: theme.color.text, textAlign: "center" },
+  body: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[15],
+    lineHeight: theme.space[20],
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  providers: { gap: theme.space[12] },
+  providerSlot: { alignItems: "center", gap: theme.space[6] },
+  provider: {
+    alignSelf: "stretch",
+    height: theme.ctl.lg,
+    paddingHorizontal: theme.ctl.px.lg,
+    borderRadius: theme.ctl.r.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space[8],
+    overflow: "hidden"
+  },
+  mark: {
+    width: theme.space[20],
+    height: theme.space[20],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  providerLabel: { fontFamily: theme.font.sans, color: theme.color.text, flexShrink: 1 },
+  lastUsed: { alignItems: "center" },
+  divider: { flexDirection: "row", alignItems: "center", gap: theme.space[12] },
+  rule: { flex: 1, height: theme.borderWidth.base, backgroundColor: theme.color.border },
+  or: { fontFamily: theme.font.sans, color: theme.color.text2 },
+  email: { gap: theme.space[12] },
+  legal: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.space[16],
+    color: theme.color.text2,
+    textAlign: "center"
+  }
+}));
+
+export { SignInScreen };

package/dist/chunk-43K3BLXV.js

@@ -0,0 +1,9 @@
+// src/lib/field-surface.ts
+function fieldSurfaceFill(theme, surface = "filled") {
+  if (surface === "raised") return theme.color.surface;
+  if (surface === "ghost")
+    return /^#[0-9a-f]{6}$/i.test(theme.color.surface) ? `${theme.color.surface}00` : "transparent";
+  return theme.color.surface2;
+}
+
+export { fieldSurfaceFill };

package/dist/chunk-46ZJIQ2Z.js

@@ -0,0 +1,208 @@
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import 'react';
+import { ScrollView, Pressable, View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  more: "More"
+};
+function translucent(color) {
+  return /^#[0-9a-f]{6}$/i.test(color) ? `${color}eb` : color;
+}
+function Toolbar({
+  children,
+  accessibilityLabel,
+  overflow = "wrap",
+  density = "comfortable",
+  justify = "start",
+  onMorePress,
+  bar = false,
+  platform,
+  size,
+  orientation = "horizontal",
+  labels: labelsProp
+}) {
+  const labels = useLabels("toolbar", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet, { density, justify });
+  const theme = useLoamTheme("toolbar");
+  const android = isAndroidIdiom(theme, platform);
+  const barStyle = bar ? android ? {
+    minHeight: theme.space[64],
+    paddingHorizontal: theme.space[4],
+    backgroundColor: theme.color.surface2
+  } : {
+    minHeight: theme.ctl.lg,
+    paddingHorizontal: theme.space[8],
+    backgroundColor: translucent(theme.color.surface),
+    borderTopWidth: theme.borderWidth.hair,
+    borderTopColor: theme.color.border
+  } : null;
+  const vertical = orientation === "vertical";
+  const sizeStyle = size ? { minHeight: theme.ctl[size] } : null;
+  const moreHit = bar && android ? theme.space[48] : theme.tapMin;
+  if (overflow === "scroll" || overflow === "menu") {
+    return /* @__PURE__ */ jsxs(
+      ScrollView,
+      {
+        horizontal: !vertical,
+        showsHorizontalScrollIndicator: false,
+        showsVerticalScrollIndicator: false,
+        accessibilityRole: "toolbar",
+        accessibilityLabel,
+        style: [styles.scrollRoot, sizeStyle, barStyle],
+        contentContainerStyle: [styles.scrollContent, vertical ? styles.column : null],
+        children: [
+          children,
+          overflow === "menu" ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.more,
+              onPress: onMorePress,
+              hitSlop: 8,
+              android_ripple: android ? { color: theme.state.pressed, borderless: true, radius: moreHit / 2 } : void 0,
+              style: [styles.more, { minWidth: moreHit, minHeight: moreHit }],
+              children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: theme.icon.md, color: theme.color.text })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "toolbar",
+      accessibilityLabel,
+      style: [styles.wrapRoot, sizeStyle, vertical ? styles.column : null, barStyle],
+      children
+    }
+  );
+}
+function ToolbarSeparator({ height }) {
+  const theme = useLoamTheme("toolbar");
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: {
+        width: theme.borderWidth.hair,
+        height: height ?? theme.icon.sm,
+        backgroundColor: theme.color.borderStrong,
+        marginHorizontal: theme.space[4]
+      }
+    }
+  );
+}
+function ToolbarTextAction({
+  children,
+  onPress,
+  disabled = false,
+  platform,
+  icon
+}) {
+  const theme = useLoamTheme("toolbar");
+  const android = isAndroidIdiom(theme, platform);
+  const ink = android ? theme.color.accentOnSoft : theme.color.accentStrong;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: children,
+      accessibilityState: { disabled },
+      disabled,
+      onPress,
+      hitSlop: 8,
+      android_ripple: android ? { color: theme.state.pressed } : void 0,
+      style: ({ pressed }) => [
+        {
+          minHeight: android ? theme.ctl.md : theme.ctl.sm,
+          paddingHorizontal: theme.space[12],
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "row",
+          gap: theme.space[8],
+          borderRadius: android ? theme.radius.full : theme.ctl.r.sm,
+          backgroundColor: android ? theme.color.accentSoft : void 0,
+          opacity: disabled ? theme.state.disabledOpacity : 1
+        },
+        pressed && !android && !disabled ? { backgroundColor: theme.state.pressed } : null
+      ],
+      children: [
+        icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.md, color: ink }) : null,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: ink,
+              fontSize: theme.fontSize[android ? 14 : 17],
+              fontWeight: android ? theme.fontWeight.medium : theme.fontWeight.semibold
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // A wrapping row. `toolbarH` sets the resting height of a single-line strip;
+  // extra lines grow it naturally.
+  wrapRoot: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    minHeight: theme.layout.toolbarH,
+    paddingHorizontal: theme.space.s1,
+    variants: {
+      density: {
+        comfortable: { gap: theme.space.s2, paddingVertical: theme.space.s1 },
+        compact: { gap: theme.space.s1, paddingVertical: 0 }
+      },
+      justify: {
+        start: { justifyContent: "flex-start" },
+        between: { justifyContent: "space-between" }
+      }
+    }
+  },
+  // The scroll container itself must not grow to fill its parent's cross axis,
+  // so `flexGrow: 0` keeps it toolbar-height.
+  scrollRoot: {
+    minHeight: theme.layout.toolbarH,
+    flexGrow: 0
+  },
+  // `justify` has no meaning on a horizontally-scrolling content row (it sizes
+  // to its content), so this style intentionally omits that variant group.
+  scrollContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: theme.space.s1,
+    variants: {
+      density: {
+        comfortable: { gap: theme.space.s2 },
+        compact: { gap: theme.space.s1 }
+      }
+    }
+  },
+  // `orientation="vertical"`: actions stack in a column.
+  column: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    flexWrap: "nowrap"
+  },
+  // The trailing "More" affordance for `overflow="menu"`. A real ≥44pt target
+  // (`tapMin`), squared off.
+  more: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md
+  }
+}));
+
+export { Toolbar, ToolbarSeparator, ToolbarTextAction };

package/dist/{chunk-PMMTGBBS.js → chunk-4CZMQDQL.js}

@@ -1,14 +1,15 @@
-import { Skeleton } from './chunk-PNF3NKB5.js';
-import { DEFAULT_LABELS, CardBrandMark, OrDivider } from './chunk-ROCUG24E.js';
-import { usePayLabels } from './chunk-GEIGMWNF.js';
-import { Badge } from './chunk-TN2ZNJUI.js';
-import { Button } from './chunk-E2E3I5W2.js';
+import { DEFAULT_LABELS, payBoxStyle, CardBrandMark, OrDivider } from './chunk-TDWWVJA4.js';
+import { usePayLabels } from './chunk-QNZII37O.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { FieldMessage } from './chunk-BTRMA7GC.js';
 import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
 import 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
 import { mask, methodsFor, methodText } from '@btndprojects/loam-pay';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function SavedCardChip({
   brand,
@@ -19,23 +20,56 @@ function SavedCardChip({
   onManage,
   useAnotherLabel,
   manageLabel,
+  loading = false,
+  variant,
+  elevation,
+  padding,
+  tone,
+  interactive = false,
+  onPress,
+  error = false,
   labels: labelsProp,
   style,
   testID
 }) {
   const labels = useLabels("paymentMethod", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.chip, style], children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.chipFacts, children: [
-      /* @__PURE__ */ jsx(CardBrandMark, { brand, size: "md", labels: labelsProp }),
-      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipMask, children: mask(brand, last4) }),
-      expiry ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipExpiry, children: labels.expires(expiry) }) : null,
-      isDefault ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "neutral", size: "sm", children: labels.defaultBadge }) : null
-    ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles.chipActions, children: [
-      onManage ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onManage, children: manageLabel ?? labels.manageCards }) : null,
-      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: onUseAnother, children: useAnotherLabel ?? labels.useDifferentCard })
-    ] })
+  const { styles, theme } = useStyles(sheet);
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { testID, accessibilityState: { busy: true }, "aria-busy": true, style, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.space[56], radius: "md" }) });
+  }
+  const box = payBoxStyle(theme, { variant, elevation, padding, tone, error: Boolean(error) });
+  const factsRow = /* @__PURE__ */ jsxs(View, { style: styles.chipFacts, children: [
+    /* @__PURE__ */ jsx(CardBrandMark, { brand, size: "md", labels: labelsProp }),
+    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipMask, children: mask(brand, last4) }),
+    expiry ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.chipExpiry, children: labels.expires(expiry) }) : null,
+    isDefault ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "neutral", size: "sm", children: labels.defaultBadge }) : null
+  ] });
+  const message = typeof error === "string" && error ? error : void 0;
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        testID,
+        "aria-invalid": error ? true : void 0,
+        style: [styles.chip, box, style],
+        children: [
+          interactive ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: [mask(brand, last4), expiry ? labels.expires(expiry) : null].filter(Boolean).join(", "),
+              onPress,
+              children: factsRow
+            }
+          ) : factsRow,
+          /* @__PURE__ */ jsxs(View, { style: styles.chipActions, children: [
+            onManage ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onManage, children: manageLabel ?? labels.manageCards }) : null,
+            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: onUseAnother, children: useAnotherLabel ?? labels.useDifferentCard })
+          ] })
+        ]
+      }
+    ),
+    message ? /* @__PURE__ */ jsx(FieldMessage, { invalid: true, children: message }) : null
   ] });
 }
 function ExpressPayRow({
@@ -48,6 +82,10 @@ function ExpressPayRow({
   onExpressPay,
   loading = false,
   onInstalments,
+  size = "lg",
+  tone = "accent",
+  motion = "full",
+  error,
   labels: labelsProp,
   style,
   testID
@@ -58,7 +96,9 @@ function ExpressPayRow({
   const resolvingLabel = resolvingLabelProp ?? labels.checkingWallet;
   const { styles, theme } = useStyles(sheet);
   const express = methodsFor({ platform }).find((m) => m.kind === "express");
-  const buttonLabel = label ?? (express ? labels.payWith((methodText(express.id, pay)?.label ?? express.label).toLocaleLowerCase(locale)) : labels.expressPay);
+  const buttonLabel = label ?? (express ? labels.payWith(
+    (methodText(express.id, pay)?.label ?? express.label).toLocaleLowerCase(locale)
+  ) : labels.expressPay);
   if (state === "unavailable") return null;
   return /* @__PURE__ */ jsxs(View, { testID, style: [styles.express, style], children: [
     state === "resolving" ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -83,9 +123,22 @@ function ExpressPayRow({
         }
       )
     ] }) : /* @__PURE__ */ jsxs(View, { style: styles.expressButtons, children: [
-      /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, leadingIcon: "lock", loading, onPress: onExpressPay, children: buttonLabel }),
-      onInstalments && secondary ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", fullWidth: true, onPress: onInstalments, children: secondary }) : null
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size,
+          variant: tone === "danger" ? "danger" : tone === "neutral" ? "tonal" : "primary",
+          motion,
+          fullWidth: true,
+          leadingIcon: "lock",
+          loading,
+          onPress: onExpressPay,
+          children: buttonLabel
+        }
+      ),
+      onInstalments && secondary ? /* @__PURE__ */ jsx(Button, { variant: "outline", size, motion, fullWidth: true, onPress: onInstalments, children: secondary }) : null
     ] }),
+    error ? /* @__PURE__ */ jsx(FieldMessage, { invalid: true, children: error }) : null,
     /* @__PURE__ */ jsx(OrDivider, { label: dividerLabel ?? labels.orPayWithCard, labels: labelsProp })
   ] });
 }

package/dist/chunk-4QCR3K2J.js

@@ -0,0 +1 @@
+