# Resizable

## Overview

A panel splitter that lets users resize adjacent panels by dragging a handle. Used in IDE-style layouts, split-view editors, and any interface where two panels need to share space dynamically.

---

## When to Use

- Split-panel views (code editor + preview, list + detail)
- Dashboard panels that users want to resize
- Complex tool interfaces

---

## Anatomy

```
<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={50}>
    {/* Left panel */}
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    {/* Right panel */}
  </ResizablePanel>
</ResizablePanelGroup>
```

---

## Props

### ResizablePanelGroup

| Prop        | Type                         | Default | Description                    |
| ----------- | ---------------------------- | ------- | ------------------------------ |
| `direction` | `'horizontal' \| 'vertical'` | —       | **Required**. Split direction. |
| `className` | `string`                     | —       | Applied to the container       |

### ResizablePanel

| Prop          | Type     | Default | Description                     |
| ------------- | -------- | ------- | ------------------------------- |
| `defaultSize` | `number` | —       | Initial percentage size (0–100) |
| `minSize`     | `number` | `10`    | Minimum percentage size         |
| `maxSize`     | `number` | `90`    | Maximum percentage size         |

### ResizableHandle

| Prop         | Type      | Description                             |
| ------------ | --------- | --------------------------------------- |
| `withHandle` | `boolean` | Shows a visible grip icon on the handle |

---

## Examples

```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from 'xertica-ui/ui';

<ResizablePanelGroup direction="horizontal" className="min-h-[400px] rounded-lg border">
  <ResizablePanel defaultSize={30} minSize={20}>
    <div className="p-4">
      <h3 className="font-semibold">Side Panel</h3>
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={70}>
    <div className="p-4">
      <h3 className="font-semibold">Main Panel</h3>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>;
```

---

## AI Rules

- `direction` is **required** — always specify `"horizontal"` or `"vertical"`.
- `defaultSize` values across all panels must sum to `100`.
- The parent container must have a defined height (`min-h-[400px]` or `h-full`) — without a bounded height the vertical split will collapse.