import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { Input } from "./index29.js";
import { FeaturedIcon } from "./index81.js";
import { PageBackground } from "./index481.js";
import { cva } from "class-variance-authority";
import { ArrowLeft, CheckCircle, Key, Lock, Mail } from "lucide-react";
import * as React from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/pages/ForgotPasswordPage/ForgotPasswordPage.tsx
var forgotPasswordVariants = 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 passwordCheckVariants = cva("flex size-5 shrink-0 items-center justify-center rounded-full", {
	variants: { state: {
		unchecked: "bg-surface-2",
		checked: "bg-success/10"
	} },
	defaultVariants: { state: "unchecked" }
});
var ForgotPasswordIcon = ({ type }) => {
	const Icon = {
		key: Key,
		mail: Mail,
		lock: Lock,
		success: CheckCircle
	}[type];
	return /* @__PURE__ */ jsx(FeaturedIcon, {
		icon: /* @__PURE__ */ jsx(Icon, {}),
		size: "lg"
	});
};
var PasswordCheck = ({ checked, label }) => /* @__PURE__ */ jsxs("li", {
	className: "flex w-full items-start gap-2 list-none",
	children: [/* @__PURE__ */ jsx("div", {
		className: cn(passwordCheckVariants({ state: checked ? "checked" : "unchecked" }), "transition-colors duration-200"),
		"aria-hidden": "true",
		children: checked && /* @__PURE__ */ jsx("svg", {
			className: "size-3 text-success-foreground delight-check-bounce",
			fill: "none",
			viewBox: "0 0 12 12",
			xmlns: "http://www.w3.org/2000/svg",
			children: /* @__PURE__ */ jsx("path", {
				d: "M10 3L4.5 8.5L2 6",
				stroke: "currentColor",
				strokeWidth: "2",
				strokeLinecap: "round",
				strokeLinejoin: "round"
			})
		})
	}), /* @__PURE__ */ jsx("p", {
		className: "flex-1 text-sm leading-5 text-muted-foreground",
		children: label
	})]
});
var ForgotPasswordPage = React.forwardRef(function ForgotPasswordPage({ className, variant, step = "email", email = "user@example.com", onSubmit, onBackToLogin, onResendEmail, passwordValidation = {
	minLength: false,
	hasSpecialChar: false
}, rtl = false, title, subtitle, submitLabel, backToLoginLabel, resendText, resendLinkText, ...props }, ref) {
	const [formData, setFormData] = React.useState({
		email: "",
		password: "",
		confirmPassword: ""
	});
	const handleSubmit = (e) => {
		e.preventDefault();
		onSubmit?.(formData);
	};
	const renderContent = () => {
		switch (step) {
			case "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(ForgotPasswordIcon, { type: "key" })]
				}), /* @__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: title ?? "Forgot password?"
					}), /* @__PURE__ */ jsx("p", {
						className: "text-md leading-6 text-muted-foreground",
						children: subtitle ?? "No worries, we'll send you reset instructions."
					})]
				})]
			}), /* @__PURE__ */ jsxs("form", {
				onSubmit: handleSubmit,
				className: "flex w-full flex-col gap-6 delight-stagger",
				style: { "--delight-delay": "200ms" },
				children: [/* @__PURE__ */ jsx(Input, {
					label: "Email",
					required: true,
					type: "email",
					placeholder: "Enter your email",
					value: formData.email,
					onChange: (e) => setFormData((prev) => ({
						...prev,
						email: e.target.value
					}))
				}), /* @__PURE__ */ jsx(Button, {
					type: "submit",
					size: "lg",
					className: "w-full",
					children: submitLabel ?? "Reset password"
				})]
			})] });
			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(ForgotPasswordIcon, { 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: title ?? "Check your email"
						}), /* @__PURE__ */ jsx("p", {
							className: "text-md leading-6 text-muted-foreground",
							children: subtitle ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
								"We sent a password reset 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",
						children: submitLabel ?? "Open email app"
					})
				}),
				/* @__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,
						children: resendLinkText ?? "Click to resend"
					})]
				})
			] });
			case "set-password": 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(ForgotPasswordIcon, { type: "lock" })]
				}), /* @__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: title ?? "Set new password"
					}), /* @__PURE__ */ jsx("p", {
						className: "text-md leading-6 text-muted-foreground",
						children: subtitle ?? "Your new password must be different to previously used passwords."
					})]
				})]
			}), /* @__PURE__ */ jsxs("form", {
				onSubmit: handleSubmit,
				className: "flex w-full flex-col gap-6 delight-stagger",
				style: { "--delight-delay": "200ms" },
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex flex-col gap-5",
					children: [
						/* @__PURE__ */ jsx(Input, {
							label: "Password",
							required: true,
							type: "password",
							placeholder: "••••••••",
							value: formData.password,
							onChange: (e) => setFormData((prev) => ({
								...prev,
								password: e.target.value
							}))
						}),
						/* @__PURE__ */ jsx(Input, {
							label: "Confirm password",
							required: true,
							type: "password",
							placeholder: "••••••••",
							value: formData.confirmPassword,
							onChange: (e) => setFormData((prev) => ({
								...prev,
								confirmPassword: e.target.value
							}))
						}),
						/* @__PURE__ */ jsxs("ul", {
							className: "flex flex-col gap-3",
							"aria-label": "Password requirements",
							children: [/* @__PURE__ */ jsx(PasswordCheck, {
								checked: passwordValidation.minLength,
								label: "Must be at least 8 characters"
							}), /* @__PURE__ */ jsx(PasswordCheck, {
								checked: passwordValidation.hasSpecialChar,
								label: "Must contain one special character"
							})]
						})
					]
				}), /* @__PURE__ */ jsx(Button, {
					type: "submit",
					size: "lg",
					className: "w-full",
					children: submitLabel ?? "Reset password"
				})]
			})] });
			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(ForgotPasswordIcon, { 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: title ?? "Password reset"
					}), /* @__PURE__ */ jsx("p", {
						className: "text-md leading-6 text-muted-foreground",
						children: subtitle ?? "Your password has been successfully reset. Click below to log in magically."
					})]
				})]
			}), /* @__PURE__ */ jsx("div", {
				className: "w-full delight-stagger",
				style: { "--delight-delay": "200ms" },
				children: /* @__PURE__ */ jsx(Button, {
					size: "lg",
					className: "w-full",
					onClick: onBackToLogin,
					children: submitLabel ?? "Continue"
				})
			})] });
			default: return null;
		}
	};
	return /* @__PURE__ */ jsx("div", {
		ref,
		dir: rtl ? "rtl" : "ltr",
		"data-slot": "forgot-password-page",
		className: cn(forgotPasswordVariants({ 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,
					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"
				})
			})]
		})
	});
});
ForgotPasswordPage.displayName = "ForgotPasswordPage";
//#endregion
export { ForgotPasswordIcon, ForgotPasswordPage, PasswordCheck, forgotPasswordVariants };

//# sourceMappingURL=index483.js.map