@underverse-ui/underverse 1.0.81 → 1.0.83

package/dist/index.cjs

@@ -7099,7 +7099,6 @@ var getOptionDisabled = (option) => {
 var findOptionByValue = (options, value) => {
   return options.find((opt) => getOptionValue(opt) === value);
 };
-var REQUIRED_ERROR_MESSAGE = "This field is required";
 var Combobox = ({
   id,
   options,
@@ -7129,6 +7128,7 @@ var Combobox = ({
   helperText,
   useOverlayScrollbar = false
 }) => {
+  const tv = useSmartTranslations("ValidationInput");
   const [open, setOpen] = React24.useState(false);
   const [query, setQuery] = React24.useState("");
   const [activeIndex, setActiveIndex] = React24.useState(null);
@@ -7478,13 +7478,14 @@ var Combobox = ({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: hasValue ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -8196,7 +8197,6 @@ var import_lucide_react15 = require("lucide-react");
 var React28 = __toESM(require("react"), 1);
 var import_react19 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var REQUIRED_ERROR_MESSAGE2 = "This field is required";
 var DatePicker = ({
   id,
   value,
@@ -8216,6 +8216,7 @@ var DatePicker = ({
   maxDate
 }) => {
   const t = useSmartTranslations("DatePicker");
+  const tv = useSmartTranslations("ValidationInput");
   const locale = useSmartLocale();
   const [isOpen, setIsOpen] = React28.useState(false);
   const [viewDate, setViewDate] = React28.useState(value || /* @__PURE__ */ new Date());
@@ -8633,13 +8634,14 @@ var DatePicker = ({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: value ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE2);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -8751,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 = {
@@ -8826,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();
@@ -8836,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;
@@ -8880,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);
@@ -8953,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,
@@ -8970,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,
@@ -8990,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)(
@@ -9092,7 +9305,6 @@ var React30 = __toESM(require("react"), 1);
 var React29 = __toESM(require("react"), 1);
 var import_lucide_react16 = require("lucide-react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var REQUIRED_ERROR_MESSAGE3 = "This field is required";
 var DEFAULT_MONTH_NAMES = [
   "January",
   "February",
@@ -9570,6 +9782,7 @@ function MonthYearPicker({
   className,
   ...rest
 }) {
+  const tv = useSmartTranslations("ValidationInput");
   const now = /* @__PURE__ */ new Date();
   const currentYear = now.getFullYear();
   const resolvedMinYear = minYear ?? minDate?.getFullYear() ?? currentYear - 50;
@@ -9587,6 +9800,7 @@ function MonthYearPicker({
   const [parts, setParts] = React29.useState(initial);
   const [focusedColumn, setFocusedColumn] = React29.useState(null);
   const [localRequiredError, setLocalRequiredError] = React29.useState();
+  const [hasCommittedValue, setHasCommittedValue] = React29.useState(Boolean(parseValue(isControlled ? value : defaultValue)));
   const monthScrollRef = React29.useRef(null);
   const yearScrollRef = React29.useRef(null);
   React29.useEffect(() => {
@@ -9595,7 +9809,12 @@ function MonthYearPicker({
       if (parsed) setParts(parsed);
     }
   }, [value, isControlled]);
-  const hasValue = isControlled ? !!value : !!defaultValue || parts !== initial;
+  React29.useEffect(() => {
+    if (isControlled) {
+      setHasCommittedValue(Boolean(parseValue(value)));
+    }
+  }, [isControlled, value]);
+  const hasValue = hasCommittedValue;
   const effectiveError = error ?? localRequiredError;
   React29.useEffect(() => {
     if (disabled || !required || hasValue) {
@@ -9626,15 +9845,17 @@ function MonthYearPicker({
     (next) => {
       if (!next) {
         setLocalRequiredError(void 0);
+        if (!isControlled) setHasCommittedValue(false);
         onChange?.(void 0);
         return;
       }
       if (!isDateInRange(next.month, next.year)) return;
       const date = new Date(next.year, next.month, 1);
       setLocalRequiredError(void 0);
+      if (!isControlled) setHasCommittedValue(true);
       onChange?.({ ...next, date });
     },
-    [isDateInRange, onChange]
+    [isControlled, isDateInRange, onChange]
   );
   const tryUpdate = React29.useCallback(
     (next) => {
@@ -9882,13 +10103,14 @@ function MonthYearPicker({
         {
           tabIndex: -1,
           "aria-hidden": "true",
-          readOnly: true,
           value: hasValue ? "selected" : "",
+          onChange: () => {
+          },
           required,
           disabled,
           onInvalid: (e) => {
             e.preventDefault();
-            setLocalRequiredError(REQUIRED_ERROR_MESSAGE3);
+            setLocalRequiredError(tv("required"));
           },
           className: "pointer-events-none absolute h-0 w-0 opacity-0"
         }
@@ -9917,13 +10139,14 @@ function MonthYearPicker({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: hasValue ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE3);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -10599,7 +10822,6 @@ function Calendar3({
 var React31 = __toESM(require("react"), 1);
 var import_lucide_react18 = require("lucide-react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var REQUIRED_ERROR_MESSAGE4 = "This field is required";
 var pad = (n) => n.toString().padStart(2, "0");
 var clamp4 = (n, min, max) => Math.min(max, Math.max(min, n));
 var WHEEL_ITEM_HEIGHT2 = {
@@ -11083,6 +11305,7 @@ function TimePicker({
   className,
   ...rest
 }) {
+  const tv = useSmartTranslations("ValidationInput");
   const isControlled = value !== void 0;
   const now = /* @__PURE__ */ new Date();
   const initial = parseTime(isControlled ? value : defaultValue, format, includeSeconds) || (format === "12" ? { h: now.getHours() % 12 || 12, m: now.getMinutes(), s: now.getSeconds(), p: now.getHours() >= 12 ? "PM" : "AM" } : { h: now.getHours(), m: now.getMinutes(), s: now.getSeconds() });
@@ -11663,13 +11886,14 @@ function TimePicker({
         {
           tabIndex: -1,
           "aria-hidden": "true",
-          readOnly: true,
           value: hasCommittedValue ? "selected" : "",
+          onChange: () => {
+          },
           required,
           disabled,
           onInvalid: (e) => {
             e.preventDefault();
-            setLocalRequiredError(REQUIRED_ERROR_MESSAGE4);
+            setLocalRequiredError(tv("required"));
           },
           className: "pointer-events-none absolute h-0 w-0 opacity-0"
         }
@@ -11712,13 +11936,14 @@ function TimePicker({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: hasCommittedValue ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE4);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -11760,7 +11985,6 @@ function TimePicker({
 
 // src/components/DateTimePicker.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var REQUIRED_ERROR_MESSAGE5 = "This field is required";
 var DateTimePicker = ({
   value,
   onChange,
@@ -11779,6 +12003,7 @@ var DateTimePicker = ({
   size = "md"
 }) => {
   const t = useSmartTranslations("DateTimePicker");
+  const tv = useSmartTranslations("ValidationInput");
   const locale = useSmartLocale();
   const [open, setOpen] = React32.useState(false);
   const [localRequiredError, setLocalRequiredError] = React32.useState();
@@ -11930,13 +12155,14 @@ var DateTimePicker = ({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: value ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE5);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -14957,7 +15183,6 @@ var React39 = __toESM(require("react"), 1);
 var import_react20 = require("react");
 var import_lucide_react24 = require("lucide-react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var REQUIRED_ERROR_MESSAGE6 = "This field is required";
 var MultiCombobox = ({
   id,
   options,
@@ -14991,6 +15216,7 @@ var MultiCombobox = ({
   maxTagsVisible = 3,
   useOverlayScrollbar = false
 }) => {
+  const tv = useSmartTranslations("ValidationInput");
   const [query, setQuery] = React39.useState("");
   const [open, setOpen] = React39.useState(false);
   const [activeIndex, setActiveIndex] = React39.useState(null);
@@ -15404,13 +15630,14 @@ var MultiCombobox = ({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: value.length > 0 ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE6);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -16585,7 +16812,6 @@ var defaultLabels = {
   searchPlaceholder: "Search...",
   noResultsText: "No results found"
 };
-var REQUIRED_ERROR_MESSAGE7 = "This field is required";
 function getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline) {
   if (!(viewOnly || inline) || !defaultExpanded) return /* @__PURE__ */ new Set();
   const parentIds = /* @__PURE__ */ new Set();
@@ -16597,6 +16823,7 @@ function getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline)
   return parentIds;
 }
 function CategoryTreeSelect(props) {
+  const tv = useSmartTranslations("ValidationInput");
   const {
     id,
     label,
@@ -16917,13 +17144,14 @@ function CategoryTreeSelect(props) {
         {
           tabIndex: -1,
           "aria-hidden": "true",
-          readOnly: true,
           value: valueArray.length > 0 ? "selected" : "",
+          onChange: () => {
+          },
           required,
           disabled,
           onInvalid: (e) => {
             e.preventDefault();
-            setLocalRequiredError(REQUIRED_ERROR_MESSAGE7);
+            setLocalRequiredError(tv("required"));
           },
           className: "pointer-events-none absolute h-0 w-0 opacity-0"
         }
@@ -16952,13 +17180,14 @@ function CategoryTreeSelect(props) {
         {
           tabIndex: -1,
           "aria-hidden": "true",
-          readOnly: true,
           value: valueArray.length > 0 ? "selected" : "",
+          onChange: () => {
+          },
           required,
           disabled,
           onInvalid: (e) => {
             e.preventDefault();
-            setLocalRequiredError(REQUIRED_ERROR_MESSAGE7);
+            setLocalRequiredError(tv("required"));
           },
           className: "pointer-events-none absolute h-0 w-0 opacity-0"
         }
@@ -17067,13 +17296,14 @@ function CategoryTreeSelect(props) {
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: valueArray.length > 0 ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE7);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }