@axzydev/axzy_ui_system 1.5.2 → 1.6.0

package/dist/index.d.cts

@@ -636,15 +636,15 @@ interface ITButtonProps {
     label?: string;
     /** Custom content to render inside the button. Takes precedence over `label`. */
     children?: React.ReactNode;
-    /** Icon element rendered before the label. */
+    /** Icon element rendered before the label. With `variant="icon-only"` and no `label`/`children` it becomes the only content and is centered in the square button. */
     icon?: React.ReactNode;
     /** Click handler for the button. */
     onClick?: () => void;
     /** Color theme key. Values come from the semantic color palette (e.g. `"primary"`, `"secondary"`, `"success"`, `"danger"`, `"warning"`, `"info"`, `"purple"`, `"error"`, `"gray"`). @default "primary" */
     color?: ColorsTypes;
-    /** Button size. Valid values: `"sm"`, `"md"`, `"lg"`. @default "md" */
+    /** Button size. Valid values: `"sm"`, `"md"`, `"lg"`. In `variant="icon-only"` it also scales the square padding (`buttonIconPadding`: `sm` 0.5rem, `md` 0.625rem, `lg` 0.75rem). @default "md" */
     size?: SizesTypes;
-    /** Button visual style. Valid values: `"filled"`, `"outlined"`, `"raised"`, `"rounded"`, `"text"`, `"raised-text"`, `"icon-only"`, `"link"`. @default "filled" */
+    /** Button visual style. Valid values: `"filled"`, `"outlined"`, `"raised"`, `"rounded"`, `"text"`, `"raised-text"`, `"icon-only"`, `"link"`. `"icon-only"` renders a centered square icon button; combine it with `icon` and `ariaLabel`. @default "filled" */
     variant?: keyof typeof buttonVariants;
     /** Disables the button interaction and applies reduced opacity. @default false */
     disabled?: boolean;

package/dist/index.d.ts

@@ -636,15 +636,15 @@ interface ITButtonProps {
     label?: string;
     /** Custom content to render inside the button. Takes precedence over `label`. */
     children?: React.ReactNode;
-    /** Icon element rendered before the label. */
+    /** Icon element rendered before the label. With `variant="icon-only"` and no `label`/`children` it becomes the only content and is centered in the square button. */
     icon?: React.ReactNode;
     /** Click handler for the button. */
     onClick?: () => void;
     /** Color theme key. Values come from the semantic color palette (e.g. `"primary"`, `"secondary"`, `"success"`, `"danger"`, `"warning"`, `"info"`, `"purple"`, `"error"`, `"gray"`). @default "primary" */
     color?: ColorsTypes;
-    /** Button size. Valid values: `"sm"`, `"md"`, `"lg"`. @default "md" */
+    /** Button size. Valid values: `"sm"`, `"md"`, `"lg"`. In `variant="icon-only"` it also scales the square padding (`buttonIconPadding`: `sm` 0.5rem, `md` 0.625rem, `lg` 0.75rem). @default "md" */
     size?: SizesTypes;
-    /** Button visual style. Valid values: `"filled"`, `"outlined"`, `"raised"`, `"rounded"`, `"text"`, `"raised-text"`, `"icon-only"`, `"link"`. @default "filled" */
+    /** Button visual style. Valid values: `"filled"`, `"outlined"`, `"raised"`, `"rounded"`, `"text"`, `"raised-text"`, `"icon-only"`, `"link"`. `"icon-only"` renders a centered square icon button; combine it with `icon` and `ariaLabel`. @default "filled" */
     variant?: keyof typeof buttonVariants;
     /** Disables the button interaction and applies reduced opacity. @default false */
     disabled?: boolean;

package/dist/index.js

@@ -1513,7 +1513,8 @@ var buttonVariants = {
   rounded: "border-transparent shadow-sm rounded-full",
   text: "bg-transparent border-transparent shadow-none hover:bg-black/5 dark:hover:bg-white/10",
   "raised-text": "bg-white border border-gray-200 shadow-sm hover:shadow-md",
-  "icon-only": "p-2 aspect-square flex items-center justify-center border-transparent shadow-sm",
+  // No lleva utilidades de padding: el cuadrado lo define `buttonIconPadding` por tamaño.
+  "icon-only": "aspect-square flex items-center justify-center border-transparent shadow-sm",
   link: "bg-transparent border-transparent shadow-none hover:underline px-0"
 };
 var buttonSizes = {
@@ -1521,6 +1522,16 @@ var buttonSizes = {
   md: "text-[13px] px-3.5 py-1.5",
   lg: "text-sm px-4 py-2"
 };
+var buttonIconSizes = {
+  sm: "text-xs",
+  md: "text-[13px]",
+  lg: "text-sm"
+};
+var buttonIconPadding = {
+  sm: "0.5rem",
+  md: "0.625rem",
+  lg: "0.75rem"
+};
 
 // src/components/atoms/button/button.tsx
 import clsx6 from "clsx";
@@ -1542,6 +1553,8 @@ function ITButton({
 }) {
   const [isHovered, setIsHovered] = useState6(false);
   const [isFocused, setIsFocused] = useState6(false);
+  const isIconOnly = variant === "icon-only";
+  const isIconOnlyContent = isIconOnly && Boolean(icon) && !children;
   const themeBtn = theme.button;
   const themeConfig = themeBtn[color] || themeBtn.primary;
   const isSolid = ["filled", "raised", "rounded", "icon-only"].includes(variant || "filled");
@@ -1562,8 +1575,9 @@ function ITButton({
     if (variant === "rounded") {
       style.borderRadius = "9999px";
     }
-    if (variant === "icon-only") {
-      style.padding = "0.5rem";
+    if (isIconOnly) {
+      style.padding = buttonIconPadding[size] ?? "0.5rem";
+      style.lineHeight = 1;
     }
     if (isSolid) {
       style.backgroundColor = isHovered && !disabled ? themeConfig.hover : mainColor;
@@ -1598,7 +1612,7 @@ function ITButton({
         // Apply variant base styles (border, shadow, rounded-full)
         buttonVariants[variant || "filled"],
         // Apply size classes (padding/font-size)
-        buttonSizes[size],
+        isIconOnly ? buttonIconSizes[size] : buttonSizes[size],
         className,
         { "opacity-50 cursor-not-allowed": disabled }
       ),
@@ -1611,10 +1625,13 @@ function ITButton({
       disabled,
       "aria-label": ariaLabel || label,
       title: title || ariaLabel || label,
-      children: children || /* @__PURE__ */ jsxs5("span", { className: clsx6("inline-flex items-center gap-1.5 font-semibold", { "opacity-50": disabled }), children: [
+      children: children || (isIconOnlyContent ? (
+        // Icono solo: sin wrapper con `gap` ni `ITText` vacío, que lo desplazaban a la izquierda.
+        /* @__PURE__ */ jsx8("span", { className: "inline-flex items-center justify-center leading-none", children: icon })
+      ) : /* @__PURE__ */ jsxs5("span", { className: clsx6("inline-flex items-center gap-1.5 font-semibold", { "opacity-50": disabled }), children: [
         icon && /* @__PURE__ */ jsx8("span", { className: "flex-shrink-0", children: icon }),
         /* @__PURE__ */ jsx8(ITText, { as: "span", children: label })
-      ] })
+      ] }))
     }
   );
 }
@@ -8096,7 +8113,7 @@ function ITSegmentedControl({
 import { useEffect as useEffect13, useRef as useRef20, useState as useState27 } from "react";
 import clsx40 from "clsx";
 import { FaChevronDown as FaChevronDown4 } from "react-icons/fa";
-import { jsx as jsx58, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs42 } from "react/jsx-runtime";
 function isSubItemGroup(entry) {
   return "items" in entry;
 }
@@ -8105,6 +8122,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__ */ jsx58(Fragment9, { children: text });
+  return /* @__PURE__ */ jsx58(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "block w-1.5 h-1.5 rounded-full",
+      style: { backgroundColor: "currentColor" }
+    }
+  );
+}
 function ITSidebar({
   navigationItems = [],
   isCollapsed = false,
@@ -8175,7 +8205,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);
@@ -8287,7 +8319,7 @@ function ITSidebar({
         size: "sm",
         ...badgeRest,
         className: clsx40("shadow-md", badgeClassName),
-        children: String(count)
+        children: isSidebarCollapsed ? /* @__PURE__ */ jsx58(RailBadge, { value: count }) : String(count)
       }
     );
     if (isSidebarCollapsed) {
@@ -8298,7 +8330,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))";
@@ -8308,7 +8340,7 @@ function ITSidebar({
           },
           children: [
             icon && /* @__PURE__ */ jsx58("span", { className: "flex items-center justify-center text-[1.05rem]", children: icon }),
-            /* @__PURE__ */ jsx58("span", { className: "absolute top-0.5 right-0.5 pointer-events-none", children: badge })
+            /* @__PURE__ */ jsx58("span", { className: "absolute top-0.5 right-0.5 max-w-[2.1rem] overflow-hidden pointer-events-none", children: badge })
           ]
         }
       );
@@ -8320,7 +8352,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))";
@@ -8388,9 +8420,9 @@ function ITSidebar({
             ]
           }
         ),
-        header && !isSidebarCollapsed && /* @__PURE__ */ jsx58("div", { className: "px-4 pt-4 pb-1 flex-shrink-0", children: header }),
+        header && /* @__PURE__ */ jsx58("div", { className: `px-4 pt-4 pb-1 flex-shrink-0 ${isSidebarCollapsed ? "overflow-hidden" : ""}`, children: isSidebarCollapsed ? /* @__PURE__ */ jsx58("div", { className: `${expandedWidth} invisible`, "aria-hidden": "true", children: header }) : header }),
         notification && /* @__PURE__ */ jsx58("div", { className: "px-4 pt-3 flex-shrink-0", children: renderNotification() }),
-        /* @__PURE__ */ jsx58("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__ */ jsx58("ul", { className: "space-y-1", children: navigationItems.map((item) => {
+        /* @__PURE__ */ jsx58("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__ */ jsx58("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;
@@ -8408,7 +8440,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",
@@ -8436,7 +8470,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__ */ jsxs42("div", { className: `flex items-center ${!isSidebarCollapsed ? "gap-2.5" : "justify-center"} relative z-10 w-full`, children: [
+                  /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2.5 relative z-10 w-full", children: [
                     item.icon && /* @__PURE__ */ jsx58(
                       "div",
                       {
@@ -8480,10 +8514,12 @@ function ITSidebar({
                       ...badgeRest,
                       className: clsx40(
                         "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__ */ jsx58(RailBadge, { value: item.badge }) : String(item.badge)
                     }
                   )
                 ]
@@ -8906,7 +8942,7 @@ import {
 } from "react-icons/fa";
 import { MdOutlineSwapVert as MdOutlineSwapVert2 } from "react-icons/md";
 import { isSameDay as isSameDay2, startOfDay as startOfDay2, endOfDay } from "date-fns";
-import { Fragment as Fragment9, jsx as jsx63, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx63, jsxs as jsxs46 } from "react/jsx-runtime";
 function ITTable({
   columns,
   data = [],
@@ -9444,7 +9480,7 @@ function ITTable({
                           })
                         }
                       ) }),
-                      /* @__PURE__ */ jsx63("tbody", { className: clsx44(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? /* @__PURE__ */ jsxs46(Fragment9, { children: [
+                      /* @__PURE__ */ jsx63("tbody", { className: clsx44(tableBody, "dark:divide-slate-700/30"), children: currentData.length > 0 ? /* @__PURE__ */ jsxs46(Fragment10, { children: [
                         isTableVirtual && topSpacerHeight > 0 && /* @__PURE__ */ jsx63("tr", { "aria-hidden": "true", style: { height: topSpacerHeight }, children: /* @__PURE__ */ jsx63("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) }),
                         windowData.map((row, windowIndex) => {
                           const absoluteIndex = isTableVirtual ? startIndex + windowIndex : windowIndex;
@@ -10396,7 +10432,7 @@ var UploadStatus = /* @__PURE__ */ ((UploadStatus2) => {
 })(UploadStatus || {});
 
 // src/components/organisms/dropfile/dropfile.tsx
-import { Fragment as Fragment10, jsx as jsx70, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx70, jsxs as jsxs52 } from "react/jsx-runtime";
 var ITDropfile = ({
   onFileSelect,
   onCancel,
@@ -10643,7 +10679,7 @@ var ITDropfile = ({
     ] }),
     showStatusBadge && selectedFile && /* @__PURE__ */ jsx70(StatusBadge, { status: uploadStatus })
   ] });
-  const dropZoneOrPreview = /* @__PURE__ */ jsx70(Fragment10, { children: !selectedFile && !imagePreview ? /* @__PURE__ */ jsxs52(
+  const dropZoneOrPreview = /* @__PURE__ */ jsx70(Fragment11, { children: !selectedFile && !imagePreview ? /* @__PURE__ */ jsxs52(
     "div",
     {
       ...getRootProps(),
@@ -10686,7 +10722,7 @@ var ITDropfile = ({
       /* @__PURE__ */ jsx70("svg", { className: "w-10 h-10 mb-2 opacity-50", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx70("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
       /* @__PURE__ */ jsx70(ITText, { as: "span", className: "text-xs", children: t("dropfile.noPreview") })
     ] }) }),
-    /* @__PURE__ */ jsx70("div", { className: "px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ jsxs52(Fragment10, { children: [
+    /* @__PURE__ */ jsx70("div", { className: "px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2", children: !isConfirmed ? /* @__PURE__ */ jsxs52(Fragment11, { children: [
       /* @__PURE__ */ jsx70(
         ITButton,
         {