@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/Masonry/Masonry.tsx

@@ -0,0 +1,136 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import clsx from 'clsx';
+import { mergeRefs } from '../_internal/refs';
+import {
+  balanceColumns,
+  columnsForWidth,
+  distributionsEqual,
+  roundRobinColumns,
+} from './masonryUtils';
+import styles from './Masonry.module.scss';
+
+/** Gap between columns and between items. Same token scale as Grid/Stack. */
+export type MasonryGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+// Pixel value of each gap token (mirrors --space-1/2/3/4/6/8). Used only for
+// the responsive column-count math; the rendered gap uses the token classes.
+const GAP_PX: Record<MasonryGap, number> = { xs: 4, sm: 8, md: 12, lg: 16, xl: 24, '2xl': 32 };
+
+const gapClass: Record<MasonryGap, string> = {
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  md: styles.gapMd,
+  lg: styles.gapLg,
+  xl: styles.gapXl,
+  '2xl': styles.gap2xl,
+};
+
+interface MasonryBaseProps {
+  /** `xs`(4) / `sm`(8) / `md`(12, default) / `lg`(16) / `xl`(24) / `2xl`(32). */
+  gap?: MasonryGap;
+  children?: ReactNode;
+}
+interface MasonryFixedColumns extends MasonryBaseProps, HTMLAttributes<HTMLDivElement> {
+  /** Fixed number of columns. Mutually exclusive with `minColumnWidth`. */
+  columns: number;
+  minColumnWidth?: never;
+}
+interface MasonryResponsive extends MasonryBaseProps, HTMLAttributes<HTMLDivElement> {
+  /** Min column width (px) for a responsive column count. Default `'240px'`. */
+  minColumnWidth?: string;
+  columns?: never;
+}
+export type MasonryProps = MasonryFixedColumns | MasonryResponsive;
+
+/**
+ * Height-balanced masonry layout: packs variable-height children into the shortest column.
+ * @see docs/components/Masonry.md
+ */
+export const Masonry = forwardRef<HTMLDivElement, MasonryProps>(function Masonry(
+  { gap = 'md', columns, minColumnWidth, className, children, ...rest },
+  ref,
+) {
+  const items = useMemo(() => Children.toArray(children).filter(isValidElement), [children]);
+  const itemCount = items.length;
+
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const cellRefs = useRef<Array<HTMLDivElement | null>>([]);
+
+  const parsedMinCol = minColumnWidth != null ? parseFloat(minColumnWidth) : NaN;
+  const minColPx = Number.isFinite(parsedMinCol) && parsedMinCol > 0 ? parsedMinCol : 240;
+  const fixedColumnCount = columns != null ? Math.max(1, Math.floor(columns)) : null;
+  const initialCount = fixedColumnCount ?? 1;
+
+  const [columnCount, setColumnCount] = useState(initialCount);
+  const [cols, setCols] = useState<number[][]>(() => roundRobinColumns(itemCount, initialCount));
+
+  const recompute = useCallback(() => {
+    const nextCount =
+      fixedColumnCount ?? columnsForWidth(rootRef.current?.offsetWidth ?? 0, minColPx, GAP_PX[gap]);
+    const heights = Array.from(
+      { length: itemCount },
+      (_, i) => cellRefs.current[i]?.getBoundingClientRect().height ?? 0,
+    );
+    // Before any real measurement (all heights 0 — e.g. unsized images mid-load),
+    // keep the round-robin distribution instead of collapsing into column 0.
+    const next =
+      itemCount > 0 && heights.every((h) => h === 0)
+        ? roundRobinColumns(itemCount, nextCount)
+        : balanceColumns(heights, nextCount);
+    setColumnCount((prev) => (prev === nextCount ? prev : nextCount));
+    setCols((prev) => (distributionsEqual(prev, next) ? prev : next));
+  }, [fixedColumnCount, minColPx, gap, itemCount]);
+
+  useLayoutEffect(() => {
+    recompute();
+    if (typeof ResizeObserver === 'undefined') return;
+    const ro = new ResizeObserver(() => recompute());
+    if (rootRef.current) ro.observe(rootRef.current);
+    for (let i = 0; i < itemCount; i++) {
+      const el = cellRefs.current[i];
+      if (el) ro.observe(el);
+    }
+    return () => ro.disconnect();
+  }, [recompute, itemCount]);
+
+  // Guard against a transient columnCount/distribution mismatch (the frame
+  // between the two setState calls): fall back to round-robin for that render.
+  const distribution =
+    cols.length === columnCount ? cols : roundRobinColumns(itemCount, columnCount);
+
+  return (
+    <div
+      // {...rest} last so consumer className overrides are still possible via className merge
+      ref={mergeRefs(ref, rootRef)}
+      className={clsx(styles.masonry, gapClass[gap], className)}
+      {...rest}
+    >
+      {distribution.map((indices, col) => (
+        <div key={col} className={clsx(styles.column, gapClass[gap])}>
+          {indices.map((i) => (
+            <div
+              key={i}
+              className={styles.cell}
+              ref={(el) => {
+                cellRefs.current[i] = el;
+              }}
+            >
+              {items[i]}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/components/Masonry/index.ts

@@ -0,0 +1,2 @@
+export { Masonry } from './Masonry';
+export type { MasonryProps, MasonryGap } from './Masonry';

package/src/components/Masonry/masonryUtils.ts

@@ -0,0 +1,42 @@
+/** Greedy shortest-column-first packing. Returns `columnCount` arrays of child indices. */
+export function balanceColumns(heights: number[], columnCount: number): number[][] {
+  const cols = Math.max(1, Math.floor(columnCount));
+  const out: number[][] = Array.from({ length: cols }, () => []);
+  const colHeights = new Array<number>(cols).fill(0);
+  heights.forEach((h, i) => {
+    let min = 0;
+    for (let c = 1; c < cols; c++) {
+      if (colHeights[c] < colHeights[min]) min = c;
+    }
+    out[min].push(i);
+    colHeights[min] += h;
+  });
+  return out;
+}
+
+/** How many columns of `minColumnPx` (+ `gapPx` between) fit in `width`. Never < 1. */
+export function columnsForWidth(width: number, minColumnPx: number, gapPx: number): number {
+  if (!Number.isFinite(width) || !Number.isFinite(minColumnPx) || width <= 0 || minColumnPx <= 0)
+    return 1;
+  return Math.max(1, Math.floor((width + gapPx) / (minColumnPx + gapPx)));
+}
+
+/** Index-order distribution across columns (the pre-measure / SSR first paint). */
+export function roundRobinColumns(itemCount: number, columnCount: number): number[][] {
+  const cols = Math.max(1, Math.floor(columnCount));
+  const out: number[][] = Array.from({ length: cols }, () => []);
+  for (let i = 0; i < itemCount; i++) out[i % cols].push(i);
+  return out;
+}
+
+/** Deep-equal two column distributions (used to skip no-op state updates). */
+export function distributionsEqual(a: number[][], b: number[][]): boolean {
+  if (a.length !== b.length) return false;
+  for (let c = 0; c < a.length; c++) {
+    if (a[c].length !== b[c].length) return false;
+    for (let i = 0; i < a[c].length; i++) {
+      if (a[c][i] !== b[c][i]) return false;
+    }
+  }
+  return true;
+}

package/src/components/MediaTile/MediaTile.module.scss

@@ -0,0 +1,183 @@
+@use './MediaTile.tokens';
+
+// Rule 4 note: the `position: relative/absolute` + `inset-*` + `flex` below are the
+// component's OWN internal overlay layout (the revealed bars and chips over the
+// media), not consumer-facing layout — the same overlay-child exception Image/Modal use.
+
+.root {
+  position: relative; // internal anchor for the selected ring (::after)
+  overflow: hidden;
+  display: block;
+}
+
+.placement-below {
+  display: flex;
+  flex-direction: column;
+  background: var(--mediatile-surface);
+  border: var(--mediatile-border-width) solid var(--mediatile-border);
+}
+
+// Inset ring on a last-in-tree positioned ::after, so it paints ABOVE the
+// positioned media (an outline on .root would sit under it). Never affects
+// layout, is not clipped by a scrolling grid parent, and ignores the pointer.
+.root[data-selected]::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 var(--mediatile-selected-ring-width) var(--mediatile-selected-ring);
+  pointer-events: none;
+}
+
+.radius-none {
+  border-radius: var(--mediatile-radius-none);
+}
+
+.radius-sm {
+  border-radius: var(--mediatile-radius-sm);
+}
+
+.radius-md {
+  border-radius: var(--mediatile-radius-md);
+}
+
+.radius-lg {
+  border-radius: var(--mediatile-radius-lg);
+}
+
+// Anchor for every overlay (bars, chips) — in both placements.
+.media {
+  position: relative;
+  display: block;
+}
+
+// Revealable overlays: the overlay-placement bars and the chips.
+.bar,
+.chip {
+  position: absolute;
+  opacity: var(--mediatile-opacity-hidden);
+  pointer-events: none;
+  transition: opacity var(--mediatile-reveal-transition);
+}
+
+.bar {
+  inset-inline: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--mediatile-bar-gap);
+  padding: var(--mediatile-bar-padding);
+  color: var(--mediatile-fg);
+}
+
+.barTop {
+  inset-block-start: 0;
+  background: var(--mediatile-scrim-top);
+}
+
+.selectable .barTop {
+  padding-inline-start: var(--mediatile-select-clearance);
+}
+
+.barBottom {
+  inset-block-end: 0;
+  justify-content: center;
+  background: var(--mediatile-scrim-bottom);
+}
+
+// controls="bar": one full-width solid control strip across the top of the media.
+.controlBar {
+  inset-block-start: 0;
+  color: var(--mediatile-chip-fg);
+  background: var(--mediatile-chip-bg);
+  border-block-end: var(--mediatile-border-width) solid var(--mediatile-control-bar-divider);
+}
+
+// Pushes the actions to the end. Ignores the pointer so a click on the free space
+// lands on .controlBar itself (which toggles selection).
+.spacer {
+  flex: 1;
+  pointer-events: none;
+}
+
+.controlActions {
+  display: flex;
+  align-items: center;
+  gap: var(--mediatile-chip-gap);
+}
+
+.chip {
+  inset-block-start: var(--mediatile-chip-offset);
+  display: flex;
+  align-items: center;
+  gap: var(--mediatile-chip-gap);
+  padding: var(--mediatile-chip-padding);
+  color: var(--mediatile-chip-fg);
+  background: var(--mediatile-chip-bg);
+  border-radius: var(--mediatile-chip-radius);
+  box-shadow: var(--mediatile-chip-shadow);
+}
+
+.select {
+  inset-inline-start: var(--mediatile-chip-offset);
+}
+
+.actionsTop {
+  inset-inline-end: var(--mediatile-chip-offset);
+}
+
+// Reveal models — selected by the `reveal-*` modifier class on the root.
+// A checked checkbox (selected tile) always shows.
+.reveal-hover:hover :is(.bar, .chip),
+.reveal-hover:focus-within :is(.bar, .chip),
+.reveal-focus:focus-within :is(.bar, .chip),
+.reveal-visible :is(.bar, .chip),
+.root[data-selected] :is(.select, .controlBar) {
+  opacity: var(--mediatile-opacity-shown);
+  pointer-events: auto;
+}
+
+// Touch devices can't hover: 'hover' degrades to 'visible' so the controls are reachable.
+@media (hover: none) {
+  .reveal-hover :is(.bar, .chip) {
+    opacity: var(--mediatile-opacity-shown);
+    pointer-events: auto;
+  }
+}
+
+// captionPlacement="below": solid, always-visible caption bar.
+.caption {
+  display: flex;
+  align-items: center;
+  gap: var(--mediatile-bar-gap);
+  padding: var(--mediatile-bar-padding);
+  color: var(--mediatile-caption-fg);
+  background: var(--mediatile-caption-bg);
+}
+
+.title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: var(--mediatile-title-size);
+  font-weight: var(--mediatile-title-weight);
+}
+
+.meta {
+  flex: none;
+  font-size: var(--mediatile-meta-size);
+  opacity: var(--mediatile-meta-opacity);
+}
+
+.caption .meta {
+  color: var(--mediatile-caption-meta-fg);
+  opacity: var(--mediatile-opacity-shown);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bar,
+  .chip {
+    transition: none;
+  }
+}

package/src/components/MediaTile/MediaTile.tokens.scss

@@ -0,0 +1,60 @@
+:root {
+  --mediatile-radius-none: 0;
+  --mediatile-radius-sm: var(--radius-sm);
+  --mediatile-radius-md: var(--radius-md);
+  --mediatile-radius-lg: var(--radius-lg);
+
+  // Semi-opaque slate scrim behind the bars (fades to transparent toward the center).
+  --mediatile-scrim: rgb(15 23 42 / 72%);
+  --mediatile-fg: var(--color-fg-on-overlay); // text/controls on the scrim
+
+  --mediatile-bar-gap: var(--space-2);
+  --mediatile-bar-padding: var(--space-2);
+  --mediatile-reveal-transition: var(--transition-fast);
+
+  --mediatile-title-size: var(--font-size-sm);
+  --mediatile-title-weight: var(--font-weight-semibold);
+  --mediatile-meta-size: var(--font-size-xs);
+  --mediatile-meta-opacity: var(--opacity-muted);
+
+  // Opacity states for the reveal animation.
+  --mediatile-opacity-hidden: var(--opacity-hidden);
+  --mediatile-opacity-shown: var(--opacity-visible);
+
+  // Gradient scrims for the top and bottom bars.
+  --mediatile-scrim-top: linear-gradient(to bottom, var(--mediatile-scrim), transparent);
+  --mediatile-scrim-bottom: linear-gradient(to top, var(--mediatile-scrim), transparent);
+
+  // captionPlacement="below": the tile reads as a card — surface + hairline border,
+  // and a solid caption bar in normal text colour under the media.
+  --mediatile-surface: var(--color-bg);
+  --mediatile-border: var(--color-border);
+  --mediatile-border-width: var(--border-width);
+  --mediatile-caption-bg: var(--color-bg);
+  --mediatile-caption-fg: var(--color-fg);
+  --mediatile-caption-meta-fg: var(--color-fg-muted);
+
+  // Surface-coloured chips over the media (selection checkbox, top-right actions),
+  // so the controls stay visible over any image, light or dark.
+  --mediatile-chip-bg: var(--color-bg);
+  --mediatile-chip-fg: var(--color-fg);
+  --mediatile-chip-radius: var(--radius-sm);
+  --mediatile-chip-padding: var(--space-1);
+  --mediatile-chip-gap: var(--space-1);
+  --mediatile-chip-offset: var(--space-2); // inset from the media's corner
+  --mediatile-chip-shadow: var(--shadow-sm);
+
+  // controls="bar": the strip uses the chip surface, with a hairline below it.
+  --mediatile-control-bar-divider: var(--color-border);
+
+  // Overlay placement + selectable: the top bar's inline-start padding clears the
+  // checkbox chip (offset + chip, i.e. md checkbox box + chip padding, + gap).
+  --mediatile-select-chip-size: calc(var(--size-checkbox-md) + 2 * var(--mediatile-chip-padding));
+  --mediatile-select-clearance: calc(
+    var(--mediatile-chip-offset) + var(--mediatile-select-chip-size) + var(--mediatile-bar-gap)
+  );
+
+  // Selected tile: inset accent ring (::after box-shadow, so it never affects layout).
+  --mediatile-selected-ring: var(--color-accent);
+  --mediatile-selected-ring-width: var(--border-width-emphasis);
+}

package/src/components/MediaTile/MediaTile.tsx

@@ -0,0 +1,208 @@
+import { forwardRef, type HTMLAttributes, type ReactNode, type SyntheticEvent } from 'react';
+import clsx from 'clsx';
+import { Checkbox } from '../Checkbox';
+import { useTranslation } from '../../i18n/useTranslation';
+import styles from './MediaTile.module.scss';
+
+/** When the overlay bars / controls reveal. */
+export type MediaTileReveal = 'hover' | 'focus' | 'visible';
+/** Corner rounding (clips the media). */
+export type MediaTileRadius = 'none' | 'sm' | 'md' | 'lg';
+/** Where `title` + `meta` render: over the media, or in a solid bar below it. */
+export type MediaTileCaptionPlacement = 'overlay' | 'below';
+/** How the selection checkbox + actions are presented in `captionPlacement="below"`. */
+export type MediaTileControls = 'chips' | 'bar';
+
+export interface MediaTileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+  /** Tile body — full-bleed media (an `<Image>`, or a centered file-type icon). */
+  media: ReactNode;
+  /** Caption leading content (e.g. the file name). Truncates with an ellipsis. */
+  title?: ReactNode;
+  /** Caption trailing content (e.g. the file size). Sits at the end of the row. */
+  meta?: ReactNode;
+  /**
+   * Tile controls (e.g. preview / download / delete icon buttons). With
+   * `captionPlacement="overlay"` they sit in a centered bottom bar over a scrim;
+   * with `"below"` they sit in a top-right cluster over the media. Either way they
+   * follow `revealOn`. Clicks and keydowns on the controls inside don't bubble to the tile (in overlay placement a click on the bar's empty scrim still does; the below-placement chip swallows all clicks), so a
+   * tile `onClick` (e.g. open preview) never fires from an action.
+   */
+  actions?: ReactNode;
+  /**
+   * Where `title` + `meta` render. Default `'overlay'`.
+   * - `'overlay'` — a top bar over a gradient scrim on the media, revealed per `revealOn`.
+   *   Compact, but the name is hidden at rest for mouse users.
+   * - `'below'` — a solid bar under the media in normal text colour, ALWAYS visible
+   *   (not affected by `revealOn`). Use for file grids where the name must be readable.
+   */
+  captionPlacement?: MediaTileCaptionPlacement;
+  /**
+   * How the selection checkbox and `actions` are presented. Default `'chips'`.
+   * Only applies with `captionPlacement="below"`; ignored in overlay placement.
+   * - `'chips'` — two floating surface chips: checkbox top-left, actions top-right.
+   * - `'bar'` — one full-width solid bar across the top of the media (divider
+   *   below): checkbox at the start, actions at the end. Reads better over busy or
+   *   light images. Follows `revealOn`; the whole bar stays shown while selected.
+   *   When `selectable`, a click on the bar's free space toggles selection (a
+   *   pointer shortcut; the checkbox remains the keyboard control). Clicks and keys
+   *   anywhere in the bar never reach the tile `onClick` — the bar is a control
+   *   region, not the media.
+   */
+  controls?: MediaTileControls;
+  /**
+   * When the overlay bars, `actions` and the selection checkbox reveal. Default `'hover'`.
+   * - `'hover'` — on pointer hover OR keyboard focus-within (focus always included for a11y).
+   *   On touch devices (`(hover: none)`) it behaves like `'visible'`.
+   * - `'focus'` — only on focus-within (no mouse-over reveal).
+   * - `'visible'` — always shown.
+   *
+   * A checked selection checkbox is always shown regardless.
+   */
+  revealOn?: MediaTileReveal;
+  /** Corner rounding (clips the media). Default `'md'`. */
+  radius?: MediaTileRadius;
+  /**
+   * Render a selection checkbox top-left over the media. Default `false`.
+   * Only the checkbox toggles selection — clicking the tile does not (so a tile
+   * `onClick`, e.g. open preview, keeps working; checkbox clicks and keys don't bubble to it).
+   * With `revealOn="focus"` an unselected checkbox is hidden and ignores the
+   * pointer until focus-within, so mouse users can't reach it — pair
+   * `selectable` with `'hover'` or `'visible'`.
+   */
+  selectable?: boolean;
+  /** Controlled selected state (only used when `selectable`). Sets `data-selected` + an accent ring on the tile. Default `false`. */
+  selected?: boolean;
+  /** Fires with the next selected state when the checkbox is toggled. */
+  onSelectedChange?: (next: boolean) => void;
+  /**
+   * Accessible name of the selection checkbox, e.g. `"Select report.pdf"`.
+   * Defaults to the localized "Select {title}" when `title` is a string, else "Select".
+   */
+  selectLabel?: string;
+}
+
+// The tile's own onClick / onKeyDown (e.g. open preview) must not fire from its
+// controls: the checkbox chip and the actions container swallow both.
+const stop = (e: SyntheticEvent) => e.stopPropagation();
+// Overlay actions bar: stop only events from the controls inside it. The bar spans
+// the tile's full width, so a click on its empty scrim still reaches the tile.
+const stopFromChild = (e: SyntheticEvent) => {
+  if (e.target !== e.currentTarget) e.stopPropagation();
+};
+
+/**
+ * Gallery / file-grid tile: full-bleed media with a title/meta caption, revealed actions and optional selection.
+ * @see docs/components/MediaTile.md
+ */
+// {...rest} last (Pattern A) so the consumer can add onClick / data-* to the tile.
+export const MediaTile = forwardRef<HTMLDivElement, MediaTileProps>(function MediaTile(
+  {
+    media,
+    title,
+    meta,
+    actions,
+    captionPlacement = 'overlay',
+    controls = 'chips',
+    revealOn = 'hover',
+    radius = 'md',
+    selectable = false,
+    selected = false,
+    onSelectedChange,
+    selectLabel,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const t = useTranslation();
+  const below = captionPlacement === 'below';
+  const bar = below && controls === 'bar';
+  const hasCaption = title != null || meta != null;
+  const isSelected = selectable && selected;
+  const checkbox = (
+    <Checkbox
+      checked={isSelected}
+      onChange={(next) => onSelectedChange?.(next)}
+      aria-label={
+        selectLabel ||
+        (typeof title === 'string' && title
+          ? t('mediaTile.selectNamed', { name: title })
+          : t('mediaTile.select'))
+      }
+    />
+  );
+  const caption = (
+    <>
+      {title != null && <span className={styles.title}>{title}</span>}
+      {meta != null && <span className={styles.meta}>{meta}</span>}
+    </>
+  );
+
+  return (
+    <div
+      ref={ref}
+      className={clsx(
+        styles.root,
+        below && styles['placement-below'],
+        styles[`radius-${radius}`],
+        styles[`reveal-${revealOn}`],
+        selectable && styles.selectable,
+        className,
+      )}
+      data-selected={isSelected || undefined}
+      {...rest}
+    >
+      <div className={styles.media}>
+        {media}
+
+        {!below && hasCaption && <div className={clsx(styles.bar, styles.barTop)}>{caption}</div>}
+
+        {bar ? (
+          (selectable || actions != null) && (
+            // One control region: nothing in it reaches the tile. A click on its
+            // free space toggles selection (the spacer ignores the pointer, so free
+            // space is always the bar itself).
+            <div
+              className={clsx(styles.bar, styles.controlBar)}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (selectable && e.target === e.currentTarget) onSelectedChange?.(!isSelected);
+              }}
+              onKeyDown={stop}
+            >
+              {selectable && checkbox}
+              <span className={styles.spacer} />
+              {actions != null && <div className={styles.controlActions}>{actions}</div>}
+            </div>
+          )
+        ) : (
+          <>
+            {selectable && (
+              // Stops the checkbox's clicks (label + synthetic input click) and keys reaching the tile.
+              <div className={clsx(styles.chip, styles.select)} onClick={stop} onKeyDown={stop}>
+                {checkbox}
+              </div>
+            )}
+
+            {actions != null && (
+              <div
+                className={
+                  below ? clsx(styles.chip, styles.actionsTop) : clsx(styles.bar, styles.barBottom)
+                }
+                // Below: the chip is a visible pill — a misclick in its padding/gap is
+                // still "on the controls". Overlay: the bar spans the tile, so its empty
+                // scrim is the tile.
+                onClick={below ? stop : stopFromChild}
+                onKeyDown={below ? stop : stopFromChild}
+              >
+                {actions}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {below && hasCaption && <div className={styles.caption}>{caption}</div>}
+    </div>
+  );
+});

package/src/components/MediaTile/index.ts

@@ -0,0 +1,8 @@
+export { MediaTile } from './MediaTile';
+export type {
+  MediaTileProps,
+  MediaTileReveal,
+  MediaTileRadius,
+  MediaTileCaptionPlacement,
+  MediaTileControls,
+} from './MediaTile';

package/src/components/Modal/Body.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import styles from './Modal.module.scss';
+
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+  /** Override body's padding. Default 'default' (--space-4). 'none' for edge-to-edge content. */
+  padding?: 'default' | 'none';
+}
+
+/**
+ * Scrollable content area between the Header and Footer; `padding="none"` for edge-to-edge content.
+ * @see docs/components/Modal.md
+ */
+export const Body = forwardRef<HTMLDivElement, ModalBodyProps>(function Body(
+  { padding = 'default', className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={clsx(styles.body, padding === 'none' && styles.bodyPaddingNone, className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});