Sign Up Form

1"use client";
2// beui.dev/components/blocks/signup-form
3 
4import { Eye, EyeOff, Lock, Mail, User } from "lucide-react";
5import { AnimatePresence, motion, useReducedMotion } from "motion/react";
6import {
7  type FormEvent,
8  type ReactNode,
9  useCallback,
10  useId,
11  useMemo,
12  useState,
13} from "react";
14import { StatefulButton } from "@/components/motion/button";
15import { Checkbox } from "@/components/motion/checkbox";
16import { Input } from "@/components/motion/input";
17import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
18import { cn } from "@/lib/utils";
19 
20export type SignUpStatus = "idle" | "loading" | "success" | "error";
21 
22export type SignUpValues = {
23  name: string;
24  email: string;
25  password: string;
26  confirmPassword: string;
27  terms: boolean;
28};
29 
30export type SignUpErrors = Partial<Record<keyof SignUpValues, string>>;
31 
32export type SignUpFormClassNames = {
33  root?: string;
34  header?: string;
35  title?: string;
36  description?: string;
37  fields?: string;
38  strength?: string;
39  terms?: string;
40  submit?: string;
41  footer?: string;
42};
43 
44export interface SignUpFormProps {
45  /** Controlled values. Omit for uncontrolled. */
46  values?: SignUpValues;
47  defaultValues?: Partial<SignUpValues>;
48  onValuesChange?: (values: SignUpValues) => void;
49  /** Called with valid values only. Return a promise to drive the button state. */
50  onSubmit?: (values: SignUpValues) => void | Promise<void>;
51  /** Replace the built-in rules — return a message per invalid field. */
52  validate?: (values: SignUpValues) => SignUpErrors;
53  /** Controlled submit state. Omit to let the form track it. */
54  status?: SignUpStatus;
55  /** Form-level failure message, shown above the submit button. */
56  errorMessage?: string;
57  title?: ReactNode;
58  description?: ReactNode;
59  submitLabel?: string;
60  footer?: ReactNode;
61  /** Show the password strength meter. */
62  strengthMeter?: boolean;
63  className?: string;
64  classNames?: SignUpFormClassNames;
65}
66 
67const EMPTY_VALUES: SignUpValues = {
68  name: "",
69  email: "",
70  password: "",
71  confirmPassword: "",
72  terms: false,
73};
74 
75// Deliberately permissive. Full RFC 5322 matching is impractical in a regex and
76// rejects addresses that deliver fine; the only real check is sending mail.
77const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
78 
79const MIN_PASSWORD_LENGTH = 8;
80 
81const STRENGTH_LABELS = ["Too short", "Weak", "Fair", "Good", "Strong"] as const;
82 
83const STRENGTH_COLORS = [
84  "bg-destructive",
85  "bg-destructive",
86  "bg-amber-500",
87  "bg-amber-400",
88// … truncated