@clicktap/ui 2.3.4 → 2.4.1

package/components/PasswordCheck/PasswordCheck.d.ts

@@ -1,3 +1,3 @@
 import { PasswordCheckProps } from './PasswordCheck.types';
-export declare function PasswordCheck({ value, variant, requirements, }: PasswordCheckProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PasswordCheck({ value, variant, requirements, schema, }: PasswordCheckProps): import("react/jsx-runtime").JSX.Element | null;
 export default PasswordCheck;

package/components/PasswordCheck/PasswordCheck.js

@@ -1 +1 @@
-"use client";import{jsxs as n,jsx as t}from"react/jsx-runtime";import{cn as r}from"../../utils/cn.js";import{trimEdgeWhitespace as g,checkStrength as x,getProgressText as o}from"./PasswordCheck.utils.js";const f=[{label:"At least 8 characters",test:s=>s.length>=8},{label:"At least one uppercase letter",test:s=>/[A-Z]/.test(s)},{label:"At least one lowercase letter",test:s=>/[a-z]/.test(s)},{label:"At least one digit",test:s=>/\d/.test(s)},{label:"At least one special character",test:s=>/[^A-Za-z0-9]/.test(s)}];function p({value:s,variant:i="default",requirements:d=f}){const c=g(s),e=x(c);return i==="requirements"?s?n("div",{className:"mt-4 flex flex-col gap-2",children:[t("ul",{className:"flex flex-col gap-1 text-xs text-left",children:d.map(a=>{const l=a.test(c);return n("li",{className:"flex items-center gap-1.5",children:[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:r("shrink-0 transition-colors",l?"text-success":"text-fg-subtle"),children:l?t("path",{d:"M20 6 9 17l-5-5"}):t("circle",{cx:"12",cy:"12",r:"4"})}),t("span",{className:r("transition-colors",l?"text-success":"text-fg-muted"),children:a.label})]},a.label)})}),n("div",{className:"flex flex-col",children:[t("div",{className:"w-full flex gap-x-2",children:Array.from({length:5},(a,l)=>l).map((a,l)=>t("div",{className:r("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},a))}),n("div",{className:r("inline-flex gap-x-1 text-xs text-fg-strong transition-opacity mt-1",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:r((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:o(e)})]})]})]}):null:t("div",{children:n("div",{className:r("relative w-full flex gap-x-2",i==="default"&&"mb-8 -mt-1"),children:[Array.from({length:5},(a,l)=>l).map((a,l)=>t("div",{className:r("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},a)),i==="default"&&n("div",{className:r("inline-flex gap-x-1 absolute top-0 left-0 text-xs translate-y-2/4 text-fg-strong",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:r((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:o(e)})]})]})})}export{p as PasswordCheck,p as default};
+"use client";import{jsxs as n,jsx as t}from"react/jsx-runtime";import{cn as a}from"../../utils/cn.js";import{trimEdgeWhitespace as h,checkStrength as p,requirementsFromSchema as b,getProgressText as m}from"./PasswordCheck.utils.js";const w=[{label:"At least 8 characters",test:s=>s.length>=8},{label:"At least one uppercase letter",test:s=>/[A-Z]/.test(s)},{label:"At least one lowercase letter",test:s=>/[a-z]/.test(s)},{label:"At least one digit",test:s=>/\d/.test(s)},{label:"At least one special character",test:s=>/[^A-Za-z0-9]/.test(s)}];function k({value:s,variant:c="default",requirements:x,schema:f}){const o=h(s),e=p(o),d=b(f),u=x??(d.length>0?d:w);return c==="requirements"?s?n("div",{className:"mt-4 flex flex-col gap-2",children:[t("ul",{className:"flex flex-col gap-1 text-xs text-left",children:u.map(r=>{const l=r.test,g=l!==void 0,i=l?l(o):!1;return n("li",{className:"flex items-center gap-1.5",children:[n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:a("shrink-0 transition-colors",i?"text-success":"text-fg-subtle"),children:[i&&t("path",{d:"M20 6 9 17l-5-5"}),!i&&g&&t("circle",{cx:"12",cy:"12",r:"4"}),!g&&t("circle",{cx:"12",cy:"12",r:"2.5",fill:"currentColor"})]}),t("span",{className:a("transition-colors",i?"text-success":"text-fg-muted"),children:r.label})]},r.label)})}),n("div",{className:"flex flex-col",children:[t("div",{className:"w-full flex gap-x-2",children:Array.from({length:5},(r,l)=>l).map((r,l)=>t("div",{className:a("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},r))}),n("div",{className:a("inline-flex gap-x-1 text-xs text-fg-strong transition-opacity mt-1",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:a((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:m(e)})]})]})]}):null:t("div",{children:n("div",{className:a("relative w-full flex gap-x-2",c==="default"&&"mb-8 -mt-1"),children:[Array.from({length:5},(r,l)=>l).map((r,l)=>t("div",{className:a("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},r)),c==="default"&&n("div",{className:a("inline-flex gap-x-1 absolute top-0 left-0 text-xs translate-y-2/4 text-fg-strong",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:a((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:m(e)})]})]})})}export{k as PasswordCheck,k as default};

package/components/PasswordCheck/PasswordCheck.types.d.ts

@@ -1,9 +1,53 @@
 export type PasswordRequirement = {
     label: string;
-    test: (value: string) => boolean;
+    /**
+     * Whether the value satisfies this rule.
+     *
+     * Optional since CTAP-1908. A rule derived from the backend schema may be one this component
+     * cannot evaluate in the browser — an arbitrary regular expression, a rule a module added after
+     * this file was written. Such a rule renders as a neutral bullet rather than being dropped:
+     * a rule that is enforced but not displayed refuses the user with no explanation, which is the
+     * whole defect this work exists to end.
+     */
+    test?: (value: string) => boolean;
+};
+/**
+ * One thing a backend schema says about a value — CTAP-1908.
+ *
+ * Declared structurally rather than imported from an app's generated types, in keeping with the
+ * rest of this library: a codegen `SchemaDescriptionClause` is assignable to it without `ui`
+ * depending on any app.
+ */
+export type SchemaDescriptionClause = {
+    /**
+     * A stable machine code (`min_length`, `at_least_one_lowercase`, …). An OPEN vocabulary — a module
+     * that owns a constraint coins its own, so never assume this component knows them all.
+     */
+    code: string;
+    /** `rule` — a condition the value must satisfy. `note` — information about it, not a check. */
+    kind: string;
+    /** The rule in English, ready to render. */
+    text: string;
+    /** The rule's arguments, e.g. `{ min: 8 }`. Read these; never parse `text`. */
+    parameters?: Record<string, unknown> | null;
+};
+/** A validation schema described in English, as served by `passwordSchemaDescription`. */
+export type SchemaDescription = {
+    clauses?: readonly (SchemaDescriptionClause | null)[] | null;
 };
 export type PasswordCheckProps = {
     value: string;
     variant?: 'default' | 'short' | 'requirements';
+    /**
+     * The rules to show. Overrides everything — a consumer with its own policy keeps full control.
+     */
     requirements?: PasswordRequirement[];
+    /**
+     * The password policy as the backend describes it (`passwordSchemaDescription`) — CTAP-1908.
+     *
+     * Pass it and the rule list is derived from the schema that actually enforces the password, so
+     * the two cannot drift. Without it the component falls back to {@link defaultRequirements}, which
+     * is a static copy and has been wrong before.
+     */
+    schema?: SchemaDescription | null;
 };

package/components/PasswordCheck/PasswordCheck.utils.d.ts

@@ -1,3 +1,4 @@
+import { PasswordRequirement, SchemaDescription } from './PasswordCheck.types';
 /**
  * Strip edge whitespace the way the backend does before it validates a password.
  *
@@ -22,3 +23,24 @@ export declare const getPasswordRequirements: (value?: string) => {
     upLowCaseLetters: boolean;
     oneNumber: boolean;
 };
+/**
+ * The rules a described backend schema states, as things this component can render — CTAP-1908.
+ *
+ * ## Why this exists
+ *
+ * `PasswordService::getPasswordSchema()` enforces a minimum length plus uppercase, **lowercase**,
+ * number and special-character rules. The hand-written list in this file showed four of them and
+ * omitted lowercase, so a user could watch every tick turn green and still be refused, with no
+ * explanation, because the rule that rejected them was never displayed. Deriving the list from the
+ * schema that enforces it is what stops that happening again.
+ *
+ * ## Two rules about unrecognised clauses
+ *
+ * 1. **An unrecognised `code` is still rendered.** It comes back with no `test`, so it shows as a
+ *    neutral bullet rather than a tick that can never turn green. Dropping it would recreate the
+ *    exact bug.
+ * 2. **A `note` is not rendered.** "Leading and trailing whitespace is removed" is true and worth
+ *    saying on a configuration screen; under a password field it is noise. The backend marks the
+ *    difference so this does not have to guess.
+ */
+export declare const requirementsFromSchema: (schema: SchemaDescription | null | undefined) => PasswordRequirement[];

package/components/PasswordCheck/PasswordCheck.utils.js

@@ -1 +1 @@
-const s=t=>t.replace(/^[\s\u0000\u200B\uFEFF]+|[\s\u0000\u200B\uFEFF]+$/g,""),n=t=>{const r=t.length>=8;let e=0;return/^(?=.*[a-z])(?=.*[A-Z])/.test(t)&&r&&(e+=1),/\d/.test(t)&&r&&(e+=1),t.length>=8&&(e+=1),t.length>=11&&(e+=1),/[ `!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(t)&&r&&(e+=1),e},c=t=>{switch(t){case 5:return"Very Strong";case 4:return"Strong";case 3:return"Good";case 2:return"Weak";case 1:return"Very Weak";default:return""}},g=(t="")=>({eightСharacters:t.length>=8,upLowCaseLetters:/^(?=.*[a-z])(?=.*[A-Z])/.test(t),oneNumber:/\d/.test(t)});export{n as checkStrength,g as getPasswordRequirements,c as getProgressText,s as trimEdgeWhitespace};
+const a=t=>t.replace(/^[\s\u0000\u200B\uFEFF]+|[\s\u0000\u200B\uFEFF]+$/g,""),o=t=>{const e=t.length>=8;let r=0;return/^(?=.*[a-z])(?=.*[A-Z])/.test(t)&&e&&(r+=1),/\d/.test(t)&&e&&(r+=1),t.length>=8&&(r+=1),t.length>=11&&(r+=1),/[ `!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(t)&&e&&(r+=1),r},c=t=>{switch(t){case 5:return"Very Strong";case 4:return"Strong";case 3:return"Good";case 2:return"Weak";case 1:return"Very Weak";default:return""}},i=(t="")=>({eightСharacters:t.length>=8,upLowCaseLetters:/^(?=.*[a-z])(?=.*[A-Z])/.test(t),oneNumber:/\d/.test(t)}),u=t=>t?.clauses?t.clauses.filter(e=>!!e&&e.kind==="rule").map(e=>({label:e.text,test:s(e)})):[],n=(t,e)=>{const r=t.parameters?.[e];return typeof r=="number"?r:void 0},s=t=>{switch(t.code){case"min_length":{const e=n(t,"min");return e===void 0?void 0:r=>r.length>=e}case"max_length":{const e=n(t,"max");return e===void 0?void 0:r=>r.length<=e}case"exact_length":{const e=n(t,"length");return e===void 0?void 0:r=>r.length===e}case"at_least_one_lowercase":return e=>/[a-z]/.test(e);case"at_least_one_uppercase":return e=>/[A-Z]/.test(e);case"at_least_one_number":return e=>/\d/.test(e);case"at_least_one_special_character":return e=>/[\W_]/.test(e);case"not_blank":return e=>e.trim().length>0;default:return}};export{o as checkStrength,i as getPasswordRequirements,c as getProgressText,u as requirementsFromSchema,a as trimEdgeWhitespace};

package/components/PasswordCheck/index.d.ts

@@ -1 +1,3 @@
 export { PasswordCheck } from './PasswordCheck';
+export { requirementsFromSchema } from './PasswordCheck.utils';
+export type { PasswordCheckProps, PasswordRequirement, SchemaDescription, SchemaDescriptionClause, } from './PasswordCheck.types';

package/components/PasswordCheck/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{PasswordCheck as i}from"./PasswordCheck.js";import"react/jsx-runtime";import"../../utils/cn.js";import"./PasswordCheck.utils.js";export{i as PasswordCheck};
+import{PasswordCheck as t}from"./PasswordCheck.js";import{requirementsFromSchema as i}from"./PasswordCheck.utils.js";import"react/jsx-runtime";import"../../utils/cn.js";export{t as PasswordCheck,i as requirementsFromSchema};

package/docs/migrations/2026/09/ui-2026-09-24-password-check-renders-from-the-schema.md

@@ -0,0 +1,109 @@
+# `PasswordCheck` renders the rules the server actually enforces
+
+**Date:** 2026-09-24
+**Package:** `@clicktap/ui`
+**Affects:** `libs/frontend-modules/ui/src/components/PasswordCheck/*` — new `schema` prop, new `requirementsFromSchema` export, `PasswordRequirement.test` is now optional
+**Requires:** a middleware serving `passwordSchemaDescription` (CTAP-1908) to use the new prop; without one nothing changes
+**Classification:** IMPROVEMENT
+**Breaking:** No. Every existing call site keeps working, and a consumer passing `requirements` still overrides everything.
+**Ticket:** CTAP-1908
+
+## Problem
+
+`PasswordCheck`'s rule list was a hard-coded array in the component:
+
+```tsx
+const defaultRequirements = [
+  { label: 'At least 8 characters', ... },
+  { label: 'At least one uppercase letter', ... },
+  { label: 'At least one digit', ... },
+  { label: 'At least one special character', ... },
+];
+```
+
+The middleware enforces those four **and a lowercase rule**. So a visitor could type `PASSW0RD!`,
+watch all four ticks turn green, submit, and be refused — by a rule that was never on the screen.
+Four hand-written lines against five enforced rules, with nothing to keep them equal.
+
+## Fix
+
+```tsx
+const passwordSchema = usePasswordSchemaDescription();   // passwordSchemaDescription query
+
+<PasswordCheck value={value} variant="requirements" schema={passwordSchema} />
+```
+
+The list is now derived from the schema that enforces the password. Five rules where there were
+four, and a sixth rule added on the backend appears with no frontend change.
+
+## Precedence
+
+| Given | Rules shown |
+|---|---|
+| `requirements` prop | exactly that list — a consumer with its own policy keeps full control |
+| `schema` with at least one `rule` clause | derived from the schema |
+| neither, or a schema stating no rules | `defaultRequirements`, the static list |
+
+The static list stays as the fallback because the component cannot tell "this policy has no rules"
+from "the query has not resolved yet", and a password field showing nothing is worse than one
+showing a stale list. It is a floor, not a claim of completeness — it has been wrong before, which
+is the whole reason `schema` exists.
+
+## Two rules the component follows, and yours should too
+
+**An unrecognised clause is rendered, not dropped.** Clause codes are an open vocabulary: a module
+that owns a constraint coins its own. `requirementsFromSchema` returns a rule with no `test` for a
+code it cannot evaluate, and the component shows it with a small filled dot instead of a tick —
+present, never claimed satisfied, never claimed failed. Dropping it would recreate the original bug
+exactly.
+
+**Notes are not rules.** The backend marks `kind: 'note'` for things like "Leading and trailing
+whitespace is removed" — true, worth showing on an admin screen, noise under a password field. The
+component skips them without needing to know what they say.
+
+## API
+
+```ts
+type PasswordRequirement = {
+  label: string;
+  test?: (value: string) => boolean;   // OPTIONAL since this change
+};
+
+requirementsFromSchema(schema): PasswordRequirement[]
+```
+
+`test` became optional so an unevaluable rule can still be listed. Every existing consumer supplies
+it, so this is a widening.
+
+`PasswordCheckProps`, `PasswordRequirement`, `SchemaDescription` and `SchemaDescriptionClause` are
+now exported from `@clicktap/ui/components/PasswordCheck` — they were not, so a consumer building a
+rule list from server data could not type it.
+
+`SchemaDescription` is declared structurally in this library, mirroring the GraphQL shape, so a
+codegen type is assignable to it without `ui` depending on any app.
+
+## ⚠️ The strength meter still measures the old policy
+
+`checkStrength()` is independent of `requirements` and always was: it hard-codes 8/11 characters,
+mixed case, digit and special. Override the rule list or pass a schema and the five-bar meter keeps
+scoring the built-in policy. That was true before this change and is unchanged by it —
+deriving the meter from the schema needs its own ticket.
+
+## Consumer checklist
+
+- **Nothing to do** if you are happy with the static list.
+- **To adopt:** take a middleware serving `passwordSchemaDescription`, add the query, and pass the
+  result as `schema` at every `PasswordCheck` call site. In this monorepo that is three components,
+  four call sites: `Signup`, `ResetPassword` and `UpdatePasswordForm` (twice).
+- **If your `*-ui` fork copied `defaultRequirements`,** it is almost certainly missing the lowercase
+  rule too. Copy `PasswordCheck.utils.ts`'s `requirementsFromSchema` and the `schema` prop rather
+  than adding the one missing line.
+
+## Verification
+
+`libs/frontend-modules/ui/src/components/PasswordCheck/PasswordCheck.spec.tsx` — 9 tests. The
+load-bearing two assert five rules from the real `passwordSchemaDescription` payload and the
+presence of the lowercase rule by name. Others pin that only satisfied rules tick, that `min` is
+read from the clause parameters rather than assumed to be 8, that an unrecognised code is rendered
+but never ticked, that notes are not rendered, that `requirements` still overrides, and both
+fallback paths.

package/docs/migrations/index.json

@@ -9,6 +9,16 @@
     "breaking": "No API change, and no prop, export or class-name contract moves. **Visual:** 76 of the 118 swaps resolve to the exact same light-theme value and render identically. The other 42 do not — they are listed component by component under \"Rendering changes\" and are all one step along a neutral ramp, except `UploadImage`, whose hover background **appears for the first time** because the class it had was a typo.",
     "affects": "54 files under `src/components/**` — every component listed in \"What changed\" below — plus the new root-level `eslint.rules.no-literal-palette-color.mjs` and the two eslint configs that reference it."
   },
+  {
+    "path": "2026/09/ui-2026-09-24-password-check-renders-from-the-schema.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-09-24",
+    "title": "`PasswordCheck` renders the rules the server actually enforces",
+    "classification": "IMPROVEMENT",
+    "breaking": "No. Every existing call site keeps working, and a consumer passing `requirements` still overrides everything.",
+    "affects": "`libs/frontend-modules/ui/src/components/PasswordCheck/*` — new `schema` prop, new `requirementsFromSchema` export, `PasswordRequirement.test` is now optional"
+  },
   {
     "path": "2026/09/ui-2026-09-24-password-check-lowercase-and-trim.md",
     "module": "libs/frontend-modules/ui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "2.3.4",
+  "version": "2.4.1",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",
@@ -107,8 +107,10 @@
     "@nx/react": "20.5.0",
     "@nx/vite": "20.5.0",
     "@storybook/addon-actions": "^8.6.18",
-    "@storybook/react": "7.4.5",
+    "@storybook/react": "^8.6.18",
     "@storybook/react-webpack5": "^8.6.18",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@tailwindcss/typography": "0.5.19",
     "@testing-library/react": "15.0.6",
     "@vitejs/plugin-react": "4.5.2",
     "framer-motion": "^11.18.2",
@@ -124,6 +126,7 @@
     "react-stately": "3.46.0",
     "rollup-preserve-directives": "^1.1.3",
     "tailwindcss": "^4.3.3",
+    "tailwindcss-react-aria-components": "1.2.0",
     "vite": "^7.3.6",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-static-copy": "^3.4.0",