@clicktap/ui 0.42.4 → 0.43.0

package/components/ResendCode/ResendCode.d.ts

@@ -4,6 +4,10 @@ import { ResendCodeProps } from './ResendCode.types';
  * request and cooldown state (e.g. via a resend hook composing `useCooldown`). Renders one of three
  * labels: the cooldown countdown, the in-flight label, or the idle action label; the button is
  * disabled unless `canResend`.
+ *
+ * A visually-hidden polite live region announces when resend becomes available (CTAP-1167). The
+ * announcement is a separate region — not `aria-live` on the button — so screen-reader users hear
+ * the cooldown END without having every one-second countdown label change read out.
  */
-export declare function ResendCode({ cooldownSeconds, isResending, canResend, onResend, prompt, label, resendingLabel, className, buttonClassName, }: ResendCodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResendCode({ cooldownSeconds, isResending, canResend, onResend, prompt, label, resendingLabel, availableAnnouncement, className, buttonClassName, }: ResendCodeProps): import("react/jsx-runtime").JSX.Element;
 export default ResendCode;

package/components/ResendCode/ResendCode.js

@@ -1 +1 @@
-"use client";import{jsxs as u,jsx as b}from"react/jsx-runtime";import{cn as n}from"../../utils/cn.js";function f({cooldownSeconds:e,isResending:t,canResend:d,onResend:s,prompt:i="Didn't get a code?",label:l="Resend code",resendingLabel:o="Sending…",className:a,buttonClassName:r}){const c=e>0?`Resend in ${e}s`:t?o:l;return u("p",{className:n("text-sm",a),children:[i," ",b("button",{type:"button",onClick:s,disabled:!d,className:n("underline disabled:no-underline disabled:opacity-50 disabled:cursor-not-allowed",r),children:c})]})}export{f as ResendCode,f as default};
+"use client";import{jsxs as m,jsx as t}from"react/jsx-runtime";import{cn as a}from"../../utils/cn.js";function x({cooldownSeconds:e,isResending:n,canResend:s,onResend:d,prompt:i="Didn't get a code?",label:l="Resend code",resendingLabel:r="Sending…",availableAnnouncement:o="You can request a new code now.",className:c,buttonClassName:u}){const b=e>0?`Resend in ${e}s`:n?r:l;return m("p",{className:a("text-sm",c),children:[i," ",t("button",{type:"button",onClick:d,disabled:!s,className:a("underline disabled:no-underline disabled:opacity-50 disabled:cursor-not-allowed",u),children:b}),t("span",{"aria-live":"polite",className:"sr-only",children:e===0&&!n?o:""})]})}export{x as ResendCode,x as default};

package/components/ResendCode/ResendCode.types.d.ts

@@ -13,6 +13,11 @@ export type ResendCodeProps = {
     label?: string;
     /** Label shown while a resend is in flight. Defaults to "Sending…". */
     resendingLabel?: string;
+    /**
+     * Screen-reader announcement made (via a polite live region) when the cooldown ends and resend
+     * becomes available. Defaults to "You can request a new code now.".
+     */
+    availableAnnouncement?: string;
     /** className for the wrapping paragraph. */
     className?: string;
     /** className for the action button. */

package/hooks/useCooldown.d.ts

@@ -16,9 +16,16 @@ export interface UseCooldownResult {
 /**
  * A headless one-second countdown. `start(n)` sets the remaining seconds and it ticks down to zero.
  *
- * StrictMode-safe: the tick lives in an effect (not a state updater), and the countdown is mirrored
- * into a ref so the effect reads the latest value without re-subscribing each second and so callers
- * get a stale-free view via `isActiveNow()`.
+ * Deadline-based (CTAP-1167): `start(n)` stores an absolute deadline and every tick recomputes the
+ * remaining time from the clock instead of decrementing. Browsers and WebViews throttle timers in
+ * backgrounded tabs (Capacitor apps aggressively), so a decrementing counter falls behind real
+ * time — a 60s cooldown resumed after backgrounding would still show tens of seconds long after
+ * the real deadline passed. Recomputing makes the first tick after a throttled gap snap to the
+ * true remaining time, and `isActiveNow()` compares against the deadline itself so re-entry
+ * guards are immune to a stale count.
+ *
+ * StrictMode-safe: the tick lives in an effect (not a state updater), and the deadline is a ref so
+ * the timer chain reads the latest value without re-subscribing each second.
  */
 export declare function useCooldown(): UseCooldownResult;
 export default useCooldown;

package/hooks/useCooldown.js

@@ -1 +1 @@
-"use client";import{useState as i,useRef as f,useCallback as r,useEffect as l}from"react";function d(){const[s,n]=i(0),t=f(0),o=r(c=>{const e=Math.max(0,Math.ceil(c));t.current=e,n(e)},[]),u=r(()=>{t.current=0,n(0)},[]),a=r(()=>t.current>0,[]);return l(()=>{if(s<=0)return;const c=setTimeout(()=>{const e=Math.max(0,t.current-1);t.current=e,n(e)},1e3);return()=>clearTimeout(c)},[s]),{seconds:s,isActive:s>0,start:o,reset:u,isActiveNow:a}}export{d as default,d as useCooldown};
+"use client";import{useState as f,useRef as d,useCallback as r,useEffect as w}from"react";function M(){const[u,o]=f(0),e=d(0),i=r(n=>{const t=Math.max(0,Math.ceil(n));e.current=t>0?Date.now()+t*1e3:0,o(t)},[]),l=r(()=>{e.current=0,o(0)},[]),m=r(()=>e.current>Date.now(),[]),c=u>0;return w(()=>{if(!c)return;let n;const t=()=>{const s=e.current-Date.now();return s>0?s%1e3||1e3:0},a=()=>{const s=Math.max(0,Math.ceil((e.current-Date.now())/1e3));o(s),s>0&&(n=setTimeout(a,t()))};return n=setTimeout(a,t()),()=>clearTimeout(n)},[c]),{seconds:u,isActive:c,start:i,reset:l,isActiveNow:m}}export{M as default,M as useCooldown};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.42.4",
+  "version": "0.43.0",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",