@avenue-ticketing/ui 0.11.0 → 0.12.0-beta.2

package/dist/react/popover.js

@@ -1,355 +1,59 @@
-import React, { useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
+import { useMemo, useContext, useEffect, useState, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { X } from 'lucide-react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
+import { OverlayTriggerStateContext, Popover as Popover$1 } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var POPOVER_MOBILE_SHEET_MAX_PX = 1024;
-var POPOVER_MOBILE_SHEET_MOTION_MS = 175;
-var POPOVER_MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
-var POPOVER_MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
-var POPOVER_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX = 120;
-var POPOVER_FLIP_MIN_SPACE_PX = 100;
-function preventPopoverWheelChain(panel, e) {
-  let el = e.target;
-  while (el && panel.contains(el)) {
-    const oy = getComputedStyle(el).overflowY;
-    if ((oy === "auto" || oy === "scroll") && el.scrollHeight > el.clientHeight) {
-      const atTop = el.scrollTop <= 0;
-      const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight;
-      if (e.deltaY < 0 && !atTop || e.deltaY > 0 && !atBottom) return;
-      break;
-    }
-    el = el.parentElement;
-  }
-  e.preventDefault();
-}
-function usePopoverIsMobile(breakpoint = 1025) {
-  const [isMobile, setIsMobile] = useState(false);
+var MOBILE_SHEET_MAX_PX = 1024;
+function useIsMobile(breakpoint = MOBILE_SHEET_MAX_PX + 1) {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;
+  });
   useEffect(() => {
     const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
-    setIsMobile(mq.matches);
     const handler = (e) => setIsMobile(e.matches);
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, [breakpoint]);
   return isMobile;
 }
-var PopoverContext = React.createContext(
-  void 0
-);
-function usePopover() {
-  const context = React.useContext(PopoverContext);
-  if (!context) {
-    throw new Error("Popover components must be used within a <Popover />");
-  }
-  return context;
-}
-var Popover = ({ children, open: controlledOpen, onOpenChange }) => {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = controlledOpen !== void 0;
-  const open = isControlled ? controlledOpen : internalOpen;
-  const triggerRef = useRef(null);
-  const setOpen = useCallback(
-    (value) => {
-      if (!isControlled) setInternalOpen(value);
-      onOpenChange?.(value);
-    },
-    [isControlled, onOpenChange]
-  );
-  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef }, children });
-};
-var PopoverTrigger = ({ children, asChild }) => {
-  const { open, setOpen, triggerRef } = usePopover();
-  const handleClick = (e) => {
-    e.stopPropagation();
-    setOpen(!open);
-  };
-  if (asChild && React.isValidElement(children)) {
-    const child = children;
-    return React.cloneElement(child, {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ref: (el) => {
-        triggerRef.current = el;
-      },
-      onClick: (e) => {
-        child.props.onClick?.(e);
-        handleClick(e);
-      }
-    });
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      ref: (el) => {
-        triggerRef.current = el;
-      },
-      onClick: handleClick,
-      children
-    }
-  );
-};
-var PopoverClose = ({ children, asChild }) => {
-  const { setOpen } = usePopover();
-  const handleClick = () => setOpen(false);
-  if (asChild && React.isValidElement(children)) {
-    const child = children;
-    return React.cloneElement(child, {
-      onClick: (e) => {
-        child.props.onClick?.(e);
-        handleClick();
-      }
-    });
-  }
-  return /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClick, children });
-};
-function resolvePopoverMobileSheet(mobileOptions) {
+var MOBILE_SHEET_MOTION_MS = 175;
+var MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
+var MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
+var MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX = 120;
+function resolveSelectMobileOptions(mobileOptions) {
   return {
-    sheet: mobileOptions?.sheet ?? false,
+    sheet: mobileOptions?.sheet ?? true,
     title: mobileOptions?.title,
-    sheetExtraClassName: mobileOptions?.className,
+    sheetClassName: mobileOptions?.className,
     contentClassName: mobileOptions?.contentClassName
   };
 }
-var PopoverMobileClose = React.forwardRef(({ className, type = "button", ...props }, ref) => {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ref,
-      type,
-      className: cn(
-        "z-100 flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full transition-all hover:bg-secondary-background active:scale-[0.96]",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-      ]
-    }
-  );
-});
-PopoverMobileClose.displayName = "PopoverMobileClose";
-function PopoverMobileBottomSheetPortal({
-  open,
-  isAnimating,
-  slideEntrance,
-  slideOffsetPx,
-  sheetTitle,
-  sheetExtraClassName,
-  contentClassName,
-  onRequestClose,
-  menuRef,
-  dismissOnBackdropPress = true,
-  children,
-  className,
-  style,
-  ...panelProps
-}) {
-  const sheetMotion = open ? POPOVER_MOBILE_SHEET_ENTRY_EASING : POPOVER_MOBILE_SHEET_EXIT_EASING;
-  const sheetHiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
-  return createPortal(
-    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-end justify-center p-0", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "fixed inset-0 bg-black/40 dark:bg-primary/4",
-            isAnimating ? "opacity-100" : "opacity-0"
-          ),
-          style: {
-            transitionProperty: "opacity",
-            transitionDuration: `${POPOVER_MOBILE_SHEET_MOTION_MS}ms`,
-            transitionTimingFunction: sheetMotion
-          },
-          onClick: dismissOnBackdropPress ? onRequestClose : void 0,
-          "aria-hidden": true
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ...panelProps,
-          ref: menuRef,
-          className: cn(
-            // Panel chrome + padding rhythm matches `DropdownMobileBottomSheetPortal`.
-            "bg-background border-primary/10 relative z-10 flex w-full max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))] flex-col overflow-hidden shadow-2xl outline-none",
-            "rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t",
-            sheetExtraClassName,
-            className
-          ),
-          style: {
-            transform: isAnimating ? "translateY(0)" : sheetHiddenTransform,
-            opacity: isAnimating ? 1 : 0,
-            transitionProperty: "transform, opacity",
-            transitionDuration: `${POPOVER_MOBILE_SHEET_MOTION_MS}ms`,
-            transitionTimingFunction: sheetMotion,
-            ...style
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "flex w-full shrink-0 items-center py-2 pl-4 pr-2",
-                  sheetTitle ? "justify-between gap-3" : "justify-end"
-                ),
-                children: [
-                  sheetTitle ? /* @__PURE__ */ jsx("p", { className: "text-foreground min-w-0 flex-1 truncate text-base font-semibold", children: sheetTitle }) : null,
-                  /* @__PURE__ */ jsx(
-                    PopoverMobileClose,
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onRequestClose();
-                      }
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "min-h-0 flex-1 overflow-y-auto px-4 pt-3",
-                  contentClassName,
-                  "pb-[calc(5rem+env(safe-area-inset-bottom,0px))]"
-                ),
-                children
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
-}
-function computePosition(trigger, popover, side, align, offset, viewportPadding) {
-  const triggerRect = trigger.getBoundingClientRect();
-  const pw = popover.offsetWidth;
-  const ph = popover.offsetHeight;
-  const contentHeight = popover.scrollHeight;
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const pad = viewportPadding;
-  let top = 0;
-  let left = 0;
-  let effectiveSide = side;
-  let maxHeight;
-  const placeVertical = (s, height) => {
-    if (s === "bottom") top = triggerRect.bottom + offset;
-    else top = triggerRect.top - height - offset;
-    if (align === "start") left = triggerRect.left;
-    else if (align === "end") left = triggerRect.right - pw;
-    else left = triggerRect.left + triggerRect.width / 2 - pw / 2;
-  };
-  const place = (s, height = contentHeight) => {
-    switch (s) {
-      case "bottom":
-      case "top":
-        placeVertical(s, height);
-        break;
-      case "right":
-        left = triggerRect.right + offset;
-        top = align === "start" ? triggerRect.top : align === "end" ? triggerRect.bottom - ph : triggerRect.top + triggerRect.height / 2 - ph / 2;
-        break;
-      case "left":
-        left = triggerRect.left - pw - offset;
-        top = align === "start" ? triggerRect.top : align === "end" ? triggerRect.bottom - ph : triggerRect.top + triggerRect.height / 2 - ph / 2;
-        break;
-    }
-  };
-  place(side);
-  const spaceBelow = Math.max(0, vh - pad - triggerRect.bottom - offset);
-  const spaceAbove = Math.max(0, triggerRect.top - offset - pad);
-  if (side === "bottom" || side === "top") {
-    const primarySpace = side === "bottom" ? spaceBelow : spaceAbove;
-    const alternateSpace = side === "bottom" ? spaceAbove : spaceBelow;
-    const alternateSide = side === "bottom" ? "top" : "bottom";
-    if (contentHeight > primarySpace) {
-      maxHeight = Math.min(contentHeight, primarySpace);
-      place(side, maxHeight);
-    }
-    if (contentHeight > primarySpace && primarySpace < POPOVER_FLIP_MIN_SPACE_PX && alternateSpace > primarySpace) {
-      effectiveSide = alternateSide;
-      maxHeight = Math.min(contentHeight, alternateSpace);
-      place(alternateSide, maxHeight);
-    }
-  } else if (side === "right" && left + pw > vw - pad) {
-    const flippedLeft = triggerRect.left - pw - offset;
-    if (flippedLeft >= pad) {
-      effectiveSide = "left";
-      left = flippedLeft;
-    }
-  } else if (side === "left" && left < pad) {
-    const flippedLeft = triggerRect.right + offset;
-    if (flippedLeft + pw <= vw - pad) {
-      effectiveSide = "right";
-      left = flippedLeft;
-    }
-  }
-  return { top, left, side: effectiveSide, maxHeight };
-}
-var ARROW_SIZE = 6;
-var PopoverContent = ({
-  children,
-  side = "bottom",
-  align = "center",
-  offset = 10,
-  showArrow = false,
-  closeOnClickOutside = true,
-  closeOnEscape = true,
-  duration = 80,
-  viewportPadding = 8,
-  container,
-  width = "auto",
-  mobileOptions,
-  slideEntrance = true,
-  slideEntranceOffsetPx: slideEntranceOffsetPxProp,
-  className,
-  style,
-  ...props
-}) => {
-  const { open, setOpen, triggerRef } = usePopover();
-  const isMobile = usePopoverIsMobile(POPOVER_MOBILE_SHEET_MAX_PX + 1);
-  const resolvedMobile = useMemo(
-    () => resolvePopoverMobileSheet(mobileOptions),
-    [mobileOptions]
-  );
-  const sheetMode = isMobile && resolvedMobile.sheet;
-  const slideOffsetPx = useMemo(
-    () => slideEntranceOffsetPxProp ?? POPOVER_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX,
-    [slideEntranceOffsetPxProp]
-  );
-  const closeDuration = sheetMode ? POPOVER_MOBILE_SHEET_MOTION_MS : duration;
-  const [shouldRender, setShouldRender] = useState(false);
+function useMobileSheetAnimation(open, enabled, slideEntrance = true, slideOffsetPx = MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX) {
+  const [shouldRender, setShouldRender] = useState(open);
   const [isAnimating, setIsAnimating] = useState(false);
-  const [position, setPosition] = useState({
-    top: -9999,
-    left: -9999,
-    side
-  });
-  const [triggerWidth, setTriggerWidth] = useState(0);
-  const popoverRef = useRef(null);
-  const closePopover = useCallback(() => setOpen(false), [setOpen]);
-  useEffect(() => {
+  useLayoutEffect(() => {
+    if (!enabled) {
+      setShouldRender(open);
+      return;
+    }
     if (open) {
       setShouldRender(true);
-    } else {
-      setIsAnimating(false);
-      const timer = setTimeout(() => setShouldRender(false), closeDuration);
-      return () => clearTimeout(timer);
     }
-  }, [open, closeDuration]);
+  }, [open, enabled]);
+  useEffect(() => {
+    if (!enabled || open) return;
+    const timer = setTimeout(() => setShouldRender(false), MOBILE_SHEET_MOTION_MS);
+    return () => clearTimeout(timer);
+  }, [open, enabled]);
+  useLayoutEffect(() => {
+    if (!enabled || open || !shouldRender) return;
+    setIsAnimating(false);
+  }, [enabled, open, shouldRender]);
   useEffect(() => {
-    if (!shouldRender || !open) return;
+    if (!enabled || !shouldRender || !open) return;
     let raf2 = 0;
     const raf1 = requestAnimationFrame(() => {
       raf2 = requestAnimationFrame(() => setIsAnimating(true));
@@ -358,225 +62,152 @@ var PopoverContent = ({
       cancelAnimationFrame(raf1);
       if (raf2) cancelAnimationFrame(raf2);
     };
-  }, [shouldRender, open]);
-  useLayoutEffect(() => {
-    if (!shouldRender || !open || sheetMode || !triggerRef.current || !popoverRef.current)
-      return;
-    const update = () => {
-      if (!triggerRef.current || !popoverRef.current) return;
-      setTriggerWidth(triggerRef.current.getBoundingClientRect().width);
-      const pos = computePosition(
-        triggerRef.current,
-        popoverRef.current,
-        side,
-        align,
-        offset,
-        viewportPadding
-      );
-      setPosition(pos);
-    };
-    update();
-    window.addEventListener("resize", update);
-    window.addEventListener("scroll", update, true);
-    return () => {
-      window.removeEventListener("resize", update);
-      window.removeEventListener("scroll", update, true);
-    };
-  }, [shouldRender, open, sheetMode, side, align, offset, viewportPadding]);
-  useEffect(() => {
-    if (!shouldRender || !open || sheetMode || position.maxHeight == null) return;
-    const panel = popoverRef.current;
-    if (!panel) return;
-    const onWheel = (e) => preventPopoverWheelChain(panel, e);
-    panel.addEventListener("wheel", onWheel, { passive: false });
-    return () => panel.removeEventListener("wheel", onWheel);
-  }, [shouldRender, open, sheetMode, position.maxHeight]);
-  useEffect(() => {
-    if (open && sheetMode) {
-      document.body.style.overflow = "hidden";
+  }, [shouldRender, open, enabled]);
+  const motionEasing = open ? MOBILE_SHEET_ENTRY_EASING : MOBILE_SHEET_EXIT_EASING;
+  const hiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
+  const panelStyle = enabled ? {
+    transform: isAnimating ? "translateY(0)" : hiddenTransform,
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "transform, opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  const backdropStyle = enabled ? {
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  return { shouldRender, isAnimating, panelStyle, backdropStyle };
+}
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
     }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [open, sheetMode]);
-  useEffect(() => {
-    if (!open || !closeOnClickOutside || sheetMode) return;
-    const handler = (e) => {
-      const target = e.target;
-      if (popoverRef.current?.contains(target) || triggerRef.current?.contains(target))
-        return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, closeOnClickOutside, sheetMode, setOpen, triggerRef]);
-  useEffect(() => {
-    if (!open || !closeOnEscape) return;
-    const handler = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [open, closeOnEscape, setOpen]);
-  if (!shouldRender) return null;
-  if (sheetMode && typeof document !== "undefined") {
-    return /* @__PURE__ */ jsx(
-      PopoverMobileBottomSheetPortal,
+  }
+});
+var cx = twMerge;
+function MobileSheetCloseButton({ onClose }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClose();
+      },
+      className: "flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full text-fg-primary transition duration-100 ease-linear hover:bg-primary_hover active:scale-[0.96] focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+      children: [
+        /* @__PURE__ */ jsx(XIcon, { className: "size-5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  );
+}
+function MobileSheetChrome({
+  title,
+  contentClassName,
+  onClose,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cx("flex w-full shrink-0 items-center py-2 pl-4 pr-2", title ? "justify-between gap-3" : "justify-end"), children: [
+      title ? /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate text-base font-semibold text-primary", children: title }) : null,
+      /* @__PURE__ */ jsx(MobileSheetCloseButton, { onClose })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        ...props,
-        open,
-        isAnimating,
-        slideEntrance,
-        slideOffsetPx,
-        sheetTitle: resolvedMobile.title,
-        sheetExtraClassName: resolvedMobile.sheetExtraClassName,
-        contentClassName: cn(resolvedMobile.contentClassName, className),
-        onRequestClose: closePopover,
-        dismissOnBackdropPress: closeOnClickOutside,
-        menuRef: popoverRef,
-        role: "dialog",
-        "aria-modal": "true",
-        tabIndex: -1,
-        className: void 0,
-        style,
-        "data-slot": "popover-content",
+        className: cx(
+          "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
+          contentClassName
+        ),
         children
       }
-    );
-  }
-  const transformOrigin = {
-    bottom: "top center",
-    top: "bottom center",
-    left: "right center",
-    right: "left center"
-  };
-  const hiddenTransform = {
-    bottom: "translateY(-6px) scale(0.97)",
-    top: "translateY(6px) scale(0.97)",
-    left: "translateX(6px) scale(0.97)",
-    right: "translateX(-6px) scale(0.97)"
-  };
-  const resolvedWidth = width === "trigger" ? triggerWidth : width === "auto" ? void 0 : width;
-  const arrowStyles = () => {
-    const base = {
-      position: "absolute",
-      width: 0,
-      height: 0,
-      pointerEvents: "none"
+    )
+  ] });
+}
+var Popover = ({ mobileOptions, children, size, className, style, compoundContent = false, ...props }) => {
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveSelectMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileSheet = isMobile && resolvedMobile.sheet;
+  const overlayState = useContext(OverlayTriggerStateContext);
+  const open = overlayState?.isOpen ?? false;
+  const { shouldRender, panelStyle, backdropStyle } = useMobileSheetAnimation(open, useMobileSheet);
+  useEffect(() => {
+    if (!useMobileSheet || !open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
     };
-    switch (position.side) {
-      case "bottom":
-        return {
-          ...base,
-          top: -ARROW_SIZE,
-          left: "50%",
-          transform: "translateX(-50%)",
-          borderLeft: `${ARROW_SIZE}px solid transparent`,
-          borderRight: `${ARROW_SIZE}px solid transparent`,
-          borderBottom: `${ARROW_SIZE}px solid var(--border)`
-        };
-      case "top":
-        return {
-          ...base,
-          bottom: -ARROW_SIZE,
-          left: "50%",
-          transform: "translateX(-50%)",
-          borderLeft: `${ARROW_SIZE}px solid transparent`,
-          borderRight: `${ARROW_SIZE}px solid transparent`,
-          borderTop: `${ARROW_SIZE}px solid var(--border)`
-        };
-      case "right":
-        return {
-          ...base,
-          left: -ARROW_SIZE,
-          top: "50%",
-          transform: "translateY(-50%)",
-          borderTop: `${ARROW_SIZE}px solid transparent`,
-          borderBottom: `${ARROW_SIZE}px solid transparent`,
-          borderRight: `${ARROW_SIZE}px solid var(--border)`
-        };
-      case "left":
-        return {
-          ...base,
-          right: -ARROW_SIZE,
-          top: "50%",
-          transform: "translateY(-50%)",
-          borderTop: `${ARROW_SIZE}px solid transparent`,
-          borderBottom: `${ARROW_SIZE}px solid transparent`,
-          borderLeft: `${ARROW_SIZE}px solid var(--border)`
-        };
-    }
-  };
-  const resolvedContainer = container !== void 0 ? container : typeof document !== "undefined" ? document.body : null;
-  if (!resolvedContainer) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs(
+  }, [useMobileSheet, open]);
+  const close = () => overlayState?.close();
+  const showMobileSheet = useMobileSheet && shouldRender;
+  const isMobileSheetExiting = showMobileSheet && !open;
+  const mobileScrim = useMobileSheet && shouldRender && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(
       "div",
       {
+        className: "fixed inset-0 z-50 bg-overlay/70",
+        style: backdropStyle,
+        onClick: close,
+        "aria-hidden": "true"
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mobileScrim,
+    /* @__PURE__ */ jsx(
+      Popover$1,
+      {
+        placement: "bottom",
+        containerPadding: 0,
+        offset: 4,
         ...props,
-        ref: popoverRef,
-        className: cn(
-          "bg-background border-primary/10 fixed z-50 rounded-xl border shadow-xl outline-none",
-          className,
-          position.maxHeight != null ? "overflow-y-auto overscroll-contain" : "overflow-hidden"
+        isExiting: isMobileSheetExiting,
+        ...useMobileSheet ? { "data-select-mobile-sheet": true } : {},
+        style: useMobileSheet ? { ...panelStyle, ...style } : style,
+        className: (state) => cx(
+          "outline-hidden",
+          !useMobileSheet && [
+            "w-(--trigger-width) origin-(--trigger-anchor-point) rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform",
+            compoundContent ? "overflow-hidden outline-hidden" : "overflow-x-hidden overflow-y-auto py-1 outline-hidden",
+            state.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+            state.isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+            !compoundContent && size === "sm" && "max-h-56!",
+            !compoundContent && size === "md" && "max-h-64!",
+            !compoundContent && size === "lg" && "max-h-80!"
+          ],
+          useMobileSheet && [
+            "fixed! inset-x-0! bottom-0! top-auto! left-0! right-0! z-[51] flex w-full! max-w-none! flex-col overflow-hidden rounded-t-2xl rounded-b-none border-x-0 border-t border-secondary bg-primary shadow-xl",
+            "max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))]",
+            resolvedMobile.sheetClassName
+          ],
+          typeof className === "function" ? className(state) : className
         ),
-        "data-slot": "popover-content",
-        style: {
-          position: "fixed",
-          top: position.top,
-          left: position.left,
-          width: resolvedWidth,
-          maxHeight: position.maxHeight,
-          transformOrigin: transformOrigin[position.side],
-          transform: isAnimating ? "none" : hiddenTransform[position.side],
-          opacity: isAnimating ? 1 : 0,
-          transition: `opacity ${duration}ms ease, transform ${duration}ms ease`,
-          ...style
-        },
-        children: [
-          showArrow && /* @__PURE__ */ jsx("div", { style: arrowStyles() }),
-          children
-        ]
+        children: (state) => {
+          const content = typeof children === "function" ? children(state) : children;
+          if (useMobileSheet) {
+            return /* @__PURE__ */ jsx(
+              MobileSheetChrome,
+              {
+                title: resolvedMobile.title,
+                contentClassName: resolvedMobile.contentClassName,
+                onClose: close,
+                children: content
+              }
+            );
+          }
+          return content;
+        }
       }
-    ),
-    resolvedContainer
-  );
+    )
+  ] });
 };
-var PopoverHeader = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "border-primary/10 flex flex-col space-y-1 border-b px-4 py-3",
-      className
-    ),
-    ...props
-  }
-);
-var PopoverFooter = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "border-primary/10 flex flex-row justify-end gap-2 border-t px-4 py-3",
-      className
-    ),
-    ...props
-  }
-);
-var PopoverTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(
-  "h4",
-  {
-    className: cn("text-primary text-sm leading-none font-semibold", className),
-    ...props
-  }
-);
-var PopoverDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground text-xs", className), ...props });
 
-export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverMobileClose, PopoverTitle, PopoverTrigger };
+export { Popover };
 //# sourceMappingURL=popover.js.map
 //# sourceMappingURL=popover.js.map