@arolariu/components 0.0.37 → 0.0.38

package/dist/esm/components/ui/dropdrawer.js

@@ -0,0 +1,563 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__ from "motion/react";
+import * as __WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__ from "lucide-react";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__ from "./drawer.js";
+import * as __WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__ from "./dropdown-menu.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_use_mobile_js_c09fe54d__ from "../../hooks/use-mobile.js";
+import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
+const DropDrawerContext = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createContext({
+    isMobile: false
+});
+const useDropDrawerContext = ()=>{
+    const context = __WEBPACK_EXTERNAL_MODULE_react__.useContext(DropDrawerContext);
+    if (!context) throw new Error("DropDrawer components cannot be rendered outside the Context");
+    return context;
+};
+function DropDrawer({ children, ...props }) {
+    const isMobile = (0, __WEBPACK_EXTERNAL_MODULE__hooks_use_mobile_js_c09fe54d__.useIsMobile)();
+    const DropdownComponent = isMobile ? __WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.Drawer : __WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenu;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DropDrawerContext.Provider, {
+        value: {
+            isMobile
+        },
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DropdownComponent, {
+            "data-slot": "drop-drawer",
+            ...isMobile && {
+                autoFocus: true
+            },
+            ...props,
+            children: children
+        })
+    });
+}
+function DropDrawerTrigger({ className, children, ...props }) {
+    const { isMobile } = useDropDrawerContext();
+    const TriggerComponent = isMobile ? __WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerTrigger : __WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuTrigger;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(TriggerComponent, {
+        "data-slot": "drop-drawer-trigger",
+        className: className,
+        ...props,
+        children: children
+    });
+}
+function DropDrawerContent({ className, children, ...props }) {
+    const { isMobile } = useDropDrawerContext();
+    const [activeSubmenu, setActiveSubmenu] = __WEBPACK_EXTERNAL_MODULE_react__.useState(null);
+    const [submenuTitle, setSubmenuTitle] = __WEBPACK_EXTERNAL_MODULE_react__.useState(null);
+    const [submenuStack, setSubmenuStack] = __WEBPACK_EXTERNAL_MODULE_react__.useState([]);
+    const [animationDirection, setAnimationDirection] = __WEBPACK_EXTERNAL_MODULE_react__.useState("forward");
+    const submenuContentRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(new Map());
+    const navigateToSubmenu = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((id, title)=>{
+        setAnimationDirection("forward");
+        setActiveSubmenu(id);
+        setSubmenuTitle(title);
+        setSubmenuStack((prev)=>[
+                ...prev,
+                {
+                    id,
+                    title
+                }
+            ]);
+    }, []);
+    const goBack = __WEBPACK_EXTERNAL_MODULE_react__.useCallback(()=>{
+        setAnimationDirection("backward");
+        if (submenuStack.length <= 1) {
+            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);
+        }
+    }, [
+        submenuStack
+    ]);
+    const registerSubmenuContent = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((id, content)=>{
+        submenuContentRef.current.set(id, content);
+    }, []);
+    const extractSubmenuContent = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((elements, targetId)=>{
+        const result = [];
+        const findSubmenuContent = (node)=>{
+            if (!/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(node)) return;
+            const element = node;
+            const props = element.props;
+            if (element.type === DropDrawerSub) {
+                const elementId = props.id;
+                const dataSubmenuId = props["data-submenu-id"];
+                if (elementId === targetId || dataSubmenuId === targetId) {
+                    if (props.children) __WEBPACK_EXTERNAL_MODULE_react__.Children.forEach(props.children, (child)=>{
+                        if (/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child) && child.type === DropDrawerSubContent) {
+                            const subContentProps = child.props;
+                            if (subContentProps.children) __WEBPACK_EXTERNAL_MODULE_react__.Children.forEach(subContentProps.children, (contentChild)=>{
+                                result.push(contentChild);
+                            });
+                        }
+                    });
+                    return;
+                }
+            }
+            if (props.children) if (Array.isArray(props.children)) props.children.forEach((child)=>findSubmenuContent(child));
+            else findSubmenuContent(props.children);
+        };
+        if (Array.isArray(elements)) elements.forEach((child)=>findSubmenuContent(child));
+        else findSubmenuContent(elements);
+        return result;
+    }, []);
+    const getSubmenuContent = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((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);
+        return submenuContent;
+    }, [
+        children,
+        extractSubmenuContent
+    ]);
+    const variants = {
+        enter: (direction)=>({
+                x: "forward" === direction ? "100%" : "-100%",
+                opacity: 0
+            }),
+        center: {
+            x: 0,
+            opacity: 1
+        },
+        exit: (direction)=>({
+                x: "forward" === direction ? "-100%" : "100%",
+                opacity: 0
+            })
+    };
+    const transition = {
+        duration: 0.3,
+        ease: [
+            0.25,
+            0.1,
+            0.25,
+            1.0
+        ]
+    };
+    if (isMobile) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(SubmenuContext.Provider, {
+        value: {
+            activeSubmenu,
+            setActiveSubmenu: (id)=>{
+                if (null === id) {
+                    setActiveSubmenu(null);
+                    setSubmenuTitle(null);
+                    setSubmenuStack([]);
+                }
+            },
+            submenuTitle,
+            setSubmenuTitle,
+            navigateToSubmenu,
+            registerSubmenuContent
+        },
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerContent, {
+            "data-slot": "drop-drawer-content",
+            className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("max-h-[90vh]", className),
+            ...props,
+            children: activeSubmenu ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerHeader, {
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                            className: "flex items-center gap-2",
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
+                                    onClick: goBack,
+                                    className: "hover:bg-neutral-100/50 rounded-full p-1 dark:hover:bg-neutral-800/50",
+                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ChevronLeftIcon, {
+                                        className: "h-5 w-5"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerTitle, {
+                                    children: submenuTitle || "Submenu"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: "flex-1 relative overflow-y-auto max-h-[70vh]",
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.AnimatePresence, {
+                            initial: false,
+                            mode: "wait",
+                            custom: animationDirection,
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
+                                custom: animationDirection,
+                                variants: variants,
+                                initial: "enter",
+                                animate: "center",
+                                exit: "exit",
+                                transition: transition,
+                                className: "pb-6 space-y-1.5 w-full h-full",
+                                children: activeSubmenu ? getSubmenuContent(activeSubmenu) : children
+                            }, activeSubmenu || "main")
+                        })
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerHeader, {
+                        className: "sr-only",
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerTitle, {
+                            children: "Menu"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: "overflow-y-auto max-h-[70vh]",
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.AnimatePresence, {
+                            initial: false,
+                            mode: "wait",
+                            custom: animationDirection,
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
+                                custom: animationDirection,
+                                variants: variants,
+                                initial: "enter",
+                                animate: "center",
+                                exit: "exit",
+                                transition: transition,
+                                className: "pb-6 space-y-1.5 w-full",
+                                children: children
+                            }, "main-menu")
+                        })
+                    })
+                ]
+            })
+        })
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(SubmenuContext.Provider, {
+        value: {
+            activeSubmenu,
+            setActiveSubmenu,
+            submenuTitle,
+            setSubmenuTitle,
+            registerSubmenuContent
+        },
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuContent, {
+            "data-slot": "drop-drawer-content",
+            align: "end",
+            sideOffset: 4,
+            className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[220px] overflow-y-auto", className),
+            ...props,
+            children: children
+        })
+    });
+}
+function DropDrawerItem({ className, children, onSelect, onClick, icon, variant = "default", inset, disabled, ...props }) {
+    const { isMobile } = useDropDrawerContext();
+    const isInGroup = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((element)=>{
+        if (!element) return false;
+        let parent = element.parentElement;
+        while(parent){
+            if (parent.hasAttribute("data-drop-drawer-group")) return true;
+            parent = parent.parentElement;
+        }
+        return false;
+    }, []);
+    const itemRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
+    const [isInsideGroup, setIsInsideGroup] = __WEBPACK_EXTERNAL_MODULE_react__.useState(false);
+    __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
+        if (!isMobile) return;
+        const timer = setTimeout(()=>{
+            if (itemRef.current) setIsInsideGroup(isInGroup(itemRef.current));
+        }, 0);
+        return ()=>clearTimeout(timer);
+    }, [
+        isInGroup,
+        isMobile
+    ]);
+    if (isMobile) {
+        const handleClick = (e)=>{
+            if (disabled) return;
+            if (onClick) onClick(e);
+            if (onSelect) onSelect(e);
+        };
+        const content = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+            ref: itemRef,
+            "data-slot": "drop-drawer-item",
+            "data-variant": variant,
+            "data-inset": inset,
+            "data-disabled": disabled,
+            className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("flex cursor-pointer items-center justify-between px-4 py-4", !isInsideGroup && "bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800", isInsideGroup && "bg-transparent py-4", inset && "pl-8", "destructive" === variant && "text-red-500 dark:text-red-500 dark:text-red-900 dark:dark:text-red-900", disabled && "pointer-events-none opacity-50", className),
+            onClick: handleClick,
+            "aria-disabled": disabled,
+            ...props,
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    className: "flex items-center gap-2",
+                    children: children
+                }),
+                icon && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    className: "flex-shrink-0",
+                    children: icon
+                })
+            ]
+        });
+        const isInSubmenu = props["data-parent-submenu-id"] || props["data-parent-submenu"];
+        if (isInSubmenu) return content;
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerClose, {
+            asChild: true,
+            children: content
+        });
+    }
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuItem, {
+        "data-slot": "drop-drawer-item",
+        "data-variant": variant,
+        "data-inset": inset,
+        className: className,
+        onSelect: onSelect,
+        onClick: onClick,
+        variant: variant,
+        inset: inset,
+        disabled: disabled,
+        ...props,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+            className: "flex w-full items-center justify-between",
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    children: children
+                }),
+                icon && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    children: icon
+                })
+            ]
+        })
+    });
+}
+function DropDrawerSeparator({ className, ...props }) {
+    const { isMobile } = useDropDrawerContext();
+    if (isMobile) return null;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuSeparator, {
+        "data-slot": "drop-drawer-separator",
+        className: className,
+        ...props
+    });
+}
+function DropDrawerLabel({ className, children, ...props }) {
+    const { isMobile } = useDropDrawerContext();
+    if (isMobile) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerHeader, {
+        className: "p-0",
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerTitle, {
+            "data-slot": "drop-drawer-label",
+            className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("text-neutral-500 px-4 py-2 text-sm font-medium dark:text-neutral-400", className),
+            ...props,
+            children: children
+        })
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuLabel, {
+        "data-slot": "drop-drawer-label",
+        className: className,
+        ...props,
+        children: children
+    });
+}
+function DropDrawerFooter({ className, children, ...props }) {
+    const { isMobile } = useDropDrawerContext();
+    if (isMobile) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__drawer_js_cb54ad75__.DrawerFooter, {
+        "data-slot": "drop-drawer-footer",
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("p-4", className),
+        ...props,
+        children: children
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        "data-slot": "drop-drawer-footer",
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("p-2", className),
+        ...props,
+        children: children
+    });
+}
+function DropDrawerGroup({ className, children, ...props }) {
+    const { isMobile } = useDropDrawerContext();
+    const childrenWithSeparators = __WEBPACK_EXTERNAL_MODULE_react__.useMemo(()=>{
+        if (!isMobile) return children;
+        const childArray = __WEBPACK_EXTERNAL_MODULE_react__.Children.toArray(children);
+        const filteredChildren = childArray.filter((child)=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child) && child.type !== DropDrawerSeparator);
+        return filteredChildren.flatMap((child, index)=>{
+            if (index === filteredChildren.length - 1) return [
+                child
+            ];
+            return [
+                child,
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    className: "bg-neutral-200 h-px dark:bg-neutral-800",
+                    "aria-hidden": "true"
+                }, `separator-${index}`)
+            ];
+        });
+    }, [
+        children,
+        isMobile
+    ]);
+    if (isMobile) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        "data-drop-drawer-group": true,
+        "data-slot": "drop-drawer-group",
+        role: "group",
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("bg-neutral-100 dark:bg-neutral-100 mx-2 my-3 overflow-hidden rounded-xl dark:bg-neutral-800 dark:dark:bg-neutral-800", className),
+        ...props,
+        children: childrenWithSeparators
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        "data-drop-drawer-group": true,
+        "data-slot": "drop-drawer-group",
+        role: "group",
+        className: className,
+        ...props,
+        children: children
+    });
+}
+const SubmenuContext = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.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 } = __WEBPACK_EXTERNAL_MODULE_react__.useContext(SubmenuContext);
+    const [generatedId] = __WEBPACK_EXTERNAL_MODULE_react__.useState(()=>`submenu-${submenuIdCounter++}`);
+    const submenuId = id || generatedId;
+    __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
+        if (!registerSubmenuContent) return;
+        const contentItems = [];
+        __WEBPACK_EXTERNAL_MODULE_react__.Children.forEach(children, (child)=>{
+            if (/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child) && child.type === DropDrawerSubContent) __WEBPACK_EXTERNAL_MODULE_react__.Children.forEach(child.props.children, (contentChild)=>{
+                contentItems.push(contentChild);
+            });
+        });
+        if (contentItems.length > 0) registerSubmenuContent(submenuId, contentItems);
+    }, [
+        children,
+        registerSubmenuContent,
+        submenuId
+    ]);
+    if (isMobile) {
+        const processedChildren = __WEBPACK_EXTERNAL_MODULE_react__.Children.map(children, (child)=>{
+            if (!/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.isValidElement(child)) return child;
+            if (child.type === DropDrawerSubTrigger) return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(child, {
+                ...child.props,
+                "data-parent-submenu-id": submenuId,
+                "data-submenu-id": submenuId,
+                "data-parent-submenu": submenuId
+            });
+            if (child.type === DropDrawerSubContent) return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.cloneElement(child, {
+                ...child.props,
+                "data-parent-submenu-id": submenuId,
+                "data-submenu-id": submenuId,
+                "data-parent-submenu": submenuId
+            });
+            return child;
+        });
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            "data-slot": "drop-drawer-sub",
+            "data-submenu-id": submenuId,
+            id: submenuId,
+            children: processedChildren
+        });
+    }
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuSub, {
+        "data-slot": "drop-drawer-sub",
+        "data-submenu-id": submenuId,
+        ...props,
+        children: children
+    });
+}
+function DropDrawerSubTrigger({ className, inset, children, ...props }) {
+    const { isMobile } = useDropDrawerContext();
+    const { navigateToSubmenu } = __WEBPACK_EXTERNAL_MODULE_react__.useContext(SubmenuContext);
+    const isInGroup = __WEBPACK_EXTERNAL_MODULE_react__.useCallback((element)=>{
+        if (!element) return false;
+        let parent = element.parentElement;
+        while(parent){
+            if (parent.hasAttribute("data-drop-drawer-group")) return true;
+            parent = parent.parentElement;
+        }
+        return false;
+    }, []);
+    const itemRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
+    const [isInsideGroup, setIsInsideGroup] = __WEBPACK_EXTERNAL_MODULE_react__.useState(false);
+    __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
+        if (!isMobile) return;
+        const timer = setTimeout(()=>{
+            if (itemRef.current) setIsInsideGroup(isInGroup(itemRef.current));
+        }, 0);
+        return ()=>clearTimeout(timer);
+    }, [
+        isInGroup,
+        isMobile
+    ]);
+    if (isMobile) {
+        const handleClick = (e)=>{
+            e.preventDefault();
+            e.stopPropagation();
+            const element = e.currentTarget;
+            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"];
+            if (!submenuId) return;
+            const title = "string" == typeof children ? children : "Submenu";
+            if (navigateToSubmenu) navigateToSubmenu(submenuId, title);
+        };
+        const combinedOnClick = (e)=>{
+            const typedProps = props;
+            if (typedProps["onClick"]) {
+                const originalOnClick = typedProps["onClick"];
+                originalOnClick(e);
+            }
+            handleClick(e);
+        };
+        const { ...restProps } = props;
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+            ref: itemRef,
+            "data-slot": "drop-drawer-sub-trigger",
+            "data-inset": inset,
+            className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("flex cursor-pointer items-center justify-between px-4 py-4", !isInsideGroup && "bg-neutral-100 dark:bg-neutral-100 mx-2 my-1.5 rounded-md dark:bg-neutral-800 dark:dark:bg-neutral-800", isInsideGroup && "bg-transparent py-4", inset && "pl-8", className),
+            onClick: combinedOnClick,
+            ...restProps,
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    className: "flex items-center gap-2",
+                    children: children
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ChevronRightIcon, {
+                    className: "h-5 w-5"
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuSubTrigger, {
+        "data-slot": "drop-drawer-sub-trigger",
+        "data-inset": inset,
+        className: className,
+        inset: inset,
+        ...props,
+        children: children
+    });
+}
+function DropDrawerSubContent({ className, sideOffset = 4, children, ...props }) {
+    const { isMobile } = useDropDrawerContext();
+    if (isMobile) return null;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dropdown_menu_js_e9bcf107__.DropdownMenuSubContent, {
+        "data-slot": "drop-drawer-sub-content",
+        sideOffset: sideOffset,
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 p-1 shadow-lg dark:border-neutral-800", className),
+        ...props,
+        children: children
+    });
+}
+export { DropDrawer, DropDrawerContent, DropDrawerFooter, DropDrawerGroup, DropDrawerItem, DropDrawerLabel, DropDrawerSeparator, DropDrawerSub, DropDrawerSubContent, DropDrawerSubTrigger, DropDrawerTrigger };
+
+//# sourceMappingURL=dropdrawer.js.map