@usefragments/ui 1.1.1 → 1.3.0

package/dist/components/TableOfContents/index.cjs

@@ -65,11 +65,7 @@ function TableOfContentsItem({
 }) {
   const { depth } = React__namespace.useContext(TocContext);
   const effectiveDepth = depth > 0 ? depth : indent ? 1 : 0;
-  const linkClasses = [
-    TableOfContents_module.default.link,
-    active && TableOfContents_module.default.active,
-    className
-  ].filter(Boolean).join(" ");
+  const linkClasses = [TableOfContents_module.default.link, active && TableOfContents_module.default.active, className].filter(Boolean).join(" ");
   const handleClick = (e) => {
     onClick == null ? void 0 : onClick(e);
     if (e.defaultPrevented) return;
@@ -80,29 +76,21 @@ function TableOfContentsItem({
       window.history.replaceState(null, "", `#${id}`);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { className: TableOfContents_module.default.item, "data-depth": effectiveDepth, "data-active": active || void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
     {
-      className: TableOfContents_module.default.item,
-      "data-depth": effectiveDepth,
-      "data-active": active || void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "a",
-        {
-          ...htmlProps,
-          href: `#${id}`,
-          className: linkClasses,
-          onClick: handleClick,
-          "aria-current": active ? "location" : void 0,
-          children: [
-            leading != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.leading, children: leading }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.linkLabel, children }),
-            trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.trailing, children: trailing })
-          ]
-        }
-      )
+      ...htmlProps,
+      href: `#${id}`,
+      className: linkClasses,
+      onClick: handleClick,
+      "aria-current": active ? "location" : void 0,
+      children: [
+        leading != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.leading, children: leading }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.linkLabel, children }),
+        trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.trailing, children: trailing })
+      ]
     }
-  );
+  ) });
 }
 function useControlledOpen(controlled, defaultValue, onChange) {
   const [internal, setInternal] = React__namespace.useState(defaultValue);
@@ -145,24 +133,16 @@ function TableOfContentsGroup({
     trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TableOfContents_module.default.trailing, children: trailing })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "li",
+    /* @__PURE__ */ jsxRuntime.jsx("li", { className: TableOfContents_module.default.groupHeaderRow, "data-depth": depth, "data-active": active || void 0, children: isToggleable ? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
       {
-        className: TableOfContents_module.default.groupHeaderRow,
-        "data-depth": depth,
-        "data-active": active || void 0,
-        children: isToggleable ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: headerClasses,
-            onClick: () => setOpen(!open),
-            "aria-expanded": isOpen,
-            children: headerContent
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headerClasses, children: headerContent })
+        type: "button",
+        className: headerClasses,
+        onClick: () => setOpen(!open),
+        "aria-expanded": isOpen,
+        children: headerContent
       }
-    ),
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headerClasses, children: headerContent }) }),
     isOpen && /* @__PURE__ */ jsxRuntime.jsx(TocContext.Provider, { value: { depth: depth + 1 }, children })
   ] });
 }

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 export interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
     /** Label for the nav landmark (default: "Table of contents") */
@@ -8,7 +8,7 @@ export interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement>
     /** Hide the title */
     hideTitle?: boolean;
 }
-export interface TableOfContentsItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
+export interface TableOfContentsItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
     children: React.ReactNode;
     /** The heading ID to link to */
     id: string;
@@ -42,7 +42,7 @@ export interface TableOfContentsGroupProps {
     /** Highlight the group label in accent — typically when a child is active. */
     active?: boolean;
 }
-declare function TableOfContentsRoot({ children, label, title, hideTitle, className, 'aria-label': ariaLabel, ...htmlProps }: TableOfContentsProps): import("react/jsx-runtime").JSX.Element;
+declare function TableOfContentsRoot({ children, label, title, hideTitle, className, "aria-label": ariaLabel, ...htmlProps }: TableOfContentsProps): import("react/jsx-runtime").JSX.Element;
 declare function TableOfContentsItem({ children, id, active, indent, leading, trailing, className, onClick, href: _href, ...htmlProps }: TableOfContentsItemProps): import("react/jsx-runtime").JSX.Element;
 declare function TableOfContentsGroup({ children, label, leading, trailing, defaultOpen, open: controlledOpen, onOpenChange, collapsible, disabled, active, }: TableOfContentsGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare const TableOfContents: typeof TableOfContentsRoot & {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableOfContents/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/G,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmCD,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,KAA2B,EAC3B,KAAsB,EACtB,SAAiB,EACjB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAetB;AAED,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,EAAE,EACF,MAAc,EACd,MAAc,EACd,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EAAE,KAAK,EACX,GAAG,SAAS,EACb,EAAE,wBAAwB,2CAyC1B;AAuBD,iBAAS,oBAAoB,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAkB,EAClB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAkB,EAClB,QAAgB,EAChB,MAAc,GACf,EAAE,yBAAyB,2CAqD3B;AAMD,eAAO,MAAM,eAAe;;;CAG1B,CAAC;AAGH,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableOfContents/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,CACX;IACC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmCD,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,KAA2B,EAC3B,KAAsB,EACtB,SAAiB,EACjB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAetB;AAED,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,EAAE,EACF,MAAc,EACd,MAAc,EACd,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EAAE,KAAK,EACX,GAAG,SAAS,EACb,EAAE,wBAAwB,2CAiC1B;AAuBD,iBAAS,oBAAoB,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAkB,EAClB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAkB,EAClB,QAAgB,EAChB,MAAc,GACf,EAAE,yBAAyB,2CA+C3B;AAMD,eAAO,MAAM,eAAe;;;CAG1B,CAAC;AAGH,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/TableOfContents/index.js

@@ -46,11 +46,7 @@ function TableOfContentsItem({
 }) {
   const { depth } = React.useContext(TocContext);
   const effectiveDepth = depth > 0 ? depth : indent ? 1 : 0;
-  const linkClasses = [
-    styles.link,
-    active && styles.active,
-    className
-  ].filter(Boolean).join(" ");
+  const linkClasses = [styles.link, active && styles.active, className].filter(Boolean).join(" ");
   const handleClick = (e) => {
     onClick == null ? void 0 : onClick(e);
     if (e.defaultPrevented) return;
@@ -61,29 +57,21 @@ function TableOfContentsItem({
       window.history.replaceState(null, "", `#${id}`);
     }
   };
-  return /* @__PURE__ */ jsx(
-    "li",
+  return /* @__PURE__ */ jsx("li", { className: styles.item, "data-depth": effectiveDepth, "data-active": active || void 0, children: /* @__PURE__ */ jsxs(
+    "a",
     {
-      className: styles.item,
-      "data-depth": effectiveDepth,
-      "data-active": active || void 0,
-      children: /* @__PURE__ */ jsxs(
-        "a",
-        {
-          ...htmlProps,
-          href: `#${id}`,
-          className: linkClasses,
-          onClick: handleClick,
-          "aria-current": active ? "location" : void 0,
-          children: [
-            leading != null && /* @__PURE__ */ jsx("span", { className: styles.leading, children: leading }),
-            /* @__PURE__ */ jsx("span", { className: styles.linkLabel, children }),
-            trailing != null && /* @__PURE__ */ jsx("span", { className: styles.trailing, children: trailing })
-          ]
-        }
-      )
+      ...htmlProps,
+      href: `#${id}`,
+      className: linkClasses,
+      onClick: handleClick,
+      "aria-current": active ? "location" : void 0,
+      children: [
+        leading != null && /* @__PURE__ */ jsx("span", { className: styles.leading, children: leading }),
+        /* @__PURE__ */ jsx("span", { className: styles.linkLabel, children }),
+        trailing != null && /* @__PURE__ */ jsx("span", { className: styles.trailing, children: trailing })
+      ]
     }
-  );
+  ) });
 }
 function useControlledOpen(controlled, defaultValue, onChange) {
   const [internal, setInternal] = React.useState(defaultValue);
@@ -126,24 +114,16 @@ function TableOfContentsGroup({
     trailing != null && /* @__PURE__ */ jsx("span", { className: styles.trailing, children: trailing })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "li",
+    /* @__PURE__ */ jsx("li", { className: styles.groupHeaderRow, "data-depth": depth, "data-active": active || void 0, children: isToggleable ? /* @__PURE__ */ jsx(
+      "button",
       {
-        className: styles.groupHeaderRow,
-        "data-depth": depth,
-        "data-active": active || void 0,
-        children: isToggleable ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: headerClasses,
-            onClick: () => setOpen(!open),
-            "aria-expanded": isOpen,
-            children: headerContent
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: headerClasses, children: headerContent })
+        type: "button",
+        className: headerClasses,
+        onClick: () => setOpen(!open),
+        "aria-expanded": isOpen,
+        children: headerContent
       }
-    ),
+    ) : /* @__PURE__ */ jsx("div", { className: headerClasses, children: headerContent }) }),
     isOpen && /* @__PURE__ */ jsx(TocContext.Provider, { value: { depth: depth + 1 }, children })
   ] });
 }

package/dist/{components/DataTable/DataTable.virtual.cjs → data-table-virtual.cjs}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const reactVirtual = require("@tanstack/react-virtual");
-const table = require("../../table.cjs");
+const table = require("./table.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/{components/DataTable/DataTable.virtual.js → data-table-virtual.js}

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { Table } from "../../table.js";
+import { Table } from "./table.js";
 function DataTableVirtualRoot({
   caption,
   captionHidden = false,

package/dist/data-table.cjs

@@ -6,7 +6,6 @@ const DataTable_module = require("./components/DataTable/DataTable.module.scss.c
 const index = require("./components/Checkbox/index.cjs");
 const DataTable_icons = require("./components/DataTable/DataTable.icons.cjs");
 const DataTable_support = require("./components/DataTable/DataTable.support.cjs");
-const reactTable = require("@tanstack/react-table");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -24,6 +23,18 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+let _reactTable = null;
+let _reactTableLoaded = false;
+let _reactTableFailed = false;
+function loadReactTable() {
+  if (_reactTableLoaded) return;
+  _reactTableLoaded = true;
+  try {
+    _reactTable = require("@tanstack/react-table");
+  } catch {
+    _reactTableFailed = true;
+  }
+}
 function getColumnSizeStyle(column) {
   const { size, minSize, maxSize } = column.columnDef;
   const hasExplicitSize = size !== void 0 || minSize !== void 0 || maxSize !== void 0;
@@ -80,6 +91,13 @@ 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);
   const [internalSorting, setInternalSorting] = React__namespace.useState([]);
@@ -129,14 +147,14 @@ function DataTableRoot({
     [columns]
   );
   const hasSubRows = !!getSubRows;
-  const table = reactTable.useReactTable({
+  const table = useReactTable({
     data,
     columns,
     getRowId,
     getSubRows,
-    getCoreRowModel: reactTable.getCoreRowModel(),
-    getSortedRowModel: sortable ? reactTable.getSortedRowModel() : void 0,
-    getExpandedRowModel: hasSubRows ? reactTable.getExpandedRowModel() : void 0,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: sortable ? getSortedRowModel() : void 0,
+    getExpandedRowModel: hasSubRows ? getExpandedRowModel() : void 0,
     state: {
       sorting: sortable ? sorting : void 0,
       rowSelection: selectable ? rowSelection : void 0,
@@ -205,9 +223,9 @@ function DataTableRoot({
               "data-align": header.column.columnDef.align,
               "aria-sort": sortDirection ? sortDirection === "asc" ? "ascending" : "descending" : canSort ? "none" : void 0,
               children: canSort ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: DataTable_module.default.sortButton, onClick: toggleSorting, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: DataTable_module.default.headerContent, children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: DataTable_module.default.headerContent, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: DataTable_module.default.sortIndicator, "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(DataTable_icons.SortAscIcon, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(DataTable_icons.SortDescIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(DataTable_icons.SortIcon, {}) })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: DataTable_module.default.headerContent, children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: DataTable_module.default.headerContent, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) })
             },
             header.id
           );
@@ -296,8 +314,8 @@ function DataTableRoot({
                         children: /* @__PURE__ */ jsxRuntime.jsx(DataTable_icons.ExpandIcon, { expanded: row.getIsExpanded() })
                       }
                     ),
-                    reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
-                  ] }) : reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+                    flexRender(cell.column.columnDef.cell, cell.getContext())
+                  ] }) : flexRender(cell.column.columnDef.cell, cell.getContext())
                 },
                 cell.id
               );

package/dist/data-table.js

@@ -5,7 +5,18 @@ import styles from "./components/DataTable/DataTable.module.scss.js";
 import { Checkbox } from "./components/Checkbox/index.js";
 import { SortAscIcon, SortDescIcon, SortIcon, ExpandIcon } from "./components/DataTable/DataTable.icons.js";
 import { useArrowKeyRowNav, DataTableSkeletonRows } from "./components/DataTable/DataTable.support.js";
-import { useReactTable, getExpandedRowModel, getSortedRowModel, getCoreRowModel, flexRender } from "@tanstack/react-table";
+let _reactTable = null;
+let _reactTableLoaded = false;
+let _reactTableFailed = false;
+function loadReactTable() {
+  if (_reactTableLoaded) return;
+  _reactTableLoaded = true;
+  try {
+    _reactTable = require("@tanstack/react-table");
+  } catch {
+    _reactTableFailed = true;
+  }
+}
 function getColumnSizeStyle(column) {
   const { size, minSize, maxSize } = column.columnDef;
   const hasExplicitSize = size !== void 0 || minSize !== void 0 || maxSize !== void 0;
@@ -62,6 +73,13 @@ 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.useRef(null);
   useArrowKeyRowNav(tableRef, !!onRowClick);
   const [internalSorting, setInternalSorting] = React.useState([]);

package/dist/index.cjs

@@ -29,7 +29,6 @@ const index$p = require("./components/Skeleton/index.cjs");
 const index$q = require("./components/Loading/index.cjs");
 const table = require("./table.cjs");
 const dataTable = require("./data-table.cjs");
-const DataTable_virtual = require("./components/DataTable/DataTable.virtual.cjs");
 const index$r = require("./components/EmptyState/index.cjs");
 const index$s = require("./components/Toast/index.cjs");
 const index$t = require("./components/Field/index.cjs");
@@ -40,36 +39,37 @@ const index$x = require("./components/Theme/index.cjs");
 const index$y = require("./components/Header/index.cjs");
 const index$z = require("./components/AppShell/index.cjs");
 const index$A = require("./components/Stack/index.cjs");
-const index$B = require("./components/Text/index.cjs");
-const index$C = require("./components/ButtonGroup/index.cjs");
-const index$D = require("./components/ToggleGroup/index.cjs");
-const index$E = require("./components/Slider/index.cjs");
+const index$B = require("./components/Main/index.cjs");
+const index$C = require("./components/Text/index.cjs");
+const index$D = require("./components/ButtonGroup/index.cjs");
+const index$E = require("./components/ToggleGroup/index.cjs");
+const index$F = require("./components/Slider/index.cjs");
 const colorpicker = require("./colorpicker.cjs");
 const datepicker = require("./datepicker.cjs");
-const index$F = require("./components/Prompt/index.cjs");
+const index$G = require("./components/Prompt/index.cjs");
 const codeblock = require("./codeblock.cjs");
-const index$G = require("./components/Icon/index.cjs");
-const index$H = require("./components/Image/index.cjs");
-const index$I = require("./components/Link/index.cjs");
-const index$J = require("./components/List/index.cjs");
-const index$K = require("./components/Listbox/index.cjs");
-const index$L = require("./components/Breadcrumbs/index.cjs");
-const index$M = require("./components/TableOfContents/index.cjs");
-const index$N = require("./components/Box/index.cjs");
-const index$O = require("./components/ScrollArea/index.cjs");
-const index$P = require("./components/Chip/index.cjs");
-const index$Q = require("./components/VisuallyHidden/index.cjs");
+const index$H = require("./components/Icon/index.cjs");
+const index$I = require("./components/Image/index.cjs");
+const index$J = require("./components/Link/index.cjs");
+const index$K = require("./components/List/index.cjs");
+const index$L = require("./components/Listbox/index.cjs");
+const index$M = require("./components/Breadcrumbs/index.cjs");
+const index$N = require("./components/TableOfContents/index.cjs");
+const index$O = require("./components/Box/index.cjs");
+const index$P = require("./components/ScrollArea/index.cjs");
+const index$Q = require("./components/Chip/index.cjs");
+const index$R = require("./components/VisuallyHidden/index.cjs");
 const markdown = require("./markdown.cjs");
-const index$R = require("./components/Message/index.cjs");
-const index$S = require("./components/ConversationList/index.cjs");
-const index$T = require("./components/ThinkingIndicator/index.cjs");
+const index$S = require("./components/Message/index.cjs");
+const index$T = require("./components/ConversationList/index.cjs");
+const index$U = require("./components/ThinkingIndicator/index.cjs");
 const chart = require("./chart.cjs");
 const fragmentsLogo = require("./assets/fragments-logo.cjs");
 const fragmentsWordmark = require("./assets/fragments-wordmark.cjs");
-const index$U = require("./components/NavigationMenu/index.cjs");
-const index$V = require("./components/Drawer/index.cjs");
-const index$W = require("./components/Pagination/index.cjs");
-const index$X = require("./components/Command/index.cjs");
+const index$V = require("./components/NavigationMenu/index.cjs");
+const index$W = require("./components/Drawer/index.cjs");
+const index$X = require("./components/Pagination/index.cjs");
+const index$Y = require("./components/Command/index.cjs");
 const editor = require("./editor.cjs");
 const a11y = require("./utils/a11y.cjs");
 const keyboardShortcuts = require("./utils/keyboard-shortcuts.cjs");
@@ -133,8 +133,6 @@ exports.LoadingScreen = index$q.LoadingScreen;
 exports.Table = table.Table;
 exports.DataTable = dataTable.DataTable;
 exports.createColumns = dataTable.createColumns;
-exports.DataTableVirtual = DataTable_virtual.DataTableVirtual;
-exports.useTableVirtualizer = DataTable_virtual.useTableVirtualizer;
 exports.EmptyState = index$r.EmptyState;
 exports.EmptyStateActions = index$r.EmptyStateActions;
 exports.EmptyStateDescription = index$r.EmptyStateDescription;
@@ -159,12 +157,13 @@ exports.useTheme = index$x.useTheme;
 exports.Header = index$y.Header;
 exports.AppShell = index$z.AppShell;
 exports.Stack = index$A.Stack;
-exports.Text = index$B.Text;
-exports.ButtonGroup = index$C.ButtonGroup;
-exports.ToggleGroup = index$D.ToggleGroup;
-exports.ToggleGroupItem = index$D.ToggleGroupItem;
-exports.ToggleGroupRoot = index$D.ToggleGroupRoot;
-exports.Slider = index$E.Slider;
+exports.Main = index$B.Main;
+exports.Text = index$C.Text;
+exports.ButtonGroup = index$D.ButtonGroup;
+exports.ToggleGroup = index$E.ToggleGroup;
+exports.ToggleGroupItem = index$E.ToggleGroupItem;
+exports.ToggleGroupRoot = index$E.ToggleGroupRoot;
+exports.Slider = index$F.Slider;
 exports.ColorPicker = colorpicker.ColorPicker;
 exports.DatePicker = datepicker.DatePicker;
 exports.DatePickerCalendar = datepicker.DatePickerCalendar;
@@ -172,51 +171,51 @@ exports.DatePickerContent = datepicker.DatePickerContent;
 exports.DatePickerPreset = datepicker.DatePickerPreset;
 exports.DatePickerRoot = datepicker.DatePickerRoot;
 exports.DatePickerTrigger = datepicker.DatePickerTrigger;
-exports.Prompt = index$F.Prompt;
-exports.usePromptContext = index$F.usePromptContext;
+exports.Prompt = index$G.Prompt;
+exports.usePromptContext = index$G.usePromptContext;
 exports.CodeBlock = codeblock.CodeBlock;
 exports.TabbedCodeBlock = codeblock.TabbedCodeBlock;
-exports.Icon = index$G.Icon;
-exports.Image = index$H.Image;
-exports.Link = index$I.Link;
-exports.List = index$J.List;
-exports.ListItem = index$J.ListItem;
-exports.ListRoot = index$J.ListRoot;
-exports.Listbox = index$K.Listbox;
-exports.ListboxEmpty = index$K.ListboxEmpty;
-exports.ListboxGroup = index$K.ListboxGroup;
-exports.ListboxItem = index$K.ListboxItem;
-exports.ListboxRoot = index$K.ListboxRoot;
-exports.Breadcrumbs = index$L.Breadcrumbs;
-exports.BreadcrumbsItem = index$L.BreadcrumbsItem;
-exports.BreadcrumbsRoot = index$L.BreadcrumbsRoot;
-exports.BreadcrumbsSeparator = index$L.BreadcrumbsSeparator;
-exports.TableOfContents = index$M.TableOfContents;
-exports.TableOfContentsGroup = index$M.TableOfContentsGroup;
-exports.TableOfContentsItem = index$M.TableOfContentsItem;
-exports.TableOfContentsRoot = index$M.TableOfContentsRoot;
-exports.Box = index$N.Box;
-exports.ScrollArea = index$O.ScrollArea;
-exports.Chip = index$P.Chip;
-exports.VisuallyHidden = index$Q.VisuallyHidden;
+exports.Icon = index$H.Icon;
+exports.Image = index$I.Image;
+exports.Link = index$J.Link;
+exports.List = index$K.List;
+exports.ListItem = index$K.ListItem;
+exports.ListRoot = index$K.ListRoot;
+exports.Listbox = index$L.Listbox;
+exports.ListboxEmpty = index$L.ListboxEmpty;
+exports.ListboxGroup = index$L.ListboxGroup;
+exports.ListboxItem = index$L.ListboxItem;
+exports.ListboxRoot = index$L.ListboxRoot;
+exports.Breadcrumbs = index$M.Breadcrumbs;
+exports.BreadcrumbsItem = index$M.BreadcrumbsItem;
+exports.BreadcrumbsRoot = index$M.BreadcrumbsRoot;
+exports.BreadcrumbsSeparator = index$M.BreadcrumbsSeparator;
+exports.TableOfContents = index$N.TableOfContents;
+exports.TableOfContentsGroup = index$N.TableOfContentsGroup;
+exports.TableOfContentsItem = index$N.TableOfContentsItem;
+exports.TableOfContentsRoot = index$N.TableOfContentsRoot;
+exports.Box = index$O.Box;
+exports.ScrollArea = index$P.ScrollArea;
+exports.Chip = index$Q.Chip;
+exports.VisuallyHidden = index$R.VisuallyHidden;
 exports.Markdown = markdown.Markdown;
-exports.Message = index$R.Message;
-exports.MessageActions = index$R.MessageActions;
-exports.MessageAvatar = index$R.MessageAvatar;
-exports.MessageContent = index$R.MessageContent;
-exports.MessageRoot = index$R.MessageRoot;
-exports.MessageTimestamp = index$R.MessageTimestamp;
-exports.useMessageContext = index$R.useMessageContext;
-exports.ConversationList = index$S.ConversationList;
-exports.ConversationListRoot = index$S.ConversationListRoot;
-exports.DateSeparator = index$S.DateSeparator;
-exports.TypingIndicator = index$S.TypingIndicator;
-exports.useConversationList = index$S.useConversationList;
-exports.ThinkingIndicator = index$T.ThinkingIndicator;
-exports.ThinkingIndicatorRoot = index$T.ThinkingIndicatorRoot;
-exports.ThinkingStep = index$T.ThinkingStep;
-exports.ThinkingSteps = index$T.ThinkingSteps;
-exports.useThinkingIndicatorContext = index$T.useThinkingIndicatorContext;
+exports.Message = index$S.Message;
+exports.MessageActions = index$S.MessageActions;
+exports.MessageAvatar = index$S.MessageAvatar;
+exports.MessageContent = index$S.MessageContent;
+exports.MessageRoot = index$S.MessageRoot;
+exports.MessageTimestamp = index$S.MessageTimestamp;
+exports.useMessageContext = index$S.useMessageContext;
+exports.ConversationList = index$T.ConversationList;
+exports.ConversationListRoot = index$T.ConversationListRoot;
+exports.DateSeparator = index$T.DateSeparator;
+exports.TypingIndicator = index$T.TypingIndicator;
+exports.useConversationList = index$T.useConversationList;
+exports.ThinkingIndicator = index$U.ThinkingIndicator;
+exports.ThinkingIndicatorRoot = index$U.ThinkingIndicatorRoot;
+exports.ThinkingStep = index$U.ThinkingStep;
+exports.ThinkingSteps = index$U.ThinkingSteps;
+exports.useThinkingIndicatorContext = index$U.useThinkingIndicatorContext;
 exports.ChartContainer = chart.ChartContainer;
 exports.ChartLegend = chart.ChartLegend;
 exports.ChartLegendContent = chart.ChartLegendContent;
@@ -226,20 +225,20 @@ exports.useChartConfig = chart.useChartConfig;
 exports.FragmentsLogo = fragmentsLogo.FragmentsLogo;
 exports.fragmentsLogoSvg = fragmentsLogo.fragmentsLogoSvg;
 exports.FragmentsWordmark = fragmentsWordmark.FragmentsWordmark;
-exports.NavigationMenu = index$U.NavigationMenu;
-exports.NavigationMenuContent = index$U.NavigationMenuContent;
-exports.NavigationMenuIndicator = index$U.NavigationMenuIndicator;
-exports.NavigationMenuItem = index$U.NavigationMenuItem;
-exports.NavigationMenuLink = index$U.NavigationMenuLink;
-exports.NavigationMenuList = index$U.NavigationMenuList;
-exports.NavigationMenuMobileContent = index$U.NavigationMenuMobileContent;
-exports.NavigationMenuMobileSection = index$U.NavigationMenuMobileSection;
-exports.NavigationMenuRoot = index$U.NavigationMenuRoot;
-exports.NavigationMenuTrigger = index$U.NavigationMenuTrigger;
-exports.NavigationMenuViewport = index$U.NavigationMenuViewport;
-exports.Drawer = index$V.Drawer;
-exports.Pagination = index$W.Pagination;
-exports.Command = index$X.Command;
+exports.NavigationMenu = index$V.NavigationMenu;
+exports.NavigationMenuContent = index$V.NavigationMenuContent;
+exports.NavigationMenuIndicator = index$V.NavigationMenuIndicator;
+exports.NavigationMenuItem = index$V.NavigationMenuItem;
+exports.NavigationMenuLink = index$V.NavigationMenuLink;
+exports.NavigationMenuList = index$V.NavigationMenuList;
+exports.NavigationMenuMobileContent = index$V.NavigationMenuMobileContent;
+exports.NavigationMenuMobileSection = index$V.NavigationMenuMobileSection;
+exports.NavigationMenuRoot = index$V.NavigationMenuRoot;
+exports.NavigationMenuTrigger = index$V.NavigationMenuTrigger;
+exports.NavigationMenuViewport = index$V.NavigationMenuViewport;
+exports.Drawer = index$W.Drawer;
+exports.Pagination = index$X.Pagination;
+exports.Command = index$Y.Command;
 exports.Editor = editor.Editor;
 exports.EditorContentArea = editor.EditorContentArea;
 exports.EditorRoot = editor.EditorRoot;

package/dist/index.d.ts

@@ -27,7 +27,6 @@ export { Skeleton, type SkeletonProps, type SkeletonTextProps, type SkeletonVari
 export { Loading, LoadingRoot, LoadingInline, LoadingScreen, type LoadingProps, type LoadingSize, type LoadingVariant, type LoadingInlineProps, type LoadingScreenProps, } from "./components/Loading";
 export { Table, type TableProps, type TableRowProps, type TableCellProps, type TableHeaderCellProps, type TableCaptionProps, } from "./components/Table";
 export { DataTable, createColumns, type DataTableProps, type DataTableColumn, type ColumnDef, type ColumnAlign, type DataTableDensity, type SortingState, type RowSelectionState, type ExpandedState, } from "./components/DataTable";
-export { DataTableVirtual, useTableVirtualizer, type DataTableVirtualProps, type UseTableVirtualizerOptions, type UseTableVirtualizerResult, type VirtualTableRow, } from "./components/DataTable/DataTable.virtual";
 export { EmptyState, EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, type EmptyStateProps, type EmptyStateIconProps, type EmptyStateTitleProps, type EmptyStateDescriptionProps, type EmptyStateActionsProps, } from "./components/EmptyState";
 export { Toast, ToastProvider, useToast, type ToastProps, type ToastProviderProps, type ToastData, type ToastVariant, type ToastPosition, } from "./components/Toast";
 export { Field, type FieldProps, type FieldLabelProps, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldValidityProps, } from "./components/Field";
@@ -39,6 +38,7 @@ export { Theme, ThemeProvider, ThemeToggle, useTheme, configureTheme, type Theme
 export { Header, type HeaderProps, type HeaderBrandProps, type HeaderNavProps, type HeaderNavItemProps, type HeaderSearchProps, type HeaderActionsProps, type HeaderTriggerProps, type HeaderMobileNavProps, } from "./components/Header";
 export { AppShell, type AppShellProps, type AppShellLayout, type AppShellSlotVariant, type AppShellHeaderProps, type AppShellSidebarProps, type AppShellMainProps, type AppShellAsideProps, } from "./components/AppShell";
 export { Stack, type StackProps, type ResponsiveDirection, type ResponsiveGap, } from "./components/Stack";
+export { Main, type MainProps, type MainRegionProps, type MainMeasure } from "./components/Main";
 export { Text, type TextProps } from "./components/Text";
 export { ButtonGroup, type ButtonGroupProps } from "./components/ButtonGroup";
 export { ToggleGroup, ToggleGroupRoot, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps, } from "./components/ToggleGroup";