@underverse-ui/underverse 0.2.60 → 0.2.62

package/dist/index.js

@@ -267,7 +267,7 @@ var Badge = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs2("span", { className: cn(baseClasses, "rounded-lg gap-1", sizeStyles[size], className), onClick: handleClick, role: "status", children: [
+  return /* @__PURE__ */ jsxs2("span", { className: cn(baseClasses, "rounded-full gap-1", sizeStyles[size], className), onClick: handleClick, role: "status", children: [
     Icon && /* @__PURE__ */ jsx2(
       Icon,
       {
@@ -1957,7 +1957,7 @@ function SmartImage({
   alt,
   className,
   ratioClass,
-  roundedClass = "rounded-xl",
+  roundedClass = "rounded-2xl md:rounded-3xl",
   fill = true,
   width,
   height,
@@ -2147,10 +2147,10 @@ var Avatar_default = Avatar;
 import { jsx as jsx13, jsxs as jsxs10 } from "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",
@@ -2199,9 +2199,9 @@ var SkeletonText = ({ lines = 3, className, width = "100%" }) => {
 };
 var SkeletonCard = ({ showAvatar = true, showImage = false, textLines = 3, className, children }) => {
   if (children) {
-    return /* @__PURE__ */ jsx13("div", { className: cn("p-4 space-y-4 rounded-lg bg-card outline-none focus:outline-none", className), children });
+    return /* @__PURE__ */ jsx13("div", { className: cn("p-4 space-y-4 rounded-2xl md:rounded-3xl bg-card outline-none focus:outline-none", className), children });
   }
-  return /* @__PURE__ */ jsxs10("div", { className: cn("p-4 space-y-4 rounded-2xl bg-card outline-none focus:outline-none", className), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn("p-4 space-y-4 rounded-2xl md:rounded-3xl bg-card outline-none focus:outline-none", className), children: [
     showAvatar && /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-3", children: [
       /* @__PURE__ */ jsx13(SkeletonAvatar, {}),
       /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
@@ -2209,7 +2209,7 @@ var SkeletonCard = ({ showAvatar = true, showImage = false, textLines = 3, class
         /* @__PURE__ */ jsx13(Skeleton, { className: "h-3 w-16" })
       ] })
     ] }),
-    showImage && /* @__PURE__ */ jsx13(Skeleton, { className: "h-48 w-full rounded-xl" }),
+    showImage && /* @__PURE__ */ jsx13(Skeleton, { className: "h-48 w-full rounded-2xl md:rounded-3xl" }),
     /* @__PURE__ */ jsx13(SkeletonText, { lines: textLines }),
     /* @__PURE__ */ jsxs10("div", { className: "flex space-x-2", children: [
       /* @__PURE__ */ jsx13(SkeletonButton, { size: "sm" }),
@@ -2218,7 +2218,7 @@ var SkeletonCard = ({ showAvatar = true, showImage = false, textLines = 3, class
   ] });
 };
 var SkeletonPost = ({ className }) => {
-  return /* @__PURE__ */ jsxs10("div", { className: cn("p-6 space-y-4 rounded-3xl bg-card outline-none focus:outline-none", className), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn("p-6 space-y-4 rounded-2xl md:rounded-3xl bg-card outline-none focus:outline-none", className), children: [
     /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-3", children: [
       /* @__PURE__ */ jsx13(SkeletonAvatar, { size: "lg" }),
       /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
@@ -2250,7 +2250,7 @@ var SkeletonMessage = ({ own = false, showAvatar = true, className }) => {
   ] });
 };
 var SkeletonList = ({ items = 5, itemHeight = 60, showAvatar = true, className }) => {
-  return /* @__PURE__ */ jsx13("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-3 p-3 rounded-xl", children: [
+  return /* @__PURE__ */ jsx13("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-3 p-3 rounded-2xl md:rounded-3xl", children: [
     showAvatar && /* @__PURE__ */ jsx13(SkeletonAvatar, {}),
     /* @__PURE__ */ jsxs10("div", { className: "flex-1 space-y-2", children: [
       /* @__PURE__ */ jsx13(Skeleton, { className: "h-4 w-3/4" }),
@@ -4338,7 +4338,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: {
@@ -4348,33 +4348,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"
   }
 };
@@ -4494,7 +4494,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"
         ),
@@ -4835,6 +4836,7 @@ var Combobox = ({
     const itemDescription = getOptionDescription(item);
     const itemDisabled = getOptionDisabled(item);
     const isSelected = itemValue === value;
+    const isEven = index % 2 === 0;
     return /* @__PURE__ */ jsxs22(
       "li",
       {
@@ -4851,11 +4853,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"
@@ -4933,11 +4936,17 @@ var Combobox = ({
       /* @__PURE__ */ jsx25("div", { className: "relative", children: /* @__PURE__ */ jsx25("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
       /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: loadingText })
     ] }) }) : filteredOptions.length > 0 ? groupedOptions ? (
-      // Render grouped options
-      Object.entries(groupedOptions).map(([group, items], groupIndex) => /* @__PURE__ */ jsxs22("div", { className: cn(groupIndex > 0 && "mt-2 pt-2 border-t border-border/30"), children: [
-        /* @__PURE__ */ jsx25("div", { className: "px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: group }),
-        /* @__PURE__ */ jsx25("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__ */ jsxs22("div", { className: cn(globalIndex > 0 && "mt-2 pt-2 border-t border-border/30"), children: [
+          /* @__PURE__ */ jsx25("div", { className: "px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: group }),
+          /* @__PURE__ */ jsx25("ul", { className: "space-y-0.5", children: items.map((item) => {
+            const index = globalIndex++;
+            return renderOptionItem(item, index);
+          }) })
+        ] }, group));
+      })()
     ) : (
       // Render flat options
       /* @__PURE__ */ jsx25("ul", { className: "space-y-0.5", children: filteredOptions.map((item, index) => renderOptionItem(item, index)) })
@@ -5264,17 +5273,23 @@ var Pagination = ({
             }
           )
         ] }),
-        pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsx26(
-          Combobox,
-          {
-            options: pageSizeOptionsStrings,
-            value: pageSize?.toString() || "10",
-            onChange: handlePageSizeChange,
-            size: "sm",
-            className: "w-14",
-            disabled
-          }
-        ) : /* @__PURE__ */ jsx26("div", {})
+        pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs23("span", { className: "text-xs text-muted-foreground/70 hidden sm:inline", children: [
+            t("itemsPerPage"),
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx26(
+            Combobox,
+            {
+              options: pageSizeOptionsStrings,
+              value: pageSize?.toString() || "10",
+              onChange: handlePageSizeChange,
+              size: "sm",
+              className: "w-20 sm:w-24",
+              disabled
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx26("div", {})
       ]
     }
   );
@@ -5500,7 +5515,12 @@ var ScrollArea = forwardRef7(
       "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__ */ jsx28("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport", contentClassName), children })
       }
@@ -5527,7 +5547,7 @@ function formatDateShort(date) {
 }
 
 // ../../components/ui/DatePicker.tsx
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 var DatePicker = ({
   id,
   value,
@@ -5547,6 +5567,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);
@@ -5558,6 +5579,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)) {
@@ -5666,13 +5692,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__ */ jsx29("div", { className: "grid grid-cols-3 gap-2 p-2", children: months.map((month, idx) => {
+      const isSelected = viewDate.getMonth() === idx;
+      return /* @__PURE__ */ jsx29(
+        "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__ */ jsx29("div", { className: "grid grid-cols-3 gap-2 p-2", children: years.map((year) => {
+      const isSelected = viewDate.getFullYear() === year;
+      return /* @__PURE__ */ jsx29(
+        "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__ */ jsxs24("div", { ref: wheelContainerRef, "data-datepicker": true, className: "w-full", children: [
     /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-4 px-1", children: [
       /* @__PURE__ */ jsx29(
         "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",
@@ -5682,15 +5759,37 @@ var DatePicker = ({
           children: /* @__PURE__ */ jsx29(ChevronLeft2, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ jsx29("span", { className: "text-sm font-bold text-foreground", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" }) }),
-        /* @__PURE__ */ jsx29("span", { className: "text-xs text-muted-foreground font-medium", children: viewDate.getFullYear() })
+      /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx29(
+          "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__ */ jsx29(
+          "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__ */ jsx29(
         "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",
@@ -5701,22 +5800,26 @@ var DatePicker = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx29("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__ */ jsx29(
-        "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__ */ jsx29("div", { className: "grid grid-cols-7 gap-1 p-1 rounded-xl bg-muted/20", children: renderCalendar() }),
-    /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 mt-4 pt-3 border-t border-border/50", children: [
+    viewMode === "calendar" && /* @__PURE__ */ jsxs24(Fragment6, { children: [
+      /* @__PURE__ */ jsx29("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__ */ jsx29(
+          "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__ */ jsx29("div", { className: "grid grid-cols-7 gap-1 p-1 rounded-xl bg-muted/20", children: renderCalendar() })
+    ] }),
+    viewMode === "month" && renderMonthSelector(),
+    viewMode === "year" && renderYearSelector(),
+    /* @__PURE__ */ jsxs24("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__ */ jsxs24(
         "button",
         {
@@ -5726,14 +5829,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__ */ jsx29(Sparkles2, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx29(Sparkles2, { className: size === "sm" ? "w-2.5 h-2.5" : "w-3.5 h-3.5" }),
             todayLabel || t("today")
           ]
         }
@@ -5748,14 +5852,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__ */ jsx29(XIcon, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx29(XIcon, { className: size === "sm" ? "w-2.5 h-2.5" : "w-3.5 h-3.5" }),
             clearLabel || t("clear")
           ]
         }
@@ -5888,20 +5993,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;
@@ -6002,7 +6112,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
@@ -6028,24 +6139,25 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     return nodes;
   };
   const panel = /* @__PURE__ */ jsxs24("div", { ref: wheelContainerRef, className: "w-full", children: [
-    /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-4 px-1", children: [
+    /* @__PURE__ */ jsxs24("div", { className: cn("flex items-center justify-between px-1", size === "sm" ? "mb-2" : "mb-4"), children: [
       /* @__PURE__ */ jsx29(
         "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__ */ jsx29(ChevronLeft2, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx29(ChevronLeft2, { className: cn(size === "sm" ? "h-3 w-3" : "h-4 w-4") })
         }
       ),
       /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ jsx29("span", { className: "text-sm font-bold text-foreground", children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" }) }),
-        /* @__PURE__ */ jsx29("span", { className: "text-xs text-muted-foreground font-medium", children: viewDate.getFullYear() })
+        /* @__PURE__ */ jsx29("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__ */ jsx29("span", { className: cn("text-muted-foreground font-medium", size === "sm" ? "text-[10px]" : "text-xs"), children: viewDate.getFullYear() })
       ] }),
       /* @__PURE__ */ jsx29(
         "button",
@@ -6053,20 +6165,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__ */ jsx29(ChevronRight3, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx29(ChevronRight3, { className: cn(size === "sm" ? "h-3 w-3" : "h-4 w-4") })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx29("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__ */ jsx29(
+    /* @__PURE__ */ jsx29("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__ */ jsx29(
       "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
@@ -6083,13 +6197,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__ */ jsxs24(
@@ -6097,7 +6211,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",
@@ -6106,15 +6221,16 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
             className
           ),
           children: [
-            /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ jsxs24("div", { className: cn("flex items-center", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
               /* @__PURE__ */ jsx29(
                 "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__ */ jsx29(Calendar, { className: cn("h-4 w-4 transition-transform duration-300", isOpen && "scale-110") })
+                  children: /* @__PURE__ */ jsx29(Calendar, { className: cn("transition-transform duration-300", size === "sm" ? "h-3 w-3" : "h-4 w-4", isOpen && "scale-110") })
                 }
               ),
               /* @__PURE__ */ jsx29(
@@ -6129,7 +6245,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx29("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx29("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx29("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+            /* @__PURE__ */ jsx29("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx29("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__ */ jsx29("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
           ]
         }
       ),
@@ -6145,7 +6261,7 @@ import { Calendar as CalendarIcon2, X as X10 } from "lucide-react";
 // ../../components/ui/Calendar.tsx
 import * as React24 from "react";
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 function startOfMonth(d) {
   return new Date(d.getFullYear(), d.getMonth(), 1);
 }
@@ -6410,7 +6526,7 @@ function Calendar2({
         }
       )
     ] }),
-    display === "week" ? /* @__PURE__ */ jsxs25(Fragment7, { children: [
+    display === "week" ? /* @__PURE__ */ jsxs25(Fragment8, { children: [
       showWeekdays && /* @__PURE__ */ jsx30("div", { className: cn("grid grid-cols-7", sz.grid, "mb-1 text-center text-muted-foreground font-medium"), children: weekdays.map((w) => /* @__PURE__ */ jsx30("div", { className: cn(sz.head), children: w }, `w-${w}`)) }),
       /* @__PURE__ */ jsx30("div", { className: cn("grid grid-cols-7", sz.grid), children: weekDays.map((d, idx) => {
         const inMonth = true;
@@ -6448,7 +6564,7 @@ function Calendar2({
 // ../../components/ui/TimePicker.tsx
 import * as React25 from "react";
 import { Clock as Clock2, X as X9, Check as Check4, Sun, Moon, Sunset, Coffee } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var pad = (n) => n.toString().padStart(2, "0");
 var WHEEL_ITEM_HEIGHT = {
   sm: 30,
@@ -7024,7 +7140,7 @@ function TimePicker({
           }
         );
       })(),
-      includeSeconds && /* @__PURE__ */ jsxs26(Fragment8, { children: [
+      includeSeconds && /* @__PURE__ */ jsxs26(Fragment9, { children: [
         /* @__PURE__ */ jsx31("div", { className: "flex flex-col items-center justify-center pt-8", children: /* @__PURE__ */ jsxs26("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ jsx31("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" }),
           /* @__PURE__ */ jsx31("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" })
@@ -7421,7 +7537,7 @@ var DateTimePicker = ({
 import * as React27 from "react";
 import { useId as useId5 } from "react";
 import { ChevronDown as ChevronDown2, Search as Search4, Check as Check5, SearchX as SearchX2, Loader2 as Loader24, X as X11, Sparkles as Sparkles3 } from "lucide-react";
-import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var MultiCombobox = ({
   id,
   options,
@@ -7554,6 +7670,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__ */ jsx33(
         "li",
@@ -7568,7 +7685,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
@@ -7588,11 +7705,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: [
@@ -7729,7 +7847,7 @@ var MultiCombobox = ({
         !!error && "border-destructive focus-visible:ring-destructive/30"
       ),
       children: [
-        /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1.5 flex-wrap min-h-6 flex-1", children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs28(Fragment10, { children: [
+        /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1.5 flex-wrap min-h-6 flex-1", children: value.length > 0 ? showTags ? /* @__PURE__ */ jsxs28(Fragment11, { children: [
           visibleTags.map((option) => {
             if (renderTag) {
               return /* @__PURE__ */ jsx33(React27.Fragment, { children: renderTag(option, () => handleRemove(option.value)) }, option.value);
@@ -8279,7 +8397,7 @@ Slider.displayName = "Slider";
 // ../../components/ui/OverlayControls.tsx
 import { Dot, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
 import React30 from "react";
-import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 function OverlayControls({
   mode,
   value,
@@ -8502,7 +8620,7 @@ function OverlayControls({
   const handleSliderMouseLeave = () => {
     setPreviewData(null);
   };
-  return /* @__PURE__ */ jsxs31(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs31(Fragment12, { children: [
     keyboardFeedback && /* @__PURE__ */ jsx36(
       "div",
       {
@@ -8712,7 +8830,7 @@ function OverlayControls({
 // ../../components/ui/CategoryTreeSelect.tsx
 import { useState as useState26, useEffect as useEffect16 } from "react";
 import { ChevronRight as ChevronRight5, ChevronDown as ChevronDown3, Check as Check6, FolderTree, Layers } from "lucide-react";
-import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 var defaultLabels = {
   emptyText: "No categories",
   selectedText: (count) => `${count} selected`
@@ -8795,26 +8913,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__ */ jsxs32("div", { className: "animate-in fade-in-50 duration-200", style: { animationDelay: `${level * 30}ms` }, children: [
       /* @__PURE__ */ jsxs32(
         "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__ */ jsx37(
-              "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__ */ jsx37(
               "button",
               {
@@ -8954,7 +9069,7 @@ function CategoryTreeSelect(props) {
         ]
       }
     ),
-    isOpen && !disabled && /* @__PURE__ */ jsxs32(Fragment12, { children: [
+    isOpen && !disabled && /* @__PURE__ */ jsxs32(Fragment13, { children: [
       /* @__PURE__ */ jsx37("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
       /* @__PURE__ */ jsx37(
         "div",
@@ -9115,7 +9230,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"
@@ -9124,7 +9239,7 @@ function ImageUpload({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          uploading && /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-xl", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3", children: [
+          uploading && /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-2xl md:rounded-3xl", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ jsx38(Loader25, { className: "w-6 h-6 animate-spin text-primary" }),
             /* @__PURE__ */ jsx38("span", { className: "text-sm font-medium", children: "Uploading..." })
           ] }) }),
@@ -9153,7 +9268,7 @@ function ImageUpload({
     ),
     showPreview && uploadedImages.length > 0 && /* @__PURE__ */ jsxs33("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx38("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
-      /* @__PURE__ */ jsx38("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ jsxs33("div", { className: "relative group bg-card border border-border rounded-xl p-3", children: [
+      /* @__PURE__ */ jsx38("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ jsxs33("div", { className: "relative group bg-card border border-border rounded-2xl md:rounded-3xl p-3", children: [
         /* @__PURE__ */ jsx38(
           Button_default,
           {
@@ -9198,7 +9313,7 @@ function ImageUpload({
 // ../../components/ui/Carousel.tsx
 import * as React32 from "react";
 import { ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight6 } from "lucide-react";
-import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
 function Carousel({
   children,
   autoScroll = true,
@@ -9360,7 +9475,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",
@@ -9407,7 +9525,7 @@ function Carousel({
             ))
           }
         ),
-        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ jsxs34(Fragment13, { children: [
+        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ jsxs34(Fragment14, { children: [
           /* @__PURE__ */ jsx39(
             Button_default,
             {
@@ -9769,7 +9887,7 @@ function FallingIcons({
 // ../../components/ui/List.tsx
 import * as React34 from "react";
 import { ChevronRight as ChevronRight7 } from "lucide-react";
-import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 var SIZE_STYLES2 = {
   xs: { label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
   sm: { label: "text-[13px]", desc: "text-[12px]", icon: "h-4 w-4", avatar: "h-8 w-8" },
@@ -9817,12 +9935,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__ */ jsx41(
@@ -9921,7 +10039,7 @@ var ListItem = React34.forwardRef(
         }
       }
     } : {};
-    const inner = /* @__PURE__ */ jsxs36(Fragment14, { children: [
+    const inner = /* @__PURE__ */ jsxs36(Fragment15, { children: [
       /* @__PURE__ */ jsxs36("div", { className: cn("flex items-center gap-3", contentClassName, "group/item relative"), ...headerProps, children: [
         avatar && /* @__PURE__ */ jsx41("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx41("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
         Left && !avatar && /* @__PURE__ */ jsx41("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx41(Left, { className: cn(sz.icon) }) }),
@@ -9966,7 +10084,7 @@ var List_default = List;
 // ../../components/ui/Watermark.tsx
 import * as React35 from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
 var PRESETS2 = {
   confidential: { text: "CONFIDENTIAL", color: "rgba(220, 38, 38, 0.15)", rotate: -22, fontSize: 16, fontWeight: "bold" },
   draft: { text: "DRAFT", color: "rgba(59, 130, 246, 0.15)", rotate: -22, fontSize: 18, fontWeight: "bold" },
@@ -10245,7 +10363,7 @@ var Watermark = ({
     }
   );
   if (fullPage) {
-    return /* @__PURE__ */ jsxs37(Fragment15, { children: [
+    return /* @__PURE__ */ jsxs37(Fragment16, { children: [
       children,
       typeof window !== "undefined" ? createPortal5(overlay, document.body) : null
     ] });
@@ -11057,7 +11175,7 @@ function ColorPicker({
 
 // ../../components/ui/Grid.tsx
 import React38, { useId as useId7 } from "react";
-import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
   md: 768,
@@ -11085,14 +11203,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] || "";
 }
@@ -11214,7 +11332,7 @@ var GridItem = React38.forwardRef(
       st.opacity = 0;
       st.animation = `uvGridItemFadeIn 0.5s ease-out forwards`;
     }
-    return /* @__PURE__ */ jsxs40(Fragment16, { children: [
+    return /* @__PURE__ */ jsxs40(Fragment17, { children: [
       animationDelay != null && /* @__PURE__ */ jsx45(
         "style",
         {
@@ -11227,7 +11345,11 @@ var GridItem = React38.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
         }
@@ -11245,7 +11367,7 @@ import { useMemo as useMemo7, useState as useState34, useRef as useRef14 } from
 // ../../components/ui/ChartTooltip.tsx
 import { useEffect as useEffect20, useState as useState33 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
-import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
 function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, secondaryValue, items, containerRef }) {
   const [isMounted, setIsMounted] = useState33(false);
   const [position, setPosition] = useState33(null);
@@ -11292,7 +11414,7 @@ function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, seco
                   ":"
                 ] }),
                 /* @__PURE__ */ jsx46("span", { className: "font-semibold ml-auto", children: item.value })
-              ] }, i)) }) : /* @__PURE__ */ jsxs41(Fragment17, { children: [
+              ] }, i)) }) : /* @__PURE__ */ jsxs41(Fragment18, { children: [
                 /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
                   color && /* @__PURE__ */ jsx46("div", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: color } }),
                   /* @__PURE__ */ jsx46("span", { className: "font-semibold", children: value })
@@ -11319,7 +11441,7 @@ function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, seco
 }
 
 // ../../components/ui/LineChart.tsx
-import { Fragment as Fragment18, jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 function LineChart({
   data,
   width = 400,
@@ -11384,7 +11506,7 @@ function LineChart({
     }
     return lines;
   }, [minValue, maxValue, chartHeight, padding.top]);
-  return /* @__PURE__ */ jsxs42(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs42(Fragment19, { children: [
     /* @__PURE__ */ jsxs42("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
       showGrid && /* @__PURE__ */ jsx47("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsxs42("g", { children: [
         /* @__PURE__ */ jsx47("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
@@ -11493,7 +11615,7 @@ function LineChart({
 
 // ../../components/ui/BarChart.tsx
 import { useMemo as useMemo8, useState as useState35, useRef as useRef15 } from "react";
-import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 function BarChart({
   data,
   width = 400,
@@ -11562,12 +11684,12 @@ function BarChart({
     }
     return { maxValue: max, bars: barsData, gridLines: lines };
   }, [data, chartWidth, chartHeight, horizontal, barGap, padding, width, height]);
-  return /* @__PURE__ */ jsxs43(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs43(Fragment20, { children: [
     /* @__PURE__ */ jsxs43("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
-      showGrid && /* @__PURE__ */ jsx48("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsx48("g", { children: horizontal ? /* @__PURE__ */ jsxs43(Fragment19, { children: [
+      showGrid && /* @__PURE__ */ jsx48("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsx48("g", { children: horizontal ? /* @__PURE__ */ jsxs43(Fragment20, { children: [
         /* @__PURE__ */ jsx48("line", { x1: line.x, y1: line.y1, x2: line.x, y2: line.y2, stroke: "currentColor", strokeDasharray: "4 4" }),
         /* @__PURE__ */ jsx48("text", { x: line.x, y: height - 8, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
-      ] }) : /* @__PURE__ */ jsxs43(Fragment19, { children: [
+      ] }) : /* @__PURE__ */ jsxs43(Fragment20, { children: [
         /* @__PURE__ */ jsx48("line", { x1: line.x1, y1: line.y, x2: line.x2, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
         /* @__PURE__ */ jsx48("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
       ] }) }, i)) }),
@@ -12605,16 +12727,16 @@ function GaugeChart({
 
 // ../../components/ui/ClientOnly.tsx
 import { useEffect as useEffect21, useState as useState39 } from "react";
-import { Fragment as Fragment20, jsx as jsx54 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx54 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
   const [hasMounted, setHasMounted] = useState39(false);
   useEffect21(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
-    return /* @__PURE__ */ jsx54(Fragment20, { children: fallback });
+    return /* @__PURE__ */ jsx54(Fragment21, { children: fallback });
   }
-  return /* @__PURE__ */ jsx54(Fragment20, { children });
+  return /* @__PURE__ */ jsx54(Fragment21, { children });
 }
 
 // ../../components/ui/Loading.tsx
@@ -12760,7 +12882,7 @@ TableCaption.displayName = "TableCaption";
 // ../../components/ui/DataTable.tsx
 import { Filter as FilterIcon } from "lucide-react";
 import React48 from "react";
-import { Fragment as Fragment21, jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
 function useDebounced(value, delay = 300) {
   const [debounced, setDebounced] = React48.useState(value);
   React48.useEffect(() => {
@@ -13018,10 +13140,10 @@ function DataTable({
               isCenterAlign && "justify-center",
               !isRightAlign && !isCenterAlign && "justify-between"
             ),
-            children: isRightAlign ? /* @__PURE__ */ jsxs51(Fragment21, { children: [
+            children: isRightAlign ? /* @__PURE__ */ jsxs51(Fragment22, { children: [
               filterContent,
               titleContent
-            ] }) : /* @__PURE__ */ jsxs51(Fragment21, { children: [
+            ] }) : /* @__PURE__ */ jsxs51(Fragment22, { children: [
               titleContent,
               filterContent
             ] })
@@ -13203,7 +13325,17 @@ function DataTable({
         totalItems
       ] }),
       /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ jsx57(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__ */ jsx57("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx57("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
+        /* @__PURE__ */ jsx57(
+          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__ */ jsx57("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx57("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+          }
+        ),
         (() => {
           const totalPages = Math.ceil(totalItems / curPageSize);
           const pages = [];
@@ -13224,7 +13356,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
@@ -13238,7 +13370,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__ */ jsx57("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx57("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
@@ -13255,7 +13387,7 @@ function DataTable({
             setCurPageSize(Number(v));
           },
           size: "sm",
-          className: "w-14 h-7"
+          className: "w-20"
         }
       )
     ] })
@@ -13578,7 +13710,7 @@ function AccessDenied({
 import { Moon as Moon2, Sun as Sun2, Monitor } from "lucide-react";
 import { useEffect as useEffect23, useRef as useRef19, useState as useState40 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
-import { Fragment as Fragment22, jsx as jsx62, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx62, jsxs as jsxs56 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -13629,7 +13761,7 @@ function ThemeToggleHeadless({
         children: /* @__PURE__ */ jsx62(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs56(Fragment22, { children: [
+    isOpen && /* @__PURE__ */ jsxs56(Fragment23, { children: [
       typeof window !== "undefined" && createPortal7(/* @__PURE__ */ jsx62("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal7(
         /* @__PURE__ */ jsx62(
@@ -13681,7 +13813,7 @@ function ThemeToggleHeadless({
 import { useRef as useRef20, useState as useState41 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment23, jsx as jsx63, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx63, jsxs as jsxs57 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -13726,7 +13858,7 @@ function LanguageSwitcherHeadless({
         children: /* @__PURE__ */ jsx63(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs57(Fragment23, { children: [
+    isOpen && /* @__PURE__ */ jsxs57(Fragment24, { children: [
       typeof window !== "undefined" && createPortal8(/* @__PURE__ */ jsx63("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal8(
         /* @__PURE__ */ jsx63(