@patreon/studio/module/components/Stack/types.d.ts

Patreon Studio Design System

import type { AssignableElementProps, BaseAriaProps, BaseProps, ChildrenProps, StylableProps } from '~/types/component';
import type { SpaceToken } from '~/types/tokens';
import type { ValueOrResponsive } from '~/utilities/opaque-responsive';
type Display = 'flex' | 'inline-flex';
export type SizeOption = 'fluid' | 'min-content' | 'max-content' | 'fit-contents' | 'auto';
export type FlexDirection = 'column' | 'row' | 'column-reverse' | 'row-reverse';
export type JustifyContent = 'initial' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch' | 'flex-start' | 'center' | 'flex-end';
export type AlignItems = 'initial' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
export type FlexWrap = 'wrap' | 'nowrap';
export interface StackProps extends AssignableElementProps, BaseAriaProps, BaseProps, Omit<StylableProps, 'className'>, ChildrenProps {
    /** The flow of the stack */
    display?: Display;
    /**
     * The direction of the stack.
     * - `column` is vertical.
     * - `row` is horizontal.
     * @default 'column'
     */
    flexDirection?: ValueOrResponsive<FlexDirection>;
    /**
     * The justification of the stack's children.
     * - when direction is `column`, `justifyContent` refers to the vertical y-axis.
     * - when direction is `row`, `justifyContent` refers to the horizontal x-axis.
     */
    justifyContent?: ValueOrResponsive<JustifyContent>;
    /**
     * The alignment of the stack's children.
     * - when direction is `column`, `alignItems` refers to the horizontal x-axis.
     * - when direction is `row`, `alignItems` refers to the vertical y-axis.
     */
    alignItems?: ValueOrResponsive<AlignItems>;
    /**
     * The wrapping behavior of the stack's children.
     */
    flexWrap?: ValueOrResponsive<FlexWrap>;
    /**
     * The space between each child element.
     */
    gap?: ValueOrResponsive<SpaceToken>;
    /**
     * The height of the stack.
     */
    height?: ValueOrResponsive<SizeOption>;
    /**
     * The width of the stack.
     */
    width?: ValueOrResponsive<SizeOption>;
    /**
     * Custom className applied to the root element
     *
     * @deprecated do not mix usage of `Stack` with CSS modules
     */
    className?: string;
}
export {};