@arun-dev/headless 4.17.0 → 4.19.0

package/dist/otp-input/index.cjs

@@ -0,0 +1,434 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/otp-input/index.ts
+var otp_input_exports = {};
+__export(otp_input_exports, {
+  OtpInput: () => index_parts_exports
+});
+module.exports = __toCommonJS(otp_input_exports);
+
+// src/otp-input/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Input: () => OtpInputInput,
+  Root: () => OtpInputRoot,
+  Slot: () => OtpInputSlot
+});
+
+// src/otp-input/OtpInputRoot.tsx
+var import_react4 = require("react");
+
+// src/core/useControlled.ts
+var import_react = 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 value = isControlled ? controlled : uncontrolled;
+  if (process.env.NODE_ENV !== "production") {
+    if (isControlled !== (controlled !== void 0)) {
+      console.error(
+        `${name}: cannot switch between controlled and uncontrolled \`${state}\`. Decide which one this component is for the whole of its life.`
+      );
+    }
+    if (!isControlled && defaultRef.current !== defaultValue) {
+      console.error(
+        `${name}: cannot change the default \`${state}\` after mount. It is only read once, so later changes are silently ignored.`
+      );
+    }
+  }
+  const setValue = (0, import_react.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+
+// src/core/useRender.ts
+var import_react2 = require("react");
+
+// src/core/mergeProps.ts
+function isEventHandler(key) {
+  return key.length > 2 && key.startsWith("on") && key[2] === key[2]?.toUpperCase();
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const result = ref(node);
+        return typeof result === "function" ? result : () => ref(null);
+      }
+      if (ref && typeof ref === "object") {
+        ref.current = node;
+        return () => {
+          ref.current = null;
+        };
+      }
+      return void 0;
+    });
+    return () => {
+      cleanups.forEach((cleanup) => {
+        if (typeof cleanup === "function") cleanup();
+      });
+    };
+  };
+}
+function isSyntheticEvent(event) {
+  return typeof event === "object" && event !== null && "nativeEvent" in event;
+}
+function makeEventPreventable(event) {
+  if (Object.prototype.hasOwnProperty.call(event, "preventComponentHandler")) return;
+  const target = event;
+  target.preventComponentHandler = () => {
+    target.componentHandlerPrevented = true;
+  };
+}
+function isComponentHandlerPrevented(event) {
+  return typeof event === "object" && event !== null && event.componentHandlerPrevented === true;
+}
+function chainHandlers(earlier, value) {
+  return (...args) => {
+    const event = args[0];
+    if (isSyntheticEvent(event)) makeEventPreventable(event);
+    value(...args);
+    if (isComponentHandlerPrevented(event)) return;
+    earlier(...args);
+  };
+}
+function mergeProps(...objects) {
+  const merged = {};
+  for (const props of objects) {
+    if (!props) continue;
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      if (value === void 0) continue;
+      if (isEventHandler(key) && typeof value === "function") {
+        const earlier = merged[key];
+        merged[key] = typeof earlier === "function" ? chainHandlers(earlier, value) : value;
+      } else if (key === "className") {
+        merged.className = merged.className ? `${String(merged.className)} ${String(value)}` : value;
+      } else if (key === "style") {
+        merged.style = { ...merged.style, ...value };
+      } else if (key === "ref") {
+        merged.ref = merged.ref ? mergeRefs(merged.ref, value) : value;
+      } else {
+        merged[key] = value;
+      }
+    }
+  }
+  return merged;
+}
+
+// src/core/useRender.ts
+function useRender({
+  render,
+  defaultTagName,
+  props,
+  consumerProps
+}) {
+  const merged = mergeProps(props, consumerProps);
+  if ((0, import_react2.isValidElement)(render)) {
+    return (0, import_react2.cloneElement)(render, mergeProps(merged, render.props));
+  }
+  return (0, import_react2.createElement)(defaultTagName, merged);
+}
+
+// src/otp-input/OtpInputRootContext.ts
+var import_react3 = require("react");
+var OtpInputRootContext = (0, import_react3.createContext)(null);
+function useOtpInputRootContext(part) {
+  const context = (0, import_react3.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": isComplete(value, length) ? "" : void 0,
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+
+// src/otp-input/OtpInputRoot.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function OtpInputRoot({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onComplete,
+  length = 6,
+  validationType = "numeric",
+  disabled = false,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? "",
+    name: "OtpInput.Root",
+    state: "value"
+  });
+  const commit = (0, import_react4.useCallback)(
+    (next) => {
+      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, 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) => {
+    if (element2) slotsRef.current.set(index, element2);
+    else slotsRef.current.delete(index);
+  }, []);
+  const slotAt = (0, import_react4.useCallback)((clientX) => {
+    let nearest = null;
+    let distance = Infinity;
+    for (const [index, element2] of slotsRef.current) {
+      const rect = element2.getBoundingClientRect();
+      const d = clientX < rect.left ? rect.left - clientX : clientX > rect.right ? clientX - rect.right : 0;
+      if (d < distance) {
+        distance = d;
+        nearest = index;
+      }
+    }
+    return nearest;
+  }, []);
+  const { current: initialValue } = (0, import_react4.useRef)(value);
+  (0, import_react4.useEffect)(() => {
+    const form = inputRef.current?.form;
+    if (!form) return;
+    function onReset(event) {
+      queueMicrotask(() => {
+        if (!event.defaultPrevented) commit(initialValue);
+      });
+    }
+    form.addEventListener("reset", onReset);
+    return () => form.removeEventListener("reset", onReset);
+  }, [commit, initialValue]);
+  const context = (0, import_react4.useMemo)(
+    () => ({
+      value,
+      length,
+      disabled,
+      validationType,
+      selection,
+      setSelection,
+      commit,
+      inputRef,
+      registerSlot,
+      slotAt
+    }),
+    [value, length, disabled, validationType, selection, commit, registerSlot, slotAt]
+  );
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      ...otpInputDataAttributes({ value, length, disabled }),
+      className,
+      children
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OtpInputRootContext.Provider, { value: context, children: element });
+}
+
+// src/otp-input/OtpInputInput.tsx
+var import_react5 = require("react");
+function OtpInputInput({ render, ...rest }) {
+  const { value, length, disabled, validationType, setSelection, commit, inputRef, slotAt } = useOtpInputRootContext("Input");
+  function select(input, index) {
+    const filled = input.value.length;
+    const at = Math.max(0, Math.min(index, filled, length - 1));
+    if (at < filled) input.setSelectionRange(at, at + 1);
+    else input.setSelectionRange(filled, filled);
+    report(input);
+  }
+  function report(input) {
+    setSelection({ start: input.selectionStart ?? 0, end: input.selectionEnd ?? 0 });
+  }
+  const pendingCaret = (0, import_react5.useRef)(null);
+  (0, import_react5.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_react5.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_react5.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;
+    const end = input.selectionEnd ?? start;
+    if (start === end && (start < input.value.length || start >= length)) select(input, start);
+    else report(input);
+  }
+  return useRender({
+    render,
+    defaultTagName: "input",
+    props: {
+      ref: inputRef,
+      type: "text",
+      value,
+      inputMode: validationType === "numeric" ? "numeric" : "text",
+      autoComplete: "one-time-code",
+      autoCapitalize: "off",
+      autoCorrect: "off",
+      spellCheck: false,
+      maxLength: length,
+      pattern: validationType === "numeric" ? `\\d{${length}}` : `[A-Za-z0-9]{${length}}`,
+      disabled: disabled || void 0,
+      onChange(event) {
+        commit(event.currentTarget.value);
+        syncSelection(event);
+      },
+      onPaste(event) {
+        const pasted = sanitize(event.clipboardData.getData("text/plain"), validationType);
+        event.preventDefault();
+        if (!pasted) return;
+        const input = event.currentTarget;
+        if (pasted.length >= length) {
+          edit(pasted, length);
+          return;
+        }
+        const start = input.selectionStart ?? value.length;
+        const end = input.selectionEnd ?? start;
+        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;
+        if (event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return;
+        const input = event.currentTarget;
+        const at = input.selectionStart ?? 0;
+        event.preventDefault();
+        select(input, event.key === "ArrowLeft" ? at - 1 : at + 1);
+      },
+      onClick(event) {
+        const index = slotAt(event.clientX);
+        if (index !== null) select(event.currentTarget, index);
+      },
+      onSelect: syncSelection,
+      onFocus(event) {
+        const gap = value.indexOf(GAP);
+        select(event.currentTarget, gap === -1 ? value.length : gap);
+      },
+      onBlur() {
+        setSelection(null);
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/otp-input/OtpInputSlot.tsx
+var import_react6 = require("react");
+function OtpInputSlot({ index, className, children, render, ...rest }) {
+  const { value, length, disabled, selection, registerSlot } = useOtpInputRootContext("Slot");
+  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_react6.useCallback)(
+    (element) => registerSlot(index, element),
+    [registerSlot, index]
+  );
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      ref,
+      "aria-hidden": true,
+      "data-active": active ? "" : void 0,
+      "data-filled": char ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      className,
+      children: children ?? char
+    },
+    consumerProps: rest
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OtpInput
+});

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

@@ -0,0 +1,113 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+/** The characters a code may hold: digits only, or letters and digits. */
+type OtpInputValidationType = 'numeric' | 'alphanumeric';
+/** The state OtpInput.Root shares with its parts, and projects as `data-*` attributes. */
+type OtpInputState = {
+    value: string;
+    length: number;
+    disabled: boolean;
+};
+
+type OtpInputRootOwnProps = {
+    /**
+     * Controlled value. Provide `onValueChange` alongside it.
+     *
+     * Never `undefined` once mounted: the mode is latched at mount. Coalesce at the call site —
+     * `value={code ?? ''}`.
+     */
+    value?: string;
+    /** Initial value when uncontrolled. Read once, at mount. */
+    defaultValue?: string;
+    /**
+     * 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;
+    /**
+     * Which characters are kept: `numeric` (the default) keeps digits, `alphanumeric` letters and
+     * digits. Anything else typed or pasted is dropped.
+     */
+    validationType?: OtpInputValidationType;
+    /** Disables the input, and marks the Root and every Slot `data-disabled`. */
+    disabled?: boolean;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type OtpInputRootProps = OtpInputRootOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof OtpInputRootOwnProps | 'defaultValue'>;
+/**
+ * A one-time code: a single native `<input>` that holds the whole code, with one Slot per
+ * character drawn beside it (decision 20).
+ *
+ * One real input rather than one per character, because a text field cannot leave the native
+ * element (decision 7): SMS autofill (`autocomplete="one-time-code"`), paste, the numeric
+ * keypad, IME and password managers all target one input. The Slots are pictures of it.
+ *
+ * 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, 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. */
+    render?: ReactElement;
+    /** Ref to the `<input>`, so focus management and a form library's focus-on-error reach it. */
+    ref?: Ref<HTMLElement>;
+};
+type OtpInputInputProps = OtpInputInputOwnProps & Omit<ComponentPropsWithRef<'input'>, keyof OtpInputInputOwnProps | 'value' | 'defaultValue' | 'type' | 'disabled'>;
+/**
+ * The native `<input>` that holds the code: the element focus, typing, paste, autofill and
+ * the form all use. `name`, `required`, `autoFocus`, `aria-*` and a Field's attributes go here.
+ *
+ * Draw it over the Slots, transparent: a press then lands on the input, so mobile paste menus
+ * and autofill prompts work, and the Root maps the press to the slot under it.
+ *
+ * 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.
+ *
+ * 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.
+ */
+declare function OtpInputInput({ render, ...rest }: OtpInputInputProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type OtpInputSlotOwnProps = {
+    /** Which character of the code this slot shows, from 0. */
+    index: number;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type OtpInputSlotProps = OtpInputSlotOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof OtpInputSlotOwnProps>;
+/**
+ * One character of the code, drawn. Shows the character at `index` unless given children,
+ * and is hidden from assistive technology: the Input carries the code.
+ *
+ * `data-active` marks the slot the caret is on while the input has focus — every slot of a
+ * selection — and `data-filled` a slot holding a character. A separator between groups of
+ * slots is the consumer's own element.
+ */
+declare function OtpInputSlot({ index, className, children, render, ...rest }: OtpInputSlotProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+declare namespace index_parts {
+  export { OtpInputInput as Input, OtpInputRoot as Root, OtpInputSlot as Slot };
+}
+
+export { index_parts as OtpInput, type OtpInputInputProps, type OtpInputRootProps, type OtpInputSlotProps, type OtpInputState, type OtpInputValidationType };

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

@@ -0,0 +1,113 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+/** The characters a code may hold: digits only, or letters and digits. */
+type OtpInputValidationType = 'numeric' | 'alphanumeric';
+/** The state OtpInput.Root shares with its parts, and projects as `data-*` attributes. */
+type OtpInputState = {
+    value: string;
+    length: number;
+    disabled: boolean;
+};
+
+type OtpInputRootOwnProps = {
+    /**
+     * Controlled value. Provide `onValueChange` alongside it.
+     *
+     * Never `undefined` once mounted: the mode is latched at mount. Coalesce at the call site —
+     * `value={code ?? ''}`.
+     */
+    value?: string;
+    /** Initial value when uncontrolled. Read once, at mount. */
+    defaultValue?: string;
+    /**
+     * 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;
+    /**
+     * Which characters are kept: `numeric` (the default) keeps digits, `alphanumeric` letters and
+     * digits. Anything else typed or pasted is dropped.
+     */
+    validationType?: OtpInputValidationType;
+    /** Disables the input, and marks the Root and every Slot `data-disabled`. */
+    disabled?: boolean;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type OtpInputRootProps = OtpInputRootOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof OtpInputRootOwnProps | 'defaultValue'>;
+/**
+ * A one-time code: a single native `<input>` that holds the whole code, with one Slot per
+ * character drawn beside it (decision 20).
+ *
+ * One real input rather than one per character, because a text field cannot leave the native
+ * element (decision 7): SMS autofill (`autocomplete="one-time-code"`), paste, the numeric
+ * keypad, IME and password managers all target one input. The Slots are pictures of it.
+ *
+ * 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, 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. */
+    render?: ReactElement;
+    /** Ref to the `<input>`, so focus management and a form library's focus-on-error reach it. */
+    ref?: Ref<HTMLElement>;
+};
+type OtpInputInputProps = OtpInputInputOwnProps & Omit<ComponentPropsWithRef<'input'>, keyof OtpInputInputOwnProps | 'value' | 'defaultValue' | 'type' | 'disabled'>;
+/**
+ * The native `<input>` that holds the code: the element focus, typing, paste, autofill and
+ * the form all use. `name`, `required`, `autoFocus`, `aria-*` and a Field's attributes go here.
+ *
+ * Draw it over the Slots, transparent: a press then lands on the input, so mobile paste menus
+ * and autofill prompts work, and the Root maps the press to the slot under it.
+ *
+ * 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.
+ *
+ * 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.
+ */
+declare function OtpInputInput({ render, ...rest }: OtpInputInputProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type OtpInputSlotOwnProps = {
+    /** Which character of the code this slot shows, from 0. */
+    index: number;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type OtpInputSlotProps = OtpInputSlotOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof OtpInputSlotOwnProps>;
+/**
+ * One character of the code, drawn. Shows the character at `index` unless given children,
+ * and is hidden from assistive technology: the Input carries the code.
+ *
+ * `data-active` marks the slot the caret is on while the input has focus — every slot of a
+ * selection — and `data-filled` a slot holding a character. A separator between groups of
+ * slots is the consumer's own element.
+ */
+declare function OtpInputSlot({ index, className, children, render, ...rest }: OtpInputSlotProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+declare namespace index_parts {
+  export { OtpInputInput as Input, OtpInputRoot as Root, OtpInputSlot as Slot };
+}
+
+export { index_parts as OtpInput, type OtpInputInputProps, type OtpInputRootProps, type OtpInputSlotProps, type OtpInputState, type OtpInputValidationType };

package/dist/otp-input/index.js

@@ -0,0 +1,293 @@
+import {
+  useControlled
+} from "../chunk-UEIB3I3T.js";
+import {
+  __export,
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/otp-input/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Input: () => OtpInputInput,
+  Root: () => OtpInputRoot,
+  Slot: () => OtpInputSlot
+});
+
+// src/otp-input/OtpInputRoot.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+// src/otp-input/OtpInputRootContext.ts
+import { createContext, useContext } from "react";
+var OtpInputRootContext = createContext(null);
+function useOtpInputRootContext(part) {
+  const context = 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": isComplete(value, length) ? "" : void 0,
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+
+// src/otp-input/OtpInputRoot.tsx
+import { jsx } from "react/jsx-runtime";
+function OtpInputRoot({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onComplete,
+  length = 6,
+  validationType = "numeric",
+  disabled = false,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? "",
+    name: "OtpInput.Root",
+    state: "value"
+  });
+  const commit = useCallback(
+    (next) => {
+      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, onComplete]
+  );
+  const [selection, setSelection] = useState(null);
+  const inputRef = useRef(null);
+  const slotsRef = useRef(/* @__PURE__ */ new Map());
+  const registerSlot = useCallback((index, element2) => {
+    if (element2) slotsRef.current.set(index, element2);
+    else slotsRef.current.delete(index);
+  }, []);
+  const slotAt = useCallback((clientX) => {
+    let nearest = null;
+    let distance = Infinity;
+    for (const [index, element2] of slotsRef.current) {
+      const rect = element2.getBoundingClientRect();
+      const d = clientX < rect.left ? rect.left - clientX : clientX > rect.right ? clientX - rect.right : 0;
+      if (d < distance) {
+        distance = d;
+        nearest = index;
+      }
+    }
+    return nearest;
+  }, []);
+  const { current: initialValue } = useRef(value);
+  useEffect(() => {
+    const form = inputRef.current?.form;
+    if (!form) return;
+    function onReset(event) {
+      queueMicrotask(() => {
+        if (!event.defaultPrevented) commit(initialValue);
+      });
+    }
+    form.addEventListener("reset", onReset);
+    return () => form.removeEventListener("reset", onReset);
+  }, [commit, initialValue]);
+  const context = useMemo(
+    () => ({
+      value,
+      length,
+      disabled,
+      validationType,
+      selection,
+      setSelection,
+      commit,
+      inputRef,
+      registerSlot,
+      slotAt
+    }),
+    [value, length, disabled, validationType, selection, commit, registerSlot, slotAt]
+  );
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      ...otpInputDataAttributes({ value, length, disabled }),
+      className,
+      children
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsx(OtpInputRootContext.Provider, { value: context, children: element });
+}
+
+// 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) {
+    const filled = input.value.length;
+    const at = Math.max(0, Math.min(index, filled, length - 1));
+    if (at < filled) input.setSelectionRange(at, at + 1);
+    else input.setSelectionRange(filled, filled);
+    report(input);
+  }
+  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;
+    const end = input.selectionEnd ?? start;
+    if (start === end && (start < input.value.length || start >= length)) select(input, start);
+    else report(input);
+  }
+  return useRender({
+    render,
+    defaultTagName: "input",
+    props: {
+      ref: inputRef,
+      type: "text",
+      value,
+      inputMode: validationType === "numeric" ? "numeric" : "text",
+      autoComplete: "one-time-code",
+      autoCapitalize: "off",
+      autoCorrect: "off",
+      spellCheck: false,
+      maxLength: length,
+      pattern: validationType === "numeric" ? `\\d{${length}}` : `[A-Za-z0-9]{${length}}`,
+      disabled: disabled || void 0,
+      onChange(event) {
+        commit(event.currentTarget.value);
+        syncSelection(event);
+      },
+      onPaste(event) {
+        const pasted = sanitize(event.clipboardData.getData("text/plain"), validationType);
+        event.preventDefault();
+        if (!pasted) return;
+        const input = event.currentTarget;
+        if (pasted.length >= length) {
+          edit(pasted, length);
+          return;
+        }
+        const start = input.selectionStart ?? value.length;
+        const end = input.selectionEnd ?? start;
+        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;
+        if (event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return;
+        const input = event.currentTarget;
+        const at = input.selectionStart ?? 0;
+        event.preventDefault();
+        select(input, event.key === "ArrowLeft" ? at - 1 : at + 1);
+      },
+      onClick(event) {
+        const index = slotAt(event.clientX);
+        if (index !== null) select(event.currentTarget, index);
+      },
+      onSelect: syncSelection,
+      onFocus(event) {
+        const gap = value.indexOf(GAP);
+        select(event.currentTarget, gap === -1 ? value.length : gap);
+      },
+      onBlur() {
+        setSelection(null);
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/otp-input/OtpInputSlot.tsx
+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) === 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 = useCallback2(
+    (element) => registerSlot(index, element),
+    [registerSlot, index]
+  );
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      ref,
+      "aria-hidden": true,
+      "data-active": active ? "" : void 0,
+      "data-filled": char ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      className,
+      children: children ?? char
+    },
+    consumerProps: rest
+  });
+}
+export {
+  index_parts_exports as OtpInput
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "4.17.0",
+  "version": "4.19.0",
   "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",
@@ -84,6 +84,16 @@
         "default": "./dist/menu/index.cjs"
       }
     },
+    "./otp-input": {
+      "import": {
+        "types": "./dist/otp-input/index.d.ts",
+        "default": "./dist/otp-input/index.js"
+      },
+      "require": {
+        "types": "./dist/otp-input/index.d.cts",
+        "default": "./dist/otp-input/index.cjs"
+      }
+    },
     "./popover": {
       "import": {
         "types": "./dist/popover/index.d.ts",