@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/Masonry/Masonry.js

@@ -0,0 +1,80 @@
+'use client';
+import { mergeRefs } from "../_internal/refs.js";
+import { balanceColumns, columnsForWidth, distributionsEqual, roundRobinColumns } from "./masonryUtils.js";
+import Masonry_module_default from "./Masonry.module.js";
+import { Children, forwardRef, isValidElement, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/Masonry/Masonry.tsx
+var GAP_PX = {
+	xs: 4,
+	sm: 8,
+	md: 12,
+	lg: 16,
+	xl: 24,
+	"2xl": 32
+};
+var gapClass = {
+	xs: Masonry_module_default.gapXs,
+	sm: Masonry_module_default.gapSm,
+	md: Masonry_module_default.gapMd,
+	lg: Masonry_module_default.gapLg,
+	xl: Masonry_module_default.gapXl,
+	"2xl": Masonry_module_default.gap2xl
+};
+/**
+* Height-balanced masonry layout: packs variable-height children into the shortest column.
+* @see docs/components/Masonry.md
+*/
+var Masonry = forwardRef(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(null);
+	const cellRefs = useRef([]);
+	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(() => 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);
+		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]);
+	const distribution = cols.length === columnCount ? cols : roundRobinColumns(itemCount, columnCount);
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs(ref, rootRef),
+		className: clsx(Masonry_module_default.masonry, gapClass[gap], className),
+		...rest,
+		children: distribution.map((indices, col) => /* @__PURE__ */ jsx("div", {
+			className: clsx(Masonry_module_default.column, gapClass[gap]),
+			children: indices.map((i) => /* @__PURE__ */ jsx("div", {
+				className: Masonry_module_default.cell,
+				ref: (el) => {
+					cellRefs.current[i] = el;
+				},
+				children: items[i]
+			}, i))
+		}, col))
+	});
+});
+export { Masonry };

package/dist/components/Masonry/Masonry.module.js

@@ -0,0 +1,23 @@
+import "./Masonry.css";
+// src/components/Masonry/Masonry.module.scss
+var masonry = "Masonry__masonry__4Bpa1";
+var column = "Masonry__column__d6OUq";
+var cell = "Masonry__cell__buC-d";
+var gapXs = "Masonry__gapXs__GFa6c";
+var gapSm = "Masonry__gapSm__6doll";
+var gapMd = "Masonry__gapMd__LOzyZ";
+var gapLg = "Masonry__gapLg__5HffX";
+var gapXl = "Masonry__gapXl__krXvp";
+var gap2xl = "Masonry__gap2xl__-lFX0";
+var Masonry_module_default = {
+	masonry,
+	column,
+	cell,
+	gapXs,
+	gapSm,
+	gapMd,
+	gapLg,
+	gapXl,
+	gap2xl
+};
+export { cell, column, Masonry_module_default as default, gap2xl, gapLg, gapMd, gapSm, gapXl, gapXs, masonry };

package/dist/components/Masonry/index.d.ts

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

package/dist/components/Masonry/masonryUtils.d.ts

@@ -0,0 +1,8 @@
+/** Greedy shortest-column-first packing. Returns `columnCount` arrays of child indices. */
+export declare function balanceColumns(heights: number[], columnCount: number): number[][];
+/** How many columns of `minColumnPx` (+ `gapPx` between) fit in `width`. Never < 1. */
+export declare function columnsForWidth(width: number, minColumnPx: number, gapPx: number): number;
+/** Index-order distribution across columns (the pre-measure / SSR first paint). */
+export declare function roundRobinColumns(itemCount: number, columnCount: number): number[][];
+/** Deep-equal two column distributions (used to skip no-op state updates). */
+export declare function distributionsEqual(a: number[][], b: number[][]): boolean;

package/dist/components/Masonry/masonryUtils.js

@@ -0,0 +1,36 @@
+// src/components/Masonry/masonryUtils.ts
+/** Greedy shortest-column-first packing. Returns `columnCount` arrays of child indices. */
+function balanceColumns(heights, columnCount) {
+	const cols = Math.max(1, Math.floor(columnCount));
+	const out = Array.from({ length: cols }, () => []);
+	const colHeights = new Array(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. */
+function columnsForWidth(width, minColumnPx, gapPx) {
+	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). */
+function roundRobinColumns(itemCount, columnCount) {
+	const cols = Math.max(1, Math.floor(columnCount));
+	const out = 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). */
+function distributionsEqual(a, b) {
+	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;
+}
+export { balanceColumns, columnsForWidth, distributionsEqual, roundRobinColumns };

package/dist/components/MediaTile/MediaTile.css

@@ -0,0 +1,204 @@
+:root {
+  --mediatile-radius-none: 0;
+  --mediatile-radius-sm: var(--radius-sm);
+  --mediatile-radius-md: var(--radius-md);
+  --mediatile-radius-lg: var(--radius-lg);
+  --mediatile-scrim: rgb(15 23 42 / 72%);
+  --mediatile-fg: var(--color-fg-on-overlay);
+  --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);
+  --mediatile-opacity-hidden: var(--opacity-hidden);
+  --mediatile-opacity-shown: var(--opacity-visible);
+  --mediatile-scrim-top: linear-gradient(to bottom, var(--mediatile-scrim), transparent);
+  --mediatile-scrim-bottom: linear-gradient(to top, var(--mediatile-scrim), transparent);
+  --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);
+  --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);
+  --mediatile-chip-shadow: var(--shadow-sm);
+  --mediatile-control-bar-divider: var(--color-border);
+  --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)
+  );
+  --mediatile-selected-ring: var(--color-accent);
+  --mediatile-selected-ring-width: var(--border-width-emphasis);
+}
+
+.MediaTile__root__eSmgZ {
+  position: relative;
+  overflow: hidden;
+  display: block;
+}
+
+.MediaTile__placement-below__mjEFi {
+  display: flex;
+  flex-direction: column;
+  background: var(--mediatile-surface);
+  border: var(--mediatile-border-width) solid var(--mediatile-border);
+}
+
+.MediaTile__root__eSmgZ[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;
+}
+
+.MediaTile__radius-none__dwhuh {
+  border-radius: var(--mediatile-radius-none);
+}
+
+.MediaTile__radius-sm__w7UNG {
+  border-radius: var(--mediatile-radius-sm);
+}
+
+.MediaTile__radius-md__8uaCy {
+  border-radius: var(--mediatile-radius-md);
+}
+
+.MediaTile__radius-lg__WT6XP {
+  border-radius: var(--mediatile-radius-lg);
+}
+
+.MediaTile__media__1XJUV {
+  position: relative;
+  display: block;
+}
+
+.MediaTile__bar__I1TOe,
+.MediaTile__chip__3048h {
+  position: absolute;
+  opacity: var(--mediatile-opacity-hidden);
+  pointer-events: none;
+  transition: opacity var(--mediatile-reveal-transition);
+}
+
+.MediaTile__bar__I1TOe {
+  inset-inline: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--mediatile-bar-gap);
+  padding: var(--mediatile-bar-padding);
+  color: var(--mediatile-fg);
+}
+
+.MediaTile__barTop__OpDsG {
+  inset-block-start: 0;
+  background: var(--mediatile-scrim-top);
+}
+
+.MediaTile__selectable__TLsxc .MediaTile__barTop__OpDsG {
+  padding-inline-start: var(--mediatile-select-clearance);
+}
+
+.MediaTile__barBottom__VLdxx {
+  inset-block-end: 0;
+  justify-content: center;
+  background: var(--mediatile-scrim-bottom);
+}
+
+.MediaTile__controlBar__XWrtP {
+  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);
+}
+
+.MediaTile__spacer__idfq1 {
+  flex: 1;
+  pointer-events: none;
+}
+
+.MediaTile__controlActions__d-75i {
+  display: flex;
+  align-items: center;
+  gap: var(--mediatile-chip-gap);
+}
+
+.MediaTile__chip__3048h {
+  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);
+}
+
+.MediaTile__select__40gsn {
+  inset-inline-start: var(--mediatile-chip-offset);
+}
+
+.MediaTile__actionsTop__NfxJI {
+  inset-inline-end: var(--mediatile-chip-offset);
+}
+
+.MediaTile__reveal-hover__bAagk:hover :is(.MediaTile__bar__I1TOe, .MediaTile__chip__3048h),
+.MediaTile__reveal-hover__bAagk:focus-within :is(.MediaTile__bar__I1TOe, .MediaTile__chip__3048h),
+.MediaTile__reveal-focus__wiYcP:focus-within :is(.MediaTile__bar__I1TOe, .MediaTile__chip__3048h),
+.MediaTile__reveal-visible__9blzQ :is(.MediaTile__bar__I1TOe, .MediaTile__chip__3048h),
+.MediaTile__root__eSmgZ[data-selected] :is(.MediaTile__select__40gsn, .MediaTile__controlBar__XWrtP) {
+  opacity: var(--mediatile-opacity-shown);
+  pointer-events: auto;
+}
+
+@media (hover: none) {
+  .MediaTile__reveal-hover__bAagk :is(.MediaTile__bar__I1TOe, .MediaTile__chip__3048h) {
+    opacity: var(--mediatile-opacity-shown);
+    pointer-events: auto;
+  }
+}
+.MediaTile__caption__5eod3 {
+  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);
+}
+
+.MediaTile__title__kupuc {
+  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);
+}
+
+.MediaTile__meta__C_Mnc {
+  flex: none;
+  font-size: var(--mediatile-meta-size);
+  opacity: var(--mediatile-meta-opacity);
+}
+
+.MediaTile__caption__5eod3 .MediaTile__meta__C_Mnc {
+  color: var(--mediatile-caption-meta-fg);
+  opacity: var(--mediatile-opacity-shown);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .MediaTile__bar__I1TOe,
+  .MediaTile__chip__3048h {
+    transition: none;
+  }
+}

package/dist/components/MediaTile/MediaTile.d.ts

@@ -0,0 +1,81 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** 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;
+}
+/**
+ * Gallery / file-grid tile: full-bleed media with a title/meta caption, revealed actions and optional selection.
+ * @see docs/components/MediaTile.md
+ */
+export declare const MediaTile: import("react").ForwardRefExoticComponent<MediaTileProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/MediaTile/MediaTile.js

@@ -0,0 +1,81 @@
+'use client';
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import MediaTile_module_default from "./MediaTile.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/MediaTile/MediaTile.tsx
+var stop = (e) => e.stopPropagation();
+var stopFromChild = (e) => {
+	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
+*/
+var MediaTile = forwardRef(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 = /* @__PURE__ */ jsx(Checkbox, {
+		checked: isSelected,
+		onChange: (next) => onSelectedChange?.(next),
+		"aria-label": selectLabel || (typeof title === "string" && title ? t("mediaTile.selectNamed", { name: title }) : t("mediaTile.select"))
+	});
+	const caption = /* @__PURE__ */ jsxs(Fragment$1, { children: [title != null && /* @__PURE__ */ jsx("span", {
+		className: MediaTile_module_default.title,
+		children: title
+	}), meta != null && /* @__PURE__ */ jsx("span", {
+		className: MediaTile_module_default.meta,
+		children: meta
+	})] });
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: clsx(MediaTile_module_default.root, below && MediaTile_module_default["placement-below"], MediaTile_module_default[`radius-${radius}`], MediaTile_module_default[`reveal-${revealOn}`], selectable && MediaTile_module_default.selectable, className),
+		"data-selected": isSelected || void 0,
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: MediaTile_module_default.media,
+			children: [
+				media,
+				!below && hasCaption && /* @__PURE__ */ jsx("div", {
+					className: clsx(MediaTile_module_default.bar, MediaTile_module_default.barTop),
+					children: caption
+				}),
+				bar ? (selectable || actions != null) && /* @__PURE__ */ jsxs("div", {
+					className: clsx(MediaTile_module_default.bar, MediaTile_module_default.controlBar),
+					onClick: (e) => {
+						e.stopPropagation();
+						if (selectable && e.target === e.currentTarget) onSelectedChange?.(!isSelected);
+					},
+					onKeyDown: stop,
+					children: [
+						selectable && checkbox,
+						/* @__PURE__ */ jsx("span", { className: MediaTile_module_default.spacer }),
+						actions != null && /* @__PURE__ */ jsx("div", {
+							className: MediaTile_module_default.controlActions,
+							children: actions
+						})
+					]
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [selectable && /* @__PURE__ */ jsx("div", {
+					className: clsx(MediaTile_module_default.chip, MediaTile_module_default.select),
+					onClick: stop,
+					onKeyDown: stop,
+					children: checkbox
+				}), actions != null && /* @__PURE__ */ jsx("div", {
+					className: below ? clsx(MediaTile_module_default.chip, MediaTile_module_default.actionsTop) : clsx(MediaTile_module_default.bar, MediaTile_module_default.barBottom),
+					onClick: below ? stop : stopFromChild,
+					onKeyDown: below ? stop : stopFromChild,
+					children: actions
+				})] })
+			]
+		}), below && hasCaption && /* @__PURE__ */ jsx("div", {
+			className: MediaTile_module_default.caption,
+			children: caption
+		})]
+	});
+});
+export { MediaTile };

package/dist/components/MediaTile/MediaTile.module.js

@@ -0,0 +1,43 @@
+import "./MediaTile.css";
+// src/components/MediaTile/MediaTile.module.scss
+var root = "MediaTile__root__eSmgZ";
+var media = "MediaTile__media__1XJUV";
+var bar = "MediaTile__bar__I1TOe";
+var chip = "MediaTile__chip__3048h";
+var barTop = "MediaTile__barTop__OpDsG";
+var selectable = "MediaTile__selectable__TLsxc";
+var barBottom = "MediaTile__barBottom__VLdxx";
+var controlBar = "MediaTile__controlBar__XWrtP";
+var spacer = "MediaTile__spacer__idfq1";
+var controlActions = "MediaTile__controlActions__d-75i";
+var select = "MediaTile__select__40gsn";
+var actionsTop = "MediaTile__actionsTop__NfxJI";
+var caption = "MediaTile__caption__5eod3";
+var title = "MediaTile__title__kupuc";
+var meta = "MediaTile__meta__C_Mnc";
+var MediaTile_module_default = {
+	root,
+	"placement-below": "MediaTile__placement-below__mjEFi",
+	"radius-none": "MediaTile__radius-none__dwhuh",
+	"radius-sm": "MediaTile__radius-sm__w7UNG",
+	"radius-md": "MediaTile__radius-md__8uaCy",
+	"radius-lg": "MediaTile__radius-lg__WT6XP",
+	media,
+	bar,
+	chip,
+	barTop,
+	selectable,
+	barBottom,
+	controlBar,
+	spacer,
+	controlActions,
+	select,
+	actionsTop,
+	"reveal-hover": "MediaTile__reveal-hover__bAagk",
+	"reveal-focus": "MediaTile__reveal-focus__wiYcP",
+	"reveal-visible": "MediaTile__reveal-visible__9blzQ",
+	caption,
+	title,
+	meta
+};
+export { actionsTop, bar, barBottom, barTop, caption, chip, controlActions, controlBar, MediaTile_module_default as default, media, meta, root, select, selectable, spacer, title };

package/dist/components/MediaTile/index.d.ts

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

package/dist/components/Modal/Body.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from 'react';
+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 declare const Body: import("react").ForwardRefExoticComponent<ModalBodyProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/Body.js

@@ -0,0 +1,19 @@
+'use client';
+import Modal_module_default from "./Modal.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/Modal/Body.tsx
+/**
+* Scrollable content area between the Header and Footer; `padding="none"` for edge-to-edge content.
+* @see docs/components/Modal.md
+*/
+var Body = forwardRef(function Body({ padding = "default", className, children, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: clsx(Modal_module_default.body, padding === "none" && Modal_module_default.bodyPaddingNone, className),
+		...rest,
+		children
+	});
+});
+export { Body };

package/dist/components/Modal/Close.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement } from 'react';
+export interface ModalCloseProps {
+    /**
+     * Exactly one React element. Close clones this element to inject an
+     * `onClick` that closes the modal, chained with the child's existing
+     * `onClick` (consumer runs first).
+     */
+    children: ReactElement;
+}
+/**
+ * Wraps a single clickable element so activating it closes the modal (`Modal.Close`).
+ * @see docs/components/Modal.md
+ */
+export declare function Close({ children }: ModalCloseProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/Modal/Close.js

@@ -0,0 +1,19 @@
+'use client';
+import { useModalContext } from "./context.js";
+import { chain } from "../_internal/refs.js";
+import { cloneElement, isValidElement, useCallback } from "react";
+// src/components/Modal/Close.tsx
+/**
+* Wraps a single clickable element so activating it closes the modal (`Modal.Close`).
+* @see docs/components/Modal.md
+*/
+function Close({ children }) {
+	const ctx = useModalContext("Close");
+	if (!isValidElement(children)) throw new Error("<Modal.Close> requires exactly one React element child.");
+	const childProps = children.props;
+	const handleClick = useCallback((_e) => {
+		ctx.setOpen(false);
+	}, [ctx]);
+	return cloneElement(children, { onClick: chain(childProps.onClick, handleClick) });
+}
+export { Close };

package/dist/components/Modal/Content.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface ContentProps {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Dialog container. `role="dialog"`, `aria-modal="true"`, tabIndex=-1 so
+ * the focus trap can take over. Owns:
+ * - Initial focus on open (either initialFocusRef or the container itself).
+ * - Focus trap (active only when this modal is top of the stack).
+ * - Escape capture-phase listener (also gated by isTop).
+ * - Renders the compound children (Header/Body/Footer/Close) inside the dialog.
+ */
+export declare function Content({ children, className, style }: ContentProps): import("react").JSX.Element;