@12-apps/ui 6.20.0 → 6.22.0

package/src/components/feedback/Dialog/Dialog.tsx

@@ -11,7 +11,17 @@ import Typography from '@mui/material/Typography/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
+import {
+  DIALOG_ACTIONS,
+  DIALOG_BODY_PADDING_UNITS,
+  DIALOG_CONTENT_PADDING_UNITS,
+  DIALOG_HEADER_CHILDREN_PADDING_UNITS,
+  DIALOG_TITLE,
+  DIALOG_TITLED_BODY_PADDING_TOP_UNITS,
+} from './Dialog.metrics';
 import { backdropSxOf, variantStylesOf } from './Dialog.styles';
+import { childTestId, resolveTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';
 import type {
   DialogActionsProps,
   DialogContentProps,
@@ -19,24 +29,6 @@ import type {
   DialogProps,
 } from './Dialog.types';
 
-/**
- * Does this hand us a spacing slot? Fragments are transparent: `<>` is a way of
- * passing several children, not a child that owns them, and a consumer who
- * groups a `DialogContent` and a `DialogActions` in one has still passed both.
- *
- * Only the slots themselves count, and only at the top. A `DialogContent`
- * genuinely nested inside a `<div>` is that div's content, and the dialog
- * padding the div is right.
- */
-function hasSpacingSlot(children: React.ReactNode): boolean {
-  return React.Children.toArray(children).some((child) => {
-    if (!React.isValidElement(child)) return false;
-    if (child.type === DialogContent || child.type === DialogActions) return true;
-    if (child.type !== React.Fragment) return false;
-    return hasSpacingSlot((child.props as { children?: React.ReactNode }).children);
-  });
-}
-
 /**
  * The padding a dialog gives children that are not managing their own — and the
  * rule that takes it back when it turns out they are.
@@ -60,8 +52,8 @@ function hasSpacingSlot(children: React.ReactNode): boolean {
  * had before, not a broken one.
  */
 const BODY_SX = {
-  px: 3,
-  pb: 2.5,
+  px: DIALOG_BODY_PADDING_UNITS.horizontal,
+  pb: DIALOG_BODY_PADDING_UNITS.bottom,
   '&:has(> .MuiDialogContent-root), &:has(> .MuiDialogActions-root)': {
     display: 'contents',
   },
@@ -74,38 +66,12 @@ const BODY_SX = {
  * spacing.
  */
 function bodyOf(children: React.ReactNode, hasTitle: boolean): React.ReactNode {
-  if (hasSpacingSlot(children)) return children;
-  return <Box sx={{ ...BODY_SX, pt: hasTitle ? 0.5 : 2.5 }}>{children}</Box>;
-}
-
-const DIALOG_DEFAULTS = {
-  variant: 'default',
-  size: 'md',
-  showCloseButton: true,
-  backdrop: true,
-  persistent: false,
-  glass: false,
-  gradient: false,
-  glow: false,
-  pulse: false,
-  borderRadius: 'lg',
-} as const satisfies Partial<DialogProps>;
-
-/** DialogProps with every defaulted field guaranteed present (wide types). */
-type DialogPropsWithDefaults = DialogProps &
-  Required<Pick<DialogProps, keyof typeof DIALOG_DEFAULTS>>;
-
-/**
- * Apply {@link DIALOG_DEFAULTS} exactly like parameter defaults would: only a
- * missing/`undefined` prop falls back (a loop, so the component's cyclomatic
- * complexity doesn't pay one branch per defaulted prop).
- */
-function withDialogDefaults(props: DialogProps): DialogPropsWithDefaults {
-  const merged: Record<string, unknown> = { ...props };
-  for (const [key, value] of Object.entries(DIALOG_DEFAULTS)) {
-    if (merged[key] === undefined) merged[key] = value;
-  }
-  return merged as unknown as DialogPropsWithDefaults;
+  // Read lazily: both slots are declared below this function.
+  if (hasSpacingSlot(children, [DialogContent, DialogActions])) return children;
+  const pt = hasTitle
+    ? DIALOG_BODY_PADDING_UNITS.topUnderTitle
+    : DIALOG_BODY_PADDING_UNITS.top;
+  return <Box sx={{ ...BODY_SX, pt }}>{children}</Box>;
 }
 
 export const Dialog: React.FC<DialogProps> = (rawProps) => {
@@ -125,11 +91,15 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
     borderRadius,
     onClose,
     open,
-    dataTestId,
-    ...props
+    ...others
   } = withDialogDefaults(rawProps);
   const theme = useTheme();
-  const testId = dataTestId || 'dialog';
+  // Every spelling of the test id the shared contract allows, mapped to the one
+  // the DOM reads, and stripped from what is spread — `testID` is React
+  // Native's name for it and is not a DOM attribute. The native `Dialog` does
+  // the same in reverse.
+  const testId = resolveTestId(others, 'dialog');
+  const props = withoutTestIdProps(others);
   const paperSx = variantStylesOf(theme, {
     variant, size, borderRadius, glass, gradient, glow, pulse,
   });
@@ -147,7 +117,7 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
       subtitle={description}
       showCloseButton={showCloseButton}
       onClose={onClose}
-      dataTestId={dataTestId}
+      dataTestId={testId}
     />
   ) : null;
   const body = bodyOf(children, Boolean(title));
@@ -191,11 +161,20 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
   subtitle,
   showCloseButton = true,
   onClose,
-  dataTestId,
+  ...others
 }) => {
+  const props = withoutTestIdProps(others);
+
   if (children) {
     return (
-      <Box sx={{ p: 2, borderBottom: '1px solid', borderColor: 'divider' }}>
+      <Box
+        data-testid={slotTestId(others, 'header', 'dialog')}
+        sx={{
+          p: DIALOG_HEADER_CHILDREN_PADDING_UNITS,
+          borderBottom: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
         {children}
       </Box>
     );
@@ -203,20 +182,27 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
 
   return (
     <MuiDialogTitle
-      data-testid={dataTestId ? `${dataTestId}-title` : 'dialog-title'}
+      data-testid={slotTestId(others, 'title', 'dialog')}
       sx={{
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        pb: subtitle ? 1 : 2,
+        pb: subtitle
+          ? DIALOG_TITLE.paddingBottomUnits.withSubtitle
+          : DIALOG_TITLE.paddingBottomUnits.plain,
       }}
+      {...props}
     >
       <Box>
         <Typography variant="h6" component="div">
           {title}
         </Typography>
         {subtitle && (
-          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{ mt: DIALOG_TITLE.subtitleGapUnits }}
+          >
             {subtitle}
           </Typography>
         )}
@@ -225,7 +211,7 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
         <IconButton
           aria-label="close"
           onClick={onClose}
-          data-testid={dataTestId ? `${dataTestId}-close` : 'dialog-close'}
+          data-testid={childTestId(others, 'close', 'dialog')}
           sx={{
             color: 'text.secondary',
             '&:hover': {
@@ -254,7 +240,7 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
  * contributes its bottom padding, so a shrunk label's `translate(…, -9px)` is
  * all that is missing. 12px clears it and leaves the gap visually tight.
  */
-const TITLED_BODY_PADDING_TOP = 1.5;
+const TITLED_BODY_PADDING_TOP = DIALOG_TITLED_BODY_PADDING_TOP_UNITS;
 
 /**
  * `.MuiDialogTitle-root + &` is `(0,2,0)`-specific and a plain `sx` entry is
@@ -268,14 +254,13 @@ export const DialogContent: React.FC<DialogContentProps> = ({
   children,
   dividers = false,
   dense = false,
-  dataTestId,
-  ...props
+  ...others
 }) => (
     <MuiDialogContent
-      data-testid={dataTestId ? `${dataTestId}-content` : 'dialog-content'}
+      data-testid={slotTestId(others, 'content', 'dialog')}
       dividers={dividers}
       sx={{
-        padding: dense ? 1.5 : 3,
+        padding: dense ? DIALOG_CONTENT_PADDING_UNITS.dense : DIALOG_CONTENT_PADDING_UNITS.normal,
         [TITLED_BODY_SELECTOR]: { paddingTop: TITLED_BODY_PADDING_TOP },
         '&.MuiDialogContent-dividers': {
           borderTop: dividers ? '1px solid' : 'none',
@@ -283,7 +268,7 @@ export const DialogContent: React.FC<DialogContentProps> = ({
           borderColor: 'divider',
         },
       }}
-      {...props}
+      {...withoutTestIdProps(others)}
     >
       {children}
     </MuiDialogContent>
@@ -292,9 +277,8 @@ export const DialogContent: React.FC<DialogContentProps> = ({
 export const DialogActions: React.FC<DialogActionsProps> = ({
   children,
   alignment = 'right',
-  spacing = 1,
-  dataTestId,
-  ...props
+  spacing = DIALOG_ACTIONS.defaultSpacingUnits,
+  ...others
 }) => {
   const getJustifyContent = () => {
     switch (alignment) {
@@ -308,13 +292,13 @@ export const DialogActions: React.FC<DialogActionsProps> = ({
 
   return (
     <MuiDialogActions
-      data-testid={dataTestId ? `${dataTestId}-actions` : 'dialog-actions'}
+      data-testid={slotTestId(others, 'actions', 'dialog')}
       sx={{
         justifyContent: getJustifyContent(),
         gap: spacing,
-        p: 2,
+        p: DIALOG_ACTIONS.paddingUnits,
       }}
-      {...props}
+      {...withoutTestIdProps(others)}
     >
       {children}
     </MuiDialogActions>

package/src/components/feedback/Dialog/Dialog.types.native.ts

@@ -0,0 +1,46 @@
+import type { ModalProps, StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import type {
+  DialogActionsBaseProps,
+  DialogBaseProps,
+  DialogContentBaseProps,
+  DialogHeaderBaseProps,
+} from './Dialog.base';
+
+export type {
+  DialogActionsAlignment,
+  DialogActionsBaseProps,
+  DialogBaseProps,
+  DialogBorderRadius,
+  DialogContentBaseProps,
+  DialogHeaderBaseProps,
+  DialogSize,
+  DialogVariant,
+} from './Dialog.base';
+
+/** Everything a native slot takes on top of its shared contract. */
+type NativeSlotProps<Base> = Base & Omit<ViewProps, keyof Base | 'style'> & {
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * The native `Dialog`: the shared contract over React Native's own `Modal`.
+ *
+ * `Modal`'s props come through so a consumer can pick the presentation
+ * (`animationType`, `statusBarTranslucent`, `supportedOrientations`). `visible`
+ * is spoken for — `open` is the shared name — and `onRequestClose` is wired to
+ * `onClose` unless the dialog is `persistent`, which is what makes the Android
+ * back button and the browser's Escape key behave like the web's.
+ *
+ * `style` lands on the PAPER, the box the web styles through `PaperProps.sx`.
+ */
+export type DialogProps = DialogBaseProps &
+  Omit<ModalProps, keyof DialogBaseProps | 'visible' | 'onRequestClose' | 'style'> & {
+    style?: StyleProp<ViewStyle>;
+  };
+
+export type DialogHeaderProps = NativeSlotProps<DialogHeaderBaseProps>;
+
+export type DialogContentProps = NativeSlotProps<DialogContentBaseProps>;
+
+export type DialogActionsProps = NativeSlotProps<DialogActionsBaseProps>;

package/src/components/feedback/Dialog/Dialog.types.ts

@@ -1,47 +1,30 @@
-import type { SizeValue } from '../../../tokens/scales';
 import type { DialogProps as MuiDialogProps } from '@mui/material/Dialog/index.js';
-import type { ReactNode } from 'react';
 
-export type DialogVariant = 'default' | 'glass' | 'fullscreen' | 'drawer';
-export type DialogSize = SizeValue;
+import type {
+  DialogActionsBaseProps,
+  DialogBaseProps,
+  DialogContentBaseProps,
+  DialogHeaderBaseProps,
+} from './Dialog.base';
 
-export interface DialogProps extends Omit<MuiDialogProps, 'variant' | 'title'> {
-  children: ReactNode;
-  variant?: DialogVariant;
-  size?: DialogSize;
-  title?: ReactNode;
-  description?: string;
-  showCloseButton?: boolean;
-  backdrop?: boolean;
-  persistent?: boolean;
-  glass?: boolean;
-  gradient?: boolean;
-  glow?: boolean;
-  pulse?: boolean;
-  borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  onClose?: () => void;
-  dataTestId?: string;
-}
+export type {
+  DialogActionsAlignment,
+  DialogActionsBaseProps,
+  DialogBaseProps,
+  DialogBorderRadius,
+  DialogContentBaseProps,
+  DialogHeaderBaseProps,
+  DialogSize,
+  DialogVariant,
+} from './Dialog.base';
 
-export interface DialogHeaderProps {
-  children?: ReactNode;
-  title?: ReactNode;
-  subtitle?: ReactNode;
-  showCloseButton?: boolean;
-  onClose?: () => void;
-  dataTestId?: string;
-}
+/** The web `Dialog`: the shared contract, plus everything MUI's own `Dialog` takes. */
+export interface DialogProps
+  extends DialogBaseProps,
+    Omit<MuiDialogProps, 'variant' | 'title' | keyof DialogBaseProps> {}
 
-export interface DialogContentProps {
-  children: ReactNode;
-  dividers?: boolean;
-  dense?: boolean;
-  dataTestId?: string;
-}
+export type DialogHeaderProps = DialogHeaderBaseProps;
 
-export interface DialogActionsProps {
-  children: ReactNode;
-  alignment?: 'left' | 'center' | 'right' | 'space-between';
-  spacing?: number;
-  dataTestId?: string;
-}
+export type DialogContentProps = DialogContentBaseProps;
+
+export type DialogActionsProps = DialogActionsBaseProps;

package/src/components/feedback/Dialog/DialogParts.native.tsx

@@ -0,0 +1,257 @@
+import * as React from 'react';
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text as RNText,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import {
+  DIALOG_ACTIONS,
+  DIALOG_CLOSE_BUTTON,
+  DIALOG_CONTENT_PADDING_UNITS,
+  DIALOG_HEADER_CHILDREN_PADDING_UNITS,
+  DIALOG_TITLE,
+  DIALOG_TITLED_BODY_PADDING_TOP_UNITS,
+} from './Dialog.metrics';
+import type {
+  DialogActionsAlignment,
+  DialogActionsProps,
+  DialogContentProps,
+  DialogHeaderProps,
+} from './Dialog.types.native';
+import { Icon } from '../../../icons/Icon.native';
+import { childTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { renderTextChildren } from '../../../platform/text-children';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import { muiTypeStyle } from '../../../tokens/mui-type';
+import type { UiTheme } from '../../../tokens/theme';
+
+/**
+ * THE THREE SLOTS A DIALOG IS BUILT OUT OF, ON REACT NATIVE.
+ *
+ * The web overrides only padding, alignment and the dividers, so the rest of
+ * the numbers are MUI's own and are restated in `Dialog.metrics.ts` rather than
+ * re-invented.
+ */
+
+/**
+ * Is there a title above this body?
+ *
+ * The web asks the DOM — `.MuiDialogTitle-root + &` — because only the CSS knows
+ * which `DialogContent` actually FOLLOWS the title. React Native has no sibling
+ * selector, so `Dialog` says so through context instead; the difference is that
+ * a second `DialogContent` further down gets the tighter top padding too.
+ */
+export const DialogTitledContext = React.createContext(false);
+
+/** The body text of a slot, in MUI's `body1`, so a bare string is not unstyled. */
+export const dialogBodyTextStyle = (theme: UiTheme): TextStyle => ({
+  ...muiTypeStyle(theme, 'body1'),
+  color: theme.palette.text.primary,
+});
+
+/** MUI's dialog title: `h6`, in the body ink. */
+export const dialogTitleStyle = (theme: UiTheme): TextStyle => ({
+  ...muiTypeStyle(theme, 'h6'),
+  color: theme.palette.text.primary,
+});
+
+/** The subtitle under it: `body2`, muted, one half-unit down. */
+export const dialogSubtitleStyle = (theme: UiTheme): TextStyle => ({
+  ...muiTypeStyle(theme, 'body2'),
+  color: theme.palette.text.secondary,
+  marginTop: theme.spacing(DIALOG_TITLE.subtitleGapUnits),
+});
+
+function CloseButton({ onPress, testID }: { onPress: () => void; testID: string }): React.JSX.Element {
+  const theme = useUiTheme();
+  return (
+    <Pressable
+      role="button"
+      aria-label="close"
+      testID={testID}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.close,
+        pressed ? { backgroundColor: theme.palette.action.hover } : null,
+      ]}
+    >
+      <Icon name="Close" size={DIALOG_CLOSE_BUTTON.iconSize} color={theme.palette.text.secondary} />
+    </Pressable>
+  );
+}
+
+export function DialogHeader({
+  children,
+  title,
+  subtitle,
+  showCloseButton = true,
+  onClose,
+  ...others
+}: DialogHeaderProps): React.JSX.Element {
+  const theme = useUiTheme();
+  const { style, ...viewProps } = withoutTestIdProps(others);
+
+  if (children) {
+    return (
+      <View
+        testID={slotTestId(others, 'header', 'dialog')}
+        style={[
+          {
+            padding: theme.spacing(DIALOG_HEADER_CHILDREN_PADDING_UNITS),
+            borderBottomWidth: 1,
+            borderBottomColor: theme.palette.divider,
+            borderStyle: 'solid',
+          },
+          style,
+        ]}
+        {...viewProps}
+      >
+        {renderTextChildren(children, dialogBodyTextStyle(theme))}
+      </View>
+    );
+  }
+
+  const paddingBottom = theme.spacing(
+    subtitle ? DIALOG_TITLE.paddingBottomUnits.withSubtitle : DIALOG_TITLE.paddingBottomUnits.plain,
+  );
+
+  return (
+    <View
+      testID={slotTestId(others, 'title', 'dialog')}
+      style={[styles.header, { paddingBottom }, style]}
+      {...viewProps}
+    >
+      <View style={styles.headerText}>
+        {/*
+          MUI's `DialogTitle` renders `component: "h2"`, so the web dialog has a
+          heading and the native one had none. `role`/`aria-level` are what
+          react-native-web maps to an `<h2>`; a device reads the same pair
+          through `accessibilityRole="header"`, which RN derives from `role`.
+        */}
+        <RNText role="heading" aria-level={2} style={dialogTitleStyle(theme)}>
+          {title}
+        </RNText>
+        {subtitle ? <RNText style={dialogSubtitleStyle(theme)}>{subtitle}</RNText> : null}
+      </View>
+      {showCloseButton && onClose ? (
+        <CloseButton onPress={onClose} testID={childTestId(others, 'close', 'dialog')} />
+      ) : null}
+    </View>
+  );
+}
+
+DialogHeader.displayName = 'DialogHeader';
+
+export function DialogContent({
+  children,
+  dividers = false,
+  dense = false,
+  ...others
+}: DialogContentProps): React.JSX.Element {
+  const theme = useUiTheme();
+  const titled = React.useContext(DialogTitledContext);
+  const { style, ...viewProps } = withoutTestIdProps(others);
+  const padding = theme.spacing(
+    dense ? DIALOG_CONTENT_PADDING_UNITS.dense : DIALOG_CONTENT_PADDING_UNITS.normal,
+  );
+  const paddingTop = titled
+    ? theme.spacing(DIALOG_TITLED_BODY_PADDING_TOP_UNITS)
+    : padding;
+
+  return (
+    <ScrollView
+      testID={slotTestId(others, 'content', 'dialog')}
+      style={[
+        styles.content,
+        dividers
+          ? {
+              borderTopWidth: 1,
+              borderBottomWidth: 1,
+              borderStyle: 'solid',
+              borderColor: theme.palette.divider,
+            }
+          : null,
+        style,
+      ]}
+      contentContainerStyle={{ padding, paddingTop }}
+      {...viewProps}
+    >
+      {renderTextChildren(children, dialogBodyTextStyle(theme))}
+    </ScrollView>
+  );
+}
+
+DialogContent.displayName = 'DialogContent';
+
+const JUSTIFY: Record<DialogActionsAlignment, NonNullable<ViewStyle['justifyContent']>> = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+  'space-between': 'space-between',
+};
+
+export function DialogActions({
+  children,
+  alignment = 'right',
+  spacing = DIALOG_ACTIONS.defaultSpacingUnits,
+  ...others
+}: DialogActionsProps): React.JSX.Element {
+  const theme = useUiTheme();
+  const { style, ...viewProps } = withoutTestIdProps(others);
+
+  return (
+    <View
+      testID={slotTestId(others, 'actions', 'dialog')}
+      style={[
+        styles.actions,
+        {
+          padding: theme.spacing(DIALOG_ACTIONS.paddingUnits),
+          justifyContent: JUSTIFY[alignment],
+          gap: theme.spacing(spacing),
+        },
+        style,
+      ]}
+      {...viewProps}
+    >
+      {renderTextChildren(children, dialogBodyTextStyle(theme))}
+    </View>
+  );
+}
+
+DialogActions.displayName = 'DialogActions';
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexGrow: 0,
+    flexShrink: 0,
+    paddingTop: DIALOG_TITLE.padding.top,
+    paddingHorizontal: DIALOG_TITLE.padding.horizontal,
+  },
+  headerText: {
+    flexShrink: 1,
+  },
+  close: {
+    padding: DIALOG_CLOSE_BUTTON.padding,
+    borderRadius: 9999,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  actions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexGrow: 0,
+    flexShrink: 0,
+  },
+});

package/src/components/feedback/Dialog/NATIVE-NOTES.md

@@ -0,0 +1,16 @@
+# Dialog on React Native
+
+Known rendering gaps, one bullet each; `pnpm native:ledger` reads them.
+
+- `glass` paints its 0.1 paper wash and primary hairline without the 20px backdrop blur, and the scrim behind it is a flat `alpha(black, 0.2)` without its 8px blur — React Native has no backdrop filter.
+- `gradient` adds nothing on native: it is a `linear-gradient` background IMAGE layered over the paper colour, and React Native core has neither a gradient fill nor a second background layer.
+- `role="dialog"` sits on React Native's `Modal`, which is the dialog on this side; the web puts it on MUI's paper. react-native-web gives that role to the TOP-MOST modal only, so two stacked dialogs announce one.
+- The modal mounts and unmounts without a transition where the web fades the paper in through MUI's `Fade`. React Native's own `animationType` is forwarded, so a consumer who wants `"fade"` or `"slide"` passes it.
+- The paper is `maxHeight: '100%'` inside an overlay inset by the web's `theme.spacing(2)` margin; the web writes `calc(100% - 64px)`, which React Native has no `calc` for, and 90vw, which the inset overlay stands in for.
+- `borderRadius` has no effect on `variant="drawer"` on EITHER renderer, so native paints the drawer SQUARE — which is what the web shows. Two things have to fail for that and both do: the web builds `${radius}px 0 0 ${radius}px` out of `theme.spacing()`, which already returns a px string, so the declaration reads `16pxpx 0 0 16pxpx` and is dropped; and that `sx` lands on a plain `Box` inside the Drawer rather than on a Paper, and MUI renders the Drawer's own Paper with `square: true`, so `shape.borderRadius` paints nothing either. Rounding the drawer is a web change (`Dialog.styles.ts` plus where the `sx` lands), made once, for both.
+- A `DialogContent` or `DialogActions` passed through a COMPONENT boundary still gets the padded wrapper here. The web catches that case with a `:has()` selector, which asks the DOM one step after React can; native has only the element-type check, so a body split into its own component is padded twice and stops being a sibling of the action bar.
+- `DialogContent` is a `ScrollView` — React Native's `overflow-y: auto` — so its padding lives on the scrolling content container rather than on the box the test id names.
+- The tighter top padding a body gets under a title (FUT-544) is decided by context rather than by the web's `.MuiDialogTitle-root + &`, so a SECOND `DialogContent` further down the dialog gets it too.
+- A `glow`ing paper stops clipping its children to its corners: a view's own shadow is clipped by its own overflow on a device, so the halo the caller asked for would not paint. The web keeps its clip and shows both.
+- The close button is a `Pressable` around the shared `Close` glyph at MUI's 8px `IconButton` padding; its pressed wash stands in for the web's hover.
+- Title, subtitle and raw text children are set in MUI's default `h6`/`body2`/`body1` numbers; a host that re-themes MUI's typography variants moves the web only.

package/src/components/feedback/Dialog/index.native.ts

@@ -0,0 +1,16 @@
+export { Dialog } from './Dialog.native';
+export { DialogActions, DialogContent, DialogHeader } from './DialogParts.native';
+export type {
+  DialogActionsAlignment,
+  DialogActionsBaseProps,
+  DialogActionsProps,
+  DialogBaseProps,
+  DialogBorderRadius,
+  DialogContentBaseProps,
+  DialogContentProps,
+  DialogHeaderBaseProps,
+  DialogHeaderProps,
+  DialogProps,
+  DialogSize,
+  DialogVariant,
+} from './Dialog.types.native';

package/src/components/feedback/Dialog/index.ts

@@ -1,9 +1,15 @@
-export { Dialog, DialogActions,DialogContent, DialogHeader } from './Dialog';
+export { Dialog, DialogActions, DialogContent, DialogHeader } from './Dialog';
 export type {
+  DialogActionsAlignment,
+  DialogActionsBaseProps,
   DialogActionsProps,
+  DialogBaseProps,
+  DialogBorderRadius,
+  DialogContentBaseProps,
   DialogContentProps,
+  DialogHeaderBaseProps,
   DialogHeaderProps,
   DialogProps,
   DialogSize,
   DialogVariant,
-} from './Dialog.types';
+} from './Dialog.types';