@plexui/ui 0.7.36 → 0.7.38

package/dist/es/components/DataTable/DataTable.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import clsx from "clsx";
+import { useState } from "react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../Table";
+import { DataTablePagination } from "./DataTablePagination";
+import s from "./DataTable.module.css";
+const resolveUpdater = (updater, value) => {
+    return typeof updater === "function" ? updater(value) : updater;
+};
+export const DataTable = ({ columns, data, globalFilter, onGlobalFilterChange, onRowClick, pageSize = 10, initialSorting, columnVisibility, onColumnVisibilityChange, enableRowSelection = false, rowSelection, onRowSelectionChange, getRowId, emptyMessage = "No results.", className, showPagination = true, }) => {
+    const [sorting, setSorting] = useState(initialSorting ?? []);
+    const shouldPaginate = Number.isFinite(pageSize) && pageSize > 0;
+    const handleGlobalFilterChange = onGlobalFilterChange
+        ? (updater) => {
+            onGlobalFilterChange(resolveUpdater(updater, globalFilter ?? ""));
+        }
+        : undefined;
+    const handleColumnVisibilityChange = onColumnVisibilityChange
+        ? (updater) => {
+            onColumnVisibilityChange(resolveUpdater(updater, columnVisibility ?? {}));
+        }
+        : undefined;
+    const handleRowSelectionChange = onRowSelectionChange
+        ? (updater) => {
+            onRowSelectionChange(resolveUpdater(updater, rowSelection ?? {}));
+        }
+        : undefined;
+    const table = useReactTable({
+        data,
+        columns,
+        state: {
+            sorting,
+            globalFilter,
+            columnVisibility,
+            rowSelection,
+        },
+        ...(shouldPaginate ? { initialState: { pagination: { pageIndex: 0, pageSize } } } : {}),
+        onSortingChange: setSorting,
+        onGlobalFilterChange: handleGlobalFilterChange,
+        onColumnVisibilityChange: handleColumnVisibilityChange,
+        onRowSelectionChange: handleRowSelectionChange,
+        getRowId: getRowId ? (originalRow) => getRowId(originalRow) : undefined,
+        enableRowSelection,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        ...(shouldPaginate ? { getPaginationRowModel: getPaginationRowModel() } : {}),
+    });
+    const rows = table.getRowModel().rows;
+    const totalRows = table.getFilteredRowModel().rows.length;
+    const hasPagination = shouldPaginate && totalRows > pageSize;
+    const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1);
+    return (_jsxs("div", { className: clsx(s.DataTable, className), "data-clickable": onRowClick ? "" : undefined, children: [_jsx("div", { className: s.TableContainer, children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { children: header.isPlaceholder
+                                        ? null
+                                        : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(TableBody, { children: rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: visibleColumnCount, className: s.EmptyCell, children: emptyMessage }) })) : (rows.map((row) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) })] }) }), showPagination && hasPagination && _jsx(DataTablePagination, { table: table })] }));
+};
+//# sourceMappingURL=DataTable.js.map

package/dist/es/components/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type OnChangeFn,\n  type RowSelectionState,\n  type SortingState,\n  type Updater,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport clsx from \"clsx\"\nimport { useState, type ReactNode } from \"react\"\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../Table\"\nimport { DataTablePagination } from \"./DataTablePagination\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTableProps<TData> = {\n  /** Column definitions following TanStack Table v8 ColumnDef API */\n  columns: ColumnDef<TData, unknown>[]\n  /** Data array to display */\n  data: TData[]\n  /** External search/filter string (controlled) */\n  globalFilter?: string\n  /** Callback when global filter changes */\n  onGlobalFilterChange?: (value: string) => void\n  /** Click handler for rows */\n  onRowClick?: (row: TData) => void\n  /** Number of rows per page. Set to 0 or Infinity to disable pagination.\n   * @default 10\n   */\n  pageSize?: number\n  /** Initial sorting state */\n  initialSorting?: SortingState\n  /** Controlled column visibility */\n  columnVisibility?: VisibilityState\n  /** Callback when column visibility changes */\n  onColumnVisibilityChange?: (visibility: VisibilityState) => void\n  /** Enable row selection checkboxes\n   * @default false\n   */\n  enableRowSelection?: boolean\n  /** Controlled row selection state */\n  rowSelection?: RowSelectionState\n  /** Callback when row selection changes */\n  onRowSelectionChange?: (selection: RowSelectionState) => void\n  /** Custom row ID accessor */\n  getRowId?: (row: TData) => string\n  /** Message shown when there are no rows\n   * @default \"No results.\"\n   */\n  emptyMessage?: ReactNode\n  /** Class applied to the outermost wrapper */\n  className?: string\n  /** Whether to show pagination controls. Auto-hidden when all rows fit.\n   * @default true\n   */\n  showPagination?: boolean\n}\n\nconst resolveUpdater = <T,>(updater: Updater<T>, value: T): T => {\n  return typeof updater === \"function\" ? (updater as (old: T) => T)(value) : updater\n}\n\nexport const DataTable = <TData,>({\n  columns,\n  data,\n  globalFilter,\n  onGlobalFilterChange,\n  onRowClick,\n  pageSize = 10,\n  initialSorting,\n  columnVisibility,\n  onColumnVisibilityChange,\n  enableRowSelection = false,\n  rowSelection,\n  onRowSelectionChange,\n  getRowId,\n  emptyMessage = \"No results.\",\n  className,\n  showPagination = true,\n}: DataTableProps<TData>) => {\n  const [sorting, setSorting] = useState<SortingState>(initialSorting ?? [])\n\n  const shouldPaginate = Number.isFinite(pageSize) && pageSize > 0\n\n  const handleGlobalFilterChange: OnChangeFn<string> | undefined = onGlobalFilterChange\n    ? (updater) => {\n        onGlobalFilterChange(resolveUpdater(updater, globalFilter ?? \"\"))\n      }\n    : undefined\n\n  const handleColumnVisibilityChange: OnChangeFn<VisibilityState> | undefined =\n    onColumnVisibilityChange\n      ? (updater) => {\n          onColumnVisibilityChange(resolveUpdater(updater, columnVisibility ?? {}))\n        }\n      : undefined\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> | undefined = onRowSelectionChange\n    ? (updater) => {\n        onRowSelectionChange(resolveUpdater(updater, rowSelection ?? {}))\n      }\n    : undefined\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      globalFilter,\n      columnVisibility,\n      rowSelection,\n    },\n    ...(shouldPaginate ? { initialState: { pagination: { pageIndex: 0, pageSize } } } : {}),\n    onSortingChange: setSorting,\n    onGlobalFilterChange: handleGlobalFilterChange,\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    onRowSelectionChange: handleRowSelectionChange,\n    getRowId: getRowId ? (originalRow) => getRowId(originalRow) : undefined,\n    enableRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    ...(shouldPaginate ? { getPaginationRowModel: getPaginationRowModel() } : {}),\n  })\n\n  const rows = table.getRowModel().rows\n  const totalRows = table.getFilteredRowModel().rows.length\n  const hasPagination = shouldPaginate && totalRows > pageSize\n  const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1)\n\n  return (\n    <div\n      className={clsx(s.DataTable, className)}\n      data-clickable={onRowClick ? \"\" : undefined}\n    >\n      <div className={s.TableContainer}>\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {rows.length === 0 ? (\n              <TableRow>\n                <TableCell colSpan={visibleColumnCount} className={s.EmptyCell}>\n                  {emptyMessage}\n                </TableCell>\n              </TableRow>\n            ) : (\n              rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      {showPagination && hasPagination && <DataTablePagination table={table} />}\n    </div>\n  )\n}\n"]}

package/dist/es/components/DataTable/DataTable.module.css

@@ -0,0 +1,94 @@
+@layer components {.DataTable {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}.TableContainer {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}.EmptyCell {
+  height: 200px;
+  vertical-align: middle;
+  color: var(--color-text-tertiary);
+  text-align: center;
+}
+  :where(.DataTable[data-clickable]) :where(tbody tr) {
+    cursor: pointer;
+  }.Pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--spacing) * 3) 0;
+  border-top: 1px solid var(--color-border);
+}.PaginationLeft {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 2);
+}.PaginationRight {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 3);
+}.PaginationLabel {
+  color: var(--color-text-secondary);
+  font-size: var(--font-text-sm-size);
+}.PaginationInfo {
+  color: var(--color-text-secondary);
+  font-size: var(--font-text-sm-size);
+}.PaginationSelect {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+  padding-right: calc(var(--spacing) * 6);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+  font-size: var(--font-text-sm-size);
+  line-height: var(--font-text-sm-line-height);
+  cursor: pointer;
+  background-color: var(--color-surface);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-position: right calc(var(--spacing) * 1.5) center;
+  background-repeat: no-repeat;
+}
+
+  .PaginationSelect:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: -1px;
+  }.PaginationButtons {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 1);
+}.ColumnHeaderButton {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 1);
+  color: inherit;
+  font-weight: inherit;
+  white-space: nowrap;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: pointer;
+}
+
+  .ColumnHeaderButton:hover {
+    color: var(--color-text);
+  }.SortIcon {
+  display: inline-flex;
+  opacity: 0.4;
+}
+
+  :where(.ColumnHeaderButton:hover) .SortIcon {
+    opacity: 0.7;
+  }
+
+  .SortIcon svg {
+    width: var(--font-text-sm-size);
+    height: var(--font-text-sm-size);
+  }:where(.ColumnHeaderButton[data-sorted]) .SortIcon {
+  opacity: 1;
+}
+}

package/dist/es/components/DataTable/DataTableColumnHeader.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "@tanstack/react-table";
+import clsx from "clsx";
+import { ArrowDownSm, ArrowUpSm, Sort } from "../Icon";
+import s from "./DataTable.module.css";
+export const DataTableColumnHeader = ({ column, title, className, }) => {
+    if (!column.getCanSort()) {
+        return _jsx("span", { className: className, children: title });
+    }
+    const sorted = column.getIsSorted();
+    return (_jsxs("button", { type: "button", className: clsx(s.ColumnHeaderButton, className), "data-sorted": sorted || undefined, onClick: column.getToggleSortingHandler(), children: [title, _jsx("span", { className: s.SortIcon, children: sorted === "asc" ? _jsx(ArrowUpSm, {}) : sorted === "desc" ? _jsx(ArrowDownSm, {}) : _jsx(Sort, {}) })] }));
+};
+//# sourceMappingURL=DataTableColumnHeader.js.map

package/dist/es/components/DataTable/DataTableColumnHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableColumnHeader.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTableColumnHeader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAe,MAAM,uBAAuB,CAAA;AACnD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AACtD,OAAO,CAAC,MAAM,wBAAwB,CAAA;AAQtC,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAgB,EACnD,MAAM,EACN,KAAK,EACL,SAAS,GACiC,EAAE,EAAE;IAC9C,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;QACzB,OAAO,eAAM,SAAS,EAAE,SAAS,YAAG,KAAK,GAAQ,CAAA;IACnD,CAAC;IAED,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAA;IAEnC,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,kBAAkB,EAAE,SAAS,CAAC,iBACnC,MAAM,IAAI,SAAS,EAChC,OAAO,EAAE,MAAM,CAAC,uBAAuB,EAAE,aAExC,KAAK,EACN,eAAM,SAAS,EAAE,CAAC,CAAC,QAAQ,YACxB,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAC,IAAI,KAAG,GAC7E,IACA,CACV,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Column } from \"@tanstack/react-table\"\nimport clsx from \"clsx\"\nimport { ArrowDownSm, ArrowUpSm, Sort } from \"../Icon\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTableColumnHeaderProps<TData, TValue> = {\n  column: Column<TData, TValue>\n  title: string\n  className?: string\n}\n\nexport const DataTableColumnHeader = <TData, TValue>({\n  column,\n  title,\n  className,\n}: DataTableColumnHeaderProps<TData, TValue>) => {\n  if (!column.getCanSort()) {\n    return <span className={className}>{title}</span>\n  }\n\n  const sorted = column.getIsSorted()\n\n  return (\n    <button\n      type=\"button\"\n      className={clsx(s.ColumnHeaderButton, className)}\n      data-sorted={sorted || undefined}\n      onClick={column.getToggleSortingHandler()}\n    >\n      {title}\n      <span className={s.SortIcon}>\n        {sorted === \"asc\" ? <ArrowUpSm /> : sorted === \"desc\" ? <ArrowDownSm /> : <Sort />}\n      </span>\n    </button>\n  )\n}\n"]}

package/dist/es/components/DataTable/DataTablePagination.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "@tanstack/react-table";
+import { Button } from "../Button";
+import { ChevronLeftMd, ChevronRightMd } from "../Icon";
+import s from "./DataTable.module.css";
+export const DataTablePagination = ({ table }) => {
+    const totalRows = table.getFilteredRowModel().rows.length;
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const from = pageIndex * pageSize + 1;
+    const to = Math.min((pageIndex + 1) * pageSize, totalRows);
+    return (_jsxs("div", { className: s.Pagination, children: [_jsxs("div", { className: s.PaginationLeft, children: [_jsx("span", { className: s.PaginationLabel, children: "Rows per page" }), _jsx("select", { className: s.PaginationSelect, value: pageSize, onChange: (e) => table.setPageSize(Number(e.target.value)), children: [10, 20, 50, 100].map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: s.PaginationRight, children: [_jsx("span", { className: s.PaginationInfo, children: totalRows === 0 ? "0 results" : `${from}–${to} of ${totalRows}` }), _jsxs("div", { className: s.PaginationButtons, children: [_jsx(Button, { color: "secondary", variant: "outline", size: "sm", uniform: true, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: _jsx(ChevronLeftMd, {}) }), _jsx(Button, { color: "secondary", variant: "outline", size: "sm", uniform: true, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), children: _jsx(ChevronRightMd, {}) })] })] })] }));
+};
+//# sourceMappingURL=DataTablePagination.js.map

package/dist/es/components/DataTable/DataTablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAc,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACvD,OAAO,CAAC,MAAM,wBAAwB,CAAA;AAMtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAS,EAAE,KAAK,EAAmC,EAAE,EAAE;IACxF,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAA;IAC3D,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAA;IACrC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAA;IAE1D,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,eAAK,SAAS,EAAE,CAAC,CAAC,cAAc,aAC9B,eAAM,SAAS,EAAE,CAAC,CAAC,eAAe,8BAAsB,EACxD,iBACE,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAEzD,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,iBAAmB,KAAK,EAAE,IAAI,YAC3B,IAAI,IADM,IAAI,CAER,CACV,CAAC,GACK,IACL,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,aAC/B,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,EAAE,OAAO,SAAS,EAAE,GAC3D,EACP,eAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,aACjC,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,YAEnC,KAAC,aAAa,KAAG,GACV,EACT,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,YAE/B,KAAC,cAAc,KAAG,GACX,IACL,IACF,IACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { Button } from \"../Button\"\nimport { ChevronLeftMd, ChevronRightMd } from \"../Icon\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTablePaginationProps<TData> = {\n  table: Table<TData>\n}\n\nexport const DataTablePagination = <TData,>({ table }: DataTablePaginationProps<TData>) => {\n  const totalRows = table.getFilteredRowModel().rows.length\n  const { pageIndex, pageSize } = table.getState().pagination\n  const from = pageIndex * pageSize + 1\n  const to = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n  return (\n    <div className={s.Pagination}>\n      <div className={s.PaginationLeft}>\n        <span className={s.PaginationLabel}>Rows per page</span>\n        <select\n          className={s.PaginationSelect}\n          value={pageSize}\n          onChange={(e) => table.setPageSize(Number(e.target.value))}\n        >\n          {[10, 20, 50, 100].map((size) => (\n            <option key={size} value={size}>\n              {size}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className={s.PaginationRight}>\n        <span className={s.PaginationInfo}>\n          {totalRows === 0 ? \"0 results\" : `${from}–${to} of ${totalRows}`}\n        </span>\n        <div className={s.PaginationButtons}>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            uniform\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => table.previousPage()}\n          >\n            <ChevronLeftMd />\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            uniform\n            disabled={!table.getCanNextPage()}\n            onClick={() => table.nextPage()}\n          >\n            <ChevronRightMd />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/es/components/DataTable/index.js

@@ -0,0 +1,4 @@
+export { DataTable } from "./DataTable";
+export { DataTablePagination } from "./DataTablePagination";
+export { DataTableColumnHeader } from "./DataTableColumnHeader";
+//# sourceMappingURL=index.js.map

package/dist/es/components/DataTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DataTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAiC,MAAM,uBAAuB,CAAA;AAC1F,OAAO,EAAE,qBAAqB,EAAmC,MAAM,yBAAyB,CAAA","sourcesContent":["export { DataTable, type DataTableProps } from \"./DataTable\"\nexport { DataTablePagination, type DataTablePaginationProps } from \"./DataTablePagination\"\nexport { DataTableColumnHeader, type DataTableColumnHeaderProps } from \"./DataTableColumnHeader\"\n\nexport type {\n  ColumnDef,\n  RowSelectionState,\n  SortingState,\n  VisibilityState,\n} from \"@tanstack/react-table\"\n"]}

package/dist/es/components/Icon/index.js

@@ -222,6 +222,7 @@ export { default as FileUpload } from "./svg/FileUpload";
 export { default as FileVideo } from "./svg/FileVideo";
 export { default as FileZip } from "./svg/FileZip";
 export { default as Filter } from "./svg/Filter";
+export { default as Fingerprint } from "./svg/Fingerprint";
 export { default as Flag } from "./svg/Flag";
 export { default as Flask } from "./svg/Flask";
 export { default as FlaskFilled } from "./svg/FlaskFilled";