@underverse-ui/underverse 0.2.61 → 0.2.62

package/dist/index.cjs

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