@12-apps/ui 6.21.0 → 6.23.0

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';

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

@@ -0,0 +1,92 @@
+import type * as React from 'react';
+
+/**
+ * THE CONTRACT BOTH `Card` RENDERERS HONOUR — and nothing else.
+ *
+ * This file imports no MUI and no react-native, on purpose: it 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.
+ *
+ * Handlers are NOT here. Their names are the same on both sides (`onClick`,
+ * `onFocus`, `onBlur`) but their event types are the renderer's own, so each
+ * side declares them beside its own extras — except {@link
+ * CardBaseProps.onExpandToggle}, whose argument is a boolean rather than an
+ * event and is therefore the same type on both.
+ */
+export type CardVariant = 'elevated' | 'outlined' | 'glass' | 'gradient' | 'neumorphic' | 'section';
+export type CardEntranceAnimation =
+  | 'fade'
+  | 'slide-up'
+  | 'slide-down'
+  | 'slide-left'
+  | 'slide-right'
+  | 'zoom'
+  | 'grow'
+  | 'none';
+
+/** The named radii a card can be cut to. `full` is a percentage, not a length. */
+export type CardBorderRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface CardBaseProps {
+  children: React.ReactNode;
+  variant?: CardVariant;
+  /** Paints the hover/press surface and marks the card as a pointer target. */
+  interactive?: boolean;
+  glow?: boolean;
+  pulse?: boolean;
+  borderRadius?: CardBorderRadius;
+  /** Dims the card, blocks pointer events and centres a spinner over it. */
+  loading?: boolean;
+  /**
+   * Accepted and ignored on BOTH renderers — reserved, and extracted so they
+   * never reach the underlying element as unknown attributes.
+   */
+  expandable?: boolean;
+  expanded?: boolean;
+  onExpandToggle?: (expanded: boolean) => void;
+  entranceAnimation?: CardEntranceAnimation;
+  animationDelay?: number;
+  skeleton?: boolean;
+  hoverScale?: number;
+  dataTestId?: string;
+  testID?: string;
+}
+
+export interface CardHeaderBaseProps {
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  action?: React.ReactNode;
+  avatar?: React.ReactNode;
+  /** Custom header content; when given it replaces the title/subtitle layout. */
+  children?: React.ReactNode;
+  dataTestId?: string;
+  testID?: string;
+}
+
+export interface CardContentBaseProps {
+  children: React.ReactNode;
+  dense?: boolean;
+  dataTestId?: string;
+  testID?: string;
+}
+
+export type CardActionsAlignment = 'left' | 'center' | 'right' | 'space-between';
+
+export interface CardActionsBaseProps {
+  children: React.ReactNode;
+  disableSpacing?: boolean;
+  alignment?: CardActionsAlignment;
+  dataTestId?: string;
+  testID?: string;
+}
+
+export interface CardMediaBaseProps {
+  /** The image URL. */
+  image?: string;
+  /** The media's accessible name. */
+  title?: string;
+  height?: number | string;
+  children?: React.ReactNode;
+  dataTestId?: string;
+  testID?: string;
+}

package/src/components/layout/Card/Card.helpers.ts

@@ -1,4 +1,4 @@
-import type { CardProps } from './Card.types';
+import type { CardBaseProps } from './Card.base';
 
 type CardDefaultedKeys =
   | 'variant'
@@ -8,9 +8,15 @@ type CardDefaultedKeys =
   | 'borderRadius'
   | 'loading';
 
-type ResolvedCardProps = CardProps & Required<Pick<CardProps, CardDefaultedKeys>>;
+/**
+ * Generic over the renderer's own props: the web and the native `Card` pass
+ * different handler types (and different style props) through, and both come
+ * back out untouched.
+ */
+type ResolvedCardProps<P extends CardBaseProps> = P &
+  Required<Pick<CardBaseProps, CardDefaultedKeys>>;
 
-const CARD_DEFAULTS: Pick<CardProps, CardDefaultedKeys> = {
+const CARD_DEFAULTS: Required<Pick<CardBaseProps, CardDefaultedKeys>> = {
   variant: 'elevated',
   interactive: false,
   glow: false,
@@ -21,10 +27,10 @@ const CARD_DEFAULTS: Pick<CardProps, CardDefaultedKeys> = {
 
 // Strips explicitly-undefined props before the merge, so `glow={undefined}` still
 // falls back to the default exactly as a destructuring default would.
-const definedProps = (props: CardProps): Partial<CardProps> =>
+const definedProps = <P extends CardBaseProps>(props: P): Partial<P> =>
   Object.fromEntries(
     Object.entries(props).filter(([, value]) => value !== undefined),
-  ) as Partial<CardProps>;
+  ) as Partial<P>;
 
-export const resolveCardProps = (props: CardProps): ResolvedCardProps =>
-  ({ ...CARD_DEFAULTS, ...definedProps(props) }) as ResolvedCardProps;
+export const resolveCardProps = <P extends CardBaseProps>(props: P): ResolvedCardProps<P> =>
+  ({ ...CARD_DEFAULTS, ...definedProps(props) }) as ResolvedCardProps<P>;

package/src/components/layout/Card/Card.look.native.ts

@@ -0,0 +1,204 @@
+import type { ViewStyle } from 'react-native';
+
+import type { CardBorderRadius, CardVariant } from './Card.base';
+import {
+  CARD_BORDER_WIDTH,
+  CARD_GLASS,
+  CARD_GLOW,
+  CARD_GRADIENT,
+  CARD_LOADING,
+  CARD_NEUMORPHIC,
+  CARD_PAPER_SHADOW,
+  CARD_RADIUS_FULL,
+  CARD_RADIUS_UNITS,
+  CARD_SECTION_BACKGROUND,
+  neumorphicShadows,
+} from './Card.metrics';
+import { alpha } from '../../../tokens/color';
+import { BLACK, WHITE, drop, halo, type UiShadow } from '../../../tokens/shadow';
+import type { UiTheme } from '../../../tokens/theme';
+
+/**
+ * WHAT THE NATIVE `Card` PAINTS — the arithmetic, with no JSX in sight.
+ *
+ * The web builds one `sx` object by spreading base, `interactive`, `glow`,
+ * `pulse` and finally the variant's own surface over each other; whichever
+ * wrote a property last wins. The composition here spreads the SAME things in
+ * the SAME order, which is why `glow` shows through an `elevated` card (whose
+ * surface declares no shadow) and is buried by a `glass` one (whose surface
+ * does) on both renderers.
+ */
+
+/** The named radius as a length. `full` stays a percentage of the box. */
+export function cardRadius(theme: UiTheme, radius: CardBorderRadius): number | string {
+  if (radius === 'full') return CARD_RADIUS_FULL;
+  return theme.spacing(CARD_RADIUS_UNITS[radius] ?? CARD_RADIUS_UNITS.md);
+}
+
+interface Surface {
+  surface: ViewStyle;
+  /** What the web changes on `:hover`; native applies it while pressed. */
+  hover: ViewStyle;
+}
+
+function glassSurface(theme: UiTheme, lifted: boolean): Surface {
+  return {
+    surface: {
+      backgroundColor: alpha(theme.palette.background.paper, CARD_GLASS.backgroundAlpha.rest),
+      borderWidth: CARD_BORDER_WIDTH,
+      borderStyle: 'solid',
+      borderColor: alpha(theme.palette.primary.main, CARD_GLASS.borderAlpha.rest),
+      boxShadow: drop(
+        CARD_GLASS.shadow.offsetY,
+        CARD_GLASS.shadow.blurRadius,
+        alpha(BLACK, CARD_GLASS.shadow.alpha),
+      ),
+    },
+    hover: {
+      backgroundColor: alpha(
+        theme.palette.background.paper,
+        lifted ? CARD_GLASS.backgroundAlpha.lifted : CARD_GLASS.backgroundAlpha.rest,
+      ),
+      borderColor: alpha(theme.palette.primary.main, CARD_GLASS.borderAlpha.lifted),
+    },
+  };
+}
+
+function neumorphicSurface(theme: UiTheme, lifted: boolean): Surface {
+  const { dark, light } = CARD_NEUMORPHIC.alpha;
+  const pair = (raised: boolean): UiShadow[] =>
+    theme.mode === 'dark'
+      ? neumorphicShadows(raised, alpha(BLACK, dark.near), alpha(WHITE, dark.far))
+      : neumorphicShadows(
+          raised,
+          alpha(theme.palette.grey[400], raised ? light.near.lifted : light.near.rest),
+          alpha(WHITE, raised ? light.far.lifted : light.far.rest),
+        );
+
+  return {
+    surface: {
+      backgroundColor: theme.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
+      boxShadow: pair(false),
+      borderWidth: 0,
+    },
+    hover: { boxShadow: pair(lifted) },
+  };
+}
+
+function sectionSurface(theme: UiTheme, lifted: boolean): Surface {
+  const wash = CARD_SECTION_BACKGROUND[theme.mode === 'dark' ? 'dark' : 'light'];
+  return {
+    surface: { backgroundColor: wash.rest, borderWidth: 0, boxShadow: undefined },
+    hover: { backgroundColor: lifted ? wash.lifted : wash.rest },
+  };
+}
+
+/**
+ * Each variant's resting surface and whatever it changes on hover — the same
+ * split `Card.styles.ts` makes, in React Native's property names.
+ *
+ * `gradient` is the one honest gap: React Native core has no gradient fill, so
+ * it paints the gradient's FIRST stop. The parity ledger records it.
+ */
+export function cardSurface(theme: UiTheme, variant: CardVariant, lifted: boolean): Surface {
+  switch (variant) {
+    case 'outlined':
+      return {
+        surface: {
+          borderWidth: CARD_BORDER_WIDTH,
+          borderStyle: 'solid',
+          borderColor: theme.palette.divider,
+          boxShadow: undefined,
+        },
+        hover: { borderColor: lifted ? theme.palette.primary.main : theme.palette.divider },
+      };
+    case 'glass':
+      return glassSurface(theme, lifted);
+    case 'gradient':
+      return {
+        surface: {
+          backgroundColor: theme.palette.primary.main,
+          boxShadow: drop(
+            CARD_GRADIENT.shadow.offsetY,
+            CARD_GRADIENT.shadow.blurRadius,
+            alpha(theme.palette.primary.main, CARD_GRADIENT.shadow.alpha),
+          ),
+        },
+        hover: {
+          backgroundColor: lifted ? theme.palette.primary.dark : theme.palette.primary.main,
+        },
+      };
+    case 'neumorphic':
+      return neumorphicSurface(theme, lifted);
+    case 'section':
+      return sectionSurface(theme, lifted);
+    default:
+      // `elevated` declares only MUI's inert `elevation`, so the paper shadow
+      // the base laid down (or a `glow` over it) is what shows.
+      return { surface: {}, hover: {} };
+  }
+}
+
+/** The ink a card's own text inherits: `gradient` flips it, everything else is body ink. */
+export const cardInk = (theme: UiTheme, variant: CardVariant): string =>
+  variant === 'gradient' ? theme.palette.primary.contrastText : theme.palette.text.primary;
+
+export interface CardLookArgs {
+  variant: CardVariant;
+  interactive: boolean;
+  glow: boolean;
+  pulse: boolean;
+  loading: boolean;
+  borderRadius: CardBorderRadius;
+}
+
+export interface CardLook {
+  container: ViewStyle;
+  /** Applied while pressed, standing in for the web's `:hover`. */
+  pressed: ViewStyle;
+  radius: number | string;
+  ink: string;
+}
+
+/**
+ * Everything the card paints, decided once per render.
+ *
+ * `overflow` is the one place native needs a rule the web does not. MUI's
+ * `Card` clips its children, and the pulse ring has to reach 15px past the
+ * edge — but a view's own shadow is clipped by its own overflow on a device,
+ * so a `glow` the caller asked for would simply not paint. Both decorations
+ * therefore turn the clip off, exactly as `Button.native.tsx` does.
+ */
+export function cardLook(theme: UiTheme, a: CardLookArgs): CardLook {
+  const radius = cardRadius(theme, a.borderRadius);
+  const chosen = cardSurface(theme, a.variant, a.interactive);
+
+  const base: ViewStyle = {
+    position: 'relative',
+    borderRadius: radius,
+    backgroundColor: theme.palette.background.paper,
+    overflow: a.pulse || a.glow ? 'visible' : 'hidden',
+    opacity: a.loading ? CARD_LOADING.opacity : 1,
+    pointerEvents: a.loading ? 'none' : 'auto',
+  };
+
+  return {
+    radius,
+    ink: cardInk(theme, a.variant),
+    container: {
+      ...base,
+      boxShadow: CARD_PAPER_SHADOW,
+      ...(a.interactive ? { cursor: 'pointer' } : null),
+      ...(a.glow
+        ? { boxShadow: halo(CARD_GLOW.rest.blurRadius, alpha(theme.palette.primary.main, CARD_GLOW.rest.alpha)) }
+        : null),
+      ...chosen.surface,
+    },
+    pressed: {
+      ...(a.glow
+        ? { boxShadow: halo(CARD_GLOW.lifted.blurRadius, alpha(theme.palette.primary.main, CARD_GLOW.lifted.alpha)) }
+        : null),
+      ...chosen.hover,
+    },
+  };
+}