@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/components/one-time-code-input.d.ts

@@ -0,0 +1,100 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * 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.
+ */
+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;
+}
+declare const OneTimeCodeInput: react.ForwardRefExoticComponent<OneTimeCodeInputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { OneTimeCodeInput, type OneTimeCodeInputProps };

package/dist/components/one-time-code-input.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
+import { FIELD_BASE, FIELD_INVALID, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FloatingField } from "./ui.js";
+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)]";
+const CODE_TYPE = "tabular-nums tracking-widest";
+function digitsOf(text) {
+  return text.normalize("NFKC").replace(/\D/g, "");
+}
+const OneTimeCodeInput = forwardRef(
+  function OneTimeCodeInput2(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;
+    const size = Math.max(1, Math.floor(length) || 1);
+    const generatedId = useId();
+    const fieldId = id ?? generatedId;
+    const hintId = useId();
+    const errorId = useId();
+    const textHint = typeof hint === "string" && hint !== "" || typeof hint === "number";
+    const hasError = hasMessage(error);
+    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 !== void 0;
+    const [focusedOnce, setFocusedOnce] = useState(false);
+    const guarding = readOnlyUntilFocus && !focusedOnce;
+    const commit = (next) => {
+      if (next === value) return;
+      onChange(next);
+      if (next.length === size) onComplete?.(next);
+    };
+    const handleChange = (e) => {
+      const input2 = e.currentTarget;
+      const raw = input2.value;
+      const cleaned = digitsOf(raw);
+      const refused = cleaned.length > size && value.length >= size;
+      const next = refused ? value : cleaned.slice(0, size);
+      if (next !== raw) {
+        const caret = input2.selectionStart ?? raw.length;
+        const at = refused ? Math.max(0, caret - (raw.length - value.length)) : Math.min(digitsOf(raw.slice(0, caret)).length, next.length);
+        input2.value = next;
+        try {
+          input2.setSelectionRange(at, at);
+        } catch {
+        }
+      }
+      commit(next);
+    };
+    const handlePaste = (e) => {
+      onPaste?.(e);
+      if (e.defaultPrevented || readOnly || guarding || rest.disabled) return;
+      const pasted = digitsOf(e.clipboardData.getData("text"));
+      if (pasted.length !== size) return;
+      e.preventDefault();
+      commit(pasted);
+    };
+    const handleFocus = (e) => {
+      if (guarding) setFocusedOnce(true);
+      onFocus?.(e);
+    };
+    const input = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id: labelled ? fieldId : id,
+        ...rest,
+        type: "text",
+        inputMode: "numeric",
+        autoComplete: "one-time-code",
+        pattern: "[0-9]*",
+        placeholder: labelled ? " " : placeholder,
+        value,
+        readOnly: readOnly || guarding,
+        onChange: handleChange,
+        onPaste: handlePaste,
+        onFocus: handleFocus,
+        "aria-invalid": invalid || void 0,
+        "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;
+    if (labelled) {
+      field = /* @__PURE__ */ jsx(FloatingField, { className, htmlFor: fieldId, label, hint: nonTextHint ? hint : void 0, children: input });
+    } else if (nonTextHint) {
+      field = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: input }),
+        /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
+      ] });
+    } else {
+      field = input;
+    }
+    if (!textHint && !hasError && !reserve) return field;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      field,
+      textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: FIELD_CAPTION_CLASS, children: hint }),
+      hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error })
+    ] });
+  }
+);
+OneTimeCodeInput.displayName = "OneTimeCodeInput";
+export {
+  OneTimeCodeInput
+};
+//# sourceMappingURL=one-time-code-input.js.map

package/dist/components/one-time-code-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/one-time-code-input.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, FocusEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { FIELD_BASE, FIELD_INVALID, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FloatingField } from \"./ui\";\n\n/**\n * The field for a verification code — the six digits an authenticator app shows, or the\n * ones a sign-in mail or SMS carries.\n *\n * Asked for by kastlan (input audit, item 3) and keksdose (K8) for the sign-in\n * verification step, and already written twice by hand inside {@link TwoFactorSetting}.\n * The three copies agreed on `inputMode=\"numeric\"` and `autoComplete=\"one-time-code\"`\n * and on nothing else: kastlan's login stripped non-digits and capped at six, keksdose's\n * capped at eight and kept whatever was typed, and the settings card kept everything,\n * spaces included — so \"123 456\" pasted from an authenticator that groups its digits\n * reached the server with the space in it.\n *\n * ONE FIELD, NOT SIX BOXES. The six-box look is the fashionable one, and every part of\n * it works against the two ways a code actually arrives. A paste lands in ONE input,\n * so the boxes need a paste handler that spreads it; the platform's own code autofill\n * (iOS and macOS offer the code from Messages and Mail above the keyboard, Android's\n * keyboards do the same) fills the ONE field marked `one-time-code`, so the boxes need\n * that field to exist anyway, hidden; and a screen reader hears six unlabelled inputs\n * of one character each. One text field gets all three right for free.\n *\n * WHAT IT DOES TO THE TEXT:\n *  - **Digits only**, as a STRING. A code may start with 0, and a number field would\n *    drop it (\"012345\" → 12345) — kastlan's login says as much in a comment. Every\n *    character that is not a digit is dropped as it arrives, so the spaces and dashes\n *    of \"123 456\" and \"123-456\" go, whether typed or pasted. Full-width digits (what a\n *    Chinese input method types: \"１２３\") are folded to ASCII first (NFKC).\n *  - **No `maxLength` attribute.** The browser applies it BEFORE the change event, so\n *    pasting \"123 456\" into a `maxLength={6}` field kept \"123 45\" and the cleaning saw\n *    one digit short. The length is enforced here instead, after the cleaning: a field\n *    that is full refuses another digit, as `maxLength` would.\n *  - **A paste that is a whole code replaces the field**, wherever the caret is: a\n *    person pasting six digits means \"this is the code\", not \"insert these into the\n *    stale one\".\n *  - **The caret stays put** when a character is dropped, rather than jumping to the\n *    end as a controlled input does when its value is put back.\n *\n * `onComplete` fires when an edit — a keystroke, a paste, the platform's autofill —\n * makes the code `length` digits long. It is a notification, nothing more: the field\n * never submits a form on its own. Whether a full code verifies at once is the app's\n * call (a sign-in step may; a \"turn off two-factor\" form that also wants a password\n * should not). It does not fire for a value set from outside.\n *\n * `label`, `hint` and `error` read as on every kit field: a floating label, a text hint\n * as a caption under the field (a {@link FieldHint} \"?\" rides the label line instead),\n * the error under that, both attached through `aria-describedby` after the caller's own.\n */\nexport interface OneTimeCodeInputProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"inputMode\" | \"autoComplete\" | \"maxLength\" | \"pattern\"\n  > {\n  /** The digits so far — a string, so leading zeros survive. */\n  value: string;\n  /** The cleaned code after every edit: digits only, never longer than `length`. */\n  onChange: (code: string) => void;\n  /** How many digits the code has. Default 6. The field refuses digits past it. */\n  length?: number;\n  /** Called with the code when an edit makes it `length` digits long. Never submits\n   *  anything itself. */\n  onComplete?: (code: string) => void;\n  /** The floating label, as on {@link Input}. Without one, name the field with\n   *  `aria-label` or `aria-labelledby` (kastlan's login points it at its prompt). */\n  label?: ReactNode;\n  /** Plain text: a caption under the field, attached with `aria-describedby`. Anything\n   *  else (a {@link FieldHint}): on the label line — or at the field's end edge when\n   *  there is no label. The rule {@link Select}'s `hint` follows. */\n  hint?: ReactNode;\n  /** What is wrong (\"That code has expired\"). Rendered under the field, attached with\n   *  `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** Paint the field invalid and set `aria-invalid` without a message of its own. */\n  invalid?: boolean;\n  /** Classes for the `<input>`; `className` styles the field's wrapper once it has a\n   *  label, the `<input>` itself when it has none — as on {@link Input}. */\n  inputClassName?: string;\n  /**\n   * Keep the field `readOnly` until it first takes focus.\n   *\n   * A browser that has a login saved for the site fills it in on load — and on a page\n   * where the code field is the only text field near a password field, it can take the\n   * code field for the username and write the address into it. A read-only field is\n   * never autofilled, and focus is the moment a person (or the platform's code\n   * suggestion, which needs a focused field anyway) starts to use it. So the field\n   * stays read-only until then, and only until then.\n   *\n   * It keeps the LOOK of an editable field throughout ({@link FIELD_WRITABLE_LOOK}):\n   * this is the one place where read-only does not mean \"you may not type here\", and\n   * without the opt-out the field would sit there greyed until it is clicked.\n   *\n   * {@link TwoFactorSetting} has always done this — its code fields share a page with\n   * the current-password field of the disable form — and keeps doing it through this\n   * prop. Off by default, because it is a trade: a field that is read-only at the\n   * moment focus lands can be announced as read-only by a screen reader, and on some\n   * mobile browsers it does not raise the keyboard until a second tap. Turn it on where\n   * a saved login actually lands in the field.\n   */\n  readOnlyUntilFocus?: boolean;\n}\n\n// The error line under a field — the type of `ui.tsx`'s (module-private) one, so this\n// field's message is indistinguishable from an Input's.\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\nconst FIELD_CAPTION_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\";\n\n// Equal-width digits, spaced a little apart, so a code reads — and compares against the\n// authenticator's screen — digit by digit.\nconst CODE_TYPE = \"tabular-nums tracking-widest\";\n\n/** The ASCII digits in `text`, in order. NFKC folds full-width digits (\"１\") to \"1\". */\nfunction digitsOf(text: string): string {\n  return text.normalize(\"NFKC\").replace(/\\D/g, \"\");\n}\n\nexport const OneTimeCodeInput = forwardRef<HTMLInputElement, OneTimeCodeInputProps>(\n  function OneTimeCodeInput(props, ref) {\n    const {\n      value,\n      onChange,\n      length = 6,\n      onComplete,\n      label,\n      hint,\n      error,\n      invalid: invalidProp,\n      className,\n      inputClassName,\n      readOnlyUntilFocus = false,\n      readOnly,\n      id,\n      placeholder,\n      onFocus,\n      onPaste,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-invalid\": ariaInvalid,\n      ...rest\n    } = props;\n    // A length below one is no code at all; a fractional one is a typo.\n    const size = Math.max(1, Math.floor(length) || 1);\n    const generatedId = useId();\n    const fieldId = id ?? generatedId;\n    const hintId = useId();\n    const errorId = useId();\n    // Text is a caption under the field; a FieldHint rides the label line. See `hint`.\n    const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n    const hasError = hasMessage(error);\n    // Passed at all — even as `undefined` — the field keeps its box, so the `<input>` is\n    // never re-parented (and never loses focus) when a message comes or goes. See\n    // `FieldGroup` in ui.tsx.\n    const reserve = \"error\" in props || \"hint\" in props;\n    const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);\n    const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === \"true\";\n    const labelled = label !== undefined;\n\n    // Focused once = in use; the guard is down for good from then on (see the prop).\n    const [focusedOnce, setFocusedOnce] = useState(false);\n    const guarding = readOnlyUntilFocus && !focusedOnce;\n\n    const commit = (next: string) => {\n      if (next === value) return;\n      onChange(next);\n      if (next.length === size) onComplete?.(next);\n    };\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const input = e.currentTarget;\n      const raw = input.value;\n      const cleaned = digitsOf(raw);\n      // Past the length: a full field refuses the digit (what `maxLength` does), a\n      // partial one keeps the first `size` — a paste longer than the room left.\n      const refused = cleaned.length > size && value.length >= size;\n      const next = refused ? value : cleaned.slice(0, size);\n      if (next !== raw) {\n        // Write the cleaned text back NOW, with the caret where the typist left it.\n        // React would otherwise put its value back after this handler, and setting an\n        // input's value moves the caret to the end — so a space typed mid-code threw\n        // the caret to the last digit. React finds the DOM already agreeing and leaves\n        // it alone.\n        const caret = input.selectionStart ?? raw.length;\n        const at = refused\n          ? Math.max(0, caret - (raw.length - value.length))\n          : Math.min(digitsOf(raw.slice(0, caret)).length, next.length);\n        input.value = next;\n        try {\n          input.setSelectionRange(at, at);\n        } catch {\n          /* not every input type has a selection; a text field does */\n        }\n      }\n      commit(next);\n    };\n\n    const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n      onPaste?.(e);\n      // A read-only field still receives the event; it must not take the code.\n      if (e.defaultPrevented || readOnly || guarding || rest.disabled) return;\n      const pasted = digitsOf(e.clipboardData.getData(\"text\"));\n      // Anything else — a few digits into a partial code — is an ordinary insertion,\n      // and the change handler cleans it.\n      if (pasted.length !== size) return;\n      e.preventDefault();\n      commit(pasted);\n    };\n\n    const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n      if (guarding) setFocusedOnce(true);\n      onFocus?.(e);\n    };\n\n    const input = (\n      <input\n        ref={ref}\n        id={labelled ? fieldId : id}\n        {...rest}\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"one-time-code\"\n        // The numeric keypad's older cue, for the browsers that predate `inputMode`.\n        // The value is digits only, so it can never fail the pattern.\n        pattern=\"[0-9]*\"\n        // A labelled field's placeholder is a single space: it drives the floating\n        // label's `placeholder-shown` trick. Unlabelled, the caller's (\"000000\") shows.\n        placeholder={labelled ? \" \" : placeholder}\n        value={value}\n        readOnly={readOnly || guarding}\n        onChange={handleChange}\n        onPaste={handlePaste}\n        onFocus={handleFocus}\n        aria-invalid={invalid || undefined}\n        aria-describedby={describedBy}\n        className={cn(\n          labelled ? FLOATING_INPUT_CLASS : FIELD_BASE,\n          CODE_TYPE,\n          // Read-only for the guard's sake only: keep the editable look. A caller's\n          // own `readOnly` keeps FIELD_BASE's settled grey, as everywhere else.\n          guarding && !readOnly && FIELD_WRITABLE_LOOK,\n          !labelled && className,\n          inputClassName,\n          invalid && FIELD_INVALID,\n        )}\n      />\n    );\n\n    const nonTextHint = hasMessage(hint) && !textHint;\n    let field: ReactNode;\n    if (labelled) {\n      field = (\n        <FloatingField className={className} htmlFor={fieldId} label={label} hint={nonTextHint ? hint : undefined}>\n          {input}\n        </FloatingField>\n      );\n    } else if (nonTextHint) {\n      // No label line to ride: the \"?\" goes at the field's end edge, outside the box —\n      // where an unlabelled Select puts it.\n      field = (\n        <div className=\"flex items-center gap-1.5\">\n          <div className=\"min-w-0 flex-1\">{input}</div>\n          <span className=\"flex shrink-0 items-center\">{hint}</span>\n        </div>\n      );\n    } else {\n      field = input;\n    }\n\n    if (!textHint && !hasError && !reserve) return field;\n    return (\n      <div>\n        {field}\n        {textHint && (\n          <p id={hintId} className={FIELD_CAPTION_CLASS}>\n            {hint}\n          </p>\n        )}\n        {hasError && (\n          <p id={errorId} className={FIELD_ERROR_CLASS}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\nOneTimeCodeInput.displayName = \"OneTimeCodeInput\";\n"],"mappings":";AAuNM,cA6CE,YA7CF;AAvNN,SAAS,YAAY,OAAO,gBAAgB;AAE5C,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwB;AAC7C,SAAS,YAAY,eAAe,qBAAqB,sBAAsB,qBAAqB;AAuGpG,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AAI5B,MAAM,YAAY;AAGlB,SAAS,SAAS,MAAsB;AACtC,SAAO,KAAK,UAAU,MAAM,EAAE,QAAQ,OAAO,EAAE;AACjD;AAEO,MAAM,mBAAmB;AAAA,EAC9B,SAASA,kBAAiB,OAAO,KAAK;AACpC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,gBAAgB;AAAA,MAChB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,KAAK,CAAC;AAChD,UAAM,cAAc,MAAM;AAC1B,UAAM,UAAU,MAAM;AACtB,UAAM,SAAS,MAAM;AACrB,UAAM,UAAU,MAAM;AAEtB,UAAM,WAAY,OAAO,SAAS,YAAY,SAAS,MAAO,OAAO,SAAS;AAC9E,UAAM,WAAW,WAAW,KAAK;AAIjC,UAAM,UAAU,WAAW,SAAS,UAAU;AAC9C,UAAM,cAAc,iBAAiB,iBAAiB,YAAY,QAAQ,YAAY,OAAO;AAC7F,UAAM,UAAU,QAAQ,WAAW,KAAK,YAAY,gBAAgB,QAAQ,gBAAgB;AAC5F,UAAM,WAAW,UAAU;AAG3B,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,UAAM,WAAW,sBAAsB,CAAC;AAExC,UAAM,SAAS,CAAC,SAAiB;AAC/B,UAAI,SAAS,MAAO;AACpB,eAAS,IAAI;AACb,UAAI,KAAK,WAAW,KAAM,cAAa,IAAI;AAAA,IAC7C;AAEA,UAAM,eAAe,CAAC,MAAqC;AACzD,YAAMC,SAAQ,EAAE;AAChB,YAAM,MAAMA,OAAM;AAClB,YAAM,UAAU,SAAS,GAAG;AAG5B,YAAM,UAAU,QAAQ,SAAS,QAAQ,MAAM,UAAU;AACzD,YAAM,OAAO,UAAU,QAAQ,QAAQ,MAAM,GAAG,IAAI;AACpD,UAAI,SAAS,KAAK;AAMhB,cAAM,QAAQA,OAAM,kBAAkB,IAAI;AAC1C,cAAM,KAAK,UACP,KAAK,IAAI,GAAG,SAAS,IAAI,SAAS,MAAM,OAAO,IAC/C,KAAK,IAAI,SAAS,IAAI,MAAM,GAAG,KAAK,CAAC,EAAE,QAAQ,KAAK,MAAM;AAC9D,QAAAA,OAAM,QAAQ;AACd,YAAI;AACF,UAAAA,OAAM,kBAAkB,IAAI,EAAE;AAAA,QAChC,QAAQ;AAAA,QAER;AAAA,MACF;AACA,aAAO,IAAI;AAAA,IACb;AAEA,UAAM,cAAc,CAAC,MAAwC;AAC3D,gBAAU,CAAC;AAEX,UAAI,EAAE,oBAAoB,YAAY,YAAY,KAAK,SAAU;AACjE,YAAM,SAAS,SAAS,EAAE,cAAc,QAAQ,MAAM,CAAC;AAGvD,UAAI,OAAO,WAAW,KAAM;AAC5B,QAAE,eAAe;AACjB,aAAO,MAAM;AAAA,IACf;AAEA,UAAM,cAAc,CAAC,MAAoC;AACvD,UAAI,SAAU,gBAAe,IAAI;AACjC,gBAAU,CAAC;AAAA,IACb;AAEA,UAAM,QACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,WAAW,UAAU;AAAA,QACxB,GAAG;AAAA,QACJ,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAa;AAAA,QAGb,SAAQ;AAAA,QAGR,aAAa,WAAW,MAAM;AAAA,QAC9B;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAS;AAAA,QACT,gBAAc,WAAW;AAAA,QACzB,oBAAkB;AAAA,QAClB,WAAW;AAAA,UACT,WAAW,uBAAuB;AAAA,UAClC;AAAA;AAAA;AAAA,UAGA,YAAY,CAAC,YAAY;AAAA,UACzB,CAAC,YAAY;AAAA,UACb;AAAA,UACA,WAAW;AAAA,QACb;AAAA;AAAA,IACF;AAGF,UAAM,cAAc,WAAW,IAAI,KAAK,CAAC;AACzC,QAAI;AACJ,QAAI,UAAU;AACZ,cACE,oBAAC,iBAAc,WAAsB,SAAS,SAAS,OAAc,MAAM,cAAc,OAAO,QAC7F,iBACH;AAAA,IAEJ,WAAW,aAAa;AAGtB,cACE,qBAAC,SAAI,WAAU,6BACb;AAAA,4BAAC,SAAI,WAAU,kBAAkB,iBAAM;AAAA,QACvC,oBAAC,UAAK,WAAU,8BAA8B,gBAAK;AAAA,SACrD;AAAA,IAEJ,OAAO;AACL,cAAQ;AAAA,IACV;AAEA,QAAI,CAAC,YAAY,CAAC,YAAY,CAAC,QAAS,QAAO;AAC/C,WACE,qBAAC,SACE;AAAA;AAAA,MACA,YACC,oBAAC,OAAE,IAAI,QAAQ,WAAW,qBACvB,gBACH;AAAA,MAED,YACC,oBAAC,OAAE,IAAI,SAAS,WAAW,mBACxB,iBACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;","names":["OneTimeCodeInput","input"]}

package/dist/components/phone-input.d.ts

@@ -0,0 +1,69 @@
+import 'react';
+import '../lib/phone.js';
+export { ab as DEFAULT_PHONE_INPUT_LABELS, bq as PhoneInput, br as PhoneInputLabels, bs as PhoneInputProps } from '../feedback-BxeQVzwq.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import './field-sync.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import './account-settings-labels.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './signed-amount.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
+import './write-lock.js';
+import './legal.js';
+import './account-chips.js';
+import '../lib/format.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';

package/dist/components/phone-input.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { cn } from "../lib/cn.js";
+import {
+  PHONE_COUNTRIES,
+  PHONE_DIAL_CODES,
+  formatNationalPhone,
+  formatPhone,
+  isE164,
+  parsePhone
+} from "../lib/phone.js";
+import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
+import { Input, Select } from "./ui.js";
+const DEFAULT_PHONE_INPUT_LABELS = {
+  countryCode: "Country code",
+  other: "Other"
+};
+function usePhoneInputLabels(prop) {
+  const labels = useKitLabels("phoneInput", DEFAULT_PHONE_INPUT_LABELS, prop);
+  return labels;
+}
+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) => typeof hint === "string" && hint !== "" || typeof hint === "number";
+function storedNumber(value) {
+  return isE164(value) ? parsePhone(value, "other") : null;
+}
+function countryOf(value) {
+  const parsed = storedNumber(value);
+  return parsed ? parsed.country ?? "other" : null;
+}
+function emitFor(raw, country) {
+  return parsePhone(raw, country)?.e164 ?? raw;
+}
+function displayOf(value, country) {
+  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);
+}
+const PhoneInput = forwardRef(function PhoneInput2({
+  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(() => countryOf(value) ?? defaultCountry);
+  const [draft, setDraft] = useState(null);
+  const [emitted, setEmitted] = useState(null);
+  const [seen, setSeen] = useState(value);
+  if (seen !== value) {
+    setSeen(value);
+    if (value !== emitted) {
+      const own = countryOf(value);
+      if (own) setCountry(own);
+      setDraft(null);
+    }
+  }
+  const emit = (next) => {
+    setEmitted(next);
+    onValueChange?.(next);
+  };
+  const handleChange = (e) => {
+    onChange?.(e);
+    const raw = e.target.value;
+    setDraft(raw);
+    const parsed = parsePhone(raw, country);
+    if (parsed && parsed.country !== country) setCountry(parsed.country ?? "other");
+    emit(parsed?.e164 ?? raw);
+  };
+  const handleCountry = (next) => {
+    setCountry(next);
+    const stored = storedNumber(value);
+    if (stored) {
+      if (next === "other" || stored.country === null || stored.country === next) {
+        setDraft(null);
+        return;
+      }
+      emit(parsePhone(stored.national, next)?.e164 ?? stored.national);
+      setDraft(null);
+      return;
+    }
+    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);
+  const options = [...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 /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      role: named ? "group" : void 0,
+      "aria-label": named ? label : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              "aria-label": text.countryCode,
+              value: country,
+              disabled,
+              onChange: (e) => handleCountry(e.target.value),
+              className: "w-28 shrink-0",
+              selectClassName: "h-full tabular-nums",
+              children: [
+                options.map((code) => /* @__PURE__ */ jsx("option", { value: code, children: `${code} +${PHONE_DIAL_CODES[code]}` }, code)),
+                /* @__PURE__ */ jsx("option", { value: "other", children: text.other })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref,
+              ...rest,
+              type: "tel",
+              autoComplete: rest.autoComplete ?? "tel",
+              label,
+              hint: caption ? void 0 : hint,
+              invalid: invalid || showError,
+              "aria-describedby": mergeDescribedBy(ariaDescribedBy, caption && captionId, showError && errorId),
+              disabled,
+              value: display,
+              onChange: handleChange,
+              onBlur: (e) => {
+                setDraft(null);
+                onBlur?.(e);
+              },
+              inputClassName: cn("tabular-nums", inputClassName)
+            }
+          ) })
+        ] }),
+        caption && /* @__PURE__ */ jsx("p", { id: captionId, className: CAPTION_CLASS, children: hint }),
+        showError && /* @__PURE__ */ jsx("p", { id: errorId, className: ERROR_CLASS, children: error })
+      ]
+    }
+  );
+});
+PhoneInput.displayName = "PhoneInput";
+export {
+  DEFAULT_PHONE_INPUT_LABELS,
+  PhoneInput
+};
+//# sourceMappingURL=phone-input.js.map

package/dist/components/phone-input.js.map

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

package/dist/components/reauth-dialog.d.ts

@@ -70,8 +70,8 @@ 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

package/dist/components/reauth-dialog.js

@@ -2,10 +2,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useId, useRef, useState } from "react";
 import { useKitLabels } from "../i18n/kit-labels.js";
-import { usePromisePending } from "./danger-confirm.js";
+import { CurrentPasswordInput, usePromisePending } from "./danger-confirm.js";
 import { DialogFrame } from "./dialog-frame.js";
 import { ModalCloseContext } from "./modal.js";
-import { Button, Input, Spinner } from "./ui.js";
+import { Button, Spinner } from "./ui.js";
 const DEFAULT_REAUTH_DIALOG_LABELS = {
   title: "Confirm it\u2019s you",
   description: "Enter your current password to continue.",
@@ -99,17 +99,15 @@ function ReauthDialog({
               submit();
             },
             children: /* @__PURE__ */ jsx(
-              Input,
+              CurrentPasswordInput,
               {
                 ref: inputRef,
-                type: "password",
-                autoComplete: "current-password",
                 label: labels.password,
                 value: password,
-                readOnly: busy,
+                busy,
                 error: shownError,
-                onChange: (e) => {
-                  setPassword(e.target.value);
+                onValueChange: (next) => {
+                  setPassword(next);
                   setEdited(true);
                 }
               }