# ContextMenu

## Overview

Right-click context menu built on Radix. Supports items, groups, separators, submenus, checkbox items, radio groups, and keyboard shortcuts.

---

## Props

### ContextMenu (Root)

| Prop       | Type              | Default      | Description                               |
| ---------- | ----------------- | ------------ | ----------------------------------------- |
| `children` | `React.ReactNode` | **required** | Include `ContextMenuTrigger` and content. |

### Subcomponents

- `ContextMenuTrigger`: The element that opens the menu on right-click.
- `ContextMenuContent`: The menu panel container.
- `ContextMenuItem`: A clickable item. Props:
  - `variant?: "default" | "destructive"`
  - `inset?: boolean`
- `ContextMenuCheckboxItem`: Checkbox-like item. Props:
  - `checked?: boolean`
- `ContextMenuRadioGroup`: Radio group container. Props: `value: string`.
- `ContextMenuRadioItem`: A radio item. Props: `value: string`.
- `ContextMenuSub` / `ContextMenuSubTrigger` / `ContextMenuSubContent`: Submenu controls.
- `ContextMenuLabel`: Section label. Props: `inset?: boolean`.
- `ContextMenuSeparator`: Horizontal separator.
- `ContextMenuShortcut`: Right-aligned text (e.g., keyboard shortcut).

---

## Behavior

- **Trigger**: Right-click (contextmenu) on the trigger shows the menu.
- **Submenus**: Use `ContextMenuSub` to nest menus.
- **Checkbox/Radio**: Use state to control `checked` and `value` props.
- **Accessibility**: Keyboard navigation and ARIA attributes handled by Radix.

---

## Examples

### Basic

```tsx
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
} from "laif-ds";

export function BasicContextMenu() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Forward
          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Save As...
          <ContextMenuShortcut>⌘S</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Print...
          <ContextMenuShortcut>⌘P</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}
```

### With Submenu

```tsx
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
  ContextMenuSeparator,
  ContextMenuShortcut,
} from "laif-ds";

export function WithSubmenu() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Forward
          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
          <ContextMenuSubContent className="w-48">
            <ContextMenuItem>
              Save Page As...
              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
            <ContextMenuItem>Name Window...</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem>Developer Tools</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Print...
          <ContextMenuShortcut>⌘P</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}
```

### With Checkbox and Radio

```tsx
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuCheckboxItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
} from "laif-ds";

export function WithCheckboxAndRadio() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuLabel>Options</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem>Show Bookmarks Bar</ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem checked>
          Show Full URLs
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuLabel>View</ContextMenuLabel>
        <ContextMenuRadioGroup value="comfortable">
          <ContextMenuRadioItem value="comfortable">
            Comfortable
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="compact">Compact</ContextMenuRadioItem>
          <ContextMenuRadioItem value="condensed">
            Condensed
          </ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}
```

---

## Notes

- **Variants**: Use `variant="destructive"` on `ContextMenuItem` for dangerous actions.
- **Inset**: Use `inset` on items/labels to align with other content.
- **Keyboard**: Use arrow keys and Enter to navigate/activate items.