@axzydev/axzy_ui_system 1.5.2 → 1.6.0

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/atoms/button/button.props.ts

@@ -7,15 +7,15 @@ export 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/src/components/atoms/button/button.tsx

@@ -1,4 +1,6 @@
 import {
+  buttonIconPadding,
+  buttonIconSizes,
   buttonSizes,
   buttonVariants,
 } from "@/types/button.types";
@@ -35,6 +37,16 @@ export default function ITButton({
 }: ITButtonProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
+
+  /** La variante `icon-only` siempre es un cuadrado con padding simétrico. */
+  const isIconOnly = variant === "icon-only";
+
+  /**
+   * Contenido "solo icono": hay `icon` y no hay `children`.
+   * En ese caso NO se envuelve el icono en el wrapper con `gap-1.5` ni en un `ITText` vacío,
+   * que lo desplazaban a la izquierda del centro.
+   */
+  const isIconOnlyContent = isIconOnly && Boolean(icon) && !children;
   
   // Get specific button config from theme
   const themeBtn = theme.button as any;
@@ -64,8 +76,11 @@ export default function ITButton({
       style.borderRadius = "9999px";
     }
 
-    if (variant === "icon-only") {
-      style.padding = "0.5rem"; // Square padding override
+    if (isIconOnly) {
+      // Padding simétrico explícito: con `aspect-square` define un cuadrado exacto
+      // y evita que las utilidades `px-*`/`py-*` de `buttonSizes` desalineen el icono.
+      style.padding = buttonIconPadding[size] ?? "0.5rem";
+      style.lineHeight = 1;
     }
 
     if (isSolid) {
@@ -103,7 +118,7 @@ export default 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 }
       )}
@@ -118,10 +133,15 @@ export default function ITButton({
       title={title || ariaLabel || label}
     >
       {children || (
-        <span className={clsx("inline-flex items-center gap-1.5 font-semibold", { "opacity-50": disabled })}>
-          {icon && <span className="flex-shrink-0">{icon}</span>}
-          <ITText as="span">{label}</ITText>
-        </span>
+        isIconOnlyContent ? (
+          // Icono solo: sin wrapper con `gap` ni `ITText` vacío, que lo desplazaban a la izquierda.
+          <span className="inline-flex items-center justify-center leading-none">{icon}</span>
+        ) : (
+          <span className={clsx("inline-flex items-center gap-1.5 font-semibold", { "opacity-50": disabled })}>
+            {icon && <span className="flex-shrink-0">{icon}</span>}
+            <ITText as="span">{label}</ITText>
+          </span>
+        )
       )}
     </button>
   );

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

@@ -29,6 +29,28 @@ function flattenSubItems(
   );
 }
 
+/** Caracteres que caben en el badge del riel (`max-w-[2.1rem]`). */
+const RAIL_BADGE_MAX_CHARS = 3;
+
+/**
+ * Contenido del badge cuando el sidebar está colapsado.
+ *
+ * En el riel solo cabe un valor corto (contadores tipo `12` o `99+`). Un texto
+ * largo deformaría el riel y taparía el icono, así que se degrada a un punto que
+ * conserva el aviso de color; el nombre completo sigue disponible en el tooltip.
+ */
+function RailBadge({ value }: { value: number | string }) {
+  const text = String(value);
+  if (text.length <= RAIL_BADGE_MAX_CHARS) return <>{text}</>;
+  return (
+    <span
+      aria-hidden="true"
+      className="block w-1.5 h-1.5 rounded-full"
+      style={{ backgroundColor: "currentColor" }}
+    />
+  );
+}
+
 /**
  * Vertical navigation sidebar with submenu expand/collapse, hover tooltips in collapsed mode,
  * and glassmorphism styling. The collapsed rail expands automatically on pointer hover — there
@@ -137,9 +159,9 @@ 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]";
+  const collapsedWidth = flat ? "w-[72px]" : "w-[88px]";
+  const expandedWidth = flat ? "w-[248px]" : "w-[280px]";
+  const sidebarWidth = isSidebarCollapsed ? collapsedWidth : expandedWidth;
   // Icon-only rail that never expands on hover: names show in a tooltip.
   const fixedRail = isSidebarCollapsed && !expandOnHover;
 
@@ -266,7 +288,7 @@ export default function ITSidebar({
         {...badgeRest}
         className={clsx("shadow-md", badgeClassName)}
       >
-        {String(count)}
+        {isSidebarCollapsed ? <RailBadge value={count} /> : String(count)}
       </ITBadget>
     );
 
@@ -277,7 +299,7 @@ export default function ITSidebar({
           aria-label={label}
           title={label}
           onClick={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))";
@@ -289,7 +311,7 @@ export default function ITSidebar({
           {icon && (
             <span className="flex items-center justify-center text-[1.05rem]">{icon}</span>
           )}
-          <span className="absolute top-0.5 right-0.5 pointer-events-none">{badge}</span>
+          <span className="absolute top-0.5 right-0.5 max-w-[2.1rem] overflow-hidden pointer-events-none">{badge}</span>
         </button>
       );
     }
@@ -300,7 +322,7 @@ export default function ITSidebar({
         aria-label={label}
         title={label}
         onClick={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))";
@@ -364,8 +386,19 @@ export default function ITSidebar({
         </div>
       )}
 
-      {header && !isSidebarCollapsed && (
-        <div className="px-4 pt-4 pb-1 flex-shrink-0">{header}</div>
+      {/* El header reserva su altura también en el riel para que la navegación no
+          salte en vertical al expandir. Se maqueta con el ancho expandido (oculto
+          y recortado) para que el texto no se reparta en más líneas en el riel. */}
+      {header && (
+        <div className={`px-4 pt-4 pb-1 flex-shrink-0 ${isSidebarCollapsed ? "overflow-hidden" : ""}`}>
+          {isSidebarCollapsed ? (
+            <div className={`${expandedWidth} invisible`} aria-hidden="true">
+              {header}
+            </div>
+          ) : (
+            header
+          )}
+        </div>
       )}
 
       {notification && (
@@ -373,7 +406,7 @@ export default function ITSidebar({
       )}
 
       {/* Navigation Items */}
-      <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"}`}>
+      <nav aria-label={t("sidebar.navAria")} className={`flex-1 py-4 px-4 custom-scrollbar ${fixedRail ? "overflow-visible" : "overflow-y-auto overflow-x-hidden"}`}>
         <ul className="space-y-1">
           {navigationItems.map((item) => {
             const hasSubmenu = !!item.subitems && item.subitems.length > 0;
@@ -396,7 +429,9 @@ 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 ? (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',
@@ -424,7 +459,7 @@ export default function ITSidebar({
                   />
                 )}
 
-                <div className={`flex items-center ${!isSidebarCollapsed ? "gap-2.5" : "justify-center"} relative z-10 w-full`}>
+                <div className="flex items-center gap-2.5 relative z-10 w-full">
                   {item.icon && (
                     <div
                       className={`transition-all duration-300 flex-shrink-0 flex items-center justify-center`}
@@ -467,13 +502,15 @@ export default function ITSidebar({
                     {...badgeRest}
                     className={clsx(
                       "absolute shadow-md",
+                      // 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"
+                        ? "top-0.5 right-0.5 max-w-[2.1rem] overflow-hidden"
                         : "right-3 top-1/2 -translate-y-1/2",
                       badgeClassName,
                     )}
                   >
-                    {String(item.badge)}
+                    {isSidebarCollapsed ? <RailBadge value={item.badge} /> : String(item.badge)}
                   </ITBadget>
                 )}
               </div>

package/src/sandbox/i18n.ts

@@ -772,6 +772,7 @@ export const sandboxMessages: ITMessagesByLocale = {
     "showcase.forms.clicksRegistered": "Clicks registrados: {count}",
     "showcase.forms.withIcon": "Con Icono",
     "showcase.forms.galleryWithIcon": "Con Icono",
+    "showcase.forms.galleryIconOnly": "Solo Icono (centrado)",
     "showcase.forms.galleryVariants": "Variantes",
     "showcase.forms.gallerySemanticColors": "Colores Semánticos",
     "showcase.forms.sync": "Sincronizar",
@@ -1714,6 +1715,7 @@ export const sandboxMessages: ITMessagesByLocale = {
     "showcase.forms.clicksRegistered": "Clicks registered: {count}",
     "showcase.forms.withIcon": "With icon",
     "showcase.forms.galleryWithIcon": "With icon",
+    "showcase.forms.galleryIconOnly": "Icon only (centered)",
     "showcase.forms.galleryVariants": "Variants",
     "showcase.forms.gallerySemanticColors": "Semantic colors",
     "showcase.forms.sync": "Sync",

package/src/showcases/FormShowcases.tsx

@@ -158,6 +158,14 @@ export const ButtonShowcase = () => {
               <ITButton label={t("showcase.forms.sync")} icon={<FaSync />} variant="text" />
             </div>
           </div>
+          <div>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.forms.galleryIconOnly")}</h3>
+            <div className="flex flex-wrap items-center gap-3">
+              <ITButton variant="icon-only" size="sm" color="primary" icon={<FaEdit />} ariaLabel={t("showcase.common.edit")} />
+              <ITButton variant="icon-only" size="md" color="success" icon={<FaSave />} ariaLabel={t("showcase.common.save")} />
+              <ITButton variant="icon-only" size="lg" color="danger" icon={<FaTrash />} ariaLabel={t("showcase.common.delete")} />
+            </div>
+          </div>
           <div>
             <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.forms.galleryVariants")}</h3>
             <div className="flex flex-wrap gap-3">
@@ -210,6 +218,7 @@ export const ButtonShowcase = () => {
         notes: [
           "Con children no se renderizan label ni icon.",
           'Usa variant="icon-only" junto a ariaLabel cuando el botón no tenga texto visible.',
+          'Con variant="icon-only" + icon (sin label) el botón es cuadrado y el icono queda centrado; el tamaño del cuadrado sale de buttonIconPadding (sm 0.5rem, md 0.625rem, lg 0.75rem).',
         ],
       }}
     />

package/src/showcases/StructureShowcases.tsx

@@ -1304,7 +1304,7 @@ export const LayoutShowcase = () => {
           { name: "children", type: "React.ReactNode", required: true, description: "Contenido principal." },
           { name: "className", type: "string", description: "Clases del wrapper externo." },
           { name: "contentClassName", type: "string", description: "Clases del contenedor de contenido." },
-          { name: "sidebar.header", type: "React.ReactNode", description: "Slot opcional sobre la navegación (ej. wordmark o filtro). Oculto al colapsar." },
+          { name: "sidebar.header", type: "React.ReactNode", description: "Slot opcional sobre la navegación (ej. wordmark o filtro). Oculto al colapsar, pero reserva su altura." },
           { name: "sidebar.notification", type: "ITSidebarNotification", description: "Fila de notificación (icono + label + ITBadget) sobre la navegación: { count, icon?, label?, onClick?, badgeProps? }. Visible también al colapsar." },
           { name: "sidebar.navigationItems[].badge", type: "number | string", description: "Contador que se renderiza con ITBadget en el ítem." },
           { name: "sidebar.navigationItems[].badgeProps", type: "ITBadgetProps", description: "Estilo del badge del ítem (color, size, variant, className para padding)." },
@@ -1312,9 +1312,10 @@ export const LayoutShowcase = () => {
         notes: [
           "`subitems` acepta entradas planas o grupos con `label`+`items`; el título del grupo no es foco ni un tercer nivel y cada grupo se nombra por `aria-labelledby`. En el riel colapsado el flyout aplana los grupos (sin títulos).",
           "El sidebar hereda aria-current/aria-expanded y acepta un slot header opcional.",
-          "Los badges por ítem (`badge` + `badgeProps`) y la fila `notification` se dibujan con el átomo `ITBadget`; el padding se ajusta con `badgeProps.className`.",
+          "Los badges por ítem (`badge` + `badgeProps`) y la fila `notification` se dibujan con el átomo `ITBadget`; el padding se ajusta con `badgeProps.className`. `badge` es un contador: en el riel colapsado solo caben ≤3 caracteres y un texto largo se degrada a un punto.",
           "Con `sidebar.isCollapsed` omitido el contenido reserva 88px (hover expande sobre el contenido). Si lo controlas a `false`, reserva 280px y no tapa el contenido.",
           "El riel colapsado se expande automáticamente al pasar el cursor por encima; no hay botón de colapso.",
+          "Riel y panel comparten columna de iconos y alto de fila: los iconos no se mueven al expandir/colapsar. El slot `header` reserva su altura (invisible) en el riel por el mismo motivo.",
         ],
       }}
     />

package/src/types/button.types.ts

@@ -5,7 +5,8 @@ export const buttonVariants: Record<string, string> = {
   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",
 };
 
@@ -14,3 +15,20 @@ export const buttonSizes: Record<string, string> = {
   md: "text-[13px] px-3.5 py-1.5",
   lg: "text-sm px-4 py-2",
 };
+
+/**
+ * Tipografía de `icon-only`: solo el tamaño de fuente, sin padding horizontal/vertical,
+ * para que el padding simétrico de `buttonIconPadding` no compita con `buttonSizes`.
+ */
+export const buttonIconSizes: Record<string, string> = {
+  sm: "text-xs",
+  md: "text-[13px]",
+  lg: "text-sm",
+};
+
+/** Padding simétrico (px) del botón `icon-only` por tamaño; define el cuadrado con `aspect-square`. */
+export const buttonIconPadding: Record<string, string> = {
+  sm: "0.5rem",
+  md: "0.625rem",
+  lg: "0.75rem",
+};