@usefragments/ui 1.3.2 → 1.4.0

package/src/components/ConversationList/ConversationList.contract.json

@@ -16,6 +16,7 @@
   "exportName": "ConversationList",
   "propsSummary": [
     "children: node (required)",
+    "showAvatars: boolean (default: true)",
     "autoScroll: union (default: smart)",
     "onScrollTop: function",
     "loadingHistory: boolean (default: false)",
@@ -29,6 +30,12 @@
       "description": "Message components",
       "required": true
     },
+    "showAvatars": {
+      "type": "boolean",
+      "description": "Show avatars for messages and typing indicators in this conversation",
+      "default": "true",
+      "required": false
+    },
     "autoScroll": {
       "type": "union",
       "description": "Auto-scroll behavior: true (always), false (never), or \"smart\" (only when near bottom)",
@@ -78,6 +85,8 @@
     ],
     "guidelines": [
       "Use autoScroll=\"smart\" for best UX (only auto-scrolls when near bottom)",
+      "Set showAvatars={false} for avatarless transcripts; messages remove their outer inline inset automatically",
+      "Conversation chrome uses neutral surfaces and the body foreground; reserve brand accent for actions or semantic state",
       "Implement onScrollTop for loading older messages",
       "ConversationList composes your onScroll handler with internal auto-scroll/history logic",
       "Provide an emptyState for new conversations",
@@ -85,7 +94,7 @@
     ],
     "accessibility": [
       "Uses proper ARIA roles for separators",
-      "Typing indicator has aria-label",
+      "Typing indicator uses a status role with an aria-label",
       "Smooth scroll respects reduced motion preferences",
       "Keyboard navigation works within scrollable container"
     ]
@@ -101,6 +110,11 @@
       "description": "Messages grouped by date",
       "code": "<ConversationList>\n  <ConversationList.DateSeparator date={new Date(Date.now() - 86400000)} />\n  <Message role=\"user\">\n    <Message.Content>A message from yesterday</Message.Content>\n  </Message>\n  <ConversationList.DateSeparator date={new Date()} />\n  <Message role=\"assistant\">\n    <Message.Content>And a message from today!</Message.Content>\n  </Message>\n</ConversationList>"
     },
+    {
+      "name": "Without Avatars",
+      "description": "Compact transcript without message or typing-indicator avatars",
+      "code": "<ConversationList showAvatars={false}>\n  <Message role=\"user\">\n    <Message.Content>Hello!</Message.Content>\n  </Message>\n  <Message role=\"assistant\">\n    <Message.Content>How can I help?</Message.Content>\n  </Message>\n</ConversationList>"
+    },
     {
       "name": "With Typing Indicator",
       "description": "Shows assistant is typing",
@@ -132,6 +146,7 @@
   "contract": {
     "propsSummary": [
       "children: ReactNode - Message components",
+      "showAvatars: boolean - show message and typing-indicator avatars (default: true)",
       "autoScroll: boolean | \"smart\" - scroll behavior (default: \"smart\")",
       "onScrollTop: (event?) => void - callback for loading history (receives scroll event)",
       "loadingHistory: boolean - show history loading spinner",

package/src/components/ConversationList/ConversationList.module.scss

@@ -9,6 +9,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  color: var(--fui-text-primary, $fui-text-primary);
   overflow-y: auto;
   overflow-x: hidden;
   scroll-behavior: smooth;
@@ -25,6 +26,13 @@
   gap: var(--fui-space-2, $fui-space-2);
   padding: var(--fui-space-3, $fui-space-3);
   min-height: 100%;
+  // Own the full height of the conversation. As a shrinkable flex item it was
+  // squashed to the height of the scroll port while its messages overflowed
+  // past it — the list still scrolled, because the overflow lands on the
+  // scroller, but this element reported a constant height no matter how much
+  // was in it. Anything measuring the conversation, auto-scroll included, was
+  // measuring the window rather than the content.
+  flex-shrink: 0;
 }
 
 // ============================================
@@ -95,6 +103,10 @@
   padding: var(--fui-space-2, $fui-space-2);
 }
 
+.withoutAvatar {
+  padding-inline: 0;
+}
+
 .typingAvatar {
   flex-shrink: 0;
   display: flex;

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/DataTable.module.scss

@@ -2,6 +2,11 @@
 @use "../../tokens/mixins" as *;
 
 .wrapper {
+  // Tables may have a larger intrinsic width than a narrow flex or grid
+  // column. Keep that width inside this scroll container instead of allowing
+  // the container itself to widen the page.
+  min-width: 0;
+  max-width: 100%;
   --fui-data-table-bg: var(--fui-table-bg, var(--fui-bg-elevated, #{$fui-bg-elevated}));
   --fui-data-table-header-bg: var(
     --fui-table-header-bg,

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>",