@jazadev/react-native 0.1.0

package/dist/index.js

@@ -0,0 +1,1987 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/provider/JazaProvider.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect4,
+  useMemo as useMemo4,
+  useRef as useRef5,
+  useState as useState4
+} from "react";
+import { Appearance } from "react-native";
+
+// src/api/errors.ts
+var JazaSdkError = class _JazaSdkError extends Error {
+  constructor(statusCode, message, raw) {
+    super(message);
+    __publicField(this, "statusCode");
+    __publicField(this, "code");
+    __publicField(this, "raw");
+    this.name = "JazaSdkError";
+    this.statusCode = statusCode;
+    this.code = `HTTP_${statusCode}`;
+    this.raw = raw;
+  }
+  static fromResponse(status, body) {
+    let message = `Request failed (${status})`;
+    if (typeof body === "object" && body !== null) {
+      const m = body.message;
+      if (typeof m === "string") {
+        message = m;
+      } else if (typeof m === "object" && m?.message) {
+        message = m.message;
+      }
+    }
+    return new _JazaSdkError(status, message, body);
+  }
+};
+
+// src/version.ts
+var VERSION = "0.1.0";
+var DEFAULT_API_BASE_URL = "https://api.jaza.dev";
+
+// src/api/publicClient.ts
+var PublicClient = class {
+  constructor(config) {
+    __publicField(this, "apiBaseUrl");
+    __publicField(this, "publishableKey");
+    __publicField(this, "topUpToken", null);
+    this.apiBaseUrl = (config.apiBaseUrl ?? DEFAULT_API_BASE_URL).replace(
+      /\/$/,
+      ""
+    );
+    this.publishableKey = config.publishableKey;
+  }
+  setTopUpToken(token) {
+    this.topUpToken = token;
+  }
+  async listCountries() {
+    return this.request("GET", "/v1/catalog/countries");
+  }
+  async listBundles() {
+    return this.authedRequest("GET", "/v1/public/bundles");
+  }
+  async predictProvider(phoneNumber) {
+    return this.authedRequest(
+      "POST",
+      "/v1/public/payments/predict",
+      { phoneNumber }
+    );
+  }
+  async quotePayment(body) {
+    return this.authedRequest(
+      "POST",
+      "/v1/public/payments/quote",
+      body
+    );
+  }
+  async createDeposit(body) {
+    return this.authedRequest(
+      "POST",
+      "/v1/public/payments/deposits",
+      body
+    );
+  }
+  async getDeposit(paymentRequestId) {
+    return this.authedRequest(
+      "GET",
+      `/v1/public/payments/deposits/${paymentRequestId}`
+    );
+  }
+  async authedRequest(method, path, body) {
+    if (!this.topUpToken) {
+      throw new JazaSdkError(401, "Top-up session token is not set");
+    }
+    return this.request(method, path, body, this.topUpToken);
+  }
+  async request(method, path, body, token) {
+    const headers = {
+      Accept: "application/json",
+      "User-Agent": `@jazadev/react-native/${VERSION}`
+    };
+    if (token) {
+      headers.Authorization = `Bearer ${token}`;
+      headers["X-Jaza-Public-Key"] = this.publishableKey;
+    }
+    if (body !== void 0) {
+      headers["Content-Type"] = "application/json";
+    }
+    const response = await fetch(`${this.apiBaseUrl}${path}`, {
+      method,
+      headers,
+      body: body === void 0 ? void 0 : JSON.stringify(body)
+    });
+    const text = await response.text();
+    let parsed = null;
+    if (text) {
+      try {
+        parsed = JSON.parse(text);
+      } catch {
+        parsed = { message: text };
+      }
+    }
+    if (!response.ok) {
+      throw JazaSdkError.fromResponse(response.status, parsed);
+    }
+    return parsed;
+  }
+};
+
+// src/data/dialCodes.ts
+var DIAL_CODES = {
+  BJ: "229",
+  BF: "226",
+  CM: "237",
+  CI: "225",
+  CD: "243",
+  CG: "242",
+  ET: "251",
+  GA: "241",
+  GH: "233",
+  KE: "254",
+  MW: "265",
+  MZ: "258",
+  NG: "234",
+  RW: "250",
+  SN: "221",
+  SL: "232",
+  TZ: "255",
+  UG: "256",
+  ZM: "260"
+};
+function iso2ToFlag(iso2) {
+  const code = iso2.toUpperCase();
+  if (code.length !== 2) return "";
+  const points = [...code].map((c) => 127462 - 65 + c.charCodeAt(0));
+  return String.fromCodePoint(...points);
+}
+function getDialCode(iso2) {
+  return DIAL_CODES[iso2.toUpperCase()];
+}
+
+// src/utils/helpers.ts
+function enrichCountries(countries) {
+  return countries.filter((c) => c.isActive && getDialCode(c.iso2)).map((c) => {
+    const dialCode = getDialCode(c.iso2);
+    const currencies = c.currencies?.map((cc) => cc.currency).filter((cur) => cur?.isActive).map((cur) => ({
+      code: cur.code,
+      decimals: cur.decimals,
+      name: cur.name
+    })) ?? [];
+    return {
+      id: c.id,
+      name: c.name,
+      iso2: c.iso2,
+      iso3: c.iso3,
+      dialCode,
+      flag: iso2ToFlag(c.iso2),
+      currencies
+    };
+  }).filter((c) => c.currencies.length > 0).sort((a, b) => a.name.localeCompare(b.name));
+}
+function buildE164(dialCode, nationalNumber) {
+  const digits = nationalNumber.replace(/\D/g, "");
+  const code = dialCode.replace(/\D/g, "");
+  if (digits.length < 6) {
+    throw new Error("Phone number too short");
+  }
+  return `${code}${digits}`;
+}
+function pickDefaultCurrencyCode(codes) {
+  if (codes.length === 0) {
+    throw new Error("No currencies available");
+  }
+  const local = codes.find((c) => c.toUpperCase() !== "USD");
+  return (local ?? codes[0]).toUpperCase();
+}
+function isDepositTerminal(status) {
+  return status === "COMPLETED" || status === "FAILED" || status === "EXPIRED" || status === "CANCELLED";
+}
+function formatCredits(n) {
+  return n.toLocaleString("en-US");
+}
+function formatUsd(priceUsd) {
+  const n = Number(priceUsd);
+  if (Number.isNaN(n)) return priceUsd;
+  return formatCurrencyAmount(n, "USD", 2);
+}
+function resolveCurrencyFractionDigits(currencyCode) {
+  return currencyCode.toUpperCase() === "USD" ? 2 : 0;
+}
+function formatCurrencyAmount(amount, currencyCode, _decimals) {
+  const n = typeof amount === "string" ? Number(amount) : amount;
+  const code = currencyCode.toUpperCase();
+  if (Number.isNaN(n)) return `${amount} ${code}`;
+  const fractionDigits = resolveCurrencyFractionDigits(code);
+  try {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: code,
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits
+    }).format(n);
+  } catch {
+    const grouped = n.toLocaleString("en-US", {
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: fractionDigits
+    });
+    return `${grouped} ${code}`;
+  }
+}
+function formatLocalAmount(amount, currencyCode, decimals) {
+  return formatCurrencyAmount(amount, currencyCode, decimals);
+}
+
+// src/theme/tokens.ts
+var spacing = { xs: 4, sm: 8, md: 16, lg: 24, xl: 40, gutter: 20 };
+var radius = { md: 8, lg: 12, xl: 16, full: 9999 };
+var darkTheme = {
+  mode: "dark",
+  spacing,
+  radius,
+  colors: {
+    background: "#121414",
+    surface: "#121414",
+    surfaceContainer: "#1e2020",
+    surfaceContainerLow: "#1a1c1c",
+    surfaceContainerHigh: "#282a2b",
+    surfaceContainerHighest: "#333535",
+    surfaceVariant: "#333535",
+    onSurface: "#e2e2e2",
+    onSurfaceVariant: "#bacac5",
+    primary: "#57f1db",
+    onPrimary: "#003731",
+    primaryContainer: "#2dd4bf",
+    onPrimaryContainer: "#00574d",
+    secondaryContainer: "#00bd85",
+    onSecondaryContainer: "#00452e",
+    outline: "#859490",
+    outlineVariant: "#3c4a46",
+    error: "#ffb4ab",
+    success: "#45dfa4",
+    overlay: "rgba(12,15,15,0.8)",
+    bundleBorder: "#262626",
+    bundleBorderSelected: "#2dd4bf",
+    bundleBg: "#111111"
+  }
+};
+var lightTheme = {
+  ...darkTheme,
+  mode: "light"
+};
+function resolveTheme(preference, systemScheme) {
+  if (preference === "system") {
+    return systemScheme === "dark" ? darkTheme : lightTheme;
+  }
+  return preference === "dark" ? darkTheme : lightTheme;
+}
+
+// src/provider/JazaContext.tsx
+import { createContext, useContext } from "react";
+var JazaContext = createContext(null);
+function useJaza() {
+  const ctx = useContext(JazaContext);
+  if (!ctx) {
+    throw new Error("useJaza must be used within JazaProvider");
+  }
+  return ctx;
+}
+
+// src/sheet/TopUpBottomSheet.tsx
+import { useCallback, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { Modal as Modal3, StyleSheet as StyleSheet9, View as View8 } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import BottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetScrollView
+} from "@gorhom/bottom-sheet";
+import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
+
+// src/sheet/steps/OfferStep.tsx
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View
+} from "react-native";
+
+// src/components/Icon.tsx
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { jsx } from "react/jsx-runtime";
+function Icon({ name, size = 24, color }) {
+  return /* @__PURE__ */ jsx(MaterialIcons, { name, size, color });
+}
+
+// src/sheet/steps/OfferStep.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function OfferStep() {
+  const {
+    theme,
+    balance,
+    balanceLoading,
+    bundles,
+    bundlesLoading,
+    bundlesError,
+    selectedBundle,
+    setSelectedBundle,
+    goToPayment
+  } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const styles = StyleSheet.create({
+    balanceCard: {
+      backgroundColor: colors.surfaceContainer,
+      borderRadius: radius2.xl,
+      padding: spacing2.md,
+      marginBottom: spacing2.lg
+    },
+    balanceLabel: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14,
+      marginBottom: spacing2.xs
+    },
+    balanceRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.sm
+    },
+    balanceValue: {
+      color: colors.onSurface,
+      fontSize: 48,
+      fontWeight: "700"
+    },
+    title: {
+      color: colors.onSurface,
+      fontSize: 24,
+      fontWeight: "600",
+      marginBottom: spacing2.md
+    },
+    bundle: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: spacing2.md,
+      borderRadius: radius2.xl,
+      backgroundColor: colors.bundleBg,
+      borderWidth: 1,
+      borderColor: colors.bundleBorder,
+      marginBottom: spacing2.sm
+    },
+    bundleSelected: {
+      borderColor: colors.bundleBorderSelected,
+      borderWidth: 2
+    },
+    bundleLabel: {
+      color: colors.onSurface,
+      fontSize: 18,
+      fontWeight: "600"
+    },
+    bundleLabelSelected: {
+      color: colors.primaryContainer
+    },
+    bundleSub: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14,
+      marginTop: 2
+    },
+    bundleCredits: {
+      color: colors.onSurface,
+      fontSize: 18,
+      fontWeight: "600"
+    },
+    bundlePrice: {
+      color: colors.onSurfaceVariant,
+      fontSize: 12,
+      fontFamily: "monospace"
+    },
+    cta: {
+      backgroundColor: colors.primaryContainer,
+      borderRadius: radius2.full,
+      paddingVertical: spacing2.md,
+      marginTop: spacing2.lg,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: spacing2.sm
+    },
+    ctaText: {
+      color: colors.onPrimaryContainer,
+      fontSize: 16,
+      fontWeight: "600"
+    },
+    loading: { padding: spacing2.xl, alignItems: "center" },
+    error: {
+      color: colors.error,
+      fontSize: 14,
+      marginBottom: spacing2.md,
+      lineHeight: 20
+    }
+  });
+  const renderBundle = (bundle) => {
+    const selected = selectedBundle?.id === bundle.id;
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        style: [styles.bundle, selected && styles.bundleSelected],
+        onPress: () => setSelectedBundle(bundle),
+        children: [
+          /* @__PURE__ */ jsxs(View, { children: [
+            /* @__PURE__ */ jsx2(
+              Text,
+              {
+                style: [styles.bundleLabel, selected && styles.bundleLabelSelected],
+                children: bundle.label ?? "Bundle"
+              }
+            ),
+            /* @__PURE__ */ jsxs(Text, { style: styles.bundleSub, children: [
+              formatCredits(bundle.credits),
+              " credits"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(View, { style: { alignItems: "flex-end" }, children: [
+            /* @__PURE__ */ jsx2(Text, { style: styles.bundleCredits, children: formatCredits(bundle.credits) }),
+            /* @__PURE__ */ jsxs(Text, { style: styles.bundlePrice, children: [
+              formatUsd(bundle.priceUsd),
+              " USD"
+            ] })
+          ] })
+        ]
+      },
+      bundle.id
+    );
+  };
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.balanceCard, children: [
+      /* @__PURE__ */ jsx2(Text, { style: styles.balanceLabel, children: "Current Balance" }),
+      /* @__PURE__ */ jsxs(View, { style: styles.balanceRow, children: [
+        /* @__PURE__ */ jsx2(Icon, { name: "bolt", size: 28, color: colors.primary }),
+        balanceLoading && balance === null ? /* @__PURE__ */ jsx2(ActivityIndicator, { color: colors.primary }) : /* @__PURE__ */ jsx2(Text, { style: styles.balanceValue, children: balance !== null ? formatCredits(balance) : "\u2014" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(Text, { style: styles.title, children: "Top-up Credits" }),
+    bundlesError ? /* @__PURE__ */ jsx2(Text, { style: styles.error, children: bundlesError }) : null,
+    bundlesLoading ? /* @__PURE__ */ jsx2(View, { style: styles.loading, children: /* @__PURE__ */ jsx2(ActivityIndicator, { color: colors.primary }) }) : bundles.map(renderBundle),
+    !bundlesLoading && !bundlesError && bundles.length === 0 ? /* @__PURE__ */ jsx2(Text, { style: styles.error, children: "No active bundles for this app." }) : null,
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        style: styles.cta,
+        onPress: goToPayment,
+        disabled: !selectedBundle,
+        children: [
+          /* @__PURE__ */ jsxs(Text, { style: styles.ctaText, children: [
+            "Continue with ",
+            selectedBundle?.label ?? "bundle"
+          ] }),
+          /* @__PURE__ */ jsx2(Icon, { name: "arrow-forward", size: 20, color: colors.onPrimaryContainer })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/sheet/steps/PaymentStep.tsx
+import { useMemo as useMemo2, useState as useState3 } from "react";
+import {
+  ActivityIndicator as ActivityIndicator2,
+  Pressable as Pressable5,
+  StyleSheet as StyleSheet6,
+  Text as Text5,
+  View as View5
+} from "react-native";
+
+// src/components/PhoneDigitInput.tsx
+import { useRef, useState } from "react";
+import { Pressable as Pressable2, StyleSheet as StyleSheet2, Text as Text2, View as View2 } from "react-native";
+import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var MAX_DIGITS = 10;
+function PhoneDigitInput({
+  theme,
+  value,
+  onChangeText,
+  dialPressable,
+  trailing
+}) {
+  const { colors, spacing: spacing2 } = theme;
+  const inputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const digits = value.replace(/\D/g, "").slice(0, MAX_DIGITS);
+  const activeIndex = digits.length >= MAX_DIGITS ? MAX_DIGITS - 1 : digits.length;
+  const styles = StyleSheet2.create({
+    label: {
+      color: colors.onSurfaceVariant,
+      fontSize: 12,
+      letterSpacing: 0.5,
+      marginBottom: spacing2.sm,
+      textTransform: "uppercase"
+    },
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      width: "100%",
+      gap: spacing2.sm
+    },
+    slots: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      minHeight: 40
+    },
+    slot: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    slotChar: {
+      fontSize: 22,
+      fontWeight: "600",
+      color: colors.onSurfaceVariant,
+      fontVariant: ["tabular-nums"]
+    },
+    slotCharFocused: {
+      color: colors.primaryContainer
+    },
+    hiddenInput: {
+      position: "absolute",
+      opacity: 0,
+      height: 1,
+      width: 1
+    }
+  });
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs2(View2, { children: [
+    /* @__PURE__ */ jsx3(Text2, { style: styles.label, children: "Phone Number" }),
+    /* @__PURE__ */ jsxs2(Pressable2, { style: styles.row, onPress: focusInput, children: [
+      dialPressable,
+      /* @__PURE__ */ jsx3(View2, { style: styles.slots, pointerEvents: "none", children: Array.from({ length: MAX_DIGITS }, (_, i) => {
+        const char = digits[i];
+        const isFocused = focused && i === activeIndex;
+        return /* @__PURE__ */ jsx3(View2, { style: styles.slot, children: /* @__PURE__ */ jsx3(
+          Text2,
+          {
+            style: [
+              styles.slotChar,
+              isFocused ? styles.slotCharFocused : null
+            ],
+            children: char ?? "_"
+          }
+        ) }, i);
+      }) }),
+      trailing,
+      /* @__PURE__ */ jsx3(
+        BottomSheetTextInput,
+        {
+          ref: inputRef,
+          style: styles.hiddenInput,
+          value: digits,
+          onChangeText: (text) => onChangeText(text.replace(/\D/g, "").slice(0, MAX_DIGITS)),
+          onFocus: () => setFocused(true),
+          onBlur: () => setFocused(false),
+          keyboardType: "phone-pad",
+          autoComplete: "tel",
+          textContentType: "telephoneNumber",
+          maxLength: MAX_DIGITS,
+          caretHidden: true
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/sheet/CountryPickerSheet.tsx
+import { useEffect, useMemo, useState as useState2 } from "react";
+import {
+  FlatList,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable as Pressable3,
+  StyleSheet as StyleSheet4,
+  Text as Text3,
+  TextInput,
+  View as View3
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+// src/theme/listStyles.ts
+import { StyleSheet as StyleSheet3 } from "react-native";
+function createSelectableRowStyles(theme) {
+  const { colors, spacing: spacing2 } = theme;
+  return StyleSheet3.create({
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingVertical: spacing2.md,
+      borderBottomWidth: StyleSheet3.hairlineWidth,
+      borderBottomColor: colors.outlineVariant,
+      gap: spacing2.md
+    },
+    rowSelected: {
+      borderBottomColor: colors.primaryContainer
+    },
+    label: {
+      color: colors.onSurface,
+      fontSize: 16,
+      fontWeight: "500",
+      flexShrink: 1
+    },
+    labelSelected: {
+      color: colors.primaryContainer,
+      fontWeight: "600"
+    },
+    sublabel: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14
+    }
+  });
+}
+
+// src/sheet/CountryPickerSheet.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function CountryPickerSheet({
+  visible,
+  onClose
+}) {
+  const { theme, countries, selectedCountry, setSelectedCountry } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const insets = useSafeAreaInsets();
+  const [query, setQuery] = useState2("");
+  const rowStyles = createSelectableRowStyles(theme);
+  useEffect(() => {
+    if (!visible) setQuery("");
+  }, [visible]);
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return countries;
+    return countries.filter(
+      (c) => c.name.toLowerCase().includes(q) || c.iso2.toLowerCase().includes(q) || c.dialCode.includes(q)
+    );
+  }, [countries, query]);
+  const styles = StyleSheet4.create({
+    root: {
+      flex: 1,
+      justifyContent: "flex-end",
+      backgroundColor: colors.overlay
+    },
+    sheet: {
+      backgroundColor: colors.surface,
+      borderTopLeftRadius: radius2.xl,
+      borderTopRightRadius: radius2.xl,
+      paddingHorizontal: spacing2.gutter,
+      paddingTop: spacing2.md,
+      paddingBottom: Math.max(insets.bottom, spacing2.md),
+      maxHeight: "85%",
+      minHeight: 320
+    },
+    handle: {
+      width: 48,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: colors.surfaceContainerHighest,
+      alignSelf: "center",
+      marginBottom: spacing2.md
+    },
+    search: {
+      backgroundColor: colors.surfaceContainerHigh,
+      borderRadius: radius2.lg,
+      paddingHorizontal: spacing2.md,
+      minHeight: 48,
+      fontSize: 16,
+      lineHeight: 22,
+      color: colors.onSurface,
+      marginBottom: spacing2.md
+    },
+    list: {
+      flexGrow: 1,
+      flexShrink: 1
+    },
+    nameRow: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.md,
+      minWidth: 0
+    },
+    flag: {
+      fontSize: 24,
+      flexShrink: 0
+    },
+    dial: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14,
+      fontFamily: "monospace",
+      flexShrink: 0,
+      marginLeft: spacing2.sm
+    },
+    empty: {
+      color: colors.onSurfaceVariant,
+      textAlign: "center",
+      paddingVertical: spacing2.lg
+    }
+  });
+  return /* @__PURE__ */ jsx4(
+    Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs3(
+        KeyboardAvoidingView,
+        {
+          style: styles.root,
+          behavior: Platform.OS === "ios" ? "padding" : void 0,
+          children: [
+            /* @__PURE__ */ jsx4(Pressable3, { style: StyleSheet4.absoluteFill, onPress: onClose }),
+            /* @__PURE__ */ jsxs3(View3, { style: styles.sheet, children: [
+              /* @__PURE__ */ jsx4(View3, { style: styles.handle }),
+              /* @__PURE__ */ jsx4(
+                TextInput,
+                {
+                  style: styles.search,
+                  placeholder: "Search country",
+                  placeholderTextColor: colors.onSurfaceVariant,
+                  value: query,
+                  onChangeText: setQuery,
+                  autoCorrect: false,
+                  autoCapitalize: "none",
+                  clearButtonMode: "while-editing",
+                  returnKeyType: "search"
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                FlatList,
+                {
+                  style: styles.list,
+                  data: filtered,
+                  keyExtractor: (item) => item.id,
+                  keyboardShouldPersistTaps: "handled",
+                  keyboardDismissMode: "on-drag",
+                  renderItem: ({ item }) => {
+                    const selected = selectedCountry?.id === item.id;
+                    return /* @__PURE__ */ jsxs3(
+                      Pressable3,
+                      {
+                        style: [rowStyles.row, selected && rowStyles.rowSelected],
+                        onPress: () => {
+                          setSelectedCountry(item);
+                          onClose();
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs3(View3, { style: styles.nameRow, children: [
+                            /* @__PURE__ */ jsx4(Text3, { style: styles.flag, children: item.flag }),
+                            /* @__PURE__ */ jsx4(
+                              Text3,
+                              {
+                                style: [
+                                  rowStyles.label,
+                                  selected && rowStyles.labelSelected
+                                ],
+                                numberOfLines: 1,
+                                ellipsizeMode: "tail",
+                                children: item.name
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs3(Text3, { style: styles.dial, children: [
+                            "+",
+                            item.dialCode
+                          ] })
+                        ]
+                      }
+                    );
+                  },
+                  ListEmptyComponent: /* @__PURE__ */ jsx4(Text3, { style: styles.empty, children: "No countries match" })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/sheet/CurrencyPickerSheet.tsx
+import {
+  FlatList as FlatList2,
+  Modal as Modal2,
+  Pressable as Pressable4,
+  StyleSheet as StyleSheet5,
+  Text as Text4,
+  View as View4
+} from "react-native";
+import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function CurrencyPickerSheet({
+  visible,
+  currencies,
+  selectedCode,
+  onSelect,
+  onClose
+}) {
+  const { theme } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const insets = useSafeAreaInsets2();
+  const rowStyles = createSelectableRowStyles(theme);
+  const styles = StyleSheet5.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: colors.overlay,
+      justifyContent: "flex-end"
+    },
+    sheet: {
+      backgroundColor: colors.surface,
+      borderTopLeftRadius: radius2.xl,
+      borderTopRightRadius: radius2.xl,
+      maxHeight: "50%",
+      paddingHorizontal: spacing2.gutter,
+      paddingTop: spacing2.md,
+      paddingBottom: insets.bottom + spacing2.md
+    },
+    handle: {
+      width: 48,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: colors.surfaceContainerHighest,
+      alignSelf: "center",
+      marginBottom: spacing2.md
+    },
+    title: {
+      color: colors.onSurface,
+      fontSize: 18,
+      fontWeight: "600",
+      marginBottom: spacing2.md
+    }
+  });
+  return /* @__PURE__ */ jsx5(
+    Modal2,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsx5(Pressable4, { style: styles.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs4(Pressable4, { style: styles.sheet, onPress: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsx5(View4, { style: styles.handle }),
+        /* @__PURE__ */ jsx5(Text4, { style: styles.title, children: "Select currency" }),
+        /* @__PURE__ */ jsx5(
+          FlatList2,
+          {
+            data: currencies,
+            keyExtractor: (item) => item.code,
+            keyboardShouldPersistTaps: "handled",
+            renderItem: ({ item }) => {
+              const selected = selectedCode === item.code;
+              return /* @__PURE__ */ jsx5(
+                Pressable4,
+                {
+                  style: [rowStyles.row, selected && rowStyles.rowSelected],
+                  onPress: () => onSelect(item.code),
+                  children: /* @__PURE__ */ jsx5(
+                    Text4,
+                    {
+                      style: [rowStyles.label, selected && rowStyles.labelSelected],
+                      children: item.code
+                    }
+                  )
+                }
+              );
+            }
+          }
+        )
+      ] }) })
+    }
+  );
+}
+
+// src/sheet/steps/PaymentStep.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function PaymentStep() {
+  const {
+    theme,
+    balance,
+    selectedBundle,
+    selectedCountry,
+    selectedCurrencyCode,
+    setSelectedCurrencyCode,
+    phoneNational,
+    setPhoneNational,
+    predict,
+    predictLoading,
+    predictError,
+    quote,
+    quoteLoading,
+    quoteError,
+    goToOffer,
+    submitDeposit
+  } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const [countryPickerOpen, setCountryPickerOpen] = useState3(false);
+  const [currencyPickerOpen, setCurrencyPickerOpen] = useState3(false);
+  const currencyOptions = useMemo2(() => {
+    if (predict?.currencies?.length) {
+      return predict.currencies;
+    }
+    return selectedCountry?.currencies ?? [];
+  }, [predict, selectedCountry]);
+  const showCurrencyPicker = currencyOptions.length > 1;
+  const formattedQuote = quote ? formatCurrencyAmount(quote.totalLocal, quote.currencyCode) : null;
+  const buyLabel = quote ? `Buy ${formattedQuote}` : quoteLoading ? "Loading\u2026" : selectedBundle ? `Buy ${formatUsd(selectedBundle.priceUsd)}` : "Buy";
+  const styles = StyleSheet6.create({
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: spacing2.lg
+    },
+    headerLeft: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.sm,
+      flex: 1
+    },
+    backBtn: {
+      width: 40,
+      height: 40,
+      borderRadius: radius2.full,
+      backgroundColor: colors.surfaceContainer,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    headerTitle: {
+      color: colors.onSurface,
+      fontSize: 24,
+      fontWeight: "600",
+      flexShrink: 1
+    },
+    balanceChip: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.xs,
+      backgroundColor: colors.surfaceContainer,
+      paddingHorizontal: spacing2.sm,
+      paddingVertical: spacing2.xs,
+      borderRadius: radius2.full
+    },
+    balanceChipText: {
+      color: colors.primary,
+      fontSize: 12,
+      fontWeight: "500"
+    },
+    dialBtn: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.xs
+    },
+    dialText: {
+      color: colors.primaryContainer,
+      fontSize: 22,
+      fontWeight: "700"
+    },
+    providerText: {
+      color: colors.primaryContainer,
+      fontSize: 14,
+      fontWeight: "500",
+      marginTop: spacing2.sm
+    },
+    providerError: {
+      color: colors.error,
+      fontSize: 14,
+      marginTop: spacing2.sm
+    },
+    payCard: {
+      backgroundColor: colors.surfaceContainerLow,
+      borderRadius: radius2.xl,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
+      padding: spacing2.md,
+      marginTop: spacing2.lg
+    },
+    payRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: spacing2.md
+    },
+    currencyBtn: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.xs
+    },
+    currencyCode: {
+      color: colors.primaryContainer,
+      fontSize: 18,
+      fontWeight: "600"
+    },
+    amountText: {
+      color: colors.onSurface,
+      fontSize: 18,
+      fontWeight: "600"
+    },
+    cta: {
+      backgroundColor: colors.primaryContainer,
+      borderRadius: radius2.full,
+      paddingVertical: spacing2.md,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: spacing2.sm
+    },
+    ctaDisabled: { opacity: 0.5 },
+    ctaText: {
+      color: colors.onPrimaryContainer,
+      fontSize: 16,
+      fontWeight: "600"
+    },
+    quoteError: {
+      color: colors.error,
+      fontSize: 12,
+      marginBottom: spacing2.sm
+    }
+  });
+  const canSubmit = !!predict && !!quote && !quoteLoading && !predictLoading && phoneNational.replace(/\D/g, "").length >= 6;
+  return /* @__PURE__ */ jsxs5(View5, { children: [
+    /* @__PURE__ */ jsxs5(View5, { style: styles.header, children: [
+      /* @__PURE__ */ jsxs5(View5, { style: styles.headerLeft, children: [
+        /* @__PURE__ */ jsx6(Pressable5, { style: styles.backBtn, onPress: goToOffer, children: /* @__PURE__ */ jsx6(Icon, { name: "arrow-back", size: 22, color: colors.onSurfaceVariant }) }),
+        /* @__PURE__ */ jsx6(Text5, { style: styles.headerTitle, numberOfLines: 1, children: selectedBundle?.label ?? "Top-up Balance" })
+      ] }),
+      balance !== null ? /* @__PURE__ */ jsxs5(View5, { style: styles.balanceChip, children: [
+        /* @__PURE__ */ jsx6(Icon, { name: "bolt", size: 16, color: colors.primary }),
+        /* @__PURE__ */ jsx6(Text5, { style: styles.balanceChipText, children: balance.toLocaleString() })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(
+      PhoneDigitInput,
+      {
+        theme,
+        value: phoneNational,
+        onChangeText: setPhoneNational,
+        dialPressable: /* @__PURE__ */ jsxs5(
+          Pressable5,
+          {
+            style: styles.dialBtn,
+            onPress: () => setCountryPickerOpen(true),
+            children: [
+              /* @__PURE__ */ jsxs5(Text5, { style: styles.dialText, children: [
+                "+",
+                selectedCountry?.dialCode ?? "\u2026"
+              ] }),
+              /* @__PURE__ */ jsx6(Icon, { name: "expand-more", size: 24, color: colors.primaryContainer })
+            ]
+          }
+        ),
+        trailing: predict && !predictLoading ? /* @__PURE__ */ jsx6(Icon, { name: "check-circle", size: 24, color: colors.primary }) : predictLoading ? /* @__PURE__ */ jsx6(ActivityIndicator2, { color: colors.primary, size: "small" }) : null
+      }
+    ),
+    predict ? /* @__PURE__ */ jsx6(Text5, { style: styles.providerText, children: predict.provider.displayName }) : predictError ? /* @__PURE__ */ jsx6(Text5, { style: styles.providerError, children: predictError }) : null,
+    /* @__PURE__ */ jsxs5(View5, { style: styles.payCard, children: [
+      /* @__PURE__ */ jsxs5(View5, { style: styles.payRow, children: [
+        showCurrencyPicker ? /* @__PURE__ */ jsxs5(
+          Pressable5,
+          {
+            style: styles.currencyBtn,
+            onPress: () => setCurrencyPickerOpen(true),
+            children: [
+              /* @__PURE__ */ jsx6(Text5, { style: styles.currencyCode, children: selectedCurrencyCode ?? "\u2014" }),
+              /* @__PURE__ */ jsx6(Icon, { name: "expand-more", size: 20, color: colors.primaryContainer })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx6(Text5, { style: styles.currencyCode, children: selectedCurrencyCode ?? quote?.currencyCode ?? "USD" }),
+        /* @__PURE__ */ jsx6(Text5, { style: styles.amountText, children: formattedQuote ?? (selectedBundle ? formatUsd(selectedBundle.priceUsd) : "\u2014") })
+      ] }),
+      quoteError ? /* @__PURE__ */ jsx6(Text5, { style: styles.quoteError, children: quoteError }) : null,
+      /* @__PURE__ */ jsxs5(
+        Pressable5,
+        {
+          style: [styles.cta, !canSubmit && styles.ctaDisabled],
+          onPress: () => void submitDeposit(),
+          disabled: !canSubmit,
+          children: [
+            /* @__PURE__ */ jsx6(Icon, { name: "lock", size: 18, color: colors.onPrimaryContainer }),
+            /* @__PURE__ */ jsx6(Text5, { style: styles.ctaText, children: buyLabel })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6(
+      CountryPickerSheet,
+      {
+        visible: countryPickerOpen,
+        onClose: () => setCountryPickerOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      CurrencyPickerSheet,
+      {
+        visible: currencyPickerOpen,
+        currencies: currencyOptions,
+        selectedCode: selectedCurrencyCode,
+        onSelect: (code) => {
+          setSelectedCurrencyCode(code);
+          setCurrencyPickerOpen(false);
+        },
+        onClose: () => setCurrencyPickerOpen(false)
+      }
+    )
+  ] });
+}
+
+// src/sheet/steps/ResultStep.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import {
+  Animated as Animated2,
+  Pressable as Pressable6,
+  StyleSheet as StyleSheet8,
+  Text as Text6,
+  View as View7
+} from "react-native";
+
+// src/components/ProcessingSpinner.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { Animated, Easing, StyleSheet as StyleSheet7, View as View6 } from "react-native";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ProcessingSpinner({
+  theme,
+  size = 64
+}) {
+  const { colors } = theme;
+  const spin = useRef2(new Animated.Value(0)).current;
+  useEffect2(() => {
+    const loop = Animated.loop(
+      Animated.timing(spin, {
+        toValue: 1,
+        duration: 900,
+        easing: Easing.linear,
+        useNativeDriver: true
+      })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [spin]);
+  const rotate = spin.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"]
+  });
+  const ring = size;
+  const stroke = 4;
+  const styles = StyleSheet7.create({
+    wrap: {
+      width: ring,
+      height: ring,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    ring: {
+      position: "absolute",
+      width: ring,
+      height: ring,
+      borderRadius: ring / 2,
+      borderWidth: stroke,
+      borderColor: colors.surfaceContainerHighest,
+      borderTopColor: colors.primary
+    },
+    icon: {
+      position: "absolute",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  });
+  return /* @__PURE__ */ jsxs6(View6, { style: styles.wrap, children: [
+    /* @__PURE__ */ jsx7(Animated.View, { style: [styles.ring, { transform: [{ rotate }] }] }),
+    /* @__PURE__ */ jsx7(View6, { style: styles.icon, children: /* @__PURE__ */ jsx7(Icon, { name: "lock", size: Math.round(size * 0.38), color: colors.primary }) })
+  ] });
+}
+
+// src/sheet/steps/ResultStep.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function ResultStep() {
+  const {
+    theme,
+    resultPhase,
+    selectedBundle,
+    deposit,
+    failureReason,
+    depositError,
+    closeTopUp,
+    retryPayment
+  } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const scale = useRef3(new Animated2.Value(0)).current;
+  useEffect3(() => {
+    if (resultPhase === "success") {
+      scale.setValue(0);
+      Animated2.spring(scale, {
+        toValue: 1,
+        useNativeDriver: true,
+        friction: 6
+      }).start();
+    }
+  }, [resultPhase, scale]);
+  const styles = StyleSheet8.create({
+    container: {
+      alignItems: "center",
+      paddingVertical: spacing2.xl
+    },
+    spinnerWrap: {
+      marginBottom: spacing2.lg
+    },
+    title: {
+      color: colors.onSurface,
+      fontSize: 20,
+      fontWeight: "600",
+      textAlign: "center"
+    },
+    titlePulse: {
+      opacity: 0.9
+    },
+    subtitle: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14,
+      marginTop: spacing2.xs,
+      textAlign: "center"
+    },
+    successIcon: {
+      width: 80,
+      height: 80,
+      borderRadius: radius2.full,
+      backgroundColor: `${colors.success}20`,
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: spacing2.lg
+    },
+    failIcon: {
+      width: 80,
+      height: 80,
+      borderRadius: radius2.full,
+      backgroundColor: `${colors.error}20`,
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: spacing2.lg
+    },
+    doneBtn: {
+      backgroundColor: colors.surfaceContainerHigh,
+      borderRadius: radius2.full,
+      paddingHorizontal: spacing2.xl,
+      paddingVertical: spacing2.sm,
+      marginTop: spacing2.lg
+    },
+    doneText: {
+      color: colors.onSurface,
+      fontSize: 12,
+      fontWeight: "500",
+      letterSpacing: 0.5
+    },
+    retryBtn: {
+      backgroundColor: colors.primaryContainer,
+      borderRadius: radius2.full,
+      paddingHorizontal: spacing2.xl,
+      paddingVertical: spacing2.sm,
+      marginTop: spacing2.md
+    },
+    retryText: {
+      color: colors.onPrimaryContainer,
+      fontSize: 14,
+      fontWeight: "600"
+    }
+  });
+  if (resultPhase === "loading") {
+    return /* @__PURE__ */ jsxs7(View7, { style: styles.container, children: [
+      /* @__PURE__ */ jsx8(View7, { style: styles.spinnerWrap, children: /* @__PURE__ */ jsx8(ProcessingSpinner, { theme, size: 64 }) }),
+      /* @__PURE__ */ jsx8(Text6, { style: [styles.title, styles.titlePulse], children: "Processing payment..." }),
+      /* @__PURE__ */ jsx8(Text6, { style: styles.subtitle, children: "Please authorize on your device" })
+    ] });
+  }
+  if (resultPhase === "failure") {
+    return /* @__PURE__ */ jsxs7(View7, { style: styles.container, children: [
+      /* @__PURE__ */ jsx8(View7, { style: styles.failIcon, children: /* @__PURE__ */ jsx8(Icon, { name: "error-outline", size: 48, color: colors.error }) }),
+      /* @__PURE__ */ jsx8(Text6, { style: styles.title, children: "Payment failed" }),
+      /* @__PURE__ */ jsx8(Text6, { style: styles.subtitle, children: failureReason ?? depositError ?? "Something went wrong" }),
+      /* @__PURE__ */ jsx8(Pressable6, { style: styles.retryBtn, onPress: retryPayment, children: /* @__PURE__ */ jsx8(Text6, { style: styles.retryText, children: "Try again" }) }),
+      /* @__PURE__ */ jsx8(Pressable6, { style: styles.doneBtn, onPress: closeTopUp, children: /* @__PURE__ */ jsx8(Text6, { style: styles.doneText, children: "Dismiss" }) })
+    ] });
+  }
+  const credits = deposit?.credits ?? selectedBundle?.credits ?? 0;
+  return /* @__PURE__ */ jsxs7(View7, { style: styles.container, children: [
+    /* @__PURE__ */ jsx8(Animated2.View, { style: [styles.successIcon, { transform: [{ scale }] }], children: /* @__PURE__ */ jsx8(Icon, { name: "check-circle", size: 48, color: colors.success }) }),
+    /* @__PURE__ */ jsx8(Text6, { style: styles.title, children: "Top-up Successful" }),
+    /* @__PURE__ */ jsxs7(Text6, { style: styles.subtitle, children: [
+      formatCredits(credits),
+      " credits have been added to your balance."
+    ] }),
+    /* @__PURE__ */ jsx8(Pressable6, { style: styles.doneBtn, onPress: closeTopUp, children: /* @__PURE__ */ jsx8(Text6, { style: styles.doneText, children: "Done" }) })
+  ] });
+}
+
+// src/sheet/TopUpBottomSheet.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function TopUpBottomSheet() {
+  const { theme, sheetOpen, step, closeTopUp } = useJaza();
+  const { colors, spacing: spacing2 } = theme;
+  const insets = useSafeAreaInsets3();
+  const ref = useRef4(null);
+  const snapPoints = useMemo3(() => ["92%"], []);
+  const renderBackdrop = useCallback(
+    (props) => /* @__PURE__ */ jsx9(
+      BottomSheetBackdrop,
+      {
+        ...props,
+        disappearsOnIndex: -1,
+        appearsOnIndex: 0,
+        opacity: 0.6,
+        pressBehavior: "close"
+      }
+    ),
+    []
+  );
+  const styles = StyleSheet9.create({
+    root: {
+      flex: 1
+    },
+    handle: {
+      width: 48,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: colors.surfaceContainerHighest,
+      alignSelf: "center",
+      marginTop: spacing2.sm,
+      marginBottom: spacing2.md
+    },
+    content: {
+      paddingHorizontal: spacing2.gutter,
+      paddingBottom: insets.bottom + spacing2.xl
+    }
+  });
+  return /* @__PURE__ */ jsx9(
+    Modal3,
+    {
+      visible: sheetOpen,
+      transparent: true,
+      animationType: "fade",
+      statusBarTranslucent: true,
+      onRequestClose: closeTopUp,
+      children: /* @__PURE__ */ jsx9(GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ jsx9(
+        BottomSheet,
+        {
+          ref,
+          index: 0,
+          snapPoints,
+          enablePanDownToClose: true,
+          onClose: closeTopUp,
+          backdropComponent: renderBackdrop,
+          keyboardBehavior: "interactive",
+          keyboardBlurBehavior: "restore",
+          android_keyboardInputMode: "adjustResize",
+          backgroundStyle: { backgroundColor: colors.surface },
+          handleComponent: () => /* @__PURE__ */ jsx9(View8, { style: styles.handle }),
+          children: /* @__PURE__ */ jsxs8(
+            BottomSheetScrollView,
+            {
+              keyboardShouldPersistTaps: "handled",
+              contentContainerStyle: styles.content,
+              children: [
+                step === "offer" ? /* @__PURE__ */ jsx9(OfferStep, {}) : null,
+                step === "payment" ? /* @__PURE__ */ jsx9(PaymentStep, {}) : null,
+                step === "processing" ? /* @__PURE__ */ jsx9(ResultStep, {}) : null
+              ]
+            }
+          )
+        }
+      ) })
+    }
+  );
+}
+
+// src/provider/JazaProvider.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var PREDICT_DEBOUNCE_MS = 500;
+var POLL_INTERVAL_MS = 2e3;
+var POLL_TIMEOUT_MS = 12e4;
+function JazaProvider({
+  publishableKey,
+  apiBaseUrl,
+  getBalance,
+  onTopUpComplete,
+  theme: themePreference = "system",
+  children
+}) {
+  const client = useMemo4(
+    () => new PublicClient({ publishableKey, apiBaseUrl }),
+    [publishableKey, apiBaseUrl]
+  );
+  const [systemScheme, setSystemScheme] = useState4(
+    () => {
+      const scheme = Appearance.getColorScheme();
+      return scheme === "dark" ? "dark" : "light";
+    }
+  );
+  useEffect4(() => {
+    const sub = Appearance.addChangeListener(({ colorScheme }) => {
+      setSystemScheme(colorScheme === "dark" ? "dark" : "light");
+    });
+    return () => sub.remove();
+  }, []);
+  const theme = useMemo4(
+    () => resolveTheme(themePreference, systemScheme),
+    [themePreference, systemScheme]
+  );
+  const [balance, setBalance] = useState4(null);
+  const [balanceLoading, setBalanceLoading] = useState4(false);
+  const [balanceError, setBalanceError] = useState4(null);
+  const refreshBalance = useCallback2(async () => {
+    setBalanceLoading(true);
+    setBalanceError(null);
+    try {
+      const value2 = await getBalance();
+      setBalance(value2);
+    } catch (err) {
+      setBalanceError(
+        err instanceof Error ? err.message : "Failed to load balance"
+      );
+    } finally {
+      setBalanceLoading(false);
+    }
+  }, [getBalance]);
+  useEffect4(() => {
+    void refreshBalance();
+  }, [refreshBalance]);
+  const [sheetOpen, setSheetOpen] = useState4(false);
+  const [step, setStep] = useState4("offer");
+  const [resultPhase, setResultPhase] = useState4("loading");
+  const [topUpToken, setTopUpToken] = useState4(null);
+  const [bundles, setBundles] = useState4([]);
+  const [bundlesLoading, setBundlesLoading] = useState4(false);
+  const [bundlesError, setBundlesError] = useState4(null);
+  const [selectedBundle, setSelectedBundle] = useState4(null);
+  const [countries, setCountries] = useState4([]);
+  const [selectedCountry, setSelectedCountryState] = useState4(null);
+  const [selectedCurrencyCode, setSelectedCurrencyCode] = useState4(null);
+  const [phoneNational, setPhoneNational] = useState4("");
+  const [predict, setPredict] = useState4(
+    null
+  );
+  const [predictLoading, setPredictLoading] = useState4(false);
+  const [predictError, setPredictError] = useState4(null);
+  const [quote, setQuote] = useState4(null);
+  const [quoteLoading, setQuoteLoading] = useState4(false);
+  const [quoteError, setQuoteError] = useState4(null);
+  const [deposit, setDeposit] = useState4(null);
+  const [depositError, setDepositError] = useState4(null);
+  const [failureReason, setFailureReason] = useState4(null);
+  const predictTimer = useRef5(null);
+  const pollTimer = useRef5(null);
+  const pollStarted = useRef5(null);
+  const clearPoll = useCallback2(() => {
+    if (pollTimer.current) {
+      clearInterval(pollTimer.current);
+      pollTimer.current = null;
+    }
+    pollStarted.current = null;
+  }, []);
+  const resetPaymentState = useCallback2(() => {
+    setPredict(null);
+    setPredictError(null);
+    setQuote(null);
+    setQuoteError(null);
+    setDeposit(null);
+    setDepositError(null);
+    setFailureReason(null);
+    setResultPhase("loading");
+  }, []);
+  const setSelectedCountry = useCallback2((country) => {
+    setSelectedCountryState(country);
+    setPhoneNational("");
+    setPredict(null);
+    setPredictError(null);
+    if (country && country.currencies.length > 0) {
+      const codes = country.currencies.map((c) => c.code);
+      setSelectedCurrencyCode(pickDefaultCurrencyCode(codes));
+    } else {
+      setSelectedCurrencyCode(null);
+    }
+  }, []);
+  const loadSessionData = useCallback2(async () => {
+    setBundlesLoading(true);
+    setBundlesError(null);
+    try {
+      const [bundleList, catalogCountries] = await Promise.all([
+        client.listBundles(),
+        client.listCountries()
+      ]);
+      const active = bundleList.filter((b) => b.isActive).sort((a, b) => a.sortOrder - b.sortOrder);
+      setBundles(active);
+      if (active.length > 0) {
+        setSelectedBundle(active[0]);
+      } else {
+        setSelectedBundle(null);
+      }
+      const enriched = enrichCountries(catalogCountries);
+      setCountries(enriched);
+      if (enriched.length > 0) {
+        setSelectedCountryState((prev) => {
+          if (prev) return prev;
+          return enriched.find((c) => c.iso2 === "CD") ?? enriched[0];
+        });
+        setSelectedCurrencyCode((prev) => {
+          if (prev) return prev;
+          const country = enriched.find((c) => c.iso2 === "CD") ?? enriched[0];
+          const codes = country.currencies.map((c) => c.code);
+          return pickDefaultCurrencyCode(codes);
+        });
+      }
+    } catch (err) {
+      setBundles([]);
+      setSelectedBundle(null);
+      setBundlesError(
+        err instanceof Error ? err.message : "Failed to load bundles"
+      );
+    } finally {
+      setBundlesLoading(false);
+    }
+  }, [client]);
+  const openTopUp = useCallback2(
+    async (token) => {
+      client.setTopUpToken(token);
+      setTopUpToken(token);
+      setStep("offer");
+      resetPaymentState();
+      setSelectedCountryState(null);
+      setSelectedCurrencyCode(null);
+      setPhoneNational("");
+      setBundlesError(null);
+      setSheetOpen(true);
+      void loadSessionData();
+      void refreshBalance();
+    },
+    [client, loadSessionData, refreshBalance, resetPaymentState]
+  );
+  const closeTopUp = useCallback2(() => {
+    clearPoll();
+    setSheetOpen(false);
+    client.setTopUpToken(null);
+    setTopUpToken(null);
+    setStep("offer");
+    resetPaymentState();
+  }, [clearPoll, client, resetPaymentState]);
+  const goToOffer = useCallback2(() => {
+    clearPoll();
+    setStep("offer");
+    resetPaymentState();
+  }, [clearPoll, resetPaymentState]);
+  const goToPayment = useCallback2(() => {
+    setStep("payment");
+    resetPaymentState();
+  }, [resetPaymentState]);
+  const startPoll = useCallback2(
+    (depositId, credits) => {
+      clearPoll();
+      pollStarted.current = Date.now();
+      pollTimer.current = setInterval(() => {
+        void (async () => {
+          if (pollStarted.current && Date.now() - pollStarted.current > POLL_TIMEOUT_MS) {
+            clearPoll();
+            setResultPhase("failure");
+            setFailureReason("Payment timed out. Please try again.");
+            return;
+          }
+          try {
+            const updated = await client.getDeposit(depositId);
+            setDeposit(updated);
+            if (updated.status === "COMPLETED") {
+              clearPoll();
+              setResultPhase("success");
+              await refreshBalance();
+              onTopUpComplete?.({
+                depositId: updated.id,
+                credits,
+                status: updated.status
+              });
+            } else if (isDepositTerminal(updated.status)) {
+              clearPoll();
+              setResultPhase("failure");
+              setFailureReason(
+                updated.failureReason ?? `Payment ${updated.status.toLowerCase()}`
+              );
+            }
+          } catch {
+          }
+        })();
+      }, POLL_INTERVAL_MS);
+    },
+    [clearPoll, client, onTopUpComplete, refreshBalance]
+  );
+  const submitDeposit = useCallback2(async () => {
+    if (!selectedBundle || !predict || !quote || !selectedCountry) return;
+    const e164 = buildE164(selectedCountry.dialCode, phoneNational);
+    setStep("processing");
+    setResultPhase("loading");
+    setDepositError(null);
+    try {
+      const created = await client.createDeposit({
+        bundleId: selectedBundle.id,
+        currencyCode: quote.currencyCode,
+        paymentGatewayCode: predict.provider.code,
+        phoneNumber: e164
+      });
+      setDeposit(created);
+      if (created.status === "COMPLETED") {
+        setResultPhase("success");
+        await refreshBalance();
+        onTopUpComplete?.({
+          depositId: created.id,
+          credits: created.credits,
+          status: created.status
+        });
+        return;
+      }
+      if (isDepositTerminal(created.status)) {
+        setResultPhase("failure");
+        setFailureReason(
+          created.failureReason ?? `Payment ${created.status.toLowerCase()}`
+        );
+        return;
+      }
+      startPoll(created.id, created.credits);
+    } catch (err) {
+      setResultPhase("failure");
+      setDepositError(
+        err instanceof Error ? err.message : "Failed to start payment"
+      );
+      setFailureReason(
+        err instanceof Error ? err.message : "Failed to start payment"
+      );
+    }
+  }, [
+    client,
+    onTopUpComplete,
+    phoneNational,
+    predict,
+    quote,
+    refreshBalance,
+    selectedBundle,
+    selectedCountry,
+    startPoll
+  ]);
+  const retryPayment = useCallback2(() => {
+    clearPoll();
+    setStep("payment");
+    setResultPhase("loading");
+    setDepositError(null);
+    setFailureReason(null);
+  }, [clearPoll]);
+  useEffect4(() => {
+    if (step !== "payment" || !selectedCountry) return;
+    const digits = phoneNational.replace(/\D/g, "");
+    if (digits.length < 6) {
+      setPredict(null);
+      setPredictError(null);
+      return;
+    }
+    if (predictTimer.current) clearTimeout(predictTimer.current);
+    predictTimer.current = setTimeout(() => {
+      void (async () => {
+        setPredictLoading(true);
+        setPredictError(null);
+        try {
+          const e164 = buildE164(selectedCountry.dialCode, phoneNational);
+          const result = await client.predictProvider(e164);
+          setPredict(result);
+          const codes = result.currencies.map((c) => c.code);
+          if (selectedCurrencyCode && codes.includes(selectedCurrencyCode)) {
+          } else {
+            setSelectedCurrencyCode(pickDefaultCurrencyCode(codes));
+          }
+        } catch (err) {
+          setPredict(null);
+          setPredictError(
+            err instanceof Error ? err.message : "Could not detect provider"
+          );
+        } finally {
+          setPredictLoading(false);
+        }
+      })();
+    }, PREDICT_DEBOUNCE_MS);
+    return () => {
+      if (predictTimer.current) clearTimeout(predictTimer.current);
+    };
+  }, [
+    client,
+    phoneNational,
+    selectedCountry,
+    selectedCurrencyCode,
+    step
+  ]);
+  useEffect4(() => {
+    if (step !== "payment" || !selectedBundle || !predict || !selectedCurrencyCode) {
+      setQuote(null);
+      return;
+    }
+    void (async () => {
+      setQuoteLoading(true);
+      setQuoteError(null);
+      try {
+        const q = await client.quotePayment({
+          bundleId: selectedBundle.id,
+          currencyCode: selectedCurrencyCode,
+          paymentGatewayCode: predict.provider.code
+        });
+        setQuote(q);
+      } catch (err) {
+        setQuote(null);
+        setQuoteError(
+          err instanceof Error ? err.message : "Could not load quote"
+        );
+      } finally {
+        setQuoteLoading(false);
+      }
+    })();
+  }, [client, predict, selectedBundle, selectedCurrencyCode, step]);
+  useEffect4(() => () => clearPoll(), [clearPoll]);
+  const value = useMemo4(
+    () => ({
+      theme,
+      themePreference,
+      publishableKey,
+      client,
+      balance,
+      balanceLoading,
+      balanceError,
+      refreshBalance,
+      sheetOpen,
+      step,
+      resultPhase,
+      topUpToken,
+      bundles,
+      bundlesLoading,
+      bundlesError,
+      selectedBundle,
+      setSelectedBundle,
+      countries,
+      selectedCountry,
+      setSelectedCountry,
+      selectedCurrencyCode,
+      setSelectedCurrencyCode,
+      phoneNational,
+      setPhoneNational,
+      predict,
+      predictLoading,
+      predictError,
+      quote,
+      quoteLoading,
+      quoteError,
+      deposit,
+      depositError,
+      failureReason,
+      openTopUp,
+      closeTopUp,
+      goToOffer,
+      goToPayment,
+      submitDeposit,
+      retryPayment,
+      onTopUpComplete
+    }),
+    [
+      theme,
+      themePreference,
+      publishableKey,
+      client,
+      balance,
+      balanceLoading,
+      balanceError,
+      refreshBalance,
+      sheetOpen,
+      step,
+      resultPhase,
+      topUpToken,
+      bundles,
+      bundlesLoading,
+      bundlesError,
+      selectedBundle,
+      countries,
+      selectedCountry,
+      setSelectedCountry,
+      selectedCurrencyCode,
+      phoneNational,
+      predict,
+      predictLoading,
+      predictError,
+      quote,
+      quoteLoading,
+      quoteError,
+      deposit,
+      depositError,
+      failureReason,
+      openTopUp,
+      closeTopUp,
+      goToOffer,
+      goToPayment,
+      submitDeposit,
+      retryPayment,
+      onTopUpComplete
+    ]
+  );
+  return /* @__PURE__ */ jsxs9(JazaContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx10(TopUpBottomSheet, {})
+  ] });
+}
+
+// src/widgets/JazaBalanceWidget.tsx
+import { useEffect as useEffect5 } from "react";
+import {
+  ActivityIndicator as ActivityIndicator3,
+  StyleSheet as StyleSheet10,
+  Text as Text7,
+  View as View9
+} from "react-native";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function JazaBalanceWidget({ style }) {
+  const { theme, balance, balanceLoading, balanceError, refreshBalance } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  useEffect5(() => {
+    void refreshBalance();
+  }, [refreshBalance]);
+  const styles = StyleSheet10.create({
+    card: {
+      backgroundColor: colors.surfaceContainer,
+      borderRadius: radius2.xl,
+      padding: spacing2.md,
+      ...style
+    },
+    label: {
+      color: colors.onSurfaceVariant,
+      fontSize: 14,
+      marginBottom: spacing2.xs
+    },
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing2.sm
+    },
+    value: {
+      color: colors.onSurface,
+      fontSize: 48,
+      fontWeight: "700",
+      letterSpacing: -1
+    },
+    error: {
+      color: colors.error,
+      fontSize: 14,
+      marginTop: spacing2.xs
+    }
+  });
+  return /* @__PURE__ */ jsxs10(View9, { style: styles.card, children: [
+    /* @__PURE__ */ jsx11(Text7, { style: styles.label, children: "Current Balance" }),
+    /* @__PURE__ */ jsxs10(View9, { style: styles.row, children: [
+      /* @__PURE__ */ jsx11(Icon, { name: "bolt", size: 28, color: colors.primary }),
+      balanceLoading && balance === null ? /* @__PURE__ */ jsx11(ActivityIndicator3, { color: colors.primary }) : /* @__PURE__ */ jsx11(Text7, { style: styles.value, children: balance !== null ? formatCredits(balance) : "\u2014" })
+    ] }),
+    balanceError ? /* @__PURE__ */ jsx11(Text7, { style: styles.error, children: balanceError }) : null
+  ] });
+}
+
+// src/widgets/JazaTopUpButton.tsx
+import { useState as useState5 } from "react";
+import {
+  ActivityIndicator as ActivityIndicator4,
+  Pressable as Pressable7,
+  StyleSheet as StyleSheet11,
+  Text as Text8
+} from "react-native";
+import { Fragment, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function JazaTopUpButton({
+  onRequestToken,
+  label = "Top up credits",
+  style
+}) {
+  const { theme, openTopUp } = useJaza();
+  const { colors, spacing: spacing2, radius: radius2 } = theme;
+  const [loading, setLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const styles = StyleSheet11.create({
+    button: {
+      backgroundColor: colors.primaryContainer,
+      borderRadius: radius2.full,
+      paddingVertical: spacing2.md,
+      paddingHorizontal: spacing2.lg,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: spacing2.sm,
+      ...style
+    },
+    pressed: { opacity: 0.9, transform: [{ scale: 0.98 }] },
+    label: {
+      color: colors.onPrimaryContainer,
+      fontSize: 16,
+      fontWeight: "600"
+    },
+    error: {
+      color: colors.error,
+      fontSize: 12,
+      marginTop: spacing2.xs,
+      textAlign: "center"
+    }
+  });
+  const handlePress = async () => {
+    setError(null);
+    setLoading(true);
+    try {
+      const token = await onRequestToken();
+      if (!token?.trim()) {
+        throw new Error("Top-up token was empty");
+      }
+      await openTopUp(token.trim());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not start top-up");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs11(Fragment, { children: [
+    /* @__PURE__ */ jsx12(
+      Pressable7,
+      {
+        style: ({ pressed }) => [styles.button, pressed && styles.pressed],
+        onPress: () => void handlePress(),
+        disabled: loading,
+        children: loading ? /* @__PURE__ */ jsx12(ActivityIndicator4, { color: colors.onPrimaryContainer }) : /* @__PURE__ */ jsxs11(Fragment, { children: [
+          /* @__PURE__ */ jsx12(Text8, { style: styles.label, children: label }),
+          /* @__PURE__ */ jsx12(Icon, { name: "arrow-forward", size: 20, color: colors.onPrimaryContainer })
+        ] })
+      }
+    ),
+    error ? /* @__PURE__ */ jsx12(Text8, { style: styles.error, children: error }) : null
+  ] });
+}
+export {
+  DEFAULT_API_BASE_URL,
+  DIAL_CODES,
+  JazaBalanceWidget,
+  JazaProvider,
+  JazaSdkError,
+  JazaTopUpButton,
+  PublicClient,
+  VERSION,
+  buildE164,
+  darkTheme,
+  enrichCountries,
+  formatCredits,
+  formatCurrencyAmount,
+  formatLocalAmount,
+  formatUsd,
+  getDialCode,
+  isDepositTerminal,
+  iso2ToFlag,
+  lightTheme,
+  pickDefaultCurrencyCode,
+  useJaza
+};
+//# sourceMappingURL=index.js.map