@whop/embedded-components-vanilla-js 0.0.3-beta.2 → 0.0.4-beta.0

package/dist/lib/index.d.ts

@@ -1,78 +1,23 @@
 declare const locales: readonly ["en"];
 type I18nSupportedLocale = (typeof locales)[number];
 
-type CSSVariableKeys = 
-	| "--colorAccent"
-	| "--colorAccentContrast"
-	| "--colorDanger"
-	| "--colorDangerContrast"
-	| "--colorWarning"
-	| "--colorWarningContrast"
-	| "--colorSuccess"
-	| "--colorSuccessContrast"
-	| "--colorStroke"
-	| "--colorTextPrimary"
-	| "--colorTextSecondary"
-	| "--colorTextTertiary"
-	| "--colorBackgroundPrimary"
-	| "--colorBackgroundPrimaryContrast"
-	| "--colorBackgroundSecondary"
-	| "--colorBackgroundSecondaryContrast"
-	| "--colorSurface"
-	| "--fontSize1"
-	| "--fontSize2"
-	| "--fontSize3"
-	| "--fontSize4"
-	| "--fontSize5"
-	| "--fontSize6"
-	| "--fontSize7"
-	| "--fontSize8"
-	| "--fontSize9"
-	| "--fontLetterSpacing1"
-	| "--fontLetterSpacing2"
-	| "--fontLetterSpacing3"
-	| "--fontLetterSpacing4"
-	| "--fontLetterSpacing5"
-	| "--fontLetterSpacing6"
-	| "--fontLetterSpacing7"
-	| "--fontLetterSpacing8"
-	| "--fontLetterSpacing9"
-	| "--fontLineHeight1"
-	| "--fontLineHeight2"
-	| "--fontLineHeight3"
-	| "--fontLineHeight4"
-	| "--fontLineHeight5"
-	| "--fontLineHeight6"
-	| "--fontLineHeight7"
-	| "--fontLineHeight8"
-	| "--fontLineHeight9"
-	| "--fontWeightRegular"
-	| "--fontWeightMedium"
-	| "--fontWeightSemiBold"
-	| "--fontWeightBold"
-	| "--shadowSize1"
-	| "--cursorButton"
-	| "--spacing1"
-	| "--spacing2"
-	| "--spacing3"
-	| "--spacing4"
-	| "--spacing5"
-	| "--spacing6"
-	| "--spacing7"
-	| "--spacing8"
-	| "--spacing9"
-	| "--spacing10"
-	| "--radius1"
-	| "--radius2"
-	| "--spinnerOpacity"
-
 type CSSValue = string;
 type CSSProps = Record<string, CSSValue>;
 type Classes = Record<string, CSSProps>;
-type Variables = Partial<Record<CSSVariableKeys, string>>;
+type Variables = Record<`--${string}`, string>;
+type Theme = {
+    appearance?: "light" | "dark";
+    accentColor?: "ruby" | "blue" | "red" | "yellow" | "green" | "gray" | "tomato" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "cyan" | "teal" | "jade" | "grass" | "brown" | "orange" | "indigo" | "sky" | "mint" | "amber" | "lime" | "lemon" | "magenta" | "gold" | "bronze";
+    grayColor?: "gray" | "mauve" | "slate" | "sage" | "olive" | "sand" | "auto";
+    dangerColor?: "ruby" | "red" | "tomato";
+    warningColor?: "yellow" | "amber";
+    successColor?: "green" | "teal" | "jade" | "grass";
+    infoColor?: "sky" | "blue";
+};
 type Appearance = {
     variables?: Variables | null;
     classes?: Classes | null;
+    theme?: Theme | null;
 };
 
 interface EmbeddableElement {
@@ -119,16 +64,40 @@ interface BalanceElementEvents {
     ready: (element: BalanceElement) => void;
     optionsUpdated: (options: BalanceElementOptions) => void;
     snapshot: (snapshot: BalanceElementSnapshot) => void;
+    showTotalBalanceBreakdown: (ev: CustomEvent<BalanceElement>) => void;
+    showPendingBalanceBreakdown: (ev: CustomEvent<BalanceElement>) => void;
+    showRegularReserveBalanceBreakdown: (ev: CustomEvent<BalanceElement>) => void;
+    showBnplReserveBalanceBreakdown: (ev: CustomEvent<BalanceElement>) => void;
 }
 interface BalanceElementOptions {
     hidePendingBalance?: boolean;
     onReady?: (element: BalanceElement) => void;
+    onShowTotalBalanceBreakdown?: (ev: CustomEvent<BalanceElement>) => void;
+    onShowPendingBalanceBreakdown?: (ev: CustomEvent<BalanceElement>) => void;
+    onShowRegularReserveBalanceBreakdown?: (ev: CustomEvent<BalanceElement>) => void;
+    onShowBnplReserveBalanceBreakdown?: (ev: CustomEvent<BalanceElement>) => void;
 }
 interface BalanceElementSnapshot {
     state: "loading" | "ready";
 }
 type BalanceElement = WhopElement<BalanceElementOptions, BalanceElementEvents, BalanceElementSnapshot>;
 
+interface BnplReserveBalanceBreakdownElementEvents {
+    error: (error: unknown) => void;
+    ready: (element: BnplReserveBalanceBreakdownElement) => void;
+    optionsUpdated: (options: BnplReserveBalanceBreakdownElementOptions) => void;
+    close: (ev: CustomEvent) => void;
+    snapshot: (snapshot: BnplReserveBalanceBreakdownElementSnapshot) => void;
+}
+interface BnplReserveBalanceBreakdownElementOptions {
+    onReady?: (element: BnplReserveBalanceBreakdownElement) => void;
+    onClose?: (ev: CustomEvent) => void;
+}
+interface BnplReserveBalanceBreakdownElementSnapshot {
+    state: "loading" | "ready";
+}
+type BnplReserveBalanceBreakdownElement = WhopElement<BnplReserveBalanceBreakdownElementOptions, BnplReserveBalanceBreakdownElementEvents, BnplReserveBalanceBreakdownElementSnapshot>;
+
 interface ChangeAccountCountryElementEvents {
     error: (error: unknown) => void;
     ready: (element: ChangeAccountCountryElement) => void;
@@ -151,6 +120,38 @@ interface ChangeAccountCountryElementSnapshot {
 }
 type ChangeAccountCountryElement = WhopElement<ChangeAccountCountryElementOptions, ChangeAccountCountryElementEvents, ChangeAccountCountryElementSnapshot>;
 
+interface PendingBalanceBreakdownElementEvents {
+    error: (error: unknown) => void;
+    ready: (element: PendingBalanceBreakdownElement) => void;
+    optionsUpdated: (options: PendingBalanceBreakdownElementOptions) => void;
+    close: (ev: CustomEvent) => void;
+    snapshot: (snapshot: PendingBalanceBreakdownElementSnapshot) => void;
+}
+interface PendingBalanceBreakdownElementOptions {
+    onReady?: (element: PendingBalanceBreakdownElement) => void;
+    onClose?: (ev: CustomEvent) => void;
+}
+interface PendingBalanceBreakdownElementSnapshot {
+    state: "loading" | "ready";
+}
+type PendingBalanceBreakdownElement = WhopElement<PendingBalanceBreakdownElementOptions, PendingBalanceBreakdownElementEvents, PendingBalanceBreakdownElementSnapshot>;
+
+interface RegularReserveBalanceBreakdownElementEvents {
+    error: (error: unknown) => void;
+    ready: (element: RegularReserveBalanceBreakdownElement) => void;
+    optionsUpdated: (options: RegularReserveBalanceBreakdownElementOptions) => void;
+    close: (ev: CustomEvent) => void;
+    snapshot: (snapshot: RegularReserveBalanceBreakdownElementSnapshot) => void;
+}
+interface RegularReserveBalanceBreakdownElementOptions {
+    onReady?: (element: RegularReserveBalanceBreakdownElement) => void;
+    onClose?: (ev: CustomEvent) => void;
+}
+interface RegularReserveBalanceBreakdownElementSnapshot {
+    state: "loading" | "ready";
+}
+type RegularReserveBalanceBreakdownElement = WhopElement<RegularReserveBalanceBreakdownElementOptions, RegularReserveBalanceBreakdownElementEvents, RegularReserveBalanceBreakdownElementSnapshot>;
+
 interface ResetAccountElementEvents {
     error: (error: unknown) => void;
     ready: (element: ResetAccountElement) => void;
@@ -169,6 +170,22 @@ interface ResetAccountElementSnapshot {
 }
 type ResetAccountElement = WhopElement<ResetAccountElementOptions, ResetAccountElementEvents, ResetAccountElementSnapshot>;
 
+interface TotalBalanceBreakdownElementEvents {
+    error: (error: unknown) => void;
+    ready: (element: TotalBalanceBreakdownElement) => void;
+    optionsUpdated: (options: TotalBalanceBreakdownElementOptions) => void;
+    close: (ev: CustomEvent) => void;
+    snapshot: (snapshot: TotalBalanceBreakdownElementSnapshot) => void;
+}
+interface TotalBalanceBreakdownElementOptions {
+    onReady?: (element: TotalBalanceBreakdownElement) => void;
+    onClose?: (ev: CustomEvent) => void;
+}
+interface TotalBalanceBreakdownElementSnapshot {
+    state: "loading" | "ready";
+}
+type TotalBalanceBreakdownElement = WhopElement<TotalBalanceBreakdownElementOptions, TotalBalanceBreakdownElementEvents, TotalBalanceBreakdownElementSnapshot>;
+
 interface VerifyElementEvents {
     error: (error: unknown) => void;
     ready: (element: VerifyElement) => void;
@@ -341,6 +358,22 @@ type PayoutsSessionElements = {
         ChangeAccountCountryElement
     ];
     "reset-account-element": [ResetAccountElementOptions, ResetAccountElement];
+    "regular-reserve-balance-breakdown-element": [
+        RegularReserveBalanceBreakdownElementOptions,
+        RegularReserveBalanceBreakdownElement
+    ];
+    "bnpl-reserve-balance-breakdown-element": [
+        BnplReserveBalanceBreakdownElementOptions,
+        BnplReserveBalanceBreakdownElement
+    ];
+    "total-balance-breakdown-element": [
+        TotalBalanceBreakdownElementOptions,
+        TotalBalanceBreakdownElement
+    ];
+    "pending-balance-breakdown-element": [
+        PendingBalanceBreakdownElementOptions,
+        PendingBalanceBreakdownElement
+    ];
 };
 interface PayoutsSession extends TypedEmitter<PayoutsSessionEvents> {
     token: Promise<string | null>;
@@ -354,6 +387,10 @@ interface PayoutsSession extends TypedEmitter<PayoutsSessionEvents> {
     showWithdrawalBreakdownModal: <Force extends boolean = false>(options: WithdrawalBreakdownElementOptions | ((modal: ModalContainer) => WithdrawalBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     showChangeAccountCountryModal: <Force extends boolean = false>(options: ChangeAccountCountryElementOptions | ((modal: ModalContainer) => ChangeAccountCountryElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
     showResetAccountModal: <Force extends boolean = false>(options: ResetAccountElementOptions | ((modal: ModalContainer) => ResetAccountElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showTotalBalanceBreakdownModal: <Force extends boolean = false>(options: TotalBalanceBreakdownElementOptions | ((modal: ModalContainer) => TotalBalanceBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showPendingBalanceBreakdownModal: <Force extends boolean = false>(options: PendingBalanceBreakdownElementOptions | ((modal: ModalContainer) => PendingBalanceBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showRegularReserveBalanceBreakdownModal: <Force extends boolean = false>(options: RegularReserveBalanceBreakdownElementOptions | ((modal: ModalContainer) => RegularReserveBalanceBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
+    showBnplReserveBalanceBreakdownModal: <Force extends boolean = false>(options: BnplReserveBalanceBreakdownElementOptions | ((modal: ModalContainer) => BnplReserveBalanceBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
 }
 
 declare global {
@@ -376,7 +413,7 @@ type WhopElementsOptions = {
 type WhopElementsConstructor = {
     new (options?: WhopElementsOptions): WhopElements;
 };
-interface WhopElements {
+interface WhopElements extends TypedEmitter<WhopElementsEvents> {
     createPayoutsSession: (options: PayoutsSessionOptions) => PayoutsSession;
     updateOptions: (options: Partial<WhopElementsOptions>) => void;
     options: WhopElementsOptions;
@@ -385,4 +422,4 @@ interface WhopElementsEvents {
     optionsUpdated: (options: WhopElementsOptions) => void;
 }
 
-export type { Appearance, BalanceElement, BalanceElementOptions, BalanceElementSnapshot, CSSVariableKeys, ChangeAccountCountryElement, ChangeAccountCountryElementOptions, ChangeAccountCountryElementSnapshot, ExpandedPayoutsSessionOptions, GetToken, I18nSupportedLocale, PayoutsSession, PayoutsSessionEvents, PayoutsSessionOptions, ResetAccountElement, ResetAccountElementOptions, ResetAccountElementSnapshot, VerifyElement, VerifyElementOptions, VerifyElementSnapshot, WhopElement, WhopElements, WhopElementsConstructor, WhopElementsEvents, WhopElementsOptions, WithdrawButtonElement, WithdrawButtonElementOptions, WithdrawElement, WithdrawElementOptions, WithdrawElementSnapshot, WithdrawalBreakdownElement, WithdrawalBreakdownElementOptions, WithdrawalBreakdownElementSnapshot, WithdrawalsElement, WithdrawalsElementOptions, WithdrawalsElementSnapshot };
+export type { Appearance, BalanceElement, BalanceElementOptions, BalanceElementSnapshot, BnplReserveBalanceBreakdownElement, BnplReserveBalanceBreakdownElementOptions, BnplReserveBalanceBreakdownElementSnapshot, ChangeAccountCountryElement, ChangeAccountCountryElementOptions, ChangeAccountCountryElementSnapshot, ExpandedPayoutsSessionOptions, GetToken, I18nSupportedLocale, PayoutsSession, PayoutsSessionEvents, PayoutsSessionOptions, PendingBalanceBreakdownElement, PendingBalanceBreakdownElementOptions, PendingBalanceBreakdownElementSnapshot, RegularReserveBalanceBreakdownElement, RegularReserveBalanceBreakdownElementOptions, RegularReserveBalanceBreakdownElementSnapshot, ResetAccountElement, ResetAccountElementOptions, ResetAccountElementSnapshot, TotalBalanceBreakdownElement, TotalBalanceBreakdownElementOptions, TotalBalanceBreakdownElementSnapshot, VerifyElement, VerifyElementOptions, VerifyElementSnapshot, WhopElement, WhopElements, WhopElementsConstructor, WhopElementsEvents, WhopElementsOptions, WithdrawButtonElement, WithdrawButtonElementOptions, WithdrawElement, WithdrawElementOptions, WithdrawElementSnapshot, WithdrawalBreakdownElement, WithdrawalBreakdownElementOptions, WithdrawalBreakdownElementSnapshot, WithdrawalsElement, WithdrawalsElementOptions, WithdrawalsElementSnapshot };

package/dist/url.js

@@ -22,6 +22,6 @@ __export(url_exports, {
   SCRIPT_URL: () => SCRIPT_URL
 });
 module.exports = __toCommonJS(url_exports);
-const ORIGIN = "https://0-0-3-beta-2.elements.whop.com/";
+const ORIGIN = "https://0-0-4-beta-0.elements.whop.com/";
 const SCRIPT_URL = new URL(`/release/elements.js`, ORIGIN).toString();
 //# sourceMappingURL=url.js.map

package/dist/url.mjs

@@ -1,3 +1,3 @@
-const ORIGIN = "https://0-0-3-beta-2.elements.whop.com/";
+const ORIGIN = "https://0-0-4-beta-0.elements.whop.com/";
 const SCRIPT_URL = new URL(`/release/elements.js`, ORIGIN).toString();
 export { ORIGIN, SCRIPT_URL };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whop/embedded-components-vanilla-js",
-  "version": "0.0.3-beta.2",
+  "version": "0.0.4-beta.0",
   "description": "Whop Elements loading utility",
   "main": "dist/index.js",
   "module": "dist/index.mjs",