@avenue-ticketing/ui 0.5.0 → 0.7.0

package/dist/react/checkbox.js

@@ -66,9 +66,7 @@ var Checkbox = React.forwardRef(
     ...rest
   }, ref) => {
     const isControlled = checkedProp !== void 0;
-    const [uncontrolledChecked, setUncontrolledChecked] = useState(
-      defaultChecked
-    );
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
     const checked = isControlled ? checkedProp : uncontrolledChecked;
     const ariaChecked = indeterminate ? "mixed" : checked ? true : false;
     return /* @__PURE__ */ jsx(
@@ -109,7 +107,7 @@ var Checkbox = React.forwardRef(
             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-primary/40 bg-primary/45 text-primary-foreground" : checked ? "border-primary/40 bg-primary/45 text-primary-foreground" : "border-primary/10 bg-muted/25")
+              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",

package/dist/react/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/checkbox.tsx"],"names":[],"mappings":"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","file":"checkbox.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst CHECKBOX_TICK_DELAY_MS = 60;\nconst CHECKBOX_TICK_DRAW_MS = 100;\n\nfunction CheckboxAnimatedCheckMark() {\n  const lineRef = useRef<SVGPolylineElement>(null);\n\n  useLayoutEffect(() => {\n    const poly = lineRef.current;\n    if (!poly || typeof poly.getTotalLength !== \"function\") return;\n    const len = poly.getTotalLength();\n    if (len <= 0) return;\n\n    poly.style.strokeDasharray = `${len}`;\n    poly.style.strokeDashoffset = `${len}`;\n\n    if (typeof poly.animate !== \"function\") {\n      poly.style.strokeDashoffset = \"0\";\n      return;\n    }\n\n    const anim = poly.animate(\n      [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],\n      {\n        duration: CHECKBOX_TICK_DRAW_MS,\n        delay: CHECKBOX_TICK_DELAY_MS,\n        easing: \"cubic-bezier(0.45, 0, 0.2, 1)\",\n        fill: \"forwards\",\n      },\n    );\n    return () => anim.cancel();\n  }, []);\n\n  return (\n    <svg\n      className=\"size-4 shrink-0 overflow-visible\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden\n    >\n      <polyline\n        ref={lineRef}\n        points=\"4 12 9 17 20 6\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nexport type CheckboxProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"type\" | \"role\" | \"aria-checked\" | \"children\"\n> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (next: boolean) => void;\n  // tri-state: same frame as checked; center shows a visible “blank” (inner surface)\n  indeterminate?: boolean;\n};\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      checked: checkedProp,\n      defaultChecked = false,\n      onCheckedChange,\n      indeterminate = false,\n      disabled = false,\n      className,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isControlled = checkedProp !== undefined;\n    const [uncontrolledChecked, setUncontrolledChecked] = useState(\n      defaultChecked,\n    );\n    const checked = isControlled ? checkedProp : uncontrolledChecked;\n    const ariaChecked: boolean | \"mixed\" = indeterminate\n      ? \"mixed\"\n      : checked\n        ? true\n        : false;\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"checkbox\"\n        data-slot=\"checkbox\"\n        data-state={\n          indeterminate ? \"indeterminate\" : checked ? \"checked\" : \"unchecked\"\n        }\n        disabled={disabled}\n        aria-checked={ariaChecked}\n        className={cn(\n          \"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\",\n          \"focus-visible:ring-2 focus-visible:ring-offset-2\",\n          \"disabled:cursor-not-allowed\",\n          className,\n        )}\n        onClick={(e) => {\n          onClick?.(e);\n          if (e.defaultPrevented) return;\n          if (disabled) return;\n          if (isControlled) {\n            onCheckedChange?.(!checked);\n            return;\n          }\n          setUncontrolledChecked((prev) => {\n            const next = !prev;\n            onCheckedChange?.(next);\n            return next;\n          });\n        }}\n        {...rest}\n      >\n        <span className=\"pointer-events-none\">\n          <span\n            aria-hidden\n            className={cn(\n              \"flex size-5 shrink-0 items-center justify-center rounded-[4px] border\",\n              !disabled &&\n                (indeterminate\n                  ? \"border-primary bg-primary text-background\"\n                  : checked\n                    ? \"border-primary bg-primary text-background\"\n                    : \"border-primary/20 bg-background\"),\n              disabled &&\n                (indeterminate\n                  ? \"border-primary/40 bg-primary/45 text-primary-foreground\"\n                  : checked\n                    ? \"border-primary/40 bg-primary/45 text-primary-foreground\"\n                    : \"border-primary/10 bg-muted/25\"),\n            )}\n          >\n            {indeterminate ? (\n              <span\n                className=\"size-2.5 shrink-0 rounded-[2px] border border-primary/20 bg-background\"\n                aria-hidden\n              />\n            ) : checked ? (\n              <CheckboxAnimatedCheckMark />\n            ) : null}\n          </span>\n        </span>\n      </button>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n"]}
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/checkbox.tsx"],"names":[],"mappings":"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","file":"checkbox.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst CHECKBOX_TICK_DELAY_MS = 60;\nconst CHECKBOX_TICK_DRAW_MS = 100;\n\nfunction CheckboxAnimatedCheckMark() {\n  const lineRef = useRef<SVGPolylineElement>(null);\n\n  useLayoutEffect(() => {\n    const poly = lineRef.current;\n    if (!poly || typeof poly.getTotalLength !== \"function\") return;\n    const len = poly.getTotalLength();\n    if (len <= 0) return;\n\n    poly.style.strokeDasharray = `${len}`;\n    poly.style.strokeDashoffset = `${len}`;\n\n    if (typeof poly.animate !== \"function\") {\n      poly.style.strokeDashoffset = \"0\";\n      return;\n    }\n\n    const anim = poly.animate(\n      [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],\n      {\n        duration: CHECKBOX_TICK_DRAW_MS,\n        delay: CHECKBOX_TICK_DELAY_MS,\n        easing: \"cubic-bezier(0.45, 0, 0.2, 1)\",\n        fill: \"forwards\",\n      },\n    );\n    return () => anim.cancel();\n  }, []);\n\n  return (\n    <svg\n      className=\"size-4 shrink-0 overflow-visible\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden\n    >\n      <polyline\n        ref={lineRef}\n        points=\"4 12 9 17 20 6\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nexport type CheckboxProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"type\" | \"role\" | \"aria-checked\" | \"children\"\n> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (next: boolean) => void;\n  // tri-state: same frame as checked; center shows a visible “blank” (inner surface)\n  indeterminate?: boolean;\n};\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      checked: checkedProp,\n      defaultChecked = false,\n      onCheckedChange,\n      indeterminate = false,\n      disabled = false,\n      className,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isControlled = checkedProp !== undefined;\n    const [uncontrolledChecked, setUncontrolledChecked] =\n      useState(defaultChecked);\n    const checked = isControlled ? checkedProp : uncontrolledChecked;\n    const ariaChecked: boolean | \"mixed\" = indeterminate\n      ? \"mixed\"\n      : checked\n        ? true\n        : false;\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"checkbox\"\n        data-slot=\"checkbox\"\n        data-state={\n          indeterminate ? \"indeterminate\" : checked ? \"checked\" : \"unchecked\"\n        }\n        disabled={disabled}\n        aria-checked={ariaChecked}\n        className={cn(\n          \"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\",\n          \"focus-visible:ring-2 focus-visible:ring-offset-2\",\n          \"disabled:cursor-not-allowed\",\n          className,\n        )}\n        onClick={(e) => {\n          onClick?.(e);\n          if (e.defaultPrevented) return;\n          if (disabled) return;\n          if (isControlled) {\n            onCheckedChange?.(!checked);\n            return;\n          }\n          setUncontrolledChecked((prev) => {\n            const next = !prev;\n            onCheckedChange?.(next);\n            return next;\n          });\n        }}\n        {...rest}\n      >\n        <span className=\"pointer-events-none\">\n          <span\n            aria-hidden\n            className={cn(\n              \"flex size-5 shrink-0 items-center justify-center rounded-[4px] border\",\n              !disabled &&\n                (indeterminate\n                  ? \"border-primary bg-primary text-background\"\n                  : checked\n                    ? \"border-primary bg-primary text-background\"\n                    : \"border-primary/20 bg-background\"),\n              disabled &&\n                (indeterminate\n                  ? \"border-transparent bg-primary/45 text-primary-foreground\"\n                  : checked\n                    ? \"border-transparent bg-primary/45 text-primary-foreground\"\n                    : \"border-primary/10 bg-muted/25\"),\n            )}\n          >\n            {indeterminate ? (\n              <span\n                className=\"size-2.5 shrink-0 rounded-[2px] border border-primary/20 bg-background\"\n                aria-hidden\n              />\n            ) : checked ? (\n              <CheckboxAnimatedCheckMark />\n            ) : null}\n          </span>\n        </span>\n      </button>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n"]}

package/dist/react/dropdown.d.ts

@@ -105,8 +105,16 @@ interface DropdownRadioItemProps extends Omit<DropdownItemProps, "icon"> {
     value: string;
 }
 declare const DropdownRadioItem: React__default.FC<DropdownRadioItemProps>;
+/**
+ * `openOnHover` (default `true`) controls whether moving a mouse onto the
+ * `DropdownSubTrigger` (or off the `DropdownSubContent`) opens / closes the
+ * sub. Set to `false` for menus rendered inside a scrollable container, where
+ * rows passing under a stationary cursor would otherwise toggle the sub on
+ * every scroll tick. Click, Enter, ArrowRight always open regardless.
+ */
 declare const DropdownSub: React__default.FC<{
     children: React__default.ReactNode;
+    openOnHover?: boolean;
 }>;
 declare const DropdownSubTrigger: React__default.FC<React__default.HTMLAttributes<HTMLDivElement> & {
     icon?: React__default.ReactNode;

package/dist/react/dropdown.js

@@ -124,9 +124,7 @@ var Checkbox = React3.forwardRef(
     ...rest
   }, ref) => {
     const isControlled = checkedProp !== void 0;
-    const [uncontrolledChecked, setUncontrolledChecked] = useState(
-      defaultChecked
-    );
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
     const checked = isControlled ? checkedProp : uncontrolledChecked;
     const ariaChecked = indeterminate ? "mixed" : checked ? true : false;
     return /* @__PURE__ */ jsx(
@@ -167,7 +165,7 @@ var Checkbox = React3.forwardRef(
             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-primary/40 bg-primary/45 text-primary-foreground" : checked ? "border-primary/40 bg-primary/45 text-primary-foreground" : "border-primary/10 bg-muted/25")
+              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",
@@ -200,6 +198,22 @@ function resolveDropdownMobileSheet(mobileOptions) {
   };
 }
 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";
@@ -290,10 +304,12 @@ 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);
@@ -452,6 +468,7 @@ function DropdownMobileBottomSheetPortal({
   onRequestClose,
   menuRef,
   portalZClassName = "z-50",
+  isSubPortal = false,
   children,
   className,
   style,
@@ -463,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
@@ -489,8 +507,9 @@ 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
               ),
@@ -567,25 +586,25 @@ var DropdownContent = ({
   const [pos, setPos] = useState({ top: -9999, left: -9999, side });
   const [triggerW, setTriggerW] = useState(0);
   const menuRef = useRef(null);
-  const resolvedMobile = useMemo(
-    () => resolveDropdownMobileSheet(mobileOptions),
-    [mobileOptions]
-  );
-  const slideOffsetPx = useMemo(
-    () => slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX,
-    [slideEntranceOffsetPxProp]
-  );
-  const closeDuration = isMobile && resolvedMobile.sheet ? 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;
     }
-  }, [open, closeDuration]);
+    if (!isMobileSheet) {
+      setShouldRender(false);
+      return;
+    }
+    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;
@@ -615,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();
@@ -686,15 +720,14 @@ var DropdownContent = ({
     return () => window.removeEventListener("keydown", handler);
   }, [open, closeOnEscape, loop, setOpen, triggerRef]);
   useEffect(() => {
-    if (open && isMobile && resolvedMobile.sheet) {
-      document.body.style.overflow = "hidden";
-    }
+    if (!open || !isMobileSheet) return;
+    document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = "";
     };
-  }, [open, isMobile, resolvedMobile.sheet]);
+  }, [open, isMobileSheet]);
   if (!shouldRender || typeof document === "undefined") return null;
-  if (isMobile && resolvedMobile.sheet) {
+  if (isMobileSheet) {
     return /* @__PURE__ */ jsx(
       DropdownMobileBottomSheetPortal,
       {
@@ -706,7 +739,7 @@ var DropdownContent = ({
         sheetTitle: resolvedMobile.title,
         sheetExtraClassName: resolvedMobile.sheetExtraClassName,
         contentClassName: resolvedMobile.contentClassName,
-        onRequestClose: closeMenu,
+        onRequestClose: () => setOpen(false),
         menuRef,
         portalZClassName: "z-50",
         className,
@@ -729,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: {
@@ -805,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",
           {
@@ -1002,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 = 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",
@@ -1031,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) => {
@@ -1059,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" })
       ]
     }
   );
@@ -1079,16 +1112,11 @@ var DropdownSubContent = ({
 }) => {
   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 = useMemo(
-    () => resolveDropdownMobileSheet(mobileOptions),
-    [mobileOptions]
-  );
+  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({
@@ -1097,17 +1125,22 @@ var DropdownSubContent = ({
     side: "right"
   });
   const menuRef = useRef(null);
-  const closeDuration = isMobile && resolvedMobile.sheet ? 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;
@@ -1120,8 +1153,8 @@ var DropdownSubContent = ({
     };
   }, [shouldRender, open]);
   useLayoutEffect(() => {
-    if (!shouldRender || !triggerRef.current || !menuRef.current) return;
-    if (isMobile && resolvedMobile.sheet) return;
+    if (!shouldRender || isMobileSheet) return;
+    if (!triggerRef.current || !menuRef.current) return;
     const update = () => {
       if (!triggerRef.current || !menuRef.current) return;
       setPos(
@@ -1137,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, resolvedMobile.sheet]);
+  }, [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();
@@ -1203,7 +1253,7 @@ var DropdownSubContent = ({
     [onKeyDownProp, setOpen, triggerRef]
   );
   if (!shouldRender || typeof document === "undefined") return null;
-  if (isMobile && resolvedMobile.sheet) {
+  if (isMobileSheet) {
     return /* @__PURE__ */ jsx(
       DropdownMobileBottomSheetPortal,
       {
@@ -1215,9 +1265,10 @@ var DropdownSubContent = ({
         sheetTitle: resolvedMobile.title,
         sheetExtraClassName: resolvedMobile.sheetExtraClassName,
         contentClassName: resolvedMobile.contentClassName,
-        onRequestClose: closeSub,
+        onRequestClose: () => setOpen(false),
         menuRef,
         portalZClassName: "z-[70]",
+        isSubPortal: true,
         className,
         style,
         role: "menu",
@@ -1236,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: {