@boostdev/design-system-react-native 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,6 +1,23 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.4.0] - 2026-09-24
+### Added
+- Feat(segmented-control): xlarge size with a 56 pt tap target
+
+CoachHelpr requires 56 pt tap targets app-wide (the DS Button's own
+`large` is already 56 high). SegmentedControl's largest size was 48,
+short of that minimum.
+
+Add an additive `xlarge` size (minHeight 56, font.size.body,
+px spacing.m, py spacing.s) alongside the existing small/medium/large —
+no change to their values. Cover it with a spec asserting a rendered
+xlarge segment has a 56px minHeight, add an XLarge story, and document
+the new size in the component's size table and props reference in
+SegmentedControl.mdx.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`4e3121d`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/4e3121db4c8f7f1931bcdb8c78a28337ee78d259))
+
 ## [0.3.0] - 2026-09-23
 ### Added
 - Feat(alert): support arbitrary and theme-aware children

package/dist/index.cjs

@@ -2891,7 +2891,8 @@ var TRACK_PADDING = import_native.spacing.xxxs;
 var sizeTokens2 = {
   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 }
+  large: { minHeight: 48, fontSize: import_native.font.size.body, px: import_native.spacing.m, py: import_native.spacing.s },
+  xlarge: { minHeight: 56, fontSize: import_native.font.size.body, px: import_native.spacing.m, py: import_native.spacing.s }
 };
 var thumbShadow = {
   shadowColor: "#000",

package/dist/index.d.cts

@@ -468,7 +468,7 @@ interface ComboboxProps {
 }
 declare function Combobox({ label, name, options, placeholder, value, onChange, disabled, error, hint, style, }: Readonly<ComboboxProps>): react_jsx_runtime.JSX.Element;
 
-type SegmentedControlSize = 'small' | 'medium' | 'large';
+type SegmentedControlSize = 'small' | 'medium' | 'large' | 'xlarge';
 type SegmentedControlVariant = 'outline' | 'filled';
 interface SegmentedControlProps {
     selectedIndex?: number;

package/dist/index.d.ts

@@ -468,7 +468,7 @@ interface ComboboxProps {
 }
 declare function Combobox({ label, name, options, placeholder, value, onChange, disabled, error, hint, style, }: Readonly<ComboboxProps>): react_jsx_runtime.JSX.Element;
 
-type SegmentedControlSize = 'small' | 'medium' | 'large';
+type SegmentedControlSize = 'small' | 'medium' | 'large' | 'xlarge';
 type SegmentedControlVariant = 'outline' | 'filled';
 interface SegmentedControlProps {
     selectedIndex?: number;

package/dist/index.js

@@ -2844,7 +2844,8 @@ var TRACK_PADDING = spacing.xxxs;
 var sizeTokens2 = {
   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 }
+  large: { minHeight: 48, fontSize: font.size.body, px: spacing.m, py: spacing.s },
+  xlarge: { minHeight: 56, fontSize: font.size.body, px: spacing.m, py: spacing.s }
 };
 var thumbShadow = {
   shadowColor: "#000",

package/package.json

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

package/src/components/interaction/form/SegmentedControl/SegmentedControl.mdx

@@ -5,7 +5,7 @@ import * as Stories from './SegmentedControl.stories';
 
 # SegmentedControl (React Native)
 
-A horizontal control with multiple segments, where each segment acts as a tab. Supports `outline` and `filled` variants with three size options.
+A horizontal control with multiple segments, where each segment acts as a tab. Supports `outline` and `filled` variants with four size options.
 
 > **Status: alpha** -- API may change before stable release.
 
@@ -46,6 +46,9 @@ function Example() {
 ### Large
 <Canvas of={Stories.Large} />
 
+### XLarge
+<Canvas of={Stories.XLarge} />
+
 ### Disabled
 <Canvas of={Stories.Disabled} />
 
@@ -65,16 +68,27 @@ function Example() {
 |------|------|---------|-------------|
 | `selectedIndex` | number | `0` | Zero-based index of the active segment |
 | `disabled` | boolean | `false` | Disables all segments |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Controls height and font size |
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` | Controls height and font size |
 | `variant` | `'outline' \| 'filled'` | `'outline'` | Visual style of the control |
 | `children` | ReactNode | -- | Segment labels (strings or elements) |
 | `accessibilityLabel` | string | -- | Label for the tab group |
 | `onValueChange` | `(index: number) => void` | -- | Called with the tapped segment index |
 
+## Sizes
+
+| Size | minHeight | fontSize | Horizontal padding | Vertical padding |
+|------|-----------|----------|---------------------|-------------------|
+| `small` | 32 | `font.size.bodyS` | `spacing.s` | `spacing.xxs` |
+| `medium` | 44 | `font.size.body` | `spacing.m` | `spacing.xs` |
+| `large` | 48 | `font.size.body` | `spacing.m` | `spacing.s` |
+| `xlarge` | 56 | `font.size.body` | `spacing.m` | `spacing.s` |
+
+`xlarge` matches the DS `Button`'s own `large` height (56 pt) — use it wherever a 56 pt tap target is required (e.g. CoachHelpr's app-wide minimum).
+
 ## Visual structure
 
 - **Track** — a single rounded container (`flexDirection: 'row'`, `borderRadius: full`, `colorBgSubtle` background, 2 px inner padding). No per-segment borders.
-- **Segments** — equal-width (`flex: 1`), min touch target 44 dp for medium/large.
+- **Segments** — equal-width (`flex: 1`), min touch target 44 dp for medium/large, 56 dp for xlarge.
 - **Selected thumb** — contrasting background rendered on the active segment only:
   - `outline` variant → `colorBg` (elevated white / dark-elevated) + subtle shadow, label uses `colorInteractiveOnBg`.
   - `filled` variant → `colorInteractive` background, label uses `colorOnInteractive`.

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

@@ -121,4 +121,19 @@ describe('SegmentedControl (native)', () => {
     expect(screen.getByText('Day')).toBeInTheDocument();
     expect(screen.getByText('Week')).toBeInTheDocument();
   });
+
+  it('renders an xlarge segment with a 56pt minHeight', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View" size="xlarge">
+        {'Day'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs).toHaveLength(2);
+    tabs.forEach((tab) => {
+      const style = tab.getAttribute('style') ?? '';
+      expect(style).toMatch(/min-height:\s*56px/);
+    });
+  });
 });

package/src/components/interaction/form/SegmentedControl/SegmentedControl.stories.tsx

@@ -50,6 +50,15 @@ export const Large: Story = {
   },
 };
 
+export const XLarge: Story = {
+  args: {
+    size: 'xlarge',
+    selectedIndex: 0,
+    children: ['First', 'Second', 'Third'],
+    accessibilityLabel: 'Selection',
+  },
+};
+
 export const Disabled: Story = {
   args: {
     selectedIndex: 0,

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

@@ -3,7 +3,7 @@ import { StyleSheet, View, Pressable, Text, StyleProp, ViewStyle } from 'react-n
 import { spacing, font, border } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 
-type SegmentedControlSize = 'small' | 'medium' | 'large';
+type SegmentedControlSize = 'small' | 'medium' | 'large' | 'xlarge';
 type SegmentedControlVariant = 'outline' | 'filled';
 
 interface SegmentedControlProps {
@@ -24,6 +24,7 @@ const sizeTokens: Record<SegmentedControlSize, { minHeight: number; fontSize: nu
   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   },
+  xlarge: { minHeight: 56, fontSize: font.size.body,  px: spacing.m,  py: spacing.s   },
 };
 
 const thumbShadow = {