@raydenui/ui 0.9.6 → 0.10.0

package/dist/components/Select/SelectOption.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+import { useSelectContext } from "./Select.js";
+export const SelectOption = forwardRef(({ value, icon, avatar, statusColor, description, disabled = false, children, className, onClick, ...rest }, ref) => {
+    const ctx = useSelectContext();
+    const isSelected = ctx.value === value;
+    const handleClick = (e) => {
+        if (disabled)
+            return;
+        onClick?.(e);
+        if (!e.defaultPrevented)
+            ctx.onSelect(value);
+    };
+    const resolvedIcon = resolveIcon(icon, "md");
+    // Determine leading element
+    const leading = avatar ? (_jsx("span", { className: "shrink-0 size-5", children: avatar })) : statusColor ? (_jsx("span", { className: "shrink-0 size-2 rounded-full border-[1.5px] border-white", style: { backgroundColor: statusColor } })) : resolvedIcon ? (_jsx("span", { className: cn("shrink-0 size-5", disabled && "opacity-50"), children: resolvedIcon })) : null;
+    return (_jsxs("button", { ref: ref, type: "button", role: "option", tabIndex: -1, "aria-selected": isSelected, disabled: disabled, onClick: handleClick, className: cn("flex w-full items-center px-4 py-2 text-left text-body-sm outline-none transition-colors", statusColor ? "gap-2" : "gap-3", disabled
+            ? "bg-grey-100 text-grey-500 cursor-not-allowed"
+            : "text-grey-900 hover:bg-grey-50 focus:bg-grey-100 focus:font-medium", className), ...rest, children: [_jsxs("div", { className: cn("flex flex-1 items-center", statusColor ? "gap-2" : "gap-3"), children: [leading, _jsx("span", { className: "shrink-0", children: children }), description && _jsx("span", { className: "text-grey-500 truncate", children: description })] }), isSelected && !disabled && (_jsx("span", { className: "ml-2 shrink-0", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-[#1671D9]", children: [_jsx("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor" }), _jsx("path", { d: "M11.5 5.5L6.5 10.5L4.5 8.5", stroke: "white", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }) }))] }));
+});
+SelectOption.displayName = "SelectOption";

package/dist/components/Select/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectOption = exports.Select = void 0;
+var Select_1 = require("./Select.cjs");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
+var SelectOption_1 = require("./SelectOption.cjs");
+Object.defineProperty(exports, "SelectOption", { enumerable: true, get: function () { return SelectOption_1.SelectOption; } });

package/dist/components/Select/index.js

@@ -0,0 +1,2 @@
+export { Select } from "./Select.js";
+export { SelectOption } from "./SelectOption.js";

package/dist/components/SidebarMenu/SidebarMenu.cjs

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarMenu = exports.sidebarThemeStyles = void 0;
+exports.useSidebarMenuContext = useSidebarMenuContext;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+exports.sidebarThemeStyles = {
+    light: {
+        container: "bg-surface",
+        defaultText: "text-on-surface-body",
+        defaultIcon: "text-on-surface-muted",
+        selectedBg: "bg-primary-50",
+        selectedText: "text-on-surface",
+        selectedBorder: "border-l-2 border-primary-400",
+        selectedIcon: "text-on-surface",
+        hoverBg: "hover:bg-grey-50 dark:hover:bg-grey-100",
+        sectionTitle: "text-on-surface-muted",
+        divider: "border-grey-100",
+        badgeDefault: "bg-grey-100 text-grey-700",
+        badgeSelected: "bg-primary-50 text-action-primary-text",
+    },
+    blue: {
+        container: "bg-[#1671D9]",
+        defaultText: "text-white",
+        defaultIcon: "text-white/70",
+        selectedBg: "bg-[#0D5EBA]",
+        selectedText: "text-white",
+        selectedBorder: "",
+        selectedIcon: "text-white",
+        hoverBg: "hover:bg-[#0D5EBA]/50",
+        sectionTitle: "text-[#B6D8FF]",
+        divider: "border-[#80BBFF]",
+        badgeDefault: "bg-grey-100 text-grey-700",
+        badgeSelected: "bg-grey-100 text-grey-700",
+    },
+    "dark-blue": {
+        container: "bg-[#04326B]",
+        defaultText: "text-[#C6DDF7]",
+        defaultIcon: "text-[#C6DDF7]/70",
+        selectedBg: "bg-[#034592]",
+        selectedText: "text-white",
+        selectedBorder: "",
+        selectedIcon: "text-white",
+        hoverBg: "hover:bg-[#034592]/50",
+        sectionTitle: "text-[#E3EFFC]",
+        divider: "border-[#80BBFF]",
+        badgeDefault: "bg-grey-100 text-grey-700",
+        badgeSelected: "bg-grey-100 text-grey-700",
+    },
+    "dark-grey": {
+        container: "bg-[#101928]",
+        defaultText: "text-[#F0F2F5]",
+        defaultIcon: "text-[#F0F2F5]/70",
+        selectedBg: "bg-[#1D2739]",
+        selectedText: "text-white",
+        selectedBorder: "",
+        selectedIcon: "text-white",
+        hoverBg: "hover:bg-[#1D2739]/50",
+        sectionTitle: "text-[#98A2B3]",
+        divider: "border-[#344054]",
+        badgeDefault: "bg-grey-100 text-grey-700",
+        badgeSelected: "bg-grey-100 text-grey-700",
+    },
+};
+const SidebarMenuContext = (0, react_1.createContext)(null);
+function useSidebarMenuContext() {
+    const ctx = (0, react_1.useContext)(SidebarMenuContext);
+    if (!ctx)
+        throw new Error("SidebarMenuItem / SidebarMenuSection must be used within SidebarMenu");
+    return ctx;
+}
+// ─── Component ────────────────────────────────────────────────────
+exports.SidebarMenu = (0, react_1.forwardRef)(({ value, defaultValue = "", onValueChange, collapsed = false, theme = "light", children, className, ...rest }, ref) => {
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
+    const activeValue = value ?? internalValue;
+    const onSelect = (0, react_1.useCallback)((val) => {
+        if (value === undefined)
+            setInternalValue(val);
+        onValueChange?.(val);
+    }, [value, onValueChange]);
+    const ts = exports.sidebarThemeStyles[theme];
+    return ((0, jsx_runtime_1.jsx)(SidebarMenuContext.Provider, { value: { activeValue, onSelect, collapsed, theme }, children: (0, jsx_runtime_1.jsx)("nav", { ref: ref, "aria-label": "Main navigation", className: (0, cn_1.cn)("flex flex-col gap-3 overflow-y-auto rounded-xl py-6", ts.container, collapsed ? "w-[82px] items-center px-3" : "w-[272px] px-4", className), ...rest, children: children }) }));
+});
+exports.SidebarMenu.displayName = "SidebarMenu";

package/dist/components/SidebarMenu/SidebarMenu.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useState, forwardRef, } from "react";
+import { cn } from "../../utils/cn.js";
+export const sidebarThemeStyles = {
+    light: {
+        container: "bg-surface",
+        defaultText: "text-on-surface-body",
+        defaultIcon: "text-on-surface-muted",
+        selectedBg: "bg-primary-50",
+        selectedText: "text-on-surface",
+        selectedBorder: "border-l-2 border-primary-400",
+        selectedIcon: "text-on-surface",
+        hoverBg: "hover:bg-grey-50 dark:hover:bg-grey-100",
+        sectionTitle: "text-on-surface-muted",
+        divider: "border-grey-100",
+        badgeDefault: "bg-grey-100 text-grey-700",
+        badgeSelected: "bg-primary-50 text-action-primary-text",
+    },
+    blue: {
+        container: "bg-[#1671D9]",
+        defaultText: "text-white",
+        defaultIcon: "text-white/70",
+        selectedBg: "bg-[#0D5EBA]",
+        selectedText: "text-white",
+        selectedBorder: "",
+        selectedIcon: "text-white",
+        hoverBg: "hover:bg-[#0D5EBA]/50",
+        sectionTitle: "text-[#B6D8FF]",
+        divider: "border-[#80BBFF]",
+        badgeDefault: "bg-grey-100 text-grey-700",
+        badgeSelected: "bg-grey-100 text-grey-700",
+    },
+    "dark-blue": {
+        container: "bg-[#04326B]",
+        defaultText: "text-[#C6DDF7]",
+        defaultIcon: "text-[#C6DDF7]/70",
+        selectedBg: "bg-[#034592]",
+        selectedText: "text-white",
+        selectedBorder: "",
+        selectedIcon: "text-white",
+        hoverBg: "hover:bg-[#034592]/50",
+        sectionTitle: "text-[#E3EFFC]",
+        divider: "border-[#80BBFF]",
+        badgeDefault: "bg-grey-100 text-grey-700",
+        badgeSelected: "bg-grey-100 text-grey-700",
+    },
+    "dark-grey": {
+        container: "bg-[#101928]",
+        defaultText: "text-[#F0F2F5]",
+        defaultIcon: "text-[#F0F2F5]/70",
+        selectedBg: "bg-[#1D2739]",
+        selectedText: "text-white",
+        selectedBorder: "",
+        selectedIcon: "text-white",
+        hoverBg: "hover:bg-[#1D2739]/50",
+        sectionTitle: "text-[#98A2B3]",
+        divider: "border-[#344054]",
+        badgeDefault: "bg-grey-100 text-grey-700",
+        badgeSelected: "bg-grey-100 text-grey-700",
+    },
+};
+const SidebarMenuContext = createContext(null);
+export function useSidebarMenuContext() {
+    const ctx = useContext(SidebarMenuContext);
+    if (!ctx)
+        throw new Error("SidebarMenuItem / SidebarMenuSection must be used within SidebarMenu");
+    return ctx;
+}
+// ─── Component ────────────────────────────────────────────────────
+export const SidebarMenu = forwardRef(({ value, defaultValue = "", onValueChange, collapsed = false, theme = "light", children, className, ...rest }, ref) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const activeValue = value ?? internalValue;
+    const onSelect = useCallback((val) => {
+        if (value === undefined)
+            setInternalValue(val);
+        onValueChange?.(val);
+    }, [value, onValueChange]);
+    const ts = sidebarThemeStyles[theme];
+    return (_jsx(SidebarMenuContext.Provider, { value: { activeValue, onSelect, collapsed, theme }, children: _jsx("nav", { ref: ref, "aria-label": "Main navigation", className: cn("flex flex-col gap-3 overflow-y-auto rounded-xl py-6", ts.container, collapsed ? "w-[82px] items-center px-3" : "w-[272px] px-4", className), ...rest, children: children }) }));
+});
+SidebarMenu.displayName = "SidebarMenu";

package/dist/components/SidebarMenu/SidebarMenuItem.cjs

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarMenuItem = exports.SidebarMenuSubItem = void 0;
+exports.SidebarMenuSub = SidebarMenuSub;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const cn_1 = require("../../utils/cn.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+const resolveIcon_1 = require("../../utils/resolveIcon.cjs");
+const SidebarMenu_1 = require("./SidebarMenu.cjs");
+function SidebarMenuSub({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1", children: children });
+}
+SidebarMenuSub.displayName = "SidebarMenuSub";
+exports.SidebarMenuSubItem = (0, react_1.forwardRef)(({ value, children, className, ...rest }, ref) => {
+    const { activeValue, onSelect, theme } = (0, SidebarMenu_1.useSidebarMenuContext)();
+    const isActive = activeValue === value;
+    const ts = SidebarMenu_1.sidebarThemeStyles[theme];
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", role: "menuitem", onClick: () => onSelect(value), className: (0, cn_1.cn)("flex w-full cursor-pointer items-center rounded py-3 pl-12 pr-4 text-left text-body-sm transition-colors", isActive
+            ? (0, cn_1.cn)(ts.selectedBg, "font-medium", ts.selectedText)
+            : (0, cn_1.cn)(ts.defaultText, ts.hoverBg), className), ...rest, children: children }));
+});
+exports.SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+exports.SidebarMenuItem = (0, react_1.forwardRef)(({ value, icon, badge, disabled = false, label, children, className, ...rest }, ref) => {
+    const { activeValue, onSelect, collapsed, theme } = (0, SidebarMenu_1.useSidebarMenuContext)();
+    const ts = SidebarMenu_1.sidebarThemeStyles[theme];
+    const isActive = activeValue === value;
+    // Detect if this item has a SidebarMenuSub child (expandable)
+    let labelContent = null;
+    let subMenuContent = null;
+    react_1.Children.forEach(children, (child) => {
+        if ((0, react_1.isValidElement)(child) && child.type === SidebarMenuSub) {
+            subMenuContent = child;
+        }
+        else {
+            labelContent = child;
+        }
+    });
+    const isExpandable = subMenuContent !== null;
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // Check if any sub-item is active (to keep parent highlighted)
+    let hasActiveSub = false;
+    if (isExpandable && (0, react_1.isValidElement)(subMenuContent)) {
+        react_1.Children.forEach(subMenuContent.props.children, (child) => {
+            if ((0, react_1.isValidElement)(child) &&
+                child.props.value === activeValue) {
+                hasActiveSub = true;
+            }
+        });
+    }
+    const highlighted = isActive || hasActiveSub;
+    const handleClick = () => {
+        if (disabled)
+            return;
+        if (isExpandable) {
+            setOpen((prev) => !prev);
+        }
+        else {
+            onSelect(value);
+        }
+    };
+    const resolvedIcon = (0, resolveIcon_1.resolveIcon)(icon, "md");
+    // The collapsed rail scrolls (overflow-y-auto), which also clips horizontally, so
+    // an absolutely positioned flyout is cut off. Render it in a portal anchored to the
+    // trigger instead, and close it on outside pointer or Escape.
+    const triggerRef = (0, react_1.useRef)(null);
+    const flyoutRef = (0, react_1.useRef)(null);
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    const [anchor, setAnchor] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => setMounted(true), []);
+    const place = (0, react_1.useCallback)(() => {
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (rect)
+            setAnchor({ top: rect.top, left: rect.right + 8 });
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!collapsed || !open || !isExpandable)
+            return;
+        place();
+        const onScroll = () => place();
+        window.addEventListener("scroll", onScroll, true);
+        window.addEventListener("resize", onScroll);
+        const onPointer = (event) => {
+            const target = event.target;
+            if (!triggerRef.current?.contains(target) && !flyoutRef.current?.contains(target))
+                setOpen(false);
+        };
+        const onKey = (event) => {
+            if (event.key !== "Escape")
+                return;
+            setOpen(false);
+            triggerRef.current?.focus();
+        };
+        document.addEventListener("pointerdown", onPointer);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("scroll", onScroll, true);
+            window.removeEventListener("resize", onScroll);
+            document.removeEventListener("pointerdown", onPointer);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [collapsed, open, isExpandable, place]);
+    // A collapsed item shows only an icon, so it needs an explicit name: an
+    // element child such as <span>Home</span> cannot serve as one.
+    const compactName = label ?? (typeof labelContent === "string" ? labelContent : undefined);
+    // Collapsed mode: icon only, with nested destinations reachable via a flyout
+    // rather than being dropped entirely.
+    if (collapsed) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("button", { ref: (node) => {
+                        triggerRef.current = node;
+                        if (typeof ref === "function")
+                            ref(node);
+                        else if (ref)
+                            ref.current = node;
+                    }, type: "button", role: "menuitem", disabled: disabled, onClick: handleClick, "aria-label": compactName, "aria-expanded": isExpandable ? open : undefined, "aria-haspopup": isExpandable ? "menu" : undefined, className: (0, cn_1.cn)("flex size-11 cursor-pointer items-center justify-center rounded transition-colors", highlighted ? (0, cn_1.cn)(ts.selectedBg, ts.selectedIcon) : (0, cn_1.cn)(ts.defaultIcon, ts.hoverBg), disabled && "pointer-events-none opacity-50", className), ...rest, children: resolvedIcon }), isExpandable &&
+                    open &&
+                    mounted &&
+                    anchor &&
+                    (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: flyoutRef, role: "menu", "aria-label": compactName, style: { top: anchor.top, left: anchor.left }, className: (0, cn_1.cn)("fixed z-50 min-w-[200px] rounded-lg p-2 shadow-soft-sm", "border border-black/10 dark:border-white/15", ts.container), children: [compactName && ((0, jsx_runtime_1.jsx)("p", { className: (0, cn_1.cn)("px-3 pb-1 text-body-xs font-medium", ts.defaultText), children: compactName })), subMenuContent] }), document.body)] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", role: "menuitem", "aria-expanded": isExpandable ? open : undefined, "aria-haspopup": isExpandable ? "menu" : undefined, disabled: disabled, onClick: handleClick, className: (0, cn_1.cn)("flex w-full cursor-pointer items-center gap-1 rounded py-3 px-4 text-left text-body-sm transition-colors", highlighted
+                    ? (0, cn_1.cn)(ts.selectedBg, ts.selectedBorder, "font-medium", ts.selectedText)
+                    : (0, cn_1.cn)(ts.defaultText, ts.hoverBg), disabled && "pointer-events-none opacity-50", className), ...rest, children: [resolvedIcon && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("shrink-0", highlighted ? ts.selectedIcon : ts.defaultIcon), children: resolvedIcon })), (0, jsx_runtime_1.jsx)("span", { className: "flex-1 truncate", children: labelContent }), badge != null && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("ml-auto shrink-0 rounded-[10px] px-2 text-body-xs font-medium", highlighted ? ts.badgeSelected : ts.badgeDefault), children: badge })), isExpandable && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: open ? "chevron-up" : "chevron-down", size: "sm", "aria-hidden": "true", className: (0, cn_1.cn)("ml-1 shrink-0 transition-transform", highlighted ? ts.selectedIcon : ts.defaultIcon) }))] }), isExpandable && open && (0, jsx_runtime_1.jsx)("div", { className: "mt-1", children: subMenuContent })] }));
+});
+exports.SidebarMenuItem.displayName = "SidebarMenuItem";

package/dist/components/SidebarMenu/SidebarMenuItem.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState, Children, isValidElement, } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../utils/cn.js";
+import { Icon } from "../Icon/index.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+import { useSidebarMenuContext, sidebarThemeStyles } from "./SidebarMenu.js";
+export function SidebarMenuSub({ children }) {
+    return _jsx("div", { className: "flex flex-col gap-1", children: children });
+}
+SidebarMenuSub.displayName = "SidebarMenuSub";
+export const SidebarMenuSubItem = forwardRef(({ value, children, className, ...rest }, ref) => {
+    const { activeValue, onSelect, theme } = useSidebarMenuContext();
+    const isActive = activeValue === value;
+    const ts = sidebarThemeStyles[theme];
+    return (_jsx("button", { ref: ref, type: "button", role: "menuitem", onClick: () => onSelect(value), className: cn("flex w-full cursor-pointer items-center rounded py-3 pl-12 pr-4 text-left text-body-sm transition-colors", isActive
+            ? cn(ts.selectedBg, "font-medium", ts.selectedText)
+            : cn(ts.defaultText, ts.hoverBg), className), ...rest, children: children }));
+});
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+export const SidebarMenuItem = forwardRef(({ value, icon, badge, disabled = false, label, children, className, ...rest }, ref) => {
+    const { activeValue, onSelect, collapsed, theme } = useSidebarMenuContext();
+    const ts = sidebarThemeStyles[theme];
+    const isActive = activeValue === value;
+    // Detect if this item has a SidebarMenuSub child (expandable)
+    let labelContent = null;
+    let subMenuContent = null;
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === SidebarMenuSub) {
+            subMenuContent = child;
+        }
+        else {
+            labelContent = child;
+        }
+    });
+    const isExpandable = subMenuContent !== null;
+    const [open, setOpen] = useState(false);
+    // Check if any sub-item is active (to keep parent highlighted)
+    let hasActiveSub = false;
+    if (isExpandable && isValidElement(subMenuContent)) {
+        Children.forEach(subMenuContent.props.children, (child) => {
+            if (isValidElement(child) &&
+                child.props.value === activeValue) {
+                hasActiveSub = true;
+            }
+        });
+    }
+    const highlighted = isActive || hasActiveSub;
+    const handleClick = () => {
+        if (disabled)
+            return;
+        if (isExpandable) {
+            setOpen((prev) => !prev);
+        }
+        else {
+            onSelect(value);
+        }
+    };
+    const resolvedIcon = resolveIcon(icon, "md");
+    // The collapsed rail scrolls (overflow-y-auto), which also clips horizontally, so
+    // an absolutely positioned flyout is cut off. Render it in a portal anchored to the
+    // trigger instead, and close it on outside pointer or Escape.
+    const triggerRef = useRef(null);
+    const flyoutRef = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    const [anchor, setAnchor] = useState(null);
+    useEffect(() => setMounted(true), []);
+    const place = useCallback(() => {
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (rect)
+            setAnchor({ top: rect.top, left: rect.right + 8 });
+    }, []);
+    useLayoutEffect(() => {
+        if (!collapsed || !open || !isExpandable)
+            return;
+        place();
+        const onScroll = () => place();
+        window.addEventListener("scroll", onScroll, true);
+        window.addEventListener("resize", onScroll);
+        const onPointer = (event) => {
+            const target = event.target;
+            if (!triggerRef.current?.contains(target) && !flyoutRef.current?.contains(target))
+                setOpen(false);
+        };
+        const onKey = (event) => {
+            if (event.key !== "Escape")
+                return;
+            setOpen(false);
+            triggerRef.current?.focus();
+        };
+        document.addEventListener("pointerdown", onPointer);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("scroll", onScroll, true);
+            window.removeEventListener("resize", onScroll);
+            document.removeEventListener("pointerdown", onPointer);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [collapsed, open, isExpandable, place]);
+    // A collapsed item shows only an icon, so it needs an explicit name: an
+    // element child such as <span>Home</span> cannot serve as one.
+    const compactName = label ?? (typeof labelContent === "string" ? labelContent : undefined);
+    // Collapsed mode: icon only, with nested destinations reachable via a flyout
+    // rather than being dropped entirely.
+    if (collapsed) {
+        return (_jsxs("div", { className: "relative", children: [_jsx("button", { ref: (node) => {
+                        triggerRef.current = node;
+                        if (typeof ref === "function")
+                            ref(node);
+                        else if (ref)
+                            ref.current = node;
+                    }, type: "button", role: "menuitem", disabled: disabled, onClick: handleClick, "aria-label": compactName, "aria-expanded": isExpandable ? open : undefined, "aria-haspopup": isExpandable ? "menu" : undefined, className: cn("flex size-11 cursor-pointer items-center justify-center rounded transition-colors", highlighted ? cn(ts.selectedBg, ts.selectedIcon) : cn(ts.defaultIcon, ts.hoverBg), disabled && "pointer-events-none opacity-50", className), ...rest, children: resolvedIcon }), isExpandable &&
+                    open &&
+                    mounted &&
+                    anchor &&
+                    createPortal(_jsxs("div", { ref: flyoutRef, role: "menu", "aria-label": compactName, style: { top: anchor.top, left: anchor.left }, className: cn("fixed z-50 min-w-[200px] rounded-lg p-2 shadow-soft-sm", "border border-black/10 dark:border-white/15", ts.container), children: [compactName && (_jsx("p", { className: cn("px-3 pb-1 text-body-xs font-medium", ts.defaultText), children: compactName })), subMenuContent] }), document.body)] }));
+    }
+    return (_jsxs("div", { children: [_jsxs("button", { ref: ref, type: "button", role: "menuitem", "aria-expanded": isExpandable ? open : undefined, "aria-haspopup": isExpandable ? "menu" : undefined, disabled: disabled, onClick: handleClick, className: cn("flex w-full cursor-pointer items-center gap-1 rounded py-3 px-4 text-left text-body-sm transition-colors", highlighted
+                    ? cn(ts.selectedBg, ts.selectedBorder, "font-medium", ts.selectedText)
+                    : cn(ts.defaultText, ts.hoverBg), disabled && "pointer-events-none opacity-50", className), ...rest, children: [resolvedIcon && (_jsx("span", { className: cn("shrink-0", highlighted ? ts.selectedIcon : ts.defaultIcon), children: resolvedIcon })), _jsx("span", { className: "flex-1 truncate", children: labelContent }), badge != null && (_jsx("span", { className: cn("ml-auto shrink-0 rounded-[10px] px-2 text-body-xs font-medium", highlighted ? ts.badgeSelected : ts.badgeDefault), children: badge })), isExpandable && (_jsx(Icon, { name: open ? "chevron-up" : "chevron-down", size: "sm", "aria-hidden": "true", className: cn("ml-1 shrink-0 transition-transform", highlighted ? ts.selectedIcon : ts.defaultIcon) }))] }), isExpandable && open && _jsx("div", { className: "mt-1", children: subMenuContent })] }));
+});
+SidebarMenuItem.displayName = "SidebarMenuItem";

package/dist/components/SidebarMenu/SidebarMenuSection.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarMenuSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const SidebarMenu_1 = require("./SidebarMenu.cjs");
+// ─── Component ────────────────────────────────────────────────────
+exports.SidebarMenuSection = (0, react_1.forwardRef)(({ title, showDivider = true, children, className, ...rest }, ref) => {
+    const { collapsed, theme } = (0, SidebarMenu_1.useSidebarMenuContext)();
+    const ts = SidebarMenu_1.sidebarThemeStyles[theme];
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("flex flex-col", className), ...rest, children: [title && !collapsed && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("mb-2 px-4 text-body-xs font-medium uppercase tracking-wider", ts.sectionTitle), children: title })), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1", role: "menu", children: children }), showDivider && (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("mt-3 border-b", ts.divider) })] }));
+});
+exports.SidebarMenuSection.displayName = "SidebarMenuSection";

package/dist/components/SidebarMenu/SidebarMenuSection.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { useSidebarMenuContext, sidebarThemeStyles } from "./SidebarMenu.js";
+// ─── Component ────────────────────────────────────────────────────
+export const SidebarMenuSection = forwardRef(({ title, showDivider = true, children, className, ...rest }, ref) => {
+    const { collapsed, theme } = useSidebarMenuContext();
+    const ts = sidebarThemeStyles[theme];
+    return (_jsxs("div", { ref: ref, className: cn("flex flex-col", className), ...rest, children: [title && !collapsed && (_jsx("span", { className: cn("mb-2 px-4 text-body-xs font-medium uppercase tracking-wider", ts.sectionTitle), children: title })), _jsx("div", { className: "flex flex-col gap-1", role: "menu", children: children }), showDivider && _jsx("div", { className: cn("mt-3 border-b", ts.divider) })] }));
+});
+SidebarMenuSection.displayName = "SidebarMenuSection";

package/dist/components/SidebarMenu/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarMenuSection = exports.SidebarMenuSubItem = exports.SidebarMenuSub = exports.SidebarMenuItem = exports.SidebarMenu = void 0;
+var SidebarMenu_1 = require("./SidebarMenu.cjs");
+Object.defineProperty(exports, "SidebarMenu", { enumerable: true, get: function () { return SidebarMenu_1.SidebarMenu; } });
+var SidebarMenuItem_1 = require("./SidebarMenuItem.cjs");
+Object.defineProperty(exports, "SidebarMenuItem", { enumerable: true, get: function () { return SidebarMenuItem_1.SidebarMenuItem; } });
+var SidebarMenuItem_2 = require("./SidebarMenuItem.cjs");
+Object.defineProperty(exports, "SidebarMenuSub", { enumerable: true, get: function () { return SidebarMenuItem_2.SidebarMenuSub; } });
+Object.defineProperty(exports, "SidebarMenuSubItem", { enumerable: true, get: function () { return SidebarMenuItem_2.SidebarMenuSubItem; } });
+var SidebarMenuSection_1 = require("./SidebarMenuSection.cjs");
+Object.defineProperty(exports, "SidebarMenuSection", { enumerable: true, get: function () { return SidebarMenuSection_1.SidebarMenuSection; } });

package/dist/components/SidebarMenu/index.js

@@ -0,0 +1,4 @@
+export { SidebarMenu } from "./SidebarMenu.js";
+export { SidebarMenuItem } from "./SidebarMenuItem.js";
+export { SidebarMenuSub, SidebarMenuSubItem } from "./SidebarMenuItem.js";
+export { SidebarMenuSection } from "./SidebarMenuSection.js";