@avenue-ticketing/ui 0.4.0 → 0.5.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,124 @@ 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-primary/40 bg-primary/45 text-primary-foreground" : checked ? "border-primary/40 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,6 +191,14 @@ 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_SHEET_MENU_TEXT = "max-[1024px]:text-base";
 var DROPDOWN_SHEET_MENU_SHORTCUT = "max-[1024px]:text-sm";
@@ -174,14 +300,14 @@ function useIsMobile(breakpoint = 1025) {
   }, [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 +340,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 +367,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 +422,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,7 +446,9 @@ function DropdownMobileBottomSheetPortal({
   isAnimating,
   slideEntrance,
   slideOffsetPx,
-  mobileTitle,
+  sheetTitle,
+  sheetExtraClassName,
+  contentClassName,
   onRequestClose,
   menuRef,
   portalZClassName = "z-50",
@@ -363,6 +491,7 @@ function DropdownMobileBottomSheetPortal({
               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",
                 "rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t",
+                sheetExtraClassName,
                 className
               ),
               style: {
@@ -379,10 +508,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 +524,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 +553,7 @@ var DropdownContent = ({
   closeOnEscape = true,
   minWidth = "trigger",
   loop = true,
-  mobileSheet = true,
-  mobileTitle,
+  mobileOptions,
   slideEntrance = true,
   slideEntranceOffsetPx: slideEntranceOffsetPxProp,
   className,
@@ -430,11 +567,15 @@ 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 && mobileSheet ? DROPDOWN_MOBILE_SHEET_MOTION_MS : duration;
+  const closeDuration = isMobile && resolvedMobile.sheet ? DROPDOWN_MOBILE_SHEET_MOTION_MS : duration;
   const closeMenu = useCallback(() => setOpen(false), [setOpen]);
   useEffect(() => {
     if (open) {
@@ -545,15 +686,15 @@ var DropdownContent = ({
     return () => window.removeEventListener("keydown", handler);
   }, [open, closeOnEscape, loop, setOpen, triggerRef]);
   useEffect(() => {
-    if (open && isMobile && mobileSheet) {
+    if (open && isMobile && resolvedMobile.sheet) {
       document.body.style.overflow = "hidden";
     }
     return () => {
       document.body.style.overflow = "";
     };
-  }, [open, isMobile, mobileSheet]);
+  }, [open, isMobile, resolvedMobile.sheet]);
   if (!shouldRender || typeof document === "undefined") return null;
-  if (isMobile && mobileSheet) {
+  if (isMobile && resolvedMobile.sheet) {
     return /* @__PURE__ */ jsx(
       DropdownMobileBottomSheetPortal,
       {
@@ -562,7 +703,9 @@ var DropdownContent = ({
         isAnimating,
         slideEntrance,
         slideOffsetPx,
-        mobileTitle,
+        sheetTitle: resolvedMobile.title,
+        sheetExtraClassName: resolvedMobile.sheetExtraClassName,
+        contentClassName: resolvedMobile.contentClassName,
         onRequestClose: closeMenu,
         menuRef,
         portalZClassName: "z-50",
@@ -649,7 +792,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",
@@ -698,53 +841,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 +876,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 +927,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 +972,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",
@@ -921,7 +1014,7 @@ var DropdownSub = ({
   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 isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
@@ -957,7 +1050,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",
@@ -976,8 +1069,7 @@ var DropdownSubContent = ({
   children,
   duration = 80,
   viewportPadding = 8,
-  mobileSheet = true,
-  mobileTitle,
+  mobileOptions,
   slideEntrance = true,
   slideEntranceOffsetPx: slideEntranceOffsetPxProp,
   className,
@@ -985,7 +1077,7 @@ 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 isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
@@ -993,6 +1085,10 @@ var DropdownSubContent = ({
     () => slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX,
     [slideEntranceOffsetPxProp]
   );
+  const resolvedMobile = useMemo(
+    () => resolveDropdownMobileSheet(mobileOptions),
+    [mobileOptions]
+  );
   const [shouldRender, setShouldRender] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
   const [pos, setPos] = useState({
@@ -1001,7 +1097,7 @@ var DropdownSubContent = ({
     side: "right"
   });
   const menuRef = useRef(null);
-  const closeDuration = isMobile && mobileSheet ? DROPDOWN_MOBILE_SHEET_MOTION_MS : duration;
+  const closeDuration = isMobile && resolvedMobile.sheet ? DROPDOWN_MOBILE_SHEET_MOTION_MS : duration;
   const closeSub = useCallback(() => setOpen(false), [setOpen]);
   useEffect(() => {
     if (open) {
@@ -1025,7 +1121,7 @@ var DropdownSubContent = ({
   }, [shouldRender, open]);
   useLayoutEffect(() => {
     if (!shouldRender || !triggerRef.current || !menuRef.current) return;
-    if (isMobile && mobileSheet) return;
+    if (isMobile && resolvedMobile.sheet) return;
     const update = () => {
       if (!triggerRef.current || !menuRef.current) return;
       setPos(
@@ -1046,7 +1142,7 @@ var DropdownSubContent = ({
       window.removeEventListener("resize", update);
       window.removeEventListener("scroll", update, true);
     };
-  }, [shouldRender, viewportPadding, isMobile, mobileSheet]);
+  }, [shouldRender, viewportPadding, isMobile, resolvedMobile.sheet]);
   useEffect(() => {
     if (isAnimating && menuRef.current) {
       menuRef.current.focus();
@@ -1107,7 +1203,7 @@ var DropdownSubContent = ({
     [onKeyDownProp, setOpen, triggerRef]
   );
   if (!shouldRender || typeof document === "undefined") return null;
-  if (isMobile && mobileSheet) {
+  if (isMobile && resolvedMobile.sheet) {
     return /* @__PURE__ */ jsx(
       DropdownMobileBottomSheetPortal,
       {
@@ -1116,7 +1212,9 @@ var DropdownSubContent = ({
         isAnimating,
         slideEntrance,
         slideOffsetPx,
-        mobileTitle,
+        sheetTitle: resolvedMobile.title,
+        sheetExtraClassName: resolvedMobile.sheetExtraClassName,
+        contentClassName: resolvedMobile.contentClassName,
         onRequestClose: closeSub,
         menuRef,
         portalZClassName: "z-[70]",