@eifi1/ui-kit 0.21.0 → 0.23.0

package/src/components/one-time-code-input.tsx

@@ -0,0 +1,288 @@
+import { forwardRef, useId, useState } from "react";
+import type { ChangeEvent, ClipboardEvent, FocusEvent, InputHTMLAttributes, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { hasMessage, mergeDescribedBy } from "./choice-parts";
+import { FIELD_BASE, FIELD_INVALID, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FloatingField } from "./ui";
+
+/**
+ * The field for a verification code — the six digits an authenticator app shows, or the
+ * ones a sign-in mail or SMS carries.
+ *
+ * Asked for by kastlan (input audit, item 3) and keksdose (K8) for the sign-in
+ * verification step, and already written twice by hand inside {@link TwoFactorSetting}.
+ * The three copies agreed on `inputMode="numeric"` and `autoComplete="one-time-code"`
+ * and on nothing else: kastlan's login stripped non-digits and capped at six, keksdose's
+ * capped at eight and kept whatever was typed, and the settings card kept everything,
+ * spaces included — so "123 456" pasted from an authenticator that groups its digits
+ * reached the server with the space in it.
+ *
+ * ONE FIELD, NOT SIX BOXES. The six-box look is the fashionable one, and every part of
+ * it works against the two ways a code actually arrives. A paste lands in ONE input,
+ * so the boxes need a paste handler that spreads it; the platform's own code autofill
+ * (iOS and macOS offer the code from Messages and Mail above the keyboard, Android's
+ * keyboards do the same) fills the ONE field marked `one-time-code`, so the boxes need
+ * that field to exist anyway, hidden; and a screen reader hears six unlabelled inputs
+ * of one character each. One text field gets all three right for free.
+ *
+ * WHAT IT DOES TO THE TEXT:
+ *  - **Digits only**, as a STRING. A code may start with 0, and a number field would
+ *    drop it ("012345" → 12345) — kastlan's login says as much in a comment. Every
+ *    character that is not a digit is dropped as it arrives, so the spaces and dashes
+ *    of "123 456" and "123-456" go, whether typed or pasted. Full-width digits (what a
+ *    Chinese input method types: "１２３") are folded to ASCII first (NFKC).
+ *  - **No `maxLength` attribute.** The browser applies it BEFORE the change event, so
+ *    pasting "123 456" into a `maxLength={6}` field kept "123 45" and the cleaning saw
+ *    one digit short. The length is enforced here instead, after the cleaning: a field
+ *    that is full refuses another digit, as `maxLength` would.
+ *  - **A paste that is a whole code replaces the field**, wherever the caret is: a
+ *    person pasting six digits means "this is the code", not "insert these into the
+ *    stale one".
+ *  - **The caret stays put** when a character is dropped, rather than jumping to the
+ *    end as a controlled input does when its value is put back.
+ *
+ * `onComplete` fires when an edit — a keystroke, a paste, the platform's autofill —
+ * makes the code `length` digits long. It is a notification, nothing more: the field
+ * never submits a form on its own. Whether a full code verifies at once is the app's
+ * call (a sign-in step may; a "turn off two-factor" form that also wants a password
+ * should not). It does not fire for a value set from outside.
+ *
+ * `label`, `hint` and `error` read as on every kit field: a floating label, a text hint
+ * as a caption under the field (a {@link FieldHint} "?" rides the label line instead),
+ * the error under that, both attached through `aria-describedby` after the caller's own.
+ */
+export interface OneTimeCodeInputProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    "value" | "defaultValue" | "onChange" | "type" | "inputMode" | "autoComplete" | "maxLength" | "pattern"
+  > {
+  /** The digits so far — a string, so leading zeros survive. */
+  value: string;
+  /** The cleaned code after every edit: digits only, never longer than `length`. */
+  onChange: (code: string) => void;
+  /** How many digits the code has. Default 6. The field refuses digits past it. */
+  length?: number;
+  /** Called with the code when an edit makes it `length` digits long. Never submits
+   *  anything itself. */
+  onComplete?: (code: string) => void;
+  /** The floating label, as on {@link Input}. Without one, name the field with
+   *  `aria-label` or `aria-labelledby` (kastlan's login points it at its prompt). */
+  label?: ReactNode;
+  /** Plain text: a caption under the field, attached with `aria-describedby`. Anything
+   *  else (a {@link FieldHint}): on the label line — or at the field's end edge when
+   *  there is no label. The rule {@link Select}'s `hint` follows. */
+  hint?: ReactNode;
+  /** What is wrong ("That code has expired"). Rendered under the field, attached with
+   *  `aria-describedby`, and implies `invalid`. */
+  error?: ReactNode;
+  /** Paint the field invalid and set `aria-invalid` without a message of its own. */
+  invalid?: boolean;
+  /** Classes for the `<input>`; `className` styles the field's wrapper once it has a
+   *  label, the `<input>` itself when it has none — as on {@link Input}. */
+  inputClassName?: string;
+  /**
+   * Keep the field `readOnly` until it first takes focus.
+   *
+   * A browser that has a login saved for the site fills it in on load — and on a page
+   * where the code field is the only text field near a password field, it can take the
+   * code field for the username and write the address into it. A read-only field is
+   * never autofilled, and focus is the moment a person (or the platform's code
+   * suggestion, which needs a focused field anyway) starts to use it. So the field
+   * stays read-only until then, and only until then.
+   *
+   * It keeps the LOOK of an editable field throughout ({@link FIELD_WRITABLE_LOOK}):
+   * this is the one place where read-only does not mean "you may not type here", and
+   * without the opt-out the field would sit there greyed until it is clicked.
+   *
+   * {@link TwoFactorSetting} has always done this — its code fields share a page with
+   * the current-password field of the disable form — and keeps doing it through this
+   * prop. Off by default, because it is a trade: a field that is read-only at the
+   * moment focus lands can be announced as read-only by a screen reader, and on some
+   * mobile browsers it does not raise the keyboard until a second tap. Turn it on where
+   * a saved login actually lands in the field.
+   */
+  readOnlyUntilFocus?: boolean;
+}
+
+// The error line under a field — the type of `ui.tsx`'s (module-private) one, so this
+// field's message is indistinguishable from an Input's.
+const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const FIELD_CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
+
+// Equal-width digits, spaced a little apart, so a code reads — and compares against the
+// authenticator's screen — digit by digit.
+const CODE_TYPE = "tabular-nums tracking-widest";
+
+/** The ASCII digits in `text`, in order. NFKC folds full-width digits ("１") to "1". */
+function digitsOf(text: string): string {
+  return text.normalize("NFKC").replace(/\D/g, "");
+}
+
+export const OneTimeCodeInput = forwardRef<HTMLInputElement, OneTimeCodeInputProps>(
+  function OneTimeCodeInput(props, ref) {
+    const {
+      value,
+      onChange,
+      length = 6,
+      onComplete,
+      label,
+      hint,
+      error,
+      invalid: invalidProp,
+      className,
+      inputClassName,
+      readOnlyUntilFocus = false,
+      readOnly,
+      id,
+      placeholder,
+      onFocus,
+      onPaste,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": ariaInvalid,
+      ...rest
+    } = props;
+    // A length below one is no code at all; a fractional one is a typo.
+    const size = Math.max(1, Math.floor(length) || 1);
+    const generatedId = useId();
+    const fieldId = id ?? generatedId;
+    const hintId = useId();
+    const errorId = useId();
+    // Text is a caption under the field; a FieldHint rides the label line. See `hint`.
+    const textHint = (typeof hint === "string" && hint !== "") || typeof hint === "number";
+    const hasError = hasMessage(error);
+    // Passed at all — even as `undefined` — the field keeps its box, so the `<input>` is
+    // never re-parented (and never loses focus) when a message comes or goes. See
+    // `FieldGroup` in ui.tsx.
+    const reserve = "error" in props || "hint" in props;
+    const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);
+    const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === "true";
+    const labelled = label !== undefined;
+
+    // Focused once = in use; the guard is down for good from then on (see the prop).
+    const [focusedOnce, setFocusedOnce] = useState(false);
+    const guarding = readOnlyUntilFocus && !focusedOnce;
+
+    const commit = (next: string) => {
+      if (next === value) return;
+      onChange(next);
+      if (next.length === size) onComplete?.(next);
+    };
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const input = e.currentTarget;
+      const raw = input.value;
+      const cleaned = digitsOf(raw);
+      // Past the length: a full field refuses the digit (what `maxLength` does), a
+      // partial one keeps the first `size` — a paste longer than the room left.
+      const refused = cleaned.length > size && value.length >= size;
+      const next = refused ? value : cleaned.slice(0, size);
+      if (next !== raw) {
+        // Write the cleaned text back NOW, with the caret where the typist left it.
+        // React would otherwise put its value back after this handler, and setting an
+        // input's value moves the caret to the end — so a space typed mid-code threw
+        // the caret to the last digit. React finds the DOM already agreeing and leaves
+        // it alone.
+        const caret = input.selectionStart ?? raw.length;
+        const at = refused
+          ? Math.max(0, caret - (raw.length - value.length))
+          : Math.min(digitsOf(raw.slice(0, caret)).length, next.length);
+        input.value = next;
+        try {
+          input.setSelectionRange(at, at);
+        } catch {
+          /* not every input type has a selection; a text field does */
+        }
+      }
+      commit(next);
+    };
+
+    const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+      onPaste?.(e);
+      // A read-only field still receives the event; it must not take the code.
+      if (e.defaultPrevented || readOnly || guarding || rest.disabled) return;
+      const pasted = digitsOf(e.clipboardData.getData("text"));
+      // Anything else — a few digits into a partial code — is an ordinary insertion,
+      // and the change handler cleans it.
+      if (pasted.length !== size) return;
+      e.preventDefault();
+      commit(pasted);
+    };
+
+    const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
+      if (guarding) setFocusedOnce(true);
+      onFocus?.(e);
+    };
+
+    const input = (
+      <input
+        ref={ref}
+        id={labelled ? fieldId : id}
+        {...rest}
+        type="text"
+        inputMode="numeric"
+        autoComplete="one-time-code"
+        // The numeric keypad's older cue, for the browsers that predate `inputMode`.
+        // The value is digits only, so it can never fail the pattern.
+        pattern="[0-9]*"
+        // A labelled field's placeholder is a single space: it drives the floating
+        // label's `placeholder-shown` trick. Unlabelled, the caller's ("000000") shows.
+        placeholder={labelled ? " " : placeholder}
+        value={value}
+        readOnly={readOnly || guarding}
+        onChange={handleChange}
+        onPaste={handlePaste}
+        onFocus={handleFocus}
+        aria-invalid={invalid || undefined}
+        aria-describedby={describedBy}
+        className={cn(
+          labelled ? FLOATING_INPUT_CLASS : FIELD_BASE,
+          CODE_TYPE,
+          // Read-only for the guard's sake only: keep the editable look. A caller's
+          // own `readOnly` keeps FIELD_BASE's settled grey, as everywhere else.
+          guarding && !readOnly && FIELD_WRITABLE_LOOK,
+          !labelled && className,
+          inputClassName,
+          invalid && FIELD_INVALID,
+        )}
+      />
+    );
+
+    const nonTextHint = hasMessage(hint) && !textHint;
+    let field: ReactNode;
+    if (labelled) {
+      field = (
+        <FloatingField className={className} htmlFor={fieldId} label={label} hint={nonTextHint ? hint : undefined}>
+          {input}
+        </FloatingField>
+      );
+    } else if (nonTextHint) {
+      // No label line to ride: the "?" goes at the field's end edge, outside the box —
+      // where an unlabelled Select puts it.
+      field = (
+        <div className="flex items-center gap-1.5">
+          <div className="min-w-0 flex-1">{input}</div>
+          <span className="flex shrink-0 items-center">{hint}</span>
+        </div>
+      );
+    } else {
+      field = input;
+    }
+
+    if (!textHint && !hasError && !reserve) return field;
+    return (
+      <div>
+        {field}
+        {textHint && (
+          <p id={hintId} className={FIELD_CAPTION_CLASS}>
+            {hint}
+          </p>
+        )}
+        {hasError && (
+          <p id={errorId} className={FIELD_ERROR_CLASS}>
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+OneTimeCodeInput.displayName = "OneTimeCodeInput";

package/src/components/phone-input.tsx

@@ -0,0 +1,299 @@
+import { forwardRef, useId, useState } from "react";
+import type { ChangeEvent, FocusEvent } from "react";
+import { useKitLabels } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import {
+  PHONE_COUNTRIES,
+  PHONE_DIAL_CODES,
+  formatNationalPhone,
+  formatPhone,
+  isE164,
+  parsePhone,
+} from "../lib/phone";
+import type { ParsedPhone, PhoneCountry, PhoneCountryCode } from "../lib/phone";
+import { hasMessage, mergeDescribedBy } from "./choice-parts";
+import { Input, Select, type InputProps } from "./ui";
+
+// ── Labels ────────────────────────────────────────────────────────────────────
+
+/** The words {@link PhoneInput} renders on its own behalf. */
+export interface PhoneInputLabels {
+  /** The country-code select's accessible name. */
+  countryCode: string;
+  /** The select's last option: a number from a country not listed, typed with its
+   *  own "+". */
+  other: string;
+}
+
+export const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels = {
+  countryCode: "Country code",
+  other: "Other",
+};
+
+/**
+ * The `phoneInput` namespace: prop > `<UiKitProvider labels>` > English (0.22.0).
+ */
+function usePhoneInputLabels(prop: Partial<PhoneInputLabels> | undefined): PhoneInputLabels {
+  const labels: PhoneInputLabels = useKitLabels("phoneInput", DEFAULT_PHONE_INPUT_LABELS, prop);
+  return labels;
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+/** The caption and the error under the row — the type every kit field uses for them
+ *  (Select's caption, Input's `error`). */
+const CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
+const ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+
+const isTextHint = (hint: unknown): hint is string | number =>
+  (typeof hint === "string" && hint !== "") || typeof hint === "number";
+
+/** A stored value read back: an E.164 number these rules can read, else `null`. */
+function storedNumber(value: string): ParsedPhone | null {
+  return isE164(value) ? parsePhone(value, "other") : null;
+}
+
+/** The select's country for a stored E.164 value, or `null` for free text. */
+function countryOf(value: string): PhoneCountry | null {
+  const parsed = storedNumber(value);
+  return parsed ? (parsed.country ?? "other") : null;
+}
+
+/** What the field emits for typed text: E.164 when it reads, the text unchanged when
+ *  it does not. */
+function emitFor(raw: string, country: PhoneCountry): string {
+  return parsePhone(raw, country)?.e164 ?? raw;
+}
+
+/**
+ * The text a stored value shows, outside of typing. Under its own country: the national
+ * number grouped ("21 000 00 01" beside "CH +41"). Under another (a "+33" number while
+ * the select says "Other"): the whole international number. Free text: as it is.
+ */
+function displayOf(value: string, country: PhoneCountry): string {
+  const parsed = storedNumber(value);
+  if (!parsed) return value;
+  if (parsed.country !== null && parsed.country === country) {
+    return formatNationalPhone(parsed.national, parsed.country);
+  }
+  return formatPhone(parsed.e164);
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export interface PhoneInputProps extends Omit<InputProps, "type" | "value" | "defaultValue"> {
+  /** The number: E.164 ("+41210000001") for one the field could read, or free text —
+   *  a value saved before the field existed is shown exactly as it is. `""` is no
+   *  number. */
+  value: string;
+  /** On every change: E.164 when the typed text reads as a number of the selected
+   *  country (or carries its own "+"), otherwise the typed text UNCHANGED. Nothing is
+   *  refused — see {@link PhoneInput}. Plain `onChange` still fires with the raw event;
+   *  bind this one to a form. */
+  onValueChange?: (value: string) => void;
+  /** The country a number typed without "+" belongs to, until the value says
+   *  otherwise. Default `"CH"`. */
+  defaultCountry?: PhoneCountry;
+  /** The countries the select offers, in order; "Other" always follows. Default
+   *  {@link PHONE_COUNTRIES} (CH, LI, DE, AT, FR, IT). A stored number from a country
+   *  left out still shows under its own code. */
+  countries?: readonly PhoneCountryCode[];
+  /** See {@link PhoneInputLabels}. */
+  labels?: Partial<PhoneInputLabels>;
+  /** Classes for the whole field — the select, the input and the lines under them.
+   *  `inputClassName` reaches the `<input>`. */
+  className?: string;
+}
+
+/**
+ * A phone number field (kastlan): a country-code select and the number, stored as
+ * E.164 and shown grouped.
+ *
+ * kastlan's contacts kept whatever was typed — "079 …", "+41 (0)79 …", "0041 79 …" —
+ * which nobody could dial from the app or match against the next import. This field
+ * turns all of those into one stored form, "+41210000001", without taking anything
+ * away from the person typing:
+ *
+ *  - **A country to type against.** The select (default CH, then LI, DE, AT, FR, IT
+ *    and "Other") says which country a number without "+" belongs to; the national
+ *    trunk 0 may be typed or left out. Typing a "+" or "00" overrides it, and the
+ *    select follows the number ("+49 …" switches it to DE). Changing the select moves
+ *    the national number to the new country code.
+ *  - **E.164 when it reads, the text when it does not.** A number the rules read is
+ *    emitted as E.164; anything else ("ask reception", an extension) is emitted exactly
+ *    as typed. Never refused, never an error of its own: a contact's number is often
+ *    known only roughly, and a field that will not save "079 … (mornings)" makes
+ *    people type it into the notes instead. An app that needs a dialable number
+ *    checks {@link isE164} on submit.
+ *  - **Existing values untouched.** A free-text value from before is shown exactly as
+ *    it is, and normalised only when someone edits it — the field never rewrites a
+ *    record just by being opened.
+ *  - **Grouped when settled.** While typing the field shows what was typed; on blur a
+ *    number it read is regrouped by its country ("21 000 00 01").
+ *
+ * **The limitation** — there is no libphonenumber behind this (≈150 kB of metadata in
+ * every bundle): the six countries have light rules (the trunk 0, a plausible length)
+ * and every other country is any "+" with 8–15 digits. A well-formed number that does
+ * not exist passes, and German and Austrian landlines, whose area codes vary in length,
+ * are grouped only where the split is known (mobile prefixes, the largest cities) and
+ * otherwise shown as one block. See `lib/phone.ts`.
+ *
+ * `label`, `hint`, `error` and `invalid` read as on {@link Input}: the label floats in
+ * the number's box, and a text hint and the error go under the whole row, attached to
+ * the number with `aria-describedby`. The select is named by `labels.countryCode`, and
+ * the pair is a group named by a string `label`.
+ */
+export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function PhoneInput(
+  {
+    value,
+    onValueChange,
+    onChange,
+    onBlur,
+    defaultCountry = "CH",
+    countries = PHONE_COUNTRIES,
+    labels,
+    className,
+    inputClassName,
+    label,
+    hint,
+    error,
+    invalid,
+    disabled,
+    "aria-describedby": ariaDescribedBy,
+    ...rest
+  },
+  ref,
+) {
+  const text = usePhoneInputLabels(labels);
+  const [country, setCountry] = useState<PhoneCountry>(() => countryOf(value) ?? defaultCountry);
+  // What was typed, shown for as long as it still reads as the value (AmountInput's
+  // draft): the person's own spacing stays under their fingers, and is regrouped on
+  // blur.
+  const [draft, setDraft] = useState<string | null>(null);
+  // The last value this field emitted, to tell its own echo from a value set outside.
+  const [emitted, setEmitted] = useState<string | null>(null);
+  const [seen, setSeen] = useState(value);
+  if (seen !== value) {
+    setSeen(value);
+    if (value !== emitted) {
+      // Set from outside (a reset, another record): its own country, none of our text.
+      const own = countryOf(value);
+      if (own) setCountry(own);
+      setDraft(null);
+    }
+  }
+
+  const emit = (next: string) => {
+    setEmitted(next);
+    onValueChange?.(next);
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e);
+    const raw = e.target.value;
+    setDraft(raw);
+    const parsed = parsePhone(raw, country);
+    // A number typed with its own "+" takes the select with it.
+    if (parsed && parsed.country !== country) setCountry(parsed.country ?? "other");
+    emit(parsed?.e164 ?? raw);
+  };
+
+  const handleCountry = (next: PhoneCountry) => {
+    setCountry(next);
+    const stored = storedNumber(value);
+    if (stored) {
+      // "Other", the same country, or a generic number with its own "+": the number
+      // stays, only the way it is shown changes.
+      if (next === "other" || stored.country === null || stored.country === next) {
+        setDraft(null);
+        return;
+      }
+      // A different listed country: the national number moves to its code. If it does
+      // not read there, the digits are kept as text for the person to finish.
+      emit(parsePhone(stored.national, next)?.e164 ?? stored.national);
+      setDraft(null);
+      return;
+    }
+    // Free text (or a draft): read it again under the new country.
+    const source = draft ?? value;
+    const parsed = source.trim() === "" ? null : parsePhone(source, next);
+    if (parsed && parsed.e164 !== value) {
+      setDraft(source);
+      emit(parsed.e164);
+    }
+  };
+
+  const display = draft !== null && emitFor(draft, country) === value ? draft : displayOf(value, country);
+
+  // The select offers the configured countries, plus the stored number's own if it
+  // is not among them — a select cannot show a value it has no option for.
+  const options: PhoneCountryCode[] = [...countries];
+  if (country !== "other" && !options.includes(country)) options.push(country);
+
+  const captionId = useId();
+  const errorId = useId();
+  const caption = isTextHint(hint);
+  const showError = hasMessage(error);
+  const named = typeof label === "string" && label !== "";
+
+  return (
+    <div
+      className={className}
+      role={named ? "group" : undefined}
+      aria-label={named ? label : undefined}
+    >
+      <div className="flex items-stretch gap-2">
+        <Select
+          aria-label={text.countryCode}
+          value={country}
+          disabled={disabled}
+          onChange={(e) => handleCountry(e.target.value as PhoneCountry)}
+          className="w-28 shrink-0"
+          // Stretched to the number's height: a labelled field is taller than an
+          // unlabelled select, and the pair should read as one row.
+          selectClassName="h-full tabular-nums"
+        >
+          {options.map((code) => (
+            <option key={code} value={code}>
+              {`${code} +${PHONE_DIAL_CODES[code]}`}
+            </option>
+          ))}
+          <option value="other">{text.other}</option>
+        </Select>
+        {/* Its own flex item, so nothing Input wraps itself in can take the sizing. */}
+        <div className="min-w-0 flex-1">
+          <Input
+            ref={ref}
+            {...rest}
+            type="tel"
+            autoComplete={rest.autoComplete ?? "tel"}
+            label={label}
+            // A FieldHint "?" rides the label line; text goes under the whole row.
+            hint={caption ? undefined : hint}
+            invalid={invalid || showError}
+            aria-describedby={mergeDescribedBy(ariaDescribedBy, caption && captionId, showError && errorId)}
+            disabled={disabled}
+            value={display}
+            onChange={handleChange}
+            onBlur={(e: FocusEvent<HTMLInputElement>) => {
+              setDraft(null);
+              onBlur?.(e);
+            }}
+            inputClassName={cn("tabular-nums", inputClassName)}
+          />
+        </div>
+      </div>
+      {caption && (
+        <p id={captionId} className={CAPTION_CLASS}>
+          {hint}
+        </p>
+      )}
+      {showError && (
+        <p id={errorId} className={ERROR_CLASS}>
+          {error}
+        </p>
+      )}
+    </div>
+  );
+});
+PhoneInput.displayName = "PhoneInput";

package/src/components/reauth-dialog.tsx

@@ -2,10 +2,10 @@ import { useContext, useEffect, useId, useRef, useState } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
 
 import { useKitLabels } from "../i18n/kit-labels";
-import { usePromisePending } from "./danger-confirm";
+import { CurrentPasswordInput, usePromisePending } from "./danger-confirm";
 import { DialogFrame } from "./dialog-frame";
 import { ModalCloseContext } from "./modal";
-import { Button, Input, Spinner } from "./ui";
+import { Button, Spinner } from "./ui";
 
 /**
  * Every string the dialog renders — the `reauthDialog` namespace of
@@ -85,8 +85,8 @@ export interface ReauthDialogProps {
  * `requirePassword` tile. Both are the same three facts — the field is the CURRENT
  * password (the password manager fills it, never generates one), a wrong one stays in
  * the dialog with its error, and the APP verifies it — so the promise handling is
- * `DangerConfirm`'s own, shared, the field is its `CurrentPasswordInput` spelled out
- * with an `error`, and this is the modal form of them.
+ * `DangerConfirm`'s own, shared, the field is its `CurrentPasswordInput` with an
+ * `error`, and this is the modal form of them.
  *
  * A component rather than a `useReauth()` promise: the step that follows the check
  * (Kurvenschmiede's WebAuthn ceremony) needs what the server answered, and the error
@@ -201,24 +201,23 @@ export function ReauthDialog({
           submit();
         }}
       >
-        {/* CurrentPasswordInput's field — the password manager fills it with the CURRENT
-            password and never offers to generate one; `readOnly`, not `disabled`, while
-            busy, because disabling the field that has focus drops focus to <body> —
-            plus `Input`'s own `error`, which that helper does not take. The message
-            paints the field, sits under it and is its `aria-describedby`; passing the
-            prop on every render keeps the field's box steady, so the message going away
-            on the first keystroke of a retry no longer remounts the <input> under the
-            typist (it did, which is why this used to draw its own message). */}
-        <Input
+        {/* The kit's CurrentPasswordInput (0.23; it drew the same field by hand until
+            then): the password manager fills it with the CURRENT password and never
+            offers to generate one; `busy` makes it `readOnly`, not `disabled`, because
+            disabling the field that has focus drops focus to <body>. Labelled by this
+            namespace's `password` ("Current password"), not `dangerConfirm.password`.
+            The `error` is Input's own: it paints the field, sits under it and is its
+            `aria-describedby`; passing the prop on every render keeps the field's box
+            steady, so the message going away on the first keystroke of a retry does not
+            remount the <input> under the typist. */}
+        <CurrentPasswordInput
           ref={inputRef}
-          type="password"
-          autoComplete="current-password"
           label={labels.password}
           value={password}
-          readOnly={busy}
+          busy={busy}
           error={shownError}
-          onChange={(e) => {
-            setPassword(e.target.value);
+          onValueChange={(next) => {
+            setPassword(next);
             setEdited(true);
           }}
         />