@incodetech/web 0.0.0-dev-20260608-c8c427ca → 0.0.0-dev-20260609-11ba3e8a

package/dist/phone/phone.es.js

@@ -1,115 +1,242 @@
-import { n as e } from "../i18n-Kzzvkz94.js";
-import { h as t, v as n } from "../vendor-preact-D6SntenC.js";
-import { a as r, c as i, o as a } from "../hooks-MxHtZWTS.js";
-import { t as o } from "../incodeComponent-BoFhgK7G.js";
-import { r as s } from "../loadingIcon-BN5YRQUb.js";
-import { t as c } from "../page-DA3R7q0J.js";
-import { t as l } from "../button-DcCUEn2n.js";
-import { t as u } from "../otpInput-C4pk4BJU.js";
-import { t as d } from "../checkbox-DCCzBAuF.js";
-import { t as f } from "../phoneInputComposed-CjAxk2Gj.js";
-import { t as p } from "../incodeModule-BiCoAJ5k.js";
-import { createPhoneManager as m } from "@incodetech/core/phone";
+import { n as useTranslation } from "../i18n-gTHArCl9.js";
+import { h as q, v as u } from "../vendor-preact-BH7vOa2r.js";
+import { a as isTerminalModuleState, c as useManager, o as useModuleTerminalCallbacks } from "../hooks-BtgmGvba.js";
+import { t as IncodeComponent } from "../incodeComponent-CDJxFZvS.js";
+import { r as Spacer } from "../loadingIcon-DN62ugKs.js";
+import { t as Page } from "../page-BZ-0eNWq.js";
+import { t as Button } from "../button-B-qlr4iI.js";
+import { t as OtpInput } from "../otpInput-2IQ-JCK8.js";
+import { t as Checkbox } from "../checkbox-CTPETqo5.js";
+import { t as PhoneInputComposed } from "../phoneInputComposed-D_IabWKJ.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-DkA_yd0X.js";
+import { createPhoneManager } from "@incodetech/core/phone";
 //#region src/modules/phone/phone.tsx
-function h(e) {
-	return e === "invalidPhone" ? "phone.invalidPhone" : e === "serverError" ? "phone.serverError" : e;
+/**
+* @module @incodetech/ui/phone
+*
+* Phone verification UI component for the Incode Web SDK.
+* Provides a complete, ready-to-use phone verification experience
+* with country code selection and OTP input.
+*
+* ## UI Usage
+*
+* The Phone component can be used as a React/Preact component or as a
+* Web Component (`<incode-phone>`).
+*
+* @example React/Preact component usage
+* ```tsx
+* import { Phone } from '@incodetech/ui/phone';
+* import { setup } from '@incodetech/core';
+*
+* // Configure the SDK first
+* setup({ apiURL: 'https://api.example.com', token: 'your-token' });
+*
+* function App() {
+*   const config = {
+*     otpVerification: true,
+*     otpExpirationInMinutes: 5,
+*     prefill: false,
+*   };
+*
+*   return (
+*     <Phone
+*       config={config}
+*       onFinish={() => console.log('Phone verified!')}
+*       onError={(error) => console.error('Error:', error)}
+*     />
+*   );
+* }
+* ```
+*
+* @example Web Component usage
+* ```html
+* <!-- Include the script -->
+* <script type="module">
+*   import '@incodetech/ui/phone';
+*   import { setup } from '@incodetech/core';
+*
+*   setup({ apiURL: 'https://api.example.com', token: 'your-token' });
+*
+*   const phone = document.querySelector('incode-phone');
+*   phone.config = {
+*     otpVerification: true,
+*     otpExpirationInMinutes: 5,
+*     prefill: false,
+*   };
+*   phone.onFinish = () => console.log('Phone verified!');
+*   phone.onError = (error) => console.error('Error:', error);
+* <\/script>
+*
+* <incode-phone></incode-phone>
+* ```
+*
+* ## Styling
+*
+* The component uses CSS custom properties (variables) for theming.
+* Override these variables to customize the appearance:
+*
+* ```css
+* :root {
+*   --button-primary-surface-default: #0066cc;
+*   --input-border-default: #cccccc;
+*   --text-title: #333333;
+* }
+* ```
+*
+* ## Headless Alternative
+*
+* For complete control over the UI, use the headless `createPhoneManager`
+* from `@incodetech/core/phone` instead. See the core module documentation.
+*/
+function getPhoneErrorTranslationKey(error) {
+	if (error === "invalidPhone") return "phone.invalidPhone";
+	if (error === "serverError") return "phone.serverError";
+	return error;
 }
-function g(e) {
-	return e === "serverError" ? "phone.serverError" : e;
+function getOtpErrorTranslationKey(error) {
+	if (error === "serverError") return "phone.serverError";
+	return error;
 }
-var _ = ({ config: o, manager: p, onFinish: _, onError: v }) => {
-	let { t: y } = e(), [b, x] = i(() => {
-		if (p) return p;
-		if (!o) throw Error("Phone config is required");
-		return m({ config: o });
-	}, { manageLifecycle: !p }), S = t((e) => y("phone.formatHint", { example: e }), [y]), C = t(({ callingCode: e, countryName: t }) => y("phone.countryCodeAriaLabel", {
-		callingCode: e,
-		countryName: t
-	}), [y]);
-	if (a({
-		status: b.status,
-		onFinish: _,
-		onError: v,
-		error: b.status === "error" ? b.error : void 0
-	}), b.status === "idle" || b.status === "loadingPrefill" || b.status === "loadingStartInfo") return null;
-	if (b.status === "inputting" || b.status === "submitting" || b.status === "sendingInitialOtp") {
-		let e = b.status === "submitting" || b.status === "sendingInitialOtp", t = b.status === "inputting" ? b.countryCode : "US", r = b.status === "inputting" ? b.prefilledPhone : void 0, i = b.status === "inputting" && b.phoneError ? y(h(b.phoneError)) : void 0, a = b.status === "inputting" && b.validationErrors?.phone ? y(h(b.validationErrors.phone)) : void 0, o = i ?? a, u = !i && !!a, p = b.status === "inputting" ? b.isValid : !0, m = b.status === "inputting" ? b.optinEnabled ?? !1 : !1;
-		return /* @__PURE__ */ n(c, {
+var PhoneContent = ({ config, manager: externalManager, onFinish, onError }) => {
+	const { t } = useTranslation();
+	const [state, manager] = useManager(() => {
+		if (externalManager) return externalManager;
+		if (!config) throw new Error("Phone config is required");
+		return createPhoneManager({ config });
+	}, { manageLifecycle: !externalManager });
+	const formatHintBuilder = q((example) => t("phone.formatHint", { example }), [t]);
+	const countryAriaLabelBuilder = q(({ callingCode, countryName }) => t("phone.countryCodeAriaLabel", {
+		callingCode,
+		countryName
+	}), [t]);
+	useModuleTerminalCallbacks({
+		status: state.status,
+		onFinish,
+		onError,
+		error: state.status === "error" ? state.error : void 0
+	});
+	if (state.status === "idle" || state.status === "loadingPrefill" || state.status === "loadingStartInfo") return null;
+	if (state.status === "inputting" || state.status === "submitting" || state.status === "sendingInitialOtp") {
+		const isLoading = state.status === "submitting" || state.status === "sendingInitialOtp";
+		const countryCode = state.status === "inputting" ? state.countryCode : "US";
+		const prefilledPhone = state.status === "inputting" ? state.prefilledPhone : void 0;
+		const serverPhoneError = state.status === "inputting" && state.phoneError ? t(getPhoneErrorTranslationKey(state.phoneError)) : void 0;
+		const clientPhoneError = state.status === "inputting" && state.validationErrors?.phone ? t(getPhoneErrorTranslationKey(state.validationErrors.phone)) : void 0;
+		const phoneError = serverPhoneError ?? clientPhoneError;
+		const showFormatHintInError = !serverPhoneError && !!clientPhoneError;
+		const isValid = state.status === "inputting" ? state.isValid : true;
+		const optinEnabled = state.status === "inputting" ? state.optinEnabled ?? false : false;
+		return /* @__PURE__ */ u(Page, {
 			className: "IncodePhonePage",
-			title: y("phone.verify"),
-			subtitle: y("email.willSendCode"),
+			title: t("phone.verify"),
+			subtitle: t("email.willSendCode"),
 			children: [
-				/* @__PURE__ */ n("div", {
+				/* @__PURE__ */ u("div", {
 					class: "IncodePhoneInputContainer",
 					children: [
-						/* @__PURE__ */ n(f, {
+						/* @__PURE__ */ u(PhoneInputComposed, {
 							id: "phone",
-							countryCode: t,
-							value: r,
-							error: o,
-							showFormatHintInError: u,
-							disabled: e,
-							onChange: (e, t) => {
-								x.setPhoneNumber(e, t);
+							countryCode,
+							value: prefilledPhone,
+							error: phoneError,
+							showFormatHintInError,
+							disabled: isLoading,
+							onChange: (phone, isValid) => {
+								manager.setPhoneNumber(phone, isValid);
 							},
 							onBlur: () => {
-								x.validatePhone();
+								manager.validatePhone();
 							},
-							formatHintBuilder: S,
-							countryAriaLabelBuilder: C,
+							formatHintBuilder,
+							countryAriaLabelBuilder,
 							"data-testid": "phone-input",
-							showErrorIcon: !0
+							showErrorIcon: true
 						}),
-						/* @__PURE__ */ n(s, { size: 16 }),
-						m && /* @__PURE__ */ n(d, {
+						/* @__PURE__ */ u(Spacer, { size: 16 }),
+						optinEnabled && /* @__PURE__ */ u(Checkbox, {
 							id: "phone-optin",
-							label: y("phone.optIn"),
+							label: t("phone.optIn"),
 							size: "s",
-							onChange: (e) => x.setOptInGranted(e.target.checked)
+							onChange: (e) => manager.setOptInGranted(e.target.checked)
 						})
 					]
 				}),
-				/* @__PURE__ */ n(s, {}),
-				/* @__PURE__ */ n(l, {
-					onClick: () => x.submit(),
-					disabled: !p,
-					isLoading: e,
+				/* @__PURE__ */ u(Spacer, {}),
+				/* @__PURE__ */ u(Button, {
+					onClick: () => manager.submit(),
+					disabled: !isValid,
+					isLoading,
 					"data-testid": "phone-submit",
-					children: y("common.continue")
+					children: t("common.continue")
 				})
 			]
 		}, "phone-input");
 	}
-	if (b.status === "awaitingOtp" || b.status === "verifyingOtp" || b.status === "otpError" || b.status === "resendingOtp") {
-		let e = b.status === "verifyingOtp", t = b.status === "otpError", r = b.status === "awaitingOtp", i = b.status === "resendingOtp", a = r || t || e, o = t ? y(g(b.otpError)) : void 0, s = "otpValidationErrors" in b && b.otpValidationErrors?.otp ? y("otp.incompleteCode", { length: b.otpLength }) : void 0, l = "isOtpValid" in b ? b.isOtpValid : !0;
-		return /* @__PURE__ */ n(c, {
+	if (state.status === "awaitingOtp" || state.status === "verifyingOtp" || state.status === "otpError" || state.status === "resendingOtp") {
+		const isVerifying = state.status === "verifyingOtp";
+		const hasOtpError = state.status === "otpError";
+		const isAwaitingOtp = state.status === "awaitingOtp";
+		const isResending = state.status === "resendingOtp";
+		const showResendCooldown = isAwaitingOtp || hasOtpError || isVerifying;
+		const otpError = hasOtpError ? t(getOtpErrorTranslationKey(state.otpError)) : void 0;
+		const otpValidationError = "otpValidationErrors" in state && state.otpValidationErrors?.otp ? t("otp.incompleteCode", { length: state.otpLength }) : void 0;
+		const isOtpValid = "isOtpValid" in state ? state.isOtpValid : true;
+		return /* @__PURE__ */ u(Page, {
 			className: "IncodePhonePage",
-			title: y("otp.enterCodeSMS"),
-			children: /* @__PURE__ */ n(u, {
-				value: b.otpCode,
-				otpLength: b.otpLength,
-				resendTimer: a ? b.resendTimer : 0,
-				canResend: a ? b.canResend : !1,
-				isLoading: e,
-				disabled: i || e,
-				error: o,
-				validationError: s,
-				isValid: l,
-				onSubmit: (e) => x.submitOtp(e),
-				onChange: (e) => x.setOtpCode(e),
-				onValidate: () => x.validateOtp(),
-				onResend: () => x.resendOtp(),
-				onBack: () => x.back()
+			title: t("otp.enterCodeSMS"),
+			children: /* @__PURE__ */ u(OtpInput, {
+				value: state.otpCode,
+				otpLength: state.otpLength,
+				resendTimer: showResendCooldown ? state.resendTimer : 0,
+				canResend: showResendCooldown ? state.canResend : false,
+				isLoading: isVerifying,
+				disabled: isResending || isVerifying,
+				error: otpError,
+				validationError: otpValidationError,
+				isValid: isOtpValid,
+				onSubmit: (code) => manager.submitOtp(code),
+				onChange: (code) => manager.setOtpCode(code),
+				onValidate: () => manager.validateOtp(),
+				onResend: () => manager.resendOtp(),
+				onBack: () => manager.back()
 			})
 		}, "phone-otp");
 	}
-	return r(b), null;
-}, v = ({ config: e, manager: t, onFinish: r, onError: i }) => /* @__PURE__ */ n(o, { children: e || t ? /* @__PURE__ */ n(_, {
-	config: e,
-	manager: t,
-	onFinish: r,
-	onError: i
-}) : null });
-p(v, "incode-phone");
+	if (isTerminalModuleState(state)) return null;
+	return null;
+};
+/**
+* Phone verification UI component.
+*
+* Provides a complete phone verification experience including:
+* - Country code selector with flag emojis
+* - Phone number input with validation
+* - OTP code entry with resend functionality
+* - Loading states and error handling
+*
+* @example Basic usage
+* ```tsx
+* <Phone
+*   config={{
+*     otpVerification: true,
+*     otpExpirationInMinutes: 5,
+*     prefill: false,
+*   }}
+*   onFinish={() => router.push('/next-step')}
+*   onError={(err) => toast.error(err)}
+* />
+* ```
+*
+* @see {@link createPhoneManager} for headless usage
+*/
+var Phone = ({ config, manager, onFinish, onError }) => {
+	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(PhoneContent, {
+		config,
+		manager,
+		onFinish,
+		onError
+	}) : null });
+};
+registerIncodeModuleElement(Phone, "incode-phone");
 //#endregion
-export { v as Phone };
+export { Phone };