# Resizable

Panels separated by handles that the user drags to share space between them.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@zenoxai/ui/components/resizable"

function ResizableDemo() {
  return (
    <div className="h-64 w-full max-w-xl overflow-hidden rounded-md border border-border">
      <ResizablePanelGroup>
        <ResizablePanel defaultSize="40%" minSize="25%">
          <div className="flex h-full items-center justify-center p-6 text-sm text-text-secondary">
            Alert list
          </div>
        </ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize="60%" minSize="30%">
          <div className="flex h-full items-center justify-center p-6 text-sm text-text-secondary">
            Alert detail
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}
```

## Usage

```tsx
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@zenoxai/ui/components/resizable"
```

```tsx
<ResizablePanelGroup>
  <ResizablePanel defaultSize="40%">Alert list</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="60%">Alert detail</ResizablePanel>
</ResizablePanelGroup>
```

Use resizable panels for split views where the right proportion depends on the task: a list
next to its detail, a query above its results. The group fills its parent, so give the parent
a height.

The component wraps [react-resizable-panels](https://react-resizable-panels.vercel.app) v4.
Sizes follow its rules:

| Value           | Means                                               |
| --------------- | --------------------------------------------------- |
| `"40%"`, `"40"` | A percentage of the group.                          |
| `320`           | Pixels. A number is never a percentage.             |
| `"20rem"`       | Any CSS length unit: `px`, `rem`, `em`, `vh`, `vw`. |

Set `minSize` on every panel so the user cannot squeeze its content out of view.
`withHandle` adds a visible grip to the separator; use it when the split is not obvious from
the layout. The separator line tints with the primary color under the pointer and turns solid
primary while it is dragged.

## Examples

### Vertical

Set `orientation="vertical"` on the group to stack the panels.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@zenoxai/ui/components/resizable"

function ResizableVertical() {
  return (
    <div className="h-72 w-full max-w-xl overflow-hidden rounded-md border border-border">
      <ResizablePanelGroup orientation="vertical">
        <ResizablePanel defaultSize="35%" minSize="20%">
          <div className="flex h-full items-center justify-center p-6 font-mono text-sm text-text-secondary">
            severity:critical AND status:open
          </div>
        </ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize="65%" minSize="30%">
          <div className="flex h-full items-center justify-center p-6 text-sm text-text-secondary">
            Query results
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}
```

### Three panels

Groups take any number of panels. A `collapsible` panel collapses when the user drags it
below its `minSize`.

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@zenoxai/ui/components/resizable"

function ResizableThreePanels() {
  return (
    <div className="h-64 w-full max-w-xl overflow-hidden rounded-md border border-border">
      <ResizablePanelGroup>
        <ResizablePanel defaultSize="20%" minSize="15%" collapsible>
          <div className="flex h-full items-center justify-center p-4 text-sm text-text-secondary">
            Filters
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize="45%" minSize="30%">
          <div className="flex h-full items-center justify-center p-4 text-sm text-text-secondary">
            Assets
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize="35%" minSize="25%">
          <div className="flex h-full items-center justify-center p-4 text-sm text-text-secondary">
            Asset detail
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}
```

## Accessibility

- Each handle has `role="separator"` with `aria-valuenow`, `aria-valuemin` and
  `aria-valuemax`, and takes keyboard focus. The arrow keys resize the panels, Home and End
  move to the limits, and Enter collapses or expands the panel before the handle when it is
  `collapsible`.
- Keep every panel usable at its `minSize`: content that overflows must scroll, for example
  inside a [Scroll Area](/components/scroll-area).

## API reference

`import { ... } from "@zenoxai/ui/components/resizable"`

### ResizablePanelGroup

No props of its own.

### ResizablePanel

No props of its own.

### ResizableHandle

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| withHandle | `boolean` |  | Shows a grip on the divider, so it is easier to spot. |