@versini/ui-menu 5.1.3 → 5.3.0

package/dist/index.d.ts

@@ -1,81 +1,83 @@
-import * as React from 'react';
-import React__default from 'react';
-import { Placement } from '@floating-ui/react';
-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;
-	/**
-	 * The children to render.
-	 */
-	children?: React__default.ReactNode;
-	/**
-	 * The default location of the popup.
-	 * @default "bottom-start"
-	 */
-	defaultPlacement?: Placement;
-	/**
-	 * The type of focus for the Button. This will change the color
-	 * of the focus ring around the Button.
-	 */
-	focusMode?: "dark" | "light" | "system" | "alt-system";
-	/**
-	 * The type of Button trigger. This will change the color of the Button.
-	 */
-	mode?: "dark" | "light" | "system" | "alt-system";
-	/**
-	 * 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;
-	/**
-	 * Callback fired when the component is opened or closed.
-	 * @param open whether or not the menu is open
-	 */
-	onOpenChange?: (open: boolean) => void;
-};
-
-type MenuItemProps = {
-	/**
-	 * The label to use for the menu item.
-	 */
-	label?: string;
-	/**
-	 * Whether or not the menu item is disabled.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * A React component of type Icon to be placed on the left of the label.
-	 */
-	icon?: React__default.ReactNode;
-	/**
-	 * Disable internal menu item behavior (click, focus, etc.).
-	 * @default false
-	 */
-	raw?: boolean;
-	/**
-	 * Whether or not the menu should close when the menu item is selected.
-	 * @default false
-	 */
-	ignoreClick?: boolean;
-	/**
-	 * Whether or not the menu item is selected.
-	 * @default false
-	 */
-	selected?: boolean;
-};
-
-type MenuSeparatorProps = React__default.HTMLAttributes<HTMLDivElement>;
-
-declare const Menu: React__default.ForwardRefExoticComponent<Omit<MenuProps & React__default.HTMLProps<HTMLButtonElement>, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
-
-declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
-declare const MenuSeparator: ({ className, ...props }: MenuSeparatorProps) => react_jsx_runtime.JSX.Element;
-declare const MenuGroupLabel: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
-
-export { Menu, MenuGroupLabel, MenuItem, MenuSeparator };
+import { JSX } from 'react/jsx-runtime';
+import type { Placement } from '@floating-ui/react';
+import { default as React_2 } from 'react';
+import * as React_3 from 'react';
+
+export declare const Menu: React_2.ForwardRefExoticComponent<Omit<MenuProps & React_2.HTMLProps<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare const MenuGroupLabel: ({ className, ...props }: React_3.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+
+export declare const MenuItem: React_3.ForwardRefExoticComponent<MenuItemProps & React_3.ButtonHTMLAttributes<HTMLButtonElement> & React_3.RefAttributes<HTMLButtonElement>>;
+
+declare type MenuItemProps = {
+    /**
+     * The label to use for the menu item.
+     */
+    label?: string;
+    /**
+     * Whether or not the menu item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * A React component of type Icon to be placed on the left of the label.
+     */
+    icon?: React_2.ReactNode;
+    /**
+     * Disable internal menu item behavior (click, focus, etc.).
+     * @default false
+     */
+    raw?: boolean;
+    /**
+     * Whether or not the menu should close when the menu item is selected.
+     * @default false
+     */
+    ignoreClick?: boolean;
+    /**
+     * Whether or not the menu item is selected.
+     * @default false
+     */
+    selected?: boolean;
+};
+
+declare 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_2.ReactNode;
+    /**
+     * The children to render.
+     */
+    children?: React_2.ReactNode;
+    /**
+     * The default location of the popup.
+     * @default "bottom-start"
+     */
+    defaultPlacement?: Placement;
+    /**
+     * The type of focus for the Button. This will change the color
+     * of the focus ring around the Button.
+     */
+    focusMode?: "dark" | "light" | "system" | "alt-system";
+    /**
+     * The type of Button trigger. This will change the color of the Button.
+     */
+    mode?: "dark" | "light" | "system" | "alt-system";
+    /**
+     * 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;
+    /**
+     * Callback fired when the component is opened or closed.
+     * @param open whether or not the menu is open
+     */
+    onOpenChange?: (open: boolean) => void;
+};
+
+export declare const MenuSeparator: ({ className, ...props }: MenuSeparatorProps) => JSX.Element;
+
+declare type MenuSeparatorProps = React_2.HTMLAttributes<HTMLDivElement>;
+
+export { }

package/dist/index.js

@@ -1,21 +1,464 @@
-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.1.3
+  @versini/ui-menu v5.3.0
   © 2025 gizmette.com
 */
 try {
-  window.__VERSINI_UI_MENU__ || (window.__VERSINI_UI_MENU__ = {
-    version: "5.1.3",
-    buildTime: "10/24/2025 07:47 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
+  if (!window.__VERSINI_UI_MENU__) {
+    window.__VERSINI_UI_MENU__ = {
+      version: "5.3.0",
+      buildTime: "11/04/2025 03:44 PM EST",
+      homepage: "https://github.com/aversini/ui-components",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
 }
-export {
-  _ as Menu,
-  n as MenuGroupLabel,
-  t as MenuItem,
-  u as MenuSeparator
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, FloatingTree, autoUpdate, flip, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTypeahead } from "@floating-ui/react";
+import { IconNext, IconSelected, IconUnSelected } from "@versini/ui-icons";
+import clsx from "clsx";
+import react, { createContext, forwardRef, useContext, useEffect, useRef, useState } from "react";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@floating-ui/react"
+
+;// CONCATENATED MODULE: external "@versini/ui-icons"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/components/Menu/MenuContext.tsx
+
+const MenuContext = /*#__PURE__*/ createContext({
+    getItemProps: ()=>({}),
+    activeIndex: null,
+    /* v8 ignore next 2 */ setActiveIndex: ()=>{},
+    setHasFocusInside: ()=>{},
+    isOpen: false,
+    allowHover: false,
+    parent: null
+});
+
+;// CONCATENATED MODULE: ./src/components/Menu/utilities.ts
+const getDisplayName = (element)=>{
+    if (typeof element === "string") {
+        return element;
+    }
+    if (typeof element === "function") {
+        return element.displayName || element.name || "Component";
+    }
+    if (typeof element === "object" && element !== null && "type" in element) {
+        const type = element.type;
+        if (typeof type === "function" || typeof type === "object") {
+            return type.displayName || type.name || "Component";
+        }
+    }
+    return "Element";
 };
+
+;// CONCATENATED MODULE: ./src/components/Menu/Menu.tsx
+
+
+
+
+
+
+
+const MenuComponent = /*#__PURE__*/ forwardRef(({ trigger, children, label = "Open menu", defaultPlacement = "bottom-start", onOpenChange, mode = "system", focusMode = "system", ...props }, forwardedRef)=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasFocusInside, setHasFocusInside] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const [allowHover, setAllowHover] = useState(false);
+    const elementsRef = useRef([]);
+    const labelsRef = useRef([]);
+    const parent = useContext(MenuContext);
+    const tree = useFloatingTree();
+    const nodeId = useFloatingNodeId();
+    const parentId = useFloatingParentNodeId();
+    const item = useListItem({
+        label: label !== "Open menu" ? label : null
+    });
+    const isNested = parentId != null;
+    const { floatingStyles, refs, context } = useFloating({
+        nodeId,
+        open: isOpen,
+        onOpenChange: (args)=>{
+            setIsOpen(args);
+            onOpenChange?.(args);
+        },
+        placement: isNested ? "right-start" : defaultPlacement,
+        strategy: "fixed",
+        middleware: [
+            offset(()=>{
+                /**
+					 * For nested menus, account for responsive padding differences.
+					 * The menu has p-4 (16px) on mobile and p-2 (8px) on sm+ breakpoints.
+					 * At 640px (Tailwind's sm breakpoint), padding changes from 16px to 8px.
+					 * We increase the offset at mobile sizes to compensate for the larger padding.
+					 */ if (isNested) {
+                    const isMobile = window.innerWidth < 640;
+                    return {
+                        mainAxis: isMobile ? 22 : 14,
+                        alignmentAxis: -4
+                    };
+                }
+                return {
+                    mainAxis: 10,
+                    alignmentAxis: 0
+                };
+            }),
+            flip(),
+            shift()
+        ],
+        whileElementsMounted: autoUpdate
+    });
+    const hover = useHover(context, {
+        enabled: isNested && allowHover,
+        delay: {
+            open: 75
+        },
+        handleClose: safePolygon({
+            blockPointerEvents: true
+        })
+    });
+    const click = useClick(context, {
+        event: "mousedown",
+        toggle: !isNested || !allowHover,
+        ignoreMouse: isNested && allowHover
+    });
+    const role = useRole(context, {
+        role: "menu"
+    });
+    const dismiss = useDismiss(context, {
+        bubbles: true
+    });
+    const listNavigation = useListNavigation(context, {
+        listRef: elementsRef,
+        activeIndex,
+        nested: isNested,
+        onNavigate: setActiveIndex,
+        loop: true
+    });
+    const typeahead = useTypeahead(context, {
+        listRef: labelsRef,
+        onMatch: isOpen ? setActiveIndex : undefined,
+        activeIndex
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        hover,
+        click,
+        role,
+        dismiss,
+        listNavigation,
+        typeahead
+    ]);
+    const mergedRef = useMergeRefs([
+        refs.setReference,
+        item.ref,
+        forwardedRef
+    ]);
+    // Event emitter allows you to communicate across tree components.
+    // This effect closes all menus when an item gets clicked anywhere in the tree.
+    useEffect(()=>{
+        /* v8 ignore next 3 */ if (!tree) {
+            return;
+        }
+        function handleTreeClick() {
+            setIsOpen(false);
+            onOpenChange?.(false);
+        }
+        function onSubMenuOpen(event) {
+            if (event.nodeId !== nodeId && event.parentId === parentId) {
+                setIsOpen(false);
+            }
+        }
+        tree.events.on("click", handleTreeClick);
+        tree.events.on("menuopen", onSubMenuOpen);
+        return ()=>{
+            tree.events.off("click", handleTreeClick);
+            tree.events.off("menuopen", onSubMenuOpen);
+        };
+    }, [
+        tree,
+        nodeId,
+        parentId,
+        onOpenChange
+    ]);
+    useEffect(()=>{
+        if (isOpen && tree) {
+            tree.events.emit("menuopen", {
+                parentId,
+                nodeId
+            });
+        }
+    }, [
+        tree,
+        isOpen,
+        nodeId,
+        parentId
+    ]);
+    // Determine if "hover" logic can run based on input modality.
+    // This prevents unwanted focus sync as menus open/close with keyboard nav.
+    useEffect(()=>{
+        function onPointerMove({ pointerType }) {
+            if (pointerType !== "touch") {
+                setAllowHover(true);
+            }
+        }
+        function onKeyDown() {
+            setAllowHover(false);
+        }
+        window.addEventListener("pointermove", onPointerMove, {
+            once: true,
+            capture: true
+        });
+        window.addEventListener("keydown", onKeyDown, true);
+        return ()=>{
+            window.removeEventListener("pointermove", onPointerMove, {
+                capture: true
+            });
+            window.removeEventListener("keydown", onKeyDown, true);
+        };
+    }, []);
+    const noInternalClick = getDisplayName(trigger) === "Button" || getDisplayName(trigger) === "ButtonIcon";
+    const uiButtonsExtraProps = noInternalClick ? {
+        noInternalClick,
+        focusMode,
+        mode
+    } : {};
+    // For nested menus (sub-menus), render as a menu item trigger
+    if (isNested && !trigger) {
+        const buttonClass = 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", "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": isOpen && !hasFocusInside
+        });
+        return /*#__PURE__*/ jsxs(FloatingNode, {
+            id: nodeId,
+            children: [
+                /*#__PURE__*/ jsxs("button", {
+                    ref: mergedRef,
+                    "data-open": isOpen ? "" : undefined,
+                    ...getReferenceProps(parent.getItemProps({
+                        ...props,
+                        className: buttonClass,
+                        onFocus (event) {
+                            props.onFocus?.(event);
+                            setHasFocusInside(false);
+                            parent.setHasFocusInside(true);
+                        },
+                        onMouseEnter (event) {
+                            props.onMouseEnter?.(event);
+                            if (parent.allowHover && parent.isOpen) {
+                                parent.setActiveIndex(item.index);
+                            }
+                        }
+                    })),
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            children: label
+                        }),
+                        /*#__PURE__*/ jsx(IconNext, {
+                            className: "ml-2",
+                            size: "size-3",
+                            monotone: true
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(MenuContext.Provider, {
+                    value: {
+                        activeIndex,
+                        setActiveIndex,
+                        getItemProps,
+                        setHasFocusInside,
+                        isOpen,
+                        allowHover,
+                        parent
+                    },
+                    children: /*#__PURE__*/ jsx(FloatingList, {
+                        elementsRef: elementsRef,
+                        labelsRef: labelsRef,
+                        children: isOpen && /*#__PURE__*/ jsx(FloatingPortal, {
+                            children: /*#__PURE__*/ jsx(FloatingFocusManager, {
+                                context: context,
+                                modal: false,
+                                initialFocus: -1,
+                                returnFocus: false,
+                                children: /*#__PURE__*/ jsx("div", {
+                                    ref: refs.setFloating,
+                                    className: "rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2",
+                                    style: floatingStyles,
+                                    ...getFloatingProps(),
+                                    children: children
+                                })
+                            })
+                        })
+                    })
+                })
+            ]
+        });
+    }
+    const triggerElement = /*#__PURE__*/ react.cloneElement(trigger, {
+        ...uiButtonsExtraProps,
+        "aria-label": label,
+        "data-open": isOpen ? "" : undefined,
+        "data-focus-inside": hasFocusInside ? "" : undefined,
+        ref: mergedRef,
+        ...getReferenceProps(parent.getItemProps({
+            ...props
+        }))
+    });
+    return /*#__PURE__*/ jsxs(FloatingNode, {
+        id: nodeId,
+        children: [
+            triggerElement,
+            /*#__PURE__*/ jsx(MenuContext.Provider, {
+                value: {
+                    activeIndex,
+                    setActiveIndex,
+                    getItemProps,
+                    setHasFocusInside,
+                    isOpen,
+                    allowHover,
+                    parent
+                },
+                children: /*#__PURE__*/ jsx(FloatingList, {
+                    elementsRef: elementsRef,
+                    labelsRef: labelsRef,
+                    children: isOpen && /*#__PURE__*/ jsx(FloatingPortal, {
+                        children: /*#__PURE__*/ jsx(FloatingFocusManager, {
+                            context: context,
+                            modal: false,
+                            initialFocus: 0,
+                            returnFocus: true,
+                            children: /*#__PURE__*/ jsx("div", {
+                                ref: refs.setFloating,
+                                className: "rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2",
+                                style: floatingStyles,
+                                ...getFloatingProps(),
+                                children: children
+                            })
+                        })
+                    })
+                })
+            })
+        ]
+    });
+});
+const Menu = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const parentId = useFloatingParentNodeId();
+    // If parentId is null, this is a root menu - wrap in FloatingTree
+    if (parentId === null) {
+        return /*#__PURE__*/ jsx(FloatingTree, {
+            children: /*#__PURE__*/ jsx(MenuComponent, {
+                ...props,
+                ref: ref
+            })
+        });
+    }
+    // This is a nested sub-menu - don't wrap in FloatingTree
+    return /*#__PURE__*/ jsx(MenuComponent, {
+        ...props,
+        ref: ref
+    });
+});
+Menu.displayName = "Menu";
+MenuComponent.displayName = "MenuComponent";
+
+;// CONCATENATED MODULE: ./src/components/Menu/MenuItem.tsx
+
+
+
+
+
+
+const MenuItem = /*#__PURE__*/ forwardRef(({ label, disabled, icon, raw = false, children, ignoreClick = false, selected, ...props }, forwardedRef)=>{
+    let buttonSpanClass = "";
+    const menu = useContext(MenuContext);
+    const item = useListItem({
+        label: disabled ? null : label
+    });
+    const tree = useFloatingTree();
+    const mergedRef = useMergeRefs([
+        item.ref,
+        forwardedRef
+    ]);
+    if (raw && children) {
+        return /*#__PURE__*/ jsx("div", {
+            role: "menuitem",
+            ...menu.getItemProps({
+                onClick (event) {
+                    if (!ignoreClick) {
+                        props.onClick?.(event);
+                        tree?.events.emit("click");
+                    }
+                }
+            }),
+            children: children
+        });
+    }
+    if (icon) {
+        buttonSpanClass = "pl-2";
+    }
+    const buttonClass = 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", "outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline", "disabled:cursor-not-allowed disabled:text-copy-medium", {
+        "bg-none": !disabled && !selected
+    });
+    return /*#__PURE__*/ jsxs("button", {
+        ...props,
+        ref: mergedRef,
+        role: "menuitem",
+        className: buttonClass,
+        tabIndex: 0,
+        disabled: disabled,
+        ...menu.getItemProps({
+            onClick (event) {
+                if (!ignoreClick) {
+                    props.onClick?.(event);
+                    tree?.events.emit("click");
+                }
+            },
+            onFocus (event) {
+                props.onFocus?.(event);
+                menu.setHasFocusInside(true);
+            }
+        }),
+        children: [
+            selected === true && /*#__PURE__*/ jsx(IconSelected, {
+                className: "text-copy-success mr-2",
+                size: "size-4"
+            }),
+            selected === false && /*#__PURE__*/ jsx(IconUnSelected, {
+                className: "text-copy-medium mr-2",
+                size: "size-4"
+            }),
+            icon,
+            label && /*#__PURE__*/ jsx("span", {
+                className: buttonSpanClass,
+                children: label
+            })
+        ]
+    });
+});
+MenuItem.displayName = "MenuItem";
+const MenuSeparator = ({ className, ...props })=>{
+    const separatorClass = clsx(className, "my-1 border-t border-border-medium");
+    return /*#__PURE__*/ jsx("div", {
+        className: separatorClass,
+        ...props
+    });
+};
+const MenuGroupLabel = ({ className, ...props })=>{
+    const groupLabelClass = clsx(className, "pt-1 mb-2", "text-sm text-copy-dark font-bold", "border-b border-border-medium");
+    return /*#__PURE__*/ jsx("div", {
+        className: groupLabelClass,
+        ...props
+    });
+};
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+
+export { Menu, MenuGroupLabel, MenuItem, MenuSeparator };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-menu",
-	"version": "5.1.3",
+	"version": "5.3.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -20,13 +20,13 @@
 	],
 	"scripts": {
 		"build:check": "tsc",
-		"build:js": "vite build",
-		"build:types": "tsup",
-		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
 		"clean": "rimraf dist tmp",
-		"dev:js": "vite build --watch --mode development",
-		"dev:types": "tsup --watch src",
-		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
 		"lint": "biome lint src",
 		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
@@ -43,12 +43,12 @@
 	"dependencies": {
 		"@floating-ui/react": "0.27.16",
 		"@tailwindcss/typography": "0.5.19",
-		"@versini/ui-icons": "4.14.1",
+		"@versini/ui-icons": "4.15.1",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.16"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "26763e1e738bcdcb0806c39612161666e4bc4459"
+	"gitHead": "7484ad443b77ef31e52ae3a7d88b8129bc6cdf1d"
 }

package/dist/chunks/index.Benv90bx.js

@@ -1,61 +0,0 @@
-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/24/2025 06:42 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-/*!
-  @versini/ui-icons v4.14.1
-  © 2025 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
-    version: "4.14.1",
-    buildTime: "10/24/2025 06:42 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-export {
-  d as I
-};

package/dist/components/Menu/Menu.js

@@ -1,258 +0,0 @@
-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.Benv90bx.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 n = e.type;
-    if (typeof n == "function" || typeof n == "object")
-      return n.displayName || n.name || "Component";
-  }
-  return "Element";
-}, k = q(
-  ({
-    trigger: e,
-    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: c ? "right-start" : x,
-      strategy: "fixed",
-      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: !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
-    }), 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,
-      {
-        ...ne,
-        "aria-label": d,
-        "data-open": o ? "" : void 0,
-        "data-focus-inside": C ? "" : void 0,
-        ref: O,
-        ...B(
-          a.getItemProps({
-            ...h
-          })
-        )
-      }
-    );
-    return /* @__PURE__ */ b(D, { id: u, children: [
-      oe,
-      /* @__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: 0,
-              returnFocus: !0,
-              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
-                }
-              )
-            }
-          ) }) })
-        }
-      )
-    ] });
-  }
-), 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
-};

package/dist/components/Menu/MenuContext.js

@@ -1,16 +0,0 @@
-import * as e from "react";
-const t = e.createContext({
-  getItemProps: () => ({}),
-  activeIndex: null,
-  /* v8 ignore next 2 */
-  setActiveIndex: () => {
-  },
-  setHasFocusInside: () => {
-  },
-  isOpen: !1,
-  allowHover: !1,
-  parent: null
-});
-export {
-  t as MenuContext
-};

package/dist/components/Menu/MenuItem.js

@@ -1,136 +0,0 @@
-import { jsxs as x, jsx as s } from "react/jsx-runtime";
-import { useListItem as C, useFloatingTree as M, useMergeRefs as g } from "@floating-ui/react";
-import { I as b } from "../../chunks/index.Benv90bx.js";
-import l from "clsx";
-import * as p from "react";
-import { MenuContext as h } from "./MenuContext.js";
-const z = ({
-  className: e,
-  viewBox: t,
-  title: o,
-  monotone: a,
-  ...r
-}) => /* @__PURE__ */ x(
-  b,
-  {
-    defaultViewBox: "0 0 512 512",
-    size: "size-5",
-    viewBox: t,
-    className: e,
-    title: o || "Selected",
-    ...r,
-    children: [
-      /* @__PURE__ */ s(
-        "path",
-        {
-          d: "M0 256a256 256 0 1 0 512 0 256 256 0 1 0-512 0m352 0a96 96 0 1 1-192 0 96 96 0 1 1 192 0",
-          opacity: ".4"
-        }
-      ),
-      /* @__PURE__ */ s("path", { d: "M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192" })
-    ]
-  }
-), I = ({
-  className: e,
-  viewBox: t,
-  title: o,
-  monotone: a,
-  ...r
-}) => /* @__PURE__ */ s(
-  b,
-  {
-    defaultViewBox: "0 0 512 512",
-    size: "size-5",
-    viewBox: t,
-    className: e,
-    title: o || "UnSelected",
-    ...r,
-    children: /* @__PURE__ */ s("path", { d: "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512", opacity: ".4" })
-  }
-), k = p.forwardRef(
-  ({
-    label: e,
-    disabled: t,
-    icon: o,
-    raw: a = !1,
-    children: r,
-    ignoreClick: u = !1,
-    selected: i,
-    ...n
-  }, N) => {
-    let d = "";
-    const c = p.useContext(h), w = C({ label: t ? null : e }), f = M(), v = g([w.ref, N]);
-    if (a && r)
-      return /* @__PURE__ */ s(
-        "div",
-        {
-          role: "menuitem",
-          ...c.getItemProps({
-            onClick(m) {
-              u || (n.onClick?.(m), f?.events.emit("click"));
-            }
-          }),
-          children: r
-        }
-      );
-    o && (d = "pl-2");
-    const y = 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 && !i
-      }
-    );
-    return /* @__PURE__ */ x(
-      "button",
-      {
-        ...n,
-        ref: v,
-        role: "menuitem",
-        className: y,
-        tabIndex: 0,
-        disabled: t,
-        ...c.getItemProps({
-          onClick(m) {
-            u || (n.onClick?.(m), f?.events.emit("click"));
-          },
-          onFocus(m) {
-            n.onFocus?.(m), c.setHasFocusInside(!0);
-          }
-        }),
-        children: [
-          i === !0 && /* @__PURE__ */ s(z, { className: "text-copy-success mr-2", size: "size-4" }),
-          i === !1 && /* @__PURE__ */ s(I, { className: "text-copy-medium mr-2", size: "size-4" }),
-          o,
-          e && /* @__PURE__ */ s("span", { className: d, children: e })
-        ]
-      }
-    );
-  }
-);
-k.displayName = "MenuItem";
-const j = ({ className: e, ...t }) => {
-  const o = l(e, "my-1 border-t border-border-medium");
-  return /* @__PURE__ */ s("div", { className: o, ...t });
-}, P = ({
-  className: e,
-  ...t
-}) => {
-  const o = l(
-    e,
-    "pt-1 mb-2",
-    "text-sm text-copy-dark font-bold",
-    "border-b border-border-medium"
-  );
-  return /* @__PURE__ */ s("div", { className: o, ...t });
-};
-export {
-  P as MenuGroupLabel,
-  k as MenuItem,
-  j as MenuSeparator
-};