@asgardeo/react 0.11.2 → 0.11.3

package/dist/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.d.ts

@@ -25,22 +25,26 @@ export interface BaseSignInOptionProps extends WithPreferences {
      * The authenticator configuration.
      */
     authenticator?: EmbeddedSignInFlowAuthenticator;
+    /**
+     * Custom CSS class name for the submit button.
+     */
+    buttonClassName?: string;
+    /**
+     * Error message to display.
+     */
+    error?: string | null;
     /**
      * Current form values.
      */
     formValues: Record<string, string>;
     /**
-     * Touched state for form fields.
+     * Custom CSS class name for form inputs.
      */
-    touchedFields: Record<string, boolean>;
+    inputClassName?: string;
     /**
      * Whether the component is in loading state.
      */
     isLoading: boolean;
-    /**
-     * Error message to display.
-     */
-    error?: string | null;
     /**
      * Callback function called when input values change.
      */
@@ -49,18 +53,14 @@ export interface BaseSignInOptionProps extends WithPreferences {
      * Callback function called when the option is submitted.
      */
     onSubmit?: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void;
-    /**
-     * Custom CSS class name for form inputs.
-     */
-    inputClassName?: string;
-    /**
-     * Custom CSS class name for the submit button.
-     */
-    buttonClassName?: string;
     /**
      * Text for the submit button.
      */
     submitButtonText?: string;
+    /**
+     * Touched state for form fields.
+     */
+    touchedFields: Record<string, boolean>;
 }
 /**
  * Creates the appropriate sign-in option component based on the authenticator's ID.
@@ -70,7 +70,7 @@ export declare const createSignInOption: ({ authenticator, onSubmit, buttonClass
  * Convenience function that creates the appropriate sign-in option component from an authenticator.
  */
 export declare const createSignInOptionFromAuthenticator: (authenticator: EmbeddedSignInFlowAuthenticator, formValues: Record<string, string>, touchedFields: Record<string, boolean>, isLoading: boolean, onInputChange: (param: string, value: string) => void, onSubmit: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void, options?: {
-    inputClassName?: string;
     buttonClassName?: string;
     error?: string | null;
+    inputClassName?: string;
 }) => ReactElement;

package/dist/components/presentation/auth/SignIn/v1/types.d.ts

@@ -20,11 +20,11 @@ import { EmbeddedSignInFlowAuthenticator, EmbeddedSignInFlowAuthenticatorParamTy
  * Interface for form field state.
  */
 export interface FormField {
-    param: string;
-    type: EmbeddedSignInFlowAuthenticatorParamType;
-    displayName: string;
     confidential: boolean;
+    displayName: string;
+    param: string;
     required: boolean;
+    type: EmbeddedSignInFlowAuthenticatorParamType;
     value: string;
 }
 /**
@@ -35,18 +35,26 @@ export interface BaseAuthenticatorProps {
      * The authenticator configuration.
      */
     authenticator: EmbeddedSignInFlowAuthenticator;
+    /**
+     * Custom CSS class name for the submit button.
+     */
+    buttonClassName?: string;
+    /**
+     * Error message to display.
+     */
+    error?: string | null;
     /**
      * Current form values.
      */
     formValues: Record<string, string>;
     /**
-     * Whether the component is in loading state.
+     * Custom CSS class name for form inputs.
      */
-    isLoading: boolean;
+    inputClassName?: string;
     /**
-     * Error message to display.
+     * Whether the component is in loading state.
      */
-    error?: string | null;
+    isLoading: boolean;
     /**
      * Callback function called when input values change.
      */
@@ -55,14 +63,6 @@ export interface BaseAuthenticatorProps {
      * Callback function called when the authenticator is submitted.
      */
     onSubmit: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void;
-    /**
-     * Custom CSS class name for form inputs.
-     */
-    inputClassName?: string;
-    /**
-     * Custom CSS class name for the submit button.
-     */
-    buttonClassName?: string;
     /**
      * Text for the submit button.
      */
@@ -76,40 +76,40 @@ export interface AuthenticatorSelectorProps {
      * Available authenticators for selection.
      */
     authenticators: EmbeddedSignInFlowAuthenticator[];
+    buttonClassName?: string;
+    /**
+     * Error message to display.
+     */
+    error?: string | null;
+    errorClassName?: string;
     /**
      * Current form values.
      */
     formValues: Record<string, string>;
     /**
-     * Whether the component is in loading state.
+     * Custom CSS class names.
      */
-    isLoading: boolean;
+    inputClassName?: string;
     /**
-     * Error message to display.
+     * Whether the component is in loading state.
      */
-    error?: string | null;
+    isLoading: boolean;
+    messageClassName?: string;
     /**
      * Messages to display to the user.
      */
     messages: Array<{
-        type: string;
         message: string;
+        type: string;
     }>;
-    /**
-     * Callback function called when input values change.
-     */
-    onInputChange: (param: string, value: string) => void;
     /**
      * Callback function called when an authenticator is selected.
      */
     onAuthenticatorSelection: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void;
     /**
-     * Custom CSS class names.
+     * Callback function called when input values change.
      */
-    inputClassName?: string;
-    buttonClassName?: string;
-    errorClassName?: string;
-    messageClassName?: string;
+    onInputChange: (param: string, value: string) => void;
     /**
      * Text for the submit button.
      */
@@ -119,6 +119,6 @@ export interface AuthenticatorSelectorProps {
  * Style configuration for authenticators.
  */
 export interface AuthenticatorStyle {
-    variant: 'solid' | 'outline';
     color: string;
+    variant: 'solid' | 'outline';
 }

package/dist/components/presentation/auth/SignIn/v2/BaseSignIn.d.ts

@@ -15,71 +15,71 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC, ReactNode } from 'react';
 import { EmbeddedSignInFlowRequestV2 as EmbeddedSignInFlowRequest, EmbeddedFlowComponentV2 as EmbeddedFlowComponent } from '@asgardeo/browser';
+import { FC, ReactNode } from 'react';
 import { CardProps } from '../../../../primitives/Card/Card';
 /**
  * Render props for custom UI rendering
  */
 export interface BaseSignInRenderProps {
     /**
-     * Form values
+     * Flow components
      */
-    values: Record<string, string>;
+    components: EmbeddedFlowComponent[];
+    /**
+     * API error (if any)
+     */
+    error?: Error | null;
     /**
      * Field validation errors
      */
     fieldErrors: Record<string, string>;
     /**
-     * API error (if any)
+     * Function to handle input changes
      */
-    error?: Error | null;
+    handleInputChange: (name: string, value: string) => void;
     /**
-     * Touched fields
+     * Function to handle form submission
      */
-    touched: Record<string, boolean>;
+    handleSubmit: (component: EmbeddedFlowComponent, data?: Record<string, any>) => Promise<void>;
+    /**
+     * Loading state
+     */
+    isLoading: boolean;
     /**
      * Whether the form is valid
      */
     isValid: boolean;
     /**
-     * Loading state
+     * Flow messages
      */
-    isLoading: boolean;
+    messages: Array<{
+        message: string;
+        type: string;
+    }>;
     /**
-     * Flow components
+     * Flow subtitle
      */
-    components: EmbeddedFlowComponent[];
+    subtitle: string;
     /**
-     * Function to handle input changes
+     * Flow title
      */
-    handleInputChange: (name: string, value: string) => void;
+    title: string;
     /**
-     * Function to handle form submission
+     * Touched fields
      */
-    handleSubmit: (component: EmbeddedFlowComponent, data?: Record<string, any>) => Promise<void>;
+    touched: Record<string, boolean>;
     /**
      * Function to validate the form
      */
     validateForm: () => {
-        isValid: boolean;
         fieldErrors: Record<string, string>;
+        isValid: boolean;
     };
     /**
-     * Flow title
-     */
-    title: string;
-    /**
-     * Flow subtitle
-     */
-    subtitle: string;
-    /**
-     * Flow messages
+     * Form values
      */
-    messages: Array<{
-        message: string;
-        type: string;
-    }>;
+    values: Record<string, string>;
 }
 /**
  * Props for the BaseSignIn component.
@@ -89,6 +89,10 @@ export interface BaseSignInProps {
      * Custom CSS class name for the submit button.
      */
     buttonClassName?: string;
+    /**
+     * Render props function for custom UI
+     */
+    children?: (props: BaseSignInRenderProps) => ReactNode;
     /**
      * Custom CSS class name for the form container.
      */
@@ -97,22 +101,22 @@ export interface BaseSignInProps {
      * Array of flow components to render.
      */
     components?: EmbeddedFlowComponent[];
-    /**
-     * Custom CSS class name for error messages.
-     */
-    errorClassName?: string;
     /**
      * Error object to display
      */
     error?: Error | null;
     /**
-     * Flag to determine if the component is ready to be rendered.
+     * Custom CSS class name for error messages.
      */
-    isLoading?: boolean;
+    errorClassName?: string;
     /**
      * Custom CSS class name for form inputs.
      */
     inputClassName?: string;
+    /**
+     * Flag to determine if the component is ready to be rendered.
+     */
+    isLoading?: boolean;
     /**
      * Custom CSS class name for info messages.
      */
@@ -134,29 +138,25 @@ export interface BaseSignInProps {
      */
     onSuccess?: (authData: Record<string, any>) => void;
     /**
-     * Size variant for the component.
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Theme variant for the component.
+     * Whether to show the logo.
      */
-    variant?: CardProps['variant'];
+    showLogo?: boolean;
     /**
-     * Render props function for custom UI
+     * Whether to show the subtitle.
      */
-    children?: (props: BaseSignInRenderProps) => ReactNode;
+    showSubtitle?: boolean;
     /**
      * Whether to show the title.
      */
     showTitle?: boolean;
     /**
-     * Whether to show the subtitle.
+     * Size variant for the component.
      */
-    showSubtitle?: boolean;
+    size?: 'small' | 'medium' | 'large';
     /**
-     * Whether to show the logo.
+     * Theme variant for the component.
      */
-    showLogo?: boolean;
+    variant?: CardProps['variant'];
 }
 /**
  * Base SignIn component that provides generic authentication flow.

package/dist/components/presentation/auth/SignIn/v2/SignIn.d.ts

@@ -15,37 +15,37 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { EmbeddedFlowComponentV2 as EmbeddedFlowComponent, EmbeddedSignInFlowRequestV2 } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
 import { BaseSignInProps } from './BaseSignIn';
-import { EmbeddedFlowComponentV2 as EmbeddedFlowComponent, EmbeddedSignInFlowRequestV2 } from '@asgardeo/browser';
 /**
  * Render props function parameters
  */
 export interface SignInRenderProps {
     /**
-     * Function to manually initialize the flow
+     * Current flow components
      */
-    initialize: () => Promise<void>;
+    components: EmbeddedFlowComponent[];
     /**
-     * Function to submit authentication data (primary)
+     * Current error if any
      */
-    onSubmit: (payload: EmbeddedSignInFlowRequestV2) => Promise<void>;
+    error: Error | null;
     /**
-     * Loading state indicator
+     * Function to manually initialize the flow
      */
-    isLoading: boolean;
+    initialize: () => Promise<void>;
     /**
      * Whether the flow has been initialized
      */
     isInitialized: boolean;
     /**
-     * Current flow components
+     * Loading state indicator
      */
-    components: EmbeddedFlowComponent[];
+    isLoading: boolean;
     /**
-     * Current error if any
+     * Function to submit authentication data (primary)
      */
-    error: Error | null;
+    onSubmit: (payload: EmbeddedSignInFlowRequestV2) => Promise<void>;
 }
 /**
  * Props for the SignIn component.
@@ -53,31 +53,31 @@ export interface SignInRenderProps {
  */
 export type SignInProps = {
     /**
-     * Custom CSS class name for the form container.
+     * Render props function for custom UI
      */
-    className?: string;
+    children?: (props: SignInRenderProps) => ReactNode;
     /**
-     * Callback function called when authentication is successful.
-     * @param authData - The authentication data returned upon successful completion.
+     * Custom CSS class name for the form container.
      */
-    onSuccess?: (authData: Record<string, any>) => void;
+    className?: string;
     /**
      * Callback function called when authentication fails.
      * @param error - The error that occurred during authentication.
      */
     onError?: (error: Error) => void;
     /**
-     * Theme variant for the component.
+     * Callback function called when authentication is successful.
+     * @param authData - The authentication data returned upon successful completion.
      */
-    variant?: BaseSignInProps['variant'];
+    onSuccess?: (authData: Record<string, any>) => void;
     /**
      * Size variant for the component.
      */
     size?: 'small' | 'medium' | 'large';
     /**
-     * Render props function for custom UI
+     * Theme variant for the component.
      */
-    children?: (props: SignInRenderProps) => ReactNode;
+    variant?: BaseSignInProps['variant'];
 };
 /**
  * A component-driven SignIn component that provides authentication flow with pre-built styling.

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

@@ -22,30 +22,5 @@ import { Theme } from '@asgardeo/browser';
  * @param colorScheme - The current color scheme (used for memoization)
  * @returns Object containing CSS class names for component styling
  */
-declare const useStyles: (theme: Theme, colorScheme: string) => {
-    signUp: string;
-    card: string;
-    logoContainer: string;
-    header: string;
-    title: string;
-    subtitle: string;
-    messageItem: string;
-    errorContainer: string;
-    contentContainer: string;
-    loadingContainer: string;
-    loadingText: string;
-    divider: string;
-    centeredContainer: string;
-    passkeyContainer: string;
-    passkeyText: string;
-    form: string;
-    formDivider: string;
-    authenticatorSection: string;
-    authenticatorItem: string;
-    noAuthenticatorCard: string;
-    errorAlert: string;
-    messagesAlert: string;
-    flowMessagesContainer: string;
-    flowMessageItem: string;
-};
+declare const useStyles: (theme: Theme, colorScheme: string) => Record<string, string>;
 export default useStyles;

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

@@ -23,59 +23,59 @@ import { CardProps } from '../../../../primitives/Card/Card';
  */
 export interface BaseSignUpRenderProps {
     /**
-     * Form values
+     * Flow components
      */
-    values: Record<string, string>;
+    components: any[];
     /**
      * Form errors
      */
     errors: Record<string, string>;
     /**
-     * Touched fields
+     * Function to handle input changes
      */
-    touched: Record<string, boolean>;
+    handleInputChange: (name: string, value: string) => void;
     /**
-     * Whether the form is valid
+     * Function to handle form submission
      */
-    isValid: boolean;
+    handleSubmit: (component: any, data?: Record<string, any>) => Promise<void>;
     /**
      * Loading state
      */
     isLoading: boolean;
     /**
-     * Flow components
-     */
-    components: any[];
-    /**
-     * Function to handle input changes
+     * Whether the form is valid
      */
-    handleInputChange: (name: string, value: string) => void;
+    isValid: boolean;
     /**
-     * Function to handle form submission
+     * Flow messages
      */
-    handleSubmit: (component: any, data?: Record<string, any>) => Promise<void>;
+    messages: Array<{
+        message: string;
+        type: string;
+    }>;
     /**
-     * Function to validate the form
+     * Flow subtitle
      */
-    validateForm: () => {
-        isValid: boolean;
-        errors: Record<string, string>;
-    };
+    subtitle: string;
     /**
      * Flow title
      */
     title: string;
     /**
-     * Flow subtitle
+     * Touched fields
      */
-    subtitle: string;
+    touched: Record<string, boolean>;
     /**
-     * Flow messages
+     * Function to validate the form
      */
-    messages: Array<{
-        message: string;
-        type: string;
-    }>;
+    validateForm: () => {
+        errors: Record<string, string>;
+        isValid: boolean;
+    };
+    /**
+     * Form values
+     */
+    values: Record<string, string>;
 }
 /**
  * Props for the BaseSignUp component.
@@ -89,6 +89,10 @@ export interface BaseSignUpProps {
      * Custom CSS class name for the submit button.
      */
     buttonClassName?: string;
+    /**
+     * Render props function for custom UI
+     */
+    children?: (props: BaseSignUpRenderProps) => ReactNode;
     /**
      * Custom CSS class name for the form container.
      */
@@ -133,34 +137,30 @@ export interface BaseSignUpProps {
      * @returns Promise resolving to the sign-up response.
      */
     onSubmit?: (payload: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
-    /**
-     * Size variant for the component.
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Theme variant for the component.
-     */
-    variant?: CardProps['variant'];
     /**
      *  Whether to redirect after sign-up.
      */
     shouldRedirectAfterSignUp?: boolean;
     /**
-     * Render props function for custom UI
+     * Whether to show the logo.
      */
-    children?: (props: BaseSignUpRenderProps) => ReactNode;
+    showLogo?: boolean;
+    /**
+     * Whether to show the subtitle.
+     */
+    showSubtitle?: boolean;
     /**
      * Whether to show the title.
      */
     showTitle?: boolean;
     /**
-     * Whether to show the subtitle.
+     * Size variant for the component.
      */
-    showSubtitle?: boolean;
+    size?: 'small' | 'medium' | 'large';
     /**
-     * Whether to show the logo.
+     * Theme variant for the component.
      */
-    showLogo?: boolean;
+    variant?: CardProps['variant'];
 }
 /**
  * BaseSignUp component that provides embedded sign-up flow for Asgardeo.

package/dist/components/presentation/auth/SignUp/v1/SignUpOptionFactory.d.ts

@@ -16,8 +16,8 @@
  * under the License.
  */
 import { EmbeddedFlowComponent } from '@asgardeo/browser';
-import { ReactElement } from 'react';
 import { AdapterProps } from 'packages/react/src/models/adapters';
+import { ReactElement } from 'react';
 /**
  * Creates the appropriate sign-up component based on the component type.
  */