@underverse-ui/underverse 1.0.80 → 1.0.82

package/dist/index.js

@@ -6943,11 +6943,12 @@ 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);
+  const [localRequiredError, setLocalRequiredError] = React24.useState();
   useShadCNAnimations();
-  const listRef = React24.useRef([]);
   const inputRef = React24.useRef(null);
   const optionsViewportRef = React24.useRef(null);
   useOverlayScrollbarTarget(optionsViewportRef, { enabled: useOverlayScrollbar });
@@ -6964,6 +6965,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();
@@ -6987,6 +6989,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 = {};
@@ -7019,27 +7028,24 @@ var Combobox = ({
     const itemDescription = getOptionDescription(item);
     const itemDisabled = getOptionDisabled(item);
     const isSelected = itemValue === value;
-    return /* @__PURE__ */ jsxs22(
-      "li",
+    return /* @__PURE__ */ jsx29("li", { className: "list-none", children: /* @__PURE__ */ jsxs22(
+      "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",
@@ -7059,16 +7065,14 @@ var Combobox = ({
           ] }),
           isSelected && showSelectedIcon && /* @__PURE__ */ jsx29("span", { className: "shrink-0 ml-auto", children: /* @__PURE__ */ jsx29(Check3, { className: cn(checkIconSizeStyles[size], "text-primary") }) })
         ]
-      },
-      `${itemValue}-${index}`
-    );
+      }
+    ) }, `${itemValue}-${index}`);
   };
   const dropdownBody = /* @__PURE__ */ jsxs22(
     "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: [
@@ -7123,8 +7127,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__ */ jsx29(
@@ -7196,7 +7199,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) => {
@@ -7217,7 +7221,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
     )
   };
@@ -7275,6 +7279,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: [
@@ -7283,6 +7288,23 @@ var Combobox = ({
         ]
       }
     ) }),
+    /* @__PURE__ */ jsx29(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        value: hasValue ? "selected" : "",
+        onChange: () => {
+        },
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(tv("required"));
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     usePortal ? /* @__PURE__ */ jsx29(
       Popover,
       {
@@ -7299,17 +7321,26 @@ var Combobox = ({
       triggerButtonInline,
       open && /* @__PURE__ */ jsx29("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ jsx29("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__ */ jsxs22("p", { className: cn("text-xs transition-colors duration-200 flex items-center gap-1.5", error ? "text-destructive" : "text-muted-foreground"), children: [
-      error && /* @__PURE__ */ jsx29("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__ */ jsx29(
-        "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__ */ jsxs22(
+      "p",
+      {
+        className: cn(
+          "text-xs transition-colors duration-200 flex items-center gap-1.5",
+          effectiveError ? "text-destructive" : "text-muted-foreground"
+        ),
+        children: [
+          effectiveError && /* @__PURE__ */ jsx29("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__ */ jsx29(
+            "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
+        ]
+      }
+    )
   ] });
 };
 
@@ -8000,10 +8031,12 @@ 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());
   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);
@@ -8089,6 +8122,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");
@@ -8103,6 +8141,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) => {
@@ -8384,6 +8423,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__ */ jsxs24("div", { className: cn("w-full group", verticalGap), children: [
     label && /* @__PURE__ */ jsx34("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs24(
       "label",
@@ -8395,6 +8435,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: [
@@ -8403,6 +8444,23 @@ var DatePicker = ({
         ]
       }
     ) }),
+    /* @__PURE__ */ jsx34(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        value: value ? "selected" : "",
+        onChange: () => {
+        },
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(tv("required"));
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ jsx34(
       Popover,
       {
@@ -8428,6 +8486,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",
@@ -8438,6 +8498,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: [
@@ -8478,6 +8539,7 @@ var DatePicker = ({
                         e.preventDefault();
                         e.stopPropagation();
                         onChange(void 0);
+                        setLocalRequiredError(void 0);
                         setViewDate(/* @__PURE__ */ new Date());
                       }
                     },
@@ -8502,7 +8564,8 @@ var DatePicker = ({
         ),
         children: datePickerContent
       }
-    )
+    ),
+    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" }) => {
@@ -9323,6 +9386,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;
@@ -9339,6 +9403,8 @@ 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 [hasCommittedValue, setHasCommittedValue] = React29.useState(Boolean(parseValue(isControlled ? value : defaultValue)));
   const monthScrollRef = React29.useRef(null);
   const yearScrollRef = React29.useRef(null);
   React29.useEffect(() => {
@@ -9347,6 +9413,18 @@ function MonthYearPicker({
       if (parsed) setParts(parsed);
     }
   }, [value, isControlled]);
+  React29.useEffect(() => {
+    if (isControlled) {
+      setHasCommittedValue(Boolean(parseValue(value)));
+    }
+  }, [isControlled, value]);
+  const hasValue = hasCommittedValue;
+  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]);
@@ -9370,14 +9448,18 @@ function MonthYearPicker({
   const emit = React29.useCallback(
     (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) => {
@@ -9449,7 +9531,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__ */ jsxs25(
     "button",
     {
@@ -9458,6 +9539,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,
@@ -9466,9 +9549,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
@@ -9480,7 +9563,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__ */ jsx35(Calendar2, { className: cn(sz.icon, "transition-transform duration-300", open && "rotate-12") })
             }
@@ -9615,19 +9698,63 @@ function MonthYearPicker({
   ] });
   if (variant === "inline") {
     return /* @__PURE__ */ jsxs25("div", { className: cn("w-full", className), ...rest, children: [
-      label && /* @__PURE__ */ jsxs25("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", labelClassName), children: [
+      label && /* @__PURE__ */ jsxs25("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", effectiveError && "text-destructive", labelClassName), children: [
         label,
         required && /* @__PURE__ */ jsx35("span", { className: "text-destructive ml-0.5", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx35("div", { className: cn(panelSz.contentPadding, "rounded-2xl border border-border/50 bg-background/80 backdrop-blur-sm"), children: pickerContent }),
-      (helperText || error) && /* @__PURE__ */ jsx35("div", { className: cn("mt-1.5 text-xs", error ? "text-destructive" : "text-muted-foreground"), children: error || helperText })
+      /* @__PURE__ */ jsx35(
+        "input",
+        {
+          tabIndex: -1,
+          "aria-hidden": "true",
+          value: hasValue ? "selected" : "",
+          onChange: () => {
+          },
+          required,
+          disabled,
+          onInvalid: (e) => {
+            e.preventDefault();
+            setLocalRequiredError(tv("required"));
+          },
+          className: "pointer-events-none absolute h-0 w-0 opacity-0"
+        }
+      ),
+      /* @__PURE__ */ jsx35(
+        "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__ */ jsx35("div", { className: cn("mt-1.5 text-xs", effectiveError ? "text-destructive" : "text-muted-foreground"), children: effectiveError || helperText })
     ] });
   }
   return /* @__PURE__ */ jsxs25("div", { className: cn("w-full", className), ...rest, children: [
-    label && /* @__PURE__ */ jsxs25("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", labelClassName), children: [
+    label && /* @__PURE__ */ jsxs25("label", { className: cn(sz.label, "block mb-1.5 font-medium text-foreground/80", effectiveError && "text-destructive", labelClassName), children: [
       label,
       required && /* @__PURE__ */ jsx35("span", { className: "text-destructive ml-0.5", children: "*" })
     ] }),
+    /* @__PURE__ */ jsx35(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        value: hasValue ? "selected" : "",
+        onChange: () => {
+        },
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(tv("required"));
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ jsx35(
       Popover,
       {
@@ -9642,7 +9769,7 @@ function MonthYearPicker({
         children: pickerContent
       }
     ),
-    (helperText || error) && /* @__PURE__ */ jsx35("div", { className: cn("mt-1.5 text-xs", error ? "text-destructive" : "text-muted-foreground"), children: error || helperText })
+    (helperText || effectiveError) && /* @__PURE__ */ jsx35("div", { className: cn("mt-1.5 text-xs", effectiveError ? "text-destructive" : "text-muted-foreground"), children: effectiveError || helperText })
   ] });
 }
 
@@ -10782,6 +10909,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() });
@@ -10789,6 +10917,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);
@@ -10798,6 +10928,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;
@@ -10852,9 +10987,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) => {
@@ -10874,6 +11013,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();
@@ -11016,6 +11160,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__ */ jsxs27(
     "button",
@@ -11025,6 +11170,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,
@@ -11033,9 +11180,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
@@ -11047,7 +11194,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__ */ jsx37(Clock2, { className: cn(sz.icon, "transition-transform duration-300", open && "rotate-12") })
             }
@@ -11334,17 +11481,40 @@ function TimePicker({
   ] });
   if (variant === "inline") {
     return /* @__PURE__ */ jsxs27("div", { className: "w-fit max-w-full", ...rest, children: [
-      label && /* @__PURE__ */ jsx37("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxs27("label", { className: cn(sz.label, "font-semibold", disabled ? "text-muted-foreground" : "text-foreground"), children: [
+      label && /* @__PURE__ */ jsx37("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxs27("label", { className: cn(sz.label, "font-semibold", disabled ? "text-muted-foreground" : "text-foreground", effectiveError && "text-destructive"), children: [
         label,
         required && /* @__PURE__ */ jsx37("span", { className: "text-destructive ml-1", children: "*" })
       ] }) }),
+      /* @__PURE__ */ jsx37(
+        "input",
+        {
+          tabIndex: -1,
+          "aria-hidden": "true",
+          value: hasCommittedValue ? "selected" : "",
+          onChange: () => {
+          },
+          required,
+          disabled,
+          onInvalid: (e) => {
+            e.preventDefault();
+            setLocalRequiredError(tv("required"));
+          },
+          className: "pointer-events-none absolute h-0 w-0 opacity-0"
+        }
+      ),
       /* @__PURE__ */ jsx37(
         "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__ */ jsx37("div", { className: cn("mt-2", sz.label, "text-destructive"), children: effectiveError })
     ] });
   }
   return /* @__PURE__ */ jsxs27("div", { className: "w-full", ...rest, children: [
@@ -11355,6 +11525,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),
@@ -11364,6 +11535,23 @@ function TimePicker({
         ]
       }
     ) }),
+    /* @__PURE__ */ jsx37(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        value: hasCommittedValue ? "selected" : "",
+        onChange: () => {
+        },
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(tv("required"));
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ jsx37(
       Popover,
       {
@@ -11377,24 +11565,24 @@ 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__ */ jsxs27("div", { className: cn("mt-2 flex items-start gap-2", sz.label), children: [
-      error && /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 text-destructive bg-destructive/10 px-3 py-1.5 rounded-lg", children: [
+    (effectiveError || success || helperText) && /* @__PURE__ */ jsxs27("div", { className: cn("mt-2 flex items-start gap-2", sz.label), children: [
+      effectiveError && /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 text-destructive bg-destructive/10 px-3 py-1.5 rounded-lg", children: [
         /* @__PURE__ */ jsx37(X11, { className: "w-3.5 h-3.5 shrink-0" }),
-        /* @__PURE__ */ jsx37("span", { className: "font-medium", children: error })
+        /* @__PURE__ */ jsx37("span", { className: "font-medium", children: effectiveError })
       ] }),
-      success && !error && /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 text-success bg-success/10 px-3 py-1.5 rounded-lg", children: [
+      success && !effectiveError && /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2 text-success bg-success/10 px-3 py-1.5 rounded-lg", children: [
         /* @__PURE__ */ jsx37(Check5, { className: "w-3.5 h-3.5 shrink-0" }),
         /* @__PURE__ */ jsx37("span", { className: "font-medium", children: "Valid time selected" })
       ] }),
-      helperText && !error && !success && /* @__PURE__ */ jsx37("span", { className: "text-muted-foreground/80 italic", children: helperText })
+      helperText && !effectiveError && !success && /* @__PURE__ */ jsx37("span", { className: "text-muted-foreground/80 italic", children: helperText })
     ] })
   ] });
 }
@@ -11419,8 +11607,10 @@ 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();
   const sizeStyles8 = {
     sm: {
       trigger: "h-8 px-2.5 py-1.5 text-sm md:h-7 md:text-xs",
@@ -11459,6 +11649,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();
@@ -11515,11 +11710,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", {
@@ -11550,12 +11747,30 @@ var DateTimePicker = ({
     }
   };
   const weekdays = getWeekdays(locale);
+  const effectiveError = localRequiredError;
   return /* @__PURE__ */ jsxs28("div", { className: cn("space-y-1.5", className), children: [
-    label && /* @__PURE__ */ jsxs28("label", { className: cn(sizeStyles8[size].label, "font-medium text-foreground flex items-center gap-1", labelClassName), children: [
+    label && /* @__PURE__ */ jsxs28("label", { className: cn(sizeStyles8[size].label, "font-medium text-foreground flex items-center gap-1", effectiveError && "text-destructive", labelClassName), children: [
       label,
       " ",
       required && /* @__PURE__ */ jsx38("span", { className: "text-destructive", children: "*" })
     ] }),
+    /* @__PURE__ */ jsx38(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        value: value ? "selected" : "",
+        onChange: () => {
+        },
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(tv("required"));
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ jsxs28(
       Popover,
       {
@@ -11566,12 +11781,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__ */ jsx38("span", { className: "truncate", children: displayValue || placeholder || "Select date & time" }),
@@ -11584,6 +11802,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__ */ jsx38(X12, { className: sizeStyles8[size].icon })
@@ -11643,7 +11862,8 @@ var DateTimePicker = ({
           ] })
         ]
       }
-    )
+    ),
+    effectiveError && /* @__PURE__ */ jsx38("div", { className: "text-xs text-destructive", children: effectiveError })
   ] });
 };
 
@@ -14600,9 +14820,11 @@ 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);
+  const [localRequiredError, setLocalRequiredError] = React39.useState();
   const inputRef = React39.useRef(null);
   const listRef = React39.useRef([]);
   const optionsListRef = React39.useRef(null);
@@ -14639,6 +14861,7 @@ var MultiCombobox = ({
       onChange(value.filter((v) => v !== optionValue));
     } else {
       if (!maxSelected || value.length < maxSelected) {
+        setLocalRequiredError(void 0);
         onChange([...value, optionValue]);
       }
     }
@@ -14658,6 +14881,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(() => {
@@ -14868,7 +15097,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,
@@ -14876,7 +15106,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__ */ jsx45("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__ */ jsxs35(Fragment13, { children: [
@@ -14972,6 +15202,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: [
@@ -14989,6 +15220,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: [
@@ -14997,6 +15229,23 @@ var MultiCombobox = ({
         ]
       }
     ),
+    /* @__PURE__ */ jsx45(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        value: value.length > 0 ? "selected" : "",
+        onChange: () => {
+        },
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(tv("required"));
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ jsx45(
       Popover,
       {
@@ -15010,17 +15259,26 @@ var MultiCombobox = ({
         children: dropdownBody
       }
     ),
-    (helperText || error) && /* @__PURE__ */ jsxs35("p", { className: cn("text-xs transition-colors duration-200 flex items-center gap-1.5", error ? "text-destructive" : "text-muted-foreground"), children: [
-      error && /* @__PURE__ */ jsx45("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__ */ jsx45(
-        "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__ */ jsxs35(
+      "p",
+      {
+        className: cn(
+          "text-xs transition-colors duration-200 flex items-center gap-1.5",
+          effectiveError ? "text-destructive" : "text-muted-foreground"
+        ),
+        children: [
+          effectiveError && /* @__PURE__ */ jsx45("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__ */ jsx45(
+            "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
+        ]
+      }
+    )
   ] });
 };
 
@@ -16169,6 +16427,7 @@ function getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline)
   return parentIds;
 }
 function CategoryTreeSelect(props) {
+  const tv = useSmartTranslations("ValidationInput");
   const {
     id,
     label,
@@ -16196,14 +16455,16 @@ function CategoryTreeSelect(props) {
   const [isOpen, setIsOpen] = useState30(false);
   const [expandedNodes, setExpandedNodes] = useState30(() => getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline));
   const [query, setQuery] = useState30("");
+  const [localRequiredError, setLocalRequiredError] = useState30();
   const searchInputRef = useRef19(null);
   const dropdownViewportRef = useRef19(null);
   useOverlayScrollbarTarget(dropdownViewportRef, { enabled: useOverlayScrollbar });
   const autoId = useId9();
   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 = useMemo19(
@@ -16274,6 +16535,11 @@ function CategoryTreeSelect(props) {
     const t = setTimeout(() => searchInputRef.current?.focus(), 50);
     return () => clearTimeout(t);
   }, [isOpen, isSearchEnabled]);
+  useEffect24(() => {
+    if (disabled || !required || valueArray.length > 0) {
+      setLocalRequiredError(void 0);
+    }
+  }, [disabled, required, valueArray.length]);
   const toggleExpand = (id2) => {
     if (isSearchMode) return;
     const newExpanded = new Set(expandedNodes);
@@ -16292,6 +16558,7 @@ function CategoryTreeSelect(props) {
       toggleExpand(categoryId);
       return;
     }
+    setLocalRequiredError(void 0);
     if (!props.onChange) return;
     if (singleSelect) {
       const onChange = props.onChange;
@@ -16463,7 +16730,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: [
@@ -16472,10 +16739,27 @@ function CategoryTreeSelect(props) {
       ]
     }
   ) }) : null;
-  const renderAssistiveText = () => error ? /* @__PURE__ */ jsx49("p", { id: errorId, className: "text-sm text-destructive", children: error }) : helperText ? /* @__PURE__ */ jsx49("p", { id: helperId, className: "text-sm text-muted-foreground", children: helperText }) : null;
+  const renderAssistiveText = () => effectiveError ? /* @__PURE__ */ jsx49("p", { id: errorId, className: "text-sm text-destructive", children: effectiveError }) : helperText ? /* @__PURE__ */ jsx49("p", { id: helperId, className: "text-sm text-muted-foreground", children: helperText }) : null;
   if (viewOnly) {
     return /* @__PURE__ */ jsxs39("div", { className: cn("w-full space-y-2", className), children: [
       renderLabel(),
+      /* @__PURE__ */ jsx49(
+        "input",
+        {
+          tabIndex: -1,
+          "aria-hidden": "true",
+          value: valueArray.length > 0 ? "selected" : "",
+          onChange: () => {
+          },
+          required,
+          disabled,
+          onInvalid: (e) => {
+            e.preventDefault();
+            setLocalRequiredError(tv("required"));
+          },
+          className: "pointer-events-none absolute h-0 w-0 opacity-0"
+        }
+      ),
       /* @__PURE__ */ jsxs39(
         "div",
         {
@@ -16495,6 +16779,23 @@ function CategoryTreeSelect(props) {
   if (inline) {
     return /* @__PURE__ */ jsxs39("div", { className: cn("w-full space-y-2", className), children: [
       renderLabel(),
+      /* @__PURE__ */ jsx49(
+        "input",
+        {
+          tabIndex: -1,
+          "aria-hidden": "true",
+          value: valueArray.length > 0 ? "selected" : "",
+          onChange: () => {
+          },
+          required,
+          disabled,
+          onInvalid: (e) => {
+            e.preventDefault();
+            setLocalRequiredError(tv("required"));
+          },
+          className: "pointer-events-none absolute h-0 w-0 opacity-0"
+        }
+      ),
       /* @__PURE__ */ jsxs39(
         "div",
         {
@@ -16594,6 +16895,23 @@ function CategoryTreeSelect(props) {
   ] });
   return /* @__PURE__ */ jsxs39("div", { className: cn("w-full space-y-2", className), children: [
     renderLabel(),
+    /* @__PURE__ */ jsx49(
+      "input",
+      {
+        tabIndex: -1,
+        "aria-hidden": "true",
+        value: valueArray.length > 0 ? "selected" : "",
+        onChange: () => {
+        },
+        required,
+        disabled,
+        onInvalid: (e) => {
+          e.preventDefault();
+          setLocalRequiredError(tv("required"));
+        },
+        className: "pointer-events-none absolute h-0 w-0 opacity-0"
+      }
+    ),
     /* @__PURE__ */ jsx49(
       Popover,
       {
@@ -16620,7 +16938,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",
@@ -16629,7 +16948,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__ */ jsxs39("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 text-left", children: [
@@ -20624,7 +20943,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"
                   )
                 }
@@ -23903,7 +24222,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"
                 )
               },