@versini/ui-menu 6.5.0 → 6.6.0

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 import { JSX } from 'react/jsx-runtime';
 
 export declare const Menu: {
-    ({ trigger, children, label, defaultPlacement, onOpenChange, mode, focusMode, sideOffset, }: MenuProps): JSX.Element;
+    ({ trigger, children, label, defaultPlacement, onOpenChange, mode, focusMode, sideOffset, backdrop, }: MenuProps): JSX.Element;
     displayName: string;
 };
 
+declare type MenuBackdropProps = "light" | "medium" | "dark" | "none";
+
 export declare const MenuGroup: {
     ({ children, label, className, icon, }: MenuGroupProps): JSX.Element;
     displayName: string;
@@ -134,6 +136,15 @@ declare type MenuProps = {
      * @default 10
      */
     sideOffset?: number;
+    /**
+     * Whether to dim the background when the menu is open.
+     * - "none" — no backdrop (default)
+     * - "light" — subtle dimming
+     * - "medium" — moderate dimming
+     * - "dark" — heavy dimming
+     * @default "none"
+     */
+    backdrop?: MenuBackdropProps;
 };
 
 export declare const MenuSeparator: {

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-menu v6.5.0
+  @versini/ui-menu v6.6.0
   © 2026 gizmette.com
 */
 
@@ -355,10 +355,13 @@ const getMenuItemClasses = ({ isSub })=>{
         "data-disabled:cursor-not-allowed data-disabled:text-copy-medium": !isSub
     });
 };
-const getMenuClasses = ({ isSub })=>{
-    return clsx("bg-surface-medium", "rounded-md", "outline-hidden", "p-1", {
+const getMenuClasses = ({ isSub, backdrop = "none" })=>{
+    return clsx("bg-surface-light", "rounded-md", "outline-hidden", "p-1", {
         "z-100 plume plume-dark": !isSub,
-        "z-60 mx-3": isSub
+        "z-60 mx-3": isSub,
+        "backdrop:bg-black/10": backdrop === "light" && !isSub,
+        "backdrop:bg-black/25": backdrop === "medium" && !isSub,
+        "backdrop:bg-black/45": backdrop === "dark" && !isSub
     });
 };
 
@@ -413,10 +416,11 @@ function useMenuPosition({ triggerRef, menuRef, placement, sideOffset, isOpen })
 
 
 
-const CONTENT_CLASS = getMenuClasses({
-    isSub: false
-});
-const Menu = ({ trigger, children, label = "Open menu", defaultPlacement = "bottom-start", onOpenChange, mode = "system", focusMode = "system", sideOffset = 10 })=>{
+const Menu = ({ trigger, children, label = "Open menu", defaultPlacement = "bottom-start", onOpenChange, mode = "system", focusMode = "system", sideOffset = 10, backdrop = "none" })=>{
+    const contentClass = getMenuClasses({
+        isSub: false,
+        backdrop
+    });
     const [isOpen, setIsOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
     const [openSubMenuId, setOpenSubMenuId] = useState(null);
@@ -626,7 +630,7 @@ const Menu = ({ trigger, children, label = "Open menu", defaultPlacement = "bott
                     id: menuId,
                     popover: "manual",
                     role: "menu",
-                    className: CONTENT_CLASS,
+                    className: contentClass,
                     children: children
                 })
             ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-menu",
-	"version": "6.5.0",
+	"version": "6.6.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -49,5 +49,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "246529f9d6a79406fe3f2e647f2cf0084fb2733e"
+	"gitHead": "1ca5e655ebd571dcba9f4e7235beb71a37928591"
 }