@underverse-ui/underverse 1.0.211 → 2.0.1

package/dist/index.js

@@ -4,19 +4,19 @@ import {
   extractImageSrcsFromHtml,
   normalizeImageUrl,
   prepareUEditorContentForSave
-} from "./chunk-4E43DRP2.js";
+} from "./chunk-Y7SQKJ7X.js";
 import {
   EmojiPicker_default
-} from "./chunk-F6A7HJE4.js";
+} from "./chunk-A7XL4RDV.js";
 import {
   getEmojiImageUrl,
   getEmojiUnifiedCode,
   setEmojiBaseUrl
-} from "./chunk-CYCBSKWI.js";
+} from "./chunk-KGNYK5YF.js";
 import "./chunk-4TYW5K4J.js";
 import {
   Modal_default
-} from "./chunk-GKY5DHGR.js";
+} from "./chunk-UNDGI6ZI.js";
 import {
   DropdownMenuItem,
   DropdownMenuSeparator,
@@ -34,7 +34,7 @@ import {
   shadcnAnimationStyles,
   useShadCNAnimations,
   useUnderverseUIConfig
-} from "./chunk-AMAILXHP.js";
+} from "./chunk-Z6WE65J2.js";
 import {
   ForceInternalTranslationsProvider,
   NextIntlAdapter,
@@ -54,7 +54,7 @@ import {
   useUnderverseLocale,
   useUnderverseTranslations,
   vi_default
-} from "./chunk-BRDGIALS.js";
+} from "./chunk-PLHJWXCW.js";
 import {
   __export,
   __require
@@ -846,19 +846,7 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
     return () => {
       controller.destroy();
     };
-  }, [
-    targetRef,
-    resolved.enabled,
-    resolved.theme,
-    resolved.visibility,
-    resolved.autoHide,
-    resolved.autoHideDelay,
-    resolved.dragScroll,
-    resolved.clickScroll,
-    resolved.overflowX,
-    resolved.overflowY,
-    resolved.exclude
-  ]);
+  }, [resolved, targetRef]);
 }
 var OverlayScrollbarProvider_default = OverlayScrollbarProvider;
 
@@ -4220,19 +4208,19 @@ var variantStyles4 = {
   },
   underline: {
     container: "relative border-b border-border/60",
-    tab: "relative transition-colors duration-200 pb-3 border-b-2 border-transparent hover:border-primary/30",
+    tab: "relative transition-colors duration-200 border-b-2 border-transparent hover:border-primary/30",
     activeTab: "text-primary border-primary font-semibold",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   },
   card: {
-    container: "space-y-1.5 bg-muted/20 p-2 rounded-2xl border border-border/30",
+    container: "bg-muted/20 p-1.5 rounded-2xl border border-border/30",
     tab: "rounded-xl border border-transparent transition-all duration-200",
     activeTab: "bg-primary text-primary-foreground border-primary shadow-md",
     inactiveTab: "text-muted-foreground hover:text-foreground hover:bg-accent/50 hover:border-border/50"
   },
   "underline-card": {
     container: "border-b border-border/60 bg-card/80 backdrop-blur-sm rounded-t-2xl p-1",
-    tab: "relative transition-all duration-200 pb-3 px-4 rounded-t-xl border-b-2 border-transparent hover:border-primary/30 hover:bg-accent/30",
+    tab: "relative transition-all duration-200 rounded-t-xl border-b-2 border-transparent hover:border-primary/30 hover:bg-accent/30",
     activeTab: "text-primary border-primary font-semibold bg-accent/30",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   }
@@ -4342,7 +4330,7 @@ var Tabs = ({
   }, [baseId, tabs]);
   const containerClasses = cn(
     "relative",
-    orientation === "horizontal" ? "w-full flex space-x-1 overflow-x-auto" : "flex flex-col space-y-1 shrink-0",
+    orientation === "horizontal" ? "w-full flex items-center space-x-1 overflow-x-auto" : "flex flex-col space-y-1 shrink-0",
     variantStyles4[variant].container,
     className
   );
@@ -4377,10 +4365,7 @@ var Tabs = ({
           tab.href && tab.disabled && "pointer-events-none cursor-not-allowed opacity-50"
         );
         const sharedStyle = {
-          boxShadow: "none",
-          transform: "none",
-          outline: "none",
-          border: "none"
+          outline: "none"
         };
         const sharedProps = {
           ref: (el) => {
@@ -5799,6 +5784,10 @@ import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, S
 import * as React23 from "react";
 import { useId as useId5 } from "react";
 import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+function normalizeToLocalDate(date) {
+  if (!date) return null;
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
 var DatePicker = ({
   id,
   value,
@@ -5832,16 +5821,15 @@ var DatePicker = ({
   const [isFocused, setIsFocused] = React23.useState(false);
   const [inputValue, setInputValue] = React23.useState("");
   React23.useEffect(() => {
-    if (value) {
-      const parsed = parseDateString(inputValue, locale);
-      const isSame = parsed && parsed.getTime() === value.getTime();
-      if (!isSame) {
-        setInputValue(formatDateShort(value, locale));
+    setInputValue((currentInput) => {
+      if (value) {
+        const parsed = parseDateString(currentInput, locale);
+        const isSame = parsed && parsed.getTime() === value.getTime();
+        return isSame ? currentInput : formatDateShort(value, locale);
       }
-    } else if (!isFocused) {
-      setInputValue("");
-    }
-  }, [value, locale, isFocused]);
+      return isFocused ? currentInput : "";
+    });
+  }, [isFocused, locale, value]);
   const handleInputChange = (e) => {
     const text = e.target.value;
     setInputValue(text);
@@ -5860,7 +5848,7 @@ var DatePicker = ({
       if (required) {
         setLocalRequiredError(tv("required"));
       } else {
-        onChange(void 0);
+        if (value) onChange(void 0);
         setLocalRequiredError(void 0);
       }
     } else {
@@ -6258,6 +6246,7 @@ var DatePicker = ({
   const autoId = useId5();
   const resolvedId = id ? String(id) : `datepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
+  const panelId = `${resolvedId}-panel`;
   const labelSize = sizeStyles7[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";
@@ -6306,6 +6295,7 @@ var DatePicker = ({
       {
         open: isOpen,
         onOpenChange: setIsOpen,
+        contentProps: { id: panelId },
         placement: "bottom-start",
         disabled,
         contentWidth: sizeStyles7[size].contentWidth,
@@ -6322,12 +6312,6 @@ var DatePicker = ({
           "div",
           {
             ref: triggerRef,
-            id: resolvedId,
-            role: "button",
-            "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
-            "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",
               formControlFixedClass,
@@ -6359,8 +6343,16 @@ var DatePicker = ({
                   "input",
                   {
                     ref: inputRef,
+                    id: resolvedId,
                     type: "text",
+                    role: "combobox",
                     "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
+                    "aria-labelledby": labelId,
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": isOpen,
+                    "aria-controls": panelId,
+                    "aria-required": required,
+                    "aria-invalid": !!effectiveError,
                     disabled,
                     placeholder: placeholder || t("placeholder"),
                     value: isFocused ? inputValue : value ? formatDateDisplay(value) : "",
@@ -6467,19 +6459,18 @@ var DateRangePicker = ({
     return `${startStr} - ${formatDateShort(e, locale)}`;
   }, [locale]);
   React23.useEffect(() => {
-    if (startDate) {
-      const parts = inputValue.split(/\s*-\s*/);
-      const inputStart = parts[0] ? parseDateString(parts[0], locale) : null;
-      const inputEnd = parts[1] ? parseDateString(parts[1], locale) : null;
-      const startSame = inputStart && startDate && inputStart.getTime() === startDate.getTime();
-      const endSame = !endDate && !inputEnd || endDate && inputEnd && endDate.getTime() === inputEnd.getTime();
-      if (!(startSame && endSame)) {
-        setInputValue(getRangeString(startDate, endDate));
-      }
-    } else if (!isFocused) {
-      setInputValue("");
-    }
-  }, [startDate, endDate, locale, isFocused, getRangeString]);
+    setInputValue((currentInput) => {
+      if (startDate) {
+        const parts = currentInput.split(/\s*-\s*/);
+        const inputStart = parts[0] ? parseDateString(parts[0], locale) : null;
+        const inputEnd = parts[1] ? parseDateString(parts[1], locale) : null;
+        const startSame = inputStart && inputStart.getTime() === startDate.getTime();
+        const endSame = !endDate && !inputEnd || endDate && inputEnd && endDate.getTime() === inputEnd.getTime();
+        return startSame && endSame ? currentInput : getRangeString(startDate, endDate);
+      }
+      return isFocused ? currentInput : "";
+    });
+  }, [endDate, getRangeString, isFocused, locale, startDate]);
   const handleInputChange = (e) => {
     const text = e.target.value;
     setInputValue(text);
@@ -6528,7 +6519,7 @@ var DateRangePicker = ({
       } else {
         setTempStart(null);
         setTempEnd(null);
-        onChange(void 0, void 0);
+        if (startDate || endDate) onChange(void 0, void 0);
         setLocalRequiredError(void 0);
       }
     } else {
@@ -6559,8 +6550,8 @@ var DateRangePicker = ({
         }
       }
       if (startDate) {
-        setTempStart(normalizeToLocal(startDate));
-        setTempEnd(normalizeToLocal(endDate));
+        setTempStart(normalizeToLocalDate(startDate));
+        setTempEnd(normalizeToLocalDate(endDate));
         setInputValue(getRangeString(startDate, endDate));
         setLocalRequiredError(void 0);
       } else {
@@ -6664,21 +6655,17 @@ var DateRangePicker = ({
       footerMargin: "mt-5 pt-4 gap-2.5"
     }
   };
-  const normalizeToLocal = (date) => {
-    if (!date) return null;
-    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-  };
-  const minDay = React23.useMemo(() => normalizeToLocal(minDate), [minDate]);
-  const maxDay = React23.useMemo(() => normalizeToLocal(maxDate), [maxDate]);
+  const minDay = normalizeToLocalDate(minDate);
+  const maxDay = normalizeToLocalDate(maxDate);
   const [viewDate, setViewDate] = React23.useState(startDate || /* @__PURE__ */ new Date());
-  const [tempStart, setTempStart] = React23.useState(normalizeToLocal(startDate));
-  const [tempEnd, setTempEnd] = React23.useState(normalizeToLocal(endDate));
+  const [tempStart, setTempStart] = React23.useState(normalizeToLocalDate(startDate));
+  const [tempEnd, setTempEnd] = React23.useState(normalizeToLocalDate(endDate));
   const [hoveredDate, setHoveredDate] = React23.useState(null);
   React23.useEffect(() => {
-    setTempStart(normalizeToLocal(startDate));
+    setTempStart(normalizeToLocalDate(startDate));
   }, [startDate]);
   React23.useEffect(() => {
-    setTempEnd(normalizeToLocal(endDate));
+    setTempEnd(normalizeToLocalDate(endDate));
   }, [endDate]);
   React23.useEffect(() => {
     if (!isOpen) {
@@ -6697,12 +6684,12 @@ var DateRangePicker = ({
   const inRange = (d, s, e) => d > s && d < e;
   const getDaysInMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
   const getFirstDayOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1).getDay();
-  const navigateMonth = React23.useCallback((direction) => {
+  const navigateMonth = (direction) => {
     setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + (direction === "next" ? 1 : -1), 1));
-  }, []);
-  const navigateYearRange = React23.useCallback((direction) => {
+  };
+  const navigateYearRange = (direction) => {
     setViewDate((prev) => new Date(prev.getFullYear() + (direction === "next" ? 12 : -12), prev.getMonth(), 1));
-  }, []);
+  };
   const isElementVerticallyScrollable = (el) => {
     const style = window.getComputedStyle(el);
     const overflowY = style.overflowY;
@@ -6731,11 +6718,13 @@ var DateRangePicker = ({
       const steps = Math.trunc(wheelDeltaRef.current / threshold);
       wheelDeltaRef.current -= steps * threshold;
       const direction = steps > 0 ? "next" : "prev";
-      for (let i = 0; i < Math.abs(steps); i++) navigateMonth(direction);
+      for (let i = 0; i < Math.abs(steps); i++) {
+        setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + (direction === "next" ? 1 : -1), 1));
+      }
     };
     container.addEventListener("wheel", onWheel, { passive: false });
     return () => container.removeEventListener("wheel", onWheel);
-  }, [isOpen, navigateMonth]);
+  }, [isOpen]);
   const handleSelect = (date) => {
     const localDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
     if (!tempStart || tempStart && tempEnd) {
@@ -7018,6 +7007,7 @@ var DateRangePicker = ({
   const autoId = useId5();
   const resolvedId = id ? String(id) : `daterangepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
+  const panelId = `${resolvedId}-panel`;
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.borderMode ?? "full";
   return /* @__PURE__ */ jsxs20("div", { className: cn("space-y-1.5", className), children: [
@@ -7062,6 +7052,7 @@ var DateRangePicker = ({
       {
         open: isOpen,
         onOpenChange: setIsOpen,
+        contentProps: { id: panelId },
         placement: "bottom-start",
         disabled,
         contentWidth: sizeStyles7[size].contentWidth,
@@ -7077,12 +7068,6 @@ var DateRangePicker = ({
           "div",
           {
             ref: triggerRef,
-            id: resolvedId,
-            role: "button",
-            "aria-label": tempStart ? displayLabel : placeholder,
-            "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",
               formControlFixedClass,
@@ -7113,8 +7098,16 @@ var DateRangePicker = ({
                   "input",
                   {
                     ref: inputRef,
+                    id: resolvedId,
                     type: "text",
+                    role: "combobox",
                     "aria-label": tempStart ? displayLabel : placeholder,
+                    "aria-labelledby": labelId,
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": isOpen,
+                    "aria-controls": panelId,
+                    "aria-required": required,
+                    "aria-invalid": !!effectiveError,
                     disabled,
                     placeholder,
                     value: isFocused ? inputValue : tempStart ? displayLabel : "",
@@ -7949,6 +7942,7 @@ var LunarDatePicker = ({
   const autoId = useId6();
   const resolvedId = id ? String(id) : `lunar-datepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
+  const panelId = `${resolvedId}-panel`;
   const labelSize = sizeStyles7[size].label;
   const verticalGap = size === "sm" ? "space-y-1.5" : size === "lg" ? "space-y-2.5" : "space-y-2";
   const effectiveError = localRequiredError;
@@ -7994,6 +7988,7 @@ var LunarDatePicker = ({
       {
         open: isOpen,
         onOpenChange: setIsOpen,
+        contentProps: { id: panelId },
         placement: "bottom-start",
         borderMode: resolvedBorderMode,
         disabled,
@@ -8010,12 +8005,6 @@ var LunarDatePicker = ({
           "div",
           {
             ref: triggerRef,
-            id: resolvedId,
-            role: "button",
-            "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
-            "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",
               formControlFixedClass,
@@ -8047,8 +8036,16 @@ var LunarDatePicker = ({
                   "input",
                   {
                     ref: inputRef,
+                    id: resolvedId,
                     type: "text",
+                    role: "combobox",
                     "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
+                    "aria-labelledby": labelId,
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": isOpen,
+                    "aria-controls": panelId,
+                    "aria-required": required,
+                    "aria-invalid": !!effectiveError,
                     disabled,
                     placeholder: placeholder || t("placeholder"),
                     value: isFocused ? inputValue : value ? formatDateDisplay(value) : "",
@@ -8575,6 +8572,7 @@ var LunarDateRangePicker = ({
   const autoId = useId6();
   const resolvedId = id ? String(id) : `lunardaterangepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
+  const panelId = `${resolvedId}-panel`;
   return /* @__PURE__ */ jsxs21("div", { className: cn("space-y-1.5", className), children: [
     label && /* @__PURE__ */ jsxs21(
       "label",
@@ -8617,6 +8615,7 @@ var LunarDateRangePicker = ({
       {
         open: isOpen,
         onOpenChange: setIsOpen,
+        contentProps: { id: panelId },
         placement: "bottom-start",
         disabled,
         contentWidth: sizeStyles7[size].contentWidth,
@@ -8629,13 +8628,18 @@ var LunarDateRangePicker = ({
           "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
         ),
         trigger: /* @__PURE__ */ jsxs21(
-          "div",
+          "button",
           {
             ref: triggerRef,
             id: resolvedId,
-            role: "button",
+            type: "button",
+            role: "combobox",
+            disabled,
             "aria-label": tempStart ? displayLabel : placeholder,
             "aria-labelledby": labelId,
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-controls": panelId,
             "aria-required": required,
             "aria-invalid": !!effectiveError,
             className: cn(
@@ -9167,6 +9171,9 @@ function MonthYearPicker({
   const resolvedBorderMode = borderMode ?? globalConfig.input?.borderMode ?? globalConfig.borderMode ?? "full";
   const gi18n = useGlobalI18n();
   const tv = useSmartTranslations("ValidationInput");
+  const autoId = React25.useId();
+  const triggerId = `month-year-picker-trigger-${autoId}`;
+  const panelId = `${triggerId}-panel`;
   const now = /* @__PURE__ */ new Date();
   const currentYear = now.getFullYear();
   const resolvedMinYear = minYear ?? minDate?.getFullYear() ?? currentYear - 50;
@@ -9314,11 +9321,14 @@ function MonthYearPicker({
   const trigger = variant === "inline" ? null : /* @__PURE__ */ jsxs22(
     "button",
     {
+      id: triggerId,
       type: "button",
+      role: "combobox",
       disabled,
       "aria-label": gi18n.selectMonthYear ?? "Select month and year",
       "aria-haspopup": "dialog",
       "aria-expanded": open,
+      "aria-controls": panelId,
       "aria-required": required,
       "aria-invalid": !!effectiveError,
       className: cn(
@@ -9542,6 +9552,7 @@ function MonthYearPicker({
         trigger,
         open,
         onOpenChange: handleOpenChange,
+        contentProps: { id: panelId },
         placement: "bottom",
         contentWidth,
         matchTriggerWidth,
@@ -10714,6 +10725,7 @@ function TimePicker({
   const directEditInputRef = React27.useRef(null);
   const triggerId = `time-picker-trigger-${autoId}`;
   const labelId = label ? `time-picker-label-${autoId}` : void 0;
+  const panelId = `${triggerId}-panel`;
   React27.useEffect(() => {
     if (isControlled) {
       const parsed = parseTime(value, format, includeSeconds);
@@ -11024,11 +11036,13 @@ function TimePicker({
     {
       id: triggerId,
       type: "button",
+      role: "combobox",
       disabled,
       "aria-label": gi18n.selectTime ?? "Select time",
       "aria-labelledby": labelId,
       "aria-haspopup": "dialog",
       "aria-expanded": open,
+      "aria-controls": panelId,
       "aria-required": required,
       "aria-invalid": !!effectiveError,
       className: cn(
@@ -11468,6 +11482,7 @@ function TimePicker({
         trigger,
         open,
         onOpenChange: handleOpenChange,
+        contentProps: { id: panelId },
         placement: "bottom-start",
         matchTriggerWidth: shouldMatchTriggerWidth,
         contentWidth: shouldMatchTriggerWidth ? void 0 : contentWidth,
@@ -11523,6 +11538,10 @@ var DateTimePicker = ({
   const t = useSmartTranslations("DateTimePicker");
   const tv = useSmartTranslations("ValidationInput");
   const locale = useSmartLocale();
+  const autoId = React28.useId();
+  const triggerId = `date-time-picker-trigger-${autoId}`;
+  const panelId = `${triggerId}-panel`;
+  const labelId = label ? `${triggerId}-label` : void 0;
   const [open, setOpen] = React28.useState(false);
   const [localRequiredError, setLocalRequiredError] = React28.useState();
   const sizeStyles7 = {
@@ -11663,11 +11682,19 @@ var DateTimePicker = ({
   const weekdays = getWeekdays(locale);
   const effectiveError = localRequiredError;
   return /* @__PURE__ */ jsxs25("div", { className: cn("space-y-1.5", className), children: [
-    label && /* @__PURE__ */ jsxs25("label", { className: cn(sizeStyles7[size].label, "font-medium text-foreground flex items-center gap-1", effectiveError && "text-destructive", labelClassName), children: [
-      label,
-      " ",
-      required && /* @__PURE__ */ jsx32("span", { className: "text-destructive", children: "*" })
-    ] }),
+    label && /* @__PURE__ */ jsxs25(
+      "label",
+      {
+        id: labelId,
+        htmlFor: triggerId,
+        className: cn(sizeStyles7[size].label, "font-medium text-foreground flex items-center gap-1", effectiveError && "text-destructive", labelClassName),
+        children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx32("span", { className: "text-destructive", children: "*" })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx32(
       "input",
       {
@@ -11690,11 +11717,19 @@ var DateTimePicker = ({
       {
         open,
         onOpenChange: setOpen,
+        contentProps: { id: panelId },
         trigger: /* @__PURE__ */ jsxs25(
           "button",
           {
+            id: triggerId,
             type: "button",
+            role: "combobox",
             disabled,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            "aria-label": labelId ? void 0 : displayValue || placeholder || "Select date & time",
+            "aria-labelledby": labelId,
             "aria-required": required,
             "aria-invalid": !!effectiveError,
             className: cn(
@@ -14701,7 +14736,7 @@ function CalendarTimeline({
 
 // src/components/MultiCombobox.tsx
 import * as React35 from "react";
-import { useId as useId8 } from "react";
+import { useId as useId10 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { ChevronDown as ChevronDown4, Search as Search5, Check as Check6, SearchX as SearchX2, Loader2 as Loader23, X as X12, Sparkles as Sparkles3 } from "lucide-react";
 import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -14932,7 +14967,7 @@ var MultiCombobox = ({
     outline: "border-2 border-input bg-transparent hover:border-primary",
     ghost: "border border-transparent bg-muted/50 hover:bg-muted"
   };
-  const autoId = useId8();
+  const autoId = useId10();
   const resolvedId = id ? String(id) : `multicombobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = formControlSizeStyles[size].label;
@@ -15213,7 +15248,7 @@ var MultiCombobox = ({
             );
           }),
           hiddenCount > 0 && /* @__PURE__ */ jsx39("span", { className: cn("inline-flex items-center bg-muted text-muted-foreground rounded-lg shrink-0", sizeStyles7[size].tag), children: gi18n.moreCount ? gi18n.moreCount(hiddenCount) : `+${hiddenCount} more` })
-        ] }) : /* @__PURE__ */ jsx39("span", { className: cn(formControlValueClass, "font-medium"), children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ jsx39("span", { className: cn(formControlValueClass, "text-muted-foreground"), children: placeholder }) }),
+        ] }) : /* @__PURE__ */ jsx39("span", { className: cn(formControlValueClass, "font-medium"), children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ jsx39("span", { className: cn(formControlValueClass, "text-left text-muted-foreground"), children: placeholder }) }),
         /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1.5 shrink-0", children: [
           showClear && value.length > 0 && /* @__PURE__ */ jsx39(
             "div",
@@ -16637,7 +16672,7 @@ function OverlayControls({
 }
 
 // src/components/CategoryTreeSelect.tsx
-import { useEffect as useEffect20, useId as useId10, useMemo as useMemo18, useRef as useRef17, useState as useState27 } from "react";
+import { useEffect as useEffect20, useId as useId12, useMemo as useMemo18, useRef as useRef17, useState as useState27 } from "react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 import { ChevronRight as ChevronRight7, ChevronDown as ChevronDown5, FolderTree, Layers, Search as Search6, SearchX as SearchX3, X as X13 } from "lucide-react";
 import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -16807,7 +16842,7 @@ function CategoryTreeSelect(props) {
   useOverlayScrollbarTarget(dropdownViewportRef, {
     enabled: isOpen && useOverlayScrollbar && !virtualized && !inline && !viewOnly
   });
-  const autoId = useId10();
+  const autoId = useId12();
   const resolvedId = id ? String(id) : `category-tree-select-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const effectiveError = error ?? localRequiredError;
@@ -20792,7 +20827,7 @@ var MusicPlayer = ({
 var MusicPlayer_default = MusicPlayer;
 
 // src/components/Grid.tsx
-import React47, { useId as useId11 } from "react";
+import React47, { useId as useId13 } from "react";
 import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
@@ -20857,7 +20892,7 @@ var GridRoot = React47.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const id = useId11().replace(/[:]/g, "");
+    const id = useId13().replace(/[:]/g, "");
     const baseClass = `uv-grid-${id}`;
     const baseCols = toTemplateCols(columns, minColumnWidth);
     const baseRows = toTemplateRows(rows);
@@ -21624,6 +21659,7 @@ function DataTableHeader({
     },
     [
       filters,
+      gi18n,
       headerAlign,
       headerMinHeightClass,
       headerTitleClass,
@@ -21632,6 +21668,7 @@ function DataTableHeader({
       setFilters,
       setSort,
       sort,
+      sortByLabel,
       sortIconClass,
       t
     ]
@@ -22950,7 +22987,7 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
 var NotificationModal_default = NotificationModal;
 
 // src/components/AccessDenied.tsx
-import { useState as useState36, useEffect as useEffect26, useId as useId13, useRef as useRef22 } from "react";
+import { useState as useState36, useEffect as useEffect26, useId as useId15, useRef as useRef22 } from "react";
 import { jsx as jsx64, jsxs as jsxs56 } from "react/jsx-runtime";
 var VARIANT_COLOR_VARS = {
   destructive: "var(--destructive)",
@@ -22992,7 +23029,7 @@ function AccessDenied({
 }) {
   const design = VARIANT_DESIGNS[variant];
   const colorVar = VARIANT_COLOR_VARS[variant];
-  const reactId = useId13();
+  const reactId = useId15();
   const cleanId = reactId.replace(/:/g, "");
   const clipId = `white-clip-${cleanId}`;
   const textId = `text-s-${cleanId}`;