@underverse-ui/underverse 1.0.82 → 1.0.83

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.82",
+  "version": "1.0.83",
   "sourceEntry": "src/index.ts",
   "totalExports": 225,
   "exports": [

package/dist/index.cjs

@@ -8753,10 +8753,27 @@ var DatePicker = ({
     effectiveError && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs text-destructive", children: effectiveError })
   ] });
 };
-var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select date range...", className, disablePastDates = false, minDate, maxDate, size = "md" }) => {
+var DateRangePicker = ({
+  id,
+  startDate,
+  endDate,
+  onChange,
+  placeholder = "Select date range...",
+  className,
+  label,
+  labelClassName,
+  required = false,
+  disablePastDates = false,
+  minDate,
+  maxDate,
+  size = "md"
+}) => {
   const locale = useSmartLocale();
   const t = useSmartTranslations("DatePicker");
+  const tv = useSmartTranslations("ValidationInput");
   const [isOpen, setIsOpen] = React28.useState(false);
+  const [viewMode, setViewMode] = React28.useState("calendar");
+  const [localRequiredError, setLocalRequiredError] = React28.useState();
   const wheelContainerRef = React28.useRef(null);
   const wheelDeltaRef = React28.useRef(0);
   const sizeStyles8 = {
@@ -8828,6 +8845,16 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
   React28.useEffect(() => {
     setTempEnd(normalizeToLocal(endDate));
   }, [endDate]);
+  React28.useEffect(() => {
+    if (!isOpen) {
+      setViewMode("calendar");
+    }
+  }, [isOpen]);
+  React28.useEffect(() => {
+    if (!required || startDate && endDate) {
+      setLocalRequiredError(void 0);
+    }
+  }, [endDate, required, startDate]);
   const isSameDay2 = (a, b) => {
     if (!a || !b) return false;
     return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
@@ -8838,6 +8865,9 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
   const navigateMonth = React28.useCallback((direction) => {
     setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + (direction === "next" ? 1 : -1), 1));
   }, []);
+  const navigateYearRange = React28.useCallback((direction) => {
+    setViewDate((prev) => new Date(prev.getFullYear() + (direction === "next" ? 12 : -12), prev.getMonth(), 1));
+  }, []);
   const isElementVerticallyScrollable = (el) => {
     const style = window.getComputedStyle(el);
     const overflowY = style.overflowY;
@@ -8882,11 +8912,33 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         setTempStart(localDate);
       } else {
         setTempEnd(localDate);
+        setLocalRequiredError(void 0);
         onChange(tempStart, localDate);
         setIsOpen(false);
       }
     }
   };
+  const handleSelectToday = () => {
+    const today = /* @__PURE__ */ new Date();
+    today.setHours(0, 0, 0, 0);
+    const localToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+    const isPastDate = disablePastDates && localToday < today;
+    const isOutOfRange = !!minDay && localToday < minDay || !!maxDay && localToday > maxDay;
+    if (isPastDate || isOutOfRange) return;
+    setTempStart(localToday);
+    setTempEnd(localToday);
+    setHoveredDate(null);
+    setLocalRequiredError(void 0);
+    onChange(localToday, localToday);
+    setIsOpen(false);
+  };
+  const handleClear = () => {
+    setTempStart(null);
+    setTempEnd(null);
+    setHoveredDate(null);
+    onChange(void 0, void 0);
+    setIsOpen(false);
+  };
   const renderGrid = () => {
     const nodes = [];
     const daysInMonth = getDaysInMonth(viewDate);
@@ -8955,13 +9007,63 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
     }
     return nodes;
   };
+  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_runtime34.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_runtime34.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 startYear = Math.floor(viewDate.getFullYear() / 12) * 12;
+    const years = Array.from({ length: 12 }, (_, i) => startYear + i);
+    return /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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 todayDate = React28.useMemo(() => {
+    const today = /* @__PURE__ */ new Date();
+    return new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  }, []);
+  const isTodayUnavailable = !!minDay && todayDate < minDay || !!maxDay && todayDate > maxDay;
   const panel = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref: wheelContainerRef, className: "w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("flex items-center justify-between px-1", sizeStyles8[size].headerMargin), children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "button",
         {
           type: "button",
-          onClick: () => navigateMonth("prev"),
+          onClick: () => viewMode === "year" ? navigateYearRange("prev") : navigateMonth("prev"),
           className: cn(
             "rounded-xl transition-all duration-200",
             sizeStyles8[size].navButton,
@@ -8972,15 +9074,39 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
           children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react15.ChevronLeft, { className: sizeStyles8[size].navIcon })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: cn("font-bold text-foreground", size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm"), children: viewDate.toLocaleDateString(locale === "vi" ? "vi-VN" : "en-US", { month: "long" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: cn("text-muted-foreground font-medium", size === "sm" ? "text-[10px]" : size === "lg" ? "text-sm" : "text-xs"), children: viewDate.getFullYear() })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewMode(viewMode === "month" ? "calendar" : "month"),
+            className: cn(
+              "rounded-lg px-2 py-0.5 font-bold transition-colors duration-200",
+              size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+              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_runtime34.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setViewMode(viewMode === "year" ? "calendar" : "year"),
+            className: cn(
+              "rounded-lg px-2 py-0.5 font-medium transition-colors duration-200",
+              size === "sm" ? "text-[10px]" : size === "lg" ? "text-sm" : "text-xs",
+              viewMode === "year" ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+            ),
+            children: viewDate.getFullYear()
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "button",
         {
           type: "button",
-          onClick: () => navigateMonth("next"),
+          onClick: () => viewMode === "year" ? navigateYearRange("next") : navigateMonth("next"),
           className: cn(
             "rounded-xl transition-all duration-200",
             sizeStyles8[size].navButton,
@@ -8992,82 +9118,167 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("grid grid-cols-7 gap-1 px-0.5", size === "sm" ? "mb-1" : size === "lg" ? "mb-3" : "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_runtime34.jsx)(
-      "div",
-      {
-        className: cn(
-          "text-center font-bold uppercase tracking-wide",
-          sizeStyles8[size].weekdayLabel,
-          idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
-        ),
-        children: d
-      },
-      d
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "grid grid-cols-7 gap-0.5 p-1 rounded-xl bg-muted/20", children: renderGrid() })
-  ] });
-  const displayFormat = (date) => formatDateShort(date);
-  const label = tempStart && tempEnd ? `${displayFormat(tempStart)} - ${displayFormat(tempEnd)}` : tempStart ? `${displayFormat(tempStart)} - ...` : placeholder;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    Popover,
-    {
-      open: isOpen,
-      onOpenChange: setIsOpen,
-      placement: "bottom-start",
-      contentWidth: size === "sm" ? 240 : 280,
-      contentClassName: cn(
-        "p-0",
-        "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
-        "rounded-2xl md:rounded-3xl",
-        "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
-        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_runtime34.jsxs)(
+    viewMode === "calendar" && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("grid grid-cols-7 gap-1 px-0.5", size === "sm" ? "mb-1" : size === "lg" ? "mb-3" : "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_runtime34.jsx)(
+        "div",
+        {
+          className: cn(
+            "text-center font-bold uppercase tracking-wide",
+            sizeStyles8[size].weekdayLabel,
+            idx === 0 || idx === 6 ? "text-primary/70" : "text-muted-foreground/60"
+          ),
+          children: d
+        },
+        d
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "grid grid-cols-7 gap-0.5 p-1 rounded-xl bg-muted/20", children: renderGrid() })
+    ] }),
+    viewMode === "month" && renderMonthSelector(),
+    viewMode === "year" && renderYearSelector(),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("flex items-center border-t border-border/50", sizeStyles8[size].footerMargin), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "button",
         {
           type: "button",
+          onClick: handleSelectToday,
+          disabled: isTodayUnavailable,
           className: cn(
-            "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",
-            "transition-all duration-300 ease-out",
-            isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
-            className
+            "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",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-primary/10",
+            sizeStyles8[size].actionButton,
+            isTodayUnavailable && "opacity-50 cursor-not-allowed hover:scale-100 active:scale-100"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("flex items-center", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                "div",
-                {
-                  className: cn(
-                    "flex items-center justify-center transition-colors duration-300",
-                    isOpen ? "text-primary" : "text-muted-foreground group-hover:text-primary"
-                  ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react15.Calendar, { className: cn("transition-transform duration-300", size === "sm" ? "h-3 w-3" : "h-4 w-4", isOpen && "scale-110") })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                "span",
-                {
-                  className: cn(
-                    "truncate font-medium transition-colors duration-200",
-                    !tempStart && !tempEnd && "text-muted-foreground",
-                    (tempStart || tempEnd) && "text-foreground"
-                  ),
-                  children: label
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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_runtime34.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react15.Sparkles, { className: sizeStyles8[size].actionIcon }),
+            t("today")
           ]
         }
       ),
-      children: panel
-    }
-  );
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: cn(
+            "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",
+            "hover:scale-[1.02] active:scale-[0.98] hover:shadow-md hover:shadow-destructive/10",
+            sizeStyles8[size].actionButton
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react15.X, { className: sizeStyles8[size].actionIcon }),
+            t("clear")
+          ]
+        }
+      )
+    ] })
+  ] });
+  const displayFormat = (date) => formatDateShort(date);
+  const displayLabel = tempStart && tempEnd ? `${displayFormat(tempStart)} - ${displayFormat(tempEnd)}` : tempStart ? `${displayFormat(tempStart)} - ...` : placeholder;
+  const effectiveError = localRequiredError;
+  const autoId = (0, import_react19.useId)();
+  const resolvedId = id ? String(id) : `daterangepicker-${autoId}`;
+  const labelId = label ? `${resolvedId}-label` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("space-y-1.5", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      "label",
+      {
+        id: labelId,
+        htmlFor: resolvedId,
+        className: cn(size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm", "font-medium text-foreground", effectiveError && "text-destructive", labelClassName),
+        children: [
+          label,
+          required && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        value: startDate && endDate ? "selected" : "",
+        onChange: () => {
+        },
+        required,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(tv("required"));
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      Popover,
+      {
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: "bottom-start",
+        contentWidth: sizeStyles8[size].contentWidth,
+        contentClassName: cn(
+          "p-0",
+          "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
+          "rounded-2xl md:rounded-3xl",
+          "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
+          sizeStyles8[size].contentPadding,
+          "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
+        ),
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          "button",
+          {
+            id: resolvedId,
+            type: "button",
+            "aria-labelledby": labelId,
+            "aria-required": required,
+            "aria-invalid": !!effectiveError,
+            className: cn(
+              "group flex w-full items-center justify-between rounded-full border bg-background/80 backdrop-blur-sm",
+              sizeStyles8[size].trigger,
+              "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",
+              "transition-all duration-300 ease-out",
+              isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
+              effectiveError && "border-destructive/60 focus-visible:ring-destructive/50 bg-destructive/5"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("flex items-center", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center justify-center transition-colors duration-300",
+                      effectiveError ? "text-destructive" : isOpen ? "text-primary" : "text-muted-foreground group-hover:text-primary"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react15.Calendar, { className: cn("transition-transform duration-300", sizeStyles8[size].calendarIcon, isOpen && "scale-110") })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "truncate font-medium transition-colors duration-200",
+                      !tempStart && !tempEnd && "text-muted-foreground",
+                      (tempStart || tempEnd) && "text-foreground"
+                    ),
+                    children: displayLabel
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsx)("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+            ]
+          }
+        ),
+        children: panel
+      }
+    ),
+    effectiveError && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs text-destructive", children: effectiveError })
+  ] });
 };
 var CompactDatePicker = ({ value, onChange, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(