motion-ui-skill 2.0.0

package/components/forms/contact-form.tsx

@@ -0,0 +1,417 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type FormEvent,
+} from "react";
+
+import { AlertCircle, ChevronRight, Loader2 } from "lucide-react";
+
+import { cn } from "@/lib/cn";
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+type ContactFormValues = Readonly<{
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+}>;
+
+type ContactFormErrors = Partial<Record<keyof ContactFormValues, string>>;
+
+export type ContactFormProps = Readonly<
+  {
+    title?: string;
+    subtitle?: string;
+    submitLabel?: string;
+    successTitle?: string;
+    successMessage?: string;
+    submitErrorMessage?: string;
+    maxMessageLength?: number;
+    loading?: boolean;
+    onSubmit?: (values: ContactFormValues) => void | Promise<void>;
+  } & Omit<ComponentPropsWithoutRef<"form">, "onSubmit">
+>;
+
+function validateContact(
+  values: ContactFormValues,
+  maxLength: number,
+): ContactFormErrors {
+  const errors: ContactFormErrors = {};
+  const name = values.name.trim();
+  const email = values.email.trim();
+  const subject = values.subject.trim();
+  const message = values.message.trim();
+
+  if (name.length < 2) errors.name = "Please enter your name.";
+  if (!email) errors.email = "Email is required.";
+  else if (!EMAIL_RE.test(email)) errors.email = "Enter a valid email address.";
+  if (subject.length < 3)
+    errors.subject = "Subject must be at least 3 characters.";
+  if (message.length < 10)
+    errors.message = "Message must be at least 10 characters.";
+  else if (message.length > maxLength)
+    errors.message = `Message cannot exceed ${maxLength} characters.`;
+
+  return errors;
+}
+
+export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
+  function ContactForm(
+    {
+      className,
+      title = "Get in touch",
+      subtitle = "We usually reply within one business day.",
+      submitLabel = "Send message",
+      successTitle = "Message sent",
+      successMessage = "Thanks for reaching out. We'll get back to you soon.",
+      submitErrorMessage = "Your message wasn't sent. Please try again.",
+      maxMessageLength = 1000,
+      loading = false,
+      onSubmit,
+      onReset,
+      ...props
+    },
+    ref,
+  ) {
+    const formId = useId();
+    const honeypotRef = useRef<HTMLInputElement>(null);
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [subject, setSubject] = useState("");
+    const [message, setMessage] = useState("");
+    const [errors, setErrors] = useState<ContactFormErrors>({});
+    const [submitError, setSubmitError] = useState("");
+    const [submitting, setSubmitting] = useState(false);
+    const [success, setSuccess] = useState(false);
+
+    const busy = loading || submitting;
+    const messageLimit = Math.max(10, Math.floor(maxMessageLength));
+
+    const clearError = useCallback((key: keyof ContactFormValues) => {
+      setSubmitError("");
+      setErrors((prev) => ({ ...prev, [key]: undefined }));
+    }, []);
+
+    const handleSubmit = useCallback(
+      async (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        if (busy || success) return;
+
+        if (honeypotRef.current?.value.trim()) {
+          setSuccess(true);
+          return;
+        }
+
+        const values: ContactFormValues = { name, email, subject, message };
+        const nextErrors = validateContact(values, messageLimit);
+        setErrors(nextErrors);
+        if (Object.keys(nextErrors).length > 0) return;
+
+        setSubmitting(true);
+        setSubmitError("");
+        try {
+          await onSubmit?.({
+            name: name.trim(),
+            email: email.trim(),
+            subject: subject.trim(),
+            message: message.trim(),
+          });
+          setSuccess(true);
+        } catch {
+          setSubmitError(submitErrorMessage);
+        } finally {
+          setSubmitting(false);
+        }
+      },
+      [
+        busy,
+        email,
+        message,
+        messageLimit,
+        name,
+        onSubmit,
+        subject,
+        submitErrorMessage,
+        success,
+      ],
+    );
+
+    const handleReset = useCallback(
+      (event: FormEvent<HTMLFormElement>) => {
+        onReset?.(event);
+        if (event.defaultPrevented) return;
+        setName("");
+        setEmail("");
+        setSubject("");
+        setMessage("");
+        setErrors({});
+        setSubmitError("");
+      },
+      [onReset],
+    );
+
+    if (success) {
+      return (
+        <div
+          ref={ref}
+          data-slot="contact-form"
+          data-success
+          role="status"
+          aria-live="polite"
+          className={cn(
+            "w-full max-w-md rounded-3xl bg-white p-6 font-sans md:p-8",
+            className,
+          )}
+        >
+          <h2 className="font-sans text-2xl font-semibold tracking-tight text-neutral-950">
+            {successTitle}
+          </h2>
+          <p className="mt-3 text-sm leading-6 text-neutral-500">
+            {successMessage}
+          </p>
+        </div>
+      );
+    }
+
+    return (
+      <div ref={ref} className={cn("w-full max-w-md", className)}>
+        <form
+          data-slot="contact-form"
+          aria-busy={busy}
+          noValidate
+          onSubmit={handleSubmit}
+          onReset={handleReset}
+          className="rounded-3xl bg-white p-6 font-sans md:p-8"
+          {...props}
+        >
+          <input
+            ref={honeypotRef}
+            type="text"
+            name="company"
+            tabIndex={-1}
+            autoComplete="off"
+            aria-hidden
+            className="sr-only"
+          />
+
+          <div className="mb-7">
+            <h2 className="font-sans text-2xl font-semibold tracking-tight text-neutral-950">
+              {title}
+            </h2>
+            <p className="mt-3 max-w-sm text-sm leading-6 text-neutral-500">
+              {subtitle}
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <div className="grid gap-4 md:grid-cols-2">
+              <div>
+                <label
+                  htmlFor={`${formId}-name`}
+                  className="mb-1.5 block text-sm font-medium text-neutral-900"
+                >
+                  Name
+                </label>
+                <input
+                  id={`${formId}-name`}
+                  name="name"
+                  type="text"
+                  autoComplete="name"
+                  disabled={busy}
+                  value={name}
+                  aria-invalid={Boolean(errors.name)}
+                  aria-describedby={
+                    errors.name ? `${formId}-name-error` : undefined
+                  }
+                  onChange={(event) => {
+                    setName(event.target.value);
+                    clearError("name");
+                  }}
+                  className={cn(
+                    "h-11 w-full rounded-md border bg-white px-3.5 text-sm ring-0 transition-colors outline-none focus:ring-0 disabled:bg-neutral-50",
+                    errors.name
+                      ? "border-rose-300"
+                      : "border-neutral-200 focus:border-neutral-900",
+                  )}
+                  placeholder="Your name"
+                />
+                {errors.name ? (
+                  <p
+                    id={`${formId}-name-error`}
+                    role="alert"
+                    className="mt-1.5 text-xs text-rose-600"
+                  >
+                    {errors.name}
+                  </p>
+                ) : null}
+              </div>
+
+              <div>
+                <label
+                  htmlFor={`${formId}-email`}
+                  className="mb-1.5 block text-sm font-medium text-neutral-900"
+                >
+                  Email
+                </label>
+                <input
+                  id={`${formId}-email`}
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  disabled={busy}
+                  value={email}
+                  aria-invalid={Boolean(errors.email)}
+                  aria-describedby={
+                    errors.email ? `${formId}-email-error` : undefined
+                  }
+                  onChange={(event) => {
+                    setEmail(event.target.value);
+                    clearError("email");
+                  }}
+                  className={cn(
+                    "h-11 w-full rounded-md border bg-white px-3.5 text-sm ring-0 transition-colors outline-none focus:ring-0 disabled:bg-neutral-50",
+                    errors.email
+                      ? "border-rose-300"
+                      : "border-neutral-200 focus:border-neutral-900",
+                  )}
+                  placeholder="you@email.com"
+                />
+                {errors.email ? (
+                  <p
+                    id={`${formId}-email-error`}
+                    role="alert"
+                    className="mt-1.5 text-xs text-rose-600"
+                  >
+                    {errors.email}
+                  </p>
+                ) : null}
+              </div>
+            </div>
+
+            <div>
+              <label
+                htmlFor={`${formId}-subject`}
+                className="mb-1.5 block text-sm font-medium text-neutral-900"
+              >
+                Subject
+              </label>
+              <input
+                id={`${formId}-subject`}
+                name="subject"
+                type="text"
+                disabled={busy}
+                value={subject}
+                aria-invalid={Boolean(errors.subject)}
+                aria-describedby={
+                  errors.subject ? `${formId}-subject-error` : undefined
+                }
+                onChange={(event) => {
+                  setSubject(event.target.value);
+                  clearError("subject");
+                }}
+                className={cn(
+                  "h-11 w-full rounded-md border bg-white px-3.5 text-sm ring-0 transition-colors outline-none focus:ring-0 disabled:bg-neutral-50",
+                  errors.subject
+                    ? "border-rose-300"
+                    : "border-neutral-200 focus:border-neutral-900",
+                )}
+                placeholder="How can we help?"
+              />
+              {errors.subject ? (
+                <p
+                  id={`${formId}-subject-error`}
+                  role="alert"
+                  className="mt-1.5 text-xs text-rose-600"
+                >
+                  {errors.subject}
+                </p>
+              ) : null}
+            </div>
+
+            <div>
+              <div className="mb-1.5 flex items-baseline justify-between gap-2">
+                <label
+                  htmlFor={`${formId}-message`}
+                  className="text-sm font-medium text-neutral-900"
+                >
+                  Message
+                </label>
+                <span className="text-xs text-neutral-400 tabular-nums">
+                  {message.length}/{messageLimit}
+                </span>
+              </div>
+              <textarea
+                id={`${formId}-message`}
+                name="message"
+                rows={4}
+                disabled={busy}
+                value={message}
+                maxLength={messageLimit}
+                aria-invalid={Boolean(errors.message)}
+                aria-describedby={
+                  errors.message
+                    ? `${formId}-message-error`
+                    : `${formId}-message-count`
+                }
+                onChange={(event) => {
+                  setMessage(event.target.value);
+                  clearError("message");
+                }}
+                className={cn(
+                  "min-h-28 w-full resize-y rounded-md border bg-white px-3.5 py-2.5 text-sm leading-relaxed ring-0 transition-colors outline-none focus:ring-0 disabled:bg-neutral-50",
+                  errors.message
+                    ? "border-rose-300"
+                    : "border-neutral-200 focus:border-neutral-900",
+                )}
+                placeholder="Tell us more about your project…"
+              />
+              <span id={`${formId}-message-count`} className="sr-only">
+                {message.length} of {messageLimit} characters used
+              </span>
+              {errors.message ? (
+                <p
+                  id={`${formId}-message-error`}
+                  role="alert"
+                  className="mt-1.5 text-xs text-rose-600"
+                >
+                  {errors.message}
+                </p>
+              ) : null}
+            </div>
+          </div>
+
+          {submitError ? (
+            <div
+              role="alert"
+              className="mt-5 flex items-start gap-2.5 border-l-2 border-rose-500 bg-rose-50 px-3 py-2.5 text-sm text-rose-700"
+            >
+              <AlertCircle size={16} className="mt-0.5 shrink-0" aria-hidden />
+              <span>{submitError}</span>
+            </div>
+          ) : null}
+
+          <button
+            type="submit"
+            disabled={busy}
+            className="mt-6 flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-md bg-neutral-950 px-4 text-sm font-semibold text-white transition-colors hover:bg-neutral-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {busy ? (
+              <Loader2 size={16} className="animate-spin" aria-hidden />
+            ) : null}
+            {busy ? "Sending…" : submitLabel}
+            {!busy ? <ChevronRight size={15} aria-hidden /> : null}
+          </button>
+        </form>
+      </div>
+    );
+  },
+);
+
+ContactForm.displayName = "ContactForm";

package/components/forms/forgot-password-form.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useState,
+  type ComponentPropsWithoutRef,
+  type FormEvent,
+  type ReactNode,
+} from "react";
+
+import Link from "next/link";
+
+import { AlertCircle, ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+
+import { cn } from "@/lib/cn";
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+type FormLinkProps = Readonly<{
+  href: string;
+  className?: string;
+  children: ReactNode;
+}>;
+
+function isPlaceholderHref(href: string): boolean {
+  return !href || href === "#";
+}
+
+function FormLink({ href, className, children }: FormLinkProps) {
+  if (isPlaceholderHref(href)) {
+    return (
+      <button type="button" className={cn("cursor-pointer", className)}>
+        {children}
+      </button>
+    );
+  }
+
+  return (
+    <Link href={href} className={className}>
+      {children}
+    </Link>
+  );
+}
+
+export type ForgotPasswordFormProps = Readonly<
+  {
+    title?: string;
+    subtitle?: string;
+    submitLabel?: string;
+    successTitle?: string;
+    successMessage?: string;
+    backLabel?: string;
+    backHref?: string;
+    submitErrorMessage?: string;
+    loading?: boolean;
+    onSubmit?: (email: string) => void | Promise<void>;
+  } & Omit<ComponentPropsWithoutRef<"form">, "onSubmit">
+>;
+
+export const ForgotPasswordForm = forwardRef<
+  HTMLDivElement,
+  ForgotPasswordFormProps
+>(function ForgotPasswordForm(
+  {
+    className,
+    title = "Reset your password",
+    subtitle = "Enter the email linked to your account and we'll send a reset link.",
+    submitLabel = "Send reset link",
+    successTitle = "Check your inbox",
+    successMessage = "If an account exists for that email, you'll receive reset instructions shortly.",
+    backLabel = "Back to sign in",
+    backHref = "/components/login-form",
+    submitErrorMessage = "We couldn't send the reset email. Please try again.",
+    loading = false,
+    onSubmit,
+    onReset,
+    ...props
+  },
+  ref,
+) {
+  const formId = useId();
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState("");
+  const [submitError, setSubmitError] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [sentTo, setSentTo] = useState("");
+
+  const busy = loading || submitting;
+
+  const handleSubmit = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (busy || success) return;
+
+      const trimmed = email.trim();
+      if (!trimmed) {
+        setError("Email is required.");
+        return;
+      }
+      if (!EMAIL_RE.test(trimmed)) {
+        setError("Enter a valid email address.");
+        return;
+      }
+
+      setError("");
+      setSubmitError("");
+      setSubmitting(true);
+      try {
+        await onSubmit?.(trimmed);
+        setSentTo(trimmed);
+        setSuccess(true);
+      } catch {
+        setSubmitError(submitErrorMessage);
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [busy, email, onSubmit, submitErrorMessage, success],
+  );
+
+  const handleReset = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      onReset?.(event);
+      if (event.defaultPrevented) return;
+      setEmail("");
+      setError("");
+      setSubmitError("");
+    },
+    [onReset],
+  );
+
+  if (success) {
+    return (
+      <div
+        ref={ref}
+        data-slot="forgot-password-form"
+        data-success
+        role="status"
+        aria-live="polite"
+        className={cn(
+          "w-full max-w-md rounded-3xl bg-white p-6 font-sans md:p-8",
+          className,
+        )}
+      >
+        <h2 className="font-sans text-2xl font-semibold tracking-tight text-neutral-950">
+          {successTitle}
+        </h2>
+        <p className="mt-3 text-sm leading-6 text-neutral-500">
+          {successMessage}
+        </p>
+        {sentTo ? (
+          <p className="mt-4 border-l-2 border-emerald-500 bg-emerald-50 px-3 py-2.5 font-mono text-xs text-neutral-700">
+            {sentTo}
+          </p>
+        ) : null}
+        <FormLink
+          href={backHref}
+          className="mt-6 inline-flex items-center gap-1.5 text-sm font-medium text-neutral-900 underline underline-offset-2"
+        >
+          <ChevronLeft size={14} aria-hidden />
+          {backLabel}
+        </FormLink>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={ref} className={cn("w-full max-w-md", className)}>
+      <form
+        data-slot="forgot-password-form"
+        noValidate
+        onSubmit={handleSubmit}
+        onReset={handleReset}
+        aria-busy={busy}
+        className="rounded-3xl bg-white p-6 font-sans md:p-8"
+        {...props}
+      >
+        <FormLink
+          href={backHref}
+          className="mb-5 inline-flex items-center gap-1.5 text-sm text-neutral-500 underline underline-offset-2 transition-colors hover:text-neutral-900"
+        >
+          <ChevronLeft size={14} aria-hidden />
+          {backLabel}
+        </FormLink>
+
+        <div className="mb-7">
+          <h2 className="font-sans text-2xl font-semibold tracking-tight text-neutral-950">
+            {title}
+          </h2>
+          <p className="mt-3 max-w-sm text-sm leading-6 text-neutral-500">
+            {subtitle}
+          </p>
+        </div>
+
+        <div>
+          <label
+            htmlFor={`${formId}-email`}
+            className="mb-1.5 block text-sm font-medium text-neutral-900"
+          >
+            Email address
+          </label>
+          <input
+            id={`${formId}-email`}
+            name="email"
+            type="email"
+            autoComplete="email"
+            disabled={busy}
+            value={email}
+            aria-invalid={Boolean(error)}
+            aria-describedby={error ? `${formId}-email-error` : undefined}
+            onChange={(event) => {
+              setEmail(event.target.value);
+              setSubmitError("");
+              if (error) setError("");
+            }}
+            className={cn(
+              "h-11 w-full rounded-md border bg-white px-3.5 text-sm ring-0 transition-colors outline-none focus:ring-0 disabled:bg-neutral-50",
+              error
+                ? "border-rose-300"
+                : "border-neutral-200 focus:border-neutral-900",
+            )}
+            placeholder="you@company.com"
+          />
+          {error ? (
+            <p
+              id={`${formId}-email-error`}
+              role="alert"
+              className="mt-1.5 text-xs text-rose-600"
+            >
+              {error}
+            </p>
+          ) : null}
+        </div>
+
+        {submitError ? (
+          <div
+            role="alert"
+            className="mt-5 flex items-start gap-2.5 border-l-2 border-rose-500 bg-rose-50 px-3 py-2.5 text-sm text-rose-700"
+          >
+            <AlertCircle size={16} className="mt-0.5 shrink-0" aria-hidden />
+            <span>{submitError}</span>
+          </div>
+        ) : null}
+
+        <button
+          type="submit"
+          disabled={busy}
+          className="mt-6 flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-md bg-neutral-950 px-4 text-sm font-semibold text-white transition-colors hover:bg-neutral-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {busy ? (
+            <Loader2 size={16} className="animate-spin" aria-hidden />
+          ) : null}
+          {busy ? "Sending…" : submitLabel}
+          {!busy ? <ChevronRight size={15} aria-hidden /> : null}
+        </button>
+      </form>
+    </div>
+  );
+});
+
+ForgotPasswordForm.displayName = "ForgotPasswordForm";