@appfunnel-dev/sdk 0.4.0 → 0.6.0

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-import { A as AppFunnelConfig, P as PageDefinition, V as VariableValue, U as UserState, L as LocaleState, T as TranslationState, N as NavigationState, a as ProductsState, b as TrackingState, c as PaymentState, F as FunnelState } from './types-ChorYUCl.js';
-export { C as ConditionConfig, d as ConditionGroupConfig, e as FunnelSettings, f as PageConfig, g as PageState, h as PageType, i as ProductConfig, j as ProductsConfig, k as Progress, R as RouteConfig, l as RuntimeProduct, m as VariableConfig, n as VariableType } from './types-ChorYUCl.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { A as AppFunnelConfig, P as PageDefinition, V as VariableValue, U as UserState, L as LocaleState, T as TranslationState, N as NavigationState, a as ProductsState, b as TrackingState, c as PaymentState, D as DeviceInfo, d as PageData, F as FunnelState } from './internal-BlgQ9C2d.js';
+export { C as ConditionConfig, e as ConditionGroupConfig, f as FunnelProvider, g as FunnelProviderProps, h as FunnelSettings, i as PageConfig, j as PageState, k as PageType, l as ProductConfig, m as ProductsConfig, n as Progress, R as RouteConfig, o as RuntimeProduct, p as VariableConfig, q as VariableType } from './internal-BlgQ9C2d.js';
+import * as react from 'react';
 import { Appearance } from '@stripe/stripe-js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * Type helper for appfunnel.config.ts.
@@ -57,6 +58,7 @@ declare function useVariables(): Record<string, VariableValue>;
 /**
  * Read built-in user state (email, name, customerId).
  *
+ * Only re-renders when a `user.*` variable changes.
  * For reading/writing arbitrary user fields, use `useUserProperty('fieldName')`.
  */
 declare function useUser(): UserState;
@@ -83,6 +85,8 @@ declare function useResponse<T extends VariableValue>(key: string): [T, (value:
 /**
  * Read all response variables as a flat object (without the `answers.` prefix).
  *
+ * Only re-renders when an `answers.*` variable changes.
+ *
  * ```tsx
  * const responses = useResponses()
  * // { goal: 'weight_loss', interests: ['yoga', 'running'] }
@@ -93,10 +97,7 @@ declare function useResponses(): Record<string, VariableValue>;
 /**
  * Read all URL query parameters as a flat object (without the `query.` prefix).
  *
- * `query.*` variables are auto-populated from `window.location.search`.
- * e.g. `?utm_source=google&ref=abc` → `{ utm_source: 'google', ref: 'abc' }`.
- *
- * These are read-only from the developer's perspective — they come from the URL.
+ * Only re-renders when a `query.*` variable changes.
  */
 declare function useQueryParams(): Record<string, string>;
 /**
@@ -149,11 +150,16 @@ declare function useTranslation(): TranslationState;
 
 /**
  * Navigation hook — evaluates routes, navigates between pages, tracks progress.
+ *
+ * Only re-renders when the router's current page changes (not on variable changes).
+ * Variables are read lazily at navigation time — callbacks are referentially stable.
  */
 declare function useNavigation(): NavigationState;
 
 /**
  * Products hook — access product list, selected product, and selection handler.
+ *
+ * Only re-renders when `products.selectedProductId` changes.
  */
 declare function useProducts(): ProductsState;
 
@@ -163,33 +169,78 @@ declare function useProducts(): ProductsState;
 declare function useTracking(): TrackingState;
 
 /**
- * Payment hook — reads payment-related system variables.
+ * Payment hook — reads payment-related variables.
+ *
+ * Only re-renders when payment/card variables change.
  */
 declare function usePayment(): PaymentState;
 
+/**
+ * Read device, browser, and OS metadata.
+ *
+ * These values are set once on mount and don't change, so this hook
+ * will rarely (if ever) re-render.
+ *
+ * ```tsx
+ * const { device, browser, os } = useDeviceInfo()
+ * if (device.isMobile) { ... }
+ * ```
+ */
+declare function useDeviceInfo(): DeviceInfo;
+
+/**
+ * Read page-level system variables.
+ *
+ * Re-renders when page variables change (e.g. on navigation).
+ *
+ * ```tsx
+ * const { currentId, progressPercentage, startedAt } = usePageData()
+ * ```
+ */
+declare function usePageData(): PageData;
+
 /**
  * Convenience hook that combines all SDK hooks.
  * Useful for simple funnels where you don't want multiple hook imports.
  */
 declare function useFunnel(): FunnelState;
 
-interface PaymentFormProps {
+interface StripePaymentHandle {
+    /** Programmatically submit the payment form */
+    submit: () => Promise<void>;
+}
+interface StripePaymentFormProps {
     /** Product ID override (default: currently selected product) */
     productId?: string;
     /** "checkout" for full payment, "validate-only" to just collect card */
     mode?: 'checkout' | 'validate-only';
+    /** "elements" for PaymentElement, "embedded" for Stripe Embedded Checkout */
+    variant?: 'elements' | 'embedded';
     /** Called on successful payment */
     onSuccess?: () => void;
     /** Called on payment error */
     onError?: (error: string) => void;
-    /** Allow Stripe promotion codes */
-    allowPromotionCodes?: boolean;
+    /** Called when the Stripe form is ready to accept submissions */
+    onReady?: () => void;
     /** Additional CSS class */
     className?: string;
-    /** Stripe Appearance override */
+    /** Stripe Appearance override (elements variant only) */
     appearance?: Appearance;
+    /** PaymentElement layout option (default: 'tabs') */
+    layout?: 'tabs' | 'accordion' | 'auto';
 }
-declare function PaymentForm({ productId, mode, onSuccess, onError, className, appearance, }: PaymentFormProps): react_jsx_runtime.JSX.Element;
+/**
+ * Stripe payment component supporting PaymentElement and Embedded Checkout.
+ *
+ * Use a ref to submit the form from an external button:
+ * ```tsx
+ * const paymentRef = useRef<StripePaymentHandle>(null)
+ *
+ * <StripePaymentForm ref={paymentRef} onSuccess={goToNextPage} />
+ * <button onClick={() => paymentRef.current?.submit()}>Pay Now</button>
+ * ```
+ */
+declare const StripePaymentForm: react.ForwardRefExoticComponent<StripePaymentFormProps & react.RefAttributes<StripePaymentHandle>>;
 
 interface PaddleCheckoutProps {
     /** Product ID to checkout (default: currently selected product) */
@@ -237,4 +288,4 @@ type IntegrationLoader = (config: Record<string, unknown>) => void;
  */
 declare function registerIntegration(id: string, loader: IntegrationLoader): void;
 
-export { AppFunnelConfig, FunnelState, type IntegrationConfigs, LocaleState, NavigationState, PaddleCheckout, type PaddleCheckoutProps, PageDefinition, PaymentForm, type PaymentFormProps, PaymentState, ProductsState, TrackingState, TranslationState, UserState, VariableValue, defineConfig, definePage, registerIntegration, useData, useFunnel, useLocale, useNavigation, usePayment, useProducts, useQueryParam, useQueryParams, useResponse, useResponses, useTracking, useTranslation, useUser, useUserProperty, useVariable, useVariables };
+export { AppFunnelConfig, DeviceInfo, FunnelState, type IntegrationConfigs, LocaleState, NavigationState, PaddleCheckout, type PaddleCheckoutProps, PageData, PageDefinition, PaymentState, ProductsState, StripePaymentForm, type StripePaymentFormProps, type StripePaymentHandle, TrackingState, TranslationState, UserState, VariableValue, defineConfig, definePage, registerIntegration, useData, useDeviceInfo, useFunnel, useLocale, useNavigation, usePageData, usePayment, useProducts, useQueryParam, useQueryParams, useResponse, useResponses, useTracking, useTranslation, useUser, useUserProperty, useVariable, useVariables };