tamagui 1.30.7 → 1.30.8

package/dist/cjs/views/Input.js

@@ -20,9 +20,11 @@ var Input_exports = {};
 __export(Input_exports, {
   Input: () => Input,
   InputFrame: () => InputFrame,
-  defaultStyles: () => defaultStyles
+  defaultStyles: () => defaultStyles,
+  useInputProps: () => useInputProps
 });
 module.exports = __toCommonJS(Input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_core = require("@tamagui/core");
 var import_focusable = require("@tamagui/focusable");
 var import_react_native = require("react-native");
@@ -39,7 +41,6 @@ const defaultStyles = {
   focusable: true,
   borderColor: "$borderColor",
   backgroundColor: "$background",
-  placeholderTextColor: "$placeholderColor",
   // this fixes a flex bug where it overflows container
   minWidth: 0,
   hoverStyle: {
@@ -52,7 +53,7 @@ const defaultStyles = {
     borderColor: "$borderColorFocus"
   }
 };
-const InputFramePreTyped = (0, import_core.styled)(
+const InputFrame = (0, import_core.styled)(
   import_react_native.TextInput,
   {
     name: "Input",
@@ -72,12 +73,31 @@ const InputFramePreTyped = (0, import_core.styled)(
     isInput: true
   }
 );
-const InputFrame = InputFramePreTyped;
-const Input = (0, import_focusable.focusableInputHOC)(InputFrame);
+const Input = InputFrame.styleable((propsIn, ref) => {
+  const props = useInputProps(propsIn, ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputFrame, { ...props });
+});
+function useInputProps(props, ref) {
+  var _a, _b;
+  const theme = (0, import_core.useTheme)();
+  const { onChangeText, ref: combinedRef } = (0, import_focusable.useFocusable)({
+    props,
+    ref,
+    isInput: true
+  });
+  const placeholderTextColor = typeof props.placeholderTextColor !== "string" ? props.placeholderTextColor : ((_a = theme[props.placeholderTextColor]) == null ? void 0 : _a.get()) || props.placeholderTextColor || (props.unstyled ? null : (_b = theme["$placeholderColor"]) == null ? void 0 : _b.get());
+  return {
+    ref: combinedRef,
+    ...props,
+    placeholderTextColor,
+    onChangeText
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Input,
   InputFrame,
-  defaultStyles
+  defaultStyles,
+  useInputProps
 });
 //# sourceMappingURL=Input.js.map

package/dist/cjs/views/Input.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Input.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO;AACP,uBAAkC;AAClC,0BAAsC;AAEtC,0BAAiC;AAAA,IAEjC,8BAAiB;AAAA,EACf;AACF,CAAC;AAEM,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,sBAAsB;AAAA;AAAA,EAGtB,UAAU;AAAA,EAEV,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;AAEA,MAAM,yBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IAEN,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,EACX;AACF;AASO,MAAM,aAAa;AAInB,MAAM,YAAQ,oCAAkB,UAAU;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuES;AAvET,kBAMO;AACP,uBAA6B;AAC7B,0BAA0B;AAE1B,0BAAiC;AAAA,IAEjC,8BAAiB;AAAA,EACf;AACF,CAAC;AAEM,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA,EAGjB,UAAU;AAAA,EAEV,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;AAEO,MAAM,iBAAa;AAAA,EACxB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IAEN,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,EACX;AACF;AAMO,MAAM,QAAQ,WAAW,UAAsB,CAAC,SAAS,QAAQ;AACtE,QAAM,QAAQ,cAAc,SAAS,GAAG;AACxC,SAAO,4CAAC,cAAY,GAAG,OAAO;AAChC,CAAC;AAEM,SAAS,cAAc,OAAmB,KAAU;AA1E3D;AA2EE,QAAM,YAAQ,sBAAS;AACvB,QAAM,EAAE,cAAc,KAAK,YAAY,QAAI,+BAAa;AAAA,IACtD;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,uBACJ,OAAO,MAAM,yBAAyB,WAClC,MAAM,yBACN,WAAM,MAAM,oBAAoB,MAAhC,mBAAmC,UACnC,MAAM,yBACL,MAAM,WAAW,QAAO,WAAM,mBAAmB,MAAzB,mBAA4B;AAE3D,SAAO;AAAA,IACL,KAAK;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/views/TextArea.js

@@ -22,8 +22,8 @@ __export(TextArea_exports, {
   TextAreaFrame: () => TextAreaFrame
 });
 module.exports = __toCommonJS(TextArea_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_core = require("@tamagui/core");
-var import_focusable = require("@tamagui/focusable");
 var import_inputHelpers = require("../helpers/inputHelpers");
 var import_Input = require("./Input");
 const TextAreaFrame = (0, import_core.styled)(import_Input.InputFrame, {
@@ -45,7 +45,10 @@ const TextAreaFrame = (0, import_core.styled)(import_Input.InputFrame, {
     unstyled: false
   }
 });
-const TextArea = (0, import_focusable.focusableInputHOC)(TextAreaFrame);
+const TextArea = import_Input.InputFrame.styleable((propsIn, ref) => {
+  const props = (0, import_Input.useInputProps)(propsIn, ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.InputFrame, { ...props });
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   TextArea,

package/dist/cjs/views/TextArea.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/TextArea.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiC;AACjC,uBAAkC;AAElC,0BAAoC;AACpC,mBAA0C;AAEnC,MAAM,oBAAgB,oBAAO,yBAAY;AAAA,EAC9C,MAAM;AAAA,EACN,WAAW;AAAA,EAEX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAIM,MAAM,eAAW,oCAAkB,aAAa;",
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCS;AApCT,kBAAuB;AAEvB,0BAAoC;AACpC,mBAAqE;AAM9D,MAAM,oBAAgB,oBAAO,yBAAY;AAAA,EAC9C,MAAM;AAAA,EACN,WAAW;AAAA,EAEX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAIM,MAAM,WAAW,wBAAW,UAAsB,CAAC,SAAS,QAAQ;AACzE,QAAM,YAAQ,4BAAc,SAAS,GAAG;AACxC,SAAO,4CAAC,2BAAY,GAAG,OAAO;AAChC,CAAC;",
   "names": []
 }

package/dist/esm/views/Input.js

@@ -1,8 +1,10 @@
+import { jsx } from "react/jsx-runtime";
 import {
   setupReactNative,
-  styled
+  styled,
+  useTheme
 } from "@tamagui/core";
-import { focusableInputHOC } from "@tamagui/focusable";
+import { useFocusable } from "@tamagui/focusable";
 import { TextInput } from "react-native";
 import { inputSizeVariant } from "../helpers/inputHelpers";
 setupReactNative({
@@ -17,7 +19,6 @@ const defaultStyles = {
   focusable: true,
   borderColor: "$borderColor",
   backgroundColor: "$background",
-  placeholderTextColor: "$placeholderColor",
   // this fixes a flex bug where it overflows container
   minWidth: 0,
   hoverStyle: {
@@ -30,7 +31,7 @@ const defaultStyles = {
     borderColor: "$borderColorFocus"
   }
 };
-const InputFramePreTyped = styled(
+const InputFrame = styled(
   TextInput,
   {
     name: "Input",
@@ -50,11 +51,30 @@ const InputFramePreTyped = styled(
     isInput: true
   }
 );
-const InputFrame = InputFramePreTyped;
-const Input = focusableInputHOC(InputFrame);
+const Input = InputFrame.styleable((propsIn, ref) => {
+  const props = useInputProps(propsIn, ref);
+  return /* @__PURE__ */ jsx(InputFrame, { ...props });
+});
+function useInputProps(props, ref) {
+  var _a, _b;
+  const theme = useTheme();
+  const { onChangeText, ref: combinedRef } = useFocusable({
+    props,
+    ref,
+    isInput: true
+  });
+  const placeholderTextColor = typeof props.placeholderTextColor !== "string" ? props.placeholderTextColor : ((_a = theme[props.placeholderTextColor]) == null ? void 0 : _a.get()) || props.placeholderTextColor || (props.unstyled ? null : (_b = theme["$placeholderColor"]) == null ? void 0 : _b.get());
+  return {
+    ref: combinedRef,
+    ...props,
+    placeholderTextColor,
+    onChangeText
+  };
+}
 export {
   Input,
   InputFrame,
-  defaultStyles
+  defaultStyles,
+  useInputProps
 };
 //# sourceMappingURL=Input.js.map

package/dist/esm/views/Input.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Input.tsx"],
-  "mappings": "AAAA;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAqB,iBAAiB;AAEtC,SAAS,wBAAwB;AAEjC,iBAAiB;AAAA,EACf;AACF,CAAC;AAEM,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,sBAAsB;AAAA;AAAA,EAGtB,UAAU;AAAA,EAEV,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;AAEA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IAEN,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,EACX;AACF;AASO,MAAM,aAAa;AAInB,MAAM,QAAQ,kBAAkB,UAAU;",
+  "mappings": "AAuES;AAvET;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAE1B,SAAS,wBAAwB;AAEjC,iBAAiB;AAAA,EACf;AACF,CAAC;AAEM,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA,EAGjB,UAAU;AAAA,EAEV,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;AAEO,MAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IAEN,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,EACX;AACF;AAMO,MAAM,QAAQ,WAAW,UAAsB,CAAC,SAAS,QAAQ;AACtE,QAAM,QAAQ,cAAc,SAAS,GAAG;AACxC,SAAO,oBAAC,cAAY,GAAG,OAAO;AAChC,CAAC;AAEM,SAAS,cAAc,OAAmB,KAAU;AA1E3D;AA2EE,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,cAAc,KAAK,YAAY,IAAI,aAAa;AAAA,IACtD;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,uBACJ,OAAO,MAAM,yBAAyB,WAClC,MAAM,yBACN,WAAM,MAAM,oBAAoB,MAAhC,mBAAmC,UACnC,MAAM,yBACL,MAAM,WAAW,QAAO,WAAM,mBAAmB,MAAzB,mBAA4B;AAE3D,SAAO;AAAA,IACL,KAAK;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/views/TextArea.js

@@ -1,7 +1,7 @@
+import { jsx } from "react/jsx-runtime";
 import { styled } from "@tamagui/core";
-import { focusableInputHOC } from "@tamagui/focusable";
 import { textAreaSizeVariant } from "../helpers/inputHelpers";
-import { InputFrame, defaultStyles } from "./Input";
+import { InputFrame, defaultStyles, useInputProps } from "./Input";
 const TextAreaFrame = styled(InputFrame, {
   name: "TextArea",
   multiline: true,
@@ -21,7 +21,10 @@ const TextAreaFrame = styled(InputFrame, {
     unstyled: false
   }
 });
-const TextArea = focusableInputHOC(TextAreaFrame);
+const TextArea = InputFrame.styleable((propsIn, ref) => {
+  const props = useInputProps(propsIn, ref);
+  return /* @__PURE__ */ jsx(InputFrame, { ...props });
+});
 export {
   TextArea,
   TextAreaFrame

package/dist/esm/views/TextArea.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/TextArea.tsx"],
-  "mappings": "AAAA,SAAmB,cAAc;AACjC,SAAS,yBAAyB;AAElC,SAAS,2BAA2B;AACpC,SAAS,YAAY,qBAAqB;AAEnC,MAAM,gBAAgB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,WAAW;AAAA,EAEX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAIM,MAAM,WAAW,kBAAkB,aAAa;",
+  "mappings": "AAoCS;AApCT,SAAS,cAAc;AAEvB,SAAS,2BAA2B;AACpC,SAAS,YAAwB,eAAe,qBAAqB;AAM9D,MAAM,gBAAgB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,WAAW;AAAA,EAEX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAIM,MAAM,WAAW,WAAW,UAAsB,CAAC,SAAS,QAAQ;AACzE,QAAM,QAAQ,cAAc,SAAS,GAAG;AACxC,SAAO,oBAAC,cAAY,GAAG,OAAO;AAChC,CAAC;",
   "names": []
 }

package/dist/jsx/views/Input.js

@@ -1,8 +1,9 @@
 import {
   setupReactNative,
-  styled
+  styled,
+  useTheme
 } from "@tamagui/core";
-import { focusableInputHOC } from "@tamagui/focusable";
+import { useFocusable } from "@tamagui/focusable";
 import { TextInput } from "react-native";
 import { inputSizeVariant } from "../helpers/inputHelpers";
 setupReactNative({
@@ -17,7 +18,6 @@ const defaultStyles = {
   focusable: true,
   borderColor: "$borderColor",
   backgroundColor: "$background",
-  placeholderTextColor: "$placeholderColor",
   // this fixes a flex bug where it overflows container
   minWidth: 0,
   hoverStyle: {
@@ -30,7 +30,7 @@ const defaultStyles = {
     borderColor: "$borderColorFocus"
   }
 };
-const InputFramePreTyped = styled(
+const InputFrame = styled(
   TextInput,
   {
     name: "Input",
@@ -50,11 +50,29 @@ const InputFramePreTyped = styled(
     isInput: true
   }
 );
-const InputFrame = InputFramePreTyped;
-const Input = focusableInputHOC(InputFrame);
+const Input = InputFrame.styleable((propsIn, ref) => {
+  const props = useInputProps(propsIn, ref);
+  return <InputFrame {...props} />;
+});
+function useInputProps(props, ref) {
+  const theme = useTheme();
+  const { onChangeText, ref: combinedRef } = useFocusable({
+    props,
+    ref,
+    isInput: true
+  });
+  const placeholderTextColor = typeof props.placeholderTextColor !== "string" ? props.placeholderTextColor : theme[props.placeholderTextColor]?.get() || props.placeholderTextColor || (props.unstyled ? null : theme["$placeholderColor"]?.get());
+  return {
+    ref: combinedRef,
+    ...props,
+    placeholderTextColor,
+    onChangeText
+  };
+}
 export {
   Input,
   InputFrame,
-  defaultStyles
+  defaultStyles,
+  useInputProps
 };
 //# sourceMappingURL=Input.js.map

package/dist/jsx/views/Input.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Input.tsx"],
-  "mappings": "AAAA;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAqB,iBAAiB;AAEtC,SAAS,wBAAwB;AAEjC,iBAAiB;AAAA,EACf;AACF,CAAC;AAEM,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,sBAAsB;AAAA;AAAA,EAGtB,UAAU;AAAA,EAEV,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;AAEA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IAEN,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,EACX;AACF;AASO,MAAM,aAAa;AAInB,MAAM,QAAQ,kBAAkB,UAAU;",
+  "mappings": "AAAA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAE1B,SAAS,wBAAwB;AAEjC,iBAAiB;AAAA,EACf;AACF,CAAC;AAEM,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA,EAGjB,UAAU;AAAA,EAEV,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;AAEO,MAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IAEN,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,EACX;AACF;AAMO,MAAM,QAAQ,WAAW,UAAsB,CAAC,SAAS,QAAQ;AACtE,QAAM,QAAQ,cAAc,SAAS,GAAG;AACxC,SAAO,CAAC,eAAe,OAAO;AAChC,CAAC;AAEM,SAAS,cAAc,OAAmB,KAAU;AACzD,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,cAAc,KAAK,YAAY,IAAI,aAAa;AAAA,IACtD;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,uBACJ,OAAO,MAAM,yBAAyB,WAClC,MAAM,uBACN,MAAM,MAAM,oBAAoB,GAAG,IAAI,KACvC,MAAM,yBACL,MAAM,WAAW,OAAO,MAAM,mBAAmB,GAAG,IAAI;AAE/D,SAAO;AAAA,IACL,KAAK;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/jsx/views/Input.mjs

@@ -1,8 +1,9 @@
 import {
   setupReactNative,
-  styled
+  styled,
+  useTheme
 } from "@tamagui/core";
-import { focusableInputHOC } from "@tamagui/focusable";
+import { useFocusable } from "@tamagui/focusable";
 import { TextInput } from "react-native";
 import { inputSizeVariant } from "../helpers/inputHelpers";
 setupReactNative({
@@ -17,7 +18,6 @@ const defaultStyles = {
   focusable: true,
   borderColor: "$borderColor",
   backgroundColor: "$background",
-  placeholderTextColor: "$placeholderColor",
   // this fixes a flex bug where it overflows container
   minWidth: 0,
   hoverStyle: {
@@ -30,7 +30,7 @@ const defaultStyles = {
     borderColor: "$borderColorFocus"
   }
 };
-const InputFramePreTyped = styled(
+const InputFrame = styled(
   TextInput,
   {
     name: "Input",
@@ -50,11 +50,29 @@ const InputFramePreTyped = styled(
     isInput: true
   }
 );
-const InputFrame = InputFramePreTyped;
-const Input = focusableInputHOC(InputFrame);
+const Input = InputFrame.styleable((propsIn, ref) => {
+  const props = useInputProps(propsIn, ref);
+  return <InputFrame {...props} />;
+});
+function useInputProps(props, ref) {
+  const theme = useTheme();
+  const { onChangeText, ref: combinedRef } = useFocusable({
+    props,
+    ref,
+    isInput: true
+  });
+  const placeholderTextColor = typeof props.placeholderTextColor !== "string" ? props.placeholderTextColor : theme[props.placeholderTextColor]?.get() || props.placeholderTextColor || (props.unstyled ? null : theme["$placeholderColor"]?.get());
+  return {
+    ref: combinedRef,
+    ...props,
+    placeholderTextColor,
+    onChangeText
+  };
+}
 export {
   Input,
   InputFrame,
-  defaultStyles
+  defaultStyles,
+  useInputProps
 };
 //# sourceMappingURL=Input.mjs.map

package/dist/jsx/views/Input.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Input.tsx"],
-  "mappings": "AAAA;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAqB,iBAAiB;AAEtC,SAAS,wBAAwB;AAEjC,iBAAiB;AAAA,EACf;AACF,CAAC;AAEM,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,sBAAsB;AAAA;AAAA,EAGtB,UAAU;AAAA,EAEV,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;AAEA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IAEN,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,EACX;AACF;AASO,MAAM,aAAa;AAInB,MAAM,QAAQ,kBAAkB,UAAU;",
+  "mappings": "AAAA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAE1B,SAAS,wBAAwB;AAEjC,iBAAiB;AAAA,EACf;AACF,CAAC;AAEM,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA;AAAA,EAGjB,UAAU;AAAA,EAEV,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,YAAY;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;AAEO,MAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IAEN,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA;AAAA,IACE,SAAS;AAAA,EACX;AACF;AAMO,MAAM,QAAQ,WAAW,UAAsB,CAAC,SAAS,QAAQ;AACtE,QAAM,QAAQ,cAAc,SAAS,GAAG;AACxC,SAAO,CAAC,eAAe,OAAO;AAChC,CAAC;AAEM,SAAS,cAAc,OAAmB,KAAU;AACzD,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,cAAc,KAAK,YAAY,IAAI,aAAa;AAAA,IACtD;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,uBACJ,OAAO,MAAM,yBAAyB,WAClC,MAAM,uBACN,MAAM,MAAM,oBAAoB,GAAG,IAAI,KACvC,MAAM,yBACL,MAAM,WAAW,OAAO,MAAM,mBAAmB,GAAG,IAAI;AAE/D,SAAO;AAAA,IACL,KAAK;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/jsx/views/TextArea.js

@@ -1,7 +1,6 @@
 import { styled } from "@tamagui/core";
-import { focusableInputHOC } from "@tamagui/focusable";
 import { textAreaSizeVariant } from "../helpers/inputHelpers";
-import { InputFrame, defaultStyles } from "./Input";
+import { InputFrame, defaultStyles, useInputProps } from "./Input";
 const TextAreaFrame = styled(InputFrame, {
   name: "TextArea",
   multiline: true,
@@ -21,7 +20,10 @@ const TextAreaFrame = styled(InputFrame, {
     unstyled: false
   }
 });
-const TextArea = focusableInputHOC(TextAreaFrame);
+const TextArea = InputFrame.styleable((propsIn, ref) => {
+  const props = useInputProps(propsIn, ref);
+  return <InputFrame {...props} />;
+});
 export {
   TextArea,
   TextAreaFrame

package/dist/jsx/views/TextArea.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/TextArea.tsx"],
-  "mappings": "AAAA,SAAmB,cAAc;AACjC,SAAS,yBAAyB;AAElC,SAAS,2BAA2B;AACpC,SAAS,YAAY,qBAAqB;AAEnC,MAAM,gBAAgB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,WAAW;AAAA,EAEX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAIM,MAAM,WAAW,kBAAkB,aAAa;",
+  "mappings": "AAAA,SAAS,cAAc;AAEvB,SAAS,2BAA2B;AACpC,SAAS,YAAwB,eAAe,qBAAqB;AAM9D,MAAM,gBAAgB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,WAAW;AAAA,EAEX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAIM,MAAM,WAAW,WAAW,UAAsB,CAAC,SAAS,QAAQ;AACzE,QAAM,QAAQ,cAAc,SAAS,GAAG;AACxC,SAAO,CAAC,eAAe,OAAO;AAChC,CAAC;",
   "names": []
 }

package/dist/jsx/views/TextArea.mjs

@@ -1,7 +1,6 @@
 import { styled } from "@tamagui/core";
-import { focusableInputHOC } from "@tamagui/focusable";
 import { textAreaSizeVariant } from "../helpers/inputHelpers";
-import { InputFrame, defaultStyles } from "./Input";
+import { InputFrame, defaultStyles, useInputProps } from "./Input";
 const TextAreaFrame = styled(InputFrame, {
   name: "TextArea",
   multiline: true,
@@ -21,7 +20,10 @@ const TextAreaFrame = styled(InputFrame, {
     unstyled: false
   }
 });
-const TextArea = focusableInputHOC(TextAreaFrame);
+const TextArea = InputFrame.styleable((propsIn, ref) => {
+  const props = useInputProps(propsIn, ref);
+  return <InputFrame {...props} />;
+});
 export {
   TextArea,
   TextAreaFrame

package/dist/jsx/views/TextArea.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/TextArea.tsx"],
-  "mappings": "AAAA,SAAmB,cAAc;AACjC,SAAS,yBAAyB;AAElC,SAAS,2BAA2B;AACpC,SAAS,YAAY,qBAAqB;AAEnC,MAAM,gBAAgB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,WAAW;AAAA,EAEX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAIM,MAAM,WAAW,kBAAkB,aAAa;",
+  "mappings": "AAAA,SAAS,cAAc;AAEvB,SAAS,2BAA2B;AACpC,SAAS,YAAwB,eAAe,qBAAqB;AAM9D,MAAM,gBAAgB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,WAAW;AAAA,EAEX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAIM,MAAM,WAAW,WAAW,UAAsB,CAAC,SAAS,QAAQ;AACzE,QAAM,QAAQ,cAAc,SAAS,GAAG;AACxC,SAAO,CAAC,eAAe,OAAO;AAChC,CAAC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamagui",
-  "version": "1.30.7",
+  "version": "1.30.8",
   "sideEffects": [
     "*.css",
     "setup.js"
@@ -40,55 +40,55 @@
     }
   },
   "dependencies": {
-    "@tamagui/adapt": "1.30.7",
-    "@tamagui/alert-dialog": "1.30.7",
-    "@tamagui/animate-presence": "1.30.7",
-    "@tamagui/avatar": "1.30.7",
-    "@tamagui/button": "1.30.7",
-    "@tamagui/card": "1.30.7",
-    "@tamagui/checkbox": "1.30.7",
-    "@tamagui/compose-refs": "1.30.7",
-    "@tamagui/core": "1.30.7",
-    "@tamagui/create-context": "1.30.7",
-    "@tamagui/dialog": "1.30.7",
-    "@tamagui/fake-react-native": "1.30.7",
-    "@tamagui/focusable": "1.30.7",
-    "@tamagui/font-size": "1.30.7",
-    "@tamagui/form": "1.30.7",
-    "@tamagui/get-button-sized": "1.30.7",
-    "@tamagui/get-font-sized": "1.30.7",
-    "@tamagui/get-token": "1.30.7",
-    "@tamagui/helpers": "1.30.7",
-    "@tamagui/helpers-tamagui": "1.30.7",
-    "@tamagui/image": "1.30.7",
-    "@tamagui/label": "1.30.7",
-    "@tamagui/linear-gradient": "1.30.7",
-    "@tamagui/list-item": "1.30.7",
-    "@tamagui/popover": "1.30.7",
-    "@tamagui/popper": "1.30.7",
-    "@tamagui/portal": "1.30.7",
-    "@tamagui/progress": "1.30.7",
-    "@tamagui/radio-group": "1.30.7",
-    "@tamagui/react-native-media-driver": "1.30.7",
-    "@tamagui/scroll-view": "1.30.7",
-    "@tamagui/select": "1.30.7",
-    "@tamagui/separator": "1.30.7",
-    "@tamagui/shapes": "1.30.7",
-    "@tamagui/sheet": "1.30.7",
-    "@tamagui/slider": "1.30.7",
-    "@tamagui/stacks": "1.30.7",
-    "@tamagui/switch": "1.30.7",
-    "@tamagui/tabs": "1.30.7",
-    "@tamagui/text": "1.30.7",
-    "@tamagui/theme": "1.30.7",
-    "@tamagui/toggle-group": "1.30.7",
-    "@tamagui/tooltip": "1.30.7",
-    "@tamagui/use-controllable-state": "1.30.7",
-    "@tamagui/use-debounce": "1.30.7",
-    "@tamagui/use-event": "1.30.7",
-    "@tamagui/use-force-update": "1.30.7",
-    "@tamagui/use-window-dimensions": "1.30.7",
-    "@tamagui/visually-hidden": "1.30.7",
+    "@tamagui/adapt": "1.30.8",
+    "@tamagui/alert-dialog": "1.30.8",
+    "@tamagui/animate-presence": "1.30.8",
+    "@tamagui/avatar": "1.30.8",
+    "@tamagui/button": "1.30.8",
+    "@tamagui/card": "1.30.8",
+    "@tamagui/checkbox": "1.30.8",
+    "@tamagui/compose-refs": "1.30.8",
+    "@tamagui/core": "1.30.8",
+    "@tamagui/create-context": "1.30.8",
+    "@tamagui/dialog": "1.30.8",
+    "@tamagui/fake-react-native": "1.30.8",
+    "@tamagui/focusable": "1.30.8",
+    "@tamagui/font-size": "1.30.8",
+    "@tamagui/form": "1.30.8",
+    "@tamagui/get-button-sized": "1.30.8",
+    "@tamagui/get-font-sized": "1.30.8",
+    "@tamagui/get-token": "1.30.8",
+    "@tamagui/helpers": "1.30.8",
+    "@tamagui/helpers-tamagui": "1.30.8",
+    "@tamagui/image": "1.30.8",
+    "@tamagui/label": "1.30.8",
+    "@tamagui/linear-gradient": "1.30.8",
+    "@tamagui/list-item": "1.30.8",
+    "@tamagui/popover": "1.30.8",
+    "@tamagui/popper": "1.30.8",
+    "@tamagui/portal": "1.30.8",
+    "@tamagui/progress": "1.30.8",
+    "@tamagui/radio-group": "1.30.8",
+    "@tamagui/react-native-media-driver": "1.30.8",
+    "@tamagui/scroll-view": "1.30.8",
+    "@tamagui/select": "1.30.8",
+    "@tamagui/separator": "1.30.8",
+    "@tamagui/shapes": "1.30.8",
+    "@tamagui/sheet": "1.30.8",
+    "@tamagui/slider": "1.30.8",
+    "@tamagui/stacks": "1.30.8",
+    "@tamagui/switch": "1.30.8",
+    "@tamagui/tabs": "1.30.8",
+    "@tamagui/text": "1.30.8",
+    "@tamagui/theme": "1.30.8",
+    "@tamagui/toggle-group": "1.30.8",
+    "@tamagui/tooltip": "1.30.8",
+    "@tamagui/use-controllable-state": "1.30.8",
+    "@tamagui/use-debounce": "1.30.8",
+    "@tamagui/use-event": "1.30.8",
+    "@tamagui/use-force-update": "1.30.8",
+    "@tamagui/use-window-dimensions": "1.30.8",
+    "@tamagui/visually-hidden": "1.30.8",
     "reforest": "^0.12.1"
   },
   "peerDependencies": {
@@ -96,7 +96,7 @@
     "react-native-web": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.30.7",
+    "@tamagui/build": "1.30.8",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "react": "^18.2.0",

package/src/views/Input.tsx

@@ -1,12 +1,12 @@
 import {
   ColorStyleProp,
   GetProps,
-  ModifyTamaguiComponentStyleProps,
   setupReactNative,
   styled,
+  useTheme,
 } from '@tamagui/core'
-import { focusableInputHOC } from '@tamagui/focusable'
-import { ColorValue, TextInput } from 'react-native'
+import { useFocusable } from '@tamagui/focusable'
+import { TextInput } from 'react-native'
 
 import { inputSizeVariant } from '../helpers/inputHelpers'
 
@@ -23,7 +23,6 @@ export const defaultStyles = {
   focusable: true,
   borderColor: '$borderColor',
   backgroundColor: '$background',
-  placeholderTextColor: '$placeholderColor',
 
   // this fixes a flex bug where it overflows container
   minWidth: 0,
@@ -40,7 +39,7 @@ export const defaultStyles = {
   },
 } as const
 
-const InputFramePreTyped = styled(
+export const InputFrame = styled(
   TextInput,
   {
     name: 'Input',
@@ -64,15 +63,34 @@ const InputFramePreTyped = styled(
   }
 )
 
-type InputFrameType = ModifyTamaguiComponentStyleProps<
-  typeof InputFramePreTyped,
-  {
-    placeholderTextColor?: ColorStyleProp | ColorValue
-  }
->
+export type InputProps = Omit<GetProps<typeof InputFrame>, 'placeholderTextColor'> & {
+  placeholderTextColor?: ColorStyleProp
+}
+
+export const Input = InputFrame.styleable<InputProps>((propsIn, ref) => {
+  const props = useInputProps(propsIn, ref)
+  return <InputFrame {...props} />
+})
 
-export const InputFrame = InputFramePreTyped as InputFrameType
+export function useInputProps(props: InputProps, ref: any) {
+  const theme = useTheme()
+  const { onChangeText, ref: combinedRef } = useFocusable({
+    props,
+    ref,
+    isInput: true,
+  })
 
-export type InputProps = GetProps<InputFrameType>
+  const placeholderTextColor =
+    typeof props.placeholderTextColor !== 'string'
+      ? props.placeholderTextColor
+      : theme[props.placeholderTextColor]?.get() ||
+        props.placeholderTextColor ||
+        (props.unstyled ? null : theme['$placeholderColor']?.get())
 
-export const Input = focusableInputHOC(InputFrame)
+  return {
+    ref: combinedRef,
+    ...props,
+    placeholderTextColor,
+    onChangeText,
+  }
+}