@btndprojects/loam-ui-native 0.2.1 → 0.3.1

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

@@ -1,14 +1,17 @@
-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 { CardBrandMark } from './chunk-TDWWVJA4.js';
+import { usePayLabels } from './chunk-QNZII37O.js';
+import { Checkbox } from './chunk-KNILMM4H.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import { TextField, useColorTransition } from './chunk-KXLDK6HB.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { NO_UA_FOCUS_RING } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.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 { Text, useWindowDimensions, View, Easing, Animated, TextInput, ActivityIndicator, Pressable } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { formatCard, formatExpiry, validCardNumber, resolvePayLabels, validExpiry, validCvc } from '@btndprojects/loam-pay';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -22,6 +25,7 @@ var DEFAULT_LABELS = {
   saveCard: "Save this card for next time",
   testHint: "Test with 4242 4242 4242 4242 \xB7 12/34 \xB7 any code",
   valid: "Valid",
+  validating: "Validating",
   numberPlaceholder: "1234 5678 9012 3456"
 };
 function BrandSwap({ brand }) {
@@ -37,9 +41,15 @@ function BrandSwap({ brand }) {
     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);
+      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);
+      Animated.spring(t, { ...springConfig(theme, "fs"), toValue: 1, useNativeDriver: true }).start(
+        done
+      );
     }
   }, [shown.prev, t, theme]);
   const rise = theme.reduceMotion ? 0 : 6;
@@ -50,8 +60,14 @@ function BrandSwap({ brand }) {
         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] }) }]
+          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 })
       }
@@ -61,7 +77,9 @@ function BrandSwap({ brand }) {
       {
         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] }) }]
+          transform: [
+            { translateY: t.interpolate({ inputRange: [0, 1], outputRange: [rise, 0] }) }
+          ]
         },
         children: /* @__PURE__ */ jsx(CardBrandMark, { brand: shown.cur })
       }
@@ -76,14 +94,40 @@ function ExpiryHint({
   hint,
   error,
   nativeID,
+  size = "sm",
+  variant = "plain",
   style,
   testID
 }) {
+  const theme = useLoamTheme("card-form");
   const { styles } = useStyles(sheet, { invalid: Boolean(error) });
   const message = error ?? hint;
   if (message === void 0 || message === "") return null;
-  return /* @__PURE__ */ jsx(Text, { nativeID, testID, style: [styles.message, style], children: message });
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      nativeID,
+      testID,
+      style: [
+        styles.message,
+        size === "md" ? { fontSize: theme.type.footnote.fontSize, minHeight: theme.type.footnote.lineHeight } : null,
+        variant === "soft" ? {
+          alignSelf: "flex-start",
+          paddingHorizontal: theme.space.s2,
+          borderRadius: theme.radius.sm,
+          backgroundColor: error ? theme.color.dangerSoft : theme.color.surface2
+        } : null,
+        style
+      ],
+      children: message
+    }
+  );
 }
+var WALLET_CONTENT_TYPE = {
+  "cc-number": "creditCardNumber",
+  "cc-exp": "creditCardExpiration",
+  "cc-csc": "creditCardSecurityCode"
+};
 function DigitsField({
   field,
   label,
@@ -99,7 +143,18 @@ function DigitsField({
   error,
   valid,
   onBlur,
+  tone: toneProp = "neutral",
+  leadingIcon,
+  trailingIcon,
+  clearable = false,
+  clearLabel = "Clear",
   motion = "full",
+  surface = "filled",
+  disabled = false,
+  size = "lg",
+  loading = false,
+  readOnly = false,
+  platform,
   testHintText,
   trailing,
   labels: labelsProp,
@@ -109,10 +164,11 @@ function DigitsField({
   const labels = useLabels("cardForm", DEFAULT_LABELS, labelsProp);
   const theme = useLoamTheme("card-form");
   const hasError = Boolean(error);
-  const { styles } = useStyles(sheet, { invalid: hasError });
+  const { styles } = useStyles(sheet, { invalid: hasError, size });
   const labelId = React.useId();
   const messageId = React.useId();
   const testId = React.useId();
+  const android = isAndroidIdiom(theme, platform);
   const [focused, setFocused] = React.useState(false);
   const run = React.useContext(CardRunContext);
   const inputRef = React.useRef(null);
@@ -121,8 +177,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 isLoading = loading && !disabled;
+  const isValid = Boolean(valid) && !hasError && !isLoading;
+  const tone = readOnly ? { border: theme.color.border, fill: fieldSurfaceFill(theme, surface) } : hasError ? { border: theme.color.danger, fill: theme.color.dangerSoft } : focused ? { border: theme.focus.ringColor, fill: theme.color.surface } : toneProp !== "neutral" ? { border: softToneSkin(theme, toneProp).edge, fill: fieldSurfaceFill(theme, surface) } : { border: theme.color.borderStrong, fill: fieldSurfaceFill(theme, surface) };
   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);
@@ -132,47 +189,101 @@ function DigitsField({
   };
   const describedBy = [hasError || hint ? messageId : null, testHintText ? testId : null].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(View, { style: [styles.field, style], children: [
-    /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: styles.label, children: label }),
-    /* @__PURE__ */ jsxs(Animated.View, { style: [styles.box, { borderColor, backgroundColor }], children: [
-      /* @__PURE__ */ jsx(
-        TextInput,
-        {
-          ref: inputRef,
-          testID,
-          value: format(digits),
-          onChangeText: (typed) => onDigits(normalize(typed)),
-          onKeyPress: handleKeyPress,
-          onFocus: () => setFocused(true),
-          onBlur: () => {
-            setFocused(false);
-            onBlur?.();
-          },
-          autoComplete,
-          inputMode: "numeric",
-          keyboardType: "number-pad",
-          placeholder,
-          placeholderTextColor: theme.color.text3,
-          maxLength,
-          "aria-labelledby": labelId,
-          style: [styles.input, NO_UA_FOCUS_RING],
-          ...{
-            "aria-invalid": hasError || void 0,
-            "aria-describedby": describedBy || void 0
-          }
-        }
-      ),
-      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(
+      Text,
+      {
+        nativeID: labelId,
+        style: [
+          styles.label,
+          android ? { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium } : { fontSize: theme.fontSize[13], fontWeight: theme.fontWeight.semibold }
+        ],
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        style: [
+          styles.box,
+          { borderColor, backgroundColor },
+          disabled ? { opacity: theme.state.disabledOpacity } : null
+        ],
+        children: [
+          leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: theme.ctl.icon[size], color: theme.color.text3 }) : null,
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ref: inputRef,
+              editable: !disabled && !readOnly,
+              "aria-busy": isLoading || void 0,
+              "aria-readonly": readOnly || void 0,
+              testID,
+              value: format(digits),
+              onChangeText: (typed) => onDigits(normalize(typed)),
+              onKeyPress: handleKeyPress,
+              onFocus: () => setFocused(true),
+              onBlur: () => {
+                setFocused(false);
+                onBlur?.();
+              },
+              autoComplete,
+              textContentType: WALLET_CONTENT_TYPE[autoComplete],
+              importantForAutofill: android ? "yes" : void 0,
+              inputMode: "numeric",
+              keyboardType: "number-pad",
+              placeholder,
+              placeholderTextColor: theme.color.text3,
+              maxLength,
+              "aria-labelledby": labelId,
+              style: [styles.input, NO_UA_FOCUS_RING],
+              ...{
+                "aria-invalid": hasError || void 0,
+                // Dimmed fields are not held to the text-contrast floor (a disabled control is exempt).
+                "aria-disabled": disabled || void 0,
+                "aria-describedby": describedBy || void 0
+              }
+            }
+          ),
+          isLoading ? /* @__PURE__ */ jsx(
+            ActivityIndicator,
+            {
+              testID: "card-field-spinner",
+              size: "small",
+              color: theme.color.accent,
+              accessibilityLabel: labels.validating
+            }
+          ) : hasError ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "alert-triangle",
+              size: theme.ctl.icon[size],
+              color: theme.color.dangerOnSoft
+            }
+          ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            clearable && !disabled && !readOnly && digits.length > 0 ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: clearLabel,
+                onPress: () => onDigits(""),
+                hitSlop: theme.space.s2,
+                children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.ctl.icon[size], color: theme.color.text3 })
+              }
+            ) : null,
+            trailing,
+            trailingIcon ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: theme.ctl.icon[size], color: theme.color.text3 }) : null,
+            isValid ? /* @__PURE__ */ jsx(View, { accessibilityRole: "image", accessibilityLabel: labels.valid, children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "check-circle",
+                size: theme.ctl.icon[size],
+                color: theme.color.goodOnSoft
+              }
+            ) }) : null
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(ExpiryHint, { nativeID: messageId, hint, error }),
     testHintText ? /* @__PURE__ */ jsx(Text, { nativeID: testId, style: styles.testHint, children: testHintText }) : null
   ] });
@@ -189,7 +300,18 @@ function CardNumberField({
   onChange,
   onComplete,
   onBlur,
+  tone,
+  leadingIcon,
+  trailingIcon,
+  clearable,
+  clearLabel,
   motion,
+  surface,
+  disabled,
+  size,
+  loading,
+  readOnly,
+  platform,
   labels: labelsProp,
   style,
   testID
@@ -217,7 +339,18 @@ function CardNumberField({
       error,
       valid,
       onBlur,
+      tone,
+      leadingIcon,
+      trailingIcon,
+      clearable,
+      clearLabel,
       motion,
+      surface,
+      disabled,
+      size,
+      loading,
+      readOnly,
+      platform,
       autoComplete: "cc-number",
       placeholder: labels.numberPlaceholder,
       labels: labelsProp,
@@ -238,7 +371,18 @@ function ExpiryField({
   onComplete,
   onBackspaceOut,
   onBlur,
+  tone,
+  leadingIcon,
+  trailingIcon,
+  clearable,
+  clearLabel,
   motion,
+  surface,
+  disabled,
+  size,
+  loading,
+  readOnly,
+  platform,
   labels: labelsProp,
   style,
   testID
@@ -265,7 +409,18 @@ function ExpiryField({
       error,
       valid,
       onBlur,
+      tone,
+      leadingIcon,
+      trailingIcon,
+      clearable,
+      clearLabel,
       motion,
+      surface,
+      disabled,
+      size,
+      loading,
+      readOnly,
+      platform,
       autoComplete: "cc-exp",
       placeholder: labels.expiryHint,
       labels: labelsProp,
@@ -286,7 +441,18 @@ function CvcField({
   onComplete,
   onBackspaceOut,
   onBlur,
+  tone,
+  leadingIcon,
+  trailingIcon,
+  clearable,
+  clearLabel,
   motion,
+  surface,
+  disabled,
+  size,
+  loading,
+  readOnly,
+  platform,
   labels: labelsProp,
   style,
   testID
@@ -317,7 +483,18 @@ function CvcField({
       error,
       valid,
       onBlur,
+      tone,
+      leadingIcon,
+      trailingIcon,
+      clearable,
+      clearLabel,
       motion,
+      surface,
+      disabled,
+      size,
+      loading,
+      readOnly,
+      platform,
       autoComplete: "cc-csc",
       placeholder: digits === 4 ? "1234" : "123",
       maxLength: digits,
@@ -331,8 +508,6 @@ var sheet = createStyleSheet((theme) => ({
   field: { flexShrink: 1, flexGrow: 1, gap: theme.space.s2 },
   label: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize[12],
     variants: {
       // The label turns danger with the field, so the failure is carried by the
       // label, the edge, the glyph and the message — never colour alone.
@@ -352,7 +527,33 @@ var sheet = createStyleSheet((theme) => ({
     // The reference draws a 1.5px field edge — the static `thick` weight.
     borderWidth: theme.borderWidth.thick,
     variants: {
-      invalid: { true: {}, false: {} }
+      invalid: { true: {}, false: {} },
+      size: {
+        xs: {
+          height: theme.ctl.xs,
+          paddingHorizontal: theme.ctl.px.xs,
+          gap: theme.ctl.gap.xs,
+          borderRadius: theme.ctl.r.xs
+        },
+        sm: {
+          height: theme.ctl.sm,
+          paddingHorizontal: theme.ctl.px.sm,
+          gap: theme.ctl.gap.sm,
+          borderRadius: theme.ctl.r.sm
+        },
+        md: {
+          height: theme.ctl.md,
+          paddingHorizontal: theme.ctl.px.md,
+          gap: theme.ctl.gap.md,
+          borderRadius: theme.ctl.r.md
+        },
+        lg: {
+          height: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.ctl.gap.lg,
+          borderRadius: theme.ctl.r.lg
+        }
+      }
     }
   },
   input: {
@@ -368,7 +569,13 @@ var sheet = createStyleSheet((theme) => ({
     // P11: a card number is a run of figures and lines up like one.
     fontVariant: ["tabular-nums"],
     variants: {
-      invalid: { true: {}, false: {} }
+      invalid: { true: {}, false: {} },
+      size: {
+        xs: { fontSize: theme.ctl.fs.xs },
+        sm: { fontSize: theme.ctl.fs.sm },
+        md: { fontSize: theme.ctl.fs.md },
+        lg: { fontSize: theme.ctl.fs.lg }
+      }
     }
   },
   message: {
@@ -378,14 +585,15 @@ var sheet = createStyleSheet((theme) => ({
     minHeight: theme.fontSize[12] * theme.lineHeight.normal,
     variants: {
       invalid: {
-        true: { fontWeight: theme.fontWeight.bold, color: theme.color.danger },
+        true: { fontWeight: theme.fontWeight.regular, color: theme.color.dangerOnSoft },
         false: { color: theme.color.text3 }
       }
     }
   },
   testHint: {
     fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[10],
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
     color: theme.color.text3
   }
 }));
@@ -415,6 +623,13 @@ function CardForm({
   save = false,
   layout = "auto",
   testHint = false,
+  platform,
+  surface,
+  disabled = false,
+  size,
+  loading,
+  density = "comfortable",
+  tone,
   now = 0,
   saveLabel,
   labels: labelsProp,
@@ -462,8 +677,8 @@ function CardForm({
     });
     onFieldBlur?.(field);
   };
-  return /* @__PURE__ */ jsx(CardRunContext.Provider, { value: run, children: /* @__PURE__ */ jsxs(View, { testID, style: [styles.form, style], children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.fields, children: [
+  return /* @__PURE__ */ jsx(CardRunContext.Provider, { value: run, children: /* @__PURE__ */ jsxs(View, { testID, style: [styles.form, density === "compact" ? { gap: theme.space.s2 } : null, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.fields, density === "compact" ? { gap: theme.space.s2 } : null], children: [
       /* @__PURE__ */ jsx(
         CardNumberField,
         {
@@ -473,6 +688,12 @@ function CardForm({
           valid: validFor("number"),
           testHint,
           labels: labelsProp,
+          platform,
+          surface,
+          disabled,
+          size,
+          tone,
+          loading,
           style: styles.numberField,
           onChange: (raw) => onChange({ number: raw }),
           onComplete: () => focus("expiry"),
@@ -486,6 +707,12 @@ function CardForm({
           error: errorFor("expiry"),
           valid: validFor("expiry"),
           labels: labelsProp,
+          platform,
+          surface,
+          disabled,
+          size,
+          tone,
+          loading,
           onChange: (raw) => onChange({ expiry: raw }),
           onComplete: () => focus("cvc"),
           onBackspaceOut: () => focus("number"),
@@ -500,6 +727,12 @@ function CardForm({
           error: errorFor("cvc"),
           valid: validFor("cvc"),
           labels: labelsProp,
+          platform,
+          surface,
+          disabled,
+          size,
+          tone,
+          loading,
           onChange: (raw) => onChange({ cvc: raw }),
           onBackspaceOut: () => focus("expiry"),
           onBlur: handleBlur("cvc")
@@ -511,7 +744,9 @@ function CardForm({
       {
         label: labels.nameOnCard,
         autoComplete: "cc-name",
-        size: "lg",
+        size: size ?? "lg",
+        surface,
+        editable: !disabled,
         value: value.name ?? "",
         error: errors?.name,
         onChangeText: (next) => onChange({ name: next }),
@@ -523,7 +758,8 @@ function CardForm({
       {
         checked: save,
         onCheckedChange: (next) => onSaveChange?.(next),
-        label: saveLabel ?? labels.saveCard
+        label: saveLabel ?? labels.saveCard,
+        disabled
       }
     ) }) : null
   ] }) });