@12-apps/ui 6.30.0 → 6.31.0

package/src/components/form/Input/Input.look.native.ts

@@ -119,13 +119,16 @@ function backgroundFor(theme: UiTheme, variant: InputVariant, state: FieldState)
   }
 }
 
-/** `filled` rounds its top two corners, `underline` none, the rest all four. */
+/**
+ * The theme's one field radius: `filled` rounds its top two corners with it,
+ * `underline` none, the rest all four.
+ */
 function radiusFor(theme: UiTheme, variant: InputVariant): ViewStyle {
   if (variant === 'underline') return {};
   if (variant === 'filled') {
-    return { borderTopLeftRadius: theme.radius.md, borderTopRightRadius: theme.radius.md };
+    return { borderTopLeftRadius: theme.radius.field, borderTopRightRadius: theme.radius.field };
   }
-  return { borderRadius: theme.radius.md };
+  return { borderRadius: theme.radius.field };
 }
 
 /** The border as React Native writes it: a width per side, one colour, one style. */

package/src/components/form/Input/Input.metrics.ts

@@ -170,10 +170,12 @@ export const INPUT_GLOW = {
   focused: { blur: 20, alpha: 0.5 },
 } as const;
 
-/** `pulse`: a 56px bar behind the field, fading outward every two seconds. */
+/**
+ * `pulse`: a 56px bar behind the field, fading outward every two seconds. Its
+ * corner is the field's own — `fieldRadius` on the web, `radius.field` native.
+ */
 export const INPUT_PULSE = {
   height: 56,
-  radiusUnits: 0.5,
   opacity: 0.3,
   ms: 2000,
   spread: 10,

package/src/components/form/Input/Input.native.tsx

@@ -17,7 +17,7 @@ import {
 import { resolveInputProps } from './Input.helpers';
 import { FieldPulse } from '../field-pulse.native';
 import { fieldLook, helperStyle, labelStyle, type FieldState } from './Input.look.native';
-import { ADORNMENT_GAP, INPUT_GLOW, INPUT_LOADING, INPUT_PULSE } from './Input.metrics';
+import { ADORNMENT_GAP, INPUT_GLOW, INPUT_LOADING } from './Input.metrics';
 import type { InputProps } from './Input.types.native';
 import { webAria, webClick, webDisabled } from '../../../platform/aria';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
@@ -180,7 +180,7 @@ export const Input = React.forwardRef<RNTextInput, InputProps>((rawProps, ref) =
       {pulse ? (
         <FieldPulse
           color={theme.palette.primary.main}
-          radius={theme.spacing(INPUT_PULSE.radiusUnits)}
+          radius={theme.radius.field}
           testID={idFor('pulse')}
         />
       ) : null}

package/src/components/form/Input/Input.styles.ts

@@ -13,6 +13,7 @@ import {
 import type { InputProps } from './Input.types';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 type InputVariant = NonNullable<InputProps['variant']>;
 
@@ -56,7 +57,7 @@ export const pulseStyles = (theme: Theme): CSSObject => ({
     right: '0',
     height: `${INPUT_PULSE.height}px`,
     transform: 'translateY(-50%)',
-    borderRadius: theme.spacing(INPUT_PULSE.radiusUnits),
+    borderRadius: fieldRadius(theme),
     backgroundColor: theme.palette.primary.main,
     opacity: INPUT_PULSE.opacity,
     animation: `${pulseAnimation} ${INPUT_PULSE.ms / 1000}s infinite`,
@@ -76,6 +77,18 @@ export const floatingLabelStyles = (theme: Theme): CSSObject => ({
   },
 });
 
+/**
+ * The field's corner: the theme's one field radius (see `tokens/field-radius`).
+ * `filled` rounds its top two only — its bottom edge is the underline — and
+ * `underline` none, which is how MUI draws those two variants.
+ */
+export const inputRadiusStyles = (theme: Theme, variant?: InputVariant): CSSObject => {
+  if (variant === 'underline') return {};
+  const radius = fieldRadius(theme);
+  if (variant === 'filled') return { borderTopLeftRadius: radius, borderTopRightRadius: radius };
+  return { borderRadius: radius };
+};
+
 export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject => {
   switch (variant) {
     case 'glass':

package/src/components/form/Input/Input.tsx

@@ -11,6 +11,7 @@ import {
   floatingLabelStyles,
   glowStyles,
   inputBaseStyles,
+  inputRadiusStyles,
   muiVariantFor,
   outlinedStyles,
   pulseStyles,
@@ -45,6 +46,7 @@ const StyledTextField = styled(TextFieldSlim, {
 
   '& .MuiInputBase-root': {
     transition: 'all 0.3s ease',
+    ...inputRadiusStyles(theme, customVariant),
     ...inputBaseStyles(theme, customVariant),
   },
 

package/src/components/form/InputOTP/InputOTP.styles.ts

@@ -2,6 +2,7 @@ import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 interface ColorPalette {
   main: string;
@@ -80,7 +81,7 @@ export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
       fontSize,
       fontWeight: 600,
       textAlign: 'center',
-      borderRadius: theme.spacing(1),
+      borderRadius: fieldRadius(theme),
       ...(glass && {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: 'blur(20px)',

package/src/components/form/PhoneInput/PhoneInput.tsx

@@ -18,12 +18,17 @@ import type { CountryData,PhoneInputProps } from './PhoneInput.types';
 import type { PhoneInputCopy } from '../../../copy';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius, fieldRootStyles } from '../../../tokens/field-radius';
 
 // Country data with expanded support
 
 // Styled components
+/** The plain variant: MUI's own field, on the theme's field radius. */
+const FieldTextField = styled(TextField)(({ theme }) => fieldRootStyles(theme));
+
 const GlassTextField = styled(TextField)(({ theme }) => ({
   '& .MuiOutlinedInput-root': {
+    borderRadius: fieldRadius(theme),
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
     backdropFilter: 'blur(10px)',
     WebkitBackdropFilter: 'blur(10px)',
@@ -332,7 +337,7 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
     countryName: selectedCountry?.name,
     copy });
 
-  const TextFieldComponent = variant === 'glass' ? GlassTextField : TextField;
+  const TextFieldComponent = variant === 'glass' ? GlassTextField : FieldTextField;
 
   return (
     <Box data-testid="phone-input-container">

package/src/components/form/RadioGroup/RadioGroup.styles.ts

@@ -4,6 +4,11 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { glowAnimation, rippleAnimation, scaleAnimation, slideAnimation } from './RadioGroup.animations';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
+
+/** The segment track's padding and border: its corner is the segments' plus these. */
+const SEGMENT_TRACK_PADDING = 4;
+const SEGMENT_TRACK_BORDER = 1;
 
 interface ColorPalette {
   main: string;
@@ -182,7 +187,7 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
   const { selected, animated, customSize = 'md' } = flags;
 
   return {
-    borderRadius: theme.spacing(1),
+    borderRadius: fieldRadius(theme),
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     fontWeight: 500,
     border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
@@ -249,13 +254,14 @@ export const segmentContainerSx = (
   const palette = getColorFromTheme(theme, customColor);
 
   return {
-    padding: '4px',
-    borderRadius: theme.spacing(1.5),
+    padding: `${SEGMENT_TRACK_PADDING}px`,
+    // Concentric with the segments inside it, which take the field radius.
+    borderRadius: fieldRadius(theme) + SEGMENT_TRACK_PADDING + SEGMENT_TRACK_BORDER,
     backgroundColor: glass
       ? alpha(theme.palette.background.paper, 0.1)
       : alpha(palette.main, 0.05),
     backdropFilter: glass ? 'blur(20px)' : 'none',
-    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    border: `${SEGMENT_TRACK_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}`,
     display: 'flex',
     gap: '2px',
   };
@@ -283,7 +289,7 @@ export const segmentButtonSx = (theme: Theme, flags: SurfaceFlags): CSSObject =>
 
   return {
     flex: 1,
-    borderRadius: theme.spacing(1),
+    borderRadius: fieldRadius(theme),
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     fontWeight: 500,
     backgroundColor: selected ? theme.palette.background.paper : 'transparent',

package/src/components/form/RichTextEditor/RichTextEditor.tsx

@@ -9,6 +9,7 @@ import type { RichTextEditorProps, ToolbarConfig } from './RichTextEditor.types'
 import { RichTextEditorToolbar } from './RichTextEditorToolbar';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 const DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {
   bold: true,
@@ -71,7 +72,7 @@ const editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string,
 
 const shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({
   border: `1px solid ${fieldEdge(theme)}`,
-  borderRadius: 1,
+  borderRadius: fieldRadiusPx(theme),
   overflow: 'hidden',
   transition: 'border-color 0.2s ease-in-out',
   ...(isFocused && {

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

@@ -22,7 +22,6 @@ import {
   SELECT_GLOW,
   SELECT_ICON,
   SELECT_MENU,
-  SELECT_PULSE,
   inputVariantFor,
   selectInputSize,
 } from './Select.metrics';
@@ -209,7 +208,7 @@ export const Select = React.forwardRef<View, SelectProps>((rawProps, ref) => {
       {pulse ? (
         <FieldPulse
           color={theme.palette.primary.main}
-          radius={theme.spacing(SELECT_PULSE.radiusUnits)}
+          radius={theme.radius.field}
           testID={`${ids.trigger}-pulse`}
         />
       ) : null}

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

@@ -18,6 +18,7 @@ import type { SelectProps } from './Select.types';
 
 import { splitTestId } from '../../../platform/test-id';
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 // Define pulse animation
 const pulseAnimation = keyframes`
@@ -55,7 +56,7 @@ const pulseStyles = (theme: Theme): CSSObject => ({
     right: '0',
     height: `${SELECT_PULSE.height}px`,
     transform: 'translateY(-50%)',
-    borderRadius: theme.spacing(SELECT_PULSE.radiusUnits),
+    borderRadius: fieldRadius(theme),
     backgroundColor: theme.palette.primary.main,
     opacity: SELECT_PULSE.opacity,
     animation: `${pulseAnimation} ${SELECT_PULSE.ms / 1000}s infinite`,
@@ -144,6 +145,7 @@ const StyledFormControl = styled(FormControl, {
   ...(pulse ? pulseStyles(theme) : {}),
   '& .MuiOutlinedInput-root': {
     transition: 'all 0.3s ease',
+    borderRadius: fieldRadius(theme),
     ...variantStyles(theme, customVariant),
   },
 }));

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

@@ -31,6 +31,7 @@ const TextareaRichEditor = lazy(async () => ({
 import type { TextareaProps } from './Textarea.types';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 // Interface for styled component props
 interface StyledTextareaProps {
@@ -72,7 +73,7 @@ const StyledTextarea = styled(TextareaAutosize, {
   const baseStyles = {
     width: '100%',
     fontFamily: theme.typography.fontFamily,
-    borderRadius: theme.spacing(1),
+    borderRadius: fieldRadius(theme),
     border: `2px solid ${error ? errorColor.main : fieldEdge(theme)}`,
     backgroundColor: theme.palette.background.paper,
     color: theme.palette.text.primary,

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

@@ -20,13 +20,14 @@ import { floatAnimation, getColorFromTheme } from './Textarea.styles';
 import type { RichEditorToolbarCopy } from '../../../copy';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(0.5),
   padding: theme.spacing(1),
-  borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
+  borderRadius: `${fieldRadius(theme)}px ${fieldRadius(theme)}px 0 0`,
   borderBottom: `1px solid ${theme.palette.divider}`,
   background: glass ? alpha(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
   ...(glass && {
@@ -105,7 +106,7 @@ const ContentEditableDiv = styled('div')<{
   return {
     minHeight: '120px',
     padding: theme.spacing(1.5),
-    borderRadius: `0 0 ${theme.spacing(1)} ${theme.spacing(1)}`,
+    borderRadius: `0 0 ${fieldRadius(theme)}px ${fieldRadius(theme)}px`,
     border: `2px solid ${error ? errorColor.main : focused ? colorPalette.main : fieldEdge(theme)}`,
     borderTop: 'none',
     backgroundColor: glass

package/src/components/form/Toggle/Toggle.styles.ts

@@ -2,6 +2,7 @@ import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 const glowAnimation = keyframes`
   0% { box-shadow: 0 0 5px currentColor; }
@@ -74,7 +75,7 @@ export const baseStyles = (
 ): CSSObject => ({
   textTransform: 'none',
   fontWeight: 500,
-  borderRadius: theme.spacing(1),
+  borderRadius: fieldRadius(theme),
   transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
   border: `2px solid ${fieldEdge(theme)}`,
   color: theme.palette.text.primary,

package/src/components/form/ToggleGroup/ToggleGroup.tsx

@@ -6,6 +6,11 @@ import type { Theme } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import type { ToggleGroupProps } from './ToggleGroup.types';
+import { cssLengthToPx } from '../../../tokens/css-units';
+import { fieldRadius } from '../../../tokens/field-radius';
+
+const GLASS_PADDING = 4;
+const GLASS_BORDER = 1;
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
@@ -43,19 +48,26 @@ const StyledToggleGroup = styled(ToggleButtonGroup, {
   customColor?: string;
   customSize?: string;
   glass?: boolean;
-}>(({ theme, glass }) => ({
-  backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',
-  backdropFilter: glass ? 'blur(20px)' : 'none',
-  borderRadius: theme.spacing(1),
-  padding: glass ? 4 : 0,
-  border: glass ? `1px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',
+}>(({ theme, glass }) => {
+  // Each button is the field, so it takes the field radius. The glass frame
+  // around them is inset by its padding, the buttons' margin and its border,
+  // and rounds by that much more so the two corners stay concentric.
+  const radius = fieldRadius(theme);
+  const inset = GLASS_PADDING + cssLengthToPx(theme.spacing(0.5), 4) + GLASS_BORDER;
+  return {
+    backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',
+    backdropFilter: glass ? 'blur(20px)' : 'none',
+    borderRadius: glass ? radius + inset : radius,
+    padding: glass ? GLASS_PADDING : 0,
+    border: glass ? `${GLASS_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',
 
-  '& .MuiToggleButtonGroup-grouped': {
-    margin: theme.spacing(0.5),
-    border: 0,
-    borderRadius: `${theme.shape.borderRadius}px !important`,
-  },
-}));
+    '& .MuiToggleButtonGroup-grouped': {
+      margin: theme.spacing(0.5),
+      border: 0,
+      borderRadius: `${radius}px !important`,
+    },
+  };
+});
 
 export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
   (

package/src/components/layout/ContentToolbar/ColumnsMenu.tsx

@@ -10,6 +10,7 @@ import MenuItem from '@mui/material/MenuItem/index.js';
 import React, { useState } from 'react';
 
 import type { ColumnVisibilityOption, ColumnsMenuProps } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 /** One column checkbox row; toggling never closes the menu. */
 function ColumnRow({
@@ -72,7 +73,7 @@ export function ColumnsMenu({
         sx={{
           width: 32,
           height: 32,
-          borderRadius: 1,
+          borderRadius: fieldRadiusPx,
           color: 'text.secondary',
           bgcolor: open ? 'action.selected' : 'transparent',
         }}

package/src/components/layout/ContentToolbar/ContentToolbar.tsx

@@ -8,11 +8,12 @@ import Typography from '@mui/material/Typography/index.js';
 import React from 'react';
 
 import type { ContentToolbarProps } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 const selectionButtonSx = {
   minWidth: 0,
   height: 'auto',
-  borderRadius: 0.5,
+  borderRadius: fieldRadiusPx,
   fontWeight: 600,
   py: 0.5,
   px: 1.5,

package/src/components/layout/ContentToolbar/FilterTrigger.tsx

@@ -6,6 +6,7 @@ import Button from '@mui/material/Button/index.js';
 import React from 'react';
 
 import type { FilterTriggerProps } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 /**
  * Labeled filter toggle: a "Filtros" button (styled like the sibling toolbar
@@ -37,6 +38,7 @@ export function FilterTrigger({
         height: 32,
         px: 1,
         gap: 0.25,
+        borderRadius: fieldRadiusPx,
         textTransform: 'none',
         fontWeight: 600,
         color: active ? 'primary.main' : 'text.primary',

package/src/components/layout/ContentToolbar/MultiSelectTriggers.tsx

@@ -8,6 +8,7 @@ import Typography from '@mui/material/Typography/index.js';
 import React, { useId } from 'react';
 
 import type { MultiSelectOption } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 /**
  * Trigger label from the current selection: `allLabel` when none/all are
@@ -51,7 +52,7 @@ export function InlineTrigger({ label, triggerLabel, open, onOpen, testId }: Tri
         aria-haspopup="menu"
         aria-expanded={open}
         onClick={onOpen}
-        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
+        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
       >
         {triggerLabel}
         <ChevronDownIcon sx={{ fontSize: 14 }} />
@@ -82,6 +83,7 @@ export function StackedTrigger({ label, triggerLabel, open, onOpen, testId }: Tr
         sx={{
           justifyContent: 'space-between',
           height: 40,
+          borderRadius: fieldRadiusPx,
           px: 1.5,
           color: 'text.primary',
           textTransform: 'none',
@@ -173,7 +175,7 @@ export function PillTrigger({
       }
       endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}
       sx={{
-        borderRadius: 999,
+        borderRadius: fieldRadiusPx,
         height: 34,
         px: 1.5,
         color: 'text.primary',

package/src/components/layout/ContentToolbar/SortByDropdown.tsx

@@ -16,6 +16,7 @@ import type {
   SortFieldDefinition,
   SortOrderOption,
 } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 function findActiveField<TField extends string>(
   fields: SortFieldDefinition<TField>[] | undefined,
@@ -218,7 +219,7 @@ export function SortByDropdown<TField extends string = string>({
         aria-haspopup="menu"
         aria-expanded={open}
         onClick={(event) => setAnchorEl(event.currentTarget)}
-        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
+        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
       >
         {/* Full "Nome (crescente)" on md+; just the field name on mobile — the
             arrow already conveys the direction, so the parenthetical is dropped. */}

package/src/components/layout/ContentToolbar/ViewSelector.tsx

@@ -18,6 +18,7 @@ import type SvgIcon from '@mui/material/SvgIcon/index.js';
 import React, { useState } from 'react';
 
 import type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 const VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [
   { value: 'grid', label: 'Grid View', icon: GridIcon },
@@ -66,7 +67,7 @@ export function ViewSelector({
         aria-haspopup="menu"
         aria-expanded={open}
         onClick={(event) => setAnchorEl(event.currentTarget)}
-        sx={{ minWidth: 0, height: 32, px: 1, gap: 1, color: 'text.secondary' }}
+        sx={{ minWidth: 0, height: 32, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: 'text.secondary' }}
       >
         <ActiveIcon sx={{ fontSize: 16 }} />
         <ChevronDownIcon sx={{ fontSize: 14 }} />

package/src/components/layout/TableFilter/TableFilter.tsx

@@ -24,6 +24,7 @@ import type {
   TableFilterRangeFieldProps,
   TableFilterSectionProps,
 } from './TableFilter.types';
+import { fieldRootStyles } from '../../../tokens/field-radius';
 
 const PANEL_WIDTH = 280;
 
@@ -182,6 +183,7 @@ const TableFilterKeyword = ({
       </Typography>
       <TextField
         size="small"
+        sx={fieldRootStyles}
         name="keyword"
         placeholder={placeholder}
         value={draft}

package/src/provider/mui-bridge.ts

@@ -1,6 +1,7 @@
 import type { PaletteColor, Theme, ThemeOptions } from '@mui/material/styles/index.js';
 
 import { cssLengthToPx, cssTrackingToEm } from '../tokens/css-units';
+import { fieldRadius, fieldRadiusOverrides } from '../tokens/field-radius';
 import { accentFor } from '../tokens/scales';
 import {
   FONT_WEIGHTS,
@@ -97,7 +98,7 @@ export function uiThemeFromMui(theme: Theme): UiTheme {
     },
     spacing: (units: number) => units * unit,
     spacingUnit: unit,
-    radius: { sm: md / 2, md, lg: md * 2, xl: md * 4, full: 9999 },
+    radius: { sm: md / 2, md, lg: md * 2, xl: md * 4, full: 9999, field: fieldRadius(theme) },
     typography: {
       fontFamily: theme.typography.fontFamily ?? WEB_FONT_FAMILY,
       monospaceFontFamily: WEB_MONOSPACE_FONT_FAMILY,
@@ -134,6 +135,8 @@ export function muiThemeOptionsFrom(ui: UiTheme): ThemeOptions {
       grey: { ...palette.grey },
     },
     shape: { borderRadius: ui.radius.md },
+    fieldRadius: ui.radius.field,
+    components: fieldRadiusOverrides(ui.radius.field),
     spacing: ui.spacingUnit,
     typography: { fontFamily: ui.typography.fontFamily ?? WEB_FONT_FAMILY },
     zIndex: { ...ui.zIndex },

package/src/tokens/field-radius.core.ts

@@ -0,0 +1,26 @@
+/**
+ * THE ONE RADIUS EVERY FIELD IS DRAWN WITH, WITH NO RENDERER BEHIND IT.
+ *
+ * A row of controls — a search box, three filter triggers, a "Mais" button —
+ * used to carry three radii: the text field took MUI's `shape.borderRadius`
+ * (4px), the button `theme.spacing(1)` (8px), and the filter triggers a 999px
+ * pill. Each was reasonable on its own; side by side they read as three kits
+ * glued together. A field's corner is one decision, so it is one token.
+ *
+ * "Field" is anything that sits at control height and takes input or opens a
+ * choice: text inputs, selects, textareas, OTP slots, date and filter triggers,
+ * toggles, and the buttons that share their rows. It is NOT a card, a menu, a
+ * badge or a chip counter — those keep the theme's general `radius` scale.
+ *
+ * This file is the number alone, so the native renderer and `./theme.ts` read
+ * it without importing MUI. The web reader and the theme channel it is set
+ * through are in `./field-radius.ts`.
+ */
+
+/**
+ * The default field radius, in px (dp on native).
+ *
+ * 8, because that is what `Button` has always drawn — so the control people
+ * see most keeps its corner and the rest of the row comes to meet it.
+ */
+export const DEFAULT_FIELD_RADIUS = 8;

package/src/tokens/field-radius.ts

@@ -0,0 +1,90 @@
+import type { Components, CSSObject, Theme } from '@mui/material/styles/index.js';
+
+import { DEFAULT_FIELD_RADIUS } from './field-radius.core';
+
+/**
+ * THE FIELD RADIUS ON THE WEB: the theme channel, the reader, and the MUI
+ * overrides that carry it into controls this package does not style itself.
+ *
+ * The argument for one radius is in `./field-radius.core.ts`.
+ *
+ * ## Why a key of our own, and not `shape.borderRadius`
+ *
+ * `shape.borderRadius` is MUI's GENERAL radius: `Paper`, `Card`, `Menu`,
+ * `Alert`, `Chip` and every `sx={{ borderRadius: n }}` multiply it. Moving it to
+ * round the fields would round every surface in the app along with them. A
+ * separate key moves the fields and nothing else.
+ *
+ * It is a top-level theme key rather than `shape.fieldRadius` because MUI types
+ * `shape` in `@mui/system`, which this package does not depend on — augmenting
+ * it would fail to resolve in a host. MUI documents top-level custom variables
+ * for exactly this, and `createTheme` carries unknown keys through.
+ */
+
+export { DEFAULT_FIELD_RADIUS } from './field-radius.core';
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    /** The radius every field is drawn with, in px. See `@12-apps/ui/tokens`' `fieldRadius`. */
+    fieldRadius?: number;
+  }
+  interface ThemeOptions {
+    /** The radius every field is drawn with, in px. Defaults to {@link DEFAULT_FIELD_RADIUS}. */
+    fieldRadius?: number;
+  }
+}
+
+/** The field radius the host's theme asks for, in px — the default when it asks for none. */
+export function fieldRadius(theme: Theme): number {
+  const radius = theme.fieldRadius;
+  return typeof radius === 'number' && Number.isFinite(radius) && radius >= 0 ? radius : DEFAULT_FIELD_RADIUS;
+}
+
+/**
+ * {@link fieldRadius} as a `px` string, for `sx`.
+ *
+ * `sx` MULTIPLIES a bare number by `shape.borderRadius` — `sx={{ borderRadius: 8 }}`
+ * is 32px on the default theme — so a field radius handed to `sx` must carry
+ * its unit. `styled()` objects take the plain number.
+ */
+export function fieldRadiusPx(theme: Theme): string {
+  return `${fieldRadius(theme)}px`;
+}
+
+/**
+ * The field radius on a MUI `TextField`'s input root — for a composite that
+ * renders MUI's own `TextField`, so it follows the theme's field radius under
+ * ANY theme, not only one built with {@link fieldRadiusOverrides}. Plain CSS
+ * with the unit, so it works as `styled()` styles and as an `sx` entry.
+ */
+export function fieldRootStyles(theme: Theme): CSSObject {
+  const radius = fieldRadiusPx(theme);
+  return {
+    '& .MuiOutlinedInput-root': { borderRadius: radius },
+    '& .MuiFilledInput-root': { borderTopLeftRadius: radius, borderTopRightRadius: radius },
+  };
+}
+
+/**
+ * MUI component overrides that round MUI's OWN fields to `radius`.
+ *
+ * This package's fields read {@link fieldRadius} themselves, so they are right
+ * under any theme. These overrides are for the host's: a bare `TextField`,
+ * `Select` or `Button` a host renders straight from MUI would otherwise keep
+ * `shape.borderRadius` and sit in the row with a different corner. A theme builder spreads them into `components`, under the
+ * host's own entries so a host override still wins.
+ *
+ * `FilledInput` rounds its top corners only — its bottom edge is the underline.
+ */
+export function fieldRadiusOverrides(radius: number = DEFAULT_FIELD_RADIUS): Components<Theme> {
+  return {
+    MuiOutlinedInput: { styleOverrides: { root: { borderRadius: radius } } },
+    MuiFilledInput: {
+      styleOverrides: { root: { borderTopLeftRadius: radius, borderTopRightRadius: radius } },
+    },
+    MuiButton: { styleOverrides: { root: { borderRadius: radius } } },
+    // The group squares its inner corners itself, so rounding each button
+    // rounds the group's outer ones.
+    MuiToggleButton: { styleOverrides: { root: { borderRadius: radius } } },
+  };
+}