@underverse-ui/underverse 0.2.42 → 0.2.44

package/dist/index.cjs

@@ -5118,13 +5118,11 @@ var Pagination = ({
   onChange,
   className,
   size = "md",
-  variant = "outline",
   showFirstLast = true,
   showPrevNext = true,
   showPageNumbers = true,
   showInfo = false,
   disabled = false,
-  alignment = "left",
   pageSize,
   pageSizeOptions,
   onPageSizeChange,
@@ -5132,35 +5130,6 @@ var Pagination = ({
   labels
 }) => {
   const t = useTranslations("Pagination");
-  const getTextAlignmentClass = (align) => {
-    switch (align) {
-      case "left":
-        return "text-left";
-      case "center":
-        return "text-center";
-      case "right":
-        return "text-right";
-    }
-  };
-  const textAlignmentClass = getTextAlignmentClass(alignment);
-  const createPageArray = () => {
-    const delta = 2;
-    const range = [];
-    const left = Math.max(2, page - delta);
-    const right = Math.min(totalPages - 1, page + delta);
-    range.push(1);
-    if (left > 2) range.push("...");
-    for (let i = left; i <= right; i++) {
-      range.push(i);
-    }
-    if (right < totalPages - 1) range.push("...");
-    if (totalPages > 1) range.push(totalPages);
-    return range;
-  };
-  const getButtonVariant = (isActive) => {
-    if (isActive) return "primary";
-    return variant === "default" ? "default" : variant;
-  };
   React21.useEffect(() => {
     if (disabled) return;
     const handleKey = (e) => {
@@ -5194,116 +5163,135 @@ var Pagination = ({
     }
   };
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("nav", { className: cn("flex flex-col gap-4", className), "aria-label": labels?.navigationLabel || t("navigationLabel"), children: [
-    showInfo && totalItems && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn("text-sm text-muted-foreground", textAlignmentClass), children: labels?.showingResults ? labels.showingResults({ startItem: startItem || 0, endItem: endItem || 0, totalItems }) : t("showingResults", { startItem: startItem || 0, endItem: endItem || 0, totalItems }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      "div",
-      {
-        className: cn("flex items-center justify-between", {
-          "flex-row-reverse": alignment === "right" || alignment === "center"
-        }),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("flex items-center gap-1"), children: [
-            showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              Button_default,
-              {
-                variant: getButtonVariant(false),
-                size,
-                icon: import_lucide_react13.ChevronsLeft,
-                onClick: () => onChange(1),
-                disabled: disabled || page === 1,
-                className: "hidden sm:flex",
-                title: labels?.firstPage || t("firstPage"),
-                "aria-label": labels?.firstPage || t("firstPage"),
-                "aria-disabled": disabled || page === 1
-              }
-            ),
-            showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              Button_default,
-              {
-                variant: getButtonVariant(false),
-                size,
-                icon: import_lucide_react13.ChevronLeft,
-                onClick: () => onChange(Math.max(1, page - 1)),
-                disabled: disabled || page === 1,
-                title: labels?.previousPage || t("previousPage"),
-                "aria-label": labels?.previousPage || t("previousPage"),
-                "aria-disabled": disabled || page === 1,
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hidden sm:inline", children: labels?.previous || t("previous") })
-              }
-            ),
-            showPageNumbers && createPageArray().map((p, i) => {
-              if (p === "...") {
-                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button_default, { variant: "ghost", size, disabled: true, icon: import_lucide_react13.MoreHorizontal, className: "cursor-default" }, i);
-              }
-              const pageNumber = p;
-              const isActive = page === pageNumber;
-              return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                Button_default,
-                {
-                  variant: getButtonVariant(isActive),
-                  size,
-                  onClick: () => onChange(pageNumber),
-                  disabled,
-                  className: cn("min-w-10", isActive && "font-semibold"),
-                  "aria-label": labels?.pageNumber ? labels.pageNumber(pageNumber) : t("pageNumber", { page: pageNumber }),
-                  "aria-current": isActive ? "page" : void 0,
-                  children: pageNumber
-                },
-                i
-              );
-            }),
-            showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              Button_default,
-              {
-                variant: getButtonVariant(false),
-                size,
-                iconRight: import_lucide_react13.ChevronRight,
-                onClick: () => onChange(Math.min(totalPages, page + 1)),
-                disabled: disabled || page === totalPages,
-                title: labels?.nextPage || t("nextPage"),
-                "aria-label": labels?.nextPage || t("nextPage"),
-                "aria-disabled": disabled || page === totalPages,
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hidden sm:inline", children: labels?.next || t("next") })
-              }
-            ),
-            showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              Button_default,
+  const createCompactPageArray = () => {
+    const pages = [];
+    if (totalPages <= 5) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+    } else {
+      pages.push(1);
+      if (page > 3) pages.push("...");
+      const start = Math.max(2, page - 1);
+      const end = Math.min(totalPages - 1, page + 1);
+      for (let i = start; i <= end; i++) pages.push(i);
+      if (page < totalPages - 2) pages.push("...");
+      pages.push(totalPages);
+    }
+    return pages;
+  };
+  const sizeClasses2 = {
+    sm: { btn: "h-7 w-7", text: "text-xs", page: "h-7 min-w-7 px-1.5" },
+    md: { btn: "h-8 w-8", text: "text-sm", page: "h-8 min-w-8 px-2" },
+    lg: { btn: "h-9 w-9", text: "text-base", page: "h-9 min-w-9 px-2.5" }
+  };
+  const sizeClass = sizeClasses2[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "nav",
+    {
+      className: cn("flex items-center justify-between gap-2", sizeClass.text, "text-muted-foreground", className),
+      "aria-label": labels?.navigationLabel || t("navigationLabel"),
+      children: [
+        showInfo && totalItems && startItem && endItem ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "tabular-nums shrink-0", children: [
+          startItem,
+          "-",
+          endItem,
+          "/",
+          totalItems
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+          showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "button",
+            {
+              onClick: () => onChange(1),
+              disabled: disabled || page === 1,
+              className: cn(
+                sizeClass.btn,
+                "p-0 rounded transition-colors hidden sm:flex items-center justify-center",
+                disabled || page === 1 ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
+              ),
+              title: labels?.firstPage || t("firstPage"),
+              "aria-label": labels?.firstPage || t("firstPage"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronsLeft, { className: "h-4 w-4" })
+            }
+          ),
+          showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "button",
+            {
+              onClick: () => onChange(Math.max(1, page - 1)),
+              disabled: disabled || page === 1,
+              className: cn(
+                sizeClass.btn,
+                "p-0 rounded transition-colors flex items-center justify-center",
+                disabled || page === 1 ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
+              ),
+              title: labels?.previousPage || t("previousPage"),
+              "aria-label": labels?.previousPage || t("previousPage"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronLeft, { className: "h-4 w-4" })
+            }
+          ),
+          showPageNumbers && createCompactPageArray().map(
+            (p, i) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "px-1 text-muted-foreground/60", children: "\u2026" }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              "button",
               {
-                variant: getButtonVariant(false),
-                size,
-                icon: import_lucide_react13.ChevronsRight,
-                onClick: () => onChange(totalPages),
-                disabled: disabled || page === totalPages,
-                className: "hidden sm:flex",
-                title: labels?.lastPage || t("lastPage"),
-                "aria-label": labels?.lastPage || t("lastPage"),
-                "aria-disabled": disabled || page === totalPages
-              }
+                onClick: () => onChange(p),
+                disabled,
+                className: cn(
+                  sizeClass.page,
+                  "rounded font-medium transition-colors",
+                  page === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                  disabled && "opacity-40 cursor-not-allowed"
+                ),
+                "aria-label": labels?.pageNumber ? labels.pageNumber(p) : t("pageNumber", { page: p }),
+                "aria-current": page === p ? "page" : void 0,
+                children: p
+              },
+              p
             )
-          ] }),
-          pageSizeOptions && onPageSizeChange && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("flex items-center gap-2 text-sm"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "text-muted-foreground", children: [
-              labels?.itemsPerPage || t("itemsPerPage"),
-              ":"
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-20", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              Combobox,
-              {
-                options: pageSizeOptionsStrings,
-                value: pageSize?.toString() || "10",
-                onChange: handlePageSizeChange,
-                placeholder: "10",
-                searchPlaceholder: labels?.search || t("search"),
-                emptyText: labels?.noOptions || t("noOptions"),
-                disabled
-              }
-            ) })
-          ] })
-        ]
-      }
-    )
-  ] });
+          ),
+          showPrevNext && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "button",
+            {
+              onClick: () => onChange(Math.min(totalPages, page + 1)),
+              disabled: disabled || page === totalPages,
+              className: cn(
+                sizeClass.btn,
+                "p-0 rounded transition-colors flex items-center justify-center",
+                disabled || page === totalPages ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
+              ),
+              title: labels?.nextPage || t("nextPage"),
+              "aria-label": labels?.nextPage || t("nextPage"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronRight, { className: "h-4 w-4" })
+            }
+          ),
+          showFirstLast && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "button",
+            {
+              onClick: () => onChange(totalPages),
+              disabled: disabled || page === totalPages,
+              className: cn(
+                sizeClass.btn,
+                "p-0 rounded transition-colors hidden sm:flex items-center justify-center",
+                disabled || page === totalPages ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
+              ),
+              title: labels?.lastPage || t("lastPage"),
+              "aria-label": labels?.lastPage || t("lastPage"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronsRight, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        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", {})
+      ]
+    }
+  );
 };
 var SimplePagination = ({
   page,
@@ -5311,103 +5299,128 @@ var SimplePagination = ({
   onChange,
   className,
   size = "md",
-  variant = "outline",
   disabled = false,
   showInfo = false,
   totalItems,
   pageSize = 10
 }) => {
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("flex flex-col gap-2", className), children: [
-    showInfo && totalItems && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "text-sm text-muted-foreground text-center", children: [
-      "Page ",
-      page,
-      " of ",
-      totalPages,
-      " (",
-      totalItems,
-      " total items)"
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button_default, { variant, size, icon: import_lucide_react13.ChevronLeft, onClick: () => onChange(Math.max(1, page - 1)), disabled: disabled || page === 1, children: "Previous" }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Page" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-medium text-foreground", children: page }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "of" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-medium text-foreground", children: totalPages })
+  const sizeClasses2 = {
+    sm: { btn: "h-7 w-7", text: "text-xs" },
+    md: { btn: "h-8 w-8", text: "text-sm" },
+    lg: { btn: "h-9 w-9", text: "text-base" }
+  };
+  const sizeClass = sizeClasses2[size];
+  const startItem = totalItems ? (page - 1) * pageSize + 1 : null;
+  const endItem = totalItems ? Math.min(page * pageSize, totalItems) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("flex items-center justify-between gap-2", sizeClass.text, "text-muted-foreground", className), children: [
+    showInfo && totalItems && startItem && endItem ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "tabular-nums", children: [
+      startItem,
+      "-",
+      endItem,
+      "/",
+      totalItems
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "button",
+        {
+          onClick: () => onChange(Math.max(1, page - 1)),
+          disabled: disabled || page === 1,
+          className: cn(
+            sizeClass.btn,
+            "p-0 rounded transition-colors flex items-center justify-center",
+            disabled || page === 1 ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
+          ),
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "px-2 tabular-nums font-medium text-foreground", children: [
+        page,
+        "/",
+        totalPages
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        Button_default,
+        "button",
         {
-          variant,
-          size,
-          iconRight: import_lucide_react13.ChevronRight,
           onClick: () => onChange(Math.min(totalPages, page + 1)),
           disabled: disabled || page === totalPages,
-          children: "Next"
+          className: cn(
+            sizeClass.btn,
+            "p-0 rounded transition-colors flex items-center justify-center",
+            disabled || page === totalPages ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
+          ),
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronRight, { className: "h-4 w-4" })
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", {})
   ] });
 };
-var CompactPagination = ({
-  page,
-  totalPages,
-  onChange,
-  className,
-  variant = "outline",
-  disabled = false
-}) => {
+var CompactPagination = ({ page, totalPages, onChange, className, disabled = false }) => {
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("nav", { className: cn("flex items-center gap-1", className), "aria-label": "Compact Pagination", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("nav", { className: cn("flex items-center gap-0.5 text-xs text-muted-foreground", className), "aria-label": "Compact Pagination", children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      Button_default,
+      "button",
       {
-        variant,
-        size: "icon",
-        icon: import_lucide_react13.ChevronsLeft,
         onClick: () => onChange(1),
         disabled: disabled || page === 1,
+        className: cn(
+          "h-6 w-6 p-0 rounded transition-colors flex items-center justify-center",
+          disabled || page === 1 ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
+        ),
         title: "First page",
-        "aria-label": "First page"
+        "aria-label": "First page",
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronsLeft, { className: "h-3.5 w-3.5" })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      Button_default,
+      "button",
       {
-        variant,
-        size: "icon",
-        icon: import_lucide_react13.ChevronLeft,
         onClick: () => onChange(Math.max(1, page - 1)),
         disabled: disabled || page === 1,
-        title: "Previous page"
+        className: cn(
+          "h-6 w-6 p-0 rounded transition-colors flex items-center justify-center",
+          disabled || page === 1 ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
+        ),
+        title: "Previous page",
+        "aria-label": "Previous page",
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronLeft, { className: "h-3.5 w-3.5" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "px-2 py-1 text-sm text-muted-foreground min-w-16 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "px-1.5 tabular-nums", children: [
       page,
-      " / ",
+      "/",
       totalPages
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      Button_default,
+      "button",
       {
-        variant,
-        size: "icon",
-        icon: import_lucide_react13.ChevronRight,
         onClick: () => onChange(Math.min(totalPages, page + 1)),
         disabled: disabled || page === totalPages,
-        title: "Next page"
+        className: cn(
+          "h-6 w-6 p-0 rounded transition-colors flex items-center justify-center",
+          disabled || page === totalPages ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
+        ),
+        title: "Next page",
+        "aria-label": "Next page",
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronRight, { className: "h-3.5 w-3.5" })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      Button_default,
+      "button",
       {
-        variant,
-        size: "icon",
-        icon: import_lucide_react13.ChevronsRight,
         onClick: () => onChange(totalPages),
         disabled: disabled || page === totalPages,
-        title: "Last page"
+        className: cn(
+          "h-6 w-6 p-0 rounded transition-colors flex items-center justify-center",
+          disabled || page === totalPages ? "opacity-40 cursor-not-allowed" : "hover:bg-accent hover:text-accent-foreground"
+        ),
+        title: "Last page",
+        "aria-label": "Last page",
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.ChevronsRight, { className: "h-3.5 w-3.5" })
       }
     )
   ] });
@@ -5516,7 +5529,8 @@ var DatePicker = ({
   required,
   todayLabel,
   clearLabel,
-  weekdayLabels
+  weekdayLabels,
+  disablePastDates = false
 }) => {
   const t = useTranslations("DatePicker");
   const locale = useLocale();
@@ -5620,17 +5634,21 @@ var DatePicker = ({
     for (let i = 0; i < firstDayOfMonth; i++) {
       days.push(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-8 h-8" }, `empty-${i}`));
     }
+    const today = /* @__PURE__ */ new Date();
+    today.setHours(0, 0, 0, 0);
     for (let day = 1; day <= daysInMonth; day++) {
       const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), day);
       const isSelected = value && date.getDate() === value.getDate() && date.getMonth() === value.getMonth() && date.getFullYear() === value.getFullYear();
       const isToday2 = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+      const isPastDate = disablePastDates && date < today;
       const totalDaysFromStart = firstDayOfMonth + day - 1;
       const rowIndex = Math.floor(totalDaysFromStart / 7);
       days.push(
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "button",
           {
-            onClick: () => handleDateSelect(date),
+            onClick: () => !isPastDate && handleDateSelect(date),
+            disabled: isPastDate,
             style: {
               animationDelay: isOpen ? `${rowIndex * 50}ms` : "0ms"
             },
@@ -5638,7 +5656,8 @@ var DatePicker = ({
               size === "sm" ? "w-7 h-7 text-[12px]" : "w-8 h-8 text-sm",
               "datepicker-day rounded-md focus:outline-none",
               "transition-colors",
-              isSelected ? "bg-primary! text-primary-foreground font-bold ring-2 ring-primary-foreground/60 shadow-lg scale-105 z-10 hover:bg-primary! focus:bg-primary! focus:text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+              isPastDate && "opacity-40 cursor-not-allowed text-muted-foreground",
+              isSelected ? "bg-primary! text-primary-foreground font-bold ring-2 ring-primary-foreground/60 shadow-lg scale-105 z-10 hover:bg-primary! focus:bg-primary! focus:text-primary-foreground" : !isPastDate && "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
               isToday2 && !isSelected && "bg-accent text-accent-foreground font-semibold"
             ),
             children: day
@@ -5789,7 +5808,7 @@ var DatePicker = ({
     isOpen && dropdownPosition && typeof window !== "undefined" && (0, import_react_dom7.createPortal)(datePickerContent, document.body)
   ] });
 };
-var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className }) => {
+var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className, disablePastDates = false }) => {
   const locale = useLocale();
   const [isOpen, setIsOpen] = React23.useState(false);
   const [dropdownPosition, setDropdownPosition] = React23.useState(null);
@@ -5850,16 +5869,17 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
   const getDaysInMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
   const getFirstDayOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1).getDay();
   const handleSelect = (date) => {
+    const localDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
     if (!tempStart || tempStart && tempEnd) {
-      setTempStart(date);
+      setTempStart(localDate);
       setTempEnd(null);
       setHoveredDate(null);
     } else if (tempStart && !tempEnd) {
-      if (date < tempStart) {
-        setTempStart(date);
+      if (localDate < tempStart) {
+        setTempStart(localDate);
       } else {
-        setTempEnd(date);
-        onChange(tempStart, date);
+        setTempEnd(localDate);
+        onChange(tempStart, localDate);
         setIsOpen(false);
       }
     }
@@ -5868,9 +5888,12 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     const nodes = [];
     const daysInMonth = getDaysInMonth(viewDate);
     const firstDay = getFirstDayOfMonth(viewDate);
+    const today = /* @__PURE__ */ new Date();
+    today.setHours(0, 0, 0, 0);
     for (let i = 0; i < firstDay; i++) nodes.push(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-8 h-8" }, `e-${i}`));
     for (let d = 1; d <= daysInMonth; d++) {
       const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), d);
+      const isPastDate = disablePastDates && date < today;
       const isSelectedStart = isSameDay2(date, tempStart);
       const isSelectedEnd = isSameDay2(date, tempEnd);
       const isHovering = hoveredDate && tempStart && !tempEnd;
@@ -5896,13 +5919,16 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "button",
           {
-            onClick: () => handleSelect(date),
-            onMouseEnter: () => tempStart && !tempEnd && setHoveredDate(date),
+            onClick: () => !isPastDate && handleSelect(date),
+            disabled: isPastDate,
+            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",
+              // Disabled/past date state
+              isPastDate && "opacity-40 cursor-not-allowed text-muted-foreground",
               // Default state
-              !isInRange && !isRangeStart && !isRangeEnd && "hover:bg-accent hover:text-accent-foreground rounded-md",
+              !isPastDate && !isInRange && !isRangeStart && !isRangeEnd && "hover:bg-accent hover:text-accent-foreground rounded-md",
               // Range selection styling - smooth continuous background
               isInRange && "bg-primary/15 text-foreground shadow-sm",
               (isRangeStart || isRangeEnd) && "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm",
@@ -5912,8 +5938,8 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
               isRangeStart && isRangeEnd && "rounded-md",
               // Single day selection
               // Hover effects for range
-              isInRange && "hover:bg-primary/25",
-              "focus:bg-accent focus:text-accent-foreground focus:z-10 focus:shadow-md"
+              isInRange && !isPastDate && "hover:bg-primary/25",
+              !isPastDate && "focus:bg-accent focus:text-accent-foreground focus:z-10 focus:shadow-md"
             ),
             children: d
           },
@@ -8093,9 +8119,23 @@ function OverlayControls({
 var import_react18 = require("react");
 var import_lucide_react19 = require("lucide-react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1ECDn danh m\u1EE5c", disabled }) {
+var defaultLabels = {
+  emptyText: "No categories",
+  selectedText: (count) => `${count} selected`
+};
+function CategoryTreeSelect({
+  categories,
+  value = [],
+  onChange,
+  placeholder = "Select category",
+  disabled,
+  viewOnly = false,
+  defaultExpanded = false,
+  labels
+}) {
   const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
   const [expandedNodes, setExpandedNodes] = (0, import_react18.useState)(/* @__PURE__ */ new Set());
+  const mergedLabels = { ...defaultLabels, ...labels };
   const parentCategories = categories.filter((c) => !c.parent_id);
   const childrenMap = /* @__PURE__ */ new Map();
   categories.forEach((cat) => {
@@ -8106,6 +8146,12 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
       childrenMap.get(cat.parent_id).push(cat);
     }
   });
+  (0, import_react18.useEffect)(() => {
+    if (viewOnly && defaultExpanded) {
+      const allParentIds = categories.filter((c) => childrenMap.has(c.id)).map((c) => c.id);
+      setExpandedNodes(new Set(allParentIds));
+    }
+  }, [viewOnly, defaultExpanded, categories]);
   const toggleExpand = (id) => {
     const newExpanded = new Set(expandedNodes);
     if (newExpanded.has(id)) {
@@ -8116,6 +8162,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
     setExpandedNodes(newExpanded);
   };
   const handleSelect = (categoryId, category) => {
+    if (viewOnly || !onChange) return;
     const newSelected = new Set(value);
     if (newSelected.has(categoryId)) {
       newSelected.delete(categoryId);
@@ -8139,20 +8186,14 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
         "div",
         {
           className: cn(
-            "relative flex items-center gap-2 px-3 py-2 cursor-pointer rounded-md transition-colors",
-            "hover:bg-accent",
-            // Selected state: subtle bg + square left indicator, avoid left rounding
-            isSelected && "bg-primary/10 rounded-r-md"
+            "relative flex items-center gap-2 px-3 py-2 rounded-md transition-colors",
+            !viewOnly && "cursor-pointer hover:bg-accent",
+            // Selected state: subtle bg + square left indicator (only in select mode)
+            !viewOnly && isSelected && "bg-primary/10 rounded-r-md"
           ),
           style: { paddingLeft: `${level * 1.5 + 0.75}rem` },
           children: [
-            isSelected && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              "span",
-              {
-                "aria-hidden": true,
-                className: "absolute left-0 top-0 bottom-0 w-1 bg-primary"
-              }
-            ),
+            !viewOnly && isSelected && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: "absolute left-0 top-0 bottom-0 w-1 bg-primary" }),
             hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "button",
               {
@@ -8165,25 +8206,24 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
                 children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.ChevronRight, { className: "w-4 h-4" })
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "w-5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-              "div",
-              {
-                onClick: () => handleSelect(category.id, category),
-                className: "flex items-center gap-2 flex-1",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                    "div",
-                    {
-                      className: cn(
-                        "w-4 h-4 border-2 rounded flex items-center justify-center transition-colors",
-                        isSelected ? "bg-primary border-primary" : "border-muted-foreground/30"
-                      ),
-                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.Check, { className: "w-3 h-3 text-primary-foreground" })
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
-                ]
-              }
+            viewOnly ? (
+              // View-only mode: just display the name
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-sm", children: category.name })
+            ) : (
+              // Select mode: clickable with checkbox
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "w-4 h-4 border-2 rounded flex items-center justify-center transition-colors",
+                      isSelected ? "bg-primary border-primary" : "border-muted-foreground/30"
+                    ),
+                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.Check, { className: "w-3 h-3 text-primary-foreground" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
+              ] })
             )
           ]
         }
@@ -8191,8 +8231,11 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
       hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: children.map((child) => renderCategory(child, level + 1)) })
     ] }, category.id);
   };
+  if (viewOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("rounded-md border bg-background p-2", disabled && "opacity-50"), children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: mergedLabels.emptyText }) : parentCategories.map((cat) => renderCategory(cat)) });
+  }
   const selectedCount = value.length;
-  const displayText = selectedCount > 0 ? `\u0110\xE3 ch\u1ECDn ${selectedCount} danh m\u1EE5c` : placeholder;
+  const displayText = selectedCount > 0 ? mergedLabels.selectedText(selectedCount) : placeholder;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "button",
@@ -8225,7 +8268,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
             "rounded-md border bg-popover text-popover-foreground shadow-md",
             "backdrop-blur-sm bg-popover/95 border-border/60"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Kh\xF4ng c\xF3 danh m\u1EE5c n\xE0o" }) : parentCategories.map((cat) => renderCategory(cat)) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: mergedLabels.emptyText }) : parentCategories.map((cat) => renderCategory(cat)) })
         }
       )
     ] })
@@ -12386,23 +12429,71 @@ function DataTable({
         ]
       }
     ) }),
-    totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-md", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-      Pagination,
-      {
-        page: curPage,
-        totalPages: Math.ceil(totalItems / curPageSize),
-        onChange: (p) => setCurPage(p),
-        className: "",
-        showInfo: true,
-        totalItems,
-        pageSize: curPageSize,
-        pageSizeOptions,
-        onPageSizeChange: (s) => {
-          setCurPage(1);
-          setCurPageSize(s);
+    totalItems > 0 && Math.ceil(totalItems / curPageSize) > 1 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center justify-between gap-2 px-1 pt-3 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "tabular-nums", children: [
+        (curPage - 1) * curPageSize + 1,
+        "-",
+        Math.min(curPage * curPageSize, totalItems),
+        "/",
+        totalItems
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
+        (() => {
+          const totalPages = Math.ceil(totalItems / curPageSize);
+          const pages = [];
+          if (totalPages <= 5) {
+            for (let i = 1; i <= totalPages; i++) pages.push(i);
+          } else {
+            pages.push(1);
+            if (curPage > 3) pages.push("...");
+            const start = Math.max(2, curPage - 1);
+            const end = Math.min(totalPages - 1, curPage + 1);
+            for (let i = start; i <= end; i++) pages.push(i);
+            if (curPage < totalPages - 2) pages.push("...");
+            pages.push(totalPages);
+          }
+          return pages.map(
+            (p, i) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "px-1 text-muted-foreground/60", children: "\u2026" }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              "button",
+              {
+                onClick: () => setCurPage(p),
+                className: cn(
+                  "h-7 min-w-7 px-1.5 rounded text-xs font-medium transition-colors",
+                  curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"
+                ),
+                children: p
+              },
+              p
+            )
+          );
+        })(),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          Button_default,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 w-7 p-0",
+            onClick: () => setCurPage(Math.min(Math.ceil(totalItems / curPageSize), curPage + 1)),
+            disabled: curPage === Math.ceil(totalItems / curPageSize),
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+          }
+        )
+      ] }),
+      pageSizeOptions && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        Combobox,
+        {
+          options: pageSizeOptions.map(String),
+          value: String(curPageSize),
+          onChange: (v) => {
+            setCurPage(1);
+            setCurPageSize(Number(v));
+          },
+          size: "sm",
+          className: "w-14 h-7"
         }
-      }
-    ) })
+      )
+    ] })
   ] });
 }
 var DataTable_default = DataTable;