@radix-ui/react-one-time-password-field 0.1.0-rc.1744661316162

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../src/one-time-password-field.tsx"],
+  "sourcesContent": ["'use client';\nexport type {\n  OneTimePasswordFieldProps,\n  OneTimePasswordFieldInputProps,\n  OneTimePasswordFieldHiddenInputProps,\n  InputValidationType,\n} from './one-time-password-field';\nexport {\n  OneTimePasswordField,\n  OneTimePasswordFieldInput,\n  OneTimePasswordFieldHiddenInput,\n  //\n  Root,\n  Input,\n  HiddenInput,\n} from './one-time-password-field';\n", "import { Primitive } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { unstable_createCollection as createCollection } from '@radix-ui/react-collection';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\nimport * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport type { Scope } from '@radix-ui/react-context';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { clamp } from '@radix-ui/number';\nimport { useEffectEvent } from '@radix-ui/react-use-effect-event';\n\ntype InputType = 'password' | 'text';\ntype AutoComplete = 'off' | 'one-time-code';\n\ntype KeyboardActionDetails =\n  | {\n      type: 'keydown';\n      key: 'Backspace' | 'Delete' | 'Char';\n      metaKey: boolean;\n      ctrlKey: boolean;\n    }\n  | { type: 'cut' };\n\ntype UpdateAction =\n  | {\n      type: 'SET_CHAR';\n      char: string;\n      index: number;\n      event: React.KeyboardEvent | React.ChangeEvent;\n    }\n  | { type: 'CLEAR_CHAR'; index: number; reason: 'Backspace' | 'Delete' | 'Cut' }\n  | { type: 'CLEAR'; reason: 'Reset' | 'Backspace' | 'Delete' }\n  | { type: 'PASTE'; value: string };\ntype Dispatcher = React.Dispatch<UpdateAction>;\n\ntype InputValidationType = 'alpha' | 'numeric' | 'alphanumeric' | 'none';\ntype InputValidation = Record<\n  Exclude<InputValidationType, 'none'>,\n  { type: InputValidationType; regexp: RegExp; pattern: string; inputMode: string }\n>;\n\nconst INPUT_VALIDATION_MAP = {\n  numeric: {\n    type: 'numeric',\n    regexp: /[^\\d]/g,\n    pattern: '\\\\d{1}',\n    inputMode: 'numeric',\n  },\n  alpha: {\n    type: 'alpha',\n    regexp: /[^a-zA-Z]/g,\n    pattern: '[a-zA-Z]{1}',\n    inputMode: 'text',\n  },\n  alphanumeric: {\n    type: 'alphanumeric',\n    regexp: /[^a-zA-Z0-9]/g,\n    pattern: '[a-zA-Z0-9]{1}',\n    inputMode: 'text',\n  },\n} satisfies InputValidation;\n\ninterface OneTimePasswordFieldContextValue {\n  value: string[];\n  attemptSubmit: () => void;\n  hiddenInputRef: React.RefObject<HTMLInputElement | null>;\n  validationType: InputValidationType;\n  disabled: boolean;\n  readOnly: boolean;\n  autoComplete: AutoComplete;\n  autoFocus: boolean;\n  form: string | undefined;\n  name: string | undefined;\n  placeholder: string | undefined;\n  required: boolean;\n  type: InputType;\n  userActionRef: React.RefObject<KeyboardActionDetails | null>;\n  dispatch: Dispatcher;\n  orientation: Exclude<RovingFocusGroupProps['orientation'], undefined>;\n  preHydrationIndexTracker: React.RefObject<number>;\n  isHydrated: boolean;\n}\n\nconst ONE_TIME_PASSWORD_FIELD_NAME = 'OneTimePasswordField';\nconst [Collection, useCollection, createCollectionScope] = createCollection<HTMLInputElement>(\n  ONE_TIME_PASSWORD_FIELD_NAME\n);\nconst [createOneTimePasswordFieldContext] = createContextScope(ONE_TIME_PASSWORD_FIELD_NAME, [\n  createCollectionScope,\n  createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\nconst [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] =\n  createOneTimePasswordFieldContext<OneTimePasswordFieldContextValue>(ONE_TIME_PASSWORD_FIELD_NAME);\n\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\n\ninterface OneTimePasswordFieldOwnProps {\n  onValueChange?: (value: string) => void;\n  id?: string;\n  value?: string;\n  defaultValue?: string;\n  autoSubmit?: boolean;\n  onAutoSubmit?: (value: string) => void;\n  validationType?: InputValidationType;\n  disabled?: boolean;\n  readOnly?: boolean;\n  autoComplete?: AutoComplete;\n  autoFocus?: boolean;\n  form?: string | undefined;\n  name?: string | undefined;\n  placeholder?: string | undefined;\n  required?: boolean;\n  type?: InputType;\n  //\n  dir?: RovingFocusGroupProps['dir'];\n  orientation?: RovingFocusGroupProps['orientation'];\n}\n\ntype ScopedProps<P> = P & { __scopeOneTimePasswordField?: Scope };\n\nconst OneTimePasswordFieldCollectionProvider = ({\n  __scopeOneTimePasswordField,\n  children,\n}: ScopedProps<{ children: React.ReactNode }>) => {\n  return (\n    <Collection.Provider scope={__scopeOneTimePasswordField}>\n      <Collection.Slot scope={__scopeOneTimePasswordField}>{children}</Collection.Slot>\n    </Collection.Provider>\n  );\n};\n\ninterface OneTimePasswordFieldProps\n  extends OneTimePasswordFieldOwnProps,\n    Omit<\n      React.ComponentPropsWithoutRef<typeof Primitive.div>,\n      keyof OneTimePasswordFieldOwnProps\n    > {}\n\nconst OneTimePasswordFieldImpl = React.forwardRef<HTMLDivElement, OneTimePasswordFieldProps>(\n  function OneTimePasswordFieldImpl(\n    {\n      __scopeOneTimePasswordField,\n      id,\n      defaultValue,\n      value: valueProp,\n      onValueChange,\n      autoSubmit,\n      children,\n      onPaste,\n      onAutoSubmit,\n      disabled = false,\n      readOnly = false,\n      autoComplete = 'one-time-code',\n      autoFocus = false,\n      form,\n      name,\n      placeholder,\n      required = false,\n      type = 'password',\n      // TODO: Change default to vertical when inputs use vertical writing mode\n      orientation = 'horizontal',\n      dir,\n      validationType = 'numeric',\n      ...domProps\n    }: ScopedProps<OneTimePasswordFieldProps>,\n    forwardedRef\n  ) {\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n    const direction = useDirection(dir);\n    const collection = useCollection(__scopeOneTimePasswordField);\n\n    const validation =\n      validationType in INPUT_VALIDATION_MAP\n        ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n        : undefined;\n\n    const controlledValue = React.useMemo(() => {\n      return valueProp != null ? sanitizeValue(valueProp, validation?.regexp) : undefined;\n    }, [valueProp, validation?.regexp]);\n\n    const [value, setValue] = useControllableState({\n      caller: 'OneTimePasswordField',\n      prop: controlledValue,\n      defaultProp: defaultValue != null ? sanitizeValue(defaultValue, validation?.regexp) : [],\n      onChange: (value) => onValueChange?.(value.filter(Boolean).join('')),\n    });\n\n    // Update function *specifically* for event handlers.\n    const dispatch = useEffectEvent<Dispatcher>((action) => {\n      switch (action.type) {\n        case 'SET_CHAR': {\n          const { index, char } = action;\n          const currentTarget = collection.at(index)?.element;\n          if (value[index] === char) {\n            const next = currentTarget && collection.from(currentTarget, 1)?.element;\n            focusInput(next);\n            return;\n          }\n\n          // empty values should be handled in the CLEAR_CHAR action\n          if (char === '') {\n            return;\n          }\n\n          if (validation) {\n            const regexp = new RegExp(validation.regexp);\n            const clean = char.replace(regexp, '');\n            if (clean !== char) {\n              // not valid; ignore\n              return;\n            }\n          }\n\n          // no more space\n          if (value.length >= collection.size) {\n            // replace current value; move to next input\n            const newValue = [...value];\n            newValue[index] = char;\n            flushSync(() => setValue(newValue));\n            const next = currentTarget && collection.from(currentTarget, 1)?.element;\n            focusInput(next);\n            return;\n          }\n\n          const newValue = [\n            //\n            ...value.slice(0, index),\n            char,\n            ...value.slice(index),\n          ];\n\n          const lastElement = collection.at(-1)?.element;\n          flushSync(() => setValue(newValue));\n          if (currentTarget !== lastElement) {\n            const next = currentTarget && collection.from(currentTarget, 1)?.element;\n            focusInput(next);\n          } else {\n            currentTarget?.select();\n          }\n          return;\n        }\n\n        case 'CLEAR_CHAR': {\n          const { index, reason } = action;\n          if (!value[index]) {\n            return;\n          }\n\n          const newValue = value.filter((_, i) => i !== index);\n          const currentTarget = collection.at(index)?.element;\n          const previous = currentTarget && collection.from(currentTarget, -1)?.element;\n\n          flushSync(() => setValue(newValue));\n          if (reason === 'Backspace') {\n            focusInput(previous);\n          } else if (reason === 'Delete' || reason === 'Cut') {\n            focusInput(currentTarget);\n          }\n          return;\n        }\n\n        case 'CLEAR': {\n          if (value.length === 0) {\n            return;\n          }\n\n          if (action.reason === 'Backspace' || action.reason === 'Delete') {\n            flushSync(() => setValue([]));\n            focusInput(collection.at(0)?.element);\n          } else {\n            setValue([]);\n          }\n          return;\n        }\n\n        case 'PASTE': {\n          const { value: pastedValue } = action;\n          const value = sanitizeValue(pastedValue, validation?.regexp);\n          if (!value) {\n            return;\n          }\n\n          flushSync(() => setValue(value));\n          focusInput(collection.at(value.length - 1)?.element);\n          return;\n        }\n      }\n    });\n\n    // re-validate when the validation type changes\n    const validationTypeRef = React.useRef(validation);\n    React.useEffect(() => {\n      if (!validation) {\n        return;\n      }\n\n      if (validationTypeRef.current?.type !== validation.type) {\n        validationTypeRef.current = validation;\n        setValue(sanitizeValue(value, validation.regexp));\n      }\n    }, [setValue, validation, value]);\n\n    const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n\n    const userActionRef = React.useRef<KeyboardActionDetails | null>(null);\n    const rootRef = React.useRef<HTMLDivElement | null>(null);\n    const composedRefs = useComposedRefs(forwardedRef, rootRef);\n\n    const firstInput = collection.at(0)?.element;\n    const locateForm = React.useCallback(() => {\n      let formElement: HTMLFormElement | null | undefined;\n      if (form) {\n        const associatedElement = (rootRef.current?.ownerDocument ?? document).getElementById(form);\n        if (isFormElement(associatedElement)) {\n          formElement = associatedElement;\n        }\n      } else if (hiddenInputRef.current) {\n        formElement = hiddenInputRef.current.form;\n      } else if (firstInput) {\n        formElement = firstInput.form;\n      }\n\n      return formElement ?? null;\n    }, [form, firstInput]);\n\n    const attemptSubmit = React.useCallback(() => {\n      const formElement = locateForm();\n      formElement?.requestSubmit();\n    }, [locateForm]);\n\n    React.useEffect(() => {\n      const form = locateForm();\n      if (form) {\n        const reset = () => dispatch({ type: 'CLEAR', reason: 'Reset' });\n        form.addEventListener('reset', reset);\n        return () => form.removeEventListener('reset', reset);\n      }\n    }, [dispatch, locateForm]);\n\n    const currentValue = value.join('');\n    const valueRef = React.useRef(currentValue);\n    const length = collection.size;\n    React.useEffect(() => {\n      const previousValue = valueRef.current;\n      valueRef.current = currentValue;\n      if (previousValue === currentValue) {\n        return;\n      }\n\n      if (autoSubmit && value.every((char) => char !== '') && value.length === length) {\n        onAutoSubmit?.(value.join(''));\n        attemptSubmit();\n      }\n    }, [attemptSubmit, autoSubmit, currentValue, length, onAutoSubmit, value]);\n\n    // Before hydration (and in SSR) we can track the index of an input during\n    // render, as indices calculated by the collection package should almost\n    // always align with render order anyway. This ensures that index-dependent\n    // attributes are immediately rendered, in case browser extensions rely on\n    // those for auto-complete functionality and JS has not hydrated.\n    const preHydrationIndexTracker = React.useRef<number>(0);\n    const isHydrated = useIsHydrated();\n\n    return (\n      <OneTimePasswordFieldContext\n        scope={__scopeOneTimePasswordField}\n        value={value}\n        attemptSubmit={attemptSubmit}\n        disabled={disabled}\n        readOnly={readOnly}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        form={form}\n        name={name}\n        placeholder={placeholder}\n        required={required}\n        type={type}\n        hiddenInputRef={hiddenInputRef}\n        userActionRef={userActionRef}\n        dispatch={dispatch}\n        validationType={validationType}\n        orientation={orientation}\n        preHydrationIndexTracker={preHydrationIndexTracker}\n        isHydrated={isHydrated}\n      >\n        <RovingFocusGroup.Root\n          asChild\n          {...rovingFocusGroupScope}\n          orientation={orientation}\n          dir={direction}\n        >\n          <Primitive.div\n            {...domProps}\n            role=\"group\"\n            ref={composedRefs}\n            onPaste={composeEventHandlers(\n              onPaste,\n              (event: React.ClipboardEvent<HTMLDivElement>) => {\n                event.preventDefault();\n                const pastedValue = event.clipboardData.getData('Text');\n                const value = sanitizeValue(pastedValue, validation?.regexp);\n                if (!value) {\n                  return;\n                }\n                dispatch({ type: 'PASTE', value: pastedValue });\n              }\n            )}\n          >\n            {children}\n          </Primitive.div>\n        </RovingFocusGroup.Root>\n      </OneTimePasswordFieldContext>\n    );\n  }\n);\n\nconst OneTimePasswordField = React.forwardRef<HTMLDivElement, OneTimePasswordFieldProps>(\n  function OneTimePasswordField(props, ref) {\n    return (\n      <OneTimePasswordFieldCollectionProvider>\n        <OneTimePasswordFieldImpl {...props} ref={ref} />\n      </OneTimePasswordFieldCollectionProvider>\n    );\n  }\n);\n\ninterface OneTimePasswordFieldHiddenInputProps\n  extends Omit<\n    React.ComponentProps<'input'>,\n    | keyof 'value'\n    | 'defaultValue'\n    | 'type'\n    | 'onChange'\n    | 'readOnly'\n    | 'disabled'\n    | 'autoComplete'\n    | 'autoFocus'\n  > {}\n\nconst OneTimePasswordFieldHiddenInput = React.forwardRef<\n  HTMLInputElement,\n  OneTimePasswordFieldHiddenInputProps\n>(function OneTimePasswordFieldHiddenInput(\n  { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldHiddenInputProps>,\n  forwardedRef\n) {\n  const { value, hiddenInputRef } = useOneTimePasswordFieldContext(\n    'OneTimePasswordFieldHiddenInput',\n    __scopeOneTimePasswordField\n  );\n  const ref = useComposedRefs(hiddenInputRef, forwardedRef);\n  return (\n    <input\n      ref={ref}\n      {...props}\n      type=\"hidden\"\n      readOnly\n      value={value.join('').trim()}\n      autoComplete=\"off\"\n      autoFocus={false}\n      autoCapitalize=\"off\"\n      autoCorrect=\"off\"\n      autoSave=\"off\"\n      spellCheck={false}\n    />\n  );\n});\n\ninterface OneTimePasswordFieldInputOwnProps {\n  autoComplete?: 'one-time-code' | 'off';\n}\n\ninterface OneTimePasswordFieldInputProps\n  extends OneTimePasswordFieldInputOwnProps,\n    Omit<React.ComponentProps<typeof Primitive.input>, keyof OneTimePasswordFieldInputOwnProps> {}\n\nconst OneTimePasswordFieldInput = React.forwardRef<\n  HTMLInputElement,\n  OneTimePasswordFieldInputProps\n>(function OneTimePasswordFieldInput(\n  { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldInputProps>,\n  forwardedRef\n) {\n  // TODO: warn if these values are passed\n  const {\n    value: _value,\n    defaultValue: _defaultValue,\n    disabled: _disabled,\n    readOnly: _readOnly,\n    autoComplete: _autoComplete,\n    autoFocus: _autoFocus,\n    form: _form,\n    name: _name,\n    placeholder: _placeholder,\n    required: _required,\n    type: _type,\n    ...domProps\n  } = props as any;\n\n  const context = useOneTimePasswordFieldContext(\n    'OneTimePasswordFieldInput',\n    __scopeOneTimePasswordField\n  );\n  const { dispatch, userActionRef, validationType, preHydrationIndexTracker, isHydrated } = context;\n  const collection = useCollection(__scopeOneTimePasswordField);\n  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [element, setElement] = React.useState<HTMLInputElement | null>(null);\n\n  let index: number;\n  if (!isHydrated) {\n    index = preHydrationIndexTracker.current;\n    preHydrationIndexTracker.current++;\n  } else {\n    index = element ? collection.indexOf(element) : -1;\n  }\n\n  const composedInputRef = useComposedRefs(forwardedRef, inputRef, setElement);\n  const char = context.value[index] ?? '';\n\n  const keyboardActionTimeoutRef = React.useRef<number | null>(null);\n  React.useEffect(() => {\n    return () => {\n      window.clearTimeout(keyboardActionTimeoutRef.current!);\n    };\n  }, []);\n\n  const totalValue = context.value.join('').trim();\n  const lastSelectableIndex = clamp(totalValue.length, [0, collection.size - 1]);\n  const isFocusable = index <= lastSelectableIndex;\n\n  const validation =\n    validationType in INPUT_VALIDATION_MAP\n      ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n      : undefined;\n\n  return (\n    <Collection.ItemSlot scope={__scopeOneTimePasswordField}>\n      <RovingFocusGroup.Item\n        {...rovingFocusGroupScope}\n        asChild\n        focusable={!context.disabled && isFocusable}\n        active={index === lastSelectableIndex}\n      >\n        <Primitive.input\n          ref={composedInputRef}\n          type=\"text\"\n          aria-label={`Character ${index + 1} of ${collection.size}`}\n          autoComplete={index === 0 ? context.autoComplete : 'off'}\n          inputMode={validation?.inputMode}\n          maxLength={1}\n          pattern={validation?.pattern}\n          readOnly={context.readOnly}\n          value={char}\n          data-radix-otp-input=\"\"\n          data-radix-index={index}\n          {...domProps}\n          onFocus={composeEventHandlers(props.onFocus, (event) => {\n            event.currentTarget.select();\n          })}\n          onCut={composeEventHandlers(props.onCut, (event) => {\n            const currentValue = event.currentTarget.value;\n            if (currentValue !== '') {\n              // In this case the value will be cleared, but we don't want to\n              // set it directly because the user may want to prevent default\n              // behavior in the onChange handler. The userActionRef will\n              // is set temporarily so the change handler can behave correctly\n              // in response to the action.\n              userActionRef.current = {\n                type: 'cut',\n              };\n              // Set a short timeout to clear the action tracker after the change\n              // handler has had time to complete.\n              keyboardActionTimeoutRef.current = window.setTimeout(() => {\n                userActionRef.current = null;\n              }, 10);\n            }\n          })}\n          onChange={composeEventHandlers(props.onChange, (event) => {\n            const action = userActionRef.current;\n            userActionRef.current = null;\n\n            if (action) {\n              switch (action.type) {\n                case 'cut':\n                  // TODO: do we want to assume the user wantt to clear the\n                  // entire value here and copy the code to the clipboard instead\n                  // of just the value of the given input?\n                  dispatch({ type: 'CLEAR_CHAR', index, reason: 'Cut' });\n                  return;\n                case 'keydown': {\n                  if (action.key === 'Char') {\n                    // update resulting from a keydown event that set a value\n                    // directly. Ignore.\n                    return;\n                  }\n\n                  const isClearing =\n                    action.key === 'Backspace' && (action.metaKey || action.ctrlKey);\n                  if (isClearing) {\n                    dispatch({ type: 'CLEAR', reason: 'Backspace' });\n                  } else {\n                    dispatch({ type: 'CLEAR_CHAR', index, reason: action.key });\n                  }\n                  return;\n                }\n                default:\n                  return;\n              }\n            }\n\n            // Only update the value if it matches the input pattern\n            if (event.target.validity.valid) {\n              if (event.target.value === '') {\n                let reason: 'Backspace' | 'Delete' | 'Cut' = 'Backspace';\n                if (isInputEvent(event.nativeEvent)) {\n                  const inputType = event.nativeEvent.inputType;\n                  if (inputType === 'deleteContentBackward') {\n                    reason = 'Backspace';\n                  } else if (inputType === 'deleteByCut') {\n                    reason = 'Cut';\n                  }\n                }\n                dispatch({ type: 'CLEAR_CHAR', index, reason });\n              } else {\n                dispatch({ type: 'SET_CHAR', char: event.target.value, index, event });\n              }\n            } else {\n              const element = event.target;\n              requestAnimationFrame(() => {\n                if (element.ownerDocument.activeElement === element) {\n                  element.select();\n                }\n              });\n            }\n          })}\n          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n            switch (event.key) {\n              case 'Delete':\n              case 'Backspace': {\n                const currentValue = event.currentTarget.value;\n                // if current value is empty, no change event will fire\n                if (currentValue === '') {\n                  // if the user presses delete when there is no value, noop\n                  if (event.key === 'Delete') return;\n\n                  const isClearing = event.metaKey || event.ctrlKey;\n                  if (isClearing) {\n                    dispatch({ type: 'CLEAR', reason: 'Backspace' });\n                  } else {\n                    const element = event.currentTarget;\n                    requestAnimationFrame(() => {\n                      focusInput(collection.from(element, -1)?.element);\n                    });\n                  }\n                } else {\n                  // In this case the value will be cleared, but we don't want\n                  // to set it directly because the user may want to prevent\n                  // default behavior in the onChange handler. The userActionRef\n                  // will is set temporarily so the change handler can behave\n                  // correctly in response to the key vs. clearing the value by\n                  // setting state externally.\n                  userActionRef.current = {\n                    type: 'keydown',\n                    key: event.key,\n                    metaKey: event.metaKey,\n                    ctrlKey: event.ctrlKey,\n                  };\n                  // Set a short timeout to clear the action tracker after the change\n                  // handler has had time to complete.\n                  keyboardActionTimeoutRef.current = window.setTimeout(() => {\n                    userActionRef.current = null;\n                  }, 10);\n                }\n\n                return;\n              }\n              case 'Enter': {\n                event.preventDefault();\n                context.attemptSubmit();\n                return;\n              }\n              case 'ArrowDown':\n              case 'ArrowUp': {\n                if (context.orientation === 'horizontal') {\n                  // in horizontal orientation, the up/down will de-select the\n                  // input instead of moving focus\n                  event.preventDefault();\n                }\n                return;\n              }\n              // TODO: Handle left/right arrow keys in vertical writing mode\n              default: {\n                if (event.currentTarget.value === event.key) {\n                  // if current value is same as the key press, no change event\n                  // will fire. Focus the next input.\n                  const element = event.currentTarget;\n                  event.preventDefault();\n                  focusInput(collection.from(element, 1)?.element);\n                  return;\n                } else if (\n                  // input already has a value, but...\n                  event.currentTarget.value &&\n                  // the value is not selected\n                  !(\n                    event.currentTarget.selectionStart === 0 &&\n                    event.currentTarget.selectionEnd != null &&\n                    event.currentTarget.selectionEnd > 0\n                  )\n                ) {\n                  const attemptedValue = event.key;\n                  if (event.key.length > 1 || event.key === ' ') {\n                    // not a character; do nothing\n                    return;\n                  } else {\n                    // user is attempting to enter a character, but the input\n                    // will not update by default since it's limited to a single\n                    // character.\n                    const nextInput = collection.from(event.currentTarget, 1)?.element;\n                    const lastInput = collection.at(-1)?.element;\n                    if (nextInput !== lastInput && event.currentTarget !== lastInput) {\n                      // if selection is before the value, set the value of the\n                      // current input. Otherwise set the value of the next\n                      // input.\n                      if (event.currentTarget.selectionStart === 0) {\n                        dispatch({ type: 'SET_CHAR', char: attemptedValue, index, event });\n                      } else {\n                        dispatch({\n                          type: 'SET_CHAR',\n                          char: attemptedValue,\n                          index: index + 1,\n                          event,\n                        });\n                      }\n\n                      userActionRef.current = {\n                        type: 'keydown',\n                        key: 'Char',\n                        metaKey: event.metaKey,\n                        ctrlKey: event.ctrlKey,\n                      };\n                      keyboardActionTimeoutRef.current = window.setTimeout(() => {\n                        userActionRef.current = null;\n                      }, 10);\n                    }\n                  }\n                }\n              }\n            }\n          })}\n          onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n            if (index > lastSelectableIndex) {\n              event.preventDefault();\n              const element = collection.at(lastSelectableIndex)?.element;\n              focusInput(element);\n            }\n          })}\n        />\n      </RovingFocusGroup.Item>\n    </Collection.ItemSlot>\n  );\n});\n\nconst Root = OneTimePasswordField;\nconst Input = OneTimePasswordFieldInput;\nconst HiddenInput = OneTimePasswordFieldHiddenInput;\n\nexport {\n  OneTimePasswordField,\n  OneTimePasswordFieldInput,\n  OneTimePasswordFieldHiddenInput,\n  //\n  Root,\n  Input,\n  HiddenInput,\n};\nexport type {\n  OneTimePasswordFieldProps,\n  OneTimePasswordFieldInputProps,\n  OneTimePasswordFieldHiddenInputProps,\n  InputValidationType,\n};\n\nfunction isFormElement(element: Element | null | undefined): element is HTMLFormElement {\n  return element?.tagName === 'FORM';\n}\n\nfunction sanitizeValue(value: string | string[], regexp: RegExp | undefined | null) {\n  if (Array.isArray(value)) {\n    value = value.join('');\n  }\n  if (regexp) {\n    // global regexp is stateful, so we clone it for each call\n    regexp = new RegExp(regexp);\n    return value.replace(regexp, '').split('').filter(Boolean);\n  }\n  return value.split('').filter(Boolean);\n}\n\nfunction focusInput(element: HTMLInputElement | null | undefined) {\n  if (!element) return;\n  if (element.ownerDocument.activeElement === element) {\n    // if the element is already focused, select the value in the next\n    // animation frame\n    window.requestAnimationFrame(() => {\n      element.select?.();\n    });\n  } else {\n    element.focus();\n  }\n}\n\nfunction isInputEvent(event: Event): event is InputEvent {\n  return event.type === 'input';\n}\n"],
+  "mappings": "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",
+  "names": ["Root", "createCollection", "OneTimePasswordFieldImpl", "value", "newValue", "form", "OneTimePasswordField", "OneTimePasswordFieldHiddenInput", "OneTimePasswordFieldInput", "element", "Root"]
+}

package/dist/index.mjs

@@ -0,0 +1,580 @@
+"use client";
+
+// src/one-time-password-field.tsx
+import { Primitive } from "@radix-ui/react-primitive";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { unstable_createCollection as createCollection } from "@radix-ui/react-collection";
+import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
+import { createRovingFocusGroupScope } from "@radix-ui/react-roving-focus";
+import { useIsHydrated } from "@radix-ui/react-use-is-hydrated";
+import * as React from "react";
+import { flushSync } from "react-dom";
+import { createContextScope } from "@radix-ui/react-context";
+import { useDirection } from "@radix-ui/react-direction";
+import { clamp } from "@radix-ui/number";
+import { useEffectEvent } from "@radix-ui/react-use-effect-event";
+import { jsx } from "react/jsx-runtime";
+var INPUT_VALIDATION_MAP = {
+  numeric: {
+    type: "numeric",
+    regexp: /[^\d]/g,
+    pattern: "\\d{1}",
+    inputMode: "numeric"
+  },
+  alpha: {
+    type: "alpha",
+    regexp: /[^a-zA-Z]/g,
+    pattern: "[a-zA-Z]{1}",
+    inputMode: "text"
+  },
+  alphanumeric: {
+    type: "alphanumeric",
+    regexp: /[^a-zA-Z0-9]/g,
+    pattern: "[a-zA-Z0-9]{1}",
+    inputMode: "text"
+  }
+};
+var ONE_TIME_PASSWORD_FIELD_NAME = "OneTimePasswordField";
+var [Collection, useCollection, createCollectionScope] = createCollection(
+  ONE_TIME_PASSWORD_FIELD_NAME
+);
+var [createOneTimePasswordFieldContext] = createContextScope(ONE_TIME_PASSWORD_FIELD_NAME, [
+  createCollectionScope,
+  createRovingFocusGroupScope
+]);
+var useRovingFocusGroupScope = createRovingFocusGroupScope();
+var [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] = createOneTimePasswordFieldContext(ONE_TIME_PASSWORD_FIELD_NAME);
+var OneTimePasswordFieldCollectionProvider = ({
+  __scopeOneTimePasswordField,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Collection.Provider, { scope: __scopeOneTimePasswordField, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: __scopeOneTimePasswordField, children }) });
+};
+var OneTimePasswordFieldImpl = React.forwardRef(
+  function OneTimePasswordFieldImpl2({
+    __scopeOneTimePasswordField,
+    id,
+    defaultValue,
+    value: valueProp,
+    onValueChange,
+    autoSubmit,
+    children,
+    onPaste,
+    onAutoSubmit,
+    disabled = false,
+    readOnly = false,
+    autoComplete = "one-time-code",
+    autoFocus = false,
+    form,
+    name,
+    placeholder,
+    required = false,
+    type = "password",
+    // TODO: Change default to vertical when inputs use vertical writing mode
+    orientation = "horizontal",
+    dir,
+    validationType = "numeric",
+    ...domProps
+  }, forwardedRef) {
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);
+    const direction = useDirection(dir);
+    const collection = useCollection(__scopeOneTimePasswordField);
+    const validation = validationType in INPUT_VALIDATION_MAP ? INPUT_VALIDATION_MAP[validationType] : void 0;
+    const controlledValue = React.useMemo(() => {
+      return valueProp != null ? sanitizeValue(valueProp, validation?.regexp) : void 0;
+    }, [valueProp, validation?.regexp]);
+    const [value, setValue] = useControllableState({
+      caller: "OneTimePasswordField",
+      prop: controlledValue,
+      defaultProp: defaultValue != null ? sanitizeValue(defaultValue, validation?.regexp) : [],
+      onChange: (value2) => onValueChange?.(value2.filter(Boolean).join(""))
+    });
+    const dispatch = useEffectEvent((action) => {
+      switch (action.type) {
+        case "SET_CHAR": {
+          const { index, char } = action;
+          const currentTarget = collection.at(index)?.element;
+          if (value[index] === char) {
+            const next = currentTarget && collection.from(currentTarget, 1)?.element;
+            focusInput(next);
+            return;
+          }
+          if (char === "") {
+            return;
+          }
+          if (validation) {
+            const regexp = new RegExp(validation.regexp);
+            const clean = char.replace(regexp, "");
+            if (clean !== char) {
+              return;
+            }
+          }
+          if (value.length >= collection.size) {
+            const newValue2 = [...value];
+            newValue2[index] = char;
+            flushSync(() => setValue(newValue2));
+            const next = currentTarget && collection.from(currentTarget, 1)?.element;
+            focusInput(next);
+            return;
+          }
+          const newValue = [
+            //
+            ...value.slice(0, index),
+            char,
+            ...value.slice(index)
+          ];
+          const lastElement = collection.at(-1)?.element;
+          flushSync(() => setValue(newValue));
+          if (currentTarget !== lastElement) {
+            const next = currentTarget && collection.from(currentTarget, 1)?.element;
+            focusInput(next);
+          } else {
+            currentTarget?.select();
+          }
+          return;
+        }
+        case "CLEAR_CHAR": {
+          const { index, reason } = action;
+          if (!value[index]) {
+            return;
+          }
+          const newValue = value.filter((_, i) => i !== index);
+          const currentTarget = collection.at(index)?.element;
+          const previous = currentTarget && collection.from(currentTarget, -1)?.element;
+          flushSync(() => setValue(newValue));
+          if (reason === "Backspace") {
+            focusInput(previous);
+          } else if (reason === "Delete" || reason === "Cut") {
+            focusInput(currentTarget);
+          }
+          return;
+        }
+        case "CLEAR": {
+          if (value.length === 0) {
+            return;
+          }
+          if (action.reason === "Backspace" || action.reason === "Delete") {
+            flushSync(() => setValue([]));
+            focusInput(collection.at(0)?.element);
+          } else {
+            setValue([]);
+          }
+          return;
+        }
+        case "PASTE": {
+          const { value: pastedValue } = action;
+          const value2 = sanitizeValue(pastedValue, validation?.regexp);
+          if (!value2) {
+            return;
+          }
+          flushSync(() => setValue(value2));
+          focusInput(collection.at(value2.length - 1)?.element);
+          return;
+        }
+      }
+    });
+    const validationTypeRef = React.useRef(validation);
+    React.useEffect(() => {
+      if (!validation) {
+        return;
+      }
+      if (validationTypeRef.current?.type !== validation.type) {
+        validationTypeRef.current = validation;
+        setValue(sanitizeValue(value, validation.regexp));
+      }
+    }, [setValue, validation, value]);
+    const hiddenInputRef = React.useRef(null);
+    const userActionRef = React.useRef(null);
+    const rootRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, rootRef);
+    const firstInput = collection.at(0)?.element;
+    const locateForm = React.useCallback(() => {
+      let formElement;
+      if (form) {
+        const associatedElement = (rootRef.current?.ownerDocument ?? document).getElementById(form);
+        if (isFormElement(associatedElement)) {
+          formElement = associatedElement;
+        }
+      } else if (hiddenInputRef.current) {
+        formElement = hiddenInputRef.current.form;
+      } else if (firstInput) {
+        formElement = firstInput.form;
+      }
+      return formElement ?? null;
+    }, [form, firstInput]);
+    const attemptSubmit = React.useCallback(() => {
+      const formElement = locateForm();
+      formElement?.requestSubmit();
+    }, [locateForm]);
+    React.useEffect(() => {
+      const form2 = locateForm();
+      if (form2) {
+        const reset = () => dispatch({ type: "CLEAR", reason: "Reset" });
+        form2.addEventListener("reset", reset);
+        return () => form2.removeEventListener("reset", reset);
+      }
+    }, [dispatch, locateForm]);
+    const currentValue = value.join("");
+    const valueRef = React.useRef(currentValue);
+    const length = collection.size;
+    React.useEffect(() => {
+      const previousValue = valueRef.current;
+      valueRef.current = currentValue;
+      if (previousValue === currentValue) {
+        return;
+      }
+      if (autoSubmit && value.every((char) => char !== "") && value.length === length) {
+        onAutoSubmit?.(value.join(""));
+        attemptSubmit();
+      }
+    }, [attemptSubmit, autoSubmit, currentValue, length, onAutoSubmit, value]);
+    const preHydrationIndexTracker = React.useRef(0);
+    const isHydrated = useIsHydrated();
+    return /* @__PURE__ */ jsx(
+      OneTimePasswordFieldContext,
+      {
+        scope: __scopeOneTimePasswordField,
+        value,
+        attemptSubmit,
+        disabled,
+        readOnly,
+        autoComplete,
+        autoFocus,
+        form,
+        name,
+        placeholder,
+        required,
+        type,
+        hiddenInputRef,
+        userActionRef,
+        dispatch,
+        validationType,
+        orientation,
+        preHydrationIndexTracker,
+        isHydrated,
+        children: /* @__PURE__ */ jsx(
+          RovingFocusGroup.Root,
+          {
+            asChild: true,
+            ...rovingFocusGroupScope,
+            orientation,
+            dir: direction,
+            children: /* @__PURE__ */ jsx(
+              Primitive.div,
+              {
+                ...domProps,
+                role: "group",
+                ref: composedRefs,
+                onPaste: composeEventHandlers(
+                  onPaste,
+                  (event) => {
+                    event.preventDefault();
+                    const pastedValue = event.clipboardData.getData("Text");
+                    const value2 = sanitizeValue(pastedValue, validation?.regexp);
+                    if (!value2) {
+                      return;
+                    }
+                    dispatch({ type: "PASTE", value: pastedValue });
+                  }
+                ),
+                children
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+var OneTimePasswordField = React.forwardRef(
+  function OneTimePasswordField2(props, ref) {
+    return /* @__PURE__ */ jsx(OneTimePasswordFieldCollectionProvider, { children: /* @__PURE__ */ jsx(OneTimePasswordFieldImpl, { ...props, ref }) });
+  }
+);
+var OneTimePasswordFieldHiddenInput = React.forwardRef(function OneTimePasswordFieldHiddenInput2({ __scopeOneTimePasswordField, ...props }, forwardedRef) {
+  const { value, hiddenInputRef } = useOneTimePasswordFieldContext(
+    "OneTimePasswordFieldHiddenInput",
+    __scopeOneTimePasswordField
+  );
+  const ref = useComposedRefs(hiddenInputRef, forwardedRef);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      ...props,
+      type: "hidden",
+      readOnly: true,
+      value: value.join("").trim(),
+      autoComplete: "off",
+      autoFocus: false,
+      autoCapitalize: "off",
+      autoCorrect: "off",
+      autoSave: "off",
+      spellCheck: false
+    }
+  );
+});
+var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldInput2({ __scopeOneTimePasswordField, ...props }, forwardedRef) {
+  const {
+    value: _value,
+    defaultValue: _defaultValue,
+    disabled: _disabled,
+    readOnly: _readOnly,
+    autoComplete: _autoComplete,
+    autoFocus: _autoFocus,
+    form: _form,
+    name: _name,
+    placeholder: _placeholder,
+    required: _required,
+    type: _type,
+    ...domProps
+  } = props;
+  const context = useOneTimePasswordFieldContext(
+    "OneTimePasswordFieldInput",
+    __scopeOneTimePasswordField
+  );
+  const { dispatch, userActionRef, validationType, preHydrationIndexTracker, isHydrated } = context;
+  const collection = useCollection(__scopeOneTimePasswordField);
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);
+  const inputRef = React.useRef(null);
+  const [element, setElement] = React.useState(null);
+  let index;
+  if (!isHydrated) {
+    index = preHydrationIndexTracker.current;
+    preHydrationIndexTracker.current++;
+  } else {
+    index = element ? collection.indexOf(element) : -1;
+  }
+  const composedInputRef = useComposedRefs(forwardedRef, inputRef, setElement);
+  const char = context.value[index] ?? "";
+  const keyboardActionTimeoutRef = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      window.clearTimeout(keyboardActionTimeoutRef.current);
+    };
+  }, []);
+  const totalValue = context.value.join("").trim();
+  const lastSelectableIndex = clamp(totalValue.length, [0, collection.size - 1]);
+  const isFocusable = index <= lastSelectableIndex;
+  const validation = validationType in INPUT_VALIDATION_MAP ? INPUT_VALIDATION_MAP[validationType] : void 0;
+  return /* @__PURE__ */ jsx(Collection.ItemSlot, { scope: __scopeOneTimePasswordField, children: /* @__PURE__ */ jsx(
+    RovingFocusGroup.Item,
+    {
+      ...rovingFocusGroupScope,
+      asChild: true,
+      focusable: !context.disabled && isFocusable,
+      active: index === lastSelectableIndex,
+      children: /* @__PURE__ */ jsx(
+        Primitive.input,
+        {
+          ref: composedInputRef,
+          type: "text",
+          "aria-label": `Character ${index + 1} of ${collection.size}`,
+          autoComplete: index === 0 ? context.autoComplete : "off",
+          inputMode: validation?.inputMode,
+          maxLength: 1,
+          pattern: validation?.pattern,
+          readOnly: context.readOnly,
+          value: char,
+          "data-radix-otp-input": "",
+          "data-radix-index": index,
+          ...domProps,
+          onFocus: composeEventHandlers(props.onFocus, (event) => {
+            event.currentTarget.select();
+          }),
+          onCut: composeEventHandlers(props.onCut, (event) => {
+            const currentValue = event.currentTarget.value;
+            if (currentValue !== "") {
+              userActionRef.current = {
+                type: "cut"
+              };
+              keyboardActionTimeoutRef.current = window.setTimeout(() => {
+                userActionRef.current = null;
+              }, 10);
+            }
+          }),
+          onChange: composeEventHandlers(props.onChange, (event) => {
+            const action = userActionRef.current;
+            userActionRef.current = null;
+            if (action) {
+              switch (action.type) {
+                case "cut":
+                  dispatch({ type: "CLEAR_CHAR", index, reason: "Cut" });
+                  return;
+                case "keydown": {
+                  if (action.key === "Char") {
+                    return;
+                  }
+                  const isClearing = action.key === "Backspace" && (action.metaKey || action.ctrlKey);
+                  if (isClearing) {
+                    dispatch({ type: "CLEAR", reason: "Backspace" });
+                  } else {
+                    dispatch({ type: "CLEAR_CHAR", index, reason: action.key });
+                  }
+                  return;
+                }
+                default:
+                  return;
+              }
+            }
+            if (event.target.validity.valid) {
+              if (event.target.value === "") {
+                let reason = "Backspace";
+                if (isInputEvent(event.nativeEvent)) {
+                  const inputType = event.nativeEvent.inputType;
+                  if (inputType === "deleteContentBackward") {
+                    reason = "Backspace";
+                  } else if (inputType === "deleteByCut") {
+                    reason = "Cut";
+                  }
+                }
+                dispatch({ type: "CLEAR_CHAR", index, reason });
+              } else {
+                dispatch({ type: "SET_CHAR", char: event.target.value, index, event });
+              }
+            } else {
+              const element2 = event.target;
+              requestAnimationFrame(() => {
+                if (element2.ownerDocument.activeElement === element2) {
+                  element2.select();
+                }
+              });
+            }
+          }),
+          onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+            switch (event.key) {
+              case "Delete":
+              case "Backspace": {
+                const currentValue = event.currentTarget.value;
+                if (currentValue === "") {
+                  if (event.key === "Delete") return;
+                  const isClearing = event.metaKey || event.ctrlKey;
+                  if (isClearing) {
+                    dispatch({ type: "CLEAR", reason: "Backspace" });
+                  } else {
+                    const element2 = event.currentTarget;
+                    requestAnimationFrame(() => {
+                      focusInput(collection.from(element2, -1)?.element);
+                    });
+                  }
+                } else {
+                  userActionRef.current = {
+                    type: "keydown",
+                    key: event.key,
+                    metaKey: event.metaKey,
+                    ctrlKey: event.ctrlKey
+                  };
+                  keyboardActionTimeoutRef.current = window.setTimeout(() => {
+                    userActionRef.current = null;
+                  }, 10);
+                }
+                return;
+              }
+              case "Enter": {
+                event.preventDefault();
+                context.attemptSubmit();
+                return;
+              }
+              case "ArrowDown":
+              case "ArrowUp": {
+                if (context.orientation === "horizontal") {
+                  event.preventDefault();
+                }
+                return;
+              }
+              // TODO: Handle left/right arrow keys in vertical writing mode
+              default: {
+                if (event.currentTarget.value === event.key) {
+                  const element2 = event.currentTarget;
+                  event.preventDefault();
+                  focusInput(collection.from(element2, 1)?.element);
+                  return;
+                } else if (
+                  // input already has a value, but...
+                  event.currentTarget.value && // the value is not selected
+                  !(event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd != null && event.currentTarget.selectionEnd > 0)
+                ) {
+                  const attemptedValue = event.key;
+                  if (event.key.length > 1 || event.key === " ") {
+                    return;
+                  } else {
+                    const nextInput = collection.from(event.currentTarget, 1)?.element;
+                    const lastInput = collection.at(-1)?.element;
+                    if (nextInput !== lastInput && event.currentTarget !== lastInput) {
+                      if (event.currentTarget.selectionStart === 0) {
+                        dispatch({ type: "SET_CHAR", char: attemptedValue, index, event });
+                      } else {
+                        dispatch({
+                          type: "SET_CHAR",
+                          char: attemptedValue,
+                          index: index + 1,
+                          event
+                        });
+                      }
+                      userActionRef.current = {
+                        type: "keydown",
+                        key: "Char",
+                        metaKey: event.metaKey,
+                        ctrlKey: event.ctrlKey
+                      };
+                      keyboardActionTimeoutRef.current = window.setTimeout(() => {
+                        userActionRef.current = null;
+                      }, 10);
+                    }
+                  }
+                }
+              }
+            }
+          }),
+          onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
+            if (index > lastSelectableIndex) {
+              event.preventDefault();
+              const element2 = collection.at(lastSelectableIndex)?.element;
+              focusInput(element2);
+            }
+          })
+        }
+      )
+    }
+  ) });
+});
+var Root2 = OneTimePasswordField;
+var Input = OneTimePasswordFieldInput;
+var HiddenInput = OneTimePasswordFieldHiddenInput;
+function isFormElement(element) {
+  return element?.tagName === "FORM";
+}
+function sanitizeValue(value, regexp) {
+  if (Array.isArray(value)) {
+    value = value.join("");
+  }
+  if (regexp) {
+    regexp = new RegExp(regexp);
+    return value.replace(regexp, "").split("").filter(Boolean);
+  }
+  return value.split("").filter(Boolean);
+}
+function focusInput(element) {
+  if (!element) return;
+  if (element.ownerDocument.activeElement === element) {
+    window.requestAnimationFrame(() => {
+      element.select?.();
+    });
+  } else {
+    element.focus();
+  }
+}
+function isInputEvent(event) {
+  return event.type === "input";
+}
+export {
+  HiddenInput,
+  Input,
+  OneTimePasswordField,
+  OneTimePasswordFieldHiddenInput,
+  OneTimePasswordFieldInput,
+  Root2 as Root
+};
+//# sourceMappingURL=index.mjs.map