@granite-js/style-utils 0.0.1

package/src/flex.tsx

@@ -0,0 +1,214 @@
+import { forwardRef, type ReactElement, type ReactNode, type Ref } from 'react';
+import { View, type ViewProps, type ViewStyle } from 'react-native';
+
+interface FlexOptions {
+  align?: ViewStyle['alignItems'];
+  justify?: ViewStyle['justifyContent'];
+  direction?: ViewStyle['flexDirection'];
+}
+
+interface Props extends FlexOptions, ViewProps {
+  style?: ViewProps['style'];
+  children?: ReactNode;
+}
+
+type FlexReturnType = (props: Props & { ref?: Ref<View> }) => ReactElement | null;
+
+export function flex(options: FlexOptions | ViewStyle['alignItems']): ViewStyle;
+export function flex(
+  align: ViewStyle['alignItems'] | FlexOptions,
+  justify?: ViewStyle['justifyContent'],
+  direction?: ViewStyle['flexDirection']
+): ViewStyle;
+export function flex(
+  alignOrFlexOptions: FlexOptions | ViewStyle['alignItems'],
+  justify: ViewStyle['justifyContent'] = 'flex-start',
+  direction: ViewStyle['flexDirection'] = 'column'
+): ViewStyle {
+  if (typeof alignOrFlexOptions === 'object') {
+    const { align = 'stretch', direction = 'column', justify = 'flex-start' } = alignOrFlexOptions;
+
+    return {
+      alignItems: align,
+      display: 'flex',
+      flexDirection: direction,
+      justifyContent: justify,
+    };
+  }
+
+  return {
+    display: 'flex',
+    alignItems: alignOrFlexOptions,
+    flexDirection: direction,
+    justifyContent: justify,
+  };
+}
+
+flex.center = (direction?: FlexOptions['direction']) => flex({ justify: 'center', align: 'center', direction });
+
+const BaseFlex = forwardRef<View, Props>(function (
+  { align = 'stretch', justify = 'flex-start', direction = 'column', style, ...restProps },
+  ref
+) {
+  return <View ref={ref} style={[flex({ align, direction, justify }), style]} {...restProps} />;
+}) as FlexReturnType;
+
+type FlexType = typeof BaseFlex & {
+  Center: typeof BaseFlex;
+  CenterVertical: typeof BaseFlex;
+  CenterHorizontal: typeof BaseFlex;
+};
+
+/**
+ * @public
+ * @category UI
+ * @name Flex
+ * @description
+ * `Flex` is a component that arranges child elements based on [**Flexbox Layout**](https://reactnative.dev/docs/0.72/flexbox). Using Flexbox, you can easily align elements horizontally and vertically, and set center alignment with ease.
+ * Use `Flex.Center` to place child elements in the center, `Flex.CenterVertical` for vertical center alignment, and `Flex.CenterHorizontal` for horizontal center alignment.
+ *
+ * @param {object} [props] - The `props` object passed to the component.
+ * @param {'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'} [props.align = 'stretch'] - The alignment value for child elements along the main axis (Flex direction). For example, in `'column'` direction, `'center'` places elements at the horizontal center, and `'stretch'` expands elements to match the parent's width when their width is `'auto'`. This value is applied to [`alignItems`](https://reactnative.dev/docs/0.72/layout-props#alignitems), with a default value of `'stretch'`.
+ * @param {'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'} [props.justify = 'flex-start'] - The alignment value for child elements along the cross axis (perpendicular to Flex direction). For example, in `'column'` direction, `flex-start` places elements at the top of the parent, and `'center'` places them at the vertical center. This value is applied to [`justifyContent`](https://reactnative.dev/docs/0.72/layout-props#justifycontent), with a default value of `'flex-start'`.
+ * @param {'column' | 'row'} [props.direction = 'column'] - The value that sets the direction in which child elements are arranged. This is applied to [`flexDirection`](https://reactnative.dev/docs/0.72/layout-props#flexdirection), with a default value of `'column'`.
+ * @param {ViewProps['style']} [props.style] - The `style` object to be applied to the `Flex` component. Used to specify styles other than Flexbox layout, such as background color, border, and margin. Default value is `undefined`.
+ *
+ * @property {FlexCenter} [Center] - `Flex.Center` is a component that places child elements at the exact center both horizontally and vertically based on **Flex Layout**.
+ * @property {FlexCenterVertical} [CenterVertical] - `Flex.CenterVertical` is a component for **vertically centering** child elements based on Flex Layout.
+ * @property {FlexCenterHorizontal} [CenterHorizontal] - `Flex.CenterHorizontal` is a component for **horizontally centering** child elements based on Flex Layout.
+ *
+ * @example
+ * ### Example of arranging elements horizontally and vertically
+ *
+ * ```tsx
+ * import { Flex } from '@granite-js/react-native';
+ * import { Text } from 'react-native';
+ *
+ * function FlexExample() {
+ *   return (
+ *     <>
+ *       <Flex direction="column">
+ *         <Text>Arrange vertically</Text>
+ *         <Text>1</Text>
+ *         <Text>2</Text>
+ *         <Text>3</Text>
+ *       </Flex>
+ *       <Flex direction="row">
+ *         <Text>Arrange horizontally</Text>
+ *         <Text>1</Text>
+ *         <Text>2</Text>
+ *         <Text>3</Text>
+ *       </Flex>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export const Flex = BaseFlex as FlexType;
+
+/**
+ * @public
+ * @category UI
+ * @name FlexCenter
+ * @description
+ * `Flex.Center` is a component that places child elements at the exact center both horizontally and vertically based on [**Flexbox Layout**](https://reactnative.dev/docs/0.72/flexbox).
+ * Both `alignItems` and `justifyContent` properties are set to `'center'`, placing child elements at the center of the parent component.
+ * You can easily center-align elements using `Flexbox`.
+ *
+ * @param {object} [props] - The props object passed to the component.
+ * @param {'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'} [props.align = 'center'] - The alignment value for child elements along the main axis (Flex direction). For example, in `'column'` direction, `'center'` places elements at the horizontal center, and `'stretch'` expands elements to match the parent's width when their width is `'auto'`. This value is applied to [`alignItems`](https://reactnative.dev/docs/0.72/layout-props#alignitems), with a default value of `'center'`.
+ * @param {'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'} [props.justify = 'center'] - The alignment value for child elements along the cross axis (perpendicular to Flex direction). For example, in `'column'` direction, `flex-start` places elements at the top of the parent, and `'center'` places them at the vertical center. This value is applied to [`justifyContent`](https://reactnative.dev/docs/0.72/layout-props#justifycontent), with a default value of `'center'`.
+ * @param {'column' | 'row'} [props.direction = 'column'] - The value that sets the direction in which child elements are arranged. Default value is `'column'`, arranging elements vertically.
+ * @param {ViewProps['style']} [props.style] - The `style` object to be applied to the `Flex.Center` component. Used to specify styles other than Flexbox layout, such as background color, border, and margin. Default value is `undefined`.
+ *
+ * @example
+ * ### Example of placing elements at the exact center
+ *
+ * ```tsx
+ * import { Flex } from '@granite-js/react-native';
+ * import { Text } from 'react-native';
+ *
+ * function FlexCenterExample() {
+ *   return (
+ *     <Flex.Center style={{ width: '100%', height: 100, borderWidth: 1 }}>
+ *       <Text>Place at the exact center</Text>
+ *     </Flex.Center>
+ *   );
+ * }
+ * ```
+ */
+export const FlexCenter = forwardRef<View, Props>(function FlexCenter(props, ref) {
+  return <BaseFlex align="center" justify="center" {...props} ref={ref} />;
+});
+
+/**
+ * @public
+ * @category UI
+ * @name FlexCenterVertical
+ * @description
+ * `Flex.CenterVertical` is a component for **vertically centering** child elements based on [**Flexbox Layout**](https://reactnative.dev/docs/0.72/flexbox).
+ * The `justifyContent` property is set to `'center'`, placing child elements at the vertical center of the parent component.
+ *
+ * @param {object} [props] - The props object passed to the component.
+ * @param {'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'} [props.align = 'center'] - The alignment value for child elements along the main axis (Flex direction). For example, in `'column'` direction, `'center'` places elements at the horizontal center, and `'stretch'` expands elements to match the parent's width when their width is `'auto'`. This value is applied to [`alignItems`](https://reactnative.dev/docs/0.72/layout-props#alignitems), with a default value of `'stretch'`.
+ * @param {'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'} [props.justify = 'center'] - The alignment value for child elements along the cross axis (perpendicular to Flex direction). For example, in `'column'` direction, `flex-start` places elements at the top of the parent, and `'center'` places them at the vertical center. This value is applied to [`justifyContent`](https://reactnative.dev/docs/0.72/layout-props#justifycontent), with a default value of `'center'`.
+ * @param {'column' | 'row'} [props.direction = 'column'] - The value that sets the direction in which child elements are arranged. Default value is `'column'`, arranging elements vertically.
+ * @param {ViewProps['style']} [props.style] - The `style` object to be applied to the `Flex.CenterVertical` component. Used to specify styles other than Flexbox layout, such as background color, border, and margin. Default value is `undefined`.
+ *
+ * @example
+ * ### Example of vertically centering elements
+ *
+ * ```tsx
+ * import { Flex } from '@granite-js/react-native';
+ * import { Text } from 'react-native';
+ *
+ * function FlexCenterVerticalExample() {
+ *   return (
+ *     <Flex.CenterVertical style={{ width: '100%', height: 100, borderWidth: 1 }}>
+ *       <Text>Place at the vertical center</Text>
+ *     </Flex.CenterVertical>
+ *   );
+ * }
+ * ```
+ */
+export const FlexCenterVertical = forwardRef<View, Props>(function FlexCenterVertical(props, ref) {
+  return <BaseFlex justify="center" {...props} ref={ref} />;
+});
+
+/**
+ * @public
+ * @category UI
+ * @name FlexCenterHorizontal
+ * @description
+ * `Flex.CenterHorizontal` is a component for **horizontally centering** child elements based on [**Flexbox Layout**](https://reactnative.dev/docs/0.72/flexbox).
+ * The `alignItems` property is set to `'center'`, placing child elements at the horizontal center of the parent component.
+ *
+ * @param {object} [props] - The props object passed to the component.
+ * @param {'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'} [props.align = 'center'] - The alignment value for child elements along the main axis (Flex direction). For example, in `'column'` direction, `'center'` places elements at the horizontal center, and `'stretch'` expands elements to match the parent's width when their width is `'auto'`. This value is applied to [`alignItems`](https://reactnative.dev/docs/0.72/layout-props#alignitems), with a default value of `'center'`.
+ * @param {'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'} [props.justify = 'flex-start'] - The alignment value for child elements along the cross axis (perpendicular to Flex direction). For example, in `'column'` direction, `flex-start` places elements at the top of the parent, and `'center'` places them at the vertical center. This value is applied to [`justifyContent`](https://reactnative.dev/docs/0.72/layout-props#justifycontent), with a default value of `'flex-start'`.
+ * @param {'column' | 'row'} [props.direction = 'column'] - The value that sets the direction in which child elements are arranged. Default value is `'column'`, arranging elements vertically.
+ * @param {ViewProps['style']} [props.style] - The `style` object to be applied to the `Flex.CenterHorizontal` component. Used to specify styles other than Flexbox layout, such as background color, border, and margin. Default value is `undefined`.
+ *
+ * @example
+ * ### Example of horizontally centering elements
+ *
+ * ```tsx
+ * import { Flex } from '@granite-js/react-native';
+ * import { Text } from 'react-native';
+ *
+ * function FlexCenterHorizontalExample() {
+ *   return (
+ *     <Flex.CenterHorizontal style={{ width: '100%', height: 100, borderWidth: 1 }}>
+ *       <Text>Place at the horizontal center</Text>
+ *     </Flex.CenterHorizontal>
+ *   );
+ * }
+ * ```
+ */
+export const FlexCenterHorizontal = forwardRef<View, Props>(function FlexCenterHorizontal(props, ref) {
+  return <BaseFlex align="center" {...props} ref={ref} />;
+});
+
+Flex.Center = FlexCenter as FlexReturnType;
+Flex.CenterVertical = FlexCenterVertical as FlexReturnType;
+Flex.CenterHorizontal = FlexCenterHorizontal as FlexReturnType;

package/src/index.ts

@@ -0,0 +1,4 @@
+export { margin, padding } from './box-spacing';
+export { Flex } from './flex';
+export { Spacing } from './spacing';
+export { Stack } from './stack';

package/src/spacing.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react-native';
+import type { ReactTestRendererJSON } from 'react-test-renderer';
+import { Spacing } from './spacing';
+
+describe('Spacing', () => {
+  it('Spacing is rendered as <View />', () => {
+    const rendererJSON = render(<Spacing size={8} />).toJSON() as ReactTestRendererJSON;
+    expect(rendererJSON.type).toBe('View');
+  });
+
+  it('When Spacing is vertical, it is rendered with "height" props', () => {
+    render(<Spacing size={8} testID="spacing" />);
+    expect(screen.getByTestId('spacing')).toHaveStyle({
+      height: 8,
+    });
+  });
+
+  it('When Spacing is horizontal, it is rendered with "width" props', () => {
+    render(<Spacing size={8} direction="horizontal" testID="spacing" />);
+    expect(screen.getByTestId('spacing')).toHaveStyle({
+      width: 8,
+    });
+  });
+});

package/src/spacing.tsx

@@ -0,0 +1,57 @@
+import { memo } from 'react';
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+
+interface Props extends ViewProps {
+  size: number;
+  direction?: 'vertical' | 'horizontal';
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * @public
+ * @category UI
+ * @name Spacing
+ * @description
+ * `Spacing` is a component that adds margin by occupying empty space. You can specify the size of the margin in either horizontal or vertical direction.
+ *
+ * @param {object} [props] - The `props` object passed to the component.
+ * @param {number} props.size - A numeric value that sets the size of the margin.
+ * @param {'vertical' | 'horizontal'} [props.direction = 'vertical'] - Sets the direction in which the margin will occupy space. Default value is `'vertical'`.
+ * @param {StyleProp<ViewStyle>} [props.style] - The `style` value to be applied to the `Spacing` component. Default value is `undefined`, used when applying additional styles.
+ *
+ * @example
+ * ### Example of creating empty space by adding margins of size `16` in both horizontal and vertical directions
+ *
+ * ```tsx
+ * import { View, Text } from 'react-native';
+ * import { Spacing } from '@granite-js/react-native';
+ *
+ * export function SpacingExample() {
+ *   return (
+ *     <View>
+ *       <Text>Top</Text>
+ *       <Spacing size={16} direction="vertical" style={{ backgroundColor: 'red', width: 5 }} />
+ *       <Text>Bottom, positioned below by the vertical margin</Text>
+ *
+ *       <View style={{ flexDirection: 'row' }}>
+ *         <Text>Left</Text>
+ *         <Spacing size={16} direction="horizontal" style={{ backgroundColor: 'red', height: 5 }} />
+ *         <Text>Right, positioned to the side by the horizontal margin</Text>
+ *       </View>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export const Spacing = memo(function Spacing({ size, direction = 'vertical', style, ...restProps }: Props) {
+  const directionStyle =
+    direction === 'vertical'
+      ? {
+          height: size,
+        }
+      : {
+          width: size,
+        };
+
+  return <View style={[directionStyle, style]} {...restProps} />;
+});

package/src/stack.spec.tsx

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react-native';
+import type { ReactTestRendererJSON } from 'react-test-renderer';
+import { Stack } from './stack';
+
+describe('Stack', () => {
+  it('Default Stack is rendered in vertical direction', () => {
+    const rendererJSON = render(<Stack gutter={16} />).toJSON() as ReactTestRendererJSON;
+
+    expect(rendererJSON.props.style[0]).toEqual(
+      expect.objectContaining({
+        flexDirection: 'column',
+      })
+    );
+  });
+
+  describe('Stack.Vertical', () => {
+    it('Stack.Vertical is rendered in vertical direction', () => {
+      const rendererJSON = render(<Stack.Vertical gutter={16} />).toJSON() as ReactTestRendererJSON;
+
+      expect(rendererJSON.props.style[0]).toEqual(
+        expect.objectContaining({
+          flexDirection: 'column',
+        })
+      );
+    });
+  });
+
+  describe('Stack.Horizontal', () => {
+    it('Stack.Horizontal is rendered in horizontal direction', () => {
+      const rendererJSON = render(<Stack.Horizontal gutter={16} />).toJSON() as ReactTestRendererJSON;
+
+      expect(rendererJSON.props.style[0]).toEqual(
+        expect.objectContaining({
+          flexDirection: 'row',
+        })
+      );
+    });
+  });
+});

package/src/stack.tsx

@@ -0,0 +1,155 @@
+import { forwardRef, type ReactElement } from 'react';
+import { View, type ViewProps, type ViewStyle } from 'react-native';
+import { Children } from './children';
+import { Flex } from './flex';
+import { Spacing } from './spacing';
+
+type Direction = 'horizontal' | 'vertical';
+
+interface StackProps extends ViewProps {
+  direction?: Direction;
+  gutter?: number | ReactElement;
+  align?: ViewStyle['alignItems'];
+  justify?: ViewStyle['justifyContent'];
+}
+
+const BaseStack = forwardRef<View, StackProps>(function BaseStack(props, ref) {
+  const { direction = 'vertical', gutter = 0, children, ...rest } = props;
+
+  return (
+    <Flex ref={ref} direction={direction === 'vertical' ? 'column' : 'row'} {...rest}>
+      <Children.Gap
+        gap={typeof gutter === 'number' ? <Spacing direction={direction} size={gutter ?? 24} /> : props.gutter}
+      >
+        {children}
+      </Children.Gap>
+    </Flex>
+  );
+});
+
+/**
+ * @public
+ * @category UI
+ * @name Stack
+ * @description
+ * `Stack` is a component that arranges child elements in a stack layout either horizontally or vertically, and allows you to set spacing between child elements.
+ * You can specify the direction as horizontal or vertical using the `direction` property, and control the spacing between child elements using the `gutter` property.
+ * You can use `Stack.Horizontal` for horizontal arrangement and `Stack.Vertical` for vertical arrangement.
+ *
+ * @param {object} [props] - The props object passed to the component.
+ * @param {'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'} [props.align] - The alignment value for child elements along the main axis (Flex direction). For example, in `'column'` direction, `'center'` places elements at the horizontal center, and `'stretch'` expands elements to match the parent's width when their width is `'auto'`. This value is applied to [`alignItems`](https://reactnative.dev/docs/0.72/layout-props#alignitems).
+ * @param {'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'} [props.justify] - The alignment value for child elements along the cross axis (perpendicular to Flex direction). For example, in `'column'` direction, `flex-start` places elements at the top of the parent, and `'center'` places them at the vertical center. This value is applied to [`justifyContent`](https://reactnative.dev/docs/0.72/layout-props#justifycontent).
+ * @param {'vertical' | 'horizontal'} [props.direction = 'vertical'] - The value that sets the direction in which child elements are arranged. Default value is `'vertical'`.
+ * @param {number | ReactElement} [props.gutter] - The value that sets the spacing between child elements. When a number is provided, it sets the margin in pixels, and when a `ReactElement` is passed, that component is used as the spacing. Using a number allows for precise control of spacing, while using a `ReactElement` enables more complex custom spacing implementations.
+ *
+ * @property {StackHorizontal} [Horizontal] - `Stack.Horizontal` is a component that arranges child elements in a **horizontal** stack.
+ * @property {StackVertical} [Vertical] - `Stack.Vertical` is a component that arranges child elements in a **vertical** stack.
+ *
+ * @example
+ * ### Example of arranging elements horizontally and vertically with a spacing of 16
+ *
+ * ```tsx
+ * import { Text } from 'react-native';
+ * import { Stack } from '@granite-js/react-native';
+ *
+ * export function StackExample() {
+ *   return (
+ *     <>
+ *       <Stack gutter={16} direction="horizontal">
+ *         <Text>Arrange horizontally with 16 spacing</Text>
+ *         <Text>1</Text>
+ *         <Text>2</Text>
+ *         <Text>3</Text>
+ *       </Stack>
+ *       <Stack gutter={16} direction="vertical">
+ *         <Text>Arrange vertically with 16 spacing</Text>
+ *         <Text>1</Text>
+ *         <Text>2</Text>
+ *         <Text>3</Text>
+ *       </Stack>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export const Stack = BaseStack as StackType;
+
+type StackType = typeof BaseStack & {
+  Vertical: typeof StackVertical;
+  Horizontal: typeof StackHorizontal;
+};
+
+type StackWithoutDirectionProps = Omit<StackProps, 'direction'>;
+
+/**
+ * @public
+ * @category UI
+ * @name StackHorizontal
+ * @description
+ * `Stack.Horizontal` is a component that arranges child elements in a horizontal stack. Using this component, you can easily control the spacing between child elements with the `gutter` property, maintaining a consistent layout in the horizontal direction.
+ *
+ * @param {object} [props] - The props object passed to the component.
+ * @param {'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'} [props.align = 'stretch'] - The value that sets the horizontal alignment of child elements. Works the same as Flexbox's `align-items` property, with a default value of `'stretch'` that expands child elements to match the parent's width when their width is `'auto'`.
+ * @param {'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'} [props.justify = 'flex-start'] - The value that sets the horizontal alignment of child elements. Works the same as Flexbox's `justify-content` property, with a default value of `'flex-start'` that aligns child elements to the top.
+ * @param {number | ReactElement} [props.gutter] - The value that sets the spacing between child elements. When a number is provided, it sets the margin in pixels, and when a `ReactElement` is passed, that component is used as the spacing. Using a number allows for precise control of spacing, while using a `ReactElement` enables more complex custom spacing implementations.
+ *
+ * @example
+ * ### Example of arranging elements horizontally with a spacing of 16
+ *
+ * ```tsx
+ * import { Stack } from '@granite-js/react-native';
+ * import { View, Text } from 'react-native';
+ *
+ * function StackHorizontalExample() {
+ *   return (
+ *     <Stack.Horizontal gutter={16}>
+ *       <Text>Arrange horizontally with 16 spacing</Text>
+ *       <Text>1</Text>
+ *       <Text>2</Text>
+ *       <Text>3</Text>
+ *     </Stack.Horizontal>
+ *   );
+ * }
+ * ```
+ */
+const StackHorizontal = forwardRef<View, StackWithoutDirectionProps>(function StackHorizontal(props, ref) {
+  return <Stack direction="horizontal" {...props} ref={ref} />;
+});
+
+/**
+ * @public
+ * @category UI
+ * @name StackVertical
+ * @description
+ * `Stack.Vertical` is a component that arranges child elements in a vertical stack. Using this component, you can easily control the spacing between child elements with the `gutter` property, maintaining a consistent layout in the vertical direction.
+ *
+ * @param {object} [props] - The props object passed to the component.
+ * @param {string} [props.align = 'stretch'] - The value that sets the vertical alignment of child elements. Works the same as Flexbox's `align-items` property, with a default value of `'stretch'` that expands child elements to match the parent's height when their height is `'auto'`.
+ * @param {string} [props.justify = 'flex-start'] - The value that sets the horizontal alignment of child elements. Works the same as Flexbox's `justify-content` property, with a default value of `'flex-start'` that aligns child elements to the left.
+ * @param {number | ReactElement} [props.gutter] - The value that sets the spacing between child elements. When a number is provided, it sets the margin in pixels, and when a `ReactElement` is passed, that component is used as the spacing. Using a number allows for precise control of spacing, while using a `ReactElement` enables more complex custom spacing implementations.
+ *
+ * @example
+ * ### Example of arranging elements vertically with a spacing of 16
+ *
+ * ```tsx
+ * import { Stack } from '@granite-js/react-native';
+ * import { View, Text } from 'react-native';
+ *
+ * function StackVerticalExample() {
+ *   return (
+ *     <Stack.Vertical gutter={16}>
+ *       <Text>Arrange vertically with 16 spacing</Text>
+ *       <Text>1</Text>
+ *       <Text>2</Text>
+ *       <Text>3</Text>
+ *     </Stack.Vertical>
+ *   );
+ * }
+ * ```
+ */
+const StackVertical = forwardRef<View, StackWithoutDirectionProps>(function StackVertical(props, ref) {
+  return <Stack direction="vertical" {...props} ref={ref} />;
+});
+
+Stack.Horizontal = StackHorizontal;
+Stack.Vertical = StackVertical;