@underverse-ui/underverse 1.0.197 → 1.0.198

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.197",
+  "version": "1.0.198",
   "sourceEntry": "src/index.ts",
   "totalExports": 252,
   "exports": [

package/dist/index.cjs

@@ -9223,7 +9223,8 @@ var Combobox = ({
   searchDebounceMs = 0,
   minSearchLength = 0,
   maxInitialOptions,
-  showSearchPromptWhenEmptyQuery = false
+  showSearchPromptWhenEmptyQuery = false,
+  matchTriggerBackground = false
 }) => {
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.borderMode ?? "full";
@@ -9238,6 +9239,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);
@@ -9279,6 +9281,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" });
@@ -9333,6 +9341,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;
@@ -9580,6 +9601,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",
@@ -9712,11 +9734,19 @@ var Combobox = ({
         className: "z-50",
         borderMode: resolvedBorderMode,
         contentClassName: "p-0 overflow-hidden",
+        contentProps: { style: dropdownBackgroundStyle },
         children: dropdownBody
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
       triggerButtonInline,
-      open && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "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__ */ (0, import_jsx_runtime33.jsxs)(
       "p",