@12-apps/ui 6.100.0 → 6.102.0

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

@@ -0,0 +1,77 @@
+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;
+    /**
+     * How the boxes take the row's width (FUT-4585).
+     *
+     * Left out, each box is a square of the size's field height, and the row is
+     * as wide as its boxes — what every caller drew before this option.
+     *
+     * `'width'`: the row takes its parent's whole width and the boxes share it
+     * with a 6px gap. Each keeps the size's field height (never under 40) and
+     * its type, and narrows to fit: never wider than it is tall, never under
+     * 32. On a narrow phone that draws PORTRAIT boxes instead of a smaller size.
+     * The boxes share the row's outer width, so pad the parent, not the row: a
+     * `style` (or `sx`) setting the row's padding or gap is not accounted for.
+     */
+    fit?: 'width';
+    /**
+     * 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/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;;;;;;;;;;;;OAYG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IAEd;;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/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): "code" | "overtype" | 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/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/components/form/InputOTP/InputOTP.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-import type { InputOTPProps } from './InputOTP.types';
-export declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLDivElement>>;
+export declare const InputOTP: React.ForwardRefExoticComponent<import("./InputOTP.base").InputOTPBaseProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=InputOTP.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAyDtD,eAAO,MAAM,QAAQ,sFAsDnB,CAAC"}
+{"version":3,"file":"InputOTP.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AA6E1C,eAAO,MAAM,QAAQ,oHAuDnB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.hooks.ts"],"names":[],"mappings":"AAiDA,UAAU,QAAQ;IAChB,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;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,kDAAkD,QAAQ;;;+BAqC3E,MAAM,cAAc,MAAM;2BAkB1B,MAAM,KAAK,KAAK,CAAC,aAAa;qBAelC,KAAK,CAAC,cAAc;CAQ3B,CAAC"}
+{"version":3,"file":"InputOTP.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.hooks.ts"],"names":[],"mappings":"AAIA,UAAU,QAAQ;IAChB,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;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,kDAAkD,QAAQ;;;+BAqC3E,MAAM,cAAc,MAAM;2BAkB1B,MAAM,KAAK,KAAK,CAAC,aAAa;qBAelC,KAAK,CAAC,cAAc;CAQ3B,CAAC"}

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

@@ -0,0 +1,40 @@
+/**
+ * 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;
+};
+/**
+ * `fit="width"` (FUT-4585): the gap between two boxes when they share the row's
+ * width — the approved prototype's 6px, a little tighter than the default 8px
+ * so six portrait boxes stay at least 40 wide on a 320 phone.
+ */
+export declare const OTP_FIT_GAP_PX = 6;
+/** `fit="width"`: no box is narrower than this, however narrow the row. */
+export declare const OTP_FIT_MIN_WIDTH_PX = 32;
+/** `fit="width"`: no box is shorter than the 40px touch floor, whatever its size. */
+export declare const OTP_FIT_MIN_HEIGHT_PX = 40;
+/**
+ * One box's size under `fit="width"`, for a row `rowWidth` wide holding
+ * `length` boxes whose size step draws a field `side` tall.
+ *
+ * The box keeps the field's height (never under {@link OTP_FIT_MIN_HEIGHT_PX})
+ * and takes an equal share of the row, less the gaps, for its width: floored
+ * to a whole pixel so six of them never overflow the row, never wider than it
+ * is tall (a wide row keeps squares) and never under
+ * {@link OTP_FIT_MIN_WIDTH_PX}. A narrow row therefore draws PORTRAIT boxes
+ * rather than dropping to a smaller size and its smaller type.
+ */
+export declare function otpFitBox(rowWidth: number, side: number, length: number): {
+    width: number;
+    height: number;
+};
+//# 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;AAE3D;;;;GAIG;AACH,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,2EAA2E;AAC3E,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAM3G"}

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

@@ -4,6 +4,8 @@ export interface OtpSlotFlags {
     customSize?: string;
     glass?: boolean;
     gradient?: boolean;
+    /** `fit="width"`: share the row's width instead of drawing a square (FUT-4585). */
+    fitWidth?: boolean;
 }
 export declare const otpSlotSx: (theme: Theme, flags: OtpSlotFlags) => CSSObject;
 //# sourceMappingURL=InputOTP.styles.d.ts.map

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;IACnB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0BD,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,77 @@
+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;
+    /**
+     * How the boxes take the row's width (FUT-4585).
+     *
+     * Left out, each box is a square of the size's field height, and the row is
+     * as wide as its boxes — what every caller drew before this option.
+     *
+     * `'width'`: the row takes its parent's whole width and the boxes share it
+     * with a 6px gap. Each keeps the size's field height (never under 40) and
+     * its type, and narrows to fit: never wider than it is tall, never under
+     * 32. On a narrow phone that draws PORTRAIT boxes instead of a smaller size.
+     * The boxes share the row's outer width, so pad the parent, not the row: a
+     * `style` (or `sx`) setting the row's padding or gap is not accounted for.
+     */
+    fit?: 'width';
+    /**
+     * 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;;;;;;;;;;;;OAYG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IAEd;;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,40 @@
+/**
+ * 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;
+};
+/**
+ * `fit="width"` (FUT-4585): the gap between two boxes when they share the row's
+ * width — the approved prototype's 6px, a little tighter than the default 8px
+ * so six portrait boxes stay at least 40 wide on a 320 phone.
+ */
+export declare const OTP_FIT_GAP_PX = 6;
+/** `fit="width"`: no box is narrower than this, however narrow the row. */
+export declare const OTP_FIT_MIN_WIDTH_PX = 32;
+/** `fit="width"`: no box is shorter than the 40px touch floor, whatever its size. */
+export declare const OTP_FIT_MIN_HEIGHT_PX = 40;
+/**
+ * One box's size under `fit="width"`, for a row `rowWidth` wide holding
+ * `length` boxes whose size step draws a field `side` tall.
+ *
+ * The box keeps the field's height (never under {@link OTP_FIT_MIN_HEIGHT_PX})
+ * and takes an equal share of the row, less the gaps, for its width: floored
+ * to a whole pixel so six of them never overflow the row, never wider than it
+ * is tall (a wide row keeps squares) and never under
+ * {@link OTP_FIT_MIN_WIDTH_PX}. A narrow row therefore draws PORTRAIT boxes
+ * rather than dropping to a smaller size and its smaller type.
+ */
+export declare function otpFitBox(rowWidth: number, side: number, length: number): {
+    width: number;
+    height: number;
+};
+//# 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;AAE3D;;;;GAIG;AACH,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,2EAA2E;AAC3E,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAM3G"}

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,EAIL,IAAI,EAKL,MAAM,cAAc,CAAC;AAYtB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAuG7D;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,4EA+DnB,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.102.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"
     },