@multiplatform.one/forms 7.11.0 → 7.16.0

package/dist/cjs/InputParts/index.cjs

@@ -71,6 +71,7 @@ function useNativeFieldA11yProps() {
 const defaultContextValues = {
   size: "$true",
   scaleIcon: 1,
+  touch: !import_tamagui.isWeb && (0, import_theme.isTouchSurface)(),
   color: void 0
 };
 const InputContext = (0, import_tamagui.createStyledContext)(defaultContextValues);
@@ -84,9 +85,9 @@ function endCapVariantsFromHeights(heightVariants) {
   }]));
 }
 const sizeRecipeEndCapVariants = endCapVariantsFromHeights(import_theme.recipeFamilies.control.heightVariants);
-function sizeRecipeBoxFallback(val) {
+function sizeRecipeBoxFallback(val, extras) {
   const recipe = (0, import_theme.sizeRecipeForToken)(String(val ?? "$true"), {
-    touch: (0, import_theme.isTouchSurface)()
+    touch: extras.props.touch ?? (!import_tamagui.isWeb && (0, import_theme.isTouchSurface)())
   });
   return {
     height: recipe.height,
@@ -94,29 +95,29 @@ function sizeRecipeBoxFallback(val) {
     gap: recipe.gap
   };
 }
-function sizeRecipeTypeFallback(val) {
+function sizeRecipeTypeFallback(val, extras) {
   return {
     fontSize: (0, import_theme.sizeRecipeForToken)(String(val ?? "$true"), {
-      touch: (0, import_theme.isTouchSurface)()
+      touch: extras.props.touch ?? (!import_tamagui.isWeb && (0, import_theme.isTouchSurface)())
     }).fontSize
   };
 }
-function sizeRecipeIconFallback(val) {
+function sizeRecipeIconFallback(val, extras) {
   const {
     iconSize
   } = (0, import_theme.sizeRecipeForToken)(String(val ?? "$true"), {
-    touch: (0, import_theme.isTouchSurface)()
+    touch: extras.props.touch ?? (!import_tamagui.isWeb && (0, import_theme.isTouchSurface)())
   });
   return {
     width: iconSize,
     height: iconSize
   };
 }
-function sizeRecipeEndCapFallback(val) {
+function sizeRecipeEndCapFallback(val, extras) {
   const {
     height
   } = (0, import_theme.sizeRecipeForToken)(String(val ?? "$true"), {
-    touch: (0, import_theme.isTouchSurface)()
+    touch: extras.props.touch ?? (!import_tamagui.isWeb && (0, import_theme.isTouchSurface)())
   });
   return {
     height,
@@ -290,6 +291,10 @@ const InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
     className: "mp-composite-ring"
   } : {}),
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     unstyled: {
       false: defaultInputGroupStyles
     },
@@ -335,6 +340,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
     ...props
   } = groupProps;
   const [focused, setFocused] = (0, import_react.useState)(false);
+  const hydrationTouch = (0, import_theme.useTouchSurface)();
   const {
     knobProps,
     control,
@@ -374,7 +380,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   });
   const sizeToken = String(props.size ?? knobProps.sizeToken);
   const familyRecipe = (0, import_theme.sizeRecipeForToken)(sizeToken, {
-    touch: (0, import_theme.isTouchSurface)(),
+    touch: hydrationTouch,
     family: recipeFamily
   });
   const controlFragment = recipeFamily === "control" ? knobProps.control : {
@@ -408,6 +414,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
       focused,
       setFocused,
       children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+        touch: hydrationTouch,
         ref: forwardedRef,
         borderWidth: 0,
         borderRadius: 0,
@@ -432,6 +439,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
   }
   if (grouped) {
     return wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+      touch: hydrationTouch,
       ref: forwardedRef,
       borderWidth: 0,
       borderRadius: 0,
@@ -462,6 +470,7 @@ const InputGroupImpl = InputGroupFrame.styleable((groupProps, forwardedRef) => {
     focused,
     setFocused,
     children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+      touch: hydrationTouch,
       ref: forwardedRef,
       ...knobProps.body,
       size: knobProps.sizeToken,
@@ -547,9 +556,9 @@ function mapInputModeToKeyboardType(inputMode) {
   if (!inputMode) return void 0;
   return INPUT_MODE_TO_KEYBOARD[inputMode];
 }
-const inputSizeVariant = (val = "$true") => {
+const inputSizeVariant = (val = "$true", extras) => {
   const recipe = (0, import_theme.sizeRecipeForToken)(String(val || "$true"), {
-    touch: (0, import_theme.isTouchSurface)()
+    touch: extras?.props.touch ?? (!import_tamagui.isWeb && (0, import_theme.isTouchSurface)())
   });
   return {
     fontSize: recipe.fontSize,
@@ -584,6 +593,10 @@ const InputFrame = (0, import_tamagui.styled)(import_tamagui.Input, {
     outlineColor: "transparent"
   },
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     size: {
       ...(import_theme.recipeFamilies.control.typeVariants ?? import_theme.sizeRecipeTypeVariants),
       "...size": sizeRecipeTypeFallback
@@ -597,6 +610,7 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
   const {
     setFocused
   } = FocusContext.useStyledContext();
+  const hydrationTouch = (0, import_theme.useTouchSurface)();
   const {
     size
   } = InputContext.useStyledContext();
@@ -655,6 +669,7 @@ const InputAreaImpl = InputFrame.styleable((areaProps, ref) => {
         minWidth: 0
       } : void 0),
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputFrame, {
+        touch: hydrationTouch,
         "aria-describedby": fieldDescribedBy,
         ...nativeA11yProps,
         ref,
@@ -730,6 +745,10 @@ const InputSection = (0, import_tamagui.styled)(import_tamagui.XGroup.Item, {
   alignItems: "center",
   context: InputContext,
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     }
@@ -749,6 +768,10 @@ const InputButton = (0, import_tamagui.styled)(import_tamagui.Button, {
     backgroundColor: import_colorRamps.formButtonColors.background.active
   },
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },
@@ -776,6 +799,10 @@ const InputGlyphButton = (0, import_tamagui.styled)(import_tamagui.View, {
     outlineWidth: 0
   },
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },
@@ -799,6 +826,7 @@ const InputButtonImpl = InputButton.styleable((buttonProps, ref) => {
     size: contextSize,
     color: contextColor
   } = InputContext.useStyledContext();
+  const hydrationTouch = (0, import_theme.useTouchSurface)();
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
@@ -824,11 +852,12 @@ const InputButtonImpl = InputButton.styleable((buttonProps, ref) => {
   }, [ref, tabIndexProp]);
   if (glyphRing) {
     const square2 = (0, import_theme.sizeRecipeForToken)(String(size ?? "$true"), {
-      touch: (0, import_theme.isTouchSurface)()
+      touch: hydrationTouch
     }).height;
     const disabled = props.disabled === true;
     if (import_tamagui.isWeb) (0, import_theme.ensureCompositeFocusRing)();
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGlyphButton, {
+      touch: hydrationTouch,
       ref,
       role: "button",
       size,
@@ -851,6 +880,7 @@ const InputButtonImpl = InputButton.styleable((buttonProps, ref) => {
   }
   const square = knobProps.control.height;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputButton, {
+    touch: hydrationTouch,
     ref: decorativeRef,
     size,
     height: square,
@@ -871,6 +901,10 @@ const InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   alignItems: "center",
   context: InputContext,
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },
@@ -891,6 +925,7 @@ const InputIcon = InputIconFrame.styleable((iconProps, ref) => {
     scaleIcon: scaleIconProp,
     ...props
   } = iconProps;
+  const hydrationTouch = (0, import_theme.useTouchSurface)();
   const {
     size = "$true",
     color: contextColor,
@@ -909,6 +944,7 @@ const InputIcon = InputIconFrame.styleable((iconProps, ref) => {
     color
   });
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputIconFrame, {
+    touch: hydrationTouch,
     ref,
     size,
     ...knobProps.controlIcon,
@@ -923,6 +959,10 @@ const InputContainerFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   context: InputContext,
   flexDirection: "column",
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     size: {
       // Size is shared with the child parts; layout spacing belongs to space.
       "...size": () => ({})
@@ -942,11 +982,13 @@ const InputContainerFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   }
 });
 const InputContainerImpl = InputContainerFrame.styleable((props, forwardedRef) => {
+  const hydrationTouch = (0, import_theme.useTouchSurface)();
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputContainerFrame, {
+    touch: hydrationTouch,
     ref: forwardedRef,
     size: knobProps.sizeToken,
     ...knobProps.body,
@@ -961,6 +1003,10 @@ const InputContainerImpl = InputContainerFrame.styleable((props, forwardedRef) =
 const InputLabelFrame = (0, import_tamagui.styled)(import_tamagui.Label, {
   context: InputContext,
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },
@@ -984,6 +1030,10 @@ const InputInfoFrame = (0, import_tamagui.styled)(import_tamagui.Text, {
   context: InputContext,
   color: import_colorRamps.formCommonColors.text,
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },
@@ -1041,6 +1091,10 @@ function InputFieldMeta({
 const InputXGroup = (0, import_tamagui.styled)(import_tamagui.XGroup, {
   context: InputContext,
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },

package/dist/cjs/InputParts/index.native.js

@@ -76,6 +76,7 @@ function useNativeFieldA11yProps() {
 var defaultContextValues = {
   size: "$true",
   scaleIcon: 1,
+  touch: !import_tamagui.isWeb && (0, import_theme.isTouchSurface)(),
   color: void 0
 };
 var InputContext = (0, import_tamagui.createStyledContext)(defaultContextValues);
@@ -92,9 +93,10 @@ function endCapVariantsFromHeights(heightVariants) {
   }));
 }
 var sizeRecipeEndCapVariants = endCapVariantsFromHeights(import_theme.recipeFamilies.control.heightVariants);
-function sizeRecipeBoxFallback(val) {
+function sizeRecipeBoxFallback(val, extras) {
+  var _extras_props_touch;
   var recipe = (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
-    touch: (0, import_theme.isTouchSurface)()
+    touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme.isTouchSurface)()
   });
   return {
     height: recipe.height,
@@ -102,29 +104,32 @@ function sizeRecipeBoxFallback(val) {
     gap: recipe.gap
   };
 }
-function sizeRecipeTypeFallback(val) {
+function sizeRecipeTypeFallback(val, extras) {
+  var _extras_props_touch;
   return {
     fontSize: (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
-      touch: (0, import_theme.isTouchSurface)()
+      touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme.isTouchSurface)()
     }).fontSize
   };
 }
-function sizeRecipeIconFallback(val) {
+function sizeRecipeIconFallback(val, extras) {
+  var _extras_props_touch;
   var {
     iconSize
   } = (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
-    touch: (0, import_theme.isTouchSurface)()
+    touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme.isTouchSurface)()
   });
   return {
     width: iconSize,
     height: iconSize
   };
 }
-function sizeRecipeEndCapFallback(val) {
+function sizeRecipeEndCapFallback(val, extras) {
+  var _extras_props_touch;
   var {
     height
   } = (0, import_theme.sizeRecipeForToken)(String(val !== null && val !== void 0 ? val : "$true"), {
-    touch: (0, import_theme.isTouchSurface)()
+    touch: (_extras_props_touch = extras.props.touch) !== null && _extras_props_touch !== void 0 ? _extras_props_touch : !import_tamagui.isWeb && (0, import_theme.isTouchSurface)()
   });
   return {
     height,
@@ -303,6 +308,10 @@ var InputGroupFrame = (0, import_tamagui.styled)(import_tamagui.XGroup, {
     className: "mp-composite-ring"
   } : {}),
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     unstyled: {
       false: defaultInputGroupStyles
     },
@@ -366,6 +375,7 @@ function (groupProps, forwardedRef) {
     ...props
   } = groupProps;
   var [focused, setFocused2] = (0, import_react.useState)(false);
+  var hydrationTouch = (0, import_theme.useTouchSurface)();
   var {
     knobProps,
     control,
@@ -405,7 +415,7 @@ function (groupProps, forwardedRef) {
   });
   var sizeToken = String((_props_size = props.size) !== null && _props_size !== void 0 ? _props_size : knobProps.sizeToken);
   var familyRecipe = (0, import_theme.sizeRecipeForToken)(sizeToken, {
-    touch: (0, import_theme.isTouchSurface)(),
+    touch: hydrationTouch,
     family: recipeFamily
   });
   var controlFragment = recipeFamily === "control" ? knobProps.control : {
@@ -439,6 +449,7 @@ function (groupProps, forwardedRef) {
       focused,
       setFocused: setFocused2,
       children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+        touch: hydrationTouch,
         ref: forwardedRef,
         borderWidth: 0,
         borderRadius: 0,
@@ -471,6 +482,7 @@ function (groupProps, forwardedRef) {
   }
   if (grouped) {
     return wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+      touch: hydrationTouch,
       ref: forwardedRef,
       borderWidth: 0,
       borderRadius: 0,
@@ -501,6 +513,7 @@ function (groupProps, forwardedRef) {
     focused,
     setFocused: setFocused2,
     children: wrapNativePressable(onPress, disabled, /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGroupFrame, {
+      touch: hydrationTouch,
       ref: forwardedRef,
       ...knobProps.body,
       size: knobProps.sizeToken,
@@ -591,9 +604,11 @@ function mapInputModeToKeyboardType(inputMode) {
   return INPUT_MODE_TO_KEYBOARD[inputMode];
 }
 var inputSizeVariant = function inputSizeVariant2() {
-  var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true";
+  var val = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "$true",
+    extras = arguments.length > 1 ? arguments[1] : void 0;
+  var _ref;
   var recipe = (0, import_theme.sizeRecipeForToken)(String(val || "$true"), {
-    touch: (0, import_theme.isTouchSurface)()
+    touch: (_ref = extras === null || extras === void 0 ? void 0 : extras.props.touch) !== null && _ref !== void 0 ? _ref : !import_tamagui.isWeb && (0, import_theme.isTouchSurface)()
   });
   return {
     fontSize: recipe.fontSize,
@@ -628,6 +643,10 @@ var InputFrame = (0, import_tamagui.styled)(import_tamagui.Input, {
     outlineColor: "transparent"
   },
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     size: {
       ...((_recipeFamilies_control_typeVariants = import_theme.recipeFamilies.control.typeVariants) !== null && _recipeFamilies_control_typeVariants !== void 0 ? _recipeFamilies_control_typeVariants : import_theme.sizeRecipeTypeVariants),
       "...size": sizeRecipeTypeFallback
@@ -643,6 +662,7 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
   var {
     setFocused: setFocused2
   } = FocusContext.useStyledContext();
+  var hydrationTouch = (0, import_theme.useTouchSurface)();
   var {
     size
   } = InputContext.useStyledContext();
@@ -701,6 +721,7 @@ var InputAreaImpl = InputFrame.styleable(function (areaProps, ref) {
         minWidth: 0
       } : void 0),
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputFrame, {
+        touch: hydrationTouch,
         "aria-describedby": fieldDescribedBy,
         ...nativeA11yProps,
         ref,
@@ -779,6 +800,10 @@ var InputSection = (0, import_tamagui.styled)(import_tamagui.XGroup.Item, {
   alignItems: "center",
   context: InputContext,
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     }
@@ -798,6 +823,10 @@ var InputButton = (0, import_tamagui.styled)(import_tamagui.Button, {
     backgroundColor: import_colorRamps.formButtonColors.background.active
   },
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },
@@ -825,6 +854,10 @@ var InputGlyphButton = (0, import_tamagui.styled)(import_tamagui.View, {
     outlineWidth: 0
   },
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },
@@ -848,6 +881,7 @@ var InputButtonImpl = InputButton.styleable(function (buttonProps, ref) {
     size: contextSize,
     color: contextColor
   } = InputContext.useStyledContext();
+  var hydrationTouch = (0, import_theme.useTouchSurface)();
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
@@ -873,11 +907,12 @@ var InputButtonImpl = InputButton.styleable(function (buttonProps, ref) {
   }, [ref, tabIndexProp]);
   if (glyphRing) {
     var square = (0, import_theme.sizeRecipeForToken)(String(size !== null && size !== void 0 ? size : "$true"), {
-      touch: (0, import_theme.isTouchSurface)()
+      touch: hydrationTouch
     }).height;
     var disabled = props.disabled === true;
     if (import_tamagui.isWeb) (0, import_theme.ensureCompositeFocusRing)();
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputGlyphButton, {
+      touch: hydrationTouch,
       ref,
       role: "button",
       size,
@@ -901,6 +936,7 @@ var InputButtonImpl = InputButton.styleable(function (buttonProps, ref) {
   }
   var square1 = knobProps.control.height;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputButton, {
+    touch: hydrationTouch,
     ref: decorativeRef,
     size,
     height: square1,
@@ -924,6 +960,10 @@ var InputIconFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   alignItems: "center",
   context: InputContext,
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },
@@ -944,6 +984,7 @@ var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
     scaleIcon: scaleIconProp,
     ...props
   } = iconProps;
+  var hydrationTouch = (0, import_theme.useTouchSurface)();
   var {
     size = "$true",
     color: contextColor,
@@ -962,6 +1003,7 @@ var InputIcon = InputIconFrame.styleable(function (iconProps, ref) {
     color
   });
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputIconFrame, {
+    touch: hydrationTouch,
     ref,
     size,
     ...knobProps.controlIcon,
@@ -976,6 +1018,10 @@ var InputContainerFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   context: InputContext,
   flexDirection: "column",
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     size: {
       // Size is shared with the child parts; layout spacing belongs to space.
       "...size": function () {
@@ -999,11 +1045,13 @@ var InputContainerFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   }
 });
 var InputContainerImpl = InputContainerFrame.styleable(function (props, forwardedRef) {
+  var hydrationTouch = (0, import_theme.useTouchSurface)();
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InputContainerFrame, {
+    touch: hydrationTouch,
     ref: forwardedRef,
     size: knobProps.sizeToken,
     ...knobProps.body,
@@ -1022,6 +1070,10 @@ var InputContainerImpl = InputContainerFrame.styleable(function (props, forwarde
 var InputLabelFrame = (0, import_tamagui.styled)(import_tamagui.Label, {
   context: InputContext,
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },
@@ -1045,6 +1097,10 @@ var InputInfoFrame = (0, import_tamagui.styled)(import_tamagui.Text, {
   context: InputContext,
   color: import_colorRamps.formCommonColors.text,
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },
@@ -1105,6 +1161,10 @@ function InputFieldMeta(param) {
 var InputXGroup = (0, import_tamagui.styled)(import_tamagui.XGroup, {
   context: InputContext,
   variants: {
+    touch: {
+      true: {},
+      false: {}
+    },
     scaleIcon: {
       ":number": {}
     },