shelving 1.236.0 → 1.236.2

package/ui/form/TextInput.d.ts

@@ -2,6 +2,11 @@ import type { ReactElement } from "react";
 import type { StringInputType } from "../../schema/StringSchema.js";
 import { type ValueInputProps } from "./Input.js";
 type TextFormatter = (str: string) => string;
+/**
+ * Props for `TextInput`, a single- or multi-line text input bound to a `string` value.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/form/TextInput/TextInputProps
+ */
 export interface TextInputProps extends ValueInputProps<string> {
     rows?: number | undefined;
     multiline?: boolean;
@@ -11,6 +16,16 @@ export interface TextInputProps extends ValueInputProps<string> {
     /** Optional formatter — when provided the value is reformatted on blur and when initially displayed. */
     formatter?: TextFormatter | undefined;
 }
+/**
+ * Text input bound to a `string` value, rendered as an `<input>` or a `<textarea>` when `rows > 1`.
+ * - Applies an optional `formatter` on initial display and on blur.
+ * - Multiline mode auto-grows the textarea to fit its content.
+ *
+ * @param props Props including `value`, `onValue`, `rows`, `input` type, `min`/`max` length, and `formatter`.
+ * @returns A text `<input>` or `<textarea>` element.
+ * @example <TextInput name="name" value={name} onValue={setName} />
+ * @see https://dhoulb.github.io/shelving/ui/form/TextInput/TextInput
+ */
 export declare function TextInput({ name, title, placeholder, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
 required, disabled, message, value, onValue, input, min, max, rows, formatter, }: TextInputProps): ReactElement;
 export {};

package/ui/form/TextInput.js

@@ -1,6 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PASSTHROUGH } from "../../util/function.js";
 import { MULTILINE_TEXT_INPUT_CLASS, TEXT_INPUT_CLASS } from "./Input.js";
+/**
+ * Text input bound to a `string` value, rendered as an `<input>` or a `<textarea>` when `rows > 1`.
+ * - Applies an optional `formatter` on initial display and on blur.
+ * - Multiline mode auto-grows the textarea to fit its content.
+ *
+ * @param props Props including `value`, `onValue`, `rows`, `input` type, `min`/`max` length, and `formatter`.
+ * @returns A text `<input>` or `<textarea>` element.
+ * @example <TextInput name="name" value={name} onValue={setName} />
+ * @see https://dhoulb.github.io/shelving/ui/form/TextInput/TextInput
+ */
 export function TextInput({ name, title = "", placeholder = title, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
 required = false, disabled = false, message = "", value, onValue, input = "text", min = 0, max = Number.POSITIVE_INFINITY, rows = 1, formatter = PASSTHROUGH, }) {
     const onBlur = ({ currentTarget }) => {

package/ui/form/TextInput.tsx

@@ -5,6 +5,11 @@ import { MULTILINE_TEXT_INPUT_CLASS, TEXT_INPUT_CLASS, type ValueInputProps } fr
 
 type TextFormatter = (str: string) => string;
 
+/**
+ * Props for `TextInput`, a single- or multi-line text input bound to a `string` value.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/form/TextInput/TextInputProps
+ */
 export interface TextInputProps extends ValueInputProps<string> {
 	rows?: number | undefined;
 	multiline?: boolean;
@@ -15,6 +20,16 @@ export interface TextInputProps extends ValueInputProps<string> {
 	formatter?: TextFormatter | undefined;
 }
 
+/**
+ * Text input bound to a `string` value, rendered as an `<input>` or a `<textarea>` when `rows > 1`.
+ * - Applies an optional `formatter` on initial display and on blur.
+ * - Multiline mode auto-grows the textarea to fit its content.
+ *
+ * @param props Props including `value`, `onValue`, `rows`, `input` type, `min`/`max` length, and `formatter`.
+ * @returns A text `<input>` or `<textarea>` element.
+ * @example <TextInput name="name" value={name} onValue={setName} />
+ * @see https://dhoulb.github.io/shelving/ui/form/TextInput/TextInput
+ */
 export function TextInput({
 	name,
 	title = "",

package/ui/inline/Code.d.ts

@@ -2,10 +2,39 @@ import type { ReactElement } from "react";
 import type { ColorVariants } from "../style/Color.js";
 import { type TypographyVariants } from "../style/Typography.js";
 import type { OptionalChildProps } from "../util/index.js";
+/**
+ * CSS class applied to the root element of every `Code`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/CODE_CLASS
+ */
 export declare const CODE_CLASS: string | undefined;
+/**
+ * CSS class that strips the default background and padding when `Code` is rendered `plain`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/CODE_PLAIN_CLASS
+ */
 export declare const CODE_PLAIN_CLASS: string | undefined;
+/**
+ * CSS class that styles `Code` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/CODE_PROSE_CLASS
+ */
 export declare const CODE_PROSE_CLASS: string | undefined;
+/**
+ * Props for `Code` — colour and typography variants, optional `children`, plus a `plain` toggle.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/CodeProps
+ */
 export interface CodeProps extends ColorVariants, TypographyVariants, OptionalChildProps {
     plain?: boolean | undefined;
 }
+/**
+ * Inline code span — renders a `<code>` element.
+ * - Pass `plain` to drop the default background and padding.
+ *
+ * @param props Colour and typography variants, `children`, plus an optional `plain` toggle.
+ * @returns Rendered `<code>` element.
+ * @example <Code>npm install</Code>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/Code
+ */
 export declare function Code({ children, plain, ...props }: CodeProps): ReactElement;

package/ui/inline/Code.js

@@ -2,9 +2,33 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { getTypographyClass } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import CODE_CSS from "./Code.module.css";
+/**
+ * CSS class applied to the root element of every `Code`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/CODE_CLASS
+ */
 export const CODE_CLASS = getModuleClass(CODE_CSS, "code");
+/**
+ * CSS class that strips the default background and padding when `Code` is rendered `plain`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/CODE_PLAIN_CLASS
+ */
 export const CODE_PLAIN_CLASS = getModuleClass(CODE_CSS, "plain");
+/**
+ * CSS class that styles `Code` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/CODE_PROSE_CLASS
+ */
 export const CODE_PROSE_CLASS = getModuleClass(CODE_CSS, "prose");
+/**
+ * Inline code span — renders a `<code>` element.
+ * - Pass `plain` to drop the default background and padding.
+ *
+ * @param props Colour and typography variants, `children`, plus an optional `plain` toggle.
+ * @returns Rendered `<code>` element.
+ * @example <Code>npm install</Code>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/Code
+ */
 export function Code({ children, plain, ...props }) {
     return (_jsx("code", { className: getClass(CODE_CLASS, //
         plain && CODE_PLAIN_CLASS, getTypographyClass(props)), children: children }));

package/ui/inline/Code.tsx

@@ -5,14 +5,45 @@ import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/index.js";
 import CODE_CSS from "./Code.module.css";
 
+/**
+ * CSS class applied to the root element of every `Code`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/CODE_CLASS
+ */
 export const CODE_CLASS = getModuleClass(CODE_CSS, "code");
+
+/**
+ * CSS class that strips the default background and padding when `Code` is rendered `plain`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/CODE_PLAIN_CLASS
+ */
 export const CODE_PLAIN_CLASS = getModuleClass(CODE_CSS, "plain");
+
+/**
+ * CSS class that styles `Code` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/CODE_PROSE_CLASS
+ */
 export const CODE_PROSE_CLASS = getModuleClass(CODE_CSS, "prose");
 
+/**
+ * Props for `Code` — colour and typography variants, optional `children`, plus a `plain` toggle.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/CodeProps
+ */
 export interface CodeProps extends ColorVariants, TypographyVariants, OptionalChildProps {
 	plain?: boolean | undefined;
 }
 
+/**
+ * Inline code span — renders a `<code>` element.
+ * - Pass `plain` to drop the default background and padding.
+ *
+ * @param props Colour and typography variants, `children`, plus an optional `plain` toggle.
+ * @returns Rendered `<code>` element.
+ * @example <Code>npm install</Code>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Code/Code
+ */
 export function Code({ children, plain, ...props }: CodeProps): ReactElement {
 	return (
 		<code

package/ui/inline/Deleted.d.ts

@@ -1,7 +1,30 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
+/**
+ * CSS class applied to the root element of every `Deleted`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Deleted/DELETED_CLASS
+ */
 export declare const DELETED_CLASS: string | undefined;
+/**
+ * CSS class that styles `Deleted` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Deleted/DELETED_PROSE_CLASS
+ */
 export declare const DELETED_PROSE_CLASS: string | undefined;
+/**
+ * Props for `Deleted` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Deleted/DeletedProps
+ */
 export interface DeletedProps extends OptionalChildProps {
 }
+/**
+ * Deleted text — renders a `<del>` element to mark content removed from a document.
+ *
+ * @param props The `children` to render as deleted text.
+ * @returns Rendered `<del>` element.
+ * @example <Deleted>old price</Deleted>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Deleted/Deleted
+ */
 export declare function Deleted({ children }: DeletedProps): ReactElement;

package/ui/inline/Deleted.js

@@ -1,8 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getModuleClass } from "../util/css.js";
 import DELETED_CSS from "./Deleted.module.css";
+/**
+ * CSS class applied to the root element of every `Deleted`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Deleted/DELETED_CLASS
+ */
 export const DELETED_CLASS = getModuleClass(DELETED_CSS, "definitions");
+/**
+ * CSS class that styles `Deleted` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Deleted/DELETED_PROSE_CLASS
+ */
 export const DELETED_PROSE_CLASS = getModuleClass(DELETED_CSS, "prose");
+/**
+ * Deleted text — renders a `<del>` element to mark content removed from a document.
+ *
+ * @param props The `children` to render as deleted text.
+ * @returns Rendered `<del>` element.
+ * @example <Deleted>old price</Deleted>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Deleted/Deleted
+ */
 export function Deleted({ children }) {
     return _jsx("del", { className: DELETED_CLASS, children: children });
 }

package/ui/inline/Deleted.tsx

@@ -3,11 +3,35 @@ import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import DELETED_CSS from "./Deleted.module.css";
 
+/**
+ * CSS class applied to the root element of every `Deleted`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Deleted/DELETED_CLASS
+ */
 export const DELETED_CLASS = getModuleClass(DELETED_CSS, "definitions");
+
+/**
+ * CSS class that styles `Deleted` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Deleted/DELETED_PROSE_CLASS
+ */
 export const DELETED_PROSE_CLASS = getModuleClass(DELETED_CSS, "prose");
 
+/**
+ * Props for `Deleted` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Deleted/DeletedProps
+ */
 export interface DeletedProps extends OptionalChildProps {}
 
+/**
+ * Deleted text — renders a `<del>` element to mark content removed from a document.
+ *
+ * @param props The `children` to render as deleted text.
+ * @returns Rendered `<del>` element.
+ * @example <Deleted>old price</Deleted>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Deleted/Deleted
+ */
 export function Deleted({ children }: DeletedProps): ReactElement {
 	return <del className={DELETED_CLASS}>{children}</del>;
 }

package/ui/inline/Emphasis.d.ts

@@ -1,7 +1,30 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
+/**
+ * CSS class applied to the root element of every `Emphasis`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Emphasis/EMPHASIS_CLASS
+ */
 export declare const EMPHASIS_CLASS: string | undefined;
+/**
+ * CSS class that styles `Emphasis` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Emphasis/EMPHASIS_PROSE_CLASS
+ */
 export declare const EMPHASIS_PROSE_CLASS: string | undefined;
+/**
+ * Props for `Emphasis` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Emphasis/EmphasisProps
+ */
 export interface EmphasisProps extends OptionalChildProps {
 }
+/**
+ * Emphasised text — renders an `<em>` element for stress emphasis (typically italic).
+ *
+ * @param props The `children` to emphasise.
+ * @returns Rendered `<em>` element.
+ * @example <Emphasis>really</Emphasis>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Emphasis/Emphasis
+ */
 export declare function Emphasis({ children }: EmphasisProps): ReactElement;

package/ui/inline/Emphasis.js

@@ -1,8 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getModuleClass } from "../util/css.js";
 import EMPHASIS_CSS from "./Emphasis.module.css";
+/**
+ * CSS class applied to the root element of every `Emphasis`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Emphasis/EMPHASIS_CLASS
+ */
 export const EMPHASIS_CLASS = getModuleClass(EMPHASIS_CSS, "emphasis");
+/**
+ * CSS class that styles `Emphasis` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Emphasis/EMPHASIS_PROSE_CLASS
+ */
 export const EMPHASIS_PROSE_CLASS = getModuleClass(EMPHASIS_CSS, "prose");
+/**
+ * Emphasised text — renders an `<em>` element for stress emphasis (typically italic).
+ *
+ * @param props The `children` to emphasise.
+ * @returns Rendered `<em>` element.
+ * @example <Emphasis>really</Emphasis>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Emphasis/Emphasis
+ */
 export function Emphasis({ children }) {
     return _jsx("em", { className: EMPHASIS_CLASS, children: children });
 }

package/ui/inline/Emphasis.tsx

@@ -3,11 +3,35 @@ import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import EMPHASIS_CSS from "./Emphasis.module.css";
 
+/**
+ * CSS class applied to the root element of every `Emphasis`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Emphasis/EMPHASIS_CLASS
+ */
 export const EMPHASIS_CLASS = getModuleClass(EMPHASIS_CSS, "emphasis");
+
+/**
+ * CSS class that styles `Emphasis` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Emphasis/EMPHASIS_PROSE_CLASS
+ */
 export const EMPHASIS_PROSE_CLASS = getModuleClass(EMPHASIS_CSS, "prose");
 
+/**
+ * Props for `Emphasis` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Emphasis/EmphasisProps
+ */
 export interface EmphasisProps extends OptionalChildProps {}
 
+/**
+ * Emphasised text — renders an `<em>` element for stress emphasis (typically italic).
+ *
+ * @param props The `children` to emphasise.
+ * @returns Rendered `<em>` element.
+ * @example <Emphasis>really</Emphasis>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Emphasis/Emphasis
+ */
 export function Emphasis({ children }: EmphasisProps): ReactElement {
 	return <em className={EMPHASIS_CLASS}>{children}</em>;
 }

package/ui/inline/Inserted.d.ts

@@ -1,7 +1,30 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
+/**
+ * CSS class applied to the root element of every `Inserted`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Inserted/INSERTED_CLASS
+ */
 export declare const INSERTED_CLASS: string | undefined;
+/**
+ * CSS class that styles `Inserted` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Inserted/INSERTED_PROSE_CLASS
+ */
 export declare const INSERTED_PROSE_CLASS: string | undefined;
+/**
+ * Props for `Inserted` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Inserted/InsertedProps
+ */
 export interface InsertedProps extends OptionalChildProps {
 }
+/**
+ * Inserted text — renders an `<ins>` element to mark content added to a document.
+ *
+ * @param props The `children` to render as inserted text.
+ * @returns Rendered `<ins>` element.
+ * @example <Inserted>new price</Inserted>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Inserted/Inserted
+ */
 export declare function Inserted({ children }: InsertedProps): ReactElement;

package/ui/inline/Inserted.js

@@ -1,8 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getModuleClass } from "../util/css.js";
 import INSERTED_CSS from "./Inserted.module.css";
+/**
+ * CSS class applied to the root element of every `Inserted`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Inserted/INSERTED_CLASS
+ */
 export const INSERTED_CLASS = getModuleClass(INSERTED_CSS, "inserted");
+/**
+ * CSS class that styles `Inserted` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Inserted/INSERTED_PROSE_CLASS
+ */
 export const INSERTED_PROSE_CLASS = getModuleClass(INSERTED_CSS, "prose");
+/**
+ * Inserted text — renders an `<ins>` element to mark content added to a document.
+ *
+ * @param props The `children` to render as inserted text.
+ * @returns Rendered `<ins>` element.
+ * @example <Inserted>new price</Inserted>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Inserted/Inserted
+ */
 export function Inserted({ children }) {
     return _jsx("ins", { className: INSERTED_CLASS, children: children });
 }

package/ui/inline/Inserted.tsx

@@ -3,11 +3,35 @@ import { getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
 import INSERTED_CSS from "./Inserted.module.css";
 
+/**
+ * CSS class applied to the root element of every `Inserted`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Inserted/INSERTED_CLASS
+ */
 export const INSERTED_CLASS = getModuleClass(INSERTED_CSS, "inserted");
+
+/**
+ * CSS class that styles `Inserted` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Inserted/INSERTED_PROSE_CLASS
+ */
 export const INSERTED_PROSE_CLASS = getModuleClass(INSERTED_CSS, "prose");
 
+/**
+ * Props for `Inserted` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Inserted/InsertedProps
+ */
 export interface InsertedProps extends OptionalChildProps {}
 
+/**
+ * Inserted text — renders an `<ins>` element to mark content added to a document.
+ *
+ * @param props The `children` to render as inserted text.
+ * @returns Rendered `<ins>` element.
+ * @example <Inserted>new price</Inserted>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Inserted/Inserted
+ */
 export function Inserted({ children }: InsertedProps): ReactElement {
 	return <ins className={INSERTED_CLASS}>{children}</ins>;
 }

package/ui/inline/Link.d.ts

@@ -1,7 +1,30 @@
 import type { ReactElement } from "react";
 import { type ClickableProps } from "../form/Clickable.js";
+/**
+ * CSS class applied to the root element of every `Link`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Link/LINK_CLASS
+ */
 export declare const LINK_CLASS: string | undefined;
+/**
+ * CSS class that styles a `Link` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Link/LINK_PROSE_CLASS
+ */
 export declare const LINK_PROSE_CLASS: string | undefined;
+/**
+ * Props for `Link` — identical to `ClickableProps` (`href` for navigation or `onClick` for actions).
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Link/LinkProps
+ */
 export interface LinkProps extends ClickableProps {
 }
+/**
+ * Inline link — delegates to `Clickable`, rendering an `<a>` (when `href` is set) or `<button>` (when `onClick` is set).
+ *
+ * @param props Clickable props such as `href`, `onClick`, `title`, and `children`.
+ * @returns Rendered inline `<a>` or `<button>` element.
+ * @example <Link href="/about">About us</Link>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Link/Link
+ */
 export declare function Link(props: LinkProps): ReactElement;

package/ui/inline/Link.js

@@ -2,8 +2,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Clickable } from "../form/Clickable.js";
 import { getModuleClass } from "../util/css.js";
 import LINK_CSS from "./Link.module.css";
+/**
+ * CSS class applied to the root element of every `Link`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Link/LINK_CLASS
+ */
 export const LINK_CLASS = getModuleClass(LINK_CSS, "link");
+/**
+ * CSS class that styles a `Link` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Link/LINK_PROSE_CLASS
+ */
 export const LINK_PROSE_CLASS = getModuleClass(LINK_CSS, "prose");
+/**
+ * Inline link — delegates to `Clickable`, rendering an `<a>` (when `href` is set) or `<button>` (when `onClick` is set).
+ *
+ * @param props Clickable props such as `href`, `onClick`, `title`, and `children`.
+ * @returns Rendered inline `<a>` or `<button>` element.
+ * @example <Link href="/about">About us</Link>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Link/Link
+ */
 export function Link(props) {
     return _jsx(Clickable, { ...props, className: LINK_CLASS });
 }

package/ui/inline/Link.tsx

@@ -3,11 +3,35 @@ import { Clickable, type ClickableProps } from "../form/Clickable.js";
 import { getModuleClass } from "../util/css.js";
 import LINK_CSS from "./Link.module.css";
 
+/**
+ * CSS class applied to the root element of every `Link`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Link/LINK_CLASS
+ */
 export const LINK_CLASS = getModuleClass(LINK_CSS, "link");
+
+/**
+ * CSS class that styles a `Link` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Link/LINK_PROSE_CLASS
+ */
 export const LINK_PROSE_CLASS = getModuleClass(LINK_CSS, "prose");
 
+/**
+ * Props for `Link` — identical to `ClickableProps` (`href` for navigation or `onClick` for actions).
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Link/LinkProps
+ */
 export interface LinkProps extends ClickableProps {}
 
+/**
+ * Inline link — delegates to `Clickable`, rendering an `<a>` (when `href` is set) or `<button>` (when `onClick` is set).
+ *
+ * @param props Clickable props such as `href`, `onClick`, `title`, and `children`.
+ * @returns Rendered inline `<a>` or `<button>` element.
+ * @example <Link href="/about">About us</Link>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Link/Link
+ */
 export function Link(props: LinkProps): ReactElement {
 	return <Clickable {...props} className={LINK_CLASS} />;
 }

package/ui/inline/Mark.d.ts

@@ -1,7 +1,30 @@
 import type { ReactElement } from "react";
 import type { OptionalChildProps } from "../util/props.js";
+/**
+ * CSS class applied to the root element of every `Mark`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Mark/MARK_CLASS
+ */
 export declare const MARK_CLASS: string | undefined;
+/**
+ * CSS class that styles `Mark` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Mark/MARK_PROSE_CLASS
+ */
 export declare const MARK_PROSE_CLASS: string | undefined;
+/**
+ * Props for `Mark` — optional `children`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Mark/MarkProps
+ */
 export interface MarkProps extends OptionalChildProps {
 }
+/**
+ * Highlighted text — renders a `<mark>` element to call attention to a run of text.
+ *
+ * @param props The `children` to highlight.
+ * @returns Rendered `<mark>` element.
+ * @example <Mark>search term</Mark>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Mark/Mark
+ */
 export declare function Mark({ children }: MarkProps): ReactElement;

package/ui/inline/Mark.js

@@ -1,8 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getModuleClass } from "../util/css.js";
 import MARK_CSS from "./Mark.module.css";
+/**
+ * CSS class applied to the root element of every `Mark`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Mark/MARK_CLASS
+ */
 export const MARK_CLASS = getModuleClass(MARK_CSS, "mark");
+/**
+ * CSS class that styles `Mark` when it appears inside `Prose` longform content.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/inline/Mark/MARK_PROSE_CLASS
+ */
 export const MARK_PROSE_CLASS = getModuleClass(MARK_CSS, "prose");
+/**
+ * Highlighted text — renders a `<mark>` element to call attention to a run of text.
+ *
+ * @param props The `children` to highlight.
+ * @returns Rendered `<mark>` element.
+ * @example <Mark>search term</Mark>
+ * @see https://dhoulb.github.io/shelving/ui/inline/Mark/Mark
+ */
 export function Mark({ children }) {
     return _jsx("mark", { className: MARK_CLASS, children: children });
 }