@boostdev/design-system-react-native 0.2.1 → 0.2.3

package/dist/index.js

@@ -2635,24 +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,
-    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
-    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
-    paddingVertical: spacing.xs,
     paddingHorizontal: spacing.s,
-    borderWidth: 1,
-    borderRadius: border.radius.full,
-    minHeight: 44
+    paddingVertical: 0,
+    textAlignVertical: "center",
+    includeFontPadding: false
   },
   dropdown: {
     position: "absolute",
@@ -2721,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 })
   ] });
@@ -2804,22 +2824,32 @@ function Combobox({
 import { Children } from "react";
 import { StyleSheet as StyleSheet34, View as View31, Pressable as Pressable19, Text as Text28 } from "react-native";
 import { jsx as jsx38 } from "react/jsx-runtime";
+var TRACK_PADDING = spacing.xxxs;
 var sizeTokens2 = {
-  small: { height: 32, fontSize: font.size.bodyS, px: spacing.s },
-  medium: { height: 40, fontSize: font.size.body, px: spacing.m },
-  large: { height: 48, fontSize: font.size.body, px: spacing.l }
+  small: { minHeight: 32, fontSize: font.size.bodyS, px: spacing.s, py: spacing.xxs },
+  medium: { minHeight: 44, fontSize: font.size.body, px: spacing.m, py: spacing.xs },
+  large: { minHeight: 48, fontSize: font.size.body, px: spacing.m, py: spacing.s }
+};
+var thumbShadow = {
+  shadowColor: "#000",
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.12,
+  shadowRadius: 2,
+  elevation: 2
 };
 var styles34 = StyleSheet34.create({
   track: {
     flexDirection: "row",
     borderRadius: border.radius.full,
+    padding: TRACK_PADDING,
     overflow: "hidden"
   },
-  item: {
+  segment: {
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    minHeight: 44
+    // Thumb radius = track radius minus the padding gap (mirrors thumb-radius calc in web CSS)
+    borderRadius: border.radius.full - TRACK_PADDING
   },
   label: {
     fontFamily: font.family.body,
@@ -2838,21 +2868,26 @@ function SegmentedControl({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  const { height, fontSize, px } = sizeTokens2[size];
+  const { minHeight, fontSize, px, py } = sizeTokens2[size];
   const items = Children.toArray(children);
-  const trackStyle = variant === "filled" ? { backgroundColor: colors2.colorBgSubtle } : { backgroundColor: "transparent", borderWidth: 1, borderColor: colors2.colorBgSubtle };
+  const trackBg = colors2.colorBgSubtle;
+  const thumbBg = variant === "outline" ? colors2.colorBg : colors2.colorInteractive;
   return /* @__PURE__ */ jsx38(
     View31,
     {
-      style: [styles34.track, trackStyle, { borderRadius: border.radius.full }, style],
+      style: [styles34.track, { backgroundColor: trackBg }, style],
       accessibilityRole: "tablist",
       accessibilityLabel,
       children: items.map((child, index) => {
         const isActive = index === selectedIndex;
-        const activeStyle = variant === "filled" ? { backgroundColor: colors2.colorInteractive } : { borderWidth: 2, borderColor: colors2.colorInteractive };
-        const inactiveStyle = variant === "filled" ? {} : {};
-        const textColor = variant === "filled" && isActive ? colors2.colorOnInteractive : isActive ? colors2.colorInteractive : colors2.colorOnBgSubtle;
+        const labelColor = isActive ? variant === "outline" ? colors2.colorInteractiveOnBg : colors2.colorOnInteractive : colors2.colorOnBgSubtle;
         const label = typeof child === "string" || typeof child === "number" ? String(child) : null;
+        const segmentStyle = {
+          minHeight,
+          paddingHorizontal: px,
+          paddingVertical: py,
+          ...isActive ? { backgroundColor: thumbBg, ...thumbShadow } : { backgroundColor: "transparent" }
+        };
         return /* @__PURE__ */ jsx38(
           Pressable19,
           {
@@ -2862,14 +2897,12 @@ function SegmentedControl({
             accessibilityLabel: label ?? void 0,
             accessibilityState: { selected: isActive, disabled },
             style: ({ pressed }) => [
-              styles34.item,
-              { height, paddingHorizontal: px },
-              isActive ? activeStyle : inactiveStyle,
-              variant === "filled" && isActive && { borderRadius: border.radius.full },
+              styles34.segment,
+              segmentStyle,
               pressed && !disabled && { opacity: 0.7 },
               disabled && { opacity: 0.4 }
             ],
-            children: label !== null ? /* @__PURE__ */ jsx38(Text28, { style: [styles34.label, { fontSize, color: textColor }], children: label }) : child
+            children: label !== null ? /* @__PURE__ */ jsx38(Text28, { style: [styles34.label, { fontSize, color: labelColor }], children: label }) : child
           },
           index
         );
@@ -2886,6 +2919,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",
@@ -2899,16 +2933,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,
-    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
-    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
     paddingHorizontal: spacing.s,
-    paddingVertical: spacing.xs,
-    borderWidth: 1,
-    borderRadius: border.radius.full,
-    minHeight: 44
+    paddingVertical: 0,
+    textAlignVertical: "center",
+    includeFontPadding: false
   }
 });
 function FormInput({
@@ -2932,38 +2978,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 }),
@@ -3481,18 +3535,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,
-    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
-    // lineHeight is set explicitly. minHeight: STEPPER_SIZE (44) covers the touch target.
     textAlign: "center",
     paddingHorizontal: spacing.xs,
-    paddingVertical: spacing.xs,
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    minHeight: STEPPER_SIZE
+    paddingVertical: 0,
+    textAlignVertical: "center",
+    includeFontPadding: false
   }
 });
 function NumberInput({
@@ -3558,32 +3624,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.1",
+  "version": "0.2.3",
   "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

@@ -10,6 +10,9 @@ import {
   ViewStyle,
 } from 'react-native';
 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,19 +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,
-    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
-    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
-    paddingVertical: spacing.xs,
     paddingHorizontal: spacing.s,
-    borderWidth: 1,
-    borderRadius: border.radius.full,
-    minHeight: 44,
+    paddingVertical: 0,
+    textAlignVertical: 'center',
+    includeFontPadding: false,
   },
   dropdown: {
     position: 'absolute',
@@ -133,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}
@@ -147,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

@@ -54,8 +54,8 @@ describe('FormInput (native)', () => {
    *
    * 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 minHeight: 44 token satisfies the touch-target requirement without
-   * needing lineHeight. This test pins that invariant so it can't silently regress.
+   * 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.
@@ -68,14 +68,31 @@ describe('FormInput (native)', () => {
   });
 
   /**
-   * Touch-target invariant: single-line input must meet the 44pt minimum touch target.
-   * This is the replacement constraint that makes lineHeight safe to omit.
+   * 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 minHeight of at least 44pt on the TextInput', () => {
+  it('has paddingVertical: 0 on the TextInput (vertical centering)', () => {
     renderWithTheme(<FormInput label="Email" name="email" />);
     const input = screen.getByRole('textbox');
-    // getComputedStyle resolves the atomic CSS class to a pixel value.
-    const minHeightPx = parseFloat(getComputedStyle(input).minHeight);
-    expect(minHeightPx).toBeGreaterThanOrEqual(44);
+    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;
   });
 });