@axzydev/axzy_ui_system 1.4.2 → 1.4.4

package/dist/index.js

@@ -1809,6 +1809,25 @@ var calendar_default = ITCalendar;
 // src/components/molecules/card/card.tsx
 import clsx8 from "clsx";
 import { useState as useState8 } from "react";
+
+// src/theme/theme-context.ts
+import { createContext, useContext } from "react";
+var ITThemeContext = createContext(void 0);
+var useITTheme = () => {
+  const context = useContext(ITThemeContext);
+  if (!context) {
+    throw new Error("useITTheme must be used within an ITThemeProvider");
+  }
+  return context;
+};
+var useITThemeSafe = () => {
+  return useContext(ITThemeContext);
+};
+var useITFlatAppearance = () => {
+  return useContext(ITThemeContext)?.appearance === "flat";
+};
+
+// src/components/molecules/card/card.tsx
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function ITCard({
   title,
@@ -1824,16 +1843,20 @@ function ITCard({
   onClick
 }) {
   const [isHovered, setIsHovered] = useState8(false);
+  const flat = useITFlatAppearance();
   const containerStyle = {
     backgroundColor: "var(--it-card-bg, #ffffff)",
-    borderColor: "var(--it-card-border, rgba(15, 23, 42, 0.06))",
+    borderColor: flat ? "var(--it-card-flat-border, var(--color-secondary-200))" : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
     borderWidth: "1px",
-    borderRadius: "var(--it-card-radius, var(--radius-2xl))",
+    borderStyle: "solid",
+    borderRadius: flat ? "var(--it-card-radius, var(--radius-lg))" : "var(--it-card-radius, var(--radius-2xl))",
     // Soft depth: every card floats a little at rest; interactive cards
     // gain visual weight on hover instead of appearing flat until clicked.
-    boxShadow: onClick ? isHovered ? "var(--shadow-lg)" : "var(--shadow-sm)" : "var(--shadow-sm)",
+    // Flat appearance: the hairline border carries the surface, so a card
+    // only gets a shadow as hover feedback when it is clickable.
+    boxShadow: flat ? onClick && isHovered ? "var(--shadow-sm)" : "none" : onClick ? isHovered ? "var(--shadow-lg)" : "var(--shadow-sm)" : "var(--shadow-sm)",
     transition: onClick ? "box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out" : "none",
-    transform: onClick && isHovered ? "translateY(-2px)" : "translateY(0)",
+    transform: onClick && isHovered && !flat ? "translateY(-2px)" : "translateY(0)",
     cursor: onClick ? "pointer" : "default"
   };
   const bodyStyle = {
@@ -1861,7 +1884,7 @@ function ITCard({
             ITText,
             {
               as: "h3",
-              className: clsx8("text-xl font-semibold mb-2", titleClassName),
+              className: clsx8(flat ? "text-base font-semibold mb-3" : "text-xl font-semibold mb-2", titleClassName),
               children: title
             }
           ),
@@ -4940,20 +4963,6 @@ import { FaRegTimesCircle } from "react-icons/fa";
 // src/components/molecules/form-header/form-header.tsx
 import { FaTimes as FaTimes6 } from "react-icons/fa";
 
-// src/theme/theme-context.ts
-import { createContext, useContext } from "react";
-var ITThemeContext = createContext(void 0);
-var useITTheme = () => {
-  const context = useContext(ITThemeContext);
-  if (!context) {
-    throw new Error("useITTheme must be used within an ITThemeProvider");
-  }
-  return context;
-};
-var useITThemeSafe = () => {
-  return useContext(ITThemeContext);
-};
-
 // src/utils/color.utils.ts
 var isLightColor = (hex) => {
   if (!hex || typeof hex !== "string") return false;
@@ -6519,6 +6528,7 @@ function ITPageHeader({
   className
 }) {
   const showTopRow = breadcrumbs?.length || backAction;
+  const flat = useITFlatAppearance();
   return /* @__PURE__ */ jsxs29("div", { className: `${className} space-y-3`, children: [
     showTopRow && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 min-w-0", children: [
@@ -6537,7 +6547,7 @@ function ITPageHeader({
     ] }),
     /* @__PURE__ */ jsxs29("div", { className: "flex items-start justify-between gap-6", children: [
       /* @__PURE__ */ jsxs29("div", { className: "flex items-start gap-4 min-w-0", children: [
-        icon && /* @__PURE__ */ jsx38(
+        icon && !flat && /* @__PURE__ */ jsx38(
           "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",
@@ -6550,7 +6560,7 @@ function ITPageHeader({
             ITText,
             {
               as: "h1",
-              className: "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
+              className: flat ? "text-[1.625rem] font-bold text-slate-900 dark:text-white tracking-tight leading-tight" : "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight",
               children: title
             }
           ),
@@ -6558,7 +6568,7 @@ function ITPageHeader({
             ITText,
             {
               as: "p",
-              className: "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed",
+              className: flat ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed" : "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed",
               children: description
             }
           )
@@ -7595,8 +7605,12 @@ function ITSidebar({
   onSubItemClick,
   subitemConnector = "dot",
   header,
-  notification
+  notification,
+  brand,
+  onToggleCollapse,
+  expandOnHover = true
 }) {
+  const flat = useITFlatAppearance();
   const [expandedItems, setExpandedItems] = useState27(/* @__PURE__ */ new Set());
   const [isHovering, setIsHovering] = useState27(false);
   const sidebarRef = useRef20(null);
@@ -7650,6 +7664,9 @@ function ITSidebar({
       });
     }
   }, [navigationItems]);
+  const isSidebarCollapsed = visibleOnMobile ? false : isCollapsed && !(expandOnHover && isHovering);
+  const sidebarWidth = isSidebarCollapsed ? flat ? "w-[72px]" : "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
+  const fixedRail = isSidebarCollapsed && !expandOnHover;
   const toggleExpanded = (itemId) => {
     const newExpanded = new Set(expandedItems);
     if (newExpanded.has(itemId)) newExpanded.delete(itemId);
@@ -7658,14 +7675,17 @@ function ITSidebar({
   };
   const handleItemClick = (item) => {
     if (item.subitems && item.subitems.length > 0) {
-      toggleExpanded(item.id);
+      if (isSidebarCollapsed && !expandOnHover) {
+        setExpandedItems((prev) => new Set(prev).add(item.id));
+        onToggleCollapse?.();
+      } else {
+        toggleExpanded(item.id);
+      }
     } else {
       if (item.action) item.action();
       if (onItemClick) onItemClick(item);
     }
   };
-  const isSidebarCollapsed = visibleOnMobile ? false : !isHovering && isCollapsed;
-  const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : "w-[280px]";
   const renderSubItem = (subitem) => /* @__PURE__ */ jsx56("li", { className: "relative", children: /* @__PURE__ */ jsxs43(
     "button",
     {
@@ -7678,7 +7698,7 @@ function ITSidebar({
       style: {
         color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
         backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
-        fontSize: "0.78rem",
+        fontSize: flat ? "0.84rem" : "0.78rem",
         fontWeight: subitem.isActive ? 600 : 500,
         letterSpacing: "0.01em",
         marginLeft: subitemConnector === "|" ? "-1px" : "0"
@@ -7696,7 +7716,7 @@ function ITSidebar({
         }
       },
       children: [
-        subitem.isActive && subitemConnector === "|" && /* @__PURE__ */ jsx56(
+        subitem.isActive && subitemConnector === "|" && !flat && /* @__PURE__ */ jsx56(
           "div",
           {
             className: "absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all",
@@ -7831,22 +7851,40 @@ function ITSidebar({
         ${sidebarWidth}
         ${className}
         ${!visibleOnMobile ? "hidden lg:flex" : "flex"}
-        shadow-[4px_0_32px_rgba(15,23,42,0.04)]
+        ${flat ? "" : "shadow-[4px_0_32px_rgba(15,23,42,0.04)]"}
       `,
       style: {
         zIndex: 50,
         backgroundColor: "var(--it-sidebar-bg, rgba(255, 255, 255, 0.90))",
         borderRight: "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
-        WebkitBackdropFilter: "blur(12px)",
-        backdropFilter: "blur(12px)"
+        ...flat ? {} : { WebkitBackdropFilter: "blur(12px)", backdropFilter: "blur(12px)" }
       },
       children: [
+        brand && (brand.logo || brand.text) && /* @__PURE__ */ jsxs43(
+          "div",
+          {
+            className: `flex items-center flex-shrink-0 h-[64px] ${isSidebarCollapsed ? "justify-center px-2" : "gap-2.5 px-7"}`,
+            children: [
+              brand.logo && /* @__PURE__ */ jsx56("div", { className: "flex-shrink-0 flex items-center", children: brand.logo }),
+              brand.text && !isSidebarCollapsed && /* @__PURE__ */ jsx56(
+                ITText,
+                {
+                  as: "span",
+                  className: "text-[1.05rem] font-bold tracking-tight truncate",
+                  style: { color: "var(--it-sidebar-brand-color, var(--it-sidebar-label-color, var(--color-secondary-900)))" },
+                  children: brand.text
+                }
+              )
+            ]
+          }
+        ),
         header && !isSidebarCollapsed && /* @__PURE__ */ jsx56("div", { className: "px-4 pt-4 pb-1 flex-shrink-0", children: header }),
         notification && /* @__PURE__ */ jsx56("div", { className: "px-4 pt-3 flex-shrink-0", children: renderNotification() }),
-        /* @__PURE__ */ jsx56("nav", { "aria-label": "Componentes de la librer\xEDa", className: "flex-1 py-4 overflow-y-auto overflow-x-hidden custom-scrollbar px-4", children: /* @__PURE__ */ jsx56("ul", { className: "space-y-1", children: navigationItems.map((item) => {
+        /* @__PURE__ */ jsx56("nav", { "aria-label": "Componentes de la librer\xEDa", className: `flex-1 py-4 custom-scrollbar ${fixedRail ? "overflow-visible" : "overflow-y-auto overflow-x-hidden"} ${flat && isSidebarCollapsed ? "px-3" : "px-4"}`, children: /* @__PURE__ */ jsx56("ul", { className: "space-y-1", children: navigationItems.map((item) => {
           const hasSubmenu = !!item.subitems && item.subitems.length > 0;
           const submenuId = `it-sidebar-submenu-${item.id}`;
           const { className: badgeClassName, ...badgeRest } = item.badgeProps ?? {};
+          const active = !!item.isActive && !(flat && hasSubmenu && !isSidebarCollapsed);
           return /* @__PURE__ */ jsxs43("li", { className: "relative group/navitem", children: [
             /* @__PURE__ */ jsxs43(
               "div",
@@ -7859,18 +7897,18 @@ function ITSidebar({
                 className: `flex items-center cursor-pointer 
                   transition-all duration-300 ease-[cubic-bezier(0.2,0,0,1)]
                   rounded-xl relative overflow-visible
-                  ${isSidebarCollapsed ? "justify-center p-2 mb-1" : "justify-between px-3 py-2 mb-0.5"}
+                  ${isSidebarCollapsed ? flat ? "justify-center h-10 mb-1" : "justify-center p-2 mb-1" : "justify-between px-3 py-2 mb-0.5"}
                 `,
                 style: {
-                  backgroundColor: item.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
-                  boxShadow: item.isActive ? "var(--shadow-xs)" : "none",
-                  border: item.isActive ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "1px solid transparent"
+                  backgroundColor: active ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : "transparent",
+                  boxShadow: active && !flat ? "var(--shadow-xs)" : "none",
+                  border: active && !flat ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "1px solid transparent"
                 },
                 onMouseEnter: (e) => {
-                  if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
+                  if (!active) e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
                 },
                 onMouseLeave: (e) => {
-                  if (!item.isActive) e.currentTarget.style.backgroundColor = "transparent";
+                  if (!active) e.currentTarget.style.backgroundColor = "transparent";
                 },
                 onClick: () => handleItemClick(item),
                 onKeyDown: (e) => {
@@ -7880,7 +7918,7 @@ function ITSidebar({
                   }
                 },
                 children: [
-                  item.isActive && !isSidebarCollapsed && /* @__PURE__ */ jsx56(
+                  active && !isSidebarCollapsed && !flat && /* @__PURE__ */ jsx56(
                     "div",
                     {
                       className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
@@ -7893,10 +7931,10 @@ function ITSidebar({
                       {
                         className: `transition-all duration-300 flex-shrink-0 flex items-center justify-center`,
                         style: {
-                          color: item.isActive ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, #9ca3af)",
-                          opacity: item.isActive ? 1 : 0.8,
-                          fontSize: item.isActive ? "1.12rem" : "1.05rem",
-                          filter: item.isActive ? "drop-shadow(0 0 8px rgba(255,255,255,0.2))" : "none"
+                          color: active ? "var(--it-sidebar-active-icon, var(--color-primary-500))" : "var(--it-sidebar-icon-color, #9ca3af)",
+                          opacity: active ? 1 : 0.8,
+                          fontSize: flat ? "1rem" : active ? "1.12rem" : "1.05rem",
+                          filter: active && !flat ? "drop-shadow(0 0 8px rgba(255,255,255,0.2))" : "none"
                         },
                         children: item.icon
                       }
@@ -7907,9 +7945,9 @@ function ITSidebar({
                         as: "span",
                         className: `transition-all duration-300 truncate tracking-wide`,
                         style: {
-                          color: item.isActive ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
-                          fontSize: "0.8rem",
-                          fontWeight: item.isActive ? "600" : "500"
+                          color: active ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
+                          fontSize: flat ? "0.875rem" : "0.8rem",
+                          fontWeight: active ? "600" : "500"
                         },
                         children: item.label
                       }
@@ -7919,7 +7957,7 @@ function ITSidebar({
                     "div",
                     {
                       className: `flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`,
-                      style: { color: item.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 },
+                      style: { color: active ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 },
                       children: /* @__PURE__ */ jsx56(FaChevronDown4, { className: "w-3 h-3" })
                     }
                   ),
@@ -7940,7 +7978,21 @@ function ITSidebar({
                 ]
               }
             ),
-            isSidebarCollapsed && /* @__PURE__ */ jsxs43(
+            isSidebarCollapsed && flat && /* @__PURE__ */ jsx56(
+              "div",
+              {
+                role: "tooltip",
+                className: "absolute left-full top-1/2 -translate-y-1/2 ml-3 px-2.5 py-1.5 rounded-lg whitespace-nowrap opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-opacity duration-150 pointer-events-none z-[70]",
+                style: {
+                  backgroundColor: "var(--it-sidebar-tooltip-bg, var(--color-secondary-900))",
+                  color: "var(--it-sidebar-tooltip-color, #ffffff)",
+                  fontSize: "0.78rem",
+                  fontWeight: 500
+                },
+                children: item.label
+              }
+            ),
+            isSidebarCollapsed && !flat && /* @__PURE__ */ jsxs43(
               "div",
               {
                 className: "absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-[70] min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]",
@@ -7982,7 +8034,7 @@ function ITSidebar({
             !isSidebarCollapsed && item.subitems && item.subitems.length > 0 && /* @__PURE__ */ jsx56("div", { id: submenuId, role: "group", "aria-label": item.label, className: `overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[1000px] opacity-100 mt-1" : "max-h-0 opacity-0"}`, children: /* @__PURE__ */ jsx56(
               "ul",
               {
-                className: "ml-4 flex flex-col gap-0 py-0.5",
+                className: `${flat && subitemConnector === "|" ? "ml-[21px] pl-2" : "ml-4"} flex flex-col gap-0 py-0.5`,
                 style: {
                   borderLeft: subitemConnector === "|" ? "1px solid var(--it-sidebar-border, var(--color-secondary-200))" : "none"
                 },
@@ -9995,26 +10047,32 @@ function ITTopBar({
   showMobileMenuButton,
   onToggleMobileMenu,
   navItems,
-  onNavItemClick
+  onNavItemClick,
+  hideBrandOnDesktop = false,
+  showDesktopMenuButton = false
 }) {
+  const flat = useITFlatAppearance();
+  const initials = (userMenu?.userName ?? "").trim().split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
   const [isUserMenuOpen, setIsUserMenuOpen] = useState35(false);
   const userMenuRef = useRef22(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
   return /* @__PURE__ */ jsx68(
     "header",
     {
-      className: "sticky top-0 z-40 backdrop-blur-md transition-all duration-300",
+      className: `sticky top-0 z-40 transition-all duration-300 ${flat ? "" : "backdrop-blur-md"}`,
       style: {
         backgroundColor: "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
         borderBottom: "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
-        boxShadow: "var(--shadow-xs)"
+        boxShadow: flat ? "none" : "var(--shadow-xs)"
       },
-      children: /* @__PURE__ */ jsxs53("div", { className: "flex items-center justify-between h-[72px] px-6 lg:px-8", children: [
+      children: /* @__PURE__ */ jsxs53("div", { className: `flex items-center justify-between px-6 lg:px-8 ${flat ? "h-[64px]" : "h-[72px]"}`, children: [
         /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-5", children: [
           showMobileMenuButton && /* @__PURE__ */ jsx68(
             "button",
             {
-              className: "lg:hidden p-2.5 rounded-xl transition-colors duration-200",
+              type: "button",
+              "aria-label": "Men\xFA",
+              className: `${showDesktopMenuButton ? "" : "lg:hidden"} p-2.5 -ml-2.5 rounded-xl transition-colors duration-200`,
               style: {
                 color: "var(--it-topbar-icon, #64748b)"
               },
@@ -10024,7 +10082,7 @@ function ITTopBar({
               children: /* @__PURE__ */ jsx68(FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
             }
           ),
-          /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs53("div", { className: `items-center gap-3 ${hideBrandOnDesktop ? "flex lg:hidden" : "flex"}`, children: [
             logo && /* @__PURE__ */ jsx68("div", { className: "flex-shrink-0 drop-shadow-sm", children: logo }),
             logoText && /* @__PURE__ */ jsx68(
               ITText,
@@ -10058,7 +10116,7 @@ function ITTopBar({
             item.id
           )) })
         ] }),
-        centerContent && /* @__PURE__ */ jsx68("div", { className: "hidden lg:flex flex-1 min-w-0 items-center justify-center px-4", children: /* @__PURE__ */ jsx68("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
+        centerContent && /* @__PURE__ */ jsx68("div", { className: `hidden lg:flex flex-1 min-w-0 items-center ${hideBrandOnDesktop ? "justify-start pr-4" : "justify-center px-4"}`, children: /* @__PURE__ */ jsx68("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
         (children || userMenu) && /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-2", children: [
           children,
           userMenu && /* @__PURE__ */ jsxs53("div", { className: "relative", children: [
@@ -10066,7 +10124,7 @@ function ITTopBar({
               "button",
               {
                 type: "button",
-                className: "flex items-center gap-3 rounded-full pl-2 pr-4 py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200",
+                className: `flex items-center gap-3 rounded-full py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200 ${flat ? "flex-row-reverse pl-4 pr-2" : "pl-2 pr-4"}`,
                 style: {
                   backgroundColor: isUserMenuOpen ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent"
                 },
@@ -10086,10 +10144,21 @@ function ITTopBar({
                         src: userMenu.userImage,
                         alt: "Current user"
                       }
+                    ) : flat && initials ? /* @__PURE__ */ jsx68(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        className: "w-9 h-9 rounded-full flex items-center justify-center text-[0.8rem] font-semibold",
+                        style: {
+                          backgroundColor: "color-mix(in srgb, var(--color-primary, #3b82f6) 14%, transparent)",
+                          color: "var(--color-primary, #2563eb)"
+                        },
+                        children: initials
+                      }
                     ) : /* @__PURE__ */ jsx68("div", { className: "w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm", children: /* @__PURE__ */ jsx68(FaUserCircle2, { className: "w-6 h-6", style: { color: "var(--it-topbar-icon, #94a3b8)" } }) }),
-                    /* @__PURE__ */ jsx68("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
+                    !flat && /* @__PURE__ */ jsx68("div", { className: "absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full" })
                   ] }),
-                  /* @__PURE__ */ jsxs53("div", { className: "hidden sm:flex flex-col text-left py-0.5", children: [
+                  /* @__PURE__ */ jsxs53("div", { className: `hidden sm:flex flex-col py-0.5 ${flat ? "text-right" : "text-left"}`, children: [
                     /* @__PURE__ */ jsx68(
                       ITText,
                       {
@@ -10170,75 +10239,108 @@ function ITLayout({
   sidebar,
   children,
   className = "",
-  contentClassName = ""
+  contentClassName = "",
+  sidebarFullHeight = false
 }) {
   const [internalCollapsed, setInternalCollapsed] = useState36(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState36(false);
+  const flat = useITFlatAppearance();
   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__ */ jsxs54("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
-    /* @__PURE__ */ jsx69(
-      ITTopBar,
+  const reservedWidth = desktopCollapsed ? flat ? "w-[72px]" : "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
+  const toggleByButton = sidebar.expandOnHover === false;
+  const handleMenuButton = () => {
+    if (toggleByButton && window.matchMedia("(min-width: 1024px)").matches) handleToggleCollapse();
+    else setMobileSidebarOpen((v) => !v);
+  };
+  const brand = sidebarFullHeight ? sidebar.brand ?? { logo: topBar.logo, text: topBar.logoText } : sidebar.brand;
+  const topBarNode = /* @__PURE__ */ jsx69(
+    ITTopBar,
+    {
+      ...topBar,
+      hideBrandOnDesktop: sidebarFullHeight || topBar.hideBrandOnDesktop,
+      showMobileMenuButton: true,
+      showDesktopMenuButton: toggleByButton || topBar.showDesktopMenuButton,
+      onToggleMobileMenu: handleMenuButton
+    }
+  );
+  const desktopSidebar = (
+    // Full-height: the sidebar sits beside the top bar, so it needs to win the
+    // stacking order when the collapsed rail expands over the content on hover.
+    /* @__PURE__ */ jsxs54("div", { className: `hidden lg:block relative h-full ${sidebarFullHeight ? "z-50" : "z-40"}`, children: [
+      /* @__PURE__ */ jsx69("div", { className: `${reservedWidth} h-full flex-shrink-0` }),
+      /* @__PURE__ */ jsx69("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ jsx69(
+        ITSidebar,
+        {
+          ...sidebar,
+          brand,
+          isCollapsed: desktopCollapsed,
+          onToggleCollapse: handleToggleCollapse,
+          visibleOnMobile: false,
+          className: `h-full ${flat ? "" : "drop-shadow-2xl"} transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] flex-shrink-0`
+        }
+      ) })
+    ] })
+  );
+  const mobileSidebar = mobileSidebarOpen && /* @__PURE__ */ jsx69(
+    "div",
+    {
+      className: "lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40",
+      onClick: () => setMobileSidebarOpen(false),
+      children: /* @__PURE__ */ jsx69(
+        "div",
+        {
+          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__ */ jsx69(
+            ITSidebar,
+            {
+              ...sidebar,
+              brand,
+              isCollapsed: false,
+              visibleOnMobile: true,
+              className: "h-full shadow-2xl relative z-[60]",
+              onToggleCollapse: () => setMobileSidebarOpen(false),
+              onItemClick: () => setMobileSidebarOpen(false),
+              onSubItemClick: () => setMobileSidebarOpen(false)
+            }
+          )
+        }
+      )
+    }
+  );
+  const main = /* @__PURE__ */ jsx69("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ jsx69("div", { className: clsx52("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) });
+  if (sidebarFullHeight) {
+    return /* @__PURE__ */ jsxs54(
+      "div",
       {
-        ...topBar,
-        showMobileMenuButton: true,
-        onToggleMobileMenu: () => setMobileSidebarOpen((v) => !v)
+        className: `flex h-screen overflow-hidden w-full relative ${className}`,
+        style: { backgroundColor: layoutTokens.backgroundColor },
+        children: [
+          desktopSidebar,
+          /* @__PURE__ */ jsxs54("div", { className: "flex flex-col flex-1 min-w-0 overflow-hidden", children: [
+            topBarNode,
+            main
+          ] }),
+          mobileSidebar
+        ]
       }
-    ),
+    );
+  }
+  return /* @__PURE__ */ jsxs54("div", { className: `flex flex-col h-screen overflow-hidden w-full ${className}`, children: [
+    topBarNode,
     /* @__PURE__ */ jsxs54(
       "div",
       {
         className: "flex flex-1 overflow-hidden relative",
         style: { backgroundColor: layoutTokens.backgroundColor },
         children: [
-          /* @__PURE__ */ jsxs54("div", { className: "hidden lg:block relative z-40 h-full", children: [
-            /* @__PURE__ */ jsx69(
-              "div",
-              {
-                className: `${desktopCollapsed ? "w-[88px]" : "w-[280px]"} h-full flex-shrink-0`
-              }
-            ),
-            /* @__PURE__ */ jsx69("div", { className: "absolute top-0 left-0 h-full", children: /* @__PURE__ */ jsx69(
-              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__ */ jsx69(
-            "div",
-            {
-              className: "lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40",
-              onClick: () => setMobileSidebarOpen(false),
-              children: /* @__PURE__ */ jsx69(
-                "div",
-                {
-                  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__ */ jsx69(
-                    ITSidebar,
-                    {
-                      ...sidebar,
-                      isCollapsed: false,
-                      visibleOnMobile: true,
-                      className: "h-full shadow-2xl relative z-[60]",
-                      onToggleCollapse: () => setMobileSidebarOpen(false),
-                      onItemClick: () => setMobileSidebarOpen(false),
-                      onSubItemClick: () => setMobileSidebarOpen(false)
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx69("main", { className: "flex-1 overflow-y-auto w-full custom-scrollbar relative z-0", children: /* @__PURE__ */ jsx69("div", { className: clsx52("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName), children }) })
+          desktopSidebar,
+          mobileSidebar,
+          main
         ]
       }
     )
@@ -10798,7 +10900,8 @@ function ITThemeProvider({
   showFab = true,
   density = 1,
   radius,
-  shadow
+  shadow,
+  appearance = "soft"
 }) {
   const [palette2, setPaletteState] = useState38(() => {
     const basePalette = {
@@ -10911,6 +11014,11 @@ function ITThemeProvider({
       root.style.fontSize = "";
     };
   }, [density]);
+  useLayoutEffect4(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-it-appearance", appearance);
+    return () => root.removeAttribute("data-it-appearance");
+  }, [appearance]);
   useLayoutEffect4(() => {
     const root = document.documentElement;
     const radiusTokens = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
@@ -12192,7 +12300,8 @@ function ITThemeProvider({
         applyPreset,
         resolvedTheme,
         darkModeMode,
-        setDarkModeMode
+        setDarkModeMode,
+        appearance
       },
       children: [
         children,
@@ -12452,6 +12561,7 @@ export {
   useDebouncedSearch,
   useEditableRow,
   useFloatingPanel,
+  useITFlatAppearance,
   useITTheme,
   useITThemeSafe,
   useTableState