@axzydev/axzy_ui_system 1.2.13 → 1.2.14

package/src/components/{search-select → molecules/search-select}/index.ts

@@ -1,2 +1,2 @@
 export { default as ITSearchSelect } from "./search-select";
-export * from "./search-select.props";
+export * from "./search-select.props";

package/src/components/{search-select → molecules/search-select}/search-select.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './search-select.stories';
+import * as StoriesData from './search-select.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITSearchSelect
 

package/src/components/{search-select → molecules/search-select}/search-select.props.ts

@@ -1,4 +1,5 @@
 import { FocusEvent } from "react";
+import { SizesTypes } from "@/types/sizes.types";
 
 /** Represents an option in the search-select dropdown. */
 export interface ITSearchSelectOption {
@@ -42,6 +43,8 @@ export interface ITSearchSelectProps {
   error?: string | boolean;
   /** Whether the field is read-only. */
   readOnly?: boolean;
+  /** Size preset: "sm" | "md" | "lg". @default "md" */
+  size?: SizesTypes;
   /** Callback for server-side search (Mode 2: API connection). Receives the search query string. */
   onSearch?: (query: string) => void;
   /** Whether options are being loaded from an external API. */

package/src/components/{search-select → molecules/search-select}/search-select.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITSearchSelect from "./search-select";
+import ITSearchSelect from "@/components/molecules/search-select/search-select";
 import { useState } from "react";
 import { ITSearchSelectOption } from "./search-select.props";
 
@@ -9,7 +9,6 @@ const meta: Meta<typeof ITSearchSelect> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     disabled: { control: "boolean" },
     required: { control: "boolean" },

package/src/components/{search-select → molecules/search-select}/search-select.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
 import clsx from "clsx";
-import { FaAngleDown, FaSearch, FaTimes } from "react-icons/fa";
+import { FaSearch } from "react-icons/fa";
 import { ITSearchSelectProps, ITSearchSelectOption } from "./search-select.props";
-import { theme } from "@/theme/theme";
-import ITText from "@/components/text/text";
+import { theme, inputSizeTokens } from "@/theme/theme";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Searchable dropdown select with local client-side filtering and server-side search via API.
@@ -53,6 +53,7 @@ export default function ITSearchSelect({
   onSearch,
   isLoading = false,
   noResultsMessage = "No se encontraron resultados",
+  size = "md",
 }: ITSearchSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
@@ -146,16 +147,17 @@ export default function ITSearchSelect({
   const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
   
   const getInputStyle = () => {
+    const sizeConfig = inputSizeTokens[size] ?? inputSizeTokens.md;
     const style: React.CSSProperties = {
       backgroundColor: inputTheme.backgroundColor || "#ffffff",
       borderColor: inputTheme.borderColor || "var(--color-secondary-300)",
       borderRadius: inputTheme.borderRadius || "0.5rem",
-      padding: inputTheme.padding || "0.5rem 0.75rem",
-      fontSize: inputTheme.fontSize || "0.875rem",
+      padding: sizeConfig.padding,
+      fontSize: sizeConfig.fontSize,
       borderWidth: '1px',
       borderStyle: 'solid',
       transition: 'all 0.2s',
-      color: 'var(--input-text-color, var(--color-secondary-900))',
+      color: 'var(--it-input-text-color, var(--color-secondary-900))',
       width: '100%',
     };
 

package/src/components/{select → molecules/select}/select.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './select.stories';
+import * as StoriesData from './select.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITSelect
 

package/src/components/{select → molecules/select}/select.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITSelect from "./select";
+import ITSelect from "@/components/molecules/select/select";
 import { useState } from "react";
 
 const meta: Meta<typeof ITSelect> = {
@@ -8,7 +8,6 @@ const meta: Meta<typeof ITSelect> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     disabled: { control: "boolean" },
     required: { control: "boolean" },

package/src/components/{select → molecules/select}/select.tsx

@@ -3,8 +3,8 @@ import clsx from "clsx";
 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";
+import ITText from "@/components/atoms/text/text";
+import { inputError, inputLabel, inputFieldStyle } from "@/utils/styles";
 
 export default function ITSelect({
   name,
@@ -22,6 +22,7 @@ export default function ITSelect({
   required,
   error,
   readOnly = false,
+  size = "md",
 }: ITSelectProps) {
   const [isFocused, setIsFocused] = useState(false);
   const [localTouched, setLocalTouched] = useState(false);
@@ -40,19 +41,10 @@ export default function ITSelect({
   const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
 
   const getStyle = () => {
-    const style: React.CSSProperties = {
-      backgroundColor: inputTheme.backgroundColor,
-      borderColor: inputTheme.borderColor,
-      borderRadius: inputTheme.borderRadius,
-      padding: inputTheme.padding,
-      fontSize: inputTheme.fontSize,
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      transition: 'all 0.2s',
-      color: 'var(--input-text-color, var(--color-secondary-900))',
-      appearance: 'none',
-      colorScheme: 'light dark',
-    };
+    const style = inputFieldStyle(inputTheme, size, {
+      appearance: "none",
+      colorScheme: "light dark",
+    });
 
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
@@ -97,7 +89,7 @@ export default function ITSelect({
               onBlur={(e) => {
                 setIsFocused(false);
                 setLocalTouched(true);
-                readOnly ? undefined : onBlur?.(e);
+                if (!readOnly) onBlur?.(e);
               }}
               onFocus={() => setIsFocused(true)}
               disabled={disabled}

package/src/components/{stat-card → molecules/stat-card}/stat-card.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './stat-card.stories';
+import * as StoriesData from './stat-card.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITStatCard
 

package/src/components/{stat-card → molecules/stat-card}/stat-card.stories.tsx

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITStatCard from "./stat-card";
-import { FaArrowUp, FaArrowDown } from "react-icons/fa";
+import ITStatCard from "@/components/molecules/stat-card/stat-card";
+import { FaArrowUp } from "react-icons/fa";
 
 const meta: Meta<typeof ITStatCard> = {
   title: "Components/Data Display/ITStatCard",
   component: ITStatCard,
-  tags: ["autodocs"],
 };
 
 export default meta;

package/src/components/{stat-card → molecules/stat-card}/stat-card.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { ITStatCardProps } from "./stat-card.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 const trendColors = {
   up: "text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30",

package/src/components/{stepper → molecules/stepper}/stepper.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './stepper.stories';
+import * as StoriesData from './stepper.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITStepper
 

package/src/components/{stepper → molecules/stepper}/stepper.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITStepper from "./stepper";
+import ITStepper from "@/components/molecules/stepper/stepper";
 import { useState } from "react";
 import { FaUser, FaIdCard, FaCheckCircle } from "react-icons/fa";
 
@@ -9,7 +9,6 @@ const meta: Meta<typeof ITStepper> = {
   parameters: {
     layout: "padded", // Gives the stepper breathing room
   },
-  tags: ["autodocs"],
   argTypes: {
     color: {
       control: "select",

package/src/components/{stepper → molecules/stepper}/stepper.tsx

@@ -1,10 +1,10 @@
 import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";
-import { ITStepperProps, Step } from "./stepper.props";
+import { ITStepperProps } from "./stepper.props";
 import { theme } from "@/theme/theme";
-import ITButton from "../button/button";
+import ITButton from "@/components/atoms/button/button";
 import { FaChevronLeft, FaChevronRight, FaCheck } from "react-icons/fa";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * A step-by-step wizard / progress indicator with animated content transitions,
@@ -61,14 +61,14 @@ export default function ITStepper({
 
     if (contentRef.current) {
       contentRef.current.classList.remove(
-        "animate-slide-in-left",
-        "animate-slide-in-right"
+        "it-stepper-slide-in-left",
+        "it-stepper-slide-in-right"
       );
       requestAnimationFrame(() => {
         contentRef.current?.classList.add(
           direction === "next"
-            ? "animate-slide-in-right"
-            : "animate-slide-in-left"
+            ? "it-stepper-slide-in-right"
+            : "it-stepper-slide-in-left"
         );
       });
     }
@@ -104,8 +104,7 @@ export default function ITStepper({
 
   const renderStepContent = (
     index: number,
-    isCompleted: boolean,
-    isActive: boolean
+    isCompleted: boolean
   ) => {
     const step = steps[index];
 
@@ -165,7 +164,7 @@ export default function ITStepper({
                     )}
                     style={isActive ? { backgroundColor: resolvedColor, borderColor: resolvedColor } : undefined}
                   >
-                    {renderStepContent(idx, isCompleted, isActive)}
+                    {renderStepContent(idx, isCompleted)}
                   </div>
 
                   <ITText

package/src/components/{table → molecules/table}/table.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './table.stories';
+import * as StoriesData from './table.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITTable
 

package/src/components/{table → molecules/table}/table.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import ITTable from "./table";
+import ITTable from "@/components/molecules/table/table";
 import { Column } from "./table.props";
-import ITBadget from "../badget/badget";
-import ITButton from "../button/button";
-import { FaEdit, FaTrash } from "react-icons/fa";
+import ITBadget from "@/components/atoms/badget/badget";
+import ITButton from "@/components/atoms/button/button";
+import { FaTrash } from "react-icons/fa";
 import { useState } from "react";
 
 const meta: Meta<typeof ITTable> = {
@@ -12,7 +12,6 @@ const meta: Meta<typeof ITTable> = {
   parameters: {
     layout: "padded", // Tables need more space
   },
-  tags: ["autodocs"],
   argTypes: {
     variant: {
       control: "select",
@@ -100,22 +99,6 @@ const advancedColumns: Column<User>[] = [
   },
 ];
 
-const actionsColumn: Column<User> = {
-  key: "actions",
-  label: "Actions",
-  type: "actions",
-  actions: (row) => (
-    <>
-      <ITButton size="small" variant="text" color="info" ariaLabel="Edit" onClick={() => alert(`Edit ${row.name}`)}>
-        <FaEdit />
-      </ITButton>
-      <ITButton size="small" variant="text" color="danger" ariaLabel="Delete" onClick={() => alert(`Delete ${row.name}`)}>
-        <FaTrash />
-      </ITButton>
-    </>
-  ),
-};
-
 
 // --- STORIES ---
 
@@ -163,7 +146,7 @@ const ActionsTableWrapper = (args: any) => {
         type: "actions",
         actions: (row) => (
           <>
-            <ITButton size="small" variant="text" color="danger" ariaLabel="Delete" onClick={() => setData(d => d.filter(item => item.id !== row.id))}>
+            <ITButton size="sm" variant="text" color="danger" ariaLabel="Delete" onClick={() => setData(d => d.filter(item => item.id !== row.id))}>
               <FaTrash />
             </ITButton>
           </>

package/src/components/{table → molecules/table}/table.tsx

@@ -10,11 +10,11 @@ import {
   FaThLarge
 } from "react-icons/fa";
 import { MdOutlineSwapVert } from "react-icons/md";
-import ITInput from "../input/input";
-import ITPagination from "../pagination/pagination";
-import ITSelect from "../select/select";
+import ITInput from "@/components/atoms/input/input";
+import ITPagination from "@/components/molecules/pagination/pagination";
+import ITSelect from "@/components/molecules/select/select";
 import { Column, ITTableProps } from "./table.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 import {
   tableActionsCell,
   tableBody,
@@ -26,16 +26,7 @@ import {
   tableHeaderRow,
   tableRow,
 } from "@/utils/styles";
-
-const getNestedValue = (obj: unknown, path: string) => {
-  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
-};
-export const formatCurrencyMX = (value: number) => {
-  return value.toLocaleString("es-MX", {
-    style: "currency",
-    currency: "MXN",
-  });
-};
+import { formatCurrencyMX, getNestedValue } from "@/utils/table.utils";
 
 /**
  * A feature-rich data table with per-column filtering, sortable columns,
@@ -57,7 +48,6 @@ export default function ITTable<T extends Record<string, unknown>>({
   columns,
   data = [],
   containerClassName,
-  className,
   variant = "default",
   size = "md",
   itemsPerPageOptions = [5, 10, 20],

package/src/components/{tabs → molecules/tabs}/tabs.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './tabs.stories';
+import * as StoriesData from './tabs.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITTabs
 

package/src/components/{tabs → molecules/tabs}/tabs.stories.tsx

@@ -1,10 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITTabs from './tabs';
+import ITTabs from '@/components/molecules/tabs/tabs';
 
 const meta: Meta<typeof ITTabs> = {
   title: 'Components/ITTabs',
   component: ITTabs,
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/components/{tabs → molecules/tabs}/tabs.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ITTabsProps } from './tabs.props';
 import { clsx } from 'clsx';
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Tabbed navigation component with "line" and "pill" visual variants.

package/src/components/{time-picker → molecules/time-picker}/timePicker.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './timePicker.stories';
+import * as StoriesData from './timePicker.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITTimePicker
 
@@ -22,7 +22,7 @@ Time selection input with a dual-column dropdown (hours / minutes). Supports man
 | `error` | `string \| boolean` | — | Validation error message or boolean to show error state. |
 | `disabled` | `boolean` | `false` | Disables the time picker when true. |
 | `className` | `string` | — | Additional CSS classes for the wrapper. |
-| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Size preset controlling padding and font size. |
+| `size` | `SizesTypes` | `"md"` | Size preset: `"sm"`, `"md"`, `"lg"`. |
 | `variant` | `"primary" \| "secondary" \| "danger" \| "success" \| "warning" \| "info" \| "purple"` | `"primary"` | Style variant for the input. |
 | `color` | `"primary" \| "secondary" \| "danger" \| "success" \| "warning" \| "info" \| "purple" \| string` | `"primary"` | Theme color used for the dropdown highlight and confirm button. Accepts semantic keys or raw hex. |
 

package/src/components/{time-picker → molecules/time-picker}/timePicker.props.ts

@@ -1,3 +1,5 @@
+import { SizesTypes } from "@/types/sizes.types";
+
 export interface ITTimePickerProps {
   /** Form field name attribute and key for the change event. */
   name: string;
@@ -21,8 +23,8 @@ export interface ITTimePickerProps {
   disabled?: boolean;
   /** Additional CSS classes for the wrapper. */
   className?: string;
-  /** Size preset: "small" | "medium" | "large". */
-  size?: "small" | "medium" | "large";
+  /** Size preset: "sm" | "md" | "lg". @default "md" */
+  size?: SizesTypes;
   /** Style variant for the input: "primary" | "secondary" | "danger" | "success" | "warning" | "info" | "purple". */
   variant?: "primary" | "secondary" | "danger" | "success" | "warning" | "info" | "purple";
   /** Theme color used for the dropdown highlight and confirm button. Accepts semantic keys or raw hex. */

package/src/components/{time-picker → molecules/time-picker}/timePicker.stories.tsx

@@ -8,7 +8,6 @@ const meta: Meta<typeof ITTimePicker> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     color: {
       control: "select",
@@ -110,9 +109,9 @@ export const Validation: Story = {
 export const Sizes: Story = {
   render: (args) => (
     <div className="flex flex-col gap-6">
-      <TimePickerWrapper {...args} size="small" label="Small TimePicker" name="sm" />
-      <TimePickerWrapper {...args} size="medium" label="Medium TimePicker" name="md" />
-      <TimePickerWrapper {...args} size="large" label="Large TimePicker" name="lg" />
+      <TimePickerWrapper {...args} size="sm" label="Small TimePicker" name="sm" />
+      <TimePickerWrapper {...args} size="md" label="Medium TimePicker" name="md" />
+      <TimePickerWrapper {...args} size="lg" label="Large TimePicker" name="lg" />
     </div>
   ),
   args: {

package/src/components/{time-picker → molecules/time-picker}/timePicker.tsx

@@ -1,12 +1,12 @@
 import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";
 import { FaClock } from "react-icons/fa";
-import ITInput from "../input/input";
-import ITButton from "../button/button";
+import ITInput from "@/components/atoms/input/input";
+import ITButton from "@/components/atoms/button/button";
 import useClickOutside from "@/hooks/useClickOutside";
 import { theme } from "@/theme/theme";
 import { ITTimePickerProps } from "./timePicker.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Time selection input with a dual-column dropdown (hours / minutes).
@@ -41,7 +41,7 @@ export default function ITTimePicker({
   error,
   disabled,
   className,
-  size = "medium",
+  size = "md",
   variant = "primary",
   color = "primary",
 }: ITTimePickerProps) {
@@ -325,7 +325,7 @@ export default function ITTimePicker({
             <ITButton
               variant="solid"
               color={color as any}
-              size="small"
+              size="sm"
               onClick={handleConfirm}
             >
               <ITText as="span">Aceptar</ITText>

package/src/components/{confirm-dialog → organisms/confirm-dialog}/confirm-dialog.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './confirm-dialog.stories';
+import * as StoriesData from './confirm-dialog.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITConfirmDialog
 

package/src/components/{confirm-dialog → organisms/confirm-dialog}/confirm-dialog.stories.tsx

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import ITConfirmDialog from "./confirm-dialog";
-import ITButton from "../button/button";
+import ITConfirmDialog from "@/components/organisms/confirm-dialog/confirm-dialog";
+import ITButton from "@/components/atoms/button/button";
 
 const meta: Meta<typeof ITConfirmDialog> = {
   title: "Components/Overlay/ITConfirmDialog",
   component: ITConfirmDialog,
-  tags: ["autodocs"],
 };
 
 export default meta;

package/src/components/{confirm-dialog → organisms/confirm-dialog}/confirm-dialog.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import { ITConfirmDialogProps } from "./confirm-dialog.props";
-import ITButton from "../button/button";
+import ITButton from "@/components/atoms/button/button";
 import { FaExclamationTriangle } from "react-icons/fa";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Confirmation modal dialog for destructive or critical actions.
@@ -55,8 +55,8 @@ export default function ITConfirmDialog({
           </div>
         </div>
         <div className="flex justify-end gap-3 mt-6">
-          <ITButton label={cancelLabel} variant="outlined" size="small" onClick={onClose} disabled={loading} />
-          <ITButton label={confirmLabel} color={variant} size="small" onClick={onConfirm} disabled={loading} />
+          <ITButton label={cancelLabel} variant="outlined" size="sm" onClick={onClose} disabled={loading} />
+          <ITButton label={confirmLabel} color={variant} size="sm" onClick={onConfirm} disabled={loading} />
         </div>
       </div>
     </div>

package/src/components/{data-table → organisms/data-table}/ITDataTable.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './ITDataTable.stories';
+import * as StoriesData from './ITDataTable.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITDataTable
 

package/src/components/{data-table → organisms/data-table}/ITDataTable.stories.tsx

@@ -2,14 +2,13 @@ import React, { useState, useCallback, useMemo } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import ITDataTable from './dataTable';
 import { ITDataTableFetchParams, ITDataTableResponse } from './dataTable.props';
-import ITCard from '../card/card';
-import ITBadget from '../badget/badget';
-import ITDatePicker from '../date-picker/datePicker';
+import ITCard from '@/components/molecules/card/card';
+import ITBadget from '@/components/atoms/badget/badget';
+import ITDatePicker from '@/components/molecules/date-picker/datePicker';
 
 const meta: Meta<typeof ITDataTable> = {
   title: 'Data Display/ITDataTable',
   component: ITDataTable,
-  tags: ['autodocs'],
   decorators: [
     (Story) => (
       <div className="p-8 bg-gray-50 min-h-screen">

package/src/components/{data-table → organisms/data-table}/dataTable.props.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Column } from "../table/table.props";
+import { Column } from "@/components/molecules/table/table.props";
 
 /** Parameters passed to `fetchData` every time pagination, filters, or sorting change. */
 export interface ITDataTableFetchParams {

package/src/components/{data-table → organisms/data-table}/dataTable.tsx

@@ -4,13 +4,13 @@ import clsx from "clsx";
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import { FaCheck, FaSpinner, FaTimes, FaTable, FaThLarge } from "react-icons/fa";
 import { MdOutlineSwapVert } from "react-icons/md";
-import ITInput from "../input/input";
-import ITPagination from "../pagination/pagination";
-import ITSelect from "../select/select";
-import { Column } from "../table/table.props";
-import { formatCurrencyMX } from "../table/table";
+import ITInput from "@/components/atoms/input/input";
+import ITPagination from "@/components/molecules/pagination/pagination";
+import ITSelect from "@/components/molecules/select/select";
+import { Column } from "@/components/molecules/table/table.props";
+import { formatCurrencyMX } from "@/utils/table.utils";
 import { ITDataTableProps } from "./dataTable.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 import {
   tableActionsCell,
   tableBody,
@@ -80,7 +80,6 @@ export default function ITDataTable<T extends Record<string, unknown>>({
     itemsPerPage,
     filters,
     sortConfig,
-    totalPages,
     goToPage,
     handleFilterChange,
     handleSort,
@@ -123,7 +122,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
     return () => {
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
     };
-  }, [currentPage, itemsPerPage, sortConfig, filters, externalFilters, reloadTrigger, fetchOnMount, performFetch]);
+  }, [currentPage, itemsPerPage, sortConfig, filters, externalFilters, reloadTrigger, fetchOnMount, performFetch, data.length, isLoading, debounceMs]);
 
   const renderFilterInput = (col: Column<T>) => {
     if (!col.filter) return null;