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

package/CHANGELOG.md

@@ -1,6 +1,38 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.2.3] - 2026-06-11
+### Fixed
+- Fix(segmented-control): proper track + thumb rendering
+
+Replace per-segment outline/border approach with a single rounded track
+(colorBgSubtle background, 2 px inner padding) containing equal-width
+segments. Selected segment renders a contrasting thumb: colorBg + shadow
+for the outline variant (white elevated surface), colorInteractive for
+the filled variant. No per-segment borders; no stray focus rectangle.
+
+Mirrors the web DS visual contract (track bg, thumb bg, thumb radius =
+track radius minus padding). Dark mode via useTheme throughout.
+All accessibilityRole/accessibilityState props preserved.
+Spec updated to pin track-has-one-background and thumb structure. ([`2a83f88`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/2a83f8804553e390528fc85dd79c1541bf92343e))
+
+## [0.2.2] - 2026-06-11
+### Fixed
+- Fix(form): vertically center text in single-line inputs
+
+Replace minHeight + paddingVertical on TextInput with a wrapper View
+(height: 44, justifyContent: center) + paddingVertical: 0 on the inner
+TextInput. iOS auto-centers text within the wrapper height; paddingVertical
+on the TextInput itself caused text to sit off-center after the 0.2.1
+lineHeight removal. Added textAlignVertical: center and includeFontPadding:
+false for Android parity.
+
+Applied consistently to FormInput, NumberInput, and Combobox.
+Textarea (multiline) is unaffected.
+
+Spec invariants updated: paddingVertical === 0 on TextInput, wrapper
+height >= 44 replace the previous minHeight >= 44 assertion. ([`437b16d`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/437b16dccb60b3b3948c84519990c18688e51f71))
+
 ## [0.2.1] - 2026-06-11
 ### Fixed
 - Fix(form): prevent iOS text clipping in single-line inputs

package/dist/index.cjs

@@ -2682,24 +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,
-    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
-    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
-    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",
@@ -2768,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 })
   ] });
@@ -2851,22 +2871,32 @@ function Combobox({
 var import_react10 = require("react");
 var import_react_native38 = require("react-native");
 var import_jsx_runtime38 = require("react/jsx-runtime");
+var TRACK_PADDING = import_native.spacing.xxxs;
 var sizeTokens2 = {
-  small: { height: 32, fontSize: import_native.font.size.bodyS, px: import_native.spacing.s },
-  medium: { height: 40, fontSize: import_native.font.size.body, px: import_native.spacing.m },
-  large: { height: 48, fontSize: import_native.font.size.body, px: import_native.spacing.l }
+  small: { minHeight: 32, fontSize: import_native.font.size.bodyS, px: import_native.spacing.s, py: import_native.spacing.xxs },
+  medium: { minHeight: 44, fontSize: import_native.font.size.body, px: import_native.spacing.m, py: import_native.spacing.xs },
+  large: { minHeight: 48, fontSize: import_native.font.size.body, px: import_native.spacing.m, py: import_native.spacing.s }
+};
+var thumbShadow = {
+  shadowColor: "#000",
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.12,
+  shadowRadius: 2,
+  elevation: 2
 };
 var styles34 = import_react_native38.StyleSheet.create({
   track: {
     flexDirection: "row",
     borderRadius: import_native.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: import_native.border.radius.full - TRACK_PADDING
   },
   label: {
     fontFamily: import_native.font.family.body,
@@ -2885,21 +2915,26 @@ function SegmentedControl({
   style
 }) {
   const { colors: colors2 } = useTheme();
-  const { height, fontSize, px } = sizeTokens2[size];
+  const { minHeight, fontSize, px, py } = sizeTokens2[size];
   const items = import_react10.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__ */ (0, import_jsx_runtime38.jsx)(
     import_react_native38.View,
     {
-      style: [styles34.track, trackStyle, { borderRadius: import_native.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__ */ (0, import_jsx_runtime38.jsx)(
           import_react_native38.Pressable,
           {
@@ -2909,14 +2944,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: import_native.border.radius.full },
+              styles34.segment,
+              segmentStyle,
               pressed && !disabled && { opacity: 0.7 },
               disabled && { opacity: 0.4 }
             ],
-            children: label !== null ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native38.Text, { style: [styles34.label, { fontSize, color: textColor }], children: label }) : child
+            children: label !== null ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native38.Text, { style: [styles34.label, { fontSize, color: labelColor }], children: label }) : child
           },
           index
         );
@@ -2929,6 +2962,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",
@@ -2942,16 +2976,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,
-    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
-    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
     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({
@@ -2975,38 +3021,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 }),
@@ -3502,18 +3556,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,
-    // 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: import_native.spacing.xs,
-    paddingVertical: import_native.spacing.xs,
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    minHeight: STEPPER_SIZE
+    paddingVertical: 0,
+    textAlignVertical: "center",
+    includeFontPadding: false
   }
 });
 function NumberInput({
@@ -3579,32 +3645,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)(