@asgardeo/react 0.3.0 → 0.5.0

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

@@ -0,0 +1,24 @@
+/**
+ * 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 } from 'react';
+import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+/**
+ * Telephone input component for sign-up forms.
+ */
+declare const TelephoneInput: FC<BaseSignUpOptionProps>;
+export default TelephoneInput;

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

@@ -0,0 +1,24 @@
+/**
+ * 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 } from 'react';
+import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+/**
+ * Text input component for sign-up forms.
+ */
+declare const TextInput: FC<BaseSignUpOptionProps>;
+export default TextInput;

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

@@ -0,0 +1,24 @@
+/**
+ * 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 } from 'react';
+import { BaseSignUpOptionProps } from './SignUpOptionFactory';
+/**
+ * Typography component for sign-up forms (titles, descriptions, etc.).
+ */
+declare const TypographyComponent: FC<BaseSignUpOptionProps>;
+export default TypographyComponent;

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

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+export { default as TextInput } from './TextInput';
+export { default as EmailInput } from './EmailInput';
+export { default as PasswordInput } from './PasswordInput';
+export { default as SubmitButton } from './SubmitButton';
+export { default as SocialButton } from './SocialButton';
+export { default as GoogleButton } from './GoogleButton';
+export { default as Typography } from './Typography';
+export { default as FormContainer } from './FormContainer';
+export { createSignUpComponent, createSignUpOptionFromComponent, renderSignUpComponents, type BaseSignUpOptionProps, } from './SignUpOptionFactory';

package/dist/components/presentation/User/BaseUser.d.ts

@@ -0,0 +1,66 @@
+/**
+ * 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 { User as IUser } from '@asgardeo/browser';
+import { FC, ReactNode } from 'react';
+/**
+ * Props for the BaseUser component.
+ */
+export interface BaseUserProps {
+    /**
+     * The user object to display. If not provided, the component will render the fallback.
+     */
+    user: IUser | null;
+    /**
+     * Render prop that takes the user object and returns a ReactNode.
+     * @param user - The authenticated user object from Asgardeo.
+     * @returns A ReactNode to render.
+     */
+    children: (user: IUser | null) => ReactNode;
+    /**
+     * Optional element to render when no user is provided.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * Base User component that provides the core functionality for displaying user information.
+ * This component takes a user object as a prop and uses render props to expose it.
+ *
+ * @remarks This is the base component that can be used in any context where you have
+ * a user object available. For React applications, use the User component which
+ * automatically retrieves the user from Asgardeo context.
+ *
+ * @example
+ * ```tsx
+ * import { BaseUser } from '@asgardeo/auth-react';
+ *
+ * const MyComponent = ({ user }) => {
+ *   return (
+ *     <BaseUser user={user} fallback={<p>No user data</p>}>
+ *       {(user) => (
+ *         <div>
+ *           <h1>Welcome, {user.displayName}!</h1>
+ *           <p>Email: {user.email}</p>
+ *         </div>
+ *       )}
+ *     </BaseUser>
+ *   );
+ * }
+ * ```
+ */
+declare const BaseUser: FC<BaseUserProps>;
+export default BaseUser;

package/dist/components/presentation/{User.d.ts → User/User.d.ts}

@@ -15,18 +15,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { User as AsgardeoUser } from '@asgardeo/browser';
+import { User as IUser } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
+import { BaseUserProps } from './BaseUser';
 /**
  * Props for the User component.
+ * Extends BaseUserProps but makes the user prop optional since it will be obtained from useAsgardeo
  */
-export interface UserProps {
+export interface UserProps extends Omit<BaseUserProps, 'user'> {
     /**
      * Render prop that takes the user object and returns a ReactNode.
      * @param user - The authenticated user object from Asgardeo.
      * @returns A ReactNode to render.
      */
-    children: (user: AsgardeoUser | null) => ReactNode;
+    children: (user: IUser | null) => ReactNode;
     /**
      * Optional element to render when no user is signed in.
      */
@@ -34,10 +36,13 @@ export interface UserProps {
 }
 /**
  * A component that uses render props to expose the authenticated user object.
+ * This component automatically retrieves the user from Asgardeo context.
+ *
+ * @remarks This component is only supported in browser based React applications (CSR).
  *
  * @example
  * ```tsx
- * import { User } from '@asgardeo/auth-react';
+ * import { IUser } from '@asgardeo/auth-react';
  *
  * const App = () => {
  *   return (

package/dist/components/presentation/UserDropdown/BaseUserDropdown.d.ts

@@ -16,56 +16,68 @@
  * under the License.
  */
 import { FC, ReactElement, ReactNode } from 'react';
-export interface MenuItem {
-    label: string;
+interface MenuItem {
+    href?: string;
     icon?: ReactNode;
+    label: ReactNode;
     onClick?: () => void;
-    href?: string;
 }
 export interface BaseUserDropdownProps {
     /**
-     * Optional element to render when no user is signed in.
+     * Mapping of component attribute names to identity provider field names.
+     * Allows customizing which user profile fields should be used for each attribute.
      */
-    fallback?: ReactElement;
+    attributeMapping?: {
+        [key: string]: string | string[] | undefined;
+        firstName?: string | string[];
+        lastName?: string | string[];
+        picture?: string | string[];
+        username?: string | string[];
+    };
+    /**
+     * Optional size for the avatar
+     */
+    avatarSize?: number;
     /**
      * Optional className for the dropdown container.
      */
     className?: string;
     /**
-     * The user object containing profile information
+     * Optional element to render when no user is signed in.
      */
-    user: any;
+    fallback?: ReactElement;
     /**
-     * The HTML element ID where the portal should be mounted
+     * Whether the user data is currently loading
      */
-    portalId?: string;
+    isLoading?: boolean;
     /**
      * Menu items to display in the dropdown
      */
     menuItems?: MenuItem[];
     /**
-     * Show user's display name next to avatar in the trigger button
+     * Callback function for "Manage Profile" action
+     */
+    onManageProfile?: () => void;
+    /**
+     * Callback function for "Sign Out" action
      */
-    showTriggerLable?: boolean;
+    onSignOut?: () => void;
+    /**
+     * The HTML element ID where the portal should be mounted
+     */
+    portalId?: string;
     /**
      * Show dropdown header with user information
      */
     showDropdownHeader?: boolean;
     /**
-     * Optional size for the avatar
+     * Show user's display name next to avatar in the trigger button
      */
-    avatarSize?: number;
+    showTriggerLabel?: boolean;
     /**
-     * Mapping of component attribute names to identity provider field names.
-     * Allows customizing which user profile fields should be used for each attribute.
+     * The user object containing profile information
      */
-    attributeMapping?: {
-        picture?: string | string[];
-        firstName?: string | string[];
-        lastName?: string | string[];
-        username?: string | string[];
-        [key: string]: string | string[] | undefined;
-    };
+    user: any;
 }
 /**
  * BaseUserDropdown component displays a user avatar with a dropdown menu.

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

@@ -15,19 +15,54 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { BaseUserDropdownProps } from './BaseUserDropdown';
+/**
+ * Render props data passed to the children function
+ */
+export interface UserDropdownRenderProps {
+    /** Function to close the profile dialog */
+    closeProfile: () => void;
+    /** Whether user data is currently loading */
+    isLoading: boolean;
+    /** Whether the profile dialog is currently open */
+    isProfileOpen: boolean;
+    /** Function to open the user profile dialog */
+    openProfile: () => void;
+    /** Function to sign out the user */
+    signOut: () => void;
+    /** The authenticated user object */
+    user: any;
+}
 /**
  * Props for the UserDropdown component.
- * Extends BaseUserDropdownProps but makes the user prop optional since it will be obtained from useAsgardeo
+ * Extends BaseUserDropdownProps but excludes user, onManageProfile, and onSignOut since they're handled internally
  */
-export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user'>;
+export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManageProfile'> & {
+    /**
+     * Render prop function that receives user state and actions.
+     * When provided, this completely replaces the default dropdown rendering.
+     */
+    children?: (props: UserDropdownRenderProps) => ReactNode;
+    /**
+     * Custom render function for the dropdown content.
+     * When provided, this replaces just the dropdown content while keeping the trigger.
+     */
+    renderDropdown?: (props: UserDropdownRenderProps) => ReactNode;
+    /**
+     * Custom render function for the trigger button.
+     * When provided, this replaces just the trigger button while keeping the dropdown.
+     */
+    renderTrigger?: (props: UserDropdownRenderProps) => ReactNode;
+};
 /**
  * UserDropdown component displays a user avatar with a dropdown menu.
  * When clicked, it shows a popover with customizable menu items.
  * This component is the React-specific implementation that uses the BaseUserDropdown
  * and automatically retrieves the user data from Asgardeo context.
  *
+ * Supports render props for complete customization of the dropdown appearance and behavior.
+ *
  * @example
  * ```tsx
  * // Basic usage - will use user from Asgardeo context
@@ -39,10 +74,31 @@ export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user'>;
  *
  * // With custom configuration
  * <UserDropdown
- *   showUsername={false}
+ *   showTriggerLabel={true}
  *   avatarSize={40}
  *   fallback={<div>Please sign in</div>}
  * />
+ *
+ * // Using render props for complete customization
+ * <UserDropdown>
+ *   {({ user, isLoading, openProfile, signOut }) => (
+ *     <div>
+ *       <button onClick={openProfile}>
+ *         {user?.name || 'Loading...'}
+ *       </button>
+ *       <button onClick={signOut}>Logout</button>
+ *     </div>
+ *   )}
+ * </UserDropdown>
+ *
+ * // Using partial render props
+ * <UserDropdown
+ *   renderTrigger={({ user, openProfile }) => (
+ *     <button onClick={openProfile} className="custom-trigger">
+ *       Welcome, {user?.name}!
+ *     </button>
+ *   )}
+ * />
  * ```
  */
 declare const UserDropdown: FC<UserDropdownProps>;

package/dist/components/presentation/UserProfile/BaseUserProfile.d.ts

@@ -15,28 +15,51 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { User } from '@asgardeo/browser';
 import { FC, ReactElement } from 'react';
+interface ExtendedFlatSchema {
+    path?: string;
+    schemaId?: string;
+}
+interface Schema extends ExtendedFlatSchema {
+    caseExact?: boolean;
+    description?: string;
+    displayName?: string;
+    displayOrder?: string;
+    multiValued?: boolean;
+    mutability?: string;
+    name?: string;
+    required?: boolean;
+    returned?: string;
+    subAttributes?: Schema[];
+    type?: string;
+    uniqueness?: string;
+    value?: any;
+}
 export interface BaseUserProfileProps {
-    fallback?: ReactElement;
-    className?: string;
-    cardLayout?: boolean;
-    user: any;
-    mode?: 'inline' | 'popup';
-    portalId?: string;
-    title?: string;
     attributeMapping?: {
-        picture?: string | string[];
+        [key: string]: string | string[] | undefined;
         firstName?: string | string[];
         lastName?: string | string[];
+        picture?: string | string[];
         username?: string | string[];
-        [key: string]: string | string[] | undefined;
     };
+    cancelButtonText?: string;
+    cardLayout?: boolean;
+    className?: string;
     editable?: boolean;
+    fallback?: ReactElement;
+    flattenedProfile?: User;
+    mode?: 'inline' | 'popup';
     onChange?: (field: string, value: any) => void;
+    onOpenChange?: (open: boolean) => void;
     onSubmit?: (data: any) => void;
-    saveButtonText?: string;
-    cancelButtonText?: string;
     onUpdate?: (payload: any) => Promise<void>;
+    open?: boolean;
+    profile?: User;
+    saveButtonText?: string;
+    schemas?: Schema[];
+    title?: string;
 }
 declare const BaseUserProfile: FC<BaseUserProfileProps>;
 export default BaseUserProfile;

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

@@ -21,7 +21,7 @@ import { BaseUserProfileProps } from './BaseUserProfile';
  * Props for the UserProfile component.
  * Extends BaseUserProfileProps but makes the user prop optional since it will be obtained from useAsgardeo
  */
-export type UserProfileProps = Omit<BaseUserProfileProps, 'user'>;
+export type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | 'flattenedProfile' | 'schemas'>;
 /**
  * UserProfile component displays the authenticated user's profile information in a
  * structured and styled format. It shows user details such as display name, email,

package/dist/components/primitives/Alert/Alert.d.ts

@@ -0,0 +1,74 @@
+/**
+ * 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 { HTMLAttributes, ReactNode, RefAttributes, ForwardRefExoticComponent } from 'react';
+export type AlertVariant = 'success' | 'error' | 'warning' | 'info';
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The visual variant of the alert that determines color scheme and icon
+     */
+    variant?: AlertVariant;
+    /**
+     * Whether to show the default icon for the variant
+     */
+    showIcon?: boolean;
+    /**
+     * Alert content
+     */
+    children?: ReactNode;
+}
+export interface AlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Title content
+     */
+    children?: ReactNode;
+}
+export interface AlertDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Description content
+     */
+    children?: ReactNode;
+}
+/**
+ * Alert component that displays important information with different severity levels.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="success" showIcon>
+ *   <Alert.Title>Success! Your changes have been saved</Alert.Title>
+ *   <Alert.Description>
+ *     This is an alert with icon, title and description.
+ *   </Alert.Description>
+ * </Alert>
+ * ```
+ */
+declare const Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>;
+/**
+ * Alert title component.
+ */
+declare const AlertTitle: ForwardRefExoticComponent<AlertTitleProps & RefAttributes<HTMLHeadingElement>>;
+/**
+ * Alert description component.
+ */
+declare const AlertDescription: ForwardRefExoticComponent<AlertDescriptionProps & RefAttributes<HTMLParagraphElement>>;
+export interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {
+    Title: typeof AlertTitle;
+    Description: typeof AlertDescription;
+}
+declare const _default: AlertComponent;
+export default _default;
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/primitives/Avatar/Avatar.d.ts

@@ -17,26 +17,39 @@
  */
 import { FC } from 'react';
 export interface AvatarProps {
-    /**
-     * The URL of the avatar image
-     */
-    imageUrl?: string;
     /**
      * Alternative text for the avatar image
      */
     alt?: string;
     /**
-     * The size of the avatar in pixels
+     * Background generation strategy
+     * - 'random': Generate background color based on ASCII values of the name
+     * - 'none': Use default theme background
+     * - string: Use custom background color
+     * @default 'random'
      */
-    size?: number;
+    background?: 'random' | 'none' | string;
+    /**
+     * Optional className for the avatar
+     */
+    className?: string;
+    /**
+     * The URL of the avatar image
+     */
+    imageUrl?: string;
     /**
      * The name to use for generating initials when no image is provided
      */
     name?: string;
     /**
-     * Optional className for the avatar
+     * The size of the avatar in pixels
      */
-    className?: string;
+    size?: number;
+    /**
+     * The variant of the avatar shape
+     * @default 'circular'
+     */
+    variant?: 'circular' | 'square';
 }
 export declare const Avatar: FC<AvatarProps>;
 export default Avatar;

package/dist/components/primitives/Button/Button.d.ts

@@ -0,0 +1,83 @@
+/**
+ * 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 { ButtonHTMLAttributes } from 'react';
+export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;
+export type ButtonVariant = 'solid' | 'outline' | 'text';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    /**
+     * The button color that determines the color scheme
+     */
+    color?: ButtonColor;
+    /**
+     * The button variant that determines the visual style
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button
+     */
+    size?: ButtonSize;
+    /**
+     * Whether the button should take the full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * Icon to display before the button text
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Icon to display after the button text
+     */
+    endIcon?: React.ReactNode;
+}
+/**
+ * Button component with multiple variants and types.
+ *
+ * @example
+ * ```tsx
+ * // Primary solid button
+ * <Button color="primary" variant="solid">
+ *   Click me
+ * </Button>
+ *
+ * // Secondary outline button
+ * <Button color="secondary" variant="outline" size="large">
+ *   Cancel
+ * </Button>
+ *
+ * // Text button with loading state
+ * <Button color="tertiary" variant="text" loading>
+ *   Loading...
+ * </Button>
+ *
+ * // Button with icons
+ * <Button
+ *   color="primary"
+ *   startIcon={<Icon />}
+ *   endIcon={<Arrow />}
+ * >
+ *   Save and Continue
+ * </Button>
+ * ```
+ */
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;