@boostdev/design-system-react-native 0.5.1 → 0.7.0

package/dist/index.js

@@ -15,15 +15,25 @@ var lineHeight = {
 
 // src/native/ThemeContext.tsx
 import { jsx } from "react/jsx-runtime";
+var defaultRadius = {
+  button: border.radius.m,
+  iconButton: border.radius.full,
+  field: border.radius.m
+};
 var ThemeContext = createContext(null);
 function ThemeProvider({ children, colorScheme, tokens }) {
   const systemScheme = useColorScheme();
   const isDark = (colorScheme ?? systemScheme) === "dark";
+  const parentRadius = useContext(ThemeContext)?.radius ?? defaultRadius;
   const value = useMemo(() => {
     const base = isDark ? colors.dark : colors.light;
     const overrides = isDark ? tokens?.dark : tokens?.light;
-    return { colors: { ...base, ...overrides }, isDark };
-  }, [isDark, tokens]);
+    return {
+      colors: { ...base, ...overrides },
+      isDark,
+      radius: { ...parentRadius, ...tokens?.radius }
+    };
+  }, [isDark, tokens, parentRadius]);
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
@@ -2170,17 +2180,16 @@ function Button({
   accessibilityLabel,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const { height, px, fontSize } = sizeTokens[size];
   const primaryColor = colors2.colorInteractive;
   const onPrimaryColor = colors2.colorOnInteractive;
   const outlineTextColor = colors2.colorInteractiveOnBg;
-  const isOutline = variant === "outline" || variant === "ghost";
   const containerStyle = {
     minHeight: height,
     paddingHorizontal: isIconOnly ? spacing.xs : px,
-    // A text button has medium corners on every size; an icon-only button stays round.
-    borderRadius: isIconOnly ? border.radius.full : border.radius.m,
+    // Corners come from the theme (`tokens.radius`); a borderRadius in `style` still wins.
+    borderRadius: isIconOnly ? radius.iconButton : radius.button,
     opacity: disabled ? 0.4 : 1,
     // Icon-only: square with equal xs padding on both axes.
     ...isIconOnly && { aspectRatio: 1, paddingVertical: spacing.xs },
@@ -2188,11 +2197,12 @@ function Button({
     // instead, so a wrapped label grows the button from minHeight rather than clipping.
     ...isIconOnly ? { height } : { paddingVertical: spacing.xxs },
     ...variant === "default" && { backgroundColor: primaryColor },
-    ...isOutline && {
+    ...variant === "outline" && {
       backgroundColor: "transparent",
       borderWidth: 1,
       borderColor: outlineTextColor
-    }
+    },
+    ...variant === "ghost" && { backgroundColor: "transparent" }
   };
   const textColor = variant === "default" ? onPrimaryColor : outlineTextColor;
   return /* @__PURE__ */ jsxs16(
@@ -2584,7 +2594,6 @@ var styles33 = StyleSheet34.create({
     paddingHorizontal: spacing.m,
     borderWidth: 2,
     borderStyle: "dashed",
-    borderRadius: border.radius.m,
     minHeight: 120
   },
   icon: {
@@ -2625,7 +2634,7 @@ function FileInput({
   fileNames = [],
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const borderColor = error ? colors2.colorError : colors2.colorBgSubtle;
   return /* @__PURE__ */ jsxs22(View29, { style: [styles33.container, style], testID: name, children: [
     /* @__PURE__ */ jsx38(
@@ -2646,6 +2655,7 @@ function FileInput({
           styles33.dropZone,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: "transparent"
           },
           pressed && { opacity: 0.7 },
@@ -2680,7 +2690,8 @@ var styles34 = StyleSheet35.create({
     gap: spacing.xxs
   },
   /**
-   * Draws the rounded border and provides the fixed 44pt touch-target height.
+   * Draws the rounded border (`radius.field` from the theme) 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.
    */
@@ -2688,8 +2699,7 @@ var styles34 = StyleSheet35.create({
     position: "relative",
     height: INPUT_HEIGHT,
     justifyContent: "center",
-    borderWidth: 1,
-    borderRadius: border.radius.m
+    borderWidth: 1
   },
   /**
    * No vertical padding: iOS centers text automatically inside the wrapper height.
@@ -2742,7 +2752,7 @@ function Combobox({
   hint,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const selectedOption = useMemo2(
     () => options.find((o) => o.value === value),
     [options, value]
@@ -2780,6 +2790,7 @@ function Combobox({
           styles34.inputWrapper,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors2.colorBg
           },
           disabled && { opacity: 0.4 }
@@ -2980,14 +2991,14 @@ var styles36 = StyleSheet37.create({
     gap: spacing.xxs
   },
   /**
-   * The wrapper draws the rounded border and provides at least 44pt touch-target height.
+   * The wrapper draws the rounded border (`radius.field` from the theme) and provides
+   * at least 44pt touch-target height.
    * justifyContent: 'center' vertically centers the inner TextInput on both iOS and Android.
    */
   inputWrapper: {
     minHeight: INPUT_HEIGHT2,
     justifyContent: "center",
-    borderWidth: 1,
-    borderRadius: border.radius.m
+    borderWidth: 1
   },
   /**
    * No vertical padding: iOS centers text automatically inside the wrapper height.
@@ -3020,7 +3031,7 @@ function FormInput({
   onFocus,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const [focused, setFocused] = useState8(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
   return /* @__PURE__ */ jsxs24(View32, { style: [styles36.container, style], children: [
@@ -3032,6 +3043,7 @@ function FormInput({
           styles36.inputWrapper,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors2.colorBg
           },
           disabled && { opacity: 0.4 }
@@ -3088,7 +3100,6 @@ var styles37 = StyleSheet38.create({
     paddingHorizontal: spacing.s,
     paddingVertical: spacing.xs,
     borderWidth: 1,
-    borderRadius: border.radius.m,
     minHeight: 100,
     textAlignVertical: "top"
   }
@@ -3108,7 +3119,7 @@ function Textarea({
   onFocus,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const [focused, setFocused] = useState9(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
   return /* @__PURE__ */ jsxs25(View33, { style: [styles37.container, style], children: [
@@ -3139,6 +3150,7 @@ function Textarea({
           styles37.textarea,
           {
             borderColor,
+            borderRadius: radius.field,
             color: colors2.colorOnBg,
             backgroundColor: colors2.colorBg
           },
@@ -3166,7 +3178,6 @@ var styles38 = StyleSheet39.create({
     paddingHorizontal: spacing.s,
     paddingVertical: spacing.xs,
     borderWidth: 1,
-    borderRadius: border.radius.m,
     minHeight: 44
   },
   triggerText: {
@@ -3231,7 +3242,7 @@ function Select({
   onChange,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const [open, setOpen] = useState10(false);
   const selectedOption = options.find((o) => o.value === value);
   const displayText = selectedOption?.label ?? placeholder;
@@ -3256,6 +3267,7 @@ function Select({
           styles38.trigger,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors2.colorBg
           },
           disabled && { opacity: 0.4 }
@@ -3551,14 +3563,11 @@ var styles40 = StyleSheet41.create({
     justifyContent: "center",
     borderWidth: 1
   },
+  // The steppers round only the field's outer corners, with `radius.field` from the theme.
   stepperStart: {
-    borderTopStartRadius: border.radius.m,
-    borderBottomStartRadius: border.radius.m,
     borderEndWidth: 0
   },
   stepperEnd: {
-    borderTopEndRadius: border.radius.m,
-    borderBottomEndRadius: border.radius.m,
     borderStartWidth: 0
   },
   stepperText: {
@@ -3609,7 +3618,7 @@ function NumberInput({
   onChange,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const isControlled = value !== void 0;
   const [internalValue, setInternalValue] = useState12(defaultValue ?? 0);
   const currentValue = isControlled ? value : internalValue;
@@ -3641,6 +3650,8 @@ function NumberInput({
             styles40.stepperStart,
             {
               borderColor,
+              borderTopStartRadius: radius.field,
+              borderBottomStartRadius: radius.field,
               backgroundColor: colors2.colorBgSubtle
             },
             pressed && { opacity: 0.7 },
@@ -3706,6 +3717,8 @@ function NumberInput({
             styles40.stepperEnd,
             {
               borderColor,
+              borderTopEndRadius: radius.field,
+              borderBottomEndRadius: radius.field,
               backgroundColor: colors2.colorBgSubtle
             },
             pressed && { opacity: 0.7 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-react-native",
-  "version": "0.5.1",
+  "version": "0.7.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.mdx

@@ -38,6 +38,7 @@ export default function App() {
 
 <Canvas of={Stories.Default} />
 <Canvas of={Stories.Outline} />
+<Canvas of={Stories.Ghost} />
 
 ## Sizes
 
@@ -47,7 +48,15 @@ export default function App() {
 
 ## Shape
 
-A button with a text label has `border.radius.m` corners on every size, the same as the form fields. An icon-only button (`isIconOnly`) stays round (`border.radius.full`). A `borderRadius` in `style` overrides both.
+The corner radius comes from the theme, not from the button: a button with a text label uses `radius.button` on every size, an icon-only button (`isIconOnly`) uses `radius.iconButton`. By default these are `border.radius.m` (the same as the form fields) and `border.radius.full` (round). Set them per app through `ThemeProvider`, the native equivalent of the web `--button_radius`:
+
+```tsx
+<ThemeProvider tokens={{ radius: { button: border.radius.s, iconButton: border.radius.s } }}>
+  <App />
+</ThemeProvider>
+```
+
+A nested `ThemeProvider` keeps its parent's radii unless it sets its own. A `borderRadius` in `style` overrides the theme.
 
 ## Icons
 
@@ -56,10 +65,11 @@ A button with a text label has `border.radius.m` corners on every size, the same
 
 ### Icon-only (1:1 aspect ratio)
 
-Set `isIconOnly` to render a round 1:1 button with equal `spacing.xs` padding on both axes. Composable with any `variant`. Always pair with `accessibilityLabel` for assistive tech.
+Set `isIconOnly` to render a 1:1 button (round by default, see [Shape](#shape)) with equal `spacing.xs` padding on both axes. Composable with any `variant`. Always pair with `accessibilityLabel` for assistive tech.
 
 <Canvas of={Stories.IconOnly} />
 <Canvas of={Stories.IconOnlyOutline} />
+<Canvas of={Stories.IconOnlyGhost} />
 <Canvas of={Stories.AllIconOnly} />
 
 ## All variants × sizes
@@ -78,7 +88,7 @@ Set `isIconOnly` to render a round 1:1 button with equal `spacing.xs` padding on
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `variant` | `"default" \| "outline"` | `"default"` | Visual style (`"ghost"` is a deprecated alias for `"outline"`) |
+| `variant` | `"default" \| "outline" \| "ghost"` | `"default"` | Visual style: `ghost` is `outline` without the border |
 | `size` | `"small" \| "medium" \| "large"` | `"medium"` | Height and horizontal padding |
 | `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
 | `onPress` | `() => void` | — | Called when the button is pressed |

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

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../native/ThemeContext';
+import type { ThemeRadius } from '../../../native/ThemeContext';
 import { Button } from './Button';
 import { cornerRadii } from '../../../test/cornerRadii';
 
@@ -71,15 +72,41 @@ describe('Button (native)', () => {
     expect(style).toMatch(/(^|[;\s])height:\s*56px/);
   });
 
+  it('draws a ghost button without a border', () => {
+    renderWithTheme(<Button variant="ghost">Meer</Button>);
+    const style = screen.getByRole('button').getAttribute('style') ?? '';
+    expect(style).not.toMatch(/border-(top-|right-|bottom-|left-)?width:\s*[1-9]/);
+    expect(style).not.toMatch(/border-(top-|right-|bottom-|left-)?color:/);
+    expect(style).toMatch(/background-color:\s*rgba\(0, 0, 0, 0\)/);
+  });
+
+  it('draws an icon-only ghost button without a border', () => {
+    renderWithTheme(
+      <Button isIconOnly variant="ghost" accessibilityLabel="Meer">
+        <span>✓</span>
+      </Button>,
+    );
+    const style = screen.getByRole('button', { name: 'Meer' }).getAttribute('style') ?? '';
+    expect(style).not.toMatch(/border-(top-|right-|bottom-|left-)?width:\s*[1-9]/);
+    expect(style).not.toMatch(/border-(top-|right-|bottom-|left-)?color:/);
+    expect(style).toMatch(/background-color:\s*rgba\(0, 0, 0, 0\)/);
+  });
+
+  it('keeps the border on an outline button', () => {
+    renderWithTheme(<Button variant="outline">Meer</Button>);
+    const style = screen.getByRole('button').getAttribute('style') ?? '';
+    expect(style).toMatch(/border-(top-|right-|bottom-|left-)?width:\s*1px/);
+  });
+
   it.each(['small', 'medium', 'large'] as const)(
-    'gives a %s text button the medium border radius',
+    'gives a %s text button the medium border radius by default',
     (size) => {
       renderWithTheme(<Button size={size}>Save</Button>);
       expect(cornerRadii(screen.getByRole('button'))).toEqual(['16px', '16px', '16px', '16px']);
     },
   );
 
-  it('keeps an icon-only button round', () => {
+  it('keeps an icon-only button round by default', () => {
     renderWithTheme(
       <Button isIconOnly accessibilityLabel="Confirm">
         <span>✓</span>
@@ -92,4 +119,63 @@ describe('Button (native)', () => {
     renderWithTheme(<Button style={{ borderRadius: 4 }}>Save</Button>);
     expect(cornerRadii(screen.getByRole('button'))).toEqual(['4px', '4px', '4px', '4px']);
   });
+
+  describe('with a theme radius', () => {
+    const radius12: ThemeRadius = { button: 12, iconButton: 12, field: 12 };
+
+    it('gives a text button the theme button radius', () => {
+      render(
+        <ThemeProvider tokens={{ radius: radius12 }}>
+          <Button>Save</Button>
+        </ThemeProvider>,
+      );
+      expect(cornerRadii(screen.getByRole('button'))).toEqual(['12px', '12px', '12px', '12px']);
+    });
+
+    it('gives an icon-only button the theme icon-button radius', () => {
+      render(
+        <ThemeProvider tokens={{ radius: radius12 }}>
+          <Button isIconOnly accessibilityLabel="Confirm">
+            <span>✓</span>
+          </Button>
+        </ThemeProvider>,
+      );
+      expect(cornerRadii(screen.getByRole('button'))).toEqual(['12px', '12px', '12px', '12px']);
+    });
+
+    it('changes only the text button with a partial override', () => {
+      render(
+        <ThemeProvider tokens={{ radius: { button: 4 } }}>
+          <Button>Save</Button>
+          <Button isIconOnly accessibilityLabel="Confirm">
+            <span>✓</span>
+          </Button>
+        </ThemeProvider>,
+      );
+      expect(cornerRadii(screen.getByRole('button', { name: 'Save' }))).toEqual(['4px', '4px', '4px', '4px']);
+      expect(cornerRadii(screen.getByRole('button', { name: 'Confirm' }))).toEqual([
+        '9999px', '9999px', '9999px', '9999px',
+      ]);
+    });
+
+    it("keeps the app's radius inside a nested provider that only overrides colours", () => {
+      render(
+        <ThemeProvider tokens={{ radius: { button: 12 } }}>
+          <ThemeProvider tokens={{ light: { colorInteractive: '#00c853' } }}>
+            <Button>Save</Button>
+          </ThemeProvider>
+        </ThemeProvider>,
+      );
+      expect(cornerRadii(screen.getByRole('button'))).toEqual(['12px', '12px', '12px', '12px']);
+    });
+
+    it("lets the caller's style override the theme radius", () => {
+      render(
+        <ThemeProvider tokens={{ radius: radius12 }}>
+          <Button style={{ borderRadius: 4 }}>Save</Button>
+        </ThemeProvider>,
+      );
+      expect(cornerRadii(screen.getByRole('button'))).toEqual(['4px', '4px', '4px', '4px']);
+    });
+  });
 });

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

@@ -37,8 +37,8 @@ const meta: Meta<ButtonStoryArgs> = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['default', 'outline'],
-      description: 'Visual style. `default` is filled; `outline` is transparent with a border.',
+      options: ['default', 'outline', 'ghost'],
+      description: 'Visual style. `default` is filled; `outline` is transparent with a border; `ghost` is transparent without one.',
       table: { defaultValue: { summary: 'default' } },
     },
     size: {
@@ -79,6 +79,7 @@ export const Playground: Story = {
 
 export const Default: Story = { args: { children: 'Default' } };
 export const Outline: Story = { args: { children: 'Outline', variant: 'outline' } };
+export const Ghost: Story = { args: { children: 'Ghost', variant: 'ghost' } };
 export const Small: Story = { args: { children: 'Small', size: 'small' } };
 export const Medium: Story = { args: { children: 'Medium', size: 'medium' } };
 export const Large: Story = { args: { children: 'Large', size: 'large' } };
@@ -104,10 +105,19 @@ export const IconOnlyOutline: Story = {
   },
 };
 
+export const IconOnlyGhost: Story = {
+  args: {
+    variant: 'ghost',
+    isIconOnly: true,
+    accessibilityLabel: 'Confirm',
+    children: CheckIcon,
+  },
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      {(['default', 'outline'] as const).map(v => (
+      {(['default', 'outline', 'ghost'] as const).map(v => (
         <div key={v} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
           {(['small', 'medium', 'large'] as const).map(s => (
             <Button key={s} variant={v} size={s}>{v} {s}</Button>
@@ -121,7 +131,7 @@ export const AllVariants: Story = {
 export const AllIconOnly: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      {(['default', 'outline'] as const).map(v => (
+      {(['default', 'outline', 'ghost'] as const).map(v => (
         <div key={v} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
           {(['small', 'medium', 'large'] as const).map(s => (
             <Button

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

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 import { StyleSheet, Pressable, View, StyleProp, ViewStyle } from 'react-native';
 import { ScaledText as Text } from '../../../native/ScaledText';
-import { spacing, font, border } from '../../../native/tokens';
+import { spacing, font } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 
-type ButtonVariant = 'default' | 'outline' | 'ghost'; // 'ghost' is deprecated, use 'outline'
+type ButtonVariant = 'default' | 'outline' | 'ghost'; // 'ghost' is 'outline' without the border
 type ButtonSize = 'small' | 'medium' | 'large';
 
 export interface ButtonProps {
@@ -56,21 +56,21 @@ export function Button({
   accessibilityLabel,
   style,
 }: Readonly<ButtonProps>) {
-  const { colors } = useTheme();
+  const { colors, radius } = useTheme();
   const { height, px, fontSize } = sizeTokens[size];
 
-  // Color model: filled = interactive bg, outline = transparent bg + interactive_on-bg border/text
+  // Color model: filled = interactive bg, outline = transparent bg + interactive_on-bg border/text,
+  // ghost = outline without the border, for a quiet button such as one beside a heading
   const primaryColor = colors.colorInteractive;
   const onPrimaryColor = colors.colorOnInteractive;
   // Outline uses colorInteractiveOnBg for text/border — colorInteractive may not meet 3:1 on white
   const outlineTextColor = colors.colorInteractiveOnBg;
 
-  const isOutline = variant === 'outline' || variant === 'ghost';
   const containerStyle: ViewStyle = {
     minHeight: height,
     paddingHorizontal: isIconOnly ? spacing.xs : px,
-    // A text button has medium corners on every size; an icon-only button stays round.
-    borderRadius: isIconOnly ? border.radius.full : border.radius.m,
+    // Corners come from the theme (`tokens.radius`); a borderRadius in `style` still wins.
+    borderRadius: isIconOnly ? radius.iconButton : radius.button,
     opacity: disabled ? 0.4 : 1,
     // Icon-only: square with equal xs padding on both axes.
     ...(isIconOnly && { aspectRatio: 1, paddingVertical: spacing.xs }),
@@ -78,11 +78,12 @@ export function Button({
     // instead, so a wrapped label grows the button from minHeight rather than clipping.
     ...(isIconOnly ? { height } : { paddingVertical: spacing.xxs }),
     ...(variant === 'default' && { backgroundColor: primaryColor }),
-    ...(isOutline && {
+    ...(variant === 'outline' && {
       backgroundColor: 'transparent',
       borderWidth: 1,
       borderColor: outlineTextColor,
     }),
+    ...(variant === 'ghost' && { backgroundColor: 'transparent' }),
   };
 
   const textColor = variant === 'default' ? onPrimaryColor : outlineTextColor;

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

@@ -1,10 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
+import type { ThemeRadius } from '../../../../native/ThemeContext';
 import { Combobox } from './Combobox';
 import type { ComboboxOption } from './Combobox';
 import { OPTICAL_TEXT_SHIFT } from '../atoms/inputHelpers';
 import { cornerRadii } from '../../../../test/cornerRadii';
 
+const radius12: ThemeRadius = { button: 12, iconButton: 12, field: 12 };
+
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
@@ -102,11 +105,21 @@ describe('Combobox (native)', () => {
     expect(transform).toMatch(/(-1\.5|-1\.50)/);
   });
 
-  it('gives the bordered field box the medium border radius', () => {
+  it('gives the bordered field box the medium border radius by default', () => {
     renderWithTheme(
       <Combobox label="Fruit" name="fruit" options={fruits} />,
     );
     const wrapper = screen.getByRole('combobox').parentElement as HTMLElement;
     expect(cornerRadii(wrapper)).toEqual(['16px', '16px', '16px', '16px']);
   });
+
+  it('takes the border radius of the field box from the theme', () => {
+    render(
+      <ThemeProvider tokens={{ radius: radius12 }}>
+        <Combobox label="Fruit" name="fruit" options={fruits} />
+      </ThemeProvider>,
+    );
+    const wrapper = screen.getByRole('combobox').parentElement as HTMLElement;
+    expect(cornerRadii(wrapper)).toEqual(['12px', '12px', '12px', '12px']);
+  });
 });

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

@@ -36,7 +36,8 @@ const styles = StyleSheet.create({
     gap: spacing.xxs,
   },
   /**
-   * Draws the rounded border and provides the fixed 44pt touch-target height.
+   * Draws the rounded border (`radius.field` from the theme) 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.
    */
@@ -45,7 +46,6 @@ const styles = StyleSheet.create({
     height: INPUT_HEIGHT,
     justifyContent: 'center',
     borderWidth: 1,
-    borderRadius: border.radius.m,
   },
   /**
    * No vertical padding: iOS centers text automatically inside the wrapper height.
@@ -99,7 +99,7 @@ export function Combobox({
   hint,
   style,
 }: Readonly<ComboboxProps>) {
-  const { colors } = useTheme();
+  const { colors, radius } = useTheme();
 
   const selectedOption = useMemo(
     () => options.find((o) => o.value === value),
@@ -147,6 +147,7 @@ export function Combobox({
           styles.inputWrapper,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors.colorBg,
           },
           disabled && { opacity: 0.4 },

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

@@ -1,8 +1,11 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import { ThemeProvider } from '../../../../native/ThemeContext';
+import type { ThemeRadius } from '../../../../native/ThemeContext';
 import { FileInput } from './FileInput';
 import { cornerRadii } from '../../../../test/cornerRadii';
 
+const radius12: ThemeRadius = { button: 12, iconButton: 12, field: 12 };
+
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider>{ui}</ThemeProvider>);
 }
@@ -72,8 +75,17 @@ describe('FileInput (native)', () => {
     expect(screen.getByText('Resume *')).toBeInTheDocument();
   });
 
-  it('gives the drop zone the medium border radius', () => {
+  it('gives the drop zone the medium border radius by default', () => {
     renderWithTheme(<FileInput label="Upload" name="upload" />);
     expect(cornerRadii(screen.getByRole('button'))).toEqual(['16px', '16px', '16px', '16px']);
   });
+
+  it('takes the border radius of the drop zone from the theme', () => {
+    render(
+      <ThemeProvider tokens={{ radius: radius12 }}>
+        <FileInput label="Upload" name="upload" />
+      </ThemeProvider>,
+    );
+    expect(cornerRadii(screen.getByRole('button'))).toEqual(['12px', '12px', '12px', '12px']);
+  });
 });

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

@@ -1,6 +1,6 @@
 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 { spacing, font, lineHeight } from '../../../../native/tokens';
 import { useTheme } from '../../../../native/ThemeContext';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
@@ -33,7 +33,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.m,
     borderWidth: 2,
     borderStyle: 'dashed',
-    borderRadius: border.radius.m,
     minHeight: 120,
   },
   icon: {
@@ -75,7 +74,7 @@ export function FileInput({
   fileNames = [],
   style,
 }: Readonly<FileInputProps>) {
-  const { colors } = useTheme();
+  const { colors, radius } = useTheme();
 
   const borderColor = error
     ? colors.colorError
@@ -96,6 +95,7 @@ export function FileInput({
           styles.dropZone,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: 'transparent',
           },
           pressed && { opacity: 0.7 },