@usetheo/ui 0.35.0 → 0.35.1

package/dist/index.js

@@ -4935,53 +4935,66 @@ function DataTableDefaultBody(props) {
     return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: emptyState ?? /* @__PURE__ */ jsx(EmptyState, { title: "No data", description: "There's nothing here yet." }) });
   }
   const totalPages = pagination ? Math.ceil(sortedData.length / effectivePageSize) : 1;
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(Table.Header, { className: stickyHeader ? "sticky top-0 z-10 bg-card" : void 0, children: /* @__PURE__ */ jsx(
-        DataTableHeaderRow,
+  return (
+    // `overflow-x-auto`: uma tabela mais larga que o contêiner ROLA dentro dele, em vez de vazar por
+    // cima do resto da página. Medido no consumidor: 11 colunas produziam 1838 px dentro de 1486 px,
+    // e a raiz era só `w-full` — então o excesso escapava e desconfigurava a tela inteira. Não era
+    // defeito de uma tela: era desta raiz, e alcançava qualquer consumidor com colunas demais.
+    //
+    // A variante virtualizada já fazia isto; a não-virtualizada é que tinha ficado para trás.
+    //
+    // Efeito colateral declarado: com `overflow-x` diferente de `visible`, o CSS computa `overflow-y`
+    // como `auto` — logo este `div` vira contexto de rolagem, e um `stickyHeader` passa a grudar nele
+    // e não na viewport. Para o cabeçalho grudar de fato, o consumidor precisa dar altura máxima ao
+    // contêiner (`className="max-h-[...]"`), que é o que torna a rolagem vertical real.
+    /* @__PURE__ */ jsxs("div", { className: cn("w-full overflow-x-auto", className), children: [
+      /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(Table.Header, { className: stickyHeader ? "sticky top-0 z-10 bg-card" : void 0, children: /* @__PURE__ */ jsx(
+          DataTableHeaderRow,
+          {
+            columns,
+            sort,
+            onSortClick: handleSort,
+            hasExpandColumn: expandable !== void 0,
+            hasActionsColumn: rowActions !== void 0
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Table.Body, { children: visibleData.map((row) => {
+          const key = rowKey(row);
+          const expandedContent = expandable ? expandable(row) : null;
+          const isExpandable = expandedContent !== null && expandedContent !== void 0;
+          const isExpanded = expanded.has(key);
+          return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsxs(Table.Row, { children: [
+              expandable ? /* @__PURE__ */ jsx(Table.Cell, { children: isExpandable ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => toggleExpand(key),
+                  "aria-expanded": isExpanded,
+                  "aria-controls": `expanded-${key}`,
+                  "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                  className: "inline-flex items-center justify-center rounded-md p-0.5 hover:bg-muted",
+                  children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" })
+                }
+              ) : null }) : null,
+              columns.map((col) => /* @__PURE__ */ jsx(Table.Cell, { align: col.align, className: col.className, children: renderCellContent(row, col) }, col.key)),
+              rowActions ? /* @__PURE__ */ jsx(DataTableRowActionsCell, { children: rowActions(row) }) : null
+            ] }),
+            isExpanded && isExpandable ? /* @__PURE__ */ jsx("tr", { id: `expanded-${key}`, children: /* @__PURE__ */ jsx("td", { colSpan: expandedColSpan, className: "bg-muted/30 p-4", children: expandedContent }) }) : null
+          ] }, key);
+        }) })
+      ] }),
+      pagination && totalPages > 1 ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsx(
+        Pagination,
         {
-          columns,
-          sort,
-          onSortClick: handleSort,
-          hasExpandColumn: expandable !== void 0,
-          hasActionsColumn: rowActions !== void 0
+          currentPage: currentPage + 1,
+          totalPages,
+          onPageChange: handlePageChange
         }
-      ) }),
-      /* @__PURE__ */ jsx(Table.Body, { children: visibleData.map((row) => {
-        const key = rowKey(row);
-        const expandedContent = expandable ? expandable(row) : null;
-        const isExpandable = expandedContent !== null && expandedContent !== void 0;
-        const isExpanded = expanded.has(key);
-        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          /* @__PURE__ */ jsxs(Table.Row, { children: [
-            expandable ? /* @__PURE__ */ jsx(Table.Cell, { children: isExpandable ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => toggleExpand(key),
-                "aria-expanded": isExpanded,
-                "aria-controls": `expanded-${key}`,
-                "aria-label": isExpanded ? "Collapse row" : "Expand row",
-                className: "inline-flex items-center justify-center rounded-md p-0.5 hover:bg-muted",
-                children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: "size-4" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" })
-              }
-            ) : null }) : null,
-            columns.map((col) => /* @__PURE__ */ jsx(Table.Cell, { align: col.align, className: col.className, children: renderCellContent(row, col) }, col.key)),
-            rowActions ? /* @__PURE__ */ jsx(DataTableRowActionsCell, { children: rowActions(row) }) : null
-          ] }),
-          isExpanded && isExpandable ? /* @__PURE__ */ jsx("tr", { id: `expanded-${key}`, children: /* @__PURE__ */ jsx("td", { colSpan: expandedColSpan, className: "bg-muted/30 p-4", children: expandedContent }) }) : null
-        ] }, key);
-      }) })
-    ] }),
-    pagination && totalPages > 1 ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex items-center justify-end", children: /* @__PURE__ */ jsx(
-      Pagination,
-      {
-        currentPage: currentPage + 1,
-        totalPages,
-        onPageChange: handlePageChange
-      }
-    ) }) : null
-  ] });
+      ) }) : null
+    ] })
+  );
 }
 var PageShell = forwardRef(
   ({

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.35.0",
+  "version": "0.35.1",
   "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
   "type": "module",
   "license": "Apache-2.0",
-  "description": "Violet Forge design system — generic React components + primitives (the non-AI foundation of @theokit/ui).",
+  "description": "Violet Forge design system \u2014 generic React components + primitives (the non-AI foundation of @theokit/ui).",
   "sideEffects": false,
   "files": [
     "dist"