@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-QHAITQIF.js → chunk-GVQQG435.js}

@@ -1,9 +1,12 @@
-import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { NumberRoll } from './chunk-IMMALLRU.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
 import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import 'react';
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { moneyParts } from '@btndprojects/loam-pay';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -17,7 +20,31 @@ var DEFAULT_LABELS = {
   fxNote: "Your bank may convert at its own rate \u2014 we show the rate we used:",
   fxCharged: (currency, note) => `Charged in ${currency}. ${note} `
 };
-function Amount({
+function Amount(props) {
+  const { unit, delta, caption, error, ...core } = props;
+  const { styles } = useStyles(sheet);
+  if (!unit && !delta && !caption && !error) return /* @__PURE__ */ jsx(AmountCore, { ...core });
+  const sign = delta?.trim().charAt(0);
+  return /* @__PURE__ */ jsxs(View, { style: styles.amountStack, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.amountLine, children: [
+      /* @__PURE__ */ jsx(AmountCore, { ...core }),
+      unit ? /* @__PURE__ */ jsx(Text, { style: styles.amountUnit, children: unit }) : null,
+      delta ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            styles.amountDelta,
+            sign === "+" ? styles.deltaGood : sign === "-" || sign === "\u2212" ? styles.deltaBad : null
+          ],
+          children: delta
+        }
+      ) : null
+    ] }),
+    caption ? /* @__PURE__ */ jsx(Text, { style: styles.amountCaption, children: caption }) : null,
+    error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles.amountError, children: error }) : null
+  ] });
+}
+function AmountCore({
   minor,
   currency,
   size = "md",
@@ -34,14 +61,19 @@ function Amount({
   style,
   testID,
   roll = false,
-  motion
+  motion,
+  loading = false,
+  platform
 }) {
   const labels = useLabels("money", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("money");
+  const android = isAndroidIdiom(theme, platform);
   const providerLocale = useLoamLocale();
   const locale = localeProp ?? providerLocale;
   const strikeWord = strikeLabel ?? labels.was;
   const hero = size === "hero";
-  const resolvedWeight = weight ?? (hero ? "bold" : "medium");
+  const large = size === "lg" || hero;
+  const resolvedWeight = weight ?? (large ? android ? "regular" : "bold" : "medium");
   const { styles } = useStyles(sheet, {
     size,
     weight: resolvedWeight,
@@ -52,9 +84,23 @@ function Amount({
     align: align ?? "none",
     strike
   });
+  const os = osRamp(theme, size, android);
+  const amountStyle = [styles.amount, os.main];
+  const fracStyle = [styles.frac, os.frac];
   const parts = moneyParts(minor, currency, { locale, noSymbol, compact, signed });
   const figure = `${parts.main}${parts.frac}${parts.tail ?? ""}`;
   const struckName = strike && strikeWord ? `${strikeWord} ${figure}` : void 0;
+  if (loading) {
+    const fontSize = StyleSheet.flatten(amountStyle)?.fontSize ?? theme.fontSize[16];
+    return /* @__PURE__ */ jsx(View, { testID, accessibilityState: { busy: true }, "aria-busy": true, style: rollRow, children: /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rect",
+        width: Math.round(figure.length * fontSize * 0.6),
+        height: Math.round(fontSize * 0.8)
+      }
+    ) });
+  }
   if (roll) {
     const piece = (str, textStyle) => /* @__PURE__ */ jsx(
       NumberRoll,
@@ -75,10 +121,10 @@ function Amount({
         accessibilityLabel: struckName ?? figure,
         style: rollRow,
         children: hero && parts.frac ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          piece(parts.main, [styles.amount, style]),
-          piece(parts.frac, styles.frac),
-          parts.tail ? /* @__PURE__ */ jsx(Text, { style: [styles.amount, style], children: parts.tail }) : null
-        ] }) : piece(`${parts.main}${parts.frac}${parts.tail ?? ""}`, [styles.amount, style])
+          piece(parts.main, [amountStyle, style]),
+          piece(parts.frac, fracStyle),
+          parts.tail ? /* @__PURE__ */ jsx(Text, { style: [amountStyle, style], children: parts.tail }) : null
+        ] }) : piece(`${parts.main}${parts.frac}${parts.tail ?? ""}`, [amountStyle, style])
       }
     );
   }
@@ -87,24 +133,52 @@ function Amount({
     {
       testID,
       numberOfLines: 1,
-      style: [styles.amount, style],
+      style: [amountStyle, style],
       ...struckName ? { accessible: true, accessibilityRole: NAMED_ROLE, accessibilityLabel: struckName } : null,
       children: hero && parts.frac ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.amount, children: parts.main }),
-        /* @__PURE__ */ jsx(Text, { style: styles.frac, children: parts.frac }),
-        parts.tail ? /* @__PURE__ */ jsx(Text, { style: styles.amount, children: parts.tail }) : null
+        /* @__PURE__ */ jsx(Text, { style: amountStyle, children: parts.main }),
+        /* @__PURE__ */ jsx(Text, { style: fracStyle, children: parts.frac }),
+        parts.tail ? /* @__PURE__ */ jsx(Text, { style: amountStyle, children: parts.tail }) : null
       ] }) : `${parts.main}${parts.frac}${parts.tail ?? ""}`
     }
   );
 }
 var rollRow = { flexDirection: "row", alignItems: "baseline" };
+function osRamp(theme, size, android) {
+  const lh = theme.lineHeight;
+  switch (size) {
+    case "md": {
+      const fs = android ? theme.fontSize[16] : theme.type.body.fontSize;
+      return { main: { fontSize: fs, lineHeight: fs * lh.snug }, frac: null };
+    }
+    case "lg": {
+      const fs = android ? theme.fontSize[24] : theme.fontSize[22];
+      return { main: { fontSize: fs, lineHeight: fs * lh.normal }, frac: null };
+    }
+    case "hero": {
+      const fs = android ? theme.fontSize[36] : theme.type.largeTitle.fontSize;
+      return {
+        main: { fontSize: fs, lineHeight: fs * lh.tight, letterSpacing: fs * theme.tracking.tight },
+        // The minor units sit one OS step down: title 3 (20 iOS / 22 Android).
+        frac: { fontSize: theme.type.title3.fontSize }
+      };
+    }
+    default:
+      return { main: null, frac: null };
+  }
+}
 function AmountRange({
   perInstalment,
   count,
   total,
   currency,
   size = "md",
+  tone,
+  loading = false,
   totalLabel,
+  unit,
+  align = "start",
+  error,
   locale: localeProp,
   labels: labelsProp,
   style,
@@ -114,30 +188,38 @@ function AmountRange({
   const providerLocale = useLoamLocale();
   const locale = localeProp ?? providerLocale;
   const { styles } = useStyles(sheet, { joinSize: size });
-  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.rangeRow, style], children: [
-    /* @__PURE__ */ jsx(
-      Amount,
-      {
-        testID: "amount-range-instalment",
-        minor: perInstalment,
-        currency,
-        size,
-        locale
-      }
-    ),
-    /* @__PURE__ */ jsx(Text, { style: styles.join, children: labels.instalments(count) }),
-    /* @__PURE__ */ jsx(Text, { "aria-hidden": true, style: styles.joinDot, children: "\xB7" }),
-    /* @__PURE__ */ jsx(Text, { style: styles.join, children: totalLabel ?? labels.total }),
-    /* @__PURE__ */ jsx(
-      Amount,
-      {
-        testID: "amount-range-total",
-        minor: total,
-        currency,
-        size,
-        locale
-      }
-    )
+  return /* @__PURE__ */ jsxs(View, { testID, style, children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.rangeRow, align === "end" ? styles.rangeEnd : null], children: [
+      /* @__PURE__ */ jsx(
+        Amount,
+        {
+          testID: "amount-range-instalment",
+          minor: perInstalment,
+          currency,
+          size,
+          tone,
+          loading,
+          locale
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { style: styles.join, children: labels.instalments(count) }),
+      /* @__PURE__ */ jsx(Text, { "aria-hidden": true, style: styles.joinDot, children: "\xB7" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.join, children: totalLabel ?? labels.total }),
+      /* @__PURE__ */ jsx(
+        Amount,
+        {
+          testID: "amount-range-total",
+          minor: total,
+          currency,
+          size,
+          tone,
+          loading,
+          locale
+        }
+      ),
+      unit ? /* @__PURE__ */ jsx(Text, { style: styles.join, children: unit }) : null
+    ] }),
+    error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles.amountError, children: error }) : null
   ] });
 }
 function PriceRow({
@@ -153,32 +235,61 @@ function PriceRow({
   style,
   testID,
   roll = false,
-  motion
+  motion,
+  loading = false,
+  size,
+  density = "comfortable",
+  orientation = "horizontal",
+  align = "end",
+  unit,
+  error
 }) {
   const { styles } = useStyles(sheet, { rule, strong });
-  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.priceRow, style], children: [
-    typeof label === "string" ? /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: styles.priceLabel, children: label }) : label,
-    /* @__PURE__ */ jsx(
-      Amount,
-      {
-        minor,
-        currency,
-        size: strong ? "lg" : "sm",
-        weight: strong ? "bold" : "medium",
-        tone,
-        noSymbol,
-        signed,
-        locale,
-        roll,
-        motion
-      }
-    )
-  ] });
+  const vertical = orientation === "vertical";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      style: [
+        styles.priceRow,
+        density === "compact" ? styles.priceCompact : null,
+        vertical ? styles.priceVertical : null,
+        style
+      ],
+      children: [
+        typeof label === "string" ? /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: styles.priceLabel, children: label }) : label,
+        /* @__PURE__ */ jsx(
+          Amount,
+          {
+            minor,
+            currency,
+            size: size ?? (strong ? "lg" : "sm"),
+            weight: strong ? "bold" : "medium",
+            tone,
+            noSymbol,
+            signed,
+            locale,
+            roll,
+            motion,
+            loading,
+            unit,
+            error,
+            align: vertical ? align : void 0
+          }
+        )
+      ]
+    }
+  );
 }
 function FxNote({
   currency,
   rateLine,
   note,
+  tone = "info",
+  variant = "soft",
+  size = "compact",
+  loading = false,
+  error,
   labels: labelsProp,
   style,
   testID
@@ -186,13 +297,16 @@ function FxNote({
   const labels = useLabels("money", DEFAULT_LABELS, labelsProp);
   const theme = useLoamTheme("money");
   const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.fxNote, style], children: [
-    /* @__PURE__ */ jsx(Icon, { name: "info", size: theme.icon.sm, color: theme.color.infoOnSoft }),
-    /* @__PURE__ */ jsxs(Text, { style: styles.fxText, children: [
+  if (variant === "plain" && !error) {
+    return /* @__PURE__ */ jsx(View, { testID, style, accessibilityState: loading ? { busy: true } : void 0, children: /* @__PURE__ */ jsxs(Text, { style: styles.fxPlain, children: [
       labels.fxCharged(currency, note ?? labels.fxNote),
-      /* @__PURE__ */ jsx(Text, { style: styles.fxRate, children: rateLine })
-    ] })
-  ] });
+      loading ? null : /* @__PURE__ */ jsx(Text, { style: styles.fxRate, children: rateLine })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(View, { testID, style, accessibilityState: loading ? { busy: true } : void 0, children: /* @__PURE__ */ jsxs(Alert, { tone: error ? "danger" : tone, variant: variant === "plain" ? "soft" : variant, size, title: "", children: [
+    labels.fxCharged(currency, note ?? labels.fxNote),
+    error ? /* @__PURE__ */ jsx(Text, { style: styles.fxRate, children: error }) : loading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: theme.space[80], height: theme.fontSize[12] }) : /* @__PURE__ */ jsx(Text, { style: styles.fxRate, children: rateLine })
+  ] }) });
 }
 function SummaryItemRow({
   name,
@@ -202,6 +316,18 @@ function SummaryItemRow({
   currency,
   icon,
   noSymbol = false,
+  density = "comfortable",
+  orientation = "horizontal",
+  align = "start",
+  size = "sm",
+  tone,
+  unit,
+  loading = false,
+  error,
+  selected = false,
+  disabled = false,
+  onPress,
+  trailing,
   locale: localeProp,
   labels: labelsProp,
   style,
@@ -212,17 +338,45 @@ function SummaryItemRow({
   const locale = localeProp ?? providerLocale;
   const theme = useLoamTheme("money");
   const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(View, { testID, style: [styles.itemRow, style], children: [
+  const vertical = orientation === "vertical";
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.itemTile, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: theme.color.text2 }) }) : null,
     /* @__PURE__ */ jsxs(View, { style: styles.itemText, children: [
       /* @__PURE__ */ jsxs(Text, { numberOfLines: 1, style: styles.itemName, children: [
         name,
         qty > 1 ? /* @__PURE__ */ jsx(Text, { style: styles.itemQty, children: labels.quantity(qty) }) : null
       ] }),
-      detail ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.itemDetail, children: detail }) : null
+      detail ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.itemDetail, children: detail }) : null,
+      vertical ? /* @__PURE__ */ jsx(View, { style: align === "end" ? styles.alignEnd : null, children: /* @__PURE__ */ jsx(Amount, { minor, currency, size, tone, unit, loading, noSymbol, locale }) }) : null,
+      error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles.itemError, children: error }) : null
     ] }),
-    /* @__PURE__ */ jsx(Amount, { minor, currency, size: "sm", noSymbol, locale })
+    vertical ? null : /* @__PURE__ */ jsx(Amount, { minor, currency, size, tone, unit, loading, noSymbol, locale }),
+    trailing
   ] });
+  const rowStyle = [
+    styles.itemRow,
+    density === "compact" ? styles.itemCompact : null,
+    selected || error ? styles.itemFramed : null,
+    selected ? styles.itemSelected : null,
+    error ? styles.itemInvalid : null,
+    disabled ? { opacity: theme.state.disabledOpacity } : null,
+    style
+  ];
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        testID,
+        role: "button",
+        accessibilityState: { selected, disabled },
+        disabled,
+        onPress,
+        style: ({ pressed }) => [rowStyle, pressed ? styles.itemPressed : null],
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { testID, style: rowStyle, accessibilityState: selected || disabled ? { selected, disabled } : void 0, children: body });
 }
 var sheet = createStyleSheet((theme) => ({
   /**
@@ -289,6 +443,38 @@ var sheet = createStyleSheet((theme) => ({
       }
     }
   },
+  amountStack: { alignItems: "flex-start", gap: theme.space[2] },
+  amountLine: { flexDirection: "row", alignItems: "baseline", gap: theme.space[6] },
+  amountUnit: { fontFamily: theme.font.sans, fontSize: theme.fontSize[13], color: theme.color.text2 },
+  amountDelta: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text2
+  },
+  deltaGood: { color: theme.color.good },
+  deltaBad: { color: theme.color.danger },
+  amountCaption: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.text3 },
+  amountError: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.dangerOnSoft },
+  rangeEnd: { justifyContent: "flex-end" },
+  priceCompact: { paddingTop: theme.space[2] },
+  priceVertical: { flexDirection: "column", alignItems: "flex-start", gap: theme.space[2] },
+  alignEnd: { alignSelf: "flex-end" },
+  itemCompact: { gap: theme.space.s2 },
+  itemFramed: {
+    padding: theme.space.s2,
+    borderWidth: theme.borderWidth.base,
+    borderRadius: theme.radius.md,
+    borderColor: theme.color.border
+  },
+  itemSelected: {
+    backgroundColor: theme.color.accentSoft,
+    borderColor: theme.edge.accent
+  },
+  itemInvalid: { borderColor: theme.color.danger },
+  itemPressed: { backgroundColor: theme.state.pressed },
+  itemError: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.dangerOnSoft },
   frac: {
     fontFamily: theme.font.sans,
     fontVariant: ["tabular-nums"],
@@ -348,30 +534,14 @@ var sheet = createStyleSheet((theme) => ({
       }
     }
   },
-  fxNote: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: theme.space.s2,
-    padding: theme.space.s3,
-    borderRadius: theme.radius.md,
-    // A soft tint needs a tone edge: `infoSoft` collapses to the plain surface
-    // under high contrast, and the edge is then the only thing drawing the block.
-    backgroundColor: theme.color.infoSoft,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.info
-  },
-  fxText: {
-    flexShrink: 1,
+  fxPlain: {
     fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[13],
-    lineHeight: theme.fontSize[13] * theme.lineHeight.normal,
-    color: theme.color.infoOnSoft
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
   },
   fxRate: {
-    fontFamily: theme.font.sans,
     fontWeight: theme.fontWeight.semibold,
-    fontVariant: ["tabular-nums"],
-    color: theme.color.infoOnSoft
+    fontVariant: ["tabular-nums"]
   },
   itemRow: {
     flexDirection: "row",