@avenue-ticketing/ui 0.4.0 → 0.6.0

package/dist/react/dropdown.js

@@ -1,5 +1,5 @@
-import * as React2 from 'react';
-import React2__default, { useCallback, useState, useRef, useMemo, useEffect, useLayoutEffect } from 'react';
+import * as React3 from 'react';
+import React3__default, { useState, useCallback, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { X, ChevronDown, Check, ChevronRight } from 'lucide-react';
 import { clsx } from 'clsx';
@@ -10,7 +10,7 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var sizeClass = {
-  xs: "h-8 min-h-8 gap-2 px-4 text-xs has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3",
+  xs: "h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3",
   default: "h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4",
   lg: "h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5"
 };
@@ -30,7 +30,7 @@ var variantClass = {
   destructive: "bg-background text-red-500 border border-red-500/25 hover:bg-red-500/5",
   success: "bg-background text-green-500 border border-green-500/25 hover:bg-green-500/5"
 };
-var Button = React2.forwardRef(
+var Button = React3.forwardRef(
   ({
     className,
     type = "button",
@@ -50,9 +50,9 @@ var Button = React2.forwardRef(
         "data-slot": "button",
         "data-icon-only": iconOnly ? "" : void 0,
         className: cn(
-          "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:shrink-0",
+          "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none scale-100 transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] active:duration-100 active:ease-linear [&_svg]:pointer-events-none [&_svg]:shrink-0",
           "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-          "focus-visible:border-ring font-bold tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "focus-visible:border-ring font-medium lg:tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]",
           iconOnly ? iconOnlySizeClass[size] : sizeClass[size],
           roundedClass[rounded],
           variantClass[variant],
@@ -65,6 +65,122 @@ var Button = React2.forwardRef(
   }
 );
 Button.displayName = "Button";
+var CHECKBOX_TICK_DELAY_MS = 60;
+var CHECKBOX_TICK_DRAW_MS = 100;
+function CheckboxAnimatedCheckMark() {
+  const lineRef = useRef(null);
+  useLayoutEffect(() => {
+    const poly = lineRef.current;
+    if (!poly || typeof poly.getTotalLength !== "function") return;
+    const len = poly.getTotalLength();
+    if (len <= 0) return;
+    poly.style.strokeDasharray = `${len}`;
+    poly.style.strokeDashoffset = `${len}`;
+    if (typeof poly.animate !== "function") {
+      poly.style.strokeDashoffset = "0";
+      return;
+    }
+    const anim = poly.animate(
+      [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],
+      {
+        duration: CHECKBOX_TICK_DRAW_MS,
+        delay: CHECKBOX_TICK_DELAY_MS,
+        easing: "cubic-bezier(0.45, 0, 0.2, 1)",
+        fill: "forwards"
+      }
+    );
+    return () => anim.cancel();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "size-4 shrink-0 overflow-visible",
+      viewBox: "0 0 24 24",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          ref: lineRef,
+          points: "4 12 9 17 20 6",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+var Checkbox = React3.forwardRef(
+  ({
+    checked: checkedProp,
+    defaultChecked = false,
+    onCheckedChange,
+    indeterminate = false,
+    disabled = false,
+    className,
+    onClick,
+    ...rest
+  }, ref) => {
+    const isControlled = checkedProp !== void 0;
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
+    const checked = isControlled ? checkedProp : uncontrolledChecked;
+    const ariaChecked = indeterminate ? "mixed" : checked ? true : false;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "checkbox",
+        "data-slot": "checkbox",
+        "data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
+        disabled,
+        "aria-checked": ariaChecked,
+        className: cn(
+          "ring-offset-background focus-visible:ring-primary/40 inline-flex shrink-0 items-center justify-center rounded-md border border-transparent p-0 outline-none select-none",
+          "focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed",
+          className
+        ),
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          if (disabled) return;
+          if (isControlled) {
+            onCheckedChange?.(!checked);
+            return;
+          }
+          setUncontrolledChecked((prev) => {
+            const next = !prev;
+            onCheckedChange?.(next);
+            return next;
+          });
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "flex size-5 shrink-0 items-center justify-center rounded-[4px] border",
+              !disabled && (indeterminate ? "border-primary bg-primary text-background" : checked ? "border-primary bg-primary text-background" : "border-primary/20 bg-background"),
+              disabled && (indeterminate ? "border-transparent bg-primary/45 text-primary-foreground" : checked ? "border-transparent bg-primary/45 text-primary-foreground" : "border-primary/10 bg-muted/25")
+            ),
+            children: indeterminate ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "size-2.5 shrink-0 rounded-[2px] border border-primary/20 bg-background",
+                "aria-hidden": true
+              }
+            ) : checked ? /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, {}) : null
+          }
+        ) })
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
 var DROPDOWN_PANEL_OPEN_EASING = "cubic-bezier(0,0.55,0.45,1)";
 var DROPDOWN_PANEL_CLOSE_EASING = "cubic-bezier(0.55,0,1,0.45)";
 var DROPDOWN_MENU_MIN_WIDTH_PX = 192;
@@ -73,7 +189,31 @@ var DROPDOWN_MOBILE_SHEET_MOTION_MS = 175;
 var DROPDOWN_MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
 var DROPDOWN_MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
 var DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX = 120;
+function resolveDropdownMobileSheet(mobileOptions) {
+  return {
+    sheet: mobileOptions?.sheet ?? true,
+    title: mobileOptions?.title,
+    sheetExtraClassName: mobileOptions?.className,
+    contentClassName: mobileOptions?.contentClassName
+  };
+}
 var DROPDOWN_SUB_CONTENT_ATTR = "data-dropdown-sub-content";
+var DROPDOWN_PANEL_SHADOW = "shadow-[0_12px_32px_-8px_rgba(0,0,0,0.18),0_2px_6px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_12px_32px_-8px_rgba(0,0,0,0.55),0_2px_6px_-2px_rgba(0,0,0,0.35)]";
+var DROPDOWN_PANEL_SCROLL = "[&_*]:[scrollbar-width:none] [&_*::-webkit-scrollbar]:hidden [&_*]:overscroll-contain";
+function preventMenuWheelChain(menu, e) {
+  let el = e.target;
+  while (el && menu.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();
+}
 var DROPDOWN_SHEET_MENU_TEXT = "max-[1024px]:text-base";
 var DROPDOWN_SHEET_MENU_SHORTCUT = "max-[1024px]:text-sm";
 var DROPDOWN_SHEET_MENU_LABEL_TEXT = "max-[1024px]:text-sm";
@@ -164,24 +304,26 @@ function computePos(trigger, menu, side, align, offset, pad) {
   return { top, left, side: effectiveSide };
 }
 function useIsMobile(breakpoint = 1025) {
-  const [isMobile, setIsMobile] = useState(false);
+  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 DropdownContext = React2__default.createContext(void 0);
+var DropdownContext = React3__default.createContext(void 0);
 function useDropdown() {
-  const ctx = React2__default.useContext(DropdownContext);
+  const ctx = React3__default.useContext(DropdownContext);
   if (!ctx)
     throw new Error("Dropdown components must be used within <Dropdown />");
   return ctx;
 }
-var SubContext = React2__default.createContext(void 0);
+var SubContext = React3__default.createContext(void 0);
 var Dropdown = ({
   children,
   open: controlledOpen,
@@ -214,7 +356,7 @@ function mergeTriggerRef(triggerRef, node, childRef) {
   else if (childRef && typeof childRef === "object")
     childRef.current = node;
 }
-var DropdownTrigger = React2__default.forwardRef(
+var DropdownTrigger = React3__default.forwardRef(
   ({
     children,
     asChild,
@@ -241,9 +383,9 @@ var DropdownTrigger = React2__default.forwardRef(
       },
       [ref, triggerRef]
     );
-    if (asChild && React2__default.isValidElement(children)) {
+    if (asChild && React3__default.isValidElement(children)) {
       const child = children;
-      return React2__default.cloneElement(child, {
+      return React3__default.cloneElement(child, {
         ref: (node) => {
           mergeTriggerRef(
             triggerRef,
@@ -296,7 +438,7 @@ function DropdownChevron({
     }
   );
 }
-var DropdownMobileClose = React2__default.forwardRef(({ className, type = "button", ...props }, ref) => {
+var DropdownMobileClose = React3__default.forwardRef(({ className, type = "button", ...props }, ref) => {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -320,10 +462,13 @@ function DropdownMobileBottomSheetPortal({
   isAnimating,
   slideEntrance,
   slideOffsetPx,
-  mobileTitle,
+  sheetTitle,
+  sheetExtraClassName,
+  contentClassName,
   onRequestClose,
   menuRef,
   portalZClassName = "z-50",
+  isSubPortal = false,
   children,
   className,
   style,
@@ -335,6 +480,7 @@ function DropdownMobileBottomSheetPortal({
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ...isSubPortal ? { [DROPDOWN_SUB_CONTENT_ATTR]: "" } : {},
         className: cn(
           "fixed inset-0 flex items-end justify-center p-0",
           portalZClassName
@@ -361,8 +507,10 @@ function DropdownMobileBottomSheetPortal({
               ...panelProps,
               ref: menuRef,
               className: cn(
-                "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",
+                "bg-background border-primary/8 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",
+                DROPDOWN_PANEL_SCROLL,
+                sheetExtraClassName,
                 className
               ),
               style: {
@@ -379,10 +527,10 @@ function DropdownMobileBottomSheetPortal({
                   {
                     className: cn(
                       "flex w-full shrink-0 items-center py-2 pl-4 pr-2",
-                      mobileTitle ? "justify-between gap-3" : "justify-end"
+                      sheetTitle ? "justify-between gap-3" : "justify-end"
                     ),
                     children: [
-                      mobileTitle ? /* @__PURE__ */ jsx("p", { className: "text-foreground min-w-0 flex-1 truncate text-base font-semibold", children: mobileTitle }) : null,
+                      sheetTitle ? /* @__PURE__ */ jsx("p", { className: "text-foreground min-w-0 flex-1 truncate text-base font-semibold", children: sheetTitle }) : null,
                       /* @__PURE__ */ jsx(
                         DropdownMobileClose,
                         {
@@ -395,7 +543,16 @@ function DropdownMobileBottomSheetPortal({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pb-[max(0.375rem,env(safe-area-inset-bottom,0px))]", children: /* @__PURE__ */ jsx("div", { className: "pb-1", children }) })
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
+                      contentClassName
+                    ),
+                    children
+                  }
+                )
               ]
             }
           )
@@ -415,8 +572,7 @@ var DropdownContent = ({
   closeOnEscape = true,
   minWidth = "trigger",
   loop = true,
-  mobileSheet = true,
-  mobileTitle,
+  mobileOptions,
   slideEntrance = true,
   slideEntranceOffsetPx: slideEntranceOffsetPxProp,
   className,
@@ -430,21 +586,25 @@ var DropdownContent = ({
   const [pos, setPos] = useState({ top: -9999, left: -9999, side });
   const [triggerW, setTriggerW] = useState(0);
   const menuRef = useRef(null);
-  const slideOffsetPx = useMemo(
-    () => slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX,
-    [slideEntranceOffsetPxProp]
-  );
-  const closeDuration = isMobile && mobileSheet ? DROPDOWN_MOBILE_SHEET_MOTION_MS : duration;
-  const closeMenu = useCallback(() => setOpen(false), [setOpen]);
+  const resolvedMobile = resolveDropdownMobileSheet(mobileOptions);
+  const isMobileSheet = isMobile && resolvedMobile.sheet;
+  const slideOffsetPx = slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX;
   useEffect(() => {
     if (open) {
       setShouldRender(true);
-    } else {
-      setIsAnimating(false);
-      const timer = setTimeout(() => setShouldRender(false), closeDuration);
-      return () => clearTimeout(timer);
+      return;
+    }
+    if (!isMobileSheet) {
+      setShouldRender(false);
+      return;
     }
-  }, [open, closeDuration]);
+    setIsAnimating(false);
+    const t = setTimeout(
+      () => setShouldRender(false),
+      DROPDOWN_MOBILE_SHEET_MOTION_MS
+    );
+    return () => clearTimeout(t);
+  }, [open, isMobileSheet]);
   useEffect(() => {
     if (!shouldRender || !open) return;
     let raf2 = 0;
@@ -474,12 +634,27 @@ var DropdownContent = ({
     };
     update();
     window.addEventListener("resize", update);
-    window.addEventListener("scroll", update, true);
     return () => {
       window.removeEventListener("resize", update);
-      window.removeEventListener("scroll", update, true);
     };
   }, [shouldRender, side, align, offset, viewportPadding]);
+  useEffect(() => {
+    if (!open || isMobileSheet) return;
+    const isInsideMenu = (t) => t instanceof Node && (!!menuRef.current?.contains(t) || !!triggerRef.current?.contains(t) || t instanceof Element && !!t.closest(`[${DROPDOWN_SUB_CONTENT_ATTR}]`));
+    const onScroll = (e) => {
+      if (!isInsideMenu(e.target)) setOpen(false);
+    };
+    window.addEventListener("scroll", onScroll, true);
+    return () => window.removeEventListener("scroll", onScroll, true);
+  }, [open, isMobileSheet, setOpen, triggerRef]);
+  useEffect(() => {
+    if (!shouldRender || isMobileSheet) return;
+    const menu = menuRef.current;
+    if (!menu) return;
+    const onWheel = (e) => preventMenuWheelChain(menu, e);
+    menu.addEventListener("wheel", onWheel, { passive: false });
+    return () => menu.removeEventListener("wheel", onWheel);
+  }, [shouldRender, isMobileSheet]);
   useEffect(() => {
     if (isAnimating && menuRef.current) {
       menuRef.current.focus();
@@ -545,15 +720,14 @@ var DropdownContent = ({
     return () => window.removeEventListener("keydown", handler);
   }, [open, closeOnEscape, loop, setOpen, triggerRef]);
   useEffect(() => {
-    if (open && isMobile && mobileSheet) {
-      document.body.style.overflow = "hidden";
-    }
+    if (!open || !isMobileSheet) return;
+    document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = "";
     };
-  }, [open, isMobile, mobileSheet]);
+  }, [open, isMobileSheet]);
   if (!shouldRender || typeof document === "undefined") return null;
-  if (isMobile && mobileSheet) {
+  if (isMobileSheet) {
     return /* @__PURE__ */ jsx(
       DropdownMobileBottomSheetPortal,
       {
@@ -562,8 +736,10 @@ var DropdownContent = ({
         isAnimating,
         slideEntrance,
         slideOffsetPx,
-        mobileTitle,
-        onRequestClose: closeMenu,
+        sheetTitle: resolvedMobile.title,
+        sheetExtraClassName: resolvedMobile.sheetExtraClassName,
+        contentClassName: resolvedMobile.contentClassName,
+        onRequestClose: () => setOpen(false),
         menuRef,
         portalZClassName: "z-50",
         className,
@@ -586,7 +762,9 @@ var DropdownContent = ({
         "aria-orientation": "vertical",
         tabIndex: -1,
         className: cn(
-          "bg-background border-primary/10 absolute z-50 overflow-hidden rounded-xl border py-1.5 shadow-xl outline-none",
+          "bg-background border-primary/8 absolute z-50 overflow-hidden rounded-xl border py-1.5 outline-none",
+          DROPDOWN_PANEL_SHADOW,
+          DROPDOWN_PANEL_SCROLL,
           className
         ),
         style: {
@@ -649,7 +827,7 @@ var DropdownItem = ({
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       className: cn(
-        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors outline-none select-none",
+        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
         DROPDOWN_SHEET_MENU_TEXT,
         inset && "pl-9",
         !disabled && "cursor-pointer",
@@ -662,7 +840,7 @@ var DropdownItem = ({
       ),
       children: [
         icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children }),
         shortcut ? /* @__PURE__ */ jsx(
           "span",
           {
@@ -698,53 +876,6 @@ var DropdownLabel = ({ className, inset, ...props }) => /* @__PURE__ */ jsx(
     ...props
   }
 );
-var DROPDOWN_CHECKBOX_TICK_DELAY_MS = 60;
-var DROPDOWN_CHECKBOX_TICK_DRAW_MS = 200;
-function DropdownCheckboxItemCheckMark() {
-  const lineRef = useRef(null);
-  useLayoutEffect(() => {
-    const poly = lineRef.current;
-    if (!poly || typeof poly.getTotalLength !== "function") return;
-    const len = poly.getTotalLength();
-    if (len <= 0) return;
-    poly.style.strokeDasharray = `${len}`;
-    poly.style.strokeDashoffset = `${len}`;
-    if (typeof poly.animate !== "function") {
-      poly.style.strokeDashoffset = "0";
-      return;
-    }
-    const anim = poly.animate(
-      [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],
-      {
-        duration: DROPDOWN_CHECKBOX_TICK_DRAW_MS,
-        delay: DROPDOWN_CHECKBOX_TICK_DELAY_MS,
-        easing: "cubic-bezier(0.45, 0, 0.2, 1)",
-        fill: "forwards"
-      }
-    );
-    return () => anim.cancel();
-  }, []);
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: "size-4 shrink-0 overflow-visible",
-      viewBox: "0 0 24 24",
-      "aria-hidden": true,
-      children: /* @__PURE__ */ jsx(
-        "polyline",
-        {
-          ref: lineRef,
-          points: "4 12 9 17 20 6",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-}
 var DropdownCheckboxItem = ({
   children,
   checked = false,
@@ -780,25 +911,22 @@ var DropdownCheckboxItem = ({
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       className: cn(
-        "mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors outline-none select-none",
+        "mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
         DROPDOWN_SHEET_MENU_TEXT,
         !disabled && "cursor-pointer text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
         disabled && "lg:cursor-not-allowed text-foreground/45 dark:text-foreground/50",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
-          "span",
+        /* @__PURE__ */ jsx("span", { className: "mr-1 inline-flex shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+          Checkbox,
           {
-            "aria-hidden": true,
-            className: cn(
-              "pointer-events-none flex size-5 shrink-0 items-center justify-center rounded-[4px] border mr-1",
-              !disabled && (checked ? "border-primary bg-primary text-background" : "border-primary/20 bg-background"),
-              disabled && (checked ? "border-primary/40 bg-primary/45 text-primary-foreground" : "border-primary/10 bg-muted/25")
-            ),
-            children: checked ? /* @__PURE__ */ jsx(DropdownCheckboxItemCheckMark, {}) : null
+            checked,
+            disabled,
+            tabIndex: -1,
+            className: "pointer-events-none"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children }),
         shortcut && /* @__PURE__ */ jsx(
           "span",
@@ -834,11 +962,11 @@ var DropdownRadioGroup = ({ children, value, onValueChange, group }) => {
   );
   return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: radioCtx, children });
 };
-var RadioGroupContext = React2__default.createContext(
+var RadioGroupContext = React3__default.createContext(
   void 0
 );
 function useRadioGroup() {
-  const ctx = React2__default.useContext(RadioGroupContext);
+  const ctx = React3__default.useContext(RadioGroupContext);
   if (!ctx)
     throw new Error("DropdownRadioItem must be inside DropdownRadioGroup");
   return ctx;
@@ -879,7 +1007,7 @@ var DropdownRadioItem = ({
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       className: cn(
-        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors outline-none select-none",
+        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
         DROPDOWN_SHEET_MENU_TEXT,
         !disabled && "cursor-pointer text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
         disabled && "lg:cursor-not-allowed text-foreground/45 dark:text-foreground/50",
@@ -909,21 +1037,19 @@ var DropdownRadioItem = ({
     }
   );
 };
-var DropdownSub = ({
-  children
-}) => {
+var DropdownSub = ({ children, openOnHover = true }) => {
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
   const subCtx = useMemo(
-    () => ({ open, setOpen, triggerRef }),
-    [open, setOpen]
+    () => ({ open, setOpen, triggerRef, openOnHover }),
+    [open, setOpen, openOnHover]
   );
   return /* @__PURE__ */ jsx(SubContext.Provider, { value: subCtx, children });
 };
 var DropdownSubTrigger = ({ children, icon, inset, disabled = false, className, ...props }) => {
-  const sub = React2__default.useContext(SubContext);
+  const sub = React3__default.useContext(SubContext);
   if (!sub) throw new Error("DropdownSubTrigger must be inside DropdownSub");
-  const { open, setOpen, triggerRef } = sub;
+  const { open, setOpen, triggerRef, openOnHover } = sub;
   const isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -938,11 +1064,11 @@ var DropdownSubTrigger = ({ children, icon, inset, disabled = false, className,
       tabIndex: disabled ? void 0 : -1,
       "aria-disabled": disabled,
       onMouseEnter: () => {
-        if (disabled || isMobile) return;
+        if (disabled || isMobile || !openOnHover) return;
         setOpen(true);
       },
       onMouseLeave: () => {
-        if (isMobile) return;
+        if (isMobile || !openOnHover) return;
         setOpen(false);
       },
       onKeyDown: (e) => {
@@ -957,7 +1083,7 @@ var DropdownSubTrigger = ({ children, icon, inset, disabled = false, className,
         setOpen(!open);
       },
       className: cn(
-        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors outline-none select-none",
+        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
         DROPDOWN_SHEET_MENU_TEXT,
         inset && "pl-9",
         !disabled && "cursor-pointer text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
@@ -966,8 +1092,8 @@ var DropdownSubTrigger = ({ children, icon, inset, disabled = false, className,
       ),
       children: [
         icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
-        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4 opacity-50" })
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4 shrink-0 opacity-50" })
       ]
     }
   );
@@ -976,8 +1102,7 @@ var DropdownSubContent = ({
   children,
   duration = 80,
   viewportPadding = 8,
-  mobileSheet = true,
-  mobileTitle,
+  mobileOptions,
   slideEntrance = true,
   slideEntranceOffsetPx: slideEntranceOffsetPxProp,
   className,
@@ -985,14 +1110,13 @@ var DropdownSubContent = ({
   onKeyDown: onKeyDownProp,
   ...props
 }) => {
-  const sub = React2__default.useContext(SubContext);
+  const sub = React3__default.useContext(SubContext);
   if (!sub) throw new Error("DropdownSubContent must be inside DropdownSub");
-  const { open, setOpen, triggerRef } = sub;
+  const { open, setOpen, triggerRef, openOnHover } = sub;
   const isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
-  const slideOffsetPx = useMemo(
-    () => slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX,
-    [slideEntranceOffsetPxProp]
-  );
+  const resolvedMobile = resolveDropdownMobileSheet(mobileOptions);
+  const isMobileSheet = isMobile && resolvedMobile.sheet;
+  const slideOffsetPx = slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX;
   const [shouldRender, setShouldRender] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
   const [pos, setPos] = useState({
@@ -1001,17 +1125,22 @@ var DropdownSubContent = ({
     side: "right"
   });
   const menuRef = useRef(null);
-  const closeDuration = isMobile && mobileSheet ? DROPDOWN_MOBILE_SHEET_MOTION_MS : duration;
-  const closeSub = useCallback(() => setOpen(false), [setOpen]);
   useEffect(() => {
     if (open) {
       setShouldRender(true);
-    } else {
-      setIsAnimating(false);
-      const timer = setTimeout(() => setShouldRender(false), closeDuration);
-      return () => clearTimeout(timer);
+      return;
+    }
+    if (!isMobileSheet) {
+      setShouldRender(false);
+      return;
     }
-  }, [open, closeDuration]);
+    setIsAnimating(false);
+    const t = setTimeout(
+      () => setShouldRender(false),
+      DROPDOWN_MOBILE_SHEET_MOTION_MS
+    );
+    return () => clearTimeout(t);
+  }, [open, isMobileSheet]);
   useEffect(() => {
     if (!shouldRender || !open) return;
     let raf2 = 0;
@@ -1024,8 +1153,8 @@ var DropdownSubContent = ({
     };
   }, [shouldRender, open]);
   useLayoutEffect(() => {
-    if (!shouldRender || !triggerRef.current || !menuRef.current) return;
-    if (isMobile && mobileSheet) return;
+    if (!shouldRender || isMobileSheet) return;
+    if (!triggerRef.current || !menuRef.current) return;
     const update = () => {
       if (!triggerRef.current || !menuRef.current) return;
       setPos(
@@ -1041,12 +1170,29 @@ var DropdownSubContent = ({
     };
     update();
     window.addEventListener("resize", update);
-    window.addEventListener("scroll", update, true);
     return () => {
       window.removeEventListener("resize", update);
-      window.removeEventListener("scroll", update, true);
     };
-  }, [shouldRender, viewportPadding, isMobile, mobileSheet]);
+  }, [shouldRender, viewportPadding, isMobileSheet]);
+  useEffect(() => {
+    if (!open || isMobileSheet) return;
+    const onScroll = (e) => {
+      const t = e.target;
+      if (!(t instanceof Node) || menuRef.current?.contains(t)) return;
+      const trigger = triggerRef.current;
+      if (trigger && (t === trigger || t.contains(trigger))) setOpen(false);
+    };
+    window.addEventListener("scroll", onScroll, true);
+    return () => window.removeEventListener("scroll", onScroll, true);
+  }, [open, isMobileSheet, setOpen, triggerRef]);
+  useEffect(() => {
+    if (!shouldRender || isMobileSheet) return;
+    const menu = menuRef.current;
+    if (!menu) return;
+    const onWheel = (e) => preventMenuWheelChain(menu, e);
+    menu.addEventListener("wheel", onWheel, { passive: false });
+    return () => menu.removeEventListener("wheel", onWheel);
+  }, [shouldRender, isMobileSheet]);
   useEffect(() => {
     if (isAnimating && menuRef.current) {
       menuRef.current.focus();
@@ -1107,7 +1253,7 @@ var DropdownSubContent = ({
     [onKeyDownProp, setOpen, triggerRef]
   );
   if (!shouldRender || typeof document === "undefined") return null;
-  if (isMobile && mobileSheet) {
+  if (isMobileSheet) {
     return /* @__PURE__ */ jsx(
       DropdownMobileBottomSheetPortal,
       {
@@ -1116,10 +1262,13 @@ var DropdownSubContent = ({
         isAnimating,
         slideEntrance,
         slideOffsetPx,
-        mobileTitle,
-        onRequestClose: closeSub,
+        sheetTitle: resolvedMobile.title,
+        sheetExtraClassName: resolvedMobile.sheetExtraClassName,
+        contentClassName: resolvedMobile.contentClassName,
+        onRequestClose: () => setOpen(false),
         menuRef,
         portalZClassName: "z-[70]",
+        isSubPortal: true,
         className,
         style,
         role: "menu",
@@ -1138,12 +1287,14 @@ var DropdownSubContent = ({
         ref: menuRef,
         role: "menu",
         tabIndex: -1,
-        onMouseEnter: () => setOpen(true),
-        onMouseLeave: () => setOpen(false),
+        onMouseEnter: openOnHover ? () => setOpen(true) : void 0,
+        onMouseLeave: openOnHover ? () => setOpen(false) : void 0,
         onKeyDown: handleSubMenuKeyDown,
         "data-dropdown-sub-content": "",
         className: cn(
-          "bg-background border-primary/10 absolute z-60 overflow-hidden rounded-xl border py-1.5 shadow-xl outline-none",
+          "bg-background border-primary/8 absolute z-60 overflow-hidden rounded-xl border py-1.5 outline-none",
+          DROPDOWN_PANEL_SHADOW,
+          DROPDOWN_PANEL_SCROLL,
           className
         ),
         style: {