akanjs 2.4.2-rc.2 → 3.0.0-alpha.0

package/ui/Button.tsx

@@ -1,80 +1,190 @@
 "use client";
-import { clsx, usePage } from "akanjs/client";
+import { cn, usePage } from "akanjs/client";
+import { isThenable } from "akanjs/common";
 import type React from "react";
 import { type ButtonHTMLAttributes, type ComponentType, createElement, useState } from "react";
-import { AiOutlineCheckCircle } from "react-icons/ai";
+import { AiFillCheckCircle, AiOutlineLoading3Quarters } from "react-icons/ai";
+import { type ButtonVariants, buttonRecipe } from "./recipe";
+import { useUiOverride, useUiRecipe } from "./UiOverride";
 
-import { useUiOverride } from "./UiOverride";
+export { buttonRecipe, type ButtonVariants };
 
-export type ButtonProps<Result> = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & {
-  /** Async-aware click handler. Call onError to show the localized error state without throwing. */
-  onClick: (
-    e: React.MouseEvent<HTMLButtonElement>,
-    { onError }: { onError: (error: string) => void },
-  ) => Promise<Result> | Result;
-  /** Called after the button briefly enters success state. */
-  onSuccess?: (result: Result) => void;
-};
+export type ButtonProps<Result> = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> &
+  ButtonVariants & {
+    /**
+     * Click handler. Returning a promise is what opts this button into the async states — a plain
+     * synchronous handler renders as an ordinary button with no spinner. Call onError to show the
+     * localized error state without throwing.
+     */
+    onClick?: (
+      e: React.MouseEvent<HTMLButtonElement>,
+      { onError }: { onError: (error: string) => void },
+    ) => Promise<Result> | Result;
+    /** Called after the button briefly enters success state. */
+    onSuccess?: (result: Result) => void;
+    /**
+     * How the pending/success indicator is drawn. Both modes keep the button's box fixed — CSS cannot
+     * animate an auto width, so a resizing button can only ever snap.
+     *
+     * `hold` (default) fades a bare indicator over the children, so the box stays exactly the children's
+     * size. `replace` cross-fades to a labelled indicator ("Processing…"); both labels stay stacked in the
+     * DOM, so the box is the wider of the two from the start and still never moves — at the cost of an idle
+     * button that is as wide as its longest state.
+     */
+    loadingMode?: "hold" | "replace";
+    /** Whether a failed action renders its message under the button. Off leaves it to the framework toast. */
+    showError?: boolean;
+  };
+
+/**
+ * Success mark, entering with `checkIn` (akanjs/ui/styles.css — a 340ms fade plus a 6% overshoot; `pop`'s 1.5x
+ * overshoot from zero reads as cartoonish on a glyph this small).
+ *
+ * The colour is derived from the button, never named — any fixed token fails somewhere: `text-success` vanishes
+ * on a `success` button, and a `bg-success` disc lands an unrelated hue on every other fill.
+ *
+ * `AiFillCheckCircle` is a solid disc with the tick punched out, which is why it is used instead of an outline
+ * glyph plus a tinted halo. The disc is `currentColor` (the button's foreground) and the tick is the fill
+ * showing through, so the mark reuses the variant's own foreground/background pair — already contrast-checked
+ * by themeValidator — at full strength. An earlier attempt put an outline tick on a low-alpha current-colour
+ * halo, which did the opposite: tinting the local background toward the glyph's own colour *lowered* the
+ * contrast that made the tick readable. (Do not name the class here — Tailwind's source scanner reads comments
+ * too, so a class literal in prose compiles to a dead rule.)
+ *
+ * Sizing is in `em`, so one class covers `xs` through `lg`.
+ */
+const successIconClass = "animate-checkIn text-[1.15em]";
 
-const DefaultButton = <Result = unknown>({ className, children, onClick, onSuccess, ...rest }: ButtonProps<Result>) => {
+const successDwellMs = 700;
+
+const DefaultButton = <Result = unknown>({
+  className,
+  variant,
+  size,
+  type = "button",
+  loadingMode = "hold",
+  showError = true,
+  children,
+  onClick,
+  onSuccess,
+  ...rest
+}: ButtonProps<Result>) => {
   const { l } = usePage();
+  
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
+
   const [state, setState] = useState<{
     mode: "idle" | "loading" | "success" | "error";
     error: string | null;
-    times: number;
-  }>({
-    mode: "idle",
-    error: null,
-    times: 0,
-  });
+    shown: "loading" | "success";
+  }>({ mode: "idle", error: null, shown: "loading" });
+  const busy = state.mode === "loading" || state.mode === "success";
   return (
     <>
       <button
-        className={clsx("btn", className)}
+        type={type}
+        className={recipe(
+          { variant, size },
+
+          cn(loadingMode === "hold" && "relative", busy && !rest.disabled && "disabled:opacity-100", className),
+        )}
         {...rest}
-        disabled={!!rest.disabled || ["loading", "success"].includes(state.mode)}
+        disabled={!!rest.disabled || busy}
         onClick={(e) => {
-          setState({ mode: "loading", error: null, times: state.times + 1 });
+          if (!onClick) return;
+          let errored = false;
+          const result = onClick(e, {
+            onError: (error) => {
+              errored = true;
+              setState((s) => ({ ...s, mode: "error", error }));
+            },
+          });
+          if (!isThenable(result)) return;
+          if (!errored) setState({ mode: "loading", error: null, shown: "loading" });
           void (async () => {
-            const result = await onClick(e, {
-              onError: (error) => {
-                setState({ mode: "error", error, times: state.times + 1 });
-              },
-            });
-            setState({ mode: "success", error: null, times: state.times + 1 });
-            setTimeout(() => {
-              setState({ mode: "idle", error: null, times: state.times + 1 });
-              onSuccess?.(result);
-            }, 300);
+            try {
+              const awaited = (await result) as Result;
+              
+              if (errored) return;
+              setState({ mode: "success", error: null, shown: "success" });
+              setTimeout(() => {
+                
+                setState((s) => ({ ...s, mode: "idle", error: null }));
+                onSuccess?.(awaited);
+              }, successDwellMs);
+            } catch {
+
+              setState((s) => ({ ...s, mode: "idle", error: null }));
+            }
           })();
         }}
       >
-        {state.mode === "loading" ? (
-          <>
-            <span className="loading loading-bars loading-md" /> {l("base.processing")}
-          </>
-        ) : state.mode === "success" ? (
+        {loadingMode === "replace" ? (
+
+          <span className="grid place-items-center">
+            <span
+              className={cn(
+                "col-start-1 row-start-1 flex items-center gap-2 transition-opacity duration-200",
+                busy && "opacity-0",
+              )}
+            >
+              {children}
+            </span>
+            <span
+              aria-hidden={!busy}
+              className={cn(
+                "col-start-1 row-start-1 flex items-center gap-2 transition-opacity duration-200",
+                busy ? "opacity-100" : "opacity-0",
+              )}
+            >
+              {state.shown === "success" ? (
+                <>
+                  <AiFillCheckCircle className={successIconClass} /> {l("base.processed")}
+                </>
+              ) : (
+                <>
+                  <AiOutlineLoading3Quarters className="animate-spin" /> {l("base.processing")}
+                </>
+              )}
+            </span>
+          </span>
+        ) : (
           <>
-            <AiOutlineCheckCircle /> {l("base.processed")}
+            {/* Children keep their box while hidden, so the button's measured size never changes. */}
+            <span className={cn("inline-flex items-center gap-2 transition-opacity duration-200", busy && "opacity-0")}>
+              {children}
+            </span>
+            <span
+              aria-hidden={!busy}
+              className={cn(
+                "absolute inset-0 flex items-center justify-center transition-opacity duration-200",
+                busy ? "opacity-100" : "pointer-events-none opacity-0",
+              )}
+            >
+              {state.shown === "success" ? (
+                <AiFillCheckCircle className={successIconClass} />
+              ) : (
+                <AiOutlineLoading3Quarters className="animate-spin" />
+              )}
+            </span>
           </>
-        ) : (
-          children
         )}
       </button>
-      {/* ? 이거 뭔지 */}
-      {state.error ? (
-        <div className="h-10 w-full p-2 text-center text-error text-sm">
-          {state.error ? l(state.error as "base.error") : "  "}
-        </div>
+      {showError && state.error ? (
+        <span role="alert" className="mt-1 block text-center text-destructive text-xs">
+          {l(state.error as "base.error")}
+        </span>
       ) : null}
     </>
   );
 };
 
 /**
- * Async-aware button. Resolves to a route-scoped override when a `page/**\/_overrides.tsx`
- * in the route's ancestry declares one, otherwise renders {@link DefaultButton}. The public
- * generic signature is preserved, so `<Button<Todo> onSuccess={(r: Todo) => …} />` still infers.
+ * Button whose async states are driven by the handler's return value: return a promise and it shows a
+ * pending indicator, then a brief success state; return nothing and it behaves as a plain button. Resolves
+ * to a route-scoped override when a `page/**\/_overrides.tsx` in the route's ancestry declares one,
+ * otherwise renders {@link DefaultButton}. The public generic signature is preserved, so
+ * `<Button<Todo> onSuccess={(r: Todo) => …} />` still infers.
  */
 export const Button = <Result = unknown>(props: ButtonProps<Result>) => {
   const Override = useUiOverride("Button");

package/ui/Clipboard.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { type ReactElement, useEffect, useState } from "react";
 import { FaCheck } from "react-icons/fa";
 import { MdContentCopy } from "react-icons/md";
@@ -30,8 +30,8 @@ export const Clipboard = ({ text, className }: ClipboardProps): ReactElement =>
       onClick={async () => {
         await handleCopy();
       }}
-      className={clsx(
-        "flex h-6 w-6 items-center justify-center rounded-md bg-white/30 text-white transition-all duration-300 hover:bg-white/20",
+      className={cn(
+        "flex h-6 w-6 items-center justify-center rounded-md bg-foreground/10 text-foreground transition-all duration-300 hover:bg-foreground/20",
         className,
       )}
     >