@refraktor/core 0.0.1

package/build/components/menu/menu-trigger/menu-trigger.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { focusMenuItem, getNavigableMenuItems, useMenuLevelContext, useMenuRootContext } from "../menu.context";
+const MenuTrigger = factory(({ children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { getStyles } = useMenuRootContext();
+    const level = useMenuLevelContext();
+    const focusFirstItem = () => {
+        const items = getNavigableMenuItems(level.getItems());
+        focusMenuItem(items[0]);
+    };
+    const focusLastItem = () => {
+        const items = getNavigableMenuItems(level.getItems());
+        focusMenuItem(items[items.length - 1]);
+    };
+    const triggerElement = isValidElement(children)
+        ? cloneElement(children, {
+            ref: (node) => {
+                level.menu.refs.setReference(node);
+                const childRef = children.ref;
+                if (typeof childRef === "function") {
+                    childRef(node);
+                }
+                else if (childRef) {
+                    childRef.current = node;
+                }
+                if (typeof ref === "function") {
+                    ref(node);
+                }
+                else if (ref) {
+                    ref.current = node;
+                }
+            },
+            ...level.menu.getReferenceProps({
+                ...children.props,
+                "aria-haspopup": "menu",
+                "aria-expanded": level.menu.opened,
+                onKeyDown: (event) => {
+                    children.props?.onKeyDown?.(event);
+                    if (event.defaultPrevented) {
+                        return;
+                    }
+                    if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        if (!level.menu.opened) {
+                            level.menu.open();
+                        }
+                        requestAnimationFrame(focusFirstItem);
+                    }
+                    if (event.key === "ArrowUp") {
+                        event.preventDefault();
+                        if (!level.menu.opened) {
+                            level.menu.open();
+                        }
+                        requestAnimationFrame(focusLastItem);
+                    }
+                }
+            })
+        })
+        : children;
+    return (_jsx("div", { className: cx("inline-block", getStyles("trigger"), className), "data-opened": level.menu.opened, ...props, children: triggerElement }));
+});
+MenuTrigger.displayName = "@refraktor/core/Menu.Trigger";
+export default MenuTrigger;

package/build/components/menu/menu.context.d.ts

@@ -0,0 +1,58 @@
+import { RefraktorRadius } from "../../theme";
+import { TransitionProps } from "../transition";
+import { MenuClassNames } from "./menu.types";
+import { UseMenuReturn } from "./use-menu";
+export interface MenuItemRegistration {
+    id: string;
+    ref: React.MutableRefObject<HTMLElement | null>;
+    disabled: boolean;
+    textValue: string;
+    hasSubmenu?: boolean;
+    openSubmenu?: (focusFirstItem?: boolean) => void;
+}
+export interface MenuRootContextValue {
+    radius: RefraktorRadius;
+    withinPortal: boolean;
+    closeOnItemClick: boolean;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    classNames?: MenuClassNames;
+    getStyles: (part: keyof MenuClassNames) => string | undefined;
+}
+export interface MenuLevelContextValue {
+    menu: UseMenuReturn;
+    isSubmenu: boolean;
+    registerItem: (item: MenuItemRegistration) => () => void;
+    getItems: () => MenuItemRegistration[];
+    closeMenu: () => void;
+    closeAllMenus: () => void;
+}
+export interface MenuSubContextValue {
+    submenuLevel: MenuLevelContextValue;
+    parentLevel: MenuLevelContextValue;
+    disabled: boolean;
+    openSubmenu: (focusFirstItem?: boolean) => void;
+    closeSubmenu: () => void;
+}
+export declare const MenuRootProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: MenuRootContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useMenuRootContext: () => MenuRootContextValue;
+export declare const MenuLevelProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: MenuLevelContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useMenuLevelContext: () => MenuLevelContextValue;
+export declare const MenuSubProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: MenuSubContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useMenuSubContext: () => MenuSubContextValue;
+export declare function useMenuItemsRegistry(): {
+    registerItem: (item: MenuItemRegistration) => () => void;
+    getItems: () => MenuItemRegistration[];
+};
+export declare function sortMenuItems(items: MenuItemRegistration[]): MenuItemRegistration[];
+export declare function getNavigableMenuItems(items: MenuItemRegistration[]): MenuItemRegistration[];
+export declare function findFocusedMenuItemIndex(items: MenuItemRegistration[]): number;
+export declare function focusMenuItem(item?: MenuItemRegistration): void;
+export declare function findTypeaheadMatch(items: MenuItemRegistration[], search: string, currentIndex: number): number;
+export declare function getNodeTextValue(children: React.ReactNode, explicitTextValue?: string): string;
+//# sourceMappingURL=menu.context.d.ts.map

package/build/components/menu/menu.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.context.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,WAAW,oBAAoB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,eAAe,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;IAChE,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,cAAc,KAAK,MAAM,GAAG,SAAS,CAAC;CACjE;AAED,MAAM,WAAW,qBAAqB;IAClC,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,MAAM,IAAI,CAAC;IACzD,QAAQ,EAAE,MAAM,oBAAoB,EAAE,CAAC;IACvC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAChC,YAAY,EAAE,qBAAqB,CAAC;IACpC,WAAW,EAAE,qBAAqB,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAO,gBAAgB;;;+CAAE,kBAAkB,4BAG7C,CAAC;AAEN,eAAO,MAAO,iBAAiB;;;+CAAE,mBAAmB,6BAG/C,CAAC;AAEN,eAAO,MAAO,eAAe;;;+CAAE,iBAAiB,2BAG3C,CAAC;AAEN,wBAAgB,oBAAoB;yBAGQ,oBAAoB;;EAc/D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,oBAAoB,EAAE,0BAqB1D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,oBAAoB,EAAE,0BAElE;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,oBAAoB,EAAE,UAErE;AAED,wBAAgB,aAAa,CAAC,IAAI,CAAC,EAAE,oBAAoB,QAExD;AAED,wBAAgB,kBAAkB,CAC9B,KAAK,EAAE,oBAAoB,EAAE,EAC7B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,UAgCvB;AAED,wBAAgB,gBAAgB,CAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,iBAAiB,CAAC,EAAE,MAAM,UAW7B"}

package/build/components/menu/menu.context.js

@@ -0,0 +1,77 @@
+import { createSafeContext } from "@refraktor/utils";
+import { useCallback, useRef } from "react";
+export const [MenuRootProvider, useMenuRootContext] = createSafeContext("Menu component was not found in tree. Make sure Menu components are wrapped with Menu.");
+export const [MenuLevelProvider, useMenuLevelContext] = createSafeContext("Menu dropdown context was not found in tree. Make sure Menu.Item and related components are inside Menu.Dropdown or Menu.SubDropdown.");
+export const [MenuSubProvider, useMenuSubContext] = createSafeContext("Menu.Sub context was not found in tree. Make sure Menu.SubTrigger and Menu.SubDropdown are inside Menu.Sub.");
+export function useMenuItemsRegistry() {
+    const itemsRef = useRef([]);
+    const registerItem = useCallback((item) => {
+        itemsRef.current = [...itemsRef.current.filter((x) => x.id !== item.id), item];
+        return () => {
+            itemsRef.current = itemsRef.current.filter((x) => x.id !== item.id);
+        };
+    }, []);
+    const getItems = useCallback(() => sortMenuItems(itemsRef.current), []);
+    return {
+        registerItem,
+        getItems
+    };
+}
+export function sortMenuItems(items) {
+    return [...items].sort((a, b) => {
+        const aNode = a.ref.current;
+        const bNode = b.ref.current;
+        if (!aNode || !bNode || aNode === bNode) {
+            return 0;
+        }
+        const position = aNode.compareDocumentPosition(bNode);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+        }
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+        }
+        return 0;
+    });
+}
+export function getNavigableMenuItems(items) {
+    return items.filter((item) => !item.disabled);
+}
+export function findFocusedMenuItemIndex(items) {
+    return items.findIndex((item) => item.ref.current === document.activeElement);
+}
+export function focusMenuItem(item) {
+    item?.ref.current?.focus();
+}
+export function findTypeaheadMatch(items, search, currentIndex) {
+    if (!items.length || !search) {
+        return -1;
+    }
+    const normalizedSearch = search.trim().toLowerCase();
+    if (!normalizedSearch) {
+        return -1;
+    }
+    const getNormalizedText = (item) => item.textValue.trim().toLowerCase();
+    for (let index = currentIndex + 1; index < items.length; index++) {
+        const item = items[index];
+        if (getNormalizedText(item).startsWith(normalizedSearch)) {
+            return index;
+        }
+    }
+    for (let index = 0; index <= currentIndex; index++) {
+        const item = items[index];
+        if (getNormalizedText(item).startsWith(normalizedSearch)) {
+            return index;
+        }
+    }
+    return -1;
+}
+export function getNodeTextValue(children, explicitTextValue) {
+    if (explicitTextValue) {
+        return explicitTextValue;
+    }
+    if (typeof children === "string" || typeof children === "number") {
+        return String(children);
+    }
+    return "";
+}

package/build/components/menu/menu.d.ts

@@ -0,0 +1,4 @@
+import { MenuFactoryPayload } from "./menu.types";
+declare const Menu: import("../..").RefraktorComponent<MenuFactoryPayload>;
+export default Menu;
+//# sourceMappingURL=menu.d.ts.map

package/build/components/menu/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,kBAAkB,EAA6B,MAAM,cAAc,CAAC;AAgC7E,QAAA,MAAM,IAAI,wDA6ER,CAAC;AAcH,eAAe,IAAI,CAAC"}

package/build/components/menu/menu.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+import { useMenu } from "./use-menu";
+import { MenuLevelProvider, MenuRootProvider, useMenuItemsRegistry } from "./menu.context";
+import { MenuTrigger } from "./menu-trigger";
+import { MenuDropdown } from "./menu-dropdown";
+import { MenuItem } from "./menu-item";
+import { MenuLabel } from "./menu-label";
+import { MenuSeparator } from "./menu-separator";
+import { MenuSub } from "./menu-sub";
+import { MenuSubTrigger } from "./menu-sub-trigger";
+import { MenuSubDropdown } from "./menu-sub-dropdown";
+const defaultProps = {
+    positioning: {
+        placement: "bottom-start",
+        offset: 4
+    },
+    middlewares: { flip: true, shift: true },
+    trigger: "click",
+    openDelay: 0,
+    closeDelay: 100,
+    radius: "default",
+    withinPortal: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    closeOnItemClick: true
+};
+const Menu = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, children, opened, defaultOpened, onOpenedChange, positioning, middlewares, disabled, trigger, openDelay, closeDelay, transitionProps, radius, withinPortal, closeOnClickOutside, closeOnEscape, closeOnItemClick, className, classNames, ...props } = useProps("Menu", defaultProps, _props);
+    const classes = useClassNames("Menu", classNames);
+    const _id = useId(id);
+    const menu = useMenu({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        trigger,
+        closeOnClickOutside,
+        closeOnEscape,
+        openDelay,
+        closeDelay
+    });
+    const registry = useMenuItemsRegistry();
+    const getStyles = (part) => classes[part];
+    return (_jsx(MenuRootProvider, { value: {
+            radius: radius ?? "default",
+            withinPortal: withinPortal ?? true,
+            closeOnItemClick: closeOnItemClick ?? true,
+            transitionProps,
+            classNames,
+            getStyles
+        }, children: _jsx(MenuLevelProvider, { value: {
+                menu,
+                isSubmenu: false,
+                registerItem: registry.registerItem,
+                getItems: registry.getItems,
+                closeMenu: menu.close,
+                closeAllMenus: menu.close
+            }, children: _jsx("div", { ref: ref, id: _id, className: cx("inline-block", classes.root, className), ...props, children: children }) }) }));
+});
+Menu.displayName = "@refraktor/core/Menu";
+Menu.configure = createComponentConfig();
+Menu.classNames = createClassNamesConfig();
+Menu.Trigger = MenuTrigger;
+Menu.Dropdown = MenuDropdown;
+Menu.Item = MenuItem;
+Menu.Label = MenuLabel;
+Menu.Separator = MenuSeparator;
+Menu.Sub = MenuSub;
+Menu.SubTrigger = MenuSubTrigger;
+Menu.SubDropdown = MenuSubDropdown;
+export default Menu;

package/build/components/menu/menu.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=menu.test.d.ts.map

package/build/components/menu/menu.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.test.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.test.tsx"],"names":[],"mappings":""}

package/build/components/menu/menu.test.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent, waitFor } from "../../vitest";
+import Menu from "./menu";
+describe("@refraktor/core/Menu", () => {
+    const transitionProps = {
+        duration: 0,
+        immediate: true
+    };
+    it("opens on trigger click and closes on item selection", async () => {
+        const user = userEvent.setup();
+        const onSelect = vi.fn();
+        await render(_jsxs(Menu, { transitionProps: transitionProps, children: [_jsx(Menu.Trigger, { children: _jsx("button", { type: "button", children: "Open menu" }) }), _jsx(Menu.Dropdown, { children: _jsx(Menu.Item, { onSelect: onSelect, children: "Profile" }) })] }));
+        await user.click(screen.getByRole("button", { name: "Open menu" }));
+        expect(screen.getByRole("menu")).toBeInTheDocument();
+        await user.click(screen.getByRole("menuitem", { name: "Profile" }));
+        expect(onSelect).toHaveBeenCalledTimes(1);
+        await waitFor(() => {
+            expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+        });
+    });
+    it("does not activate disabled item", async () => {
+        const user = userEvent.setup();
+        const onSelect = vi.fn();
+        await render(_jsxs(Menu, { transitionProps: transitionProps, children: [_jsx(Menu.Trigger, { children: _jsx("button", { type: "button", children: "Open menu" }) }), _jsx(Menu.Dropdown, { children: _jsx(Menu.Item, { disabled: true, onSelect: onSelect, children: "Disabled item" }) })] }));
+        await user.click(screen.getByRole("button", { name: "Open menu" }));
+        const item = screen.getByRole("menuitem", { name: "Disabled item" });
+        expect(item).toBeDisabled();
+        await user.click(item);
+        expect(onSelect).not.toHaveBeenCalled();
+        expect(screen.getByRole("menu")).toBeInTheDocument();
+    });
+    it("supports keyboard navigation", async () => {
+        const user = userEvent.setup();
+        const onFirstSelect = vi.fn();
+        const onSecondSelect = vi.fn();
+        await render(_jsxs(Menu, { transitionProps: transitionProps, children: [_jsx(Menu.Trigger, { children: _jsx("button", { type: "button", children: "Open menu" }) }), _jsxs(Menu.Dropdown, { children: [_jsx(Menu.Item, { onSelect: onFirstSelect, children: "First" }), _jsx(Menu.Item, { onSelect: onSecondSelect, children: "Second" })] })] }));
+        const trigger = screen.getByRole("button", { name: "Open menu" });
+        trigger.focus();
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{ArrowDown}");
+        await user.keyboard("{Enter}");
+        expect(onFirstSelect).not.toHaveBeenCalled();
+        expect(onSecondSelect).toHaveBeenCalledTimes(1);
+    });
+    it("opens submenu with keyboard and selects submenu item", async () => {
+        const user = userEvent.setup();
+        const onSubSelect = vi.fn();
+        await render(_jsxs(Menu, { transitionProps: transitionProps, children: [_jsx(Menu.Trigger, { children: _jsx("button", { type: "button", children: "Open menu" }) }), _jsx(Menu.Dropdown, { children: _jsxs(Menu.Sub, { children: [_jsx(Menu.SubTrigger, { children: "More" }), _jsx(Menu.SubDropdown, { children: _jsx(Menu.Item, { onSelect: onSubSelect, children: "Sub item" }) })] }) })] }));
+        await user.click(screen.getByRole("button", { name: "Open menu" }));
+        const subTrigger = screen.getByRole("menuitem", { name: "More" });
+        subTrigger.focus();
+        await user.keyboard("{ArrowRight}");
+        const subItem = await screen.findByRole("menuitem", {
+            name: "Sub item"
+        });
+        await user.click(subItem);
+        expect(onSubSelect).toHaveBeenCalledTimes(1);
+        await waitFor(() => {
+            expect(screen.queryAllByRole("menu")).toHaveLength(0);
+        });
+    });
+});

package/build/components/menu/menu.types.d.ts

@@ -0,0 +1,213 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { FlipOptions, InlineOptions, Placement, ShiftOptions } from "@floating-ui/react";
+import { TransitionProps } from "../transition";
+import { RefraktorRadius } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
+import { MenuTrigger } from "./menu-trigger";
+import { MenuDropdown } from "./menu-dropdown";
+import { MenuItem } from "./menu-item";
+import { MenuLabel } from "./menu-label";
+import { MenuSeparator } from "./menu-separator";
+import { MenuSub } from "./menu-sub";
+import { MenuSubTrigger } from "./menu-sub-trigger";
+import { MenuSubDropdown } from "./menu-sub-dropdown";
+export type MenuClassNames = {
+    root?: string;
+    trigger?: string;
+    dropdown?: string;
+    item?: string;
+    label?: string;
+    separator?: string;
+    subTrigger?: string;
+    subDropdown?: string;
+    itemLeftSection?: string;
+    itemRightSection?: string;
+    subIndicator?: string;
+};
+export type MenuPositioning = {
+    /** The placement of the menu relative to the trigger element @default `bottom-start` */
+    placement?: Placement;
+    /** Offset distance from the trigger element in pixels @default `4` */
+    offset?: number;
+};
+export type MenuMiddlewares = {
+    shift?: boolean | ShiftOptions;
+    flip?: boolean | FlipOptions;
+    inline?: boolean | InlineOptions;
+};
+export type MenuTriggerType = "click" | "hover" | "focus";
+export interface MenuProps extends ComponentPropsWithoutRef<"div"> {
+    /** Children containing subcomponents */
+    children: ReactNode;
+    /** State of the menu (controlled) */
+    opened?: boolean;
+    /** Initial state of the menu (uncontrolled) */
+    defaultOpened?: boolean;
+    /** Callback called when the menu state changes */
+    onOpenedChange?: (opened: boolean) => void;
+    /** Positioning settings for the menu */
+    positioning?: MenuPositioning;
+    /** Middlewares settings for the menu */
+    middlewares?: MenuMiddlewares;
+    /** Whether the menu is disabled @default `false` */
+    disabled?: boolean;
+    /** Trigger type for the menu @default `click` */
+    trigger?: MenuTriggerType;
+    /** Delay in milliseconds before the menu opens @default `0` */
+    openDelay?: number;
+    /** Delay in milliseconds before the menu closes @default `100` */
+    closeDelay?: number;
+    /** Transition props for the menu dropdown, uses Transition component internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    /** Radius for menu dropdowns @default `default` */
+    radius?: RefraktorRadius;
+    /** Whether to render dropdowns within a portal @default `true` */
+    withinPortal?: boolean;
+    /** Whether to close on click outside @default `true` */
+    closeOnClickOutside?: boolean;
+    /** Whether to close on escape key @default `true` */
+    closeOnEscape?: boolean;
+    /** Whether to close the whole menu tree after selecting an item @default `true` */
+    closeOnItemClick?: boolean;
+    /** Used for editing root class name */
+    className?: string;
+    /** Used for styling different parts of the component */
+    classNames?: MenuClassNames;
+}
+export interface MenuTriggerProps extends ComponentPropsWithoutRef<"div"> {
+    /** The trigger element */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface MenuDropdownProps extends ComponentPropsWithoutRef<"div"> {
+    /** Content to display inside the dropdown */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface MenuItemProps extends Omit<ComponentPropsWithoutRef<"button">, "onSelect"> {
+    /** Content of the item */
+    children: ReactNode;
+    /** Callback called when an item is selected */
+    onSelect?: () => void;
+    /** Whether the item is disabled @default `false` */
+    disabled?: boolean;
+    /** Whether this item should close menus when selected, defaults to Menu closeOnItemClick */
+    closeOnSelect?: boolean;
+    /** Optional typeahead value if children is non-text */
+    textValue?: string;
+    /** Optional left section for icons or markers */
+    leftSection?: ReactNode;
+    /** Optional right section for hints or shortcuts */
+    rightSection?: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface MenuLabelProps extends ComponentPropsWithoutRef<"div"> {
+    /** Label content */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface MenuSeparatorProps extends ComponentPropsWithoutRef<"div"> {
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface MenuSubProps extends ComponentPropsWithoutRef<"div"> {
+    /** Children containing submenu trigger and submenu dropdown */
+    children: ReactNode;
+    /** State of the submenu (controlled) */
+    opened?: boolean;
+    /** Initial state of the submenu (uncontrolled) */
+    defaultOpened?: boolean;
+    /** Callback called when the submenu state changes */
+    onOpenedChange?: (opened: boolean) => void;
+    /** Positioning settings for the submenu */
+    positioning?: MenuPositioning;
+    /** Middlewares settings for the submenu */
+    middlewares?: MenuMiddlewares;
+    /** Whether the submenu is disabled @default `false` */
+    disabled?: boolean;
+    /** Trigger type for the submenu @default `hover` */
+    trigger?: MenuTriggerType;
+    /** Delay in milliseconds before the submenu opens @default `75` */
+    openDelay?: number;
+    /** Delay in milliseconds before the submenu closes @default `125` */
+    closeDelay?: number;
+    /** Whether to close submenu on click outside @default `false` */
+    closeOnClickOutside?: boolean;
+    /** Whether to close submenu on escape @default `true` */
+    closeOnEscape?: boolean;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface MenuSubTriggerProps extends Omit<ComponentPropsWithoutRef<"button">, "onSelect"> {
+    /** Content of the submenu trigger */
+    children: ReactNode;
+    /** Optional typeahead value if children is non-text */
+    textValue?: string;
+    /** Whether the submenu trigger is disabled @default `false` */
+    disabled?: boolean;
+    /** Optional left section for icons or markers */
+    leftSection?: ReactNode;
+    /** Optional right section for hints or shortcuts */
+    rightSection?: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface MenuSubDropdownProps extends ComponentPropsWithoutRef<"div"> {
+    /** Content to display inside the submenu dropdown */
+    children: ReactNode;
+    /** Used for editing root class name */
+    className?: string;
+}
+export interface MenuFactoryPayload extends FactoryPayload {
+    props: MenuProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<MenuProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<MenuClassNames>>;
+        Trigger: typeof MenuTrigger;
+        Dropdown: typeof MenuDropdown;
+        Item: typeof MenuItem;
+        Label: typeof MenuLabel;
+        Separator: typeof MenuSeparator;
+        Sub: typeof MenuSub;
+        SubTrigger: typeof MenuSubTrigger;
+        SubDropdown: typeof MenuSubDropdown;
+    };
+}
+export interface MenuTriggerFactoryPayload extends FactoryPayload {
+    props: MenuTriggerProps;
+    ref: HTMLDivElement;
+}
+export interface MenuDropdownFactoryPayload extends FactoryPayload {
+    props: MenuDropdownProps;
+    ref: HTMLDivElement;
+}
+export interface MenuItemFactoryPayload extends FactoryPayload {
+    props: MenuItemProps;
+    ref: HTMLButtonElement;
+}
+export interface MenuLabelFactoryPayload extends FactoryPayload {
+    props: MenuLabelProps;
+    ref: HTMLDivElement;
+}
+export interface MenuSeparatorFactoryPayload extends FactoryPayload {
+    props: MenuSeparatorProps;
+    ref: HTMLDivElement;
+}
+export interface MenuSubFactoryPayload extends FactoryPayload {
+    props: MenuSubProps;
+    ref: HTMLDivElement;
+}
+export interface MenuSubTriggerFactoryPayload extends FactoryPayload {
+    props: MenuSubTriggerProps;
+    ref: HTMLButtonElement;
+}
+export interface MenuSubDropdownFactoryPayload extends FactoryPayload {
+    props: MenuSubDropdownProps;
+    ref: HTMLDivElement;
+}
+//# sourceMappingURL=menu.types.d.ts.map

package/build/components/menu/menu.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.types.ts"],"names":[],"mappings":"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"}

package/build/components/menu/menu.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/menu/use-menu.d.ts

@@ -0,0 +1,35 @@
+import { FloatingContext, Placement } from "@floating-ui/react";
+import { MenuMiddlewares, MenuPositioning, MenuTriggerType } from "./menu.types";
+interface UseMenuProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    positioning?: MenuPositioning;
+    middlewares?: MenuMiddlewares;
+    disabled?: boolean;
+    trigger?: MenuTriggerType;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    openDelay?: number;
+    closeDelay?: number;
+}
+export interface UseMenuReturn {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    context: FloatingContext;
+    refs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+        reference: React.MutableRefObject<HTMLElement | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+    };
+    floatingStyles: React.CSSProperties;
+    getReferenceProps: (userProps?: React.HTMLAttributes<HTMLElement>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLAttributes<HTMLElement>) => Record<string, unknown>;
+    placement: Placement;
+}
+export declare function useMenu(options?: UseMenuProps): UseMenuReturn;
+export {};
+//# sourceMappingURL=use-menu.d.ts.map

package/build/components/menu/use-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/use-menu.ts"],"names":[],"mappings":"AACA,OAAO,EAGH,eAAe,EAIf,SAAS,EAUZ,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACH,eAAe,EACf,eAAe,EACf,eAAe,EAClB,MAAM,cAAc,CAAC;AAEtB,UAAU,YAAY;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE;QACF,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QACjD,WAAW,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;QAChD,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;QACtD,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;KACxD,CAAC;IACF,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,EAAE,CACf,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CACd,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAC5C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,SAAS,EAAE,SAAS,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,OAAO,GAAE,YAAiB,GAAG,aAAa,CA4IjE"}