# rn-popover
URL: /docs/native/components/popover

Floating content panel with arrow, placement options, and multiple visual variants.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-popover
```

**Dependencies:**
- [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)

## Usage

```tsx
import { Popover } from '@/components/docyrus-native/popover';

```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `visible` | `boolean` | — | Controlled open state |
| `defaultOpen` | `boolean` | `false` | Initial open state (uncontrolled) |
| `onOpenChange` | `(open: boolean) => void` | — | Open state change callback |
| `onClose` | `() => void` | — | Called when popover closes |
| `title` | `string` | — | Popover title text |
| `placement` | `PopoverPlacement` | `'bottom'` | Popover placement relative to trigger |
| `offset` | `number` | `10` | Distance from trigger in pixels |
| `arrow` | `boolean` | `true` | Show directional arrow |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Popover size |
| `variant` | `'default' \| 'elevated' \| 'minimal' \| 'glass'` | `'default'` | Visual variant |
| `delayHide` | `number` | `0` | Auto-hide delay in ms (0 = manual close) |
| `maxWidth` | `number` | — | Maximum popover width |
| `children` | `ReactNode` | — | Trigger element |
| `content` | `ReactNode` | — | Popover content (string or element) |
| `className` | `string` | — | Popover container CSS classes |
| `contentClassName` | `string` | — | Content area CSS classes |

### PopoverPlacement

`'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'`

## Type Exports

| Type | Description |
|------|-------------|
| `PopoverProps` | Props for Popover component |
| `PopoverPlacement` | Placement position union type |
| `PopoverSize` | `'sm' \| 'md' \| 'lg'` |
| `PopoverVariant` | `'default' \| 'elevated' \| 'minimal' \| 'glass'` |