@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-GVQQG435.js

@@ -0,0 +1,581 @@
+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-PCEFCOLN.js';
+import 'react';
+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';
+
+// src/money/money-labels.ts
+var DEFAULT_LABELS = {
+  was: "was",
+  total: "total",
+  instalments: (count) => `\xD7 ${count}`,
+  quantity: (qty) => ` \xD7 ${qty}`,
+  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(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",
+  weight,
+  tone = "default",
+  strike = false,
+  strikeLabel,
+  signed = false,
+  compact = false,
+  noSymbol = false,
+  align,
+  locale: localeProp,
+  labels: labelsProp,
+  style,
+  testID,
+  roll = false,
+  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 large = size === "lg" || hero;
+  const resolvedWeight = weight ?? (large ? android ? "regular" : "bold" : "medium");
+  const { styles } = useStyles(sheet, {
+    size,
+    weight: resolvedWeight,
+    // `default` is a reserved key in a Unistyles variant group (it names the
+    // group's fallback), so the surface's own ink is spelled `ink` in the sheet.
+    // The prop keeps the shared vocabulary the web half uses.
+    tone: tone === "default" ? "ink" : tone,
+    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,
+      {
+        value: minor,
+        formatValue: () => str,
+        motion,
+        textStyle,
+        decorative: true
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        testID,
+        accessible: true,
+        accessibilityRole: NAMED_ROLE,
+        accessibilityLabel: struckName ?? figure,
+        style: rollRow,
+        children: hero && parts.frac ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          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])
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      testID,
+      numberOfLines: 1,
+      style: [amountStyle, style],
+      ...struckName ? { accessible: true, accessibilityRole: NAMED_ROLE, accessibilityLabel: struckName } : null,
+      children: hero && parts.frac ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__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,
+  testID
+}) {
+  const labels = useLabels("money", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const { styles } = useStyles(sheet, { joinSize: size });
+  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({
+  label,
+  minor,
+  currency,
+  strong = false,
+  tone,
+  rule = false,
+  noSymbol = false,
+  signed = false,
+  locale,
+  style,
+  testID,
+  roll = false,
+  motion,
+  loading = false,
+  size,
+  density = "comfortable",
+  orientation = "horizontal",
+  align = "end",
+  unit,
+  error
+}) {
+  const { styles } = useStyles(sheet, { rule, strong });
+  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
+}) {
+  const labels = useLabels("money", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("money");
+  const { styles } = useStyles(sheet);
+  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),
+      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,
+  detail,
+  qty,
+  minor,
+  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,
+  testID
+}) {
+  const labels = useLabels("money", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const theme = useLoamTheme("money");
+  const { styles } = useStyles(sheet);
+  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,
+      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
+    ] }),
+    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) => ({
+  /**
+   * The amount itself.
+   *
+   * Sizes come from the numeric type ramp rather than a `type.*` role because
+   * here the size genuinely *is* the decision — a figure in a table cell, a
+   * figure on a button, a figure that is the whole screen. `hero` is 40px with
+   * tight tracking (the spec asks for it above 30px), and its fraction is 22px:
+   * 56% of 40 is 22.4, so the ramp already holds the value.
+   */
+  amount: {
+    fontFamily: theme.font.sans,
+    // P11: tabular figures everywhere, so a column lines up on the separator.
+    fontVariant: ["tabular-nums"],
+    variants: {
+      size: {
+        sm: {
+          fontSize: theme.fontSize[13],
+          lineHeight: theme.fontSize[13] * theme.lineHeight.snug
+        },
+        md: {
+          fontSize: theme.fontSize[15],
+          lineHeight: theme.fontSize[15] * theme.lineHeight.snug
+        },
+        lg: {
+          fontSize: theme.fontSize[22],
+          // `normal`, not `tight` or `snug`: a single-line amount truncates,
+          // and the clip that brings shaved the tail off every comma at both.
+          lineHeight: theme.fontSize[22] * theme.lineHeight.normal
+        },
+        hero: {
+          fontSize: theme.fontSize[40],
+          lineHeight: theme.fontSize[40] * theme.lineHeight.tight,
+          letterSpacing: theme.fontSize[40] * theme.tracking.tight
+        }
+      },
+      weight: {
+        regular: { fontWeight: theme.fontWeight.regular },
+        medium: { fontWeight: theme.fontWeight.medium },
+        bold: { fontWeight: theme.fontWeight.bold }
+      },
+      tone: {
+        ink: { color: theme.color.text },
+        muted: { color: theme.color.text2 },
+        subtle: { color: theme.color.text3 },
+        accent: { color: theme.color.accentStrong },
+        good: { color: theme.color.good },
+        warn: { color: theme.color.warn },
+        danger: { color: theme.color.danger }
+      },
+      // Logical alignment: `end` is the reading end, so it flips under RTL.
+      // `none` is the inline case — an amount inside a sentence.
+      align: {
+        none: {},
+        start: { alignSelf: "stretch", textAlign: theme.rtl ? "right" : "left" },
+        end: { alignSelf: "stretch", textAlign: theme.rtl ? "left" : "right" }
+      },
+      // A struck figure also drops to the muted ink, so the strike is never the
+      // only signal that the number no longer applies.
+      strike: {
+        true: { textDecorationLine: "line-through", color: theme.color.text3 },
+        false: {}
+      }
+    }
+  },
+  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"],
+    fontSize: theme.fontSize[22],
+    // The ink ramp, not an opacity: a dimmed fraction cannot be measured
+    // against a ground the component does not know.
+    color: theme.color.text2
+  },
+  rangeRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space[6]
+  },
+  join: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    variants: {
+      joinSize: {
+        sm: { fontSize: theme.fontSize[13] },
+        md: { fontSize: theme.fontSize[15] },
+        lg: { fontSize: theme.fontSize[15] }
+      }
+    }
+  },
+  joinDot: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[15],
+    color: theme.color.text3
+  },
+  priceRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    gap: theme.space.s4,
+    variants: {
+      rule: {
+        true: {
+          borderTopWidth: theme.borderWidth.base,
+          borderTopColor: theme.color.border,
+          paddingTop: theme.space[10]
+        },
+        false: {}
+      },
+      strong: { true: {}, false: {} }
+    }
+  },
+  priceLabel: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    variants: {
+      rule: { true: {}, false: {} },
+      strong: {
+        true: { fontWeight: theme.fontWeight.bold, color: theme.color.text },
+        false: { color: theme.color.text2 }
+      }
+    }
+  },
+  fxPlain: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  },
+  fxRate: {
+    fontWeight: theme.fontWeight.semibold,
+    fontVariant: ["tabular-nums"]
+  },
+  itemRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3
+  },
+  itemTile: {
+    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
+  },
+  itemText: { flexShrink: 1, flexGrow: 1 },
+  itemName: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  },
+  itemQty: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    fontWeight: theme.fontWeight.regular,
+    color: theme.color.text2
+  },
+  itemDetail: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  }
+}));
+
+export { Amount, AmountRange, FxNote, PriceRow, SummaryItemRow };