@thunderid/react 0.3.0 → 0.3.4

package/dist/components/presentation/auth/Recovery/Recovery.js.map

@@ -1 +1 @@
-{"version":3,"file":"Recovery.js","names":["Recovery: FC<RecoveryProps>","useThunderID","RecoveryV2","RecoveryV1"],"sources":["../../../../../src/components/presentation/auth/Recovery/Recovery.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, 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 {Platform} from '@thunderid/browser';\nimport {FC} from 'react';\nimport RecoveryV1, {RecoveryProps as RecoveryV1Props} from './v1/Recovery';\nimport RecoveryV2, {RecoveryProps as RecoveryV2Props} from './v2/Recovery';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\n\n/**\n * Props for the Recovery component.\n * Extends RecoveryV1Props & RecoveryV2Props for full compatibility with both implementations.\n */\nexport type RecoveryProps = RecoveryV1Props | RecoveryV2Props;\n\n/**\n * Recovery component that provides an embedded account/password recovery flow.\n * Routes to the appropriate version-specific implementation based on the platform.\n *\n * @example\n * ```tsx\n * import { Recovery } from '@thunderid/react';\n *\n * const App = () => (\n *   <Recovery\n *     afterRecoveryUrl=\"/sign-in\"\n *     onComplete={(response) => console.log('Recovery complete', response)}\n *     onError={(error) => console.error('Recovery failed', error)}\n *   />\n * );\n * ```\n *\n * @example\n * // Custom UI with render props\n * ```tsx\n * <Recovery>\n *   {({ values, fieldErrors, handleInputChange, handleSubmit, isLoading, components }) => (\n *     <form onSubmit={(e) => { e.preventDefault(); handleSubmit(components[0], values); }}>\n *       ...\n *     </form>\n *   )}\n * </Recovery>\n * ```\n */\nconst Recovery: FC<RecoveryProps> = (props: RecoveryProps) => {\n  const {platform} = useThunderID();\n\n  if (platform === Platform.ThunderID) {\n    return <RecoveryV2 {...(props as RecoveryV2Props)} />;\n  }\n\n  return <RecoveryV1 {...(props as RecoveryV1Props)} />;\n};\n\nexport default Recovery;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,MAAMA,YAA+B,UAAyB;CAC5D,MAAM,EAAC,aAAYC,sBAAc;AAEjC,KAAI,aAAa,SAAS,UACxB,QAAO,oBAACC,sBAAW,GAAK,QAA6B;AAGvD,QAAO,oBAACC,oBAAW,GAAK,QAA6B;;AAGvD,yBAAe"}
+{"version":3,"file":"Recovery.js","names":["Recovery: FC<RecoveryProps>","useThunderID","BaseRecovery","urlParams: URLSearchParams","applicationIdFromUrl: string | null","effectiveApplicationId: string | null","executionId: string | null","tokenValue: string | null"],"sources":["../../../../../src/components/presentation/auth/Recovery/Recovery.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, 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 {EmbeddedRecoveryFlowRequest, EmbeddedRecoveryFlowResponse, EmbeddedFlowType} from '@thunderid/browser';\nimport {FC, PropsWithChildren, ReactElement, useCallback} from 'react';\nimport BaseRecovery, {BaseRecoveryProps} from './BaseRecovery';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\n\nexport type RecoveryProps = PropsWithChildren<\n  BaseRecoveryProps & {\n    /**\n     * URL query parameter name that carries the recovery token when the user lands via a recovery link.\n     * When set and both `executionId` and this param are present in the URL, the component resumes the\n     * existing flow instead of starting a new one.\n     *\n     * @example\n     * // For a link like /recovery?executionId=xxx&recoveryToken=yyy\n     * <Recovery tokenUrlParam=\"recoveryToken\" />\n     */\n    tokenUrlParam?: string;\n  }\n>;\n\n/**\n * Recovery component for ThunderIDV2 that provides an embedded account/password recovery flow.\n *\n * @example\n * ```tsx\n * // Default UI\n * <Recovery\n *   afterRecoveryUrl=\"/sign-in\"\n *   onComplete={(response) => console.log('Recovery complete', response)}\n *   onError={(error) => console.error('Recovery failed', error)}\n * />\n *\n * // Custom UI with render props\n * <Recovery>\n *   {({ values, fieldErrors, handleInputChange, handleSubmit, isLoading, components }) => (\n *     <form onSubmit={(e) => { e.preventDefault(); handleSubmit(components[0], values); }}>\n *       ...\n *     </form>\n *   )}\n * </Recovery>\n * ```\n */\nconst Recovery: FC<RecoveryProps> = ({\n  className,\n  size = 'medium',\n  afterRecoveryUrl,\n  onError,\n  onComplete,\n  tokenUrlParam,\n  children,\n  ...rest\n}: RecoveryProps): ReactElement => {\n  const {recover, isInitialized, applicationId} = useThunderID();\n\n  const handleInitialize: (payload?: EmbeddedRecoveryFlowRequest) => Promise<EmbeddedRecoveryFlowResponse> =\n    useCallback(\n      async (payload?: EmbeddedRecoveryFlowRequest): Promise<EmbeddedRecoveryFlowResponse> => {\n        const urlParams: URLSearchParams = new URL(window.location.href).searchParams;\n        const applicationIdFromUrl: string | null = urlParams.get('applicationId');\n        const effectiveApplicationId: string | null = applicationId ?? applicationIdFromUrl;\n\n        if (tokenUrlParam) {\n          const executionId: string | null = urlParams.get('executionId');\n          const tokenValue: string | null = urlParams.get(tokenUrlParam);\n\n          if (executionId && tokenValue) {\n            const resumePayload: EmbeddedRecoveryFlowRequest = {\n              executionId,\n              inputs: {[tokenUrlParam]: tokenValue},\n            };\n            return (await recover(resumePayload)) as EmbeddedRecoveryFlowResponse;\n          }\n        }\n\n        const initialPayload: EmbeddedRecoveryFlowRequest = payload ?? {\n          flowType: EmbeddedFlowType.Recovery,\n          ...(effectiveApplicationId && {applicationId: effectiveApplicationId}),\n        };\n\n        return (await recover(initialPayload)) as EmbeddedRecoveryFlowResponse;\n      },\n      [applicationId, tokenUrlParam, recover],\n    );\n\n  const handleOnSubmit: (payload: EmbeddedRecoveryFlowRequest) => Promise<EmbeddedRecoveryFlowResponse> = useCallback(\n    async (payload: EmbeddedRecoveryFlowRequest): Promise<EmbeddedRecoveryFlowResponse> =>\n      (await recover(payload)) as EmbeddedRecoveryFlowResponse,\n    [recover],\n  );\n\n  const handleComplete: (response: EmbeddedRecoveryFlowResponse) => void = useCallback(\n    (response: EmbeddedRecoveryFlowResponse): void => {\n      onComplete?.(response);\n\n      if (afterRecoveryUrl) {\n        window.location.href = afterRecoveryUrl;\n      }\n    },\n    [onComplete, afterRecoveryUrl],\n  );\n\n  return (\n    <BaseRecovery\n      afterRecoveryUrl={afterRecoveryUrl}\n      onInitialize={handleInitialize}\n      onSubmit={handleOnSubmit}\n      onError={onError}\n      onComplete={handleComplete}\n      className={className}\n      size={size}\n      isInitialized={isInitialized}\n      showTitle={true}\n      showSubtitle={true}\n      children={children}\n      {...rest}\n    />\n  );\n};\n\nexport default Recovery;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAMA,YAA+B,EACnC,WACA,OAAO,UACP,kBACA,SACA,YACA,eACA,SACA,GAAG,WAC8B;CACjC,MAAM,EAAC,SAAS,eAAe,kBAAiBC,sBAAc;AAiD9D,QACE,oBAACC;EACmB;EAClB,cAjDF,YACE,OAAO,YAAiF;GACtF,MAAMC,YAA6B,IAAI,IAAI,OAAO,SAAS,KAAK,CAAC;GACjE,MAAMC,uBAAsC,UAAU,IAAI,gBAAgB;GAC1E,MAAMC,yBAAwC,iBAAiB;AAE/D,OAAI,eAAe;IACjB,MAAMC,cAA6B,UAAU,IAAI,cAAc;IAC/D,MAAMC,aAA4B,UAAU,IAAI,cAAc;AAE9D,QAAI,eAAe,WAKjB,QAAQ,MAAM,QAJqC;KACjD;KACA,QAAQ,GAAE,gBAAgB,YAAW;KACtC,CACmC;;AASxC,UAAQ,MAAM,QALsC,WAAW;IAC7D,UAAU,iBAAiB;IAC3B,GAAI,0BAA0B,EAAC,eAAe,wBAAuB;IACtE,CAEoC;KAEvC;GAAC;GAAe;GAAe;GAAQ,CACxC;EAuBC,UArBoG,YACtG,OAAO,YACJ,MAAM,QAAQ,QAAQ,EACzB,CAAC,QAAQ,CACV;EAkBY;EACT,YAjBqE,aACtE,aAAiD;AAChD,gBAAa,SAAS;AAEtB,OAAI,iBACF,QAAO,SAAS,OAAO;KAG3B,CAAC,YAAY,iBAAiB,CAC/B;EASc;EACL;EACS;EACf,WAAW;EACX,cAAc;EACJ;EACV,GAAI;GACJ;;AAIN,uBAAe"}

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2025-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
@@ -15,14 +15,221 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC } from 'react';
-import { BaseSignInProps as BaseSignInV1Props } from './v1/BaseSignIn';
-import { BaseSignInProps as BaseSignInV2Props } from './v2/BaseSignIn';
+import { EmbeddedSignInFlowRequest, EmbeddedFlowComponent, FieldError, FlowMetadataResponse, Preferences } from '@thunderid/browser';
+import { FC, ReactNode } from 'react';
+import { CardProps } from '../../../primitives/Card/Card';
+/**
+ * Render props for custom UI rendering
+ */
+export interface BaseSignInRenderProps {
+    /**
+     * Flow components
+     */
+    components: EmbeddedFlowComponent[];
+    /**
+     * API error (if any)
+     */
+    error?: Error | null;
+    /**
+     * Field validation errors keyed by component ref. Populated from BOTH:
+     *  - Client-side rule evaluation (component.validation rules in meta.components)
+     *  - Server-side validation failures (data.fieldErrors in the flow response)
+     * When the server returns multiple failing rules for one field, only the first
+     * message is exposed here. The full FieldError[] array is available on the raw
+     * response object (and is reflected into the BaseSignIn `serverFieldErrors` prop).
+     */
+    fieldErrors: Record<string, string>;
+    /**
+     * Function to handle input changes
+     */
+    handleInputChange: (name: string, value: string) => void;
+    /**
+     * Function to handle form submission
+     */
+    handleSubmit: (component: EmbeddedFlowComponent, data?: Record<string, any>) => Promise<void>;
+    /**
+     * Loading state
+     */
+    isLoading: boolean;
+    /**
+     * Flag indicating if the step timer has reached zero
+     */
+    isTimeoutDisabled?: boolean;
+    /**
+     * Whether the form is valid
+     */
+    isValid: boolean;
+    /**
+     * Flow messages
+     */
+    messages: {
+        message: string;
+        type: string;
+    }[];
+    /**
+     * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
+     */
+    meta: FlowMetadataResponse | null;
+    /**
+     * Flow subtitle
+     */
+    subtitle: string;
+    /**
+     * Flow title
+     */
+    title: string;
+    /**
+     * Touched fields
+     */
+    touched: Record<string, boolean>;
+    /**
+     * Function to validate the form
+     */
+    validateForm: () => {
+        fieldErrors: Record<string, string>;
+        isValid: boolean;
+    };
+    /**
+     * Form values
+     */
+    values: Record<string, string>;
+}
 /**
  * Props for the BaseSignIn component.
- * Extends BaseSignInV1Props & BaseSignInV2Props for full compatibility with both React BaseSignIn components.
  */
-export type BaseSignInProps = BaseSignInV1Props | BaseSignInV2Props;
+export interface BaseSignInProps {
+    /**
+     * Additional data from the flow response.
+     */
+    additionalData?: Record<string, any>;
+    /**
+     * Custom CSS class name for the submit button.
+     */
+    buttonClassName?: string;
+    /**
+     * Render props function for custom UI
+     */
+    children?: (props: BaseSignInRenderProps) => ReactNode;
+    /**
+     * Custom CSS class name for the form container.
+     */
+    className?: string;
+    /**
+     * Array of flow components to render.
+     */
+    components?: EmbeddedFlowComponent[];
+    /**
+     * Error object to display
+     */
+    error?: Error | null;
+    /**
+     * Custom CSS class name for error messages.
+     */
+    errorClassName?: string;
+    /**
+     * Custom CSS class name for form inputs.
+     */
+    inputClassName?: string;
+    /**
+     * Flag to determine if the component is ready to be rendered.
+     */
+    isLoading?: boolean;
+    /**
+     * Timer flag disabling actions
+     */
+    isTimeoutDisabled?: boolean;
+    /**
+     * Custom CSS class name for info messages.
+     */
+    messageClassName?: string;
+    /**
+     * Callback function called when authentication fails.
+     * @param error - The error that occurred during authentication.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Function to handle form submission.
+     * @param payload - The form data to submit.
+     * @param component - The component that triggered the submission.
+     */
+    onSubmit?: (payload: EmbeddedSignInFlowRequest, component: EmbeddedFlowComponent) => Promise<void>;
+    /**
+     * Callback function called when authentication is successful.
+     * @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;
+    /**
+     * Field-level validation errors returned by the server in `data.fieldErrors` on the
+     * most recent flow response. The component collapses these into the form's
+     * `fieldErrors` state (first error per field wins), surfacing them through the same
+     * render-prop / UI path as client-side validation errors. The full array is preserved
+     * here for advanced consumers that want every failing rule per field.
+     */
+    serverFieldErrors?: FieldError[] | null;
+    /**
+     * Size variant for the component.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Theme variant for the component.
+     */
+    variant?: CardProps['variant'];
+}
+/**
+ * Base SignIn component that provides generic authentication flow.
+ * This component handles component-driven UI rendering and can transform input
+ * structure to component-driven format automatically.
+ *
+ * @example
+ * // Default UI
+ * ```tsx
+ * import { BaseSignIn } from '@thunderid/react';
+ *
+ * const MySignIn = () => {
+ *   return (
+ *     <BaseSignIn
+ *       components={components}
+ *       onSubmit={async (payload) => {
+ *         return await handleAuth(payload);
+ *       }}
+ *       onSuccess={(authData) => {
+ *         console.log('Success:', authData);
+ *       }}
+ *       className="max-w-md mx-auto"
+ *     />
+ *   );
+ * };
+ * ```
+ *
+ * @example
+ * // Custom UI with render props
+ * ```tsx
+ * <BaseSignIn components={components} onSubmit={handleSubmit}>
+ *   {({values, errors, handleInputChange, handleSubmit, isLoading, components}) => (
+ *     <div className="custom-form">
+ *       <input
+ *         name="username"
+ *         value={values.username || ''}
+ *         onChange={(e) => handleInputChange('username', e.target.value)}
+ *       />
+ *       {errors.username && <span>{errors.username}</span>}
+ *       <button
+ *         onClick={() => handleSubmit(components[0], values)}
+ *         disabled={isLoading}
+ *       >
+ *         Sign In
+ *       </button>
+ *     </div>
+ *   )}
+ * </BaseSignIn>
+ * ```
+ */
 declare const BaseSignIn: FC<BaseSignInProps>;
 export default BaseSignIn;
 //# sourceMappingURL=BaseSignIn.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseSignIn.d.ts","sourceRoot":"","sources":["../../../../../src/components/presentation/auth/SignIn/BaseSignIn.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAAqB,EAAC,eAAe,IAAI,iBAAiB,EAAC,MAAM,iBAAiB,CAAC;AACnF,OAAqB,EAAC,eAAe,IAAI,iBAAiB,EAAC,MAAM,iBAAiB,CAAC;AAGnF;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAEpE,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAQnC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"BaseSignIn.d.ts","sourceRoot":"","sources":["../../../../../src/components/presentation/auth/SignIn/BaseSignIn.tsx"],"names":[],"mappings":"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"}

package/dist/components/presentation/auth/SignIn/BaseSignIn.js

@@ -1,17 +1,353 @@
+import ComponentRendererContext_default from "../../../../contexts/ComponentRenderer/ComponentRendererContext.js";
+import FlowProvider_default from "../../../../contexts/Flow/FlowProvider.js";
 import useThunderID_default from "../../../../contexts/ThunderID/useThunderID.js";
-import BaseSignIn_default from "./v1/BaseSignIn.js";
-import BaseSignIn_default$1 from "./v2/BaseSignIn.js";
-import { Platform } from "@thunderid/browser";
-import { jsx } from "react/jsx-runtime";
+import useFlow_default from "../../../../contexts/Flow/useFlow.js";
+import useTheme_default from "../../../../contexts/Theme/useTheme.js";
+import ComponentPreferencesContext_default from "../../../../contexts/I18n/ComponentPreferencesContext.js";
+import useTranslation_default from "../../../../hooks/useTranslation.js";
+import { useForm } from "../../../../hooks/useForm.js";
+import Spinner_default from "../../../primitives/Spinner/Spinner.js";
+import BaseSignIn_styles_default from "./BaseSignIn.styles.js";
+import { extractErrorMessage } from "../../../../utils/flowTransformer.js";
+import Typography_default from "../../../primitives/Typography/Typography.js";
+import Alert_default from "../../../primitives/Alert/Alert.js";
+import Card_default from "../../../primitives/Card/Card.js";
+import { renderSignInComponents } from "../AuthOptionFactory.js";
+import { buildValidatorFromRules, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useCallback, useContext, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
 
 //#region src/components/presentation/auth/SignIn/BaseSignIn.tsx
-const BaseSignIn = (props) => {
-	const { platform } = useThunderID_default();
-	if (platform === Platform.ThunderID) return /* @__PURE__ */ jsx(BaseSignIn_default$1, { ...props });
-	return /* @__PURE__ */ jsx(BaseSignIn_default, { ...props });
+/**
+* Internal component that consumes FlowContext and renders the sign-in UI.
+*/
+const BaseSignInContent = ({ components = [], onSubmit, onError, error: externalError, className = "", inputClassName = "", buttonClassName = "", messageClassName = "", size = "medium", variant = "outlined", isLoading: externalIsLoading, children, additionalData = {}, isTimeoutDisabled = false, serverFieldErrors = null }) => {
+	const { meta } = useThunderID_default();
+	const { theme } = useTheme_default();
+	const customRenderers = useContext(ComponentRendererContext_default);
+	const { t } = useTranslation_default();
+	const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
+	const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [apiError, setApiError] = useState(null);
+	const isLoading = externalIsLoading || isSubmitting;
+	/**
+	* Handle error responses and extract meaningful error messages
+	* Uses the transformer's extractErrorMessage function for consistency
+	*/
+	const handleError = useCallback((error) => {
+		const errorMessage = extractErrorMessage(error, t);
+		setApiError(error instanceof Error ? error : new Error(errorMessage));
+		clearMessages();
+		addMessage({
+			message: errorMessage,
+			type: "error"
+		});
+	}, [
+		t,
+		addMessage,
+		clearMessages
+	]);
+	/**
+	* Extract form fields from flow components
+	*/
+	const extractFormFields = useCallback((flowComponents) => {
+		const fields = [];
+		const processComponents = (comps) => {
+			comps.forEach((component) => {
+				if (component.type === "TEXT_INPUT" || component.type === "PASSWORD_INPUT" || component.type === "EMAIL_INPUT" || component.type === "PHONE_INPUT" || component.type === "OTP_INPUT" || component.type === "SELECT" || component.type === "DATE_INPUT") {
+					const identifier = component.ref;
+					const ruleValidator = buildValidatorFromRules(component.validation);
+					fields.push({
+						initialValue: "",
+						name: identifier,
+						required: component.required || false,
+						validator: (value) => {
+							if (component.required && (!value || value.trim() === "")) return t("validations.required.field.error");
+							if ((component.type === "EMAIL_INPUT" || component.variant === "EMAIL") && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return t("field.email.invalid");
+							if (ruleValidator && value) {
+								const ruleMessage = ruleValidator(value);
+								if (ruleMessage) return t(ruleMessage);
+							}
+							return null;
+						}
+					});
+				}
+				if (component.components) processComponents(component.components);
+			});
+		};
+		processComponents(flowComponents);
+		return fields;
+	}, [t]);
+	const { values: formValues, touched: touchedFields, errors: formErrors, isValid: isFormValid, setValue: setFormValue, setTouched: setFormTouched, setErrors: setFormErrors, clearErrors: clearFormErrors, validateForm, touchAllFields } = useForm({
+		fields: components ? extractFormFields(components) : [],
+		initialValues: {},
+		requiredMessage: t("validations.required.field.error"),
+		validateOnBlur: true,
+		validateOnChange: false
+	});
+	/**
+	* Project server-side validation errors (from `data.fieldErrors`) into the form's
+	* `errors` state so they surface through the same render-prop / UI as client-side
+	* errors. When the server returns multiple failing rules for one field, only the
+	* first message is shown — matching the SDK's single-string-per-field contract.
+	* The full FieldError[] remains available via the `serverFieldErrors` prop.
+	*
+	* Also marks each affected field as `touched` so the error renders immediately —
+	* `useForm` only shows errors for touched fields by default.
+	*/
+	useEffect(() => {
+		clearFormErrors();
+		if (!serverFieldErrors || serverFieldErrors.length === 0) return;
+		const errors = {};
+		for (const fe of serverFieldErrors) if (!(fe.identifier in errors)) errors[fe.identifier] = fe.message;
+		setFormErrors(errors);
+		Object.keys(errors).forEach((field) => setFormTouched(field, true));
+	}, [
+		serverFieldErrors,
+		setFormErrors,
+		setFormTouched,
+		clearFormErrors
+	]);
+	/**
+	* Handle input value changes.
+	* Only updates the value without marking as touched.
+	* Touched state is set on blur to avoid premature validation.
+	*/
+	const handleInputChange = (name, value) => {
+		setFormValue(name, value);
+	};
+	/**
+	* Handle input blur event.
+	* Marks the field as touched, which triggers validation.
+	*/
+	const handleInputBlur = (name) => {
+		setFormTouched(name, true);
+	};
+	/**
+	* Handle component submission (for buttons and actions).
+	*/
+	const handleSubmit = async (component, data, skipValidation) => {
+		if (!skipValidation) {
+			touchAllFields();
+			if (!validateForm().isValid) return;
+		}
+		setIsSubmitting(true);
+		setApiError(null);
+		clearMessages();
+		try {
+			const filteredInputs = {};
+			if (data) Object.keys(data).forEach((key) => {
+				if (data[key] !== void 0 && data[key] !== null && data[key] !== "") filteredInputs[key] = data[key];
+			});
+			let payload = {};
+			payload = {
+				...payload,
+				...component.id && { action: component.id },
+				inputs: filteredInputs
+			};
+			await onSubmit?.(payload, component);
+		} catch (err) {
+			handleError(err);
+			onError?.(err);
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+	const containerClasses = cx([
+		withVendorCSSClassPrefix("signin"),
+		withVendorCSSClassPrefix(`signin--${size}`),
+		withVendorCSSClassPrefix(`signin--${variant}`)
+	], className);
+	const inputClasses = cx([
+		withVendorCSSClassPrefix("signin__input"),
+		size === "small" && withVendorCSSClassPrefix("signin__input--small"),
+		size === "large" && withVendorCSSClassPrefix("signin__input--large")
+	], inputClassName);
+	const buttonClasses = cx([
+		withVendorCSSClassPrefix("signin__button"),
+		size === "small" && withVendorCSSClassPrefix("signin__button--small"),
+		size === "large" && withVendorCSSClassPrefix("signin__button--large")
+	], buttonClassName);
+	const messageClasses = cx([withVendorCSSClassPrefix("signin__messages")], messageClassName);
+	/**
+	* Render components based on flow data using the factory
+	*/
+	const renderComponents = useCallback((flowComponents) => renderSignInComponents(flowComponents, formValues, touchedFields, formErrors, isLoading, isFormValid, handleInputChange, {
+		_customRenderers: customRenderers,
+		_theme: theme,
+		additionalData,
+		buttonClassName: buttonClasses,
+		inputClassName: inputClasses,
+		isTimeoutDisabled,
+		meta,
+		onInputBlur: handleInputBlur,
+		onSubmit: handleSubmit,
+		size,
+		t,
+		variant
+	}), [
+		additionalData,
+		customRenderers,
+		formValues,
+		touchedFields,
+		formErrors,
+		isFormValid,
+		meta,
+		t,
+		theme,
+		isLoading,
+		size,
+		variant,
+		inputClasses,
+		buttonClasses,
+		handleInputBlur,
+		handleSubmit,
+		isTimeoutDisabled
+	]);
+	if (children) {
+		const renderProps = {
+			components,
+			error: apiError,
+			fieldErrors: formErrors,
+			handleInputChange,
+			handleSubmit,
+			isLoading,
+			isTimeoutDisabled,
+			isValid: isFormValid,
+			messages: flowMessages || [],
+			meta,
+			subtitle: flowSubtitle ?? "",
+			title: flowTitle || t("signin.heading"),
+			touched: touchedFields,
+			validateForm: () => {
+				const result = validateForm();
+				return {
+					fieldErrors: result.errors,
+					isValid: result.isValid
+				};
+			},
+			values: formValues
+		};
+		return /* @__PURE__ */ jsx("div", {
+			className: containerClasses,
+			"data-testid": "thunderid-signin",
+			children: children(renderProps)
+		});
+	}
+	if (isLoading) return /* @__PURE__ */ jsx(Card_default, {
+		className: cx(containerClasses, styles.card),
+		"data-testid": "thunderid-signin",
+		variant,
+		children: /* @__PURE__ */ jsx(Card_default.Content, { children: /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				justifyContent: "center",
+				padding: "2rem"
+			},
+			children: /* @__PURE__ */ jsx(Spinner_default, {})
+		}) })
+	});
+	if (!components || components.length === 0) return /* @__PURE__ */ jsx(Card_default, {
+		className: cx(containerClasses, styles.card),
+		"data-testid": "thunderid-signin",
+		variant,
+		children: /* @__PURE__ */ jsx(Card_default.Content, { children: /* @__PURE__ */ jsx(Alert_default, {
+			variant: "warning",
+			children: /* @__PURE__ */ jsx(Typography_default, {
+				variant: "body1",
+				children: t("errors.signin.components.not.available")
+			})
+		}) })
+	});
+	return /* @__PURE__ */ jsx(Card_default, {
+		className: cx(containerClasses, styles.card),
+		"data-testid": "thunderid-signin",
+		variant,
+		children: /* @__PURE__ */ jsxs(Card_default.Content, { children: [
+			externalError && /* @__PURE__ */ jsx("div", {
+				className: styles.flowMessagesContainer,
+				children: /* @__PURE__ */ jsx(Alert_default, {
+					variant: "error",
+					className: cx(styles.flowMessageItem, messageClasses),
+					children: /* @__PURE__ */ jsx(Alert_default.Description, { children: externalError.message })
+				})
+			}),
+			flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: styles.flowMessagesContainer,
+				children: flowMessages.map((message, index) => /* @__PURE__ */ jsx(Alert_default, {
+					variant: message.type === "error" ? "error" : "info",
+					className: cx(styles.flowMessageItem, messageClasses),
+					children: /* @__PURE__ */ jsx(Alert_default.Description, { children: message.message })
+				}, index))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: styles.contentContainer,
+				children: renderComponents(components)
+			})
+		] })
+	});
 };
-var BaseSignIn_default$2 = BaseSignIn;
+/**
+* Base SignIn component that provides generic authentication flow.
+* This component handles component-driven UI rendering and can transform input
+* structure to component-driven format automatically.
+*
+* @example
+* // Default UI
+* ```tsx
+* import { BaseSignIn } from '@thunderid/react';
+*
+* const MySignIn = () => {
+*   return (
+*     <BaseSignIn
+*       components={components}
+*       onSubmit={async (payload) => {
+*         return await handleAuth(payload);
+*       }}
+*       onSuccess={(authData) => {
+*         console.log('Success:', authData);
+*       }}
+*       className="max-w-md mx-auto"
+*     />
+*   );
+* };
+* ```
+*
+* @example
+* // Custom UI with render props
+* ```tsx
+* <BaseSignIn components={components} onSubmit={handleSubmit}>
+*   {({values, errors, handleInputChange, handleSubmit, isLoading, components}) => (
+*     <div className="custom-form">
+*       <input
+*         name="username"
+*         value={values.username || ''}
+*         onChange={(e) => handleInputChange('username', e.target.value)}
+*       />
+*       {errors.username && <span>{errors.username}</span>}
+*       <button
+*         onClick={() => handleSubmit(components[0], values)}
+*         disabled={isLoading}
+*       >
+*         Sign In
+*       </button>
+*     </div>
+*   )}
+* </BaseSignIn>
+* ```
+*/
+const BaseSignIn = ({ preferences,...rest }) => {
+	const content = /* @__PURE__ */ jsx(FlowProvider_default, { children: /* @__PURE__ */ jsx(BaseSignInContent, { ...rest }) });
+	if (!preferences) return content;
+	return /* @__PURE__ */ jsx(ComponentPreferencesContext_default.Provider, {
+		value: preferences,
+		children: content
+	});
+};
+var BaseSignIn_default = BaseSignIn;
 
 //#endregion
-export { BaseSignIn_default$2 as default };
+export { BaseSignIn_default as default };
 //# sourceMappingURL=BaseSignIn.js.map