shelving/ui/block/Definitions.js

Toolkit for using data in JavaScript.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getAlignClass } from "../style/Align.js";
import { getColorClass } from "../style/Color.js";
import { getGapClass } from "../style/Gap.js";
import { getSpacingClass } from "../style/Spacing.js";
import { getThicknessClass } from "../style/Thickness.js";
import { getTypographyClass } from "../style/Typography.js";
import { getClass, getModuleClass } from "../util/css.js";
import styles from "./Definitions.module.css";
/**
 * Description list — a sequence of term/value pairs rendered as a `<dl>`.
 * - Each child should be a `<Definition>` (which renders the `<dt>`/`<dd>` pair wrapped in a `<div>`).
 * - Defaults to stacked layout (term above value). Pass `row` for side-by-side layout that collapses to stacked at narrow widths.
 *
 * @example
 * <Definitions>
 *   <Definition term="Name">Dave</Definition>
 *   <Definition term="Role">Engineer</Definition>
 * </Definitions>
 */
export function Definitions({ children, ...variants }) {
    return (_jsx("dl", { className: getClass(getModuleClass(styles, "definitions", variants), getColorClass(variants), getAlignClass(variants), getGapClass(variants), getSpacingClass(variants), getThicknessClass(variants), getTypographyClass(variants)), children: children }));
}
/**
 * A single term/value pair within a `<Definitions>` list.
 * - Wraps the `<dt>`/`<dd>` pair in a `<div>` so each pair is a single grouped element (valid HTML5 inside `<dl>`).
 * - This sidesteps the dl-shaped wart of having no per-pair wrapper; it also gives the row/stacked layout something concrete to target.
 */
export function Definition({ term, children }) {
    return (_jsxs("div", { className: styles.pair, children: [_jsx("dt", { className: styles.term, children: term }), _jsx("dd", { className: styles.value, children: children })] }));
}