@12-apps/ui 6.100.0 → 6.102.0

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

@@ -3,16 +3,20 @@ import TextField from '@mui/material/TextField/index.js';
 import { styled } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
+import type { Theme } from '@mui/material/styles/index.js';
+
+import { rem } from '../../../tokens/relative';
 import { withDefaults } from '../../../utils/withDefaults';
 
 import { useOtpDigits } from './InputOTP.hooks';
+import { OTP_FIT_GAP_PX } from './InputOTP.metrics';
 import { otpSlotSx } from './InputOTP.styles';
 import type { OtpSlotFlags } from './InputOTP.styles';
 import type { InputOTPProps } from './InputOTP.types';
 
 const StyledOTPInput = styled(TextField, {
   shouldForwardProp: (prop) =>
-    !['customColor', 'customSize', 'glass', 'gradient'].includes(prop as string),
+    !['customColor', 'customSize', 'glass', 'gradient', 'fitWidth'].includes(prop as string),
 })<OtpSlotFlags>(({ theme, ...flags }) => ({ ...otpSlotSx(theme, flags) }));
 
 /**
@@ -50,6 +54,15 @@ function keypadProps(variant: InputOTPProps['variant'], index: number): Record<s
 const slotMaxLength = (variant: InputOTPProps['variant'], index: number, length: number): number =>
   variant === 'numeric' && index === 0 ? length + 1 : 1;
 
+const OTP_ROW_SX = { display: 'flex', gap: 1, justifyContent: 'center', alignItems: 'center' } as const;
+
+/** `fit="width"`: the row takes its parent's width and the slots share it (`otpSlotSx`). */
+const OTP_FIT_ROW_SX = {
+  ...OTP_ROW_SX,
+  width: '100%',
+  gap: (theme: Theme) => rem(theme, OTP_FIT_GAP_PX),
+} as const;
+
 const DEFAULTS = {
   variant: 'numeric',
   color: 'primary',
@@ -68,7 +81,7 @@ type ResolvedProps = InputOTPProps & Required<Pick<InputOTPProps, keyof typeof D
 export const InputOTP = forwardRef<HTMLDivElement, InputOTPProps>((props, ref) => {
   const {
     variant, color, size, length, value, onChange, onComplete,
-    glass, gradient, autoFocus, error, disabled, dataTestId,
+    glass, gradient, autoFocus, error, disabled, dataTestId, fit,
     ...rest
   } = withDefaults(props, DEFAULTS) as ResolvedProps;
 
@@ -87,7 +100,7 @@ export const InputOTP = forwardRef<HTMLDivElement, InputOTPProps>((props, ref) =
       // A group, so the `aria-label` a caller gives the code names the six
       // slots together: on a plain `div` it named nothing anyone could reach.
       role="group"
-      sx={{ display: 'flex', gap: 1, justifyContent: 'center', alignItems: 'center' }}
+      sx={fit === 'width' ? OTP_FIT_ROW_SX : OTP_ROW_SX}
       {...rest}
     >
       {digits.map((digit, index) => (
@@ -100,6 +113,7 @@ export const InputOTP = forwardRef<HTMLDivElement, InputOTPProps>((props, ref) =
           customSize={size}
           glass={glass}
           gradient={gradient}
+          fitWidth={fit === 'width'}
           // `masked` keeps the digit in state and shows a bullet in its place.
           value={variant === 'masked' ? (digit ? '•' : '') : digit}
           onChange={(e) => handleInputChange(index, e.target.value)}

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

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

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

@@ -1,69 +1,4 @@
-import type { ColorValue, SizeValue } from '../../../tokens/scales';
+import type { InputOTPBaseProps } from './InputOTP.base';
 
-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;
-}
+/** The web `InputOTP`'s props: the shared contract, nothing MUI adds. */
+export type InputOTPProps = InputOTPBaseProps;

package/src/components/form/InputOTP/NATIVE-NOTES.md

@@ -0,0 +1,8 @@
+# InputOTP on React Native
+
+Known rendering gaps, one bullet each; `pnpm native:ledger` reads them.
+
+- There is no paste event on React Native: a pasted or SMS-filled code arrives as a change of the first box (its `maxLength` is the code's length plus one), and is spread from there by the same rules the web's paste uses — for `numeric` and `alphanumeric`. A `masked` box shows a bullet, so a paste into it keeps one character: the web spreads it.
+- Hover has no touch equivalent, so the web's hover border is not drawn; focus is, in the same colour and 2px width.
+- `glass` and `gradient` are accepted and draw the plain box: React Native core has no backdrop blur and no gradient border.
+- Arrow keys do not move between boxes (a phone keypad has none); Backspace in an empty box steps back, as on the web.

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

@@ -0,0 +1,2 @@
+export { InputOTP } from './InputOTP.native';
+export type { InputOTPProps } from './InputOTP.types.native';

package/dist/chunk-NQYC7V5N.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/InputOTP/InputOTP.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { asFieldSize, fieldHeight } from '../../../tokens/field-height';\nimport { absoluteInk, controlNeutral } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/** `neutral` is not a MUI palette entry, so it is built from the grey ramp. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\n\n/** `danger` is this component's name for the error palette. */\nconst namedPalette = (theme: Theme, color: string): ColorPalette => {\n  const colorMap: Record<string, ColorPalette> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') {\n    return neutralPalette(theme);\n  }\n\n  const palette = namedPalette(theme, color);\n  const { primary } = theme.palette;\n\n  return {\n    main: palette.main || primary.main,\n    dark: palette.dark || palette.main || primary.dark,\n    light: palette.light || palette.main || primary.light,\n    contrastText: palette.contrastText || absoluteInk(theme).white,\n  };\n};\n\ntype SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Each slot's type, in design px. Its side is the theme's field height for the size (a square). */\nconst SIZES: Record<SizeKey, { fontPx: number }> = {\n  xs: { fontPx: 12 },\n  sm: { fontPx: 14 },\n  md: { fontPx: 16 },\n  lg: { fontPx: 18 },\n  xl: { fontPx: 20 },\n};\n\nexport interface OtpSlotFlags {\n  customColor?: string;\n  customSize?: string;\n  glass?: boolean;\n  gradient?: boolean;\n}\n\nexport const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {\n  const { customColor = 'primary', customSize = 'md', glass, gradient } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n  const { fontPx } = SIZES[customSize as SizeKey] ?? SIZES.md;\n  // A slot is a field: a square of the theme's field height for its size.\n  const side = fieldHeight(theme, asFieldSize(customSize));\n\n  return {\n    width: side,\n    height: side,\n    '& .MuiOutlinedInput-root': {\n      width: side,\n      height: side,\n      fontSize: rem(theme, fontPx),\n      fontWeight: 600,\n      textAlign: 'center',\n      borderRadius: fieldRadius(theme),\n      ...(glass && {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        '& fieldset': { border: `1px solid ${fieldEdge(theme)}` },\n      }),\n      ...(gradient && {\n        '&.Mui-focused fieldset': {\n          background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,\n          borderWidth: rem(theme, 2),\n        },\n      }),\n      '& input': { textAlign: 'center', padding: 0, fontWeight: 'inherit' },\n      ...(!glass && { '& fieldset': { borderColor: fieldEdge(theme) } }),\n      '&:hover fieldset': { borderColor: palette.main },\n      '&.Mui-focused fieldset': { borderColor: palette.main, borderWidth: rem(theme, 2) },\n    },\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAAS,aAAa;AAiBtB,IAAM,iBAAiB,CAAC,UAA+B,eAAe,KAAK;AAG3E,IAAM,eAAe,CAAC,OAAc,UAAgC;AAClE,QAAM,WAAyC;AAAA,IAC7C,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,SAAO,SAAS,KAAK,KAAK,MAAM,QAAQ;AAC1C;AAEA,IAAM,oBAAoB,CAAC,OAAc,UAAgC;AACvE,MAAI,UAAU,WAAW;AACvB,WAAO,eAAe,KAAK;AAAA,EAC7B;AAEA,QAAM,UAAU,aAAa,OAAO,KAAK;AACzC,QAAM,EAAE,QAAQ,IAAI,MAAM;AAE1B,SAAO;AAAA,IACL,MAAM,QAAQ,QAAQ,QAAQ;AAAA,IAC9B,MAAM,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ;AAAA,IAC9C,OAAO,QAAQ,SAAS,QAAQ,QAAQ,QAAQ;AAAA,IAChD,cAAc,QAAQ,gBAAgB,YAAY,KAAK,EAAE;AAAA,EAC3D;AACF;AAKA,IAAM,QAA6C;AAAA,EACjD,IAAI,EAAE,QAAQ,GAAG;AAAA,EACjB,IAAI,EAAE,QAAQ,GAAG;AAAA,EACjB,IAAI,EAAE,QAAQ,GAAG;AAAA,EACjB,IAAI,EAAE,QAAQ,GAAG;AAAA,EACjB,IAAI,EAAE,QAAQ,GAAG;AACnB;AASO,IAAM,YAAY,CAAC,OAAc,UAAmC;AACzE,QAAM,EAAE,cAAc,WAAW,aAAa,MAAM,OAAO,SAAS,IAAI;AACxE,QAAM,UAAU,kBAAkB,OAAO,WAAW;AACpD,QAAM,EAAE,OAAO,IAAI,MAAM,UAAqB,KAAK,MAAM;AAEzD,QAAM,OAAO,YAAY,OAAO,YAAY,UAAU,CAAC;AAEvD,SAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,4BAA4B;AAAA,MAC1B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU,IAAI,OAAO,MAAM;AAAA,MAC3B,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,cAAc,YAAY,KAAK;AAAA,MAC/B,GAAI,SAAS;AAAA,QACX,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,QAC1D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QACtC,cAAc,EAAE,QAAQ,aAAa,UAAU,KAAK,CAAC,GAAG;AAAA,MAC1D;AAAA,MACA,GAAI,YAAY;AAAA,QACd,0BAA0B;AAAA,UACxB,YAAY,2BAA2B,QAAQ,IAAI,KAAK,QAAQ,KAAK;AAAA,UACrE,aAAa,IAAI,OAAO,CAAC;AAAA,QAC3B;AAAA,MACF;AAAA,MACA,WAAW,EAAE,WAAW,UAAU,SAAS,GAAG,YAAY,UAAU;AAAA,MACpE,GAAI,CAAC,SAAS,EAAE,cAAc,EAAE,aAAa,UAAU,KAAK,EAAE,EAAE;AAAA,MAChE,oBAAoB,EAAE,aAAa,QAAQ,KAAK;AAAA,MAChD,0BAA0B,EAAE,aAAa,QAAQ,MAAM,aAAa,IAAI,OAAO,CAAC,EAAE;AAAA,IACpF;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-QZOQVJ5L.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/InputOTP/InputOTP.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { useOtpDigits } from './InputOTP.hooks';\nimport { otpSlotSx } from './InputOTP.styles';\nimport type { OtpSlotFlags } from './InputOTP.styles';\nimport type { InputOTPProps } from './InputOTP.types';\n\nconst StyledOTPInput = styled(TextField, {\n  shouldForwardProp: (prop) =>\n    !['customColor', 'customSize', 'glass', 'gradient'].includes(prop as string),\n})<OtpSlotFlags>(({ theme, ...flags }) => ({ ...otpSlotSx(theme, flags) }));\n\n/**\n * What tells a phone that a `numeric` code is digits (FUT-4144).\n *\n * The hook already refused letters, but nothing reached the `<input>` to say\n * so, and the courier's six-digit join code opened the letter keyboard.\n * `inputMode` picks the keypad; `pattern` is what iOS reads for the same; and\n * `one-time-code` on the FIRST slot lets the phone offer a code from an SMS —\n * the first slot, because it is the one that takes a paste and spreads it.\n * `alphanumeric` and `masked` are left exactly as they were.\n */\nfunction keypadProps(variant: InputOTPProps['variant'], index: number): Record<string, string> {\n  if (variant !== 'numeric') return {};\n  return {\n    inputMode: 'numeric',\n    pattern: '[0-9]*',\n    ...(index === 0 ? { autoComplete: 'one-time-code' } : {}),\n  };\n}\n\n/**\n * One character per slot — except the numeric FIRST slot, which carries\n * `one-time-code`: the phone's SMS fill writes the whole code there in one\n * change, and a `maxLength` of 1 would cut it to one digit before the hook\n * could spread it.\n *\n * The code's length PLUS ONE: a phone that INSERTS the code at the caret keeps\n * the digit already there in front (`4` + `482913`), and the browser caps that\n * insertion at `maxlength` BEFORE the hook sees it. At the bare length it\n * arrived as `448291` — a wrong code that looks whole. One more character lets\n * the hook see the leading digit and drop it. A keystroke into the slot once\n * filled is still refused, by the hook, as `maxLength={1}` refused it.\n */\nconst slotMaxLength = (variant: InputOTPProps['variant'], index: number, length: number): number =>\n  variant === 'numeric' && index === 0 ? length + 1 : 1;\n\nconst DEFAULTS = {\n  variant: 'numeric',\n  color: 'primary',\n  size: 'md',\n  length: 6,\n  value: '',\n  glass: false,\n  gradient: false,\n  autoFocus: false,\n  error: false,\n  disabled: false,\n} satisfies Partial<InputOTPProps>;\n\ntype ResolvedProps = InputOTPProps & Required<Pick<InputOTPProps, keyof typeof DEFAULTS>>;\n\nexport const InputOTP = forwardRef<HTMLDivElement, InputOTPProps>((props, ref) => {\n  const {\n    variant, color, size, length, value, onChange, onComplete,\n    glass, gradient, autoFocus, error, disabled, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste } = useOtpDigits({\n    variant,\n    length,\n    value,\n    onChange,\n    onComplete,\n  });\n\n  return (\n    <Box\n      ref={ref}\n      data-testid={dataTestId}\n      // A group, so the `aria-label` a caller gives the code names the six\n      // slots together: on a plain `div` it named nothing anyone could reach.\n      role=\"group\"\n      sx={{ display: 'flex', gap: 1, justifyContent: 'center', alignItems: 'center' }}\n      {...rest}\n    >\n      {digits.map((digit, index) => (\n        <StyledOTPInput\n          key={index}\n          ref={(el: HTMLDivElement | null) => {\n            inputRefs.current[index] = el?.querySelector('input') || null;\n          }}\n          customColor={color}\n          customSize={size}\n          glass={glass}\n          gradient={gradient}\n          // `masked` keeps the digit in state and shows a bullet in its place.\n          value={variant === 'masked' ? (digit ? '•' : '') : digit}\n          onChange={(e) => handleInputChange(index, e.target.value)}\n          onKeyDown={(e) => handleKeyDown(index, e)}\n          // Only the first slot takes a paste; it fills the rest itself.\n          onPaste={index === 0 ? handlePaste : undefined}\n          autoFocus={autoFocus && index === 0}\n          error={error}\n          disabled={disabled}\n          inputProps={{\n            maxLength: slotMaxLength(variant, index, length),\n            style: { textAlign: 'center' },\n            'data-testid': dataTestId ? `${dataTestId}-slot-${index}` : undefined,\n            ...keypadProps(variant, index),\n          }}\n        />\n      ))}\n    </Box>\n  );\n});\n\nInputOTP.displayName = 'InputOTP';\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,eAAe;AACtB,SAAS,cAAc;AACvB,SAAgB,kBAAkB;AA0F1B;AAjFR,IAAM,iBAAiB,OAAO,WAAW;AAAA,EACvC,mBAAmB,CAAC,SAClB,CAAC,CAAC,eAAe,cAAc,SAAS,UAAU,EAAE,SAAS,IAAc;AAC/E,CAAC,EAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,OAAO,EAAE,GAAG,UAAU,OAAO,KAAK,EAAE,EAAE;AAY1E,SAAS,YAAY,SAAmC,OAAuC;AAC7F,MAAI,YAAY,UAAW,QAAO,CAAC;AACnC,SAAO;AAAA,IACL,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAI,UAAU,IAAI,EAAE,cAAc,gBAAgB,IAAI,CAAC;AAAA,EACzD;AACF;AAeA,IAAM,gBAAgB,CAAC,SAAmC,OAAe,WACvE,YAAY,aAAa,UAAU,IAAI,SAAS,IAAI;AAEtD,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AACZ;AAIO,IAAM,WAAW,WAA0C,CAAC,OAAO,QAAQ;AAChF,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAO;AAAA,IAAM;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAU;AAAA,IAC/C;AAAA,IAAO;AAAA,IAAU;AAAA,IAAW;AAAA,IAAO;AAAA,IAAU;AAAA,IAC7C,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,QAAQ;AAEhC,QAAM,EAAE,QAAQ,WAAW,mBAAmB,eAAe,YAAY,IAAI,aAAa;AAAA,IACxF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,MAAK;AAAA,MACL,IAAI,EAAE,SAAS,QAAQ,KAAK,GAAG,gBAAgB,UAAU,YAAY,SAAS;AAAA,MAC7E,GAAG;AAAA,MAEH,iBAAO,IAAI,CAAC,OAAO,UAClB;AAAA,QAAC;AAAA;AAAA,UAEC,KAAK,CAAC,OAA8B;AAClC,sBAAU,QAAQ,KAAK,IAAI,IAAI,cAAc,OAAO,KAAK;AAAA,UAC3D;AAAA,UACA,aAAa;AAAA,UACb,YAAY;AAAA,UACZ;AAAA,UACA;AAAA,UAEA,OAAO,YAAY,WAAY,QAAQ,WAAM,KAAM;AAAA,UACnD,UAAU,CAAC,MAAM,kBAAkB,OAAO,EAAE,OAAO,KAAK;AAAA,UACxD,WAAW,CAAC,MAAM,cAAc,OAAO,CAAC;AAAA,UAExC,SAAS,UAAU,IAAI,cAAc;AAAA,UACrC,WAAW,aAAa,UAAU;AAAA,UAClC;AAAA,UACA;AAAA,UACA,YAAY;AAAA,YACV,WAAW,cAAc,SAAS,OAAO,MAAM;AAAA,YAC/C,OAAO,EAAE,WAAW,SAAS;AAAA,YAC7B,eAAe,aAAa,GAAG,UAAU,SAAS,KAAK,KAAK;AAAA,YAC5D,GAAG,YAAY,SAAS,KAAK;AAAA,UAC/B;AAAA;AAAA,QAtBK;AAAA,MAuBP,CACD;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,cAAc;","names":[]}

package/dist/chunk-R6L376KR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/InputOTP/InputOTP.hooks.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\n\n/**\n * What each variant accepts. `masked` constrains nothing — it only changes what\n * is drawn — so it has no pattern here.\n */\nconst PATTERNS: Record<string, RegExp> = {\n  numeric: /^\\d*$/,\n  alphanumeric: /^[a-zA-Z0-9]*$/,\n};\n\n/** Whether `text` is something this variant will take. */\nconst isAllowed = (variant: string, text: string) => (PATTERNS[variant] ?? /.*/).test(text);\n\n/** The digit array is always `length` long, blank-padded on the right. */\nconst padTo = (digits: string[], length: number) =>\n  Array.from({ length }, (_, i) => digits[i] ?? '');\n\n/**\n * What a change to the numeric FIRST slot is, now that its `maxLength` is the\n * code's length rather than 1 (FUT-4144).\n *\n * That slot carries `one-time-code`, and the phone's SMS fill (or a password\n * manager) writes the WHOLE code into it as one change, not a paste — kept to\n * one character, the code lost every digit but the last. So:\n *\n * - `overtype`: a keystroke into the already-filled slot (its old character\n *   plus the new one). Ignored, exactly as `maxLength={1}` refused it before.\n * - `code`: anything else longer than one character, written in one go.\n *   Spread across the slots like a paste.\n *\n * Every other slot and variant keeps `maxLength={1}` and never gets here.\n */\nfunction firstSlotFill(variant: string, index: number, inputValue: string, current: string) {\n  if (variant !== 'numeric' || index !== 0 || inputValue.length < 2) return null;\n  const overtype = inputValue.length === 2 && current !== '' && inputValue.includes(current);\n  return overtype ? 'overtype' : 'code';\n}\n\n/**\n * The code inside a first-slot fill. A phone that INSERTS the SMS code at the\n * caret rather than replacing the slot leaves the digit already there in\n * front: `4` + `482913` arrives as `4482913`, which spread as-is would give\n * `448291`. Longer than the code and led by that digit: the digit is dropped.\n */\nconst codeOfFill = (inputValue: string, current: string, length: number): string =>\n  inputValue.length > length && current !== '' && inputValue.startsWith(current) ? inputValue.slice(1) : inputValue;\n\ninterface OtpInput {\n  variant: string;\n  length: number;\n  value: string;\n  onChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n}\n\n/**\n * The digits, and the three ways they change: typing, the keys that move\n * between slots, and a paste into the first one.\n *\n * Focus moves as a consequence of entry, so the input refs live here with the\n * state that drives them.\n */\nexport const useOtpDigits = ({ variant, length, value, onChange, onComplete }: OtpInput) => {\n  const [digits, setDigits] = useState<string[]>(() => padTo([], length));\n  const inputRefs = useRef<(globalThis.HTMLInputElement | null)[]>([]);\n\n  useEffect(() => {\n    setDigits(padTo(value.split('').slice(0, length), length));\n  }, [value, length]);\n\n  const focusSlot = useCallback((index: number) => {\n    inputRefs.current[index]?.focus();\n  }, []);\n\n  /** Publishes the joined value, and reports completion when every slot is full. */\n  const publish = useCallback(\n    (next: string) => {\n      onChange?.(next);\n      if (next.length === length) {\n        onComplete?.(next);\n      }\n    },\n    [length, onChange, onComplete],\n  );\n\n  /** Lays a whole code across the slots from the first: a paste, or an OS/SMS fill. */\n  const spread = useCallback(\n    (text: string) => {\n      const code = text.slice(0, length);\n      // An empty code is not a rejection, but it is nothing to apply either.\n      if (!code || !isAllowed(variant, code)) return;\n\n      setDigits(padTo(code.split(''), length));\n      publish(code);\n    },\n    [variant, length, publish],\n  );\n\n  const handleInputChange = useCallback(\n    (index: number, inputValue: string) => {\n      const fill = firstSlotFill(variant, index, inputValue, digits[0] ?? '');\n      if (fill) return fill === 'code' ? spread(codeOfFill(inputValue, digits[0] ?? '', length)) : undefined;\n      if (!isAllowed(variant, inputValue)) return;\n\n      const next = [...digits];\n      next[index] = inputValue.slice(-1); // one character per slot\n      setDigits(next);\n      publish(next.join(''));\n\n      if (inputValue && index < length - 1) {\n        focusSlot(index + 1);\n      }\n    },\n    [variant, digits, length, publish, focusSlot, spread],\n  );\n\n  const handleKeyDown = useCallback(\n    (index: number, e: React.KeyboardEvent) => {\n      // Backspace in an already-empty slot steps back rather than deleting.\n      const back =\n        (e.key === 'Backspace' && !digits[index]) || e.key === 'ArrowLeft';\n\n      if (back && index > 0) {\n        focusSlot(index - 1);\n      } else if (e.key === 'ArrowRight' && index < length - 1) {\n        focusSlot(index + 1);\n      }\n    },\n    [digits, length, focusSlot],\n  );\n\n  const handlePaste = useCallback(\n    (e: React.ClipboardEvent) => {\n      e.preventDefault();\n      spread(e.clipboardData.getData('text'));\n    },\n    [spread],\n  );\n\n  return { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste };\n};\n"],"mappings":"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","names":[]}