@axzydev/axzy_ui_system 1.4.3 → 1.4.5

package/src/components/organisms/sidebar/sidebar.tsx

@@ -68,6 +68,8 @@ export default function ITSidebar({
   header,
   notification,
   brand,
+  onToggleCollapse,
+  expandOnHover = true,
 }: ITSidebarProps) {
   // Flat appearance: plain surface, no glow/accent bar, narrower panel.
   const flat = useITFlatAppearance();
@@ -132,6 +134,13 @@ export default function ITSidebar({
     }
   }, [navigationItems]);
 
+  const isSidebarCollapsed = visibleOnMobile ? false : isCollapsed && !(expandOnHover && isHovering);
+  const sidebarWidth = isSidebarCollapsed
+    ? flat ? "w-[72px]" : "w-[88px]"
+    : flat ? "w-[248px]" : "w-[280px]";
+  // Icon-only rail that never expands on hover: names show in a tooltip.
+  const fixedRail = isSidebarCollapsed && !expandOnHover;
+
   const toggleExpanded = (itemId: string) => {
     const newExpanded = new Set(expandedItems);
     if (newExpanded.has(itemId)) newExpanded.delete(itemId);
@@ -141,15 +150,20 @@ export default function ITSidebar({
 
   const handleItemClick = (item: ITNavigationItem) => {
     if (item.subitems && item.subitems.length > 0) {
-      toggleExpanded(item.id);
+      if (isSidebarCollapsed && !expandOnHover) {
+        // Icon-only rail: there is no room for the submenu, so open the
+        // sidebar with this group expanded.
+        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: ITNavigationSubItem) => (
     <li key={subitem.id} className="relative">
@@ -163,7 +177,7 @@ export default 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',
@@ -181,7 +195,7 @@ export default function ITSidebar({
           }
         }}
       >
-        {subitem.isActive && subitemConnector === '|' && (
+        {subitem.isActive && subitemConnector === '|' && !flat && (
           <div
             className="absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all"
             style={{
@@ -357,12 +371,15 @@ export default function ITSidebar({
       )}
 
       {/* Navigation Items */}
-      <nav aria-label="Componentes de la librería" className="flex-1 py-4 overflow-y-auto overflow-x-hidden custom-scrollbar px-4">
+      <nav aria-label="Componentes de la librería" className={`flex-1 py-4 custom-scrollbar ${fixedRail ? "overflow-visible" : "overflow-y-auto overflow-x-hidden"} ${flat && isSidebarCollapsed ? "px-3" : "px-4"}`}>
         <ul className="space-y-1">
           {navigationItems.map((item) => {
             const hasSubmenu = !!item.subitems && item.subitems.length > 0;
             const submenuId = `it-sidebar-submenu-${item.id}`;
             const { className: badgeClassName, ...badgeRest } = item.badgeProps ?? {};
+            // Flat + expanded: a parent whose subitem is active stays plain; the
+            // subitem carries the highlight. Collapsed, the parent icon shows it.
+            const active = !!item.isActive && !(flat && hasSubmenu && !isSidebarCollapsed);
             return (
             <li key={item.id} className="relative group/navitem">
               <div
@@ -374,18 +391,18 @@ export default 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) => {
@@ -395,7 +412,7 @@ export default function ITSidebar({
                   }
                 }}
               >
-                {item.isActive && !isSidebarCollapsed && !flat && (
+                {active && !isSidebarCollapsed && !flat && (
                   <div
                     className="absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all"
                     style={{ backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))", boxShadow: "0 0 10px var(--it-sidebar-active-icon, var(--color-primary-500))" }}
@@ -407,10 +424,10 @@ export default function ITSidebar({
                     <div
                       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'
                       }}
                     >
                       {item.icon}
@@ -421,9 +438,9 @@ export default function ITSidebar({
                     <ITText 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'
                       }}
                     >
                       {item.label}
@@ -433,7 +450,7 @@ export default function ITSidebar({
 
                 {!isSidebarCollapsed && item.subitems && item.subitems.length > 0 && (
                   <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 }}>
                     <FaChevronDown className="w-3 h-3" />
                   </div>
                 )}
@@ -457,7 +474,21 @@ export default function ITSidebar({
               </div>
 
               {/* Glassmorphism Collapsed Tooltip / Submenu */}
-              {isSidebarCollapsed && (
+              {isSidebarCollapsed && flat && (
+                <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,
+                  }}
+                >
+                  {item.label}
+                </div>
+              )}
+              {isSidebarCollapsed && !flat && (
                 <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)]"
                   style={{
@@ -503,7 +534,7 @@ export default function ITSidebar({
               {!isSidebarCollapsed && item.subitems && item.subitems.length > 0 && (
                 <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"}`}>
                   <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))"

package/src/components/organisms/topbar/topbar.props.ts

@@ -49,6 +49,12 @@ export 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/src/components/organisms/topbar/topbar.tsx

@@ -69,6 +69,7 @@ export default function ITTopBar({
   navItems,
   onNavItemClick,
   hideBrandOnDesktop = false,
+  showDesktopMenuButton = false,
 }: ITTopBarProps) {
   // Flat appearance: plain bar (no shadow/blur), initials avatar, name before it.
   const flat = useITFlatAppearance();
@@ -100,7 +101,9 @@ export default function ITTopBar({
           {/* Mobile Sidebar Toggle */}
           {showMobileMenuButton && (
             <button
-              className="lg:hidden p-2.5 rounded-xl transition-colors duration-200"
+              type="button"
+              aria-label="Menú"
+              className={`${showDesktopMenuButton ? "" : "lg:hidden"} p-2.5 -ml-2.5 rounded-xl transition-colors duration-200`}
               style={{
                  color: "var(--it-topbar-icon, #64748b)",
               }}

package/src/components/templates/layout/layout.tsx

@@ -56,8 +56,17 @@ export default function ITLayout({
   const handleToggleCollapse = isControlled ? (sidebar.onToggleCollapse ?? (() => {})) : () => setInternalCollapsed(v => !v);
 
   const layoutTokens = theme.layout;
-  // Must match ITSidebar's own at-rest width (88px rail / 280px, 248px when flat).
-  const reservedWidth = desktopCollapsed ? "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
+  // Must match ITSidebar's own at-rest width (88px rail / 280px; 72px / 248px when flat).
+  const reservedWidth = desktopCollapsed
+    ? flat ? "w-[72px]" : "w-[88px]"
+    : flat ? "w-[248px]" : "w-[280px]";
+  // The sidebar collapses by button instead of hover: the top bar's menu
+  // button toggles the rail on desktop and still opens the drawer on mobile.
+  const toggleByButton = sidebar.expandOnHover === false;
+  const handleMenuButton = () => {
+    if (toggleByButton && window.matchMedia("(min-width: 1024px)").matches) handleToggleCollapse();
+    else setMobileSidebarOpen(v => !v);
+  };
   // With a full-height sidebar the brand moves from the top bar to the sidebar.
   const brand = sidebarFullHeight
     ? (sidebar.brand ?? { logo: topBar.logo, text: topBar.logoText })
@@ -68,7 +77,8 @@ export default function ITLayout({
       {...topBar}
       hideBrandOnDesktop={sidebarFullHeight || topBar.hideBrandOnDesktop}
       showMobileMenuButton
-      onToggleMobileMenu={() => setMobileSidebarOpen(v => !v)}
+      showDesktopMenuButton={toggleByButton || topBar.showDesktopMenuButton}
+      onToggleMobileMenu={handleMenuButton}
     />
   );
 

package/src/index.ts

@@ -54,6 +54,7 @@ import ITSlideToggle from "./components/atoms/slide/slide";
 import ITSlider from "./components/atoms/slider/slider";
 import ITStack from "./components/atoms/stack/stack";
 import ITStatCard from "./components/molecules/stat-card/stat-card";
+import ITLineBarChart from "./components/molecules/line-bar-chart/line-bar-chart";
 import ITTable from "./components/molecules/table/table";
 import ITText from "./components/atoms/text/text";
 import ITTextarea from "./components/atoms/textarea/textarea";
@@ -109,6 +110,7 @@ import type { ITSlideToggleProps } from "./components/atoms/slide/slide.props";
 import type { ITSliderProps } from "./components/atoms/slider/slider.props";
 import type { ITStackProps } from "./components/atoms/stack/stack.props";
 import type { ITStatCardProps } from "./components/molecules/stat-card/stat-card.props";
+import type { ITLineBarChartProps, ITLineBarDatum } from "./components/molecules/line-bar-chart/line-bar-chart.props";
 import type { ITTableProps, Column, ColumnFilterMode } from "./components/molecules/table/table.props";
 import type { ITTextProps } from "./components/atoms/text/text.props";
 import type { ITTextareaProps } from "./components/atoms/textarea/textarea.props";
@@ -151,7 +153,7 @@ export {
   ITLoader,   ITNavbar, ITPage, ITPageHeader, ITPagination, ITPopover, ITProgress,
   ITRadioGroup, ITSelect, ITSearchSelect,
   ITSearchTable,
-  ITSegmentedControl, ITSidebar, ITSkeleton, ITSlideToggle, ITSlider, ITStack, ITStatCard, ITStepper,
+  ITSegmentedControl, ITSidebar, ITSkeleton, ITSlideToggle, ITSlider, ITStack, ITStatCard, ITStepper, ITLineBarChart,
   ITTable, ITTabs, ITText, ITTextarea, ITTripleFilter, ITThemeProvider,
   useITTheme, useITThemeSafe, useITFlatAppearance, ITTimePicker, ITToast, ITWysiwyg,
   UploadStatus, FileTypeEnum,
@@ -181,7 +183,7 @@ export {
     ITRadioGroupProps, ITRadioOption, ITSelectProps, ITSearchSelectProps,
     ITSearchTableProps,
     ITSegmentedControlProps, ITSidebarProps, ITSkeletonProps, ITSlideToggleProps, ITSliderProps,
-    ITStackProps, ITStatCardProps, ITStepperProps,
+    ITStackProps, ITStatCardProps, ITStepperProps, ITLineBarChartProps, ITLineBarDatum,
     ITTableProps, ITTabsProps, ITTabItem, ITTextProps, ITTextareaProps,
     TableDensity,
     ITTripleFilterProps, ITTripleFilterOption, ITThemeConfig, ITThemeProviderProps, ITThemePalette, ITThemeAppearance,