# Box

A flexible container component for layout and styling purposes.

---

## Installation

```bash
npm install @cleartrip/ct-design-box
# or
pnpm add @cleartrip/ct-design-box
```

### Peer dependencies

```bash
# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native
```

---

## Usage

### Basic

```tsx
import { Box } from '@cleartrip/ct-design-box';

function Example() {
  return (
    <Box>
      {/* Basic usage */}
    </Box>
  );
}
```

---

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `children` | `ReactNode` | — | No | children property |
| `styleConfig` | `IBoxStyleConfig` | — | No | Style configuration overrides for the root container. |
| `onClick` | `() => void` | — | No | Fired when the root container is clicked/pressed. |
| `horizontal` | `boolean` | `false` | No | Lays the contents out horizontally. |
| `boxSize` | `BoxSize` | — | ✅ Yes | Sets the row or column gap between child elements. |

---

## Accessibility

- The component follows accessibility best practices
- Ensure proper ARIA attributes are provided where needed
- Test with screen readers to ensure usability

---

## Migration

If migrating from a previous version:

```diff
- import { Box } from 'yagami/core/components';
+ import { Box } from '@cleartrip/ct-design-box';
```