@usefragments/ui 1.3.2 → 1.4.0

package/dist/components/Text/Text.module.scss.js

@@ -1,89 +1,101 @@
-const text = "_text_4yy44_1";
-const variantSectionLabel = "_variant-section-label_4yy44_7";
-const size2Xs = "_size-2xs_4yy44_17";
-const sizeXs = "_size-xs_4yy44_21";
-const sizeSm = "_size-sm_4yy44_25";
-const sizeBase = "_size-base_4yy44_29";
-const sizeMd = "_size-md_4yy44_33";
-const sizeLg = "_size-lg_4yy44_37";
-const sizeXl = "_size-xl_4yy44_41";
-const size2Xl = "_size-2xl_4yy44_45";
-const size3Xl = "_size-3xl_4yy44_49";
-const size4Xl = "_size-4xl_4yy44_55";
-const weightNormal = "_weight-normal_4yy44_61";
-const weightMedium = "_weight-medium_4yy44_65";
-const weightSemibold = "_weight-semibold_4yy44_69";
-const weightBold = "_weight-bold_4yy44_73";
-const colorPrimary = "_color-primary_4yy44_77";
-const colorSecondary = "_color-secondary_4yy44_81";
-const colorTertiary = "_color-tertiary_4yy44_85";
-const colorMuted = "_color-muted_4yy44_86";
-const mono = "_mono_4yy44_90";
-const truncate = "_truncate_4yy44_94";
-const lineClamp = "_lineClamp_4yy44_100";
-const trackingNormal = "_tracking-normal_4yy44_108";
-const trackingTight = "_tracking-tight_4yy44_112";
-const trackingTighter = "_tracking-tighter_4yy44_116";
-const trackingTightest = "_tracking-tightest_4yy44_120";
-const tabularNums = "_tabularNums_4yy44_124";
+const text = "_text_1159j_1";
+const variantSectionLabel = "_variant-section-label_1159j_7";
+const size2Xs = "_size-2xs_1159j_17";
+const sizeXs = "_size-xs_1159j_21";
+const sizeSm = "_size-sm_1159j_25";
+const sizeBase = "_size-base_1159j_29";
+const sizeMd = "_size-md_1159j_33";
+const sizeLg = "_size-lg_1159j_37";
+const sizeXl = "_size-xl_1159j_41";
+const size2Xl = "_size-2xl_1159j_45";
+const size3Xl = "_size-3xl_1159j_49";
+const size4Xl = "_size-4xl_1159j_55";
+const weightNormal = "_weight-normal_1159j_61";
+const weightMedium = "_weight-medium_1159j_65";
+const weightSemibold = "_weight-semibold_1159j_69";
+const weightBold = "_weight-bold_1159j_73";
+const colorPrimary = "_color-primary_1159j_77";
+const colorSecondary = "_color-secondary_1159j_81";
+const colorTertiary = "_color-tertiary_1159j_85";
+const colorMuted = "_color-muted_1159j_86";
+const colorSuccess = "_color-success_1159j_90";
+const colorWarning = "_color-warning_1159j_94";
+const colorDanger = "_color-danger_1159j_98";
+const mono = "_mono_1159j_102";
+const truncate = "_truncate_1159j_106";
+const lineClamp = "_lineClamp_1159j_112";
+const trackingNormal = "_tracking-normal_1159j_120";
+const trackingTight = "_tracking-tight_1159j_124";
+const trackingTighter = "_tracking-tighter_1159j_128";
+const trackingTightest = "_tracking-tightest_1159j_132";
+const tabularNums = "_tabularNums_1159j_136";
 const styles = {
   text,
-  "variant-section-label": "_variant-section-label_4yy44_7",
+  "variant-section-label": "_variant-section-label_1159j_7",
   variantSectionLabel,
-  "size-2xs": "_size-2xs_4yy44_17",
+  "size-2xs": "_size-2xs_1159j_17",
   size2Xs,
-  "size-xs": "_size-xs_4yy44_21",
+  "size-xs": "_size-xs_1159j_21",
   sizeXs,
-  "size-sm": "_size-sm_4yy44_25",
+  "size-sm": "_size-sm_1159j_25",
   sizeSm,
-  "size-base": "_size-base_4yy44_29",
+  "size-base": "_size-base_1159j_29",
   sizeBase,
-  "size-md": "_size-md_4yy44_33",
+  "size-md": "_size-md_1159j_33",
   sizeMd,
-  "size-lg": "_size-lg_4yy44_37",
+  "size-lg": "_size-lg_1159j_37",
   sizeLg,
-  "size-xl": "_size-xl_4yy44_41",
+  "size-xl": "_size-xl_1159j_41",
   sizeXl,
-  "size-2xl": "_size-2xl_4yy44_45",
+  "size-2xl": "_size-2xl_1159j_45",
   size2Xl,
-  "size-3xl": "_size-3xl_4yy44_49",
+  "size-3xl": "_size-3xl_1159j_49",
   size3Xl,
-  "size-4xl": "_size-4xl_4yy44_55",
+  "size-4xl": "_size-4xl_1159j_55",
   size4Xl,
-  "weight-normal": "_weight-normal_4yy44_61",
+  "weight-normal": "_weight-normal_1159j_61",
   weightNormal,
-  "weight-medium": "_weight-medium_4yy44_65",
+  "weight-medium": "_weight-medium_1159j_65",
   weightMedium,
-  "weight-semibold": "_weight-semibold_4yy44_69",
+  "weight-semibold": "_weight-semibold_1159j_69",
   weightSemibold,
-  "weight-bold": "_weight-bold_4yy44_73",
+  "weight-bold": "_weight-bold_1159j_73",
   weightBold,
-  "color-primary": "_color-primary_4yy44_77",
+  "color-primary": "_color-primary_1159j_77",
   colorPrimary,
-  "color-secondary": "_color-secondary_4yy44_81",
+  "color-secondary": "_color-secondary_1159j_81",
   colorSecondary,
-  "color-tertiary": "_color-tertiary_4yy44_85",
+  "color-tertiary": "_color-tertiary_1159j_85",
   colorTertiary,
-  "color-muted": "_color-muted_4yy44_86",
+  "color-muted": "_color-muted_1159j_86",
   colorMuted,
+  "color-success": "_color-success_1159j_90",
+  colorSuccess,
+  "color-warning": "_color-warning_1159j_94",
+  colorWarning,
+  "color-danger": "_color-danger_1159j_98",
+  colorDanger,
   mono,
   truncate,
   lineClamp,
-  "tracking-normal": "_tracking-normal_4yy44_108",
+  "tracking-normal": "_tracking-normal_1159j_120",
   trackingNormal,
-  "tracking-tight": "_tracking-tight_4yy44_112",
+  "tracking-tight": "_tracking-tight_1159j_124",
   trackingTight,
-  "tracking-tighter": "_tracking-tighter_4yy44_116",
+  "tracking-tighter": "_tracking-tighter_1159j_128",
   trackingTighter,
-  "tracking-tightest": "_tracking-tightest_4yy44_120",
+  "tracking-tightest": "_tracking-tightest_1159j_132",
   trackingTightest,
   tabularNums
 };
 export {
+  colorDanger,
   colorMuted,
   colorPrimary,
   colorSecondary,
+  colorSuccess,
   colorTertiary,
+  colorWarning,
   styles as default,
   lineClamp,
   mono,

package/dist/components/Text/index.d.ts

@@ -17,9 +17,11 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'colo
     /** Font weight.
      * @default "normal" */
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
-    /** Text color. `"muted"` is an alias for `"tertiary"`.
+    /** Text color. `"muted"` is an alias for `"tertiary"`. `"success" | "warning" | "danger"`
+     * are for a run of text that carries a state on its own; prefer Badge or Alert when the
+     * state deserves a container.
      * @default "primary" */
-    color?: 'primary' | 'secondary' | 'tertiary' | 'muted';
+    color?: 'primary' | 'secondary' | 'tertiary' | 'muted' | 'success' | 'warning' | 'danger';
     /** Font family.
      * @default "sans" */
     font?: 'sans' | 'mono';

package/dist/components/Text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACjF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;yBACqB;IACrB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAClN,0BAA0B;IAC1B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;6DAEyD;IACzD,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACjF;2BACuB;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD;4BACwB;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;IACvD;yBACqB;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;4EAEwE;IACxE,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D;mEAC+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkDD,eAAO,MAAM,IAAI;;CAEf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACjF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;yBACqB;IACrB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAClN,0BAA0B;IAC1B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;6DAEyD;IACzD,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACjF;2BACuB;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD;;;4BAGwB;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC1F;yBACqB;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;4EAEwE;IACxE,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D;mEAC+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkDD,eAAO,MAAM,IAAI;;CAEf,CAAC"}

package/dist/data-table.cjs

@@ -1,5 +1,27 @@
 "use client";
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
@@ -25,16 +47,38 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 let _reactTable = null;
-let _reactTableLoaded = false;
+let _reactTableLoadPromise = null;
 let _reactTableFailed = false;
 function loadReactTable() {
-  if (_reactTableLoaded) return;
-  _reactTableLoaded = true;
-  try {
-    _reactTable = require("@tanstack/react-table");
-  } catch {
-    _reactTableFailed = true;
+  if (!_reactTableLoadPromise) {
+    _reactTableLoadPromise = (async () => {
+      try {
+        _reactTable = await import("@tanstack/react-table");
+      } catch {
+        _reactTableFailed = true;
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] DataTable: @tanstack/react-table is not installed. Rendering a static table without sorting, selection, or expansion. Install it with: npm install @tanstack/react-table"
+          );
+        }
+      }
+    })();
   }
+  return _reactTableLoadPromise;
+}
+function useReactTableDeps() {
+  const [, rerender] = React__namespace.useReducer((n) => n + 1, 0);
+  React__namespace.useEffect(() => {
+    if (_reactTable || _reactTableFailed) return;
+    let active = true;
+    void loadReactTable().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return _reactTable ? "ready" : _reactTableFailed ? "failed" : "pending";
 }
 function getColumnSizeStyle(column) {
   const { size, minSize, maxSize } = column.columnDef;
@@ -49,6 +93,24 @@ function getColumnSizeStyle(column) {
     maxWidth: maxSize ?? resolvedSize
   };
 }
+function computeTableClasses(opts) {
+  const densityClass = opts.density === "condensed" ? DataTable_module.default.densityCondensed : opts.density === "regular" ? DataTable_module.default.densityRegular : opts.density === "relaxed" ? DataTable_module.default.densityRelaxed : void 0;
+  const rootClasses = [
+    DataTable_module.default.table,
+    opts.hasExplicitColumnSizing && DataTable_module.default.fixedLayout,
+    DataTable_module.default[opts.size],
+    densityClass,
+    opts.striped && DataTable_module.default.striped,
+    opts.className
+  ].filter(Boolean).join(" ");
+  const wrapperClasses = [
+    DataTable_module.default.wrapper,
+    opts.bordered && DataTable_module.default.bordered,
+    opts.wrapperClassName,
+    opts.wrapperPropsClassName
+  ].filter(Boolean).join(" ");
+  return { rootClasses, wrapperClasses };
+}
 function isInteractiveTarget(target, currentTarget) {
   if (!(target instanceof Element)) return false;
   const interactiveElement = target.closest(
@@ -58,7 +120,7 @@ function isInteractiveTarget(target, currentTarget) {
     interactiveElement && interactiveElement !== currentTarget && currentTarget.contains(interactiveElement)
   );
 }
-function DataTableRoot({
+function DataTableLive({
   columns: userColumns,
   data,
   getRowId,
@@ -92,12 +154,6 @@ function DataTableRoot({
   "aria-describedby": ariaDescribedBy,
   ...htmlProps
 }) {
-  loadReactTable();
-  if (_reactTableFailed || !_reactTable) {
-    throw new Error(
-      "[@usefragments/ui] DataTable: @tanstack/react-table is not installed. Install it with: npm install @tanstack/react-table"
-    );
-  }
   const { flexRender, getCoreRowModel, getExpandedRowModel, getSortedRowModel, useReactTable } = _reactTable;
   const tableRef = React__namespace.useRef(null);
   DataTable_support.useArrowKeyRowNav(tableRef, !!onRowClick);
@@ -169,22 +225,17 @@ function DataTableRoot({
     enableExpanding: hasSubRows
   });
   const isEmpty = !loading && data.length === 0;
-  const densityClass = density === "condensed" ? DataTable_module.default.densityCondensed : density === "regular" ? DataTable_module.default.densityRegular : density === "relaxed" ? DataTable_module.default.densityRelaxed : void 0;
-  const rootClasses = [
-    DataTable_module.default.table,
-    hasExplicitColumnSizing && DataTable_module.default.fixedLayout,
-    DataTable_module.default[size],
-    densityClass,
-    striped && DataTable_module.default.striped,
-    className
-  ].filter(Boolean).join(" ");
   const { className: wrapperPropsClassName, ...restWrapperProps } = wrapperProps ?? {};
-  const wrapperClasses = [
-    DataTable_module.default.wrapper,
-    bordered && DataTable_module.default.bordered,
+  const { rootClasses, wrapperClasses } = computeTableClasses({
+    size,
+    density,
+    striped,
+    bordered,
+    hasExplicitColumnSizing,
+    className,
     wrapperClassName,
     wrapperPropsClassName
-  ].filter(Boolean).join(" ");
+  });
   if (isEmpty) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ...restWrapperProps, className: wrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "table",
@@ -327,6 +378,135 @@ function DataTableRoot({
     }
   ) });
 }
+function staticColumnSizeStyle(col) {
+  const { size, minSize, maxSize } = col;
+  if (size === void 0 && minSize === void 0 && maxSize === void 0) return void 0;
+  const resolved = size ?? minSize ?? maxSize;
+  return { width: resolved, minWidth: minSize ?? resolved, maxWidth: maxSize ?? resolved };
+}
+function staticCellContent(col, row, index2) {
+  const raw = col.accessorFn ? col.accessorFn(row) : col.accessorKey ? row[col.accessorKey] : void 0;
+  if (typeof col.cell === "function") {
+    try {
+      return col.cell({
+        row: { original: row, id: String(index2), index: index2, depth: 0 },
+        getValue: () => raw,
+        column: { id: col.id ?? col.accessorKey ?? "" }
+      });
+    } catch {
+    }
+  }
+  return typeof raw === "string" || typeof raw === "number" ? raw : null;
+}
+function DataTableStatic({
+  pending,
+  columns,
+  data,
+  getRowId,
+  emptyMessage = "No data available",
+  emptyState,
+  loading = false,
+  skeletonRows = 6,
+  density,
+  hideHeader = false,
+  size = "md",
+  className,
+  caption,
+  captionHidden = false,
+  striped = false,
+  bordered = false,
+  wrapperClassName,
+  wrapperProps,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  // Interactive props are inert without the peer — accepted but unused.
+  sortable: _sortable,
+  sorting: _sorting,
+  onSortingChange: _onSortingChange,
+  selectable: _selectable,
+  showCheckbox: _showCheckbox,
+  rowSelection: _rowSelection,
+  onRowSelectionChange: _onRowSelectionChange,
+  onRowClick: _onRowClick,
+  getRowProps: _getRowProps,
+  getSubRows: _getSubRows,
+  expanded: _expanded,
+  onExpandedChange: _onExpandedChange,
+  ...htmlProps
+}) {
+  const hasExplicitColumnSizing = columns.some(
+    (column) => column.size !== void 0 || column.minSize !== void 0 || column.maxSize !== void 0
+  );
+  const { className: wrapperPropsClassName, ...restWrapperProps } = wrapperProps ?? {};
+  const { rootClasses, wrapperClasses } = computeTableClasses({
+    size,
+    density,
+    striped,
+    bordered,
+    hasExplicitColumnSizing,
+    className,
+    wrapperClassName,
+    wrapperPropsClassName
+  });
+  const showSkeleton = pending || loading;
+  const isEmpty = !showSkeleton && data.length === 0;
+  const columnCount = Math.max(columns.length, 1);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...restWrapperProps, className: wrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "table",
+    {
+      ...htmlProps,
+      className: rootClasses,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      "aria-busy": showSkeleton || void 0,
+      children: [
+        caption && /* @__PURE__ */ jsxRuntime.jsx("caption", { className: captionHidden ? DataTable_module.default.captionHidden : DataTable_module.default.caption, children: caption }),
+        !hideHeader && !isEmpty && /* @__PURE__ */ jsxRuntime.jsx("thead", { className: DataTable_module.default.thead, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: DataTable_module.default.headerRow, children: columns.map((col, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          "th",
+          {
+            className: DataTable_module.default.th,
+            style: staticColumnSizeStyle(col),
+            scope: "col",
+            "data-align": col.align,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: DataTable_module.default.headerContent, children: typeof col.header === "string" ? col.header : col.id ?? col.accessorKey ?? "" })
+          },
+          col.id ?? col.accessorKey ?? colIndex
+        )) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: DataTable_module.default.tbody, children: showSkeleton ? /* @__PURE__ */ jsxRuntime.jsx(
+          DataTable_support.DataTableSkeletonRows,
+          {
+            rowCount: skeletonRows,
+            columnCount,
+            rowClassName: DataTable_module.default.row,
+            cellClassName: DataTable_module.default.td,
+            barClassName: DataTable_module.default.skeletonBar
+          }
+        ) : isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: DataTable_module.default.row, children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: DataTable_module.default.td, colSpan: columnCount, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: DataTable_module.default.emptyState, children: emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: DataTable_module.default.emptyMessage, children: emptyMessage }) }) }) }) : data.map((row, rowIndex) => {
+          const rowKey = (getRowId == null ? void 0 : getRowId(row)) ?? rowIndex;
+          return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: DataTable_module.default.row, children: columns.map((col, colIndex) => {
+            const content = staticCellContent(col, row, rowIndex);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                className: [DataTable_module.default.td, col.truncate && DataTable_module.default.truncate].filter(Boolean).join(" "),
+                "data-align": col.align,
+                title: typeof content === "string" ? content : void 0,
+                style: staticColumnSizeStyle(col),
+                children: content
+              },
+              col.id ?? col.accessorKey ?? colIndex
+            );
+          }) }, rowKey);
+        }) })
+      ]
+    }
+  ) });
+}
+function DataTableRoot(props) {
+  const deps = useReactTableDeps();
+  if (deps === "ready") return /* @__PURE__ */ jsxRuntime.jsx(DataTableLive, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DataTableStatic, { ...props, pending: deps === "pending" });
+}
 function createColumns(columns) {
   return columns.map((col) => ({
     id: col.key,
@@ -340,7 +520,9 @@ function createColumns(columns) {
 }
 const DataTable = Object.assign(DataTableRoot, {
   Root: DataTableRoot,
-  Columns: createColumns
+  Columns: createColumns,
+  /** Start resolving @tanstack/react-table before first render (optional). */
+  preload: loadReactTable
 });
 exports.DataTable = DataTable;
 exports.createColumns = createColumns;