@arun-dev/headless 4.18.0 → 4.19.1

package/dist/checkbox/index.cjs

@@ -32,7 +32,7 @@ __export(index_parts_exports, {
 });
 
 // src/checkbox/CheckboxRoot.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/core/useControlled.ts
 var import_react = require("react");
@@ -68,7 +68,24 @@ function useControlled({
 }
 
 // src/core/useFormReset.ts
+var import_react3 = require("react");
+
+// src/core/useLatest.ts
 var import_react2 = require("react");
+function useLatest(value) {
+  const ref = (0, import_react2.useRef)(value);
+  (0, import_react2.useLayoutEffect)(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+function afterReset(event, work) {
+  setTimeout(() => {
+    if (!event.defaultPrevented) work();
+  }, 0);
+}
+
+// src/core/useFormReset.ts
 function useFormReset({
   elementRef,
   inputRef,
@@ -76,25 +93,26 @@ function useFormReset({
   inputChecked,
   commit
 }) {
-  const { current: initialValue } = (0, import_react2.useRef)(value);
-  (0, import_react2.useEffect)(() => {
+  const { current: initialValue } = (0, import_react3.useRef)(value);
+  const latest = useLatest({ value, inputChecked, commit });
+  (0, import_react3.useEffect)(() => {
     const form = elementRef.current?.form;
     if (!form) return;
     function onReset(event) {
-      queueMicrotask(() => {
-        if (event.defaultPrevented) return;
-        if (inputRef.current) inputRef.current.checked = inputChecked;
-        if (value === initialValue) return;
-        commit(initialValue);
+      afterReset(event, () => {
+        const { value: current, inputChecked: checked, commit: set } = latest.current;
+        if (inputRef.current) inputRef.current.checked = checked;
+        if (current === initialValue) return;
+        set(initialValue);
       });
     }
     form.addEventListener("reset", onReset);
     return () => form.removeEventListener("reset", onReset);
-  }, [elementRef, inputRef, value, inputChecked, commit, initialValue]);
+  }, [elementRef, inputRef, latest, initialValue]);
 }
 
 // src/core/useRender.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/core/mergeProps.ts
 function isEventHandler(key) {
@@ -176,17 +194,17 @@ function useRender({
   consumerProps
 }) {
   const merged = mergeProps(props, consumerProps);
-  if ((0, import_react3.isValidElement)(render)) {
-    return (0, import_react3.cloneElement)(render, mergeProps(merged, render.props));
+  if ((0, import_react4.isValidElement)(render)) {
+    return (0, import_react4.cloneElement)(render, mergeProps(merged, render.props));
   }
-  return (0, import_react3.createElement)(defaultTagName, merged);
+  return (0, import_react4.createElement)(defaultTagName, merged);
 }
 
 // src/checkbox/CheckboxRootContext.ts
-var import_react4 = require("react");
-var CheckboxRootContext = (0, import_react4.createContext)(null);
+var import_react5 = require("react");
+var CheckboxRootContext = (0, import_react5.createContext)(null);
 function useCheckboxRootContext() {
-  const context = (0, import_react4.useContext)(CheckboxRootContext);
+  const context = (0, import_react5.useContext)(CheckboxRootContext);
   if (context === null) {
     throw new Error("<Checkbox.Indicator> must be rendered inside <Checkbox.Root>.");
   }
@@ -223,16 +241,16 @@ function CheckboxRoot({
     name: "Checkbox.Root",
     state: "checked"
   });
-  const commitChecked = (0, import_react5.useCallback)(
+  const commitChecked = (0, import_react6.useCallback)(
     (next) => {
       setChecked(next);
       onCheckedChange?.(next);
     },
     [setChecked, onCheckedChange]
   );
-  const state = (0, import_react5.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
-  const elementRef = (0, import_react5.useRef)(null);
-  const inputRef = (0, import_react5.useRef)(null);
+  const state = (0, import_react6.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
+  const elementRef = (0, import_react6.useRef)(null);
+  const inputRef = (0, import_react6.useRef)(null);
   const submitted = checked === true;
   useFormReset({
     elementRef,

package/dist/checkbox/index.js

@@ -1,6 +1,7 @@
 import {
   useFormReset
-} from "../chunk-IWUVUY76.js";
+} from "../chunk-FDGT4JPK.js";
+import "../chunk-JJ5FACZU.js";
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";

package/dist/{chunk-IWUVUY76.js → chunk-FDGT4JPK.js}

@@ -1,3 +1,8 @@
+import {
+  afterReset,
+  useLatest
+} from "./chunk-JJ5FACZU.js";
+
 // src/core/useFormReset.ts
 import { useEffect, useRef } from "react";
 function useFormReset({
@@ -8,20 +13,21 @@ function useFormReset({
   commit
 }) {
   const { current: initialValue } = useRef(value);
+  const latest = useLatest({ value, inputChecked, commit });
   useEffect(() => {
     const form = elementRef.current?.form;
     if (!form) return;
     function onReset(event) {
-      queueMicrotask(() => {
-        if (event.defaultPrevented) return;
-        if (inputRef.current) inputRef.current.checked = inputChecked;
-        if (value === initialValue) return;
-        commit(initialValue);
+      afterReset(event, () => {
+        const { value: current, inputChecked: checked, commit: set } = latest.current;
+        if (inputRef.current) inputRef.current.checked = checked;
+        if (current === initialValue) return;
+        set(initialValue);
       });
     }
     form.addEventListener("reset", onReset);
     return () => form.removeEventListener("reset", onReset);
-  }, [elementRef, inputRef, value, inputChecked, commit, initialValue]);
+  }, [elementRef, inputRef, latest, initialValue]);
 }
 
 export {

package/dist/chunk-JJ5FACZU.js

@@ -0,0 +1,19 @@
+// src/core/useLatest.ts
+import { useLayoutEffect, useRef } from "react";
+function useLatest(value) {
+  const ref = useRef(value);
+  useLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+function afterReset(event, work) {
+  setTimeout(() => {
+    if (!event.defaultPrevented) work();
+  }, 0);
+}
+
+export {
+  useLatest,
+  afterReset
+};

package/dist/otp-input/index.cjs

@@ -33,7 +33,7 @@ __export(index_parts_exports, {
 });
 
 // src/otp-input/OtpInputRoot.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/core/useControlled.ts
 var import_react = require("react");
@@ -68,8 +68,23 @@ function useControlled({
   return [value, setValue];
 }
 
-// src/core/useRender.ts
+// src/core/useLatest.ts
 var import_react2 = require("react");
+function useLatest(value) {
+  const ref = (0, import_react2.useRef)(value);
+  (0, import_react2.useLayoutEffect)(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+function afterReset(event, work) {
+  setTimeout(() => {
+    if (!event.defaultPrevented) work();
+  }, 0);
+}
+
+// src/core/useRender.ts
+var import_react3 = require("react");
 
 // src/core/mergeProps.ts
 function isEventHandler(key) {
@@ -151,28 +166,36 @@ function useRender({
   consumerProps
 }) {
   const merged = mergeProps(props, consumerProps);
-  if ((0, import_react2.isValidElement)(render)) {
-    return (0, import_react2.cloneElement)(render, mergeProps(merged, render.props));
+  if ((0, import_react3.isValidElement)(render)) {
+    return (0, import_react3.cloneElement)(render, mergeProps(merged, render.props));
   }
-  return (0, import_react2.createElement)(defaultTagName, merged);
+  return (0, import_react3.createElement)(defaultTagName, merged);
 }
 
 // src/otp-input/OtpInputRootContext.ts
-var import_react3 = require("react");
-var OtpInputRootContext = (0, import_react3.createContext)(null);
+var import_react4 = require("react");
+var OtpInputRootContext = (0, import_react4.createContext)(null);
 function useOtpInputRootContext(part) {
-  const context = (0, import_react3.useContext)(OtpInputRootContext);
+  const context = (0, import_react4.useContext)(OtpInputRootContext);
   if (context === null) {
     throw new Error(`<OtpInput.${part}> must be rendered inside <OtpInput.Root>.`);
   }
   return context;
 }
+var GAP = " ";
 function sanitize(text, validationType) {
   return validationType === "numeric" ? text.replace(/\D/g, "") : text.replace(/[^A-Za-z0-9]/g, "");
 }
+function normalize(text, validationType, length) {
+  const allowed = validationType === "numeric" ? /[^\d ]/g : /[^A-Za-z0-9 ]/g;
+  return text.replace(allowed, "").slice(0, length).trimEnd();
+}
+function isComplete(value, length) {
+  return value.length === length && !value.includes(GAP);
+}
 function otpInputDataAttributes({ value, length, disabled }) {
   return {
-    "data-complete": value.length === length ? "" : void 0,
+    "data-complete": isComplete(value, length) ? "" : void 0,
     "data-disabled": disabled ? "" : void 0
   };
 }
@@ -183,6 +206,7 @@ function OtpInputRoot({
   value: valueProp,
   defaultValue,
   onValueChange,
+  onComplete,
   length = 6,
   validationType = "numeric",
   disabled = false,
@@ -197,23 +221,24 @@ function OtpInputRoot({
     name: "OtpInput.Root",
     state: "value"
   });
-  const commit = (0, import_react4.useCallback)(
+  const commit = (0, import_react5.useCallback)(
     (next) => {
-      const clean = sanitize(next, validationType).slice(0, length);
+      const clean = normalize(next, validationType, length);
       if (clean === value) return;
       setValue(clean);
       onValueChange?.(clean);
+      if (isComplete(clean, length)) onComplete?.(clean);
     },
-    [validationType, length, value, setValue, onValueChange]
+    [validationType, length, value, setValue, onValueChange, onComplete]
   );
-  const [selection, setSelection] = (0, import_react4.useState)(null);
-  const inputRef = (0, import_react4.useRef)(null);
-  const slotsRef = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
-  const registerSlot = (0, import_react4.useCallback)((index, element2) => {
+  const [selection, setSelection] = (0, import_react5.useState)(null);
+  const inputRef = (0, import_react5.useRef)(null);
+  const slotsRef = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+  const registerSlot = (0, import_react5.useCallback)((index, element2) => {
     if (element2) slotsRef.current.set(index, element2);
     else slotsRef.current.delete(index);
   }, []);
-  const slotAt = (0, import_react4.useCallback)((clientX) => {
+  const slotAt = (0, import_react5.useCallback)((clientX) => {
     let nearest = null;
     let distance = Infinity;
     for (const [index, element2] of slotsRef.current) {
@@ -226,19 +251,18 @@ function OtpInputRoot({
     }
     return nearest;
   }, []);
-  const { current: initialValue } = (0, import_react4.useRef)(value);
-  (0, import_react4.useEffect)(() => {
+  const { current: initialValue } = (0, import_react5.useRef)(value);
+  const latest = useLatest(commit);
+  (0, import_react5.useEffect)(() => {
     const form = inputRef.current?.form;
     if (!form) return;
     function onReset(event) {
-      queueMicrotask(() => {
-        if (!event.defaultPrevented) commit(initialValue);
-      });
+      afterReset(event, () => latest.current(initialValue));
     }
     form.addEventListener("reset", onReset);
     return () => form.removeEventListener("reset", onReset);
-  }, [commit, initialValue]);
-  const context = (0, import_react4.useMemo)(
+  }, [latest, initialValue]);
+  const context = (0, import_react5.useMemo)(
     () => ({
       value,
       length,
@@ -267,6 +291,7 @@ function OtpInputRoot({
 }
 
 // src/otp-input/OtpInputInput.tsx
+var import_react6 = require("react");
 function OtpInputInput({ render, ...rest }) {
   const { value, length, disabled, validationType, setSelection, commit, inputRef, slotAt } = useOtpInputRootContext("Input");
   function select(input, index) {
@@ -279,6 +304,48 @@ function OtpInputInput({ render, ...rest }) {
   function report(input) {
     setSelection({ start: input.selectionStart ?? 0, end: input.selectionEnd ?? 0 });
   }
+  const pendingCaret = (0, import_react6.useRef)(null);
+  (0, import_react6.useLayoutEffect)(() => {
+    const input = inputRef.current;
+    const at = pendingCaret.current;
+    pendingCaret.current = null;
+    if (input && at !== null && input.ownerDocument.activeElement === input) select(input, at);
+  });
+  function edit(next, caret) {
+    pendingCaret.current = caret;
+    commit(next);
+  }
+  const cleared = (index) => value.slice(0, index) + GAP + value.slice(index + 1);
+  function onDelete(event, input) {
+    const start = input.selectionStart ?? 0;
+    const end = input.selectionEnd ?? start;
+    event.preventDefault();
+    if (end > start + 1) {
+      edit(value.slice(0, start) + GAP.repeat(end - start) + value.slice(end), start);
+    } else if (end === start + 1 && value.charAt(start) !== GAP) {
+      edit(cleared(start), start);
+    } else if (event.inputType.includes("Backward") && start > 0) {
+      edit(cleared(start - 1), start - 1);
+    }
+  }
+  const beforeInput = (0, import_react6.useRef)(() => {
+  });
+  beforeInput.current = (event) => {
+    const input = event.currentTarget;
+    if (event.inputType.startsWith("delete") && event.inputType !== "deleteByCut") {
+      onDelete(event, input);
+    } else if (event.inputType === "insertText") {
+      const typed = event.data ?? "";
+      if (typed.length > 0 && sanitize(typed, validationType) !== typed) event.preventDefault();
+    }
+  };
+  (0, import_react6.useEffect)(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const listener = (event) => beforeInput.current(event);
+    input.addEventListener("beforeinput", listener);
+    return () => input.removeEventListener("beforeinput", listener);
+  }, [inputRef]);
   function syncSelection(event) {
     const input = event.currentTarget;
     const start = input.selectionStart ?? 0;
@@ -301,12 +368,6 @@ function OtpInputInput({ render, ...rest }) {
       maxLength: length,
       pattern: validationType === "numeric" ? `\\d{${length}}` : `[A-Za-z0-9]{${length}}`,
       disabled: disabled || void 0,
-      onBeforeInput(event) {
-        const typed = event.data;
-        if (typed && typed.length === 1 && !sanitize(typed, validationType)) {
-          event.preventDefault();
-        }
-      },
       onChange(event) {
         commit(event.currentTarget.value);
         syncSelection(event);
@@ -317,12 +378,16 @@ function OtpInputInput({ render, ...rest }) {
         if (!pasted) return;
         const input = event.currentTarget;
         if (pasted.length >= length) {
-          commit(pasted);
+          edit(pasted, length);
           return;
         }
         const start = input.selectionStart ?? value.length;
         const end = input.selectionEnd ?? start;
-        commit(value.slice(0, start) + pasted + value.slice(end));
+        const reach = start + pasted.length;
+        edit(
+          value.slice(0, start) + pasted + GAP.repeat(Math.max(0, end - reach)) + value.slice(Math.max(end, reach)),
+          reach
+        );
       },
       onKeyDown(event) {
         if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
@@ -333,13 +398,13 @@ function OtpInputInput({ render, ...rest }) {
         select(input, event.key === "ArrowLeft" ? at - 1 : at + 1);
       },
       onClick(event) {
-        if (event.detail > 1) return;
         const index = slotAt(event.clientX);
         if (index !== null) select(event.currentTarget, index);
       },
       onSelect: syncSelection,
       onFocus(event) {
-        select(event.currentTarget, event.currentTarget.value.length);
+        const gap = value.indexOf(GAP);
+        select(event.currentTarget, gap === -1 ? value.length : gap);
       },
       onBlur() {
         setSelection(null);
@@ -350,15 +415,15 @@ function OtpInputInput({ render, ...rest }) {
 }
 
 // src/otp-input/OtpInputSlot.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 function OtpInputSlot({ index, className, children, render, ...rest }) {
   const { value, length, disabled, selection, registerSlot } = useOtpInputRootContext("Slot");
-  const char = value.charAt(index);
+  const char = value.charAt(index) === GAP ? "" : value.charAt(index);
   let active = false;
   if (selection) {
     active = selection.start === selection.end ? index === Math.min(selection.start, length - 1) : index >= selection.start && index < selection.end;
   }
-  const ref = (0, import_react5.useCallback)(
+  const ref = (0, import_react7.useCallback)(
     (element) => registerSlot(index, element),
     [registerSlot, index]
   );

package/dist/otp-input/index.d.cts

@@ -20,8 +20,18 @@ type OtpInputRootOwnProps = {
     value?: string;
     /** Initial value when uncontrolled. Read once, at mount. */
     defaultValue?: string;
-    /** Called with the code after every change, partial or complete. */
+    /**
+     * Called with the code after every change, partial or complete. A box emptied before the end
+     * is a space — `"123 56"` — so check completeness with a pattern such as `/^\d{6}$/`, not
+     * the length alone.
+     */
     onValueChange?: (value: string) => void;
+    /**
+     * Called with the code after a change that leaves it complete: every slot filled, no gap.
+     * Typing the last digit, pasting a whole code and filling an emptied slot all count; a change
+     * that leaves a slot empty does not. Use it to verify as soon as the code is in.
+     */
+    onComplete?: (value: string) => void;
     /** How many characters the code has, and so how many slots it shows. Defaults to 6. */
     length?: number;
     /**
@@ -48,7 +58,7 @@ type OtpInputRootProps = OtpInputRootOwnProps & Omit<ComponentPropsWithRef<'div'
  * Holds the value through `useControlled`. The input reports changes, and the Root keeps only
  * the characters `validationType` allows, up to `length`.
  */
-declare function OtpInputRoot({ value: valueProp, defaultValue, onValueChange, length, validationType, disabled, className, children, render, ...rest }: OtpInputRootProps): react.JSX.Element;
+declare function OtpInputRoot({ value: valueProp, defaultValue, onValueChange, onComplete, length, validationType, disabled, className, children, render, ...rest }: OtpInputRootProps): react.JSX.Element;
 
 type OtpInputInputOwnProps = {
     /** Element to render instead of the default `<input>`. Props and ref are merged onto it. */
@@ -66,7 +76,11 @@ type OtpInputInputProps = OtpInputInputOwnProps & Omit<ComponentPropsWithRef<'in
  *
  * The caret always covers one character, so typing replaces the character in the active slot
  * and moves on, and the last slot of a full code is replaced rather than refused. Left and
- * Right move one slot; Backspace and Delete are the platform's.
+ * Right move one slot.
+ *
+ * Delete and Backspace empty a slot in place: the characters after it keep their slots, and
+ * the caret stays, so the next character fills the same slot. Backspace on an empty slot
+ * empties the one before it; Delete on an empty slot does nothing.
  *
  * Carries `maxLength` and a `pattern` of exactly `length` allowed characters, so the browser's
  * own validation reports a code that is too short. Both can be overridden.

package/dist/otp-input/index.d.ts

@@ -20,8 +20,18 @@ type OtpInputRootOwnProps = {
     value?: string;
     /** Initial value when uncontrolled. Read once, at mount. */
     defaultValue?: string;
-    /** Called with the code after every change, partial or complete. */
+    /**
+     * Called with the code after every change, partial or complete. A box emptied before the end
+     * is a space — `"123 56"` — so check completeness with a pattern such as `/^\d{6}$/`, not
+     * the length alone.
+     */
     onValueChange?: (value: string) => void;
+    /**
+     * Called with the code after a change that leaves it complete: every slot filled, no gap.
+     * Typing the last digit, pasting a whole code and filling an emptied slot all count; a change
+     * that leaves a slot empty does not. Use it to verify as soon as the code is in.
+     */
+    onComplete?: (value: string) => void;
     /** How many characters the code has, and so how many slots it shows. Defaults to 6. */
     length?: number;
     /**
@@ -48,7 +58,7 @@ type OtpInputRootProps = OtpInputRootOwnProps & Omit<ComponentPropsWithRef<'div'
  * Holds the value through `useControlled`. The input reports changes, and the Root keeps only
  * the characters `validationType` allows, up to `length`.
  */
-declare function OtpInputRoot({ value: valueProp, defaultValue, onValueChange, length, validationType, disabled, className, children, render, ...rest }: OtpInputRootProps): react.JSX.Element;
+declare function OtpInputRoot({ value: valueProp, defaultValue, onValueChange, onComplete, length, validationType, disabled, className, children, render, ...rest }: OtpInputRootProps): react.JSX.Element;
 
 type OtpInputInputOwnProps = {
     /** Element to render instead of the default `<input>`. Props and ref are merged onto it. */
@@ -66,7 +76,11 @@ type OtpInputInputProps = OtpInputInputOwnProps & Omit<ComponentPropsWithRef<'in
  *
  * The caret always covers one character, so typing replaces the character in the active slot
  * and moves on, and the last slot of a full code is replaced rather than refused. Left and
- * Right move one slot; Backspace and Delete are the platform's.
+ * Right move one slot.
+ *
+ * Delete and Backspace empty a slot in place: the characters after it keep their slots, and
+ * the caret stays, so the next character fills the same slot. Backspace on an empty slot
+ * empties the one before it; Delete on an empty slot does nothing.
  *
  * Carries `maxLength` and a `pattern` of exactly `length` allowed characters, so the browser's
  * own validation reports a code that is too short. Both can be overridden.

package/dist/otp-input/index.js

@@ -1,3 +1,7 @@
+import {
+  afterReset,
+  useLatest
+} from "../chunk-JJ5FACZU.js";
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";
@@ -27,12 +31,20 @@ function useOtpInputRootContext(part) {
   }
   return context;
 }
+var GAP = " ";
 function sanitize(text, validationType) {
   return validationType === "numeric" ? text.replace(/\D/g, "") : text.replace(/[^A-Za-z0-9]/g, "");
 }
+function normalize(text, validationType, length) {
+  const allowed = validationType === "numeric" ? /[^\d ]/g : /[^A-Za-z0-9 ]/g;
+  return text.replace(allowed, "").slice(0, length).trimEnd();
+}
+function isComplete(value, length) {
+  return value.length === length && !value.includes(GAP);
+}
 function otpInputDataAttributes({ value, length, disabled }) {
   return {
-    "data-complete": value.length === length ? "" : void 0,
+    "data-complete": isComplete(value, length) ? "" : void 0,
     "data-disabled": disabled ? "" : void 0
   };
 }
@@ -43,6 +55,7 @@ function OtpInputRoot({
   value: valueProp,
   defaultValue,
   onValueChange,
+  onComplete,
   length = 6,
   validationType = "numeric",
   disabled = false,
@@ -59,12 +72,13 @@ function OtpInputRoot({
   });
   const commit = useCallback(
     (next) => {
-      const clean = sanitize(next, validationType).slice(0, length);
+      const clean = normalize(next, validationType, length);
       if (clean === value) return;
       setValue(clean);
       onValueChange?.(clean);
+      if (isComplete(clean, length)) onComplete?.(clean);
     },
-    [validationType, length, value, setValue, onValueChange]
+    [validationType, length, value, setValue, onValueChange, onComplete]
   );
   const [selection, setSelection] = useState(null);
   const inputRef = useRef(null);
@@ -87,17 +101,16 @@ function OtpInputRoot({
     return nearest;
   }, []);
   const { current: initialValue } = useRef(value);
+  const latest = useLatest(commit);
   useEffect(() => {
     const form = inputRef.current?.form;
     if (!form) return;
     function onReset(event) {
-      queueMicrotask(() => {
-        if (!event.defaultPrevented) commit(initialValue);
-      });
+      afterReset(event, () => latest.current(initialValue));
     }
     form.addEventListener("reset", onReset);
     return () => form.removeEventListener("reset", onReset);
-  }, [commit, initialValue]);
+  }, [latest, initialValue]);
   const context = useMemo(
     () => ({
       value,
@@ -127,6 +140,7 @@ function OtpInputRoot({
 }
 
 // src/otp-input/OtpInputInput.tsx
+import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2 } from "react";
 function OtpInputInput({ render, ...rest }) {
   const { value, length, disabled, validationType, setSelection, commit, inputRef, slotAt } = useOtpInputRootContext("Input");
   function select(input, index) {
@@ -139,6 +153,48 @@ function OtpInputInput({ render, ...rest }) {
   function report(input) {
     setSelection({ start: input.selectionStart ?? 0, end: input.selectionEnd ?? 0 });
   }
+  const pendingCaret = useRef2(null);
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    const at = pendingCaret.current;
+    pendingCaret.current = null;
+    if (input && at !== null && input.ownerDocument.activeElement === input) select(input, at);
+  });
+  function edit(next, caret) {
+    pendingCaret.current = caret;
+    commit(next);
+  }
+  const cleared = (index) => value.slice(0, index) + GAP + value.slice(index + 1);
+  function onDelete(event, input) {
+    const start = input.selectionStart ?? 0;
+    const end = input.selectionEnd ?? start;
+    event.preventDefault();
+    if (end > start + 1) {
+      edit(value.slice(0, start) + GAP.repeat(end - start) + value.slice(end), start);
+    } else if (end === start + 1 && value.charAt(start) !== GAP) {
+      edit(cleared(start), start);
+    } else if (event.inputType.includes("Backward") && start > 0) {
+      edit(cleared(start - 1), start - 1);
+    }
+  }
+  const beforeInput = useRef2(() => {
+  });
+  beforeInput.current = (event) => {
+    const input = event.currentTarget;
+    if (event.inputType.startsWith("delete") && event.inputType !== "deleteByCut") {
+      onDelete(event, input);
+    } else if (event.inputType === "insertText") {
+      const typed = event.data ?? "";
+      if (typed.length > 0 && sanitize(typed, validationType) !== typed) event.preventDefault();
+    }
+  };
+  useEffect2(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const listener = (event) => beforeInput.current(event);
+    input.addEventListener("beforeinput", listener);
+    return () => input.removeEventListener("beforeinput", listener);
+  }, [inputRef]);
   function syncSelection(event) {
     const input = event.currentTarget;
     const start = input.selectionStart ?? 0;
@@ -161,12 +217,6 @@ function OtpInputInput({ render, ...rest }) {
       maxLength: length,
       pattern: validationType === "numeric" ? `\\d{${length}}` : `[A-Za-z0-9]{${length}}`,
       disabled: disabled || void 0,
-      onBeforeInput(event) {
-        const typed = event.data;
-        if (typed && typed.length === 1 && !sanitize(typed, validationType)) {
-          event.preventDefault();
-        }
-      },
       onChange(event) {
         commit(event.currentTarget.value);
         syncSelection(event);
@@ -177,12 +227,16 @@ function OtpInputInput({ render, ...rest }) {
         if (!pasted) return;
         const input = event.currentTarget;
         if (pasted.length >= length) {
-          commit(pasted);
+          edit(pasted, length);
           return;
         }
         const start = input.selectionStart ?? value.length;
         const end = input.selectionEnd ?? start;
-        commit(value.slice(0, start) + pasted + value.slice(end));
+        const reach = start + pasted.length;
+        edit(
+          value.slice(0, start) + pasted + GAP.repeat(Math.max(0, end - reach)) + value.slice(Math.max(end, reach)),
+          reach
+        );
       },
       onKeyDown(event) {
         if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
@@ -193,13 +247,13 @@ function OtpInputInput({ render, ...rest }) {
         select(input, event.key === "ArrowLeft" ? at - 1 : at + 1);
       },
       onClick(event) {
-        if (event.detail > 1) return;
         const index = slotAt(event.clientX);
         if (index !== null) select(event.currentTarget, index);
       },
       onSelect: syncSelection,
       onFocus(event) {
-        select(event.currentTarget, event.currentTarget.value.length);
+        const gap = value.indexOf(GAP);
+        select(event.currentTarget, gap === -1 ? value.length : gap);
       },
       onBlur() {
         setSelection(null);
@@ -213,7 +267,7 @@ function OtpInputInput({ render, ...rest }) {
 import { useCallback as useCallback2 } from "react";
 function OtpInputSlot({ index, className, children, render, ...rest }) {
   const { value, length, disabled, selection, registerSlot } = useOtpInputRootContext("Slot");
-  const char = value.charAt(index);
+  const char = value.charAt(index) === GAP ? "" : value.charAt(index);
   let active = false;
   if (selection) {
     active = selection.start === selection.end ? index === Math.min(selection.start, length - 1) : index >= selection.start && index < selection.end;

package/dist/radio-group/index.cjs

@@ -32,19 +32,34 @@ __export(index_parts_exports, {
 });
 
 // src/radio-group/RadioGroupRoot.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
-// src/core/useControlled.ts
+// src/core/useLatest.ts
 var import_react = require("react");
+function useLatest(value) {
+  const ref = (0, import_react.useRef)(value);
+  (0, import_react.useLayoutEffect)(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+function afterReset(event, work) {
+  setTimeout(() => {
+    if (!event.defaultPrevented) work();
+  }, 0);
+}
+
+// src/core/useControlled.ts
+var import_react2 = require("react");
 function useControlled({
   controlled,
   default: defaultValue,
   name = "Component",
   state = "value"
 }) {
-  const { current: isControlled } = (0, import_react.useRef)(controlled !== void 0);
-  const [uncontrolled, setUncontrolled] = (0, import_react.useState)(defaultValue);
-  const defaultRef = (0, import_react.useRef)(defaultValue);
+  const { current: isControlled } = (0, import_react2.useRef)(controlled !== void 0);
+  const [uncontrolled, setUncontrolled] = (0, import_react2.useState)(defaultValue);
+  const defaultRef = (0, import_react2.useRef)(defaultValue);
   const value = isControlled ? controlled : uncontrolled;
   if (process.env.NODE_ENV !== "production") {
     if (isControlled !== (controlled !== void 0)) {
@@ -58,7 +73,7 @@ function useControlled({
       );
     }
   }
-  const setValue = (0, import_react.useCallback)(
+  const setValue = (0, import_react2.useCallback)(
     (next) => {
       if (!isControlled) setUncontrolled(next);
     },
@@ -68,7 +83,7 @@ function useControlled({
 }
 
 // src/core/useRender.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/core/mergeProps.ts
 function isEventHandler(key) {
@@ -150,17 +165,17 @@ function useRender({
   consumerProps
 }) {
   const merged = mergeProps(props, consumerProps);
-  if ((0, import_react2.isValidElement)(render)) {
-    return (0, import_react2.cloneElement)(render, mergeProps(merged, render.props));
+  if ((0, import_react3.isValidElement)(render)) {
+    return (0, import_react3.cloneElement)(render, mergeProps(merged, render.props));
   }
-  return (0, import_react2.createElement)(defaultTagName, merged);
+  return (0, import_react3.createElement)(defaultTagName, merged);
 }
 
 // src/radio-group/RadioGroupRootContext.ts
-var import_react3 = require("react");
-var RadioGroupRootContext = (0, import_react3.createContext)(null);
+var import_react4 = require("react");
+var RadioGroupRootContext = (0, import_react4.createContext)(null);
 function useRadioGroupRootContext() {
-  const context = (0, import_react3.useContext)(RadioGroupRootContext);
+  const context = (0, import_react4.useContext)(RadioGroupRootContext);
   if (context === null) {
     throw new Error("<RadioGroup.Item> must be rendered inside <RadioGroup.Root>.");
   }
@@ -208,34 +223,35 @@ function RadioGroupRoot({
     name: "RadioGroup.Root",
     state: "value"
   });
-  const generatedName = (0, import_react4.useId)();
+  const generatedName = (0, import_react5.useId)();
   const name = nameProp ?? generatedName;
-  const commitValue = (0, import_react4.useCallback)(
+  const commitValue = (0, import_react5.useCallback)(
     (next) => {
       setValue(next);
       onValueChange?.(next);
     },
     [setValue, onValueChange]
   );
-  const elementRef = (0, import_react4.useRef)(null);
-  const { current: initialValue } = (0, import_react4.useRef)(value);
-  (0, import_react4.useEffect)(() => {
+  const elementRef = (0, import_react5.useRef)(null);
+  const { current: initialValue } = (0, import_react5.useRef)(value);
+  const latest = useLatest({ value, commit: commitValue });
+  (0, import_react5.useEffect)(() => {
     const owner = radiosIn(elementRef.current, name)[0]?.form;
     if (!owner) return;
     function onReset(event) {
-      queueMicrotask(() => {
-        if (event.defaultPrevented) return;
+      afterReset(event, () => {
+        const { value: current, commit } = latest.current;
         for (const input of radiosIn(elementRef.current, name)) {
-          input.checked = input.value === value;
+          input.checked = input.value === current;
         }
-        if (value === initialValue) return;
-        commitValue(initialValue);
+        if (current === initialValue) return;
+        commit(initialValue);
       });
     }
     owner.addEventListener("reset", onReset);
     return () => owner.removeEventListener("reset", onReset);
-  }, [name, value, commitValue, initialValue]);
-  const state = (0, import_react4.useMemo)(
+  }, [name, latest, initialValue]);
+  const state = (0, import_react5.useMemo)(
     () => ({ value, disabled, required, name, form, select: commitValue }),
     [value, disabled, required, name, form, commitValue]
   );
@@ -257,7 +273,7 @@ function RadioGroupRoot({
 }
 
 // src/radio-group/RadioGroupItem.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 function RadioGroupItem({
   value,
   disabled: disabledProp = false,
@@ -268,7 +284,7 @@ function RadioGroupItem({
   const group = useRadioGroupRootContext();
   const disabled = group.disabled || disabledProp;
   const checked = group.value === value;
-  const state = (0, import_react5.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
+  const state = (0, import_react6.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
   return useRender({
     render,
     defaultTagName: "input",

package/dist/radio-group/index.js

@@ -1,3 +1,7 @@
+import {
+  afterReset,
+  useLatest
+} from "../chunk-JJ5FACZU.js";
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";
@@ -79,22 +83,23 @@ function RadioGroupRoot({
   );
   const elementRef = useRef(null);
   const { current: initialValue } = useRef(value);
+  const latest = useLatest({ value, commit: commitValue });
   useEffect(() => {
     const owner = radiosIn(elementRef.current, name)[0]?.form;
     if (!owner) return;
     function onReset(event) {
-      queueMicrotask(() => {
-        if (event.defaultPrevented) return;
+      afterReset(event, () => {
+        const { value: current, commit } = latest.current;
         for (const input of radiosIn(elementRef.current, name)) {
-          input.checked = input.value === value;
+          input.checked = input.value === current;
         }
-        if (value === initialValue) return;
-        commitValue(initialValue);
+        if (current === initialValue) return;
+        commit(initialValue);
       });
     }
     owner.addEventListener("reset", onReset);
     return () => owner.removeEventListener("reset", onReset);
-  }, [name, value, commitValue, initialValue]);
+  }, [name, latest, initialValue]);
   const state = useMemo(
     () => ({ value, disabled, required, name, form, select: commitValue }),
     [value, disabled, required, name, form, commitValue]

package/dist/switch/index.cjs

@@ -32,7 +32,7 @@ __export(index_parts_exports, {
 });
 
 // src/switch/SwitchRoot.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/core/useControlled.ts
 var import_react = require("react");
@@ -68,7 +68,24 @@ function useControlled({
 }
 
 // src/core/useFormReset.ts
+var import_react3 = require("react");
+
+// src/core/useLatest.ts
 var import_react2 = require("react");
+function useLatest(value) {
+  const ref = (0, import_react2.useRef)(value);
+  (0, import_react2.useLayoutEffect)(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+function afterReset(event, work) {
+  setTimeout(() => {
+    if (!event.defaultPrevented) work();
+  }, 0);
+}
+
+// src/core/useFormReset.ts
 function useFormReset({
   elementRef,
   inputRef,
@@ -76,25 +93,26 @@ function useFormReset({
   inputChecked,
   commit
 }) {
-  const { current: initialValue } = (0, import_react2.useRef)(value);
-  (0, import_react2.useEffect)(() => {
+  const { current: initialValue } = (0, import_react3.useRef)(value);
+  const latest = useLatest({ value, inputChecked, commit });
+  (0, import_react3.useEffect)(() => {
     const form = elementRef.current?.form;
     if (!form) return;
     function onReset(event) {
-      queueMicrotask(() => {
-        if (event.defaultPrevented) return;
-        if (inputRef.current) inputRef.current.checked = inputChecked;
-        if (value === initialValue) return;
-        commit(initialValue);
+      afterReset(event, () => {
+        const { value: current, inputChecked: checked, commit: set } = latest.current;
+        if (inputRef.current) inputRef.current.checked = checked;
+        if (current === initialValue) return;
+        set(initialValue);
       });
     }
     form.addEventListener("reset", onReset);
     return () => form.removeEventListener("reset", onReset);
-  }, [elementRef, inputRef, value, inputChecked, commit, initialValue]);
+  }, [elementRef, inputRef, latest, initialValue]);
 }
 
 // src/core/useRender.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/core/mergeProps.ts
 function isEventHandler(key) {
@@ -176,17 +194,17 @@ function useRender({
   consumerProps
 }) {
   const merged = mergeProps(props, consumerProps);
-  if ((0, import_react3.isValidElement)(render)) {
-    return (0, import_react3.cloneElement)(render, mergeProps(merged, render.props));
+  if ((0, import_react4.isValidElement)(render)) {
+    return (0, import_react4.cloneElement)(render, mergeProps(merged, render.props));
   }
-  return (0, import_react3.createElement)(defaultTagName, merged);
+  return (0, import_react4.createElement)(defaultTagName, merged);
 }
 
 // src/switch/SwitchRootContext.ts
-var import_react4 = require("react");
-var SwitchRootContext = (0, import_react4.createContext)(null);
+var import_react5 = require("react");
+var SwitchRootContext = (0, import_react5.createContext)(null);
 function useSwitchRootContext() {
-  const context = (0, import_react4.useContext)(SwitchRootContext);
+  const context = (0, import_react5.useContext)(SwitchRootContext);
   if (context === null) {
     throw new Error("<Switch.Thumb> must be rendered inside <Switch.Root>.");
   }
@@ -222,16 +240,16 @@ function SwitchRoot({
     name: "Switch.Root",
     state: "checked"
   });
-  const commitChecked = (0, import_react5.useCallback)(
+  const commitChecked = (0, import_react6.useCallback)(
     (next) => {
       setChecked(next);
       onCheckedChange?.(next);
     },
     [setChecked, onCheckedChange]
   );
-  const state = (0, import_react5.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
-  const elementRef = (0, import_react5.useRef)(null);
-  const inputRef = (0, import_react5.useRef)(null);
+  const state = (0, import_react6.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
+  const elementRef = (0, import_react6.useRef)(null);
+  const inputRef = (0, import_react6.useRef)(null);
   useFormReset({
     elementRef,
     inputRef,

package/dist/switch/index.js

@@ -1,6 +1,7 @@
 import {
   useFormReset
-} from "../chunk-IWUVUY76.js";
+} from "../chunk-FDGT4JPK.js";
+import "../chunk-JJ5FACZU.js";
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "4.18.0",
+  "version": "4.19.1",
   "description": "Unstyled React behaviour primitives — render engine, controlled/uncontrolled state, and data-* state projection. Ships no CSS and no class names.",
   "license": "MIT",
   "type": "module",