@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-PUPM2YGF.js

@@ -0,0 +1,376 @@
+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 * 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 { icons } from '@btndprojects/loam-icons';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var PickerContext = React.createContext(null);
+function methodIcon(name) {
+  if (Object.prototype.hasOwnProperty.call(icons, name)) return name;
+  return "card";
+}
+function CardBrandMark({
+  brand,
+  label,
+  size = "sm",
+  style,
+  testID
+}) {
+  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";
+  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 }) {
+  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(View, { "aria-hidden": true, testID: "or-divider-rule", style: styles.dividerRule })
+  ] });
+}
+function PaymentMethodRow({
+  id,
+  label,
+  sub,
+  icon,
+  stored,
+  badge,
+  settle,
+  fee,
+  selected,
+  showCost = false,
+  disabled = false,
+  motion = "full",
+  onSelect,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { selected, disabled });
+  const picker = React.useContext(PickerContext);
+  const nodeRef = React.useRef(null);
+  const entryRef = React.useRef({ id, disabled, focus: () => {
+  } });
+  entryRef.current.id = id;
+  entryRef.current.disabled = disabled;
+  entryRef.current.focus = () => nodeRef.current?.focus?.();
+  const register = picker?.register;
+  React.useEffect(() => register?.(entryRef.current), [register]);
+  const animate = useResolvedMotion(motion) !== "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,
+    theme.duration.fast,
+    easing,
+    animate
+  );
+  const backgroundColor = useColorTransition(
+    disabled ? theme.color.surface3 : selected ? theme.state.selected : theme.color.surface,
+    theme.duration.fast,
+    easing,
+    animate
+  );
+  const indicatorColor = useColorTransition(
+    selected ? theme.focus.ringColor : theme.color.borderStrong,
+    theme.duration.fast,
+    easing,
+    animate
+  );
+  const isTabStop = picker ? picker.activeId === id && !disabled : !disabled;
+  const webProps = {
+    tabIndex: isTabStop ? 0 : -1,
+    onKeyDown: (event) => {
+      if (disabled) return;
+      picker?.onItemKeyDown(id, event);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ref: nodeRef,
+      testID,
+      accessibilityRole: "radio",
+      accessibilityLabel: [label, stored ? mask(stored.brand, stored.last4) : null, badge].filter(Boolean).join(", "),
+      accessibilityState: { checked: selected, disabled },
+      "aria-checked": selected,
+      disabled,
+      onPress: disabled ? void 0 : () => onSelect?.(id),
+      ...webProps,
+      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.row, { borderColor, backgroundColor }, style], children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            "aria-hidden": true,
+            testID: "method-indicator",
+            style: [styles.indicator, { borderColor: indicatorColor }],
+            children: selected ? /* @__PURE__ */ jsx(View, { style: styles.indicatorDot }) : null
+          }
+        ),
+        icon ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.iconTile, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: theme.color.text2 }) }) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles.rowText, children: [
+          /* @__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(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
+        ] }),
+        showCost && (settle || fee) ? /* @__PURE__ */ jsxs(View, { style: styles.costColumn, children: [
+          settle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.settle, children: settle }) : null,
+          fee ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.fee, children: fee }) : null
+        ] }) : null
+      ] })
+    }
+  );
+}
+function PaymentMethodPicker({
+  methods,
+  value,
+  onChange,
+  showCost = false,
+  verbose = false,
+  label = "Payment method",
+  stored,
+  unavailable,
+  badges,
+  motion = "full",
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const itemsRef = React.useRef([]);
+  const [, bump] = React.useReducer((c) => c + 1, 0);
+  const register = React.useCallback((entry) => {
+    itemsRef.current = [...itemsRef.current, entry];
+    bump();
+    return () => {
+      itemsRef.current = itemsRef.current.filter((e) => e !== entry);
+      bump();
+    };
+  }, []);
+  const firstEnabled = itemsRef.current.find((e) => !e.disabled)?.id;
+  const activeId = value ?? firstEnabled;
+  const onItemKeyDown = React.useCallback(
+    (currentId, event) => {
+      const enabled = itemsRef.current.filter((e) => !e.disabled);
+      if (enabled.length === 0) return;
+      let target;
+      const { key } = event;
+      if (key === "Home") {
+        target = enabled[0];
+      } else if (key === "End") {
+        target = enabled[enabled.length - 1];
+      } else {
+        let dir = 0;
+        if (key === "ArrowDown") dir = 1;
+        else if (key === "ArrowUp") dir = -1;
+        else if (key === "ArrowRight") dir = theme.rtl ? -1 : 1;
+        else if (key === "ArrowLeft") dir = theme.rtl ? 1 : -1;
+        else return;
+        const current = enabled.findIndex((e) => e.id === currentId);
+        const from = current === -1 ? 0 : current;
+        target = enabled[(from + dir + enabled.length) % enabled.length];
+      }
+      if (!target) return;
+      event.preventDefault?.();
+      onChange(target.id);
+      target.focus();
+    },
+    [onChange, theme.rtl]
+  );
+  const ctx = React.useMemo(
+    () => ({ activeId, register, onItemKeyDown }),
+    [activeId, register, onItemKeyDown]
+  );
+  return /* @__PURE__ */ jsx(PickerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    View,
+    {
+      testID,
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: label,
+      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
+      ))
+    }
+  ) });
+}
+var sheet = createStyleSheet((theme) => ({
+  plate: {
+    // Every host lays the plate in a row (the card field, the saved-card chip,
+    // the method row), so it centres on the row's cross axis. `flex-start` kept
+    // it from stretching in a column but pinned it to the top edge of each row.
+    alignSelf: "center",
+    borderWidth: theme.borderWidth.base,
+    borderRadius: theme.radius.xs,
+    variants: {
+      plateTone: {
+        info: { backgroundColor: theme.color.infoSoft, borderColor: theme.edge.info },
+        warn: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+        good: { backgroundColor: theme.color.goodSoft, borderColor: theme.edge.good },
+        danger: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger },
+        "text-3": { backgroundColor: theme.color.surface3, borderColor: theme.color.border }
+      },
+      plateSize: {
+        sm: { paddingHorizontal: theme.space[6], paddingVertical: theme.space[2] },
+        md: { paddingHorizontal: theme.space[8], paddingVertical: theme.space[4] }
+      }
+    }
+  },
+  plateText: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    // Uppercased in CSS, not in JS: the string stays the brand table's own label
+    // (`Visa`), so an accessible name and a test read the word, not a shout.
+    textTransform: "uppercase",
+    variants: {
+      plateTone: {
+        info: { color: theme.color.infoOnSoft },
+        warn: { color: theme.color.warnOnSoft },
+        good: { color: theme.color.goodOnSoft },
+        danger: { color: theme.color.dangerOnSoft },
+        "text-3": { color: theme.color.text3 }
+      },
+      plateSize: {
+        sm: {
+          fontSize: theme.fontSize[10],
+          letterSpacing: theme.fontSize[10] * theme.tracking.caps
+        },
+        md: {
+          fontSize: theme.fontSize[11],
+          letterSpacing: theme.fontSize[11] * theme.tracking.caps
+        }
+      }
+    }
+  },
+  divider: { flexDirection: "row", alignItems: "center", gap: theme.space.s3 },
+  dividerRule: {
+    flexGrow: 1,
+    height: theme.borderWidth.thin,
+    backgroundColor: theme.color.border
+  },
+  dividerLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[11],
+    letterSpacing: theme.fontSize[11] * theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  group: { gap: theme.space.s2 },
+  // `borderColor` / `backgroundColor` arrive at the use site as animated values
+  // so selection can crossfade; nothing about the box travels.
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.ctl.lg,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    variants: {
+      selected: { true: {}, false: {} },
+      disabled: { true: { opacity: theme.state.disabledOpacity }, false: {} }
+    }
+  },
+  indicator: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: theme.space[20],
+    height: theme.space[20],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.heavy,
+    backgroundColor: "transparent",
+    variants: {
+      selected: { true: {}, false: {} },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  indicatorDot: {
+    width: theme.space[10],
+    height: theme.space[10],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  iconTile: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: theme.ctl.iconBtnSm,
+    height: theme.ctl.iconBtnSm,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    variants: {
+      selected: { true: {}, false: {} },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  rowText: { flexShrink: 1, flexGrow: 1, gap: theme.space[2] },
+  rowTitle: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space[6]
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  },
+  mask: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
+  },
+  sub: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  },
+  costColumn: { flexShrink: 0, alignItems: "flex-end", gap: theme.space[2] },
+  settle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
+  },
+  fee: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[10],
+    color: theme.color.text3
+  },
+  // Badge hugs with `flex-start`, which pins it to the top of this centred row.
+  rowBadge: { alignSelf: "center" }
+}));
+
+export { CardBrandMark, OrDivider, PaymentMethodPicker, PaymentMethodRow, methodIcon };