@usefragments/ui 1.3.3 → 1.4.0

package/src/components/ConversationList/index.tsx

@@ -13,6 +13,8 @@ export type AutoScrollBehavior = boolean | 'smart';
 export interface ConversationListProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Message components */
   children: React.ReactNode;
+  /** Show avatars for messages and typing indicators in this conversation */
+  showAvatars?: boolean;
   /** Auto-scroll behavior: true (always), false (never), or 'smart' (only when near bottom) */
   autoScroll?: AutoScrollBehavior;
   /** Callback when user scrolls to top (for loading history) */
@@ -47,12 +49,17 @@ export interface TypingIndicatorProps extends React.HTMLAttributes<HTMLDivElemen
 
 interface ConversationListContextValue {
   scrollToBottom: () => void;
+  showAvatars: boolean;
 }
 
 const ConversationListContext = React.createContext<ConversationListContextValue | null>(null);
 
+export function useOptionalConversationList() {
+  return React.useContext(ConversationListContext);
+}
+
 export function useConversationList() {
-  const context = React.useContext(ConversationListContext);
+  const context = useOptionalConversationList();
   if (!context) {
     throw new Error('useConversationList must be used within a ConversationList');
   }
@@ -113,11 +120,16 @@ function TypingIndicator({
   className,
   ...htmlProps
 }: TypingIndicatorProps) {
-  const classes = [styles.typingIndicator, className].filter(Boolean).join(' ');
+  const showAvatar = (useOptionalConversationList()?.showAvatars ?? true) && Boolean(avatar);
+  const classes = [
+    styles.typingIndicator,
+    !showAvatar && styles.withoutAvatar,
+    className,
+  ].filter(Boolean).join(' ');
 
   return (
-    <div {...htmlProps} className={classes} aria-label={`${name} is typing`}>
-      {avatar && <div className={styles.typingAvatar}>{avatar}</div>}
+    <div {...htmlProps} className={classes} role="status" aria-label={`${name} is typing`}>
+      {showAvatar && <div className={styles.typingAvatar}>{avatar}</div>}
       <div className={styles.typingContent}>
         <span className={styles.typingDot} />
         <span className={styles.typingDot} />
@@ -133,6 +145,7 @@ function TypingIndicator({
 
 function ConversationListRoot({
   children,
+  showAvatars = true,
   autoScroll = 'smart',
   onScrollTop,
   loadingHistory = false,
@@ -145,7 +158,6 @@ function ConversationListRoot({
   const containerRef = React.useRef<HTMLDivElement>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
   const isNearBottomRef = React.useRef(true);
-  const prevChildrenCountRef = React.useRef(0);
   const userOnScroll = htmlProps.onScroll;
 
   // Check if user is near the bottom
@@ -185,31 +197,33 @@ function ConversationListRoot({
     }
   }, [checkIsNearBottom, onScrollTop, scrollTopThreshold, userOnScroll]);
 
-  // Auto-scroll on new messages
-  React.useEffect(() => {
-    const childrenCount = React.Children.count(children);
-    const hasNewMessages = childrenCount > prevChildrenCountRef.current;
-    prevChildrenCountRef.current = childrenCount;
-
-    if (!hasNewMessages) return;
-
-    if (autoScroll === true) {
-      scrollToBottom();
-    } else if (autoScroll === 'smart' && isNearBottomRef.current) {
-      scrollToBottom();
-    }
-  }, [children, autoScroll, scrollToBottom]);
-
-  // Initial scroll to bottom
+  // Keep the reader at the newest content as the conversation grows.
+  //
+  // Child count is the wrong signal for this. A list whose messages are wrapped
+  // in a single element — a measured column, a virtualiser, a fragment the
+  // caller maps into — never changes count, so the list would pin once on mount
+  // and never again. And even when the count does change, the height keeps
+  // moving afterwards: markdown reflows, images decode, syntax highlighting
+  // lands, a streaming reply grows a character at a time. Rendered height is
+  // what actually moves the bottom of the list, so that is what this watches.
   React.useEffect(() => {
-    if (autoScroll) {
-      scrollToBottom('instant');
-    }
+    const content = contentRef.current;
+    if (!content || !autoScroll) return;
+
+    // Instant, not smooth: while a reply streams this fires on every frame of
+    // growth, and overlapping smooth scrolls fight each other into a stutter.
+    // The context's scrollToBottom() stays smooth for deliberate jumps.
+    const observer = new ResizeObserver(() => {
+      if (autoScroll === true || isNearBottomRef.current) scrollToBottom('instant');
+    });
+    observer.observe(content);
+    return () => observer.disconnect();
   }, [autoScroll, scrollToBottom]);
 
-  const contextValue: ConversationListContextValue = {
+  const contextValue = React.useMemo<ConversationListContextValue>(() => ({
     scrollToBottom,
-  };
+    showAvatars,
+  }), [scrollToBottom, showAvatars]);
 
   const hasChildren = React.Children.count(children) > 0;
 

package/src/components/DataTable/DataTable.contract.json

@@ -5,6 +5,13 @@
   "category": "display",
   "tags": ["table", "data", "grid", "list", "sorting", "tanstack"],
   "status": "stable",
+  "dependencies": [
+    {
+      "name": "@tanstack/react-table",
+      "version": ">=8.0.0",
+      "reason": "Optional — powers sorting, selection, and expansion; without it DataTable renders a static, non-interactive table."
+    }
+  ],
   "sourcePath": "src/components/DataTable/index.tsx",
   "exportName": "DataTable",
   "propsSummary": [
@@ -281,7 +288,7 @@
   },
   "ai": {
     "compositionPattern": "simple",
-    "subComponents": ["Root", "Columns"],
+    "subComponents": ["Root", "Columns", "preload"],
     "commonPatterns": [
       "<DataTable columns={createColumns([{key:\"name\",header:\"Name\"},{key:\"status\",header:\"Status\"}])} data={[{name:\"Item 1\",status:\"Active\"}]} />"
     ]

package/src/components/DataTable/index.tsx

@@ -7,15 +7,14 @@ import { ExpandIcon, SortAscIcon, SortDescIcon, SortIcon } from "./DataTable.ico
 import { DataTableSkeletonRows, useArrowKeyRowNav } from "./DataTable.support";
 
 // ============================================
-// Dependency (@tanstack/react-table) — lazy-required
+// Dependency (@tanstack/react-table) — lazy import()
 // ============================================
-// `@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.
+// `@tanstack/react-table` is an optional peer dependency, resolved with a
+// dynamic `import()` rather than `require()`: browser ESM bundles have no
+// `require`, so the synchronous shape failed even with the peer installed
+// (same lazy-ESM shape as CodeBlock's shiki loader). While the module resolves
+// the table renders skeleton rows; if it is genuinely missing, a static
+// fallback table renders instead of throwing.
 
 type ReactTableModule = {
   flexRender: (...args: any[]) => React.ReactNode;
@@ -26,18 +25,43 @@ type ReactTableModule = {
 };
 
 let _reactTable: ReactTableModule | null = null;
-let _reactTableLoaded = false;
+let _reactTableLoadPromise: Promise<void> | null = null;
 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;
+function loadReactTable(): Promise<void> {
+  if (!_reactTableLoadPromise) {
+    _reactTableLoadPromise = (async () => {
+      try {
+        _reactTable = (await import("@tanstack/react-table")) as unknown as ReactTableModule;
+      } 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;
+}
+
+/** Kick off the lazy load on mount and re-render once it settles. */
+function useReactTableDeps(): "ready" | "pending" | "failed" {
+  const [, rerender] = React.useReducer((n: number) => n + 1, 0);
+  React.useEffect(() => {
+    if (_reactTable || _reactTableFailed) return;
+    let active = true;
+    void loadReactTable().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return _reactTable ? "ready" : _reactTableFailed ? "failed" : "pending";
 }
 
 /** Horizontal alignment for a column's header + cells. */
@@ -156,6 +180,48 @@ function getColumnSizeStyle(column: {
   };
 }
 
+function computeTableClasses(opts: {
+  size: "sm" | "md";
+  density?: DataTableDensity;
+  striped: boolean;
+  bordered: boolean;
+  hasExplicitColumnSizing: boolean;
+  className?: string;
+  wrapperClassName?: string;
+  wrapperPropsClassName?: string;
+}): { rootClasses: string; wrapperClasses: string } {
+  const densityClass =
+    opts.density === "condensed"
+      ? styles.densityCondensed
+      : opts.density === "regular"
+        ? styles.densityRegular
+        : opts.density === "relaxed"
+          ? styles.densityRelaxed
+          : undefined;
+
+  const rootClasses = [
+    styles.table,
+    opts.hasExplicitColumnSizing && styles.fixedLayout,
+    styles[opts.size],
+    densityClass,
+    opts.striped && styles.striped,
+    opts.className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const wrapperClasses = [
+    styles.wrapper,
+    opts.bordered && styles.bordered,
+    opts.wrapperClassName,
+    opts.wrapperPropsClassName,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return { rootClasses, wrapperClasses };
+}
+
 function isInteractiveTarget(target: EventTarget | null, currentTarget: HTMLTableRowElement) {
   if (!(target instanceof Element)) return false;
 
@@ -170,7 +236,7 @@ function isInteractiveTarget(target: EventTarget | null, currentTarget: HTMLTabl
   );
 }
 
-function DataTableRoot<T>({
+function DataTableLive<T>({
   columns: userColumns,
   data,
   getRowId,
@@ -204,15 +270,10 @@ 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"
-    );
-  }
+  // Only rendered once useReactTableDeps() reports "ready", so the module is
+  // guaranteed here and hook order stays stable for this component's lifetime.
   const { flexRender, getCoreRowModel, getExpandedRowModel, getSortedRowModel, useReactTable } =
-    _reactTable;
+    _reactTable as ReactTableModule;
 
   const tableRef = React.useRef<HTMLTableElement>(null);
   useArrowKeyRowNav(tableRef, !!onRowClick);
@@ -298,34 +359,17 @@ function DataTableRoot<T>({
   });
 
   const isEmpty = !loading && data.length === 0;
-  const densityClass =
-    density === "condensed"
-      ? styles.densityCondensed
-      : density === "regular"
-        ? styles.densityRegular
-        : density === "relaxed"
-          ? styles.densityRelaxed
-          : undefined;
-
-  const rootClasses = [
-    styles.table,
-    hasExplicitColumnSizing && styles.fixedLayout,
-    styles[size],
-    densityClass,
-    striped && styles.striped,
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
   const { className: wrapperPropsClassName, ...restWrapperProps } = wrapperProps ?? {};
-  const wrapperClasses = [
-    styles.wrapper,
-    bordered && styles.bordered,
+  const { rootClasses, wrapperClasses } = computeTableClasses({
+    size,
+    density,
+    striped,
+    bordered,
+    hasExplicitColumnSizing,
+    className,
     wrapperClassName,
     wrapperPropsClassName,
-  ]
-    .filter(Boolean)
-    .join(" ");
+  });
 
   if (isEmpty) {
     return (
@@ -542,6 +586,191 @@ function DataTableRoot<T>({
   );
 }
 
+// ============================================
+// Static fallback (peer resolving or missing)
+// ============================================
+
+function staticColumnSizeStyle<T>(col: DataTableColumn<T>): React.CSSProperties | undefined {
+  const { size, minSize, maxSize } = col;
+  if (size === undefined && minSize === undefined && maxSize === undefined) return undefined;
+  const resolved = size ?? minSize ?? maxSize;
+  return { width: resolved, minWidth: minSize ?? resolved, maxWidth: maxSize ?? resolved };
+}
+
+function staticCellContent<T>(col: DataTableColumn<T>, row: T, index: number): React.ReactNode {
+  const raw = col.accessorFn
+    ? col.accessorFn(row)
+    : col.accessorKey
+      ? (row as Record<string, unknown>)[col.accessorKey]
+      : undefined;
+  if (typeof col.cell === "function") {
+    try {
+      return col.cell({
+        row: { original: row, id: String(index), index, depth: 0 },
+        getValue: () => raw,
+        column: { id: col.id ?? col.accessorKey ?? "" },
+      });
+    } catch {
+      // Cell renderers that depend on TanStack row APIs fall back to the raw value.
+    }
+  }
+  return typeof raw === "string" || typeof raw === "number" ? raw : null;
+}
+
+/**
+ * Rendered while @tanstack/react-table resolves (skeleton rows) and when it is
+ * not installed (a plain, non-interactive table of the data). Sorting,
+ * selection, expansion, and row interactivity require the peer.
+ */
+function DataTableStatic<T>({
+  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
+}: DataTableProps<T> & { pending: boolean }) {
+  const hasExplicitColumnSizing = columns.some(
+    (column) =>
+      column.size !== undefined || column.minSize !== undefined || column.maxSize !== undefined
+  );
+  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 (
+    <div {...restWrapperProps} className={wrapperClasses}>
+      <table
+        {...htmlProps}
+        className={rootClasses}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy}
+        aria-busy={showSkeleton || undefined}
+      >
+        {caption && (
+          <caption className={captionHidden ? styles.captionHidden : styles.caption}>
+            {caption}
+          </caption>
+        )}
+        {!hideHeader && !isEmpty && (
+          <thead className={styles.thead}>
+            <tr className={styles.headerRow}>
+              {columns.map((col, colIndex) => (
+                <th
+                  key={col.id ?? col.accessorKey ?? colIndex}
+                  className={styles.th}
+                  style={staticColumnSizeStyle(col)}
+                  scope="col"
+                  data-align={col.align}
+                >
+                  <div className={styles.headerContent}>
+                    {typeof col.header === "string" ? col.header : (col.id ?? col.accessorKey ?? "")}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+        )}
+        <tbody className={styles.tbody}>
+          {showSkeleton ? (
+            <DataTableSkeletonRows
+              rowCount={skeletonRows}
+              columnCount={columnCount}
+              rowClassName={styles.row}
+              cellClassName={styles.td}
+              barClassName={styles.skeletonBar}
+            />
+          ) : isEmpty ? (
+            <tr className={styles.row}>
+              <td className={styles.td} colSpan={columnCount}>
+                <div className={styles.emptyState}>
+                  {emptyState ?? <span className={styles.emptyMessage}>{emptyMessage}</span>}
+                </div>
+              </td>
+            </tr>
+          ) : (
+            data.map((row, rowIndex) => {
+              const rowKey = getRowId?.(row) ?? rowIndex;
+              return (
+                <tr key={rowKey} className={styles.row}>
+                  {columns.map((col, colIndex) => {
+                    const content = staticCellContent(col, row, rowIndex);
+                    return (
+                      <td
+                        key={col.id ?? col.accessorKey ?? colIndex}
+                        className={[styles.td, col.truncate && styles.truncate]
+                          .filter(Boolean)
+                          .join(" ")}
+                        data-align={col.align}
+                        title={typeof content === "string" ? content : undefined}
+                        style={staticColumnSizeStyle(col)}
+                      >
+                        {content}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ============================================
+// Root — picks live vs static by dependency state
+// ============================================
+
+function DataTableRoot<T>(props: DataTableProps<T>) {
+  const deps = useReactTableDeps();
+  // Distinct component types per state: the live table calls useReactTable, so
+  // it must only ever mount once the module is resolved.
+  if (deps === "ready") return <DataTableLive {...props} />;
+  return <DataTableStatic {...props} pending={deps === "pending"} />;
+}
+
 // Helper to create simple columns without TanStack's createColumnHelper
 export function createColumns<T>(
   columns: Array<{
@@ -565,4 +794,6 @@ export function createColumns<T>(
 export const DataTable = Object.assign(DataTableRoot, {
   Root: DataTableRoot,
   Columns: createColumns,
+  /** Start resolving @tanstack/react-table before first render (optional). */
+  preload: loadReactTable,
 });

package/src/components/DatePicker/DatePicker.contract.json

@@ -5,6 +5,13 @@
   "category": "forms",
   "tags": ["date", "picker", "calendar", "range", "form", "input"],
   "status": "stable",
+  "dependencies": [
+    {
+      "name": "react-day-picker",
+      "version": ">=9.0.0",
+      "reason": "Optional — renders the calendar popup; the trigger and form field work without it."
+    }
+  ],
   "sourcePath": "src/components/DatePicker/index.tsx",
   "exportName": "DatePicker",
   "propsSummary": [
@@ -267,7 +274,7 @@
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": ["Trigger", "Content", "Calendar", "Preset"],
+    "subComponents": ["Trigger", "Content", "Calendar", "Preset", "preload"],
     "requiredChildren": ["Trigger", "Content"],
     "commonPatterns": [
       "<DatePicker size=\"sm\" selected={date} onSelect={setDate}><DatePicker.Trigger placeholder=\"Pick a date\" /><DatePicker.Content><DatePicker.Calendar /></DatePicker.Content></DatePicker>",

package/src/components/DatePicker/index.tsx

@@ -222,10 +222,10 @@ function formatDateForHiddenInput(date?: Date): string {
 // 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.
+// Loaded on demand via import() so the barrel never statically references the
+// optional `react-day-picker` peer (or its transitive `date-fns` dependency),
+// and — unlike require(), which browser ESM bundles do not define — the
+// calendar actually resolves when the peer is installed.
 
 type DayPickerComponent = React.ComponentType<Record<string, unknown>>;
 type RdpEnum = Record<string, string>;
@@ -234,22 +234,46 @@ let _DayPicker: DayPickerComponent | null = null;
 let _UI: RdpEnum | null = null;
 let _SelectionState: RdpEnum | null = null;
 let _DayFlag: RdpEnum | null = null;
-let _rdpLoaded = false;
+let _rdpLoadPromise: Promise<void> | null = null;
 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;
+function loadDayPickerDeps(): Promise<void> {
+  if (!_rdpLoadPromise) {
+    _rdpLoadPromise = (async () => {
+      try {
+        const rdp = await import("react-day-picker");
+        _DayPicker = rdp.DayPicker as unknown as DayPickerComponent;
+        _UI = rdp.UI as unknown as RdpEnum;
+        _SelectionState = rdp.SelectionState as unknown as RdpEnum;
+        _DayFlag = rdp.DayFlag as unknown as RdpEnum;
+      } catch {
+        _rdpFailed = true;
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] DatePicker: react-day-picker is not installed. " +
+              "Install it with: npm install react-day-picker"
+          );
+        }
+      }
+    })();
   }
+  return _rdpLoadPromise;
+}
+
+/** Kick off the lazy react-day-picker load on mount and re-render once it settles. */
+function useDayPickerDeps(): boolean {
+  const [, rerender] = React.useReducer((n: number) => n + 1, 0);
+  React.useEffect(() => {
+    if (_DayPicker || _rdpFailed) return;
+    let active = true;
+    void loadDayPickerDeps().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return _DayPicker !== null;
 }
 
 // ============================================
@@ -321,7 +345,10 @@ const DatePickerRoot = React.forwardRef<HTMLDivElement, DatePickerProps>(functio
   ref
 ) {
   const size = useResolvedControlSize(sizeProp);
-  // Load deps eagerly so date formatters are available in the trigger
+  // Warm the calendar dependency while the popover is still closed.
+  React.useEffect(() => {
+    void loadDayPickerDeps();
+  }, []);
   const [internalSelected, setInternalSelected] = React.useState<Date | null>(selectedProp ?? null);
   const [internalRange, setInternalRange] = React.useState<DateRange | null>(
     selectedRangeProp ?? null
@@ -567,10 +594,10 @@ 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.
+  const rdpReady = useDayPickerDeps();
+  if (!rdpReady || !_DayPicker || !_UI) {
+    // react-day-picker is an optional peer: render nothing while it resolves,
+    // and nothing at all when a consumer mounts <DatePicker> without it.
     return null;
   }
   const DayPicker = _DayPicker;
@@ -665,6 +692,8 @@ export const DatePicker = Object.assign(DatePickerRoot, {
   Content: DatePickerContent,
   Calendar: DatePickerCalendar,
   Preset: DatePickerPreset,
+  /** Start resolving react-day-picker before first render (optional). */
+  preload: loadDayPickerDeps,
 });
 
 // Re-export individual components