@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-7LM4ASFH.js

@@ -0,0 +1,172 @@
+import { ErrorSummary } from './chunk-K3TK3GIV.js';
+import { useOptionalConfirm } from './chunk-7QOYGENL.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import * as React from 'react';
+import * as RN from 'react-native';
+import { View, Platform, Alert as Alert$1, BackHandler, AccessibilityInfo } from 'react-native';
+import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_FORM_LABELS = {
+  draftRestored: (time) => time ? `Restored your draft from ${time}.` : "Restored your draft.",
+  discardDraft: "Discard draft",
+  draftDiscarded: "Draft discarded",
+  leaveTitle: "Leave without saving?",
+  leaveBody: (n) => `Your changes to ${n} field${n === 1 ? "" : "s"} will be lost.`,
+  leaveConfirm: "Discard changes",
+  leaveConfirmAndroid: "Discard",
+  leaveCancel: "Keep editing"
+};
+var FormContext = React.createContext(null);
+function useFormContext() {
+  const ctx = React.useContext(FormContext);
+  if (!ctx) throw new Error("useFormContext must be used inside a <Form>");
+  return ctx;
+}
+function Form({
+  onSubmit,
+  onValidate,
+  onFocusField,
+  submitting = false,
+  motion = "full",
+  children,
+  restoredDraft,
+  density = "standard",
+  size = "md",
+  error,
+  disabled = false,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("formNative", DEFAULT_FORM_LABELS, labelsProp);
+  const [draftShown, setDraftShown] = React.useState(restoredDraft != null);
+  const discardDraft = () => {
+    restoredDraft?.onDiscard();
+    setDraftShown(false);
+    AccessibilityInfo.announceForAccessibility(labels.draftDiscarded);
+  };
+  const savedAt = restoredDraft?.savedAt;
+  const savedTime = savedAt ? savedAt.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" }) : null;
+  const [errors, setErrors] = React.useState([]);
+  const submit = React.useCallback(async () => {
+    if (submitting || disabled) return;
+    if (onValidate) {
+      const found = await onValidate();
+      if (found.length > 0) {
+        setErrors(found);
+        const first = found[0];
+        if (first) onFocusField?.(first.fieldId);
+        return;
+      }
+    }
+    setErrors([]);
+    await onSubmit();
+  }, [submitting, disabled, onValidate, onFocusField, onSubmit]);
+  const ctx = React.useMemo(
+    () => ({ submit, submitting, disabled, size, density }),
+    [submit, submitting, disabled, size, density]
+  );
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.form,
+        density === "compact" && styles.formCompact,
+        density === "comfortable" && styles.formSpacious
+      ],
+      "aria-disabled": disabled || void 0,
+      children: [
+        /* @__PURE__ */ jsx(ErrorSummary, { errors, motion, onFocusField }),
+        error ? /* @__PURE__ */ jsx(Alert, { size: size === "lg" ? "md" : "compact", tone: "danger", title: error }) : null,
+        restoredDraft && draftShown ? /* @__PURE__ */ jsx(
+          Alert,
+          {
+            size: size === "lg" ? "md" : "compact",
+            tone: "info",
+            title: labels.draftRestored(savedTime),
+            action: /* @__PURE__ */ jsx(Button, { size: "xs", variant: "ghost", onPress: discardDraft, children: labels.discardDraft })
+          }
+        ) : null,
+        children
+      ]
+    }
+  ) });
+}
+function useFormLeaveGuard(dirty, options = {}) {
+  const labels = useLabels("formNative", DEFAULT_FORM_LABELS, options.labels);
+  const confirm = useOptionalConfirm();
+  const n = options.changedFields ?? 1;
+  const ask = React.useCallback(async () => {
+    if (!dirty) return true;
+    const body = labels.leaveBody(n);
+    if (Platform.OS === "ios") {
+      const { ActionSheetIOS } = RN;
+      return new Promise(
+        (resolve) => ActionSheetIOS.showActionSheetWithOptions(
+          {
+            title: labels.leaveTitle,
+            message: body,
+            options: [labels.leaveConfirm, labels.leaveCancel],
+            destructiveButtonIndex: 0,
+            cancelButtonIndex: 1
+          },
+          (i) => resolve(i === 0)
+        )
+      );
+    }
+    if (confirm) {
+      return confirm.confirm({
+        title: labels.leaveTitle,
+        body,
+        tone: "danger",
+        confirmLabel: labels.leaveConfirmAndroid,
+        cancelLabel: labels.leaveCancel
+      });
+    }
+    return new Promise(
+      (resolve) => Alert$1.alert(
+        labels.leaveTitle,
+        body,
+        [
+          { text: labels.leaveCancel, style: "cancel", onPress: () => resolve(false) },
+          { text: labels.leaveConfirmAndroid, style: "destructive", onPress: () => resolve(true) }
+        ],
+        { cancelable: true, onDismiss: () => resolve(false) }
+      )
+    );
+  }, [dirty, confirm, labels, n]);
+  const onLeave = options.onLeave;
+  React.useEffect(() => {
+    if (!dirty || !onLeave || Platform.OS !== "android") return;
+    const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+      void ask().then((leave) => leave && onLeave());
+      return true;
+    });
+    return () => sub.remove();
+  }, [dirty, onLeave, ask]);
+  return ask;
+}
+function FormActions({ children }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(View, { style: styles.actions, children });
+}
+var sheet = createStyleSheet((theme) => ({
+  // Fields 16 apart, the form rhythm on every platform.
+  form: {
+    gap: theme.space.s4
+  },
+  formCompact: { gap: theme.space.s3 },
+  formSpacious: { gap: theme.space.s6 },
+  actions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    // Button group gap 8, shared with dialogs and toasts.
+    gap: theme.space.s2,
+    paddingTop: theme.space.s1
+  }
+}));
+
+export { Form, FormActions, useFormContext, useFormLeaveGuard };

package/dist/chunk-7MCEJFWV.js

@@ -0,0 +1,341 @@
+import { DismissButton } from './chunk-Z7I4ZSO6.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import 'react';
+import { View, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/checkout/checkout-labels.ts
+var DEFAULT_LABELS = {
+  paying: "Paying\u2026",
+  checking: "Checking\u2026",
+  paid: "Paid",
+  orderSummary: "Order summary",
+  summaryHeading: (title, currency) => `${title} \xB7 ${currency}`,
+  total: "Total",
+  discountCode: "Discount code",
+  remove: "Remove",
+  apply: "Apply",
+  calculating: "Calculating\u2026",
+  outOfStock: "Out of stock",
+  useRemove: "Use Remove to take it out",
+  removeItem: (name) => `Remove ${name}`,
+  removedItem: (name) => `Removed ${name}`,
+  undo: "Undo",
+  cartEmpty: "Your cart is empty",
+  continueShopping: "Continue shopping",
+  encrypted: "Encrypted",
+  cardDetailsNeverTouch: "Card details never touch our servers",
+  pciDss: "PCI DSS SAQ-A",
+  refundWindow: "30-day refund",
+  cart: "Cart",
+  cartCount: (name, count) => `${name}, ${count} ${count === 1 ? "item" : "items"}`,
+  mandateTitle: "Direct debit mandate",
+  mandateAuthorise: (merchant) => `By giving your IBAN and confirming this payment you authorise ${merchant} to send instructions to your bank to debit your account, and your bank to debit your account in accordance with those instructions.`,
+  mandateRefund: (weeks) => `You are entitled to a refund from your bank under the terms of your agreement with it. A refund must be claimed within ${weeks} weeks of the date your account was debited.`,
+  dismiss: "Dismiss"
+};
+
+// src/checkout/checkout-error-chip.ts
+function checkoutErrorChip(theme) {
+  return {
+    backgroundColor: theme.color.dangerSoft,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.edge.danger,
+    borderRadius: theme.radius.xs,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space[2],
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.dangerOnSoft
+  };
+}
+function trustInk(theme, tone) {
+  return tone === "neutral" ? theme.color.text2 : softToneSkin(theme, tone).ink;
+}
+function SecurePayLabel({
+  label,
+  showLock = true,
+  size = "sm",
+  tone = "neutral",
+  variant = "plain",
+  icon = "lock",
+  dismissible = false,
+  onDismiss,
+  loading = false,
+  error,
+  action,
+  motion,
+  labels: labelsProp,
+  style
+}) {
+  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("checkout");
+  const { styles } = useStyles(sheet);
+  const ink = trustInk(theme, tone);
+  const pill = variant === "soft";
+  const skin = softToneSkin(theme, tone === "neutral" ? "accent" : tone);
+  const glyph = error ? theme.color.danger : ink;
+  const row = /* @__PURE__ */ jsxs(
+    View,
+    {
+      "aria-busy": loading || void 0,
+      accessibilityState: loading ? { busy: true } : void 0,
+      "aria-invalid": error ? true : void 0,
+      style: [
+        styles.secureRow,
+        pill ? [styles.securePill, tone === "neutral" ? { backgroundColor: theme.color.surface2 } : { backgroundColor: skin.fill }] : null,
+        typeof error === "string" && error ? null : style
+      ],
+      children: [
+        showLock ? /* @__PURE__ */ jsx(
+          View,
+          {
+            "aria-hidden": true,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.xs, color: glyph })
+          }
+        ) : null,
+        loading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: theme.space[80], height: theme.fontSize[12], motion }) : /* @__PURE__ */ jsx(Text, { style: [size === "sm" ? styles.secureLabelSm : styles.secureLabelMd, { color: ink }], children: label }),
+        action,
+        dismissible || onDismiss ? /* @__PURE__ */ jsx(DismissButton, { label: labels.dismiss, onPress: () => onDismiss?.(), color: ink }) : null
+      ]
+    }
+  );
+  if (typeof error !== "string" || !error) return row;
+  return /* @__PURE__ */ jsxs(View, { style, children: [
+    row,
+    /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles.secureError, children: error })
+  ] });
+}
+var TRUST_INLINE = [{ icon: "lock", label: "Encrypted" }];
+var TRUST_ROW = [
+  { icon: "lock", label: "Card details never touch our servers" },
+  { icon: "shield", label: "PCI DSS SAQ-A" },
+  { icon: "refresh", label: "30-day refund" }
+];
+var trustInline = (labels) => [
+  { icon: "lock", label: labels.encrypted }
+];
+var trustRow = (labels) => [
+  { icon: "lock", label: labels.cardDetailsNeverTouch },
+  { icon: "shield", label: labels.pciDss },
+  { icon: "refresh", label: labels.refundWindow }
+];
+function TrustRow({
+  level,
+  items,
+  tone = "neutral",
+  loading = false,
+  error,
+  labels: labelsProp,
+  style
+}) {
+  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("checkout");
+  const { styles } = useStyles(sheet);
+  const resolved = items === void 0 || items === TRUST_INLINE || items === TRUST_ROW ? level === "inline" ? trustInline(labels) : trustRow(labels) : items;
+  const ink = trustInk(theme, tone);
+  const alert = error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles.trustError, children: error }) : null;
+  if (loading) {
+    const bars = level === "inline" ? 1 : Math.max(resolved.length, 1);
+    const skeletons = /* @__PURE__ */ jsx(View, { accessibilityState: { busy: true }, "aria-busy": true, style: [styles.trustList, style], children: Array.from({ length: bars }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: theme.space[80], height: theme.fontSize[12] }, i)) });
+    return alert ? /* @__PURE__ */ jsxs(View, { children: [
+      skeletons,
+      alert
+    ] }) : skeletons;
+  }
+  if (level === "inline") {
+    const first = resolved[0];
+    const label = /* @__PURE__ */ jsx(
+      SecurePayLabel,
+      {
+        label: first?.label ?? "",
+        showLock: first?.icon !== void 0,
+        tone,
+        style
+      }
+    );
+    return alert ? /* @__PURE__ */ jsxs(View, { children: [
+      label,
+      alert
+    ] }) : label;
+  }
+  const list = (
+    // A real list, so three facts are announced as three.
+    /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: [styles.trustList, style], children: resolved.map((item) => /* @__PURE__ */ jsxs(View, { role: "listitem", style: styles.trustItem, children: [
+      item.icon ? /* @__PURE__ */ jsx(
+        View,
+        {
+          "aria-hidden": true,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: /* @__PURE__ */ jsx(Icon, { name: item.icon, size: theme.icon.xs, color: ink })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(Text, { style: [styles.trustLabel, { color: ink }], children: item.label })
+    ] }, item.label)) })
+  );
+  return alert ? /* @__PURE__ */ jsxs(View, { children: [
+    list,
+    alert
+  ] }) : list;
+}
+function MandateNotice({
+  merchantLegalName,
+  weeks = 8,
+  title,
+  tone = "neutral",
+  variant = "outline",
+  size = "md",
+  icon,
+  dismissible = false,
+  onDismiss,
+  action,
+  loading = false,
+  error,
+  motion,
+  labels: labelsProp,
+  style
+}) {
+  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("checkout");
+  const { styles } = useStyles(sheet);
+  const skin = tone === "neutral" ? null : softToneSkin(theme, tone);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      "aria-busy": loading || void 0,
+      style: [
+        styles.mandate,
+        size === "sm" ? styles.mandateCompact : null,
+        skin ? { borderColor: skin.edge } : null,
+        skin && variant === "soft" ? { backgroundColor: skin.fill } : null,
+        variant === "soft" && !skin ? { backgroundColor: theme.color.surface2 } : null,
+        error ? { borderColor: theme.color.danger } : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.mandateHead, children: [
+          icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.xs, color: skin ? skin.ink : theme.color.text3 }) : null,
+          /* @__PURE__ */ jsx(Text, { style: [styles.overline, skin ? { color: skin.ink } : null], children: title ?? labels.mandateTitle }),
+          dismissible ? /* @__PURE__ */ jsx(View, { style: styles.mandateDismiss, children: /* @__PURE__ */ jsx(
+            DismissButton,
+            {
+              label: labels.dismiss,
+              onPress: () => onDismiss?.(),
+              color: skin ? skin.ink : theme.color.text3
+            }
+          ) }) : null
+        ] }),
+        loading ? /* @__PURE__ */ jsxs(View, { style: styles.mandateSkeletons, children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: theme.space[256], height: theme.fontSize[12], motion }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: theme.space[160], height: theme.fontSize[12], motion })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.mandateBody, size === "sm" ? styles.mandateBodyCompact : null], children: labels.mandateAuthorise(merchantLegalName) }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.mandateBody, size === "sm" ? styles.mandateBodyCompact : null], children: labels.mandateRefund(weeks) })
+        ] }),
+        error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: [styles.mandateError, skin && tone !== "danger" ? styles.mandateErrorChip : null], children: error }) : null,
+        action
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  secureRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  secureLabelSm: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    letterSpacing: theme.type.caption1.letterSpacing,
+    color: theme.color.text2
+  },
+  secureLabelMd: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    color: theme.color.text2
+  },
+  // The message sits on its own danger tint: `dangerOnSoft` is measured there only.
+  secureError: {
+    alignSelf: "flex-start",
+    marginTop: theme.space.s1,
+    ...checkoutErrorChip(theme)
+  },
+  trustList: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "center",
+    columnGap: theme.space.s4,
+    rowGap: theme.space.s1
+  },
+  trustError: {
+    marginTop: theme.space.s1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.dangerOnSoft
+  },
+  trustItem: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  trustLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  mandate: {
+    gap: theme.space.s1,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  securePill: {
+    alignSelf: "flex-start",
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radius.full
+  },
+  mandateCompact: { padding: theme.space.s2 },
+  mandateHead: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  mandateDismiss: { marginLeft: "auto" },
+  mandateSkeletons: { gap: theme.space.s1 },
+  mandateBodyCompact: { fontSize: theme.type.caption1.fontSize, lineHeight: theme.type.caption1.lineHeight },
+  mandateError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.dangerOnSoft
+  },
+  // `dangerOnSoft` is measured on the danger tint only; on another tone's fill
+  // the message carries that tint itself.
+  mandateErrorChip: {
+    alignSelf: "flex-start",
+    backgroundColor: theme.color.dangerSoft,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.edge.danger,
+    borderRadius: theme.radius.xs,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space.s1
+  },
+  overline: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans,
+    color: theme.color.text3
+  },
+  mandateBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  }
+}));
+
+export { DEFAULT_LABELS, MandateNotice, SecurePayLabel, TRUST_INLINE, TRUST_ROW, TrustRow, checkoutErrorChip };