Support gap in Box

readme.md

@@ -581,6 +581,58 @@ Margin on all sides. Equivalent to setting `marginTop`, `marginBottom`, `marginL
 <Box margin={2}>Top, bottom, left and right</Box>
 ```
 
+#### Gap
+
+#### gap
+
+Type: `number`\
+Default: `0`
+
+Size of the gap between an element's columns and rows. Shorthand for `columnGap` and `rowGap`.
+
+```jsx
+<Box gap={1} width={3} flexWrap="wrap">
+	<Text>A</Text>
+	<Text>B</Text>
+	<Text>C</Text>
+</Box>
+// A B
+//
+// C
+```
+
+#### columnGap
+
+Type: `number`\
+Default: `0`
+
+Size of the gap between an element's columns.
+
+```jsx
+<Box gap={1}>
+	<Text>A</Text>
+	<Text>B</Text>
+</Box>
+// A B
+```
+
+#### rowGap
+
+Type: `number`\
+Default: `0`
+
+Size of the gap between element's rows.
+
+```jsx
+<Box flexDirection="column" gap={1}>
+	<Text>A</Text>
+	<Text>B</Text>
+</Box>
+// A
+//
+// B
+```
+
 #### Flex
 
 ##### flexGrow

src/components/Box.tsx

@@ -5,6 +5,27 @@ import {type Styles} from '../styles.js';
 import {type DOMElement} from '../dom.js';
 
 export type Props = Except<Styles, 'textWrap'> & {
+	/**
+	 * Size of the gap between an element's columns.
+	 *
+	 * @default 0
+	 */
+	readonly columnGap?: number;
+
+	/**
+	 * Size of the gap between element's rows.
+	 *
+	 * @default 0
+	 */
+	readonly rowGap?: number;
+
+	/**
+	 * Size of the gap between an element's columns and rows. Shorthand for `columnGap` and `rowGap`.
+	 *
+	 * @default 0
+	 */
+	readonly gap?: number;
+
 	/**
 	 * Margin on all sides. Equivalent to setting `marginTop`, `marginBottom`, `marginLeft` and `marginRight`.
 	 *
@@ -76,6 +97,8 @@ const Box = forwardRef<DOMElement, PropsWithChildren<Props>>(
 	({children, ...style}, ref) => {
 		const transformedStyle = {
 			...style,
+			columnGap: style.columnGap || style.gap || 0,
+			rowGap: style.rowGap || style.gap || 0,
 			marginLeft: style.marginLeft || style.marginX || style.margin || 0,
 			marginRight: style.marginRight || style.marginX || style.margin || 0,
 			marginTop: style.marginTop || style.marginY || style.margin || 0,

src/styles.ts

@@ -17,6 +17,16 @@ export type Styles = {
 
 	readonly position?: 'absolute' | 'relative';
 
+	/**
+	 * Gap between element's columns.
+	 */
+	readonly columnGap?: number;
+
+	/**
+	 * Gap between element's rows.
+	 */
+	readonly rowGap?: number;
+
 	/**
 	 * Top margin.
 	 */
@@ -376,6 +386,16 @@ const applyBorderStyles = (node: YogaNode, style: Styles): void => {
 	}
 };
 
+const applyGapStyles = (node: YogaNode, style: Styles): void => {
+	if ('columnGap' in style) {
+		node.setGap(Yoga.GUTTER_COLUMN, style.columnGap ?? 0);
+	}
+
+	if ('rowGap' in style) {
+		node.setGap(Yoga.GUTTER_ROW, style.rowGap ?? 0);
+	}
+};
+
 const styles = (node: YogaNode, style: Styles = {}): void => {
 	applyPositionStyles(node, style);
 	applyMarginStyles(node, style);
@@ -384,6 +404,7 @@ const styles = (node: YogaNode, style: Styles = {}): void => {
 	applyDimensionStyles(node, style);
 	applyDisplayStyles(node, style);
 	applyBorderStyles(node, style);
+	applyGapStyles(node, style);
 };
 
 export default styles;

test/gap.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import test from 'ava';
+import {Box, Text} from '../src/index.js';
+import {renderToString} from './helpers/render-to-string.js';
+
+test('gap', t => {
+	const output = renderToString(
+		<Box gap={1} width={3} flexWrap="wrap">
+			<Text>A</Text>
+			<Text>B</Text>
+			<Text>C</Text>
+		</Box>
+	);
+
+	t.is(output, 'A B\n\nC');
+});
+
+test('column gap', t => {
+	const output = renderToString(
+		<Box gap={1}>
+			<Text>A</Text>
+			<Text>B</Text>
+		</Box>
+	);
+
+	t.is(output, 'A B');
+});
+
+test('row gap', t => {
+	const output = renderToString(
+		<Box flexDirection="column" gap={1}>
+			<Text>A</Text>
+			<Text>B</Text>
+		</Box>
+	);
+
+	t.is(output, 'A\n\nB');
+});