@frak-labs/components/dist/banner.d.ts

Frak Wallet components, helping any person to interact with the Frak wallet.

import { InteractionTypeKey } from "@frak-labs/core-sdk";
import * as _$preact from "preact";

//#region src/components/Banner/types.d.ts
/**
 * The props type for {@link Banner}.
 * @inline
 */
type BannerProps = {
  /**
   * Placement ID for backend-driven CSS customization.
   */
  placement?: string;
  /**
   * CSS class names passed through to the root element (Light DOM).
   */
  classname?: string;
  /**
   * Filter rewards by interaction type (e.g. "purchase", "referral").
   * When omitted, the best reward across all interaction types is shown.
   */
  interaction?: InteractionTypeKey;
  /**
   * Override the referral banner title.
   */
  referralTitle?: string;
  /**
   * Override the referral banner description.
   */
  referralDescription?: string;
  /**
   * Override the referral banner CTA button text.
   */
  referralCta?: string;
  /**
   * Override the in-app browser banner title.
   */
  inappTitle?: string;
  /**
   * Override the in-app browser banner description.
   */
  inappDescription?: string;
  /**
   * Override the in-app browser banner CTA button text.
   */
  inappCta?: string;
  /**
   * Override the image displayed on the left of the referral banner.
   * Accepts an image URL. Falls back to the built-in gift icon when omitted.
   * The image is constrained to the icon slot via `object-fit: contain`,
   * so any aspect ratio renders correctly.
   */
  imageUrl?: string;
  /**
   * When set, forces the banner to render in preview mode (e.g. in Shopify theme editor).
   * Bypasses normal event/browser detection and shows static content.
   */
  preview?: string;
  /**
   * Which banner variant to preview: "referral" or "inapp".
   * Only used when {@link preview} is set. Defaults to "referral".
   */
  previewMode?: "referral" | "inapp";
  /**
   * When `true` (default `false`), the banner is allowed to switch to
   * in-app browser mode (Instagram / Facebook WebView) and prompt the
   * user to escape to the system browser.
   *
   * Most flows now work inside in-app browsers via the anonymous-id
   * flow, so the redirect is opt-in. Enable it only on surfaces that
   * actually drive users into a WebAuthn-bound action (login,
   * sendTransaction, SIWE authenticate).
   *
   * Accepts the boolean `true` (TS/JSX) or the string `"true"` (HTML
   * attribute). Any other value — including `false`, `"false"`, the
   * empty string, or attribute absence — keeps the redirect disabled.
   */
  allowInappRedirect?: boolean | "true" | "false";
};
//#endregion
//#region src/components/Banner/Banner.d.ts
/**
 * Auto-detecting notification banner component.
 *
 * Renders an inline banner on the merchant page with one of two distinct
 * visual styles depending on the detected mode:
 *
 * - **Referral mode** (white): Shown after a successful referral link
 *   processing. Displays a gift icon, reward copy, and a "Got it" CTA.
 * - **In-app browser mode** (dark transparent): Shown when the page is
 *   opened inside a social media in-app browser (Instagram, Facebook).
 *   Offers an inline link to redirect to the default browser plus a
 *   close button to dismiss.
 *
 * In-app browser mode takes priority over referral mode.
 * Uses Light DOM + vanilla-extract styles from `@frak-labs/design-system`.
 *
 * @group components
 *
 * @example
 * Basic usage (auto-detects mode):
 * ```html
 * <frak-banner></frak-banner>
 * ```
 *
 * @example
 * With a custom class:
 * ```html
 * <frak-banner classname="my-custom-banner"></frak-banner>
 * ```
 */
declare function Banner({
  placement: placementId,
  classname,
  interaction,
  referralTitle: propReferralTitle,
  referralDescription: propReferralDescription,
  referralCta: propReferralCta,
  inappTitle: propInappTitle,
  inappDescription: propInappDescription,
  inappCta: propInappCta,
  imageUrl,
  preview,
  previewMode,
  allowInappRedirect
}: BannerProps): _$preact.JSX.Element | null;
//#endregion
//#region src/components/Banner/index.d.ts
/**
 * Custom element interface for `<frak-banner>`.
 * Combines standard {@link HTMLElement} with {@link BannerProps}.
 */
interface BannerElement extends HTMLElement, BannerProps {}
declare global {
  interface HTMLElementTagNameMap {
    "frak-banner": BannerElement;
  }
}
//#endregion
export { Banner, BannerElement };