@boostdev/design-system-react-native 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.2.1] - 2026-06-11
+### Fixed
+- Fix(form): prevent iOS text clipping in single-line inputs
+
+Remove explicit lineHeight from the TextInput style in FormInput,
+NumberInput, and Combobox. On iOS, an explicit lineHeight on a
+single-line TextInput clips descenders and ascenders at the line box
+boundary. The minHeight: 44 token satisfies touch-target requirements
+without needing lineHeight. Textarea (multiline) is unaffected.
+
+Test contract pinned: FormInput spec asserts lineHeight resolves to
+"normal" and minHeight >= 44pt via getComputedStyle. ([`c3055e4`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/c3055e464fd0b8891fec1f0eb616b8357390ec50))
+
 ## [0.2.0] - 2026-06-10
 ### Added
 - Feat: rename Drawer to SideSheet, optional @react-navigation/native peer, nav theme docs, git-cliff ([`42e165d`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/42e165d6df397876df8b721122259af640eeaa98))

package/dist/index.cjs

@@ -2682,23 +2682,36 @@ function FileInput({
 var import_react9 = require("react");
 var import_react_native37 = require("react-native");
 var import_jsx_runtime37 = require("react/jsx-runtime");
+var INPUT_HEIGHT = 44;
 var MAX_DROPDOWN_HEIGHT = 200;
 var styles33 = import_react_native37.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
+  /**
+   * Draws the pill border and provides the fixed 44pt touch-target height.
+   * justifyContent: 'center' vertically centers the inner TextInput.
+   * position: 'relative' is required for the dropdown's absolute positioning.
+   */
   inputWrapper: {
-    position: "relative"
+    position: "relative",
+    height: INPUT_HEIGHT,
+    justifyContent: "center",
+    borderWidth: 1,
+    borderRadius: import_native.border.radius.full
   },
+  /**
+   * No vertical padding: iOS centers text automatically inside the wrapper height.
+   * textAlignVertical + includeFontPadding provide Android parity.
+   * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   */
   input: {
     fontFamily: import_native.font.family.body,
     fontSize: import_native.font.size.body,
-    lineHeight: lineHeight.body,
-    paddingVertical: import_native.spacing.xs,
     paddingHorizontal: import_native.spacing.s,
-    borderWidth: 1,
-    borderRadius: import_native.border.radius.full,
-    minHeight: 44
+    paddingVertical: 0,
+    textAlignVertical: "center",
+    includeFontPadding: false
   },
   dropdown: {
     position: "absolute",
@@ -2767,80 +2780,88 @@ function Combobox({
   const borderColor = error ? colors2.colorError : colors2.colorOnBg;
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native37.View, { style: [styles33.container, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Label, { label }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native37.View, { style: styles33.inputWrapper, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-        import_react_native37.TextInput,
-        {
-          value: inputValue,
-          onChangeText: handleChangeText,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          placeholder,
-          placeholderTextColor: colors2.colorOnBgSubtle,
-          editable: !disabled,
-          accessibilityRole: "combobox",
-          accessibilityLabel: typeof label === "string" ? label : name,
-          accessibilityState: { disabled, expanded: isOpen },
-          style: [
-            styles33.input,
-            {
-              borderColor,
-              color: colors2.colorOnBg,
-              backgroundColor: colors2.colorBg
-            },
-            disabled && { opacity: 0.4 }
-          ]
-        }
-      ),
-      isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-        import_react_native37.ScrollView,
-        {
-          style: [
-            styles33.dropdown,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      import_react_native37.View,
+      {
+        style: [
+          styles33.inputWrapper,
+          {
+            borderColor,
+            backgroundColor: colors2.colorBg
+          },
+          disabled && { opacity: 0.4 }
+        ],
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            import_react_native37.TextInput,
             {
-              borderColor: colors2.colorBgSubtle,
-              backgroundColor: colors2.colorBg
+              value: inputValue,
+              onChangeText: handleChangeText,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              placeholder,
+              placeholderTextColor: colors2.colorOnBgSubtle,
+              editable: !disabled,
+              accessibilityRole: "combobox",
+              accessibilityLabel: typeof label === "string" ? label : name,
+              accessibilityState: { disabled, expanded: isOpen },
+              style: [
+                styles33.input,
+                { color: colors2.colorOnBg }
+              ]
             }
-          ],
-          keyboardShouldPersistTaps: "handled",
-          nestedScrollEnabled: true,
-          children: filtered.map((option) => {
-            const isSelected = option.value === value;
-            const isDisabled = option.disabled;
-            return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-              import_react_native37.Pressable,
-              {
-                onPress: () => !isDisabled && selectOption(option),
-                disabled: isDisabled,
-                accessibilityRole: "menuitem",
-                accessibilityLabel: option.label,
-                accessibilityState: { selected: isSelected, disabled: isDisabled },
-                style: ({ pressed }) => [
-                  styles33.option,
-                  isSelected && { backgroundColor: colors2.colorBlueSubtle },
-                  pressed && !isDisabled && { backgroundColor: colors2.colorBgSubtle },
-                  isDisabled && { opacity: 0.4 }
-                ],
-                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                  import_react_native37.Text,
+          ),
+          isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            import_react_native37.ScrollView,
+            {
+              style: [
+                styles33.dropdown,
+                {
+                  borderColor: colors2.colorBgSubtle,
+                  backgroundColor: colors2.colorBg
+                }
+              ],
+              keyboardShouldPersistTaps: "handled",
+              nestedScrollEnabled: true,
+              children: filtered.map((option) => {
+                const isSelected = option.value === value;
+                const isDisabled = option.disabled;
+                return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  import_react_native37.Pressable,
                   {
-                    style: [
-                      styles33.optionText,
-                      {
-                        color: isSelected ? colors2.colorInteractive : colors2.colorOnBg
-                      },
-                      isSelected && { fontWeight: import_native.font.weight.semibold }
+                    onPress: () => !isDisabled && selectOption(option),
+                    disabled: isDisabled,
+                    accessibilityRole: "menuitem",
+                    accessibilityLabel: option.label,
+                    accessibilityState: { selected: isSelected, disabled: isDisabled },
+                    style: ({ pressed }) => [
+                      styles33.option,
+                      isSelected && { backgroundColor: colors2.colorBlueSubtle },
+                      pressed && !isDisabled && { backgroundColor: colors2.colorBgSubtle },
+                      isDisabled && { opacity: 0.4 }
                     ],
-                    children: option.label
-                  }
-                )
-              },
-              option.value
-            );
-          })
-        }
-      )
-    ] }),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                      import_react_native37.Text,
+                      {
+                        style: [
+                          styles33.optionText,
+                          {
+                            color: isSelected ? colors2.colorInteractive : colors2.colorOnBg
+                          },
+                          isSelected && { fontWeight: import_native.font.weight.semibold }
+                        ],
+                        children: option.label
+                      }
+                    )
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { type: "error", message: error }),
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { type: "hint", message: hint })
   ] });
@@ -2928,6 +2949,7 @@ function SegmentedControl({
 var import_react11 = require("react");
 var import_react_native39 = require("react-native");
 var import_jsx_runtime39 = require("react/jsx-runtime");
+var INPUT_HEIGHT2 = 44;
 var keyboardTypeMap = {
   text: "default",
   email: "email-address",
@@ -2941,15 +2963,28 @@ var styles35 = import_react_native39.StyleSheet.create({
   container: {
     gap: import_native.spacing.xxs
   },
+  /**
+   * The wrapper draws the pill border and provides the fixed 44pt touch-target height.
+   * justifyContent: 'center' vertically centers the inner TextInput on both iOS and Android.
+   */
+  inputWrapper: {
+    height: INPUT_HEIGHT2,
+    justifyContent: "center",
+    borderWidth: 1,
+    borderRadius: import_native.border.radius.full
+  },
+  /**
+   * No vertical padding: iOS centers text automatically inside the wrapper height.
+   * textAlignVertical + includeFontPadding are Android-specific but harmless on iOS.
+   * No lineHeight: explicit lineHeight on a single-line TextInput clips ascenders/descenders on iOS.
+   */
   input: {
     fontFamily: import_native.font.family.body,
     fontSize: import_native.font.size.body,
-    lineHeight: lineHeight.body,
     paddingHorizontal: import_native.spacing.s,
-    paddingVertical: import_native.spacing.xs,
-    borderWidth: 1,
-    borderRadius: import_native.border.radius.full,
-    minHeight: 44
+    paddingVertical: 0,
+    textAlignVertical: "center",
+    includeFontPadding: false
   }
 });
 function FormInput({
@@ -2973,38 +3008,46 @@ function FormInput({
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native39.View, { style: [styles35.container, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label, { label }),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      import_react_native39.TextInput,
+      import_react_native39.View,
       {
-        accessibilityLabel: typeof label === "string" ? label : name,
-        accessibilityState: { disabled },
-        accessibilityHint: hint,
-        value,
-        defaultValue,
-        placeholder,
-        placeholderTextColor: colors2.colorOnBgSubtle,
-        keyboardType: keyboardTypeMap[type],
-        secureTextEntry: type === "password",
-        autoCapitalize: type === "email" || type === "url" ? "none" : "sentences",
-        autoComplete: type === "email" ? "email" : type === "tel" ? "tel" : void 0,
-        editable: !disabled,
-        onChangeText: onChange,
-        onFocus: () => {
-          setFocused(true);
-          onFocus?.();
-        },
-        onBlur: () => {
-          setFocused(false);
-          onBlur?.();
-        },
         style: [
-          styles35.input,
+          styles35.inputWrapper,
           {
             borderColor,
-            color: colors2.colorOnBg,
             backgroundColor: colors2.colorBg
           },
           disabled && { opacity: 0.4 }
-        ]
+        ],
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          import_react_native39.TextInput,
+          {
+            accessibilityLabel: typeof label === "string" ? label : name,
+            accessibilityState: { disabled },
+            accessibilityHint: hint,
+            value,
+            defaultValue,
+            placeholder,
+            placeholderTextColor: colors2.colorOnBgSubtle,
+            keyboardType: keyboardTypeMap[type],
+            secureTextEntry: type === "password",
+            autoCapitalize: type === "email" || type === "url" ? "none" : "sentences",
+            autoComplete: type === "email" ? "email" : type === "tel" ? "tel" : void 0,
+            editable: !disabled,
+            onChangeText: onChange,
+            onFocus: () => {
+              setFocused(true);
+              onFocus?.();
+            },
+            onBlur: () => {
+              setFocused(false);
+              onBlur?.();
+            },
+            style: [
+              styles35.input,
+              { color: colors2.colorOnBg }
+            ]
+          }
+        )
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Message, { type: "error", message: error }),
@@ -3500,17 +3543,30 @@ var styles39 = import_react_native43.StyleSheet.create({
     fontWeight: import_native.font.weight.semibold,
     lineHeight: 24
   },
-  input: {
+  /**
+   * The inputWrapper holds the border and fixed height so justifyContent: 'center'
+   * vertically centers the TextInput. flex: 1 lets it fill the space between steppers.
+   */
+  inputWrapper: {
     flex: 1,
+    height: STEPPER_SIZE,
+    justifyContent: "center",
+    borderTopWidth: 1,
+    borderBottomWidth: 1
+  },
+  /**
+   * No vertical padding: iOS auto-centers within the wrapper height.
+   * textAlignVertical + includeFontPadding provide Android parity.
+   * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   */
+  input: {
     fontFamily: import_native.font.family.body,
     fontSize: import_native.font.size.body,
-    lineHeight: lineHeight.body,
     textAlign: "center",
     paddingHorizontal: import_native.spacing.xs,
-    paddingVertical: import_native.spacing.xs,
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    minHeight: STEPPER_SIZE
+    paddingVertical: 0,
+    textAlignVertical: "center",
+    includeFontPadding: false
   }
 });
 function NumberInput({
@@ -3576,32 +3632,40 @@ function NumberInput({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        import_react_native43.TextInput,
+        import_react_native43.View,
         {
-          accessibilityLabel: label,
-          accessibilityState: { disabled },
-          accessibilityValue: {
-            min,
-            max,
-            now: currentValue,
-            text: String(currentValue)
-          },
-          keyboardType: "numeric",
-          value: String(currentValue),
-          editable: !disabled,
-          onChangeText: (text) => {
-            const parsed = parseFloat(text);
-            const safe = isNaN(parsed) ? 0 : parsed;
-            update(safe);
-          },
           style: [
-            styles39.input,
+            styles39.inputWrapper,
             {
               borderColor,
-              color: colors2.colorOnBg,
               backgroundColor: colors2.colorBg
             }
-          ]
+          ],
+          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_react_native43.TextInput,
+            {
+              accessibilityLabel: label,
+              accessibilityState: { disabled },
+              accessibilityValue: {
+                min,
+                max,
+                now: currentValue,
+                text: String(currentValue)
+              },
+              keyboardType: "numeric",
+              value: String(currentValue),
+              editable: !disabled,
+              onChangeText: (text) => {
+                const parsed = parseFloat(text);
+                const safe = isNaN(parsed) ? 0 : parsed;
+                update(safe);
+              },
+              style: [
+                styles39.input,
+                { color: colors2.colorOnBg }
+              ]
+            }
+          )
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(

package/dist/index.js

@@ -2635,23 +2635,36 @@ import {
   ScrollView as ScrollView4
 } from "react-native";
 import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+var INPUT_HEIGHT = 44;
 var MAX_DROPDOWN_HEIGHT = 200;
 var styles33 = StyleSheet33.create({
   container: {
     gap: spacing.xxs
   },
+  /**
+   * Draws the pill border and provides the fixed 44pt touch-target height.
+   * justifyContent: 'center' vertically centers the inner TextInput.
+   * position: 'relative' is required for the dropdown's absolute positioning.
+   */
   inputWrapper: {
-    position: "relative"
+    position: "relative",
+    height: INPUT_HEIGHT,
+    justifyContent: "center",
+    borderWidth: 1,
+    borderRadius: border.radius.full
   },
+  /**
+   * No vertical padding: iOS centers text automatically inside the wrapper height.
+   * textAlignVertical + includeFontPadding provide Android parity.
+   * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   */
   input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-    paddingVertical: spacing.xs,
     paddingHorizontal: spacing.s,
-    borderWidth: 1,
-    borderRadius: border.radius.full,
-    minHeight: 44
+    paddingVertical: 0,
+    textAlignVertical: "center",
+    includeFontPadding: false
   },
   dropdown: {
     position: "absolute",
@@ -2720,80 +2733,88 @@ function Combobox({
   const borderColor = error ? colors2.colorError : colors2.colorOnBg;
   return /* @__PURE__ */ jsxs23(View30, { style: [styles33.container, style], children: [
     /* @__PURE__ */ jsx37(Label, { label }),
-    /* @__PURE__ */ jsxs23(View30, { style: styles33.inputWrapper, children: [
-      /* @__PURE__ */ jsx37(
-        TextInput,
-        {
-          value: inputValue,
-          onChangeText: handleChangeText,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          placeholder,
-          placeholderTextColor: colors2.colorOnBgSubtle,
-          editable: !disabled,
-          accessibilityRole: "combobox",
-          accessibilityLabel: typeof label === "string" ? label : name,
-          accessibilityState: { disabled, expanded: isOpen },
-          style: [
-            styles33.input,
-            {
-              borderColor,
-              color: colors2.colorOnBg,
-              backgroundColor: colors2.colorBg
-            },
-            disabled && { opacity: 0.4 }
-          ]
-        }
-      ),
-      isOpen && filtered.length > 0 && /* @__PURE__ */ jsx37(
-        ScrollView4,
-        {
-          style: [
-            styles33.dropdown,
+    /* @__PURE__ */ jsxs23(
+      View30,
+      {
+        style: [
+          styles33.inputWrapper,
+          {
+            borderColor,
+            backgroundColor: colors2.colorBg
+          },
+          disabled && { opacity: 0.4 }
+        ],
+        children: [
+          /* @__PURE__ */ jsx37(
+            TextInput,
             {
-              borderColor: colors2.colorBgSubtle,
-              backgroundColor: colors2.colorBg
+              value: inputValue,
+              onChangeText: handleChangeText,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              placeholder,
+              placeholderTextColor: colors2.colorOnBgSubtle,
+              editable: !disabled,
+              accessibilityRole: "combobox",
+              accessibilityLabel: typeof label === "string" ? label : name,
+              accessibilityState: { disabled, expanded: isOpen },
+              style: [
+                styles33.input,
+                { color: colors2.colorOnBg }
+              ]
             }
-          ],
-          keyboardShouldPersistTaps: "handled",
-          nestedScrollEnabled: true,
-          children: filtered.map((option) => {
-            const isSelected = option.value === value;
-            const isDisabled = option.disabled;
-            return /* @__PURE__ */ jsx37(
-              Pressable18,
-              {
-                onPress: () => !isDisabled && selectOption(option),
-                disabled: isDisabled,
-                accessibilityRole: "menuitem",
-                accessibilityLabel: option.label,
-                accessibilityState: { selected: isSelected, disabled: isDisabled },
-                style: ({ pressed }) => [
-                  styles33.option,
-                  isSelected && { backgroundColor: colors2.colorBlueSubtle },
-                  pressed && !isDisabled && { backgroundColor: colors2.colorBgSubtle },
-                  isDisabled && { opacity: 0.4 }
-                ],
-                children: /* @__PURE__ */ jsx37(
-                  Text27,
+          ),
+          isOpen && filtered.length > 0 && /* @__PURE__ */ jsx37(
+            ScrollView4,
+            {
+              style: [
+                styles33.dropdown,
+                {
+                  borderColor: colors2.colorBgSubtle,
+                  backgroundColor: colors2.colorBg
+                }
+              ],
+              keyboardShouldPersistTaps: "handled",
+              nestedScrollEnabled: true,
+              children: filtered.map((option) => {
+                const isSelected = option.value === value;
+                const isDisabled = option.disabled;
+                return /* @__PURE__ */ jsx37(
+                  Pressable18,
                   {
-                    style: [
-                      styles33.optionText,
-                      {
-                        color: isSelected ? colors2.colorInteractive : colors2.colorOnBg
-                      },
-                      isSelected && { fontWeight: font.weight.semibold }
+                    onPress: () => !isDisabled && selectOption(option),
+                    disabled: isDisabled,
+                    accessibilityRole: "menuitem",
+                    accessibilityLabel: option.label,
+                    accessibilityState: { selected: isSelected, disabled: isDisabled },
+                    style: ({ pressed }) => [
+                      styles33.option,
+                      isSelected && { backgroundColor: colors2.colorBlueSubtle },
+                      pressed && !isDisabled && { backgroundColor: colors2.colorBgSubtle },
+                      isDisabled && { opacity: 0.4 }
                     ],
-                    children: option.label
-                  }
-                )
-              },
-              option.value
-            );
-          })
-        }
-      )
-    ] }),
+                    children: /* @__PURE__ */ jsx37(
+                      Text27,
+                      {
+                        style: [
+                          styles33.optionText,
+                          {
+                            color: isSelected ? colors2.colorInteractive : colors2.colorOnBg
+                          },
+                          isSelected && { fontWeight: font.weight.semibold }
+                        ],
+                        children: option.label
+                      }
+                    )
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx37(Message, { type: "error", message: error }),
     /* @__PURE__ */ jsx37(Message, { type: "hint", message: hint })
   ] });
@@ -2885,6 +2906,7 @@ import {
   TextInput as TextInput2
 } from "react-native";
 import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+var INPUT_HEIGHT2 = 44;
 var keyboardTypeMap = {
   text: "default",
   email: "email-address",
@@ -2898,15 +2920,28 @@ var styles35 = StyleSheet35.create({
   container: {
     gap: spacing.xxs
   },
+  /**
+   * The wrapper draws the pill border and provides the fixed 44pt touch-target height.
+   * justifyContent: 'center' vertically centers the inner TextInput on both iOS and Android.
+   */
+  inputWrapper: {
+    height: INPUT_HEIGHT2,
+    justifyContent: "center",
+    borderWidth: 1,
+    borderRadius: border.radius.full
+  },
+  /**
+   * No vertical padding: iOS centers text automatically inside the wrapper height.
+   * textAlignVertical + includeFontPadding are Android-specific but harmless on iOS.
+   * No lineHeight: explicit lineHeight on a single-line TextInput clips ascenders/descenders on iOS.
+   */
   input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
     paddingHorizontal: spacing.s,
-    paddingVertical: spacing.xs,
-    borderWidth: 1,
-    borderRadius: border.radius.full,
-    minHeight: 44
+    paddingVertical: 0,
+    textAlignVertical: "center",
+    includeFontPadding: false
   }
 });
 function FormInput({
@@ -2930,38 +2965,46 @@ function FormInput({
   return /* @__PURE__ */ jsxs24(View32, { style: [styles35.container, style], children: [
     /* @__PURE__ */ jsx39(Label, { label }),
     /* @__PURE__ */ jsx39(
-      TextInput2,
+      View32,
       {
-        accessibilityLabel: typeof label === "string" ? label : name,
-        accessibilityState: { disabled },
-        accessibilityHint: hint,
-        value,
-        defaultValue,
-        placeholder,
-        placeholderTextColor: colors2.colorOnBgSubtle,
-        keyboardType: keyboardTypeMap[type],
-        secureTextEntry: type === "password",
-        autoCapitalize: type === "email" || type === "url" ? "none" : "sentences",
-        autoComplete: type === "email" ? "email" : type === "tel" ? "tel" : void 0,
-        editable: !disabled,
-        onChangeText: onChange,
-        onFocus: () => {
-          setFocused(true);
-          onFocus?.();
-        },
-        onBlur: () => {
-          setFocused(false);
-          onBlur?.();
-        },
         style: [
-          styles35.input,
+          styles35.inputWrapper,
           {
             borderColor,
-            color: colors2.colorOnBg,
             backgroundColor: colors2.colorBg
           },
           disabled && { opacity: 0.4 }
-        ]
+        ],
+        children: /* @__PURE__ */ jsx39(
+          TextInput2,
+          {
+            accessibilityLabel: typeof label === "string" ? label : name,
+            accessibilityState: { disabled },
+            accessibilityHint: hint,
+            value,
+            defaultValue,
+            placeholder,
+            placeholderTextColor: colors2.colorOnBgSubtle,
+            keyboardType: keyboardTypeMap[type],
+            secureTextEntry: type === "password",
+            autoCapitalize: type === "email" || type === "url" ? "none" : "sentences",
+            autoComplete: type === "email" ? "email" : type === "tel" ? "tel" : void 0,
+            editable: !disabled,
+            onChangeText: onChange,
+            onFocus: () => {
+              setFocused(true);
+              onFocus?.();
+            },
+            onBlur: () => {
+              setFocused(false);
+              onBlur?.();
+            },
+            style: [
+              styles35.input,
+              { color: colors2.colorOnBg }
+            ]
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsx39(Message, { type: "error", message: error }),
@@ -3479,17 +3522,30 @@ var styles39 = StyleSheet39.create({
     fontWeight: font.weight.semibold,
     lineHeight: 24
   },
-  input: {
+  /**
+   * The inputWrapper holds the border and fixed height so justifyContent: 'center'
+   * vertically centers the TextInput. flex: 1 lets it fill the space between steppers.
+   */
+  inputWrapper: {
     flex: 1,
+    height: STEPPER_SIZE,
+    justifyContent: "center",
+    borderTopWidth: 1,
+    borderBottomWidth: 1
+  },
+  /**
+   * No vertical padding: iOS auto-centers within the wrapper height.
+   * textAlignVertical + includeFontPadding provide Android parity.
+   * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   */
+  input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
     textAlign: "center",
     paddingHorizontal: spacing.xs,
-    paddingVertical: spacing.xs,
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    minHeight: STEPPER_SIZE
+    paddingVertical: 0,
+    textAlignVertical: "center",
+    includeFontPadding: false
   }
 });
 function NumberInput({
@@ -3555,32 +3611,40 @@ function NumberInput({
         }
       ),
       /* @__PURE__ */ jsx43(
-        TextInput4,
+        View36,
         {
-          accessibilityLabel: label,
-          accessibilityState: { disabled },
-          accessibilityValue: {
-            min,
-            max,
-            now: currentValue,
-            text: String(currentValue)
-          },
-          keyboardType: "numeric",
-          value: String(currentValue),
-          editable: !disabled,
-          onChangeText: (text) => {
-            const parsed = parseFloat(text);
-            const safe = isNaN(parsed) ? 0 : parsed;
-            update(safe);
-          },
           style: [
-            styles39.input,
+            styles39.inputWrapper,
             {
               borderColor,
-              color: colors2.colorOnBg,
               backgroundColor: colors2.colorBg
             }
-          ]
+          ],
+          children: /* @__PURE__ */ jsx43(
+            TextInput4,
+            {
+              accessibilityLabel: label,
+              accessibilityState: { disabled },
+              accessibilityValue: {
+                min,
+                max,
+                now: currentValue,
+                text: String(currentValue)
+              },
+              keyboardType: "numeric",
+              value: String(currentValue),
+              editable: !disabled,
+              onChangeText: (text) => {
+                const parsed = parseFloat(text);
+                const safe = isNaN(parsed) ? 0 : parsed;
+                update(safe);
+              },
+              style: [
+                styles39.input,
+                { color: colors2.colorOnBg }
+              ]
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsx43(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-react-native",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "BoostDev React Native component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "react-native",

package/src/components/interaction/form/Combobox/Combobox.spec.tsx

@@ -57,4 +57,32 @@ describe('Combobox (native)', () => {
     );
     expect(screen.getByText('Type to filter.')).toBeInTheDocument();
   });
+
+  /**
+   * Vertical-centering invariant: the TextInput must have no vertical padding so that
+   * iOS centers text automatically within the wrapper height.
+   */
+  it('has paddingVertical: 0 on the TextInput (vertical centering)', () => {
+    renderWithTheme(
+      <Combobox label="Fruit" name="fruit" options={fruits} />,
+    );
+    const input = screen.getByRole('combobox');
+    const style = getComputedStyle(input);
+    expect(parseFloat(style.paddingTop)).toBe(0);
+    expect(parseFloat(style.paddingBottom)).toBe(0);
+  });
+
+  /**
+   * Touch-target invariant: the inputWrapper View that draws the pill border must
+   * provide the 44pt touch-target height.
+   */
+  it('has height of 44pt on the pill wrapper (touch target)', () => {
+    renderWithTheme(
+      <Combobox label="Fruit" name="fruit" options={fruits} />,
+    );
+    const input = screen.getByRole('combobox');
+    const wrapper = input.parentElement as HTMLElement;
+    const heightPx = parseFloat(getComputedStyle(wrapper).height);
+    expect(heightPx).toBeGreaterThanOrEqual(44);
+  });
 });

package/src/components/interaction/form/Combobox/Combobox.tsx

@@ -9,7 +9,10 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../../native/tokens';
+import { spacing, font, border, lineHeight } from '../../../../native/tokens'; // lineHeight used for optionText (Text, not TextInput)
+
+/** Fixed height for single-line control fields (satisfies 44pt touch target). */
+const INPUT_HEIGHT = 44;
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
@@ -39,18 +42,30 @@ const styles = StyleSheet.create({
   container: {
     gap: spacing.xxs,
   },
+  /**
+   * Draws the pill border and provides the fixed 44pt touch-target height.
+   * justifyContent: 'center' vertically centers the inner TextInput.
+   * position: 'relative' is required for the dropdown's absolute positioning.
+   */
   inputWrapper: {
     position: 'relative',
+    height: INPUT_HEIGHT,
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderRadius: border.radius.full,
   },
+  /**
+   * No vertical padding: iOS centers text automatically inside the wrapper height.
+   * textAlignVertical + includeFontPadding provide Android parity.
+   * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   */
   input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-    paddingVertical: spacing.xs,
     paddingHorizontal: spacing.s,
-    borderWidth: 1,
-    borderRadius: border.radius.full,
-    minHeight: 44,
+    paddingVertical: 0,
+    textAlignVertical: 'center',
+    includeFontPadding: false,
   },
   dropdown: {
     position: 'absolute',
@@ -132,7 +147,16 @@ export function Combobox({
   return (
     <View style={[styles.container, style]}>
       <Label label={label} />
-      <View style={styles.inputWrapper}>
+      <View
+        style={[
+          styles.inputWrapper,
+          {
+            borderColor,
+            backgroundColor: colors.colorBg,
+          },
+          disabled && { opacity: 0.4 },
+        ]}
+      >
         <TextInput
           value={inputValue}
           onChangeText={handleChangeText}
@@ -146,12 +170,7 @@ export function Combobox({
           accessibilityState={{ disabled, expanded: isOpen }}
           style={[
             styles.input,
-            {
-              borderColor,
-              color: colors.colorOnBg,
-              backgroundColor: colors.colorBg,
-            },
-            disabled && { opacity: 0.4 },
+            { color: colors.colorOnBg },
           ]}
         />
         {isOpen && filtered.length > 0 && (

package/src/components/interaction/form/FormInput/FormInput.spec.tsx

@@ -48,4 +48,51 @@ describe('FormInput (native)', () => {
     const inputs = container.querySelectorAll('input, [style*="opacity"]');
     expect(inputs.length).toBeGreaterThan(0);
   });
+
+  /**
+   * Style-contract invariant: single-line TextInput must NOT have lineHeight set.
+   *
+   * On iOS, an explicit lineHeight on a single-line TextInput causes the text to
+   * render vertically clipped — descenders and ascenders are cut off at the line box
+   * boundary. The wrapper height + justifyContent: 'center' satisfies vertical centering
+   * without needing lineHeight. This test pins that invariant so it can't silently regress.
+   *
+   * react-native-web applies token-based styles as atomic CSS classes. getComputedStyle
+   * resolves those classes in jsdom and returns "normal" when lineHeight is absent.
+   */
+  it('does not set lineHeight on the TextInput (iOS clipping prevention)', () => {
+    renderWithTheme(<FormInput label="Email" name="email" value="bjorn@boonen.eu" />);
+    const input = screen.getByDisplayValue('bjorn@boonen.eu');
+    // "normal" means no explicit lineHeight was applied; a numeric value means it was.
+    expect(getComputedStyle(input).lineHeight).toBe('normal');
+  });
+
+  /**
+   * Vertical-centering invariant: the TextInput must have no vertical padding so that
+   * iOS centers text automatically within the wrapper height. A non-zero paddingVertical
+   * shifts text off-center because iOS adds its own default internal top padding on top.
+   */
+  it('has paddingVertical: 0 on the TextInput (vertical centering)', () => {
+    renderWithTheme(<FormInput label="Email" name="email" />);
+    const input = screen.getByRole('textbox');
+    const style = getComputedStyle(input);
+    expect(parseFloat(style.paddingTop)).toBe(0);
+    expect(parseFloat(style.paddingBottom)).toBe(0);
+  });
+
+  /**
+   * Touch-target invariant: the wrapper View that draws the pill border must provide
+   * the 44pt touch-target height (replacing the minHeight that was previously on the
+   * TextInput itself).
+   */
+  it('has height of 44pt on the pill wrapper (touch target)', () => {
+    const { container } = renderWithTheme(<FormInput label="Email" name="email" />);
+    // The wrapper is the first div that contains the input in react-native-web's output.
+    const input = screen.getByRole('textbox');
+    const wrapper = input.parentElement as HTMLElement;
+    const heightPx = parseFloat(getComputedStyle(wrapper).height);
+    expect(heightPx).toBeGreaterThanOrEqual(44);
+    // Suppress unused-variable warning from destructuring
+    void container;
+  });
 });

package/src/components/interaction/form/FormInput/FormInput.tsx

@@ -7,11 +7,14 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../../native/tokens';
+import { spacing, font, border } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
 
+/** Fixed height for single-line control fields (satisfies 44pt touch target). */
+const INPUT_HEIGHT = 44;
+
 type InputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'search';
 
 interface FormInputProps {
@@ -44,15 +47,28 @@ const styles = StyleSheet.create({
   container: {
     gap: spacing.xxs,
   },
+  /**
+   * The wrapper draws the pill border and provides the fixed 44pt touch-target height.
+   * justifyContent: 'center' vertically centers the inner TextInput on both iOS and Android.
+   */
+  inputWrapper: {
+    height: INPUT_HEIGHT,
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderRadius: border.radius.full,
+  },
+  /**
+   * No vertical padding: iOS centers text automatically inside the wrapper height.
+   * textAlignVertical + includeFontPadding are Android-specific but harmless on iOS.
+   * No lineHeight: explicit lineHeight on a single-line TextInput clips ascenders/descenders on iOS.
+   */
   input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
     paddingHorizontal: spacing.s,
-    paddingVertical: spacing.xs,
-    borderWidth: 1,
-    borderRadius: border.radius.full,
-    minHeight: 44,
+    paddingVertical: 0,
+    textAlignVertical: 'center',
+    includeFontPadding: false,
   },
 });
 
@@ -83,38 +99,44 @@ export function FormInput({
   return (
     <View style={[styles.container, style]}>
       <Label label={label} />
-      <TextInput
-        accessibilityLabel={typeof label === 'string' ? label : name}
-        accessibilityState={{ disabled }}
-        accessibilityHint={hint}
-        value={value}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        placeholderTextColor={colors.colorOnBgSubtle}
-        keyboardType={keyboardTypeMap[type]}
-        secureTextEntry={type === 'password'}
-        autoCapitalize={type === 'email' || type === 'url' ? 'none' : 'sentences'}
-        autoComplete={type === 'email' ? 'email' : type === 'tel' ? 'tel' : undefined}
-        editable={!disabled}
-        onChangeText={onChange}
-        onFocus={() => {
-          setFocused(true);
-          onFocus?.();
-        }}
-        onBlur={() => {
-          setFocused(false);
-          onBlur?.();
-        }}
+      <View
         style={[
-          styles.input,
+          styles.inputWrapper,
           {
             borderColor,
-            color: colors.colorOnBg,
             backgroundColor: colors.colorBg,
           },
           disabled && { opacity: 0.4 },
         ]}
-      />
+      >
+        <TextInput
+          accessibilityLabel={typeof label === 'string' ? label : name}
+          accessibilityState={{ disabled }}
+          accessibilityHint={hint}
+          value={value}
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          placeholderTextColor={colors.colorOnBgSubtle}
+          keyboardType={keyboardTypeMap[type]}
+          secureTextEntry={type === 'password'}
+          autoCapitalize={type === 'email' || type === 'url' ? 'none' : 'sentences'}
+          autoComplete={type === 'email' ? 'email' : type === 'tel' ? 'tel' : undefined}
+          editable={!disabled}
+          onChangeText={onChange}
+          onFocus={() => {
+            setFocused(true);
+            onFocus?.();
+          }}
+          onBlur={() => {
+            setFocused(false);
+            onBlur?.();
+          }}
+          style={[
+            styles.input,
+            { color: colors.colorOnBg },
+          ]}
+        />
+      </View>
       <Message type="error" message={error} />
       <Message type="hint" message={hint} />
     </View>

package/src/components/interaction/form/NumberInput/NumberInput.spec.tsx

@@ -60,4 +60,28 @@ describe('NumberInput (native)', () => {
     expect(screen.getByRole('button', { name: 'Decrease' })).toBeDisabled();
     expect(screen.getByRole('button', { name: 'Increase' })).toBeDisabled();
   });
+
+  /**
+   * Vertical-centering invariant: the TextInput must have no vertical padding so that
+   * iOS centers text automatically within the wrapper height.
+   */
+  it('has paddingVertical: 0 on the TextInput (vertical centering)', () => {
+    renderWithTheme(<NumberInput label="Quantity" name="qty" value={3} />);
+    const input = screen.getByDisplayValue('3');
+    const style = getComputedStyle(input);
+    expect(parseFloat(style.paddingTop)).toBe(0);
+    expect(parseFloat(style.paddingBottom)).toBe(0);
+  });
+
+  /**
+   * Touch-target invariant: the wrapper View around the TextInput must provide
+   * the 44pt height (stepper height), replacing minHeight on the TextInput itself.
+   */
+  it('has height of 44pt on the TextInput wrapper (touch target)', () => {
+    renderWithTheme(<NumberInput label="Quantity" name="qty" value={3} />);
+    const input = screen.getByDisplayValue('3');
+    const wrapper = input.parentElement as HTMLElement;
+    const heightPx = parseFloat(getComputedStyle(wrapper).height);
+    expect(heightPx).toBeGreaterThanOrEqual(44);
+  });
 });

package/src/components/interaction/form/NumberInput/NumberInput.tsx

@@ -8,7 +8,7 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../../native/tokens';
+import { spacing, font, border } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
@@ -60,17 +60,30 @@ const styles = StyleSheet.create({
     fontWeight: font.weight.semibold,
     lineHeight: 24,
   },
-  input: {
+  /**
+   * The inputWrapper holds the border and fixed height so justifyContent: 'center'
+   * vertically centers the TextInput. flex: 1 lets it fill the space between steppers.
+   */
+  inputWrapper: {
     flex: 1,
+    height: STEPPER_SIZE,
+    justifyContent: 'center',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+  },
+  /**
+   * No vertical padding: iOS auto-centers within the wrapper height.
+   * textAlignVertical + includeFontPadding provide Android parity.
+   * No lineHeight: explicit lineHeight clips ascenders/descenders on iOS.
+   */
+  input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
     textAlign: 'center',
     paddingHorizontal: spacing.xs,
-    paddingVertical: spacing.xs,
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    minHeight: STEPPER_SIZE,
+    paddingVertical: 0,
+    textAlignVertical: 'center',
+    includeFontPadding: false,
   },
 });
 
@@ -139,32 +152,38 @@ export function NumberInput({
           </Text>
         </Pressable>
 
-        <TextInput
-          accessibilityLabel={label}
-          accessibilityState={{ disabled }}
-          accessibilityValue={{
-            min,
-            max,
-            now: currentValue,
-            text: String(currentValue),
-          }}
-          keyboardType="numeric"
-          value={String(currentValue)}
-          editable={!disabled}
-          onChangeText={(text) => {
-            const parsed = parseFloat(text);
-            const safe = isNaN(parsed) ? 0 : parsed;
-            update(safe);
-          }}
+        <View
           style={[
-            styles.input,
+            styles.inputWrapper,
             {
               borderColor,
-              color: colors.colorOnBg,
               backgroundColor: colors.colorBg,
             },
           ]}
-        />
+        >
+          <TextInput
+            accessibilityLabel={label}
+            accessibilityState={{ disabled }}
+            accessibilityValue={{
+              min,
+              max,
+              now: currentValue,
+              text: String(currentValue),
+            }}
+            keyboardType="numeric"
+            value={String(currentValue)}
+            editable={!disabled}
+            onChangeText={(text) => {
+              const parsed = parseFloat(text);
+              const safe = isNaN(parsed) ? 0 : parsed;
+              update(safe);
+            }}
+            style={[
+              styles.input,
+              { color: colors.colorOnBg },
+            ]}
+          />
+        </View>
 
         <Pressable
           accessibilityRole="button"