@lalternative/auth 0.7.0 → 0.9.0

package/dist/index.js

@@ -21,6 +21,7 @@ function AuthField({
   hint,
   description,
   invalid = false,
+  fieldClassName = "border-foreground/30 bg-background",
   ...props
 }) {
   const id = useId();
@@ -34,7 +35,7 @@ function AuthField({
         "label",
         {
           htmlFor: id,
-          className: "text-sm font-medium leading-none text-foreground",
+          className: "text-[0.6875rem] font-semibold uppercase leading-none tracking-[0.09em] text-foreground/70",
           children: label
         }
       ),
@@ -50,13 +51,16 @@ function AuthField({
           "aria-invalid": invalid || void 0,
           "aria-describedby": descriptionId,
           className: [
-            "h-[52px] w-full rounded-xl border bg-background px-4 text-base",
-            "sm:h-11 sm:text-sm",
+            "h-[52px] w-full rounded-md border px-3.5 text-base",
+            "sm:h-[46px] sm:text-[0.9375rem]",
             isPassword ? "pr-12" : "",
-            "text-foreground placeholder:text-muted-foreground/70",
-            "transition-[border-color,box-shadow] duration-150 ease-out",
-            "focus-visible:outline-none focus-visible:ring-[3px]",
-            invalid ? "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20" : "border-input focus-visible:border-ring focus-visible:ring-ring/15",
+            "text-foreground placeholder:text-muted-foreground/60",
+            // Focus reads as the border committing rather than as a halo
+            // appearing beside it: the ring is tight and the border darkens to
+            // full ink in the same 180ms, so the field answers the caret.
+            "transition-[border-color,box-shadow] duration-200 ease-out",
+            "focus-visible:outline-none focus-visible:ring-2",
+            invalid ? "border-destructive bg-background focus-visible:border-destructive focus-visible:ring-destructive/15" : `${fieldClassName} focus-visible:border-foreground focus-visible:ring-foreground/10`,
             "disabled:cursor-not-allowed disabled:opacity-60"
           ].filter(Boolean).join(" ")
         }
@@ -105,7 +109,9 @@ function AuthSubmit({
   pending = false,
   disabled = false,
   pendingLabel,
-  children
+  children,
+  className = "bg-primary text-primary-foreground hover:bg-primary/90",
+  spacedAbove = false
 }) {
   return /* @__PURE__ */ jsxs2(
     "button",
@@ -114,10 +120,16 @@ function AuthSubmit({
       disabled: disabled || pending,
       "aria-busy": pending || void 0,
       className: [
-        "relative flex h-[52px] w-full items-center justify-center rounded-xl sm:h-11",
-        "bg-primary text-base font-medium text-primary-foreground sm:text-sm",
-        "shadow-sm transition-[background-color,transform,box-shadow] duration-150 ease-out",
-        "hover:bg-primary/90 active:translate-y-px",
+        spacedAbove ? "!mt-7" : "",
+        "relative flex h-[52px] w-full items-center justify-center rounded-md sm:h-[46px]",
+        // Slightly tracked at this weight: a wide solid button set in plain
+        // medium reads as a slab, and the letterspacing is what makes it read
+        // as typeset rather than filled in.
+        "text-[0.9375rem] font-medium tracking-[0.01em]",
+        className,
+        "transition-[background-color,transform,box-shadow] duration-200 ease-out",
+        "shadow-[0_1px_2px_rgba(0,0,0,0.08)] hover:shadow-[0_2px_8px_rgba(0,0,0,0.12)]",
+        "active:translate-y-px active:shadow-[0_1px_2px_rgba(0,0,0,0.08)]",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:pointer-events-none disabled:opacity-55"
       ].join(" "),
@@ -147,7 +159,7 @@ function AuthAlert({ children, tone = "error" }) {
       role: tone === "error" ? "alert" : "status",
       "aria-live": tone === "error" ? "assertive" : "polite",
       className: children ? [
-        "rounded-xl border px-3.5 py-3 text-sm leading-snug",
+        "rounded-lg border px-3.5 py-3 text-sm leading-snug",
         tone === "error" ? "border-destructive/25 bg-destructive/10 text-destructive" : "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
       ].join(" ") : void 0,
       children
@@ -155,21 +167,8 @@ function AuthAlert({ children, tone = "error" }) {
   );
 }
 
-// src/components/auth-heading.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function AuthHeading({
-  title,
-  subtitle,
-  titleClassName = "text-2xl font-semibold tracking-tight"
-}) {
-  return /* @__PURE__ */ jsxs3("header", { className: "space-y-1.5 text-center", children: [
-    /* @__PURE__ */ jsx4("h1", { className: `leading-tight text-foreground ${titleClassName}`, children: title }),
-    subtitle && /* @__PURE__ */ jsx4("p", { className: "text-balance text-sm leading-relaxed text-muted-foreground", children: subtitle })
-  ] });
-}
-
 // src/components/social-buttons.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var LABELS = {
   google: "Continuer avec Google",
   github: "Continuer avec GitHub"
@@ -183,17 +182,17 @@ function SocialButtons({
 }) {
   if (providers.length === 0) return null;
   const copy = { ...LABELS, ...labels };
-  return /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs4("div", { "aria-hidden": "true", className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx5("span", { className: "h-px flex-1 bg-border" }),
-      /* @__PURE__ */ jsx5("span", { className: "text-[11px] uppercase tracking-[0.14em] text-muted-foreground", children: separator }),
-      /* @__PURE__ */ jsx5("span", { className: "h-px flex-1 bg-border" })
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs3("div", { "aria-hidden": "true", className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx4("span", { className: "h-px flex-1 bg-border" }),
+      /* @__PURE__ */ jsx4("span", { className: "text-[11px] uppercase tracking-[0.14em] text-muted-foreground", children: separator }),
+      /* @__PURE__ */ jsx4("span", { className: "h-px flex-1 bg-border" })
     ] }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx4(
       "div",
       {
         className: providers.length > 1 ? "grid gap-2.5 sm:grid-cols-2" : "grid gap-2.5",
-        children: providers.map((provider) => /* @__PURE__ */ jsxs4(
+        children: providers.map((provider) => /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "button",
@@ -201,16 +200,16 @@ function SocialButtons({
             disabled,
             "aria-label": copy[provider] ?? provider,
             className: [
-              "flex h-[52px] w-full items-center justify-center gap-2.5 rounded-xl sm:h-11",
-              "border border-input bg-background text-base font-medium text-foreground sm:text-sm",
+              "flex h-[52px] w-full items-center justify-center gap-2.5 rounded-lg sm:h-11",
+              "border border-foreground/25 bg-background text-base font-medium text-foreground sm:text-sm",
               "transition-[background-color,border-color,transform] duration-150 ease-out",
               "hover:border-foreground/20 hover:bg-accent active:translate-y-px",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
               "disabled:pointer-events-none disabled:opacity-55"
             ].join(" "),
             children: [
-              /* @__PURE__ */ jsx5(ProviderMark, { provider }),
-              /* @__PURE__ */ jsx5("span", { className: providers.length > 1 ? "sm:hidden" : "", children: copy[provider] ?? provider })
+              /* @__PURE__ */ jsx4(ProviderMark, { provider }),
+              /* @__PURE__ */ jsx4("span", { className: providers.length > 1 ? "sm:hidden" : "", children: copy[provider] ?? provider })
             ]
           },
           provider
@@ -221,29 +220,29 @@ function SocialButtons({
 }
 function ProviderMark({ provider }) {
   if (provider === "google") {
-    return /* @__PURE__ */ jsxs4("svg", { width: "17", height: "17", viewBox: "0 0 18 18", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs3("svg", { width: "17", height: "17", viewBox: "0 0 18 18", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx4(
         "path",
         {
           fill: "#4285F4",
           d: "M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx4(
         "path",
         {
           fill: "#34A853",
           d: "M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.02-3.7H.96v2.33A9 9 0 0 0 9 18Z"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx4(
         "path",
         {
           fill: "#FBBC05",
           d: "M3.98 10.72a5.4 5.4 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.02-2.33Z"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx4(
         "path",
         {
           fill: "#EA4335",
@@ -252,11 +251,36 @@ function ProviderMark({ provider }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsx5("svg", { width: "17", height: "17", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M8 0a8 8 0 0 0-2.53 15.59c.4.07.55-.17.55-.38l-.01-1.49c-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.4 7.4 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48l-.01 2.2c0 .21.15.46.55.38A8 8 0 0 0 8 0Z" }) });
+  return /* @__PURE__ */ jsx4("svg", { width: "17", height: "17", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M8 0a8 8 0 0 0-2.53 15.59c.4.07.55-.17.55-.38l-.01-1.49c-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.4 7.4 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48l-.01 2.2c0 .21.15.46.55.38A8 8 0 0 0 8 0Z" }) });
+}
+
+// src/components/auth-link.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function AuthLink({ to, as: Link, className, children }) {
+  if (Link) {
+    return /* @__PURE__ */ jsx5(Link, { to, className, children });
+  }
+  return /* @__PURE__ */ jsx5("a", { href: to, className, children });
+}
+var AUTH_LINK_CLASS = "rounded font-medium text-foreground underline underline-offset-4 decoration-foreground/25 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+var AUTH_HINT_LINK_CLASS = "rounded text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+// src/invite-token.ts
+var MAX_TOKEN_LENGTH = 128;
+function normalizeInviteToken(value) {
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim();
+  if (!trimmed || trimmed.length > MAX_TOKEN_LENGTH) return void 0;
+  return trimmed;
+}
+function withInviteToken(href, token) {
+  if (!token) return href;
+  const separator = href.includes("?") ? "&" : "?";
+  return `${href}${separator}invite=${encodeURIComponent(token)}`;
 }
 
 // src/components/login-form.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULTS = {
   title: "Connexion",
   subtitle: "Content de te revoir. Entre tes identifiants pour continuer.",
@@ -285,8 +309,11 @@ function LoginForm({
   socialProviders = [],
   coreTokenUrl = "/api/auth/core-token",
   labels,
-  titleClassName,
+  submitClassName,
+  fieldClassName,
   error: externalError,
+  linkComponent,
+  invite,
   authClient
 }) {
   const t = { ...DEFAULTS, ...labels };
@@ -332,7 +359,9 @@ function LoginForm({
     try {
       await authClient.signIn.social({
         provider,
-        callbackURL: socialCallbackUrl
+        // The invitation rides the callback: an OAuth sign-up leaves the
+        // browser, and the auth handler redeems the token on the way back.
+        callbackURL: withInviteToken(socialCallbackUrl, invite)
       });
     } catch (err) {
       const code = err instanceof Error ? err.message : "";
@@ -341,17 +370,9 @@ function LoginForm({
       );
     }
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "space-y-7", children: [
-    /* @__PURE__ */ jsx6(
-      AuthHeading,
-      {
-        title: t.title,
-        subtitle: t.subtitle,
-        titleClassName
-      }
-    ),
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-7", children: [
     /* @__PURE__ */ jsx6(AuthAlert, { children: error }),
-    /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+    /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "space-y-[1.125rem]", noValidate: true, children: [
       /* @__PURE__ */ jsx6(
         AuthField,
         {
@@ -365,7 +386,8 @@ function LoginForm({
           autoComplete: "email",
           autoCapitalize: "none",
           spellCheck: false,
-          invalid: !!error
+          invalid: !!error,
+          fieldClassName
         }
       ),
       /* @__PURE__ */ jsx6(
@@ -379,11 +401,13 @@ function LoginForm({
           disabled: isPending,
           autoComplete: "current-password",
           invalid: !!error,
+          fieldClassName,
           hint: /* @__PURE__ */ jsx6(
-            "a",
+            AuthLink,
             {
-              href: forgotPasswordUrl,
-              className: "rounded text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              to: forgotPasswordUrl,
+              as: linkComponent,
+              className: AUTH_HINT_LINK_CLASS,
               children: t.forgotPassword
             }
           )
@@ -392,9 +416,11 @@ function LoginForm({
       /* @__PURE__ */ jsx6(
         AuthSubmit,
         {
+          spacedAbove: true,
           pending: isPending,
           disabled: !email.trim() || !password,
           pendingLabel: t.submitPending,
+          className: submitClassName,
           children: t.submit
         }
       )
@@ -407,24 +433,29 @@ function LoginForm({
         disabled: isPending
       }
     ),
-    /* @__PURE__ */ jsxs5("p", { className: "text-center text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs4("p", { className: "text-center text-sm text-muted-foreground", children: [
       t.noAccount,
       " ",
       /* @__PURE__ */ jsx6(
-        "a",
+        AuthLink,
         {
-          href: registerUrl,
-          className: "rounded font-medium text-foreground underline underline-offset-4 decoration-foreground/25 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          to: withInviteToken(registerUrl, invite),
+          as: linkComponent,
+          className: AUTH_LINK_CLASS,
           children: t.register
         }
       )
     ] })
   ] });
 }
+LoginForm.defaults = {
+  title: DEFAULTS.title,
+  subtitle: DEFAULTS.subtitle
+};
 
 // src/components/register-form.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var MIN_PASSWORD_LENGTH = 8;
 var DEFAULTS2 = {
   title: "Cr\xE9er un compte",
@@ -433,6 +464,8 @@ var DEFAULTS2 = {
   emailPlaceholder: "Adresse e-mail",
   passwordPlaceholder: "Mot de passe",
   passwordHint: `Au moins ${MIN_PASSWORD_LENGTH} caract\xE8res.`,
+  confirmPlaceholder: "Confirme le mot de passe",
+  passwordMismatch: "Les deux mots de passe ne correspondent pas",
   submit: "Cr\xE9er mon compte",
   submitPending: "Cr\xE9ation\u2026",
   haveAccount: "Tu as d\xE9j\xE0 un compte ?",
@@ -449,19 +482,24 @@ function RegisterForm({
   socialCallbackUrl = "/",
   socialProviders = [],
   labels,
-  titleClassName,
+  submitClassName,
+  fieldClassName,
   error: externalError,
+  linkComponent,
+  invite,
   authClient
 }) {
   const t = { ...DEFAULTS2, ...labels };
   const [name, setName] = useState3("");
   const [email, setEmail] = useState3("");
   const [password, setPassword] = useState3("");
+  const [confirmPassword, setConfirmPassword] = useState3("");
   const [ownError, setOwnError] = useState3();
   const [isPending, setIsPending] = useState3(false);
   const error = ownError ?? externalError;
   const setError = setOwnError;
   const tooShort = password.length > 0 && password.length < MIN_PASSWORD_LENGTH;
+  const mismatch = confirmPassword.length > 0 && confirmPassword !== password;
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!name.trim()) {
@@ -476,6 +514,10 @@ function RegisterForm({
       setError(t.passwordTooShort);
       return;
     }
+    if (password !== confirmPassword) {
+      setError(t.passwordMismatch);
+      return;
+    }
     setError(void 0);
     setIsPending(true);
     try {
@@ -500,23 +542,17 @@ function RegisterForm({
     try {
       await authClient.signIn.social({
         provider,
-        callbackURL: socialCallbackUrl
+        // The invitation rides the callback: an OAuth sign-up leaves the
+        // browser, and the auth handler redeems the token on the way back.
+        callbackURL: withInviteToken(socialCallbackUrl, invite)
       });
     } catch (err) {
       setError(err instanceof Error ? err.message : t.signUpFailed);
     }
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "space-y-7", children: [
-    /* @__PURE__ */ jsx7(
-      AuthHeading,
-      {
-        title: t.title,
-        subtitle: t.subtitle,
-        titleClassName
-      }
-    ),
+  return /* @__PURE__ */ jsxs5("div", { className: "space-y-7", children: [
     /* @__PURE__ */ jsx7(AuthAlert, { children: error }),
-    /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+    /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "space-y-[1.125rem]", noValidate: true, children: [
       /* @__PURE__ */ jsx7(
         AuthField,
         {
@@ -526,7 +562,8 @@ function RegisterForm({
           onChange: (e) => setName(e.target.value),
           required: true,
           disabled: isPending,
-          autoComplete: "name"
+          autoComplete: "name",
+          fieldClassName
         }
       ),
       /* @__PURE__ */ jsx7(
@@ -541,7 +578,8 @@ function RegisterForm({
           disabled: isPending,
           autoComplete: "email",
           autoCapitalize: "none",
-          spellCheck: false
+          spellCheck: false,
+          fieldClassName
         }
       ),
       /* @__PURE__ */ jsx7(
@@ -555,10 +593,34 @@ function RegisterForm({
           disabled: isPending,
           autoComplete: "new-password",
           description: t.passwordHint,
-          invalid: tooShort
+          invalid: tooShort,
+          fieldClassName
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        AuthField,
+        {
+          label: t.confirmPlaceholder,
+          type: "password",
+          value: confirmPassword,
+          onChange: (e) => setConfirmPassword(e.target.value),
+          required: true,
+          disabled: isPending,
+          autoComplete: "new-password",
+          invalid: mismatch,
+          fieldClassName
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        AuthSubmit,
+        {
+          spacedAbove: true,
+          pending: isPending,
+          pendingLabel: t.submitPending,
+          className: submitClassName,
+          children: t.submit
         }
       ),
-      /* @__PURE__ */ jsx7(AuthSubmit, { pending: isPending, pendingLabel: t.submitPending, children: t.submit }),
       legal && /* @__PURE__ */ jsx7("p", { className: "text-center text-xs leading-relaxed text-muted-foreground", children: legal })
     ] }),
     /* @__PURE__ */ jsx7(
@@ -569,26 +631,31 @@ function RegisterForm({
         disabled: isPending
       }
     ),
-    /* @__PURE__ */ jsxs6("p", { className: "text-center text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs5("p", { className: "text-center text-sm text-muted-foreground", children: [
       t.haveAccount,
       " ",
       /* @__PURE__ */ jsx7(
-        "a",
+        AuthLink,
         {
-          href: loginUrl,
-          className: "rounded font-medium text-foreground underline underline-offset-4 decoration-foreground/25 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          to: withInviteToken(loginUrl, invite),
+          as: linkComponent,
+          className: AUTH_LINK_CLASS,
           children: t.login
         }
       )
     ] })
   ] });
 }
+RegisterForm.defaults = {
+  title: DEFAULTS2.title,
+  subtitle: DEFAULTS2.subtitle
+};
 
 // src/components/verify-email-form.tsx
 import { useState as useState4 } from "react";
 
 // src/components/auth-otp-field.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var OTP_LENGTH = 6;
 function AuthOtpField({
   label,
@@ -596,9 +663,10 @@ function AuthOtpField({
   onChange,
   disabled = false,
   invalid = false,
-  id
+  id,
+  fieldClassName = "border-foreground/25 bg-background"
 }) {
-  return /* @__PURE__ */ jsxs7("div", { className: "space-y-2", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsx8(
       "label",
       {
@@ -622,12 +690,12 @@ function AuthOtpField({
         autoComplete: "one-time-code",
         "aria-invalid": invalid || void 0,
         className: [
-          "h-[52px] w-full rounded-xl border bg-background px-4 sm:h-11",
+          "h-[52px] w-full rounded-lg border px-4 sm:h-11",
           "text-center font-mono text-lg tracking-[0.4em]",
           "text-foreground",
           "transition-[border-color,box-shadow] duration-150 ease-out",
           "focus-visible:outline-none focus-visible:ring-[3px]",
-          invalid ? "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20" : "border-input focus-visible:border-ring focus-visible:ring-ring/15",
+          invalid ? "border-destructive bg-background focus-visible:border-destructive focus-visible:ring-destructive/20" : `${fieldClassName} focus-visible:border-ring focus-visible:ring-ring/15`,
           "disabled:cursor-not-allowed disabled:opacity-60"
         ].join(" ")
       }
@@ -636,7 +704,7 @@ function AuthOtpField({
 }
 
 // src/components/verify-email-form.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULTS3 = {
   title: "V\xE9rifie ton adresse",
   subtitle: "Entre le code \xE0 6 chiffres envoy\xE9 \xE0",
@@ -659,7 +727,9 @@ function VerifyEmailForm({
   onSuccess,
   loginUrl = "/login",
   labels,
-  titleClassName,
+  submitClassName,
+  fieldClassName,
+  linkComponent,
   authClient
 }) {
   const t = { ...DEFAULTS3, ...labels };
@@ -710,18 +780,10 @@ function VerifyEmailForm({
       setIsResending(false);
     }
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "space-y-7", children: [
-    /* @__PURE__ */ jsx9(
-      AuthHeading,
-      {
-        title: t.title,
-        subtitle: email ? `${t.subtitle} ${email}.` : t.subtitleNoEmail,
-        titleClassName
-      }
-    ),
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-7", children: [
     /* @__PURE__ */ jsx9(AuthAlert, { children: error }),
     /* @__PURE__ */ jsx9(AuthAlert, { tone: "success", children: resendMessage }),
-    /* @__PURE__ */ jsxs8("form", { onSubmit: handleVerify, className: "space-y-5", noValidate: true, children: [
+    /* @__PURE__ */ jsxs7("form", { onSubmit: handleVerify, className: "space-y-[1.125rem]", noValidate: true, children: [
       /* @__PURE__ */ jsx9(
         AuthOtpField,
         {
@@ -729,20 +791,23 @@ function VerifyEmailForm({
           label: t.codePlaceholder,
           value: otp,
           onChange: setOtp,
-          disabled: isVerifying
+          disabled: isVerifying,
+          fieldClassName
         }
       ),
       /* @__PURE__ */ jsx9(
         AuthSubmit,
         {
+          spacedAbove: true,
           pending: isVerifying,
           disabled: otp.length < OTP_LENGTH,
           pendingLabel: t.submitPending,
+          className: submitClassName,
           children: t.submit
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "space-y-4 text-center text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "space-y-4 text-center text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsx9(
         "button",
         {
@@ -753,14 +818,15 @@ function VerifyEmailForm({
           children: isResending ? t.resendPending : t.resend
         }
       ),
-      /* @__PURE__ */ jsxs8("p", { children: [
+      /* @__PURE__ */ jsxs7("p", { children: [
         t.alreadyVerified,
         " ",
         /* @__PURE__ */ jsx9(
-          "a",
+          AuthLink,
           {
-            href: loginUrl,
-            className: "rounded font-medium text-foreground underline underline-offset-4 decoration-foreground/25 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            to: loginUrl,
+            as: linkComponent,
+            className: AUTH_LINK_CLASS,
             children: t.login
           }
         )
@@ -768,10 +834,14 @@ function VerifyEmailForm({
     ] })
   ] });
 }
+VerifyEmailForm.defaults = {
+  title: DEFAULTS3.title,
+  subtitle: DEFAULTS3.subtitle
+};
 
 // src/components/forgot-password-form.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULTS4 = {
   title: "Mot de passe oubli\xE9 ?",
   subtitle: "Entre ton adresse e-mail et nous t'enverrons un code pour le r\xE9initialiser.",
@@ -787,7 +857,9 @@ function ForgotPasswordForm({
   onSuccess,
   loginUrl = "/login",
   labels,
-  titleClassName,
+  submitClassName,
+  fieldClassName,
+  linkComponent,
   authClient
 }) {
   const t = { ...DEFAULTS4, ...labels };
@@ -818,17 +890,9 @@ function ForgotPasswordForm({
       setIsPending(false);
     }
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "space-y-7", children: [
-    /* @__PURE__ */ jsx10(
-      AuthHeading,
-      {
-        title: t.title,
-        subtitle: t.subtitle,
-        titleClassName
-      }
-    ),
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-7", children: [
     /* @__PURE__ */ jsx10(AuthAlert, { children: error }),
-    /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+    /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: "space-y-[1.125rem]", noValidate: true, children: [
       /* @__PURE__ */ jsx10(
         AuthField,
         {
@@ -848,31 +912,38 @@ function ForgotPasswordForm({
       /* @__PURE__ */ jsx10(
         AuthSubmit,
         {
+          spacedAbove: true,
           pending: isPending,
           disabled: !email.trim(),
           pendingLabel: t.submitPending,
+          className: submitClassName,
           children: t.submit
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs9("p", { className: "text-center text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs8("p", { className: "text-center text-sm text-muted-foreground", children: [
       t.rememberPassword,
       " ",
       /* @__PURE__ */ jsx10(
-        "a",
+        AuthLink,
         {
-          href: loginUrl,
-          className: "rounded font-medium text-foreground underline underline-offset-4 decoration-foreground/25 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          to: loginUrl,
+          as: linkComponent,
+          className: AUTH_LINK_CLASS,
           children: t.login
         }
       )
     ] })
   ] });
 }
+ForgotPasswordForm.defaults = {
+  title: DEFAULTS4.title,
+  subtitle: DEFAULTS4.subtitle
+};
 
 // src/components/reset-password-form.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var MIN_PASSWORD_LENGTH2 = 8;
 var DEFAULTS5 = {
   title: "Nouveau mot de passe",
@@ -899,7 +970,9 @@ function ResetPasswordForm({
   onSuccess,
   loginUrl = "/login",
   labels,
-  titleClassName,
+  submitClassName,
+  fieldClassName,
+  linkComponent,
   authClient
 }) {
   const t = { ...DEFAULTS5, ...labels };
@@ -963,18 +1036,10 @@ function ResetPasswordForm({
       setIsResending(false);
     }
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "space-y-7", children: [
-    /* @__PURE__ */ jsx11(
-      AuthHeading,
-      {
-        title: t.title,
-        subtitle: t.subtitle,
-        titleClassName
-      }
-    ),
+  return /* @__PURE__ */ jsxs9("div", { className: "space-y-7", children: [
     /* @__PURE__ */ jsx11(AuthAlert, { children: error }),
     /* @__PURE__ */ jsx11(AuthAlert, { tone: "success", children: resendMessage }),
-    /* @__PURE__ */ jsxs10("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+    /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: "space-y-[1.125rem]", noValidate: true, children: [
       /* @__PURE__ */ jsx11(
         AuthOtpField,
         {
@@ -982,7 +1047,8 @@ function ResetPasswordForm({
           label: t.codePlaceholder,
           value: otp,
           onChange: setOtp,
-          disabled: isResetting
+          disabled: isResetting,
+          fieldClassName
         }
       ),
       /* @__PURE__ */ jsx11(
@@ -1015,14 +1081,16 @@ function ResetPasswordForm({
       /* @__PURE__ */ jsx11(
         AuthSubmit,
         {
+          spacedAbove: true,
           pending: isResetting,
           disabled: otp.length < OTP_LENGTH || !password || !confirmPassword,
           pendingLabel: t.submitPending,
+          className: submitClassName,
           children: t.submit
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs10("div", { className: "space-y-4 text-center text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "space-y-4 text-center text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsx11(
         "button",
         {
@@ -1033,14 +1101,15 @@ function ResetPasswordForm({
           children: isResending ? t.resendPending : t.resend
         }
       ),
-      /* @__PURE__ */ jsxs10("p", { children: [
+      /* @__PURE__ */ jsxs9("p", { children: [
         t.rememberPassword,
         " ",
         /* @__PURE__ */ jsx11(
-          "a",
+          AuthLink,
           {
-            href: loginUrl,
-            className: "rounded font-medium text-foreground underline underline-offset-4 decoration-foreground/25 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            to: loginUrl,
+            as: linkComponent,
+            className: AUTH_LINK_CLASS,
             children: t.login
           }
         )
@@ -1048,53 +1117,80 @@ function ResetPasswordForm({
     ] })
   ] });
 }
+ResetPasswordForm.defaults = {
+  title: DEFAULTS5.title,
+  subtitle: DEFAULTS5.subtitle
+};
+
+// src/components/auth-heading.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function AuthHeading({
+  title,
+  subtitle,
+  titleClassName = "text-[2rem] font-semibold leading-[1.1] tracking-[-0.03em] sm:text-[2.25rem]"
+}) {
+  return /* @__PURE__ */ jsxs10("header", { className: "space-y-2.5 text-center", children: [
+    /* @__PURE__ */ jsx12("h1", { className: `text-foreground ${titleClassName}`, children: title }),
+    subtitle && /* @__PURE__ */ jsx12("p", { className: "text-balance text-[0.9375rem] leading-relaxed text-muted-foreground", children: subtitle })
+  ] });
+}
 
 // src/components/auth-layout.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function AuthLayout({
   logo,
   panel,
+  title,
+  subtitle,
+  titleClassName,
   children,
   footer
 }) {
-  return /* @__PURE__ */ jsx12("div", { className: "flex min-h-dvh flex-col bg-background px-5 pb-10 pt-12 sm:items-center sm:bg-muted/40 sm:px-6 sm:py-16", children: /* @__PURE__ */ jsxs11(
-    "div",
-    {
-      className: `mx-auto w-full ${panel ? "max-w-4xl" : "max-w-[420px]"}`,
-      children: [
-        /* @__PURE__ */ jsxs11(
-          "div",
-          {
-            className: [
-              "sm:overflow-hidden sm:rounded-2xl sm:border sm:border-border/70 sm:bg-card sm:shadow-lg sm:shadow-black/5",
-              panel ? "md:grid md:grid-cols-2" : ""
-            ].filter(Boolean).join(" "),
-            children: [
-              /* @__PURE__ */ jsxs11("div", { className: "sm:p-8", children: [
-                logo && /* @__PURE__ */ jsx12("div", { className: "mb-7 flex justify-center", children: logo }),
-                children
-              ] }),
-              panel && // Decorative: it must never carry information the form does not,
-              // so it is hidden from assistive tech rather than described.
-              /* @__PURE__ */ jsx12(
-                "div",
-                {
-                  "aria-hidden": "true",
-                  className: "hidden bg-muted md:block [&>*]:h-full [&>*]:w-full [&>img]:object-cover",
-                  children: panel
-                }
-              )
-            ]
-          }
-        ),
-        footer && /* @__PURE__ */ jsx12("div", { className: "mt-6 text-center text-xs leading-relaxed text-muted-foreground", children: footer })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsx13("div", { className: "flex min-h-dvh flex-col bg-background px-5 pb-12 pt-14 sm:items-center sm:bg-muted/30 sm:px-6 sm:py-20", children: /* @__PURE__ */ jsxs11("div", { className: `mx-auto w-full ${panel ? "max-w-4xl" : "max-w-[400px]"}`, children: [
+    (logo || title) && // The spacing is composed, not repeated: the mark sits close to the
+    // title it introduces, and the gap down to the card is the largest
+    // on the screen — that step is what separates "who this is" from
+    // "what you do here".
+    /* @__PURE__ */ jsxs11("div", { className: "mb-10 space-y-6", children: [
+      logo && /* @__PURE__ */ jsx13("div", { className: "flex justify-center", children: logo }),
+      title && /* @__PURE__ */ jsx13(
+        AuthHeading,
+        {
+          title,
+          subtitle,
+          titleClassName
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: [
+          "sm:rounded-xl sm:border sm:border-foreground/[0.08] sm:bg-card",
+          "sm:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_8px_24px_-12px_rgba(0,0,0,0.10)]",
+          panel ? "sm:overflow-hidden md:grid md:grid-cols-2" : ""
+        ].filter(Boolean).join(" "),
+        children: [
+          panel && // Decorative: it must never carry information the form does not,
+          // so it is hidden from assistive tech rather than described.
+          /* @__PURE__ */ jsx13(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "relative hidden overflow-hidden bg-muted md:block [&>*]:absolute [&>*]:inset-0 [&>*]:h-full [&>*]:w-full [&>img]:object-cover",
+              children: panel
+            }
+          ),
+          /* @__PURE__ */ jsx13("div", { className: "sm:px-7 sm:py-8", children })
+        ]
+      }
+    ),
+    footer && /* @__PURE__ */ jsx13("div", { className: "mt-8 text-center text-xs leading-relaxed text-muted-foreground", children: footer })
+  ] }) });
 }
 
 // src/components/invitation-notice.tsx
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function defaultSupportEmail() {
   if (typeof window === "undefined") return void 0;
   const host = window.location.hostname;
@@ -1116,13 +1212,13 @@ function InvitationNotice({
   const contact = supportEmail ?? defaultSupportEmail();
   return /* @__PURE__ */ jsxs12("div", { className: "space-y-8", children: [
     /* @__PURE__ */ jsxs12("div", { children: [
-      /* @__PURE__ */ jsx13("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
-      /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm text-muted-foreground", children: REASON_MESSAGE[reason] ?? REASON_MESSAGE.unknown })
+      /* @__PURE__ */ jsx14("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+      /* @__PURE__ */ jsx14("p", { className: "mt-1 text-sm text-muted-foreground", children: REASON_MESSAGE[reason] ?? REASON_MESSAGE.unknown })
     ] }),
     contact ? /* @__PURE__ */ jsxs12("p", { className: "text-sm text-muted-foreground", children: [
       "\xC9crivez-nous \xE0",
       " ",
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         "a",
         {
           href: `mailto:${contact}`,
@@ -1136,9 +1232,35 @@ function InvitationNotice({
     action
   ] });
 }
+
+// src/oauth-error.ts
+function oauthErrorMessage(code, labels) {
+  switch (code) {
+    case "account_not_linked":
+      return labels.accountNotLinked;
+    case "access_denied":
+      return labels.socialCancelled;
+    default:
+      return labels.socialFailed;
+  }
+}
+function initialOAuthError(labels, param = "error") {
+  if (typeof window === "undefined") return void 0;
+  const code = new URLSearchParams(window.location.search).get(param);
+  if (!code) return void 0;
+  return oauthErrorMessage(code, labels);
+}
+function clearOAuthError(param = "error") {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  if (!url.searchParams.has(param)) return;
+  url.searchParams.delete(param);
+  window.history.replaceState({}, "", url.toString());
+}
 export {
   AuthField,
   AuthLayout,
+  AuthLink,
   AuthSubmit,
   ForgotPasswordForm,
   InvitationNotice,
@@ -1147,8 +1269,13 @@ export {
   ResetPasswordForm,
   SocialButtons,
   VerifyEmailForm,
+  clearOAuthError,
+  initialOAuthError,
   isInvitationFailure,
+  normalizeInviteToken,
+  oauthErrorMessage,
   useLogout,
-  useSession
+  useSession,
+  withInviteToken
 };
 //# sourceMappingURL=index.js.map