@underverse-ui/underverse 1.0.81 → 1.0.83

package/dist/index.js

@@ -6914,7 +6914,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,
@@ -6944,6 +6943,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);
@@ -7293,13 +7293,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"
       }
@@ -8011,7 +8012,6 @@ import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, S
 import * as React28 from "react";
 import { useId as useId6 } from "react";
 import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
-var REQUIRED_ERROR_MESSAGE2 = "This field is required";
 var DatePicker = ({
   id,
   value,
@@ -8031,6 +8031,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());
@@ -8448,13 +8449,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"
       }
@@ -8566,10 +8568,27 @@ var DatePicker = ({
     effectiveError && /* @__PURE__ */ jsx34("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 = {
@@ -8641,6 +8660,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();
@@ -8651,6 +8680,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;
@@ -8695,11 +8727,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);
@@ -8768,13 +8822,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__ */ jsx34("div", { className: "grid grid-cols-3 gap-2 p-2", children: months.map((month, idx) => {
+      const isSelected = viewDate.getMonth() === idx;
+      return /* @__PURE__ */ jsx34(
+        "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__ */ jsx34("div", { className: "grid grid-cols-3 gap-2 p-2", children: years.map((year) => {
+      const isSelected = viewDate.getFullYear() === year;
+      return /* @__PURE__ */ jsx34(
+        "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__ */ jsxs24("div", { ref: wheelContainerRef, className: "w-full", children: [
     /* @__PURE__ */ jsxs24("div", { className: cn("flex items-center justify-between px-1", sizeStyles8[size].headerMargin), children: [
       /* @__PURE__ */ jsx34(
         "button",
         {
           type: "button",
-          onClick: () => navigateMonth("prev"),
+          onClick: () => viewMode === "year" ? navigateYearRange("prev") : navigateMonth("prev"),
           className: cn(
             "rounded-xl transition-all duration-200",
             sizeStyles8[size].navButton,
@@ -8785,15 +8889,39 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
           children: /* @__PURE__ */ jsx34(ChevronLeft2, { className: sizeStyles8[size].navIcon })
         }
       ),
-      /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ jsx34("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__ */ jsx34("span", { className: cn("text-muted-foreground font-medium", size === "sm" ? "text-[10px]" : size === "lg" ? "text-sm" : "text-xs"), children: viewDate.getFullYear() })
+      /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx34(
+          "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__ */ jsx34(
+          "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__ */ jsx34(
         "button",
         {
           type: "button",
-          onClick: () => navigateMonth("next"),
+          onClick: () => viewMode === "year" ? navigateYearRange("next") : navigateMonth("next"),
           className: cn(
             "rounded-xl transition-all duration-200",
             sizeStyles8[size].navButton,
@@ -8805,82 +8933,167 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
         }
       )
     ] }),
-    /* @__PURE__ */ jsx34("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__ */ jsx34(
-      "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__ */ jsx34("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__ */ jsx34(
-    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__ */ jsxs24(
+    viewMode === "calendar" && /* @__PURE__ */ jsxs24(Fragment6, { children: [
+      /* @__PURE__ */ jsx34("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__ */ jsx34(
+        "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__ */ jsx34("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__ */ jsxs24("div", { className: cn("flex items-center border-t border-border/50", sizeStyles8[size].footerMargin), children: [
+      /* @__PURE__ */ jsxs24(
         "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__ */ jsxs24("div", { className: cn("flex items-center", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
-              /* @__PURE__ */ jsx34(
-                "div",
-                {
-                  className: cn(
-                    "flex items-center justify-center transition-colors duration-300",
-                    isOpen ? "text-primary" : "text-muted-foreground group-hover:text-primary"
-                  ),
-                  children: /* @__PURE__ */ jsx34(Calendar, { className: cn("transition-transform duration-300", size === "sm" ? "h-3 w-3" : "h-4 w-4", isOpen && "scale-110") })
-                }
-              ),
-              /* @__PURE__ */ jsx34(
-                "span",
-                {
-                  className: cn(
-                    "truncate font-medium transition-colors duration-200",
-                    !tempStart && !tempEnd && "text-muted-foreground",
-                    (tempStart || tempEnd) && "text-foreground"
-                  ),
-                  children: label
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx34("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx34("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__ */ jsx34("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+            /* @__PURE__ */ jsx34(Sparkles2, { className: sizeStyles8[size].actionIcon }),
+            t("today")
           ]
         }
       ),
-      children: panel
-    }
-  );
+      /* @__PURE__ */ jsxs24(
+        "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__ */ jsx34(XIcon, { 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 = useId6();
+  const resolvedId = id ? String(id) : `daterangepicker-${autoId}`;
+  const labelId = label ? `${resolvedId}-label` : void 0;
+  return /* @__PURE__ */ jsxs24("div", { className: cn("space-y-1.5", className), children: [
+    label && /* @__PURE__ */ jsxs24(
+      "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__ */ jsx34("span", { className: "text-destructive ml-1", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx34(
+      "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__ */ jsx34(
+      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__ */ jsxs24(
+          "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__ */ jsxs24("div", { className: cn("flex items-center", size === "sm" ? "gap-1.5" : "gap-2.5"), children: [
+                /* @__PURE__ */ jsx34(
+                  "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__ */ jsx34(Calendar, { className: cn("transition-transform duration-300", sizeStyles8[size].calendarIcon, isOpen && "scale-110") })
+                  }
+                ),
+                /* @__PURE__ */ jsx34(
+                  "span",
+                  {
+                    className: cn(
+                      "truncate font-medium transition-colors duration-200",
+                      !tempStart && !tempEnd && "text-muted-foreground",
+                      (tempStart || tempEnd) && "text-foreground"
+                    ),
+                    children: displayLabel
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx34("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ jsx34("svg", { className: cn(sizeStyles8[size].navIcon), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx34("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+            ]
+          }
+        ),
+        children: panel
+      }
+    ),
+    effectiveError && /* @__PURE__ */ jsx34("div", { className: "text-xs text-destructive", children: effectiveError })
+  ] });
 };
 var CompactDatePicker = ({ value, onChange, className }) => {
   return /* @__PURE__ */ jsx34(
@@ -8907,7 +9120,6 @@ import * as React30 from "react";
 import * as React29 from "react";
 import { Calendar as Calendar2, X as X10, Check as Check4, ChevronDown as ChevronDown2 } from "lucide-react";
 import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
-var REQUIRED_ERROR_MESSAGE3 = "This field is required";
 var DEFAULT_MONTH_NAMES = [
   "January",
   "February",
@@ -9385,6 +9597,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;
@@ -9402,6 +9615,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(() => {
@@ -9410,7 +9624,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) {
@@ -9441,15 +9660,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) => {
@@ -9697,13 +9918,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"
         }
@@ -9732,13 +9954,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"
       }
@@ -10414,7 +10637,6 @@ function Calendar3({
 import * as React31 from "react";
 import { Clock as Clock2, X as X11, Check as Check5, Sun, Moon, Sunset, Coffee } from "lucide-react";
 import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs27 } from "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 = {
@@ -10898,6 +11120,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() });
@@ -11478,13 +11701,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"
         }
@@ -11527,13 +11751,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"
       }
@@ -11575,7 +11800,6 @@ function TimePicker({
 
 // src/components/DateTimePicker.tsx
 import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
-var REQUIRED_ERROR_MESSAGE5 = "This field is required";
 var DateTimePicker = ({
   value,
   onChange,
@@ -11594,6 +11818,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();
@@ -11745,13 +11970,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"
       }
@@ -14772,7 +14998,6 @@ import * as React39 from "react";
 import { useId as useId7 } from "react";
 import { ChevronDown as ChevronDown4, Search as Search5, Check as Check6, SearchX as SearchX2, Loader2 as Loader24, X as X13, Sparkles as Sparkles3 } from "lucide-react";
 import { Fragment as Fragment13, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
-var REQUIRED_ERROR_MESSAGE6 = "This field is required";
 var MultiCombobox = ({
   id,
   options,
@@ -14806,6 +15031,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);
@@ -15219,13 +15445,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"
       }
@@ -16400,7 +16627,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();
@@ -16412,6 +16638,7 @@ function getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline)
   return parentIds;
 }
 function CategoryTreeSelect(props) {
+  const tv = useSmartTranslations("ValidationInput");
   const {
     id,
     label,
@@ -16732,13 +16959,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"
         }
@@ -16767,13 +16995,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"
         }
@@ -16882,13 +17111,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"
       }