@tonycodes-ui/mortar 0.0.0-stage → 0.12.0

package/dist/internal.js

@@ -0,0 +1,332 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Shared building blocks for the kit's components. Internal: nothing here is
+// exported from the package entry, so these can change without a release note.
+import { Fragment, createContext, createElement, useContext, useEffect, useId, useState, cloneElement, isValidElement, } from "react";
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
+import { KitLink } from "./navigation.js";
+import { ActionLink, Button } from "./primitives.js";
+import { headingTag } from "./heading.js";
+/**
+ * Names a catalogue component on its root: spread it on the outermost element
+ * the component renders, `<nav {...componentRoot("Pagination")}>`. A dialog
+ * marks its dialog root (portalled), and a component that renders sibling
+ * elements marks the first one it always renders. Pass `root = false` when
+ * this element is not the outermost one for the current props, e.g. a wrapper
+ * then takes the name. The attribute is a hook for tests and consumers, not
+ * for styling; the only selector on it is the internal Prose boundary.
+ */
+export function componentRoot(name, root = true) {
+    return { "data-m-component": root ? name : undefined };
+}
+const ComponentRootContext = createContext(undefined);
+/**
+ * Renders `children`, one `of` component, as the root of the component `name`:
+ * that root then carries `name` (SearchDialog renders a CommandPalette). Only
+ * an `of` component that reads `useComponentName` takes the name, so keep the
+ * same kind of component out of its slots.
+ */
+export function AsComponentRoot({ name, of, children, }) {
+    return (_jsx(ComponentRootContext.Provider, { value: { name, of }, children: children }));
+}
+/**
+ * The root name of a component that another can render as its root: `name`,
+ * or the outer component's name inside its `AsComponentRoot`.
+ */
+export function useComponentName(name) {
+    const outer = useContext(ComponentRootContext);
+    return outer?.of === name ? outer.name : name;
+}
+/** Joins the truthy class names with single spaces. */
+export function cx(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+/**
+ * The eyebrow, heading and description that open a section, as three child
+ * slots. Spread them (`{...introSlots(props)}`) when consumer content follows
+ * in the same parent: React derives useId values from each child's position,
+ * so keeping the slots flat keeps the ids of that content unchanged.
+ */
+export function introSlots({ eyebrow, title, emphasis, description, id, headingLevel = 2, descriptionClassName = "m-section-description", }) {
+    const Heading = headingTag(headingLevel);
+    return [
+        eyebrow && _jsx("p", { className: "m-eyebrow", children: eyebrow }),
+        title !== undefined && (_jsx(Heading, { id: id, children: emphasise(title, emphasis) })),
+        description && (_jsx("p", { className: descriptionClassName ?? undefined, children: description })),
+    ];
+}
+/** `title` with the first occurrence of `phrase` in `<em>`; unchanged when absent. */
+function emphasise(title, phrase) {
+    const at = phrase ? title.indexOf(phrase) : -1;
+    if (!phrase || at < 0)
+        return title;
+    return (_jsxs(_Fragment, { children: [title.slice(0, at), _jsx("em", { className: "m-emphasis", children: phrase }), title.slice(at + phrase.length)] }));
+}
+/** The section intro as one element, for parents where nothing user-supplied follows it. */
+export function SectionIntro(props) {
+    return _jsxs(_Fragment, { children: [...introSlots(props)] });
+}
+/** A row of link actions: the first primary, the rest secondary. */
+export function ActionLinks({ actions }) {
+    return (_jsx("div", { className: "m-actions", children: actions.map((action, i) => (_jsx(ActionLink, { ...action, variant: i === 0 ? "primary" : "secondary" }, `${action.label}:${action.href}:${i}`))) }));
+}
+/** A description list whose terms each sit in a div with their details. */
+export function TermList({ items, children, ...props }) {
+    // createElement keeps each element's child count the same as the hand-written
+    // lists this replaced (no empty `after` or `children` slot), so useId values
+    // inside the details do not move.
+    const rows = items.map((item) => createElement("div", { key: item.key ?? String(item.term), ...item.attributes }, _jsx("dt", { children: item.term }), _jsx("dd", { children: item.details }), ...("after" in item ? [item.after] : [])));
+    return createElement("dl", props, rows, ...(children === undefined ? [] : [children]));
+}
+/**
+ * Icon, label and count inside a navigation link or tab. `prefix` picks the
+ * class family (`m-nav-*` or `m-tab-*`). A count shows whenever it is defined.
+ */
+export function LinkContent({ prefix, label, icon, count, marker = false, }) {
+    const glyph = (_jsx("span", { className: `m-${prefix}-icon`, "aria-hidden": "true", children: icon }));
+    // createElement keeps a fixed child count, so useId values inside a
+    // consumer's icon stay put.
+    return createElement(Fragment, null, marker ? (icon ? (glyph) : (_jsx("span", { className: "m-nav-marker", "aria-hidden": "true" }))) : (icon && glyph), label, count !== undefined && _jsx("span", { className: `m-${prefix}-count`, children: count }));
+}
+/** A generated id that is safe in CSS selectors and URL fragments. */
+export function useDomId(prefix) {
+    return prefix + useId().replace(/[^a-zA-Z0-9-]/g, "");
+}
+/**
+ * Shared pause and resume for decorative motion. It plays only while the
+ * user has not paused it, reduced motion is not requested, the document is
+ * visible and `ref` is on screen. The user's pause is kept apart from the
+ * automatic reasons, so returning to the page never overrides it. `paused`
+ * and `onPausedChange` make the user's choice controlled, for example one
+ * state shared by several animations. Every listener is removed on unmount.
+ */
+export function usePlayback(ref, { paused, onPausedChange, enabled = true, }) {
+    const [ownPaused, setOwnPaused] = useState(false);
+    const [reduced, setReduced] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    const [offscreen, setOffscreen] = useState(false);
+    const userPaused = paused ?? ownPaused;
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const onMedia = () => setReduced(media.matches);
+        const onVisibility = () => setHidden(document.visibilityState === "hidden");
+        onMedia();
+        onVisibility();
+        media.addEventListener("change", onMedia);
+        document.addEventListener("visibilitychange", onVisibility);
+        const observer = ref.current && typeof IntersectionObserver !== "undefined"
+            ? new IntersectionObserver(([entry]) => setOffscreen(!entry.isIntersecting))
+            : null;
+        if (observer && ref.current)
+            observer.observe(ref.current);
+        return () => {
+            media.removeEventListener("change", onMedia);
+            document.removeEventListener("visibilitychange", onVisibility);
+            observer?.disconnect();
+        };
+    }, [enabled, ref]);
+    const reason = userPaused
+        ? "user"
+        : reduced
+            ? "motion"
+            : hidden
+                ? "hidden"
+                : offscreen
+                    ? "offscreen"
+                    : null;
+    const toggle = () => {
+        const next = !userPaused;
+        if (paused === undefined)
+            setOwnPaused(next);
+        onPausedChange?.(next);
+    };
+    return { reason, reduced, userPaused, toggle };
+}
+/**
+ * Next index for arrow, Home and End keys in a horizontal set (wrapping), or
+ * null for any other key.
+ */
+export function rovingIndex(key, index, count) {
+    if (key === "ArrowRight")
+        return (index + 1) % count;
+    if (key === "ArrowLeft")
+        return (index - 1 + count) % count;
+    if (key === "Home")
+        return 0;
+    if (key === "End")
+        return count - 1;
+    return null;
+}
+/** Colour swatch whose label is announced in place of the colour. */
+export function Swatch({ color, label }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "m-swatch", "aria-hidden": "true", style: { background: color } }), _jsx("span", { className: "m-sr-only", children: label })] }));
+}
+/** Ids and describedby wiring for a labelled field with a hint or error message. */
+export function useField({ id, hint, error, describedBy, }) {
+    const generated = useId();
+    const fieldId = id || generated;
+    const messageId = fieldId + "-message";
+    return {
+        fieldId,
+        messageId,
+        describedBy: [describedBy, (error || hint) && messageId].filter(Boolean).join(" ") ||
+            undefined,
+    };
+}
+/** The hint or error under a field; the error wins and is styled as one. */
+export function FieldMessage({ id, hint, error, }) {
+    return error || hint ? (_jsx("p", { id: id, className: error ? "m-error" : "", children: error || hint })) : null;
+}
+/** Headless dialog root with the shared backdrop. */
+export function DialogFrame({ open, onClose, component, children, }) {
+    return (_jsx(Dialog, { open: open, onClose: onClose, className: "m-dialog", ...componentRoot(component ?? "", component !== undefined), children: _jsxs(ThemeScope, { children: [_jsx("div", { className: "m-backdrop", "aria-hidden": "true" }), children] }) }));
+}
+/** Narrow-screen navigation drawer used by AppShell and DocsShell. */
+export function MobileNavDialog({ open, onClose, title, children, }) {
+    return (_jsx(DialogFrame, { open: open, onClose: onClose, children: _jsxs(DialogPanel, { className: "m-mobile-sidebar", children: [_jsxs("div", { className: "m-dialog-heading", children: [_jsx(DialogTitle, { children: title }), _jsx(Button, { variant: "ghost", onClick: onClose, children: "Close navigation" })] }), children] }) }));
+}
+/** `introSlots` with the shared `m-section-title` class on the heading. */
+export function titledIntroSlots(props) {
+    return classedIntroSlots(props, "m-section-title");
+}
+/** `data-tone` for a section surface tone; the default tone sets no attribute. */
+export function sectionTone(tone) {
+    return tone && tone !== "default" ? tone : undefined;
+}
+/** `SectionIntro` with the `m-section-title` heading class. */
+export function TitledIntro(props) {
+    return _jsxs(_Fragment, { children: [...titledIntroSlots(props)] });
+}
+/**
+ * Navigation links with icon and count. An item with children becomes a
+ * disclosure, open when it or a child is current; its own page is the first
+ * link inside.
+ */
+export function NavTreeLinks({ items, marker = false, onNavigate, }) {
+    const link = (item, key) => (_jsx(KitLink, { href: item.href, "aria-current": item.current ? "page" : undefined, onClick: onNavigate, children: _jsx(LinkContent, { prefix: "nav", marker: marker, icon: item.icon, label: item.label, count: item.count }) }, key));
+    return (_jsx(_Fragment, { children: items.map((item, index) => {
+            const key = `${item.label}:${item.href}:${index}`;
+            return item.children?.length ? (_jsxs("details", { className: "m-nav-group", open: item.current ||
+                    item.children.some((child) => child.current) ||
+                    undefined, children: [_jsx("summary", { children: _jsx(LinkContent, { prefix: "nav", marker: marker, icon: item.icon, label: item.label }) }), _jsxs("div", { className: "m-nav-children", children: [item.href && link({ ...item, icon: undefined }, "parent"), _jsx(NavTreeLinks, { items: item.children, marker: marker, onNavigate: onNavigate })] })] }, key)) : (link(item, key));
+        }) }));
+}
+/**
+ * Labelled groups of navigation links. Group labels are not headings, so the
+ * page's own h1 stays first in the heading outline.
+ */
+export function NavGroups({ groups, marker, onNavigate, }) {
+    const groupId = useDomId("m-nav-group-");
+    return (_jsx(_Fragment, { children: groups.map((group, index) => (_jsxs("div", { role: "group", "aria-labelledby": `${groupId}-${index}`, children: [_jsx("p", { id: `${groupId}-${index}`, className: "m-nav-group-title", children: group.label }), _jsx(NavTreeLinks, { items: group.items, marker: marker, onNavigate: onNavigate })] }, group.label))) }));
+}
+/**
+ * The hint or error under a field. Unlike FieldMessage, the error is its own
+ * role="alert" element, so it is announced when it appears.
+ */
+export function FieldFeedback({ id, hint, error, }) {
+    if (error)
+        return (_jsx("p", { id: id, className: "m-error", role: "alert", children: error }, "error"));
+    return hint ? (_jsx("p", { id: id, children: hint }, "hint")) : null;
+}
+/** Decorative required marker after a field label; the control itself is marked required. */
+export function RequiredMark() {
+    return (_jsx("span", { className: "m-required", "aria-hidden": "true", children: "*" }));
+}
+const TABBABLE = 'a[href], button:not(:disabled), input:not(:disabled):not([type="hidden"]), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
+/**
+ * Call before `element` is removed. If focus is inside it, move focus to the
+ * next tabbable element after it (within `scope`, default the document), else
+ * the previous one, else `fallback`, so focus never drops to the body.
+ */
+export function focusAway(element, { scope, fallback, } = {}) {
+    if (!element)
+        return;
+    const document = element.ownerDocument;
+    if (!element.contains(document.activeElement))
+        return;
+    const candidates = [
+        ...(scope ?? document.body).querySelectorAll(TABBABLE),
+    ].filter((el) => !element.contains(el) &&
+        !el.closest("[hidden], [inert]") &&
+        el.getClientRects().length > 0);
+    const following = (el) => element.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING;
+    // Nearest first: following elements, then preceding ones from the closest.
+    // Some candidates have boxes but cannot take focus (content of a closed
+    // <details>), so keep trying until one does.
+    const ordered = [
+        ...candidates.filter(following),
+        ...candidates.filter((el) => !following(el)).reverse(),
+    ];
+    for (const el of fallback ? [...ordered, fallback] : ordered) {
+        el.focus();
+        if (document.activeElement === el)
+            return;
+    }
+}
+/**
+ * The data-mortar-* attributes of the nearest container-scoped ThemeProvider.
+ * Optional (undefined outside one), so it does not make dialogs depend on it.
+ */
+export const ThemeScopeContext = createContext(undefined);
+/**
+ * Re-applies a container-scoped theme to content rendered outside its wrapper
+ * (dialogs portal to the document body). The wrapper is display: contents, so
+ * it carries the tokens without adding a box.
+ */
+export function ThemeScope({ children }) {
+    const attributes = useContext(ThemeScopeContext);
+    if (!attributes)
+        return _jsx(_Fragment, { children: children });
+    return (_jsx("div", { ...attributes, className: "m-theme-scope", children: children }));
+}
+/**
+ * introSlots with a class on the heading, so a title keeps its styles at any
+ * `headingLevel` instead of only as an h2.
+ */
+export function classedIntroSlots(props, titleClassName) {
+    const [eyebrow, heading, description] = introSlots(props);
+    return [
+        eyebrow,
+        isValidElement(heading)
+            ? cloneElement(heading, { className: titleClassName })
+            : heading,
+        description,
+    ];
+}
+/**
+ * Call before a consumer callback that removes `element` (e.g. a chip's
+ * remove button). Once the removal has rendered, if focus fell to the body,
+ * it moves to the nearest focusable element that took the removed one's place,
+ * or the one before it, searching up through the ancestors that remain.
+ */
+export function focusAfterRemoval(element) {
+    const trail = [];
+    for (let node = element; node?.parentElement;) {
+        const parent = node.parentElement;
+        trail.push([parent, [...parent.children].indexOf(node)]);
+        node = parent;
+    }
+    setTimeout(() => {
+        const active = element.ownerDocument.activeElement;
+        if (element.isConnected ||
+            (active && active !== element.ownerDocument.body))
+            return;
+        for (const [parent, index] of trail) {
+            if (!parent.isConnected)
+                continue;
+            const siblings = [...parent.children];
+            const candidates = [
+                ...siblings.slice(index),
+                ...siblings.slice(0, index).reverse(),
+            ];
+            for (const candidate of candidates) {
+                const target = candidate.matches(TABBABLE)
+                    ? candidate
+                    : candidate.querySelector(TABBABLE);
+                if (target)
+                    return target.focus();
+            }
+        }
+    });
+}

package/dist/layout.d.ts

@@ -0,0 +1,107 @@
+import { type ElementType, type ReactNode } from "react";
+import { type HeadingLevel } from "./heading.js";
+type Space = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export interface StackProps {
+    as?: ElementType;
+    gap?: Space;
+    direction?: "column" | "row";
+    align?: "start" | "center" | "end" | "stretch";
+    justify?: "start" | "center" | "end" | "between";
+    wrap?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/** Vertical or horizontal rhythm without consumer flex/gap utilities. */
+export declare function Stack({ as: Tag, gap, direction, align, justify, wrap, children, className, }: StackProps): import("react").JSX.Element;
+export interface ContainerProps {
+    as?: ElementType;
+    size?: "sm" | "md" | "lg" | "xl";
+    padded?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/** Centred page width with the shared gutters used by marketing and application pages. */
+export declare function Container({ as: Tag, size, padded, children, className, }: ContainerProps): import("react").JSX.Element;
+export interface TextProps {
+    as?: ElementType;
+    /** Text colour; `data-tone` stays reserved for status and surface tones. */
+    color?: "default" | "secondary" | "muted";
+    size?: "sm" | "md" | "lg";
+    weight?: "regular" | "medium" | "semibold";
+    children: ReactNode;
+    className?: string;
+}
+/** Body copy with semantic colour and size, instead of text-muted/text-ink utilities. */
+export declare function Text({ as: Tag, color, size, weight, children, className, }: TextProps): import("react").JSX.Element;
+export type SectionTone = "default" | "muted" | "inverse";
+export interface SectionProps {
+    id?: string;
+    eyebrow?: string;
+    title?: string;
+    description?: string;
+    tone?: SectionTone;
+    align?: "start" | "center";
+    headingLevel?: HeadingLevel;
+    children?: ReactNode;
+    className?: string;
+}
+/** Full-bleed marketing band for content that is not a grid or split feature. */
+export declare function Section({ id, eyebrow, title, description, tone, align, headingLevel, children, className, }: SectionProps): import("react").JSX.Element;
+/** Brand mark: a supplied logo node, or the neutral placeholder square. */
+export declare function BrandMark({ logo }: {
+    logo?: ReactNode;
+}): import("react").JSX.Element;
+export interface DividerProps {
+    label?: string;
+    soft?: boolean;
+    spacing?: "none" | "sm" | "md" | "lg";
+    className?: string;
+}
+/** Horizontal rule between groups; a label names the break for assistive technology. */
+export declare function Divider({ label, soft, spacing, className, }: DividerProps): import("react").JSX.Element;
+export interface CardProps {
+    as?: "div" | "section" | "article";
+    title?: string;
+    description?: string;
+    headingLevel?: HeadingLevel;
+    actions?: ReactNode;
+    footer?: ReactNode;
+    padding?: "default" | "compact" | "none";
+    /** `muted` sets the card on the sunken surface. */
+    tone?: "default" | "muted";
+    children?: ReactNode;
+    id?: string;
+    className?: string;
+}
+/** Bordered surface with optional heading, header actions and footer. */
+export declare function Card({ as: Tag, title, description, headingLevel, actions, footer, padding, tone, children, id, className, }: CardProps): import("react").JSX.Element;
+export interface MediaObjectProps {
+    media: ReactNode;
+    title?: string;
+    align?: "start" | "center";
+    reverse?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+/** Image, avatar or icon beside text, e.g. comments and list rows. */
+export declare function MediaObject({ media, title, align, reverse, children, className, }: MediaObjectProps): import("react").JSX.Element;
+export interface SectionHeadingProps {
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+    headingLevel?: HeadingLevel;
+    divider?: boolean;
+    /** Page tabs (e.g. TabNav) below the title row; their underline replaces the divider. */
+    tabs?: ReactNode;
+    id?: string;
+    className?: string;
+}
+/** Heading for a section within a page, with optional description and actions. */
+export declare function SectionHeading({ title, description, actions, headingLevel, divider, tabs, id, className, }: SectionHeadingProps): import("react").JSX.Element;
+export interface ProseProps {
+    children: ReactNode;
+    className?: string;
+}
+/** Long-form copy with the kit's typographic rhythm. */
+export declare function Prose({ children, className }: ProseProps): import("react").JSX.Element;
+export {};

package/dist/layout.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { componentRoot, cx, classedIntroSlots, titledIntroSlots, } from "./internal.js";
+/** Vertical or horizontal rhythm without consumer flex/gap utilities. */
+export function Stack({ as: Tag = "div", gap = "md", direction = "column", align, justify, wrap = false, children, className, }) {
+    return (_jsx(Tag, { ...componentRoot("Stack"), className: cx("m-layout-stack", className), "data-gap": gap === "md" ? undefined : gap, "data-direction": direction === "column" ? undefined : direction, "data-align": align, "data-justify": justify, "data-wrap": wrap || undefined, children: children }));
+}
+/** Centred page width with the shared gutters used by marketing and application pages. */
+export function Container({ as: Tag = "div", size = "lg", padded = true, children, className, }) {
+    return (_jsx(Tag, { ...componentRoot("Container"), className: cx("m-container", className), "data-size": size === "lg" ? undefined : size, "data-padded": padded || undefined, children: children }));
+}
+/** Body copy with semantic colour and size, instead of text-muted/text-ink utilities. */
+export function Text({ as: Tag = "p", color = "default", size = "md", weight = "regular", children, className, }) {
+    return (_jsx(Tag, { ...componentRoot("Text"), className: cx("m-text", className), "data-color": color === "default" ? undefined : color, "data-size": size === "md" ? undefined : size, "data-weight": weight === "regular" ? undefined : weight, children: children }));
+}
+/** Full-bleed marketing band for content that is not a grid or split feature. */
+export function Section({ id, eyebrow, title, description, tone = "default", align = "start", headingLevel = 2, children, className, }) {
+    return (_jsxs("section", { id: id, className: cx("m-marketing-section m-section", className), "data-tone": tone === "default" ? undefined : tone, "data-align": align === "start" ? undefined : align, ...componentRoot("Section"), children: [...titledIntroSlots({
+                eyebrow,
+                title: title || undefined,
+                description,
+                headingLevel,
+            }), children && _jsx("div", { className: "m-section-body", children: children })] }));
+}
+/** Brand mark: a supplied logo node, or the neutral placeholder square. */
+export function BrandMark({ logo }) {
+    return logo ? (_jsx("span", { className: "m-logo", "aria-hidden": "true", children: logo })) : (_jsx("span", { className: "m-mark", "aria-hidden": "true" }));
+}
+/** Horizontal rule between groups; a label names the break for assistive technology. */
+export function Divider({ label, soft = false, spacing = "md", className, }) {
+    const attributes = {
+        ...componentRoot("Divider"),
+        className: cx("m-divider", className),
+        "data-soft": soft || undefined,
+        "data-spacing": spacing === "md" ? undefined : spacing,
+    };
+    return label ? (_jsx("div", { ...attributes, role: "separator", "aria-label": label, children: _jsx("span", { "aria-hidden": "true", children: label }) })) : (_jsx("hr", { ...attributes }));
+}
+/** Bordered surface with optional heading, header actions and footer. */
+export function Card({ as: Tag = "div", title, description, headingLevel = 2, actions, footer, padding = "default", tone = "default", children, id, className, }) {
+    const headingId = useId();
+    return (_jsxs(Tag, { id: id, ...componentRoot("Card"), className: cx("m-card", className), "data-padding": padding === "default" ? undefined : padding, "data-tone": tone === "default" ? undefined : tone, "aria-labelledby": title && Tag !== "div" ? headingId : undefined, children: [(title || actions) && (_jsxs("header", { className: "m-card-header", children: [title && (_jsxs("div", { className: "m-card-heading", children: [...classedIntroSlots({
+                                title,
+                                description,
+                                id: headingId,
+                                headingLevel,
+                                descriptionClassName: null,
+                            }, "m-card-title")] })), actions && _jsx("div", { className: "m-card-actions", children: actions })] })), children && _jsx("div", { className: "m-card-body", children: children }), footer && _jsx("footer", { className: "m-card-footer", children: footer })] }));
+}
+/** Image, avatar or icon beside text, e.g. comments and list rows. */
+export function MediaObject({ media, title, align = "start", reverse = false, children, className, }) {
+    return (_jsxs("div", { ...componentRoot("MediaObject"), className: cx("m-media-object", className), "data-align": align === "start" ? undefined : align, "data-reverse": reverse || undefined, children: [_jsx("div", { className: "m-media-object-media", children: media }), _jsxs("div", { className: "m-media-object-body", children: [title && _jsx("p", { className: "m-media-object-title", children: title }), children] })] }));
+}
+/** Heading for a section within a page, with optional description and actions. */
+export function SectionHeading({ title, description, actions, headingLevel = 2, divider = true, tabs, id, className, }) {
+    return (_jsxs("div", { id: id, ...componentRoot("SectionHeading"), className: cx("m-section-heading", className), "data-divider": divider || undefined, children: [_jsxs("div", { className: "m-section-heading-text", children: [...classedIntroSlots({
+                        title,
+                        description,
+                        headingLevel,
+                        descriptionClassName: null,
+                    }, "m-section-heading-title")] }), actions && _jsx("div", { className: "m-actions", children: actions }), tabs && _jsx("div", { className: "m-section-heading-tabs", children: tabs })] }));
+}
+/** Long-form copy with the kit's typographic rhythm. */
+export function Prose({ children, className }) {
+    return (_jsx("div", { ...componentRoot("Prose"), className: cx("m-prose", className), children: children }));
+}

package/dist/marketing-sections.d.ts

@@ -0,0 +1,161 @@
+import { type IconLink } from "./navigation.js";
+import { type ReactNode } from "react";
+import { type LinkAction } from "./primitives.js";
+import type { SectionTone } from "./layout.js";
+import { type HeadingLevel } from "./heading.js";
+export declare function BentoGrid({ id, className, eyebrow, title, description, items, tone, headingLevel, }: {
+    id?: string;
+    className?: string;
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    items: {
+        title: string;
+        description: string;
+        visual?: ReactNode;
+        /** Columns the tile spans. */
+        span?: 1 | 2;
+        /** Rows the tile spans, e.g. tall tiles at both ends of a three-column grid. */
+        rowSpan?: 1 | 2;
+        /** The tile's surface; inverse remaps it to the inverse tokens. */
+        tone?: SectionTone;
+    }[];
+    /** The section's band; inverse gives a dark section whose tiles follow the remapped tokens. */
+    tone?: SectionTone;
+    /** The section title's level; tile titles sit one level below. */
+    headingLevel?: HeadingLevel;
+}): import("react").JSX.Element;
+export declare function StatGroup({ id, className, label, items, layout, background, }: {
+    id?: string;
+    className?: string;
+    label: string;
+    /** description: optional supporting sentence under the value. */
+    items: {
+        value: string;
+        label: string;
+        description?: string;
+    }[];
+    /** grid: ruled columns. timeline: a dotted line through the items, for dated milestones (value is the date). stepped: cards that rise in height from first to last. */
+    layout?: "grid" | "timeline" | "stepped";
+    /** Decorative full-cover image behind the stats. The group switches to the inverse tone with a scrim so text keeps its contrast. */
+    background?: ReactNode;
+}): import("react").JSX.Element;
+export declare function TestimonialGrid({ id, className, title, items, headingLevel, layout, }: {
+    id?: string;
+    className?: string;
+    title?: string;
+    items: {
+        quote: string;
+        name: string;
+        role?: string;
+        avatar?: string;
+        /** A larger quote that spans the grid's middle columns, or every column in masonry. */
+        featured?: boolean;
+    }[];
+    headingLevel?: HeadingLevel;
+    /** masonry: quotes flow down balanced columns at their own heights. grid: rows of equal height. */
+    layout?: "masonry" | "grid";
+}): import("react").JSX.Element;
+export declare function PlanComparison({ id, className, title, description, plans, featuredPlan, groups, headingLevel, }: {
+    id?: string;
+    className?: string;
+    title: string;
+    description?: string;
+    plans: string[];
+    featuredPlan?: string;
+    groups: {
+        label: string;
+        rows: {
+            feature: string;
+            values: (boolean | string)[];
+        }[];
+    }[];
+    headingLevel?: HeadingLevel;
+}): import("react").JSX.Element;
+export declare function PostList({ id, className, title, description, posts, action, headingLevel, itemHeadingLevel, }: {
+    id?: string;
+    className?: string;
+    title: string;
+    description?: string;
+    posts: {
+        href: string;
+        title: string;
+        excerpt: string;
+        date: string;
+        dateLabel: string;
+        category?: string;
+        image?: ReactNode;
+        /** Spans the full row with the image beside a larger title; usually the first post. */
+        featured?: boolean;
+    }[];
+    action?: LinkAction;
+    headingLevel?: HeadingLevel;
+    /** Level of each post title; defaults to one below `headingLevel`. */
+    itemHeadingLevel?: HeadingLevel;
+}): import("react").JSX.Element;
+export declare function TeamGrid({ id, className, title, description, members, headingLevel, layout, }: {
+    id?: string;
+    className?: string;
+    title: string;
+    description?: string;
+    members: {
+        name: string;
+        role: string;
+        image?: ReactNode;
+        bio?: string;
+        /** Profile links, e.g. icon-only social links named "Ana on LinkedIn". */
+        links?: IconLink[];
+    }[];
+    headingLevel?: HeadingLevel;
+    /** grid: small square portraits. large: fewer columns of tall portraits. list: each portrait beside the name, role and bio. */
+    layout?: "grid" | "large" | "list";
+}): import("react").JSX.Element;
+export declare function ContactSection({ id, className, title, description, details, headingLevel, media, offices, children, }: {
+    id?: string;
+    className?: string;
+    title: string;
+    description?: string;
+    details?: {
+        label: string;
+        value: ReactNode;
+    }[];
+    headingLevel?: HeadingLevel;
+    /** An image filling one half of a split layout, beside the intro and form; give it alt text or alt="" if decorative. */
+    media?: ReactNode;
+    /** Office locations in a grid below; each name is a heading one level below the title. */
+    offices?: {
+        name: string;
+        address: ReactNode;
+    }[];
+    /** The consumer's form. Compose with Input, Select, TextArea and Button. Optional when the section lists offices. */
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function Newsletter({ id, className, title, description, onSubmit, submitLabel, status, message, headingLevel, layout, variant, }: {
+    id?: string;
+    className?: string;
+    title: string;
+    description?: string;
+    onSubmit: (email: string) => void;
+    submitLabel?: string;
+    /** submitting: busy and inert. success: announces `message`. error: shows `message` on the field. */
+    status?: "idle" | "submitting" | "success" | "error";
+    message?: string;
+    headingLevel?: HeadingLevel;
+    /** split: the copy beside the form. center: the copy above a centred form. */
+    layout?: "split" | "center";
+    /** plain: a section divided by a top rule. panel: a rounded, sunken card. */
+    variant?: "plain" | "panel";
+}): import("react").JSX.Element;
+export declare function NotFound({ id, className, code, title, description, actions, illustration, background, headingLevel, }: {
+    id?: string;
+    className?: string;
+    code?: string;
+    title: string;
+    description: string;
+    actions: LinkAction[];
+    /** Decorative artwork above the code. */
+    illustration?: ReactNode;
+    /** Decorative full-cover image behind the message. The section switches to the inverse tone with a scrim so text keeps its contrast. */
+    background?: ReactNode;
+    headingLevel?: HeadingLevel;
+}): import("react").JSX.Element;