@12-apps/ui 6.21.0 → 6.23.0

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

@@ -0,0 +1,59 @@
+import type {
+  GestureResponderEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  TargetedEvent,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+import type {
+  CardActionsBaseProps,
+  CardBaseProps,
+  CardContentBaseProps,
+  CardHeaderBaseProps,
+  CardMediaBaseProps,
+} from './Card.base';
+
+export type {
+  CardActionsAlignment,
+  CardActionsBaseProps,
+  CardBaseProps,
+  CardBorderRadius,
+  CardContentBaseProps,
+  CardEntranceAnimation,
+  CardHeaderBaseProps,
+  CardMediaBaseProps,
+  CardVariant,
+} from './Card.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 `Card`. `onClick` keeps its web name — a shared screen should not
+ * have to know which renderer it is on — and `onPress` is accepted too, because
+ * that is what a React Native developer reaches for. Both fire.
+ *
+ * A card with neither handler and no `interactive` renders as a plain `View`,
+ * the way the web one is a plain `div`: nothing to press, nothing in the
+ * accessibility tree that says otherwise.
+ */
+export type CardProps = CardBaseProps &
+  Omit<ViewProps, keyof CardBaseProps | 'style' | 'onFocus' | 'onBlur'> & {
+    style?: StyleProp<ViewStyle>;
+    onClick?: (event: GestureResponderEvent) => void;
+    onPress?: (event: GestureResponderEvent) => void;
+    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+  };
+
+export type CardHeaderProps = NativeSlotProps<CardHeaderBaseProps>;
+
+export type CardContentProps = NativeSlotProps<CardContentBaseProps>;
+
+export type CardActionsProps = NativeSlotProps<CardActionsBaseProps>;
+
+export type CardMediaProps = NativeSlotProps<CardMediaBaseProps>;

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

@@ -1,57 +1,42 @@
 import type { CardProps as MuiCardProps } from '@mui/material/Card/index.js';
-import type { ReactNode } from 'react';
+import type React from 'react';
 
-export type CardVariant = 'elevated' | 'outlined' | 'glass' | 'gradient' | 'neumorphic' | 'section';
-export type CardEntranceAnimation = 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'zoom' | 'grow' | 'none';
+import type {
+  CardActionsBaseProps,
+  CardBaseProps,
+  CardContentBaseProps,
+  CardHeaderBaseProps,
+  CardMediaBaseProps,
+} from './Card.base';
 
-export interface CardProps extends Omit<MuiCardProps, 'variant'> {
-  children: ReactNode;
-  variant?: CardVariant;
-  interactive?: boolean;
-  glow?: boolean;
-  pulse?: boolean;
-  borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-  loading?: boolean;
-  expandable?: boolean;
-  expanded?: boolean;
-  onExpandToggle?: (expanded: boolean) => void;
-  entranceAnimation?: CardEntranceAnimation;
-  animationDelay?: number;
-  skeleton?: boolean;
-  hoverScale?: number;
+export type {
+  CardActionsAlignment,
+  CardActionsBaseProps,
+  CardBaseProps,
+  CardBorderRadius,
+  CardContentBaseProps,
+  CardEntranceAnimation,
+  CardHeaderBaseProps,
+  CardMediaBaseProps,
+  CardVariant,
+} from './Card.base';
+
+/** The web `Card`: the shared contract, plus everything MUI's own `Card` takes. */
+export interface CardProps
+  extends CardBaseProps,
+    Omit<MuiCardProps, 'variant' | keyof CardBaseProps> {
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onFocus?: React.FocusEventHandler<HTMLDivElement>;
   onBlur?: React.FocusEventHandler<HTMLDivElement>;
-  dataTestId?: string;
 }
 
-export interface CardHeaderProps {
-  title?: ReactNode;
-  subtitle?: ReactNode;
-  action?: ReactNode;
-  avatar?: ReactNode;
-  children?: ReactNode;
-  dataTestId?: string;
-}
+export type CardHeaderProps = CardHeaderBaseProps;
 
-export interface CardContentProps {
-  children: ReactNode;
-  dense?: boolean;
-  dataTestId?: string;
-}
+export type CardContentProps = CardContentBaseProps;
 
-export interface CardActionsProps {
-  children: ReactNode;
-  disableSpacing?: boolean;
-  alignment?: 'left' | 'center' | 'right' | 'space-between';
-  dataTestId?: string;
-}
+export type CardActionsProps = CardActionsBaseProps;
 
-export interface CardMediaProps {
+/** `component` is the DOM element MUI renders the media as — web only. */
+export interface CardMediaProps extends CardMediaBaseProps {
   component?: React.ElementType;
-  image?: string;
-  title?: string;
-  height?: number | string;
-  children?: ReactNode;
-  dataTestId?: string;
-}
+}

package/src/components/layout/Card/CardParts.native.tsx

@@ -0,0 +1,262 @@
+import * as React from 'react';
+import {
+  Image,
+  StyleSheet,
+  Text as RNText,
+  View,
+  type DimensionValue,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import {
+  CARD_ACTIONS,
+  CARD_CONTENT_PADDING_UNITS,
+  CARD_HEADER,
+  CARD_HEADER_CHILDREN_PADDING_UNITS,
+  CARD_MEDIA_HEIGHT,
+} from './Card.metrics';
+import type {
+  CardActionsAlignment,
+  CardActionsProps,
+  CardContentProps,
+  CardHeaderProps,
+  CardMediaProps,
+} from './Card.types.native';
+import { childTestId, resolveTestId, 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 FOUR SLOTS A CARD IS BUILT OUT OF, ON REACT NATIVE.
+ *
+ * Each one is a `View` carrying the padding MUI's own `CardHeader`,
+ * `CardContent`, `CardActions` and `CardMedia` declare in px — the web half
+ * overrides only `padding` and `justify-content`, so the rest of the numbers
+ * come from MUI and are restated in `Card.metrics.ts` rather than re-invented.
+ */
+
+/**
+ * THE INK A CARD PUBLISHES TO ITS SLOTS.
+ *
+ * `Card.styles.ts` puts `color: primary.contrastText` on the gradient card
+ * ITSELF and lets CSS inheritance carry it into the header and the body. React
+ * Native inherits nothing across views, so the card publishes its ink here and
+ * every slot reads it — which is the difference between a legible gradient card
+ * and near-black text on indigo.
+ *
+ * `null` is "no card above me": a slot rendered on its own falls back to the
+ * body ink, exactly as it would on the web.
+ */
+export const CardInkContext = React.createContext<string | null>(null);
+
+/** The body text of a slot, in MUI's `body1`, so a bare string is not unstyled. */
+const slotTextStyle = (theme: UiTheme, ink: string | null): TextStyle => ({
+  ...muiTypeStyle(theme, 'body1'),
+  color: ink ?? theme.palette.text.primary,
+});
+
+/** MUI's header title: `h5`, or `body2` when an avatar shares the row. */
+export const cardTitleStyle = (
+  theme: UiTheme,
+  hasAvatar: boolean,
+  ink: string | null = null,
+): TextStyle => ({
+  ...muiTypeStyle(theme, hasAvatar ? 'body2' : 'h5'),
+  color: ink ?? theme.palette.text.primary,
+});
+
+/**
+ * MUI's header subheader: `body1` (or `body2` beside an avatar), in the muted
+ * ink — which does NOT follow the card's own ink, because MUI's `CardHeader`
+ * pins the subheader to `textSecondary` explicitly rather than inheriting.
+ */
+export const cardSubtitleStyle = (theme: UiTheme, hasAvatar: boolean): TextStyle => ({
+  ...muiTypeStyle(theme, hasAvatar ? 'body2' : 'body1'),
+  color: theme.palette.text.secondary,
+});
+
+export function CardHeader({
+  title,
+  subtitle,
+  action,
+  avatar,
+  children,
+  ...others
+}: CardHeaderProps): React.JSX.Element {
+  const theme = useUiTheme();
+  const ink = React.useContext(CardInkContext);
+  const testID = resolveTestId(others, 'card-header');
+  const { style, ...viewProps } = withoutTestIdProps(others);
+
+  if (children) {
+    return (
+      <View
+        testID={testID}
+        style={[{ padding: theme.spacing(CARD_HEADER_CHILDREN_PADDING_UNITS) }, style]}
+        {...viewProps}
+      >
+        {renderTextChildren(children, slotTextStyle(theme, ink))}
+      </View>
+    );
+  }
+
+  const hasAvatar = avatar != null;
+  return (
+    <View testID={testID} style={[styles.header, style]} {...viewProps}>
+      {hasAvatar ? <View style={styles.headerAvatar}>{avatar}</View> : null}
+      <View style={styles.headerContent}>
+        {title != null ? (
+          <RNText testID={childTestId(others, 'title', 'card')} style={cardTitleStyle(theme, hasAvatar, ink)}>
+            {title}
+          </RNText>
+        ) : null}
+        {subtitle != null ? (
+          <RNText
+            testID={childTestId(others, 'subtitle', 'card')}
+            style={cardSubtitleStyle(theme, hasAvatar)}
+          >
+            {subtitle}
+          </RNText>
+        ) : null}
+      </View>
+      {action != null ? <View style={styles.headerAction}>{action}</View> : null}
+    </View>
+  );
+}
+
+CardHeader.displayName = 'CardHeader';
+
+export function CardContent({
+  children,
+  dense = false,
+  ...others
+}: CardContentProps): React.JSX.Element {
+  const theme = useUiTheme();
+  const ink = React.useContext(CardInkContext);
+  const testID = resolveTestId(others, 'card-content');
+  const { style, ...viewProps } = withoutTestIdProps(others);
+  const padding = theme.spacing(
+    dense ? CARD_CONTENT_PADDING_UNITS.dense : CARD_CONTENT_PADDING_UNITS.normal,
+  );
+
+  return (
+    <View testID={testID} style={[{ padding }, style]} {...viewProps}>
+      {renderTextChildren(children, slotTextStyle(theme, ink))}
+    </View>
+  );
+}
+
+CardContent.displayName = 'CardContent';
+
+const JUSTIFY: Record<CardActionsAlignment, NonNullable<ViewStyle['justifyContent']>> = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+  'space-between': 'space-between',
+};
+
+export function CardActions({
+  children,
+  disableSpacing = false,
+  alignment = 'left',
+  ...others
+}: CardActionsProps): React.JSX.Element {
+  const theme = useUiTheme();
+  const ink = React.useContext(CardInkContext);
+  const testID = resolveTestId(others, 'card-actions');
+  const { style, ...viewProps } = withoutTestIdProps(others);
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.actions,
+        { justifyContent: JUSTIFY[alignment], gap: disableSpacing ? undefined : CARD_ACTIONS.gap },
+        style,
+      ]}
+      {...viewProps}
+    >
+      {renderTextChildren(children, slotTextStyle(theme, ink))}
+    </View>
+  );
+}
+
+CardActions.displayName = 'CardActions';
+
+/**
+ * `height` accepts the web's spellings: a number, a numeric string (`"200"`, as
+ * an `<img height>` takes) or a percentage.
+ */
+export function mediaHeight(height: number | string): DimensionValue {
+  if (typeof height === 'number') return height;
+  const parsed = Number(height);
+  return Number.isFinite(parsed) ? parsed : (height as DimensionValue);
+}
+
+export function CardMedia({
+  image,
+  title,
+  height = CARD_MEDIA_HEIGHT,
+  children,
+  ...others
+}: CardMediaProps): React.JSX.Element {
+  const testID = resolveTestId(others, 'card-media');
+  const { style, ...viewProps } = withoutTestIdProps(others);
+
+  return (
+    <View
+      testID={testID}
+      style={[{ height: mediaHeight(height), width: '100%', overflow: 'hidden' }, style]}
+      {...viewProps}
+    >
+      {image != null ? (
+        <Image
+          source={{ uri: image }}
+          accessibilityLabel={title}
+          resizeMode="cover"
+          style={StyleSheet.absoluteFill}
+        />
+      ) : null}
+      {children}
+    </View>
+  );
+}
+
+CardMedia.displayName = 'CardMedia';
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: CARD_HEADER.padding,
+  },
+  headerAvatar: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    marginRight: CARD_HEADER.avatarGap,
+  },
+  headerContent: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 'auto',
+    minWidth: 0,
+  },
+  headerAction: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    alignSelf: 'flex-start',
+    marginTop: CARD_HEADER.action.marginTop,
+    marginRight: CARD_HEADER.action.marginRight,
+    marginBottom: CARD_HEADER.action.marginBottom,
+  },
+  actions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: CARD_ACTIONS.padding,
+  },
+});

package/src/components/layout/Card/NATIVE-NOTES.md

@@ -0,0 +1,15 @@
+# Card 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 — React Native has no backdrop filter.
+- `gradient` paints the gradient's first stop flat (`primary.main`, `primary.dark` under a press) — React Native core has no gradient fill.
+- Hover has no touch equivalent: what a variant changes on `:hover` (border colour, wash, shadow) is applied while PRESSED, and the 2px lift is not — the web itself returns an interactive card to `translateY(0)` under the pointer, which is where a finger leaves it.
+- The pulse ring is an expanding hollow border rather than a `box-shadow` spread behind the paper: React Native cannot paint a child behind its parent's own background, so the ring grows outward from the card's edge instead of from under it, and its corner radius stays the card's rather than widening with the ring.
+- A `glow`ing card 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 `overflow: hidden` there and shows both.
+- `elevated` restates MUI's `shadows[1]`, the elevation every card inherits from `Paper` on the web, because React Native has no Paper to inherit it from; the variant's own `elevation: 4`/`8` are not CSS properties and paint nothing on either renderer.
+- The loading spinner is the platform's `ActivityIndicator` at MUI's 40px `CircularProgress` diameter, not MUI's arc; on iOS the built-in `large` stands in for the exact size.
+- `CardMedia` draws its image with `resizeMode="cover"` inside the sized box. MUI's `component` and the DOM `title` attribute are web-only — a device names the image through `accessibilityLabel`.
+- `CardActions` spaces its children with `gap` where MUI uses `& > :not(style) ~ :not(style) { margin-left: 8px }`: the same 8px, applied by the container rather than by a sibling selector.
+- A `gradient` card's `primary.contrastText` reaches its own text children and the house slots (`CardHeader`'s title, `CardContent`, `CardActions`) through a context; the web puts one `color` on the card and lets CSS inherit it into everything below. So a consumer's own `Text` nested inside a gradient card keeps the body ink unless it reads that colour itself. The header's SUBTITLE stays `text.secondary` on both, because MUI's `CardHeader` pins the subheader to `textSecondary` rather than inheriting.
+- Title, subtitle and raw text children are set in MUI's default `h5`/`body1`/`body2` numbers; a host that re-themes MUI's typography variants moves the web only.

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

@@ -0,0 +1,18 @@
+export { Card } from './Card.native';
+export { CardActions, CardContent, CardHeader, CardMedia } from './CardParts.native';
+export type {
+  CardActionsAlignment,
+  CardActionsBaseProps,
+  CardActionsProps,
+  CardBaseProps,
+  CardBorderRadius,
+  CardContentBaseProps,
+  CardContentProps,
+  CardEntranceAnimation,
+  CardHeaderBaseProps,
+  CardHeaderProps,
+  CardMediaBaseProps,
+  CardMediaProps,
+  CardProps,
+  CardVariant,
+} from './Card.types.native';

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

@@ -1,8 +1,17 @@
 export { Card, CardActions, CardContent, CardHeader, CardMedia } from './Card';
 export type {
+  CardActionsAlignment,
+  CardActionsBaseProps,
   CardActionsProps,
+  CardBaseProps,
+  CardBorderRadius,
+  CardContentBaseProps,
   CardContentProps,
+  CardEntranceAnimation,
+  CardHeaderBaseProps,
   CardHeaderProps,
+  CardMediaBaseProps,
   CardMediaProps,
   CardProps,
+  CardVariant,
 } from './Card.types';

package/src/platform/pulse-ring.native.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { Animated, Easing } from 'react-native';
+
+/**
+ * THE `::after` PULSE, AS A REACT NATIVE VIEW.
+ *
+ * `Card` and `Dialog` pulse the same way on the web: an `::after` that fills
+ * the element, carries `box-shadow: 0 0 0 <spread>px currentColor` and animates
+ * that spread out and back while fading, once every two seconds, from BEHIND
+ * the element (`z-index: -1`). Those two read this; `Button.native.tsx` still
+ * carries its own `Pulse`, a filled overlay that scales and fades rather than a
+ * ring, and folding it onto this is a `form/Button` change.
+ *
+ * React Native cannot paint a child behind its parent's own background, so a
+ * filled overlay would wash the surface instead of haloing it. This draws a
+ * HOLLOW ring instead: the view is inset by the current spread and carries a
+ * border of exactly that width, so the band it paints is precisely the region
+ * from the surface's edge to `spread` outside it — the same band the box-shadow
+ * spread covers, and nothing over the surface itself.
+ *
+ * Layout props cannot run on the native driver, so this animates on the JS one.
+ */
+export interface PulseRingProps {
+  color: string;
+  /** The surface's own corner radius, which the ring follows. */
+  radius: number | string;
+  /** How far out of the edge the ring grows, in px. */
+  spread: number;
+  durationMs: number;
+  /** The fraction of the cycle the ring is still visible for. */
+  fadeAt: number;
+  /** The ring's opacity at the start of a cycle. */
+  opacity: number;
+  testID: string;
+}
+
+export function PulseRing({
+  color,
+  radius,
+  spread,
+  durationMs,
+  fadeAt,
+  opacity,
+  testID,
+}: PulseRingProps): React.JSX.Element {
+  const progress = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(progress, {
+        toValue: 1,
+        duration: durationMs,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [durationMs, progress]);
+
+  const grow = progress.interpolate({ inputRange: [0, fadeAt, 1], outputRange: [0, spread, 0] });
+  const inset = Animated.multiply(grow, -1);
+
+  return (
+    <Animated.View
+      testID={testID}
+      aria-hidden
+      style={{
+        position: 'absolute',
+        pointerEvents: 'none',
+        top: inset,
+        left: inset,
+        right: inset,
+        bottom: inset,
+        borderWidth: grow,
+        borderColor: color,
+        borderRadius: radius,
+        opacity: progress.interpolate({ inputRange: [0, fadeAt, 1], outputRange: [opacity, 0, 0] }),
+      }}
+    />
+  );
+}

package/src/platform/test-id.ts

@@ -45,3 +45,20 @@ export function withoutTestIdProps<P extends TestIdProps>(props: P): Omit<P, key
   const { testID: _testID, dataTestId: _dataTestId, 'data-testid': _dataTestid, ...rest } = props;
   return rest;
 }
+
+/**
+ * A SLOT's own test id, where a raw id means "this element" and `dataTestId`
+ * means "the surface I belong to".
+ *
+ * `Dialog` names its parts by derivation — `d` gives `d-title`, `d-content`,
+ * `d-actions` — and a slot receives the DIALOG's id in `dataTestId` to derive
+ * from. A raw `data-testid` (or React Native's `testID`) is something else: it
+ * is the id the caller wants ON THIS ELEMENT, which is how the shared stories
+ * address a `DialogContent`, so it is taken verbatim and no suffix is added.
+ *
+ * Both renderers read this one function, which is the only way the web and the
+ * native slot can agree about what `<DialogContent data-testid="x">` is called.
+ */
+export function slotTestId(props: TestIdProps, suffix: string, fallback: string): string {
+  return props.testID ?? props['data-testid'] ?? childTestId(props, suffix, fallback);
+}

package/src/tokens/mui-type.ts

@@ -15,7 +15,7 @@ import type { UiTheme } from './theme';
  * halves and not these; each component that reads this records that as a
  * known gap in its `NATIVE-NOTES.md`.
  */
-export type MuiTypeVariantName = 'h6' | 'body1' | 'body2' | 'caption';
+export type MuiTypeVariantName = 'h5' | 'h6' | 'body1' | 'body2' | 'caption';
 
 export interface MuiTypeVariant {
   fontSize: number;
@@ -25,6 +25,7 @@ export interface MuiTypeVariant {
 }
 
 export const MUI_TYPE: Record<MuiTypeVariantName, MuiTypeVariant> = {
+  h5: { fontSize: 24, lineHeight: 1.334, fontWeight: 400, letterSpacingEm: 0 },
   h6: { fontSize: 20, lineHeight: 1.6, fontWeight: 500, letterSpacingEm: 0.0075 },
   body1: { fontSize: 16, lineHeight: 1.5, fontWeight: 400, letterSpacingEm: 0.00938 },
   body2: { fontSize: 14, lineHeight: 1.43, fontWeight: 400, letterSpacingEm: 0.01071 },

package/src/tokens/shadow.ts

@@ -0,0 +1,59 @@
+/**
+ * ONE SHADOW, IN THE SHAPE BOTH RENDERERS READ.
+ *
+ * A drop shadow is one of the few decorations the two sides express in the same
+ * numbers and different syntax: CSS wants `0 8px 32px rgba(…)`, React Native
+ * wants `{ offsetX, offsetY, blurRadius, spreadDistance, color }` (its
+ * `BoxShadowValue`, which `boxShadow` takes an array of). So the numbers live in
+ * a component's `*.metrics.ts` as this object, native passes it straight
+ * through, and the web renders it with {@link shadowCss}.
+ *
+ * {@link shadowCss} reproduces the text the web components already wrote by
+ * hand: a bare `0` for a zero length, and no spread at all when the spread is
+ * zero. That is what makes moving a shadow into a metrics table a refactor
+ * rather than a restyle.
+ */
+export interface UiShadow {
+  offsetX: number;
+  offsetY: number;
+  blurRadius: number;
+  spreadDistance: number;
+  color: string;
+}
+
+/** A length the way the web writes it: a bare `0`, otherwise px. */
+const len = (value: number): string => (value === 0 ? '0' : `${value}px`);
+
+/** One shadow as CSS. A zero spread is omitted, as the web has always written it. */
+export const shadowCss = (shadow: UiShadow): string =>
+  [
+    len(shadow.offsetX),
+    len(shadow.offsetY),
+    len(shadow.blurRadius),
+    ...(shadow.spreadDistance === 0 ? [] : [len(shadow.spreadDistance)]),
+    shadow.color,
+  ].join(' ');
+
+/** Several shadows as one CSS declaration. */
+export const shadowListCss = (shadows: readonly UiShadow[]): string =>
+  shadows.map(shadowCss).join(', ');
+
+/**
+ * MUI's `palette.common`, which `UiTheme` has no slot for.
+ *
+ * Here rather than beside each caller because the neumorphic, glass and scrim
+ * arithmetic in more than one component mixes from exactly these two, and a
+ * per-component copy is a per-component chance to write `#000000`.
+ */
+export const BLACK = '#000';
+export const WHITE = '#fff';
+
+/** A shadow with no offset — a halo all round, which is how `glow` reads. */
+export const halo = (blurRadius: number, color: string): UiShadow[] => [
+  { offsetX: 0, offsetY: 0, blurRadius, spreadDistance: 0, color },
+];
+
+/** A dropped shadow straight down, which is how a lifted surface sits. */
+export const drop = (offsetY: number, blurRadius: number, color: string): UiShadow[] => [
+  { offsetX: 0, offsetY, blurRadius, spreadDistance: 0, color },
+];

package/dist/chunk-6PRA45LC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/feedback/Dialog/Dialog.styles.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport { alpha, keyframes } from '@mui/material/styles/index.js';\n\nimport { dynamicViewportHeight } from '../../../utils/viewport';\nimport type { DialogProps } from './Dialog.types';\n\n/**\n * Paper/backdrop styling for the Dialog component (FUT-181 gate cleanup):\n * pure helpers so `Dialog.tsx` stays within the size/complexity budget.\n */\n\n// Define pulse animation\nconst pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 20px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n/** Style toggles that shape the dialog paper (extracted so each fn stays small). */\ninterface VariantStyleOptions {\n  variant: NonNullable<DialogProps['variant']>;\n  size: NonNullable<DialogProps['size']>;\n  borderRadius: NonNullable<DialogProps['borderRadius']>;\n  glass: boolean;\n  gradient: boolean;\n  glow: boolean;\n  pulse: boolean;\n}\n\nfunction borderRadiusOf(theme: Theme, borderRadius: VariantStyleOptions['borderRadius']) {\n  switch (borderRadius) {\n    case 'none': return 0;\n    case 'sm': return theme.spacing(0.5);\n    case 'md': return theme.spacing(1);\n    case 'xl': return theme.spacing(3);\n    case 'lg':\n    default: return theme.spacing(2);\n  }\n}\n\nfunction maxWidthOf(size: VariantStyleOptions['size']): number {\n  switch (size) {\n    case 'xs': return 400;\n    case 'sm': return 600;\n    case 'lg': return 1000;\n    case 'xl': return 1200;\n    case 'md':\n    default: return 800;\n  }\n}\n\nfunction baseStylesOf(theme: Theme, opts: VariantStyleOptions) {\n  return {\n    borderRadius: borderRadiusOf(theme, opts.borderRadius),\n    maxWidth: maxWidthOf(opts.size),\n    width: '90vw',\n    margin: theme.spacing(2),\n    transition: theme.transitions.create(\n      ['box-shadow', 'background-color', 'backdrop-filter'],\n      { duration: theme.transitions.duration.standard },\n    ),\n  };\n}\n\nfunction glowStylesOf(theme: Theme, glow: boolean) {\n  return glow ? { boxShadow: `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}` } : {};\n}\n\nfunction pulseStylesOf(theme: Theme, pulse: boolean) {\n  if (!pulse) return {};\n  return {\n    position: 'relative' as const,\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute' as const,\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      borderRadius: 'inherit',\n      backgroundColor: theme.palette.primary.main,\n      opacity: 0.3,\n      animation: `${pulseAnimation} 2s infinite`,\n      pointerEvents: 'none' as const,\n      zIndex: -1,\n    },\n  };\n}\n\n/** The default variant's paper: optional gradient/glass over the base styles. */\nfunction defaultVariantStyles(theme: Theme, opts: VariantStyleOptions) {\n  const gradientStyles = opts.gradient\n    ? {\n        background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,\n        backdropFilter: 'blur(10px)',\n      }\n    : {};\n  return {\n    ...gradientStyles,\n    backgroundColor: opts.glass\n      ? alpha(theme.palette.background.paper, 0.1)\n      : theme.palette.background.paper,\n    backdropFilter: opts.glass ? 'blur(20px)' : 'none',\n    border: opts.glass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : 'none',\n  };\n}\n\nexport function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProps<Theme> {\n  const decorations = {\n    ...glowStylesOf(theme, opts.glow),\n    ...pulseStylesOf(theme, opts.pulse),\n  };\n  switch (opts.variant) {\n    case 'glass':\n      return {\n        ...baseStylesOf(theme, opts),\n        ...decorations,\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,\n      };\n    case 'fullscreen':\n      return {\n        borderRadius: 0,\n        margin: 0,\n        width: '100vw',\n        // `100dvh`, not `100vh` — see `dynamicViewportHeight`.\n        ...dynamicViewportHeight('height'),\n        maxWidth: 'none',\n        maxHeight: 'none',\n        ...decorations,\n      };\n    case 'drawer': {\n      const radius = borderRadiusOf(theme, opts.borderRadius);\n      return {\n        borderRadius: `${radius}px 0 0 ${radius}px`,\n        margin: 0,\n        width: maxWidthOf(opts.size),\n        ...dynamicViewportHeight('height'),\n        maxHeight: 'none',\n        position: 'absolute' as const,\n        right: 0,\n        ...decorations,\n      };\n    }\n    default:\n      return {\n        ...baseStylesOf(theme, opts),\n        ...decorations,\n        ...defaultVariantStyles(theme, opts),\n      };\n  }\n}\n\nexport function backdropSxOf(theme: Theme, glass: boolean) {\n  return {\n    backgroundColor: glass\n      ? alpha(theme.palette.common.black, 0.2)\n      : alpha(theme.palette.common.black, 0.5),\n    backdropFilter: glass ? 'blur(8px)' : 'none',\n  };\n}\n\n"],"mappings":"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","names":[]}