@axzydev/axzy_ui_system 1.5.3 → 1.6.0

package/dist/index.cjs

@@ -8216,6 +8216,19 @@ function flattenSubItems(entries) {
     (entry) => isSubItemGroup(entry) ? entry.items : [entry]
   );
 }
+var RAIL_BADGE_MAX_CHARS = 3;
+function RailBadge({ value }) {
+  const text = String(value);
+  if (text.length <= RAIL_BADGE_MAX_CHARS) return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: text });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "block w-1.5 h-1.5 rounded-full",
+      style: { backgroundColor: "currentColor" }
+    }
+  );
+}
 function ITSidebar({
   navigationItems = [],
   isCollapsed = false,
@@ -8286,7 +8299,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 collapsedWidth = flat ? "w-[72px]" : "w-[88px]";
+  const expandedWidth = flat ? "w-[248px]" : "w-[280px]";
+  const sidebarWidth = isSidebarCollapsed ? collapsedWidth : expandedWidth;
   const fixedRail = isSidebarCollapsed && !expandOnHover;
   const toggleExpanded = (itemId) => {
     const newExpanded = new Set(expandedItems);
@@ -8398,7 +8413,7 @@ function ITSidebar({
         size: "sm",
         ...badgeRest,
         className: (0, import_clsx40.default)("shadow-md", badgeClassName),
-        children: String(count)
+        children: isSidebarCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RailBadge, { value: count }) : String(count)
       }
     );
     if (isSidebarCollapsed) {
@@ -8409,7 +8424,7 @@ function ITSidebar({
           "aria-label": label,
           title: label,
           onClick,
-          className: "relative flex items-center justify-center w-full p-2 mb-1 rounded-xl transition-all duration-300",
+          className: `relative flex items-center w-full h-10 mb-1 rounded-xl transition-all duration-300 ${flat ? "px-3" : "px-5"}`,
           style: { color: "var(--it-sidebar-icon-color, var(--color-secondary-500))" },
           onMouseEnter: (e) => {
             e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
@@ -8419,7 +8434,7 @@ function ITSidebar({
           },
           children: [
             icon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "flex items-center justify-center text-[1.05rem]", children: icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "absolute top-0.5 right-0.5 pointer-events-none", children: badge })
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "absolute top-0.5 right-0.5 max-w-[2.1rem] overflow-hidden pointer-events-none", children: badge })
           ]
         }
       );
@@ -8431,7 +8446,7 @@ function ITSidebar({
         "aria-label": label,
         title: label,
         onClick,
-        className: "flex items-center gap-2.5 w-full text-left px-3 py-2 mb-1 rounded-xl transition-all duration-300",
+        className: `flex items-center gap-2.5 w-full text-left h-10 mb-1 rounded-xl transition-all duration-300 ${flat ? "px-3" : "px-5"}`,
         style: { color: "var(--it-sidebar-label-color, var(--color-secondary-600))" },
         onMouseEnter: (e) => {
           e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
@@ -8499,9 +8514,9 @@ function ITSidebar({
             ]
           }
         ),
-        header && !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "px-4 pt-4 pb-1 flex-shrink-0", children: header }),
+        header && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `px-4 pt-4 pb-1 flex-shrink-0 ${isSidebarCollapsed ? "overflow-hidden" : ""}`, children: isSidebarCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `${expandedWidth} invisible`, "aria-hidden": "true", children: header }) : header }),
         notification && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "px-4 pt-3 flex-shrink-0", children: renderNotification() }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("nav", { "aria-label": t("sidebar.navAria"), 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_runtime58.jsx)("ul", { className: "space-y-1", children: navigationItems.map((item) => {
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("nav", { "aria-label": t("sidebar.navAria"), className: `flex-1 py-4 px-4 custom-scrollbar ${fixedRail ? "overflow-visible" : "overflow-y-auto overflow-x-hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.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 hasRenderedSubmenu = hasSubmenu && !isSidebarCollapsed;
@@ -8519,7 +8534,9 @@ 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 ? flat ? "justify-center h-10 mb-1" : "justify-center p-2 mb-1" : "justify-between px-3 py-2 mb-0.5"}
+                  h-10
+                  ${flat ? "px-3" : "px-5"}
+                  ${isSidebarCollapsed ? "justify-start" : "justify-between"}
                 `,
                 style: {
                   backgroundColor: active ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
@@ -8547,7 +8564,7 @@ function ITSidebar({
                       style: { backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))", boxShadow: "0 0 10px var(--it-sidebar-active-icon, var(--color-primary-500))" }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-2.5" : "justify-center"} relative z-10 w-full`, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-2.5 relative z-10 w-full", children: [
                     item.icon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                       "div",
                       {
@@ -8591,10 +8608,12 @@ function ITSidebar({
                       ...badgeRest,
                       className: (0, import_clsx40.default)(
                         "absolute shadow-md",
-                        isSidebarCollapsed ? "top-0.5 right-0.5" : "right-3 top-1/2 -translate-y-1/2",
+                        // En el riel no hay ancho para una etiqueta larga: el badge se
+                        // ancla a la esquina y se recorta, así nunca desborda ni tapa el icono.
+                        isSidebarCollapsed ? "top-0.5 right-0.5 max-w-[2.1rem] overflow-hidden" : "right-3 top-1/2 -translate-y-1/2",
                         badgeClassName
                       ),
-                      children: String(item.badge)
+                      children: isSidebarCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RailBadge, { value: item.badge }) : String(item.badge)
                     }
                   )
                 ]