import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { Separator } from "./index7.js";
import { Input } from "./index29.js";
import { BrandIcon } from "./index55.js";
import { StepsCompound } from "./index457.js";
import { PageBackground } from "./index481.js";
import { AppleIcon, FacebookIcon, GoogleIcon, SocialButton } from "./index484.js";
import { cva } from "class-variance-authority";
import { Check } from "lucide-react";
import * as React from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/pages/SignupPage/SignupPage.tsx
var signUpVariants = cva("min-h-screen w-full flex items-center justify-center relative overflow-hidden", {
	variants: { variant: {
		simple: "",
		"social-logins": "",
		"social-leading": "",
		"header-navigation": "",
		"card-separated": "",
		"card-combined": "",
		"progress-01": "",
		"progress-02": "",
		"progress-03": ""
	} },
	defaultVariants: { variant: "simple" }
});
function PasswordCheck({ checked, text }) {
	return /* @__PURE__ */ jsxs("li", {
		className: "flex items-start gap-2 list-none",
		children: [/* @__PURE__ */ jsx("div", {
			className: cn("size-5 rounded-full flex items-center justify-center shrink-0 transition-colors duration-200", checked ? "bg-success/10" : "bg-surface-2"),
			"aria-hidden": "true",
			children: checked && /* @__PURE__ */ jsx(Check, { className: "size-3 text-success-foreground delight-check-bounce" })
		}), /* @__PURE__ */ jsx("p", {
			className: "text-sm leading-5 text-muted-foreground",
			children: text
		})]
	});
}
PasswordCheck.displayName = "PasswordCheck";
function LogoText({ className }) {
	return /* @__PURE__ */ jsxs("div", {
		className: cn("flex items-center gap-1.5", className),
		children: [/* @__PURE__ */ jsx(BrandIcon, {
			icon: "mark",
			size: "lg"
		}), /* @__PURE__ */ jsxs("span", {
			className: "text-lg font-semibold text-foreground",
			children: ["HUMAIN ", /* @__PURE__ */ jsx("span", {
				className: "text-primary",
				children: "ONE"
			})]
		})]
	});
}
LogoText.displayName = "LogoText";
function HeaderNavigation({ onLogInLinkClick, loading }) {
	return /* @__PURE__ */ jsx("div", {
		className: "w-full flex flex-col items-center overflow-hidden",
		children: /* @__PURE__ */ jsxs("header", {
			className: "w-full max-w-[1280px] px-4 md:px-8 h-[72px] flex items-center justify-between delight-stagger",
			style: { "--delight-delay": "0ms" },
			children: [/* @__PURE__ */ jsx(LogoText, {}), /* @__PURE__ */ jsxs("div", {
				className: "flex items-center gap-1 delight-stagger",
				style: { "--delight-delay": "100ms" },
				children: [/* @__PURE__ */ jsx("p", {
					className: "hidden md:block text-base leading-6 text-muted-foreground",
					children: "Already have an account?"
				}), /* @__PURE__ */ jsx(Button, {
					type: "button",
					appearance: "link",
					variant: "primary",
					size: "md",
					onClick: onLogInLinkClick,
					disabled: loading,
					children: "Log in"
				})]
			})]
		})
	});
}
HeaderNavigation.displayName = "HeaderNavigation";
function TabsToggle({ activeTab, onSignUpTabClick, onLogInTabClick }) {
	return /* @__PURE__ */ jsxs("nav", {
		className: "w-full flex gap-0.5 bg-card/60 border border-border rounded-lg p-0.5",
		"aria-label": "Account action",
		children: [/* @__PURE__ */ jsx(Button, {
			type: "button",
			appearance: activeTab === "signup" ? "outline" : "ghost",
			variant: "secondary",
			size: "lg",
			className: "flex-1",
			onClick: onSignUpTabClick,
			children: "Sign up"
		}), /* @__PURE__ */ jsx(Button, {
			type: "button",
			appearance: activeTab === "login" ? "outline" : "ghost",
			variant: "secondary",
			size: "lg",
			className: "flex-1",
			onClick: onLogInTabClick,
			children: "Log in"
		})]
	});
}
TabsToggle.displayName = "TabsToggle";
var SignupPage = React.forwardRef(({ className, variant = "simple", logo, showTabs = true, activeTab = "signup", onSignUpTabClick, onLogInTabClick, onSubmit, onLogInLinkClick, onGoogleSignUp, onFacebookSignUp, onAppleSignUp, onSAMLSignUp, loading = false, error, currentStep = 0, passwordValidation = {
	minLength: false,
	hasSpecialChar: false
}, rtl = false, title, subtitle, submitLabel, footerText, footerLinkText }, ref) => {
	const [name, setName] = React.useState("");
	const [email, setEmail] = React.useState("");
	const [password, setPassword] = React.useState("");
	const [confirmPassword, setConfirmPassword] = React.useState("");
	const isProgress = variant?.includes("progress");
	const isCardCombined = variant === "card-combined";
	const resolvedTitle = title ?? (isProgress ? "Choose a password" : isCardCombined ? "Start your free trial" : "Create an account");
	const resolvedSubtitle = subtitle ?? (isProgress ? "Must be at least 8 characters." : isCardCombined ? "Sign up in less than 2 minutes." : "Start your 30-day free trial.");
	const resolvedSubmitLabel = submitLabel ?? (isProgress ? "Continue" : "Get started");
	const resolvedFooterText = footerText ?? "Already have an account?";
	const resolvedFooterLinkText = footerLinkText ?? "Log in";
	const handleSubmit = (e) => {
		e.preventDefault();
		if (isProgress) onSubmit?.({
			email,
			password,
			confirmPassword
		});
		else if (variant === "social-leading" || variant === "social-logins") onSubmit?.({ email });
		else onSubmit?.({
			name,
			email,
			password
		});
	};
	const progressSteps = [
		{
			label: "Your details",
			subtext: "Name and email"
		},
		{
			label: "Choose a password",
			subtext: "Choose a secure password"
		},
		{
			label: "Invite your team",
			subtext: "Start collaborating"
		},
		{
			label: "Add your socials",
			subtext: "Automatic sharing"
		}
	];
	return /* @__PURE__ */ jsxs("div", {
		ref,
		"data-slot": "signup-page",
		className: cn(signUpVariants({ variant }), className),
		dir: rtl ? "rtl" : "ltr",
		children: [
			variant !== "header-navigation" && variant !== "card-combined" && /* @__PURE__ */ jsx(PageBackground, {
				pattern: variant === "social-leading" || variant === "progress-02" ? "circular" : "grid",
				offset: "top"
			}),
			variant === "header-navigation" && /* @__PURE__ */ jsx(HeaderNavigation, {
				onLogInLinkClick,
				loading
			}),
			/* @__PURE__ */ jsx("main", {
				className: cn("relative z-10 w-full max-w-[1280px] px-8 flex", variant === "header-navigation" ? "items-start justify-start" : "flex-col items-center"),
				children: /* @__PURE__ */ jsxs("div", {
					className: cn("w-full flex flex-col gap-8 items-center", variant === "card-separated" || variant === "card-combined" ? "max-w-[440px]" : "max-w-[360px]"),
					children: [
						variant !== "header-navigation" && /* @__PURE__ */ jsxs("div", {
							className: "w-full flex flex-col gap-6 items-center",
							children: [
								!isProgress && variant !== "card-combined" && /* @__PURE__ */ jsx("div", {
									className: "delight-stagger",
									style: { "--delight-delay": "0ms" },
									children: logo || /* @__PURE__ */ jsx(BrandIcon, {
										icon: "mark",
										size: "xl"
									})
								}),
								(variant === "simple" || variant === "social-logins" || variant === "card-separated") && /* @__PURE__ */ jsxs("div", {
									className: "w-full flex flex-col gap-3 text-center delight-stagger",
									style: { "--delight-delay": "100ms" },
									children: [/* @__PURE__ */ jsx("h1", {
										className: "text-display-xs md:text-display-sm font-semibold text-foreground",
										children: resolvedTitle
									}), /* @__PURE__ */ jsx("p", {
										className: "text-base leading-6 text-muted-foreground",
										children: resolvedSubtitle
									})]
								}),
								variant === "social-leading" && /* @__PURE__ */ jsx("h1", {
									className: "text-display-xs md:text-display-sm font-semibold text-foreground text-center w-full delight-stagger",
									style: { "--delight-delay": "100ms" },
									children: resolvedTitle
								}),
								isProgress && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
									className: "delight-stagger",
									style: { "--delight-delay": "0ms" },
									children: logo || /* @__PURE__ */ jsx(BrandIcon, {
										icon: "mark",
										size: "xl"
									})
								}), /* @__PURE__ */ jsxs("div", {
									className: "w-full flex flex-col gap-3 text-center delight-stagger",
									style: { "--delight-delay": "100ms" },
									children: [/* @__PURE__ */ jsx("h1", {
										className: "text-display-xs md:text-display-sm font-semibold text-foreground",
										children: resolvedTitle
									}), /* @__PURE__ */ jsx("p", {
										className: "text-base leading-6 text-muted-foreground",
										children: resolvedSubtitle
									})]
								})] }),
								showTabs && (variant === "simple" || variant === "card-separated") && /* @__PURE__ */ jsx("div", {
									className: "w-full delight-stagger",
									style: { "--delight-delay": "200ms" },
									children: /* @__PURE__ */ jsx(TabsToggle, {
										activeTab,
										onSignUpTabClick,
										onLogInTabClick
									})
								})
							]
						}),
						variant === "header-navigation" && /* @__PURE__ */ jsxs("div", {
							className: "w-full flex flex-col gap-6 items-center",
							children: [/* @__PURE__ */ jsxs("div", {
								className: "w-full flex flex-col gap-3 text-center delight-stagger",
								style: { "--delight-delay": "100ms" },
								children: [/* @__PURE__ */ jsx("h1", {
									className: "text-display-xs md:text-display-sm font-semibold text-foreground",
									children: resolvedTitle
								}), /* @__PURE__ */ jsx("p", {
									className: "text-base leading-6 text-muted-foreground",
									children: resolvedSubtitle
								})]
							}), /* @__PURE__ */ jsx("div", {
								className: "w-full delight-stagger",
								style: { "--delight-delay": "200ms" },
								children: /* @__PURE__ */ jsx(TabsToggle, {
									activeTab,
									onSignUpTabClick,
									onLogInTabClick
								})
							})]
						}),
						variant === "card-combined" && /* @__PURE__ */ jsxs("div", {
							className: "w-full bg-background rounded-xl shadow-sm border border-border px-10 py-8 flex flex-col gap-6 items-center",
							children: [
								/* @__PURE__ */ jsx("div", {
									className: "delight-stagger",
									style: { "--delight-delay": "0ms" },
									children: logo || /* @__PURE__ */ jsx(BrandIcon, {
										icon: "mark",
										size: "xl"
									})
								}),
								/* @__PURE__ */ jsxs("div", {
									className: "w-full flex flex-col gap-2 text-center delight-stagger",
									style: { "--delight-delay": "100ms" },
									children: [/* @__PURE__ */ jsx("h1", {
										className: "text-display-xs font-semibold text-foreground",
										children: resolvedTitle
									}), /* @__PURE__ */ jsx("p", {
										className: "text-base leading-6 text-muted-foreground",
										children: resolvedSubtitle
									})]
								}),
								/* @__PURE__ */ jsxs("form", {
									onSubmit: handleSubmit,
									className: "w-full flex flex-col gap-5 delight-stagger",
									style: { "--delight-delay": "300ms" },
									children: [
										/* @__PURE__ */ jsx(Input, {
											type: "text",
											placeholder: "Enter your name",
											"aria-label": "Name",
											value: name,
											onChange: (e) => setName(e.target.value),
											required: true,
											disabled: loading
										}),
										/* @__PURE__ */ jsx(Input, {
											type: "email",
											placeholder: "Enter your email",
											"aria-label": "Email",
											value: email,
											onChange: (e) => setEmail(e.target.value),
											required: true,
											disabled: loading,
											error
										}),
										/* @__PURE__ */ jsxs("div", {
											className: "flex flex-col gap-1.5",
											children: [/* @__PURE__ */ jsx(Input, {
												type: "password",
												placeholder: "Create a password",
												"aria-label": "Password",
												value: password,
												onChange: (e) => setPassword(e.target.value),
												required: true,
												disabled: loading
											}), /* @__PURE__ */ jsx("p", {
												className: "text-sm leading-5 text-muted-foreground",
												children: "Must be at least 8 characters."
											})]
										}),
										/* @__PURE__ */ jsxs("div", {
											className: "flex flex-col gap-4",
											children: [/* @__PURE__ */ jsx(Button, {
												type: "submit",
												appearance: "gradient",
												variant: "primary",
												size: "lg",
												className: "w-full",
												loading,
												children: resolvedSubmitLabel
											}), /* @__PURE__ */ jsx(SocialButton, {
												icon: /* @__PURE__ */ jsx(GoogleIcon, {}),
												label: "Sign up with Google",
												onClick: onGoogleSignUp,
												disabled: loading
											})]
										})
									]
								}),
								/* @__PURE__ */ jsxs("div", {
									className: "w-full flex items-baseline justify-center gap-1 delight-stagger",
									style: { "--delight-delay": "500ms" },
									children: [/* @__PURE__ */ jsx("p", {
										className: "text-sm leading-5 text-muted-foreground",
										children: resolvedFooterText
									}), /* @__PURE__ */ jsx(Button, {
										type: "button",
										appearance: "link",
										variant: "primary",
										size: "sm",
										onClick: onLogInLinkClick,
										disabled: loading,
										children: resolvedFooterLinkText
									})]
								})
							]
						}),
						variant === "card-separated" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
							className: "w-full bg-background rounded-xl shadow-md border border-border px-10 py-8 flex flex-col gap-6 delight-stagger",
							style: { "--delight-delay": "300ms" },
							children: /* @__PURE__ */ jsxs("form", {
								onSubmit: handleSubmit,
								className: "w-full flex flex-col gap-5",
								children: [
									/* @__PURE__ */ jsx(Input, {
										type: "text",
										label: "Name",
										placeholder: "Enter your name",
										value: name,
										onChange: (e) => setName(e.target.value),
										required: true,
										disabled: loading
									}),
									/* @__PURE__ */ jsx(Input, {
										type: "email",
										label: "Email",
										placeholder: "Enter your email",
										value: email,
										onChange: (e) => setEmail(e.target.value),
										required: true,
										disabled: loading,
										error
									}),
									/* @__PURE__ */ jsxs("div", {
										className: "flex flex-col gap-1.5",
										children: [/* @__PURE__ */ jsx(Input, {
											type: "password",
											label: "Password",
											placeholder: "Create a password",
											value: password,
											onChange: (e) => setPassword(e.target.value),
											required: true,
											disabled: loading
										}), /* @__PURE__ */ jsx("p", {
											className: "text-sm leading-5 text-muted-foreground",
											children: "Must be at least 8 characters."
										})]
									}),
									/* @__PURE__ */ jsxs("div", {
										className: "flex flex-col gap-4 delight-stagger",
										style: { "--delight-delay": "400ms" },
										children: [/* @__PURE__ */ jsx(Button, {
											type: "submit",
											appearance: "gradient",
											variant: "primary",
											size: "lg",
											className: "w-full",
											loading,
											children: resolvedSubmitLabel
										}), /* @__PURE__ */ jsx(SocialButton, {
											icon: /* @__PURE__ */ jsx(GoogleIcon, {}),
											label: "Sign up with Google",
											onClick: onGoogleSignUp,
											disabled: loading
										})]
									})
								]
							})
						}), /* @__PURE__ */ jsxs("div", {
							className: "w-full flex items-baseline justify-center gap-1 delight-stagger",
							style: { "--delight-delay": "500ms" },
							children: [/* @__PURE__ */ jsx("p", {
								className: "text-sm leading-5 text-muted-foreground",
								children: resolvedFooterText
							}), /* @__PURE__ */ jsx(Button, {
								type: "button",
								appearance: "link",
								variant: "primary",
								size: "sm",
								onClick: onLogInLinkClick,
								disabled: loading,
								children: resolvedFooterLinkText
							})]
						})] }),
						isProgress && /* @__PURE__ */ jsxs(Fragment$1, { children: [
							/* @__PURE__ */ jsxs("form", {
								onSubmit: handleSubmit,
								className: "w-full flex flex-col gap-6 delight-stagger",
								style: { "--delight-delay": "300ms" },
								children: [/* @__PURE__ */ jsxs("div", {
									className: "w-full flex flex-col gap-5",
									children: [/* @__PURE__ */ jsx(Input, {
										type: "password",
										placeholder: "Choose a password",
										value: password,
										onChange: (e) => setPassword(e.target.value),
										required: true,
										disabled: loading
									}), /* @__PURE__ */ jsx(Input, {
										type: "password",
										placeholder: "Confirm password",
										value: confirmPassword,
										onChange: (e) => setConfirmPassword(e.target.value),
										required: true,
										disabled: loading
									})]
								}), /* @__PURE__ */ jsx(Button, {
									type: "submit",
									appearance: "gradient",
									variant: "primary",
									size: "lg",
									className: "w-full",
									loading,
									children: resolvedSubmitLabel
								})]
							}),
							variant === "progress-01" && /* @__PURE__ */ jsx("div", {
								className: "w-full flex items-center justify-center delight-stagger",
								style: { "--delight-delay": "500ms" },
								children: /* @__PURE__ */ jsx(StepsCompound, {
									steps: progressSteps,
									currentStep,
									shape: "round",
									bulletType: "text"
								})
							}),
							variant === "progress-02" && /* @__PURE__ */ jsx("div", {
								className: "w-full flex items-center justify-center delight-stagger",
								style: { "--delight-delay": "500ms" },
								children: /* @__PURE__ */ jsx(StepsCompound, {
									steps: progressSteps,
									currentStep,
									shape: "rounded",
									bulletType: "icon"
								})
							}),
							variant === "progress-03" && /* @__PURE__ */ jsx("div", {
								className: "w-full flex items-start gap-4 delight-stagger",
								style: { "--delight-delay": "500ms" },
								children: /* @__PURE__ */ jsx(StepsCompound, {
									steps: progressSteps,
									currentStep,
									orientation: "horizontal",
									shape: "rounded",
									bulletType: "text"
								})
							})
						] }),
						!isProgress && variant !== "card-separated" && variant !== "card-combined" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
							variant === "social-leading" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
								className: "w-full flex flex-col gap-3 delight-stagger",
								style: { "--delight-delay": "200ms" },
								children: /* @__PURE__ */ jsx(SocialButton, {
									icon: /* @__PURE__ */ jsx(GoogleIcon, {}),
									label: "Sign up with Google",
									onClick: onGoogleSignUp,
									disabled: loading
								})
							}), /* @__PURE__ */ jsx(Separator, {})] }),
							/* @__PURE__ */ jsxs("form", {
								onSubmit: handleSubmit,
								className: "w-full flex flex-col gap-6",
								children: [
									(variant === "simple" || variant === "header-navigation") && /* @__PURE__ */ jsxs("div", {
										className: "w-full flex flex-col gap-5 delight-stagger",
										style: { "--delight-delay": "300ms" },
										children: [
											/* @__PURE__ */ jsx(Input, {
												type: "text",
												label: "Name",
												placeholder: "Enter your name",
												value: name,
												onChange: (e) => setName(e.target.value),
												required: true,
												disabled: loading
											}),
											/* @__PURE__ */ jsx(Input, {
												type: "email",
												label: "Email",
												placeholder: "Enter your email",
												value: email,
												onChange: (e) => setEmail(e.target.value),
												required: true,
												disabled: loading,
												error
											}),
											/* @__PURE__ */ jsx(Input, {
												type: "password",
												label: "Password",
												placeholder: "Create a password",
												value: password,
												onChange: (e) => setPassword(e.target.value),
												required: true,
												disabled: loading
											}),
											variant === "simple" && /* @__PURE__ */ jsxs("ul", {
												className: "flex flex-col gap-3",
												"aria-label": "Password requirements",
												children: [/* @__PURE__ */ jsx(PasswordCheck, {
													checked: passwordValidation.minLength,
													text: "Must be at least 8 characters"
												}), /* @__PURE__ */ jsx(PasswordCheck, {
													checked: passwordValidation.hasSpecialChar,
													text: "Must contain one special character"
												})]
											}),
											variant === "header-navigation" && /* @__PURE__ */ jsx("p", {
												className: "text-sm leading-5 text-muted-foreground",
												children: "Must be at least 8 characters."
											})
										]
									}),
									(variant === "social-logins" || variant === "social-leading") && /* @__PURE__ */ jsx("div", {
										className: "w-full flex flex-col gap-4 delight-stagger",
										style: { "--delight-delay": "300ms" },
										children: /* @__PURE__ */ jsx(Input, {
											type: "email",
											placeholder: "Enter your email",
											value: email,
											onChange: (e) => setEmail(e.target.value),
											required: true,
											disabled: loading,
											error
										})
									}),
									/* @__PURE__ */ jsxs("div", {
										className: "w-full flex flex-col gap-4 delight-stagger",
										style: { "--delight-delay": "400ms" },
										children: [
											/* @__PURE__ */ jsx(Button, {
												type: "submit",
												appearance: "gradient",
												variant: "primary",
												size: "lg",
												className: "w-full",
												loading,
												children: resolvedSubmitLabel
											}),
											variant === "simple" && /* @__PURE__ */ jsx(SocialButton, {
												icon: /* @__PURE__ */ jsx(GoogleIcon, {}),
												label: "Sign up with Google",
												onClick: onGoogleSignUp,
												disabled: loading
											}),
											variant === "social-logins" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, { label: "OR" }), /* @__PURE__ */ jsxs("div", {
												className: "w-full flex flex-col gap-3",
												children: [
													/* @__PURE__ */ jsx(SocialButton, {
														icon: /* @__PURE__ */ jsx(GoogleIcon, {}),
														label: "Sign up with Google",
														onClick: onGoogleSignUp,
														disabled: loading
													}),
													/* @__PURE__ */ jsx(SocialButton, {
														icon: /* @__PURE__ */ jsx(FacebookIcon, {}),
														label: "Sign up with Facebook",
														onClick: onFacebookSignUp,
														disabled: loading
													}),
													/* @__PURE__ */ jsx(SocialButton, {
														icon: /* @__PURE__ */ jsx(AppleIcon, {}),
														label: "Sign up with Apple",
														onClick: onAppleSignUp,
														disabled: loading
													})
												]
											})] }),
											variant === "header-navigation" && /* @__PURE__ */ jsx(SocialButton, {
												icon: /* @__PURE__ */ jsx(GoogleIcon, {}),
												label: "Sign up with Google",
												onClick: onGoogleSignUp,
												disabled: loading
											})
										]
									})
								]
							}),
							(variant === "social-leading" || variant === "header-navigation") && /* @__PURE__ */ jsx("div", {
								className: "delight-stagger",
								style: { "--delight-delay": "500ms" },
								children: /* @__PURE__ */ jsx(Button, {
									type: "button",
									appearance: "link",
									variant: "primary",
									size: "sm",
									onClick: onSAMLSignUp,
									disabled: loading,
									children: "Continue with SAML SSO"
								})
							}),
							(variant === "simple" || variant === "social-logins") && /* @__PURE__ */ jsxs("div", {
								className: "w-full flex items-baseline justify-center gap-1 delight-stagger",
								style: { "--delight-delay": "500ms" },
								children: [/* @__PURE__ */ jsx("p", {
									className: "text-sm leading-5 text-muted-foreground",
									children: resolvedFooterText
								}), /* @__PURE__ */ jsx(Button, {
									type: "button",
									appearance: "link",
									variant: "primary",
									size: "sm",
									onClick: onLogInLinkClick,
									disabled: loading,
									children: resolvedFooterLinkText
								})]
							})
						] })
					]
				})
			})
		]
	});
});
SignupPage.displayName = "SignupPage";
//#endregion
export { SignupPage };

//# sourceMappingURL=index486.js.map