@abstraxn/signer-react 1.0.0

package/dist/src/OnboardingUI.d.ts

@@ -0,0 +1,63 @@
+import type { OnboardingUIConfig } from '@abstraxn/signer-core';
+export interface OnboardingUIComponentProps {
+    /**
+     * Configuration for the onboarding UI
+     */
+    config?: Partial<OnboardingUIConfig>;
+    /**
+     * Custom container element or selector
+     * If not provided, component will render inline
+     * @deprecated - Not used in React implementation, kept for backward compatibility
+     */
+    container?: HTMLElement | string;
+    /**
+     * Show as modal (overlay)
+     * @default false (renders inline)
+     */
+    modal?: boolean;
+}
+export interface OnboardingUIComponentRef {
+    /**
+     * Show the onboarding UI
+     */
+    show: () => void;
+    /**
+     * Hide the onboarding UI
+     */
+    hide: () => void;
+    /**
+     * Reset to login form
+     */
+    reset: () => void;
+}
+/**
+ * OnboardingUI Component
+ * Pure React implementation - no DOM manipulation
+ *
+ * Automatically uses config from AbstraxnProvider if no config prop is provided.
+ * Component config prop will override provider config for specific properties.
+ *
+ * @example
+ * ```tsx
+ * import { AbstraxnProvider, OnboardingUI } from '@abstraxn/signer-react';
+ *
+ * function App() {
+ *   return (
+ *     <AbstraxnProvider
+ *       config={{
+ *         apiKey: 'your-api-key',
+ *         ui: {
+ *           theme: 'light',
+ *           logo: 'https://example.com/logo.png',
+ *           onboardTitle: 'Sign In',
+ *         }
+ *       }}
+ *     >
+ *       <OnboardingUI />
+ *       <OnboardingUI config={{ theme: 'dark' }} modal />
+ *     </AbstraxnProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare const OnboardingUIComponent: import("react").ForwardRefExoticComponent<OnboardingUIComponentProps & import("react").RefAttributes<OnboardingUIComponentRef>>;

package/dist/src/OnboardingUI.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * OnboardingUI Component - React wrapper
+ * Now uses Pure React components instead of vanilla JS DOM manipulation
+ */
+import { forwardRef, useImperativeHandle } from 'react';
+import { OnboardingUIReact } from './components/OnboardingUI/OnboardingUIReact';
+import { useAbstraxnWallet } from './hooks';
+/**
+ * OnboardingUI Component
+ * Pure React implementation - no DOM manipulation
+ *
+ * Automatically uses config from AbstraxnProvider if no config prop is provided.
+ * Component config prop will override provider config for specific properties.
+ *
+ * @example
+ * ```tsx
+ * import { AbstraxnProvider, OnboardingUI } from '@abstraxn/signer-react';
+ *
+ * function App() {
+ *   return (
+ *     <AbstraxnProvider
+ *       config={{
+ *         apiKey: 'your-api-key',
+ *         ui: {
+ *           theme: 'light',
+ *           logo: 'https://example.com/logo.png',
+ *           onboardTitle: 'Sign In',
+ *         }
+ *       }}
+ *     >
+ *       <OnboardingUI />
+ *       <OnboardingUI config={{ theme: 'dark' }} modal />
+ *     </AbstraxnProvider>
+ *   );
+ * }
+ * ```
+ */
+export const OnboardingUIComponent = forwardRef(({ config, modal = false }, ref) => {
+    const contextValue = useAbstraxnWallet();
+    const { uiConfig: providerUIConfig, availableConnectors } = contextValue;
+    const externalWalletsEnabled = availableConnectors && availableConnectors.length > 0;
+    // Merge provider config with component config (component config takes precedence)
+    const mergedConfig = {
+        ...providerUIConfig,
+        ...config, // Component config overrides provider config
+    };
+    // Expose methods via ref (for backward compatibility)
+    useImperativeHandle(ref, () => ({
+        show: () => {
+            // Modal is controlled by the modal prop, so this is a no-op
+            // In the future, we could add state management here
+        },
+        hide: () => {
+            // Modal is controlled by the modal prop, so this is a no-op
+            // In the future, we could add state management here
+        },
+        reset: () => {
+            // Reset is handled internally by the component
+            // In the future, we could expose this via a ref
+        },
+    }));
+    return (_jsx(OnboardingUIReact, { config: mergedConfig, modal: modal, externalWalletsEnabled: externalWalletsEnabled, availableConnectors: availableConnectors || [] }));
+});
+OnboardingUIComponent.displayName = 'OnboardingUIComponent';
+//# sourceMappingURL=OnboardingUI.js.map

package/dist/src/OnboardingUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingUI.js","sourceRoot":"","sources":["../../src/OnboardingUI.tsx"],"names":[],"mappings":";AAAA;;;GAGG;AACH,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAwC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,UAAU,CAC7C,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,KAAK,EAA8B,EAAE,GAAG,EAAE,EAAE;IAC7D,MAAM,YAAY,GAAG,iBAAiB,EAAE,CAAC;IACzC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,GAAG,YAAY,CAAC;IACzE,MAAM,sBAAsB,GAAG,mBAAmB,IAAI,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC;IAErF,kFAAkF;IAClF,MAAM,YAAY,GAAgC;QAChD,GAAG,gBAAgB;QACnB,GAAG,MAAM,EAAE,6CAA6C;KACzD,CAAC;IAEF,sDAAsD;IACtD,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,IAAI,EAAE,GAAG,EAAE;YACT,4DAA4D;YAC5D,oDAAoD;QACtD,CAAC;QACD,IAAI,EAAE,GAAG,EAAE;YACT,4DAA4D;YAC5D,oDAAoD;QACtD,CAAC;QACD,KAAK,EAAE,GAAG,EAAE;YACV,+CAA+C;YAC/C,gDAAgD;QAClD,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,KAAC,iBAAiB,IAChB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,KAAK,EACZ,sBAAsB,EAAE,sBAAsB,EAC9C,mBAAmB,EAAE,mBAAmB,IAAI,EAAE,GAC9C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAC"}