@axzydev/axzy_ui_system 1.3.3 → 1.3.4

package/dist/index.js

@@ -233,6 +233,11 @@ function useFloatingPanel(anchorRef, isOpen, {
 
 // src/hooks/useTableState.ts
 import { useCallback as useCallback4, useMemo as useMemo2, useState as useState4 } from "react";
+var isEmptyFilterValue = (value) => {
+  if (value === void 0 || value === null || value === "") return true;
+  if (Array.isArray(value)) return value[0] == null && value[1] == null;
+  return false;
+};
 function useTableState({
   defaultItemsPerPage = 10,
   initialSort = null
@@ -257,7 +262,7 @@ function useTableState({
   const handleFilterChange = useCallback4(
     (key, value) => {
       setFilters((prev) => {
-        if (value === void 0 || value === null || value === "") {
+        if (isEmptyFilterValue(value)) {
           const next = { ...prev };
           delete next[key];
           return next;
@@ -3595,9 +3600,9 @@ function useVirtualRows({
 }
 
 // src/components/organisms/data-table/dataTable.tsx
-import clsx21 from "clsx";
-import { useState as useState17, useEffect as useEffect7, useCallback as useCallback7, useRef as useRef11 } from "react";
-import { FaCheck as FaCheck2, FaSpinner, FaTimes as FaTimes4, FaTable, FaThLarge } from "react-icons/fa";
+import clsx23 from "clsx";
+import { useState as useState19, useEffect as useEffect9, useCallback as useCallback7, useRef as useRef13 } from "react";
+import { FaCheck as FaCheck2, FaSpinner, FaTimes as FaTimes5, FaTable, FaThLarge } from "react-icons/fa";
 import { MdOutlineSwapVert } from "react-icons/md";
 
 // src/components/molecules/pagination/pagination.tsx
@@ -3890,445 +3895,240 @@ function ITPagination({
   return /* @__PURE__ */ jsx20("nav", { "aria-label": "Pagination", className: clsx20("inline-flex", className), children: renderPaginationControls() });
 }
 
-// src/utils/table.utils.ts
-var formatCurrencyMX = (value) => {
-  return value.toLocaleString("es-MX", {
-    style: "currency",
-    currency: "MXN"
-  });
-};
-var getNestedValue = (obj, path) => {
-  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
-};
-var ROW_CLICK_IGNORE_SELECTOR = 'button, a, input, select, textarea, [role="button"], [role="link"], [data-row-click-ignore]';
-function isInteractiveTarget(target, boundary = null) {
-  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;
-}
-
-// src/components/organisms/data-table/dataTable.tsx
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
-var getNestedValue2 = (obj, path) => {
-  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
-};
-var EMPTY_OBJECT = {};
-function ITDataTable({
-  columns,
-  fetchData,
-  debounceMs = 500,
-  externalFilters = EMPTY_OBJECT,
-  loadingIndicator,
-  fetchOnMount = true,
-  reloadTrigger,
-  containerClassName,
+// src/components/molecules/search-select/search-select.tsx
+import { useState as useState17, useEffect as useEffect7, useRef as useRef11, useMemo as useMemo7 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import clsx21 from "clsx";
+import { FaSearch as FaSearch2, FaTimes as FaTimes4 } from "react-icons/fa";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+function ITSearchSelect({
+  name,
+  options = [],
+  label,
+  placeholder = "Selecciona una opci\xF3n",
+  valueField = "value",
+  labelField = "label",
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
   className,
-  variant = "default",
+  touched,
+  required,
+  error,
+  readOnly = false,
+  onSearch,
+  isLoading = false,
+  noResultsMessage = "No se encontraron resultados",
   size = "md",
-  itemsPerPageOptions = [5, 10, 20],
-  defaultItemsPerPage = 10,
-  title,
-  renderCard,
-  defaultView,
-  showVerticalBorder = true,
-  verticalBorderClassname,
-  onRowClick,
-  layout = "auto",
-  density = "normal",
-  autoCardBreakpoint = 0,
-  virtualized = false,
-  virtualizedMaxHeight = 400,
-  rowHeight,
-  overscan = 5,
-  stickyHeader = false
+  renderOption,
+  clearable = true,
+  onClear
 }) {
-  const [viewMode, setViewMode] = useState17(defaultView || "table");
-  const { ref: rootRef, width: containerWidth } = useElementSize();
-  const [data, setData] = useState17([]);
-  const [totalItems, setTotalItems] = useState17(0);
-  const [isLoading, setIsLoading] = useState17(fetchOnMount);
-  const isFixed = layout === "fixed";
-  const forcedCards = autoCardBreakpoint > 0 && containerWidth > 0 && containerWidth < autoCardBreakpoint;
-  const effectiveView = forcedCards ? "cards" : viewMode;
-  const hasColumnWidths = columns.some((col) => col.width != null);
-  const tableLayoutClass = isFixed ? "w-full text-sm text-left text-secondary-600 transition-opacity duration-300" : "min-w-max w-full text-sm text-left text-secondary-600 transition-opacity duration-300";
-  const isTableVirtual = virtualized && effectiveView === "table";
-  const isStickyHeader = stickyHeader && isTableVirtual;
-  const resolvedRowHeight = rowHeight ?? getRowHeight(size, density);
-  const columnCount = columns.length;
-  const scrollOuterClass = isTableVirtual ? "relative min-h-[200px]" : "overflow-x-auto relative min-h-[200px]";
-  const {
-    currentPage,
-    itemsPerPage,
-    filters,
-    sortConfig,
-    goToPage,
-    handleFilterChange,
-    handleSort,
-    handleItemsPerPageChange
-  } = useTableState({ defaultItemsPerPage });
-  const {
-    scrollRef,
-    startIndex,
-    endIndex,
-    topSpacerHeight,
-    bottomSpacerHeight
-  } = useVirtualRows({
-    count: data.length,
-    rowHeight: resolvedRowHeight,
-    overscan,
-    enabled: isTableVirtual,
-    resetKey: `${currentPage}-${itemsPerPage}`
+  const [isOpen, setIsOpen] = useState17(false);
+  const [searchTerm, setSearchTerm] = useState17("");
+  const [isFocused, setIsFocused] = useState17(false);
+  const [localTouched, setLocalTouched] = useState17(false);
+  const containerRef = useRef11(null);
+  const inputWrapperRef = useRef11(null);
+  const timeoutRef = useRef11(null);
+  const { panelRef, style: panelStyle } = useFloatingPanel(inputWrapperRef, isOpen, {
+    estimatedHeight: 260,
+    matchWidth: true
   });
-  const windowData = isTableVirtual ? data.slice(startIndex, endIndex + 1) : data;
-  const debounceTimerRef = useRef11(null);
-  const hasFetchedRef = useRef11(false);
-  const fetchDataRef = useRef11(fetchData);
-  fetchDataRef.current = fetchData;
-  const externalFiltersRef = useRef11(externalFilters);
-  externalFiltersRef.current = externalFilters;
-  const externalKey = JSON.stringify(externalFilters);
-  const computedTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
-  const performFetch = useCallback7(async () => {
-    setIsLoading(true);
-    try {
-      const response = await fetchDataRef.current({
-        page: currentPage,
-        limit: itemsPerPage,
-        filters: { ...filters, ...externalFiltersRef.current },
-        sort: sortConfig || void 0
-      });
-      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]);
-  const performFetchRef = useRef11(performFetch);
-  performFetchRef.current = performFetch;
+  const selectedOption = useMemo7(() => {
+    return options.find((opt) => opt[valueField] === value);
+  }, [options, value, valueField]);
   useEffect7(() => {
-    if (!fetchOnMount && !hasFetchedRef.current) return;
-    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
-    debounceTimerRef.current = setTimeout(() => {
-      performFetchRef.current();
-    }, debounceMs);
-    return () => {
-      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
-    };
-  }, [currentPage, itemsPerPage, sortConfig, filters, externalKey, reloadTrigger, fetchOnMount, debounceMs]);
-  const renderFilterInput = (col) => {
-    if (!col.filter) return null;
-    if (col.type === "boolean") {
-      const currentValue = filters[col.key];
-      const nextValue = currentValue === void 0 ? true : currentValue === true ? false : void 0;
-      const getToggleLabel = () => {
-        if (currentValue === void 0) return "Mostrar todos";
-        if (currentValue === true) return "Filtrar solo verdaderos";
-        return "Filtrar solo falsos";
-      };
-      return /* @__PURE__ */ jsx21(
-        "button",
-        {
-          className: "flex items-center justify-center cursor-pointer focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 rounded-full p-1 transition-all duration-200",
-          onClick: () => handleFilterChange(col.key, nextValue),
-          "aria-label": `${getToggleLabel()} para ${col.label}`,
-          title: `${getToggleLabel()} para ${col.label}`,
-          disabled: isLoading,
-          children: /* @__PURE__ */ jsx21("div", { className: "relative w-10 h-5 bg-secondary-300 rounded-full", children: /* @__PURE__ */ jsx21(
-            "div",
-            {
-              className: clsx21(
-                "absolute top-0.5 w-4 h-4 rounded-full transition-all duration-300 shadow-sm",
-                {
-                  "left-0.5 bg-secondary-400": currentValue === void 0,
-                  "left-5 bg-slate-500": currentValue === true,
-                  "left-0.5 bg-secondary-500": currentValue === false
-                }
-              )
-            }
-          ) })
-        }
-      );
+    if (!isFocused) {
+      setSearchTerm(selectedOption ? String(selectedOption[labelField]) : "");
     }
-    if (col.filter === "catalog" && col.catalogOptions) {
-      if (col.catalogOptions.loading) {
-        return /* @__PURE__ */ jsx21(FaSpinner, { className: "animate-spin", "aria-label": "Cargando opciones", title: "Cargando opciones" });
-      }
-      if (col.catalogOptions.error) {
-        return /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-danger-500 text-xs", children: "Error cargando" });
+  }, [selectedOption, isFocused, labelField]);
+  useEffect7(() => {
+    function handleClickOutside(event) {
+      const target = event.target;
+      const inContainer = containerRef.current?.contains(target);
+      const inPanel = panelRef.current?.contains(target);
+      if (!inContainer && !inPanel) {
+        setIsOpen(false);
       }
-      return /* @__PURE__ */ jsx21(
-        ITSelect,
-        {
-          name: `filter-${col.key}`,
-          options: [
-            { value: "", label: "Todos" },
-            ...col.catalogOptions.data.map((item) => ({
-              value: String(item.id),
-              label: item.name
-            }))
-          ],
-          value: String(filters[col.key] || ""),
-          onChange: (e) => {
-            const value = e.target.value === "" ? void 0 : e.target.value;
-            handleFilterChange(col.key, value);
-          },
-          onBlur: () => {
-          },
-          className: "w-full text-xs",
-          disabled: isLoading
-        }
-      );
     }
-    return /* @__PURE__ */ jsx21(
-      ITInput,
-      {
-        name: `filter-${col.key}`,
-        className: "w-full text-xs",
-        placeholder: "Buscar...",
-        value: String(filters[col.key] || ""),
-        onChange: (e) => handleFilterChange(col.key, e.target.value),
-        onBlur: () => {
-        },
-        disabled: isLoading
-      }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const selectedLabel = selectedOption ? String(selectedOption[labelField]) : "";
+  const filteredOptions = useMemo7(() => {
+    if (onSearch) return options;
+    if (!searchTerm || !isFocused || searchTerm === selectedLabel) return options;
+    return options.filter(
+      (opt) => String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
     );
+  }, [options, searchTerm, selectedLabel, onSearch, labelField, isFocused]);
+  const handleInputChange = (e) => {
+    const query = e.target.value;
+    setSearchTerm(query);
+    setIsOpen(true);
+    if (onSearch) {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        onSearch(query);
+      }, 500);
+    }
   };
-  const renderCellContent = (col, row) => {
-    const value = getNestedValue2(row, col.key);
-    if (col.render) return col.render(row);
-    switch (col.type) {
-      case "number":
-        return typeof value === "number" && col.currencyMX ? formatCurrencyMX(value) : value;
-      case "boolean":
-        return value ? /* @__PURE__ */ jsx21(FaCheck2, { className: "text-success-500", "aria-label": "Verdadero", title: "Verdadero" }) : /* @__PURE__ */ jsx21(FaTimes4, { className: "text-danger-500", "aria-label": "Falso", title: "Falso" });
-      case "actions":
-        return col.actions ? col.actions(row) : null;
-      case "catalog":
-        if (col.catalogOptions) {
-          const catalogItem = col.catalogOptions.data.find((item) => item.id === value);
-          return catalogItem?.name || value;
-        }
-        return value;
-      default:
-        return value;
+  const handleSelect = (option) => {
+    if (onChange) {
+      onChange(option[valueField], option);
     }
+    setSearchTerm(String(option[labelField]));
+    setIsOpen(false);
   };
-  const renderDefaultCard = (row) => {
-    const dataCols = columns.filter((c) => c.type !== "actions");
-    const actionCol = columns.find((c) => c.type === "actions");
-    return /* @__PURE__ */ jsxs18("div", { className: "bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-3 space-y-2 shadow-sm", children: [
-      dataCols.map((col) => /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx21("span", { className: "text-[10px] font-bold uppercase tracking-wider text-slate-400 whitespace-nowrap flex-shrink-0 min-w-[70px]", children: col.label }),
-        /* @__PURE__ */ jsx21("span", { className: "text-sm font-medium text-slate-800 dark:text-white text-right truncate", children: renderCellContent(col, row) })
-      ] }, col.key)),
-      actionCol?.actions && /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-end gap-2 pt-2 border-t border-slate-100 dark:border-slate-700", children: actionCol.actions(row) })
-    ] });
+  const handleClear = () => {
+    setSearchTerm("");
+    setIsOpen(true);
+    if (onSearch) onSearch("");
+    if (value !== void 0 && value !== null && value !== "") {
+      onChange?.("", void 0);
+    }
+    onClear?.();
   };
-  const segCtrlClass = (mode) => `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === mode ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`;
-  const handleRowClick = (row) => (event) => {
-    if (!onRowClick || isLoading || isInteractiveTarget(event.target, event.currentTarget)) return;
-    onRowClick(row, event);
+  const handleFocus = () => {
+    if (disabled || readOnly) return;
+    setIsFocused(true);
+    setIsOpen(true);
   };
-  const handleRowKeyDown = (row) => (event) => {
-    if (!onRowClick || isLoading) return;
-    if (event.target !== event.currentTarget) return;
-    if (event.key !== "Enter" && event.key !== " ") return;
-    event.preventDefault();
-    onRowClick(row, event);
+  const handleInputBlur = (e) => {
+    setTimeout(() => {
+      setIsFocused(false);
+      setLocalTouched(true);
+      onBlur?.(e);
+    }, 200);
   };
-  const tableEl = /* @__PURE__ */ jsxs18(
-    "table",
-    {
-      className: clsx21(
-        tableLayoutClass,
-        showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
-        showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
-        isLoading ? "opacity-50" : "opacity-100",
-        variantStyles[variant],
-        sizeStyles[size],
-        className
-      ),
-      style: isFixed ? { tableLayout: "fixed" } : void 0,
-      "aria-rowcount": isTableVirtual ? data.length + 1 : void 0,
-      children: [
-        hasColumnWidths && /* @__PURE__ */ jsx21("colgroup", { children: columns.map((col) => /* @__PURE__ */ jsx21(
-          "col",
-          {
-            style: col.width != null ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0
-          },
-          col.key
-        )) }),
-        /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsx21(
-          "tr",
+  const inputTheme = theme.input || {};
+  const isTouched = touched !== void 0 ? touched : localTouched;
+  const isEmpty = value === void 0 || value === null || String(value).trim() === "";
+  const effectiveError = error !== void 0 && error !== false ? error === true ? "Este campo es requerido" : error : required && isEmpty ? "Este campo es requerido" : void 0;
+  const hasError = isTouched && !!effectiveError;
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
+  const showClearButton = clearable && !disabled && !readOnly && (searchTerm.length > 0 || !isEmpty);
+  const getInputStyle = () => {
+    const sizeConfig = inputSizeTokens[size] ?? inputSizeTokens.md;
+    const style = {
+      backgroundColor: inputTheme.backgroundColor || "#ffffff",
+      borderColor: inputTheme.borderColor || "var(--color-secondary-300)",
+      borderRadius: inputTheme.borderRadius || "0.5rem",
+      padding: sizeConfig.padding,
+      fontSize: sizeConfig.fontSize,
+      borderWidth: "1px",
+      borderStyle: "solid",
+      transition: "all 0.2s",
+      color: "var(--it-input-text-color, var(--color-secondary-900))",
+      width: "100%"
+    };
+    if (disabled) {
+      style.backgroundColor = inputTheme.disabled?.backgroundColor || "var(--color-secondary-100)";
+      style.borderColor = inputTheme.disabled?.borderColor || "var(--color-secondary-200)";
+      style.opacity = 0.7;
+      style.cursor = "not-allowed";
+    }
+    if (hasError) {
+      style.borderColor = inputTheme.error?.borderColor || "red";
+      if (isFocused) {
+        style.boxShadow = inputTheme.error?.ring;
+      }
+    } else if (isFocused && !readOnly) {
+      style.boxShadow = inputTheme.focus?.ring;
+      style.borderColor = inputTheme.focus?.borderColor;
+    }
+    return style;
+  };
+  return /* @__PURE__ */ jsxs18("div", { className: clsx21("w-full flex flex-col gap-1.5", className, isOpen && "relative z-30"), ref: containerRef, children: [
+    label && /* @__PURE__ */ jsxs18(
+      ITText,
+      {
+        as: "label",
+        className: clsx21("text-sm font-medium text-secondary-700 dark:text-slate-300", {
+          "text-danger-500": hasError
+        }),
+        children: [
+          /* @__PURE__ */ jsx21(ITText, { as: "span", children: label }),
+          required && /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-danger-500 ml-1", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs18("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs18("div", { ref: inputWrapperRef, className: "relative flex items-center", children: [
+        /* @__PURE__ */ jsx21(
+          "input",
           {
-            className: clsx21(tableHeaderRow, "dark:text-slate-200"),
-            "aria-rowindex": isTableVirtual ? 1 : void 0,
-            children: columns.map((col) => /* @__PURE__ */ jsx21(
-              "th",
-              {
-                scope: "col",
-                className: clsx21(
-                  tableHeaderCell(col.className, density),
-                  col.align && tableAlignClasses[col.align],
-                  isStickyHeader && "sticky top-0 z-10 bg-secondary-50"
-                ),
-                style: col.minWidth != null || isStickyHeader ? {
-                  ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
-                  ...isStickyHeader ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" } : {}
-                } : void 0,
-                children: /* @__PURE__ */ jsxs18("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
-                  /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
-                    col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx21(
-                      "button",
-                      {
-                        onClick: () => handleSort(col.key),
-                        disabled: isLoading,
-                        className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"} disabled:opacity-50`,
-                        title: `Ordenar por ${col.label}`,
-                        children: /* @__PURE__ */ jsx21(MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx21("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
-                ] })
-              },
-              col.key
-            ))
+            type: "text",
+            name,
+            value: searchTerm,
+            onChange: handleInputChange,
+            onFocus: handleFocus,
+            onBlur: handleInputBlur,
+            disabled,
+            readOnly,
+            placeholder,
+            className: "outline-none pr-10",
+            style: getInputStyle(),
+            autoComplete: "off"
           }
-        ) }),
-        /* @__PURE__ */ jsx21("tbody", { className: clsx21(tableBody, "dark:divide-slate-700/30"), children: data.length > 0 ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
-          isTableVirtual && topSpacerHeight > 0 && /* @__PURE__ */ jsx21("tr", { "aria-hidden": "true", style: { height: topSpacerHeight }, children: /* @__PURE__ */ jsx21("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) }),
-          windowData.map((row, windowIndex) => {
-            const absoluteIndex = isTableVirtual ? startIndex + windowIndex : windowIndex;
-            return /* @__PURE__ */ jsx21(
-              "tr",
-              {
-                "aria-rowindex": isTableVirtual ? absoluteIndex + 2 : void 0,
-                className: clsx21(
-                  tableRow,
-                  variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
-                  onRowClick && !isLoading && tableRowClickable
-                ),
-                tabIndex: onRowClick && !isLoading ? 0 : void 0,
-                onClick: onRowClick && !isLoading ? handleRowClick(row) : void 0,
-                onKeyDown: onRowClick && !isLoading ? handleRowKeyDown(row) : void 0,
-                children: columns.map((col) => {
-                  const rawValue = getNestedValue2(row, col.key);
-                  const truncateTitle = col.truncate && (typeof rawValue === "string" || typeof rawValue === "number") ? String(rawValue) : void 0;
-                  return /* @__PURE__ */ jsx21(
-                    "td",
-                    {
-                      className: clsx21(
-                        tableCell(col.className, density),
-                        col.align && tableAlignClasses[col.align]
-                      ),
-                      style: col.minWidth != null ? { minWidth: `${col.minWidth}px` } : void 0,
-                      title: truncateTitle,
-                      children: col.type === "actions" ? /* @__PURE__ */ jsx21("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx21("div", { className: clsx21(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
-                    },
-                    `${absoluteIndex}-${col.key}`
-                  );
-                })
+        ),
+        /* @__PURE__ */ jsxs18("div", { className: "absolute right-3 flex items-center gap-2 text-secondary-400", children: [
+          isLoading && /* @__PURE__ */ jsx21("div", { className: "pointer-events-none animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" }),
+          !isLoading && showClearButton && /* @__PURE__ */ jsx21(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Limpiar",
+              title: "Limpiar",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                handleClear();
               },
-              absoluteIndex
-            );
-          }),
-          isTableVirtual && bottomSpacerHeight > 0 && /* @__PURE__ */ jsx21("tr", { "aria-hidden": "true", style: { height: bottomSpacerHeight }, children: /* @__PURE__ */ jsx21("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) })
-        ] }) : /* @__PURE__ */ jsx21("tr", { children: /* @__PURE__ */ jsx21("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: !isLoading && /* @__PURE__ */ jsxs18("div", { className: tableEmptyContent, children: [
-          /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
-          /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-        ] }) }) }) })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxs18("div", { ref: rootRef, className: clsx21("space-y-4 w-full relative", containerClassName), children: [
-    /* @__PURE__ */ jsxs18("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
-      title && /* @__PURE__ */ jsxs18("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
-        /* @__PURE__ */ jsx21(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
-        /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
-          isLoading && /* @__PURE__ */ jsx21("div", { className: "text-secondary-400", children: loadingIndicator || /* @__PURE__ */ jsx21(FaSpinner, { className: "animate-spin text-primary-500 text-xl" }) }),
-          /* @__PURE__ */ jsxs18("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
-            /* @__PURE__ */ jsxs18("button", { onClick: () => setViewMode("table"), disabled: forcedCards, className: segCtrlClass("table"), children: [
-              /* @__PURE__ */ jsx21(FaTable, { size: 11 }),
-              "Table"
-            ] }),
-            /* @__PURE__ */ jsxs18("button", { onClick: () => setViewMode("cards"), className: segCtrlClass("cards"), children: [
-              /* @__PURE__ */ jsx21(FaThLarge, { size: 11 }),
-              "Cards"
-            ] })
-          ] })
+              className: "flex items-center justify-center text-secondary-400 hover:text-secondary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 rounded-full",
+              children: /* @__PURE__ */ jsx21(FaTimes4, { size: 14 })
+            }
+          ),
+          !isLoading && !showClearButton && /* @__PURE__ */ jsx21(FaSearch2, { size: 14, className: clsx21("pointer-events-none", { "text-primary-500": isFocused }) })
         ] })
       ] }),
-      !title && /* @__PURE__ */ jsx21("div", { className: "flex justify-end px-4 pt-3", children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
-        /* @__PURE__ */ jsxs18("button", { onClick: () => setViewMode("table"), disabled: forcedCards, className: segCtrlClass("table"), children: [
-          /* @__PURE__ */ jsx21(FaTable, { size: 11 }),
-          "Table"
-        ] }),
-        /* @__PURE__ */ jsxs18("button", { onClick: () => setViewMode("cards"), className: segCtrlClass("cards"), children: [
-          /* @__PURE__ */ jsx21(FaThLarge, { size: 11 }),
-          "Cards"
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs18("div", { className: scrollOuterClass, children: [
-        isLoading && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-white/40 backdrop-blur-[2px] transition-all duration-300", children: /* @__PURE__ */ jsx21("div", { className: "flex flex-col items-center gap-3 p-6 rounded-2xl shadow-xl border border-secondary-100 animate-in fade-in zoom-in duration-300", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: loadingIndicator || /* @__PURE__ */ jsxs18(Fragment4, { children: [
-          /* @__PURE__ */ jsx21(FaSpinner, { className: "animate-spin text-primary-500 text-4xl" }),
-          /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-sm font-semibold text-secondary-600 animate-pulse", children: "Cargando datos..." })
-        ] }) }) }),
-        effectiveView === "cards" ? /* @__PURE__ */ jsx21("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ jsx21(
-          "div",
-          {
-            className: clsx21(tableCardHover, onRowClick && !isLoading && tableCardClickable),
-            role: onRowClick && !isLoading ? "button" : void 0,
-            tabIndex: onRowClick && !isLoading ? 0 : void 0,
-            onClick: onRowClick && !isLoading ? handleRowClick(row) : void 0,
-            onKeyDown: onRowClick && !isLoading ? handleRowKeyDown(row) : void 0,
-            children: renderCard ? renderCard(row) : renderDefaultCard(row)
-          },
-          i
-        )) : !isLoading && /* @__PURE__ */ jsxs18("div", { className: clsx21(tableEmptyContent, "py-12"), children: [
-          /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
-          /* @__PURE__ */ jsx21(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
-        ] }) }) : isTableVirtual ? /* @__PURE__ */ jsx21(
+      isOpen && createPortal3(
+        /* @__PURE__ */ jsx21(
           "div",
           {
-            ref: scrollRef,
-            className: "overflow-x-auto overflow-y-auto",
-            style: { maxHeight: virtualizedMaxHeight },
-            children: tableEl
+            ref: panelRef,
+            style: panelStyle,
+            className: "bg-white dark:bg-slate-900 border border-secondary-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top",
+            children: /* @__PURE__ */ jsx21("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => {
+              const isSelected = value === option[valueField];
+              return /* @__PURE__ */ jsx21(
+                ITText,
+                {
+                  as: "div",
+                  onClick: () => handleSelect(option),
+                  className: clsx21(
+                    "px-4 py-2 text-sm cursor-pointer transition-colors",
+                    isSelected ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium" : "hover:bg-secondary-50 dark:hover:bg-slate-800 text-secondary-700 dark:text-slate-300"
+                  ),
+                  children: renderOption ? renderOption(option, { isSelected, searchTerm }) : /* @__PURE__ */ jsx21(ITText, { as: "span", children: option[labelField] })
+                },
+                option[valueField]
+              );
+            }) : /* @__PURE__ */ jsx21(ITText, { as: "div", className: "px-4 py-6 text-sm text-center text-secondary-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) })
           }
-        ) : tableEl
-      ] })
+        ),
+        document.body
+      )
     ] }),
-    /* @__PURE__ */ jsx21("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ jsx21(
-      ITPagination,
-      {
-        currentPage,
-        totalPages: computedTotalPages,
-        onPageChange: goToPage,
-        color: "primary",
-        itemsPerPageOptions,
-        itemsPerPage,
-        onItemsPerPageChange: handleItemsPerPageChange,
-        totalItems
-      }
-    ) })
+    hasError && /* @__PURE__ */ jsx21(ITText, { as: "p", className: "text-danger-500 text-xs mt-1", children: errorMessage })
   ] });
 }
 
 // src/components/molecules/date-picker/datePicker.tsx
 import clsx22 from "clsx";
 import React5, { useEffect as useEffect8, useRef as useRef12, useState as useState18 } from "react";
-import { createPortal as createPortal3 } from "react-dom";
+import { createPortal as createPortal4 } from "react-dom";
 import { FaCalendarAlt } from "react-icons/fa";
 import { isBefore as isBefore2 } from "date-fns";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -4538,7 +4338,7 @@ function ITDatePicker({
         onClick: handleIconClick
       }
     ),
-    isOpen && createPortal3(
+    isOpen && createPortal4(
       /* @__PURE__ */ jsx22(
         "div",
         {
@@ -4578,13 +4378,513 @@ function ITDatePicker({
   ] });
 }
 
-// src/components/organisms/dialog/dialog.tsx
-import { createPortal as createPortal4 } from "react-dom";
-import { useEffect as useEffect9, useRef as useRef13 } from "react";
+// src/utils/table.utils.ts
+var formatCurrencyMX = (value) => {
+  return value.toLocaleString("es-MX", {
+    style: "currency",
+    currency: "MXN"
+  });
+};
+var getNestedValue = (obj, path) => {
+  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
+};
+var ROW_CLICK_IGNORE_SELECTOR = 'button, a, input, select, textarea, [role="button"], [role="link"], [data-row-click-ignore]';
+function isInteractiveTarget(target, boundary = null) {
+  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;
+}
+
+// src/components/organisms/data-table/dataTable.tsx
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+var getNestedValue2 = (obj, path) => {
+  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
+};
+var EMPTY_OBJECT = {};
+function ITDataTable({
+  columns,
+  fetchData,
+  debounceMs = 500,
+  externalFilters = EMPTY_OBJECT,
+  loadingIndicator,
+  fetchOnMount = true,
+  reloadTrigger,
+  containerClassName,
+  className,
+  variant = "default",
+  size = "md",
+  itemsPerPageOptions = [5, 10, 20],
+  defaultItemsPerPage = 10,
+  title,
+  renderCard,
+  defaultView,
+  showVerticalBorder = true,
+  verticalBorderClassname,
+  onRowClick,
+  layout = "auto",
+  density = "normal",
+  autoCardBreakpoint = 0,
+  virtualized = false,
+  virtualizedMaxHeight = 400,
+  rowHeight,
+  overscan = 5,
+  stickyHeader = false
+}) {
+  const [viewMode, setViewMode] = useState19(defaultView || "table");
+  const { ref: rootRef, width: containerWidth } = useElementSize();
+  const [data, setData] = useState19([]);
+  const [totalItems, setTotalItems] = useState19(0);
+  const [isLoading, setIsLoading] = useState19(fetchOnMount);
+  const isFixed = layout === "fixed";
+  const forcedCards = autoCardBreakpoint > 0 && containerWidth > 0 && containerWidth < autoCardBreakpoint;
+  const effectiveView = forcedCards ? "cards" : viewMode;
+  const hasColumnWidths = columns.some((col) => col.width != null);
+  const tableLayoutClass = isFixed ? "w-full text-sm text-left text-secondary-600 transition-opacity duration-300" : "min-w-max w-full text-sm text-left text-secondary-600 transition-opacity duration-300";
+  const isTableVirtual = virtualized && effectiveView === "table";
+  const isStickyHeader = stickyHeader && isTableVirtual;
+  const resolvedRowHeight = rowHeight ?? getRowHeight(size, density);
+  const columnCount = columns.length;
+  const scrollOuterClass = isTableVirtual ? "relative min-h-[200px]" : "overflow-x-auto relative min-h-[200px]";
+  const {
+    currentPage,
+    itemsPerPage,
+    filters,
+    sortConfig,
+    goToPage,
+    handleFilterChange,
+    handleSort,
+    handleItemsPerPageChange
+  } = useTableState({ defaultItemsPerPage });
+  const {
+    scrollRef,
+    startIndex,
+    endIndex,
+    topSpacerHeight,
+    bottomSpacerHeight
+  } = useVirtualRows({
+    count: data.length,
+    rowHeight: resolvedRowHeight,
+    overscan,
+    enabled: isTableVirtual,
+    resetKey: `${currentPage}-${itemsPerPage}`
+  });
+  const windowData = isTableVirtual ? data.slice(startIndex, endIndex + 1) : data;
+  const debounceTimerRef = useRef13(null);
+  const hasFetchedRef = useRef13(false);
+  const fetchDataRef = useRef13(fetchData);
+  fetchDataRef.current = fetchData;
+  const externalFiltersRef = useRef13(externalFilters);
+  externalFiltersRef.current = externalFilters;
+  const externalKey = JSON.stringify(externalFilters);
+  const computedTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
+  const performFetch = useCallback7(async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetchDataRef.current({
+        page: currentPage,
+        limit: itemsPerPage,
+        filters: { ...filters, ...externalFiltersRef.current },
+        sort: sortConfig || void 0
+      });
+      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]);
+  const performFetchRef = useRef13(performFetch);
+  performFetchRef.current = performFetch;
+  useEffect9(() => {
+    if (!fetchOnMount && !hasFetchedRef.current) return;
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = setTimeout(() => {
+      performFetchRef.current();
+    }, debounceMs);
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    };
+  }, [currentPage, itemsPerPage, sortConfig, filters, externalKey, reloadTrigger, fetchOnMount, debounceMs]);
+  const renderFilterInput = (col) => {
+    if (!col.filter) return null;
+    if (col.type === "boolean") {
+      const currentValue = filters[col.key];
+      const nextValue = currentValue === void 0 ? true : currentValue === true ? false : void 0;
+      const getToggleLabel = () => {
+        if (currentValue === void 0) return "Mostrar todos";
+        if (currentValue === true) return "Filtrar solo verdaderos";
+        return "Filtrar solo falsos";
+      };
+      return /* @__PURE__ */ jsx23(
+        "button",
+        {
+          className: "flex items-center justify-center cursor-pointer focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 rounded-full p-1 transition-all duration-200",
+          onClick: () => handleFilterChange(col.key, nextValue),
+          "aria-label": `${getToggleLabel()} para ${col.label}`,
+          title: `${getToggleLabel()} para ${col.label}`,
+          disabled: isLoading,
+          children: /* @__PURE__ */ jsx23("div", { className: "relative w-10 h-5 bg-secondary-300 rounded-full", children: /* @__PURE__ */ jsx23(
+            "div",
+            {
+              className: clsx23(
+                "absolute top-0.5 w-4 h-4 rounded-full transition-all duration-300 shadow-sm",
+                {
+                  "left-0.5 bg-secondary-400": currentValue === void 0,
+                  "left-5 bg-slate-500": currentValue === true,
+                  "left-0.5 bg-secondary-500": currentValue === false
+                }
+              )
+            }
+          ) })
+        }
+      );
+    }
+    if (col.filter === "catalog" && col.catalogOptions) {
+      if (col.catalogOptions.loading) {
+        return /* @__PURE__ */ jsx23(FaSpinner, { className: "animate-spin", "aria-label": "Cargando opciones", title: "Cargando opciones" });
+      }
+      if (col.catalogOptions.error) {
+        return /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-danger-500 text-xs", children: "Error cargando" });
+      }
+      return /* @__PURE__ */ jsx23(
+        ITSelect,
+        {
+          name: `filter-${col.key}`,
+          options: [
+            { value: "", label: "Todos" },
+            ...col.catalogOptions.data.map((item) => ({
+              value: String(item.id),
+              label: item.name
+            }))
+          ],
+          value: String(filters[col.key] || ""),
+          onChange: (e) => {
+            const value = e.target.value === "" ? void 0 : e.target.value;
+            handleFilterChange(col.key, value);
+          },
+          onBlur: () => {
+          },
+          className: "w-full text-xs",
+          disabled: isLoading
+        }
+      );
+    }
+    if (col.filter === "search" && col.catalogOptions) {
+      if (col.catalogOptions.loading) {
+        return /* @__PURE__ */ jsx23(FaSpinner, { className: "animate-spin", "aria-label": "Cargando opciones", title: "Cargando opciones" });
+      }
+      if (col.catalogOptions.error) {
+        return /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-danger-500 text-xs", children: "Error cargando" });
+      }
+      const searchValue = filters[col.key];
+      return /* @__PURE__ */ jsx23(
+        ITSearchSelect,
+        {
+          name: `filter-${col.key}`,
+          options: col.catalogOptions.data.map((item) => ({
+            value: item.id,
+            label: item.name
+          })),
+          value: typeof searchValue === "string" || typeof searchValue === "number" ? searchValue : "",
+          onChange: (value) => handleFilterChange(col.key, value === "" ? void 0 : value),
+          onSearch: col.catalogOptions.onSearch,
+          isLoading: col.catalogOptions.loading,
+          size: "sm",
+          placeholder: "Buscar...",
+          clearable: true,
+          className: "w-full",
+          onBlur: () => {
+          },
+          disabled: isLoading
+        }
+      );
+    }
+    if (col.filter === "date") {
+      const dateValue = filters[col.key];
+      return /* @__PURE__ */ jsx23(
+        ITDatePicker,
+        {
+          name: `filter-${col.key}`,
+          value: dateValue instanceof Date ? dateValue : void 0,
+          onChange: (e) => handleFilterChange(col.key, e.target.value),
+          minDate: col.dateFilterOptions?.minDate,
+          maxDate: col.dateFilterOptions?.maxDate,
+          size: "sm",
+          placeholder: "dd/mm/aaaa",
+          className: "w-full",
+          disabled: isLoading
+        }
+      );
+    }
+    if (col.filter === "date-range") {
+      const rangeValue = filters[col.key];
+      return /* @__PURE__ */ jsx23(
+        ITDatePicker,
+        {
+          name: `filter-${col.key}`,
+          range: true,
+          value: Array.isArray(rangeValue) ? rangeValue : void 0,
+          onChange: (e) => handleFilterChange(col.key, e.target.value),
+          minDate: col.dateFilterOptions?.minDate,
+          maxDate: col.dateFilterOptions?.maxDate,
+          size: "sm",
+          placeholder: "dd/mm/aaaa - dd/mm/aaaa",
+          className: "w-full",
+          disabled: isLoading
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx23(
+      ITInput,
+      {
+        name: `filter-${col.key}`,
+        className: "w-full text-xs",
+        placeholder: "Buscar...",
+        value: String(filters[col.key] || ""),
+        onChange: (e) => handleFilterChange(col.key, e.target.value),
+        onBlur: () => {
+        },
+        disabled: isLoading
+      }
+    );
+  };
+  const renderCellContent = (col, row) => {
+    const value = getNestedValue2(row, col.key);
+    if (col.render) return col.render(row);
+    switch (col.type) {
+      case "number":
+        return typeof value === "number" && col.currencyMX ? formatCurrencyMX(value) : value;
+      case "boolean":
+        return value ? /* @__PURE__ */ jsx23(FaCheck2, { className: "text-success-500", "aria-label": "Verdadero", title: "Verdadero" }) : /* @__PURE__ */ jsx23(FaTimes5, { className: "text-danger-500", "aria-label": "Falso", title: "Falso" });
+      case "actions":
+        return col.actions ? col.actions(row) : null;
+      case "catalog":
+        if (col.catalogOptions) {
+          const catalogItem = col.catalogOptions.data.find((item) => item.id === value);
+          return catalogItem?.name || value;
+        }
+        return value;
+      default:
+        return value;
+    }
+  };
+  const renderDefaultCard = (row) => {
+    const dataCols = columns.filter((c) => c.type !== "actions");
+    const actionCol = columns.find((c) => c.type === "actions");
+    return /* @__PURE__ */ jsxs20("div", { className: "bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-3 space-y-2 shadow-sm", children: [
+      dataCols.map((col) => /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx23("span", { className: "text-[10px] font-bold uppercase tracking-wider text-slate-400 whitespace-nowrap flex-shrink-0 min-w-[70px]", children: col.label }),
+        /* @__PURE__ */ jsx23("span", { className: "text-sm font-medium text-slate-800 dark:text-white text-right truncate", children: renderCellContent(col, row) })
+      ] }, col.key)),
+      actionCol?.actions && /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-end gap-2 pt-2 border-t border-slate-100 dark:border-slate-700", children: actionCol.actions(row) })
+    ] });
+  };
+  const segCtrlClass = (mode) => `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${effectiveView === mode ? "bg-white dark:bg-slate-900 text-slate-900 dark:text-white shadow-sm border border-slate-200/50 dark:border-slate-700" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"}`;
+  const handleRowClick = (row) => (event) => {
+    if (!onRowClick || isLoading || isInteractiveTarget(event.target, event.currentTarget)) return;
+    onRowClick(row, event);
+  };
+  const handleRowKeyDown = (row) => (event) => {
+    if (!onRowClick || isLoading) return;
+    if (event.target !== event.currentTarget) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onRowClick(row, event);
+  };
+  const tableEl = /* @__PURE__ */ jsxs20(
+    "table",
+    {
+      className: clsx23(
+        tableLayoutClass,
+        showVerticalBorder && "[&_th]:border-r [&_th:last-child]:border-r-0 [&_td]:border-r [&_td:last-child]:border-r-0",
+        showVerticalBorder && (verticalBorderClassname || "[&_th]:border-slate-100 dark:[&_th]:border-slate-700/30 [&_td]:border-slate-100 dark:[&_td]:border-slate-700/30"),
+        isLoading ? "opacity-50" : "opacity-100",
+        variantStyles[variant],
+        sizeStyles[size],
+        className
+      ),
+      style: isFixed ? { tableLayout: "fixed" } : void 0,
+      "aria-rowcount": isTableVirtual ? data.length + 1 : void 0,
+      children: [
+        hasColumnWidths && /* @__PURE__ */ jsx23("colgroup", { children: columns.map((col) => /* @__PURE__ */ jsx23(
+          "col",
+          {
+            style: col.width != null ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0
+          },
+          col.key
+        )) }),
+        /* @__PURE__ */ jsx23("thead", { children: /* @__PURE__ */ jsx23(
+          "tr",
+          {
+            className: clsx23(tableHeaderRow, "dark:text-slate-200"),
+            "aria-rowindex": isTableVirtual ? 1 : void 0,
+            children: columns.map((col) => /* @__PURE__ */ jsx23(
+              "th",
+              {
+                scope: "col",
+                className: clsx23(
+                  tableHeaderCell(col.className, density),
+                  col.align && tableAlignClasses[col.align],
+                  isStickyHeader && "sticky top-0 z-10 bg-secondary-50"
+                ),
+                style: col.minWidth != null || isStickyHeader ? {
+                  ...col.minWidth != null ? { minWidth: `${col.minWidth}px` } : {},
+                  ...isStickyHeader ? { backgroundColor: "var(--color-table-headerBg, #f8fafc)" } : {}
+                } : void 0,
+                children: /* @__PURE__ */ jsxs20("div", { className: isFixed ? "flex flex-col gap-3" : "flex flex-col gap-3 min-w-[150px]", children: [
+                  /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
+                    col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx23(
+                      "button",
+                      {
+                        onClick: () => handleSort(col.key),
+                        disabled: isLoading,
+                        className: `p-1 rounded-md transition-colors ${sortConfig?.key === col.key ? "bg-secondary-200 text-secondary-900" : "hover:bg-secondary-200 text-secondary-400 hover:text-secondary-700"} disabled:opacity-50`,
+                        title: `Ordenar por ${col.label}`,
+                        children: /* @__PURE__ */ jsx23(MdOutlineSwapVert, { className: "w-4 h-4", "aria-hidden": "true" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx23("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
+                ] })
+              },
+              col.key
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ jsx23("tbody", { className: clsx23(tableBody, "dark:divide-slate-700/30"), children: data.length > 0 ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
+          isTableVirtual && topSpacerHeight > 0 && /* @__PURE__ */ jsx23("tr", { "aria-hidden": "true", style: { height: topSpacerHeight }, children: /* @__PURE__ */ jsx23("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) }),
+          windowData.map((row, windowIndex) => {
+            const absoluteIndex = isTableVirtual ? startIndex + windowIndex : windowIndex;
+            return /* @__PURE__ */ jsx23(
+              "tr",
+              {
+                "aria-rowindex": isTableVirtual ? absoluteIndex + 2 : void 0,
+                className: clsx23(
+                  tableRow,
+                  variant === "striped" && absoluteIndex % 2 === 0 && "bg-secondary-50/40 dark:bg-slate-800/20",
+                  onRowClick && !isLoading && tableRowClickable
+                ),
+                tabIndex: onRowClick && !isLoading ? 0 : void 0,
+                onClick: onRowClick && !isLoading ? handleRowClick(row) : void 0,
+                onKeyDown: onRowClick && !isLoading ? handleRowKeyDown(row) : void 0,
+                children: columns.map((col) => {
+                  const rawValue = getNestedValue2(row, col.key);
+                  const truncateTitle = col.truncate && (typeof rawValue === "string" || typeof rawValue === "number") ? String(rawValue) : void 0;
+                  return /* @__PURE__ */ jsx23(
+                    "td",
+                    {
+                      className: clsx23(
+                        tableCell(col.className, density),
+                        col.align && tableAlignClasses[col.align]
+                      ),
+                      style: col.minWidth != null ? { minWidth: `${col.minWidth}px` } : void 0,
+                      title: truncateTitle,
+                      children: col.type === "actions" ? /* @__PURE__ */ jsx23("div", { className: tableActionsCell, children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx23("div", { className: clsx23(tableCellText, col.truncate && "truncate"), children: renderCellContent(col, row) })
+                    },
+                    `${absoluteIndex}-${col.key}`
+                  );
+                })
+              },
+              absoluteIndex
+            );
+          }),
+          isTableVirtual && bottomSpacerHeight > 0 && /* @__PURE__ */ jsx23("tr", { "aria-hidden": "true", style: { height: bottomSpacerHeight }, children: /* @__PURE__ */ jsx23("td", { colSpan: columnCount, style: { padding: 0, border: 0 } }) })
+        ] }) : /* @__PURE__ */ jsx23("tr", { children: /* @__PURE__ */ jsx23("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: !isLoading && /* @__PURE__ */ jsxs20("div", { className: tableEmptyContent, children: [
+          /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+          /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+        ] }) }) }) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs20("div", { ref: rootRef, className: clsx23("space-y-4 w-full relative", containerClassName), children: [
+    /* @__PURE__ */ jsxs20("div", { className: tableContainer, style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+      title && /* @__PURE__ */ jsxs20("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+        /* @__PURE__ */ jsx23(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3", children: [
+          isLoading && /* @__PURE__ */ jsx23("div", { className: "text-secondary-400", children: loadingIndicator || /* @__PURE__ */ jsx23(FaSpinner, { className: "animate-spin text-primary-500 text-xl" }) }),
+          /* @__PURE__ */ jsxs20("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
+            /* @__PURE__ */ jsxs20("button", { onClick: () => setViewMode("table"), disabled: forcedCards, className: segCtrlClass("table"), children: [
+              /* @__PURE__ */ jsx23(FaTable, { size: 11 }),
+              "Table"
+            ] }),
+            /* @__PURE__ */ jsxs20("button", { onClick: () => setViewMode("cards"), className: segCtrlClass("cards"), children: [
+              /* @__PURE__ */ jsx23(FaThLarge, { size: 11 }),
+              "Cards"
+            ] })
+          ] })
+        ] })
+      ] }),
+      !title && /* @__PURE__ */ jsx23("div", { className: "flex justify-end px-4 pt-3", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center bg-slate-100 dark:bg-slate-800/80 rounded-lg p-0.5 border border-slate-200 dark:border-slate-700/50", children: [
+        /* @__PURE__ */ jsxs20("button", { onClick: () => setViewMode("table"), disabled: forcedCards, className: segCtrlClass("table"), children: [
+          /* @__PURE__ */ jsx23(FaTable, { size: 11 }),
+          "Table"
+        ] }),
+        /* @__PURE__ */ jsxs20("button", { onClick: () => setViewMode("cards"), className: segCtrlClass("cards"), children: [
+          /* @__PURE__ */ jsx23(FaThLarge, { size: 11 }),
+          "Cards"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs20("div", { className: scrollOuterClass, children: [
+        isLoading && /* @__PURE__ */ jsx23("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-white/40 backdrop-blur-[2px] transition-all duration-300", children: /* @__PURE__ */ jsx23("div", { className: "flex flex-col items-center gap-3 p-6 rounded-2xl shadow-xl border border-secondary-100 animate-in fade-in zoom-in duration-300", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: loadingIndicator || /* @__PURE__ */ jsxs20(Fragment4, { children: [
+          /* @__PURE__ */ jsx23(FaSpinner, { className: "animate-spin text-primary-500 text-4xl" }),
+          /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-sm font-semibold text-secondary-600 animate-pulse", children: "Cargando datos..." })
+        ] }) }) }),
+        effectiveView === "cards" ? /* @__PURE__ */ jsx23("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ jsx23(
+          "div",
+          {
+            className: clsx23(tableCardHover, onRowClick && !isLoading && tableCardClickable),
+            role: onRowClick && !isLoading ? "button" : void 0,
+            tabIndex: onRowClick && !isLoading ? 0 : void 0,
+            onClick: onRowClick && !isLoading ? handleRowClick(row) : void 0,
+            onKeyDown: onRowClick && !isLoading ? handleRowKeyDown(row) : void 0,
+            children: renderCard ? renderCard(row) : renderDefaultCard(row)
+          },
+          i
+        )) : !isLoading && /* @__PURE__ */ jsxs20("div", { className: clsx23(tableEmptyContent, "py-12"), children: [
+          /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+          /* @__PURE__ */ jsx23(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+        ] }) }) : isTableVirtual ? /* @__PURE__ */ jsx23(
+          "div",
+          {
+            ref: scrollRef,
+            className: "overflow-x-auto overflow-y-auto",
+            style: { maxHeight: virtualizedMaxHeight },
+            children: tableEl
+          }
+        ) : tableEl
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx23("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ jsx23(
+      ITPagination,
+      {
+        currentPage,
+        totalPages: computedTotalPages,
+        onPageChange: goToPage,
+        color: "primary",
+        itemsPerPageOptions,
+        itemsPerPage,
+        onItemsPerPageChange: handleItemsPerPageChange,
+        totalItems
+      }
+    ) })
+  ] });
+}
+
+// src/components/organisms/dialog/dialog.tsx
+import { createPortal as createPortal5 } from "react-dom";
+import { useEffect as useEffect10, useRef as useRef14 } from "react";
 import { FaRegTimesCircle } from "react-icons/fa";
 
 // src/components/molecules/form-header/form-header.tsx
-import { FaTimes as FaTimes5 } from "react-icons/fa";
+import { FaTimes as FaTimes6 } from "react-icons/fa";
 
 // src/theme/theme-context.ts
 import { createContext, useContext } from "react";
@@ -4677,7 +4977,7 @@ var getContrastTextColor = (bgColor, palette2, isDarkMode) => {
 };
 
 // src/components/molecules/form-header/form-header.tsx
-import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function ITFormHeader({
   title,
   onClose,
@@ -4691,23 +4991,23 @@ function ITFormHeader({
     palette2,
     isDarkMode
   );
-  return /* @__PURE__ */ jsxs20("div", { className: `bg-primary-500 ${textColorClass} px-6 py-4 rounded-t-lg flex justify-center items-center relative ${className}`, children: [
-    /* @__PURE__ */ jsx23(ITText, { as: "h2", className: "text-lg font-semibold text-center", style: { color: "inherit" }, children: title }),
-    onClose && /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs21("div", { className: `bg-primary-500 ${textColorClass} px-6 py-4 rounded-t-lg flex justify-center items-center relative ${className}`, children: [
+    /* @__PURE__ */ jsx24(ITText, { as: "h2", className: "text-lg font-semibold text-center", style: { color: "inherit" }, children: title }),
+    onClose && /* @__PURE__ */ jsx24(
       "button",
       {
         onClick: onClose,
         className: `absolute right-4 ${textColorClass} hover:opacity-80 transition-colors duration-200 p-1 rounded-full`,
         style: { color: "inherit" },
         "aria-label": "Cerrar",
-        children: /* @__PURE__ */ jsx23(FaTimes5, { className: "w-4 h-4" })
+        children: /* @__PURE__ */ jsx24(FaTimes6, { className: "w-4 h-4" })
       }
     )
   ] });
 }
 
 // src/components/organisms/dialog/dialog.tsx
-import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 function ITDialog({
   isOpen,
   onClose,
@@ -4717,9 +5017,9 @@ function ITDialog({
   useFormHeader = false,
   fullScreen = false
 }) {
-  const modalRef = useRef13(null);
+  const modalRef = useRef14(null);
   useClickOutside_default(modalRef, onClose);
-  useEffect9(() => {
+  useEffect10(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -4734,12 +5034,12 @@ function ITDialog({
   }, [isOpen, onClose]);
   if (!isOpen) return null;
   if (typeof document === "undefined") return null;
-  const content = /* @__PURE__ */ jsx24(
+  const content = /* @__PURE__ */ jsx25(
     "div",
     {
       "data-it-dialog": "true",
       className: `fixed inset-0 flex ${fullScreen ? "items-stretch" : "items-center justify-center"} bg-slate-900/50 z-[60]`,
-      children: /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx25(
         "div",
         {
           ref: modalRef,
@@ -4752,41 +5052,41 @@ function ITDialog({
             borderColor: theme.card.borderColor,
             borderStyle: "solid"
           },
-          children: useFormHeader && title ? /* @__PURE__ */ jsxs21(Fragment5, { children: [
-            /* @__PURE__ */ jsx24(ITFormHeader, { title, onClose }),
-            /* @__PURE__ */ jsx24("div", { className: fullScreen ? "flex-1 overflow-auto p-6" : "p-6", children })
-          ] }) : /* @__PURE__ */ jsxs21(Fragment5, { children: [
-            /* @__PURE__ */ jsx24(
+          children: useFormHeader && title ? /* @__PURE__ */ jsxs22(Fragment5, { children: [
+            /* @__PURE__ */ jsx25(ITFormHeader, { title, onClose }),
+            /* @__PURE__ */ jsx25("div", { className: fullScreen ? "flex-1 overflow-auto p-6" : "p-6", children })
+          ] }) : /* @__PURE__ */ jsxs22(Fragment5, { children: [
+            /* @__PURE__ */ jsx25(
               "button",
               {
                 className: "absolute top-2 right-2 text-secondary-600 hover:text-secondary-900",
                 onClick: onClose,
-                children: /* @__PURE__ */ jsx24(FaRegTimesCircle, {})
+                children: /* @__PURE__ */ jsx25(FaRegTimesCircle, {})
               }
             ),
-            title && /* @__PURE__ */ jsx24(ITText, { as: "h2", className: "text-xl font-semibold mb-4", children: title }),
-            /* @__PURE__ */ jsx24("div", { children })
+            title && /* @__PURE__ */ jsx25(ITText, { as: "h2", className: "text-xl font-semibold mb-4", children: title }),
+            /* @__PURE__ */ jsx25("div", { children })
           ] })
         }
       )
     }
   );
-  return createPortal4(content, document.body);
+  return createPortal5(content, document.body);
 }
 
 // src/components/atoms/divider/divider.tsx
-import clsx23 from "clsx";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import clsx24 from "clsx";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function ITDivider({
   orientation = "horizontal",
   className,
   color = "bg-slate-200 dark:bg-slate-700",
   thickness = orientation === "horizontal" ? "h-px" : "w-px"
 }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
-      className: clsx23(
+      className: clsx24(
         "flex-shrink-0",
         orientation === "horizontal" ? "w-full" : "self-stretch",
         thickness,
@@ -4798,10 +5098,10 @@ function ITDivider({
 }
 
 // src/components/organisms/drawer/drawer.tsx
-import clsx24 from "clsx";
-import { FaTimes as FaTimes6 } from "react-icons/fa";
-import { useRef as useRef14 } from "react";
-import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import clsx25 from "clsx";
+import { FaTimes as FaTimes7 } from "react-icons/fa";
+import { useRef as useRef15 } from "react";
+import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 function ITDrawer({
   isOpen,
   onClose,
@@ -4812,15 +5112,15 @@ function ITDrawer({
   className,
   style
 }) {
-  const panelRef = useRef14(null);
+  const panelRef = useRef15(null);
   useClickOutside_default(panelRef, onClose);
-  return /* @__PURE__ */ jsx26(Fragment6, { children: isOpen && /* @__PURE__ */ jsxs22("div", { className: "fixed inset-0 z-[50] flex", children: [
-    /* @__PURE__ */ jsx26("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" }),
-    /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx27(Fragment6, { children: isOpen && /* @__PURE__ */ jsxs23("div", { className: "fixed inset-0 z-[50] flex", children: [
+    /* @__PURE__ */ jsx27("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" }),
+    /* @__PURE__ */ jsxs23(
       "div",
       {
         ref: panelRef,
-        className: clsx24(
+        className: clsx25(
           "relative z-10 h-full bg-white dark:bg-slate-900 shadow-2xl flex flex-col transition-transform duration-300",
           position === "right" ? "ml-auto" : "mr-auto",
           size,
@@ -4828,18 +5128,18 @@ function ITDrawer({
         ),
         style,
         children: [
-          title && /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-slate-700", children: [
-            /* @__PURE__ */ jsx26(ITText, { as: "h2", className: "text-lg font-bold text-slate-800 dark:text-white", children: title }),
-            /* @__PURE__ */ jsx26(
+          title && /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-slate-700", children: [
+            /* @__PURE__ */ jsx27(ITText, { as: "h2", className: "text-lg font-bold text-slate-800 dark:text-white", children: title }),
+            /* @__PURE__ */ jsx27(
               "button",
               {
                 onClick: onClose,
                 className: "w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-400 hover:text-slate-600 transition-colors",
-                children: /* @__PURE__ */ jsx26(FaTimes6, { size: 14 })
+                children: /* @__PURE__ */ jsx27(FaTimes7, { size: 14 })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx26("div", { className: "flex-1 overflow-y-auto p-5", children })
+          /* @__PURE__ */ jsx27("div", { className: "flex-1 overflow-y-auto p-5", children })
         ]
       }
     )
@@ -4847,27 +5147,27 @@ function ITDrawer({
 }
 
 // src/components/molecules/empty-state/empty-state.tsx
-import clsx25 from "clsx";
+import clsx26 from "clsx";
 import { FaInbox } from "react-icons/fa";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 function ITEmptyState({
-  icon = /* @__PURE__ */ jsx27(FaInbox, { size: 40 }),
+  icon = /* @__PURE__ */ jsx28(FaInbox, { size: 40 }),
   title,
   description,
   action,
   className
 }) {
-  return /* @__PURE__ */ jsxs23("div", { className: clsx25("flex flex-col items-center justify-center py-16 px-6 text-center", className), children: [
-    /* @__PURE__ */ jsx27("div", { className: "text-slate-300 dark:text-slate-600 mb-4", children: icon }),
-    /* @__PURE__ */ jsx27(ITText, { as: "h3", className: "text-lg font-bold text-slate-700 dark:text-slate-200 mb-1", children: title }),
-    description && /* @__PURE__ */ jsx27(ITText, { as: "p", className: "text-sm text-slate-400 dark:text-slate-500 max-w-sm mb-4", children: description }),
-    action && /* @__PURE__ */ jsx27("div", { children: action })
+  return /* @__PURE__ */ jsxs24("div", { className: clsx26("flex flex-col items-center justify-center py-16 px-6 text-center", className), children: [
+    /* @__PURE__ */ jsx28("div", { className: "text-slate-300 dark:text-slate-600 mb-4", children: icon }),
+    /* @__PURE__ */ jsx28(ITText, { as: "h3", className: "text-lg font-bold text-slate-700 dark:text-slate-200 mb-1", children: title }),
+    description && /* @__PURE__ */ jsx28(ITText, { as: "p", className: "text-sm text-slate-400 dark:text-slate-500 max-w-sm mb-4", children: description }),
+    action && /* @__PURE__ */ jsx28("div", { children: action })
   ] });
 }
 
 // src/components/atoms/flex/flex.tsx
-import clsx26 from "clsx";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import clsx27 from "clsx";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var directionMap = {
   row: "flex-row",
   column: "flex-col",
@@ -4916,10 +5216,10 @@ function ITFlex({
     flexBasis: typeof basis === "number" ? `${basis * 0.25}rem` : basis,
     ...style
   };
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     Component,
     {
-      className: clsx26(
+      className: clsx27(
         "flex",
         directionMap[direction],
         align && alignMap[align],
@@ -4938,33 +5238,33 @@ function ITFlex({
 import { useMemo as useMemo10 } from "react";
 
 // src/components/organisms/form-builder/formBuilder.context.tsx
-import React6, { createContext as createContext2, useContext as useContext2, useState as useState19 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import React7, { createContext as createContext2, useContext as useContext2, useState as useState20 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var ITFormBuilderContext = createContext2(void 0);
 var ITFormBuilderProvider = ({
   children,
   value
 }) => {
-  const [fieldRegistry, setFieldRegistry] = useState19({});
-  const registerField = React6.useCallback((name, config2) => {
+  const [fieldRegistry, setFieldRegistry] = useState20({});
+  const registerField = React7.useCallback((name, config2) => {
     setFieldRegistry((prev) => ({ ...prev, [name]: config2 }));
   }, []);
-  const unregisterField = React6.useCallback((name) => {
+  const unregisterField = React7.useCallback((name) => {
     setFieldRegistry((prev) => {
       const next = { ...prev };
       delete next[name];
       return next;
     });
   }, []);
-  const getFieldConfig = React6.useCallback(
+  const getFieldConfig = React7.useCallback(
     (name) => fieldRegistry[name],
     [fieldRegistry]
   );
-  const getAllFieldConfigs = React6.useCallback(
+  const getAllFieldConfigs = React7.useCallback(
     () => Object.values(fieldRegistry),
     [fieldRegistry]
   );
-  const contextValue = React6.useMemo(
+  const contextValue = React7.useMemo(
     () => ({
       ...value,
       registerField,
@@ -4974,7 +5274,7 @@ var ITFormBuilderProvider = ({
     }),
     [value, registerField, unregisterField, getFieldConfig, getAllFieldConfigs]
   );
-  return /* @__PURE__ */ jsx29(ITFormBuilderContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx30(ITFormBuilderContext.Provider, { value: contextValue, children });
 };
 var useITFormBuilderContext = () => {
   const context = useContext2(ITFormBuilderContext);
@@ -4989,11 +5289,11 @@ import { memo, useCallback as useCallback8, useEffect as useEffect12, useMemo as
 import clsx29 from "clsx";
 
 // src/components/molecules/time-picker/timePicker.tsx
-import clsx27 from "clsx";
-import { useEffect as useEffect10, useRef as useRef15, useState as useState20 } from "react";
-import { createPortal as createPortal5 } from "react-dom";
+import clsx28 from "clsx";
+import { useEffect as useEffect11, useRef as useRef16, useState as useState21 } from "react";
+import { createPortal as createPortal6 } from "react-dom";
 import { FaClock } from "react-icons/fa";
-import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 function ITTimePicker({
   name,
   value,
@@ -5010,12 +5310,12 @@ function ITTimePicker({
   variant = "primary",
   color = "primary"
 }) {
-  const [isOpen, setIsOpen] = useState20(false);
-  const [inputValue, setInputValue] = useState20(value || "");
-  const [isValidTime, setIsValidTime] = useState20(true);
-  const wrapperRef = useRef15(null);
-  const hoursRef = useRef15(null);
-  const minutesRef = useRef15(null);
+  const [isOpen, setIsOpen] = useState21(false);
+  const [inputValue, setInputValue] = useState21(value || "");
+  const [isValidTime, setIsValidTime] = useState21(true);
+  const wrapperRef = useRef16(null);
+  const hoursRef = useRef16(null);
+  const minutesRef = useRef16(null);
   const { panelRef: dropdownRef, style: panelStyle } = useFloatingPanel(
     wrapperRef,
     isOpen && !disabled,
@@ -5029,7 +5329,7 @@ function ITTimePicker({
   const isThemeColor = color in theme.colors;
   const highlightColor = isThemeColor ? theme.colors[color][50] : "#f3f4f6";
   const activeColor = isThemeColor ? theme.colors[color][100] : "#e5e7eb";
-  useEffect10(() => {
+  useEffect11(() => {
     setInputValue(value || "");
   }, [value]);
   const validateTime = (timeString) => {
@@ -5038,7 +5338,7 @@ function ITTimePicker({
   };
   const currentHour = validateTime(inputValue) ? inputValue.split(":")[0] : null;
   const currentMinute = validateTime(inputValue) ? inputValue.split(":")[1] : null;
-  useEffect10(() => {
+  useEffect11(() => {
     if (isOpen) {
       setTimeout(() => {
         if (hoursRef.current && currentHour) {
@@ -5108,8 +5408,8 @@ function ITTimePicker({
     { length: 60 },
     (_, i) => i.toString().padStart(2, "0")
   );
-  return /* @__PURE__ */ jsxs24("div", { ref: wrapperRef, className: clsx27("relative w-full", className), children: [
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs25("div", { ref: wrapperRef, className: clsx28("relative w-full", className), children: [
+    /* @__PURE__ */ jsx31(
       ITInput,
       {
         name,
@@ -5126,7 +5426,7 @@ function ITTimePicker({
         size,
         touched,
         error: !isValidTime ? "Hora inv\xE1lida" : typeof error === "string" ? error : void 0,
-        iconRight: /* @__PURE__ */ jsx30(
+        iconRight: /* @__PURE__ */ jsx31(
           FaClock,
           {
             onClick: () => {
@@ -5134,7 +5434,7 @@ function ITTimePicker({
                 setIsOpen(!isOpen);
               }
             },
-            className: clsx27(
+            className: clsx28(
               "cursor-pointer transition-colors",
               disabled ? "text-slate-400 cursor-not-allowed" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
             )
@@ -5142,31 +5442,31 @@ function ITTimePicker({
         )
       }
     ),
-    isOpen && !disabled && createPortal5(
-      /* @__PURE__ */ jsxs24(
+    isOpen && !disabled && createPortal6(
+      /* @__PURE__ */ jsxs25(
         "div",
         {
           ref: dropdownRef,
           className: "bg-white border border-secondary-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: panelStyle,
           children: [
-            /* @__PURE__ */ jsxs24("div", { className: "flex bg-secondary-50 border-b border-secondary-100 text-xs font-semibold text-secondary-500 uppercase tracking-wider", children: [
-              /* @__PURE__ */ jsx30(ITText, { as: "div", className: "flex-1 text-center py-2 border-r border-secondary-100", children: "Horas" }),
-              /* @__PURE__ */ jsx30(ITText, { as: "div", className: "flex-1 text-center py-2", children: "Minutos" })
+            /* @__PURE__ */ jsxs25("div", { className: "flex bg-secondary-50 border-b border-secondary-100 text-xs font-semibold text-secondary-500 uppercase tracking-wider", children: [
+              /* @__PURE__ */ jsx31(ITText, { as: "div", className: "flex-1 text-center py-2 border-r border-secondary-100", children: "Horas" }),
+              /* @__PURE__ */ jsx31(ITText, { as: "div", className: "flex-1 text-center py-2", children: "Minutos" })
             ] }),
-            /* @__PURE__ */ jsxs24("div", { className: "flex h-56 relative bg-white", children: [
-              /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsxs25("div", { className: "flex h-56 relative bg-white", children: [
+              /* @__PURE__ */ jsx31(
                 "div",
                 {
                   ref: hoursRef,
                   className: "flex-1 overflow-y-auto no-scrollbar border-r border-secondary-50 scroll-smooth relative",
-                  children: /* @__PURE__ */ jsx30("div", { className: "py-2", children: hoursList.map((h) => {
+                  children: /* @__PURE__ */ jsx31("div", { className: "py-2", children: hoursList.map((h) => {
                     const isSelected = currentHour === h;
-                    return /* @__PURE__ */ jsx30(
+                    return /* @__PURE__ */ jsx31(
                       "div",
                       {
                         "data-value": h,
-                        className: clsx27(
+                        className: clsx28(
                           "text-center py-2 cursor-pointer transition-all duration-200 text-sm font-medium mx-2 rounded-lg my-1",
                           isSelected ? "text-slate-900 shadow-sm" : "text-slate-600 hover:text-slate-900"
                         ),
@@ -5189,18 +5489,18 @@ function ITTimePicker({
                   }) })
                 }
               ),
-              /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx31(
                 "div",
                 {
                   ref: minutesRef,
                   className: "flex-1 overflow-y-auto no-scrollbar scroll-smooth relative",
-                  children: /* @__PURE__ */ jsx30("div", { className: "py-2", children: minutesList.map((m) => {
+                  children: /* @__PURE__ */ jsx31("div", { className: "py-2", children: minutesList.map((m) => {
                     const isSelected = currentMinute === m;
-                    return /* @__PURE__ */ jsx30(
+                    return /* @__PURE__ */ jsx31(
                       "div",
                       {
                         "data-value": m,
-                        className: clsx27(
+                        className: clsx28(
                           "text-center py-2 cursor-pointer transition-all duration-200 text-sm font-medium mx-2 rounded-lg my-1",
                           isSelected ? "text-slate-900 shadow-sm" : "text-slate-600 hover:text-slate-900"
                         ),
@@ -5223,16 +5523,16 @@ function ITTimePicker({
                   }) })
                 }
               ),
-              /* @__PURE__ */ jsx30("div", { className: "absolute top-1/2 left-0 right-0 h-10 -mt-5 bg-black/5 pointer-events-none border-y border-black/10 z-10" })
+              /* @__PURE__ */ jsx31("div", { className: "absolute top-1/2 left-0 right-0 h-10 -mt-5 bg-black/5 pointer-events-none border-y border-black/10 z-10" })
             ] }),
-            /* @__PURE__ */ jsx30("div", { className: "p-3 bg-secondary-50 border-t border-secondary-100 flex justify-end", children: /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx31("div", { className: "p-3 bg-secondary-50 border-t border-secondary-100 flex justify-end", children: /* @__PURE__ */ jsx31(
               ITButton,
               {
                 variant: "solid",
                 color,
                 size: "sm",
                 onClick: handleConfirm,
-                children: /* @__PURE__ */ jsx30(ITText, { as: "span", children: "Aceptar" })
+                children: /* @__PURE__ */ jsx31(ITText, { as: "span", children: "Aceptar" })
               }
             ) })
           ]
@@ -5243,236 +5543,6 @@ function ITTimePicker({
   ] });
 }
 
-// src/components/molecules/search-select/search-select.tsx
-import { useState as useState21, useEffect as useEffect11, useRef as useRef16, useMemo as useMemo7 } from "react";
-import { createPortal as createPortal6 } from "react-dom";
-import clsx28 from "clsx";
-import { FaSearch as FaSearch2, FaTimes as FaTimes7 } from "react-icons/fa";
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
-function ITSearchSelect({
-  name,
-  options = [],
-  label,
-  placeholder = "Selecciona una opci\xF3n",
-  valueField = "value",
-  labelField = "label",
-  value,
-  onChange,
-  onBlur,
-  disabled = false,
-  className,
-  touched,
-  required,
-  error,
-  readOnly = false,
-  onSearch,
-  isLoading = false,
-  noResultsMessage = "No se encontraron resultados",
-  size = "md",
-  renderOption,
-  clearable = true,
-  onClear
-}) {
-  const [isOpen, setIsOpen] = useState21(false);
-  const [searchTerm, setSearchTerm] = useState21("");
-  const [isFocused, setIsFocused] = useState21(false);
-  const [localTouched, setLocalTouched] = useState21(false);
-  const containerRef = useRef16(null);
-  const inputWrapperRef = useRef16(null);
-  const timeoutRef = useRef16(null);
-  const { panelRef, style: panelStyle } = useFloatingPanel(inputWrapperRef, isOpen, {
-    estimatedHeight: 260,
-    matchWidth: true
-  });
-  const selectedOption = useMemo7(() => {
-    return options.find((opt) => opt[valueField] === value);
-  }, [options, value, valueField]);
-  useEffect11(() => {
-    if (!isFocused) {
-      setSearchTerm(selectedOption ? String(selectedOption[labelField]) : "");
-    }
-  }, [selectedOption, isFocused, labelField]);
-  useEffect11(() => {
-    function handleClickOutside(event) {
-      const target = event.target;
-      const inContainer = containerRef.current?.contains(target);
-      const inPanel = panelRef.current?.contains(target);
-      if (!inContainer && !inPanel) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const selectedLabel = selectedOption ? String(selectedOption[labelField]) : "";
-  const filteredOptions = useMemo7(() => {
-    if (onSearch) return options;
-    if (!searchTerm || !isFocused || searchTerm === selectedLabel) return options;
-    return options.filter(
-      (opt) => String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
-    );
-  }, [options, searchTerm, selectedLabel, onSearch, labelField, isFocused]);
-  const handleInputChange = (e) => {
-    const query = e.target.value;
-    setSearchTerm(query);
-    setIsOpen(true);
-    if (onSearch) {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => {
-        onSearch(query);
-      }, 500);
-    }
-  };
-  const handleSelect = (option) => {
-    if (onChange) {
-      onChange(option[valueField], option);
-    }
-    setSearchTerm(String(option[labelField]));
-    setIsOpen(false);
-  };
-  const handleClear = () => {
-    setSearchTerm("");
-    setIsOpen(true);
-    if (onSearch) onSearch("");
-    if (value !== void 0 && value !== null && value !== "") {
-      onChange?.("", void 0);
-    }
-    onClear?.();
-  };
-  const handleFocus = () => {
-    if (disabled || readOnly) return;
-    setIsFocused(true);
-    setIsOpen(true);
-  };
-  const handleInputBlur = (e) => {
-    setTimeout(() => {
-      setIsFocused(false);
-      setLocalTouched(true);
-      onBlur?.(e);
-    }, 200);
-  };
-  const inputTheme = theme.input || {};
-  const isTouched = touched !== void 0 ? touched : localTouched;
-  const isEmpty = value === void 0 || value === null || String(value).trim() === "";
-  const effectiveError = error !== void 0 && error !== false ? error === true ? "Este campo es requerido" : error : required && isEmpty ? "Este campo es requerido" : void 0;
-  const hasError = isTouched && !!effectiveError;
-  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
-  const showClearButton = clearable && !disabled && !readOnly && (searchTerm.length > 0 || !isEmpty);
-  const getInputStyle = () => {
-    const sizeConfig = inputSizeTokens[size] ?? inputSizeTokens.md;
-    const style = {
-      backgroundColor: inputTheme.backgroundColor || "#ffffff",
-      borderColor: inputTheme.borderColor || "var(--color-secondary-300)",
-      borderRadius: inputTheme.borderRadius || "0.5rem",
-      padding: sizeConfig.padding,
-      fontSize: sizeConfig.fontSize,
-      borderWidth: "1px",
-      borderStyle: "solid",
-      transition: "all 0.2s",
-      color: "var(--it-input-text-color, var(--color-secondary-900))",
-      width: "100%"
-    };
-    if (disabled) {
-      style.backgroundColor = inputTheme.disabled?.backgroundColor || "var(--color-secondary-100)";
-      style.borderColor = inputTheme.disabled?.borderColor || "var(--color-secondary-200)";
-      style.opacity = 0.7;
-      style.cursor = "not-allowed";
-    }
-    if (hasError) {
-      style.borderColor = inputTheme.error?.borderColor || "red";
-      if (isFocused) {
-        style.boxShadow = inputTheme.error?.ring;
-      }
-    } else if (isFocused && !readOnly) {
-      style.boxShadow = inputTheme.focus?.ring;
-      style.borderColor = inputTheme.focus?.borderColor;
-    }
-    return style;
-  };
-  return /* @__PURE__ */ jsxs25("div", { className: clsx28("w-full flex flex-col gap-1.5", className, isOpen && "relative z-30"), ref: containerRef, children: [
-    label && /* @__PURE__ */ jsxs25(
-      ITText,
-      {
-        as: "label",
-        className: clsx28("text-sm font-medium text-secondary-700 dark:text-slate-300", {
-          "text-danger-500": hasError
-        }),
-        children: [
-          /* @__PURE__ */ jsx31(ITText, { as: "span", children: label }),
-          required && /* @__PURE__ */ jsx31(ITText, { as: "span", className: "text-danger-500 ml-1", children: "*" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs25("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs25("div", { ref: inputWrapperRef, className: "relative flex items-center", children: [
-        /* @__PURE__ */ jsx31(
-          "input",
-          {
-            type: "text",
-            name,
-            value: searchTerm,
-            onChange: handleInputChange,
-            onFocus: handleFocus,
-            onBlur: handleInputBlur,
-            disabled,
-            readOnly,
-            placeholder,
-            className: "outline-none pr-10",
-            style: getInputStyle(),
-            autoComplete: "off"
-          }
-        ),
-        /* @__PURE__ */ jsxs25("div", { className: "absolute right-3 flex items-center gap-2 text-secondary-400", children: [
-          isLoading && /* @__PURE__ */ jsx31("div", { className: "pointer-events-none animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" }),
-          !isLoading && showClearButton && /* @__PURE__ */ jsx31(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Limpiar",
-              title: "Limpiar",
-              onMouseDown: (e) => {
-                e.preventDefault();
-                handleClear();
-              },
-              className: "flex items-center justify-center text-secondary-400 hover:text-secondary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 rounded-full",
-              children: /* @__PURE__ */ jsx31(FaTimes7, { size: 14 })
-            }
-          ),
-          !isLoading && !showClearButton && /* @__PURE__ */ jsx31(FaSearch2, { size: 14, className: clsx28("pointer-events-none", { "text-primary-500": isFocused }) })
-        ] })
-      ] }),
-      isOpen && createPortal6(
-        /* @__PURE__ */ jsx31(
-          "div",
-          {
-            ref: panelRef,
-            style: panelStyle,
-            className: "bg-white dark:bg-slate-900 border border-secondary-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top",
-            children: /* @__PURE__ */ jsx31("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => {
-              const isSelected = value === option[valueField];
-              return /* @__PURE__ */ jsx31(
-                ITText,
-                {
-                  as: "div",
-                  onClick: () => handleSelect(option),
-                  className: clsx28(
-                    "px-4 py-2 text-sm cursor-pointer transition-colors",
-                    isSelected ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium" : "hover:bg-secondary-50 dark:hover:bg-slate-800 text-secondary-700 dark:text-slate-300"
-                  ),
-                  children: renderOption ? renderOption(option, { isSelected, searchTerm }) : /* @__PURE__ */ jsx31(ITText, { as: "span", children: option[labelField] })
-                },
-                option[valueField]
-              );
-            }) : /* @__PURE__ */ jsx31(ITText, { as: "div", className: "px-4 py-6 text-sm text-center text-secondary-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) })
-          }
-        ),
-        document.body
-      )
-    ] }),
-    hasError && /* @__PURE__ */ jsx31(ITText, { as: "p", className: "text-danger-500 text-xs mt-1", children: errorMessage })
-  ] });
-}
-
 // src/components/organisms/form-builder/useFormBuilder.ts
 import { useMemo as useMemo8 } from "react";
 var useFieldRules = (config2, dependentValues) => {
@@ -7905,6 +7975,7 @@ import {
   FaThLarge as FaThLarge2
 } from "react-icons/fa";
 import { MdOutlineSwapVert as MdOutlineSwapVert2 } from "react-icons/md";
+import { isSameDay as isSameDay2, startOfDay as startOfDay2, endOfDay } from "date-fns";
 import { Fragment as Fragment9, jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
 function ITTable({
   columns,
@@ -7988,15 +8059,32 @@ function ITTable({
   }, [data, sortConfig, columns]);
   const filteredData = sortedData.filter(
     (row) => columns.every((col) => {
-      if (!col.filter || filters[col.key] === void 0 || filters[col.key] === "")
+      const rawFilter = filters[col.key];
+      if (!col.filter || rawFilter === void 0 || rawFilter === "") return true;
+      if (Array.isArray(rawFilter) && rawFilter[0] == null && rawFilter[1] == null) {
         return true;
+      }
       const value = getNestedValue(row, col.key);
-      const filterValue = String(filters[col.key]).toLowerCase();
+      if (col.filter === "date" || col.filter === "date-range") {
+        const rowDate = value instanceof Date ? value : new Date(String(value));
+        if (isNaN(rowDate.getTime())) return false;
+        if (col.filter === "date") {
+          return isSameDay2(rowDate, rawFilter);
+        }
+        const [start, end] = rawFilter;
+        if (start && rowDate.getTime() < startOfDay2(start).getTime()) return false;
+        if (end && rowDate.getTime() > endOfDay(end).getTime()) return false;
+        return true;
+      }
+      if (col.filter === "search") {
+        return String(value) === String(rawFilter);
+      }
+      const filterValue = String(rawFilter).toLowerCase();
       switch (col.type) {
         case "number":
           return String(value).includes(filterValue);
         case "boolean":
-          return value === filters[col.key];
+          return value === rawFilter;
         case "catalog": {
           if (!col.catalogOptions) return true;
           const catalogItem = col.catalogOptions.data.find(
@@ -8102,6 +8190,75 @@ function ITTable({
         }
       );
     }
+    if (col.filter === "search" && col.catalogOptions) {
+      if (col.catalogOptions.loading) {
+        return /* @__PURE__ */ jsx59(
+          FaSpinner3,
+          {
+            className: "animate-spin",
+            "aria-label": "Cargando opciones",
+            title: "Cargando opciones"
+          }
+        );
+      }
+      if (col.catalogOptions.error) {
+        return /* @__PURE__ */ jsx59(ITText, { as: "span", className: "text-danger-500 text-xs", children: "Error cargando" });
+      }
+      const searchValue = filters[col.key];
+      return /* @__PURE__ */ jsx59(
+        ITSearchSelect,
+        {
+          name: `filter-${col.key}`,
+          options: col.catalogOptions.data.map((item) => ({
+            value: item.id,
+            label: item.name
+          })),
+          value: typeof searchValue === "string" || typeof searchValue === "number" ? searchValue : "",
+          onChange: (value) => handleFilterChange(col.key, value === "" ? void 0 : value),
+          onSearch: col.catalogOptions.onSearch,
+          isLoading: col.catalogOptions.loading,
+          size: "sm",
+          placeholder: "Buscar...",
+          clearable: true,
+          className: "w-full",
+          onBlur: () => {
+          }
+        }
+      );
+    }
+    if (col.filter === "date") {
+      const dateValue = filters[col.key];
+      return /* @__PURE__ */ jsx59(
+        ITDatePicker,
+        {
+          name: `filter-${col.key}`,
+          value: dateValue instanceof Date ? dateValue : void 0,
+          onChange: (e) => handleFilterChange(col.key, e.target.value),
+          minDate: col.dateFilterOptions?.minDate,
+          maxDate: col.dateFilterOptions?.maxDate,
+          size: "sm",
+          placeholder: "dd/mm/aaaa",
+          className: "w-full"
+        }
+      );
+    }
+    if (col.filter === "date-range") {
+      const rangeValue = filters[col.key];
+      return /* @__PURE__ */ jsx59(
+        ITDatePicker,
+        {
+          name: `filter-${col.key}`,
+          range: true,
+          value: Array.isArray(rangeValue) ? rangeValue : void 0,
+          onChange: (e) => handleFilterChange(col.key, e.target.value),
+          minDate: col.dateFilterOptions?.minDate,
+          maxDate: col.dateFilterOptions?.maxDate,
+          size: "sm",
+          placeholder: "dd/mm/aaaa - dd/mm/aaaa",
+          className: "w-full"
+        }
+      );
+    }
     return /* @__PURE__ */ jsx59(
       ITInput,
       {