@lalternative/auth 0.4.2 → 0.4.4

package/dist/index.js

@@ -13,52 +13,233 @@ function useLogout(authClient) {
   return signOut;
 }
 
+// src/components/auth-field.tsx
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AuthField({
+  label,
+  hint,
+  description,
+  invalid = false,
+  ...props
+}) {
+  const id = useId();
+  const descriptionId = description ? `${id}-description` : void 0;
+  const [revealed, setRevealed] = useState(false);
+  const isPassword = props.type === "password";
+  const type = isPassword && revealed ? "text" : props.type;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: id,
+          className: "text-sm font-medium leading-none text-foreground",
+          children: label
+        }
+      ),
+      hint
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...props,
+          id,
+          type,
+          "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",
+            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-0",
+            invalid ? "border-destructive focus-visible:border-destructive focus-visible:shadow-[0_0_0_3px_hsl(var(--destructive)/0.18)]" : "border-input focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_hsl(var(--ring)/0.14)]",
+            "disabled:cursor-not-allowed disabled:opacity-60"
+          ].filter(Boolean).join(" ")
+        }
+      ),
+      isPassword && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setRevealed((v) => !v),
+          disabled: props.disabled,
+          "aria-pressed": revealed,
+          "aria-label": revealed ? "Masquer le mot de passe" : "Afficher le mot de passe",
+          className: "absolute inset-y-0 right-0 flex w-12 items-center justify-center rounded-r-xl text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60",
+          children: /* @__PURE__ */ jsx(EyeIcon, { open: revealed })
+        }
+      )
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-xs text-muted-foreground", children: description })
+  ] });
+}
+function EyeIcon({ open }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0Z" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+        !open && /* @__PURE__ */ jsx("path", { d: "m3 3 18 18" })
+      ]
+    }
+  );
+}
+
+// src/components/auth-submit.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function AuthSubmit({
+  pending = false,
+  disabled = false,
+  pendingLabel,
+  children
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "submit",
+      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",
+        "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: [
+        pending && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute left-4 size-4 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70 motion-reduce:animate-none"
+          }
+        ),
+        pending ? pendingLabel : children
+      ]
+    }
+  );
+}
+
 // src/components/login-form.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 
 // src/components/social-buttons.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var LABELS = {
-  google: "Continue with Google",
-  github: "Continue with GitHub"
+  google: "Continuer avec Google",
+  github: "Continuer avec GitHub"
 };
 function SocialButtons({
   providers,
   onSelect,
-  disabled = false
+  disabled = false,
+  separator = "ou",
+  labels
 }) {
   if (providers.length === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-input" }) }),
-      /* @__PURE__ */ jsx("div", { className: "relative flex justify-center", children: /* @__PURE__ */ jsx("span", { className: "bg-background px-2 text-xs uppercase tracking-wider text-muted-foreground", children: "or" }) })
+  const copy = { ...LABELS, ...labels };
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs3("div", { "aria-hidden": "true", className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx3("span", { className: "h-px flex-1 bg-border" }),
+      /* @__PURE__ */ jsx3("span", { className: "text-[11px] uppercase tracking-[0.14em] text-muted-foreground", children: separator }),
+      /* @__PURE__ */ jsx3("span", { className: "h-px flex-1 bg-border" })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: providers.map((provider) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx3("div", { className: "space-y-2.5", children: providers.map((provider) => /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
         onClick: () => onSelect(provider),
         disabled,
-        className: "inline-flex h-11 w-full items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
-        children: LABELS[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",
+          "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__ */ jsx3(ProviderMark, { provider }),
+          copy[provider] ?? provider
+        ]
       },
       provider
     )) })
   ] });
 }
-
-// src/components/login-form.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function oauthErrorMessage(code) {
-  switch (code) {
-    case "account_not_linked":
-      return "This email is already registered with a password. Sign in with your password instead.";
-    case "access_denied":
-      return "Sign-in was cancelled.";
-    default:
-      return "Sign-in failed. Please try again.";
+function ProviderMark({ provider }) {
+  if (provider === "google") {
+    return /* @__PURE__ */ jsxs3("svg", { width: "17", height: "17", viewBox: "0 0 18 18", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx3(
+        "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__ */ jsx3(
+        "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__ */ jsx3(
+        "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__ */ jsx3(
+        "path",
+        {
+          fill: "#EA4335",
+          d: "M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.46.9 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.02 2.33C4.68 5.16 6.66 3.58 9 3.58Z"
+        }
+      )
+    ] });
   }
+  return /* @__PURE__ */ jsx3("svg", { width: "17", height: "17", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("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/login-form.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULTS = {
+  title: "Connexion",
+  subtitle: "Content de te revoir. Entre tes identifiants pour continuer.",
+  emailPlaceholder: "Adresse e-mail",
+  passwordPlaceholder: "Mot de passe",
+  forgotPassword: "Mot de passe oubli\xE9 ?",
+  submit: "Se connecter",
+  submitPending: "Connexion\u2026",
+  noAccount: "Pas encore de compte ?",
+  register: "Cr\xE9er un compte",
+  emailRequired: "Renseigne ton adresse e-mail",
+  passwordRequired: "Renseigne ton mot de passe",
+  invalidCredentials: "Adresse e-mail ou mot de passe incorrect",
+  // accountLinking is disabled in createPlatformAuth, so a social sign-in on an
+  // address already registered with a password is refused with this code.
+  // Without a message the button reads as broken rather than as a rejection.
+  accountNotLinked: "Cette adresse est d\xE9j\xE0 associ\xE9e \xE0 un mot de passe. Connecte-toi avec ton mot de passe.",
+  socialCancelled: "Connexion annul\xE9e.",
+  socialFailed: "La connexion a \xE9chou\xE9. R\xE9essaie."
+};
 function LoginForm({
   onSuccess,
   registerUrl = "/register",
@@ -66,20 +247,22 @@ function LoginForm({
   socialCallbackUrl = "/",
   socialProviders = [],
   coreTokenUrl = "/api/auth/core-token",
+  labels,
   authClient
 }) {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState();
-  const [isPending, setIsPending] = useState(false);
+  const t = { ...DEFAULTS, ...labels };
+  const [email, setEmail] = useState2("");
+  const [password, setPassword] = useState2("");
+  const [error, setError] = useState2();
+  const [isPending, setIsPending] = useState2(false);
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!email.trim()) {
-      setError("Please enter your email address");
+      setError(t.emailRequired);
       return;
     }
     if (!password) {
-      setError("Please enter your password");
+      setError(t.passwordRequired);
       return;
     }
     setError(void 0);
@@ -90,7 +273,7 @@ function LoginForm({
         password
       });
       if (res?.error) {
-        setError(res.error.message ?? "Invalid email or password");
+        setError(res.error.message ?? t.invalidCredentials);
         return;
       }
       if (coreTokenUrl) {
@@ -98,7 +281,7 @@ function LoginForm({
       }
       onSuccess?.();
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Invalid email or password");
+      setError(err instanceof Error ? err.message : t.invalidCredentials);
     } finally {
       setIsPending(false);
     }
@@ -111,65 +294,74 @@ function LoginForm({
         callbackURL: socialCallbackUrl
       });
     } catch (err) {
+      const code = err instanceof Error ? err.message : "";
       setError(
-        err instanceof Error ? oauthErrorMessage(err.message) : oauthErrorMessage("")
+        code === "account_not_linked" ? t.accountNotLinked : code === "access_denied" ? t.socialCancelled : t.socialFailed
       );
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsx2("h1", { className: "text-2xl font-bold tracking-tight", children: "Sign in" }),
-      /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-muted-foreground", children: "Welcome back. Enter your credentials to continue." })
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-7", children: [
+    /* @__PURE__ */ jsxs4("header", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx4("h1", { className: "text-[26px] font-semibold leading-tight tracking-[-0.02em] text-foreground sm:text-2xl", children: t.title }),
+      /* @__PURE__ */ jsx4("p", { className: "text-sm leading-relaxed text-muted-foreground", children: t.subtitle })
     ] }),
-    error && /* @__PURE__ */ jsx2("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error }),
-    /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "space-y-4", noValidate: true, children: [
-      /* @__PURE__ */ jsx2(
-        "input",
+    error && /* @__PURE__ */ jsx4(
+      "div",
+      {
+        role: "alert",
+        className: "rounded-xl border border-destructive/25 bg-destructive/10 px-3.5 py-3 text-sm leading-snug text-destructive",
+        children: error
+      }
+    ),
+    /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx4(
+        AuthField,
         {
+          label: t.emailPlaceholder,
           type: "email",
+          inputMode: "email",
           value: email,
           onChange: (e) => setEmail(e.target.value),
-          placeholder: "Email address",
           required: true,
           disabled: isPending,
           autoComplete: "email",
-          className: "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+          autoCapitalize: "none",
+          spellCheck: false,
+          invalid: !!error
         }
       ),
-      /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx2(
-          "input",
-          {
-            type: "password",
-            value: password,
-            onChange: (e) => setPassword(e.target.value),
-            placeholder: "Password",
-            required: true,
-            disabled: isPending,
-            autoComplete: "current-password",
-            className: "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
-          }
-        ),
-        /* @__PURE__ */ jsx2("div", { className: "text-right", children: /* @__PURE__ */ jsx2(
-          "a",
-          {
-            href: forgotPasswordUrl,
-            className: "text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground",
-            children: "Forgot your password?"
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsx2(
-        "button",
+      /* @__PURE__ */ jsx4(
+        AuthField,
         {
-          type: "submit",
-          disabled: isPending || !email.trim() || !password,
-          className: "inline-flex h-11 w-full items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50",
-          children: isPending ? "Signing in..." : "Sign in"
+          label: t.passwordPlaceholder,
+          type: "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          required: true,
+          disabled: isPending,
+          autoComplete: "current-password",
+          invalid: !!error,
+          hint: /* @__PURE__ */ jsx4(
+            "a",
+            {
+              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",
+              children: t.forgotPassword
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        AuthSubmit,
+        {
+          pending: isPending,
+          disabled: !email.trim() || !password,
+          pendingLabel: t.submitPending,
+          children: t.submit
         }
       )
     ] }),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx4(
       SocialButtons,
       {
         providers: socialProviders,
@@ -177,15 +369,15 @@ function LoginForm({
         disabled: isPending
       }
     ),
-    /* @__PURE__ */ jsxs2("p", { className: "text-center text-sm text-muted-foreground", children: [
-      "Don't have an account?",
+    /* @__PURE__ */ jsxs4("p", { className: "text-center text-sm text-muted-foreground", children: [
+      t.noAccount,
       " ",
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx4(
         "a",
         {
           href: registerUrl,
-          className: "font-medium text-foreground underline underline-offset-4 hover:text-foreground/80",
-          children: "Sign up"
+          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",
+          children: t.register
         }
       )
     ] })
@@ -193,34 +385,53 @@ function LoginForm({
 }
 
 // src/components/register-form.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var MIN_PASSWORD_LENGTH = 8;
+var DEFAULTS2 = {
+  title: "Cr\xE9er un compte",
+  subtitle: "Nous t'enverrons un code pour confirmer ton adresse e-mail.",
+  namePlaceholder: "Nom complet",
+  emailPlaceholder: "Adresse e-mail",
+  passwordPlaceholder: "Mot de passe",
+  passwordHint: `Au moins ${MIN_PASSWORD_LENGTH} caract\xE8res.`,
+  submit: "Cr\xE9er mon compte",
+  submitPending: "Cr\xE9ation\u2026",
+  haveAccount: "Tu as d\xE9j\xE0 un compte ?",
+  login: "Se connecter",
+  nameRequired: "Renseigne ton nom",
+  emailRequired: "Renseigne ton adresse e-mail",
+  passwordTooShort: `Le mot de passe doit faire au moins ${MIN_PASSWORD_LENGTH} caract\xE8res`,
+  signUpFailed: "La cr\xE9ation du compte a \xE9chou\xE9"
+};
 function RegisterForm({
   onSuccess,
   loginUrl = "/login",
   legal,
   socialCallbackUrl = "/",
   socialProviders = [],
+  labels,
   authClient
 }) {
-  const [name, setName] = useState2("");
-  const [email, setEmail] = useState2("");
-  const [password, setPassword] = useState2("");
-  const [error, setError] = useState2();
-  const [isPending, setIsPending] = useState2(false);
+  const t = { ...DEFAULTS2, ...labels };
+  const [name, setName] = useState3("");
+  const [email, setEmail] = useState3("");
+  const [password, setPassword] = useState3("");
+  const [error, setError] = useState3();
+  const [isPending, setIsPending] = useState3(false);
+  const tooShort = password.length > 0 && password.length < MIN_PASSWORD_LENGTH;
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!name.trim()) {
-      setError("Please enter your name");
+      setError(t.nameRequired);
       return;
     }
     if (!email.trim()) {
-      setError("Please enter your email address");
+      setError(t.emailRequired);
       return;
     }
     if (password.length < MIN_PASSWORD_LENGTH) {
-      setError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters`);
+      setError(t.passwordTooShort);
       return;
     }
     setError(void 0);
@@ -232,14 +443,12 @@ function RegisterForm({
         password
       });
       if (res?.error) {
-        setError(res.error.message ?? "Could not create your account");
+        setError(res.error.message ?? t.signUpFailed);
         return;
       }
       onSuccess?.(email.trim());
     } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Could not create your account"
-      );
+      setError(err instanceof Error ? err.message : t.signUpFailed);
     } finally {
       setIsPending(false);
     }
@@ -252,75 +461,68 @@ function RegisterForm({
         callbackURL: socialCallbackUrl
       });
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Sign-up failed");
+      setError(err instanceof Error ? err.message : t.signUpFailed);
     }
   };
-  return /* @__PURE__ */ jsxs3("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsx3("h1", { className: "text-2xl font-bold tracking-tight", children: "Create an account" }),
-      /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-muted-foreground", children: "We'll send you a code to confirm your email address." })
+  return /* @__PURE__ */ jsxs5("div", { className: "space-y-7", children: [
+    /* @__PURE__ */ jsxs5("header", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx5("h1", { className: "text-[26px] font-semibold leading-tight tracking-[-0.02em] text-foreground sm:text-2xl", children: t.title }),
+      /* @__PURE__ */ jsx5("p", { className: "text-sm leading-relaxed text-muted-foreground", children: t.subtitle })
     ] }),
-    error && /* @__PURE__ */ jsx3("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error }),
-    /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "space-y-4", noValidate: true, children: [
-      /* @__PURE__ */ jsx3(
-        "input",
+    error && /* @__PURE__ */ jsx5(
+      "div",
+      {
+        role: "alert",
+        className: "rounded-xl border border-destructive/25 bg-destructive/10 px-3.5 py-3 text-sm leading-snug text-destructive",
+        children: error
+      }
+    ),
+    /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx5(
+        AuthField,
         {
+          label: t.namePlaceholder,
           type: "text",
           value: name,
           onChange: (e) => setName(e.target.value),
-          placeholder: "Full name",
           required: true,
           disabled: isPending,
-          autoComplete: "name",
-          className: "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+          autoComplete: "name"
         }
       ),
-      /* @__PURE__ */ jsx3(
-        "input",
+      /* @__PURE__ */ jsx5(
+        AuthField,
         {
+          label: t.emailPlaceholder,
           type: "email",
+          inputMode: "email",
           value: email,
           onChange: (e) => setEmail(e.target.value),
-          placeholder: "Email address",
           required: true,
           disabled: isPending,
           autoComplete: "email",
-          className: "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+          autoCapitalize: "none",
+          spellCheck: false
         }
       ),
-      /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx3(
-          "input",
-          {
-            type: "password",
-            value: password,
-            onChange: (e) => setPassword(e.target.value),
-            placeholder: "Password",
-            required: true,
-            disabled: isPending,
-            autoComplete: "new-password",
-            "aria-describedby": "register-password-hint",
-            className: "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
-          }
-        ),
-        /* @__PURE__ */ jsxs3("p", { id: "register-password-hint", className: "text-xs text-muted-foreground", children: [
-          "At least ",
-          MIN_PASSWORD_LENGTH,
-          " characters."
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx3(
-        "button",
+      /* @__PURE__ */ jsx5(
+        AuthField,
         {
-          type: "submit",
+          label: t.passwordPlaceholder,
+          type: "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          required: true,
           disabled: isPending,
-          className: "inline-flex h-11 w-full items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50",
-          children: isPending ? "Creating account..." : "Create account"
+          autoComplete: "new-password",
+          description: t.passwordHint,
+          invalid: tooShort
         }
       ),
-      legal && /* @__PURE__ */ jsx3("div", { className: "text-center text-xs text-muted-foreground", children: legal })
+      /* @__PURE__ */ jsx5(AuthSubmit, { pending: isPending, pendingLabel: t.submitPending, children: t.submit }),
+      legal && /* @__PURE__ */ jsx5("p", { className: "text-center text-xs leading-relaxed text-muted-foreground", children: legal })
     ] }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx5(
       SocialButtons,
       {
         providers: socialProviders,
@@ -328,15 +530,15 @@ function RegisterForm({
         disabled: isPending
       }
     ),
-    /* @__PURE__ */ jsxs3("p", { className: "text-center text-sm text-muted-foreground", children: [
-      "Already have an account?",
+    /* @__PURE__ */ jsxs5("p", { className: "text-center text-sm text-muted-foreground", children: [
+      t.haveAccount,
       " ",
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx5(
         "a",
         {
           href: loginUrl,
-          className: "font-medium text-foreground underline underline-offset-4 hover:text-foreground/80",
-          children: "Sign in"
+          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",
+          children: t.login
         }
       )
     ] })
@@ -344,18 +546,18 @@ function RegisterForm({
 }
 
 // src/components/verify-email-form.tsx
-import { useState as useState3 } from "react";
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function VerifyEmailForm({
   email,
   onSuccess,
   authClient
 }) {
-  const [otp, setOtp] = useState3("");
-  const [isVerifying, setIsVerifying] = useState3(false);
-  const [isResending, setIsResending] = useState3(false);
-  const [resendMessage, setResendMessage] = useState3();
-  const [error, setError] = useState3();
+  const [otp, setOtp] = useState4("");
+  const [isVerifying, setIsVerifying] = useState4(false);
+  const [isResending, setIsResending] = useState4(false);
+  const [resendMessage, setResendMessage] = useState4();
+  const [error, setError] = useState4();
   const handleVerify = async (e) => {
     e.preventDefault();
     if (!otp.trim() || otp.length < 6) {
@@ -398,19 +600,19 @@ function VerifyEmailForm({
       setIsResending(false);
     }
   };
-  return /* @__PURE__ */ jsxs4("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxs4("div", { children: [
-      /* @__PURE__ */ jsx4("h1", { className: "text-2xl font-bold tracking-tight", children: "Verify your email" }),
-      /* @__PURE__ */ jsx4("p", { className: "mt-1 text-sm text-muted-foreground", children: email ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx6("h1", { className: "text-2xl font-bold tracking-tight", children: "Verify your email" }),
+      /* @__PURE__ */ jsx6("p", { className: "mt-1 text-sm text-muted-foreground", children: email ? /* @__PURE__ */ jsxs6(Fragment, { children: [
         "Enter the 6-digit code sent to",
         " ",
-        /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground", children: email })
+        /* @__PURE__ */ jsx6("span", { className: "font-medium text-foreground", children: email })
       ] }) : "Enter the 6-digit code sent to your email" })
     ] }),
-    error && /* @__PURE__ */ jsx4("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error }),
-    resendMessage && /* @__PURE__ */ jsx4("div", { className: "rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-xs text-green-700", children: resendMessage }),
-    /* @__PURE__ */ jsxs4("form", { onSubmit: handleVerify, className: "space-y-4", noValidate: true, children: [
-      /* @__PURE__ */ jsx4(
+    error && /* @__PURE__ */ jsx6("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error }),
+    resendMessage && /* @__PURE__ */ jsx6("div", { className: "rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-xs text-green-700", children: resendMessage }),
+    /* @__PURE__ */ jsxs6("form", { onSubmit: handleVerify, className: "space-y-4", noValidate: true, children: [
+      /* @__PURE__ */ jsx6(
         "input",
         {
           type: "text",
@@ -426,7 +628,7 @@ function VerifyEmailForm({
           className: "flex h-12 w-full rounded-md border border-input bg-background px-3 py-2 text-center text-lg tracking-[0.4em] font-mono ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx6(
         "button",
         {
           type: "submit",
@@ -435,7 +637,7 @@ function VerifyEmailForm({
           children: isVerifying ? "Verifying..." : "Verify email"
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -446,10 +648,10 @@ function VerifyEmailForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs4("p", { className: "text-center text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs6("p", { className: "text-center text-sm text-muted-foreground", children: [
       "Already verified?",
       " ",
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx6(
         "a",
         {
           href: "/login",
@@ -462,16 +664,16 @@ function VerifyEmailForm({
 }
 
 // src/components/forgot-password-form.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function ForgotPasswordForm({
   onSuccess,
   loginUrl = "/login",
   authClient
 }) {
-  const [email, setEmail] = useState4("");
-  const [error, setError] = useState4();
-  const [isPending, setIsPending] = useState4(false);
+  const [email, setEmail] = useState5("");
+  const [error, setError] = useState5();
+  const [isPending, setIsPending] = useState5(false);
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!email.trim()) {
@@ -496,14 +698,14 @@ function ForgotPasswordForm({
       setIsPending(false);
     }
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxs5("div", { children: [
-      /* @__PURE__ */ jsx5("h1", { className: "text-2xl font-bold tracking-tight", children: "Forgot your password?" }),
-      /* @__PURE__ */ jsx5("p", { className: "mt-1 text-sm text-muted-foreground", children: "Enter your email address and we'll send you a code to reset your password." })
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx7("h1", { className: "text-2xl font-bold tracking-tight", children: "Forgot your password?" }),
+      /* @__PURE__ */ jsx7("p", { className: "mt-1 text-sm text-muted-foreground", children: "Enter your email address and we'll send you a code to reset your password." })
     ] }),
-    error && /* @__PURE__ */ jsx5("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error }),
-    /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "space-y-4", noValidate: true, children: [
-      /* @__PURE__ */ jsx5(
+    error && /* @__PURE__ */ jsx7("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error }),
+    /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, className: "space-y-4", noValidate: true, children: [
+      /* @__PURE__ */ jsx7(
         "input",
         {
           type: "email",
@@ -516,7 +718,7 @@ function ForgotPasswordForm({
           className: "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "submit",
@@ -526,10 +728,10 @@ function ForgotPasswordForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs5("p", { className: "text-center text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs7("p", { className: "text-center text-sm text-muted-foreground", children: [
       "Remember your password?",
       " ",
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(
         "a",
         {
           href: loginUrl,
@@ -542,21 +744,21 @@ function ForgotPasswordForm({
 }
 
 // src/components/reset-password-form.tsx
-import { useState as useState5 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function ResetPasswordForm({
   email,
   onSuccess,
   loginUrl = "/login",
   authClient
 }) {
-  const [otp, setOtp] = useState5("");
-  const [password, setPassword] = useState5("");
-  const [confirmPassword, setConfirmPassword] = useState5("");
-  const [error, setError] = useState5();
-  const [isResetting, setIsResetting] = useState5(false);
-  const [isResending, setIsResending] = useState5(false);
-  const [resendMessage, setResendMessage] = useState5();
+  const [otp, setOtp] = useState6("");
+  const [password, setPassword] = useState6("");
+  const [confirmPassword, setConfirmPassword] = useState6("");
+  const [error, setError] = useState6();
+  const [isResetting, setIsResetting] = useState6(false);
+  const [isResending, setIsResending] = useState6(false);
+  const [resendMessage, setResendMessage] = useState6();
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!otp.trim() || otp.length < 6) {
@@ -609,20 +811,20 @@ function ResetPasswordForm({
       setIsResending(false);
     }
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxs6("div", { children: [
-      /* @__PURE__ */ jsx6("h1", { className: "text-2xl font-bold tracking-tight", children: "Reset your password" }),
-      /* @__PURE__ */ jsxs6("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxs8("div", { children: [
+      /* @__PURE__ */ jsx8("h1", { className: "text-2xl font-bold tracking-tight", children: "Reset your password" }),
+      /* @__PURE__ */ jsxs8("p", { className: "mt-1 text-sm text-muted-foreground", children: [
         "Enter the 6-digit code sent to",
         " ",
-        /* @__PURE__ */ jsx6("span", { className: "font-medium text-foreground", children: email }),
+        /* @__PURE__ */ jsx8("span", { className: "font-medium text-foreground", children: email }),
         " and your new password."
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx6("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error }),
-    resendMessage && /* @__PURE__ */ jsx6("div", { className: "rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-xs text-green-700", children: resendMessage }),
-    /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "space-y-4", noValidate: true, children: [
-      /* @__PURE__ */ jsx6(
+    error && /* @__PURE__ */ jsx8("div", { className: "rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: error }),
+    resendMessage && /* @__PURE__ */ jsx8("div", { className: "rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-xs text-green-700", children: resendMessage }),
+    /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: "space-y-4", noValidate: true, children: [
+      /* @__PURE__ */ jsx8(
         "input",
         {
           type: "text",
@@ -638,7 +840,7 @@ function ResetPasswordForm({
           className: "flex h-12 w-full rounded-md border border-input bg-background px-3 py-2 text-center text-lg tracking-[0.4em] font-mono ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "input",
         {
           type: "password",
@@ -651,7 +853,7 @@ function ResetPasswordForm({
           className: "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "input",
         {
           type: "password",
@@ -664,7 +866,7 @@ function ResetPasswordForm({
           className: "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "button",
         {
           type: "submit",
@@ -673,7 +875,7 @@ function ResetPasswordForm({
           children: isResetting ? "Resetting..." : "Reset password"
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -684,10 +886,10 @@ function ResetPasswordForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs6("p", { className: "text-center text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs8("p", { className: "text-center text-sm text-muted-foreground", children: [
       "Remember your password?",
       " ",
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         "a",
         {
           href: loginUrl,
@@ -700,7 +902,7 @@ function ResetPasswordForm({
 }
 
 // src/components/auth-layout.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function AuthLayout({
   logo,
   title,
@@ -708,19 +910,19 @@ function AuthLayout({
   children,
   footer
 }) {
-  return /* @__PURE__ */ jsx7("div", { className: "flex min-h-screen items-center justify-center bg-background", children: /* @__PURE__ */ jsxs7("div", { className: "w-full max-w-md", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "mb-10 text-center", children: [
-      logo && /* @__PURE__ */ jsx7("div", { className: "mb-6 flex justify-center", children: logo }),
-      /* @__PURE__ */ jsx7("h1", { className: "text-[32px] font-light tracking-tight", children: title }),
-      subtitle && /* @__PURE__ */ jsx7("p", { className: "mt-2 text-sm text-muted-foreground", children: subtitle })
+  return /* @__PURE__ */ jsx9("div", { className: "flex min-h-dvh flex-col bg-background px-5 pb-10 pt-12 sm:items-center sm:justify-center sm:bg-muted/40 sm:px-6 sm:py-12", children: /* @__PURE__ */ jsxs9("div", { className: "mx-auto w-full max-w-[420px]", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "mb-8 text-center sm:mb-7", children: [
+      logo && /* @__PURE__ */ jsx9("div", { className: "mb-5 flex justify-center", children: logo }),
+      /* @__PURE__ */ jsx9("p", { className: "text-sm font-medium tracking-[0.02em] text-foreground", children: title }),
+      subtitle && /* @__PURE__ */ jsx9("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle })
     ] }),
-    /* @__PURE__ */ jsx7("div", { className: "rounded-xl border bg-card p-8 shadow-sm", children }),
-    footer && /* @__PURE__ */ jsx7("div", { className: "mt-6 text-center text-xs text-muted-foreground", children: footer })
+    /* @__PURE__ */ jsx9("div", { className: "sm:rounded-2xl sm:border sm:border-border/70 sm:bg-card sm:p-8 sm:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_8px_24px_-12px_rgba(0,0,0,0.12)]", children }),
+    footer && /* @__PURE__ */ jsx9("div", { className: "mt-6 text-center text-xs leading-relaxed text-muted-foreground", children: footer })
   ] }) });
 }
 
 // src/components/invitation-notice.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function defaultSupportEmail() {
   if (typeof window === "undefined") return void 0;
   const host = window.location.hostname;
@@ -740,15 +942,15 @@ function InvitationNotice({
   action
 }) {
   const contact = supportEmail ?? defaultSupportEmail();
-  return /* @__PURE__ */ jsxs8("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxs8("div", { children: [
-      /* @__PURE__ */ jsx8("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
-      /* @__PURE__ */ jsx8("p", { className: "mt-1 text-sm text-muted-foreground", children: REASON_MESSAGE[reason] ?? REASON_MESSAGE.unknown })
+  return /* @__PURE__ */ jsxs10("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsx10("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+      /* @__PURE__ */ jsx10("p", { className: "mt-1 text-sm text-muted-foreground", children: REASON_MESSAGE[reason] ?? REASON_MESSAGE.unknown })
     ] }),
-    contact ? /* @__PURE__ */ jsxs8("p", { className: "text-sm text-muted-foreground", children: [
+    contact ? /* @__PURE__ */ jsxs10("p", { className: "text-sm text-muted-foreground", children: [
       "\xC9crivez-nous \xE0",
       " ",
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx10(
         "a",
         {
           href: `mailto:${contact}`,
@@ -763,7 +965,9 @@ function InvitationNotice({
   ] });
 }
 export {
+  AuthField,
   AuthLayout,
+  AuthSubmit,
   ForgotPasswordForm,
   InvitationNotice,
   LoginForm,