@underverse-ui/underverse 1.0.109 → 1.0.111

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.109",
+  "version": "1.0.111",
   "sourceEntry": "src/index.ts",
   "totalExports": 230,
   "exports": [

package/dist/index.cjs

@@ -7364,6 +7364,20 @@ var getOptionDisabled = (option) => {
 var findOptionByValue = (options, value) => {
   return options.find((opt) => getOptionValue(opt) === value);
 };
+var comboboxScrollClassName = [
+  "scrollbar-thin",
+  "[scrollbar-width:thin]",
+  "[scrollbar-color:color-mix(in_oklch,var(--muted-foreground)_28%,transparent)_transparent]",
+  "[&::-webkit-scrollbar]:w-2",
+  "[&::-webkit-scrollbar-track]:bg-transparent",
+  "[&::-webkit-scrollbar-thumb]:rounded-full",
+  "[&::-webkit-scrollbar-thumb]:border-2",
+  "[&::-webkit-scrollbar-thumb]:border-solid",
+  "[&::-webkit-scrollbar-thumb]:border-transparent",
+  "[&::-webkit-scrollbar-thumb]:bg-clip-padding",
+  "[&::-webkit-scrollbar-thumb]:bg-muted-foreground/25",
+  "[&::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/45"
+].join(" ");
 var Combobox = ({
   id,
   options,
@@ -7392,7 +7406,7 @@ var Combobox = ({
   selectedOption: selectedOptionProp,
   error,
   helperText,
-  useOverlayScrollbar = false,
+  useOverlayScrollbar = true,
   virtualized = false,
   estimatedItemHeight = 44,
   overscan = 8,
@@ -7411,7 +7425,7 @@ var Combobox = ({
   useShadCNAnimations();
   const inputRef = React24.useRef(null);
   const optionsViewportRef = React24.useRef(null);
-  useOverlayScrollbarTarget(optionsViewportRef, { enabled: useOverlayScrollbar });
+  useOverlayScrollbarTarget(optionsViewportRef, { enabled: open && useOverlayScrollbar && !virtualized });
   const autoId = (0, import_react15.useId)();
   const resolvedId = id ? String(id) : `combobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
@@ -7678,7 +7692,7 @@ var Combobox = ({
             id: `${resolvedId}-listbox`,
             role: "listbox",
             "aria-labelledby": labelId,
-            className: "overflow-y-auto overscroll-contain",
+            className: cn("overflow-y-auto overscroll-contain", (!useOverlayScrollbar || virtualized) && comboboxScrollClassName),
             style: { maxHeight },
             children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn(size === "sm" ? "p-1" : size === "lg" ? "p-2" : "p-1.5"), children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
@@ -15684,6 +15698,20 @@ var import_react20 = require("react");
 var import_react_virtual2 = require("@tanstack/react-virtual");
 var import_lucide_react24 = require("lucide-react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
+var comboboxScrollClassName2 = [
+  "scrollbar-thin",
+  "[scrollbar-width:thin]",
+  "[scrollbar-color:color-mix(in_oklch,var(--muted-foreground)_28%,transparent)_transparent]",
+  "[&::-webkit-scrollbar]:w-2",
+  "[&::-webkit-scrollbar-track]:bg-transparent",
+  "[&::-webkit-scrollbar-thumb]:rounded-full",
+  "[&::-webkit-scrollbar-thumb]:border-2",
+  "[&::-webkit-scrollbar-thumb]:border-solid",
+  "[&::-webkit-scrollbar-thumb]:border-transparent",
+  "[&::-webkit-scrollbar-thumb]:bg-clip-padding",
+  "[&::-webkit-scrollbar-thumb]:bg-muted-foreground/25",
+  "[&::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/45"
+].join(" ");
 var MultiCombobox = ({
   id,
   options,
@@ -15716,7 +15744,7 @@ var MultiCombobox = ({
   error,
   helperText,
   maxTagsVisible = 3,
-  useOverlayScrollbar = false,
+  useOverlayScrollbar = true,
   virtualized = false,
   estimatedItemHeight = 44,
   overscan = 8,
@@ -15735,7 +15763,7 @@ var MultiCombobox = ({
   const inputRef = React39.useRef(null);
   const listRef = React39.useRef([]);
   const optionsListRef = React39.useRef(null);
-  useOverlayScrollbarTarget(optionsListRef, { enabled: useOverlayScrollbar });
+  useOverlayScrollbarTarget(optionsListRef, { enabled: open && useOverlayScrollbar && !virtualized });
   const triggerRef = React39.useRef(null);
   useShadCNAnimations();
   const normalizedOptions = React39.useMemo(
@@ -16038,7 +16066,11 @@ var MultiCombobox = ({
         "aria-multiselectable": "true",
         ref: optionsListRef,
         style: { maxHeight },
-        className: cn("overflow-y-auto p-1.5", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"),
+        className: cn(
+          "overflow-y-auto p-1.5",
+          (!useOverlayScrollbar || virtualized) && comboboxScrollClassName2,
+          size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"
+        ),
         children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
           /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "relative", children: [
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react24.Loader2, { className: "h-8 w-8 animate-spin text-primary" }),