@inf-monkeys-tech/monkeys-design 1.0.6 → 1.0.7

package/dist/components/layout/index.mjs

@@ -2255,6 +2255,93 @@ var BaseTooltip = forwardRef(
     );
   }
 );
+var rootTokenStyles = {
+  width: "var(--monkeys-component-app-shell-sidebar-width, 16rem)",
+  borderRadius: "var(--monkeys-component-app-shell-sidebar-radius, var(--radius, 0.75rem))",
+  background: "var(--monkeys-component-app-shell-sidebar-background, hsl(var(--card)))",
+  color: "var(--monkeys-component-app-shell-sidebar-foreground, hsl(var(--card-foreground)))",
+  borderColor: "var(--monkeys-component-app-shell-sidebar-border-color, hsl(var(--border)))",
+  boxShadow: "var(--monkeys-component-app-shell-sidebar-shadow, none)"
+};
+var headerTokenStyles = {
+  padding: "var(--monkeys-component-app-shell-sidebar-header-padding, var(--global-spacing, 0.75rem))",
+  borderColor: "var(--monkeys-component-app-shell-sidebar-header-border-color, hsl(var(--border)))"
+};
+var navigationTokenStyles = {
+  padding: "var(--monkeys-component-app-shell-sidebar-navigation-padding, var(--global-spacing, 0.75rem))",
+  "--monkeys-component-accordion-item-border-color": "transparent"
+};
+var footerTokenStyles = {
+  padding: "var(--monkeys-component-app-shell-sidebar-footer-padding, var(--global-spacing, 0.75rem))",
+  background: "var(--monkeys-component-app-shell-sidebar-footer-background, hsl(var(--muted) / 0.22))",
+  borderColor: "var(--monkeys-component-app-shell-sidebar-footer-border-color, hsl(var(--border)))"
+};
+var AppShellSidebar = forwardRef(
+  function AppShellSidebar2({
+    navigation,
+    header,
+    footer,
+    width,
+    className,
+    classNames,
+    style,
+    "aria-label": ariaLabel = "Application navigation",
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        "data-app-shell-sidebar": "",
+        className: cn(
+          "relative isolate flex h-full min-h-0 shrink-0 flex-col overflow-hidden border",
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...rootTokenStyles,
+          ...width === void 0 ? null : { width },
+          ...style
+        },
+        ...props,
+        children: [
+          header ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "header",
+              className: cn("shrink-0 border-b", classNames?.header),
+              style: headerTokenStyles,
+              children: header
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "navigation",
+              className: cn(
+                "relative min-h-0 flex-1 overflow-hidden",
+                classNames?.navigation
+              ),
+              style: navigationTokenStyles,
+              children: navigation
+            }
+          ),
+          footer ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "footer",
+              className: cn("shrink-0 border-t", classNames?.footer),
+              style: footerTokenStyles,
+              children: footer
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+AppShellSidebar.displayName = "AppShellSidebar";
 var defaultAppearance = {
   preset: "soft",
   density: "compact",
@@ -2529,7 +2616,14 @@ function UserAccountMenu({
 function cn2(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
-function NavButton({ active, icon, postfix, onClick, className, children }) {
+function NavButton({
+  active,
+  icon,
+  postfix,
+  onClick,
+  className,
+  children
+}) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2581,7 +2675,14 @@ function AppHeader({
                     "flex h-8 w-8 items-center justify-center rounded-lg overflow-hidden",
                     logo.url ? "bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
                   ),
-                  children: logo.url ? /* @__PURE__ */ jsx("img", { src: logo.url, alt: logo.title, className: "h-full w-full object-contain" }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: logo.title.charAt(0) })
+                  children: logo.url ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: logo.url,
+                      alt: logo.title,
+                      className: "h-full w-full object-contain"
+                    }
+                  ) : /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: logo.title.charAt(0) })
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold whitespace-nowrap", children: logo.title })
@@ -2607,7 +2708,14 @@ function AppHeader({
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [
           extra,
           user && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-            /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "flex h-8 w-8 items-center justify-center rounded-full hover:ring-2 hover:ring-[hsl(var(--ring))]/20 transition-all overflow-hidden focus-visible:outline-none", children: user.photo ? /* @__PURE__ */ jsx("img", { src: user.photo, alt: user.name, className: "h-8 w-8 rounded-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-xs font-medium", children: user.name ? getUserInitials(user.name) : "U" }) }) }),
+            /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "flex h-8 w-8 items-center justify-center rounded-full hover:ring-2 hover:ring-[hsl(var(--ring))]/20 transition-all overflow-hidden focus-visible:outline-none", children: user.photo ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: user.photo,
+                alt: user.name,
+                className: "h-8 w-8 rounded-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-xs font-medium", children: user.name ? getUserInitials(user.name) : "U" }) }) }),
             /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(
               DropdownMenu.Content,
               {
@@ -2616,7 +2724,14 @@ function AppHeader({
                 align: "end",
                 children: [
                   /* @__PURE__ */ jsxs(DropdownMenu.Label, { className: "flex items-center gap-2 px-2 py-1.5 font-normal", children: [
-                    user.photo ? /* @__PURE__ */ jsx("img", { src: user.photo, alt: user.name, className: "h-8 w-8 rounded-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-xs font-medium", children: user.name ? getUserInitials(user.name) : "U" }),
+                    user.photo ? /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: user.photo,
+                        alt: user.name,
+                        className: "h-8 w-8 rounded-full object-cover"
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-xs font-medium", children: user.name ? getUserInitials(user.name) : "U" }),
                     /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
                       /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-none", children: user.name }),
                       user.email && /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))] leading-none mt-1", children: user.email })
@@ -2631,11 +2746,25 @@ function AppHeader({
                         className: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-[hsl(var(--destructive))] outline-none transition-colors hover:bg-[hsl(var(--accent))]",
                         onSelect: () => onLogout?.(),
                         children: [
-                          /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                            /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
-                            /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7" }),
-                            /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
-                          ] }),
+                          /* @__PURE__ */ jsxs(
+                            "svg",
+                            {
+                              xmlns: "http://www.w3.org/2000/svg",
+                              width: "16",
+                              height: "16",
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: "1.5",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              children: [
+                                /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+                                /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7" }),
+                                /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+                              ]
+                            }
+                          ),
                           logoutLabel
                         ]
                       }
@@ -2670,19 +2799,33 @@ function AppSidebar({
         className
       ),
       children: [
-        logo && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 cursor-pointer items-center gap-2", onClick: logo.onClick, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn2(
-                "flex h-8 w-8 items-center justify-center rounded-lg overflow-hidden",
-                logo.url ? "bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+        logo && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex shrink-0 cursor-pointer items-center gap-2",
+            onClick: logo.onClick,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn2(
+                    "flex h-8 w-8 items-center justify-center rounded-lg overflow-hidden",
+                    logo.url ? "bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+                  ),
+                  children: logo.url ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: logo.url,
+                      alt: logo.title,
+                      className: "h-full w-full object-contain"
+                    }
+                  ) : /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: logo.title.charAt(0) })
+                }
               ),
-              children: logo.url ? /* @__PURE__ */ jsx("img", { src: logo.url, alt: logo.title, className: "h-full w-full object-contain" }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: logo.title.charAt(0) })
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold whitespace-nowrap", children: logo.title })
-        ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold whitespace-nowrap", children: logo.title })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           SidebarNavList,
           {
@@ -2695,7 +2838,14 @@ function AppSidebar({
         (account || footer) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
           account && /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-2 rounded-lg bg-[hsl(var(--muted))] p-2 shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between px-3 py-1", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              account.photo ? /* @__PURE__ */ jsx("img", { src: account.photo, alt: account.name, className: "h-5 w-5 rounded-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-[10px] font-medium", children: account.name ? account.name.charAt(0).toUpperCase() : "U" }),
+              account.photo ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: account.photo,
+                  alt: account.name,
+                  className: "h-5 w-5 rounded-full object-cover"
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-[10px] font-medium", children: account.name ? account.name.charAt(0).toUpperCase() : "U" }),
               /* @__PURE__ */ jsx("span", { className: "text-xs font-medium truncate max-w-[100px]", children: account.name })
             ] }),
             onLogout && /* @__PURE__ */ jsx(
@@ -2704,11 +2854,25 @@ function AppSidebar({
                 onClick: onLogout,
                 className: "flex items-center justify-center text-[hsl(var(--destructive))] hover:opacity-80 transition-opacity",
                 title: logoutLabel,
-                children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
-                  /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7" }),
-                  /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
-                ] })
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+                      /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7" }),
+                      /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+                    ]
+                  }
+                )
               }
             )
           ] }) }),
@@ -2718,7 +2882,12 @@ function AppSidebar({
     }
   );
 }
-function SidebarNavList({ items, activeItemId, onNavigate, defaultExpandedGroups }) {
+function SidebarNavList({
+  items,
+  activeItemId,
+  onNavigate,
+  defaultExpandedGroups
+}) {
   const [expanded, setExpanded] = useState(() => {
     const map = {};
     (defaultExpandedGroups ?? items.map((i) => i.id)).forEach((id) => {
@@ -2733,84 +2902,115 @@ function SidebarNavList({ items, activeItemId, onNavigate, defaultExpandedGroups
     }
   }, [activeItemId]);
   const toggle = (id) => {
-    setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
+    setExpanded((prev) => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
   };
   const resolvedActiveItemId = activeItemId ?? localActiveItemId;
-  return /* @__PURE__ */ jsxs("div", { className: "h-full flex-1 overflow-y-auto", style: { scrollbarWidth: "none", msOverflowStyle: "none" }, children: [
-    /* @__PURE__ */ jsx("style", { children: `.monkeys-sidebar-nav::-webkit-scrollbar { display: none; }` }),
-    /* @__PURE__ */ jsx("div", { className: "monkeys-sidebar-nav flex w-full flex-col gap-2 text-xs text-[hsl(var(--foreground))]", children: items.map((item) => {
-      if (item.children && item.children.length > 0) {
-        const isExpanded = expanded[item.id] ?? true;
-        return /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            NavButton,
-            {
-              icon: item.icon,
-              onClick: () => toggle(item.id),
-              postfix: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
-                "svg",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "h-full flex-1 overflow-y-auto",
+      style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `.monkeys-sidebar-nav::-webkit-scrollbar { display: none; }` }),
+        /* @__PURE__ */ jsx("div", { className: "monkeys-sidebar-nav flex w-full flex-col gap-2 text-xs text-[hsl(var(--foreground))]", children: items.map((item) => {
+          if (item.children && item.children.length > 0) {
+            const isExpanded = expanded[item.id] ?? true;
+            return /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                NavButton,
                 {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  className: "shrink-0 text-[hsl(var(--foreground))] transition-transform duration-200",
-                  style: { transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" },
-                  children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+                  icon: item.icon,
+                  onClick: () => toggle(item.id),
+                  postfix: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "shrink-0 text-[hsl(var(--foreground))] transition-transform duration-200",
+                      style: {
+                        transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
+                      },
+                      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+                    }
+                  ) }),
+                  children: item.label
                 }
-              ) }),
-              children: item.label
-            }
-          ),
-          isExpanded && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 mt-1", children: item.children.map((child) => /* @__PURE__ */ jsx(
+              ),
+              isExpanded && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 mt-1", children: item.children.map((child) => /* @__PURE__ */ jsx(
+                NavButton,
+                {
+                  active: child.id === resolvedActiveItemId,
+                  onClick: () => {
+                    setLocalActiveItemId(child.id);
+                    onNavigate?.(child.id);
+                  },
+                  children: child.label
+                },
+                child.id
+              )) })
+            ] }, item.id);
+          }
+          return /* @__PURE__ */ jsx(
             NavButton,
             {
-              active: child.id === resolvedActiveItemId,
+              icon: item.icon,
+              active: item.id === resolvedActiveItemId,
               onClick: () => {
-                setLocalActiveItemId(child.id);
-                onNavigate?.(child.id);
+                setLocalActiveItemId(item.id);
+                onNavigate?.(item.id);
               },
-              children: child.label
+              children: item.label
             },
-            child.id
-          )) })
-        ] }, item.id);
-      }
-      return /* @__PURE__ */ jsx(
-        NavButton,
-        {
-          icon: item.icon,
-          active: item.id === resolvedActiveItemId,
-          onClick: () => {
-            setLocalActiveItemId(item.id);
-            onNavigate?.(item.id);
-          },
-          children: item.label
-        },
-        item.id
-      );
-    }) })
-  ] });
+            item.id
+          );
+        }) })
+      ]
+    }
+  );
 }
-function AppLayout({ header, sidebar, children, flush = false, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn2(
-    "flex h-screen flex-col gap-[var(--global-spacing,0.75rem)] overflow-hidden p-[var(--global-spacing,0.75rem)]",
-    className
-  ), style: { backgroundColor: "hsl(var(--muted))" }, children: [
-    header ? header : null,
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 gap-[var(--global-spacing,0.75rem)] overflow-hidden min-h-0", children: [
-      sidebar ? sidebar : null,
-      /* @__PURE__ */ jsx("main", { className: cn2(
-        "flex-1 min-h-0 overflow-hidden rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))]",
-        !flush && "overflow-y-auto"
-      ), children: flush ? children : /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children }) })
-    ] })
-  ] });
+function AppLayout({
+  header,
+  sidebar,
+  children,
+  flush = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn2(
+        "flex h-screen flex-col gap-[var(--global-spacing,0.75rem)] overflow-hidden p-[var(--global-spacing,0.75rem)]",
+        className
+      ),
+      style: { backgroundColor: "hsl(var(--muted))" },
+      children: [
+        header ? header : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 gap-[var(--global-spacing,0.75rem)] overflow-hidden min-h-0", children: [
+          sidebar ? sidebar : null,
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              className: cn2(
+                "flex-1 min-h-0 overflow-hidden rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))]",
+                !flush && "overflow-y-auto"
+              ),
+              children: flush ? children : /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 var NAVIGATION_LAYOUT_SIDEBAR_EXPANDED_WIDTH = "13.7rem";
 var NAVIGATION_LAYOUT_SIDEBAR_COLLAPSED_WIDTH = "4.25rem";
@@ -2832,15 +3032,39 @@ var NAVIGATION_LAYOUT_DEFAULT_APPEARANCE = {
 };
 var NAVIGATION_LAYOUT_MENU_RADIUS_CLASS_MAP = {
   none: { all: "rounded-none", left: "!rounded-none", right: "!rounded-none" },
-  sm: { all: "rounded-sm", left: "!rounded-l-sm !rounded-r-none", right: "!rounded-l-none !rounded-r-sm" },
-  md: { all: "rounded-md", left: "!rounded-l-md !rounded-r-none", right: "!rounded-l-none !rounded-r-md" },
-  lg: { all: "rounded-lg", left: "!rounded-l-lg !rounded-r-none", right: "!rounded-l-none !rounded-r-lg" },
-  xl: { all: "rounded-xl", left: "!rounded-l-xl !rounded-r-none", right: "!rounded-l-none !rounded-r-xl" },
-  full: { all: "rounded-full", left: "!rounded-l-full !rounded-r-none", right: "!rounded-l-none !rounded-r-full" }
+  sm: {
+    all: "rounded-sm",
+    left: "!rounded-l-sm !rounded-r-none",
+    right: "!rounded-l-none !rounded-r-sm"
+  },
+  md: {
+    all: "rounded-md",
+    left: "!rounded-l-md !rounded-r-none",
+    right: "!rounded-l-none !rounded-r-md"
+  },
+  lg: {
+    all: "rounded-lg",
+    left: "!rounded-l-lg !rounded-r-none",
+    right: "!rounded-l-none !rounded-r-lg"
+  },
+  xl: {
+    all: "rounded-xl",
+    left: "!rounded-l-xl !rounded-r-none",
+    right: "!rounded-l-none !rounded-r-xl"
+  },
+  full: {
+    all: "rounded-full",
+    left: "!rounded-l-full !rounded-r-none",
+    right: "!rounded-l-none !rounded-r-full"
+  }
 };
 function clampHeadbarHeight(value) {
-  if (typeof value !== "number" || !Number.isFinite(value)) return NAVIGATION_LAYOUT_HEADBAR_DEFAULT_HEIGHT_PX;
-  return Math.min(NAVIGATION_LAYOUT_HEADBAR_MAX_HEIGHT_PX, Math.max(NAVIGATION_LAYOUT_HEADBAR_MIN_HEIGHT_PX, Math.round(value)));
+  if (typeof value !== "number" || !Number.isFinite(value))
+    return NAVIGATION_LAYOUT_HEADBAR_DEFAULT_HEIGHT_PX;
+  return Math.min(
+    NAVIGATION_LAYOUT_HEADBAR_MAX_HEIGHT_PX,
+    Math.max(NAVIGATION_LAYOUT_HEADBAR_MIN_HEIGHT_PX, Math.round(value))
+  );
 }
 function getHeadbarVerticalPaddingPx(heightPx) {
   return heightPx <= NAVIGATION_LAYOUT_HEADBAR_COMPACT_HEIGHT_THRESHOLD_PX ? NAVIGATION_LAYOUT_HEADBAR_COMPACT_VERTICAL_PADDING_PX : NAVIGATION_LAYOUT_HEADBAR_BOXED_VERTICAL_PADDING_PX;
@@ -2858,7 +3082,13 @@ function getHeadbarMenuRadiusClass(menuRadius = "default", part = "all") {
 }
 function getHeadbarFrameClass(layoutMode = "boxed", navPosition = "center") {
   const columns = navPosition === "center" ? "grid-cols-[minmax(max-content,1fr)_minmax(0,max-content)_minmax(max-content,1fr)]" : "grid-cols-[max-content_minmax(0,1fr)_max-content]";
-  return layoutMode === "full-bleed" ? cn2("sticky top-0 z-40 grid w-full shrink-0 items-center gap-4 rounded-none border-b border-x-0 border-t-0 border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]", columns) : cn2("sticky top-0 z-40 grid w-full shrink-0 items-center gap-4 rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]", columns);
+  return layoutMode === "full-bleed" ? cn2(
+    "sticky top-0 z-40 grid w-full shrink-0 items-center gap-4 rounded-none border-b border-x-0 border-t-0 border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]",
+    columns
+  ) : cn2(
+    "sticky top-0 z-40 grid w-full shrink-0 items-center gap-4 rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]",
+    columns
+  );
 }
 function getHeadbarFrameStyle(layoutMode = "boxed", heightPx, surface = "card") {
   const verticalPaddingPx = getHeadbarVerticalPaddingPx(heightPx);
@@ -2904,7 +3134,8 @@ function getHeadbarItemStyle(active, useTokenRadius = true) {
 function findNavigationRootId(items, activeItemId) {
   for (const item of items) {
     if (item.id === activeItemId) return item.id;
-    if (item.children?.some((child) => child.id === activeItemId)) return item.id;
+    if (item.children?.some((child) => child.id === activeItemId))
+      return item.id;
   }
   return activeItemId;
 }
@@ -2973,7 +3204,9 @@ function SidebarNavigationList({
   revealRequest
 }) {
   const navRef = useRef(null);
-  const [expandedByRoot, setExpandedByRoot] = useState({});
+  const [expandedByRoot, setExpandedByRoot] = useState(
+    {}
+  );
   const toggleRoot = (id) => {
     setExpandedByRoot((current) => ({
       ...current,
@@ -2991,65 +3224,86 @@ function SidebarNavigationList({
         `[data-navigation-sidebar-root-id="${CSS.escape(revealRequest.id)}"]`
       );
       if (targetElement instanceof HTMLElement) {
-        targetElement.scrollIntoView({ behavior: "auto", block: "nearest", inline: "nearest" });
+        targetElement.scrollIntoView({
+          behavior: "auto",
+          block: "nearest",
+          inline: "nearest"
+        });
       }
     });
     return () => window.cancelAnimationFrame(frameId);
   }, [revealRequest]);
-  return /* @__PURE__ */ jsxs("div", { className: "h-full flex-1 overflow-y-auto", style: { scrollbarWidth: "none", msOverflowStyle: "none" }, children: [
-    /* @__PURE__ */ jsx("style", { children: `.monkeys-navigation-sidebar-nav::-webkit-scrollbar { display: none; }` }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: navRef,
-        className: "monkeys-navigation-sidebar-nav flex w-full flex-col gap-2 text-xs text-[hsl(var(--foreground))]",
-        children: items.map((item) => {
-          const isGroup = Boolean(item.children?.length);
-          const isExpanded = Boolean(expandedByRoot[item.id]);
-          const isActive = activeItemId === item.id;
-          if (isGroup) {
-            return /* @__PURE__ */ jsxs("div", { "data-navigation-sidebar-root-id": item.id, children: [
-              /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "h-full flex-1 overflow-y-auto",
+      style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `.monkeys-navigation-sidebar-nav::-webkit-scrollbar { display: none; }` }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: navRef,
+            className: "monkeys-navigation-sidebar-nav flex w-full flex-col gap-2 text-xs text-[hsl(var(--foreground))]",
+            children: items.map((item) => {
+              const isGroup = Boolean(item.children?.length);
+              const isExpanded = Boolean(expandedByRoot[item.id]);
+              const isActive = activeItemId === item.id;
+              if (isGroup) {
+                return /* @__PURE__ */ jsxs("div", { "data-navigation-sidebar-root-id": item.id, children: [
+                  /* @__PURE__ */ jsx(
+                    NavButton,
+                    {
+                      icon: item.icon,
+                      onClick: () => toggleRoot(item.id),
+                      postfix: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          width: "16",
+                          height: "16",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          className: "shrink-0 text-[hsl(var(--foreground))] transition-transform duration-200",
+                          style: {
+                            transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
+                          },
+                          children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+                        }
+                      ) }),
+                      children: item.label
+                    }
+                  ),
+                  isExpanded ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col gap-1", children: item.children?.map((child) => /* @__PURE__ */ jsx(
+                    NavButton,
+                    {
+                      active: activeItemId === child.id,
+                      onClick: () => onNavigate?.(child.id),
+                      children: child.label
+                    },
+                    child.id
+                  )) }) : null
+                ] }, item.id);
+              }
+              return /* @__PURE__ */ jsx("div", { "data-navigation-sidebar-root-id": item.id, children: /* @__PURE__ */ jsx(
                 NavButton,
                 {
+                  active: isActive,
                   icon: item.icon,
-                  onClick: () => toggleRoot(item.id),
-                  postfix: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      className: "shrink-0 text-[hsl(var(--foreground))] transition-transform duration-200",
-                      style: { transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" },
-                      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
-                    }
-                  ) }),
+                  onClick: () => onNavigate?.(item.id),
                   children: item.label
                 }
-              ),
-              isExpanded ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col gap-1", children: item.children?.map((child) => /* @__PURE__ */ jsx(
-                NavButton,
-                {
-                  active: activeItemId === child.id,
-                  onClick: () => onNavigate?.(child.id),
-                  children: child.label
-                },
-                child.id
-              )) }) : null
-            ] }, item.id);
+              ) }, item.id);
+            })
           }
-          return /* @__PURE__ */ jsx("div", { "data-navigation-sidebar-root-id": item.id, children: /* @__PURE__ */ jsx(NavButton, { active: isActive, icon: item.icon, onClick: () => onNavigate?.(item.id), children: item.label }) }, item.id);
-        })
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 }
 function SidebarBrand({
   collapsed,
@@ -3065,7 +3319,14 @@ function SidebarBrand({
         "flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
         logo.url ? "bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
       ),
-      children: logo.url ? /* @__PURE__ */ jsx("img", { src: logo.url, alt: logo.title, className: "h-full w-full object-contain" }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: logo.title.charAt(0) })
+      children: logo.url ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: logo.url,
+          alt: logo.title,
+          className: "h-full w-full object-contain"
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: logo.title.charAt(0) })
     }
   );
   if (collapsed) {
@@ -3199,7 +3460,10 @@ function HeadbarChevronIcon({ open }) {
     "svg",
     {
       "aria-hidden": "true",
-      className: cn2("h-4 w-4 shrink-0 transition-transform duration-200", open && "rotate-180"),
+      className: cn2(
+        "h-4 w-4 shrink-0 transition-transform duration-200",
+        open && "rotate-180"
+      ),
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -3293,7 +3557,10 @@ function HeadbarNavMenuItem({
               "relative flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm outline-none transition-colors hover:bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))]",
               menuItemRadiusClass
             ),
-            style: getHeadbarItemStyle(child.id === activeItemId, useTokenRadius),
+            style: getHeadbarItemStyle(
+              child.id === activeItemId,
+              useTokenRadius
+            ),
             onSelect: () => {
               if (child.disabled) return;
               setOpen(false);
@@ -3394,7 +3661,10 @@ function NavigationHeadbar({
   return /* @__PURE__ */ jsxs(
     "header",
     {
-      className: cn2(getHeadbarFrameClass(layoutMode, layout?.navPosition), className),
+      className: cn2(
+        getHeadbarFrameClass(layoutMode, layout?.navPosition),
+        className
+      ),
       "data-navigation-headbar": "",
       "data-navigation-headbar-surface": surface,
       style: frameStyle,
@@ -3412,7 +3682,14 @@ function NavigationHeadbar({
                   logo.url ? "w-auto max-w-[min(22rem,30vw)] bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
                 ),
                 style: logo.url ? { height: logoHeightPx } : { width: logoHeightPx, height: logoHeightPx },
-                children: logo.url ? /* @__PURE__ */ jsx("img", { src: logo.url, alt: logo.title, className: "block h-full w-auto object-contain" }) : /* @__PURE__ */ jsx("span", { className: "text-base font-bold", children: logo.title.charAt(0) })
+                children: logo.url ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: logo.url,
+                    alt: logo.title,
+                    className: "block h-full w-auto object-contain"
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "text-base font-bold", children: logo.title.charAt(0) })
               }
             ),
             label: showBrandTitle ? /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap text-base font-medium text-[hsl(var(--foreground))]", children: layout?.brandTitle }) : null,
@@ -3423,16 +3700,25 @@ function NavigationHeadbar({
             onClick: logo.onClick
           }
         ) : null) }),
-        /* @__PURE__ */ jsx("div", { className: cn2("flex min-w-0 items-center", getHeadbarNavClass(layout?.navPosition)), children: /* @__PURE__ */ jsx("div", { className: "no-scrollbar flex max-w-full min-w-0 items-center overflow-x-auto overscroll-x-contain", children: navigation ?? /* @__PURE__ */ jsx(
-          NavigationHeadbarMenu,
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            activeItemId,
-            activeRootId,
-            items: navItems,
-            menuRadius,
-            onNavigate
+            className: cn2(
+              "flex min-w-0 items-center",
+              getHeadbarNavClass(layout?.navPosition)
+            ),
+            children: /* @__PURE__ */ jsx("div", { className: "no-scrollbar flex max-w-full min-w-0 items-center overflow-x-auto overscroll-x-contain", children: navigation ?? /* @__PURE__ */ jsx(
+              NavigationHeadbarMenu,
+              {
+                activeItemId,
+                activeRootId,
+                items: navItems,
+                menuRadius,
+                onNavigate
+              }
+            ) })
           }
-        ) }) }),
+        ),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-end gap-3", children: [
           actions,
           extra,
@@ -3510,21 +3796,47 @@ function NavigationLayout({
       id: "toggle-headbar",
       label: switchToHeadbarLabel,
       onClick: () => setNavigationMode("headbar"),
-      icon: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-[18px] w-[18px] rotate-180", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-        /* @__PURE__ */ jsx("path", { d: "M3 9h18" })
-      ] })
+      icon: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "h-[18px] w-[18px] rotate-180",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.8",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+            /* @__PURE__ */ jsx("path", { d: "M3 9h18" })
+          ]
+        }
+      )
     });
   }
   navigationActions.push({
     id: "toggle-sidebar",
     label: sidebarCollapsed ? expandSidebarLabel : collapseSidebarLabel,
     onClick: () => setCollapsed(!sidebarCollapsed),
-    icon: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-[18px] w-[18px]", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-      /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-      /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
-      /* @__PURE__ */ jsx("path", { d: sidebarCollapsed ? "m14 9 3 3-3 3" : "m16 15-3-3 3-3" })
-    ] })
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "h-[18px] w-[18px]",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+          /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+          /* @__PURE__ */ jsx("path", { d: sidebarCollapsed ? "m14 9 3 3-3 3" : "m16 15-3-3 3-3" })
+        ]
+      }
+    )
   });
   const sidebar = isHeadbarMode ? null : /* @__PURE__ */ jsx(
     "div",
@@ -3533,7 +3845,10 @@ function NavigationLayout({
         "relative h-full min-h-0 shrink-0 transition-[width] duration-260",
         sidebarCollapsed ? "z-20 overflow-visible" : "z-10 overflow-hidden"
       ),
-      style: { width: sidebarWidth, transitionTimingFunction: NAVIGATION_LAYOUT_TRANSITION_TIMING },
+      style: {
+        width: sidebarWidth,
+        transitionTimingFunction: NAVIGATION_LAYOUT_TRANSITION_TIMING
+      },
       children: /* @__PURE__ */ jsx(
         Sidebar,
         {
@@ -3548,7 +3863,10 @@ function NavigationLayout({
           logo,
           onCollapsedChange: setCollapsed,
           onNavigate,
-          onRevealRoot: (rootId) => setRevealRequest((prev) => ({ id: rootId, nonce: (prev?.nonce ?? 0) + 1 })),
+          onRevealRoot: (rootId) => setRevealRequest((prev) => ({
+            id: rootId,
+            nonce: (prev?.nonce ?? 0) + 1
+          })),
           revealRequest,
           title: headbarLayout?.brandTitle
         }
@@ -3567,11 +3885,24 @@ function NavigationLayout({
           {
             appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
             tone: "muted",
-            icon: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-              /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
-              /* @__PURE__ */ jsx("path", { d: "m14 9 3 3-3 3" })
-            ] }),
+            icon: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "h-4 w-4 shrink-0",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.8",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+                  /* @__PURE__ */ jsx("path", { d: "m14 9 3 3-3 3" })
+                ]
+              }
+            ),
             label: /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: switchToSidebarLabel }),
             onClick: () => setNavigationMode("sidebar"),
             className: cn2(
@@ -3589,9 +3920,18 @@ function NavigationLayout({
       onNavigate
     }
   ) : null;
-  return /* @__PURE__ */ jsx(AppLayout, { header, sidebar, flush, className, children });
+  return /* @__PURE__ */ jsx(
+    AppLayout,
+    {
+      header,
+      sidebar,
+      flush,
+      className,
+      children
+    }
+  );
 }
 
-export { AppHeader, AppLayout, AppSidebar, NavButton, NavigationHeadbar, NavigationHeadbarMenu, NavigationLayout, UserAccountMenu, cn2 as cn };
+export { AppHeader, AppLayout, AppShellSidebar, AppSidebar, NavButton, NavigationHeadbar, NavigationHeadbarMenu, NavigationLayout, UserAccountMenu, cn2 as cn };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map