@asgardeo/react 0.12.0 → 0.13.0

package/dist/components/actions/SignInButton/BaseSignInButton.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { WithPreferences } from '@asgardeo/browser';
+import { FlowMetadataResponse, WithPreferences } from '@asgardeo/browser';
 import { ButtonHTMLAttributes, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 /**
  * Common props shared by all {@link BaseSignInButton} components.
@@ -25,6 +25,10 @@ export interface CommonBaseSignInButtonProps {
      * Loading state during sign-in process
      */
     isLoading?: boolean;
+    /**
+     * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
+     */
+    meta?: FlowMetadataResponse | null;
     /**
      * Function to initiate the sign-in process
      */

package/dist/components/actions/SignOutButton/BaseSignOutButton.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { WithPreferences } from '@asgardeo/browser';
+import { FlowMetadataResponse, WithPreferences } from '@asgardeo/browser';
 import { ForwardRefExoticComponent, ButtonHTMLAttributes, ReactNode, RefAttributes } from 'react';
 /**
  * Common props shared by all {@link BaseSignOutButton} components.
@@ -25,6 +25,10 @@ export interface CommonBaseSignOutButtonProps {
      * Loading state during sign-out process
      */
     isLoading?: boolean;
+    /**
+     * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
+     */
+    meta?: FlowMetadataResponse | null;
     /**
      * Function to initiate the sign-out process
      */

package/dist/components/actions/SignUpButton/BaseSignUpButton.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { WithPreferences } from '@asgardeo/browser';
+import { FlowMetadataResponse, WithPreferences } from '@asgardeo/browser';
 import { ForwardRefExoticComponent, ButtonHTMLAttributes, ReactNode, RefAttributes } from 'react';
 /**
  * Common props shared by all {@link BaseSignUpButton} components.
@@ -25,6 +25,10 @@ export interface CommonBaseSignUpButtonProps {
      * Loading state during sign-up process
      */
     isLoading?: boolean;
+    /**
+     * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
+     */
+    meta?: FlowMetadataResponse | null;
     /**
      * Function to initiate the sign-up process
      */

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

@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { FlowMetadataResponse } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
 import { BaseUserDropdownProps } from './BaseUserDropdown';
 /**
@@ -27,6 +28,8 @@ export interface UserDropdownRenderProps {
     isLoading: boolean;
     /** Whether the profile dialog is currently open */
     isProfileOpen: boolean;
+    /** Flow metadata returned by the platform (v2 only). `null` while loading or unavailable. */
+    meta: FlowMetadataResponse | null;
     /** Function to open the user profile dialog */
     openProfile: () => void;
     /** Function to sign out the user */

package/dist/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.d.ts

@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { FlowMetadataResponse } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
 import { CardProps } from '../../../../primitives/Card/Card';
 /**
@@ -98,6 +99,10 @@ export interface BaseAcceptInviteRenderProps {
      * Whether the invite token is being validated.
      */
     isValidatingToken: boolean;
+    /**
+     * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
+     */
+    meta: FlowMetadataResponse | null;
     /**
      * Subtitle for the current step.
      */

package/dist/components/presentation/auth/InviteUser/v2/BaseInviteUser.d.ts

@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { FlowMetadataResponse } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
 import { CardProps } from '../../../../primitives/Card/Card';
 /**
@@ -89,6 +90,10 @@ export interface BaseInviteUserRenderProps {
      * Whether the form is valid.
      */
     isValid: boolean;
+    /**
+     * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
+     */
+    meta: FlowMetadataResponse | null;
     /**
      * Reset the flow to invite another user.
      */

package/dist/components/presentation/auth/SignIn/v2/BaseSignIn.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { EmbeddedSignInFlowRequestV2 as EmbeddedSignInFlowRequest, EmbeddedFlowComponentV2 as EmbeddedFlowComponent } from '@asgardeo/browser';
+import { EmbeddedSignInFlowRequestV2 as EmbeddedSignInFlowRequest, EmbeddedFlowComponentV2 as EmbeddedFlowComponent, FlowMetadataResponse } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
 import { CardProps } from '../../../../primitives/Card/Card';
 /**
@@ -57,6 +57,10 @@ export interface BaseSignInRenderProps {
         message: string;
         type: string;
     }>;
+    /**
+     * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
+     */
+    meta: FlowMetadataResponse | null;
     /**
      * Flow subtitle
      */

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

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { EmbeddedFlowComponentV2 as EmbeddedFlowComponent, EmbeddedSignInFlowRequestV2 } from '@asgardeo/browser';
+import { EmbeddedFlowComponentV2 as EmbeddedFlowComponent, EmbeddedSignInFlowRequestV2, FlowMetadataResponse } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
 import { BaseSignInProps } from './BaseSignIn';
 /**
@@ -42,6 +42,10 @@ export interface SignInRenderProps {
      * Loading state indicator
      */
     isLoading: boolean;
+    /**
+     * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
+     */
+    meta: FlowMetadataResponse | null;
     /**
      * Function to submit authentication data (primary)
      */

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

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { HttpRequestConfig, HttpResponse, IdToken, Organization, SignInOptions, TokenExchangeRequestConfig, TokenResponse } from '@asgardeo/browser';
+import { FlowMetadataResponse, HttpRequestConfig, HttpResponse, IdToken, Organization, SignInOptions, TokenExchangeRequestConfig, TokenResponse } from '@asgardeo/browser';
 import { Context } from 'react';
 import AsgardeoReactClient from '../../AsgardeoReactClient';
 import { AsgardeoReactConfig } from '../../models/config';
@@ -73,6 +73,10 @@ export type AsgardeoContextProps = {
          */
         requestAll: (requestConfigs?: HttpRequestConfig[]) => Promise<HttpResponse<any>[]>;
     };
+    /**
+     * Instance ID for multi-instance support.
+     */
+    instanceId: number;
     isInitialized: boolean;
     /**
      * Flag indicating whether the SDK is working in the background.
@@ -82,6 +86,11 @@ export type AsgardeoContextProps = {
      * Flag indicating whether the user is signed in or not.
      */
     isSignedIn: boolean;
+    /**
+     * Flow metadata returned by `GET /flow/meta` (v2 platform only).
+     * `null` while loading or when `resolveFromMeta` is disabled.
+     */
+    meta: FlowMetadataResponse | null;
     organization: Organization;
     organizationHandle: string | undefined;
     /**

package/dist/contexts/FlowMeta/FlowMetaContext.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2026, 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 { FlowMetadataResponse } from '@asgardeo/browser';
+import { Context } from 'react';
+export interface FlowMetaContextValue {
+    /**
+     * Error from the flow meta fetch, if any
+     */
+    error: Error | null;
+    /**
+     * Manually re-fetch flow metadata
+     */
+    fetchFlowMeta: () => Promise<void>;
+    /**
+     * Whether flow metadata is currently being fetched
+     */
+    isLoading: boolean;
+    /**
+     * The fetched flow metadata response, or null while loading / on error
+     */
+    meta: FlowMetadataResponse | null;
+}
+declare const FlowMetaContext: Context<FlowMetaContextValue | null>;
+export default FlowMetaContext;

package/dist/contexts/FlowMeta/FlowMetaProvider.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2026, 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, PropsWithChildren } from 'react';
+export interface FlowMetaProviderProps {
+    /**
+     * When false the provider skips fetching and provides null meta.
+     * @default true
+     */
+    enabled?: boolean;
+}
+/**
+ * FlowMetaProvider fetches flow metadata from the `GET /flow/meta` endpoint
+ * (v2 API) and makes it available to child components through `FlowMetaContext`.
+ *
+ * It is designed to be used in v2 embedded-flow scenarios and integrates with
+ * `ThemeProvider` so that theme settings (colors, direction, typography, …)
+ * from the server-side design configuration are applied automatically.
+ *
+ * @example
+ * ```tsx
+ * <FlowMetaProvider
+ *   config={{
+ *     baseUrl: 'https://localhost:8090',
+ *     type: FlowMetaType.App,
+ *     id: 'your-app-id',
+ *   }}
+ * >
+ *   <ThemeProvider>
+ *     <App />
+ *   </ThemeProvider>
+ * </FlowMetaProvider>
+ * ```
+ */
+declare const FlowMetaProvider: FC<PropsWithChildren<FlowMetaProviderProps>>;
+export default FlowMetaProvider;

package/dist/contexts/FlowMeta/useFlowMeta.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2026, 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 { FlowMetaContextValue } from './FlowMetaContext';
+declare const useFlowMeta: () => FlowMetaContextValue;
+export default useFlowMeta;

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

@@ -15,71 +15,68 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ThemeConfig, ThemeMode, RecursivePartial, BrowserThemeDetection, ThemePreferences } from '@asgardeo/browser';
+import { BrowserThemeDetection, RecursivePartial, ThemeConfig, ThemeMode, ThemePreferences } from '@asgardeo/browser';
 import { FC, PropsWithChildren } from 'react';
 export interface ThemeProviderProps {
     /**
-     * Configuration for theme detection when using 'class' or 'system' mode
+     * Configuration for theme detection when using 'class' or 'system' mode.
      */
     detection?: BrowserThemeDetection;
     /**
-     * Configuration for branding integration
+     * Whether to inherit the theme from the Asgardeo branding preference.
+     * @default true
      */
     inheritFromBranding?: ThemePreferences['inheritFromBranding'];
     /**
-     * The theme mode to use for automatic detection
-     * - 'light': Always use light theme
-     * - 'dark': Always use dark theme
-     * - 'system': Use system preference (prefers-color-scheme media query)
-     * - 'class': Detect theme based on CSS classes on HTML element
-     * - 'branding': Use active theme from branding preference (requires inheritFromBranding=true)
+     * The theme mode to use for automatic detection.
+     * - `'light'` | `'dark'`: Fixed color scheme.
+     * - `'system'`: Follows the OS preference.
+     * - `'class'`: Detects theme from CSS classes on the `<html>` element.
+     * - `'branding'`: Follows the active theme from the branding preference.
      */
     mode?: ThemeMode | 'branding';
+    /**
+     * Optional partial theme overrides applied on top of the resolved theme.
+     * User-supplied values always take the highest precedence.
+     */
     theme?: RecursivePartial<ThemeConfig>;
 }
 /**
- * ThemeProvider component that manages theme state and provides theme context to child components.
+ * ThemeProvider is the single entry-point for theme management in `@asgardeo/react`.
  *
- * This provider integrates with Asgardeo branding preferences to automatically apply
- * organization-specific themes while allowing for custom theme overrides.
+ * It transparently switches between two internal implementations:
  *
- * Features:
- * - Automatic theme mode detection (light/dark/system/class)
- * - Integration with Asgardeo branding API through useBranding hook
- * - Merging of branding themes with custom theme configurations
- * - CSS variable injection for easy styling
- * - Loading and error states for branding integration
+ * **v1** (`ThemeProvider` classic): Sources colors from the Asgardeo Branding API.
+ * Used automatically when no `FlowMetaProvider` is present in the component tree.
  *
- * @example
- * Basic usage with branding integration:
- * ```tsx
- * <ThemeProvider inheritFromBranding={true}>
- *   <App />
- * </ThemeProvider>
- * ```
+ * **v2** (`FlowMetaThemeProvider`): Sources colors from the `GET /flow/meta` endpoint
+ * via `FlowMetaProvider`. Used automatically when a `FlowMetaProvider` is present
+ * in the tree — or when `version="v2"` is set explicitly.
+ *
+ * The active version can also be pinned explicitly via the `version` prop.
+ * All components that consume `useTheme()` continue to work regardless of which
+ * version is active.
  *
  * @example
- * With custom theme overrides:
+ * Auto-detection (recommended):
  * ```tsx
- * <ThemeProvider
- *   theme={{
- *     colors: {
- *       primary: { main: '#custom-color' }
- *     }
- *   }}
- *   inheritFromBranding={true}
- * >
+ * // v2 mode – FlowMetaProvider is present
+ * <FlowMetaProvider config={{ baseUrl, type: FlowMetaType.App, id: appId }}>
+ *   <ThemeProvider>
+ *     <App />
+ *   </ThemeProvider>
+ * </FlowMetaProvider>
+ *
+ * // v1 mode – no FlowMetaProvider
+ * <ThemeProvider>
  *   <App />
  * </ThemeProvider>
  * ```
  *
  * @example
- * With branding-driven theme mode:
+ * Explicit version pinning:
  * ```tsx
- * <ThemeProvider
- *   mode="branding"
- *   inheritFromBranding={true}
- * >
+ * <ThemeProvider version="v2">
  *   <App />
  * </ThemeProvider>
  * ```

package/dist/contexts/Theme/v1/ThemeProvider.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2026, 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 { ThemeConfig, ThemeMode, RecursivePartial, BrowserThemeDetection, ThemePreferences } from '@asgardeo/browser';
+import { FC, PropsWithChildren } from 'react';
+export interface ThemeProviderProps {
+    /**
+     * Configuration for theme detection when using 'class' or 'system' mode
+     */
+    detection?: BrowserThemeDetection;
+    /**
+     * Configuration for branding integration
+     */
+    inheritFromBranding?: ThemePreferences['inheritFromBranding'];
+    /**
+     * The theme mode to use for automatic detection
+     * - 'light': Always use light theme
+     * - 'dark': Always use dark theme
+     * - 'system': Use system preference (prefers-color-scheme media query)
+     * - 'class': Detect theme based on CSS classes on HTML element
+     * - 'branding': Use active theme from branding preference (requires inheritFromBranding=true)
+     */
+    mode?: ThemeMode | 'branding';
+    theme?: RecursivePartial<ThemeConfig>;
+}
+/**
+ * ThemeProvider component that manages theme state and provides theme context to child components.
+ *
+ * This provider integrates with Asgardeo branding preferences to automatically apply
+ * organization-specific themes while allowing for custom theme overrides.
+ *
+ * Features:
+ * - Automatic theme mode detection (light/dark/system/class)
+ * - Integration with Asgardeo branding API through useBranding hook
+ * - Merging of branding themes with custom theme configurations
+ * - CSS variable injection for easy styling
+ * - Loading and error states for branding integration
+ *
+ * @example
+ * Basic usage with branding integration:
+ * ```tsx
+ * <ThemeProvider inheritFromBranding={true}>
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ *
+ * @example
+ * With custom theme overrides:
+ * ```tsx
+ * <ThemeProvider
+ *   theme={{
+ *     colors: {
+ *       primary: { main: '#custom-color' }
+ *     }
+ *   }}
+ *   inheritFromBranding={true}
+ * >
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ *
+ * @example
+ * With branding-driven theme mode:
+ * ```tsx
+ * <ThemeProvider
+ *   mode="branding"
+ *   inheritFromBranding={true}
+ * >
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>>;
+export default ThemeProvider;

package/dist/contexts/Theme/v2/ThemeProvider.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2026, 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 { ThemeConfig, RecursivePartial } from '@asgardeo/browser';
+import { FC, PropsWithChildren } from 'react';
+export interface ThemeProviderProps {
+    /**
+     * Optional theme overrides merged on top of the server-side flow meta theme.
+     * User-supplied values take highest precedence.
+     */
+    theme?: RecursivePartial<ThemeConfig>;
+}
+/**
+ * ThemeProvider is the v2 drop-in replacement for `ThemeProvider`.
+ *
+ * It reads the design theme from the nearest `FlowMetaContext` (provided by
+ * `FlowMetaProvider`) and publishes a resolved `Theme` object through the
+ * **same** `ThemeContext` that `useTheme` consumes.  This means all existing
+ * components that call `useTheme` continue to work without any changes.
+ *
+ * The `defaultColorScheme` field returned by the server is used to seed the
+ * active color scheme; the user can still toggle it locally via the
+ * `toggleTheme` value exposed in the context.
+ *
+ * @example
+ * ```tsx
+ * <FlowMetaProvider config={{ baseUrl, type: FlowMetaType.App, id: appId }}>
+ *   <ThemeProvider>
+ *     <App />   {/* useTheme() works here as usual *\/}
+ *   </ThemeProvider>
+ * </FlowMetaProvider>
+ * ```
+ *
+ * @example
+ * With user theme overrides (user values win over server values):
+ * ```tsx
+ * <ThemeProvider theme={{ colors: { primary: { main: '#ff0000' } } }}>
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>>;
+export default ThemeProvider;