@underverse-ui/underverse 1.0.195 → 1.0.197

package/api-reference.json

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

package/dist/index.cjs

@@ -267,6 +267,13 @@ function getBorderRadiusClass(borderMode = "full") {
   }
   return borderMode;
 }
+function getPanelBorderRadiusClass(borderMode = "lg") {
+  const resolved = borderMode ?? "lg";
+  if (resolved === "full" || resolved === "infiniq") {
+    return "rounded-2xl";
+  }
+  return getBorderRadiusClass(resolved);
+}
 
 // src/contexts/UnderverseConfigContext.tsx
 var React = __toESM(require("react"), 1);
@@ -697,8 +704,8 @@ 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",
-          resolvedBorderMode ? getBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl max-md:rounded-xl",
+          "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",
           clickable && "cursor-pointer active:translate-y-px active:bg-accent/5 md:hover:bg-accent/5 md:hover:shadow-md",
@@ -716,13 +723,13 @@ var Card = import_react2.default.forwardRef(
         role: isInteractive ? role ?? "button" : role,
         tabIndex: isInteractive ? tabIndex ?? 0 : tabIndex,
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("relative overflow-hidden", resolvedBorderMode ? getBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl max-md:rounded-xl", innerClassName), children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("relative overflow-hidden", resolvedBorderMode ? getPanelBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl max-md:rounded-xl", innerClassName), children: [
           (hoverable || clickable) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
               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"
               )
             }
           ),
@@ -732,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
               }
@@ -7135,7 +7142,7 @@ var Modal = ({
             ref: modalContentRef,
             className: cn(
               "relative w-full border border-border/40 bg-card text-card-foreground shadow-xl",
-              resolvedBorderMode ? getBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl",
+              resolvedBorderMode ? getPanelBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl",
               "transition-all duration-200 ease-out",
               maxWidthClass,
               fullWidth && "mx-0",
@@ -7835,7 +7842,7 @@ var Popover = ({
               {
                 ...contentProps,
                 className: cn(
-                  resolvedBorderMode ? getBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl",
+                  resolvedBorderMode ? getPanelBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl",
                   "border bg-popover text-popover-foreground shadow-md",
                   "backdrop-blur-sm bg-popover/95 border-border/60 p-4",
                   contentProps?.className,
@@ -9430,7 +9437,7 @@ var Combobox = ({
     {
       "data-combobox-dropdown": true,
       "data-state": open ? "open" : "closed",
-      className: cn("w-full overflow-hidden", getBorderRadiusClass(resolvedBorderMode)),
+      className: cn("w-full overflow-hidden", getPanelBorderRadiusClass(resolvedBorderMode)),
       children: [
         enableSearch && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("relative border-b border-border/30", size === "sm" ? "p-2" : size === "lg" ? "p-3" : "p-2.5"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -9626,8 +9633,9 @@ var Combobox = ({
             }
           },
           className: cn(
-            "opacity-0 group-hover:opacity-100 transition-all duration-200",
-            "p-1 rounded-lg hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
+            "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-all duration-200",
+            "p-1 rounded-lg hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/50 focus-visible:ring-offset-1"
           ),
           children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.X, { className: "h-3.5 w-3.5" })
         }
@@ -9701,14 +9709,14 @@ var Combobox = ({
         trigger: triggerButtonForPopover,
         placement: "bottom-start",
         matchTriggerWidth: true,
-        className: "z-9999",
+        className: "z-50",
         borderMode: resolvedBorderMode,
         contentClassName: "p-0 overflow-hidden",
         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", getBorderRadiusClass(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", { 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",
@@ -10681,32 +10689,6 @@ var DatePicker = ({
     const node = el;
     return node.scrollHeight > node.clientHeight + 1;
   };
-  React34.useEffect(() => {
-    if (!isOpen) return;
-    const container = wheelContainerRef.current;
-    if (!container) return;
-    const onWheel = (event) => {
-      if (!container.contains(event.target)) return;
-      if (event.ctrlKey) return;
-      let node = event.target;
-      while (node && node !== container) {
-        if (isElementVerticallyScrollable(node)) return;
-        node = node.parentElement;
-      }
-      if (isElementVerticallyScrollable(container)) return;
-      event.preventDefault();
-      event.stopPropagation();
-      wheelDeltaRef.current += event.deltaY;
-      const threshold = 70;
-      if (Math.abs(wheelDeltaRef.current) < threshold) return;
-      const steps = Math.trunc(wheelDeltaRef.current / threshold);
-      wheelDeltaRef.current -= steps * threshold;
-      const direction = steps > 0 ? "next" : "prev";
-      for (let i = 0; i < Math.abs(steps); i++) navigateMonth(direction);
-    };
-    container.addEventListener("wheel", onWheel, { passive: false });
-    return () => container.removeEventListener("wheel", onWheel);
-  }, [isOpen, navigateMonth]);
   const renderCalendar = () => {
     const daysInMonth = getDaysInMonth(viewDate);
     const firstDayOfMonth = getFirstDayOfMonth(viewDate);
@@ -10733,10 +10715,10 @@ var DatePicker = ({
             },
             className: cn(
               sizeStyles8[size].dayCell,
-              "datepicker-day rounded-lg focus:outline-none relative cursor-pointer",
-              "transition-all duration-200 font-medium",
-              isDisabled && "opacity-30 cursor-not-allowed text-muted-foreground",
-              isSelected ? "bg-linear-to-br from-primary to-primary/80 text-primary-foreground font-bold shadow-lg shadow-primary/30 scale-110 z-10 hover:from-primary hover:to-primary/70" : !isDisabled && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 focus:bg-accent focus:text-accent-foreground",
+              "datepicker-day rounded-lg relative cursor-pointer",
+              "transition-all duration-200 font-medium active:scale-95",
+              isDisabled && "opacity-30 cursor-not-allowed text-muted-foreground active:scale-100",
+              isSelected ? "bg-linear-to-br from-primary to-primary/80 text-primary-foreground font-bold shadow-lg shadow-primary/30 scale-110 z-10 hover:from-primary hover:to-primary/70 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus:outline-none" : !isDisabled && "hover:bg-accent/80 hover:text-accent-foreground hover:scale-105 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus:outline-none focus:bg-accent/90",
               isToday2 && !isSelected && "bg-primary/15 text-primary font-bold ring-2 ring-primary/30"
             ),
             children: [
@@ -10763,7 +10745,7 @@ var DatePicker = ({
             setViewMode("calendar");
           },
           className: cn(
-            "py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200",
+            "py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 active:scale-95",
             isSelected ? "bg-primary text-primary-foreground shadow-md" : "hover:bg-accent/80 text-foreground hover:scale-105"
           ),
           children: month
@@ -10787,7 +10769,7 @@ var DatePicker = ({
             setViewMode("month");
           },
           className: cn(
-            "py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200",
+            "py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 active:scale-95",
             isSelected ? "bg-primary text-primary-foreground shadow-md" : "hover:bg-accent/80 text-foreground hover:scale-105"
           ),
           children: year
@@ -19694,7 +19676,7 @@ var MultiCombobox = ({
       item.value
     );
   };
-  const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", className: cn("w-full overflow-hidden", getBorderRadiusClass(resolvedBorderMode)), children: [
+  const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", className: cn("w-full overflow-hidden", getPanelBorderRadiusClass(resolvedBorderMode)), children: [
     value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsx)("span", { className: "text-xs font-medium text-muted-foreground", children: maxSelected ? gi18n.selectedCountWithMax ? gi18n.selectedCountWithMax(value.length, maxSelected) : `${value.length} / ${maxSelected} max` : gi18n.itemSelectedCount ? gi18n.itemSelectedCount(value.length) : `${value.length} selected` }),
       showClear && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
@@ -23294,7 +23276,7 @@ function Carousel({
               {
                 onClick: () => scrollTo(idx),
                 className: cn(
-                  "rounded-full transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+                  "rounded-full transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 active:scale-75 active:opacity-70",
                   "max-md:w-1.5 max-md:h-1.5",
                   isHorizontal ? "w-2 h-2" : "w-2 h-2",
                   idx === currentIndex ? `bg-primary ${isHorizontal ? "w-6 max-md:w-4" : "h-6 max-md:h-4"}` : "bg-muted-foreground/50 hover:bg-muted-foreground/75"
@@ -23320,7 +23302,7 @@ function Carousel({
               {
                 onClick: () => scrollTo(idx),
                 className: cn(
-                  "shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all focus:outline-none focus:ring-2 focus:ring-primary",
+                  "shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus:outline-none active:scale-95",
                   "max-md:w-12 max-md:h-12",
                   idx === currentIndex ? "border-primary md:scale-110" : "border-transparent opacity-70 hover:opacity-100"
                 ),
@@ -25605,7 +25587,7 @@ var TableContainer = import_react32.default.forwardRef(({ className, useOverlayS
       },
       className: cn(
         TABLE_CONTAINER_BASE_CLASS,
-        resolvedBorderMode ? getBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl",
+        resolvedBorderMode ? getPanelBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl",
         className
       ),
       ...props