@underverse-ui/underverse 1.0.197 → 1.0.198

package/dist/index.d.cts

@@ -1784,6 +1784,8 @@ interface ComboboxProps {
     maxInitialOptions?: number;
     /** Show a prompt instead of options while the query is shorter than minSearchLength. Default: false */
     showSearchPromptWhenEmptyQuery?: boolean;
+    /** Match dropdown background to the computed background of the combobox trigger. Default: false */
+    matchTriggerBackground?: boolean;
 }
 declare const Combobox: React$1.FC<ComboboxProps>;
 

package/dist/index.d.ts

@@ -1784,6 +1784,8 @@ interface ComboboxProps {
     maxInitialOptions?: number;
     /** Show a prompt instead of options while the query is shorter than minSearchLength. Default: false */
     showSearchPromptWhenEmptyQuery?: boolean;
+    /** Match dropdown background to the computed background of the combobox trigger. Default: false */
+    matchTriggerBackground?: boolean;
 }
 declare const Combobox: React$1.FC<ComboboxProps>;
 

package/dist/index.js

@@ -9026,7 +9026,8 @@ var Combobox = ({
   searchDebounceMs = 0,
   minSearchLength = 0,
   maxInitialOptions,
-  showSearchPromptWhenEmptyQuery = false
+  showSearchPromptWhenEmptyQuery = false,
+  matchTriggerBackground = false
 }) => {
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.borderMode ?? "full";
@@ -9041,6 +9042,7 @@ var Combobox = ({
   const [query, setQuery] = React30.useState("");
   const [activeIndex, setActiveIndex] = React30.useState(null);
   const [localRequiredError, setLocalRequiredError] = React30.useState();
+  const [triggerBackgroundColor, setTriggerBackgroundColor] = React30.useState();
   useShadCNAnimations();
   const inputRef = React30.useRef(null);
   const optionsViewportRef = React30.useRef(null);
@@ -9082,6 +9084,12 @@ var Combobox = ({
   });
   const virtualItems = canVirtualize ? optionVirtualizer.getVirtualItems() : [];
   const triggerRef = React30.useRef(null);
+  const updateTriggerBackgroundColor = React30.useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const backgroundColor = window.getComputedStyle(trigger).backgroundColor;
+    setTriggerBackgroundColor((current) => current === backgroundColor ? current : backgroundColor);
+  }, []);
   const scrollVirtualListToIndex = React30.useCallback((index) => {
     if (!canVirtualize || renderLimitedOptions.length === 0) return;
     optionVirtualizer.scrollToIndex(index, { align: "auto" });
@@ -9136,6 +9144,19 @@ var Combobox = ({
       );
     }
   }, [maxInitialOptions, options.length, searchMode, virtualized]);
+  React30.useLayoutEffect(() => {
+    if (!open || !matchTriggerBackground) {
+      setTriggerBackgroundColor(void 0);
+      return void 0;
+    }
+    let raf = 0;
+    const tick = () => {
+      updateTriggerBackgroundColor();
+      raf = window.requestAnimationFrame(tick);
+    };
+    tick();
+    return () => window.cancelAnimationFrame(raf);
+  }, [matchTriggerBackground, open, updateTriggerBackgroundColor]);
   const selectedOption = findOptionByValue(options, value) ?? (selectedOptionProp && getOptionValue(selectedOptionProp) === value ? selectedOptionProp : void 0);
   const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
   const selectedIcon = selectedOption ? getOptionIcon(selectedOption) : void 0;
@@ -9383,6 +9404,7 @@ var Combobox = ({
   };
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
+  const dropdownBackgroundStyle = matchTriggerBackground && triggerBackgroundColor ? { backgroundColor: triggerBackgroundColor } : void 0;
   const triggerButtonBaseProps = {
     ref: triggerRef,
     type: "button",
@@ -9515,11 +9537,19 @@ var Combobox = ({
         className: "z-50",
         borderMode: resolvedBorderMode,
         contentClassName: "p-0 overflow-hidden",
+        contentProps: { style: dropdownBackgroundStyle },
         children: dropdownBody
       }
     ) : /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
       triggerButtonInline,
-      open && /* @__PURE__ */ jsx33("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ jsx33("div", { className: cn("overflow-hidden border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", getPanelBorderRadiusClass(resolvedBorderMode)), children: dropdownBody }) })
+      open && /* @__PURE__ */ jsx33("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ jsx33(
+        "div",
+        {
+          style: dropdownBackgroundStyle,
+          className: cn("overflow-hidden border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", getPanelBorderRadiusClass(resolvedBorderMode)),
+          children: dropdownBody
+        }
+      ) })
     ] }),
     (helperText || effectiveError) && /* @__PURE__ */ jsxs23(
       "p",