@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-CJ5EOYZE.js → chunk-I4FHVKEC.js}

@@ -1,16 +1,20 @@
-import { Spinner } from './chunk-O7AE6DAF.js';
+import { Spinner } from './chunk-KQZ3GLHR.js';
+import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
 import { FlatList, View } from 'react-native';
 import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  loadingMore: "Loading more"
+};
 function loadMoreIfNeeded(opts) {
   if (opts.hasMore && !opts.loading) opts.onLoadMore();
 }
 var FOOTER_SPINNER_SIZE = "lg";
-function Footer() {
+function Footer({ label }) {
   const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsx(View, { style: styles.footer, children: /* @__PURE__ */ jsx(Spinner, { size: FOOTER_SPINNER_SIZE, accessibilityLabel: "Loading more" }) });
+  return /* @__PURE__ */ jsx(View, { style: styles.footer, children: /* @__PURE__ */ jsx(Spinner, { size: FOOTER_SPINNER_SIZE, accessibilityLabel: label }) });
 }
 function InfiniteList({
   data,
@@ -23,9 +27,11 @@ function InfiniteList({
   // Accepted for API parity but intentionally inert — a virtualized list must
   // not animate (recycled rows would flicker). Destructured so it is never
   // forwarded onto the underlying FlatList.
-  motion: _motion = "full"
+  motion: _motion = "full",
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
+  const labels = useLabels("infiniteList", DEFAULT_LABELS, labelsProp);
   const handleEndReached = React.useCallback(() => {
     loadMoreIfNeeded({ hasMore, loading, onLoadMore });
   }, [hasMore, loading, onLoadMore]);
@@ -43,7 +49,7 @@ function InfiniteList({
       onEndReached: handleEndReached,
       onEndReachedThreshold,
       contentContainerStyle: styles.content,
-      ListFooterComponent: loading ? /* @__PURE__ */ jsx(Footer, {}) : null
+      ListFooterComponent: loading ? /* @__PURE__ */ jsx(Footer, { label: labels.loadingMore }) : null
     }
   );
 }

package/dist/{chunk-JNH2TYIN.js → chunk-IDM7JJMO.js}

@@ -1,19 +1,25 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import 'react';
 import { ScrollView, Pressable, View } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  more: "More"
+};
 function Toolbar({
   children,
   accessibilityLabel,
   overflow = "wrap",
   density = "comfortable",
   justify = "start",
-  onMorePress
+  onMorePress,
+  labels: labelsProp
 }) {
+  const labels = useLabels("toolbar", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { density, justify });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("toolbar");
   if (overflow === "scroll" || overflow === "menu") {
     return /* @__PURE__ */ jsxs(
       ScrollView,
@@ -30,7 +36,7 @@ function Toolbar({
             Pressable,
             {
               accessibilityRole: "button",
-              accessibilityLabel: "More",
+              accessibilityLabel: labels.more,
               onPress: onMorePress,
               hitSlop: 8,
               style: styles.more,
@@ -41,7 +47,15 @@ function Toolbar({
       }
     );
   }
-  return /* @__PURE__ */ jsx(View, { accessibilityRole: "toolbar", accessibilityLabel, style: styles.wrapRoot, children });
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "toolbar",
+      accessibilityLabel,
+      style: styles.wrapRoot,
+      children
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   // A wrapping row. `toolbarH` sets the resting height of a single-line strip;

package/dist/{chunk-O4AEHWII.js → chunk-IPUNJMAQ.js}

@@ -1,16 +1,73 @@
-import { CardBrandMark } from './chunk-PUPM2YGF.js';
-import { Checkbox } from './chunk-JXJB2X6M.js';
-import { TextField, useColorTransition } from './chunk-ITTYJZWX.js';
+import { CardBrandMark } from './chunk-ROCUG24E.js';
+import { usePayLabels } from './chunk-GEIGMWNF.js';
+import { Checkbox } from './chunk-Q6NKEPRE.js';
+import { TextField, useColorTransition } from './chunk-7BUIKDD6.js';
 import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Text, useWindowDimensions, View, Easing, Animated, TextInput } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { formatCard, formatExpiry, validCardNumber, CARD_COPY, validExpiry, validCvc } from '@btndprojects/loam-pay';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { formatCard, formatExpiry, validCardNumber, resolvePayLabels, validExpiry, validCvc } from '@btndprojects/loam-pay';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-var TEST_HINT = "Test with 4242 4242 4242 4242 \xB7 12/34 \xB7 any code";
+// src/card-form/card-form-labels.ts
+var DEFAULT_LABELS = {
+  cardNumber: "Card number",
+  expiry: "Expiry",
+  expiryHint: "MM/YY",
+  securityCode: "Security code",
+  nameOnCard: "Name on card",
+  saveCard: "Save this card for next time",
+  testHint: "Test with 4242 4242 4242 4242 \xB7 12/34 \xB7 any code",
+  valid: "Valid",
+  numberPlaceholder: "1234 5678 9012 3456"
+};
+function BrandSwap({ brand }) {
+  const theme = useLoamTheme("card-form");
+  const [shown, setShown] = React.useState({
+    cur: brand,
+    prev: null
+  });
+  if (shown.cur !== brand) setShown({ cur: brand, prev: shown.cur });
+  const t = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (!shown.prev) return;
+    t.setValue(0);
+    const done = () => setShown((s) => ({ ...s, prev: null }));
+    if (theme.reduceMotion) {
+      Animated.timing(t, { toValue: 1, duration: theme.duration.fast, useNativeDriver: true }).start(done);
+    } else {
+      Animated.spring(t, { ...springConfig(theme, "fs"), toValue: 1, useNativeDriver: true }).start(done);
+    }
+  }, [shown.prev, t, theme]);
+  const rise = theme.reduceMotion ? 0 : 6;
+  return /* @__PURE__ */ jsxs(View, { children: [
+    shown.prev ? /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        pointerEvents: "none",
+        style: {
+          position: "absolute",
+          opacity: t.interpolate({ inputRange: [0, 1], outputRange: [1, 0], extrapolate: "clamp" }),
+          transform: [{ translateY: t.interpolate({ inputRange: [0, 1], outputRange: [0, -rise] }) }]
+        },
+        children: /* @__PURE__ */ jsx(CardBrandMark, { brand: shown.prev })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: {
+          opacity: shown.prev ? t.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: "clamp" }) : 1,
+          transform: [{ translateY: t.interpolate({ inputRange: [0, 1], outputRange: [rise, 0] }) }]
+        },
+        children: /* @__PURE__ */ jsx(CardBrandMark, { brand: shown.cur })
+      }
+    )
+  ] });
+}
 var CardRunContext = React.createContext(null);
 function onlyDigits(text) {
   return String(text).replace(/\D/g, "");
@@ -40,14 +97,17 @@ function DigitsField({
   maxLength,
   hint,
   error,
+  valid,
   onBlur,
   motion = "full",
   testHintText,
   trailing,
+  labels: labelsProp,
   style,
   testID
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("cardForm", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("card-form");
   const hasError = Boolean(error);
   const { styles } = useStyles(sheet, { invalid: hasError });
   const labelId = React.useId();
@@ -61,8 +121,9 @@ function DigitsField({
   focusRef.current = () => inputRef.current?.focus();
   const register = run?.register;
   React.useEffect(() => register?.(field, () => focusRef.current()), [register, field]);
+  const isValid = Boolean(valid) && !hasError;
   const tone = hasError ? { border: theme.color.danger, fill: theme.color.dangerSoft } : focused ? { border: theme.focus.ringColor, fill: theme.color.surface } : { border: theme.color.borderStrong, fill: theme.color.surface2 };
-  const animate = useResolvedMotion(motion) === "full";
+  const animate = useResolvedMotion(motion, "card-form") === "full";
   const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
   const borderColor = useColorTransition(tone.border, theme.duration.base, easing, animate);
   const backgroundColor = useColorTransition(tone.fill, theme.duration.base, easing, animate);
@@ -100,7 +161,17 @@ function DigitsField({
           }
         }
       ),
-      hasError ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.ctl.icon.lg, color: theme.color.dangerOnSoft }) }) : trailing
+      hasError ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.ctl.icon.lg, color: theme.color.dangerOnSoft }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        trailing,
+        isValid ? /* @__PURE__ */ jsx(View, { accessibilityRole: "image", accessibilityLabel: labels.valid, children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "check-circle",
+            size: theme.ctl.icon.lg,
+            color: theme.color.goodOnSoft
+          }
+        ) }) : null
+      ] })
     ] }),
     /* @__PURE__ */ jsx(ExpiryHint, { nativeID: messageId, hint, error }),
     testHintText ? /* @__PURE__ */ jsx(Text, { nativeID: testId, style: styles.testHint, children: testHintText }) : null
@@ -110,17 +181,20 @@ function CardNumberField({
   value,
   brand,
   complete,
-  label = "Card number",
+  label,
   hint,
   error,
+  valid,
   testHint = false,
   onChange,
   onComplete,
   onBlur,
   motion,
+  labels: labelsProp,
   style,
   testID
 }) {
+  const labels = useLabels("cardForm", DEFAULT_LABELS, labelsProp);
   const result = formatCard(value);
   const resolvedBrand = brand ?? result.brand;
   const isComplete = complete ?? result.complete;
@@ -129,24 +203,26 @@ function CardNumberField({
     if (isComplete && !wasComplete.current) onComplete?.();
     wasComplete.current = isComplete;
   }, [isComplete, onComplete]);
-  const testHintText = testHint === true ? TEST_HINT : testHint || void 0;
+  const testHintText = testHint === true ? labels.testHint : testHint || void 0;
   return /* @__PURE__ */ jsx(
     DigitsField,
     {
       field: "number",
-      label,
+      label: label ?? labels.cardNumber,
       digits: result.digits,
       format: (d) => formatCard(d).text,
       normalize: (typed) => formatCard(onlyDigits(typed)).digits,
       onDigits: onChange,
       hint,
       error,
+      valid,
       onBlur,
       motion,
       autoComplete: "cc-number",
-      placeholder: "1234 5678 9012 3456",
+      placeholder: labels.numberPlaceholder,
+      labels: labelsProp,
       testHintText: testHintText || void 0,
-      trailing: /* @__PURE__ */ jsx(CardBrandMark, { brand: resolvedBrand.id }),
+      trailing: /* @__PURE__ */ jsx(BrandSwap, { brand: resolvedBrand.id }),
       style,
       testID
     }
@@ -154,17 +230,20 @@ function CardNumberField({
 }
 function ExpiryField({
   value,
-  label = "Expiry",
-  hint = "MM/YY",
+  label,
+  hint,
   error,
+  valid,
   onChange,
   onComplete,
   onBackspaceOut,
   onBlur,
   motion,
+  labels: labelsProp,
   style,
   testID
 }) {
+  const labels = useLabels("cardForm", DEFAULT_LABELS, labelsProp);
   const digits = onlyDigits(formatExpiry(value));
   const wasComplete = React.useRef(digits.length === 4);
   React.useEffect(() => {
@@ -176,18 +255,20 @@ function ExpiryField({
     DigitsField,
     {
       field: "expiry",
-      label,
+      label: label ?? labels.expiry,
       digits,
       format: (d) => formatExpiry(d),
       normalize: (typed) => onlyDigits(formatExpiry(onlyDigits(typed))),
       onDigits: onChange,
       onBackspaceOut,
-      hint,
+      hint: hint ?? labels.expiryHint,
       error,
+      valid,
       onBlur,
       motion,
       autoComplete: "cc-exp",
-      placeholder: "MM/YY",
+      placeholder: labels.expiryHint,
+      labels: labelsProp,
       maxLength: 5,
       style,
       testID
@@ -197,17 +278,20 @@ function ExpiryField({
 function CvcField({
   value,
   digits = 3,
-  label = "Security code",
+  label,
   hint,
   error,
+  valid,
   onChange,
   onComplete,
   onBackspaceOut,
   onBlur,
   motion,
+  labels: labelsProp,
   style,
   testID
 }) {
+  const labels = useLabels("cardForm", DEFAULT_LABELS, labelsProp);
   const clamp = React.useCallback(
     (typed) => onlyDigits(typed).slice(0, digits),
     [digits]
@@ -223,7 +307,7 @@ function CvcField({
     DigitsField,
     {
       field: "cvc",
-      label,
+      label: label ?? labels.securityCode,
       digits: machine,
       format: (d) => d,
       normalize: clamp,
@@ -231,11 +315,13 @@ function CvcField({
       onBackspaceOut,
       hint,
       error,
+      valid,
       onBlur,
       motion,
       autoComplete: "cc-csc",
       placeholder: digits === 4 ? "1234" : "123",
       maxLength: digits,
+      labels: labelsProp,
       style,
       testID
     }
@@ -303,18 +389,18 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.color.text3
   }
 }));
-function validateCard(value, brand, now = 0) {
+function validateCard(value, brand, now = 0, labels) {
   const resolved = brand ?? formatCard(value.number).brand;
   const errors = {};
-  const number = validCardNumber(value.number);
+  const number = validCardNumber(value.number, labels);
   if (!number.ok) errors.number = number.why;
   if (value.expiry.length === 0) {
-    errors.expiry = CARD_COPY.expiryEmpty;
+    errors.expiry = resolvePayLabels(labels).cardCopy.expiryEmpty;
   } else {
-    const expiry = validExpiry(formatExpiry(value.expiry), now);
+    const expiry = validExpiry(formatExpiry(value.expiry), now, labels);
     if (!expiry.ok) errors.expiry = expiry.why;
   }
-  const cvc = validCvc(value.cvc, resolved);
+  const cvc = validCvc(value.cvc, resolved, labels);
   if (!cvc.ok) errors.cvc = cvc.why;
   const order = ["number", "expiry", "cvc"];
   const firstBlocking = order.find((field) => errors[field] !== void 0) ?? null;
@@ -330,19 +416,23 @@ function CardForm({
   layout = "auto",
   testHint = false,
   now = 0,
-  saveLabel = "Save this card for next time",
+  saveLabel,
+  labels: labelsProp,
   onChange,
   onFieldBlur,
   onSaveChange,
   style,
   testID
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("cardForm", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const theme = useLoamTheme("card-form");
   const { width } = useWindowDimensions();
   const asRow = layout === "row" || layout === "auto" && width >= theme.breakpoint.tablet;
   const { styles } = useStyles(sheet2, { asRow });
   const resolvedBrand = brand ?? formatCard(value.number).brand;
   const [shown, setShown] = React.useState([]);
+  const [passed, setPassed] = React.useState([]);
   const isShown = (field) => shown.includes(field);
   const focusers = React.useRef(/* @__PURE__ */ new Map());
   const run = React.useMemo(
@@ -357,9 +447,14 @@ function CardForm({
     []
   );
   const focus = (field) => focusers.current.get(field)?.();
-  const own = validateCard(value, resolvedBrand, now).errors;
+  const own = validateCard(value, resolvedBrand, now, pay).errors;
   const errorFor = (field) => errors?.[field] ?? (isShown(field) ? own[field] : void 0);
+  const validFor = (field) => passed.includes(field) && own[field] === void 0 && errors?.[field] === void 0;
   const handleBlur = (field) => () => {
+    const ok = own[field] === void 0;
+    setPassed(
+      (current) => ok ? current.includes(field) ? current : [...current, field] : current.filter((f) => f !== field)
+    );
     setShown((current) => {
       const failing = own[field] !== void 0;
       if (failing) return current.includes(field) ? current : [...current, field];
@@ -375,7 +470,9 @@ function CardForm({
           value: value.number,
           brand: resolvedBrand,
           error: errorFor("number"),
+          valid: validFor("number"),
           testHint,
+          labels: labelsProp,
           style: styles.numberField,
           onChange: (raw) => onChange({ number: raw }),
           onComplete: () => focus("expiry"),
@@ -387,6 +484,8 @@ function CardForm({
         {
           value: value.expiry,
           error: errorFor("expiry"),
+          valid: validFor("expiry"),
+          labels: labelsProp,
           onChange: (raw) => onChange({ expiry: raw }),
           onComplete: () => focus("cvc"),
           onBackspaceOut: () => focus("number"),
@@ -399,6 +498,8 @@ function CardForm({
           value: value.cvc,
           digits: resolvedBrand.cvc,
           error: errorFor("cvc"),
+          valid: validFor("cvc"),
+          labels: labelsProp,
           onChange: (raw) => onChange({ cvc: raw }),
           onBackspaceOut: () => focus("expiry"),
           onBlur: handleBlur("cvc")
@@ -408,7 +509,7 @@ function CardForm({
     showName ? /* @__PURE__ */ jsx(
       TextField,
       {
-        label: "Name on card",
+        label: labels.nameOnCard,
         autoComplete: "cc-name",
         size: "lg",
         value: value.name ?? "",
@@ -417,17 +518,14 @@ function CardForm({
         onBlur: handleBlur("name")
       }
     ) : null,
-    showSave ? /* @__PURE__ */ jsxs(View, { style: styles.saveRow, children: [
-      /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          checked: save,
-          onCheckedChange: (next) => onSaveChange?.(next),
-          accessibilityLabel: saveLabel
-        }
-      ),
-      /* @__PURE__ */ jsx(Text, { style: styles.saveLabel, children: saveLabel })
-    ] }) : null
+    showSave ? /* @__PURE__ */ jsx(View, { style: styles.saveRow, children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: save,
+        onCheckedChange: (next) => onSaveChange?.(next),
+        label: saveLabel ?? labels.saveCard
+      }
+    ) }) : null
   ] }) });
 }
 var sheet2 = createStyleSheet((theme) => ({
@@ -452,12 +550,6 @@ var sheet2 = createStyleSheet((theme) => ({
     alignItems: "center",
     gap: theme.space.s3,
     minHeight: theme.tapMin
-  },
-  saveLabel: {
-    flexShrink: 1,
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text
   }
 }));
 

package/dist/{chunk-J7Q7VCVC.js → chunk-IT6FUXXG.js}

@@ -1,11 +1,16 @@
-import { useThinkingPulse } from './chunk-XXXEFXY5.js';
+import { useThinkingPulse } from './chunk-W74TXYFB.js';
 import { NODE_STATE_WORD, NODE_STATE_ICON, NODE_STATE_SHAPE } from './chunk-YLLCXTMC.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
 import { View, Text, ScrollView, Animated, Easing } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  stage: (label, state) => `${label}: ${state}`,
+  states: { ...NODE_STATE_WORD }
+};
 var NODE_BOX = { sm: 28, md: 36, lg: 44 };
 var NODE_ICON = { sm: 14, md: 18, lg: 22 };
 function StageNode({
@@ -14,7 +19,7 @@ function StageNode({
   pulse
 }) {
   const { styles } = useStyles(sheet, { state });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("stage-timeline");
   const box = NODE_BOX[size];
   const pulseStyle = useThinkingPulse(pulse);
   const glyphColor = state === "pending" ? theme.color.text3 : theme.status[state];
@@ -39,7 +44,7 @@ function Connector({
   motion
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("stage-timeline");
   const horizontal = orientation === "horizontal";
   const completed = from === "done";
   const animate = motion === "full" && completed && !theme.reduceMotion;
@@ -83,17 +88,19 @@ function StageTimeline({
   orientation = "horizontal",
   size = "md",
   motion = "full",
+  labels: labelsProp,
   style,
   testID
 }) {
+  const labels = useLabels("stageTimeline", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { size });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("stage-timeline");
   const horizontal = orientation === "horizontal";
   const lastIndex = stages.length - 1;
   const pulseOn = motion === "full" && !theme.reduceMotion;
   const items = stages.map((stage, index) => {
     const isWorking = stage.state === "working";
-    const name = `${stage.label}: ${NODE_STATE_WORD[stage.state]}`;
+    const name = labels.stage(stage.label, labels.states[stage.state]);
     const next = stages[index + 1];
     const showConnector = index < lastIndex && next !== void 0;
     const currentAttr = isWorking ? { "aria-current": "step" } : {};