@lalternative/auth 0.7.0 → 0.8.0

package/dist/index.js

@@ -21,6 +21,7 @@ function AuthField({
   hint,
   description,
   invalid = false,
+  fieldClassName = "border-foreground/25 bg-background",
   ...props
 }) {
   const id = useId();
@@ -50,13 +51,13 @@ function AuthField({
           "aria-invalid": invalid || void 0,
           "aria-describedby": descriptionId,
           className: [
-            "h-[52px] w-full rounded-xl border bg-background px-4 text-base",
+            "h-[52px] w-full rounded-lg border 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-[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"
           ].filter(Boolean).join(" ")
         }
@@ -105,7 +106,8 @@ function AuthSubmit({
   pending = false,
   disabled = false,
   pendingLabel,
-  children
+  children,
+  className = "bg-primary text-primary-foreground hover:bg-primary/90"
 }) {
   return /* @__PURE__ */ jsxs2(
     "button",
@@ -114,10 +116,11 @@ 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",
+        "relative flex h-[52px] w-full items-center justify-center rounded-lg sm:h-11",
+        "text-base font-medium sm:text-sm",
+        className,
         "shadow-sm transition-[background-color,transform,box-shadow] duration-150 ease-out",
-        "hover:bg-primary/90 active:translate-y-px",
+        "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(" "),
@@ -147,7 +150,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 +158,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 +173,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 +191,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 +211,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 +242,11 @@ 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/login-form.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULTS = {
   title: "Connexion",
   subtitle: "Content de te revoir. Entre tes identifiants pour continuer.",
@@ -285,7 +275,8 @@ function LoginForm({
   socialProviders = [],
   coreTokenUrl = "/api/auth/core-token",
   labels,
-  titleClassName,
+  submitClassName,
+  fieldClassName,
   error: externalError,
   authClient
 }) {
@@ -341,18 +332,10 @@ function LoginForm({
       );
     }
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "space-y-7", children: [
-    /* @__PURE__ */ jsx6(
-      AuthHeading,
-      {
-        title: t.title,
-        subtitle: t.subtitle,
-        titleClassName
-      }
-    ),
-    /* @__PURE__ */ jsx6(AuthAlert, { children: error }),
-    /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
-      /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx5(AuthAlert, { children: error }),
+    /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx5(
         AuthField,
         {
           label: t.emailPlaceholder,
@@ -365,10 +348,11 @@ function LoginForm({
           autoComplete: "email",
           autoCapitalize: "none",
           spellCheck: false,
-          invalid: !!error
+          invalid: !!error,
+          fieldClassName
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx5(
         AuthField,
         {
           label: t.passwordPlaceholder,
@@ -379,7 +363,8 @@ function LoginForm({
           disabled: isPending,
           autoComplete: "current-password",
           invalid: !!error,
-          hint: /* @__PURE__ */ jsx6(
+          fieldClassName,
+          hint: /* @__PURE__ */ jsx5(
             "a",
             {
               href: forgotPasswordUrl,
@@ -389,17 +374,18 @@ function LoginForm({
           )
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx5(
         AuthSubmit,
         {
           pending: isPending,
           disabled: !email.trim() || !password,
           pendingLabel: t.submitPending,
+          className: submitClassName,
           children: t.submit
         }
       )
     ] }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx5(
       SocialButtons,
       {
         providers: socialProviders,
@@ -407,10 +393,10 @@ 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(
+      /* @__PURE__ */ jsx5(
         "a",
         {
           href: registerUrl,
@@ -421,10 +407,14 @@ function LoginForm({
     ] })
   ] });
 }
+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 jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var MIN_PASSWORD_LENGTH = 8;
 var DEFAULTS2 = {
   title: "Cr\xE9er un compte",
@@ -433,6 +423,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,7 +441,8 @@ function RegisterForm({
   socialCallbackUrl = "/",
   socialProviders = [],
   labels,
-  titleClassName,
+  submitClassName,
+  fieldClassName,
   error: externalError,
   authClient
 }) {
@@ -457,11 +450,13 @@ function RegisterForm({
   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 +471,10 @@ function RegisterForm({
       setError(t.passwordTooShort);
       return;
     }
+    if (password !== confirmPassword) {
+      setError(t.passwordMismatch);
+      return;
+    }
     setError(void 0);
     setIsPending(true);
     try {
@@ -506,18 +505,10 @@ function RegisterForm({
       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
-      }
-    ),
-    /* @__PURE__ */ jsx7(AuthAlert, { children: error }),
-    /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
-      /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx6(AuthAlert, { children: error }),
+    /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx6(
         AuthField,
         {
           label: t.namePlaceholder,
@@ -526,10 +517,11 @@ function RegisterForm({
           onChange: (e) => setName(e.target.value),
           required: true,
           disabled: isPending,
-          autoComplete: "name"
+          autoComplete: "name",
+          fieldClassName
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx6(
         AuthField,
         {
           label: t.emailPlaceholder,
@@ -541,10 +533,11 @@ function RegisterForm({
           disabled: isPending,
           autoComplete: "email",
           autoCapitalize: "none",
-          spellCheck: false
+          spellCheck: false,
+          fieldClassName
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx6(
         AuthField,
         {
           label: t.passwordPlaceholder,
@@ -555,13 +548,36 @@ function RegisterForm({
           disabled: isPending,
           autoComplete: "new-password",
           description: t.passwordHint,
-          invalid: tooShort
+          invalid: tooShort,
+          fieldClassName
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        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, { 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__ */ jsx6(
+        AuthSubmit,
+        {
+          pending: isPending,
+          pendingLabel: t.submitPending,
+          className: submitClassName,
+          children: t.submit
+        }
+      ),
+      legal && /* @__PURE__ */ jsx6("p", { className: "text-center text-xs leading-relaxed text-muted-foreground", children: legal })
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx6(
       SocialButtons,
       {
         providers: socialProviders,
@@ -569,10 +585,10 @@ 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(
+      /* @__PURE__ */ jsx6(
         "a",
         {
           href: loginUrl,
@@ -583,12 +599,16 @@ function RegisterForm({
     ] })
   ] });
 }
+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 jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var OTP_LENGTH = 6;
 function AuthOtpField({
   label,
@@ -596,10 +616,11 @@ function AuthOtpField({
   onChange,
   disabled = false,
   invalid = false,
-  id
+  id,
+  fieldClassName = "border-foreground/25 bg-background"
 }) {
-  return /* @__PURE__ */ jsxs7("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx7(
       "label",
       {
         htmlFor: id,
@@ -607,7 +628,7 @@ function AuthOtpField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       "input",
       {
         id,
@@ -622,12 +643,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 +657,7 @@ function AuthOtpField({
 }
 
 // src/components/verify-email-form.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, 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 +680,8 @@ function VerifyEmailForm({
   onSuccess,
   loginUrl = "/login",
   labels,
-  titleClassName,
+  submitClassName,
+  fieldClassName,
   authClient
 }) {
   const t = { ...DEFAULTS3, ...labels };
@@ -710,40 +732,34 @@ 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
-      }
-    ),
-    /* @__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__ */ jsx9(
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx8(AuthAlert, { children: error }),
+    /* @__PURE__ */ jsx8(AuthAlert, { tone: "success", children: resendMessage }),
+    /* @__PURE__ */ jsxs7("form", { onSubmit: handleVerify, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx8(
         AuthOtpField,
         {
           id: "verify-email-otp",
           label: t.codePlaceholder,
           value: otp,
           onChange: setOtp,
-          disabled: isVerifying
+          disabled: isVerifying,
+          fieldClassName
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx8(
         AuthSubmit,
         {
           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__ */ jsx9(
+    /* @__PURE__ */ jsxs7("div", { className: "space-y-4 text-center text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -753,10 +769,10 @@ function VerifyEmailForm({
           children: isResending ? t.resendPending : t.resend
         }
       ),
-      /* @__PURE__ */ jsxs8("p", { children: [
+      /* @__PURE__ */ jsxs7("p", { children: [
         t.alreadyVerified,
         " ",
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx8(
           "a",
           {
             href: loginUrl,
@@ -768,10 +784,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 jsx9, 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 +807,8 @@ function ForgotPasswordForm({
   onSuccess,
   loginUrl = "/login",
   labels,
-  titleClassName,
+  submitClassName,
+  fieldClassName,
   authClient
 }) {
   const t = { ...DEFAULTS4, ...labels };
@@ -818,18 +839,10 @@ function ForgotPasswordForm({
       setIsPending(false);
     }
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "space-y-7", children: [
-    /* @__PURE__ */ jsx10(
-      AuthHeading,
-      {
-        title: t.title,
-        subtitle: t.subtitle,
-        titleClassName
-      }
-    ),
-    /* @__PURE__ */ jsx10(AuthAlert, { children: error }),
-    /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx9(AuthAlert, { children: error }),
+    /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx9(
         AuthField,
         {
           label: t.emailPlaceholder,
@@ -845,20 +858,21 @@ function ForgotPasswordForm({
           invalid: !!error
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx9(
         AuthSubmit,
         {
           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(
+      /* @__PURE__ */ jsx9(
         "a",
         {
           href: loginUrl,
@@ -869,10 +883,14 @@ function ForgotPasswordForm({
     ] })
   ] });
 }
+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 jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var MIN_PASSWORD_LENGTH2 = 8;
 var DEFAULTS5 = {
   title: "Nouveau mot de passe",
@@ -899,7 +917,8 @@ function ResetPasswordForm({
   onSuccess,
   loginUrl = "/login",
   labels,
-  titleClassName,
+  submitClassName,
+  fieldClassName,
   authClient
 }) {
   const t = { ...DEFAULTS5, ...labels };
@@ -963,29 +982,22 @@ function ResetPasswordForm({
       setIsResending(false);
     }
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "space-y-7", children: [
-    /* @__PURE__ */ jsx11(
-      AuthHeading,
-      {
-        title: t.title,
-        subtitle: t.subtitle,
-        titleClassName
-      }
-    ),
-    /* @__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__ */ jsx11(
+  return /* @__PURE__ */ jsxs9("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx10(AuthAlert, { children: error }),
+    /* @__PURE__ */ jsx10(AuthAlert, { tone: "success", children: resendMessage }),
+    /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: "space-y-5", noValidate: true, children: [
+      /* @__PURE__ */ jsx10(
         AuthOtpField,
         {
           id: "reset-password-otp",
           label: t.codePlaceholder,
           value: otp,
           onChange: setOtp,
-          disabled: isResetting
+          disabled: isResetting,
+          fieldClassName
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx10(
         AuthField,
         {
           label: t.passwordPlaceholder,
@@ -999,7 +1011,7 @@ function ResetPasswordForm({
           invalid: tooShort
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx10(
         AuthField,
         {
           label: t.confirmPlaceholder,
@@ -1012,18 +1024,19 @@ function ResetPasswordForm({
           invalid: mismatch
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx10(
         AuthSubmit,
         {
           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__ */ jsx11(
+    /* @__PURE__ */ jsxs9("div", { className: "space-y-4 text-center text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
@@ -1033,10 +1046,10 @@ function ResetPasswordForm({
           children: isResending ? t.resendPending : t.resend
         }
       ),
-      /* @__PURE__ */ jsxs10("p", { children: [
+      /* @__PURE__ */ jsxs9("p", { children: [
         t.rememberPassword,
         " ",
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx10(
           "a",
           {
             href: loginUrl,
@@ -1048,49 +1061,71 @@ function ResetPasswordForm({
     ] })
   ] });
 }
+ResetPasswordForm.defaults = {
+  title: DEFAULTS5.title,
+  subtitle: DEFAULTS5.subtitle
+};
+
+// src/components/auth-heading.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function AuthHeading({
+  title,
+  subtitle,
+  titleClassName = "text-2xl font-semibold tracking-tight"
+}) {
+  return /* @__PURE__ */ jsxs10("header", { className: "space-y-1.5 text-center", children: [
+    /* @__PURE__ */ jsx11("h1", { className: `leading-tight text-foreground ${titleClassName}`, children: title }),
+    subtitle && /* @__PURE__ */ jsx11("p", { className: "text-balance text-sm leading-relaxed text-muted-foreground", children: subtitle })
+  ] });
+}
 
 // src/components/auth-layout.tsx
 import { jsx as jsx12, 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__ */ 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: [
+    (logo || title) && /* @__PURE__ */ jsxs11("div", { className: "mb-7 space-y-5", children: [
+      logo && /* @__PURE__ */ jsx12("div", { className: "flex justify-center", children: logo }),
+      title && /* @__PURE__ */ jsx12(
+        AuthHeading,
+        {
+          title,
+          subtitle,
+          titleClassName
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: [
+          "sm:rounded-lg sm:border sm:border-border/70 sm:bg-card sm:shadow-sm",
+          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__ */ jsx12(
+            "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__ */ jsx12("div", { className: "flex flex-col justify-center sm:p-8", children })
+        ]
+      }
+    ),
+    footer && /* @__PURE__ */ jsx12("div", { className: "mt-6 text-center text-xs leading-relaxed text-muted-foreground", children: footer })
+  ] }) });
 }
 
 // src/components/invitation-notice.tsx