framepayments-react-native 3.0.1 → 4.0.0

package/lib/ui/primitives/PaymentCardField.js

@@ -0,0 +1,198 @@
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { applyCvcInput, applyExpiryInput, applyPanInput, emptyCardFieldState, parseExpiry, } from './paymentCardFormat';
+import { validateCVC, validateCard, validateCardExpiry } from '../../validation';
+export const PaymentCardField = forwardRef(function PaymentCardField({ onChange, testID }, ref) {
+    const theme = useFrameTheme();
+    const [state, setState] = useState(emptyCardFieldState);
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const panInputRef = useRef(null);
+    const expiryInputRef = useRef(null);
+    const cvcInputRef = useRef(null);
+    function update(next) {
+        setState(next);
+        onChange?.({
+            brand: next.brand,
+            complete: validateCard(next.panRaw) === null &&
+                parseExpiry(next.expiryDisplay) !== null &&
+                validateCVC(next.cvcRaw, next.brand) === null,
+        });
+    }
+    function onPanChange(raw) {
+        const next = applyPanInput(state, raw);
+        update(next);
+        // Auto-advance once PAN hits max digits.
+        const maxLen = next.brand === 'amex' ? 15 : 19;
+        if (next.panRaw.length >= maxLen) {
+            expiryInputRef.current?.focus();
+        }
+    }
+    function onExpiryChange(raw) {
+        const next = applyExpiryInput(state, raw);
+        update(next);
+        // Auto-advance once expiry has a full MM/YY.
+        if (next.expiryDisplay.length === 5) {
+            cvcInputRef.current?.focus();
+        }
+    }
+    function onCvcChange(raw) {
+        update(applyCvcInput(state, raw));
+    }
+    useImperativeHandle(ref, () => ({
+        validate() {
+            const errors = {};
+            const panError = validateCard(state.panRaw);
+            if (panError)
+                errors.pan = panError;
+            const expiry = parseExpiry(state.expiryDisplay);
+            if (!expiry) {
+                errors.expiry = 'Enter expiration as MM/YY';
+            }
+            else {
+                const expiryError = validateCardExpiry(expiry.month, expiry.year);
+                if (expiryError)
+                    errors.expiry = expiryError;
+            }
+            const cvcError = validateCVC(state.cvcRaw, state.brand);
+            if (cvcError)
+                errors.cvc = cvcError;
+            return Object.keys(errors).length === 0 ? null : errors;
+        },
+        getValues() {
+            const expiry = parseExpiry(state.expiryDisplay);
+            return {
+                pan: state.panRaw,
+                expirationMonth: expiry?.month ?? '',
+                expirationYear: expiry?.year ?? '',
+                cvc: state.cvcRaw,
+                brand: state.brand,
+            };
+        },
+        reset() {
+            setState(emptyCardFieldState());
+        },
+    }), [state]);
+    return (<View style={[
+            styles.container,
+            {
+                backgroundColor: theme.colors.surface,
+                borderColor: theme.colors.surfaceStroke,
+                borderRadius: theme.radii.medium,
+            },
+        ]} testID={testID}>
+        <View style={styles.row}>
+          <View style={styles.panColumn}>
+            <Text style={[styles.label, { color: theme.colors.textSecondary }]}>Card number</Text>
+            <View style={styles.panRow}>
+              <TextInput ref={panInputRef} value={state.panDisplay} onChangeText={onPanChange} placeholder="1234 5678 9012 3456" placeholderTextColor={theme.colors.textSecondary} keyboardType="number-pad" inputMode="numeric" autoComplete="cc-number" textContentType="creditCardNumber" maxLength={state.brand === 'amex' ? 17 : 23} style={[
+            styles.input,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.body.size,
+            },
+        ]} accessibilityLabel="Card number"/>
+              {state.brand ? (<Text style={[styles.brand, { color: theme.colors.textSecondary }]}>{brandShortLabel(state.brand)}</Text>) : null}
+            </View>
+          </View>
+        </View>
+
+        <View style={[styles.divider, { backgroundColor: theme.colors.surfaceStroke }]}/>
+
+        <View style={styles.row}>
+          <View style={styles.expiryColumn}>
+            <Text style={[styles.label, { color: theme.colors.textSecondary }]}>Expiry</Text>
+            <TextInput ref={expiryInputRef} value={state.expiryDisplay} onChangeText={onExpiryChange} placeholder="MM/YY" placeholderTextColor={theme.colors.textSecondary} keyboardType="number-pad" inputMode="numeric" autoComplete="cc-exp" maxLength={5} style={[
+            styles.input,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.body.size,
+            },
+        ]} accessibilityLabel="Card expiration"/>
+          </View>
+          <View style={[styles.divider, styles.dividerVertical, { backgroundColor: theme.colors.surfaceStroke }]}/>
+          <View style={styles.cvcColumn}>
+            <Text style={[styles.label, { color: theme.colors.textSecondary }]}>CVC</Text>
+            <TextInput ref={cvcInputRef} value={state.cvcRaw} onChangeText={onCvcChange} placeholder={state.brand === 'amex' ? '1234' : '123'} placeholderTextColor={theme.colors.textSecondary} keyboardType="number-pad" inputMode="numeric" autoComplete="cc-csc" maxLength={state.brand === 'amex' ? 4 : 3} secureTextEntry style={[
+            styles.input,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.body.size,
+            },
+        ]} accessibilityLabel="Card security code"/>
+          </View>
+        </View>
+      </View>);
+});
+function brandShortLabel(brand) {
+    switch (brand) {
+        case 'amex':
+            return 'AMEX';
+        case 'visa':
+            return 'VISA';
+        case 'mastercard':
+            return 'MC';
+        case 'discover':
+            return 'DISC';
+        case 'diners':
+            return 'DCI';
+        case 'jcb':
+            return 'JCB';
+        case 'unionpay':
+            return 'UPI';
+        default:
+            return brand.toUpperCase();
+    }
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        container: {
+            borderWidth: 1,
+            overflow: 'hidden',
+        },
+        row: {
+            flexDirection: 'row',
+            alignItems: 'stretch',
+        },
+        panColumn: {
+            flex: 1,
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+        },
+        panRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        },
+        expiryColumn: {
+            flex: 1,
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+        },
+        cvcColumn: {
+            flex: 1,
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+        },
+        label: {
+            fontSize: 12,
+            marginBottom: 2,
+        },
+        input: {
+            paddingVertical: 4,
+            padding: 0,
+        },
+        brand: {
+            fontSize: 12,
+            fontWeight: '600',
+        },
+        divider: {
+            height: StyleSheet.hairlineWidth,
+            width: '100%',
+        },
+        dividerVertical: {
+            width: StyleSheet.hairlineWidth,
+            height: '100%',
+        },
+    });
+}

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

@@ -0,0 +1,11 @@
+export interface PaymentMethodRowProps {
+    title: string;
+    subtitle?: string;
+    selected: boolean;
+    onPress: () => void;
+    icon?: React.ReactNode;
+    testID?: string;
+    accessibilityLabel?: string;
+}
+export declare function PaymentMethodRow({ title, subtitle, selected, onPress, icon, testID, accessibilityLabel, }: PaymentMethodRowProps): import("react").JSX.Element;
+//# sourceMappingURL=PaymentMethodRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentMethodRow.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/PaymentMethodRow.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAOD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,MAAM,EACN,kBAAkB,GACnB,EAAE,qBAAqB,+BAgEvB"}

package/lib/ui/primitives/PaymentMethodRow.js

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { Icon } from '../assets';
+const ROW_MIN_HEIGHT = 64;
+const ICON_WIDTH = 48;
+const ICON_HEIGHT = 32;
+const RADIO_SIZE = 22;
+export function PaymentMethodRow({ title, subtitle, selected, onPress, icon, testID, accessibilityLabel, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const borderColor = selected ? theme.colors.textPrimary : theme.colors.surfaceStroke;
+    const borderWidth = selected ? 2 : StyleSheet.hairlineWidth;
+    // When the border thickens on selection, content shifts 1pt right/down. Pad
+    // the inset to keep visual height + alignment constant across both states.
+    const innerPadding = selected ? 11 : 12;
+    return (<Pressable onPress={onPress} testID={testID} accessibilityRole="radio" accessibilityLabel={accessibilityLabel ?? title} accessibilityState={{ selected }} style={({ pressed }) => [
+            styles.row,
+            {
+                borderColor,
+                borderWidth,
+                borderRadius: theme.radii.medium,
+                paddingHorizontal: innerPadding,
+                paddingVertical: innerPadding,
+                opacity: pressed ? 0.8 : 1,
+            },
+        ]}>
+      <View style={styles.iconColumn}>{icon ?? null}</View>
+      <View style={styles.textColumn}>
+        <Text numberOfLines={1} style={{
+            color: theme.colors.textPrimary,
+            fontSize: theme.fonts.body.size,
+            fontWeight: theme.fontWeights.body,
+            lineHeight: theme.fontLineHeights.body,
+        }}>
+          {title}
+        </Text>
+        {subtitle ? (<Text numberOfLines={1} style={{
+                color: theme.colors.textSecondary,
+                fontSize: theme.fonts.bodySmall.size,
+                fontWeight: theme.fontWeights.bodySmall,
+                lineHeight: theme.fontLineHeights.bodySmall,
+                marginTop: 2,
+            }}>
+            {subtitle}
+          </Text>) : null}
+      </View>
+      <Icon name={selected ? 'filled-selection' : 'empty-selection'} size={RADIO_SIZE} color={theme.colors.textPrimary}/>
+    </Pressable>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            minHeight: ROW_MIN_HEIGHT,
+            gap: 12,
+        },
+        iconColumn: {
+            width: ICON_WIDTH,
+            height: ICON_HEIGHT,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        textColumn: {
+            flex: 1,
+            justifyContent: 'center',
+        },
+    });
+}

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

@@ -0,0 +1,9 @@
+import { type PhoneCountry } from '../../countries';
+export interface PhoneCountryPickerProps {
+    /** Currently selected alpha-2 (e.g. 'US'). */
+    selectedAlpha2: string;
+    onSelect: (country: PhoneCountry) => void;
+    testID?: string;
+}
+export declare function PhoneCountryPicker({ selectedAlpha2, onSelect, testID }: PhoneCountryPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=PhoneCountryPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneCountryPicker.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/PhoneCountryPicker.tsx"],"names":[],"mappings":"AAYA,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAMzB,MAAM,WAAW,uBAAuB;IACtC,8CAA8C;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAID,wBAAgB,kBAAkB,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,uBAAuB,+BAuD/F"}

package/lib/ui/primitives/PhoneCountryPicker.js

@@ -0,0 +1,183 @@
+import { useMemo, useState } from 'react';
+import { FlatList, Modal, Pressable, StyleSheet, Text, TextInput, View, } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { alpha2ToFlag, getPhoneCountries, RESTRICTED_ALPHA2_CODES, } from '../../countries';
+const TRIGGER_WIDTH = 110;
+export function PhoneCountryPicker({ selectedAlpha2, onSelect, testID }) {
+    const [open, setOpen] = useState(false);
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const countries = useMemo(() => {
+        const blocked = new Set(RESTRICTED_ALPHA2_CODES);
+        return getPhoneCountries().filter((c) => !blocked.has(c.alpha2Code));
+    }, []);
+    const selected = useMemo(() => countries.find((c) => c.alpha2Code === selectedAlpha2) ?? countries[0], [countries, selectedAlpha2]);
+    return (<>
+      <Pressable onPress={() => setOpen(true)} accessibilityRole="button" accessibilityLabel={`Country ${selected.displayName}, dial code ${selected.callingCode}`} testID={testID} style={({ pressed }) => [
+            styles.trigger,
+            {
+                borderColor: theme.colors.surfaceStroke,
+                borderRadius: theme.radii.medium,
+                opacity: pressed ? 0.7 : 1,
+            },
+        ]}>
+        <Text style={styles.flag}>{alpha2ToFlag(selected.alpha2Code)}</Text>
+        <Text style={[
+            styles.dialCode,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.body.size,
+                lineHeight: theme.fontLineHeights.body,
+            },
+        ]}>
+          {selected.callingCode}
+        </Text>
+      </Pressable>
+      <PhoneCountrySheet visible={open} countries={countries} selectedAlpha2={selectedAlpha2} onClose={() => setOpen(false)} onSelect={(c) => {
+            setOpen(false);
+            onSelect(c);
+        }}/>
+    </>);
+}
+function PhoneCountrySheet({ visible, countries, selectedAlpha2, onClose, onSelect }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const [query, setQuery] = useState('');
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (q === '')
+            return countries;
+        return countries.filter((c) => c.displayName.toLowerCase().includes(q) ||
+            c.alpha2Code.toLowerCase().includes(q) ||
+            c.callingCode.includes(q));
+    }, [countries, query]);
+    const renderItem = ({ item }) => {
+        const isSelected = item.alpha2Code === selectedAlpha2;
+        return (<Pressable onPress={() => onSelect(item)} accessibilityRole="button" accessibilityState={{ selected: isSelected }} style={({ pressed }) => [
+                styles.row,
+                { borderBottomColor: theme.colors.surfaceStroke, opacity: pressed ? 0.7 : 1 },
+            ]}>
+        <Text style={styles.rowFlag}>{item.flag}</Text>
+        <View style={styles.rowText}>
+          <Text numberOfLines={1} style={[
+                styles.rowName,
+                {
+                    color: theme.colors.textPrimary,
+                    fontSize: theme.fonts.body.size,
+                    lineHeight: theme.fontLineHeights.body,
+                },
+            ]}>
+            {item.displayName}
+          </Text>
+          <Text style={[
+                styles.rowSub,
+                {
+                    color: theme.colors.textSecondary,
+                    fontSize: theme.fonts.bodySmall.size,
+                },
+            ]}>
+            {item.alpha2Code} · {item.callingCode}
+          </Text>
+        </View>
+        {isSelected ? <Text style={[styles.check, { color: theme.colors.textPrimary }]}>✓</Text> : null}
+      </Pressable>);
+    };
+    return (<Modal visible={visible} animationType="slide" transparent={false} presentationStyle="pageSheet" onRequestClose={onClose}>
+      <View style={[styles.sheet, { backgroundColor: theme.colors.surface }]}>
+        <View style={styles.header}>
+          <Pressable onPress={onClose} 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,
+            },
+        ]}>
+            Select country
+          </Text>
+          <View style={{ width: 60 }}/>
+        </View>
+        <View style={[styles.searchRow, { borderBottomColor: theme.colors.surfaceStroke }]}>
+          <TextInput value={query} onChangeText={setQuery} placeholder="Search by name, code, or dial" placeholderTextColor={theme.colors.textSecondary} autoCorrect={false} autoCapitalize="none" style={[
+            styles.searchInput,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.body.size,
+            },
+        ]} accessibilityLabel="Search phone country"/>
+        </View>
+        <FlatList data={filtered} keyExtractor={(item) => item.alpha2Code} renderItem={renderItem} keyboardShouldPersistTaps="handled"/>
+      </View>
+    </Modal>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        trigger: {
+            width: TRIGGER_WIDTH,
+            height: 49,
+            borderWidth: 1,
+            paddingHorizontal: 10,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+        },
+        flag: {
+            fontSize: 20,
+        },
+        dialCode: {
+            fontWeight: '500',
+        },
+        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',
+        },
+        searchRow: {
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+            borderBottomWidth: StyleSheet.hairlineWidth,
+        },
+        searchInput: {
+            paddingVertical: 8,
+        },
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 16,
+            paddingVertical: 12,
+            gap: 12,
+            borderBottomWidth: StyleSheet.hairlineWidth,
+        },
+        rowFlag: {
+            fontSize: 22,
+        },
+        rowText: {
+            flex: 1,
+        },
+        rowName: {},
+        rowSub: {
+            marginTop: 2,
+        },
+        check: {
+            fontSize: 16,
+            fontWeight: '600',
+        },
+    });
+}

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

@@ -0,0 +1,11 @@
+import type { PhoneCountry } from '../../countries';
+export interface PhoneNumberFieldProps {
+    phoneNumber: string;
+    selectedAlpha2: string;
+    onChangePhoneNumber: (value: string) => void;
+    onChangeCountry: (country: PhoneCountry) => void;
+    error?: string;
+    testID?: string;
+}
+export declare function PhoneNumberField({ phoneNumber, selectedAlpha2, onChangePhoneNumber, onChangeCountry, error, testID, }: PhoneNumberFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=PhoneNumberField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneNumberField.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/PhoneNumberField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAOpD,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,KAAK,EACL,MAAM,GACP,EAAE,qBAAqB,+BAiEvB"}

package/lib/ui/primitives/PhoneNumberField.js

@@ -0,0 +1,68 @@
+import { useMemo, useRef } from 'react';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
+import { AsYouType } from 'libphonenumber-js';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { PhoneCountryPicker } from './PhoneCountryPicker';
+export function PhoneNumberField({ phoneNumber, selectedAlpha2, onChangePhoneNumber, onChangeCountry, error, testID, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    // AsYouType retains internal state across keystrokes (intentional for parser
+    // throughput); make sure each region change rebuilds the formatter.
+    const formatterAlpha2 = useRef(selectedAlpha2);
+    formatterAlpha2.current = selectedAlpha2;
+    function handleChange(next) {
+        const formatter = new AsYouType(selectedAlpha2);
+        onChangePhoneNumber(formatter.input(next));
+    }
+    return (<View>
+      <View style={styles.row}>
+        <PhoneCountryPicker selectedAlpha2={selectedAlpha2} onSelect={onChangeCountry} testID={testID ? `${testID}.country` : undefined}/>
+        <View style={[
+            styles.input,
+            {
+                borderColor: error ? theme.colors.error : theme.colors.surfaceStroke,
+                borderRadius: theme.radii.medium,
+            },
+        ]}>
+          <TextInput value={phoneNumber} onChangeText={handleChange} placeholder="Phone number" placeholderTextColor={theme.colors.textSecondary} keyboardType="phone-pad" autoComplete="tel" textContentType="telephoneNumber" style={[
+            styles.inputText,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.body.size,
+            },
+        ]} accessibilityLabel="Phone number" testID={testID}/>
+        </View>
+      </View>
+      {error ? (<Text style={[
+                styles.error,
+                {
+                    color: theme.colors.error,
+                    fontSize: theme.fonts.bodySmall.size,
+                },
+            ]}>
+          {error}
+        </Text>) : null}
+    </View>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        row: {
+            flexDirection: 'row',
+            gap: 8,
+            alignItems: 'center',
+        },
+        input: {
+            flex: 1,
+            height: 49,
+            borderWidth: 1,
+            paddingHorizontal: 12,
+            justifyContent: 'center',
+        },
+        inputText: {
+            padding: 0,
+        },
+        error: {
+            marginTop: 4,
+        },
+    });
+}

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

@@ -0,0 +1,8 @@
+import { type ViewStyle } from 'react-native';
+export interface ProgressBarProps {
+    total: number;
+    current: number;
+    style?: ViewStyle;
+}
+export declare function ProgressBar({ total, current, style }: ProgressBarProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ProgressBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOhE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB,sCAyBtE"}

package/lib/ui/primitives/ProgressBar.js

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+export function ProgressBar({ total, current, style }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    if (total <= 0)
+        return null;
+    return (<View style={[styles.row, style]} accessibilityRole="progressbar">
+      {Array.from({ length: total }).map((_, index) => {
+            const isFilled = index < current;
+            const isCurrent = index === current;
+            const backgroundColor = isFilled || isCurrent
+                ? theme.colors.primaryButton
+                : theme.colors.surfaceStroke;
+            const opacity = isFilled ? 1 : isCurrent ? 0.85 : 0.5;
+            return (<View key={index} style={[styles.cell, { backgroundColor, opacity }]} accessibilityLabel={`Step ${index + 1} of ${total}`}/>);
+        })}
+    </View>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        row: {
+            flexDirection: 'row',
+            gap: 6,
+            paddingVertical: 8,
+            paddingHorizontal: 16,
+        },
+        cell: {
+            flex: 1,
+            height: 5,
+            borderRadius: 2.5,
+        },
+    });
+}

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

@@ -0,0 +1,6 @@
+export interface TermsOfServiceViewProps {
+    privacyUrl?: string;
+    termsUrl?: string;
+}
+export declare function TermsOfServiceView({ privacyUrl, termsUrl, }: TermsOfServiceViewProps): import("react").JSX.Element;
+//# sourceMappingURL=TermsOfServiceView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TermsOfServiceView.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/TermsOfServiceView.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,uBAAuB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,UAA4B,EAC5B,QAAwB,GACzB,EAAE,uBAAuB,+BAkCzB"}

package/lib/ui/primitives/TermsOfServiceView.js

@@ -0,0 +1,34 @@
+import { Linking, StyleSheet, Text } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+const DEFAULT_PRIVACY = 'https://framepayments.com/legal/privacy';
+const DEFAULT_TERMS = 'https://framepayments.com/legal/terms';
+export function TermsOfServiceView({ privacyUrl = DEFAULT_PRIVACY, termsUrl = DEFAULT_TERMS, }) {
+    const theme = useFrameTheme();
+    return (<Text style={[
+            styles.text,
+            {
+                color: theme.colors.textSecondary,
+                fontSize: theme.fonts.bodySmall.size,
+                lineHeight: theme.fontLineHeights.bodySmall,
+            },
+        ]} accessibilityLabel="Terms of Service">
+      By tapping Continue, you confirm that you agree to Frame's{' '}
+      <Text style={[styles.link, { color: theme.colors.textPrimary }]} onPress={() => Linking.openURL(termsUrl)} accessibilityRole="link">
+        Terms of Service
+      </Text>{' '}
+      and{' '}
+      <Text style={[styles.link, { color: theme.colors.textPrimary }]} onPress={() => Linking.openURL(privacyUrl)} accessibilityRole="link">
+        Privacy Policy
+      </Text>
+      .
+    </Text>);
+}
+const styles = StyleSheet.create({
+    text: {
+        textAlign: 'center',
+    },
+    link: {
+        fontWeight: '600',
+        textDecorationLine: 'underline',
+    },
+});

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

@@ -0,0 +1,2 @@
+export declare function ToastHost(): import("react").JSX.Element | null;
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/Toast.tsx"],"names":[],"mappings":"AAcA,wBAAgB,SAAS,uCAwExB"}