import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { FeaturedIcon } from "./index81.js";
import { InputOTP, InputOTPGroup, InputOTPSlot } from "./index395.js";
import { PageBackground } from "./index481.js";
import { cva } from "class-variance-authority";
import { ArrowLeft, CheckCircle, Mail } from "lucide-react";
import * as React from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/pages/VerifyEmailPage/VerifyEmailPage.tsx
var verifyEmailPageVariants = cva("flex min-h-screen w-full items-center justify-center bg-muted relative overflow-hidden", {
	variants: { variant: {
		default: "",
		sidebar: "lg:ps-64"
	} },
	defaultVariants: { variant: "default" }
});
var VerifyEmailIcon = ({ type }) => {
	const Icon = {
		mail: Mail,
		success: CheckCircle
	}[type];
	return /* @__PURE__ */ jsx(FeaturedIcon, {
		icon: /* @__PURE__ */ jsx(Icon, {}),
		size: "lg"
	});
};
var VerifyEmailPage = React.forwardRef(({ className, variant, step = "check-email", email = "user@example.com", rtl = false, onEnterCodeManually, onSubmit, onBackToLogin, onResendEmail, onContinue, value: controlledValue, onValueChange, loading = false, title, subtitle, submitLabel, backToLoginLabel, resendText, resendLinkText, ...props }, ref) => {
	const [internalValue, setInternalValue] = React.useState("");
	const value = controlledValue ?? internalValue;
	const handleValueChange = (newValue) => {
		if (onValueChange) onValueChange(newValue);
		else setInternalValue(newValue);
	};
	const handleVerifySubmit = (e) => {
		e.preventDefault();
		if (value.length === 4) onSubmit?.(value);
	};
	const stepTitle = title ?? (step === "success" ? "Email verified" : "Check your email");
	const stepSubtitle = subtitle ?? (step === "success" ? "Your email has been verified successfully. Click below to continue." : void 0);
	const stepSubmitLabel = submitLabel ?? (step === "check-email" ? "Enter code manually" : step === "enter-code" ? "Verify email" : "Continue");
	const renderContent = () => {
		switch (step) {
			case "check-email": return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
				className: "flex w-full flex-col items-center gap-6",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "relative delight-stagger",
					"aria-hidden": "true",
					children: [/* @__PURE__ */ jsx(PageBackground, {
						pattern: "grid",
						offset: "icon-center",
						className: "-z-10"
					}), /* @__PURE__ */ jsx(VerifyEmailIcon, { type: "mail" })]
				}), /* @__PURE__ */ jsxs("div", {
					className: "flex w-full flex-col gap-3 text-center delight-stagger",
					style: { "--delight-delay": "100ms" },
					children: [/* @__PURE__ */ jsx("h1", {
						className: "font-display text-display-xs md:text-display-sm font-semibold text-foreground",
						children: stepTitle
					}), /* @__PURE__ */ jsx("p", {
						className: "text-md leading-6 text-muted-foreground",
						children: stepSubtitle ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
							"We sent a verification link to",
							" ",
							/* @__PURE__ */ jsx("span", {
								className: "font-medium",
								children: email
							})
						] })
					})]
				})]
			}), /* @__PURE__ */ jsx("div", {
				className: "w-full delight-stagger",
				style: { "--delight-delay": "200ms" },
				children: /* @__PURE__ */ jsx(Button, {
					size: "lg",
					className: "w-full",
					onClick: onEnterCodeManually,
					disabled: loading,
					children: stepSubmitLabel
				})
			})] });
			case "enter-code": return /* @__PURE__ */ jsxs(Fragment$1, { children: [
				/* @__PURE__ */ jsxs("div", {
					className: "flex w-full flex-col items-center gap-6",
					children: [/* @__PURE__ */ jsxs("div", {
						className: "relative delight-stagger",
						"aria-hidden": "true",
						children: [/* @__PURE__ */ jsx(PageBackground, {
							pattern: "grid",
							offset: "icon-center",
							className: "-z-10"
						}), /* @__PURE__ */ jsx(VerifyEmailIcon, { type: "mail" })]
					}), /* @__PURE__ */ jsxs("div", {
						className: "flex w-full flex-col gap-3 text-center delight-stagger",
						style: { "--delight-delay": "100ms" },
						children: [/* @__PURE__ */ jsx("h1", {
							className: "font-display text-display-xs md:text-display-sm font-semibold text-foreground",
							children: stepTitle
						}), /* @__PURE__ */ jsx("p", {
							className: "text-md leading-6 text-muted-foreground",
							children: stepSubtitle ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
								"We sent a verification link to",
								" ",
								/* @__PURE__ */ jsx("span", {
									className: "font-medium",
									children: email
								})
							] })
						})]
					})]
				}),
				/* @__PURE__ */ jsxs("form", {
					onSubmit: handleVerifySubmit,
					className: "flex w-full flex-col gap-8 delight-stagger",
					style: { "--delight-delay": "200ms" },
					"aria-label": "Email verification code",
					children: [/* @__PURE__ */ jsx("div", {
						className: "flex w-full justify-center",
						children: /* @__PURE__ */ jsx(InputOTP, {
							maxLength: 4,
							value,
							onChange: handleValueChange,
							disabled: loading,
							containerClassName: "gap-2",
							children: /* @__PURE__ */ jsx(InputOTPGroup, {
								className: "gap-2",
								children: [
									0,
									1,
									2,
									3
								].map((index) => /* @__PURE__ */ jsx(InputOTPSlot, {
									index,
									className: "size-16 md:size-20 border-2 border-primary rounded-xl shadow-xs text-display-md md:text-display-lg font-medium leading-[60px] tracking-[-0.02em] text-primary"
								}, index))
							})
						})
					}), /* @__PURE__ */ jsx(Button, {
						type: "submit",
						size: "lg",
						className: "w-full",
						disabled: value.length !== 4 || loading,
						loading,
						children: stepSubmitLabel
					})]
				}),
				/* @__PURE__ */ jsxs("div", {
					className: "flex w-full items-center justify-center gap-1 text-sm delight-stagger",
					style: { "--delight-delay": "300ms" },
					children: [/* @__PURE__ */ jsx("span", {
						className: "leading-5 text-muted-foreground",
						children: resendText ?? "Didn't receive the email?"
					}), /* @__PURE__ */ jsx(Button, {
						appearance: "link",
						variant: "primary",
						size: "sm",
						onClick: onResendEmail,
						disabled: loading,
						children: resendLinkText ?? "Click to resend"
					})]
				})
			] });
			case "success": return /* @__PURE__ */ jsxs(Fragment$1, { children: [
				/* @__PURE__ */ jsxs("div", {
					className: "flex w-full flex-col items-center gap-6",
					children: [/* @__PURE__ */ jsxs("div", {
						className: "relative delight-bounce-in",
						"aria-hidden": "true",
						children: [/* @__PURE__ */ jsx(PageBackground, {
							pattern: "grid",
							offset: "icon-center",
							className: "-z-10"
						}), /* @__PURE__ */ jsx(VerifyEmailIcon, { type: "success" })]
					}), /* @__PURE__ */ jsxs("div", {
						className: "flex w-full flex-col gap-3 text-center delight-stagger",
						style: { "--delight-delay": "100ms" },
						children: [/* @__PURE__ */ jsx("h1", {
							className: "font-display text-display-xs md:text-display-sm font-semibold text-foreground",
							children: stepTitle
						}), /* @__PURE__ */ jsx("p", {
							className: "text-md leading-6 text-muted-foreground",
							children: stepSubtitle
						})]
					})]
				}),
				/* @__PURE__ */ jsx("div", {
					className: "w-full delight-stagger",
					style: { "--delight-delay": "200ms" },
					children: /* @__PURE__ */ jsx(Button, {
						size: "lg",
						className: "w-full",
						onClick: onContinue,
						disabled: loading,
						children: stepSubmitLabel
					})
				}),
				/* @__PURE__ */ jsxs("div", {
					className: "flex w-full items-center justify-center gap-1 text-sm delight-stagger",
					style: { "--delight-delay": "300ms" },
					children: [/* @__PURE__ */ jsx("span", {
						className: "leading-5 text-muted-foreground",
						children: resendText ?? "Didn't receive the email?"
					}), /* @__PURE__ */ jsx(Button, {
						appearance: "link",
						variant: "primary",
						size: "sm",
						onClick: onResendEmail,
						disabled: loading,
						children: resendLinkText ?? "Click to resend"
					})]
				})
			] });
			default: return null;
		}
	};
	return /* @__PURE__ */ jsx("div", {
		ref,
		dir: rtl ? "rtl" : "ltr",
		"data-slot": "verify-email-page",
		className: cn(verifyEmailPageVariants({ variant }), className),
		...props,
		children: /* @__PURE__ */ jsxs("main", {
			className: "relative z-10 mx-auto flex w-full max-w-[360px] flex-col items-center gap-8 px-4",
			"aria-live": "polite",
			children: [renderContent(), /* @__PURE__ */ jsx("div", {
				className: "delight-stagger",
				style: { "--delight-delay": "400ms" },
				children: /* @__PURE__ */ jsx(Button, {
					type: "button",
					appearance: "link",
					variant: "primary",
					size: "sm",
					onClick: onBackToLogin,
					disabled: loading,
					startIcon: /* @__PURE__ */ jsx(ArrowLeft, {
						className: cn("size-5", rtl && "rotate-180"),
						strokeWidth: 2,
						"aria-hidden": "true"
					}),
					className: rtl ? "flex-row-reverse" : "",
					children: backToLoginLabel ?? "Back to log in"
				})
			})]
		})
	});
});
VerifyEmailPage.displayName = "VerifyEmailPage";
//#endregion
export { VerifyEmailIcon, VerifyEmailPage, verifyEmailPageVariants };

//# sourceMappingURL=index487.js.map