@asgardeo/react 0.4.0 → 0.5.1

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/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
      */
-    showTriggerLabel?: boolean;
+    onManageProfile?: () => void;
+    /**
+     * Callback function for "Sign Out" action
+     */
+    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,11 +15,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC, ReactElement } from 'react';
 import { User } from '@asgardeo/browser';
+import { FC, ReactElement } from 'react';
 interface ExtendedFlatSchema {
-    schemaId?: string;
     path?: string;
+    schemaId?: string;
 }
 interface Schema extends ExtendedFlatSchema {
     caseExact?: boolean;
@@ -31,33 +31,35 @@ interface Schema extends ExtendedFlatSchema {
     name?: string;
     required?: boolean;
     returned?: string;
+    subAttributes?: Schema[];
     type?: string;
     uniqueness?: string;
     value?: any;
-    subAttributes?: Schema[];
 }
 export interface BaseUserProfileProps {
-    fallback?: ReactElement;
-    className?: string;
-    cardLayout?: boolean;
-    profile?: User;
-    flattenedProfile?: User;
-    schemas?: Schema[];
-    mode?: 'inline' | 'popup';
-    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/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/Card/Card.d.ts

@@ -1,6 +1,5 @@
 /**
- * Copyright (import {CSSProperties, HTMLAttributes, forwardRef, useMemo, ReactNode, ForwardRefExoticComponent, Ref} from 'react';
-import useTheme from '../../../theme/useTheme'; 2025, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) {{year}}, 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
@@ -20,17 +19,17 @@ import { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } f
 export type CardVariant = 'default' | 'outlined' | 'elevated';
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * The visual variant of the card
+     * Card content
      */
-    variant?: CardVariant;
+    children?: ReactNode;
     /**
      * Whether the card should be clickable (shows hover effects)
      */
     clickable?: boolean;
     /**
-     * Card content
+     * The visual variant of the card
      */
-    children?: ReactNode;
+    variant?: CardVariant;
 }
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
     /**
@@ -121,12 +120,12 @@ declare const CardContent: ForwardRefExoticComponent<CardContentProps & RefAttri
  */
 declare const CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
 export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {
-    Header: typeof CardHeader;
-    Title: typeof CardTitle;
-    Description: typeof CardDescription;
     Action: typeof CardAction;
     Content: typeof CardContent;
+    Description: typeof CardDescription;
     Footer: typeof CardFooter;
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
 }
 declare const _default: CardComponent;
 export default _default;

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

@@ -19,14 +19,6 @@ import { FC, HTMLAttributes } from 'react';
 export type DividerOrientation = 'horizontal' | 'vertical';
 export type DividerVariant = 'solid' | 'dashed' | 'dotted';
 export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The orientation of the divider
-     */
-    orientation?: DividerOrientation;
-    /**
-     * The variant style of the divider
-     */
-    variant?: DividerVariant;
     /**
      * Text to display in the center of the divider
      */
@@ -35,6 +27,14 @@ export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
      * Custom color for the divider
      */
     color?: string;
+    /**
+     * The orientation of the divider
+     */
+    orientation?: DividerOrientation;
+    /**
+     * The variant style of the divider
+     */
+    variant?: DividerVariant;
 }
 /**
  * Divider component for separating content sections.

package/dist/components/primitives/Icons/Building.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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';
+export interface BuildingProps {
+    /**
+     * Color of the icon.
+     */
+    color?: string;
+    /**
+     * Height of the icon.
+     */
+    height?: number | string;
+    /**
+     * Width of the icon.
+     */
+    width?: number | string;
+}
+/**
+ * Building Icon component.
+ *
+ * @param props - Props injected to the component.
+ * @returns Building Icon component.
+ */
+declare const Building: FC<BuildingProps>;
+export default Building;

package/dist/components/primitives/Icons/BuildingAlt.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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';
+export interface BuildingAltProps {
+    /**
+     * Color of the icon.
+     */
+    color?: string;
+    /**
+     * Height of the icon.
+     */
+    height?: number | string;
+    /**
+     * Width of the icon.
+     */
+    width?: number | string;
+}
+/**
+ * Alternative Building Icon component.
+ *
+ * @param props - Props injected to the component.
+ * @returns Alternative Building Icon component.
+ */
+declare const BuildingAlt: FC<BuildingAltProps>;
+export default BuildingAlt;

package/dist/components/primitives/Icons/Check.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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';
+export interface CheckProps {
+    /**
+     * Color of the icon.
+     */
+    color?: string;
+    /**
+     * Height of the icon.
+     */
+    height?: number | string;
+    /**
+     * Width of the icon.
+     */
+    width?: number | string;
+}
+/**
+ * Check Icon component.
+ *
+ * @param props - Props injected to the component.
+ * @returns Check Icon component.
+ */
+declare const Check: FC<CheckProps>;
+export default Check;

package/dist/components/primitives/Icons/ChevronDown.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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';
+export interface ChevronDownProps {
+    /**
+     * Color of the icon.
+     */
+    color?: string;
+    /**
+     * Height of the icon.
+     */
+    height?: number | string;
+    /**
+     * Width of the icon.
+     */
+    width?: number | string;
+}
+/**
+ * ChevronDown Icon component.
+ *
+ * @param props - Props injected to the component.
+ * @returns ChevronDown Icon component.
+ */
+declare const ChevronDown: FC<ChevronDownProps>;
+export default ChevronDown;

package/dist/components/primitives/Icons/LogOut.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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, SVGProps } from 'react';
+/**
+ * LogOut icon component.
+ */
+declare const LogOut: FC<SVGProps<SVGSVGElement>>;
+export default LogOut;

package/dist/components/primitives/Icons/Plus.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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, SVGProps } from 'react';
+/**
+ * Plus (add) icon component.
+ */
+declare const Plus: FC<SVGProps<SVGSVGElement>>;
+export default Plus;

package/dist/components/primitives/Icons/User.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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, SVGProps } from 'react';
+/**
+ * User icon component.
+ */
+declare const User: FC<SVGProps<SVGSVGElement>>;
+export default User;