@asgardeo/react 0.13.2 → 0.13.3

package/dist/components/presentation/CreateOrganization/BaseCreateOrganization.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { CreateOrganizationPayload } from '@asgardeo/browser';
+import { CreateOrganizationPayload, Preferences } from '@asgardeo/browser';
 import { CSSProperties, FC, ReactNode } from 'react';
 /**
  * Interface for organization form data.
@@ -41,6 +41,12 @@ export interface BaseCreateOrganizationProps {
     onSubmit?: (payload: CreateOrganizationPayload) => void | Promise<void>;
     onSuccess?: (organization: any) => void;
     open?: boolean;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     * Preferences are deep-merged with global ones, with component preferences
+     * taking precedence. Affects this component and all its descendants.
+     */
+    preferences?: Preferences;
     renderAdditionalFields?: () => ReactNode;
     style?: CSSProperties;
     title?: string;

package/dist/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.d.ts

@@ -0,0 +1,79 @@
+/**
+ * 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, ReactNode } from 'react';
+/**
+ * A resolved language option with display name and emoji flag.
+ */
+export interface LanguageOption {
+    /** BCP 47 language tag (e.g. "en", "fr", "en-US") */
+    code: string;
+    /** Human-readable display name resolved via Intl.DisplayNames */
+    displayName: string;
+    /** Flag emoji or globe emoji for the language */
+    emoji: string;
+}
+/**
+ * Render props exposed to consumers when using the render-prop pattern.
+ */
+export interface LanguageSwitcherRenderProps {
+    /** The currently active language code */
+    currentLanguage: string;
+    /** Whether a language switch is in progress */
+    isLoading: boolean;
+    /** Resolved language options */
+    languages: LanguageOption[];
+    /** Call this to switch to a different language */
+    onLanguageChange: (language: string) => void;
+}
+export interface BaseLanguageSwitcherProps {
+    /**
+     * Render-props callback. When provided, the default dropdown UI is replaced with
+     * whatever JSX the callback returns.
+     *
+     * @example
+     * ```tsx
+     * <BaseLanguageSwitcher {...props}>
+     *   {({languages, currentLanguage, onLanguageChange}) => (
+     *     <select value={currentLanguage} onChange={e => onLanguageChange(e.target.value)}>
+     *       {languages.map(l => <option key={l.code} value={l.code}>{l.emoji} {l.displayName}</option>)}
+     *     </select>
+     *   )}
+     * </BaseLanguageSwitcher>
+     * ```
+     */
+    children?: (props: LanguageSwitcherRenderProps) => ReactNode;
+    /** Additional CSS class applied to the root element (default UI only) */
+    className?: string;
+    /** The currently active language code */
+    currentLanguage: string;
+    /** Whether a language switch is in progress */
+    isLoading?: boolean;
+    /** Resolved language options to display */
+    languages: LanguageOption[];
+    /** Called when the user selects a language */
+    onLanguageChange: (language: string) => void;
+}
+/**
+ * Pure-UI language switcher dropdown.
+ * Accepts resolved `LanguageOption[]` (code + displayName + emoji) and delegates
+ * language switching to the `onLanguageChange` callback.
+ *
+ * Supports render props for full UI customisation.
+ */
+declare const BaseLanguageSwitcher: FC<BaseLanguageSwitcherProps>;
+export default BaseLanguageSwitcher;

package/dist/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.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 { Theme } from '@asgardeo/browser';
+declare const useStyles: (theme: Theme, colorScheme: string) => Record<string, string>;
+export default useStyles;

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

@@ -0,0 +1,77 @@
+/**
+ * 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, ReactNode } from 'react';
+import { LanguageOption, LanguageSwitcherRenderProps } from './BaseLanguageSwitcher';
+export type { LanguageOption, LanguageSwitcherRenderProps };
+export interface LanguageSwitcherProps {
+    /**
+     * Render-props callback for fully custom UI.
+     *
+     * @example
+     * ```tsx
+     * <LanguageSwitcher>
+     *   {({languages, currentLanguage, onLanguageChange, isLoading}) => (
+     *     <select
+     *       value={currentLanguage}
+     *       disabled={isLoading}
+     *       onChange={e => onLanguageChange(e.target.value)}
+     *     >
+     *       {languages.map(l => (
+     *         <option key={l.code} value={l.code}>{l.emoji} {l.displayName}</option>
+     *       ))}
+     *     </select>
+     *   )}
+     * </LanguageSwitcher>
+     * ```
+     */
+    children?: (props: LanguageSwitcherRenderProps) => ReactNode;
+    /** Additional CSS class for the root element (default UI only) */
+    className?: string;
+}
+/**
+ * A v2 LanguageSwitcher component that reads available languages from `FlowMetaContext`
+ * and switches both the UI language (via `I18nContext`) and the flow metadata translations
+ * (by re-fetching `GET /flow/meta` with the new language).
+ *
+ * Must be rendered inside a `FlowMetaProvider`.
+ *
+ * @example
+ * ```tsx
+ * // Default dropdown UI
+ * <LanguageSwitcher />
+ *
+ * // Custom UI with render props
+ * <LanguageSwitcher>
+ *   {({languages, currentLanguage, onLanguageChange}) => (
+ *     <div>
+ *       {languages.map(lang => (
+ *         <button
+ *           key={lang.code}
+ *           onClick={() => onLanguageChange(lang.code)}
+ *           style={{fontWeight: lang.code === currentLanguage ? 'bold' : 'normal'}}
+ *         >
+ *           {lang.emoji} {lang.displayName}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   )}
+ * </LanguageSwitcher>
+ * ```
+ */
+declare const LanguageSwitcher: FC<LanguageSwitcherProps>;
+export default LanguageSwitcher;

package/dist/components/presentation/OrganizationList/BaseOrganizationList.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { AllOrganizationsApiResponse, Organization } from '@asgardeo/browser';
+import { AllOrganizationsApiResponse, Organization, Preferences } from '@asgardeo/browser';
 import { CSSProperties, FC, ReactNode } from 'react';
 export interface OrganizationWithSwitchAccess extends Organization {
     canSwitch: boolean;
@@ -76,6 +76,12 @@ export interface BaseOrganizationListProps {
      * Whether the popup is open (only used in popup mode)
      */
     open?: boolean;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     * Preferences are deep-merged with global ones, with component preferences
+     * taking precedence. Affects this component and all its descendants.
+     */
+    preferences?: Preferences;
     /**
      * Custom renderer for when no organizations are found
      */

package/dist/components/presentation/OrganizationProfile/BaseOrganizationProfile.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { OrganizationDetails } from '@asgardeo/browser';
+import { OrganizationDetails, Preferences } from '@asgardeo/browser';
 import { FC, ReactElement, ReactNode } from 'react';
 export interface BaseOrganizationProfileProps {
     /**
@@ -75,6 +75,12 @@ export interface BaseOrganizationProfileProps {
      * The organization details to display.
      */
     organization?: OrganizationDetails | null;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     * Preferences are deep-merged with global ones, with component preferences
+     * taking precedence. Affects this component and all its descendants.
+     */
+    preferences?: Preferences;
     /**
      * Text for the save button (only used in editable mode).
      */

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.d.ts

@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { Preferences } from '@asgardeo/browser';
 import { CSSProperties, FC, ReactElement, ReactNode } from 'react';
 interface MenuItem {
     href?: string;
@@ -103,6 +104,12 @@ export interface BaseOrganizationSwitcherProps {
      * The HTML element ID where the portal should be mounted
      */
     portalId?: string;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     * Preferences are deep-merged with global ones, with component preferences
+     * taking precedence. Affects this component and all its descendants.
+     */
+    preferences?: Preferences;
     /**
      * Custom render function for the error state.
      */

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

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { User } from '@asgardeo/browser';
+import { User, Preferences } from '@asgardeo/browser';
 import { FC, ReactElement } from 'react';
 interface ExtendedFlatSchema {
     path?: string;
@@ -57,6 +57,12 @@ export interface BaseUserProfileProps {
     onOpenChange?: (open: boolean) => void;
     onUpdate?: (payload: any) => Promise<void>;
     open?: boolean;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     * Preferences are deep-merged with global ones, with component preferences
+     * taking precedence. Affects this component and all its descendants.
+     */
+    preferences?: Preferences;
     profile?: User;
     schemas?: Schema[];
     showFields?: string[];

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

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FlowMetadataResponse } from '@asgardeo/browser';
+import { FlowMetadataResponse, Preferences } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
 import { CardProps } from '../../../../primitives/Card/Card';
 /**
@@ -162,6 +162,12 @@ export interface BaseAcceptInviteProps {
      * This makes a request to the flow/execute endpoint.
      */
     onSubmit: (payload: Record<string, any>) => Promise<AcceptInviteFlowResponse>;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     * Preferences are deep-merged with global ones, with component preferences
+     * taking precedence. Affects this component and all its descendants.
+     */
+    preferences?: Preferences;
     /**
      * Whether to show the subtitle.
      */

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

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FlowMetadataResponse } from '@asgardeo/browser';
+import { FlowMetadataResponse, Preferences } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
 import { CardProps } from '../../../../primitives/Card/Card';
 /**
@@ -154,6 +154,12 @@ export interface BaseInviteUserProps {
      * This should make an authenticated request to the flow/execute endpoint.
      */
     onSubmit: (payload: Record<string, any>) => Promise<InviteUserFlowResponse>;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     * Preferences are deep-merged with global ones, with component preferences
+     * taking precedence. Affects this component and all its descendants.
+     */
+    preferences?: Preferences;
     /**
      * Whether to show the subtitle.
      */

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

@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { Preferences } from '@asgardeo/browser';
 import { FC, ReactElement } from 'react';
 import { BaseSignInProps } from './BaseSignIn';
 import { SignInRenderProps } from './v2/SignIn';
@@ -27,6 +28,10 @@ export type SignInProps = Pick<BaseSignInProps, 'className' | 'onSuccess' | 'onE
      * Render function for custom UI (render props pattern).
      */
     children?: (props: SignInRenderProps) => ReactElement;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     */
+    preferences?: Preferences;
 };
 /**
  * A styled SignIn component that provides native authentication flow with pre-built styling.

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, FlowMetadataResponse } from '@asgardeo/browser';
+import { EmbeddedSignInFlowRequestV2 as EmbeddedSignInFlowRequest, EmbeddedFlowComponentV2 as EmbeddedFlowComponent, FlowMetadataResponse, Preferences } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
 import { CardProps } from '../../../../primitives/Card/Card';
 /**
@@ -141,6 +141,12 @@ export interface BaseSignInProps {
      * @param authData - The authentication data returned upon successful completion.
      */
     onSuccess?: (authData: Record<string, any>) => void;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     * Preferences are deep-merged with global ones, with component preferences
+     * taking precedence. Affects this component and all its descendants.
+     */
+    preferences?: Preferences;
     /**
      * Whether to show the logo.
      */

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, FlowMetadataResponse } from '@asgardeo/browser';
+import { EmbeddedFlowComponentV2 as EmbeddedFlowComponent, EmbeddedSignInFlowRequestV2, FlowMetadataResponse, Preferences } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
 import { BaseSignInProps } from './BaseSignIn';
 /**
@@ -74,6 +74,12 @@ export type SignInProps = {
      * @param authData - The authentication data returned upon successful completion.
      */
     onSuccess?: (authData: Record<string, any>) => void;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     * Preferences are deep-merged with global ones, with component preferences
+     * taking precedence. Affects this component and all its descendants.
+     */
+    preferences?: Preferences;
     /**
      * Size variant for the component.
      */

package/dist/components/presentation/auth/SignUp/v2/BaseSignUp.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse } from '@asgardeo/browser';
+import { EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse, Preferences } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
 import { CardProps } from '../../../../primitives/Card/Card';
 /**
@@ -145,6 +145,12 @@ export interface BaseSignUpProps {
      * @returns Promise resolving to the sign-up response.
      */
     onSubmit?: (payload: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     * Preferences are deep-merged with global ones, with component preferences
+     * taking precedence. Affects this component and all its descendants.
+     */
+    preferences?: Preferences;
     /**
      *  Whether to redirect after sign-up.
      */

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

@@ -34,6 +34,11 @@ export interface FlowMetaContextValue {
      * The fetched flow metadata response, or null while loading / on error
      */
     meta: FlowMetadataResponse | null;
+    /**
+     * Fetches flow metadata for the given language and activates it in the i18n system.
+     * Use this to switch the UI language at runtime.
+     */
+    switchLanguage: (language: string) => Promise<void>;
 }
 declare const FlowMetaContext: Context<FlowMetaContextValue | null>;
 export default FlowMetaContext;

package/dist/contexts/I18n/ComponentPreferencesContext.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 { Preferences } from '@asgardeo/browser';
+import { Context } from 'react';
+/**
+ * Context for component-level preferences overrides.
+ * Presentational components can provide this context to override the global i18n
+ * and theme settings for their entire subtree, including all nested components.
+ */
+declare const ComponentPreferencesContext: Context<Preferences | undefined>;
+export default ComponentPreferencesContext;

package/dist/index.d.ts

@@ -127,6 +127,10 @@ export * from './components/presentation/OrganizationProfile/OrganizationProfile
 export { BaseCreateOrganization } from './components/presentation/CreateOrganization/BaseCreateOrganization';
 export type { BaseCreateOrganizationProps, OrganizationFormData, } from './components/presentation/CreateOrganization/BaseCreateOrganization';
 export { CreateOrganization } from './components/presentation/CreateOrganization/CreateOrganization';
+export { default as BaseLanguageSwitcher } from './components/presentation/LanguageSwitcher/BaseLanguageSwitcher';
+export type { BaseLanguageSwitcherProps, LanguageOption, LanguageSwitcherRenderProps, } from './components/presentation/LanguageSwitcher/BaseLanguageSwitcher';
+export { default as LanguageSwitcher } from './components/presentation/LanguageSwitcher/LanguageSwitcher';
+export type { LanguageSwitcherProps } from './components/presentation/LanguageSwitcher/LanguageSwitcher';
 export { default as Button } from './components/primitives/Button/Button';
 export * from './components/primitives/Button/Button';
 export { default as Card } from './components/primitives/Card/Card';