@exegia/corpora-ui 0.5.0

package/src/components/blocks/auth/login-block.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import * as React from "react";
+
+import { PasswordInput } from "@/components/composed/password-input";
+import {
+  SocialProviders,
+  type SocialProvider,
+} from "@/components/composed/social-providers";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { type AuthAccent, authAccentActionStyles } from "@/lib/auth-accent";
+import { cn } from "@/lib/utils";
+import {
+  AuthCard,
+  AuthError,
+  AuthSeparator,
+  AuthSuccess,
+  MorphStep,
+  Reveal,
+  type AuthStatus,
+} from "./auth-shell";
+
+export interface LoginBlockProps {
+  title?: string;
+  description?: string;
+  /** Brand mark rendered above the title. Omit for no logo row at all. */
+  logo?: React.ReactNode;
+  /** Brand accent for the primary action. Omit to keep the default primary. */
+  accent?: AuthAccent;
+  /** Social providers to offer; empty array hides the social section. */
+  providers?: SocialProvider[];
+  showRememberMe?: boolean;
+  showForgotPassword?: boolean;
+  /** Reject (or throw) to show the error state with the error's message. */
+  onSubmit?: (data: {
+    email: string;
+    password: string;
+    remember: boolean;
+  }) => Promise<void> | void;
+  onProviderSelect?: (provider: SocialProvider) => Promise<void> | void;
+  onForgotPassword?: () => void;
+  onSignup?: () => void;
+}
+
+export function LoginBlock({
+  title = "Login to your account",
+  description = "Enter your email and password to login",
+  logo,
+  accent,
+  providers = ["google", "apple", "github"],
+  showRememberMe = true,
+  showForgotPassword = true,
+  onSubmit,
+  onProviderSelect,
+  onForgotPassword,
+  onSignup,
+}: LoginBlockProps) {
+  const emailId = React.useId();
+  const rememberId = React.useId();
+  const [status, setStatus] = React.useState<AuthStatus>("idle");
+  const [error, setError] = React.useState<string | null>(null);
+  const [loadingProvider, setLoadingProvider] =
+    React.useState<SocialProvider | null>(null);
+  const [remember, setRemember] = React.useState(false);
+  const [email, setEmail] = React.useState("");
+  const [emailValid, setEmailValid] = React.useState(false);
+  const [password, setPassword] = React.useState("");
+
+  const busy = status === "loading" || loadingProvider !== null;
+
+  // Progressive disclosure: each step unlocks the next. The password field is
+  // gated on the email input's own constraint validation (required + type
+  // email), the submit button on the password being non-empty — a login form
+  // verifies a credential rather than enforcing policy, so strength rules here
+  // would lock out anyone whose password predates them. The submit gate
+  // re-checks emailValid so a stale password (typed, then the email was edited
+  // back into an invalid state) can't leave the button on its own.
+  const passwordValid = password.trim().length > 0;
+  const canSubmit = emailValid && passwordValid;
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    // Enter in any field submits the form even while the button is hidden.
+    if (!canSubmit) return;
+    const form = new FormData(event.currentTarget);
+    setError(null);
+    setStatus("loading");
+    try {
+      await onSubmit?.({
+        email: String(form.get("email") ?? ""),
+        password: String(form.get("password") ?? ""),
+        remember,
+      });
+      setStatus("success");
+    } catch (cause) {
+      setStatus("idle");
+      setError(cause instanceof Error ? cause.message : "Unable to login.");
+    }
+  }
+
+  async function handleProvider(provider: SocialProvider) {
+    setError(null);
+    setLoadingProvider(provider);
+    try {
+      await onProviderSelect?.(provider);
+      setStatus("success");
+    } catch (cause) {
+      setError(
+        cause instanceof Error ? cause.message : "Unable to login.",
+      );
+    } finally {
+      setLoadingProvider(null);
+    }
+  }
+
+  return (
+    <AuthCard
+      title={title}
+      description={description}
+      logo={logo}
+      accent={accent}
+      footer={
+        status !== "success" && (
+          <>
+            Don&apos;t have an account?{" "}
+            <Button variant="link" onClick={onSignup}>
+              Sign up
+            </Button>
+          </>
+        )
+      }
+    >
+      <MorphStep step={status === "success" ? "success" : "form"}>
+        {status === "success" ? (
+          <AuthSuccess
+            title="Welcome back"
+            description="You are now logged in."
+          />
+        ) : (
+          <div className="flex flex-col gap-4">
+            <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+              <Field name="email">
+                <FieldLabel htmlFor={emailId}>Email</FieldLabel>
+                <Input
+                  id={emailId}
+                  aria-label="Email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  placeholder="you@example.com"
+                  required
+                  disabled={busy}
+                  value={email}
+                  onChange={(event) => {
+                    setEmail(event.currentTarget.value);
+                    setEmailValid(event.currentTarget.validity.valid);
+                  }}
+                />
+              </Field>
+              <Reveal show={emailValid}>
+                <Field name="password">
+                  <FieldLabel htmlFor="password">Password</FieldLabel>
+                  <PasswordInput
+                    id="password"
+                    name="password"
+                    autoComplete="current-password"
+                    required
+                    disabled={busy}
+                    value={password}
+                    onChange={(event) => setPassword(event.target.value)}
+                  />
+                  {showForgotPassword && (
+                    // self-end: Field root is items-start, so this aligns the
+                    // link with the input's trailing edge. sm:text-xs is
+                    // required — the cva's sm:text-sm survives tailwind-merge
+                    // and would otherwise win at the breakpoint.
+                    <Button
+                      variant="link"
+                      type="button"
+                      className="self-end font-normal text-muted-foreground text-xs hover:text-foreground sm:text-xs"
+                      onClick={onForgotPassword}
+                    >
+                      Forgot password?
+                    </Button>
+                  )}
+                </Field>
+              </Reveal>
+              {showRememberMe && (
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id={rememberId}
+                    checked={remember}
+                    onCheckedChange={(checked) => setRemember(checked)}
+                    disabled={busy}
+                  />
+                  <Label htmlFor={rememberId} className="font-normal">
+                    Remember me
+                  </Label>
+                </div>
+              )}
+              <AuthError message={error} />
+              <Reveal show={canSubmit}>
+                <Button
+                  className={cn("w-full", accent && authAccentActionStyles)}
+                  type="submit"
+                  loading={status === "loading"}
+                  disabled={busy}
+                >
+                  Login
+                </Button>
+              </Reveal>
+            </form>
+            {providers.length > 0 && (
+              // The social providers retire once the email path is filled in
+              // and valid — the user has committed to a path, so the
+              // alternatives are just noise. They come back if a field is
+              // invalidated again. gap-4 on the wrapper reproduces the spacing
+              // the two children had as direct flex items of the column above.
+              <Reveal show={!canSubmit} className="flex flex-col gap-4">
+                <AuthSeparator label="Or continue with" />
+                <SocialProviders
+                  providers={providers}
+                  action="login"
+                  loadingProvider={loadingProvider}
+                  disabled={status === "loading"}
+                  onSelect={handleProvider}
+                />
+              </Reveal>
+            )}
+          </div>
+        )}
+      </MorphStep>
+    </AuthCard>
+  );
+}

package/src/components/blocks/auth/signup-block.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  PasswordInput,
+  getPasswordStrength,
+  passwordRequirements,
+} from "@/components/composed/password-input";
+import {
+  SocialProviders,
+  type SocialProvider,
+} from "@/components/composed/social-providers";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { type AuthAccent, authAccentActionStyles } from "@/lib/auth-accent";
+import { cn } from "@/lib/utils";
+import {
+  AuthCard,
+  AuthError,
+  AuthSeparator,
+  AuthSuccess,
+  MorphStep,
+  Reveal,
+  type AuthStatus,
+} from "./auth-shell";
+
+export interface SignupBlockProps {
+  title?: string;
+  description?: string;
+  /** Brand mark rendered above the title. Omit for no logo row at all. */
+  logo?: React.ReactNode;
+  /** Brand accent for the primary action. Omit to keep the default primary. */
+  accent?: AuthAccent;
+  providers?: SocialProvider[];
+  showNameField?: boolean;
+  /** Require the terms checkbox before submitting. */
+  showTerms?: boolean;
+  /** Block submission until every password requirement is met. */
+  enforceStrongPassword?: boolean;
+  onSubmit?: (data: {
+    name: string;
+    email: string;
+    password: string;
+  }) => Promise<void> | void;
+  onProviderSelect?: (provider: SocialProvider) => Promise<void> | void;
+  onLogin?: () => void;
+  onTerms?: () => void;
+}
+
+export function SignupBlock({
+  title = "Create your account",
+  description = "Start exploring manuscripts in minutes",
+  logo,
+  accent,
+  providers = ["google", "apple", "github"],
+  showNameField = true,
+  showTerms = true,
+  enforceStrongPassword = true,
+  onSubmit,
+  onProviderSelect,
+  onLogin,
+  onTerms,
+}: SignupBlockProps) {
+  const nameId = React.useId();
+  const emailId = React.useId();
+  const termsId = React.useId();
+  const [status, setStatus] = React.useState<AuthStatus>("idle");
+  const [error, setError] = React.useState<string | null>(null);
+  const [loadingProvider, setLoadingProvider] =
+    React.useState<SocialProvider | null>(null);
+  const [password, setPassword] = React.useState("");
+  const [terms, setTerms] = React.useState(false);
+  // Tracked from each input's own constraint validation rather than a regex.
+  // The values stay uncontrolled — only validity is needed, and the form reads
+  // values from FormData on submit.
+  const [emailValid, setEmailValid] = React.useState(false);
+  const [nameValid, setNameValid] = React.useState(false);
+
+  const busy = status === "loading" || loadingProvider !== null;
+  const strongEnough =
+    !enforceStrongPassword ||
+    getPasswordStrength(password) === passwordRequirements.length;
+
+  // The social providers retire once the email path is filled in and valid —
+  // the user has committed to a path, so the alternatives are just noise. It
+  // comes back if they invalidate a field again.
+  const passwordValid = password.trim().length > 0 && strongEnough;
+  const emailPathComplete =
+    (!showNameField || nameValid) && emailValid && passwordValid;
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    if (!strongEnough) {
+      setError("Please meet all password requirements.");
+      return;
+    }
+    if (showTerms && !terms) {
+      setError("Please accept the terms to continue.");
+      return;
+    }
+    const form = new FormData(event.currentTarget);
+    setStatus("loading");
+    try {
+      await onSubmit?.({
+        name: String(form.get("name") ?? ""),
+        email: String(form.get("email") ?? ""),
+        password,
+      });
+      setStatus("success");
+    } catch (cause) {
+      setStatus("idle");
+      setError(
+        cause instanceof Error ? cause.message : "Unable to create account.",
+      );
+    }
+  }
+
+  async function handleProvider(provider: SocialProvider) {
+    setError(null);
+    setLoadingProvider(provider);
+    try {
+      await onProviderSelect?.(provider);
+      setStatus("success");
+    } catch (cause) {
+      setError(
+        cause instanceof Error ? cause.message : "Unable to create account.",
+      );
+    } finally {
+      setLoadingProvider(null);
+    }
+  }
+
+  return (
+    <AuthCard
+      title={title}
+      description={description}
+      logo={logo}
+      accent={accent}
+      footer={
+        status !== "success" && (
+          <>
+            Already have an account?{" "}
+            <Button variant="link" onClick={onLogin}>
+              Login
+            </Button>
+          </>
+        )
+      }
+    >
+      <MorphStep step={status === "success" ? "success" : "form"}>
+        {status === "success" ? (
+          <AuthSuccess
+            title="Account created"
+            description="Check your inbox to confirm your email address."
+          />
+        ) : (
+          <div className="flex flex-col gap-4">
+            {providers.length > 0 && (
+              // gap-4 on the wrapper reproduces the spacing the two children
+              // had as direct flex items of the column above.
+              <Reveal show={!emailPathComplete} className="flex flex-col gap-4">
+                <SocialProviders
+                  providers={providers}
+                  action="signup"
+                  loadingProvider={loadingProvider}
+                  disabled={status === "loading"}
+                  onSelect={handleProvider}
+                />
+                <AuthSeparator label="Or with email" />
+              </Reveal>
+            )}
+            <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+              {showNameField && (
+                <Field name="name">
+                  <FieldLabel htmlFor={nameId}>Name</FieldLabel>
+                  <Input
+                    aria-label="Name"
+                    id={nameId}
+                    name="name"
+                    autoComplete="name"
+                    placeholder="Your name"
+                    required
+                    disabled={busy}
+                    onChange={(event) =>
+                      setNameValid(event.currentTarget.validity.valid)
+                    }
+                  />
+                </Field>
+              )}
+              <Field name="email">
+                <FieldLabel htmlFor={emailId}>Email</FieldLabel>
+                <Input
+                  id={emailId}
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  placeholder="you@example.com"
+                  required
+                  disabled={busy}
+                  onChange={(event) =>
+                    setEmailValid(event.currentTarget.validity.valid)
+                  }
+                />
+              </Field>
+              <Reveal show={emailValid}>
+                <Field name="password">
+                  <FieldLabel>Password</FieldLabel>
+                  <PasswordInput
+                    name="password"
+                    autoComplete="new-password"
+                    placeholder="Create a password"
+                    showStrength
+                    required
+                    disabled={busy}
+                    value={password}
+                    onChange={(event) => setPassword(event.target.value)}
+                  />
+                </Field>
+              </Reveal>
+              {showTerms && (
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id={termsId}
+                    checked={terms}
+                    onCheckedChange={(checked) => setTerms(checked === true)}
+                    disabled={busy}
+                  />
+                  <Label htmlFor={termsId} className="font-normal">
+                    I agree to the{" "}
+                    <Button
+                      variant="link"
+                      type="button"
+                      onClick={onTerms}
+                    >
+                      terms
+                    </Button>
+                  </Label>
+                </div>
+              )}
+              <AuthError message={error} />
+              <Button
+                className={cn("w-full", accent && authAccentActionStyles)}
+                type="submit"
+                loading={status === "loading"}
+                disabled={busy}
+              >
+                Create account
+              </Button>
+            </form>
+          </div>
+        )}
+      </MorphStep>
+    </AuthCard>
+  );
+}

package/src/components/composed/password-input.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { CheckIcon, EyeIcon, EyeOffIcon, XIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { playCue } from "@/lib/sound";
+import { cn } from "@/lib/utils";
+
+// transitions.dev motion scale
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+export const passwordRequirements = [
+  { regex: /.{8,}/, text: "At least 8 characters" },
+  { regex: /[0-9]/, text: "At least 1 number" },
+  { regex: /[a-z]/, text: "At least 1 lowercase letter" },
+  { regex: /[A-Z]/, text: "At least 1 uppercase letter" },
+] as const;
+
+export function getPasswordStrength(password: string): number {
+  return passwordRequirements.filter((req) => req.regex.test(password)).length;
+}
+
+const STRENGTH_COLORS = [
+  "bg-border",
+  "bg-red-500",
+  "bg-orange-500",
+  "bg-amber-500",
+  "bg-emerald-500",
+] as const;
+
+export interface PasswordInputProps
+  extends Omit<React.ComponentProps<typeof InputGroupInput>, "type" | "size"> {
+  /** Render the eye toggle button. */
+  visibilityToggle?: boolean;
+  /** Render the animated strength meter and requirement checklist. */
+  showStrength?: boolean;
+  /** Play reveal/hide cues on the visibility toggle. Inert until bindSounds(). */
+  sound?: boolean;
+}
+
+/**
+ * Password field with visibility toggle and optional strength meter.
+ * Composition of InputGroup + Button (coss particles p-input-9 and
+ * p-input-group-26).
+ */
+export function PasswordInput({
+  visibilityToggle = true,
+  showStrength = false,
+  sound = true,
+  className,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  ...props
+}: PasswordInputProps) {
+  const [visible, setVisible] = React.useState(false);
+  const [uncontrolled, setUncontrolled] = React.useState(
+    String(defaultValue ?? ""),
+  );
+  const value = valueProp !== undefined ? String(valueProp) : uncontrolled;
+  const score = getPasswordStrength(value);
+
+  return (
+    <div className={cn("flex w-full flex-col gap-3", className)}>
+      <InputGroup>
+        <InputGroupInput
+          placeholder="Enter your password"
+          {...props}
+          type={visible ? "text" : "password"}
+          value={value}
+          onChange={(event) => {
+            setUncontrolled(event.target.value);
+            onChange?.(event);
+          }}
+        />
+        {visibilityToggle && (
+          <InputGroupAddon align="inline-end">
+            <Button
+              aria-label={visible ? "Hide password" : "Show password"}
+              onClick={() => {
+                // Semantic cues from the cuelume palette: bloom = reveal,
+                // droplet = dismiss. Press/release stays off to avoid layering.
+                if (sound) playCue(visible ? "droplet" : "bloom");
+                setVisible((v) => !v);
+              }}
+              size="icon-xs"
+              variant="ghost"
+              sound={false}
+            >
+              <AnimatePresence mode="wait" initial={false}>
+                <motion.span
+                  key={visible ? "off" : "on"}
+                  className="inline-flex"
+                  initial={{ opacity: 0, scale: 0.8, filter: "blur(2px)" }}
+                  animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+                  exit={{ opacity: 0, scale: 0.8, filter: "blur(2px)" }}
+                  transition={{ duration: 0.15, ease: EASE }}
+                >
+                  {visible ? (
+                    <EyeOffIcon aria-hidden="true" />
+                  ) : (
+                    <EyeIcon aria-hidden="true" />
+                  )}
+                </motion.span>
+              </AnimatePresence>
+            </Button>
+          </InputGroupAddon>
+        )}
+      </InputGroup>
+
+      <AnimatePresence initial={false}>
+        {showStrength && (
+          <motion.div
+            className="flex flex-col gap-2 overflow-hidden"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.25, ease: EASE }}
+          >
+            <div
+              aria-label="Password strength"
+              aria-valuemax={4}
+              aria-valuemin={0}
+              aria-valuenow={score}
+              className="h-1 w-full overflow-hidden rounded-full bg-border"
+              role="progressbar"
+            >
+              <motion.div
+                className={cn("h-full rounded-full", STRENGTH_COLORS[score])}
+                animate={{ width: `${(score / 4) * 100}%` }}
+                transition={{ duration: 0.4, ease: EASE }}
+              />
+            </div>
+            <ul
+              aria-label="Password requirements"
+              className="flex flex-col gap-1"
+            >
+              {passwordRequirements.map((req) => {
+                const met = req.regex.test(value);
+                return (
+                  <li className="flex items-center gap-2 text-xs" key={req.text}>
+                    {met ? (
+                      <CheckIcon
+                        aria-hidden="true"
+                        className="size-3.5 text-emerald-500"
+                      />
+                    ) : (
+                      <XIcon
+                        aria-hidden="true"
+                        className="size-3.5 text-muted-foreground/80"
+                      />
+                    )}
+                    <span
+                      className={
+                        met ? "text-emerald-600" : "text-muted-foreground"
+                      }
+                    >
+                      {req.text}
+                      <span className="sr-only">
+                        {met ? " - met" : " - not met"}
+                      </span>
+                    </span>
+                  </li>
+                );
+              })}
+            </ul>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}