Resizable

Usage

import { Resizable, ResizablePanel, ResizableResizeTrigger } from "@kanzo-tech/ui";

<div className="h-64">
  <Resizable panels={[{ id: "board" }, { id: "contract" }]} defaultSize={[35, 65]}>
    <ResizablePanel id="board">…</ResizablePanel>
    <ResizableResizeTrigger id="board:contract" withHandle />
    <ResizablePanel id="contract">…</ResizablePanel>
  </Resizable>
</div>

Two things are easy to get wrong. The root is size-full, so the parent decides the height — without one the panels collapse to nothing. And the trigger's id is the two panel ids it sits between, joined by a colon ("board:contract"); that pairing is how the machine knows which panels a drag redistributes between.

panels declares the constraints (minSize, maxSize, collapsible); defaultSize sets the starting split.

Anatomy

<Resizable panels defaultSize>
  <ResizablePanel id="a" />
  <ResizableResizeTrigger id="a:b" />
  <ResizablePanel id="b" />

Vertical

API Reference

ResizableResizeTrigger

panels, size / defaultSize, orientation, onResize and the rest are Ark's Splitter.Root. useResizable re-exports Ark's useSplitterContext.