@axzydev/axzy_ui_system 1.2.13 → 1.2.15

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,
@@ -88,6 +87,7 @@ export default function ITDataTable<T extends Record<string, unknown>>({
   } = useTableState({ defaultItemsPerPage });
 
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const hasFetchedRef = useRef(false);
 
   const computedTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
 
@@ -102,17 +102,19 @@ export default function ITDataTable<T extends Record<string, unknown>>({
       });
       setData(response.data || []);
       setTotalItems(response.total || 0);
+      hasFetchedRef.current = true;
     } catch (error) {
       console.error("ITDataTable: Error fetching data", error);
       setData([]);
       setTotalItems(0);
+      hasFetchedRef.current = true;
     } finally {
       setIsLoading(false);
     }
   }, [currentPage, itemsPerPage, filters, sortConfig, fetchData, externalFilters]);
 
   useEffect(() => {
-    if (!fetchOnMount && data.length === 0 && !isLoading) return;
+    if (!fetchOnMount && !hasFetchedRef.current) return;
 
     if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
 
@@ -123,7 +125,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, debounceMs]);
 
   const renderFilterInput = (col: Column<T>) => {
     if (!col.filter) return null;

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

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

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

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITDialog from './dialog';
+import type { Meta } from '@storybook/react';
+import ITDialog from '@/components/organisms/dialog/dialog';
 import { useState } from 'react';
-import ITButton from '../button/button';
+import ITButton from '@/components/atoms/button/button';
 
 const meta = {
   title: 'Components/Feedback/ITDialog',
@@ -9,7 +9,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     isOpen: { control: 'boolean' },
     onClose: { action: 'closed' },
@@ -19,7 +18,6 @@ const meta = {
 } satisfies Meta<typeof ITDialog>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 // Wrapper to handle open/close state
 const DialogWrapper = (args: any) => {

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

@@ -4,8 +4,8 @@ import { useEffect, useRef } from "react";
 import { FaRegTimesCircle } from "react-icons/fa";
 import { ITDialogProps } from "./dialog.props";
 import useClickOutside from "@/hooks/useClickOutside";
-import ITFormHeader from "../form-header/form-header";
-import ITText from "@/components/text/text";
+import ITFormHeader from "@/components/molecules/form-header/form-header";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Modal dialog rendered via React portal with overlay backdrop.

package/src/components/{drawer → organisms/drawer}/drawer.doc.mdx

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

package/src/components/{drawer → organisms/drawer}/drawer.stories.tsx

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

package/src/components/{drawer → organisms/drawer}/drawer.tsx

@@ -3,7 +3,7 @@ import { ITDrawerProps } from "./drawer.props";
 import { FaTimes } from "react-icons/fa";
 import useClickOutside from "@/hooks/useClickOutside";
 import { useRef } from "react";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Sliding panel drawer from the left or right screen edge.

package/src/components/{dropfile → organisms/dropfile}/dropfile.doc.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as Stories from './dropfile.stories';
+import * as StoriesData from './dropfile.stories';
 
-<Meta of={Stories} />
+<Meta of={StoriesData} />
 
 # ITDropfile
 
@@ -57,7 +57,7 @@ import { ITDropfile, UploadStatus, FileTypeEnum } from '@axzydev/axzy_ui_system'
 />
 ```
 
-Use this when you'd otherwise write your own button + modal wrapper around `ITDropfile` — it's built in. The button shows the picked file's name (and status badge, if `showStatusBadge`) once one is selected, and reopens the same dropzone/preview to change it. The modal auto-closes ~900ms after a successful confirm.
+Use this when you'd otherwise write your own button + modal wrapper around `ITDropfile` — it's built in. The button shows the picked file's name (and status badge, if `showStatusBadge`) once one is selected, and reopens the same dropzone/preview to change it. ~900ms after a successful confirm the modal closes **and the selection resets**, so the button goes back to `buttonLabel`, ready to upload another file — this mode is built for repeated uploads (e.g. an attachments list), replacing the old pattern of remounting `ITDropfile` with a changing `key` after each upload.
 
 ## Notes
 

package/src/components/{dropfile → organisms/dropfile}/dropfile.props.ts

@@ -46,10 +46,14 @@ export interface ITDropfileProps {
   initialPreviewUrl?: string | null;
   /**
    * Presentation mode. `"drop"` renders the dropzone/preview inline (default,
-   * current behavior). `"button"` renders a compact trigger button instead —
-   * clicking it opens the same dropzone/preview UI inside an `ITDialog`, so
-   * callers don't need to build their own "open a modal" button around
-   * `ITDropfile`.
+   * current behavior, unaffected by anything below). `"button"` renders a
+   * compact trigger button instead — clicking it opens the same
+   * dropzone/preview UI inside an `ITDialog`, so callers don't need to build
+   * their own "open a modal" button around `ITDropfile`. Meant for repeated
+   * uploads (e.g. an attachments list): ~900ms after a successful confirm,
+   * the modal closes AND the selection resets, so the trigger goes back to
+   * `buttonLabel` ready for the next file — same effect callers previously
+   * got by remounting `ITDropfile` with a changing `key`.
    * @default "drop"
    */
   view?: "drop" | "button";

package/src/components/{dropfile → organisms/dropfile}/dropfile.stories.tsx

@@ -1,6 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITDropfile, { FileTypeEnum, UploadStatus } from './dropfile';
-import { useState } from 'react';
+import type { Meta } from '@storybook/react';
+import ITDropfile, { UploadStatus } from '@/components/organisms/dropfile/dropfile';
 
 const meta = {
   title: 'Components/Actions/ITDropfile',
@@ -8,7 +7,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     onFileSelect: { action: 'file selected' },
     onCancel: { action: 'cancelled' },
@@ -26,7 +24,6 @@ const meta = {
 } satisfies Meta<typeof ITDropfile>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 // Wrapper for stateful file handling in story
 const DropfileWrapper = (args: any) => {

package/src/components/{dropfile → organisms/dropfile}/dropfile.tsx

@@ -2,9 +2,9 @@ import React, { useState, useEffect } from "react";
 import { useDropzone } from "react-dropzone";
 // import pdfjsLib from "@/hooks/pdf"; // Disabled as hook is missing
 import clsx from "clsx";
-import ITText from "@/components/text/text";
-import ITButton from "@/components/button/button";
-import ITDialog from "@/components/dialog/dialog";
+import ITText from "@/components/atoms/text/text";
+import ITButton from "@/components/atoms/button/button";
+import ITDialog from "@/components/organisms/dialog/dialog";
 import { ITDropfileProps, FileTypeEnum, UploadStatus } from "./dropfile.props";
 export { FileTypeEnum, UploadStatus } from "./dropfile.props";
 
@@ -292,15 +292,28 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
     handleCancel();
   };
 
-  // In "button" view, close the modal a moment after a successful upload so
-  // the trigger collapses back to its compact state instead of leaving the
-  // modal open on a finished confirmation.
+  // In "button" view, close the modal a moment after a successful upload and
+  // clear the selection so the trigger collapses back to its compact,
+  // ready-for-the-next-file state — mirrors what consumers previously did by
+  // hand (closing their own modal + remounting ITDropfile via a `key`) to
+  // upload attachments one after another.
   useEffect(() => {
     if (view === "button" && isConfirmed && uploadStatus === UploadStatus.UPLOADED) {
-      const timeout = setTimeout(() => setIsModalOpen(false), 900);
+      const timeout = setTimeout(() => {
+        setIsModalOpen(false);
+        setSelectedFile(null);
+        setFileType(null);
+        setIsConfirmed(false);
+        if (externalStatus === undefined) setInternalUploadStatus(UploadStatus.PENDING);
+        onStatusChange?.(UploadStatus.PENDING);
+        setImagePreview((current) => {
+          if (current) URL.revokeObjectURL(current);
+          return null;
+        });
+      }, 900);
       return () => clearTimeout(timeout);
     }
-  }, [view, isConfirmed, uploadStatus]);
+  }, [view, isConfirmed, uploadStatus, externalStatus, onStatusChange]);
 
   const headerRow = (
     <div className="flex items-center justify-between mb-2">
@@ -396,7 +409,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                   type="button"
                   variant="outlined"
                   color="secondary"
-                  size="small"
+                  size="sm"
                   onClick={handleCancel}
                 >
                   <ITText>Cancelar</ITText>
@@ -405,7 +418,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                   type="button"
                   variant="filled"
                   color="primary"
-                  size="small"
+                  size="sm"
                   onClick={handleConfirm}
                 >
                   <div className="flex items-center gap-2">
@@ -421,7 +434,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                 type="button"
                 variant="outlined"
                 color="danger"
-                size="small"
+                size="sm"
                 onClick={handleDelete}
               >
                 <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -458,7 +471,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
           type="button"
           variant="outlined"
           color={hasFile ? "primary" : "secondary"}
-          size="small"
+          size="sm"
           onClick={() => setIsModalOpen(true)}
         >
           <div className="flex items-center gap-2 max-w-[220px]">

package/src/components/{form-builder → organisms/form-builder}/fieldRenderer.tsx

@@ -1,31 +1,36 @@
-import React, { memo, useCallback, useEffect, useState } from "react";
+import React, { memo, useCallback, useEffect, useMemo, useState, useRef } from "react";
 import clsx from "clsx";
 import { FieldConfigV2 } from "@/types/field.types";
 import { useITFormBuilderContext } from "./formBuilder.context";
-import ITInput from "../input/input";
-import ITSelect from "../select/select";
-import ITDatePicker from "../date-picker/datePicker";
-import ITTimePicker from "../time-picker/timePicker";
-import ITSearchSelect from "../search-select/search-select";
+import ITInput from "@/components/atoms/input/input";
+import ITSelect from "@/components/molecules/select/select";
+import ITDatePicker from "@/components/molecules/date-picker/datePicker";
+import ITTimePicker from "@/components/molecules/time-picker/timePicker";
+import ITSearchSelect from "@/components/molecules/search-select/search-select";
 import { useFieldRules } from "./useFormBuilder";
 import { getColSpanClass, getGridColsClass } from "@/utils/styles";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 import { FaSpinner } from "react-icons/fa";
 
 function useAsyncOptions(options: FieldConfigV2["options"], depends: any[]) {
   const [resolved, setResolved] = useState<{ value: string; label: string }[]>([]);
   const [loading, setLoading] = useState(false);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
 
   useEffect(() => {
-    if (typeof options === "function") {
+    const opts = optionsRef.current;
+    if (typeof opts === "function") {
       setLoading(true);
-      options().then((result) => {
+      opts().then((result) => {
         setResolved(result.map(o => ({ value: String(o.value), label: o.label })));
         setLoading(false);
       });
-    } else if (Array.isArray(options)) {
-      setResolved(options.map(o => ({ value: String(o.value), label: o.label })));
+    } else if (Array.isArray(opts)) {
+      setResolved(opts.map(o => ({ value: String(o.value), label: o.label })));
     }
+    // Dependencias dinámicas por diseño (campos dependientes) — no verificables estáticamente.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, depends);
 
   return { options: resolved, loading };
@@ -61,16 +66,19 @@ const ITFieldRenderer = ({
     return () => {
       context.unregisterField(config.name);
     };
+    // `config`/`context` son estables en el provider; solo el name define el registro.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config.name]);
 
-  if (!isVisible) return null;
-
-  const activeConfig = {
-    ...config,
-    ...dynamicProps,
-    required: isRequired,
-    disabled: isDisabled,
-  };
+  const activeConfig = useMemo(
+    () => ({
+      ...config,
+      ...dynamicProps,
+      required: isRequired,
+      disabled: isDisabled,
+    }),
+    [config, dynamicProps, isRequired, isDisabled],
+  );
 
   const {
     name,
@@ -96,9 +104,11 @@ const ITFieldRenderer = ({
         await activeConfig.onChangeAction(finalValue, context);
       }
     },
-    [name, context]
+    [name, context, activeConfig]
   );
 
+  if (!isVisible) return null;
+
   const renderField = () => {
     switch (type) {
       case "text":

package/src/components/{form-builder → organisms/form-builder}/formBuilder.context.tsx

@@ -1,6 +1,5 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useState } from 'react';
 import { FieldConfigV2, FieldContextV2 } from '@/types/field.types';
-import * as Yup from 'yup';
 
 interface ITFormBuilderContextType extends FieldContextV2 {
   config: FieldConfigV2[];
@@ -61,6 +60,8 @@ export const ITFormBuilderProvider = ({
   );
 };
 
+// Hook de acceso al contexto — patrón requerido junto al provider en el mismo archivo.
+// eslint-disable-next-line react-refresh/only-export-components
 export const useITFormBuilderContext = () => {
   const context = useContext(ITFormBuilderContext);
   if (!context) {

package/src/components/{form-builder → organisms/form-builder}/formBuilder.doc.mdx

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

package/src/components/{form-builder → organisms/form-builder}/formBuilder.stories.tsx

@@ -17,7 +17,6 @@ const meta: Meta<typeof ITFormBuilder> = {
       },
     },
   },
-  tags: ["autodocs"],
 };
 
 export default meta;

package/src/components/{form-builder → organisms/form-builder}/formBuilder.tsx

@@ -1,8 +1,7 @@
-import clsx from "clsx";
-import ITInput from "../input/input";
-import ITSelect from "../select/select";
+import ITInput from "@/components/atoms/input/input";
+import ITSelect from "@/components/molecules/select/select";
 import { ITFormBuilderProps } from "./formBuilder.props";
-import ITDatePicker from "../date-picker/datePicker";
+import ITDatePicker from "@/components/molecules/date-picker/datePicker";
 import { useEffect, useState, useMemo } from "react";
 import { ITFormBuilderProvider } from "./formBuilder.context";
 import ITFieldRenderer from "./fieldRenderer";
@@ -65,7 +64,7 @@ export default function ITFormBuilder({
   setFieldError = () => {},
   isSubmitting = false,
 }: ITFormBuilderProps) {
-  const [mounted, setMounted] = useState(false);
+  const [, setMounted] = useState(false);
 
   useEffect(() => {
     setMounted(true);

package/src/components/{form-builder → organisms/form-builder}/useFormBuilder.ts

@@ -53,12 +53,12 @@ export const useFieldRules = (
   const isVisible = useMemo(() => {
     if (!fieldConfig.renderWhen) return true;
     return fieldConfig.renderWhen(dependentValues);
-  }, [fieldConfig.renderWhen, dependentValues]);
+  }, [fieldConfig, dependentValues]);
 
   const dynamicProps = useMemo(() => {
     if (!fieldConfig.dynamicProps) return {};
     return fieldConfig.dynamicProps(dependentValues);
-  }, [fieldConfig.dynamicProps, dependentValues]);
+  }, [fieldConfig, dependentValues]);
 
   const isRequired = useMemo(() => {
     if (typeof dynamicProps.required !== 'undefined') return dynamicProps.required;
@@ -66,7 +66,7 @@ export const useFieldRules = (
       return fieldConfig.required(dependentValues);
     }
     return fieldConfig.required || false;
-  }, [fieldConfig.required, dynamicProps.required, dependentValues]);
+  }, [fieldConfig, dynamicProps.required, dependentValues]);
 
   const isDisabled = useMemo(() => {
     if (typeof dynamicProps.disabled !== 'undefined') return dynamicProps.disabled;
@@ -74,7 +74,7 @@ export const useFieldRules = (
       return fieldConfig.disabled(dependentValues);
     }
     return fieldConfig.disabled || false;
-  }, [fieldConfig.disabled, dynamicProps.disabled, dependentValues]);
+  }, [fieldConfig, dynamicProps.disabled, dependentValues]);
 
   return { isVisible, dynamicProps, isRequired, isDisabled };
 };

package/src/components/{navbar → organisms/navbar}/navbar.doc.mdx

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

package/src/components/{navbar → organisms/navbar}/navbar.stories.tsx

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ITNavbar from './navbar';
+import ITNavbar from '@/components/organisms/navbar/navbar';
 import { FaHome, FaChartBar, FaCog, FaUsers } from 'react-icons/fa';
 
 const meta = {
   title: 'Components/Layout & Navigation/ITNavbar',
   component: ITNavbar,
   parameters: { layout: 'fullscreen' },
-  tags: ['autodocs'],
   argTypes: {
     logoText: { control: 'text', description: 'Text displayed next to the logo' },
     navigationItems: { control: false, description: 'Navigation items with optional sub-items' },

package/src/components/{navbar → organisms/navbar}/navbar.tsx

@@ -2,7 +2,7 @@ import useClickOutside from "@/hooks/useClickOutside";
 import { useRef, useState } from "react";
 import { FaChevronDown, FaChevronRight, FaUserCircle } from "react-icons/fa";
 import { ITNavbarProps, ITNavigationItem } from "./navbar.props";
-import ITText from "@/components/text/text";
+import ITText from "@/components/atoms/text/text";
 import { theme } from "@/theme/theme";
 
 /**

package/src/components/{page-header → organisms/page-header}/page-header.doc.mdx

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

package/src/components/{page-header → organisms/page-header}/page-header.props.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { ITBreadcrumbItem } from "../breadcrumbs/breadcrumbs.props";
+import { ITBreadcrumbItem } from "@/components/molecules/breadcrumbs/breadcrumbs.props";
 
 /** Props for the ITPageHeader component. */
 export interface ITPageHeaderProps {

package/src/components/{page-header → organisms/page-header}/page-header.stories.tsx

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { FaUsers } from "react-icons/fa";
-import ITPageHeader from "./page-header";
-import ITButton from "../button/button";
+import ITPageHeader from "@/components/organisms/page-header/page-header";
+import ITButton from "@/components/atoms/button/button";
 
 const meta: Meta<typeof ITPageHeader> = {
   title: "Components/Layout/ITPageHeader",
   component: ITPageHeader,
-  tags: ["autodocs"],
 };
 
 export default meta;
@@ -41,8 +40,8 @@ export const WithActions: Story = {
     ],
     actions: (
       <>
-        <ITButton label="Exportar" variant="outlined" size="small" />
-        <ITButton label="Nueva Orden" size="small" />
+        <ITButton label="Exportar" variant="outlined" size="sm" />
+        <ITButton label="Nueva Orden" size="sm" />
       </>
     ),
   },
@@ -57,7 +56,7 @@ export const WithBackAction: Story = {
       { label: "Productos", href: "#" },
       { label: "Detalle" },
     ],
-    actions: <ITButton label="Editar" size="small" />,
+    actions: <ITButton label="Editar" size="sm" />,
   },
 };
 

package/src/components/{page-header → organisms/page-header}/page-header.tsx

@@ -1,7 +1,7 @@
 import { FaChevronLeft } from "react-icons/fa";
 import { ITPageHeaderProps } from "./page-header.props";
-import ITBreadcrumbs from "../breadcrumbs/breadcrumbs";
-import ITText from "@/components/text/text";
+import ITBreadcrumbs from "@/components/molecules/breadcrumbs/breadcrumbs";
+import ITText from "@/components/atoms/text/text";
 
 /**
  * Page title bar with breadcrumbs, description, back button, and action buttons.

package/src/components/{searchTable → organisms/searchTable}/components/EditableCell.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { SearchColumn } from "../searchTable.props";
-import ITInput from "@/components/input/input";
-import ITSelect from "@/components/select/select";
-import ITDatePicker from "@/components/date-picker/datePicker";
-import ITText from "@/components/text/text";
+import ITInput from "@/components/atoms/input/input";
+import ITSelect from "@/components/molecules/select/select";
+import ITDatePicker from "@/components/molecules/date-picker/datePicker";
+import ITText from "@/components/atoms/text/text";
 
 interface EditableCellProps<T> {
   column: SearchColumn<T>;
@@ -18,7 +18,6 @@ export default function EditableCell<T>({
   value,
   onChange,
   error,
-  row,
 }: EditableCellProps<T>) {
   const validate = (val: any) => {
     if (column.validation) return column.validation(val);

package/src/components/{searchTable → organisms/searchTable}/components/PaginationControls.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 import PaginationInfo from "./PaginationInfo";
-import ITSelect from "@/components/select/select";
-import ITButton from "@/components/button/button";
-import ITText from "@/components/text/text";
+import ITSelect from "@/components/molecules/select/select";
+import ITButton from "@/components/atoms/button/button";
+import ITText from "@/components/atoms/text/text";
 
 interface PaginationControlsProps {
   pageIndex: number;
@@ -46,7 +46,7 @@ export default function PaginationControls({
             value={String(itemsPerPage)}
             onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
             onBlur={() => {}}
-            size="small"
+            size="sm"
             className="w-20"
           />
         </div>
@@ -55,7 +55,7 @@ export default function PaginationControls({
       <div className="flex items-center space-x-2">
         <ITButton
           color="secondary"
-          size="small"
+          size="sm"
           onClick={() => onPageChange(pageIndex - 1)}
           disabled={!hasPreviousPage}
           className="min-w-[32px]"
@@ -70,7 +70,7 @@ export default function PaginationControls({
         </ITText>
 
         <ITButton
-          size="small"
+          size="sm"
           color="secondary"
           onClick={() => onPageChange(pageIndex + 1)}
           disabled={!hasNextPage}