ContextMenu

import { Button } from "sebs7n-ui/button"
import { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "sebs7n-ui/context-menu"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "sebs7n-ui/dropdown-menu"
import { Fragment } from "react"
import { MoreHorizontalIcon } from "lucide-react"

function Archivos() {
  return (
    <ul aria-label="Archivos" className="flex w-full max-w-xl flex-col">
      {ARCHIVOS.map((archivo) => (
        <li key={archivo.nombre} className="relative">
          <ContextMenu>
            <ContextMenuTrigger className="flex h-10 w-full items-center gap-3 rounded-item pr-12 pl-3 text-left hover:bg-fill-1">
              <span aria-hidden="true" className="flex size-6 shrink-0 items-center justify-center [&_svg]:size-5">
                {archivo.icon}
              </span>
              <span className="min-w-0 flex-1 truncate text-body text-label">{archivo.nombre}</span>
              <span className="hidden w-32 text-callout text-label-secondary sm:block">{archivo.tipo}</span>
              <span className="w-14 text-right text-callout text-label-secondary">{archivo.peso}</span>
            </ContextMenuTrigger>
            <ContextMenuContent>
              {ACCIONES.map((grupo, i) => (
                <Fragment key={grupo[0]!.label}>
                  {i > 0 && <ContextMenuSeparator />}
                  <ContextMenuGroup>
                    {grupo.map((accion) => (
                      <ContextMenuItem key={accion.label} variant={accion.destructive ? "destructive" : "default"}>
                        {accion.icon}
                        {accion.label}
                      </ContextMenuItem>
                    ))}
                  </ContextMenuGroup>
                </Fragment>
              ))}
            </ContextMenuContent>
          </ContextMenu>

          <DropdownMenu>
            <DropdownMenuTrigger
              render={<Button aria-label={`Acciones de ${archivo.nombre}`} size="icon-sm" variant="plain" />}
              className="absolute top-1.5 right-1.5"
            >
              <MoreHorizontalIcon />
            </DropdownMenuTrigger>
            {/* Como en Drive: el menú se abre al costado del botón, alineado con la fila. */}
            <DropdownMenuContent align="start" side="left">
              {ACCIONES.map((grupo, i) => (
                <Fragment key={grupo[0]!.label}>
                  {i > 0 && <DropdownMenuSeparator />}
                  {grupo.map((accion) => (
                    <DropdownMenuItem key={accion.label} variant={accion.destructive ? "destructive" : "default"}>
                      {accion.icon}
                      {accion.label}
                    </DropdownMenuItem>
                  ))}
                </Fragment>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </li>
      ))}
    </ul>
  )
}

import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger } from "sebs7n-ui/context-menu"
import { CopyIcon } from "lucide-react"
import { useState } from "react"

function Lienzo() {
  const [zoom, setZoom] = useState("100")
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full max-w-md items-center justify-center rounded-control border border-dashed border-separator bg-fill-1 text-callout text-label-secondary">
        Click derecho sobre el lienzo
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuGroup>
          <ContextMenuLabel>Mostrar</ContextMenuLabel>
          <ContextMenuCheckboxItem defaultChecked>Grilla</ContextMenuCheckboxItem>
          <ContextMenuCheckboxItem defaultChecked>Guías</ContextMenuCheckboxItem>
          <ContextMenuCheckboxItem>Reglas</ContextMenuCheckboxItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuGroup>
          <ContextMenuLabel>Zoom</ContextMenuLabel>
          <ContextMenuRadioGroup onValueChange={setZoom} value={zoom}>
            <ContextMenuRadioItem value="50">50 %</ContextMenuRadioItem>
            <ContextMenuRadioItem value="100">100 %</ContextMenuRadioItem>
            <ContextMenuRadioItem value="200">200 %</ContextMenuRadioItem>
          </ContextMenuRadioGroup>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <CopyIcon />
          Duplicar selección
          <ContextMenuShortcut>⌘D</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}