@underverse-ui/underverse 0.2.4 → 0.2.7

package/dist/index.cjs

@@ -226,10 +226,12 @@ var Button = (0, import_react.forwardRef)(
     asContainer = false,
     noWrap = true,
     noHoverOverlay = false,
+    gradient = false,
     ...rest
   }, ref) => {
     const baseStyles = asContainer ? "relative inline-flex justify-center rounded-md font-medium transition-colors duration-150 ease-soft outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px" : "relative inline-flex items-center justify-center gap-2 rounded-md font-medium overflow-hidden transition-colors duration-150 ease-soft outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px";
-    const variantStyle = VARIANT_STYLES_BTN[variant] || VARIANT_STYLES_BTN.default;
+    const finalVariant = gradient ? "gradient" : variant;
+    const variantStyle = VARIANT_STYLES_BTN[finalVariant] || VARIANT_STYLES_BTN.default;
     const sizeStyle = SIZE_STYLES_BTN[size] || SIZE_STYLES_BTN.md;
     const SpinnerIcon = Spinner ?? import_lucide_react.Activity;
     const [locked, setLocked] = (0, import_react.useState)(false);
@@ -287,7 +289,7 @@ var Button = (0, import_react.forwardRef)(
         "aria-label": rest["aria-label"] || title,
         ...rest,
         children: [
-          !noHoverOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute inset-0 bg-gradient-to-r from-primary-foreground/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200" }),
+          !noHoverOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute inset-0 bg-gradient-to-r from-primary-foreground/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 dark:hidden" }),
           loading2 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpinnerIcon, { className: "w-4 h-4 animate-spin" }),
             loadingText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2", "aria-live": "polite", children: loadingText }),
@@ -2260,7 +2262,7 @@ var sizeStyles3 = {
   md: "max-w-md",
   lg: "max-w-lg",
   xl: "max-w-xl",
-  full: "max-w-full mx-4"
+  full: "max-w-full"
 };
 var Modal = ({
   isOpen,
@@ -2269,11 +2271,14 @@ var Modal = ({
   title,
   description,
   className,
+  contentClassName,
   overlayClassName,
   showCloseButton = true,
   closeOnOverlayClick = true,
   closeOnEsc = true,
-  size = "md"
+  size = "md",
+  noPadding = false,
+  fullWidth = false
 }) => {
   const [isMounted, setIsMounted] = React9.useState(false);
   const [isVisible, setIsVisible] = React9.useState(false);
@@ -2341,7 +2346,8 @@ var Modal = ({
         className: cn(
           "relative w-full rounded-lg  bg-card text-card-foreground shadow-xl",
           "transition-all duration-200 ease-out",
-          sizeStyles3[size],
+          fullWidth ? "max-w-full" : sizeStyles3[size],
+          fullWidth && "mx-0",
           className
         ),
         style: {
@@ -2370,7 +2376,7 @@ var Modal = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "p-6", children })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
         ]
       }
     )
@@ -4025,7 +4031,9 @@ var Combobox = ({
   usePortal = true,
   label,
   required,
-  fontBold = false
+  fontBold = false,
+  loading: loading2 = false,
+  loadingText = "Loading..."
 }) => {
   const [open, setOpen] = React18.useState(false);
   const [query, setQuery] = React18.useState("");
@@ -4043,6 +4051,7 @@ var Combobox = ({
   );
   const [dropdownPosition, setDropdownPosition] = React18.useState(null);
   const triggerRef = React18.useRef(null);
+  const dropdownRef = React18.useRef(null);
   const calculatePosition = React18.useCallback(() => {
     if (!triggerRef.current) return null;
     const rect = triggerRef.current.getBoundingClientRect();
@@ -4071,11 +4080,10 @@ var Combobox = ({
     if (!open) return;
     const handleClickOutside = (event) => {
       const target = event.target;
-      if (triggerRef.current && !triggerRef.current.contains(target)) {
-        const dropdown = document.querySelector("[data-combobox-dropdown]");
-        if (dropdown && !dropdown.contains(target)) {
-          setOpen(false);
-        }
+      const triggerEl = triggerRef.current;
+      const dropdownEl = dropdownRef.current;
+      if (triggerEl && !triggerEl.contains(target) && dropdownEl && !dropdownEl.contains(target)) {
+        setOpen(false);
       }
     };
     const handleEscape = (event) => {
@@ -4119,6 +4127,7 @@ var Combobox = ({
     "div",
     {
       "data-combobox-dropdown": true,
+      ref: dropdownRef,
       style: {
         position: "absolute",
         top: dropdownPosition?.top || 0,
@@ -4176,7 +4185,10 @@ var Combobox = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "p-1 space-y-1", children: filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "max-h-64 overflow-y-auto overscroll-contain", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "p-1 space-y-1", children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Loader2, { className: "h-6 w-6 animate-spin text-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm text-muted-foreground", children: loadingText || "Loading..." })
+        ] }) }) : filteredOptions.length > 0 ? filteredOptions.map((item, index) => {
           const itemValue = getOptionValue(item);
           const itemLabel = getOptionLabel(item);
           const isSelected = itemValue === value;
@@ -4210,9 +4222,18 @@ var Combobox = ({
             },
             `${itemValue}-${index}`
           );
-        }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Search, { className: "h-6 w-6 opacity-50" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: emptyText })
+        }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { className: "px-3 py-8 text-center text-muted-foreground text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm", children: emptyText }),
+          query && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setQuery(""),
+              className: "text-xs text-primary hover:underline",
+              children: "Clear search"
+            }
+          )
         ] }) }) }) })
       ] })
     }
@@ -4288,7 +4309,15 @@ var Combobox = ({
                 children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.X, { className: "h-3 w-3" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-transform duration-200", open && "rotate-180") })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              import_lucide_react12.ChevronDown,
+              {
+                className: cn(
+                  "h-4 w-4 text-muted-foreground transition-all duration-200",
+                  open && "rotate-180 scale-110 text-primary"
+                )
+              }
+            )
           ] })
         ]
       }
@@ -4964,10 +4993,9 @@ var DatePicker = ({
             },
             className: cn(
               size === "sm" ? "w-7 h-7 text-[12px]" : "w-8 h-8 text-sm",
-              "datepicker-day rounded-md hover:bg-accent hover:text-accent-foreground",
-              "focus:bg-accent focus:text-accent-foreground focus:outline-none",
+              "datepicker-day rounded-md focus:outline-none",
               "transition-colors",
-              isSelected && "bg-primary text-primary-foreground hover:bg-primary/90",
+              isSelected ? "bg-primary text-primary-foreground hover:bg-primary/90 focus:bg-primary focus:text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
               isToday2 && !isSelected && "bg-accent text-accent-foreground font-semibold"
             ),
             children: day
@@ -6118,7 +6146,7 @@ function Calendar2({
               disabled && "opacity-40 cursor-not-allowed",
               isToday2 && !selectedDay && "ring-1 ring-primary/50",
               selectedDay && "bg-primary text-primary-foreground hover:bg-primary/90",
-              !selectedDay && "hover:bg-accent"
+              !selectedDay && "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
             ),
             title: d.toDateString(),
             children: [
@@ -6179,7 +6207,7 @@ function Calendar2({
               disabled && "opacity-40 cursor-not-allowed",
               isToday2 && !selectedDay && "ring-1 ring-primary/50",
               selectedDay && "bg-primary text-primary-foreground hover:bg-primary/90",
-              !selectedDay && "hover:bg-accent"
+              !selectedDay && "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
             ),
             title: d.toDateString(),
             children: [
@@ -6216,7 +6244,10 @@ var MultiCombobox = ({
   label,
   title,
   required,
-  displayFormat = (option) => option.label
+  displayFormat = (option) => option.label,
+  loading: loading2 = false,
+  loadingText = "Loading...",
+  emptyText = "No results found"
 }) => {
   const [query, setQuery] = React24.useState("");
   const [open, setOpen] = React24.useState(false);
@@ -6225,6 +6256,7 @@ var MultiCombobox = ({
   const listRef = React24.useRef([]);
   const [dropdownPosition, setDropdownPosition] = React24.useState(null);
   const triggerRef = React24.useRef(null);
+  const dropdownRef = React24.useRef(null);
   useShadCNAnimations();
   const calculatePosition = React24.useCallback(() => {
     if (!triggerRef.current) return null;
@@ -6254,11 +6286,10 @@ var MultiCombobox = ({
     if (!open) return;
     const handleClickOutside = (event) => {
       const target = event.target;
-      if (triggerRef.current && !triggerRef.current.contains(target)) {
-        const dropdown = document.querySelector('[data-dropdown="multicombobox"]');
-        if (dropdown && !dropdown.contains(target)) {
-          setOpen(false);
-        }
+      const triggerEl = triggerRef.current;
+      const dropdownEl = dropdownRef.current;
+      if (triggerEl && !triggerEl.contains(target) && dropdownEl && !dropdownEl.contains(target)) {
+        setOpen(false);
       }
     };
     const handleEscape = (event) => {
@@ -6427,7 +6458,12 @@ var MultiCombobox = ({
             value.length,
             " selected"
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.ChevronDown, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            import_lucide_react17.ChevronDown,
+            {
+              className: cn("opacity-50 transition-all duration-200", sizeStyles8[size].icon, open && "rotate-180 scale-110 text-primary opacity-100")
+            }
+          )
         ]
       }
     ),
@@ -6435,6 +6471,7 @@ var MultiCombobox = ({
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
+          ref: dropdownRef,
           "data-dropdown": "multicombobox",
           style: {
             position: "absolute",
@@ -6452,10 +6489,7 @@ var MultiCombobox = ({
           children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             "div",
             {
-              className: cn(
-                "rounded-md border bg-popover text-popover-foreground shadow-md",
-                "backdrop-blur-sm bg-popover/95 border-border/60"
-              ),
+              className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60"),
               children: [
                 showClear && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   "button",
@@ -6487,7 +6521,10 @@ var MultiCombobox = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: filtered.length ? filtered.map((item, index) => {
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Loader2, { className: "h-6 w-6 animate-spin text-primary" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-muted-foreground", children: loadingText })
+                ] }) }) : filtered.length ? filtered.map((item, index) => {
                   const isSelected = value.includes(item.value);
                   const isDisabled = disabledOptions.includes(item.value);
                   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
@@ -6519,7 +6556,20 @@ var MultiCombobox = ({
                     },
                     item.value
                   );
-                }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: cn("px-3 py-2 text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: "No result." }) })
+                }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  "li",
+                  {
+                    className: cn(
+                      "px-3 py-8 text-center text-muted-foreground",
+                      size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col items-center gap-2 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.SearchX, { className: "h-8 w-8 opacity-40 text-muted-foreground" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: emptyText }),
+                      query && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { type: "button", onClick: () => setQuery(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
+                    ] })
+                  }
+                ) })
               ]
             }
           )
@@ -10189,11 +10239,44 @@ function DataTable({
     col.key
   )) });
   const isServerMode = Boolean(onQueryChange);
+  const processedData = import_react23.default.useMemo(() => {
+    if (isServerMode) return data;
+    let result = [...data];
+    if (Object.keys(filters).length > 0) {
+      result = result.filter((row) => {
+        return Object.entries(filters).every(([key, value]) => {
+          if (value === void 0 || value === null || value === "") return true;
+          const col = columns.find((c) => c.key === key);
+          const rowValue = col?.dataIndex ? row[col.dataIndex] : row[key];
+          if (col?.filter?.type === "date" && value instanceof Date) {
+            return new Date(rowValue).toDateString() === value.toDateString();
+          }
+          return String(rowValue ?? "").toLowerCase().includes(String(value).toLowerCase());
+        });
+      });
+    }
+    if (sort) {
+      result.sort((a, b) => {
+        const col = columns.find((c) => c.key === sort.key);
+        const aValue = col?.dataIndex ? a[col.dataIndex] : a[sort.key];
+        const bValue = col?.dataIndex ? b[col.dataIndex] : b[sort.key];
+        if (aValue === bValue) return 0;
+        if (typeof aValue === "number" && typeof bValue === "number") {
+          return sort.order === "asc" ? aValue - bValue : bValue - aValue;
+        }
+        const compare = String(aValue).localeCompare(String(bValue));
+        return sort.order === "asc" ? compare : -compare;
+      });
+    }
+    return result;
+  }, [data, isServerMode, filters, sort, columns]);
+  const totalItems = isServerMode ? total : processedData.length;
   const displayedData = isServerMode ? data : import_react23.default.useMemo(() => {
     const start = (curPage - 1) * curPageSize;
-    return data.slice(start, start + curPageSize);
-  }, [data, curPage, curPageSize]);
-  const totalItems = isServerMode ? total : data.length;
+    if (start >= processedData.length && curPage > 1) {
+    }
+    return processedData.slice(start, start + curPageSize);
+  }, [processedData, curPage, curPageSize]);
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
@@ -10265,24 +10348,27 @@ function DataTable({
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col, colIdx) => {
-            const value = col.dataIndex ? row[col.dataIndex] : void 0;
-            return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              TableCell,
-              {
-                className: cn(
-                  cellPadding,
-                  col.align === "right" && "text-right",
-                  col.align === "center" && "text-center",
-                  columnDividers && colIdx > 0 && "border-l border-border/60",
-                  idx === data.length - 1 && col === visibleColumns[0] && "rounded-bl-md",
-                  idx === data.length - 1 && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-md"
-                ),
-                children: col.render ? col.render(value, row, idx) : String(value ?? "")
-              },
-              col.key
-            );
-          }) }, getRowKey(row, idx))) })
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => {
+            const isLastRow = idx === displayedData.length - 1;
+            return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col, colIdx) => {
+              const value = col.dataIndex ? row[col.dataIndex] : void 0;
+              return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                TableCell,
+                {
+                  className: cn(
+                    cellPadding,
+                    col.align === "right" && "text-right",
+                    col.align === "center" && "text-center",
+                    columnDividers && colIdx > 0 && "border-l border-border/60",
+                    isLastRow && col === visibleColumns[0] && "rounded-bl-md",
+                    isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-md"
+                  ),
+                  children: col.render ? col.render(value, row, idx) : String(value ?? "")
+                },
+                col.key
+              );
+            }) }, getRowKey(row, idx));
+          }) })
         ]
       }
     ) }),