@axzydev/axzy_ui_system 1.7.4 → 1.8.0

package/dist/index.cjs

@@ -146,6 +146,7 @@ __export(index_exports, {
   useDebouncedSearch: () => useDebouncedSearch,
   useEditableRow: () => useEditableRow,
   useFloatingPanel: () => useFloatingPanel,
+  useITAppearance: () => useITAppearance,
   useITFlatAppearance: () => useITFlatAppearance,
   useITTheme: () => useITTheme,
   useITThemeSafe: () => useITThemeSafe,
@@ -520,7 +521,7 @@ var buttonIconPadding = {
 
 // src/components/atoms/button/button.tsx
 var import_clsx = __toESM(require("clsx"), 1);
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/theme/theme.ts
 var inputSizeTokens = {
@@ -859,7 +860,7 @@ var components = {
   input: {
     backgroundColor: "var(--it-input-bg, #ffffff)",
     borderColor: `var(--it-input-border, ${semanticColors.gray[300]})`,
-    borderRadius: "var(--radius-md)",
+    borderRadius: "var(--it-input-radius, var(--radius-md))",
     focus: {
       borderColor: `var(--it-input-focus-border, ${semanticColors.primary[500]})`,
       ring: `var(--it-input-focus-ring, 0 0 0 3px ${semanticColors.primary[100]})`
@@ -1028,6 +1029,26 @@ function ITText({
   );
 }
 
+// src/theme/theme-context.ts
+var import_react6 = require("react");
+var ITThemeContext = (0, import_react6.createContext)(void 0);
+var useITTheme = () => {
+  const context = (0, import_react6.useContext)(ITThemeContext);
+  if (!context) {
+    throw new Error("useITTheme must be used within an ITThemeProvider");
+  }
+  return context;
+};
+var useITThemeSafe = () => {
+  return (0, import_react6.useContext)(ITThemeContext);
+};
+var useITAppearance = () => {
+  return (0, import_react6.useContext)(ITThemeContext)?.appearance ?? "soft";
+};
+var useITFlatAppearance = () => {
+  return useITAppearance() === "flat";
+};
+
 // src/components/atoms/button/button.tsx
 var import_jsx_runtime2 = (
   // Icono solo: sin wrapper con `gap` ni `ITText` vacío, que lo desplazaban a la izquierda.
@@ -1047,8 +1068,9 @@ function ITButton({
   ariaLabel,
   title
 }) {
-  const [isHovered, setIsHovered] = (0, import_react6.useState)(false);
-  const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react7.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
+  const bento = useITAppearance() === "bento";
   const isIconOnly = variant === "icon-only";
   const isIconOnlyContent = isIconOnly && Boolean(icon) && !children;
   const themeBtn = theme.button;
@@ -1068,6 +1090,9 @@ function ITButton({
       // Default from theme
       transition: themeConfig.transition || "all 0.2s"
     };
+    if (bento) {
+      style.borderRadius = `var(--it-bento-pill-radius, ${themeConfig.borderRadius})`;
+    }
     if (variant === "rounded") {
       style.borderRadius = "9999px";
     }
@@ -1133,23 +1158,6 @@ function ITButton({
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_react11 = require("react");
 
-// src/theme/theme-context.ts
-var import_react7 = require("react");
-var ITThemeContext = (0, import_react7.createContext)(void 0);
-var useITTheme = () => {
-  const context = (0, import_react7.useContext)(ITThemeContext);
-  if (!context) {
-    throw new Error("useITTheme must be used within an ITThemeProvider");
-  }
-  return context;
-};
-var useITThemeSafe = () => {
-  return (0, import_react7.useContext)(ITThemeContext);
-};
-var useITFlatAppearance = () => {
-  return (0, import_react7.useContext)(ITThemeContext)?.appearance === "flat";
-};
-
 // src/i18n/provider.tsx
 var import_react9 = require("react");
 
@@ -1656,6 +1664,7 @@ function useITTranslation() {
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function ITCard({
   title,
+  tone,
   headerActions,
   image,
   alt,
@@ -1670,26 +1679,35 @@ function ITCard({
 }) {
   const { t } = useITTranslation();
   const [isHovered, setIsHovered] = (0, import_react11.useState)(false);
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat";
   const resolvedAlt = alt ?? t("card.imageAlt");
   const containerStyle = {
     backgroundColor: "var(--it-card-bg, #ffffff)",
-    borderColor: flat ? "var(--it-card-flat-border, var(--color-secondary-200))" : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
-    borderWidth: "1px",
+    borderColor: bento ? "transparent" : flat ? "var(--it-card-flat-border, var(--color-secondary-200))" : "var(--it-card-border, rgba(15, 23, 42, 0.06))",
+    borderWidth: bento ? "0px" : "1px",
     borderStyle: "solid",
-    borderRadius: flat ? "var(--it-card-radius, var(--radius-lg))" : "var(--it-card-radius, var(--radius-2xl))",
+    borderRadius: bento ? "var(--it-card-radius, var(--it-bento-card-radius, var(--radius-2xl)))" : 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.
     // 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)",
+    // Bento: borderless, a diffuse shadow at rest and a stronger one on hover.
+    boxShadow: bento ? onClick && isHovered ? "var(--it-bento-card-shadow-hover, var(--shadow-lg))" : "var(--it-bento-card-shadow, var(--shadow-sm))" : 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 && !flat ? "translateY(-2px)" : "translateY(0)",
+    transform: onClick && isHovered && !flat && !bento ? "translateY(-2px)" : "translateY(0)",
     cursor: onClick ? "pointer" : "default"
   };
+  if (tone) {
+    const soft = `var(--color-${tone}-soft)`;
+    containerStyle.backgroundImage = `linear-gradient(${soft}, ${soft})`;
+    if (!bento) containerStyle.borderColor = `var(--color-${tone}-soft-border)`;
+  }
   const bodyStyle = {
-    padding: "1.25rem"
+    padding: bento ? "var(--it-bento-card-padding, 1.5rem)" : "1.25rem"
   };
+  const titleTypography = bento ? "text-lg font-bold" : flat ? "text-base font-semibold" : "text-xl font-semibold";
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
@@ -1721,7 +1739,7 @@ function ITCard({
               ITText,
               {
                 as: "h3",
-                className: (0, import_clsx2.default)(flat ? "text-base font-semibold" : "text-xl font-semibold", titleClassName),
+                className: (0, import_clsx2.default)(titleTypography, titleClassName),
                 children: title
               }
             ),
@@ -1730,7 +1748,7 @@ function ITCard({
             ITText,
             {
               as: "h3",
-              className: (0, import_clsx2.default)(flat ? "text-base font-semibold mb-3" : "text-xl font-semibold mb-2", titleClassName),
+              className: (0, import_clsx2.default)(titleTypography, flat ? "mb-3" : bento ? "mb-4" : "mb-2", titleClassName),
               children: title
             }
           ) : null,
@@ -3172,6 +3190,7 @@ function ITChipInput({
     style.alignItems = "center";
     style.gap = "0.375rem";
     style.minHeight = "2.5rem";
+    style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
@@ -3568,6 +3587,9 @@ function ITInput({
   const inputTheme = theme.input || {};
   const getStyle = () => {
     const style = inputFieldStyle(inputTheme, size);
+    if (isTextArea) {
+      style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
+    }
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
@@ -4250,6 +4272,7 @@ function ITMultiSelect({
     style.alignItems = "center";
     style.gap = "0.375rem";
     style.minHeight = "2.5rem";
+    style.borderRadius = "var(--it-bento-field-radius, var(--radius-md))";
     if (disabled) {
       style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
       style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
@@ -7471,7 +7494,9 @@ function ITPageHeader({
 }) {
   const { t } = useITTranslation();
   const showTopRow = breadcrumbs?.length || backAction;
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat";
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: `${className} space-y-3`, children: [
     showTopRow && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
@@ -7479,7 +7504,8 @@ function ITPageHeader({
           "button",
           {
             onClick: backAction,
-            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",
+            className: bento ? "flex items-center justify-center w-10 h-10 rounded-full hover:opacity-80 transition-opacity duration-200 flex-shrink-0" : "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",
+            style: bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", color: "var(--it-bento-control-text, #475569)" } : void 0,
             "aria-label": t("pageHeader.back"),
             children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_fa21.FaChevronLeft, { size: 14 })
           }
@@ -7490,7 +7516,7 @@ function ITPageHeader({
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-start justify-between gap-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-start gap-4 min-w-0", children: [
-        icon && !flat && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        icon && !flat && !bento && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "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",
@@ -7503,7 +7529,7 @@ function ITPageHeader({
             ITText,
             {
               as: "h1",
-              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",
+              className: bento ? "text-3xl font-bold text-slate-900 dark:text-white tracking-tighter leading-tight" : 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
             }
           ),
@@ -7511,7 +7537,7 @@ function ITPageHeader({
             ITText,
             {
               as: "p",
-              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",
+              className: bento ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed" : 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
             }
           )
@@ -8423,16 +8449,19 @@ function ITSegmentedControl({
   disabled = false
 }) {
   const { button, container } = sizeMap3[size];
+  const bento = useITAppearance() === "bento";
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       role: "group",
       className: (0, import_clsx40.default)(
-        "inline-flex rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
+        "inline-flex",
+        bento ? "rounded-full" : "rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
         container,
         disabled && "opacity-50 cursor-not-allowed",
         className
       ),
+      style: bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)" } : void 0,
       children: options.map((opt) => {
         const isActive = opt.value === value;
         return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
@@ -8444,10 +8473,14 @@ function ITSegmentedControl({
             disabled,
             className: (0, import_clsx40.default)(
               button,
-              "rounded-lg font-semibold transition-all flex items-center gap-1.5",
-              isActive ? "bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600" : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent",
+              "font-semibold transition-all flex items-center gap-1.5",
+              bento ? "rounded-full border border-transparent" : isActive ? "rounded-lg bg-white dark:bg-slate-700 text-slate-800 dark:text-white shadow-sm border border-slate-200 dark:border-slate-600" : "rounded-lg text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent",
               disabled && "pointer-events-none"
             ),
+            style: bento ? {
+              backgroundColor: isActive ? "var(--it-bento-ink-bg, #0f172a)" : "transparent",
+              color: isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)"
+            } : void 0,
             children: [
               opt.icon && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: opt.icon }),
               /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ITText, { as: "span", children: opt.label })
@@ -8500,7 +8533,9 @@ function ITSidebar({
   onToggleCollapse,
   expandOnHover = true
 }) {
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat" || bento;
   const { t } = useITTranslation();
   const [expandedItems, setExpandedItems] = (0, import_react41.useState)(/* @__PURE__ */ new Set());
   const [isHovering, setIsHovering] = (0, import_react41.useState)(false);
@@ -8592,7 +8627,7 @@ function ITSidebar({
         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: flat ? "0.84rem" : "0.78rem",
-        fontWeight: subitem.isActive ? 600 : 500,
+        fontWeight: subitem.isActive ? bento ? 700 : 600 : 500,
         letterSpacing: "0.01em",
         marginLeft: subitemConnector === "|" ? "-1px" : "0"
       },
@@ -8749,7 +8784,7 @@ function ITSidebar({
       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))",
+        borderRight: bento ? "none" : "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
         ...flat ? {} : { WebkitBackdropFilter: "blur(12px)", backdropFilter: "blur(12px)" }
       },
       children: [
@@ -8843,7 +8878,7 @@ function ITSidebar({
                         style: {
                           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"
+                          fontWeight: active ? bento ? "700" : "600" : "500"
                         },
                         children: item.label
                       }
@@ -10006,6 +10041,7 @@ var ITTabs = ({
   className = "",
   containerClassName = ""
 }) => {
+  const bento = useITAppearance() === "bento" && variant === "pill";
   const [activeId, setActiveId] = (0, import_react46.useState)(defaultActiveId || items[0]?.id);
   const handleTabClick = (id, disabled) => {
     if (disabled) return;
@@ -10014,39 +10050,50 @@ var ITTabs = ({
   };
   const activeContent = items.find((item) => item.id === activeId)?.content;
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: (0, import_clsx47.clsx)("w-full", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: (0, import_clsx47.clsx)(
-      "flex border-secondary-200 mb-4",
-      variant === "line" ? "border-b" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
-      className
-    ), children: items.map((item) => {
-      const isActive = item.id === activeId;
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
-        "button",
-        {
-          onClick: () => handleTabClick(item.id, item.disabled),
-          disabled: item.disabled,
-          className: (0, import_clsx47.clsx)(
-            "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none",
-            // LINE VARIANT
-            variant === "line" && [
-              "border-b-2 -mb-[2px]",
-              isActive ? "border-primary-500 text-primary-600" : "border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300"
-            ],
-            // PILL VARIANT
-            variant === "pill" && [
-              "rounded-md",
-              isActive ? "bg-white text-primary-600 shadow-sm" : "text-secondary-500 hover:text-secondary-700"
-            ],
-            item.disabled && "opacity-50 cursor-not-allowed"
-          ),
-          children: [
-            item.icon && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "w-4 h-4", children: item.icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ITText, { as: "span", children: item.label })
-          ]
-        },
-        item.id
-      );
-    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      "div",
+      {
+        className: (0, import_clsx47.clsx)(
+          "flex border-secondary-200 mb-4",
+          variant === "line" ? "border-b" : bento ? "gap-2 p-1 rounded-full w-fit" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
+          className
+        ),
+        style: bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", borderColor: "transparent" } : void 0,
+        children: items.map((item) => {
+          const isActive = item.id === activeId;
+          return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+            "button",
+            {
+              onClick: () => handleTabClick(item.id, item.disabled),
+              disabled: item.disabled,
+              className: (0, import_clsx47.clsx)(
+                "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none",
+                // LINE VARIANT
+                variant === "line" && [
+                  "border-b-2 -mb-[2px]",
+                  isActive ? "border-primary-500 text-primary-600" : "border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300"
+                ],
+                // PILL VARIANT
+                variant === "pill" && (bento ? "rounded-full" : [
+                  "rounded-md",
+                  isActive ? "bg-white text-primary-600 shadow-sm" : "text-secondary-500 hover:text-secondary-700"
+                ]),
+                item.disabled && "opacity-50 cursor-not-allowed"
+              ),
+              style: bento ? {
+                backgroundColor: isActive ? "var(--it-bento-ink-bg, #0f172a)" : "transparent",
+                color: isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)"
+              } : void 0,
+              children: [
+                item.icon && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "w-4 h-4", children: item.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ITText, { as: "span", children: item.label })
+              ]
+            },
+            item.id
+          );
+        })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "tab-content animate-fadeIn", children: activeContent })
   ] });
 };
@@ -12511,6 +12558,11 @@ var AXZY_CATALOG_ENTRIES = [
     summary: "Tarjeta con t\xEDtulo, imagen y contenido.",
     props: {
       title: { kind: "string" },
+      tone: {
+        kind: "enum",
+        values: ["primary", "secondary", "ternary", "success", "info", "warning", "danger"],
+        doc: "Tinte pastel de la tarjeta (token --color-<tone>-soft)."
+      },
       image: { kind: "string", doc: "URL de la imagen de cabecera." },
       alt: { kind: "string" },
       onClick: { kind: "action" },
@@ -15164,9 +15216,13 @@ function ITTopBar({
   hideBrandOnDesktop = false,
   showDesktopMenuButton = false
 }) {
-  const flat = useITFlatAppearance();
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat" || bento;
   const { t } = useITTranslation();
   const initials = (userMenu?.userName ?? "").trim().split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
+  const userRestBg = bento ? "var(--it-bento-control-bg, #f1f5f9)" : "transparent";
+  const userHoverBg = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)";
   const [isUserMenuOpen, setIsUserMenuOpen] = (0, import_react59.useState)(false);
   const userMenuRef = (0, import_react59.useRef)(null);
   useClickOutside_default(userMenuRef, () => setIsUserMenuOpen(false));
@@ -15175,8 +15231,8 @@ function ITTopBar({
     {
       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))",
+        backgroundColor: bento ? "var(--it-layout-bg, #f4f4f6)" : "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
+        borderBottom: bento ? "none" : "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
         boxShadow: flat ? "none" : "var(--shadow-xs)"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `flex items-center justify-between px-6 lg:px-8 ${flat ? "h-[64px]" : "h-[72px]"}`, children: [
@@ -15186,12 +15242,13 @@ function ITTopBar({
             {
               type: "button",
               "aria-label": t("common.menu"),
-              className: `${showDesktopMenuButton ? "" : "lg:hidden"} p-2.5 -ml-2.5 rounded-xl transition-colors duration-200`,
+              className: `${showDesktopMenuButton ? "" : "lg:hidden"} ${bento ? "w-10 h-10 flex items-center justify-center rounded-full" : "p-2.5 -ml-2.5 rounded-xl"} transition-colors duration-200`,
               style: {
-                color: "var(--it-topbar-icon, #64748b)"
+                color: bento ? "var(--it-bento-control-text, #475569)" : "var(--it-topbar-icon, #64748b)",
+                backgroundColor: bento ? "var(--it-bento-control-bg, #f1f5f9)" : void 0
               },
-              onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)",
-              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
+              onMouseEnter: (e) => e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)",
+              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg, #f1f5f9)" : "transparent",
               onClick: onToggleMobileMenu,
               children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_fa32.FaBars, { className: "w-[1.125rem] h-[1.125rem]" })
             }
@@ -15208,27 +15265,40 @@ function ITTopBar({
               }
             )
           ] }),
-          navItems && navItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("nav", { className: "hidden md:flex ml-8 space-x-1 border-l pl-8", style: { borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" }, children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-            "button",
+          navItems && navItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            "nav",
             {
-              onClick: () => onNavItemClick?.(item.id),
-              className: "px-4 py-2 rounded-lg font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]",
-              style: { color: "var(--it-topbar-text, #475569)" },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.color = "var(--it-topbar-text, #0f172a)";
-                e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.color = "var(--it-topbar-text, #475569)";
-                e.currentTarget.style.backgroundColor = "transparent";
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-2", children: [
-                item.icon && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "opacity-70", children: item.icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ITText, { as: "span", children: item.label })
-              ] })
-            },
-            item.id
-          )) })
+              className: bento ? "hidden md:flex ml-4 gap-2" : "hidden md:flex ml-8 space-x-1 border-l pl-8",
+              style: bento ? void 0 : { borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" },
+              children: navItems.map((item) => {
+                const restBg = bento ? item.isActive ? "var(--it-bento-ink-bg, #0f172a)" : "var(--it-bento-control-bg, #f1f5f9)" : item.isActive ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent";
+                const restColor = bento ? item.isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)" : "var(--it-topbar-text, #475569)";
+                return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                  "button",
+                  {
+                    onClick: () => onNavItemClick?.(item.id),
+                    "aria-current": item.isActive ? "page" : void 0,
+                    className: `px-4 py-2 ${bento ? "rounded-full" : "rounded-lg"} font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]`,
+                    style: { color: restColor, backgroundColor: restBg },
+                    onMouseEnter: (e) => {
+                      if (bento && item.isActive) return;
+                      e.currentTarget.style.color = bento ? "var(--it-bento-control-text, #0f172a)" : "var(--it-topbar-text, #0f172a)";
+                      e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.color = restColor;
+                      e.currentTarget.style.backgroundColor = restBg;
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "opacity-70", children: item.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ITText, { as: "span", children: item.label })
+                    ] })
+                  },
+                  item.id
+                );
+              })
+            }
+          )
         ] }),
         centerContent && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `hidden lg:flex flex-1 min-w-0 items-center ${hideBrandOnDesktop ? "justify-start pr-4" : "justify-center px-4"}`, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full max-w-[420px]", children: centerContent }) }),
         (children || userMenu) && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -15238,15 +15308,15 @@ function ITTopBar({
               "button",
               {
                 type: "button",
-                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"}`,
+                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 ${bento ? "" : "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"
+                  backgroundColor: isUserMenuOpen ? userHoverBg : userRestBg
                 },
                 onMouseEnter: (e) => {
-                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
+                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = userHoverBg;
                 },
                 onMouseLeave: (e) => {
-                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "transparent";
+                  if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = userRestBg;
                 },
                 onClick: () => setIsUserMenuOpen(!isUserMenuOpen),
                 children: [
@@ -15358,7 +15428,7 @@ function ITLayout({
 }) {
   const [internalCollapsed, setInternalCollapsed] = (0, import_react60.useState)(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = (0, import_react60.useState)(false);
-  const flat = useITFlatAppearance();
+  const flat = useITAppearance() !== "soft";
   const isControlled = sidebar.isCollapsed !== void 0;
   const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;
   const handleToggleCollapse = isControlled ? sidebar.onToggleCollapse ?? (() => {
@@ -16084,6 +16154,32 @@ function ITThemeProvider({
       surfaceStyle?.remove();
     };
   }, [radius, shadow]);
+  (0, import_react62.useLayoutEffect)(() => {
+    const STYLE_ID = "it-theme-bento-tokens";
+    let tag = document.getElementById(STYLE_ID);
+    if (appearance !== "bento") {
+      tag?.remove();
+      return;
+    }
+    if (!tag) {
+      tag = document.createElement("style");
+      tag.id = STYLE_ID;
+      document.head.appendChild(tag);
+    }
+    const hasRadius = typeof radius === "number" && isFinite(radius);
+    const hasShadow = shadowLevel(shadow) !== null;
+    const shapeLight = hasRadius ? "" : "--it-bento-card-radius:24px;--it-bento-pill-radius:9999px;--it-bento-field-radius:1rem;--it-input-radius:var(--it-bento-pill-radius);";
+    const shadowLight = hasShadow ? "" : "--it-bento-card-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -16px rgba(16,24,40,.10);--it-bento-card-shadow-hover:0 1px 2px rgba(16,24,40,.06),0 18px 40px -16px rgba(16,24,40,.18);";
+    const shadowDark = hasShadow ? "" : "--it-bento-card-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -16px rgba(0,0,0,.55);--it-bento-card-shadow-hover:0 1px 2px rgba(0,0,0,.5),0 18px 40px -16px rgba(0,0,0,.7);";
+    const navTokens = "--it-sidebar-active-bg:var(--it-bento-nav-active-bg);--it-sidebar-active-color:var(--it-bento-nav-active-text);--it-sidebar-active-icon:var(--it-bento-nav-active-text);";
+    const light = "--it-layout-bg:#f4f4f6;--it-card-bg:#ffffff;--it-bento-card-padding:1.5rem;--it-input-bg:#f1f5f9;--it-input-border:transparent;--it-input-focus-ring:0 0 0 2px color-mix(in srgb,var(--color-primary) 50%,transparent);--it-bento-control-bg:#f1f5f9;--it-bento-control-bg-hover:#e2e8f0;--it-bento-control-text:#475569;--it-bento-ink-bg:#0f172a;--it-bento-ink-text:#ffffff;--it-bento-nav-active-bg:#f1f5f9;--it-bento-nav-active-text:#0f172a;" + navTokens;
+    const dark = "--it-layout-bg:#020617;--it-card-bg:#0f172a;--it-input-bg:#1e293b;--it-input-border:transparent;--it-bento-control-bg:#1e293b;--it-bento-control-bg-hover:#334155;--it-bento-control-text:#cbd5e1;--it-bento-ink-bg:#ffffff;--it-bento-ink-text:#0f172a;--it-bento-nav-active-bg:#1e293b;--it-bento-nav-active-text:#ffffff;" + navTokens;
+    const A = '[data-it-appearance="bento"]';
+    tag.textContent = `:root${A}{${light}${shapeLight}${shadowLight}}:root${A}.dark,:root${A} .dark,:root${A} [data-theme="dark"]{${dark}${shadowDark}}:root${A} [data-theme="light"]{${light}${shadowLight}}`;
+    return () => {
+      tag?.remove();
+    };
+  }, [appearance, radius, shadow]);
   (0, import_react62.useEffect)(() => {
     const injectStyles = (obj, prefix = "") => {
       Object.entries(obj).forEach(([key, val]) => {
@@ -17641,6 +17737,7 @@ var createValidationSchema = (fields) => Yup.object().shape(
   useDebouncedSearch,
   useEditableRow,
   useFloatingPanel,
+  useITAppearance,
   useITFlatAppearance,
   useITTheme,
   useITThemeSafe,