@underverse-ui/underverse 1.0.196 → 1.0.198

package/api-reference.json

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

package/dist/index.cjs

@@ -704,7 +704,7 @@ var Card = import_react2.default.forwardRef(
       {
         ref,
         className: cn(
-          "group bg-card text-card-foreground transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
+          "group/card bg-card text-card-foreground transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
           resolvedBorderMode ? getPanelBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl max-md:rounded-xl",
           "border border-border/50 shadow-sm backdrop-blur-sm",
           hoverable && "md:hover:-translate-y-0.5 md:hover:border-primary/15 md:hover:shadow-md",
@@ -729,7 +729,7 @@ var Card = import_react2.default.forwardRef(
             {
               className: cn(
                 "pointer-events-none absolute inset-0 bg-linear-to-br from-primary/5 to-transparent opacity-0 transition-opacity duration-300",
-                "group-hover:opacity-100"
+                "group-hover/card:opacity-100"
               )
             }
           ),
@@ -739,7 +739,7 @@ var Card = import_react2.default.forwardRef(
               {
                 className: cn(
                   "min-w-0 text-base md:text-lg font-semibold leading-tight tracking-tight wrap-anywhere transition-colors duration-200 max-md:text-sm",
-                  hoverable && "group-hover:text-primary"
+                  hoverable && "group-hover/card:text-primary"
                 ),
                 children: title
               }
@@ -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",