laif-ds/dist/agent-docs/components/Resizable.md

Design System di Laif con componenti React basati su principi di Atomic Design

# Resizable

## Overview

Resizable panel group with handles. Built on `react-resizable-panels`.

---

## Exports

- `ResizablePanelGroup` — container (horizontal by default; vertical when `direction="vertical"`)
- `ResizablePanel` — content panel
- `ResizableHandle` — draggable separator (prop: `withHandle?: boolean`)

---

## Example

```tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "laif-ds";

export function SplitLayout() {
  return (
    <ResizablePanelGroup direction="horizontal" className="h-64 rounded-md border">
      <ResizablePanel defaultSize={50}>
        <div className="p-4">Left</div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={50}>
        <div className="p-4">Right</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}
```