react-native-transformer-text-input 0.3.0 → 0.4.1

package/android/src/main/jni/CMakeLists.txt

@@ -9,12 +9,12 @@ set(LIB_COMMON_DIR ${LIB_ANDROID_DIR}/../cpp)
 set(LIB_ANDROID_GENERATED_JNI_DIR ${LIB_ANDROID_DIR}/build/generated/source/codegen/jni)
 set(LIB_ANDROID_GENERATED_COMPONENTS_DIR ${LIB_ANDROID_GENERATED_JNI_DIR}/react/renderer/components/${LIB_LITERAL})
 
+set(NODE_BINARY "node" CACHE STRING "Path to Node.js binary")
+
 # Resolve path to react-native-worklets.
 set(REACT_NATIVE_WORKLETS_DIR "" CACHE PATH "Path to react-native-worklets root directory")
 
 if(NOT DEFINED REACT_NATIVE_WORKLETS_DIR OR "${REACT_NATIVE_WORKLETS_DIR}" STREQUAL "")
-  set(NODE_BINARY "node" CACHE STRING "Path to Node.js binary")
-
   execute_process(
     COMMAND "${NODE_BINARY}" -p "require.resolve('react-native-worklets/package.json')"
     WORKING_DIRECTORY "${PROJECT_ROOT_DIR}/.."
@@ -34,6 +34,25 @@ if(NOT DEFINED REACT_NATIVE_WORKLETS_DIR OR "${REACT_NATIVE_WORKLETS_DIR}" STREQ
   get_filename_component(REACT_NATIVE_WORKLETS_DIR "${_worklets_pkg_json}" DIRECTORY)
 endif()
 
+# Resolve React Native minor version so worklets headers pick the correct
+# JSBigStringBuffer alias (deprecated on RN >= 0.84).
+if(NOT DEFINED REACT_NATIVE_MINOR_VERSION)
+  execute_process(
+    COMMAND "${NODE_BINARY}" -p "require('react-native/package.json').version.split('.')[1]"
+    WORKING_DIRECTORY "${PROJECT_ROOT_DIR}/.."
+    OUTPUT_VARIABLE REACT_NATIVE_MINOR_VERSION
+    OUTPUT_STRIP_TRAILING_WHITESPACE
+    RESULT_VARIABLE _rn_minor_res
+    ERROR_QUIET
+  )
+  if(NOT _rn_minor_res EQUAL 0 OR "${REACT_NATIVE_MINOR_VERSION}" STREQUAL "")
+    message(FATAL_ERROR
+      "Failed to resolve React Native minor version with Node from '${PROJECT_ROOT_DIR}/..'. "
+      "Set REACT_NATIVE_MINOR_VERSION or NODE_BINARY explicitly."
+    )
+  endif()
+endif()
+
 file(GLOB LIB_CUSTOM_SRCS CONFIGURE_DEPENDS *.cpp ${LIB_COMMON_DIR}/*.cpp)
 file(GLOB LIB_CODEGEN_SRCS CONFIGURE_DEPENDS ${LIB_ANDROID_GENERATED_JNI_DIR}/*.cpp ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}/*.cpp)
 
@@ -86,4 +105,10 @@ target_include_directories(
   ${CMAKE_CURRENT_SOURCE_DIR}
 )
 
+target_compile_definitions(
+  ${LIB_TARGET_NAME}
+  PRIVATE
+  REACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}
+)
+
 target_compile_reactnative_options(${LIB_TARGET_NAME} PUBLIC)

package/lib/module/Transformer.js

@@ -1,10 +1,17 @@
 "use strict";
 
+import { Platform } from 'react-native';
 export class Transformer {
   constructor(worklet) {
-    const workletHash = worklet.__workletHash;
-    if (workletHash == null) {
-      throw new Error('[rntti] Transformer must be a worklet. Did you forget to add the "worklet" directive?');
+    // On web there is no UI runtime: the web TransformerTextInput runs the
+    // worklet synchronously in JS, so it doesn't need to be compiled by the
+    // worklets plugin. Native runs it on the UI thread and requires a real
+    // worklet, so keep enforcing the directive there.
+    if (Platform.OS !== 'web') {
+      const workletHash = worklet.__workletHash;
+      if (workletHash == null) {
+        throw new Error('[rntti] Transformer must be a worklet. Did you forget to add the "worklet" directive?');
+      }
     }
     this._worklet = worklet;
   }

package/lib/module/Transformer.js.map

@@ -1 +1 @@
-{"version":3,"names":["Transformer","constructor","worklet","workletHash","__workletHash","Error","_worklet"],"sourceRoot":"../../src","sources":["Transformer.ts"],"mappings":";;AAeA,OAAO,MAAMA,WAAW,CAAC;EAGvBC,WAAWA,CAACC,OAA2B,EAAE;IACvC,MAAMC,WAAW,GAAID,OAAO,CAAgCE,aAAa;IACzE,IAAID,WAAW,IAAI,IAAI,EAAE;MACvB,MAAM,IAAIE,KAAK,CACb,uFACF,CAAC;IACH;IACA,IAAI,CAACC,QAAQ,GAAGJ,OAAO;EACzB;EAEA,IAAIA,OAAOA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACI,QAAQ;EACtB;AACF","ignoreList":[]}
+{"version":3,"names":["Platform","Transformer","constructor","worklet","OS","workletHash","__workletHash","Error","_worklet"],"sourceRoot":"../../src","sources":["Transformer.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AAiBvC,OAAO,MAAMC,WAAW,CAAC;EAGvBC,WAAWA,CAACC,OAA2B,EAAE;IACvC;IACA;IACA;IACA;IACA,IAAIH,QAAQ,CAACI,EAAE,KAAK,KAAK,EAAE;MACzB,MAAMC,WAAW,GAAIF,OAAO,CAAgCG,aAAa;MACzE,IAAID,WAAW,IAAI,IAAI,EAAE;QACvB,MAAM,IAAIE,KAAK,CACb,uFACF,CAAC;MACH;IACF;IACA,IAAI,CAACC,QAAQ,GAAGL,OAAO;EACzB;EAEA,IAAIA,OAAOA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACK,QAAQ;EACtB;AACF","ignoreList":[]}

package/lib/module/TransformerTextInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useCallback","useEffect","useMemo","useRef","StyleSheet","TextInput","TransformerTextInputDecoratorViewNativeComponent","Commands","registerTransformer","unregisterTransformer","useMergeRefs","validateSelection","jsx","_jsx","TransformerTextInput","transformer","onChangeText","defaultValue","others","forwardedRef","transformerId","transformedDefaultValue","undefined","result","worklet","value","previousValue","selection","start","length","end","previousSelection","decoratorRef","textRef","setInputRef","instance","Object","assign","getValue","current","update","transform","nativeRef","newSelection","newValue","clear","inputRef","handleChangeText","text","ref","style","styles","decorator","children","create","display"],"sourceRoot":"../../src","sources":["TransformerTextInput.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","useCallback","useEffect","useMemo","useRef","StyleSheet","TextInput","TransformerTextInputDecoratorViewNativeComponent","Commands","registerTransformer","unregisterTransformer","useMergeRefs","validateSelection","jsx","_jsx","TransformerTextInput","transformer","onChangeText","defaultValue","others","forwardedRef","transformerId","transformedDefaultValue","undefined","result","worklet","value","previousValue","selection","start","length","end","previousSelection","decoratorRef","textRef","setInputRef","instance","Object","assign","getValue","current","update","transform","nativeRef","newSelection","newValue","clear","inputRef","handleChangeText","text","ref","style","styles","decorator","children","create","display"],"sourceRoot":"../../src","sources":["TransformerTextInput.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/TransformerTextInput.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=TransformerTextInput.types.js.map

package/lib/module/TransformerTextInput.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["TransformerTextInput.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/TransformerTextInput.web.js

@@ -0,0 +1,134 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo, useRef } from 'react';
+import { TextInput } from 'react-native';
+import { computeUncontrolledSelection, validateSelection } from "./selection.js";
+import useMergeRefs from "./utils/useMergeRefs.js";
+
+// The web host node is a DOM input; type only the bits we use so the library's
+// tsconfig doesn't need the `dom` lib.
+import { jsx as _jsx } from "react/jsx-runtime";
+// Web implementation. There is no UI thread, so instead of the native decorator
+// running the transformer worklet on the UI runtime, we run the same transformer
+// synchronously in JS on every change. The input is uncontrolled: the formatted
+// value and caret are written straight to the DOM node in the change handler
+// (mirroring the native side's imperative update), so there's no React
+// re-render and no intermediate paint where the caret jumps to the end. Web is
+// single-threaded, so value and selection land together in one step.
+export const TransformerTextInput = /*#__PURE__*/forwardRef(({
+  transformer,
+  onChangeText,
+  defaultValue,
+  ...others
+}, forwardedRef) => {
+  const transformedDefaultValue = useMemo(() => {
+    if (defaultValue == null) {
+      return '';
+    }
+    const result = transformer.worklet({
+      value: defaultValue,
+      previousValue: defaultValue,
+      selection: {
+        start: defaultValue.length,
+        end: defaultValue.length
+      },
+      previousSelection: {
+        start: 0,
+        end: 0
+      }
+    });
+    return result?.value ?? defaultValue;
+  }, [defaultValue, transformer]);
+  const valueRef = useRef(transformedDefaultValue);
+  const previousRef = useRef({
+    value: transformedDefaultValue,
+    selection: {
+      start: transformedDefaultValue.length,
+      end: transformedDefaultValue.length
+    }
+  });
+  const nodeRef = useRef(null);
+  const applyTransform = useCallback((rawValue, rawSelection, transform) => {
+    const prev = previousRef.current;
+    const result = transform ? transformer.worklet({
+      value: rawValue,
+      previousValue: prev.value,
+      selection: rawSelection,
+      previousSelection: prev.selection
+    }) : null;
+    const newValue = result?.value ?? rawValue;
+    let newSelection;
+    if (result?.selection != null) {
+      newSelection = result.selection;
+      validateSelection(newSelection, newValue.length);
+    } else {
+      newSelection = computeUncontrolledSelection(rawValue, newValue, rawSelection.start, rawSelection.end);
+    }
+    previousRef.current = {
+      value: newValue,
+      selection: newSelection
+    };
+    valueRef.current = newValue;
+    // Write straight to the DOM node — uncontrolled, no React re-render.
+    const node = nodeRef.current;
+    if (node != null) {
+      node.value = newValue;
+      if (typeof node.setSelectionRange === 'function') {
+        node.setSelectionRange(newSelection.start, newSelection.end);
+      }
+    }
+    return newValue;
+  }, [transformer]);
+  const handleChangeText = useCallback(text => {
+    // On web the DOM caret sits right after the edit when onChangeText
+    // fires; read it so the transformer can map it like the native side.
+    const node = nodeRef.current;
+    const rawSelection = node != null && typeof node.selectionStart === 'number' ? {
+      start: node.selectionStart,
+      end: node.selectionEnd ?? node.selectionStart
+    } : {
+      start: text.length,
+      end: text.length
+    };
+    const newValue = applyTransform(text, rawSelection, true);
+    onChangeText?.(newValue);
+  }, [applyTransform, onChangeText]);
+  const setInputRef = useCallback(instance => {
+    nodeRef.current = instance;
+    if (instance != null) {
+      Object.assign(instance, {
+        getValue() {
+          return valueRef.current;
+        },
+        update({
+          value: nextValue,
+          selection,
+          transform
+        }) {
+          const base = nextValue ?? valueRef.current;
+          const sel = selection ?? {
+            start: base.length,
+            end: base.length
+          };
+          applyTransform(base, sel, transform ?? true);
+        },
+        clear() {
+          this.update({
+            value: '',
+            transform: false
+          });
+        }
+      });
+    }
+  }, [applyTransform]);
+  const inputRef = useMergeRefs(setInputRef, forwardedRef);
+  return /*#__PURE__*/_jsx(TextInput
+  // @ts-expect-error web host node carries the instance methods
+  , {
+    ref: inputRef,
+    defaultValue: transformedDefaultValue,
+    onChangeText: handleChangeText,
+    ...others
+  });
+});
+//# sourceMappingURL=TransformerTextInput.web.js.map

package/lib/module/TransformerTextInput.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","useRef","TextInput","computeUncontrolledSelection","validateSelection","useMergeRefs","jsx","_jsx","TransformerTextInput","transformer","onChangeText","defaultValue","others","forwardedRef","transformedDefaultValue","result","worklet","value","previousValue","selection","start","length","end","previousSelection","valueRef","previousRef","nodeRef","applyTransform","rawValue","rawSelection","transform","prev","current","newValue","newSelection","node","setSelectionRange","handleChangeText","text","selectionStart","selectionEnd","setInputRef","instance","Object","assign","getValue","update","nextValue","base","sel","clear","inputRef","ref"],"sourceRoot":"../../src","sources":["TransformerTextInput.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/index.js

@@ -1,5 +1,5 @@
 "use strict";
 
 export { Transformer } from "./Transformer.js";
-export { TransformerTextInput } from "./TransformerTextInput.js";
+export { TransformerTextInput } from './TransformerTextInput';
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Transformer","TransformerTextInput"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SACEA,WAAW,QAGN,kBAAe;AACtB,SACEC,oBAAoB,QAGf,2BAAwB","ignoreList":[]}
+{"version":3,"names":["Transformer","TransformerTextInput"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SACEA,WAAW,QAGN,kBAAe;AACtB,SACEC,oBAAoB,QAGf,wBAAwB","ignoreList":[]}

package/lib/typescript/src/Transformer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Transformer.d.ts","sourceRoot":"","sources":["../../../src/Transformer.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,SAAS,CAAC;IACrB,iBAAiB,EAAE,SAAS,CAAC;CAC9B,KACG;IACE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC9B,GACD,IAAI,GACJ,SAAS,CAAC;AAEd,qBAAa,WAAW;IACtB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAqB;gBAElC,OAAO,EAAE,kBAAkB;IAUvC,IAAI,OAAO,uBAEV;CACF"}
+{"version":3,"file":"Transformer.d.ts","sourceRoot":"","sources":["../../../src/Transformer.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,SAAS,CAAC;IACrB,iBAAiB,EAAE,SAAS,CAAC;CAC9B,KACG;IACE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC9B,GACD,IAAI,GACJ,SAAS,CAAC;AAEd,qBAAa,WAAW;IACtB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAqB;gBAElC,OAAO,EAAE,kBAAkB;IAgBvC,IAAI,OAAO,uBAEV;CACF"}

package/lib/typescript/src/TransformerTextInput.d.ts

@@ -1,42 +1,5 @@
-import { type HostInstance, type TextInputProps } from 'react-native';
-import { type Transformer } from './Transformer';
-type TransformerTextInputInstanceMethods = {
-    /**
-     * Get the current text value.
-     */
-    getValue: () => string;
-    /**
-     * Update the value and/or selection, optionally running the transformer.
-     */
-    update: (options: {
-        /**
-         * New value to apply.
-         */
-        value?: string | null;
-        /**
-         * Optional selection to apply alongside the value.
-         */
-        selection?: {
-            start: number;
-            end: number;
-        };
-        /**
-         * Whether to run the transformer on update. Defaults to true.
-         */
-        transform?: boolean;
-    }) => void;
-    /**
-     * Clear the input value without running the transformer.
-     */
-    clear: () => void;
-};
-export type TransformerTextInputInstance = HostInstance & TransformerTextInputInstanceMethods;
-export type TransformerTextInputProps = Omit<TextInputProps, 'value'> & {
-    /**
-     * Transformer instance used to sync text changes on the UI thread.
-     */
-    transformer: Transformer;
-};
+import { type TransformerTextInputInstance } from './TransformerTextInput.types';
+export type { TransformerTextInputInstance, TransformerTextInputProps, } from './TransformerTextInput.types';
 export declare const TransformerTextInput: import("react").ForwardRefExoticComponent<Omit<Readonly<Omit<Omit<Readonly<Omit<Readonly<{
     onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => unknown) | undefined;
     onAccessibilityTap?: (() => unknown) | undefined;
@@ -238,10 +201,6 @@ export declare const TransformerTextInput: import("react").ForwardRefExoticCompo
     value?: string | undefined;
     textAlign?: ("left" | "center" | "right") | undefined;
 }>, never>>, "value"> & {
-    /**
-     * Transformer instance used to sync text changes on the UI thread.
-     */
-    transformer: Transformer;
+    transformer: import("./Transformer").Transformer;
 } & import("react").RefAttributes<TransformerTextInputInstance>>;
-export {};
 //# sourceMappingURL=TransformerTextInput.d.ts.map

package/lib/typescript/src/TransformerTextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransformerTextInput.d.ts","sourceRoot":"","sources":["../../../src/TransformerTextInput.tsx"],"names":[],"mappings":"AASA,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAQjE,KAAK,mCAAmC,GAAG;IACzC;;OAEG;IACH,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB;;OAEG;IACH,MAAM,EAAE,CAAC,OAAO,EAAE;QAChB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACtB;;WAEG;QACH,SAAS,CAAC,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;QAC3C;;WAEG;QACH,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,KAAK,IAAI,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,YAAY,GACrD,mCAAmC,CAAC;AAEtC,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IACtE;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4G6imB,CAAC;;;;;;;;;;IAlH7kmB;;OAEG;iBACU,WAAW;gEA0GzB,CAAC"}
+{"version":3,"file":"TransformerTextInput.d.ts","sourceRoot":"","sources":["../../../src/TransformerTextInput.tsx"],"names":[],"mappings":"AAiBA,OAAO,EACL,KAAK,4BAA4B,EAGlC,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EACV,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,8BAA8B,CAAC;AAEtC,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4GgunB,CAAC;;;;;;;;;;;gEALjwnB,CAAC"}

package/lib/typescript/src/TransformerTextInput.types.d.ts

@@ -0,0 +1,40 @@
+import { type HostInstance, type TextInputProps } from 'react-native';
+import { type Transformer } from './Transformer';
+export type TransformerTextInputInstanceMethods = {
+    /**
+     * Get the current text value.
+     */
+    getValue: () => string;
+    /**
+     * Update the value and/or selection, optionally running the transformer.
+     */
+    update: (options: {
+        /**
+         * New value to apply.
+         */
+        value?: string | null;
+        /**
+         * Optional selection to apply alongside the value.
+         */
+        selection?: {
+            start: number;
+            end: number;
+        };
+        /**
+         * Whether to run the transformer on update. Defaults to true.
+         */
+        transform?: boolean;
+    }) => void;
+    /**
+     * Clear the input value without running the transformer.
+     */
+    clear: () => void;
+};
+export type TransformerTextInputInstance = HostInstance & TransformerTextInputInstanceMethods;
+export type TransformerTextInputProps = Omit<TextInputProps, 'value'> & {
+    /**
+     * Transformer instance used to sync text changes on the UI thread.
+     */
+    transformer: Transformer;
+};
+//# sourceMappingURL=TransformerTextInput.types.d.ts.map

package/lib/typescript/src/TransformerTextInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransformerTextInput.types.d.ts","sourceRoot":"","sources":["../../../src/TransformerTextInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,MAAM,MAAM,mCAAmC,GAAG;IAChD;;OAEG;IACH,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB;;OAEG;IACH,MAAM,EAAE,CAAC,OAAO,EAAE;QAChB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACtB;;WAEG;QACH,SAAS,CAAC,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;QAC3C;;WAEG;QACH,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,KAAK,IAAI,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,YAAY,GACrD,mCAAmC,CAAC;AAEtC,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IACtE;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;CAC1B,CAAC"}

package/lib/typescript/src/TransformerTextInput.web.d.ts

@@ -0,0 +1,206 @@
+import { type TransformerTextInputInstance } from './TransformerTextInput.types';
+export type { TransformerTextInputInstance, TransformerTextInputProps, } from './TransformerTextInput.types';
+export declare const TransformerTextInput: import("react").ForwardRefExoticComponent<Omit<Readonly<Omit<Omit<Readonly<Omit<Readonly<{
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => unknown) | undefined;
+    onAccessibilityTap?: (() => unknown) | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => unknown) | undefined;
+    onMagicTap?: (() => unknown) | undefined;
+    onAccessibilityEscape?: (() => unknown) | undefined;
+}>, "onMoveShouldSetResponder" | "onMoveShouldSetResponderCapture" | "onResponderGrant" | "onResponderMove" | "onResponderReject" | "onResponderRelease" | "onResponderStart" | "onResponderEnd" | "onResponderTerminate" | "onResponderTerminationRequest" | "onStartShouldSetResponder" | "onStartShouldSetResponderCapture" | "onMouseEnter" | "onMouseLeave" | "onClick" | "onClickCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlur" | "onBlurCapture" | "onFocus" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "style" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    onMoveShouldSetResponder?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderGrant?: ((e: import("react-native").GestureResponderEvent) => void | boolean) | undefined;
+    onResponderMove?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderEnd?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminate?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onStartShouldSetResponder?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onStartShouldSetResponderCapture?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
+}>, "onMouseEnter" | "onMouseLeave" | "onClick" | "onClickCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlur" | "onBlurCapture" | "onFocus" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "style" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    onMouseEnter?: ((event: import("react-native").MouseEvent) => void) | undefined;
+    onMouseLeave?: ((event: import("react-native").MouseEvent) => void) | undefined;
+}>, "onClick" | "onClickCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlur" | "onBlurCapture" | "onFocus" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "style" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    onClick?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onClickCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancel?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancelCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDown?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDownCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUp?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUpCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerOver?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerOverCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerOut?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onPointerOutCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onGotPointerCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onGotPointerCaptureCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onLostPointerCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+    onLostPointerCaptureCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
+}>, "onClick" | "onBlur" | "onBlurCapture" | "onFocus" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "style" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    onBlur?: ((event: import("react-native").BlurEvent) => void) | undefined;
+    onBlurCapture?: ((event: import("react-native").BlurEvent) => void) | undefined;
+    onFocus?: ((event: import("react-native").FocusEvent) => void) | undefined;
+    onFocusCapture?: ((event: import("react-native").FocusEvent) => void) | undefined;
+}>, "onClick" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "style" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    onTouchCancel?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchCancelCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMoveCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchStart?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchStartCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
+}>, "onClick" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "style" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    nativeBackgroundAndroid?: import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").AndroidDrawable | undefined;
+    nativeForegroundAndroid?: import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").AndroidDrawable | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    nextFocusDown?: number | undefined;
+    nextFocusForward?: number | undefined;
+    nextFocusLeft?: number | undefined;
+    nextFocusRight?: number | undefined;
+    nextFocusUp?: number | undefined;
+    focusable?: boolean | undefined;
+    tabIndex?: 0 | -1;
+    onClick?: ((event: import("react-native").GestureResponderEvent) => unknown) | undefined;
+}>, "shouldRasterizeIOS" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "style" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    shouldRasterizeIOS?: boolean | undefined;
+}>, "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "children" | "style" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<Omit<Readonly<{
+    accessibilityLabelledBy?: (string | undefined) | (Array<string> | undefined);
+    "aria-labelledby"?: string | undefined;
+    accessibilityLiveRegion?: ("none" | "polite" | "assertive") | undefined;
+    "aria-live"?: ("polite" | "assertive" | "off") | undefined;
+    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined;
+    screenReaderFocusable?: boolean;
+}>, "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden"> & Omit<Readonly<{
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    accessibilityShowsLargeContentViewer?: boolean | undefined;
+    accessibilityLargeContentTitle?: string | undefined;
+    "aria-modal"?: boolean | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityLanguage?: string | undefined;
+    accessibilityRespondsToUserInteraction?: boolean | undefined;
+}>, "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "role" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden"> & {
+    accessible?: boolean | undefined;
+    accessibilityLabel?: string | undefined;
+    accessibilityHint?: string | undefined;
+    "aria-label"?: string | undefined;
+    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+    role?: import("react-native").Role | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    "aria-valuemax"?: import("react-native").AccessibilityValue["max"] | undefined;
+    "aria-valuemin"?: import("react-native").AccessibilityValue["min"] | undefined;
+    "aria-valuenow"?: import("react-native").AccessibilityValue["now"] | undefined;
+    "aria-valuetext"?: import("react-native").AccessibilityValue["text"] | undefined;
+    accessibilityActions?: ReadonlyArray<import("react-native/types_generated/Libraries/Components/View/ViewAccessibility").AccessibilityActionInfo> | undefined;
+    "aria-busy"?: boolean | undefined;
+    "aria-checked"?: (boolean | undefined) | "mixed";
+    "aria-disabled"?: boolean | undefined;
+    "aria-expanded"?: boolean | undefined;
+    "aria-selected"?: boolean | undefined;
+    "aria-hidden"?: boolean | undefined;
+}>, "children" | "style" | "collapsable" | "collapsableChildren" | "id" | "testID" | "nativeID" | "needsOffscreenAlphaCompositing" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
+    children?: React.ReactNode;
+    style?: import("react-native/types_generated/Libraries/StyleSheet/StyleSheet").ViewStyleProp | undefined;
+    collapsable?: boolean | undefined;
+    collapsableChildren?: boolean | undefined;
+    id?: string;
+    testID?: string | undefined;
+    nativeID?: string | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    hitSlop?: import("react-native/types_generated/Libraries/StyleSheet/EdgeInsetsPropType").EdgeInsetsOrSizeProp | undefined;
+    pointerEvents?: ("auto" | "box-none" | "box-only" | "none") | undefined;
+    removeClippedSubviews?: boolean | undefined;
+    experimental_accessibilityOrder?: Array<string> | undefined;
+}>, never>>, "style" | "experimental_accessibilityOrder">, "onBlur" | "onFocus" | "style" | "selection" | "disableKeyboardShortcuts" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "inputAccessoryViewID" | "inputAccessoryViewButtonLabel" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "scrollEnabled" | "spellCheck" | "textContentType" | "lineBreakStrategyIOS" | "lineBreakModeIOS" | "smartInsertDelete" | "cursorColor" | "selectionHandleColor" | "disableFullscreenUI" | "importantForAutofill" | "inlineImageLeft" | "inlineImagePadding" | "numberOfLines" | "returnKeyLabel" | "rows" | "showSoftInputOnFocus" | "textBreakStrategy" | "underlineColorAndroid" | "experimental_acceptDragAndDropTypes" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "allowFontScaling" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "forwardedRef" | "enterKeyHint" | "inputMode" | "keyboardType" | "maxFontSizeMultiplier" | "maxLength" | "multiline" | "onChange" | "onChangeText" | "onContentSizeChange" | "onEndEditing" | "onKeyPress" | "onPress" | "onPressIn" | "onPressOut" | "onSelectionChange" | "onSubmitEditing" | "onScroll" | "placeholder" | "placeholderTextColor" | "readOnly" | "returnKeyType" | "secureTextEntry" | "selectionColor" | "selectTextOnFocus" | "blurOnSubmit" | "submitBehavior" | "value" | "textAlign"> & Omit<Readonly<{
+    disableKeyboardShortcuts?: boolean | undefined;
+    clearButtonMode?: ("never" | "while-editing" | "unless-editing" | "always") | undefined;
+    clearTextOnFocus?: boolean | undefined;
+    dataDetectorTypes?: (import("react-native/types_generated/Libraries/Components/TextInput/TextInput.flow").DataDetectorTypesType | undefined) | ReadonlyArray<import("react-native/types_generated/Libraries/Components/TextInput/TextInput.flow").DataDetectorTypesType>;
+    enablesReturnKeyAutomatically?: boolean | undefined;
+    inputAccessoryViewID?: string | undefined;
+    inputAccessoryViewButtonLabel?: string | undefined;
+    keyboardAppearance?: ("default" | "light" | "dark") | undefined;
+    passwordRules?: import("react-native/types_generated/Libraries/Components/TextInput/TextInput.flow").PasswordRules | undefined;
+    rejectResponderTermination?: boolean | undefined;
+    scrollEnabled?: boolean | undefined;
+    spellCheck?: boolean | undefined;
+    textContentType?: import("react-native").TextContentType | undefined;
+    lineBreakStrategyIOS?: ("none" | "standard" | "hangul-word" | "push-out") | undefined;
+    lineBreakModeIOS?: ("wordWrapping" | "char" | "clip" | "head" | "middle" | "tail") | undefined;
+    smartInsertDelete?: boolean | undefined;
+}>, "onBlur" | "onFocus" | "style" | "selection" | "cursorColor" | "selectionHandleColor" | "disableFullscreenUI" | "importantForAutofill" | "inlineImageLeft" | "inlineImagePadding" | "numberOfLines" | "returnKeyLabel" | "rows" | "showSoftInputOnFocus" | "textBreakStrategy" | "underlineColorAndroid" | "experimental_acceptDragAndDropTypes" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "allowFontScaling" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "forwardedRef" | "enterKeyHint" | "inputMode" | "keyboardType" | "maxFontSizeMultiplier" | "maxLength" | "multiline" | "onChange" | "onChangeText" | "onContentSizeChange" | "onEndEditing" | "onKeyPress" | "onPress" | "onPressIn" | "onPressOut" | "onSelectionChange" | "onSubmitEditing" | "onScroll" | "placeholder" | "placeholderTextColor" | "readOnly" | "returnKeyType" | "secureTextEntry" | "selectionColor" | "selectTextOnFocus" | "blurOnSubmit" | "submitBehavior" | "value" | "textAlign"> & Omit<Readonly<{
+    cursorColor?: import("react-native").ColorValue | undefined;
+    selectionHandleColor?: import("react-native").ColorValue | undefined;
+    disableFullscreenUI?: boolean | undefined;
+    importantForAutofill?: ("auto" | "no" | "noExcludeDescendants" | "yes" | "yesExcludeDescendants") | undefined;
+    inlineImageLeft?: string | undefined;
+    inlineImagePadding?: number | undefined;
+    numberOfLines?: number | undefined;
+    returnKeyLabel?: string | undefined;
+    rows?: number | undefined;
+    showSoftInputOnFocus?: boolean | undefined;
+    textBreakStrategy?: ("simple" | "highQuality" | "balanced") | undefined;
+    underlineColorAndroid?: import("react-native").ColorValue | undefined;
+}>, "onBlur" | "onFocus" | "style" | "selection" | "experimental_acceptDragAndDropTypes" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "allowFontScaling" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "forwardedRef" | "enterKeyHint" | "inputMode" | "keyboardType" | "maxFontSizeMultiplier" | "maxLength" | "multiline" | "onChange" | "onChangeText" | "onContentSizeChange" | "onEndEditing" | "onKeyPress" | "onPress" | "onPressIn" | "onPressOut" | "onSelectionChange" | "onSubmitEditing" | "onScroll" | "placeholder" | "placeholderTextColor" | "readOnly" | "returnKeyType" | "secureTextEntry" | "selectionColor" | "selectTextOnFocus" | "blurOnSubmit" | "submitBehavior" | "value" | "textAlign"> & Omit<Readonly<{
+    experimental_acceptDragAndDropTypes?: ReadonlyArray<string> | undefined;
+    autoCapitalize?: import("react-native").AutoCapitalize | undefined;
+    autoComplete?: ("additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | "cc-exp-day" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "cc-name" | "cc-given-name" | "cc-middle-name" | "cc-family-name" | "cc-type" | "country" | "current-password" | "email" | "family-name" | "gender" | "given-name" | "honorific-prefix" | "honorific-suffix" | "name" | "name-family" | "name-given" | "name-middle" | "name-middle-initial" | "name-prefix" | "name-suffix" | "new-password" | "nickname" | "one-time-code" | "organization" | "organization-title" | "password" | "password-new" | "postal-address" | "postal-address-country" | "postal-address-extended" | "postal-address-extended-postal-code" | "postal-address-locality" | "postal-address-region" | "postal-code" | "street-address" | "sms-otp" | "tel" | "tel-country-code" | "tel-national" | "tel-device" | "url" | "username" | "username-new" | "off") | undefined;
+    autoCorrect?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    allowFontScaling?: boolean | undefined;
+    caretHidden?: boolean | undefined;
+    contextMenuHidden?: boolean | undefined;
+    defaultValue?: string | undefined;
+    editable?: boolean | undefined;
+    forwardedRef?: React.Ref<import("react-native/types_generated/Libraries/Components/TextInput/TextInput.flow").TextInputInstance> | undefined;
+    enterKeyHint?: import("react-native").EnterKeyHintTypeOptions | undefined;
+    inputMode?: import("react-native").InputModeOptions | undefined;
+    keyboardType?: import("react-native").KeyboardTypeOptions | undefined;
+    maxFontSizeMultiplier?: number | undefined;
+    maxLength?: number | undefined;
+    multiline?: boolean | undefined;
+    onBlur?: ((e: import("react-native/types_generated/Libraries/Components/TextInput/TextInput.flow").TextInputBlurEvent) => unknown) | undefined;
+    onChange?: ((e: import("react-native").TextInputChangeEvent) => unknown) | undefined;
+    onChangeText?: ((text: string) => unknown) | undefined;
+    onContentSizeChange?: ((e: import("react-native").TextInputContentSizeChangeEvent) => unknown) | undefined;
+    onEndEditing?: ((e: import("react-native").TextInputEndEditingEvent) => unknown) | undefined;
+    onFocus?: ((e: import("react-native").TextInputFocusEvent) => unknown) | undefined;
+    onKeyPress?: ((e: import("react-native").TextInputKeyPressEvent) => unknown) | undefined;
+    onPress?: ((event: import("react-native").GestureResponderEvent) => unknown) | undefined;
+    onPressIn?: ((event: import("react-native").GestureResponderEvent) => unknown) | undefined;
+    onPressOut?: ((event: import("react-native").GestureResponderEvent) => unknown) | undefined;
+    onSelectionChange?: ((e: import("react-native").TextInputSelectionChangeEvent) => unknown) | undefined;
+    onSubmitEditing?: ((e: import("react-native").TextInputSubmitEditingEvent) => unknown) | undefined;
+    onScroll?: ((e: import("react-native").ScrollEvent) => unknown) | undefined;
+    placeholder?: string | undefined;
+    placeholderTextColor?: import("react-native").ColorValue | undefined;
+    readOnly?: boolean | undefined;
+    returnKeyType?: import("react-native").ReturnKeyTypeOptions | undefined;
+    secureTextEntry?: boolean | undefined;
+    selection?: Readonly<{
+        start: number;
+        end?: number | undefined;
+    }> | undefined;
+    selectionColor?: import("react-native").ColorValue | undefined;
+    selectTextOnFocus?: boolean | undefined;
+    blurOnSubmit?: boolean | undefined;
+    submitBehavior?: import("react-native").SubmitBehavior | undefined;
+    style?: import("react-native/types_generated/Libraries/StyleSheet/StyleSheet").TextStyleProp | undefined;
+    value?: string | undefined;
+    textAlign?: ("left" | "center" | "right") | undefined;
+}>, never>>, "value"> & {
+    transformer: import("./Transformer").Transformer;
+} & import("react").RefAttributes<TransformerTextInputInstance>>;
+//# sourceMappingURL=TransformerTextInput.web.d.ts.map

package/lib/typescript/src/TransformerTextInput.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransformerTextInput.web.d.ts","sourceRoot":"","sources":["../../../src/TransformerTextInput.web.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,4BAA4B,EAGlC,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EACV,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,8BAA8B,CAAC;AAkBtC,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAiIspkB,CAAC;;;;;;;;;;;gEADvrkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-transformer-text-input",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "TextInput component that allows transforming text synchronously with a worklet",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -57,7 +57,7 @@
     "prepare": "bob build",
     "generate:phone-data": "tsx scripts/generate-phone-data.ts",
     "test": "jest",
-    "lint": "yarn lint:eslint && yarn lint:ts && yarn lint:android",
+    "lint": "yarn lint:eslint && yarn lint:ts",
     "lint:ts": "tsc",
     "lint:eslint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:android": "cd example/android && RNTTI_WARNINGS_AS_ERRORS=true ./gradlew :react-native-transformer-text-input:lint --rerun-tasks",

package/src/Transformer.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 export type Selection = { start: number; end: number };
 
 export type TransformerWorklet = (input: {
@@ -17,11 +19,17 @@ export class Transformer {
   private readonly _worklet: TransformerWorklet;
 
   constructor(worklet: TransformerWorklet) {
-    const workletHash = (worklet as { __workletHash?: number }).__workletHash;
-    if (workletHash == null) {
-      throw new Error(
-        '[rntti] Transformer must be a worklet. Did you forget to add the "worklet" directive?',
-      );
+    // On web there is no UI runtime: the web TransformerTextInput runs the
+    // worklet synchronously in JS, so it doesn't need to be compiled by the
+    // worklets plugin. Native runs it on the UI thread and requires a real
+    // worklet, so keep enforcing the directive there.
+    if (Platform.OS !== 'web') {
+      const workletHash = (worklet as { __workletHash?: number }).__workletHash;
+      if (workletHash == null) {
+        throw new Error(
+          '[rntti] Transformer must be a worklet. Did you forget to add the "worklet" directive?',
+        );
+      }
     }
     this._worklet = worklet;
   }

package/src/TransformerTextInput.tsx

@@ -7,57 +7,24 @@ import {
   type ElementRef,
   type Ref,
 } from 'react';
-import {
-  StyleSheet,
-  TextInput,
-  type HostInstance,
-  type TextInputProps,
-} from 'react-native';
-import { type Selection, type Transformer } from './Transformer';
+import { StyleSheet, TextInput, type HostInstance } from 'react-native';
+import { type Selection } from './Transformer';
 import TransformerTextInputDecoratorViewNativeComponent, {
   Commands,
 } from './TransformerTextInputDecoratorViewNativeComponent';
 import { registerTransformer, unregisterTransformer } from './registry';
 import useMergeRefs from './utils/useMergeRefs';
 import { validateSelection } from './selection';
+import {
+  type TransformerTextInputInstance,
+  type TransformerTextInputInstanceMethods,
+  type TransformerTextInputProps,
+} from './TransformerTextInput.types';
 
-type TransformerTextInputInstanceMethods = {
-  /**
-   * Get the current text value.
-   */
-  getValue: () => string;
-  /**
-   * Update the value and/or selection, optionally running the transformer.
-   */
-  update: (options: {
-    /**
-     * New value to apply.
-     */
-    value?: string | null;
-    /**
-     * Optional selection to apply alongside the value.
-     */
-    selection?: { start: number; end: number };
-    /**
-     * Whether to run the transformer on update. Defaults to true.
-     */
-    transform?: boolean;
-  }) => void;
-  /**
-   * Clear the input value without running the transformer.
-   */
-  clear: () => void;
-};
-
-export type TransformerTextInputInstance = HostInstance &
-  TransformerTextInputInstanceMethods;
-
-export type TransformerTextInputProps = Omit<TextInputProps, 'value'> & {
-  /**
-   * Transformer instance used to sync text changes on the UI thread.
-   */
-  transformer: Transformer;
-};
+export type {
+  TransformerTextInputInstance,
+  TransformerTextInputProps,
+} from './TransformerTextInput.types';
 
 export const TransformerTextInput = forwardRef(
   (

package/src/TransformerTextInput.types.ts

@@ -0,0 +1,40 @@
+import { type HostInstance, type TextInputProps } from 'react-native';
+import { type Transformer } from './Transformer';
+
+export type TransformerTextInputInstanceMethods = {
+  /**
+   * Get the current text value.
+   */
+  getValue: () => string;
+  /**
+   * Update the value and/or selection, optionally running the transformer.
+   */
+  update: (options: {
+    /**
+     * New value to apply.
+     */
+    value?: string | null;
+    /**
+     * Optional selection to apply alongside the value.
+     */
+    selection?: { start: number; end: number };
+    /**
+     * Whether to run the transformer on update. Defaults to true.
+     */
+    transform?: boolean;
+  }) => void;
+  /**
+   * Clear the input value without running the transformer.
+   */
+  clear: () => void;
+};
+
+export type TransformerTextInputInstance = HostInstance &
+  TransformerTextInputInstanceMethods;
+
+export type TransformerTextInputProps = Omit<TextInputProps, 'value'> & {
+  /**
+   * Transformer instance used to sync text changes on the UI thread.
+   */
+  transformer: Transformer;
+};

package/src/TransformerTextInput.web.tsx

@@ -0,0 +1,161 @@
+import { forwardRef, useCallback, useMemo, useRef, type Ref } from 'react';
+import { TextInput } from 'react-native';
+import { type Selection } from './Transformer';
+import { computeUncontrolledSelection, validateSelection } from './selection';
+import useMergeRefs from './utils/useMergeRefs';
+import {
+  type TransformerTextInputInstance,
+  type TransformerTextInputInstanceMethods,
+  type TransformerTextInputProps,
+} from './TransformerTextInput.types';
+
+export type {
+  TransformerTextInputInstance,
+  TransformerTextInputProps,
+} from './TransformerTextInput.types';
+
+// The web host node is a DOM input; type only the bits we use so the library's
+// tsconfig doesn't need the `dom` lib.
+type WebInputNode = {
+  value: string;
+  selectionStart: number | null;
+  selectionEnd: number | null;
+  setSelectionRange: (start: number, end: number) => void;
+};
+
+// Web implementation. There is no UI thread, so instead of the native decorator
+// running the transformer worklet on the UI runtime, we run the same transformer
+// synchronously in JS on every change. The input is uncontrolled: the formatted
+// value and caret are written straight to the DOM node in the change handler
+// (mirroring the native side's imperative update), so there's no React
+// re-render and no intermediate paint where the caret jumps to the end. Web is
+// single-threaded, so value and selection land together in one step.
+export const TransformerTextInput = forwardRef(
+  (
+    {
+      transformer,
+      onChangeText,
+      defaultValue,
+      ...others
+    }: TransformerTextInputProps,
+    forwardedRef: Ref<TransformerTextInputInstance>,
+  ) => {
+    const transformedDefaultValue = useMemo(() => {
+      if (defaultValue == null) {
+        return '';
+      }
+      const result = transformer.worklet({
+        value: defaultValue,
+        previousValue: defaultValue,
+        selection: { start: defaultValue.length, end: defaultValue.length },
+        previousSelection: { start: 0, end: 0 },
+      });
+      return result?.value ?? defaultValue;
+    }, [defaultValue, transformer]);
+
+    const valueRef = useRef(transformedDefaultValue);
+    const previousRef = useRef<{ value: string; selection: Selection }>({
+      value: transformedDefaultValue,
+      selection: {
+        start: transformedDefaultValue.length,
+        end: transformedDefaultValue.length,
+      },
+    });
+    const nodeRef = useRef<WebInputNode | null>(null);
+
+    const applyTransform = useCallback(
+      (
+        rawValue: string,
+        rawSelection: Selection,
+        transform: boolean,
+      ): string => {
+        const prev = previousRef.current;
+        const result = transform
+          ? transformer.worklet({
+              value: rawValue,
+              previousValue: prev.value,
+              selection: rawSelection,
+              previousSelection: prev.selection,
+            })
+          : null;
+        const newValue = result?.value ?? rawValue;
+        let newSelection: Selection;
+        if (result?.selection != null) {
+          newSelection = result.selection;
+          validateSelection(newSelection, newValue.length);
+        } else {
+          newSelection = computeUncontrolledSelection(
+            rawValue,
+            newValue,
+            rawSelection.start,
+            rawSelection.end,
+          );
+        }
+        previousRef.current = { value: newValue, selection: newSelection };
+        valueRef.current = newValue;
+        // Write straight to the DOM node — uncontrolled, no React re-render.
+        const node = nodeRef.current;
+        if (node != null) {
+          node.value = newValue;
+          if (typeof node.setSelectionRange === 'function') {
+            node.setSelectionRange(newSelection.start, newSelection.end);
+          }
+        }
+        return newValue;
+      },
+      [transformer],
+    );
+
+    const handleChangeText = useCallback(
+      (text: string) => {
+        // On web the DOM caret sits right after the edit when onChangeText
+        // fires; read it so the transformer can map it like the native side.
+        const node = nodeRef.current;
+        const rawSelection: Selection =
+          node != null && typeof node.selectionStart === 'number'
+            ? {
+                start: node.selectionStart,
+                end: node.selectionEnd ?? node.selectionStart,
+              }
+            : { start: text.length, end: text.length };
+        const newValue = applyTransform(text, rawSelection, true);
+        onChangeText?.(newValue);
+      },
+      [applyTransform, onChangeText],
+    );
+
+    const setInputRef = useCallback(
+      (instance: TransformerTextInputInstance | null) => {
+        nodeRef.current = instance as unknown as WebInputNode | null;
+        if (instance != null) {
+          Object.assign(instance, {
+            getValue() {
+              return valueRef.current;
+            },
+            update({ value: nextValue, selection, transform }) {
+              const base = nextValue ?? valueRef.current;
+              const sel = selection ?? { start: base.length, end: base.length };
+              applyTransform(base, sel, transform ?? true);
+            },
+            clear() {
+              this.update({ value: '', transform: false });
+            },
+          } satisfies TransformerTextInputInstanceMethods);
+        }
+      },
+      [applyTransform],
+    );
+
+    const inputRef = useMergeRefs(setInputRef, forwardedRef);
+
+    return (
+      <TextInput
+        // @ts-expect-error web host node carries the instance methods
+        ref={inputRef}
+        defaultValue={transformedDefaultValue}
+        onChangeText={handleChangeText}
+        {...others}
+      />
+    );
+  },
+);