Resizable

Panel groups redimensionables por el usuario, tipo editor de código o split view.

---

Import

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from '@imansi/ui';

---

Uso básico (dos columnas)

<ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-semibold">Izquierda</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-semibold">Derecha</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

---

Vertical

<ResizablePanelGroup direction="vertical">
  <ResizablePanel defaultSize={50}>Arriba</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>Abajo</ResizablePanel>
</ResizablePanelGroup>

---

Con 3 paneles

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={20}>Sidebar</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={60}>Main</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={20}>Detail</ResizablePanel>
</ResizablePanelGroup>

---

Props

ResizablePanelGroup

Prop	Tipo	Default	Descripción
direction	'horizontal' | 'vertical'	'horizontal'	Orientación
autoSaveId	string	—	Guarda el layout en localStorage

ResizablePanel

Prop	Tipo	Default	Descripción
defaultSize	number	—	Tamaño inicial (%)
minSize	number	—	Tamaño mínimo (%)
maxSize	number	—	Tamaño máximo (%)
collapsible	boolean	false	Se puede colapsar

ResizableHandle

Prop	Tipo	Default	Descripción
withHandle	boolean	false	Muestra un grip visual

---

Accesibilidad

• Navegable con Tab
• Flechas ← → (o ↑↓) redimensionan
• Enter colapsa si collapsible={true}
• role="separator" en el handle