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

package/package.json

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

package/src/components/interaction/Button/Button.spec.tsx

@@ -52,4 +52,21 @@ describe('Button (native)', () => {
     expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
     expect(screen.getByTestId('icon-only-outline')).toBeInTheDocument();
   });
+
+  it('has min-height instead of a fixed height so a long label can wrap', () => {
+    renderWithTheme(<Button size="large">Save</Button>);
+    const style = screen.getByRole('button').getAttribute('style') ?? '';
+    expect(style).toMatch(/min-height:\s*56px/);
+    expect(style).not.toMatch(/(^|[;\s])height:\s*56px/);
+  });
+
+  it('keeps a fixed height for an icon-only button', () => {
+    renderWithTheme(
+      <Button size="large" isIconOnly accessibilityLabel="Confirm">
+        <span data-testid="icon-only">✓</span>
+      </Button>,
+    );
+    const style = screen.getByRole('button').getAttribute('style') ?? '';
+    expect(style).toMatch(/(^|[;\s])height:\s*56px/);
+  });
 });

package/src/components/interaction/Button/Button.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { StyleSheet, Pressable, Text, View, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, Pressable, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 
@@ -38,6 +39,8 @@ const styles = StyleSheet.create({
     fontFamily: font.family.body,
     fontWeight: font.weight.semibold,
     includeFontPadding: false,
+    flexShrink: 1,
+    textAlign: 'center',
   },
 });
 
@@ -64,12 +67,15 @@ export function Button({
 
   const isOutline = variant === 'outline' || variant === 'ghost';
   const containerStyle: ViewStyle = {
-    height,
+    minHeight: height,
     paddingHorizontal: isIconOnly ? spacing.xs : px,
     borderRadius: radius,
     opacity: disabled ? 0.4 : 1,
     // Icon-only: square with equal xs padding on both axes.
     ...(isIconOnly && { aspectRatio: 1, paddingVertical: spacing.xs }),
+    // Icon-only keeps a fixed height (stays square); a text button gets vertical padding
+    // instead, so a wrapped label grows the button from minHeight rather than clipping.
+    ...(isIconOnly ? { height } : { paddingVertical: spacing.xxs }),
     ...(variant === 'default' && { backgroundColor: primaryColor }),
     ...(isOutline && {
       backgroundColor: 'transparent',

package/src/components/interaction/Dialog/Dialog.tsx

@@ -1,13 +1,6 @@
 import { ReactNode } from 'react';
-import {
-  Modal,
-  View,
-  Pressable,
-  Text,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { Modal, View, Pressable, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/interaction/DropdownMenu/DropdownMenu.tsx

@@ -1,17 +1,6 @@
 import React, { ReactElement, ReactNode, useState, useEffect, useRef } from 'react';
-import {
-  Modal,
-  View,
-  Pressable,
-  Text,
-  FlatList,
-  Animated,
-  StyleSheet,
-  Dimensions,
-  SafeAreaView,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { Modal, View, Pressable, FlatList, Animated, StyleSheet, Dimensions, SafeAreaView, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/interaction/Rating/Rating.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { font } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/interaction/SideSheet/SideSheet.tsx

@@ -1,15 +1,6 @@
 import { ReactNode, useEffect, useRef } from 'react';
-import {
-  Modal,
-  View,
-  Pressable,
-  Text,
-  Animated,
-  StyleSheet,
-  Dimensions,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { Modal, View, Pressable, Animated, StyleSheet, Dimensions, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/interaction/Toast/Toast.tsx

@@ -8,15 +8,8 @@ import {
   useContext,
   ReactNode,
 } from 'react';
-import {
-  View,
-  Text,
-  Pressable,
-  Animated,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { View, Pressable, Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Message } from '../atoms/Message';

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

@@ -1,14 +1,6 @@
 import { useState, useMemo } from 'react';
-import {
-  StyleSheet,
-  View,
-  TextInput,
-  Pressable,
-  Text,
-  ScrollView,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, Pressable, ScrollView, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text, ScaledTextInput as TextInput } from '../../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../../native/tokens'; // lineHeight used for optionText (Text, not TextInput)
 import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 

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

@@ -1,4 +1,5 @@
-import { StyleSheet, View, Pressable, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';

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

@@ -82,19 +82,21 @@ describe('FormInput (native)', () => {
   });
 
   /**
-   * 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).
+   * Touch-target invariant: the wrapper View that draws the pill border must provide at
+   * least the 44pt touch-target height (replacing the fixed height that was previously on
+   * the wrapper, so a large OS text size can grow the wrapper past 44pt instead of clipping).
+   *
+   * inputWrapper comes from StyleSheet.create, so react-native-web applies it as an atomic
+   * CSS class rather than an inline style attribute — jsdom has no layout engine, so a plain
+   * `height` computed-style read only reflects an explicit `height` declaration, not a
+   * `min-height` one; checking `minHeight` directly is the same invariant.
    */
-  it('has height of 44pt on the pill wrapper (touch target)', () => {
-    const { container } = renderWithTheme(<FormInput label="Email" name="email" />);
+  it('has a min-height of 44pt on the pill wrapper (touch target)', () => {
+    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;
+    expect(getComputedStyle(wrapper).minHeight).toBe('44px');
   });
 
   /**

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

@@ -1,12 +1,6 @@
 import { ReactNode, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  TextInput,
-  KeyboardTypeOptions,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, KeyboardTypeOptions, StyleProp, ViewStyle } from 'react-native';
+import { ScaledTextInput as TextInput } from '../../../../native/ScaledText';
 import { spacing, font, border } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
@@ -49,11 +43,11 @@ const styles = StyleSheet.create({
     gap: spacing.xxs,
   },
   /**
-   * The wrapper draws the pill border and provides the fixed 44pt touch-target height.
+   * The wrapper draws the pill border and provides at least 44pt touch-target height.
    * justifyContent: 'center' vertically centers the inner TextInput on both iOS and Android.
    */
   inputWrapper: {
-    height: INPUT_HEIGHT,
+    minHeight: INPUT_HEIGHT,
     justifyContent: 'center',
     borderWidth: 1,
     borderRadius: border.radius.full,

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

@@ -1,13 +1,6 @@
 import { useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  TextInput,
-  Text,
-  Pressable,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text, ScaledTextInput as TextInput } from '../../../../native/ScaledText';
 import { spacing, font, border } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Message } from '../atoms/Message';

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

@@ -1,4 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
+import type React from 'react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
 import { SegmentedControl } from './SegmentedControl';
 
@@ -6,6 +7,32 @@ function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
 
+// Mocks react-native's Text to expose numberOfLines/adjustsFontSizeToFit/minimumFontScale as data
+// attributes (react-native-web drops adjustsFontSizeToFit and minimumFontScale from the DOM).
+vi.mock('react-native', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-native')>();
+  return {
+    ...actual,
+    Text: ({
+      children,
+      maxFontSizeMultiplier,
+      numberOfLines,
+      adjustsFontSizeToFit,
+      minimumFontScale,
+    }: Record<string, unknown> & { children?: React.ReactNode }) => (
+      <span
+        data-testid="text"
+        data-max-font-scale={String(maxFontSizeMultiplier)}
+        data-lines={String(numberOfLines)}
+        data-fit={String(adjustsFontSizeToFit)}
+        data-min-scale={String(minimumFontScale)}
+      >
+        {children}
+      </span>
+    ),
+  };
+});
+
 describe('SegmentedControl (native)', () => {
   it('renders all segments', () => {
     renderWithTheme(
@@ -121,4 +148,32 @@ 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/);
+    });
+  });
+
+  it('shrinks a long label to fit its segment instead of wrapping', () => {
+    renderWithTheme(
+      <SegmentedControl accessibilityLabel="View">
+        {'A rather long segment label'}
+        {'Week'}
+      </SegmentedControl>,
+    );
+    const label = screen.getByText('A rather long segment label');
+    expect(label).toHaveAttribute('data-lines', '1');
+    expect(label).toHaveAttribute('data-fit', 'true');
+    expect(label).toHaveAttribute('data-min-scale', '0.5');
+  });
 });

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

@@ -1,9 +1,10 @@
 import { Children, ReactNode } from 'react';
-import { StyleSheet, View, Pressable, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../../native/ScaledText';
 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 +25,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 = {
@@ -122,7 +124,12 @@ export function SegmentedControl({
             ]}
           >
             {label !== null ? (
-              <Text style={[styles.label, { fontSize, color: labelColor }]}>
+              <Text
+                style={[styles.label, { fontSize, color: labelColor }]}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+                minimumFontScale={0.5}
+              >
                 {label}
               </Text>
             ) : (

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

@@ -1,15 +1,6 @@
 import { ReactNode, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  Modal,
-  FlatList,
-  SafeAreaView,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, Pressable, Modal, FlatList, SafeAreaView, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';

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

@@ -1,13 +1,6 @@
 import { useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  GestureResponderEvent,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, GestureResponderEvent, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';

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

@@ -1,11 +1,6 @@
 import { ReactNode, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  TextInput,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledTextInput as TextInput } from '../../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';

package/src/components/interaction/form/atoms/Label.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { Text, StyleProp, TextStyle } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
+import { ScaledText as Text } from '../../../../native/ScaledText';
 import { font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 

package/src/components/interaction/form/atoms/Message.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, Text, StyleProp, TextStyle } from 'react-native';
+import { StyleSheet, StyleProp, TextStyle } from 'react-native';
+import { ScaledText as Text } from '../../../../native/ScaledText';
 import { font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 

package/src/components/layout/SectionHeader/SectionHeader.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Accordion/Accordion.tsx

@@ -1,15 +1,6 @@
 import { ReactNode, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  LayoutAnimation,
-  Platform,
-  UIManager,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, Pressable, LayoutAnimation, Platform, UIManager, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Alert/Alert.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Avatar/Avatar.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, View, Text, Image, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, Image, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 

package/src/components/ui/Badge/Badge.spec.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import type React from 'react';
 import { ThemeProvider } from '../../../native/ThemeContext';
 import { Badge } from './Badge';
 
@@ -6,6 +7,23 @@ function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
 
+// Mocks react-native's Text to expose maxFontSizeMultiplier as a data attribute
+// (react-native-web drops it from the DOM).
+vi.mock('react-native', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-native')>();
+  return {
+    ...actual,
+    Text: ({
+      children,
+      maxFontSizeMultiplier,
+    }: Record<string, unknown> & { children?: React.ReactNode }) => (
+      <span data-testid="text" data-max-font-scale={String(maxFontSizeMultiplier)}>
+        {children}
+      </span>
+    ),
+  };
+});
+
 describe('Badge (native)', () => {
   it('renders children text', () => {
     renderWithTheme(<Badge>New</Badge>);
@@ -42,4 +60,14 @@ describe('Badge (native)', () => {
     renderWithTheme(<Badge style={{ marginTop: 10 }}>Styled</Badge>);
     expect(screen.getByText('Styled')).toBeInTheDocument();
   });
+
+  it('caps its text at a multiplier of 2 by default', () => {
+    renderWithTheme(<Badge>3</Badge>);
+    expect(screen.getByText('3')).toHaveAttribute('data-max-font-scale', '2');
+  });
+
+  it('uses the override multiplier when given', () => {
+    renderWithTheme(<Badge maxFontSizeMultiplier={1}>3</Badge>);
+    expect(screen.getByText('3')).toHaveAttribute('data-max-font-scale', '1');
+  });
 });

package/src/components/ui/Badge/Badge.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 
@@ -9,6 +10,11 @@ interface BadgeProps {
   children: ReactNode;
   variant?: BadgeVariant;
   style?: StyleProp<ViewStyle>;
+  /**
+   * Overrides the ceiling on how far the text grows with the OS text size (default: from its
+   * font size, see `maxFontScaleFor`). Pass `1` for a count on a fixed shape.
+   */
+  maxFontSizeMultiplier?: number;
 }
 
 const styles = StyleSheet.create({
@@ -29,7 +35,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export function Badge({ children, variant = 'primary', style }: BadgeProps) {
+export function Badge({ children, variant = 'primary', style, maxFontSizeMultiplier }: BadgeProps) {
   const { colors } = useTheme();
 
   const variantColors: Record<BadgeVariant, { bg: string; text: string }> = {
@@ -44,7 +50,7 @@ export function Badge({ children, variant = 'primary', style }: BadgeProps) {
 
   return (
     <View style={[styles.badge, { backgroundColor: bg }, style]}>
-      <Text style={[styles.text, { color: text }]}>{children}</Text>
+      <Text style={[styles.text, { color: text }]} maxFontSizeMultiplier={maxFontSizeMultiplier}>{children}</Text>
     </View>
   );
 }

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,5 @@
-import { AccessibilityRole, StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { AccessibilityRole, StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { ScaledText as Text } from '../../../native/ScaledText';
 import { spacing, font, lineHeight } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';