@thunderid/react 0.0.5 → 0.2.0

package/dist/cjs/contexts/User/useUser.cjs

@@ -0,0 +1,90 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_UserContext = require('./UserContext.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/contexts/User/useUser.ts
+/**
+* Hook to access the User context.
+*
+* This hook provides access to user profile data including:
+* - Raw profile API response
+* - SCIM2 schemas
+* - Nested user object
+* - Flattened user profile
+* - Functions to refresh and update user data
+* - Loading states and error handling
+*
+* @returns {UserContextProps} The user context value containing all user-related data and functions
+* @throws {Error} Throws an error if used outside of UserProvider
+*
+* @example
+* ```tsx
+* import {useUser} from '@thunderid/react';
+*
+* function ProfileComponent() {
+*   const {
+*     isLoading,
+*     profile,
+*     schemas,
+*     user,
+*     flattenedUser,
+*     refreshUser,
+*     updateUser,
+*     error
+*   } = useUser();
+*
+*   if (isLoading) {
+*     return <div>Loading user data...</div>;
+*   }
+*
+*   if (error) {
+*     return <div>Error: {error.message}</div>;
+*   }
+*
+*   return (
+*     <div>
+*       <h1>Welcome {user?.name?.givenName}!</h1>
+*       <p>Email: {flattenedUser?.emails}</p>
+*       <button onClick={refreshUser}>Refresh Profile</button>
+*     </div>
+*   );
+* }
+*
+* // Access specific user properties
+* function UserEmail() {
+*   const {flattenedUser} = useUser();
+*   return <span>{flattenedUser?.emails?.[0]}</span>;
+* }
+*
+* // Update user profile
+* function EditProfile() {
+*   const {updateUser, user} = useUser();
+*
+*   const handleUpdate = async () => {
+*     try {
+*       await updateUser({
+*         name: {
+*           givenName: 'John',
+*           familyName: 'Doe'
+*         }
+*       });
+*     } catch (error) {
+*       console.error('Update failed:', error);
+*     }
+*   };
+*
+*   return <button onClick={handleUpdate}>Update Name</button>;
+* }
+* ```
+*/
+const useUser = () => {
+	const context = (0, react.useContext)(require_UserContext.default);
+	if (!context) throw new Error("useUser must be used within a UserProvider");
+	return context;
+};
+var useUser_default = useUser;
+
+//#endregion
+exports.default = useUser_default;
+//# sourceMappingURL=useUser.cjs.map

package/dist/cjs/contexts/User/useUser.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUser.cjs","names":["context: UserContextProps | null","UserContext"],"sources":["../../../../src/contexts/User/useUser.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 {useContext} from 'react';\nimport UserContext, {UserContextProps} from './UserContext';\n\n/**\n * Hook to access the User context.\n *\n * This hook provides access to user profile data including:\n * - Raw profile API response\n * - SCIM2 schemas\n * - Nested user object\n * - Flattened user profile\n * - Functions to refresh and update user data\n * - Loading states and error handling\n *\n * @returns {UserContextProps} The user context value containing all user-related data and functions\n * @throws {Error} Throws an error if used outside of UserProvider\n *\n * @example\n * ```tsx\n * import {useUser} from '@thunderid/react';\n *\n * function ProfileComponent() {\n *   const {\n *     isLoading,\n *     profile,\n *     schemas,\n *     user,\n *     flattenedUser,\n *     refreshUser,\n *     updateUser,\n *     error\n *   } = useUser();\n *\n *   if (isLoading) {\n *     return <div>Loading user data...</div>;\n *   }\n *\n *   if (error) {\n *     return <div>Error: {error.message}</div>;\n *   }\n *\n *   return (\n *     <div>\n *       <h1>Welcome {user?.name?.givenName}!</h1>\n *       <p>Email: {flattenedUser?.emails}</p>\n *       <button onClick={refreshUser}>Refresh Profile</button>\n *     </div>\n *   );\n * }\n *\n * // Access specific user properties\n * function UserEmail() {\n *   const {flattenedUser} = useUser();\n *   return <span>{flattenedUser?.emails?.[0]}</span>;\n * }\n *\n * // Update user profile\n * function EditProfile() {\n *   const {updateUser, user} = useUser();\n *\n *   const handleUpdate = async () => {\n *     try {\n *       await updateUser({\n *         name: {\n *           givenName: 'John',\n *           familyName: 'Doe'\n *         }\n *       });\n *     } catch (error) {\n *       console.error('Update failed:', error);\n *     }\n *   };\n *\n *   return <button onClick={handleUpdate}>Update Name</button>;\n * }\n * ```\n */\nconst useUser = (): UserContextProps => {\n  const context: UserContextProps | null = useContext(UserContext);\n\n  if (!context) {\n    throw new Error('useUser must be used within a UserProvider');\n  }\n\n  return context;\n};\n\nexport default useUser;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,MAAM,gBAAkC;CACtC,MAAMA,gCAA8CC,4BAAY;AAEhE,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,6CAA6C;AAG/D,QAAO;;AAGT,sBAAe"}

package/dist/cjs/hooks/useBranding.cjs

@@ -0,0 +1,71 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_useBrandingContext = require('../contexts/Branding/useBrandingContext.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+
+//#region src/hooks/useBranding.ts
+const logger = (0, __thunderid_browser.createPackageComponentLogger)("@thunderid/react", "useBranding");
+/**
+* React hook for accessing branding preferences from the BrandingProvider context.
+* This hook provides access to branding preferences, theme data, and loading states.
+*
+* @deprecated Consider using useBrandingContext directly for better performance.
+* This hook is maintained for backward compatibility.
+*
+* @param config - Configuration options (deprecated, use BrandingProvider props instead)
+* @returns Object containing branding preference data, theme, loading state, error, and refetch function
+*
+* @example
+* Basic usage:
+* ```tsx
+* function MyComponent() {
+*   const { theme, activeTheme, isLoading, error } = useBranding();
+*
+*   if (isLoading) return <div>Loading branding...</div>;
+*   if (error) return <div>Error: {error.message}</div>;
+*
+*   return (
+*     <div style={{ color: theme?.colors?.primary?.main }}>
+*       <p>Active theme mode: {activeTheme}</p>
+*       <p>Styled with ThunderID branding</p>
+*     </div>
+*   );
+* }
+* ```
+*
+* @example
+* For new implementations, use BrandingProvider with useBrandingContext:
+* ```tsx
+* // In your root component
+* <BrandingProvider baseUrl="https://localhost:8090">
+*   <App />
+* </BrandingProvider>
+*
+* // In your component
+* function MyComponent() {
+*   const { theme, activeTheme, isLoading, error } = useBrandingContext();
+*   // ... rest of your component
+* }
+* ```
+*/
+const useBranding = () => {
+	try {
+		return require_useBrandingContext.default();
+	} catch (error) {
+		logger.warn("useBranding: BrandingProvider not available. Make sure to wrap your app with BrandingProvider or ThunderIDProvider with branding preferences.");
+		return {
+			activeTheme: null,
+			brandingPreference: null,
+			error: /* @__PURE__ */ new Error("BrandingProvider not available"),
+			fetchBranding: async () => {},
+			isLoading: false,
+			refetch: async () => {},
+			theme: null
+		};
+	}
+};
+var useBranding_default = useBranding;
+
+//#endregion
+exports.default = useBranding_default;
+//# sourceMappingURL=useBranding.cjs.map

package/dist/cjs/hooks/useBranding.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBranding.cjs","names":["logger: ReturnType<typeof createPackageComponentLogger>","useBrandingContext"],"sources":["../../../src/hooks/useBranding.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 {BrandingPreference, Theme, createPackageComponentLogger} from '@thunderid/browser';\nimport useBrandingContext from '../contexts/Branding/useBrandingContext';\n\nconst logger: ReturnType<typeof createPackageComponentLogger> = createPackageComponentLogger(\n  '@thunderid/react',\n  'useBranding',\n);\n\n/**\n * Configuration options for the useBranding hook\n * @deprecated Use BrandingProvider instead for better performance and consistency\n */\nexport interface UseBrandingConfig {\n  /**\n   * @deprecated This configuration is now handled by BrandingProvider\n   */\n  autoFetch?: boolean;\n  /**\n   * @deprecated This configuration is now handled by BrandingProvider\n   */\n  fetcher?: (url: string, config: RequestInit) => Promise<Response>;\n  /**\n   * @deprecated This configuration is now handled by BrandingProvider\n   */\n  forceTheme?: 'light' | 'dark';\n  /**\n   * @deprecated This configuration is now handled by BrandingProvider\n   */\n  locale?: string;\n  /**\n   * @deprecated This configuration is now handled by BrandingProvider\n   */\n  name?: string;\n  /**\n   * @deprecated This configuration is now handled by BrandingProvider\n   */\n  type?: string;\n}\n\n/**\n * Return type of the useBranding hook\n */\nexport interface UseBrandingReturn {\n  /**\n   * The active theme mode from branding preference ('light' | 'dark')\n   */\n  activeTheme: 'light' | 'dark' | null;\n  /**\n   * The raw branding preference data\n   */\n  brandingPreference: BrandingPreference | null;\n  /**\n   * Error state\n   */\n  error: Error | null;\n  /**\n   * Function to manually fetch branding preference\n   */\n  fetchBranding: () => Promise<void>;\n  /**\n   * Loading state\n   */\n  isLoading: boolean;\n  /**\n   * Function to refetch branding preference\n   * This bypasses the single-call restriction and forces a new API call\n   */\n  refetch: () => Promise<void>;\n  /**\n   * The transformed theme object\n   */\n  theme: Theme | null;\n}\n\n/**\n * React hook for accessing branding preferences from the BrandingProvider context.\n * This hook provides access to branding preferences, theme data, and loading states.\n *\n * @deprecated Consider using useBrandingContext directly for better performance.\n * This hook is maintained for backward compatibility.\n *\n * @param config - Configuration options (deprecated, use BrandingProvider props instead)\n * @returns Object containing branding preference data, theme, loading state, error, and refetch function\n *\n * @example\n * Basic usage:\n * ```tsx\n * function MyComponent() {\n *   const { theme, activeTheme, isLoading, error } = useBranding();\n *\n *   if (isLoading) return <div>Loading branding...</div>;\n *   if (error) return <div>Error: {error.message}</div>;\n *\n *   return (\n *     <div style={{ color: theme?.colors?.primary?.main }}>\n *       <p>Active theme mode: {activeTheme}</p>\n *       <p>Styled with ThunderID branding</p>\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * For new implementations, use BrandingProvider with useBrandingContext:\n * ```tsx\n * // In your root component\n * <BrandingProvider baseUrl=\"https://localhost:8090\">\n *   <App />\n * </BrandingProvider>\n *\n * // In your component\n * function MyComponent() {\n *   const { theme, activeTheme, isLoading, error } = useBrandingContext();\n *   // ... rest of your component\n * }\n * ```\n */\nexport const useBranding = (): UseBrandingReturn => {\n  try {\n    return useBrandingContext();\n  } catch (error) {\n    logger.warn(\n      'useBranding: BrandingProvider not available. ' +\n        'Make sure to wrap your app with BrandingProvider or ThunderIDProvider with branding preferences.',\n    );\n\n    return {\n      activeTheme: null,\n      brandingPreference: null,\n      error: new Error('BrandingProvider not available'),\n      fetchBranding: async (): Promise<void> => {},\n      isLoading: false,\n      refetch: async (): Promise<void> => {},\n      theme: null,\n    };\n  }\n};\n\nexport default useBranding;\n"],"mappings":";;;;;;AAqBA,MAAMA,+DACJ,oBACA,cACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+GD,MAAa,oBAAuC;AAClD,KAAI;AACF,SAAOC,oCAAoB;UACpB,OAAO;AACd,SAAO,KACL,gJAED;AAED,SAAO;GACL,aAAa;GACb,oBAAoB;GACpB,uBAAO,IAAI,MAAM,iCAAiC;GAClD,eAAe,YAA2B;GAC1C,WAAW;GACX,SAAS,YAA2B;GACpC,OAAO;GACR;;;AAIL,0BAAe"}

package/dist/cjs/hooks/useBrowserUrl.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/hooks/useBrowserUrl.ts
+/**
+* Hook that provides utilities for handling browser URLs in authentication flows.
+*
+* @returns An object containing URL utility functions
+*
+* @example
+* ```tsx
+* const { hasAuthParams } = useBrowserUrl();
+* const url = new URL(window.location.href);
+*
+* if (hasAuthParams(url, "/after-signin")) {
+*   // Handle authentication callback
+* }
+* ```
+*/
+const useBrowserUrl = () => {
+	const hasAuthParams = (url, afterSignInUrl) => (0, __thunderid_browser.hasAuthParamsInUrl)() && new URL(url.origin + url.pathname).toString() === new URL(afterSignInUrl).toString() || url.searchParams.get("error") !== null;
+	const hasCalledForThisInstance = (url, instanceId) => (0, __thunderid_browser.hasCalledForThisInstanceInUrl)(instanceId, url.search);
+	return {
+		hasAuthParams,
+		hasCalledForThisInstance
+	};
+};
+var useBrowserUrl_default = useBrowserUrl;
+
+//#endregion
+exports.default = useBrowserUrl_default;
+//# sourceMappingURL=useBrowserUrl.cjs.map

package/dist/cjs/hooks/useBrowserUrl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBrowserUrl.cjs","names":[],"sources":["../../../src/hooks/useBrowserUrl.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 {hasAuthParamsInUrl, hasCalledForThisInstanceInUrl} from '@thunderid/browser';\n\n/**\n * Interface for the useBrowserUrl hook return value.\n */\nexport interface UseBrowserUrl {\n  /**\n   * Checks if the current URL contains authentication parameters.\n   *\n   * @param url - The URL object to check for authentication parameters\n   * @param afterSignInUrl - The URL where the authorization server should redirect after authentication\n   * @returns True if the URL contains authentication parameters and matches the afterSignInUrl, or if it contains an error parameter\n   */\n  hasAuthParams: (url: URL, afterSignInUrl: string) => boolean;\n\n  /**\n   * Checks if the URL indicates that the authentication flow has been called for this instance.\n   *\n   * @param url - The URL object to check\n   * @param instanceId - The instance ID to check against\n   * @returns True if the URL indicates the flow has been called for this instance\n   */\n  hasCalledForThisInstance: (url: URL, instanceId: number) => boolean;\n}\n\n/**\n * Hook that provides utilities for handling browser URLs in authentication flows.\n *\n * @returns An object containing URL utility functions\n *\n * @example\n * ```tsx\n * const { hasAuthParams } = useBrowserUrl();\n * const url = new URL(window.location.href);\n *\n * if (hasAuthParams(url, \"/after-signin\")) {\n *   // Handle authentication callback\n * }\n * ```\n */\nconst useBrowserUrl = (): UseBrowserUrl => {\n  const hasAuthParams = (url: URL, afterSignInUrl: string): boolean =>\n    (hasAuthParamsInUrl() && new URL(url.origin + url.pathname).toString() === new URL(afterSignInUrl).toString()) ||\n    // authParams?.authorizationCode || // FIXME: These are sent externally. Need to see what we can do about this.\n    url.searchParams.get('error') !== null;\n\n  const hasCalledForThisInstance = (url: URL, instanceId: number): boolean =>\n    hasCalledForThisInstanceInUrl(instanceId, url.search);\n\n  return {hasAuthParams, hasCalledForThisInstance};\n};\n\nexport default useBrowserUrl;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0DA,MAAM,sBAAqC;CACzC,MAAM,iBAAiB,KAAU,gEACV,IAAI,IAAI,IAAI,IAAI,SAAS,IAAI,SAAS,CAAC,UAAU,KAAK,IAAI,IAAI,eAAe,CAAC,UAAU,IAE7G,IAAI,aAAa,IAAI,QAAQ,KAAK;CAEpC,MAAM,4BAA4B,KAAU,sEACZ,YAAY,IAAI,OAAO;AAEvD,QAAO;EAAC;EAAe;EAAyB;;AAGlD,4BAAe"}

package/dist/cjs/hooks/useForm.cjs

@@ -0,0 +1,217 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/useForm.ts
+/**
+* Generic form hook that provides comprehensive form state management and validation.
+*
+* @template T - The type of form values (must extend Record<string, string>)
+* @param config - Configuration options for the form
+* @returns Form state and methods
+*
+* @example
+* ```tsx
+* interface LoginForm {
+*   username: string;
+*   password: string;
+* }
+*
+* const {
+*   values,
+*   touched,
+*   errors,
+*   isValid,
+*   setValue,
+*   handleSubmit,
+*   getFieldProps
+* } = useForm<LoginForm>({
+*   initialValues: { username: '', password: '' },
+*   fields: [
+*     { name: 'username', required: true },
+*     { name: 'password', required: true }
+*   ]
+* });
+*
+* const onSubmit = handleSubmit((values) => {
+*   console.log('Form submitted:', values);
+* });
+*
+* return (
+*   <form onSubmit={onSubmit}>
+*     <input {...getFieldProps('username')} />
+*     <input {...getFieldProps('password')} type="password" />
+*     <button type="submit" disabled={!isValid}>Submit</button>
+*   </form>
+* );
+* ```
+*/
+const useForm = (config = {}) => {
+	const { initialValues = {}, fields = [], validator, validateOnChange = false, validateOnBlur = true, requiredMessage = "This field is required" } = config;
+	const [values, setFormValues] = (0, react.useState)({ ...initialValues });
+	const [touched, setFormTouched] = (0, react.useState)({});
+	const [errors, setFormErrors] = (0, react.useState)({});
+	const [isSubmitted, setIsSubmitted] = (0, react.useState)(false);
+	const getFieldConfig = (0, react.useCallback)((name) => fields.find((field) => field.name === name), [fields]);
+	const validateField = (0, react.useCallback)((name) => {
+		const value = values[name] || "";
+		const fieldConfig = getFieldConfig(name);
+		if (fieldConfig?.required && (!value || value.trim() === "")) return requiredMessage;
+		if (fieldConfig?.validator) {
+			const fieldError = fieldConfig.validator(value);
+			if (fieldError) return fieldError;
+		}
+		return null;
+	}, [
+		values,
+		getFieldConfig,
+		requiredMessage
+	]);
+	const validateForm = (0, react.useCallback)(() => {
+		const newErrors = {};
+		fields.forEach((field) => {
+			const error = validateField(field.name);
+			if (error) newErrors[field.name] = error;
+		});
+		if (validator) {
+			const globalErrors = validator(values);
+			Object.keys(globalErrors).forEach((key) => {
+				if (globalErrors[key]) newErrors[key] = globalErrors[key];
+			});
+		}
+		return {
+			errors: newErrors,
+			isValid: Object.keys(newErrors).length === 0
+		};
+	}, [
+		fields,
+		validateField,
+		validator,
+		values
+	]);
+	const isValid = Object.keys(errors).length === 0;
+	const setValue = (0, react.useCallback)((name, value) => {
+		setFormValues((prev) => ({
+			...prev,
+			[name]: value
+		}));
+		if (validateOnChange) {
+			const error = validateField(name);
+			setFormErrors((prev) => {
+				const newErrors = { ...prev };
+				if (error) newErrors[name] = error;
+				else delete newErrors[name];
+				return newErrors;
+			});
+		}
+	}, [validateField, validateOnChange]);
+	const setValues = (0, react.useCallback)((newValues) => {
+		setFormValues((prev) => ({
+			...prev,
+			...newValues
+		}));
+	}, []);
+	const setTouched = (0, react.useCallback)((name, isTouched = true) => {
+		setFormTouched((prev) => ({
+			...prev,
+			[name]: isTouched
+		}));
+		if (validateOnBlur && isTouched) {
+			const error = validateField(name);
+			setFormErrors((prev) => {
+				const newErrors = { ...prev };
+				if (error) newErrors[name] = error;
+				else delete newErrors[name];
+				return newErrors;
+			});
+		}
+	}, [validateField, validateOnBlur]);
+	const setTouchedFields = (0, react.useCallback)((touchedFields) => {
+		setFormTouched((prev) => ({
+			...prev,
+			...touchedFields
+		}));
+	}, []);
+	const touchAllFields = (0, react.useCallback)(() => {
+		setFormTouched(fields.reduce((acc, field) => {
+			acc[field.name] = true;
+			return acc;
+		}, {}));
+		setFormErrors(validateForm().errors);
+	}, [fields, validateForm]);
+	const setError = (0, react.useCallback)((name, error) => {
+		setFormErrors((prev) => ({
+			...prev,
+			[name]: error
+		}));
+	}, []);
+	const setErrors = (0, react.useCallback)((newErrors) => {
+		setFormErrors((prev) => ({
+			...prev,
+			...newErrors
+		}));
+	}, []);
+	const clearErrors = (0, react.useCallback)(() => {
+		setFormErrors({});
+	}, []);
+	const reset = (0, react.useCallback)(() => {
+		setFormValues({ ...initialValues });
+		setFormTouched({});
+		setFormErrors({});
+		setIsSubmitted(false);
+	}, [initialValues]);
+	const handleSubmit = (0, react.useCallback)((onSubmit) => async (e) => {
+		if (e) e.preventDefault();
+		setIsSubmitted(true);
+		touchAllFields();
+		if (validateForm().isValid) await onSubmit(values);
+	}, [
+		values,
+		touchAllFields,
+		validateForm
+	]);
+	return {
+		clearErrors,
+		errors,
+		getFieldProps: (0, react.useCallback)((name) => {
+			const fieldConfig = getFieldConfig(name);
+			return {
+				error: touched[name] ? errors[name] : void 0,
+				name,
+				onBlur: () => setTouched(name, true),
+				onChange: (value) => setValue(name, value),
+				required: fieldConfig?.required || false,
+				touched: touched[name] || false,
+				value: values[name] || ""
+			};
+		}, [
+			values,
+			errors,
+			touched,
+			setValue,
+			setTouched,
+			getFieldConfig
+		]),
+		handleSubmit,
+		isSubmitted,
+		isValid,
+		reset,
+		setError,
+		setErrors,
+		setTouched,
+		setTouchedFields,
+		setValue,
+		setValues,
+		touchAllFields,
+		touched,
+		validateField,
+		validateForm,
+		values
+	};
+};
+var useForm_default = useForm;
+
+//#endregion
+exports.default = useForm_default;
+exports.useForm = useForm;
+//# sourceMappingURL=useForm.cjs.map

package/dist/cjs/hooks/useForm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.cjs","names":["getFieldConfig: (name: keyof T) => FormField | undefined","validateField: (name: keyof T) => string | null","value: string","fieldConfig: FormField | undefined","fieldError: string | null","validateForm: () => ValidationResult","newErrors: Record<keyof T, string>","error: string | null","globalErrors: Record<string, string>","isValid: boolean","setValue: (name: keyof T, value: string) => void","setValues: (newValues: Partial<T>) => void","setTouched: (name: keyof T, isTouched?: boolean) => void","setTouchedFields: (touchedFields: Partial<Record<keyof T, boolean>>) => void","touchAllFields: () => void","setError: (name: keyof T, error: string) => void","setErrors: (newErrors: Partial<Record<keyof T, string>>) => void","clearErrors: () => void","reset: () => void","handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: FormEvent) => Promise<void>"],"sources":["../../../src/hooks/useForm.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 {useState, useCallback, FormEvent} from 'react';\n\n/**\n * Generic form field configuration\n */\nexport interface FormField {\n  initialValue?: string;\n  name: string;\n  required?: boolean;\n  validator?: (value: string) => string | null;\n}\n\n/**\n * Form validation result\n */\nexport interface ValidationResult {\n  errors: Record<string, string>;\n  isValid: boolean;\n}\n\n/**\n * Configuration for the useForm hook\n */\nexport interface UseFormConfig<T extends Record<string, string>> {\n  /**\n   * Form field definitions\n   */\n  fields?: FormField[];\n  /**\n   * Initial form values\n   */\n  initialValues?: Partial<T>;\n  /**\n   * Custom required field validation message\n   */\n  requiredMessage?: string;\n  /**\n   * Whether to validate on blur (default: true)\n   */\n  validateOnBlur?: boolean;\n  /**\n   * Whether to validate on change (default: false)\n   */\n  validateOnChange?: boolean;\n  /**\n   * Global form validator function\n   */\n  validator?: (values: T) => Record<string, string>;\n}\n\n/**\n * Return type for the useForm hook\n */\nexport interface UseFormReturn<T extends Record<string, string>> {\n  /**\n   * Clear all errors\n   */\n  clearErrors: () => void;\n  /**\n   * Current validation errors\n   */\n  errors: Record<keyof T, string>;\n  /**\n   * Get field props for easy integration with form components\n   */\n  getFieldProps: (name: keyof T) => {\n    error: string | undefined;\n    name: keyof T;\n    onBlur: () => void;\n    onChange: (value: string) => void;\n    required: boolean;\n    touched: boolean;\n    value: string;\n  };\n  /**\n   * Handle form submission\n   */\n  handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: FormEvent) => Promise<void>;\n  /**\n   * Whether the form has been submitted\n   */\n  isSubmitted: boolean;\n  /**\n   * Whether the form is currently valid\n   */\n  isValid: boolean;\n  /**\n   * Reset the form to initial values\n   */\n  reset: () => void;\n  /**\n   * Set a field error\n   */\n  setError: (name: keyof T, error: string) => void;\n  /**\n   * Set multiple field errors\n   */\n  setErrors: (errors: Partial<Record<keyof T, string>>) => void;\n  /**\n   * Mark a field as touched\n   */\n  setTouched: (name: keyof T, touched?: boolean) => void;\n  /**\n   * Mark multiple fields as touched\n   */\n  setTouchedFields: (touched: Partial<Record<keyof T, boolean>>) => void;\n  /**\n   * Set a single field value\n   */\n  setValue: (name: keyof T, value: string) => void;\n  /**\n   * Set multiple field values\n   */\n  setValues: (values: Partial<T>) => void;\n  /**\n   * Mark all fields as touched\n   */\n  touchAllFields: () => void;\n  /**\n   * Fields that have been touched by the user\n   */\n  touched: Record<keyof T, boolean>;\n  /**\n   * Validate a single field\n   */\n  validateField: (name: keyof T) => string | null;\n  /**\n   * Validate all fields\n   */\n  validateForm: () => ValidationResult;\n  /**\n   * Current form values\n   */\n  values: T;\n}\n\n/**\n * Generic form hook that provides comprehensive form state management and validation.\n *\n * @template T - The type of form values (must extend Record<string, string>)\n * @param config - Configuration options for the form\n * @returns Form state and methods\n *\n * @example\n * ```tsx\n * interface LoginForm {\n *   username: string;\n *   password: string;\n * }\n *\n * const {\n *   values,\n *   touched,\n *   errors,\n *   isValid,\n *   setValue,\n *   handleSubmit,\n *   getFieldProps\n * } = useForm<LoginForm>({\n *   initialValues: { username: '', password: '' },\n *   fields: [\n *     { name: 'username', required: true },\n *     { name: 'password', required: true }\n *   ]\n * });\n *\n * const onSubmit = handleSubmit((values) => {\n *   console.log('Form submitted:', values);\n * });\n *\n * return (\n *   <form onSubmit={onSubmit}>\n *     <input {...getFieldProps('username')} />\n *     <input {...getFieldProps('password')} type=\"password\" />\n *     <button type=\"submit\" disabled={!isValid}>Submit</button>\n *   </form>\n * );\n * ```\n */\nexport const useForm = <T extends Record<string, string>>(config: UseFormConfig<T> = {}): UseFormReturn<T> => {\n  const {\n    initialValues = {} as T,\n    fields = [],\n    validator,\n    validateOnChange = false,\n    validateOnBlur = true,\n    requiredMessage = 'This field is required',\n  } = config;\n\n  // Initialize form state\n  const [values, setFormValues] = useState<T>({...initialValues} as T);\n  const [touched, setFormTouched] = useState<Record<keyof T, boolean>>({} as Record<keyof T, boolean>);\n  const [errors, setFormErrors] = useState<Record<keyof T, string>>({} as Record<keyof T, string>);\n  const [isSubmitted, setIsSubmitted] = useState(false);\n\n  // Get field configuration by name\n  const getFieldConfig: (name: keyof T) => FormField | undefined = useCallback(\n    (name: keyof T): FormField | undefined => fields.find((field: FormField) => field.name === name),\n    [fields],\n  );\n\n  // Validate a single field\n  const validateField: (name: keyof T) => string | null = useCallback(\n    (name: keyof T): string | null => {\n      const value: string = values[name] || '';\n      const fieldConfig: FormField | undefined = getFieldConfig(name);\n\n      // Check required validation\n      if (fieldConfig?.required && (!value || value.trim() === '')) {\n        return requiredMessage;\n      }\n\n      // Run custom field validator\n      if (fieldConfig?.validator) {\n        const fieldError: string | null = fieldConfig.validator(value);\n        if (fieldError) return fieldError;\n      }\n\n      return null;\n    },\n    [values, getFieldConfig, requiredMessage],\n  );\n\n  // Validate the entire form\n  const validateForm: () => ValidationResult = useCallback((): ValidationResult => {\n    const newErrors: Record<keyof T, string> = {} as Record<keyof T, string>;\n\n    // Validate individual fields\n    fields.forEach((field: FormField) => {\n      const error: string | null = validateField(field.name as keyof T);\n      if (error) {\n        newErrors[field.name as keyof T] = error;\n      }\n    });\n\n    // Run global validator if provided\n    if (validator) {\n      const globalErrors: Record<string, string> = validator(values);\n      Object.keys(globalErrors).forEach((key: string) => {\n        if (globalErrors[key]) {\n          newErrors[key as keyof T] = globalErrors[key];\n        }\n      });\n    }\n\n    return {\n      errors: newErrors,\n      isValid: Object.keys(newErrors).length === 0,\n    };\n  }, [fields, validateField, validator, values]);\n\n  // Check if form is currently valid\n  const isValid: boolean = Object.keys(errors).length === 0;\n\n  // Set a single field value\n  const setValue: (name: keyof T, value: string) => void = useCallback(\n    (name: keyof T, value: string): void => {\n      setFormValues((prev: T) => ({\n        ...prev,\n        [name]: value,\n      }));\n\n      // Validate on change if enabled\n      if (validateOnChange) {\n        const error: string | null = validateField(name);\n        setFormErrors((prev: Record<keyof T, string>) => {\n          const newErrors: Record<keyof T, string> = {...prev};\n          if (error) {\n            newErrors[name] = error;\n          } else {\n            delete newErrors[name];\n          }\n          return newErrors;\n        });\n      }\n    },\n    [validateField, validateOnChange],\n  );\n\n  // Set multiple field values\n  const setValues: (newValues: Partial<T>) => void = useCallback((newValues: Partial<T>): void => {\n    setFormValues((prev: T) => ({\n      ...prev,\n      ...newValues,\n    }));\n  }, []);\n\n  // Mark a field as touched\n  const setTouched: (name: keyof T, isTouched?: boolean) => void = useCallback(\n    (name: keyof T, isTouched = true): void => {\n      setFormTouched((prev: Record<keyof T, boolean>) => ({\n        ...prev,\n        [name]: isTouched,\n      }));\n\n      // Validate on blur if enabled and field is touched\n      if (validateOnBlur && isTouched) {\n        const error: string | null = validateField(name);\n        setFormErrors((prev: Record<keyof T, string>) => {\n          const newErrors: Record<keyof T, string> = {...prev};\n          if (error) {\n            newErrors[name] = error;\n          } else {\n            delete newErrors[name];\n          }\n          return newErrors;\n        });\n      }\n    },\n    [validateField, validateOnBlur],\n  );\n\n  // Set multiple touched fields\n  const setTouchedFields: (touchedFields: Partial<Record<keyof T, boolean>>) => void = useCallback(\n    (touchedFields: Partial<Record<keyof T, boolean>>): void => {\n      setFormTouched((prev: Record<keyof T, boolean>) => ({\n        ...prev,\n        ...touchedFields,\n      }));\n    },\n    [],\n  );\n\n  // Mark all fields as touched\n  const touchAllFields: () => void = useCallback((): void => {\n    const allTouched: Record<keyof T, boolean> = fields.reduce(\n      (acc: Record<keyof T, boolean>, field: FormField) => {\n        acc[field.name as keyof T] = true;\n        return acc;\n      },\n      {} as Record<keyof T, boolean>,\n    );\n\n    setFormTouched(allTouched);\n\n    // Validate all fields\n    const validation: ValidationResult = validateForm();\n    setFormErrors(validation.errors as Record<keyof T, string>);\n  }, [fields, validateForm]);\n\n  // Set a field error\n  const setError: (name: keyof T, error: string) => void = useCallback((name: keyof T, error: string): void => {\n    setFormErrors((prev: Record<keyof T, string>) => ({\n      ...prev,\n      [name]: error,\n    }));\n  }, []);\n\n  // Set multiple field errors\n  const setErrors: (newErrors: Partial<Record<keyof T, string>>) => void = useCallback(\n    (newErrors: Partial<Record<keyof T, string>>): void => {\n      setFormErrors((prev: Record<keyof T, string>) => ({\n        ...prev,\n        ...newErrors,\n      }));\n    },\n    [],\n  );\n\n  // Clear all errors\n  const clearErrors: () => void = useCallback((): void => {\n    setFormErrors({} as Record<keyof T, string>);\n  }, []);\n\n  // Reset form to initial state\n  const reset: () => void = useCallback((): void => {\n    setFormValues({...initialValues} as T);\n    setFormTouched({} as Record<keyof T, boolean>);\n    setFormErrors({} as Record<keyof T, string>);\n    setIsSubmitted(false);\n  }, [initialValues]);\n\n  // Handle form submission\n  const handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: FormEvent) => Promise<void> = useCallback(\n    (onSubmit: (values: T) => void | Promise<void>) =>\n      async (e?: FormEvent): Promise<void> => {\n        if (e) {\n          e.preventDefault();\n        }\n\n        setIsSubmitted(true);\n        touchAllFields();\n\n        const validation: ValidationResult = validateForm();\n\n        if (validation.isValid) {\n          await onSubmit(values);\n        }\n      },\n    [values, touchAllFields, validateForm],\n  );\n\n  // Get field props for easy integration\n  const getFieldProps: (name: keyof T) => any = useCallback(\n    (name: keyof T) => {\n      const fieldConfig: FormField | undefined = getFieldConfig(name);\n\n      return {\n        error: touched[name] ? errors[name] : undefined,\n        name,\n        onBlur: (): void => setTouched(name, true),\n        onChange: (value: string): void => setValue(name, value),\n        required: fieldConfig?.required || false,\n        touched: touched[name] || false,\n        value: values[name] || '',\n      };\n    },\n    [values, errors, touched, setValue, setTouched, getFieldConfig],\n  );\n\n  return {\n    clearErrors,\n    errors,\n    getFieldProps,\n    handleSubmit,\n    isSubmitted,\n    isValid,\n    reset,\n    setError,\n    setErrors,\n    setTouched,\n    setTouchedFields,\n    setValue,\n    setValues,\n    touchAllFields,\n    touched,\n    validateField,\n    validateForm,\n    values,\n  };\n};\n\nexport default useForm;\n"],"mappings":"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"}

package/dist/cjs/hooks/useTranslation.cjs

@@ -0,0 +1,79 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_I18nContext = require('../contexts/I18n/I18nContext.cjs');
+const require_ComponentPreferencesContext = require('../contexts/I18n/ComponentPreferencesContext.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/useTranslation.ts
+/**
+* Hook for accessing translation functions and language management.
+* Must be used within an I18nProvider context.
+*
+* @param componentPreferences - Optional component-level i18n preferences to merge with global ones
+* @returns An object containing translation function and language management utilities
+* @throws Error if used outside of I18nProvider context
+*/
+const useTranslation = (componentPreferences) => {
+	const context = (0, react.useContext)(require_I18nContext.default);
+	const contextPreferences = (0, react.useContext)(require_ComponentPreferencesContext.default)?.i18n;
+	if (!context) throw new Error("useTranslation must be used within an I18nProvider. Make sure your component is wrapped with ThunderIDProvider which includes I18nProvider.");
+	const effectivePreferences = componentPreferences ?? contextPreferences;
+	const { t: globalT, currentLanguage, setLanguage, bundles: globalBundles, fallbackLanguage } = context;
+	const mergedBundles = (0, react.useMemo)(() => {
+		if (!effectivePreferences?.bundles) return globalBundles;
+		const merged = {};
+		Object.entries(globalBundles).forEach(([key, bundle]) => {
+			merged[key] = bundle;
+		});
+		Object.entries(effectivePreferences.bundles).forEach(([key, componentBundle]) => {
+			const normalizedTranslations = (0, __thunderid_browser.normalizeTranslations)(componentBundle.translations);
+			if (merged[key]) merged[key] = {
+				...merged[key],
+				metadata: componentBundle.metadata ? {
+					...merged[key].metadata,
+					...componentBundle.metadata
+				} : merged[key].metadata,
+				translations: (0, __thunderid_browser.deepMerge)(merged[key].translations, normalizedTranslations)
+			};
+			else merged[key] = {
+				...componentBundle,
+				translations: normalizedTranslations
+			};
+		});
+		return merged;
+	}, [globalBundles, effectivePreferences?.bundles]);
+	const enhancedT = (0, react.useMemo)(() => {
+		if (!effectivePreferences?.bundles) return globalT;
+		return (key, params) => {
+			let translation;
+			const currentBundle = mergedBundles[currentLanguage];
+			if (currentBundle?.translations?.[key]) translation = currentBundle.translations[key];
+			if (!translation && currentLanguage !== fallbackLanguage) {
+				const fallbackBundle = mergedBundles[fallbackLanguage];
+				if (fallbackBundle?.translations?.[key]) translation = fallbackBundle.translations[key];
+			}
+			if (!translation) translation = key;
+			if (params && Object.keys(params).length > 0) return Object.entries(params).reduce((acc, [paramKey, paramValue]) => acc.replace(new RegExp(`\\{${paramKey}\\}`, "g"), String(paramValue)), translation);
+			return translation;
+		};
+	}, [
+		mergedBundles,
+		currentLanguage,
+		fallbackLanguage,
+		globalT,
+		effectivePreferences?.bundles
+	]);
+	return {
+		availableLanguages: Object.keys(mergedBundles),
+		currentLanguage,
+		setLanguage,
+		t: enhancedT
+	};
+};
+var useTranslation_default = useTranslation;
+
+//#endregion
+exports.default = useTranslation_default;
+//# sourceMappingURL=useTranslation.cjs.map

package/dist/cjs/hooks/useTranslation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTranslation.cjs","names":["context: any","I18nContext","contextPreferences: I18nPreferences | undefined","ComponentPreferencesContext","effectivePreferences: I18nPreferences | undefined","mergedBundles: Record<string, I18nBundle>","merged: Record<string, I18nBundle>","normalizedTranslations: I18nTranslations","enhancedT: (key: string, params?: Record<string, string | number>) => string","translation: string | undefined","currentBundle: I18nBundle | undefined","fallbackBundle: I18nBundle | undefined"],"sources":["../../../src/hooks/useTranslation.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 {\n  deepMerge,\n  I18nPreferences,\n  Preferences,\n  I18nBundle,\n  I18nTranslations,\n  normalizeTranslations,\n} from '@thunderid/browser';\nimport {useContext, useMemo} from 'react';\nimport ComponentPreferencesContext from '../contexts/I18n/ComponentPreferencesContext';\nimport I18nContext from '../contexts/I18n/I18nContext';\n\nexport interface UseTranslation {\n  /**\n   * All available language codes\n   */\n  availableLanguages: string[];\n\n  /**\n   * The current language code\n   */\n  currentLanguage: string;\n\n  /**\n   * Function to change the current language\n   */\n  setLanguage: (language: string) => void;\n\n  /**\n   * Translation function that returns a translated string for the given key\n   */\n  t: (key: string, params?: Record<string, string | number>) => string;\n}\n\nexport interface UseTranslationWithPreferences extends UseTranslation {\n  /**\n   * Enhanced translation function that merges component-level preferences\n   */\n  t: (key: string, params?: Record<string, string | number>) => string;\n}\n\n/**\n * Hook for accessing translation functions and language management.\n * Must be used within an I18nProvider context.\n *\n * @param componentPreferences - Optional component-level i18n preferences to merge with global ones\n * @returns An object containing translation function and language management utilities\n * @throws Error if used outside of I18nProvider context\n */\nconst useTranslation = (componentPreferences?: I18nPreferences): UseTranslationWithPreferences => {\n  const context: any = useContext(I18nContext);\n  const componentPrefs: Preferences | undefined = useContext(ComponentPreferencesContext);\n  const contextPreferences: I18nPreferences | undefined = componentPrefs?.i18n;\n\n  if (!context) {\n    throw new Error(\n      'useTranslation must be used within an I18nProvider. Make sure your component is wrapped with ThunderIDProvider which includes I18nProvider.',\n    );\n  }\n\n  // Direct parameter takes precedence over context-provided preferences\n  const effectivePreferences: I18nPreferences | undefined = componentPreferences ?? contextPreferences;\n\n  const {t: globalT, currentLanguage, setLanguage, bundles: globalBundles, fallbackLanguage} = context;\n\n  // Merge global bundles with component-level bundles if provided\n  const mergedBundles: Record<string, I18nBundle> = useMemo(() => {\n    if (!effectivePreferences?.bundles) {\n      return globalBundles;\n    }\n\n    const merged: Record<string, I18nBundle> = {};\n\n    // Start with global bundles\n    Object.entries(globalBundles).forEach(([key, bundle]: [string, I18nBundle]) => {\n      merged[key] = bundle;\n    });\n\n    // Merge component-level bundles using deepMerge for better merging\n    Object.entries(effectivePreferences.bundles).forEach(([key, componentBundle]: [string, I18nBundle]) => {\n      const normalizedTranslations: I18nTranslations = normalizeTranslations(\n        componentBundle.translations as unknown as Record<string, string | Record<string, string>>,\n      );\n      if (merged[key]) {\n        // Deep merge component bundle with existing global bundle\n        merged[key] = {\n          ...merged[key],\n          metadata: componentBundle.metadata\n            ? {...merged[key].metadata, ...componentBundle.metadata}\n            : merged[key].metadata,\n          translations: deepMerge(merged[key].translations, normalizedTranslations),\n        };\n      } else {\n        // No global bundle for this language, use component bundle as-is\n        merged[key] = {...componentBundle, translations: normalizedTranslations};\n      }\n    });\n\n    return merged;\n  }, [globalBundles, effectivePreferences?.bundles]);\n\n  // Create enhanced translation function that uses merged bundles\n  const enhancedT: (key: string, params?: Record<string, string | number>) => string = useMemo(() => {\n    if (!effectivePreferences?.bundles) {\n      // No component preferences, use global translation function\n      return globalT;\n    }\n\n    return (key: string, params?: Record<string, string | number>): string => {\n      let translation: string | undefined;\n\n      // Try to get translation from current language bundle\n      const currentBundle: I18nBundle | undefined = mergedBundles[currentLanguage];\n      if (currentBundle?.translations?.[key]) {\n        translation = currentBundle.translations[key];\n      }\n\n      // Fallback to fallback language if translation not found\n      if (!translation && currentLanguage !== fallbackLanguage) {\n        const fallbackBundle: I18nBundle | undefined = mergedBundles[fallbackLanguage];\n        if (fallbackBundle?.translations?.[key]) {\n          translation = fallbackBundle.translations[key];\n        }\n      }\n\n      // If still no translation found, return the key itself\n      if (!translation) {\n        translation = key;\n      }\n\n      // Replace parameters if provided\n      if (params && Object.keys(params).length > 0) {\n        return Object.entries(params).reduce(\n          (acc: string, [paramKey, paramValue]: [string, string | number]) =>\n            acc.replace(new RegExp(`\\\\{${paramKey}\\\\}`, 'g'), String(paramValue)),\n          translation,\n        );\n      }\n\n      return translation;\n    };\n  }, [mergedBundles, currentLanguage, fallbackLanguage, globalT, effectivePreferences?.bundles]);\n\n  return {\n    availableLanguages: Object.keys(mergedBundles),\n    currentLanguage,\n    setLanguage,\n    t: enhancedT,\n  };\n};\n\nexport default useTranslation;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmEA,MAAM,kBAAkB,yBAA0E;CAChG,MAAMA,gCAA0BC,4BAAY;CAE5C,MAAMC,2CADqDC,4CAA4B,EACf;AAExE,KAAI,CAAC,QACH,OAAM,IAAI,MACR,8IACD;CAIH,MAAMC,uBAAoD,wBAAwB;CAElF,MAAM,EAAC,GAAG,SAAS,iBAAiB,aAAa,SAAS,eAAe,qBAAoB;CAG7F,MAAMC,yCAA0D;AAC9D,MAAI,CAAC,sBAAsB,QACzB,QAAO;EAGT,MAAMC,SAAqC,EAAE;AAG7C,SAAO,QAAQ,cAAc,CAAC,SAAS,CAAC,KAAK,YAAkC;AAC7E,UAAO,OAAO;IACd;AAGF,SAAO,QAAQ,qBAAqB,QAAQ,CAAC,SAAS,CAAC,KAAK,qBAA2C;GACrG,MAAMC,wEACJ,gBAAgB,aACjB;AACD,OAAI,OAAO,KAET,QAAO,OAAO;IACZ,GAAG,OAAO;IACV,UAAU,gBAAgB,WACtB;KAAC,GAAG,OAAO,KAAK;KAAU,GAAG,gBAAgB;KAAS,GACtD,OAAO,KAAK;IAChB,iDAAwB,OAAO,KAAK,cAAc,uBAAuB;IAC1E;OAGD,QAAO,OAAO;IAAC,GAAG;IAAiB,cAAc;IAAuB;IAE1E;AAEF,SAAO;IACN,CAAC,eAAe,sBAAsB,QAAQ,CAAC;CAGlD,MAAMC,qCAA6F;AACjG,MAAI,CAAC,sBAAsB,QAEzB,QAAO;AAGT,UAAQ,KAAa,WAAqD;GACxE,IAAIC;GAGJ,MAAMC,gBAAwC,cAAc;AAC5D,OAAI,eAAe,eAAe,KAChC,eAAc,cAAc,aAAa;AAI3C,OAAI,CAAC,eAAe,oBAAoB,kBAAkB;IACxD,MAAMC,iBAAyC,cAAc;AAC7D,QAAI,gBAAgB,eAAe,KACjC,eAAc,eAAe,aAAa;;AAK9C,OAAI,CAAC,YACH,eAAc;AAIhB,OAAI,UAAU,OAAO,KAAK,OAAO,CAAC,SAAS,EACzC,QAAO,OAAO,QAAQ,OAAO,CAAC,QAC3B,KAAa,CAAC,UAAU,gBACvB,IAAI,QAAQ,IAAI,OAAO,MAAM,SAAS,MAAM,IAAI,EAAE,OAAO,WAAW,CAAC,EACvE,YACD;AAGH,UAAO;;IAER;EAAC;EAAe;EAAiB;EAAkB;EAAS,sBAAsB;EAAQ,CAAC;AAE9F,QAAO;EACL,oBAAoB,OAAO,KAAK,cAAc;EAC9C;EACA;EACA,GAAG;EACJ;;AAGH,6BAAe"}