@versini/ui-menu 5.0.2 → 5.1.1

package/README.md

@@ -18,10 +18,11 @@ The Menu package provides dropdown menus and navigation components with full key
 ## Features
 
 - **📋 Composable**: `Menu`, `MenuItem`, `MenuSeparator`, `MenuGroupLabel`
+- **🔄 Nested Sub-menus**: Support for multi-level menu hierarchies with automatic positioning
 - **♿ Accessible**: Built with Floating UI & ARIA roles for robust a11y
 - **⌨️ Keyboard Support**: Arrow navigation, typeahead matching, ESC / click outside close
 - **🎨 Theme & Focus Modes**: Trigger inherits color + separate focus styling
-- **🧭 Smart Positioning**: Auto flip / shift to remain within viewport
+- **🧭 Smart Positioning**: Auto flip / shift to remain within viewport, responsive spacing
 - **🧪 Type Safe**: Strongly typed props & label-based typeahead
 
 ## Installation
@@ -124,19 +125,81 @@ function AccountMenu() {
 </Menu>
 ```
 
+### Nested Sub-menus
+
+Create hierarchical menus by nesting `Menu` components. Simply use a `Menu` with a `label` prop but no `trigger` to create a sub-menu:
+
+```tsx
+import { Menu, MenuItem, MenuGroupLabel } 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");
+
+  return (
+    <Menu
+      trigger={
+        <ButtonIcon label="Settings">
+          <IconSettings />
+        </ButtonIcon>
+      }
+    >
+      <MenuItem label="Profile" />
+      <MenuItem label="Preferences" />
+
+      {/* Nested sub-menu */}
+      <Menu label="AI Settings">
+        <MenuGroupLabel>Engines</MenuGroupLabel>
+        <MenuItem
+          label="OpenAI"
+          icon={<IconOpenAI />}
+          selected={engine === "openai"}
+          onClick={() => setEngine("openai")}
+        />
+        <MenuItem
+          label="Anthropic"
+          icon={<IconAnthropic />}
+          selected={engine === "anthropic"}
+          onClick={() => setEngine("anthropic")}
+        />
+      </Menu>
+
+      <MenuItem label="About" />
+    </Menu>
+  );
+}
+```
+
+**Features of nested sub-menus:**
+
+- Automatically positioned to the right (or left if no space)
+- Visual chevron indicator (`→`) shows expandable items
+- Hover or click to open sub-menus
+- Smart positioning adjusts for viewport constraints
+- Keyboard navigation works across all levels
+- Sibling sub-menus auto-close when opening another
+
 ## API
 
 ### Menu Props
 
-| Prop               | Type                      | Default          | Description                                                   |
-| ------------------ | ------------------------- | ---------------- | ------------------------------------------------------------- | ------------- | ---------- | ------------------------------------------------- |
-| `trigger`          | `React.ReactNode`         | -                | Element used to open the menu (Button / ButtonIcon / custom). |
-| `children`         | `React.ReactNode`         | -                | One or more `MenuItem` / `MenuSeparator` / custom nodes.      |
-| `defaultPlacement` | `Placement` (Floating UI) | `"bottom-start"` | Initial preferred placement.                                  |
-| `mode`             | `"dark"                   | "light"          | "system"                                                      | "alt-system"` | `"system"` | Color mode of trigger (when using UI buttons).    |
-| `focusMode`        | `"dark"                   | "light"          | "system"                                                      | "alt-system"` | `"system"` | Focus ring thematic mode (when using UI buttons). |
-| `label`            | `string`                  | `"Open menu"`    | Accessible label for the trigger if none present.             |
-| `onOpenChange`     | `(open: boolean) => void` | -                | Called when menu opens or closes.                             |
+| Prop               | Type                                            | Default          | Description                                                                                    |
+| ------------------ | ----------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------- |
+| `trigger`          | `React.ReactNode`                               | -                | Element used to open the menu (Button / ButtonIcon / custom). Optional for nested sub-menus.   |
+| `children`         | `React.ReactNode`                               | -                | One or more `MenuItem` / `MenuSeparator` / `Menu` (for sub-menus) / custom nodes.              |
+| `label`            | `string`                                        | `"Open menu"`    | Accessible label for the trigger. When used without `trigger`, creates a nested sub-menu item. |
+| `defaultPlacement` | `Placement` (Floating UI)                       | `"bottom-start"` | Initial preferred placement (only applies to root menu).                                       |
+| `mode`             | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"`       | Color mode of trigger (when using UI buttons).                                                 |
+| `focusMode`        | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"`       | Focus ring thematic mode (when using UI buttons).                                              |
+| `onOpenChange`     | `(open: boolean) => void`                       | -                | Called when menu opens or closes.                                                              |
+
+**Creating nested sub-menus:**
+
+- Use `Menu` with `label` but without `trigger` to create a sub-menu item
+- Sub-menus automatically show a chevron (`→`) indicator
+- Positioning is automatically handled (right-start, flips to left if needed)
+- Hover or click to open nested menus
 
 ### MenuItem Props
 

package/dist/chunks/index.dzHBmDC4.js

@@ -0,0 +1,61 @@
+import { jsxs as I, jsx as a } from "react/jsx-runtime";
+import m from "clsx";
+const d = ({
+  children: o,
+  fill: s,
+  viewBox: t,
+  className: n,
+  defaultViewBox: _,
+  size: l,
+  title: e,
+  semantic: i = !1,
+  ...r
+}) => {
+  const c = m(l, n);
+  return /* @__PURE__ */ I(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: c,
+      viewBox: t || _,
+      fill: s || "currentColor",
+      role: "img",
+      "aria-hidden": !i,
+      focusable: !1,
+      ...r,
+      children: [
+        e && i && /* @__PURE__ */ a("title", { children: e }),
+        o
+      ]
+    }
+  );
+};
+/*!
+  @versini/ui-svgicon v4.2.2
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
+    version: "4.2.2",
+    buildTime: "10/19/2025 01:03 PM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+/*!
+  @versini/ui-icons v4.13.0
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
+    version: "4.13.0",
+    buildTime: "10/19/2025 01:03 PM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+export {
+  d as I
+};

package/dist/components/Menu/Menu.js

@@ -1,110 +1,247 @@
-import { jsxs as G, jsx as s } from "react/jsx-runtime";
-import { useFloatingTree as J, useFloatingNodeId as K, useListItem as Q, useFloating as V, autoUpdate as W, offset as X, flip as Y, shift as Z, useClick as $, useRole as ee, useDismiss as te, useListNavigation as ne, useTypeahead as oe, useInteractions as se, useMergeRefs as ie, FloatingNode as ae, FloatingList as re, FloatingPortal as le, FloatingFocusManager as ce, FloatingTree as ue } from "@floating-ui/react";
-import fe, { forwardRef as x, useState as f, useRef as h, useContext as de, useEffect as v } from "react";
-import { MenuContext as F } from "./MenuContext.js";
-const I = (e) => {
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { useFloatingTree as se, useFloatingNodeId as ie, useFloatingParentNodeId as W, useListItem as re, useFloating as ae, autoUpdate as le, offset as de, flip as ue, shift as ce, useHover as fe, safePolygon as me, useClick as pe, useRole as he, useDismiss as ve, useListNavigation as ge, useTypeahead as we, useInteractions as ye, useMergeRefs as be, FloatingNode as D, FloatingList as S, FloatingPortal as _, FloatingFocusManager as K, FloatingTree as xe } from "@floating-ui/react";
+import { I as Ie } from "../../chunks/index.dzHBmDC4.js";
+import Fe from "clsx";
+import Ne, { forwardRef as q, useState as y, useRef as U, useContext as Me, useEffect as P } from "react";
+import { MenuContext as R } from "./MenuContext.js";
+const Ee = ({
+  className: e,
+  viewBox: n,
+  title: d,
+  monotone: x,
+  ...f
+}) => /* @__PURE__ */ b(
+  Ie,
+  {
+    defaultViewBox: "0 0 448 512",
+    size: "size-5",
+    viewBox: n,
+    className: e,
+    title: d || "Next",
+    ...f,
+    children: [
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M0 256c0 17.7 14.3 32 32 32h306.7l32-32-32-32H32c-17.7 0-32 14.3-32 32",
+          opacity: x ? "1" : "0.4"
+        }
+      ),
+      /* @__PURE__ */ t("path", { d: "M438.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L370.7 256 233.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" })
+    ]
+  }
+), V = (e) => {
   if (typeof e == "string")
     return e;
   if (typeof e == "function")
     return e.displayName || e.name || "Component";
   if (typeof e == "object" && e !== null && "type" in e) {
-    const t = e.type;
-    if (typeof t == "function" || typeof t == "object")
-      return t.displayName || t.name || "Component";
+    const n = e.type;
+    if (typeof n == "function" || typeof n == "object")
+      return n.displayName || n.name || "Component";
   }
   return "Element";
-}, N = x(
+}, k = q(
   ({
     trigger: e,
-    children: t,
-    label: R = "Open menu",
-    defaultPlacement: b = "bottom-start",
-    onOpenChange: l,
-    mode: M = "system",
-    focusMode: C = "system",
-    ...k
-  }, P) => {
-    const [n, d] = f(!1), [w, E] = f(!1), [c, u] = f(null), p = h([]), m = h([]), j = de(F), o = J(), r = K(), T = Q(), { floatingStyles: B, refs: g, context: i } = V({
-      nodeId: r,
-      open: n,
-      onOpenChange: (a) => {
-        d(a), l?.(a);
+    children: n,
+    label: d = "Open menu",
+    defaultPlacement: x = "bottom-start",
+    onOpenChange: f,
+    mode: G = "system",
+    focusMode: J = "system",
+    ...h
+  }, Q) => {
+    const [o, I] = y(!1), [C, F] = y(!1), [v, g] = y(null), [m, L] = y(!1), N = U([]), M = U([]), a = Me(R), i = se(), u = ie(), p = W(), A = re({ label: d !== "Open menu" ? d : null }), c = p != null, { floatingStyles: H, refs: E, context: l } = ae({
+      nodeId: u,
+      open: o,
+      onOpenChange: (s) => {
+        I(s), f?.(s);
       },
-      placement: b,
+      placement: c ? "right-start" : x,
       strategy: "fixed",
-      middleware: [X({ mainAxis: 10 }), Y(), Z()],
-      whileElementsMounted: W
-    }), L = $(i, {
+      middleware: [
+        de(() => c ? {
+          mainAxis: window.innerWidth < 640 ? 22 : 14,
+          alignmentAxis: -4
+        } : {
+          mainAxis: 10,
+          alignmentAxis: 0
+        }),
+        ue(),
+        ce()
+      ],
+      whileElementsMounted: le
+    }), X = fe(l, {
+      enabled: c && m,
+      delay: { open: 75 },
+      handleClose: me({ blockPointerEvents: !0 })
+    }), Y = pe(l, {
       event: "mousedown",
-      toggle: !0,
-      ignoreMouse: !1
-    }), A = ee(i, { role: "menu" }), D = te(i, { bubbles: !0 }), O = ne(i, {
-      listRef: p,
-      activeIndex: c,
-      nested: !1,
-      onNavigate: u,
+      toggle: !c || !m,
+      ignoreMouse: c && m
+    }), Z = he(l, { role: "menu" }), $ = ve(l, { bubbles: !0 }), ee = ge(l, {
+      listRef: N,
+      activeIndex: v,
+      nested: c,
+      onNavigate: g,
       loop: !0
-    }), S = oe(i, {
-      listRef: m,
-      onMatch: n ? u : void 0,
-      activeIndex: c
-    }), { getReferenceProps: _, getFloatingProps: H, getItemProps: U } = se([L, A, D, O, S]), y = I(e) === "Button" || I(e) === "ButtonIcon", q = y ? {
-      noInternalClick: y,
-      focusMode: C,
-      mode: M
-    } : {}, z = fe.cloneElement(
+    }), te = we(l, {
+      listRef: M,
+      onMatch: o ? g : void 0,
+      activeIndex: v
+    }), { getReferenceProps: B, getFloatingProps: j, getItemProps: z } = ye([X, Y, Z, $, ee, te]), O = be([E.setReference, A.ref, Q]);
+    P(() => {
+      if (!i)
+        return;
+      function s() {
+        I(!1), f?.(!1);
+      }
+      function r(w) {
+        w.nodeId !== u && w.parentId === p && I(!1);
+      }
+      return i.events.on("click", s), i.events.on("menuopen", r), () => {
+        i.events.off("click", s), i.events.off("menuopen", r);
+      };
+    }, [i, u, p, f]), P(() => {
+      o && i && i.events.emit("menuopen", { parentId: p, nodeId: u });
+    }, [i, o, u, p]), P(() => {
+      function s({ pointerType: w }) {
+        w !== "touch" && L(!0);
+      }
+      function r() {
+        L(!1);
+      }
+      return window.addEventListener("pointermove", s, {
+        once: !0,
+        capture: !0
+      }), window.addEventListener("keydown", r, !0), () => {
+        window.removeEventListener("pointermove", s, {
+          capture: !0
+        }), window.removeEventListener("keydown", r, !0);
+      };
+    }, []);
+    const T = V(e) === "Button" || V(e) === "ButtonIcon", ne = T ? {
+      noInternalClick: T,
+      focusMode: J,
+      mode: G
+    } : {};
+    if (c && !e) {
+      const s = Fe(
+        "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",
+        "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline",
+        "disabled:cursor-not-allowed disabled:text-copy-medium",
+        {
+          "bg-surface-lighter": o && !C
+        }
+      );
+      return /* @__PURE__ */ b(D, { id: u, children: [
+        /* @__PURE__ */ b(
+          "button",
+          {
+            ref: O,
+            "data-open": o ? "" : void 0,
+            ...B(
+              a.getItemProps({
+                ...h,
+                className: s,
+                onFocus(r) {
+                  h.onFocus?.(r), F(!1), a.setHasFocusInside(!0);
+                },
+                onMouseEnter(r) {
+                  h.onMouseEnter?.(r), a.allowHover && a.isOpen && a.setActiveIndex(A.index);
+                }
+              })
+            ),
+            children: [
+              /* @__PURE__ */ t("span", { children: d }),
+              /* @__PURE__ */ t(Ee, { className: "ml-2", size: "size-3", monotone: !0 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          R.Provider,
+          {
+            value: {
+              activeIndex: v,
+              setActiveIndex: g,
+              getItemProps: z,
+              setHasFocusInside: F,
+              isOpen: o,
+              allowHover: m,
+              parent: a
+            },
+            children: /* @__PURE__ */ t(S, { elementsRef: N, labelsRef: M, children: o && /* @__PURE__ */ t(_, { children: /* @__PURE__ */ t(
+              K,
+              {
+                context: l,
+                modal: !1,
+                initialFocus: -1,
+                returnFocus: !1,
+                children: /* @__PURE__ */ t(
+                  "div",
+                  {
+                    ref: E.setFloating,
+                    className: "rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2",
+                    style: H,
+                    ...j(),
+                    children: n
+                  }
+                )
+              }
+            ) }) })
+          }
+        )
+      ] });
+    }
+    const oe = Ne.cloneElement(
       e,
       {
-        ...q,
-        "aria-label": R,
-        "data-open": n ? "" : void 0,
-        "data-focus-inside": w ? "" : void 0,
-        ref: ie([g.setReference, T.ref, P]),
-        ..._(
-          j.getItemProps({
-            ...k
+        ...ne,
+        "aria-label": d,
+        "data-open": o ? "" : void 0,
+        "data-focus-inside": C ? "" : void 0,
+        ref: O,
+        ...B(
+          a.getItemProps({
+            ...h
           })
         )
       }
     );
-    return v(() => {
-      if (!o)
-        return;
-      function a() {
-        d(!1), l?.(!1);
-      }
-      return o.events.on("click", a), () => {
-        o.events.off("click", a);
-      };
-    }, [o, l]), v(() => {
-      n && o && o.events.emit("menuopen", { nodeId: r });
-    }, [o, n, r]), /* @__PURE__ */ G(ae, { id: r, children: [
-      z,
-      /* @__PURE__ */ s(
-        F.Provider,
+    return /* @__PURE__ */ b(D, { id: u, children: [
+      oe,
+      /* @__PURE__ */ t(
+        R.Provider,
         {
           value: {
-            activeIndex: c,
-            setActiveIndex: u,
-            getItemProps: U,
-            setHasFocusInside: E,
-            isOpen: n
+            activeIndex: v,
+            setActiveIndex: g,
+            getItemProps: z,
+            setHasFocusInside: F,
+            isOpen: o,
+            allowHover: m,
+            parent: a
           },
-          children: /* @__PURE__ */ s(re, { elementsRef: p, labelsRef: m, children: n && /* @__PURE__ */ s(le, { children: /* @__PURE__ */ s(
-            ce,
+          children: /* @__PURE__ */ t(S, { elementsRef: N, labelsRef: M, children: o && /* @__PURE__ */ t(_, { children: /* @__PURE__ */ t(
+            K,
             {
-              context: i,
+              context: l,
               modal: !1,
               initialFocus: 0,
               returnFocus: !0,
-              children: /* @__PURE__ */ s(
+              children: /* @__PURE__ */ t(
                 "div",
                 {
-                  ref: g.setFloating,
-                  className: "rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-4 sm:p-2",
-                  style: B,
-                  ...H(),
-                  children: t
+                  ref: E.setFloating,
+                  className: "rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2",
+                  style: H,
+                  ...j(),
+                  children: n
                 }
               )
             }
@@ -113,9 +250,9 @@ const I = (e) => {
       )
     ] });
   }
-), pe = x((e, t) => /* @__PURE__ */ s(ue, { children: /* @__PURE__ */ s(N, { ...e, ref: t }) }));
-pe.displayName = "Menu";
-N.displayName = "MenuComponent";
+), Pe = q((e, n) => W() === null ? /* @__PURE__ */ t(xe, { children: /* @__PURE__ */ t(k, { ...e, ref: n }) }) : /* @__PURE__ */ t(k, { ...e, ref: n }));
+Pe.displayName = "Menu";
+k.displayName = "MenuComponent";
 export {
-  pe as Menu
+  Pe as Menu
 };

package/dist/components/Menu/MenuContext.js

@@ -7,7 +7,9 @@ const t = e.createContext({
   },
   setHasFocusInside: () => {
   },
-  isOpen: !1
+  isOpen: !1,
+  allowHover: !1,
+  parent: null
 });
 export {
   t as MenuContext

package/dist/components/Menu/MenuItem.js

@@ -1,66 +1,24 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import { useListItem as h, useFloatingTree as N, useMergeRefs as g } from "@floating-ui/react";
-import u from "clsx";
-import * as I from "react";
-import { MenuContext as v } from "./MenuContext.js";
-const C = ({
-  children: e,
-  fill: t,
-  viewBox: s,
-  className: l,
-  defaultViewBox: i,
-  size: m,
-  title: n,
-  semantic: r = !1,
-  ...d
-}) => {
-  const a = u(m, l);
-  return /* @__PURE__ */ p(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      className: a,
-      viewBox: s || i,
-      fill: t || "currentColor",
-      role: "img",
-      "aria-hidden": !r,
-      focusable: !1,
-      ...d,
-      children: [
-        n && r && /* @__PURE__ */ o("title", { children: n }),
-        e
-      ]
-    }
-  );
-};
-/*!
-  @versini/ui-svgicon v4.2.2
-  © 2025 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
-    version: "4.2.2",
-    buildTime: "10/17/2025 12:12 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-const M = ({
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { useListItem as N, useFloatingTree as w, useMergeRefs as y } from "@floating-ui/react";
+import { I as b } from "../../chunks/index.dzHBmDC4.js";
+import l from "clsx";
+import * as p from "react";
+import { MenuContext as M } from "./MenuContext.js";
+const g = ({
   className: e,
   viewBox: t,
   title: s,
-  monotone: l,
-  ...i
-}) => /* @__PURE__ */ p(
-  C,
+  monotone: n,
+  ...r
+}) => /* @__PURE__ */ x(
+  b,
   {
     defaultViewBox: "0 0 448 512",
     size: "size-5",
     viewBox: t,
     className: e,
-    title: s || "Copied",
-    ...i,
+    title: s || "Checked",
+    ...r,
     children: [
       /* @__PURE__ */ o(
         "path",
@@ -72,96 +30,113 @@ const M = ({
       /* @__PURE__ */ o("path", { d: "M337 175c9.4 9.4 9.4 24.6 0 33.9L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0z" })
     ]
   }
-);
-/*!
-  @versini/ui-icons v4.12.3
-  © 2025 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
-    version: "4.12.3",
-    buildTime: "10/17/2025 12:12 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-const S = I.forwardRef(
+), k = ({
+  className: e,
+  viewBox: t,
+  title: s,
+  monotone: n,
+  ...r
+}) => /* @__PURE__ */ o(
+  b,
+  {
+    defaultViewBox: "0 0 448 512",
+    size: "size-5",
+    viewBox: t,
+    className: e,
+    title: s || "UnChecked",
+    ...r,
+    children: /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M0 96c0-35.3 28.7-64 64-64h320c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z",
+        opacity: ".4"
+      }
+    )
+  }
+), I = p.forwardRef(
   ({
     label: e,
     disabled: t,
     icon: s,
-    raw: l = !1,
-    children: i,
-    ignoreClick: m = !1,
-    selected: n = !1,
-    ...r
-  }, d) => {
-    let a = "";
-    const f = I.useContext(v), _ = h({ label: t ? null : e }), b = N(), w = g([_.ref, d]);
-    if (l && i)
+    raw: n = !1,
+    children: r,
+    ignoreClick: u = !1,
+    selected: i,
+    ...m
+  }, h) => {
+    let d = "";
+    const a = p.useContext(M), C = N({ label: t ? null : e }), f = w(), v = y([C.ref, h]);
+    if (n && r)
       return /* @__PURE__ */ o(
         "div",
         {
           role: "menuitem",
-          ...f.getItemProps({
+          ...a.getItemProps({
             onClick(c) {
-              m || (r.onClick?.(c), b?.events.emit("click"));
+              u || (m.onClick?.(c), f?.events.emit("click"));
             }
           }),
-          children: i
+          children: r
         }
       );
-    s && (a = "pl-2");
-    const x = u(
-      "items-center flex-row",
-      "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1 flex w-full rounded-md border border-transparent text-left text-base outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline disabled:cursor-not-allowed disabled:text-copy-medium",
+    s && (d = "pl-2");
+    const z = l(
+      "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",
+      "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline",
+      "disabled:cursor-not-allowed disabled:text-copy-medium",
       {
-        "bg-none": !t && !n
+        "bg-none": !t && !i
       }
     );
-    return /* @__PURE__ */ p(
+    return /* @__PURE__ */ x(
       "button",
       {
-        ...r,
-        ref: w,
+        ...m,
+        ref: v,
         role: "menuitem",
-        className: x,
+        className: z,
         tabIndex: 0,
         disabled: t,
-        ...f.getItemProps({
+        ...a.getItemProps({
           onClick(c) {
-            m || (r.onClick?.(c), b?.events.emit("click"));
+            u || (m.onClick?.(c), f?.events.emit("click"));
           },
           onFocus(c) {
-            r.onFocus?.(c), f.setHasFocusInside(!0);
+            m.onFocus?.(c), a.setHasFocusInside(!0);
           }
         }),
         children: [
-          n && /* @__PURE__ */ o(M, { className: "mr-2", size: "size-4" }),
+          i === !0 && /* @__PURE__ */ o(g, { className: "text-copy-success mr-2", size: "size-4" }),
+          i === !1 && /* @__PURE__ */ o(k, { className: "text-copy-medium mr-2", size: "size-4" }),
           s,
-          e && /* @__PURE__ */ o("span", { className: a, children: e })
+          e && /* @__PURE__ */ o("span", { className: d, children: e })
         ]
       }
     );
   }
 );
-S.displayName = "MenuItem";
-const T = ({ className: e, ...t }) => {
-  const s = u(e, "my-1 border-t border-border-medium");
+I.displayName = "MenuItem";
+const V = ({ className: e, ...t }) => {
+  const s = l(e, "my-1 border-t border-border-medium");
   return /* @__PURE__ */ o("div", { className: s, ...t });
-}, k = ({
+}, j = ({
   className: e,
   ...t
 }) => {
-  const s = u(
+  const s = l(
     e,
-    "pt-1 mb-2 text-sm text-copy-dark border-b border-border-medium"
+    "pt-1 mb-2",
+    "text-sm text-copy-dark font-bold",
+    "border-b border-border-medium"
   );
   return /* @__PURE__ */ o("div", { className: s, ...t });
 };
 export {
-  k as MenuGroupLabel,
-  S as MenuItem,
-  T as MenuSeparator
+  j as MenuGroupLabel,
+  I as MenuItem,
+  V as MenuSeparator
 };

package/dist/index.d.ts

@@ -6,8 +6,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 type MenuProps = {
 	/**
 	 * The component to use to open the menu, e.g. a ButtonIcon, a Button, etc.
+	 * Required for root menus, omit for nested sub-menus (use label instead).
 	 */
-	trigger: React__default.ReactNode;
+	trigger?: React__default.ReactNode;
 	/**
 	 * The children to render.
 	 */
@@ -27,7 +28,8 @@ type MenuProps = {
 	 */
 	mode?: "dark" | "light" | "system" | "alt-system";
 	/**
-	 * The label to use for the menu button.
+	 * The label to use for the menu button (root menu) or the sub-menu trigger text (nested menu).
+	 * When used without a trigger, this creates a nested sub-menu.
 	 */
 	label?: string;
 	/**

package/dist/index.js

@@ -1,13 +1,13 @@
 import { Menu as _ } from "./components/Menu/Menu.js";
 import { MenuGroupLabel as n, MenuItem as t, MenuSeparator as u } from "./components/Menu/MenuItem.js";
 /*!
-  @versini/ui-menu v5.0.2
+  @versini/ui-menu v5.1.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_MENU__ || (window.__VERSINI_UI_MENU__ = {
-    version: "5.0.2",
-    buildTime: "10/17/2025 12:53 PM EDT",
+    version: "5.1.1",
+    buildTime: "10/20/2025 03:40 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-menu",
-	"version": "5.0.2",
+	"version": "5.1.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -43,12 +43,12 @@
 	"dependencies": {
 		"@floating-ui/react": "0.27.16",
 		"@tailwindcss/typography": "0.5.19",
-		"@versini/ui-icons": "4.12.3",
+		"@versini/ui-icons": "4.13.0",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.14"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "67e049c9b2e46e8f52509bf6198ca0cdaf5d970a"
+	"gitHead": "b3e3e28ac8c5a3f1b6641dd373cd0bb6f34e3bbe"
 }