@axzydev/axzy_ui_system 1.4.2 → 1.4.3

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,10 @@ function ITSidebar({
   onSubItemClick,
   subitemConnector = "dot",
   header,
-  notification
+  notification,
+  brand
 }) {
+  const flat = useITFlatAppearance();
   const [expandedItems, setExpandedItems] = useState27(/* @__PURE__ */ new Set());
   const [isHovering, setIsHovering] = useState27(false);
   const sidebarRef = useRef20(null);
@@ -7665,7 +7677,7 @@ 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) => /* @__PURE__ */ jsx56("li", { className: "relative", children: /* @__PURE__ */ jsxs43(
     "button",
     {
@@ -7831,16 +7843,33 @@ 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) => {
@@ -7863,8 +7892,8 @@ 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))";
@@ -7880,7 +7909,7 @@ function ITSidebar({
                   }
                 },
                 children: [
-                  item.isActive && !isSidebarCollapsed && /* @__PURE__ */ jsx56(
+                  item.isActive && !isSidebarCollapsed && !flat && /* @__PURE__ */ jsx56(
                     "div",
                     {
                       className: "absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all",
@@ -7895,8 +7924,8 @@ 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"
                         },
                         children: item.icon
                       }
@@ -7908,7 +7937,7 @@ 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"
                         },
                         children: item.label
@@ -9995,21 +10024,24 @@ function ITTopBar({
   showMobileMenuButton,
   onToggleMobileMenu,
   navItems,
-  onNavItemClick
+  onNavItemClick,
+  hideBrandOnDesktop = 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",
@@ -10024,7 +10056,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 +10090,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 +10098,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 +10118,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 +10213,102 @@ 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 ? "w-[88px]" : flat ? "w-[248px]" : "w-[280px]";
+  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,
+      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.
+    /* @__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 +10868,8 @@ function ITThemeProvider({
   showFab = true,
   density = 1,
   radius,
-  shadow
+  shadow,
+  appearance = "soft"
 }) {
   const [palette2, setPaletteState] = useState38(() => {
     const basePalette = {
@@ -10911,6 +10982,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 +12268,8 @@ function ITThemeProvider({
         applyPreset,
         resolvedTheme,
         darkModeMode,
-        setDarkModeMode
+        setDarkModeMode,
+        appearance
       },
       children: [
         children,
@@ -12452,6 +12529,7 @@ export {
   useDebouncedSearch,
   useEditableRow,
   useFloatingPanel,
+  useITFlatAppearance,
   useITTheme,
   useITThemeSafe,
   useTableState