uibee 3.1.4 → 3.1.6

package/dist/src/components/index.js

@@ -2731,7 +2731,19 @@ const VARIANT_CONTAINER = {
 };
 const VARIANT_THEAD = {
 	original: "bg-login-700",
-	modern: "bg-transparent border-b border-login-500/40"
+	modern: "bg-transparent"
+};
+const VARIANT_HEAD_BG = {
+	original: "bg-login-700",
+	modern: ""
+};
+const VARIANT_HEAD_BORDER = {
+	original: "border-b border-login-600",
+	modern: "border-b border-login-500/40"
+};
+const VARIANT_ROW_BORDER = {
+	original: "border-b border-login-600",
+	modern: "border-b border-login-600/15"
 };
 const VARIANT_THEAD_TH = {
 	original: "text-login-200",
@@ -2764,17 +2776,16 @@ function Header({ columns, sort, onSort, hasMenu, hasSelect, hasExpand, allSelec
 		});
 	}
 	return /* @__PURE__ */ jsx("thead", {
-		className: `block w-full sticky top-0 z-10 ${VARIANT_THEAD[variant]}`,
-		children: /* @__PURE__ */ jsxs("tr", {
-			className: "flex w-full",
-			children: [
-				hasSelect && /* @__PURE__ */ jsx("th", {
+		className: VARIANT_THEAD[variant],
+		children: /* @__PURE__ */ jsxs("tr", { children: [
+			hasSelect && /* @__PURE__ */ jsx("th", {
+				className: `sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}`,
+				style: {
+					width: "3rem",
+					minWidth: "3rem"
+				},
+				children: /* @__PURE__ */ jsx("div", {
 					className: "flex items-center justify-center",
-					style: {
-						width: "3rem",
-						minWidth: "3rem",
-						flexShrink: 0
-					},
 					children: /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						"aria-label": allSelected ? "Deselect all" : "Select all",
@@ -2796,62 +2807,58 @@ function Header({ columns, sort, onSort, hasMenu, hasSelect, hasExpand, allSelec
 							})
 						})]
 					})
-				}),
-				columns.map((col) => {
-					const sortable = col.sortable !== false;
-					const isActive = sort?.column === col.key;
-					const ariaSort = isActive ? sort.order === "asc" ? "ascending" : "descending" : "none";
-					const alignClass = col.align === "right" ? "justify-end" : col.align === "center" ? "justify-center" : "";
-					return /* @__PURE__ */ jsx("th", {
-						"aria-sort": sortable ? ariaSort : void 0,
-						style: col.width ? {
-							width: col.width,
-							flexShrink: 0
-						} : void 0,
-						className: `
-                                ${col.width ? "" : "flex-1"}
+				})
+			}),
+			columns.map((col) => {
+				const sortable = col.sortable !== false;
+				const isActive = sort?.column === col.key;
+				const ariaSort = isActive ? sort.order === "asc" ? "ascending" : "descending" : "none";
+				const alignClass = col.align === "right" ? "justify-end" : col.align === "center" ? "justify-center" : "";
+				return /* @__PURE__ */ jsx("th", {
+					"aria-sort": sortable ? ariaSort : void 0,
+					style: col.width ? { width: col.width } : void 0,
+					className: `
+                                sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}
                                 text-xs font-medium uppercase tracking-wider
                                 ${DENSITY_TH[density]} ${VARIANT_THEAD_TH[variant]}
                             `,
-						children: sortable ? /* @__PURE__ */ jsxs("button", {
-							type: "button",
-							className: `group inline-flex items-center gap-1.5 w-full cursor-pointer ${alignClass}`,
-							onClick: () => handleSort(col.key),
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "whitespace-nowrap",
-								children: formatLabel(col.key, col.label)
-							}), /* @__PURE__ */ jsx("span", {
-								className: "shrink-0 text-current",
-								children: isActive ? sort.order === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3.5 w-3.5 opacity-0 group-hover:opacity-35 transition-opacity" })
-							})]
-						}) : /* @__PURE__ */ jsx("span", {
-							className: `flex w-full ${alignClass}`,
+					children: sortable ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: `group inline-flex items-center gap-1.5 w-full cursor-pointer ${alignClass}`,
+						onClick: () => handleSort(col.key),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "whitespace-nowrap",
 							children: formatLabel(col.key, col.label)
-						})
-					}, col.key);
-				}),
-				hasExpand && /* @__PURE__ */ jsx("th", {
-					className: "flex items-center justify-center",
-					style: {
-						width: "2.5rem",
-						minWidth: "2.5rem",
-						flexShrink: 0
-					},
-					children: /* @__PURE__ */ jsx("span", {
-						className: `text-xs font-medium tracking-wider uppercase opacity-50 ${VARIANT_THEAD_TH[variant]}`,
-						children: "+"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-current",
+							children: isActive ? sort.order === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3.5 w-3.5 opacity-0 group-hover:opacity-35 transition-opacity" })
+						})]
+					}) : /* @__PURE__ */ jsx("span", {
+						className: `flex w-full whitespace-nowrap ${alignClass}`,
+						children: formatLabel(col.key, col.label)
 					})
-				}),
-				hasMenu && /* @__PURE__ */ jsx("th", {
-					"aria-hidden": "true",
-					style: {
-						width: "3.5rem",
-						minWidth: "3.5rem",
-						flexShrink: 0
-					}
+				}, col.key);
+			}),
+			hasExpand && /* @__PURE__ */ jsx("th", {
+				className: `sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}`,
+				style: {
+					width: "2.5rem",
+					minWidth: "2.5rem"
+				},
+				children: /* @__PURE__ */ jsx("span", {
+					className: `flex items-center justify-center text-xs font-medium tracking-wider uppercase opacity-50 ${VARIANT_THEAD_TH[variant]}`,
+					children: "+"
 				})
-			]
-		})
+			}),
+			hasMenu && /* @__PURE__ */ jsx("th", {
+				"aria-hidden": "true",
+				className: `sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}`,
+				style: {
+					width: "3.5rem",
+					minWidth: "3.5rem"
+				}
+			})
+		] })
 	});
 }
 //#endregion
@@ -2997,7 +3004,7 @@ function resolveRedirectUrl(redirectPath, row, id) {
 	const rid = cfg.key ? String(row[cfg.key] ?? id) : id;
 	return cfg.path.includes("?") ? `${cfg.path}${rid}` : `${cfg.path}/${rid}`;
 }
-function Cell({ col, row, density }) {
+function Cell({ col, row, density, variant }) {
 	const value = row[col.key];
 	const shouldTruncate = col.truncate === true;
 	const align = col.align ?? "left";
@@ -3025,16 +3032,13 @@ function Cell({ col, row, density }) {
 	return /* @__PURE__ */ jsx("td", {
 		style: col.width ? {
 			width: col.width,
-			flexShrink: 0
+			maxWidth: col.width
 		} : void 0,
 		className: `
-                ${col.width ? "" : "flex-1"} ${shouldTruncate ? "min-w-0" : ""} flex items-center text-sm text-login-75
-                ${DENSITY_TD[density]}
+                align-middle text-sm text-login-75 ${wrapperAlign}
+                ${DENSITY_TD[density]} ${VARIANT_ROW_BORDER[variant]}
             `,
-		children: /* @__PURE__ */ jsx("div", {
-			className: `min-w-0 w-full ${wrapperAlign}`,
-			children: content
-		})
+		children: content
 	});
 }
 function Body({ data, columns, idKey, variant, density, striped, redirectPath, onRowClick, renderExpandedRow, selectable, selectedIds, onSelectionChange, menuItems }) {
@@ -3043,16 +3047,14 @@ function Body({ data, columns, idKey, variant, density, striped, redirectPath, o
 	const [anchor, setAnchor] = useState(null);
 	const [expandedId, setExpandedId] = useState(null);
 	const menuRef = useRef(null);
-	const tbodyRef = useRef(null);
 	const menuWasOpenOnMouseDown = useRef(false);
 	const closeMenu = useCallback(() => setOpenMenuId(null), []);
 	useClickOutside(menuRef, closeMenu, openMenuId !== null);
 	useEffect(() => {
-		const el = tbodyRef.current;
-		if (!el) return;
-		el.addEventListener("scroll", closeMenu);
-		return () => el.removeEventListener("scroll", closeMenu);
-	}, [closeMenu]);
+		if (openMenuId === null) return;
+		document.addEventListener("scroll", closeMenu, true);
+		return () => document.removeEventListener("scroll", closeMenu, true);
+	}, [closeMenu, openMenuId]);
 	function openMenu(id, coords) {
 		setAnchor(coords);
 		setOpenMenuId(id);
@@ -3064,8 +3066,7 @@ function Body({ data, columns, idKey, variant, density, striped, redirectPath, o
 	const hasMenu = Boolean(menuItems);
 	const hasExpand = Boolean(renderExpandedRow);
 	return /* @__PURE__ */ jsx("tbody", {
-		ref: tbodyRef,
-		className: `block overflow-y-auto flex-1 min-h-0 divide-y ${VARIANT_TBODY[variant]}`,
+		className: VARIANT_TBODY[variant],
 		children: data.map((row, rowIdx) => {
 			const id = resolveId(row, idKey, columns);
 			const url = resolveRedirectUrl(redirectPath, row, id);
@@ -3075,7 +3076,7 @@ function Body({ data, columns, idKey, variant, density, striped, redirectPath, o
 			const isSelected = selectable && selectedSet.has(id);
 			const expandedContent = renderExpandedRow?.(row);
 			const rowClass = [
-				"flex w-full transition-colors duration-100",
+				"transition-colors duration-100",
 				isClickable ? "cursor-pointer" : "",
 				VARIANT_ROW_HOVER[variant],
 				striped ? VARIANT_ROW_STRIPED[variant] : "",
@@ -3114,35 +3115,37 @@ function Body({ data, columns, idKey, variant, density, striped, redirectPath, o
 				},
 				children: [
 					selectable && /* @__PURE__ */ jsx("td", {
-						className: "flex items-center justify-center",
+						className: `align-middle ${VARIANT_ROW_BORDER[variant]}`,
 						style: {
 							width: "3rem",
-							minWidth: "3rem",
-							flexShrink: 0
+							minWidth: "3rem"
 						},
-						children: /* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-label": isSelected ? "Deselect row" : "Select row",
-							"aria-checked": isSelected,
-							role: "checkbox",
-							onClick: (e) => {
-								e.stopPropagation();
-								toggleSelect(id);
-							},
-							className: `
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-center",
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": isSelected ? "Deselect row" : "Select row",
+								"aria-checked": isSelected,
+								role: "checkbox",
+								onClick: (e) => {
+									e.stopPropagation();
+									toggleSelect(id);
+								},
+								className: `
                                             h-4 w-4 rounded border flex items-center justify-center transition-colors cursor-pointer
                                             ${isSelected ? "bg-login border-login text-white" : "border-login-400 bg-transparent hover:border-login-100"}
                                         `,
-							children: isSelected && /* @__PURE__ */ jsx("svg", {
-								className: "h-3 w-3",
-								viewBox: "0 0 12 12",
-								fill: "none",
-								children: /* @__PURE__ */ jsx("path", {
-									d: "M2 6l3 3 5-5",
-									stroke: "currentColor",
-									strokeWidth: "1.5",
-									strokeLinecap: "round",
-									strokeLinejoin: "round"
+								children: isSelected && /* @__PURE__ */ jsx("svg", {
+									className: "h-3 w-3",
+									viewBox: "0 0 12 12",
+									fill: "none",
+									children: /* @__PURE__ */ jsx("path", {
+										d: "M2 6l3 3 5-5",
+										stroke: "currentColor",
+										strokeWidth: "1.5",
+										strokeLinecap: "round",
+										strokeLinejoin: "round"
+									})
 								})
 							})
 						})
@@ -3150,29 +3153,31 @@ function Body({ data, columns, idKey, variant, density, striped, redirectPath, o
 					columns.map((col) => /* @__PURE__ */ jsx(Cell, {
 						col,
 						row,
-						density
+						density,
+						variant
 					}, col.key)),
 					hasExpand && /* @__PURE__ */ jsx("td", {
-						className: "flex items-center justify-center",
+						className: `align-middle ${VARIANT_ROW_BORDER[variant]}`,
 						style: {
 							width: "2.5rem",
-							minWidth: "2.5rem",
-							flexShrink: 0
+							minWidth: "2.5rem"
 						},
-						children: /* @__PURE__ */ jsx(ChevronDown, { className: `
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-center",
+							children: /* @__PURE__ */ jsx(ChevronDown, { className: `
                                         h-4 w-4 transition-transform duration-200
                                         ${isExpanded ? "rotate-180 text-login" : "text-login-400"}
                                     ` })
+						})
 					}),
 					hasMenu && /* @__PURE__ */ jsx("td", {
-						className: "flex items-center justify-end pr-3",
+						className: `align-middle pr-3 ${VARIANT_ROW_BORDER[variant]}`,
 						style: {
 							width: "3.5rem",
-							minWidth: "3.5rem",
-							flexShrink: 0
+							minWidth: "3.5rem"
 						},
 						children: /* @__PURE__ */ jsxs("div", {
-							className: "relative",
+							className: "relative flex items-center justify-end",
 							children: [/* @__PURE__ */ jsx("button", {
 								type: "button",
 								"aria-label": "Row actions",
@@ -3205,9 +3210,10 @@ function Body({ data, columns, idKey, variant, density, striped, redirectPath, o
 					})
 				]
 			}), hasExpand && isExpanded && /* @__PURE__ */ jsx("tr", {
-				className: "flex w-full bg-login-700/25 border-b border-login-600/20",
+				className: "bg-login-700/25",
 				children: /* @__PURE__ */ jsx("td", {
-					className: "w-full px-6 py-4",
+					colSpan: 999,
+					className: "px-6 py-4 border-b border-login-600/20",
 					onClick: (e) => e.stopPropagation(),
 					children: expandedContent
 				})
@@ -3219,81 +3225,58 @@ function Body({ data, columns, idKey, variant, density, striped, redirectPath, o
 //#region src/components/table/skeleton.tsx
 function Skeleton({ columns, rows, variant, density, hasMenu, hasSelect }) {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: `block divide-y divide-login-600/15 ${VARIANT_TBODY[variant]}`,
-		children: Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ jsxs("tr", {
-			className: "flex w-full",
-			children: [
-				hasSelect && /* @__PURE__ */ jsx("td", {
-					className: "flex items-center justify-center",
-					style: {
-						width: "3rem",
-						minWidth: "3rem",
-						flexShrink: 0
-					},
-					children: /* @__PURE__ */ jsx("span", { className: "block h-4 w-4 rounded animate-shimmer" })
-				}),
-				columns.map((col, colIdx) => /* @__PURE__ */ jsx("td", {
-					style: col.width ? {
-						width: col.width,
-						flexShrink: 0
-					} : void 0,
-					className: `
-                                flex-1 min-w-0 flex items-center
-                                ${DENSITY_TD[density]}
-                            `,
-					children: /* @__PURE__ */ jsx("span", {
-						className: "block h-4 rounded animate-shimmer",
-						style: {
-							width: colIdx === 0 ? `${55 + (rowIdx * 17 + colIdx * 31) % 30}%` : `${40 + (rowIdx * 13 + colIdx * 23) % 40}%`,
-							animationDelay: `${(rowIdx * columns.length + colIdx) * 40}ms`
-						}
-					})
-				}, col.key)),
-				hasMenu && /* @__PURE__ */ jsx("td", {
-					className: "flex items-center justify-end pr-3",
+		className: VARIANT_TBODY[variant],
+		children: Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ jsxs("tr", { children: [
+			hasSelect && /* @__PURE__ */ jsx("td", {
+				className: `align-middle ${VARIANT_ROW_BORDER[variant]}`,
+				style: {
+					width: "3rem",
+					minWidth: "3rem"
+				},
+				children: /* @__PURE__ */ jsx("span", { className: "block h-4 w-4 mx-auto rounded animate-shimmer" })
+			}),
+			columns.map((col, colIdx) => /* @__PURE__ */ jsx("td", {
+				style: col.width ? { width: col.width } : void 0,
+				className: `align-middle ${DENSITY_TD[density]} ${VARIANT_ROW_BORDER[variant]}`,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "block h-4 rounded animate-shimmer",
 					style: {
-						width: "3.5rem",
-						minWidth: "3.5rem",
-						flexShrink: 0
-					},
-					children: /* @__PURE__ */ jsx("span", { className: "block h-5 w-5 rounded animate-shimmer" })
+						width: colIdx === 0 ? `${8 + (rowIdx * 17 + colIdx * 31) % 5}rem` : `${5 + (rowIdx * 13 + colIdx * 23) % 5}rem`,
+						animationDelay: `${(rowIdx * columns.length + colIdx) * 40}ms`
+					}
 				})
-			]
-		}, rowIdx))
+			}, col.key)),
+			hasMenu && /* @__PURE__ */ jsx("td", {
+				className: `align-middle pr-3 ${VARIANT_ROW_BORDER[variant]}`,
+				style: {
+					width: "3.5rem",
+					minWidth: "3.5rem"
+				},
+				children: /* @__PURE__ */ jsx("span", { className: "block h-5 w-5 ml-auto rounded animate-shimmer" })
+			})
+		] }, rowIdx))
 	});
 }
 //#endregion
 //#region src/components/table/empty.tsx
 function Empty({ emptyState }) {
-	if (emptyState) return /* @__PURE__ */ jsx("tbody", {
-		className: "block w-full",
-		children: /* @__PURE__ */ jsx("tr", {
-			className: "flex w-full",
-			children: /* @__PURE__ */ jsx("td", {
-				className: "w-full",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "flex items-center justify-center min-h-[160px] py-8 px-6",
-					children: emptyState
-				})
-			})
+	if (emptyState) return /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+		colSpan: 999,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center min-h-[160px] py-8 px-6",
+			children: emptyState
 		})
-	});
-	return /* @__PURE__ */ jsx("tbody", {
-		className: "block w-full",
-		children: /* @__PURE__ */ jsx("tr", {
-			className: "flex w-full",
-			children: /* @__PURE__ */ jsx("td", {
-				className: "w-full",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col items-center justify-center gap-3 min-h-[160px] py-8 text-login-300",
-					children: [/* @__PURE__ */ jsx(TableIcon, { className: "h-10 w-10 opacity-30" }), /* @__PURE__ */ jsx("span", {
-						className: "text-sm",
-						children: "No data found"
-					})]
-				})
-			})
+	}) }) });
+	return /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+		colSpan: 999,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center justify-center gap-3 min-h-[160px] py-8 text-login-300",
+			children: [/* @__PURE__ */ jsx(TableIcon, { className: "h-10 w-10 opacity-30" }), /* @__PURE__ */ jsx("span", {
+				className: "text-sm",
+				children: "No data found"
+			})]
 		})
-	});
+	}) }) });
 }
 //#endregion
 //#region src/components/table/pagination.tsx
@@ -3443,9 +3426,9 @@ function TableShell({ data, columns, idKey, variant, density, striped, loading,
 			className
 		].filter(Boolean).join(" "),
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex-1 min-h-0 overflow-x-auto",
+			className: "flex-1 min-h-0 overflow-auto",
 			children: /* @__PURE__ */ jsxs("table", {
-				className: "min-w-full w-max flex flex-col flex-1 min-h-0 divide-y divide-login-600/20",
+				className: "min-w-full table-auto border-separate border-spacing-0",
 				children: [/* @__PURE__ */ jsx(Header, {
 					columns,
 					sort,

package/dist/style.css

@@ -1580,6 +1580,9 @@
   .ml-1 {
     margin-left: var(--spacing);
   }
+  .ml-auto {
+    margin-left: auto;
+  }
   .noscroll {
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -1777,9 +1780,6 @@
   .w-full {
     width: 100%;
   }
-  .w-max {
-    width: max-content;
-  }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
@@ -1837,6 +1837,17 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .table-auto {
+    table-layout: auto;
+  }
+  .border-separate {
+    border-collapse: separate;
+  }
+  .border-spacing-0 {
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+  }
   .origin-center {
     transform-origin: center;
   }
@@ -2013,14 +2024,6 @@
       }
     }
   }
-  .divide-login-600\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, #212121 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-login-600) 20%, transparent);
-      }
-    }
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2032,9 +2035,6 @@
   .overflow-hidden {
     overflow: hidden;
   }
-  .overflow-x-auto {
-    overflow-x: auto;
-  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -2143,6 +2143,12 @@
   .border-login-600 {
     border-color: var(--color-login-600);
   }
+  .border-login-600\/15 {
+    border-color: color-mix(in srgb, #212121 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-login-600) 15%, transparent);
+    }
+  }
   .border-login-600\/20 {
     border-color: color-mix(in srgb, #212121 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3826,6 +3832,16 @@ input::-ms-reveal,
 input::-ms-clear {
   display: none !important;
 }
+@property --tw-border-spacing-x {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-spacing-y {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -4137,6 +4153,8 @@ input::-ms-clear {
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-border-spacing-x: 0;
+      --tw-border-spacing-y: 0;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "3.1.4",
+  "version": "3.1.6",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/table/body.tsx

@@ -4,7 +4,7 @@ import React, { useState, useRef, useEffect, useCallback, useMemo, type RefObjec
 import { useRouter } from 'next/navigation'
 import { EllipsisVertical, ChevronDown } from 'lucide-react'
 import type { Column, Density, TableVariant, MenuAnchor, TableShellProps } from './types'
-import { HIGHLIGHT, DENSITY_TD, VARIANT_TBODY, VARIANT_ROW_HOVER, VARIANT_ROW_STRIPED } from './constants'
+import { HIGHLIGHT, DENSITY_TD, VARIANT_TBODY, VARIANT_ROW_HOVER, VARIANT_ROW_STRIPED, VARIANT_ROW_BORDER } from './constants'
 import { formatValue } from './format'
 import { resolveId } from './utils'
 import Menu from './menu'
@@ -38,13 +38,14 @@ function Cell<T extends Record<string, unknown>>({
     col,
     row,
     density,
+    variant,
 }: {
     col: Column<T>
     row: T
     density: Density
+    variant: TableVariant
 }) {
     const value = row[col.key]
-    // Truncate: opt-in, only applied when col.truncate === true
     const shouldTruncate = col.truncate === true
     const align = col.align ?? 'left'
 
@@ -55,7 +56,6 @@ function Cell<T extends Record<string, unknown>>({
     let content: React.ReactNode
 
     if (col.render) {
-        // Custom renderer: caller is responsible for alignment
         content = col.render(value, row)
     } else if (col.highlight) {
         const colorName = col.highlight[String(value)] ?? col.highlight['default']
@@ -84,16 +84,13 @@ function Cell<T extends Record<string, unknown>>({
 
     return (
         <td
-            style={col.width ? { width: col.width, flexShrink: 0 } : undefined}
+            style={col.width ? { width: col.width, maxWidth: col.width } : undefined}
             className={`
-                ${col.width ? '' : 'flex-1'} ${shouldTruncate ? 'min-w-0' : ''} flex items-center text-sm text-login-75
-                ${DENSITY_TD[density]}
+                align-middle text-sm text-login-75 ${wrapperAlign}
+                ${DENSITY_TD[density]} ${VARIANT_ROW_BORDER[variant]}
             `}
         >
-            {/* w-full fills the column; text-align handles alignment */}
-            <div className={`min-w-0 w-full ${wrapperAlign}`}>
-                {content}
-            </div>
+            {content}
         </td>
     )
 }
@@ -118,18 +115,16 @@ export default function Body<T extends Record<string, unknown>>({
     const [expandedId, setExpandedId] = useState<string | null>(null)
 
     const menuRef = useRef<HTMLDivElement>(null)
-    const tbodyRef = useRef<HTMLTableSectionElement>(null)
     const menuWasOpenOnMouseDown = useRef(false)
 
     const closeMenu = useCallback(() => setOpenMenuId(null), [])
     useClickOutside(menuRef as RefObject<HTMLElement>, closeMenu, openMenuId !== null)
 
     useEffect(() => {
-        const el = tbodyRef.current
-        if (!el) return
-        el.addEventListener('scroll', closeMenu)
-        return () => el.removeEventListener('scroll', closeMenu)
-    }, [closeMenu])
+        if (openMenuId === null) return
+        document.addEventListener('scroll', closeMenu, true)
+        return () => document.removeEventListener('scroll', closeMenu, true)
+    }, [closeMenu, openMenuId])
 
     function openMenu(id: string, coords: MenuAnchor) {
         setAnchor(coords)
@@ -149,10 +144,7 @@ export default function Body<T extends Record<string, unknown>>({
     const hasExpand = Boolean(renderExpandedRow)
 
     return (
-        <tbody
-            ref={tbodyRef}
-            className={`block overflow-y-auto flex-1 min-h-0 divide-y ${VARIANT_TBODY[variant]}`}
-        >
+        <tbody className={VARIANT_TBODY[variant]}>
             {data.map((row, rowIdx) => {
                 const id = resolveId(row as Record<string, unknown>, idKey as string | undefined, columns as Column<Record<string, unknown>>[])
                 const url = resolveRedirectUrl(redirectPath, row as Record<string, unknown>, id)
@@ -163,7 +155,7 @@ export default function Body<T extends Record<string, unknown>>({
                 const expandedContent = renderExpandedRow?.(row)
 
                 const rowClass = [
-                    'flex w-full transition-colors duration-100',
+                    'transition-colors duration-100',
                     isClickable ? 'cursor-pointer' : '',
                     VARIANT_ROW_HOVER[variant],
                     striped ? VARIANT_ROW_STRIPED[variant] : '',
@@ -197,8 +189,9 @@ export default function Body<T extends Record<string, unknown>>({
                             }}
                         >
                             {selectable && (
-                                <td className='flex items-center justify-center'
-                                    style={{ width: '3rem', minWidth: '3rem', flexShrink: 0 }}>
+                                <td className={`align-middle ${VARIANT_ROW_BORDER[variant]}`}
+                                    style={{ width: '3rem', minWidth: '3rem' }}>
+                                  <div className='flex items-center justify-center'>
                                     <button
                                         type='button'
                                         aria-label={isSelected ? 'Deselect row' : 'Select row'}
@@ -219,27 +212,30 @@ export default function Body<T extends Record<string, unknown>>({
                                             </svg>
                                         )}
                                     </button>
+                                  </div>
                                 </td>
                             )}
 
                             {columns.map((col) => (
-                                <Cell key={col.key} col={col} row={row} density={density} />
+                                <Cell key={col.key} col={col} row={row} density={density} variant={variant} />
                             ))}
 
                             {hasExpand && (
-                                <td className='flex items-center justify-center'
-                                    style={{ width: '2.5rem', minWidth: '2.5rem', flexShrink: 0 }}>
+                                <td className={`align-middle ${VARIANT_ROW_BORDER[variant]}`}
+                                    style={{ width: '2.5rem', minWidth: '2.5rem' }}>
+                                  <div className='flex items-center justify-center'>
                                     <ChevronDown className={`
                                         h-4 w-4 transition-transform duration-200
                                         ${isExpanded ? 'rotate-180 text-login' : 'text-login-400'}
                                     `} />
+                                  </div>
                                 </td>
                             )}
 
                             {hasMenu && (
-                                <td className='flex items-center justify-end pr-3'
-                                    style={{ width: '3.5rem', minWidth: '3.5rem', flexShrink: 0 }}>
-                                    <div className='relative'>
+                                <td className={`align-middle pr-3 ${VARIANT_ROW_BORDER[variant]}`}
+                                    style={{ width: '3.5rem', minWidth: '3.5rem' }}>
+                                    <div className='relative flex items-center justify-end'>
                                         <button
                                             type='button'
                                             aria-label='Row actions'
@@ -276,9 +272,10 @@ export default function Body<T extends Record<string, unknown>>({
                         </tr>
 
                         {hasExpand && isExpanded && (
-                            <tr className='flex w-full bg-login-700/25 border-b border-login-600/20'>
+                            <tr className='bg-login-700/25'>
                                 <td
-                                    className='w-full px-6 py-4'
+                                    colSpan={999}
+                                    className='px-6 py-4 border-b border-login-600/20'
                                     onClick={(e) => e.stopPropagation()}
                                 >
                                     {expandedContent}

package/src/components/table/constants.ts

@@ -29,7 +29,22 @@ export const VARIANT_CONTAINER: Record<TableVariant, string> = {
 
 export const VARIANT_THEAD: Record<TableVariant, string> = {
     original: 'bg-login-700',
-    modern:   'bg-transparent border-b border-login-500/40',
+    modern:   'bg-transparent',
+}
+
+export const VARIANT_HEAD_BG: Record<TableVariant, string> = {
+    original: 'bg-login-700',
+    modern:   '',
+}
+
+export const VARIANT_HEAD_BORDER: Record<TableVariant, string> = {
+    original: 'border-b border-login-600',
+    modern:   'border-b border-login-500/40',
+}
+
+export const VARIANT_ROW_BORDER: Record<TableVariant, string> = {
+    original: 'border-b border-login-600',
+    modern:   'border-b border-login-600/15',
 }
 
 export const VARIANT_THEAD_TH: Record<TableVariant, string> = {

package/src/components/table/empty.tsx

@@ -4,9 +4,9 @@ import type { ReactNode } from 'react'
 export default function Empty({ emptyState }: { emptyState?: ReactNode }) {
     if (emptyState) {
         return (
-            <tbody className='block w-full'>
-                <tr className='flex w-full'>
-                    <td className='w-full'>
+            <tbody>
+                <tr>
+                    <td colSpan={999}>
                         <div className='flex items-center justify-center min-h-[160px] py-8 px-6'>
                             {emptyState}
                         </div>
@@ -17,9 +17,9 @@ export default function Empty({ emptyState }: { emptyState?: ReactNode }) {
     }
 
     return (
-        <tbody className='block w-full'>
-            <tr className='flex w-full'>
-                <td className='w-full'>
+        <tbody>
+            <tr>
+                <td colSpan={999}>
                     <div className='flex flex-col items-center justify-center gap-3 min-h-[160px] py-8 text-login-300'>
                         <TableIcon className='h-10 w-10 opacity-30' />
                         <span className='text-sm'>No data found</span>

package/src/components/table/header.tsx

@@ -2,7 +2,7 @@
 
 import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react'
 import type { Column, SortState, Density, TableVariant } from './types'
-import { DENSITY_TH, VARIANT_THEAD, VARIANT_THEAD_TH } from './constants'
+import { DENSITY_TH, VARIANT_THEAD, VARIANT_THEAD_TH, VARIANT_HEAD_BORDER, VARIANT_HEAD_BG } from './constants'
 
 type HeaderProps<T extends Record<string, unknown>> = {
     columns: Column<T>[]
@@ -43,12 +43,13 @@ export default function Header<T extends Record<string, unknown>>({
     }
 
     return (
-        <thead className={`block w-full sticky top-0 z-10 ${VARIANT_THEAD[variant]}`}>
-            <tr className='flex w-full'>
+        <thead className={VARIANT_THEAD[variant]}>
+            <tr>
 
                 {hasSelect && (
-                    <th className='flex items-center justify-center'
-                        style={{ width: '3rem', minWidth: '3rem', flexShrink: 0 }}>
+                    <th className={`sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}`}
+                        style={{ width: '3rem', minWidth: '3rem' }}>
+                      <div className='flex items-center justify-center'>
                         <button
                             type='button'
                             aria-label={allSelected ? 'Deselect all' : 'Select all'}
@@ -70,6 +71,7 @@ export default function Header<T extends Record<string, unknown>>({
                                 </svg>
                             )}
                         </button>
+                      </div>
                     </th>
                 )}
 
@@ -88,9 +90,9 @@ export default function Header<T extends Record<string, unknown>>({
                         <th
                             key={col.key}
                             aria-sort={sortable ? ariaSort : undefined}
-                            style={col.width ? { width: col.width, flexShrink: 0 } : undefined}
+                            style={col.width ? { width: col.width } : undefined}
                             className={`
-                                ${col.width ? '' : 'flex-1'}
+                                sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}
                                 text-xs font-medium uppercase tracking-wider
                                 ${DENSITY_TH[density]} ${VARIANT_THEAD_TH[variant]}
                             `}
@@ -113,7 +115,7 @@ export default function Header<T extends Record<string, unknown>>({
                                     </span>
                                 </button>
                             ) : (
-                                <span className={`flex w-full ${alignClass}`}>
+                                <span className={`flex w-full whitespace-nowrap ${alignClass}`}>
                                     {formatLabel(col.key, col.label)}
                                 </span>
                             )}
@@ -122,9 +124,9 @@ export default function Header<T extends Record<string, unknown>>({
                 })}
 
                 {hasExpand && (
-                    <th className='flex items-center justify-center'
-                        style={{ width: '2.5rem', minWidth: '2.5rem', flexShrink: 0 }}>
-                        <span className={`text-xs font-medium tracking-wider uppercase opacity-50 ${VARIANT_THEAD_TH[variant]}`}>
+                    <th className={`sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}`}
+                        style={{ width: '2.5rem', minWidth: '2.5rem' }}>
+                        <span className={`flex items-center justify-center text-xs font-medium tracking-wider uppercase opacity-50 ${VARIANT_THEAD_TH[variant]}`}>
                             +
                         </span>
                     </th>
@@ -132,7 +134,8 @@ export default function Header<T extends Record<string, unknown>>({
 
                 {hasMenu && (
                     <th aria-hidden='true'
-                        style={{ width: '3.5rem', minWidth: '3.5rem', flexShrink: 0 }} />
+                        className={`sticky top-0 z-10 ${VARIANT_HEAD_BG[variant]} ${VARIANT_HEAD_BORDER[variant]}`}
+                        style={{ width: '3.5rem', minWidth: '3.5rem' }} />
                 )}
             </tr>
         </thead>

package/src/components/table/skeleton.tsx

@@ -1,7 +1,7 @@
 import type { Density, TableVariant } from './types'
 
 type Column = { key: string; width?: string }
-import { DENSITY_TD, DENSITY_TH, VARIANT_TBODY } from './constants'
+import { DENSITY_TD, VARIANT_TBODY, VARIANT_ROW_BORDER } from './constants'
 
 type SkeletonProps = {
     columns: Column[]
@@ -14,39 +14,36 @@ type SkeletonProps = {
 
 export default function Skeleton({ columns, rows, variant, density, hasMenu, hasSelect }: SkeletonProps) {
     return (
-        <tbody className={`block divide-y divide-login-600/15 ${VARIANT_TBODY[variant]}`}>
+        <tbody className={VARIANT_TBODY[variant]}>
             {Array.from({ length: rows }).map((_, rowIdx) => (
-                <tr key={rowIdx} className='flex w-full'>
+                <tr key={rowIdx}>
                     {hasSelect && (
-                        <td className='flex items-center justify-center'
-                            style={{ width: '3rem', minWidth: '3rem', flexShrink: 0 }}>
-                            <span className='block h-4 w-4 rounded animate-shimmer' />
+                        <td className={`align-middle ${VARIANT_ROW_BORDER[variant]}`}
+                            style={{ width: '3rem', minWidth: '3rem' }}>
+                            <span className='block h-4 w-4 mx-auto rounded animate-shimmer' />
                         </td>
                     )}
                     {columns.map((col, colIdx) => (
                         <td
                             key={col.key}
-                            style={col.width ? { width: col.width, flexShrink: 0 } : undefined}
-                            className={`
-                                flex-1 min-w-0 flex items-center
-                                ${DENSITY_TD[density]}
-                            `}
+                            style={col.width ? { width: col.width } : undefined}
+                            className={`align-middle ${DENSITY_TD[density]} ${VARIANT_ROW_BORDER[variant]}`}
                         >
                             <span
                                 className='block h-4 rounded animate-shimmer'
                                 style={{
                                     width: colIdx === 0
-                                        ? `${55 + ((rowIdx * 17 + colIdx * 31) % 30)}%`
-                                        : `${40 + ((rowIdx * 13 + colIdx * 23) % 40)}%`,
+                                        ? `${8 + ((rowIdx * 17 + colIdx * 31) % 5)}rem`
+                                        : `${5 + ((rowIdx * 13 + colIdx * 23) % 5)}rem`,
                                     animationDelay: `${(rowIdx * columns.length + colIdx) * 40}ms`,
                                 }}
                             />
                         </td>
                     ))}
                     {hasMenu && (
-                        <td className='flex items-center justify-end pr-3'
-                            style={{ width: '3.5rem', minWidth: '3.5rem', flexShrink: 0 }}>
-                            <span className='block h-5 w-5 rounded animate-shimmer' />
+                        <td className={`align-middle pr-3 ${VARIANT_ROW_BORDER[variant]}`}
+                            style={{ width: '3.5rem', minWidth: '3.5rem' }}>
+                            <span className='block h-5 w-5 ml-auto rounded animate-shimmer' />
                         </td>
                     )}
                 </tr>

package/src/components/table/table.tsx

@@ -45,8 +45,8 @@ function TableShell<T extends Record<string, unknown>>({
 
     return (
         <div className={['flex flex-col min-h-0 w-full', VARIANT_CONTAINER[variant], className].filter(Boolean).join(' ')}>
-            <div className='flex-1 min-h-0 overflow-x-auto'>
-                <table className='min-w-full w-max flex flex-col flex-1 min-h-0 divide-y divide-login-600/20'>
+            <div className='flex-1 min-h-0 overflow-auto'>
+                <table className='min-w-full table-auto border-separate border-spacing-0'>
                     <Header
                         columns={columns}
                         sort={sort}