@underverse-ui/underverse 1.0.91 → 1.0.93

package/dist/index.d.cts

@@ -780,6 +780,8 @@ interface OverlayScrollbarBehavior {
     autoHideDelay: number;
     dragScroll: boolean;
     clickScroll: boolean;
+    overflowX: "hidden" | "visible" | "scroll" | "visible-hidden" | "visible-scroll";
+    overflowY: "hidden" | "visible" | "scroll" | "visible-hidden" | "visible-scroll";
     exclude: string;
 }
 
@@ -790,7 +792,7 @@ interface OverlayScrollbarProviderProps extends Partial<OverlayScrollbarBehavior
 }
 interface UseOverlayScrollbarTargetOptions extends Partial<OverlayScrollbarBehavior> {
 }
-declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, exclude, selector, children, }?: OverlayScrollbarProviderProps): react_jsx_runtime.JSX.Element;
+declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, overflowX, overflowY, exclude, selector, children, }?: OverlayScrollbarProviderProps): react_jsx_runtime.JSX.Element;
 declare function useOverlayScrollbarTarget<T extends HTMLElement>(targetRef: React__default.RefObject<T | null>, options?: UseOverlayScrollbarTargetOptions): void;
 
 interface OverlayScrollAreaProps extends React__default.HTMLAttributes<HTMLDivElement> {
@@ -2249,6 +2251,7 @@ declare const loading: LoadingManager;
 type FilterType = "text" | "select" | "date";
 type DataTableSize = "sm" | "md" | "lg";
 type DataTableDensity = "compact" | "normal" | "comfortable";
+type DataTableHorizontalMode = "auto" | "scroll" | "fit";
 type DataTableColumn<T> = {
     key: string;
     title: React__default.ReactNode;
@@ -2324,6 +2327,13 @@ interface DataTableProps<T> {
     stickyHeader?: boolean;
     /** Chiều cao tối đa của bảng khi bật stickyHeader (mặc định: 500px) */
     maxHeight?: number | string;
+    /**
+     * Horizontal sizing strategy for the table viewport.
+     * - "auto": default, prefer fitting the container and only scroll when content truly overflows
+     * - "scroll": preserve explicit column widths and force horizontal scrolling via min-width aggregation
+     * - "fit": use fixed table layout and suppress horizontal scrolling
+     */
+    horizontalMode?: DataTableHorizontalMode;
     /** Clip overflow của outer wrapper. Tắt khi cần cho phép shadow/focus ring tràn ra ngoài. */
     overflowHidden?: boolean;
     /** Enable OverlayScrollbars on table viewport. Default: false */
@@ -2333,7 +2343,7 @@ interface DataTableProps<T> {
     labels?: DataTableLabels;
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, overflowHidden, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
     containerClassName?: string;

package/dist/index.d.ts

@@ -780,6 +780,8 @@ interface OverlayScrollbarBehavior {
     autoHideDelay: number;
     dragScroll: boolean;
     clickScroll: boolean;
+    overflowX: "hidden" | "visible" | "scroll" | "visible-hidden" | "visible-scroll";
+    overflowY: "hidden" | "visible" | "scroll" | "visible-hidden" | "visible-scroll";
     exclude: string;
 }
 
@@ -790,7 +792,7 @@ interface OverlayScrollbarProviderProps extends Partial<OverlayScrollbarBehavior
 }
 interface UseOverlayScrollbarTargetOptions extends Partial<OverlayScrollbarBehavior> {
 }
-declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, exclude, selector, children, }?: OverlayScrollbarProviderProps): react_jsx_runtime.JSX.Element;
+declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, overflowX, overflowY, exclude, selector, children, }?: OverlayScrollbarProviderProps): react_jsx_runtime.JSX.Element;
 declare function useOverlayScrollbarTarget<T extends HTMLElement>(targetRef: React__default.RefObject<T | null>, options?: UseOverlayScrollbarTargetOptions): void;
 
 interface OverlayScrollAreaProps extends React__default.HTMLAttributes<HTMLDivElement> {
@@ -2249,6 +2251,7 @@ declare const loading: LoadingManager;
 type FilterType = "text" | "select" | "date";
 type DataTableSize = "sm" | "md" | "lg";
 type DataTableDensity = "compact" | "normal" | "comfortable";
+type DataTableHorizontalMode = "auto" | "scroll" | "fit";
 type DataTableColumn<T> = {
     key: string;
     title: React__default.ReactNode;
@@ -2324,6 +2327,13 @@ interface DataTableProps<T> {
     stickyHeader?: boolean;
     /** Chiều cao tối đa của bảng khi bật stickyHeader (mặc định: 500px) */
     maxHeight?: number | string;
+    /**
+     * Horizontal sizing strategy for the table viewport.
+     * - "auto": default, prefer fitting the container and only scroll when content truly overflows
+     * - "scroll": preserve explicit column widths and force horizontal scrolling via min-width aggregation
+     * - "fit": use fixed table layout and suppress horizontal scrolling
+     */
+    horizontalMode?: DataTableHorizontalMode;
     /** Clip overflow của outer wrapper. Tắt khi cần cho phép shadow/focus ring tràn ra ngoài. */
     overflowHidden?: boolean;
     /** Enable OverlayScrollbars on table viewport. Default: false */
@@ -2333,7 +2343,7 @@ interface DataTableProps<T> {
     labels?: DataTableLabels;
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, overflowHidden, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
     containerClassName?: string;

package/dist/index.js

@@ -1879,6 +1879,8 @@ var DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR = {
   autoHideDelay: 600,
   dragScroll: true,
   clickScroll: false,
+  overflowX: "scroll",
+  overflowY: "scroll",
   exclude: DEFAULT_OVERLAY_SCROLLBAR_EXCLUDE
 };
 function resolveOverlayScrollbarBehavior(overrides = {}) {
@@ -1889,6 +1891,10 @@ function resolveOverlayScrollbarBehavior(overrides = {}) {
 }
 function buildOverlayScrollbarOptions(config) {
   return {
+    overflow: {
+      x: config.overflowX,
+      y: config.overflowY
+    },
     scrollbars: {
       theme: config.theme,
       visibility: config.visibility,
@@ -2033,6 +2039,8 @@ function OverlayScrollbarProvider({
   autoHideDelay = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.autoHideDelay,
   dragScroll = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.dragScroll,
   clickScroll = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.clickScroll,
+  overflowX = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.overflowX,
+  overflowY = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.overflowY,
   exclude = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.exclude,
   selector,
   children
@@ -2046,9 +2054,11 @@ function OverlayScrollbarProvider({
       autoHideDelay,
       dragScroll,
       clickScroll,
+      overflowX,
+      overflowY,
       exclude
     }),
-    [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, exclude]
+    [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, overflowX, overflowY, exclude]
   );
   void selector;
   return /* @__PURE__ */ jsx8(OverlayScrollbarConfigContext.Provider, { value, children: children ?? null });
@@ -2062,6 +2072,8 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
   const autoHideDelay = options.autoHideDelay ?? inherited.autoHideDelay;
   const dragScroll = options.dragScroll ?? inherited.dragScroll;
   const clickScroll = options.clickScroll ?? inherited.clickScroll;
+  const overflowX = options.overflowX ?? inherited.overflowX;
+  const overflowY = options.overflowY ?? inherited.overflowY;
   const exclude = options.exclude ?? inherited.exclude;
   const resolved = useMemo2(
     () => resolveOverlayScrollbarBehavior({
@@ -2072,9 +2084,11 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
       autoHideDelay,
       dragScroll,
       clickScroll,
+      overflowX,
+      overflowY,
       exclude
     }),
-    [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, exclude]
+    [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, overflowX, overflowY, exclude]
   );
   useEffect2(() => {
     if (typeof window === "undefined") return;
@@ -2099,6 +2113,8 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
     resolved.autoHideDelay,
     resolved.dragScroll,
     resolved.clickScroll,
+    resolved.overflowX,
+    resolved.overflowY,
     resolved.exclude
   ]);
 }
@@ -9553,7 +9569,7 @@ function WheelColumn({
           ref: scrollRef,
           className: cn(
             "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
-            "select-none cursor-grab active:cursor-grabbing",
+            "select-none",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-xl",
             "[scrollbar-width:none] [-ms-overflow-style:none]",
             "[&::-webkit-scrollbar]:hidden"
@@ -9564,15 +9580,7 @@ function WheelColumn({
           tabIndex: focused ? 0 : -1,
           onKeyDown: (e) => onKeyDown(e, column),
           onFocus: () => setFocusedColumn(column),
-          onScroll: () => {
-            if (draggingRef.current) return;
-            if (inertialRef.current) return;
-            handleScroll();
-          },
-          onPointerDown,
-          onPointerMove,
-          onPointerUp: (e) => endDrag(e.pointerId),
-          onPointerCancel: (e) => endDrag(e.pointerId),
+          onScroll: handleScroll,
           children: /* @__PURE__ */ jsx35("div", { children: extendedItems.map((n, index) => {
             const dist = Math.abs(index - currentVirtual);
             const distForVisual = Math.min(dist, 2);
@@ -11035,7 +11043,7 @@ function WheelColumn2({
           ref: scrollRef,
           className: cn(
             "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
-            "select-none cursor-grab active:cursor-grabbing",
+            "select-none",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-xl",
             "[scrollbar-width:none] [-ms-overflow-style:none]",
             "[&::-webkit-scrollbar]:hidden"
@@ -11046,15 +11054,7 @@ function WheelColumn2({
           tabIndex: focused ? 0 : -1,
           onKeyDown: (e) => onKeyDown(e, column),
           onFocus: () => setFocusedColumn(column),
-          onScroll: () => {
-            if (draggingRef.current) return;
-            if (inertialRef.current) return;
-            handleScroll();
-          },
-          onPointerDown,
-          onPointerMove,
-          onPointerUp: (e) => endDrag(e.pointerId),
-          onPointerCancel: (e) => endDrag(e.pointerId),
+          onScroll: handleScroll,
           children: /* @__PURE__ */ jsx37("div", { children: extendedItems.map((n, index) => {
             const dist = Math.abs(index - currentVirtual);
             const distForVisual = Math.min(dist, 2);
@@ -11129,6 +11129,14 @@ function formatTime2({ h, m, s, p }, fmt, includeSeconds) {
   const base2 = `${pad(h)}:${pad(m)}`;
   return includeSeconds ? `${base2}:${pad(s)}` : base2;
 }
+function isCompleteTimeInput(input, fmt, includeSeconds) {
+  const trimmed = input.trim().toUpperCase();
+  if (!trimmed) return false;
+  if (fmt === "12") {
+    return includeSeconds ? /^\d{1,2}:\d{2}:\d{2}\s?(AM|PM)$/.test(trimmed) : /^\d{1,2}:\d{2}\s?(AM|PM)$/.test(trimmed);
+  }
+  return includeSeconds ? /^\d{1,2}:\d{2}:\d{2}$/.test(trimmed) : /^\d{1,2}:\d{2}$/.test(trimmed);
+}
 var PRESETS = {
   morning: { h: 9, m: 0, s: 0, icon: Coffee, label: "Morning", color: "from-amber-400 to-orange-400" },
   afternoon: { h: 14, m: 0, s: 0, icon: Sun, label: "Afternoon", color: "from-yellow-400 to-amber-400" },
@@ -11170,24 +11178,38 @@ function TimePicker({
   ...rest
 }) {
   const tv = useSmartTranslations("ValidationInput");
+  const autoId = React31.useId();
   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() });
   const [open, setOpen] = React31.useState(false);
   const [parts, setParts] = React31.useState(initial);
-  const [manualInput, setManualInput] = React31.useState("");
+  const [manualInput, setManualInput] = React31.useState(formatTime2(initial, format, includeSeconds));
+  const [isDirectEditing, setIsDirectEditing] = React31.useState(false);
   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);
+  const periodRef = React31.useRef(null);
+  const directEditInputRef = React31.useRef(null);
+  const triggerId = `time-picker-trigger-${autoId}`;
+  const labelId = label ? `time-picker-label-${autoId}` : void 0;
   React31.useEffect(() => {
     if (isControlled) {
       const parsed = parseTime(value, format, includeSeconds);
       if (parsed) setParts(parsed);
     }
   }, [value, isControlled, format, includeSeconds]);
+  React31.useEffect(() => {
+    setManualInput(formatTime2(parts, format, includeSeconds));
+  }, [format, includeSeconds, parts]);
+  React31.useEffect(() => {
+    if (!isDirectEditing) return;
+    directEditInputRef.current?.focus();
+    directEditInputRef.current?.select();
+  }, [isDirectEditing]);
   React31.useEffect(() => {
     if (isControlled) {
       setHasCommittedValue(Boolean(value));
@@ -11278,6 +11300,15 @@ function TimePicker({
       setLocalRequiredError(void 0);
     }
   }, [disabled, hasCommittedValue, required]);
+  const focusColumn = React31.useCallback((column) => {
+    if (!column) return;
+    const target = column === "hour" ? hourScrollRef.current : column === "minute" ? minuteScrollRef.current : column === "second" ? secondScrollRef.current : periodRef.current;
+    target?.focus({ preventScroll: true });
+  }, []);
+  React31.useEffect(() => {
+    if (variant !== "inline" && !open) return;
+    focusColumn(focusedColumn);
+  }, [focusColumn, focusedColumn, open, variant]);
   const handleKeyDown2 = (e, column) => {
     if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(e.key)) return;
     e.preventDefault();
@@ -11321,6 +11352,7 @@ function TimePicker({
     }
     tryUpdate(newParts);
   };
+  const display = formatTime2(parts, format, includeSeconds);
   const setNow = () => {
     const now2 = /* @__PURE__ */ new Date();
     const h = now2.getHours();
@@ -11346,6 +11378,7 @@ function TimePicker({
   };
   const handleManualInput = (input) => {
     setManualInput(input);
+    if (!isCompleteTimeInput(input, format, includeSeconds)) return;
     const parsed = parseTime(input, format, includeSeconds);
     if (parsed) {
       const timeStr = formatTime2(parsed, format, includeSeconds);
@@ -11354,6 +11387,53 @@ function TimePicker({
       }
     }
   };
+  const commitManualInput = React31.useCallback(
+    (input) => {
+      const trimmed = input.trim();
+      if (!trimmed) {
+        setManualInput(display);
+        return false;
+      }
+      if (!isCompleteTimeInput(trimmed, format, includeSeconds)) {
+        setManualInput(display);
+        return false;
+      }
+      const parsed = parseTime(trimmed, format, includeSeconds);
+      if (!parsed) {
+        setManualInput(display);
+        return false;
+      }
+      const timeStr = formatTime2(parsed, format, includeSeconds);
+      if (!isTimeInRange(timeStr) || isTimeDisabled(timeStr)) {
+        setManualInput(display);
+        return false;
+      }
+      const updated = tryUpdate(parsed);
+      if (!updated) {
+        setManualInput(display);
+        return false;
+      }
+      setManualInput(timeStr);
+      return true;
+    },
+    [display, format, includeSeconds, isTimeDisabled, isTimeInRange, tryUpdate]
+  );
+  const startDirectEdit = React31.useCallback(() => {
+    if (disabled) return;
+    setManualInput(display);
+    setIsDirectEditing(true);
+  }, [disabled, display]);
+  const stopDirectEdit = React31.useCallback(
+    (mode) => {
+      if (mode === "commit") {
+        commitManualInput(manualInput);
+      } else {
+        setManualInput(display);
+      }
+      setIsDirectEditing(false);
+    },
+    [commitManualInput, display, manualInput]
+  );
   const handleCustomPreset = (time) => {
     const parsed = parseTime(time, format, includeSeconds);
     if (parsed) {
@@ -11421,13 +11501,14 @@ function TimePicker({
   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",
     {
+      id: triggerId,
       type: "button",
       disabled,
       "aria-label": "Select time",
+      "aria-labelledby": labelId,
       "aria-haspopup": "dialog",
       "aria-expanded": open,
       "aria-required": required,
@@ -11464,10 +11545,10 @@ function TimePicker({
             {
               className: cn(
                 "truncate font-medium transition-colors duration-200",
-                !value && !defaultValue && "text-muted-foreground",
-                value || defaultValue ? "text-foreground" : ""
+                !hasCommittedValue && "text-muted-foreground",
+                hasCommittedValue ? "text-foreground" : ""
               ),
-              children: value || defaultValue ? display : placeholder
+              children: hasCommittedValue ? display : placeholder
             }
           )
         ] }),
@@ -11487,13 +11568,51 @@ function TimePicker({
     tryUpdate(next);
   };
   const timePickerContent = /* @__PURE__ */ jsxs27("div", { className: cn(panelSz.stackGap, compactPanel && "space-y-2.5"), children: [
-    /* @__PURE__ */ jsx37("div", { className: cn("flex items-center justify-center py-1", compactPanel && "py-0.5"), children: /* @__PURE__ */ jsx37("span", { className: cn(panelSz.timeText, "font-bold tabular-nums tracking-wide text-foreground underline underline-offset-8 decoration-primary/60"), children: display }) }),
+    /* @__PURE__ */ jsx37("div", { className: cn("flex items-center justify-center py-1", compactPanel && "py-0.5"), children: isDirectEditing ? /* @__PURE__ */ jsx37(
+      "input",
+      {
+        ref: directEditInputRef,
+        type: "text",
+        value: manualInput,
+        onChange: (e) => setManualInput(e.target.value),
+        onBlur: () => stopDirectEdit("commit"),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            stopDirectEdit("commit");
+          }
+          if (e.key === "Escape") {
+            e.preventDefault();
+            stopDirectEdit("cancel");
+          }
+        },
+        "aria-label": "Edit time value",
+        className: cn(
+          panelSz.timeText,
+          "min-w-0 w-36 bg-transparent border-b border-primary/60 text-center font-bold tabular-nums tracking-wide text-foreground",
+          "focus:outline-none focus:border-primary"
+        )
+      }
+    ) : /* @__PURE__ */ jsx37(
+      "button",
+      {
+        type: "button",
+        onClick: startDirectEdit,
+        className: cn(
+          panelSz.timeText,
+          "font-bold tabular-nums tracking-wide text-foreground underline underline-offset-8 decoration-primary/60",
+          "rounded-md px-2 transition-colors hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+        ),
+        "aria-label": "Edit selected time",
+        children: display
+      }
+    ) }),
     allowManualInput && /* @__PURE__ */ jsxs27("div", { className: "relative", children: [
       /* @__PURE__ */ jsx37(
         Input_default,
         {
           placeholder: format === "12" ? "02:30 PM" : "14:30",
-          value: manualInput || display,
+          value: manualInput,
           onChange: (e) => handleManualInput(e.target.value),
           size: panelSz.inputSize,
           variant: "outlined",
@@ -11643,9 +11762,11 @@ function TimePicker({
             /* @__PURE__ */ jsx37(
               "div",
               {
+                ref: periodRef,
                 className: cn("flex flex-col p-1 rounded-xl bg-muted/30", panelSz.periodGap),
                 role: "radiogroup",
                 "aria-label": "Select AM or PM",
+                "aria-labelledby": labelId,
                 tabIndex: focusedColumn === "period" ? 0 : -1,
                 onKeyDown: (e) => handleKeyDown2(e, "period"),
                 onFocus: () => setFocusedColumn("period"),
@@ -11741,10 +11862,17 @@ 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", effectiveError && "text-destructive"), children: [
-        label,
-        required && /* @__PURE__ */ jsx37("span", { className: "text-destructive ml-1", children: "*" })
-      ] }) }),
+      label && /* @__PURE__ */ jsx37("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxs27(
+        "label",
+        {
+          id: labelId,
+          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",
         {
@@ -11781,6 +11909,8 @@ function TimePicker({
     label && /* @__PURE__ */ jsx37("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs27(
       "label",
       {
+        id: labelId,
+        htmlFor: triggerId,
         className: cn(
           sz.label,
           "font-semibold",
@@ -15046,7 +15176,7 @@ function CalendarTimeline({
 
 // src/components/MultiCombobox.tsx
 import * as React39 from "react";
-import { useId as useId7 } from "react";
+import { useId as useId8 } from "react";
 import { ChevronDown as ChevronDown4, Search as Search5, Check as Check6, SearchX as SearchX2, Loader2 as Loader24, X as X13, Sparkles as Sparkles3 } from "lucide-react";
 import { Fragment as Fragment13, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var MultiCombobox = ({
@@ -15184,7 +15314,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 = useId7();
+  const autoId = useId8();
   const resolvedId = id ? String(id) : `multicombobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
@@ -16688,7 +16818,7 @@ function OverlayControls({
 }
 
 // src/components/CategoryTreeSelect.tsx
-import { useEffect as useEffect25, useId as useId9, useMemo as useMemo19, useRef as useRef19, useState as useState31 } from "react";
+import { useEffect as useEffect25, useId as useId10, useMemo as useMemo19, useRef as useRef19, useState as useState31 } from "react";
 import { ChevronRight as ChevronRight6, ChevronDown as ChevronDown5, FolderTree, Layers, Search as Search6, SearchX as SearchX3, X as X14 } from "lucide-react";
 import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 var defaultLabels = {
@@ -16745,7 +16875,7 @@ function CategoryTreeSelect(props) {
   const searchInputRef = useRef19(null);
   const dropdownViewportRef = useRef19(null);
   useOverlayScrollbarTarget(dropdownViewportRef, { enabled: useOverlayScrollbar });
-  const autoId = useId9();
+  const autoId = useId10();
   const resolvedId = id ? String(id) : `category-tree-select-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const effectiveError = error ?? localRequiredError;
@@ -20507,7 +20637,7 @@ var MusicPlayer = ({
 var MusicPlayer_default = MusicPlayer;
 
 // src/components/Grid.tsx
-import React51, { useId as useId10 } from "react";
+import React51, { useId as useId11 } from "react";
 import { Fragment as Fragment20, jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
@@ -20572,7 +20702,7 @@ var GridRoot = React51.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const id = useId10().replace(/[:]/g, "");
+    const id = useId11().replace(/[:]/g, "");
     const baseClass = `uv-grid-${id}`;
     const baseCols = toTemplateCols(columns, minColumnWidth);
     const baseRows = toTemplateRows(rows);
@@ -20793,7 +20923,7 @@ var LoadingBar = ({
 // src/components/Table.tsx
 import React52 from "react";
 import { jsx as jsx62, jsxs as jsxs51 } from "react/jsx-runtime";
-var TABLE_BASE_CLASS = "w-full caption-bottom text-sm";
+var TABLE_BASE_CLASS = "w-full border-collapse caption-bottom text-sm";
 var TABLE_CONTAINER_BASE_CLASS = [
   "relative w-full overflow-auto",
   "rounded-2xl md:rounded-3xl border border-border/50",
@@ -21228,6 +21358,7 @@ function DataTableHeader({
     const prevCol = prevCell?.column;
     const isAfterFixedLeft = prevCol?.fixed === "left";
     const showBorderLeft = columnDividers && cellIndex > 0 && !isAfterFixedLeft && !col.fixed;
+    const isLastCell = cellIndex === row.length - 1;
     return /* @__PURE__ */ jsxs53(
       TableHead,
       {
@@ -21267,7 +21398,8 @@ function DataTableHeader({
                     onAutoFitColumn?.(col.key);
                   },
                   className: cn(
-                    "absolute inset-y-0 right-0 z-10 w-3 -mr-1",
+                    "absolute inset-y-0 right-0 z-10 w-3",
+                    !isLastCell && "-mr-1",
                     "cursor-col-resize select-none bg-transparent",
                     "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"
@@ -22038,6 +22170,7 @@ function DataTable({
   storageKey,
   stickyHeader = true,
   maxHeight = 500,
+  horizontalMode = "auto",
   overflowHidden = true,
   useOverlayScrollbar = false,
   enableHeaderAutoFit = true,
@@ -22111,6 +22244,10 @@ function DataTable({
     total
   });
   const { getStickyCellClass, getStickyColumnStyle, getStickyHeaderClass, getStickyHeaderCellStyle } = useStickyColumns(visibleColumns);
+  const shouldForceHorizontalScroll = horizontalMode === "scroll";
+  const shouldUseFixedLayout = horizontalMode !== "auto";
+  const viewportOverflowXClass = horizontalMode === "fit" ? "overflow-x-hidden" : "overflow-x-auto";
+  const overlayOverflowX = horizontalMode === "fit" ? "hidden" : "scroll";
   const getRowKey = (row, idx) => {
     if (!rowKey) return String(idx);
     if (typeof rowKey === "function") return String(rowKey(row));
@@ -22118,7 +22255,10 @@ function DataTable({
   };
   const viewportRef = React62.useRef(null);
   const tableRef = React62.useRef(null);
-  useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
+  useOverlayScrollbarTarget(viewportRef, {
+    enabled: useOverlayScrollbar,
+    overflowX: overlayOverflowX
+  });
   const autoFitColumn = React62.useCallback((columnKey) => {
     const tableElement = tableRef.current;
     if (!tableElement) return;
@@ -22180,7 +22320,7 @@ function DataTable({
           "div",
           {
             ref: viewportRef,
-            className: cn("w-full overflow-x-auto", stickyHeader && "overflow-y-auto"),
+            className: cn("w-full", viewportOverflowXClass, stickyHeader && "overflow-y-auto"),
             style: stickyHeader ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
             children: /* @__PURE__ */ jsxs56(
               Table,
@@ -22188,10 +22328,10 @@ function DataTable({
                 ref: tableRef,
                 disableContainer: true,
                 className: cn(
-                  "table-fixed",
+                  shouldUseFixedLayout ? "table-fixed" : "table-auto",
                   stickyHeader && ["[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-20", "[&_thead]:shadow-[0_1px_3px_rgba(0,0,0,0.1)]"]
                 ),
-                style: { minWidth: totalColumnsWidth > 0 ? `${totalColumnsWidth}px` : void 0 },
+                style: { minWidth: shouldForceHorizontalScroll && totalColumnsWidth > 0 ? `${totalColumnsWidth}px` : void 0 },
                 children: [
                   /* @__PURE__ */ jsx67(TableHeader, { children: /* @__PURE__ */ jsx67(
                     DataTableHeader,