@underverse-ui/underverse 0.2.108 → 0.2.109

package/dist/index.cjs

@@ -3970,7 +3970,7 @@ var Popover = ({
               "div",
               {
                 className: cn(
-                  "rounded-2xl border bg-popover text-popover-foreground shadow-md",
+                  "rounded-2xl md:rounded-3xl border bg-popover text-popover-foreground shadow-md",
                   "backdrop-blur-sm bg-popover/95 border-border/60 p-4",
                   contentClassName
                 ),
@@ -5105,98 +5105,108 @@ var Combobox = ({
       `${itemValue}-${index}`
     );
   };
-  const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", role: "listbox", id: `${resolvedId}-listbox`, className: "w-full", children: [
-    enableSearch && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "relative p-2.5 border-b border-border/30", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 transition-colors peer-focus:text-primary" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        "input",
-        {
-          ref: inputRef,
-          value: query,
-          onChange: (e) => {
-            setQuery(e.target.value);
-            setActiveIndex(null);
-          },
-          onKeyDown: (e) => {
-            if (e.key === "ArrowDown") {
-              e.preventDefault();
-              setActiveIndex((prev) => {
-                const next = prev === null ? 0 : prev + 1;
-                return next >= filteredOptions.length ? 0 : next;
-              });
-            } else if (e.key === "ArrowUp") {
-              e.preventDefault();
-              setActiveIndex((prev) => {
-                const next = prev === null ? filteredOptions.length - 1 : prev - 1;
-                return next < 0 ? filteredOptions.length - 1 : next;
-              });
-            } else if (e.key === "Enter") {
-              e.preventDefault();
-              if (activeIndex !== null && filteredOptions[activeIndex] && !getOptionDisabled(filteredOptions[activeIndex])) {
-                handleSelect(filteredOptions[activeIndex]);
-              }
-            } else if (e.key === "Escape") {
-              e.preventDefault();
-              setOpen(false);
+  const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      "data-combobox-dropdown": true,
+      "data-state": open ? "open" : "closed",
+      role: "listbox",
+      id: `${resolvedId}-listbox`,
+      className: "w-full rounded-2xl md:rounded-3xl overflow-hidden",
+      children: [
+        enableSearch && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "relative p-2.5 border-b border-border/30", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 transition-colors peer-focus:text-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              value: query,
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setActiveIndex(null);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "ArrowDown") {
+                  e.preventDefault();
+                  setActiveIndex((prev) => {
+                    const next = prev === null ? 0 : prev + 1;
+                    return next >= filteredOptions.length ? 0 : next;
+                  });
+                } else if (e.key === "ArrowUp") {
+                  e.preventDefault();
+                  setActiveIndex((prev) => {
+                    const next = prev === null ? filteredOptions.length - 1 : prev - 1;
+                    return next < 0 ? filteredOptions.length - 1 : next;
+                  });
+                } else if (e.key === "Enter") {
+                  e.preventDefault();
+                  if (activeIndex !== null && filteredOptions[activeIndex] && !getOptionDisabled(filteredOptions[activeIndex])) {
+                    handleSelect(filteredOptions[activeIndex]);
+                  }
+                } else if (e.key === "Escape") {
+                  e.preventDefault();
+                  setOpen(false);
+                }
+              },
+              placeholder: searchPlaceholder,
+              className: cn(
+                "peer w-full rounded-xl bg-muted/40 py-2.5 pl-9 pr-3 text-sm",
+                "border border-transparent",
+                "focus:outline-none focus:bg-background focus:border-primary/30 focus:ring-2 focus:ring-primary/10",
+                "transition-all duration-200",
+                "placeholder:text-muted-foreground/50"
+              ),
+              "aria-autocomplete": "list",
+              "aria-activedescendant": activeIndex != null ? `combobox-item-${activeIndex}` : void 0
             }
-          },
-          placeholder: searchPlaceholder,
-          className: cn(
-            "peer w-full rounded-xl bg-muted/40 py-2.5 pl-9 pr-3 text-sm",
-            "border border-transparent",
-            "focus:outline-none focus:bg-background focus:border-primary/30 focus:ring-2 focus:ring-primary/10",
-            "transition-all duration-200",
-            "placeholder:text-muted-foreground/50"
           ),
-          "aria-autocomplete": "list",
-          "aria-activedescendant": activeIndex != null ? `combobox-item-${activeIndex}` : void 0
-        }
-      ),
-      query && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: () => setQuery(""),
-          className: "absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors",
-          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.X, { className: "h-3.5 w-3.5" })
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "overflow-y-auto overscroll-contain", style: { maxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "p-1.5", children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm text-muted-foreground", children: loadingText })
-    ] }) }) : filteredOptions.length > 0 ? groupedOptions ? (
-      // Render grouped options with global index tracking
-      (() => {
-        let globalIndex = 0;
-        return Object.entries(groupedOptions).map(([group, items]) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn(globalIndex > 0 && "mt-2 pt-2 border-t border-border/30"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: group }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "space-y-0.5", children: items.map((item) => {
-            const index = globalIndex++;
-            return renderOptionItem(item, index);
-          }) })
-        ] }, group));
-      })()
-    ) : (
-      // Render flat options
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "space-y-0.5", children: filteredOptions.map((item, index) => renderOptionItem(item, index)) })
-    ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("div", { className: "w-12 h-12 rounded-full bg-muted/50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.SearchX, { className: "h-6 w-6 text-muted-foreground/60" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "block text-sm font-medium text-foreground", children: emptyText }),
-        query && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "block text-xs text-muted-foreground", children: "Try a different search term" })
-      ] }),
-      query && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: () => setQuery(""),
-          className: "px-3 py-1.5 text-xs font-medium text-primary bg-primary/10 rounded-full hover:bg-primary/20 transition-colors",
-          children: "Clear search"
-        }
-      )
-    ] }) }) }) })
-  ] });
+          query && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setQuery(""),
+              className: "absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors",
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.X, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "overflow-y-auto overscroll-contain", style: { maxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "p-1.5", children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm text-muted-foreground", children: loadingText })
+        ] }) }) : filteredOptions.length > 0 ? groupedOptions ? (
+          // Render grouped options with global index tracking
+          (() => {
+            let globalIndex = 0;
+            return Object.entries(groupedOptions).map(([group, items]) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn(globalIndex > 0 && "mt-2 pt-2 border-t border-border/30"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: group }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "space-y-0.5", children: items.map((item) => {
+                const index = globalIndex++;
+                return renderOptionItem(item, index);
+              }) })
+            ] }, group));
+          })()
+        ) : (
+          // Render flat options
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "space-y-0.5", children: filteredOptions.map((item, index) => renderOptionItem(item, index)) })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("div", { className: "w-12 h-12 rounded-full bg-muted/50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.SearchX, { className: "h-6 w-6 text-muted-foreground/60" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "block text-sm font-medium text-foreground", children: emptyText }),
+            query && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "block text-xs text-muted-foreground", children: "Try a different search term" })
+          ] }),
+          query && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setQuery(""),
+              className: "px-3 py-1.5 text-xs font-medium text-primary bg-primary/10 rounded-full hover:bg-primary/20 transition-colors",
+              children: "Clear search"
+            }
+          )
+        ] }) }) }) })
+      ]
+    }
+  );
   const sizeStyles8 = {
     sm: "h-8 py-1.5 text-sm md:h-7 md:text-xs",
     md: "h-10 py-2 text-sm",
@@ -5209,7 +5219,7 @@ var Combobox = ({
     filled: "border-0 bg-muted/50 hover:bg-muted/80"
   };
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
-  const radiusClass = size === "sm" ? "rounded-lg" : "rounded-xl";
+  const radiusClass = "rounded-full";
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
   const triggerButtonBaseProps = {
     ref: triggerRef,
@@ -5314,12 +5324,12 @@ var Combobox = ({
         placement: "bottom-start",
         matchTriggerWidth: true,
         className: "z-9999",
-        contentClassName: "p-0",
+        contentClassName: "p-0 overflow-hidden rounded-2xl md:rounded-3xl",
         children: dropdownBody
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", children: [
       triggerButtonInline,
-      open && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "rounded-2xl border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", children: dropdownBody }) })
+      open && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "rounded-2xl md:rounded-3xl overflow-hidden border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", children: dropdownBody }) })
     ] }),
     (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: cn("text-xs transition-colors duration-200 flex items-center gap-1.5", error ? "text-destructive" : "text-muted-foreground"), children: [
       error && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-3.5 h-3.5 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -6154,7 +6164,7 @@ var DatePicker = ({
         contentClassName: cn(
           "p-0",
           "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
-          "rounded-2xl",
+          "rounded-2xl md:rounded-3xl",
           // Keep usable on small viewports (wheel scroll should stay within the popover if it overflows)
           "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
           size === "sm" ? "p-4" : "p-5",
@@ -6457,7 +6467,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
       contentClassName: cn(
         "p-0",
         "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
-        "rounded-2xl",
+        "rounded-2xl md:rounded-3xl",
         "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
         size === "sm" ? "p-3" : "p-5",
         "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
@@ -8104,7 +8114,13 @@ function TimePicker({
         label,
         required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-destructive ml-1", children: "*" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn(panelSz.contentPadding, "rounded-2xl border border-border/60 bg-card/95 backdrop-blur-sm shadow-xl", className), children: timePickerContent })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        "div",
+        {
+          className: cn(panelSz.contentPadding, "rounded-2xl md:rounded-3xl border border-border/60 bg-card/95 backdrop-blur-sm shadow-xl", className),
+          children: timePickerContent
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-full", ...rest, children: [
@@ -8135,7 +8151,7 @@ function TimePicker({
         contentWidth: matchTriggerWidth ? void 0 : contentWidth,
         contentClassName: cn(
           panelSz.contentPadding,
-          "rounded-2xl border bg-popover/98 backdrop-blur-md shadow-2xl",
+          "rounded-2xl md:rounded-3xl border bg-popover/98 backdrop-blur-md shadow-2xl",
           error && "border-destructive/40",
           success && "border-success/40",
           !error && !success && "border-border/60",
@@ -8316,7 +8332,7 @@ var DateTimePicker = ({
           }
         ),
         contentClassName: cn(
-          "w-auto p-0 rounded-2xl",
+          "w-auto p-0 rounded-2xl md:rounded-3xl",
           // Keep the popover usable on small viewports
           "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto"
         ),
@@ -10926,7 +10942,7 @@ var MultiCombobox = ({
       item.value
     );
   };
-  const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", className: "w-full", children: [
+  const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", className: "w-full rounded-2xl md:rounded-3xl overflow-hidden", children: [
     value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "px-3 py-2 border-b border-border/40 flex items-center justify-between bg-muted/30", children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "text-xs font-medium text-muted-foreground", children: [
         value.length,
@@ -11030,7 +11046,7 @@ var MultiCombobox = ({
       "aria-controls": listboxId,
       "aria-invalid": !!error,
       className: cn(
-        "group flex w-full items-center gap-2 rounded-2xl min-h-10 transition-all duration-200",
+        "group flex w-full items-center gap-2 rounded-full min-h-10 transition-all duration-200",
         "px-3 py-2",
         variantStyles6[variant],
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
@@ -11164,7 +11180,7 @@ var MultiCombobox = ({
         placement: "bottom-start",
         matchTriggerWidth: true,
         className: "z-9999",
-        contentClassName: "p-0",
+        contentClassName: "p-0 overflow-hidden rounded-2xl md:rounded-3xl",
         children: dropdownBody
       }
     ),
@@ -12408,7 +12424,7 @@ function CategoryTreeSelect(props) {
           // Modern trigger button styling
           "group flex w-full items-center justify-between px-3 py-2.5",
           "bg-background/80 backdrop-blur-sm border border-border/60",
-          "rounded-2xl h-11 text-sm",
+          "rounded-full h-11 text-sm",
           "hover:bg-accent/10 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
           "transition-all duration-300 ease-out",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
@@ -12441,7 +12457,7 @@ function CategoryTreeSelect(props) {
         {
           className: cn(
             "absolute z-20 mt-2 w-full max-h-80 overflow-auto",
-            "rounded-2xl border border-border/40 bg-popover/95 text-popover-foreground",
+            "rounded-2xl md:rounded-3xl overflow-hidden border border-border/40 bg-popover/95 text-popover-foreground",
             "shadow-2xl backdrop-blur-xl",
             "p-2",
             "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
@@ -14341,7 +14357,7 @@ function ColorPicker({
       placement: "bottom-start",
       matchTriggerWidth: variant === "minimal",
       contentWidth: contentWidthByVariant[variant],
-      contentClassName: cn("p-3 rounded-xl border border-border bg-card shadow-lg", contentClassName),
+      contentClassName: cn("p-3 rounded-2xl md:rounded-3xl border border-border bg-card shadow-lg", contentClassName),
       children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "space-y-3", children: [
         variant !== "minimal" && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(