# ResizeHandle

Accessible drag/keyboard separator for single-region resize. Bind `value` / `minValue` / `maxValue` / `onChange` (often via `useResizable().handleProps`).

## Examples

### Default

Horizontal resize between a sidebar and main (default `direction="horizontal"`).

```tsx
import { ResizeHandle } from '@var-ui/react';

<ResizeHandle value={width} minValue={120} maxValue={280} onChange={setWidth} aria-label="Resize sidebar" />
```

```astro
---
import { ResizeHandle } from '@var-ui/astro';
---
<ResizeHandle label="Resize sidebar" />
```

```html
<div class="var-ui-resize-handle" aria-label="Resize sidebar"><div class="var-ui-resize-handle__pill"></div></div>
```

### Vertical

Set `direction="vertical"` to resize stacked panels along the block axis.

```tsx
import { ResizeHandle } from '@var-ui/react';

<div style={{ display: 'flex', flexDirection: 'column', height: 200 }}>
  <div style={{ height }}>Top</div>
  <ResizeHandle
    direction="vertical"
    value={height}
    minValue={60}
    maxValue={160}
    onChange={setHeight}
    aria-label="Resize panels"
  />
  <div style={{ flex: 1 }}>Bottom</div>
</div>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| maxValue | number | yes |  |  |
| minValue | number | yes |  |  |
| onChange | (next: number) => void | yes |  |  |
| value | number | yes |  |  |
| aria-label | string \| undefined | no |  |  |
| className | string \| undefined | no |  |  |
| direction | "horizontal" \| "vertical" \| undefined | no | 'horizontal' |  |
| isCollapsed | boolean \| undefined | no |  |  |
| onCollapse | (() => void) \| undefined | no |  | Fired on double-click/Enter — bind to `useResizable().collapse`/`toggle`. |

## Accessibility

Renders as `role="separator"` with `aria-orientation`, `aria-valuenow` / `min` / `max`, and a required `aria-label`. Arrow keys nudge by 10px (50px with Shift); Home/End jump to bounds; Enter/double-click fire `onCollapse` when provided.