@neynar/ui/llm-docs/resizable-handle.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# ResizableHandle

**Type**: component

Interactive handle for resizing panels with full keyboard and pointer support ResizableHandle provides the draggable area between panels that allows users to resize them via mouse, touch, or keyboard interaction. Supports optional visual grip indicators, custom hit areas, and comprehensive event callbacks for advanced interaction patterns. Automatically adapts styling based on panel group direction.

## JSX Usage

```jsx
import { ResizableHandle } from '@neynar/ui';

<ResizableHandle
  withHandle={true}
  id={value}
  disabled={true}
  hitAreaMargins={value}
  onDragging={handleDragging}
  onBlur={handleBlur}
  onClick={handleClick}
  onFocus={handleFocus}
  onPointerDown={handlePointerDown}
  onPointerUp={handlePointerUp}
  tabIndex={0}
  tagName={value}
  className="value"
  style={value}
>
  {/* Your content here */}
</ResizableHandle>
```

## Component Props

### withHandle
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether to display built-in visual grip indicator

### id
- **Type**: `string | null`
- **Required**: No
- **Description**: Unique identifier for the resize handle

### disabled
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether handle is disabled and non-interactive

### hitAreaMargins
- **Type**: `{
    coarse: number;
    fine: number;
  }`
- **Required**: No
- **Description**: Custom hit area margins for easier grabbing (coarse: touch devices, fine: mouse)

### onDragging
- **Type**: `(isDragging: boolean) => void`
- **Required**: No
- **Description**: Callback fired when drag state changes with boolean indicating if currently dragging

### onBlur
- **Type**: `() => void`
- **Required**: No
- **Description**: Callback fired when handle loses keyboard focus

### onClick
- **Type**: `() => void`
- **Required**: No
- **Description**: Callback fired when handle is clicked

### onFocus
- **Type**: `() => void`
- **Required**: No
- **Description**: Callback fired when handle receives keyboard focus

### onPointerDown
- **Type**: `() => void`
- **Required**: No
- **Description**: Callback fired when pointer/touch starts on handle

### onPointerUp
- **Type**: `() => void`
- **Required**: No
- **Description**: Callback fired when pointer/touch ends on handle

### tabIndex
- **Type**: `number`
- **Required**: No
- **Description**: Tab order for keyboard navigation (0 makes it focusable)

### tagName
- **Type**: `keyof React.JSX.IntrinsicElements`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes for custom styling

### style
- **Type**: `React.CSSProperties`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Custom handle content (overrides withHandle prop)

## Examples

### Example 1
```tsx
// Basic invisible handle (common for clean designs)
<ResizableHandle />
```
### Example 2
```tsx
// Handle with visual grip indicator
<ResizableHandle withHandle />
```
### Example 3
```tsx
// Custom styled handle with interaction callbacks
<ResizableHandle
  withHandle
  className="bg-blue-200 hover:bg-blue-300 transition-colors"
  onDragging={(isDragging) => {
    console.log(isDragging ? 'Started dragging' : 'Stopped dragging');
  }}
  hitAreaMargins={{ coarse: 20, fine: 10 }}
/>
```
### Example 4
```tsx
// Disabled handle for non-interactive layouts
<ResizableHandle
  disabled
  className="opacity-50 cursor-not-allowed"
/>
```
### Example 5
```tsx
// Custom handle with event handling
<ResizableHandle
  id="main-handle"
  onFocus={() => console.log('Handle focused')}
  onBlur={() => console.log('Handle blurred')}
  onClick={() => console.log('Handle clicked')}
  tabIndex={0}
>
  <CustomGripIcon />
</ResizableHandle>
```