19 lines
662 B
TypeScript
19 lines
662 B
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export interface StackProps {
|
|
/** A step on the space scale, 1 (tightest) to 9. Defaults to 5. */
|
|
gap?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
|
|
/** `start` keeps children at their natural width, which is what buttons want. */
|
|
align?: 'start' | 'stretch';
|
|
children?: ReactNode;
|
|
}
|
|
|
|
/** Vertical rhythm between blocks, always from the space scale. Never a raw pixel gap. */
|
|
export function Stack({ gap = 5, align = 'stretch', children }: StackProps) {
|
|
return (
|
|
<div style={{ display: 'grid', gap: `var(--space-${gap})`, justifyItems: align === 'start' ? 'start' : undefined }}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|