@flanksource/clicky-ui 0.2.2 → 0.2.4

package/dist/data/DataTable.js

@@ -1,14 +1,30 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useMemo, useState, useEffect, Fragment as Fragment$1 } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, Fragment as Fragment$1 } from "react";
 import { useSort } from "../hooks/use-sort.js";
+import { DensityValueProvider } from "../hooks/use-density.js";
+import { useResolvedTheme } from "../hooks/use-theme.js";
 import { cn } from "../lib/utils.js";
-import { FilterBar, FilterBarFilterPanel, FilterBarRangePanel } from "../components/FilterBar.js";
+import { Modal } from "../overlay/Modal.js";
+import { FilterBar, isFilterBarFilterActive, clearFilterBarFilter, FilterBarFilterPanel, FilterBarRangePanel } from "../components/FilterBar.js";
 import { Icon } from "./Icon.js";
 import { SortableHeader } from "./SortableHeader.js";
 import { parseTimestamp, chooseTimestampFormat, modeToFormat, resolveDateMath, Timestamp } from "./cells/Timestamp.js";
 import { tagActionsFromRecord, TagActionsProvider, tagFilterTokens, TagList, normalizeTags, splitTagToken } from "./cells/TagList.js";
 import { StatusDot } from "./cells/StatusDot.js";
 import { normalizeStatus } from "./cells/status-mapping.js";
+import { UiEllipsis } from "../icons/components/UiEllipsis.js";
+import { UiFilterFilled, UiFilter } from "../icons/components/UiFilter.js";
+import { UiEyeClosed } from "../icons/components/UiEyeClosed.js";
+import { UiClose } from "../icons/components/UiClose.js";
+import { UiFullscreen } from "../icons/components/UiFullscreen.js";
+import { UiResizeVertical } from "../icons/components/UiResizeVertical.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
+import { UiRows } from "../icons/components/UiRows.js";
+import { UiListFlat } from "../icons/components/UiListFlat.js";
+import { UiListDashes } from "../icons/components/UiListDashes.js";
+import { UiDesktop } from "../icons/components/UiDesktop.js";
+import { UiSun } from "../icons/components/UiSun.js";
+import { UiMoon } from "../icons/components/UiMoon.js";
 const DEFAULT_COLUMN_MIN_WIDTH = 64;
 const DEFAULT_COLUMN_WIDTH = 160;
 const DEFAULT_GROW_COLUMN_WIDTH = 224;
@@ -17,9 +33,9 @@ const COLUMN_WIDTH_STORAGE_PREFIX = "clicky-ui-data-table-column-widths";
 const COLUMN_VISIBILITY_STORAGE_PREFIX = "clicky-ui-data-table-column-visibility";
 const DENSITY_STORAGE_PREFIX = "clicky-ui-data-table-density";
 const DENSITY_OPTIONS = [
-  { value: "compact", icon: "ph:rows", label: "Compact" },
-  { value: "comfortable", icon: "ph:list", label: "Comfortable" },
-  { value: "spacious", icon: "ph:list-dashes", label: "Spacious" }
+  { value: "compact", icon: UiRows, label: "Compact" },
+  { value: "comfortable", icon: UiListFlat, label: "Comfortable" },
+  { value: "spacious", icon: UiListDashes, label: "Spacious" }
 ];
 const DATA_TABLE_HEADER_DENSITY_CLASS = "px-2.5 py-1.5 density-compact:px-2 density-compact:py-1 density-comfortable:px-2.5 density-comfortable:py-1.5 density-spacious:px-4 density-spacious:py-3";
 const DATA_TABLE_CELL_DENSITY_CLASS = "px-2.5 py-1.5 density-compact:px-2 density-compact:py-0.5 density-comfortable:px-2.5 density-comfortable:py-1.5 density-spacious:px-4 density-spacious:py-3";
@@ -32,9 +48,12 @@ const TIMESTAMP_RANGE_PRESETS = [
   { label: "Last 7 days", from: "now-7d", to: "now" },
   { label: "Last 30 days", from: "now-30d", to: "now" }
 ];
-function DataTable({
+function DataTableInner({
   data,
   columns: columnsInput,
+  loading = false,
+  loadingMessage = "Loading results…",
+  loadingRowCount = 8,
   emptyMessage: _emptyMessage = "No data",
   className,
   autoFilter = false,
@@ -44,11 +63,18 @@ function DataTable({
   globalFilterPlaceholder = "Search all columns…",
   defaultSort,
   filterBarProps,
+  externalSearch,
+  externalTimeRange,
+  externalFilters,
+  pagination,
   getRowId,
   onRowClick,
   isRowClickable,
   getRowHref,
   renderExpandedRow,
+  detailStyle = "row",
+  detailDialogTitle,
+  detailDialogSize = "lg",
   resizableColumns = true,
   persistColumnWidths = true,
   columnResizeStorageKey,
@@ -61,6 +87,9 @@ function DataTable({
   persistDensity = true,
   densityStorageKey,
   showDensityControl,
+  themeMenuValue,
+  onThemeChange,
+  showThemeControl = false,
   showHeaderFilters = true
 }) {
   const columns = useMemo(
@@ -95,6 +124,7 @@ function DataTable({
   const [multiFilters, setMultiFilters] = useState({});
   const [numberFilters, setNumberFilters] = useState({});
   const [expandedRows, setExpandedRows] = useState({});
+  const [detailRow, setDetailRow] = useState(null);
   const [localGlobalFilter, setLocalGlobalFilter] = useState("");
   const [timeRangeFilter, setTimeRangeFilter] = useState(() => {
     var _a, _b, _c, _d;
@@ -199,7 +229,7 @@ function DataTable({
   );
   const showColumnVisibilityControl = hideableColumns && hideableColumnCount > 1;
   const resolvedShowDensityControl = showDensityControl ?? showColumnVisibilityControl;
-  const showTablePreferencesControl = showColumnVisibilityControl || resolvedShowDensityControl;
+  const showTablePreferencesControl = showColumnVisibilityControl || resolvedShowDensityControl || showThemeControl;
   const densityOverride = densityControlled ? density : localDensityOverride;
   const tagActionsByColumn = useMemo(() => {
     const out = {};
@@ -230,7 +260,7 @@ function DataTable({
     [visibleColumns]
   );
   const generatedFilters = useMemo(() => {
-    if (!autoFilter) return [];
+    if (!autoFilter || loading) return [];
     return filterableColumns.map((column) => {
       var _a;
       const numberBounds = getNumericFilterBounds(rows, column);
@@ -269,7 +299,7 @@ function DataTable({
         options
       };
     });
-  }, [autoFilter, filterableColumns, rows]);
+  }, [autoFilter, filterableColumns, loading, rows]);
   useEffect(() => {
     setTextFilters((current) => pruneTextFilterState(current, generatedFilters));
     setMultiFilters((current) => pruneMultiFilterState(current, generatedFilters));
@@ -340,9 +370,9 @@ function DataTable({
     (filterBarProps == null ? void 0 : filterBarProps.leading) || (filterBarProps == null ? void 0 : filterBarProps.children) || (filterBarProps == null ? void 0 : filterBarProps.trailing) || (filterBarProps == null ? void 0 : filterBarProps.timeRange) || (filterBarProps == null ? void 0 : filterBarProps.dateRange)
   );
   const autoTimeRange = useMemo(() => {
-    var _a;
+    var _a, _b, _c, _d;
     if (!autoFilter || !timeRangeColumn) return null;
-    return {
+    const next = {
       from: timeRangeFilter.from,
       to: timeRangeFilter.to,
       onApply: (from, to) => setTimeRangeFilter({ from, to }),
@@ -351,8 +381,18 @@ function DataTable({
       toPlaceholder: "now",
       emptyLabel: "Any time"
     };
+    if (((_b = timeRangeColumn.timestamp) == null ? void 0 : _b.timeEnabled) !== void 0) {
+      next.timeEnabled = timeRangeColumn.timestamp.timeEnabled;
+    }
+    if ((_c = timeRangeColumn.timestamp) == null ? void 0 : _c.timeZone) {
+      next.timeZone = timeRangeColumn.timestamp.timeZone;
+    }
+    if ((_d = timeRangeColumn.timestamp) == null ? void 0 : _d.timeZones) {
+      next.timeZones = timeRangeColumn.timestamp.timeZones;
+    }
+    return next;
   }, [autoFilter, timeRangeColumn, timeRangeFilter.from, timeRangeFilter.to]);
-  const showFilterBar = autoFilter && (showGlobalFilter || nativeFilters.length > 0 || !!autoTimeRange) || hasCustomFilterBarContent || showTablePreferencesControl;
+  const showFilterBar = autoFilter && (showGlobalFilter || nativeFilters.length > 0 || !!autoTimeRange) || !!externalSearch || !!externalTimeRange || externalFilters && externalFilters.length > 0 || hasCustomFilterBarContent || showTablePreferencesControl;
   const setDensityOverride = (next) => {
     if (!densityControlled) setLocalDensityOverride(next);
     onDensityChange == null ? void 0 : onDensityChange(next);
@@ -509,169 +549,199 @@ function DataTable({
     event.stopPropagation();
     setHeaderFilterMenu(menuStateFromTrigger(event, columnKey));
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-col gap-3", className), "data-density": densityOverride, children: [
+  return /* @__PURE__ */ jsx(DensityValueProvider, { density: densityOverride ?? "comfortable", children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-col gap-3", className), "data-density": densityOverride, children: [
     showFilterBar && /* @__PURE__ */ jsx(
       FilterBar,
       {
         ...filterBarProps,
-        ...autoFilter && showGlobalFilter ? {
+        ...externalSearch ? { search: externalSearch } : autoFilter && showGlobalFilter ? {
           search: {
             value: effectiveGlobalFilter,
             onChange: setEffectiveGlobalFilter,
             placeholder: globalFilterPlaceholder
           }
         } : {},
-        ...autoTimeRange ? { timeRange: autoTimeRange } : {},
+        ...externalTimeRange ? { timeRange: externalTimeRange } : autoTimeRange ? { timeRange: autoTimeRange } : {},
         trailing: filterBarTrailing,
-        filters: nativeFilters
+        filters: externalFilters && externalFilters.length > 0 ? [...externalFilters, ...nativeFilters] : nativeFilters
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-md border border-border", children: /* @__PURE__ */ jsxs("table", { className: "w-max table-auto text-left text-sm", children: [
-      /* @__PURE__ */ jsx("colgroup", { children: visibleColumns.map((column) => /* @__PURE__ */ jsx(
-        "col",
-        {
-          style: columnStyle(column, columnWidths),
-          className: column.shrink && !column.grow ? "w-px" : void 0
-        },
-        column.key
-      )) }),
-      /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_var(--tw-shadow-color)] shadow-border", children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border text-xs text-muted-foreground", children: visibleColumns.map((column) => /* @__PURE__ */ jsxs(
-        "th",
-        {
-          className: cn(
-            "group/header relative whitespace-nowrap font-medium",
-            DATA_TABLE_HEADER_DENSITY_CLASS,
-            alignmentClass(column.align),
-            resizableColumns && column.resizable !== false && "select-none",
-            column.headerClassName
-          ),
-          onContextMenu: (event) => openHeaderColumnMenu(event, column),
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "flex min-w-0 items-center gap-1",
-                  headerAlignmentClass(column.align),
-                  resizableColumns && column.resizable !== false && "pr-2"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "min-w-0", children: column.sortable === false ? /* @__PURE__ */ jsx("span", { children: column.label }) : /* @__PURE__ */ jsx(
-                    SortableHeader,
-                    {
-                      active: (sort == null ? void 0 : sort.key) === column.key,
-                      ...(sort == null ? void 0 : sort.key) === column.key ? { dir: sort.dir } : {},
-                      ...column.align ? { align: column.align } : {},
-                      onClick: () => toggle(column.key),
-                      children: column.label
-                    }
-                  ) }),
-                  showHeaderFilterControls && (nativeFilterByColumn.has(column.key) || autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === column.key) && /* @__PURE__ */ jsx(
-                    HeaderFilterButton,
-                    {
-                      column,
-                      active: nativeFilterByColumn.has(column.key) ? isFilterBarFilterActive(nativeFilterByColumn.get(column.key)) : Boolean(timeRangeFilter.from || timeRangeFilter.to),
-                      onOpen: (event) => openHeaderFilterMenu(event, column.key)
-                    }
-                  )
-                ]
-              }
-            ),
-            resizableColumns && column.resizable !== false && /* @__PURE__ */ jsx(
-              "span",
-              {
-                role: "separator",
-                "aria-label": `Resize ${labelText(column)} column`,
-                "aria-orientation": "vertical",
-                className: "absolute right-0 top-0 flex h-full w-3 cursor-col-resize touch-none items-center justify-center border-r border-border/70 bg-gradient-to-l from-border/30 to-transparent transition-colors hover:border-primary hover:from-primary/20",
-                onClick: (event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                },
-                onDoubleClick: (event) => autoFitColumn(event, column),
-                onMouseDown: (event) => startColumnResize(event, column),
-                children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    "aria-hidden": true,
-                    className: "h-4 w-0.5 rounded-full bg-border transition-colors group-hover/header:bg-primary/70"
-                  }
-                )
-              }
-            )
-          ]
-        },
-        column.key
-      )) }) }),
-      /* @__PURE__ */ jsx("tbody", { children: sorted.map((record) => {
-        const href = getRowHref == null ? void 0 : getRowHref(record.row);
-        const expanded = expandedRows[record.id] ?? false;
-        const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
-          columns: effectiveColumns,
-          visibleColumns,
-          tagActionsByColumn
-        })) ?? null;
-        const expandable = expandedContent !== null;
-        const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
-        const clickable = !!href || rowClickEnabled || expandable;
-        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          /* @__PURE__ */ jsx(
-            "tr",
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "min-h-0 flex-1 overflow-auto rounded-md border border-border",
+        "aria-busy": loading || void 0,
+        children: /* @__PURE__ */ jsxs("table", { className: "w-max table-auto text-left text-sm", children: [
+          /* @__PURE__ */ jsx("colgroup", { children: visibleColumns.map((column) => /* @__PURE__ */ jsx(
+            "col",
+            {
+              style: columnStyle(column, columnWidths),
+              className: column.shrink && !column.grow ? "w-px" : void 0
+            },
+            column.key
+          )) }),
+          /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_var(--tw-shadow-color)] shadow-border", children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border text-xs text-muted-foreground", children: visibleColumns.map((column) => /* @__PURE__ */ jsxs(
+            "th",
             {
               className: cn(
-                "border-b border-border/60 align-top",
-                clickable && "cursor-pointer hover:bg-accent/40"
+                "group/header relative whitespace-nowrap font-medium",
+                DATA_TABLE_HEADER_DENSITY_CLASS,
+                alignmentClass(column.align),
+                resizableColumns && column.resizable !== false && "select-none",
+                column.headerClassName
               ),
-              onClick: () => {
-                if (expandable) {
-                  setExpandedRows((current) => ({
-                    ...current,
-                    [record.id]: !current[record.id]
-                  }));
-                }
-                if (rowClickEnabled) {
-                  onRowClick == null ? void 0 : onRowClick(record.row);
-                }
-              },
-              children: visibleColumns.map((column, index) => {
-                const rawValue = resolvePath(record.row, column.key);
-                let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
-                if (column.kind === "tags" && tagActionsByColumn[column.key]) {
-                  content = /* @__PURE__ */ jsx(TagActionsProvider, { value: tagActionsByColumn[column.key], children: content });
-                }
-                return /* @__PURE__ */ jsx(
-                  "td",
+              onContextMenu: (event) => openHeaderColumnMenu(event, column),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
                   {
                     className: cn(
-                      DATA_TABLE_CELL_DENSITY_CLASS,
-                      alignmentClass(column.align),
-                      column.cellClassName
+                      "flex min-w-0 items-center gap-1",
+                      headerAlignmentClass(column.align),
+                      resizableColumns && column.resizable !== false && "pr-2"
                     ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0", children: column.sortable === false ? /* @__PURE__ */ jsx("span", { children: column.label }) : /* @__PURE__ */ jsx(
+                        SortableHeader,
+                        {
+                          active: (sort == null ? void 0 : sort.key) === column.key,
+                          ...(sort == null ? void 0 : sort.key) === column.key ? { dir: sort.dir } : {},
+                          ...column.align ? { align: column.align } : {},
+                          onClick: () => toggle(column.key),
+                          children: column.label
+                        }
+                      ) }),
+                      showHeaderFilterControls && (nativeFilterByColumn.has(column.key) || autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === column.key) && /* @__PURE__ */ jsx(
+                        HeaderFilterButton,
+                        {
+                          column,
+                          active: nativeFilterByColumn.has(column.key) ? isFilterBarFilterActive(nativeFilterByColumn.get(column.key)) : Boolean(timeRangeFilter.from || timeRangeFilter.to),
+                          onOpen: (event) => openHeaderFilterMenu(event, column.key)
+                        }
+                      )
+                    ]
+                  }
+                ),
+                resizableColumns && column.resizable !== false && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    role: "separator",
+                    "aria-label": `Resize ${labelText(column)} column`,
+                    "aria-orientation": "vertical",
+                    className: "absolute right-0 top-0 flex h-full w-3 cursor-col-resize touch-none items-center justify-center border-r border-border/70 bg-gradient-to-l from-border/30 to-transparent transition-colors hover:border-primary hover:from-primary/20",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                    },
+                    onDoubleClick: (event) => autoFitColumn(event, column),
+                    onMouseDown: (event) => startColumnResize(event, column),
                     children: /* @__PURE__ */ jsx(
-                      CellContent,
+                      "span",
                       {
-                        column,
-                        ...columnWidths[column.key] !== void 0 ? { width: columnWidths[column.key] } : {},
-                        children: href && index === 0 ? /* @__PURE__ */ jsx("a", { href, className: "hover:underline", children: content }) : content
+                        "aria-hidden": true,
+                        className: "h-4 w-0.5 rounded-full bg-border transition-colors group-hover/header:bg-primary/70"
                       }
                     )
-                  },
-                  column.key
-                );
-              })
+                  }
+                )
+              ]
+            },
+            column.key
+          )) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx(
+            DataTableLoadingRows,
+            {
+              columns: visibleColumns,
+              rowCount: loadingRowCount,
+              message: loadingMessage
             }
-          ),
-          expanded && expandedContent && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: visibleColumns.length, className: "bg-muted/40 p-density-3", children: /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-background p-density-3", children: expandedContent }) }) })
-        ] }, record.id);
-      }) })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "px-1 text-xs text-muted-foreground", children: [
-      sorted.length,
-      " of ",
-      data.length,
-      " row",
-      data.length === 1 ? "" : "s"
-    ] }),
+          ) : sorted.map((record) => {
+            const href = getRowHref == null ? void 0 : getRowHref(record.row);
+            const expanded = expandedRows[record.id] ?? false;
+            const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
+              columns: effectiveColumns,
+              visibleColumns,
+              tagActionsByColumn
+            })) ?? null;
+            const expandable = expandedContent !== null;
+            const expandsInline = expandable && detailStyle === "row";
+            const opensDialog = expandable && detailStyle === "dialog";
+            const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
+            const clickable = !!href || rowClickEnabled || expandable;
+            return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              /* @__PURE__ */ jsx(
+                "tr",
+                {
+                  className: cn(
+                    "border-b border-border/60 align-top",
+                    clickable && "cursor-pointer hover:bg-accent/40"
+                  ),
+                  onClick: () => {
+                    if (expandsInline) {
+                      setExpandedRows((current) => ({
+                        ...current,
+                        [record.id]: !current[record.id]
+                      }));
+                    }
+                    if (opensDialog) {
+                      setDetailRow(record);
+                    }
+                    if (rowClickEnabled) {
+                      onRowClick == null ? void 0 : onRowClick(record.row);
+                    }
+                  },
+                  children: visibleColumns.map((column, index) => {
+                    const rawValue = resolvePath(record.row, column.key);
+                    let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
+                    if (column.kind === "tags" && tagActionsByColumn[column.key]) {
+                      content = /* @__PURE__ */ jsx(TagActionsProvider, { value: tagActionsByColumn[column.key], children: content });
+                    }
+                    return /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        className: cn(
+                          DATA_TABLE_CELL_DENSITY_CLASS,
+                          alignmentClass(column.align),
+                          column.cellClassName
+                        ),
+                        children: /* @__PURE__ */ jsx(
+                          CellContent,
+                          {
+                            column,
+                            ...columnWidths[column.key] !== void 0 ? { width: columnWidths[column.key] } : {},
+                            children: href && index === 0 ? /* @__PURE__ */ jsx("a", { href, className: "hover:underline", children: content }) : content
+                          }
+                        )
+                      },
+                      column.key
+                    );
+                  })
+                }
+              ),
+              expandsInline && expanded && expandedContent && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: visibleColumns.length, className: "bg-muted/40 p-density-3", children: /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-background p-density-3", children: expandedContent }) }) })
+            ] }, record.id);
+          }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "px-1 text-xs text-muted-foreground", children: loading ? loadingMessage : `${sorted.length} of ${data.length} row${data.length === 1 ? "" : "s"}` }),
+    pagination && /* @__PURE__ */ jsx(DataTablePaginationFooter, { pagination }),
+    detailStyle === "dialog" && renderExpandedRow && /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open: detailRow !== null,
+        onClose: () => setDetailRow(null),
+        size: detailDialogSize,
+        ...detailRow ? {
+          title: typeof detailDialogTitle === "function" ? detailDialogTitle(detailRow.row) : detailDialogTitle
+        } : {},
+        children: detailRow ? renderExpandedRow(detailRow.row, {
+          columns: effectiveColumns,
+          visibleColumns,
+          tagActionsByColumn
+        }) : null
+      }
+    ),
     columnMenu && showTablePreferencesControl && /* @__PURE__ */ jsx(
       ColumnVisibilityMenu,
       {
@@ -680,11 +750,14 @@ function DataTable({
         anchor: columnMenu,
         showColumnVisibilityControl,
         showDensityControl: resolvedShowDensityControl,
+        showThemeControl,
+        themeMenuValue,
         densityOverride,
         visibleHideableColumnCount,
         onToggle: toggleColumnVisibility,
         onShowAll: showAllColumns,
         onDensityChange: setDensityOverride,
+        ...onThemeChange ? { onThemeChange } : {},
         onClose: () => setColumnMenu(null)
       }
     ),
@@ -697,6 +770,100 @@ function DataTable({
         onClose: () => setHeaderFilterMenu(null)
       }
     )
+  ] }) });
+}
+const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
+function DataTablePaginationFooter({ pagination }) {
+  const { page, pageSize, total, onPageChange, onPageSizeChange } = pagination;
+  const options = pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS;
+  const safePage = Math.max(0, page);
+  const totalPages = total != null && pageSize > 0 ? Math.max(1, Math.ceil(total / pageSize)) : void 0;
+  const atFirst = safePage === 0;
+  const atLast = totalPages != null ? safePage >= totalPages - 1 : false;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 px-1 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("span", { children: "Rows per page" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: "rounded border border-border bg-background px-1 py-0.5 text-foreground",
+          value: pageSize,
+          onChange: (event) => onPageSizeChange(Number(event.target.value)),
+          children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rounded border border-border px-2 py-0.5 disabled:opacity-50",
+          disabled: atFirst,
+          onClick: () => onPageChange(Math.max(0, safePage - 1)),
+          children: "Prev"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Page ",
+        safePage + 1,
+        totalPages != null ? ` of ${totalPages}` : ""
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rounded border border-border px-2 py-0.5 disabled:opacity-50",
+          disabled: atLast,
+          onClick: () => onPageChange(safePage + 1),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+function DataTableLoadingRows({
+  columns,
+  rowCount,
+  message
+}) {
+  const safeRowCount = Math.max(1, rowCount);
+  const safeColumnCount = Math.max(1, columns.length);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("tr", { className: "border-b border-border/60 bg-muted/20", children: /* @__PURE__ */ jsxs("td", { colSpan: safeColumnCount, className: cn(DATA_TABLE_CELL_DENSITY_CLASS, "p-0"), children: [
+      /* @__PURE__ */ jsx("div", { className: "h-0.5 w-full overflow-hidden bg-muted", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/2 animate-pulse rounded-full bg-primary/70" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "h-3 w-3 animate-spin rounded-full border-2 border-primary/30 border-t-primary"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: message })
+      ] })
+    ] }) }),
+    Array.from({ length: safeRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border/60", children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: cn(
+          DATA_TABLE_CELL_DENSITY_CLASS,
+          alignmentClass(column.align),
+          column.cellClassName
+        ),
+        children: /* @__PURE__ */ jsx(CellContent, { column, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "block h-3 animate-pulse rounded-full bg-muted",
+              loadingSkeletonWidth(columnIndex)
+            )
+          }
+        ) })
+      },
+      column.key
+    )) }, rowIndex))
   ] });
 }
 function HeaderFilterButton({
@@ -716,7 +883,7 @@ function HeaderFilterButton({
         active && "bg-accent text-foreground"
       ),
       onClick: onOpen,
-      children: /* @__PURE__ */ jsx(Icon, { name: "codicon:filter", className: "text-xs" })
+      children: /* @__PURE__ */ jsx("span", { "data-filter-icon-state": active ? "filled" : "outline", className: "inline-flex", children: /* @__PURE__ */ jsx(Icon, { icon: active ? UiFilterFilled : UiFilter, className: "text-xs" }) })
     }
   );
 }
@@ -770,7 +937,7 @@ function HeaderFilterMenu({
                 title: "Close",
                 className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
                 onClick: onClose,
-                children: /* @__PURE__ */ jsx(Icon, { name: "codicon:close", className: "text-sm" })
+                children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "text-sm" })
               }
             )
           ] })
@@ -783,25 +950,6 @@ function HeaderFilterMenu({
     }
   );
 }
-function clearFilterBarFilter(filter) {
-  if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
-    filter.onChange("");
-    return;
-  }
-  if (filter.kind === "lookup-multi" || filter.kind === "select-multi") {
-    filter.onChange([]);
-    return;
-  }
-  if (filter.kind === "number") {
-    filter.onChange({});
-    return;
-  }
-  if (filter.kind === "boolean") {
-    filter.onChange(false);
-    return;
-  }
-  filter.onChange({});
-}
 function ColumnVisibilityTrigger({
   onOpen
 }) {
@@ -811,12 +959,12 @@ function ColumnVisibilityTrigger({
       type: "button",
       "aria-label": "Open column menu",
       "aria-haspopup": "menu",
-      className: "inline-flex h-[34px] w-[34px] items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       onClick: (event) => {
         event.stopPropagation();
         onOpen(event);
       },
-      children: /* @__PURE__ */ jsx(Icon, { name: "codicon:ellipsis", className: "text-sm" })
+      children: /* @__PURE__ */ jsx(Icon, { icon: UiEllipsis, className: "text-sm" })
     }
   );
 }
@@ -826,11 +974,14 @@ function ColumnVisibilityMenu({
   anchor,
   showColumnVisibilityControl,
   showDensityControl,
+  showThemeControl,
+  themeMenuValue,
   densityOverride,
   visibleHideableColumnCount,
   onToggle,
   onShowAll,
   onDensityChange,
+  onThemeChange,
   onClose
 }) {
   const activeColumn = anchor.columnKey ? columns.find((column) => column.key === anchor.columnKey) : void 0;
@@ -875,7 +1026,7 @@ function ColumnVisibilityMenu({
                   onClose();
                 },
                 children: [
-                  /* @__PURE__ */ jsx(Icon, { name: "codicon:eye-closed", className: "text-sm text-muted-foreground" }),
+                  /* @__PURE__ */ jsx(Icon, { icon: UiEyeClosed, className: "text-sm text-muted-foreground" }),
                   /* @__PURE__ */ jsxs("span", { children: [
                     "Hide ",
                     labelText(activeColumn)
@@ -921,6 +1072,14 @@ function ColumnVisibilityMenu({
             separated: showColumnVisibilityControl,
             onDensityChange
           }
+        ),
+        showThemeControl && onThemeChange && /* @__PURE__ */ jsx(
+          ThemeMenuSection,
+          {
+            value: themeMenuValue ?? "system",
+            separated: showColumnVisibilityControl || showDensityControl,
+            onChange: onThemeChange
+          }
         )
       ]
     }
@@ -943,9 +1102,9 @@ function DensityMenuSection({
         className: densityMenuItemClassName(current === "inherit"),
         onClick: () => onDensityChange(void 0),
         children: [
-          /* @__PURE__ */ jsx(Icon, { name: "ph:arrows-in-line-vertical", className: "text-sm text-muted-foreground" }),
+          /* @__PURE__ */ jsx(Icon, { icon: UiResizeVertical, className: "text-sm text-muted-foreground" }),
           /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: "Use page density" }),
-          current === "inherit" ? /* @__PURE__ */ jsx(Icon, { name: "ph:check", className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+          current === "inherit" ? /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
         ]
       }
     ),
@@ -960,9 +1119,9 @@ function DensityMenuSection({
           className: densityMenuItemClassName(active),
           onClick: () => onDensityChange(option.value),
           children: [
-            /* @__PURE__ */ jsx(Icon, { name: option.icon, className: "text-sm text-muted-foreground" }),
+            /* @__PURE__ */ jsx(Icon, { icon: option.icon, className: "text-sm text-muted-foreground" }),
             /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
-            active ? /* @__PURE__ */ jsx(Icon, { name: "ph:check", className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+            active ? /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
           ]
         },
         option.value
@@ -976,6 +1135,39 @@ function densityMenuItemClassName(active) {
     active && "text-foreground"
   );
 }
+const THEME_MENU_OPTIONS = [
+  { value: "system", icon: UiDesktop, label: "Use system theme" },
+  { value: "light", icon: UiSun, label: "Light" },
+  { value: "dark", icon: UiMoon, label: "Dark" }
+];
+function ThemeMenuSection({
+  value,
+  separated,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(separated && "mt-1 border-t border-border pt-1"), children: [
+    /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: "Theme" }),
+    THEME_MENU_OPTIONS.map((option) => {
+      const active = value === option.value;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": active,
+          className: densityMenuItemClassName(active),
+          onClick: () => onChange(option.value),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { icon: option.icon, className: "text-sm text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+            active ? /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+          ]
+        },
+        option.value
+      );
+    })
+  ] });
+}
 function CellContent({
   column,
   width,
@@ -1194,19 +1386,6 @@ function labelText(column) {
 function isColumnHideable(column) {
   return column.hideable !== false;
 }
-function isFilterBarFilterActive(filter) {
-  if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
-    return String(filter.value ?? "").trim() !== "";
-  }
-  if (filter.kind === "lookup-multi" || filter.kind === "select-multi") {
-    return filter.value.length > 0;
-  }
-  if (filter.kind === "number") {
-    return String(filter.value.min ?? "").trim() !== "" || String(filter.value.max ?? "").trim() !== "";
-  }
-  if (filter.kind === "boolean") return filter.value;
-  return Object.keys(filter.value).length > 0;
-}
 function menuStateFromPointer(event, columnKey) {
   const padding = 8;
   const width = 256;
@@ -1434,6 +1613,9 @@ function headerAlignmentClass(align) {
   if (align === "center") return "justify-center";
   return "justify-start";
 }
+function loadingSkeletonWidth(index) {
+  return ["w-24", "w-40", "w-28", "w-56", "w-32", "w-48"][index % 6];
+}
 function cellContentStyle(width) {
   return width ? { maxWidth: `${width}px` } : void 0;
 }
@@ -1457,6 +1639,95 @@ function inferColumns(data) {
     filterable: true
   }));
 }
+function DataTable({
+  theme: themeProp = "system",
+  onThemeChange,
+  showThemeControl = false,
+  showFullscreenControl = false,
+  fullscreenTitle = "Table",
+  fullscreenButtonLabel = "Open table full screen",
+  className,
+  filterBarProps,
+  ...inner
+}) {
+  const themeControlled = onThemeChange !== void 0;
+  const [internalTheme, setInternalTheme] = useState(themeProp);
+  const themeValue = themeControlled ? themeProp : internalTheme;
+  const resolvedTheme = useResolvedTheme(themeValue);
+  const handleThemeChange = (next) => {
+    if (!themeControlled) setInternalTheme(next);
+    onThemeChange == null ? void 0 : onThemeChange(next);
+  };
+  const [fullscreenOpen, setFullscreenOpen] = useState(false);
+  const renderTable = ({ inFullscreen }) => {
+    const showFullscreenButton = showFullscreenControl && !inFullscreen;
+    const callerTrailing = filterBarProps == null ? void 0 : filterBarProps.trailing;
+    const mergedFilterBarProps = showFullscreenButton ? {
+      ...filterBarProps,
+      trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+        callerTrailing,
+        /* @__PURE__ */ jsx(
+          FullscreenButton,
+          {
+            label: fullscreenButtonLabel,
+            onClick: () => setFullscreenOpen(true)
+          }
+        )
+      ] })
+    } : filterBarProps;
+    return /* @__PURE__ */ jsx(
+      DataTableInner,
+      {
+        ...inner,
+        ...mergedFilterBarProps ? { filterBarProps: mergedFilterBarProps } : {},
+        themeMenuValue: themeValue,
+        showThemeControl,
+        onThemeChange: handleThemeChange
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-theme": resolvedTheme,
+      className: cn("flex min-h-0 flex-col text-foreground", className),
+      children: [
+        renderTable({ inFullscreen: false }),
+        showFullscreenControl && /* @__PURE__ */ jsx(
+          Modal,
+          {
+            open: fullscreenOpen,
+            onClose: () => setFullscreenOpen(false),
+            title: fullscreenTitle,
+            size: "full",
+            className: "h-[95vh]",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-theme": resolvedTheme,
+                className: "flex h-full min-h-0 flex-col bg-background text-foreground",
+                children: renderTable({ inFullscreen: true })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function FullscreenButton({ label, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      onClick,
+      children: /* @__PURE__ */ jsx(Icon, { icon: UiFullscreen, className: "text-sm" })
+    }
+  );
+}
 export {
   DataTable,
   inferColumns