Morph Button

1"use client";2
3import React, { useEffect, useRef } from "react";4import { Check, Loader2, X } from "lucide-react";5import { cn } from "@/lib/utils";6
7export type MorphButtonStatus =8  | "idle"9  | "loading"10  | "success"11  | "error";12
13export type MorphButtonProps = {14  status?: MorphButtonStatus;15  onClick?: () => void;16  idleLabel?: string;17  loadingLabel?: string;18  successLabel?: string;19  errorLabel?: string;20  /** Auto-return to idle after success/error (ms). 0 = never. */21  resetAfterMs?: number;22  onReset?: () => void;23  disabled?: boolean;24  className?: string;25  layoutId?: string;26  type?: "button" | "submit" | "reset";27};28
29function readTextSwapDur() {30  const v = parseFloat(31    getComputedStyle(document.documentElement).getPropertyValue(32      "--text-swap-dur",33    ),34  );35  return Number.isFinite(v) ? v : 150;36}37
38export function MorphButton({39  status = "idle",40  onClick,41  idleLabel = "Send invite",42  loadingLabel = "Sending",43  successLabel = "Sent",44  errorLabel = "Failed",45  resetAfterMs = 0,46  onReset,47  disabled,48  className,49  layoutId: _layoutId,50  type = "button",51}: MorphButtonProps) {52  void _layoutId;53  const textRef = useRef<HTMLSpanElement>(null);54  const prevStatus = useRef(status);55  const swapTimer = useRef<number | null>(null);56
57  const textMap = {58    idle: idleLabel,59    loading: loadingLabel,60    success: successLabel,61    error: errorLabel,62  };63
64  // a = loading spinner, b = success/error glyph65  const iconState =66    status === "success" || status === "error"67      ? "b"68      : status === "loading"69        ? "a"70        : "a";71  const showIcon = status !== "idle";72
73  useEffect(() => {74    if (75      resetAfterMs <= 0 ||76      (status !== "success" && status !== "error")77    ) {78      return;79    }80    const t = window.setTimeout(() => onReset?.(), resetAfterMs);81    return () => window.clearTimeout(t);82  }, [status, resetAfterMs, onReset]);83
84  // Text states swap orchestration when the label changes with status85  useEffect(() => {86    const el = textRef.current;87    if (!el) return;88    const next = textMap[status];89    if (prevStatus.current === status) {90      el.textContent = next;91      return;92    }93    prevStatus.current = status;94
95    if (swapTimer.current) window.clearTimeout(swapTimer.current);96    const dur = readTextSwapDur();97    el.classList.add("is-exit");98    swapTimer.current = window.setTimeout(() => {99      el.textContent = next;100      el.classList.remove("is-exit");101      el.classList.add("is-enter-start");102      void el.offsetHeight;103      el.classList.remove("is-enter-start");104      swapTimer.current = null;105    }, dur);106
107    return () => {108      if (swapTimer.current) window.clearTimeout(swapTimer.current);109    };110    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional label map from status111  }, [status, idleLabel, loadingLabel, successLabel, errorLabel]);112
113  const isBusy = status === "loading";114
115  return (116    <button117      type={type}118      disabled={disabled || isBusy}119      onClick={onClick}120      className={cn(121        "relative inline-flex h-10 min-w-30 items-center justify-center gap-2 overflow-hidden",122        "rounded-md px-4 text-sm font-medium",123        "outline-none select-none",124        "transition-[background-color,color,box-shadow,width] duration-(--dur-short) ease-out",125        "focus-visible:ring-2 focus-visible:ring-(--color-focus) focus-visible:ring-offset-2",126        "disabled:pointer-events-none disabled:opacity-60",127        status === "idle" &&128          "bg-(--color-ink) text-(--color-paper) shadow-[0_1px_2px_rgba(0,0,0,0.08)]",129        status === "loading" &&130          "bg-(--color-ink) text-(--color-paper)",131        status === "success" &&132          "bg-emerald-700 text-white dark:bg-emerald-600",133        status === "error" && "bg-red-700 text-white dark:bg-red-600",134        className,135      )}136      aria-live="polite"137      aria-busy={isBusy}138    >139      {showIcon ? (140        <span141          className="t-icon-swap inline-grid size-4 shrink-0 place-items-center"142          data-state={iconState}143          aria-hidden144        >145          <span className="t-icon" data-icon="a">146            <Loader2 className="size-4 animate-spin stroke-[1.5]" />147          </span>148          <span className="t-icon" data-icon="b">149            {status === "error" ? (150              <X className="size-4 stroke-[1.5]" />151            ) : (152              <Check className="size-4 stroke-[1.5]" />153            )}154          </span>155        </span>156      ) : null}157      <span ref={textRef} className="t-text-swap whitespace-nowrap">158        {textMap[status]}159      </span>160    </button>161  );162}