@axzydev/axzy_ui_system 1.5.1 → 1.5.3

package/README.md

@@ -4,6 +4,37 @@ Librería de componentes React enterprise-ready con **Tailwind CSS v4**. Diseña
 
 ---
 
+## Documentación para IA
+
+Si vas a generar código con esta librería (Copilot, Claude, Cursor, un agente propio), pásale:
+
+| Archivo | Qué contiene |
+| --- | --- |
+| [`docs/llm/GUIA.md`](docs/llm/GUIA.md) | Guía de uso: reglas, composición de pantallas, theming, i18n, accesibilidad, trampas conocidas y recetas |
+| [`docs/llm/catalogo.md`](docs/llm/catalogo.md) | **Generado desde el código**: 61 componentes con props, tipos, defaults y ejemplo |
+| [`docs/llm/catalogo.json`](docs/llm/catalogo.json) | El mismo catálogo en JSON, para indexar |
+| [`docs/llm/ejemplos-reales.md`](docs/llm/ejemplos-reales.md) | **Así se usa en producción** (CYC ERP): capas de CSS, provider real, chassis, listados, formularios, tablas con API y toasts |
+| [`LLM_DOCS.md`](LLM_DOCS.md) | Theming a fondo: variables CSS `--it-*`, escalas y chassis de layout |
+
+### Carpeta [`ai/`](ai/) — copiar y pegar
+
+Si no quieres ir archivo por archivo, la carpeta [`ai/`](ai/) trae el paquete **autocontenido** listo para
+pegar en un chat o subir como conocimiento del proyecto:
+
+| Archivo | Tamaño | Contenido |
+| --- | --- | --- |
+| [`ai/AXZY-UI-SYSTEM.md`](ai/AXZY-UI-SYSTEM.md) | ~150 KB (~38k tokens) | Todo en uno: guía + ejemplos reales + catálogo completo |
+| [`ai/AXZY-UI-SYSTEM-compacto.md`](ai/AXZY-UI-SYSTEM-compacto.md) | ~65 KB (~17k tokens) | Igual, con el catálogo sin descripciones de props |
+| `ai/catalogo.md` · `ai/catalogo.json` | — | Solo el catálogo |
+| `ai/plantillas/` | — | Reglas para Cursor (`.mdc`), Copilot, Claude Code y prompt inicial |
+
+```bash
+pnpm docs:llm        # regenera el catálogo (compilador de TS sobre src/index.ts), docs/llm/ y ai/
+pnpm docs:ai         # solo el paquete ai/ (usa docs/llm/ ya generado)
+pnpm audit:sandbox   # audita el sandbox: axe (set completo) + contenido recortado, 45 páginas
+```
+
+
 ## Instalación en un proyecto nuevo
 
 ### 1. Crear proyecto Vite + React + TypeScript
@@ -62,6 +93,18 @@ capas explícitamente, para que el reset/tema de AXZY nunca dependa del orden de
 
 Con esto **ya no** se importa `dist/index.css` desde `main.tsx` — todo entra por `index.css`.
 
+> **Orden alternativo (y su consecuencia):** si colocas `axzy-ui-system` *después* de `utilities`,
+> los estilos de la librería ganan a tus utilidades y tendrás que forzarlas con el sufijo `!` de
+> Tailwind v4 (`m-0! px-4! max-w-screen!`). El orden de arriba te ahorra esos `!`.
+
+**Modo oscuro por defecto:** el provider arranca en `system` y guarda la preferencia en la clave
+`it-theme-dark-mode` (`"light" | "dark" | "system"`). Si quieres otro default, escríbela **antes** de
+montar la app:
+
+```tsx
+if (!localStorage.getItem("it-theme-dark-mode")) localStorage.setItem("it-theme-dark-mode", "light");
+```
+
 ### 5. Envolver con ITThemeProvider
 
 `src/main.tsx`:

package/dist/index.cjs

@@ -1625,7 +1625,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 = {
@@ -1633,11 +1634,24 @@ 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
 var import_clsx6 = __toESM(require("clsx"), 1);
 var import_react10 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime8 = (
+  // Icono solo: sin wrapper con `gap` ni `ITText` vacío, que lo desplazaban a la izquierda.
+  require("react/jsx-runtime")
+);
 function ITButton({
   children,
   label,
@@ -1654,6 +1668,8 @@ function ITButton({
 }) {
   const [isHovered, setIsHovered] = (0, import_react10.useState)(false);
   const [isFocused, setIsFocused] = (0, import_react10.useState)(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");
@@ -1674,8 +1690,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;
@@ -1710,7 +1727,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 }
       ),
@@ -1723,10 +1740,10 @@ function ITButton({
       disabled,
       "aria-label": ariaLabel || label,
       title: title || ariaLabel || label,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: (0, import_clsx6.default)("inline-flex items-center gap-1.5 font-semibold", { "opacity-50": disabled }), children: [
+      children: children || (isIconOnlyContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inline-flex items-center justify-center leading-none", children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: (0, import_clsx6.default)("inline-flex items-center gap-1.5 font-semibold", { "opacity-50": disabled }), children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex-shrink-0", children: icon }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ITText, { as: "span", children: label })
-      ] })
+      ] }))
     }
   );
 }