@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

package/dist/components/feedback/sheetCore.d.ts

@@ -0,0 +1,30 @@
+/** Calls the consumer's handler first, then ours. */
+export function mergeHandlers(ours: any, theirs: any): {};
+export const SHEET_PLACEMENTS: string[];
+/**
+ * Context for parts rendered inside the core: drag handlers for the grab zone
+ * (header) and the scrolling body, ids, and `requestClose(reason)`.
+ */
+export const SheetContext: React.Context<null>;
+/**
+ * The shared sheet core. Internal: `Sheet` and `Drawer` wrap it.
+ *
+ * Beyond Sheet's own props it takes the chrome its wrappers vary:
+ * - `dragEnabled` (default true): turns the drag gesture on.
+ * - `hasTitle` / `hasDescription`: wire `aria-labelledby` / `aria-describedby`.
+ * - `idPrefix`, `testIdPrefix`: ids (`<prefix>-title-…`) and test ids
+ *   (`<prefix>-backdrop`, `<prefix>-handle`).
+ * - `panelClassName`: base + placement + size classes for the panel.
+ * - `handleBarClassName`: the grab handle's bar.
+ * - `renderHeader({ titleId, descriptionId, requestClose, showHandle, side })`:
+ *   rendered before `children`, inside the context.
+ */
+export const SheetCore: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export function SheetCloseButton({ onClick, label, className }: {
+    onClick: any;
+    label: any;
+    className: any;
+}): import("react/jsx-runtime").JSX.Element;
+export default SheetCore;
+import React from "react";
+//# sourceMappingURL=sheetCore.d.ts.map

package/dist/components/feedback/sheetCore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheetCore.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/sheetCore.jsx"],"names":[],"mappings":"AA0HA,qDAAqD;AACrD,0DASC;AAjHD,wCAAmE;AAmHnE;;;GAGG;AACH,+CAAgD;AAEhD;;;;;;;;;;;;GAYG;AACH,kFAwSE;AAKK;;;;4CAcN;;kBApdoH,OAAO"}

package/dist/components/navigation/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Breadcrumbs.jsx"],"names":[],"mappings":";AAQA,qFAoDG;kBA5De,OAAO"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Breadcrumbs.jsx"],"names":[],"mappings":";AA4BA,qFA4GG;kBAxIgD,OAAO"}

package/dist/components/navigation/FootNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FootNav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/FootNav.jsx"],"names":[],"mappings":";AAmBA,iFA0DG;kBA7Ee,OAAO"}
+{"version":3,"file":"FootNav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/FootNav.jsx"],"names":[],"mappings":";AAoDA,iFAuFG;kBA3Ie,OAAO"}

package/dist/components/navigation/Navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAiMA,+EAwSG;;kBAxeqD,OAAO"}
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAmQA,+EAiYG;;kBAnoBmF,OAAO"}

package/dist/components/navigation/Sidebar.d.ts

@@ -1,3 +1,4 @@
+export const SIDEBAR_DESKTOP_QUERY: "(min-width: 768px)";
 export default Sidebar;
 /**
  * Sidebar component with custom tooltip for collapsed mode.
@@ -16,6 +17,11 @@ export default Sidebar;
  * - drawerPosition: 'left' | 'right'
  * - isMobileOpen, setIsMobileOpen
  * - showCollapsedTooltips: boolean (default true)
+ * - swipeable: boolean (default true) — phones: swipe in from the screen edge
+ *   to open the drawer, swipe it back toward its edge to close
+ *
+ * The content renders once: a sticky column from `md` up, an off-canvas
+ * drawer (modal dialog while open) below.
  */
 declare const Sidebar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";

package/dist/components/navigation/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":";AAkFA;;;;;;;;;;;;;;;;;GAiBG;AACH,iFAohBG;kBAhnBI,OAAO"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":"AAqBA,oCAAqC,oBAAoB,CAAC;;AAoJ1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iFA0kBG;kBAlwBI,OAAO"}

package/dist/components/rich-text/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text/RichTextEditor.jsx"],"names":[],"mappings":";AA2BA,wFAsLE;kBAjN+E,OAAO"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text/RichTextEditor.jsx"],"names":[],"mappings":";AA2BA,wFA2LE;kBAtN+E,OAAO"}

package/dist/components/rich-text/RichTextToolbar.d.ts

@@ -18,17 +18,21 @@ export function selectToolbarState(editor: any): {
 } | null;
 /** Normalises a typed URL; returns null for schemes we refuse (javascript:, data:, …). */
 export function normalizeUrl(raw: any): string | null;
+/** `top` offset for a sticky toolbar: `true` → 0, a number → px, a string → any CSS length. */
+export function stickyTop(sticky: any): string;
 /**
  * A WAI-ARIA toolbar: one tab stop, arrow keys / Home / End move between the
- * buttons (roving tabindex), toggles report `aria-pressed`.
+ * buttons (roving tabindex), toggles report `aria-pressed`. With `sticky` it
+ * stays pinned to the top of the scrolling page while the content scrolls.
  */
-export function RichTextToolbar({ editor, state, items, disabled, controlsId, label }: {
+export function RichTextToolbar({ editor, state, items, disabled, controlsId, label, sticky }: {
     editor: any;
     state: any;
     items: any;
     disabled: any;
     controlsId: any;
     label?: string | undefined;
+    sticky?: boolean | undefined;
 }): import("react/jsx-runtime").JSX.Element;
 export namespace TOOLBAR_ITEMS {
     namespace bold {

package/dist/components/rich-text/RichTextToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text/RichTextToolbar.jsx"],"names":[],"mappings":"AAuDA,uFAAuF;AACvF;;;;;;;;;;;;;;;;SAmBC;AAKD,0FAA0F;AAC1F,sDAMC;AAsFD;;;GAGG;AACH;;;;;;;4CAkFC;;;;;;;;QA3O0F,iCAAqB;;;;;;;;;;;;QACf,mCAAuB;;;;;;;;;;;;;QACH,mCAAuB;;;;;;;;;;;;;QAC1C,mCAAqB;;;;;;;;;;;;;QACV,mCAAoC;;;;;;;;;;;;;QACpC,mCAAoC;;;;;;;;;;;;;QACpC,mCAAoC;;;;;;;;;;;;;QAChC,mCAA2B;;;;;;;;;;;;;QACnB,mCAA4B;;;;;;;;;;;;;QAC3C,mCAA2B;;;;;;;;;;;;;QACpB,oCAA0B;;;;;;;;;;;;;;;;;;;;QAE5D,oCAAe;;;;;;;;;;;QACT,oCAAe;;;;AAGpG,uCAaE;qBArCK,cAAc;uBAAd,cAAc;8BAAd,cAAc;qBAAd,cAAc;yBAAd,cAAc;yBAAd,cAAc;yBAAd,cAAc;qBAAd,cAAc;4BAAd,cAAc;sBAAd,cAAc;2BAAd,cAAc;iCAAd,cAAc;qBAAd,cAAc;qBAAd,cAAc"}
+{"version":3,"file":"RichTextToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text/RichTextToolbar.jsx"],"names":[],"mappings":"AAwDA,uFAAuF;AACvF;;;;;;;;;;;;;;;;SAmBC;AAKD,0FAA0F;AAC1F,sDAMC;AA4FD,+FAA+F;AAC/F,+CAIC;AAED;;;;GAIG;AACH;;;;;;;;4CAyFC;;;;;;;;QAhQ0F,iCAAqB;;;;;;;;;;;;QACf,mCAAuB;;;;;;;;;;;;;QACH,mCAAuB;;;;;;;;;;;;;QAC1C,mCAAqB;;;;;;;;;;;;;QACV,mCAAoC;;;;;;;;;;;;;QACpC,mCAAoC;;;;;;;;;;;;;QACpC,mCAAoC;;;;;;;;;;;;;QAChC,mCAA2B;;;;;;;;;;;;;QACnB,mCAA4B;;;;;;;;;;;;;QAC3C,mCAA2B;;;;;;;;;;;;;QACpB,oCAA0B;;;;;;;;;;;;;;;;;;;;QAE5D,oCAAe;;;;;;;;;;;QACT,oCAAe;;;;AAGpG,uCAaE;qBAtCK,cAAc;uBAAd,cAAc;8BAAd,cAAc;qBAAd,cAAc;yBAAd,cAAc;yBAAd,cAAc;yBAAd,cAAc;qBAAd,cAAc;4BAAd,cAAc;sBAAd,cAAc;2BAAd,cAAc;iCAAd,cAAc;qBAAd,cAAc;qBAAd,cAAc"}

package/dist/components/utility/Avatar.d.ts

@@ -1,3 +1,11 @@
+export const AVATAR_SIZES: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
 export default Avatar;
 declare const Avatar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/dist/components/utility/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Avatar.jsx"],"names":[],"mappings":";AAIA,gFAoHG;kBAxHe,OAAO"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Avatar.jsx"],"names":[],"mappings":"AAKA;;;;;;;EAOE;;AAEF,gFA6GG;kBA3He,OAAO"}

package/dist/components/utility/AvatarGroup.d.ts

@@ -0,0 +1,4 @@
+export default AvatarGroup;
+declare const AvatarGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';
+//# sourceMappingURL=AvatarGroup.d.ts.map

package/dist/components/utility/AvatarGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/components/utility/AvatarGroup.jsx"],"names":[],"mappings":";AAkBA,qFA2CG;kBA7De,OAAO"}

package/dist/components/utility/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Badge.jsx"],"names":[],"mappings":";AAGA,+EA8CG;kBAjDe,OAAO"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Badge.jsx"],"names":[],"mappings":";AA8BA,+EAuCG;kBArEe,OAAO"}

package/dist/components/utility/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Card.jsx"],"names":[],"mappings":";AAGA,8EAqBG;kBAxBe,OAAO"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Card.jsx"],"names":[],"mappings":";AAYA,8EAyCG;kBArDe,OAAO"}

package/dist/components/utility/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Carousel.jsx"],"names":[],"mappings":"AAUA,iFAoGE;;kBA9GgB,OAAO"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Carousel.jsx"],"names":[],"mappings":"AA2BA,iFAkME;;kBA7NgB,OAAO"}

package/dist/components/utility/FileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/utility/FileUpload.jsx"],"names":[],"mappings":";AAYA,oFAyKG;kBArLkD,OAAO"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/utility/FileUpload.jsx"],"names":[],"mappings":";AAqBA,oFA4OG;kBAjQkD,OAAO"}

package/dist/components/utility/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Pagination.jsx"],"names":[],"mappings":";AAIA,oFA8HG;kBAlIe,OAAO"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Pagination.jsx"],"names":[],"mappings":";AAkBA,oFA4IG;kBA9Je,OAAO"}

package/dist/components/utility/PullToRefresh.d.ts

@@ -0,0 +1,5 @@
+export function resist(distance: any, max: any): number;
+export default PullToRefresh;
+declare const PullToRefresh: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=PullToRefresh.d.ts.map

package/dist/components/utility/PullToRefresh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PullToRefresh.d.ts","sourceRoot":"","sources":["../../../src/components/utility/PullToRefresh.jsx"],"names":[],"mappings":"AAeA,wDAGC;;AAED,uFAkMG;kBAtN4D,OAAO"}

package/dist/components/utility/Sortable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sortable.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Sortable.jsx"],"names":[],"mappings":";AAqBA,kFAoHG;kBAzI0G,OAAO"}
+{"version":3,"file":"Sortable.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Sortable.jsx"],"names":[],"mappings":";AAqBA,kFAsHG;kBA3I0G,OAAO"}

package/dist/components/utility/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Stepper.jsx"],"names":[],"mappings":";AAIA,iFAuIG;kBA3Ie,OAAO"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Stepper.jsx"],"names":[],"mappings":";AAgEA,iFAqIG;kBArMe,OAAO"}

package/dist/esm/components/blocks/AppShell.js

@@ -1,16 +1,18 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, createForOfIteratorHelper as _createForOfIteratorHelper } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState, useRef, useCallback } from 'react';
-import { X, Menu } from 'lucide-react';
+import { Menu, X } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
-import { useFocusTrap } from '../../hooks/useFocusTrap.js';
-import { useScrollLock } from '../../hooks/useScrollLock.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import Sheet from '../feedback/Sheet.js';
+import FootNav from '../navigation/FootNav.js';
 
-var _excluded = ["brand", "nav", "sidebarFooter", "topbar", "pageTitle", "linkAs", "children", "className"];
+var _excluded = ["brand", "nav", "sidebarFooter", "topbar", "pageTitle", "bottomNav", "linkAs", "children", "className"];
 // Extracted from procurementpro/components/app-shell.tsx (12 of 13 products hand-roll a shell).
-// Sidebar on lg+, top bar + drawer below. Colours come from the shell role tokens, so a brand file
-// restyles it. Nav items render with `linkAs` (pass Next.js Link) so links prefetch and open in new tabs.
+// Sidebar on lg+, top bar + drawer below, optional bottom nav on phones. Colours come from the
+// shell / role tokens, so a brand file restyles it and dark mode needs no extra classes. Nav items
+// render with `linkAs` (pass Next.js Link) so links prefetch and open in new tabs.
 var NavList = function NavList(_ref) {
   var nav = _ref.nav,
     Link = _ref.Link,
@@ -41,7 +43,7 @@ var NavList = function NavList(_ref) {
   }
   return jsx("nav", {
     "aria-label": "Main navigation",
-    className: "flex-1 overflow-y-auto px-3 pb-4",
+    className: "flex-1 overflow-y-auto overscroll-contain px-3 pb-4",
     children: groups.map(function (g) {
       return jsxs("div", {
         className: "mb-3",
@@ -60,11 +62,11 @@ var NavList = function NavList(_ref) {
                 className: "flex-1 truncate",
                 children: item.label
               }), item.count > 0 && jsx("span", {
-                className: "rounded-full bg-white/15 px-2 py-0.5 text-xs font-semibold text-white",
+                className: "rounded-full bg-shell-foreground/15 px-2 py-0.5 text-xs font-semibold text-shell-foreground",
                 children: item.count
               })]
             });
-            var cls = cn('flex h-10 w-full items-center gap-3 rounded-control px-3 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-primary-400', item.active ? 'bg-shell-active font-semibold text-white' : 'text-shell-foreground hover:bg-white/5 hover:text-white');
+            var cls = cn('flex h-10 w-full items-center gap-3 rounded-control px-3 text-sm transition-colors duration-fast motion-reduce:transition-none', '[@media(pointer:coarse)]:h-11', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400', item.active ? 'bg-shell-active font-semibold text-shell-foreground' : 'text-shell-foreground/85 hover:bg-shell-active/60 hover:text-shell-foreground');
             var handle = function handle() {
               var _item$onClick;
               (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
@@ -97,6 +99,7 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     sidebarFooter = _ref2.sidebarFooter,
     topbar = _ref2.topbar,
     pageTitle = _ref2.pageTitle,
+    bottomNav = _ref2.bottomNav,
     _ref2$linkAs = _ref2.linkAs,
     Link = _ref2$linkAs === void 0 ? 'a' : _ref2$linkAs,
     children = _ref2.children,
@@ -107,102 +110,106 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     open = _useState2[0],
     setOpen = _useState2[1];
   var menuButton = useRef(null);
-  var drawer = useRef(null);
   var close = useCallback(function () {
     return setOpen(false);
   }, []);
-  // Mobile drawer is a modal dialog: focus moves in, Tab is trapped, Escape
-  // closes, focus returns to the menu button, and the page behind is locked.
-  useScrollLock(open);
-  useFocusTrap(drawer, {
-    active: open,
-    onEscape: function onEscape() {
-      var _menuButton$current;
-      close();
-      // Some browsers (Safari) don't focus a clicked button, so the opener may be <body>.
-      (_menuButton$current = menuButton.current) === null || _menuButton$current === void 0 || _menuButton$current.focus();
-    }
-  });
-  var sidebar = jsxs(Fragment, {
-    children: [jsxs("div", {
-      className: "flex items-center justify-between px-5 pb-4 pt-5 text-white",
-      children: [jsx("div", {
-        className: "min-w-0",
-        children: brand
-      }), jsx("button", {
-        type: "button",
-        className: "rounded-control p-1.5 text-shell-foreground hover:bg-white/10 lg:hidden",
-        onClick: close,
-        "aria-label": "Close navigation",
-        children: jsx(X, {
-          className: "h-5 w-5",
-          "aria-hidden": "true"
-        })
+  // The mobile drawer is a left Sheet: a modal dialog that moves focus in, traps
+  // Tab, closes on Escape / backdrop / drag, locks the page behind and returns
+  // focus to the menu button.
+  var onDrawerClose = function onDrawerClose(reason) {
+    var _menuButton$current;
+    close();
+    // Some browsers (Safari) don't focus a clicked button, so the opener may be <body>.
+    if (reason === 'escape') (_menuButton$current = menuButton.current) === null || _menuButton$current === void 0 || _menuButton$current.focus();
+  };
+  var sidebar = function sidebar(inDrawer) {
+    return jsxs(Fragment, {
+      children: [jsxs("div", {
+        className: "flex items-center justify-between px-5 pb-4 pt-5 text-shell-foreground",
+        children: [jsx("div", {
+          className: "min-w-0",
+          children: brand
+        }), inDrawer && jsx("button", {
+          type: "button",
+          className: cn('inline-flex items-center justify-center rounded-control p-1.5 text-shell-foreground hover:bg-shell-active', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400', TOUCH_TARGET),
+          onClick: close,
+          "aria-label": "Close navigation",
+          children: jsx(X, {
+            className: "h-5 w-5",
+            "aria-hidden": "true"
+          })
+        })]
+      }), jsx(NavList, {
+        nav: nav,
+        Link: Link,
+        onNavigate: close
+      }), sidebarFooter && jsx("div", {
+        className: "border-t border-shell-active p-3",
+        children: sidebarFooter
       })]
-    }), jsx(NavList, {
-      nav: nav,
-      Link: Link,
-      onNavigate: close
-    }), sidebarFooter && jsx("div", {
-      className: "border-t border-white/10 p-3",
-      children: sidebarFooter
-    })]
-  });
+    });
+  };
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('min-h-screen bg-background text-foreground lg:grid lg:grid-cols-[16rem_minmax(0,1fr)]', className)
+    className: cn('min-h-dvh bg-background text-foreground lg:grid lg:grid-cols-[16rem_minmax(0,1fr)]', className)
   }, props), {}, {
     children: [jsx("a", {
       href: "#main",
-      className: "sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-50 focus:rounded-control focus:bg-surface focus:px-3 focus:py-2",
+      className: "sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-toast focus:rounded-control focus:bg-surface focus:px-3 focus:py-2 focus:text-foreground focus-visible:ring-2 focus-visible:ring-primary-500",
       children: "Skip to content"
     }), jsx("aside", {
-      className: "sticky top-0 hidden h-screen flex-col bg-shell lg:flex",
+      className: "sticky top-0 hidden h-dvh flex-col bg-shell pb-safe pl-safe pt-safe lg:flex",
       "aria-label": "Sidebar",
-      children: sidebar
-    }), open && jsxs("div", {
-      className: "fixed inset-0 z-40 lg:hidden",
-      children: [jsx("div", {
-        className: "absolute inset-0 bg-secondary-900/50",
-        onClick: close,
-        "aria-hidden": "true"
-      }), jsx("aside", {
-        ref: drawer,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": "Navigation",
-        tabIndex: -1,
-        className: "absolute inset-y-0 left-0 flex w-72 max-w-[85%] flex-col bg-shell focus:outline-none",
-        children: sidebar
-      })]
+      children: sidebar(false)
+    }), jsx(Sheet, {
+      open: open,
+      onClose: onDrawerClose,
+      placement: "left",
+      "aria-label": "Navigation",
+      className: "w-72 max-w-[85%] border-shell-active bg-shell text-shell-foreground",
+      children: sidebar(true)
     }), jsxs("div", {
       className: "flex min-w-0 flex-col",
-      children: [jsxs("header", {
-        className: "sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-line bg-surface px-4 lg:px-6",
-        children: [jsx("button", {
-          ref: menuButton,
-          type: "button",
-          className: "-ml-1 rounded-control p-2 text-muted hover:bg-secondary-100 lg:hidden",
-          onClick: function onClick() {
-            return setOpen(true);
-          },
-          "aria-label": "Open navigation",
-          "aria-expanded": open,
-          children: jsx(Menu, {
-            className: "h-5 w-5"
-          })
-        }), pageTitle && jsx("span", {
-          className: "truncate text-sm font-semibold lg:hidden",
-          children: pageTitle
-        }), jsx("div", {
-          className: "ml-auto flex items-center gap-3",
-          children: topbar
+      children: [jsx("header", {
+        className: "sticky top-0 z-sticky border-b border-line bg-surface pt-safe px-safe",
+        children: jsxs("div", {
+          className: "flex h-14 items-center gap-3 px-4 lg:px-6",
+          children: [jsx("button", {
+            ref: menuButton,
+            type: "button",
+            className: cn('-ml-1 inline-flex items-center justify-center rounded-control p-2 text-muted hover:bg-muted/10 hover:text-foreground lg:hidden', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', TOUCH_TARGET),
+            onClick: function onClick() {
+              return setOpen(true);
+            },
+            "aria-label": "Open navigation",
+            "aria-expanded": open,
+            "aria-haspopup": "dialog",
+            children: jsx(Menu, {
+              className: "h-5 w-5",
+              "aria-hidden": "true"
+            })
+          }), pageTitle && jsx("span", {
+            className: "truncate text-sm font-semibold text-foreground lg:hidden",
+            children: pageTitle
+          }), jsx("div", {
+            className: "ml-auto flex items-center gap-3",
+            children: topbar
+          })]
+        })
+      }), jsxs("div", {
+        className: "flex flex-1 flex-col px-safe",
+        children: [jsx("main", {
+          id: "main",
+          className: "mx-auto w-full max-w-7xl flex-1 px-4 py-6 md:px-8 md:py-8",
+          children: children
+        }), bottomNav && jsx(FootNav.Spacer, {
+          "data-slot": "bottom-nav-spacer"
         })]
-      }), jsx("main", {
-        id: "main",
-        className: "mx-auto w-full max-w-7xl flex-1 px-4 py-6 md:px-8 md:py-8",
-        children: children
       })]
+    }), bottomNav && jsx("div", {
+      className: "md:hidden",
+      "data-slot": "bottom-nav",
+      children: bottomNav
     })]
   }));
 });

package/dist/esm/components/blocks/BottomActionBar.js

@@ -0,0 +1,132 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef, useCallback, useSyncExternalStore, useEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { setRefs } from '../../utils/position.js';
+
+var _excluded = ["children", "position", "align", "fullWidth", "stackOnMobile", "keyboardAware", "className", "style"],
+  _excluded2 = ["className"];
+// Sticky bar at the bottom of the screen for the primary action on forms and
+// checkout pages (DTUI-57). Pads the home indicator (pb-safe), sits on the
+// z-sticky layer and rides above the on-screen keyboard via visualViewport.
+/** CSS variable the bar publishes with its height, read by BottomActionBar.Spacer. */
+var BAR_HEIGHT_VAR = '--dt-bottom-action-bar-height';
+// Part of the layout viewport the on-screen keyboard covers (0 without visualViewport).
+function readKeyboardOffset() {
+  if (typeof window === 'undefined') return 0;
+  var vv = window.visualViewport;
+  if (!vv) return 0;
+  var inner = window.innerHeight || 0;
+  return Math.max(0, Math.round(inner - (vv.height || inner) - (vv.offsetTop || 0)));
+}
+var getServerOffset = function getServerOffset() {
+  return 0;
+};
+/** Keyboard offset in px while `active`; 0 on the server and without visualViewport. */
+function useKeyboardOffset(active) {
+  var subscribe = useCallback(function (onChange) {
+    var _vv$addEventListener, _vv$addEventListener2;
+    if (!active || typeof window === 'undefined') return function () {};
+    var vv = window.visualViewport;
+    vv === null || vv === void 0 || (_vv$addEventListener = vv.addEventListener) === null || _vv$addEventListener === void 0 || _vv$addEventListener.call(vv, 'resize', onChange);
+    vv === null || vv === void 0 || (_vv$addEventListener2 = vv.addEventListener) === null || _vv$addEventListener2 === void 0 || _vv$addEventListener2.call(vv, 'scroll', onChange);
+    window.addEventListener('resize', onChange);
+    return function () {
+      var _vv$removeEventListen, _vv$removeEventListen2;
+      vv === null || vv === void 0 || (_vv$removeEventListen = vv.removeEventListener) === null || _vv$removeEventListen === void 0 || _vv$removeEventListen.call(vv, 'resize', onChange);
+      vv === null || vv === void 0 || (_vv$removeEventListen2 = vv.removeEventListener) === null || _vv$removeEventListen2 === void 0 || _vv$removeEventListen2.call(vv, 'scroll', onChange);
+      window.removeEventListener('resize', onChange);
+    };
+  }, [active]);
+  var getSnapshot = function getSnapshot() {
+    return active ? readKeyboardOffset() : 0;
+  };
+  return useSyncExternalStore(subscribe, getSnapshot, getServerOffset);
+}
+/** Publishes the fixed bar's height as a CSS variable on <html> so the Spacer can match it. */
+function usePublishedHeight(nodeRef, enabled) {
+  useEffect(function () {
+    var node = nodeRef.current;
+    if (!enabled || !node || typeof document === 'undefined') return undefined;
+    var root = document.documentElement;
+    var publish = function publish() {
+      var _node$getBoundingClie;
+      var h = ((_node$getBoundingClie = node.getBoundingClientRect) === null || _node$getBoundingClie === void 0 ? void 0 : _node$getBoundingClie.call(node).height) || 0;
+      if (h > 0) root.style.setProperty(BAR_HEIGHT_VAR, "".concat(Math.round(h), "px"));
+    };
+    publish();
+    var observer;
+    if (typeof window.ResizeObserver === 'function') {
+      observer = new window.ResizeObserver(publish);
+      observer.observe(node);
+    }
+    return function () {
+      var _observer;
+      (_observer = observer) === null || _observer === void 0 || _observer.disconnect();
+      root.style.removeProperty(BAR_HEIGHT_VAR);
+    };
+  }, [nodeRef, enabled]);
+}
+var ALIGN = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between'
+};
+var BottomActionBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'fixed' : _ref$position,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'end' : _ref$align,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$stackOnMobile = _ref.stackOnMobile,
+    stackOnMobile = _ref$stackOnMobile === void 0 ? false : _ref$stackOnMobile,
+    _ref$keyboardAware = _ref.keyboardAware,
+    keyboardAware = _ref$keyboardAware === void 0 ? true : _ref$keyboardAware,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var localRef = useRef(null);
+  var setRef = useCallback(function (node) {
+    return setRefs(node, localRef, ref);
+  }, [ref]);
+  var fixed = position !== 'sticky';
+  var offset = useKeyboardOffset(keyboardAware);
+  usePublishedHeight(localRef, fixed);
+  // Above the keyboard the home indicator is covered, so the safe-area pad goes.
+  var lifted = offset > 0;
+  var barStyle = lifted ? _objectSpread2(_objectSpread2({}, style), {}, {
+    bottom: "".concat(offset, "px")
+  }) : style;
+  return jsx("div", _objectSpread2(_objectSpread2({
+    ref: setRef,
+    "data-position": fixed ? 'fixed' : 'sticky',
+    "data-keyboard": lifted ? 'open' : undefined,
+    className: cn(fixed ? 'fixed inset-x-0 bottom-0' : 'sticky bottom-0', 'z-sticky border-t border-line bg-surface text-foreground px-safe', 'shadow-[0_-4px_12px_-4px_rgb(0_0_0/calc(0.12*var(--dt-shadow-strength,1)))]', 'transition-[bottom] duration-fast ease-standard motion-reduce:transition-none', !lifted && 'pb-safe', className),
+    style: barStyle
+  }, props), {}, {
+    children: jsx("div", {
+      className: cn('mx-auto flex w-full max-w-7xl items-center gap-3 px-4 py-3 md:px-8', ALIGN[align] || ALIGN.end, fullWidth && 'max-sm:[&>*]:flex-1', stackOnMobile && 'max-sm:flex-col-reverse max-sm:items-stretch max-sm:[&>*]:w-full'),
+      children: children
+    })
+  }));
+});
+BottomActionBar.displayName = 'BottomActionBar';
+// Reserves the fixed bar's height (published by the bar, 4.5rem + safe area
+// before it measures) so the last rows of the page aren't hidden behind it.
+var BottomActionBarSpacer = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return jsx("div", _objectSpread2({
+    ref: ref,
+    "aria-hidden": "true",
+    className: cn('h-[var(--dt-bottom-action-bar-height,calc(4.5rem+env(safe-area-inset-bottom,0px)))] shrink-0', className)
+  }, props));
+});
+BottomActionBarSpacer.displayName = 'BottomActionBar.Spacer';
+BottomActionBar.Spacer = BottomActionBarSpacer;
+
+export { BAR_HEIGHT_VAR, BottomActionBar as default };