shelving/ui/block/Panel.d.ts

Toolkit for using data in JavaScript.

import type { ReactElement } from "react";
import { type ColorVariants } from "../style/Color.js";
import { type PaddingVariants } from "../style/Padding.js";
import { type Status } from "../style/Status.js";
import { type ThicknessVariants } from "../style/Thickness.js";
import { type TypographyVariants } from "../style/Typography.js";
import type { OptionalChildProps } from "../util/props.js";
/** Allowed semantic elements for a `<Panel>`. */
export type PanelElement = "section" | "header" | "footer" | "nav" | "aside" | "article" | "div";
export interface PanelProps extends ColorVariants, PaddingVariants, ThicknessVariants, TypographyVariants, OptionalChildProps {
    /** Underlying HTML element. Defaults to `<section>`. */
    as?: PanelElement | undefined;
    /** Status colour for the panel (e.g. `status="success"`). */
    status?: Status | undefined;
}
/**
 * Full-width vertical region that paints the current surface colour. Use to break a page into stacked
 * sections. Has zero block-spacing (Panels butt against each other) but big vertical padding by
 * default — adjust with PaddingVariants (`<Panel padding-large>` etc.).
 *
 * Renders as a `<section>` by default; pass `as="header"` etc. for other semantic elements.
 *
 * @example <Panel><Block narrow><Title>Welcome</Title></Block></Panel>
 * @example <Panel as="header" primary><Title>Welcome</Title></Panel>
 */
export declare function Panel({ children, as, status, ...props }: PanelProps): ReactElement;