framepayments-react-native 3.0.1 → 4.0.0

package/lib/ui/primitives/DropDown.js

@@ -0,0 +1,136 @@
+import { useMemo, useState } from 'react';
+import { FlatList, Modal, Pressable, StyleSheet, Text, View, } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+export function DropDown({ options, selected, onSelect, prompt, testID, error }) {
+    const [open, setOpen] = useState(false);
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const selectedLabel = options.find((o) => o.value === selected)?.label ?? '';
+    const renderItem = ({ item }) => {
+        const isSelected = item.value === selected;
+        return (<Pressable onPress={() => {
+                setOpen(false);
+                onSelect(item.value);
+            }} accessibilityRole="button" accessibilityState={{ selected: isSelected }} style={({ pressed }) => [
+                styles.row,
+                { borderBottomColor: theme.colors.surfaceStroke, opacity: pressed ? 0.7 : 1 },
+            ]}>
+        <Text style={[
+                styles.rowLabel,
+                {
+                    color: theme.colors.textPrimary,
+                    fontSize: theme.fonts.body.size,
+                    lineHeight: theme.fontLineHeights.body,
+                },
+            ]}>
+          {item.label}
+        </Text>
+        {isSelected ? <Text style={[styles.check, { color: theme.colors.textPrimary }]}>✓</Text> : null}
+      </Pressable>);
+    };
+    return (<View>
+      {prompt ? (<Text style={[styles.prompt, { color: theme.colors.textSecondary }]}>{prompt}</Text>) : null}
+      <Pressable onPress={() => setOpen(true)} accessibilityRole="button" accessibilityLabel={prompt ? `${prompt}: ${selectedLabel}` : selectedLabel} testID={testID} style={({ pressed }) => [
+            styles.trigger,
+            {
+                borderColor: error ? theme.colors.error : theme.colors.surfaceStroke,
+                borderRadius: theme.radii.medium,
+                opacity: pressed ? 0.7 : 1,
+            },
+        ]}>
+        <Text numberOfLines={1} style={[
+            styles.triggerLabel,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.body.size,
+                lineHeight: theme.fontLineHeights.body,
+            },
+        ]}>
+          {selectedLabel}
+        </Text>
+        <Text style={[styles.caret, { color: theme.colors.textSecondary }]}>▾</Text>
+      </Pressable>
+      {error ? (<Text style={[styles.error, { color: theme.colors.error, fontSize: theme.fonts.bodySmall.size }]}>
+          {error}
+        </Text>) : null}
+      <Modal visible={open} animationType="slide" transparent={false} presentationStyle="pageSheet" onRequestClose={() => setOpen(false)}>
+        <View style={[styles.sheet, { backgroundColor: theme.colors.surface }]}>
+          <View style={styles.header}>
+            <Pressable onPress={() => setOpen(false)} accessibilityRole="button" accessibilityLabel="Close">
+              <Text style={[styles.cancel, { color: theme.colors.textSecondary }]}>Cancel</Text>
+            </Pressable>
+            <Text style={[
+            styles.title,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.headline.size,
+                fontWeight: theme.fontWeights.headline,
+                lineHeight: theme.fontLineHeights.headline,
+            },
+        ]}>
+              {prompt ?? 'Select'}
+            </Text>
+            <View style={{ width: 60 }}/>
+          </View>
+          <FlatList data={options} keyExtractor={(item) => item.value} renderItem={renderItem}/>
+        </View>
+      </Modal>
+    </View>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        prompt: {
+            fontSize: 12,
+            marginBottom: 4,
+        },
+        trigger: {
+            borderWidth: 1,
+            height: 49,
+            paddingHorizontal: 12,
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        triggerLabel: {
+            flex: 1,
+        },
+        caret: {
+            fontSize: 14,
+            marginLeft: 8,
+        },
+        error: {
+            marginTop: 4,
+        },
+        sheet: {
+            flex: 1,
+        },
+        header: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: 16,
+            paddingVertical: 12,
+        },
+        cancel: {
+            fontSize: 16,
+            width: 60,
+        },
+        title: {
+            flex: 1,
+            textAlign: 'center',
+        },
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 16,
+            paddingVertical: 14,
+            borderBottomWidth: StyleSheet.hairlineWidth,
+        },
+        rowLabel: {
+            flex: 1,
+        },
+        check: {
+            fontSize: 16,
+            fontWeight: '600',
+        },
+    });
+}

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

@@ -0,0 +1,17 @@
+import { type ViewStyle } from 'react-native';
+import { type CapturedPhoto } from '../../camera';
+export interface FrameCameraViewHandle {
+    /** Take a photo. Resolves with the captured-photo descriptor, or null when
+     *  the SDK isn't available / the camera isn't ready. */
+    take(): Promise<CapturedPhoto | null>;
+}
+export interface FrameCameraViewProps {
+    /** 'back' (default) for ID photos; 'front' for selfies. */
+    position?: 'front' | 'back';
+    style?: ViewStyle;
+    /** Called when the camera reports an error (no device, permission revoked
+     *  mid-flight, etc.) so the parent can show a fallback UI. */
+    onError?: (message: string) => void;
+}
+export declare const FrameCameraView: import("react").ForwardRefExoticComponent<FrameCameraViewProps & import("react").RefAttributes<FrameCameraViewHandle>>;
+//# sourceMappingURL=FrameCameraView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FrameCameraView.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/FrameCameraView.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAYjE,MAAM,WAAW,qBAAqB;IACpC;4DACwD;IACxD,IAAI,IAAI,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,oBAAoB;IACnC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;kEAC8D;IAC9D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAeD,eAAO,MAAM,eAAe,wHAoF1B,CAAC"}

package/lib/ui/primitives/FrameCameraView.js

@@ -0,0 +1,132 @@
+import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { loadCameraSdk } from '../../camera';
+import { useFrameTheme } from '../theme/ThemeContext';
+// vision-camera v5 introduced `usePhotoOutput` as the photo-capture path and
+// moved the Camera ref's methods to PreviewViewMethods (no top-level
+// takePhoto). v4 didn't ship that hook. The hook's presence is therefore a
+// stable v4-vs-v5 signal.
+function isV4Compatible(sdk) {
+    if (!sdk)
+        return false;
+    return typeof sdk.usePhotoOutput !== 'function';
+}
+export const FrameCameraView = forwardRef(function FrameCameraView({ position = 'back', style, onError }, ref) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const sdk = loadCameraSdk();
+    const v4CameraRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        async take() {
+            if (!sdk)
+                return null;
+            // v4 / v5 detection: v4 exposes a class-based `Camera` with `takePhoto`
+            // on the instance. v5 ships a hooks-only API where the controller is
+            // returned from useCamera(). We support v4 here; v5 requires a host-
+            // app shim. The detection is via the presence of `useCameraDevice`
+            // hook (added in v3+, still present in v4; v5 swaps to Nitro modules
+            // that the bundler reports as undefined when accessed off the module).
+            const v4 = v4CameraRef.current;
+            if (v4) {
+                try {
+                    const result = await v4.takePhoto();
+                    return {
+                        uri: result.path.startsWith('file://') ? result.path : `file://${result.path}`,
+                        type: 'image/jpeg',
+                        name: `frame-doc-${Date.now()}.jpg`,
+                    };
+                }
+                catch (err) {
+                    onError?.(err instanceof Error ? err.message : 'Could not capture photo.');
+                    return null;
+                }
+            }
+            // No ref attached yet — likely a v5 install where the API surface
+            // changed enough that this primitive can't drive it. Surface a clear
+            // error rather than silently failing.
+            onError?.('Camera SDK is installed but the version is not supported. Use react-native-vision-camera v4.x or implement a custom camera screen.');
+            return null;
+        },
+    }), [sdk, onError]);
+    // v4 vs v5 detection. v5 dropped the component-ref takePhoto() in favor of
+    // a `useCamera()` controller + `usePhotoOutput()` hook flow. The current
+    // wrapper targets v4's component-ref pattern; mounting v5's Camera would
+    // give us a ref without a take() method and crash on shutter tap. Surface
+    // a clear fallback so the user / host app gets actionable guidance.
+    const supported = isV4Compatible(sdk);
+    if (!sdk || !supported) {
+        return (<View style={[styles.fallback, style, { backgroundColor: theme.colors.surface }]}>
+        <Text style={[
+                styles.fallbackText,
+                { color: theme.colors.textSecondary, fontSize: theme.fonts.body.size },
+            ]}>
+          {!sdk
+                ? 'Camera is not available. Install react-native-vision-camera and rebuild the app.'
+                : 'react-native-vision-camera v5+ photo capture is not yet supported. Pin to v4.x or supply a custom capture screen.'}
+        </Text>
+      </View>);
+    }
+    // Defer the actual <Camera/> render to a SDK-version-aware child so this
+    // file can stay free of vision-camera typings.
+    return (<View style={[styles.container, style]}>
+      <LazyCameraSurface position={position} sdk={sdk} onCameraReady={(instance) => {
+            v4CameraRef.current = instance;
+        }} onError={onError}/>
+    </View>);
+});
+// Renders the actual react-native-vision-camera <Camera /> view. Isolated so
+// the v4 component-ref pattern stays here and we don't pollute the top-level
+// component with SDK-specific types.
+function LazyCameraSurface({ position, sdk, onCameraReady, onError }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    if (!sdk)
+        return null;
+    const v4 = sdk;
+    const useDevice = v4.useCameraDevice;
+    if (typeof useDevice !== 'function') {
+        onError?.('Camera SDK does not expose useCameraDevice. Use react-native-vision-camera v4.x.');
+        return (<View style={styles.notReady}>
+        <Text style={[styles.notReadyText, { color: theme.colors.textSecondary }]}>
+          Camera unavailable on this SDK version.
+        </Text>
+      </View>);
+    }
+    const device = useDevice(position);
+    if (!device) {
+        return (<View style={styles.notReady}>
+        <Text style={[styles.notReadyText, { color: theme.colors.textSecondary }]}>
+          No {position === 'front' ? 'front' : 'back'} camera available.
+        </Text>
+      </View>);
+    }
+    return (<v4.Camera ref={(instance) => onCameraReady(instance)} device={device} isActive photo style={StyleSheet.absoluteFill}/>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: '#000',
+        },
+        fallback: {
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingHorizontal: 24,
+        },
+        fallbackText: {
+            textAlign: 'center',
+        },
+        notReady: {
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#000',
+            paddingHorizontal: 24,
+        },
+        notReadyText: {
+            textAlign: 'center',
+            fontSize: 14,
+        },
+    });
+}

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

@@ -0,0 +1,13 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type GooglePayButtonTheme = 'dark' | 'light';
+export type GooglePayButtonType = 'pay' | 'buy' | 'book' | 'checkout' | 'donate' | 'order' | 'subscribe' | 'plain';
+export interface GooglePayButtonProps {
+    buttonTheme?: GooglePayButtonTheme;
+    buttonType?: GooglePayButtonType;
+    /** Corner radius in dp, defaults to 8. */
+    cornerRadiusDp?: number;
+    onPress: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function GooglePayButton({ buttonTheme, buttonType, cornerRadiusDp, onPress, style, }: GooglePayButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=GooglePayButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GooglePayButton.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/GooglePayButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiF,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM7I,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AACpD,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,CAAC;AAenH,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAID,wBAAgB,eAAe,CAAC,EAC9B,WAAoB,EACpB,UAAkB,EAClB,cAAkB,EAClB,OAAO,EACP,KAAK,GACN,EAAE,oBAAoB,+BAatB"}

package/lib/ui/primitives/GooglePayButton.js

@@ -0,0 +1,20 @@
+import { Platform, StyleSheet, View, requireNativeComponent } from 'react-native';
+const NativeGooglePayButton = Platform.OS === 'android'
+    ? requireNativeComponent('FrameGooglePayButton')
+    : null;
+const DEFAULT_HEIGHT = 50;
+export function GooglePayButton({ buttonTheme = 'dark', buttonType = 'pay', cornerRadiusDp = 8, onPress, style, }) {
+    if (Platform.OS !== 'android' || NativeGooglePayButton === null) {
+        return <View style={[styles.fallback, style]}/>;
+    }
+    return (<NativeGooglePayButton buttonTheme={buttonTheme} buttonType={buttonType} cornerRadiusDp={cornerRadiusDp} onPress={onPress} style={[styles.button, style]}/>);
+}
+const styles = StyleSheet.create({
+    button: {
+        height: DEFAULT_HEIGHT,
+        width: '100%',
+    },
+    fallback: {
+        height: DEFAULT_HEIGHT,
+    },
+});

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

@@ -0,0 +1,12 @@
+export interface OtpInputFieldProps {
+    value: string;
+    onChange: (next: string) => void;
+    /** When true, all boxes become focusable but read-only. Used while the
+     * remote OTP confirm call is in flight. */
+    disabled?: boolean;
+    /** Auto-focus the first box on mount. */
+    autoFocusOnMount?: boolean;
+    testID?: string;
+}
+export declare function OtpInputField({ value, onChange, disabled, autoFocusOnMount, testID, }: OtpInputFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=OtpInputField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInputField.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/OtpInputField.tsx"],"names":[],"mappings":"AAwBA,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;+CAC2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,gBAAuB,EACvB,MAAM,GACP,EAAE,kBAAkB,+BAoFpB"}

package/lib/ui/primitives/OtpInputField.js

@@ -0,0 +1,87 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Platform, StyleSheet, TextInput, View, } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { OTP_LENGTH, fromString, handleBackspace, handleSlotChange, toString, } from './otpFieldLogic';
+export function OtpInputField({ value, onChange, disabled, autoFocusOnMount = true, testID, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const slots = fromString(value);
+    const inputs = useRef([]);
+    useEffect(() => {
+        if (!autoFocusOnMount)
+            return undefined;
+        // Defer to the frame after layout so the modal's slide-in animation can
+        // finish before we steal focus. Double-RAF works across iOS and Android
+        // without a magic-number setTimeout that drops frames on slower devices.
+        let rafA = null;
+        let rafB = null;
+        rafA = requestAnimationFrame(() => {
+            rafB = requestAnimationFrame(() => {
+                inputs.current[0]?.focus();
+            });
+        });
+        return () => {
+            if (rafA !== null)
+                cancelAnimationFrame(rafA);
+            if (rafB !== null)
+                cancelAnimationFrame(rafB);
+        };
+    }, [autoFocusOnMount]);
+    function focusAt(index) {
+        if (index < 0 || index >= OTP_LENGTH)
+            return;
+        inputs.current[index]?.focus();
+    }
+    function onSlotChange(index, raw) {
+        const update = handleSlotChange(slots, index, raw);
+        onChange(toString(update.next));
+        if (update.focusIndex !== index) {
+            // Run after the state update has settled to avoid focus-fighting on iOS.
+            requestAnimationFrame(() => focusAt(update.focusIndex));
+        }
+    }
+    function onSlotKeyPress(index, event) {
+        if (event.nativeEvent.key !== 'Backspace')
+            return;
+        const update = handleBackspace(slots, index);
+        if (update) {
+            onChange(toString(update.next));
+            requestAnimationFrame(() => focusAt(update.focusIndex));
+        }
+    }
+    return (<View style={styles.row} testID={testID}>
+      {Array.from({ length: OTP_LENGTH }).map((_, index) => (<TextInput key={index} ref={(ref) => {
+                inputs.current[index] = ref;
+            }} value={slots[index] ?? ''} onChangeText={(raw) => onSlotChange(index, raw)} onKeyPress={(event) => onSlotKeyPress(index, event)} editable={!disabled} keyboardType="number-pad" inputMode="numeric" autoComplete={Platform.OS === 'ios' ? 'one-time-code' : 'sms-otp'} textContentType="oneTimeCode" 
+        // RN limits maxLength to the slot, but iOS autofill from SMS sends
+        // the full 6-digit code into the focused field — handleSlotChange
+        // spreads the paste across the remaining slots.
+        maxLength={OTP_LENGTH} selectTextOnFocus style={[
+                styles.slot,
+                {
+                    borderColor: theme.colors.surfaceStroke,
+                    borderRadius: theme.radii.medium,
+                    color: theme.colors.textPrimary,
+                    fontSize: theme.fonts.heading.size,
+                    fontWeight: theme.fontWeights.heading,
+                },
+            ]} accessibilityLabel={`Code digit ${index + 1}`} testID={testID ? `${testID}.${index}` : undefined}/>))}
+    </View>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        row: {
+            flexDirection: 'row',
+            gap: 8,
+            justifyContent: 'space-between',
+        },
+        slot: {
+            flex: 1,
+            height: 56,
+            borderWidth: 1,
+            textAlign: 'center',
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+        },
+    });
+}

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

@@ -0,0 +1,7 @@
+export interface PageHeaderProps {
+    title: string;
+    onBack?: () => void;
+    testID?: string;
+}
+export declare function PageHeader({ title, onBack, testID }: PageHeaderProps): import("react").JSX.Element;
+//# sourceMappingURL=PageHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/PageHeader.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAID,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,eAAe,+BAoCpE"}

package/lib/ui/primitives/PageHeader.js

@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { Icon } from '../assets';
+const BACK_WIDTH = 44;
+export function PageHeader({ title, onBack, testID }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    return (<View style={styles.row} testID={testID}>
+      <View style={styles.side}>
+        {onBack ? (<Pressable onPress={onBack} accessibilityRole="button" accessibilityLabel="Back" hitSlop={8} style={({ pressed }) => [styles.back, pressed && { opacity: 0.6 }]}>
+            <Icon name="left-chevron" size={24} color={theme.colors.textPrimary}/>
+          </Pressable>) : null}
+      </View>
+      <Text style={[
+            styles.title,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.headline.size,
+                fontWeight: theme.fontWeights.headline,
+                lineHeight: theme.fontLineHeights.headline,
+            },
+        ]} numberOfLines={1}>
+        {title}
+      </Text>
+      <View style={styles.side}/>
+    </View>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 8,
+            paddingVertical: 8,
+        },
+        side: {
+            width: BACK_WIDTH,
+            alignItems: 'center',
+        },
+        back: {
+            width: BACK_WIDTH,
+            height: 44,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        backGlyph: {
+            fontSize: 28,
+            fontWeight: '300',
+            includeFontPadding: false,
+        },
+        title: {
+            flex: 1,
+            textAlign: 'center',
+        },
+    });
+}

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

@@ -0,0 +1,31 @@
+export interface PaymentCardFieldHandle {
+    /**
+     * Run full Luhn + length + expiry + CVC validation. Returns null when valid;
+     * otherwise a per-field error map. The parent screen renders errors itself
+     * (typically into a Toast) so this component stays stateless about errors.
+     */
+    validate(): null | {
+        pan?: string;
+        expiry?: string;
+        cvc?: string;
+    };
+    /** Read current field values for serialization / encryption at submit. */
+    getValues(): {
+        pan: string;
+        expirationMonth: string;
+        expirationYear: string;
+        cvc: string;
+        brand: string | null;
+    };
+    /** Wipe everything (used after a successful submit). */
+    reset(): void;
+}
+export interface PaymentCardFieldProps {
+    onChange?: (state: {
+        brand: string | null;
+        complete: boolean;
+    }) => void;
+    testID?: string;
+}
+export declare const PaymentCardField: import("react").ForwardRefExoticComponent<PaymentCardFieldProps & import("react").RefAttributes<PaymentCardFieldHandle>>;
+//# sourceMappingURL=PaymentCardField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentCardField.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/PaymentCardField.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,QAAQ,IAAI,IAAI,GAAG;QACjB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,0EAA0E;IAC1E,SAAS,IAAI;QACX,GAAG,EAAE,MAAM,CAAC;QACZ,eAAe,EAAE,MAAM,CAAC;QACxB,cAAc,EAAE,MAAM,CAAC;QACvB,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;IACF,wDAAwD;IACxD,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,0HAkL5B,CAAC"}