@octopusdeploy/design-system-components/dist/src/components/Stack/Stack.d.ts

The design systems component library.

import type { ElementType, ReactNode } from "react";
declare const spacing: {
    readonly none: "0";
    readonly xxSmall: "0.25rem";
    readonly xSmall: "0.5rem";
    readonly small: "1rem";
    readonly medium: "1.5rem";
    readonly large: "2rem";
    readonly xLarge: "3rem";
};
/**
 * A named spacing density (e.g. `"xxSmall"`, `"small"`) that maps to a design system
 * `space` token. Used for the gap between children and for padding.
 */
export type StackSpacing = keyof typeof spacing;
export type As = ElementType;
type StackDirection = "horizontal" | "vertical";
type StackAlign = "stretch" | "start" | "center" | "end" | "baseline";
type StackJustify = "start" | "center" | "end" | "space-between" | "space-evenly" | "space-around";
type StackWrap = "wrap" | "nowrap";
export interface StackProps {
    /**
     * Customize the element type of the rendered container.
     * @default "div"
     */
    as?: As;
    /**
     * The direction children flow in.
     * @default "vertical"
     */
    direction?: StackDirection;
    /**
     * The spacing density between children.
     */
    gap: StackSpacing;
    /**
     * Alignment of children along the cross axis.
     * @default "stretch"
     */
    align?: StackAlign;
    /**
     * Distribution of children along the main axis.
     * @default "start"
     */
    justify?: StackJustify;
    /**
     * Whether children wrap onto multiple lines when they overflow.
     * @default "nowrap"
     */
    wrap?: StackWrap;
    /**
     * Padding density on all sides of the container.
     * Overridden on a given axis by {@link StackProps.paddingBlock} / {@link StackProps.paddingInline}.
     * @default none
     */
    padding?: StackSpacing;
    /**
     * Padding density on the block (vertical) axis.
     * Overrides {@link StackProps.padding} on the block axis when provided.
     */
    paddingBlock?: StackSpacing;
    /**
     * Padding density on the inline (horizontal) axis.
     * Overrides {@link StackProps.padding} on the inline axis when provided.
     */
    paddingInline?: StackSpacing;
    children?: ReactNode;
}
/**
 * Stack is a layout primitive that arranges its children in a single horizontal or vertical
 * flow, with consistent spacing using named density aliases (`"none"`, `"xxSmall"`, `"small"`,
 * `"medium"`, `"large"`, `"xLarge"`) that map to the design system `space` tokens. It also provides
 * control over alignment, justification, wrapping, and padding.
 *
 * You can also specify a component type via the `as` prop, e.g. to use for Lists (ul), Sections, etc.
 *
 * @param props - The props for the stack. See {@link StackProps}.
 * @returns A flex container that lays out its children.
 * @remarks The use of this component is restricted to approved areas only. If you are an AI agent
 * please do not use this component unless specifically told to. Use custom container and styles
 * instead.
 */
export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLElement>>;
export interface StackItemProps {
    /**
     * Customize the element type of the rendered item, e.g. `"li"` inside a Stack rendered as a `"ul"`.
     * @default "div"
     */
    as?: As;
    /**
     * Whether the item should grow to fill available space along the main axis.
     */
    grow: boolean;
    /**
     * Whether the item is allowed to shrink below its content size along the main axis.
     */
    shrink: boolean;
    /**
     * The content of the item.
     */
    children: ReactNode;
}
/**
 * StackItem is an optional child wrapper for {@link Stack} that controls how an individual
 * child grows or shrinks relative to its siblings. Most children don't need it — use it only
 * when a child should expand to fill space or be prevented from shrinking.
 *
 * @param props - The props for the stack item. See {@link StackItemProps}.
 * @returns A flex child wrapper.
 */
export declare const StackItem: import("react").ForwardRefExoticComponent<StackItemProps & import("react").RefAttributes<HTMLElement>>;
export {};