@underverse-ui/underverse 0.2.60 → 0.2.62

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 })
       }
@@ -5720,6 +5740,7 @@ var DatePicker = ({
   const locale = useLocale();
   const [isOpen, setIsOpen] = React23.useState(false);
   const [viewDate, setViewDate] = React23.useState(value || /* @__PURE__ */ new Date());
+  const [viewMode, setViewMode] = React23.useState("calendar");
   const triggerRef = React23.useRef(null);
   const wheelContainerRef = React23.useRef(null);
   const wheelDeltaRef = React23.useRef(0);
@@ -5731,6 +5752,11 @@ var DatePicker = ({
       setViewDate(/* @__PURE__ */ new Date());
     }
   }, [value]);
+  React23.useEffect(() => {
+    if (!isOpen) {
+      setViewMode("calendar");
+    }
+  }, [isOpen]);
   const handleDateSelect = (date) => {
     let selectedDate;
     if (value && (value.getHours() !== 0 || value.getMinutes() !== 0 || value.getSeconds() !== 0)) {
@@ -5839,13 +5865,64 @@ var DatePicker = ({
     }
     return days;
   };
+  const renderMonthSelector = () => {
+    const months = locale === "vi" ? ["Th1", "Th2", "Th3", "Th4", "Th5", "Th6", "Th7", "Th8", "Th9", "Th10", "Th11", "Th12"] : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-3 gap-2 p-2", children: months.map((month, idx) => {
+      const isSelected = viewDate.getMonth() === idx;
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setViewDate(new Date(viewDate.getFullYear(), idx, 1));
+            setViewMode("calendar");
+          },
+          className: cn(
+            "py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200",
+            isSelected ? "bg-primary text-primary-foreground shadow-md" : "hover:bg-accent/80 text-foreground hover:scale-105"
+          ),
+          children: month
+        },
+        month
+      );
+    }) });
+  };
+  const renderYearSelector = () => {
+    const currentYear = viewDate.getFullYear();
+    const startYear = Math.floor(currentYear / 12) * 12;
+    const years = Array.from({ length: 12 }, (_, i) => startYear + i);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-3 gap-2 p-2", children: years.map((year) => {
+      const isSelected = viewDate.getFullYear() === year;
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setViewDate(new Date(year, viewDate.getMonth(), 1));
+            setViewMode("month");
+          },
+          className: cn(
+            "py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200",
+            isSelected ? "bg-primary text-primary-foreground shadow-md" : "hover:bg-accent/80 text-foreground hover:scale-105"
+          ),
+          children: year
+        },
+        year
+      );
+    }) });
+  };
+  const navigateYearRange = (direction) => {
+    const currentYear = viewDate.getFullYear();
+    const offset = direction === "next" ? 12 : -12;
+    setViewDate(new Date(currentYear + offset, viewDate.getMonth(), 1));
+  };
   const datePickerContent = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: wheelContainerRef, "data-datepicker": true, className: "w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between mb-4 px-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           type: "button",
-          onClick: () => navigateMonth("prev"),
+          onClick: () => viewMode === "year" ? navigateYearRange("prev") : navigateMonth("prev"),
           className: cn(
             "p-2 rounded-xl transition-all duration-200",
             "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
@@ -5855,15 +5932,37 @@ var DatePicker = ({
           children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-sm font-bold text-foreground", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs text-muted-foreground font-medium", children: viewDate.getFullYear() })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewMode(viewMode === "month" ? "calendar" : "month"),
+            className: cn(
+              "text-sm font-bold transition-all duration-200 px-2 py-1 rounded-lg",
+              viewMode === "month" ? "bg-primary/15 text-primary" : "text-foreground hover:bg-accent/50"
+            ),
+            children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewMode(viewMode === "year" ? "calendar" : "year"),
+            className: cn(
+              "text-sm font-bold transition-all duration-200 px-2 py-1 rounded-lg",
+              viewMode === "year" ? "bg-primary/15 text-primary" : "text-foreground hover:bg-accent/50"
+            ),
+            children: viewDate.getFullYear()
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           type: "button",
-          onClick: () => navigateMonth("next"),
+          onClick: () => viewMode === "year" ? navigateYearRange("next") : navigateMonth("next"),
           className: cn(
             "p-2 rounded-xl transition-all duration-200",
             "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
@@ -5874,22 +5973,26 @@ var DatePicker = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("grid grid-cols-7 gap-1 mb-2 px-0.5"), children: (weekdayLabels || (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"])).map(
-      (day, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        "div",
-        {
-          className: cn(
-            "text-center font-bold uppercase tracking-wide",
-            size === "sm" ? "text-[9px] py-1" : "text-[10px] py-1.5",
-            idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
-          ),
-          children: day
-        },
-        day
-      )
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-7 gap-1 p-1 rounded-xl bg-muted/20", children: renderCalendar() }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2 mt-4 pt-3 border-t border-border/50", children: [
+    viewMode === "calendar" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("grid grid-cols-7 gap-1 mb-2 px-0.5"), children: (weekdayLabels || (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"])).map(
+        (day, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "div",
+          {
+            className: cn(
+              "text-center font-bold uppercase tracking-wide",
+              size === "sm" ? "text-[9px] py-1" : "text-[10px] py-1.5",
+              idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
+            ),
+            children: day
+          },
+          day
+        )
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-7 gap-1 p-1 rounded-xl bg-muted/20", children: renderCalendar() })
+    ] }),
+    viewMode === "month" && renderMonthSelector(),
+    viewMode === "year" && renderYearSelector(),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex items-center gap-2 mt-4 pt-3 border-t border-border/50", size === "sm" && "mt-3 pt-2 gap-1.5"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "button",
         {
@@ -5899,14 +6002,15 @@ var DatePicker = ({
             handleDateSelect(today);
           },
           className: cn(
-            "flex-1 px-3 py-2 text-xs font-semibold rounded-xl",
+            "flex-1 font-semibold rounded-xl",
             "bg-linear-to-r from-primary/10 to-primary/5 border border-primary/30",
             "text-primary hover:from-primary/20 hover:to-primary/10 hover:border-primary/50",
-            "transition-all duration-300 flex items-center justify-center gap-2",
-            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10"
+            "transition-all duration-300 flex items-center justify-center",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10",
+            size === "sm" ? "px-2 py-1 text-[10px] gap-1" : "px-3 py-2 text-xs gap-2"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Sparkles, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Sparkles, { className: size === "sm" ? "w-2.5 h-2.5" : "w-3.5 h-3.5" }),
             todayLabel || t("today")
           ]
         }
@@ -5921,14 +6025,15 @@ var DatePicker = ({
             setViewDate(/* @__PURE__ */ new Date());
           },
           className: cn(
-            "flex-1 px-3 py-2 text-xs font-semibold rounded-xl",
+            "flex-1 font-semibold rounded-xl",
             "bg-linear-to-r from-destructive/10 to-destructive/5 border border-destructive/30",
             "text-destructive hover:from-destructive/20 hover:to-destructive/10 hover:border-destructive/50",
-            "transition-all duration-300 flex items-center justify-center gap-2",
-            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-destructive/10"
+            "transition-all duration-300 flex items-center justify-center",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-destructive/10",
+            size === "sm" ? "px-2 py-1 text-[10px] gap-1" : "px-3 py-2 text-xs gap-2"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.X, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.X, { className: size === "sm" ? "w-2.5 h-2.5" : "w-3.5 h-3.5" }),
             clearLabel || t("clear")
           ]
         }
@@ -6061,20 +6166,25 @@ var DatePicker = ({
     )
   ] });
 };
-var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className, disablePastDates = false }) => {
+var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className, disablePastDates = false, size = "md" }) => {
   const locale = useLocale();
+  const t = useTranslations("DatePicker");
   const [isOpen, setIsOpen] = React23.useState(false);
   const wheelContainerRef = React23.useRef(null);
   const wheelDeltaRef = React23.useRef(0);
+  const normalizeToLocal = (date) => {
+    if (!date) return null;
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  };
   const [viewDate, setViewDate] = React23.useState(startDate || /* @__PURE__ */ new Date());
-  const [tempStart, setTempStart] = React23.useState(startDate || null);
-  const [tempEnd, setTempEnd] = React23.useState(endDate || null);
+  const [tempStart, setTempStart] = React23.useState(normalizeToLocal(startDate));
+  const [tempEnd, setTempEnd] = React23.useState(normalizeToLocal(endDate));
   const [hoveredDate, setHoveredDate] = React23.useState(null);
   React23.useEffect(() => {
-    setTempStart(startDate || null);
+    setTempStart(normalizeToLocal(startDate));
   }, [startDate]);
   React23.useEffect(() => {
-    setTempEnd(endDate || null);
+    setTempEnd(normalizeToLocal(endDate));
   }, [endDate]);
   const isSameDay2 = (a, b) => {
     if (!a || !b) return false;
@@ -6175,7 +6285,8 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
             onMouseEnter: () => !isPastDate && tempStart && !tempEnd && setHoveredDate(date),
             onMouseLeave: () => tempStart && !tempEnd && setHoveredDate(null),
             className: cn(
-              "w-8 h-8 text-sm transition-all duration-200 focus:outline-none relative font-medium",
+              "transition-all duration-200 focus:outline-none relative font-medium",
+              size === "sm" ? "w-6 h-6 text-xs" : "w-8 h-8 text-sm",
               // Disabled/past date state
               isPastDate && "opacity-30 cursor-not-allowed text-muted-foreground",
               // Default state
@@ -6201,24 +6312,25 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     return nodes;
   };
   const panel = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: wheelContainerRef, className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between mb-4 px-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex items-center justify-between px-1", size === "sm" ? "mb-2" : "mb-4"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           type: "button",
           onClick: () => navigateMonth("prev"),
           className: cn(
-            "p-2 rounded-xl transition-all duration-200",
+            "rounded-xl transition-all duration-200",
+            size === "sm" ? "p-1.5" : "p-2",
             "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
             "hover:scale-110 active:scale-95 hover:shadow-md",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronLeft, { className: cn(size === "sm" ? "h-3 w-3" : "h-4 w-4") })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-sm font-bold text-foreground", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs text-muted-foreground font-medium", children: viewDate.getFullYear() })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("font-bold text-foreground", size === "sm" ? "text-xs" : "text-sm"), children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("text-muted-foreground font-medium", size === "sm" ? "text-[10px]" : "text-xs"), children: viewDate.getFullYear() })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
@@ -6226,20 +6338,22 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
           type: "button",
           onClick: () => navigateMonth("next"),
           className: cn(
-            "p-2 rounded-xl transition-all duration-200",
+            "rounded-xl transition-all duration-200",
+            size === "sm" ? "p-1.5" : "p-2",
             "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
             "hover:scale-110 active:scale-95 hover:shadow-md",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.ChevronRight, { className: cn(size === "sm" ? "h-3 w-3" : "h-4 w-4") })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2 px-0.5", children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("grid grid-cols-7 gap-1 px-0.5", size === "sm" ? "mb-1" : "mb-2"), children: (locale === "vi" ? ["CN", "T2", "T3", "T4", "T5", "T6", "T7"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((d, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "div",
       {
         className: cn(
-          "text-[10px] text-center py-1.5 font-bold uppercase tracking-wide",
+          "text-center font-bold uppercase tracking-wide",
+          size === "sm" ? "text-[8px] py-1" : "text-[10px] py-1.5",
           idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
         ),
         children: d
@@ -6256,13 +6370,13 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
       open: isOpen,
       onOpenChange: setIsOpen,
       placement: "bottom-start",
-      contentWidth: 280,
+      contentWidth: size === "sm" ? 240 : 280,
       contentClassName: cn(
         "p-0",
         "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
         "rounded-2xl",
         "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
-        "p-5",
+        size === "sm" ? "p-3" : "p-5",
         "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
       ),
       trigger: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
@@ -6270,7 +6384,8 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         {
           type: "button",
           className: cn(
-            "group flex w-full items-center justify-between rounded-full border bg-background/80 backdrop-blur-sm px-3 py-2.5 text-sm",
+            "group flex w-full items-center justify-between rounded-full border bg-background/80 backdrop-blur-sm",
+            size === "sm" ? "px-2 py-1.5 text-xs" : "px-3 py-2.5 text-sm",
             "border-border/60 hover:border-primary/40",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
             "hover:bg-accent/10 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
@@ -6279,15 +6394,16 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex items-center", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 "div",
                 {
                   className: cn(
-                    "flex items-center justify-center rounded-lg p-1.5 transition-all duration-300",
+                    "flex items-center justify-center rounded-lg transition-all duration-300",
+                    size === "sm" ? "p-1" : "p-1.5",
                     isOpen ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Calendar, { className: cn("h-4 w-4 transition-transform duration-300", isOpen && "scale-110") })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.Calendar, { className: cn("transition-transform duration-300", size === "sm" ? "h-3 w-3" : "h-4 w-4", isOpen && "scale-110") })
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -6302,7 +6418,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: cn(size === "sm" ? "h-3 w-3" : "h-4 w-4"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
           ]
         }
       ),
@@ -7727,6 +7843,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 +7858,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 +7878,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 +9086,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 +9403,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 +9412,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 +9441,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 +9648,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 +10108,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 +11376,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 +11518,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 +13498,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 +13529,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 +13543,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 +13560,7 @@ function DataTable({
             setCurPageSize(Number(v));
           },
           size: "sm",
-          className: "w-14 h-7"
+          className: "w-20"
         }
       )
     ] })