@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-UNNQIPGK.js

@@ -0,0 +1,792 @@
+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 { 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, 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';
+
+// 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",
+  validating: "Validating",
+  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, "");
+}
+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,
+        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,
+  digits,
+  format,
+  normalize,
+  onDigits,
+  onBackspaceOut,
+  autoComplete,
+  placeholder,
+  maxLength,
+  hint,
+  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,
+  style,
+  testID
+}) {
+  const labels = useLabels("cardForm", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("card-form");
+  const hasError = Boolean(error);
+  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);
+  const focusRef = React.useRef(() => {
+  });
+  focusRef.current = () => inputRef.current?.focus();
+  const register = run?.register;
+  React.useEffect(() => register?.(field, () => focusRef.current()), [register, field]);
+  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);
+  const backgroundColor = useColorTransition(tone.fill, theme.duration.base, easing, animate);
+  const handleKeyPress = (event) => {
+    if (event.nativeEvent.key === "Backspace" && digits.length === 0) onBackspaceOut?.();
+  };
+  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,
+          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
+  ] });
+}
+function CardNumberField({
+  value,
+  brand,
+  complete,
+  label,
+  hint,
+  error,
+  valid,
+  testHint = false,
+  onChange,
+  onComplete,
+  onBlur,
+  tone,
+  leadingIcon,
+  trailingIcon,
+  clearable,
+  clearLabel,
+  motion,
+  surface,
+  disabled,
+  size,
+  loading,
+  readOnly,
+  platform,
+  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;
+  const wasComplete = React.useRef(isComplete);
+  React.useEffect(() => {
+    if (isComplete && !wasComplete.current) onComplete?.();
+    wasComplete.current = isComplete;
+  }, [isComplete, onComplete]);
+  const testHintText = testHint === true ? labels.testHint : testHint || void 0;
+  return /* @__PURE__ */ jsx(
+    DigitsField,
+    {
+      field: "number",
+      label: label ?? labels.cardNumber,
+      digits: result.digits,
+      format: (d) => formatCard(d).text,
+      normalize: (typed) => formatCard(onlyDigits(typed)).digits,
+      onDigits: onChange,
+      hint,
+      error,
+      valid,
+      onBlur,
+      tone,
+      leadingIcon,
+      trailingIcon,
+      clearable,
+      clearLabel,
+      motion,
+      surface,
+      disabled,
+      size,
+      loading,
+      readOnly,
+      platform,
+      autoComplete: "cc-number",
+      placeholder: labels.numberPlaceholder,
+      labels: labelsProp,
+      testHintText: testHintText || void 0,
+      trailing: /* @__PURE__ */ jsx(BrandSwap, { brand: resolvedBrand.id }),
+      style,
+      testID
+    }
+  );
+}
+function ExpiryField({
+  value,
+  label,
+  hint,
+  error,
+  valid,
+  onChange,
+  onComplete,
+  onBackspaceOut,
+  onBlur,
+  tone,
+  leadingIcon,
+  trailingIcon,
+  clearable,
+  clearLabel,
+  motion,
+  surface,
+  disabled,
+  size,
+  loading,
+  readOnly,
+  platform,
+  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(() => {
+    const isComplete = digits.length === 4;
+    if (isComplete && !wasComplete.current) onComplete?.();
+    wasComplete.current = isComplete;
+  }, [digits, onComplete]);
+  return /* @__PURE__ */ jsx(
+    DigitsField,
+    {
+      field: "expiry",
+      label: label ?? labels.expiry,
+      digits,
+      format: (d) => formatExpiry(d),
+      normalize: (typed) => onlyDigits(formatExpiry(onlyDigits(typed))),
+      onDigits: onChange,
+      onBackspaceOut,
+      hint: hint ?? labels.expiryHint,
+      error,
+      valid,
+      onBlur,
+      tone,
+      leadingIcon,
+      trailingIcon,
+      clearable,
+      clearLabel,
+      motion,
+      surface,
+      disabled,
+      size,
+      loading,
+      readOnly,
+      platform,
+      autoComplete: "cc-exp",
+      placeholder: labels.expiryHint,
+      labels: labelsProp,
+      maxLength: 5,
+      style,
+      testID
+    }
+  );
+}
+function CvcField({
+  value,
+  digits = 3,
+  label,
+  hint,
+  error,
+  valid,
+  onChange,
+  onComplete,
+  onBackspaceOut,
+  onBlur,
+  tone,
+  leadingIcon,
+  trailingIcon,
+  clearable,
+  clearLabel,
+  motion,
+  surface,
+  disabled,
+  size,
+  loading,
+  readOnly,
+  platform,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const labels = useLabels("cardForm", DEFAULT_LABELS, labelsProp);
+  const clamp = React.useCallback(
+    (typed) => onlyDigits(typed).slice(0, digits),
+    [digits]
+  );
+  const machine = clamp(value);
+  const wasComplete = React.useRef(machine.length === digits);
+  React.useEffect(() => {
+    const isComplete = machine.length === digits;
+    if (isComplete && !wasComplete.current) onComplete?.();
+    wasComplete.current = isComplete;
+  }, [machine, digits, onComplete]);
+  return /* @__PURE__ */ jsx(
+    DigitsField,
+    {
+      field: "cvc",
+      label: label ?? labels.securityCode,
+      digits: machine,
+      format: (d) => d,
+      normalize: clamp,
+      onDigits: onChange,
+      onBackspaceOut,
+      hint,
+      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,
+      labels: labelsProp,
+      style,
+      testID
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  field: { flexShrink: 1, flexGrow: 1, gap: theme.space.s2 },
+  label: {
+    fontFamily: theme.font.sans,
+    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.
+      invalid: { true: { color: theme.color.danger }, false: { color: theme.color.text2 } }
+    }
+  },
+  // `borderColor` / `backgroundColor` arrive at the use site as animated values,
+  // so the field can travel between its resting, focused and invalid tones. The
+  // `lg` tier is the 44 box whose 16px text iOS will not zoom.
+  box: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: theme.ctl.lg,
+    paddingHorizontal: theme.ctl.px.lg,
+    gap: theme.ctl.gap.lg,
+    borderRadius: theme.ctl.r.lg,
+    // The reference draws a 1.5px field edge — the static `thick` weight.
+    borderWidth: theme.borderWidth.thick,
+    variants: {
+      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: {
+    flexGrow: 1,
+    // react-native-web renders a real `<input>`, whose `min-width: auto`
+    // resolves to its intrinsic text-box measure and would stop the field
+    // shrinking inside a narrow row.
+    minWidth: 0,
+    padding: 0,
+    color: theme.color.text,
+    fontFamily: theme.font.sans,
+    fontSize: theme.ctl.fs.lg,
+    // P11: a card number is a run of figures and lines up like one.
+    fontVariant: ["tabular-nums"],
+    variants: {
+      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: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    // Reserve the line so showing a message does not shift what sits below it.
+    minHeight: theme.fontSize[12] * theme.lineHeight.normal,
+    variants: {
+      invalid: {
+        true: { fontWeight: theme.fontWeight.regular, color: theme.color.dangerOnSoft },
+        false: { color: theme.color.text3 }
+      }
+    }
+  },
+  testHint: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  }
+}));
+function validateCard(value, brand, now = 0, labels) {
+  const resolved = brand ?? formatCard(value.number).brand;
+  const errors = {};
+  const number = validCardNumber(value.number, labels);
+  if (!number.ok) errors.number = number.why;
+  if (value.expiry.length === 0) {
+    errors.expiry = resolvePayLabels(labels).cardCopy.expiryEmpty;
+  } else {
+    const expiry = validExpiry(formatExpiry(value.expiry), now, labels);
+    if (!expiry.ok) errors.expiry = expiry.why;
+  }
+  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;
+  return { errors, firstBlocking };
+}
+function CardForm({
+  value,
+  brand,
+  errors,
+  showName = false,
+  showSave = false,
+  save = false,
+  layout = "auto",
+  testHint = false,
+  platform,
+  surface,
+  disabled = false,
+  size,
+  loading,
+  density = "comfortable",
+  tone,
+  now = 0,
+  saveLabel,
+  labels: labelsProp,
+  onChange,
+  onFieldBlur,
+  onSaveChange,
+  style,
+  testID
+}) {
+  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(
+    () => ({
+      register: (field, focus2) => {
+        focusers.current.set(field, focus2);
+        return () => {
+          if (focusers.current.get(field) === focus2) focusers.current.delete(field);
+        };
+      }
+    }),
+    []
+  );
+  const focus = (field) => focusers.current.get(field)?.();
+  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];
+      return current.includes(field) ? current.filter((f) => f !== field) : current;
+    });
+    onFieldBlur?.(field);
+  };
+  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,
+        {
+          value: value.number,
+          brand: resolvedBrand,
+          error: errorFor("number"),
+          valid: validFor("number"),
+          testHint,
+          labels: labelsProp,
+          platform,
+          surface,
+          disabled,
+          size,
+          tone,
+          loading,
+          style: styles.numberField,
+          onChange: (raw) => onChange({ number: raw }),
+          onComplete: () => focus("expiry"),
+          onBlur: handleBlur("number")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ExpiryField,
+        {
+          value: value.expiry,
+          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"),
+          onBlur: handleBlur("expiry")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CvcField,
+        {
+          value: value.cvc,
+          digits: resolvedBrand.cvc,
+          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")
+        }
+      )
+    ] }),
+    showName ? /* @__PURE__ */ jsx(
+      TextField,
+      {
+        label: labels.nameOnCard,
+        autoComplete: "cc-name",
+        size: size ?? "lg",
+        surface,
+        editable: !disabled,
+        value: value.name ?? "",
+        error: errors?.name,
+        onChangeText: (next) => onChange({ name: next }),
+        onBlur: handleBlur("name")
+      }
+    ) : null,
+    showSave ? /* @__PURE__ */ jsx(View, { style: styles.saveRow, children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: save,
+        onCheckedChange: (next) => onSaveChange?.(next),
+        label: saveLabel ?? labels.saveCard,
+        disabled
+      }
+    ) }) : null
+  ] }) });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  form: { gap: theme.space.s3 },
+  fields: {
+    gap: theme.space.s3,
+    variants: {
+      // Number · MM/YY · code on one line, or each on its own. Nothing else
+      // about the fields changes between the two.
+      asRow: { true: { flexDirection: "row", alignItems: "flex-start" }, false: {} }
+    }
+  },
+  numberField: {
+    variants: {
+      // The number is twice the width of the two short fields beside it — the
+      // 2:1:1 split the web grid draws with four columns.
+      asRow: { true: { flexGrow: 2 }, false: {} }
+    }
+  },
+  saveRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.tapMin
+  }
+}));
+
+export { CardForm, CardNumberField, CvcField, ExpiryField, ExpiryHint, validateCard };