@thunderid/react 0.1.0 → 0.2.0

package/dist/cjs/utils/v2/resolveTranslationsInObject.cjs

@@ -0,0 +1,33 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+
+//#region src/utils/v2/resolveTranslationsInObject.ts
+/**
+* Resolves all {{ t() }} and {{ meta() }} template expressions in an object's string properties.
+* @param obj - The object to process
+* @param t - The translation function from useTranslation
+* @param properties - Array of property names to resolve (optional, defaults to common properties)
+* @param meta - Optional flow metadata for resolving meta() expressions
+* @returns A new object with resolved template strings
+*/
+const resolveTranslationsInObject = (obj, t, properties = [
+	"label",
+	"placeholder",
+	"text",
+	"title",
+	"subtitle"
+], meta) => {
+	const resolved = { ...obj };
+	properties.forEach((prop) => {
+		if (resolved[prop] && typeof resolved[prop] === "string") resolved[prop] = (0, __thunderid_browser.resolveFlowTemplateLiterals)(resolved[prop], {
+			meta,
+			t
+		});
+	});
+	return resolved;
+};
+
+//#endregion
+exports.resolveTranslationsInObject = resolveTranslationsInObject;
+//# sourceMappingURL=resolveTranslationsInObject.cjs.map

package/dist/cjs/utils/v2/resolveTranslationsInObject.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveTranslationsInObject.cjs","names":["resolved: T"],"sources":["../../../../src/utils/v2/resolveTranslationsInObject.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {FlowMetadataResponse, resolveFlowTemplateLiterals} from '@thunderid/browser';\nimport {UseTranslation} from '../../hooks/useTranslation';\n\n/**\n * Resolves all {{ t() }} and {{ meta() }} template expressions in an object's string properties.\n * @param obj - The object to process\n * @param t - The translation function from useTranslation\n * @param properties - Array of property names to resolve (optional, defaults to common properties)\n * @param meta - Optional flow metadata for resolving meta() expressions\n * @returns A new object with resolved template strings\n */\nexport const resolveTranslationsInObject = <T extends Record<string, any>>(\n  obj: T,\n  t: UseTranslation['t'],\n  properties: string[] = ['label', 'placeholder', 'text', 'title', 'subtitle'],\n  meta?: FlowMetadataResponse | null,\n): T => {\n  const resolved: T = {...obj};\n\n  properties.forEach((prop: string) => {\n    if (resolved[prop] && typeof resolved[prop] === 'string') {\n      (resolved as any)[prop] = resolveFlowTemplateLiterals(resolved[prop], {meta, t});\n    }\n  });\n\n  return resolved;\n};\n\nexport default resolveTranslationsInObject;\n"],"mappings":";;;;;;;;;;;;;AA6BA,MAAa,+BACX,KACA,GACA,aAAuB;CAAC;CAAS;CAAe;CAAQ;CAAS;CAAW,EAC5E,SACM;CACN,MAAMA,WAAc,EAAC,GAAG,KAAI;AAE5B,YAAW,SAAS,SAAiB;AACnC,MAAI,SAAS,SAAS,OAAO,SAAS,UAAU,SAC9C,CAAC,SAAiB,6DAAoC,SAAS,OAAO;GAAC;GAAM;GAAE,CAAC;GAElF;AAEF,QAAO"}

package/dist/components/actions/SignInButton/BaseSignInButton.js

@@ -0,0 +1,49 @@
+import Button_default from "../../primitives/Button/Button.js";
+import { withVendorCSSClassPrefix } from "@thunderid/browser";
+import { forwardRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/actions/SignInButton/BaseSignInButton.tsx
+/**
+* Base SignInButton component that supports both render props and traditional props patterns.
+*
+* @example Using render props
+* ```tsx
+* <BaseSignInButton>
+*   {({signIn, isLoading}) => (
+*     <button onClick={signIn} disabled={isLoading}>
+*       {isLoading ? 'Signing in...' : 'Sign In'}
+*     </button>
+*   )}
+* </BaseSignInButton>
+* ```
+*
+* @example Using traditional props
+* ```tsx
+* <BaseSignInButton className="custom-button">Sign In</BaseSignInButton>
+* ```
+*/
+const BaseSignInButton = forwardRef(({ children, className, style, signIn, isLoading, meta, preferences,...rest }, ref) => {
+	if (typeof children === "function") return /* @__PURE__ */ jsx(Fragment, { children: children({
+		isLoading,
+		meta,
+		signIn
+	}) });
+	return /* @__PURE__ */ jsx(Button_default, {
+		ref,
+		className: cx(withVendorCSSClassPrefix("sign-in-button"), className),
+		style,
+		disabled: isLoading,
+		loading: isLoading,
+		type: "button",
+		...rest,
+		children
+	});
+});
+BaseSignInButton.displayName = "BaseSignInButton";
+var BaseSignInButton_default = BaseSignInButton;
+
+//#endregion
+export { BaseSignInButton_default as default };
+//# sourceMappingURL=BaseSignInButton.js.map

package/dist/components/actions/SignInButton/BaseSignInButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSignInButton.js","names":["BaseSignInButton: ForwardRefExoticComponent<BaseSignInButtonProps & RefAttributes<HTMLButtonElement>>","Button"],"sources":["../../../../src/components/actions/SignInButton/BaseSignInButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {FlowMetadataResponse, WithPreferences, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {\n  ButtonHTMLAttributes,\n  forwardRef,\n  ForwardRefExoticComponent,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n} from 'react';\nimport Button from '../../primitives/Button/Button';\n\n/**\n * Common props shared by all {@link BaseSignInButton} components.\n */\nexport interface CommonBaseSignInButtonProps {\n  /**\n   * Loading state during sign-in process\n   */\n  isLoading?: boolean;\n  /**\n   * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n   */\n  meta?: FlowMetadataResponse | null;\n  /**\n   * Function to initiate the sign-in process\n   */\n  signIn: () => Promise<void>;\n}\n\n/**\n * Props passed to the render function of {@link BaseSignInButton}\n */\nexport type BaseSignInButtonRenderProps = CommonBaseSignInButtonProps;\n\n/**\n * Props interface of {@link BaseSignInButton}\n */\nexport interface BaseSignInButtonProps\n  extends Partial<CommonBaseSignInButtonProps>,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    WithPreferences {\n  /**\n   * Render prop function that receives sign-in props, or traditional ReactNode children\n   */\n  children?: ((props: BaseSignInButtonRenderProps) => ReactNode) | ReactNode;\n}\n\n/**\n * Base SignInButton component that supports both render props and traditional props patterns.\n *\n * @example Using render props\n * ```tsx\n * <BaseSignInButton>\n *   {({signIn, isLoading}) => (\n *     <button onClick={signIn} disabled={isLoading}>\n *       {isLoading ? 'Signing in...' : 'Sign In'}\n *     </button>\n *   )}\n * </BaseSignInButton>\n * ```\n *\n * @example Using traditional props\n * ```tsx\n * <BaseSignInButton className=\"custom-button\">Sign In</BaseSignInButton>\n * ```\n */\nconst BaseSignInButton: ForwardRefExoticComponent<BaseSignInButtonProps & RefAttributes<HTMLButtonElement>> =\n  forwardRef<HTMLButtonElement, BaseSignInButtonProps>(\n    (\n      {children, className, style, signIn, isLoading, meta, preferences, ...rest}: BaseSignInButtonProps,\n      ref: Ref<HTMLButtonElement>,\n    ): ReactElement => {\n      if (typeof children === 'function') {\n        return <>{children({isLoading, meta, signIn: signIn!})}</>;\n      }\n\n      return (\n        <Button\n          ref={ref}\n          className={cx(withVendorCSSClassPrefix('sign-in-button'), className)}\n          style={style}\n          disabled={isLoading}\n          loading={isLoading}\n          type=\"button\"\n          {...rest}\n        >\n          {children}\n        </Button>\n      );\n    },\n  );\n\nBaseSignInButton.displayName = 'BaseSignInButton';\n\nexport default BaseSignInButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,MAAMA,mBACJ,YAEI,EAAC,UAAU,WAAW,OAAO,QAAQ,WAAW,MAAM,YAAa,GAAG,QACtE,QACiB;AACjB,KAAI,OAAO,aAAa,WACtB,QAAO,0CAAG,SAAS;EAAC;EAAW;EAAc;EAAQ,CAAC,GAAI;AAG5D,QACE,oBAACC;EACM;EACL,WAAW,GAAG,yBAAyB,iBAAiB,EAAE,UAAU;EAC7D;EACP,UAAU;EACV,SAAS;EACT,MAAK;EACL,GAAI;EAEH;GACM;EAGd;AAEH,iBAAiB,cAAc;AAE/B,+BAAe"}

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

@@ -25,6 +25,12 @@ export type SignInButtonProps = BaseSignInButtonProps & {
      * Additional parameters to pass to the `authorize` request.
      */
     signInOptions?: Record<string, any>;
+    /**
+     * Additional parameters to pass to the token request body.
+     */
+    tokenRequest?: {
+        params?: Record<string, unknown>;
+    };
 };
 /**
  * SignInButton component that supports both render props and traditional props patterns.

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

@@ -1 +1 @@
-{"version":3,"file":"SignInButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/SignInButton/SignInButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAa,yBAAyB,EAAiC,aAAa,EAAW,MAAM,OAAO,CAAC;AACpH,OAAyB,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAI3E;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,QAAA,MAAM,YAAY,EAAE,yBAAyB,CAAC,iBAAiB,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAqDjG,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SignInButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/SignInButton/SignInButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAa,yBAAyB,EAAiC,aAAa,EAAW,MAAM,OAAO,CAAC;AACpH,OAAyB,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAI3E;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC;;OAEG;IACH,YAAY,CAAC,EAAE;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAC,CAAC;CACnD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,QAAA,MAAM,YAAY,EAAE,yBAAyB,CAAC,iBAAiB,GAAG,aAAa,CAAC,iBAAiB,CAAC,CA4DjG,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/components/actions/SignInButton/SignInButton.js

@@ -0,0 +1,84 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import BaseSignInButton_default from "./BaseSignInButton.js";
+import { ThunderIDRuntimeError, navigate } from "@thunderid/browser";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/actions/SignInButton/SignInButton.tsx
+/**
+* SignInButton component that supports both render props and traditional props patterns.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example Using render props
+* ```tsx
+* <SignInButton>
+*   {({signIn, isLoading}) => (
+*     <button onClick={signIn} disabled={isLoading}>
+*       {isLoading ? 'Signing in...' : 'Sign In'}
+*     </button>
+*   )}
+* </SignInButton>
+* ```
+*
+* @example Using traditional props
+* ```tsx
+* <SignInButton className="custom-button">Sign In</SignInButton>
+* ```
+*
+* @example Using component-level preferences
+* ```tsx
+* <SignInButton
+*   preferences={{
+*     i18n: {
+*       bundles: {
+*         'en-US': {
+*           translations: {
+*             'buttons.signIn': 'Custom Sign In Text'
+*           }
+*         }
+*       }
+*     }
+*   }}
+* >
+*   Custom Sign In
+* </SignInButton>
+* ```
+*/
+const SignInButton = forwardRef(({ children, onClick, preferences, signInOptions: overriddenSignInOptions, tokenRequest: overriddenTokenRequest,...rest }, ref) => {
+	const { signIn, signInUrl, signInOptions, tokenRequest, meta } = useThunderID_default();
+	const { t } = useTranslation_default(preferences?.i18n);
+	const [isLoading, setIsLoading] = useState(false);
+	const handleSignIn = async (e) => {
+		try {
+			setIsLoading(true);
+			if (signInUrl) navigate(signInUrl);
+			else {
+				const mergedParams = (overriddenTokenRequest ?? tokenRequest)?.params;
+				await signIn(overriddenSignInOptions ?? signInOptions, void 0, void 0, void 0, mergedParams && Object.keys(mergedParams).length > 0 ? { params: mergedParams } : void 0);
+			}
+			if (onClick) onClick(e);
+		} catch (error) {
+			throw new ThunderIDRuntimeError(`Sign in failed: ${error instanceof Error ? error.message : String(JSON.stringify(error))}`, "SignInButton-handleSignIn-RuntimeError-001", "react", "Something went wrong while trying to sign in. Please try again later.");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(BaseSignInButton_default, {
+		ref,
+		onClick: handleSignIn,
+		isLoading,
+		meta,
+		signIn: handleSignIn,
+		preferences,
+		...rest,
+		children: children ?? t("elements.buttons.signin.text")
+	});
+});
+SignInButton.displayName = "SignInButton";
+var SignInButton_default = SignInButton;
+
+//#endregion
+export { SignInButton_default as default };
+//# sourceMappingURL=SignInButton.js.map

package/dist/components/actions/SignInButton/SignInButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInButton.js","names":["SignInButton: ForwardRefExoticComponent<SignInButtonProps & RefAttributes<HTMLButtonElement>>","useThunderID","useTranslation","BaseSignInButton"],"sources":["../../../../src/components/actions/SignInButton/SignInButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {ThunderIDRuntimeError, navigate} from '@thunderid/browser';\nimport {forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';\nimport BaseSignInButton, {BaseSignInButtonProps} from './BaseSignInButton';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../hooks/useTranslation';\n\n/**\n * Props interface of {@link SignInButton}\n */\nexport type SignInButtonProps = BaseSignInButtonProps & {\n  /**\n   * Additional parameters to pass to the `authorize` request.\n   */\n  signInOptions?: Record<string, any>;\n  /**\n   * Additional parameters to pass to the token request body.\n   */\n  tokenRequest?: {params?: Record<string, unknown>};\n};\n\n/**\n * SignInButton component that supports both render props and traditional props patterns.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example Using render props\n * ```tsx\n * <SignInButton>\n *   {({signIn, isLoading}) => (\n *     <button onClick={signIn} disabled={isLoading}>\n *       {isLoading ? 'Signing in...' : 'Sign In'}\n *     </button>\n *   )}\n * </SignInButton>\n * ```\n *\n * @example Using traditional props\n * ```tsx\n * <SignInButton className=\"custom-button\">Sign In</SignInButton>\n * ```\n *\n * @example Using component-level preferences\n * ```tsx\n * <SignInButton\n *   preferences={{\n *     i18n: {\n *       bundles: {\n *         'en-US': {\n *           translations: {\n *             'buttons.signIn': 'Custom Sign In Text'\n *           }\n *         }\n *       }\n *     }\n *   }}\n * >\n *   Custom Sign In\n * </SignInButton>\n * ```\n */\nconst SignInButton: ForwardRefExoticComponent<SignInButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  SignInButtonProps\n>(\n  (\n    {children, onClick, preferences, signInOptions: overriddenSignInOptions, tokenRequest: overriddenTokenRequest, ...rest}: SignInButtonProps,\n    ref: Ref<HTMLButtonElement>,\n  ): ReactElement => {\n    const {signIn, signInUrl, signInOptions, tokenRequest, meta} = useThunderID();\n    const {t} = useTranslation(preferences?.i18n);\n\n    const [isLoading, setIsLoading] = useState(false);\n\n    const handleSignIn = async (e?: MouseEvent<HTMLButtonElement>): Promise<void> => {\n      try {\n        setIsLoading(true);\n\n        // If a custom `signInUrl` is provided, use it for navigation.\n        if (signInUrl) {\n          navigate(signInUrl);\n        } else {\n          const mergedParams = (overriddenTokenRequest ?? tokenRequest)?.params;\n          await signIn(\n            overriddenSignInOptions ?? signInOptions,\n            undefined,\n            undefined,\n            undefined,\n            mergedParams && Object.keys(mergedParams).length > 0 ? {params: mergedParams} : undefined,\n          );\n        }\n\n        if (onClick) {\n          onClick(e!);\n        }\n      } catch (error) {\n        throw new ThunderIDRuntimeError(\n          `Sign in failed: ${error instanceof Error ? error.message : String(JSON.stringify(error))}`,\n          'SignInButton-handleSignIn-RuntimeError-001',\n          'react',\n          'Something went wrong while trying to sign in. Please try again later.',\n        );\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    return (\n      <BaseSignInButton\n        ref={ref}\n        onClick={handleSignIn}\n        isLoading={isLoading}\n        meta={meta}\n        signIn={handleSignIn}\n        preferences={preferences}\n        {...rest}\n      >\n        {children ?? t('elements.buttons.signin.text')}\n      </BaseSignInButton>\n    );\n  },\n);\n\nSignInButton.displayName = 'SignInButton';\n\nexport default SignInButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,MAAMA,eAAgG,YAKlG,EAAC,UAAU,SAAS,aAAa,eAAe,yBAAyB,cAAc,uBAAwB,GAAG,QAClH,QACiB;CACjB,MAAM,EAAC,QAAQ,WAAW,eAAe,cAAc,SAAQC,sBAAc;CAC7E,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAE7C,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,MAAM,eAAe,OAAO,MAAqD;AAC/E,MAAI;AACF,gBAAa,KAAK;AAGlB,OAAI,UACF,UAAS,UAAU;QACd;IACL,MAAM,gBAAgB,0BAA0B,eAAe;AAC/D,UAAM,OACJ,2BAA2B,eAC3B,QACA,QACA,QACA,gBAAgB,OAAO,KAAK,aAAa,CAAC,SAAS,IAAI,EAAC,QAAQ,cAAa,GAAG,OACjF;;AAGH,OAAI,QACF,SAAQ,EAAG;WAEN,OAAO;AACd,SAAM,IAAI,sBACR,mBAAmB,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK,UAAU,MAAM,CAAC,IACzF,8CACA,SACA,wEACD;YACO;AACR,gBAAa,MAAM;;;AAIvB,QACE,oBAACC;EACM;EACL,SAAS;EACE;EACL;EACN,QAAQ;EACK;EACb,GAAI;YAEH,YAAY,EAAE,+BAA+B;GAC7B;EAGxB;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/dist/components/actions/SignOutButton/BaseSignOutButton.js

@@ -0,0 +1,49 @@
+import Button_default from "../../primitives/Button/Button.js";
+import { withVendorCSSClassPrefix } from "@thunderid/browser";
+import { forwardRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/actions/SignOutButton/BaseSignOutButton.tsx
+/**
+* Base SignOutButton component that supports both render props and traditional props patterns.
+*
+* @example Using render props
+* ```tsx
+* <BaseSignOutButton>
+*   {({signOut, isLoading}) => (
+*     <button onClick={signOut} disabled={isLoading}>
+*       {isLoading ? 'Signing out...' : 'Sign Out'}
+*     </button>
+*   )}
+* </BaseSignOutButton>
+* ```
+*
+* @example Using traditional props
+* ```tsx
+* <BaseSignOutButton className="custom-button">Sign Out</BaseSignOutButton>
+* ```
+*/
+const BaseSignOutButton = forwardRef(({ children, className, style, signOut, isLoading, meta, preferences,...rest }, ref) => {
+	if (typeof children === "function") return /* @__PURE__ */ jsx(Fragment, { children: children({
+		isLoading,
+		meta,
+		signOut
+	}) });
+	return /* @__PURE__ */ jsx(Button_default, {
+		ref,
+		className: cx(withVendorCSSClassPrefix("sign-out-button"), className),
+		style,
+		disabled: isLoading,
+		loading: isLoading,
+		type: "button",
+		...rest,
+		children
+	});
+});
+BaseSignOutButton.displayName = "BaseSignOutButton";
+var BaseSignOutButton_default = BaseSignOutButton;
+
+//#endregion
+export { BaseSignOutButton_default as default };
+//# sourceMappingURL=BaseSignOutButton.js.map

package/dist/components/actions/SignOutButton/BaseSignOutButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSignOutButton.js","names":["BaseSignOutButton: ForwardRefExoticComponent<BaseSignOutButtonProps & RefAttributes<HTMLButtonElement>>","Button"],"sources":["../../../../src/components/actions/SignOutButton/BaseSignOutButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {FlowMetadataResponse, WithPreferences, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {\n  forwardRef,\n  ForwardRefExoticComponent,\n  ButtonHTMLAttributes,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n} from 'react';\nimport Button from '../../primitives/Button/Button';\n\n/**\n * Common props shared by all {@link BaseSignOutButton} components.\n */\nexport interface CommonBaseSignOutButtonProps {\n  /**\n   * Loading state during sign-out process\n   */\n  isLoading?: boolean;\n  /**\n   * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n   */\n  meta?: FlowMetadataResponse | null;\n  /**\n   * Function to initiate the sign-out process\n   */\n  signOut: () => Promise<void>;\n}\n\n/**\n * Props passed to the render function of {@link BaseSignOutButton}\n */\nexport type BaseSignOutButtonRenderProps = CommonBaseSignOutButtonProps;\n\n/**\n * Props interface of {@link BaseSignOutButton}\n */\nexport interface BaseSignOutButtonProps\n  extends Partial<CommonBaseSignOutButtonProps>,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    WithPreferences {\n  /**\n   * Render prop function that receives sign-out props, or traditional ReactNode children\n   */\n  children?: ((props: BaseSignOutButtonRenderProps) => ReactNode) | ReactNode;\n}\n\n/**\n * Base SignOutButton component that supports both render props and traditional props patterns.\n *\n * @example Using render props\n * ```tsx\n * <BaseSignOutButton>\n *   {({signOut, isLoading}) => (\n *     <button onClick={signOut} disabled={isLoading}>\n *       {isLoading ? 'Signing out...' : 'Sign Out'}\n *     </button>\n *   )}\n * </BaseSignOutButton>\n * ```\n *\n * @example Using traditional props\n * ```tsx\n * <BaseSignOutButton className=\"custom-button\">Sign Out</BaseSignOutButton>\n * ```\n */\nconst BaseSignOutButton: ForwardRefExoticComponent<BaseSignOutButtonProps & RefAttributes<HTMLButtonElement>> =\n  forwardRef<HTMLButtonElement, BaseSignOutButtonProps>(\n    (\n      {children, className, style, signOut, isLoading, meta, preferences, ...rest}: BaseSignOutButtonProps,\n      ref: Ref<HTMLButtonElement>,\n    ): ReactElement => {\n      if (typeof children === 'function') {\n        return <>{children({isLoading, meta, signOut: signOut!})}</>;\n      }\n\n      return (\n        <Button\n          ref={ref}\n          className={cx(withVendorCSSClassPrefix('sign-out-button'), className)}\n          style={style}\n          disabled={isLoading}\n          loading={isLoading}\n          type=\"button\"\n          {...rest}\n        >\n          {children}\n        </Button>\n      );\n    },\n  );\n\nBaseSignOutButton.displayName = 'BaseSignOutButton';\n\nexport default BaseSignOutButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,MAAMA,oBACJ,YAEI,EAAC,UAAU,WAAW,OAAO,SAAS,WAAW,MAAM,YAAa,GAAG,QACvE,QACiB;AACjB,KAAI,OAAO,aAAa,WACtB,QAAO,0CAAG,SAAS;EAAC;EAAW;EAAe;EAAS,CAAC,GAAI;AAG9D,QACE,oBAACC;EACM;EACL,WAAW,GAAG,yBAAyB,kBAAkB,EAAE,UAAU;EAC9D;EACP,UAAU;EACV,SAAS;EACT,MAAK;EACL,GAAI;EAEH;GACM;EAGd;AAEH,kBAAkB,cAAc;AAEhC,gCAAe"}

package/dist/components/actions/SignOutButton/SignOutButton.js

@@ -0,0 +1,80 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import BaseSignOutButton_default from "./BaseSignOutButton.js";
+import { ThunderIDRuntimeError } from "@thunderid/browser";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/actions/SignOutButton/SignOutButton.tsx
+/**
+* SignOutButton component that supports both render props and traditional props patterns.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example Using render props pattern
+* ```tsx
+* <SignOutButton>
+*   {({signOut, isLoading}) => (
+*     <button onClick={signOut} disabled={isLoading}>
+*       {isLoading ? 'Signing out...' : 'Sign Out'}
+*     </button>
+*   )}
+* </SignOutButton>
+* ```
+*
+* @example Using traditional props pattern
+* ```tsx
+* <SignOutButton className="custom-button">Sign Out</SignOutButton>
+* ```
+*
+* @example Using component-level preferences
+* ```tsx
+* <SignOutButton
+*   preferences={{
+*     i18n: {
+*       bundles: {
+*         'en-US': {
+*           translations: {
+*             'buttons.signOut': 'Custom Sign Out Text'
+*           }
+*         }
+*       }
+*     }
+*   }}
+* >
+*   Custom Sign Out
+* </SignOutButton>
+* ```
+*/
+const SignOutButton = forwardRef(({ children, onClick, preferences,...rest }, ref) => {
+	const { signOut, meta } = useThunderID_default();
+	const { t } = useTranslation_default(preferences?.i18n);
+	const [isLoading, setIsLoading] = useState(false);
+	const handleSignOut = async (e) => {
+		try {
+			setIsLoading(true);
+			await signOut();
+			if (onClick) onClick(e);
+		} catch (error) {
+			throw new ThunderIDRuntimeError(`Sign out failed: ${error instanceof Error ? error.message : String(error)}`, "SignOutButton-handleSignOut-RuntimeError-001", "react", "Something went wrong while trying to sign out. Please try again later.");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(BaseSignOutButton_default, {
+		ref,
+		onClick: handleSignOut,
+		isLoading,
+		meta,
+		signOut: handleSignOut,
+		preferences,
+		...rest,
+		children: children ?? t("elements.buttons.signout.text")
+	});
+});
+SignOutButton.displayName = "SignOutButton";
+var SignOutButton_default = SignOutButton;
+
+//#endregion
+export { SignOutButton_default as default };
+//# sourceMappingURL=SignOutButton.js.map

package/dist/components/actions/SignOutButton/SignOutButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignOutButton.js","names":["SignOutButton: ForwardRefExoticComponent<SignOutButtonProps & RefAttributes<HTMLButtonElement>>","useThunderID","useTranslation","BaseSignOutButton"],"sources":["../../../../src/components/actions/SignOutButton/SignOutButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {ThunderIDRuntimeError} from '@thunderid/browser';\nimport {forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';\nimport BaseSignOutButton, {BaseSignOutButtonProps} from './BaseSignOutButton';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../hooks/useTranslation';\n\n/**\n * Props interface of {@link SignOutButton}\n */\nexport type SignOutButtonProps = BaseSignOutButtonProps;\n\n/**\n * SignOutButton component that supports both render props and traditional props patterns.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example Using render props pattern\n * ```tsx\n * <SignOutButton>\n *   {({signOut, isLoading}) => (\n *     <button onClick={signOut} disabled={isLoading}>\n *       {isLoading ? 'Signing out...' : 'Sign Out'}\n *     </button>\n *   )}\n * </SignOutButton>\n * ```\n *\n * @example Using traditional props pattern\n * ```tsx\n * <SignOutButton className=\"custom-button\">Sign Out</SignOutButton>\n * ```\n *\n * @example Using component-level preferences\n * ```tsx\n * <SignOutButton\n *   preferences={{\n *     i18n: {\n *       bundles: {\n *         'en-US': {\n *           translations: {\n *             'buttons.signOut': 'Custom Sign Out Text'\n *           }\n *         }\n *       }\n *     }\n *   }}\n * >\n *   Custom Sign Out\n * </SignOutButton>\n * ```\n */\nconst SignOutButton: ForwardRefExoticComponent<SignOutButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  SignOutButtonProps\n>(({children, onClick, preferences, ...rest}: SignOutButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {\n  const {signOut, meta} = useThunderID();\n  const {t} = useTranslation(preferences?.i18n);\n\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleSignOut = async (e?: MouseEvent<HTMLButtonElement>): Promise<void> => {\n    try {\n      setIsLoading(true);\n\n      await signOut();\n\n      if (onClick) {\n        onClick(e!);\n      }\n    } catch (error) {\n      throw new ThunderIDRuntimeError(\n        `Sign out failed: ${error instanceof Error ? error.message : String(error)}`,\n        'SignOutButton-handleSignOut-RuntimeError-001',\n        'react',\n        'Something went wrong while trying to sign out. Please try again later.',\n      );\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <BaseSignOutButton\n      ref={ref}\n      onClick={handleSignOut}\n      isLoading={isLoading}\n      meta={meta}\n      signOut={handleSignOut}\n      preferences={preferences}\n      {...rest}\n    >\n      {children ?? t('elements.buttons.signout.text')}\n    </BaseSignOutButton>\n  );\n});\n\nSignOutButton.displayName = 'SignOutButton';\n\nexport default SignOutButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAMA,gBAAkG,YAGrG,EAAC,UAAU,SAAS,YAAa,GAAG,QAA2B,QAA8C;CAC9G,MAAM,EAAC,SAAS,SAAQC,sBAAc;CACtC,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAE7C,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,MAAM,gBAAgB,OAAO,MAAqD;AAChF,MAAI;AACF,gBAAa,KAAK;AAElB,SAAM,SAAS;AAEf,OAAI,QACF,SAAQ,EAAG;WAEN,OAAO;AACd,SAAM,IAAI,sBACR,oBAAoB,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,IAC1E,gDACA,SACA,yEACD;YACO;AACR,gBAAa,MAAM;;;AAIvB,QACE,oBAACC;EACM;EACL,SAAS;EACE;EACL;EACN,SAAS;EACI;EACb,GAAI;YAEH,YAAY,EAAE,gCAAgC;GAC7B;EAEtB;AAEF,cAAc,cAAc;AAE5B,4BAAe"}

package/dist/components/actions/SignUpButton/BaseSignUpButton.js

@@ -0,0 +1,51 @@
+import Button_default from "../../primitives/Button/Button.js";
+import { withVendorCSSClassPrefix } from "@thunderid/browser";
+import { forwardRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/actions/SignUpButton/BaseSignUpButton.tsx
+/**
+* Base SignUpButton component that supports both render props and traditional props patterns.
+*
+* @example Using render props
+* ```tsx
+* <BaseSignUpButton>
+*   {({ signUp, isLoading }) => (
+*     <button onClick={signUp} disabled={isLoading}>
+*       {isLoading ? 'Creating account...' : 'Create Account'}
+*     </button>
+*   )}
+* </BaseSignUpButton>
+* ```
+*
+* @example Using traditional props
+* ```tsx
+* <BaseSignUpButton className="custom-button">Create Account</BaseSignUpButton>
+* ```
+*/
+const BaseSignUpButton = forwardRef(({ children, className, style, signUp, isLoading, meta, preferences,...rest }, ref) => {
+	if (typeof children === "function") return /* @__PURE__ */ jsx(Fragment, { children: children({
+		isLoading,
+		meta,
+		signUp
+	}) });
+	return /* @__PURE__ */ jsx(Button_default, {
+		ref,
+		className: cx(withVendorCSSClassPrefix("sign-up-button"), className),
+		style,
+		disabled: isLoading,
+		loading: isLoading,
+		type: "button",
+		color: "primary",
+		variant: "solid",
+		...rest,
+		children
+	});
+});
+BaseSignUpButton.displayName = "BaseSignUpButton";
+var BaseSignUpButton_default = BaseSignUpButton;
+
+//#endregion
+export { BaseSignUpButton_default as default };
+//# sourceMappingURL=BaseSignUpButton.js.map

package/dist/components/actions/SignUpButton/BaseSignUpButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSignUpButton.js","names":["BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAttributes<HTMLButtonElement>>","Button"],"sources":["../../../../src/components/actions/SignUpButton/BaseSignUpButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {FlowMetadataResponse, WithPreferences, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {\n  forwardRef,\n  ForwardRefExoticComponent,\n  ButtonHTMLAttributes,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n} from 'react';\nimport Button from '../../primitives/Button/Button';\n\n/**\n * Common props shared by all {@link BaseSignUpButton} components.\n */\nexport interface CommonBaseSignUpButtonProps {\n  /**\n   * Loading state during sign-up process\n   */\n  isLoading?: boolean;\n  /**\n   * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n   */\n  meta?: FlowMetadataResponse | null;\n  /**\n   * Function to initiate the sign-up process\n   */\n  signUp?: () => Promise<void>;\n}\n\n/**\n * Props passed to the render function of {@link BaseSignUpButton}\n */\nexport type BaseSignUpButtonRenderProps = CommonBaseSignUpButtonProps;\n\n/**\n * Props interface of {@link BaseSignUpButton}\n */\nexport interface BaseSignUpButtonProps\n  extends CommonBaseSignUpButtonProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    WithPreferences {\n  /**\n   * Render prop function that receives sign-up props, or traditional ReactNode children\n   */\n  children?: ((props: BaseSignUpButtonRenderProps) => ReactNode) | ReactNode;\n}\n\n/**\n * Base SignUpButton component that supports both render props and traditional props patterns.\n *\n * @example Using render props\n * ```tsx\n * <BaseSignUpButton>\n *   {({ signUp, isLoading }) => (\n *     <button onClick={signUp} disabled={isLoading}>\n *       {isLoading ? 'Creating account...' : 'Create Account'}\n *     </button>\n *   )}\n * </BaseSignUpButton>\n * ```\n *\n * @example Using traditional props\n * ```tsx\n * <BaseSignUpButton className=\"custom-button\">Create Account</BaseSignUpButton>\n * ```\n */\nconst BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAttributes<HTMLButtonElement>> =\n  forwardRef<HTMLButtonElement, BaseSignUpButtonProps>(\n    (\n      {children, className, style, signUp, isLoading, meta, preferences, ...rest}: BaseSignUpButtonProps,\n      ref: Ref<HTMLButtonElement>,\n    ): ReactElement => {\n      if (typeof children === 'function') {\n        return <>{children({isLoading, meta, signUp})}</>;\n      }\n\n      return (\n        <Button\n          ref={ref}\n          className={cx(withVendorCSSClassPrefix('sign-up-button'), className)}\n          style={style}\n          disabled={isLoading}\n          loading={isLoading}\n          type=\"button\"\n          color=\"primary\"\n          variant=\"solid\"\n          {...rest}\n        >\n          {children}\n        </Button>\n      );\n    },\n  );\n\nBaseSignUpButton.displayName = 'BaseSignUpButton';\n\nexport default BaseSignUpButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,MAAMA,mBACJ,YAEI,EAAC,UAAU,WAAW,OAAO,QAAQ,WAAW,MAAM,YAAa,GAAG,QACtE,QACiB;AACjB,KAAI,OAAO,aAAa,WACtB,QAAO,0CAAG,SAAS;EAAC;EAAW;EAAM;EAAO,CAAC,GAAI;AAGnD,QACE,oBAACC;EACM;EACL,WAAW,GAAG,yBAAyB,iBAAiB,EAAE,UAAU;EAC7D;EACP,UAAU;EACV,SAAS;EACT,MAAK;EACL,OAAM;EACN,SAAQ;EACR,GAAI;EAEH;GACM;EAGd;AAEH,iBAAiB,cAAc;AAE/B,+BAAe"}

package/dist/components/actions/SignUpButton/SignUpButton.js

@@ -0,0 +1,82 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import BaseSignUpButton_default from "./BaseSignUpButton.js";
+import { ThunderIDRuntimeError, navigate } from "@thunderid/browser";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/actions/SignUpButton/SignUpButton.tsx
+/**
+* SignUpButton component that supports both render props and traditional props patterns.
+* It redirects the user to the ThunderID sign-up page configured for the application.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example Using render props pattern
+* ```tsx
+* <SignUpButton>
+*   {({ signUp, isLoading }) => (
+*     <button onClick={signUp} disabled={isLoading}>
+*       {isLoading ? 'Creating Account...' : 'Create Account'}
+*     </button>
+*   )}
+* </SignUpButton>
+* ```
+*
+* @example Using traditional props pattern
+* ```tsx
+* <SignUpButton className="custom-button">Create Account</SignUpButton>
+* ```
+*
+* @example Using component-level preferences
+* ```tsx
+* <SignUpButton
+*   preferences={{
+*     i18n: {
+*       bundles: {
+*         'en-US': {
+*           translations: {
+*             'buttons.signUp': 'Custom Sign Up Text'
+*           }
+*         }
+*       }
+*     }
+*   }}
+* >
+*   Custom Sign Up
+* </SignUpButton>
+* ```
+*/
+const SignUpButton = forwardRef(({ children, onClick, preferences,...rest }, ref) => {
+	const { signUp, signUpUrl, meta } = useThunderID_default();
+	const { t } = useTranslation_default(preferences?.i18n);
+	const [isLoading, setIsLoading] = useState(false);
+	const handleSignUp = async (e) => {
+		try {
+			setIsLoading(true);
+			if (signUpUrl) navigate(signUpUrl);
+			else await signUp();
+			if (onClick) onClick(e);
+		} catch (error) {
+			throw new ThunderIDRuntimeError(`Sign up failed: ${error instanceof Error ? error.message : String(error)}`, "SignUpButton-handleSignUp-RuntimeError-001", "react", "Something went wrong while trying to sign up. Please try again later.");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(BaseSignUpButton_default, {
+		ref,
+		onClick: handleSignUp,
+		isLoading,
+		meta,
+		signUp: handleSignUp,
+		preferences,
+		...rest,
+		children: children ?? t("elements.buttons.signup.text")
+	});
+});
+SignUpButton.displayName = "SignUpButton";
+var SignUpButton_default = SignUpButton;
+
+//#endregion
+export { SignUpButton_default as default };
+//# sourceMappingURL=SignUpButton.js.map

package/dist/components/actions/SignUpButton/SignUpButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignUpButton.js","names":["SignUpButton: ForwardRefExoticComponent<SignUpButtonProps & RefAttributes<HTMLButtonElement>>","useThunderID","useTranslation","BaseSignUpButton"],"sources":["../../../../src/components/actions/SignUpButton/SignUpButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {ThunderIDRuntimeError, navigate} from '@thunderid/browser';\nimport {forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';\nimport BaseSignUpButton, {BaseSignUpButtonProps} from './BaseSignUpButton';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../hooks/useTranslation';\n\n/**\n * Props interface of {@link SignUpButton}\n */\nexport type SignUpButtonProps = BaseSignUpButtonProps;\n\n/**\n * SignUpButton component that supports both render props and traditional props patterns.\n * It redirects the user to the ThunderID sign-up page configured for the application.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example Using render props pattern\n * ```tsx\n * <SignUpButton>\n *   {({ signUp, isLoading }) => (\n *     <button onClick={signUp} disabled={isLoading}>\n *       {isLoading ? 'Creating Account...' : 'Create Account'}\n *     </button>\n *   )}\n * </SignUpButton>\n * ```\n *\n * @example Using traditional props pattern\n * ```tsx\n * <SignUpButton className=\"custom-button\">Create Account</SignUpButton>\n * ```\n *\n * @example Using component-level preferences\n * ```tsx\n * <SignUpButton\n *   preferences={{\n *     i18n: {\n *       bundles: {\n *         'en-US': {\n *           translations: {\n *             'buttons.signUp': 'Custom Sign Up Text'\n *           }\n *         }\n *       }\n *     }\n *   }}\n * >\n *   Custom Sign Up\n * </SignUpButton>\n * ```\n */\nconst SignUpButton: ForwardRefExoticComponent<SignUpButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  SignUpButtonProps\n>(({children, onClick, preferences, ...rest}: SignUpButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {\n  const {signUp, signUpUrl, meta} = useThunderID();\n  const {t} = useTranslation(preferences?.i18n);\n\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleSignUp = async (e?: MouseEvent<HTMLButtonElement>): Promise<void> => {\n    try {\n      setIsLoading(true);\n\n      // If a custom `signUpUrl` is provided, use it for navigation.\n      if (signUpUrl) {\n        navigate(signUpUrl);\n      } else {\n        await signUp();\n      }\n\n      if (onClick) {\n        onClick(e!);\n      }\n    } catch (error) {\n      throw new ThunderIDRuntimeError(\n        `Sign up failed: ${error instanceof Error ? error.message : String(error)}`,\n        'SignUpButton-handleSignUp-RuntimeError-001',\n        'react',\n        'Something went wrong while trying to sign up. Please try again later.',\n      );\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <BaseSignUpButton\n      ref={ref}\n      onClick={handleSignUp}\n      isLoading={isLoading}\n      meta={meta}\n      signUp={handleSignUp}\n      preferences={preferences}\n      {...rest}\n    >\n      {children ?? t('elements.buttons.signup.text')}\n    </BaseSignUpButton>\n  );\n});\n\nSignUpButton.displayName = 'SignUpButton';\n\nexport default SignUpButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,MAAMA,eAAgG,YAGnG,EAAC,UAAU,SAAS,YAAa,GAAG,QAA0B,QAA8C;CAC7G,MAAM,EAAC,QAAQ,WAAW,SAAQC,sBAAc;CAChD,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAE7C,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,MAAM,eAAe,OAAO,MAAqD;AAC/E,MAAI;AACF,gBAAa,KAAK;AAGlB,OAAI,UACF,UAAS,UAAU;OAEnB,OAAM,QAAQ;AAGhB,OAAI,QACF,SAAQ,EAAG;WAEN,OAAO;AACd,SAAM,IAAI,sBACR,mBAAmB,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,IACzE,8CACA,SACA,wEACD;YACO;AACR,gBAAa,MAAM;;;AAIvB,QACE,oBAACC;EACM;EACL,SAAS;EACE;EACL;EACN,QAAQ;EACK;EACb,GAAI;YAEH,YAAY,EAAE,+BAA+B;GAC7B;EAErB;AAEF,aAAa,cAAc;AAE3B,2BAAe"}

package/dist/components/adapters/CheckboxInput.js

@@ -0,0 +1,28 @@
+import { createField } from "../factories/FieldFactory.js";
+import { FieldType } from "@thunderid/browser";
+
+//#region src/components/adapters/CheckboxInput.tsx
+/**
+* Checkbox input component for sign-up forms.
+*/
+const CheckboxInput = ({ component, formValues, touchedFields, formErrors, onInputChange, inputClassName }) => {
+	const config = component.config || {};
+	const fieldName = config["identifier"] || config["name"] || component.id;
+	const value = formValues[fieldName] || false;
+	return createField({
+		className: inputClassName,
+		error: touchedFields[fieldName] ? formErrors[fieldName] : void 0,
+		label: config["label"] || "",
+		name: fieldName,
+		onChange: (newValue) => onInputChange(fieldName, newValue),
+		placeholder: config["placeholder"] || "",
+		required: config["required"] || false,
+		type: FieldType.Checkbox,
+		value
+	});
+};
+var CheckboxInput_default = CheckboxInput;
+
+//#endregion
+export { CheckboxInput_default as default };
+//# sourceMappingURL=CheckboxInput.js.map

package/dist/components/adapters/CheckboxInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxInput.js","names":["CheckboxInput: FC<AdapterProps>","config: Record<string, unknown>","fieldName: string","value: string | boolean"],"sources":["../../../src/components/adapters/CheckboxInput.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {FieldType} from '@thunderid/browser';\nimport {FC} from 'react';\nimport {AdapterProps} from '../../models/adapters';\nimport {createField} from '../factories/FieldFactory';\n\n/**\n * Checkbox input component for sign-up forms.\n */\nconst CheckboxInput: FC<AdapterProps> = ({\n  component,\n  formValues,\n  touchedFields,\n  formErrors,\n  onInputChange,\n  inputClassName,\n}: AdapterProps) => {\n  const config: Record<string, unknown> = component.config || {};\n  const fieldName: string = (config['identifier'] as string) || (config['name'] as string) || component.id;\n  const value: string | boolean = formValues[fieldName] || false;\n  const error: string | undefined = touchedFields[fieldName] ? formErrors[fieldName] : undefined;\n\n  return createField({\n    className: inputClassName,\n    error,\n    label: (config['label'] as string) || '',\n    name: fieldName,\n    onChange: (newValue: string) => onInputChange(fieldName, newValue),\n    placeholder: (config['placeholder'] as string) || '',\n    required: (config['required'] as boolean) || false,\n    type: FieldType.Checkbox,\n    value: value as string,\n  });\n};\n\nexport default CheckboxInput;\n"],"mappings":";;;;;;;AA0BA,MAAMA,iBAAmC,EACvC,WACA,YACA,eACA,YACA,eACA,qBACkB;CAClB,MAAMC,SAAkC,UAAU,UAAU,EAAE;CAC9D,MAAMC,YAAqB,OAAO,iBAA6B,OAAO,WAAsB,UAAU;CACtG,MAAMC,QAA0B,WAAW,cAAc;AAGzD,QAAO,YAAY;EACjB,WAAW;EACX,OAJgC,cAAc,aAAa,WAAW,aAAa;EAKnF,OAAQ,OAAO,YAAuB;EACtC,MAAM;EACN,WAAW,aAAqB,cAAc,WAAW,SAAS;EAClE,aAAc,OAAO,kBAA6B;EAClD,UAAW,OAAO,eAA2B;EAC7C,MAAM,UAAU;EACT;EACR,CAAC;;AAGJ,4BAAe"}

package/dist/components/adapters/Consent.js

@@ -0,0 +1,67 @@
+import Typography_default from "../primitives/Typography/Typography.js";
+import ConsentCheckboxList_default from "./ConsentCheckboxList.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/adapters/Consent.tsx
+/**
+* Consent component renders the list of purposes and their associated attributes (essential and optional)
+* based on the data provided by the backend. It allows users to toggle optional attributes while essential
+* attributes are displayed as read-only.
+*/
+const Consent = ({ consentData, formValues, onInputChange, children }) => {
+	if (!consentData) return null;
+	let purposes = [];
+	try {
+		const parsed = typeof consentData === "string" ? JSON.parse(consentData) : consentData;
+		purposes = Array.isArray(parsed) ? parsed : parsed.purposes || [];
+	} catch (e) {
+		return null;
+	}
+	if (purposes.length === 0) return null;
+	if (children) return /* @__PURE__ */ jsx(Fragment, { children: children({
+		formValues,
+		onInputChange,
+		purposes
+	}) });
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "1rem",
+			marginTop: "0.25rem"
+		},
+		children: purposes.map((purpose, purposeIndex) => /* @__PURE__ */ jsxs("div", {
+			style: { paddingBottom: "1rem" },
+			children: [purpose.essential && purpose.essential.length > 0 && /* @__PURE__ */ jsxs("div", {
+				style: { marginTop: "0.5rem" },
+				children: [/* @__PURE__ */ jsx(Typography_default, {
+					variant: "subtitle2",
+					fontWeight: "bold",
+					children: "Essential Attributes"
+				}), /* @__PURE__ */ jsx(ConsentCheckboxList_default, {
+					variant: "ESSENTIAL",
+					purpose,
+					formValues,
+					onInputChange
+				})]
+			}), purpose.optional && purpose.optional.length > 0 && /* @__PURE__ */ jsxs("div", {
+				style: { marginTop: "0.5rem" },
+				children: [/* @__PURE__ */ jsx(Typography_default, {
+					variant: "subtitle2",
+					fontWeight: "bold",
+					children: purpose.type === "permissions" ? "Permissions" : "Optional Attributes"
+				}), /* @__PURE__ */ jsx(ConsentCheckboxList_default, {
+					variant: "OPTIONAL",
+					purpose,
+					formValues,
+					onInputChange
+				})]
+			})]
+		}, purpose.purposeId || purposeIndex))
+	});
+};
+var Consent_default = Consent;
+
+//#endregion
+export { Consent_default as default };
+//# sourceMappingURL=Consent.js.map