@btndprojects/loam-ui-native 0.1.0 → 0.2.1

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

@@ -1,10 +1,22 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { NumberRoll } from './chunk-T5LTPKX6.js';
+import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import 'react';
-import { Text, View } from 'react-native';
+import { View, Text } 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({
   minor,
   currency,
@@ -12,14 +24,22 @@ function Amount({
   weight,
   tone = "default",
   strike = false,
+  strikeLabel,
   signed = false,
   compact = false,
   noSymbol = false,
   align,
-  locale,
+  locale: localeProp,
+  labels: labelsProp,
   style,
-  testID
+  testID,
+  roll = false,
+  motion
 }) {
+  const labels = useLabels("money", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const strikeWord = strikeLabel ?? labels.was;
   const hero = size === "hero";
   const resolvedWeight = weight ?? (hero ? "bold" : "medium");
   const { styles } = useStyles(sheet, {
@@ -33,23 +53,66 @@ function Amount({
     strike
   });
   const parts = moneyParts(minor, currency, { locale, noSymbol, compact, signed });
-  return /* @__PURE__ */ jsx(Text, { testID, numberOfLines: 1, style: [styles.amount, style], 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
-  ] }) : `${parts.main}${parts.frac}${parts.tail ?? ""}` });
+  const figure = `${parts.main}${parts.frac}${parts.tail ?? ""}`;
+  const struckName = strike && strikeWord ? `${strikeWord} ${figure}` : void 0;
+  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, [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])
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      testID,
+      numberOfLines: 1,
+      style: [styles.amount, 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
+      ] }) : `${parts.main}${parts.frac}${parts.tail ?? ""}`
+    }
+  );
 }
+var rollRow = { flexDirection: "row", alignItems: "baseline" };
 function AmountRange({
   perInstalment,
   count,
   total,
   currency,
   size = "md",
-  totalLabel = "total",
-  locale,
+  totalLabel,
+  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: [styles.rangeRow, style], children: [
     /* @__PURE__ */ jsx(
@@ -62,9 +125,9 @@ function AmountRange({
         locale
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: styles.join, children: `\xD7 ${count}` }),
+    /* @__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 }),
+    /* @__PURE__ */ jsx(Text, { style: styles.join, children: totalLabel ?? labels.total }),
     /* @__PURE__ */ jsx(
       Amount,
       {
@@ -88,7 +151,9 @@ function PriceRow({
   signed = false,
   locale,
   style,
-  testID
+  testID,
+  roll = false,
+  motion
 }) {
   const { styles } = useStyles(sheet, { rule, strong });
   return /* @__PURE__ */ jsxs(View, { testID, style: [styles.priceRow, style], children: [
@@ -103,7 +168,9 @@ function PriceRow({
         tone,
         noSymbol,
         signed,
-        locale
+        locale,
+        roll,
+        motion
       }
     )
   ] });
@@ -111,16 +178,18 @@ function PriceRow({
 function FxNote({
   currency,
   rateLine,
-  note = "Your bank may convert at its own rate \u2014 we show the rate we used:",
+  note,
+  labels: labelsProp,
   style,
   testID
 }) {
-  const theme = useLoamTheme();
+  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: [
-      `Charged in ${currency}. ${note} `,
+      labels.fxCharged(currency, note ?? labels.fxNote),
       /* @__PURE__ */ jsx(Text, { style: styles.fxRate, children: rateLine })
     ] })
   ] });
@@ -133,18 +202,22 @@ function SummaryItemRow({
   currency,
   icon,
   noSymbol = false,
-  locale,
+  locale: localeProp,
+  labels: labelsProp,
   style,
   testID
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("money", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const theme = useLoamTheme("money");
   const { styles } = useStyles(sheet);
   return /* @__PURE__ */ jsxs(View, { testID, style: [styles.itemRow, style], 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: ` \xD7 ${qty}` }) : null
+        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
     ] }),
@@ -177,7 +250,9 @@ var sheet = createStyleSheet((theme) => ({
         },
         lg: {
           fontSize: theme.fontSize[22],
-          lineHeight: theme.fontSize[22] * theme.lineHeight.tight
+          // `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],