@axzydev/axzy_ui_system 1.2.4 → 1.2.7

package/dist/index.d.ts

@@ -810,6 +810,8 @@ interface ITPageProps {
     breadcrumbs?: ITBreadcrumbItem[];
     actions?: ReactNode;
     backAction?: () => void;
+    icon?: ReactNode;
+    iconColor?: string;
     loading?: boolean;
     error?: string | null;
     errorTitle?: string;
@@ -821,6 +823,8 @@ interface ITPageProps {
     emptyAction?: ReactNode;
     className?: string;
     children: ReactNode;
+    maxWidth?: "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+    noPadding?: boolean;
 }
 
 declare function ITPage(props: ITPageProps): react_jsx_runtime.JSX.Element;
@@ -831,10 +835,12 @@ interface ITPageHeaderProps {
     breadcrumbs?: ITBreadcrumbItem[];
     actions?: ReactNode;
     backAction?: () => void;
+    icon?: ReactNode;
+    iconColor?: string;
     className?: string;
 }
 
-declare function ITPageHeader({ title, description, breadcrumbs, actions, backAction, className, }: ITPageHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ITPageHeader({ title, description, breadcrumbs, actions, backAction, icon, iconColor, className, }: ITPageHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface ITPaginationProps {
     /**

package/dist/index.js

@@ -2811,7 +2811,7 @@ function ITTable({
         return value;
     }
   };
-  return /* @__PURE__ */ jsx14("div", { className: clsx14("space-y-4 w-full", containerClassName), children: /* @__PURE__ */ jsxs12("div", { className: "rounded-xl shadow-sm border border-secondary-200 overflow-hidden", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, children: [
+  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(
       "table",
@@ -3048,7 +3048,7 @@ function ITDataTable({
     }
   };
   return /* @__PURE__ */ jsxs13("div", { className: clsx15("space-y-4 w-full relative", containerClassName), children: [
-    /* @__PURE__ */ jsxs13("div", { className: "rounded-xl shadow-sm border border-secondary-200 overflow-hidden", style: { backgroundColor: "var(--color-table-rowBg, #ffffff)" }, 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: [
         /* @__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" }) })
@@ -3069,7 +3069,7 @@ function ITDataTable({
               className
             ),
             children: [
-              /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("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__ */ 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-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__ */ 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 }),
                   col.sortable && col.type !== "actions" && /* @__PURE__ */ jsx15(
@@ -6257,6 +6257,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,
@@ -6276,9 +6280,8 @@ function ITGrid({
     return /* @__PURE__ */ jsx30(
       Component,
       {
-        className: clsx25("grid", className),
+        className: clsx25("grid", gridColsClass(columns), className),
         style: {
-          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
           gap: spacing > 0 ? `${spacing * 0.25}rem` : void 0,
           ...style
         },
@@ -6291,6 +6294,7 @@ function ITGrid({
       Component,
       {
         className: clsx25(
+          "col-span-full",
           colSpanClass(xs ?? sm, columns),
           sm !== void 0 && breakpointSpan(sm, "sm", columns),
           md !== void 0 && breakpointSpan(md, "md", columns),
@@ -6443,138 +6447,154 @@ function ITNavbar({
       ] })
     ] });
   }
-  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)";
+  const sidebar = theme.sidebar;
+  const topbar = theme.topbar;
+  return /* @__PURE__ */ jsxs24("div", { className: "flex h-screen font-sans", style: { backgroundColor: theme.layout.backgroundColor }, children: [
+    /* @__PURE__ */ jsxs24(
+      "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__ */ jsxs24("div", { className: "p-6 flex items-center gap-3", style: { borderBottom: `1px solid ${sidebar.borderColor}` }, 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: sidebar.active.color }, 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 ? 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__ */ jsxs24("div", { className: "flex items-center gap-3", children: [
+                    item.icon && /* @__PURE__ */ jsx32("div", { className: "text-xl transition-colors", style: {
+                      color: item.isActive ? sidebar.active.iconColor : sidebar.icon.color
+                    }, 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: sidebar.icon.color }, children: expandedItems.has(item.id) ? /* @__PURE__ */ jsx32(FaChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx32(FaChevronRight4, { className: "w-3 h-3" }) })
+                ]
               }
-            },
-            onMouseLeave: (e) => {
-              if (!item.isActive) {
-                e.currentTarget.style.backgroundColor = "transparent";
-                e.currentTarget.style.color = "var(--sidebar-label-color, #94a3b8)";
+            ),
+            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 ${sidebar.borderColor}` }, 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 ? 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: subitem.label })
               }
-            },
-            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))";
+            ) }, subitem.id)) })
+          ] }, item.id)) }) }),
+          userMenu && /* @__PURE__ */ jsx32("div", { className: "p-4", style: { borderTop: `1px solid ${sidebar.borderColor}` }, 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: 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__ */ jsx32(
+                    "img",
+                    {
+                      className: "w-10 h-10 rounded-full border-2 transition-colors",
+                      src: userMenu.userImage,
+                      alt: "user photo",
+                      style: { borderColor: sidebar.borderColor }
+                    }
+                  ) : /* @__PURE__ */ jsx32(
+                    "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__ */ 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: sidebar.active.color }, children: userMenu.userName }),
+                    /* @__PURE__ */ jsx32(ITText, { as: "div", className: "text-xs truncate", style: { color: sidebar.label.color }, children: userMenu.userEmail })
+                  ] }),
+                  /* @__PURE__ */ jsx32(FaChevronRight4, { className: "w-3 h-3", style: { color: sidebar.icon.color } })
+                ]
               }
-            },
-            onMouseLeave: (e) => {
-              if (!subitem.isActive) {
-                e.currentTarget.style.backgroundColor = "transparent";
+            ),
+            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: topbar.userMenu.dropdown.backgroundColor, border: `1px solid ${topbar.userMenu.dropdown.borderColor}` },
+                children: [
+                  /* @__PURE__ */ jsxs24("div", { className: "px-4 py-3", style: { backgroundColor: topbar.userMenu.backgroundColor, borderBottom: `1px solid ${topbar.userMenu.dropdown.borderColor}` }, children: [
+                    /* @__PURE__ */ jsx32(ITText, { as: "span", className: "block text-sm font-semibold", style: { color: topbar.userMenu.textColor }, children: userMenu.userName }),
+                    /* @__PURE__ */ jsx32(ITText, { as: "span", className: "block text-xs truncate", style: { color: topbar.userMenu.subtitleColor }, 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: topbar.userMenu.textColor },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = topbar.userMenu.dropdown.itemHoverBackground;
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      },
+                      children: /* @__PURE__ */ jsx32(ITText, { as: "span", children: item.label })
+                    }
+                  ) }, index)) })
+                ]
               }
-            },
-            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) => {
-                    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 })
+            )
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx32("main", { className: "flex-1 overflow-y-auto relative", style: { backgroundColor: theme.layout.backgroundColor }, children })
   ] });
 }
 
@@ -6590,31 +6610,57 @@ function ITPageHeader({
   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: [
+  return /* @__PURE__ */ jsxs25("div", { className: `${className} space-y-3`, children: [
+    showTopRow && /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 min-w-0", children: [
         backAction && /* @__PURE__ */ jsx33(
           "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 })
           }
         ),
         breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx33(ITBreadcrumbs, { items: breadcrumbs })
       ] }),
-      actions && /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-2 flex-shrink-0", children: actions })
+      actions && /* @__PURE__ */ jsx33("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__ */ jsxs25("div", { className: "flex items-start justify-between gap-6", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "flex items-start gap-4 min-w-0", children: [
+        icon && /* @__PURE__ */ jsx33(
+          "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__ */ jsxs25("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx33(
+            ITText,
+            {
+              as: "h1",
+              className: "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx33(
+            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__ */ jsx33("div", { className: "flex items-center gap-3 flex-shrink-0", children: actions })
     ] })
   ] });
 }
@@ -6729,7 +6775,7 @@ 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);
+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(
@@ -6739,7 +6785,9 @@ var renderHeader = (props) => {
       description: props.description,
       breadcrumbs: props.breadcrumbs,
       actions: props.actions,
-      backAction: props.backAction
+      backAction: props.backAction,
+      icon: props.icon,
+      iconColor: props.iconColor
     }
   );
 };
@@ -6755,16 +6803,24 @@ function ITPage(props) {
     emptyDescription,
     emptyAction,
     className,
-    children
+    children,
+    maxWidth = "7xl",
+    noPadding = false
   } = props;
-  const wrapperClass = clsx28("space-y-6", className);
+  const wrapperClass = clsx28(
+    "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: [
       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__ */ jsxs27(ITStack, { spacing: 6, children: [
+        /* @__PURE__ */ jsx36(ITSkeleton, { variant: "rectangular", height: 40, width: "40%", className: "rounded-lg" }),
+        /* @__PURE__ */ jsx36(ITSkeleton, { variant: "rectangular", height: 200, className: "rounded-lg" }),
+        /* @__PURE__ */ jsx36(ITSkeleton, { variant: "rectangular", height: 200, className: "rounded-lg" })
       ] })
     ] });
   }
@@ -8898,6 +8954,7 @@ function ITLayout({
 }) {
   const [desktopCollapsed, setDesktopCollapsed] = useState26(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState26(false);
+  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 +8964,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: () => 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: "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 }) })
+        ]
+      }
+    )
   ] });
 }