@refraktor/core 0.0.1

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

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { findFocusedMenuItemIndex, findTypeaheadMatch, focusMenuItem, getNavigableMenuItems, useMenuLevelContext, useMenuRootContext } from "../menu.context";
+import { Transition } from "../../transition";
+import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
+const MenuDropdown = factory(({ children, className, style, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { radius, withinPortal, transitionProps, getStyles } = useMenuRootContext();
+    const level = useMenuLevelContext();
+    const typeaheadRef = useRef("");
+    const typeaheadTimeoutRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (typeaheadTimeoutRef.current !== null) {
+                window.clearTimeout(typeaheadTimeoutRef.current);
+            }
+        };
+    }, []);
+    const clearTypeahead = () => {
+        typeaheadRef.current = "";
+        if (typeaheadTimeoutRef.current !== null) {
+            window.clearTimeout(typeaheadTimeoutRef.current);
+            typeaheadTimeoutRef.current = null;
+        }
+    };
+    const handleKeyDown = (event) => {
+        const items = getNavigableMenuItems(level.getItems());
+        const focusedIndex = findFocusedMenuItemIndex(items);
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            if (!items.length) {
+                return;
+            }
+            const nextIndex = focusedIndex >= 0 ? (focusedIndex + 1) % items.length : 0;
+            focusMenuItem(items[nextIndex]);
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            if (!items.length) {
+                return;
+            }
+            const nextIndex = focusedIndex >= 0
+                ? (focusedIndex - 1 + items.length) % items.length
+                : items.length - 1;
+            focusMenuItem(items[nextIndex]);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            focusMenuItem(items[0]);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            focusMenuItem(items[items.length - 1]);
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            if (focusedIndex < 0) {
+                return;
+            }
+            const activeItem = items[focusedIndex];
+            if (activeItem.hasSubmenu && activeItem.openSubmenu) {
+                event.preventDefault();
+                activeItem.openSubmenu(true);
+            }
+            return;
+        }
+        if (event.key === "ArrowLeft" && level.isSubmenu) {
+            event.preventDefault();
+            level.closeMenu();
+            level.menu.refs.reference.current?.focus();
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            if (level.isSubmenu) {
+                level.closeMenu();
+                level.menu.refs.reference.current?.focus();
+            }
+            else {
+                level.closeAllMenus();
+                level.menu.refs.reference.current?.focus();
+            }
+            return;
+        }
+        if (event.key === "Tab") {
+            level.closeAllMenus();
+            return;
+        }
+        if (event.key.length === 1 &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey) {
+            const search = `${typeaheadRef.current}${event.key.toLowerCase()}`;
+            typeaheadRef.current = search;
+            if (typeaheadTimeoutRef.current !== null) {
+                window.clearTimeout(typeaheadTimeoutRef.current);
+            }
+            typeaheadTimeoutRef.current = window.setTimeout(() => {
+                clearTypeahead();
+            }, 400);
+            const matchedIndex = findTypeaheadMatch(items, search, focusedIndex);
+            if (matchedIndex !== -1) {
+                event.preventDefault();
+                focusMenuItem(items[matchedIndex]);
+            }
+        }
+    };
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: level.menu.opened, ...transitionProps, children: _jsx("div", { ref: useMergeRefs([ref, level.menu.refs.setFloating]), role: "menu", tabIndex: -1, style: {
+                ...level.menu.floatingStyles,
+                scrollbarGutter: "auto",
+                ...style
+            }, className: cx("z-50 min-w-32 max-h-80 overflow-y-auto refraktor-scrollbar", "p-1 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md border border-[var(--refraktor-border)]", getRadius(radius), getStyles("dropdown"), className), ...level.menu.getFloatingProps({
+                onKeyDown: handleKeyDown
+            }), ...props, children: children }) }));
+    const wrappedContent = level.menu.opened ? (_jsx(FloatingFocusManager, { context: level.menu.context, modal: false, initialFocus: -1, children: dropdownContent })) : (dropdownContent);
+    return withinPortal ? (_jsx(FloatingPortal, { children: wrappedContent })) : (wrappedContent);
+});
+MenuDropdown.displayName = "@refraktor/core/Menu.Dropdown";
+export default MenuDropdown;

package/build/components/menu/menu-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuItem } from "./menu-item";
+//# sourceMappingURL=index.d.ts.map

package/build/components/menu/menu-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/build/components/menu/menu-item/index.js

@@ -0,0 +1 @@
+export { default as MenuItem } from "./menu-item";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-item/menu-item.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAOvD,QAAA,MAAM,QAAQ,+DA8Gb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { getNodeTextValue, useMenuLevelContext, useMenuRootContext } from "../menu.context";
+const MenuItem = factory(({ id, children, className, onSelect, onClick, onMouseMove, disabled, closeOnSelect, textValue, leftSection, rightSection, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { closeOnItemClick, getStyles } = useMenuRootContext();
+    const level = useMenuLevelContext();
+    const _id = useId(id);
+    const itemRef = useRef(null);
+    const resolvedTextValue = getNodeTextValue(children, textValue);
+    useEffect(() => {
+        return level.registerItem({
+            id: _id,
+            ref: itemRef,
+            disabled: !!disabled,
+            textValue: resolvedTextValue
+        });
+    }, [level, _id, disabled, resolvedTextValue]);
+    return (_jsxs("button", { ref: (node) => {
+            itemRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled, "aria-disabled": disabled, className: cx("w-full text-left px-2 py-1.5 text-sm rounded-sm", "inline-flex items-center gap-2 outline-none transition-colors", "hover:bg-[var(--refraktor-bg-hover)] focus-visible:bg-[var(--refraktor-bg-hover)]", "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed", getStyles("item"), className), onMouseMove: (event) => {
+            onMouseMove?.(event);
+            if (!disabled && document.activeElement !== event.currentTarget) {
+                event.currentTarget.focus();
+            }
+        }, onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || disabled) {
+                return;
+            }
+            onSelect?.();
+            const shouldClose = closeOnSelect ?? closeOnItemClick;
+            if (shouldClose) {
+                level.closeAllMenus();
+            }
+        }, ...props, children: [leftSection && (_jsx("span", { className: cx("inline-flex items-center shrink-0", getStyles("itemLeftSection")), children: leftSection })), _jsx("span", { className: "flex-1", children: children }), rightSection && (_jsx("span", { className: cx("inline-flex items-center shrink-0 text-[var(--refraktor-text-secondary)]", getStyles("itemRightSection")), children: rightSection }))] }));
+});
+MenuItem.displayName = "@refraktor/core/Menu.Item";
+export default MenuItem;

package/build/components/menu/menu-label/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuLabel } from "./menu-label";
+//# sourceMappingURL=index.d.ts.map

package/build/components/menu/menu-label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/build/components/menu/menu-label/index.js

@@ -0,0 +1 @@
+export { default as MenuLabel } from "./menu-label";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-label.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-label/menu-label.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAGxD,QAAA,MAAM,SAAS,gEAoBd,CAAC;AAIF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useMenuRootContext } from "../menu.context";
+const MenuLabel = factory(({ children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { getStyles } = useMenuRootContext();
+    return (_jsx("div", { ref: ref, role: "presentation", className: cx("px-2 py-1 text-xs font-medium text-[var(--refraktor-text-secondary)]", getStyles("label"), className), ...props, children: children }));
+});
+MenuLabel.displayName = "@refraktor/core/Menu.Label";
+export default MenuLabel;

package/build/components/menu/menu-separator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuSeparator } from "./menu-separator";
+//# sourceMappingURL=index.d.ts.map

package/build/components/menu/menu-separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-separator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/build/components/menu/menu-separator/index.js

@@ -0,0 +1 @@
+export { default as MenuSeparator } from "./menu-separator";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-separator.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-separator/menu-separator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAG5D,QAAA,MAAM,aAAa,oEAkBlB,CAAC;AAIF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { useMenuRootContext } from "../menu.context";
+const MenuSeparator = factory(({ className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { getStyles } = useMenuRootContext();
+    return (_jsx("div", { ref: ref, role: "separator", className: cx("my-1 h-px bg-[var(--refraktor-border)]", getStyles("separator"), className), ...props }));
+});
+MenuSeparator.displayName = "@refraktor/core/Menu.Separator";
+export default MenuSeparator;

package/build/components/menu/menu-sub/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuSub } from "./menu-sub";
+//# sourceMappingURL=index.d.ts.map

package/build/components/menu/menu-sub/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-sub/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/build/components/menu/menu-sub/index.js

@@ -0,0 +1 @@
+export { default as MenuSub } from "./menu-sub";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-sub.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-sub/menu-sub.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAgB,MAAM,eAAe,CAAC;AAwBpE,QAAA,MAAM,OAAO,8DAqFX,CAAC;AAIH,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useTheme } from "../../../theme";
+import { factory, useProps } from "../../../utils";
+import { focusMenuItem, getNavigableMenuItems, MenuSubProvider, useMenuItemsRegistry, useMenuLevelContext } from "../menu.context";
+import { useMenu } from "../use-menu";
+const defaultProps = {
+    positioning: {
+        placement: "right-start",
+        offset: 4
+    },
+    middlewares: { flip: true, shift: true },
+    trigger: "hover",
+    openDelay: 75,
+    closeDelay: 125,
+    closeOnClickOutside: false,
+    closeOnEscape: true,
+    disabled: false
+};
+const MenuSub = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { children, opened, defaultOpened, onOpenedChange, positioning, middlewares, disabled, trigger, openDelay, closeDelay, closeOnClickOutside, closeOnEscape, className, ...props } = useProps("MenuSub", defaultProps, _props);
+    const parentLevel = useMenuLevelContext();
+    const submenu = useMenu({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        trigger,
+        openDelay,
+        closeDelay,
+        closeOnClickOutside,
+        closeOnEscape
+    });
+    const registry = useMenuItemsRegistry();
+    const submenuLevel = {
+        menu: submenu,
+        isSubmenu: true,
+        registerItem: registry.registerItem,
+        getItems: registry.getItems,
+        closeMenu: submenu.close,
+        closeAllMenus: () => {
+            submenu.close();
+            parentLevel.closeAllMenus();
+        }
+    };
+    const openSubmenu = useCallback((focusFirstItem) => {
+        if (disabled) {
+            return;
+        }
+        submenu.open();
+        if (focusFirstItem) {
+            requestAnimationFrame(() => {
+                const items = getNavigableMenuItems(submenuLevel.getItems());
+                focusMenuItem(items[0]);
+            });
+        }
+    }, [disabled, submenu, submenuLevel]);
+    const closeSubmenu = useCallback(() => {
+        submenu.close();
+    }, [submenu]);
+    return (_jsx(MenuSubProvider, { value: {
+            submenuLevel,
+            parentLevel,
+            disabled: !!disabled,
+            openSubmenu,
+            closeSubmenu
+        }, children: _jsx("div", { ref: ref, className: cx(className), ...props, children: children }) }));
+});
+MenuSub.displayName = "@refraktor/core/Menu.Sub";
+export default MenuSub;

package/build/components/menu/menu-sub-dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuSubDropdown } from "./menu-sub-dropdown";
+//# sourceMappingURL=index.d.ts.map

package/build/components/menu/menu-sub-dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-sub-dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC"}

package/build/components/menu/menu-sub-dropdown/index.js

@@ -0,0 +1 @@
+export { default as MenuSubDropdown } from "./menu-sub-dropdown";

package/build/components/menu/menu-sub-dropdown/menu-sub-dropdown.d.ts

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

package/build/components/menu/menu-sub-dropdown/menu-sub-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-sub-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-sub-dropdown/menu-sub-dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,6BAA6B,EAAE,MAAM,eAAe,CAAC;AAiB9D,QAAA,MAAM,eAAe,sEAkMpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/build/components/menu/menu-sub-dropdown/menu-sub-dropdown.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { findFocusedMenuItemIndex, findTypeaheadMatch, focusMenuItem, getNavigableMenuItems, MenuLevelProvider, useMenuRootContext, useMenuSubContext } from "../menu.context";
+import { Transition } from "../../transition";
+import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
+const MenuSubDropdown = factory(({ children, className, style, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { radius, withinPortal, transitionProps, getStyles } = useMenuRootContext();
+    const { submenuLevel } = useMenuSubContext();
+    const typeaheadRef = useRef("");
+    const typeaheadTimeoutRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (typeaheadTimeoutRef.current !== null) {
+                window.clearTimeout(typeaheadTimeoutRef.current);
+            }
+        };
+    }, []);
+    const clearTypeahead = () => {
+        typeaheadRef.current = "";
+        if (typeaheadTimeoutRef.current !== null) {
+            window.clearTimeout(typeaheadTimeoutRef.current);
+            typeaheadTimeoutRef.current = null;
+        }
+    };
+    const handleKeyDown = (event) => {
+        const items = getNavigableMenuItems(submenuLevel.getItems());
+        const focusedIndex = findFocusedMenuItemIndex(items);
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            if (!items.length) {
+                return;
+            }
+            const nextIndex = focusedIndex >= 0 ? (focusedIndex + 1) % items.length : 0;
+            focusMenuItem(items[nextIndex]);
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            if (!items.length) {
+                return;
+            }
+            const nextIndex = focusedIndex >= 0
+                ? (focusedIndex - 1 + items.length) % items.length
+                : items.length - 1;
+            focusMenuItem(items[nextIndex]);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            focusMenuItem(items[0]);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            focusMenuItem(items[items.length - 1]);
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            if (focusedIndex < 0) {
+                return;
+            }
+            const activeItem = items[focusedIndex];
+            if (activeItem.hasSubmenu && activeItem.openSubmenu) {
+                event.preventDefault();
+                activeItem.openSubmenu(true);
+            }
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            submenuLevel.closeMenu();
+            submenuLevel.menu.refs.reference.current?.focus();
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            submenuLevel.closeMenu();
+            submenuLevel.menu.refs.reference.current?.focus();
+            return;
+        }
+        if (event.key === "Tab") {
+            submenuLevel.closeAllMenus();
+            return;
+        }
+        if (event.key.length === 1 &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey) {
+            const search = `${typeaheadRef.current}${event.key.toLowerCase()}`;
+            typeaheadRef.current = search;
+            if (typeaheadTimeoutRef.current !== null) {
+                window.clearTimeout(typeaheadTimeoutRef.current);
+            }
+            typeaheadTimeoutRef.current = window.setTimeout(() => {
+                clearTypeahead();
+            }, 400);
+            const matchedIndex = findTypeaheadMatch(items, search, focusedIndex);
+            if (matchedIndex !== -1) {
+                event.preventDefault();
+                focusMenuItem(items[matchedIndex]);
+            }
+        }
+    };
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: submenuLevel.menu.opened, ...transitionProps, children: _jsx(MenuLevelProvider, { value: submenuLevel, children: _jsx("div", { ref: useMergeRefs([
+                    ref,
+                    submenuLevel.menu.refs.setFloating
+                ]), role: "menu", tabIndex: -1, style: {
+                    ...submenuLevel.menu.floatingStyles,
+                    scrollbarGutter: "auto",
+                    ...style
+                }, className: cx("z-50 min-w-32 max-h-80 overflow-y-auto refraktor-scrollbar", "p-1 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md border border-[var(--refraktor-border)]", getRadius(radius), getStyles("dropdown"), getStyles("subDropdown"), className), ...submenuLevel.menu.getFloatingProps({
+                    onKeyDown: handleKeyDown
+                }), ...props, children: children }) }) }));
+    const wrappedContent = submenuLevel.menu.opened ? (_jsx(FloatingFocusManager, { context: submenuLevel.menu.context, modal: false, initialFocus: -1, children: dropdownContent })) : (dropdownContent);
+    return withinPortal ? (_jsx(FloatingPortal, { children: wrappedContent })) : (wrappedContent);
+});
+MenuSubDropdown.displayName = "@refraktor/core/Menu.SubDropdown";
+export default MenuSubDropdown;

package/build/components/menu/menu-sub-trigger/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuSubTrigger } from "./menu-sub-trigger";
+//# sourceMappingURL=index.d.ts.map

package/build/components/menu/menu-sub-trigger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-sub-trigger/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

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

@@ -0,0 +1 @@
+export { default as MenuSubTrigger } from "./menu-sub-trigger";

package/build/components/menu/menu-sub-trigger/menu-sub-trigger.d.ts

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

package/build/components/menu/menu-sub-trigger/menu-sub-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-sub-trigger.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-sub-trigger/menu-sub-trigger.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,4BAA4B,EAAE,MAAM,eAAe,CAAC;AAO7D,QAAA,MAAM,cAAc,qEAmJnB,CAAC;AAIF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { ChevronIcon } from "../../../icons";
+import { getNodeTextValue, useMenuRootContext, useMenuSubContext } from "../menu.context";
+const MenuSubTrigger = factory(({ id, children, className, disabled, textValue, leftSection, rightSection, onClick, onMouseMove, onKeyDown, ...props }, ref) => {
+    const { cx } = useTheme();
+    const { getStyles } = useMenuRootContext();
+    const { submenuLevel, parentLevel, disabled: parentDisabled, openSubmenu } = useMenuSubContext();
+    const isDisabled = !!disabled || parentDisabled;
+    const _id = useId(id);
+    const itemRef = useRef(null);
+    const resolvedTextValue = getNodeTextValue(children, textValue);
+    useEffect(() => {
+        return parentLevel.registerItem({
+            id: _id,
+            ref: itemRef,
+            disabled: isDisabled,
+            textValue: resolvedTextValue,
+            hasSubmenu: true,
+            openSubmenu: (focusFirstItem) => {
+                openSubmenu(focusFirstItem);
+            }
+        });
+    }, [parentLevel, _id, isDisabled, resolvedTextValue, openSubmenu]);
+    return (_jsxs("button", { ref: (node) => {
+            itemRef.current = node;
+            submenuLevel.menu.refs.setReference(node);
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, type: "button", role: "menuitem", tabIndex: -1, disabled: isDisabled, "data-disabled": isDisabled, "data-opened": submenuLevel.menu.opened, "aria-disabled": isDisabled, "aria-haspopup": "menu", "aria-expanded": submenuLevel.menu.opened, className: cx("w-full text-left px-2 py-1.5 text-sm rounded-sm", "inline-flex items-center gap-2 outline-none transition-colors", "hover:bg-[var(--refraktor-bg-hover)] focus-visible:bg-[var(--refraktor-bg-hover)]", "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed", getStyles("item"), getStyles("subTrigger"), className), ...submenuLevel.menu.getReferenceProps({
+            onMouseMove: (event) => {
+                onMouseMove?.(event);
+                if (isDisabled) {
+                    return;
+                }
+                if (document.activeElement !== event.currentTarget) {
+                    event.currentTarget.focus();
+                }
+                openSubmenu(false);
+            },
+            onClick: (event) => {
+                onClick?.(event);
+                if (event.defaultPrevented || isDisabled) {
+                    return;
+                }
+                submenuLevel.menu.toggle();
+            },
+            onKeyDown: (event) => {
+                onKeyDown?.(event);
+                if (event.defaultPrevented || isDisabled) {
+                    return;
+                }
+                if (event.key === "ArrowRight" ||
+                    event.key === "Enter" ||
+                    event.key === " ") {
+                    event.preventDefault();
+                    openSubmenu(true);
+                }
+            }
+        }), ...props, children: [leftSection && (_jsx("span", { className: cx("inline-flex items-center shrink-0", getStyles("itemLeftSection")), children: leftSection })), _jsx("span", { className: "flex-1", children: children }), rightSection && (_jsx("span", { className: cx("inline-flex items-center shrink-0 text-[var(--refraktor-text-secondary)]", getStyles("itemRightSection")), children: rightSection })), _jsx("span", { className: cx("inline-flex items-center shrink-0 text-[var(--refraktor-text-secondary)]", getStyles("subIndicator")), children: _jsx(ChevronIcon, { direction: "right", size: 14 }) })] }));
+});
+MenuSubTrigger.displayName = "@refraktor/core/Menu.SubTrigger";
+export default MenuSubTrigger;

package/build/components/menu/menu-trigger/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuTrigger } from "./menu-trigger";
+//# sourceMappingURL=index.d.ts.map

package/build/components/menu/menu-trigger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-trigger/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1 @@
+export { default as MenuTrigger } from "./menu-trigger";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-trigger.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu-trigger/menu-trigger.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAQ1D,QAAA,MAAM,WAAW,kEAkFhB,CAAC;AAIF,eAAe,WAAW,CAAC"}