@bearmenu/ui 0.8.35 → 0.8.37

package/dist/components/pan-zoom-viewport.js

@@ -0,0 +1,531 @@
+import { ButtonGroup } from '../chunk-EGU6EG73.js';
+import { Button } from '../chunk-5SGKGFMN.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { Plus, Minus } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DRAG_THRESHOLD = 4;
+var MAX_WHEEL_ZOOM_DELTA = 25;
+var WHEEL_ZOOM_SPEED = 0.01;
+var EPSILON = 1e-3;
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function clampAxis(offset, content, viewport, pad) {
+  if (content + pad * 2 <= viewport) return (viewport - content) / 2;
+  return clamp(offset, viewport - content - pad, pad);
+}
+function distance(a, b) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+function midpoint(a, b) {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+function isEditable(target) {
+  return target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
+}
+var PanZoomViewport = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      contentWidth,
+      contentHeight,
+      children,
+      labels,
+      minScale = 0.5,
+      maxScale = 2.5,
+      zoomStep = 1.25,
+      panStep = 48,
+      fitPadding = 24,
+      controls = true,
+      onTransformChange,
+      apiRef,
+      className,
+      contentClassName
+    } = _b, props = __objRest(_b, [
+      "contentWidth",
+      "contentHeight",
+      "children",
+      "labels",
+      "minScale",
+      "maxScale",
+      "zoomStep",
+      "panStep",
+      "fitPadding",
+      "controls",
+      "onTransformChange",
+      "apiRef",
+      "className",
+      "contentClassName"
+    ]);
+    const surfaceRef = React.useRef(null);
+    const [viewport, setViewport] = React.useState(null);
+    const [transform, setTransform] = React.useState({ scale: 1, x: 0, y: 0 });
+    const [animate, setAnimate] = React.useState(false);
+    const [announcement, setAnnouncement] = React.useState("");
+    const transformRef = React.useRef(transform);
+    const fittedRef = React.useRef(true);
+    const pointers = React.useRef(/* @__PURE__ */ new Map());
+    const gesture = React.useRef({ kind: "idle" });
+    const didDrag = React.useRef(false);
+    const pressing = React.useRef(false);
+    const instructionsId = React.useId();
+    const onTransformChangeRef = React.useRef(onTransformChange);
+    const zoomLevelRef = React.useRef(labels.zoomLevel);
+    React.useEffect(() => {
+      onTransformChangeRef.current = onTransformChange;
+      zoomLevelRef.current = labels.zoomLevel;
+    });
+    const clampTransform = React.useCallback(
+      (next) => {
+        if (!viewport || viewport.width <= 0 || viewport.height <= 0) return next;
+        const scale = clamp(next.scale, minScale, maxScale);
+        return {
+          scale,
+          x: clampAxis(next.x, contentWidth * scale, viewport.width, fitPadding),
+          y: clampAxis(next.y, contentHeight * scale, viewport.height, fitPadding)
+        };
+      },
+      [viewport, minScale, maxScale, contentWidth, contentHeight, fitPadding]
+    );
+    const fitted = React.useCallback(() => {
+      if (!viewport || viewport.width <= 0 || viewport.height <= 0) return null;
+      const scale = Math.min(
+        (viewport.width - fitPadding * 2) / contentWidth,
+        (viewport.height - fitPadding * 2) / contentHeight
+      );
+      return clampTransform({ scale, x: fitPadding, y: fitPadding });
+    }, [viewport, fitPadding, contentWidth, contentHeight, clampTransform]);
+    const commit = React.useCallback(
+      (next, options) => {
+        var _a2;
+        const previous = transformRef.current;
+        fittedRef.current = (_a2 = options.fitted) != null ? _a2 : false;
+        setAnimate(options.animate);
+        if (previous.scale === next.scale && previous.x === next.x && previous.y === next.y) {
+          return;
+        }
+        transformRef.current = next;
+        setTransform(next);
+        const zoomLevel = zoomLevelRef.current;
+        if (options.announce && zoomLevel && Math.abs(next.scale - previous.scale) > EPSILON) {
+          setAnnouncement(zoomLevel(Math.round(next.scale * 100)));
+        }
+      },
+      []
+    );
+    const zoomAbout = React.useCallback(
+      (scale, at, options) => {
+        const current = transformRef.current;
+        const nextScale = clamp(scale, minScale, maxScale);
+        const ratio = nextScale / current.scale;
+        commit(
+          clampTransform({
+            scale: nextScale,
+            x: at.x - (at.x - current.x) * ratio,
+            y: at.y - (at.y - current.y) * ratio
+          }),
+          options
+        );
+      },
+      [commit, clampTransform, minScale, maxScale]
+    );
+    const centre = React.useCallback(
+      () => {
+        var _a2, _b2;
+        return { x: ((_a2 = viewport == null ? void 0 : viewport.width) != null ? _a2 : 0) / 2, y: ((_b2 = viewport == null ? void 0 : viewport.height) != null ? _b2 : 0) / 2 };
+      },
+      [viewport]
+    );
+    const zoomIn = React.useCallback(
+      () => zoomAbout(transformRef.current.scale * zoomStep, centre(), { animate: true, announce: true }),
+      [zoomAbout, zoomStep, centre]
+    );
+    const zoomOut = React.useCallback(
+      () => zoomAbout(transformRef.current.scale / zoomStep, centre(), { animate: true, announce: true }),
+      [zoomAbout, zoomStep, centre]
+    );
+    const fit = React.useCallback(() => {
+      const next = fitted();
+      if (next) commit(next, { animate: true, fitted: true, announce: true });
+    }, [fitted, commit]);
+    const panBy = React.useCallback(
+      (dx, dy) => {
+        const current = transformRef.current;
+        commit(clampTransform(__spreadProps(__spreadValues({}, current), { x: current.x + dx, y: current.y + dy })), { animate: true });
+      },
+      [commit, clampTransform]
+    );
+    React.useImperativeHandle(
+      apiRef,
+      () => ({
+        zoomIn,
+        zoomOut,
+        fit,
+        zoomTo: (scale) => zoomAbout(scale, centre(), { animate: true, announce: true }),
+        panBy,
+        centerOn: (x, y) => {
+          const current = transformRef.current;
+          const middle = centre();
+          commit(
+            clampTransform({
+              scale: current.scale,
+              x: middle.x - x * current.scale,
+              y: middle.y - y * current.scale
+            }),
+            { animate: true }
+          );
+        },
+        getTransform: () => transformRef.current
+      }),
+      [zoomIn, zoomOut, fit, zoomAbout, centre, panBy, commit, clampTransform]
+    );
+    React.useLayoutEffect(() => {
+      const surface = surfaceRef.current;
+      if (!surface) return;
+      setViewport({ width: surface.clientWidth, height: surface.clientHeight });
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(([entry]) => {
+        if (!entry) return;
+        const { width, height } = entry.contentRect;
+        setViewport(
+          (previous) => previous && previous.width === width && previous.height === height ? previous : { width, height }
+        );
+      });
+      observer.observe(surface);
+      return () => observer.disconnect();
+    }, []);
+    React.useLayoutEffect(() => {
+      if (fittedRef.current) {
+        const next = fitted();
+        if (next) commit(next, { animate: false, fitted: true });
+      } else {
+        commit(clampTransform(transformRef.current), { animate: false });
+      }
+    }, [fitted, clampTransform, commit]);
+    React.useEffect(() => {
+      var _a2;
+      (_a2 = onTransformChangeRef.current) == null ? void 0 : _a2.call(onTransformChangeRef, transform);
+    }, [transform]);
+    React.useEffect(() => {
+      const surface = surfaceRef.current;
+      if (!surface) return;
+      const local = (clientX, clientY) => {
+        const rect = surface.getBoundingClientRect();
+        return { x: clientX - rect.left, y: clientY - rect.top };
+      };
+      const onWheel = (event) => {
+        const unit = event.deltaMode === WheelEvent.DOM_DELTA_LINE ? 16 : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? surface.clientHeight : 1;
+        const current = transformRef.current;
+        if (event.ctrlKey || event.metaKey) {
+          event.preventDefault();
+          const delta = clamp(event.deltaY * unit, -MAX_WHEEL_ZOOM_DELTA, MAX_WHEEL_ZOOM_DELTA);
+          zoomAbout(current.scale * Math.exp(-delta * WHEEL_ZOOM_SPEED), local(event.clientX, event.clientY), {
+            animate: false
+          });
+          return;
+        }
+        const next = clampTransform(__spreadProps(__spreadValues({}, current), {
+          x: current.x - event.deltaX * unit,
+          y: current.y - event.deltaY * unit
+        }));
+        if (Math.abs(next.x - current.x) < 0.5 && Math.abs(next.y - current.y) < 0.5) return;
+        event.preventDefault();
+        commit(next, { animate: false });
+      };
+      let gestureStartScale = 1;
+      const onGestureStart = (event) => {
+        event.preventDefault();
+        gestureStartScale = transformRef.current.scale;
+      };
+      const onGestureChange = (event) => {
+        event.preventDefault();
+        if (pointers.current.size >= 2) return;
+        const gestureEvent = event;
+        zoomAbout(
+          gestureStartScale * gestureEvent.scale,
+          local(gestureEvent.clientX, gestureEvent.clientY),
+          { animate: false }
+        );
+      };
+      surface.addEventListener("wheel", onWheel, { passive: false });
+      surface.addEventListener("gesturestart", onGestureStart);
+      surface.addEventListener("gesturechange", onGestureChange);
+      return () => {
+        surface.removeEventListener("wheel", onWheel);
+        surface.removeEventListener("gesturestart", onGestureStart);
+        surface.removeEventListener("gesturechange", onGestureChange);
+      };
+    }, [zoomAbout, clampTransform, commit]);
+    const localPoint = (event) => {
+      const rect = event.currentTarget.getBoundingClientRect();
+      return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    };
+    const capture = (element, pointerId) => {
+      try {
+        element.setPointerCapture(pointerId);
+      } catch (e) {
+      }
+    };
+    const onPointerDown = (event) => {
+      if (event.pointerType === "mouse" && event.button !== 0) return;
+      if (event.target instanceof Element && event.target.closest("[data-pan-zoom-ignore]")) return;
+      pressing.current = true;
+      if (event.pointerType === "mouse") pointers.current.clear();
+      const point = localPoint(event);
+      pointers.current.set(event.pointerId, point);
+      if (pointers.current.size === 1) {
+        didDrag.current = false;
+        gesture.current = {
+          kind: "press",
+          id: event.pointerId,
+          start: point,
+          origin: transformRef.current
+        };
+        return;
+      }
+      if (pointers.current.size === 2) {
+        const [a, b] = [...pointers.current.values()];
+        didDrag.current = true;
+        for (const id of pointers.current.keys()) capture(event.currentTarget, id);
+        gesture.current = {
+          kind: "pinch",
+          startDistance: Math.max(distance(a, b), 1),
+          startMid: midpoint(a, b),
+          origin: transformRef.current
+        };
+      }
+    };
+    const onPointerMove = (event) => {
+      if (!pointers.current.has(event.pointerId)) return;
+      const point = localPoint(event);
+      pointers.current.set(event.pointerId, point);
+      const current = gesture.current;
+      if ((current.kind === "press" || current.kind === "pan") && current.id === event.pointerId) {
+        const dx = point.x - current.start.x;
+        const dy = point.y - current.start.y;
+        if (current.kind === "press") {
+          if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+          gesture.current = __spreadProps(__spreadValues({}, current), { kind: "pan" });
+          didDrag.current = true;
+          capture(event.currentTarget, event.pointerId);
+        }
+        commit(
+          clampTransform(__spreadProps(__spreadValues({}, current.origin), { x: current.origin.x + dx, y: current.origin.y + dy })),
+          { animate: false }
+        );
+        return;
+      }
+      if (current.kind === "pinch" && pointers.current.size >= 2) {
+        const [a, b] = [...pointers.current.values()];
+        const mid = midpoint(a, b);
+        const { origin } = current;
+        const scale = clamp(
+          origin.scale * (distance(a, b) / current.startDistance),
+          minScale,
+          maxScale
+        );
+        const anchorX = (current.startMid.x - origin.x) / origin.scale;
+        const anchorY = (current.startMid.y - origin.y) / origin.scale;
+        commit(clampTransform({ scale, x: mid.x - anchorX * scale, y: mid.y - anchorY * scale }), {
+          animate: false
+        });
+      }
+    };
+    const onPointerEnd = (event) => {
+      if (!pointers.current.delete(event.pointerId)) return;
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      const remaining = [...pointers.current.entries()];
+      if (remaining.length === 1 && gesture.current.kind === "pinch") {
+        const [[id, point]] = remaining;
+        gesture.current = { kind: "pan", id, start: point, origin: transformRef.current };
+        return;
+      }
+      if (remaining.length === 0) {
+        gesture.current = { kind: "idle" };
+        pressing.current = false;
+      }
+    };
+    const onClickCapture = (event) => {
+      if (!didDrag.current) return;
+      event.preventDefault();
+      event.stopPropagation();
+      didDrag.current = false;
+    };
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+      if (isEditable(event.target)) return;
+      if (event.key === "+" || event.key === "=") zoomIn();
+      else if (event.key === "-" || event.key === "_") zoomOut();
+      else if (event.key === "0") fit();
+      else {
+        if (event.target !== event.currentTarget) return;
+        const step = panStep * (event.shiftKey ? 4 : 1);
+        const move = {
+          ArrowLeft: { x: step, y: 0 },
+          ArrowRight: { x: -step, y: 0 },
+          ArrowUp: { x: 0, y: step },
+          ArrowDown: { x: 0, y: -step }
+        };
+        const delta = move[event.key];
+        if (!delta) return;
+        panBy(delta.x, delta.y);
+      }
+      event.preventDefault();
+    };
+    const onFocus = (event) => {
+      if (pressing.current || event.target === event.currentTarget) return;
+      const bounds = event.currentTarget.getBoundingClientRect();
+      const rect = event.target.getBoundingClientRect();
+      const margin = fitPadding;
+      let dx = 0;
+      let dy = 0;
+      if (rect.left < bounds.left + margin) dx = bounds.left + margin - rect.left;
+      else if (rect.right > bounds.right - margin) dx = bounds.right - margin - rect.right;
+      if (rect.top < bounds.top + margin) dy = bounds.top + margin - rect.top;
+      else if (rect.bottom > bounds.bottom - margin) dy = bounds.bottom - margin - rect.bottom;
+      if (dx !== 0 || dy !== 0) panBy(dx, dy);
+    };
+    const scaledWidth = contentWidth * transform.scale;
+    const scaledHeight = contentHeight * transform.scale;
+    const overflow = viewport ? {
+      left: transform.x < -0.5,
+      right: transform.x + scaledWidth > viewport.width + 0.5,
+      top: transform.y < -0.5,
+      bottom: transform.y + scaledHeight > viewport.height + 0.5
+    } : { left: false, right: false, top: false, bottom: false };
+    const atMin = transform.scale <= minScale + EPSILON;
+    const atMax = transform.scale >= maxScale - EPSILON;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "pan-zoom-viewport",
+        className: cn("relative overflow-hidden", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: surfaceRef,
+              "data-slot": "pan-zoom-viewport-surface",
+              role: "group",
+              tabIndex: 0,
+              "aria-label": labels.viewport,
+              "aria-describedby": labels.instructions ? instructionsId : void 0,
+              className: cn(
+                "absolute inset-0 touch-none select-none outline-none",
+                "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                "cursor-grab active:cursor-grabbing"
+              ),
+              onPointerDown,
+              onPointerMove,
+              onPointerUp: onPointerEnd,
+              onPointerCancel: onPointerEnd,
+              onClickCapture,
+              onDragStart: (event) => event.preventDefault(),
+              onKeyDown,
+              onFocus,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "pan-zoom-viewport-content",
+                  className: cn(
+                    "absolute left-0 top-0 origin-top-left",
+                    // Hidden for the one render before the first measurement, so the
+                    // unfitted plan never flashes.
+                    !viewport && "invisible",
+                    animate && "transition-transform duration-[var(--duration-quick)] ease-[var(--ease-standard)] motion-reduce:transition-none",
+                    contentClassName
+                  ),
+                  style: {
+                    width: contentWidth,
+                    height: contentHeight,
+                    transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`
+                  },
+                  children
+                }
+              )
+            }
+          ),
+          [
+            ["left", "inset-y-0 left-0 w-6 bg-gradient-to-r"],
+            ["right", "inset-y-0 right-0 w-6 bg-gradient-to-l"],
+            ["top", "inset-x-0 top-0 h-6 bg-gradient-to-b"],
+            ["bottom", "inset-x-0 bottom-0 h-6 bg-gradient-to-t"]
+          ].map(([edge, position]) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              "data-slot": "pan-zoom-viewport-edge",
+              "data-edge": edge,
+              "data-visible": overflow[edge] ? "true" : "false",
+              className: cn(
+                "pointer-events-none absolute from-foreground/10 to-transparent transition-opacity duration-[var(--duration-quick)] motion-reduce:transition-none",
+                position,
+                overflow[edge] ? "opacity-100" : "opacity-0"
+              )
+            },
+            edge
+          )),
+          controls ? /* @__PURE__ */ jsxs(
+            ButtonGroup,
+            {
+              orientation: "vertical",
+              "aria-label": labels.controls,
+              "data-slot": "pan-zoom-viewport-controls",
+              className: "absolute bottom-3 right-3 rounded-xl bg-card shadow-sm",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size: "icon-sm",
+                    "aria-label": labels.zoomIn,
+                    disabled: atMax,
+                    onClick: zoomIn,
+                    children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": true })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size: "icon-sm",
+                    "aria-label": labels.zoomOut,
+                    disabled: atMin,
+                    onClick: zoomOut,
+                    children: /* @__PURE__ */ jsx(Minus, { "aria-hidden": true })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size: "icon-sm",
+                    className: "text-xs font-semibold",
+                    onClick: fit,
+                    children: labels.fit
+                  }
+                )
+              ]
+            }
+          ) : null,
+          labels.instructions ? /* @__PURE__ */ jsx("span", { id: instructionsId, className: "sr-only", children: labels.instructions }) : null,
+          labels.zoomLevel ? /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: announcement }) : null
+        ]
+      })
+    );
+  }
+);
+PanZoomViewport.displayName = "PanZoomViewport";
+
+export { PanZoomViewport };

package/dist/components/place-card.js

@@ -1,12 +1,12 @@
+import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
 import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
 import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_GROUP } from '../chunk-XCB3F6SF.js';
-import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
 import { GradeAtom } from '../chunk-YE4ZQUTI.js';
 import { showsGradeAtom } from '../chunk-I5V446BX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { springSnappy } from '../chunk-OIV7B44M.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Badge } from '../chunk-NIAL4ZU2.js';
+import { Badge } from '../chunk-FQAIYKAS.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { forwardRef, memo, useState, useMemo } from 'react';

package/dist/components/place-details-mobile.js

@@ -3,7 +3,7 @@ import '../chunk-FMTJGO76.js';
 import '../chunk-MWB7S54O.js';
 import '../chunk-NWZGSLPU.js';
 import { Text } from '../chunk-ZLMRVBD7.js';
-import { Badge } from '../chunk-NIAL4ZU2.js';
+import { Badge } from '../chunk-FQAIYKAS.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { useState } from 'react';

package/dist/components/responsive-overlay.d.ts

@@ -23,6 +23,32 @@ type ResponsiveOverlayProps = {
     closeLabel?: string;
     /** Widths for the desktop dialog. Mobile is always the full-width drawer. */
     size?: React.ComponentPropsWithoutRef<typeof DialogContent>["size"];
+    /**
+     * The container on a wide screen. `dialog` (the default) is the centred box.
+     * `sheet` is a right rail: an inset panel held 12px off the top, right and
+     * bottom, 420px wide — the booking pages' table sheet, booking details,
+     * guest panel and create forms (floor/14-w1, calendar/07-n1, guests/07-g6).
+     * Narrow screens get the bottom drawer either way.
+     */
+    desktop?: "dialog" | "sheet";
+    /**
+     * Whether the wide `sheet` dims and locks the page. `true` (the default)
+     * is a form rail: a scrim, focus held inside, the page inert. `false` is a
+     * working rail: no scrim, no focus trap, and the page behind stays live —
+     * clicking another table on the floor does NOT close it, so the caller can
+     * swap what it shows. Escape and the close button still close it.
+     *
+     * Applies to `desktop="sheet"` only. The dialog is always modal, and so is
+     * the phone drawer: at 390 the rail covers most of the page, and a page
+     * that stays live under a sheet the thumb cannot see past is a trap.
+     */
+    modal?: boolean;
+    /**
+     * Where the wide container takes over from the drawer. `md` (768, the
+     * default) for most overlays; `lg` (1024) where the page beside the rail
+     * needs the room — the floor plan's rails switch there.
+     */
+    wideFrom?: "md" | "lg";
     /** Classes for the panel itself — the dialog box or the drawer sheet. */
     className?: string;
     /** Classes for the scrolling body. */
@@ -30,7 +56,9 @@ type ResponsiveOverlayProps = {
 };
 /**
  * ResponsiveOverlay — one overlay authored once: a `Drawer` under md, a
- * `Dialog` from md.
+ * `Dialog` from md — or, with `desktop="sheet"`, an inset right rail that can
+ * leave the page live (`modal={false}`), switching at md or at lg
+ * (`wideFrom`).
  *
  * The shared-table board draws the same chrome on T1, T3, T5, T6 and T8
  * (16-shared-table.html) and the two widths never disagree about it: the

package/dist/components/responsive-overlay.js

@@ -1,13 +1,20 @@
-import { useMediaQuery } from '../chunk-OPVKL4VS.js';
+import { useMediaQuery, DESKTOP_MEDIA_QUERY } from '../chunk-OPVKL4VS.js';
+import { Sheet, SheetContent, SheetTitle, SheetDescription } from '../chunk-LAEVMNJN.js';
 import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from '../chunk-XLHMF6F5.js';
-import { Dialog, DialogContent, DialogTitle, DialogDescription } from '../chunk-TVEIUTBQ.js';
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from '../chunk-IQIJCMG2.js';
 import { cn } from '../chunk-FEK5XGZW.js';
-import '../chunk-MMUBH76A.js';
+import { __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
 import { X } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var MD_MEDIA_QUERY = "(min-width: 768px)";
+var CONTAINER_TITLE = { drawer: DrawerTitle, dialog: DialogTitle, sheet: SheetTitle };
+var CONTAINER_DESCRIPTION = {
+  drawer: DrawerDescription,
+  dialog: DialogDescription,
+  sheet: SheetDescription
+};
 function useFocusReturn(open) {
   const openerRef = React.useRef(null);
   const wasOpen = React.useRef(false);
@@ -44,17 +51,23 @@ var ResponsiveOverlay = React.forwardRef(
     footer,
     closeLabel = "Close",
     size = "lg",
+    desktop = "dialog",
+    modal = true,
+    wideFrom = "md",
     className,
     bodyClassName
   }, ref) => {
-    const isWide = useMediaQuery(MD_MEDIA_QUERY);
+    const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
+    const container = isWide ? desktop : "drawer";
     const titleId = React.useId();
     const subtitleId = React.useId();
     useFocusReturn(open);
+    const Title = CONTAINER_TITLE[container];
+    const Description = CONTAINER_DESCRIPTION[container];
     const header = /* @__PURE__ */ jsxs("div", { "data-slot": "responsive-overlay-header", className: "flex items-start gap-3 px-5 pt-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        isWide ? /* @__PURE__ */ jsx(DialogTitle, { id: titleId, className: "text-[19px] font-bold leading-tight", children: title }) : /* @__PURE__ */ jsx(DrawerTitle, { id: titleId, className: "text-[19px] font-bold leading-tight", children: title }),
-        subtitle ? isWide ? /* @__PURE__ */ jsx(DialogDescription, { id: subtitleId, className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : /* @__PURE__ */ jsx(DrawerDescription, { id: subtitleId, className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
+        /* @__PURE__ */ jsx(Title, { id: titleId, className: "text-[19px] font-bold leading-tight", children: title }),
+        subtitle ? /* @__PURE__ */ jsx(Description, { id: subtitleId, className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
       ] }),
       /* @__PURE__ */ jsxs(
         "button",
@@ -86,7 +99,33 @@ var ResponsiveOverlay = React.forwardRef(
         children: footer
       }
     ) : null;
-    if (isWide) {
+    if (container === "sheet") {
+      return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, modal, children: /* @__PURE__ */ jsxs(
+        SheetContent,
+        __spreadProps(__spreadValues({
+          ref,
+          side: "right",
+          attachment: "inset",
+          hideClose: true,
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
+          "aria-labelledby": titleId,
+          "aria-describedby": subtitle ? subtitleId : void 0,
+          "data-slot": "responsive-overlay-sheet",
+          "data-modal": modal ? "true" : "false"
+        }, modal ? {} : { onInteractOutside: (event) => event.preventDefault() }), {
+          className: cn(
+            "flex w-[420px] max-w-[calc(100vw-1.5rem)] flex-col gap-0 bg-card p-0",
+            className
+          ),
+          children: [
+            header,
+            body,
+            foot
+          ]
+        })
+      ) });
+    }
+    if (container === "dialog") {
       return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
         DialogContent,
         {