@corvu-next/otp-field 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-2025 Jasmin Noetzli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,122 @@
+import * as _solidjs_web from '@solidjs/web';
+import { ValidComponent, JSX } from '@solidjs/web';
+import { Accessor } from 'solid-js';
+import { Ref, ElementOf } from '@corvu-next/utils/dom';
+import { DynamicProps } from '@corvu-next/utils/dynamic';
+export { DynamicProps } from '@corvu-next/utils/dynamic';
+
+type OtpFieldContextValue = {
+    /** The value of the OTP Field. */
+    value: Accessor<string>;
+    /** Whether the OTP Field is currently focused. */
+    isFocused: Accessor<boolean>;
+    /** Whether the OTP Field is currently hovered. */
+    isHovered: Accessor<boolean>;
+    /** Whether the user is currently inserting a value and a fake caret should be shown. */
+    isInserting: Accessor<boolean>;
+    /** The maximum number of chars in the OTP Field. */
+    maxLength: Accessor<number>;
+    /** The currently active slots in the OTP Field. */
+    activeSlots: Accessor<number[]>;
+    /** Whether to create extra space on the right for password managers. */
+    shiftPWManagers: Accessor<boolean>;
+};
+/** Context which exposes various properties to interact with the OTP Field. Optionally provide a contextId to access a keyed context. */
+declare const useOtpFieldContext: (contextId?: string) => OtpFieldContextValue;
+
+type OtpFieldInputCorvuProps = {
+    /**
+     * Regex pattern for the input. `null` disables the pattern and allow all chars.
+     * @defaultValue `'^\\d*$'`
+     */
+    pattern?: string | null;
+    /** Override the styles to apply when JavaScript is disabled. corvu provides a default for this but you're free to define your own styling. `null` disables the fallback. */
+    noScriptCSSFallback?: string | null;
+    /**
+     * The `id` of the OTP Field context. Useful if you have nested OTP Fields and want to create components that belong to an OTP Field higher up in the tree.
+     */
+    contextId?: string;
+};
+type OtpFieldInputSharedElementProps<T extends ValidComponent = 'input'> = {
+    ref: Ref<ElementOf<T>>;
+    onInput: JSX.EventHandlerUnion<ElementOf<T>, InputEvent>;
+    onFocus: JSX.EventHandlerUnion<ElementOf<T>, FocusEvent>;
+    onBlur: JSX.EventHandlerUnion<ElementOf<T>, FocusEvent>;
+    onMouseOver: JSX.EventHandlerUnion<ElementOf<T>, MouseEvent>;
+    onMouseLeave: JSX.EventHandlerUnion<ElementOf<T>, MouseEvent>;
+    onKeyDown: JSX.EventHandlerUnion<ElementOf<T>, KeyboardEvent>;
+    onKeyUp: JSX.EventHandlerUnion<ElementOf<T>, KeyboardEvent>;
+    inputMode: string;
+    autocomplete: string | undefined;
+    disabled: boolean | undefined;
+    spellcheck: boolean | undefined;
+    style: string | JSX.CSSProperties;
+};
+type OtpFieldInputElementProps = OtpFieldInputSharedElementProps & {
+    pattern: string | undefined;
+    'data-corvu-otp-field-input': '' | null;
+};
+type OtpFieldInputProps<T extends ValidComponent = 'input'> = OtpFieldInputCorvuProps & Partial<OtpFieldInputSharedElementProps<T>>;
+/** The hidden input element for the OTP Field.
+ *
+ * @data `data-corvu-otp-field-input` - Present on every OTP Field input element.
+ */
+declare const OtpFieldInput: <T extends ValidComponent = "input">(props: DynamicProps<T, OtpFieldInputProps<T>>) => JSX.Element;
+
+type OtpFieldRootCorvuProps = {
+    /** Max number of chars. Is required. */
+    maxLength: number;
+    /** The value of the OTP Field. */
+    value?: string;
+    /** Callback fired when the OTP Field value changes. */
+    onValueChange?: (value: string) => void;
+    /** Callback fired when the OTP Field is filled. */
+    onComplete?: (value: string) => void;
+    /**
+     * Whether to create extra space on the right for password managers.
+     * @defaultValue `true`
+     */
+    shiftPWManagers?: boolean;
+    /**
+     * The `id` of the OTP Field context. Useful if you have nested OTP Fields and want to create components that belong to an OTP Field higher up in the tree.
+     */
+    contextId?: string;
+};
+type OtpFieldRootSharedElementProps<T extends ValidComponent = 'div'> = {
+    ref: Ref<ElementOf<T>>;
+    style: string | JSX.CSSProperties;
+    children: JSX.Element | ((props: OtpFieldRootChildrenProps) => JSX.Element);
+};
+type OtpFieldRootElementProps = OtpFieldRootSharedElementProps & {
+    'data-corvu-otp-field-root': '' | null;
+};
+type OtpFieldRootProps<T extends ValidComponent = 'div'> = OtpFieldRootCorvuProps & Partial<OtpFieldRootSharedElementProps<T>>;
+/** Props that are passed to the Root component children callback. */
+type OtpFieldRootChildrenProps = {
+    /** The value of the OTP Field. */
+    value: string;
+    /** Whether the OTP Field is currently focused. */
+    isFocused: boolean;
+    /** Whether the OTP Field is currently hovered. */
+    isHovered: boolean;
+    /** Whether the user is currently inserting a value and a fake caret should be shown. */
+    isInserting: boolean;
+    /** The maximum number of chars in the OTP Field. */
+    maxLength: number;
+    /** The currently active slots in the OTP Field. */
+    activeSlots: number[];
+    /** Whether to create extra space on the right for password managers. */
+    shiftPWManagers: boolean;
+};
+/** OTP Field root component. Is the wrapper to position the hidden OTP Field input element and provides the context.
+ *
+ * @data `data-corvu-otp-field-root` - Present on every OTP Field root element.
+ */
+declare const OtpFieldRoot: <T extends ValidComponent = "div">(props: DynamicProps<T, OtpFieldRootProps<T>>) => JSX.Element;
+
+declare const OtpField: (<T extends _solidjs_web.ValidComponent = "div">(props: DynamicProps<T, OtpFieldRootProps<T>>) => _solidjs_web.JSX.Element) & {
+    Input: <T extends _solidjs_web.ValidComponent = "input">(props: DynamicProps<T, OtpFieldInputProps<T>>) => _solidjs_web.JSX.Element;
+    useContext: (contextId?: string) => OtpFieldContextValue;
+};
+
+export { type OtpFieldContextValue as ContextValue, OtpFieldInput as Input, type OtpFieldInputCorvuProps as InputCorvuProps, type OtpFieldInputElementProps as InputElementProps, type OtpFieldInputProps as InputProps, type OtpFieldInputSharedElementProps as InputSharedElementProps, OtpFieldRoot as Root, type OtpFieldRootChildrenProps as RootChildrenProps, type OtpFieldRootCorvuProps as RootCorvuProps, type OtpFieldRootElementProps as RootElementProps, type OtpFieldRootProps as RootProps, type OtpFieldRootSharedElementProps as RootSharedElementProps, OtpField as default, useOtpFieldContext as useContext };

package/dist/index.js

@@ -0,0 +1,469 @@
+import { createContext, merge, omit, createSignal, createEffect, createMemo, untrack, useContext, Show } from 'solid-js';
+import { useKeyedContext, createKeyedContext } from '@corvu-next/utils/create/keyedContext';
+import { createComponent, mergeProps, template } from 'solid-js/web';
+import { combineStyle, afterPaint, callEventHandler } from '@corvu-next/utils/dom';
+import { isServer } from '@solidjs/web';
+import { Dynamic } from '@corvu-next/utils/dynamic';
+import { mergeRefs } from '@corvu-next/utils/reactivity';
+import createControllableSignal from '@corvu-next/utils/create/controllableSignal';
+import createOnce from '@corvu-next/utils/create/once';
+import createSize from '@corvu-next/utils/create/size';
+import { isFunction } from '@corvu-next/utils';
+
+// src/context.ts
+var OtpFieldContext = createContext(null);
+var createOtpFieldContext = (contextId) => {
+  if (contextId === void 0) return OtpFieldContext;
+  const context = createKeyedContext(
+    `otp-field-${contextId}`
+  );
+  return context;
+};
+var useOtpFieldContext = (contextId) => {
+  if (contextId === void 0) {
+    const context2 = useContext(OtpFieldContext);
+    if (!context2) {
+      throw new Error(
+        "[corvu]: OTP Field context not found. Make sure to wrap OTP Field components in <OtpField.Root>"
+      );
+    }
+    return context2;
+  }
+  const context = useKeyedContext(
+    `otp-field-${contextId}`
+  );
+  if (!context) {
+    throw new Error(
+      `[corvu]: OTP Field context with id "${contextId}" not found. Make sure to wrap OTP Field components in <OtpField.Root contextId="${contextId}">`
+    );
+  }
+  return context;
+};
+var InternalOtpFieldContext = createContext(null);
+var createInternalOtpFieldContext = (contextId) => {
+  if (contextId === void 0) return InternalOtpFieldContext;
+  const context = createKeyedContext(
+    `otp-field-internal-${contextId}`
+  );
+  return context;
+};
+var useInternalOtpFieldContext = (contextId) => {
+  if (contextId === void 0) {
+    const context2 = useContext(InternalOtpFieldContext);
+    if (!context2) {
+      throw new Error(
+        "[corvu]: OTP Field context not found. Make sure to wrap OTP Field components in <OtpField.Root>"
+      );
+    }
+    return context2;
+  }
+  const context = useKeyedContext(
+    `otp-field-internal-${contextId}`
+  );
+  if (!context) {
+    throw new Error(
+      `[corvu]: OTP Field context with id "${contextId}" not found. Make sure to wrap OTP Field components in <OtpField.Root contextId="${contextId}">`
+    );
+  }
+  return context;
+};
+var otpFieldStyleElement = null;
+var activeCount = 0;
+var createOtpFieldStyleElement = () => {
+  activeCount += 1;
+  if (otpFieldStyleElement) return;
+  otpFieldStyleElement = document.createElement("style");
+  document.head.appendChild(otpFieldStyleElement);
+  const autofillStyle = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
+  const styleString = `
+    [data-corvu-otp-field-input]::selection { background: transparent !important; color: transparent !important; }';
+    [data-corvu-otp-field-input]:autofill { ${autofillStyle} };
+    [data-corvu-otp-field-input]:-webkit-autofill { ${autofillStyle} };
+    @supports (-webkit-touch-callout: none) { [data-corvu-otp-field-input] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } };
+    [data-corvu-otp-field-input] + * { pointer-events: all !important; };
+  `;
+  otpFieldStyleElement.innerHTML = styleString;
+  createEffect(() => {
+    return () => {
+      activeCount -= 1;
+      if (activeCount === 0 && otpFieldStyleElement) {
+        otpFieldStyleElement.remove();
+        otpFieldStyleElement = null;
+      }
+    };
+  });
+};
+var style_default = createOtpFieldStyleElement;
+var _tmpl$ = /* @__PURE__ */ template(`<noscript>`);
+var OtpFieldInput = (props) => {
+  const defaultedProps = merge({
+    pattern: "^\\d*$",
+    noScriptCSSFallback: DEFAULT_NOSCRIPT_CSS_FALLBACK
+  }, props);
+  const otherProps = omit(defaultedProps, "pattern", "noScriptCSSFallback", "ref", "onInput", "onFocus", "onBlur", "onMouseOver", "onMouseLeave", "onKeyDown", "onKeyUp", "autocomplete", "disabled", "spellcheck", "style", "contextId");
+  const previousSelection = {
+    inserting: false,
+    start: null,
+    end: null
+  };
+  let shiftKeyDown = false;
+  const [ref, setRef] = createSignal(null);
+  const context = createMemo(() => useInternalOtpFieldContext(defaultedProps.contextId));
+  createEffect(() => {
+    style_default();
+    const onSelectionChangeWrapper = () => onSelectionChange();
+    document.addEventListener("selectionchange", onSelectionChangeWrapper);
+    return () => {
+      document.removeEventListener("selectionchange", onSelectionChangeWrapper);
+    };
+  });
+  createEffect(() => {
+    const element = ref();
+    if (!element) return void 0;
+    const form = element.form;
+    if (!form) return void 0;
+    const onReset = () => {
+      afterPaint(() => {
+        context().setValue(element.value);
+      });
+    };
+    form.addEventListener("reset", onReset);
+    return () => {
+      form.removeEventListener("reset", onReset);
+    };
+  });
+  createEffect(() => {
+    const element = ref();
+    if (!element) return void 0;
+    element.value = context().value();
+    return void 0;
+  });
+  const patternRegex = createMemo(() => defaultedProps.pattern !== null ? new RegExp(defaultedProps.pattern) : void 0);
+  const onInput = (event) => {
+    if (callEventHandler(defaultedProps.onInput, event)) return;
+    const rawValue = event.currentTarget.value;
+    let finalValue = rawValue;
+    const contextValue = context().value();
+    const selectionSize = Math.abs((previousSelection.start ?? 0) - (previousSelection.end ?? 0));
+    const regex = patternRegex();
+    if ((previousSelection.inserting || selectionSize === contextValue.length) && regex) {
+      finalValue = finalValue.replace(new RegExp(`[^${regex.source}]`, "g"), "");
+    }
+    finalValue = finalValue.slice(0, context().maxLength());
+    const hasInvalidChars = !!regex && !regex.test(finalValue);
+    if (rawValue.length !== 0 && finalValue.length === 0 || finalValue === contextValue || hasInvalidChars) {
+      event.preventDefault();
+      event.currentTarget.value = contextValue;
+      if (hasInvalidChars) {
+        event.currentTarget.setSelectionRange(previousSelection.start ?? 0, previousSelection.end ?? 0);
+      }
+      return;
+    }
+    if (finalValue.length < contextValue.length) {
+      onSelectionChange(event.inputType);
+    }
+    context().setValue(finalValue);
+  };
+  const onFocus = (event) => {
+    if (callEventHandler(defaultedProps.onFocus, event)) return;
+    event.currentTarget.setSelectionRange(context().value().length, context().value().length);
+    context().setIsFocused(true);
+    onSelectionChange();
+  };
+  const onBlur = (event) => {
+    if (callEventHandler(defaultedProps.onBlur, event)) return;
+    shiftKeyDown = false;
+    context().setIsFocused(false);
+    onSelectionChange();
+  };
+  const onMouseOver = (event) => {
+    !callEventHandler(defaultedProps.onMouseOver, event) && defaultedProps.disabled !== true && context().setIsHovered(true);
+  };
+  const onMouseLeave = (event) => {
+    !callEventHandler(defaultedProps.onMouseLeave, event) && context().setIsHovered(false);
+  };
+  const onKeyDown = (event) => {
+    if (callEventHandler(defaultedProps.onKeyDown, event)) return;
+    if (event.key !== "Shift") return;
+    shiftKeyDown = true;
+  };
+  const onKeyUp = (event) => {
+    if (callEventHandler(defaultedProps.onKeyUp, event)) return;
+    if (event.key !== "Shift") return;
+    shiftKeyDown = false;
+  };
+  const onSelectionChange = (inputType) => {
+    const element = ref();
+    if (!element) return;
+    if (context().isFocused() === false || document.activeElement !== element || element.selectionStart === null || element.selectionEnd === null) {
+      syncSelection({
+        start: null,
+        end: null,
+        inserting: false,
+        originalStart: element.selectionStart,
+        originalEnd: element.selectionEnd
+      });
+      context().setIsInserting(false);
+      return;
+    }
+    const maxLength = context().maxLength();
+    const inserting = element.value.length < maxLength && element.selectionStart === element.value.length;
+    context().setIsInserting(inserting);
+    if (inserting || element.selectionStart !== element.selectionEnd) {
+      syncSelection({
+        start: element.selectionStart,
+        end: inserting ? element.selectionEnd + 1 : element.selectionEnd,
+        inserting,
+        originalStart: element.selectionStart,
+        originalEnd: element.selectionEnd
+      });
+      return;
+    }
+    let selectionStart = 0;
+    let selectionEnd = 0;
+    let direction = void 0;
+    if (element.selectionStart === 0) {
+      selectionStart = 0;
+      selectionEnd = 1;
+      direction = "forward";
+    } else if (element.selectionStart === maxLength) {
+      selectionStart = maxLength - 1;
+      selectionEnd = maxLength;
+      direction = "backward";
+    } else {
+      let startOffset = 0;
+      let endOffset = 1;
+      if (previousSelection.start !== null && previousSelection.end !== null) {
+        const navigatedBackwards = element.selectionStart < previousSelection.end && Math.abs(previousSelection.start - previousSelection.end) === 1;
+        direction = navigatedBackwards ? "backward" : "forward";
+        if (navigatedBackwards && !previousSelection.inserting && inputType !== "deleteContentForward" || !navigatedBackwards && shiftKeyDown) {
+          startOffset += -1;
+        }
+      }
+      if (shiftKeyDown && inputType === void 0) {
+        endOffset += 1;
+      }
+      selectionStart = element.selectionStart + startOffset;
+      selectionEnd = element.selectionEnd + startOffset + endOffset;
+    }
+    element.setSelectionRange(selectionStart, selectionEnd, direction);
+    syncSelection({
+      start: selectionStart,
+      end: selectionEnd,
+      inserting,
+      originalStart: element.selectionStart,
+      originalEnd: element.selectionEnd
+    });
+  };
+  const syncSelection = (props2) => {
+    previousSelection.inserting = props2.inserting;
+    previousSelection.start = props2.originalStart;
+    previousSelection.end = props2.originalEnd;
+    const start = props2.start;
+    const end = props2.end;
+    if (start === null || end === null) {
+      context().setActiveSlots([]);
+      return;
+    }
+    const indexes = Array.from({
+      length: end - start
+    }, (_, i) => start + i);
+    context().setActiveSlots(indexes);
+  };
+  return [createComponent(Show, {
+    get when() {
+      return defaultedProps.noScriptCSSFallback !== null && isServer;
+    },
+    get children() {
+      return _tmpl$();
+    }
+  }), createComponent(Dynamic, mergeProps({
+    as: "input",
+    ref(r$) {
+      var _ref$ = mergeRefs(setRef, defaultedProps.ref);
+      typeof _ref$ === "function" && _ref$(r$);
+    },
+    onInput,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseLeave,
+    onKeyDown,
+    onKeyUp,
+    inputMode: "numeric",
+    get autocomplete() {
+      return defaultedProps.autocomplete ?? "one-time-code";
+    },
+    get disabled() {
+      return defaultedProps.disabled;
+    },
+    get spellcheck() {
+      return defaultedProps.spellcheck ?? false;
+    },
+    get style() {
+      return combineStyle({
+        display: "flex",
+        position: "absolute",
+        inset: 0,
+        width: context().shiftPWManagers() ? "calc(100% + 40px)" : "100%",
+        "clip-path": context().shiftPWManagers() ? "inset(0 40px 0 0)" : void 0,
+        height: "100%",
+        padding: 0,
+        color: "transparent",
+        background: "transparent",
+        "caret-color": "transparent",
+        border: "0 solid transparent",
+        outline: "0 solid transparent",
+        "box-shadow": "none",
+        "line-height": "1",
+        "letter-spacing": "-1em",
+        "font-family": "monospace",
+        "font-variant-numeric": "tabular-nums",
+        "font-size": `${context().rootHeight()}px`,
+        "pointer-events": "all"
+      }, defaultedProps.style);
+    },
+    get pattern() {
+      return patternRegex()?.source;
+    },
+    "data-corvu-otp-field-input": ""
+  }, otherProps))];
+};
+var DEFAULT_NOSCRIPT_CSS_FALLBACK = `
+[data-corvu-otp-field-input] {
+  color: black !important;
+  background-color: white !important;
+  caret-color: black !important;
+  letter-spacing: inherit !important;
+  text-align: center !important;
+  border: 1px solid black !important;
+  width: 100% !important;
+  font-size: inherit !important;
+  clip-path: none !important;
+}
+`;
+var Input_default = OtpFieldInput;
+var OtpFieldRoot = (props) => {
+  const defaultedProps = merge({
+    shiftPWManagers: true
+  }, props);
+  const localProps = omit(defaultedProps, "maxLength", "value", "onValueChange", "onComplete", "shiftPWManagers", "contextId", "ref", "style", "children");
+  const [ref, setRef] = createSignal(null);
+  const [value, setValue] = createControllableSignal({
+    value: () => defaultedProps.value,
+    initialValue: "",
+    onChange: defaultedProps.onValueChange
+  });
+  const rootHeight = createSize({
+    element: ref,
+    dimension: "height"
+  });
+  createEffect((prev) => {
+    const value_ = value();
+    if (value_.length !== defaultedProps.maxLength) return value_;
+    defaultedProps.onComplete?.(value_);
+    return value_;
+  });
+  const [isFocused, setIsFocused] = createSignal(false);
+  const [isHovered, setIsHovered] = createSignal(false);
+  const [isInserting, setIsInserting] = createSignal(false);
+  const [activeSlots, setActiveSlots] = createSignal([]);
+  const childrenProps = {
+    get value() {
+      return value();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    get isHovered() {
+      return isHovered();
+    },
+    get isInserting() {
+      return isInserting();
+    },
+    get maxLength() {
+      return defaultedProps.maxLength;
+    },
+    get activeSlots() {
+      return activeSlots();
+    },
+    get shiftPWManagers() {
+      return defaultedProps.shiftPWManagers;
+    }
+  };
+  const memoizedChildren = createOnce(() => defaultedProps.children);
+  const resolveChildren = () => {
+    const children = memoizedChildren()();
+    if (isFunction(children)) {
+      return children(childrenProps);
+    }
+    return children;
+  };
+  const memoizedOtpFieldRoot = createMemo(() => {
+    const OtpFieldContext2 = createOtpFieldContext(defaultedProps.contextId);
+    const InternalOtpFieldContext2 = createInternalOtpFieldContext(defaultedProps.contextId);
+    return createComponent(OtpFieldContext2, {
+      value: {
+        value,
+        isFocused,
+        isHovered,
+        isInserting,
+        maxLength: () => defaultedProps.maxLength,
+        activeSlots,
+        shiftPWManagers: () => defaultedProps.shiftPWManagers
+      },
+      get children() {
+        return createComponent(InternalOtpFieldContext2, {
+          value: {
+            value,
+            isFocused,
+            isHovered,
+            isInserting,
+            maxLength: () => defaultedProps.maxLength,
+            activeSlots,
+            shiftPWManagers: () => defaultedProps.shiftPWManagers,
+            rootHeight,
+            setValue,
+            setIsFocused,
+            setIsHovered,
+            setIsInserting,
+            setActiveSlots
+          },
+          get children() {
+            return createComponent(Dynamic, mergeProps({
+              as: "div",
+              ref(r$) {
+                var _ref$ = mergeRefs(setRef, defaultedProps.ref);
+                typeof _ref$ === "function" && _ref$(r$);
+              },
+              get style() {
+                return combineStyle({
+                  position: "relative",
+                  "user-select": "none",
+                  "-webkit-user-select": "none",
+                  "pointer-events": "none"
+                }, defaultedProps.style);
+              },
+              "data-corvu-otp-field-root": ""
+            }, localProps, {
+              get children() {
+                return untrack(() => resolveChildren());
+              }
+            }));
+          }
+        });
+      }
+    });
+  });
+  return memoizedOtpFieldRoot;
+};
+var Root_default = OtpFieldRoot;
+
+// src/index.ts
+var OtpField = Object.assign(Root_default, {
+  Input: Input_default,
+  useContext: useOtpFieldContext
+});
+var index_default = OtpField;
+
+export { Input_default as Input, Root_default as Root, index_default as default, useOtpFieldContext as useContext };

package/dist/index.jsx

@@ -0,0 +1,537 @@
+// src/context.ts
+import { createContext, useContext } from "solid-js";
+import {
+  createKeyedContext,
+  useKeyedContext
+} from "@corvu-next/utils/create/keyedContext";
+var OtpFieldContext = createContext(null);
+var createOtpFieldContext = (contextId) => {
+  if (contextId === void 0) return OtpFieldContext;
+  const context = createKeyedContext(
+    `otp-field-${contextId}`
+  );
+  return context;
+};
+var useOtpFieldContext = (contextId) => {
+  if (contextId === void 0) {
+    const context2 = useContext(OtpFieldContext);
+    if (!context2) {
+      throw new Error(
+        "[corvu]: OTP Field context not found. Make sure to wrap OTP Field components in <OtpField.Root>"
+      );
+    }
+    return context2;
+  }
+  const context = useKeyedContext(
+    `otp-field-${contextId}`
+  );
+  if (!context) {
+    throw new Error(
+      `[corvu]: OTP Field context with id "${contextId}" not found. Make sure to wrap OTP Field components in <OtpField.Root contextId="${contextId}">`
+    );
+  }
+  return context;
+};
+var InternalOtpFieldContext = createContext(null);
+var createInternalOtpFieldContext = (contextId) => {
+  if (contextId === void 0) return InternalOtpFieldContext;
+  const context = createKeyedContext(
+    `otp-field-internal-${contextId}`
+  );
+  return context;
+};
+var useInternalOtpFieldContext = (contextId) => {
+  if (contextId === void 0) {
+    const context2 = useContext(InternalOtpFieldContext);
+    if (!context2) {
+      throw new Error(
+        "[corvu]: OTP Field context not found. Make sure to wrap OTP Field components in <OtpField.Root>"
+      );
+    }
+    return context2;
+  }
+  const context = useKeyedContext(
+    `otp-field-internal-${contextId}`
+  );
+  if (!context) {
+    throw new Error(
+      `[corvu]: OTP Field context with id "${contextId}" not found. Make sure to wrap OTP Field components in <OtpField.Root contextId="${contextId}">`
+    );
+  }
+  return context;
+};
+
+// src/Input.tsx
+import {
+  afterPaint,
+  callEventHandler,
+  combineStyle
+} from "@corvu-next/utils/dom";
+import {
+  createEffect as createEffect2,
+  createMemo,
+  createSignal,
+  merge,
+  omit,
+  Show
+} from "solid-js";
+import { isServer } from "@solidjs/web";
+import { Dynamic } from "@corvu-next/utils/dynamic";
+
+// src/lib/style.ts
+import { createEffect } from "solid-js";
+var otpFieldStyleElement = null;
+var activeCount = 0;
+var createOtpFieldStyleElement = () => {
+  activeCount += 1;
+  if (otpFieldStyleElement) return;
+  otpFieldStyleElement = document.createElement("style");
+  document.head.appendChild(otpFieldStyleElement);
+  const autofillStyle = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
+  const styleString = `
+    [data-corvu-otp-field-input]::selection { background: transparent !important; color: transparent !important; }';
+    [data-corvu-otp-field-input]:autofill { ${autofillStyle} };
+    [data-corvu-otp-field-input]:-webkit-autofill { ${autofillStyle} };
+    @supports (-webkit-touch-callout: none) { [data-corvu-otp-field-input] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } };
+    [data-corvu-otp-field-input] + * { pointer-events: all !important; };
+  `;
+  otpFieldStyleElement.innerHTML = styleString;
+  createEffect(() => {
+    return () => {
+      activeCount -= 1;
+      if (activeCount === 0 && otpFieldStyleElement) {
+        otpFieldStyleElement.remove();
+        otpFieldStyleElement = null;
+      }
+    };
+  });
+};
+var style_default = createOtpFieldStyleElement;
+
+// src/Input.tsx
+import { mergeRefs } from "@corvu-next/utils/reactivity";
+var OtpFieldInput = (props) => {
+  const defaultedProps = merge(
+    {
+      pattern: "^\\d*$",
+      noScriptCSSFallback: DEFAULT_NOSCRIPT_CSS_FALLBACK
+    },
+    props
+  );
+  const otherProps = omit(
+    defaultedProps,
+    "pattern",
+    "noScriptCSSFallback",
+    "ref",
+    "onInput",
+    "onFocus",
+    "onBlur",
+    "onMouseOver",
+    "onMouseLeave",
+    "onKeyDown",
+    "onKeyUp",
+    "autocomplete",
+    "disabled",
+    "spellcheck",
+    "style",
+    "contextId"
+  );
+  const previousSelection = {
+    inserting: false,
+    start: null,
+    end: null
+  };
+  let shiftKeyDown = false;
+  const [ref, setRef] = createSignal(null);
+  const context = createMemo(
+    () => useInternalOtpFieldContext(defaultedProps.contextId)
+  );
+  createEffect2(() => {
+    style_default();
+    const onSelectionChangeWrapper = () => onSelectionChange();
+    document.addEventListener("selectionchange", onSelectionChangeWrapper);
+    return () => {
+      document.removeEventListener("selectionchange", onSelectionChangeWrapper);
+    };
+  });
+  createEffect2(() => {
+    const element = ref();
+    if (!element) return void 0;
+    const form = element.form;
+    if (!form) return void 0;
+    const onReset = () => {
+      afterPaint(() => {
+        context().setValue(element.value);
+      });
+    };
+    form.addEventListener("reset", onReset);
+    return () => {
+      form.removeEventListener("reset", onReset);
+    };
+  });
+  createEffect2(() => {
+    const element = ref();
+    if (!element) return void 0;
+    element.value = context().value();
+    return void 0;
+  });
+  const patternRegex = createMemo(
+    () => defaultedProps.pattern !== null ? new RegExp(defaultedProps.pattern) : void 0
+  );
+  const onInput = (event) => {
+    if (callEventHandler(defaultedProps.onInput, event)) return;
+    const rawValue = event.currentTarget.value;
+    let finalValue = rawValue;
+    const contextValue = context().value();
+    const selectionSize = Math.abs(
+      (previousSelection.start ?? 0) - (previousSelection.end ?? 0)
+    );
+    const regex = patternRegex();
+    if ((previousSelection.inserting || selectionSize === contextValue.length) && regex) {
+      finalValue = finalValue.replace(new RegExp(`[^${regex.source}]`, "g"), "");
+    }
+    finalValue = finalValue.slice(0, context().maxLength());
+    const hasInvalidChars = !!regex && !regex.test(finalValue);
+    if (rawValue.length !== 0 && finalValue.length === 0 || finalValue === contextValue || hasInvalidChars) {
+      event.preventDefault();
+      event.currentTarget.value = contextValue;
+      if (hasInvalidChars) {
+        event.currentTarget.setSelectionRange(
+          previousSelection.start ?? 0,
+          previousSelection.end ?? 0
+        );
+      }
+      return;
+    }
+    if (finalValue.length < contextValue.length) {
+      onSelectionChange(event.inputType);
+    }
+    context().setValue(finalValue);
+  };
+  const onFocus = (event) => {
+    if (callEventHandler(defaultedProps.onFocus, event)) return;
+    event.currentTarget.setSelectionRange(
+      context().value().length,
+      context().value().length
+    );
+    context().setIsFocused(true);
+    onSelectionChange();
+  };
+  const onBlur = (event) => {
+    if (callEventHandler(defaultedProps.onBlur, event)) return;
+    shiftKeyDown = false;
+    context().setIsFocused(false);
+    onSelectionChange();
+  };
+  const onMouseOver = (event) => {
+    !callEventHandler(defaultedProps.onMouseOver, event) && defaultedProps.disabled !== true && context().setIsHovered(true);
+  };
+  const onMouseLeave = (event) => {
+    !callEventHandler(defaultedProps.onMouseLeave, event) && context().setIsHovered(false);
+  };
+  const onKeyDown = (event) => {
+    if (callEventHandler(defaultedProps.onKeyDown, event)) return;
+    if (event.key !== "Shift") return;
+    shiftKeyDown = true;
+  };
+  const onKeyUp = (event) => {
+    if (callEventHandler(defaultedProps.onKeyUp, event)) return;
+    if (event.key !== "Shift") return;
+    shiftKeyDown = false;
+  };
+  const onSelectionChange = (inputType) => {
+    const element = ref();
+    if (!element) return;
+    if (context().isFocused() === false || document.activeElement !== element || element.selectionStart === null || element.selectionEnd === null) {
+      syncSelection({
+        start: null,
+        end: null,
+        inserting: false,
+        originalStart: element.selectionStart,
+        originalEnd: element.selectionEnd
+      });
+      context().setIsInserting(false);
+      return;
+    }
+    const maxLength = context().maxLength();
+    const inserting = element.value.length < maxLength && element.selectionStart === element.value.length;
+    context().setIsInserting(inserting);
+    if (inserting || element.selectionStart !== element.selectionEnd) {
+      syncSelection({
+        start: element.selectionStart,
+        end: inserting ? element.selectionEnd + 1 : element.selectionEnd,
+        inserting,
+        originalStart: element.selectionStart,
+        originalEnd: element.selectionEnd
+      });
+      return;
+    }
+    let selectionStart = 0;
+    let selectionEnd = 0;
+    let direction = void 0;
+    if (element.selectionStart === 0) {
+      selectionStart = 0;
+      selectionEnd = 1;
+      direction = "forward";
+    } else if (element.selectionStart === maxLength) {
+      selectionStart = maxLength - 1;
+      selectionEnd = maxLength;
+      direction = "backward";
+    } else {
+      let startOffset = 0;
+      let endOffset = 1;
+      if (previousSelection.start !== null && previousSelection.end !== null) {
+        const navigatedBackwards = element.selectionStart < previousSelection.end && Math.abs(previousSelection.start - previousSelection.end) === 1;
+        direction = navigatedBackwards ? "backward" : "forward";
+        if (navigatedBackwards && !previousSelection.inserting && inputType !== "deleteContentForward" || !navigatedBackwards && shiftKeyDown) {
+          startOffset += -1;
+        }
+      }
+      if (shiftKeyDown && inputType === void 0) {
+        endOffset += 1;
+      }
+      selectionStart = element.selectionStart + startOffset;
+      selectionEnd = element.selectionEnd + startOffset + endOffset;
+    }
+    element.setSelectionRange(selectionStart, selectionEnd, direction);
+    syncSelection({
+      start: selectionStart,
+      end: selectionEnd,
+      inserting,
+      originalStart: element.selectionStart,
+      originalEnd: element.selectionEnd
+    });
+  };
+  const syncSelection = (props2) => {
+    previousSelection.inserting = props2.inserting;
+    previousSelection.start = props2.originalStart;
+    previousSelection.end = props2.originalEnd;
+    const start = props2.start;
+    const end = props2.end;
+    if (start === null || end === null) {
+      context().setActiveSlots([]);
+      return;
+    }
+    const indexes = Array.from({ length: end - start }, (_, i) => start + i);
+    context().setActiveSlots(indexes);
+  };
+  return <>
+      <Show when={defaultedProps.noScriptCSSFallback !== null && isServer}>
+        <noscript>
+          <style>{defaultedProps.noScriptCSSFallback}</style>
+        </noscript>
+      </Show>
+      <Dynamic
+    as="input"
+    ref={mergeRefs(setRef, defaultedProps.ref)}
+    onInput={onInput}
+    onFocus={onFocus}
+    onBlur={onBlur}
+    onMouseOver={onMouseOver}
+    onMouseLeave={onMouseLeave}
+    onKeyDown={onKeyDown}
+    onKeyUp={onKeyUp}
+    inputMode="numeric"
+    autocomplete={defaultedProps.autocomplete ?? "one-time-code"}
+    disabled={defaultedProps.disabled}
+    spellcheck={defaultedProps.spellcheck ?? false}
+    style={combineStyle(
+      {
+        display: "flex",
+        position: "absolute",
+        inset: 0,
+        width: context().shiftPWManagers() ? "calc(100% + 40px)" : "100%",
+        "clip-path": context().shiftPWManagers() ? "inset(0 40px 0 0)" : void 0,
+        height: "100%",
+        padding: 0,
+        color: "transparent",
+        background: "transparent",
+        "caret-color": "transparent",
+        border: "0 solid transparent",
+        outline: "0 solid transparent",
+        "box-shadow": "none",
+        "line-height": "1",
+        "letter-spacing": "-1em",
+        "font-family": "monospace",
+        "font-variant-numeric": "tabular-nums",
+        "font-size": `${context().rootHeight()}px`,
+        "pointer-events": "all"
+      },
+      defaultedProps.style
+    )}
+    pattern={patternRegex()?.source}
+    data-corvu-otp-field-input=""
+    {...otherProps}
+  />
+    </>;
+};
+var DEFAULT_NOSCRIPT_CSS_FALLBACK = `
+[data-corvu-otp-field-input] {
+  color: black !important;
+  background-color: white !important;
+  caret-color: black !important;
+  letter-spacing: inherit !important;
+  text-align: center !important;
+  border: 1px solid black !important;
+  width: 100% !important;
+  font-size: inherit !important;
+  clip-path: none !important;
+}
+`;
+var Input_default = OtpFieldInput;
+
+// src/Root.tsx
+import {
+  createEffect as createEffect3,
+  createMemo as createMemo2,
+  createSignal as createSignal2,
+  merge as merge2,
+  omit as omit2,
+  untrack
+} from "solid-js";
+import { Dynamic as Dynamic2 } from "@corvu-next/utils/dynamic";
+import { combineStyle as combineStyle2 } from "@corvu-next/utils/dom";
+import createControllableSignal from "@corvu-next/utils/create/controllableSignal";
+import createOnce from "@corvu-next/utils/create/once";
+import createSize from "@corvu-next/utils/create/size";
+import { isFunction } from "@corvu-next/utils";
+import { mergeRefs as mergeRefs2 } from "@corvu-next/utils/reactivity";
+var OtpFieldRoot = (props) => {
+  const defaultedProps = merge2(
+    {
+      shiftPWManagers: true
+    },
+    props
+  );
+  const localProps = omit2(
+    defaultedProps,
+    "maxLength",
+    "value",
+    "onValueChange",
+    "onComplete",
+    "shiftPWManagers",
+    "contextId",
+    "ref",
+    "style",
+    "children"
+  );
+  const [ref, setRef] = createSignal2(null);
+  const [value, setValue] = createControllableSignal({
+    value: () => defaultedProps.value,
+    initialValue: "",
+    onChange: defaultedProps.onValueChange
+  });
+  const rootHeight = createSize({
+    element: ref,
+    dimension: "height"
+  });
+  createEffect3((prev) => {
+    const value_ = value();
+    if (value_.length !== defaultedProps.maxLength) return value_;
+    defaultedProps.onComplete?.(value_);
+    return value_;
+  });
+  const [isFocused, setIsFocused] = createSignal2(false);
+  const [isHovered, setIsHovered] = createSignal2(false);
+  const [isInserting, setIsInserting] = createSignal2(false);
+  const [activeSlots, setActiveSlots] = createSignal2([]);
+  const childrenProps = {
+    get value() {
+      return value();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    get isHovered() {
+      return isHovered();
+    },
+    get isInserting() {
+      return isInserting();
+    },
+    get maxLength() {
+      return defaultedProps.maxLength;
+    },
+    get activeSlots() {
+      return activeSlots();
+    },
+    get shiftPWManagers() {
+      return defaultedProps.shiftPWManagers;
+    }
+  };
+  const memoizedChildren = createOnce(() => defaultedProps.children);
+  const resolveChildren = () => {
+    const children = memoizedChildren()();
+    if (isFunction(children)) {
+      return children(childrenProps);
+    }
+    return children;
+  };
+  const memoizedOtpFieldRoot = createMemo2(() => {
+    const OtpFieldContext2 = createOtpFieldContext(defaultedProps.contextId);
+    const InternalOtpFieldContext2 = createInternalOtpFieldContext(
+      defaultedProps.contextId
+    );
+    return <OtpFieldContext2
+      value={{
+        value,
+        isFocused,
+        isHovered,
+        isInserting,
+        maxLength: () => defaultedProps.maxLength,
+        activeSlots,
+        shiftPWManagers: () => defaultedProps.shiftPWManagers
+      }}
+    >
+        <InternalOtpFieldContext2
+      value={{
+        value,
+        isFocused,
+        isHovered,
+        isInserting,
+        maxLength: () => defaultedProps.maxLength,
+        activeSlots,
+        shiftPWManagers: () => defaultedProps.shiftPWManagers,
+        rootHeight,
+        setValue,
+        setIsFocused,
+        setIsHovered,
+        setIsInserting,
+        setActiveSlots
+      }}
+    >
+          <Dynamic2
+      as="div"
+      ref={mergeRefs2(setRef, defaultedProps.ref)}
+      style={combineStyle2(
+        {
+          position: "relative",
+          "user-select": "none",
+          "-webkit-user-select": "none",
+          "pointer-events": "none"
+        },
+        defaultedProps.style
+      )}
+      data-corvu-otp-field-root=""
+      {...localProps}
+    >
+            {untrack(() => resolveChildren())}
+          </Dynamic2>
+        </InternalOtpFieldContext2>
+      </OtpFieldContext2>;
+  });
+  return memoizedOtpFieldRoot;
+};
+var Root_default = OtpFieldRoot;
+
+// src/index.ts
+var OtpField = Object.assign(Root_default, {
+  Input: Input_default,
+  useContext: useOtpFieldContext
+});
+var index_default = OtpField;
+export {
+  Input_default as Input,
+  Root_default as Root,
+  index_default as default,
+  useOtpFieldContext as useContext
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@corvu-next/otp-field",
+  "version": "0.1.0",
+  "description": "SolidJS 2 OTP input field component.",
+  "license": "MIT",
+  "author": {
+    "name": "Jasmin Noetzli (upstream), @corvu-next contributors (fork)"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "solid": "./dist/index.jsx",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "dependencies": {
+    "@corvu-next/utils": "~0.1.0"
+  },
+  "peerDependencies": {
+    "solid-js": "2.0.0-beta.15",
+    "@solidjs/web": "2.0.0-beta.15"
+  },
+  "devDependencies": {
+    "@solidjs/web": "2.0.0-beta.15",
+    "esbuild-plugin-solid": "^0.6.0",
+    "solid-js": "2.0.0-beta.15",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf .turbo dist node_modules",
+    "lint": "tsc --noEmit"
+  }
+}