gridsmith-ui 0.3.1 → 0.3.2

package/dist/index.d.ts

@@ -1051,8 +1051,10 @@ interface DrawerProps {
     flush?: boolean;
     /** Use a lighter backdrop (no blur, subtle dim). Use for compact overlays. */
     lightBackdrop?: boolean;
+    /** Offset the drawer from the top of its container. When set, the area above this offset remains visible and interactive (e.g. keeping a navbar accessible). */
+    topOffset?: string;
 }
-declare function Drawer({ open, onClose, position, width, title, children, footer, container, flush, lightBackdrop }: DrawerProps): react.ReactPortal | null;
+declare function Drawer({ open, onClose, position, width, title, children, footer, container, flush, lightBackdrop, topOffset }: DrawerProps): react.ReactPortal | null;
 
 interface TooltipProps {
     content: ReactNode;

package/dist/index.js

@@ -95065,7 +95065,7 @@ var borderByPosition = {
   left: "border-r-[length:var(--ds-border-width)] border-r-[var(--ds-border-default)]",
   bottom: "border-t-[length:var(--ds-border-width)] border-t-[var(--ds-border-default)]"
 };
-function Drawer({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop }) {
+function Drawer({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset }) {
   const titleId = useId();
   const isMobile = useBreakpoint("sm");
   const panelRef = useRef(null);
@@ -95101,9 +95101,11 @@ function Drawer({ open, onClose, position = "right", width = "400px", title, chi
       "div",
       {
         className: cn(
-          `${positionClass} inset-0 z-50 transition-opacity duration-[var(--ds-transition-speed)]`,
+          `${positionClass} z-50 transition-opacity duration-[var(--ds-transition-speed)]`,
+          topOffset ? "left-0 right-0 bottom-0" : "inset-0",
           open ? "pointer-events-auto" : "pointer-events-none"
         ),
+        style: topOffset ? { top: topOffset } : void 0,
         onTransitionEnd: handleTransitionEnd,
         children: [
           /* @__PURE__ */ jsx(
@@ -95255,6 +95257,7 @@ var AppShell = forwardRef(function AppShell2({
             container: shellRef.current ?? void 0,
             flush: mobileMenuFlush,
             lightBackdrop: mobileMenuLightBackdrop,
+            topOffset: layout !== "stacked" && navbar != null ? "var(--ds-navbar-height)" : void 0,
             children: mobileMenu
           }
         ),
@@ -95315,12 +95318,13 @@ function getTypeClasses(type, active) {
       );
   }
 }
-function HamburgerButton({ onClick, className: cls }) {
+function HamburgerButton({ onClick, open, className: cls }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       onClick,
-      "aria-label": "Toggle navigation menu",
+      "aria-label": open ? "Close navigation menu" : "Open navigation menu",
+      "aria-expanded": open ?? void 0,
       className: cn(
         "flex items-center justify-center shrink-0",
         "w-10 h-10 rounded-[var(--ds-radius-md)]",
@@ -95330,7 +95334,7 @@ function HamburgerButton({ onClick, className: cls }) {
         "cursor-pointer",
         cls
       ),
-      children: /* @__PURE__ */ jsx(Icon, { name: "menu", size: 20 })
+      children: /* @__PURE__ */ jsx(Icon, { name: open ? "close" : "menu", size: 20 })
     }
   );
 }
@@ -95378,7 +95382,7 @@ var Navbar = forwardRef(function Navbar2({
         style: { padding: padStyle, gap: "var(--ds-space-4)" },
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4", children: [
-            showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger }),
+            showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger, open: appShell?.sidebarOpen }),
             logo && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: logo })
           ] }),
           navLinks && !hideNavLinks ? /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-ds-1 min-w-0 overflow-x-clip justify-center", "data-navbar-type": type, children: navLinks }) }) : /* @__PURE__ */ jsx("div", {}),
@@ -95404,7 +95408,7 @@ var Navbar = forwardRef(function Navbar2({
       ),
       style: { padding: padStyle, gap: "var(--ds-space-4)" },
       children: [
-        showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger }),
+        showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger, open: appShell?.sidebarOpen }),
         logo && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: logo }),
         align === "right" && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
         navLinks && !hideNavLinks && /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { className: cn("flex items-center gap-ds-1 min-w-0 overflow-x-clip", align === "left" && "flex-1"), "data-navbar-type": type, children: navLinks }) }),