import React, { type JSX } from "react";
import type { LPMOneTimePaymentSession } from "../types";
import type { LPMName, LPMFieldType } from "../config/lpmRegistry";
import type { UseLPMOneTimePaymentSessionProps, LPMPaymentSessionReturn } from "../hooks/useLPMOneTimePaymentSession";
import type { ButtonProps } from "../types/sdkWebComponents";
/**
 * React context carrying the active `LPMOneTimePaymentSession` instance.
 * Consumed by field components rendered inside an `LPMSessionProvider`.
 */
export declare const LPMSessionContext: React.Context<LPMOneTimePaymentSession | null>;
/**
 * The click handler and pending/error state a payment button needs.
 * Provided alongside {@link LPMSessionContext} by `LPMSessionProvider`, and
 * consumed by button components created with {@link createLPMButtonComponent}.
 */
export interface LPMSessionHandleContextValue {
    handleClick: () => Promise<{
        redirectURL?: string;
    } | void>;
    isPending: boolean;
    error: Error | null;
}
/**
 * React context carrying the click handler and pending/error state for the
 * active LPM session. Consumed by button components rendered inside an
 * `LPMSessionProvider`.
 */
export declare const LPMSessionHandleContext: React.Context<LPMSessionHandleContextValue | null>;
/**
 * Maps each field type in `Fields` to its `<Capitalize>Field` component key
 * (e.g. `"name"` → `NameField`), typed as a field component rather than
 * `unknown` — so merchants (and tests) never need to cast the result.
 */
export type FieldComponents<Fields extends readonly LPMFieldType[]> = {
    [F in Fields[number] as `${Capitalize<F>}Field`]: React.FC<LPMFieldComponentProps>;
};
/**
 * Return type of every `createEnhancedLPMHook`-generated hook.
 *
 * Extends `LPMPaymentSessionReturn` with an `LPMSessionProvider` and a
 * field-component map so merchants can destructure `NameField`, `EmailField`,
 * etc. with correct prop types:
 *
 * ```tsx
 * const { LPMSessionProvider, NameField, isPending } =
 *   useIdealOneTimePaymentSession({ ... });
 *
 * return (
 *   <LPMSessionProvider>
 *     <NameField />
 *     <IdealPaymentButton type="pay" />
 *   </LPMSessionProvider>
 * );
 * ```
 */
export type LPMEnhancedHookReturn<Fields extends readonly LPMFieldType[] = readonly LPMFieldType[]> = LPMPaymentSessionReturn & {
    /**
     * Wrap field and button components with this provider so they can access
     * the active session through {@link LPMSessionContext} and
     * {@link LPMSessionHandleContext}.
     */
    LPMSessionProvider: (props: {
        children: React.ReactNode;
    }) => JSX.Element;
} & FieldComponents<Fields>;
/**
 * The click handler and pending/error state a payment button reads from
 * {@link LPMSessionHandleContext}. Alias of {@link LPMSessionHandleContextValue}
 * kept for naming continuity.
 */
export type LPMSessionHandle = LPMSessionHandleContextValue;
export type LPMFieldComponentProps = {
    containerStyles?: React.CSSProperties;
    containerClassName?: string;
    /**
     * Optional initial value to prefill the field with (maps to the SDK
     * `createPaymentFields({ value })` option). Useful for demos or restoring a
     * buyer's previously entered value.
     */
    value?: string;
};
export type LPMButtonComponentProps = Omit<ButtonProps, "onClick">;
/**
 * Creates a named, standalone payment button component (e.g. `IdealPaymentButton`).
 *
 * The component reads its click handler and pending/error state from
 * {@link LPMSessionHandleContext} — render it inside the `LPMSessionProvider`
 * returned by the corresponding `use*OneTimePaymentSession` hook.
 *
 * The underlying SDK web component tag is wrapped internally; merchants never
 * import or reference the raw tag (e.g. `<ideal-button>`).
 *
 * @example
 * // Inside lpmExports.ts:
 * export const IdealPaymentButton =
 *   createLPMButtonComponent("ideal-button", "IdealPaymentButton");
 *
 * // Merchant usage:
 * const { LPMSessionProvider } = useIdealOneTimePaymentSession({ ... });
 * <LPMSessionProvider>
 *   <IdealPaymentButton type="pay" />
 * </LPMSessionProvider>
 */
export declare function createLPMButtonComponent(buttonTag: string, displayName: string): {
    (props: LPMButtonComponentProps): JSX.Element;
    displayName: string;
};
/**
 * Creates a named `use*OneTimePaymentSession` hook that returns everything the
 * underlying `useLPMOneTimePaymentSession` returns **plus** an `LPMSessionProvider`
 * and a pre-bound field component for every field the LPM requires — e.g.
 * `NameField`, `EmailField`.
 *
 * Field component names are derived from the field type in the registry:
 *   `"name"`  → `NameField`
 *   `"email"` → `EmailField`
 *
 * Wrap your field and button components with the returned `LPMSessionProvider`
 * so they can access the active session through {@link LPMSessionContext} and
 * {@link LPMSessionHandleContext}. Import the named button component directly
 * — it reads the click handler and pending/error state from context, no props
 * required.
 *
 * @example
 * const { LPMSessionProvider, NameField, isPending } =
 *   useIdealOneTimePaymentSession({
 *     createOrder: async () => ({ orderId: await createOrder() }),
 *     onApprove:   async ({ orderId }) => { await capture(orderId); },
 *     presentationMode: "popup",
 *   });
 *
 * return (
 *   <LPMSessionProvider>
 *     <section className="billing">
 *       <input name="email" />
 *       <NameField containerStyles={{ marginBottom: 8 }} />
 *     </section>
 *     <IdealPaymentButton type="pay" />
 *   </LPMSessionProvider>
 * );
 */
export declare function createEnhancedLPMHook<const Fields extends readonly LPMFieldType[]>(lpm: LPMName, fieldTypes: Fields): (props: Omit<UseLPMOneTimePaymentSessionProps, "lpm">) => LPMEnhancedHookReturn<Fields>;