@zentauri-ui/zentauri-components 2.1.6 → 2.1.8

package/dist/ui/data-table.js

@@ -0,0 +1,620 @@
+"use client";
+'use strict';
+
+var chunkI7EBE7BD_js = require('../chunk-I7EBE7BD.js');
+var chunkOYAJG2BO_js = require('../chunk-OYAJG2BO.js');
+var chunkHMDH4BQJ_js = require('../chunk-HMDH4BQJ.js');
+require('../chunk-74SKXGTM.js');
+var chunkKQZWTTY2_js = require('../chunk-KQZWTTY2.js');
+var chunkL5QORCUO_js = require('../chunk-L5QORCUO.js');
+var chunk2VUMVDR3_js = require('../chunk-2VUMVDR3.js');
+var chunkPTU5ZAYX_js = require('../chunk-PTU5ZAYX.js');
+require('../chunk-SCOIRBML.js');
+require('../chunk-XR3J46TZ.js');
+var chunkBAAXQPZ7_js = require('../chunk-BAAXQPZ7.js');
+require('../chunk-6OVDBAMI.js');
+var chunkT7PIKDUZ_js = require('../chunk-T7PIKDUZ.js');
+require('../chunk-KOIXQXZB.js');
+var chunkDPNTQ4AK_js = require('../chunk-DPNTQ4AK.js');
+require('../chunk-FBUY6K6S.js');
+require('../chunk-OH5VOGNW.js');
+require('../chunk-Y7BU5RC4.js');
+require('../chunk-NDF3HORF.js');
+require('../chunk-USLNTKVQ.js');
+require('../chunk-D7ATXPVI.js');
+require('../chunk-IEHY6KNM.js');
+require('../chunk-3MK7CWEX.js');
+require('../chunk-22FJROCI.js');
+require('../chunk-UJXFD4SK.js');
+require('../chunk-3EJCQXGV.js');
+require('../chunk-6KVTKYTB.js');
+require('../chunk-L7W4NRK6.js');
+require('../chunk-KWBGLH7G.js');
+require('../chunk-WGN2CBG6.js');
+require('../chunk-SRSRY5K2.js');
+require('../chunk-UG3GF2BD.js');
+require('../chunk-BZTAA3MK.js');
+require('../chunk-PZ25OHJE.js');
+require('../chunk-HOOZYA4N.js');
+require('../chunk-CJCOURVM.js');
+require('../chunk-KJMW7S5X.js');
+require('../chunk-3CYJQ6KF.js');
+require('../chunk-3453DQNL.js');
+require('../chunk-DYSXCJGL.js');
+require('../chunk-A7MU6SFI.js');
+require('../chunk-NYO3W5GY.js');
+require('../chunk-HNRCPZCK.js');
+require('../chunk-J2SUGU3X.js');
+require('../chunk-J5NTJVKX.js');
+require('../chunk-UQQHB3OI.js');
+require('../chunk-BBM4BKSN.js');
+require('../chunk-Y5JAQEBF.js');
+require('../chunk-7DVECOO7.js');
+require('../chunk-YPYPWALR.js');
+require('../chunk-PP3L6M62.js');
+require('../chunk-BJDT7P2I.js');
+require('../chunk-PG7LQVU6.js');
+require('../chunk-NFUOJMNI.js');
+require('../chunk-UT6QG35L.js');
+require('../chunk-IR5SJ7AQ.js');
+var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
+require('../chunk-PZ5AY32C.js');
+var react = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var dataTableRootVariants = classVarianceAuthority.cva(chunkDPNTQ4AK_js.zuiDataTableRootBase);
+var dataTableToolbarVariants = classVarianceAuthority.cva(chunkDPNTQ4AK_js.zuiDataTableToolbarBase);
+var dataTableToolbarGroupVariants = classVarianceAuthority.cva(chunkDPNTQ4AK_js.zuiDataTableToolbarGroupBase);
+var dataTableColumnPanelVariants = classVarianceAuthority.cva(chunkDPNTQ4AK_js.zuiDataTableColumnPanelBase);
+var dataTableStatusVariants = classVarianceAuthority.cva(chunkDPNTQ4AK_js.zuiDataTableStatusBase);
+var dataTableStateCellVariants = classVarianceAuthority.cva(chunkDPNTQ4AK_js.zuiDataTableStateCellBase);
+var dataTableVirtualScrollVariants = classVarianceAuthority.cva(
+  chunkDPNTQ4AK_js.zuiDataTableVirtualScrollBase
+);
+var defaultLoadingContent = "Loading data";
+var defaultEmptyContent = "No results found";
+var globalFilterKey = "__zui_global_filter__";
+function getAccessorValue(row, column) {
+  if (typeof column.accessor === "function") {
+    return column.accessor(row);
+  }
+  if (column.accessor && row && typeof row === "object") {
+    return row[column.accessor];
+  }
+  if (row && typeof row === "object" && column.id in row) {
+    return row[column.id];
+  }
+  return void 0;
+}
+function normalizeComparable(value) {
+  if (value instanceof Date) {
+    return value.getTime();
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  if (typeof value === "boolean") {
+    return value ? 1 : 0;
+  }
+  return value == null ? "" : String(value).toLowerCase();
+}
+function compareValues(left, right) {
+  const normalizedLeft = normalizeComparable(left);
+  const normalizedRight = normalizeComparable(right);
+  if (typeof normalizedLeft === "number" && typeof normalizedRight === "number") {
+    return normalizedLeft - normalizedRight;
+  }
+  return String(normalizedLeft).localeCompare(String(normalizedRight));
+}
+function resolveSearchOptions(search) {
+  if (!search) {
+    return null;
+  }
+  if (search === true) {
+    return {};
+  }
+  return search;
+}
+function validateSearchOptions(searchOptions) {
+  if (searchOptions?.filterColumnIds && searchOptions.filterColumnIds.length === 0) {
+    console.warn(
+      "DataTable search.filterColumnIds is empty. It should include at least one column id."
+    );
+  }
+}
+function isSelected(selectedRowIds, rowId) {
+  return selectedRowIds.includes(rowId);
+}
+function toggleId(ids, id, checked) {
+  if (checked) {
+    return ids.includes(id) ? [...ids] : [...ids, id];
+  }
+  return ids.filter((item) => item !== id);
+}
+function textAlignClass(textAlign) {
+  if (textAlign === "center") {
+    return "text-center";
+  }
+  if (textAlign === "right") {
+    return "text-right";
+  }
+  return void 0;
+}
+function paginationAppearanceFor(appearance) {
+  if (appearance === "striped" || appearance === "bordered" || appearance === "ghost") {
+    return "default";
+  }
+  return appearance;
+}
+function uniqueVisibleColumnIds(columns, ids) {
+  const columnIds = new Set(columns.map((column) => column.id));
+  const initialIds = ids ?? columns.filter((column) => column.visible !== false).map((column) => column.id);
+  return initialIds.filter((id, index) => {
+    return columnIds.has(id) && initialIds.indexOf(id) === index;
+  });
+}
+function DataTableBase(props) {
+  const {
+    className,
+    columns,
+    data,
+    getRowId,
+    caption,
+    tableClassName,
+    tableScrollAreaAriaLabel,
+    appearance = "default",
+    size = "md",
+    stickyHeader,
+    textAlign,
+    search,
+    sortKey,
+    defaultSortKey,
+    sortDirection,
+    defaultSortDirection = "none",
+    onSortChange,
+    enableRowSelection = false,
+    selectedRowIds,
+    defaultSelectedRowIds = [],
+    onRowSelectionChange,
+    enableColumnVisibility = false,
+    visibleColumnIds,
+    defaultVisibleColumnIds,
+    onColumnVisibilityChange,
+    bulkActions = [],
+    pagination,
+    virtualization,
+    showRowCount = true,
+    loading = false,
+    loadingContent = defaultLoadingContent,
+    emptyContent = defaultEmptyContent,
+    ref,
+    "aria-label": ariaLabel = "Data table",
+    ...rest
+  } = props;
+  const searchOptions = resolveSearchOptions(search);
+  validateSearchOptions(searchOptions);
+  const keyedData = react.useMemo(
+    () => data.map((row, index) => ({
+      row,
+      id: getRowId ? getRowId(row, index) : String(index)
+    })),
+    [data, getRowId]
+  );
+  const resolvedAppearance = appearance ?? "default";
+  const resolvedSize = size ?? "md";
+  const resolvedPaginationAppearance = paginationAppearanceFor(resolvedAppearance);
+  const columnPanelId = react.useId();
+  const [columnPanelOpen, setColumnPanelOpen] = react.useState(false);
+  const [internalSelectedRowIds, setInternalSelectedRowIds] = react.useState(() => [
+    ...defaultSelectedRowIds
+  ]);
+  const selectedIds = react.useMemo(
+    () => selectedRowIds ? [...selectedRowIds] : internalSelectedRowIds,
+    [internalSelectedRowIds, selectedRowIds]
+  );
+  const isSelectionControlled = selectedRowIds !== void 0;
+  const [internalVisibleColumnIds, setInternalVisibleColumnIds] = react.useState(() => uniqueVisibleColumnIds(columns, defaultVisibleColumnIds));
+  const currentVisibleColumnIds = visibleColumnIds ? uniqueVisibleColumnIds(columns, visibleColumnIds) : uniqueVisibleColumnIds(columns, internalVisibleColumnIds);
+  const isVisibilityControlled = visibleColumnIds !== void 0;
+  const visibleColumns = react.useMemo(
+    () => columns.filter((column) => currentVisibleColumnIds.includes(column.id)),
+    [columns, currentVisibleColumnIds]
+  );
+  const [internalSearchValue, setInternalSearchValue] = react.useState(
+    () => searchOptions?.defaultValue ?? ""
+  );
+  const searchValue = searchOptions?.value ?? internalSearchValue;
+  const isSearchControlled = searchOptions?.value !== void 0;
+  const searchableColumns = react.useMemo(() => {
+    const filterColumnIds = searchOptions?.filterColumnIds;
+    const hasFilterColumns = Boolean(
+      filterColumnIds && filterColumnIds.length > 0
+    );
+    return visibleColumns.filter((column) => {
+      if (hasFilterColumns && !filterColumnIds?.includes(column.id)) {
+        return false;
+      }
+      return column.filterable !== false;
+    });
+  }, [searchOptions?.filterColumnIds, visibleColumns]);
+  const filterState = searchValue ? { [globalFilterKey]: searchValue } : void 0;
+  const { filteredData } = chunkHMDH4BQJ_js.useTableFilter({
+    data: keyedData,
+    filters: filterState,
+    filterPredicate: ({ row }, filterValue) => {
+      const query = filterValue.trim().toLowerCase();
+      if (!query) {
+        return true;
+      }
+      return searchableColumns.some((column) => {
+        const value = column.filterValue ? column.filterValue(row) : getAccessorValue(row, column);
+        return String(value ?? "").toLowerCase().includes(query);
+      });
+    }
+  });
+  const tableSort = chunkI7EBE7BD_js.useTableSort({
+    sortKey,
+    defaultSortKey,
+    sortDirection,
+    defaultSortDirection,
+    onSortChange
+  });
+  const sortedData = react.useMemo(() => {
+    if (!tableSort.sortKey || tableSort.sortDirection === "none") {
+      return filteredData;
+    }
+    const sortedColumn = columns.find(
+      (column) => column.id === tableSort.sortKey
+    );
+    if (!sortedColumn || !sortedColumn.sortable) {
+      return filteredData;
+    }
+    const direction = tableSort.sortDirection === "ascending" ? 1 : -1;
+    return [...filteredData].sort((left, right) => {
+      const leftValue = sortedColumn.sortValue ? sortedColumn.sortValue(left.row) : getAccessorValue(left.row, sortedColumn);
+      const rightValue = sortedColumn.sortValue ? sortedColumn.sortValue(right.row) : getAccessorValue(right.row, sortedColumn);
+      return compareValues(leftValue, rightValue) * direction;
+    });
+  }, [columns, filteredData, tableSort.sortDirection, tableSort.sortKey]);
+  const paginationOptions = pagination && pagination !== true ? pagination : void 0;
+  const paginationEnabled = Boolean(pagination);
+  const pageSize = Math.max(1, paginationOptions?.pageSize ?? 10);
+  const pageCount = paginationEnabled ? Math.ceil(sortedData.length / pageSize) : 1;
+  const paginationState = chunk2VUMVDR3_js.usePagination({
+    pageCount,
+    page: paginationOptions?.page,
+    defaultPage: paginationOptions?.defaultPage,
+    siblingCount: paginationOptions?.siblingCount,
+    boundaryCount: paginationOptions?.boundaryCount,
+    onPageChange: paginationOptions?.onPageChange
+  });
+  const processedRows = paginationEnabled ? sortedData.slice(
+    (paginationState.currentPage - 1) * pageSize,
+    paginationState.currentPage * pageSize
+  ) : sortedData;
+  const virtualizationEnabled = Boolean(virtualization?.enabled) && processedRows.length > 0;
+  const virtualList = chunkOYAJG2BO_js.useVirtualList({
+    itemCount: processedRows.length,
+    itemHeight: virtualization?.rowHeight ?? 48,
+    overscan: virtualization?.overscan
+  });
+  const renderedRows = virtualizationEnabled ? virtualList.virtualItems.map((item) => ({
+    entry: processedRows[item.index],
+    index: item.index,
+    start: item.start
+  })) : processedRows.map((entry, index) => ({ entry, index, start: 0 }));
+  const virtualOffset = virtualizationEnabled ? virtualList.virtualItems[0]?.start ?? 0 : 0;
+  const selectableRows = react.useMemo(
+    () => processedRows.map((entry) => ({
+      row: entry.row,
+      id: entry.id
+    })),
+    [processedRows]
+  );
+  const selectedRows = react.useMemo(
+    () => keyedData.filter((entry) => isSelected(selectedIds, entry.id)).map((entry) => entry.row),
+    [keyedData, selectedIds]
+  );
+  const allVisibleSelected = selectableRows.length > 0 && selectableRows.every((item) => isSelected(selectedIds, item.id));
+  const someVisibleSelected = selectableRows.some((item) => isSelected(selectedIds, item.id)) && !allVisibleSelected;
+  const setSelectedIds = react.useCallback(
+    (nextIds) => {
+      if (!isSelectionControlled) {
+        setInternalSelectedRowIds(nextIds);
+      }
+      const nextRows = keyedData.filter((entry) => nextIds.includes(entry.id)).map((entry) => entry.row);
+      onRowSelectionChange?.(nextIds, nextRows);
+    },
+    [keyedData, isSelectionControlled, onRowSelectionChange]
+  );
+  const setColumnVisible = react.useCallback(
+    (columnId, checked) => {
+      const nextIds = checked ? [...currentVisibleColumnIds, columnId] : currentVisibleColumnIds.filter((id) => id !== columnId);
+      const normalized = uniqueVisibleColumnIds(columns, nextIds);
+      if (!isVisibilityControlled) {
+        setInternalVisibleColumnIds(normalized);
+      }
+      onColumnVisibilityChange?.(normalized);
+    },
+    [
+      columns,
+      currentVisibleColumnIds,
+      isVisibilityControlled,
+      onColumnVisibilityChange
+    ]
+  );
+  const handleSearchChange = react.useCallback(
+    (value) => {
+      if (!isSearchControlled) {
+        setInternalSearchValue(value);
+      }
+      searchOptions?.onValueChange?.(value);
+    },
+    [isSearchControlled, searchOptions]
+  );
+  const headerColSpan = visibleColumns.length + (enableRowSelection ? 1 : 0) || 1;
+  const renderStateRow = (content) => /* @__PURE__ */ jsxRuntime.jsx(chunkKQZWTTY2_js.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    chunkKQZWTTY2_js.TableCell,
+    {
+      colSpan: headerColSpan,
+      className: dataTableStateCellVariants(),
+      children: content
+    }
+  ) });
+  const renderRow = (entry, rowIndex) => {
+    const { row, id: rowId } = entry;
+    const rowSelected = isSelected(selectedIds, rowId);
+    const labelColumn = visibleColumns[0] ?? columns[0];
+    const rowSelectionLabel = labelColumn ? String(getAccessorValue(row, labelColumn) ?? rowId) : rowId;
+    return /* @__PURE__ */ jsxRuntime.jsxs(chunkKQZWTTY2_js.TableRow, { "data-state": rowSelected ? "selected" : void 0, children: [
+      enableRowSelection ? /* @__PURE__ */ jsxRuntime.jsx(chunkKQZWTTY2_js.TableCell, { className: "w-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+        chunkT7PIKDUZ_js.Checkbox,
+        {
+          "aria-label": `Select ${rowSelectionLabel}`,
+          checked: rowSelected,
+          onCheckedChange: (checked) => {
+            setSelectedIds(toggleId(selectedIds, rowId, checked));
+          }
+        }
+      ) }) : null,
+      visibleColumns.map((column, columnIndex) => {
+        const value = getAccessorValue(row, column);
+        const content = column.cell ? column.cell({ row, value, column, rowIndex }) : String(value ?? "");
+        const isRowHeader = columnIndex === 0;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          chunkKQZWTTY2_js.TableCell,
+          {
+            scope: isRowHeader ? "row" : void 0,
+            className: chunkZS5756ZC_js.cn(
+              textAlignClass(column.textAlign),
+              column.className,
+              column.cellClassName
+            ),
+            ...column.cellProps,
+            children: content
+          },
+          column.id
+        );
+      })
+    ] }, rowId);
+  };
+  const tableElement = /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkKQZWTTY2_js.TableBase,
+    {
+      "aria-label": ariaLabel,
+      appearance: resolvedAppearance,
+      size: resolvedSize,
+      stickyHeader,
+      textAlign,
+      scrollAreaAriaLabel: tableScrollAreaAriaLabel,
+      className: tableClassName,
+      children: [
+        caption ? /* @__PURE__ */ jsxRuntime.jsx(chunkKQZWTTY2_js.TableCaption, { children: caption }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(chunkKQZWTTY2_js.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(chunkKQZWTTY2_js.TableRow, { children: [
+          enableRowSelection ? /* @__PURE__ */ jsxRuntime.jsx(chunkKQZWTTY2_js.TableHead, { className: "w-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+            chunkT7PIKDUZ_js.Checkbox,
+            {
+              "aria-label": "Select all rows",
+              checked: allVisibleSelected,
+              indeterminate: someVisibleSelected,
+              onCheckedChange: (checked) => {
+                const visibleIds = selectableRows.map((item) => item.id);
+                const nextIds = checked ? [.../* @__PURE__ */ new Set([...selectedIds, ...visibleIds])] : selectedIds.filter((id) => !visibleIds.includes(id));
+                setSelectedIds(nextIds);
+              }
+            }
+          ) }) : null,
+          visibleColumns.map((column) => {
+            const header = typeof column.header === "function" ? column.header({ column }) : column.header;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              chunkKQZWTTY2_js.TableHead,
+              {
+                className: chunkZS5756ZC_js.cn(
+                  textAlignClass(column.textAlign),
+                  column.className,
+                  column.headerClassName
+                ),
+                ...column.sortable ? tableSort.getSortProps(column.id) : {},
+                ...column.headerProps,
+                children: header
+              },
+              column.id
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkKQZWTTY2_js.TableBody, { children: loading ? renderStateRow(loadingContent) : renderedRows.length === 0 ? renderStateRow(emptyContent) : renderedRows.map(({ entry, index }) => renderRow(entry, index)) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      ref,
+      "data-slot": "data-table",
+      className: chunkZS5756ZC_js.cn(dataTableRootVariants(), className),
+      ...rest,
+      children: [
+        searchOptions || enableColumnVisibility || bulkActions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "data-table-toolbar",
+            className: dataTableToolbarVariants(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-slot": "data-table-toolbar-primary",
+                  className: dataTableToolbarGroupVariants(),
+                  children: [
+                    searchOptions ? /* @__PURE__ */ jsxRuntime.jsx(
+                      chunkPTU5ZAYX_js.Input,
+                      {
+                        as: "input",
+                        type: "search",
+                        "aria-label": searchOptions.label ?? "Search table",
+                        placeholder: searchOptions.placeholder ?? "Search table",
+                        value: searchValue,
+                        onChange: (event) => handleSearchChange(event.currentTarget.value),
+                        className: "min-w-56"
+                      }
+                    ) : null,
+                    selectedRows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: dataTableStatusVariants(), "aria-live": "polite", children: [
+                      selectedRows.length,
+                      " selected"
+                    ] }) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-slot": "data-table-toolbar-actions",
+                  className: dataTableToolbarGroupVariants(),
+                  children: [
+                    bulkActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                      chunkBAAXQPZ7_js.Button,
+                      {
+                        type: "button",
+                        appearance: "outline",
+                        size: "sm",
+                        disabled: action.disabled || selectedRows.length === 0,
+                        onClick: () => action.onSelect(selectedRows),
+                        children: action.label
+                      },
+                      index
+                    )),
+                    enableColumnVisibility ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        chunkBAAXQPZ7_js.Button,
+                        {
+                          type: "button",
+                          appearance: "outline",
+                          size: "sm",
+                          "aria-expanded": columnPanelOpen,
+                          "aria-controls": columnPanelId,
+                          onClick: () => setColumnPanelOpen((open) => !open),
+                          children: "Columns"
+                        }
+                      ),
+                      columnPanelOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          id: columnPanelId,
+                          "data-slot": "data-table-column-panel",
+                          className: dataTableColumnPanelVariants(),
+                          children: columns.map((column) => {
+                            const canHide = column.enableHiding !== false;
+                            return /* @__PURE__ */ jsxRuntime.jsxs(
+                              chunkT7PIKDUZ_js.Checkbox,
+                              {
+                                checked: currentVisibleColumnIds.includes(column.id),
+                                disabled: !canHide,
+                                onCheckedChange: (checked) => setColumnVisible(column.id, checked),
+                                children: [
+                                  String(
+                                    typeof column.header === "function" ? column.id : column.header
+                                  ),
+                                  " ",
+                                  "column"
+                                ]
+                              },
+                              column.id
+                            );
+                          })
+                        }
+                      ) : null
+                    ] }) : null
+                  ]
+                }
+              )
+            ]
+          }
+        ) : null,
+        virtualizationEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: virtualList.setContainerRef,
+            "data-slot": "data-table-virtual-scroll",
+            className: dataTableVirtualScrollVariants(),
+            style: { maxHeight: virtualization?.height },
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: virtualList.totalHeight }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-slot": "data-table-virtual-offset",
+                style: { transform: `translateY(${virtualOffset}px)` },
+                children: tableElement
+              }
+            ) })
+          }
+        ) : tableElement,
+        paginationEnabled && pageCount > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: chunkZS5756ZC_js.cn(
+              "flex flex-wrap items-center gap-3",
+              showRowCount ? "justify-between" : "justify-end"
+            ),
+            children: [
+              showRowCount ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: dataTableStatusVariants(), children: [
+                "Showing ",
+                processedRows.length,
+                " of ",
+                sortedData.length
+              ] }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkL5QORCUO_js.Pagination,
+                {
+                  appearance: resolvedPaginationAppearance,
+                  size: resolvedSize,
+                  pageCount,
+                  page: paginationState.currentPage,
+                  siblingCount: paginationOptions?.siblingCount,
+                  boundaryCount: paginationOptions?.boundaryCount,
+                  onPageChange: paginationState.setPage,
+                  className: "w-auto"
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+DataTableBase.displayName = "DataTable";
+function DataTable(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataTableBase, { ...props });
+}
+DataTable.displayName = "DataTable";
+
+exports.DataTable = DataTable;
+exports.dataTableColumnPanelVariants = dataTableColumnPanelVariants;
+exports.dataTableRootVariants = dataTableRootVariants;
+exports.dataTableStateCellVariants = dataTableStateCellVariants;
+exports.dataTableStatusVariants = dataTableStatusVariants;
+exports.dataTableToolbarGroupVariants = dataTableToolbarGroupVariants;
+exports.dataTableToolbarVariants = dataTableToolbarVariants;
+exports.dataTableVirtualScrollVariants = dataTableVirtualScrollVariants;
+//# sourceMappingURL=data-table.js.map
+//# sourceMappingURL=data-table.js.map