@axzydev/axzy_ui_system 1.5.1 → 1.5.3

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 })
-      ] })
+      ] }))
     }
   );
 }