@asgardeo/react 0.2.4 → 0.4.0

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

@@ -0,0 +1,124 @@
+/**
+ * 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 { ApplicationNativeAuthenticationAuthenticator, ApplicationNativeAuthenticationAuthenticatorParamType } from '@asgardeo/browser';
+/**
+ * Interface for form field state.
+ */
+export interface FormField {
+    param: string;
+    type: ApplicationNativeAuthenticationAuthenticatorParamType;
+    displayName: string;
+    confidential: boolean;
+    required: boolean;
+    value: string;
+}
+/**
+ * Base props that all authenticator components share.
+ */
+export interface BaseAuthenticatorProps {
+    /**
+     * The authenticator configuration.
+     */
+    authenticator: ApplicationNativeAuthenticationAuthenticator;
+    /**
+     * Current form values.
+     */
+    formValues: Record<string, string>;
+    /**
+     * Whether the component is in loading state.
+     */
+    isLoading: boolean;
+    /**
+     * Error message to display.
+     */
+    error?: string | null;
+    /**
+     * Callback function called when input values change.
+     */
+    onInputChange: (param: string, value: string) => void;
+    /**
+     * Callback function called when the authenticator is submitted.
+     */
+    onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, 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;
+}
+/**
+ * Props for authenticator selector component.
+ */
+export interface AuthenticatorSelectorProps {
+    /**
+     * Available authenticators for selection.
+     */
+    authenticators: ApplicationNativeAuthenticationAuthenticator[];
+    /**
+     * Current form values.
+     */
+    formValues: Record<string, string>;
+    /**
+     * Whether the component is in loading state.
+     */
+    isLoading: boolean;
+    /**
+     * Error message to display.
+     */
+    error?: string | null;
+    /**
+     * Messages to display to the user.
+     */
+    messages: Array<{
+        type: string;
+        message: string;
+    }>;
+    /**
+     * Callback function called when input values change.
+     */
+    onInputChange: (param: string, value: string) => void;
+    /**
+     * Callback function called when an authenticator is selected.
+     */
+    onAuthenticatorSelection: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void;
+    /**
+     * Custom CSS class names.
+     */
+    inputClassName?: string;
+    buttonClassName?: string;
+    errorClassName?: string;
+    messageClassName?: string;
+    /**
+     * Text for the submit button.
+     */
+    submitButtonText?: string;
+}
+/**
+ * Style configuration for authenticators.
+ */
+export interface AuthenticatorStyle {
+    variant: 'solid' | 'outline';
+    color: string;
+}

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/User.d.ts

@@ -0,0 +1,62 @@
+/**
+ * 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';
+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 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: IUser | null) => ReactNode;
+    /**
+     * Optional element to render when no user is signed in.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * 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 { IUser } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <User fallback={<p>Please sign in</p>}>
+ *       {(user) => (
+ *         <div>
+ *           <h1>Welcome, {user.displayName}!</h1>
+ *           <p>Email: {user.email}</p>
+ *         </div>
+ *       )}
+ *     </User>
+ *   );
+ * }
+ * ```
+ */
+declare const User: FC<UserProps>;
+export default User;

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

@@ -0,0 +1,76 @@
+/**
+ * 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, ReactElement, ReactNode } from 'react';
+export interface MenuItem {
+    label: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+    href?: string;
+}
+export interface BaseUserDropdownProps {
+    /**
+     * Optional element to render when no user is signed in.
+     */
+    fallback?: ReactElement;
+    /**
+     * Optional className for the dropdown container.
+     */
+    className?: string;
+    /**
+     * The user object containing profile information
+     */
+    user: any;
+    /**
+     * The HTML element ID where the portal should be mounted
+     */
+    portalId?: string;
+    /**
+     * Menu items to display in the dropdown
+     */
+    menuItems?: MenuItem[];
+    /**
+     * Show user's display name next to avatar in the trigger button
+     */
+    showTriggerLabel?: boolean;
+    /**
+     * Show dropdown header with user information
+     */
+    showDropdownHeader?: boolean;
+    /**
+     * Optional size for the avatar
+     */
+    avatarSize?: number;
+    /**
+     * Mapping of component attribute names to identity provider field names.
+     * Allows customizing which user profile fields should be used for each attribute.
+     */
+    attributeMapping?: {
+        picture?: string | string[];
+        firstName?: string | string[];
+        lastName?: string | string[];
+        username?: string | string[];
+        [key: string]: string | string[] | undefined;
+    };
+}
+/**
+ * BaseUserDropdown component displays a user avatar with a dropdown menu.
+ * When clicked, it shows a popover with customizable menu items.
+ * This component serves as the base for framework-specific implementations.
+ */
+export declare const BaseUserDropdown: FC<BaseUserDropdownProps>;
+export default BaseUserDropdown;

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

@@ -0,0 +1,49 @@
+/**
+ * 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 { BaseUserDropdownProps } from './BaseUserDropdown';
+/**
+ * Props for the UserDropdown component.
+ * Extends BaseUserDropdownProps but makes the user prop optional since it will be obtained from useAsgardeo
+ */
+export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user'>;
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - will use user from Asgardeo context
+ * <UserDropdown menuItems={[
+ *   { label: 'Profile', onClick: () => {} },
+ *   { label: 'Settings', href: '/settings' },
+ *   { label: 'Sign Out', onClick: () => {} }
+ * ]} />
+ *
+ * // With custom configuration
+ * <UserDropdown
+ *   showUsername={false}
+ *   avatarSize={40}
+ *   fallback={<div>Please sign in</div>}
+ * />
+ * ```
+ */
+declare const UserDropdown: FC<UserDropdownProps>;
+export default UserDropdown;

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

@@ -0,0 +1,63 @@
+/**
+ * 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, ReactElement } from 'react';
+import { User } from '@asgardeo/browser';
+interface ExtendedFlatSchema {
+    schemaId?: string;
+    path?: string;
+}
+interface Schema extends ExtendedFlatSchema {
+    caseExact?: boolean;
+    description?: string;
+    displayName?: string;
+    displayOrder?: string;
+    multiValued?: boolean;
+    mutability?: string;
+    name?: string;
+    required?: boolean;
+    returned?: string;
+    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[];
+        firstName?: string | string[];
+        lastName?: string | string[];
+        username?: string | string[];
+        [key: string]: string | string[] | undefined;
+    };
+    editable?: boolean;
+    onChange?: (field: string, value: any) => void;
+    onSubmit?: (data: any) => void;
+    saveButtonText?: string;
+    cancelButtonText?: string;
+    onUpdate?: (payload: any) => Promise<void>;
+}
+declare const BaseUserProfile: FC<BaseUserProfileProps>;
+export default BaseUserProfile;

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

@@ -0,0 +1,49 @@
+/**
+ * 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 { 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'>;
+/**
+ * UserProfile component displays the authenticated user's profile information in a
+ * structured and styled format. It shows user details such as display name, email,
+ * username, and other available profile information from Asgardeo.
+ *
+ * This component is the React-specific implementation that uses the BaseUserProfile
+ * and automatically retrieves the user data from Asgardeo context if not provided.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - will use user from Asgardeo context
+ * <UserProfile />
+ *
+ * // With explicit user data
+ * <UserProfile user={specificUser} />
+ *
+ * // With card layout and custom fallback
+ * <UserProfile
+ *   cardLayout={true}
+ *   fallback={<div>Please sign in to view your profile</div>}
+ * />
+ * ```
+ */
+declare const UserProfile: FC<UserProfileProps>;
+export default UserProfile;

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/{esm/types/components/SignIn/SignIn.d.ts → components/primitives/Avatar/Avatar.d.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ * 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
@@ -16,16 +16,27 @@
  * under the License.
  */
 import { FC } from 'react';
-import { SignInProps } from '../../models/sign-in';
-import './sign-in.scss';
-/**
- * This component provides the sign-in functionality.
- *
- * @param {SignInProps} props - Props injected to the component.
- * @param {BrandingProps} props.brandingProps - Branding related props.
- * @param {boolean} props.showSignUp - Show sign-up.
- *
- * @returns {ReactElement} - React element.
- */
-declare const SignIn: FC<SignInProps>;
-export default SignIn;
+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
+     */
+    size?: number;
+    /**
+     * The name to use for generating initials when no image is provided
+     */
+    name?: string;
+    /**
+     * Optional className for the avatar
+     */
+    className?: string;
+}
+export declare const Avatar: FC<AvatarProps>;
+export default Avatar;