# Stack

A layout component for arranging items in a vertical or horizontal stack with a consistent gap between them. It is built on `flexbox`.

## Props

*   `direction` (enum: 'row' | 'column' | 'row-reverse' | 'column-reverse', optional, default: 'column'): The direction to stack the items (`flex-direction`).
*   `gap` (string, optional, default: '1rem'): The space between items.
*   `align` (string, optional): The alignment of items along the cross axis (`align-items`).
*   `justify` (string, optional): The alignment of items along the main axis (`justify-content`).
*   `wrap` (boolean, optional, default: false): Whether to wrap items to the next line (`flex-wrap`).
*   All other standard HTML `<div>` attributes are supported.

## Usage

```tsx
import { Stack, Card } from './src/components';

// Vertical Stack
<Stack gap="1rem">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
</Stack>

// Wrapped Horizontal Stack
<Stack direction="row" gap="1rem" align="center" wrap={true}>
  <Card>Item A</Card>
  <Card>Item B</Card>
  <Card>Item C</Card>
</Stack>
```