@axzydev/axzy_ui_system 1.4.3 → 1.4.4

package/dist/index.d.cts

@@ -3100,8 +3100,19 @@ interface ITSidebarProps {
     navigationItems: ITNavigationItem[];
     /** Whether the sidebar is collapsed to icon-only mode. */
     isCollapsed?: boolean;
-    /** Callback when the user toggles collapse via the toggle button. */
+    /**
+     * Callback that flips `isCollapsed`. `ITLayout` calls it from the top bar's
+     * menu button when `expandOnHover` is `false`; the sidebar itself calls it
+     * when a collapsed parent item is clicked, so its submenu can be shown.
+     */
     onToggleCollapse?: () => void;
+    /**
+     * How the collapsed rail opens. `true`: it expands over the content while
+     * the pointer is on it (no button). `false`: it stays an icon-only rail —
+     * the item name shows in a tooltip on hover — and it only opens through
+     * `onToggleCollapse` (the top bar's menu button in `ITLayout`). @default true
+     */
+    expandOnHover?: boolean;
     /** Force sidebar visible on mobile breakpoints. */
     visibleOnMobile?: boolean;
     /** Callback when a top-level navigation item is clicked. Receives the item. */
@@ -3161,7 +3172,7 @@ interface ITSidebarProps {
  * />
  * ```
  */
-declare function ITSidebar({ navigationItems, isCollapsed, className, visibleOnMobile, onItemClick, onSubItemClick, subitemConnector, header, notification, brand, }: ITSidebarProps): react_jsx_runtime.JSX.Element;
+declare function ITSidebar({ navigationItems, isCollapsed, className, visibleOnMobile, onItemClick, onSubItemClick, subitemConnector, header, notification, brand, onToggleCollapse, expandOnHover, }: ITSidebarProps): react_jsx_runtime.JSX.Element;
 
 /** Skeleton shape variant: "text" (line) | "circular" (avatar/icon) | "rectangular" (card/image). */
 type SkeletonVariant = "text" | "circular" | "rectangular";
@@ -3782,6 +3793,12 @@ interface ITTopBarProps {
     showMobileMenuButton?: boolean;
     /** Callback fired when the mobile menu toggle button is clicked. */
     onToggleMobileMenu?: () => void;
+    /**
+     * Keeps the menu toggle button visible from the `lg` breakpoint up as well
+     * (it is mobile-only by default). `ITLayout` turns it on when the sidebar
+     * collapses by button instead of hover (`sidebar.expandOnHover === false`). @default false
+     */
+    showDesktopMenuButton?: boolean;
     /**
      * Hides the logo and `logoText` from the `lg` breakpoint up and left-aligns
      * `centerContent`. Use it when the brand already lives somewhere else (e.g.

package/dist/index.d.ts

@@ -3100,8 +3100,19 @@ interface ITSidebarProps {
     navigationItems: ITNavigationItem[];
     /** Whether the sidebar is collapsed to icon-only mode. */
     isCollapsed?: boolean;
-    /** Callback when the user toggles collapse via the toggle button. */
+    /**
+     * Callback that flips `isCollapsed`. `ITLayout` calls it from the top bar's
+     * menu button when `expandOnHover` is `false`; the sidebar itself calls it
+     * when a collapsed parent item is clicked, so its submenu can be shown.
+     */
     onToggleCollapse?: () => void;
+    /**
+     * How the collapsed rail opens. `true`: it expands over the content while
+     * the pointer is on it (no button). `false`: it stays an icon-only rail —
+     * the item name shows in a tooltip on hover — and it only opens through
+     * `onToggleCollapse` (the top bar's menu button in `ITLayout`). @default true
+     */
+    expandOnHover?: boolean;
     /** Force sidebar visible on mobile breakpoints. */
     visibleOnMobile?: boolean;
     /** Callback when a top-level navigation item is clicked. Receives the item. */
@@ -3161,7 +3172,7 @@ interface ITSidebarProps {
  * />
  * ```
  */
-declare function ITSidebar({ navigationItems, isCollapsed, className, visibleOnMobile, onItemClick, onSubItemClick, subitemConnector, header, notification, brand, }: ITSidebarProps): react_jsx_runtime.JSX.Element;
+declare function ITSidebar({ navigationItems, isCollapsed, className, visibleOnMobile, onItemClick, onSubItemClick, subitemConnector, header, notification, brand, onToggleCollapse, expandOnHover, }: ITSidebarProps): react_jsx_runtime.JSX.Element;
 
 /** Skeleton shape variant: "text" (line) | "circular" (avatar/icon) | "rectangular" (card/image). */
 type SkeletonVariant = "text" | "circular" | "rectangular";
@@ -3782,6 +3793,12 @@ interface ITTopBarProps {
     showMobileMenuButton?: boolean;
     /** Callback fired when the mobile menu toggle button is clicked. */
     onToggleMobileMenu?: () => void;
+    /**
+     * Keeps the menu toggle button visible from the `lg` breakpoint up as well
+     * (it is mobile-only by default). `ITLayout` turns it on when the sidebar
+     * collapses by button instead of hover (`sidebar.expandOnHover === false`). @default false
+     */
+    showDesktopMenuButton?: boolean;
     /**
      * Hides the logo and `logoText` from the `lg` breakpoint up and left-aligns
      * `centerContent`. Use it when the brand already lives somewhere else (e.g.

package/dist/index.js

@@ -7606,7 +7606,9 @@ function ITSidebar({
   subitemConnector = "dot",
   header,
   notification,
-  brand
+  brand,
+  onToggleCollapse,
+  expandOnHover = true
 }) {
   const flat = useITFlatAppearance();
   const [expandedItems, setExpandedItems] = useState27(/* @__PURE__ */ new Set());
@@ -7662,6 +7664,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);
@@ -7670,14 +7675,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__ */ jsx56("li", { className: "relative", children: /* @__PURE__ */ jsxs43(
     "button",
     {
@@ -7690,7 +7698,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"
@@ -7708,7 +7716,7 @@ function ITSidebar({
         }
       },
       children: [
-        subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ jsx56(
+        subitem.isActive && subitemConnector === "|" && !flat && /* @__PURE__ */ jsx56(
           "div",
           {
             className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all",
@@ -7872,10 +7880,11 @@ function ITSidebar({
         ),
         header && !isSidebarCollapsed && /* @__PURE__ */ jsx56("div", { className: "px-4 pt-4 pb-1 flex-shrink-0", children: header }),
         notification && /* @__PURE__ */ jsx56("div", { className: "px-4 pt-3 flex-shrink-0", children: renderNotification() }),
-        /* @__PURE__ */ jsx56("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__ */ jsx56("ul", { className: "space-y-1", children: navigationItems.map((item) => {
+        /* @__PURE__ */ jsx56("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__ */ jsx56("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__ */ jsxs43("li", { className: "relative group/navitem", children: [
             /* @__PURE__ */ jsxs43(
               "div",
@@ -7888,18 +7897,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) => {
@@ -7909,7 +7918,7 @@ function ITSidebar({
                   }
                 },
                 children: [
-                  item.isActive && !isSidebarCollapsed && !flat && /* @__PURE__ */ jsx56(
+                  active && !isSidebarCollapsed && !flat && /* @__PURE__ */ jsx56(
                     "div",
                     {
                       className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
@@ -7922,10 +7931,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
                       }
@@ -7936,9 +7945,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
                       }
@@ -7948,7 +7957,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__ */ jsx56(FaChevronDown4, { className: "w-3 h-3" })
                     }
                   ),
@@ -7969,7 +7978,21 @@ function ITSidebar({
                 ]
               }
             ),
-            isSidebarCollapsed && /* @__PURE__ */ jsxs43(
+            isSidebarCollapsed && flat && /* @__PURE__ */ jsx56(
+              "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__ */ jsxs43(
               "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)]",
@@ -8011,7 +8034,7 @@ function ITSidebar({
             !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx56("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__ */ jsx56(
               "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"
                 },
@@ -10025,7 +10048,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("");
@@ -10046,7 +10070,9 @@ function ITTopBar({
           showMobileMenuButton && /* @__PURE__ */ jsx68(
             "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)"
               },
@@ -10224,7 +10250,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__ */ jsx69(
     ITTopBar,
@@ -10232,7 +10263,8 @@ function ITLayout({
       ...topBar,
       hideBrandOnDesktop: sidebarFullHeight || topBar.hideBrandOnDesktop,
       showMobileMenuButton: true,
-      onToggleMobileMenu: () => setMobileSidebarOpen((v) => !v)
+      showDesktopMenuButton: toggleByButton || topBar.showDesktopMenuButton,
+      onToggleMobileMenu: handleMenuButton
     }
   );
   const desktopSidebar = (