@tamagui/input 1.143.0 → 2.0.0-1

package/dist/cjs/Input.cjs

@@ -40,147 +40,82 @@ var import_core = require("@tamagui/core"),
   import_shared = require("./shared.cjs"),
   import_jsx_runtime = require("react/jsx-runtime");
 const StyledInput = (0, import_core.styled)(import_core.View, import_shared.styledBody[0], import_shared.styledBody[1]),
-  Input = StyledInput.styleable((inProps, forwardedRef) => {
+  Input = StyledInput.styleable((props, forwardedRef) => {
     const {
-        // some of destructed props are just to avoid passing them to ...rest because they are not in web.
-        allowFontScaling,
-        selectTextOnFocus,
-        showSoftInputOnFocus,
-        textContentType,
-        passwordRules,
-        textBreakStrategy,
-        underlineColorAndroid,
-        selection,
-        lineBreakStrategyIOS,
-        returnKeyLabel,
         disabled,
-        onSubmitEditing,
-        caretHidden,
-        clearButtonMode,
-        clearTextOnFocus,
-        contextMenuHidden,
-        dataDetectorTypes,
         id,
-        enablesReturnKeyAutomatically,
-        importantForAutofill,
-        inlineImageLeft,
-        inlineImagePadding,
-        inputAccessoryViewID,
-        keyboardAppearance,
-        keyboardType,
-        cursorColor,
-        disableFullscreenUI,
-        editable,
-        maxFontSizeMultiplier,
-        multiline,
-        numberOfLines,
         onChangeText,
-        onContentSizeChange,
-        onEndEditing,
-        onScroll,
+        onSubmitEditing,
         onSelectionChange,
-        caretColor,
+        selection,
         placeholderTextColor,
-        blurOnSubmit,
-        enterKeyHint,
-        returnKeyType,
-        rejectResponderTermination,
-        scrollEnabled,
-        secureTextEntry,
         selectionColor,
-        inputMode,
+        rows,
         ...rest
-      } = inProps,
+      } = props,
       ref = import_react.default.useRef(null),
       theme = (0, import_core.useTheme)(),
-      composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref),
-      _onSelectionChange = (0, import_core.useEvent)(() => {
-        const start = ref.current?.selectionStart ?? 0,
-          end = ref.current?.selectionEnd ?? 0;
-        onSelectionChange?.({
+      composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref);
+    import_react.default.useEffect(() => {
+      if (!onSelectionChange) return;
+      const node = ref.current;
+      if (!node) return;
+      const handleSelectionChange = () => {
+        onSelectionChange({
           nativeEvent: {
             selection: {
-              end,
-              start
+              start: node.selectionStart ?? 0,
+              end: node.selectionEnd ?? 0
             }
           }
         });
-      });
-    import_react.default.useEffect(() => {
-      if (onSelectionChange) return ref.current?.addEventListener("selectionchange", _onSelectionChange), () => {
-        ref.current?.removeEventListener("selectionchange", _onSelectionChange);
       };
-    }, []), import_react.default.useEffect(() => {
-      selection && ref.current?.setSelectionRange(selection.start || null, selection.end || null);
-    }, [selection?.start, selection?.end]);
-    const finalProps = {
-      ...rest,
-      disabled,
-      caretColor,
-      id,
-      enterKeyHint,
-      type: (() => {
-        if (rest?.type) return rest.type;
-        if (secureTextEntry) return "password";
-        switch (keyboardType) {
-          case "number-pad":
-          case "numeric":
-            return "number";
-          case "email-address":
-            return "email";
-          case "phone-pad":
-            return "tel";
-          case "url":
-            return "url";
-          default:
-            return "text";
-        }
-      })(),
-      inputMode: (() => {
-        switch (keyboardType) {
-          case "number-pad":
-          case "numeric":
-            return "numeric";
-          case "decimal-pad":
-            return "decimal";
-          case "email-address":
-            return "email";
-          case "phone-pad":
-            return "tel";
-          case "url":
-            return "url";
-          default:
-            return;
-        }
-      })(),
-      style: {
-        ...rest.style,
-        ...(placeholderTextColor && {
-          "--placeholderColor": theme[placeholderTextColor]?.variable || placeholderTextColor
-        }),
-        ...(selectionColor && {
-          "--selectionColor": theme[selectionColor]?.variable || selectionColor
-        })
-      }
-    };
-    return import_react.default.useEffect(() => {
-      if (id && !disabled) return (0, import_focusable.registerFocusable)(id, {
-        focusAndSelect: () => {
-          ref.current?.focus();
-        },
-        focus: () => {}
+      return node.addEventListener("select", handleSelectionChange), () => node.removeEventListener("select", handleSelectionChange);
+    }, [onSelectionChange]), import_react.default.useEffect(() => {
+      selection && ref.current && ref.current.setSelectionRange(selection.start, selection.end ?? selection.start);
+    }, [selection?.start, selection?.end]), import_react.default.useEffect(() => {
+      if (!(!id || disabled)) return (0, import_focusable.registerFocusable)(id, {
+        focusAndSelect: () => ref.current?.focus(),
+        focus: () => ref.current?.focus()
       });
-    }, [id, disabled]), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    }, [id, disabled]);
+    const handleKeyDown = e => {
+        e.key === "Enter" && onSubmitEditing && onSubmitEditing({
+          nativeEvent: {
+            text: e.target.value
+          }
+        }), rest.onKeyDown?.(e);
+      },
+      handleChange = e => {
+        onChangeText?.(e.target.value), rest.onChange?.(e);
+      },
+      finalProps = {
+        ...rest,
+        disabled,
+        id,
+        rows,
+        onKeyDown: onSubmitEditing ? handleKeyDown : rest.onKeyDown,
+        onChange: onChangeText ? handleChange : rest.onChange,
+        style: {
+          ...rest.style,
+          ...(placeholderTextColor && {
+            "--placeholderColor": theme[placeholderTextColor]?.variable || placeholderTextColor
+          }),
+          ...(selectionColor && {
+            "--selectionColor": theme[selectionColor]?.variable || selectionColor
+          })
+        }
+      };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("style", {
         children: `
-      input::selection, textarea::selection {
-        background-color: var(--selectionBackground) !important;
-      }
-      
-      input::placeholder, textarea::placeholder {
-        color: var(--placeholderColor) !important;
-      }
-      `
+          input::selection, textarea::selection {
+            background-color: var(--selectionColor) !important;
+          }
+          input::placeholder, textarea::placeholder {
+            color: var(--placeholderColor) !important;
+          }
+        `
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledInput, {
         ref: composedRefs,
         ...finalProps

package/dist/cjs/Input.js

@@ -26,115 +26,56 @@ __export(Input_exports, {
 });
 module.exports = __toCommonJS(Input_exports);
 var import_core = require("@tamagui/core"), import_focusable = require("@tamagui/focusable"), import_react = __toESM(require("react"), 1), import_shared = require("./shared"), import_jsx_runtime = require("react/jsx-runtime");
-const StyledInput = (0, import_core.styled)(import_core.View, import_shared.styledBody[0], import_shared.styledBody[1]), Input = StyledInput.styleable((inProps, forwardedRef) => {
+const StyledInput = (0, import_core.styled)(import_core.View, import_shared.styledBody[0], import_shared.styledBody[1]), Input = StyledInput.styleable((props, forwardedRef) => {
   const {
-    // some of destructed props are just to avoid passing them to ...rest because they are not in web.
-    allowFontScaling,
-    selectTextOnFocus,
-    showSoftInputOnFocus,
-    textContentType,
-    passwordRules,
-    textBreakStrategy,
-    underlineColorAndroid,
-    selection,
-    lineBreakStrategyIOS,
-    returnKeyLabel,
     disabled,
-    onSubmitEditing,
-    caretHidden,
-    clearButtonMode,
-    clearTextOnFocus,
-    contextMenuHidden,
-    dataDetectorTypes,
     id,
-    enablesReturnKeyAutomatically,
-    importantForAutofill,
-    inlineImageLeft,
-    inlineImagePadding,
-    inputAccessoryViewID,
-    keyboardAppearance,
-    keyboardType,
-    cursorColor,
-    disableFullscreenUI,
-    editable,
-    maxFontSizeMultiplier,
-    multiline,
-    numberOfLines,
     onChangeText,
-    onContentSizeChange,
-    onEndEditing,
-    onScroll,
+    onSubmitEditing,
     onSelectionChange,
-    caretColor,
+    selection,
     placeholderTextColor,
-    blurOnSubmit,
-    enterKeyHint,
-    returnKeyType,
-    rejectResponderTermination,
-    scrollEnabled,
-    secureTextEntry,
     selectionColor,
-    inputMode,
+    rows,
     ...rest
-  } = inProps, ref = import_react.default.useRef(null), theme = (0, import_core.useTheme)(), composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref), _onSelectionChange = (0, import_core.useEvent)(() => {
-    const start = ref.current?.selectionStart ?? 0, end = ref.current?.selectionEnd ?? 0;
-    onSelectionChange?.({
-      nativeEvent: {
-        selection: {
-          end,
-          start
-        }
-      }
-    });
-  });
+  } = props, ref = import_react.default.useRef(null), theme = (0, import_core.useTheme)(), composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref);
   import_react.default.useEffect(() => {
-    if (onSelectionChange)
-      return ref.current?.addEventListener("selectionchange", _onSelectionChange), () => {
-        ref.current?.removeEventListener("selectionchange", _onSelectionChange);
-      };
-  }, []), import_react.default.useEffect(() => {
-    selection && ref.current?.setSelectionRange(selection.start || null, selection.end || null);
-  }, [selection?.start, selection?.end]);
-  const finalProps = {
+    if (!onSelectionChange) return;
+    const node = ref.current;
+    if (!node) return;
+    const handleSelectionChange = () => {
+      onSelectionChange({
+        nativeEvent: {
+          selection: {
+            start: node.selectionStart ?? 0,
+            end: node.selectionEnd ?? 0
+          }
+        }
+      });
+    };
+    return node.addEventListener("select", handleSelectionChange), () => node.removeEventListener("select", handleSelectionChange);
+  }, [onSelectionChange]), import_react.default.useEffect(() => {
+    selection && ref.current && ref.current.setSelectionRange(selection.start, selection.end ?? selection.start);
+  }, [selection?.start, selection?.end]), import_react.default.useEffect(() => {
+    if (!(!id || disabled))
+      return (0, import_focusable.registerFocusable)(id, {
+        focusAndSelect: () => ref.current?.focus(),
+        focus: () => ref.current?.focus()
+      });
+  }, [id, disabled]);
+  const handleKeyDown = (e) => {
+    e.key === "Enter" && onSubmitEditing && onSubmitEditing({
+      nativeEvent: { text: e.target.value }
+    }), rest.onKeyDown?.(e);
+  }, handleChange = (e) => {
+    onChangeText?.(e.target.value), rest.onChange?.(e);
+  }, finalProps = {
     ...rest,
     disabled,
-    caretColor,
     id,
-    enterKeyHint,
-    type: (() => {
-      if (rest?.type) return rest.type;
-      if (secureTextEntry) return "password";
-      switch (keyboardType) {
-        case "number-pad":
-        case "numeric":
-          return "number";
-        case "email-address":
-          return "email";
-        case "phone-pad":
-          return "tel";
-        case "url":
-          return "url";
-        default:
-          return "text";
-      }
-    })(),
-    inputMode: (() => {
-      switch (keyboardType) {
-        case "number-pad":
-        case "numeric":
-          return "numeric";
-        case "decimal-pad":
-          return "decimal";
-        case "email-address":
-          return "email";
-        case "phone-pad":
-          return "tel";
-        case "url":
-          return "url";
-        default:
-          return;
-      }
-    })(),
+    rows,
+    onKeyDown: onSubmitEditing ? handleKeyDown : rest.onKeyDown,
+    onChange: onChangeText ? handleChange : rest.onChange,
     style: {
       ...rest.style,
       ...placeholderTextColor && {
@@ -145,25 +86,15 @@ const StyledInput = (0, import_core.styled)(import_core.View, import_shared.styl
       }
     }
   };
-  return import_react.default.useEffect(() => {
-    if (id && !disabled)
-      return (0, import_focusable.registerFocusable)(id, {
-        focusAndSelect: () => {
-          ref.current?.focus();
-        },
-        focus: () => {
-        }
-      });
-  }, [id, disabled]), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
-      input::selection, textarea::selection {
-        background-color: var(--selectionBackground) !important;
-      }
-      
-      input::placeholder, textarea::placeholder {
-        color: var(--placeholderColor) !important;
-      }
-      ` }),
+          input::selection, textarea::selection {
+            background-color: var(--selectionColor) !important;
+          }
+          input::placeholder, textarea::placeholder {
+            color: var(--placeholderColor) !important;
+          }
+        ` }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledInput, { ref: composedRefs, ...finalProps })
   ] });
 });

package/dist/cjs/Input.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Input.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAkE,0BAClE,mBAAkC,+BAClC,eAAwE,8BACxE,gBAA2B,qBAuKvB;AApKJ,MAAM,kBAAc,oBAAO,kBAAM,yBAAW,CAAC,GAAG,yBAAW,CAAC,CAAC,GAMhD,QAAQ,YAAY,UAAsB,CAAC,SAAS,iBAAiB;AAChF,QAAM;AAAA;AAAA,IAEJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,SAEE,MAAM,aAAAA,QAAM,OAAyB,IAAI,GACzC,YAAQ,sBAAS,GAEjB,mBAAe,6BAAgB,cAAc,GAAG,GAEhD,yBAAqB,sBAAS,MAAM;AACxC,UAAM,QAAQ,IAAI,SAAS,kBAAkB,GACvC,MAAM,IAAI,SAAS,gBAAgB;AACzC,wBAAoB;AAAA,MAClB,aAAa;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAQ;AAAA,EACV,CAAC;AAED,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI;AACF,iBAAI,SAAS,iBAAiB,mBAAmB,kBAAkB,GAC5D,MAAM;AACX,YAAI,SAAS,oBAAoB,mBAAmB,kBAAkB;AAAA,MACxE;AAAA,EAEJ,GAAG,CAAC,CAAC,GAEL,aAAAA,QAAM,UAAU,MAAM;AACpB,IAAI,aACF,IAAI,SAAS,kBAAkB,UAAU,SAAS,MAAM,UAAU,OAAO,IAAI;AAAA,EAEjF,GAAG,CAAC,WAAW,OAAO,WAAW,GAAG,CAAC;AAErC,QAAM,aAAa;AAAA,IACjB,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAGM,OAAO,MAAM;AACX,UAAI,MAAM,KAAM,QAAO,KAAK;AAC5B,UAAI,gBAAiB,QAAO;AAC5B,cAAQ,cAAc;AAAA,QACpB,KAAK;AAAA,QACL,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACX;AAAA,IACF,GAAG;AAAA,IACH,YAAY,MAAM;AAChB,cAAQ,cAAc;AAAA,QACpB,KAAK;AAAA,QACL,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE;AAAA,MACJ;AAAA,IACF,GAAG;AAAA,IAOT,OAAO;AAAA,MACL,GAAI,KAAK;AAAA,MACT,GAAI,wBAAwB;AAAA,QAC1B,sBACE,MAAM,oBAAoB,GAAG,YAAY;AAAA,MAC7C;AAAA,MACA,GAAI,kBAAkB;AAAA,QACpB,oBAAoB,MAAM,cAAc,GAAG,YAAY;AAAA,MACzD;AAAA,IACF;AAAA,EACF;AAEA,sBAAAA,QAAM,UAAU,MAAM;AACpB,QAAK,MACD;AAEJ,iBAAO,oCAAkB,IAAI;AAAA,QAC3B,gBAAgB,MAAM;AACpB,cAAI,SAAS,MAAM;AAAA,QACrB;AAAA,QACA,OAAO,MAAM;AAAA,QAAC;AAAA,MAChB,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,QAAQ,CAAC,GAGf,4EAEI;AAAA,gDAAC,WACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SASH;AAAA,IAGF,4CAAC,eAAY,KAAK,cAAe,GAAG,YAAY;AAAA,KAClD;AAEJ,CAAC;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAwD,0BACxD,mBAAkC,+BAClC,eAAkB,8BAClB,gBAA2B,qBAqGvB;AAlGJ,MAAM,kBAAc,oBAAO,kBAAM,yBAAW,CAAC,GAAG,yBAAW,CAAC,CAAC,GAMhD,QAAQ,YAAY,UAAsB,CAAC,OAAO,iBAAiB;AAC9E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,OAEE,MAAM,aAAAA,QAAM,OAAyB,IAAI,GACzC,YAAQ,sBAAS,GACjB,mBAAe,6BAAgB,cAAc,GAAG;AAGtD,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,kBAAmB;AAExB,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAM;AAEX,UAAM,wBAAwB,MAAM;AAClC,wBAAkB;AAAA,QAChB,aAAa;AAAA,UACX,WAAW;AAAA,YACT,OAAO,KAAK,kBAAkB;AAAA,YAC9B,KAAK,KAAK,gBAAgB;AAAA,UAC5B;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAEA,gBAAK,iBAAiB,UAAU,qBAAqB,GAC9C,MAAM,KAAK,oBAAoB,UAAU,qBAAqB;AAAA,EACvE,GAAG,CAAC,iBAAiB,CAAC,GAGtB,aAAAA,QAAM,UAAU,MAAM;AACpB,IAAI,aAAa,IAAI,WACnB,IAAI,QAAQ,kBAAkB,UAAU,OAAO,UAAU,OAAO,UAAU,KAAK;AAAA,EAEnF,GAAG,CAAC,WAAW,OAAO,WAAW,GAAG,CAAC,GAGrC,aAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,GAAC,MAAM;AACX,iBAAO,oCAAkB,IAAI;AAAA,QAC3B,gBAAgB,MAAM,IAAI,SAAS,MAAM;AAAA,QACzC,OAAO,MAAM,IAAI,SAAS,MAAM;AAAA,MAClC,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,QAAQ,CAAC;AAGjB,QAAM,gBAAgB,CAAC,MAA6C;AAClE,IAAI,EAAE,QAAQ,WAAW,mBACvB,gBAAgB;AAAA,MACd,aAAa,EAAE,MAAO,EAAE,OAA4B,MAAM;AAAA,IAC5D,CAAC,GAEH,KAAK,YAAY,CAAC;AAAA,EACpB,GAGM,eAAe,CAAC,MAA2C;AAC/D,mBAAe,EAAE,OAAO,KAAK,GAC7B,KAAK,WAAW,CAAC;AAAA,EACnB,GAEM,aAAa;AAAA,IACjB,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,kBAAkB,gBAAgB,KAAK;AAAA,IAClD,UAAU,eAAe,eAAe,KAAK;AAAA,IAC7C,OAAO;AAAA,MACL,GAAI,KAAK;AAAA,MACT,GAAI,wBAAwB;AAAA,QAC1B,sBACE,MAAM,oBAAoB,GAAG,YAAY;AAAA,MAC7C;AAAA,MACA,GAAI,kBAAkB;AAAA,QACpB,oBAAoB,MAAM,cAAc,GAAG,YAAY;AAAA,MACzD;AAAA,IACF;AAAA,EACF;AAEA,SACE,4EACE;AAAA,gDAAC,WACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQH;AAAA,IACA,4CAAC,eAAY,KAAK,cAAe,GAAG,YAAY;AAAA,KAClD;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/Input.native.js

@@ -38,98 +38,160 @@ __export(Input_native_exports, {
 module.exports = __toCommonJS(Input_native_exports);
 var import_jsx_runtime = require("react/jsx-runtime"),
   import_react = __toESM(require("react"), 1),
+  import_react_native = require("react-native"),
   import_core = require("@tamagui/core"),
   import_focusable = require("@tamagui/focusable"),
-  import_react_native = require("react-native"),
   import_shared = require("./shared.native.js"),
   StyledInput = (0, import_core.styled)(import_react_native.TextInput, import_shared.styledBody[0], import_shared.styledBody[1]),
-  Input = StyledInput.styleable(function (inProps, forwardedRef) {
-    var {
-        // some of destructed props are just to avoid passing them to ...rest because they are not in native.
+  Input = StyledInput.styleable(function (props, forwardedRef) {
+    var _theme_placeholderTextColor,
+      _theme_selectionColor,
+      {
+        // Web props we need to convert
         type,
-        //@ts-ignore
+        disabled,
+        readOnly,
+        id,
+        rows,
+        autoComplete,
+        enterKeyHint,
+        // Tamagui color props
+        placeholderTextColor,
+        selectionColor,
+        // Callbacks
+        onChange,
+        onInput,
+        onKeyDown,
+        onChangeText,
+        onSubmitEditing,
+        onSelectionChange,
+        selection,
+        // Web-only props to filter out
+        // @ts-ignore
         dirname,
-        max,
         min,
+        max,
         minLength,
         multiple,
         name,
+        pattern,
         required,
         step,
-        disabled,
-        id,
-        caretColor,
-        onChange,
-        onInput,
-        rows,
-        enterKeyHint,
-        returnKeyType,
-        onKeyDown,
-        inputMode,
         tag,
         ...rest
-      } = inProps,
+      } = props,
       ref = import_react.default.useRef(null),
+      theme = (0, import_core.useTheme)(),
       composedRefs = (0, import_core.useComposedRefs)(forwardedRef, ref),
       secureTextEntry = !1,
-      cursorColor = caretColor,
-      _returnKeyType = returnKeyType,
-      _enterKeyHint = enterKeyHint;
-    enterKeyHint === "go" && (_returnKeyType = "go", _enterKeyHint = void 0);
-    var _inputMode = inputMode;
-    type === "email" ? _inputMode = "email" : type === "tel" ? _inputMode = "tel" : type === "search" ? _inputMode = "search" : type === "url" ? _inputMode = "url" : type === "password" ? (secureTextEntry = !0, _inputMode = "text") : type === "number" ? _inputMode = "numeric" : _inputMode = "text";
-    var showSoftInputOnFocus = !0;
-    inputMode === "none" && (showSoftInputOnFocus = !1);
-    var finalProps = {
-      ...rest,
-      inputMode: _inputMode,
-      showSoftInputOnFocus,
-      disabled,
-      id,
-      cursorColor,
-      enterKeyHint: _enterKeyHint,
-      returnKeyType: _returnKeyType,
-      secureTextEntry,
-      numberOfLines: rows || rest.numberOfLines
-    };
-    return tag === "textarea" && (finalProps.multiline = !0), onKeyDown && (finalProps.onKeyPress = function (e) {
-      var {
-        key
-      } = e.nativeEvent;
-      (key === "Backspace" || tag === "textarea" && key === "Enter" || key.length === 1) && onKeyDown({
-        key,
-        type: "keydown"
-      });
-    }, finalProps.onSubmitEditing = function (e) {
-      onKeyDown({
-        key: "Enter",
-        type: "keydown"
-      });
-    }), (onChange || onInput) && (finalProps.onChange = function (e) {
-      var {
-        text
-      } = e.nativeEvent;
-      onChange && onChange({
-        target: {
-          value: text
-        },
-        type: "change"
-      }), onInput?.({
-        target: {
-          value: text
-        },
-        type: "input"
-      });
-    }), import_react.default.useEffect(function () {
-      if (id && !disabled) return (0, import_focusable.registerFocusable)(id, {
+      keyboardType = "default",
+      inputMode = void 0;
+    switch (type) {
+      case "password":
+        secureTextEntry = !0;
+        break;
+      case "email":
+        keyboardType = "email-address", inputMode = "email";
+        break;
+      case "tel":
+        keyboardType = "phone-pad", inputMode = "tel";
+        break;
+      case "number":
+        keyboardType = "numeric", inputMode = "numeric";
+        break;
+      case "url":
+        keyboardType = "url", inputMode = "url";
+        break;
+      case "search":
+        inputMode = "search";
+        break;
+    }
+    var returnKeyType = void 0;
+    switch (enterKeyHint) {
+      case "done":
+        returnKeyType = "done";
+        break;
+      case "go":
+        returnKeyType = "go";
+        break;
+      case "next":
+        returnKeyType = "next";
+        break;
+      case "search":
+        returnKeyType = "search";
+        break;
+      case "send":
+        returnKeyType = "send";
+        break;
+    }
+    var _theme_placeholderTextColor_val,
+      resolvedPlaceholderColor = placeholderTextColor ? (0, import_core.getTokenValue)((_theme_placeholderTextColor_val = (_theme_placeholderTextColor = theme[placeholderTextColor]) === null || _theme_placeholderTextColor === void 0 ? void 0 : _theme_placeholderTextColor.val) !== null && _theme_placeholderTextColor_val !== void 0 ? _theme_placeholderTextColor_val : placeholderTextColor, "color") : void 0,
+      _theme_selectionColor_val,
+      resolvedSelectionColor = selectionColor ? (0, import_core.getTokenValue)((_theme_selectionColor_val = (_theme_selectionColor = theme[selectionColor]) === null || _theme_selectionColor === void 0 ? void 0 : _theme_selectionColor.val) !== null && _theme_selectionColor_val !== void 0 ? _theme_selectionColor_val : selectionColor, "color") : void 0;
+    import_react.default.useEffect(function () {
+      if (!(!id || disabled)) return (0, import_focusable.registerFocusable)(id, {
         focusAndSelect: function () {
           var _ref_current;
-          (_ref_current = ref.current) === null || _ref_current === void 0 || _ref_current.focus();
+          return (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
         },
-        focus: function () {}
+        focus: function () {
+          var _ref_current;
+          return (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
+        }
       });
-    }, [id, disabled]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledInput, {
-      onChange: function (e) {},
+    }, [id, disabled]);
+    var handleChangeText = function (text) {
+        onChangeText?.(text), onChange && onChange({
+          target: {
+            value: text
+          },
+          type: "change"
+        }), onInput && onInput({
+          target: {
+            value: text
+          },
+          type: "input"
+        });
+      },
+      handleKeyPress = function (e) {
+        if (onKeyDown) {
+          var {
+            key
+          } = e.nativeEvent;
+          (key === "Backspace" || key === "Enter" || key.length === 1) && onKeyDown({
+            key,
+            type: "keydown"
+          });
+        }
+      },
+      handleSubmitEditing = function (e) {
+        onKeyDown && onKeyDown({
+          key: "Enter",
+          type: "keydown"
+        }), onSubmitEditing && onSubmitEditing(e);
+      },
+      handleSelectionChange = function (e) {
+        onSelectionChange?.(e);
+      },
+      finalProps = {
+        ...rest,
+        editable: !disabled && !readOnly,
+        secureTextEntry,
+        keyboardType,
+        inputMode,
+        returnKeyType,
+        multiline: tag === "textarea" || rows && rows > 1,
+        numberOfLines: rows,
+        selection,
+        placeholderTextColor: resolvedPlaceholderColor,
+        selectionColor: resolvedSelectionColor,
+        onChangeText: handleChangeText,
+        onKeyPress: onKeyDown ? handleKeyPress : void 0,
+        onSubmitEditing: onKeyDown || onSubmitEditing ? handleSubmitEditing : void 0,
+        onSelectionChange: onSelectionChange ? handleSelectionChange : void 0,
+        autoComplete
+      };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledInput, {
       ref: composedRefs,
       ...finalProps
     });