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

package/dist/chunk-G3HOYSF7.js

@@ -0,0 +1 @@
+

package/dist/chunk-GDKZTW34.js

@@ -0,0 +1,395 @@
+import { SummaryItemRow, PriceRow, Amount, FxNote } from './chunk-VBOXAEPI.js';
+import { Sheet } from './chunk-ZVFE5QGU.js';
+import { Input } from './chunk-ITTYJZWX.js';
+import { expandedProps } from './chunk-RQ3HASCC.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React3 from 'react';
+import { Text, View, Pressable } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { SHEET_DISMISS_FRACTION } from '@btndprojects/loam-pay';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { icons } from '@btndprojects/loam-icons';
+
+function CheckoutSheet({
+  open,
+  title,
+  titleLevel,
+  description,
+  children,
+  commit,
+  trust,
+  dismissible = true,
+  safeAreaBottom = 0,
+  closeLabel = "Close",
+  style,
+  onDismiss
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(
+    Sheet,
+    {
+      open,
+      title,
+      titleLevel,
+      dismissible,
+      closeLabel,
+      dismissFraction: SHEET_DISMISS_FRACTION,
+      onClose: onDismiss,
+      footer: (
+        /* The commit bar, outside the scroller. `safeAreaBottom` is padding on
+           the bar rather than a margin under it — or `Sheet.safeAreaBottom`, a
+           slot padding that would push this bar's own fill up off the screen
+           edge — so the surface still reaches the home indicator. */
+        /* @__PURE__ */ jsxs(View, { style: [styles.commitBar, { paddingBottom: theme.space.s4 + safeAreaBottom }], children: [
+          commit,
+          trust
+        ] })
+      ),
+      children: [
+        description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
+        /* @__PURE__ */ jsx(View, { style: [styles.body, style], children })
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  body: { gap: theme.space.s4 },
+  // The bar reads as a bar rather than as another block in the form: its own
+  // fill, a hairline above it, and the safe-area inset folded into its bottom
+  // padding at the use site. The horizontal padding is the bar's own now that it
+  // lives in `Sheet`'s footer slot, which is deliberately full-bleed — so the
+  // hairline spans the panel while the button keeps the body's gutter.
+  commitBar: {
+    gap: theme.space.s3,
+    paddingTop: theme.space.s4,
+    paddingHorizontal: theme.space[22],
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  }
+}));
+function PayButton({
+  label,
+  state,
+  busyLabel = "Paying\u2026",
+  validatingLabel = "Checking\u2026",
+  doneLabel = "Paid",
+  showLock = true,
+  fullWidth = true,
+  size = "lg",
+  accessibilityLabel,
+  style,
+  onPress
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet2);
+  const [idleWidth, setIdleWidth] = React3.useState(null);
+  const resting = state === "idle";
+  const busy = state === "validating" || state === "busy";
+  const onLayout = (event) => {
+    if (!resting || fullWidth) return;
+    const next = event.nativeEvent.layout.width;
+    if (next <= 0) return;
+    setIdleWidth((prev) => prev !== null && Math.abs(prev - next) < 1 ? prev : next);
+  };
+  const currentLabel = resting ? label : state === "validating" ? validatingLabel : state === "busy" ? busyLabel : doneLabel;
+  const leadingIcon = resting && showLock ? "lock" : state === "done" ? "check" : void 0;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      onLayout,
+      style: [
+        fullWidth ? styles.wrapFull : styles.wrapAuto,
+        // The frozen width, and only while the label is not the resting one.
+        !resting && !fullWidth && idleWidth !== null ? { minWidth: idleWidth } : null,
+        style
+      ],
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size,
+          fullWidth: true,
+          loading: busy,
+          leadingIcon,
+          accessibilityLabel,
+          onPress: () => {
+            if (!resting) return;
+            onPress();
+          },
+          children: typeof currentLabel === "string" ? currentLabel : /* @__PURE__ */ jsx(View, { style: styles.labelRow, children: typeof currentLabel === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: theme.color.accentInk }], children: currentLabel }) : currentLabel })
+        }
+      )
+    }
+  );
+}
+var sheet2 = createStyleSheet((theme) => ({
+  wrapFull: { alignSelf: "stretch" },
+  wrapAuto: { alignSelf: "flex-start" },
+  labelRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.ctl.gap.lg
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.type.body.letterSpacing
+  }
+}));
+function summaryIcon(name) {
+  if (name === void 0) return void 0;
+  return Object.prototype.hasOwnProperty.call(icons, name) ? name : void 0;
+}
+function OrderSummary({
+  variant,
+  items,
+  rows,
+  total,
+  currency,
+  title = "Order summary",
+  totalLabel = "Total",
+  coupon,
+  fxNote,
+  locale,
+  style,
+  onCouponDraftChange,
+  onApplyCoupon,
+  onRemoveCoupon
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet3);
+  const couponLabelId = React3.useId();
+  const couponErrorId = React3.useId();
+  const heading = `${title} \xB7 ${currency}`;
+  const showItems = variant === "itemised" && items !== void 0 && items.length > 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "region",
+      accessibilityLabel: heading,
+      style: [styles.section, style],
+      children: [
+        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.overline, children: heading }),
+        showItems ? /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.itemList, children: items.map((item) => /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsx(
+          SummaryItemRow,
+          {
+            name: item.name,
+            detail: item.detail,
+            qty: item.qty,
+            minor: item.qty * item.unit,
+            currency,
+            icon: summaryIcon(item.icon),
+            locale,
+            noSymbol: true
+          }
+        ) }, `${item.name}-${item.unit}`)) }) : null,
+        rows.length > 0 ? /* @__PURE__ */ jsx(View, { style: [styles.rowStack, showItems ? styles.rowStackRuled : null], children: rows.map((row, index) => /* @__PURE__ */ jsx(
+          PriceRow,
+          {
+            label: row.label,
+            minor: row.minor,
+            currency,
+            tone: row.tone,
+            strong: row.strong,
+            rule: row.rule,
+            locale,
+            noSymbol: true
+          },
+          `${index}-${String(row.label)}`
+        )) }) : null,
+        coupon ? /* @__PURE__ */ jsx(View, { style: styles.couponBlock, children: coupon.applied ? /* @__PURE__ */ jsxs(View, { style: styles.appliedRow, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "tag", size: theme.icon.sm, color: theme.color.goodOnSoft }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.appliedCode, children: coupon.applied }),
+          onRemoveCoupon ? /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", onPress: onRemoveCoupon, children: "Remove" }) }) : null
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { nativeID: couponLabelId, style: styles.fieldLabel, children: coupon.label ?? "Discount code" }),
+          /* @__PURE__ */ jsxs(View, { style: styles.couponRow, children: [
+            /* @__PURE__ */ jsx(View, { style: styles.couponField, children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                "aria-labelledby": couponLabelId,
+                "aria-describedby": coupon.error ? couponErrorId : void 0,
+                "aria-invalid": coupon.error !== void 0 || void 0,
+                value: coupon.draft,
+                placeholder: coupon.placeholder,
+                autoComplete: "off",
+                autoCorrect: false,
+                loading: coupon.busy ?? false,
+                error: coupon.error !== void 0,
+                onChangeText: (next) => onCouponDraftChange?.(next)
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                loading: coupon.busy ?? false,
+                onPress: () => onApplyCoupon?.(coupon.draft),
+                children: "Apply"
+              }
+            )
+          ] }),
+          coupon.error ? /* @__PURE__ */ jsx(Text, { nativeID: couponErrorId, style: styles.fieldError, children: coupon.error }) : null
+        ] }) }) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles.totalRow, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.totalLabel, children: totalLabel }),
+          /* @__PURE__ */ jsx(Amount, { minor: total, currency, size: "hero", locale })
+        ] }),
+        fxNote ? /* @__PURE__ */ jsx(FxNote, { currency: fxNote.currency, rateLine: fxNote.rateLine }) : null
+      ]
+    }
+  );
+}
+function CollapsedSummaryBar({
+  total,
+  currency,
+  open,
+  children,
+  label = "Order summary",
+  locale,
+  style,
+  onToggle
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet3);
+  const panelId = React3.useId();
+  return /* @__PURE__ */ jsxs(View, { style: [styles.bar, style], children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityState: { expanded: open },
+        ...expandedProps(open),
+        "aria-controls": panelId,
+        onPress: () => onToggle(!open),
+        style: ({ pressed }) => [styles.trigger, pressed ? styles.triggerPressed : null],
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: open ? "chevron-up" : "chevron-down",
+              size: theme.icon.sm,
+              color: theme.color.text3
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: styles.triggerLabel, children: label }),
+          /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(Amount, { minor: total, currency, size: "md", weight: "bold", locale }) })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(View, { nativeID: panelId, style: styles.panel, children }) : null
+  ] });
+}
+var sheet3 = createStyleSheet((theme) => ({
+  section: { gap: theme.space.s3 },
+  overline: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  itemList: { gap: theme.space.s3 },
+  rowStack: { gap: theme.space.s2 },
+  rowStackRuled: {
+    paddingTop: theme.space.s3,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  couponBlock: { gap: theme.space.s1 },
+  appliedRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    padding: theme.space.s2,
+    borderRadius: theme.radius.md,
+    // The soft tint always carries its tone edge: `goodSoft` collapses to the
+    // plain surface under high contrast, and the edge is the only thing left
+    // drawing the block.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.good,
+    backgroundColor: theme.color.goodSoft
+  },
+  appliedCode: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.goodOnSoft
+  },
+  pushEnd: { marginStart: "auto" },
+  fieldLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  couponRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
+  couponField: { flex: 1 },
+  fieldError: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.danger
+  },
+  totalRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    gap: theme.space.s4,
+    paddingTop: theme.space.s3,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  totalLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  bar: {
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.ctl.lg,
+    padding: theme.space.s3
+  },
+  triggerPressed: { backgroundColor: theme.state.pressed },
+  triggerLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  panel: {
+    padding: theme.space.s3,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  }
+}));
+
+export { CheckoutSheet, CollapsedSummaryBar, OrderSummary, PayButton, summaryIcon };

package/dist/chunk-GL7B2DOW.js

@@ -0,0 +1,134 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import 'react';
+import { Pressable, Text, View } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function statusMeta(status, queued) {
+  const changes = `${queued} change${queued === 1 ? "" : "s"}`;
+  switch (status) {
+    case "offline":
+      return { icon: "wifi-off", label: `Offline \xB7 ${changes} queued` };
+    case "syncing":
+      return { icon: "refresh", label: "Back online \xB7 syncing" };
+    default:
+      return { icon: "check-circle", label: "All changes synced" };
+  }
+}
+function ConnectivityBanner({
+  status,
+  queuedCount = 0,
+  onRetry,
+  message
+}) {
+  const { styles } = useStyles(sheet, { status });
+  const theme = useLoamTheme();
+  const meta = statusMeta(status, queuedCount);
+  const fg = status === "offline" ? (
+    // The offline banner rests on `surface3`, where neutral `text2` measures
+    // only 4.4:1 (WCAG fail); primary `text` clears 4.5:1.
+    theme.color.text
+  ) : status === "syncing" ? theme.color.warnOnSoft : theme.color.goodOnSoft;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: onRetry ? "button" : "text",
+      accessibilityLabel: message ?? meta.label,
+      accessibilityState: onRetry ? {} : { disabled: true },
+      onPress: onRetry,
+      style: ({ pressed }) => [styles.banner, pressed && onRetry ? styles.pressed : null],
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: 15, color: fg }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], numberOfLines: 1, ellipsizeMode: "tail", children: message ?? meta.label }),
+        status === "offline" && onRetry ? /* @__PURE__ */ jsx(Text, { style: styles.retry, children: "RETRY" }) : null
+      ]
+    }
+  );
+}
+var SYNC_META = {
+  queued: { icon: "refresh", label: "Queued \u2014 waiting for a connection" },
+  syncing: { icon: "refresh", label: "Syncing" },
+  synced: { icon: "check", label: "Synced" },
+  failed: { icon: "alert-circle", label: "Failed to sync" }
+};
+function SyncBadge({
+  state,
+  accessibilityLabel,
+  size = 26
+}) {
+  const { styles } = useStyles(sheet, { state });
+  const theme = useLoamTheme();
+  const meta = SYNC_META[state];
+  const fg = state === "synced" ? theme.color.goodOnSoft : state === "failed" ? theme.color.dangerOnSoft : theme.color.warnOnSoft;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel: accessibilityLabel ?? meta.label,
+      style: [styles.badge, { width: size, height: size }],
+      children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: Math.round(size * 0.54), color: fg })
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  banner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[9],
+    paddingVertical: theme.space[10],
+    paddingHorizontal: theme.space.s4,
+    borderBottomWidth: theme.borderWidth.base,
+    variants: {
+      status: {
+        offline: {
+          backgroundColor: theme.color.surface3,
+          borderBottomColor: theme.color.border
+        },
+        syncing: {
+          backgroundColor: theme.color.warnSoft,
+          borderBottomColor: theme.edge.warn
+        },
+        online: {
+          backgroundColor: theme.color.goodSoft,
+          borderBottomColor: theme.edge.good
+        }
+      },
+      state: {}
+    }
+  },
+  // `minWidth: 0` lets the copy truncate rather than push `RETRY` off the edge.
+  label: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.caption1.fontSize,
+    variants: { status: {}, state: {} }
+  },
+  retry: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    // Shown only on the offline banner's `surface3` fill, where `text3` is
+    // 4.16:1 (WCAG fail); primary `text` clears 4.5:1.
+    color: theme.color.text,
+    variants: { status: {}, state: {} }
+  },
+  badge: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    variants: {
+      state: {
+        queued: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+        syncing: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+        synced: { backgroundColor: theme.color.goodSoft, borderColor: theme.edge.good },
+        failed: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger }
+      },
+      status: {}
+    }
+  },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+
+export { ConnectivityBanner, SyncBadge };