@axzydev/axzy_ui_system 1.4.3 → 1.4.4

package/dist/index.cjs

@@ -7695,7 +7695,9 @@ function ITSidebar({
   subitemConnector = "dot",
   header,
   notification,
-  brand
+  brand,
+  onToggleCollapse,
+  expandOnHover = true
 }) {
   const flat = useITFlatAppearance();
   const [expandedItems, setExpandedItems] = (0, import_react35.useState)(/* @__PURE__ */ new Set());
@@ -7751,6 +7753,9 @@ function ITSidebar({
       });
     }
   }, [navigationItems]);
+  const isSidebarCollapsed = visibleOnMobile ? false : isCollapsed && !(expandOnHover && isHovering);
+  const sidebarWidth = isSidebarCollapsed ? flat ? "w-[72px]" : "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
+  const fixedRail = isSidebarCollapsed && !expandOnHover;
   const toggleExpanded = (itemId) => {
     const newExpanded = new Set(expandedItems);
     if (newExpanded.has(itemId)) newExpanded.delete(itemId);
@@ -7759,14 +7764,17 @@ function ITSidebar({
   };
   const handleItemClick = (item) => {
     if (item.subitems && item.subitems.length > 0) {
-      toggleExpanded(item.id);
+      if (isSidebarCollapsed && !expandOnHover) {
+        setExpandedItems((prev) => new Set(prev).add(item.id));
+        onToggleCollapse?.();
+      } else {
+        toggleExpanded(item.id);
+      }
     } else {
       if (item.action) item.action();
       if (onItemClick) onItemClick(item);
     }
   };
-  const isSidebarCollapsed = visibleOnMobile ? false : !isHovering && isCollapsed;
-  const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
   const renderSubItem = (subitem) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("li", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "button",
     {
@@ -7779,7 +7787,7 @@ function ITSidebar({
       style: {
         color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
         backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
-        fontSize: "0.78rem",
+        fontSize: flat ? "0.84rem" : "0.78rem",
         fontWeight: subitem.isActive ? 600 : 500,
         letterSpacing: "0.01em",
         marginLeft: subitemConnector === "|" ? "-1px" : "0"
@@ -7797,7 +7805,7 @@ function ITSidebar({
         }
       },
       children: [
-        subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        subitem.isActive && subitemConnector === "|" && !flat && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "div",
           {
             className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all",
@@ -7961,10 +7969,11 @@ function ITSidebar({
         ),
         header && !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "px-4 pt-4 pb-1 flex-shrink-0", children: header }),
         notification && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "px-4 pt-3 flex-shrink-0", children: renderNotification() }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("nav", { "aria-label": "Componentes de la librer\xEDa", className: "flex-1 py-4 overflow-y-auto overflow-x-hidden custom-scrollbar px-4", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("ul", { className: "space-y-1", children: navigationItems.map((item) => {
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("nav", { "aria-label": "Componentes de la librer\xEDa", className: `flex-1 py-4 custom-scrollbar ${fixedRail ? "overflow-visible" : "overflow-y-auto overflow-x-hidden"} ${flat && isSidebarCollapsed ? "px-3" : "px-4"}`, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("ul", { className: "space-y-1", children: navigationItems.map((item) => {
           const hasSubmenu = !!item.subitems && item.subitems.length > 0;
           const submenuId = `it-sidebar-submenu-${item.id}`;
           const { className: badgeClassName, ...badgeRest } = item.badgeProps ?? {};
+          const active = !!item.isActive && !(flat && hasSubmenu && !isSidebarCollapsed);
           return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("li", { className: "relative group/navitem", children: [
             /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
               "div",
@@ -7977,18 +7986,18 @@ function ITSidebar({
                 className: `flex items-center cursor-pointer 
                   transition-all duration-300 ease-[cubic-bezier(0.2,0,0,1)]
                   rounded-xl relative overflow-visible
-                  ${isSidebarCollapsed ? "justify-center p-2 mb-1" : "justify-between px-3 py-2 mb-0.5"}
+                  ${isSidebarCollapsed ? flat ? "justify-center h-10 mb-1" : "justify-center p-2 mb-1" : "justify-between px-3 py-2 mb-0.5"}
                 `,
                 style: {
-                  backgroundColor: item.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
-                  boxShadow: item.isActive && !flat ? "var(--shadow-xs)" : "none",
-                  border: item.isActive && !flat ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "1px solid transparent"
+                  backgroundColor: active ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
+                  boxShadow: active && !flat ? "var(--shadow-xs)" : "none",
+                  border: active && !flat ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "1px solid transparent"
                 },
                 onMouseEnter: (e) => {
-                  if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
+                  if (!active) e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
                 },
                 onMouseLeave: (e) => {
-                  if (!item.isActive) e.currentTarget.style.backgroundColor = "transparent";
+                  if (!active) e.currentTarget.style.backgroundColor = "transparent";
                 },
                 onClick: () => handleItemClick(item),
                 onKeyDown: (e) => {
@@ -7998,7 +8007,7 @@ function ITSidebar({
                   }
                 },
                 children: [
-                  item.isActive && !isSidebarCollapsed && !flat && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  active && !isSidebarCollapsed && !flat && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                     "div",
                     {
                       className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
@@ -8011,10 +8020,10 @@ function ITSidebar({
                       {
                         className: `transition-all duration-300 flex-shrink-0 flex items-center justify-center`,
                         style: {
-                          color: item.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, #9ca3af)",
-                          opacity: item.isActive ? 1 : 0.8,
-                          fontSize: flat ? "1rem" : item.isActive ? "1.12rem" : "1.05rem",
-                          filter: item.isActive && !flat ? "drop-shadow(0 0 8px rgba(255,255,255,0.2))" : "none"
+                          color: active ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, #9ca3af)",
+                          opacity: active ? 1 : 0.8,
+                          fontSize: flat ? "1rem" : active ? "1.12rem" : "1.05rem",
+                          filter: active && !flat ? "drop-shadow(0 0 8px rgba(255,255,255,0.2))" : "none"
                         },
                         children: item.icon
                       }
@@ -8025,9 +8034,9 @@ function ITSidebar({
                         as: "span",
                         className: `transition-all duration-300 truncate tracking-wide`,
                         style: {
-                          color: item.isActive ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
+                          color: active ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
                           fontSize: flat ? "0.875rem" : "0.8rem",
-                          fontWeight: item.isActive ? "600" : "500"
+                          fontWeight: active ? "600" : "500"
                         },
                         children: item.label
                       }
@@ -8037,7 +8046,7 @@ function ITSidebar({
                     "div",
                     {
                       className: `flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`,
-                      style: { color: item.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 },
+                      style: { color: active ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 },
                       children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_fa26.FaChevronDown, { className: "w-3 h-3" })
                     }
                   ),
@@ -8058,7 +8067,21 @@ function ITSidebar({
                 ]
               }
             ),
-            isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+            isSidebarCollapsed && flat && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "div",
+              {
+                role: "tooltip",
+                className: "absolute left-full top-1/2 -translate-y-1/2 ml-3 px-2.5 py-1.5 rounded-lg whitespace-nowrap opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-opacity duration-150 pointer-events-none z-[70]",
+                style: {
+                  backgroundColor: "var(--it-sidebar-tooltip-bg, var(--color-secondary-900))",
+                  color: "var(--it-sidebar-tooltip-color, #ffffff)",
+                  fontSize: "0.78rem",
+                  fontWeight: 500
+                },
+                children: item.label
+              }
+            ),
+            isSidebarCollapsed && !flat && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
               "div",
               {
                 className: "absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-[70] min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]",
@@ -8100,7 +8123,7 @@ function ITSidebar({
             !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { id: submenuId, role: "group", "aria-label": item.label, className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[1000px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               "ul",
               {
-                className: "ml-4 flex flex-col gap-0 py-0.5",
+                className: `${flat && subitemConnector === "|" ? "ml-[21px] pl-2" : "ml-4"} flex flex-col gap-0 py-0.5`,
                 style: {
                   borderLeft: subitemConnector === "|" ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "none"
                 },
@@ -10095,7 +10118,8 @@ function ITTopBar({
   onToggleMobileMenu,
   navItems,
   onNavItemClick,
-  hideBrandOnDesktop = false
+  hideBrandOnDesktop = false,
+  showDesktopMenuButton = false
 }) {
   const flat = useITFlatAppearance();
   const initials = (userMenu?.userName ?? "").trim().split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
@@ -10116,7 +10140,9 @@ function ITTopBar({
           showMobileMenuButton && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             "button",
             {
-              className: "lg:hidden p-2.5 rounded-xl transition-colors duration-200",
+              type: "button",
+              "aria-label": "Men\xFA",
+              className: `${showDesktopMenuButton ? "" : "lg:hidden"} p-2.5 -ml-2.5 rounded-xl transition-colors duration-200`,
               style: {
                 color: "var(--it-topbar-icon, #64748b)"
               },
@@ -10294,7 +10320,12 @@ function ITLayout({
   const handleToggleCollapse = isControlled ? sidebar.onToggleCollapse ?? (() => {
   }) : () => setInternalCollapsed((v) => !v);
   const layoutTokens = theme.layout;
-  const reservedWidth = desktopCollapsed ? "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
+  const reservedWidth = desktopCollapsed ? flat ? "w-[72px]" : "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
+  const toggleByButton = sidebar.expandOnHover === false;
+  const handleMenuButton = () => {
+    if (toggleByButton && window.matchMedia("(min-width: 1024px)").matches) handleToggleCollapse();
+    else setMobileSidebarOpen((v) => !v);
+  };
   const brand = sidebarFullHeight ? sidebar.brand ?? { logo: topBar.logo, text: topBar.logoText } : sidebar.brand;
   const topBarNode = /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     ITTopBar,
@@ -10302,7 +10333,8 @@ function ITLayout({
       ...topBar,
       hideBrandOnDesktop: sidebarFullHeight || topBar.hideBrandOnDesktop,
       showMobileMenuButton: true,
-      onToggleMobileMenu: () => setMobileSidebarOpen((v) => !v)
+      showDesktopMenuButton: toggleByButton || topBar.showDesktopMenuButton,
+      onToggleMobileMenu: handleMenuButton
     }
   );
   const desktopSidebar = (