@alexgorbatchev/shadcn 0.0.29 → 0.0.31

package/README.md

@@ -50,28 +50,29 @@ Package preparation and contributor commands are documented in [AGENTS.md](./AGE
 
 Import shared controls and providers from `@alexgorbatchev/shadcn`. Import the following features from their dedicated entry points and install only the peers you use. These features, their hooks, and their types are not exported from the package root.
 
-| Import path suffix  | Components                                               | Install alongside the package                                                                       |
-| ------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `/chart`            | Chart parts, AnalyticsChart, Sparkline, hooks and types  | `bun add recharts@3.8.0 cssesc@3.0.0 es-toolkit@1.52.0`                                             |
-| `/calendar`         | Calendar, CalendarDayButton, DatePicker, DateRangePicker | `bun add @daypicker/react@^10.0.2`                                                                  |
-| `/persian-calendar` | PersianCalendar                                          | `bun add @daypicker/persian@^10.0.2 @daypicker/react@^10.0.2`                                       |
-| `/carousel`         | Carousel components, useCarousel, and carousel types     | `bun add embla-carousel-react@^8.6.0`                                                               |
-| `/command`          | Command components, including CommandDialog              | `bun add cmdk@^1.1.1`                                                                               |
-| `/resizable`        | Resizable components and SplitView                       | `bun add react-resizable-panels@^4.14.3`                                                            |
-| `/fonts.css`        | JetBrains Mono font stylesheet                           | `bun add @fontsource-variable/jetbrains-mono@^5.3.0`                                                |
-| `/sonner`           | Sonner, SonnerToaster, Toaster, toast, useSonner         | No additional install; patched implementation is bundled                                            |
-| `/input-otp`        | InputOTP components                                      | No additional install; patched implementation is bundled                                            |
-| `/virtual-table`    | VirtualTable and row measurement props                   | `@tanstack/react-virtual@3.14.13`                                                                   |
-| `/message-scroller` | MessageScroller components, hooks, and types             | No additional install; patched implementation is bundled                                            |
-| `/questionnaire`    | Questionnaire components and types                       | No additional install; patched implementation is bundled                                            |
-| `/data-grid`        | DataGrid and native table helpers                        | `bun add @tanstack/react-table@9.2.8`                                                               |
-| `/file-upload`      | FileUpload selection and validation                      | `bun add react-dropzone@^20.1.4`                                                                    |
-| `/color-picker`     | ColorPicker                                              | `bun add react-colorful@^5.8.1`                                                                     |
-| `/image-crop`       | ImageCrop and native export helpers                      | `bun add react-image-crop@^11.1.2`                                                                  |
-| `/tree`             | Tree, native hooks and features                          | `bun add @headless-tree/core@^1.8.0 @headless-tree/react@^1.8.0`                                    |
-| `/editor`           | RichTextEditor, native Tiptap hooks and StarterKit       | `bun add @tiptap/core@^3.32.0 @tiptap/react@^3.32.0 @tiptap/pm@^3.32.0 @tiptap/starter-kit@^3.32.0` |
-| `/event-calendar`   | EventCalendar, EventForm and native calendar APIs        | `bun add date-fns@^4.4.0`; TypeScript: `bun add -d @types/react-big-calendar@^1.16.3`               |
-| `/gantt`            | Gantt and Roadmap                                        | `bun add date-fns@^4.4.0 @date-fns/tz@^1.5.0`                                                       |
+| Import path suffix   | Components                                               | Install alongside the package                                                                       |
+| -------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `/chart`             | Chart parts, AnalyticsChart, Sparkline, hooks and types  | `bun add recharts@3.8.0 cssesc@3.0.0 es-toolkit@1.52.0`                                             |
+| `/calendar`          | Calendar, CalendarDayButton, DatePicker, DateRangePicker | `bun add @daypicker/react@^10.0.2`                                                                  |
+| `/persian-calendar`  | PersianCalendar                                          | `bun add @daypicker/persian@^10.0.2 @daypicker/react@^10.0.2`                                       |
+| `/carousel`          | Carousel components, useCarousel, and carousel types     | `bun add embla-carousel-react@^8.6.0`                                                               |
+| `/command`           | Command components, including CommandDialog              | `bun add cmdk@^1.1.1`                                                                               |
+| `/resizable`         | Resizable components and SplitView                       | `bun add react-resizable-panels@^4.14.3`                                                            |
+| `/fonts.css`         | JetBrains Mono font stylesheet                           | `bun add @fontsource-variable/jetbrains-mono@^5.3.0`                                                |
+| `/sonner`            | Sonner, SonnerToaster, Toaster, toast, useSonner         | No additional install; patched implementation is bundled                                            |
+| `/input-otp`         | InputOTP components                                      | No additional install; patched implementation is bundled                                            |
+| `/virtual-table`     | VirtualTable and row measurement props                   | `@tanstack/react-virtual@3.14.13`                                                                   |
+| `/message-scroller`  | MessageScroller components, hooks, and types             | No additional install; patched implementation is bundled                                            |
+| `/questionnaire`     | Questionnaire components and types                       | No additional install; patched implementation is bundled                                            |
+| `/data-grid`         | DataGrid, column picker, and native table helpers        | `bun add @tanstack/react-table@9.2.8`                                                               |
+| `/virtual-data-grid` | VirtualDataGrid and row measurement props                | `bun add @tanstack/react-table@9.2.8 @tanstack/react-virtual@3.14.13`                               |
+| `/file-upload`       | FileUpload selection and validation                      | `bun add react-dropzone@^20.1.4`                                                                    |
+| `/color-picker`      | ColorPicker                                              | `bun add react-colorful@^5.8.1`                                                                     |
+| `/image-crop`        | ImageCrop and native export helpers                      | `bun add react-image-crop@^11.1.2`                                                                  |
+| `/tree`              | Tree, native hooks and features                          | `bun add @headless-tree/core@^1.8.0 @headless-tree/react@^1.8.0`                                    |
+| `/editor`            | RichTextEditor, native Tiptap hooks and StarterKit       | `bun add @tiptap/core@^3.32.0 @tiptap/react@^3.32.0 @tiptap/pm@^3.32.0 @tiptap/starter-kit@^3.32.0` |
+| `/event-calendar`    | EventCalendar, EventForm and native calendar APIs        | `bun add date-fns@^4.4.0`; TypeScript: `bun add -d @types/react-big-calendar@^1.16.3`               |
+| `/gantt`             | Gantt and Roadmap                                        | `bun add date-fns@^4.4.0 @date-fns/tz@^1.5.0`                                                       |
 
 Import `@alexgorbatchev/shadcn/event-calendar.css` for EventCalendar, and `react-image-crop/dist/ReactCrop.css` for ImageCrop. The root also provides application shells, dashboard and billing layouts, authentication/settings forms, account/workspace controls, Kanban, facets, tags, number fields, toolbars, meters, stat cards and status displays. See the [component catalog reference](./docs/internal/component-catalog.md) for source groups, native APIs, dependency costs and consumer responsibilities.
 
@@ -302,6 +303,8 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 `VirtualTable` renders a bounded, dynamically measured set of native table rows using TanStack Virtual. Supply `items`, stable `getItemKey`, `header`, `label`, and `renderRow`; spread the supplied measurement props onto each native row. Optional `columns` accepts a `TableColumnGroup`; responsive columns keep their widths aligned with cells that share their `visibleFrom`. `maxHeight` defaults to `65vh`, `estimateRowHeight` to 80 pixels, and `overscan` to five rows. `retainedKeys` keeps editing rows mounted; the focused row is retained automatically. Filtering and selection belong to the consumer.
 
+`VirtualDataGrid` renders a TanStack Table instance built with `dataGridFeatures` through `VirtualTable`: every filtered and sorted row, without pagination, in a fixed-layout table. Column `meta` sets `label`, `textAlign`, `truncate`, `visibleFrom`, and `fill`; a `fill` column takes the width the sized columns leave. Other resizable columns get a window-splitter handle that resizes by dragging, by the arrow keys, Home, and End, and resets on double-click. Widths change through CSS variables, so a `useTable` selector can omit `columnSizing` and `columnResizing` to keep resizing from rendering rows. `renderRow` receives each row and its measurement props; spread the props onto a `TableRow` and render `DataGridCells` inside it to wrap rows in menus or drag sources. `retainedRowIds` keeps rows mounted while they hold editors. `DataGridColumnOptions` shows, hides, and reorders the columns that allow hiding; its reset restores the table's initial visibility, order, and sizes.
+
 `StarRating` takes a controlled numeric `value` from 0 to 5, `onValueChange`, and an accessible `label`. Its native radio buttons support keyboard selection and an Unrated option to clear the rating. Set `disabled` while saving. `Avatar shape="square"` displays square artwork with matching image, fallback, and border corners.
 
 `DialogContent size="wide"` uses a desktop maximum width of 576px; `size="narrow"` uses 192px, and the default uses 384px. Dialogs remain bounded by the viewport. `FieldGroup columns={2}` arranges fields in two columns on desktop and one on mobile.

package/THIRD_PARTY_NOTICES.md

@@ -164,6 +164,12 @@ DataGrid, FilterBar, Stepper, FileUpload, Tree, Kanban and planning compositions
 
 Reviewed source: https://github.com/keenthemes/reui/tree/067aa0dc7f8bbfec1cd76fc5ad31f842be5f569a
 
+## TanStack Table examples
+
+VirtualDataGrid and DataGridColumnOptions follow the MIT-licensed TanStack Table React examples for virtualized rows, performant column resizing through CSS variables, column ordering, and column visibility. The package implementation, styling, keyboard resizing and behavioral tests are package-owned.
+
+Reviewed source: https://github.com/TanStack/table/tree/main/examples/react
+
 MIT License
 
 Copyright (c) 2025 Keenthemes Inc

package/dist/chunk-1xncv9gb.js

@@ -0,0 +1,19 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/Spinner.tsx
+import { Loader2Icon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+function Spinner2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(Loader2Icon, {
+    "data-density": density,
+    "data-slot": "spinner",
+    role: "status",
+    "aria-label": "Loading",
+    className: cn2("size-4 animate-spin", className),
+    ...props
+  });
+}
+
+export { Spinner2 };

package/dist/chunk-2dxa9enk.js

@@ -0,0 +1,98 @@
+import {
+  Table2,
+  TableHeader2,
+  TableBody2
+} from "./chunk-zte6pw69.js";
+
+// src/components/virtual-table/VirtualTable.tsx
+import {
+  Fragment,
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import { jsx, jsxs } from "react/jsx-runtime";
+function VirtualTable2({
+  items,
+  getItemKey,
+  renderRow,
+  header,
+  columns,
+  label,
+  maxHeight = "65vh",
+  estimateRowHeight = 80,
+  overscan = 5,
+  retainedKeys,
+  layout = "fixed"
+}) {
+  const viewport = useRef(null);
+  const [focusedKey, setFocusedKey] = useState();
+  const retained = useMemo(() => items.flatMap((item, index) => retainedKeys?.includes(getItemKey(item)) || getItemKey(item) === focusedKey ? [index] : []), [items, retainedKeys, getItemKey, focusedKey]);
+  const rangeExtractor = useCallback((range) => [...new Set([...defaultRangeExtractor(range), ...retained])].sort((a, b) => a - b), [retained]);
+  const itemKey = useCallback((index) => getItemKey(items[index]), [items, getItemKey]);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => viewport.current,
+    getItemKey: itemKey,
+    estimateSize: () => estimateRowHeight,
+    overscan,
+    rangeExtractor
+  });
+  const rows = virtualizer.getVirtualItems();
+  const last = rows.at(-1);
+  return /* @__PURE__ */ jsx("div", {
+    ref: viewport,
+    "data-testid": "VirtualTable",
+    role: "region",
+    "aria-label": label,
+    tabIndex: 0,
+    className: "min-w-0 overflow-auto overscroll-contain",
+    style: { maxHeight },
+    onFocusCapture: (event) => {
+      const row = event.target.closest("tr[data-index]");
+      const item = items[Number(row?.dataset.index)];
+      if (row && item)
+        setFocusedKey(getItemKey(item));
+    },
+    children: /* @__PURE__ */ jsxs(Table2, {
+      layout,
+      "aria-label": label,
+      "aria-rowcount": items.length + 1,
+      children: [
+        columns,
+        /* @__PURE__ */ jsx(TableHeader2, {
+          children: header
+        }),
+        /* @__PURE__ */ jsxs(TableBody2, {
+          children: [
+            rows.map((row, index) => /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                row.start > (rows[index - 1]?.end ?? 0) && /* @__PURE__ */ jsx("tr", {
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("td", {
+                    style: { height: row.start - (rows[index - 1]?.end ?? 0), padding: 0, border: 0 }
+                  })
+                }),
+                renderRow(items[row.index], {
+                  ref: virtualizer.measureElement,
+                  "data-index": row.index,
+                  "aria-rowindex": row.index + 2
+                })
+              ]
+            }, row.key)),
+            last && virtualizer.getTotalSize() > last.end && /* @__PURE__ */ jsx("tr", {
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("td", {
+                style: { height: virtualizer.getTotalSize() - last.end, padding: 0, border: 0 }
+              })
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+
+export { VirtualTable2 };

package/dist/{chunk-3z5gpbh0.js → chunk-987zth0a.js}

@@ -21,7 +21,7 @@ import {
   TableHead2,
   TableCell2,
   TableCaption2
-} from "./chunk-v0k5jnk5.js";
+} from "./chunk-zte6pw69.js";
 import {
   safeHref
 } from "./chunk-xhtsnwnb.js";

package/dist/{chunk-g238nezp.js → chunk-pg9rhbgm.js}

@@ -5,9 +5,11 @@ import {
   Button2
 } from "./chunk-q7p28b89.js";
 import {
-  Checkbox2,
   Spinner2
-} from "./chunk-eehfrrdz.js";
+} from "./chunk-1xncv9gb.js";
+import {
+  Checkbox2
+} from "./chunk-tnnf8ydf.js";
 import {
   useReceiptFocus
 } from "./chunk-vxvaaptq.js";

package/dist/{chunk-5da3rzn5.js → chunk-s0typ7hv.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-vxvaaptq.js";
 import {
   OptionList2
-} from "./chunk-g238nezp.js";
+} from "./chunk-pg9rhbgm.js";
 
 // src/components/assistant-ui/elements/QuestionFlow.tsx
 import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";

package/dist/{chunk-eehfrrdz.js → chunk-tnnf8ydf.js}

@@ -20,18 +20,4 @@ function Checkbox2({ density, className, ...props }) {
   });
 }
 
-// src/components/Spinner.tsx
-import { Loader2Icon } from "lucide-react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function Spinner2({ density, className, ...props }) {
-  return /* @__PURE__ */ jsx2(Loader2Icon, {
-    "data-density": density,
-    "data-slot": "spinner",
-    role: "status",
-    "aria-label": "Loading",
-    className: cn2("size-4 animate-spin", className),
-    ...props
-  });
-}
-
-export { Checkbox2, Spinner2 };
+export { Checkbox2 };

package/dist/chunk-yfr9syen.js

@@ -0,0 +1,363 @@
+import {
+  Button2
+} from "./chunk-q7p28b89.js";
+import {
+  Table2,
+  TableHeader2,
+  TableBody2,
+  TableRow2,
+  TableHead2,
+  TableCell2,
+  TableColumnGroup2,
+  TableColumn2
+} from "./chunk-zte6pw69.js";
+import {
+  NativeSelect2,
+  NativeSelectOption2
+} from "./chunk-r9qrb6b6.js";
+import {
+  Input2
+} from "./chunk-59p19t57.js";
+
+// src/components/data-grid/DataGrid.tsx
+import {
+  FlexRender,
+  columnFilteringFeature,
+  columnOrderingFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  tableFeatures
+} from "@tanstack/react-table";
+import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from "lucide-react";
+import { useId } from "react";
+
+// src/components/data-grid/DataGridColumnResizer.tsx
+import { Subscribe } from "@tanstack/react-table";
+import { jsx } from "react/jsx-runtime";
+var KEYBOARD_STEP = 16;
+function DataGridColumnResizer({
+  header,
+  label
+}) {
+  const column = header.column;
+  const table = column.table;
+  const minSize = column.columnDef.minSize ?? 0;
+  const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+  const resize = header.getResizeHandler();
+  const setSize = (size) => table.setColumnSizing((sizes) => ({ ...sizes, [column.id]: Math.min(maxSize, Math.max(minSize, size)) }));
+  const onKeyDown = (event) => {
+    const growKey = table.options.columnResizeDirection === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const shrinkKey = growKey === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+    const size = column.getSize();
+    const next = event.key === growKey ? size + KEYBOARD_STEP : event.key === shrinkKey ? size - KEYBOARD_STEP : event.key === "Home" ? minSize : event.key === "End" && maxSize < Number.MAX_SAFE_INTEGER ? maxSize : undefined;
+    if (next === undefined)
+      return;
+    event.preventDefault();
+    setSize(next);
+  };
+  return /* @__PURE__ */ jsx(Subscribe, {
+    source: table.store,
+    selector: (state) => `${state.columnSizing[column.id]}:${state.columnResizing.isResizingColumn === column.id}`,
+    children: () => /* @__PURE__ */ jsx("div", {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": `Resize ${label}`,
+      "aria-valuenow": column.getSize(),
+      "aria-valuemin": minSize,
+      "aria-valuemax": maxSize < Number.MAX_SAFE_INTEGER ? maxSize : undefined,
+      tabIndex: 0,
+      "data-slot": "data-grid-column-resizer",
+      "data-resizing": column.getIsResizing() || undefined,
+      onMouseDown: resize,
+      onTouchStart: resize,
+      onDoubleClick: () => column.resetSize(),
+      onKeyDown,
+      className: "absolute inset-y-0 end-0 flex w-2 cursor-col-resize touch-none justify-center outline-none select-none after:w-px after:bg-border hover:after:bg-ring focus-visible:after:w-0.5 focus-visible:after:bg-ring data-resizing:after:bg-ring"
+    })
+  });
+}
+
+// src/components/data-grid/getDataGridColumnSizeVariables.ts
+function getDataGridColumnSizeVariables(table) {
+  return new Map(table.getAllColumns().flatMap((column) => column.getLeafColumns()).map((column, index) => [column.id, `--data-grid-column-${index}-size`]));
+}
+
+// src/components/data-grid/DataGrid.tsx
+import { jsx as jsx2, jsxs, Fragment } from "react/jsx-runtime";
+var columnMeta = {};
+var dataGridFeatures2 = tableFeatures({
+  columnFilteringFeature,
+  columnOrderingFeature,
+  columnSizingFeature,
+  columnResizingFeature,
+  columnVisibilityFeature,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic },
+  columnMeta
+});
+function getDataGridColumnLabel(column) {
+  const header = column.columnDef.header;
+  return column.columnDef.meta?.label ?? (typeof header === "string" ? header : column.id);
+}
+function getAriaSort(column) {
+  if (!column.getCanSort())
+    return;
+  const sorted = column.getIsSorted();
+  return sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none";
+}
+function DataGridHeaderCell({ header, isResizable }) {
+  const contentId = useId();
+  const meta = header.column.columnDef.meta;
+  const hasResizer = isResizable && !meta?.fill && header.column.getCanResize();
+  return /* @__PURE__ */ jsx2(TableHead2, {
+    scope: "col",
+    colSpan: header.colSpan,
+    "aria-sort": getAriaSort(header.column),
+    "aria-labelledby": hasResizer ? contentId : undefined,
+    textAlign: meta?.textAlign,
+    truncate: meta?.truncate,
+    visibleFrom: meta?.visibleFrom,
+    className: hasResizer ? "relative" : undefined,
+    children: hasResizer ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx2("span", {
+          id: contentId,
+          children: header.isPlaceholder ? null : /* @__PURE__ */ jsx2(FlexRender, {
+            header
+          })
+        }),
+        /* @__PURE__ */ jsx2(DataGridColumnResizer, {
+          header,
+          label: getDataGridColumnLabel(header.column)
+        })
+      ]
+    }) : header.isPlaceholder ? null : /* @__PURE__ */ jsx2(FlexRender, {
+      header
+    })
+  });
+}
+function DataGridHeaderRows({
+  table,
+  isResizable = false
+}) {
+  return /* @__PURE__ */ jsx2(Fragment, {
+    children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx2(TableRow2, {
+      children: group.headers.map((header) => /* @__PURE__ */ jsx2(DataGridHeaderCell, {
+        header,
+        isResizable
+      }, header.id))
+    }, group.id))
+  });
+}
+function DataGridCells2({ row }) {
+  return /* @__PURE__ */ jsx2(Fragment, {
+    children: row.getVisibleCells().map((cell) => {
+      const meta = cell.column.columnDef.meta;
+      return /* @__PURE__ */ jsx2(TableCell2, {
+        textAlign: meta?.textAlign,
+        truncate: meta?.truncate,
+        visibleFrom: meta?.visibleFrom,
+        children: /* @__PURE__ */ jsx2(FlexRender, {
+          cell
+        })
+      }, cell.id);
+    })
+  });
+}
+function DataGridColumns({ table }) {
+  const variables = getDataGridColumnSizeVariables(table);
+  return /* @__PURE__ */ jsx2(TableColumnGroup2, {
+    children: table.getVisibleLeafColumns().map((column) => {
+      const meta = column.columnDef.meta;
+      const variable = variables.get(column.id);
+      return /* @__PURE__ */ jsx2(TableColumn2, {
+        visibleFrom: meta?.visibleFrom,
+        width: meta?.fill ? undefined : `var(${variable}, ${column.getSize()}px)`
+      }, column.id);
+    })
+  });
+}
+function DataGrid2({
+  table,
+  label,
+  toolbar,
+  empty = "No results.",
+  loading = false,
+  pagination = true,
+  density
+}) {
+  const rows = table.getRowModel().rows;
+  return /* @__PURE__ */ jsxs("div", {
+    "data-density": density,
+    "data-scroll": "none",
+    className: "grid min-w-0 gap-3",
+    "aria-busy": loading,
+    children: [
+      toolbar,
+      /* @__PURE__ */ jsx2("div", {
+        className: "min-w-0 rounded-sm border border-border",
+        children: /* @__PURE__ */ jsxs(Table2, {
+          "aria-label": label,
+          children: [
+            /* @__PURE__ */ jsx2(TableHeader2, {
+              children: /* @__PURE__ */ jsx2(DataGridHeaderRows, {
+                table
+              })
+            }),
+            /* @__PURE__ */ jsx2(TableBody2, {
+              children: loading ? /* @__PURE__ */ jsx2(TableRow2, {
+                children: /* @__PURE__ */ jsx2(TableCell2, {
+                  colSpan: table.getVisibleLeafColumns().length,
+                  children: /* @__PURE__ */ jsxs("p", {
+                    role: "status",
+                    children: [
+                      "Loading ",
+                      label,
+                      "…"
+                    ]
+                  })
+                })
+              }) : rows.length ? rows.map((row) => /* @__PURE__ */ jsx2(TableRow2, {
+                "data-state": row.getIsSelected() ? "selected" : undefined,
+                children: /* @__PURE__ */ jsx2(DataGridCells2, {
+                  row
+                })
+              }, row.id)) : /* @__PURE__ */ jsx2(TableRow2, {
+                children: /* @__PURE__ */ jsx2(TableCell2, {
+                  colSpan: table.getVisibleLeafColumns().length,
+                  children: /* @__PURE__ */ jsx2("p", {
+                    role: "status",
+                    children: empty
+                  })
+                })
+              })
+            })
+          ]
+        })
+      }),
+      pagination && /* @__PURE__ */ jsx2(DataGridPagination2, {
+        table
+      })
+    ]
+  });
+}
+function DataGridColumnHeader2({
+  column,
+  children
+}) {
+  const sorted = column.getIsSorted();
+  return column.getCanSort() ? /* @__PURE__ */ jsxs(Button2, {
+    type: "button",
+    variant: "ghost",
+    size: "sm",
+    onClick: column.getToggleSortingHandler(),
+    children: [
+      children,
+      sorted === "asc" ? /* @__PURE__ */ jsx2(ArrowUpIcon, {
+        "aria-hidden": "true"
+      }) : sorted === "desc" ? /* @__PURE__ */ jsx2(ArrowDownIcon, {
+        "aria-hidden": "true"
+      }) : /* @__PURE__ */ jsx2(ChevronsUpDownIcon, {
+        "aria-hidden": "true"
+      })
+    ]
+  }) : /* @__PURE__ */ jsx2("span", {
+    children
+  });
+}
+function DataGridFilter2({
+  table,
+  columnId,
+  label
+}) {
+  const column = table.getColumn(columnId);
+  if (!column)
+    throw new Error(`Unknown filter column: ${columnId}`);
+  const value = column.getFilterValue();
+  return /* @__PURE__ */ jsx2(Input2, {
+    "aria-label": label,
+    placeholder: label,
+    value: typeof value === "string" ? value : "",
+    onChange: (event) => column.setFilterValue(event.target.value)
+  });
+}
+function DataGridPagination2({ table }) {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex flex-wrap items-center justify-between gap-3 text-sm",
+    children: [
+      /* @__PURE__ */ jsxs("span", {
+        role: "status",
+        children: [
+          table.getSelectedRowModel().rows.length,
+          " selected · Page ",
+          table.state.pagination.pageIndex + 1,
+          " of",
+          " ",
+          Math.max(1, table.getPageCount())
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxs(NativeSelect2, {
+            "aria-label": "Rows per page",
+            value: table.state.pagination.pageSize,
+            onChange: (event) => table.setPageSize(Number(event.target.value)),
+            children: [
+              [10, 20, 50, 100].map((size) => /* @__PURE__ */ jsxs(NativeSelectOption2, {
+                value: size,
+                children: [
+                  size,
+                  " rows"
+                ]
+              }, size)),
+              ![10, 20, 50, 100].includes(table.state.pagination.pageSize) && /* @__PURE__ */ jsxs(NativeSelectOption2, {
+                value: table.state.pagination.pageSize,
+                children: [
+                  table.state.pagination.pageSize,
+                  " rows"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx2(Button2, {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            disabled: !table.getCanPreviousPage(),
+            onClick: () => table.previousPage(),
+            children: "Previous"
+          }),
+          /* @__PURE__ */ jsx2(Button2, {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            disabled: !table.getCanNextPage(),
+            onClick: () => table.nextPage(),
+            children: "Next"
+          })
+        ]
+      })
+    ]
+  });
+}
+
+export { getDataGridColumnSizeVariables, dataGridFeatures2, getDataGridColumnLabel, DataGridHeaderRows, DataGridCells2, DataGridColumns, DataGrid2, DataGridColumnHeader2, DataGridFilter2, DataGridPagination2 };

package/dist/{chunk-v0k5jnk5.js → chunk-zte6pw69.js}

@@ -103,10 +103,11 @@ function TableColumnGroup2(props) {
     ...props
   });
 }
-function TableColumn2({ className, visibleFrom, ...props }) {
+function TableColumn2({ className, style, visibleFrom, width, ...props }) {
   return /* @__PURE__ */ jsx("col", {
     "data-slot": "table-column",
     className: cn2(visibleFrom && columnVisibilityClasses[visibleFrom], className),
+    style: width === undefined ? style : { ...style, width },
     ...props
   });
 }

package/dist/components/Table.d.ts

@@ -25,9 +25,13 @@ type TableCellProps = ComponentProps<"td"> & IDensityProps & ITableCellOptions;
 declare function TableCell({ density, className, truncate, textAlign, visibleFrom, ...props }: TableCellProps): ReactElement;
 type TableColumnGroupProps = ComponentProps<"colgroup">;
 declare function TableColumnGroup(props: TableColumnGroupProps): ReactElement;
-type TableColumnProps = ComponentProps<"col"> & Pick<ITableCellOptions, "visibleFrom">;
-/** A sized column; give it the same `visibleFrom` as its header and cells. */
-declare function TableColumn({ className, visibleFrom, ...props }: TableColumnProps): ReactElement;
+type TableColumnProps = ComponentProps<"col"> & Pick<ITableCellOptions, "visibleFrom"> & {
+    /** Fixed column width; numbers are pixels. Columns without one share the remaining width. */
+    width?: number | string;
+};
+/** A column; give it the same `visibleFrom` as its header and cells. */
+declare function TableColumn({ className, style, visibleFrom, width, ...props }: TableColumnProps): ReactElement;
 type TableCaptionProps = ComponentProps<"caption"> & IDensityProps;
 declare function TableCaption({ density, className, ...props }: TableCaptionProps): ReactElement;
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableColumnGroup, TableColumn, };
+export type { TableTextAlign, TableVisibility };

package/dist/components/assistant-ui/elements/DataTable.js

@@ -1,8 +1,8 @@
 import {
   DataTable2
-} from "../../../chunk-3z5gpbh0.js";
+} from "../../../chunk-987zth0a.js";
 import"../../../chunk-1wz92wgg.js";
-import"../../../chunk-v0k5jnk5.js";
+import"../../../chunk-zte6pw69.js";
 import"../../../chunk-bygq5yqf.js";
 import"../../../chunk-wjx6zf94.js";
 import"../../../chunk-q7p28b89.js";