@verma-consulting/design-library 0.1.62 → 0.1.64

package/dist/index.d.mts

@@ -231,7 +231,11 @@ type OTPFieldProps = {
     initialValue?: string;
     onChange: (value: string, index?: number) => void;
     onComplete?: (value: string, index?: number) => void;
-    /** Use password inputs (no brief reveal; React 19–safe replacement for `react-pin-input` `secret`). */
+    /**
+     * Use `type="password"` on each cell when `type` is not `"numeric"`.
+     * Ignored when `type="numeric"`: masking forces a full keyboard on mobile and
+     * breaks OTP / confirmation-code entry; prefer `type="numeric"` without `secret`.
+     */
     secret?: boolean;
     autoSelect?: boolean;
     disabled?: boolean;
@@ -239,9 +243,18 @@ type OTPFieldProps = {
     inputFocusStyle?: CSSProperties;
     /** Applied to the outer `Box` (MUI `sx`). */
     sx?: SxProps<Theme>;
+    /**
+     * `"numeric"` — OTP / PIN mode: `type="tel"`, default `inputMode="numeric"`,
+     * digits-only when `regexCriteria` is omitted. `secret` is not applied.
+     * Other values — plain text cells; `secret` uses `type="password"`.
+     */
     type?: string;
+    /**
+     * Hint for the on-screen keyboard. Defaults to `"numeric"` when `type="numeric"`,
+     * otherwise `"text"`. Avoid `"number"` for OTP (decimal pad on some devices).
+     */
     inputMode?: React__default.HTMLAttributes<HTMLInputElement>["inputMode"];
-    /** Optional per-character filter (same idea as `react-pin-input` `regexCriteria`). */
+    /** Per-character filter; defaults to `/^[0-9]$/` when `type="numeric"` and omitted. */
     regexCriteria?: RegExp;
 };
 declare const OTPField: React__default.FC<OTPFieldProps>;

package/dist/index.d.ts

@@ -231,7 +231,11 @@ type OTPFieldProps = {
     initialValue?: string;
     onChange: (value: string, index?: number) => void;
     onComplete?: (value: string, index?: number) => void;
-    /** Use password inputs (no brief reveal; React 19–safe replacement for `react-pin-input` `secret`). */
+    /**
+     * Use `type="password"` on each cell when `type` is not `"numeric"`.
+     * Ignored when `type="numeric"`: masking forces a full keyboard on mobile and
+     * breaks OTP / confirmation-code entry; prefer `type="numeric"` without `secret`.
+     */
     secret?: boolean;
     autoSelect?: boolean;
     disabled?: boolean;
@@ -239,9 +243,18 @@ type OTPFieldProps = {
     inputFocusStyle?: CSSProperties;
     /** Applied to the outer `Box` (MUI `sx`). */
     sx?: SxProps<Theme>;
+    /**
+     * `"numeric"` — OTP / PIN mode: `type="tel"`, default `inputMode="numeric"`,
+     * digits-only when `regexCriteria` is omitted. `secret` is not applied.
+     * Other values — plain text cells; `secret` uses `type="password"`.
+     */
     type?: string;
+    /**
+     * Hint for the on-screen keyboard. Defaults to `"numeric"` when `type="numeric"`,
+     * otherwise `"text"`. Avoid `"number"` for OTP (decimal pad on some devices).
+     */
     inputMode?: React__default.HTMLAttributes<HTMLInputElement>["inputMode"];
-    /** Optional per-character filter (same idea as `react-pin-input` `regexCriteria`). */
+    /** Per-character filter; defaults to `/^[0-9]$/` when `type="numeric"` and omitted. */
     regexCriteria?: RegExp;
 };
 declare const OTPField: React__default.FC<OTPFieldProps>;

package/dist/index.js

@@ -2452,9 +2452,12 @@ var OTPField = ({
   inputFocusStyle,
   sx,
   type = "text",
-  inputMode = "text",
+  inputMode,
   regexCriteria
 }) => {
+  const isNumeric = type === "numeric";
+  const resolvedInputMode = inputMode != null ? inputMode : isNumeric ? "numeric" : "text";
+  const resolvedRegexCriteria = regexCriteria != null ? regexCriteria : isNumeric ? /^[0-9]$/ : void 0;
   const [cells, setCells] = (0, import_react11.useState)(() => toCells(initialValue, length));
   const cellsRef = (0, import_react11.useRef)(cells);
   cellsRef.current = cells;
@@ -2484,16 +2487,17 @@ var OTPField = ({
   const charAllowed = (0, import_react11.useCallback)(
     (ch) => {
       if (!ch) return true;
-      if (type === "numeric" && /\D/.test(ch)) return false;
-      if (regexCriteria && !regexCriteria.test(ch)) return false;
+      if (isNumeric && /\D/.test(ch)) return false;
+      if (resolvedRegexCriteria && !resolvedRegexCriteria.test(ch))
+        return false;
       return true;
     },
-    [regexCriteria, type]
+    [isNumeric, resolvedRegexCriteria]
   );
   const applyMany = (0, import_react11.useCallback)(
     (startIdx, raw) => {
       var _a2;
-      const incoming = (type === "numeric" ? raw.replace(/\D/g, "") : raw).split("");
+      const incoming = (isNumeric ? raw.replace(/\D/g, "") : raw).split("");
       const next = [...cellsRef.current];
       let i = startIdx;
       for (const ch of incoming) {
@@ -2506,7 +2510,7 @@ var OTPField = ({
       emit(next, focusAt);
       (_a2 = refs.current[focusAt]) == null ? void 0 : _a2.focus();
     },
-    [charAllowed, emit, length, type]
+    [charAllowed, emit, isNumeric, length]
   );
   const onFieldChange = (idx, e) => {
     var _a2;
@@ -2550,7 +2554,7 @@ var OTPField = ({
     if (!text) return;
     applyMany(0, text);
   };
-  const inputType = secret ? "password" : type === "numeric" ? "tel" : "text";
+  const inputType = secret && !isNumeric ? "password" : isNumeric ? "tel" : "text";
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_material17.Box,
     {
@@ -2590,7 +2594,7 @@ var OTPField = ({
           },
           inputProps: {
             maxLength: 1,
-            inputMode: inputMode != null ? inputMode : void 0,
+            inputMode: resolvedInputMode,
             "aria-label": `Code character ${idx + 1} of ${length}`,
             autoComplete: "one-time-code"
           }