@usefragments/ui 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefragments/ui",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "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/components/DatePicker/index.tsx

@@ -2,8 +2,6 @@
 
 import * as React from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { DayFlag, DayPicker, SelectionState, UI } from "react-day-picker";
-import { format as formatDateWithPattern } from "date-fns";
 import { useFormFieldIds, type FormFieldProps } from "../../utils/aria";
 import { useResolvedControlSize } from "../ComponentDefaults";
 import styles from "./DatePicker.module.scss";
@@ -186,15 +184,30 @@ function useDatePickerContext() {
 // ============================================
 // Default formatters
 // ============================================
+//
+// Zero-dependency `Intl.DateTimeFormat` so the default trigger label needs no
+// optional peer. `date-fns` remains an optional peer only for consumers who pass
+// their own `formatDate`/`formatRange`; the default path never imports it, so a
+// bundler that pulls DatePicker into the graph does not fail on a missing peer.
+const longDateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "long",
+  day: "numeric",
+  year: "numeric",
+});
+const mediumDateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "2-digit",
+  year: "numeric",
+});
 
 function defaultFormatDate(date: Date): string {
-  return formatDateWithPattern(date, "PPP");
+  return longDateFormatter.format(date);
 }
 
 function defaultFormatRange(range: DateRange): string {
   if (!range.from) return "";
-  if (!range.to) return formatDateWithPattern(range.from, "LLL dd, y");
-  return `${formatDateWithPattern(range.from, "LLL dd, y")} - ${formatDateWithPattern(range.to, "LLL dd, y")}`;
+  if (!range.to) return mediumDateFormatter.format(range.from);
+  return `${mediumDateFormatter.format(range.from)} - ${mediumDateFormatter.format(range.to)}`;
 }
 
 function formatDateForHiddenInput(date?: Date): string {
@@ -205,11 +218,48 @@ function formatDateForHiddenInput(date?: Date): string {
   return `${year}-${month}-${day}`;
 }
 
+// ============================================
+// Lazy-loaded dependency (react-day-picker)
+// ============================================
+//
+// Loaded on demand via require() so the barrel never statically references the
+// optional `react-day-picker` peer. Importing anything else from
+// @usefragments/ui must not drag the calendar (or its transitive `date-fns`
+// dependency) into a consumer's build graph. Mirrors the Chart/recharts pattern.
+
+type DayPickerComponent = React.ComponentType<Record<string, unknown>>;
+type RdpEnum = Record<string, string>;
+
+let _DayPicker: DayPickerComponent | null = null;
+let _UI: RdpEnum | null = null;
+let _SelectionState: RdpEnum | null = null;
+let _DayFlag: RdpEnum | null = null;
+let _rdpLoaded = false;
+let _rdpFailed = false;
+
+function loadDayPickerDeps(): void {
+  if (_rdpLoaded) return;
+  _rdpLoaded = true;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const rdp = require("react-day-picker");
+    _DayPicker = rdp.DayPicker as DayPickerComponent;
+    _UI = rdp.UI as RdpEnum;
+    _SelectionState = rdp.SelectionState as RdpEnum;
+    _DayFlag = rdp.DayFlag as RdpEnum;
+  } catch {
+    _rdpFailed = true;
+  }
+}
+
 // ============================================
 // ClassNames mapping (built lazily)
 // ============================================
 
 function getCalendarClassNames() {
+  const UI = _UI!;
+  const SelectionState = _SelectionState!;
+  const DayFlag = _DayFlag!;
   return {
     [UI.Root]: styles.calendar,
     [UI.Months]: styles.months,
@@ -517,6 +567,15 @@ function DatePickerCalendar({
     []
   );
 
+  loadDayPickerDeps();
+  if (_rdpFailed || !_DayPicker || !_UI) {
+    // react-day-picker is an optional peer: render nothing rather than crash
+    // when a consumer mounts <DatePicker> without installing the calendar dep.
+    return null;
+  }
+  const DayPicker = _DayPicker;
+  const UI = _UI;
+
   const calendarClassNames = getCalendarClassNames();
 
   const calendarClasses = className

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 {};