framepayments-react-native 3.0.0 → 4.0.0

package/lib/ui/primitives/Toast.js

@@ -0,0 +1,86 @@
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { subscribeToasts, dismissActive, } from './toastCenter';
+// Renders the active toast at the bottom of the screen, mirroring iOS's
+// FrameToast (bottom edge, 16px horizontal margin, 24px from the bottom). Mounted
+// exactly once inside FrameProvider, layered above the presenter modal so
+// toasts surface over Checkout / Cart / Onboarding.
+export function ToastHost() {
+    const theme = useFrameTheme();
+    const [entry, setEntry] = useState(null);
+    const translateY = useRef(new Animated.Value(100)).current;
+    const opacity = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        return subscribeToasts(setEntry);
+    }, []);
+    useEffect(() => {
+        if (entry) {
+            Animated.parallel([
+                Animated.spring(translateY, {
+                    toValue: 0,
+                    friction: 8,
+                    tension: 60,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(opacity, {
+                    toValue: 1,
+                    duration: 180,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+        else {
+            Animated.parallel([
+                Animated.timing(translateY, {
+                    toValue: 100,
+                    duration: 180,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(opacity, {
+                    toValue: 0,
+                    duration: 180,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+    }, [entry, translateY, opacity]);
+    if (!entry)
+        return null;
+    return (<View pointerEvents="box-none" style={styles.overlay}>
+      <Animated.View style={[
+            styles.toast,
+            {
+                backgroundColor: theme.colors.toastBackground,
+                borderRadius: theme.radii.medium,
+                transform: [{ translateY }],
+                opacity,
+            },
+        ]}>
+        <Pressable onPress={dismissActive} accessibilityRole="button" accessibilityLabel="Dismiss notification">
+          <Text style={{
+            color: theme.colors.toastText,
+            fontSize: theme.fonts.bodySmall.size,
+            fontWeight: theme.fontWeights.bodySmall,
+            lineHeight: theme.fontLineHeights.bodySmall,
+            textAlign: 'center',
+        }}>
+            {entry.message}
+          </Text>
+        </Pressable>
+      </Animated.View>
+    </View>);
+}
+const styles = StyleSheet.create({
+    overlay: {
+        position: 'absolute',
+        bottom: 24,
+        left: 16,
+        right: 16,
+        alignItems: 'stretch',
+    },
+    toast: {
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+    },
+});

package/lib/ui/primitives/ValidatedTextField.d.ts

@@ -0,0 +1,46 @@
+import { type KeyboardTypeOptions, type ViewStyle } from 'react-native';
+import { truncateToLimit } from './textFieldUtils';
+export { truncateToLimit };
+export interface ValidatedTextFieldProps {
+    prompt: string;
+    value: string;
+    onChangeText: (next: string) => void;
+    /**
+     * Optional error string. When set, displayed below the field (or to the
+     * right of it when `inlineError` is true) and announced to screen readers.
+     */
+    error?: string | null;
+    /**
+     * Pair with `error` to enable auto-clear on keystroke. If you manage the
+     * error externally without a clear callback, omit this and clear it yourself.
+     */
+    onErrorChange?: (next: string | null) => void;
+    keyboardType?: KeyboardTypeOptions;
+    /** Positive integer; non-positive / non-integer values are ignored. */
+    characterLimit?: number;
+    /**
+     * Suppresses error rendering entirely (the value still flows through, the
+     * field just won't show it). Useful when an outer container groups error
+     * surfaces for multiple fields. Takes precedence over `inlineError`.
+     */
+    compactError?: boolean;
+    /** When true, error text lays out to the right of the field instead of below. */
+    inlineError?: boolean;
+    errorSpacing?: number;
+    /**
+     * Drop the input's own border. Used when the field sits inside an outer
+     * bordered container with sibling Dividers (the iOS CustomerInformation
+     * pattern), so the chrome lives on the container instead of every field.
+     */
+    borderless?: boolean;
+    secureTextEntry?: boolean;
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    autoCorrect?: boolean;
+    spellCheck?: boolean;
+    testID?: string;
+    style?: ViewStyle;
+    /** Override the screen-reader label. Defaults to `prompt`. */
+    accessibilityLabel?: string;
+}
+export declare function ValidatedTextField({ prompt, value, onChangeText, error, onErrorChange, keyboardType, characterLimit, compactError, inlineError, errorSpacing, borderless, secureTextEntry, autoCapitalize, autoCorrect, spellCheck, testID, style, accessibilityLabel, }: ValidatedTextFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=ValidatedTextField.d.ts.map

package/lib/ui/primitives/ValidatedTextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidatedTextField.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/ValidatedTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3G,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAC;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,YAAY,EACZ,KAAY,EACZ,aAAa,EACb,YAAwB,EACxB,cAAc,EACd,YAAoB,EACpB,WAAmB,EACnB,YAAoC,EACpC,UAAkB,EAClB,eAAe,EACf,cAAc,EACd,WAAW,EACX,UAAU,EACV,MAAM,EACN,KAAK,EACL,kBAAkB,GACnB,EAAE,uBAAuB,+BA+EzB"}

package/lib/ui/primitives/ValidatedTextField.js

@@ -0,0 +1,70 @@
+import { StyleSheet, Text, TextInput, View } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { truncateToLimit } from './textFieldUtils';
+export { truncateToLimit };
+const HEIGHT = 49;
+const DEFAULT_ERROR_SPACING = 4;
+export function ValidatedTextField({ prompt, value, onChangeText, error = null, onErrorChange, keyboardType = 'default', characterLimit, compactError = false, inlineError = false, errorSpacing = DEFAULT_ERROR_SPACING, borderless = false, secureTextEntry, autoCapitalize, autoCorrect, spellCheck, testID, style, accessibilityLabel, }) {
+    const theme = useFrameTheme();
+    const handleChange = (next) => {
+        const truncated = truncateToLimit(next, characterLimit);
+        if (error && onErrorChange)
+            onErrorChange(null);
+        onChangeText(truncated);
+    };
+    const hasError = !!error && !compactError;
+    const effectiveMaxLength = characterLimit !== undefined && Number.isInteger(characterLimit) && characterLimit > 0
+        ? characterLimit
+        : undefined;
+    const input = (<TextInput value={value} onChangeText={handleChange} placeholder={prompt} placeholderTextColor={theme.colors.textSecondary} keyboardType={keyboardType} secureTextEntry={secureTextEntry} autoCapitalize={autoCapitalize} autoCorrect={autoCorrect} spellCheck={spellCheck} maxLength={effectiveMaxLength} accessibilityLabel={accessibilityLabel ?? prompt} accessibilityHint={error ?? undefined} testID={testID} style={[
+            styles.input,
+            borderless ? styles.inputBorderless : null,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.body.size,
+                backgroundColor: borderless ? 'transparent' : theme.colors.surface,
+                borderColor: borderless && !hasError
+                    ? 'transparent'
+                    : hasError
+                        ? theme.colors.error
+                        : theme.colors.surfaceStroke,
+                borderRadius: borderless ? 0 : theme.radii.small,
+            },
+        ]}/>);
+    const errorText = hasError ? (<Text accessibilityLiveRegion="polite" style={{
+            color: theme.colors.error,
+            fontSize: theme.fonts.caption.size,
+            lineHeight: theme.fontLineHeights.caption,
+            marginTop: inlineError ? 0 : errorSpacing,
+            marginLeft: inlineError ? errorSpacing : 0,
+        }}>
+      {error}
+    </Text>) : null;
+    if (inlineError) {
+        return (<View style={[styles.inlineRow, style]}>
+        <View style={styles.inputColumn}>{input}</View>
+        {errorText}
+      </View>);
+    }
+    return (<View style={style}>
+      {input}
+      {errorText}
+    </View>);
+}
+const styles = StyleSheet.create({
+    input: {
+        height: HEIGHT,
+        paddingHorizontal: 12,
+        borderWidth: 1,
+    },
+    inputBorderless: {
+        borderWidth: 0,
+    },
+    inlineRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    inputColumn: {
+        flex: 1,
+    },
+});

package/lib/ui/primitives/buttonColors.d.ts

@@ -0,0 +1,8 @@
+import type { ResolvedFrameTheme } from '../theme/defaults';
+import type { ButtonVariant } from './Button.types';
+export declare function resolveButtonColors(variant: ButtonVariant, disabled: boolean, theme: ResolvedFrameTheme): {
+    background: string;
+    stroke: string;
+    foreground: string;
+};
+//# sourceMappingURL=buttonColors.d.ts.map

package/lib/ui/primitives/buttonColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonColors.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/buttonColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,kBAAkB,GACxB;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAoB5D"}

package/lib/ui/primitives/buttonColors.js

@@ -0,0 +1,21 @@
+export function resolveButtonColors(variant, disabled, theme) {
+    if (disabled) {
+        return {
+            background: theme.colors.disabledButton,
+            stroke: theme.colors.disabledButtonStroke,
+            foreground: theme.colors.disabledButtonText,
+        };
+    }
+    if (variant === 'primary') {
+        return {
+            background: theme.colors.primaryButton,
+            stroke: 'transparent',
+            foreground: theme.colors.primaryButtonText,
+        };
+    }
+    return {
+        background: theme.colors.secondaryButton,
+        stroke: theme.colors.secondaryButtonText,
+        foreground: theme.colors.secondaryButtonText,
+    };
+}

package/lib/ui/primitives/otpFieldLogic.d.ts

@@ -0,0 +1,15 @@
+export declare const OTP_LENGTH = 6;
+export interface OtpUpdate {
+    /** Next full 6-char value (always length OTP_LENGTH; trailing slots padded with ''). */
+    next: ReadonlyArray<string>;
+    /** Index of the box that should receive focus after the change. */
+    focusIndex: number;
+}
+export declare function emptyOtp(): ReadonlyArray<string>;
+/** Normalize a possibly-arbitrary string into a 6-slot digit array. */
+export declare function fromString(value: string): ReadonlyArray<string>;
+/** Combine the slots into the JS-facing single string (no padding). */
+export declare function toString(slots: ReadonlyArray<string>): string;
+export declare function handleSlotChange(prev: ReadonlyArray<string>, index: number, raw: string): OtpUpdate;
+export declare function handleBackspace(prev: ReadonlyArray<string>, index: number): OtpUpdate | null;
+//# sourceMappingURL=otpFieldLogic.d.ts.map

package/lib/ui/primitives/otpFieldLogic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otpFieldLogic.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/otpFieldLogic.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B,MAAM,WAAW,SAAS;IACxB,wFAAwF;IACxF,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,mEAAmE;IACnE,UAAU,EAAE,MAAM,CAAC;CACpB;AAMD,wBAAgB,QAAQ,IAAI,aAAa,CAAC,MAAM,CAAC,CAEhD;AAED,uEAAuE;AACvE,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAK/D;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,MAAM,CAE7D;AAUD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,GACV,SAAS,CA2BX;AAID,wBAAgB,eAAe,CAC7B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,KAAK,EAAE,MAAM,GACZ,SAAS,GAAG,IAAI,CAUlB"}

package/lib/ui/primitives/otpFieldLogic.js

@@ -0,0 +1,73 @@
+// Pure helpers behind OtpInputField. Extracted so we can exercise the focus
+// / paste / backspace logic in jest without rendering React.
+export const OTP_LENGTH = 6;
+function digitsOnly(s) {
+    return s.replace(/\D+/g, '');
+}
+export function emptyOtp() {
+    return ['', '', '', '', '', ''];
+}
+/** Normalize a possibly-arbitrary string into a 6-slot digit array. */
+export function fromString(value) {
+    const digits = digitsOnly(value).slice(0, OTP_LENGTH);
+    const slots = ['', '', '', '', '', ''];
+    for (let i = 0; i < digits.length; i++)
+        slots[i] = digits[i];
+    return slots;
+}
+/** Combine the slots into the JS-facing single string (no padding). */
+export function toString(slots) {
+    return slots.join('');
+}
+// Handle the change of a single slot. Two cases:
+//   - Single character typed in box `i` → write to slot i, focus i+1.
+//   - Paste of multiple characters in box i → expand starting at slot i,
+//     focusing the next empty slot (or the last slot when all filled).
+//
+// Empty `raw` means the user deleted the slot's character; reducer handles
+// the deletion by writing '' and leaving focus where it is (the parent's
+// onKeyPress handler is responsible for moving focus on Backspace).
+export function handleSlotChange(prev, index, raw) {
+    const digits = digitsOnly(raw);
+    if (digits === '') {
+        // Deletion via clearing the field.
+        const next = [...prev];
+        next[index] = '';
+        return { next, focusIndex: index };
+    }
+    if (digits.length === 1) {
+        const next = [...prev];
+        next[index] = digits;
+        const focusIndex = Math.min(index + 1, OTP_LENGTH - 1);
+        return { next, focusIndex };
+    }
+    // Paste / autofill: spread starting at `index`.
+    const next = [...prev];
+    let cursor = index;
+    for (const ch of digits) {
+        if (cursor >= OTP_LENGTH)
+            break;
+        next[cursor] = ch;
+        cursor++;
+    }
+    // Focus the first empty slot we haven't filled — or the last filled slot
+    // when the paste reaches the end.
+    let focusIndex = cursor;
+    if (focusIndex >= OTP_LENGTH)
+        focusIndex = OTP_LENGTH - 1;
+    return { next, focusIndex };
+}
+// Backspace pressed in box `i` when the box is empty → move focus left + clear
+// the left neighbor. Called by the parent's onKeyPress handler.
+export function handleBackspace(prev, index) {
+    if (index === 0)
+        return null;
+    if (prev[index] !== '') {
+        // RN's onKeyPress for Backspace fires BEFORE the delete is applied to a
+        // non-empty slot. Let the default delete happen.
+        return null;
+    }
+    const next = [...prev];
+    next[index - 1] = '';
+    return { next, focusIndex: index - 1 };
+}

package/lib/ui/primitives/paymentCardFormat.d.ts

@@ -0,0 +1,25 @@
+export declare const PAN_MAX_DIGITS: Readonly<Record<string, number>>;
+export declare const CVC_MAX_DIGITS: Readonly<Record<string, number>>;
+export declare function panMaxDigits(brand: string | null): number;
+export declare function cvcMaxDigits(brand: string | null): number;
+export declare function sanitizePanInput(raw: string, brand: string | null): string;
+export declare function formatPanDisplay(digits: string, brand: string | null): string;
+export declare function sanitizeCvcInput(raw: string, brand: string | null): string;
+export declare function formatExpiryDisplay(raw: string): string;
+export interface ParsedExpiry {
+    month: string;
+    year: string;
+}
+export declare function parseExpiry(formatted: string): ParsedExpiry | null;
+export interface CardFieldState {
+    panRaw: string;
+    panDisplay: string;
+    expiryDisplay: string;
+    cvcRaw: string;
+    brand: string | null;
+}
+export declare function emptyCardFieldState(): CardFieldState;
+export declare function applyPanInput(prev: CardFieldState, next: string): CardFieldState;
+export declare function applyExpiryInput(prev: CardFieldState, next: string): CardFieldState;
+export declare function applyCvcInput(prev: CardFieldState, next: string): CardFieldState;
+//# sourceMappingURL=paymentCardFormat.d.ts.map

package/lib/ui/primitives/paymentCardFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paymentCardFormat.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/paymentCardFormat.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQ3D,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE3D,CAAC;AAGF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAGzD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAGzD;AAGD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAG1E;AAGD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAa7E;AAGD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAG1E;AAWD,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAkBvD;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAIlE;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,mBAAmB,IAAI,cAAc,CAQpD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,GAAG,cAAc,CAahF;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,GAAG,cAAc,CAEnF;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,GAAG,cAAc,CAEhF"}

package/lib/ui/primitives/paymentCardFormat.js

@@ -0,0 +1,118 @@
+import { detectCardBrand } from '../../validation';
+// PAN max-digit count per brand (the longest length the brand allows). Used to
+// cap as-you-type input so users can't paste past the legal length.
+export const PAN_MAX_DIGITS = {
+    amex: 15,
+    visa: 19,
+    mastercard: 16,
+    discover: 19,
+    diners: 19,
+    jcb: 19,
+    unionpay: 19,
+};
+const PAN_DEFAULT_MAX = 19;
+export const CVC_MAX_DIGITS = {
+    amex: 4,
+};
+const CVC_DEFAULT_MAX = 3;
+export function panMaxDigits(brand) {
+    if (!brand)
+        return PAN_DEFAULT_MAX;
+    return PAN_MAX_DIGITS[brand] ?? PAN_DEFAULT_MAX;
+}
+export function cvcMaxDigits(brand) {
+    if (!brand)
+        return CVC_DEFAULT_MAX;
+    return CVC_MAX_DIGITS[brand] ?? CVC_DEFAULT_MAX;
+}
+// Strip everything but digits; cap at the brand's max PAN length.
+export function sanitizePanInput(raw, brand) {
+    const digits = raw.replace(/\D+/g, '');
+    return digits.slice(0, panMaxDigits(brand));
+}
+// Visually group digits: amex = 4-6-5, others = 4-4-4-4 (extended cards 4-4-4-7).
+export function formatPanDisplay(digits, brand) {
+    if (digits === '')
+        return '';
+    if (brand === 'amex') {
+        const a = digits.slice(0, 4);
+        const b = digits.slice(4, 10);
+        const c = digits.slice(10, 15);
+        return [a, b, c].filter((p) => p.length > 0).join(' ');
+    }
+    const groups = [];
+    for (let i = 0; i < digits.length; i += 4) {
+        groups.push(digits.slice(i, i + 4));
+    }
+    return groups.join(' ');
+}
+// Strip non-digits; cap at brand-specific CVC length.
+export function sanitizeCvcInput(raw, brand) {
+    const digits = raw.replace(/\D+/g, '');
+    return digits.slice(0, cvcMaxDigits(brand));
+}
+// MM/YY formatter with auto-slash insertion:
+//   - "1"     → "1"
+//   - "12"    → "12/"
+//   - "129"   → "12/9"
+//   - "1229"  → "12/29"
+//   - "13"    → "1"        (rejects 13–19 first-digit-2 path; pretend the 3 wasn't typed)
+//   - "0"     → "0"
+//   - "02"    → "02/"
+// Mirrors iOS Validators' MM/YY formatter behavior.
+export function formatExpiryDisplay(raw) {
+    const digits = raw.replace(/\D+/g, '').slice(0, 4);
+    if (digits.length === 0)
+        return '';
+    if (digits.length === 1) {
+        // Allow only 0 or 1 as the first month digit (anything 2–9 means single-digit month — pad).
+        if (digits[0] >= '2' && digits[0] <= '9') {
+            return `0${digits[0]}/`;
+        }
+        return digits;
+    }
+    const monthStr = digits.slice(0, 2);
+    const monthNum = Number.parseInt(monthStr, 10);
+    if (monthNum < 1 || monthNum > 12) {
+        // Invalid month: keep only the first digit so the user can fix it.
+        return digits[0];
+    }
+    if (digits.length === 2)
+        return `${monthStr}/`;
+    return `${monthStr}/${digits.slice(2)}`;
+}
+export function parseExpiry(formatted) {
+    const m = /^(\d{2})\/(\d{2})$/.exec(formatted);
+    if (!m)
+        return null;
+    return { month: m[1], year: m[2] };
+}
+export function emptyCardFieldState() {
+    return {
+        panRaw: '',
+        panDisplay: '',
+        expiryDisplay: '',
+        cvcRaw: '',
+        brand: null,
+    };
+}
+export function applyPanInput(prev, next) {
+    // Detect brand based on the new input, then sanitize against THAT brand's max.
+    const provisionalDigits = next.replace(/\D+/g, '');
+    const brand = detectCardBrand(provisionalDigits);
+    const panRaw = sanitizePanInput(provisionalDigits, brand);
+    const cvcRaw = sanitizeCvcInput(prev.cvcRaw, brand); // shrink CVC if brand changed (e.g. now amex requires 4)
+    return {
+        ...prev,
+        panRaw,
+        panDisplay: formatPanDisplay(panRaw, brand),
+        cvcRaw,
+        brand,
+    };
+}
+export function applyExpiryInput(prev, next) {
+    return { ...prev, expiryDisplay: formatExpiryDisplay(next) };
+}
+export function applyCvcInput(prev, next) {
+    return { ...prev, cvcRaw: sanitizeCvcInput(next, prev.brand) };
+}

package/lib/ui/primitives/textFieldUtils.d.ts

@@ -0,0 +1,2 @@
+export declare function truncateToLimit(value: string, limit?: number): string;
+//# sourceMappingURL=textFieldUtils.d.ts.map

package/lib/ui/primitives/textFieldUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textFieldUtils.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/textFieldUtils.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAIrE"}

package/lib/ui/primitives/textFieldUtils.js

@@ -0,0 +1,7 @@
+export function truncateToLimit(value, limit) {
+    if (limit === undefined)
+        return value;
+    if (!Number.isInteger(limit) || limit <= 0)
+        return value;
+    return value.length > limit ? value.slice(0, limit) : value;
+}

package/lib/ui/primitives/toastCenter.d.ts

@@ -0,0 +1,18 @@
+export interface ToastEntry {
+    id: number;
+    message: string;
+    variant: 'error' | 'info';
+    /** ms; defaults to 4000. */
+    duration: number;
+}
+type Listener = (toast: ToastEntry | null) => void;
+export declare function subscribeToasts(listener: Listener): () => void;
+export interface ShowToastOptions {
+    variant?: 'error' | 'info';
+    durationMs?: number;
+}
+export declare function showToast(message: string, opts?: ShowToastOptions): void;
+export declare function dismissActive(): void;
+export declare function __resetToastCenter(): void;
+export {};
+//# sourceMappingURL=toastCenter.d.ts.map

package/lib/ui/primitives/toastCenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toastCenter.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/toastCenter.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,4BAA4B;IAC5B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;AAYnD,wBAAgB,eAAe,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI,CAM9D;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,GAAE,gBAAqB,GAAG,IAAI,CAe5E;AAED,wBAAgB,aAAa,IAAI,IAAI,CASpC;AAED,wBAAgB,kBAAkB,IAAI,IAAI,CAMzC"}

package/lib/ui/primitives/toastCenter.js

@@ -0,0 +1,54 @@
+// Singleton toast center. Screens / view models call `showToast(message)` and
+// the <ToastHost /> mounted by FrameProvider picks the new toast up via
+// subscribe(). Mirrors iOS ToastCenter / Android ToastHost in the native
+// Frame SDKs — same 4s auto-dismiss + tap-to-dismiss + spring animation.
+const DEFAULT_DURATION_MS = 4000;
+let nextId = 1;
+let active = null;
+let dismissTimer = null;
+const listeners = new Set();
+function emit() {
+    for (const listener of listeners)
+        listener(active);
+}
+export function subscribeToasts(listener) {
+    listeners.add(listener);
+    listener(active);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function showToast(message, opts = {}) {
+    if (dismissTimer) {
+        clearTimeout(dismissTimer);
+        dismissTimer = null;
+    }
+    active = {
+        id: nextId++,
+        message,
+        variant: opts.variant ?? 'error',
+        duration: opts.durationMs ?? DEFAULT_DURATION_MS,
+    };
+    emit();
+    dismissTimer = setTimeout(() => {
+        dismissActive();
+    }, active.duration);
+}
+export function dismissActive() {
+    if (dismissTimer) {
+        clearTimeout(dismissTimer);
+        dismissTimer = null;
+    }
+    if (active) {
+        active = null;
+        emit();
+    }
+}
+export function __resetToastCenter() {
+    if (dismissTimer)
+        clearTimeout(dismissTimer);
+    dismissTimer = null;
+    active = null;
+    nextId = 1;
+    listeners.clear();
+}

package/lib/ui/screens/cart/CartScreen.d.ts

@@ -0,0 +1,14 @@
+import type { FrameCartItem } from '../../../types';
+export interface CartScreenProps {
+    items: ReadonlyArray<FrameCartItem>;
+    shippingAmountInCents: number;
+    currency?: string;
+    title?: string;
+    subtitle?: string;
+    checkoutButtonTitle?: string;
+    isCheckingOut?: boolean;
+    onCheckout: () => void;
+    onClose: () => void;
+}
+export declare function CartScreen({ items, shippingAmountInCents, currency, title, subtitle, checkoutButtonTitle, isCheckingOut, onCheckout, onClose, }: CartScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=CartScreen.d.ts.map

package/lib/ui/screens/cart/CartScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartScreen.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/cart/CartScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAYpD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACpC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAKD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,qBAAqB,EACrB,QAAgB,EAChB,KAAwB,EACxB,QAAiB,EACjB,mBAAgC,EAChC,aAAqB,EACrB,UAAU,EACV,OAAO,GACR,EAAE,eAAe,+BAqHjB"}