@axzydev/axzy_ui_system 1.3.0 → 1.3.2

package/src/showcases/PageShowcases.tsx

@@ -397,6 +397,15 @@ export const PageShowcase = () => {
   const [screen, setScreen] = useState<"list" | "detail">("list");
   const [selectedUser, setSelectedUser] = useState<Record<string, unknown> | null>(null);
   const [showIcon, setShowIcon] = useState(true);
+  const [hPadding, setHPadding] = useState<"default" | "none" | "tight" | "wide">("default");
+
+  // `undefined` lets ITPage fall back to its own default ("px-4 sm:px-6 lg:px-8").
+  const hPaddingValue: string | undefined = {
+    default: undefined,
+    none: "px-0",
+    tight: "px-2 sm:px-3",
+    wide: "px-8 sm:px-12 lg:px-16",
+  }[hPadding];
 
   const isNormal = state === "normal";
   const isDetail = screen === "detail";
@@ -551,6 +560,7 @@ export const PageShowcase = () => {
               error={state === "error" ? "Could not load user details. Please try again." : null}
               errorTitle="Details error"
               onRetry={() => setState("normal")}
+              horizontalPadding={hPaddingValue}
               empty={state === "empty"}
               emptyTitle="No user data"
               emptyDescription="No information available for this user."
@@ -601,6 +611,7 @@ export const PageShowcase = () => {
               error={state === "error" ? "Could not load team members. Check your connection and try again." : null}
               errorTitle="Connection error"
               onRetry={() => setState("normal")}
+              horizontalPadding={hPaddingValue}
               empty={state === "empty"}
               emptyTitle="No team members yet"
               emptyDescription="Invite your first team member to get started."
@@ -640,6 +651,21 @@ export const PageShowcase = () => {
             <ITSlideToggle isOn={showIcon} onToggle={setShowIcon} size="sm" />
           </ITFlex>
 
+          <div>
+            <p className="text-xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">Horizontal padding</p>
+            <ITFlex gap={2} wrap="wrap">
+              {(["default", "none", "tight", "wide"] as const).map((p) => (
+                <ITButton
+                  key={p}
+                  label={p === "default" ? "Default" : p === "none" ? "px-0" : p === "tight" ? "px-2" : "px-8"}
+                  variant={hPadding === p ? "filled" : "outlined"}
+                  size="sm"
+                  onClick={() => setHPadding(p)}
+                />
+              ))}
+            </ITFlex>
+          </div>
+
           {isNormal && (
             <div>
               <p className="text-xs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">Screen</p>
@@ -674,6 +700,7 @@ export const PageShowcase = () => {
             <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Users — table with actions</h4>
             <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
               <ITPage
+                horizontalPadding={hPaddingValue}
                 title="Users"
                 description="1,245 registered · 38 active now"
                 icon={<FaUsers size={20} />}
@@ -701,6 +728,7 @@ export const PageShowcase = () => {
             <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Product detail</h4>
             <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
               <ITPage
+                horizontalPadding={hPaddingValue}
                 title="MacBook Pro 16'' M3 Max"
                 description="SKU: MBP-16-M3MAX-2024 · Stock: 24"
                 icon={<FaBoxOpen size={20} />}
@@ -748,6 +776,7 @@ export const PageShowcase = () => {
             <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Edit profile</h4>
             <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
               <ITPage
+                horizontalPadding={hPaddingValue}
                 title="Edit profile"
                 description="Update your personal information and contact details"
                 icon={<FaEdit size={20} />}
@@ -798,6 +827,7 @@ export const PageShowcase = () => {
             <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Orders — status table</h4>
             <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
               <ITPage
+                horizontalPadding={hPaddingValue}
                 title="Orders"
                 description="89 pending · 1,247 completed this month"
                 icon={<FaShoppingCart size={20} />}
@@ -850,6 +880,7 @@ export const PageShowcase = () => {
             <h4 className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">Settings</h4>
             <div className="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
               <ITPage
+                horizontalPadding={hPaddingValue}
                 title="Settings"
                 description="Manage your account and workspace preferences"
                 icon={<FaCog size={20} />}

package/src/showcases/StructureShowcases.tsx

@@ -901,13 +901,20 @@ export const TextShowcase = () => {
 
 // 3. ITLayout & ITNavbar Showcase
 export const LayoutShowcase = () => {
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(true);
   const [activeId, setActiveId] = useState("dashboard");
   const [navActiveId, setNavActiveId] = useState<string | null>("1");
 
   const topBar = {
     logo: <div className="w-9 h-9 rounded-lg bg-primary-500 flex items-center justify-center text-white font-bold">A</div>,
     logoText: "AXZY Console",
+    centerContent: (
+      <input
+        type="search"
+        placeholder="Buscar componente…"
+        className="w-full rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-1.5 text-xs text-slate-700 dark:text-slate-200 outline-none focus:ring-2 focus:ring-primary-500/40"
+      />
+    ),
     navItems: [
       { id: "home", label: "Inicio", icon: <FaHome />, action: () => setActiveId("home") },
       { id: "docs", label: "Documentos", icon: <FaFileAlt />, action: () => setActiveId("docs") },
@@ -942,19 +949,29 @@ export const LayoutShowcase = () => {
       { id: "settings", label: "Configuración", icon: <FaCog />, isActive: activeId === "settings", action: () => setActiveId("settings") },
     ],
     isCollapsed: collapsed,
-    onToggleCollapse: () => setCollapsed(v => !v),
+    header: (
+      <ITText
+        className="text-xs font-bold tracking-wide"
+        style={{ color: "var(--it-sidebar-label-color, var(--color-secondary-700))" }}
+      >
+        AXZY v1.3
+      </ITText>
+    ),
   };
 
   const code = `<ITLayout
   topBar={{
     logo: <Logo />,
     logoText: "AXZY Console",
+    // Slot central opcional (visible desde lg) — ideal para un buscador global
+    centerContent: <SearchBox value={term} onChange={setTerm} />,
     userMenu: { userName, userEmail, menuItems }
   }}
   sidebar={{
     navigationItems: [...],
     isCollapsed: ${collapsed},
-    onToggleCollapse: () => setCollapsed(v => !v)
+    // Slot opcional sobre la navegación (oculto al colapsar)
+    header: <span>AXZY v1.3</span>
   }}
 >
   {/* Tu contenido */}
@@ -1025,7 +1042,7 @@ export const LayoutShowcase = () => {
             <ITSlideToggle isOn={collapsed} onToggle={setCollapsed} size="sm" />
           </div>
           <div className="text-xs text-slate-500">
-            En móvil (&lt;lg) el sidebar se abre como drawer con un fondo oscuro. Usa el botón ☰ del topbar.
+            En móvil (&lt;lg) el sidebar se abre como drawer con un fondo oscuro. Usa el botón ☰ del topbar. El botón ⟩ del propio sidebar también colapsa/expande.
           </div>
         </ITStack>
       }
@@ -1088,6 +1105,27 @@ export const LayoutShowcase = () => {
           </div>
         </ITStack>
       }
+      doc={{
+        summary: "Chasis estructural del portal: topbar + sidebar colapsable + área de contenido.",
+        examples: [
+          '<ITLayout topBar={{ centerContent: <SearchBox /> }} sidebar={{ navigationItems }}>',
+          "  <Dashboard />",
+          "</ITLayout>",
+        ],
+        props: [
+          { name: "topBar", type: "ITTopBarProps", required: true, description: "Configuración de la barra superior." },
+          { name: "sidebar", type: "ITSidebarProps", required: true, description: "Configuración del sidebar (navigationItems, isCollapsed, header…)." },
+          { 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." },
+        ],
+        notes: [
+          "El sidebar hereda aria-current/aria-expanded y acepta un slot header opcional.",
+          "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.",
+        ],
+      }}
     />
   );
 };

package/src/types/table.types.ts

@@ -13,3 +13,51 @@ export const sizeStyles: Record<TableSize, string> = {
   md: "text-sm",
   lg: "text-lg",
 };
+
+/**
+ * Cell padding / row-height preset for tables. Independent of `TableSize`
+ * (which only controls font-size, and shifts the row height via the line box).
+ */
+export type TableDensity = "compact" | "normal" | "comfortable";
+
+/**
+ * Padding classes and target row height per density. `normal` MUST stay
+ * byte-identical to the historical hard-coded `px-4 py-4` / `px-4 py-3`.
+ *
+ * The `rowHeight` values are the `size="md"` baseline:
+ * rowHeight = cell vertical padding + text-sm line box (20px) + 1px divide-y border.
+ * compact: py-1.5 (12) + 20 + 1 = 33 · normal: py-3 (24) + 20 + 1 = 45 · comfortable: py-4 (32) + 20 + 1 = 53
+ *
+ * `size` shifts that baseline via the font-size line box; use
+ * `getRowHeight(size, density)` for the real rendered row height.
+ */
+export const densityStyles: Record<
+  TableDensity,
+  { header: string; cell: string; rowHeight: number }
+> = {
+  compact: { header: "px-3 py-2", cell: "px-3 py-1.5", rowHeight: 33 },
+  normal: { header: "px-4 py-4", cell: "px-4 py-3", rowHeight: 45 },
+  comfortable: { header: "px-4 py-5", cell: "px-4 py-4", rowHeight: 53 },
+};
+
+/** Line box (px) contributed by the `size` prop's font-size class (`text-xs|sm|lg`). */
+export const sizeLineHeights: Record<TableSize, number> = { sm: 16, md: 20, lg: 28 };
+
+/**
+ * Row height (px) for a given `size` + `density`, matching the real rendered
+ * row: cell vertical padding + the size line box + 1px divide-y border.
+ * `densityStyles[density].rowHeight` is the `md` baseline.
+ */
+export function getRowHeight(size: TableSize, density: TableDensity): number {
+  return densityStyles[density].rowHeight - sizeLineHeights.md + sizeLineHeights[size];
+}
+
+/**
+ * Static horizontal alignment classes for columns. Kept as full literal
+ * strings so Tailwind's scanner can see them (never build them dynamically).
+ */
+export const tableAlignClasses: Record<"left" | "center" | "right", string> = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+};

package/src/utils/styles.ts

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import type { CSSProperties } from "react";
 import { inputSizeTokens } from "@/theme/theme";
+import { densityStyles, type TableDensity } from "@/types/table.types";
 
 /** Theme shape expected from `theme.input` (used by input-like components). */
 export type InputThemeLike = {
@@ -76,8 +77,8 @@ export const tableContainer = "rounded-xl shadow-sm border border-secondary-200
 
 export const tableHeaderRow = "bg-secondary-50 border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500";
 
-export function tableHeaderCell(className?: string) {
-  return clsx("px-4 py-4 align-top", className);
+export function tableHeaderCell(className?: string, density: TableDensity = "normal") {
+  return clsx(densityStyles[density].header, "align-top", className);
 }
 
 export const tableSortButtonActive = "bg-secondary-200 text-secondary-900";
@@ -87,8 +88,12 @@ export const tableBody = "divide-y divide-secondary-100";
 
 export const tableRow = "hover:bg-secondary-50/50 transition-colors duration-150 group";
 
-export function tableCell(className?: string) {
-  return clsx("px-4 py-3 align-middle", className);
+export const tableRowClickable = "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-inset";
+
+export const tableCardClickable = "cursor-pointer rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+
+export function tableCell(className?: string, density: TableDensity = "normal") {
+  return clsx(densityStyles[density].cell, "align-middle", className);
 }
 
 export const tableActionsCell = "flex items-center justify-center gap-2";

package/src/utils/table.utils.ts

@@ -8,3 +8,34 @@ export const formatCurrencyMX = (value: number) => {
 export const getNestedValue = (obj: any, path: string) => {
     return path.split('.').reduce((acc, part) => acc && acc[part], obj);
 };
+
+/**
+ * CSS selector matching any element that should swallow a row/card click
+ * instead of letting it bubble up to the row activation handler. Covers native
+ * interactive elements plus anything explicitly opted out with
+ * `data-row-click-ignore`.
+ */
+export const ROW_CLICK_IGNORE_SELECTOR =
+  'button, a, input, select, textarea, [role="button"], [role="link"], [data-row-click-ignore]';
+
+/**
+ * Returns `true` when the event target (or one of its ancestors) is an
+ * interactive element that must not trigger the row/card `onRowClick` handler.
+ *
+ * @param target - The event target to inspect (usually `event.target`).
+ * @param boundary - Optional activation container (usually `event.currentTarget`).
+ *   When the matched interactive element is the boundary itself it is ignored,
+ *   because the cards-view wrapper carries `role="button"` for accessibility and
+ *   would otherwise swallow its own activation. Only interactive descendants
+ *   block the handler.
+ */
+export function isInteractiveTarget(
+  target: EventTarget | null,
+  boundary: EventTarget | null = null
+): boolean {
+  if (!(target instanceof Element)) return false;
+  const interactive = target.closest(ROW_CLICK_IGNORE_SELECTOR);
+  if (!interactive) return false;
+  if (boundary instanceof Node && interactive === boundary) return false;
+  return true;
+}