@asgardeo/react 0.5.32 → 0.6.0

package/dist/components/presentation/SignUp/BaseSignUp.d.ts

@@ -16,8 +16,71 @@
  * under the License.
  */
 import { EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse } from '@asgardeo/browser';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { CardProps } from '../../primitives/Card/Card';
+/**
+ * Render props for custom UI rendering
+ */
+export interface BaseSignUpRenderProps {
+    /**
+     * Form values
+     */
+    values: Record<string, string>;
+    /**
+     * Form errors
+     */
+    errors: Record<string, string>;
+    /**
+     * Touched fields
+     */
+    touched: Record<string, boolean>;
+    /**
+     * Whether the form is valid
+     */
+    isValid: boolean;
+    /**
+     * Loading state
+     */
+    isLoading: boolean;
+    /**
+     * Current error message
+     */
+    error: string | null;
+    /**
+     * Flow components
+     */
+    components: any[];
+    /**
+     * Function to handle input changes
+     */
+    handleInputChange: (name: string, value: string) => void;
+    /**
+     * Function to handle form submission
+     */
+    handleSubmit: (component: any, data?: Record<string, any>) => Promise<void>;
+    /**
+     * Function to validate the form
+     */
+    validateForm: () => {
+        isValid: boolean;
+        errors: Record<string, string>;
+    };
+    /**
+     * Flow title
+     */
+    title: string;
+    /**
+     * Flow subtitle
+     */
+    subtitle: string;
+    /**
+     * Flow messages
+     */
+    messages: Array<{
+        message: string;
+        type: string;
+    }>;
+}
 /**
  * Props for the BaseSignUp component.
  */
@@ -86,6 +149,10 @@ export interface BaseSignUpProps {
      *  Whether to redirect after sign-up.
      */
     shouldRedirectAfterSignUp?: boolean;
+    /**
+     * Render props function for custom UI
+     */
+    children?: (props: BaseSignUpRenderProps) => ReactNode;
 }
 /**
  * Base SignUp component that provides embedded sign-up flow.
@@ -93,6 +160,7 @@ export interface BaseSignUpProps {
  * It accepts API functions as props to maintain framework independence.
  *
  * @example
+ * // Default UI
  * ```tsx
  * import { BaseSignUp } from '@asgardeo/react';
  *
@@ -107,20 +175,41 @@ export interface BaseSignUpProps {
  *         // Your API call to handle sign-up
  *         return await handleSignUp(payload);
  *       }}
- *       onSuccess={(response) => {
- *         console.log('Success:', response);
- *       }}       *       onError={(error) => {
+ *       onError={(error) => {
  *         console.error('Error:', error);
  *       }}
- *       onComplete={(redirectUrl) => {
+ *       onComplete={(response) => {
  *         // Platform-specific redirect handling (e.g., Next.js router.push)
- *         router.push(redirectUrl); // or window.location.href = redirectUrl
+ *         router.push(response); // or window.location.href = redirectUrl
  *       }}
  *       className="max-w-md mx-auto"
  *     />
  *   );
  * };
  * ```
+ *
+ * @example
+ * // Custom UI with render props
+ * ```tsx
+ * <BaseSignUp onInitialize={initializeSignUp} onSubmit={handleSignUp}>
+ *   {({values, errors, handleInputChange, handleSubmit, isLoading, components}) => (
+ *     <div className="custom-form">
+ *       <input
+ *         name="username"
+ *         value={values.username || ''}
+ *         onChange={(e) => handleInputChange('username', e.target.value)}
+ *       />
+ *       {errors.username && <span>{errors.username}</span>}
+ *       <button
+ *         onClick={() => handleSubmit(components[0], values)}
+ *         disabled={isLoading}
+ *       >
+ *         Sign Up
+ *       </button>
+ *     </div>
+ *   )}
+ * </BaseSignUp>
+ * ```
  */
 declare const BaseSignUp: FC<BaseSignUpProps>;
 export default BaseSignUp;

package/dist/components/presentation/SignUp/SignUp.d.ts

@@ -15,17 +15,27 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC } from 'react';
-import { BaseSignUpProps } from './BaseSignUp';
+import { FC, ReactNode } from 'react';
+import { BaseSignUpProps, BaseSignUpRenderProps } from './BaseSignUp';
+/**
+ * Render props function parameters (re-exported from BaseSignUp for convenience)
+ */
+export type SignUpRenderProps = BaseSignUpRenderProps;
 /**
  * Props for the SignUp component.
  */
-export type SignUpProps = BaseSignUpProps;
+export type SignUpProps = BaseSignUpProps & {
+    /**
+     * Render props function for custom UI
+     */
+    children?: (props: SignUpRenderProps) => ReactNode;
+};
 /**
  * A styled SignUp component that provides embedded sign-up flow with pre-built styling.
  * This component handles the API calls for sign-up and delegates UI logic to BaseSignUp.
  *
  * @example
+ * // Default UI
  * ```tsx
  * import { SignUp } from '@asgardeo/react';
  *
@@ -50,6 +60,45 @@ export type SignUpProps = BaseSignUpProps;
  *   );
  * };
  * ```
+ *
+ * @example
+ * // Custom UI with render props
+ * ```tsx
+ * import { SignUp } from '@asgardeo/react';
+ *
+ * const App = () => {
+ *   return (
+ *     <SignUp
+ *       onError={(error) => console.error('Error:', error)}
+ *       onComplete={(response) => console.log('Success:', response)}
+ *     >
+ *       {({values, errors, handleInputChange, handleSubmit, isLoading, components}) => (
+ *         <div className="custom-signup">
+ *           <h1>Custom Sign Up</h1>
+ *           {isLoading ? (
+ *             <p>Loading...</p>
+ *           ) : (
+ *             <form onSubmit={(e) => {
+ *               e.preventDefault();
+ *               handleSubmit(components[0], values);
+ *             }}>
+ *               <input
+ *                 name="username"
+ *                 value={values.username || ''}
+ *                 onChange={(e) => handleInputChange('username', e.target.value)}
+ *               />
+ *               {errors.username && <span>{errors.username}</span>}
+ *               <button type="submit" disabled={isLoading}>
+ *                 {isLoading ? 'Signing up...' : 'Sign Up'}
+ *               </button>
+ *             </form>
+ *           )}
+ *         </div>
+ *       )}
+ *     </SignUp>
+ *   );
+ * };
+ * ```
  */
 declare const SignUp: FC<SignUpProps>;
 export default SignUp;

package/dist/components/presentation/SignUp/transformer.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { EmbeddedFlowComponent } from '@asgardeo/browser';
+import { UseTranslation } from '../../../hooks/useTranslation';
+/**
+ * Transform simple flow response to component-driven format
+ */
+export declare const transformSimpleToComponentDriven: (response: any, t: UseTranslation["t"]) => EmbeddedFlowComponent[];
+/**
+ * Generic transformer that handles both simple and component-driven responses
+ */
+export declare const normalizeFlowResponse: (response: any, t: UseTranslation["t"]) => {
+    flowId: string;
+    components: EmbeddedFlowComponent[];
+};

package/dist/contexts/Theme/ThemeContext.d.ts

@@ -19,6 +19,10 @@ import { Theme } from '@asgardeo/browser';
 export interface ThemeContextValue {
     theme: Theme;
     colorScheme: 'light' | 'dark';
+    /**
+     * The text direction for the UI.
+     */
+    direction: 'ltr' | 'rtl';
     toggleTheme: () => void;
     /**
      * Whether branding theme is currently loading

package/dist/contexts/Theme/types.d.ts

@@ -56,6 +56,11 @@ export interface ThemeConfig {
         small: string;
     };
     colors: ThemeColors;
+    /**
+     * The text direction for the UI.
+     * @default 'ltr'
+     */
+    direction?: 'ltr' | 'rtl';
     shadows: {
         large: string;
         medium: string;