@b3dotfun/sdk 0.1.2 → 0.1.5

package/dist/esm/anyspend/react/components/common/PanelOnrampPayment.js

@@ -11,7 +11,7 @@ export function PanelOnrampPayment(props) {
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(PanelOnrampPaymentInner, { ...props }) }));
 }
 function PanelOnrampPaymentInner(props) {
-    const { srcAmountOnRamp, recipientAddress, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, } = props;
+    const { srcAmountOnRamp, recipientAddress, isBuyMode, destinationTokenChainId, destinationTokenAddress, selectedDstChainId, selectedDstToken, anyspendQuote, globalAddress, onOrderCreated, onBack, orderType, nft, tournament, payload, recipientEnsName, recipientImageUrl, classes, } = props;
     const { geoData, coinbaseOnrampOptions, coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(srcAmountOnRamp);
     const isLoading = isLoadingGeoOnramp;
     const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
@@ -81,20 +81,24 @@ function PanelOnrampPaymentInner(props) {
             toast.error("Failed to create order: " + err.message);
         }
     };
-    return (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6 px-5 pt-5", children: [_jsxs(_Fragment, { children: [_jsx("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), _jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && (_jsxs(motion.div, { initial: false, animate: {
+    return (_jsxs("div", { className: classes?.container || "mx-auto flex w-full max-w-[460px] flex-col gap-6 px-5 pt-5", children: [_jsxs(_Fragment, { children: [_jsx("h2", { className: classes?.summaryTitle || "-mb-3 text-lg font-semibold", children: "Order summary" }), _jsxs("div", { className: classes?.summaryCard ||
+                            "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [recipientAddress && (_jsxs(motion.div, { initial: false, animate: {
                                     opacity: 1,
                                     y: 0,
                                     filter: "blur(0px)",
-                                }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground/60", children: orderType === "swap"
+                                }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: classes?.summaryRow || "flex items-center justify-between", children: [_jsx("p", { className: classes?.summaryLabel || "text-b3-react-foreground/60", children: orderType === "swap"
                                             ? "Recipient"
                                             : orderType === "mint_nft"
                                                 ? "Receive NFT at"
                                                 : orderType === "join_tournament"
                                                     ? "Join for"
-                                                    : "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && _jsxs("span", { className: "text-b3-react-foreground/80", children: ["@", recipientEnsName] }), _jsx("span", { className: "text-b3-react-foreground/80", children: centerTruncate(recipientAddress) })] })] })] })), _jsx("div", { className: "border-b3-react-border border-t pt-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground font-semibold", children: "Amount" }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("p", { className: "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors", onClick: onBack, children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] }), anyspendQuote?.data?.fee?.type === "standard_fee" &&
+                                                    : "Recipient" }), _jsxs("div", { className: "flex items-center gap-2", children: [recipientImageUrl && (_jsx("img", { src: recipientImageUrl, alt: recipientImageUrl, className: "bg-b3-react-foreground size-7 rounded-full object-cover opacity-100" })), _jsxs("div", { className: "flex flex-col items-end gap-1", children: [recipientEnsName && (_jsxs("span", { className: classes?.summaryValue || "text-b3-react-foreground/80", children: ["@", recipientEnsName] })), _jsx("span", { className: classes?.summaryValue || "text-b3-react-foreground/80", children: centerTruncate(recipientAddress) })] })] })] })), _jsx("div", { className: classes?.summaryDivider || "border-b3-react-border border-t pt-3", children: _jsxs("div", { className: classes?.amountRow || "flex items-center justify-between", children: [_jsx("p", { className: classes?.summaryLabel || "text-b3-react-foreground font-semibold", children: "Amount" }), _jsxs("div", { className: "flex flex-col items-end gap-0.5", children: [_jsxs("p", { className: classes?.amountValue ||
+                                                        "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors", onClick: onBack, children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] }), anyspendQuote?.data?.fee?.type === "standard_fee" &&
                                                     anyspendQuote.data.currencyIn?.amountUsd &&
                                                     anyspendQuote.data.fee.finalFeeBps > 0 && (_jsxs("p", { className: "text-b3-react-foreground/60 text-xs", children: ["incl. $", ((Number(anyspendQuote.data.currencyIn.amountUsd) * anyspendQuote.data.fee.finalFeeBps) /
-                                                            10000).toFixed(2), " ", "fee"] }))] })] }) })] })] }), isCreatingOrder ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoading ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Payment method" }), _jsx("div", { className: "flex items-center gap-1", children: coinbaseAvailablePaymentMethods.length > 0 &&
+                                                            10000).toFixed(2), " ", "fee"] }))] })] }) })] })] }), isCreatingOrder ? (_jsxs("div", { className: classes?.loadingContainer ||
+                    "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: classes?.loadingSpinner || "h-4 w-4 animate-spin" }), _jsx("span", { className: classes?.loadingText || "text-as-primary/70", children: "Creating onramp order..." })] })) : isLoading ? (_jsxs("div", { className: classes?.loadingContainer ||
+                    "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: classes?.loadingSpinner || "h-4 w-4 animate-spin" }), _jsx("span", { className: classes?.loadingText || "text-as-primary/70", children: "Loading payment options..." })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("h2", { className: classes?.paymentMethodTitle || "text-lg font-semibold", children: "Payment method" }), _jsx("div", { className: "flex items-center gap-1", children: coinbaseAvailablePaymentMethods.length > 0 &&
                                     (() => {
                                         const hasCard = coinbaseAvailablePaymentMethods.some(m => m.id === "CARD");
                                         const hasApplePay = coinbaseAvailablePaymentMethods.some(m => m.id === "APPLE_PAY");
@@ -103,6 +107,15 @@ function PanelOnrampPaymentInner(props) {
                                     })() })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [coinbaseAvailablePaymentMethods.length > 0 &&
                                 (() => {
                                     const method = coinbaseAvailablePaymentMethods[0];
-                                    return (_jsxs("button", { onClick: () => handlePaymentMethodClick("coinbase", method.id), disabled: isCreatingOrder, className: "bg-b3-react-background border-b3-react-border hover:border-as-brand disabled:hover:border-b3-react-border group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-50", children: _jsx("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "h-6" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Coinbase Pay" }), _jsxs("p", { className: "text-b3-react-foreground/60 text-sm", children: [method.id === "CARD" && "Debit card, bank account, or Coinbase Account", method.id === "FIAT_WALLET" && "Pay with your Coinbase account balance", method.id === "APPLE_PAY" && "Quick payment with Apple Pay", method.id === "ACH_BANK_ACCOUNT" && "Direct bank account transfer"] }), _jsx("div", { className: "mt-1 flex items-center gap-1", children: _jsx("span", { className: "text-xs font-medium text-green-600", children: "Free" }) })] })] }), _jsx(ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] }));
-                                })(), stripeOnrampSupport && (_jsxs("button", { onClick: () => handlePaymentMethodClick("stripe"), className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: _jsx("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Credit/Debit Card" }), _jsx("p", { className: "text-b3-react-foreground/60 text-sm", children: "Pay via Stripe checkout" }), stripeWeb2Support?.isSupport && stripeWeb2Support.formattedFeeUsd && (_jsx("div", { className: "mt-1", children: _jsxs("span", { className: "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), _jsx(ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), stripeWeb2Support.isSupport && (_jsxs("button", { onClick: () => handlePaymentMethodClick("stripe-web2"), className: "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: _jsx("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-b3-react-foreground text-lg font-semibold", children: "Quick Pay" }), _jsx("p", { className: "text-b3-react-foreground/60 text-sm", children: "Credit or debit card" }), stripeWeb2Support.formattedFeeUsd && (_jsx("div", { className: "mt-1", children: _jsxs("span", { className: "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), _jsx(ChevronRight, { className: "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), _jsxs(Button, { variant: "link", onClick: onBack, className: "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [_jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
+                                    return (_jsxs("button", { onClick: () => handlePaymentMethodClick("coinbase", method.id), disabled: isCreatingOrder, className: classes?.paymentOption ||
+                                            "bg-b3-react-background border-b3-react-border hover:border-as-brand disabled:hover:border-b3-react-border group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: [_jsxs("div", { className: classes?.paymentOptionContent || "flex items-center gap-4", children: [_jsx("div", { className: classes?.paymentOptionIcon ||
+                                                            "flex h-12 w-12 items-center justify-center rounded-full bg-blue-50", children: _jsx("img", { src: "https://cdn.b3.fun/coinbase-wordmark-blue.svg", alt: "Coinbase", className: "h-6" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: classes?.paymentOptionTitle || "text-b3-react-foreground text-lg font-semibold", children: "Coinbase Pay" }), _jsxs("p", { className: classes?.paymentOptionDescription || "text-b3-react-foreground/60 text-sm", children: [method.id === "CARD" && "Debit card, bank account, or Coinbase Account", method.id === "FIAT_WALLET" && "Pay with your Coinbase account balance", method.id === "APPLE_PAY" && "Quick payment with Apple Pay", method.id === "ACH_BANK_ACCOUNT" && "Direct bank account transfer"] }), _jsx("div", { className: "mt-1 flex items-center gap-1", children: _jsx("span", { className: classes?.paymentOptionFee || "text-xs font-medium text-green-600", children: "Free" }) })] })] }), _jsx(ChevronRight, { className: classes?.paymentOptionChevron ||
+                                                    "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] }));
+                                })(), stripeOnrampSupport && (_jsxs("button", { onClick: () => handlePaymentMethodClick("stripe"), className: classes?.paymentOption ||
+                                    "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: classes?.paymentOptionContent || "flex items-center gap-4", children: [_jsx("div", { className: classes?.paymentOptionIcon ||
+                                                    "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: _jsx("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: classes?.paymentOptionTitle || "text-b3-react-foreground text-lg font-semibold", children: "Credit/Debit Card" }), _jsx("p", { className: classes?.paymentOptionDescription || "text-b3-react-foreground/60 text-sm", children: "Pay via Stripe checkout" }), stripeWeb2Support?.isSupport && stripeWeb2Support.formattedFeeUsd && (_jsx("div", { className: "mt-1", children: _jsxs("span", { className: classes?.paymentOptionFee || "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), _jsx(ChevronRight, { className: classes?.paymentOptionChevron ||
+                                            "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), stripeWeb2Support.isSupport && (_jsxs("button", { onClick: () => handlePaymentMethodClick("stripe-web2"), className: classes?.paymentOption ||
+                                    "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: classes?.paymentOptionContent || "flex items-center gap-4", children: [_jsx("div", { className: classes?.paymentOptionIcon ||
+                                                    "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50", children: _jsx("img", { src: "https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg", alt: "Stripe", className: "h-5" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: classes?.paymentOptionTitle || "text-b3-react-foreground text-lg font-semibold", children: "Quick Pay" }), _jsx("p", { className: classes?.paymentOptionDescription || "text-b3-react-foreground/60 text-sm", children: "Credit or debit card" }), stripeWeb2Support.formattedFeeUsd && (_jsx("div", { className: "mt-1", children: _jsxs("span", { className: classes?.paymentOptionFee || "text-xs text-gray-500", children: ["$", Number(stripeWeb2Support.formattedFeeUsd).toFixed(2), " fee"] }) }))] })] }), _jsx(ChevronRight, { className: classes?.paymentOptionChevron ||
+                                            "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" })] })), _jsxs(Button, { variant: "link", onClick: onBack, className: classes?.backButton || "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full", children: [_jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }), "Back"] })] })] }))] }));
 }

package/dist/esm/anyspend/react/components/common/PointsDetailPanel.d.ts

@@ -1,6 +1,8 @@
+import type { PointsDetailPanelClasses } from "../types/classes";
 interface PointsDetailPanelProps {
     pointsAmount?: number;
     onBack: () => void;
+    classes?: PointsDetailPanelClasses;
 }
-export declare function PointsDetailPanel({ pointsAmount, onBack }: PointsDetailPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function PointsDetailPanel({ pointsAmount, onBack, classes }: PointsDetailPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/anyspend/react/components/common/PointsDetailPanel.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ShinyButton } from "../../../../global-account/react/index.js";
 import { cn } from "../../../../shared/utils/cn.js";
 import Link from "next/link";
-export function PointsDetailPanel({ pointsAmount = 0, onBack }) {
-    return (_jsx("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5", children: _jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [_jsx("h3", { className: "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), _jsxs("p", { className: "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn ", _jsxs("span", { className: "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", _jsx(Link, { href: "https://anyspend.com/points", target: "_blank", className: "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), _jsxs("div", { className: "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [_jsx("h4", { className: "text-as-primary mb-2 font-semibold", children: "How it works:" }), _jsxs("ul", { className: "text-as-primary/70 space-y-1 text-sm", children: [_jsx("li", { children: "\u2022 Points are earned based on transaction volume" }), _jsx("li", { children: "\u2022 Higher volume = more points" }), _jsx("li", { children: "\u2022 Points contribute to future airdrops" }), _jsx("li", { children: "\u2022 Keep swapping to maximize your rewards" })] })] }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: cn("as-main-button !bg-as-brand relative w-full"), textClassName: cn("text-white"), children: "Back to Swap" })] }) }));
+export function PointsDetailPanel({ pointsAmount = 0, onBack, classes }) {
+    return (_jsx("div", { className: classes?.container || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5", children: _jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [_jsx("h3", { className: classes?.title || "text-as-primary text-xl font-bold", children: "Earn Points with Every Swap" }), _jsxs("p", { className: classes?.description || "text-as-primary/70 text-balance text-sm leading-relaxed", children: ["You'll earn", " ", _jsxs("span", { className: classes?.highlightText || "text-as-brand font-semibold", children: ["+", pointsAmount.toLocaleString(), " points"] }), " ", "towards the", " ", _jsx(Link, { href: "https://anyspend.com/points", target: "_blank", className: classes?.link || "text-as-brand underline", children: "next AnySpend airdrop" }), " ", "when you complete this transaction."] }), _jsxs("div", { className: classes?.infoCard ||
+                        "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left", children: [_jsx("h4", { className: classes?.infoCardTitle || "text-as-primary mb-2 font-semibold", children: "How it works:" }), _jsxs("ul", { className: classes?.infoList || "text-as-primary/70 space-y-1 text-sm", children: [_jsx("li", { className: classes?.infoListItem, children: "\u2022 Points are earned based on transaction volume" }), _jsx("li", { className: classes?.infoListItem, children: "\u2022 Higher volume = more points" }), _jsx("li", { className: classes?.infoListItem, children: "\u2022 Points contribute to future airdrops" }), _jsx("li", { className: classes?.infoListItem, children: "\u2022 Keep swapping to maximize your rewards" })] })] }), _jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", onClick: onBack, className: classes?.backButton || cn("as-main-button !bg-as-brand relative w-full"), textClassName: cn("text-white"), children: "Back to Swap" })] }) }));
 }

package/dist/esm/anyspend/react/components/common/RecipientSelection.d.ts

@@ -1,3 +1,4 @@
+import type { RecipientSelectionClasses } from "../types/classes";
 export interface RecipientSelectionProps {
     /**
      * Initial recipient address value
@@ -38,5 +39,9 @@ export interface RecipientSelectionProps {
      * @returns true if valid, false otherwise
      */
     validateAddress?: (address: string) => boolean;
+    /**
+     * Custom classes for styling
+     */
+    classes?: RecipientSelectionClasses;
 }
-export declare function RecipientSelection({ initialValue, placeholder, title, description, confirmText, onBack, onConfirm, autoFocus, validateAddress, }: RecipientSelectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function RecipientSelection({ initialValue, placeholder, title, description, confirmText, onBack, onConfirm, autoFocus, validateAddress, classes, }: RecipientSelectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/common/RecipientSelection.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft } from "lucide-react";
 import { useEffect, useState } from "react";
-export function RecipientSelection({ initialValue = "", placeholder = "Enter recipient address", title = "Add recipient address or ENS", description = "Swap and send tokens to another address", confirmText = "Confirm recipient address", onBack, onConfirm, autoFocus = true, validateAddress, }) {
+export function RecipientSelection({ initialValue = "", placeholder = "Enter recipient address", title = "Add recipient address or ENS", description = "Swap and send tokens to another address", confirmText = "Confirm recipient address", onBack, onConfirm, autoFocus = true, validateAddress, classes, }) {
     const [recipientAddress, setRecipientAddress] = useState(initialValue);
     // Update internal state when initialValue changes
     useEffect(() => {
@@ -29,5 +29,8 @@ export function RecipientSelection({ initialValue = "", placeholder = "Enter rec
     };
     const isAddressValid = !validateAddress || !recipientAddress || validateAddress(recipientAddress);
     const canConfirm = recipientAddress && isAddressValid;
-    return (_jsx("div", { className: "recipient-selection mx-auto w-[460px] max-w-full p-5", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex justify-around", children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsxs("div", { className: "flex-1 text-center", children: [_jsx("h2", { className: "text-as-primary text-lg font-semibold", children: title }), _jsx("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [_jsx("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), _jsx("div", { className: "border-as-border-secondary border-l", children: _jsx("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && (_jsx("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), _jsx("button", { onClick: handleConfirm, disabled: !canConfirm, className: "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));
+    return (_jsx("div", { className: classes?.container || "recipient-selection mx-auto w-[460px] max-w-full p-5", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: classes?.header || "flex justify-around", children: [_jsx("button", { onClick: onBack, className: classes?.backButton ||
+                                "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsxs("div", { className: "flex-1 text-center", children: [_jsx("h2", { className: "text-as-primary text-lg font-semibold", children: title }), _jsx("p", { className: "text-as-primary/60 text-sm", children: description })] })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "bg-as-surface-secondary border-as-border-secondary flex h-12 w-full overflow-hidden rounded-xl border", children: [_jsx("input", { type: "text", placeholder: placeholder, value: recipientAddress, onChange: e => setRecipientAddress(e.target.value), onKeyDown: handleKeyDown, className: classes?.searchInput ||
+                                        "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none", autoFocus: autoFocus }), _jsx("div", { className: "border-as-border-secondary border-l", children: _jsx("button", { onClick: handlePaste, className: "text-as-primary/70 hover:text-as-primary hover:bg-as-surface-primary h-full px-4 font-semibold transition-colors", children: "Paste" }) })] }), recipientAddress && !isAddressValid && (_jsx("div", { className: "text-as-red text-sm", children: "Please enter a valid address" })), _jsx("button", { onClick: handleConfirm, disabled: !canConfirm, className: classes?.confirmButton ||
+                                "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed", children: confirmText })] })] }) }));
 }

package/dist/esm/anyspend/react/components/common/TabSection.d.ts

@@ -1,10 +1,12 @@
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
+import type { TabSectionClasses } from "../types/classes";
 interface TabSectionProps {
     activeTab: "crypto" | "fiat";
     setActiveTab: (tab: "crypto" | "fiat") => void;
     setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
     setSelectedFiatPaymentMethod: (method: FiatPaymentMethod) => void;
+    classes?: TabSectionClasses;
 }
-export declare function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, }: TabSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, classes, }: TabSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/anyspend/react/components/common/TabSection.js

@@ -2,14 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../shared/utils/cn.js";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
 import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
-export function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, }) {
-    return (_jsx("div", { className: "tab-section w-full", children: _jsxs("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+export function TabSection({ activeTab, setActiveTab, setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod, classes, }) {
+    return (_jsx("div", { className: classes?.root || "tab-section w-full", children: _jsxs("div", { className: classes?.container || "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn(classes?.tabIndicator ||
+                        "bg-as-brand absolute bottom-0 left-0 top-0 z-0 h-full w-1/2 rounded-xl transition-transform duration-100", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn(activeTab === "crypto"
+                        ? classes?.tabButtonActive ||
+                            "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium text-white transition-colors duration-100"
+                        : classes?.tabButton ||
+                            "text-as-primary/70 hover:bg-as-on-surface-2 relative z-10 h-full w-full rounded-xl bg-transparent px-3 text-sm font-medium transition-colors duration-100"), onClick: () => {
                         setActiveTab("crypto");
-                        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when switching to crypto
-                        setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to crypto
-                    }, children: "Pay with crypto" }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
+                        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+                        setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
+                    }, children: "Pay with crypto" }), _jsx("button", { className: cn(activeTab === "fiat"
+                        ? classes?.tabButtonActive ||
+                            "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium text-white transition-colors duration-100"
+                        : classes?.tabButton ||
+                            "text-as-primary/70 hover:bg-as-on-surface-2 relative z-10 h-full w-full rounded-xl bg-transparent px-3 text-sm font-medium transition-colors duration-100"), onClick: () => {
                         setActiveTab("fiat");
-                        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
-                        setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
+                        setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+                        setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
                     }, children: "Pay with Fiat" })] }) }));
 }

package/dist/esm/anyspend/react/components/common/TransferCryptoDetails.d.ts

@@ -1,5 +1,6 @@
 import { components } from "../../../../anyspend/types/api";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import type { TransferCryptoDetailsClasses } from "../types/classes";
 type Order = components["schemas"]["Order"];
 type Token = components["schemas"]["Token"];
 type Tournament = components["schemas"]["Tournament"];
@@ -13,6 +14,7 @@ interface TransferCryptoDetailsProps {
     onBack: () => void;
     recipientName?: string;
     onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
+    classes?: TransferCryptoDetailsClasses;
 }
 export declare const TransferCryptoDetails: import("react").NamedExoticComponent<TransferCryptoDetailsProps>;
 export {};

package/dist/esm/anyspend/react/components/common/TransferCryptoDetails.js

@@ -12,7 +12,7 @@ import { b3 } from "viem/chains";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod.js";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible.js";
 import { PaymentMethodSwitch } from "./PaymentMethodSwitch.js";
-export const TransferCryptoDetails = memo(function TransferCryptoDetails({ order, srcToken, dstToken, tournament, nft, onBack, recipientName, onPaymentMethodChange, }) {
+export const TransferCryptoDetails = memo(function TransferCryptoDetails({ order, srcToken, dstToken, tournament, nft, onBack, recipientName, onPaymentMethodChange, classes, }) {
     const [timeLeft, setTimeLeft] = useState(0);
     useEffect(() => {
         const calculateTimeLeft = () => {
@@ -63,7 +63,8 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({ order
         navigator.clipboard.writeText(order.globalAddress);
         toast.success("Deposit address copied to clipboard");
     };
-    return (_jsxs("div", { className: "order-transfer-crypto flex w-full flex-col gap-6", children: [_jsxs("div", { className: "order-transfer-crypto-header flex items-center justify-between", children: [_jsx("button", { onClick: onBack, className: "order-transfer-crypto-back-btn text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors", children: _jsx(ChevronLeft, { size: 24, className: "text-as-quaternary" }) }), _jsx("h2", { className: "order-transfer-crypto-title text-as-primary text-lg font-semibold", children: "Transfer crypto" }), _jsxs("div", { className: "order-transfer-crypto-timer relative flex h-11 w-11 items-center justify-center", children: [_jsxs("svg", { className: "order-transfer-crypto-timer-svg h-11 w-11 -rotate-90", viewBox: "0 0 44 44", children: [_jsx("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", className: "order-transfer-crypto-timer-bg text-gray-200" }), _jsx("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeLinecap: "round", className: "order-transfer-crypto-timer-progress text-blue-500", strokeDasharray: `${2 * Math.PI * 18}`, strokeDashoffset: `${2 * Math.PI * 18 * (1 - timeLeft / totalTime)}`, style: {
+    return (_jsxs("div", { className: classes?.container || "order-transfer-crypto flex w-full flex-col gap-6", children: [_jsxs("div", { className: classes?.header || "order-transfer-crypto-header flex items-center justify-between", children: [_jsx("button", { onClick: onBack, className: classes?.backButton ||
+                            "order-transfer-crypto-back-btn text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors", children: _jsx(ChevronLeft, { size: 24, className: "text-as-quaternary" }) }), _jsx("h2", { className: classes?.title || "order-transfer-crypto-title text-as-primary text-lg font-semibold", children: "Transfer crypto" }), _jsxs("div", { className: "order-transfer-crypto-timer relative flex h-11 w-11 items-center justify-center", children: [_jsxs("svg", { className: "order-transfer-crypto-timer-svg h-11 w-11 -rotate-90", viewBox: "0 0 44 44", children: [_jsx("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", className: "order-transfer-crypto-timer-bg text-gray-200" }), _jsx("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeLinecap: "round", className: "order-transfer-crypto-timer-progress text-blue-500", strokeDasharray: `${2 * Math.PI * 18}`, strokeDashoffset: `${2 * Math.PI * 18 * (1 - timeLeft / totalTime)}`, style: {
                                             transition: "stroke-dashoffset 1s linear",
                                         } })] }), _jsx("div", { className: "order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), _jsxs("div", { className: "order-transfer-crypto-content flex w-full flex-col gap-4", children: [_jsxs("div", { className: "order-transfer-crypto-cards flex items-center gap-4", children: [_jsxs("div", { className: "order-transfer-crypto-amount-card w-full", children: [_jsx("span", { className: "order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium", children: "Amount" }), _jsx("div", { className: "order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: _jsx(CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
                                                 toast.success("Amount copied to clipboard");

package/dist/esm/anyspend/react/components/common/WarningText.d.ts

@@ -1,8 +1,9 @@
+import type { ChainWarningTextClasses, WarningTextClasses } from "../types/classes";
 export interface WarningTextProps {
     /** The warning message content */
     children: React.ReactNode;
-    /** Additional CSS classes */
-    className?: string;
+    /** Custom classes for styling */
+    classes?: WarningTextClasses;
 }
 /**
  * A generic warning text component with consistent styling.
@@ -12,12 +13,12 @@ export interface WarningTextProps {
  *   Custom warning message
  * </WarningText>
  */
-export declare function WarningText({ children, className }: WarningTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function WarningText({ children, classes }: WarningTextProps): import("react/jsx-runtime").JSX.Element;
 export interface ChainWarningTextProps {
     /** The chain ID to display warning for */
     chainId: number;
-    /** Additional CSS classes */
-    className?: string;
+    /** Custom classes for styling */
+    classes?: ChainWarningTextClasses;
 }
 /**
  * A chain-aware warning text component that displays chain-specific warnings.
@@ -27,6 +28,6 @@ export interface ChainWarningTextProps {
  * <ChainWarningText chainId={HYPERLIQUID_CHAIN_ID} />
  *
  * @example
- * <ChainWarningText chainId={destinationChainId} className="mt-4" />
+ * <ChainWarningText chainId={destinationChainId} classes={{ root: "my-custom-class" }} />
  */
-export declare function ChainWarningText({ chainId, className }: ChainWarningTextProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChainWarningText({ chainId, classes }: ChainWarningTextProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/anyspend/react/components/common/WarningText.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HYPERLIQUID_CHAIN_ID } from "../../../../anyspend/index.js";
-import { cn } from "../../../../shared/utils/cn.js";
 /**
  * A generic warning text component with consistent styling.
  *
@@ -9,8 +8,8 @@ import { cn } from "../../../../shared/utils/cn.js";
  *   Custom warning message
  * </WarningText>
  */
-export function WarningText({ children, className }) {
-    return _jsx("p", { className: cn("anyspend-warning text-center text-xs italic text-red-500", className), children: children });
+export function WarningText({ children, classes }) {
+    return _jsx("p", { className: classes?.root || "anyspend-warning text-center text-xs italic text-red-500", children: children });
 }
 /**
  * A chain-aware warning text component that displays chain-specific warnings.
@@ -20,12 +19,12 @@ export function WarningText({ children, className }) {
  * <ChainWarningText chainId={HYPERLIQUID_CHAIN_ID} />
  *
  * @example
- * <ChainWarningText chainId={destinationChainId} className="mt-4" />
+ * <ChainWarningText chainId={destinationChainId} classes={{ root: "my-custom-class" }} />
  */
-export function ChainWarningText({ chainId, className }) {
+export function ChainWarningText({ chainId, classes }) {
     // Chain-specific warning messages
     if (chainId === HYPERLIQUID_CHAIN_ID) {
-        return (_jsxs(WarningText, { className: className, children: ["Minimum deposit amount: ", _jsx("b", { children: "$1" })] }));
+        return (_jsxs(WarningText, { classes: classes, children: ["Minimum deposit amount: ", _jsx("b", { children: "$1" })] }));
     }
     // No warning for this chain
     return null;

package/dist/esm/anyspend/react/components/index.d.ts

@@ -6,6 +6,7 @@ export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
 export { AnySpendDeposit } from "./AnySpendDeposit";
 export type { AnySpendDepositProps, ChainConfig, DepositContractConfig } from "./AnySpendDeposit";
+export type { AnySpendAllClasses, AnySpendClasses, AnySpendCustomExactInClasses, AnySpendDepositClasses, CryptoPaymentMethodClasses, CryptoPaySectionClasses, CryptoReceiveSectionClasses, FiatPaymentMethodClasses, OrderDetailsClasses, PanelOnrampClasses, QRDepositClasses, RecipientSelectionClasses, } from "./types/classes";
 export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";