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

package/CHANGELOG.md

@@ -1,6 +1,38 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.6.0] - 2026-09-29
+### Added
+- Feat(theme): radius overrides for buttons and fields
+
+ThemeProvider takes `tokens.radius` ({ button, iconButton, field }, in
+points), the native equivalent of the web `--button_radius`. The
+defaults are 0.5.1's values (m, full, m), so nothing changes for an app
+that does not set it. `useTheme()` returns the resolved `radius` next
+to `colors` and `isDark`, and `ThemeRadius` is exported.
+
+A nested ThemeProvider merges its radius over its parent's, so a
+provider that only recolors a subtree keeps the app's corners. Colors
+still merge over the foundation, not over the parent.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`d8200d3`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/d8200d39ed24b30658a6c45692883dd1128898c1))
+
+### Changed
+- Refactor(button): corner radius comes from the theme
+
+A text button uses `radius.button` and an icon-only button
+`radius.iconButton` instead of the hardcoded border.radius.m and
+border.radius.full. A borderRadius in `style` still wins.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`d672541`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/d6725412c7a6406203b6887e34512a09994c5265))
+- Refactor(form): fields take their corner radius from the theme
+
+FormInput, Select, Combobox, Textarea and the FileInput drop zone use
+`radius.field` instead of the hardcoded border.radius.m. NumberInput
+uses it for the outer corners on its steppers.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`17b93bf`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/17b93bfa554c060b1ae83ca488b738d9a307b4b9))
+
 ## [0.5.1] - 2026-09-28
 ### Fixed
 - Fix(button): text buttons get medium corners

package/README.md

@@ -34,7 +34,7 @@ export default function App() {
 }
 ```
 
-`ThemeProvider` auto-detects the system color scheme (light/dark) via `useColorScheme`, or you can pass `colorScheme="light" | "dark"` to force one. Inside the tree, `useTheme()` exposes `{ colors, isDark }` where `colors` is the full foundation token palette (`colorBg`, `colorOnBg`, `colorInteractive`, …).
+`ThemeProvider` auto-detects the system color scheme (light/dark) via `useColorScheme`, or you can pass `colorScheme="light" | "dark"` to force one. Inside the tree, `useTheme()` exposes `{ colors, isDark, radius }` where `colors` is the full foundation token palette (`colorBg`, `colorOnBg`, `colorInteractive`, …) and `radius` holds the corner radii of the controls (see [Control radius](#control-radius)).
 
 ## Brand theming (token overrides)
 
@@ -62,6 +62,40 @@ Unspecified tokens keep their foundation values. Available token names are the k
 Pass a stable `tokens` reference (a module-level constant, not an inline object
 literal) — the provider memoizes the merged colors on that reference.
 
+### Control radius
+
+The corner radius of buttons and fields comes from the theme, not from the
+components — the React Native equivalent of the web `--button_radius` custom
+property. Override it with `tokens.radius`, in points; it is the same in light
+and dark:
+
+```tsx
+import { ThemeProvider, border } from '@boostdev/design-system-react-native';
+import type { ThemeTokenOverrides } from '@boostdev/design-system-react-native';
+
+const tokens: ThemeTokenOverrides = {
+  light: { colorInteractive: '#00c853' },
+  radius: { button: border.radius.s, iconButton: border.radius.s, field: border.radius.s },
+};
+
+<ThemeProvider tokens={tokens}>
+  <App />
+</ThemeProvider>;
+```
+
+| Key          | Applies to                                                                | Default                     |
+| ------------ | ------------------------------------------------------------------------- | --------------------------- |
+| `button`     | `Button` with a text label                                                | `border.radius.m` (16)      |
+| `iconButton` | `Button` with `isIconOnly`                                                | `border.radius.full` (9999) |
+| `field`      | `FormInput`, `Select`, `Combobox`, `Textarea`, `FileInput`, `NumberInput` | `border.radius.m` (16)      |
+
+Unspecified keys keep their default. A nested `ThemeProvider` inherits its
+parent's radii and merges its own `radius` over them, so a provider that only
+recolors a subtree keeps the app's corners. (Colors differ: a nested provider
+merges its colors over the foundation, not over its parent.) A `borderRadius`
+in a `Button`'s `style` still wins over the theme. Your own controls can read
+the same values through `useTheme().radius` (type `ThemeRadius`).
+
 ## React Navigation compatibility
 
 The library also ships a thin, **opt-in** bridge that produces a [React Navigation](https://reactnavigation.org/) `Theme` from the same foundation tokens. The bridge is purely additive — nothing about the standalone API changes when you use it, and `@react-navigation/native` is only required if you actually consume the bridge.

package/dist/index.cjs

@@ -114,15 +114,25 @@ var lineHeight = {
 
 // src/native/ThemeContext.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var defaultRadius = {
+  button: import_native.border.radius.m,
+  iconButton: import_native.border.radius.full,
+  field: import_native.border.radius.m
+};
 var ThemeContext = (0, import_react.createContext)(null);
 function ThemeProvider({ children, colorScheme, tokens }) {
   const systemScheme = (0, import_react_native.useColorScheme)();
   const isDark = (colorScheme ?? systemScheme) === "dark";
+  const parentRadius = (0, import_react.useContext)(ThemeContext)?.radius ?? defaultRadius;
   const value = (0, import_react.useMemo)(() => {
     const base = isDark ? import_native.colors.dark : import_native.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__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
@@ -2269,7 +2279,7 @@ 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;
@@ -2278,8 +2288,8 @@ function Button({
   const containerStyle = {
     minHeight: height,
     paddingHorizontal: isIconOnly ? import_native.spacing.xs : px,
-    // A text button has medium corners on every size; an icon-only button stays round.
-    borderRadius: isIconOnly ? import_native.border.radius.full : import_native.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: import_native.spacing.xs },
@@ -2683,7 +2693,6 @@ var styles33 = import_react_native37.StyleSheet.create({
     paddingHorizontal: import_native.spacing.m,
     borderWidth: 2,
     borderStyle: "dashed",
-    borderRadius: import_native.border.radius.m,
     minHeight: 120
   },
   icon: {
@@ -2724,7 +2733,7 @@ function FileInput({
   fileNames = [],
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const borderColor = error ? colors2.colorError : colors2.colorBgSubtle;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native37.View, { style: [styles33.container, style], testID: name, children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -2745,6 +2754,7 @@ function FileInput({
           styles33.dropZone,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: "transparent"
           },
           pressed && { opacity: 0.7 },
@@ -2779,7 +2789,8 @@ var styles34 = import_react_native38.StyleSheet.create({
     gap: import_native.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.
    */
@@ -2787,8 +2798,7 @@ var styles34 = import_react_native38.StyleSheet.create({
     position: "relative",
     height: INPUT_HEIGHT,
     justifyContent: "center",
-    borderWidth: 1,
-    borderRadius: import_native.border.radius.m
+    borderWidth: 1
   },
   /**
    * No vertical padding: iOS centers text automatically inside the wrapper height.
@@ -2841,7 +2851,7 @@ function Combobox({
   hint,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const selectedOption = (0, import_react10.useMemo)(
     () => options.find((o) => o.value === value),
     [options, value]
@@ -2879,6 +2889,7 @@ function Combobox({
           styles34.inputWrapper,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors2.colorBg
           },
           disabled && { opacity: 0.4 }
@@ -3079,14 +3090,14 @@ var styles36 = import_react_native40.StyleSheet.create({
     gap: import_native.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: import_native.border.radius.m
+    borderWidth: 1
   },
   /**
    * No vertical padding: iOS centers text automatically inside the wrapper height.
@@ -3119,7 +3130,7 @@ function FormInput({
   onFocus,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const [focused, setFocused] = (0, import_react12.useState)(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native40.View, { style: [styles36.container, style], children: [
@@ -3131,6 +3142,7 @@ function FormInput({
           styles36.inputWrapper,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors2.colorBg
           },
           disabled && { opacity: 0.4 }
@@ -3187,7 +3199,6 @@ var styles37 = import_react_native41.StyleSheet.create({
     paddingHorizontal: import_native.spacing.s,
     paddingVertical: import_native.spacing.xs,
     borderWidth: 1,
-    borderRadius: import_native.border.radius.m,
     minHeight: 100,
     textAlignVertical: "top"
   }
@@ -3207,7 +3218,7 @@ function Textarea({
   onFocus,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const [focused, setFocused] = (0, import_react13.useState)(false);
   const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: [styles37.container, style], children: [
@@ -3238,6 +3249,7 @@ function Textarea({
           styles37.textarea,
           {
             borderColor,
+            borderRadius: radius.field,
             color: colors2.colorOnBg,
             backgroundColor: colors2.colorBg
           },
@@ -3265,7 +3277,6 @@ var styles38 = import_react_native42.StyleSheet.create({
     paddingHorizontal: import_native.spacing.s,
     paddingVertical: import_native.spacing.xs,
     borderWidth: 1,
-    borderRadius: import_native.border.radius.m,
     minHeight: 44
   },
   triggerText: {
@@ -3330,7 +3341,7 @@ function Select({
   onChange,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const [open, setOpen] = (0, import_react14.useState)(false);
   const selectedOption = options.find((o) => o.value === value);
   const displayText = selectedOption?.label ?? placeholder;
@@ -3355,6 +3366,7 @@ function Select({
           styles38.trigger,
           {
             borderColor,
+            borderRadius: radius.field,
             backgroundColor: colors2.colorBg
           },
           disabled && { opacity: 0.4 }
@@ -3650,14 +3662,11 @@ var styles40 = import_react_native44.StyleSheet.create({
     justifyContent: "center",
     borderWidth: 1
   },
+  // The steppers round only the field's outer corners, with `radius.field` from the theme.
   stepperStart: {
-    borderTopStartRadius: import_native.border.radius.m,
-    borderBottomStartRadius: import_native.border.radius.m,
     borderEndWidth: 0
   },
   stepperEnd: {
-    borderTopEndRadius: import_native.border.radius.m,
-    borderBottomEndRadius: import_native.border.radius.m,
     borderStartWidth: 0
   },
   stepperText: {
@@ -3708,7 +3717,7 @@ function NumberInput({
   onChange,
   style
 }) {
-  const { colors: colors2 } = useTheme();
+  const { colors: colors2, radius } = useTheme();
   const isControlled = value !== void 0;
   const [internalValue, setInternalValue] = (0, import_react16.useState)(defaultValue ?? 0);
   const currentValue = isControlled ? value : internalValue;
@@ -3740,6 +3749,8 @@ function NumberInput({
             styles40.stepperStart,
             {
               borderColor,
+              borderTopStartRadius: radius.field,
+              borderBottomStartRadius: radius.field,
               backgroundColor: colors2.colorBgSubtle
             },
             pressed && { opacity: 0.7 },
@@ -3805,6 +3816,8 @@ function NumberInput({
             styles40.stepperEnd,
             {
               borderColor,
+              borderTopEndRadius: radius.field,
+              borderBottomEndRadius: radius.field,
               backgroundColor: colors2.colorBgSubtle
             },
             pressed && { opacity: 0.7 },

package/dist/index.d.cts

@@ -18,6 +18,15 @@ declare const lineHeight: {
 type ThemeColorName = keyof typeof colors.light;
 /** Semantic theme colors, widened to `string` so brand overrides typecheck. */
 type ThemeColors = Readonly<Record<ThemeColorName, string>>;
+/** Corner radii of the controls, in points. */
+interface ThemeRadius {
+    /** Buttons with a text label. */
+    button: number;
+    /** Icon-only buttons (`isIconOnly`). */
+    iconButton: number;
+    /** Input fields: FormInput, Select, Combobox, Textarea, FileInput, NumberInput. */
+    field: number;
+}
 /**
  * Per-scheme token overrides, merged over the foundation colors.
  * The React Native equivalent of overriding tokens in the web
@@ -26,10 +35,17 @@ type ThemeColors = Readonly<Record<ThemeColorName, string>>;
 interface ThemeTokenOverrides {
     light?: Partial<Record<ThemeColorName, string>>;
     dark?: Partial<Record<ThemeColorName, string>>;
+    /**
+     * Radius overrides, the same in light and dark. The native equivalent of the
+     * web `--button_radius` custom property. Merged over the parent provider's
+     * radii, so a nested provider that only overrides colors keeps the app's radii.
+     */
+    radius?: Partial<ThemeRadius>;
 }
 interface ThemeContextValue {
     colors: ThemeColors;
     isDark: boolean;
+    radius: ThemeRadius;
 }
 interface ThemeProviderProps {
     children: ReactNode;
@@ -667,4 +683,4 @@ interface MessageProps {
 }
 declare function Message({ message, type, style }: MessageProps): react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type CreateReactNavigationThemeOptions, type DescriptionItem, DescriptionList, Dialog, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, type ReactNavigationFontStyle, type ReactNavigationTheme, type ReactNavigationThemeColors, type ReactNavigationThemeFonts, ScaledText, ScaledTextInput, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, SideSheet, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, type ThemeColorName, type ThemeColors, ThemeProvider, type ThemeTokenOverrides, ToastProvider, Tooltip, Typography, createReactNavigationTheme, lineHeight, maxFontScaleFor, maxFontScaleForStyle, useReactNavigationTheme, useTheme, useToast };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type CreateReactNavigationThemeOptions, type DescriptionItem, DescriptionList, Dialog, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, type ReactNavigationFontStyle, type ReactNavigationTheme, type ReactNavigationThemeColors, type ReactNavigationThemeFonts, ScaledText, ScaledTextInput, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, SideSheet, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, type ThemeColorName, type ThemeColors, ThemeProvider, type ThemeRadius, type ThemeTokenOverrides, ToastProvider, Tooltip, Typography, createReactNavigationTheme, lineHeight, maxFontScaleFor, maxFontScaleForStyle, useReactNavigationTheme, useTheme, useToast };

package/dist/index.d.ts

@@ -18,6 +18,15 @@ declare const lineHeight: {
 type ThemeColorName = keyof typeof colors.light;
 /** Semantic theme colors, widened to `string` so brand overrides typecheck. */
 type ThemeColors = Readonly<Record<ThemeColorName, string>>;
+/** Corner radii of the controls, in points. */
+interface ThemeRadius {
+    /** Buttons with a text label. */
+    button: number;
+    /** Icon-only buttons (`isIconOnly`). */
+    iconButton: number;
+    /** Input fields: FormInput, Select, Combobox, Textarea, FileInput, NumberInput. */
+    field: number;
+}
 /**
  * Per-scheme token overrides, merged over the foundation colors.
  * The React Native equivalent of overriding tokens in the web
@@ -26,10 +35,17 @@ type ThemeColors = Readonly<Record<ThemeColorName, string>>;
 interface ThemeTokenOverrides {
     light?: Partial<Record<ThemeColorName, string>>;
     dark?: Partial<Record<ThemeColorName, string>>;
+    /**
+     * Radius overrides, the same in light and dark. The native equivalent of the
+     * web `--button_radius` custom property. Merged over the parent provider's
+     * radii, so a nested provider that only overrides colors keeps the app's radii.
+     */
+    radius?: Partial<ThemeRadius>;
 }
 interface ThemeContextValue {
     colors: ThemeColors;
     isDark: boolean;
+    radius: ThemeRadius;
 }
 interface ThemeProviderProps {
     children: ReactNode;
@@ -667,4 +683,4 @@ interface MessageProps {
 }
 declare function Message({ message, type, style }: MessageProps): react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type CreateReactNavigationThemeOptions, type DescriptionItem, DescriptionList, Dialog, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, type ReactNavigationFontStyle, type ReactNavigationTheme, type ReactNavigationThemeColors, type ReactNavigationThemeFonts, ScaledText, ScaledTextInput, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, SideSheet, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, type ThemeColorName, type ThemeColors, ThemeProvider, type ThemeTokenOverrides, ToastProvider, Tooltip, Typography, createReactNavigationTheme, lineHeight, maxFontScaleFor, maxFontScaleForStyle, useReactNavigationTheme, useTheme, useToast };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type CreateReactNavigationThemeOptions, type DescriptionItem, DescriptionList, Dialog, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, type ReactNavigationFontStyle, type ReactNavigationTheme, type ReactNavigationThemeColors, type ReactNavigationThemeFonts, ScaledText, ScaledTextInput, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, SideSheet, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, type ThemeColorName, type ThemeColors, ThemeProvider, type ThemeRadius, type ThemeTokenOverrides, ToastProvider, Tooltip, Typography, createReactNavigationTheme, lineHeight, maxFontScaleFor, maxFontScaleForStyle, useReactNavigationTheme, useTheme, useToast };

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,7 +2180,7 @@ 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;
@@ -2179,8 +2189,8 @@ function Button({
   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 },
@@ -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.6.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

@@ -47,7 +47,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,7 +64,7 @@ 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} />