@better-auth-ui/heroui 1.6.15 → 1.6.16

package/dist/index.js

@@ -309,6 +309,10 @@ function Ze({ className: e, variant: t, ...n }) {
 							type: "email",
 							autoComplete: "email",
 							isDisabled: p,
+							validate: (e) => {
+								if (!e) return o.auth.fieldRequired;
+								if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)) return o.auth.invalidEmail;
+							},
 							children: [
 								/* @__PURE__ */ Q(z, { children: o.auth.email }),
 								/* @__PURE__ */ Q(L, {
@@ -408,6 +412,12 @@ function Qe({ className: e, variant: t, ...n }) {
 							name: "password",
 							autoComplete: "new-password",
 							isDisabled: u,
+							validate: (e) => {
+								if (!e) return o.auth.fieldRequired;
+								let t = a?.minPasswordLength, n = a?.maxPasswordLength;
+								if (t && e.length < t) return o.auth.tooShort.replace("{{min}}", String(t));
+								if (n && e.length > n) return o.auth.tooLong.replace("{{max}}", String(n));
+							},
 							children: [
 								/* @__PURE__ */ Q(z, { children: o.auth.password }),
 								/* @__PURE__ */ $(R, {
@@ -439,6 +449,12 @@ function Qe({ className: e, variant: t, ...n }) {
 							name: "confirmPassword",
 							autoComplete: "new-password",
 							isDisabled: u,
+							validate: (e) => {
+								if (!e) return o.auth.fieldRequired;
+								let t = a?.minPasswordLength, n = a?.maxPasswordLength;
+								if (t && e.length < t) return o.auth.tooShort.replace("{{min}}", String(t));
+								if (n && e.length > n) return o.auth.tooLong.replace("{{max}}", String(n));
+							},
 							children: [
 								/* @__PURE__ */ Q(z, { children: o.auth.confirmPassword }),
 								/* @__PURE__ */ $(R, {
@@ -543,6 +559,10 @@ function $e({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 								type: "email",
 								autoComplete: "email",
 								isDisabled: w,
+								validate: (e) => {
+									if (!e) return f.auth.fieldRequired;
+									if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)) return f.auth.invalidEmail;
+								},
 								children: [
 									/* @__PURE__ */ Q(z, { children: f.auth.email }),
 									/* @__PURE__ */ Q(L, {
@@ -562,6 +582,12 @@ function $e({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 								isDisabled: w,
 								value: x,
 								onChange: S,
+								validate: (e) => {
+									if (!e) return f.auth.fieldRequired;
+									let t = d?.minPasswordLength, n = d?.maxPasswordLength;
+									if (t && e.length < t) return f.auth.tooShort.replace("{{min}}", String(t));
+									if (n && e.length > n) return f.auth.tooLong.replace("{{max}}", String(n));
+								},
 								children: [
 									/* @__PURE__ */ Q(z, { children: f.auth.password }),
 									/* @__PURE__ */ Q(L, {
@@ -702,6 +728,9 @@ function tt({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 								type: "text",
 								autoComplete: "name",
 								isDisabled: E,
+								validate: (e) => {
+									if (!e) return p.auth.fieldRequired;
+								},
 								children: [
 									/* @__PURE__ */ Q(z, { children: p.auth.name }),
 									/* @__PURE__ */ Q(L, {
@@ -717,6 +746,10 @@ function tt({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 								type: "email",
 								autoComplete: "email",
 								isDisabled: E,
+								validate: (e) => {
+									if (!e) return p.auth.fieldRequired;
+									if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)) return p.auth.invalidEmail;
+								},
 								children: [
 									/* @__PURE__ */ Q(z, { children: p.auth.email }),
 									/* @__PURE__ */ Q(L, {
@@ -741,6 +774,12 @@ function tt({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 								isDisabled: E,
 								value: S,
 								onChange: te,
+								validate: (e) => {
+									if (!e) return p.auth.fieldRequired;
+									let t = f?.minPasswordLength, n = f?.maxPasswordLength;
+									if (t && e.length < t) return p.auth.tooShort.replace("{{min}}", String(t));
+									if (n && e.length > n) return p.auth.tooLong.replace("{{max}}", String(n));
+								},
 								children: [
 									/* @__PURE__ */ Q(z, { children: p.auth.password }),
 									/* @__PURE__ */ $(R, {
@@ -774,6 +813,12 @@ function tt({ className: t, socialLayout: n, socialPosition: i = "bottom", varia
 								isDisabled: E,
 								value: ne,
 								onChange: C,
+								validate: (e) => {
+									if (!e) return p.auth.fieldRequired;
+									let t = f?.minPasswordLength, n = f?.maxPasswordLength;
+									if (t && e.length < t) return p.auth.tooShort.replace("{{min}}", String(t));
+									if (n && e.length > n) return p.auth.tooLong.replace("{{max}}", String(n));
+								},
 								children: [
 									/* @__PURE__ */ Q(z, { children: p.auth.confirmPassword }),
 									/* @__PURE__ */ $(R, {

package/dist/plugins.js

@@ -687,18 +687,18 @@ function Vt(e) {
 	return e.toLowerCase().replace(/[^a-z0-9]+/g, "-");
 }
 function Ht({ value: e, onChange: t, currentSlug: n, variant: r, ...i }) {
-	let { authClient: a } = p(), { localization: o, checkSlug: s } = m($), { mutate: c, data: l, error: u, reset: d } = _(a), f = yt((e) => {
-		!s || !e.trim() || e.trim() === n || c({ slug: e.trim() });
+	let { authClient: a, localization: o } = p(), { localization: s, checkSlug: c } = m($), { mutate: l, data: u, error: d, reset: f } = _(a), h = yt((e) => {
+		!c || !e.trim() || e.trim() === n || l({ slug: e.trim() });
 	}, { wait: 500 });
 	at(() => {
-		s && (d(), f.maybeExecute(e));
+		c && (f(), h.maybeExecute(e));
 	}, [
-		s,
+		c,
 		e,
-		f.maybeExecute,
-		d
+		h.maybeExecute,
+		f
 	]);
-	let h = (e) => {
+	let g = (e) => {
 		t(Vt(e));
 	};
 	return /* @__PURE__ */ Z(G, {
@@ -706,17 +706,20 @@ function Ht({ value: e, onChange: t, currentSlug: n, variant: r, ...i }) {
 		name: "slug",
 		...i,
 		value: e,
-		onChange: h,
+		onChange: g,
+		validate: (e) => {
+			if (!e) return o.auth.fieldRequired;
+		},
 		children: [
-			/* @__PURE__ */ X(R, { children: o.slug }),
+			/* @__PURE__ */ X(R, { children: s.slug }),
 			/* @__PURE__ */ Z(L, {
 				variant: r,
 				children: [/* @__PURE__ */ X(L.Input, {
-					placeholder: o.slugPlaceholder,
+					placeholder: s.slugPlaceholder,
 					required: !0
-				}), s && !!e.trim() && e.trim() !== n && /* @__PURE__ */ X(L.Suffix, {
+				}), c && !!e.trim() && e.trim() !== n && /* @__PURE__ */ X(L.Suffix, {
 					className: "px-2",
-					children: l?.status ? /* @__PURE__ */ X(Ee, { className: "text-success" }) : u ? /* @__PURE__ */ X(O, { className: "text-danger" }) : /* @__PURE__ */ X(H, {
+					children: u?.status ? /* @__PURE__ */ X(Ee, { className: "text-success" }) : d ? /* @__PURE__ */ X(O, { className: "text-danger" }) : /* @__PURE__ */ X(H, {
 						size: "sm",
 						color: "current"
 					})
@@ -763,6 +766,9 @@ function Ut({ isOpen: e, onOpenChange: t }) {
 							isDisabled: u,
 							value: a,
 							onChange: o,
+							validate: (e) => {
+								if (!e) return r.auth.fieldRequired;
+							},
 							children: [
 								/* @__PURE__ */ X(R, { children: i.name }),
 								/* @__PURE__ */ X(I, {
@@ -1308,6 +1314,10 @@ function on({ isOpen: e, onOpenChange: t }) {
 							name: "email",
 							type: "email",
 							isDisabled: l,
+							validate: (e) => {
+								if (!e) return r.auth.fieldRequired;
+								if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)) return r.auth.invalidEmail;
+							},
 							children: [
 								/* @__PURE__ */ X(R, { children: r.auth.email }),
 								/* @__PURE__ */ X(I, {
@@ -2639,7 +2649,7 @@ function Ln({ name: e, field: t, isPending: n, variant: r }) {
 	function y(e) {
 		d(e), _(), c && v.maybeExecute(e);
 	}
-	let b = !!c && !!u.trim() && u.trim() !== l;
+	let b = !!c && !!u.trim() && u.trim() !== l, { localization: x } = p();
 	return /* @__PURE__ */ Z(G, {
 		name: e,
 		type: "text",
@@ -2650,6 +2660,11 @@ function Ln({ name: e, field: t, isPending: n, variant: r }) {
 		isReadOnly: t.readOnly,
 		value: u,
 		onChange: y,
+		validate: (e) => {
+			if (!e) return t.required ? x.auth.fieldRequired : void 0;
+			if (o && e.length < o) return x.auth.tooShort.replace("{{min}}", String(o));
+			if (s && e.length > s) return x.auth.tooLong.replace("{{max}}", String(s));
+		},
 		children: [
 			/* @__PURE__ */ X(R, { children: t.label }),
 			/* @__PURE__ */ Z(L, {
@@ -2743,6 +2758,9 @@ function zn({ className: n, socialLayout: i, socialPosition: a = "bottom", varia
 								type: "text",
 								autoComplete: "username email",
 								isDisabled: E,
+								validate: (e) => {
+									if (!e) return f.auth.fieldRequired;
+								},
 								children: [
 									/* @__PURE__ */ X(R, { children: S.username }),
 									/* @__PURE__ */ X(I, {
@@ -2762,6 +2780,12 @@ function zn({ className: n, socialLayout: i, socialPosition: a = "bottom", varia
 								isDisabled: E,
 								value: C,
 								onChange: T,
+								validate: (e) => {
+									if (!e) return f.auth.fieldRequired;
+									let t = d?.minPasswordLength, n = d?.maxPasswordLength;
+									if (t && e.length < t) return f.auth.tooShort.replace("{{min}}", String(t));
+									if (n && e.length > n) return f.auth.tooLong.replace("{{max}}", String(n));
+								},
 								children: [
 									/* @__PURE__ */ X(R, { children: f.auth.password }),
 									/* @__PURE__ */ X(I, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.15",
+  "version": "1.6.16",
   "type": "module",
   "scripts": {
     "build": "vite build",

package/src/components/auth/forgot-password.tsx

@@ -98,6 +98,11 @@ export function ForgotPassword({
             type="email"
             autoComplete="email"
             isDisabled={isPending}
+            validate={(value) => {
+              if (!value) return localization.auth.fieldRequired
+              if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
+                return localization.auth.invalidEmail
+            }}
           >
             <Label>{localization.auth.email}</Label>
 

package/src/components/auth/organization/create-organization-dialog.tsx

@@ -93,6 +93,9 @@ export function CreateOrganizationDialog({
                 isDisabled={isCreating}
                 value={name}
                 onChange={setName}
+                validate={(value) => {
+                  if (!value) return localization.auth.fieldRequired
+                }}
               >
                 <Label>{organizationLocalization.name}</Label>
 

package/src/components/auth/organization/invite-member-dialog.tsx

@@ -108,6 +108,11 @@ export function InviteMemberDialog({
                 name="email"
                 type="email"
                 isDisabled={isInviting}
+                validate={(value) => {
+                  if (!value) return localization.auth.fieldRequired
+                  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
+                    return localization.auth.invalidEmail
+                }}
               >
                 <Label>{localization.auth.email}</Label>
 

package/src/components/auth/organization/slug-field.tsx

@@ -47,7 +47,7 @@ export function SlugField({
   variant,
   ...props
 }: SlugFieldProps & TextFieldProps) {
-  const { authClient } = useAuth()
+  const { authClient, localization: authLocalization } = useAuth()
   const { localization, checkSlug: checkSlugEnabled } =
     useAuthPlugin(organizationPlugin)
 
@@ -86,6 +86,9 @@ export function SlugField({
       {...props}
       value={value}
       onChange={handleChange}
+      validate={(val) => {
+        if (!val) return authLocalization.auth.fieldRequired
+      }}
     >
       <Label>{localization.slug}</Label>
 

package/src/components/auth/reset-password.tsx

@@ -111,6 +111,18 @@ export function ResetPassword({
             name="password"
             autoComplete="new-password"
             isDisabled={isPending}
+            validate={(value) => {
+              if (!value) return localization.auth.fieldRequired
+              const min = emailAndPassword?.minPasswordLength
+              const max = emailAndPassword?.maxPasswordLength
+              if (min && value.length < min)
+                return localization.auth.tooShort.replace(
+                  "{{min}}",
+                  String(min)
+                )
+              if (max && value.length > max)
+                return localization.auth.tooLong.replace("{{max}}", String(max))
+            }}
           >
             <Label>{localization.auth.password}</Label>
 
@@ -152,6 +164,21 @@ export function ResetPassword({
               name="confirmPassword"
               autoComplete="new-password"
               isDisabled={isPending}
+              validate={(value) => {
+                if (!value) return localization.auth.fieldRequired
+                const min = emailAndPassword?.minPasswordLength
+                const max = emailAndPassword?.maxPasswordLength
+                if (min && value.length < min)
+                  return localization.auth.tooShort.replace(
+                    "{{min}}",
+                    String(min)
+                  )
+                if (max && value.length > max)
+                  return localization.auth.tooLong.replace(
+                    "{{max}}",
+                    String(max)
+                  )
+              }}
             >
               <Label>{localization.auth.confirmPassword}</Label>
 

package/src/components/auth/sign-in.tsx

@@ -156,6 +156,11 @@ export function SignIn({
               type="email"
               autoComplete="email"
               isDisabled={isPending}
+              validate={(value) => {
+                if (!value) return localization.auth.fieldRequired
+                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
+                  return localization.auth.invalidEmail
+              }}
             >
               <Label>{localization.auth.email}</Label>
 
@@ -177,6 +182,21 @@ export function SignIn({
               isDisabled={isPending}
               value={password}
               onChange={setPassword}
+              validate={(value) => {
+                if (!value) return localization.auth.fieldRequired
+                const min = emailAndPassword?.minPasswordLength
+                const max = emailAndPassword?.maxPasswordLength
+                if (min && value.length < min)
+                  return localization.auth.tooShort.replace(
+                    "{{min}}",
+                    String(min)
+                  )
+                if (max && value.length > max)
+                  return localization.auth.tooLong.replace(
+                    "{{max}}",
+                    String(max)
+                  )
+              }}
             >
               <Label>{localization.auth.password}</Label>
 

package/src/components/auth/sign-up.tsx

@@ -185,6 +185,9 @@ export function SignUp({
                 type="text"
                 autoComplete="name"
                 isDisabled={isPending}
+                validate={(value) => {
+                  if (!value) return localization.auth.fieldRequired
+                }}
               >
                 <Label>{localization.auth.name}</Label>
 
@@ -203,6 +206,11 @@ export function SignUp({
               type="email"
               autoComplete="email"
               isDisabled={isPending}
+              validate={(value) => {
+                if (!value) return localization.auth.fieldRequired
+                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
+                  return localization.auth.invalidEmail
+              }}
             >
               <Label>{localization.auth.email}</Label>
 
@@ -236,6 +244,21 @@ export function SignUp({
               isDisabled={isPending}
               value={password}
               onChange={setPassword}
+              validate={(value) => {
+                if (!value) return localization.auth.fieldRequired
+                const min = emailAndPassword?.minPasswordLength
+                const max = emailAndPassword?.maxPasswordLength
+                if (min && value.length < min)
+                  return localization.auth.tooShort.replace(
+                    "{{min}}",
+                    String(min)
+                  )
+                if (max && value.length > max)
+                  return localization.auth.tooLong.replace(
+                    "{{max}}",
+                    String(max)
+                  )
+              }}
             >
               <Label>{localization.auth.password}</Label>
 
@@ -279,6 +302,21 @@ export function SignUp({
                 isDisabled={isPending}
                 value={confirmPassword}
                 onChange={setConfirmPassword}
+                validate={(value) => {
+                  if (!value) return localization.auth.fieldRequired
+                  const min = emailAndPassword?.minPasswordLength
+                  const max = emailAndPassword?.maxPasswordLength
+                  if (min && value.length < min)
+                    return localization.auth.tooShort.replace(
+                      "{{min}}",
+                      String(min)
+                    )
+                  if (max && value.length > max)
+                    return localization.auth.tooLong.replace(
+                      "{{max}}",
+                      String(max)
+                    )
+                }}
               >
                 <Label>{localization.auth.confirmPassword}</Label>
 

package/src/components/auth/username/sign-in-username.tsx

@@ -182,6 +182,9 @@ export function SignInUsername({
               type="text"
               autoComplete="username email"
               isDisabled={isPending}
+              validate={(value) => {
+                if (!value) return localization.auth.fieldRequired
+              }}
             >
               <Label>{usernameLocalization.username}</Label>
 
@@ -203,6 +206,21 @@ export function SignInUsername({
               isDisabled={isPending}
               value={password}
               onChange={setPassword}
+              validate={(value) => {
+                if (!value) return localization.auth.fieldRequired
+                const min = emailAndPassword?.minPasswordLength
+                const max = emailAndPassword?.maxPasswordLength
+                if (min && value.length < min)
+                  return localization.auth.tooShort.replace(
+                    "{{min}}",
+                    String(min)
+                  )
+                if (max && value.length > max)
+                  return localization.auth.tooLong.replace(
+                    "{{max}}",
+                    String(max)
+                  )
+              }}
             >
               <Label>{localization.auth.password}</Label>
 

package/src/components/auth/username/username-field.tsx

@@ -76,6 +76,8 @@ export function UsernameField({
   const isCheckingAvailability =
     !!checkAvailability && !!value.trim() && value.trim() !== currentUsername
 
+  const { localization: authLocalization } = useAuth()
+
   return (
     <TextField
       name={name}
@@ -87,6 +89,22 @@ export function UsernameField({
       isReadOnly={field.readOnly}
       value={value}
       onChange={handleChange}
+      validate={(val) => {
+        if (!val) {
+          if (field.required) return authLocalization.auth.fieldRequired
+          return
+        }
+        if (minUsernameLength && val.length < minUsernameLength)
+          return authLocalization.auth.tooShort.replace(
+            "{{min}}",
+            String(minUsernameLength)
+          )
+        if (maxUsernameLength && val.length > maxUsernameLength)
+          return authLocalization.auth.tooLong.replace(
+            "{{max}}",
+            String(maxUsernameLength)
+          )
+      }}
     >
       <Label>{field.label}</Label>