@12-apps/ui 6.100.0 → 6.101.0

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

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { Platform, StyleSheet, TextInput, View, type TextInputProps, type TextStyle } from 'react-native';
+
+import { useNativeOtpDigits } from './InputOTP.hooks.native';
+import { OTP_BORDER, OTP_FONT_PX, OTP_GAP_PX } 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;
+}
+
+/** 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): 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 {
+    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,
+    style,
+    'aria-label': ariaLabel,
+  } = props;
+
+  const theme = useUiTheme();
+  const accent = accentOf(theme, color);
+  const [focusedIndex, setFocusedIndex] = React.useState<number | null>(null);
+  const { digits, boxRefs, handleChangeText, handleKey } = useNativeOtpDigits({
+    variant,
+    length,
+    value,
+    onChange,
+    onComplete,
+  });
+
+  return (
+    <View ref={ref} testID={dataTestId} role="group" aria-label={ariaLabel} style={[styles.row, 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 })}
+          {...webDisabled(disabled)}
+          {...keypadProps(variant, index)}
+        />
+      ))}
+    </View>
+  );
+});
+
+InputOTP.displayName = 'InputOTP';
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: OTP_GAP_PX,
+  },
+});

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_FONT_PX } from './InputOTP.metrics';
+
 interface ColorPalette {
   main: string;
   dark?: string;
@@ -47,16 +49,7 @@ 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;
@@ -68,7 +61,7 @@ export interface OtpSlotFlags {
 export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
   const { customColor = 'primary', customSize = 'md', glass, gradient } = 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));
 

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-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":[]}