@whop/elements-react-native 0.1.0

package/lib/typescript/src/theme/appearance.d.ts

@@ -0,0 +1,71 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+import { ACCENT_NAMES, GRAY_NAMES } from './scales.generated.js';
+/**
+ * Copied from frontend/packages/elements-framework/src/builder/appearance/types.ts so an appearance
+ * object written for the web elements types identically here.
+ */
+export type AccentColor = (typeof ACCENT_NAMES)[number];
+export type GrayColor = (typeof GRAY_NAMES)[number] | 'auto';
+export type Theme = {
+    appearance?: 'light' | 'dark';
+    accentColor?: AccentColor;
+    grayColor?: GrayColor;
+    dangerColor?: 'ruby' | 'red' | 'tomato';
+    warningColor?: 'yellow' | 'amber';
+    successColor?: 'green' | 'teal' | 'jade' | 'grass';
+    infoColor?: 'sky' | 'blue';
+};
+/**
+ * The web's `variables` are CSS custom properties, which React Native has no analogue for. `tokens`
+ * is the closed, typed replacement: numbers rather than `"8px"` strings, because there are no units
+ * here.
+ */
+export interface Tokens {
+    radius: number;
+    spacing: number;
+    fontSize: number;
+    labelFontSize: number;
+    borderWidth: number;
+    controlHeight: number;
+    fontFamily: string | undefined;
+}
+/**
+ * The web's `classes` are CSS declarations keyed by `whop-*` part names. `parts` is the same idea
+ * with React Native style objects instead: flat per-part overrides applied after the theme, with no
+ * cascade, no pseudo-classes and no combinators.
+ *
+ * Names follow the web's wherever the two surfaces mean the same thing — `whop-PaymentMethodTile`,
+ * `whop-PaymentMethodDetail`, `whop-PaymentMethodRowSelected`, `whop-CardFieldGroup`. They diverge
+ * only where the surfaces genuinely differ, in three ways:
+ *
+ *   - This surface is MORE granular in places: `whop-CardNumberField`, `whop-CardExpiryField` and
+ *     `whop-CardCvcField` are separately themeable where the web has one `whop-CardFieldInput`.
+ *   - It is generic where the web is per-element: one `whop-Input` / `whop-Label` / `whop-ErrorText`
+ *     serves every field, where the web publishes `whop-PaymentFieldInput`, `whop-EmailInput`,
+ *     `whop-TaxIdInput` and so on. Matching that would mean adding parts, not renaming them.
+ *   - Some parts have no web counterpart at all: `whop-Sheet` and `whop-SheetRow` (the web uses a
+ *     dropdown, not a bottom sheet) and `whop-AddressSuggestions`.
+ *
+ * So a web appearance object does not port across wholesale, and the parts that do not match are
+ * the ones where the web has nothing to match.
+ */
+export type Parts = Partial<Record<PartName, ViewStyle & TextStyle>>;
+export type PartName = 'whop-Root' | 'whop-Label' | 'whop-Input' | 'whop-InputFocused' | 'whop-InputInvalid' | 'whop-ErrorText' | 'whop-HelperText' | 'whop-Select' | 'whop-SelectValue' | 'whop-Sheet' | 'whop-SheetRow' | 'whop-CardNumberField' | 'whop-CardExpiryField' | 'whop-CardCvcField' | 'whop-CardFieldGroup' | 'whop-AddressCountrySelect' | 'whop-AddressSuggestions' | 'whop-AddressSuggestion' | 'whop-AddressRow' | 'whop-PaymentMethodTile' | 'whop-PaymentMethodRowSelected' | 'whop-MethodTileLabel' | 'whop-PaymentMethodDetail' | 'whop-Branding' | 'whop-BrandingLink' | 'whop-Skeleton';
+export type Appearance = {
+    theme?: Theme | null;
+    tokens?: Partial<Tokens> | null;
+    parts?: Parts | null;
+    /** @deprecated CSS custom properties do not exist on React Native. Use `tokens`. */
+    variables?: never;
+    /** @deprecated CSS declarations do not exist on React Native. Use `parts`. */
+    classes?: never;
+};
+/** An unknown value falls back rather than throwing, matching `parse-theme.ts`. */
+export declare function parseTheme(theme?: Theme | null): Theme;
+/**
+ * A silently-ignored style object is the worst failure available here, so a web appearance passed
+ * unchanged is refused by name rather than dropped.
+ */
+export declare function assertNativeAppearance(appearance: Appearance | undefined): void;
+export declare const DEFAULT_TOKENS: Tokens;
+//# sourceMappingURL=appearance.d.ts.map

package/lib/typescript/src/theme/appearance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../../../src/theme/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAoB,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAE7D,MAAM,MAAM,KAAK,GAAG;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;IACxC,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACnD,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,MAAM;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,QAAQ,GACjB,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,YAAY,GACZ,eAAe,GACf,sBAAsB,GACtB,sBAAsB,GACtB,mBAAmB,GACnB,qBAAqB,GACrB,2BAA2B,GAC3B,yBAAyB,GACzB,wBAAwB,GACxB,iBAAiB,GACjB,wBAAwB,GACxB,+BAA+B,GAC/B,sBAAsB,GACtB,0BAA0B,GAC1B,eAAe,GACf,mBAAmB,GACnB,eAAe,CAAC;AAEnB,MAAM,MAAM,UAAU,GAAG;IACxB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,oFAAoF;IACpF,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAYF,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,KAAK,CAatD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,UAAU,GAAG,SAAS,GAAG,IAAI,CAa/E;AAED,eAAO,MAAM,cAAc,EAAE,MAQ5B,CAAC"}

package/lib/typescript/src/theme/provider.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import type { Appearance } from './appearance.js';
+import { type ResolvedTheme } from './resolve.js';
+export declare function ThemeProvider({ appearance, children, }: {
+    appearance?: Appearance | null;
+    children: ReactNode;
+}): ReactNode;
+export declare function useTheme(): ResolvedTheme;
+export { alphaStep, resolveTheme, step } from './resolve.js';
+export type { ResolvedTheme } from './resolve.js';
+//# sourceMappingURL=provider.d.ts.map

package/lib/typescript/src/theme/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/theme/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAc,CAAC;AAC/C,OAAO,EAAE,KAAK,aAAa,EAAgB,MAAM,cAAW,CAAC;AAI7D,wBAAgB,aAAa,CAAC,EAC7B,UAAU,EACV,QAAQ,GACR,EAAE;IACF,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACpB,GAAG,SAAS,CAIZ;AAED,wBAAgB,QAAQ,IAAI,aAAa,CAIxC;AAED,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,cAAW,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,cAAW,CAAC"}

package/lib/typescript/src/theme/resolve.d.ts

@@ -0,0 +1,19 @@
+import { type Appearance, type Parts, type Tokens } from './appearance.js';
+import { type ColorScales } from './scales.generated.js';
+export interface ResolvedTheme {
+    mode: 'light' | 'dark';
+    accent: ColorScales;
+    gray: ColorScales;
+    danger: ColorScales;
+    warning: ColorScales;
+    success: ColorScales;
+    info: ColorScales;
+    tokens: Tokens;
+    parts: Parts;
+}
+export declare function resolveTheme(appearance: Appearance | undefined, system: 'light' | 'dark'): ResolvedTheme;
+/** Radix scales are 1-indexed in their own docs; keeping that here makes call sites read like the
+ *  design tokens they mirror. */
+export declare function step(scale: ColorScales, n: number): string;
+export declare function alphaStep(scale: ColorScales, n: number): string;
+//# sourceMappingURL=resolve.d.ts.map

package/lib/typescript/src/theme/resolve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../../../src/theme/resolve.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,UAAU,EAEf,KAAK,KAAK,EAGV,KAAK,MAAM,EACX,MAAM,iBAAc,CAAC;AACtB,OAAO,EAAiB,KAAK,WAAW,EAAe,MAAM,uBAAoB,CAAC;AAElF,MAAM,WAAW,aAAa;IAC7B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;CACb;AAWD,wBAAgB,YAAY,CAAC,UAAU,EAAE,UAAU,GAAG,SAAS,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,CAsBxG;AAMD;iCACiC;AACjC,wBAAgB,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAE1D;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAE/D"}

package/lib/typescript/src/theme/scales.generated.d.ts

@@ -0,0 +1,18 @@
+export type Scale = readonly [string, string, string, string, string, string, string, string, string, string, string, string];
+export interface ColorScales {
+    solid: Scale;
+    alpha: Scale;
+    /** Text that sits on step 9. */
+    contrast: string;
+}
+export declare const ACCENT_SCALES: Record<string, {
+    light: ColorScales;
+    dark: ColorScales;
+}>;
+export declare const GRAY_SCALES: Record<string, {
+    light: ColorScales;
+    dark: ColorScales;
+}>;
+export declare const ACCENT_NAMES: readonly ["ruby", "blue", "red", "yellow", "green", "gray", "tomato", "crimson", "pink", "plum", "purple", "violet", "iris", "cyan", "teal", "jade", "grass", "brown", "orange", "indigo", "sky", "mint", "amber", "lime", "lemon", "magenta", "gold", "bronze"];
+export declare const GRAY_NAMES: readonly ["gray", "mauve", "slate", "sage", "olive", "sand"];
+//# sourceMappingURL=scales.generated.d.ts.map

package/lib/typescript/src/theme/scales.generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scales.generated.d.ts","sourceRoot":"","sources":["../../../../src/theme/scales.generated.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9H,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,WAAW,CAAA;CAAE,CAiVnF,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,WAAW,CAAA;CAAE,CAyEjF,CAAC;AAEF,eAAO,MAAM,YAAY,kQAAmQ,CAAC;AAC7R,eAAO,MAAM,UAAU,8DAA+D,CAAC"}

package/lib/typescript/src/ui/element-frame.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface ElementFrameProps {
+    style?: StyleProp<ViewStyle>;
+    fallback?: ReactNode;
+    /** The element's own skeleton, shown when no `fallback` was given. */
+    skeleton: ReactNode;
+    /** True once the element's live content has committed. */
+    ready: boolean;
+    error?: {
+        message: string;
+        code?: string;
+    } | null;
+    onReady?: () => void;
+    onError?: (error: {
+        message: string;
+        code?: string;
+    }) => void;
+    children: ReactNode;
+}
+/**
+ * The mount shell every element shares: skeleton, grouped-loading latch, fallback swap, error face.
+ *
+ * A held element stays mounted and laid out at zero opacity rather than being unmounted or
+ * `display: none`d, because the Basis Theory fields measure themselves on mount — a collapsed field
+ * initializes at 0x0 and pops when it is revealed.
+ *
+ * A terminal error settles the ready state too: the element is showing its error face, and a
+ * fallback that kept hiding it would bury the failure forever.
+ */
+export declare function ElementFrame({ style, fallback, skeleton, ready, error, onReady, onError, children, }: ElementFrameProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=element-frame.d.ts.map

package/lib/typescript/src/ui/element-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-frame.d.ts","sourceRoot":"","sources":["../../../../src/ui/element-frame.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhF,MAAM,WAAW,iBAAiB;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sEAAsE;IACtE,QAAQ,EAAE,SAAS,CAAC;IACpB,0DAA0D;IAC1D,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,GACR,EAAE,iBAAiB,2CAmDnB"}

package/lib/typescript/src/ui/payment-method-icon.d.ts

@@ -0,0 +1,21 @@
+import { type ImageStyle, type StyleProp } from 'react-native';
+import type { PaymentMethodIcons } from '../api/types.js';
+/**
+ * A method's brand art.
+ *
+ * The API serves each shape as an SVG plus a 1x/2x/4x raster set, and this draws the RASTERS: the
+ * SVG would need a native peer, and every candidate ships CocoaPods-only, which is the one thing
+ * this package cannot take on. Handing `Image` all three densities lets it pick the sharpest file
+ * for the box it is drawn in.
+ *
+ * Each entry carries `width` and `height`, not `scale`: those are what the multi-source picker
+ * measures against, and Android's `RCTImageView` throws `null width` on an entry without them.
+ */
+export declare function PaymentMethodIcon({ icons, shape, size, style, }: {
+    icons: PaymentMethodIcons | null | undefined;
+    shape?: 'square' | 'card';
+    /** Rendered height; width follows the shape's ratio. */
+    size?: number;
+    style?: StyleProp<ImageStyle>;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=payment-method-icon.d.ts.map

package/lib/typescript/src/ui/payment-method-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-method-icon.d.ts","sourceRoot":"","sources":["../../../../src/ui/payment-method-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAc,CAAC;AAOvD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,EACjC,KAAK,EACL,KAAgB,EAChB,IAAS,EACT,KAAK,GACL,EAAE;IACF,KAAK,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7C,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC1B,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CAC9B,kDAuBA"}

package/lib/typescript/src/ui/primitives.d.ts

@@ -0,0 +1,94 @@
+import { type ComponentRef, type ForwardRefExoticComponent, type ReactNode, type RefAttributes } from 'react';
+import { TextInput, type TextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+import type { PartName } from '../theme/appearance.js';
+import { type ResolvedTheme } from '../theme/provider.js';
+/** Merge the theme's per-part override in last, so a consumer's `parts` entry always wins. */
+export declare function part(theme: ResolvedTheme, name: PartName): ViewStyle & TextStyle;
+export declare function useFieldStyles(): {
+    theme: ResolvedTheme;
+    container: {
+        gap: number;
+    };
+    label: {
+        fontSize: number;
+        fontFamily: string | undefined;
+        color: string;
+        fontWeight: "500";
+    };
+    box: (state: {
+        focused: boolean;
+        invalid: boolean;
+        disabled: boolean;
+    }) => ViewStyle;
+    input: {
+        fontSize: number;
+        fontFamily: string | undefined;
+        color: string;
+        paddingVertical: number;
+        paddingHorizontal: number;
+    };
+    error: {
+        fontSize: number;
+        fontFamily: string | undefined;
+        color: string;
+    };
+    placeholder: string;
+};
+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 declare const Field: ForwardRefExoticComponent<FieldProps & RefAttributes<FieldRef>>;
+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 declare function FieldShell({ label, error, focused, disabled, trailing, partName, boxStyle, containerStyle, children, }: FieldShellProps): import("react/jsx-runtime").JSX.Element;
+/** The shell every element paints before its first content commit. */
+export declare function Skeleton({ height, width, style }: {
+    height: number;
+    width?: number | string;
+    style?: ViewStyle;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FieldSkeleton({ label }: {
+    label?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/** Form fields sit top-aligned: one field carrying an error message must not vertically re-centre
+ *  the field beside it. */
+export declare function Row({ children, style }: {
+    children: ReactNode;
+    style?: ViewStyle;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Stack({ children, style, gap }: {
+    children: ReactNode;
+    style?: ViewStyle;
+    gap?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorFace({ message }: {
+    message: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TextButton({ label, onPress, disabled }: {
+    label: string;
+    onPress: () => void;
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=primitives.d.ts.map

package/lib/typescript/src/ui/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../../src/ui/primitives.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/ui/select.d.ts

@@ -0,0 +1,25 @@
+import type { PartName } from '../theme/appearance.js';
+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 declare function Select({ label, value, options, onChange, placeholder, error, disabled, searchable, partName, accessibilityLabel, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=select.d.ts.map

package/lib/typescript/src/ui/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/ui/select.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAqB,CAAC;AAOpD,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACtB,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,kBAAkB,GAClB,EAAE,WAAW,2CAiKb"}

package/lib/typescript/src/ui/suggestions.d.ts

@@ -0,0 +1,15 @@
+import type { AddressSuggestion } from '../core/address/suggest.js';
+/**
+ * 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 declare function SuggestionList({ suggestions, onPick, }: {
+    suggestions: AddressSuggestion[];
+    onPick: (suggestion: AddressSuggestion) => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=suggestions.d.ts.map

package/lib/typescript/src/ui/suggestions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestions.d.ts","sourceRoot":"","sources":["../../../../src/ui/suggestions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAAyB,CAAC;AAIjE;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC9B,WAAW,EACX,MAAM,GACN,EAAE;IACF,WAAW,EAAE,iBAAiB,EAAE,CAAC;IACjC,MAAM,EAAE,CAAC,UAAU,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChD,kDAyCA"}

package/lib/typescript/src/ui/whop-logo.d.ts

@@ -0,0 +1,4 @@
+export declare function WhopLogo({ height }: {
+    height?: number;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=whop-logo.d.ts.map

package/lib/typescript/src/ui/whop-logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"whop-logo.d.ts","sourceRoot":"","sources":["../../../../src/ui/whop-logo.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,QAAQ,CAAC,EAAE,MAAW,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,2CAW5D"}

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@whop/elements-react-native",
+  "version": "0.1.0",
+  "description": "Whop Elements — native React Native components for collecting payments.",
+  "keywords": [
+    "checkout",
+    "elements",
+    "payments",
+    "react-native",
+    "whop"
+  ],
+  "homepage": "https://docs.whop.com/elements/latest",
+  "bugs": "https://github.com/whopio/elements/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/whopio/elements.git",
+    "directory": "frontend/packages/elements-react-native"
+  },
+  "main": "./lib/module/index.js",
+  "module": "./lib/module/index.js",
+  "react-native": "./src/index.ts",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "react-native": "./src/index.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "src",
+    "assets",
+    "ios",
+    "android",
+    "scripts",
+    "!android/build",
+    "!**/__tests__",
+    "!**/*.test.ts",
+    "!**/*.test.tsx"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "check-swift": "bash scripts/check-swift.sh",
+    "check-types": "tsc --noEmit",
+    "ci:lint": "node scripts/mirror.mjs --validate && oxlint -f github .",
+    "ci:typecheck": "tsc --noEmit",
+    "clean": "rm -rf lib ios/generated android/build",
+    "country-names": "node scripts/gen-country-names.mjs",
+    "example:android": "cd example && pnpm run android",
+    "example:install": "cd example && pnpm install",
+    "example:ios": "cd example && pnpm run ios",
+    "format": "oxfmt",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint --fix --fix-suggestions && oxfmt",
+    "mirror": "node scripts/mirror.mjs",
+    "mirror:validate": "node scripts/mirror.mjs --validate",
+    "prepare": "node scripts/codegen-shims.mjs && bob build",
+    "shims": "node scripts/codegen-shims.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "theme": "node scripts/gen-theme.mjs",
+    "wordmark": "node scripts/gen-wordmark.mjs"
+  },
+  "dependencies": {
+    "@basis-theory/react-native-elements": "4.0.3",
+    "@noble/hashes": "^1.8.0"
+  },
+  "peerDependencies": {
+    "react": ">=19.2.3",
+    "react-native": ">=0.87.0"
+  },
+  "devDependencies": {
+    "@react-native/typescript-config": "0.87.0",
+    "@types/react": "19.1.5",
+    "frosted-ui": "0.0.1-canary.158",
+    "oxlint": "^1.0.0",
+    "react": "19.2.3",
+    "react-native": "0.87.0",
+    "react-native-builder-bob": "0.43.0",
+    "typescript": "^6.0.0",
+    "vitest": "^3.0.0"
+  },
+  "codegenConfig": {
+    "name": "WhopElementsSpec",
+    "type": "all",
+    "jsSrcsDir": "src/specs",
+    "android": {
+      "javaPackageName": "com.whop.elements"
+    },
+    "ios": {
+      "componentProvider": {
+        "WhopPayButton": "WhopPayButtonComponentView"
+      }
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.12.4"
+}

package/scripts/check-swift.sh

@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+# Typechecks the Swift against the real iOS SDK without building an app.
+#
+# A FAST PRE-FILTER, not a substitute for the build: SwiftPM compiles these targets with settings
+# this invocation does not fully reproduce, and it has already let a strict-concurrency error
+# through. Run the example app before trusting a native change.
+#
+# Nothing in ios/Sources imports React, so the whole implementation typechecks standalone — which
+# means a wrong PassKit or AuthenticationServices symbol surfaces here in seconds instead of
+# one-error-at-a-time inside an Xcode build.
+set -euo pipefail
+
+sdk=$(xcrun --sdk iphonesimulator --show-sdk-path)
+root=$(cd "$(dirname "$0")/.." && pwd)
+
+# -swift-version 6 is not optional: Package.swift declares swift-tools-version 6.0, which puts
+# these targets in the Swift 6 language mode with strict concurrency. Checking without it passes
+# code that the real build rejects.
+xcrun --sdk iphonesimulator swiftc -typecheck \
+  -target arm64-apple-ios15.0-simulator \
+  -sdk "$sdk" \
+  -swift-version 6 \
+  -strict-concurrency=complete \
+  -warnings-as-errors \
+  "$root"/ios/Sources/ElementsReactNative/*.swift
+
+echo "whop elements: Swift 6 typechecks against $(basename "$sdk")"