@verma-consulting/design-library 0.1.47 → 0.1.48

package/README.md

@@ -2,6 +2,10 @@
 
 Shared MUI-based React components for Verma Consulting applications. Use this package for consistent UI patterns, forms, and design tokens across projects.
 
+## Requirements
+
+- **Node.js** `>=24.4.1` (see `engines` in `package.json`). For local development, use **24.4.1** via `.nvmrc`, `.node-version`, `.mise.toml`, or Volta (`volta` field in `package.json`).
+
 ## Installation
 
 ```bash
@@ -60,6 +64,7 @@ The library re-exports **all of `@mui/material`**, so you can use MUI components
 | [FormSnackBar](./docs/FormSnackBar.md)           | Snackbar for form success/error messages.               |
 | [SearchableSelect](./docs/SearchableSelect.md)   | Searchable single/multi select with view/edit modes.    |
 | [PhoneNumberField](./docs/PhoneNumberField.md)   | Phone input with country code and E.164 output.         |
+| [OTPField](./docs/OTPField.md)                   | One-time code input (single-character cells, paste, mask). |
 | [InputFileUpload](./docs/InputFileUpload.md)     | Button that opens a file picker.                        |
 | [ImageUploadAvatar](./docs/ImageUploadAvatar.md) | Avatar-style image upload with preview and clear.       |
 | [TabPanel](./docs/TabPanel.md)                   | Panel content for MUI Tabs (by index).                  |

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import { DialogProps, DrawerProps } from '@mui/material';
 export * from '@mui/material';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { FC, KeyboardEvent } from 'react';
+import React__default, { FC, KeyboardEvent, CSSProperties } from 'react';
 import MuiTablePagination, { LabelDisplayedRowsArgs } from '@mui/material/TablePagination';
 import { SxProps, Theme } from '@mui/material/styles';
 export { ThemeProvider, createTheme, styled, useTheme } from '@mui/material/styles';
@@ -210,4 +210,24 @@ interface CountrySelectProps {
 }
 declare const CountrySelect: React__default.FC<CountrySelectProps>;
 
-export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };
+type OTPFieldProps = {
+    length: number;
+    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`). */
+    secret?: boolean;
+    autoSelect?: boolean;
+    disabled?: boolean;
+    /** Applied to the focused cell’s outline (`fieldset`). */
+    inputFocusStyle?: CSSProperties;
+    /** Applied to the outer `Box` (MUI `sx`). */
+    sx?: SxProps<Theme>;
+    type?: string;
+    inputMode?: React__default.HTMLAttributes<HTMLInputElement>["inputMode"];
+    /** Optional per-character filter (same idea as `react-pin-input` `regexCriteria`). */
+    regexCriteria?: RegExp;
+};
+declare const OTPField: React__default.FC<OTPFieldProps>;
+
+export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, OTPField, type OTPFieldProps, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { DialogProps, DrawerProps } from '@mui/material';
 export * from '@mui/material';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { FC, KeyboardEvent } from 'react';
+import React__default, { FC, KeyboardEvent, CSSProperties } from 'react';
 import MuiTablePagination, { LabelDisplayedRowsArgs } from '@mui/material/TablePagination';
 import { SxProps, Theme } from '@mui/material/styles';
 export { ThemeProvider, createTheme, styled, useTheme } from '@mui/material/styles';
@@ -210,4 +210,24 @@ interface CountrySelectProps {
 }
 declare const CountrySelect: React__default.FC<CountrySelectProps>;
 
-export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };
+type OTPFieldProps = {
+    length: number;
+    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`). */
+    secret?: boolean;
+    autoSelect?: boolean;
+    disabled?: boolean;
+    /** Applied to the focused cell’s outline (`fieldset`). */
+    inputFocusStyle?: CSSProperties;
+    /** Applied to the outer `Box` (MUI `sx`). */
+    sx?: SxProps<Theme>;
+    type?: string;
+    inputMode?: React__default.HTMLAttributes<HTMLInputElement>["inputMode"];
+    /** Optional per-character filter (same idea as `react-pin-input` `regexCriteria`). */
+    regexCriteria?: RegExp;
+};
+declare const OTPField: React__default.FC<OTPFieldProps>;
+
+export { CountrySelect, type CountryType, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, OTPField, type OTPFieldProps, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel, TablePagination, type TablePaginationDesignProps };

package/dist/index.js

@@ -42,6 +42,7 @@ __export(index_exports, {
   InputFileUpload: () => InputFileUpload_default,
   Loader: () => Loader_default,
   Logo: () => Logo_default,
+  OTPField: () => OTPField_default,
   PhoneNumberField: () => PhoneNumberField_default,
   Pill: () => Pill_default,
   SearchableSelect: () => SearchableSelect_default,
@@ -2274,6 +2275,178 @@ var CountrySelect = ({
   );
 };
 var CountrySelect_default = CountrySelect;
+
+// src/OTPField.tsx
+var import_react11 = require("react");
+var import_material17 = require("@mui/material");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function toCells(s, len) {
+  const slice = (s || "").slice(0, len);
+  return Array.from({ length: len }, (_, i) => {
+    var _a2;
+    return (_a2 = slice[i]) != null ? _a2 : "";
+  });
+}
+var OTPField = ({
+  length,
+  initialValue = "",
+  onChange,
+  onComplete,
+  secret = false,
+  autoSelect = false,
+  disabled = false,
+  inputFocusStyle,
+  sx,
+  type = "text",
+  inputMode = "text",
+  regexCriteria
+}) => {
+  const [cells, setCells] = (0, import_react11.useState)(() => toCells(initialValue, length));
+  const cellsRef = (0, import_react11.useRef)(cells);
+  cellsRef.current = cells;
+  const refs = (0, import_react11.useRef)([]);
+  (0, import_react11.useEffect)(() => {
+    setCells(toCells(initialValue, length));
+  }, [initialValue, length]);
+  const emit = (0, import_react11.useCallback)(
+    (next, editedIndex) => {
+      setCells(next);
+      const joined = next.join("");
+      onChange(joined, editedIndex);
+      if (onComplete && joined.length === length && next.every(Boolean)) {
+        onComplete(joined, length - 1);
+      }
+    },
+    [length, onChange, onComplete]
+  );
+  (0, import_react11.useEffect)(() => {
+    if (!autoSelect) return;
+    const id = requestAnimationFrame(() => {
+      var _a2;
+      return (_a2 = refs.current[0]) == null ? void 0 : _a2.focus();
+    });
+    return () => cancelAnimationFrame(id);
+  }, [autoSelect, length]);
+  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;
+      return true;
+    },
+    [regexCriteria, type]
+  );
+  const applyMany = (0, import_react11.useCallback)(
+    (startIdx, raw) => {
+      var _a2;
+      const incoming = (type === "numeric" ? raw.replace(/\D/g, "") : raw).split("");
+      const next = [...cellsRef.current];
+      let i = startIdx;
+      for (const ch of incoming) {
+        if (i >= length) break;
+        if (!charAllowed(ch)) return;
+        next[i] = ch;
+        i += 1;
+      }
+      const focusAt = Math.min(Math.max(i - 1, 0), length - 1);
+      emit(next, focusAt);
+      (_a2 = refs.current[focusAt]) == null ? void 0 : _a2.focus();
+    },
+    [charAllowed, emit, length, type]
+  );
+  const onFieldChange = (idx, e) => {
+    var _a2;
+    const raw = e.target.value;
+    if (raw.length > 1) {
+      applyMany(idx, raw);
+      return;
+    }
+    if (raw && !charAllowed(raw)) return;
+    const next = [...cellsRef.current];
+    next[idx] = raw;
+    emit(next, idx);
+    if (raw && idx < length - 1) {
+      (_a2 = refs.current[idx + 1]) == null ? void 0 : _a2.focus();
+    }
+  };
+  const onKeyDown = (idx, e) => {
+    var _a2, _b, _c;
+    if (e.key === "Backspace") {
+      const next = [...cellsRef.current];
+      if (next[idx]) {
+        next[idx] = "";
+        emit(next, idx);
+      } else if (idx > 0) {
+        next[idx - 1] = "";
+        emit(next, idx - 1);
+        (_a2 = refs.current[idx - 1]) == null ? void 0 : _a2.focus();
+      }
+      e.preventDefault();
+    } else if (e.key === "ArrowLeft" && idx > 0) {
+      (_b = refs.current[idx - 1]) == null ? void 0 : _b.focus();
+      e.preventDefault();
+    } else if (e.key === "ArrowRight" && idx < length - 1) {
+      (_c = refs.current[idx + 1]) == null ? void 0 : _c.focus();
+      e.preventDefault();
+    }
+  };
+  const onPasteFirst = (e) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text").replace(/\s/g, "");
+    if (!text) return;
+    applyMany(0, text);
+  };
+  const inputType = secret ? "password" : type === "numeric" ? "tel" : "text";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_material17.Box,
+    {
+      sx: [
+        {
+          display: "flex",
+          gap: 1,
+          flexWrap: "nowrap",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        ...sx == null ? [] : Array.isArray(sx) ? sx : [sx]
+      ],
+      children: Array.from({ length }).map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_material17.TextField,
+        {
+          inputRef: (el) => {
+            refs.current[idx] = el;
+          },
+          value: cells[idx],
+          onChange: (e) => onFieldChange(idx, e),
+          onKeyDown: (e) => onKeyDown(idx, e),
+          onPaste: idx === 0 ? onPasteFirst : void 0,
+          disabled,
+          size: "small",
+          type: inputType,
+          sx: {
+            width: 44,
+            "& .MuiOutlinedInput-input": {
+              textAlign: "center",
+              py: 1,
+              px: 0.5
+            },
+            ...inputFocusStyle ? {
+              "& .MuiOutlinedInput-root.Mui-focused fieldset": inputFocusStyle
+            } : {}
+          },
+          inputProps: {
+            maxLength: 1,
+            inputMode: inputMode != null ? inputMode : void 0,
+            "aria-label": `Code character ${idx + 1} of ${length}`,
+            autoComplete: "one-time-code"
+          }
+        },
+        idx
+      ))
+    }
+  );
+};
+var OTPField_default = OTPField;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CountrySelect,
@@ -2287,6 +2460,7 @@ var CountrySelect_default = CountrySelect;
   InputFileUpload,
   Loader,
   Logo,
+  OTPField,
   PhoneNumberField,
   Pill,
   SearchableSelect,