import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { Separator } from "./index7.js";
import { Checkbox } from "./index24.js";
import { Input } from "./index29.js";
import { BrandIcon } from "./index55.js";
import { PageBackground } from "./index481.js";
import { cva } from "class-variance-authority";
import * as React from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/pages/LoginPage/LoginPage.tsx
var loginPageVariants = cva("min-h-screen w-full flex items-center justify-center relative overflow-hidden", {
	variants: { variant: {
		simple: "",
		"social-logins": "",
		"social-leading": ""
	} },
	defaultVariants: { variant: "simple" }
});
function SocialButton({ icon, label, onClick, disabled }) {
	return /* @__PURE__ */ jsx(Button, {
		type: "button",
		appearance: "outline",
		variant: "secondary",
		size: "lg",
		className: "w-full",
		onClick,
		disabled,
		startIcon: /* @__PURE__ */ jsx("span", {
			"aria-hidden": "true",
			children: icon
		}),
		children: label
	});
}
SocialButton.displayName = "SocialButton";
function GoogleIcon({ className }) {
	return /* @__PURE__ */ jsxs("svg", {
		className: cn("size-6", className),
		viewBox: "0 0 24 24",
		fill: "none",
		xmlns: "http://www.w3.org/2000/svg",
		"aria-hidden": "true",
		children: [
			/* @__PURE__ */ jsx("path", {
				d: "M22.501 12.2332C22.501 11.3699 22.4296 10.7399 22.2748 10.0865H12.2153V13.9832H18.12C18.001 14.9515 17.3582 16.4099 15.9296 17.3898L15.9096 17.5203L19.0902 19.9349L19.3106 19.9565C21.3343 18.1249 22.501 15.4298 22.501 12.2332Z",
				fill: "var(--brand-google-blue)"
			}),
			/* @__PURE__ */ jsx("path", {
				d: "M12.214 22.5C15.1068 22.5 17.5353 21.5666 19.3092 19.9567L15.9282 17.39C15.0235 18.0083 13.8092 18.4399 12.214 18.4399C9.38069 18.4399 6.97596 16.6083 6.11874 14.0766L5.99309 14.0871L2.68583 16.5954L2.64258 16.7132C4.40446 20.1433 8.0235 22.5 12.214 22.5Z",
				fill: "var(--brand-google-green)"
			}),
			/* @__PURE__ */ jsx("path", {
				d: "M6.12046 14.0767C5.89428 13.4234 5.76337 12.7233 5.76337 12C5.76337 11.2767 5.89428 10.5767 6.10856 9.92337L6.10257 9.78423L2.75386 7.2356L2.64429 7.28667C1.91814 8.71002 1.50146 10.3084 1.50146 12C1.50146 13.6917 1.91814 15.29 2.64429 16.7133L6.12046 14.0767Z",
				fill: "var(--brand-google-yellow)"
			}),
			/* @__PURE__ */ jsx("path", {
				d: "M12.2141 5.55997C14.2259 5.55997 15.583 6.41163 16.3569 7.12335L19.3807 4.23C17.5236 2.53834 15.1069 1.5 12.2141 1.5C8.02353 1.5 4.40447 3.85665 2.64258 7.28662L6.10686 9.92332C6.97598 7.39166 9.38073 5.55997 12.2141 5.55997Z",
				fill: "var(--brand-google-red)"
			})
		]
	});
}
function FacebookIcon({ className }) {
	return /* @__PURE__ */ jsxs("svg", {
		className: cn("size-6", className),
		viewBox: "0 0 24 24",
		fill: "none",
		xmlns: "http://www.w3.org/2000/svg",
		"aria-hidden": "true",
		children: [/* @__PURE__ */ jsx("path", {
			d: "M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.3882 22.954 10.125 23.8542V15.4688H7.07812V12H10.125V9.35625C10.125 6.34875 11.9166 4.6875 14.6576 4.6875C15.9701 4.6875 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.34 7.875 13.875 8.80008 13.875 9.75V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z",
			fill: "var(--brand-facebook)"
		}), /* @__PURE__ */ jsx("path", {
			d: "M16.6711 15.4688L17.2031 12H13.875V9.75C13.875 8.80102 14.34 7.875 15.8306 7.875H17.3438V4.92188C17.3438 4.92188 15.9705 4.6875 14.6576 4.6875C11.9166 4.6875 10.125 6.34875 10.125 9.35625V12H7.07812V15.4688H10.125V23.8542C11.3674 24.0486 12.6326 24.0486 13.875 23.8542V15.4688H16.6711Z",
			fill: "var(--card)"
		})]
	});
}
function AppleIcon({ className }) {
	return /* @__PURE__ */ jsx("svg", {
		className: cn("size-6", className),
		viewBox: "0 0 24 24",
		fill: "none",
		xmlns: "http://www.w3.org/2000/svg",
		"aria-hidden": "true",
		children: /* @__PURE__ */ jsx("path", {
			d: "M17.5438 23.5312C16.3688 24.4812 15.1125 24.4 13.9125 23.8688C12.6437 23.3188 11.475 23.3 10.15 23.8688C8.46875 24.5938 7.54375 24.475 6.49375 23.5312C0.88125 17.7437 1.71875 8.56875 8.0875 8.24375C9.66875 8.32499 10.7875 9.125 11.7375 9.1875C13.1 8.89375 14.4062 8.075 15.8562 8.18125C17.5938 8.32499 18.9187 9.03125 19.8125 10.2875C16.0875 12.4625 16.9 17.5312 20.3188 18.8812C19.6375 20.6375 18.7438 22.375 17.525 23.55L17.5438 23.5312ZM11.6 8.16875C11.4312 5.6875 13.4625 3.64375 15.7875 3.46875C16.1 6.25 13.2437 8.39375 11.6 8.16875Z",
			fill: "var(--brand-apple)"
		})
	});
}
var LoginPage = React.forwardRef(function LoginPage({ className, variant = "simple", logo, showTabs = true, title = "Log in to your account", subtitle, submitLabel, footerText = "Don't have an account?", footerLinkText = "Sign up", onSignUpClick, onLogInClick, onEmailSubmit, onForgotPasswordClick, onSignUpLinkClick, onGoogleSignIn, onFacebookSignIn, onAppleSignIn, onSAMLSignIn, loading = false, error }, ref) {
	const [email, setEmail] = React.useState("");
	const [password, setPassword] = React.useState("");
	const [rememberMe, setRememberMe] = React.useState(false);
	const resolvedSubtitle = subtitle ?? (variant === "simple" ? "Welcome back! Please enter your details." : void 0);
	const resolvedSubmitLabel = submitLabel ?? (variant === "social-logins" || variant === "social-leading" ? "Continue with email" : "Sign in");
	const handleSubmit = (e) => {
		e.preventDefault();
		if (variant === "social-leading" || variant === "social-logins") onEmailSubmit?.(email);
		else onEmailSubmit?.(email, password);
	};
	return /* @__PURE__ */ jsxs("div", {
		ref,
		"data-slot": "login-page",
		className: cn(loginPageVariants({ variant }), className),
		children: [/* @__PURE__ */ jsx(PageBackground, {
			pattern: variant === "social-leading" ? "circular" : "grid",
			offset: "top"
		}), /* @__PURE__ */ jsx("main", {
			className: "relative z-10 w-full max-w-[1280px] px-8 flex flex-col items-center",
			children: /* @__PURE__ */ jsxs("div", {
				className: "w-full max-w-[360px] flex flex-col gap-8 items-center",
				children: [
					/* @__PURE__ */ jsxs("div", {
						className: "w-full flex flex-col gap-6 items-center",
						children: [
							/* @__PURE__ */ jsx("div", {
								className: "delight-stagger",
								children: logo || /* @__PURE__ */ jsx(BrandIcon, {
									icon: "mark",
									size: "xl"
								})
							}),
							(variant === "simple" || variant === "social-logins") && /* @__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: title
								}), resolvedSubtitle && /* @__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: title
							}),
							variant === "simple" && showTabs && /* @__PURE__ */ jsxs("nav", {
								className: "w-full flex gap-0.5 bg-card/60 border border-border rounded-lg p-0.5 delight-stagger",
								"aria-label": "Account action",
								style: { "--delight-delay": "200ms" },
								children: [/* @__PURE__ */ jsx(Button, {
									type: "button",
									appearance: "ghost",
									variant: "secondary",
									size: "lg",
									className: "flex-1",
									onClick: onSignUpClick,
									children: "Sign up"
								}), /* @__PURE__ */ jsx(Button, {
									type: "button",
									appearance: "outline",
									variant: "secondary",
									size: "lg",
									className: "flex-1",
									onClick: onLogInClick,
									children: "Log in"
								})]
							})
						]
					}),
					/* @__PURE__ */ jsxs("form", {
						onSubmit: handleSubmit,
						className: "w-full flex flex-col gap-6 delight-stagger",
						style: { "--delight-delay": "300ms" },
						children: [
							variant === "social-leading" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
								className: "w-full flex flex-col gap-3",
								children: /* @__PURE__ */ jsx(SocialButton, {
									icon: /* @__PURE__ */ jsx(GoogleIcon, {}),
									label: "Continue with Google",
									onClick: onGoogleSignIn,
									disabled: loading
								})
							}), /* @__PURE__ */ jsx(Separator, {})] }),
							variant === "simple" && /* @__PURE__ */ jsxs("div", {
								className: "w-full flex flex-col gap-5",
								children: [/* @__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: "••••••••",
									value: password,
									onChange: (e) => setPassword(e.target.value),
									required: true,
									disabled: loading
								})]
							}),
							(variant === "social-logins" || variant === "social-leading") && /* @__PURE__ */ jsx("div", {
								className: "w-full flex flex-col gap-4",
								children: /* @__PURE__ */ jsx(Input, {
									type: "email",
									label: "Email",
									placeholder: "Enter your email",
									value: email,
									onChange: (e) => setEmail(e.target.value),
									required: true,
									disabled: loading,
									error
								})
							}),
							variant === "simple" && /* @__PURE__ */ jsxs("div", {
								className: "w-full flex items-center justify-between",
								children: [/* @__PURE__ */ jsx(Checkbox, {
									label: "Remember for 30 days",
									defaultChecked: rememberMe,
									onCheckedChange: setRememberMe,
									disabled: loading
								}), /* @__PURE__ */ jsx(Button, {
									type: "button",
									appearance: "link",
									variant: "primary",
									size: "sm",
									onClick: onForgotPasswordClick,
									disabled: loading,
									children: "Forgot password"
								})]
							}),
							/* @__PURE__ */ jsxs("div", {
								className: "w-full flex flex-col gap-4 delight-stagger",
								style: { "--delight-delay": "400ms" },
								children: [
									/* @__PURE__ */ jsx(Button, {
										type: "submit",
										variant: "primary",
										size: "lg",
										className: "w-full",
										loading,
										children: resolvedSubmitLabel
									}),
									variant === "simple" && /* @__PURE__ */ jsx(SocialButton, {
										icon: /* @__PURE__ */ jsx(GoogleIcon, {}),
										label: "Sign in with Google",
										onClick: onGoogleSignIn,
										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: "Continue with Google",
												onClick: onGoogleSignIn,
												disabled: loading
											}),
											/* @__PURE__ */ jsx(SocialButton, {
												icon: /* @__PURE__ */ jsx(FacebookIcon, {}),
												label: "Continue with Facebook",
												onClick: onFacebookSignIn,
												disabled: loading
											}),
											/* @__PURE__ */ jsx(SocialButton, {
												icon: /* @__PURE__ */ jsx(AppleIcon, {}),
												label: "Continue with Apple",
												onClick: onAppleSignIn,
												disabled: loading
											})
										]
									})] })
								]
							})
						]
					}),
					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: footerText
						}), /* @__PURE__ */ jsx(Button, {
							type: "button",
							appearance: "link",
							variant: "primary",
							size: "sm",
							onClick: onSignUpLinkClick,
							disabled: loading,
							children: footerLinkText
						})]
					}) : /* @__PURE__ */ jsx(Button, {
						type: "button",
						appearance: "link",
						variant: "primary",
						size: "sm",
						className: "delight-stagger",
						style: { "--delight-delay": "500ms" },
						onClick: onSAMLSignIn,
						disabled: loading,
						children: "Continue with SAML SSO"
					})
				]
			})
		})]
	});
});
LoginPage.displayName = "LoginPage";
//#endregion
export { AppleIcon, FacebookIcon, GoogleIcon, LoginPage, SocialButton };

//# sourceMappingURL=index484.js.map