shelving 1.199.2 → 1.200.0

package/ui/block/Section.module.css

@@ -0,0 +1,28 @@
+.section {
+	/* Box */
+	position: relative;
+	display: block;
+	margin-inline: 0;
+	margin-block: var(--section-spacing, var(--spacing-block));
+
+	/* Psuedo-classes */
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+
+	/* Variants */
+	&.narrow {
+		margin-inline: auto;
+		max-width: var(--section-width-narrow, var(--width-narrow));
+	}
+	&.wide {
+		margin-inline: auto;
+		max-width: var(--section-width-wide, var(--width-wide));
+	}
+	&.spacious {
+		margin-block: var(--paragraph-spacious-spacing, var(--spacing-spacious));
+	}
+}

package/ui/block/Section.tsx

@@ -0,0 +1,53 @@
+import type { ReactElement, ReactNode } from "react";
+import { getModuleClass } from "../util/css.js";
+import styles from "./Section.module.css";
+
+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;
+}
+
+function renderSection(
+	Component: "header" | "footer" | "nav" | "section" | "aside",
+	{ children, ...variants }: SectionProps,
+): ReactElement {
+	return <Component className={getModuleClass(styles, "section", variants)}>{children}</Component>;
+}
+
+export interface HeaderProps extends SectionProps {}
+
+/** A single HTML `<header>` with correct spacing. */
+export function Header(props: HeaderProps): ReactElement {
+	return renderSection("header", props);
+}
+
+/** A single HTML `<section>` with correct spacing. */
+export function Section(props: SectionProps): ReactElement {
+	return renderSection("section", props);
+}
+
+export interface NavigationProps extends SectionProps {}
+
+/** A single HTML `<nav>` with correct spacing. */
+export function Navigation(props: NavigationProps): ReactElement {
+	return renderSection("nav", props);
+}
+
+export interface AsideProps extends SectionProps {}
+
+/** A single HTML `<aside>` with correct spacing. */
+export function Aside(props: AsideProps): ReactElement {
+	return renderSection("aside", props);
+}
+
+export interface FooterProps extends SectionProps {}
+
+/** A single HTML `<footer>` with correct spacing. */
+export function Footer(props: FooterProps): ReactElement {
+	return renderSection("footer", props);
+}

package/ui/block/Subheading.d.ts

@@ -0,0 +1,3 @@
+import type { HeadingProps } from "./Heading.js";
+export type SubheadingProps = HeadingProps;
+export declare function Subheading({ level, children, ...variants }: SubheadingProps): import("react/jsx-runtime").JSX.Element;

package/ui/block/Subheading.js

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

package/ui/block/Subheading.module.css

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

package/ui/block/Subheading.tsx

@@ -0,0 +1,10 @@
+import { getModuleClass } from "../util/css.js";
+import type { HeadingProps } from "./Heading.js";
+import styles from "./Subheading.module.css";
+
+export type SubheadingProps = HeadingProps;
+
+export function Subheading({ level = "2", children, ...variants }: SubheadingProps) {
+	const Element: `h${typeof level}` = `h${level}`;
+	return <Element className={getModuleClass(styles, "subheading", variants)}>{children}</Element>;
+}

package/ui/block/Table.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export interface TableProps {
+    children: ReactNode;
+}
+export declare function Table({ children }: TableProps): import("react/jsx-runtime").JSX.Element;

package/ui/block/Table.js

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

package/ui/block/Table.module.css

@@ -0,0 +1,85 @@
+.table,
+.prose table {
+	/* Box */
+	display: table;
+	margin-inline: 0;
+	margin-block: var(--table-spacing, var(--spacing-block));
+
+	/* Contents */
+	text-indent: 0;
+
+	/* Style */
+	border-color: inherit;
+	border-collapse: collapse;
+	text-align: left;
+
+	/* Pseudo-classes */
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+
+	/* Children */
+	th,
+	td {
+		padding-block: var(--table-padding, var(--spacing-inline));
+		padding-inline: var(--table-padding, var(--spacing-inline));
+		border-block: var(--table-border, var(--border-block)) solid var(--table-color-border, var(--color-border));
+	}
+	th:first-child,
+	td:first-child {
+		padding-inline-start: 0;
+	}
+	th:last-child,
+	td:last-child {
+		padding-inline-end: 0;
+	}
+	thead,
+	tbody th,
+	tfoot {
+		font-weight: var(--table-header-weight, var(--weight-strong));
+	}
+	thead th,
+	thead td {
+		padding-block-start: 0;
+		border: 0;
+	}
+	tfoot th,
+	tfoot td {
+		padding-block-end: 0;
+		border: 0;
+	}
+	thead th,
+	tfoot th {
+		color: var(--table-label-color, var(--color-quiet));
+		font-weight: var(--table-label-weight, var(--weight-strong));
+		font-size: var(--table-label-size, var(--size-small));
+	}
+}
+
+.wrap {
+	/* Box */
+	display: block;
+	margin-block: var(--table-spacing, var(--spacing-block));
+	margin-inline: calc(var(--spacing-block) * -1);
+	padding-inline: var(--spacing-block);
+
+	/* Contents */
+	overflow-x: auto;
+	white-space: nowrap;
+
+	/* Psuedo-classes */
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+
+	/* Children */
+	.table {
+		min-width: 100%;
+	}
+}

package/ui/block/Table.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import styles from "./Table.module.css";
+
+export interface TableProps {
+	children: ReactNode;
+}
+
+export function Table({ children }: TableProps) {
+	return (
+		<div className={styles.wrap}>
+			<table className={styles.table}>{children}</table>
+		</div>
+	);
+}

package/ui/block/Video.d.ts

@@ -0,0 +1,36 @@
+import { type MouseEvent, type ReactElement, type ReactNode } from "react";
+export interface VideoProps {
+    children?: ReactNode;
+    /** Constrain the video to narrow width (defaults to full-width). */
+    narrow?: boolean;
+    /** Constrain the video to wide width (defaults to full-width). */
+    wide?: boolean;
+}
+export interface VideoButtonsProps {
+    children: ReactNode;
+    left?: boolean;
+}
+export interface VideoButtonProps {
+    children: ReactNode;
+    title?: string | undefined;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    danger?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Video container element.
+ * - Has a black background and a 16:9 aspect ratio.
+ * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`.
+ */
+export declare function Video({ children, ...variants }: VideoProps): ReactElement;
+/** Set of video buttons floating over a video. */
+export declare function VideoButtons({ children, ...variants }: VideoButtonsProps): import("react/jsx-runtime").JSX.Element;
+/** Individual video button over a video. */
+export declare function VideoButton({ children, title, onClick, disabled, ...variants }: VideoButtonProps): ReactElement;
+declare const _fullscreenVideoButtonProps: unique symbol;
+export interface FullscreenVideoButtonProps {
+    readonly [_fullscreenVideoButtonProps]?: never;
+}
+/** Button to make a video element go fullscreen. */
+export declare function FullscreenVideoButton(): ReactElement | null;
+export {};

package/ui/block/Video.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/24/solid";
+import { useEffect, useRef, useState } from "react";
+import { getModuleClass } from "../util/css.js";
+import styles from "./Video.module.css";
+/**
+ * Video container element.
+ * - Has a black background and a 16:9 aspect ratio.
+ * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`.
+ */
+export function Video({ children, ...variants }) {
+    const ref = useRef(null);
+    return (_jsx("figure", { ref: ref, className: getModuleClass(styles, "video", variants), children: children }));
+}
+/** Set of video buttons floating over a video. */
+export function VideoButtons({ children, ...variants }) {
+    return _jsx("div", { className: getModuleClass(styles, "buttons", variants), children: children });
+}
+/** Individual video button over a video. */
+export function VideoButton({ children, title, onClick, disabled, ...variants }) {
+    return (_jsx("button", { type: "button", onClick: onClick, className: getModuleClass(styles, "button", variants), title: title, disabled: disabled, children: children }));
+}
+/** Button to make a video element go fullscreen. */
+export function FullscreenVideoButton() {
+    const [isFull, setFull] = useState(!!document.fullscreenElement);
+    useEffect(() => {
+        const onChange = () => setFull(!!document.fullscreenElement);
+        document.addEventListener("fullscreenchange", onChange);
+        return () => document.removeEventListener("fullscreenchange", onChange);
+    });
+    if (!document.fullscreenEnabled)
+        return null;
+    return (_jsx(VideoButton, { title: isFull ? "Exit full screen mode" : "Enter full screen mode", onClick: ({ currentTarget }) => {
+            if (document.fullscreenElement) {
+                document.exitFullscreen();
+            }
+            else {
+                const parent = currentTarget.closest("figure, video");
+                if (parent)
+                    parent.requestFullscreen();
+            }
+        }, children: isFull ? _jsx(ArrowsPointingInIcon, {}) : _jsx(ArrowsPointingOutIcon, {}) }));
+}

package/ui/block/Video.module.css

@@ -0,0 +1,103 @@
+.video {
+	/* Block */
+	aspect-ratio: 16 / 9;
+	margin-inline: 0;
+	margin-block: var(--video-spacing, var(--spacing-block));
+
+	/* Contents */
+	display: flex;
+	flex-direction: column;
+	gap: var(--video-gap, var(--spacing-block));
+	justify-content: center;
+	align-items: center;
+	position: relative;
+
+	/* Style */
+	background: var(--video-color-bg, var(--color-black));
+	color: var(--video-color-text, var(--color-white));
+	overflow: hidden;
+	border-radius: var(--video-radius, var(--radius-element));
+
+	&.narrow {
+		margin-inline: auto;
+		max-width: var(--section-width-narrow, var(--width-narrow));
+	}
+
+	&.wide {
+		margin-inline: auto;
+		max-width: var(--section-width-wide, var(--width-wide));
+	}
+
+	&:first-child {
+		margin-block-start: 0;
+	}
+
+	&:last-child {
+		margin-block-end: 0;
+	}
+
+	&:fullscreen {
+		border-radius: 0;
+	}
+}
+
+.buttons {
+	position: absolute;
+	top: var(--video-controls-offset-y, var(--spacing-block));
+	right: var(--video-controls-offset-x, var(--spacing-block));
+	display: flex;
+	gap: var(--video-controls-gap, var(--spacing-element));
+
+	&.left {
+		right: auto;
+		left: var(--video-controls-offset-x, var(--spacing-block));
+	}
+}
+
+.button {
+	display: inline-flex;
+	flex-direction: row;
+	gap: var(--video-control-gap, var(--spacing-element));
+	height: var(--video-control-size, 3rem);
+	min-width: var(--video-control-size, 3rem);
+	padding-inline: var(--video-control-padding-x, var(--spacing-inline));
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--video-control-radius, 100rem);
+	border: var(--video-control-border, var(--border-block)) solid transparent;
+	color: var(--video-color-control-text, var(--video-color-bg, var(--color-black)));
+	background: var(--video-color-control-bg, var(--video-color-text, var(--color-white)));
+	transition:
+		box-shadow var(--duration-fast) ease-in-out,
+		background-color var(--duration-fast) ease-in-out,
+		border-color var(--duration-fast) ease-in-out;
+
+	&:hover {
+		box-shadow: var(--video-control-shadow-hover, var(--shadow-element));
+		background: var(--video-color-control-hover-bg, color-mix(in srgb, var(--color-quiet) 20%, transparent));
+	}
+
+	&:disabled {
+		opacity: var(--video-control-disabled-opacity, 0.5);
+		cursor: default;
+	}
+
+	&.danger {
+		border-color: var(--video-color-danger-border, var(--error-text));
+		background: var(--video-color-danger-bg, var(--error-text));
+		color: var(--video-color-danger-text, var(--error-contrast));
+	}
+
+	&.danger:hover {
+		background: var(--video-color-danger-hover-bg, color-mix(in srgb, var(--video-color-danger-bg, var(--error-text)) 80%, white));
+		border-color: var(
+			--video-color-danger-hover-border,
+			color-mix(in srgb, var(--video-color-danger-border, var(--error-text)) 80%, white)
+		);
+	}
+
+	& svg {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+}

package/ui/block/Video.tsx

@@ -0,0 +1,91 @@
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/24/solid";
+import { type MouseEvent, type ReactElement, type ReactNode, useEffect, useRef, useState } from "react";
+import { getModuleClass } from "../util/css.js";
+import styles from "./Video.module.css";
+
+export interface VideoProps {
+	children?: ReactNode;
+
+	/** Constrain the video to narrow width (defaults to full-width). */
+	narrow?: boolean;
+
+	/** Constrain the video to wide width (defaults to full-width). */
+	wide?: boolean;
+}
+
+export interface VideoButtonsProps {
+	children: ReactNode;
+	left?: boolean;
+}
+
+export interface VideoButtonProps {
+	children: ReactNode;
+	title?: string | undefined;
+	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+	danger?: boolean;
+	disabled?: boolean;
+}
+
+/**
+ * Video container element.
+ * - Has a black background and a 16:9 aspect ratio.
+ * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`.
+ */
+export function Video({ children, ...variants }: VideoProps): ReactElement {
+	const ref = useRef<HTMLElement | null>(null);
+
+	return (
+		<figure ref={ref} className={getModuleClass(styles, "video", variants)}>
+			{children}
+		</figure>
+	);
+}
+
+/** Set of video buttons floating over a video. */
+export function VideoButtons({ children, ...variants }: VideoButtonsProps) {
+	return <div className={getModuleClass(styles, "buttons", variants)}>{children}</div>;
+}
+
+/** Individual video button over a video. */
+export function VideoButton({ children, title, onClick, disabled, ...variants }: VideoButtonProps): ReactElement {
+	return (
+		<button type="button" onClick={onClick} className={getModuleClass(styles, "button", variants)} title={title} disabled={disabled}>
+			{children}
+		</button>
+	);
+}
+
+declare const _fullscreenVideoButtonProps: unique symbol;
+
+export interface FullscreenVideoButtonProps {
+	readonly [_fullscreenVideoButtonProps]?: never;
+}
+
+/** Button to make a video element go fullscreen. */
+export function FullscreenVideoButton(): ReactElement | null {
+	const [isFull, setFull] = useState(!!document.fullscreenElement);
+
+	useEffect(() => {
+		const onChange = () => setFull(!!document.fullscreenElement);
+		document.addEventListener("fullscreenchange", onChange);
+		return () => document.removeEventListener("fullscreenchange", onChange);
+	});
+
+	if (!document.fullscreenEnabled) return null;
+
+	return (
+		<VideoButton
+			title={isFull ? "Exit full screen mode" : "Enter full screen mode"}
+			onClick={({ currentTarget }) => {
+				if (document.fullscreenElement) {
+					document.exitFullscreen();
+				} else {
+					const parent = currentTarget.closest("figure, video");
+					if (parent) parent.requestFullscreen();
+				}
+			}}
+		>
+			{isFull ? <ArrowsPointingInIcon /> : <ArrowsPointingOutIcon />}
+		</VideoButton>
+	);
+}

package/ui/block/index.d.ts

@@ -0,0 +1,17 @@
+export * from "./Address.js";
+export * from "./Blockquote.js";
+export * from "./Card.js";
+export * from "./Divider.js";
+export * from "./Element.js";
+export * from "./Elements.js";
+export * from "./Figure.js";
+export * from "./Heading.js";
+export * from "./Image.js";
+export * from "./List.js";
+export * from "./Paragraph.js";
+export * from "./Preformatted.js";
+export * from "./Prose.js";
+export * from "./Section.js";
+export * from "./Subheading.js";
+export * from "./Table.js";
+export * from "./Video.js";

package/ui/block/index.js

@@ -0,0 +1,17 @@
+export * from "./Address.js";
+export * from "./Blockquote.js";
+export * from "./Card.js";
+export * from "./Divider.js";
+export * from "./Element.js";
+export * from "./Elements.js";
+export * from "./Figure.js";
+export * from "./Heading.js";
+export * from "./Image.js";
+export * from "./List.js";
+export * from "./Paragraph.js";
+export * from "./Preformatted.js";
+export * from "./Prose.js";
+export * from "./Section.js";
+export * from "./Subheading.js";
+export * from "./Table.js";
+export * from "./Video.js";

package/ui/block/index.ts

@@ -0,0 +1,17 @@
+export * from "./Address.js";
+export * from "./Blockquote.js";
+export * from "./Card.js";
+export * from "./Divider.js";
+export * from "./Element.js";
+export * from "./Elements.js";
+export * from "./Figure.js";
+export * from "./Heading.js";
+export * from "./Image.js";
+export * from "./List.js";
+export * from "./Paragraph.js";
+export * from "./Preformatted.js";
+export * from "./Prose.js";
+export * from "./Section.js";
+export * from "./Subheading.js";
+export * from "./Table.js";
+export * from "./Video.js";

package/ui/dialog/Dialog.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { Callback } from "../../util/function.js";
+import type { ButtonVariants } from "../form/Button.js";
+export interface DialogProps {
+    children?: ReactNode;
+    onClose?: Callback;
+}
+export declare const Dialog: import("react").MemoExoticComponent<({ children, onClose, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element>;
+export interface DialogCloseButtonProps extends ButtonVariants {
+    children?: ReactNode | undefined;
+}
+/** Button that closes its wrapping dialog with an X icon. */
+export declare function DialogCloseButton({ children, ...variants }: DialogCloseButtonProps): ReactElement;

package/ui/dialog/Dialog.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import { memo, Suspense, useEffect, useRef } from "react";
+import { getModuleClass } from "../util/css.js";
+import styles from "./Dialog.module.css";
+export const Dialog = memo(({ children, onClose, ...props }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        ref.current?.showModal();
+    }, []);
+    return (_jsx(Suspense, { fallback: null, children: _jsxs("dialog", { ref: ref, className: styles.dialog, onClick: _closeOnBackdropClick, onClose: onClose, ...props, children: [children, _jsx("div", { className: styles.close, children: _jsx(DialogCloseButton, { plain: true }) })] }) }));
+});
+/** When the user clicks anywhere on a `<dialog>` element (and the click isn't on a link etc), then close the dialog. */
+function _closeOnBackdropClick({ currentTarget, target }) {
+    // Close the dialog when clicking on the dialog itself (but not its children).
+    if (currentTarget === target)
+        currentTarget.close();
+    // Close the dialog when clicking on links or buttons in a `<nav>` element.
+    if (target instanceof Element && target.closest("a:any-link, nav button:enabled"))
+        currentTarget.close();
+}
+/** Button that closes its wrapping dialog with an X icon. */
+export function DialogCloseButton({ children = _jsx(XMarkIcon, {}), ...variants }) {
+    return (_jsx("button", { type: "button", title: "Close", className: getModuleClass(styles, "button", variants), onClick: _closeOnButtonClick, children: children }));
+}
+function _closeOnButtonClick({ currentTarget }) {
+    currentTarget.closest("dialog")?.close();
+}

package/ui/dialog/Dialog.module.css

@@ -0,0 +1,29 @@
+.dialog {
+	display: none;
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	margin: 0;
+	width: 100vw;
+	height: 100vh;
+	align-items: center;
+	justify-content: center;
+	background: var(--dialog-color-overlay, var(--color-overlay));
+	padding: var(--dialog-padding, var(--spacing-block));
+	opacity: 0;
+	transition: opacity var(--dialog-transition-duration, var(--duration-fast)) ease-in-out;
+
+	&[open] {
+		opacity: 1;
+	}
+
+	@starting-style {
+		opacity: 0;
+	}
+}
+
+.close {
+	position: fixed;
+	top: var(--dialog-close-offset, var(--spacing-element));
+	right: var(--dialog-close-offset, var(--spacing-element));
+}