shelving 1.199.2 → 1.200.0

package/ui/block/Elements.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClass, getModuleClass } from "../util/css.js";
+import { ELEMENT_CSS } from "./Element.js";
+import ELEMENTS_CSS from "./Elements.module.css";
+/** Block with element spacing and flex children. */
+export function Elements({ children, ...variants }) {
+    return (_jsx("div", { className: getClass(ELEMENT_CSS.element, // Elements has element spacing.
+        getModuleClass(ELEMENTS_CSS, "elements", variants)), children: children }));
+}
+export { ELEMENTS_CSS };

package/ui/block/Elements.module.css

@@ -0,0 +1,70 @@
+/** Flex styles reused by a few other elements including <Elements>, <Notice>, <Button>, <InputButton> */
+.elements {
+	/* Box */
+	&& {
+		display: flex; /* Raise specificity of this. */
+	}
+
+	/* Contents */
+	flex-direction: row;
+	gap: var(--elements-gap, var(--spacing-element));
+	justify-content: stretch;
+	align-items: center;
+
+	/* Variants */
+	&.wrap {
+		flex-wrap: wrap;
+	}
+	&.left {
+		justify-content: start;
+	}
+	&.center {
+		justify-content: center;
+	}
+	&.right {
+		justify-content: end;
+	}
+	&.stretch {
+		justify-content: stretch;
+	}
+	&.reverse {
+		flex-direction: row-reverse;
+	}
+	&.column {
+		flex-direction: column;
+		justify-content: center;
+		align-items: stretch;
+
+		&.left {
+			align-items: start;
+		}
+		&.center {
+			align-items: center;
+		}
+		&.right {
+			align-items: end;
+		}
+		&.stretch {
+			align-items: stretch;
+		}
+		&.reverse {
+			flex-direction: column-reverse;
+		}
+	}
+	&.flush {
+		gap: 0;
+	}
+
+	/* Children */
+	:where(& > *) {
+		flex: var(--grow-normal) 1 auto;
+	}
+	&& > * {
+		margin: 0; /* No margins on children (high specificity). */
+	}
+	&& > [data-slot="icon"] {
+		inline-size: var(--elements-size-icon, var(--size-icon));
+		block-size: var(--elements-size-icon, var(--size-icon));
+		flex: none;
+	}
+}

package/ui/block/Elements.tsx

@@ -0,0 +1,44 @@
+import type { ReactElement, ReactNode } from "react";
+import { getClass, getModuleClass } from "../util/css.js";
+import { ELEMENT_CSS } from "./Element.js";
+import ELEMENTS_CSS from "./Elements.module.css";
+
+/** Variants for elements. */
+export interface ElementsVariants {
+	/** Wrap overflowing elements onto the next line (defaults to no wrapping). */
+	wrap?: boolean | undefined;
+	/** Display the elements as a column (defaults to row). */
+	column?: boolean | undefined;
+	/** Align the elements to the left (defaults to stretch). */
+	left?: boolean | undefined;
+	/** Align the elements to the center (defaults to stretch). */
+	center?: boolean | undefined;
+	/** Align the elements to the right (defaults to stretch). */
+	right?: boolean | undefined;
+	/** Align the elements stretch (defaults to stretch). */
+	stretch?: boolean | undefined;
+	/** Remove the gap between elements. */
+	flush?: boolean | undefined;
+	/** Reverse the order of the elements. */
+	reverse?: boolean | undefined;
+}
+
+export interface ElementsProps extends ElementsVariants {
+	children?: ReactNode | undefined;
+}
+
+/** Block with element spacing and flex children. */
+export function Elements({ children, ...variants }: ElementsProps): ReactElement {
+	return (
+		<div
+			className={getClass(
+				ELEMENT_CSS.element, // Elements has element spacing.
+				getModuleClass(ELEMENTS_CSS, "elements", variants),
+			)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export { ELEMENTS_CSS };

package/ui/block/Figure.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement, ReactNode } from "react";
+export interface FigureProps {
+    children?: ReactNode;
+    caption?: ReactNode;
+}
+export declare function Figure({ children, caption }: FigureProps): ReactElement;

package/ui/block/Figure.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./Figure.module.css";
+export function Figure({ children, caption }) {
+    return (_jsxs("figure", { className: styles.figure, children: [children, caption && _jsx("figcaption", { className: styles.caption, children: caption })] }));
+}

package/ui/block/Figure.module.css

@@ -0,0 +1,27 @@
+.figure,
+.prose figure {
+	/* Box */
+	position: relative;
+	display: block;
+	margin-inline: 0;
+	margin-block: var(--figure-spacing, var(--spacing-block));
+
+	/* Psuedo-classes */
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+}
+
+.caption,
+.prose figcaption {
+	/* Box */
+	display: block;
+	margin-block-start: var(--caption-gap, var(--spacing-paragraph));
+
+	/* Style */
+	font-size: var(--caption-font-size, var(--size-small));
+	color: var(--caption-color, var(--color-quiet));
+}

package/ui/block/Figure.tsx

@@ -0,0 +1,16 @@
+import type { ReactElement, ReactNode } from "react";
+import styles from "./Figure.module.css";
+
+export interface FigureProps {
+	children?: ReactNode;
+	caption?: ReactNode;
+}
+
+export function Figure({ children, caption }: FigureProps): ReactElement {
+	return (
+		<figure className={styles.figure}>
+			{children}
+			{caption && <figcaption className={styles.caption}>{caption}</figcaption>}
+		</figure>
+	);
+}

package/ui/block/Heading.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+export interface HeadingProps {
+    level?: "1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;
+    children: ReactNode;
+}
+export declare function Heading({ level, children, ...variants }: HeadingProps): import("react/jsx-runtime").JSX.Element;

package/ui/block/Heading.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getModuleClass } from "../util/css.js";
+import styles from "./Heading.module.css";
+export function Heading({ level = "1", children, ...variants }) {
+    const Element = `h${level}`;
+    return _jsx(Element, { className: getModuleClass(styles, "heading", variants), children: children });
+}

package/ui/block/Heading.module.css

@@ -0,0 +1,23 @@
+.heading,
+.prose h1 {
+	/* Box */
+	display: block;
+	inline-size: 100%;
+	margin-inline: 0;
+	margin-block: var(--heading-spacing, var(--spacing-paragraph));
+
+	/* Style */
+	font-family: var(--heading-font, var(--font-body));
+	font-weight: var(--heading-weight, var(--weight-strong));
+	font-size: var(--heading-font-size, var(--size-xlarge));
+	line-height: var(--heading-leading, var(--leading-tight));
+	color: var(--heading-color, var(--color-text));
+
+	/* Psuedo-classes */
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+}

package/ui/block/Heading.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import { getModuleClass } from "../util/css.js";
+import styles from "./Heading.module.css";
+
+export interface HeadingProps {
+	level?: "1" | "2" | "3" | "4" | "5" | "6" | 1 | 2 | 3 | 4 | 5 | 6;
+	children: ReactNode;
+}
+
+export function Heading({ level = "1", children, ...variants }: HeadingProps) {
+	const Element: `h${typeof level}` = `h${level}`;
+	return <Element className={getModuleClass(styles, "heading", variants)}>{children}</Element>;
+}

package/ui/block/Image.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement } from "react";
+export interface ImageProps {
+    src: string;
+    alt?: string;
+}
+export declare function Image({ src, alt }: ImageProps): ReactElement;

package/ui/block/Image.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Image.module.css";
+export function Image({ src, alt }) {
+    return _jsx("img", { src: src, className: styles.image, alt: alt });
+}

package/ui/block/Image.module.css

@@ -0,0 +1,20 @@
+.image,
+.prose img {
+	/* Box */
+	display: block;
+	width: 100%;
+	margin-inline: 0;
+	margin-block: var(--image-spacing, var(--spacing-block));
+
+	/* Style */
+	object-position: center center;
+	object-fit: cover; /* Don't distort when resized. */
+
+	/* Psuedo-classes */
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+}

package/ui/block/Image.tsx

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+import styles from "./Image.module.css";
+
+export interface ImageProps {
+	src: string;
+	alt?: string;
+}
+
+export function Image({ src, alt }: ImageProps): ReactElement {
+	return <img src={src} className={styles.image} alt={alt} />;
+}

package/ui/block/List.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement, ReactNode } from "react";
+export interface ListProps {
+    children: ReactNode[];
+    ordered?: boolean;
+}
+export declare function List({ children, ordered }: ListProps): ReactElement;

package/ui/block/List.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./List.module.css";
+export function List({ children, ordered = false }) {
+    const items = children.map((v, i) => _jsx("li", { children: v }, i.toString()));
+    return ordered ? _jsx("ol", { className: styles.ordered, children: items }) : _jsx("ul", { className: styles.unordered, children: items });
+}

package/ui/block/List.module.css

@@ -0,0 +1,30 @@
+.unordered,
+.ordered,
+.prose ul,
+.prose ol {
+	/* Box */
+	display: block;
+	margin-inline: 0;
+	margin-block: var(--list-spacing, var(--spacing-paragraph));
+
+	/* Typography */
+	text-align: left;
+
+	/* Psuedo-classes */
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+}
+
+.unordered,
+.prose ul {
+	padding-inline-start: var(--unordered-list-padding-inline-start, 1.125em);
+}
+
+.ordered,
+.prose ol {
+	padding-inline-start: var(--ordered-list-padding-inline-start, 1.8em);
+}

package/ui/block/List.tsx

@@ -0,0 +1,12 @@
+import type { ReactElement, ReactNode } from "react";
+import styles from "./List.module.css";
+
+export interface ListProps {
+	children: ReactNode[];
+	ordered?: boolean;
+}
+
+export function List({ children, ordered = false }: ListProps): ReactElement {
+	const items = children.map((v, i) => <li key={i.toString()}>{v}</li>);
+	return ordered ? <ol className={styles.ordered}>{items}</ol> : <ul className={styles.unordered}>{items}</ul>;
+}

package/ui/block/Paragraph.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement, ReactNode } from "react";
+import PARAGRAPH_CSS from "./Paragraph.module.css";
+export interface ParagraphProps {
+    children?: ReactNode;
+    /** Align the paragraph to the right. */
+    right?: boolean | undefined;
+    /** Align the paragraph to the center. */
+    center?: boolean | undefined;
+    /** Align the paragraph to the left. */
+    left?: boolean | undefined;
+    /** Give the paragraph more space. */
+    spacious?: boolean | undefined;
+}
+export declare function Paragraph({ children, ...variants }: ParagraphProps): ReactElement;
+export { PARAGRAPH_CSS };

package/ui/block/Paragraph.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getModuleClass } from "../util/css.js";
+import PARAGRAPH_CSS from "./Paragraph.module.css";
+export function Paragraph({ children, ...variants }) {
+    return _jsx("p", { className: getModuleClass(PARAGRAPH_CSS, "paragraph", variants), children: children });
+}
+export { PARAGRAPH_CSS };

package/ui/block/Paragraph.module.css

@@ -0,0 +1,36 @@
+.paragraph,
+.prose p {
+	/* Low-specificity defaults */
+	:where(&) {
+		/* Typography */
+		text-align: left;
+	}
+
+	/* Box */
+	display: block;
+	inline-size: 100%;
+	margin-inline: 0;
+	margin-block: var(--paragraph-spacing, var(--spacing-paragraph));
+
+	/* Variants */
+	&.left {
+		text-align: left;
+	}
+	&.center {
+		text-align: center;
+	}
+	&.right {
+		text-align: right;
+	}
+	&.spacious {
+		margin-block: var(--paragraph-spacious-spacing, var(--spacing-spacious));
+	}
+
+	/* Psuedo-classes */
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+}

package/ui/block/Paragraph.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement, ReactNode } from "react";
+import { getModuleClass } from "../util/css.js";
+import PARAGRAPH_CSS from "./Paragraph.module.css";
+
+export interface ParagraphProps {
+	children?: ReactNode;
+	/** Align the paragraph to the right. */
+	right?: boolean | undefined;
+	/** Align the paragraph to the center. */
+	center?: boolean | undefined;
+	/** Align the paragraph to the left. */
+	left?: boolean | undefined;
+	/** Give the paragraph more space. */
+	spacious?: boolean | undefined;
+}
+
+export function Paragraph({ children, ...variants }: ParagraphProps): ReactElement {
+	return <p className={getModuleClass(PARAGRAPH_CSS, "paragraph", variants)}>{children}</p>;
+}
+
+export { PARAGRAPH_CSS };

package/ui/block/Preformatted.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement, ReactNode } from "react";
+export interface PreformattedProps {
+    children?: ReactNode;
+}
+export declare function Preformatted({ children }: PreformattedProps): ReactElement;

package/ui/block/Preformatted.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Preformatted.module.css";
+export function Preformatted({ children }) {
+    return _jsx("pre", { className: styles.preformatted, children: children });
+}

package/ui/block/Preformatted.module.css

@@ -0,0 +1,23 @@
+.preformatted,
+.prose pre {
+	/* Box */
+	display: block;
+	margin-inline: 0;
+	margin-block: var(--preformatted-spacing, var(--spacing-block));
+	padding: var(--preformatted-padding, var(--spacing-inline));
+
+	/* Style */
+	font-family: var(--preformatted-font, var(--font-code));
+	color: var(--preformatted-color-text, var(--color-text));
+	background-color: var(--preformatted-color-bg, var(--color-surface));
+	border: var(--preformatted-border, var(--border-block)) solid var(--preformatted-color-border, var(--color-surface));
+	tab-size: 2;
+
+	/* Psuedo-classes */
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+}

package/ui/block/Preformatted.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement, ReactNode } from "react";
+import styles from "./Preformatted.module.css";
+
+export interface PreformattedProps {
+	children?: ReactNode;
+}
+
+export function Preformatted({ children }: PreformattedProps): ReactElement {
+	return <pre className={styles.preformatted}>{children}</pre>;
+}

package/ui/block/Prose.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement, ReactNode } from "react";
+export interface ProseProps {
+    children?: ReactNode;
+}
+/** A section of longform text containing lots of `<p>` or `<ul>` style elements. */
+export declare function Prose({ children }: ProseProps): ReactElement;

package/ui/block/Prose.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import codeStyles from "../inline/Code.module.css";
+import deletedStyles from "../inline/Deleted.module.css";
+import emphasisStyles from "../inline/Emphasis.module.css";
+import insertedStyles from "../inline/Inserted.module.css";
+import linkStyles from "../inline/Link.module.css";
+import markStyles from "../inline/Mark.module.css";
+import smallStyles from "../inline/Small.module.css";
+import strongStyles from "../inline/Strong.module.css";
+import subscriptStyles from "../inline/Subscript.module.css";
+import superscriptStyles from "../inline/Superscript.module.css";
+import { getClass } from "../util/css.js";
+import addressStyles from "./Address.module.css";
+import blockquoteStyles from "./Blockquote.module.css";
+import dividerStyles from "./Divider.module.css";
+import figureStyles from "./Figure.module.css";
+import headingStyles from "./Heading.module.css";
+import imageStyles from "./Image.module.css";
+import listStyles from "./List.module.css";
+import paragraphStyles from "./Paragraph.module.css";
+import preformattedStyles from "./Preformatted.module.css";
+import subheadingStyles from "./Subheading.module.css";
+import tableStyles from "./Table.module.css";
+const PROSE_STYLES = getClass(paragraphStyles.prose, headingStyles.prose, subheadingStyles.prose, addressStyles.prose, blockquoteStyles.prose, codeStyles.prose, deletedStyles.prose, emphasisStyles.prose, figureStyles.prose, imageStyles.prose, insertedStyles.prose, listStyles.prose, linkStyles.prose, markStyles.prose, preformattedStyles.prose, smallStyles.prose, strongStyles.prose, subscriptStyles.prose, superscriptStyles.prose, tableStyles.prose, dividerStyles.prose);
+/** A section of longform text containing lots of `<p>` or `<ul>` style elements. */
+export function Prose({ children }) {
+    return _jsx("div", { className: PROSE_STYLES, children: children });
+}

package/ui/block/Prose.module.css

@@ -0,0 +1,15 @@
+.prose {
+	/* Box */
+	position: relative;
+	display: block;
+	margin-inline: 0;
+	margin-block: var(--prose-spacing, var(--spacing-block));
+
+	/* Psuedo-classes */
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+}

package/ui/block/Prose.tsx

@@ -0,0 +1,56 @@
+import type { ReactElement, ReactNode } from "react";
+import codeStyles from "../inline/Code.module.css";
+import deletedStyles from "../inline/Deleted.module.css";
+import emphasisStyles from "../inline/Emphasis.module.css";
+import insertedStyles from "../inline/Inserted.module.css";
+import linkStyles from "../inline/Link.module.css";
+import markStyles from "../inline/Mark.module.css";
+import smallStyles from "../inline/Small.module.css";
+import strongStyles from "../inline/Strong.module.css";
+import subscriptStyles from "../inline/Subscript.module.css";
+import superscriptStyles from "../inline/Superscript.module.css";
+import { getClass } from "../util/css.js";
+import addressStyles from "./Address.module.css";
+import blockquoteStyles from "./Blockquote.module.css";
+import dividerStyles from "./Divider.module.css";
+import figureStyles from "./Figure.module.css";
+import headingStyles from "./Heading.module.css";
+import imageStyles from "./Image.module.css";
+import listStyles from "./List.module.css";
+import paragraphStyles from "./Paragraph.module.css";
+import preformattedStyles from "./Preformatted.module.css";
+import subheadingStyles from "./Subheading.module.css";
+import tableStyles from "./Table.module.css";
+
+const PROSE_STYLES = getClass(
+	paragraphStyles.prose,
+	headingStyles.prose,
+	subheadingStyles.prose,
+	addressStyles.prose,
+	blockquoteStyles.prose,
+	codeStyles.prose,
+	deletedStyles.prose,
+	emphasisStyles.prose,
+	figureStyles.prose,
+	imageStyles.prose,
+	insertedStyles.prose,
+	listStyles.prose,
+	linkStyles.prose,
+	markStyles.prose,
+	preformattedStyles.prose,
+	smallStyles.prose,
+	strongStyles.prose,
+	subscriptStyles.prose,
+	superscriptStyles.prose,
+	tableStyles.prose,
+	dividerStyles.prose,
+);
+
+export interface ProseProps {
+	children?: ReactNode;
+}
+
+/** A section of longform text containing lots of `<p>` or `<ul>` style elements. */
+export function Prose({ children }: ProseProps): ReactElement {
+	return <div className={PROSE_STYLES}>{children}</div>;
+}

package/ui/block/Section.d.ts

@@ -0,0 +1,28 @@
+import type { ReactElement, ReactNode } from "react";
+export interface SectionProps {
+    children?: ReactNode;
+    /** Constrain the section to narrow width (defaults to full-width). */
+    narrow?: boolean;
+    /** Constrain the section to wide width (defaults to full-width). */
+    wide?: boolean;
+    /** Constrain the section to spacious spacing (defaults to full-width). */
+    spacious?: boolean;
+}
+export interface HeaderProps extends SectionProps {
+}
+/** A single HTML `<header>` with correct spacing. */
+export declare function Header(props: HeaderProps): ReactElement;
+/** A single HTML `<section>` with correct spacing. */
+export declare function Section(props: SectionProps): ReactElement;
+export interface NavigationProps extends SectionProps {
+}
+/** A single HTML `<nav>` with correct spacing. */
+export declare function Navigation(props: NavigationProps): ReactElement;
+export interface AsideProps extends SectionProps {
+}
+/** A single HTML `<aside>` with correct spacing. */
+export declare function Aside(props: AsideProps): ReactElement;
+export interface FooterProps extends SectionProps {
+}
+/** A single HTML `<footer>` with correct spacing. */
+export declare function Footer(props: FooterProps): ReactElement;

package/ui/block/Section.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getModuleClass } from "../util/css.js";
+import styles from "./Section.module.css";
+function renderSection(Component, { children, ...variants }) {
+    return _jsx(Component, { className: getModuleClass(styles, "section", variants), children: children });
+}
+/** A single HTML `<header>` with correct spacing. */
+export function Header(props) {
+    return renderSection("header", props);
+}
+/** A single HTML `<section>` with correct spacing. */
+export function Section(props) {
+    return renderSection("section", props);
+}
+/** A single HTML `<nav>` with correct spacing. */
+export function Navigation(props) {
+    return renderSection("nav", props);
+}
+/** A single HTML `<aside>` with correct spacing. */
+export function Aside(props) {
+    return renderSection("aside", props);
+}
+/** A single HTML `<footer>` with correct spacing. */
+export function Footer(props) {
+    return renderSection("footer", props);
+}