@scripso-homepad/ui 0.4.25 → 0.4.27

package/dist/web/index.js

@@ -1,4 +1,4 @@
-import { __commonJS, __require, __toESM, Input, Button } from '../chunk-N73KHOZ4.js';
+import { __commonJS, __require, __toESM, Input, Button } from '../chunk-AOBKWDGW.js';
 import { ChevronsUpDown, Search, LogOut, PanelLeftClose, PanelLeftOpen, X, Menu, ChevronLeft, ChevronRight } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -7370,7 +7370,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment4 = 7;
+        var Fragment3 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -8525,7 +8525,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment4:
+            case Fragment3:
               return "Fragment";
             case HostComponent:
               return type;
@@ -16950,7 +16950,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment4) {
+            if (current2 === null || current2.tag !== Fragment3) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -17353,7 +17353,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment4) {
+                  if (child.tag === Fragment3) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -22827,7 +22827,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment4:
+            case Fragment3:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23099,7 +23099,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment4:
+            case Fragment3:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -27351,7 +27351,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment4, elements, key, mode);
+          var fiber = createFiber(Fragment3, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -28932,9 +28932,9 @@ function SidebarNavItem({ item, isOpen, isActive, onNavigate }) {
       tabIndex: item.disabled ? -1 : void 0,
       className: cn(
         "relative flex items-center rounded-xl px-4 py-3 transition-[background-color,color,gap,padding] duration-300 ease-in-out",
-        isOpen ? "w-full gap-4" : "justify-center gap-0 px-3",
+        isOpen ? "w-full gap-4" : "w-full justify-center gap-0 px-3",
         item.disabled && "pointer-events-none opacity-50",
-        isActive ? "bg-black/12 text-white" : "text-navy-100 hover:bg-white/5"
+        isActive ? "bg-black/12 text-white shadow-none" : "text-navy-100 shadow-none hover:bg-white/5"
       ),
       children: [
         /* @__PURE__ */ jsx(
@@ -28969,6 +28969,7 @@ function getInitials(fullName, email) {
   }
   return email.slice(0, 2).toUpperCase();
 }
+var avatarCircleClassName = "flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5";
 function SidebarUserCard({
   user,
   isOpen,
@@ -28977,39 +28978,110 @@ function SidebarUserCard({
   className
 }) {
   const initials = user.initials ?? getInitials(user.fullName, user.email);
+  const [logoutOpen, setLogoutOpen] = useState(false);
+  const rootRef = useRef(null);
+  const logoutMenuId = useId();
+  useEffect(() => {
+    if (isOpen) {
+      setLogoutOpen(false);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen || !logoutOpen) {
+      return;
+    }
+    function handlePointerDown(event) {
+      if (rootRef.current && !rootRef.current.contains(event.target)) {
+        setLogoutOpen(false);
+      }
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        setLogoutOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, logoutOpen]);
+  const avatar = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(avatarCircleClassName, "typography-14 font-bold text-white"),
+      "aria-hidden": true,
+      children: initials
+    }
+  );
+  if (!isOpen) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: cn("flex w-full flex-col items-center gap-2", className),
+        children: [
+          logoutOpen ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              id: logoutMenuId,
+              onClick: () => {
+                setLogoutOpen(false);
+                onLogout?.();
+              },
+              className: cn(
+                avatarCircleClassName,
+                "cursor-pointer bg-black/20 text-white",
+                "transition-[background-color,transform] duration-300 ease-in-out",
+                "hover:bg-white/10 active:scale-95"
+              ),
+              "aria-label": logoutLabel,
+              children: /* @__PURE__ */ jsx(LogOut, { size: 20, strokeWidth: 1.75 })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setLogoutOpen((open) => !open),
+              className: "flex cursor-pointer items-center justify-center transition-transform duration-300 ease-in-out active:scale-95",
+              "aria-expanded": logoutOpen,
+              "aria-haspopup": "true",
+              "aria-controls": logoutOpen ? logoutMenuId : void 0,
+              "aria-label": user.fullName,
+              children: avatar
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex w-full items-center rounded-xl transition-[background-color,justify-content,gap,padding] duration-300 ease-in-out",
-        isOpen ? "justify-between gap-3 bg-black/12 p-3" : "justify-center px-3 py-3",
+        "flex w-full items-center justify-between gap-3 rounded-xl bg-black/12 p-3",
+        "transition-[background-color,justify-content,gap,padding] duration-300 ease-in-out",
         className
       ),
       children: [
+        avatar,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate typography-14 font-bold text-white", children: user.fullName }),
+          /* @__PURE__ */ jsx("p", { className: "truncate typography-12 text-storm-gray-100", children: user.email })
+        ] }),
         /* @__PURE__ */ jsx(
-          "div",
+          "button",
           {
-            className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 typography-14 font-bold text-white",
-            "aria-hidden": true,
-            children: initials
+            type: "button",
+            onClick: () => onLogout?.(),
+            className: "shrink-0 cursor-pointer text-navy-150 transition-[opacity,transform] duration-300 ease-in-out hover:opacity-80 active:scale-95",
+            "aria-label": logoutLabel,
+            children: /* @__PURE__ */ jsx(LogOut, { size: 20, strokeWidth: 1.75 })
           }
-        ),
-        isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
-            /* @__PURE__ */ jsx("p", { className: "truncate typography-14 font-bold text-white", children: user.fullName }),
-            /* @__PURE__ */ jsx("p", { className: "truncate typography-12 text-storm-gray-100", children: user.email })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onLogout?.(),
-              className: "shrink-0 cursor-pointer text-navy-150 transition-[opacity,transform] duration-300 ease-in-out hover:opacity-80 active:scale-95",
-              "aria-label": logoutLabel,
-              children: /* @__PURE__ */ jsx(LogOut, { size: 20, strokeWidth: 1.75 })
-            }
-          )
-        ] }) : null
+        )
       ]
     }
   );
@@ -29167,18 +29239,8 @@ function Sidebar({
               ]
             }
           ),
-          /* @__PURE__ */ jsx("nav", { className: "flex flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden", children: visibleNavItems.map((item) => /* @__PURE__ */ jsx(
-            SidebarNavItem,
-            {
-              item,
-              isOpen: isExpanded,
-              isActive: isNavItemActive(pathname, item),
-              onNavigate: handleNavItemNavigate
-            },
-            item.to
-          )) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
-            visibleFooterNavItems.map((item) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("nav", { className: "flex w-full min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto", children: [
+            visibleNavItems.map((item) => /* @__PURE__ */ jsx(
               SidebarNavItem,
               {
                 item,
@@ -29188,15 +29250,27 @@ function Sidebar({
               },
               item.to
             )),
-            user ? /* @__PURE__ */ jsx(
-              SidebarUserCard,
-              {
-                user,
-                isOpen: isExpanded,
-                logoutLabel: labels.logout,
-                onLogout
-              }
-            ) : null
+            /* @__PURE__ */ jsxs("div", { className: "mt-auto flex w-full flex-col gap-2", children: [
+              visibleFooterNavItems.map((item) => /* @__PURE__ */ jsx(
+                SidebarNavItem,
+                {
+                  item,
+                  isOpen: isExpanded,
+                  isActive: isNavItemActive(pathname, item),
+                  onNavigate: handleNavItemNavigate
+                },
+                item.to
+              )),
+              user ? /* @__PURE__ */ jsx(
+                SidebarUserCard,
+                {
+                  user,
+                  isOpen: isExpanded,
+                  logoutLabel: labels.logout,
+                  onLogout
+                }
+              ) : null
+            ] })
           ] })
         ]
       }