npm - @thunderid/react - Versions diffs - 0.1.0 → 0.2.0 - Mend

@thunderid/react 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (930) hide show

package/dist/components/presentation/auth/SignUp/v2/BaseSignUp.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"BaseSignUp.js","names":["logger: ReturnType<typeof createPackageComponentLogger>","BaseSignUpContent: FC<BaseSignUpProps>","useTheme","customRenderers: ComponentRendererMap","ComponentRendererContext","useTranslation","useFlow","useThunderID","styles: any","useStyles","challengeTokenRef: any","initializationAttemptedRef: any","passkeyProcessedRef: any","tempData: any","storageManager: any","handleError: any","errorMessage: string","normalizeFlowResponseLocal: any","extractFormFields: any","fields: FormField[]","EmbeddedFlowComponentType","fieldName: any","setupFormFields: any","fields: any","initialValues: Record<string, string>","redirectUrl: any","popup: any","hasProcessedCallback: any","popupMonitor: ReturnType<typeof setInterval> | null","messageHandler: ((event: MessageEvent) => Promise<void>) | null","expectedOrigin: any","payload: EmbeddedSignUpFlowRequestV2","continueResponse: any","normalizedContinueResponse: any","popupUrl: any","url: any","code: any","state: any","filteredInputs: Record<string, any>","response: any","effectiveExecutionIdForPasskey: any","passkeyResponse: any","passkeyResponseObj: any","inputs: any","processedResponse: any","containerClasses: any","inputClasses: any","buttonClasses: any","errorClasses: any","messageClasses: any","renderComponents: any","urlParams: any","payload: any","url: URL","result: any","CardPrimitive","Spinner","AlertPrimitive","getAuthComponentHeadings","Typography","BaseSignUp: FC<BaseSignUpProps>","content: ReactElement","Logo","FlowProvider","ComponentPreferencesContext"],"sources":["../../../../../../src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 {cx} from '@emotion/css';\nimport {\n EmbeddedSignUpFlowRequestV2,\n EmbeddedSignUpFlowResponseV2,\n EmbeddedSignUpFlowStatusV2,\n EmbeddedSignUpFlowTypeV2,\n withVendorCSSClassPrefix,\n EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType,\n createPackageComponentLogger,\n Preferences,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport ComponentRendererContext, {\n ComponentRendererMap,\n} from '../../../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport FlowProvider from '../../../../../contexts/Flow/FlowProvider';\nimport useFlow from '../../../../../contexts/Flow/useFlow';\nimport ComponentPreferencesContext from '../../../../../contexts/I18n/ComponentPreferencesContext';\nimport useTheme from '../../../../../contexts/Theme/useTheme';\nimport useThunderID from '../../../../../contexts/ThunderID/useThunderID';\nimport {useForm, FormField} from '../../../../../hooks/useForm';\nimport useTranslation from '../../../../../hooks/useTranslation';\nimport {normalizeFlowResponse, extractErrorMessage} from '../../../../../utils/v2/flowTransformer';\nimport getAuthComponentHeadings from '../../../../../utils/v2/getAuthComponentHeadings';\nimport {handlePasskeyRegistration} from '../../../../../utils/v2/passkey';\nimport AlertPrimitive from '../../../../primitives/Alert/Alert';\n// eslint-disable-next-line import/no-named-as-default\nimport CardPrimitive, {CardProps} from '../../../../primitives/Card/Card';\nimport Logo from '../../../../primitives/Logo/Logo';\nimport Spinner from '../../../../primitives/Spinner/Spinner';\nimport Typography from '../../../../primitives/Typography/Typography';\nimport {renderSignUpComponents} from '../../AuthOptionFactory';\nimport useStyles from '../BaseSignUp.styles';\n\nconst logger: ReturnType<typeof createPackageComponentLogger> = createPackageComponentLogger(\n '@thunderid/react',\n 'BaseSignUp',\n);\n\n/**\n * State for tracking passkey registration\n */\ninterface PasskeyState {\n actionId: string | null;\n creationOptions: string | null;\n error: Error | null;\n executionId: string | null;\n isActive: boolean;\n}\n\n/**\n * Render props for custom UI rendering\n */\nexport interface BaseSignUpRenderProps {\n /**\n * Flow components\n */\n components: any[];\n\n /**\n * API error (if any)\n */\n error?: Error | null;\n\n /**\n * Field validation errors\n */\n fieldErrors: Record<string, string>;\n\n /**\n * Function to handle input changes\n */\n handleInputChange: (name: string, value: string) => void;\n\n /**\n * Function to handle form submission\n */\n handleSubmit: (component: any, data?: Record<string, any>) => Promise<void>;\n\n /**\n * Loading state\n */\n isLoading: boolean;\n\n /**\n * Whether the form is valid\n */\n isValid: boolean;\n\n /**\n * Flow messages\n */\n messages: {message: string; type: string}[];\n\n /**\n * Flow subtitle\n */\n subtitle: string;\n\n /**\n * Flow title\n */\n title: string;\n\n /**\n * Touched fields\n */\n touched: Record<string, boolean>;\n\n /**\n * Function to validate the form\n */\n validateForm: () => {fieldErrors: Record<string, string>; isValid: boolean};\n\n /**\n * Form values\n */\n values: Record<string, string>;\n}\n\n/**\n * Props for the BaseSignUp component.\n */\nexport interface BaseSignUpProps {\n /**\n * URL to redirect after successful sign-up.\n */\n afterSignUpUrl?: string;\n\n /**\n * Custom CSS class name for the submit button.\n */\n buttonClassName?: string;\n\n /**\n * Render props function for custom UI\n */\n children?: (props: BaseSignUpRenderProps) => ReactNode;\n\n /**\n * Custom CSS class name for the form container.\n */\n className?: string;\n\n /**\n * Error object to display\n */\n error?: Error | null;\n\n /**\n * Custom CSS class name for error messages.\n */\n errorClassName?: string;\n\n /**\n * Custom CSS class name for form inputs.\n */\n inputClassName?: string;\n\n isInitialized?: boolean;\n\n /**\n * Custom CSS class name for info messages.\n */\n messageClassName?: string;\n\n /**\n * Callback function called when the sign-up flow completes and requires redirection.\n * This allows platform-specific handling of redirects (e.g., Next.js router.push).\n * @param response - The response from the sign-up flow containing the redirect URL, etc.\n */\n onComplete?: (response: EmbeddedSignUpFlowResponseV2) => void;\n\n /**\n * Callback function called when sign-up fails.\n * @param error - The error that occurred during sign-up.\n */\n onError?: (error: Error) => void;\n\n /**\n * Callback function called when sign-up flow status changes.\n * @param response - The current sign-up response.\n */\n onFlowChange?: (response: EmbeddedSignUpFlowResponseV2) => void;\n\n /**\n * Function to initialize sign-up flow.\n * @returns Promise resolving to the initial sign-up response.\n */\n onInitialize?: (payload?: EmbeddedSignUpFlowRequestV2) => Promise<EmbeddedSignUpFlowResponseV2>;\n\n /**\n * Function to handle sign-up steps.\n * @param payload - The sign-up payload.\n * @returns Promise resolving to the sign-up response.\n */\n onSubmit?: (payload: EmbeddedSignUpFlowRequestV2) => Promise<EmbeddedSignUpFlowResponseV2>;\n /**\n * Component-level preferences to override global i18n and theme settings.\n * Preferences are deep-merged with global ones, with component preferences\n * taking precedence. Affects this component and all its descendants.\n */\n preferences?: Preferences;\n\n /**\n * Whether to redirect after sign-up.\n */\n shouldRedirectAfterSignUp?: boolean;\n\n /**\n * Whether to show the logo.\n */\n showLogo?: boolean;\n\n /**\n * Whether to show the subtitle.\n */\n showSubtitle?: boolean;\n\n /**\n * Whether to show the title.\n */\n showTitle?: boolean;\n\n /**\n * Size variant for the component.\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Theme variant for the component.\n */\n variant?: CardProps['variant'];\n}\n\n/**\n * Internal component that consumes FlowContext and renders the sign-up UI.\n */\nconst BaseSignUpContent: FC<BaseSignUpProps> = ({\n afterSignUpUrl,\n onInitialize,\n onSubmit,\n onError,\n onFlowChange,\n onComplete,\n error: externalError,\n className = '',\n inputClassName = '',\n buttonClassName = '',\n errorClassName = '',\n messageClassName = '',\n size = 'medium',\n variant = 'outlined',\n isInitialized,\n children,\n showTitle = true,\n showSubtitle = true,\n}: BaseSignUpProps): ReactElement => {\n const {theme, colorScheme} = useTheme();\n const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);\n const {t} = useTranslation();\n const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages} = useFlow();\n const {meta, isInitialized: isSdkInitialized, getStorageManager} = useThunderID();\n const styles: any = useStyles(theme, colorScheme);\n\n const [isLoading, setIsLoading] = useState(false);\n const [isFlowInitialized, setIsFlowInitialized] = useState(false);\n const [currentFlow, setCurrentFlow] = useState<EmbeddedSignUpFlowResponseV2 | null>(null);\n const [apiError, setApiError] = useState<Error | null>(null);\n const [isStorageReady, setIsStorageReady] = useState(false);\n const [passkeyState, setPasskeyState] = useState<PasskeyState>({\n actionId: null,\n creationOptions: null,\n error: null,\n executionId: null,\n isActive: false,\n });\n const challengeTokenRef: any = useRef<string | null>(null);\n\n const initializationAttemptedRef: any = useRef(false);\n const passkeyProcessedRef: any = useRef(false);\n\n /**\n * Restore any challenge token persisted before an OAuth redirect.\n */\n useEffect(() => {\n if (!isSdkInitialized) return;\n\n (async (): Promise<void> => {\n try {\n const storageManager: any = await getStorageManager();\n const tempData: any = await storageManager?.getTemporaryData();\n if (tempData?.challengeToken) {\n challengeTokenRef.current = tempData.challengeToken as string;\n }\n } catch {\n // StorageManager unavailable — continue without persisted token\n } finally {\n setIsStorageReady(true);\n }\n })();\n }, [isSdkInitialized]);\n\n /**\n * Updates challengeTokenRef immediately (stale-closure safe) and persists via\n * the provider's StorageManager so the token survives OAuth redirects.\n */\n const setChallengeToken = async (challengeToken: string | null): Promise<void> => {\n challengeTokenRef.current = challengeToken;\n try {\n const storageManager: any = await getStorageManager();\n if (storageManager) {\n if (challengeToken) {\n await storageManager.setTemporaryDataParameter('challengeToken', challengeToken);\n } else {\n await storageManager.removeTemporaryDataParameter('challengeToken');\n }\n }\n } catch {\n logger.warn('Failed to persist challenge token in storage.');\n }\n };\n\n /**\n * Handle error responses and extract meaningful error messages\n * Uses the transformer's extractErrorMessage function.\n */\n const handleError: any = useCallback(\n (error: any) => {\n const errorMessage: string = extractErrorMessage(error, t);\n\n // Set the API error state\n setApiError(error instanceof Error ? error : new Error(errorMessage));\n\n // Clear existing messages and add the error message\n clearMessages();\n addMessage({\n message: errorMessage,\n type: 'error',\n });\n },\n [t, addMessage, clearMessages],\n );\n\n /**\n * Normalize flow response to ensure component-driven format\n * Uses normalizeFlowResponse for modern API format responses\n */\n const normalizeFlowResponseLocal: any = useCallback(\n (response: EmbeddedSignUpFlowResponseV2): EmbeddedSignUpFlowResponseV2 => {\n if (response?.data) {\n const {components} = normalizeFlowResponse(\n response,\n t,\n {\n defaultErrorKey: 'components.signUp.errors.generic',\n resolveTranslations: false,\n },\n meta,\n );\n\n return {\n ...response,\n data: {\n ...(response.data as any),\n components,\n },\n } as EmbeddedSignUpFlowResponseV2;\n }\n\n return response;\n },\n [t, children],\n );\n\n /**\n * Extract form fields from flow components\n */\n const extractFormFields: any = useCallback(\n (components: any[]): FormField[] => {\n const fields: FormField[] = [];\n\n const processComponents = (comps: any[]): any => {\n comps.forEach((component: any) => {\n if (\n component.type === EmbeddedFlowComponentType.TextInput ||\n component.type === EmbeddedFlowComponentType.PasswordInput ||\n component.type === EmbeddedFlowComponentType.EmailInput ||\n component.type === EmbeddedFlowComponentType.Select\n ) {\n // Use component.ref (mapped identifier) as the field name instead of component.id\n // This ensures form field names match what the input components use\n const fieldName: any = component.ref || component.id;\n\n fields.push({\n initialValue: '',\n name: fieldName,\n required: component.required || false,\n validator: (value: string) => {\n if (component.required && (!value || value.trim() === '')) {\n return t('validations.required.field.error');\n }\n // Add email validation if it's an email field\n if (\n (component.type === EmbeddedFlowComponentType.EmailInput || component.variant === 'EMAIL') &&\n value &&\n !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)\n ) {\n return t('field.email.invalid');\n }\n\n return null;\n },\n });\n }\n\n if (component.components && Array.isArray(component.components)) {\n processComponents(component.components);\n }\n });\n };\n\n processComponents(components);\n return fields;\n },\n [t],\n );\n\n const formFields: any = (currentFlow?.data as any)?.components\n ? extractFormFields((currentFlow!.data as any).components)\n : [];\n\n const form: any = useForm<Record<string, string>>({\n fields: formFields,\n initialValues: {},\n requiredMessage: t('validations.required.field.error'),\n validateOnBlur: true,\n validateOnChange: false,\n });\n\n const {\n values: formValues,\n touched: touchedFields,\n errors: formErrors,\n isValid: isFormValid,\n setValue: setFormValue,\n setTouched: setFormTouched,\n validateForm,\n touchAllFields,\n reset: resetForm,\n } = form;\n\n /**\n * Setup form fields based on the current flow.\n */\n const setupFormFields: any = useCallback(\n (flowResponse: EmbeddedSignUpFlowResponseV2) => {\n const fields: any = extractFormFields((flowResponse.data as any)?.components || []);\n const initialValues: Record<string, string> = {};\n\n fields.forEach((field: any) => {\n initialValues[field.name] = field.initialValue || '';\n });\n\n resetForm();\n\n Object.keys(initialValues).forEach((key: any) => {\n setFormValue(key, initialValues[key]);\n });\n },\n [extractFormFields, resetForm, setFormValue],\n );\n\n /**\n * Handle input value changes.\n * Only updates the value without marking as touched.\n * Touched state is set on blur to avoid premature validation.\n */\n const handleInputChange = (name: string, value: string): void => {\n setFormValue(name, value);\n };\n\n /**\n * Handle input blur event.\n * Marks the field as touched, which triggers validation.\n */\n const handleInputBlur = (name: string): void => {\n setFormTouched(name, true);\n };\n\n /**\n * Check if the response contains a redirection URL and perform the redirect if necessary.\n * @param response - The sign-up response\n * @returns true if a redirect was performed, false otherwise\n */\n const handleRedirectionIfNeeded = (response: EmbeddedSignUpFlowResponseV2): boolean => {\n if (response?.type === EmbeddedSignUpFlowTypeV2.Redirection && (response?.data as any)?.redirectURL) {\n /**\n * Open a popup window to handle redirection prompts for social sign-up\n */\n const redirectUrl: any = (response.data as any).redirectURL;\n const popup: any = window.open(redirectUrl, 'oauth_popup', 'width=500,height=600,scrollbars=yes,resizable=yes');\n\n if (!popup) {\n logger.error('Failed to open popup window');\n return false;\n }\n\n let hasProcessedCallback: any = false; // Prevent multiple processing\n let popupMonitor: ReturnType<typeof setInterval> | null = null;\n let messageHandler: ((event: MessageEvent) => Promise<void>) | null = null;\n\n /**\n * Clean up event listener and popup monitor\n */\n const cleanup = (): void => {\n if (messageHandler) {\n window.removeEventListener('message', messageHandler);\n }\n if (popupMonitor) {\n clearInterval(popupMonitor);\n }\n };\n\n /**\n * Add an event listener to the window to capture the message from the popup\n */\n messageHandler = async function messageEventHandler(event: MessageEvent): Promise<void> {\n /**\n * Check if the message is from our popup window\n */\n if (event.source !== popup) {\n return;\n }\n\n /**\n * Check the origin of the message to ensure it's from a trusted source\n */\n const expectedOrigin: any = afterSignUpUrl ? new URL(afterSignUpUrl).origin : window.location.origin;\n if (event.origin !== expectedOrigin && event.origin !== window.location.origin) {\n return;\n }\n\n const {code, state} = event.data;\n\n if (code && state) {\n hasProcessedCallback = true;\n\n const payload: EmbeddedSignUpFlowRequestV2 = {\n ...(currentFlow?.executionId && {executionId: currentFlow.executionId}),\n inputs: {\n code,\n state,\n },\n ...(challengeTokenRef.current ? {challengeToken: challengeTokenRef.current} : {}),\n };\n\n try {\n const continueResponse: any = await onSubmit!(payload);\n onFlowChange?.(continueResponse);\n\n if (continueResponse.flowStatus === EmbeddedSignUpFlowStatusV2.Error) {\n handleError(continueResponse);\n onError?.(continueResponse);\n } else if (continueResponse.flowStatus === EmbeddedSignUpFlowStatusV2.Complete) {\n onComplete?.(continueResponse);\n } else if (continueResponse.flowStatus === EmbeddedSignUpFlowStatusV2.Incomplete) {\n const normalizedContinueResponse: any = normalizeFlowResponseLocal(continueResponse);\n setCurrentFlow(normalizedContinueResponse);\n setupFormFields(normalizedContinueResponse);\n\n // Display error from INCOMPLETE response\n if (normalizedContinueResponse?.error) {\n handleError(normalizedContinueResponse);\n }\n }\n\n popup.close();\n cleanup();\n } catch (err) {\n handleError(err);\n onError?.(err as Error);\n popup.close();\n cleanup();\n }\n }\n };\n\n window.addEventListener('message', messageHandler);\n\n /**\n * Monitor popup for closure and URL changes\n */\n popupMonitor = setInterval(async () => {\n try {\n if (popup.closed) {\n cleanup();\n return;\n }\n\n // Skip if we've already processed a callback\n if (hasProcessedCallback) {\n return;\n }\n\n // Try to access popup URL to check for callback\n try {\n const popupUrl: any = popup.location.href;\n\n // Check if we've been redirected to the callback URL\n if (popupUrl && (popupUrl.includes('code=') || popupUrl.includes('error='))) {\n hasProcessedCallback = true; // Set flag to prevent multiple processing\n\n // Parse the URL for OAuth parameters\n const url: any = new URL(popupUrl);\n const code: any = url.searchParams.get('code');\n const state: any = url.searchParams.get('state');\n const error: any = url.searchParams.get('error');\n\n if (error) {\n logger.error('OAuth error:');\n popup.close();\n cleanup();\n return;\n }\n\n if (code && state) {\n const payload: EmbeddedSignUpFlowRequestV2 = {\n ...(currentFlow?.executionId && {executionId: currentFlow.executionId}),\n inputs: {\n code,\n state,\n },\n ...(challengeTokenRef.current ? {challengeToken: challengeTokenRef.current} : {}),\n };\n\n try {\n const continueResponse: any = await onSubmit!(payload);\n onFlowChange?.(continueResponse);\n\n if (continueResponse.flowStatus === EmbeddedSignUpFlowStatusV2.Error) {\n handleError(continueResponse);\n onError?.(continueResponse);\n } else if (continueResponse.flowStatus === EmbeddedSignUpFlowStatusV2.Complete) {\n onComplete?.(continueResponse);\n } else if (continueResponse.flowStatus === EmbeddedSignUpFlowStatusV2.Incomplete) {\n const normalizedContinueResponse: any = normalizeFlowResponseLocal(continueResponse);\n setCurrentFlow(normalizedContinueResponse);\n setupFormFields(normalizedContinueResponse);\n\n // Display error from INCOMPLETE response\n if (normalizedContinueResponse?.error) {\n handleError(normalizedContinueResponse);\n }\n }\n\n popup.close();\n } catch (err) {\n handleError(err);\n onError?.(err as Error);\n popup.close();\n }\n }\n }\n } catch (e) {\n // Cross-origin error is expected when popup navigates to OAuth provider\n // This is normal and we can ignore it\n }\n } catch (e) {\n logger.error('Error monitoring popup:');\n }\n }, 1000);\n\n return true;\n }\n\n return false;\n };\n\n /**\n * Handle component submission (for buttons outside forms).\n */\n const handleSubmit = async (component: any, data?: Record<string, any>, skipValidation?: boolean): Promise<void> => {\n if (!currentFlow) {\n return;\n }\n\n // Only validate for form submit actions, skip for social/trigger actions\n if (!skipValidation) {\n // Mark all fields as touched before validation\n touchAllFields();\n\n const validation: ReturnType<typeof validateForm> = validateForm();\n\n if (!validation.isValid) {\n return;\n }\n }\n\n setIsLoading(true);\n setApiError(null);\n clearMessages();\n\n try {\n // Filter out empty or undefined input values\n const filteredInputs: Record<string, any> = {};\n if (data) {\n Object.entries(data).forEach(([key, value]: [string, any]) => {\n if (value !== null && value !== undefined && value !== '') {\n filteredInputs[key] = value;\n }\n });\n }\n\n const payload: EmbeddedSignUpFlowRequestV2 = {\n ...(currentFlow.executionId && {executionId: currentFlow.executionId}),\n ...(component.id && {action: component.id}),\n ...(challengeTokenRef.current ? {challengeToken: challengeTokenRef.current} : {}),\n inputs: filteredInputs,\n };\n\n const rawResponse: any = await onSubmit!(payload);\n const response: any = normalizeFlowResponseLocal(rawResponse);\n onFlowChange?.(response);\n\n await setChallengeToken(response.challengeToken ?? null);\n\n if (response.flowStatus === EmbeddedSignUpFlowStatusV2.Error) {\n handleError(response);\n onError?.(new Error(extractErrorMessage(response, t)));\n return;\n }\n\n if (response.flowStatus === EmbeddedSignUpFlowStatusV2.Complete) {\n onComplete?.(response);\n return;\n }\n\n if (response.flowStatus === EmbeddedSignUpFlowStatusV2.Incomplete) {\n if (handleRedirectionIfNeeded(response)) {\n return;\n }\n\n if (response.data?.additionalData?.passkeyCreationOptions) {\n const {passkeyCreationOptions}: any = response.data.additionalData;\n const effectiveExecutionIdForPasskey: any = response.executionId ?? currentFlow?.executionId;\n\n // Reset passkey processed ref to allow processing\n passkeyProcessedRef.current = false;\n\n // Set passkey state to trigger the passkey\n setPasskeyState({\n actionId: component.id || 'submit',\n creationOptions: passkeyCreationOptions,\n error: null,\n executionId: effectiveExecutionIdForPasskey,\n isActive: true,\n });\n setIsLoading(false);\n return;\n }\n setCurrentFlow(response);\n setupFormFields(response);\n\n // Display error from INCOMPLETE response\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n if (response?.error) {\n handleError(response);\n }\n }\n } catch (err) {\n handleError(err);\n onError?.(err as Error);\n } finally {\n setIsLoading(false);\n }\n };\n\n /**\n * Handle passkey registration when passkey state becomes active.\n * This effect auto-triggers the browser passkey popup and submits the result.\n */\n useEffect(() => {\n if (!passkeyState.isActive || !passkeyState.creationOptions || !passkeyState.executionId) {\n return;\n }\n\n // Prevent re-processing\n if (passkeyProcessedRef.current) {\n return;\n }\n passkeyProcessedRef.current = true;\n\n const performPasskeyRegistration = async (): Promise<void> => {\n const passkeyResponse: any = await handlePasskeyRegistration(passkeyState.creationOptions!);\n const passkeyResponseObj: any = JSON.parse(passkeyResponse);\n\n const inputs: any = {\n attestationObject: passkeyResponseObj.response.attestationObject,\n clientDataJSON: passkeyResponseObj.response.clientDataJSON,\n credentialId: passkeyResponseObj.id,\n };\n\n // After successful registration, submit the result to the server\n const payload: EmbeddedSignUpFlowRequestV2 = {\n executionId: passkeyState.executionId ?? undefined,\n inputs,\n ...(challengeTokenRef.current ? {challengeToken: challengeTokenRef.current} : {}),\n } as any;\n\n const nextResponse: any = await onSubmit!(payload);\n const processedResponse: any = normalizeFlowResponseLocal(nextResponse);\n onFlowChange?.(processedResponse);\n\n if (processedResponse.flowStatus === EmbeddedSignUpFlowStatusV2.Complete) {\n onComplete?.(processedResponse);\n } else {\n setCurrentFlow(processedResponse);\n setupFormFields(processedResponse);\n }\n };\n\n performPasskeyRegistration()\n .then(() => {\n setPasskeyState({actionId: null, creationOptions: null, error: null, executionId: null, isActive: false});\n })\n .catch((error: any) => {\n setPasskeyState((prev: any) => ({...prev, error: error as Error, isActive: false}));\n handleError(error);\n onError?.(error as Error);\n });\n }, [passkeyState.isActive, passkeyState.creationOptions, passkeyState.executionId]);\n\n const containerClasses: any = cx(\n [\n withVendorCSSClassPrefix('signup'),\n withVendorCSSClassPrefix(`signup--${size}`),\n withVendorCSSClassPrefix(`signup--${variant}`),\n ],\n className,\n );\n\n const inputClasses: any = cx(\n [\n withVendorCSSClassPrefix('signup__input'),\n size === 'small' && withVendorCSSClassPrefix('signup__input--small'),\n size === 'large' && withVendorCSSClassPrefix('signup__input--large'),\n ],\n inputClassName,\n );\n\n const buttonClasses: any = cx(\n [\n withVendorCSSClassPrefix('signup__button'),\n size === 'small' && withVendorCSSClassPrefix('signup__button--small'),\n size === 'large' && withVendorCSSClassPrefix('signup__button--large'),\n ],\n buttonClassName,\n );\n\n const errorClasses: any = cx([withVendorCSSClassPrefix('signup__error')], errorClassName);\n\n const messageClasses: any = cx([withVendorCSSClassPrefix('signup__messages')], messageClassName);\n\n /**\n * Render form components based on flow data using the factory\n */\n const renderComponents: any = useCallback(\n (components: any[]): ReactElement[] =>\n renderSignUpComponents(\n components,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n handleInputChange,\n {\n _customRenderers: customRenderers,\n _theme: theme,\n buttonClassName: buttonClasses,\n inputClassName: inputClasses,\n onInputBlur: handleInputBlur,\n onSubmit: handleSubmit,\n size,\n variant,\n },\n ),\n [\n customRenderers,\n formValues,\n touchedFields,\n formErrors,\n isFormValid,\n isLoading,\n size,\n theme,\n variant,\n inputClasses,\n buttonClasses,\n handleSubmit,\n handleInputBlur,\n ],\n );\n\n /**\n * Parse URL parameters to check for OAuth redirect state.\n */\n const getUrlParams = (): any => {\n const urlParams: any = new URL(window?.location?.href ?? '').searchParams;\n return {\n code: urlParams.get('code'),\n error: urlParams.get('error'),\n state: urlParams.get('state'),\n };\n };\n\n // Initialize the flow on component mount\n useEffect(() => {\n // Skip initialization if we're in an OAuth redirect state.\n const urlParams: any = getUrlParams();\n if (urlParams.code || urlParams.state) {\n return;\n }\n\n if (isInitialized && isStorageReady && !isFlowInitialized && !initializationAttemptedRef.current) {\n initializationAttemptedRef.current = true;\n\n (async (): Promise<void> => {\n setIsLoading(true);\n setApiError(null);\n clearMessages();\n\n try {\n const payload: any = challengeTokenRef.current ? {challengeToken: challengeTokenRef.current} : undefined;\n const rawResponse: any = await onInitialize?.(payload);\n const response: any = normalizeFlowResponseLocal(rawResponse);\n\n await setChallengeToken(response.challengeToken ?? null);\n setCurrentFlow(response);\n setIsFlowInitialized(true);\n onFlowChange?.(response);\n\n // Clean up executionId and applicationId from URL after storing in state\n if (window?.location?.href) {\n const url: URL = new URL(window.location.href);\n url.searchParams.delete('executionId');\n url.searchParams.delete('applicationId');\n window.history.replaceState({}, '', url.toString());\n }\n\n if (response.flowStatus === EmbeddedSignUpFlowStatusV2.Error) {\n handleError(response);\n onError?.(new Error(extractErrorMessage(response, t)));\n return;\n }\n\n if (response.flowStatus === EmbeddedSignUpFlowStatusV2.Complete) {\n onComplete?.(response);\n return;\n }\n\n if (response.flowStatus === EmbeddedSignUpFlowStatusV2.Incomplete) {\n setupFormFields(response);\n\n // Display error from INCOMPLETE response\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n if (response?.error) {\n handleError(response);\n }\n }\n } catch (err) {\n handleError(err);\n onError?.(err as Error);\n } finally {\n setIsLoading(false);\n }\n })();\n }\n }, [\n isInitialized,\n isStorageReady,\n isFlowInitialized,\n onInitialize,\n onComplete,\n onError,\n onFlowChange,\n setupFormFields,\n normalizeFlowResponseLocal,\n afterSignUpUrl,\n t,\n ]);\n\n // If render props are provided, use them\n if (children) {\n const renderProps: BaseSignUpRenderProps = {\n components: (currentFlow?.data as any)?.components || [],\n error: apiError,\n fieldErrors: formErrors,\n handleInputChange,\n handleSubmit,\n isLoading,\n isValid: isFormValid,\n messages: flowMessages || [],\n subtitle: flowSubtitle || t('signup.subheading'),\n title: flowTitle || t('signup.heading'),\n touched: touchedFields,\n validateForm: () => {\n const result: any = validateForm();\n return {fieldErrors: result.errors, isValid: result.isValid};\n },\n values: formValues,\n };\n\n return <div className={containerClasses}>{children(renderProps)}</div>;\n }\n\n if (!isFlowInitialized && isLoading) {\n return (\n <CardPrimitive className={cx(containerClasses, styles.card)} variant={variant}>\n <CardPrimitive.Content>\n <div className={styles.loadingContainer}>\n <Spinner size=\"medium\" />\n </div>\n </CardPrimitive.Content>\n </CardPrimitive>\n );\n }\n\n if (!currentFlow) {\n return (\n <CardPrimitive className={cx(containerClasses, styles.card)} variant={variant}>\n <CardPrimitive.Content>\n <AlertPrimitive variant=\"error\" className={errorClasses}>\n <AlertPrimitive.Title>{t('errors.heading')}</AlertPrimitive.Title>\n <AlertPrimitive.Description>{t('errors.signup.flow.initialization.failure')}</AlertPrimitive.Description>\n </AlertPrimitive>\n </CardPrimitive.Content>\n </CardPrimitive>\n );\n }\n\n // Extract heading and subheading components and filter them from the main components\n const componentsToRender: any = (currentFlow.data as any)?.components || [];\n const {title, subtitle, componentsWithoutHeadings} = getAuthComponentHeadings(\n componentsToRender,\n flowTitle,\n flowSubtitle,\n t('signup.heading'),\n t('signup.subheading'),\n );\n\n return (\n <CardPrimitive className={cx(containerClasses, styles.card)} variant={variant}>\n {(showTitle || showSubtitle) && (\n <CardPrimitive.Header className={styles.header}>\n {showTitle && (\n <CardPrimitive.Title level={2} className={styles.title}>\n {title}\n </CardPrimitive.Title>\n )}\n {showSubtitle && (\n <Typography variant=\"body1\" className={styles.subtitle}>\n {subtitle}\n </Typography>\n )}\n </CardPrimitive.Header>\n )}\n <CardPrimitive.Content>\n {externalError && (\n <div className={styles.flowMessagesContainer}>\n <AlertPrimitive variant=\"error\" className={cx(styles.flowMessageItem, messageClasses)}>\n <AlertPrimitive.Description>{externalError.message}</AlertPrimitive.Description>\n </AlertPrimitive>\n </div>\n )}\n {flowMessages && flowMessages.length > 0 && (\n <div className={styles.flowMessagesContainer}>\n {flowMessages.map((message: any, index: number) => (\n <AlertPrimitive\n key={message.id || index}\n variant={message.type?.toLowerCase() === 'error' ? 'error' : 'info'}\n className={cx(styles.flowMessageItem, messageClasses)}\n >\n <AlertPrimitive.Description>{message.message}</AlertPrimitive.Description>\n </AlertPrimitive>\n ))}\n </div>\n )}\n <div className={styles.contentContainer}>\n {componentsWithoutHeadings && componentsWithoutHeadings.length > 0 ? (\n renderComponents(componentsWithoutHeadings)\n ) : (\n <AlertPrimitive variant=\"warning\">\n <Typography variant=\"body1\">{t('errors.signup.components.not.available')}</Typography>\n </AlertPrimitive>\n )}\n </div>\n </CardPrimitive.Content>\n </CardPrimitive>\n );\n};\n\n/**\n * BaseSignUp component that provides embedded sign-up flow for ThunderIDV2.\n * This component handles both the presentation layer and sign-up flow logic.\n * It accepts API functions as props to maintain framework independence.\n */\nconst BaseSignUp: FC<BaseSignUpProps> = ({preferences, showLogo = true, ...rest}: BaseSignUpProps): ReactElement => {\n const {theme, colorScheme} = useTheme();\n const styles: any = useStyles(theme, colorScheme);\n\n const content: ReactElement = (\n <div>\n {showLogo && (\n <div className={styles.logoContainer}>\n <Logo size=\"large\" />\n </div>\n )}\n <FlowProvider>\n <BaseSignUpContent showLogo={showLogo} {...rest} />\n </FlowProvider>\n </div>\n );\n\n if (!preferences) return content;\n\n return <ComponentPreferencesContext.Provider value={preferences}>{content}</ComponentPreferencesContext.Provider>;\n};\n\nexport default BaseSignUp;\n"],"mappings":"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"}

package/dist/components/presentation/auth/SignUp/v2/SignUp.d.ts CHANGED Viewed

@@ -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

package/dist/components/presentation/auth/SignUp/v2/SignUp.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SignUp.d.ts","sourceRoot":"","sources":["../../../../../../src/components/presentation/auth/SignUp/v2/SignUp.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAQH,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD,OAAmB,EAAC,eAAe,EAAE,qBAAqB,EAAC,MAAM,cAAc,CAAC;AAGhF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;CACpD,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,~~CAsF3B~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"SignUp.d.ts","sourceRoot":"","sources":["../../../../../../src/components/presentation/auth/SignUp/v2/SignUp.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAQH,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD,OAAmB,EAAC,eAAe,EAAE,qBAAqB,EAAC,MAAM,cAAc,CAAC;AAGhF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;CACpD,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAuG3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/presentation/auth/SignUp/v2/SignUp.js ADDED Viewed

@@ -0,0 +1,77 @@
+import useThunderID_default from "../../../../../contexts/ThunderID/useThunderID.js";
+import BaseSignUp_default from "./BaseSignUp.js";
+import { EmbeddedFlowType, EmbeddedSignUpFlowTypeV2 } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/presentation/auth/SignUp/v2/SignUp.tsx
+/**
+* A styled SignUp component for ThunderIDV2 (AKA Thunder) platform that provides embedded sign-up flow with pre-built styling.
+* This component handles the API calls for sign-up and delegates UI logic to BaseSignUp.
+*/
+const SignUp = ({ className, size = "medium", afterSignUpUrl, onError, onComplete, shouldRedirectAfterSignUp = true, children,...rest }) => {
+	const { signUp, isInitialized, applicationId, scopes } = useThunderID_default();
+	/**
+	* Initialize the sign-up flow.
+	*/
+	const handleInitialize = async (payload) => {
+		const urlParams = new URL(window.location.href).searchParams;
+		const executionIdFromUrl = urlParams.get("executionId") || "";
+		const applicationIdFromUrl = urlParams.get("applicationId") ?? "";
+		const effectiveApplicationId = applicationId ?? applicationIdFromUrl;
+		const challengeToken = payload?.challengeToken;
+		let initialPayload;
+		if (executionIdFromUrl) initialPayload = {
+			executionId: executionIdFromUrl,
+			...challengeToken ? { challengeToken } : {}
+		};
+		else if (!payload || !("flowType" in payload)) initialPayload = {
+			...payload || {},
+			flowType: EmbeddedFlowType.Registration,
+			...effectiveApplicationId && { applicationId: effectiveApplicationId },
+			...scopes && { scopes }
+		};
+		else initialPayload = payload;
+		return await signUp(initialPayload);
+	};
+	/**
+	* Handle sign-up steps.
+	*/
+	const handleOnSubmit = async (payload) => await signUp(payload);
+	/**
+	* Handle successful sign-up and redirect.
+	*/
+	const handleComplete = (response) => {
+		onComplete?.(response);
+		if (!shouldRedirectAfterSignUp) return;
+		const redirectURL = (response?.data)?.["redirectURL"];
+		if (response?.type === EmbeddedSignUpFlowTypeV2.Redirection && redirectURL && !redirectURL.includes("oauth") && !redirectURL.includes("auth")) {
+			window.location.href = redirectURL;
+			return;
+		}
+		const oauthRedirectUrl = response?.redirectUrl;
+		if (oauthRedirectUrl) {
+			window.location.href = oauthRedirectUrl;
+			return;
+		}
+		if (response?.type !== EmbeddedSignUpFlowTypeV2.Redirection && afterSignUpUrl && !response?.assertion) window.location.href = afterSignUpUrl;
+	};
+	return /* @__PURE__ */ jsx(BaseSignUp_default, {
+		afterSignUpUrl,
+		onInitialize: handleInitialize,
+		onSubmit: handleOnSubmit,
+		onError,
+		onComplete: handleComplete,
+		className,
+		size,
+		isInitialized,
+		children,
+		showTitle: true,
+		showSubtitle: true,
+		...rest
+	});
+};
+var SignUp_default = SignUp;
+//#endregion
+export { SignUp_default as default };
+//# sourceMappingURL=SignUp.js.map

package/dist/components/presentation/auth/SignUp/v2/SignUp.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SignUp.js","names":["SignUp: FC<SignUpProps>","useThunderID","urlParams: URLSearchParams","executionIdFromUrl: string","applicationIdFromUrl: string","effectiveApplicationId: any","challengeToken: string | undefined","initialPayload: EmbeddedSignUpFlowRequestV2 | any","redirectURL: string | undefined","oauthRedirectUrl: any","BaseSignUp"],"sources":["../../../../../../src/components/presentation/auth/SignUp/v2/SignUp.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 {\n EmbeddedSignUpFlowRequestV2,\n EmbeddedSignUpFlowResponseV2,\n EmbeddedSignUpFlowTypeV2,\n EmbeddedFlowType,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode} from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport BaseSignUp, {BaseSignUpProps, BaseSignUpRenderProps} from './BaseSignUp';\nimport useThunderID from '../../../../../contexts/ThunderID/useThunderID';\n\n/**\n * Render props function parameters (re-exported from BaseSignUp for convenience)\n */\nexport type SignUpRenderProps = BaseSignUpRenderProps;\n\n/**\n * Props for the SignUp component.\n */\nexport type SignUpProps = BaseSignUpProps & {\n /**\n * Render props function for custom UI\n */\n children?: (props: SignUpRenderProps) => ReactNode;\n};\n\n/**\n * A styled SignUp component for ThunderIDV2 (AKA Thunder) platform that provides embedded sign-up flow with pre-built styling.\n * This component handles the API calls for sign-up and delegates UI logic to BaseSignUp.\n */\nconst SignUp: FC<SignUpProps> = ({\n className,\n size = 'medium',\n afterSignUpUrl,\n onError,\n onComplete,\n shouldRedirectAfterSignUp = true,\n children,\n ...rest\n}: SignUpProps): ReactElement => {\n const {signUp, isInitialized, applicationId, scopes} = useThunderID();\n\n /**\n * Initialize the sign-up flow.\n */\n const handleInitialize = async (payload?: EmbeddedSignUpFlowRequestV2): Promise<EmbeddedSignUpFlowResponseV2> => {\n const urlParams: URLSearchParams = new URL(window.location.href).searchParams;\n const executionIdFromUrl: string = urlParams.get('executionId') || '';\n const applicationIdFromUrl: string = urlParams.get('applicationId') ?? '';\n\n const effectiveApplicationId: any = applicationId ?? applicationIdFromUrl;\n\n const challengeToken: string | undefined = (payload as any)?.challengeToken;\n\n let initialPayload: EmbeddedSignUpFlowRequestV2 | any;\n if (executionIdFromUrl) {\n initialPayload = {\n executionId: executionIdFromUrl,\n ...(challengeToken ? {challengeToken} : {}),\n };\n } else if (!payload || !('flowType' in payload)) {\n initialPayload = {\n ...(payload || {}),\n flowType: EmbeddedFlowType.Registration,\n ...(effectiveApplicationId && {applicationId: effectiveApplicationId}),\n ...(scopes && {scopes}),\n };\n } else {\n initialPayload = payload;\n }\n\n return (await signUp(initialPayload)) as EmbeddedSignUpFlowResponseV2;\n };\n\n /**\n * Handle sign-up steps.\n */\n const handleOnSubmit = async (payload: EmbeddedSignUpFlowRequestV2): Promise<EmbeddedSignUpFlowResponseV2> =>\n (await signUp(payload)) as EmbeddedSignUpFlowResponseV2;\n\n /**\n * Handle successful sign-up and redirect.\n */\n const handleComplete = (response: EmbeddedSignUpFlowResponseV2): any => {\n onComplete?.(response);\n\n if (!shouldRedirectAfterSignUp) {\n return;\n }\n\n const redirectURL: string | undefined = (response?.data as Record<string, unknown>)?.['redirectURL'] as\n | string\n | undefined;\n\n if (\n response?.type === EmbeddedSignUpFlowTypeV2.Redirection &&\n redirectURL &&\n !redirectURL.includes('oauth') && // Not a social provider redirect\n !redirectURL.includes('auth') // Not an auth provider redirect\n ) {\n window.location.href = redirectURL;\n return;\n }\n\n const oauthRedirectUrl: any = (response as any)?.redirectUrl;\n if (oauthRedirectUrl) {\n window.location.href = oauthRedirectUrl;\n return;\n }\n\n // For non-redirection responses (regular sign-up completion), handle redirect if configured.\n // Skip when assertion is present — the SDK stored the session and the caller handled navigation.\n if (response?.type !== EmbeddedSignUpFlowTypeV2.Redirection && afterSignUpUrl && !(response as any)?.assertion) {\n window.location.href = afterSignUpUrl;\n }\n };\n\n return (\n <BaseSignUp\n afterSignUpUrl={afterSignUpUrl}\n onInitialize={handleInitialize}\n onSubmit={handleOnSubmit}\n onError={onError}\n onComplete={handleComplete}\n className={className}\n size={size}\n isInitialized={isInitialized}\n children={children}\n showTitle={true}\n showSubtitle={true}\n {...rest}\n />\n );\n};\n\nexport default SignUp;\n"],"mappings":";;;;;;;;;;AAgDA,MAAMA,UAA2B,EAC/B,WACA,OAAO,UACP,gBACA,SACA,YACA,4BAA4B,MAC5B,SACA,GAAG,WAC4B;CAC/B,MAAM,EAAC,QAAQ,eAAe,eAAe,WAAUC,sBAAc;;;;CAKrE,MAAM,mBAAmB,OAAO,YAAiF;EAC/G,MAAMC,YAA6B,IAAI,IAAI,OAAO,SAAS,KAAK,CAAC;EACjE,MAAMC,qBAA6B,UAAU,IAAI,cAAc,IAAI;EACnE,MAAMC,uBAA+B,UAAU,IAAI,gBAAgB,IAAI;EAEvE,MAAMC,yBAA8B,iBAAiB;EAErD,MAAMC,iBAAsC,SAAiB;EAE7D,IAAIC;AACJ,MAAI,mBACF,kBAAiB;GACf,aAAa;GACb,GAAI,iBAAiB,EAAC,gBAAe,GAAG,EAAE;GAC3C;WACQ,CAAC,WAAW,EAAE,cAAc,SACrC,kBAAiB;GACf,GAAI,WAAW,EAAE;GACjB,UAAU,iBAAiB;GAC3B,GAAI,0BAA0B,EAAC,eAAe,wBAAuB;GACrE,GAAI,UAAU,EAAC,QAAO;GACvB;MAED,kBAAiB;AAGnB,SAAQ,MAAM,OAAO,eAAe;;;;;CAMtC,MAAM,iBAAiB,OAAO,YAC3B,MAAM,OAAO,QAAQ;;;;CAKxB,MAAM,kBAAkB,aAAgD;AACtE,eAAa,SAAS;AAEtB,MAAI,CAAC,0BACH;EAGF,MAAMC,eAAmC,UAAU,QAAmC;AAItF,MACE,UAAU,SAAS,yBAAyB,eAC5C,eACA,CAAC,YAAY,SAAS,QAAQ,IAC9B,CAAC,YAAY,SAAS,OAAO,EAC7B;AACA,UAAO,SAAS,OAAO;AACvB;;EAGF,MAAMC,mBAAyB,UAAkB;AACjD,MAAI,kBAAkB;AACpB,UAAO,SAAS,OAAO;AACvB;;AAKF,MAAI,UAAU,SAAS,yBAAyB,eAAe,kBAAkB,CAAE,UAAkB,UACnG,QAAO,SAAS,OAAO;;AAI3B,QACE,oBAACC;EACiB;EAChB,cAAc;EACd,UAAU;EACD;EACT,YAAY;EACD;EACL;EACS;EACL;EACV,WAAW;EACX,cAAc;EACd,GAAI;GACJ;;AAIN,qBAAe"}

package/dist/components/primitives/Alert/Alert.js ADDED Viewed

@@ -0,0 +1,102 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Typography_default from "../Typography/Typography.js";
+import Alert_styles_default from "./Alert.styles.js";
+import CircleAlert_default from "../Icons/CircleAlert.js";
+import CircleCheck_default from "../Icons/CircleCheck.js";
+import Info_default from "../Icons/Info.js";
+import TriangleAlert_default from "../Icons/TriangleAlert.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { createContext, forwardRef, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+//#region src/components/primitives/Alert/Alert.tsx
+const getDefaultIcon = (variant) => {
+	switch (variant) {
+		case "success": return CircleCheck_default;
+		case "error": return CircleAlert_default;
+		case "warning": return TriangleAlert_default;
+		case "info": return Info_default;
+		default: return Info_default;
+	}
+};
+const AlertVariantContext = createContext("info");
+const useAlertVariant = () => useContext(AlertVariantContext);
+/**
+* Alert component that displays important information with different severity levels.
+*
+* @example
+* ```tsx
+* <Alert variant="success" showIcon>
+*   <Alert.Title>Success! Your changes have been saved</Alert.Title>
+*   <Alert.Description>
+*     This is an alert with icon, title and description.
+*   </Alert.Description>
+* </Alert>
+* ```
+*/
+const Alert = forwardRef(({ variant = "info", showIcon = true, children, className, style,...rest }, ref) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Alert_styles_default(theme, colorScheme, variant);
+	const IconComponent = getDefaultIcon(variant);
+	return /* @__PURE__ */ jsx(AlertVariantContext.Provider, {
+		value: variant,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			role: "alert",
+			style,
+			className: cx(withVendorCSSClassPrefix(bem("alert")), styles["alert"], styles["variant"], withVendorCSSClassPrefix(bem("alert", null, variant)), className),
+			...rest,
+			children: [showIcon && /* @__PURE__ */ jsx("div", {
+				className: cx(withVendorCSSClassPrefix(bem("alert", "icon")), styles["icon"]),
+				children: /* @__PURE__ */ jsx(IconComponent, {})
+			}), /* @__PURE__ */ jsx("div", {
+				className: cx(withVendorCSSClassPrefix(bem("alert", "content")), styles["content"]),
+				children
+			})]
+		})
+	});
+});
+/**
+* Alert title component.
+*/
+const AlertTitle = ({ children, className, style,...rest }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Alert_styles_default(theme, colorScheme, useAlertVariant());
+	const { color,...filteredRest } = rest;
+	return /* @__PURE__ */ jsx(Typography_default, {
+		component: "h3",
+		variant: "h6",
+		fontWeight: 600,
+		style,
+		className: cx(withVendorCSSClassPrefix(bem("alert", "title")), styles["title"], className),
+		...filteredRest,
+		children
+	});
+};
+/**
+* Alert description component.
+*/
+const AlertDescription = ({ children, className, style,...rest }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Alert_styles_default(theme, colorScheme, useAlertVariant());
+	const { color,...filteredRest } = rest;
+	return /* @__PURE__ */ jsx(Typography_default, {
+		component: "p",
+		variant: "body2",
+		style,
+		className: cx(withVendorCSSClassPrefix(bem("alert", "description")), styles["description"], className),
+		...filteredRest,
+		children
+	});
+};
+Alert.displayName = "Alert";
+AlertTitle.displayName = "Alert.Title";
+AlertDescription.displayName = "Alert.Description";
+Alert.Title = AlertTitle;
+Alert.Description = AlertDescription;
+var Alert_default = Alert;
+//#endregion
+export { Alert_default as default };
+//# sourceMappingURL=Alert.js.map

package/dist/components/primitives/Alert/Alert.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Alert.js","names":["CircleCheck","CircleAlert","TriangleAlert","Info","AlertVariantContext: Context<AlertVariant>","Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>","useTheme","styles: ReturnType<typeof useStyles>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","AlertTitle: FC<AlertTitleProps>","Typography","AlertDescription: FC<AlertDescriptionProps>"],"sources":["../../../../src/components/primitives/Alert/Alert.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 {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n Context,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n Ref,\n RefAttributes,\n ForwardRefExoticComponent,\n createContext,\n useContext,\n FC,\n SVGProps,\n} from 'react';\nimport useStyles from './Alert.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport CircleAlert from '../Icons/CircleAlert';\nimport CircleCheck from '../Icons/CircleCheck';\nimport Info from '../Icons/Info';\nimport TriangleAlert from '../Icons/TriangleAlert';\nimport Typography from '../Typography/Typography';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\nexport interface AlertProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Alert content\n */\n children?: ReactNode;\n /**\n * Whether to show the default icon for the variant\n */\n showIcon?: boolean;\n /**\n * The visual variant of the alert that determines color scheme and icon\n */\n variant?: AlertVariant;\n}\n\nexport interface AlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n /**\n * Title content\n */\n children?: ReactNode;\n}\n\nexport interface AlertDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n /**\n * Description content\n */\n children?: ReactNode;\n}\n\nconst getDefaultIcon = (variant: AlertVariant): FC<SVGProps<SVGSVGElement>> => {\n switch (variant) {\n case 'success':\n return CircleCheck;\n case 'error':\n return CircleAlert;\n case 'warning':\n return TriangleAlert;\n case 'info':\n return Info;\n default:\n return Info;\n }\n};\n\nconst AlertVariantContext: Context<AlertVariant> = createContext<AlertVariant>('info');\n\nexport const useAlertVariant = (): AlertVariant => useContext(AlertVariantContext);\n\n/**\n * Alert component that displays important information with different severity levels.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\" showIcon>\n * <Alert.Title>Success! Your changes have been saved</Alert.Title>\n * <Alert.Description>\n * This is an alert with icon, title and description.\n * </Alert.Description>\n * </Alert>\n * ```\n */\nconst Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> = forwardRef<\n HTMLDivElement,\n AlertProps\n>(({variant = 'info', showIcon = true, children, className, style, ...rest}: AlertProps, ref: Ref<HTMLDivElement>) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n const IconComponent: FC<SVGProps<SVGSVGElement>> = getDefaultIcon(variant);\n\n return (\n <AlertVariantContext.Provider value={variant}>\n <div\n ref={ref}\n role=\"alert\"\n style={style}\n className={cx(\n withVendorCSSClassPrefix(bem('alert')),\n styles['alert'],\n styles['variant'],\n withVendorCSSClassPrefix(bem('alert', null, variant)),\n className,\n )}\n {...rest}\n >\n {showIcon && (\n <div className={cx(withVendorCSSClassPrefix(bem('alert', 'icon')), styles['icon'])}>\n <IconComponent />\n </div>\n )}\n <div className={cx(withVendorCSSClassPrefix(bem('alert', 'content')), styles['content'])}>{children}</div>\n </div>\n </AlertVariantContext.Provider>\n );\n});\n\n/**\n * Alert title component.\n */\nconst AlertTitle: FC<AlertTitleProps> = ({children, className, style, ...rest}: AlertTitleProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const variant: AlertVariant = useAlertVariant();\n const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n\n const {color, ...filteredRest} = rest;\n\n return (\n <Typography\n component=\"h3\"\n variant=\"h6\"\n fontWeight={600}\n style={style}\n className={cx(withVendorCSSClassPrefix(bem('alert', 'title')), styles['title'], className)}\n {...filteredRest}\n >\n {children}\n </Typography>\n );\n};\n\n/**\n * Alert description component.\n */\nconst AlertDescription: FC<AlertDescriptionProps> = ({children, className, style, ...rest}: AlertDescriptionProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const variant: AlertVariant = useAlertVariant();\n const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n\n const {color, ...filteredRest} = rest;\n\n return (\n <Typography\n component=\"p\"\n variant=\"body2\"\n style={style}\n className={cx(withVendorCSSClassPrefix(bem('alert', 'description')), styles['description'], className)}\n {...filteredRest}\n >\n {children}\n </Typography>\n );\n};\n\nAlert.displayName = 'Alert';\nAlertTitle.displayName = 'Alert.Title';\nAlertDescription.displayName = 'Alert.Description';\n\n(Alert as any).Title = AlertTitle;\n(Alert as any).Description = AlertDescription;\n\nexport interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {\n Description: typeof AlertDescription;\n Title: typeof AlertTitle;\n}\n\nexport default Alert as AlertComponent;\nexport {Alert, AlertTitle, AlertDescription};\n"],"mappings":";;;;;;;;;;;;;AAwEA,MAAM,kBAAkB,YAAuD;AAC7E,SAAQ,SAAR;EACE,KAAK,UACH,QAAOA;EACT,KAAK,QACH,QAAOC;EACT,KAAK,UACH,QAAOC;EACT,KAAK,OACH,QAAOC;EACT,QACE,QAAOA;;;AAIb,MAAMC,sBAA6C,cAA4B,OAAO;AAEtF,MAAa,wBAAsC,WAAW,oBAAoB;;;;;;;;;;;;;;AAelF,MAAMC,QAA+E,YAGlF,EAAC,UAAU,QAAQ,WAAW,MAAM,UAAU,WAAW,MAAO,GAAG,QAAmB,QAA6B;CACpH,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAuCC,qBAAU,OAAO,aAAa,QAAQ;CACnF,MAAMC,gBAA6C,eAAe,QAAQ;AAE1E,QACE,oBAAC,oBAAoB;EAAS,OAAO;YACnC,qBAAC;GACM;GACL,MAAK;GACE;GACP,WAAW,GACT,yBAAyB,IAAI,QAAQ,CAAC,EACtC,OAAO,UACP,OAAO,YACP,yBAAyB,IAAI,SAAS,MAAM,QAAQ,CAAC,EACrD,UACD;GACD,GAAI;cAEH,YACC,oBAAC;IAAI,WAAW,GAAG,yBAAyB,IAAI,SAAS,OAAO,CAAC,EAAE,OAAO,QAAQ;cAChF,oBAAC,kBAAgB;KACb,EAER,oBAAC;IAAI,WAAW,GAAG,yBAAyB,IAAI,SAAS,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAe;IACtG;GACuB;EAEjC;;;;AAKF,MAAMC,cAAmC,EAAC,UAAU,WAAW,MAAO,GAAG,WAA2B;CAClG,MAAM,EAAC,OAAO,gBAA4CJ,kBAAU;CAEpE,MAAMC,SAAuCC,qBAAU,OAAO,aADhC,iBAAiB,CACoC;CAEnF,MAAM,EAAC,MAAO,GAAG,iBAAgB;AAEjC,QACE,oBAACG;EACC,WAAU;EACV,SAAQ;EACR,YAAY;EACL;EACP,WAAW,GAAG,yBAAyB,IAAI,SAAS,QAAQ,CAAC,EAAE,OAAO,UAAU,UAAU;EAC1F,GAAI;EAEH;GACU;;;;;AAOjB,MAAMC,oBAA+C,EAAC,UAAU,WAAW,MAAO,GAAG,WAAiC;CACpH,MAAM,EAAC,OAAO,gBAA4CN,kBAAU;CAEpE,MAAMC,SAAuCC,qBAAU,OAAO,aADhC,iBAAiB,CACoC;CAEnF,MAAM,EAAC,MAAO,GAAG,iBAAgB;AAEjC,QACE,oBAACG;EACC,WAAU;EACV,SAAQ;EACD;EACP,WAAW,GAAG,yBAAyB,IAAI,SAAS,cAAc,CAAC,EAAE,OAAO,gBAAgB,UAAU;EACtG,GAAI;EAEH;GACU;;AAIjB,MAAM,cAAc;AACpB,WAAW,cAAc;AACzB,iBAAiB,cAAc;AAE/B,AAAC,MAAc,QAAQ;AACvB,AAAC,MAAc,cAAc;AAO7B,oBAAe"}

package/dist/components/primitives/Alert/Alert.styles.js ADDED Viewed

@@ -0,0 +1,86 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+//#region src/components/primitives/Alert/Alert.styles.ts
+/**
+* Creates styles for the Alert component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param variant - The alert variant
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, variant) => useMemo(() => {
+	const baseAlert = css`
+      padding: calc(${theme.vars.spacing.unit} * 2);
+      border-radius: ${theme.vars.borderRadius.medium};
+      border: 1px solid;
+      font-family: ${theme.vars.typography.fontFamily};
+      display: flex;
+      gap: calc(${theme.vars.spacing.unit} * 1.5);
+      align-items: flex-start;
+    `;
+	const variantStyles = {
+		error: css`
+        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, white);
+        border-color: ${theme.vars.colors.error.main};
+        color: ${theme.vars.colors.error.main};
+      `,
+		info: css`
+        background-color: color-mix(in srgb, ${theme.vars.colors.info.main} 20%, white);
+        border-color: ${theme.vars.colors.info.main};
+        color: ${theme.vars.colors.info.main};
+      `,
+		success: css`
+        background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, white);
+        border-color: ${theme.vars.colors.success.main};
+        color: ${theme.vars.colors.success.main};
+      `,
+		warning: css`
+        background-color: color-mix(in srgb, ${theme.vars.colors.warning.main} 20%, white);
+        border-color: ${theme.vars.colors.warning.main};
+        color: ${theme.vars.colors.warning.main};
+      `
+	};
+	const iconStyles = css`
+      flex-shrink: 0;
+      margin-top: calc(${theme.vars.spacing.unit} * 0.25);
+      width: calc(${theme.vars.spacing.unit} * 2.5);
+      height: calc(${theme.vars.spacing.unit} * 2.5);
+      color: ${theme.vars.colors[variant]?.contrastText};
+    `;
+	const contentStyles = css`
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: ${theme.vars.spacing.unit};
+    `;
+	const titleStyles = css`
+      margin: 0;
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      font-weight: 600;
+      line-height: 1.4;
+      color: ${theme.vars.colors[variant]?.contrastText};
+    `;
+	return {
+		alert: baseAlert,
+		content: contentStyles,
+		description: css`
+      margin: 0;
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      line-height: 1.4;
+      color: ${theme.vars.colors.text.secondary};
+    `,
+		icon: iconStyles,
+		title: titleStyles,
+		variant: variantStyles[variant]
+	};
+}, [
+	theme,
+	colorScheme,
+	variant
+]);
+var Alert_styles_default = useStyles;
+//#endregion
+export { Alert_styles_default as default };
+//# sourceMappingURL=Alert.styles.js.map

package/dist/components/primitives/Alert/Alert.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Alert.styles.js","names":["baseAlert: string","variantStyles: Record<string, string>","iconStyles: string","contentStyles: string","titleStyles: string"],"sources":["../../../../src/components/primitives/Alert/Alert.styles.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 {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\n/**\n * Creates styles for the Alert component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param variant - The alert variant\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, variant: AlertVariant): Record<string, string> =>\n useMemo(() => {\n const baseAlert: string = css`\n padding: calc(${theme.vars.spacing.unit} * 2);\n border-radius: ${theme.vars.borderRadius.medium};\n border: 1px solid;\n font-family: ${theme.vars.typography.fontFamily};\n display: flex;\n gap: calc(${theme.vars.spacing.unit} * 1.5);\n align-items: flex-start;\n `;\n\n const variantStyles: Record<string, string> = {\n error: css`\n background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, white);\n border-color: ${theme.vars.colors.error.main};\n color: ${theme.vars.colors.error.main};\n `,\n info: css`\n background-color: color-mix(in srgb, ${theme.vars.colors.info.main} 20%, white);\n border-color: ${theme.vars.colors.info.main};\n color: ${theme.vars.colors.info.main};\n `,\n success: css`\n background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, white);\n border-color: ${theme.vars.colors.success.main};\n color: ${theme.vars.colors.success.main};\n `,\n warning: css`\n background-color: color-mix(in srgb, ${theme.vars.colors.warning.main} 20%, white);\n border-color: ${theme.vars.colors.warning.main};\n color: ${theme.vars.colors.warning.main};\n `,\n };\n\n const iconStyles: string = css`\n flex-shrink: 0;\n margin-top: calc(${theme.vars.spacing.unit} * 0.25);\n width: calc(${theme.vars.spacing.unit} * 2.5);\n height: calc(${theme.vars.spacing.unit} * 2.5);\n color: ${theme.vars.colors[variant]?.contrastText};\n `;\n\n const contentStyles: string = css`\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ${theme.vars.spacing.unit};\n `;\n\n const titleStyles: string = css`\n margin: 0;\n font-size: ${theme.vars.typography.fontSizes.sm};\n font-weight: 600;\n line-height: 1.4;\n color: ${theme.vars.colors[variant]?.contrastText};\n `;\n\n const descriptionStyles: string = css`\n margin: 0;\n font-size: ${theme.vars.typography.fontSizes.sm};\n line-height: 1.4;\n color: ${theme.vars.colors.text.secondary};\n `;\n\n return {\n alert: baseAlert,\n content: contentStyles,\n description: descriptionStyles,\n icon: iconStyles,\n title: titleStyles,\n variant: variantStyles[variant],\n };\n }, [theme, colorScheme, variant]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AA+BA,MAAM,aAAa,OAAc,aAAqB,YACpD,cAAc;CACZ,MAAMA,YAAoB,GAAG;sBACX,MAAM,KAAK,QAAQ,KAAK;uBACvB,MAAM,KAAK,aAAa,OAAO;;qBAEjC,MAAM,KAAK,WAAW,WAAW;;kBAEpC,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,gBAAwC;EAC5C,OAAO,GAAG;+CAC+B,MAAM,KAAK,OAAO,MAAM,KAAK;wBACpD,MAAM,KAAK,OAAO,MAAM,KAAK;iBACpC,MAAM,KAAK,OAAO,MAAM,KAAK;;EAExC,MAAM,GAAG;+CACgC,MAAM,KAAK,OAAO,KAAK,KAAK;wBACnD,MAAM,KAAK,OAAO,KAAK,KAAK;iBACnC,MAAM,KAAK,OAAO,KAAK,KAAK;;EAEvC,SAAS,GAAG;+CAC6B,MAAM,KAAK,OAAO,QAAQ,KAAK;wBACtD,MAAM,KAAK,OAAO,QAAQ,KAAK;iBACtC,MAAM,KAAK,OAAO,QAAQ,KAAK;;EAE1C,SAAS,GAAG;+CAC6B,MAAM,KAAK,OAAO,QAAQ,KAAK;wBACtD,MAAM,KAAK,OAAO,QAAQ,KAAK;iBACtC,MAAM,KAAK,OAAO,QAAQ,KAAK;;EAE3C;CAED,MAAMC,aAAqB,GAAG;;yBAET,MAAM,KAAK,QAAQ,KAAK;oBAC7B,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;eAC9B,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,GAAG;;;;aAIxB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,cAAsB,GAAG;;mBAEhB,MAAM,KAAK,WAAW,UAAU,GAAG;;;eAGvC,MAAM,KAAK,OAAO,UAAU,aAAa;;AAUpD,QAAO;EACL,OAAO;EACP,SAAS;EACT,aAVgC,GAAG;;mBAEtB,MAAM,KAAK,WAAW,UAAU,GAAG;;eAEvC,MAAM,KAAK,OAAO,KAAK,UAAU;;EAO1C,MAAM;EACN,OAAO;EACP,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAQ,CAAC;AAEnC,2BAAe"}

package/dist/components/primitives/Avatar/Avatar.js ADDED Viewed

@@ -0,0 +1,60 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Avatar_styles_default from "./Avatar.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+//#region src/components/primitives/Avatar/Avatar.tsx
+const Avatar = ({ alt = "User avatar", background = "random", className = "", imageUrl, name, size = 64, variant = "circular", isLoading = false }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const generateBackgroundColor = (inputString) => {
+		const hash = inputString.split("").reduce((acc, char) => {
+			const charCode = char.charCodeAt(0);
+			return (acc << 5) - acc + charCode & 4294967295;
+		}, 0);
+		const seed = Math.abs(hash);
+		const generateColor = (offset) => {
+			const hue1 = (seed + offset) % 360;
+			const hue2 = (hue1 + 60 + seed % 120) % 360;
+			const saturation = 70 + seed % 20;
+			return `hsl(${hue1}, ${saturation}%, ${55 + seed % 15}%), hsl(${hue2}, ${saturation}%, ${60 + (seed + offset) % 15}%)`;
+		};
+		return `linear-gradient(${45 + seed % 91}deg, ${generateColor(seed)})`;
+	};
+	const styles = Avatar_styles_default(theme, colorScheme, size, variant, useMemo(() => {
+		if (!name || imageUrl) return;
+		if (background === "random") return generateBackgroundColor(name);
+		if (background === "none") return;
+		return background;
+	}, [
+		background,
+		name,
+		imageUrl
+	]));
+	const isDefaultState = !imageUrl && !name && !isLoading;
+	const getInitials = (fullName) => fullName.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
+	const renderContent = () => {
+		if (imageUrl) return /* @__PURE__ */ jsx("img", {
+			src: imageUrl,
+			alt,
+			className: cx(withVendorCSSClassPrefix(bem("avatar", "image")), styles["image"])
+		});
+		if (name) return getInitials(name);
+		if (isLoading) return /* @__PURE__ */ jsx("div", { className: cx(withVendorCSSClassPrefix(bem("avatar", "skeleton")), styles["skeleton"]) });
+		return /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 640 640",
+			className: cx(withVendorCSSClassPrefix(bem("avatar", "icon")), styles["icon"]),
+			children: /* @__PURE__ */ jsx("path", { d: "M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z" })
+		});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(withVendorCSSClassPrefix(bem("avatar")), styles["avatar"], styles["variant"], withVendorCSSClassPrefix(bem("avatar", null, variant)), isDefaultState && withVendorCSSClassPrefix(bem("avatar", "default")), className),
+		children: renderContent()
+	});
+};
+//#endregion
+export { Avatar };
+//# sourceMappingURL=Avatar.js.map

package/dist/components/primitives/Avatar/Avatar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Avatar.js","names":["Avatar: FC<AvatarProps>","useTheme","hash: number","charCode: number","seed: number","hue1: number","hue2: number","saturation: number","styles: ReturnType<typeof useStyles>","useStyles","isDefaultState: boolean"],"sources":["../../../../src/components/primitives/Avatar/Avatar.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 {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport useStyles from './Avatar.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface AvatarProps {\n /**\n * Alternative text for the avatar image\n */\n alt?: string;\n /**\n * Background generation strategy\n * - 'random': Generate background color based on ASCII values of the name\n * - 'none': Use default theme background\n * - string: Use custom background color\n * @default 'random'\n */\n background?: 'random' | 'none' | string;\n /**\n * Optional className for the avatar\n */\n className?: string;\n /**\n * The URL of the avatar image\n */\n imageUrl?: string;\n /**\n * Loading state of the avatar\n */\n isLoading?: boolean;\n /**\n * The name to use for generating initials when no image is provided\n */\n name?: string;\n /**\n * The size of the avatar in pixels\n */\n size?: number;\n /**\n * The variant of the avatar shape\n * @default 'circular'\n */\n variant?: 'circular' | 'square';\n}\n\nexport const Avatar: FC<AvatarProps> = ({\n alt = 'User avatar',\n background = 'random',\n className = '',\n imageUrl,\n name,\n size = 64,\n variant = 'circular',\n isLoading = false,\n}: AvatarProps): JSX.Element => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n\n const generateBackgroundColor = (inputString: string): string => {\n const hash: number = inputString.split('').reduce((acc: number, char: string) => {\n const charCode: number = char.charCodeAt(0);\n\n return ((acc << 5) - acc + charCode) & 0xffffffff;\n }, 0);\n\n const seed: number = Math.abs(hash);\n\n const generateColor = (offset: number): string => {\n const hue1: number = (seed + offset) % 360;\n const hue2: number = (hue1 + 60 + (seed % 120)) % 360;\n\n const saturation: number = 70 + (seed % 20);\n const lightness1: number = 55 + (seed % 15);\n const lightness2: number = 60 + ((seed + offset) % 15);\n\n return `hsl(${hue1}, ${saturation}%, ${lightness1}%), hsl(${hue2}, ${saturation}%, ${lightness2}%)`;\n };\n\n const angle: number = 45 + (seed % 91);\n\n const colors: string = generateColor(seed);\n return `linear-gradient(${angle}deg, ${colors})`;\n };\n\n const backgroundColor: string | undefined = useMemo(() => {\n if (!name || imageUrl) {\n return undefined;\n }\n\n if (background === 'random') {\n return generateBackgroundColor(name);\n }\n\n if (background === 'none') {\n return undefined;\n }\n\n return background;\n }, [background, name, imageUrl]);\n\n const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, size, variant, backgroundColor);\n\n // Determine if we're in the default state (no image, no name, not loading)\n const isDefaultState: boolean = !imageUrl && !name && !isLoading;\n\n const getInitials = (fullName: string): string =>\n fullName\n .split(' ')\n .map((part: string) => part[0])\n .slice(0, 2)\n .join('')\n .toUpperCase();\n\n const renderContent = (): JSX.Element | string => {\n if (imageUrl) {\n return (\n <img\n src={imageUrl}\n alt={alt}\n className={cx(withVendorCSSClassPrefix(bem('avatar', 'image')), styles['image'])}\n />\n );\n }\n\n if (name) {\n return getInitials(name);\n }\n\n if (isLoading) {\n return <div className={cx(withVendorCSSClassPrefix(bem('avatar', 'skeleton')), styles['skeleton'])} />;\n }\n\n // Default user icon\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 640 640\"\n className={cx(withVendorCSSClassPrefix(bem('avatar', 'icon')), styles['icon'])}\n >\n <path d=\"M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z\" />\n </svg>\n );\n };\n\n return (\n <div\n className={cx(\n withVendorCSSClassPrefix(bem('avatar')),\n styles['avatar'],\n styles['variant'],\n withVendorCSSClassPrefix(bem('avatar', null, variant)),\n isDefaultState && withVendorCSSClassPrefix(bem('avatar', 'default')),\n className,\n )}\n >\n {renderContent()}\n </div>\n );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;AAgEA,MAAaA,UAA2B,EACtC,MAAM,eACN,aAAa,UACb,YAAY,IACZ,UACA,MACA,OAAO,IACP,UAAU,YACV,YAAY,YACkB;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CAEpE,MAAM,2BAA2B,gBAAgC;EAC/D,MAAMC,OAAe,YAAY,MAAM,GAAG,CAAC,QAAQ,KAAa,SAAiB;GAC/E,MAAMC,WAAmB,KAAK,WAAW,EAAE;AAE3C,WAAS,OAAO,KAAK,MAAM,WAAY;KACtC,EAAE;EAEL,MAAMC,OAAe,KAAK,IAAI,KAAK;EAEnC,MAAM,iBAAiB,WAA2B;GAChD,MAAMC,QAAgB,OAAO,UAAU;GACvC,MAAMC,QAAgB,OAAO,KAAM,OAAO,OAAQ;GAElD,MAAMC,aAAqB,KAAM,OAAO;AAIxC,UAAO,OAAO,KAAK,IAAI,WAAW,KAHP,KAAM,OAAO,GAGU,UAAU,KAAK,IAAI,WAAW,KAFrD,MAAO,OAAO,UAAU,GAE6C;;AAMlG,SAAO,mBAHe,KAAM,OAAO,GAGH,OADT,cAAc,KAAK,CACI;;CAmBhD,MAAMC,SAAuCC,sBAAU,OAAO,aAAa,MAAM,SAhBrC,cAAc;AACxD,MAAI,CAAC,QAAQ,SACX;AAGF,MAAI,eAAe,SACjB,QAAO,wBAAwB,KAAK;AAGtC,MAAI,eAAe,OACjB;AAGF,SAAO;IACN;EAAC;EAAY;EAAM;EAAS,CAAC,CAE0E;CAG1G,MAAMC,iBAA0B,CAAC,YAAY,CAAC,QAAQ,CAAC;CAEvD,MAAM,eAAe,aACnB,SACG,MAAM,IAAI,CACV,KAAK,SAAiB,KAAK,GAAG,CAC9B,MAAM,GAAG,EAAE,CACX,KAAK,GAAG,CACR,aAAa;CAElB,MAAM,sBAA4C;AAChD,MAAI,SACF,QACE,oBAAC;GACC,KAAK;GACA;GACL,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;IAChF;AAIN,MAAI,KACF,QAAO,YAAY,KAAK;AAG1B,MAAI,UACF,QAAO,oBAAC,SAAI,WAAW,GAAG,yBAAyB,IAAI,UAAU,WAAW,CAAC,EAAE,OAAO,YAAY,GAAI;AAIxG,SACE,oBAAC;GACC,OAAM;GACN,SAAQ;GACR,WAAW,GAAG,yBAAyB,IAAI,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;aAE9E,oBAAC,UAAK,GAAE,ygBAAygB;IAC7gB;;AAIV,QACE,oBAAC;EACC,WAAW,GACT,yBAAyB,IAAI,SAAS,CAAC,EACvC,OAAO,WACP,OAAO,YACP,yBAAyB,IAAI,UAAU,MAAM,QAAQ,CAAC,EACtD,kBAAkB,yBAAyB,IAAI,UAAU,UAAU,CAAC,EACpE,UACD;YAEA,eAAe;GACZ"}

package/dist/components/primitives/Avatar/Avatar.styles.js ADDED Viewed

@@ -0,0 +1,84 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+//#region src/components/primitives/Avatar/Avatar.styles.ts
+/**
+* Creates styles for the Avatar component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param size - The size of the avatar in pixels
+* @param variant - The avatar variant
+* @param backgroundColor - The background color for the avatar
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, size, variant, backgroundColor) => useMemo(() => {
+	const baseAvatar = css`
+      align-items: center;
+      background: ${backgroundColor || theme.vars.colors.background.surface};
+      border: ${backgroundColor ? "none" : `1px solid ${theme.vars.colors.border}`};
+      border-radius: ${variant === "circular" ? "50%" : "8px"};
+      color: ${backgroundColor ? "#ffffff" : theme.vars.colors.text.primary};
+      display: flex;
+      font-size: ${size * .4}px;
+      font-family: ${theme.vars.typography.fontFamily};
+      font-weight: 600;
+      height: ${size}px;
+      justify-content: center;
+      overflow: hidden;
+      text-shadow: ${backgroundColor ? "0 1px 2px rgba(0, 0, 0, 0.1)" : "none"};
+      width: ${size}px;
+    `;
+	const variantStyles = {
+		circular: css`
+        border-radius: 50%;
+      `,
+		square: css`
+        border-radius: 8px;
+      `
+	};
+	const imageStyles = css`
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    `;
+	const skeletonStyles = css`
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+      background-size: 200% 100%;
+      animation: skeleton-loading 1.5s infinite;
+      border-radius: ${variant === "circular" ? "50%" : "8px"};
+      @keyframes skeleton-loading {
+        0% {
+          background-position: -200% 0;
+        }
+        100% {
+          background-position: 200% 0;
+        }
+      }
+    `;
+	return {
+		avatar: baseAvatar,
+		icon: css`
+      width: 60%;
+      height: 60%;
+      fill: ${backgroundColor ? "#ffffff" : theme.vars.colors.text.secondary};
+      opacity: 0.8;
+    `,
+		image: imageStyles,
+		skeleton: skeletonStyles,
+		variant: variantStyles[variant]
+	};
+}, [
+	theme,
+	colorScheme,
+	size,
+	variant,
+	backgroundColor
+]);
+var Avatar_styles_default = useStyles;
+//#endregion
+export { Avatar_styles_default as default };
+//# sourceMappingURL=Avatar.styles.js.map