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, ChildrenProps { /** The flow of the stack */ display?: Display; /** * The direction of the stack. * - `column` is vertical. * - `row` is horizontal. * @default 'column' */ flexDirection?: ValueOrResponsive; /** * 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; /** * 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; /** * The wrapping behavior of the stack's children. */ flexWrap?: ValueOrResponsive; /** * The space between each child element. */ gap?: ValueOrResponsive; /** * The height of the stack. */ height?: ValueOrResponsive; /** * The width of the stack. */ width?: ValueOrResponsive; /** * Custom className applied to the root element * * @deprecated do not mix usage of `Stack` with CSS modules */ className?: string; } export {};