shelving/ui/block/Block.d.ts

Toolkit for using data in JavaScript.

import type { ReactElement } from "react";
import { type AlignVariants } from "../style/Align.js";
import { type ColorVariants } from "../style/Color.js";
import { type SpacingVariants } from "../style/Spacing.js";
import { type TypographyVariants } from "../style/Typography.js";
import { type WidthVariants } from "../style/Width.js";
import type { OptionalChildProps } from "../util/props.js";
export declare const BLOCK_CLASS: string | undefined;
export interface BlockProps extends ColorVariants, SpacingVariants, TypographyVariants, WidthVariants, OptionalChildProps {
    /** Mark as a keyboard-focusable horizontal scroll region — adds `tabindex="0"`, `role="region"`, an `aria-label`, and `overflow-x: auto`. */
    scrollable?: boolean | undefined;
}
/** Plain `<div>` block with block-level spacing. Base building block; use a semantic variant (`<Section>`, `<Figure>`, etc.) when the element matters. */
export declare function Block(props: BlockProps): ReactElement;
/** `<section>` block with block-level spacing. */
export declare function Section(props: BlockProps): ReactElement;
/** `<header>` block with block-level spacing. */
export declare function Header(props: BlockProps): ReactElement;
/** `<footer>` block with block-level spacing. */
export declare function Footer(props: BlockProps): ReactElement;
/** `<nav>` block with block-level spacing. */
export declare function Nav(props: BlockProps): ReactElement;
/** `<aside>` block with block-level spacing. */
export declare function Aside(props: BlockProps): ReactElement;
/** `<figure>` block with block-level spacing. Pair with `<Caption>` for `<figcaption>` content. */
export declare function Figure(props: BlockProps): ReactElement;
export interface CaptionProps extends AlignVariants, ColorVariants, TypographyVariants, OptionalChildProps {
}
/** `<figcaption>` block — caption text for a `<Figure>`. */
export declare function Caption({ children, ...variants }: CaptionProps): ReactElement;