@12-apps/ui 6.100.0 → 6.101.0

package/dist/types/components/form/InputOTP/InputOTP.metrics.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The numbers both renderers read (see `NATIVE.md`, "Numbers").
+ *
+ * Each box's type size, in design px, per size step; its side is the theme's
+ * field height for that step (a square), its weight 600.
+ */
+export declare const OTP_FONT_PX: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
+/** The gap between two boxes: MUI's `gap: 1`, one 8px spacing unit. */
+export declare const OTP_GAP_PX = 8;
+/** The border: 1px at rest, 2px focused (MUI's focused outline). */
+export declare const OTP_BORDER: {
+    readonly rest: 1;
+    readonly focused: 2;
+};
+//# sourceMappingURL=InputOTP.metrics.d.ts.map

package/dist/types/components/form/InputOTP/InputOTP.metrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.metrics.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,CAMxE,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B,oEAAoE;AACpE,eAAO,MAAM,UAAU;;;CAAmC,CAAC"}

package/dist/types/components/form/InputOTP/InputOTP.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AA2DtE,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,OAAO,YAAY,KAAG,SAkC7D,CAAC"}
+{"version":3,"file":"InputOTP.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAoDtE,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,OAAO,YAAY,KAAG,SAkC7D,CAAC"}

package/dist/types/components/form/InputOTP/InputOTP.types.d.ts

@@ -1,57 +1,4 @@
-import type { ColorValue, SizeValue } from '../../../tokens/scales';
-export interface InputOTPProps {
-    /**
-     * The variant of the OTP input
-     */
-    variant?: 'numeric' | 'alphanumeric' | 'masked';
-    /**
-     * The color theme of the OTP input
-     */
-    color?: ColorValue;
-    /**
-     * The size of the OTP input
-     */
-    size?: SizeValue;
-    /**
-     * Number of OTP digits
-     */
-    length?: number;
-    /**
-     * Current value
-     */
-    value?: string;
-    /**
-     * Called when value changes
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Called when OTP is complete
-     */
-    onComplete?: (value: string) => void;
-    /**
-     * Whether the input should have glass morphism effect
-     */
-    glass?: boolean;
-    /**
-     * Whether the input should have gradient effects
-     */
-    gradient?: boolean;
-    /**
-     * Whether to auto-focus first input
-     */
-    autoFocus?: boolean;
-    /**
-     * Error state
-     */
-    error?: boolean;
-    /**
-     * Disabled state
-     */
-    disabled?: boolean;
-    /**
-     * Test ID for automated testing
-     * Container will have this ID, and individual slots will have {dataTestId}-slot-{index}
-     */
-    dataTestId?: string;
-}
+import type { InputOTPBaseProps } from './InputOTP.base';
+/** The web `InputOTP`'s props: the shared contract, nothing MUI adds. */
+export type InputOTPProps = InputOTPBaseProps;
 //# sourceMappingURL=InputOTP.types.d.ts.map

package/dist/types/components/form/InputOTP/InputOTP.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAEhD;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"InputOTP.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,yEAAyE;AACzE,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC"}

package/dist/types-native/components/form/InputOTP/InputOTP.base.d.ts

@@ -0,0 +1,63 @@
+import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
+/**
+ * THE CONTRACT BOTH RENDERERS HONOUR (see `Button.base.ts`).
+ *
+ * No MUI and no react-native here: this file ships in both declaration
+ * outputs, and a native consumer has no `@mui/material` to resolve against.
+ */
+export interface InputOTPBaseProps {
+    /**
+     * The variant of the OTP input
+     */
+    variant?: 'numeric' | 'alphanumeric' | 'masked';
+    /**
+     * The color theme of the OTP input
+     */
+    color?: ColorValue;
+    /**
+     * The size of the OTP input
+     */
+    size?: SizeValue;
+    /**
+     * Number of OTP digits
+     */
+    length?: number;
+    /**
+     * Current value
+     */
+    value?: string;
+    /**
+     * Called when value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called when OTP is complete
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Whether the input should have glass morphism effect
+     */
+    glass?: boolean;
+    /**
+     * Whether the input should have gradient effects
+     */
+    gradient?: boolean;
+    /**
+     * Whether to auto-focus first input
+     */
+    autoFocus?: boolean;
+    /**
+     * Error state
+     */
+    error?: boolean;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Test ID for automated testing
+     * Container will have this ID, and individual slots will have {dataTestId}-slot-{index}
+     */
+    dataTestId?: string;
+}
+//# sourceMappingURL=InputOTP.base.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;GAKG;AAEH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAEhD;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/types-native/components/form/InputOTP/InputOTP.core.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The digits' arithmetic, shared by both renderers' hooks (`InputOTP.hooks.ts`
+ * on the web, `InputOTP.hooks.native.ts` on React Native). Pure: no React, no
+ * DOM, no react-native.
+ */
+/**
+ * What each variant accepts. `masked` constrains nothing — it only changes what
+ * is drawn — so it has no pattern here.
+ */
+export declare const PATTERNS: Record<string, RegExp>;
+/** Whether `text` is something this variant will take. */
+export declare const isAllowed: (variant: string, text: string) => boolean;
+/** The digit array is always `length` long, blank-padded on the right. */
+export declare const padTo: (digits: string[], length: number) => string[];
+/**
+ * What a change to the numeric FIRST slot is, now that its `maxLength` is the
+ * code's length rather than 1 (FUT-4144).
+ *
+ * That slot carries `one-time-code`, and the phone's SMS fill (or a password
+ * manager) writes the WHOLE code into it as one change, not a paste — kept to
+ * one character, the code lost every digit but the last. So:
+ *
+ * - `overtype`: a keystroke into the already-filled slot (its old character
+ *   plus the new one). Ignored, exactly as `maxLength={1}` refused it before.
+ * - `code`: anything else longer than one character, written in one go.
+ *   Spread across the slots like a paste.
+ *
+ * Every other slot and variant keeps `maxLength={1}` and never gets here.
+ */
+export declare function firstSlotFill(variant: string, index: number, inputValue: string, current: string): "overtype" | "code" | null;
+/**
+ * The code inside a first-slot fill. A phone that INSERTS the SMS code at the
+ * caret rather than replacing the slot leaves the digit already there in
+ * front: `4` + `482913` arrives as `4482913`, which spread as-is would give
+ * `448291`. Longer than the code and led by that digit: the digit is dropped.
+ */
+export declare const codeOfFill: (inputValue: string, current: string, length: number) => string;
+//# sourceMappingURL=InputOTP.core.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.core.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.core.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAG3C,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,SAAS,GAAI,SAAS,MAAM,EAAE,MAAM,MAAM,YAA2C,CAAC;AAEnG,0EAA0E;AAC1E,eAAO,MAAM,KAAK,GAAI,QAAQ,MAAM,EAAE,EAAE,QAAQ,MAAM,aACH,CAAC;AAEpD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,8BAIhG;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,YAAY,MAAM,EAAE,SAAS,MAAM,EAAE,QAAQ,MAAM,KAAG,MACkC,CAAC"}

package/dist/types-native/components/form/InputOTP/InputOTP.hooks.native.d.ts

@@ -0,0 +1,28 @@
+/** What a box needs from the element behind it: to take the focus. */
+interface Focusable {
+    focus: () => void;
+}
+interface NativeOtpInput {
+    variant: string;
+    length: number;
+    value: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+}
+/**
+ * The native boxes' digits — the web hook's rules (`InputOTP.hooks.ts`) over
+ * React Native's events: `onChangeText` carries the box's whole new text and
+ * `onKeyPress` carries only the key's name, and there is no paste event at
+ * all. A pasted or SMS-filled code arrives as a change of the FIRST box, whose
+ * `maxLength` is the code's length plus one for exactly that reason, and is
+ * spread across the boxes by the same `firstSlotFill` / `codeOfFill` the web
+ * uses.
+ */
+export declare const useNativeOtpDigits: ({ variant, length, value, onChange, onComplete }: NativeOtpInput) => {
+    digits: string[];
+    boxRefs: import("react").RefObject<(Focusable | null)[]>;
+    handleChangeText: (index: number, text: string) => void;
+    handleKey: (index: number, key: string) => void;
+};
+export {};
+//# sourceMappingURL=InputOTP.hooks.native.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.hooks.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.hooks.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.hooks.native.ts"],"names":[],"mappings":"AAIA,sEAAsE;AACtE,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,kDAAkD,cAAc;;;8BA+BvF,MAAM,QAAQ,MAAM;uBAmBpB,MAAM,OAAO,MAAM;CAO9B,CAAC"}

package/dist/types-native/components/form/InputOTP/InputOTP.metrics.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The numbers both renderers read (see `NATIVE.md`, "Numbers").
+ *
+ * Each box's type size, in design px, per size step; its side is the theme's
+ * field height for that step (a square), its weight 600.
+ */
+export declare const OTP_FONT_PX: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
+/** The gap between two boxes: MUI's `gap: 1`, one 8px spacing unit. */
+export declare const OTP_GAP_PX = 8;
+/** The border: 1px at rest, 2px focused (MUI's focused outline). */
+export declare const OTP_BORDER: {
+    readonly rest: 1;
+    readonly focused: 2;
+};
+//# sourceMappingURL=InputOTP.metrics.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.metrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.metrics.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,CAMxE,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B,oEAAoE;AACpE,eAAO,MAAM,UAAU;;;CAAmC,CAAC"}

package/dist/types-native/components/form/InputOTP/InputOTP.native.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import type { InputOTPProps } from './InputOTP.types.native';
+/**
+ * The native `InputOTP`: one row of boxes, one character each, that moves
+ * forward as it is typed, steps back on Backspace in an empty box, and spreads
+ * a code the phone fills (or a paste) across every box from the first.
+ *
+ * The same props as the web one; the row is a `group` named by `aria-label`,
+ * each box is `${dataTestId}-slot-${index}`. Gaps against the web:
+ * `NATIVE-NOTES.md`.
+ */
+export declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<View>>;
+//# sourceMappingURL=InputOTP.native.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmC,IAAI,EAAuC,MAAM,cAAc,CAAC;AAI1G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AA0E7D;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,4EAsDnB,CAAC"}

package/dist/types-native/components/form/InputOTP/InputOTP.types.native.d.ts

@@ -0,0 +1,14 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { InputOTPBaseProps } from './InputOTP.base';
+/**
+ * The native `InputOTP`'s props: the shared contract, plus the group's
+ * accessible name (the web takes it as a plain `aria-label` attribute) and the
+ * row's `style`.
+ */
+export interface InputOTPProps extends InputOTPBaseProps {
+    /** Names the boxes together, as one group. */
+    'aria-label'?: string;
+    /** The row's own style; the boxes keep theirs. */
+    style?: StyleProp<ViewStyle>;
+}
+//# sourceMappingURL=InputOTP.types.native.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.types.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.types.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.types.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B"}

package/dist/types-native/components/form/InputOTP/index.native.d.ts

@@ -0,0 +1,3 @@
+export { InputOTP } from './InputOTP.native';
+export type { InputOTPProps } from './InputOTP.types.native';
+//# sourceMappingURL=index.native.d.ts.map

package/dist/types-native/components/form/InputOTP/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/index.native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,YAAY,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/user-avatar.js

@@ -1,13 +1,13 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-LFECE4R7.js";
+} from "./chunk-4EDCF7TC.js";
 import "./chunk-DQ22UKMZ.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-W56KN53D.js";
-import "./chunk-3ZVUNSFF.js";
+import "./chunk-L6IDPTNX.js";
 import "./chunk-EOQ6EKTS.js";
 import "./chunk-6ZZGK5DT.js";
+import "./chunk-3ZVUNSFF.js";
 import "./chunk-MTEQEPNY.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.100.0",
+  "version": "6.101.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -433,6 +433,10 @@
       "default": "./dist/form/Input/outlined.js"
     },
     "./form/InputOTP": {
+      "react-native": {
+        "types": "./dist/types-native/components/form/InputOTP/index.native.d.ts",
+        "default": "./dist/native/form/InputOTP.js"
+      },
       "types": "./dist/types/components/form/InputOTP/index.d.ts",
       "default": "./dist/form/InputOTP.js"
     },

package/src/components/form/InputOTP/InputOTP.base.ts

@@ -0,0 +1,76 @@
+import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
+
+/**
+ * THE CONTRACT BOTH RENDERERS HONOUR (see `Button.base.ts`).
+ *
+ * No MUI and no react-native here: this file ships in both declaration
+ * outputs, and a native consumer has no `@mui/material` to resolve against.
+ */
+
+export interface InputOTPBaseProps {
+  /**
+   * The variant of the OTP input
+   */
+  variant?: 'numeric' | 'alphanumeric' | 'masked';
+  
+  /**
+   * The color theme of the OTP input
+   */
+  color?: ColorValue;
+  
+  /**
+   * The size of the OTP input
+   */
+  size?: SizeValue;
+  
+  /**
+   * Number of OTP digits
+   */
+  length?: number;
+  
+  /**
+   * Current value
+   */
+  value?: string;
+  
+  /**
+   * Called when value changes
+   */
+  onChange?: (value: string) => void;
+  
+  /**
+   * Called when OTP is complete
+   */
+  onComplete?: (value: string) => void;
+  
+  /**
+   * Whether the input should have glass morphism effect
+   */
+  glass?: boolean;
+  
+  /**
+   * Whether the input should have gradient effects
+   */
+  gradient?: boolean;
+  
+  /**
+   * Whether to auto-focus first input
+   */
+  autoFocus?: boolean;
+  
+  /**
+   * Error state
+   */
+  error?: boolean;
+  
+  /**
+   * Disabled state
+   */
+  disabled?: boolean;
+
+  /**
+   * Test ID for automated testing
+   * Container will have this ID, and individual slots will have {dataTestId}-slot-{index}
+   */
+  dataTestId?: string;
+}

package/src/components/form/InputOTP/InputOTP.core.ts

@@ -0,0 +1,51 @@
+/**
+ * The digits' arithmetic, shared by both renderers' hooks (`InputOTP.hooks.ts`
+ * on the web, `InputOTP.hooks.native.ts` on React Native). Pure: no React, no
+ * DOM, no react-native.
+ */
+
+/**
+ * What each variant accepts. `masked` constrains nothing — it only changes what
+ * is drawn — so it has no pattern here.
+ */
+export const PATTERNS: Record<string, RegExp> = {
+  numeric: /^\d*$/,
+  alphanumeric: /^[a-zA-Z0-9]*$/,
+};
+
+/** Whether `text` is something this variant will take. */
+export const isAllowed = (variant: string, text: string) => (PATTERNS[variant] ?? /.*/).test(text);
+
+/** The digit array is always `length` long, blank-padded on the right. */
+export const padTo = (digits: string[], length: number) =>
+  Array.from({ length }, (_, i) => digits[i] ?? '');
+
+/**
+ * What a change to the numeric FIRST slot is, now that its `maxLength` is the
+ * code's length rather than 1 (FUT-4144).
+ *
+ * That slot carries `one-time-code`, and the phone's SMS fill (or a password
+ * manager) writes the WHOLE code into it as one change, not a paste — kept to
+ * one character, the code lost every digit but the last. So:
+ *
+ * - `overtype`: a keystroke into the already-filled slot (its old character
+ *   plus the new one). Ignored, exactly as `maxLength={1}` refused it before.
+ * - `code`: anything else longer than one character, written in one go.
+ *   Spread across the slots like a paste.
+ *
+ * Every other slot and variant keeps `maxLength={1}` and never gets here.
+ */
+export function firstSlotFill(variant: string, index: number, inputValue: string, current: string) {
+  if (variant !== 'numeric' || index !== 0 || inputValue.length < 2) return null;
+  const overtype = inputValue.length === 2 && current !== '' && inputValue.includes(current);
+  return overtype ? 'overtype' : 'code';
+}
+
+/**
+ * The code inside a first-slot fill. A phone that INSERTS the SMS code at the
+ * caret rather than replacing the slot leaves the digit already there in
+ * front: `4` + `482913` arrives as `4482913`, which spread as-is would give
+ * `448291`. Longer than the code and led by that digit: the digit is dropped.
+ */
+export const codeOfFill = (inputValue: string, current: string, length: number): string =>
+  inputValue.length > length && current !== '' && inputValue.startsWith(current) ? inputValue.slice(1) : inputValue;

package/src/components/form/InputOTP/InputOTP.hooks.native.ts

@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { codeOfFill, firstSlotFill, isAllowed, padTo } from './InputOTP.core';
+
+/** What a box needs from the element behind it: to take the focus. */
+interface Focusable {
+  focus: () => void;
+}
+
+interface NativeOtpInput {
+  variant: string;
+  length: number;
+  value: string;
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+}
+
+/**
+ * The native boxes' digits — the web hook's rules (`InputOTP.hooks.ts`) over
+ * React Native's events: `onChangeText` carries the box's whole new text and
+ * `onKeyPress` carries only the key's name, and there is no paste event at
+ * all. A pasted or SMS-filled code arrives as a change of the FIRST box, whose
+ * `maxLength` is the code's length plus one for exactly that reason, and is
+ * spread across the boxes by the same `firstSlotFill` / `codeOfFill` the web
+ * uses.
+ */
+export const useNativeOtpDigits = ({ variant, length, value, onChange, onComplete }: NativeOtpInput) => {
+  const [digits, setDigits] = useState<string[]>(() => padTo([], length));
+  const boxRefs = useRef<(Focusable | null)[]>([]);
+
+  useEffect(() => {
+    setDigits(padTo(value.split('').slice(0, length), length));
+  }, [value, length]);
+
+  const focusBox = useCallback((index: number) => boxRefs.current[index]?.focus(), []);
+
+  const publish = useCallback(
+    (next: string) => {
+      onChange?.(next);
+      if (next.length === length) onComplete?.(next);
+    },
+    [length, onChange, onComplete],
+  );
+
+  /** A whole code laid across the boxes from the first one. */
+  const spread = useCallback(
+    (text: string) => {
+      const code = text.slice(0, length);
+      if (!code || !isAllowed(variant, code)) return;
+      setDigits(padTo(code.split(''), length));
+      publish(code);
+      focusBox(Math.min(code.length, length - 1));
+    },
+    [variant, length, publish, focusBox],
+  );
+
+  const handleChangeText = useCallback(
+    (index: number, text: string) => {
+      // The web's paste spreads a code for EVERY variant; React Native has no
+      // paste event, so a code arrives as a change of the first box, read by
+      // the numeric rule for `alphanumeric` too (`masked` shows a bullet, whose
+      // text no longer holds the digit it hides: it keeps one character a box).
+      const fill = firstSlotFill(variant === 'alphanumeric' ? 'numeric' : variant, index, text, digits[0] ?? '');
+      if (fill) return fill === 'code' ? spread(codeOfFill(text, digits[0] ?? '', length)) : undefined;
+      if (!isAllowed(variant, text)) return;
+      const next = [...digits];
+      next[index] = text.slice(-1);
+      setDigits(next);
+      publish(next.join(''));
+      if (text && index < length - 1) focusBox(index + 1);
+    },
+    [variant, digits, length, publish, focusBox, spread],
+  );
+
+  /** Backspace in a box that is already empty steps back to the one before. */
+  const handleKey = useCallback(
+    (index: number, key: string) => {
+      if (key === 'Backspace' && !digits[index] && index > 0) focusBox(index - 1);
+    },
+    [digits, focusBox],
+  );
+
+  return { digits, boxRefs, handleChangeText, handleKey };
+};

package/src/components/form/InputOTP/InputOTP.hooks.ts

@@ -1,51 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-
-/**
- * What each variant accepts. `masked` constrains nothing — it only changes what
- * is drawn — so it has no pattern here.
- */
-const PATTERNS: Record<string, RegExp> = {
-  numeric: /^\d*$/,
-  alphanumeric: /^[a-zA-Z0-9]*$/,
-};
-
-/** Whether `text` is something this variant will take. */
-const isAllowed = (variant: string, text: string) => (PATTERNS[variant] ?? /.*/).test(text);
-
-/** The digit array is always `length` long, blank-padded on the right. */
-const padTo = (digits: string[], length: number) =>
-  Array.from({ length }, (_, i) => digits[i] ?? '');
-
-/**
- * What a change to the numeric FIRST slot is, now that its `maxLength` is the
- * code's length rather than 1 (FUT-4144).
- *
- * That slot carries `one-time-code`, and the phone's SMS fill (or a password
- * manager) writes the WHOLE code into it as one change, not a paste — kept to
- * one character, the code lost every digit but the last. So:
- *
- * - `overtype`: a keystroke into the already-filled slot (its old character
- *   plus the new one). Ignored, exactly as `maxLength={1}` refused it before.
- * - `code`: anything else longer than one character, written in one go.
- *   Spread across the slots like a paste.
- *
- * Every other slot and variant keeps `maxLength={1}` and never gets here.
- */
-function firstSlotFill(variant: string, index: number, inputValue: string, current: string) {
-  if (variant !== 'numeric' || index !== 0 || inputValue.length < 2) return null;
-  const overtype = inputValue.length === 2 && current !== '' && inputValue.includes(current);
-  return overtype ? 'overtype' : 'code';
-}
-
-/**
- * The code inside a first-slot fill. A phone that INSERTS the SMS code at the
- * caret rather than replacing the slot leaves the digit already there in
- * front: `4` + `482913` arrives as `4482913`, which spread as-is would give
- * `448291`. Longer than the code and led by that digit: the digit is dropped.
- */
-const codeOfFill = (inputValue: string, current: string, length: number): string =>
-  inputValue.length > length && current !== '' && inputValue.startsWith(current) ? inputValue.slice(1) : inputValue;
+import { codeOfFill, firstSlotFill, isAllowed, padTo } from './InputOTP.core';
 
 interface OtpInput {
   variant: string;

package/src/components/form/InputOTP/InputOTP.metrics.ts

@@ -0,0 +1,19 @@
+/**
+ * The numbers both renderers read (see `NATIVE.md`, "Numbers").
+ *
+ * Each box's type size, in design px, per size step; its side is the theme's
+ * field height for that step (a square), its weight 600.
+ */
+export const OTP_FONT_PX: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number> = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+};
+
+/** The gap between two boxes: MUI's `gap: 1`, one 8px spacing unit. */
+export const OTP_GAP_PX = 8;
+
+/** The border: 1px at rest, 2px focused (MUI's focused outline). */
+export const OTP_BORDER = { rest: 1, focused: 2 } as const;