@dreamtree-org/twreact-ui 1.3.11 → 2.0.1

package/dist/esm/components/feedback/Dialog.js

@@ -1,58 +1,151 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useRef, useId, useEffect } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef, useId, useState, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
 import { X } from 'lucide-react';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
 import { useFocusTrap } from '../../hooks/useFocusTrap.js';
 import { useScrollLock } from '../../hooks/useScrollLock.js';
-import { setRefs } from '../../utils/position.js';
+import { usePresence } from '../../hooks/usePresence.js';
+import { usePresentation } from '../../hooks/usePresentation.js';
 import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import Sheet from './Sheet.js';
 
-var _excluded = ["isOpen", "onClose", "title", "children", "size", "dismissible", "showCloseButton", "footer", "className", "onOpen"],
+var _excluded = ["isOpen", "onClose", "title", "children", "size", "dismissible", "showCloseButton", "footer", "className", "onOpen", "presentation"],
   _excluded2 = ["children", "className"],
   _excluded3 = ["children", "className"],
   _excluded4 = ["children", "className"];
-var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref2) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    title = _ref.title,
-    children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    _ref$dismissible = _ref.dismissible,
-    dismissible = _ref$dismissible === void 0 ? true : _ref$dismissible,
-    _ref$showCloseButton = _ref.showCloseButton,
-    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
-    footer = _ref.footer,
-    className = _ref.className,
-    onOpen = _ref.onOpen,
-    props = _objectWithoutProperties(_ref, _excluded);
+// Exit length of the centred modal. `animate-scale-out` / `animate-fade-out`
+// run for duration-fast (120ms) with `forwards`, so the panel stays invisible
+// for the few ms before it unmounts.
+var EXIT_MS = 150;
+// Backdrop gutter: 1rem plus the device safe area on every side, so the panel
+// never sits under a notch, the home indicator or a rounded corner.
+var SAFE_GUTTER = 'pt-[calc(1rem+env(safe-area-inset-top,0px))] pb-[calc(1rem+env(safe-area-inset-bottom,0px))] ' + 'pl-[calc(1rem+env(safe-area-inset-left,0px))] pr-[calc(1rem+env(safe-area-inset-right,0px))]';
+// Tallest the centred panel may grow: the viewport minus the gutter above.
+// Taller content scrolls inside the body; header and footer stay put.
+var PANEL_MAX_HEIGHT = 'max-h-[calc(100dvh-2rem-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px))]';
+// Sheet-mode footer: actions stack full-width. `flex-col-reverse` puts the last
+// DOM child (by convention the primary action) on top, iOS-style, while the
+// DOM and Tab order stay [secondary, primary] as on desktop.
+var SHEET_FOOTER = 'flex-col-reverse items-stretch [&>*]:w-full';
+// Assign one node to several refs (callback or object). Lets the dialog keep
+// its internal `dialogRef` for the focus trap while still exposing the panel
+// node to a consumer-supplied `ref` (issue #56).
+var setRefs = function setRefs(node) {
+  for (var _len = arguments.length, refs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    refs[_key - 1] = arguments[_key];
+  }
+  refs.forEach(function (ref) {
+    if (!ref) return;
+    if (typeof ref === 'function') ref(node);else ref.current = node;
+  });
+};
+var CloseButton = function CloseButton(_ref) {
+  var onClick = _ref.onClick;
+  return jsx("button", {
+    type: "button",
+    className: cn('inline-flex items-center justify-center rounded-md p-1 text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', TOUCH_TARGET),
+    onClick: onClick,
+    "aria-label": "Close dialog",
+    children: jsx(X, {
+      className: "h-5 w-5",
+      "aria-hidden": "true"
+    })
+  });
+};
+var Dialog = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var isOpen = _ref2.isOpen,
+    onClose = _ref2.onClose,
+    title = _ref2.title,
+    children = _ref2.children,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'md' : _ref2$size,
+    _ref2$dismissible = _ref2.dismissible,
+    dismissible = _ref2$dismissible === void 0 ? true : _ref2$dismissible,
+    _ref2$showCloseButton = _ref2.showCloseButton,
+    showCloseButton = _ref2$showCloseButton === void 0 ? true : _ref2$showCloseButton,
+    footer = _ref2.footer,
+    className = _ref2.className,
+    onOpen = _ref2.onOpen,
+    _ref2$presentation = _ref2.presentation,
+    presentation = _ref2$presentation === void 0 ? 'auto' : _ref2$presentation,
+    props = _objectWithoutProperties(_ref2, _excluded);
   var dialogRef = useRef(null);
   // Unique per instance so two open dialogs never share an aria-labelledby target.
   var titleId = "dialog-title-".concat(useId());
   // Latest onOpen without re-running the open effect when the prop identity changes.
   var onOpenRef = useLatestRef(onOpen);
-  // Ref-counted body lock: closing a Dialog stacked over a Drawer (or another
-  // overlay) leaves the page locked until the last overlay closes.
-  useScrollLock(isOpen);
-  // Shared focus management: initial focus, Tab trap, Escape (top layer only),
-  // and focus restore to the opener on close.
-  useFocusTrap(dialogRef, {
-    active: isOpen,
-    onEscape: function onEscape() {
-      if (dismissible) onClose === null || onClose === void 0 || onClose();
-    }
+  var onCloseRef = useLatestRef(onClose);
+  // The mounted panel node (either mode). onOpen waits for it, because the
+  // sheet's Portal renders the panel one commit after `isOpen` flips.
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    panelEl = _useState2[0],
+    setPanelEl = _useState2[1];
+  var panelRef = useCallback(function (node) {
+    return setRefs(node, dialogRef, ref, setPanelEl);
+  }, [ref]);
+  var isSheet = usePresentation(presentation) === 'sheet';
+  // Centred mode only: the sheet runs its own focus trap, scroll lock and exit.
+  var centredOpen = Boolean(isOpen) && !isSheet;
+  var presence = usePresence(centredOpen, {
+    duration: EXIT_MS
   });
   useEffect(function () {
     var _onOpenRef$current;
-    if (isOpen) (_onOpenRef$current = onOpenRef.current) === null || _onOpenRef$current === void 0 || _onOpenRef$current.call(onOpenRef, {
-      dialogRef: dialogRef.current
+    if (isOpen && panelEl) (_onOpenRef$current = onOpenRef.current) === null || _onOpenRef$current === void 0 || _onOpenRef$current.call(onOpenRef, {
+      dialogRef: panelEl
     });
-  }, [isOpen, onOpenRef]);
-  if (!isOpen) return null;
+  }, [isOpen, panelEl, onOpenRef]);
+  // Centred mode only (the sheet runs its own). Ref-counted body lock, so
+  // closing a Dialog stacked over another overlay keeps the page locked; the
+  // shared focus trap handles initial focus, Tab cycling, Escape (top layer
+  // only) and focus restore to the opener the moment `isOpen` turns false.
+  useScrollLock(centredOpen);
+  useFocusTrap(dialogRef, {
+    active: centredOpen,
+    onEscape: function onEscape() {
+      var _onCloseRef$current;
+      if (dismissible) (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef);
+    }
+  });
+  // Sheet mode: the public bottom Sheet (content height, no snap points; drag
+  // to dismiss only when dismissible). Escape / backdrop follow `dismissible`
+  // exactly as in the centred modal; onClose is called without arguments.
+  if (isSheet) {
+    var close = function close() {
+      var _onCloseRef$current2;
+      return (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 ? void 0 : _onCloseRef$current2.call(onCloseRef);
+    };
+    return jsxs(Sheet, _objectSpread2(_objectSpread2({
+      ref: panelRef,
+      isOpen: Boolean(isOpen),
+      onClose: close,
+      placement: "bottom",
+      dismissible: dismissible,
+      title: title || undefined,
+      showCloseButton: showCloseButton,
+      className: className,
+      "data-presentation": "sheet"
+    }, props), {}, {
+      children: [!title && showCloseButton && jsx(Sheet.Header, {
+        className: "flex justify-end py-1",
+        children: jsx(CloseButton, {
+          onClick: close
+        })
+      }), jsx(Sheet.Body, {
+        children: children
+      }), footer && jsx(Sheet.Footer, {
+        className: SHEET_FOOTER,
+        children: footer
+      })]
+    }));
+  }
+  if (!presence.mounted) return null;
+  var exiting = presence.state === 'exiting';
   var sizeClasses = {
     sm: 'max-w-md',
     md: 'max-w-lg',
@@ -61,44 +154,39 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref2) {
     full: 'max-w-full mx-4'
   };
   var handleBackdropClick = function handleBackdropClick(e) {
-    if (dismissible && e.target === e.currentTarget) {
+    if (!exiting && dismissible && e.target === e.currentTarget) {
       onClose === null || onClose === void 0 || onClose();
     }
   };
   return /*#__PURE__*/createPortal(jsx("div", {
-    className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+    className: cn('fixed inset-0 z-modal flex items-center justify-center bg-black/50 motion-reduce:animate-none', SAFE_GUTTER, exiting ? 'pointer-events-none animate-fade-out' : 'animate-fade-in'),
+    "data-state": presence.state,
     onClick: handleBackdropClick,
     children: jsxs("div", _objectSpread2(_objectSpread2({
-      ref: function ref(node) {
-        return setRefs(node, dialogRef, _ref2);
-      },
-      className: cn('w-full rounded-lg border border-line bg-surface text-foreground shadow-xl focus:outline-none animate-scale-in motion-reduce:animate-none', sizeClasses[size], className),
+      ref: panelRef,
+      className: cn('flex w-full flex-col overflow-hidden rounded-lg border border-line bg-surface text-foreground shadow-xl focus:outline-none motion-reduce:animate-none', PANEL_MAX_HEIGHT, exiting ? 'animate-scale-out' : 'animate-scale-in', sizeClasses[size], className),
       tabIndex: -1,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": title ? titleId : undefined
+      "aria-labelledby": title ? titleId : undefined,
+      "data-state": presence.state,
+      "data-presentation": "popover"
     }, props), {}, {
       children: [(title || showCloseButton) && jsxs("div", {
-        className: "flex items-center justify-between border-b border-line px-6 py-4",
+        className: "flex shrink-0 items-center justify-between border-b border-line px-6 py-4",
         children: [title && jsx("h2", {
           id: titleId,
           className: "text-lg font-semibold text-foreground",
           children: title
-        }), showCloseButton && jsx("button", {
-          type: "button",
-          className: cn('inline-flex items-center justify-center rounded-md p-1 text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', TOUCH_TARGET),
-          onClick: onClose,
-          "aria-label": "Close dialog",
-          children: jsx(X, {
-            className: "h-5 w-5",
-            "aria-hidden": "true"
-          })
+        }), showCloseButton && jsx(CloseButton, {
+          onClick: onClose
         })]
       }), jsx("div", {
-        className: "px-6 py-4",
+        className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4",
+        "data-dialog-body": "",
         children: children
       }), footer && jsx("div", {
-        className: "flex items-center justify-end gap-3 border-t border-line px-6 py-4",
+        className: "flex shrink-0 items-center justify-end gap-3 border-t border-line px-6 py-4",
         children: footer
       })]
     }))

package/dist/esm/components/feedback/Drawer.js

@@ -1,20 +1,19 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useRef, useId } from 'react';
-import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useContext } from 'react';
 import { X } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
-import { setRefs } from '../../utils/position.js';
-import { useFocusTrap } from '../../hooks/useFocusTrap.js';
-import { useScrollLock } from '../../hooks/useScrollLock.js';
-import { useSwipeToClose } from '../../hooks/useSwipeToClose.js';
 import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import { SheetCore, SheetContext, mergeHandlers } from './sheetCore.js';
 
-var _excluded = ["isOpen", "onClose", "title", "description", "children", "placement", "size", "dismissible", "showCloseButton", "footer", "initialFocusRef", "handle", "swipeToClose", "className", "style"],
+var _excluded = ["isOpen", "onClose", "title", "description", "children", "placement", "size", "dismissible", "showCloseButton", "footer", "initialFocusRef", "handle", "swipeToClose"],
   _excluded2 = ["className"],
   _excluded3 = ["className"],
   _excluded4 = ["className"];
+// Record-peek / editor panel. Built on the internal sheet core (ADR 0001,
+// DTUI-33): it slides in and out from its edge, stays mounted through the
+// exit, and `swipeToClose` drags it toward its own edge on every placement.
 var PLACEMENT_CLASSES = {
   right: "inset-y-0 right-0 h-full w-full border-l",
   left: "inset-y-0 left-0 h-full w-full border-r",
@@ -29,12 +28,13 @@ var SIDE_SIZES = {
   xl: "max-w-4xl",
   full: "max-w-full"
 };
+// `dvh`, not `vh`: mobile browser chrome and the on-screen keyboard don't push the panel off-screen.
 var EDGE_SIZES = {
-  sm: "max-h-[30vh]",
-  md: "max-h-[50vh]",
-  lg: "max-h-[75vh]",
-  xl: "max-h-[90vh]",
-  full: "h-full"
+  sm: "max-h-[30dvh]",
+  md: "max-h-[50dvh]",
+  lg: "max-h-[75dvh]",
+  xl: "max-h-[90dvh]",
+  full: "h-dvh"
 };
 var CloseButton = function CloseButton(_ref) {
   var onClose = _ref.onClose,
@@ -50,141 +50,139 @@ var CloseButton = function CloseButton(_ref) {
     })
   });
 };
-var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
-  var isOpen = _ref2.isOpen,
-    onClose = _ref2.onClose,
-    title = _ref2.title,
-    description = _ref2.description,
-    children = _ref2.children,
-    _ref2$placement = _ref2.placement,
-    placement = _ref2$placement === void 0 ? "right" : _ref2$placement,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? "md" : _ref2$size,
-    _ref2$dismissible = _ref2.dismissible,
-    dismissible = _ref2$dismissible === void 0 ? true : _ref2$dismissible,
-    _ref2$showCloseButton = _ref2.showCloseButton,
-    showCloseButton = _ref2$showCloseButton === void 0 ? true : _ref2$showCloseButton,
-    footer = _ref2.footer,
-    initialFocusRef = _ref2.initialFocusRef,
-    handle = _ref2.handle,
-    _ref2$swipeToClose = _ref2.swipeToClose,
-    swipeToClose = _ref2$swipeToClose === void 0 ? false : _ref2$swipeToClose,
-    className = _ref2.className,
-    style = _ref2.style,
-    props = _objectWithoutProperties(_ref2, _excluded);
-  var panelRef = useRef(null);
-  var titleId = "drawer-title-".concat(useId());
-  var descriptionId = "drawer-description-".concat(useId());
+// Inside the core a header is the grab zone: it gets the drag handlers (when
+// `swipeToClose` is on) and the grab cursor. The scrolling body never drags.
+function useGrabZone(props) {
+  var ctx = useContext(SheetContext);
+  if (!ctx) return {
+    dragProps: {},
+    grabClass: ""
+  };
+  return {
+    dragProps: mergeHandlers(ctx.headerDragProps, props),
+    grabClass: ctx.grabClass
+  };
+}
+var DrawerTitleBar = function DrawerTitleBar(_ref2) {
+  var className = _ref2.className,
+    children = _ref2.children;
+  var _useGrabZone = useGrabZone({}),
+    dragProps = _useGrabZone.dragProps,
+    grabClass = _useGrabZone.grabClass;
+  return jsx("div", _objectSpread2(_objectSpread2({}, dragProps), {}, {
+    className: cn("flex shrink-0 items-start justify-between gap-4 border-b border-gray-200 px-6 py-4 dark:border-gray-700", grabClass, className),
+    children: children
+  }));
+};
+var Drawer = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var isOpen = _ref3.isOpen,
+    onClose = _ref3.onClose,
+    title = _ref3.title,
+    description = _ref3.description,
+    children = _ref3.children,
+    _ref3$placement = _ref3.placement,
+    placement = _ref3$placement === void 0 ? "right" : _ref3$placement,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? "md" : _ref3$size,
+    _ref3$dismissible = _ref3.dismissible,
+    dismissible = _ref3$dismissible === void 0 ? true : _ref3$dismissible,
+    _ref3$showCloseButton = _ref3.showCloseButton,
+    showCloseButton = _ref3$showCloseButton === void 0 ? true : _ref3$showCloseButton,
+    footer = _ref3.footer,
+    initialFocusRef = _ref3.initialFocusRef,
+    handle = _ref3.handle,
+    _ref3$swipeToClose = _ref3.swipeToClose,
+    swipeToClose = _ref3$swipeToClose === void 0 ? false : _ref3$swipeToClose,
+    props = _objectWithoutProperties(_ref3, _excluded);
   var side = PLACEMENT_CLASSES[placement] ? placement : "right";
-  var isEdge = side === "top" || side === "bottom";
+  var sizes = side === "top" || side === "bottom" ? EDGE_SIZES : SIDE_SIZES;
   // Without title/description/footer the children are the panel content, so
   // Drawer.Header / Drawer.Body / Drawer.Footer compose without double padding.
   var composed = !title && !description && !footer;
-  var showHandle = handle !== null && handle !== void 0 ? handle : side === "bottom";
-  var swipe = useSwipeToClose({
-    enabled: swipeToClose && side === "bottom" && dismissible,
-    onClose: onClose
-  });
-  // The grab zone (handle + header) starts a swipe; the scrolling body never does.
-  var grabProps = swipeToClose && side === "bottom" && dismissible ? _objectSpread2(_objectSpread2({}, swipe.dragProps), {}, {
-    className: "touch-none cursor-grab"
-  }) : {
-    className: ""
+  // Drawer has always called onClose() without arguments; keep it that way.
+  var close = function close() {
+    return onClose === null || onClose === void 0 ? void 0 : onClose();
   };
-  useScrollLock(isOpen);
-  useFocusTrap(panelRef, {
-    active: isOpen,
-    initialFocusRef: initialFocusRef,
-    onEscape: function onEscape() {
-      if (dismissible) onClose === null || onClose === void 0 || onClose();
+  var renderHeader = function renderHeader(_ref4) {
+    var titleId = _ref4.titleId,
+      descriptionId = _ref4.descriptionId,
+      showHandle = _ref4.showHandle;
+    if (composed) {
+      return showCloseButton ? jsx(CloseButton, {
+        onClose: close,
+        className: "absolute right-3 top-3 z-10"
+      }) : null;
     }
-  });
-  if (!isOpen || typeof document === "undefined") return null;
-  return /*#__PURE__*/createPortal(jsxs("div", {
-    className: "fixed inset-0 z-50",
-    children: [jsx("div", {
-      "aria-hidden": "true",
-      "data-testid": "drawer-backdrop",
-      className: "absolute inset-0 bg-black/50 animate-fade-in motion-reduce:animate-none",
-      onClick: function onClick() {
-        return dismissible && (onClose === null || onClose === void 0 ? void 0 : onClose());
-      }
-    }), jsxs("div", _objectSpread2(_objectSpread2({
-      ref: function ref(node) {
-        return setRefs(node, panelRef, _ref3);
-      },
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": title ? titleId : undefined,
-      "aria-describedby": description ? descriptionId : undefined,
-      tabIndex: -1,
-      "data-placement": side,
-      className: cn("absolute flex flex-col border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", PLACEMENT_CLASSES[side], (isEdge ? EDGE_SIZES : SIDE_SIZES)[size] || (isEdge ? EDGE_SIZES.md : SIDE_SIZES.md), !swipe.dragging && "transition-transform duration-200 ease-out motion-reduce:transition-none", className),
-      style: swipe.offset ? _objectSpread2(_objectSpread2({}, style), {}, {
-        transform: "translateY(".concat(swipe.offset, "px)")
-      }) : style
-    }, props), {}, {
-      children: [showHandle && jsx("div", _objectSpread2(_objectSpread2({
-        "aria-hidden": "true",
-        "data-testid": "drawer-handle"
-      }, grabProps), {}, {
-        className: cn("flex shrink-0 justify-center pb-1 pt-3", grabProps.className),
-        children: jsx("span", {
-          className: "h-1.5 w-10 rounded-full bg-gray-300 dark:bg-gray-600"
-        })
-      })), composed ? jsxs(Fragment, {
-        children: [showCloseButton && jsx(CloseButton, {
-          onClose: onClose,
-          className: "absolute right-3 top-3"
-        }), children]
-      }) : jsxs(Fragment, {
-        children: [jsxs("div", _objectSpread2(_objectSpread2({}, grabProps), {}, {
-          className: cn("flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-4 dark:border-gray-700", showHandle && "pt-2", grabProps.className),
-          children: [jsxs("div", {
-            className: "min-w-0",
-            children: [title && jsx("h2", {
-              id: titleId,
-              className: "text-lg font-semibold",
-              children: title
-            }), description && jsx("p", {
-              id: descriptionId,
-              className: "mt-1 text-sm text-gray-500 dark:text-gray-400",
-              children: description
-            })]
-          }), showCloseButton && jsx(CloseButton, {
-            onClose: onClose
-          })]
-        })), jsx("div", {
-          className: "min-h-0 flex-1 overflow-y-auto px-6 py-4",
-          children: children
-        }), footer && jsx("div", {
-          className: "flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700",
-          children: footer
+    return jsxs(DrawerTitleBar, {
+      className: cn(showHandle && side !== "top" && "pt-2"),
+      children: [jsxs("div", {
+        className: "min-w-0",
+        children: [title && jsx("h2", {
+          id: titleId,
+          className: "text-lg font-semibold",
+          children: title
+        }), description && jsx("p", {
+          id: descriptionId,
+          className: "mt-1 text-sm text-gray-500 dark:text-gray-400",
+          children: description
         })]
+      }), showCloseButton && jsx(CloseButton, {
+        onClose: close
       })]
-    }))]
-  }), document.body);
-});
-Drawer.displayName = "Drawer";
-var DrawerHeader = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
-  var className = _ref4.className,
-    props = _objectWithoutProperties(_ref4, _excluded2);
-  return jsx("div", _objectSpread2({
+    });
+  };
+  return jsx(SheetCore, _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn("border-b border-gray-200 px-6 py-4 dark:border-gray-700", className)
-  }, props));
+    open: Boolean(isOpen),
+    onClose: close,
+    placement: side,
+    dismissible: dismissible,
+    dragEnabled: swipeToClose && dismissible,
+    handle: handle,
+    initialFocus: initialFocusRef,
+    hasTitle: Boolean(title),
+    hasDescription: Boolean(description),
+    idPrefix: "drawer",
+    testIdPrefix: "drawer",
+    handleBarClassName: "bg-gray-300 dark:bg-gray-600",
+    panelClassName: cn("border-gray-200 bg-white text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", PLACEMENT_CLASSES[side], sizes[size] || sizes.md),
+    renderHeader: renderHeader
+  }, props), {}, {
+    children: composed ? children : jsxs(Fragment, {
+      children: [jsx("div", {
+        className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4",
+        children: children
+      }), footer && jsx("div", {
+        className: "flex shrink-0 items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700",
+        children: footer
+      })]
+    })
+  }));
 });
-var DrawerBody = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
+Drawer.displayName = "Drawer";
+var DrawerHeader = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
   var className = _ref5.className,
-    props = _objectWithoutProperties(_ref5, _excluded3);
+    props = _objectWithoutProperties(_ref5, _excluded2);
+  var _useGrabZone2 = useGrabZone(props),
+    dragProps = _useGrabZone2.dragProps,
+    grabClass = _useGrabZone2.grabClass;
+  return jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: ref
+  }, props), dragProps), {}, {
+    className: cn("border-b border-gray-200 px-6 py-4 dark:border-gray-700", grabClass, className)
+  }));
+});
+var DrawerBody = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+  var className = _ref6.className,
+    props = _objectWithoutProperties(_ref6, _excluded3);
   return jsx("div", _objectSpread2({
     ref: ref,
     className: cn("min-h-0 flex-1 overflow-y-auto px-6 py-4", className)
   }, props));
 });
-var DrawerFooter = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
-  var className = _ref6.className,
-    props = _objectWithoutProperties(_ref6, _excluded4);
+var DrawerFooter = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
+  var className = _ref7.className,
+    props = _objectWithoutProperties(_ref7, _excluded4);
   return jsx("div", _objectSpread2({
     ref: ref,
     className: cn("flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700", className)