@axzydev/axzy_ui_system 1.2.8 → 1.2.11

package/src/components/select/select.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { FaAngleDown } from "react-icons/fa";
 import { ITSelectProps } from "./select.props";
 import ITText from "@/components/text/text";
+import { inputError, inputLabel } from "@/utils/styles";
 
 export default function ITSelect({
   name,
@@ -80,10 +81,7 @@ export default function ITSelect({
           <ITText
             as="label"
             htmlFor={name}
-            className={clsx(
-              "text-sm font-medium text-gray-700 dark:text-slate-300 pt-0",
-              { "text-red-500": hasError }
-            )}
+            className={inputLabel(hasError)}
           >
             <ITText as="span">{label}</ITText>
             {required && <ITText as="span" className="text-red-500 ml-1">*</ITText>}
@@ -110,11 +108,11 @@ export default function ITSelect({
               )}
               style={getStyle()}
             >
-              <option value=""><ITText as="span">{placeholder || "Selecciona una opción"}</ITText></option>
+              <option value="">{placeholder || "Selecciona una opción"}</option>
               {
                 readOnly ? (
                   <option value={value} disabled>
-                    <ITText as="span">{options.find((option) => option[valueField] === value)?.[labelField]}</ITText>
+                    {options.find((option) => option[valueField] === value)?.[labelField]}
                   </option>
                 ) : (
                   options.map((option) => (
@@ -123,7 +121,7 @@ export default function ITSelect({
                       value={option[valueField]}
                       title={option[labelField]}
                     >
-                      <ITText as="span">{option[labelField]}</ITText>
+                      {option[labelField]}
                     </option>
                   ))
                 )
@@ -136,7 +134,7 @@ export default function ITSelect({
           {/* Validation message aligned with select */}
           {hasError && (
             <div className="flex-shrink-0 min-w-[140px] flex items-center pt-3">
-              <ITText as="p" className="text-red-500 text-xs">{errorMessage}</ITText>
+              <ITText as="p" className={inputError}>{errorMessage}</ITText>
             </div>
           )}
         </div>

package/src/components/sidebar/sidebar.tsx

@@ -126,7 +126,7 @@ export default function ITSidebar({
       style={{
         zIndex: 50,
         backgroundColor: "var(--sidebar-bg, rgba(255, 255, 255, 0.90))",
-        borderRight: "1px solid var(--sidebar-border, #e2e8f0)",
+        borderRight: "1px solid var(--sidebar-border, var(--color-secondary-200))",
         WebkitBackdropFilter: 'blur(12px)',
         backdropFilter: 'blur(12px)',
       }}
@@ -143,12 +143,12 @@ export default function ITSidebar({
                   ${isSidebarCollapsed ? "justify-center p-2.5 mb-2" : "justify-between px-3.5 py-3 mb-1"}
                 `}
                 style={{
-                  backgroundColor: item.isActive ? "var(--sidebar-active-bg, #f8fafc)" : 'transparent',
+                  backgroundColor: item.isActive ? "var(--sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
                   boxShadow: item.isActive ? '0 1px 2px 0 rgba(0, 0, 0, 0.05)' : 'none',
-                  border: item.isActive ? "1px solid var(--sidebar-border, #e2e8f0)" : '1px solid transparent'
+                  border: item.isActive ? "1px solid var(--sidebar-border, var(--color-secondary-200))" : '1px solid transparent'
                 }}
                 onMouseEnter={(e) => {
-                  if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, #f1f5f9)";
+                  if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, var(--color-secondary-100))";
                 }}
                 onMouseLeave={(e) => {
                   if (!item.isActive) e.currentTarget.style.backgroundColor = 'transparent';
@@ -193,7 +193,7 @@ export default function ITSidebar({
 
                 {!isSidebarCollapsed && item.subitems && item.subitems.length > 0 && (
                   <div className={`flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`}
-                    style={{ color: item.isActive ? "var(--sidebar-active-color, #0f172a)" : "var(--sidebar-icon-color, #64748b)", opacity: 0.7 }}>
+                    style={{ color: item.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 }}>
                     <FaChevronDown className="w-3 h-3" />
                   </div>
                 )}
@@ -220,15 +220,15 @@ export default function ITSidebar({
               {/* Glassmorphism Collapsed Tooltip / Submenu */}
               {isSidebarCollapsed && (
                 <div
-                  className="absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-50 min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]"
+                  className="absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-[70] min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]"
                   style={{
                     backgroundColor: "var(--sidebar-bg, #ffffff)",
-                    border: "1px solid var(--sidebar-border, #e2e8f0)",
+                    border: "1px solid var(--sidebar-border, var(--color-secondary-200))",
                     WebkitBackdropFilter: 'blur(16px)',
                     backdropFilter: 'blur(16px)',
                   }}
                 >
-                  <div className="px-5 py-4 flex items-center gap-3 font-semibold border-b" style={{ borderColor: "var(--sidebar-border, #e2e8f0)", color: "var(--sidebar-active-color, #0f172a)" }}>
+                  <div className="px-5 py-4 flex items-center gap-3 font-semibold border-b" style={{ borderColor: "var(--sidebar-border, var(--color-secondary-200))", color: "var(--sidebar-active-color, var(--color-secondary-900))" }}>
                     {item.icon && <span style={{ color: "var(--sidebar-active-icon, #10b981)" }} className="text-xl drop-shadow-sm">{item.icon}</span>}
                     <ITText as="span" className="tracking-wide text-[15px]">{item.label}</ITText>
                   </div>
@@ -249,8 +249,8 @@ export default function ITSidebar({
                               }}
                             />
                           )}
-                          <span className={`w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`} style={{ backgroundColor: subitem.isActive ? "var(--sidebar-active-icon, #10b981)" : "var(--sidebar-icon-color, #94a3b8)" }} />
-                          <ITText as="span" style={{ color: subitem.isActive ? "var(--sidebar-active-color, #0f172a)" : "var(--sidebar-label-color, #475569)", fontWeight: subitem.isActive ? 600 : 500 }}>{subitem.label}</ITText>
+                          <span className={`w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`} style={{ backgroundColor: subitem.isActive ? "var(--sidebar-active-icon, #10b981)" : "var(--sidebar-icon-color, var(--color-secondary-400))" }} />
+                          <ITText as="span" style={{ color: subitem.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-label-color, var(--color-secondary-600))", fontWeight: subitem.isActive ? 600 : 500 }}>{subitem.label}</ITText>
                         </div>
                       ))}
                     </div>
@@ -267,7 +267,7 @@ export default function ITSidebar({
                     className="ml-5 flex flex-col gap-0.5 py-1"
                     style={{
                       borderLeft: subitemConnector === '|'
-                        ? "1px solid var(--sidebar-border, #e2e8f0)"
+                        ? "1px solid var(--sidebar-border, var(--color-secondary-200))"
                         : 'none'
                     }}
                   >
@@ -280,8 +280,8 @@ export default function ITSidebar({
                           }}
                           className={`flex items-center gap-2.5 w-full text-left px-3 py-2 rounded-xl transition-all duration-300`}
                           style={{
-                            color: subitem.isActive ? "var(--sidebar-active-color, #0f172a)" : "var(--sidebar-label-color, #475569)",
-                            backgroundColor: subitem.isActive ? "var(--sidebar-active-bg, #f8fafc)" : 'transparent',
+                            color: subitem.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-label-color, var(--color-secondary-600))",
+                            backgroundColor: subitem.isActive ? "var(--sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
                             fontSize: '0.85rem',
                             fontWeight: subitem.isActive ? 600 : 500,
                             letterSpacing: '0.01em',
@@ -289,7 +289,7 @@ export default function ITSidebar({
                           }}
                           onMouseEnter={(e) => {
                             if (!subitem.isActive) {
-                              e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, #f1f5f9)";
+                              e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, var(--color-secondary-100))";
                               e.currentTarget.style.transform = 'translateX(3px)';
                             }
                           }}
@@ -315,7 +315,7 @@ export default function ITSidebar({
                               style={{
                                 backgroundColor: subitem.isActive
                                   ? "var(--sidebar-active-icon, #10b981)"
-                                  : "var(--sidebar-icon-color, #94a3b8)"
+                                  : "var(--sidebar-icon-color, var(--color-secondary-400))"
                               }}
                             />
                           )}

package/src/components/stepper/stepper.props.ts

@@ -2,9 +2,13 @@ import React from "react";
 
 export type IconType = React.ReactNode;
 
+/** A single step in an `ITStepper` flow. */
 export interface Step {
+  /** Label shown next to the step indicator. */
   label: string;
+  /** Content rendered in the panel while this step is active. */
   content: React.ReactNode;
+  /** Custom icon shown in the step indicator when the stepper's `useIcons` is true. */
   icon?: IconType;
 }
 

package/src/components/table/table.props.ts

@@ -1,31 +1,49 @@
 import { TableSize, TableVariants } from "@/types/table.types";
 
+/** Data type of a table column, controls default rendering, filter UI, and sort comparison. */
 export type ColumnType = "string" | "date" | "number" | "boolean" | "actions" | "catalog";
 
+/** A single selectable entry for a `"catalog"`-type column's filter/value lookup. */
 export interface CatalogOption {
+  /** Unique identifier matched against the row's field value. */
   id: string | number;
+  /** Human-readable label shown in the filter dropdown and resolved cell display. */
   name: string;
 }
 
+/** Definition of a single column for ITTable. */
 export interface Column<T = any> {
+  /** Field key on the row object this column reads from (supports dot-notation for nested values, e.g. `"address.city"`). */
   key: string;
+  /** Column header text. */
   label: string;
+  /** Additional CSS classes applied to both the header (`<th>`) and body (`<td>`) cells of this column. */
   className?: string;
-  currencyMX?: boolean; 
+  /** Formats numeric values as Mexican pesos (MXN) via `Intl`-based currency formatting. Only applies when `type` is `"number"`. @default false */
+  currencyMX?: boolean;
+  /** Custom action buttons/content rendered for a `"actions"`-type column. Receives the full row object. */
   actions?: (row: T) => React.ReactNode;
+  /** Enables per-column filtering. Pass `true` for a text/number/boolean filter matching `type`, or `"catalog"` to filter against `catalogOptions`. @default false */
   filter?: boolean | "catalog";
+  /** Column data type. Drives default cell rendering, filter UI, and sort comparison. */
   type: ColumnType;
+  /** Whether clicking the header sorts by this column. Ignored for `type: "actions"`. @default false */
   sortable?: boolean;
+  /** Custom cell renderer, takes precedence over the default type-based rendering. Receives the full row object. */
   render?: (row: T) => React.ReactNode;
+  /** Custom inline-edit input renderer (used by table variants that support inline editing). */
   editComponent?: (props: {
     value: any;
     onChange: (value: any) => void;
     rowData: T;
   }) => React.ReactNode;
-  // Nuevas propiedades para catálogo
+  /** Configuration for `type: "catalog"` columns: the lookup options plus loading/error state for async catalogs. */
   catalogOptions?: {
+    /** Available catalog entries used to resolve/filter the raw id stored on the row. */
     data: CatalogOption[];
+    /** Shows a loading spinner in the filter UI while the catalog is being fetched. @default false */
     loading?: boolean;
+    /** Shows an error state in the filter UI when the catalog failed to load. @default false */
     error?: boolean;
   };
 }
@@ -57,4 +75,4 @@ export interface ITTableProps<T> {
   showVerticalBorder?: boolean;
   /** Custom class for vertical borders (overrides the default subtle gray). */
   verticalBorderClassname?: string;
-}
+}

package/src/components/table/table.tsx

@@ -15,6 +15,17 @@ import ITPagination from "../pagination/pagination";
 import ITSelect from "../select/select";
 import { Column, ITTableProps } from "./table.props";
 import ITText from "@/components/text/text";
+import {
+  tableActionsCell,
+  tableBody,
+  tableCell,
+  tableCellText,
+  tableContainer,
+  tableEmptyContent,
+  tableHeaderCell,
+  tableHeaderRow,
+  tableRow,
+} from "@/utils/styles";
 
 const getNestedValue = (obj: unknown, path: string) => {
   return path.split(".").reduce((acc, part) => acc && acc[part], obj);
@@ -211,7 +222,7 @@ export default function ITTable<T extends Record<string, unknown>>({
       }
 
       if (col.catalogOptions.error) {
-        return <ITText as="span" className="text-red-500 text-xs">Error cargando</ITText>;
+        return <ITText as="span" className="text-danger-500 text-xs">Error cargando</ITText>;
       }
 
       return (
@@ -260,13 +271,13 @@ export default function ITTable<T extends Record<string, unknown>>({
       case "boolean":
         return value ? (
           <FaCheck
-            className="text-green-500"
+            className="text-success-500"
             aria-label="Verdadero"
             title="Verdadero"
           />
         ) : (
           <FaTimes
-            className="text-red-500"
+            className="text-danger-500"
             aria-label="Falso"
             title="Falso"
           />
@@ -312,7 +323,7 @@ export default function ITTable<T extends Record<string, unknown>>({
 
   return (
     <div className={clsx("space-y-4 w-full", containerClassName)}>
-      <div className="rounded-xl shadow-sm overflow-hidden" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+      <div className={tableContainer} style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
         {/* Header outside overflow */}
         {title && (
           <div className="px-6 py-5 flex items-center justify-between" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
@@ -382,7 +393,7 @@ export default function ITTable<T extends Record<string, unknown>>({
                 </div>
               ))
             ) : (
-              <div className="flex flex-col items-center justify-center py-12 text-secondary-400">
+              <div className={clsx(tableEmptyContent, "py-12")}>
                 <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
                 <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
               </div>
@@ -400,12 +411,12 @@ export default function ITTable<T extends Record<string, unknown>>({
               )}
             >
               <thead>
-                <tr className="bg-secondary-50 text-xs uppercase tracking-wider font-semibold text-slate-700 dark:text-slate-200">
+                <tr className={clsx(tableHeaderRow, "dark:text-slate-200")}>
                   {columns.map((col) => (
                     <th
                       key={col.key}
                       scope="col"
-                      className={clsx("px-4 py-4 align-top", col.className)}
+                      className={tableHeaderCell(col.className)}
                     >
                       <div className="flex flex-col gap-3 min-w-[150px]">
                         <div className="flex items-center justify-between gap-2">
@@ -431,24 +442,24 @@ export default function ITTable<T extends Record<string, unknown>>({
                   ))}
                 </tr>
               </thead>
-              <tbody className="divide-y divide-slate-100 dark:divide-slate-700/30">
+              <tbody className={clsx(tableBody, "dark:divide-slate-700/30")}>
                 {currentData.length > 0 ? (
                   currentData.map((row, rowIndex) => (
                     <tr
                       key={rowIndex}
-                      className={clsx("hover:bg-secondary-50/50 transition-colors duration-150 group", variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20")}
+                      className={clsx(tableRow, variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20")}
                     >
                       {columns.map((col) => (
                         <td
                           key={`${rowIndex}-${col.key}`}
-                          className={clsx("px-4 py-3 align-middle", col.className)}
+                          className={tableCell(col.className)}
                         >
                           {col.type === "actions" ? (
-                            <div className="flex items-center justify-center gap-2">
+                            <div className={tableActionsCell}>
                               {renderCellContent(col, row) as React.ReactNode}
                             </div>
                           ) : (
-                            <div className="text-secondary-700 font-medium">
+                            <div className={tableCellText}>
                               {renderCellContent(col, row) as React.ReactNode}
                             </div>
                           )}
@@ -459,7 +470,7 @@ export default function ITTable<T extends Record<string, unknown>>({
                 ) : (
                   <tr>
                     <td colSpan={columns.length} className="px-6 py-12 text-center">
-                      <div className="flex flex-col items-center justify-center text-secondary-400">
+                      <div className={tableEmptyContent}>
                         <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
                         <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
                       </div>

package/src/components/theme-provider/themeProvider.props.ts

@@ -1,31 +1,49 @@
 export interface ITThemePalette {
+  /** Main brand accent color (hex). Drives primary buttons, active nav items, focus rings, links, and the `--color-primary` CSS variable. @default "#06b6d4" */
   primary: string;
+  /** Secondary/neutral accent color (hex). Used for less prominent actions and secondary badges/buttons. @default "#6b7280" */
   secondary: string;
+  /** Tertiary accent color (hex), used for a third level of emphasis (e.g. alternate badges, chart accents). @default "#8b5cf6" */
   ternary: string;
+  /** Semantic color for destructive/error states (hex): delete buttons, error badges, invalid form fields. @default "#ef4444" */
   danger: string;
+  /** Semantic color for success/confirmation states (hex): success badges, completed steps, positive stats. @default "#22c55e" */
   success: string;
+  /** Semantic color for informational states (hex): info banners/badges, neutral notices. @default "#3b82f6" */
   info: string;
+  /** Semantic color for alert/caution states (hex), distinct from `warning`. Used by components that need a stronger visual cue than warning. @default "#f97316" */
   alert: string;
+  /** Semantic color for warning states (hex): warning badges/banners, pending states. @default "#eab308" */
   warning: string;
+  /** Colors for the app shell's sidebar and top navbar (ITSidebar, ITNavbar, ITTopbar, ITLayout). */
   layout: {
+    /** Background color of the sidebar (hex). @default "#ffffff" */
     sidebarBg: string;
+    /** Text/icon color used on the sidebar. @default "#334155" */
     sidebarText: string;
+    /** Background color of the top navigation bar (hex). @default "#ffffff" */
     navbarBg: string;
+    /** Text/icon color used on the top navigation bar. @default "#1e293b" */
     navbarText: string;
   };
+  /** Colors for ITTable/ITDataTable/ITSearchTable header and rows. */
   table: {
+    /** Background color of the table header row (hex). @default "#f8fafc" */
     headerBg: string;
+    /** Text color of the table header row. @default "#334155" */
     headerText: string;
+    /** Background color of table body rows (hex). @default "#ffffff" */
     rowBg: string;
+    /** Text color of table body rows. @default "#1e293b" */
     rowText: string;
   };
 }
 
 export interface ITThemeProviderProps {
-  /** Partial palette overrides merged with the default theme. Supports primary, secondary, tertiary, danger, success, info, alert, warning, layout, and table colors. */
+  /** Partial palette overrides merged (deep merge) with the default theme. Supports primary, secondary, ternary, danger, success, info, alert, warning, layout, and table colors. Persisted to `localStorage` under `"it-theme-palette"` once the user edits it via the FAB/drawer. */
   theme?: Partial<ITThemePalette>;
-  /** The subtree that receives the theme context and CSS variables. */
+  /** The subtree that receives the theme context and CSS variables. Must wrap your entire app (or the portion that uses AXZY UI System components) once, near the root. */
   children: React.ReactNode;
-  /** Whether to show the floating action button for opening the theme designer drawer. */
+  /** Whether to render the floating action button (bottom-right) that opens the live theme-designer drawer, letting end users tweak colors and persist their choice. Set to `false` to hide the FAB in production and only theme via the `theme` prop. @default true */
   showFab?: boolean;
 }

package/src/components/time-picker/timePicker.tsx

@@ -227,7 +227,7 @@ export default function ITTimePicker({
       {isOpen && !disabled && (
         <div 
           ref={dropdownRef}
-          className="fixed z-[9999] bg-white border border-gray-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown"
+          className="fixed z-[70] bg-white border border-gray-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown"
           style={{
             top: `${dropdownPosition.top}px`,
             left: `${dropdownPosition.left}px`,

package/src/components/toast/toast.tsx

@@ -80,7 +80,7 @@ export default function ITToast({
   return (
     <div
       className={clsx(
-        "fixed z-50 p-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300 text-white min-w-[300px]",
+        "fixed z-[80] p-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300 text-white min-w-[300px]",
         positionStyles[position],
         {
           "opacity-100 translate-y-0 scale-100": isVisible,

package/src/components/tooltip/tooltip.tsx

@@ -62,7 +62,7 @@ export default function ITTooltip({
     >
       {children}
       {visible && (
-        <div className={clsx("absolute z-[200] pointer-events-none", positionClasses[position])}>
+        <div className={clsx("absolute z-[70] pointer-events-none", positionClasses[position])}>
           <div className="bg-slate-800 dark:bg-slate-700 text-white text-xs rounded-lg px-2.5 py-1.5 whitespace-nowrap shadow-lg">
             <ITText as="span">{content}</ITText>
           </div>

package/src/components/topbar/topbar.tsx

@@ -186,7 +186,7 @@ export default function ITTopBar({
             <div
               ref={userMenuRef}
               className={`
-                absolute right-0 mt-3 w-64 rounded-2xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] z-50 overflow-hidden transform origin-top-right transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]
+                absolute right-0 mt-3 w-64 rounded-2xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] z-[70] overflow-hidden transform origin-top-right transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]
                 ${isUserMenuOpen ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-2 pointer-events-none"}
               `}
               style={{ 

package/src/dev.css

@@ -1,2 +1,2 @@
 @import "tailwindcss";
-@import "./index.css";
+@import "./index.css";

package/src/hooks/useClickOutside.ts

@@ -6,6 +6,14 @@ const useClickOutside = (
 ) => {
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Element | null;
+      const clickedDialog = target?.closest("[data-it-dialog]");
+      const currentDialog = ref.current?.closest("[data-it-dialog]");
+
+      // Nested dialogs must not close their parent when interacting with the
+      // child overlay or its contents.
+      if (clickedDialog && clickedDialog !== currentDialog) return;
+
       if (ref.current && !ref.current.contains(event.target as Node)) {
         callback();
       }

package/src/hooks/useTableState.ts

@@ -42,11 +42,14 @@ export function useTableState({
 
   const goToPage = useCallback(
     (page: number) => {
-      if (page >= 1 && page <= totalPages) {
+      // No limitar contra `totalPages`: ese estado vive en useTableState y
+      // nunca se sincroniza con el total real (ITDataTable calcula el suyo).
+      // ITPagination ya deshabilita la navegación más allá de la última página.
+      if (page >= 1) {
         setCurrentPage(page);
       }
     },
-    [totalPages]
+    []
   );
 
   const handleItemsPerPageChange = useCallback((value: number) => {

package/src/index.css

@@ -5,7 +5,7 @@
 
 @variant dark (&:is(.dark &));
 
-:root, :host {
+@theme {
   --animate-fadeIn: fadeIn 0.5s ease-out forwards;
   --animate-fade-in: fadeIn 0.5s ease-out forwards;