@axzydev/axzy_ui_system 1.2.6 → 1.2.8

package/dist/index.js

@@ -344,21 +344,31 @@ var sizeMap = {
   lg: { container: "w-12 h-12", text: "text-base" },
   xl: { container: "w-16 h-16", text: "text-xl" }
 };
+var DEFAULT_COLOR = "bg-primary-600";
+var DEFAULT_BG = "var(--color-primary-600)";
+var DEFAULT_SHADOW = "0 4px 14px 0 rgba(37, 99, 235, 0.35)";
 function ITAvatar({
   src,
   alt = "",
   initials,
   size = "md",
-  color = "bg-primary-500",
+  color = DEFAULT_COLOR,
   className,
   badge,
   onClick
 }) {
   const { container, text } = sizeMap[size];
+  const useInlineStyle = !color || color === DEFAULT_COLOR;
   return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: clsx2("relative inline-flex items-center justify-center rounded-full flex-shrink-0", container, className),
+      className: clsx2(
+        "relative inline-flex items-center justify-center rounded-full flex-shrink-0 overflow-hidden text-white font-bold tracking-wide",
+        container,
+        !useInlineStyle && color,
+        className
+      ),
+      style: useInlineStyle ? { backgroundColor: DEFAULT_BG, boxShadow: DEFAULT_SHADOW } : void 0,
       onClick,
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
@@ -373,7 +383,7 @@ function ITAvatar({
               e.currentTarget.style.display = "none";
             }
           }
-        ) : /* @__PURE__ */ jsx3("div", { className: clsx2("w-full h-full rounded-full flex items-center justify-center text-white font-semibold", text, color), children: /* @__PURE__ */ jsx3(ITText, { as: "span", children: initials || alt.charAt(0).toUpperCase() || "?" }) }),
+        ) : /* @__PURE__ */ jsx3("span", { className: clsx2("flex items-center justify-center w-full h-full", text), children: /* @__PURE__ */ jsx3(ITText, { as: "span", className: "text-white", children: initials || alt.charAt(0).toUpperCase() || "?" }) }),
         badge && /* @__PURE__ */ jsx3("div", { className: "absolute -bottom-0.5 -right-0.5", children: badge })
       ]
     }
@@ -1734,7 +1744,7 @@ function ITConfirmDialog({
 // src/types/table.types.ts
 var variantStyles = {
   default: "",
-  striped: "divide-y divide-gray-200",
+  striped: "",
   bordered: "border border-gray-200"
 };
 var sizeStyles = {
@@ -1745,8 +1755,8 @@ var sizeStyles = {
 
 // src/components/data-table/dataTable.tsx
 import clsx15 from "clsx";
-import { useState as useState9, useEffect as useEffect5, useCallback as useCallback5, useRef as useRef4 } from "react";
-import { FaCheck as FaCheck2, FaSpinner as FaSpinner2, FaTimes as FaTimes3 } from "react-icons/fa";
+import { useState as useState10, useEffect as useEffect5, useCallback as useCallback5, useRef as useRef4 } from "react";
+import { FaCheck as FaCheck2, FaSpinner as FaSpinner2, FaTimes as FaTimes3, FaTable as FaTable2, FaThLarge as FaThLarge2 } from "react-icons/fa";
 import { MdOutlineSwapVert as MdOutlineSwapVert2 } from "react-icons/md";
 
 // src/components/input/input.tsx
@@ -1777,6 +1787,7 @@ function getGridColsClass(columns) {
   return gridColsClasses[columns] || "grid-cols-12";
 }
 function getColSpanClass(span, maxCols) {
+  if (span == null) return `col-span-${maxCols}`;
   if (typeof span === "number") {
     return `col-span-${Math.min(span, maxCols)}`;
   }
@@ -2327,8 +2338,8 @@ function ITSelect({
       borderStyle: "solid",
       transition: "all 0.2s",
       color: "var(--input-text-color, var(--color-secondary-900))",
-      appearance: "none"
-      // Important for custom styling
+      appearance: "none",
+      colorScheme: "light dark"
     };
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
@@ -2584,11 +2595,13 @@ function ITPagination({
 
 // src/components/table/table.tsx
 import clsx14 from "clsx";
-import React3 from "react";
+import React3, { useState as useState9 } from "react";
 import {
   FaCheck,
   FaSpinner,
-  FaTimes as FaTimes2
+  FaTimes as FaTimes2,
+  FaTable,
+  FaThLarge
 } from "react-icons/fa";
 import { MdOutlineSwapVert } from "react-icons/md";
 import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -2610,8 +2623,13 @@ function ITTable({
   size = "md",
   itemsPerPageOptions = [5, 10, 20],
   defaultItemsPerPage = 10,
-  title
+  title,
+  renderCard,
+  defaultView = "table",
+  showVerticalBorder = true,
+  verticalBorderClassname
 }) {
+  const [viewMode, setViewMode] = useState9(defaultView);
   const {
     currentPage,
     itemsPerPage,
@@ -2811,25 +2829,91 @@ function ITTable({
         return value;
     }
   };
+  const renderDefaultCard = (row) => {
+    const dataCols = columns.filter((c) => c.type !== "actions");
+    const actionCol = columns.find((c) => c.type === "actions");
+    return /* @__PURE__ */ jsxs12("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__ */ jsxs12("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx14("span", { className: "text-[10px] font-bold uppercase tracking-wider text-slate-400 whitespace-nowrap flex-shrink-0 min-w-[70px]", children: col.label }),
+        /* @__PURE__ */ jsx14("span", { className: "text-sm font-medium text-slate-800 dark:text-white text-right truncate", children: renderCellContent(col, row) })
+      ] }, col.key)),
+      actionCol?.actions && /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-end gap-2 pt-2 border-t border-slate-100 dark:border-slate-700", children: actionCol.actions(row) })
+    ] });
+  };
   return /* @__PURE__ */ jsx14("div", { className: clsx14("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ jsxs12("div", { className: "rounded-xl shadow-sm overflow-hidden", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
-    title && /* @__PURE__ */ jsx14("div", { className: "px-6 py-5 border-b border-secondary-100", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ jsx14(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }) }),
-    /* @__PURE__ */ jsx14("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs12(
+    title && /* @__PURE__ */ jsxs12("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+      /* @__PURE__ */ jsx14(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
+      /* @__PURE__ */ jsxs12("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__ */ jsxs12(
+          "button",
+          {
+            onClick: () => setViewMode("table"),
+            className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "table" ? "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"}`,
+            children: [
+              /* @__PURE__ */ jsx14(FaTable, { size: 11 }),
+              "Table"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs12(
+          "button",
+          {
+            onClick: () => setViewMode("cards"),
+            className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "cards" ? "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"}`,
+            children: [
+              /* @__PURE__ */ jsx14(FaThLarge, { size: 11 }),
+              "Cards"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    !title && /* @__PURE__ */ jsx14("div", { className: "flex justify-end px-4 pt-3", children: /* @__PURE__ */ jsxs12("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__ */ jsxs12(
+        "button",
+        {
+          onClick: () => setViewMode("table"),
+          className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "table" ? "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"}`,
+          children: [
+            /* @__PURE__ */ jsx14(FaTable, { size: 11 }),
+            "Table"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs12(
+        "button",
+        {
+          onClick: () => setViewMode("cards"),
+          className: `flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${viewMode === "cards" ? "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"}`,
+          children: [
+            /* @__PURE__ */ jsx14(FaThLarge, { size: 11 }),
+            "Cards"
+          ]
+        }
+      )
+    ] }) }),
+    viewMode === "cards" ? /* @__PURE__ */ jsx14("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: currentData.length > 0 ? currentData.map((row, i) => /* @__PURE__ */ jsx14("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 text-secondary-400", children: [
+      /* @__PURE__ */ jsx14(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+      /* @__PURE__ */ jsx14(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+    ] }) }) : /* @__PURE__ */ jsx14("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs12(
       "table",
       {
         className: clsx14(
           "min-w-max w-full text-sm text-left text-secondary-600",
+          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"),
           variantStyles[variant],
           sizeStyles[size]
         ),
         children: [
-          /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { className: "bg-secondary-50 border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500", children: columns.map((col) => /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { className: "bg-secondary-50 text-xs uppercase tracking-wider font-semibold text-slate-700 dark:text-slate-200", children: columns.map((col) => /* @__PURE__ */ jsx14(
             "th",
             {
               scope: "col",
               className: clsx14("px-4 py-4 align-top", col.className),
               children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
                 /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsx14(ITText, { as: "span", className: "text-secondary-700 font-bold", children: col.label }),
+                  /* @__PURE__ */ jsx14(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
                   col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx14(
                     "button",
                     {
@@ -2845,10 +2929,10 @@ function ITTable({
             },
             col.key
           )) }) }),
-          /* @__PURE__ */ jsx14("tbody", { className: "divide-y divide-secondary-100", children: currentData.length > 0 ? currentData.map((row, rowIndex) => /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx14("tbody", { className: "divide-y divide-slate-100 dark:divide-slate-700/30", children: currentData.length > 0 ? currentData.map((row, rowIndex) => /* @__PURE__ */ jsx14(
             "tr",
             {
-              className: "hover:bg-secondary-50/50 transition-colors duration-150 group",
+              className: clsx14("hover:bg-secondary-50/50 transition-colors duration-150 group", variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"),
               children: columns.map((col) => /* @__PURE__ */ jsx14(
                 "td",
                 {
@@ -2866,7 +2950,7 @@ function ITTable({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx14("div", { className: "rounded-b-xl border-t border-secondary-200 px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx14("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ jsx14(
       ITPagination,
       {
         currentPage,
@@ -2902,11 +2986,16 @@ function ITDataTable({
   size = "md",
   itemsPerPageOptions = [5, 10, 20],
   defaultItemsPerPage = 10,
-  title
+  title,
+  renderCard,
+  defaultView,
+  showVerticalBorder = true,
+  verticalBorderClassname
 }) {
-  const [data, setData] = useState9([]);
-  const [totalItems, setTotalItems] = useState9(0);
-  const [isLoading, setIsLoading] = useState9(fetchOnMount);
+  const [viewMode, setViewMode] = useState10(defaultView || "table");
+  const [data, setData] = useState10([]);
+  const [totalItems, setTotalItems] = useState10(0);
+  const [isLoading, setIsLoading] = useState10(fetchOnMount);
   const {
     currentPage,
     itemsPerPage,
@@ -3047,31 +3136,70 @@ function ITDataTable({
         return value;
     }
   };
+  const renderDefaultCard = (row) => {
+    const dataCols = columns.filter((c) => c.type !== "actions");
+    const actionCol = columns.find((c) => c.type === "actions");
+    return /* @__PURE__ */ jsxs13("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__ */ jsxs13("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx15("span", { className: "text-[10px] font-bold uppercase tracking-wider text-slate-400 whitespace-nowrap flex-shrink-0 min-w-[70px]", children: col.label }),
+        /* @__PURE__ */ jsx15("span", { className: "text-sm font-medium text-slate-800 dark:text-white text-right truncate", children: renderCellContent(col, row) })
+      ] }, col.key)),
+      actionCol?.actions && /* @__PURE__ */ jsx15("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 ${viewMode === 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"}`;
   return /* @__PURE__ */ jsxs13("div", { className: clsx15("space-y-4 w-full relative", containerClassName), children: [
     /* @__PURE__ */ jsxs13("div", { className: "rounded-xl shadow-sm overflow-hidden", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
-      title && /* @__PURE__ */ jsxs13("div", { className: "px-6 py-5 border-b border-secondary-100 flex justify-between items-center", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+      title && /* @__PURE__ */ jsxs13("div", { className: "px-6 py-5 flex items-center justify-between", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
         /* @__PURE__ */ jsx15(ITText, { as: "h2", className: "text-xl font-bold text-secondary-900 leading-tight", children: title }),
-        isLoading && /* @__PURE__ */ jsx15("div", { className: "text-secondary-400", children: loadingIndicator || /* @__PURE__ */ jsx15(FaSpinner2, { className: "animate-spin text-primary-500 text-xl" }) })
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
+          isLoading && /* @__PURE__ */ jsx15("div", { className: "text-secondary-400", children: loadingIndicator || /* @__PURE__ */ jsx15(FaSpinner2, { className: "animate-spin text-primary-500 text-xl" }) }),
+          /* @__PURE__ */ jsxs13("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__ */ jsxs13("button", { onClick: () => setViewMode("table"), className: segCtrlClass("table"), children: [
+              /* @__PURE__ */ jsx15(FaTable2, { size: 11 }),
+              "Table"
+            ] }),
+            /* @__PURE__ */ jsxs13("button", { onClick: () => setViewMode("cards"), className: segCtrlClass("cards"), children: [
+              /* @__PURE__ */ jsx15(FaThLarge2, { size: 11 }),
+              "Cards"
+            ] })
+          ] })
+        ] })
       ] }),
+      !title && /* @__PURE__ */ jsx15("div", { className: "flex justify-end px-4 pt-3", children: /* @__PURE__ */ jsxs13("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__ */ jsxs13("button", { onClick: () => setViewMode("table"), className: segCtrlClass("table"), children: [
+          /* @__PURE__ */ jsx15(FaTable2, { size: 11 }),
+          "Table"
+        ] }),
+        /* @__PURE__ */ jsxs13("button", { onClick: () => setViewMode("cards"), className: segCtrlClass("cards"), children: [
+          /* @__PURE__ */ jsx15(FaThLarge2, { size: 11 }),
+          "Cards"
+        ] })
+      ] }) }),
       /* @__PURE__ */ jsxs13("div", { className: "overflow-x-auto relative min-h-[200px]", children: [
         isLoading && /* @__PURE__ */ jsx15("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-white/40 backdrop-blur-[2px] transition-all duration-300", children: /* @__PURE__ */ jsx15("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__ */ jsxs13(Fragment3, { children: [
           /* @__PURE__ */ jsx15(FaSpinner2, { className: "animate-spin text-primary-500 text-4xl" }),
           /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-sm font-semibold text-secondary-600 animate-pulse", children: "Cargando datos..." })
         ] }) }) }),
-        /* @__PURE__ */ jsxs13(
+        viewMode === "cards" ? /* @__PURE__ */ jsx15("div", { className: "p-4 space-y-3 max-h-[400px] overflow-y-auto", children: data.length > 0 ? data.map((row, i) => /* @__PURE__ */ jsx15("div", { children: renderCard ? renderCard(row) : renderDefaultCard(row) }, i)) : !isLoading && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center py-12 text-secondary-400", children: [
+          /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
+          /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
+        ] }) }) : /* @__PURE__ */ jsxs13(
           "table",
           {
             className: clsx15(
               "min-w-max w-full text-sm text-left text-secondary-600 transition-opacity duration-300",
+              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
             ),
             children: [
-              /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { className: "bg-white border-b border-secondary-200 text-xs uppercase tracking-wider font-semibold text-secondary-500", children: columns.map((col) => /* @__PURE__ */ jsx15("th", { scope: "col", className: clsx15("px-4 py-4 align-top", col.className), children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
+              /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { className: "bg-secondary-50 text-xs uppercase tracking-wider font-semibold text-slate-700 dark:text-slate-200", children: columns.map((col) => /* @__PURE__ */ jsx15("th", { scope: "col", className: clsx15("px-4 py-4 align-top", col.className), children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-3 min-w-[150px]", children: [
                 /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-secondary-700 font-bold", children: col.label }),
+                  /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-slate-900 dark:text-white font-bold", children: col.label }),
                   col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx15(
                     "button",
                     {
@@ -3085,7 +3213,7 @@ function ITDataTable({
                 ] }),
                 /* @__PURE__ */ jsx15("div", { className: "w-full", children: col.filter ? renderFilterInput(col) : null })
               ] }) }, col.key)) }) }),
-              /* @__PURE__ */ jsx15("tbody", { className: "divide-y divide-secondary-100", children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ jsx15("tr", { className: "hover:bg-secondary-50/50 transition-colors duration-150 group", children: columns.map((col) => /* @__PURE__ */ jsx15("td", { className: clsx15("px-4 py-3 align-middle", col.className), children: col.type === "actions" ? /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center gap-2", children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx15("div", { className: "text-secondary-700 font-medium", children: renderCellContent(col, row) }) }, `${rowIndex}-${col.key}`)) }, rowIndex)) : /* @__PURE__ */ jsx15("tr", { children: /* @__PURE__ */ jsx15("td", { colSpan: columns.length, className: "px-6 py-20 text-center", children: !isLoading && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center text-secondary-400", children: [
+              /* @__PURE__ */ jsx15("tbody", { className: "divide-y divide-slate-100 dark:divide-slate-700/30", children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ jsx15("tr", { className: clsx15("hover:bg-secondary-50/50 transition-colors duration-150 group", variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20"), children: columns.map((col) => /* @__PURE__ */ jsx15("td", { className: clsx15("px-4 py-3 align-middle", col.className), children: col.type === "actions" ? /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center gap-2", children: renderCellContent(col, row) }) : /* @__PURE__ */ jsx15("div", { className: "text-secondary-700 font-medium", children: renderCellContent(col, row) }) }, `${rowIndex}-${col.key}`)) }, rowIndex)) : /* @__PURE__ */ jsx15("tr", { children: /* @__PURE__ */ jsx15("td", { colSpan: columns.length, className: "px-6 py-12 text-center", children: !isLoading && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center text-secondary-400", children: [
                 /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-lg", children: "No se encontraron resultados" }),
                 /* @__PURE__ */ jsx15(ITText, { as: "span", className: "text-sm mt-1", children: "Intenta ajustar los filtros" })
               ] }) }) }) })
@@ -3094,7 +3222,7 @@ function ITDataTable({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx15("div", { className: "rounded-b-xl border-t border-secondary-200 px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx15("div", { className: "rounded-b-xl px-6 py-4", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: /* @__PURE__ */ jsx15(
       ITPagination,
       {
         currentPage,
@@ -3112,7 +3240,7 @@ function ITDataTable({
 
 // src/components/date-picker/datePicker.tsx
 import clsx16 from "clsx";
-import React5, { useEffect as useEffect6, useRef as useRef5, useState as useState10 } from "react";
+import React5, { useEffect as useEffect6, useRef as useRef5, useState as useState11 } from "react";
 import { FaCalendarAlt } from "react-icons/fa";
 import { isBefore as isBefore2 } from "date-fns";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -3135,12 +3263,12 @@ function ITDatePicker({
   maxDate,
   range = false
 }) {
-  const [isOpen, setIsOpen] = useState10(false);
-  const [inputValue, setInputValue] = useState10("");
-  const [isValidDate, setIsValidDate] = useState10(true);
-  const [internalRange, setInternalRange] = useState10([null, null]);
+  const [isOpen, setIsOpen] = useState11(false);
+  const [inputValue, setInputValue] = useState11("");
+  const [isValidDate, setIsValidDate] = useState11(true);
+  const [internalRange, setInternalRange] = useState11([null, null]);
   const wrapperRef = useRef5(null);
-  const [calendarPosition, setCalendarPosition] = useState10({ top: 0, left: 0 });
+  const [calendarPosition, setCalendarPosition] = useState11({ top: 0, left: 0 });
   const dateRange = React5.useMemo(() => {
     if (range) {
       if (Array.isArray(value)) return value;
@@ -3320,7 +3448,7 @@ function ITDatePicker({
           FaCalendarAlt,
           {
             onClick: handleIconClick,
-            className: "text-slate-900 cursor-pointer"
+            className: "text-slate-500 dark:text-slate-400 cursor-pointer"
           }
         ) }),
         variant,
@@ -3379,11 +3507,11 @@ import { FaRegTimesCircle } from "react-icons/fa";
 import { FaTimes as FaTimes4 } from "react-icons/fa";
 
 // src/components/theme-provider/themeProvider.tsx
-import { createContext, useContext, useState as useState12, useEffect as useEffect7 } from "react";
+import { createContext, useContext, useState as useState13, useEffect as useEffect7 } from "react";
 import { MdPalette, MdClose, MdRefresh } from "react-icons/md";
 
 // src/components/tabs/tabs.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import { clsx as clsx17 } from "clsx";
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var ITTabs = ({
@@ -3394,7 +3522,7 @@ var ITTabs = ({
   className = "",
   containerClassName = ""
 }) => {
-  const [activeId, setActiveId] = useState11(defaultActiveId || items[0]?.id);
+  const [activeId, setActiveId] = useState12(defaultActiveId || items[0]?.id);
   const handleTabClick = (id, disabled) => {
     if (disabled) return;
     setActiveId(id);
@@ -3736,7 +3864,7 @@ function ITThemeProvider({
   theme: theme2,
   showFab = true
 }) {
-  const [palette2, setPaletteState] = useState12(() => {
+  const [palette2, setPaletteState] = useState13(() => {
     const basePalette = {
       ...DEFAULT_PALETTE,
       ...theme2,
@@ -3762,8 +3890,8 @@ function ITThemeProvider({
     }
     return basePalette;
   });
-  const [isOpen, setIsOpen] = useState12(false);
-  const [customPresets, setCustomPresets] = useState12(() => {
+  const [isOpen, setIsOpen] = useState13(false);
+  const [customPresets, setCustomPresets] = useState13(() => {
     try {
       const saved = localStorage.getItem("it-theme-custom-presets");
       return saved ? JSON.parse(saved) : [];
@@ -3772,8 +3900,8 @@ function ITThemeProvider({
       return [];
     }
   });
-  const [newPresetName, setNewPresetName] = useState12("");
-  const [isSavingPreset, setIsSavingPreset] = useState12(false);
+  const [newPresetName, setNewPresetName] = useState13("");
+  const [isSavingPreset, setIsSavingPreset] = useState13(false);
   const handleSavePreset = () => {
     if (!newPresetName.trim()) return;
     const newPreset = {
@@ -3792,8 +3920,8 @@ function ITThemeProvider({
     setCustomPresets(updated);
     localStorage.setItem("it-theme-custom-presets", JSON.stringify(updated));
   };
-  const [resolvedTheme, setResolvedTheme] = useState12("light");
-  const [darkModeMode, setDarkModeMode] = useState12(
+  const [resolvedTheme, setResolvedTheme] = useState13("light");
+  const [darkModeMode, setDarkModeMode] = useState13(
     () => {
       const saved = localStorage.getItem("it-theme-dark-mode");
       if (saved === "light" || saved === "dark" || saved === "system") {
@@ -5568,17 +5696,17 @@ function ITFlex({
 }
 
 // src/components/form-builder/formBuilder.tsx
-import { useEffect as useEffect12, useState as useState15, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect13, useState as useState18, useMemo as useMemo6 } from "react";
 
 // src/components/form-builder/formBuilder.context.tsx
-import React8, { createContext as createContext2, useContext as useContext2, useState as useState13 } from "react";
+import React8, { createContext as createContext2, useContext as useContext2, useState as useState14 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var ITFormBuilderContext = createContext2(void 0);
 var ITFormBuilderProvider = ({
   children,
   value
 }) => {
-  const [fieldRegistry, setFieldRegistry] = useState13({});
+  const [fieldRegistry, setFieldRegistry] = useState14({});
   const registerField = React8.useCallback((name, config2) => {
     setFieldRegistry((prev) => ({ ...prev, [name]: config2 }));
   }, []);
@@ -5612,12 +5740,12 @@ var useITFormBuilderContext = () => {
 };
 
 // src/components/form-builder/fieldRenderer.tsx
-import { memo, useCallback as useCallback6, useEffect as useEffect11 } from "react";
-import clsx24 from "clsx";
+import { memo, useCallback as useCallback6, useEffect as useEffect12, useState as useState17 } from "react";
+import clsx25 from "clsx";
 
 // src/components/time-picker/timePicker.tsx
 import clsx23 from "clsx";
-import { useEffect as useEffect10, useRef as useRef8, useState as useState14 } from "react";
+import { useEffect as useEffect10, useRef as useRef8, useState as useState15 } from "react";
 import { FaClock } from "react-icons/fa";
 import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function ITTimePicker({
@@ -5636,10 +5764,10 @@ function ITTimePicker({
   variant = "primary",
   color = "primary"
 }) {
-  const [isOpen, setIsOpen] = useState14(false);
-  const [inputValue, setInputValue] = useState14(value || "");
-  const [isValidTime, setIsValidTime] = useState14(true);
-  const [dropdownPosition, setDropdownPosition] = useState14({ top: 0, left: 0 });
+  const [isOpen, setIsOpen] = useState15(false);
+  const [inputValue, setInputValue] = useState15(value || "");
+  const [isValidTime, setIsValidTime] = useState15(true);
+  const [dropdownPosition, setDropdownPosition] = useState15({ top: 0, left: 0 });
   const wrapperRef = useRef8(null);
   const dropdownRef = useRef8(null);
   const hoursRef = useRef8(null);
@@ -5775,7 +5903,7 @@ function ITTimePicker({
             },
             className: clsx23(
               "cursor-pointer transition-colors",
-              disabled ? "text-slate-400 cursor-not-allowed" : "text-slate-900 hover:text-slate-600"
+              disabled ? "text-slate-400 cursor-not-allowed" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
             )
           }
         )
@@ -5882,27 +6010,204 @@ function ITTimePicker({
   ] });
 }
 
+// src/components/search-select/search-select.tsx
+import { useState as useState16, useEffect as useEffect11, useRef as useRef9, useMemo as useMemo4 } from "react";
+import clsx24 from "clsx";
+import { FaSearch } from "react-icons/fa";
+import { jsx as jsx28, jsxs as jsxs23 } 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"
+}) {
+  const [isOpen, setIsOpen] = useState16(false);
+  const [searchTerm, setSearchTerm] = useState16("");
+  const [isFocused, setIsFocused] = useState16(false);
+  const [localTouched, setLocalTouched] = useState16(false);
+  const containerRef = useRef9(null);
+  const timeoutRef = useRef9(null);
+  const selectedOption = useMemo4(() => {
+    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) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const filteredOptions = useMemo4(() => {
+    if (onSearch) return options;
+    if (!searchTerm || !isFocused) return options;
+    return options.filter(
+      (opt) => String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [options, searchTerm, 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 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 getInputStyle = () => {
+    const style = {
+      backgroundColor: inputTheme.backgroundColor || "#ffffff",
+      borderColor: inputTheme.borderColor || "#e2e8f0",
+      borderRadius: inputTheme.borderRadius || "0.5rem",
+      padding: inputTheme.padding || "0.5rem 0.75rem",
+      fontSize: inputTheme.fontSize || "0.875rem",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      transition: "all 0.2s",
+      color: "var(--input-text-color, var(--color-secondary-900))",
+      width: "100%"
+    };
+    if (disabled) {
+      style.backgroundColor = inputTheme.disabled?.backgroundColor || "#f1f5f9";
+      style.borderColor = inputTheme.disabled?.borderColor || "#e2e8f0";
+      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__ */ jsxs23("div", { className: clsx24("w-full flex flex-col gap-1.5", className, isOpen && "relative z-30"), ref: containerRef, children: [
+    label && /* @__PURE__ */ jsxs23(
+      ITText,
+      {
+        as: "label",
+        className: clsx24("text-sm font-medium text-gray-700 dark:text-slate-300", {
+          "text-red-500": hasError
+        }),
+        children: [
+          /* @__PURE__ */ jsx28(ITText, { as: "span", children: label }),
+          required && /* @__PURE__ */ jsx28(ITText, { as: "span", className: "text-red-500 ml-1", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "relative flex items-center", children: [
+        /* @__PURE__ */ jsx28(
+          "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__ */ jsxs23("div", { className: "absolute right-3 flex items-center gap-2 text-gray-400 pointer-events-none", children: [
+          isLoading && /* @__PURE__ */ jsx28("div", { className: "animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" }),
+          !isLoading && /* @__PURE__ */ jsx28(FaSearch, { size: 14, className: clsx24({ "text-primary-500": isFocused }) })
+        ] })
+      ] }),
+      isOpen && /* @__PURE__ */ jsx28("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ jsx28("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx28(
+        ITText,
+        {
+          as: "div",
+          onClick: () => handleSelect(option),
+          className: clsx24(
+            "px-4 py-2 text-sm cursor-pointer transition-colors",
+            value === option[valueField] ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium" : "hover:bg-gray-50 dark:hover:bg-slate-800 text-gray-700 dark:text-slate-300"
+          ),
+          children: /* @__PURE__ */ jsx28(ITText, { as: "span", children: option[labelField] })
+        },
+        option[valueField]
+      )) : /* @__PURE__ */ jsx28(ITText, { as: "div", className: "px-4 py-6 text-sm text-center text-gray-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
+    ] }),
+    hasError && /* @__PURE__ */ jsx28(ITText, { as: "p", className: "text-red-500 text-xs mt-1", children: errorMessage })
+  ] });
+}
+
 // src/components/form-builder/useFormBuilder.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 var useFieldRules = (config2, dependentValues) => {
   const { getFieldConfig } = useITFormBuilderContext();
   const fieldConfig = getFieldConfig(config2.name) || config2;
-  const isVisible = useMemo4(() => {
+  const isVisible = useMemo5(() => {
     if (!fieldConfig.renderWhen) return true;
     return fieldConfig.renderWhen(dependentValues);
   }, [fieldConfig.renderWhen, dependentValues]);
-  const dynamicProps = useMemo4(() => {
+  const dynamicProps = useMemo5(() => {
     if (!fieldConfig.dynamicProps) return {};
     return fieldConfig.dynamicProps(dependentValues);
   }, [fieldConfig.dynamicProps, dependentValues]);
-  const isRequired = useMemo4(() => {
+  const isRequired = useMemo5(() => {
     if (typeof dynamicProps.required !== "undefined") return dynamicProps.required;
     if (typeof fieldConfig.required === "function") {
       return fieldConfig.required(dependentValues);
     }
     return fieldConfig.required || false;
   }, [fieldConfig.required, dynamicProps.required, dependentValues]);
-  const isDisabled = useMemo4(() => {
+  const isDisabled = useMemo5(() => {
     if (typeof dynamicProps.disabled !== "undefined") return dynamicProps.disabled;
     if (typeof fieldConfig.disabled === "function") {
       return fieldConfig.disabled(dependentValues);
@@ -5913,7 +6218,24 @@ var useFieldRules = (config2, dependentValues) => {
 };
 
 // src/components/form-builder/fieldRenderer.tsx
-import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { FaSpinner as FaSpinner3 } from "react-icons/fa";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+function useAsyncOptions(options, depends) {
+  const [resolved, setResolved] = useState17([]);
+  const [loading, setLoading] = useState17(false);
+  useEffect12(() => {
+    if (typeof options === "function") {
+      setLoading(true);
+      options().then((result) => {
+        setResolved(result.map((o) => ({ value: String(o.value), label: o.label })));
+        setLoading(false);
+      });
+    } else if (Array.isArray(options)) {
+      setResolved(options.map((o) => ({ value: String(o.value), label: o.label })));
+    }
+  }, depends);
+  return { options: resolved, loading };
+}
 var ITFieldRenderer = ({
   config: config2,
   columns = 12,
@@ -5927,7 +6249,7 @@ var ITFieldRenderer = ({
     config2,
     dependentValues
   );
-  useEffect11(() => {
+  useEffect12(() => {
     context.registerField(config2.name, config2);
     return () => {
       context.unregisterField(config2.name);
@@ -5953,6 +6275,7 @@ var ITFieldRenderer = ({
     leftIcon,
     rightIcon
   } = activeConfig;
+  const { options: resolvedOptions, loading: optionsLoading } = useAsyncOptions(options, [options, dependentValues]);
   const handleChangeWrapper = useCallback6(
     async (val) => {
       const finalValue = val?.target ? val.target.value : val;
@@ -5969,7 +6292,7 @@ var ITFieldRenderer = ({
       case "password":
       case "number":
       case "email":
-        return /* @__PURE__ */ jsx28(
+        return /* @__PURE__ */ jsx29(
           ITInput,
           {
             type: type === "email" ? "text" : type,
@@ -5994,10 +6317,36 @@ var ITFieldRenderer = ({
           }
         );
       case "select":
-        return /* @__PURE__ */ jsx28(
+        if (optionsLoading) {
+          return /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 py-3", children: [
+            /* @__PURE__ */ jsx29(FaSpinner3, { className: "animate-spin text-primary-500" }),
+            /* @__PURE__ */ jsx29(ITText, { as: "span", className: "text-sm text-slate-500", children: "Cargando opciones..." })
+          ] });
+        }
+        if (typeof options === "function") {
+          return /* @__PURE__ */ jsx29(
+            ITSearchSelect,
+            {
+              options: resolvedOptions,
+              name,
+              disabled: isDisabled,
+              label: label || "",
+              placeholder,
+              value: value !== void 0 ? value : activeConfig.defaultValue || "",
+              valueField: valueField || "value",
+              labelField: labelField || "label",
+              onChange: (val) => handleChangeWrapper(val),
+              onBlur: context.handleBlur,
+              touched,
+              error,
+              required: isRequired
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx29(
           ITSelect,
           {
-            options: Array.isArray(options) ? options : [],
+            options: resolvedOptions,
             name,
             disabled: isDisabled,
             label: label || "",
@@ -6013,7 +6362,7 @@ var ITFieldRenderer = ({
           }
         );
       case "date":
-        return /* @__PURE__ */ jsx28(
+        return /* @__PURE__ */ jsx29(
           ITDatePicker,
           {
             name,
@@ -6029,7 +6378,7 @@ var ITFieldRenderer = ({
           }
         );
       case "time":
-        return /* @__PURE__ */ jsx28(
+        return /* @__PURE__ */ jsx29(
           ITTimePicker,
           {
             name,
@@ -6047,7 +6396,7 @@ var ITFieldRenderer = ({
       case "custom":
         if (activeConfig.component) {
           const CustomComponent = activeConfig.component;
-          return /* @__PURE__ */ jsx28(
+          return /* @__PURE__ */ jsx29(
             CustomComponent,
             {
               ...activeConfig,
@@ -6062,9 +6411,9 @@ var ITFieldRenderer = ({
         }
         return null;
       case "section":
-        return /* @__PURE__ */ jsxs23("div", { className: clsx24("w-full col-span-full", activeConfig.className), children: [
-          label && /* @__PURE__ */ jsx28(ITText, { as: "h4", className: "text-lg font-semibold text-gray-800 mb-4", children: label }),
-          /* @__PURE__ */ jsx28("div", { className: clsx24("grid gap-y-6 gap-x-5", getGridColsClass(columns)), children: activeConfig.fields?.map((childConfig) => /* @__PURE__ */ jsx28(
+        return /* @__PURE__ */ jsxs24("div", { className: clsx25("w-full col-span-full", activeConfig.className), children: [
+          label && /* @__PURE__ */ jsx29(ITText, { as: "h4", className: "text-lg font-semibold text-gray-800 mb-4", children: label }),
+          /* @__PURE__ */ jsx29("div", { className: clsx25("grid gap-y-6 gap-x-5", getGridColsClass(columns)), children: activeConfig.fields?.map((childConfig) => /* @__PURE__ */ jsx29(
             ITFieldRenderer,
             {
               config: childConfig,
@@ -6074,7 +6423,7 @@ var ITFieldRenderer = ({
           )) })
         ] });
       case "array":
-        return /* @__PURE__ */ jsx28("div", { className: "p-4 border-2 border-dashed border-gray-200 rounded-xl", children: /* @__PURE__ */ jsxs23(ITText, { as: "p", className: "text-sm text-gray-500 text-center", children: [
+        return /* @__PURE__ */ jsx29("div", { className: "p-4 border-2 border-dashed border-gray-200 rounded-xl", children: /* @__PURE__ */ jsxs24(ITText, { as: "p", className: "text-sm text-gray-500 text-center", children: [
           "Array Field: ",
           label
         ] }) });
@@ -6082,12 +6431,12 @@ var ITFieldRenderer = ({
         return null;
     }
   };
-  return /* @__PURE__ */ jsx28("div", { className: clsx24(getColSpanClass(activeConfig.column, columns), activeConfig.className), children: renderField() });
+  return /* @__PURE__ */ jsx29("div", { className: clsx25(getColSpanClass(activeConfig.column, columns), activeConfig.className), children: renderField() });
 };
 var fieldRenderer_default = memo(ITFieldRenderer);
 
 // src/components/form-builder/formBuilder.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function buildDependentValues(dependsOn, values) {
   if (!dependsOn || dependsOn.length === 0) return {};
   const deps = {};
@@ -6111,11 +6460,11 @@ function ITFormBuilder({
   },
   isSubmitting = false
 }) {
-  const [mounted, setMounted] = useState15(false);
-  useEffect12(() => {
+  const [mounted, setMounted] = useState18(false);
+  useEffect13(() => {
     setMounted(true);
   }, []);
-  const providerValue = useMemo5(() => ({
+  const providerValue = useMemo6(() => ({
     config: config2 || [],
     values: values || {},
     errors: errors || {},
@@ -6131,7 +6480,7 @@ function ITFormBuilder({
     submitCount: 0
   }), [config2, values, errors, touched, handleChange, handleBlur, setFieldValue, setFieldTouched, setFieldError, isSubmitting]);
   if (config2) {
-    return /* @__PURE__ */ jsx29(ITFormBuilderProvider, { value: providerValue, children: /* @__PURE__ */ jsx29("div", { className: formGrid(columns), children: config2.map((fieldConfig) => /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(ITFormBuilderProvider, { value: providerValue, children: /* @__PURE__ */ jsx30("div", { className: formGrid(columns), children: config2.map((fieldConfig) => /* @__PURE__ */ jsx30(
       fieldRenderer_default,
       {
         config: fieldConfig,
@@ -6144,7 +6493,7 @@ function ITFormBuilder({
       fieldConfig.name
     )) }) });
   }
-  return /* @__PURE__ */ jsx29("div", { className: formGrid(columns), children: fields?.map(({
+  return /* @__PURE__ */ jsx30("div", { className: formGrid(columns), children: fields?.map(({
     name,
     label,
     type = "text",
@@ -6159,12 +6508,12 @@ function ITFormBuilder({
     formatNumber = true,
     onChangeAction,
     ...props
-  }) => /* @__PURE__ */ jsx29("div", { className: getColSpanClass(column, columns), children: (() => {
+  }) => /* @__PURE__ */ jsx30("div", { className: getColSpanClass(column, columns), children: (() => {
     switch (type) {
       case "text":
       case "number":
       case "password":
-        return /* @__PURE__ */ jsx29(
+        return /* @__PURE__ */ jsx30(
           ITInput,
           {
             type,
@@ -6194,7 +6543,7 @@ function ITFormBuilder({
           }
         );
       case "select":
-        return /* @__PURE__ */ jsx29(
+        return /* @__PURE__ */ jsx30(
           ITSelect,
           {
             options: options || [],
@@ -6218,7 +6567,7 @@ function ITFormBuilder({
           }
         );
       case "date":
-        return /* @__PURE__ */ jsx29(
+        return /* @__PURE__ */ jsx30(
           ITDatePicker,
           {
             name,
@@ -6245,8 +6594,8 @@ function ITFormBuilder({
 }
 
 // src/components/grid/grid.tsx
-import clsx25 from "clsx";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import clsx26 from "clsx";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function colSpanClass(span, cols) {
   if (span === void 0) return void 0;
   const clamped = Math.min(Math.max(Math.round(span), 1), cols);
@@ -6257,6 +6606,10 @@ function breakpointSpan(span, bp, cols) {
   const clamped = Math.min(Math.max(Math.round(span), 1), cols);
   return `${bp}:col-span-${clamped}`;
 }
+function gridColsClass(cols) {
+  const clamped = Math.min(Math.max(cols, 1), 12);
+  return `grid-cols-${clamped}`;
+}
 function ITGrid({
   children,
   container,
@@ -6273,12 +6626,11 @@ function ITGrid({
   as: Component = "div"
 }) {
   if (container) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       Component,
       {
-        className: clsx25("grid", className),
+        className: clsx26("grid", gridColsClass(columns), className),
         style: {
-          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
           gap: spacing > 0 ? `${spacing * 0.25}rem` : void 0,
           ...style
         },
@@ -6287,10 +6639,11 @@ function ITGrid({
     );
   }
   if (item) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       Component,
       {
-        className: clsx25(
+        className: clsx26(
+          "col-span-full",
           colSpanClass(xs ?? sm, columns),
           sm !== void 0 && breakpointSpan(sm, "sm", columns),
           md !== void 0 && breakpointSpan(md, "md", columns),
@@ -6303,34 +6656,34 @@ function ITGrid({
       }
     );
   }
-  return /* @__PURE__ */ jsx30(Component, { className, style, children });
+  return /* @__PURE__ */ jsx31(Component, { className, style, children });
 }
 
 // src/components/image/image.tsx
-import { useState as useState16 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { useState as useState19 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var ITImage = ({
   src,
   alt,
   className = "",
   fallback = ""
 }) => {
-  const [imageError, setImageError] = useState16(false);
+  const [imageError, setImageError] = useState19(false);
   const handleImageError = () => {
     setImageError(true);
   };
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       className: `${className} flex items-center justify-center bg-transparent`,
-      children: imageError ? /* @__PURE__ */ jsx31(
+      children: imageError ? /* @__PURE__ */ jsx32(
         "img",
         {
           src: fallback,
           alt: "Fallback",
           className: "w-full h-full object-cover"
         }
-      ) : /* @__PURE__ */ jsx31(
+      ) : /* @__PURE__ */ jsx32(
         "img",
         {
           src,
@@ -6345,9 +6698,9 @@ var ITImage = ({
 var image_default = ITImage;
 
 // src/components/navbar/navbar.tsx
-import { useRef as useRef9, useState as useState17 } from "react";
+import { useRef as useRef10, useState as useState20 } from "react";
 import { FaChevronDown, FaChevronRight as FaChevronRight4, FaUserCircle } from "react-icons/fa";
-import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
 function ITNavbar({
   logo,
   logoText,
@@ -6360,9 +6713,9 @@ function ITNavbar({
   showSidebarOnMobile = false,
   sidebarItems
 }) {
-  const [isUserMenuOpen, setIsUserMenuOpen] = useState17(false);
-  const [expandedItems, setExpandedItems] = useState17(/* @__PURE__ */ new Set());
-  const userMenuRef = useRef9(null);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState20(false);
+  const [expandedItems, setExpandedItems] = useState20(/* @__PURE__ */ new Set());
+  const userMenuRef = useRef10(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   const toggleUserMenu = () => {
     setIsUserMenuOpen(!isUserMenuOpen);
@@ -6385,42 +6738,42 @@ function ITNavbar({
   };
   const shouldUseLegacy = !navigationItems.length && (navItems || sidebarItems);
   if (shouldUseLegacy) {
-    return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col h-screen", children: [
-      /* @__PURE__ */ jsx32("nav", { className: "bg-white border-b border-gray-200", children: /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mx-auto p-4", children: [
-        /* @__PURE__ */ jsxs24("div", { className: "flex items-center space-x-3 rtl:space-x-reverse", children: [
-          logo && /* @__PURE__ */ jsx32("div", { className: "h-8", children: logo }),
-          logoText && /* @__PURE__ */ jsx32(ITText, { as: "span", className: "self-center text-2xl font-semibold whitespace-nowrap text-gray-900", children: logoText })
+    return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col h-screen", children: [
+      /* @__PURE__ */ jsx33("nav", { className: "bg-white border-b border-gray-200", children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mx-auto p-4", children: [
+        /* @__PURE__ */ jsxs25("div", { className: "flex items-center space-x-3 rtl:space-x-reverse", children: [
+          logo && /* @__PURE__ */ jsx33("div", { className: "h-8", children: logo }),
+          logoText && /* @__PURE__ */ jsx33(ITText, { as: "span", className: "self-center text-2xl font-semibold whitespace-nowrap text-gray-900", children: logoText })
         ] }),
-        /* @__PURE__ */ jsx32("div", { className: "flex items-center justify-end w-full md:w-auto md:order-2", children: /* @__PURE__ */ jsxs24("div", { className: "flex items-center space-x-4 md:order-2", children: [
-          /* @__PURE__ */ jsx32("ul", { className: "hidden md:flex space-x-4", children: navItems }),
-          userMenu && /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33("div", { className: "flex items-center justify-end w-full md:w-auto md:order-2", children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center space-x-4 md:order-2", children: [
+          /* @__PURE__ */ jsx33("ul", { className: "hidden md:flex space-x-4", children: navItems }),
+          userMenu && /* @__PURE__ */ jsxs25("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx33(
               "button",
               {
                 type: "button",
                 className: "flex text-sm bg-gray-200 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300",
                 onClick: toggleUserMenu,
-                children: userMenu.userImage ? /* @__PURE__ */ jsx32(
+                children: userMenu.userImage ? /* @__PURE__ */ jsx33(
                   "img",
                   {
                     className: "w-8 h-8 rounded-full",
                     src: userMenu.userImage,
                     alt: "user photo"
                   }
-                ) : /* @__PURE__ */ jsx32(FaUserCircle, { className: "w-8 h-8 text-gray-500" })
+                ) : /* @__PURE__ */ jsx33(FaUserCircle, { className: "w-8 h-8 text-gray-500" })
               }
             ),
-            isUserMenuOpen && /* @__PURE__ */ jsxs24(
+            isUserMenuOpen && /* @__PURE__ */ jsxs25(
               "div",
               {
                 ref: userMenuRef,
                 className: "z-50 absolute right-0 mt-2 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm",
                 children: [
-                  /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3", children: [
-                    /* @__PURE__ */ jsx32(ITText, { as: "span", className: "block text-sm text-gray-900", children: userMenu.userName }),
-                    /* @__PURE__ */ jsx32(ITText, { as: "span", className: "block text-sm text-gray-500 truncate", children: userMenu.userEmail })
+                  /* @__PURE__ */ jsxs25("div", { className: "px-4 py-3", children: [
+                    /* @__PURE__ */ jsx33(ITText, { as: "span", className: "block text-sm text-gray-900", children: userMenu.userName }),
+                    /* @__PURE__ */ jsx33(ITText, { as: "span", className: "block text-sm text-gray-500 truncate", children: userMenu.userEmail })
                   ] }),
-                  /* @__PURE__ */ jsx32("ul", { className: "py-2", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ jsx32("li", { children: /* @__PURE__ */ jsx32(
+                  /* @__PURE__ */ jsx33("ul", { className: "py-2", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ jsx33("li", { children: /* @__PURE__ */ jsx33(
                     "button",
                     {
                       onClick: () => {
@@ -6428,7 +6781,7 @@ function ITNavbar({
                         setIsUserMenuOpen(false);
                       },
                       className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left",
-                      children: /* @__PURE__ */ jsx32(ITText, { as: "span", children: item.label })
+                      children: /* @__PURE__ */ jsx33(ITText, { as: "span", children: item.label })
                     }
                   ) }, index)) })
                 ]
@@ -6437,191 +6790,233 @@ function ITNavbar({
           ] })
         ] }) })
       ] }) }),
-      /* @__PURE__ */ jsxs24("div", { className: "flex-1 flex overflow-hidden relative", children: [
-        (showSidebar || showSidebarOnMobile) && /* @__PURE__ */ jsx32("aside", { className: "fixed inset-y-0 left-0 w-64 bg-gray-50 transform transition-transform duration-300 ease-in-out z-50 shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200", children: /* @__PURE__ */ jsx32("div", { className: "h-full overflow-y-auto py-4 px-3", children: /* @__PURE__ */ jsx32("ul", { className: "space-y-2 font-medium", children: sidebarItems }) }) }),
-        /* @__PURE__ */ jsx32("main", { className: "flex-1 bg-gray-100 overflow-y-auto", children })
+      /* @__PURE__ */ jsxs25("div", { className: "flex-1 flex overflow-hidden relative", children: [
+        (showSidebar || showSidebarOnMobile) && /* @__PURE__ */ jsx33("aside", { className: "fixed inset-y-0 left-0 w-64 bg-gray-50 transform transition-transform duration-300 ease-in-out z-50 shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200", children: /* @__PURE__ */ jsx33("div", { className: "h-full overflow-y-auto py-4 px-3", children: /* @__PURE__ */ jsx33("ul", { className: "space-y-2 font-medium", children: sidebarItems }) }) }),
+        /* @__PURE__ */ jsx33("main", { className: "flex-1 bg-gray-100 overflow-y-auto", children })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs24("div", { className: "flex h-screen font-sans", style: { backgroundColor: "var(--layout-bg, #f8fafc)" }, children: [
-    /* @__PURE__ */ jsxs24("aside", { className: "w-72 shadow-xl flex flex-col transition-all duration-300 ease-in-out", style: { backgroundColor: "var(--sidebar-bg, #0f172a)", borderRight: "1px solid var(--sidebar-border, #1e293b)" }, children: [
-      /* @__PURE__ */ jsxs24("div", { className: "p-6 flex items-center gap-3", style: { borderBottom: "1px solid var(--sidebar-border, #1e293b)" }, children: [
-        logo && /* @__PURE__ */ jsx32("div", { className: "h-8 w-auto object-contain transition-transform hover:scale-105", children: logo }),
-        logoText && /* @__PURE__ */ jsx32(ITText, { as: "span", className: "text-lg font-bold tracking-wide", style: { color: "var(--sidebar-active-color, #ffffff)" }, children: logoText })
-      ] }),
-      /* @__PURE__ */ jsx32("nav", { className: "flex-1 px-4 py-6 overflow-y-auto custom-scrollbar", children: /* @__PURE__ */ jsx32("ul", { className: "flex flex-col gap-1.5", children: navigationItems.map((item) => /* @__PURE__ */ jsxs24("li", { children: [
-        /* @__PURE__ */ jsxs24(
-          "div",
-          {
-            className: `group flex items-center justify-between px-4 py-3 rounded-xl cursor-pointer transition-all duration-200 border-l-4 ${item.isActive ? "shadow-sm" : "hover:shadow-sm"}`,
-            onClick: () => handleItemClick(item),
-            style: {
-              backgroundColor: item.isActive ? "var(--sidebar-active-bg, rgba(255,255,255,0.1))" : "transparent",
-              borderColor: item.isActive ? "var(--sidebar-active-icon, #3b82f6)" : "transparent",
-              color: item.isActive ? "var(--sidebar-active-color, #ffffff)" : "var(--sidebar-label-color, #94a3b8)"
-            },
-            onMouseEnter: (e) => {
-              if (!item.isActive) {
-                e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, rgba(255,255,255,0.05))";
-                e.currentTarget.style.color = "var(--sidebar-active-color, #ffffff)";
-              }
-            },
-            onMouseLeave: (e) => {
-              if (!item.isActive) {
-                e.currentTarget.style.backgroundColor = "transparent";
-                e.currentTarget.style.color = "var(--sidebar-label-color, #94a3b8)";
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-3", children: [
-                item.icon && /* @__PURE__ */ jsx32("div", { className: "text-xl transition-colors", style: {
-                  color: item.isActive ? "var(--sidebar-active-icon, #3b82f6)" : "var(--sidebar-icon-color, #64748b)"
-                }, children: item.icon }),
-                /* @__PURE__ */ jsx32(ITText, { as: "span", className: `font-medium text-sm ${item.isActive ? "font-semibold" : ""}`, children: item.label })
-              ] }),
-              item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx32("div", { className: "transition-transform", style: { color: "var(--sidebar-icon-color, #64748b)" }, children: expandedItems.has(item.id) ? /* @__PURE__ */ jsx32(FaChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx32(FaChevronRight4, { className: "w-3 h-3" }) })
-            ]
-          }
-        ),
-        item.subitems && item.subitems.length > 0 && expandedItems.has(item.id) && /* @__PURE__ */ jsx32("ul", { className: "mt-1 ml-4 pl-4 space-y-1", style: { borderLeft: "1px solid var(--sidebar-border, #1e293b)" }, children: item.subitems.map((subitem) => /* @__PURE__ */ jsx32("li", { children: /* @__PURE__ */ jsx32(
-          "button",
-          {
-            onClick: subitem.action,
-            className: "block w-full text-left px-4 py-2.5 rounded-lg text-sm transition-all duration-200",
-            style: {
-              color: subitem.isActive ? "var(--sidebar-active-color, #ffffff)" : "var(--sidebar-label-color, #94a3b8)",
-              backgroundColor: subitem.isActive ? "var(--sidebar-active-bg, rgba(255,255,255,0.1))" : "transparent"
-            },
-            onMouseEnter: (e) => {
-              if (!subitem.isActive) {
-                e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, rgba(255,255,255,0.05))";
-              }
-            },
-            onMouseLeave: (e) => {
-              if (!subitem.isActive) {
-                e.currentTarget.style.backgroundColor = "transparent";
+  const sidebar = theme.sidebar;
+  const topbar = theme.topbar;
+  return /* @__PURE__ */ jsxs25("div", { className: "flex h-screen font-sans", style: { backgroundColor: theme.layout.backgroundColor }, children: [
+    /* @__PURE__ */ jsxs25(
+      "aside",
+      {
+        className: "w-72 shadow-xl flex flex-col transition-all duration-300 ease-in-out",
+        style: { backgroundColor: sidebar.backgroundColor, borderRight: `1px solid ${sidebar.borderColor}` },
+        children: [
+          /* @__PURE__ */ jsxs25("div", { className: "p-6 flex items-center gap-3", style: { borderBottom: `1px solid ${sidebar.borderColor}` }, children: [
+            logo && /* @__PURE__ */ jsx33("div", { className: "h-8 w-auto object-contain transition-transform hover:scale-105", children: logo }),
+            logoText && /* @__PURE__ */ jsx33(ITText, { as: "span", className: "text-lg font-bold tracking-wide", style: { color: sidebar.active.color }, children: logoText })
+          ] }),
+          /* @__PURE__ */ jsx33("nav", { className: "flex-1 px-4 py-6 overflow-y-auto custom-scrollbar", children: /* @__PURE__ */ jsx33("ul", { className: "flex flex-col gap-1.5", children: navigationItems.map((item) => /* @__PURE__ */ jsxs25("li", { children: [
+            /* @__PURE__ */ jsxs25(
+              "div",
+              {
+                className: `group flex items-center justify-between px-4 py-3 rounded-xl cursor-pointer transition-all duration-200 border-l-4 ${item.isActive ? "shadow-sm" : "hover:shadow-sm"}`,
+                onClick: () => handleItemClick(item),
+                style: {
+                  backgroundColor: item.isActive ? sidebar.active.backgroundColor : "transparent",
+                  borderColor: item.isActive ? sidebar.active.iconColor : "transparent",
+                  color: item.isActive ? sidebar.active.color : sidebar.label.color
+                },
+                onMouseEnter: (e) => {
+                  if (!item.isActive) {
+                    e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor;
+                    e.currentTarget.style.color = sidebar.active.color;
+                  }
+                },
+                onMouseLeave: (e) => {
+                  if (!item.isActive) {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                    e.currentTarget.style.color = sidebar.label.color;
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-3", children: [
+                    item.icon && /* @__PURE__ */ jsx33("div", { className: "text-xl transition-colors", style: {
+                      color: item.isActive ? sidebar.active.iconColor : sidebar.icon.color
+                    }, children: item.icon }),
+                    /* @__PURE__ */ jsx33(ITText, { as: "span", className: `font-medium text-sm ${item.isActive ? "font-semibold" : ""}`, children: item.label })
+                  ] }),
+                  item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx33("div", { className: "transition-transform", style: { color: sidebar.icon.color }, children: expandedItems.has(item.id) ? /* @__PURE__ */ jsx33(FaChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx33(FaChevronRight4, { className: "w-3 h-3" }) })
+                ]
               }
-            },
-            children: /* @__PURE__ */ jsx32(ITText, { as: "span", children: subitem.label })
-          }
-        ) }, subitem.id)) })
-      ] }, item.id)) }) }),
-      userMenu && /* @__PURE__ */ jsx32("div", { className: "p-4", style: { borderTop: "1px solid var(--sidebar-border, #1e293b)" }, children: /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs24(
-          "button",
-          {
-            type: "button",
-            className: "flex items-center gap-3 w-full p-3 rounded-xl transition-colors duration-200 group",
-            style: { color: "var(--sidebar-label-color, #94a3b8)" },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, rgba(255,255,255,0.05))";
-              e.currentTarget.style.color = "var(--sidebar-active-color, #ffffff)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = "var(--sidebar-label-color, #94a3b8)";
-            },
-            onClick: toggleUserMenu,
-            children: [
-              userMenu.userImage ? /* @__PURE__ */ jsx32(
-                "img",
-                {
-                  className: "w-10 h-10 rounded-full border-2 transition-colors",
-                  src: userMenu.userImage,
-                  alt: "user photo",
-                  style: { borderColor: "var(--sidebar-border, #1e293b)" }
-                }
-              ) : /* @__PURE__ */ jsx32("div", { className: "w-10 h-10 rounded-full flex items-center justify-center transition-colors", style: { backgroundColor: "var(--sidebar-hover-bg, rgba(255,255,255,0.1))", color: "var(--sidebar-icon-color, #64748b)" }, children: /* @__PURE__ */ jsx32(FaUserCircle, { className: "w-6 h-6" }) }),
-              /* @__PURE__ */ jsxs24("div", { className: "flex-1 text-left overflow-hidden", children: [
-                /* @__PURE__ */ jsx32(ITText, { as: "div", className: "font-medium text-sm truncate", style: { color: "var(--sidebar-active-color, #ffffff)" }, children: userMenu.userName }),
-                /* @__PURE__ */ jsx32(ITText, { as: "div", className: "text-xs truncate", style: { color: "var(--sidebar-label-color, #94a3b8)" }, children: userMenu.userEmail })
-              ] }),
-              /* @__PURE__ */ jsx32(FaChevronRight4, { className: "w-3 h-3", style: { color: "var(--sidebar-icon-color, #64748b)" } })
-            ]
-          }
-        ),
-        isUserMenuOpen && /* @__PURE__ */ jsxs24(
-          "div",
-          {
-            ref: userMenuRef,
-            className: "absolute bottom-full left-0 mb-3 w-full rounded-xl shadow-2xl overflow-hidden transform transition-all duration-200 origin-bottom",
-            style: { backgroundColor: "var(--topbar-user-dropdown-bg, #ffffff)", border: "1px solid var(--topbar-user-dropdown-border, #e2e8f0)" },
-            children: [
-              /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3", style: { backgroundColor: "var(--topbar-user-bg, #f8fafc)", borderBottom: "1px solid var(--topbar-user-dropdown-border, #e2e8f0)" }, children: [
-                /* @__PURE__ */ jsx32(ITText, { as: "span", className: "block text-sm font-semibold", style: { color: "var(--topbar-user-text, #0f172a)" }, children: userMenu.userName }),
-                /* @__PURE__ */ jsx32(ITText, { as: "span", className: "block text-xs truncate", style: { color: "var(--topbar-user-subtitle, #64748b)" }, children: userMenu.userEmail })
-              ] }),
-              /* @__PURE__ */ jsx32("ul", { className: "py-1", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ jsx32("li", { children: /* @__PURE__ */ jsx32(
-                "button",
-                {
-                  onClick: () => {
-                    item.onClick();
-                    setIsUserMenuOpen(false);
-                  },
-                  className: "flex items-center w-full px-4 py-2.5 text-sm transition-colors",
-                  style: { color: "var(--topbar-user-text, #334155)" },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = "var(--topbar-user-item-hover, #f8fafc)";
-                  },
-                  onMouseLeave: (e) => {
+            ),
+            item.subitems && item.subitems.length > 0 && expandedItems.has(item.id) && /* @__PURE__ */ jsx33("ul", { className: "mt-1 ml-4 pl-4 space-y-1", style: { borderLeft: `1px solid ${sidebar.borderColor}` }, children: item.subitems.map((subitem) => /* @__PURE__ */ jsx33("li", { children: /* @__PURE__ */ jsx33(
+              "button",
+              {
+                onClick: subitem.action,
+                className: "block w-full text-left px-4 py-2.5 rounded-lg text-sm transition-all duration-200",
+                style: {
+                  color: subitem.isActive ? sidebar.active.color : sidebar.label.color,
+                  backgroundColor: subitem.isActive ? sidebar.active.backgroundColor : "transparent"
+                },
+                onMouseEnter: (e) => {
+                  if (!subitem.isActive) {
+                    e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor;
+                  }
+                },
+                onMouseLeave: (e) => {
+                  if (!subitem.isActive) {
                     e.currentTarget.style.backgroundColor = "transparent";
-                  },
-                  children: /* @__PURE__ */ jsx32(ITText, { as: "span", children: item.label })
-                }
-              ) }, index)) })
-            ]
-          }
-        )
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx32("main", { className: "flex-1 overflow-y-auto relative", style: { backgroundColor: "var(--layout-bg, #f8fafc)" }, children })
+                  }
+                },
+                children: /* @__PURE__ */ jsx33(ITText, { as: "span", children: subitem.label })
+              }
+            ) }, subitem.id)) })
+          ] }, item.id)) }) }),
+          userMenu && /* @__PURE__ */ jsx33("div", { className: "p-4", style: { borderTop: `1px solid ${sidebar.borderColor}` }, children: /* @__PURE__ */ jsxs25("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs25(
+              "button",
+              {
+                type: "button",
+                className: "flex items-center gap-3 w-full p-3 rounded-xl transition-colors duration-200 group",
+                style: { color: sidebar.label.color },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.backgroundColor = sidebar.hover.backgroundColor;
+                  e.currentTarget.style.color = sidebar.active.color;
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                  e.currentTarget.style.color = sidebar.label.color;
+                },
+                onClick: toggleUserMenu,
+                children: [
+                  userMenu.userImage ? /* @__PURE__ */ jsx33(
+                    "img",
+                    {
+                      className: "w-10 h-10 rounded-full border-2 transition-colors",
+                      src: userMenu.userImage,
+                      alt: "user photo",
+                      style: { borderColor: sidebar.borderColor }
+                    }
+                  ) : /* @__PURE__ */ jsx33(
+                    "div",
+                    {
+                      className: "w-10 h-10 rounded-full flex items-center justify-center transition-colors",
+                      style: { backgroundColor: sidebar.hover.backgroundColor, color: sidebar.icon.color },
+                      children: /* @__PURE__ */ jsx33(FaUserCircle, { className: "w-6 h-6" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs25("div", { className: "flex-1 text-left overflow-hidden", children: [
+                    /* @__PURE__ */ jsx33(ITText, { as: "div", className: "font-medium text-sm truncate", style: { color: sidebar.active.color }, children: userMenu.userName }),
+                    /* @__PURE__ */ jsx33(ITText, { as: "div", className: "text-xs truncate", style: { color: sidebar.label.color }, children: userMenu.userEmail })
+                  ] }),
+                  /* @__PURE__ */ jsx33(FaChevronRight4, { className: "w-3 h-3", style: { color: sidebar.icon.color } })
+                ]
+              }
+            ),
+            isUserMenuOpen && /* @__PURE__ */ jsxs25(
+              "div",
+              {
+                ref: userMenuRef,
+                className: "absolute bottom-full left-0 mb-3 w-full rounded-xl shadow-2xl overflow-hidden transform transition-all duration-200 origin-bottom",
+                style: { backgroundColor: topbar.userMenu.dropdown.backgroundColor, border: `1px solid ${topbar.userMenu.dropdown.borderColor}` },
+                children: [
+                  /* @__PURE__ */ jsxs25("div", { className: "px-4 py-3", style: { backgroundColor: topbar.userMenu.backgroundColor, borderBottom: `1px solid ${topbar.userMenu.dropdown.borderColor}` }, children: [
+                    /* @__PURE__ */ jsx33(ITText, { as: "span", className: "block text-sm font-semibold", style: { color: topbar.userMenu.textColor }, children: userMenu.userName }),
+                    /* @__PURE__ */ jsx33(ITText, { as: "span", className: "block text-xs truncate", style: { color: topbar.userMenu.subtitleColor }, children: userMenu.userEmail })
+                  ] }),
+                  /* @__PURE__ */ jsx33("ul", { className: "py-1", children: userMenu.menuItems.map((item, index) => /* @__PURE__ */ jsx33("li", { children: /* @__PURE__ */ jsx33(
+                    "button",
+                    {
+                      onClick: () => {
+                        item.onClick();
+                        setIsUserMenuOpen(false);
+                      },
+                      className: "flex items-center w-full px-4 py-2.5 text-sm transition-colors",
+                      style: { color: topbar.userMenu.textColor },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = topbar.userMenu.dropdown.itemHoverBackground;
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      },
+                      children: /* @__PURE__ */ jsx33(ITText, { as: "span", children: item.label })
+                    }
+                  ) }, index)) })
+                ]
+              }
+            )
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx33("main", { className: "flex-1 overflow-y-auto relative", style: { backgroundColor: theme.layout.backgroundColor }, children })
   ] });
 }
 
 // src/components/page/page.tsx
-import clsx28 from "clsx";
+import clsx29 from "clsx";
 
 // src/components/page-header/page-header.tsx
 import { FaChevronLeft as FaChevronLeft3 } from "react-icons/fa";
-import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 function ITPageHeader({
   title,
   description,
   breadcrumbs,
   actions,
   backAction,
+  icon,
+  iconColor,
   className
 }) {
   const showTopRow = breadcrumbs?.length || backAction;
-  return /* @__PURE__ */ jsxs25("div", { className, children: [
-    showTopRow && /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
-      /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 min-w-0", children: [
-        backAction && /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs26("div", { className: `${className} space-y-3`, children: [
+    showTopRow && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2 min-w-0", children: [
+        backAction && /* @__PURE__ */ jsx34(
           "button",
           {
             onClick: backAction,
-            className: "p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:text-slate-500 dark:hover:text-slate-200 dark:hover:bg-slate-800 transition-colors flex-shrink-0",
+            className: "flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0",
             "aria-label": "Volver",
-            children: /* @__PURE__ */ jsx33(FaChevronLeft3, { size: 14 })
+            children: /* @__PURE__ */ jsx34(FaChevronLeft3, { size: 14 })
           }
         ),
-        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx33(ITBreadcrumbs, { items: breadcrumbs })
+        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx34(ITBreadcrumbs, { items: breadcrumbs })
       ] }),
-      actions && /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-2 flex-shrink-0", children: actions })
+      actions && /* @__PURE__ */ jsx34("div", { className: "flex items-center gap-3 flex-shrink-0", children: actions })
     ] }),
-    /* @__PURE__ */ jsxs25("div", { className: "flex items-start justify-between gap-4", children: [
-      /* @__PURE__ */ jsxs25("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx33(ITText, { as: "h1", className: "text-2xl font-extrabold text-slate-800 dark:text-white tracking-tight", children: title }),
-        description && /* @__PURE__ */ jsx33(ITText, { as: "p", className: "text-sm text-slate-500 dark:text-slate-400 mt-0.5", children: description })
+    /* @__PURE__ */ jsxs26("div", { className: "flex items-start justify-between gap-6", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "flex items-start gap-4 min-w-0", children: [
+        icon && /* @__PURE__ */ jsx34(
+          "div",
+          {
+            className: "flex items-center justify-center w-12 h-12 rounded-full border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-300 flex-shrink-0 transition-all duration-200 hover:border-slate-300 dark:hover:border-slate-500 hover:shadow-sm",
+            style: iconColor ? { color: iconColor } : void 0,
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs26("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx34(
+            ITText,
+            {
+              as: "h1",
+              className: "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx34(
+            ITText,
+            {
+              as: "p",
+              className: "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed",
+              children: description
+            }
+          )
+        ] })
       ] }),
-      !showTopRow && actions && /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-2 flex-shrink-0", children: actions })
+      !showTopRow && actions && /* @__PURE__ */ jsx34("div", { className: "flex items-center gap-3 flex-shrink-0", children: actions })
     ] })
   ] });
 }
 
 // src/components/skeleton/skeleton.tsx
-import clsx26 from "clsx";
-import { Fragment as Fragment6, jsx as jsx34 } from "react/jsx-runtime";
+import clsx27 from "clsx";
+import { Fragment as Fragment6, jsx as jsx35 } from "react/jsx-runtime";
 var variantClasses = {
   text: "rounded-md h-4 w-full",
   circular: "rounded-full",
@@ -6641,10 +7036,10 @@ function ITSkeleton({
     ...style
   };
   const items = Array.from({ length: count }, (_, i) => i);
-  return /* @__PURE__ */ jsx34(Fragment6, { children: items.map((i) => /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(Fragment6, { children: items.map((i) => /* @__PURE__ */ jsx35(
     "div",
     {
-      className: clsx26(
+      className: clsx27(
         "animate-pulse bg-slate-200 dark:bg-slate-700",
         variantClasses[variant],
         variant === "text" && count > 1 && i < count - 1 && "mb-2",
@@ -6660,9 +7055,9 @@ function ITSkeleton({
 }
 
 // src/components/stack/stack.tsx
-import clsx27 from "clsx";
+import clsx28 from "clsx";
 import { Children, cloneElement, isValidElement, Fragment as Fragment7 } from "react";
-import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 var directionMap2 = {
   row: "flex-row",
   column: "flex-col",
@@ -6707,10 +7102,10 @@ function ITStack({
     gap: spacing > 0 ? `${spacing * 0.25}rem` : void 0,
     ...style
   };
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     Component,
     {
-      className: clsx27(
+      className: clsx28(
         "flex",
         directionMap2[direction],
         alignItems && alignMap2[alignItems],
@@ -6719,7 +7114,7 @@ function ITStack({
         className
       ),
       style: resolvedStyle,
-      children: hasDivider ? items.map((child, index) => /* @__PURE__ */ jsxs26(Fragment7, { children: [
+      children: hasDivider ? items.map((child, index) => /* @__PURE__ */ jsxs27(Fragment7, { children: [
         child,
         index < items.length - 1 && isValidElement(divider) ? cloneElement(divider, { key: `divider-${index}` }) : null
       ] }, index)) : children
@@ -6728,18 +7123,20 @@ function ITStack({
 }
 
 // src/components/page/page.tsx
-import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
-var hasHeader = (props) => !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction);
+import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+var hasHeader = (props) => !!(props.title || props.description || props.breadcrumbs || props.actions || props.backAction || props.icon);
 var renderHeader = (props) => {
   if (!hasHeader(props)) return null;
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     ITPageHeader,
     {
       title: props.title || "",
       description: props.description,
       breadcrumbs: props.breadcrumbs,
       actions: props.actions,
-      backAction: props.backAction
+      backAction: props.backAction,
+      icon: props.icon,
+      iconColor: props.iconColor
     }
   );
 };
@@ -6755,28 +7152,36 @@ function ITPage(props) {
     emptyDescription,
     emptyAction,
     className,
-    children
+    children,
+    maxWidth = "7xl",
+    noPadding = false
   } = props;
-  const wrapperClass = clsx28("space-y-6", className);
+  const wrapperClass = clsx29(
+    "mx-auto w-full",
+    !noPadding && "px-4 sm:px-6 lg:px-8 py-6",
+    `max-w-${maxWidth}`,
+    "space-y-8",
+    className
+  );
   if (loading) {
-    return /* @__PURE__ */ jsxs27("div", { className: wrapperClass, children: [
+    return /* @__PURE__ */ jsxs28("div", { className: wrapperClass, children: [
       renderHeader(props),
-      /* @__PURE__ */ jsxs27(ITStack, { spacing: 4, children: [
-        /* @__PURE__ */ jsx36(ITSkeleton, { variant: "rectangular", height: 40, width: "40%" }),
-        /* @__PURE__ */ jsx36(ITSkeleton, { variant: "rectangular", height: 200 }),
-        /* @__PURE__ */ jsx36(ITSkeleton, { variant: "rectangular", height: 200 })
+      /* @__PURE__ */ jsxs28(ITStack, { spacing: 6, children: [
+        /* @__PURE__ */ jsx37(ITSkeleton, { variant: "rectangular", height: 40, width: "40%", className: "rounded-lg" }),
+        /* @__PURE__ */ jsx37(ITSkeleton, { variant: "rectangular", height: 200, className: "rounded-lg" }),
+        /* @__PURE__ */ jsx37(ITSkeleton, { variant: "rectangular", height: 200, className: "rounded-lg" })
       ] })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ jsxs27("div", { className: wrapperClass, children: [
+    return /* @__PURE__ */ jsxs28("div", { className: wrapperClass, children: [
       renderHeader(props),
-      /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37(
         ITEmptyState,
         {
           title: errorTitle || "Error",
           description: error,
-          action: onRetry ? /* @__PURE__ */ jsx36(
+          action: onRetry ? /* @__PURE__ */ jsx37(
             ITButton,
             {
               label: errorActionLabel || "Reintentar",
@@ -6789,9 +7194,9 @@ function ITPage(props) {
     ] });
   }
   if (empty) {
-    return /* @__PURE__ */ jsxs27("div", { className: wrapperClass, children: [
+    return /* @__PURE__ */ jsxs28("div", { className: wrapperClass, children: [
       renderHeader(props),
-      /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37(
         ITEmptyState,
         {
           title: emptyTitle || "Sin datos",
@@ -6801,16 +7206,16 @@ function ITPage(props) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs27("div", { className: wrapperClass, children: [
+  return /* @__PURE__ */ jsxs28("div", { className: wrapperClass, children: [
     renderHeader(props),
     children
   ] });
 }
 
 // src/components/popover/popover.tsx
-import { useState as useState18, useRef as useRef10 } from "react";
-import clsx29 from "clsx";
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useState as useState21, useRef as useRef11 } from "react";
+import clsx30 from "clsx";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
 var positionClasses = {
   top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
   bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
@@ -6825,23 +7230,23 @@ function ITPopover({
   onClose,
   className
 }) {
-  const [internalOpen, setInternalOpen] = useState18(false);
+  const [internalOpen, setInternalOpen] = useState21(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const ref = useRef10(null);
+  const ref = useRef11(null);
   useClickOutside_default(ref, () => {
     if (isControlled) onClose?.();
     else setInternalOpen(false);
   });
-  return /* @__PURE__ */ jsxs28("div", { ref, className: clsx29("relative inline-flex", className), children: [
-    /* @__PURE__ */ jsx37("div", { onClick: () => isControlled ? onClose?.() : setInternalOpen((p) => !p), className: "cursor-pointer", children: trigger }),
-    open && /* @__PURE__ */ jsx37("div", { className: clsx29("absolute z-[200]", positionClasses[position]), children: /* @__PURE__ */ jsx37("div", { className: "bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 p-3 min-w-[160px]", children }) })
+  return /* @__PURE__ */ jsxs29("div", { ref, className: clsx30("relative inline-flex", className), children: [
+    /* @__PURE__ */ jsx38("div", { onClick: () => isControlled ? onClose?.() : setInternalOpen((p) => !p), className: "cursor-pointer", children: trigger }),
+    open && /* @__PURE__ */ jsx38("div", { className: clsx30("absolute z-[200]", positionClasses[position]), children: /* @__PURE__ */ jsx38("div", { className: "bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 p-3 min-w-[160px]", children }) })
   ] });
 }
 
 // src/components/progress/progress.tsx
-import clsx30 from "clsx";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import clsx31 from "clsx";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var colorMap = {
   primary: "bg-primary-500",
   secondary: "bg-secondary-500",
@@ -6868,18 +7273,18 @@ function ITProgress({
   style
 }) {
   const pct = Math.min(Math.max(value / max * 100, 0), 100);
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
-      className: clsx30("w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden", sizeMap3[size], className),
+      className: clsx31("w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden", sizeMap3[size], className),
       style,
       role: "progressbar",
       "aria-valuenow": variant === "determinate" ? value : void 0,
       "aria-valuemax": max,
-      children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx39(
         "div",
         {
-          className: clsx30(
+          className: clsx31(
             "h-full rounded-full transition-all duration-500",
             colorMap[color],
             variant === "indeterminate" && "animate-pulse w-1/2"
@@ -6892,8 +7297,8 @@ function ITProgress({
 }
 
 // src/components/radio/radio.tsx
-import clsx31 from "clsx";
-import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import clsx32 from "clsx";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 function ITRadioGroup({
   name,
   value,
@@ -6903,25 +7308,25 @@ function ITRadioGroup({
   direction = "column",
   className
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
-      className: clsx31(
+      className: clsx32(
         "flex gap-3",
         direction === "row" ? "flex-row flex-wrap" : "flex-col",
         className
       ),
       children: options.map((opt) => {
         const isSelected = opt.value === value;
-        return /* @__PURE__ */ jsxs29(
+        return /* @__PURE__ */ jsxs30(
           "label",
           {
-            className: clsx31(
+            className: clsx32(
               "inline-flex items-center gap-2 cursor-pointer select-none",
               disabled && "opacity-50 cursor-not-allowed"
             ),
             children: [
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 "input",
                 {
                   type: "radio",
@@ -6933,18 +7338,18 @@ function ITRadioGroup({
                   className: "peer sr-only"
                 }
               ),
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 "div",
                 {
-                  className: clsx31(
+                  className: clsx32(
                     "w-4 h-4 rounded-full border-2 flex items-center justify-center transition-all",
                     isSelected ? "border-primary-500" : "border-slate-300 dark:border-slate-600",
                     !disabled && "peer-focus:ring-2 peer-focus:ring-primary-200"
                   ),
-                  children: isSelected && /* @__PURE__ */ jsx39("div", { className: "w-2 h-2 rounded-full bg-primary-500" })
+                  children: isSelected && /* @__PURE__ */ jsx40("div", { className: "w-2 h-2 rounded-full bg-primary-500" })
                 }
               ),
-              /* @__PURE__ */ jsx39(ITText, { as: "span", className: "text-sm text-slate-700 dark:text-slate-300", children: opt.label })
+              /* @__PURE__ */ jsx40(ITText, { as: "span", className: "text-sm text-slate-700 dark:text-slate-300", children: opt.label })
             ]
           },
           opt.value
@@ -6954,186 +7359,9 @@ function ITRadioGroup({
   );
 }
 
-// src/components/search-select/search-select.tsx
-import { useState as useState19, useEffect as useEffect13, useRef as useRef11, useMemo as useMemo6 } from "react";
-import clsx32 from "clsx";
-import { FaSearch } from "react-icons/fa";
-import { jsx as jsx40, jsxs as jsxs30 } 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"
-}) {
-  const [isOpen, setIsOpen] = useState19(false);
-  const [searchTerm, setSearchTerm] = useState19("");
-  const [isFocused, setIsFocused] = useState19(false);
-  const [localTouched, setLocalTouched] = useState19(false);
-  const containerRef = useRef11(null);
-  const timeoutRef = useRef11(null);
-  const selectedOption = useMemo6(() => {
-    return options.find((opt) => opt[valueField] === value);
-  }, [options, value, valueField]);
-  useEffect13(() => {
-    if (!isFocused) {
-      setSearchTerm(selectedOption ? String(selectedOption[labelField]) : "");
-    }
-  }, [selectedOption, isFocused, labelField]);
-  useEffect13(() => {
-    function handleClickOutside(event) {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const filteredOptions = useMemo6(() => {
-    if (onSearch) return options;
-    if (!searchTerm || !isFocused) return options;
-    return options.filter(
-      (opt) => String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
-    );
-  }, [options, searchTerm, 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 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 getInputStyle = () => {
-    const style = {
-      backgroundColor: inputTheme.backgroundColor || "#ffffff",
-      borderColor: inputTheme.borderColor || "#e2e8f0",
-      borderRadius: inputTheme.borderRadius || "0.5rem",
-      padding: inputTheme.padding || "0.5rem 0.75rem",
-      fontSize: inputTheme.fontSize || "0.875rem",
-      borderWidth: "1px",
-      borderStyle: "solid",
-      transition: "all 0.2s",
-      color: "var(--input-text-color, var(--color-secondary-900))",
-      width: "100%"
-    };
-    if (disabled) {
-      style.backgroundColor = inputTheme.disabled?.backgroundColor || "#f1f5f9";
-      style.borderColor = inputTheme.disabled?.borderColor || "#e2e8f0";
-      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__ */ jsxs30("div", { className: clsx32("w-full flex flex-col gap-1.5", className, isOpen && "relative z-30"), ref: containerRef, children: [
-    label && /* @__PURE__ */ jsxs30(
-      ITText,
-      {
-        as: "label",
-        className: clsx32("text-sm font-medium text-gray-700 dark:text-slate-300", {
-          "text-red-500": hasError
-        }),
-        children: [
-          /* @__PURE__ */ jsx40(ITText, { as: "span", children: label }),
-          required && /* @__PURE__ */ jsx40(ITText, { as: "span", className: "text-red-500 ml-1", children: "*" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs30("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs30("div", { className: "relative flex items-center", children: [
-        /* @__PURE__ */ jsx40(
-          "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__ */ jsxs30("div", { className: "absolute right-3 flex items-center gap-2 text-gray-400 pointer-events-none", children: [
-          isLoading && /* @__PURE__ */ jsx40("div", { className: "animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" }),
-          !isLoading && /* @__PURE__ */ jsx40(FaSearch, { size: 14, className: clsx32({ "text-primary-500": isFocused }) })
-        ] })
-      ] }),
-      isOpen && /* @__PURE__ */ jsx40("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top", children: /* @__PURE__ */ jsx40("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx40(
-        ITText,
-        {
-          as: "div",
-          onClick: () => handleSelect(option),
-          className: clsx32(
-            "px-4 py-2 text-sm cursor-pointer transition-colors",
-            value === option[valueField] ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium" : "hover:bg-gray-50 dark:hover:bg-slate-800 text-gray-700 dark:text-slate-300"
-          ),
-          children: /* @__PURE__ */ jsx40(ITText, { as: "span", children: option[labelField] })
-        },
-        option[valueField]
-      )) : /* @__PURE__ */ jsx40(ITText, { as: "div", className: "px-4 py-6 text-sm text-center text-gray-500 italic", children: isLoading ? "Cargando..." : noResultsMessage }) }) })
-    ] }),
-    hasError && /* @__PURE__ */ jsx40(ITText, { as: "p", className: "text-red-500 text-xs mt-1", children: errorMessage })
-  ] });
-}
-
 // src/components/searchTable/searchTable.tsx
 import clsx34 from "clsx";
-import { useState as useState20 } from "react";
+import { useState as useState22 } from "react";
 
 // src/components/searchTable/components/SearchInput.tsx
 import { FaSearch as FaSearch2 } from "react-icons/fa";
@@ -7639,7 +7867,7 @@ function ITSearchTable({
   onSave,
   onCancel
 }) {
-  const [itemsPerPage, setItemsPerPage] = useState20(defaultItemsPerPage);
+  const [itemsPerPage, setItemsPerPage] = useState22(defaultItemsPerPage);
   const { searchTerm, handleSearchChange, handleClearSearch } = useDebouncedSearch({
     initialValue: searchTermInitial,
     onSearch: (value) => {
@@ -7752,7 +7980,7 @@ function ITSearchTable({
 }
 
 // src/components/sidebar/sidebar.tsx
-import { useEffect as useEffect14, useRef as useRef12, useState as useState21 } from "react";
+import { useEffect as useEffect14, useRef as useRef12, useState as useState23 } from "react";
 import { FaChevronDown as FaChevronDown2 } from "react-icons/fa";
 import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 function ITSidebar({
@@ -7765,8 +7993,8 @@ function ITSidebar({
   onSubItemClick,
   subitemConnector = "dot"
 }) {
-  const [expandedItems, setExpandedItems] = useState21(/* @__PURE__ */ new Set());
-  const [isHovering, setIsHovering] = useState21(false);
+  const [expandedItems, setExpandedItems] = useState23(/* @__PURE__ */ new Set());
+  const [isHovering, setIsHovering] = useState23(false);
   const sidebarRef = useRef12(null);
   const hoverTimeoutRef = useRef12(null);
   const leaveTimeoutRef = useRef12(null);
@@ -8040,7 +8268,7 @@ function ITSidebar({
 }
 
 // src/components/slide/slide.tsx
-import { useState as useState22, useEffect as useEffect15 } from "react";
+import { useState as useState24, useEffect as useEffect15 } from "react";
 import clsx35 from "clsx";
 import { jsx as jsx52 } from "react/jsx-runtime";
 function ITSlideToggle({
@@ -8055,7 +8283,7 @@ function ITSlideToggle({
   className = ""
 }) {
   const isControlled = controlledIsOn !== void 0;
-  const [internalIsOn, setInternalIsOn] = useState22(initialState);
+  const [internalIsOn, setInternalIsOn] = useState24(initialState);
   useEffect15(() => {
     if (isControlled) {
       setInternalIsOn(controlledIsOn);
@@ -8320,7 +8548,7 @@ var positionStyles = {
 
 // src/components/toast/toast.tsx
 import clsx40 from "clsx";
-import { useEffect as useEffect16, useState as useState23 } from "react";
+import { useEffect as useEffect16, useState as useState25 } from "react";
 import { FaTimesCircle as FaTimesCircle2, FaCheckCircle as FaCheckCircle2, FaExclamationTriangle as FaExclamationTriangle3, FaInfoCircle as FaInfoCircle2, FaTimes as FaTimes8 } from "react-icons/fa";
 import { jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
 function ITToast({
@@ -8330,7 +8558,7 @@ function ITToast({
   position = "top-right",
   onClose
 }) {
-  const [isVisible, setIsVisible] = useState23(true);
+  const [isVisible, setIsVisible] = useState25(true);
   useEffect16(() => {
     const timer = setTimeout(() => {
       setIsVisible(false);
@@ -8397,10 +8625,11 @@ function ITToast({
 }
 
 // src/components/dropfile/dropfile.tsx
-import { useState as useState24, useEffect as useEffect17, useRef as useRef13 } from "react";
+import { useState as useState26, useEffect as useEffect17, useRef as useRef13 } from "react";
 import { useDropzone } from "react-dropzone";
 import clsx41 from "clsx";
-import { Fragment as Fragment8, jsx as jsx58, jsxs as jsxs44 } from "react/jsx-runtime";
+
+// src/components/dropfile/dropfile.props.ts
 var FileTypeEnum = /* @__PURE__ */ ((FileTypeEnum2) => {
   FileTypeEnum2["PDF"] = "application/pdf";
   FileTypeEnum2["XLS"] = "application/vnd.ms-excel";
@@ -8418,6 +8647,9 @@ var UploadStatus = /* @__PURE__ */ ((UploadStatus2) => {
   UploadStatus2["ERROR"] = "error";
   return UploadStatus2;
 })(UploadStatus || {});
+
+// src/components/dropfile/dropfile.tsx
+import { Fragment as Fragment8, jsx as jsx58, jsxs as jsxs44 } from "react/jsx-runtime";
 var ITDropfile = ({
   onFileSelect,
   onCancel,
@@ -8430,11 +8662,11 @@ var ITDropfile = ({
   onStatusChange,
   initialPreviewUrl
 }) => {
-  const [selectedFile, setSelectedFile] = useState24(null);
-  const [fileType, setFileType] = useState24(null);
-  const [imagePreview, setImagePreview] = useState24(initialPreviewUrl || null);
-  const [isConfirmed, setIsConfirmed] = useState24(false);
-  const [internalUploadStatus, setInternalUploadStatus] = useState24(
+  const [selectedFile, setSelectedFile] = useState26(null);
+  const [fileType, setFileType] = useState26(null);
+  const [imagePreview, setImagePreview] = useState26(initialPreviewUrl || null);
+  const [isConfirmed, setIsConfirmed] = useState26(false);
+  const [internalUploadStatus, setInternalUploadStatus] = useState26(
     initialPreviewUrl ? "subido" /* UPLOADED */ : "pendiente" /* PENDING */
   );
   const canvasRef = useRef13(null);
@@ -8709,12 +8941,12 @@ var ITDropfile = ({
 var dropfile_default = ITDropfile;
 
 // src/components/layout/layout.tsx
-import { useState as useState26 } from "react";
+import { useState as useState28 } from "react";
 import clsx42 from "clsx";
 
 // src/components/topbar/topbar.tsx
 import { FaUserCircle as FaUserCircle2, FaBars } from "react-icons/fa";
-import { useRef as useRef14, useState as useState25 } from "react";
+import { useRef as useRef14, useState as useState27 } from "react";
 import { jsx as jsx59, jsxs as jsxs45 } from "react/jsx-runtime";
 function ITTopBar({
   logo,
@@ -8725,7 +8957,7 @@ function ITTopBar({
   navItems,
   onNavItemClick
 }) {
-  const [isUserMenuOpen, setIsUserMenuOpen] = useState25(false);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState27(false);
   const userMenuRef = useRef14(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   return /* @__PURE__ */ jsx59(
@@ -8896,8 +9128,13 @@ function ITLayout({
   className = "",
   contentClassName = ""
 }) {
-  const [desktopCollapsed, setDesktopCollapsed] = useState26(true);
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState26(false);
+  const [internalCollapsed, setInternalCollapsed] = useState28(true);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState28(false);
+  const isControlled = sidebar.isCollapsed !== void 0;
+  const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;
+  const handleToggleCollapse = isControlled ? sidebar.onToggleCollapse ?? (() => {
+  }) : () => setInternalCollapsed((v) => !v);
+  const layoutTokens = theme.layout;
   return /* @__PURE__ */ jsxs46("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
     /* @__PURE__ */ jsx60(
       ITTopBar,
@@ -8907,48 +9144,55 @@ function ITLayout({
         onToggleMobileMenu: () => setMobileSidebarOpen((v) => !v)
       }
     ),
-    /* @__PURE__ */ jsxs46("div", { className: "flex flex-1 overflow-hidden relative", style: { backgroundColor: "var(--layout-bg, #f8fafc)" }, children: [
-      /* @__PURE__ */ jsxs46("div", { className: "hidden lg:block relative z-40 h-full", children: [
-        /* @__PURE__ */ jsx60("div", { className: "w-[88px] h-full flex-shrink-0" }),
-        /* @__PURE__ */ jsx60("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ jsx60(
-          ITSidebar,
-          {
-            ...sidebar,
-            isCollapsed: desktopCollapsed,
-            onToggleCollapse: () => setDesktopCollapsed((v) => !v),
-            visibleOnMobile: false,
-            className: `h-full drop-shadow-2xl transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] flex-shrink-0`
-          }
-        ) })
-      ] }),
-      mobileSidebarOpen && /* @__PURE__ */ jsx60(
-        "div",
-        {
-          className: "lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40",
-          onClick: () => setMobileSidebarOpen(false),
-          children: /* @__PURE__ */ jsx60(
+    /* @__PURE__ */ jsxs46(
+      "div",
+      {
+        className: "flex flex-1 overflow-hidden relative",
+        style: { backgroundColor: layoutTokens.backgroundColor },
+        children: [
+          /* @__PURE__ */ jsxs46("div", { className: "hidden lg:block relative z-40 h-full", children: [
+            /* @__PURE__ */ jsx60("div", { className: "w-[88px] h-full flex-shrink-0" }),
+            /* @__PURE__ */ jsx60("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ jsx60(
+              ITSidebar,
+              {
+                ...sidebar,
+                isCollapsed: desktopCollapsed,
+                onToggleCollapse: handleToggleCollapse,
+                visibleOnMobile: false,
+                className: "h-full drop-shadow-2xl transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] flex-shrink-0"
+              }
+            ) })
+          ] }),
+          mobileSidebarOpen && /* @__PURE__ */ jsx60(
             "div",
             {
-              className: "h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
-              onClick: (e) => e.stopPropagation(),
+              className: "lg:hidden fixed inset-0 z-50 transition-opacity duration-300 backdrop-blur-sm bg-black/40",
+              onClick: () => setMobileSidebarOpen(false),
               children: /* @__PURE__ */ jsx60(
-                ITSidebar,
+                "div",
                 {
-                  ...sidebar,
-                  isCollapsed: false,
-                  visibleOnMobile: true,
-                  className: "h-full shadow-2xl relative z-[60]",
-                  onToggleCollapse: () => setMobileSidebarOpen(false),
-                  onItemClick: () => setMobileSidebarOpen(false),
-                  onSubItemClick: () => setMobileSidebarOpen(false)
+                  className: "h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]",
+                  onClick: (e) => e.stopPropagation(),
+                  children: /* @__PURE__ */ jsx60(
+                    ITSidebar,
+                    {
+                      ...sidebar,
+                      isCollapsed: false,
+                      visibleOnMobile: true,
+                      className: "h-full shadow-2xl relative z-[60]",
+                      onToggleCollapse: () => setMobileSidebarOpen(false),
+                      onItemClick: () => setMobileSidebarOpen(false),
+                      onSubItemClick: () => setMobileSidebarOpen(false)
+                    }
+                  )
                 }
               )
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx60("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ jsx60("div", { className: clsx42("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) })
-    ] })
+          ),
+          /* @__PURE__ */ jsx60("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ jsx60("div", { className: clsx42("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) })
+        ]
+      }
+    )
   ] });
 }
 
@@ -9039,7 +9283,7 @@ function ITLoader({
 
 // src/components/stepper/stepper.tsx
 import clsx43 from "clsx";
-import { useEffect as useEffect18, useRef as useRef15, useState as useState27 } from "react";
+import { useEffect as useEffect18, useRef as useRef15, useState as useState29 } from "react";
 import { FaChevronLeft as FaChevronLeft4, FaChevronRight as FaChevronRight5, FaCheck as FaCheck4 } from "react-icons/fa";
 import { jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
 function ITStepper({
@@ -9056,7 +9300,7 @@ function ITStepper({
   maxContentHeight = "400px",
   color = "primary"
 }) {
-  const [direction, setDirection] = useState27("next");
+  const [direction, setDirection] = useState29("next");
   const contentRef = useRef15(null);
   const progressRef = useRef15(null);
   const isThemeColor = color in theme.colors;