@12-apps/ui 6.100.0 → 6.102.0

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

@@ -0,0 +1,91 @@
+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;
+}

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.md

@@ -27,6 +27,7 @@ The InputOTP component provides a specialized input field for one-time passwords
 | `onComplete` | `(value: string) => void` | - | Callback when all digits are filled |
 | `color` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'neutral'` | `'primary'` | Theme color |
 | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Input size |
+| `fit` | `'width'` | - | Share the row's width: each box keeps the size's height (never under 40) and type, and narrows to fit, never wider than tall nor under 32. Left out, each box is a square of the size's field height |
 | `autoFocus` | `boolean` | `false` | Auto-focus first input on mount |
 | `disabled` | `boolean` | `false` | Disable all inputs |
 | `error` | `boolean` | `false` | Show error state |
@@ -191,6 +192,40 @@ The component supports various visual customizations:
 - `lg`: Large (prominent forms)
 - `xl`: Extra large (accessibility focus)
 
+### Fitting a narrow row: `fit="width"`
+
+A square box is as wide as its field is tall, so six `lg` boxes need 328px. On
+a narrow phone the only way to fit them used to be a smaller size, whose boxes
+drop under the 40px tap minimum and whose type shrinks with them. `fit="width"`
+keeps the size and narrows the boxes instead (FUT-4585):
+
+- the row takes its parent's whole width, with a 6px gap between boxes;
+- each box keeps the size's field height, lifted to 40 if it is shorter, and
+  the size's own type;
+- each box's width is the row less the gaps, divided by `length`, floored to a
+  whole pixel, never wider than the box is tall (a wide row keeps squares) and
+  never under 32.
+
+At `size="lg"` (48 tall), a sheet with 24px of padding on each side draws:
+
+| phone | row | box |
+|---|---|---|
+| 320 | 272 | 40 × 48 |
+| 360 | 312 | 47 × 48 |
+| 390 | 342 | 48 × 48 |
+
+```tsx
+<InputOTP fit="width" size="lg" length={6} value={code} onChange={setCode} />
+```
+
+The boxes share the row's **outer** width, and the row spans its parent in a
+column or a row parent alike. Pad the parent, not the row: a `style` (or `sx`)
+that sets the row's own padding or gap is not taken off the share.
+
+The arithmetic is `otpFitBox` in `InputOTP.metrics.ts`, shared by both
+renderers: React Native measures the row with `onLayout`, the web lets CSS flex
+share it under the same bounds.
+
 ### Color Themes
 - `primary`: Main brand color
 - `secondary`: Alternative brand color

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

@@ -0,0 +1,51 @@
+/**
+ * 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;
+
+/**
+ * `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 const OTP_FIT_GAP_PX = 6;
+
+/** `fit="width"`: no box is narrower than this, however narrow the row. */
+export const OTP_FIT_MIN_WIDTH_PX = 32;
+
+/** `fit="width"`: no box is shorter than the 40px touch floor, whatever its size. */
+export 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 function otpFitBox(rowWidth: number, side: number, length: number): { width: number; height: number } {
+  const height = Math.max(side, OTP_FIT_MIN_HEIGHT_PX);
+  const count = Math.max(1, Math.floor(length));
+  const share = Math.floor((rowWidth - (count - 1) * OTP_FIT_GAP_PX) / count);
+  const width = Math.min(height, Math.max(OTP_FIT_MIN_WIDTH_PX, Number.isFinite(share) ? share : height));
+  return { width, height };
+}

package/src/components/form/InputOTP/InputOTP.native.tsx

@@ -0,0 +1,217 @@
+import * as React from 'react';
+import {
+  Platform,
+  StyleSheet,
+  TextInput,
+  View,
+  type LayoutChangeEvent,
+  type TextInputProps,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { useNativeOtpDigits } from './InputOTP.hooks.native';
+import {
+  OTP_BORDER,
+  OTP_FIT_GAP_PX,
+  OTP_FIT_MIN_HEIGHT_PX,
+  OTP_FIT_MIN_WIDTH_PX,
+  OTP_FONT_PX,
+  OTP_GAP_PX,
+  otpFitBox,
+} from './InputOTP.metrics';
+import type { InputOTPProps } from './InputOTP.types.native';
+import { webAria, webDisabled } from '../../../platform/aria';
+import { resolveFieldEdge } from '../../../tokens/field-edge.core';
+import { fieldHeightPx } from '../../../tokens/field-height.core';
+import type { UiPaletteKey, UiTheme } from '../../../tokens/theme';
+import type { SizeValue } from '../../../tokens/vocabulary';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+
+const PALETTE_KEYS: readonly UiPaletteKey[] = ['primary', 'secondary', 'success', 'warning', 'info', 'danger', 'neutral'];
+
+/** The palette slot a `color` names; anything else is `primary`, as on the web. */
+function accentOf(theme: UiTheme, color: string): string {
+  const key = PALETTE_KEYS.find((candidate) => candidate === color) ?? 'primary';
+  return theme.palette[key].main;
+}
+
+/**
+ * The keypad and the one-time-code fill, the web's `keypadProps` in React
+ * Native's words: digits only for `numeric`, and on the FIRST box the hint that
+ * lets the phone offer the code from an SMS — `oneTimeCode` on iOS,
+ * `sms-otp` on Android.
+ */
+function keypadProps(variant: string, index: number): Partial<TextInputProps> {
+  // A code is not prose: no capital on the first letter, no autocorrect.
+  if (variant !== 'numeric') return { autoCapitalize: 'none', autoCorrect: false, spellCheck: false };
+  const fill: Partial<TextInputProps> =
+    index === 0
+      ? Platform.select<Partial<TextInputProps>>({
+          ios: { textContentType: 'oneTimeCode', autoComplete: 'one-time-code' },
+          android: { autoComplete: 'sms-otp' },
+          default: { autoComplete: 'one-time-code' },
+        })
+      : {};
+  return { keyboardType: 'number-pad', inputMode: 'numeric', ...fill };
+}
+
+/** The first box takes a whole code in one change (see the web's `slotMaxLength`), except `masked`'s. */
+const boxMaxLength = (variant: string, index: number, length: number): number =>
+  variant !== 'masked' && index === 0 ? length + 1 : 1;
+
+interface BoxState {
+  focused: boolean;
+  error: boolean;
+  disabled: boolean;
+}
+
+/**
+ * A box's footprint under `fit="width"`: the measured share of the row once
+ * the row has been laid out, and until then a flex share bounded by the same
+ * limits, so the first frame already fits the row.
+ */
+function fitFootprint(side: number, length: number, rowWidth: number | null): TextStyle {
+  if (rowWidth !== null) return otpFitBox(rowWidth, side, length);
+  const height = Math.max(side, OTP_FIT_MIN_HEIGHT_PX);
+  return { height, flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: OTP_FIT_MIN_WIDTH_PX, maxWidth: height };
+}
+
+/**
+ * `fit="width"`'s state: the row's width once laid out (the row takes its
+ * parent's whole width), the boxes' footprint from it, and what the row adds —
+ * its `onLayout` and the fit style. Without the option, nothing: the boxes keep
+ * their square and the row's props are exactly the default's.
+ *
+ * The share is of the row's OUTER width, so under `fit` the row's `style`
+ * should set no horizontal padding and no gap: pad the parent instead.
+ */
+function useFitWidth(fit: InputOTPProps['fit'], side: number, length: number) {
+  const [rowWidth, setRowWidth] = React.useState<number | null>(null);
+  if (fit !== 'width') return { footprint: undefined, rowLayout: {}, rowStyles: [] };
+  return {
+    footprint: fitFootprint(side, length, rowWidth),
+    rowLayout: { onLayout: (event: LayoutChangeEvent) => setRowWidth(event.nativeEvent.layout.width) },
+    rowStyles: [styles.fitRow],
+  };
+}
+
+/** One box's paint: the web slot's square, border and type, from the same numbers. */
+function boxStyle(theme: UiTheme, size: SizeValue, accent: string, state: BoxState, footprint?: TextStyle): TextStyle {
+  const side = fieldHeightPx(theme.fieldHeight, size);
+  const edge = resolveFieldEdge(theme.palette.divider, theme.palette.background.paper);
+  // Error and disabled outrank focus, as in MUI's outlined input (and the native `Input`).
+  const borderColor = state.error
+    ? theme.palette.danger.main
+    : state.disabled
+      ? theme.palette.action.disabled
+      : state.focused
+        ? accent
+        : edge;
+  return {
+    ...(footprint ?? { width: side, height: side }),
+    borderRadius: theme.radius.field,
+    borderWidth: state.focused ? OTP_BORDER.focused : OTP_BORDER.rest,
+    borderColor,
+    backgroundColor: theme.palette.background.paper,
+    color: state.disabled ? theme.palette.text.disabled : theme.palette.text.primary,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: OTP_FONT_PX[size],
+    fontWeight: '600',
+    textAlign: 'center',
+    padding: 0,
+  };
+}
+
+/**
+ * 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 const InputOTP = React.forwardRef<View, InputOTPProps>((props, ref) => {
+  const {
+    variant = 'numeric',
+    color = 'primary',
+    size = 'md',
+    length = 6,
+    value = '',
+    onChange,
+    onComplete,
+    autoFocus = false,
+    error = false,
+    disabled = false,
+    dataTestId,
+    fit,
+    style,
+    'aria-label': ariaLabel,
+  } = props;
+
+  const theme = useUiTheme();
+  const accent = accentOf(theme, color);
+  const [focusedIndex, setFocusedIndex] = React.useState<number | null>(null);
+  const { footprint, rowLayout, rowStyles } = useFitWidth(fit, fieldHeightPx(theme.fieldHeight, size), length);
+  const { digits, boxRefs, handleChangeText, handleKey } = useNativeOtpDigits({
+    variant,
+    length,
+    value,
+    onChange,
+    onComplete,
+  });
+
+  return (
+    <View
+      ref={ref}
+      testID={dataTestId}
+      role="group"
+      aria-label={ariaLabel}
+      {...rowLayout}
+      style={[styles.row, ...rowStyles, style]}
+    >
+      {digits.map((digit, index) => (
+        <TextInput
+          key={index}
+          ref={(element) => {
+            boxRefs.current[index] = element;
+          }}
+          testID={dataTestId ? `${dataTestId}-slot-${index}` : undefined}
+          value={variant === 'masked' ? (digit ? '•' : '') : digit}
+          onChangeText={(text) => handleChangeText(index, text)}
+          onKeyPress={(event) => handleKey(index, event.nativeEvent.key)}
+          onFocus={() => setFocusedIndex(index)}
+          onBlur={() => setFocusedIndex((current) => (current === index ? null : current))}
+          autoFocus={autoFocus && index === 0}
+          editable={!disabled}
+          aria-disabled={disabled}
+          {...webAria({ 'aria-invalid': error })}
+          maxLength={boxMaxLength(variant, index, length)}
+          style={boxStyle(theme, size, accent, { focused: focusedIndex === index && !disabled, error, disabled }, footprint)}
+          {...webDisabled(disabled)}
+          {...keypadProps(variant, index)}
+        />
+      ))}
+    </View>
+  );
+});
+
+InputOTP.displayName = 'InputOTP';
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: OTP_GAP_PX,
+  },
+  /** `fit="width"`: the parent's whole width, in a column or a row parent, shared at the prototype's gap. */
+  fitRow: {
+    // Both: `stretch` alone spans a column parent but not a row parent, where
+    // the row would shrink to its boxes and collapse them to their minimum.
+    alignSelf: 'stretch',
+    width: '100%',
+    gap: OTP_FIT_GAP_PX,
+  } satisfies ViewStyle,
+});

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

@@ -7,6 +7,8 @@ import { asFieldSize, fieldHeight } from '../../../tokens/field-height';
 import { absoluteInk, controlNeutral } from '../../../tokens/ink';
 import { rem } from '../../../tokens/relative';
 
+import { OTP_FIT_MIN_HEIGHT_PX, OTP_FIT_MIN_WIDTH_PX, OTP_FONT_PX } from './InputOTP.metrics';
+
 interface ColorPalette {
   main: string;
   dark?: string;
@@ -47,37 +49,54 @@ const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
   };
 };
 
-type SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-/** Each slot's type, in design px. Its side is the theme's field height for the size (a square). */
-const SIZES: Record<SizeKey, { fontPx: number }> = {
-  xs: { fontPx: 12 },
-  sm: { fontPx: 14 },
-  md: { fontPx: 16 },
-  lg: { fontPx: 18 },
-  xl: { fontPx: 20 },
-};
+type SizeKey = keyof typeof OTP_FONT_PX;
 
 export interface OtpSlotFlags {
   customColor?: string;
   customSize?: string;
   glass?: boolean;
   gradient?: boolean;
+  /** `fit="width"`: share the row's width instead of drawing a square (FUT-4585). */
+  fitWidth?: boolean;
+}
+
+interface SlotBox {
+  /** The slot's own footprint in the row. */
+  outer: CSSObject;
+  /** The outlined input inside it. */
+  inner: CSSObject;
 }
 
+/**
+ * A slot's box. By default a square of the field height, inside and out.
+ *
+ * Under `fit="width"` (FUT-4585), the native `otpFitBox` in CSS: the slot keeps
+ * the field's height (never under the 40px touch floor) and takes an equal
+ * share of the row, never wider than it is tall, never under 32px; the input
+ * fills it.
+ */
+const slotBox = (theme: Theme, side: string, fitWidth: boolean | undefined): SlotBox => {
+  if (!fitWidth) return { outer: { width: side, height: side }, inner: { width: side, height: side } };
+  const height = `max(${side}, ${rem(theme, OTP_FIT_MIN_HEIGHT_PX)})`;
+  return {
+    outer: { flex: '1 1 0', minWidth: rem(theme, OTP_FIT_MIN_WIDTH_PX), maxWidth: height, height },
+    inner: { width: '100%', height },
+  };
+};
+
 export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
-  const { customColor = 'primary', customSize = 'md', glass, gradient } = flags;
+  const { customColor = 'primary', customSize = 'md', glass, gradient, fitWidth } = flags;
   const palette = getColorFromTheme(theme, customColor);
-  const { fontPx } = SIZES[customSize as SizeKey] ?? SIZES.md;
+  const fontPx = OTP_FONT_PX[customSize as SizeKey] ?? OTP_FONT_PX.md;
   // A slot is a field: a square of the theme's field height for its size.
   const side = fieldHeight(theme, asFieldSize(customSize));
 
+  const box = slotBox(theme, side, fitWidth);
+
   return {
-    width: side,
-    height: side,
+    ...box.outer,
     '& .MuiOutlinedInput-root': {
-      width: side,
-      height: side,
+      ...box.inner,
       fontSize: rem(theme, fontPx),
       fontWeight: 600,
       textAlign: 'center',