@underverse-ui/underverse 0.2.64 → 0.2.66

package/README.md

@@ -94,7 +94,31 @@ All components follow [Vercel Web Interface Guidelines](https://github.com/verce
 
 ---
 
-## 🚀 Quick Start
+## � Entry Points
+
+Package được chia thành 2 entry points để tối ưu cho Server Components:
+
+### Main Entry (Server-safe)
+
+```tsx
+// dist/index.js - Các components không phụ thuộc react-hook-form
+// Có thể sử dụng trong cả Server Components và Client Components
+import { Button, Skeleton, DatePicker, DataTable } from "@underverse-ui/underverse";
+```
+
+### Form Entry (Client-only)
+
+```tsx
+// dist/form.js - Form components (phụ thuộc react-hook-form)
+// Chỉ sử dụng trong Client Components ("use client")
+import { Form, FormField, FormItem, FormLabel, FormMessage } from "@underverse-ui/underverse/form";
+```
+
+**Lưu ý:** Form components yêu cầu `react-hook-form` và `@hookform/resolvers` nên chỉ hoạt động ở client-side.
+
+---
+
+## �🚀 Quick Start
 
 ### Standalone React (Vite, CRA, etc.)
 

package/dist/index.cjs

@@ -13145,6 +13145,45 @@ function DataTable({
   const cellPadding = density === "compact" ? "py-1.5 px-3" : density === "comfortable" ? "py-3 px-4" : "py-2.5 px-4";
   const visibleColsSet = import_react32.default.useMemo(() => new Set(visibleCols), [visibleCols]);
   const visibleColumns = columns.filter((c) => visibleColsSet.has(c.key));
+  const stickyPositions = import_react32.default.useMemo(() => {
+    const positions = {};
+    let leftOffset = 0;
+    for (const col of visibleColumns) {
+      if (col.fixed === "left") {
+        positions[col.key] = { left: leftOffset };
+        const colWidth = typeof col.width === "number" ? col.width : parseInt(String(col.width) || "150", 10);
+        leftOffset += colWidth;
+      }
+    }
+    let rightOffset = 0;
+    for (let i = visibleColumns.length - 1; i >= 0; i--) {
+      const col = visibleColumns[i];
+      if (col.fixed === "right") {
+        positions[col.key] = { right: rightOffset };
+        const colWidth = typeof col.width === "number" ? col.width : parseInt(String(col.width) || "150", 10);
+        rightOffset += colWidth;
+      }
+    }
+    return positions;
+  }, [visibleColumns]);
+  const getStickyColumnClass = (col, isHeader = false) => {
+    if (!col.fixed) return "";
+    return cn(
+      "sticky z-10 bg-background",
+      col.fixed === "left" && "shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]",
+      col.fixed === "right" && "shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]",
+      isHeader && "z-20"
+      // Header cần z-index cao hơn
+    );
+  };
+  const getStickyColumnStyle = (col) => {
+    if (!col.fixed) return {};
+    const pos = stickyPositions[col.key];
+    return {
+      ...pos?.left !== void 0 && { left: pos.left },
+      ...pos?.right !== void 0 && { right: pos.right }
+    };
+  };
   const getRowKey = (row, idx) => {
     if (!rowKey) return String(idx);
     if (typeof rowKey === "function") return String(rowKey(row));
@@ -13205,12 +13244,13 @@ function DataTable({
   const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     TableHead,
     {
-      style: { width: col.width },
+      style: { width: col.width, ...getStickyColumnStyle(col) },
       className: cn(
         // Use column-specific align if defined, otherwise use global headerAlign
         (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
         (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
-        columnDividers && colIdx > 0 && "border-l border-border/60"
+        columnDividers && colIdx > 0 && "border-l border-border/60",
+        getStickyColumnClass(col, true)
       ),
       children: (() => {
         const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
@@ -13467,13 +13507,17 @@ function DataTable({
                   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                     TableCell,
                     {
+                      style: getStickyColumnStyle(col),
                       className: cn(
                         cellPadding,
                         col.align === "right" && "text-right",
                         col.align === "center" && "text-center",
                         columnDividers && colIdx > 0 && "border-l border-border/60",
                         isLastRow && col === visibleColumns[0] && "rounded-bl-2xl md:rounded-bl-3xl",
-                        isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl"
+                        isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl",
+                        getStickyColumnClass(col),
+                        // Giữ màu nền striped cho cột cố định
+                        col.fixed && striped && idx % 2 === 0 && "bg-muted/50!"
                       ),
                       children: col.render ? col.render(value, row, idx) : String(value ?? "")
                     },