@underverse-ui/underverse 0.2.60 → 0.2.61

package/dist/index.cjs

@@ -440,7 +440,7 @@ var Badge = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: cn(baseClasses, "rounded-lg gap-1", sizeStyles[size], className), onClick: handleClick, role: "status", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: cn(baseClasses, "rounded-full gap-1", sizeStyles[size], className), onClick: handleClick, role: "status", children: [
     Icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Icon,
       {
@@ -2130,7 +2130,7 @@ function SmartImage({
   alt,
   className,
   ratioClass,
-  roundedClass = "rounded-xl",
+  roundedClass = "rounded-2xl md:rounded-3xl",
   fill = true,
   width,
   height,
@@ -2320,10 +2320,10 @@ var Avatar_default = Avatar;
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Skeleton = ({ className, width, height, variant = "rectangular", animation = "pulse", lines = 1 }) => {
   const variantClasses2 = {
-    rectangular: "rounded-md",
+    rectangular: "rounded-2xl md:rounded-3xl",
     circular: "rounded-full",
-    rounded: "rounded-lg",
-    text: "rounded"
+    rounded: "rounded-2xl md:rounded-3xl",
+    text: "rounded-xl"
   };
   const animationClasses = {
     pulse: "animate-pulse",
@@ -2372,9 +2372,9 @@ var SkeletonText = ({ lines = 3, className, width = "100%" }) => {
 };
 var SkeletonCard = ({ showAvatar = true, showImage = false, textLines = 3, className, children }) => {
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("p-4 space-y-4 rounded-lg bg-card outline-none focus:outline-none", className), children });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("p-4 space-y-4 rounded-2xl md:rounded-3xl bg-card outline-none focus:outline-none", className), children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("p-4 space-y-4 rounded-2xl bg-card outline-none focus:outline-none", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("p-4 space-y-4 rounded-2xl md:rounded-3xl bg-card outline-none focus:outline-none", className), children: [
     showAvatar && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonAvatar, {}),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-2", children: [
@@ -2382,7 +2382,7 @@ var SkeletonCard = ({ showAvatar = true, showImage = false, textLines = 3, class
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-3 w-16" })
       ] })
     ] }),
-    showImage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-48 w-full rounded-xl" }),
+    showImage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-48 w-full rounded-2xl md:rounded-3xl" }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonText, { lines: textLines }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex space-x-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonButton, { size: "sm" }),
@@ -2391,7 +2391,7 @@ var SkeletonCard = ({ showAvatar = true, showImage = false, textLines = 3, class
   ] });
 };
 var SkeletonPost = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("p-6 space-y-4 rounded-3xl bg-card outline-none focus:outline-none", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("p-6 space-y-4 rounded-2xl md:rounded-3xl bg-card outline-none focus:outline-none", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonAvatar, { size: "lg" }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-2", children: [
@@ -2423,7 +2423,7 @@ var SkeletonMessage = ({ own = false, showAvatar = true, className }) => {
   ] });
 };
 var SkeletonList = ({ items = 5, itemHeight = 60, showAvatar = true, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-3 p-3 rounded-xl", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center space-x-3 p-3 rounded-2xl md:rounded-3xl", children: [
     showAvatar && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkeletonAvatar, {}),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 space-y-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Skeleton, { className: "h-4 w-3/4" }),
@@ -4511,7 +4511,7 @@ var sizeStyles6 = {
     content: "mt-3 p-3"
   },
   md: {
-    tab: "py-2 px-4 text-sm",
+    tab: "py-2.5 px-4 text-sm",
     content: "mt-4 p-4"
   },
   lg: {
@@ -4521,33 +4521,33 @@ var sizeStyles6 = {
 };
 var variantStyles5 = {
   default: {
-    container: "border-b border-border",
-    tab: "border-b-2 border-transparent hover:border-border/60",
-    activeTab: "border-primary text-primary",
+    container: "border-b border-border/60 bg-muted/30 p-1 rounded-t-2xl",
+    tab: "rounded-full border-b-2 border-transparent hover:bg-accent/40",
+    activeTab: "border-primary bg-background text-primary shadow-sm",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   },
   pills: {
-    container: "bg-muted p-1 rounded-lg",
-    tab: "rounded-md transition-all duration-200",
-    activeTab: "bg-background text-foreground shadow-sm",
+    container: "bg-muted/50 backdrop-blur-sm p-1.5 rounded-2xl border border-border/40",
+    tab: "rounded-full transition-all duration-200",
+    activeTab: "bg-background text-foreground shadow-md border border-border/50",
     inactiveTab: "text-muted-foreground hover:text-foreground hover:bg-background/50"
   },
   underline: {
-    container: "relative border-b border-border",
-    tab: "relative transition-colors duration-200 pb-3 border-b-2 border-transparent hover:border-border/60",
-    activeTab: "text-primary border-primary font-medium",
+    container: "relative border-b border-border/60",
+    tab: "relative transition-colors duration-200 pb-3 border-b-2 border-transparent hover:border-primary/30",
+    activeTab: "text-primary border-primary font-semibold",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   },
   card: {
-    container: "space-y-1",
+    container: "space-y-1.5 bg-muted/20 p-2 rounded-2xl border border-border/30",
     tab: "rounded-xl border border-transparent transition-all duration-200",
-    activeTab: "bg-primary text-primary-foreground border-primary",
-    inactiveTab: "text-muted-foreground hover:text-foreground hover:bg-accent/50 hover:border-border hover:shadow-sm"
+    activeTab: "bg-primary text-primary-foreground border-primary shadow-md",
+    inactiveTab: "text-muted-foreground hover:text-foreground hover:bg-accent/50 hover:border-border/50"
   },
   "underline-card": {
-    container: "border-b border-border bg-card rounded-t-2xl",
-    tab: "relative transition-all duration-200 pb-3 px-4 border-b-2 border-transparent hover:border-primary/50 hover:bg-accent/30",
-    activeTab: "text-primary border-primary font-medium bg-accent/20",
+    container: "border-b border-border/60 bg-card/80 backdrop-blur-sm rounded-t-2xl p-1",
+    tab: "relative transition-all duration-200 pb-3 px-4 rounded-t-xl border-b-2 border-transparent hover:border-primary/30 hover:bg-accent/30",
+    activeTab: "text-primary border-primary font-semibold bg-accent/30",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   }
 };
@@ -4667,7 +4667,8 @@ var Tabs = ({
         id: `${baseId}-panel-${tabs.findIndex((t) => t.value === active)}`,
         "aria-labelledby": `${baseId}-tab-${tabs.findIndex((t) => t.value === active)}`,
         className: cn(
-          "bg-card rounded-xl border border-border shadow-sm text-card-foreground transition-all duration-200",
+          "bg-card rounded-2xl md:rounded-3xl border border-border/60 shadow-sm text-card-foreground transition-all duration-200",
+          "backdrop-blur-sm",
           sizeStyles6[size].content,
           orientation === "vertical" && "flex-1"
         ),
@@ -5008,6 +5009,7 @@ var Combobox = ({
     const itemDescription = getOptionDescription(item);
     const itemDisabled = getOptionDisabled(item);
     const isSelected = itemValue === value;
+    const isEven = index % 2 === 0;
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "li",
       {
@@ -5024,11 +5026,12 @@ var Combobox = ({
           animationDelay: open ? `${Math.min(index * 15, 150)}ms` : "0ms"
         },
         className: cn(
-          "dropdown-item group flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2.5 text-sm",
+          "dropdown-item group flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm",
           "outline-none focus:outline-none focus-visible:outline-none",
           "transition-all duration-150",
-          !itemDisabled && "hover:bg-accent/80 hover:shadow-sm",
-          !itemDisabled && "focus:bg-accent focus:text-accent-foreground",
+          isEven && "bg-muted/40",
+          !itemDisabled && "hover:bg-accent/70 hover:shadow-sm",
+          !itemDisabled && "focus:bg-accent/80 focus:text-accent-foreground",
           index === activeIndex && !itemDisabled && "bg-accent/60",
           isSelected && "bg-primary/10 text-primary font-medium",
           itemDisabled && "opacity-50 cursor-not-allowed"
@@ -5106,11 +5109,17 @@ var Combobox = ({
       /* @__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
-      Object.entries(groupedOptions).map(([group, items], groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn(groupIndex > 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, index) => renderOptionItem(item, groupIndex * 100 + index)) })
-      ] }, group))
+      // 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)) })
@@ -5437,17 +5446,23 @@ var Pagination = ({
             }
           )
         ] }),
-        pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          Combobox,
-          {
-            options: pageSizeOptionsStrings,
-            value: pageSize?.toString() || "10",
-            onChange: handlePageSizeChange,
-            size: "sm",
-            className: "w-14",
-            disabled
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", {})
+        pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "text-xs text-muted-foreground/70 hidden sm:inline", children: [
+            t("itemsPerPage"),
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            Combobox,
+            {
+              options: pageSizeOptionsStrings,
+              value: pageSize?.toString() || "10",
+              onChange: handlePageSizeChange,
+              size: "sm",
+              className: "w-20 sm:w-24",
+              disabled
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", {})
       ]
     }
   );
@@ -5673,7 +5688,12 @@ var ScrollArea = (0, import_react14.forwardRef)(
       "div",
       {
         ref,
-        className: cn("relative overflow-hidden", variantClasses[variant], outlined && "rounded-xl border border-border/60", className),
+        className: cn(
+          "relative overflow-hidden rounded-2xl md:rounded-3xl",
+          variantClasses[variant],
+          outlined && "border border-border/60",
+          className
+        ),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport", contentClassName), children })
       }
@@ -7727,6 +7747,7 @@ var MultiCombobox = ({
     const isDisabled = item.disabled || disabledOptions.includes(item.value);
     const optionIcon = item.icon;
     const optionDesc = item.description;
+    const isEven = index % 2 === 0;
     if (renderOption) {
       return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "li",
@@ -7741,7 +7762,7 @@ var MultiCombobox = ({
             inputRef.current?.focus();
           },
           style: { animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms" },
-          className: cn("dropdown-item", isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"),
+          className: cn("dropdown-item", isEven && "bg-muted/25", isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"),
           children: renderOption(item, isSelected)
         },
         item.value
@@ -7761,11 +7782,12 @@ var MultiCombobox = ({
         },
         style: { animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms" },
         className: cn(
-          "dropdown-item flex cursor-pointer items-center gap-3 rounded-xl transition-all duration-200",
+          "dropdown-item flex cursor-pointer items-center gap-3 rounded-lg transition-all duration-200",
           sizeStyles8[size].item,
-          "hover:bg-linear-to-r hover:from-primary/5 hover:to-transparent",
-          index === activeIndex && "bg-primary/5",
-          isSelected && "bg-primary/5",
+          isEven && "bg-muted/25",
+          "hover:bg-accent/70 hover:shadow-sm",
+          index === activeIndex && "bg-accent/60",
+          isSelected && "bg-primary/10 text-primary font-medium",
           isDisabled && "opacity-40 cursor-not-allowed pointer-events-none"
         ),
         children: [
@@ -8968,26 +8990,23 @@ function CategoryTreeSelect(props) {
     const hasChildren = children.length > 0;
     const isExpanded = expandedNodes.has(category.id);
     const isSelected = valueArray.includes(category.id);
+    const isParent = level === 0;
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "animate-in fade-in-50 duration-200", style: { animationDelay: `${level * 30}ms` }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
         "div",
         {
           className: cn(
-            "relative flex items-center gap-2.5 px-3 py-2.5 rounded-xl transition-all duration-200",
+            "relative flex items-center gap-2.5 px-3 py-2.5 transition-all duration-200",
+            "border-l-4 border-l-transparent",
+            // Parent level styling
+            isParent && "bg-muted/25 font-medium",
             !viewOnly && "cursor-pointer",
             !viewOnly && !isSelected && "hover:bg-accent/60 hover:shadow-sm",
             // Selected state
-            !viewOnly && isSelected && "bg-linear-to-r from-primary/15 via-primary/10 to-primary/5 shadow-sm"
+            !viewOnly && isSelected && "bg-accent/30 border-l-primary shadow-sm"
           ),
           style: { paddingLeft: `${level * 1.25 + 0.75}rem` },
           children: [
-            !viewOnly && isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-              "span",
-              {
-                "aria-hidden": true,
-                className: "absolute left-0 top-2 bottom-2 w-1 rounded-full bg-linear-to-b from-primary to-primary/70 shadow-sm shadow-primary/30"
-              }
-            ),
             hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "button",
               {
@@ -9288,7 +9307,7 @@ function ImageUpload({
       "div",
       {
         className: cn(
-          "relative border-2 border-dashed rounded-xl p-8 text-center transition-all duration-200",
+          "relative border-2 border-dashed rounded-2xl md:rounded-3xl p-8 text-center transition-all duration-200",
           isDragging && !disabled ? "border-primary bg-primary/5 scale-[1.02]" : "border-border hover:border-primary/50",
           disabled && "opacity-50 cursor-not-allowed",
           uploading && "pointer-events-none"
@@ -9297,7 +9316,7 @@ function ImageUpload({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          uploading && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-3", children: [
+          uploading && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-2xl md:rounded-3xl", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.Loader2, { className: "w-6 h-6 animate-spin text-primary" }),
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm font-medium", children: "Uploading..." })
           ] }) }),
@@ -9326,7 +9345,7 @@ function ImageUpload({
     ),
     showPreview && uploadedImages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "space-y-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative group bg-card border border-border rounded-xl p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative group bg-card border border-border rounded-2xl md:rounded-3xl p-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Button_default,
           {
@@ -9533,7 +9552,10 @@ function Carousel({
     "div",
     {
       ref: carouselRef,
-      className: cn("relative w-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-2xl", className),
+      className: cn(
+        "relative w-full overflow-hidden focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded-2xl md:rounded-3xl",
+        className
+      ),
       onMouseEnter: () => setIsPaused(true),
       onMouseLeave: () => setIsPaused(false),
       role: "region",
@@ -9990,12 +10012,12 @@ var ListRoot = React34.forwardRef(
     const hasChildren = childCount > 0;
     const variantClasses2 = {
       plain: "",
-      outlined: "rounded-xl md:rounded-2xl bg-card text-card-foreground border border-border shadow-sm",
-      soft: "rounded-xl bg-muted/40 border border-border/60",
-      bordered: "border border-border rounded-xl",
-      card: "rounded-xl bg-card shadow-md border border-border",
+      outlined: "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border shadow-sm",
+      soft: "rounded-2xl md:rounded-3xl bg-muted/40 border border-border/60",
+      bordered: "border border-border rounded-2xl md:rounded-3xl",
+      card: "rounded-2xl md:rounded-3xl bg-card shadow-md border border-border",
       flush: "",
-      striped: "rounded-xl border border-border overflow-hidden"
+      striped: "rounded-2xl md:rounded-3xl border border-border overflow-hidden"
     };
     if (loading2) {
       return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -11258,14 +11280,14 @@ function joinAreas(areas) {
 }
 function getVariantClasses(variant = "default", outlined) {
   if (outlined) {
-    return "rounded-xl md:rounded-2xl bg-card text-card-foreground border border-border shadow-sm";
+    return "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border shadow-sm";
   }
   const variants = {
     default: "",
-    bordered: "border border-border rounded-xl",
-    card: "rounded-xl md:rounded-2xl bg-card text-card-foreground border border-border shadow-sm",
-    flat: "bg-muted/30 rounded-xl",
-    glass: "bg-background/80 backdrop-blur-sm border border-border/50 rounded-xl shadow-lg"
+    bordered: "border border-border rounded-2xl md:rounded-3xl",
+    card: "rounded-2xl md:rounded-3xl bg-card text-card-foreground border border-border shadow-sm",
+    flat: "bg-muted/30 rounded-2xl md:rounded-3xl",
+    glass: "bg-background/80 backdrop-blur-sm border border-border/50 rounded-2xl md:rounded-3xl shadow-lg"
   };
   return variants[variant] || "";
 }
@@ -11400,7 +11422,11 @@ var GridItem = import_react21.default.forwardRef(
         "div",
         {
           ref,
-          className: cn(hoverable && "transition-all duration-200 hover:scale-[1.02] hover:shadow-md cursor-pointer", className),
+          className: cn(
+            "rounded-2xl md:rounded-3xl",
+            hoverable && "transition-all duration-200 hover:scale-[1.02] hover:shadow-md cursor-pointer",
+            className
+          ),
           style: st,
           ...rest
         }
@@ -13376,7 +13402,17 @@ function DataTable({
         totalItems
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button_default, { variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => setCurPage(Math.max(1, curPage - 1)), disabled: curPage === 1, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          Button_default,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 w-7 p-0 rounded-full",
+            onClick: () => setCurPage(Math.max(1, curPage - 1)),
+            disabled: curPage === 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+          }
+        ),
         (() => {
           const totalPages = Math.ceil(totalItems / curPageSize);
           const pages = [];
@@ -13397,7 +13433,7 @@ function DataTable({
               {
                 onClick: () => setCurPage(p),
                 className: cn(
-                  "h-7 min-w-7 px-1.5 rounded-lg text-xs font-medium transition-colors",
+                  "h-7 min-w-7 px-2 rounded-full text-xs font-medium transition-colors",
                   curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"
                 ),
                 children: p
@@ -13411,7 +13447,7 @@ function DataTable({
           {
             variant: "ghost",
             size: "sm",
-            className: "h-7 w-7 p-0",
+            className: "h-7 w-7 p-0 rounded-full",
             onClick: () => setCurPage(Math.min(Math.ceil(totalItems / curPageSize), curPage + 1)),
             disabled: curPage === Math.ceil(totalItems / curPageSize),
             children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
@@ -13428,7 +13464,7 @@ function DataTable({
             setCurPageSize(Number(v));
           },
           size: "sm",
-          className: "w-14 h-7"
+          className: "w-20"
         }
       )
     ] })