# Resizable

> A split-pane layout arranging Resizable.Panel and Resizable.Handle parts along a shared axis, each panel taking up its own declared share of the group's main axis and each handle between two panels reserving a fixed track across the cross axis.

```ts
import { Resizable } from "@sdxc/ui";
```

Renders the root host: a `<div>` laying Resizable.Panel and
Resizable.Handle children out in a row, or a column when
`orientation` is `"vertical"`, sharing the resolved axis through context; set `aria-disabled="true"` to dim the whole group.

## Examples

```tsx
<Resizable aria-label={t("layout.panes")}>
	<Resizable.Panel id="sidebar" defaultSize={30} minSize={15}>
		{t("layout.sidebar")}
	</Resizable.Panel>
	<Resizable.Handle aria-label={t("layout.resizeSidebar")} aria-controls="sidebar main" />
	<Resizable.Panel id="main" defaultSize={70}>
		{t("layout.main")}
	</Resizable.Panel>
</Resizable>
```

```tsx
<Resizable orientation="vertical" aria-label={t("layout.panes")}>
	<Resizable.Panel defaultSize={60}>{t("layout.top")}</Resizable.Panel>
	<Resizable.Handle aria-label={t("layout.resizeVertically")} />
	<Resizable.Panel defaultSize={40}>{t("layout.bottom")}</Resizable.Panel>
</Resizable>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `orientation?` | `"horizontal" \| "vertical"` | Layout axis. Defaults to DEFAULT_ORIENTATION. |

Also accepts everything in `TagProps<"div">`.


### Resizable.Panel

Renders a single pane: a `<div>` that grows and shrinks to fill its share of the group's main axis, clipping overflow with scrolling.

| Prop | Type | Description |
| --- | --- | --- |
| `defaultSize?` | `number` | Starting share of the group's main axis, as a percentage (e.g. `30` for 30%). Panels left without one split whatever share remains evenly among themselves. |
| `minSize?` | `number` | Smallest share of the group's main axis this panel will shrink to, as a percentage. Left unset, the panel can shrink down to nothing. |
| `maxSize?` | `number` | Largest share of the group's main axis this panel will grow to, as a percentage. Left unset, the panel can grow up to the group's entire main axis. |

Also accepts everything in `TagProps<"div">`.


### Resizable.Handle

Renders a draggable divider between two adjacent panels: a `role="separator"` `<div>` reachable in Tab order, its bar darkening on hover and ready for `&[data-resizing]` to color it during a drag.

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Orientation` | `"horizontal" \| "vertical"` | Axis the panels lay out along: a row of panels side by side, or a column of panels stacked one above another. |