@usefragments/ui 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefragments/ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -99,6 +99,16 @@
         "default": "./dist/data-table.cjs"
       }
     },
+    "./data-table-virtual": {
+      "import": {
+        "types": "./dist/components/DataTable/DataTable.virtual.d.ts",
+        "default": "./dist/data-table-virtual.js"
+      },
+      "require": {
+        "types": "./dist/components/DataTable/DataTable.virtual.d.ts",
+        "default": "./dist/data-table-virtual.cjs"
+      }
+    },
     "./editor": {
       "import": {
         "types": "./dist/components/Editor/index.d.ts",
@@ -110,10 +120,12 @@
       }
     },
     "./styles": {
+      "types": "./src/styles/styles.d.ts",
       "sass": "./src/styles/globals.scss",
       "default": "./dist/assets/ui.css"
     },
     "./globals": {
+      "types": "./src/styles/styles.d.ts",
       "sass": "./src/styles/globals.scss",
       "default": "./dist/assets/ui.css"
     },
@@ -155,6 +167,44 @@
     "remark-gfm": ">=4.0.0",
     "shiki": ">=1.0.0"
   },
+  "peerDependenciesMeta": {
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    },
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "react-colorful": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@base-ui/react": "1.6.0",
     "@phosphor-icons/react": "^2.1.10"
@@ -190,7 +240,7 @@
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
     "vitest-axe": "^0.1.0",
-    "@usefragments/core": "1.3.0"
+    "@usefragments/core": "1.4.0"
   },
   "files": [
     "src",

package/src/components/DataTable/index.tsx

@@ -5,13 +5,40 @@ import styles from "./DataTable.module.scss";
 import { Checkbox } from "../Checkbox";
 import { ExpandIcon, SortAscIcon, SortDescIcon, SortIcon } from "./DataTable.icons";
 import { DataTableSkeletonRows, useArrowKeyRowNav } from "./DataTable.support";
-import {
-  flexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
+
+// ============================================
+// Dependency (@tanstack/react-table) — lazy-required
+// ============================================
+// `@tanstack/react-table` is an optional peer dependency. It is pulled in via a
+// synchronous `require()` (mirroring Chart/Editor) rather than a static ESM
+// import so a bundler's dep-optimizer (e.g. Vite dev) does not create a static
+// import edge for consumers who only use, say, `{ Button }`. `require` resolves
+// synchronously, so `useReactTable` (a hook) is available before the first hook
+// call and hook order stays stable across renders. When the peer is absent the
+// component throws a friendly install message on first render.
+
+type ReactTableModule = {
+  flexRender: (...args: any[]) => React.ReactNode;
+  getCoreRowModel: (...args: any[]) => any;
+  getExpandedRowModel: (...args: any[]) => any;
+  getSortedRowModel: (...args: any[]) => any;
+  useReactTable: (options: any) => any;
+};
+
+let _reactTable: ReactTableModule | null = null;
+let _reactTableLoaded = false;
+let _reactTableFailed = false;
+
+function loadReactTable() {
+  if (_reactTableLoaded) return;
+  _reactTableLoaded = true;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    _reactTable = require("@tanstack/react-table") as ReactTableModule;
+  } catch {
+    _reactTableFailed = true;
+  }
+}
 
 /** Horizontal alignment for a column's header + cells. */
 export type ColumnAlign = "left" | "right" | "center";
@@ -50,15 +77,6 @@ export type DataTableRowClickEvent =
 
 export type DataTableColumn<T> = ColumnDef<T, unknown>;
 
-// ============================================
-// Dependency (@tanstack/react-table)
-// ============================================
-// Statically imported (ESM) so DataTable works in every bundler, including
-// browser SPAs (Vite) where `require` is unavailable. `useReactTable` is a
-// hook and must resolve synchronously on first render. The package is an
-// optional peer dep + `sideEffects: false`, so this import is tree-shaken
-// out of bundles that never import DataTable.
-
 export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElement>, "onClick"> {
   /** Column definitions */
   columns: DataTableColumn<T>[];
@@ -186,6 +204,16 @@ function DataTableRoot<T>({
   "aria-describedby": ariaDescribedBy,
   ...htmlProps
 }: DataTableProps<T>) {
+  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<HTMLTableElement>(null);
   useArrowKeyRowNav(tableRef, !!onRowClick);
 

package/src/index.ts

@@ -257,15 +257,14 @@ export {
   type ExpandedState,
 } from "./components/DataTable";
 
-// DataTable row virtualization (opt-in; requires @tanstack/react-virtual)
-export {
-  DataTableVirtual,
-  useTableVirtualizer,
-  type DataTableVirtualProps,
-  type UseTableVirtualizerOptions,
-  type UseTableVirtualizerResult,
-  type VirtualTableRow,
-} from "./components/DataTable/DataTable.virtual";
+// DataTable row virtualization (opt-in; requires @tanstack/react-virtual).
+// Intentionally NOT re-exported from the main barrel: `useTableVirtualizer`
+// wraps a hook that must resolve synchronously, so — unlike DataTable/Chart/
+// Editor — it cannot be lazy-required. Re-exporting it here (or routing it
+// through the `./data-table` subpath, which the main barrel imports) would
+// statically pull @tanstack/react-virtual into every consumer's Button-only
+// build. It lives behind its own dedicated subpath the barrel never imports:
+//   import { DataTableVirtual, useTableVirtualizer } from "@usefragments/ui/data-table-virtual";
 
 // EmptyState
 export {

package/src/styles/styles.d.ts

@@ -0,0 +1,8 @@
+// Ambient type surface for the side-effect style entrypoints
+// (`@usefragments/ui/styles` and `@usefragments/ui/globals`). These specifiers
+// resolve to compiled CSS (or the raw SCSS under the `sass` condition) and carry
+// no runtime exports, so a bare `import "@usefragments/ui/styles";` needs a
+// resolvable `types` target to keep TypeScript from erroring. This file ships in
+// the published tarball via the package `files: ["src"]` entry and is referenced
+// by the `types` condition of both exports in `publishConfig`.
+export {};