shelving 1.199.2 → 1.200.0

package/ui/dialog/Dialog.tsx

@@ -0,0 +1,57 @@
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import { type MouseEvent, memo, type ReactElement, type ReactNode, Suspense, useEffect, useRef } from "react";
+import type { Callback } from "../../util/function.js";
+import type { ButtonVariants } from "../form/Button.js";
+import { getModuleClass } from "../util/css.js";
+import styles from "./Dialog.module.css";
+
+export interface DialogProps {
+	children?: ReactNode;
+	onClose?: Callback;
+}
+
+export const Dialog = memo(({ children, onClose, ...props }: DialogProps) => {
+	const ref = useRef<HTMLDialogElement>(null);
+
+	useEffect(() => {
+		ref.current?.showModal();
+	}, []);
+
+	return (
+		<Suspense fallback={null}>
+			{/** biome-ignore lint/a11y/useKeyWithClickEvents: Dialogs also show a close button. */}
+			<dialog ref={ref} className={styles.dialog} onClick={_closeOnBackdropClick} onClose={onClose} {...props}>
+				{children}
+				<div className={styles.close}>
+					<DialogCloseButton plain />
+				</div>
+			</dialog>
+		</Suspense>
+	);
+});
+
+/** 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 }: MouseEvent<HTMLDialogElement>): void {
+	// 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();
+}
+
+export interface DialogCloseButtonProps extends ButtonVariants {
+	children?: ReactNode | undefined;
+}
+
+/** Button that closes its wrapping dialog with an X icon. */
+export function DialogCloseButton({ children = <XMarkIcon />, ...variants }: DialogCloseButtonProps): ReactElement {
+	return (
+		<button type="button" title="Close" className={getModuleClass(styles, "button", variants)} onClick={_closeOnButtonClick}>
+			{children}
+		</button>
+	);
+}
+
+function _closeOnButtonClick({ currentTarget }: MouseEvent<HTMLButtonElement>): void {
+	currentTarget.closest("dialog")?.close();
+}

package/ui/dialog/Dialogs.d.ts

@@ -0,0 +1,23 @@
+import { type ReactElement, type ReactNode } from "react";
+import { ArrayStore } from "../../store/ArrayStore.js";
+/** Store a list of dialogs. */
+export declare class DialogsStore extends ArrayStore<ReactElement> {
+    /** Show a new dialog. */
+    show(children: ReactNode): void;
+    /** Hide all currently visible dialogs. */
+    hideAll(): void;
+}
+/** Return the current dialogs context. */
+export declare function requireDialogs(): DialogsStore;
+declare const _componentProps: unique symbol;
+export interface DialogsContextProps {
+    children: ReactNode;
+}
+export interface DialogsProps {
+    readonly [_componentProps]?: never;
+}
+/** Create a new `<DialogsStore>` for a set of elements. */
+export declare function DialogsContext({ children }: DialogsContextProps): ReactElement;
+/** Output the list of dialogs from a `DialogsStore` in the current `DialogsContext`. */
+export declare function Dialogs(): ReactNode | null;
+export {};

package/ui/dialog/Dialogs.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+import { useInstance } from "../../react/useInstance.js";
+import { useStore } from "../../react/useStore.js";
+import { ArrayStore } from "../../store/ArrayStore.js";
+import { getRandomKey } from "../../util/random.js";
+import { Dialog } from "./Dialog.js";
+/** How long before a hidden dialogs are removed from the DOM (allow time for animates to complete). */
+const REMOVE_DELAY = 500;
+/** Store a list of dialogs. */
+export class DialogsStore extends ArrayStore {
+    /** Show a new dialog. */
+    show(children) {
+        const dialog = (_jsx(Dialog
+        // Add a `key=""` so dialogs can be rendered directly and added/removed in any order.
+        , { 
+            // When the `<dialog>` is closed, wait for the animation to finish then remove the dialog from the list.
+            onClose: () => {
+                setTimeout(() => this.delete(dialog), REMOVE_DELAY);
+            }, children: children }, getRandomKey()));
+        this.add(dialog);
+    }
+    /** Hide all currently visible dialogs. */
+    hideAll() {
+        this.delete(...this.value);
+    }
+}
+/** Context to get the current `DialogsStore` created by a `<DialogsWrapper>`. */
+const _DialogsContext = createContext(new DialogsStore());
+_DialogsContext.displayName = "DialogsContext";
+/** Return the current dialogs context. */
+export function requireDialogs() {
+    return use(_DialogsContext);
+}
+/** Create a new `<DialogsStore>` for a set of elements. */
+export function DialogsContext({ children }) {
+    return _jsx(_DialogsContext, { value: useInstance(DialogsStore), children: children });
+}
+/** Output the list of dialogs from a `DialogsStore` in the current `DialogsContext`. */
+export function Dialogs() {
+    const dialogs = useStore(requireDialogs());
+    return dialogs ? dialogs.value : null;
+}

package/ui/dialog/Dialogs.tsx

@@ -0,0 +1,64 @@
+import { createContext, type ReactElement, type ReactNode, use } from "react";
+import { useInstance } from "../../react/useInstance.js";
+import { useStore } from "../../react/useStore.js";
+import { ArrayStore } from "../../store/ArrayStore.js";
+import { getRandomKey } from "../../util/random.js";
+import { Dialog } from "./Dialog.js";
+
+/** How long before a hidden dialogs are removed from the DOM (allow time for animates to complete). */
+const REMOVE_DELAY = 500;
+
+/** Store a list of dialogs. */
+export class DialogsStore extends ArrayStore<ReactElement> {
+	/** Show a new dialog. */
+	show(children: ReactNode) {
+		const dialog = (
+			<Dialog
+				// Add a `key=""` so dialogs can be rendered directly and added/removed in any order.
+				key={getRandomKey()}
+				// When the `<dialog>` is closed, wait for the animation to finish then remove the dialog from the list.
+				onClose={() => {
+					setTimeout(() => this.delete(dialog), REMOVE_DELAY);
+				}}
+			>
+				{children}
+			</Dialog>
+		);
+		this.add(dialog);
+	}
+
+	/** Hide all currently visible dialogs. */
+	hideAll() {
+		this.delete(...this.value);
+	}
+}
+
+/** Context to get the current `DialogsStore` created by a `<DialogsWrapper>`. */
+const _DialogsContext = createContext<DialogsStore>(new DialogsStore());
+_DialogsContext.displayName = "DialogsContext";
+
+/** Return the current dialogs context. */
+export function requireDialogs(): DialogsStore {
+	return use(_DialogsContext);
+}
+
+declare const _componentProps: unique symbol;
+
+export interface DialogsContextProps {
+	children: ReactNode;
+}
+
+export interface DialogsProps {
+	readonly [_componentProps]?: never;
+}
+
+/** Create a new `<DialogsStore>` for a set of elements. */
+export function DialogsContext({ children }: DialogsContextProps): ReactElement {
+	return <_DialogsContext value={useInstance(DialogsStore)}>{children}</_DialogsContext>;
+}
+
+/** Output the list of dialogs from a `DialogsStore` in the current `DialogsContext`. */
+export function Dialogs(): ReactNode | null {
+	const dialogs = useStore(requireDialogs());
+	return dialogs ? dialogs.value : null;
+}

package/ui/dialog/Modal.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement, ReactNode } from "react";
+export type ModalProps = {
+    children?: ReactNode | undefined;
+};
+export declare function Modal({ children }: ModalProps): ReactElement;

package/ui/dialog/Modal.js

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

package/ui/dialog/Modal.module.css

@@ -0,0 +1,11 @@
+.modal {
+	margin: auto;
+	max-width: 100%;
+	border-radius: var(--modal-radius, var(--radius-block));
+	border: var(--modal-border, var(--border-block)) solid var(--modal-color-border, var(--color-border));
+	background: var(--modal-color-bg, var(--color-bg));
+	padding: var(--modal-padding, var(--spacing-block));
+	color: var(--modal-color-text, var(--color-text));
+	box-shadow: var(--modal-shadow, var(--shadow-block));
+	width: var(--modal-width, var(--width-narrow));
+}

package/ui/dialog/Modal.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement, ReactNode } from "react";
+import styles from "./Modal.module.css";
+
+export type ModalProps = {
+	children?: ReactNode | undefined;
+};
+
+export function Modal({ children }: ModalProps): ReactElement {
+	return <aside className={styles.modal}>{children}</aside>;
+}

package/ui/dialog/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Dialog.js";
+export * from "./Dialogs.js";
+export * from "./Modal.js";

package/ui/dialog/index.js

@@ -0,0 +1,3 @@
+export * from "./Dialog.js";
+export * from "./Dialogs.js";
+export * from "./Modal.js";

package/ui/dialog/index.ts

@@ -0,0 +1,3 @@
+export * from "./Dialog.js";
+export * from "./Dialogs.js";
+export * from "./Modal.js";

package/ui/form/ArrayInput.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import type { Schema } from "../../schema/Schema.js";
+import { type ImmutableArray } from "../../util/array.js";
+import { type ValueInputProps } from "./Input.js";
+export interface ArrayInputProps<T> extends ValueInputProps<ImmutableArray<T>> {
+    one?: string;
+    many?: string;
+    min?: number | undefined;
+    max?: number | undefined;
+    /** Schema for the items in the repeater. */
+    items: Schema<T>;
+}
+export declare function ArrayInput<T>(props: ArrayInputProps<T>): ReactElement;

package/ui/form/ArrayInput.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import { omitArrayIndex, withArrayIndex } from "../../util/array.js";
+import { splitMessage } from "../../util/error.js";
+import { formatUnit } from "../../util/format.js";
+import { Elements } from "../block/Elements.js";
+import { Button } from "./Button.js";
+import { Input } from "./Input.js";
+import { SchemaInput } from "./SchemaInput.js";
+export function ArrayInput({ name, 
+// title,
+placeholder, required = false, disabled = false, message = "", value = [], onValue, one = "item", many = `${one}s`, min = 0, max = Number.POSITIVE_INFINITY, items, }) {
+    const messages = splitMessage(message);
+    const length = value.length;
+    const disableRemove = disabled || length <= min;
+    const addNewItem = () => onValue([...value, items.value]);
+    return (_jsxs(Elements, { column: true, children: [length ? (value.map((v, i) => {
+                const k = i.toString();
+                return (_jsxs(Elements, { children: [_jsx(SchemaInput, { name: k, schema: items, value: v, onValue: x => onValue(withArrayIndex(value, i, x)), message: messages[k], disabled: disabled }), _jsx(Button, { onClick: () => onValue(omitArrayIndex(value, i)), disabled: disableRemove, title: disableRemove ? `Minimum ${formatUnit(min, one, { unitDisplay: "long", one, many })}` : `Remove ${one}`, children: _jsx(XMarkIcon, {}) })] }, k));
+            })) : (_jsx(Input, { onClick: addNewItem, name: name, required: required && min > 1, disabled: disabled, children: placeholder })), _jsxs(Elements, { children: [_jsxs(Button //
+                    , { onClick: addNewItem, disabled: disabled || (typeof max === "number" && length >= max), small: true, children: [_jsx(PlusIcon, {}), " Add ", one] }), length && min < 1 ? (_jsxs(Button //
+                    , { onClick: () => onValue([]), small: true, children: [_jsx(XMarkIcon, {}), " Clear ", many] })) : null] })] }));
+}

package/ui/form/ArrayInput.tsx

@@ -0,0 +1,90 @@
+import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import type { ReactElement } from "react";
+import type { Schema } from "../../schema/Schema.js";
+import { type ImmutableArray, omitArrayIndex, withArrayIndex } from "../../util/array.js";
+import { splitMessage } from "../../util/error.js";
+import { formatUnit } from "../../util/format.js";
+import { Elements } from "../block/Elements.js";
+import { Button } from "./Button.js";
+import { Input, type ValueInputProps } from "./Input.js";
+import { SchemaInput } from "./SchemaInput.js";
+
+export interface ArrayInputProps<T> extends ValueInputProps<ImmutableArray<T>> {
+	one?: string;
+	many?: string;
+	min?: number | undefined;
+	max?: number | undefined;
+	/** Schema for the items in the repeater. */
+	items: Schema<T>;
+}
+
+export function ArrayInput<T>(props: ArrayInputProps<T>): ReactElement;
+export function ArrayInput({
+	name,
+	// title,
+	placeholder,
+	required = false,
+	disabled = false,
+	message = "",
+	value = [],
+	onValue,
+	one = "item",
+	many = `${one}s`,
+	min = 0,
+	max = Number.POSITIVE_INFINITY,
+	items,
+}: ArrayInputProps<unknown>): ReactElement {
+	const messages = splitMessage(message);
+	const length = value.length;
+	const disableRemove = disabled || length <= min;
+	const addNewItem = () => onValue([...value, items.value]);
+	return (
+		<Elements column>
+			{length ? (
+				value.map((v, i) => {
+					const k = i.toString();
+					return (
+						<Elements key={k}>
+							<SchemaInput
+								name={k}
+								schema={items}
+								value={v}
+								onValue={x => onValue(withArrayIndex(value, i, x))}
+								message={messages[k]}
+								disabled={disabled}
+							/>
+							<Button
+								onClick={() => onValue(omitArrayIndex(value, i))}
+								disabled={disableRemove}
+								title={disableRemove ? `Minimum ${formatUnit(min, one, { unitDisplay: "long", one, many })}` : `Remove ${one}`}
+							>
+								<XMarkIcon />
+							</Button>
+						</Elements>
+					);
+				})
+			) : (
+				<Input onClick={addNewItem} name={name} required={required && min > 1} disabled={disabled}>
+					{placeholder}
+				</Input>
+			)}
+			<Elements>
+				<Button //
+					onClick={addNewItem}
+					disabled={disabled || (typeof max === "number" && length >= max)}
+					small
+				>
+					<PlusIcon /> Add {one}
+				</Button>
+				{length && min < 1 ? (
+					<Button //
+						onClick={() => onValue([])}
+						small
+					>
+						<XMarkIcon /> Clear {many}
+					</Button>
+				) : null}
+			</Elements>
+		</Elements>
+	);
+}

package/ui/form/ArrayRadioInputs.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement, ReactNode } from "react";
+import type { ImmutableArray } from "../../util/array.js";
+import type { ValueInputProps } from "./Input.js";
+export interface ArrayRadioInputsProps<T> extends ValueInputProps<T> {
+    /** Array of values to show in the list of radios. */
+    items: ImmutableArray<T>;
+    /** Function that formats an obscure item into a `ReactNode` for display. */
+    formatter?: ((value: T) => ReactNode) | undefined;
+}
+/**
+ * Output a list of `<RadioInput>` elements for each item in an array.
+ * - The items can be any type, and can be formatted for output through an optional `formatter()` function.
+ * - A `placeholder` option is shown at the bottom if `required=false`.
+ */
+export declare function ArrayRadioInputs<T>({ value, onValue, required, items, formatter, ...props }: ArrayRadioInputsProps<T>): ReactElement;

package/ui/form/ArrayRadioInputs.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatValue } from "../../util/format.js";
+import { Elements } from "../block/Elements.js";
+import { RadioInput } from "./RadioInput.js";
+/**
+ * Output a list of `<RadioInput>` elements for each item in an array.
+ * - The items can be any type, and can be formatted for output through an optional `formatter()` function.
+ * - A `placeholder` option is shown at the bottom if `required=false`.
+ */
+export function ArrayRadioInputs({ value, onValue, required = false, items, formatter = formatValue, ...props }) {
+    return (_jsxs(Elements, { column: true, children: [items.map((v, i) => {
+                return (_jsx(RadioInput //
+                , { value: value === v, onValue: () => onValue(v), required: required, ...props, children: formatter(v) }, i.toString()));
+            }), !required ? (_jsx(RadioInput //
+            , { value: !value, onValue: () => onValue(undefined), required: required, ...props })) : null] }));
+}

package/ui/form/ArrayRadioInputs.tsx

@@ -0,0 +1,53 @@
+import type { ReactElement, ReactNode } from "react";
+import type { ImmutableArray } from "../../util/array.js";
+import { formatValue } from "../../util/format.js";
+import { Elements } from "../block/Elements.js";
+import type { ValueInputProps } from "./Input.js";
+import { RadioInput } from "./RadioInput.js";
+
+export interface ArrayRadioInputsProps<T> extends ValueInputProps<T> {
+	/** Array of values to show in the list of radios. */
+	items: ImmutableArray<T>;
+	/** Function that formats an obscure item into a `ReactNode` for display. */
+	formatter?: ((value: T) => ReactNode) | undefined;
+}
+
+/**
+ * Output a list of `<RadioInput>` elements for each item in an array.
+ * - The items can be any type, and can be formatted for output through an optional `formatter()` function.
+ * - A `placeholder` option is shown at the bottom if `required=false`.
+ */
+export function ArrayRadioInputs<T>({
+	value,
+	onValue,
+	required = false,
+	items,
+	formatter = formatValue,
+	...props
+}: ArrayRadioInputsProps<T>): ReactElement {
+	return (
+		<Elements column>
+			{items.map((v, i) => {
+				return (
+					<RadioInput //
+						key={i.toString()}
+						value={value === v}
+						onValue={() => onValue(v)}
+						required={required}
+						{...props}
+					>
+						{formatter(v)}
+					</RadioInput>
+				);
+			})}
+			{!required ? (
+				<RadioInput //
+					value={!value}
+					onValue={() => onValue(undefined)}
+					required={required}
+					{...props}
+				/>
+			) : null}
+		</Elements>
+	);
+}

package/ui/form/Button.d.ts

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+import { type ElementsVariants } from "../block/Elements.js";
+import { type StatusVariants } from "../notice/Status.js";
+import BUTTON_CSS from "./Button.module.css";
+import { type ClickableProps } from "./Clickable.js";
+/** Variants for buttons. */
+export interface ButtonVariants extends ElementsVariants, StatusVariants {
+    /** This is the default button in a form and should be displayed stronger. */
+    strong?: boolean | undefined;
+    /** Add plain styling (background only appears on hover or focus). */
+    plain?: boolean | undefined;
+    /** Add outline styling (has no background until hover or focus). */
+    outline?: boolean | undefined;
+    /** Make the button appear smaller. */
+    small?: boolean | undefined;
+    /** Make the button content-width. */
+    fit?: boolean | undefined;
+}
+export declare const ELEMENTS_BUTTON_CLASS: string;
+interface ButtonProps extends ButtonVariants, ClickableProps {
+}
+/** Return either a `<button>` or an `<a href="">` styled as an button, based on whether an `onClick` or `href` prop is provided. */
+export declare function Button({ disabled, href, onClick, title, target, download, children, ...variants }: ButtonProps): ReactElement;
+export { BUTTON_CSS };

package/ui/form/Button.js

@@ -0,0 +1,21 @@
+import { ELEMENTS_CSS } from "../block/Elements.js";
+import { getStatusClass } from "../notice/Status.js";
+import { getClass, getModuleClass } from "../util/css.js";
+import BUTTON_CSS from "./Button.module.css";
+import { getClickable } from "./Clickable.js";
+// Precomposed styles.
+export const ELEMENTS_BUTTON_CLASS = getClass(BUTTON_CSS.button, ELEMENTS_CSS.elements, ELEMENTS_CSS.center);
+/** Return either a `<button>` or an `<a href="">` styled as an button, based on whether an `onClick` or `href` prop is provided. */
+export function Button({ disabled, href, onClick, title, target, download, children, ...variants }) {
+    return getClickable({
+        disabled,
+        href,
+        onClick,
+        title,
+        target,
+        download,
+        children,
+    }, getClass(ELEMENTS_BUTTON_CLASS, //
+    getModuleClass(BUTTON_CSS, variants), getModuleClass(ELEMENTS_CSS, variants), getStatusClass(variants)));
+}
+export { BUTTON_CSS };

package/ui/form/Button.module.css

@@ -0,0 +1,83 @@
+.button {
+	/* Box */
+	display: flex;
+	box-sizing: border-box;
+	inline-size: 100%;
+	min-inline-size: fit-content; /* Buttons never go smaller than their contents. */
+	border-radius: var(--button-radius, var(--radius-element));
+	border: var(--button-border, var(--border-element)) solid var(--button-color-border, var(--color-border));
+	padding-block: var(--button-padding, var(--spacing-element));
+	padding-inline: var(--button-padding, var(--spacing-element));
+	margin-inline: 0;
+	margin-block: var(--button-spacing, var(--spacing-element));
+	flex-grow: var(--grow-timid); /* When displayed in flex rows inputs expand timidly compared to other elements inputs. */
+
+	/* Content */
+	white-space: nowrap;
+	overflow-wrap: normal;
+	text-wrap: nowrap;
+	word-break: normal;
+
+	/* Style */
+	color: var(--button-color-text, var(--color-quiet));
+	background: var(--button-color-bg, var(--color-surface));
+	text-decoration: none;
+	transition: all 120ms ease-in-out;
+	cursor: pointer;
+	outline: var(--button-focus-border, var(--border-focus)) solid transparent;
+	outline-offset: calc(0px - var(--button-border, var(--border-element)));
+
+	/* Typography */
+	font-family: var(--button-font, var(--font-body));
+	font-weight: var(--button-weight, var(--weight-strong));
+	font-size: var(--button-size, var(--size-normal));
+	line-height: var(--button-leading, var(--leading-normal));
+
+	/* Pseudo-classes */
+	&:disabled,
+	&:where(a:not(:any-link)) {
+		opacity: var(--button-disabled-opacity, 0.5);
+		cursor: default;
+	}
+	&:where(:enabled:hover, :focus:not(:focus-visible)) {
+		background: color-mix(in srgb, var(--button-color-bg, var(--color-surface)) 85%, white);
+		border-color: color-mix(in srgb, var(--button-color-border, var(--color-border)) 85%, var(--button-color-text, var(--color-text)));
+	}
+	&:first-child {
+		margin-block-start: 0;
+	}
+	&:last-child {
+		margin-block-end: 0;
+	}
+
+	/* Variants */
+	&.small {
+		padding-block: var(--button-small-padding, var(--spacing-small));
+		padding-inline: var(--button-small-padding, var(--spacing-small));
+	}
+	&.fit {
+		inline-size: fit-content;
+	}
+	&.strong {
+		color: var(--button-strong-contrast, var(--color-contrast));
+		border-color: var(--button-strong-contrast, var(--color-text));
+		background: var(--button-strong-contrast, var(--color-text));
+
+		&:where(:enabled:hover, :focus:not(:focus-visible)) {
+			background: color-mix(in srgb, var(--button-strong-contrast, var(--color-text)) 80%, white);
+		}
+	}
+	&.plain:not(:hover, :focus) {
+		border-color: transparent;
+		background: transparent;
+	}
+	&.outline:not(:hover, :focus) {
+		background: transparent;
+	}
+
+	/* Visible focus ring overrides all */
+	&:focus-visible {
+		outline-color: var(--button-color-focus, var(--focus-text));
+		border-color: var(--button-color-focus, var(--focus-text));
+	}
+}

package/ui/form/Button.tsx

@@ -0,0 +1,48 @@
+import type { ReactElement } from "react";
+import { ELEMENTS_CSS, type ElementsVariants } from "../block/Elements.js";
+import { getStatusClass, type StatusVariants } from "../notice/Status.js";
+import { getClass, getModuleClass } from "../util/css.js";
+import BUTTON_CSS from "./Button.module.css";
+import { type ClickableProps, getClickable } from "./Clickable.js";
+
+/** Variants for buttons. */
+export interface ButtonVariants extends ElementsVariants, StatusVariants {
+	/** This is the default button in a form and should be displayed stronger. */
+	strong?: boolean | undefined;
+	/** Add plain styling (background only appears on hover or focus). */
+	plain?: boolean | undefined;
+	/** Add outline styling (has no background until hover or focus). */
+	outline?: boolean | undefined;
+	/** Make the button appear smaller. */
+	small?: boolean | undefined;
+	/** Make the button content-width. */
+	fit?: boolean | undefined;
+}
+
+// Precomposed styles.
+export const ELEMENTS_BUTTON_CLASS = getClass(BUTTON_CSS.button, ELEMENTS_CSS.elements, ELEMENTS_CSS.center);
+
+interface ButtonProps extends ButtonVariants, ClickableProps {}
+
+/** Return either a `<button>` or an `<a href="">` styled as an button, based on whether an `onClick` or `href` prop is provided. */
+export function Button({ disabled, href, onClick, title, target, download, children, ...variants }: ButtonProps): ReactElement {
+	return getClickable(
+		{
+			disabled,
+			href,
+			onClick,
+			title,
+			target,
+			download,
+			children,
+		},
+		getClass(
+			ELEMENTS_BUTTON_CLASS, //
+			getModuleClass(BUTTON_CSS, variants),
+			getModuleClass(ELEMENTS_CSS, variants),
+			getStatusClass(variants), // Buttons have status colours.
+		),
+	);
+}
+
+export { BUTTON_CSS };

package/ui/form/ButtonInput.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from "react";
+import { type ClickableProps } from "./Clickable.js";
+import { type InputProps } from "./Input.js";
+export interface ButtonInputProps extends InputProps, ClickableProps {
+}
+/** Return either a `<button>` or an `<a href="">` styled as an input, based on whether an `onClick` or `href` prop is provided. */
+export declare function ButtonInput({ title, placeholder, disabled, href, onClick, target, download, children }: ButtonInputProps): ReactElement;