@axzydev/axzy_ui_system 1.4.2 → 1.4.3

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/molecules/card/card.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { ITCardProps } from "./card.props";
 import { useState } from "react";
 import ITText from "@/components/atoms/text/text";
+import { useITFlatAppearance } from "@/theme/theme-context";
 
 /**
  * Versatile card container with optional image, title, body content, and action footer. Supports interactive hover states.
@@ -30,21 +31,33 @@ export default function ITCard({
   onClick,
 }: ITCardProps) {
   const [isHovered, setIsHovered] = useState(false);
+  const flat = useITFlatAppearance();
 
   const containerStyle: React.CSSProperties = {
     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",
   };
 
@@ -72,7 +85,7 @@ export default function ITCard({
         {title && (
           <ITText
             as="h3"
-            className={clsx("text-xl font-semibold mb-2", titleClassName)}
+            className={clsx(flat ? "text-base font-semibold mb-3" : "text-xl font-semibold mb-2", titleClassName)}
           >
             {title}
           </ITText>

package/src/components/organisms/page-header/page-header.tsx

@@ -2,6 +2,7 @@ import { FaChevronLeft } from "react-icons/fa";
 import { ITPageHeaderProps } from "./page-header.props";
 import ITBreadcrumbs from "@/components/molecules/breadcrumbs/breadcrumbs";
 import ITText from "@/components/atoms/text/text";
+import { useITFlatAppearance } from "@/theme/theme-context";
 
 /**
  * Page title bar with breadcrumbs, description, back button, and action buttons.
@@ -29,6 +30,8 @@ export default function ITPageHeader({
   className,
 }: ITPageHeaderProps) {
   const showTopRow = breadcrumbs?.length || backAction;
+  // Flat appearance: compact title, no decorative icon tile.
+  const flat = useITFlatAppearance();
 
   return (
     <div className={`${className} space-y-3`}>
@@ -60,7 +63,7 @@ export default function ITPageHeader({
       {/* Fila principal: icono + título + descripción + (acciones si no hay top row) */}
       <div className="flex items-start justify-between gap-6">
         <div className="flex items-start gap-4 min-w-0">
-          {icon && (
+          {icon && !flat && (
             <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 } : undefined}
@@ -71,14 +74,22 @@ export default function ITPageHeader({
           <div className="min-w-0">
             <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"
+              }
             >
               {title}
             </ITText>
             {description && (
               <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"
+                }
               >
                 {description}
               </ITText>

package/src/components/organisms/sidebar/sidebar.doc.mdx

@@ -21,6 +21,7 @@ Vertical navigation sidebar with collapsible submenus, tooltips when collapsed,
 | `className` | `string` | — | Additional CSS classes on the sidebar `<aside>`. |
 | `header` | `ReactNode` | — | Optional content rendered above the navigation list (e.g. a wordmark). Hidden while the sidebar is collapsed, so it only appears when the hover-expanded rail is shown. |
 | `notification` | `ITSidebarNotification` | — | Optional notification entry (icon + label + `ITBadget` counter) pinned above the navigation. Unlike `header`, it stays visible while collapsed, showing only the icon and counter. |
+| `brand` | `ITSidebarBrand` | — | Brand (`logo` + `text`) pinned in a 64px row at the very top. The logo stays visible while collapsed; the text does not. `ITLayout` fills it from `topBar.logo` / `topBar.logoText` when `sidebarFullHeight` is set. |
 
 ### ITNavigationItem
 

package/src/components/organisms/sidebar/sidebar.props.ts

@@ -86,6 +86,17 @@ export interface ITSidebarNotification {
   badgeProps?: ITBadgetProps;
 }
 
+/**
+ * Brand block pinned at the top of {@link ITSidebarProps}. The logo stays
+ * visible while the rail is collapsed; the text only shows when expanded.
+ */
+export interface ITSidebarBrand {
+  /** Logo element (e.g. an `<img>` or an SVG mark). Always visible. */
+  logo?: React.ReactNode;
+  /** Wordmark rendered next to the logo. Hidden while the sidebar is collapsed. */
+  text?: string;
+}
+
 /** Props for the ITSidebar vertical navigation component. */
 export interface ITSidebarProps {
   /** Navigation structure: top-level items with optional sub-items. */
@@ -115,5 +126,11 @@ export interface ITSidebarProps {
    * while collapsed, showing just the icon and the counter.
    */
   notification?: ITSidebarNotification;
+  /**
+   * Brand (logo + wordmark) pinned at the very top of the sidebar, in a 64px
+   * row that lines up with the top bar. Unlike {@link ITSidebarProps.header}
+   * the logo stays visible while collapsed. `ITLayout` fills it from
+   * `topBar.logo` / `topBar.logoText` when `sidebarFullHeight` is set.
+   */
+  brand?: ITSidebarBrand;
 }
-

package/src/components/organisms/sidebar/sidebar.tsx

@@ -10,6 +10,7 @@ import {
 } from "./sidebar.props";
 import ITBadget from "@/components/atoms/badget/badget";
 import ITText from "@/components/atoms/text/text";
+import { useITFlatAppearance } from "@/theme/theme-context";
 
 /** Narrows a submenu entry to a titled group. */
 function isSubItemGroup(
@@ -66,7 +67,10 @@ export default function ITSidebar({
   subitemConnector = 'dot',
   header,
   notification,
+  brand,
 }: ITSidebarProps) {
+  // Flat appearance: plain surface, no glow/accent bar, narrower panel.
+  const flat = useITFlatAppearance();
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
   const [isHovering, setIsHovering] = useState(false);
   const sidebarRef = useRef<HTMLDivElement>(null);
@@ -145,7 +149,7 @@ export default function ITSidebar({
   };
 
   const isSidebarCollapsed = visibleOnMobile ? false : (!isHovering && isCollapsed);
-  const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : "w-[280px]";
+  const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
 
   const renderSubItem = (subitem: ITNavigationSubItem) => (
     <li key={subitem.id} className="relative">
@@ -318,16 +322,32 @@ export default 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)' }),
       }}
     >
+      {brand && (brand.logo || brand.text) && (
+        <div
+          className={`flex items-center flex-shrink-0 h-[64px] ${isSidebarCollapsed ? "justify-center px-2" : "gap-2.5 px-7"}`}
+        >
+          {brand.logo && <div className="flex-shrink-0 flex items-center">{brand.logo}</div>}
+          {brand.text && !isSidebarCollapsed && (
+            <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)))" }}
+            >
+              {brand.text}
+            </ITText>
+          )}
+        </div>
+      )}
+
       {header && !isSidebarCollapsed && (
         <div className="px-4 pt-4 pb-1 flex-shrink-0">{header}</div>
       )}
@@ -358,8 +378,8 @@ export default function ITSidebar({
                 `}
                 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'
+                  boxShadow: item.isActive && !flat ? 'var(--shadow-xs)' : 'none',
+                  border: item.isActive && !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))";
@@ -375,7 +395,7 @@ export default function ITSidebar({
                   }
                 }}
               >
-                {item.isActive && !isSidebarCollapsed && (
+                {item.isActive && !isSidebarCollapsed && !flat && (
                   <div
                     className="absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all"
                     style={{ backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))", boxShadow: "0 0 10px var(--it-sidebar-active-icon, var(--color-primary-500))" }}
@@ -389,8 +409,8 @@ export default function ITSidebar({
                       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'
+                        fontSize: flat ? '1rem' : item.isActive ? '1.12rem' : '1.05rem',
+                        filter: item.isActive && !flat ? 'drop-shadow(0 0 8px rgba(255,255,255,0.2))' : 'none'
                       }}
                     >
                       {item.icon}
@@ -402,7 +422,7 @@ export default function ITSidebar({
                       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',
+                        fontSize: flat ? '0.875rem' : '0.8rem',
                         fontWeight: item.isActive ? '600' : '500'
                       }}
                     >

package/src/components/organisms/topbar/topbar.props.ts

@@ -49,4 +49,11 @@ export interface ITTopBarProps {
   showMobileMenuButton?: boolean;
   /** Callback fired when the mobile menu toggle button is clicked. */
   onToggleMobileMenu?: () => void;
+  /**
+   * Hides the logo and `logoText` from the `lg` breakpoint up and left-aligns
+   * `centerContent`. Use it when the brand already lives somewhere else (e.g.
+   * at the top of a full-height sidebar); `ITLayout` sets it for you when
+   * `sidebarFullHeight` is on. Below `lg` the logo is still shown. @default false
+   */
+  hideBrandOnDesktop?: boolean;
 }

package/src/components/organisms/topbar/topbar.tsx

@@ -3,6 +3,7 @@ import useClickOutside from "@/hooks/useClickOutside";
 import { useRef, useState } from "react";
 import { ITTopBarProps } from "./topbar.props";
 import ITText from "@/components/atoms/text/text";
+import { useITFlatAppearance } from "@/theme/theme-context";
 
 /**
  * ITTopBar — sticky top navigation bar with logo, nav items, and user avatar dropdown.
@@ -67,7 +68,16 @@ export default function ITTopBar({
   onToggleMobileMenu,
   navItems,
   onNavItemClick,
+  hideBrandOnDesktop = false,
 }: ITTopBarProps) {
+  // Flat appearance: plain bar (no shadow/blur), initials avatar, name before it.
+  const flat = useITFlatAppearance();
+  const initials = (userMenu?.userName ?? "")
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((word) => word.charAt(0).toUpperCase())
+    .join("");
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
   const userMenuRef = useRef<HTMLDivElement>(null);
 
@@ -75,14 +85,14 @@ export default function ITTopBar({
 
   return (
     <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)",
       }}
     >
-      <div className="flex items-center justify-between h-[72px] px-6 lg:px-8">
+      <div className={`flex items-center justify-between px-6 lg:px-8 ${flat ? "h-[64px]" : "h-[72px]"}`}>
 
         {/* LEFT AREA: Logo & Mobile Toggle */}
         <div className="flex items-center gap-5">
@@ -103,7 +113,7 @@ export default function ITTopBar({
           )}
 
           {/* Logo */}
-          <div className="flex items-center gap-3">
+          <div className={`items-center gap-3 ${hideBrandOnDesktop ? "flex lg:hidden" : "flex"}`}>
             {logo && (
               <div className="flex-shrink-0 drop-shadow-sm">
                  {logo}
@@ -153,7 +163,7 @@ export default function ITTopBar({
             `justify-between` has nothing left to distribute: the logo/nav and
             the user menu stay flush with the row edges. */}
         {centerContent && (
-          <div className="hidden lg:flex flex-1 min-w-0 items-center justify-center px-4">
+          <div className={`hidden lg:flex flex-1 min-w-0 items-center ${hideBrandOnDesktop ? "justify-start pr-4" : "justify-center px-4"}`}>
             <div className="w-full max-w-[420px]">{centerContent}</div>
           </div>
         )}
@@ -169,7 +179,7 @@ export default function ITTopBar({
               <div className="relative">
                 <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",
                   }}
@@ -189,17 +199,30 @@ export default function ITTopBar({
                         src={userMenu.userImage}
                         alt="Current user"
                       />
+                    ) : flat && initials ? (
+                      <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)",
+                        }}
+                      >
+                        {initials}
+                      </div>
                     ) : (
                       <div className="w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center ring-2 ring-white shadow-sm">
                          <FaUserCircle className="w-6 h-6" style={{ color: "var(--it-topbar-icon, #94a3b8)" }} />
                       </div>
                     )}
                     {/* Active dot indicator */}
-                    <div className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></div>
+                    {!flat && (
+                      <div className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></div>
+                    )}
                   </div>
 
                   {/* Name Details */}
-                  <div className="hidden sm:flex flex-col text-left py-0.5">
+                  <div className={`hidden sm:flex flex-col py-0.5 ${flat ? "text-right" : "text-left"}`}>
                     <ITText as="span" 
                       className="font-semibold text-[0.85rem] leading-tight"
                       style={{ color: "var(--it-topbar-user-text, #0f172a)" }}

package/src/components/templates/layout/layout.props.ts

@@ -12,4 +12,12 @@ export interface ITLayoutProps {
   className?: string;
   /** Additional CSS classes for the content container */
   contentClassName?: string;
+  /**
+   * App-shell arrangement. `false` (default): the top bar spans the full width
+   * and the sidebar sits below it. `true`: the sidebar spans the full viewport
+   * height and shows the brand (`topBar.logo` + `topBar.logoText`) at its top,
+   * while the top bar covers only the content column and drops the logo from
+   * the `lg` breakpoint up. Mobile is unchanged. @default false
+   */
+  sidebarFullHeight?: boolean;
 } 

package/src/components/templates/layout/layout.tsx

@@ -4,6 +4,7 @@ import ITTopBar from "@/components/organisms/topbar/topbar";
 import ITSidebar from "@/components/organisms/sidebar/sidebar";
 import { ITLayoutProps } from "./layout.props";
 import { theme } from "@/theme/theme";
+import { useITFlatAppearance } from "@/theme/theme-context";
 
 /**
  * Main application shell with sidebar, topbar, and content area.
@@ -27,6 +28,16 @@ import { theme } from "@/theme/theme";
  * >
  *   <SettingsPage />
  * </ITLayout>
+ *
+ * @example
+ * // Full-height sidebar with the brand on top; the top bar covers only the content.
+ * <ITLayout
+ *   sidebarFullHeight
+ *   topBar={{ logo: <Logo />, logoText: "Acme", centerContent: <SearchBox /> }}
+ *   sidebar={{ navigationItems, isCollapsed: false }}
+ * >
+ *   <Dashboard />
+ * </ITLayout>
  */
 export default function ITLayout({
   topBar,
@@ -34,77 +45,113 @@ export default function ITLayout({
   children,
   className = "",
   contentClassName = "",
+  sidebarFullHeight = false,
 }: ITLayoutProps) {
   const [internalCollapsed, setInternalCollapsed] = useState(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const flat = useITFlatAppearance();
 
   const isControlled = sidebar.isCollapsed !== undefined;
   const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;
   const handleToggleCollapse = isControlled ? (sidebar.onToggleCollapse ?? (() => {})) : () => setInternalCollapsed(v => !v);
 
   const layoutTokens = theme.layout;
+  // Must match ITSidebar's own at-rest width (88px rail / 280px, 248px when flat).
+  const reservedWidth = desktopCollapsed ? "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
+  // With a full-height sidebar the brand moves from the top bar to the sidebar.
+  const brand = sidebarFullHeight
+    ? (sidebar.brand ?? { logo: topBar.logo, text: topBar.logoText })
+    : sidebar.brand;
 
-  return (
-    <div className={`flex flex-col h-screen overflow-hidden w-full ${className}`}>
-      <ITTopBar
-        {...topBar}
-        showMobileMenuButton
-        onToggleMobileMenu={() => setMobileSidebarOpen(v => !v)}
-      />
+  const topBarNode = (
+    <ITTopBar
+      {...topBar}
+      hideBrandOnDesktop={sidebarFullHeight || topBar.hideBrandOnDesktop}
+      showMobileMenuButton
+      onToggleMobileMenu={() => setMobileSidebarOpen(v => !v)}
+    />
+  );
 
+  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.
+    <div className={`hidden lg:block relative h-full ${sidebarFullHeight ? "z-50" : "z-40"}`}>
+      {/* Reserves the sidebar's at-rest width. When the sidebar is collapsed
+          (default), this is the 88px rail and hover expands over the content.
+          When controlled-expanded (`sidebar.isCollapsed === false`), it
+          reserves the full width so the sidebar never overlays content. */}
+      <div className={`${reservedWidth} h-full flex-shrink-0`} />
+      <div className="absolute top-0 left-0 h-full">
+        <ITSidebar
+          {...sidebar}
+          brand={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`}
+        />
+      </div>
+    </div>
+  );
+
+  const mobileSidebar = mobileSidebarOpen && (
+    <div
+      className="lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40"
+      onClick={() => setMobileSidebarOpen(false)}
+    >
       <div
-        className="flex flex-1 overflow-hidden relative"
+        className="h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ITSidebar
+          {...sidebar}
+          brand={brand}
+          isCollapsed={false}
+          visibleOnMobile={true}
+          className="h-full shadow-2xl relative z-[60]"
+          onToggleCollapse={() => setMobileSidebarOpen(false)}
+          onItemClick={() => setMobileSidebarOpen(false)}
+          onSubItemClick={() => setMobileSidebarOpen(false)}
+        />
+      </div>
+    </div>
+  );
+
+  const main = (
+    <main className="flex-1 overflow-y-auto w-full custom-scrollbar relative z-0">
+      <div className={clsx("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName)}>
+        {children}
+      </div>
+    </main>
+  );
+
+  if (sidebarFullHeight) {
+    return (
+      <div
+        className={`flex h-screen overflow-hidden w-full relative ${className}`}
         style={{ backgroundColor: layoutTokens.backgroundColor }}
       >
-        {/* DESKTOP SIDEBAR */}
-        <div className="hidden lg:block relative z-40 h-full">
-          {/* Reserves the sidebar's at-rest width. When the sidebar is collapsed
-              (default), this is the 88px rail and hover expands over the content.
-              When controlled-expanded (`sidebar.isCollapsed === false`), it
-              reserves the full 280px so the sidebar never overlays content. */}
-          <div
-            className={`${desktopCollapsed ? "w-[88px]" : "w-[280px]"} h-full flex-shrink-0`}
-          />
-          <div className="absolute top-0 left-0 h-full">
-            <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"
-            />
-          </div>
+        {desktopSidebar}
+        <div className="flex flex-col flex-1 min-w-0 overflow-hidden">
+          {topBarNode}
+          {main}
         </div>
+        {mobileSidebar}
+      </div>
+    );
+  }
 
-        {/* MOBILE SIDEBAR PANE */}
-        {mobileSidebarOpen && (
-          <div
-            className="lg:hidden fixed inset-0 z-[40] transition-opacity duration-300 backdrop-blur-sm bg-black/40"
-            onClick={() => setMobileSidebarOpen(false)}
-          >
-            <div
-              className="h-full w-fit flex transform transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)]"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <ITSidebar
-                {...sidebar}
-                isCollapsed={false}
-                visibleOnMobile={true}
-                className="h-full shadow-2xl relative z-[60]"
-                onToggleCollapse={() => setMobileSidebarOpen(false)}
-                onItemClick={() => setMobileSidebarOpen(false)}
-                onSubItemClick={() => setMobileSidebarOpen(false)}
-              />
-            </div>
-          </div>
-        )}
+  return (
+    <div className={`flex flex-col h-screen overflow-hidden w-full ${className}`}>
+      {topBarNode}
 
-        {/* MAIN CONTENT AREA */}
-        <main className="flex-1 overflow-y-auto w-full custom-scrollbar relative z-0">
-          <div className={clsx("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-6 h-full", contentClassName)}>
-            {children}
-          </div>
-        </main>
+      <div
+        className="flex flex-1 overflow-hidden relative"
+        style={{ backgroundColor: layoutTokens.backgroundColor }}
+      >
+        {desktopSidebar}
+        {mobileSidebar}
+        {main}
       </div>
     </div>
   );

package/src/components/theme-provider/themeProvider.doc.mdx

@@ -17,6 +17,7 @@ Root theme context that injects CSS custom properties into the entire component
 | `density` | `number` | `1` | Global density/compactness factor: values below `1` shrink base sizes (fonts, paddings, gaps), above `1` grow them. Applies by scaling the root font-size so every `rem`-based token compacts together while the layout stays fluid. Clamped to `0.5`–`1.5`. |
 | `radius` | `number` | — | Global border radius in **px** applied to the whole rounding scale. `2` ⇒ 2px corners (near-square), `8` ⇒ 8px, `0` ⇒ square. No override when omitted (Tailwind defaults). |
 | `shadow` | `number` | `2` | Global shadow strength level: `0` ⇒ none, `1` ⇒ subtle, `2` ⇒ default current look, `3` ⇒ pronounced. No override when omitted (keeps defaults). |
+| `appearance` | `"soft" \| "flat"` | `"soft"` | Visual language. `"flat"` switches `ITCard`, `ITSidebar`, `ITTopBar` and `ITPageHeader` to flat surfaces (hairline borders, no shadows, no header icon tile) and sets `data-it-appearance` on `<html>`. Read it in your own components with `useITFlatAppearance()`. |
 
 ### ITThemePalette Shape
 

package/src/components/theme-provider/themeProvider.props.ts

@@ -1,3 +1,7 @@
+import type { ITThemeAppearance } from "@/theme/theme.types";
+
+export type { ITThemeAppearance };
+
 export interface ITThemePalette {
   /** Main brand accent color (hex). Drives primary buttons, active nav items, focus rings, links, and the `--color-primary` CSS variable. @default "#06b6d4" */
   primary: string;
@@ -54,4 +58,6 @@ export interface ITThemeProviderProps {
   radius?: number;
   /** Global shadow strength level. `0` ⇒ no shadows, `1` ⇒ subtle, `2` ⇒ default current look, `3` ⇒ pronounced. Shadows are injected as `--shadow-*`/`.shadow-*` overrides so cards, dropdowns and dialogs follow the level. @default 2 (keeps current default when omitted) */
   shadow?: number;
+  /** Visual language of the whole system. `"soft"` keeps the current look (floating cards, tinted shadows, glass sidebar/top bar). `"flat"` switches the app shell and surfaces to flat ones: hairline borders instead of shadows on `ITCard`, a plain `ITSidebar` (no glow, no accent bar, narrower), a plain `ITTopBar` (no shadow, initials avatar) and a compact `ITPageHeader` without the icon tile. It also sets `data-it-appearance` on `<html>` so app CSS can follow it. Combine it with `shadow` and `radius` to finish the look. @default "soft" */
+  appearance?: ITThemeAppearance;
 }

package/src/components/theme-provider/themeProvider.tsx

@@ -73,7 +73,7 @@ import { DEFAULT_PALETTE, PRESETS } from "./themePresets";
 // Contexto y hooks (useITTheme / useITThemeSafe) viven en @/theme/theme-context.
 // Re-exportados desde aquí para mantener compatibilidad de la API pública.
 // eslint-disable-next-line react-refresh/only-export-components
-export { useITTheme, useITThemeSafe } from "@/theme/theme-context";
+export { useITTheme, useITThemeSafe, useITFlatAppearance } from "@/theme/theme-context";
 
 const getNestedValue = (obj: any, path: string) => {
   return path.split(".").reduce((acc, part) => acc && acc[part], obj);
@@ -143,6 +143,7 @@ export default function ITThemeProvider({
   density = 1,
   radius,
   shadow,
+  appearance = "soft",
 }: ITThemeProviderProps) {
   const [palette, setPaletteState] = useState<ITThemePalette>(() => {
     const basePalette = {
@@ -276,6 +277,14 @@ export default function ITThemeProvider({
     };
   }, [density]);
 
+  // Lenguaje visual: se publica en <html> para que el CSS de la app pueda
+  // seguirlo; los componentes lo leen del contexto (useITFlatAppearance).
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-it-appearance", appearance);
+    return () => root.removeAttribute("data-it-appearance");
+  }, [appearance]);
+
   // Overrides globales de radius y sombras.
   // Radius: en Tailwind v4 cada `rounded-*` resuelve a var(--radius-*), así que
   // setear los vars en :root (en px) cuadra/redondea todo el sistema sin tocar
@@ -1611,6 +1620,7 @@ export default function ITThemeProvider({
         resolvedTheme,
         darkModeMode,
         setDarkModeMode,
+        appearance,
       }}
     >
       {children}