@rpcbase/auth 0.53.0 → 0.54.0

package/dist/components/ResendCodeButton/index.d.ts

@@ -0,0 +1,14 @@
+export declare const useResendCountdown: (seconds?: number) => {
+    remaining: number;
+    formatted: string;
+    isCountingDown: boolean;
+    canResend: boolean;
+    restart: (nextSeconds?: number) => void;
+};
+export declare const ResendCodeButton: ({ seconds, onResend, className, disabled, }: {
+    seconds?: number;
+    onResend?: () => Promise<void> | void;
+    className?: string;
+    disabled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ResendCodeButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ResendCodeButton/index.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,GAAI,gBAAY;;;;;4BAoBF,MAAM;CAelD,CAAA;AAGD,eAAO,MAAM,gBAAgB,GAAI,6CAK9B;IACD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,4CA8CA,CAAA"}

package/dist/components/index.d.ts

@@ -5,4 +5,5 @@ export * from './SignInForm';
 export * from './SignUpForm';
 export * from './RememberMeCheckbox';
 export * from './PasswordInput';
+export * from './ResendCodeButton';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA"}

package/dist/index.js

@@ -3,7 +3,7 @@ import { useLocation, Link, useNavigate } from "@rpcbase/router";
 import clsx from "clsx";
 import { useFormContext, useForm, zodResolver, FormProvider } from "@rpcbase/form";
 import * as React from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import { r as requestSchema } from "./index-Bdcryyvv.js";
 import { r as requestSchema$1 } from "./index-DwX0Y2YV.js";
 import { b, a, r } from "./middleware-BiMXO6Dq.js";
@@ -317,15 +317,98 @@ const PasswordInput = ({
     errorMessage ? /* @__PURE__ */ jsx("p", { className: "mt-1 -mb-2 text-sm/6 text-red-500", children: errorMessage }) : null
   ] });
 };
+const useResendCountdown = (seconds = 60) => {
+  const [remaining, setRemaining] = useState(seconds);
+  const [isCountingDown, setIsCountingDown] = useState(true);
+  useEffect(() => {
+    if (!isCountingDown) return;
+    const timer = setInterval(() => {
+      setRemaining((prev) => {
+        if (prev <= 1) {
+          setIsCountingDown(false);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [isCountingDown]);
+  const restart = useCallback((nextSeconds) => {
+    const value = typeof nextSeconds === "number" ? nextSeconds : seconds;
+    setRemaining(value);
+    setIsCountingDown(true);
+  }, [seconds]);
+  const formatted = useMemo(() => {
+    const minutes = Math.floor(remaining / 60);
+    const secs = remaining % 60;
+    return `${minutes}:${secs.toString().padStart(2, "0")}`;
+  }, [remaining]);
+  const canResend = !isCountingDown && remaining === 0;
+  return { remaining, formatted, isCountingDown, canResend, restart };
+};
+const ResendCodeButton = ({
+  seconds = 60,
+  onResend,
+  className,
+  disabled
+}) => {
+  const [isSending, setIsSending] = useState(false);
+  const { formatted, isCountingDown, restart, canResend } = useResendCountdown(seconds);
+  const handleClick = async () => {
+    if (!canResend || isSending || disabled) return;
+    try {
+      setIsSending(true);
+      if (onResend) {
+        await onResend();
+      }
+    } finally {
+      restart();
+      setIsSending(false);
+    }
+  };
+  const isDisabled = disabled || isCountingDown || isSending;
+  const showCountdown = isDisabled && (isCountingDown || isSending);
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled: isDisabled,
+        "aria-label": "Resend code",
+        className: clsx(
+          "text-sm font-semibold text-sky-600 hover:underline disabled:cursor-not-allowed disabled:text-gray-400",
+          className
+        ),
+        children: "Resend code"
+      }
+    ),
+    showCountdown ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-testid": "resend-countdown",
+        className: "text-sm text-gray-500",
+        "aria-live": "polite",
+        children: [
+          "(",
+          formatted,
+          ")"
+        ]
+      }
+    ) : null
+  ] });
+};
 export {
   AppleSignInButton,
   AuthLayout,
   EmailInput,
   PasswordInput,
   RememberMeCheckbox,
+  ResendCodeButton,
   SignInForm,
   SignUpForm,
   b as redirectAuthMiddleware,
   a as requireSession,
-  r as restrictSessionMiddleware
+  r as restrictSessionMiddleware,
+  useResendCountdown
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/auth",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "type": "module",
   "files": [
     "dist"