@arolariu/components 0.4.2 → 1.0.0

package/dist/components/ui/dropdrawer.js

@@ -1,32 +1,266 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+import { Menu } from "@base-ui/react/menu";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useIsMobile } from "../../hooks/useIsMobile.js";
 import { cn } from "../../lib/utilities.js";
-const DropDrawerContext = /*#__PURE__*/ createContext({
-    isMobile: false
-});
+import dropdrawer_module from "./dropdrawer.module.js";
+const MOBILE_MENU_TITLE = "Menu";
+const MOBILE_SUBMENU_TITLE = "Submenu";
+const MOBILE_BACK_LABEL = "Go back";
+const DropDrawerContext = /*#__PURE__*/ createContext(null);
 const useDropDrawerContext = ()=>{
     const context = useContext(DropDrawerContext);
-    if (!context) throw new Error("DropDrawer components cannot be rendered outside the Context");
+    if (null === context) throw new Error("DropDrawer components cannot be rendered outside the Context");
     return context;
 };
+const dropdrawer_Drawer = Drawer.Root;
+const DrawerPortal = Drawer.Portal;
+function DrawerTrigger(props) {
+    const { asChild = false, children, className, render, ...otherProps } = props;
+    const renderProp = asChild && /*#__PURE__*/ isValidElement(children) ? children : render;
+    return /*#__PURE__*/ jsx(Drawer.Trigger, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "button",
+            render: renderProp,
+            props: mergeProps({
+                className
+            }, {})
+        }),
+        children: renderProp ? void 0 : children
+    });
+}
+function DrawerOverlay(props) {
+    const { className, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Drawer.Backdrop, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "div",
+            render: render,
+            props: mergeProps({
+                className: cn(dropdrawer_module.drawerOverlay, className)
+            }, {})
+        })
+    });
+}
+function DrawerContent(props) {
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsxs(DrawerPortal, {
+        children: [
+            /*#__PURE__*/ jsx(DrawerOverlay, {}),
+            /*#__PURE__*/ jsx(Drawer.Viewport, {
+                className: dropdrawer_module.drawerViewport,
+                children: /*#__PURE__*/ jsxs(Drawer.Popup, {
+                    ...otherProps,
+                    render: useRender({
+                        defaultTagName: "div",
+                        render: render,
+                        props: mergeProps({
+                            className: cn(dropdrawer_module.drawerContent, className)
+                        }, {})
+                    }),
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: dropdrawer_module.drawerHandle
+                        }),
+                        /*#__PURE__*/ jsx(Drawer.Content, {
+                            className: dropdrawer_module.drawerInnerContent,
+                            children: children
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function DrawerHeader(props) {
+    const { className, children, render, ...otherProps } = props;
+    return useRender({
+        defaultTagName: "div",
+        render: render,
+        props: mergeProps({
+            className: cn(dropdrawer_module.drawerHeader, className)
+        }, otherProps, {
+            children
+        })
+    });
+}
+function DrawerFooter(props) {
+    const { className, children, render, ...otherProps } = props;
+    return useRender({
+        defaultTagName: "div",
+        render: render,
+        props: mergeProps({
+            className: cn(dropdrawer_module.drawerFooter, className)
+        }, otherProps, {
+            children
+        })
+    });
+}
+function DrawerTitle(props) {
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Drawer.Title, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "h2",
+            render: render,
+            props: mergeProps({
+                className: cn(dropdrawer_module.drawerTitle, className)
+            }, {})
+        }),
+        children: children
+    });
+}
+const DropdownMenu = Menu.Root;
+const DropdownMenuSub = Menu.SubmenuRoot;
+function DropdownMenuTrigger(props) {
+    const { asChild = false, children, className, render, ...otherProps } = props;
+    const renderProp = asChild && /*#__PURE__*/ isValidElement(children) ? children : render;
+    return /*#__PURE__*/ jsx(Menu.Trigger, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "button",
+            render: renderProp,
+            props: mergeProps({
+                className
+            }, {})
+        }),
+        children: renderProp ? void 0 : children
+    });
+}
+function DropdownMenuContent(props) {
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Menu.Portal, {
+        children: /*#__PURE__*/ jsx(Menu.Positioner, {
+            ...otherProps,
+            render: useRender({
+                defaultTagName: "div",
+                props: mergeProps({
+                    className: dropdrawer_module.dropdownPositioner
+                }, {})
+            }),
+            children: /*#__PURE__*/ jsx(Menu.Popup, {
+                render: useRender({
+                    defaultTagName: "div",
+                    render: render,
+                    props: mergeProps({
+                        className: cn(dropdrawer_module.dropdownContent, className)
+                    }, {})
+                }),
+                children: children
+            })
+        })
+    });
+}
+function DropdownMenuItem(props) {
+    const { asChild = false, children, className, inset = false, render, ...otherProps } = props;
+    const renderProp = asChild && /*#__PURE__*/ isValidElement(children) ? children : render;
+    return /*#__PURE__*/ jsx(Menu.Item, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "div",
+            render: renderProp,
+            props: mergeProps({
+                className: cn(dropdrawer_module.desktopItem, inset && dropdrawer_module.inset, className)
+            }, {})
+        }),
+        children: renderProp ? void 0 : children
+    });
+}
+function DropdownMenuLabel(props) {
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Menu.GroupLabel, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "div",
+            render: render,
+            props: mergeProps({
+                className: cn(dropdrawer_module.desktopLabel, className)
+            }, {})
+        }),
+        children: children
+    });
+}
+function DropdownMenuSeparator(props) {
+    const { className, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Menu.Separator, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "div",
+            render: render,
+            props: mergeProps({
+                className: cn(dropdrawer_module.desktopSeparator, className)
+            }, {})
+        })
+    });
+}
+function DropdownMenuSubTrigger(props) {
+    const { className, children, inset = false, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsxs(Menu.SubmenuTrigger, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "div",
+            render: render,
+            props: mergeProps({
+                className: cn(dropdrawer_module.desktopSubTrigger, inset && dropdrawer_module.inset, className)
+            }, {})
+        }),
+        children: [
+            children,
+            /*#__PURE__*/ jsx(ChevronRightIcon, {
+                className: dropdrawer_module.chevron
+            })
+        ]
+    });
+}
+function DropdownMenuSubContent(props) {
+    const { className, children, render, ...otherProps } = props;
+    return /*#__PURE__*/ jsx(Menu.Positioner, {
+        ...otherProps,
+        render: useRender({
+            defaultTagName: "div",
+            props: mergeProps({
+                className: dropdrawer_module.dropdownPositioner
+            }, {})
+        }),
+        children: /*#__PURE__*/ jsx(Menu.Popup, {
+            render: useRender({
+                defaultTagName: "div",
+                render: render,
+                props: mergeProps({
+                    className: cn(dropdrawer_module.dropdownSubContent, className)
+                }, {})
+            }),
+            children: children
+        })
+    });
+}
+const SubmenuContext = /*#__PURE__*/ createContext({
+    activeSubmenu: null,
+    navigateToSubmenu: void 0,
+    registerSubmenuContent: void 0,
+    setActiveSubmenu: ()=>void 0,
+    setSubmenuTitle: ()=>void 0,
+    submenuTitle: null
+});
 function DropDrawer({ children, ...props }) {
     const isMobile = useIsMobile();
-    const DropdownComponent = isMobile ? Drawer : DropdownMenu;
     return /*#__PURE__*/ jsx(DropDrawerContext.Provider, {
         value: {
             isMobile
         },
-        children: /*#__PURE__*/ jsx(DropdownComponent, {
+        children: isMobile ? /*#__PURE__*/ jsx(dropdrawer_Drawer, {
+            "data-slot": "drop-drawer",
+            ...props,
+            children: children
+        }) : /*#__PURE__*/ jsx(DropdownMenu, {
             "data-slot": "drop-drawer",
-            ...isMobile && {
-                autoFocus: true
-            },
             ...props,
             children: children
         })
@@ -34,8 +268,12 @@ function DropDrawer({ children, ...props }) {
 }
 function DropDrawerTrigger({ className, children, ...props }) {
     const { isMobile } = useDropDrawerContext();
-    const TriggerComponent = isMobile ? DrawerTrigger : DropdownMenuTrigger;
-    return /*#__PURE__*/ jsx(TriggerComponent, {
+    return isMobile ? /*#__PURE__*/ jsx(DrawerTrigger, {
+        "data-slot": "drop-drawer-trigger",
+        className: className,
+        ...props,
+        children: children
+    }) : /*#__PURE__*/ jsx(DropdownMenuTrigger, {
         "data-slot": "drop-drawer-trigger",
         className: className,
         ...props,
@@ -49,12 +287,17 @@ function DropDrawerContent({ className, children, ...props }) {
     const [submenuStack, setSubmenuStack] = useState([]);
     const [animationDirection, setAnimationDirection] = useState("forward");
     const submenuContentRef = useRef(new Map());
+    useEffect(()=>{
+        submenuContentRef.current.clear();
+    }, [
+        children
+    ]);
     const navigateToSubmenu = useCallback((id, title)=>{
         setAnimationDirection("forward");
         setActiveSubmenu(id);
         setSubmenuTitle(title);
-        setSubmenuStack((prev)=>[
-                ...prev,
+        setSubmenuStack((previousStack)=>[
+                ...previousStack,
                 {
                     id,
                     title
@@ -67,16 +310,22 @@ function DropDrawerContent({ className, children, ...props }) {
             setActiveSubmenu(null);
             setSubmenuTitle(null);
             setSubmenuStack([]);
-        } else {
-            const newStack = [
-                ...submenuStack
-            ];
-            newStack.pop();
-            const previous = newStack[newStack.length - 1];
-            setActiveSubmenu(previous.id);
-            setSubmenuTitle(previous.title);
-            setSubmenuStack(newStack);
+            return;
+        }
+        const newStack = [
+            ...submenuStack
+        ];
+        newStack.pop();
+        const previousSubmenu = newStack[newStack.length - 1];
+        if (!previousSubmenu) {
+            setActiveSubmenu(null);
+            setSubmenuTitle(null);
+            setSubmenuStack([]);
+            return;
         }
+        setActiveSubmenu(previousSubmenu.id);
+        setSubmenuTitle(previousSubmenu.title);
+        setSubmenuStack(newStack);
     }, [
         submenuStack
     ]);
@@ -88,15 +337,14 @@ function DropDrawerContent({ className, children, ...props }) {
         const findSubmenuContent = (node)=>{
             if (!/*#__PURE__*/ isValidElement(node)) return;
             const element = node;
-            const props = element.props;
             if (element.type === DropDrawerSub) {
-                const elementId = props.id;
-                const dataSubmenuId = props["data-submenu-id"];
+                const elementId = element.props.id;
+                const dataSubmenuId = element.props["data-submenu-id"];
                 if (elementId === targetId || dataSubmenuId === targetId) {
-                    if (props.children) Children.forEach(props.children, (child)=>{
+                    if (element.props.children) Children.forEach(element.props.children, (child)=>{
                         if (/*#__PURE__*/ isValidElement(child) && child.type === DropDrawerSubContent) {
-                            const subContentProps = child.props;
-                            if (subContentProps.children) Children.forEach(subContentProps.children, (contentChild)=>{
+                            const subContentElement = child;
+                            Children.forEach(subContentElement.props.children, (contentChild)=>{
                                 result.push(contentChild);
                             });
                         }
@@ -104,36 +352,33 @@ function DropDrawerContent({ className, children, ...props }) {
                     return;
                 }
             }
-            if (props.children) if (Array.isArray(props.children)) props.children.forEach((child)=>findSubmenuContent(child));
-            else findSubmenuContent(props.children);
+            if (element.props.children) Children.forEach(element.props.children, findSubmenuContent);
         };
-        if (Array.isArray(elements)) elements.forEach((child)=>findSubmenuContent(child));
-        else findSubmenuContent(elements);
+        Children.forEach(elements, findSubmenuContent);
         return result;
     }, []);
     const getSubmenuContent = useCallback((id)=>{
-        const cachedContent = submenuContentRef.current.get(id || "");
+        const cachedContent = submenuContentRef.current.get(id);
         if (cachedContent && cachedContent.length > 0) return cachedContent;
         const submenuContent = extractSubmenuContent(children, id);
-        if (0 === submenuContent.length) return [];
-        if (id) submenuContentRef.current.set(id, submenuContent);
+        if (submenuContent.length > 0) submenuContentRef.current.set(id, submenuContent);
         return submenuContent;
     }, [
         children,
         extractSubmenuContent
     ]);
     const variants = {
-        enter: (direction)=>({
-                x: "forward" === direction ? "100%" : "-100%",
-                opacity: 0
-            }),
         center: {
-            x: 0,
-            opacity: 1
+            opacity: 1,
+            x: 0
         },
+        enter: (direction)=>({
+                opacity: 0,
+                x: "forward" === direction ? "100%" : "-100%"
+            }),
         exit: (direction)=>({
-                x: "forward" === direction ? "-100%" : "100%",
-                opacity: 0
+                opacity: 0,
+                x: "forward" === direction ? "-100%" : "100%"
             })
     };
     const transition = {
@@ -142,12 +387,14 @@ function DropDrawerContent({ className, children, ...props }) {
             0.25,
             0.1,
             0.25,
-            1.0
+            1
         ]
     };
     if (isMobile) return /*#__PURE__*/ jsx(SubmenuContext.Provider, {
         value: {
             activeSubmenu,
+            navigateToSubmenu,
+            registerSubmenuContent,
             setActiveSubmenu: (id)=>{
                 if (null === id) {
                     setActiveSubmenu(null);
@@ -155,36 +402,36 @@ function DropDrawerContent({ className, children, ...props }) {
                     setSubmenuStack([]);
                 }
             },
-            submenuTitle,
             setSubmenuTitle,
-            navigateToSubmenu,
-            registerSubmenuContent
+            submenuTitle
         },
         children: /*#__PURE__*/ jsx(DrawerContent, {
             "data-slot": "drop-drawer-content",
-            className: cn("max-h-[90vh]", className),
+            className: cn(dropdrawer_module.mobileContent, className),
             ...props,
             children: activeSubmenu ? /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsx(DrawerHeader, {
                         children: /*#__PURE__*/ jsxs("div", {
-                            className: "flex items-center gap-2",
+                            className: dropdrawer_module.mobileHeaderRow,
                             children: [
                                 /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    "aria-label": MOBILE_BACK_LABEL,
                                     onClick: goBack,
-                                    className: "rounded-full p-1 hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50",
+                                    className: dropdrawer_module.backButton,
                                     children: /*#__PURE__*/ jsx(ChevronLeftIcon, {
-                                        className: "h-5 w-5"
+                                        className: dropdrawer_module.chevron
                                     })
                                 }),
                                 /*#__PURE__*/ jsx(DrawerTitle, {
-                                    children: submenuTitle || "Submenu"
+                                    children: submenuTitle || MOBILE_SUBMENU_TITLE
                                 })
                             ]
                         })
                     }),
                     /*#__PURE__*/ jsx("div", {
-                        className: "relative max-h-[70vh] flex-1 overflow-y-auto",
+                        className: dropdrawer_module.mobileViewport,
                         children: /*#__PURE__*/ jsx(AnimatePresence, {
                             initial: false,
                             mode: "wait",
@@ -196,22 +443,22 @@ function DropDrawerContent({ className, children, ...props }) {
                                 animate: "center",
                                 exit: "exit",
                                 transition: transition,
-                                className: "h-full w-full space-y-1.5 pb-6",
-                                children: activeSubmenu ? getSubmenuContent(activeSubmenu) : children
-                            }, activeSubmenu || "main")
+                                className: dropdrawer_module.mobileMotionPanel,
+                                children: getSubmenuContent(activeSubmenu)
+                            }, activeSubmenu)
                         })
                     })
                 ]
             }) : /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsx(DrawerHeader, {
-                        className: "sr-only",
+                        className: dropdrawer_module.screenReaderOnlyHeader,
                         children: /*#__PURE__*/ jsx(DrawerTitle, {
-                            children: "Menu"
+                            children: MOBILE_MENU_TITLE
                         })
                     }),
                     /*#__PURE__*/ jsx("div", {
-                        className: "max-h-[70vh] overflow-y-auto",
+                        className: dropdrawer_module.mobileMainViewport,
                         children: /*#__PURE__*/ jsx(AnimatePresence, {
                             initial: false,
                             mode: "wait",
@@ -223,7 +470,7 @@ function DropDrawerContent({ className, children, ...props }) {
                                 animate: "center",
                                 exit: "exit",
                                 transition: transition,
-                                className: "w-full space-y-1.5 pb-6",
+                                className: dropdrawer_module.mobileMotionPanel,
                                 children: children
                             }, "main-menu")
                         })
@@ -235,22 +482,22 @@ function DropDrawerContent({ className, children, ...props }) {
     return /*#__PURE__*/ jsx(SubmenuContext.Provider, {
         value: {
             activeSubmenu,
+            registerSubmenuContent,
             setActiveSubmenu,
-            submenuTitle,
             setSubmenuTitle,
-            registerSubmenuContent
+            submenuTitle
         },
         children: /*#__PURE__*/ jsx(DropdownMenuContent, {
             "data-slot": "drop-drawer-content",
             align: "end",
             sideOffset: 4,
-            className: cn("max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[220px] overflow-y-auto", className),
+            className: cn(dropdrawer_module.desktopContent, className),
             ...props,
             children: children
         })
     });
 }
-function DropDrawerItem({ className, children, onSelect, onClick, icon, inset, disabled, ...props }) {
+function DropDrawerItem({ className, children, closeOnClick, disabled, icon, inset, onClick, onSelect, ...props }) {
     const { isMobile } = useDropDrawerContext();
     const isInGroup = useCallback((element)=>{
         if (!element) return false;
@@ -265,65 +512,86 @@ function DropDrawerItem({ className, children, onSelect, onClick, icon, inset, d
     const [isInsideGroup, setIsInsideGroup] = useState(false);
     useEffect(()=>{
         if (!isMobile) return;
-        const timer = setTimeout(()=>{
+        const timer = globalThis.window.setTimeout(()=>{
             if (itemRef.current) setIsInsideGroup(isInGroup(itemRef.current));
         }, 0);
-        return ()=>clearTimeout(timer);
+        return ()=>globalThis.window.clearTimeout(timer);
     }, [
         isInGroup,
         isMobile
     ]);
+    const handleSelect = useCallback((event)=>{
+        if (!disabled) onSelect?.(event);
+    }, [
+        disabled,
+        onSelect
+    ]);
     if (isMobile) {
-        const handleClick = (e)=>{
+        const handleClick = (event)=>{
             if (disabled) return;
-            if (onClick) onClick(e);
-            if (onSelect) onSelect(e);
+            onClick?.(event);
+            handleSelect(event.nativeEvent);
+        };
+        const handleKeyDown = (event)=>{
+            if ("Enter" !== event.key && " " !== event.key) return;
+            event.preventDefault();
+            event.currentTarget.click();
         };
         const content = /*#__PURE__*/ jsxs("div", {
             ref: itemRef,
             "data-slot": "drop-drawer-item",
-            "data-inset": inset,
             "data-disabled": disabled,
-            className: cn("flex cursor-pointer items-center justify-between px-4 py-4", !isInsideGroup && "mx-2 my-1.5 rounded-md bg-neutral-100 dark:bg-neutral-100 dark:bg-neutral-800 dark:dark:bg-neutral-800", isInsideGroup && "bg-transparent py-4", inset && "pl-8", disabled && "pointer-events-none opacity-50", className),
+            "data-inset": inset,
+            role: "menuitem",
+            tabIndex: disabled ? -1 : 0,
+            className: cn(dropdrawer_module.mobileItem, !isInsideGroup && dropdrawer_module.mobileStandaloneItem, isInsideGroup && dropdrawer_module.mobileGroupedItem, inset && dropdrawer_module.inset, className),
             onClick: handleClick,
+            onKeyDown: handleKeyDown,
             "aria-disabled": disabled,
             ...props,
             children: [
                 /*#__PURE__*/ jsx("div", {
-                    className: "flex items-center gap-2",
+                    className: dropdrawer_module.itemChildren,
                     children: children
                 }),
-                icon && /*#__PURE__*/ jsx("div", {
-                    className: "flex-shrink-0",
+                icon ? /*#__PURE__*/ jsx("div", {
+                    className: dropdrawer_module.itemIcon,
                     children: icon
-                })
+                }) : null
             ]
         });
-        const isInSubmenu = props["data-parent-submenu-id"] || props["data-parent-submenu"];
-        if (isInSubmenu) return content;
-        return /*#__PURE__*/ jsx(DrawerClose, {
-            asChild: true,
-            children: content
+        const parentSubmenuId = props["data-parent-submenu-id"] ?? props["data-parent-submenu"];
+        if (parentSubmenuId) return content;
+        return /*#__PURE__*/ jsx(Drawer.Close, {
+            nativeButton: false,
+            render: content
         });
     }
+    const handleDesktopClick = (event)=>{
+        if (disabled) return;
+        onClick?.(event);
+        handleSelect(event.nativeEvent);
+    };
     return /*#__PURE__*/ jsx(DropdownMenuItem, {
         "data-slot": "drop-drawer-item",
         "data-inset": inset,
-        className: className,
-        onSelect: onSelect,
-        onClick: onClick,
-        inset: inset,
+        className: cn(dropdrawer_module.desktopItem, className),
+        closeOnClick: closeOnClick,
         disabled: disabled,
+        inset: inset,
+        onClick: handleDesktopClick,
         ...props,
         children: /*#__PURE__*/ jsxs("div", {
-            className: "flex w-full items-center justify-between",
+            className: dropdrawer_module.itemRow,
             children: [
                 /*#__PURE__*/ jsx("div", {
+                    className: dropdrawer_module.itemChildren,
                     children: children
                 }),
-                icon && /*#__PURE__*/ jsx("div", {
+                icon ? /*#__PURE__*/ jsx("div", {
+                    className: dropdrawer_module.itemIcon,
                     children: icon
-                })
+                }) : null
             ]
         })
     });
@@ -339,16 +607,15 @@ function DropDrawerSeparator({ className, ...props }) {
 }
 function DropDrawerLabel({ className, children, ...props }) {
     const { isMobile } = useDropDrawerContext();
-    if (isMobile) return /*#__PURE__*/ jsx(DrawerHeader, {
-        className: "p-0",
+    return isMobile ? /*#__PURE__*/ jsx(DrawerHeader, {
+        className: dropdrawer_module.mobileLabelWrapper,
         children: /*#__PURE__*/ jsx(DrawerTitle, {
             "data-slot": "drop-drawer-label",
-            className: cn("px-4 py-2 text-sm font-medium text-neutral-500 dark:text-neutral-400", className),
+            className: cn(dropdrawer_module.mobileLabel, className),
             ...props,
             children: children
         })
-    });
-    return /*#__PURE__*/ jsx(DropdownMenuLabel, {
+    }) : /*#__PURE__*/ jsx(DropdownMenuLabel, {
         "data-slot": "drop-drawer-label",
         className: className,
         ...props,
@@ -357,15 +624,14 @@ function DropDrawerLabel({ className, children, ...props }) {
 }
 function DropDrawerFooter({ className, children, ...props }) {
     const { isMobile } = useDropDrawerContext();
-    if (isMobile) return /*#__PURE__*/ jsx(DrawerFooter, {
+    return isMobile ? /*#__PURE__*/ jsx(DrawerFooter, {
         "data-slot": "drop-drawer-footer",
-        className: cn("p-4", className),
+        className: cn(dropdrawer_module.mobileFooter, className),
         ...props,
         children: children
-    });
-    return /*#__PURE__*/ jsx("div", {
+    }) : /*#__PURE__*/ jsx("div", {
         "data-slot": "drop-drawer-footer",
-        className: cn("p-2", className),
+        className: cn(dropdrawer_module.desktopFooter, className),
         ...props,
         children: children
     });
@@ -375,7 +641,7 @@ function DropDrawerGroup({ className, children, ...props }) {
     const childrenWithSeparators = useMemo(()=>{
         if (!isMobile) return children;
         const childArray = Children.toArray(children);
-        const filteredChildren = childArray.filter((child)=>/*#__PURE__*/ isValidElement(child) && child.type !== DropDrawerSeparator);
+        const filteredChildren = childArray.filter((child)=>!/*#__PURE__*/ (isValidElement(child) && child.type === DropDrawerSeparator));
         return filteredChildren.flatMap((child, index)=>{
             if (index === filteredChildren.length - 1) return [
                 child
@@ -383,7 +649,7 @@ function DropDrawerGroup({ className, children, ...props }) {
             return [
                 child,
                 /*#__PURE__*/ jsx("div", {
-                    className: "h-px bg-neutral-200 dark:bg-neutral-800",
+                    className: dropdrawer_module.mobileGroupSeparator,
                     "aria-hidden": "true"
                 }, `separator-${index}`)
             ];
@@ -392,44 +658,36 @@ function DropDrawerGroup({ className, children, ...props }) {
         children,
         isMobile
     ]);
-    if (isMobile) return /*#__PURE__*/ jsx("div", {
+    return isMobile ? /*#__PURE__*/ jsx("div", {
         "data-drop-drawer-group": true,
         "data-slot": "drop-drawer-group",
         role: "group",
-        className: cn("mx-2 my-3 overflow-hidden rounded-xl bg-neutral-100 dark:bg-neutral-100 dark:bg-neutral-800 dark:dark:bg-neutral-800", className),
+        className: cn(dropdrawer_module.mobileGroup, className),
         ...props,
         children: childrenWithSeparators
-    });
-    return /*#__PURE__*/ jsx("div", {
+    }) : /*#__PURE__*/ jsx(Menu.Group, {
         "data-drop-drawer-group": true,
         "data-slot": "drop-drawer-group",
-        role: "group",
         className: className,
         ...props,
         children: children
     });
 }
-const SubmenuContext = /*#__PURE__*/ createContext({
-    activeSubmenu: null,
-    setActiveSubmenu: ()=>{},
-    submenuTitle: null,
-    setSubmenuTitle: ()=>{},
-    navigateToSubmenu: void 0,
-    registerSubmenuContent: void 0
-});
-let submenuIdCounter = 0;
 function DropDrawerSub({ children, id, ...props }) {
     const { isMobile } = useDropDrawerContext();
     const { registerSubmenuContent } = useContext(SubmenuContext);
-    const [generatedId] = useState(()=>`submenu-${submenuIdCounter++}`);
+    const generatedId = useId();
     const submenuId = id || generatedId;
     useEffect(()=>{
         if (!registerSubmenuContent) return;
         const contentItems = [];
         Children.forEach(children, (child)=>{
-            if (/*#__PURE__*/ isValidElement(child) && child.type === DropDrawerSubContent) Children.forEach(child.props.children, (contentChild)=>{
-                contentItems.push(contentChild);
-            });
+            if (/*#__PURE__*/ isValidElement(child) && child.type === DropDrawerSubContent) {
+                const childElement = child;
+                Children.forEach(childElement.props.children, (contentChild)=>{
+                    contentItems.push(contentChild);
+                });
+            }
         });
         if (contentItems.length > 0) registerSubmenuContent(submenuId, contentItems);
     }, [
@@ -440,17 +698,10 @@ function DropDrawerSub({ children, id, ...props }) {
     if (isMobile) {
         const processedChildren = Children.map(children, (child)=>{
             if (!/*#__PURE__*/ isValidElement(child)) return child;
-            if (child.type === DropDrawerSubTrigger) return /*#__PURE__*/ cloneElement(child, {
-                ...child.props,
-                "data-parent-submenu-id": submenuId,
-                "data-submenu-id": submenuId,
-                "data-parent-submenu": submenuId
-            });
-            if (child.type === DropDrawerSubContent) return /*#__PURE__*/ cloneElement(child, {
-                ...child.props,
+            if (child.type === DropDrawerSubTrigger || child.type === DropDrawerSubContent) return /*#__PURE__*/ cloneElement(child, {
+                "data-parent-submenu": submenuId,
                 "data-parent-submenu-id": submenuId,
-                "data-submenu-id": submenuId,
-                "data-parent-submenu": submenuId
+                "data-submenu-id": submenuId
             });
             return child;
         });
@@ -468,7 +719,7 @@ function DropDrawerSub({ children, id, ...props }) {
         children: children
     });
 }
-function DropDrawerSubTrigger({ className, inset, children, ...props }) {
+function DropDrawerSubTrigger({ className, inset, children, onClick, ...props }) {
     const { isMobile } = useDropDrawerContext();
     const { navigateToSubmenu } = useContext(SubmenuContext);
     const isInGroup = useCallback((element)=>{
@@ -484,53 +735,54 @@ function DropDrawerSubTrigger({ className, inset, children, ...props }) {
     const [isInsideGroup, setIsInsideGroup] = useState(false);
     useEffect(()=>{
         if (!isMobile) return;
-        const timer = setTimeout(()=>{
+        const timer = globalThis.window.setTimeout(()=>{
             if (itemRef.current) setIsInsideGroup(isInGroup(itemRef.current));
         }, 0);
-        return ()=>clearTimeout(timer);
+        return ()=>globalThis.window.clearTimeout(timer);
     }, [
         isInGroup,
         isMobile
     ]);
     if (isMobile) {
-        const handleClick = (e)=>{
-            e.preventDefault();
-            e.stopPropagation();
-            const element = e.currentTarget;
+        const navigate = (eventTarget)=>{
             let submenuId = null;
-            if (element.closest("[data-submenu-id]")) {
-                const closestElement = element.closest("[data-submenu-id]");
-                const id = closestElement?.getAttribute("data-submenu-id");
-                if (id) submenuId = id;
-            }
-            if (!submenuId) submenuId = props["data-parent-submenu-id"] || props["data-parent-submenu"];
+            const closestElement = eventTarget.closest("[data-submenu-id]");
+            const closestId = closestElement?.getAttribute("data-submenu-id");
+            if (closestId) submenuId = closestId;
+            if (!submenuId) submenuId = props["data-parent-submenu-id"] ?? props["data-parent-submenu"] ?? null;
             if (!submenuId) return;
-            const title = "string" == typeof children ? children : "Submenu";
-            if (navigateToSubmenu) navigateToSubmenu(submenuId, title);
+            const title = "string" == typeof children ? children : MOBILE_SUBMENU_TITLE;
+            navigateToSubmenu?.(submenuId, title);
         };
-        const combinedOnClick = (e)=>{
-            const typedProps = props;
-            if (typedProps["onClick"]) {
-                const originalOnClick = typedProps["onClick"];
-                originalOnClick(e);
-            }
-            handleClick(e);
+        const handleClick = (event)=>{
+            event.preventDefault();
+            event.stopPropagation();
+            onClick?.(event);
+            navigate(event.currentTarget);
+        };
+        const handleKeyDown = (event)=>{
+            if ("Enter" !== event.key && " " !== event.key) return;
+            event.preventDefault();
+            event.stopPropagation();
+            event.currentTarget.click();
         };
-        const { ...restProps } = props;
         return /*#__PURE__*/ jsxs("div", {
             ref: itemRef,
             "data-slot": "drop-drawer-sub-trigger",
             "data-inset": inset,
-            className: cn("flex cursor-pointer items-center justify-between px-4 py-4", !isInsideGroup && "mx-2 my-1.5 rounded-md bg-neutral-100 dark:bg-neutral-100 dark:bg-neutral-800 dark:dark:bg-neutral-800", isInsideGroup && "bg-transparent py-4", inset && "pl-8", className),
-            onClick: combinedOnClick,
-            ...restProps,
+            role: "menuitem",
+            tabIndex: 0,
+            className: cn(dropdrawer_module.mobileItem, !isInsideGroup && dropdrawer_module.mobileStandaloneItem, isInsideGroup && dropdrawer_module.mobileGroupedItem, inset && dropdrawer_module.inset, className),
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+            ...props,
             children: [
                 /*#__PURE__*/ jsx("div", {
-                    className: "flex items-center gap-2",
+                    className: dropdrawer_module.itemChildren,
                     children: children
                 }),
                 /*#__PURE__*/ jsx(ChevronRightIcon, {
-                    className: "h-5 w-5"
+                    className: dropdrawer_module.chevron
                 })
             ]
         });
@@ -540,6 +792,7 @@ function DropDrawerSubTrigger({ className, inset, children, ...props }) {
         "data-inset": inset,
         className: className,
         inset: inset,
+        onClick: onClick,
         ...props,
         children: children
     });
@@ -550,11 +803,22 @@ function DropDrawerSubContent({ className, sideOffset = 4, children, ...props })
     return /*#__PURE__*/ jsx(DropdownMenuSubContent, {
         "data-slot": "drop-drawer-sub-content",
         sideOffset: sideOffset,
-        className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 p-1 shadow-lg dark:border-neutral-800", className),
+        className: cn(dropdrawer_module.dropdownSubContent, className),
         ...props,
         children: children
     });
 }
+DropDrawer.displayName = "DropDrawer";
+DropDrawerTrigger.displayName = "DropDrawerTrigger";
+DropDrawerContent.displayName = "DropDrawerContent";
+DropDrawerItem.displayName = "DropDrawerItem";
+DropDrawerSeparator.displayName = "DropDrawerSeparator";
+DropDrawerLabel.displayName = "DropDrawerLabel";
+DropDrawerFooter.displayName = "DropDrawerFooter";
+DropDrawerGroup.displayName = "DropDrawerGroup";
+DropDrawerSub.displayName = "DropDrawerSub";
+DropDrawerSubTrigger.displayName = "DropDrawerSubTrigger";
+DropDrawerSubContent.displayName = "DropDrawerSubContent";
 export { DropDrawer, DropDrawerContent, DropDrawerFooter, DropDrawerGroup, DropDrawerItem, DropDrawerLabel, DropDrawerSeparator, DropDrawerSub, DropDrawerSubContent, DropDrawerSubTrigger, DropDrawerTrigger };
 
 //# sourceMappingURL=dropdrawer.js.map