torch-glare 2.1.7 → 2.2.0

package/docs/components/context-menu.md

@@ -0,0 +1,455 @@
+---
+title: ContextMenu
+description: Right-click (or long-press) menu that opens at the pointer, with submenus, checkboxes, radio groups, and keyboard navigation
+group: Overlays & Dialogs
+keywords: [context-menu, right-click, menu, radix-ui, submenu, checkbox, contextmenu]
+---
+
+# ContextMenu
+
+> A right-click / long-press menu that opens at the pointer. Wrap any zone in a `ContextMenuTrigger` and the menu appears where the user clicks — same surface as DropdownMenu (items, groups, the boxed look, auto-grouping), built on `@radix-ui/react-context-menu`.
+
+## Installation
+
+```bash
+npm install @radix-ui/react-context-menu
+```
+
+## Import
+
+```typescript
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuGroup,
+  ContextMenuRadioGroup,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  ContextMenuPortal,
+} from '@torch-ui/components'
+```
+
+## Quick Examples
+
+### Basic Menu
+
+Wrap the right-click zone in `ContextMenuTrigger`. The menu opens at the pointer.
+
+```typescript
+import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from '@torch-ui/components'
+
+function Example() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="flex h-40 w-72 items-center justify-center rounded-md border border-dashed">
+          Right-click here
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Profile</ContextMenuItem>
+        <ContextMenuItem>Settings</ContextMenuItem>
+        <ContextMenuItem>Logout</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
+```
+
+### With Icons, Shortcuts, and a Negative Item
+
+```typescript
+import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuShortcut } from '@torch-ui/components'
+
+function ActionsMenu() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="flex h-40 w-72 items-center justify-center rounded-md border border-dashed">
+          Right-click the canvas
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>
+          <i className="ri-edit-line" />
+          <span>Edit</span>
+          <ContextMenuShortcut>⌘E</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          <i className="ri-share-line" />
+          <span>Share</span>
+          <ContextMenuShortcut>⌘⇧S</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem variant="Negative">
+          <i className="ri-delete-bin-line" />
+          <span>Delete</span>
+          <ContextMenuShortcut>⌫</ContextMenuShortcut>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
+```
+
+### With Checkboxes
+
+> Clicking a checkbox item keeps the menu open — `onSelect` calls `preventDefault()` internally so Radix does not auto-close. Toggle several options without the menu dismissing.
+
+```typescript
+import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuCheckboxItem } from '@torch-ui/components'
+import { useState } from 'react'
+
+function CheckboxMenu() {
+  const [showStatusBar, setShowStatusBar] = useState(true)
+  const [showActivityBar, setShowActivityBar] = useState(false)
+  const [showPanel, setShowPanel] = useState(false)
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="flex h-40 w-72 items-center justify-center rounded-md border border-dashed">
+          Right-click to toggle view
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuCheckboxItem
+          checked={showStatusBar}
+          onCheckedChange={setShowStatusBar}
+        >
+          Status Bar
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem
+          checked={showActivityBar}
+          onCheckedChange={setShowActivityBar}
+        >
+          Activity Bar
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem
+          checked={showPanel}
+          onCheckedChange={setShowPanel}
+        >
+          Panel
+        </ContextMenuCheckboxItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
+```
+
+### With Radio Group
+
+> Like checkboxes, selecting a radio item keeps the menu open (`onSelect` `preventDefault` is built in).
+
+```typescript
+import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuRadioGroup, ContextMenuRadioItem } from '@torch-ui/components'
+import { useState } from 'react'
+
+function RadioMenu() {
+  const [position, setPosition] = useState('bottom')
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="flex h-40 w-72 items-center justify-center rounded-md border border-dashed">
+          Right-click to pick a position
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuRadioGroup value={position} onValueChange={setPosition}>
+          <ContextMenuRadioItem value="top">Top</ContextMenuRadioItem>
+          <ContextMenuRadioItem value="bottom">Bottom</ContextMenuRadioItem>
+          <ContextMenuRadioItem value="right">Right</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
+```
+
+### With Submenu
+
+```typescript
+import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent } from '@torch-ui/components'
+
+function SubmenuExample() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="flex h-40 w-72 items-center justify-center rounded-md border border-dashed">
+          Right-click for more
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>New Tab</ContextMenuItem>
+        <ContextMenuItem>New Window</ContextMenuItem>
+
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent>
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+            <ContextMenuItem>Task Manager</ContextMenuItem>
+            <ContextMenuItem>Extensions</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+
+        <ContextMenuItem>Print</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
+```
+
+### RTL
+
+Set `dir="rtl"` on the Root and the menu, items, and submenu arrows mirror automatically.
+
+```typescript
+import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuShortcut } from '@torch-ui/components'
+
+function RtlMenu() {
+  return (
+    <ContextMenu dir="rtl">
+      <ContextMenuTrigger asChild>
+        <div className="flex h-40 w-72 items-center justify-center rounded-md border border-dashed">
+          انقر بزر الفأرة الأيمن
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>
+          تحرير
+          <ContextMenuShortcut>⌘E</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem variant="Negative">حذف</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
+```
+
+## API Reference
+
+### ContextMenu (Root)
+
+A controlled wrapper around the Radix root. It tracks the open state internally (so a second right-click can dismiss the menu) while still forwarding `open` / `onOpenChange` when you control it.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | - | Controlled open state |
+| `onOpenChange` | `(open: boolean) => void` | - | Callback when state changes |
+| `dir` | `'ltr' \| 'rtl'` | - | Reading direction; mirrors layout and arrows |
+| `modal` | `boolean` | `true` | Whether to block outside interactions |
+| `children` | `React.ReactNode` | - | Trigger and content |
+
+### ContextMenuTrigger
+
+The right-click zone. Wrap it around the element the menu should open from.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `asChild` | `boolean` | `false` | Merge props onto the child element instead of rendering a wrapper |
+| `disabled` | `boolean` | `false` | Disables opening on right-click |
+
+### ContextMenuContent
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'PresentationStyle'` | `'PresentationStyle'` | Visual style variant |
+| `theme` | `'dark' \| 'light' \| 'default'` | - | Theme variant (applied as `data-theme`) |
+| `className` | `string` | - | Additional CSS classes |
+| `collisionPadding` | `number` | `8` | Min distance kept from the viewport edge |
+| `autoGroup` | `boolean` | `true` | Auto-wrap loose items in a Boxed group (see Behavior notes) |
+
+### ContextMenuItem
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Item style variant |
+| `size` | `'S' \| 'M'` | `'M'` | Item size |
+| `active` | `boolean` | `false` | Active (selected) state |
+| `disabled` | `boolean` | `false` | Disabled state (still shows but is not selectable) |
+| `onSelect` | `(event: Event) => void` | - | Select handler; closes the menu by default |
+
+### ContextMenuCheckboxItem
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `checked` | `boolean \| 'indeterminate'` | `false` | Checked state |
+| `onCheckedChange` | `(checked: boolean) => void` | - | Change handler |
+| `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Style variant |
+| `size` | `'S' \| 'M'` | `'M'` | Item size |
+
+> Selecting a checkbox item keeps the menu open — `onSelect` `preventDefault` is built in.
+
+### ContextMenuRadioGroup
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | - | Selected radio value |
+| `onValueChange` | `(value: string) => void` | - | Change handler |
+| `variant` | `'Boxed' \| 'Plain'` | `'Boxed'` | `Boxed` renders a bordered container; `Plain` is semantic grouping only |
+
+### ContextMenuRadioItem
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | Required | Radio option value |
+| `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Style variant |
+| `size` | `'S' \| 'M'` | `'M'` | Item size |
+
+> Selecting a radio item keeps the menu open — `onSelect` `preventDefault` is built in.
+
+### ContextMenuSubTrigger
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Style variant |
+| `size` | `'S' \| 'M'` | `'M'` | Item size |
+| `className` | `string` | - | Additional CSS classes |
+
+Renders a trailing chevron (`ri-arrow-right-s-line`) that mirrors in RTL.
+
+### ContextMenuLabel
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | - | Additional CSS classes |
+
+A non-interactive section heading. Acts as a boundary for auto-grouping.
+
+### ContextMenuShortcut
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | - | Additional CSS classes |
+
+A right-aligned (RTL-aware) span for keyboard hints inside an item.
+
+## TypeScript
+
+### Key Interfaces
+
+```typescript
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+
+// Root — controlled wrapper
+type ContextMenuProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>
+// { open?, onOpenChange?, dir?, modal?, children, ... }
+
+export const ContextMenu: React.FC<ContextMenuProps>
+
+// Content
+interface ContextMenuContentProps {
+  variant?: 'PresentationStyle'
+  theme?: 'dark' | 'light' | 'default'
+  className?: string
+  collisionPadding?: number // default 8
+  autoGroup?: boolean        // default true
+}
+
+export const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps>
+
+// Item
+interface ContextMenuItemProps {
+  variant?: 'Default' | 'info' | 'Negative'
+  size?: 'S' | 'M'
+  active?: boolean
+  disabled?: boolean
+  onSelect?: (event: Event) => void
+}
+
+export const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps>
+
+// CheckboxItem
+interface ContextMenuCheckboxItemProps {
+  checked?: boolean | 'indeterminate'
+  onCheckedChange?: (checked: boolean) => void
+  variant?: 'Default' | 'info' | 'Negative'
+  size?: 'S' | 'M'
+}
+
+export const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<ContextMenuCheckboxItemProps>
+
+// RadioGroup
+interface ContextMenuRadioGroupProps {
+  value?: string
+  onValueChange?: (value: string) => void
+  variant?: 'Boxed' | 'Plain'
+}
+
+export const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuRadioGroupProps>
+
+// RadioItem
+interface ContextMenuRadioItemProps {
+  value: string
+  variant?: 'Default' | 'info' | 'Negative'
+  size?: 'S' | 'M'
+}
+
+export const ContextMenuRadioItem: React.ForwardRefExoticComponent<ContextMenuRadioItemProps>
+```
+
+## Behavior Notes
+
+- **Opens at the pointer**: the menu opens on right-click (`contextmenu`) at the exact cursor position, not anchored to a fixed trigger button.
+- **Second right-click closes it**: the Root is made controlled and tracks `open` in context. The Trigger listens in the capture phase, and when the menu is already open it `preventDefault()` / `stopPropagation()` and closes — so a second right-click dismisses instead of re-anchoring (which Radix handles unreliably).
+- **Auto-grouping**: by default (`autoGroup` on `ContextMenuContent`, default `true`) consecutive loose items (`ContextMenuItem`, `ContextMenuCheckboxItem`, `ContextMenuRadioItem`, and `ContextMenuSub`) are automatically wrapped in a `Boxed` `ContextMenuGroup`, so they render inside a boxed container like DropdownMenu even when you do not write a group. Labels and explicit groups act as boundaries and pass through unchanged. Set `autoGroup={false}` to render children verbatim.
+- **Checkbox / radio keep the menu open**: `ContextMenuCheckboxItem` and `ContextMenuRadioItem` call `event.preventDefault()` inside `onSelect`, stopping Radix's default auto-close so users can toggle multiple options in one pass.
+- **Open-only animation**: only the open (enter) state animates (`fade-in`). There is intentionally no exit animation — holding the old DOM node during close breaks close/reposition on a second right-click, so it is omitted to keep repositioning reliable.
+- **Submenus and RTL**: nested `ContextMenuSub` / `ContextMenuSubTrigger` / `ContextMenuSubContent` are supported, and `dir="rtl"` on the Root mirrors the layout (including the submenu chevron).
+
+## Accessibility
+
+- **Keyboard Support**:
+  - Shift+F10 or the Menu (context) key: open the menu from the focused trigger
+  - Arrow Down / Arrow Up: move between items
+  - Arrow Right: open submenu (Arrow Left to close) — mirrored in RTL
+  - Enter / Space: select item
+  - Escape: close menu
+- **Touch**: long-press on the trigger opens the menu on touch devices.
+- **ARIA Attributes**: roles and states are applied automatically by Radix UI.
+- **Focus Management**: focus is trapped within the open menu and restored on close.
+- **Screen Readers**: menu structure, checked/selected states, and submenus are announced.
+
+## Best Practices
+
+1. **Use a clear right-click zone**
+   ```typescript
+   <ContextMenuTrigger asChild>
+     <div className="rounded-md border border-dashed">Right-click here</div>
+   </ContextMenuTrigger>
+   ```
+
+2. **Use labels to separate sections** — they also break auto-grouping into distinct boxed runs
+   ```typescript
+   <ContextMenuLabel>Edit</ContextMenuLabel>
+   ```
+
+3. **Show keyboard shortcuts**
+   ```typescript
+   <ContextMenuItem>
+     Save
+     <ContextMenuShortcut>⌘S</ContextMenuShortcut>
+   </ContextMenuItem>
+   ```
+
+4. **Use the Negative variant for destructive actions**
+   ```typescript
+   <ContextMenuItem variant="Negative">Delete</ContextMenuItem>
+   ```
+
+5. **Let checkbox/radio toggles stay open**: rely on the built-in behavior so users can adjust several settings without reopening.
+6. **Avoid deeply nested submenus**: 2 levels max.
+7. **Keep item labels concise**: short, action-oriented text.
+
+## Related Components
+
+- [DropdownMenu](./dropdown-menu.md) - Button-anchored menu
+- [Popover](./popover.md) - Non-menu popover
+- [Select](./select.md) - Form select field

package/docs/components/dropdown-menu.md

@@ -1,13 +1,13 @@
 ---
 title: DropdownMenu
-description: Comprehensive dropdown menu component with rich features including sub-menus, checkboxes, radio groups, and keyboard navigation
+description: Comprehensive dropdown menu component with rich features including sub-menus, checkboxes, radio groups, auto-grouping, and keyboard navigation
 group: Overlays & Dialogs
-keywords: [dropdown-menu, menu, context-menu, radix-ui, submenu, checkbox]
+keywords: [dropdown-menu, menu, radix-ui, submenu, checkbox, radio, auto-group]
 ---
 
 # DropdownMenu
 
-> A feature-rich dropdown menu component with support for nested submenus, checkbox items, radio groups, separators, and keyboard shortcuts. Perfect for application menus, context menus, and complex action lists.
+> A feature-rich dropdown menu component with support for nested submenus, checkbox items, radio groups, auto-grouped boxed sections, and keyboard shortcuts. Perfect for application menus and complex action lists. For right-click menus, see [ContextMenu](./context-menu.md).
 
 ## Installation
 
@@ -27,7 +27,6 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
   DropdownMenuSubTrigger,
@@ -36,6 +35,8 @@ import {
 } from '@torch-ui/components'
 ```
 
+> **Auto-grouping:** Loose items placed directly in `DropdownMenuContent` (or `DropdownMenuSubContent`) are automatically wrapped in a boxed group, so they render inside a rounded container without you writing `DropdownMenuGroup` yourself. A `DropdownMenuLabel`, an explicit `DropdownMenuGroup`, or a `DropdownMenuRadioGroup` acts as a boundary that starts a new box. Disable this with `autoGroup={false}` on the content. (There is no `DropdownMenuSeparator` — separation comes from labels and the boxed groups.)
+
 ## Quick Examples
 
 ### Basic Menu
@@ -122,10 +123,12 @@ function ShortcutMenu() {
 }
 ```
 
-### With Labels and Separators
+### With Labels and Grouping
+
+Labels act as section boundaries. The loose items between labels are automatically wrapped in boxed groups — no separator component needed.
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel } from '@torch-ui/components'
 
 function OrganizedMenu() {
   return (
@@ -138,14 +141,10 @@ function OrganizedMenu() {
         <DropdownMenuItem>Profile</DropdownMenuItem>
         <DropdownMenuItem>Billing</DropdownMenuItem>
 
-        <DropdownMenuSeparator />
-
         <DropdownMenuLabel>Settings</DropdownMenuLabel>
         <DropdownMenuItem>Preferences</DropdownMenuItem>
         <DropdownMenuItem>Keyboard Shortcuts</DropdownMenuItem>
 
-        <DropdownMenuSeparator />
-
         <DropdownMenuItem variant="Negative">Logout</DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
@@ -155,8 +154,10 @@ function OrganizedMenu() {
 
 ### With Checkboxes
 
+Checkbox and radio items keep the menu **open** when toggled (the built-in `onSelect` calls `preventDefault`), so users can change several options without the menu closing each time.
+
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator } from '@torch-ui/components'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem } from '@torch-ui/components'
 import { useState } from 'react'
 
 function CheckboxMenu() {
@@ -295,26 +296,25 @@ function SystemMenu() {
 }
 ```
 
-### Context Menu Pattern
+### Right-click Menu
+
+For a true right-click (context) menu, use the dedicated [ContextMenu](./context-menu.md) component instead of DropdownMenu — it opens at the pointer on right-click / long-press.
 
 ```typescript
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from '@torch-ui/components'
+import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from '@torch-ui/components'
 
-function ContextMenu({ x, y }: { x: number; y: number }) {
+function Example() {
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <div onContextMenu={(e) => e.preventDefault()}>
-          Right-click me
-        </div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem>View</DropdownMenuItem>
-        <DropdownMenuItem>Edit</DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>Properties</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <ContextMenu>
+      <ContextMenuTrigger className="rounded-md border border-dashed p-8">
+        Right-click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>View</ContextMenuItem>
+        <ContextMenuItem>Edit</ContextMenuItem>
+        <ContextMenuItem variant="Negative">Delete</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
   )
 }
 ```
@@ -344,13 +344,15 @@ function ContextMenu({ x, y }: { x: number; y: number }) {
 | `theme` | `'dark' \| 'light' \| 'default'` | - | Theme variant |
 | `className` | `string` | - | Additional CSS classes |
 | `sideOffset` | `number` | `4` | Distance from trigger |
+| `collisionPadding` | `number` | `8` | Gap kept from viewport edges when flipping/shifting |
 | `align` | `'start' \| 'center' \| 'end'` | `'start'` | Alignment |
+| `autoGroup` | `boolean` | `true` | Auto-wrap loose items in boxed groups |
 
 ### DropdownMenuItem
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `variant` | `'Default' \| 'Warning' \| 'Negative' \| 'SystemStyle'` | `'Default'` | Item style variant |
+| `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Item style variant |
 | `size` | `'S' \| 'M'` | `'M'` | Item size |
 | `disabled` | `boolean` | `false` | Disabled state |
 | `active` | `boolean` | `false` | Active state |
@@ -362,7 +364,7 @@ function ContextMenu({ x, y }: { x: number; y: number }) {
 |------|------|---------|-------------|
 | `checked` | `boolean \| 'indeterminate'` | `false` | Checked state |
 | `onCheckedChange` | `(checked: boolean) => void` | - | Change handler |
-| `variant` | `'Default' \| 'Warning' \| 'Negative' \| 'SystemStyle'` | `'Default'` | Style variant |
+| `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Style variant |
 
 ### DropdownMenuRadioGroup
 
@@ -376,7 +378,7 @@ function ContextMenu({ x, y }: { x: number; y: number }) {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `value` | `string` | Required | Radio option value |
-| `variant` | `'Default' \| 'Warning' \| 'Negative' \| 'SystemStyle'` | `'Default'` | Style variant |
+| `variant` | `'Default' \| 'info' \| 'Negative'` | `'Default'` | Style variant |
 
 ### DropdownMenuLabel
 
@@ -384,10 +386,11 @@ function ContextMenu({ x, y }: { x: number; y: number }) {
 |------|------|---------|-------------|
 | `className` | `string` | - | Additional CSS classes |
 
-### DropdownMenuSeparator
+### DropdownMenuGroup
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `variant` | `'Boxed' \| 'Plain'` | `'Boxed'` | Boxed renders a bordered container; Plain is semantic-only |
 | `className` | `string` | - | Additional CSS classes |
 
 ### DropdownMenuShortcut
@@ -427,7 +430,7 @@ export const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuCo
 
 // Item
 interface DropdownMenuItemProps {
-  variant?: 'Default' | 'Warning' | 'Negative' | 'SystemStyle'
+  variant?: 'Default' | 'info' | 'Negative'
   size?: 'S' | 'M'
   disabled?: boolean
   active?: boolean
@@ -440,7 +443,7 @@ export const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemP
 interface DropdownMenuCheckboxItemProps {
   checked?: boolean | 'indeterminate'
   onCheckedChange?: (checked: boolean) => void
-  variant?: 'Default' | 'Warning' | 'Negative' | 'SystemStyle'
+  variant?: 'Default' | 'info' | 'Negative'
 }
 
 export const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps>
@@ -448,7 +451,7 @@ export const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownM
 // RadioItem
 interface DropdownMenuRadioItemProps {
   value: string
-  variant?: 'Default' | 'Warning' | 'Negative' | 'SystemStyle'
+  variant?: 'Default' | 'info' | 'Negative'
 }
 
 export const DropdownMenuRadioItem: React.ForwardRefExoticComponent<DropdownMenuRadioItemProps>