@underverse-ui/underverse 1.0.80 → 1.0.81

package/dist/index.cjs

@@ -7099,6 +7099,7 @@ 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,
@@ -7131,8 +7132,8 @@ var Combobox = ({
   const [open, setOpen] = React24.useState(false);
   const [query, setQuery] = React24.useState("");
   const [activeIndex, setActiveIndex] = React24.useState(null);
+  const [localRequiredError, setLocalRequiredError] = React24.useState();
   useShadCNAnimations();
-  const listRef = React24.useRef([]);
   const inputRef = React24.useRef(null);
   const optionsViewportRef = React24.useRef(null);
   useOverlayScrollbarTarget(optionsViewportRef, { enabled: useOverlayScrollbar });
@@ -7149,6 +7150,7 @@ var Combobox = ({
     if (getOptionDisabled(option)) return;
     const val = getOptionValue(option);
     if (val !== void 0 && val !== null) {
+      setLocalRequiredError(void 0);
       onChange(val);
       setOpen(false);
       triggerRef.current?.focus();
@@ -7172,6 +7174,13 @@ var Combobox = ({
   const selectedOption = findOptionByValue(options, value);
   const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
   const selectedIcon = selectedOption ? getOptionIcon(selectedOption) : void 0;
+  const hasValue = value !== void 0 && value !== null && value !== "";
+  const effectiveError = error ?? localRequiredError;
+  React24.useEffect(() => {
+    if (disabled || !required || hasValue) {
+      setLocalRequiredError(void 0);
+    }
+  }, [disabled, hasValue, required]);
   const groupedOptions = React24.useMemo(() => {
     if (!groupBy) return null;
     const groups = {};
@@ -7204,27 +7213,24 @@ var Combobox = ({
     const itemDescription = getOptionDescription(item);
     const itemDisabled = getOptionDisabled(item);
     const isSelected = itemValue === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-      "li",
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { className: "list-none", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      "button",
       {
-        ref: (node) => {
-          listRef.current[index] = node;
-        },
         id: `combobox-item-${index}`,
-        role: "option",
+        type: "button",
         tabIndex: -1,
-        "aria-selected": isSelected,
-        "aria-disabled": itemDisabled,
-        onClick: () => !itemDisabled && handleSelect(item),
+        disabled: itemDisabled,
+        "aria-pressed": isSelected,
+        onClick: () => handleSelect(item),
         style: {
           animationDelay: open ? `${Math.min(index * 15, 150)}ms` : "0ms"
         },
         className: cn(
-          "dropdown-item group flex cursor-pointer items-center rounded-full",
+          "dropdown-item group flex w-full items-center rounded-full text-left",
           itemSizeStyles[size],
           "outline-none focus:outline-none focus-visible:outline-none",
           "transition-all duration-150",
-          !itemDisabled && "hover:bg-accent/70 hover:shadow-sm",
+          !itemDisabled && "cursor-pointer hover:bg-accent/70 hover:shadow-sm",
           !itemDisabled && "focus:bg-accent/80 focus:text-accent-foreground",
           index === activeIndex && !itemDisabled && "bg-accent/60",
           isSelected && "bg-primary/10 text-primary font-medium",
@@ -7244,16 +7250,14 @@ var Combobox = ({
           ] }),
           isSelected && showSelectedIcon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "shrink-0 ml-auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.Check, { className: cn(checkIconSizeStyles[size], "text-primary") }) })
         ]
-      },
-      `${itemValue}-${index}`
-    );
+      }
+    ) }, `${itemValue}-${index}`);
   };
   const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       "data-combobox-dropdown": true,
       "data-state": open ? "open" : "closed",
-      role: "listbox",
       id: `${resolvedId}-listbox`,
       className: "w-full rounded-2xl md:rounded-3xl overflow-hidden",
       children: [
@@ -7308,8 +7312,7 @@ var Combobox = ({
                 "transition-all duration-200",
                 "placeholder:text-muted-foreground/50"
               ),
-              "aria-autocomplete": "list",
-              "aria-activedescendant": activeIndex != null ? `combobox-item-${activeIndex}` : void 0
+              "aria-autocomplete": "list"
             }
           ),
           query && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -7381,7 +7384,8 @@ var Combobox = ({
     "aria-haspopup": "listbox",
     "aria-expanded": open,
     "aria-controls": `${resolvedId}-listbox`,
-    "aria-invalid": !!error,
+    "aria-required": required,
+    "aria-invalid": !!effectiveError,
     id: resolvedId,
     "aria-labelledby": labelId,
     onKeyDown: (e) => {
@@ -7402,7 +7406,7 @@ var Combobox = ({
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
       "disabled:cursor-not-allowed disabled:opacity-50",
       open && "ring-2 ring-primary/20 border-primary",
-      !!error && "border-destructive focus-visible:ring-destructive/30",
+      !!effectiveError && "border-destructive focus-visible:ring-destructive/30",
       className
     )
   };
@@ -7460,6 +7464,7 @@ var Combobox = ({
           labelSize,
           "font-medium transition-colors duration-200",
           disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary",
+          effectiveError && "text-destructive",
           labelClassName
         ),
         children: [
@@ -7468,6 +7473,22 @@ var Combobox = ({
         ]
       }
     ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        readOnly: true,
+        value: hasValue ? "selected" : "",
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(REQUIRED_ERROR_MESSAGE);
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     usePortal ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Popover,
       {
@@ -7484,17 +7505,26 @@ var Combobox = ({
       triggerButtonInline,
       open && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "rounded-2xl md:rounded-3xl overflow-hidden border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", children: dropdownBody }) })
     ] }),
-    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("p", { className: cn("text-xs transition-colors duration-200 flex items-center gap-1.5", error ? "text-destructive" : "text-muted-foreground"), children: [
-      error && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-3.5 h-3.5 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        "path",
-        {
-          fillRule: "evenodd",
-          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
-          clipRule: "evenodd"
-        }
-      ) }),
-      error || helperText
-    ] })
+    (helperText || effectiveError) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      "p",
+      {
+        className: cn(
+          "text-xs transition-colors duration-200 flex items-center gap-1.5",
+          effectiveError ? "text-destructive" : "text-muted-foreground"
+        ),
+        children: [
+          effectiveError && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-3.5 h-3.5 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
+              clipRule: "evenodd"
+            }
+          ) }),
+          effectiveError || helperText
+        ]
+      }
+    )
   ] });
 };
 
@@ -8166,6 +8196,7 @@ 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,
@@ -8189,6 +8220,7 @@ var DatePicker = ({
   const [isOpen, setIsOpen] = React28.useState(false);
   const [viewDate, setViewDate] = React28.useState(value || /* @__PURE__ */ new Date());
   const [viewMode, setViewMode] = React28.useState("calendar");
+  const [localRequiredError, setLocalRequiredError] = React28.useState();
   const triggerRef = React28.useRef(null);
   const wheelContainerRef = React28.useRef(null);
   const wheelDeltaRef = React28.useRef(0);
@@ -8274,6 +8306,11 @@ var DatePicker = ({
       setViewDate(/* @__PURE__ */ new Date());
     }
   }, [value]);
+  React28.useEffect(() => {
+    if (disabled || !required || value) {
+      setLocalRequiredError(void 0);
+    }
+  }, [disabled, required, value]);
   React28.useEffect(() => {
     if (!isOpen) {
       setViewMode("calendar");
@@ -8288,6 +8325,7 @@ var DatePicker = ({
       selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
     }
     onChange(selectedDate);
+    setLocalRequiredError(void 0);
     setIsOpen(false);
   };
   const formatDateDisplay = (date) => {
@@ -8569,6 +8607,7 @@ var DatePicker = ({
   const labelSize = sizeStyles8[size].label;
   const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
   const verticalGap = size === "sm" ? "space-y-1.5" : size === "lg" ? "space-y-2.5" : "space-y-2";
+  const effectiveError = localRequiredError;
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("w-full group", verticalGap), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "label",
@@ -8580,6 +8619,7 @@ var DatePicker = ({
           labelSize,
           "font-semibold transition-colors duration-300 cursor-pointer",
           disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary hover:text-primary",
+          effectiveError && "text-destructive",
           labelClassName
         ),
         children: [
@@ -8588,6 +8628,22 @@ var DatePicker = ({
         ]
       }
     ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        readOnly: true,
+        value: value ? "selected" : "",
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(REQUIRED_ERROR_MESSAGE2);
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Popover,
       {
@@ -8613,6 +8669,8 @@ var DatePicker = ({
             disabled,
             id: resolvedId,
             "aria-labelledby": labelId,
+            "aria-required": required,
+            "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
               "rounded-full",
@@ -8623,6 +8681,7 @@ var DatePicker = ({
               "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",
               className
             ),
             children: [
@@ -8663,6 +8722,7 @@ var DatePicker = ({
                         e.preventDefault();
                         e.stopPropagation();
                         onChange(void 0);
+                        setLocalRequiredError(void 0);
                         setViewDate(/* @__PURE__ */ new Date());
                       }
                     },
@@ -8687,7 +8747,8 @@ var DatePicker = ({
         ),
         children: datePickerContent
       }
-    )
+    ),
+    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" }) => {
@@ -9031,6 +9092,7 @@ 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",
@@ -9524,6 +9586,7 @@ function MonthYearPicker({
   const [open, setOpen] = React29.useState(false);
   const [parts, setParts] = React29.useState(initial);
   const [focusedColumn, setFocusedColumn] = React29.useState(null);
+  const [localRequiredError, setLocalRequiredError] = React29.useState();
   const monthScrollRef = React29.useRef(null);
   const yearScrollRef = React29.useRef(null);
   React29.useEffect(() => {
@@ -9532,6 +9595,13 @@ function MonthYearPicker({
       if (parsed) setParts(parsed);
     }
   }, [value, isControlled]);
+  const hasValue = isControlled ? !!value : !!defaultValue || parts !== initial;
+  const effectiveError = error ?? localRequiredError;
+  React29.useEffect(() => {
+    if (disabled || !required || hasValue) {
+      setLocalRequiredError(void 0);
+    }
+  }, [disabled, hasValue, required]);
   const years = React29.useMemo(() => {
     return Array.from({ length: resolvedMaxYear - resolvedMinYear + 1 }, (_, i) => resolvedMinYear + i);
   }, [resolvedMinYear, resolvedMaxYear]);
@@ -9555,11 +9625,13 @@ function MonthYearPicker({
   const emit = React29.useCallback(
     (next) => {
       if (!next) {
+        setLocalRequiredError(void 0);
         onChange?.(void 0);
         return;
       }
       if (!isDateInRange(next.month, next.year)) return;
       const date = new Date(next.year, next.month, 1);
+      setLocalRequiredError(void 0);
       onChange?.({ ...next, date });
     },
     [isDateInRange, onChange]
@@ -9634,7 +9706,6 @@ function MonthYearPicker({
   const monthIndex = parts.month;
   const yearIndex = years.indexOf(parts.year);
   const display = `${shortMonthNames[parts.month]} ${parts.year}`;
-  const hasValue = isControlled ? !!value : !!defaultValue || parts !== initial;
   const trigger = variant === "inline" ? null : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "button",
     {
@@ -9643,6 +9714,8 @@ function MonthYearPicker({
       "aria-label": "Select month and year",
       "aria-haspopup": "dialog",
       "aria-expanded": open,
+      "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",
         sz.height,
@@ -9651,9 +9724,9 @@ function MonthYearPicker({
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         "transition-all duration-300 ease-out",
-        error && "border-destructive/60 focus-visible:ring-destructive/50 bg-destructive/5",
-        success && "border-success/60 focus-visible:ring-success/50 bg-success/5",
-        !error && !success && "border-border/60 hover:border-primary/40 hover:bg-accent/10",
+        effectiveError && "border-destructive/60 focus-visible:ring-destructive/50 bg-destructive/5",
+        success && !effectiveError && "border-success/60 focus-visible:ring-success/50 bg-success/5",
+        !effectiveError && !success && "border-border/60 hover:border-primary/40 hover:bg-accent/10",
         animate && !disabled && "hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
         open && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
         className
@@ -9665,7 +9738,7 @@ function MonthYearPicker({
             {
               className: cn(
                 "flex items-center justify-center transition-colors duration-300",
-                error ? "text-destructive" : success ? "text-success" : open ? "text-primary" : "text-muted-foreground group-hover:text-primary"
+                effectiveError ? "text-destructive" : success ? "text-success" : open ? "text-primary" : "text-muted-foreground group-hover:text-primary"
               ),
               children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react16.Calendar, { className: cn(sz.icon, "transition-transform duration-300", open && "rotate-12") })
             }
@@ -9800,19 +9873,61 @@ function MonthYearPicker({
   ] });
   if (variant === "inline") {
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("w-full", className), ...rest, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", labelClassName), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", effectiveError && "text-destructive", labelClassName), children: [
         label,
         required && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-destructive ml-0.5", children: "*" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn(panelSz.contentPadding, "rounded-2xl border border-border/50 bg-background/80 backdrop-blur-sm"), children: pickerContent }),
-      (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("mt-1.5 text-xs", error ? "text-destructive" : "text-muted-foreground"), children: error || helperText })
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        "input",
+        {
+          tabIndex: -1,
+          "aria-hidden": "true",
+          readOnly: true,
+          value: hasValue ? "selected" : "",
+          required,
+          disabled,
+          onInvalid: (e) => {
+            e.preventDefault();
+            setLocalRequiredError(REQUIRED_ERROR_MESSAGE3);
+          },
+          className: "pointer-events-none absolute h-0 w-0 opacity-0"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        "div",
+        {
+          className: cn(
+            panelSz.contentPadding,
+            "rounded-2xl border bg-background/80 backdrop-blur-sm",
+            effectiveError ? "border-destructive/60 bg-destructive/5" : "border-border/50"
+          ),
+          children: pickerContent
+        }
+      ),
+      (helperText || effectiveError) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("mt-1.5 text-xs", effectiveError ? "text-destructive" : "text-muted-foreground"), children: effectiveError || helperText })
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("w-full", className), ...rest, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", labelClassName), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", effectiveError && "text-destructive", labelClassName), children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-destructive ml-0.5", children: "*" })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        readOnly: true,
+        value: hasValue ? "selected" : "",
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(REQUIRED_ERROR_MESSAGE3);
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Popover,
       {
@@ -9827,7 +9942,7 @@ function MonthYearPicker({
         children: pickerContent
       }
     ),
-    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("mt-1.5 text-xs", error ? "text-destructive" : "text-muted-foreground"), children: error || helperText })
+    (helperText || effectiveError) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("mt-1.5 text-xs", effectiveError ? "text-destructive" : "text-muted-foreground"), children: effectiveError || helperText })
   ] });
 }
 
@@ -10484,6 +10599,7 @@ 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 = {
@@ -10974,6 +11090,8 @@ function TimePicker({
   const [parts, setParts] = React31.useState(initial);
   const [manualInput, setManualInput] = React31.useState("");
   const [focusedColumn, setFocusedColumn] = React31.useState(null);
+  const [localRequiredError, setLocalRequiredError] = React31.useState();
+  const [hasCommittedValue, setHasCommittedValue] = React31.useState(Boolean(isControlled ? value : defaultValue));
   const hourScrollRef = React31.useRef(null);
   const minuteScrollRef = React31.useRef(null);
   const secondScrollRef = React31.useRef(null);
@@ -10983,6 +11101,11 @@ function TimePicker({
       if (parsed) setParts(parsed);
     }
   }, [value, isControlled, format, includeSeconds]);
+  React31.useEffect(() => {
+    if (isControlled) {
+      setHasCommittedValue(Boolean(value));
+    }
+  }, [isControlled, value]);
   const isTimeDisabled = React31.useCallback(
     (timeStr) => {
       if (!disabledTimes) return false;
@@ -11037,9 +11160,13 @@ function TimePicker({
     (next) => {
       const timeStr = next ? formatTime2(next, format, includeSeconds) : void 0;
       if (!canEmit(next)) return;
+      setLocalRequiredError(void 0);
+      if (!isControlled) {
+        setHasCommittedValue(Boolean(next));
+      }
       onChange?.(timeStr);
     },
-    [canEmit, format, includeSeconds, onChange]
+    [canEmit, format, includeSeconds, isControlled, onChange]
   );
   const tryUpdate = React31.useCallback(
     (next) => {
@@ -11059,6 +11186,11 @@ function TimePicker({
       setFocusedColumn(null);
     }
   };
+  React31.useEffect(() => {
+    if (disabled || !required || hasCommittedValue) {
+      setLocalRequiredError(void 0);
+    }
+  }, [disabled, hasCommittedValue, required]);
   const handleKeyDown2 = (e, column) => {
     if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(e.key)) return;
     e.preventDefault();
@@ -11201,6 +11333,7 @@ function TimePicker({
   const panelSz = panelSizeClasses[effectivePanelSize];
   const shouldMatchTriggerWidth = matchTriggerWidth ?? variant !== "compact";
   const compactPanel = variant === "compact";
+  const effectiveError = error ?? localRequiredError;
   const display = formatTime2(parts, format, includeSeconds);
   const trigger = variant === "inline" ? null : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "button",
@@ -11210,6 +11343,8 @@ function TimePicker({
       "aria-label": "Select time",
       "aria-haspopup": "dialog",
       "aria-expanded": open,
+      "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",
         sz.height,
@@ -11218,9 +11353,9 @@ function TimePicker({
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         "transition-all duration-300 ease-out",
-        error && "border-destructive/60 focus-visible:ring-destructive/50 bg-destructive/5",
-        success && "border-success/60 focus-visible:ring-success/50 bg-success/5",
-        !error && !success && "border-border/60 hover:border-primary/40 hover:bg-accent/10",
+        effectiveError && "border-destructive/60 focus-visible:ring-destructive/50 bg-destructive/5",
+        success && !effectiveError && "border-success/60 focus-visible:ring-success/50 bg-success/5",
+        !effectiveError && !success && "border-border/60 hover:border-primary/40 hover:bg-accent/10",
         animate && !disabled && "hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
         open && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
         className
@@ -11232,7 +11367,7 @@ function TimePicker({
             {
               className: cn(
                 "flex items-center justify-center transition-colors duration-300",
-                error ? "text-destructive" : success ? "text-success" : open ? "text-primary" : "text-muted-foreground group-hover:text-primary"
+                effectiveError ? "text-destructive" : success ? "text-success" : open ? "text-primary" : "text-muted-foreground group-hover:text-primary"
               ),
               children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react18.Clock, { className: cn(sz.icon, "transition-transform duration-300", open && "rotate-12") })
             }
@@ -11519,17 +11654,39 @@ function TimePicker({
   ] });
   if (variant === "inline") {
     return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "w-fit max-w-full", ...rest, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: cn(sz.label, "font-semibold", disabled ? "text-muted-foreground" : "text-foreground"), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: cn(sz.label, "font-semibold", disabled ? "text-muted-foreground" : "text-foreground", effectiveError && "text-destructive"), children: [
         label,
         required && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-destructive ml-1", children: "*" })
       ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "input",
+        {
+          tabIndex: -1,
+          "aria-hidden": "true",
+          readOnly: true,
+          value: hasCommittedValue ? "selected" : "",
+          required,
+          disabled,
+          onInvalid: (e) => {
+            e.preventDefault();
+            setLocalRequiredError(REQUIRED_ERROR_MESSAGE4);
+          },
+          className: "pointer-events-none absolute h-0 w-0 opacity-0"
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "div",
         {
-          className: cn(panelSz.contentPadding, "rounded-2xl md:rounded-3xl border border-border/60 bg-card/95 backdrop-blur-sm shadow-xl", className),
+          className: cn(
+            panelSz.contentPadding,
+            "rounded-2xl md:rounded-3xl border bg-card/95 backdrop-blur-sm shadow-xl",
+            effectiveError ? "border-destructive/60 bg-destructive/5" : "border-border/60",
+            className
+          ),
           children: timePickerContent
         }
-      )
+      ),
+      effectiveError && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("mt-2", sz.label, "text-destructive"), children: effectiveError })
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "w-full", ...rest, children: [
@@ -11540,6 +11697,7 @@ function TimePicker({
           sz.label,
           "font-semibold",
           disabled ? "text-muted-foreground" : "text-foreground",
+          effectiveError && "text-destructive",
           "cursor-pointer transition-colors hover:text-primary"
         ),
         onClick: () => !disabled && handleOpenChange(true),
@@ -11549,6 +11707,22 @@ function TimePicker({
         ]
       }
     ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        readOnly: true,
+        value: hasCommittedValue ? "selected" : "",
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(REQUIRED_ERROR_MESSAGE4);
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Popover,
       {
@@ -11562,30 +11736,31 @@ function TimePicker({
           panelSz.contentPadding,
           compactPanel && "max-w-[calc(100vw-2rem)] p-4 rounded-2xl",
           "rounded-2xl md:rounded-3xl border bg-popover/98 backdrop-blur-md shadow-2xl",
-          error && "border-destructive/40",
-          success && "border-success/40",
-          !error && !success && "border-border/60",
+          effectiveError && "border-destructive/40",
+          success && !effectiveError && "border-success/40",
+          !effectiveError && !success && "border-border/60",
           animate && "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
         ),
         children: timePickerContent
       }
     ),
-    (error || success || helperText) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("mt-2 flex items-start gap-2", sz.label), children: [
-      error && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 text-destructive bg-destructive/10 px-3 py-1.5 rounded-lg", children: [
+    (effectiveError || success || helperText) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("mt-2 flex items-start gap-2", sz.label), children: [
+      effectiveError && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 text-destructive bg-destructive/10 px-3 py-1.5 rounded-lg", children: [
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react18.X, { className: "w-3.5 h-3.5 shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-medium", children: error })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-medium", children: effectiveError })
       ] }),
-      success && !error && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 text-success bg-success/10 px-3 py-1.5 rounded-lg", children: [
+      success && !effectiveError && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2 text-success bg-success/10 px-3 py-1.5 rounded-lg", children: [
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react18.Check, { className: "w-3.5 h-3.5 shrink-0" }),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-medium", children: "Valid time selected" })
       ] }),
-      helperText && !error && !success && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-muted-foreground/80 italic", children: helperText })
+      helperText && !effectiveError && !success && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-muted-foreground/80 italic", children: helperText })
     ] })
   ] });
 }
 
 // src/components/DateTimePicker.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
+var REQUIRED_ERROR_MESSAGE5 = "This field is required";
 var DateTimePicker = ({
   value,
   onChange,
@@ -11606,6 +11781,7 @@ var DateTimePicker = ({
   const t = useSmartTranslations("DateTimePicker");
   const locale = useSmartLocale();
   const [open, setOpen] = React32.useState(false);
+  const [localRequiredError, setLocalRequiredError] = React32.useState();
   const sizeStyles8 = {
     sm: {
       trigger: "h-8 px-2.5 py-1.5 text-sm md:h-7 md:text-xs",
@@ -11644,6 +11820,11 @@ var DateTimePicker = ({
     setTempDate(value);
     setCalendarMonth(value ?? /* @__PURE__ */ new Date());
   }, [value, open]);
+  React32.useEffect(() => {
+    if (disabled || !required || value) {
+      setLocalRequiredError(void 0);
+    }
+  }, [disabled, required, value]);
   const getTimeString = (date) => {
     if (!date) return "";
     const h = date.getHours();
@@ -11700,11 +11881,13 @@ var DateTimePicker = ({
   };
   const handleApply = () => {
     onChange(tempDate);
+    setLocalRequiredError(void 0);
     setOpen(false);
   };
   const handleClear = () => {
     onChange(void 0);
     setTempDate(void 0);
+    setLocalRequiredError(void 0);
     setOpen(false);
   };
   const displayValue = value ? value.toLocaleString(locale === "vi" ? "vi-VN" : "en-US", {
@@ -11735,12 +11918,29 @@ var DateTimePicker = ({
     }
   };
   const weekdays = getWeekdays(locale);
+  const effectiveError = localRequiredError;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("space-y-1.5", className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("label", { className: cn(sizeStyles8[size].label, "font-medium text-foreground flex items-center gap-1", labelClassName), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("label", { className: cn(sizeStyles8[size].label, "font-medium text-foreground flex items-center gap-1", effectiveError && "text-destructive", labelClassName), children: [
       label,
       " ",
       required && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-destructive", children: "*" })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        readOnly: true,
+        value: value ? "selected" : "",
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(REQUIRED_ERROR_MESSAGE5);
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       Popover,
       {
@@ -11751,12 +11951,15 @@ var DateTimePicker = ({
           {
             type: "button",
             disabled,
+            "aria-required": required,
+            "aria-invalid": !!effectiveError,
             className: cn(
               "flex w-full items-center justify-between rounded-full border border-input bg-background",
               sizeStyles8[size].trigger,
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               disabled && "opacity-50 cursor-not-allowed",
-              !displayValue && "text-muted-foreground"
+              !displayValue && "text-muted-foreground",
+              effectiveError && "border-destructive/60 bg-destructive/5"
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "truncate", children: displayValue || placeholder || "Select date & time" }),
@@ -11769,6 +11972,7 @@ var DateTimePicker = ({
                     onClick: (e) => {
                       e.stopPropagation();
                       onChange(void 0);
+                      setLocalRequiredError(void 0);
                     },
                     className: "hover:text-foreground p-0.5 rounded-md hover:bg-accent",
                     children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react19.X, { className: sizeStyles8[size].icon })
@@ -11828,7 +12032,8 @@ var DateTimePicker = ({
           ] })
         ]
       }
-    )
+    ),
+    effectiveError && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "text-xs text-destructive", children: effectiveError })
   ] });
 };
 
@@ -14752,6 +14957,7 @@ 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,
@@ -14788,6 +14994,7 @@ var MultiCombobox = ({
   const [query, setQuery] = React39.useState("");
   const [open, setOpen] = React39.useState(false);
   const [activeIndex, setActiveIndex] = React39.useState(null);
+  const [localRequiredError, setLocalRequiredError] = React39.useState();
   const inputRef = React39.useRef(null);
   const listRef = React39.useRef([]);
   const optionsListRef = React39.useRef(null);
@@ -14824,6 +15031,7 @@ var MultiCombobox = ({
       onChange(value.filter((v) => v !== optionValue));
     } else {
       if (!maxSelected || value.length < maxSelected) {
+        setLocalRequiredError(void 0);
         onChange([...value, optionValue]);
       }
     }
@@ -14843,6 +15051,12 @@ var MultiCombobox = ({
   const handleClearAll = () => {
     onChange([]);
   };
+  const effectiveError = error ?? localRequiredError;
+  React39.useEffect(() => {
+    if (disabled || !required || value.length > 0) {
+      setLocalRequiredError(void 0);
+    }
+  }, [disabled, required, value.length]);
   React39.useEffect(() => {
     if (open && enableSearch) {
       setTimeout(() => {
@@ -15053,7 +15267,8 @@ var MultiCombobox = ({
       "aria-haspopup": "listbox",
       "aria-expanded": open,
       "aria-controls": listboxId,
-      "aria-invalid": !!error,
+      "aria-required": required,
+      "aria-invalid": !!effectiveError,
       className: cn(
         "group flex w-full items-center gap-2 rounded-full transition-all duration-200",
         sizeStyles8[size].trigger,
@@ -15061,7 +15276,7 @@ var MultiCombobox = ({
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
         "disabled:cursor-not-allowed disabled:opacity-50",
         open && "ring-2 ring-primary/20 border-primary",
-        !!error && "border-destructive focus-visible:ring-destructive/30"
+        !!effectiveError && "border-destructive focus-visible:ring-destructive/30"
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("flex items-center gap-1.5 flex-1 overflow-hidden", size === "sm" ? "min-h-4" : size === "lg" ? "min-h-8" : "min-h-6"), children: value.length > 0 ? showTags ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
@@ -15157,6 +15372,7 @@ var MultiCombobox = ({
           size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
           "font-medium transition-colors duration-200",
           disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary",
+          effectiveError && "text-destructive",
           labelClassName
         ),
         children: [
@@ -15174,6 +15390,7 @@ var MultiCombobox = ({
           labelSize,
           "font-medium transition-colors duration-200",
           disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary",
+          effectiveError && "text-destructive",
           labelClassName
         ),
         children: [
@@ -15182,6 +15399,22 @@ var MultiCombobox = ({
         ]
       }
     ),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        readOnly: true,
+        value: value.length > 0 ? "selected" : "",
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(REQUIRED_ERROR_MESSAGE6);
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Popover,
       {
@@ -15195,17 +15428,26 @@ var MultiCombobox = ({
         children: dropdownBody
       }
     ),
-    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("p", { className: cn("text-xs transition-colors duration-200 flex items-center gap-1.5", error ? "text-destructive" : "text-muted-foreground"), children: [
-      error && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-3.5 h-3.5 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        "path",
-        {
-          fillRule: "evenodd",
-          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
-          clipRule: "evenodd"
-        }
-      ) }),
-      error || helperText
-    ] })
+    (helperText || effectiveError) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      "p",
+      {
+        className: cn(
+          "text-xs transition-colors duration-200 flex items-center gap-1.5",
+          effectiveError ? "text-destructive" : "text-muted-foreground"
+        ),
+        children: [
+          effectiveError && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-3.5 h-3.5 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
+              clipRule: "evenodd"
+            }
+          ) }),
+          effectiveError || helperText
+        ]
+      }
+    )
   ] });
 };
 
@@ -16343,6 +16585,7 @@ 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();
@@ -16381,14 +16624,16 @@ function CategoryTreeSelect(props) {
   const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
   const [expandedNodes, setExpandedNodes] = (0, import_react22.useState)(() => getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline));
   const [query, setQuery] = (0, import_react22.useState)("");
+  const [localRequiredError, setLocalRequiredError] = (0, import_react22.useState)();
   const searchInputRef = (0, import_react22.useRef)(null);
   const dropdownViewportRef = (0, import_react22.useRef)(null);
   useOverlayScrollbarTarget(dropdownViewportRef, { enabled: useOverlayScrollbar });
   const autoId = (0, import_react22.useId)();
   const resolvedId = id ? String(id) : `category-tree-select-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
-  const helperId = helperText && !error ? `${resolvedId}-helper` : void 0;
-  const errorId = error ? `${resolvedId}-error` : void 0;
+  const effectiveError = error ?? localRequiredError;
+  const helperId = helperText && !effectiveError ? `${resolvedId}-helper` : void 0;
+  const errorId = effectiveError ? `${resolvedId}-error` : void 0;
   const describedBy = errorId || helperId;
   const mergedLabels = { ...defaultLabels, ...labels };
   const valueArray = (0, import_react22.useMemo)(
@@ -16459,6 +16704,11 @@ function CategoryTreeSelect(props) {
     const t = setTimeout(() => searchInputRef.current?.focus(), 50);
     return () => clearTimeout(t);
   }, [isOpen, isSearchEnabled]);
+  (0, import_react22.useEffect)(() => {
+    if (disabled || !required || valueArray.length > 0) {
+      setLocalRequiredError(void 0);
+    }
+  }, [disabled, required, valueArray.length]);
   const toggleExpand = (id2) => {
     if (isSearchMode) return;
     const newExpanded = new Set(expandedNodes);
@@ -16477,6 +16727,7 @@ function CategoryTreeSelect(props) {
       toggleExpand(categoryId);
       return;
     }
+    setLocalRequiredError(void 0);
     if (!props.onChange) return;
     if (singleSelect) {
       const onChange = props.onChange;
@@ -16648,7 +16899,7 @@ function CategoryTreeSelect(props) {
       className: cn(
         size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
         disabled ? "text-muted-foreground" : "text-foreground",
-        error && "text-destructive",
+        effectiveError && "text-destructive",
         labelClassName
       ),
       children: [
@@ -16657,10 +16908,26 @@ function CategoryTreeSelect(props) {
       ]
     }
   ) }) : null;
-  const renderAssistiveText = () => error ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { id: errorId, className: "text-sm text-destructive", children: error }) : helperText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { id: helperId, className: "text-sm text-muted-foreground", children: helperText }) : null;
+  const renderAssistiveText = () => effectiveError ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { id: errorId, className: "text-sm text-destructive", children: effectiveError }) : helperText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { id: helperId, className: "text-sm text-muted-foreground", children: helperText }) : null;
   if (viewOnly) {
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("w-full space-y-2", className), children: [
       renderLabel(),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "input",
+        {
+          tabIndex: -1,
+          "aria-hidden": "true",
+          readOnly: true,
+          value: valueArray.length > 0 ? "selected" : "",
+          required,
+          disabled,
+          onInvalid: (e) => {
+            e.preventDefault();
+            setLocalRequiredError(REQUIRED_ERROR_MESSAGE7);
+          },
+          className: "pointer-events-none absolute h-0 w-0 opacity-0"
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
         "div",
         {
@@ -16680,6 +16947,22 @@ function CategoryTreeSelect(props) {
   if (inline) {
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("w-full space-y-2", className), children: [
       renderLabel(),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "input",
+        {
+          tabIndex: -1,
+          "aria-hidden": "true",
+          readOnly: true,
+          value: valueArray.length > 0 ? "selected" : "",
+          required,
+          disabled,
+          onInvalid: (e) => {
+            e.preventDefault();
+            setLocalRequiredError(REQUIRED_ERROR_MESSAGE7);
+          },
+          className: "pointer-events-none absolute h-0 w-0 opacity-0"
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
         "div",
         {
@@ -16779,6 +17062,22 @@ function CategoryTreeSelect(props) {
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("w-full space-y-2", className), children: [
     renderLabel(),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        readOnly: true,
+        value: valueArray.length > 0 ? "selected" : "",
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(REQUIRED_ERROR_MESSAGE7);
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       Popover,
       {
@@ -16805,7 +17104,8 @@ function CategoryTreeSelect(props) {
             "aria-controls": `${resolvedId}-tree`,
             "aria-labelledby": labelId,
             "aria-describedby": describedBy,
-            "aria-invalid": !!error,
+            "aria-required": required,
+            "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between rounded-full transition-all duration-200",
               "backdrop-blur-sm",
@@ -16814,7 +17114,7 @@ function CategoryTreeSelect(props) {
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
               disabled && "opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none",
               isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
-              error && "border-destructive focus-visible:ring-destructive/30"
+              effectiveError && "border-destructive focus-visible:ring-destructive/30"
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 text-left", children: [
@@ -20793,7 +21093,7 @@ function DataTableHeader({
                   className: cn(
                     "absolute inset-y-0 right-0 z-10 w-3 -mr-1",
                     "cursor-col-resize select-none bg-transparent",
-                    "after:absolute after:inset-y-2 after:right-[3px] after:w-px after:bg-border/0 after:transition-colors",
+                    "after:absolute after:inset-y-2 after:right-0.8 after:w-px after:bg-border/0 after:transition-colors",
                     "hover:after:bg-primary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
                   )
                 }
@@ -24023,7 +24323,7 @@ var TableInsertGrid = ({
                 onFocus: () => setSelection({ rows, cols }),
                 onClick: () => onInsert(rows, cols),
                 className: cn(
-                  "h-5 w-5 rounded-[4px] border transition-colors",
+                  "h-5 w-5 rounded-sm border transition-colors",
                   active ? "border-primary bg-primary/20" : "border-border/70 bg-background hover:border-primary/60 hover:bg-primary/10"
                 )
               },