@clicktap/ui 0.40.12 → 0.41.1

package/components/Input/Input.js

@@ -1 +1 @@
-"use client";import{jsxs as s,jsx as e}from"react/jsx-runtime";import{Label as u,TextField as v,Input as k,Text as g,FieldError as L}from"react-aria-components";import{forwardRef as C,useState as I}from"react";import{cn as t}from"../../utils/cn.js";import{Skeleton as N}from"../Skeleton/Skeleton.js";import S from"../../hooks/useIsClient.js";function j({className:r}){return s("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:r,children:[e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.64 0 8.577 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.64 0-8.577-3.007-9.963-7.178Z"}),e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})]})}function y({className:r}){return e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:r,children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"})})}function M({className:r}){return e(N,{className:t("w-full h-10 rounded-md z-20 relative",r)})}const W=C(({inputProps:r,label:n,description:i,errorMessage:x,placeholder:f,className:d,classNames:o,disableSkeleton:p,type:c,...m},h)=>{const w=S(),a=c==="password",[l,b]=I(!1);return!w&&!p?s("div",{className:t("flex flex-col w-full text-slate-900",d),children:[n?e(u,{className:t("flex text-slate-500 text-xs",o?.label),children:n}):null,e(M,{className:o?.skeleton})]}):s(v,{className:t("flex flex-col w-full text-slate-900",d),type:a?l?"text":"password":c,...m,children:[e(u,{className:t("flex text-slate-500 text-xs",o?.label),children:n}),s("div",{className:"relative",children:[e(k,{ref:h,placeholder:f,className:t("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100","invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600","invalid:hover:border-red-600 invalid:focus:border-red-600 invalid:focus:outline-red-200",a&&"pr-10",o?.input),...r}),a&&e("button",{type:"button",className:"absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-400 hover:text-slate-600 bg-transparent border-none cursor-pointer",onClick:()=>b(!l),"aria-label":l?"Hide password":"Show password",tabIndex:-1,children:l?e(y,{className:"w-5 h-5"}):e(j,{className:"w-5 h-5"})})]}),i&&e(g,{className:t("flex text-slate-500 text-sm",o?.description),slot:"description",children:i}),e(L,{className:t("flex text-red-500 text-sm",o?.error),children:x})]})});export{W as Input,W as default};
+"use client";import{jsxs as l,jsx as e}from"react/jsx-runtime";import{Label as x,TextField as k,Input as g,Text as L,FieldError as C}from"react-aria-components";import{forwardRef as I,useState as N}from"react";import{cn as t}from"../../utils/cn.js";import{Skeleton as P}from"../Skeleton/Skeleton.js";import M from"../../hooks/useIsClient.js";function S({className:r}){return l("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:r,children:[e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.64 0 8.577 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.64 0-8.577-3.007-9.963-7.178Z"}),e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})]})}function j({className:r}){return e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:r,children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"})})}function y({className:r}){return e(P,{className:t("w-full h-10 rounded-md z-20 relative",r)})}const W=I(({inputProps:r,label:s,description:d,errorMessage:p,placeholder:h,className:u,classNames:o,disableSkeleton:m,type:c,...w},b)=>{const v=M(),a=c==="password",[f,n]=N(!1);return!v&&!m?l("div",{className:t("flex flex-col w-full text-slate-900",u),children:[s?e(x,{className:t("flex text-slate-500 text-xs",o?.label),children:s}):null,e(y,{className:o?.skeleton})]}):l(k,{className:t("flex flex-col w-full text-slate-900",u),type:a?f?"text":"password":c,...w,children:[e(x,{className:t("flex text-slate-500 text-xs",o?.label),children:s}),l("div",{className:"relative",children:[e(g,{ref:b,placeholder:h,className:t("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100","invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600","invalid:hover:border-red-600 invalid:focus:border-red-600 invalid:focus:outline-red-200",a&&"pr-10",o?.input),...r}),a&&e("button",{type:"button",className:"absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-400 hover:text-slate-600 bg-transparent border-none cursor-pointer select-none",onPointerDown:i=>{i.preventDefault(),n(!0)},onPointerUp:()=>n(!1),onPointerLeave:()=>n(!1),onPointerCancel:()=>n(!1),onContextMenu:i=>i.preventDefault(),"aria-label":"Show password while pressed",tabIndex:-1,children:f?e(j,{className:"w-5 h-5"}):e(S,{className:"w-5 h-5"})})]}),d&&e(L,{className:t("flex text-slate-500 text-sm",o?.description),slot:"description",children:d}),e(C,{className:t("flex text-red-500 text-sm",o?.error),children:p})]})});export{W as Input,W as default};

package/components/ResendCode/ResendCode.d.ts

@@ -0,0 +1,9 @@
+import { ResendCodeProps } from './ResendCode.types';
+/**
+ * "Didn't get a code? Resend" control for OTP flows. Presentation only — the caller owns the resend
+ * 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`.
+ */
+export declare function ResendCode({ cooldownSeconds, isResending, canResend, onResend, prompt, label, resendingLabel, className, buttonClassName, }: ResendCodeProps): import("react/jsx-runtime").JSX.Element;
+export default ResendCode;

package/components/ResendCode/ResendCode.js

@@ -0,0 +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};

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

@@ -0,0 +1,20 @@
+export type ResendCodeProps = {
+    /** Seconds remaining on the cooldown; when > 0 the control reads "Resend in Ns". */
+    cooldownSeconds: number;
+    /** True while a resend request is in flight (shows `resendingLabel`). */
+    isResending: boolean;
+    /** Whether the control is actionable (no active cooldown and not in flight). */
+    canResend: boolean;
+    /** Fired when the user activates the control. */
+    onResend: () => void;
+    /** Leading prompt text. Defaults to "Didn't get a code?". */
+    prompt?: string;
+    /** Idle action label. Defaults to "Resend code". */
+    label?: string;
+    /** Label shown while a resend is in flight. Defaults to "Sending…". */
+    resendingLabel?: string;
+    /** className for the wrapping paragraph. */
+    className?: string;
+    /** className for the action button. */
+    buttonClassName?: string;
+};

package/components/ResendCode/index.d.ts

@@ -0,0 +1,2 @@
+export { ResendCode } from './ResendCode';
+export type { ResendCodeProps } from './ResendCode.types';

package/components/ResendCode/index.js

@@ -0,0 +1 @@
+import{ResendCode as p}from"./ResendCode.js";import"react/jsx-runtime";import"../../utils/cn.js";export{p as ResendCode};

package/docs/migrations/2026/08/2026-08-04-password-reveal-press-and-hold.md

@@ -0,0 +1,48 @@
+# Password reveal is press-and-hold, not a toggle
+
+**Date:** 2026-08-04
+**Affects:** `@clicktap/ui` — `Input` with `type="password"`.
+**Classification:** IMPROVEMENT (security / UX)
+**Breaking:** Behavioural only — the reveal changed from a click-toggle to press-and-hold. No API/prop
+change; adoption is automatic.
+**Ticket:** CTAP-1128
+
+## Summary
+
+The password-field reveal (the eye button in `Input`) now **shows the value only while the control is
+actively held**, and hides it the instant the press ends. Previously it was a click **toggle**, which
+could leave a password on screen after a stray click and widened the shoulder-surfing window. Press-and-
+hold ties visibility to the moment of intent.
+
+## What changed
+
+The reveal button swapped its `onClick` toggle for pointer press-and-hold:
+
+```tsx
+onPointerDown={(e) => { e.preventDefault(); setShowPassword(true); }}
+onPointerUp={() => setShowPassword(false)}
+onPointerLeave={() => setShowPassword(false)}
+onPointerCancel={() => setShowPassword(false)}
+onContextMenu={(e) => e.preventDefault()}
+aria-label="Show password while pressed"
+tabIndex={-1}
+```
+
+- **Pointer events** (not mouse-only) so mouse and touch both work from one code path.
+- `preventDefault()` on press keeps focus on the input while peeking (you can keep typing).
+- `onPointerLeave` / `onPointerCancel` cover dragging off the button or an interrupted touch, so the
+  value can't get stuck visible.
+- **Unchanged:** the reveal is still pointer-only (`tabIndex={-1}`, not in the tab order) — this migration
+  does not add keyboard reveal.
+
+## Action required (consumer)
+
+- **Using `@clicktap/ui` `Input`:** nothing — the behaviour ships with the component.
+- **Rolled your own password reveal:** mirror the pattern above (swap the `onClick` toggle for the
+  pointer handlers) so behaviour is consistent across your app. The reference frontend also updated its
+  one bespoke reveal (`UpdateEmailForm`) to match.
+
+## Verify
+
+Press and hold the eye control → the characters show; release (or drag the pointer off) → they hide
+again. A single click no longer leaves the password visible.

package/docs/migrations/2026/08/2026-08-04-resend-code-control.md

@@ -0,0 +1,68 @@
+# `ResendCode` control + `useCooldown` hook
+
+**Date:** 2026-08-04
+**Affects:** `@clicktap/ui` — new `components/ResendCode` and `hooks/useCooldown` exports.
+**Classification:** IMPROVEMENT (new capability)
+**Breaking:** No — additive exports.
+**Consumers:** the OTP resend timer — [wire it everywhere](../../../../../../apps/frontend/docs/migrations/2026/08/2026-08-04-otp-resend-timer.md) ·
+GraphQL contract — [resend mutations](../../../../../../libs/mezzio-modules/user/docs/migrations/2026/08/2026-08-04-otp-resend-mutations.md)
+
+## Summary
+
+Two additive, headless-friendly exports for building "Resend code" controls (CTAP-1114), so every OTP
+flow renders the same states from one place instead of hand-rolling the markup per form.
+
+### `@clicktap/ui/hooks/useCooldown`
+
+A one-second countdown. `start(n)` sets the remaining seconds and it ticks to zero.
+
+```ts
+const { seconds, isActive, start, reset, isActiveNow } = useCooldown();
+```
+
+| Field | |
+|---|---|
+| `seconds` | remaining seconds (0 when inactive) — drives rendering |
+| `isActive` | `seconds > 0` |
+| `start(seconds)` | begin/restart (rounds up, floors at 0) |
+| `reset()` | clear immediately |
+| `isActiveNow()` | **stale-free** active check for use inside event handlers / re-entry guards |
+
+**StrictMode-safe:** the tick lives in an effect (never in a state updater), and the count is mirrored
+into a ref so the effect reads the latest value and `isActiveNow()` never goes stale. Do **not** put a
+side effect inside a `setState` updater to guard re-entry — StrictMode double-invokes updaters and it
+fires twice.
+
+### `@clicktap/ui/components/ResendCode`
+
+Presentational only — the caller owns the request + cooldown state. Renders one of three labels
+(countdown / in-flight / idle) and disables the button unless `canResend`.
+
+```tsx
+<ResendCode
+  cooldownSeconds={seconds}
+  isResending={isResending}
+  canResend={canResend}
+  onResend={resend}
+  prompt="Didn't get a code?"   // default
+  label="Resend code"           // default idle label
+  resendingLabel="Sending…"     // default
+  className="…"                 // wrapper <p>
+  buttonClassName="…"           // action <button>
+/>
+```
+
+Renders `Didn't get a code? {Resend code | Resend in Ns | Sending…}`. Style per context via
+`className` / `buttonClassName` (tailwind-merge, so your `text-xs` overrides the default `text-sm`).
+
+## Action required (consumer)
+
+1. **Bump `@clicktap/ui`** to the release that ships this migration.
+2. Use `<ResendCode>` for OTP resend controls; drive it from `useCooldown` (or a domain hook that
+   composes it — see the frontend guide's `useResendCode`).
+
+## Notes
+
+- `ResendCode` is a plain `<button type="button">` — safe inside a `react-aria` `Form` (won't submit).
+- `useCooldown` is domain-agnostic; the OTP rate-limit contract (`otp_rate_limited`,
+  `retryAfterSeconds`) lives in the consuming app, not here.

package/docs/migrations/README.md

@@ -27,5 +27,7 @@ For migrations affecting the frontend app, see [frontend migrations](../../../..
 | 2026-05-29 | [`PasswordCheck` — the `requirements` variant (adoption guide for forks)](./2026/05/2026-05-29-password-check-requirements-variant.md) | No | PasswordCheck hide-on-empty |
 | 2026-06-17 | [Select standardization — one `<Select searchable>`, `DropdownSelect` removed](./2026/06/2026-06-17-select-standardization.md) ↔ | Yes | *None* |
 | 2026-06-18 | [Select (searchable): fix "setValue is not a function" crash on browser autofill](./2026/06/2026-06-18-select-hiddenselect-setvalue-crash.md) | No | Select standardization |
+| 2026-08-04 | [`ResendCode` control + `useCooldown` hook](./2026/08/2026-08-04-resend-code-control.md) ↔ | No | OTP resend timer (CTAP-1114) |
+| 2026-08-04 | [Password reveal is press-and-hold, not a toggle](./2026/08/2026-08-04-password-reveal-press-and-hold.md) | Behavioural | *None* (CTAP-1128) |
 
 ↔ = cross-app migration (has counterpart in frontend app)

package/hooks/useCooldown.d.ts

@@ -0,0 +1,24 @@
+export interface UseCooldownResult {
+    /** Seconds remaining; 0 when inactive. Drives rendering (e.g. "Resend in Ns"). */
+    seconds: number;
+    /** True while a cooldown is counting down. */
+    isActive: boolean;
+    /** Begin (or restart) the cooldown at `seconds` (rounded up, floored at 0). */
+    start: (seconds: number) => void;
+    /** Clear the cooldown immediately. */
+    reset: () => void;
+    /**
+     * Stale-free active check for use inside event handlers / re-entry guards, where the `seconds`
+     * state captured by a stable callback would be out of date.
+     */
+    isActiveNow: () => boolean;
+}
+/**
+ * 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()`.
+ */
+export declare function useCooldown(): UseCooldownResult;
+export default useCooldown;

package/hooks/useCooldown.js

@@ -0,0 +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};

package/package.json

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