@b3dotfun/sdk 0.1.2-alpha.0 → 0.1.2-alpha.2

package/dist/cjs/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/cjs/anyspend/react/components/common/TransferCryptoDetails.js

@@ -15,7 +15,7 @@ const chains_1 = require("viem/chains");
 const CryptoPaymentMethod_1 = require("./CryptoPaymentMethod");
 const OrderDetailsCollapsible_1 = require("./OrderDetailsCollapsible");
 const PaymentMethodSwitch_1 = require("./PaymentMethodSwitch");
-exports.TransferCryptoDetails = (0, react_3.memo)(function TransferCryptoDetails({ order, srcToken, dstToken, tournament, nft, onBack, recipientName, onPaymentMethodChange, }) {
+exports.TransferCryptoDetails = (0, react_3.memo)(function TransferCryptoDetails({ order, srcToken, dstToken, tournament, nft, onBack, recipientName, onPaymentMethodChange, classes, }) {
     const [timeLeft, setTimeLeft] = (0, react_3.useState)(0);
     (0, react_3.useEffect)(() => {
         const calculateTimeLeft = () => {
@@ -66,7 +66,8 @@ exports.TransferCryptoDetails = (0, react_3.memo)(function TransferCryptoDetails
         navigator.clipboard.writeText(order.globalAddress);
         react_1.toast.success("Deposit address copied to clipboard");
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto flex w-full flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-header flex items-center justify-between", children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 24, className: "text-as-quaternary" }) }), (0, jsx_runtime_1.jsx)("h2", { className: "order-transfer-crypto-title text-as-primary text-lg font-semibold", children: "Transfer crypto" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-timer relative flex h-11 w-11 items-center justify-center", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "order-transfer-crypto-timer-svg h-11 w-11 -rotate-90", viewBox: "0 0 44 44", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", className: "order-transfer-crypto-timer-bg text-gray-200" }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: classes?.container || "order-transfer-crypto flex w-full flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: classes?.header || "order-transfer-crypto-header flex items-center justify-between", children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 24, className: "text-as-quaternary" }) }), (0, jsx_runtime_1.jsx)("h2", { className: classes?.title || "order-transfer-crypto-title text-as-primary text-lg font-semibold", children: "Transfer crypto" }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-timer relative flex h-11 w-11 items-center justify-center", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "order-transfer-crypto-timer-svg h-11 w-11 -rotate-90", viewBox: "0 0 44 44", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "22", cy: "22", r: "18", stroke: "currentColor", strokeWidth: "3", fill: "none", className: "order-transfer-crypto-timer-bg text-gray-200" }), (0, jsx_runtime_1.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",
                                         } })] }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-timer-text absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary text-[10px] font-semibold", children: formatTime(timeLeft) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-content flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-cards flex items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "order-transfer-crypto-amount-card w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: "order-transfer-crypto-amount-label text-as-content-secondary text-sm font-medium", children: "Amount" }), (0, jsx_runtime_1.jsx)("div", { className: "order-transfer-crypto-amount-container border-as-border-primary rounded-lg border p-2 shadow-sm", children: (0, jsx_runtime_1.jsx)(react_1.CopyToClipboard, { text: roundedUpSrcAmount || "", onCopy: () => {
                                                 react_1.toast.success("Amount copied to clipboard");

package/dist/cjs/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/cjs/anyspend/react/components/common/WarningText.js

@@ -4,7 +4,6 @@ exports.WarningText = WarningText;
 exports.ChainWarningText = ChainWarningText;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
-const cn_1 = require("../../../../shared/utils/cn");
 /**
  * A generic warning text component with consistent styling.
  *
@@ -13,8 +12,8 @@ const cn_1 = require("../../../../shared/utils/cn");
  *   Custom warning message
  * </WarningText>
  */
-function WarningText({ children, className }) {
-    return (0, jsx_runtime_1.jsx)("p", { className: (0, cn_1.cn)("anyspend-warning text-center text-xs italic text-red-500", className), children: children });
+function WarningText({ children, classes }) {
+    return (0, jsx_runtime_1.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.
@@ -24,12 +23,12 @@ function WarningText({ children, className }) {
  * <ChainWarningText chainId={HYPERLIQUID_CHAIN_ID} />
  *
  * @example
- * <ChainWarningText chainId={destinationChainId} className="mt-4" />
+ * <ChainWarningText chainId={destinationChainId} classes={{ root: "my-custom-class" }} />
  */
-function ChainWarningText({ chainId, className }) {
+function ChainWarningText({ chainId, classes }) {
     // Chain-specific warning messages
     if (chainId === anyspend_1.HYPERLIQUID_CHAIN_ID) {
-        return ((0, jsx_runtime_1.jsxs)(WarningText, { className: className, children: ["Minimum deposit amount: ", (0, jsx_runtime_1.jsx)("b", { children: "$1" })] }));
+        return ((0, jsx_runtime_1.jsxs)(WarningText, { classes: classes, children: ["Minimum deposit amount: ", (0, jsx_runtime_1.jsx)("b", { children: "$1" })] }));
     }
     // No warning for this chain
     return null;

package/dist/cjs/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";

package/dist/cjs/anyspend/react/components/types/classes.d.ts

@@ -0,0 +1,390 @@
+/**
+ * Classes prop types for AnySpend components customization.
+ * Use these to override default styling of specific elements.
+ */
+/** Classes for AnySpendDeposit component */
+export interface AnySpendDepositClasses {
+    root?: string;
+    chainSelection?: string;
+    form?: string;
+    formContent?: string;
+    closeButton?: string;
+    balanceContainer?: string;
+    balanceLabel?: string;
+    balanceValue?: string;
+    optionsContainer?: string;
+    chainsSkeleton?: string;
+    skeletonItem?: string;
+    chainsContainer?: string;
+    chainButton?: string;
+    chainContent?: string;
+    chainInfo?: string;
+    chainName?: string;
+    chainIcon?: string;
+    chainBalance?: string;
+    chainChevron?: string;
+    generalOptions?: string;
+    optionButton?: string;
+    cryptoButton?: string;
+    qrButton?: string;
+    fiatButton?: string;
+    optionContent?: string;
+    optionInfo?: string;
+    optionTitle?: string;
+    optionDescription?: string;
+    optionIcon?: string;
+    optionChevron?: string;
+    divider?: string;
+    dividerLine?: string;
+    dividerText?: string;
+    backButton?: string;
+    backIcon?: string;
+    backText?: string;
+    header?: string;
+    title?: string;
+}
+/** Classes for AnySpend component */
+export interface AnySpendClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    headerLogo?: string;
+    headerTitle?: string;
+    tabSection?: string;
+    tabList?: string;
+    tabTrigger?: string;
+    tabTriggerActive?: string;
+    mainContent?: string;
+    inputSection?: string;
+    swapDirectionButton?: string;
+    mainButton?: string;
+    mainButtonDisabled?: string;
+    mainButtonError?: string;
+    historyButton?: string;
+    bottomNavigation?: string;
+    gasIndicator?: string;
+}
+/** Classes for AnySpendCustomExactIn component */
+export interface AnySpendCustomExactInClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    headerTitle?: string;
+    headerDescription?: string;
+    contentArea?: string;
+    inputSection?: string;
+    swapDirectionButton?: string;
+    mainButton?: string;
+    mainButtonDisabled?: string;
+    mainButtonError?: string;
+    footer?: string;
+    gasIndicator?: string;
+}
+/** Classes for CryptoPaySection component */
+export interface CryptoPaySectionClasses {
+    root?: string;
+    container?: string;
+    label?: string;
+    inputContainer?: string;
+    input?: string;
+    tokenSelector?: string;
+    tokenIcon?: string;
+    tokenSymbol?: string;
+    chainBadge?: string;
+    balanceRow?: string;
+    balanceLabel?: string;
+    balanceValue?: string;
+    maxButton?: string;
+    paymentMethodButton?: string;
+    feeRow?: string;
+}
+/** Classes for CryptoReceiveSection component */
+export interface CryptoReceiveSectionClasses {
+    root?: string;
+    container?: string;
+    label?: string;
+    inputContainer?: string;
+    input?: string;
+    tokenSelector?: string;
+    tokenIcon?: string;
+    tokenSymbol?: string;
+    chainBadge?: string;
+    recipientRow?: string;
+    recipientLabel?: string;
+    recipientValue?: string;
+    recipientButton?: string;
+    pointsRow?: string;
+    feeRow?: string;
+}
+/** Classes for PanelOnramp component */
+export interface PanelOnrampClasses {
+    root?: string;
+    container?: string;
+    amountInput?: string;
+    presetButtons?: string;
+    presetButton?: string;
+    paymentMethodRow?: string;
+    recipientRow?: string;
+    destinationRow?: string;
+    feeRow?: string;
+    pointsRow?: string;
+}
+/** Classes for OrderDetails component */
+export interface OrderDetailsClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    statusBadge?: string;
+    statusPending?: string;
+    statusSuccess?: string;
+    statusFailed?: string;
+    amountSection?: string;
+    detailsSection?: string;
+    detailRow?: string;
+    detailLabel?: string;
+    detailValue?: string;
+    transactionLink?: string;
+    actionButton?: string;
+    backButton?: string;
+    returnButton?: string;
+}
+/** Classes for RecipientSelection component */
+export interface RecipientSelectionClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    searchInput?: string;
+    recipientList?: string;
+    recipientItem?: string;
+    recipientItemActive?: string;
+    recipientAvatar?: string;
+    recipientName?: string;
+    recipientAddress?: string;
+    confirmButton?: string;
+    backButton?: string;
+}
+/** Classes for CryptoPaymentMethod component */
+export interface CryptoPaymentMethodClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    optionsList?: string;
+    optionItem?: string;
+    optionItemActive?: string;
+    optionIcon?: string;
+    optionLabel?: string;
+    optionDescription?: string;
+    backButton?: string;
+}
+/** Classes for FiatPaymentMethod component */
+export interface FiatPaymentMethodClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    optionsList?: string;
+    optionItem?: string;
+    optionItemActive?: string;
+    optionIcon?: string;
+    optionLabel?: string;
+    optionDescription?: string;
+    backButton?: string;
+}
+/** Classes for WarningText component */
+export interface WarningTextClasses {
+    root?: string;
+}
+/** Classes for ChainWarningText component */
+export interface ChainWarningTextClasses {
+    root?: string;
+}
+/** Classes for TabSection component */
+export interface TabSectionClasses {
+    root?: string;
+    container?: string;
+    tabIndicator?: string;
+    tabButton?: string;
+    tabButtonActive?: string;
+}
+/** Classes for FeeDetailPanel component */
+export interface FeeDetailPanelClasses {
+    root?: string;
+    container?: string;
+    title?: string;
+    tierCard?: string;
+    tierCardTitle?: string;
+    tierRow?: string;
+    tierRowActive?: string;
+    tierLabel?: string;
+    tierValue?: string;
+    expandButton?: string;
+    summaryCard?: string;
+    summaryRow?: string;
+    summaryLabel?: string;
+    summaryValue?: string;
+    summaryDivider?: string;
+    totalRow?: string;
+    totalLabel?: string;
+    totalValue?: string;
+    backButton?: string;
+}
+/** Classes for PointsDetailPanel component */
+export interface PointsDetailPanelClasses {
+    root?: string;
+    container?: string;
+    title?: string;
+    description?: string;
+    highlightText?: string;
+    link?: string;
+    infoCard?: string;
+    infoCardTitle?: string;
+    infoList?: string;
+    infoListItem?: string;
+    backButton?: string;
+}
+/** Classes for PanelOnrampPayment component */
+export interface PanelOnrampPaymentClasses {
+    root?: string;
+    container?: string;
+    summaryTitle?: string;
+    summaryCard?: string;
+    summaryRow?: string;
+    summaryLabel?: string;
+    summaryValue?: string;
+    summaryDivider?: string;
+    amountRow?: string;
+    amountValue?: string;
+    feeText?: string;
+    loadingContainer?: string;
+    loadingSpinner?: string;
+    loadingText?: string;
+    paymentMethodTitle?: string;
+    paymentMethodIcons?: string;
+    paymentOption?: string;
+    paymentOptionIcon?: string;
+    paymentOptionContent?: string;
+    paymentOptionTitle?: string;
+    paymentOptionDescription?: string;
+    paymentOptionFee?: string;
+    paymentOptionChevron?: string;
+    backButton?: string;
+}
+/** Classes for OrderDetailsCollapsible component */
+export interface OrderDetailsCollapsibleClasses {
+    root?: string;
+    container?: string;
+    expandedContent?: string;
+    recipientSection?: string;
+    recipientLabel?: string;
+    recipientInfo?: string;
+    recipientName?: string;
+    recipientAddress?: string;
+    recipientCopyIcon?: string;
+    divider?: string;
+    expectedSection?: string;
+    expectedLabel?: string;
+    expectedValue?: string;
+    expectedAmount?: string;
+    chainInfo?: string;
+    chainText?: string;
+    chainLogo?: string;
+    pointsSection?: string;
+    pointsLabel?: string;
+    pointsValue?: string;
+    idSection?: string;
+    idLabel?: string;
+    idValue?: string;
+    collapsedContainer?: string;
+    collapsedButton?: string;
+    collapsedChevron?: string;
+}
+/** Classes for TransferCryptoDetails component */
+export interface TransferCryptoDetailsClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    backButton?: string;
+    title?: string;
+    timer?: string;
+    timerSvg?: string;
+    timerBackground?: string;
+    timerProgress?: string;
+    timerText?: string;
+    cardsContainer?: string;
+    amountCard?: string;
+    amountLabel?: string;
+    amountContainer?: string;
+    amountText?: string;
+    amountCopyIcon?: string;
+    chainCard?: string;
+    chainLabel?: string;
+    chainContainer?: string;
+    chainLogo?: string;
+    chainName?: string;
+    qrDepositCard?: string;
+    qrSection?: string;
+    qrWrapper?: string;
+    qrContainer?: string;
+    qrCode?: string;
+    walletHint?: string;
+    walletText?: string;
+    walletIcon?: string;
+    addressSection?: string;
+    addressLabel?: string;
+    addressCopyContainer?: string;
+    addressText?: string;
+    addressCopyIcon?: string;
+    actionsContainer?: string;
+    copyButton?: string;
+}
+/** Classes for QRDeposit component */
+export interface QRDepositClasses {
+    root?: string;
+    container?: string;
+    content?: string;
+    header?: string;
+    backButton?: string;
+    title?: string;
+    closeButton?: string;
+    tokenSelectorContainer?: string;
+    tokenSelectorLabel?: string;
+    tokenSelectorTrigger?: string;
+    qrContent?: string;
+    qrCodeContainer?: string;
+    qrCode?: string;
+    qrScanHint?: string;
+    addressContainer?: string;
+    addressLabel?: string;
+    addressRow?: string;
+    address?: string;
+    addressCopyIcon?: string;
+    watchingIndicator?: string;
+    copyButton?: string;
+    loadingContainer?: string;
+    loadingContent?: string;
+    loadingSpinner?: string;
+    loadingText?: string;
+    orderDetailsContainer?: string;
+    orderDetailsContent?: string;
+}
+/** Combined classes for all AnySpend-related components */
+export interface AnySpendAllClasses {
+    deposit?: AnySpendDepositClasses;
+    anySpend?: AnySpendClasses;
+    customExactIn?: AnySpendCustomExactInClasses;
+    cryptoPaySection?: CryptoPaySectionClasses;
+    cryptoReceiveSection?: CryptoReceiveSectionClasses;
+    panelOnramp?: PanelOnrampClasses;
+    orderDetails?: OrderDetailsClasses;
+    recipientSelection?: RecipientSelectionClasses;
+    cryptoPaymentMethod?: CryptoPaymentMethodClasses;
+    fiatPaymentMethod?: FiatPaymentMethodClasses;
+    qrDeposit?: QRDepositClasses;
+    warningText?: WarningTextClasses;
+    chainWarningText?: ChainWarningTextClasses;
+    tabSection?: TabSectionClasses;
+    feeDetailPanel?: FeeDetailPanelClasses;
+    pointsDetailPanel?: PointsDetailPanelClasses;
+    panelOnrampPayment?: PanelOnrampPaymentClasses;
+    orderDetailsCollapsible?: OrderDetailsCollapsibleClasses;
+    transferCryptoDetails?: TransferCryptoDetailsClasses;
+}

package/dist/cjs/anyspend/react/components/types/classes.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * Classes prop types for AnySpend components customization.
+ * Use these to override default styling of specific elements.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/global-account/react/stores/useModalStore.d.ts

@@ -1,3 +1,4 @@
+import { AnySpendAllClasses } from "../../../anyspend/react";
 import { components } from "../../../anyspend/types/api";
 import { GenerateSigMintResponse } from "../../../anyspend/types/signatureMint";
 import { AllowedStrategy } from "../../../global-account/react";
@@ -541,6 +542,8 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
     returnHomeLabel?: string;
     /** Whether the deposit requires a custom function (uses AnySpendCustomExactIn). Defaults to false. */
     isCustomDeposit?: boolean;
+    /** Custom class names for styling specific elements */
+    classes?: AnySpendAllClasses;
 }
 /**
  * Union type of all possible modal content types

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

@@ -1,4 +1,5 @@
 import { components } from "../../types/api";
+import type { AnySpendClasses } from "./types/classes";
 export interface RecipientOption {
     address: string;
     icon?: string;
@@ -45,4 +46,6 @@ export declare function AnySpend(props: {
     customRecipientLabel?: string;
     /** Custom label for the return home button (overrides "Return to Home" / "Close") */
     returnHomeLabel?: string;
+    /** Custom class names for styling specific elements */
+    classes?: AnySpendClasses;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/anyspend/react/components/AnySpend.js

@@ -51,7 +51,7 @@ export function AnySpend(props) {
     const fingerprintConfig = getFingerprintConfig();
     return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendInner, { ...props }) }));
 }
-function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, }) {
+function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, }) {
     const searchParams = useSearchParamsSSR();
     const router = useRouter();
     const { partnerId } = useB3Config();
@@ -825,7 +825,7 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                     // Reset payment methods when going back
                     resetPaymentMethods();
                 }, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel, disableUrlParamManagement: disableUrlParamManagement })) }) }));
-    const mainView = (_jsxs("div", { className: "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [_jsxs("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && (_jsxs("div", { className: "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: tab => {
+    const mainView = (_jsxs("div", { className: classes?.mainContent || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5", children: [_jsxs("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && (_jsxs("div", { className: classes?.header || "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: classes?.headerLogo || "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: tab => {
                             setActiveTab(tab);
                             // Reset payment methods when switching tabs
                             resetPaymentMethods();
@@ -839,7 +839,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                                         else {
                                             setActivePanel(panelIndex);
                                         }
-                                    }, _recipientAddress: effectiveRecipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), activeTab === "crypto" && (_jsx("div", { className: "z-10 -my-6 flex justify-center", children: _jsx(Button, { variant: "ghost", className: cn("border-as-stroke bg-as-surface-primary h-10 w-10 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "cursor-default", selectedDstChainId === HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50"), onClick: () => {
+                                    }, _recipientAddress: effectiveRecipientAddress, destinationToken: selectedDstToken, destinationChainId: selectedDstChainId, destinationAmount: dstAmount, onDestinationTokenChange: setSelectedDstToken, onDestinationChainChange: setSelectedDstChainId, fiatPaymentMethodIndex: PanelView.FIAT_PAYMENT_METHOD, recipientSelectionPanelIndex: PanelView.RECIPIENT_SELECTION, hideDstToken: isBuyMode, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward"), customUsdInputValues: customUsdInputValues, customRecipientLabel: customRecipientLabel }) })), activeTab === "crypto" && (_jsx("div", { className: "z-10 -my-6 flex justify-center", children: _jsx(Button, { variant: "ghost", className: classes?.swapDirectionButton ||
+                                        cn("border-as-stroke bg-as-surface-primary h-10 w-10 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl", isBuyMode && "cursor-default", selectedDstChainId === HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50"), onClick: () => {
                                         if (isBuyMode) {
                                             return;
                                         }
@@ -859,7 +860,11 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
                                     }, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }) })), activeTab === "crypto" && (_jsx(CryptoReceiveSection, { isDepositMode: false, isBuyMode: isBuyMode, effectiveRecipientAddress: effectiveRecipientAddress, recipientName: recipientName || undefined, customRecipientLabel: customRecipientLabel, onSelectRecipient: () => navigateToPanel(PanelView.RECIPIENT_SELECTION, "forward"), dstAmount: dstAmount, dstToken: selectedDstToken, selectedDstChainId: selectedDstChainId, setSelectedDstChainId: setSelectedDstChainId, setSelectedDstToken: setSelectedDstToken, isSrcInputDirty: isSrcInputDirty, onChangeDstAmount: value => {
                                     setIsSrcInputDirty(false);
                                     setDstAmount(value);
-                                }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), gasPriceData && !isLoadingGas && activeTab === "crypto" && (_jsx(GasIndicator, { gasPrice: gasPriceData, className: "mt-2 w-full" })), _jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }), _jsx("div", { className: "w-full", children: _jsx(TabsPrimitive, { defaultValue: "swap", onValueChange: value => {
+                                }, anyspendQuote: anyspendQuote, onShowPointsDetail: () => navigateToPanel(PanelView.POINTS_DETAIL, "forward"), onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") }))] }), gasPriceData && !isLoadingGas && activeTab === "crypto" && (_jsx(GasIndicator, { gasPrice: gasPriceData, className: classes?.gasIndicator || "mt-2 w-full" })), _jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: cn("mt-4 flex w-full max-w-[460px] flex-col gap-2"), children: [_jsx(ShinyButton, { accentColor: "hsl(var(--as-brand))", disabled: btnInfo.disable, onClick: onMainButtonClick, className: (btnInfo.error && classes?.mainButtonError) ||
+                                    (btnInfo.disable && classes?.mainButtonDisabled) ||
+                                    classes?.mainButton ||
+                                    cn("as-main-button relative w-full", btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand"), textClassName: cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white"), children: _jsxs("div", { className: "flex items-center justify-center gap-2", children: [btnInfo.loading && _jsx(Loader2, { className: "h-4 w-4 animate-spin" }), btnInfo.text] }) }), !hideTransactionHistoryButton && (globalAddress || effectiveRecipientAddress) ? (_jsxs(Button, { variant: "link", onClick: onClickHistory, className: classes?.historyButton ||
+                                    "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors", children: [_jsx(HistoryIcon, { className: "h-4 w-4" }), " ", _jsx("span", { className: "pr-4", children: "Transaction History" })] })) : null] })] }), _jsx("div", { className: "w-full", children: _jsx(TabsPrimitive, { defaultValue: "swap", onValueChange: value => {
                         if (value === "settings" || value === "home") {
                             setB3ModalContentType({
                                 type: "manageAccount",
@@ -912,8 +917,9 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
     const pointsDetailView = (_jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: navigateBack }));
     const feeDetailView = anyspendQuote?.data?.fee ? (_jsx(FeeDetailPanel, { fee: anyspendQuote.data.fee, transactionAmountUsd: activeTab === "crypto" ? Number(anyspendQuote.data.currencyIn?.amountUsd) : parseFloat(srcAmountOnRamp), onBack: navigateBack })) : null;
     // Add tabs to the main component when no order is loaded
-    return (_jsx(StyleRoot, { children: _jsx("div", { className: cn("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
-                "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
+    return (_jsx(StyleRoot, { children: _jsx("div", { className: classes?.container ||
+                cn("anyspend-container font-inter mx-auto w-full max-w-[460px]", mode === "page" &&
+                    "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
                     ? oat
                         ? PanelView.ORDER_DETAILS
                         : PanelView.LOADING

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

@@ -1,5 +1,6 @@
 import { components } from "../../../anyspend/types/api";
 import { GetQuoteResponse } from "../../../anyspend/types/api_req_res";
+import type { AnySpendCustomExactInClasses } from "./types/classes";
 type CustomExactInConfig = {
     functionAbi: string;
     functionName: string;
@@ -38,6 +39,8 @@ export interface AnySpendCustomExactInProps {
     customRecipientLabel?: string;
     /** Custom label for the return home button (overrides "Return to Home" / "Close") */
     returnHomeLabel?: string;
+    /** Custom class names for styling specific elements */
+    classes?: AnySpendCustomExactInClasses;
 }
 export declare function AnySpendCustomExactIn(props: AnySpendCustomExactInProps): import("react/jsx-runtime").JSX.Element;
 export {};