@asgardeo/react 0.4.0 → 0.5.0

package/dist/components/primitives/Icons/X.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';
+/**
+ * X (close) icon component.
+ */
+declare const X: FC<SVGProps<SVGSVGElement>>;
+export default X;

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

@@ -0,0 +1,27 @@
+/**
+ * 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 CircleAlert } from './CircleAlert';
+export { default as CircleCheck } from './CircleCheck';
+export { default as Eye } from './Eye';
+export { default as EyeOff } from './EyeOff';
+export { default as Info } from './Info';
+export { default as LogOut } from './LogOut';
+export { default as Plus } from './Plus';
+export { default as TriangleAlert } from './TriangleAlert';
+export { default as User } from './User';
+export { default as X } from './X';

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

@@ -0,0 +1,123 @@
+/**
+ * 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 KeyValuePair {
+    key: string;
+    value: string;
+}
+export interface KeyValueInputProps {
+    /**
+     * CSS class name for styling the component.
+     */
+    className?: string;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Error message to display.
+     */
+    error?: string;
+    /**
+     * Help text to display below the input.
+     */
+    helperText?: string;
+    /**
+     * Label for the key input field.
+     */
+    keyLabel?: string;
+    /**
+     * Placeholder text for the key input field.
+     */
+    keyPlaceholder?: string;
+    /**
+     * Label for the component.
+     */
+    label?: string;
+    /**
+     * Maximum number of key-value pairs allowed.
+     */
+    maxPairs?: number;
+    /**
+     * Callback fired when the key-value pairs change.
+     */
+    onChange?: (pairs: KeyValuePair[]) => void;
+    /**
+     * Callback fired when a pair is added.
+     */
+    onAdd?: (pair: KeyValuePair) => void;
+    /**
+     * Callback fired when a pair is removed.
+     */
+    onRemove?: (pair: KeyValuePair, index: number) => void;
+    /**
+     * Whether the component is in read-only mode.
+     */
+    readOnly?: boolean;
+    /**
+     * Text for the remove button.
+     */
+    removeButtonText?: string;
+    /**
+     * Whether the component is required.
+     */
+    required?: boolean;
+    /**
+     * Current key-value pairs.
+     */
+    value?: Record<string, any> | KeyValuePair[];
+    /**
+     * Label for the value input field.
+     */
+    valueLabel?: string;
+    /**
+     * Placeholder text for the value input field.
+     */
+    valuePlaceholder?: string;
+}
+/**
+ * KeyValueInput component allows users to manage key-value pairs with add/remove functionality.
+ * It provides a user-friendly interface for editing organization attributes or similar data structures.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <KeyValueInput
+ *   label="Organization Attributes"
+ *   onChange={(pairs) => console.log(pairs)}
+ * />
+ *
+ * // With initial values
+ * <KeyValueInput
+ *   label="Organization Attributes"
+ *   value={{department: 'IT', location: 'New York'}}
+ *   onChange={(pairs) => console.log(pairs)}
+ * />
+ *
+ * // With add/remove callbacks
+ * <KeyValueInput
+ *   label="Custom Attributes"
+ *   value={attributes}
+ *   onChange={(pairs) => setAttributes(pairs)}
+ *   onAdd={(pair) => console.log('Added:', pair)}
+ *   onRemove={(pair, index) => console.log('Removed:', pair, 'at index:', index)}
+ * />
+ * ```
+ */
+declare const KeyValueInput: FC<KeyValueInputProps>;
+export default KeyValueInput;

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

@@ -15,36 +15,36 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
 import { UseFloatingReturn, UseInteractionsReturn } from '@floating-ui/react';
+import React from 'react';
 interface DialogOptions {
     initialOpen?: boolean;
-    open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    open?: boolean;
 }
 interface DialogHookReturn extends UseFloatingReturn, UseInteractionsReturn {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    labelId: string | undefined;
     descriptionId: string | undefined;
-    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    labelId: string | undefined;
+    open: boolean;
     setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setOpen: (open: boolean) => void;
 }
 export declare function useDialog({ initialOpen, open: controlledOpen, onOpenChange: setControlledOpen, }?: DialogOptions): DialogHookReturn;
 interface PopoverOptions {
     initialOpen?: boolean;
-    open?: boolean;
+    offset?: number;
     onOpenChange?: (open: boolean) => void;
+    open?: boolean;
     placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
-    offset?: number;
 }
 interface PopoverHookReturn extends UseFloatingReturn, UseInteractionsReturn {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    labelId: string | undefined;
     descriptionId: string | undefined;
-    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    labelId: string | undefined;
+    open: boolean;
     setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setOpen: (open: boolean) => void;
 }
 export declare function usePopover({ initialOpen, open: controlledOpen, onOpenChange: setControlledOpen, placement, offset: offsetValue, }?: PopoverOptions): PopoverHookReturn;
 export declare const useDialogContext: () => DialogHookReturn;
@@ -53,8 +53,8 @@ export declare function Dialog({ children, ...options }: {
     children: React.ReactNode;
 } & DialogOptions): import("react/jsx-runtime").JSX.Element;
 interface DialogTriggerProps {
-    children: React.ReactNode;
     asChild?: boolean;
+    children: React.ReactNode;
 }
 export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement> & DialogTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export declare const DialogContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -62,8 +62,8 @@ export declare function Popover({ children, ...options }: {
     children: React.ReactNode;
 } & PopoverOptions): import("react/jsx-runtime").JSX.Element;
 interface PopoverTriggerProps {
-    children: React.ReactNode;
     asChild?: boolean;
+    children: React.ReactNode;
 }
 export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement> & PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -74,14 +74,14 @@ export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<Rea
 export declare const PopoverClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 export declare const DialogClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 interface LegacyPopoverProps {
-    isOpen: boolean;
     children: React.ReactNode;
-    onClose: () => void;
     className?: string;
+    isOpen: boolean;
     mode?: 'modal' | 'dropdown';
-    trigger?: HTMLElement | null;
-    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
     offset?: number;
+    onClose: () => void;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    trigger?: HTMLElement | null;
 }
 declare const LegacyPopoverHeader: React.FC<{
     children?: React.ReactNode;
@@ -90,7 +90,7 @@ declare const LegacyPopoverContent: React.FC<{
     children: React.ReactNode;
 }>;
 export declare const LegacyPopover: React.FC<LegacyPopoverProps> & {
-    Header: typeof LegacyPopoverHeader;
     Content: typeof LegacyPopoverContent;
+    Header: typeof LegacyPopoverHeader;
 };
 export default LegacyPopover;

package/dist/contexts/Asgardeo/AsgardeoContext.d.ts

@@ -20,6 +20,9 @@ import { Context } from 'react';
  * Props interface of {@link AsgardeoContext}
  */
 export type AsgardeoContextProps = {
+    afterSignInUrl: string;
+    baseUrl: string;
+    isInitialized: boolean;
     /**
      * Flag indicating whether the SDK is working in the background.
      */
@@ -47,8 +50,6 @@ export type AsgardeoContextProps = {
      */
     signUp: any;
     user: any;
-    baseUrl: string;
-    afterSignInUrl: string;
 };
 /**
  * Context object for managing the Authentication flow builder core context.

package/dist/contexts/Organization/OrganizationContext.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 { Organization } from '@asgardeo/browser';
+import { Context } from 'react';
+/**
+ * Interface for organizations with switch access information.
+ */
+export interface OrganizationWithSwitchAccess extends Organization {
+    /**
+     * Whether the user has switch access to this organization
+     */
+    canSwitch: boolean;
+}
+/**
+ * Props interface of {@link OrganizationContext}
+ */
+export type OrganizationContextProps = {
+    currentOrganization: Organization | null;
+    error: string | null;
+    getOrganizations: () => Promise<Organization[]>;
+    isLoading: boolean;
+    organizations: Organization[] | null;
+    revalidateOrganizations: () => Promise<void>;
+    switchOrganization: (organization: Organization) => Promise<void>;
+    /**
+     * Paginated organizations with switch access information
+     */
+    paginatedOrganizations: OrganizationWithSwitchAccess[];
+    /**
+     * Whether there are more organizations to load
+     */
+    hasMore: boolean;
+    /**
+     * Whether more data is being loaded
+     */
+    isLoadingMore: boolean;
+    /**
+     * Total number of organizations
+     */
+    totalCount: number;
+    /**
+     * Function to fetch more organizations (pagination)
+     */
+    fetchMore: () => Promise<void>;
+    /**
+     * Function to fetch paginated organizations with switch access
+     */
+    fetchPaginatedOrganizations: (config?: {
+        filter?: string;
+        limit?: number;
+        recursive?: boolean;
+        reset?: boolean;
+    }) => Promise<void>;
+};
+/**
+ * Context object for managing organization data and related operations.
+ */
+declare const OrganizationContext: Context<OrganizationContextProps | null>;
+export default OrganizationContext;

package/dist/contexts/Organization/OrganizationProvider.d.ts

@@ -0,0 +1,90 @@
+/**
+ * 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 { Organization } from '@asgardeo/browser';
+import { FC, PropsWithChildren } from 'react';
+/**
+ * Props interface of {@link OrganizationProvider}
+ */
+export interface OrganizationProviderProps {
+    /**
+     * Whether to automatically fetch organizations on mount
+     */
+    autoFetch?: boolean;
+    /**
+     * Initial current organization
+     */
+    currentOrganization?: Organization | null;
+    /**
+     * Function to fetch organizations
+     */
+    getOrganizations: () => Promise<Organization[]>;
+    /**
+     * Callback function called when an error occurs
+     */
+    onError?: (error: string) => void;
+    /**
+     * Callback function called when switching organizations
+     */
+    onOrganizationSwitch?: (organization: Organization) => Promise<void>;
+    /**
+     * Initial list of organizations
+     */
+    organizations?: Organization[] | null;
+}
+/**
+ * OrganizationProvider component that manages organization data and provides it through OrganizationContext.
+ *
+ * This provider:
+ * - Fetches organization data from the organizations endpoint
+ * - Manages current organization state
+ * - Provides functions for switching organizations and refreshing data
+ * - Handles loading states and errors
+ * - Accepts a custom getOrganizations function for flexible data fetching
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with auto-fetch (uses internal API)
+ * <OrganizationProvider>
+ *   <App />
+ * </OrganizationProvider>
+ *
+ * // With custom getOrganizations function
+ * <OrganizationProvider getOrganizations={async () => asgardeo.getOrganizations()}>
+ *   <App />
+ * </OrganizationProvider>
+ *
+ * // With custom error handling
+ * <OrganizationProvider onError={(error) => console.error('Organization error:', error)}>
+ *   <App />
+ * </OrganizationProvider>
+ *
+ * // With custom organization switch handler
+ * <OrganizationProvider
+ *   onOrganizationSwitch={(org) => console.log('Switched to:', org.name)}
+ * >
+ *   <App />
+ * </OrganizationProvider>
+ *
+ * // Disable auto-fetch (fetch manually using revalidateOrganizations)
+ * <OrganizationProvider autoFetch={false}>
+ *   <App />
+ * </OrganizationProvider>
+ * ```
+ */
+declare const OrganizationProvider: FC<PropsWithChildren<OrganizationProviderProps>>;
+export default OrganizationProvider;

package/dist/contexts/Organization/useOrganization.d.ts

@@ -0,0 +1,104 @@
+/**
+ * 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 { OrganizationContextProps } from './OrganizationContext';
+/**
+ * Hook to access the Organization context.
+ *
+ * This hook provides access to organization data including:
+ * - List of organizations the user belongs to
+ * - Current organization
+ * - Functions to switch organizations and refresh data
+ * - Function to fetch organizations programmatically
+ * - Loading states and error handling
+ *
+ * @returns {OrganizationContextProps} The organization context value containing all organization-related data and functions
+ * @throws {Error} Throws an error if used outside of OrganizationProvider
+ *
+ * @example
+ * ```tsx
+ * import {useOrganization} from '@asgardeo/react';
+ *
+ * function OrganizationSelector() {
+ *   const {
+ *     organizations,
+ *     currentOrganization,
+ *     switchOrganization,
+ *     revalidateOrganizations,
+ *     getOrganizations,
+ *     isLoading,
+ *     error
+ *   } = useOrganization();
+ *
+ *   if (isLoading) {
+ *     return <div>Loading organizations...</div>;
+ *   }
+ *
+ *   if (error) {
+ *     return <div>Error: {error}</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <h2>Current: {currentOrganization?.name}</h2>
+ *       <select
+ *         value={currentOrganization?.id || ''}
+ *         onChange={(e) => {
+ *           const org = organizations?.find(o => o.id === e.target.value);
+ *           if (org) switchOrganization(org);
+ *         }}
+ *       >
+ *         {organizations?.map(org => (
+ *           <option key={org.id} value={org.id}>
+ *             {org.name}
+ *           </option>
+ *         ))}
+ *       </select>
+ *       <button onClick={revalidateOrganizations}>
+ *         Refresh Organizations
+ *       </button>
+ *       <button onClick={async () => {
+ *         const fresh = await getOrganizations();
+ *         console.log('Fresh organizations:', fresh);
+ *       }}>
+ *         Get Organizations Manually
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ *
+ * // Switch to a specific organization
+ * function SwitchOrgButton() {
+ *   const {organizations, switchOrganization} = useOrganization();
+ *
+ *   const handleSwitch = (orgId: string) => {
+ *     const org = organizations?.find(o => o.id === orgId);
+ *     if (org) {
+ *       switchOrganization(org);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <button onClick={() => handleSwitch('org-123')}>
+ *       Switch to Organization
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useOrganization: () => OrganizationContextProps;
+export default useOrganization;

package/dist/contexts/Theme/types.d.ts

@@ -16,24 +16,53 @@
  * under the License.
  */
 export interface ThemeColors {
-    primary: string;
-    background: string;
-    surface: string;
+    background: {
+        body: {
+            main: string;
+        };
+        disabled: string;
+        surface: string;
+    };
+    border: string;
+    error: {
+        contrastText: string;
+        main: string;
+    };
+    primary: {
+        contrastText: string;
+        main: string;
+    };
+    secondary: {
+        contrastText: string;
+        main: string;
+    };
+    success: {
+        contrastText: string;
+        main: string;
+    };
     text: {
         primary: string;
         secondary: string;
     };
-    border: string;
+    warning: {
+        contrastText: string;
+        main: string;
+    };
 }
 export interface ThemeConfig {
-    colors: ThemeColors;
-    spacing: {
-        unit: number;
-    };
     borderRadius: {
-        small: string;
+        large: string;
         medium: string;
+        small: string;
+    };
+    colors: ThemeColors;
+    shadows: {
         large: string;
+        medium: string;
+        small: string;
+    };
+    spacing: {
+        unit: number;
     };
 }
 export interface Theme extends ThemeConfig {

package/dist/contexts/User/UserContext.d.ts

@@ -15,15 +15,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Context } from 'react';
 import { User, Schema } from '@asgardeo/browser';
+import { Context } from 'react';
 /**
  * Props interface of {@link UserContext}
  */
 export type UserContextProps = {
+    flattenedProfile: User | null;
     profile: User | null;
+    revalidateProfile: () => Promise<void>;
     schemas: Schema[] | null;
-    flattenedProfile: User | null;
 };
 /**
  * Context object for managing user profile data and related operations.

package/dist/contexts/User/UserProvider.d.ts

@@ -15,13 +15,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC, PropsWithChildren } from 'react';
 import { UserProfile } from '@asgardeo/browser';
+import { FC, PropsWithChildren } from 'react';
 /**
  * Props interface of {@link UserProvider}
  */
 export interface UserProviderProps {
     profile: UserProfile;
+    revalidateProfile?: () => Promise<void>;
 }
 /**
  * UserProvider component that manages user profile data and provides it through UserContext.