laif-ds/dist/agent-docs/components/ContextMenu.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # 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.