@versini/ui-menu 6.2.1 → 6.3.0

package/README.md

@@ -17,7 +17,7 @@ The Menu package provides dropdown menus with full keyboard navigation, focus ma
 
 ## Features
 
-- **Composable**: `Menu`, `MenuItem`, `MenuSeparator`, `MenuGroupLabel`, `MenuSub`
+- **Composable**: `Menu`, `MenuItem`, `MenuSeparator`, `MenuLabel`, `MenuGroup`, `MenuSub`
 - **Nested Sub-menus**: Support for multi-level menu hierarchies with automatic positioning
 - **Accessible**: Built with ARIA roles & WAI-ARIA menu patterns for robust a11y
 - **Keyboard Support**: Arrow navigation, ESC / click outside to close
@@ -107,36 +107,17 @@ function AccountMenu() {
 }
 ```
 
-### Raw Custom Item
+### Grouped Menu Items
 
-```tsx
-<Menu
-  trigger={
-    <ButtonIcon label="More">
-      <IconMenu />
-    </ButtonIcon>
-  }
->
-  <MenuItem raw ignoreClick>
-    <div className="p-2 text-xs uppercase tracking-wide text-copy-medium">
-      Custom Header
-    </div>
-  </MenuItem>
-  <MenuItem label="Action" />
-</Menu>
-```
-
-### Nested Sub-menus
-
-Create hierarchical menus using `MenuSub`:
+Use `MenuGroup` to visually group related items with an optional label:
 
 ```tsx
-import { Menu, MenuItem, MenuSub, MenuGroupLabel } from "@versini/ui-menu";
+import { Menu, MenuGroup, MenuItem } from "@versini/ui-menu";
 import { ButtonIcon } from "@versini/ui-button";
 import { IconSettings, IconOpenAI, IconAnthropic } from "@versini/ui-icons";
 
 function SettingsMenu() {
-  const [engine, setEngine] = useState("openai");
+  const [selected, setSelected] = useState(0);
 
   return (
     <Menu
@@ -146,24 +127,117 @@ function SettingsMenu() {
         </ButtonIcon>
       }
     >
-      <MenuItem label="Profile" />
-      <MenuItem label="Preferences" />
-
-      {/* Nested sub-menu with icon */}
-      <MenuSub label="AI Settings" icon={<IconSettings />}>
-        <MenuGroupLabel icon={<IconSettings />}>Engines</MenuGroupLabel>
+      <MenuGroup label="Engines">
         <MenuItem
           label="OpenAI"
           icon={<IconOpenAI />}
-          selected={engine === "openai"}
-          onSelect={() => setEngine("openai")}
+          selected={selected === 1}
+          onClick={() => setSelected(1)}
         />
         <MenuItem
           label="Anthropic"
           icon={<IconAnthropic />}
-          selected={engine === "anthropic"}
-          onSelect={() => setEngine("anthropic")}
+          selected={selected === 2}
+          onClick={() => setSelected(2)}
         />
+      </MenuGroup>
+
+      <MenuGroup label="Personas" className="mt-2">
+        <MenuItem label="Diggidy" selected={selected === 3} />
+        <MenuItem label="French Teacher" selected={selected === 4} />
+      </MenuGroup>
+
+      <MenuItem label="About" />
+    </Menu>
+  );
+}
+```
+
+### Menu with a Label
+
+Use `MenuLabel` to add a non-interactive heading inside a menu:
+
+```tsx
+import { Menu, MenuItem, MenuLabel } from "@versini/ui-menu";
+import { ButtonIcon } from "@versini/ui-button";
+import { IconBookSparkles, IconMagic, IconProofread } from "@versini/ui-icons";
+
+function PromptsMenu() {
+  return (
+    <Menu
+      trigger={
+        <ButtonIcon label="Prompts">
+          <IconBookSparkles />
+        </ButtonIcon>
+      }
+    >
+      <MenuLabel>Prompts</MenuLabel>
+      <MenuItem label="Summarize..." icon={<IconMagic />} />
+      <MenuItem label="Proofread..." icon={<IconProofread />} />
+    </Menu>
+  );
+}
+```
+
+### Nested Sub-menus
+
+Create hierarchical menus using `MenuSub`. Groups work inside sub-menus too:
+
+```tsx
+import {
+  Menu, MenuItem, MenuSub, MenuGroup, MenuSeparator
+} from "@versini/ui-menu";
+import { ButtonIcon } from "@versini/ui-button";
+import {
+  IconSettings, IconOpenAI, IconAnthropic,
+  IconStarInCircle, IconFrenchFlag
+} from "@versini/ui-icons";
+
+function SettingsMenu() {
+  const [model, setModel] = useState("openai");
+  const [persona, setPersona] = useState("diggidy");
+
+  return (
+    <Menu
+      trigger={
+        <ButtonIcon label="Settings">
+          <IconSettings />
+        </ButtonIcon>
+      }
+    >
+      <MenuItem label="Profile" />
+      <MenuItem label="Statistics" />
+      <MenuSeparator />
+
+      <MenuSub label="Engines and Personas" icon={<IconSettings />}>
+        <MenuGroup label="Engines">
+          <MenuItem
+            label="OpenAI"
+            icon={<IconOpenAI />}
+            selected={model === "openai"}
+            onClick={() => setModel("openai")}
+          />
+          <MenuItem
+            label="Anthropic"
+            icon={<IconAnthropic />}
+            selected={model === "anthropic"}
+            onClick={() => setModel("anthropic")}
+          />
+        </MenuGroup>
+        <MenuGroup label="Personas" className="mt-2">
+          <MenuItem
+            label="Diggidy"
+            icon={<IconStarInCircle />}
+            selected={persona === "diggidy"}
+            onClick={() => setPersona("diggidy")}
+          />
+          <MenuItem
+            label="French Teacher"
+            icon={<IconFrenchFlag />}
+            selected={persona === "french_teacher"}
+            onClick={() => setPersona("french_teacher")}
+          />
+        </MenuGroup>
       </MenuSub>
 
       <MenuItem label="About" />
@@ -221,11 +295,20 @@ function SettingsMenu() {
 | `disabled`   | `boolean`         | `false` | Whether the sub-menu is disabled.         |
 | `sideOffset` | `number`          | `14`    | Offset from sub-menu trigger.             |
 
+### MenuGroup Props
+
+| Prop        | Type              | Default | Description                                     |
+| ----------- | ----------------- | ------- | ----------------------------------------------- |
+| `label`     | `string`          | -       | Label displayed at the top of the group.        |
+| `icon`      | `React.ReactNode` | -       | Icon to display on the left of the group label. |
+| `children`  | `React.ReactNode` | -       | MenuItems to render inside the group.           |
+| `className` | `string`          | -       | Custom CSS class for styling.                   |
+
 ### MenuSeparator Props
 
 Standard `React.HTMLAttributes<HTMLDivElement>` - use `className` for custom styling.
 
-### MenuGroupLabel Props
+### MenuLabel Props
 
 | Prop        | Type              | Default | Description                               |
 | ----------- | ----------------- | ------- | ----------------------------------------- |

package/dist/index.d.ts

@@ -5,17 +5,29 @@ export declare const Menu: {
     displayName: string;
 };
 
-export declare const MenuGroupLabel: {
-    ({ className, icon, children, ...props }: MenuGroupLabelProps): JSX.Element;
+export declare const MenuGroup: {
+    ({ children, label, className, icon, }: MenuGroupProps): JSX.Element;
     displayName: string;
 };
 
-declare type MenuGroupLabelProps = {
+declare type MenuGroupProps = {
+    /**
+     * The label for the menu group.
+     */
+    label: string;
+    /**
+     * The children to render inside the menu group.
+     */
+    children?: React.ReactNode;
     /**
      * A React component of type Icon to be placed on the left of the label.
      */
     icon?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Additional class names to apply to the menu group.
+     */
+    className?: string;
+};
 
 export declare const MenuItem: {
     ({ label, disabled, icon, raw, children, ignoreClick, selected, onSelect, onClick, onFocus, onMouseEnter, ...props }: MenuItemProps): JSX.Element;
@@ -73,6 +85,18 @@ declare type MenuItemProps = {
     onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
 
+export declare const MenuLabel: {
+    ({ className, icon, children, ...props }: MenuLabelProps): JSX.Element;
+    displayName: string;
+};
+
+declare type MenuLabelProps = {
+    /**
+     * A React component of type Icon to be placed on the left of the label.
+     */
+    icon?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
 declare type MenuProps = {
     /**
      * The component to use to open the menu, e.g. a ButtonIcon, a Button, etc.

package/dist/index.js

@@ -1,13 +1,14 @@
 /*!
-  @versini/ui-menu v6.2.1
+  @versini/ui-menu v6.3.0
   © 2026 gizmette.com
 */
 
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useUniqueId } from "@versini/ui-hooks/use-unique-id";
+import clsx_0 , { clsx } from "clsx";
 import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
-import clsx from "clsx";
-import { IconNext, IconSelected, IconUnSelected } from "@versini/ui-icons";
+import { IconNext } from "@versini/ui-icons";
+
 
 
 
@@ -245,6 +246,7 @@ function getLastEnabledIndex(items) {
     };
 }
 
+
 const getDisplayName = (element)=>{
     if (typeof element === "string") {
         return element;
@@ -336,6 +338,12 @@ const calculatePosition = (triggerRect, menuRect, placement, sideOffset, viewpor
         left
     };
 };
+const getMenuItemClasses = ({ isSub })=>{
+    return clsx("flex flex-row items-center", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base select-none cursor-pointer", "outline-hidden", "disabled:cursor-not-allowed disabled:text-copy-medium", "data-highlighted:bg-surface-dark", "data-highlighted:text-copy-light", "in-data-menu-group:data-highlighted:bg-surface-dark", "in-data-menu-group:data-highlighted:border-border-medium", {
+        "data-[state=open]:bg-surface-darker data-[state=open]:text-copy-light": isSub,
+        "data-disabled:cursor-not-allowed data-disabled:text-copy-medium": !isSub
+    });
+};
 
 
 
@@ -388,7 +396,8 @@ function useMenuPosition({ triggerRef, menuRef, placement, sideOffset, isOpen })
 
 
 
-const CONTENT_CLASS = "z-100 rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2 plume plume-dark";
+
+const CONTENT_CLASS = clsx("z-100 rounded-md outline-hidden", "bg-surface-light", "text-copy-dark", "p-3 sm:p-2", "plume plume-dark");
 const Menu = ({ trigger, children, label = "Open menu", defaultPlacement = "bottom-start", onOpenChange, mode = "system", focusMode = "system", sideOffset = 10 })=>{
     const [isOpen, setIsOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
@@ -610,33 +619,38 @@ Menu.displayName = "Menu";
 
 
 
-
-const MenuGroupLabel = ({ className, icon, children, ...props })=>{
-    const groupLabelClass = clsx(className, "pt-1 pb-2 mb-2", "text-sm text-copy-dark font-bold", "border-b border-border-medium", {
-        "flex items-center": icon
-    });
-    const labelSpanClass = icon ? "px-2" : "";
+const MenuGroup = ({ children, label, className, icon })=>{
+    const groupClass = clsx_0("rounded-md", "p-2", "bg-surface-dark", "text-copy-light", className);
+    const labelContainerClass = clsx_0("pt-2 pb-2", "px-3 sm:px-2", "-mx-1 -mt-1", "flex items-center justify-between", "text-xs text-copy-medium uppercase font-bold", "rounded-t-md");
     return /*#__PURE__*/ jsxs("div", {
-        className: groupLabelClass,
-        ...props,
+        role: "group",
+        className: groupClass,
+        "data-menu-group": true,
         children: [
-            icon,
-            /*#__PURE__*/ jsx("span", {
-                className: labelSpanClass,
-                children: children
-            })
+            label && /*#__PURE__*/ jsx("div", {
+                className: labelContainerClass,
+                children: /*#__PURE__*/ jsxs("span", {
+                    className: "flex items-center gap-1",
+                    children: [
+                        icon,
+                        label
+                    ]
+                })
+            }),
+            children
         ]
     });
 };
-MenuGroupLabel.displayName = "MenuGroupLabel";
-
+MenuGroup.displayName = "MenuGroup";
 
 
 
 
 
 
-const ITEM_CLASS = clsx("flex flex-row items-center", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base select-none cursor-pointer", "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline", "disabled:cursor-not-allowed disabled:text-copy-medium", "data-highlighted:bg-surface-lighter data-highlighted:border-border-medium data-highlighted:underline", "data-disabled:cursor-not-allowed data-disabled:text-copy-medium");
+const ITEM_CLASS = getMenuItemClasses({
+    isSub: false
+});
 const MenuItem = ({ label, disabled, icon, raw = false, children, ignoreClick = false, selected, onSelect, onClick, onFocus, onMouseEnter, ...props })=>{
     const itemRef = useRef(null);
     const { closeAll } = useContext(MenuRootContext);
@@ -725,7 +739,7 @@ const MenuItem = ({ label, disabled, icon, raw = false, children, ignoreClick =
     if (icon) {
         buttonSpanClass = "pl-2";
     }
-    const itemClass = clsx(ITEM_CLASS, {
+    const itemClass = clsx_0(ITEM_CLASS, {
         "bg-none": !disabled && !selected
     });
     return /*#__PURE__*/ jsxs("div", {
@@ -741,13 +755,14 @@ const MenuItem = ({ label, disabled, icon, raw = false, children, ignoreClick =
         onMouseEnter: handleMouseEnter,
         ...props,
         children: [
-            selected === true && /*#__PURE__*/ jsx(IconSelected, {
-                className: "text-copy-success mr-2",
-                size: "size-4"
+            selected === true && /*#__PURE__*/ jsx("span", {
+                className: "mr-2 flex size-4 shrink-0 items-center justify-center rounded-full border border-copy-success",
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "size-1.5 rounded-full bg-copy-success-light"
+                })
             }),
-            selected === false && /*#__PURE__*/ jsx(IconUnSelected, {
-                className: "text-copy-medium mr-2",
-                size: "size-4"
+            selected === false && /*#__PURE__*/ jsx("span", {
+                className: clsx_0("mr-2 size-4 shrink-0", "rounded-full border border-copy-medium")
             }),
             icon,
             label && /*#__PURE__*/ jsx("span", {
@@ -761,8 +776,29 @@ MenuItem.displayName = "MenuItem";
 
 
 
+const MenuLabel = ({ className, icon, children, ...props })=>{
+    const groupLabelClass = clsx_0(className, "pt-1 pb-2", "text-xs text-copy-medium uppercase font-bold", "border-b border-border-medium", {
+        "flex items-center": icon
+    });
+    const labelSpanClass = icon ? "px-2" : "";
+    return /*#__PURE__*/ jsxs("div", {
+        className: groupLabelClass,
+        ...props,
+        children: [
+            icon,
+            /*#__PURE__*/ jsx("span", {
+                className: labelSpanClass,
+                children: children
+            })
+        ]
+    });
+};
+MenuLabel.displayName = "MenuLabel";
+
+
+
 const MenuSeparator = ({ className, ...props })=>{
-    const separatorClass = clsx(className, "my-1 border-t border-border-medium");
+    const separatorClass = clsx_0(className, "my-1 border-t border-border-medium");
     return /*#__PURE__*/ jsx("div", {
         role: "separator",
         className: separatorClass,
@@ -779,8 +815,12 @@ MenuSeparator.displayName = "MenuSeparator";
 
 
 
-const SUB_CONTENT_CLASS = "z-[60] rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2 mx-3";
-const SUB_TRIGGER_CLASS = clsx("flex items-center flex-row justify-between", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base select-none cursor-pointer", "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline", "disabled:cursor-not-allowed disabled:text-copy-medium", "data-highlighted:bg-surface-lighter data-highlighted:border-border-medium data-highlighted:underline", "data-[state=open]:bg-surface-lighter");
+
+
+const SUB_CONTENT_CLASS = clsx_0("bg-surface-light", "z-60 rounded-md text-copy-light outline-hidden p-3 sm:p-2 mx-3");
+const SUB_TRIGGER_CLASS = getMenuItemClasses({
+    isSub: true
+});
 const MenuSub = ({ label, icon, children, disabled = false, sideOffset = 14 })=>{
     const subMenuId = useUniqueId("av-menu-sub-");
     const [isSubOpen, setIsSubOpen] = useState(false);
@@ -1005,4 +1045,5 @@ MenuSub.displayName = "MenuSub";
 
 
 
-export { Menu, MenuGroupLabel, MenuItem, MenuSeparator, MenuSub };
+
+export { Menu, MenuGroup, MenuItem, MenuLabel, MenuSeparator, MenuSub };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-menu",
-	"version": "6.2.1",
+	"version": "6.3.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -49,5 +49,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "4031959707f3c3fd06007b28b07f77d7a7692516"
+	"gitHead": "6ec1140bfd6c5575eb034224f51149093e8d8683"
 }