56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
|
|
import { Box, BoxProps, ResponsiveValue } from './Box';
|
|
|
|
/**
|
|
* WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
|
|
*
|
|
* Stack is for flexbox-based layouts (stacking elements).
|
|
*
|
|
* - DO NOT add positioning props (absolute, top, zIndex).
|
|
* - DO NOT add grid props.
|
|
* - DO NOT add background/border props unless it's a specific styled stack.
|
|
*
|
|
* If you need a more specific layout, create a new component in apps/website/components.
|
|
*/
|
|
|
|
export interface StackProps<T extends ElementType> extends BoxProps<T> {
|
|
as?: T;
|
|
children?: ReactNode;
|
|
direction?: 'row' | 'col' | ResponsiveValue<'row' | 'col'>;
|
|
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' | ResponsiveValue<'start' | 'center' | 'end' | 'stretch' | 'baseline'>;
|
|
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | ResponsiveValue<'start' | 'center' | 'end' | 'between' | 'around'>;
|
|
wrap?: boolean;
|
|
}
|
|
|
|
export const Stack = forwardRef(<T extends ElementType = 'div'>(
|
|
{
|
|
children,
|
|
direction = 'col',
|
|
gap = 4,
|
|
align,
|
|
justify,
|
|
wrap = false,
|
|
as,
|
|
...props
|
|
}: StackProps<T>,
|
|
ref: ForwardedRef<HTMLElement>
|
|
) => {
|
|
return (
|
|
<Box
|
|
as={as}
|
|
ref={ref}
|
|
display="flex"
|
|
flexDirection={direction}
|
|
gap={gap}
|
|
alignItems={align}
|
|
justifyContent={justify}
|
|
flexWrap={wrap ? 'wrap' : 'nowrap'}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
Stack.displayName = 'Stack';
|