> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Resizable

> A split-pane layout with a draggable divider — allows users to resize adjacent panels horizontally or vertically.

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",justifyContent:"center"}}>
  <div style={{width:"100%",maxWidth:"420px",height:"160px",border:"1px solid #E5E7EB",borderRadius:"10px",background:"#fff",display:"flex",overflow:"hidden",fontFamily:"Inter,sans-serif"}}>
    <div style={{flex:"0 0 35%",padding:"16px",borderRight:"none",display:"flex",flexDirection:"column",gap:"6px"}}>
      <div style={{fontSize:"11px",fontWeight:600,color:"#9CA3AF",textTransform:"uppercase",letterSpacing:"0.05em"}}>Sidebar</div>

      {["Overview","Components","Tokens","Examples"].map(item => (
                  <div key={item} style={{fontSize:"13px",color:"#344054",padding:"4px 6px",borderRadius:"4px",cursor:"pointer"}}>{item}</div>
                ))}
    </div>

    <div style={{width:"1px",background:"#E5E7EB",position:"relative",cursor:"col-resize",display:"flex",alignItems:"center",justifyContent:"center"}}>
      <div style={{width:"4px",height:"24px",borderRadius:"2px",background:"#D0D5DD"}} />
    </div>

    <div style={{flex:1,padding:"16px"}}>
      <div style={{fontSize:"13px",fontWeight:600,color:"#101828",marginBottom:"6px"}}>Main Content</div>
      <div style={{fontSize:"12px",color:"#667085",lineHeight:1.5}}>Drag the handle to resize the panels.</div>
    </div>
  </div>
</div>

**Resizable** provides a split-pane layout where the user can drag a handle to resize adjacent panels. Supports horizontal and vertical splits, with configurable min/max sizes and collapsible panels.

***

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@araf-ds/core"

export default function Example() {
  return (
    <ResizablePanelGroup direction="horizontal" className="rounded-lg border">
      <ResizablePanel defaultSize={35} minSize={20}>
        <div className="p-4">
          <p className="text-sm font-semibold text-muted-foreground">Sidebar</p>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={65}>
        <div className="p-4">
          <p className="text-sm">Main Content</p>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}
```

***

## Variants

### Horizontal Split (Sidebar + Main)

```tsx theme={null}
<ResizablePanelGroup direction="horizontal" className="min-h-screen rounded-lg border">
  <ResizablePanel defaultSize={20} minSize={15} maxSize={40} collapsible>
    <SidebarNavigation />
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={80}>
    <main className="p-6">{children}</main>
  </ResizablePanel>
</ResizablePanelGroup>
```

### Vertical Split (Editor + Preview)

```tsx theme={null}
<ResizablePanelGroup direction="vertical" className="h-[500px] rounded-lg border">
  <ResizablePanel defaultSize={50}>
    <div className="p-4 font-mono text-sm">
      {/* Code editor */}
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>
    <div className="p-4">
      {/* Live preview */}
    </div>
  </ResizablePanel>
</ResizablePanelGroup>
```

### Three-Panel Layout

```tsx theme={null}
<ResizablePanelGroup direction="horizontal" className="rounded-lg border">
  <ResizablePanel defaultSize={20} minSize={15}>
    <FileTree />
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={55}>
    <CodeEditor />
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={25} minSize={15}>
    <PropertiesPanel />
  </ResizablePanel>
</ResizablePanelGroup>
```

***

## API Reference

### ResizablePanelGroup

<ParamField path="direction" type="string" required>
  Split direction. Values: `horizontal` · `vertical`
</ParamField>

<ParamField path="onLayout" type="(sizes: number[]) => void">
  Callback fired when panel sizes change. Receives an array of percentage sizes.
</ParamField>

<ParamField path="className" type="string">
  Additional class names. Set `min-h-*` or `h-*` here to constrain the group height.
</ParamField>

### ResizablePanel

<ParamField path="defaultSize" type="number">
  Initial size as a percentage of the group (0–100).
</ParamField>

<ParamField path="minSize" type="number">
  Minimum size as a percentage.
</ParamField>

<ParamField path="maxSize" type="number">
  Maximum size as a percentage.
</ParamField>

<ParamField path="collapsible" type="boolean" default="false">
  Allows the panel to collapse to zero when dragged past its minimum size.
</ParamField>

<ParamField path="collapsedSize" type="number" default="0">
  Size in percentage when collapsed.
</ParamField>

### ResizableHandle

<ParamField path="withHandle" type="boolean" default="false">
  Shows a visible grip icon on the divider for discoverability.
</ParamField>

***

## Accessibility

* `ResizableHandle` is keyboard accessible — focus it and use Arrow keys to resize
* The handle has `role="separator"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
* `aria-label` is automatically set based on the adjacent panel names
* On touch devices, the handle responds to touch drag events

***

## Do's & Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * Always set `minSize` to prevent panels from collapsing unexpectedly
    * Use `withHandle` to make the drag target visually obvious
    * Persist panel sizes to `localStorage` via `onLayout` for a better UX
    * Use `collapsible` for sidebar panels that users may want to hide entirely
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * Don't use Resizable on mobile — touch drag on small screens is error-prone
    * Don't set `defaultSize` values that don't add up to 100
    * Don't put critical content in a panel that can collapse to zero without warning
    * Don't nest ResizablePanelGroups unless necessary — it complicates layout logic
  </Card>
</CardGroup>