@whop/embedded-components-react-js 0.0.11 → 0.0.13-beta.10

package/dist/{lib → payouts}/with-fallback.js

@@ -33,8 +33,8 @@ __export(with_fallback_exports, {
 });
 module.exports = __toCommonJS(with_fallback_exports);
 var import_react = __toESM(require("react"));
-var import_session = require("../payouts/session");
-var import_use_element_snapshot = require("./use-element-snapshot");
+var import_use_element_snapshot = require("../lib/use-element-snapshot");
+var import_session = require("./session");
 function withFallback(Component) {
   function WrappedElement({
     options,

package/dist/{lib → payouts}/with-fallback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tPayoutsSessionElements,\n\tWhopElement,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { usePayoutsSession } from \"../payouts/session\";\nimport { useElementSnapshot } from \"./use-element-snapshot\";\n\n/**\n * Valid element type strings that can be passed to createElement.\n */\ntype ElementType = keyof PayoutsSessionElements;\n\n/**\n * Extract the options type for a given element type using indexed access.\n * PayoutsSessionElements maps element types to [Options, Element] tuples.\n */\ntype ElementOptionsFor<T extends ElementType> = PayoutsSessionElements[T][0];\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * Component definition with a constrained element type.\n * The type must be a valid element type from the SDK.\n */\ninterface ElementComponentDefinition<T extends ElementType = ElementType> {\n\tdisplayName: string;\n\ttype: T;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<TOptions>\n\textends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<TOptions>\n\textends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Creates a React component that wraps an embedded element with fallback support.\n *\n * @example\n * ```tsx\n * // Type-safe: options type is inferred from the element type\n * export const BalanceElement = withFallback({\n *   displayName: \"BalanceElement\",\n *   type: \"balance-element\",\n * } as const);\n *\n * // Usage - TypeScript knows the correct options type\n * <BalanceElement options={{ hidePendingBalance: true }} />\n * ```\n */\nexport function withFallback<\n\tconst T extends ElementType,\n\tTRequired extends boolean = false,\n>(\n\tComponent: ElementComponentDefinition<T>,\n): WithFallbackComponent<ElementOptionsFor<T>, TRequired> {\n\ttype TOptions = ElementOptionsFor<T>;\n\n\tfunction WrappedElement({\n\t\toptions,\n\t\tclassName,\n\t\tstyle,\n\t\tonReady,\n\t\tfallback,\n\t}: WithFallbackPropsOptional<TOptions>) {\n\t\tconst payoutsSession = usePayoutsSession();\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\tif (!payoutsSession) return null;\n\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\treturn payoutsSession.createElement(Component, options ?? {});\n\t\t}, [payoutsSession]);\n\n\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\tuseEffect(() => {\n\t\t\tif (!element) return;\n\t\t\telement.updateOptions(options ?? {});\n\t\t}, [options, element]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!element || !onReady) return;\n\t\t\telement.on(\"ready\", onReady);\n\t\t\treturn () => {\n\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t};\n\t\t}, [element, onReady]);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (!element || !ref.current) return;\n\t\t\telement.mount(ref.current);\n\t\t\treturn () => {\n\t\t\t\telement.unmount();\n\t\t\t};\n\t\t}, [element, ref.current]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t</>\n\t\t);\n\t}\n\n\tWrappedElement.displayName = Component.displayName;\n\tWrappedElement.type = Component.type;\n\n\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,mBAAmE;AACnE,qBAAkC;AAClC,kCAAmC;AAwE5B,SAAS,aAIf,WACyD;AAGzD,WAAS,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,UAAM,qBAAiB,kCAAkB;AACzC,UAAM,UAAM,qBAAuB,IAAI;AAEvC,UAAM,cAAU,sBAAQ,MAA0B;AACjD,UAAI,CAAC,eAAgB,QAAO;AAE5B,aAAO,eAAe,cAAc,WAAW,WAAW,CAAC,CAAC;AAAA,IAC7D,GAAG,CAAC,cAAc,CAAC;AAEnB,UAAM,sBAAkB,gDAAmB,OAAO;AAElD,UAAM,UAAU,iBAAiB,UAAU;AAE3C,gCAAU,MAAM;AACf,UAAI,CAAC,QAAS;AACd,cAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,gCAAU,MAAM;AACf,UAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,cAAQ,GAAG,SAAS,OAAO;AAC3B,aAAO,MAAM;AACZ,gBAAQ,IAAI,SAAS,OAAO;AAAA,MAC7B;AAAA,IACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,sCAAgB,MAAM;AACrB,UAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,cAAQ,MAAM,IAAI,OAAO;AACzB,aAAO,MAAM;AACZ,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,WACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,QAC9D;AAAA,QACA;AAAA;AAAA,IACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,EAEF;AAEA,iBAAe,cAAc,UAAU;AACvC,iBAAe,OAAO,UAAU;AAEhC,SAAO;AACR;","names":["React"]}
+{"version":3,"sources":["../../src/payouts/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tPayoutsSessionElements,\n\tWhopElement,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"./session\";\n\n/**\n * Valid element type strings that can be passed to createElement.\n */\ntype ElementType = keyof PayoutsSessionElements;\n\n/**\n * Extract the options type for a given element type using indexed access.\n * PayoutsSessionElements maps element types to [Options, Element] tuples.\n */\ntype ElementOptionsFor<T extends ElementType> = PayoutsSessionElements[T][0];\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * Component definition with a constrained element type.\n * The type must be a valid element type from the SDK.\n */\ninterface ElementComponentDefinition<T extends ElementType = ElementType> {\n\tdisplayName: string;\n\ttype: T;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<TOptions>\n\textends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<TOptions>\n\textends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Creates a React component that wraps an embedded element with fallback support.\n *\n * @example\n * ```tsx\n * // Type-safe: options type is inferred from the element type\n * export const BalanceElement = withFallback({\n *   displayName: \"BalanceElement\",\n *   type: \"balance-element\",\n * } as const);\n *\n * // Usage - TypeScript knows the correct options type\n * <BalanceElement options={{ hidePendingBalance: true }} />\n * ```\n */\nexport function withFallback<\n\tconst T extends ElementType,\n\tTRequired extends boolean = false,\n>(\n\tComponent: ElementComponentDefinition<T>,\n): WithFallbackComponent<ElementOptionsFor<T>, TRequired> {\n\ttype TOptions = ElementOptionsFor<T>;\n\n\tfunction WrappedElement({\n\t\toptions,\n\t\tclassName,\n\t\tstyle,\n\t\tonReady,\n\t\tfallback,\n\t}: WithFallbackPropsOptional<TOptions>) {\n\t\tconst payoutsSession = usePayoutsSession();\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\tif (!payoutsSession) return null;\n\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\treturn payoutsSession.createElement(Component, options ?? {});\n\t\t}, [payoutsSession]);\n\n\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\tuseEffect(() => {\n\t\t\tif (!element) return;\n\t\t\telement.updateOptions(options ?? {});\n\t\t}, [options, element]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!element || !onReady) return;\n\t\t\telement.on(\"ready\", onReady);\n\t\t\treturn () => {\n\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t};\n\t\t}, [element, onReady]);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (!element || !ref.current) return;\n\t\t\telement.mount(ref.current);\n\t\t\treturn () => {\n\t\t\t\telement.unmount();\n\t\t\t};\n\t\t}, [element, ref.current]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t</>\n\t\t);\n\t}\n\n\tWrappedElement.displayName = Component.displayName;\n\tWrappedElement.type = Component.type;\n\n\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,mBAAmE;AACnE,kCAAmC;AACnC,qBAAkC;AAwE3B,SAAS,aAIf,WACyD;AAGzD,WAAS,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,UAAM,qBAAiB,kCAAkB;AACzC,UAAM,UAAM,qBAAuB,IAAI;AAEvC,UAAM,cAAU,sBAAQ,MAA0B;AACjD,UAAI,CAAC,eAAgB,QAAO;AAE5B,aAAO,eAAe,cAAc,WAAW,WAAW,CAAC,CAAC;AAAA,IAC7D,GAAG,CAAC,cAAc,CAAC;AAEnB,UAAM,sBAAkB,gDAAmB,OAAO;AAElD,UAAM,UAAU,iBAAiB,UAAU;AAE3C,gCAAU,MAAM;AACf,UAAI,CAAC,QAAS;AACd,cAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,gCAAU,MAAM;AACf,UAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,cAAQ,GAAG,SAAS,OAAO;AAC3B,aAAO,MAAM;AACZ,gBAAQ,IAAI,SAAS,OAAO;AAAA,MAC7B;AAAA,IACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,sCAAgB,MAAM;AACrB,UAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,cAAQ,MAAM,IAAI,OAAO;AACzB,aAAO,MAAM;AACZ,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,WACC,6BAAAA,QAAA,2BAAAA,QAAA,gBACC,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,QAC9D;AAAA,QACA;AAAA;AAAA,IACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,EAEF;AAEA,iBAAe,cAAc,UAAU;AACvC,iBAAe,OAAO,UAAU;AAEhC,SAAO;AACR;","names":["React"]}

package/dist/{lib → payouts}/with-fallback.mjs

@@ -1,8 +1,8 @@
 "use client";
 import "../chunk-NSSMTXJJ.mjs";
 import React, { useEffect, useLayoutEffect, useMemo, useRef } from "react";
-import { usePayoutsSession } from "../payouts/session.mjs";
-import { useElementSnapshot } from "./use-element-snapshot.mjs";
+import { useElementSnapshot } from "../lib/use-element-snapshot.mjs";
+import { usePayoutsSession } from "./session.mjs";
 function withFallback(Component) {
     function WrappedElement({ options, className, style, onReady, fallback }) {
         const payoutsSession = usePayoutsSession();

package/dist/{lib → payouts}/with-fallback.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tPayoutsSessionElements,\n\tWhopElement,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { usePayoutsSession } from \"../payouts/session\";\nimport { useElementSnapshot } from \"./use-element-snapshot\";\n\n/**\n * Valid element type strings that can be passed to createElement.\n */\ntype ElementType = keyof PayoutsSessionElements;\n\n/**\n * Extract the options type for a given element type using indexed access.\n * PayoutsSessionElements maps element types to [Options, Element] tuples.\n */\ntype ElementOptionsFor<T extends ElementType> = PayoutsSessionElements[T][0];\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * Component definition with a constrained element type.\n * The type must be a valid element type from the SDK.\n */\ninterface ElementComponentDefinition<T extends ElementType = ElementType> {\n\tdisplayName: string;\n\ttype: T;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<TOptions>\n\textends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<TOptions>\n\textends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Creates a React component that wraps an embedded element with fallback support.\n *\n * @example\n * ```tsx\n * // Type-safe: options type is inferred from the element type\n * export const BalanceElement = withFallback({\n *   displayName: \"BalanceElement\",\n *   type: \"balance-element\",\n * } as const);\n *\n * // Usage - TypeScript knows the correct options type\n * <BalanceElement options={{ hidePendingBalance: true }} />\n * ```\n */\nexport function withFallback<\n\tconst T extends ElementType,\n\tTRequired extends boolean = false,\n>(\n\tComponent: ElementComponentDefinition<T>,\n): WithFallbackComponent<ElementOptionsFor<T>, TRequired> {\n\ttype TOptions = ElementOptionsFor<T>;\n\n\tfunction WrappedElement({\n\t\toptions,\n\t\tclassName,\n\t\tstyle,\n\t\tonReady,\n\t\tfallback,\n\t}: WithFallbackPropsOptional<TOptions>) {\n\t\tconst payoutsSession = usePayoutsSession();\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\tif (!payoutsSession) return null;\n\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\treturn payoutsSession.createElement(Component, options ?? {});\n\t\t}, [payoutsSession]);\n\n\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\tuseEffect(() => {\n\t\t\tif (!element) return;\n\t\t\telement.updateOptions(options ?? {});\n\t\t}, [options, element]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!element || !onReady) return;\n\t\t\telement.on(\"ready\", onReady);\n\t\t\treturn () => {\n\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t};\n\t\t}, [element, onReady]);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (!element || !ref.current) return;\n\t\t\telement.mount(ref.current);\n\t\t\treturn () => {\n\t\t\t\telement.unmount();\n\t\t\t};\n\t\t}, [element, ref.current]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t</>\n\t\t);\n\t}\n\n\tWrappedElement.displayName = Component.displayName;\n\tWrappedElement.type = Component.type;\n\n\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n}\n"],"mappings":";;AAMA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAwE5B,SAAS,aAIf,WACyD;AAGzD,WAAS,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,MAAM,OAAuB,IAAI;AAEvC,UAAM,UAAU,QAAQ,MAA0B;AACjD,UAAI,CAAC,eAAgB,QAAO;AAE5B,aAAO,eAAe,cAAc,WAAW,WAAW,CAAC,CAAC;AAAA,IAC7D,GAAG,CAAC,cAAc,CAAC;AAEnB,UAAM,kBAAkB,mBAAmB,OAAO;AAElD,UAAM,UAAU,iBAAiB,UAAU;AAE3C,cAAU,MAAM;AACf,UAAI,CAAC,QAAS;AACd,cAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,cAAU,MAAM;AACf,UAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,cAAQ,GAAG,SAAS,OAAO;AAC3B,aAAO,MAAM;AACZ,gBAAQ,IAAI,SAAS,OAAO;AAAA,MAC7B;AAAA,IACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oBAAgB,MAAM;AACrB,UAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,cAAQ,MAAM,IAAI,OAAO;AACzB,aAAO,MAAM;AACZ,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,WACC,0DACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,QAC9D;AAAA,QACA;AAAA;AAAA,IACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,EAEF;AAEA,iBAAe,cAAc,UAAU;AACvC,iBAAe,OAAO,UAAU;AAEhC,SAAO;AACR;","names":[]}
+{"version":3,"sources":["../../src/payouts/with-fallback.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tPayoutsSessionElements,\n\tWhopElement,\n} from \"@whop/embedded-components-vanilla-js/types\";\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { useElementSnapshot } from \"../lib/use-element-snapshot\";\nimport { usePayoutsSession } from \"./session\";\n\n/**\n * Valid element type strings that can be passed to createElement.\n */\ntype ElementType = keyof PayoutsSessionElements;\n\n/**\n * Extract the options type for a given element type using indexed access.\n * PayoutsSessionElements maps element types to [Options, Element] tuples.\n */\ntype ElementOptionsFor<T extends ElementType> = PayoutsSessionElements[T][0];\n\n/**\n * Base element type that all created elements conform to.\n * Using WhopElement<any, any, any> gives us access to common methods\n * (mount, unmount, on, off, updateOptions) without union type issues.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype BaseElement = WhopElement<any, any, any>;\n\n/**\n * Component definition with a constrained element type.\n * The type must be a valid element type from the SDK.\n */\ninterface ElementComponentDefinition<T extends ElementType = ElementType> {\n\tdisplayName: string;\n\ttype: T;\n}\n\ninterface WithFallbackPropsBase {\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\tonReady?: () => void;\n\tfallback?: React.ReactNode;\n}\n\nexport interface WithFallbackPropsRequired<TOptions>\n\textends WithFallbackPropsBase {\n\toptions: TOptions;\n}\n\nexport interface WithFallbackPropsOptional<TOptions>\n\textends WithFallbackPropsBase {\n\toptions?: TOptions;\n}\n\ntype WithFallbackComponent<TOptions, TRequired extends boolean> = {\n\t(\n\t\tprops: TRequired extends true\n\t\t\t? WithFallbackPropsRequired<TOptions>\n\t\t\t: WithFallbackPropsOptional<TOptions>,\n\t): React.ReactNode;\n\tdisplayName: string;\n\ttype: string;\n};\n\n/**\n * Creates a React component that wraps an embedded element with fallback support.\n *\n * @example\n * ```tsx\n * // Type-safe: options type is inferred from the element type\n * export const BalanceElement = withFallback({\n *   displayName: \"BalanceElement\",\n *   type: \"balance-element\",\n * } as const);\n *\n * // Usage - TypeScript knows the correct options type\n * <BalanceElement options={{ hidePendingBalance: true }} />\n * ```\n */\nexport function withFallback<\n\tconst T extends ElementType,\n\tTRequired extends boolean = false,\n>(\n\tComponent: ElementComponentDefinition<T>,\n): WithFallbackComponent<ElementOptionsFor<T>, TRequired> {\n\ttype TOptions = ElementOptionsFor<T>;\n\n\tfunction WrappedElement({\n\t\toptions,\n\t\tclassName,\n\t\tstyle,\n\t\tonReady,\n\t\tfallback,\n\t}: WithFallbackPropsOptional<TOptions>) {\n\t\tconst payoutsSession = usePayoutsSession();\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tconst element = useMemo((): BaseElement | null => {\n\t\t\tif (!payoutsSession) return null;\n\t\t\t// Safe: T is constrained to valid element types, and options matches T\n\t\t\treturn payoutsSession.createElement(Component, options ?? {});\n\t\t}, [payoutsSession]);\n\n\t\tconst elementSnapshot = useElementSnapshot(element);\n\n\t\tconst isReady = elementSnapshot?.state === \"ready\";\n\n\t\tuseEffect(() => {\n\t\t\tif (!element) return;\n\t\t\telement.updateOptions(options ?? {});\n\t\t}, [options, element]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!element || !onReady) return;\n\t\t\telement.on(\"ready\", onReady);\n\t\t\treturn () => {\n\t\t\t\telement.off(\"ready\", onReady);\n\t\t\t};\n\t\t}, [element, onReady]);\n\n\t\tuseLayoutEffect(() => {\n\t\t\tif (!element || !ref.current) return;\n\t\t\telement.mount(ref.current);\n\t\t\treturn () => {\n\t\t\t\telement.unmount();\n\t\t\t};\n\t\t}, [element, ref.current]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ ...style, visibility: isReady ? undefined : \"hidden\" }}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t\t{!isReady && (fallback ?? null)}\n\t\t\t</>\n\t\t);\n\t}\n\n\tWrappedElement.displayName = Component.displayName;\n\tWrappedElement.type = Component.type;\n\n\treturn WrappedElement as WithFallbackComponent<TOptions, TRequired>;\n}\n"],"mappings":";;AAMA,OAAO,SAAS,WAAW,iBAAiB,SAAS,cAAc;AACnE,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAwE3B,SAAS,aAIf,WACyD;AAGzD,WAAS,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,MAAM,OAAuB,IAAI;AAEvC,UAAM,UAAU,QAAQ,MAA0B;AACjD,UAAI,CAAC,eAAgB,QAAO;AAE5B,aAAO,eAAe,cAAc,WAAW,WAAW,CAAC,CAAC;AAAA,IAC7D,GAAG,CAAC,cAAc,CAAC;AAEnB,UAAM,kBAAkB,mBAAmB,OAAO;AAElD,UAAM,UAAU,iBAAiB,UAAU;AAE3C,cAAU,MAAM;AACf,UAAI,CAAC,QAAS;AACd,cAAQ,cAAc,WAAW,CAAC,CAAC;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,cAAU,MAAM;AACf,UAAI,CAAC,WAAW,CAAC,QAAS;AAC1B,cAAQ,GAAG,SAAS,OAAO;AAC3B,aAAO,MAAM;AACZ,gBAAQ,IAAI,SAAS,OAAO;AAAA,MAC7B;AAAA,IACD,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,oBAAgB,MAAM;AACrB,UAAI,CAAC,WAAW,CAAC,IAAI,QAAS;AAC9B,cAAQ,MAAM,IAAI,OAAO;AACzB,aAAO,MAAM;AACZ,gBAAQ,QAAQ;AAAA,MACjB;AAAA,IACD,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC;AAEzB,WACC,0DACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,YAAY,UAAU,SAAY,SAAS;AAAA,QAC9D;AAAA,QACA;AAAA;AAAA,IACD,GACC,CAAC,YAAY,YAAY,KAC3B;AAAA,EAEF;AAEA,iBAAe,cAAc,UAAU;AACvC,iBAAe,OAAO,UAAU;AAEhC,SAAO;AACR;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whop/embedded-components-react-js",
-  "version": "0.0.11",
+  "version": "0.0.13-beta.10",
   "description": "React components for Whop.js",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -21,7 +21,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@whop/embedded-components-vanilla-js": "^0.0.11",
+    "@whop/embedded-components-vanilla-js": "^0.0.13-beta.10",
     "react": ">=16.8.0 <20.0.0",
     "react-dom": ">=16.8.0 <20.0.0"
   }