shelving/ui/style/Flex.d.ts

Toolkit for using data in JavaScript.

import type { ReactElement } from "react";
import type { OptionalChildProps } from "../util/props.js";
import { type GapVariants } from "./Gap.js";
/** Variants for flex layout — opt-in modifiers any component can mix in via `getFlexClass()`. */
export interface FlexVariants extends GapVariants {
    /** Wrap overflowing elements onto the next line (defaults to no wrapping). */
    wrap?: boolean | undefined;
    /** Display the elements as a column (defaults to row). */
    column?: boolean | undefined;
    /** Align the elements to the left (defaults to stretch). */
    left?: boolean | undefined;
    /** Align the elements to the center (defaults to stretch). */
    center?: boolean | undefined;
    /** Align the elements to the right (defaults to stretch). */
    right?: boolean | undefined;
    /** Align the elements stretch (defaults to stretch). */
    stretch?: boolean | undefined;
    /** Reverse the order of the elements. */
    reverse?: boolean | undefined;
}
/** Get the flex class for a component. Composes Gap variants so `<Flex gap-large>` etc. just work. */
export declare function getFlexClass(variants: FlexVariants): string;
export interface FlexProps extends FlexVariants, OptionalChildProps {
}
/**
 * Dumb flex box — wraps children in a `<div>` with the flex class applied. Carries no external
 * spacing of its own; if you need block-level margins around it, wrap in a `<Block>` or set them
 * on the parent. Other components can mix in flex layout directly via `getFlexClass(props)`.
 */
export declare function Flex({ children, ...variants }: FlexProps): ReactElement;