@12-apps/ui 6.18.0 → 6.19.0

package/src/components/data-display/LoadingState/LoadingState.native.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  Text as RNText,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { type LoadingStateTestIds, makeTestIds, resolveLoadingStateProps } from './LoadingState.helpers';
+import {
+  IOS_LARGE_SPINNER_FROM,
+  MESSAGE_TYPE,
+  SKELETON_FULL_ROW_WIDTH,
+  SKELETON_LAST_ROW_WIDTH,
+  SKELETON_MESSAGE_MARGIN_TOP_UNITS,
+  SKELETON_PADDING_UNITS,
+  SKELETON_RADIUS,
+  SKELETON_ROW_GAP_UNITS,
+  SKELETON_ROW_HEIGHT,
+  SKELETON_TINT_ALPHA,
+  SPINNER_GAP_UNITS,
+  SPINNER_MIN_HEIGHT,
+  SPINNER_PADDING_UNITS,
+  SPINNER_SIZES,
+} from './LoadingState.metrics';
+import type { LoadingStateProps, LoadingStateSize } from './LoadingState.types.native';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import { alpha } from '../../../tokens/color';
+import { muiTypeStyle } from '../../../tokens/mui-type';
+import type { UiTheme } from '../../../tokens/theme';
+
+/** The message's type: MUI's `body2`/`body1`/`h6` per size, in the muted ink, as the web's `Typography` sets it. */
+export function messageStyle(theme: UiTheme, size: LoadingStateSize): TextStyle {
+  return { ...muiTypeStyle(theme, MESSAGE_TYPE[size]), color: theme.palette.text.secondary };
+}
+
+/** The skeleton rows' tint: the house `Skeleton`'s `medium` intensity. */
+export const skeletonTint = (theme: UiTheme): string =>
+  alpha(theme.palette.text.primary, SKELETON_TINT_ALPHA);
+
+/** iOS has two spinner sizes; everything else takes the px. */
+function spinnerSize(px: number): number | 'small' | 'large' {
+  if (Platform.OS !== 'ios') return px;
+  return px >= IOS_LARGE_SPINNER_FROM ? 'large' : 'small';
+}
+
+interface ViewArgs {
+  message?: string;
+  size: LoadingStateSize;
+  skeletonRows: number;
+  testIds: LoadingStateTestIds;
+  style?: StyleProp<ViewStyle>;
+  rest: Omit<LoadingStateProps, keyof ViewArgs | 'variant' | 'testID' | 'dataTestId'>;
+}
+
+function LoadingMessage({
+  message,
+  size,
+  testIds,
+  style,
+}: Pick<ViewArgs, 'message' | 'size' | 'testIds'> & { style?: TextStyle }): React.JSX.Element | null {
+  const theme = useUiTheme();
+  if (!message) return null;
+  return (
+    <RNText style={[messageStyle(theme, size), style]} testID={testIds.named('message')}>
+      {message}
+    </RNText>
+  );
+}
+
+function SkeletonRows({ size, skeletonRows, testIds }: Pick<ViewArgs, 'size' | 'skeletonRows' | 'testIds'>): React.JSX.Element {
+  const theme = useUiTheme();
+  const tint = skeletonTint(theme);
+  return (
+    <View style={{ gap: theme.spacing(SKELETON_ROW_GAP_UNITS) }}>
+      {Array.from({ length: skeletonRows }, (_, index) => (
+        <View
+          key={`skeleton-row-${index}`}
+          aria-hidden
+          testID={testIds.optional(`skeleton-${index}`)}
+          style={{
+            height: SKELETON_ROW_HEIGHT[size],
+            // The last row is short, so the block reads as a paragraph of text.
+            width: index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH,
+            borderRadius: SKELETON_RADIUS,
+            backgroundColor: tint,
+          }}
+        />
+      ))}
+    </View>
+  );
+}
+
+function SkeletonView({ message, size, skeletonRows, testIds, style, rest }: ViewArgs): React.JSX.Element {
+  const theme = useUiTheme();
+  return (
+    <View
+      role="status"
+      aria-busy
+      aria-label={message || 'Loading content'}
+      testID={testIds.base}
+      style={[styles.skeleton, { padding: theme.spacing(SKELETON_PADDING_UNITS) }, style]}
+      {...rest}
+    >
+      <SkeletonRows size={size} skeletonRows={skeletonRows} testIds={testIds} />
+      <LoadingMessage
+        message={message}
+        size={size}
+        testIds={testIds}
+        style={{ marginTop: theme.spacing(SKELETON_MESSAGE_MARGIN_TOP_UNITS), textAlign: 'center' }}
+      />
+    </View>
+  );
+}
+
+function SpinnerView({ message, size, testIds, style, rest }: ViewArgs): React.JSX.Element {
+  const theme = useUiTheme();
+  return (
+    <View
+      role="status"
+      aria-busy
+      aria-label={message || 'Loading'}
+      testID={testIds.base}
+      style={[
+        styles.spinner,
+        {
+          padding: theme.spacing(SPINNER_PADDING_UNITS),
+          minHeight: SPINNER_MIN_HEIGHT,
+          gap: theme.spacing(SPINNER_GAP_UNITS),
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      <ActivityIndicator
+        size={spinnerSize(SPINNER_SIZES[size])}
+        color={theme.palette.primary.main}
+        testID={testIds.named('spinner')}
+      />
+      <LoadingMessage message={message} size={size} testIds={testIds} />
+    </View>
+  );
+}
+
+export const LoadingState: React.FC<LoadingStateProps> = React.memo(function LoadingState(rawProps) {
+  const resolved = resolveLoadingStateProps(rawProps);
+  const { variant, message, size, skeletonRows, style, ...others } = resolved;
+  const args: ViewArgs = {
+    message,
+    size,
+    skeletonRows,
+    style,
+    testIds: makeTestIds(resolveTestId(others)),
+    rest: withoutTestIdProps(others),
+  };
+
+  return variant === 'skeleton' ? <SkeletonView {...args} /> : <SpinnerView {...args} />;
+});
+
+LoadingState.displayName = 'LoadingState';
+
+const styles = StyleSheet.create({
+  skeleton: {
+    width: '100%',
+  },
+  spinner: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/data-display/LoadingState/LoadingState.tsx

@@ -13,7 +13,19 @@ import {
   SIZE_MAP,
   SKELETON_ROW_HEIGHT,
 } from './LoadingState.helpers';
+import {
+  SKELETON_FULL_ROW_WIDTH,
+  SKELETON_LAST_ROW_WIDTH,
+  SKELETON_MESSAGE_MARGIN_TOP_UNITS,
+  SKELETON_PADDING_UNITS,
+  SKELETON_RADIUS,
+  SKELETON_ROW_GAP_UNITS,
+  SPINNER_GAP_UNITS,
+  SPINNER_MIN_HEIGHT,
+  SPINNER_PADDING_UNITS,
+} from './LoadingState.metrics';
 import type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';
+import { resolveTestId } from '../../../platform/test-id';
 
 interface ViewProps {
   message?: string;
@@ -58,10 +70,10 @@ const SkeletonView: React.FC<ViewProps> = ({
       data-testid={testIds.base}
       sx={{
         width: '100%',
-        padding: theme.spacing(3),
+        padding: theme.spacing(SKELETON_PADDING_UNITS),
       }}
     >
-      <Stack spacing={2}>
+      <Stack spacing={SKELETON_ROW_GAP_UNITS}>
         {Array.from({ length: skeletonRows }).map((_, index) => (
           <Skeleton
             key={`skeleton-row-${index}`}
@@ -69,8 +81,8 @@ const SkeletonView: React.FC<ViewProps> = ({
             animation="wave"
             height={SKELETON_ROW_HEIGHT[size]}
             // The last row is short, so the block reads as a paragraph of text.
-            width={index === skeletonRows - 1 ? '60%' : '100%'}
-            borderRadius={4}
+            width={index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH}
+            borderRadius={SKELETON_RADIUS}
             data-testid={testIds.optional(`skeleton-${index}`)}
           />
         ))}
@@ -79,7 +91,7 @@ const SkeletonView: React.FC<ViewProps> = ({
         message={message}
         size={size}
         testIds={testIds}
-        sx={{ mt: 2, textAlign: 'center' }}
+        sx={{ mt: SKELETON_MESSAGE_MARGIN_TOP_UNITS, textAlign: 'center' }}
       />
     </Box>
   );
@@ -100,9 +112,9 @@ const SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds })
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        padding: theme.spacing(6),
-        minHeight: 200,
-        gap: theme.spacing(2),
+        padding: theme.spacing(SPINNER_PADDING_UNITS),
+        minHeight: SPINNER_MIN_HEIGHT,
+        gap: theme.spacing(SPINNER_GAP_UNITS),
       }}
     >
       <CircularProgress
@@ -115,14 +127,16 @@ const SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds })
 };
 
 export const LoadingState: React.FC<LoadingStateProps> = React.memo((rawProps) => {
-  const { variant, message, size, skeletonRows, className, dataTestId } =
-    resolveLoadingStateProps(rawProps);
+  const resolved = resolveLoadingStateProps(rawProps);
+  const { variant, message, size, skeletonRows, className } = resolved;
   const viewProps: ViewProps = {
     message,
     size,
     skeletonRows,
     className,
-    testIds: makeTestIds(dataTestId),
+    // `dataTestId` is the documented spelling; `testID`, the shared contract's
+    // other one, resolves to the same id.
+    testIds: makeTestIds(resolveTestId(resolved)),
   };
 
   return variant === 'skeleton' ? (

package/src/components/data-display/LoadingState/LoadingState.types.native.ts

@@ -0,0 +1,11 @@
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import type { LoadingStateBaseProps } from './LoadingState.base';
+
+export type { LoadingStateBaseProps, LoadingStateSize, LoadingStateVariant } from './LoadingState.base';
+
+/** The native `LoadingState`: the shared contract, plus a `View`'s own props. */
+export type LoadingStateProps = LoadingStateBaseProps &
+  Omit<ViewProps, keyof LoadingStateBaseProps | 'style'> & {
+    style?: StyleProp<ViewStyle>;
+  };

package/src/components/data-display/LoadingState/LoadingState.types.ts

@@ -1,38 +1,10 @@
-import type { SizeValue } from '../../../tokens/scales';
-export type LoadingStateVariant = 'spinner' | 'skeleton';
-export type LoadingStateSize = SizeValue;
+import type { LoadingStateBaseProps } from './LoadingState.base';
 
-export interface LoadingStateProps {
-  /**
-   * The visual style of the loading indicator
-   * @default 'spinner'
-   */
-  variant?: LoadingStateVariant;
-
-  /**
-   * Optional message to display below the loading indicator
-   */
-  message?: string;
-
-  /**
-   * Size of the loading indicator
-   * @default 'md'
-   */
-  size?: LoadingStateSize;
-
-  /**
-   * Number of skeleton rows to display (only for skeleton variant)
-   * @default 3
-   */
-  skeletonRows?: number;
+export type { LoadingStateBaseProps, LoadingStateSize, LoadingStateVariant } from './LoadingState.base';
 
+export interface LoadingStateProps extends LoadingStateBaseProps {
   /**
    * Custom className for the container
    */
   className?: string;
-
-  /**
-   * Test ID for component testing
-   */
-  dataTestId?: string;
 }

package/src/components/data-display/LoadingState/NATIVE-NOTES.md

@@ -0,0 +1,7 @@
+# LoadingState on React Native
+
+Known rendering gaps, one bullet each; `pnpm native:ledger` reads them.
+
+- The spinner is the platform's `ActivityIndicator`, not MUI's 3.6-unit arc: same diameter and primary colour, the platform's own stroke; on iOS the two built-in sizes stand in for the five (`md` and up draw `large`).
+- The skeleton rows are the static tint (`alpha(text.primary, 0.13)`); MUI's `wave` sweep is a gradient pseudo-element React Native cannot draw.
+- The message is set in MUI's default `body2`/`body1`/`h6` numbers; a host that re-themes MUI's typography variants moves the web only.

package/src/components/data-display/LoadingState/index.native.ts

@@ -0,0 +1,7 @@
+export { LoadingState } from './LoadingState.native';
+export type {
+  LoadingStateBaseProps,
+  LoadingStateProps,
+  LoadingStateSize,
+  LoadingStateVariant,
+} from './LoadingState.types.native';

package/src/components/data-display/LoadingState/index.ts

@@ -1,2 +1,7 @@
 export { LoadingState } from './LoadingState';
-export type { LoadingStateProps, LoadingStateSize, LoadingStateVariant } from './LoadingState.types';
+export type {
+  LoadingStateBaseProps,
+  LoadingStateProps,
+  LoadingStateSize,
+  LoadingStateVariant,
+} from './LoadingState.types';

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

@@ -6,7 +6,6 @@ import {
   Platform,
   Pressable,
   StyleSheet,
-  Text as RNText,
   View,
   type GestureResponderEvent,
   type PressableStateCallbackType,
@@ -38,6 +37,7 @@ import {
   quietInk,
 } from './Button.metrics';
 import type { ButtonProps, ButtonVariant } from './Button.types.native';
+import { renderTextChildren } from '../../../platform/text-children';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
 import { alpha } from '../../../tokens/color';
@@ -192,22 +192,6 @@ function Pulse({ color, radius, testID }: { color: string; radius: number; testI
   );
 }
 
-/**
- * A string or number child is the label and gets the label style; anything
- * else is rendered as given. No test id of its own: the web puts none on the
- * label, and a shared story that counts `/perf-button-/` must count buttons.
- */
-function renderChildren(children: React.ReactNode, label: TextStyle): React.ReactNode {
-  return React.Children.map(children, (child) =>
-    typeof child === 'string' || typeof child === 'number' ? (
-      <RNText style={label} numberOfLines={1}>
-        {child}
-      </RNText>
-    ) : (
-      child
-    ),
-  );
-}
 
 type ResolvedProps = ReturnType<typeof resolveButtonProps<ButtonProps>>;
 
@@ -316,7 +300,7 @@ export const Button = React.forwardRef<View, ButtonProps>((rawProps, ref) => {
     >
       {pulse && !look.inactive ? <Pulse color={look.palette.main} radius={look.radius} testID={idFor('pulse')} /> : null}
       {iconPosition === 'left' ? iconNode : null}
-      {loading ? <Spinner color={look.label.color as string} testID={idFor('loading')} /> : renderChildren(children, look.label)}
+      {loading ? <Spinner color={look.label.color as string} testID={idFor('loading')} /> : renderTextChildren(children, look.label, 1)}
       {iconPosition === 'right' ? iconNode : null}
     </Pressable>
   );

package/src/components/layout/Container/Container.base.ts

@@ -0,0 +1,32 @@
+import type React from 'react';
+
+/**
+ * THE CONTRACT BOTH `Container` RENDERERS HONOUR — and nothing else.
+ *
+ * No MUI and no react-native here, on purpose: this file ships in both
+ * declaration outputs (`dist/types` and `dist/types-native`), and a native
+ * consumer has no `@mui/material` to resolve a type import against. The web
+ * adds MUI `Container`'s own props in `Container.types.ts`; the native side
+ * adds a `View`'s in `Container.types.native.ts`.
+ */
+export type ContainerMaxWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+export type ContainerVariant = 'default' | 'fluid' | 'centered' | 'padded';
+export type ContainerPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface ContainerBaseProps {
+  children: React.ReactNode;
+  /**
+   * The widest the content column gets, as one of MUI's breakpoints — see
+   * `CONTAINER_MAX_WIDTHS`. `false` removes the limit. Any other string is
+   * read as `lg`, as the web has always done.
+   */
+  maxWidth?: ContainerMaxWidth | string;
+  /** `fluid` drops the limit, `centered` centres the content in the viewport, `padded` is a main content area. */
+  variant?: ContainerVariant;
+  /** The inset on every side, on the spacing scale — see `CONTAINER_PADDING_UNITS`. */
+  padding?: ContainerPadding;
+  /** Tighten the inset under MUI's `sm` breakpoint (600px). */
+  responsive?: boolean;
+  testID?: string;
+  dataTestId?: string;
+}

package/src/components/layout/Container/Container.md

@@ -100,6 +100,20 @@ Adds extra vertical padding, useful for main content areas.
 - **lg**: 32px padding
 - **xl**: 48px padding
 
+## React Native
+
+The same import renders natively (`@12-apps/ui/layout/Container` resolves to
+`Container.native.tsx` under Metro): a `View` that is `width: 100%` between
+auto margins, limited to the same MUI breakpoint widths
+(`CONTAINER_MAX_WIDTHS`), inset from the same spacing units
+(`CONTAINER_PADDING_UNITS`). The `responsive` media query becomes a
+`useWindowDimensions().width < 600` test and `centered`'s `100vh` the window
+height. `testID`, `dataTestId` and `data-testid` all name the element;
+`container` is the default. Both renderers read one `containerPaddingUnits`,
+which paints what the web paints today — including two quirks recorded in
+`NATIVE-NOTES.md` (`padding="none"` and `variant="padded"` both paint the
+default inset). See [NATIVE.md](../../../../NATIVE.md).
+
 ## Accessibility
 
 - The component maintains semantic HTML structure

package/src/components/layout/Container/Container.metrics.ts

@@ -0,0 +1,87 @@
+import type { ContainerMaxWidth, ContainerPadding, ContainerVariant } from './Container.base';
+
+/**
+ * THE NUMBERS BOTH `Container` RENDERERS DRAW WITH.
+ *
+ * `Container.tsx` used to hold these as `theme.spacing(…)` calls and MUI's
+ * breakpoint names inside the component; the native renderer has no MUI
+ * breakpoints to name, so the values live here in SPACING UNITS and px, and
+ * each renderer multiplies the units out through its own `theme.spacing`.
+ */
+export type ContainerMaxWidthKey = Exclude<ContainerMaxWidth, false>;
+
+/**
+ * MUI's default breakpoints, which its `Container` reads as `max-width`
+ * (`xs` is `Math.max(values.xs, 444)`). MUI applies each under
+ * `min-width: <breakpoint>`, but below it the column is `width: 100%` and
+ * narrower anyway, so a plain `maxWidth` paints the same.
+ */
+export const CONTAINER_MAX_WIDTHS: Record<ContainerMaxWidthKey, number> = {
+  xs: 444,
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1536,
+};
+
+export const CONTAINER_DEFAULT_MAX_WIDTH: ContainerMaxWidthKey = 'lg';
+/** The `centered` variant reads at `md`, whatever `maxWidth` says. */
+export const CONTAINER_CENTERED_MAX_WIDTH: ContainerMaxWidthKey = 'md';
+
+export const CONTAINER_PADDING_UNITS: Record<ContainerPadding, number> = {
+  none: 0,
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 6,
+};
+
+export const CONTAINER_DEFAULT_PADDING: ContainerPadding = 'md';
+
+/** What `variant="padded"` declares above and below, in spacing units. */
+export const CONTAINER_PADDED_VERTICAL_UNITS = 8;
+
+/** Under {@link CONTAINER_COMPACT_BELOW}, a `responsive` container tightens to this. */
+export const CONTAINER_COMPACT_PADDING_UNITS = 2;
+
+/** MUI's `sm` breakpoint: `theme.breakpoints.down('sm')` is `max-width: 599.95px`. */
+export const CONTAINER_COMPACT_BELOW = 600;
+
+const isMaxWidthKey = (value: string): value is ContainerMaxWidthKey => value in CONTAINER_MAX_WIDTHS;
+
+/**
+ * The breakpoint the column is limited to, or `false` for none. `fluid` drops
+ * the limit, `centered` fixes it at `md`, and a string outside the vocabulary
+ * reads as the default — the rules `Container.tsx` has always applied.
+ */
+export function resolveContainerMaxWidth(
+  variant: ContainerVariant,
+  maxWidth: ContainerMaxWidth | string,
+): ContainerMaxWidthKey | false {
+  if (variant === 'fluid') return false;
+  if (variant === 'centered') return CONTAINER_CENTERED_MAX_WIDTH;
+  if (typeof maxWidth === 'string' && isMaxWidthKey(maxWidth)) return maxWidth;
+  return maxWidth === false ? false : CONTAINER_DEFAULT_MAX_WIDTH;
+}
+
+/**
+ * The inset every side of the container is PAINTED with, in spacing units.
+ *
+ * This is the web's painted result, not its declared intent, and two of its
+ * rules are worth knowing before reaching for them:
+ *
+ * - `padding="none"` paints the default. The web reads its map with `||`, so
+ *   `none`'s 0 falls through to `md`.
+ * - `variant="padded"` paints the same inset as `default`. The web declares its
+ *   {@link CONTAINER_PADDED_VERTICAL_UNITS} above and below BEFORE the
+ *   `padding` shorthand, which therefore overrides them.
+ *
+ * Both renderers read this one function so they agree today; either fix is a
+ * change to the web's emitted CSS and to this function, made together.
+ */
+export function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number {
+  if (compact) return CONTAINER_COMPACT_PADDING_UNITS;
+  const units = (CONTAINER_PADDING_UNITS as Record<string, number | undefined>)[padding];
+  return units || CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];
+}

package/src/components/layout/Container/Container.native.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { View, useWindowDimensions, type ViewStyle } from 'react-native';
+
+import {
+  CONTAINER_COMPACT_BELOW,
+  CONTAINER_MAX_WIDTHS,
+  containerPaddingUnits,
+  resolveContainerMaxWidth,
+} from './Container.metrics';
+import type { ContainerMaxWidth, ContainerPadding, ContainerProps, ContainerVariant } from './Container.types.native';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import type { UiTheme } from '../../../tokens/theme';
+
+export interface ContainerStyleArgs {
+  variant: ContainerVariant;
+  maxWidth: ContainerMaxWidth | string;
+  padding: ContainerPadding;
+  responsive: boolean;
+  /** The window, for the two things CSS answers with a media query and `100vh`. */
+  window: { width: number; height: number };
+}
+
+/**
+ * The style MUI's `Container` plus the web `sx` paint, in absolute numbers.
+ *
+ * `width: 100%` between auto margins is MUI's own centring rule; `maxWidth` is
+ * the breakpoint the web applies under `min-width` (below it the column is
+ * narrower anyway); the `responsive` media query becomes a window-width test;
+ * `centered`'s `100vh` becomes the window height. `padded` and `padding="none"`
+ * paint what the web paints — see `containerPaddingUnits`.
+ */
+export function containerStyle(theme: UiTheme, a: ContainerStyleArgs): ViewStyle {
+  const compact = a.responsive && a.window.width < CONTAINER_COMPACT_BELOW;
+  const limit = resolveContainerMaxWidth(a.variant, a.maxWidth);
+  return {
+    width: '100%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    maxWidth: limit === false ? undefined : CONTAINER_MAX_WIDTHS[limit],
+    padding: theme.spacing(containerPaddingUnits(a.padding, compact)),
+    ...(a.variant === 'centered'
+      ? { alignItems: 'center', justifyContent: 'center', minHeight: a.window.height }
+      : null),
+  };
+}
+
+/** The native `Container`: a `View` sized by the same rules MUI's `Container` and the web `sx` apply. */
+export const Container = React.forwardRef<View, ContainerProps>(
+  ({ children, maxWidth = 'lg', variant = 'default', padding = 'md', responsive = true, style, ...others }, ref) => {
+    const theme = useUiTheme();
+    const window = useWindowDimensions();
+    const resolved = React.useMemo(
+      () => containerStyle(theme, { variant, maxWidth, padding, responsive, window }),
+      [theme, variant, maxWidth, padding, responsive, window],
+    );
+
+    return (
+      <View
+        ref={ref}
+        style={[resolved, style]}
+        testID={resolveTestId(others, 'container')}
+        {...withoutTestIdProps(others)}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+Container.displayName = 'Container';