@asgardeo/react 0.5.28 → 0.5.30

package/dist/components/{presentation/SignUp/options → adapters}/CheckboxInput.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Checkbox input component for sign-up forms.
  */

package/dist/components/{presentation/SignUp/options → adapters}/DateInput.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Date input component for sign-up forms.
  */

package/dist/components/{presentation/SignUp/options → adapters}/DividerComponent.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Divider component for sign-up forms.
  */

package/dist/components/{presentation/SignUp/options → adapters}/EmailInput.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Email input component for sign-up forms.
  */

package/dist/components/{presentation/options → adapters}/FacebookButton.d.ts

@@ -16,10 +16,16 @@
  * under the License.
  */
 import { FC, HTMLAttributes } from 'react';
-import { BaseSignInOptionProps } from '../SignIn/options/SignInOptionFactory';
+import { WithPreferences } from '@asgardeo/browser';
+export interface FacebookButtonProps extends WithPreferences {
+    /**
+     * Whether the component is in loading state.
+     */
+    isLoading?: boolean;
+}
 /**
  * Facebook Sign-In Button Component.
  * Handles authentication with Facebook identity provider.
  */
-declare const FacebookButton: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonElement>>;
+declare const FacebookButton: FC<FacebookButtonProps & HTMLAttributes<HTMLButtonElement>>;
 export default FacebookButton;

package/dist/components/{presentation/SignUp/options → adapters}/FormContainer.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Form container component that renders child components.
  */

package/dist/components/{presentation/options → adapters}/GitHubButton.d.ts

@@ -16,10 +16,16 @@
  * under the License.
  */
 import { FC, HTMLAttributes } from 'react';
-import { BaseSignInOptionProps } from '../SignIn/options/SignInOptionFactory';
+import { WithPreferences } from '@asgardeo/browser';
+export interface GithubButtonProps extends WithPreferences {
+    /**
+     * Whether the component is in loading state.
+     */
+    isLoading?: boolean;
+}
 /**
  * GitHub Sign-In Button Component.
  * Handles authentication with GitHub identity provider.
  */
-declare const GitHubButton: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonElement>>;
+declare const GitHubButton: FC<GithubButtonProps & HTMLAttributes<HTMLButtonElement>>;
 export default GitHubButton;

package/dist/components/{presentation/options → adapters}/GoogleButton.d.ts

@@ -16,10 +16,16 @@
  * under the License.
  */
 import { FC, HTMLAttributes } from 'react';
-import { BaseSignInOptionProps } from '../SignIn/options/SignInOptionFactory';
+import { WithPreferences } from '@asgardeo/browser';
+export interface GoogleButtonProps extends WithPreferences {
+    /**
+     * Whether the component is in loading state.
+     */
+    isLoading?: boolean;
+}
 /**
  * Google Sign-In Button Component.
  * Handles authentication with Google identity provider.
  */
-declare const GoogleButton: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonElement>>;
+declare const GoogleButton: FC<GoogleButtonProps & HTMLAttributes<HTMLButtonElement>>;
 export default GoogleButton;

package/dist/components/{presentation/SignUp/options → adapters}/ImageComponent.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Image component for sign-up forms.
  */

package/dist/components/{presentation/options → adapters}/LinkedInButton.d.ts

@@ -16,10 +16,16 @@
  * under the License.
  */
 import { FC, HTMLAttributes } from 'react';
-import { BaseSignInOptionProps } from '../SignIn/options/SignInOptionFactory';
+import { WithPreferences } from '@asgardeo/browser';
+export interface LinkedInButtonProps extends WithPreferences {
+    /**
+     * Whether the component is in loading state.
+     */
+    isLoading?: boolean;
+}
 /**
  * LinkedIn Sign-In Button Component.
  * Handles authentication with LinkedIn identity provider.
  */
-declare const LinkedInButton: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonElement>>;
+declare const LinkedInButton: FC<LinkedInButtonProps & HTMLAttributes<HTMLButtonElement>>;
 export default LinkedInButton;

package/dist/components/{presentation/options → adapters}/MicrosoftButton.d.ts

@@ -16,10 +16,16 @@
  * under the License.
  */
 import { FC, HTMLAttributes } from 'react';
-import { BaseSignInOptionProps } from '../SignIn/options/SignInOptionFactory';
+import { WithPreferences } from '@asgardeo/browser';
+export interface MicrosoftButtonProps extends WithPreferences {
+    /**
+     * Whether the component is in loading state.
+     */
+    isLoading?: boolean;
+}
 /**
  * Microsoft Sign-In Button Component.
  * Handles authentication with Microsoft identity provider.
  */
-declare const MicrosoftButton: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonElement>>;
+declare const MicrosoftButton: FC<MicrosoftButtonProps & HTMLAttributes<HTMLButtonElement>>;
 export default MicrosoftButton;

package/dist/components/{presentation/SignUp/options → adapters}/NumberInput.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Number input component for sign-up forms.
  */

package/dist/components/{presentation/SignUp/options → adapters}/PasswordInput.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Password input component for sign-up forms.
  */

package/dist/components/{presentation/options → adapters}/SignInWithEthereumButton.d.ts

@@ -16,10 +16,16 @@
  * under the License.
  */
 import { FC, HTMLAttributes } from 'react';
-import { BaseSignInOptionProps } from '../SignIn/options/SignInOptionFactory';
+import { WithPreferences } from '@asgardeo/browser';
+export interface SignInWithEthereumButtonProps extends WithPreferences {
+    /**
+     * Whether the component is in loading state.
+     */
+    isLoading?: boolean;
+}
 /**
  * Sign In With Ethereum Button Component.
  * Handles authentication with Sign In With Ethereum identity provider.
  */
-declare const SignInWithEthereumButton: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonElement>>;
+declare const SignInWithEthereumButton: FC<SignInWithEthereumButtonProps & HTMLAttributes<HTMLButtonElement>>;
 export default SignInWithEthereumButton;

package/dist/components/adapters/SmsOtpButton.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { FC, HTMLAttributes } from 'react';
+import { WithPreferences } from '@asgardeo/browser';
+export interface SmsOtpButtonProps extends WithPreferences {
+    /**
+     * Whether the component is in loading state.
+     */
+    isLoading?: boolean;
+}
+/**
+ * SMS OTP Sign-In Button Component.
+ * Handles authentication with SMS OTP.
+ */
+declare const SmsOtpButton: FC<SmsOtpButtonProps & HTMLAttributes<HTMLButtonElement>>;
+export default SmsOtpButton;

package/dist/components/{presentation/SignUp/options → adapters}/SocialButton.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Social button component for sign-up forms.
  */

package/dist/components/{presentation/SignUp/options → adapters}/SubmitButton.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Button component for sign-up forms that handles all button variants.
  */

package/dist/components/{presentation/SignUp/options → adapters}/TelephoneInput.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Telephone input component for sign-up forms.
  */

package/dist/components/{presentation/SignUp/options → adapters}/TextInput.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Text input component for sign-up forms.
  */

package/dist/components/{presentation/SignUp/options → adapters}/Typography.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+import { BaseSignUpOptionProps } from '../presentation/SignUp/SignUpOptionFactory';
 /**
  * Typography component for sign-up forms (titles, descriptions, etc.).
  */

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

@@ -15,13 +15,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC } from 'react';
-import { BaseSignInProps } from './BaseSignIn';
+import { FC, ReactElement } from 'react';
+import { BaseSignInProps } from './non-component-driven/BaseSignIn';
+import { SignInRenderProps } from './component-driven/SignIn';
 /**
  * Props for the SignIn component.
  * Extends BaseSignInProps for full compatibility with the React BaseSignIn component
  */
-export type SignInProps = Pick<BaseSignInProps, 'className' | 'onSuccess' | 'onError' | 'variant' | 'size'>;
+export type SignInProps = Pick<BaseSignInProps, 'className' | 'onSuccess' | 'onError' | 'variant' | 'size'> & {
+    /**
+     * Render function for custom UI (render props pattern).
+     */
+    children?: (props: SignInRenderProps) => ReactElement;
+};
 /**
  * A styled SignIn component that provides native authentication flow with pre-built styling.
  * This component handles the API calls for authentication and delegates UI logic to BaseSignIn.

package/dist/components/presentation/SignIn/component-driven/BaseSignIn.d.ts

@@ -0,0 +1,195 @@
+/**
+ * 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 { FC, ReactNode } from 'react';
+import { EmbeddedFlowComponent, EmbeddedSignInFlowRequestV2 } from '@asgardeo/browser';
+import { CardProps } from '../../../primitives/Card/Card';
+/**
+ * Render props for custom UI rendering
+ */
+export interface BaseSignInRenderProps {
+    /**
+     * 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: EmbeddedFlowComponent[];
+    /**
+     * Function to handle input changes
+     */
+    handleInputChange: (name: string, value: string) => void;
+    /**
+     * Function to handle form submission
+     */
+    handleSubmit: (component: EmbeddedFlowComponent, 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 BaseSignIn component.
+ */
+export interface BaseSignInProps {
+    /**
+     * Custom CSS class name for the submit button.
+     */
+    buttonClassName?: string;
+    /**
+     * Custom CSS class name for the form container.
+     */
+    className?: string;
+    /**
+     * Array of flow components to render.
+     */
+    components?: EmbeddedFlowComponent[];
+    /**
+     * Custom CSS class name for error messages.
+     */
+    errorClassName?: string;
+    /**
+     * Flag to determine if the component is ready to be rendered.
+     */
+    isLoading?: boolean;
+    /**
+     * Custom CSS class name for form inputs.
+     */
+    inputClassName?: string;
+    /**
+     * Custom CSS class name for info messages.
+     */
+    messageClassName?: string;
+    /**
+     * Callback function called when authentication fails.
+     * @param error - The error that occurred during authentication.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Function to handle form submission.
+     * @param payload - The form data to submit.
+     * @param component - The component that triggered the submission.
+     */
+    onSubmit?: (payload: EmbeddedSignInFlowRequestV2, component: EmbeddedFlowComponent) => Promise<void>;
+    /**
+     * Callback function called when authentication is successful.
+     * @param authData - The authentication data returned upon successful completion.
+     */
+    onSuccess?: (authData: Record<string, any>) => void;
+    /**
+     * Size variant for the component.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Theme variant for the component.
+     */
+    variant?: CardProps['variant'];
+    /**
+     * Render props function for custom UI
+     */
+    children?: (props: BaseSignInRenderProps) => ReactNode;
+}
+/**
+ * Base SignIn component that provides generic authentication flow.
+ * This component handles component-driven UI rendering and can transform input
+ * structure to component-driven format automatically.
+ *
+ * @example
+ * // Default UI
+ * ```tsx
+ * import { BaseSignIn } from '@asgardeo/react';
+ *
+ * const MySignIn = () => {
+ *   return (
+ *     <BaseSignIn
+ *       components={components}
+ *       onSubmit={async (payload) => {
+ *         return await handleAuth(payload);
+ *       }}
+ *       onSuccess={(authData) => {
+ *         console.log('Success:', authData);
+ *       }}
+ *       className="max-w-md mx-auto"
+ *     />
+ *   );
+ * };
+ * ```
+ *
+ * @example
+ * // Custom UI with render props
+ * ```tsx
+ * <BaseSignIn components={components} onSubmit={handleSubmit}>
+ *   {({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 In
+ *       </button>
+ *     </div>
+ *   )}
+ * </BaseSignIn>
+ * ```
+ */
+declare const BaseSignIn: FC<BaseSignInProps>;
+export default BaseSignIn;

package/dist/components/presentation/SignIn/component-driven/SignIn.d.ts

@@ -0,0 +1,144 @@
+/**
+ * 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 { FC, ReactNode } from 'react';
+import { BaseSignInProps } from './BaseSignIn';
+import { EmbeddedFlowComponent, EmbeddedSignInFlowRequestV2 } from '@asgardeo/browser';
+/**
+ * Render props function parameters
+ */
+export interface SignInRenderProps {
+    /**
+     * Function to manually initialize the flow
+     */
+    initialize: () => Promise<void>;
+    /**
+     * Function to submit authentication data (primary)
+     */
+    onSubmit: (payload: EmbeddedSignInFlowRequestV2) => Promise<void>;
+    /**
+     * Loading state indicator
+     */
+    isLoading: boolean;
+    /**
+     * Whether the flow has been initialized
+     */
+    isInitialized: boolean;
+    /**
+     * Current flow components
+     */
+    components: EmbeddedFlowComponent[];
+    /**
+     * Current error if any
+     */
+    error: Error | null;
+}
+/**
+ * Props for the SignIn component.
+ * Matches the interface from the main SignIn component for consistency.
+ */
+export type SignInProps = {
+    /**
+     * Custom CSS class name for the form container.
+     */
+    className?: string;
+    /**
+     * Callback function called when authentication is successful.
+     * @param authData - The authentication data returned upon successful completion.
+     */
+    onSuccess?: (authData: Record<string, any>) => void;
+    /**
+     * Callback function called when authentication fails.
+     * @param error - The error that occurred during authentication.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Theme variant for the component.
+     */
+    variant?: BaseSignInProps['variant'];
+    /**
+     * Size variant for the component.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Render props function for custom UI
+     */
+    children?: (props: SignInRenderProps) => ReactNode;
+};
+/**
+ * A component-driven SignIn component that provides authentication flow with pre-built styling.
+ * This component handles the flow API calls for authentication and delegates UI logic to BaseSignIn.
+ * It automatically transforms simple input-based responses into component-driven UI format.
+ *
+ * @example
+ * // Default UI
+ * ```tsx
+ * import { SignIn } from '@asgardeo/react/component-driven';
+ *
+ * const App = () => {
+ *   return (
+ *     <SignIn
+ *       onSuccess={(authData) => {
+ *         console.log('Authentication successful:', authData);
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Authentication failed:', error);
+ *       }}
+ *       size="medium"
+ *       variant="outlined"
+ *     />
+ *   );
+ * };
+ * ```
+ *
+ * @example
+ * // Custom UI with render props
+ * ```tsx
+ * import { SignIn } from '@asgardeo/react/component-driven';
+ *
+ * const App = () => {
+ *   return (
+ *     <SignIn
+ *       onSuccess={(authData) => console.log('Success:', authData)}
+ *       onError={(error) => console.error('Error:', error)}
+ *     >
+ *       {({signIn, isLoading, components, error, isInitialized}) => (
+ *         <div className="custom-signin">
+ *           <h1>Custom Sign In</h1>
+ *           {!isInitialized ? (
+ *             <p>Initializing...</p>
+ *           ) : error ? (
+ *             <div className="error">{error.message}</div>
+ *           ) : (
+ *             <form onSubmit={(e) => {
+ *               e.preventDefault();
+ *               signIn({inputs: {username: 'user', password: 'pass'}});
+ *             }}>
+ *               <button type="submit" disabled={isLoading}>
+ *                 {isLoading ? 'Signing in...' : 'Sign In'}
+ *               </button>
+ *             </form>
+ *           )}
+ *         </div>
+ *       )}
+ *     </SignIn>
+ *   );
+ * };
+ * ```
+ */
+declare const SignIn: FC<SignInProps>;
+export default SignIn;