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

package/dist/index.d.mts

@@ -1,45 +1,130 @@
-import { Primitive } from '@radix-ui/react-primitive';
+import * as Primitive from '@radix-ui/react-primitive';
 import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
 import * as React from 'react';
 
-type InputType = 'password' | 'text';
-type AutoComplete = 'off' | 'one-time-code';
 type InputValidationType = 'alpha' | 'numeric' | 'alphanumeric' | 'none';
-type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
+type RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;
 interface OneTimePasswordFieldOwnProps {
-    onValueChange?: (value: string) => void;
-    id?: string;
-    value?: string;
-    defaultValue?: string;
-    autoSubmit?: boolean;
-    onAutoSubmit?: (value: string) => void;
-    validationType?: InputValidationType;
-    disabled?: boolean;
-    readOnly?: boolean;
+    /**
+     * Specifies what—if any—permission the user agent has to provide automated
+     * assistance in filling out form field values, as well as guidance to the
+     * browser as to the type of information expected in the field. Allows
+     * `"one-time-code"` or `"off"`.
+     *
+     * @defaultValue `"one-time-code"`
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
+     */
     autoComplete?: AutoComplete;
+    /**
+     * Whether or not the first fillable input should be focused on page-load.
+     *
+     * @defaultValue `false`
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus
+     */
     autoFocus?: boolean;
+    /**
+     * Whether or not the component should attempt to automatically submit when
+     * all fields are filled. If the field is associated with an HTML `form`
+     * element, the form's `requestSubmit` method will be called.
+     *
+     * @defaultValue `false`
+     */
+    autoSubmit?: boolean;
+    /**
+     * The initial value of the uncontrolled field.
+     */
+    defaultValue?: string;
+    /**
+     * Indicates the horizontal directionality of the parent element's text.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir
+     */
+    dir?: RovingFocusGroupProps['dir'];
+    /**
+     * Whether or not the the field's input elements are disabled.
+     */
+    disabled?: boolean;
+    /**
+     * A string specifying the `form` element with which the input is associated.
+     * This string's value, if present, must match the id of a `form` element in
+     * the same document.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form
+     */
     form?: string | undefined;
+    /**
+     * A string specifying a name for the input control. This name is submitted
+     * along with the control's value when the form data is submitted.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name
+     */
     name?: string | undefined;
+    /**
+     * When the `autoSubmit` prop is set to `true`, this callback will be fired
+     * before attempting to submit the associated form. It will be called whether
+     * or not a form is located, or if submission is not allowed.
+     */
+    onAutoSubmit?: (value: string) => void;
+    /**
+     * A callback fired when the field's value changes. When the component is
+     * controlled, this should update the state passed to the `value` prop.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Indicates the vertical directionality of the input elements.
+     *
+     * @defaultValue `"horizontal"`
+     */
+    orientation?: RovingFocusGroupProps['orientation'];
+    /**
+     * Defines the text displayed in a form control when the control has no value.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder
+     */
     placeholder?: string | undefined;
-    required?: boolean;
+    /**
+     * Whether or not the input elements can be updated by the user.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly
+     */
+    readOnly?: boolean;
+    /**
+     * Function for custom sanitization when `validationType` is set to `"none"`.
+     * This function will be called before updating values in response to user
+     * interactions.
+     */
+    sanitizeValue?: (value: string) => string;
+    /**
+     * The input type of the field's input elements. Can be `"password"` or `"text"`.
+     */
     type?: InputType;
-    dir?: RovingFocusGroupProps['dir'];
-    orientation?: RovingFocusGroupProps['orientation'];
+    /**
+     * Specifies the type of input validation to be used. Can be `"alpha"`,
+     * `"numeric"`, `"alphanumeric"` or `"none"`.
+     *
+     * @defaultValue `"numeric"`
+     */
+    validationType?: InputValidationType;
+    /**
+     * The controlled value of the field.
+     */
+    value?: string;
 }
-interface OneTimePasswordFieldProps extends OneTimePasswordFieldOwnProps, Omit<React.ComponentPropsWithoutRef<typeof Primitive.div>, keyof OneTimePasswordFieldOwnProps> {
+interface OneTimePasswordFieldProps extends OneTimePasswordFieldOwnProps, Omit<Primitive.PrimitivePropsWithRef<'div'>, keyof OneTimePasswordFieldOwnProps> {
 }
-declare const OneTimePasswordField: React.ForwardRefExoticComponent<OneTimePasswordFieldProps & React.RefAttributes<HTMLDivElement>>;
+declare const OneTimePasswordField: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 interface OneTimePasswordFieldHiddenInputProps extends Omit<React.ComponentProps<'input'>, keyof 'value' | 'defaultValue' | 'type' | 'onChange' | 'readOnly' | 'disabled' | 'autoComplete' | 'autoFocus'> {
 }
 declare const OneTimePasswordFieldHiddenInput: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldHiddenInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-interface OneTimePasswordFieldInputOwnProps {
-    autoComplete?: 'one-time-code' | 'off';
-}
-interface OneTimePasswordFieldInputProps extends OneTimePasswordFieldInputOwnProps, Omit<React.ComponentProps<typeof Primitive.input>, keyof OneTimePasswordFieldInputOwnProps> {
+interface OneTimePasswordFieldInputProps extends Omit<Primitive.PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue' | 'disabled' | 'readOnly' | 'autoComplete' | 'autoFocus' | 'form' | 'name' | 'placeholder' | 'type'> {
+    /**
+     * Callback fired when the user input fails native HTML input validation.
+     */
+    onInvalidChange?: (character: string) => void;
 }
 declare const OneTimePasswordFieldInput: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-declare const Root: React.ForwardRefExoticComponent<OneTimePasswordFieldProps & React.RefAttributes<HTMLDivElement>>;
-declare const Input: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-declare const HiddenInput: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldHiddenInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-export { HiddenInput, Input, type InputValidationType, OneTimePasswordField, OneTimePasswordFieldHiddenInput, type OneTimePasswordFieldHiddenInputProps, OneTimePasswordFieldInput, type OneTimePasswordFieldInputProps, type OneTimePasswordFieldProps, Root };
+type InputType = 'password' | 'text';
+type AutoComplete = 'off' | 'one-time-code';
+
+export { OneTimePasswordFieldHiddenInput as HiddenInput, OneTimePasswordFieldInput as Input, type InputValidationType, OneTimePasswordField, OneTimePasswordFieldHiddenInput, type OneTimePasswordFieldHiddenInputProps, OneTimePasswordFieldInput, type OneTimePasswordFieldInputProps, type OneTimePasswordFieldProps, OneTimePasswordField as Root };

package/dist/index.d.ts

@@ -1,45 +1,130 @@
-import { Primitive } from '@radix-ui/react-primitive';
+import * as Primitive from '@radix-ui/react-primitive';
 import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
 import * as React from 'react';
 
-type InputType = 'password' | 'text';
-type AutoComplete = 'off' | 'one-time-code';
 type InputValidationType = 'alpha' | 'numeric' | 'alphanumeric' | 'none';
-type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
+type RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;
 interface OneTimePasswordFieldOwnProps {
-    onValueChange?: (value: string) => void;
-    id?: string;
-    value?: string;
-    defaultValue?: string;
-    autoSubmit?: boolean;
-    onAutoSubmit?: (value: string) => void;
-    validationType?: InputValidationType;
-    disabled?: boolean;
-    readOnly?: boolean;
+    /**
+     * Specifies what—if any—permission the user agent has to provide automated
+     * assistance in filling out form field values, as well as guidance to the
+     * browser as to the type of information expected in the field. Allows
+     * `"one-time-code"` or `"off"`.
+     *
+     * @defaultValue `"one-time-code"`
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
+     */
     autoComplete?: AutoComplete;
+    /**
+     * Whether or not the first fillable input should be focused on page-load.
+     *
+     * @defaultValue `false`
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus
+     */
     autoFocus?: boolean;
+    /**
+     * Whether or not the component should attempt to automatically submit when
+     * all fields are filled. If the field is associated with an HTML `form`
+     * element, the form's `requestSubmit` method will be called.
+     *
+     * @defaultValue `false`
+     */
+    autoSubmit?: boolean;
+    /**
+     * The initial value of the uncontrolled field.
+     */
+    defaultValue?: string;
+    /**
+     * Indicates the horizontal directionality of the parent element's text.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir
+     */
+    dir?: RovingFocusGroupProps['dir'];
+    /**
+     * Whether or not the the field's input elements are disabled.
+     */
+    disabled?: boolean;
+    /**
+     * A string specifying the `form` element with which the input is associated.
+     * This string's value, if present, must match the id of a `form` element in
+     * the same document.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form
+     */
     form?: string | undefined;
+    /**
+     * A string specifying a name for the input control. This name is submitted
+     * along with the control's value when the form data is submitted.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name
+     */
     name?: string | undefined;
+    /**
+     * When the `autoSubmit` prop is set to `true`, this callback will be fired
+     * before attempting to submit the associated form. It will be called whether
+     * or not a form is located, or if submission is not allowed.
+     */
+    onAutoSubmit?: (value: string) => void;
+    /**
+     * A callback fired when the field's value changes. When the component is
+     * controlled, this should update the state passed to the `value` prop.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Indicates the vertical directionality of the input elements.
+     *
+     * @defaultValue `"horizontal"`
+     */
+    orientation?: RovingFocusGroupProps['orientation'];
+    /**
+     * Defines the text displayed in a form control when the control has no value.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder
+     */
     placeholder?: string | undefined;
-    required?: boolean;
+    /**
+     * Whether or not the input elements can be updated by the user.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly
+     */
+    readOnly?: boolean;
+    /**
+     * Function for custom sanitization when `validationType` is set to `"none"`.
+     * This function will be called before updating values in response to user
+     * interactions.
+     */
+    sanitizeValue?: (value: string) => string;
+    /**
+     * The input type of the field's input elements. Can be `"password"` or `"text"`.
+     */
     type?: InputType;
-    dir?: RovingFocusGroupProps['dir'];
-    orientation?: RovingFocusGroupProps['orientation'];
+    /**
+     * Specifies the type of input validation to be used. Can be `"alpha"`,
+     * `"numeric"`, `"alphanumeric"` or `"none"`.
+     *
+     * @defaultValue `"numeric"`
+     */
+    validationType?: InputValidationType;
+    /**
+     * The controlled value of the field.
+     */
+    value?: string;
 }
-interface OneTimePasswordFieldProps extends OneTimePasswordFieldOwnProps, Omit<React.ComponentPropsWithoutRef<typeof Primitive.div>, keyof OneTimePasswordFieldOwnProps> {
+interface OneTimePasswordFieldProps extends OneTimePasswordFieldOwnProps, Omit<Primitive.PrimitivePropsWithRef<'div'>, keyof OneTimePasswordFieldOwnProps> {
 }
-declare const OneTimePasswordField: React.ForwardRefExoticComponent<OneTimePasswordFieldProps & React.RefAttributes<HTMLDivElement>>;
+declare const OneTimePasswordField: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 interface OneTimePasswordFieldHiddenInputProps extends Omit<React.ComponentProps<'input'>, keyof 'value' | 'defaultValue' | 'type' | 'onChange' | 'readOnly' | 'disabled' | 'autoComplete' | 'autoFocus'> {
 }
 declare const OneTimePasswordFieldHiddenInput: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldHiddenInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-interface OneTimePasswordFieldInputOwnProps {
-    autoComplete?: 'one-time-code' | 'off';
-}
-interface OneTimePasswordFieldInputProps extends OneTimePasswordFieldInputOwnProps, Omit<React.ComponentProps<typeof Primitive.input>, keyof OneTimePasswordFieldInputOwnProps> {
+interface OneTimePasswordFieldInputProps extends Omit<Primitive.PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue' | 'disabled' | 'readOnly' | 'autoComplete' | 'autoFocus' | 'form' | 'name' | 'placeholder' | 'type'> {
+    /**
+     * Callback fired when the user input fails native HTML input validation.
+     */
+    onInvalidChange?: (character: string) => void;
 }
 declare const OneTimePasswordFieldInput: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-declare const Root: React.ForwardRefExoticComponent<OneTimePasswordFieldProps & React.RefAttributes<HTMLDivElement>>;
-declare const Input: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-declare const HiddenInput: React.ForwardRefExoticComponent<Omit<OneTimePasswordFieldHiddenInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-export { HiddenInput, Input, type InputValidationType, OneTimePasswordField, OneTimePasswordFieldHiddenInput, type OneTimePasswordFieldHiddenInputProps, OneTimePasswordFieldInput, type OneTimePasswordFieldInputProps, type OneTimePasswordFieldProps, Root };
+type InputType = 'password' | 'text';
+type AutoComplete = 'off' | 'one-time-code';
+
+export { OneTimePasswordFieldHiddenInput as HiddenInput, OneTimePasswordFieldInput as Input, type InputValidationType, OneTimePasswordField, OneTimePasswordFieldHiddenInput, type OneTimePasswordFieldHiddenInputProps, OneTimePasswordFieldInput, type OneTimePasswordFieldInputProps, type OneTimePasswordFieldProps, OneTimePasswordField as Root };

package/dist/index.js

@@ -31,17 +31,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  HiddenInput: () => HiddenInput,
-  Input: () => Input,
+  HiddenInput: () => OneTimePasswordFieldHiddenInput,
+  Input: () => OneTimePasswordFieldInput,
   OneTimePasswordField: () => OneTimePasswordField,
   OneTimePasswordFieldHiddenInput: () => OneTimePasswordFieldHiddenInput,
   OneTimePasswordFieldInput: () => OneTimePasswordFieldInput,
-  Root: () => Root2
+  Root: () => OneTimePasswordField
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/one-time-password-field.tsx
-var import_react_primitive = require("@radix-ui/react-primitive");
+var Primitive = __toESM(require("@radix-ui/react-primitive"));
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");
 var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
 var import_primitive = require("@radix-ui/primitive");
@@ -74,32 +74,24 @@ var INPUT_VALIDATION_MAP = {
     regexp: /[^a-zA-Z0-9]/g,
     pattern: "[a-zA-Z0-9]{1}",
     inputMode: "text"
-  }
+  },
+  none: null
 };
 var ONE_TIME_PASSWORD_FIELD_NAME = "OneTimePasswordField";
-var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.unstable_createCollection)(
-  ONE_TIME_PASSWORD_FIELD_NAME
-);
+var [Collection, { useCollection, createCollectionScope, useInitCollection }] = (0, import_react_collection.unstable_createCollection)(ONE_TIME_PASSWORD_FIELD_NAME);
 var [createOneTimePasswordFieldContext] = (0, import_react_context.createContextScope)(ONE_TIME_PASSWORD_FIELD_NAME, [
   createCollectionScope,
   import_react_roving_focus.createRovingFocusGroupScope
 ]);
 var useRovingFocusGroupScope = (0, import_react_roving_focus.createRovingFocusGroupScope)();
 var [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] = createOneTimePasswordFieldContext(ONE_TIME_PASSWORD_FIELD_NAME);
-var OneTimePasswordFieldCollectionProvider = ({
-  __scopeOneTimePasswordField,
-  children
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: __scopeOneTimePasswordField, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeOneTimePasswordField, children }) });
-};
-var OneTimePasswordFieldImpl = React.forwardRef(
-  function OneTimePasswordFieldImpl2({
+var OneTimePasswordField = React.forwardRef(
+  function OneTimePasswordFieldImpl({
     __scopeOneTimePasswordField,
-    id,
     defaultValue,
     value: valueProp,
     onValueChange,
-    autoSubmit,
+    autoSubmit = false,
     children,
     onPaste,
     onAutoSubmit,
@@ -110,26 +102,47 @@ var OneTimePasswordFieldImpl = React.forwardRef(
     form,
     name,
     placeholder,
-    required = false,
     type = "password",
     // TODO: Change default to vertical when inputs use vertical writing mode
     orientation = "horizontal",
     dir,
     validationType = "numeric",
+    sanitizeValue: sanitizeValueProp,
     ...domProps
   }, forwardedRef) {
     const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);
     const direction = (0, import_react_direction.useDirection)(dir);
-    const collection = useCollection(__scopeOneTimePasswordField);
-    const validation = validationType in INPUT_VALIDATION_MAP ? INPUT_VALIDATION_MAP[validationType] : void 0;
+    const collectionState = useInitCollection();
+    const [collection] = collectionState;
+    const validation = INPUT_VALIDATION_MAP[validationType] ? INPUT_VALIDATION_MAP[validationType] : null;
+    const sanitizeValue = React.useCallback(
+      (value2) => {
+        if (Array.isArray(value2)) {
+          value2 = value2.map(removeWhitespace).join("");
+        } else {
+          value2 = removeWhitespace(value2);
+        }
+        if (validation) {
+          const regexp = new RegExp(validation.regexp);
+          value2 = value2.replace(regexp, "");
+        } else if (sanitizeValueProp) {
+          value2 = sanitizeValueProp(value2);
+        }
+        return value2.split("");
+      },
+      [validation, sanitizeValueProp]
+    );
     const controlledValue = React.useMemo(() => {
-      return valueProp != null ? sanitizeValue(valueProp, validation?.regexp) : void 0;
-    }, [valueProp, validation?.regexp]);
+      return valueProp != null ? sanitizeValue(valueProp) : void 0;
+    }, [valueProp, sanitizeValue]);
     const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
       caller: "OneTimePasswordField",
       prop: controlledValue,
-      defaultProp: defaultValue != null ? sanitizeValue(defaultValue, validation?.regexp) : [],
-      onChange: (value2) => onValueChange?.(value2.filter(Boolean).join(""))
+      defaultProp: defaultValue != null ? sanitizeValue(defaultValue) : [],
+      onChange: React.useCallback(
+        (value2) => onValueChange?.(value2.join("")),
+        [onValueChange]
+      )
     });
     const dispatch = (0, import_react_use_effect_event.useEffectEvent)((action) => {
       switch (action.type) {
@@ -159,12 +172,8 @@ var OneTimePasswordFieldImpl = React.forwardRef(
             focusInput(next);
             return;
           }
-          const newValue = [
-            //
-            ...value.slice(0, index),
-            char,
-            ...value.slice(index)
-          ];
+          const newValue = [...value];
+          newValue[index] = char;
           const lastElement = collection.at(-1)?.element;
           (0, import_react_dom.flushSync)(() => setValue(newValue));
           if (currentTarget !== lastElement) {
@@ -205,7 +214,7 @@ var OneTimePasswordFieldImpl = React.forwardRef(
         }
         case "PASTE": {
           const { value: pastedValue } = action;
-          const value2 = sanitizeValue(pastedValue, validation?.regexp);
+          const value2 = sanitizeValue(pastedValue);
           if (!value2) {
             return;
           }
@@ -222,9 +231,9 @@ var OneTimePasswordFieldImpl = React.forwardRef(
       }
       if (validationTypeRef.current?.type !== validation.type) {
         validationTypeRef.current = validation;
-        setValue(sanitizeValue(value, validation.regexp));
+        setValue(sanitizeValue(value.join("")));
       }
-    }, [setValue, validation, value]);
+    }, [sanitizeValue, setValue, validation, value]);
     const hiddenInputRef = React.useRef(null);
     const userActionRef = React.useRef(null);
     const rootRef = React.useRef(null);
@@ -285,7 +294,6 @@ var OneTimePasswordFieldImpl = React.forwardRef(
         form,
         name,
         placeholder,
-        required,
         type,
         hiddenInputRef,
         userActionRef,
@@ -294,7 +302,7 @@ var OneTimePasswordFieldImpl = React.forwardRef(
         orientation,
         preHydrationIndexTracker,
         isHydrated,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: __scopeOneTimePasswordField, state: collectionState, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeOneTimePasswordField, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           RovingFocusGroup.Root,
           {
             asChild: true,
@@ -302,7 +310,7 @@ var OneTimePasswordFieldImpl = React.forwardRef(
             orientation,
             dir: direction,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_react_primitive.Primitive.div,
+              Primitive.Root.div,
               {
                 ...domProps,
                 role: "group",
@@ -312,7 +320,7 @@ var OneTimePasswordFieldImpl = React.forwardRef(
                   (event) => {
                     event.preventDefault();
                     const pastedValue = event.clipboardData.getData("Text");
-                    const value2 = sanitizeValue(pastedValue, validation?.regexp);
+                    const value2 = sanitizeValue(pastedValue);
                     if (!value2) {
                       return;
                     }
@@ -323,18 +331,13 @@ var OneTimePasswordFieldImpl = React.forwardRef(
               }
             )
           }
-        )
+        ) }) })
       }
     );
   }
 );
-var OneTimePasswordField = React.forwardRef(
-  function OneTimePasswordField2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OneTimePasswordFieldCollectionProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OneTimePasswordFieldImpl, { ...props, ref }) });
-  }
-);
 var OneTimePasswordFieldHiddenInput = React.forwardRef(function OneTimePasswordFieldHiddenInput2({ __scopeOneTimePasswordField, ...props }, forwardedRef) {
-  const { value, hiddenInputRef } = useOneTimePasswordFieldContext(
+  const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(
     "OneTimePasswordFieldHiddenInput",
     __scopeOneTimePasswordField
   );
@@ -343,20 +346,25 @@ var OneTimePasswordFieldHiddenInput = React.forwardRef(function OneTimePasswordF
     "input",
     {
       ref,
-      ...props,
-      type: "hidden",
-      readOnly: true,
+      name,
       value: value.join("").trim(),
       autoComplete: "off",
       autoFocus: false,
       autoCapitalize: "off",
       autoCorrect: "off",
       autoSave: "off",
-      spellCheck: false
+      spellCheck: false,
+      ...props,
+      type: "hidden",
+      readOnly: true
     }
   );
 });
-var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldInput2({ __scopeOneTimePasswordField, ...props }, forwardedRef) {
+var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldInput2({
+  __scopeOneTimePasswordField,
+  onInvalidChange,
+  ...props
+}, forwardedRef) {
   const {
     value: _value,
     defaultValue: _defaultValue,
@@ -367,7 +375,6 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
     form: _form,
     name: _name,
     placeholder: _placeholder,
-    required: _required,
     type: _type,
     ...domProps
   } = props;
@@ -380,12 +387,16 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
   const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);
   const inputRef = React.useRef(null);
   const [element, setElement] = React.useState(null);
+  let placeholder;
   let index;
   if (!isHydrated) {
     index = preHydrationIndexTracker.current;
     preHydrationIndexTracker.current++;
   } else {
     index = element ? collection.indexOf(element) : -1;
+    if (context.placeholder && context.value.length === 0) {
+      placeholder = context.placeholder[index];
+    }
   }
   const composedInputRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, inputRef, setElement);
   const char = context.value[index] ?? "";
@@ -407,7 +418,7 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
       focusable: !context.disabled && isFocusable,
       active: index === lastSelectableIndex,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_primitive.Primitive.input,
+        Primitive.Root.input,
         {
           ref: composedInputRef,
           type: "text",
@@ -418,6 +429,7 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
           pattern: validation?.pattern,
           readOnly: context.readOnly,
           value: char,
+          placeholder,
           "data-radix-otp-input": "",
           "data-radix-index": index,
           ...domProps,
@@ -448,7 +460,7 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
                     return;
                   }
                   const isClearing = action.key === "Backspace" && (action.metaKey || action.ctrlKey);
-                  if (isClearing) {
+                  if (action.key === "Clear" || isClearing) {
                     dispatch({ type: "CLEAR", reason: "Backspace" });
                   } else {
                     dispatch({ type: "CLEAR_CHAR", index, reason: action.key });
@@ -476,6 +488,7 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
               }
             } else {
               const element2 = event.target;
+              onInvalidChange?.(element2.value);
               requestAnimationFrame(() => {
                 if (element2.ownerDocument.activeElement === element2) {
                   element2.select();
@@ -485,12 +498,13 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
           }),
           onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
             switch (event.key) {
+              case "Clear":
               case "Delete":
               case "Backspace": {
                 const currentValue = event.currentTarget.value;
                 if (currentValue === "") {
                   if (event.key === "Delete") return;
-                  const isClearing = event.metaKey || event.ctrlKey;
+                  const isClearing = event.key === "Clear" || event.metaKey || event.ctrlKey;
                   if (isClearing) {
                     dispatch({ type: "CLEAR", reason: "Backspace" });
                   } else {
@@ -580,21 +594,11 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
     }
   ) });
 });
-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 removeWhitespace(value) {
+  return value.replace(/\s/g, "");
 }
 function focusInput(element) {
   if (!element) return;