shelving/ui/block/Definitions.d.ts

Toolkit for using data in JavaScript.

import type { ReactElement, ReactNode } from "react";
import { type AlignVariants } from "../style/Align.js";
import { type ColorVariants } from "../style/Color.js";
import { type GapVariants } from "../style/Gap.js";
import { type SpacingVariants } from "../style/Spacing.js";
import { type ThicknessVariants } from "../style/Thickness.js";
import { type TypographyVariants } from "../style/Typography.js";
import type { OptionalChildProps } from "../util/props.js";
export interface DefinitionsProps extends AlignVariants, ColorVariants, GapVariants, SpacingVariants, ThicknessVariants, TypographyVariants, OptionalChildProps {
    /** Lay out each term/value pair side-by-side instead of stacked (collapses to stacked at narrow widths). */
    row?: boolean | undefined;
}
/**
 * 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 declare function Definitions({ children, ...variants }: DefinitionsProps): ReactElement;
export interface DefinitionProps extends OptionalChildProps {
    /** The term — what's being defined. Rendered as `<dt>`. */
    term: ReactNode;
}
/**
 * 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 declare function Definition({ term, children }: DefinitionProps): ReactElement;