Login Form

// Shared motion tokens. Easing curves mirror the CSS custom properties in
// globals.css; springs are the canonical physics used across components.
// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.

export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;

/** CSS string form of EASE_OUT for inline style transitions. */
export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";

/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
  type: "spring",
  stiffness: 500,
  damping: 30,
  mass: 0.6,
} as const;

/** Content swaps — label/icon slots trading places inside a control. */
export const SPRING_SWAP = {
  type: "spring",
  stiffness: 460,
  damping: 30,
  mass: 0.55,
} as const;

/** Overlay panel entrances — modals and sheets summoned by pointer. */
export const SPRING_PANEL = {
  type: "spring",
  stiffness: 420,
  damping: 40,
  mass: 0.5,
} as const;

/** Shared-layout glides — pills, indicators and panels morphing between positions. */
export const SPRING_LAYOUT = {
  type: "spring",
  stiffness: 360,
  damping: 32,
  mass: 0.6,
} as const;

/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
export const SPRING_MOUSE = {
  stiffness: 200,
  damping: 15,
  mass: 0.3,
} as const;

/** Dragged handles and fills (sliders) — critically damped `useSpring` config,
 * so the value follows the pointer butterily and never rebounds off an end. */
export const SPRING_GLIDE = {
  stiffness: 700,
  damping: 50,
  mass: 0.5,
} as const;

// Shared password strength heuristic, used by SignUpForm and PasswordInput.

export const MIN_PASSWORD_LENGTH = 8;

/** Label per score, index 0-4. */
export const STRENGTH_LABELS = [
  "Too short",
  "Weak",
  "Fair",
  "Good",
  "Strong",
] as const;

/** Fill color per score, index 0-4 (Tailwind background classes). */
export const STRENGTH_COLORS = [
  "bg-destructive",
  "bg-destructive",
  "bg-amber-500",
  "bg-amber-400",
  "bg-(--color-success)",
] as const;

export type PasswordStrength = 0 | 1 | 2 | 3 | 4;

/**
 * Length-weighted strength score, 0-4. NIST SP 800-63B advises against
 * composition requirements and treats length as the dominant factor, so extra
 * character classes only nudge the score — they can't rescue a short password.
 * This is a heuristic for feedback, not entropy estimation; pair it with a
 * breach-list check server-side for anything real.
 */
export function passwordStrength(
  password: string,
  minLength: number = MIN_PASSWORD_LENGTH,
): PasswordStrength {
  if (password.length < minLength) return 0;

  let score = 1;
  if (password.length >= 12) score += 1;
  if (password.length >= 16) score += 1;

  const classes = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter((pattern) =>
    pattern.test(password),
  ).length;
  if (classes >= 3) score += 1;

  return Math.min(score, 4) as PasswordStrength;
}

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// Shared touch primitives. iOS and iPadOS run their own gestures on top of the
// page — the long-press selection callout and the selection it drags in with
// it — and they win: once the platform claims a touch it cancels ours
// mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own
// their gesture have to opt out.
//
// What the two classes below cover, precisely:
// - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only:
//   it is not a property other engines have, so it is inert everywhere else.
// - `user-select: none` stops the long-press selection on every engine,
//   Android included, and stops a drag from painting a selection under the
//   cursor. It is inherited, so it reaches every descendant — which is why the
//   two classes differ only in whether they apply it unconditionally.
// What neither covers:
// - Chrome for Android's long-press menu on a link or an image. No CSS
//   suppresses it; a gesture surface that wraps one needs its own
//   `onContextMenu` with `preventDefault()`.
// - The native drag of an `<img>` or `<a>` descendant. `-webkit-user-drag` is
//   not inherited and plain divs and buttons are not drag sources, so setting
//   it on the surface does nothing — the child itself needs `draggable={false}`.

/**
 * Classes for a surface that *is* the control: a thumb, a drum, a stage, a
 * handle, a hold button. Selection is suppressed on every input, because a
 * drag that highlights the control's own label is wrong on a mouse too.
 * Compose with `touch-none` when the surface also owns the scroll axis — leave
 * it off when the page must still scroll from there.
 */
export const TOUCH_GESTURE_CLASS = "select-none [-webkit-touch-callout:none]";

/**
 * The same opt-out for a gesture surface that wraps content the consumer owns:
 * a scroller, a context-menu trigger, a sheet header, a list row. Selection is
 * suppressed only where the platform runs its own press gestures — a coarse
 * pointer — so a mouse user can still select and copy that content. If the
 * gesture itself would paint a selection under the cursor, add `select-none`
 * for the duration of the gesture rather than reaching for
 * `TOUCH_GESTURE_CLASS`.
 *
 * `pointer: coarse` describes the *primary* pointer and nothing else, so a
 * hybrid machine reads it wrong in both directions: a tablet with a mouse
 * plugged in keeps touch as primary and loses mouse selection, and a laptop
 * with a touchscreen keeps the mouse as primary and leaves selection live
 * under a finger. No media query can answer per interaction — the query is
 * about the device, and the question is about the gesture in progress. The
 * default stays here because it is right on the machines that are one thing or
 * the other, and losing a selection is a nuisance; where the miss costs a
 * *gesture* instead, the surface pairs it with `holdSelection` on the press.
 */
export const TOUCH_GESTURE_CONTENT_CLASS =
  "[-webkit-touch-callout:none] pointer-coarse:select-none";

/**
 * Grow a small control's *hit area* to at least 44×44px (WCAG 2.5.5, Apple
 * HIG) on a coarse pointer, without changing what it looks like or the space
 * it takes in layout. An invisible `::after` box, centered on the control and
 * `max(100%, 2.75rem)` on each axis, catches the taps: a 32px icon button
 * reaches 6px past each edge, a wide 40px button only grows vertically, and a
 * control already 44px or larger is left as it is. Hit-testing a pseudo
 * element lands on its owner, so handlers, focus and `:active` all behave.
 *
 * Mouse and trackpad rendering is untouched — nothing here applies outside
 * `pointer: coarse`. Requirements on the element it goes on:
 * - It must be the containing block: add `relative` (and keep it mergeable, so
 *   a consumer's `absolute` still wins through `cn`).
 * - It must not clip itself (`overflow-hidden`), or the overhang is clipped
 *   away along with its hit area.
 * - It must render children: `<input>` and other void elements have no
 *   `::after`. Put it on the wrapper or label instead.
 * - It must not already use `::after` for something visible.
 *
 * Centered 44px means two 32px buttons with a 4px gap overlap by 8px; the
 * later one wins that strip, which still ends well short of the earlier
 * button's visual center. Below a ~32px pitch the later neighbour starts
 * eating into that center — use `TOUCH_TARGET_Y_CLASS` for such dense rows.
 *
 * The overhang is real geometry: inside a scroll container it counts as
 * scrollable overflow, so a control flush against a scroller's edge can add a
 * few pixels of scroll on touch screens. Give such a scroller a little padding
 * on that side.
 */
export const TOUCH_TARGET_CLASS =
  "pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 pointer-coarse:after:size-[max(100%,2.75rem)] pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']";

/**
 * `TOUCH_TARGET_CLASS` on the vertical axis only, for controls packed tighter
 * than ~32px apart in a row (pagination dots, dense swatches), where growing
 * sideways would hand most of each control to its neighbour. Same rules.
 */
export const TOUCH_TARGET_Y_CLASS =
  "pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:top-1/2 pointer-coarse:after:h-[max(100%,2.75rem)] pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']";

/**
 * Suppress selection on `element` for as long as a gesture is running on it,
 * whatever the primary pointer of the machine happens to be. Returns the
 * release. Inline, so it wins over the class above and is gone again the
 * moment the gesture ends.
 *
 * For the press gestures a native selection would otherwise steal — a
 * long-press that opens a menu. Elsewhere prefer the classes: a surface that
 * takes selection away for the whole session is a surface whose text nobody
 * can copy.
 */
export function holdSelection(element: HTMLElement) {
  element.style.setProperty("user-select", "none");
  element.style.setProperty("-webkit-user-select", "none");
  return () => {
    element.style.removeProperty("user-select");
    element.style.removeProperty("-webkit-user-select");
  };
}

/**
 * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer
 * is already gone by the time the handler runs — routine on iOS, where the
 * system can claim the touch first — and an uncaught throw takes the rest of
 * the handler, the gesture included, down with it. Touch pointers carry
 * implicit capture anyway, so losing it is never fatal.
 */
export function capturePointer(element: Element, pointerId: number) {
  try {
    element.setPointerCapture(pointerId);
  } catch {
    // Pointer is no longer active — implicit capture still applies on touch.
  }
}

/** Release a capture taken with `capturePointer`, ignoring a stale pointer. */
export function releasePointer(element: Element, pointerId: number) {
  try {
    if (element.hasPointerCapture(pointerId)) {
      element.releasePointerCapture(pointerId);
    }
  } catch {
    // Capture was already dropped by the browser.
  }
}

/**
 * Whether this event came from a pointer that is *hovering*: not a touch, and
 * not currently pressed. Which input the user is holding right now is not
 * something a device capability can answer — a touchscreen laptop hovers and
 * taps, and iPadOS reports a fine hovering pointer for a finger — so both
 * paths stay live and each handler branches on the event it was given.
 *
 * A pen resting on the glass is making contact, not hovering: `buttons` is the
 * tell, and it sends a pen tap down the same route a finger takes.
 *
 * This answers what an *enter* asks. A leave is the other half of a pair and
 * has to be read against the enter that started it — `useHoverGesture` in
 * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it
 * rather than asking this question twice.
 */
export const isHoveringPointer = (event: {
  pointerType: string;
  buttons: number;
}) => event.pointerType !== "touch" && event.buttons === 0;

"use client";

import { useEffect, useState } from "react";

/**
 * Returns true only on devices that have a true hover (mouse / trackpad).
 * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere
 * — gate hover-only effects (scale lifts, magnetic pulls) behind this.
 */
export function useHoverCapable() {
  const [canHover, setCanHover] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
    const update = () => setCanHover(mq.matches);
    update();
    mq.addEventListener?.("change", update);
    return () => mq.removeEventListener?.("change", update);
  }, []);

  return canHover;
}

"use client";
// karaui.kamisama-v0.my.id/components/blocks/login-form

import {
  ArrowLeft,
  Building2,
  Fingerprint,
  type LucideIcon,
  Mail,
  MailCheck,
} from "lucide-react";
import {
  AnimatePresence,
  animate,
  motion,
  useReducedMotion,
} from "motion/react";
import {
  type FormEvent,
  type ReactNode,
  useCallback,
  useEffect,
  useId,
  useRef,
  useState,
} from "react";
import { Button, StatefulButton } from "@/components/motion/button";
import { Checkbox } from "@/components/motion/checkbox";
import { Input } from "@/components/motion/input";
import { OTPInput } from "@/components/motion/otp-input";
import { PasswordInput } from "@/components/motion/password-input";
import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "@/lib/ease";
import { MIN_PASSWORD_LENGTH } from "@/lib/password-strength";
import { cn } from "@/lib/utils";

/** The card's screens, in the order the recovery flow walks them. */
export type LoginView = "sign-in" | "forgot" | "sent" | "reset" | "done";

export type LoginValues = {
  email: string;
  password: string;
  remember: boolean;
};

export type LoginResetValues = {
  email: string;
  code: string;
  password: string;
};

export type LoginSocialProvider = {
  id: string;
  label: string;
  /** Any icon component. Generic glyphs by default — bring your own brand marks. */
  icon?: LucideIcon;
};

export interface LoginFormProps {
  /** Controlled screen. Omit to let the card manage its own flow. */
  view?: LoginView;
  defaultView?: LoginView;
  onViewChange?: (view: LoginView) => void;
  defaultValues?: Partial<LoginValues>;
  /** Called with valid values. Reject (or throw) with a message to show it and shake the card. */
  onSubmit?: (values: LoginValues) => void | Promise<void>;
  /** Social / SSO buttons. Pass `[]` to hide the row. */
  providers?: LoginSocialProvider[];
  onProviderClick?: (id: string) => void | Promise<void>;
  /** Sends the reset code. Reject to show an error on the request screen. */
  onRequestReset?: (email: string) => void | Promise<void>;
  /** Verifies the code and stores the new password. Reject to shake the code. */
  onResetPassword?: (values: LoginResetValues) => void | Promise<void>;
  /** Length of the emailed code. Default 6. */
  codeLength?: number;
  /** Seconds before "Resend code" unlocks again. Default 30. */
  resendCooldown?: number;
  title?: ReactNode;
  description?: ReactNode;
  footer?: ReactNode;
  className?: string;
}

type Status = "idle" | "loading" | "success" | "error";

const DEFAULT_PROVIDERS: LoginSocialProvider[] = [
  { id: "sso", label: "SSO", icon: Building2 },
  { id: "passkey", label: "Passkey", icon: Fingerprint },
];

// Same deliberately permissive check as SignUpForm.
const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const SHAKE = { x: [0, -8, 8, -5, 5, -2, 0] };
const ORDER: LoginView[] = ["sign-in", "forgot", "sent", "reset", "done"];

function messageOf(reason: unknown, fallback: string) {
  if (reason instanceof Error && reason.message) return reason.message;
  if (typeof reason === "string" && reason) return reason;
  return fallback;
}

function emailError(email: string) {
  if (!email.trim()) return "Enter your email.";
  if (!EMAIL_PATTERN.test(email)) return "That doesn't look like an email address.";
  return undefined;
}

/**
 * Sign-in card, sibling of `SignUpForm`: email + password with remember-me and
 * generic social buttons, plus a password-recovery flow that morphs inside the
 * same card — request a code, "check your inbox", OTP + new password, success.
 * Every handler may return a promise; rejections surface their message and
 * shake the active screen.
 */
export function LoginForm({
  view: viewProp,
  defaultView = "sign-in",
  onViewChange,
  defaultValues,
  onSubmit,
  providers = DEFAULT_PROVIDERS,
  onProviderClick,
  onRequestReset,
  onResetPassword,
  codeLength = 6,
  resendCooldown = 30,
  title = "Welcome back",
  description = "Sign in to continue to your workspace.",
  footer,
  className,
}: LoginFormProps) {
  const reduce = useReducedMotion();
  const baseId = useId();

  const [internalView, setInternalView] = useState<LoginView>(defaultView);
  const view = viewProp ?? internalView;
  const [direction, setDirection] = useState<1 | -1>(1);

  const [email, setEmail] = useState(defaultValues?.email ?? "");
  const [password, setPassword] = useState(defaultValues?.password ?? "");
  const [remember, setRemember] = useState(defaultValues?.remember ?? true);
  const [touched, setTouched] = useState<{ email?: boolean; password?: boolean }>(
    {},
  );

  const [code, setCode] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [resetTouched, setResetTouched] = useState(false);

  const [status, setStatus] = useState<Status>("idle");
  const [error, setError] = useState<string>();
  const [providerPending, setProviderPending] = useState<string | null>(null);
  const [cooldown, setCooldown] = useState(0);

  const shakeRef = useRef<HTMLDivElement>(null);
  const headingRef = useRef<HTMLHeadingElement>(null);
  const shownView = useRef(view);

  const go = useCallback(
    (next: LoginView) => {
      // Finishing the reset loops forward to sign-in; every other move slides
      // by its place in the flow.
      setDirection(
        view === "done" || ORDER.indexOf(next) >= ORDER.indexOf(view) ? 1 : -1,
      );
      setStatus("idle");
      setError(undefined);
      if (viewProp === undefined) setInternalView(next);
      onViewChange?.(next);
    },
    [view, viewProp, onViewChange],
  );

  // Move focus to the new screen's heading so keyboard users land on it.
  useEffect(() => {
    // Only after navigation, never on first render.
    if (shownView.current === view) return;
    shownView.current = view;
    const id = window.setTimeout(
      () => headingRef.current?.focus({ preventScroll: true }),
      60,
    );
    return () => window.clearTimeout(id);
  }, [view]);

  useEffect(() => {
    if (cooldown <= 0) return;
    const id = window.setTimeout(() => setCooldown((s) => s - 1), 1000);
    return () => window.clearTimeout(id);
  }, [cooldown]);

  const shake = () => {
    if (reduce || !shakeRef.current) return;
    animate(shakeRef.current, SHAKE, { duration: 0.42, ease: EASE_OUT });
  };

  /** Shared async runner: pending → success | error (+ shake). */
  const run = async (
    task: (() => void | Promise<void>) | undefined,
    fallback: string,
  ) => {
    setError(undefined);
    setStatus("loading");
    try {
      await task?.();
      setStatus("success");
      return true;
    } catch (reason) {
      setStatus("error");
      setError(messageOf(reason, fallback));
      shake();
      return false;
    }
  };

  const signInErrors = {
    email: emailError(email),
    password: password ? undefined : "Enter your password.",
  };

  const handleSignIn = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setTouched({ email: true, password: true });
    if (signInErrors.email || signInErrors.password) {
      shake();
      return;
    }
    await run(
      onSubmit && (() => onSubmit({ email, password, remember })),
      "Couldn't sign you in. Try again.",
    );
  };

  const handleRequest = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setTouched((t) => ({ ...t, email: true }));
    if (emailError(email)) {
      shake();
      return;
    }
    const ok = await run(
      onRequestReset && (() => onRequestReset(email)),
      "Couldn't send the code. Try again.",
    );
    if (ok) {
      setCooldown(resendCooldown);
      go("sent");
    }
  };

  const handleResend = async () => {
    if (cooldown > 0) return;
    try {
      await onRequestReset?.(email);
      setCooldown(resendCooldown);
    } catch (reason) {
      setError(messageOf(reason, "Couldn't resend the code."));
      shake();
    }
  };

  const resetErrors = {
    code: code.length < codeLength ? `Enter the ${codeLength}-digit code.` : undefined,
    password:
      newPassword.length < MIN_PASSWORD_LENGTH
        ? `Use at least ${MIN_PASSWORD_LENGTH} characters.`
        : undefined,
  };

  const handleReset = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setResetTouched(true);
    if (resetErrors.code || resetErrors.password) {
      shake();
      return;
    }
    const ok = await run(
      onResetPassword &&
        (() => onResetPassword({ email, code, password: newPassword })),
      "That code didn't work.",
    );
    if (ok) {
      setPassword("");
      setCode("");
      setNewPassword("");
      setResetTouched(false);
      go("done");
    } else {
      setCode("");
    }
  };

  const handleProvider = async (id: string) => {
    if (providerPending) return;
    setProviderPending(id);
    setError(undefined);
    try {
      await onProviderClick?.(id);
    } catch (reason) {
      setError(messageOf(reason, "That sign-in method is unavailable."));
      shake();
    } finally {
      setProviderPending(null);
    }
  };

  const busy = status === "loading";
  const errorId = `${baseId}-error`;
  const offset = reduce ? 0 : 28;

  const heading = (text: ReactNode, sub: ReactNode) => (
    <div className="flex flex-col gap-1">
      <h2
        ref={headingRef}
        tabIndex={-1}
        className="text-xl font-semibold tracking-tight text-foreground outline-none"
      >
        {text}
      </h2>
      {sub ? <p className="text-sm text-muted-foreground">{sub}</p> : null}
    </div>
  );

  const back = (to: LoginView, label = "Back to sign in") => (
    <button
      type="button"
      onClick={() => go(to)}
      disabled={busy}
      className="-ml-1 inline-flex w-fit items-center gap-1.5 rounded-full px-1 text-xs font-medium text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
    >
      <ArrowLeft className="size-3.5" aria-hidden />
      {label}
    </button>
  );

  const formError = (
    <AnimatePresence initial={false}>
      {error ? (
        <motion.p
          id={errorId}
          role="alert"
          initial={reduce ? { opacity: 0 } : { opacity: 0, y: -4 }}
          animate={{ opacity: 1, y: 0 }}
          exit={reduce ? { opacity: 0 } : { opacity: 0, y: -4 }}
          transition={{ duration: 0.2, ease: EASE_OUT }}
          className="rounded-2xl border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive"
        >
          {error}
        </motion.p>
      ) : null}
    </AnimatePresence>
  );

  let screen: ReactNode;
  switch (view) {
    case "sign-in":
      screen = (
        <form noValidate onSubmit={handleSignIn} className="flex flex-col gap-5">
          {heading(title, description)}
          <div className="flex flex-col gap-4">
            <Input
              label="Email"
              type="email"
              inputMode="email"
              autoComplete="email"
              placeholder="you@example.com"
              leftIcon={<Mail />}
              disabled={busy}
              value={email}
              onChange={(next) => {
                setEmail(next);
                if (status === "error") setStatus("idle");
              }}
              onBlur={() => setTouched((t) => ({ ...t, email: true }))}
              error={touched.email ? signInErrors.email : undefined}
            />
            <PasswordInput
              label="Password"
              autoComplete="current-password"
              placeholder="Your password"
              strengthMeter={false}
              disabled={busy}
              value={password}
              onChange={(next) => {
                setPassword(next);
                if (status === "error") setStatus("idle");
              }}
              onBlur={() => setTouched((t) => ({ ...t, password: true }))}
              error={touched.password ? signInErrors.password : undefined}
            />
          </div>
          <div className="flex items-center justify-between gap-3">
            <Checkbox
              checked={remember}
              disabled={busy}
              onCheckedChange={setRemember}
              label="Remember me"
            />
            <button
              type="button"
              disabled={busy}
              onClick={() => go("forgot")}
              className="rounded-full px-1 text-sm font-medium text-foreground underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
            >
              Forgot password?
            </button>
          </div>
          {formError}
          <StatefulButton
            type="submit"
            size="lg"
            state={status}
            loadingText="Signing in"
            successText="Signed in"
            errorText="Try again"
            aria-describedby={error ? errorId : undefined}
            className="w-full"
          >
            Sign in
          </StatefulButton>
          {providers.length > 0 ? (
            <>
              <div className="flex items-center gap-3 text-xs text-muted-foreground">
                <span className="h-px flex-1 bg-border" aria-hidden />
                or continue with
                <span className="h-px flex-1 bg-border" aria-hidden />
              </div>
              <div
                className={cn(
                  "grid gap-2",
                  providers.length > 1 ? "grid-cols-2" : "grid-cols-1",
                )}
              >
                {providers.map((provider) => {
                  const Icon = provider.icon;
                  const pending = providerPending === provider.id;
                  return (
                    <Button
                      key={provider.id}
                      type="button"
                      variant="secondary"
                      disabled={busy || Boolean(providerPending)}
                      aria-busy={pending || undefined}
                      onClick={() => void handleProvider(provider.id)}
                      className="w-full"
                    >
                      {pending ? (
                        <span
                          aria-hidden
                          className="size-4 animate-spin rounded-full border-2 border-foreground/20 border-t-foreground"
                        />
                      ) : Icon ? (
                        <Icon className="size-4" aria-hidden />
                      ) : null}
                      {provider.label}
                    </Button>
                  );
                })}
              </div>
            </>
          ) : null}
          {footer ? (
            <div className="text-center text-sm text-muted-foreground">{footer}</div>
          ) : null}
        </form>
      );
      break;
    case "forgot":
      screen = (
        <form noValidate onSubmit={handleRequest} className="flex flex-col gap-5">
          {back("sign-in")}
          {heading(
            "Reset your password",
            "Enter your account email and we'll send you a reset code.",
          )}
          <Input
            label="Email"
            type="email"
            inputMode="email"
            autoComplete="email"
            placeholder="you@example.com"
            leftIcon={<Mail />}
            disabled={busy}
            value={email}
            onChange={setEmail}
            onBlur={() => setTouched((t) => ({ ...t, email: true }))}
            error={touched.email ? emailError(email) : undefined}
          />
          {formError}
          <StatefulButton
            type="submit"
            size="lg"
            state={status}
            loadingText="Sending code"
            successText="Code sent"
            errorText="Try again"
            className="w-full"
          >
            Send reset code
          </StatefulButton>
        </form>
      );
      break;
    case "sent":
      screen = (
        <div className="flex flex-col items-center gap-5 text-center">
          <motion.span
            initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.6, y: 8 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            transition={reduce ? { duration: 0.2 } : { ...SPRING_SWAP, delay: 0.08 }}
            className="grid size-14 place-items-center rounded-2xl bg-muted text-foreground"
          >
            <MailCheck className="size-6" aria-hidden />
          </motion.span>
          {heading(
            "Check your inbox",
            <>
              We sent a {codeLength}-digit code to{" "}
              <span className="font-medium text-foreground">{email}</span>.
            </>,
          )}
          {formError}
          <Button type="button" size="lg" className="w-full" onClick={() => go("reset")}>
            Enter code
          </Button>
          <div className="flex w-full items-center justify-between text-sm">
            {back("forgot", "Use another email")}
            <button
              type="button"
              disabled={cooldown > 0}
              onClick={() => void handleResend()}
              className="rounded-full px-1 font-medium text-foreground tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:text-muted-foreground"
            >
              {cooldown > 0 ? `Resend in ${cooldown}s` : "Resend code"}
            </button>
          </div>
        </div>
      );
      break;
    case "reset":
      screen = (
        <form noValidate onSubmit={handleReset} className="flex flex-col gap-5">
          {back("sent")}
          {heading("Choose a new password", `Code sent to ${email}.`)}
          <OTPInput
            length={codeLength}
            label="Reset code"
            value={code}
            onChange={(next) => {
              setCode(next);
              if (status === "error") {
                setStatus("idle");
                setError(undefined);
              }
            }}
            disabled={busy}
            status={
              status === "error"
                ? "error"
                : resetTouched && resetErrors.code
                  ? "error"
                  : "idle"
            }
            errorMessage={
              status === "error" ? undefined : resetTouched ? resetErrors.code : undefined
            }
          />
          <PasswordInput
            label="New password"
            autoComplete="new-password"
            placeholder={`At least ${MIN_PASSWORD_LENGTH} characters`}
            disabled={busy}
            value={newPassword}
            onChange={setNewPassword}
            error={resetTouched ? resetErrors.password : undefined}
          />
          {formError}
          <StatefulButton
            type="submit"
            size="lg"
            state={status}
            loadingText="Updating"
            successText="Updated"
            errorText="Try again"
            className="w-full"
          >
            Reset password
          </StatefulButton>
        </form>
      );
      break;
    case "done":
      screen = (
        <div className="flex flex-col items-center gap-5 text-center">
          <motion.span
            initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.6 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={reduce ? { duration: 0.2 } : SPRING_SWAP}
            className="grid size-14 place-items-center rounded-full bg-success/15 text-success"
          >
            <svg viewBox="0 0 24 24" className="size-7" fill="none" aria-hidden="true">
              <motion.path
                d="M5 12.5l4.5 4.5L19 7.5"
                stroke="currentColor"
                strokeWidth={2.4}
                strokeLinecap="round"
                strokeLinejoin="round"
                initial={{ pathLength: reduce ? 1 : 0 }}
                animate={{ pathLength: 1 }}
                transition={{ duration: 0.4, delay: 0.15, ease: EASE_OUT }}
              />
            </svg>
          </motion.span>
          {heading(
            "Password updated",
            "You can now sign in with your new password.",
          )}
          <Button type="button" size="lg" className="w-full" onClick={() => go("sign-in")}>
            Back to sign in
          </Button>
        </div>
      );
      break;
  }

  return (
    // `layout` animates the card's size between screens — a layout job by
    // design (FLIP transforms under the hood); the screens counter-correct
    // with layout="position" so their content never stretches.
    <motion.div
      layout
      transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
      style={{ borderRadius: 24 }}
      className={cn(
        "w-full max-w-sm overflow-hidden border border-border bg-card p-6",
        className,
      )}
    >
      <div ref={shakeRef}>
        <AnimatePresence mode="popLayout" initial={false} custom={direction}>
          <motion.div
            key={view}
            layout="position"
            custom={direction}
            variants={{
              enter: (dir: number) => ({
                opacity: 0,
                x: dir * offset,
                filter: reduce ? "blur(0px)" : "blur(4px)",
              }),
              center: {
                opacity: 1,
                x: 0,
                filter: "blur(0px)",
                transition: { duration: 0.28, ease: EASE_OUT },
              },
              exit: (dir: number) => ({
                opacity: 0,
                x: dir * -offset,
                filter: reduce ? "blur(0px)" : "blur(4px)",
                transition: { duration: 0.16, ease: EASE_OUT },
              }),
            }}
            initial="enter"
            animate="center"
            exit="exit"
          >
            {screen}
          </motion.div>
        </AnimatePresence>
      </div>
    </motion.div>
  );
}

export type {
  ButtonLinkProps,
  ButtonProps,
  ButtonSize,
  ButtonVariant,
} from "./base";
export { Button, ButtonLink } from "./base";
export type { MagneticButtonProps } from "./magnetic";
export { MagneticButton } from "./magnetic";
export type { ButtonState, StatefulButtonProps } from "./stateful";
export { StatefulButton } from "./stateful";

"use client";

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useId } from "react";
import { EASE_OUT, SPRING_PRESS } from "@/lib/ease";
import { TOUCH_TARGET_CLASS } from "@/lib/touch";
import { cn } from "@/lib/utils";

const CHECK_PATH = "M5 13l4 4L19 7";
const INDETERMINATE_PATH = "M6 12h12";

export interface CheckboxProps {
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
  disabled?: boolean;
  indeterminate?: boolean;
  label?: string;
  className?: string;
  id?: string;
  "aria-label"?: string;
  /** Associates an external message (e.g. a form error) with the control. */
  "aria-describedby"?: string;
}

export function Checkbox({
  checked,
  onCheckedChange,
  disabled,
  indeterminate,
  label,
  className,
  id: idProp,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedBy,
}: CheckboxProps) {
  const autoId = useId();
  const id = idProp ?? autoId;
  const reduce = useReducedMotion();
  const showMark = checked || indeterminate;
  const path = indeterminate ? INDETERMINATE_PATH : CHECK_PATH;

  return (
    <label
      htmlFor={id}
      className={cn(
        "inline-flex items-center gap-3",
        disabled ? "cursor-not-allowed" : "cursor-pointer",
        className,
      )}
    >
      <motion.button
        id={id}
        type="button"
        role="checkbox"
        aria-checked={indeterminate ? "mixed" : checked}
        aria-label={ariaLabel}
        aria-describedby={ariaDescribedBy}
        disabled={disabled}
        onClick={() => !disabled && onCheckedChange(!checked)}
        whileTap={reduce || disabled ? undefined : { scale: 0.92 }}
        transition={SPRING_PRESS}
        data-state={
          checked ? "checked" : indeterminate ? "indeterminate" : "unchecked"
        }
        className={cn(
          "relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 outline-none transition-colors duration-200",
          TOUCH_TARGET_CLASS,
          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
          "disabled:cursor-not-allowed disabled:opacity-60",
          showMark
            ? "border-primary bg-primary text-primary-foreground"
            : "border-muted-foreground/50 bg-background hover:border-muted-foreground",
        )}
      >
        <AnimatePresence initial={false}>
          {showMark ? (
            <motion.svg
              key={indeterminate ? "indeterminate" : "checked"}
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={3}
              strokeLinecap="round"
              strokeLinejoin="round"
              initial={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.5 }}
              animate={reduce ? { opacity: 1 } : { opacity: 1, scale: 1 }}
              exit={
                reduce
                  ? { opacity: 0 }
                  : { opacity: 0, scale: 0.5, filter: "blur(4px)" }
              }
              transition={
                reduce ? { duration: 0 } : { duration: 0.16, ease: EASE_OUT }
              }
              aria-hidden
            >
              <title>{indeterminate ? "Partially selected" : "Selected"}</title>
              <motion.path
                d={path}
                initial={reduce ? { pathLength: 1 } : { pathLength: 0 }}
                animate={{ pathLength: 1 }}
                transition={
                  reduce
                    ? { duration: 0 }
                    : {
                        duration: indeterminate ? 0.2 : 0.3,
                        ease: EASE_OUT,
                        delay: 0.04,
                      }
                }
              />
            </motion.svg>
          ) : null}
        </AnimatePresence>
      </motion.button>
      {label ? (
        <span className={cn("select-none text-sm text-foreground", disabled && "opacity-60")}>
          {label}
        </span>
      ) : null}
    </label>
  );
}

"use client";

import {
  AnimatePresence,
  animate,
  motion,
  useReducedMotion,
} from "motion/react";
import {
  forwardRef,
  useEffect,
  useId,
  useRef,
  useState,
  type InputHTMLAttributes,
  type ReactNode,
} from "react";
import { cn } from "@/lib/utils";

export type InputClassNames = {
  root?: string;
  label?: string;
  field?: string;
  input?: string;
  leftIcon?: string;
  rightIcon?: string;
  successIcon?: string;
  errorMessage?: string;
};

export interface InputProps extends Omit<
  InputHTMLAttributes<HTMLInputElement>,
  "value" | "defaultValue" | "onChange"
> {
  label?: string;
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  /** Truthy error triggers a shake, red border and (if a string) a message. */
  error?: string | boolean;
  success?: boolean;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  className?: string;
  classNames?: InputClassNames;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  {
    label,
    value: valueProp,
    defaultValue,
    onChange,
    onFocus,
    onBlur,
    error,
    success,
    leftIcon,
    rightIcon,
    className,
    classNames,
    disabled,
    id: idProp,
    type,
    ...rest
  },
  ref,
) {
  const reactId = useId();
  const id = idProp ?? reactId;
  const reduce = useReducedMotion();

  const controlled = valueProp !== undefined;
  const [internal, setInternal] = useState(defaultValue ?? "");
  const value = controlled ? (valueProp ?? "") : internal;

  const [focused, setFocused] = useState(false);

  const fieldRef = useRef<HTMLDivElement>(null);

  const hasError = Boolean(error);
  const errorMessage = typeof error === "string" ? error : null;

  // Right edge shows the success check, otherwise the caller's right icon.
  const rightSlot = success ? null : rightIcon;

  // Shake the field when an error appears.
  useEffect(() => {
    if (!fieldRef.current || reduce || !hasError) return;
    animate(
      fieldRef.current,
      { x: [0, -6, 6, -4, 4, -2, 0] },
      { duration: 0.45 },
    );
  }, [hasError, reduce]);

  const handleChange = (next: string) => {
    if (!controlled) setInternal(next);
    onChange?.(next);
  };

  return (
    <div
      className={cn("flex flex-col gap-1.5", className, classNames?.root)}
    >
      {label ? (
        <label
          htmlFor={id}
          className={cn(
            "px-1 text-sm font-medium text-foreground",
            classNames?.label,
          )}
        >
          {label}
        </label>
      ) : null}

      <div
        ref={fieldRef}
        data-state={
          hasError
            ? "error"
            : success
              ? "success"
              : focused
                ? "focused"
                : "idle"
        }
        className={cn(
          "relative h-11 overflow-hidden rounded-full border transition-colors duration-200",
          "border-border",
          focused && !hasError && "border-foreground/40 ring-2 ring-ring/40",
          hasError && "border-destructive ring-2 ring-destructive/25",
          disabled && "opacity-60",
          classNames?.field,
        )}
      >
        {leftIcon ? (
          <span
            className={cn(
              "pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-muted-foreground [&_svg]:h-4 [&_svg]:w-4",
              classNames?.leftIcon,
            )}
          >
            {leftIcon}
          </span>
        ) : null}

        <input
          ref={ref}
          id={id}
          type={type}
          value={value}
          disabled={disabled}
          aria-invalid={hasError || undefined}
          aria-describedby={errorMessage ? `${id}-error` : undefined}
          {...rest}
          onChange={(e) => handleChange(e.target.value)}
          onFocus={(event) => {
            setFocused(true);
            onFocus?.(event);
          }}
          onBlur={(event) => {
            setFocused(false);
            onBlur?.(event);
          }}
          className={cn(
            "peer h-full w-full bg-transparent text-base leading-6 text-foreground caret-foreground outline-none",
            "placeholder:text-muted-foreground/60",
            leftIcon ? "pl-10" : "pl-3.5",
            rightSlot || success ? "pr-10" : "pr-3.5",
            disabled && "cursor-not-allowed",
            classNames?.input,
          )}
        />

        {success ? (
          <motion.svg
            viewBox="0 0 24 24"
            fill="none"
            className={cn(
              "absolute right-3.5 top-1/2 h-5 w-5 -translate-y-1/2 text-(--color-success)",
              classNames?.successIcon,
            )}
          >
            <motion.path
              d="M5 12.5l4.5 4.5L19 7.5"
              stroke="currentColor"
              strokeWidth={2.5}
              strokeLinecap="round"
              strokeLinejoin="round"
              initial={reduce ? { pathLength: 1 } : { pathLength: 0 }}
              animate={{ pathLength: 1 }}
              transition={{ duration: 0.35, ease: "easeOut" }}
            />
          </motion.svg>
        ) : rightSlot ? (
          <span
            className={cn(
              "absolute right-0 top-0 flex h-full items-center text-muted-foreground [&_button]:grid [&_button]:size-11 [&_button]:place-items-center [&_svg]:h-4 [&_svg]:w-4",
              classNames?.rightIcon,
            )}
          >
            {rightSlot}
          </span>
        ) : null}
      </div>

      <AnimatePresence initial={false}>
        {errorMessage ? (
          <motion.p
            id={`${id}-error`}
            role="alert"
            initial={
              reduce
                ? { opacity: 0 }
                : { opacity: 0, y: -4, filter: "blur(4px)" }
            }
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            exit={
              reduce
                ? { opacity: 0 }
                : { opacity: 0, y: -4, filter: "blur(4px)" }
            }
            transition={{ duration: 0.2 }}
            className={cn(
              "px-1 text-xs text-destructive",
              classNames?.errorMessage,
            )}
          >
            {errorMessage}
          </motion.p>
        ) : null}
      </AnimatePresence>
    </div>
  );
});

"use client";

import {
  AnimatePresence,
  animate,
  motion,
  useReducedMotion,
} from "motion/react";
import { useEffect, useId, useRef, useState } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type OTPStatus = "idle" | "error" | "success";

export interface OTPInputProps {
  /** Number of slots. Default 6. */
  length?: number;
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  /** Fires once every slot is filled. */
  onComplete?: (value: string) => void;
  /** Optional label rendered above the slots. */
  label?: string;
  /** Helper text shown below the slots while idle. */
  hint?: string;
  /** Message shown below the slots when status is "success". */
  successMessage?: string;
  /** Message shown below the slots when status is "error". */
  errorMessage?: string;
  /** External validation feedback. "error" shakes, "success" draws a check. */
  status?: OTPStatus;
  /** Render dots instead of the typed digits. */
  mask?: boolean;
  disabled?: boolean;
  autoFocus?: boolean;
  /** Accessible label for the underlying input. */
  "aria-label"?: string;
  className?: string;
}

export function OTPInput({
  length = 6,
  value: controlledValue,
  defaultValue = "",
  onChange,
  onComplete,
  label,
  hint,
  successMessage,
  errorMessage,
  status = "idle",
  mask = false,
  disabled = false,
  autoFocus = false,
  "aria-label": ariaLabel = "One-time passcode",
  className,
}: OTPInputProps) {
  const uid = useId();
  const reduce = useReducedMotion();
  const inputRef = useRef<HTMLInputElement>(null);
  const slotsRef = useRef<HTMLDivElement>(null);

  const controlled = controlledValue !== undefined;

  // Source of truth is a fixed-length array, so a cleared middle slot stays an
  // in-place hole instead of collapsing the digits after it to the left.
  const [slots, setSlots] = useState<string[]>(() =>
    toSlots(controlled ? controlledValue : defaultValue, length),
  );
  const [focused, setFocused] = useState(false);
  const [active, setActive] = useState(0);

  const joined = slots.join("");
  const joinedRef = useRef(joined);

  useEffect(() => {
    joinedRef.current = joined;
  }, [joined]);

  // Pull in external value changes; skip when the parent is just echoing our own
  // onChange, so internal holes survive the controlled round-trip.
  useEffect(() => {
    if (!controlled) return;
    const incoming = sanitize(controlledValue, length);
    if (incoming !== joinedRef.current) setSlots(toSlots(incoming, length));
  }, [controlled, controlledValue, length]);

  const commit = (next: string[]) => {
    const wasComplete = slots.every((c) => c !== "");
    setSlots(next);
    const str = next.join("");
    onChange?.(str);
    // Fire only on the empty→full transition, not on every edit of a full code.
    if (!wasComplete && next.every((c) => c !== "")) onComplete?.(str);
  };

  const clearSlot = (idx: number) => {
    const next = [...slots];
    next[idx] = "";
    commit(next);
  };

  const slotFromClientX = (clientX: number) => {
    const els = slotsRef.current?.children;
    if (!els) return 0;
    for (let i = 0; i < els.length; i++) {
      if (clientX < els[i].getBoundingClientRect().right) return i;
    }
    return length - 1;
  };

  // Single insertion path: one digit overwrites the active slot and advances; a
  // multi-digit chunk (paste / SMS autofill) fills forward from the active slot.
  const insert = (raw: string, from = active) => {
    const digits = raw.replace(/\D/g, "");
    if (!digits) return;
    const next = [...slots];
    let i = from;
    for (const ch of digits) {
      if (i >= length) break;
      next[i] = ch;
      i++;
    }
    commit(next);
    setActive(Math.min(i, length - 1));
  };

  // The keyboard is the single source of truth: preventDefault on keydown
  // reliably blocks native insertion (unlike beforeinput in React), so the hidden
  // input never accumulates a competing string and slot holes survive.
  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (disabled || e.metaKey || e.ctrlKey || e.altKey) return;
    const k = e.key;
    if (/^[0-9]$/.test(k)) {
      e.preventDefault();
      insert(k);
    } else if (k === "Backspace") {
      e.preventDefault();
      // A filled slot clears in place; an empty slot steps back and clears there.
      if (slots[active]) {
        clearSlot(active);
      } else if (active > 0) {
        clearSlot(active - 1);
        setActive((current) => Math.max(current - 1, 0));
      }
    } else if (k === "Delete") {
      e.preventDefault();
      clearSlot(active);
    } else if (k === "ArrowLeft") {
      e.preventDefault();
      setActive((a) => Math.max(a - 1, 0));
    } else if (k === "ArrowRight") {
      e.preventDefault();
      setActive((a) => Math.min(a + 1, length - 1));
    } else if (k === "Home") {
      e.preventDefault();
      setActive(0);
    } else if (k === "End") {
      e.preventDefault();
      setActive(length - 1);
    }
  };

  const onPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
    if (disabled) return;
    // preventDefault suppresses the duplicate onChange, keeping that path autofill-only.
    e.preventDefault();
    insert(e.clipboardData.getData("text"), active);
  };

  // Autofill path: SMS one-time-code arrives as a whole value in one shot.
  // Keystrokes go through onKeyDown and paste through onPaste, so only autofill
  // reaches here — spread it across the slots from the start.
  const onChangeNative = (e: React.ChangeEvent<HTMLInputElement>) => {
    const digits = sanitize(e.target.value, length);
    if (!digits) return;
    commit(toSlots(digits, length));
    setActive(Math.min(digits.length, length - 1));
  };

  // Error shake — imperative so it replays on every transition into "error".
  useEffect(() => {
    if (status !== "error" || reduce || !slotsRef.current) return;
    animate(
      slotsRef.current,
      { x: [0, -5, 5, -3, 3, -1, 0] },
      { duration: 0.45, ease: EASE_OUT },
    );
  }, [status, reduce]);

  const showSuccess = status === "success";
  const activeIndex = focused ? active : -1;
  const message = showSuccess
    ? successMessage
    : status === "error"
      ? errorMessage
      : hint;

  return (
    <div className={cn("inline-flex flex-col gap-2", className)}>
      {label ? (
        <label
          htmlFor={`${uid}-input`}
          className="text-sm font-medium text-foreground"
        >
          {label}
        </label>
      ) : null}
      <fieldset
        className="relative m-0 inline-flex w-max border-0 p-0"
        onMouseDown={(e) => {
          if (disabled) return;
          // Suppress the native click-caret; we drive the active slot ourselves.
          e.preventDefault();
          // Clamp to the first empty slot so a click can't jump ahead of progress.
          const firstEmpty = slots.indexOf("");
          const cap = firstEmpty === -1 ? length - 1 : firstEmpty;
          setActive(Math.min(slotFromClientX(e.clientX), cap));
          inputRef.current?.focus();
        }}
      >
        <input
          ref={inputRef}
          id={`${uid}-input`}
          inputMode="numeric"
          autoComplete="one-time-code"
          // biome-ignore lint/a11y/noAutofocus: opt-in via prop for OTP-first screens.
          autoFocus={autoFocus}
          disabled={disabled}
          aria-label={ariaLabel}
          aria-invalid={status === "error"}
          // Kept empty on purpose — our state owns the digits, native holds none.
          value=""
          maxLength={length}
          onKeyDown={onKeyDown}
          onChange={onChangeNative}
          onPaste={onPaste}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          // Transparent overlay owns focus, the soft keyboard, paste and autofill;
          // the slots below are purely presentational.
          className="absolute inset-0 z-20 h-full w-full cursor-text bg-transparent text-transparent caret-transparent opacity-0 outline-none disabled:cursor-not-allowed"
        />

        <div ref={slotsRef} className="flex items-center gap-2">
          {Array.from({ length }, (_, i) => {
            const char = slots[i] ?? "";
            const isActive = i === activeIndex;
            return (
              <div
                // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length slot grid, never reordered.
                key={`${uid}-${i}`}
                data-active={isActive}
                data-filled={char !== ""}
                className={cn(
                  "relative grid h-14 w-12 place-items-center overflow-hidden rounded-xl border text-xl font-semibold tabular-nums transition-colors duration-200",
                  showSuccess
                    ? "border-emerald-500/60 text-foreground"
                    : status === "error"
                      ? "border-destructive/60 text-foreground"
                      : char
                        ? "border-border-strong text-foreground"
                        : "border-border text-muted-foreground",
                  // Active slot reads stronger; twMerge lets this win the border.
                  isActive && !showSuccess && status !== "error" && "border-foreground",
                  disabled && "opacity-50",
                )}
              >
                {/* Blinking caret marks the active slot — centered when empty,
                    trailing the digit when the slot is already filled. */}
                {isActive && !showSuccess ? (
                  <motion.span
                    aria-hidden
                    animate={reduce ? undefined : { opacity: [1, 1, 0, 0] }}
                    transition={
                      reduce
                        ? undefined
                        : { duration: 1, repeat: Number.POSITIVE_INFINITY, ease: "linear" }
                    }
                    className={cn(
                      "pointer-events-none absolute top-1/2 h-6 w-px -translate-y-1/2 bg-foreground",
                      char ? "right-3" : "left-1/2 -translate-x-1/2",
                    )}
                  />
                ) : null}

                {/* Digits roll vertically. Each is absolutely centered so enter and
                    exit overlap in place — no in-flow reflow, no sideways drift. */}
                <AnimatePresence initial={false}>
                  {char ? (
                    <motion.span
                      key={char}
                      initial={
                        reduce
                          ? { opacity: 0 }
                          : { y: 14, opacity: 0, filter: "blur(4px)" }
                      }
                      animate={
                        reduce
                          ? { opacity: 1 }
                          : { y: 0, opacity: 1, filter: "blur(0px)" }
                      }
                      exit={
                        reduce
                          ? { opacity: 0 }
                          : { y: -14, opacity: 0, filter: "blur(4px)" }
                      }
                      transition={
                        reduce
                          ? { duration: 0 }
                          : { duration: 0.22, ease: EASE_OUT }
                      }
                      className="absolute inset-0 grid place-items-center leading-none"
                    >
                      {mask ? "•" : char}
                    </motion.span>
                  ) : null}
                </AnimatePresence>
              </div>
            );
          })}
        </div>

        <AnimatePresence>
          {showSuccess ? (
            <motion.span
              initial={reduce ? { opacity: 0 } : { scale: 0.6, opacity: 0 }}
              animate={reduce ? { opacity: 1 } : { scale: 1, opacity: 1 }}
              exit={reduce ? { opacity: 0 } : { scale: 0.6, opacity: 0 }}
              transition={
                reduce
                  ? { duration: 0 }
                  : { type: "spring", stiffness: 500, damping: 28 }
              }
              className="pointer-events-none absolute -right-7 top-1/2 -translate-y-1/2 text-emerald-500"
              aria-hidden
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={3}
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <title>Verified</title>
                <motion.path
                  d="M5 13l4 4L19 7"
                  initial={reduce ? { pathLength: 1 } : { pathLength: 0 }}
                  animate={{ pathLength: 1 }}
                  transition={
                    reduce
                      ? { duration: 0 }
                      : { duration: 0.35, ease: EASE_OUT, delay: 0.1 }
                  }
                />
              </svg>
            </motion.span>
          ) : null}
        </AnimatePresence>
      </fieldset>

      {message ? (
        <p
          aria-live="polite"
          className={cn(
            "text-sm",
            showSuccess
              ? "text-emerald-500"
              : status === "error"
                ? "text-destructive"
                : "text-muted-foreground",
          )}
        >
          {message}
        </p>
      ) : null}
    </div>
  );
}

function sanitize(raw: string, length: number) {
  return raw.replace(/\D/g, "").slice(0, length);
}

function toSlots(raw: string, length: number) {
  const digits = sanitize(raw, length);
  return Array.from({ length }, (_, i) => digits[i] ?? "");
}