@primer/react-brand/lib/Stack/Stack.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React from 'react';
import type { BaseProps } from '../component-helpers';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/size/size.css';
export declare const StackDirectionVariants: readonly ["horizontal", "vertical"];
type StackDirectionVariants = (typeof StackDirectionVariants)[number];
export declare const defaultStackDirection: "vertical";
export declare const StackSpacingVariants: readonly ["none", "condensed", "normal", "spacious", 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128];
type StackSpacingVariants = (typeof StackSpacingVariants)[number];
export declare const defaultStackSpacing: "condensed";
export declare const StackAlignItemVariants: readonly ["center", "flex-start", "flex-end"];
type StackAlignItemVariants = (typeof StackAlignItemVariants)[number];
export declare const StackFlexWrapVariants: readonly ["wrap", "nowrap"];
type StackFlexWrapVariants = (typeof StackFlexWrapVariants)[number];
export declare const StackJustifyContentVariants: readonly ["center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly"];
type justifyContentVariants = (typeof StackJustifyContentVariants)[number];
type ResponsiveJustifyContentMap = {
    narrow?: justifyContentVariants;
    regular?: justifyContentVariants;
    wide?: justifyContentVariants;
};
type ResponsiveAlignItemsMap = {
    narrow?: StackAlignItemVariants;
    regular?: StackAlignItemVariants;
    wide?: StackAlignItemVariants;
};
type ResponsiveDirectionMap = {
    narrow?: StackDirectionVariants;
    regular?: StackDirectionVariants;
    wide?: StackDirectionVariants;
};
type ResponsiveSpacingMap = {
    narrow?: StackSpacingVariants;
    regular?: StackSpacingVariants;
    wide?: StackSpacingVariants;
};
type ResponsiveFlexWrapMap = {
    narrow?: StackFlexWrapVariants;
    regular?: StackFlexWrapVariants;
    wide?: StackFlexWrapVariants;
};
export type StackProps = BaseProps<HTMLElement> & {
    children: React.ReactNode[] | React.ReactNode;
    /**
     * Defines the flex-direction CSS property.
     * A string value will be applied to all viewports.
     * An object can be used to define different values for different viewports.
     */
    direction?: StackDirectionVariants | ResponsiveDirectionMap;
    /**
     * Defines the gap CSS property.
     * A string value will be applied to all viewports.
     * An object can be used to define different values for different viewports.
     */
    gap?: StackSpacingVariants | ResponsiveSpacingMap;
    /**
     * Applies vertical alignment to child elements relative to the Stack, using the align-items CSS property.
     * A string value will be applied to all viewports.
     * An object can be used to define different values for different viewports.
     */
    alignItems?: StackAlignItemVariants | ResponsiveAlignItemsMap;
    /**
     * Defines the padding CSS property on the parent Stack.
     * A string value will be applied to all viewports.
     * An object can be used to define different values for different viewports.
     */
    padding?: StackSpacingVariants | ResponsiveSpacingMap;
    /**
     * Applies horizontal alignment to child elements relative to the Stack, using the justify-content CSS property.
     * A string value will be applied to all viewports.
     * An object can be used to define different values for different viewports.
     */
    justifyContent?: justifyContentVariants | ResponsiveJustifyContentMap;
    /**
     * Forward inline styles
     */
    style?: React.CSSProperties;
    /**
     * Applies flex-wrap to the Stack, using the flex-wrap CSS property.
     */
    flexWrap?: StackFlexWrapVariants | ResponsiveFlexWrapMap;
} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
/**
 * Stack enables layout of its immediate children along the vertical or horizontal axis
 * @see https://primer.style/brand/components/Stack
 */
export declare const Stack: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<unknown>>;
export {};