@whop/elements-react-native 0.1.0

package/src/ui/primitives.tsx

@@ -0,0 +1,269 @@
+import { type ComponentRef, forwardRef, type ForwardRefExoticComponent, type ReactNode, type RefAttributes, useState } from 'react';
+import {
+	Pressable,
+	StyleSheet,
+	Text,
+	TextInput,
+	type TextInputFocusEvent,
+	type TextInputProps,
+	type TextStyle,
+	View,
+	type ViewStyle,
+} from 'react-native';
+
+import type { PartName } from '../theme/appearance';
+import { alphaStep, type ResolvedTheme, step, useTheme } from '../theme/provider';
+
+/** Merge the theme's per-part override in last, so a consumer's `parts` entry always wins. */
+export function part(theme: ResolvedTheme, name: PartName): ViewStyle & TextStyle {
+	return theme.parts[name] ?? {};
+}
+
+export function useFieldStyles() {
+	const theme = useTheme();
+	const { tokens } = theme;
+	return {
+		theme,
+		container: {
+			gap: tokens.spacing,
+		} satisfies ViewStyle,
+		label: {
+			fontSize: tokens.labelFontSize,
+			fontFamily: tokens.fontFamily,
+			color: step(theme.gray, 11),
+			fontWeight: '500',
+		} satisfies TextStyle,
+		box: (state: { focused: boolean; invalid: boolean; disabled: boolean }): ViewStyle => ({
+			minHeight: tokens.controlHeight,
+			borderRadius: tokens.radius,
+			borderWidth: tokens.borderWidth,
+			borderColor: state.invalid
+				? step(theme.danger, 8)
+				: state.focused
+					? step(theme.accent, 8)
+					: alphaStep(theme.gray, 7),
+			backgroundColor: state.disabled ? alphaStep(theme.gray, 2) : step(theme.gray, 1),
+			paddingHorizontal: tokens.spacing * 3,
+			justifyContent: 'center',
+		}),
+		input: {
+			fontSize: tokens.fontSize,
+			fontFamily: tokens.fontFamily,
+			color: step(theme.gray, 12),
+			paddingVertical: tokens.spacing * 2,
+			// Android draws its own underline and vertical padding on TextInput; both fight the box.
+			paddingHorizontal: 0,
+		} satisfies TextStyle,
+		error: {
+			fontSize: tokens.labelFontSize,
+			fontFamily: tokens.fontFamily,
+			color: step(theme.danger, 11),
+		} satisfies TextStyle,
+		placeholder: alphaStep(theme.gray, 10),
+	};
+}
+
+export interface FieldProps extends Omit<TextInputProps, 'style'> {
+	label?: string;
+	error?: string;
+	disabled?: boolean;
+	trailing?: ReactNode;
+	containerStyle?: ViewStyle;
+	partName?: PartName;
+}
+
+/** React Native's own TextInput instance type is not nameable from a declaration file, so the
+ *  alias is declared here and the component is annotated with it. */
+export type FieldRef = ComponentRef<typeof TextInput>;
+
+export const Field: ForwardRefExoticComponent<FieldProps & RefAttributes<FieldRef>> = forwardRef<
+	FieldRef,
+	FieldProps
+>(function Field(
+	{ label, error, disabled, trailing, containerStyle, partName, onFocus, onBlur, ...input },
+	ref,
+) {
+	const s = useFieldStyles();
+	const [focused, setFocused] = useState(false);
+	const invalid = Boolean(error);
+
+	const handleFocus = (e: TextInputFocusEvent) => {
+		setFocused(true);
+		onFocus?.(e);
+	};
+	const handleBlur = (e: TextInputFocusEvent) => {
+		setFocused(false);
+		onBlur?.(e);
+	};
+
+	return (
+		<View style={[s.container, containerStyle]}>
+			{label ? <Text style={[s.label, part(s.theme, 'whop-Label')]}>{label}</Text> : null}
+			<View
+				style={[
+					s.box({ focused, invalid, disabled: Boolean(disabled) }),
+					trailing ? styles.row : null,
+					part(s.theme, 'whop-Input'),
+					focused ? part(s.theme, 'whop-InputFocused') : null,
+					invalid ? part(s.theme, 'whop-InputInvalid') : null,
+					partName ? part(s.theme, partName) : null,
+				]}
+			>
+				<TextInput
+					ref={ref}
+					editable={!disabled}
+					placeholderTextColor={s.placeholder}
+					onFocus={handleFocus}
+					onBlur={handleBlur}
+					style={[s.input, styles.grow]}
+					{...input}
+				/>
+				{trailing}
+			</View>
+			{error ? <Text style={[s.error, part(s.theme, 'whop-ErrorText')]}>{error}</Text> : null}
+		</View>
+	);
+});
+
+export interface FieldShellProps {
+	label?: string;
+	error?: string;
+	focused?: boolean;
+	disabled?: boolean;
+	trailing?: ReactNode;
+	partName?: PartName;
+	boxStyle?: ViewStyle;
+	containerStyle?: ViewStyle;
+	children: ReactNode;
+}
+
+/**
+ * The label, box, and error row around an input this package does not own — a Basis Theory hosted
+ * field. Shares its chrome with `Field` so an isolated field is visually indistinguishable from a
+ * plain one.
+ */
+export function FieldShell({
+	label,
+	error,
+	focused = false,
+	disabled = false,
+	trailing,
+	partName,
+	boxStyle,
+	containerStyle,
+	children,
+}: FieldShellProps) {
+	const s = useFieldStyles();
+	const invalid = Boolean(error);
+	return (
+		<View style={[s.container, containerStyle]}>
+			{label ? <Text style={[s.label, part(s.theme, 'whop-Label')]}>{label}</Text> : null}
+			<View
+				style={[
+					s.box({ focused, invalid, disabled }),
+					styles.row,
+					part(s.theme, 'whop-Input'),
+					focused ? part(s.theme, 'whop-InputFocused') : null,
+					invalid ? part(s.theme, 'whop-InputInvalid') : null,
+					partName ? part(s.theme, partName) : null,
+					boxStyle,
+				]}
+			>
+				<View style={styles.grow}>{children}</View>
+				{trailing}
+			</View>
+			{error ? <Text style={[s.error, part(s.theme, 'whop-ErrorText')]}>{error}</Text> : null}
+		</View>
+	);
+}
+
+/** The shell every element paints before its first content commit. */
+export function Skeleton({ height, width, style }: { height: number; width?: number | string; style?: ViewStyle }) {
+	const theme = useTheme();
+	return (
+		<View
+			accessibilityElementsHidden
+			importantForAccessibility="no-hide-descendants"
+			style={[
+				{
+					height,
+					width: (width as number | undefined) ?? '100%',
+					borderRadius: theme.tokens.radius,
+					backgroundColor: alphaStep(theme.gray, 3),
+				},
+				part(theme, 'whop-Skeleton'),
+				style,
+			]}
+		/>
+	);
+}
+
+export function FieldSkeleton({ label = true }: { label?: boolean }) {
+	const theme = useTheme();
+	return (
+		<View style={{ gap: theme.tokens.spacing }}>
+			{label ? <Skeleton height={12} width={96} /> : null}
+			<Skeleton height={theme.tokens.controlHeight} />
+		</View>
+	);
+}
+
+/** Form fields sit top-aligned: one field carrying an error message must not vertically re-centre
+ *  the field beside it. */
+export function Row({ children, style }: { children: ReactNode; style?: ViewStyle }) {
+	const theme = useTheme();
+	return (
+		<View style={[styles.row, styles.rowTop, { gap: theme.tokens.spacing * 2 }, style]}>{children}</View>
+	);
+}
+
+export function Stack({ children, style, gap }: { children: ReactNode; style?: ViewStyle; gap?: number }) {
+	const theme = useTheme();
+	return <View style={[{ gap: gap ?? theme.tokens.spacing * 3 }, style]}>{children}</View>;
+}
+
+export function ErrorFace({ message }: { message: string }) {
+	const theme = useTheme();
+	return (
+		<View
+			accessibilityRole="alert"
+			style={{
+				borderRadius: theme.tokens.radius,
+				borderWidth: theme.tokens.borderWidth,
+				borderColor: alphaStep(theme.danger, 6),
+				backgroundColor: alphaStep(theme.danger, 2),
+				padding: theme.tokens.spacing * 3,
+			}}
+		>
+			<Text style={{ fontSize: theme.tokens.fontSize, color: step(theme.danger, 11), fontFamily: theme.tokens.fontFamily }}>
+				{message}
+			</Text>
+		</View>
+	);
+}
+
+export function TextButton({ label, onPress, disabled }: { label: string; onPress: () => void; disabled?: boolean }) {
+	const theme = useTheme();
+	return (
+		<Pressable accessibilityRole="button" disabled={disabled} onPress={onPress} hitSlop={8}>
+			{({ pressed }) => (
+				<Text
+					style={{
+						fontSize: theme.tokens.labelFontSize,
+						fontFamily: theme.tokens.fontFamily,
+						color: step(theme.accent, 11),
+						opacity: disabled ? 0.5 : pressed ? 0.7 : 1,
+					}}
+				>
+					{label}
+				</Text>
+			)}
+		</Pressable>
+	);
+}
+
+const styles = StyleSheet.create({
+	row: { flexDirection: 'row', alignItems: 'center' },
+	rowTop: { alignItems: 'flex-start' },
+	grow: { flex: 1 },
+});

package/src/ui/select.tsx

@@ -0,0 +1,255 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import {
+	Animated,
+	Easing,
+	FlatList,
+	Modal,
+	Pressable,
+	StyleSheet,
+	Text,
+	TextInput,
+	View,
+	useWindowDimensions,
+} from 'react-native';
+
+import { useT } from '../i18n';
+import type { PartName } from '../theme/appearance';
+import { alphaStep, step } from '../theme/provider';
+import { part, useFieldStyles } from './primitives';
+
+/** Keeps the closed offset and the style cap from drifting apart. */
+const SHEET_MAX_HEIGHT_RATIO = 0.7;
+
+export interface SelectOption {
+	value: string;
+	label: string;
+}
+
+export interface SelectProps {
+	label?: string;
+	value: string | undefined;
+	options: SelectOption[];
+	onChange: (value: string) => void;
+	placeholder?: string;
+	error?: string;
+	disabled?: boolean;
+	/** Long lists (241 countries, 200-odd tax registrations) get a filter row. */
+	searchable?: boolean;
+	partName?: PartName;
+	accessibilityLabel?: string;
+}
+
+/**
+ * A picker sheet rather than a platform picker: `@react-native-picker/picker` renders as a spinner
+ * on iOS and a dropdown on Android, which makes the same element look like two different products
+ * and gives the theme nothing to style. One sheet, both platforms.
+ */
+export function Select({
+	label,
+	value,
+	options,
+	onChange,
+	placeholder,
+	error,
+	disabled,
+	searchable,
+	partName,
+	accessibilityLabel,
+}: SelectProps) {
+	const t = useT();
+	const s = useFieldStyles();
+	const theme = s.theme;
+	const { height: windowHeight } = useWindowDimensions();
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState('');
+	const [sheetHeight, setSheetHeight] = useState(0);
+	const progress = useRef(new Animated.Value(0)).current;
+
+	const selected = options.find((option) => option.value === value);
+	const filtered = useMemo(() => {
+		if (!searchable || !query.trim()) return options;
+		const needle = query.trim().toLowerCase();
+		return options.filter((option) => option.label.toLowerCase().includes(needle));
+	}, [options, query, searchable]);
+
+	useEffect(() => {
+		if (!open) return;
+		Animated.timing(progress, {
+			toValue: 1,
+			duration: 260,
+			easing: Easing.out(Easing.cubic),
+			useNativeDriver: true,
+		}).start();
+	}, [open, progress]);
+
+	const close = useCallback(() => {
+		Animated.timing(progress, {
+			toValue: 0,
+			duration: 200,
+			easing: Easing.in(Easing.cubic),
+			useNativeDriver: true,
+		}).start(({ finished }) => {
+			if (!finished) return;
+			setOpen(false);
+			setQuery('');
+		});
+	}, [progress]);
+
+	const onSheetLayout = useCallback((event: LayoutChangeEvent) => {
+		const next = event.nativeEvent.layout.height;
+		setSheetHeight((previous) => (Math.abs(previous - next) < 1 ? previous : next));
+	}, []);
+
+	const translateY = progress.interpolate({
+		inputRange: [0, 1],
+		outputRange: [sheetHeight || windowHeight * SHEET_MAX_HEIGHT_RATIO, 0],
+	});
+
+	return (
+		<View style={s.container}>
+			{label ? <Text style={[s.label, part(theme, 'whop-Label')]}>{label}</Text> : null}
+			<Pressable
+				accessibilityRole="button"
+				accessibilityState={{ disabled: Boolean(disabled), expanded: open }}
+				accessibilityLabel={accessibilityLabel ?? label}
+				disabled={disabled}
+				onPress={() => setOpen(true)}
+				style={[
+					s.box({ focused: open, invalid: Boolean(error), disabled: Boolean(disabled) }),
+					styles.trigger,
+					part(theme, 'whop-Select'),
+					partName ? part(theme, partName) : null,
+				]}
+			>
+				<Text
+					numberOfLines={1}
+					style={[
+						s.input,
+						styles.grow,
+						!selected ? { color: s.placeholder } : null,
+						part(theme, 'whop-SelectValue'),
+					]}
+				>
+					{selected?.label ?? placeholder ?? ''}
+				</Text>
+				<Chevron color={step(theme.gray, 11)} />
+			</Pressable>
+			{error ? <Text style={[s.error, part(theme, 'whop-ErrorText')]}>{error}</Text> : null}
+
+			{/* Not animationType="slide": that translates the whole modal, scrim included, so the dim
+			    slides up with the sheet instead of fading in place. */}
+			<Modal visible={open} transparent animationType="none" onRequestClose={close} statusBarTranslucent>
+				<Pressable style={styles.backdrop} onPress={close} accessibilityLabel={t('Close')}>
+					<Animated.View style={[styles.scrim, { opacity: progress }]} />
+				</Pressable>
+				<Animated.View
+					onLayout={onSheetLayout}
+					style={[
+						styles.sheet,
+						{
+							backgroundColor: step(theme.gray, 1),
+							borderTopLeftRadius: theme.tokens.radius * 2,
+							borderTopRightRadius: theme.tokens.radius * 2,
+							transform: [{ translateY }],
+						},
+						part(theme, 'whop-Sheet'),
+					]}
+				>
+					<View style={[styles.grabber, { backgroundColor: alphaStep(theme.gray, 7) }]} />
+					{label ? (
+						<Text style={[s.label, { paddingHorizontal: theme.tokens.spacing * 4 }]}>{label}</Text>
+					) : null}
+					{searchable ? (
+						<View style={{ paddingHorizontal: theme.tokens.spacing * 4, paddingTop: theme.tokens.spacing * 2 }}>
+							<View style={s.box({ focused: false, invalid: false, disabled: false })}>
+								<TextInput
+									autoFocus
+									value={query}
+									onChangeText={setQuery}
+									placeholder={t('Search')}
+									placeholderTextColor={s.placeholder}
+									style={s.input}
+									autoCorrect={false}
+									autoCapitalize="none"
+								/>
+							</View>
+						</View>
+					) : null}
+					<FlatList
+						data={filtered}
+						keyExtractor={(option) => option.value}
+						keyboardShouldPersistTaps="handled"
+						initialNumToRender={20}
+						style={styles.list}
+						ListEmptyComponent={
+							<Text style={[s.input, { padding: theme.tokens.spacing * 4, color: step(theme.gray, 11) }]}>
+								{t('No matches')}
+							</Text>
+						}
+						renderItem={({ item }) => {
+							const active = item.value === value;
+							return (
+								<Pressable
+									accessibilityRole="button"
+									accessibilityState={{ selected: active }}
+									onPress={() => {
+										onChange(item.value);
+										close();
+									}}
+									style={({ pressed }) => [
+										styles.row,
+										{
+											paddingHorizontal: theme.tokens.spacing * 4,
+											paddingVertical: theme.tokens.spacing * 3,
+											backgroundColor: pressed || active ? alphaStep(theme.gray, 3) : 'transparent',
+										},
+										part(theme, 'whop-SheetRow'),
+									]}
+								>
+									<Text style={[s.input, styles.grow, { paddingVertical: 0 }]}>{item.label}</Text>
+									{active ? <Text style={{ color: step(theme.accent, 11) }}>✓</Text> : null}
+								</Pressable>
+							);
+						}}
+					/>
+				</Animated.View>
+			</Modal>
+		</View>
+	);
+}
+
+/** A stroked chevron rather than the "▾" glyph, which renders as a tiny solid triangle whose size
+ *  and weight are the font's business rather than the theme's. Two borders on a rotated square is
+ *  the whole shape, so it stays crisp at any size without a vector dependency. */
+function Chevron({ color }: { color: string }) {
+	return <View style={[styles.chevron, { borderColor: color }]} />;
+}
+
+const styles = StyleSheet.create({
+	chevron: {
+		width: 7,
+		height: 7,
+		borderRightWidth: 1.5,
+		borderBottomWidth: 1.5,
+		borderRadius: 1,
+		transform: [{ rotate: '45deg' }],
+		marginBottom: 3,
+	},
+	trigger: { flexDirection: 'row', alignItems: 'center' },
+	grow: { flex: 1 },
+	backdrop: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
+	scrim: { flex: 1, backgroundColor: 'rgba(0,0,0,0.4)' },
+	sheet: {
+		position: 'absolute',
+		left: 0,
+		right: 0,
+		bottom: 0,
+		maxHeight: `${SHEET_MAX_HEIGHT_RATIO * 100}%`,
+		paddingTop: 8,
+		paddingBottom: 24,
+	},
+	grabber: { alignSelf: 'center', width: 36, height: 4, borderRadius: 2, marginBottom: 12 },
+	list: { flexGrow: 0 },
+	row: { flexDirection: 'row', alignItems: 'center' },
+});

package/src/ui/suggestions.tsx

@@ -0,0 +1,69 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { AddressSuggestion } from '../core/address/suggest';
+import { alphaStep, step } from '../theme/provider';
+import { part, useFieldStyles } from './primitives';
+
+/**
+ * The street suggestion list, rendered IN FLOW directly beneath the field rather than floating over
+ * the form.
+ *
+ * An anchored overlay would need the package's first measurement code, its first keyboard
+ * avoidance, and an escape from a ScrollView the consumer owns and this SDK cannot configure — and
+ * Android clips absolutely-positioned children that leave their parent's bounds regardless of
+ * elevation. Pushing the fields below it down costs a little polish and removes all of that.
+ */
+export function SuggestionList({
+	suggestions,
+	onPick,
+}: {
+	suggestions: AddressSuggestion[];
+	onPick: (suggestion: AddressSuggestion) => void;
+}) {
+	const s = useFieldStyles();
+	const theme = s.theme;
+	if (suggestions.length === 0) return null;
+
+	return (
+		<View
+			accessibilityRole="list"
+			style={[
+				styles.list,
+				{ borderColor: alphaStep(theme.gray, 6), borderRadius: theme.tokens.radius },
+				part(theme, 'whop-AddressSuggestions'),
+			]}
+		>
+			{suggestions.map((suggestion, index) => (
+				<Pressable
+					key={`${suggestion.label}:${index}`}
+					accessibilityRole="button"
+					accessibilityLabel={suggestion.label}
+					// onPressIn, not onPress: the field's blur fires first on a tap, and anything that hides
+					// this list on blur would unmount the row before its press ever lands.
+					onPressIn={() => onPick(suggestion)}
+					style={({ pressed }) => [
+						styles.row,
+						{
+							paddingHorizontal: theme.tokens.spacing * 3,
+							paddingVertical: theme.tokens.spacing * 3,
+							borderTopWidth: index === 0 ? 0 : StyleSheet.hairlineWidth,
+							borderTopColor: alphaStep(theme.gray, 5),
+							backgroundColor: pressed ? alphaStep(theme.gray, 3) : 'transparent',
+						},
+						part(theme, 'whop-AddressSuggestion'),
+					]}
+				>
+					<Text numberOfLines={1} style={[s.input, styles.label, { color: step(theme.gray, 12) }]}>
+						{suggestion.label}
+					</Text>
+				</Pressable>
+			))}
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	list: { marginTop: 4, borderWidth: StyleSheet.hairlineWidth, overflow: 'hidden' },
+	row: { flexDirection: 'row', alignItems: 'center' },
+	label: { flex: 1, paddingVertical: 0 },
+});

package/src/ui/whop-logo.tsx

@@ -0,0 +1,37 @@
+import { Image } from 'react-native';
+
+import { useTheme } from '../theme/provider';
+
+/**
+ * The Whop wordmark.
+ *
+ * A bitmap at 1x/2x/3x rather than `react-native-svg`, because a required native peer would have to
+ * ship its own `Package.swift` for a Swift-Package-Manager consumer to build at all — and one
+ * unbuildable peer blocks every integrator. An optional peer is not an option either: Metro
+ * resolves `require` statically, so a missing module is a bundling error rather than something a
+ * try/catch can survive.
+ *
+ * The assets are generated from the same paths the web element draws
+ * (frontend/apps/web/src/elements/payments/whop-logo.tsx) by scripts/gen-wordmark.mjs — the mark
+ * keeps Whop's orange in both, and only the wordmark's ink changes with the theme.
+ */
+const ASSETS = {
+	light: require('../../assets/whop-wordmark-light.png'),
+	dark: require('../../assets/whop-wordmark-dark.png'),
+};
+
+/** The source artwork's aspect ratio; height drives width so the mark never distorts. */
+const ASPECT = 119 / 26;
+
+export function WhopLogo({ height = 12 }: { height?: number }) {
+	const theme = useTheme();
+	return (
+		<Image
+			source={theme.mode === 'dark' ? ASSETS.dark : ASSETS.light}
+			style={{ height, width: height * ASPECT }}
+			resizeMode="contain"
+			accessibilityRole="image"
+			accessibilityLabel="Whop"
+		/>
+	);
+}