Context Menu

import {  ContextMenu,  ContextMenuArrow,  ContextMenuContent,  ContextMenuItem,  ContextMenuSeparator,  ContextMenuTrigger,} from "moduix";export function ContextMenuDemo() {  return (    <ContextMenu>      <ContextMenuTrigger>Right click here</ContextMenuTrigger>      <ContextMenuContent>        <ContextMenuArrow />        <ContextMenuItem closeOnClick>Add to Library</ContextMenuItem>        <ContextMenuItem closeOnClick>Add to Playlist</ContextMenuItem>        <ContextMenuSeparator />        <ContextMenuItem closeOnClick>Play Next</ContextMenuItem>        <ContextMenuItem closeOnClick>Play Last</ContextMenuItem>        <ContextMenuSeparator />        <ContextMenuItem closeOnClick disabled>          Share        </ContextMenuItem>      </ContextMenuContent>    </ContextMenu>  );}

import {  ContextMenu,  ContextMenuArrow,  ContextMenuContent,  ContextMenuItem,  ContextMenuSeparator,  ContextMenuSubmenu,  ContextMenuSubmenuContent,  ContextMenuSubmenuTrigger,  ContextMenuSubmenuTriggerIcon,  ContextMenuTrigger,} from "moduix";export function NestedContextMenuDemo() {  return (    <ContextMenu>      <ContextMenuTrigger>Right click here</ContextMenuTrigger>      <ContextMenuContent>        <ContextMenuArrow />        <ContextMenuItem closeOnClick>Add to Library</ContextMenuItem>        <ContextMenuSubmenu>          <ContextMenuSubmenuTrigger>            Add to Playlist            <ContextMenuSubmenuTriggerIcon />          </ContextMenuSubmenuTrigger>          <ContextMenuSubmenuContent>            <ContextMenuItem closeOnClick>Get Up!</ContextMenuItem>            <ContextMenuItem closeOnClick>Inside Out</ContextMenuItem>            <ContextMenuItem closeOnClick>Night Beats</ContextMenuItem>            <ContextMenuSeparator />            <ContextMenuItem closeOnClick>New Playlist...</ContextMenuItem>          </ContextMenuSubmenuContent>        </ContextMenuSubmenu>        <ContextMenuSeparator />        <ContextMenuItem closeOnClick>Favorite</ContextMenuItem>        <ContextMenuItem closeOnClick>Share</ContextMenuItem>      </ContextMenuContent>    </ContextMenu>  );}

import {  ContextMenu,  ContextMenuArrow,  ContextMenuContent,  ContextMenuItem,  ContextMenuItemShortcut,  ContextMenuSeparator,  ContextMenuTrigger,} from "moduix";export function ShortcutsContextMenuDemo() {  return (    <ContextMenu>      <ContextMenuTrigger>Right click here</ContextMenuTrigger>      <ContextMenuContent>        <ContextMenuArrow />        <ContextMenuItem closeOnClick>          Copy          <ContextMenuItemShortcut>Ctrl+C</ContextMenuItemShortcut>        </ContextMenuItem>        <ContextMenuItem closeOnClick>          Paste          <ContextMenuItemShortcut>Ctrl+V</ContextMenuItemShortcut>        </ContextMenuItem>        <ContextMenuSeparator />        <ContextMenuItem closeOnClick>          Rename          <ContextMenuItemShortcut>F2</ContextMenuItemShortcut>        </ContextMenuItem>      </ContextMenuContent>    </ContextMenu>  );}

import { useState } from "react";import {  ContextMenu,  ContextMenuArrow,  ContextMenuCheckboxItem,  ContextMenuCheckboxItemIndicator,  ContextMenuContent,  ContextMenuGroup,  ContextMenuGroupLabel,  ContextMenuItemText,  ContextMenuRadioGroup,  ContextMenuRadioItem,  ContextMenuRadioItemIndicator,  ContextMenuSeparator,  ContextMenuTrigger,} from "moduix";export function GroupsAndControlsContextMenuDemo() {  const [sortBy, setSortBy] = useState("date");  const [showMinimap, setShowMinimap] = useState(true);  const [showSearch, setShowSearch] = useState(true);  const [showSidebar, setShowSidebar] = useState(false);  return (    <ContextMenu>      <ContextMenuTrigger>Right click here</ContextMenuTrigger>      <ContextMenuContent>        <ContextMenuArrow />        <ContextMenuGroup>          <ContextMenuGroupLabel>Sort</ContextMenuGroupLabel>          <ContextMenuRadioGroup value={sortBy} onValueChange={setSortBy}>            <ContextMenuRadioItem value="date">              <ContextMenuRadioItemIndicator />              <ContextMenuItemText>Date</ContextMenuItemText>            </ContextMenuRadioItem>            <ContextMenuRadioItem value="name">              <ContextMenuRadioItemIndicator />              <ContextMenuItemText>Name</ContextMenuItemText>            </ContextMenuRadioItem>            <ContextMenuRadioItem value="type">              <ContextMenuRadioItemIndicator />              <ContextMenuItemText>Type</ContextMenuItemText>            </ContextMenuRadioItem>          </ContextMenuRadioGroup>        </ContextMenuGroup>        <ContextMenuSeparator />        <ContextMenuGroup>          <ContextMenuGroupLabel>Workspace</ContextMenuGroupLabel>          <ContextMenuCheckboxItem checked={showMinimap} onCheckedChange={setShowMinimap}>            <ContextMenuCheckboxItemIndicator />            <ContextMenuItemText>Minimap</ContextMenuItemText>          </ContextMenuCheckboxItem>          <ContextMenuCheckboxItem checked={showSearch} onCheckedChange={setShowSearch}>            <ContextMenuCheckboxItemIndicator />            <ContextMenuItemText>Search</ContextMenuItemText>          </ContextMenuCheckboxItem>          <ContextMenuCheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>            <ContextMenuCheckboxItemIndicator />            <ContextMenuItemText>Sidebar</ContextMenuItemText>          </ContextMenuCheckboxItem>        </ContextMenuGroup>      </ContextMenuContent>    </ContextMenu>  );}

import { useState } from "react";import {  ContextMenu,  ContextMenuArrow,  ContextMenuCheckboxItem,  ContextMenuCheckboxItemIndicator,  ContextMenuContent,  ContextMenuItemText,  ContextMenuItemTextContent,  ContextMenuItemTextIcon,  ContextMenuItemTextLabel,  ContextMenuTrigger,  InfoIcon,  ShareIcon,} from "moduix";export function IndicatorRightContextMenuDemo() {  const [showMinimap, setShowMinimap] = useState(true);  const [showSearch, setShowSearch] = useState(true);  return (    <ContextMenu>      <ContextMenuTrigger>Right click here</ContextMenuTrigger>      <ContextMenuContent>        <ContextMenuArrow />        <ContextMenuCheckboxItem          checked={showMinimap}          onCheckedChange={setShowMinimap}          indicator="end"        >          <ContextMenuItemText>            <ContextMenuItemTextContent>              <ContextMenuItemTextIcon>                <InfoIcon />              </ContextMenuItemTextIcon>              <ContextMenuItemTextLabel>Minimap</ContextMenuItemTextLabel>            </ContextMenuItemTextContent>          </ContextMenuItemText>          <ContextMenuCheckboxItemIndicator />        </ContextMenuCheckboxItem>        <ContextMenuCheckboxItem          checked={showSearch}          onCheckedChange={setShowSearch}          indicator="end"        >          <ContextMenuItemText>            <ContextMenuItemTextContent>              <ContextMenuItemTextIcon>                <ShareIcon />              </ContextMenuItemTextIcon>              <ContextMenuItemTextLabel>Search</ContextMenuItemTextLabel>            </ContextMenuItemTextContent>          </ContextMenuItemText>          <ContextMenuCheckboxItemIndicator />        </ContextMenuCheckboxItem>      </ContextMenuContent>    </ContextMenu>  );}

import {  ContextMenu,  ContextMenuArrow,  ContextMenuContent,  ContextMenuItem,  ContextMenuSeparator,  ContextMenuTrigger,} from "moduix";export function PositionedContextMenuDemo() {  return (    <ContextMenu>      <ContextMenuTrigger>Right click here</ContextMenuTrigger>      <ContextMenuContent align="start" sideOffset={12} collisionPadding={16}>        <ContextMenuArrow />        <ContextMenuItem closeOnClick>Open</ContextMenuItem>        <ContextMenuItem closeOnClick>Duplicate</ContextMenuItem>        <ContextMenuSeparator />        <ContextMenuItem closeOnClick>Archive</ContextMenuItem>      </ContextMenuContent>    </ContextMenu>  );}

import {  ContextMenu,  ContextMenuArrow,  ContextMenuContent,  ContextMenuItem,  ContextMenuLinkItem,  ContextMenuSeparator,  ContextMenuTrigger,} from "moduix";export function LinkItemsContextMenuDemo() {  return (    <ContextMenu>      <ContextMenuTrigger>Right click here</ContextMenuTrigger>      <ContextMenuContent>        <ContextMenuArrow />        <ContextMenuLinkItem href="#projects">Projects</ContextMenuLinkItem>        <ContextMenuLinkItem href="#teams">Teams</ContextMenuLinkItem>        <ContextMenuLinkItem href="#billing">Billing</ContextMenuLinkItem>        <ContextMenuSeparator />        <ContextMenuItem closeOnClick>Copy Link</ContextMenuItem>      </ContextMenuContent>    </ContextMenu>  );}

import {  ContextMenu,  ContextMenuContent,  ContextMenuItem,  ContextMenuSeparator,  ContextMenuTrigger,} from "moduix";export function CustomStylesContextMenuDemo() {  return (    <ContextMenu>      <ContextMenuTrigger className={styles.customTrigger}>Right click card</ContextMenuTrigger>      <ContextMenuContent        className={styles.customPopup}        classNames={{          portal: styles.customPortal,          backdrop: styles.customBackdrop,          positioner: styles.customPositioner,        }}        withBackdrop      >        <ContextMenuItem closeOnClick>Open details</ContextMenuItem>        <ContextMenuItem closeOnClick>Copy link</ContextMenuItem>        <ContextMenuSeparator />        <ContextMenuItem closeOnClick disabled>          Delete        </ContextMenuItem>      </ContextMenuContent>    </ContextMenu>  );}

.customTrigger {  min-width: 14rem;  min-height: 9rem;  border-color: var(--color-primary);  background:    linear-gradient(var(--color-background), var(--color-background)) padding-box,    linear-gradient(135deg, var(--color-primary), var(--color-ring)) border-box;}.customPortal {  position: relative;}.customBackdrop {  background-color: rgb(0 0 0 / 0.08);  backdrop-filter: blur(0.125rem);}.customPositioner {  z-index: var(--z-popup);}.customPopup {  --context-menu-popup-min-width: 13rem;  --context-menu-popup-bg: var(--color-background);  --context-menu-popup-border-color: var(--color-primary);  --context-menu-popup-shadow: var(--shadow-lg);  --context-menu-highlight-bg: var(--color-primary);  --context-menu-highlight-color: var(--color-primary-foreground);  --context-menu-separator-color: var(--color-primary);}