@exegia/corpora-ui 0.5.0

package/src/components/blocks/auth/auth-shell.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { AnimatePresence, MotionConfig, motion } from "motion/react";
+import * as React from "react";
+
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardPanel,
+  CardTitle,
+} from "@/components/ui/card";
+import { Frame, FrameFooter } from "@/components/ui/frame";
+import { Separator } from "@/components/ui/separator";
+import { type AuthAccent, authAccentVars } from "@/lib/auth-accent";
+import { cn } from "@/lib/utils";
+
+/** transitions.dev motion scale, shared by all auth blocks. */
+export const EASE = [0.22, 1, 0.36, 1] as const;
+
+export type AuthStatus = "idle" | "loading" | "success" | "error";
+
+/**
+ * Frame shell shared by the auth blocks (coss particle p-card-8): a raised
+ * Card inside a muted Frame, with the footer in the frame strip below the
+ * card. Wraps content in a MotionConfig that honors prefers-reduced-motion
+ * and layout-animates height changes so step swaps morph instead of jumping.
+ */
+export function AuthCard({
+  title,
+  description,
+  children,
+  footer,
+  className,
+  logo,
+  accent,
+}: {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+  /** Brand mark rendered above the title. Omit for no logo row at all. */
+  logo?: React.ReactNode;
+  /** Brand accent for the card's primary action. Omit to keep `bg-primary`. */
+  accent?: AuthAccent;
+}) {
+  return (
+    <MotionConfig reducedMotion="user">
+      <Frame
+        className={cn("w-full max-w-sm", className)}
+        data-accent={accent}
+        style={
+          accent ? (authAccentVars[accent] as React.CSSProperties) : undefined
+        }
+      >
+        <motion.div
+          layout
+          transition={{ duration: 0.3, ease: EASE }}
+          className="flex flex-col"
+        >
+          <Card>
+            <CardHeader>
+              {logo && (
+                // Sized like the button's icon rule: a bare img/svg gets a
+                // default height, an explicitly sized one keeps its own.
+                <div
+                  className="mb-1.5 flex items-center [&_img:not([class*='h-'])]:h-8 [&_img]:w-auto [&_svg:not([class*='size-'])]:size-8"
+                  data-slot="auth-logo"
+                >
+                  {logo}
+                </div>
+              )}
+              <CardTitle>{title}</CardTitle>
+              {description && <CardDescription>{description}</CardDescription>}
+            </CardHeader>
+            <CardPanel className="overflow-hidden">{children}</CardPanel>
+          </Card>
+          {footer && (
+            <FrameFooter className="text-center text-sm text-muted-foreground">
+              {footer}
+            </FrameFooter>
+          )}
+        </motion.div>
+      </Frame>
+    </MotionConfig>
+  );
+}
+
+/** Cross-morphs between steps (form → success, …) keyed by `step`. */
+export function MorphStep({
+  step,
+  children,
+  className,
+}: {
+  step: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <AnimatePresence mode="popLayout" initial={false}>
+      <motion.div
+        key={step}
+        className={className}
+        initial={{ opacity: 0, y: 8, filter: "blur(2px)" }}
+        animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+        exit={{ opacity: 0, y: -8, filter: "blur(2px)" }}
+        transition={{ duration: 0.25, ease: EASE }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+
+/**
+ * Progressive-disclosure wrapper: collapses/expands a step as `show` flips.
+ *
+ * `overflow-hidden` is only worn while the height is in flight — leaving it on
+ * would clip the focus ring of any full-width control inside (the ring sits
+ * 3px outside the input's border box, so the left/right edges would be cut).
+ */
+export function Reveal({
+  show,
+  children,
+  className,
+}: {
+  show: boolean;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  // Reset during render (not in an effect) when `show` flips, matching
+  // useCountdown below.
+  const [state, setState] = React.useState({ show, settled: show });
+  if (state.show !== show) setState({ show, settled: false });
+
+  return (
+    <AnimatePresence initial={false}>
+      {show && (
+        <motion.div
+          className={cn(!state.settled && "overflow-hidden", className)}
+          initial={{ height: 0, opacity: 0, y: -4, filter: "blur(2px)" }}
+          animate={{ height: "auto", opacity: 1, y: 0, filter: "blur(0px)" }}
+          exit={{ height: 0, opacity: 0, y: -4, filter: "blur(2px)" }}
+          transition={{ duration: 0.25, ease: EASE }}
+          onAnimationComplete={() =>
+            setState((current) => ({ ...current, settled: true }))
+          }
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+/** Inline error message that shakes each time `message` changes. */
+export function AuthError({ message }: { message: string | null }) {
+  return (
+    <AnimatePresence initial={false}>
+      {message && (
+        <motion.p
+          key={message}
+          role="alert"
+          className="text-sm text-destructive-foreground"
+          initial={{ opacity: 0, height: 0 }}
+          animate={{
+            opacity: 1,
+            height: "auto",
+            x: [0, -6, 6, -4, 4, 0],
+          }}
+          exit={{ opacity: 0, height: 0 }}
+          transition={{
+            duration: 0.25,
+            ease: EASE,
+            x: { duration: 0.4, ease: "easeInOut" },
+          }}
+        >
+          {message}
+        </motion.p>
+      )}
+    </AnimatePresence>
+  );
+}
+
+/** Success panel with a stroke-drawn check. */
+export function AuthSuccess({
+  title,
+  description,
+  children,
+}: {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center gap-3 py-4 text-center">
+      <motion.span
+        className="flex size-12 items-center justify-center rounded-full bg-emerald-500/12 text-emerald-600"
+        initial={{ scale: 0.6, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.4, ease: EASE }}
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          className="size-6"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <motion.path
+            d="M4 12.5l5 5L20 6.5"
+            initial={{ pathLength: 0 }}
+            animate={{ pathLength: 1 }}
+            transition={{ duration: 0.4, delay: 0.15, ease: EASE }}
+          />
+        </svg>
+      </motion.span>
+      <div className="flex flex-col gap-1">
+        <p className="font-medium">{title}</p>
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/** "Or continue with" style divider. */
+export function AuthSeparator({ label = "Or" }: { label?: string }) {
+  return (
+    <div className="flex items-center gap-3">
+      <Separator className="flex-1" />
+      <span className="text-xs text-muted-foreground uppercase">{label}</span>
+      <Separator className="flex-1" />
+    </div>
+  );
+}
+
+/** Countdown for resend links; restarts when `restartKey` changes. */
+export function useCountdown(seconds: number, restartKey: number) {
+  const [state, setState] = React.useState({ restartKey, seconds, remaining: seconds });
+
+  // Reset during render (not in an effect) when the inputs change.
+  if (state.restartKey !== restartKey || state.seconds !== seconds) {
+    setState({ restartKey, seconds, remaining: seconds });
+  }
+
+  React.useEffect(() => {
+    if (seconds <= 0) return;
+    const interval = window.setInterval(() => {
+      setState((current) =>
+        current.remaining <= 0
+          ? current
+          : { ...current, remaining: current.remaining - 1 },
+      );
+    }, 1000);
+    return () => window.clearInterval(interval);
+  }, [seconds, restartKey]);
+
+  return state.remaining;
+}

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

@@ -0,0 +1,190 @@
+"use client";
+
+import { MailIcon, SmartphoneIcon } from "lucide-react";
+import { motion } from "motion/react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { OTPField, OTPFieldInput } from "@/components/ui/otp-field";
+import { type AuthAccent, authAccentActionStyles } from "@/lib/auth-accent";
+import { cn } from "@/lib/utils";
+import {
+  AuthCard,
+  AuthError,
+  AuthSuccess,
+  EASE,
+  MorphStep,
+  useCountdown,
+  type AuthStatus,
+} from "./auth-shell";
+
+export interface CodeAuthBlockProps {
+  /** 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;
+  /** Where the code was sent; drives copy and icon. */
+  channel?: "email" | "sms";
+  /** Masked destination shown in the description, e.g. "y•••@example.com". */
+  destination?: string;
+  length?: number;
+  /** Submit automatically once all digits are entered. */
+  autoSubmit?: boolean;
+  /** Seconds before "Resend code" becomes available. 0 disables the wait. */
+  resendSeconds?: number;
+  /** Reject (or throw) to show the error shake and clear the code. */
+  onVerify?: (code: string) => Promise<void> | void;
+  onResend?: () => Promise<void> | void;
+  onBack?: () => void;
+}
+
+export function CodeAuthBlock({
+  channel = "email",
+  logo,
+  accent,
+  destination,
+  length = 6,
+  autoSubmit = true,
+  resendSeconds = 30,
+  onVerify,
+  onResend,
+  onBack,
+}: CodeAuthBlockProps) {
+  const [status, setStatus] = React.useState<AuthStatus>("idle");
+  const [error, setError] = React.useState<string | null>(null);
+  const [code, setCode] = React.useState("");
+  const [resendCount, setResendCount] = React.useState(0);
+  const remaining = useCountdown(resendSeconds, resendCount);
+
+  const ChannelIcon = channel === "sms" ? SmartphoneIcon : MailIcon;
+  const channelLabel = channel === "sms" ? "phone" : "email";
+
+  const verify = React.useCallback(
+    async (value: string) => {
+      setError(null);
+      setStatus("loading");
+      try {
+        await onVerify?.(value);
+        setStatus("success");
+      } catch (cause) {
+        setStatus("idle");
+        setCode("");
+        setError(cause instanceof Error ? cause.message : "Invalid code.");
+      }
+    },
+    [onVerify],
+  );
+
+  function handleChange(value: string) {
+    setCode(value);
+    if (error) setError(null);
+    if (autoSubmit && value.length === length && status === "idle") {
+      void verify(value);
+    }
+  }
+
+  async function handleResend() {
+    setResendCount((count) => count + 1);
+    setCode("");
+    setError(null);
+    await onResend?.();
+  }
+
+  return (
+    <AuthCard
+      title="Enter verification code"
+      logo={logo}
+      accent={accent}
+      description={
+        <span className="inline-flex items-center gap-1.5">
+          <ChannelIcon className="size-3.5 shrink-0" />
+          <span>
+            We sent a {length}-digit code to your {channelLabel}
+            {destination ? (
+              <>
+                {" "}
+                <span className="font-medium text-foreground">
+                  {destination}
+                </span>
+              </>
+            ) : null}
+            .
+          </span>
+        </span>
+      }
+      footer={
+        status !== "success" && (
+          <Button variant="link" onClick={onBack}>
+            Use a different {channelLabel}
+          </Button>
+        )
+      }
+    >
+      <MorphStep step={status === "success" ? "success" : "form"}>
+        {status === "success" ? (
+          <AuthSuccess
+            title="Verified"
+            description="Your identity has been confirmed."
+          />
+        ) : (
+          <div className="flex flex-col items-center gap-4">
+            <motion.div
+              // Shake the whole field on error; keying by message replays it.
+              key={error ?? "steady"}
+              animate={error ? { x: [0, -8, 8, -5, 5, 0] } : { x: 0 }}
+              transition={{ duration: 0.4, ease: "easeInOut" }}
+            >
+              <OTPField
+                length={length}
+                value={code}
+                onValueChange={handleChange}
+                disabled={status === "loading"}
+              >
+                {Array.from({ length }, (_, index) => (
+                  <OTPFieldInput
+                    key={`slot-${index}`}
+                    aria-invalid={error ? true : undefined}
+                    aria-label={`Digit ${index + 1} of ${length}`}
+                  />
+                ))}
+              </OTPField>
+            </motion.div>
+            <AuthError message={error} />
+            {!autoSubmit && (
+              <Button
+                className={cn("w-full", accent && authAccentActionStyles)}
+                loading={status === "loading"}
+                disabled={code.length !== length}
+                onClick={() => void verify(code)}
+              >
+                Verify
+              </Button>
+            )}
+            <motion.p
+              layout
+              transition={{ duration: 0.25, ease: EASE }}
+              className="text-center text-sm text-muted-foreground"
+            >
+              {remaining > 0 ? (
+                <>
+                  Resend code in{" "}
+                  <span className="font-medium tabular-nums text-foreground">
+                    {remaining}s
+                  </span>
+                </>
+              ) : (
+                <Button
+                  variant="link"
+                  disabled={status === "loading"}
+                  onClick={() => void handleResend()}
+                >
+                  Resend code
+                </Button>
+              )}
+            </motion.p>
+          </div>
+        )}
+      </MorphStep>
+    </AuthCard>
+  );
+}

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

@@ -0,0 +1,123 @@
+"use client";
+
+import { ArrowLeftIcon } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { type AuthAccent, authAccentActionStyles } from "@/lib/auth-accent";
+import { cn } from "@/lib/utils";
+import {
+  AuthCard,
+  AuthError,
+  AuthSuccess,
+  MorphStep,
+  type AuthStatus,
+} from "./auth-shell";
+
+export interface ForgotPasswordBlockProps {
+  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;
+  onSubmit?: (data: { email: string }) => Promise<void> | void;
+  onBackToLogin?: () => void;
+}
+
+export function ForgotPasswordBlock({
+  title = "Reset your password",
+  logo,
+  accent,
+  description = "Enter your email and we will send you a reset link",
+  onSubmit,
+  onBackToLogin,
+}: ForgotPasswordBlockProps) {
+  const emailId = React.useId();
+  const [status, setStatus] = React.useState<AuthStatus>("idle");
+  const [error, setError] = React.useState<string | null>(null);
+  const [email, setEmail] = React.useState("");
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setStatus("loading");
+    try {
+      await onSubmit?.({ email });
+      setStatus("success");
+    } catch (cause) {
+      setStatus("idle");
+      setError(
+        cause instanceof Error ? cause.message : "Unable to send reset link.",
+      );
+    }
+  }
+
+  return (
+    <AuthCard
+      title={title}
+      description={description}
+      logo={logo}
+      accent={accent}
+      footer={
+        <Button
+          variant="link"
+          className="gap-1"
+          onClick={onBackToLogin}
+        >
+          <ArrowLeftIcon className="size-3.5" />
+          Back to login
+        </Button>
+      }
+    >
+      <MorphStep step={status === "success" ? "success" : "form"}>
+        {status === "success" ? (
+          <AuthSuccess
+            title="Check your inbox"
+            description={
+              <>
+                We sent a password reset link to{" "}
+                <span className="font-medium text-foreground">{email}</span>.
+              </>
+            }
+          >
+            <Button
+              variant="link"
+              className="text-xs sm:text-xs"
+              onClick={() => setStatus("idle")}
+            >
+              Use a different email
+            </Button>
+          </AuthSuccess>
+        ) : (
+          <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+            <Field name="email">
+              <FieldLabel htmlFor={emailId}>Email</FieldLabel>
+              <Input
+                id={emailId}
+                name="email"
+                type="email"
+                autoComplete="email"
+                placeholder="you@example.com"
+                required
+                disabled={status === "loading"}
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+              />
+            </Field>
+            <AuthError message={error} />
+            <Button
+              className={cn("w-full", accent && authAccentActionStyles)}
+              type="submit"
+              loading={status === "loading"}
+            >
+              Send reset link
+            </Button>
+          </form>
+        )}
+      </MorphStep>
+    </AuthCard>
+  );
+}