@d4gger/design-system 3.0.0 → 4.0.0

package/dist/components/dataTable/DataTableContext.d.cts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+type DataTableExportFormat = 'csv' | 'json';
+type DataTableToolbarColumn = {
+    id: string;
+    label: React.ReactNode;
+};
+type DataTableToolbarContextValue = {
+    columns: DataTableToolbarColumn[];
+    exportRows: (format: DataTableExportFormat) => string;
+    exportRowsProgressive: (format: DataTableExportFormat, onProgress: (percent: number) => void) => Promise<string>;
+    filteredRowCount: number;
+    onQueryChange: (query: string) => void;
+    onVisibleColumnIdsChange: (visibleColumnIds: Set<string>) => void;
+    query: string;
+    selectedRowCount: number;
+    totalRowCount: number;
+    visibleColumnIds: Set<string>;
+};
+declare const DataTableToolbarContext: React.Context<DataTableToolbarContextValue | null>;
+declare function useDataTableToolbarContext(): DataTableToolbarContextValue | null;
+export { DataTableToolbarContext, useDataTableToolbarContext };
+export type { DataTableExportFormat, DataTableToolbarColumn, DataTableToolbarContextValue };
+//# sourceMappingURL=DataTableContext.d.cts.map

package/dist/components/dataTable/DataTableContext.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableContext.d.cts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTableContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,qBAAqB,GAAG,KAAK,GAAG,MAAM,CAAA;AAE3C,KAAK,sBAAsB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,UAAU,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,MAAM,CAAA;IACrD,qBAAqB,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IAChH,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,wBAAwB,EAAE,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAC9B,CAAA;AAED,QAAA,MAAM,uBAAuB,oDAAiE,CAAA;AAE9F,iBAAS,0BAA0B,wCAElC;AAED,OAAO,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,CAAA;AAC9D,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,CAAA"}

package/dist/components/dataTable/DataTableContext.d.mts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+type DataTableExportFormat = 'csv' | 'json';
+type DataTableToolbarColumn = {
+    id: string;
+    label: React.ReactNode;
+};
+type DataTableToolbarContextValue = {
+    columns: DataTableToolbarColumn[];
+    exportRows: (format: DataTableExportFormat) => string;
+    exportRowsProgressive: (format: DataTableExportFormat, onProgress: (percent: number) => void) => Promise<string>;
+    filteredRowCount: number;
+    onQueryChange: (query: string) => void;
+    onVisibleColumnIdsChange: (visibleColumnIds: Set<string>) => void;
+    query: string;
+    selectedRowCount: number;
+    totalRowCount: number;
+    visibleColumnIds: Set<string>;
+};
+declare const DataTableToolbarContext: React.Context<DataTableToolbarContextValue | null>;
+declare function useDataTableToolbarContext(): DataTableToolbarContextValue | null;
+export { DataTableToolbarContext, useDataTableToolbarContext };
+export type { DataTableExportFormat, DataTableToolbarColumn, DataTableToolbarContextValue };
+//# sourceMappingURL=DataTableContext.d.mts.map

package/dist/components/dataTable/DataTableContext.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableContext.d.mts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTableContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,qBAAqB,GAAG,KAAK,GAAG,MAAM,CAAA;AAE3C,KAAK,sBAAsB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,UAAU,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,MAAM,CAAA;IACrD,qBAAqB,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IAChH,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,wBAAwB,EAAE,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAC9B,CAAA;AAED,QAAA,MAAM,uBAAuB,oDAAiE,CAAA;AAE9F,iBAAS,0BAA0B,wCAElC;AAED,OAAO,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,CAAA;AAC9D,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,CAAA"}

package/dist/components/dataTable/DataTableContext.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+type DataTableExportFormat = 'csv' | 'json';
+type DataTableToolbarColumn = {
+    id: string;
+    label: React.ReactNode;
+};
+type DataTableToolbarContextValue = {
+    columns: DataTableToolbarColumn[];
+    exportRows: (format: DataTableExportFormat) => string;
+    exportRowsProgressive: (format: DataTableExportFormat, onProgress: (percent: number) => void) => Promise<string>;
+    filteredRowCount: number;
+    onQueryChange: (query: string) => void;
+    onVisibleColumnIdsChange: (visibleColumnIds: Set<string>) => void;
+    query: string;
+    selectedRowCount: number;
+    totalRowCount: number;
+    visibleColumnIds: Set<string>;
+};
+declare const DataTableToolbarContext: React.Context<DataTableToolbarContextValue | null>;
+declare function useDataTableToolbarContext(): DataTableToolbarContextValue | null;
+export { DataTableToolbarContext, useDataTableToolbarContext };
+export type { DataTableExportFormat, DataTableToolbarColumn, DataTableToolbarContextValue };
+//# sourceMappingURL=DataTableContext.d.ts.map

package/dist/components/dataTable/DataTableContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableContext.d.ts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTableContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,qBAAqB,GAAG,KAAK,GAAG,MAAM,CAAA;AAE3C,KAAK,sBAAsB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,UAAU,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,MAAM,CAAA;IACrD,qBAAqB,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IAChH,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,wBAAwB,EAAE,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAC9B,CAAA;AAED,QAAA,MAAM,uBAAuB,oDAAiE,CAAA;AAE9F,iBAAS,0BAA0B,wCAElC;AAED,OAAO,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,CAAA;AAC9D,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,CAAA"}

package/dist/components/dataTable/DataTableContext.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+const DataTableToolbarContext = React.createContext(null);
+function useDataTableToolbarContext() {
+  return React.useContext(DataTableToolbarContext);
+}
+export {
+  DataTableToolbarContext,
+  useDataTableToolbarContext
+};
+//# sourceMappingURL=DataTableContext.js.map

package/dist/components/dataTable/DataTableContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/dataTable/DataTableContext.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\ntype DataTableExportFormat = 'csv' | 'json'\n\ntype DataTableToolbarColumn = {\n  id: string\n  label: React.ReactNode\n}\n\ntype DataTableToolbarContextValue = {\n  columns: DataTableToolbarColumn[]\n  exportRows: (format: DataTableExportFormat) => string\n  exportRowsProgressive: (format: DataTableExportFormat, onProgress: (percent: number) => void) => Promise<string>\n  filteredRowCount: number\n  onQueryChange: (query: string) => void\n  onVisibleColumnIdsChange: (visibleColumnIds: Set<string>) => void\n  query: string\n  selectedRowCount: number\n  totalRowCount: number\n  visibleColumnIds: Set<string>\n}\n\nconst DataTableToolbarContext = React.createContext<DataTableToolbarContextValue | null>(null)\n\nfunction useDataTableToolbarContext() {\n  return React.useContext(DataTableToolbarContext)\n}\n\nexport { DataTableToolbarContext, useDataTableToolbarContext }\nexport type { DataTableExportFormat, DataTableToolbarColumn, DataTableToolbarContextValue }\n"],
+  "mappings": ";AAEA,YAAY,WAAW;AAsBvB,MAAM,0BAA0B,MAAM,cAAmD,IAAI;AAE7F,SAAS,6BAA6B;AACpC,SAAO,MAAM,WAAW,uBAAuB;AACjD;",
+  "names": []
+}

package/dist/components/dataTable/DataTablePagination.cjs

@@ -40,32 +40,29 @@ const DATA_TABLE_PAGINATION_STYLE = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
+  flexWrap: "wrap",
   padding: "var(--dsx-space-sm) var(--dsx-space-md)",
   gap: "var(--dsx-space-sm)"
 };
-const DATA_TABLE_PAGINATION_INFO_STYLE = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--dsx-space-xs)",
-  fontSize: "var(--dsx-font-size-xs)",
-  color: "var(--dsx-color-on-surface-variant)",
-  whiteSpace: "nowrap"
-};
-const DATA_TABLE_PAGINATION_CONTROLS_STYLE = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--dsx-space-xs)"
+const DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
 };
 function DataTablePagination({
   page: controlledPage,
   defaultPage = 1,
   pageSize: controlledPageSize,
   defaultPageSize = 10,
-  pageSizeOptions = [5, 10, 20, 50],
+  pageSizeOptions = [10, 25, 50, 100],
   total,
   onPageChange,
   onPageSizeChange,
-  className
+  className,
+  align,
+  showFirstLast = false,
+  showPageInput = false,
+  dense = false
 }) {
   const [internalPage, setInternalPage] = React.useState(defaultPage);
   const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize);
@@ -102,18 +99,73 @@ function DataTablePagination({
       setInternalPage(newPage);
     }
     onPageSizeChange?.(newPageSize);
-    onPageChange?.(newPage);
   }
   const pageNumbers = (0, import_Pagination.buildPageNumbers)(safePage, totalPages);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       className: (0, import_classnames.default)("dsx-data-table-pagination", className),
-      style: DATA_TABLE_PAGINATION_STYLE,
+      style: align ? { ...DATA_TABLE_PAGINATION_STYLE, justifyContent: DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN[align] } : DATA_TABLE_PAGINATION_STYLE,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: DATA_TABLE_PAGINATION_INFO_STYLE, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: total > 0 ? `${startRow}\u2013${endRow} of ${total}` : "0 rows" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { margin: "0 var(--dsx-space-xs)", color: "var(--dsx-color-outline)" }, children: "|" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-data-table-pagination__info", role: "status", "aria-live": "polite", children: total > 0 ? `${startRow}\u2013${endRow} of ${total}` : "0 rows" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-data-table-pagination__navigation", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.Pagination, { "aria-label": "Table pagination", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Pagination.PaginationContent, { children: [
+            showFirstLast ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Pagination.PaginationFirst,
+              {
+                disabled: safePage <= 1,
+                onClick: () => handlePageChange(1)
+              }
+            ) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Pagination.PaginationPrevious,
+              {
+                disabled: safePage <= 1,
+                onClick: () => handlePageChange(safePage - 1)
+              }
+            ) }),
+            pageNumbers.map(
+              (pageOrEllipsis, index) => pageOrEllipsis === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Pagination.PaginationLink,
+                {
+                  active: safePage === pageOrEllipsis,
+                  onClick: () => handlePageChange(pageOrEllipsis),
+                  "aria-label": `Page ${pageOrEllipsis}`,
+                  children: pageOrEllipsis
+                }
+              ) }, pageOrEllipsis)
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Pagination.PaginationNext,
+              {
+                disabled: safePage >= totalPages,
+                onClick: () => handlePageChange(safePage + 1)
+              }
+            ) }),
+            showFirstLast ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Pagination.PaginationLast,
+              {
+                disabled: safePage >= totalPages,
+                onClick: () => handlePageChange(totalPages)
+              }
+            ) }) : null
+          ] }) }),
+          !showPageInput && !dense ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dsx-data-table-pagination__page-status", children: [
+            "Page ",
+            safePage,
+            " of ",
+            totalPages
+          ] }) : null,
+          showPageInput ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Pagination.PaginationPageInput,
+            {
+              page: safePage,
+              totalPages,
+              onPageChange: handlePageChange
+            }
+          ) : null
+        ] }),
+        !dense ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-data-table-pagination__page-size", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Rows per page:" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_Pagination.PaginationPageSize,
@@ -124,34 +176,7 @@ function DataTablePagination({
               "aria-label": "Rows per page"
             }
           )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: DATA_TABLE_PAGINATION_CONTROLS_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.Pagination, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Pagination.PaginationContent, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_Pagination.PaginationPrevious,
-            {
-              disabled: safePage <= 1,
-              onClick: () => handlePageChange(safePage - 1)
-            }
-          ) }),
-          pageNumbers.map(
-            (pageOrEllipsis, index) => pageOrEllipsis === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_Pagination.PaginationLink,
-              {
-                active: safePage === pageOrEllipsis,
-                onClick: () => handlePageChange(pageOrEllipsis),
-                "aria-label": `Page ${pageOrEllipsis}`,
-                children: pageOrEllipsis
-              }
-            ) }, pageOrEllipsis)
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_Pagination.PaginationNext,
-            {
-              disabled: safePage >= totalPages,
-              onClick: () => handlePageChange(safePage + 1)
-            }
-          ) })
-        ] }) }) })
+        ] }) : null
       ]
     }
   );

package/dist/components/dataTable/DataTablePagination.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataTable/DataTablePagination.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n  buildPageNumbers,\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPageSize,\n  PaginationPrevious,\n} from '../pagination/Pagination'\n\nconst DATA_TABLE_PAGINATION_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: 'var(--dsx-space-sm) var(--dsx-space-md)',\n  gap: 'var(--dsx-space-sm)',\n}\n\nconst DATA_TABLE_PAGINATION_INFO_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 'var(--dsx-space-xs)',\n  fontSize: 'var(--dsx-font-size-xs)',\n  color: 'var(--dsx-color-on-surface-variant)',\n  whiteSpace: 'nowrap',\n}\n\nconst DATA_TABLE_PAGINATION_CONTROLS_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 'var(--dsx-space-xs)',\n}\n\ntype DataTablePaginationProps = {\n  page?: number\n  defaultPage?: number\n  pageSize?: number\n  defaultPageSize?: number\n  pageSizeOptions?: number[]\n  total: number\n  onPageChange?: (page: number) => void\n  onPageSizeChange?: (pageSize: number) => void\n  className?: string\n  siblingCount?: number\n}\n\nfunction DataTablePagination({\n  page: controlledPage,\n  defaultPage = 1,\n  pageSize: controlledPageSize,\n  defaultPageSize = 10,\n  pageSizeOptions = [5, 10, 20, 50],\n  total,\n  onPageChange,\n  onPageSizeChange,\n  className,\n}: DataTablePaginationProps) {\n  const [internalPage, setInternalPage] = React.useState(defaultPage)\n  const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize)\n\n  const isPageControlled = controlledPage !== undefined\n  const isPageSizeControlled = controlledPageSize !== undefined\n\n  const currentPage = isPageControlled ? controlledPage : internalPage\n  const currentPageSize = isPageSizeControlled ? controlledPageSize : internalPageSize\n\n  const totalPages = Math.max(1, Math.ceil(total / currentPageSize))\n  const safePage = Math.min(currentPage, totalPages)\n\n  const startRow = (safePage - 1) * currentPageSize + 1\n  const endRow = Math.min(safePage * currentPageSize, total)\n\n  React.useEffect(() => {\n    if (safePage !== currentPage) {\n      if (!isPageControlled) {\n        setInternalPage(safePage)\n      }\n      onPageChange?.(safePage)\n    }\n  }, [totalPages, safePage, currentPage, isPageControlled, onPageChange])\n\n  function handlePageChange(newPage: number) {\n    const clampedPage = Math.max(1, Math.min(newPage, totalPages))\n    if (!isPageControlled) {\n      setInternalPage(clampedPage)\n    }\n    onPageChange?.(clampedPage)\n  }\n\n  function handlePageSizeChange(newPageSize: number) {\n    if (!isPageSizeControlled) {\n      setInternalPageSize(newPageSize)\n    }\n    const newTotalPages = Math.max(1, Math.ceil(total / newPageSize))\n    const newPage = Math.min(safePage, newTotalPages)\n    if (!isPageControlled) {\n      setInternalPage(newPage)\n    }\n    onPageSizeChange?.(newPageSize)\n    onPageChange?.(newPage)\n  }\n\n  const pageNumbers = buildPageNumbers(safePage, totalPages)\n\n  return (\n    <div\n      className={classNames('dsx-data-table-pagination', className)}\n      style={DATA_TABLE_PAGINATION_STYLE}\n    >\n      <div style={DATA_TABLE_PAGINATION_INFO_STYLE}>\n        <span>\n          {total > 0 ? `${startRow}\u2013${endRow} of ${total}` : '0 rows'}\n        </span>\n        <span style={{ margin: '0 var(--dsx-space-xs)', color: 'var(--dsx-color-outline)' }}>|</span>\n        <span>Rows per page:</span>\n        <PaginationPageSize\n          value={currentPageSize}\n          options={pageSizeOptions}\n          onChange={handlePageSizeChange}\n          aria-label=\"Rows per page\"\n        />\n      </div>\n\n      <div style={DATA_TABLE_PAGINATION_CONTROLS_STYLE}>\n        <Pagination>\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious\n                disabled={safePage <= 1}\n                onClick={() => handlePageChange(safePage - 1)}\n              />\n            </PaginationItem>\n\n            {pageNumbers.map((pageOrEllipsis, index) =>\n              pageOrEllipsis === 'ellipsis' ? (\n                <PaginationItem key={`ellipsis-${index}`}>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              ) : (\n                <PaginationItem key={pageOrEllipsis}>\n                  <PaginationLink\n                    active={safePage === pageOrEllipsis}\n                    onClick={() => handlePageChange(pageOrEllipsis)}\n                    aria-label={`Page ${pageOrEllipsis}`}\n                  >\n                    {pageOrEllipsis}\n                  </PaginationLink>\n                </PaginationItem>\n              ),\n            )}\n\n            <PaginationItem>\n              <PaginationNext\n                disabled={safePage >= totalPages}\n                onClick={() => handlePageChange(safePage + 1)}\n              />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </div>\n  )\n}\nDataTablePagination.displayName = 'DataTablePagination'\n\nexport { DataTablePagination }\nexport type { DataTablePaginationProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n  buildPageNumbers,\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationItem,\n  PaginationLast,\n  PaginationLink,\n  PaginationNext,\n  PaginationPageInput,\n  PaginationPageSize,\n  PaginationPrevious,\n} from '../pagination/Pagination'\n\nconst DATA_TABLE_PAGINATION_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  flexWrap: 'wrap',\n  padding: 'var(--dsx-space-sm) var(--dsx-space-md)',\n  gap: 'var(--dsx-space-sm)',\n}\n\ntype DataTablePaginationProps = {\n  page?: number\n  defaultPage?: number\n  pageSize?: number\n  defaultPageSize?: number\n  pageSizeOptions?: number[]\n  total: number\n  onPageChange?: (page: number) => void\n  onPageSizeChange?: (pageSize: number) => void\n  className?: string\n  siblingCount?: number\n  align?: 'start' | 'center' | 'end'\n  showFirstLast?: boolean\n  showPageInput?: boolean\n  dense?: boolean\n}\n\nconst DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN = {\n  start: 'flex-start',\n  center: 'center',\n  end: 'flex-end',\n} as const\n\nfunction DataTablePagination({\n  page: controlledPage,\n  defaultPage = 1,\n  pageSize: controlledPageSize,\n  defaultPageSize = 10,\n  pageSizeOptions = [10, 25, 50, 100],\n  total,\n  onPageChange,\n  onPageSizeChange,\n  className,\n  align,\n  showFirstLast = false,\n  showPageInput = false,\n  dense = false,\n}: DataTablePaginationProps) {\n  const [internalPage, setInternalPage] = React.useState(defaultPage)\n  const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize)\n\n  const isPageControlled = controlledPage !== undefined\n  const isPageSizeControlled = controlledPageSize !== undefined\n\n  const currentPage = isPageControlled ? controlledPage : internalPage\n  const currentPageSize = isPageSizeControlled ? controlledPageSize : internalPageSize\n\n  const totalPages = Math.max(1, Math.ceil(total / currentPageSize))\n  const safePage = Math.min(currentPage, totalPages)\n\n  const startRow = (safePage - 1) * currentPageSize + 1\n  const endRow = Math.min(safePage * currentPageSize, total)\n\n  React.useEffect(() => {\n    if (safePage !== currentPage) {\n      if (!isPageControlled) {\n        setInternalPage(safePage)\n      }\n      onPageChange?.(safePage)\n    }\n  }, [totalPages, safePage, currentPage, isPageControlled, onPageChange])\n\n  function handlePageChange(newPage: number) {\n    const clampedPage = Math.max(1, Math.min(newPage, totalPages))\n    if (!isPageControlled) {\n      setInternalPage(clampedPage)\n    }\n    onPageChange?.(clampedPage)\n  }\n\n  function handlePageSizeChange(newPageSize: number) {\n    if (!isPageSizeControlled) {\n      setInternalPageSize(newPageSize)\n    }\n    const newTotalPages = Math.max(1, Math.ceil(total / newPageSize))\n    const newPage = Math.min(safePage, newTotalPages)\n    if (!isPageControlled) {\n      setInternalPage(newPage)\n    }\n    onPageSizeChange?.(newPageSize)\n  }\n\n  const pageNumbers = buildPageNumbers(safePage, totalPages)\n\n  return (\n    <div\n      className={classNames('dsx-data-table-pagination', className)}\n      style={align ? { ...DATA_TABLE_PAGINATION_STYLE, justifyContent: DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN[align] } : DATA_TABLE_PAGINATION_STYLE}\n    >\n      <div className=\"dsx-data-table-pagination__info\" role=\"status\" aria-live=\"polite\">\n        {total > 0 ? `${startRow}\u2013${endRow} of ${total}` : '0 rows'}\n      </div>\n\n      <div className=\"dsx-data-table-pagination__navigation\">\n        <Pagination aria-label=\"Table pagination\">\n          <PaginationContent>\n            {showFirstLast ? (\n              <PaginationItem>\n                <PaginationFirst\n                  disabled={safePage <= 1}\n                  onClick={() => handlePageChange(1)}\n                />\n              </PaginationItem>\n            ) : null}\n            <PaginationItem>\n              <PaginationPrevious\n                disabled={safePage <= 1}\n                onClick={() => handlePageChange(safePage - 1)}\n              />\n            </PaginationItem>\n\n            {pageNumbers.map((pageOrEllipsis, index) =>\n              pageOrEllipsis === 'ellipsis' ? (\n                <PaginationItem key={`ellipsis-${index}`}>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              ) : (\n                <PaginationItem key={pageOrEllipsis}>\n                  <PaginationLink\n                    active={safePage === pageOrEllipsis}\n                    onClick={() => handlePageChange(pageOrEllipsis)}\n                    aria-label={`Page ${pageOrEllipsis}`}\n                  >\n                    {pageOrEllipsis}\n                  </PaginationLink>\n                </PaginationItem>\n              ),\n            )}\n\n            <PaginationItem>\n              <PaginationNext\n                disabled={safePage >= totalPages}\n                onClick={() => handlePageChange(safePage + 1)}\n              />\n            </PaginationItem>\n            {showFirstLast ? (\n              <PaginationItem>\n                <PaginationLast\n                  disabled={safePage >= totalPages}\n                  onClick={() => handlePageChange(totalPages)}\n                />\n              </PaginationItem>\n            ) : null}\n          </PaginationContent>\n        </Pagination>\n        {!showPageInput && !dense ? (\n          <span className=\"dsx-data-table-pagination__page-status\">Page {safePage} of {totalPages}</span>\n        ) : null}\n        {showPageInput ? (\n          <PaginationPageInput\n            page={safePage}\n            totalPages={totalPages}\n            onPageChange={handlePageChange}\n          />\n        ) : null}\n      </div>\n\n      {!dense ? (\n      <div className=\"dsx-data-table-pagination__page-size\">\n        <span>Rows per page:</span>\n        <PaginationPageSize\n          value={currentPageSize}\n          options={pageSizeOptions}\n          onChange={handlePageSizeChange}\n          aria-label=\"Rows per page\"\n        />\n      </div>\n      ) : null}\n    </div>\n  )\n}\nDataTablePagination.displayName = 'DataTablePagination'\n\nexport { DataTablePagination }\nexport type { DataTablePaginationProps }\n"],
+  "mappings": "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",
   "names": ["classNames"]
 }

package/dist/components/dataTable/DataTablePagination.d.cts

@@ -9,8 +9,12 @@ type DataTablePaginationProps = {
     onPageSizeChange?: (pageSize: number) => void;
     className?: string;
     siblingCount?: number;
+    align?: 'start' | 'center' | 'end';
+    showFirstLast?: boolean;
+    showPageInput?: boolean;
+    dense?: boolean;
 };
-declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, align, showFirstLast, showPageInput, dense, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTablePagination {
     var displayName: string;
 }

package/dist/components/dataTable/DataTablePagination.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.d.cts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAwCA,KAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,iBAAS,mBAAmB,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAe,EACf,QAAQ,EAAE,kBAAkB,EAC5B,eAAoB,EACpB,eAAiC,EACjC,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,GACV,EAAE,wBAAwB,2CA0G1B;kBApHQ,mBAAmB;;;AAuH5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"DataTablePagination.d.cts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTablePagination.tsx"],"names":[],"mappings":"AA6BA,KAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAQD,iBAAS,mBAAmB,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAe,EACf,QAAQ,EAAE,kBAAkB,EAC5B,eAAoB,EACpB,eAAmC,EACnC,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,KAAa,GACd,EAAE,wBAAwB,2CAqI1B;kBAnJQ,mBAAmB;;;AAsJ5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/dataTable/DataTablePagination.d.mts

@@ -9,8 +9,12 @@ type DataTablePaginationProps = {
     onPageSizeChange?: (pageSize: number) => void;
     className?: string;
     siblingCount?: number;
+    align?: 'start' | 'center' | 'end';
+    showFirstLast?: boolean;
+    showPageInput?: boolean;
+    dense?: boolean;
 };
-declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, align, showFirstLast, showPageInput, dense, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTablePagination {
     var displayName: string;
 }

package/dist/components/dataTable/DataTablePagination.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.d.mts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAwCA,KAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,iBAAS,mBAAmB,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAe,EACf,QAAQ,EAAE,kBAAkB,EAC5B,eAAoB,EACpB,eAAiC,EACjC,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,GACV,EAAE,wBAAwB,2CA0G1B;kBApHQ,mBAAmB;;;AAuH5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"DataTablePagination.d.mts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTablePagination.tsx"],"names":[],"mappings":"AA6BA,KAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAQD,iBAAS,mBAAmB,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAe,EACf,QAAQ,EAAE,kBAAkB,EAC5B,eAAoB,EACpB,eAAmC,EACnC,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,KAAa,GACd,EAAE,wBAAwB,2CAqI1B;kBAnJQ,mBAAmB;;;AAsJ5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/dataTable/DataTablePagination.d.ts

@@ -9,8 +9,12 @@ type DataTablePaginationProps = {
     onPageSizeChange?: (pageSize: number) => void;
     className?: string;
     siblingCount?: number;
+    align?: 'start' | 'center' | 'end';
+    showFirstLast?: boolean;
+    showPageInput?: boolean;
+    dense?: boolean;
 };
-declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, align, showFirstLast, showPageInput, dense, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTablePagination {
     var displayName: string;
 }

package/dist/components/dataTable/DataTablePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.d.ts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAwCA,KAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,iBAAS,mBAAmB,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAe,EACf,QAAQ,EAAE,kBAAkB,EAC5B,eAAoB,EACpB,eAAiC,EACjC,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,GACV,EAAE,wBAAwB,2CA0G1B;kBApHQ,mBAAmB;;;AAuH5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"DataTablePagination.d.ts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTablePagination.tsx"],"names":[],"mappings":"AA6BA,KAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAQD,iBAAS,mBAAmB,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAe,EACf,QAAQ,EAAE,kBAAkB,EAC5B,eAAoB,EACpB,eAAmC,EACnC,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,KAAa,GACd,EAAE,wBAAwB,2CAqI1B;kBAnJQ,mBAAmB;;;AAsJ5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/dataTable/DataTablePagination.js

@@ -6,9 +6,12 @@ import {
   Pagination,
   PaginationContent,
   PaginationEllipsis,
+  PaginationFirst,
   PaginationItem,
+  PaginationLast,
   PaginationLink,
   PaginationNext,
+  PaginationPageInput,
   PaginationPageSize,
   PaginationPrevious
 } from "../pagination/Pagination.js";
@@ -17,32 +20,29 @@ const DATA_TABLE_PAGINATION_STYLE = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
+  flexWrap: "wrap",
   padding: "var(--dsx-space-sm) var(--dsx-space-md)",
   gap: "var(--dsx-space-sm)"
 };
-const DATA_TABLE_PAGINATION_INFO_STYLE = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--dsx-space-xs)",
-  fontSize: "var(--dsx-font-size-xs)",
-  color: "var(--dsx-color-on-surface-variant)",
-  whiteSpace: "nowrap"
-};
-const DATA_TABLE_PAGINATION_CONTROLS_STYLE = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--dsx-space-xs)"
+const DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
 };
 function DataTablePagination({
   page: controlledPage,
   defaultPage = 1,
   pageSize: controlledPageSize,
   defaultPageSize = 10,
-  pageSizeOptions = [5, 10, 20, 50],
+  pageSizeOptions = [10, 25, 50, 100],
   total,
   onPageChange,
   onPageSizeChange,
-  className
+  className,
+  align,
+  showFirstLast = false,
+  showPageInput = false,
+  dense = false
 }) {
   const [internalPage, setInternalPage] = React.useState(defaultPage);
   const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize);
@@ -79,18 +79,73 @@ function DataTablePagination({
       setInternalPage(newPage);
     }
     onPageSizeChange?.(newPageSize);
-    onPageChange?.(newPage);
   }
   const pageNumbers = buildPageNumbers(safePage, totalPages);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: classNames("dsx-data-table-pagination", className),
-      style: DATA_TABLE_PAGINATION_STYLE,
+      style: align ? { ...DATA_TABLE_PAGINATION_STYLE, justifyContent: DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN[align] } : DATA_TABLE_PAGINATION_STYLE,
       children: [
-        /* @__PURE__ */ jsxs("div", { style: DATA_TABLE_PAGINATION_INFO_STYLE, children: [
-          /* @__PURE__ */ jsx("span", { children: total > 0 ? `${startRow}\u2013${endRow} of ${total}` : "0 rows" }),
-          /* @__PURE__ */ jsx("span", { style: { margin: "0 var(--dsx-space-xs)", color: "var(--dsx-color-outline)" }, children: "|" }),
+        /* @__PURE__ */ jsx("div", { className: "dsx-data-table-pagination__info", role: "status", "aria-live": "polite", children: total > 0 ? `${startRow}\u2013${endRow} of ${total}` : "0 rows" }),
+        /* @__PURE__ */ jsxs("div", { className: "dsx-data-table-pagination__navigation", children: [
+          /* @__PURE__ */ jsx(Pagination, { "aria-label": "Table pagination", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+            showFirstLast ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationFirst,
+              {
+                disabled: safePage <= 1,
+                onClick: () => handlePageChange(1)
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationPrevious,
+              {
+                disabled: safePage <= 1,
+                onClick: () => handlePageChange(safePage - 1)
+              }
+            ) }),
+            pageNumbers.map(
+              (pageOrEllipsis, index) => pageOrEllipsis === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+                PaginationLink,
+                {
+                  active: safePage === pageOrEllipsis,
+                  onClick: () => handlePageChange(pageOrEllipsis),
+                  "aria-label": `Page ${pageOrEllipsis}`,
+                  children: pageOrEllipsis
+                }
+              ) }, pageOrEllipsis)
+            ),
+            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationNext,
+              {
+                disabled: safePage >= totalPages,
+                onClick: () => handlePageChange(safePage + 1)
+              }
+            ) }),
+            showFirstLast ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationLast,
+              {
+                disabled: safePage >= totalPages,
+                onClick: () => handlePageChange(totalPages)
+              }
+            ) }) : null
+          ] }) }),
+          !showPageInput && !dense ? /* @__PURE__ */ jsxs("span", { className: "dsx-data-table-pagination__page-status", children: [
+            "Page ",
+            safePage,
+            " of ",
+            totalPages
+          ] }) : null,
+          showPageInput ? /* @__PURE__ */ jsx(
+            PaginationPageInput,
+            {
+              page: safePage,
+              totalPages,
+              onPageChange: handlePageChange
+            }
+          ) : null
+        ] }),
+        !dense ? /* @__PURE__ */ jsxs("div", { className: "dsx-data-table-pagination__page-size", children: [
           /* @__PURE__ */ jsx("span", { children: "Rows per page:" }),
           /* @__PURE__ */ jsx(
             PaginationPageSize,
@@ -101,34 +156,7 @@ function DataTablePagination({
               "aria-label": "Rows per page"
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: DATA_TABLE_PAGINATION_CONTROLS_STYLE, children: /* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
-          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-            PaginationPrevious,
-            {
-              disabled: safePage <= 1,
-              onClick: () => handlePageChange(safePage - 1)
-            }
-          ) }),
-          pageNumbers.map(
-            (pageOrEllipsis, index) => pageOrEllipsis === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-              PaginationLink,
-              {
-                active: safePage === pageOrEllipsis,
-                onClick: () => handlePageChange(pageOrEllipsis),
-                "aria-label": `Page ${pageOrEllipsis}`,
-                children: pageOrEllipsis
-              }
-            ) }, pageOrEllipsis)
-          ),
-          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-            PaginationNext,
-            {
-              disabled: safePage >= totalPages,
-              onClick: () => handlePageChange(safePage + 1)
-            }
-          ) })
-        ] }) }) })
+        ] }) : null
       ]
     }
   );

package/dist/components/dataTable/DataTablePagination.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataTable/DataTablePagination.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n  buildPageNumbers,\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPageSize,\n  PaginationPrevious,\n} from '../pagination/Pagination'\n\nconst DATA_TABLE_PAGINATION_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: 'var(--dsx-space-sm) var(--dsx-space-md)',\n  gap: 'var(--dsx-space-sm)',\n}\n\nconst DATA_TABLE_PAGINATION_INFO_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 'var(--dsx-space-xs)',\n  fontSize: 'var(--dsx-font-size-xs)',\n  color: 'var(--dsx-color-on-surface-variant)',\n  whiteSpace: 'nowrap',\n}\n\nconst DATA_TABLE_PAGINATION_CONTROLS_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 'var(--dsx-space-xs)',\n}\n\ntype DataTablePaginationProps = {\n  page?: number\n  defaultPage?: number\n  pageSize?: number\n  defaultPageSize?: number\n  pageSizeOptions?: number[]\n  total: number\n  onPageChange?: (page: number) => void\n  onPageSizeChange?: (pageSize: number) => void\n  className?: string\n  siblingCount?: number\n}\n\nfunction DataTablePagination({\n  page: controlledPage,\n  defaultPage = 1,\n  pageSize: controlledPageSize,\n  defaultPageSize = 10,\n  pageSizeOptions = [5, 10, 20, 50],\n  total,\n  onPageChange,\n  onPageSizeChange,\n  className,\n}: DataTablePaginationProps) {\n  const [internalPage, setInternalPage] = React.useState(defaultPage)\n  const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize)\n\n  const isPageControlled = controlledPage !== undefined\n  const isPageSizeControlled = controlledPageSize !== undefined\n\n  const currentPage = isPageControlled ? controlledPage : internalPage\n  const currentPageSize = isPageSizeControlled ? controlledPageSize : internalPageSize\n\n  const totalPages = Math.max(1, Math.ceil(total / currentPageSize))\n  const safePage = Math.min(currentPage, totalPages)\n\n  const startRow = (safePage - 1) * currentPageSize + 1\n  const endRow = Math.min(safePage * currentPageSize, total)\n\n  React.useEffect(() => {\n    if (safePage !== currentPage) {\n      if (!isPageControlled) {\n        setInternalPage(safePage)\n      }\n      onPageChange?.(safePage)\n    }\n  }, [totalPages, safePage, currentPage, isPageControlled, onPageChange])\n\n  function handlePageChange(newPage: number) {\n    const clampedPage = Math.max(1, Math.min(newPage, totalPages))\n    if (!isPageControlled) {\n      setInternalPage(clampedPage)\n    }\n    onPageChange?.(clampedPage)\n  }\n\n  function handlePageSizeChange(newPageSize: number) {\n    if (!isPageSizeControlled) {\n      setInternalPageSize(newPageSize)\n    }\n    const newTotalPages = Math.max(1, Math.ceil(total / newPageSize))\n    const newPage = Math.min(safePage, newTotalPages)\n    if (!isPageControlled) {\n      setInternalPage(newPage)\n    }\n    onPageSizeChange?.(newPageSize)\n    onPageChange?.(newPage)\n  }\n\n  const pageNumbers = buildPageNumbers(safePage, totalPages)\n\n  return (\n    <div\n      className={classNames('dsx-data-table-pagination', className)}\n      style={DATA_TABLE_PAGINATION_STYLE}\n    >\n      <div style={DATA_TABLE_PAGINATION_INFO_STYLE}>\n        <span>\n          {total > 0 ? `${startRow}\u2013${endRow} of ${total}` : '0 rows'}\n        </span>\n        <span style={{ margin: '0 var(--dsx-space-xs)', color: 'var(--dsx-color-outline)' }}>|</span>\n        <span>Rows per page:</span>\n        <PaginationPageSize\n          value={currentPageSize}\n          options={pageSizeOptions}\n          onChange={handlePageSizeChange}\n          aria-label=\"Rows per page\"\n        />\n      </div>\n\n      <div style={DATA_TABLE_PAGINATION_CONTROLS_STYLE}>\n        <Pagination>\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious\n                disabled={safePage <= 1}\n                onClick={() => handlePageChange(safePage - 1)}\n              />\n            </PaginationItem>\n\n            {pageNumbers.map((pageOrEllipsis, index) =>\n              pageOrEllipsis === 'ellipsis' ? (\n                <PaginationItem key={`ellipsis-${index}`}>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              ) : (\n                <PaginationItem key={pageOrEllipsis}>\n                  <PaginationLink\n                    active={safePage === pageOrEllipsis}\n                    onClick={() => handlePageChange(pageOrEllipsis)}\n                    aria-label={`Page ${pageOrEllipsis}`}\n                  >\n                    {pageOrEllipsis}\n                  </PaginationLink>\n                </PaginationItem>\n              ),\n            )}\n\n            <PaginationItem>\n              <PaginationNext\n                disabled={safePage >= totalPages}\n                onClick={() => handlePageChange(safePage + 1)}\n              />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </div>\n  )\n}\nDataTablePagination.displayName = 'DataTablePagination'\n\nexport { DataTablePagination }\nexport type { DataTablePaginationProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n  buildPageNumbers,\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationItem,\n  PaginationLast,\n  PaginationLink,\n  PaginationNext,\n  PaginationPageInput,\n  PaginationPageSize,\n  PaginationPrevious,\n} from '../pagination/Pagination'\n\nconst DATA_TABLE_PAGINATION_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  flexWrap: 'wrap',\n  padding: 'var(--dsx-space-sm) var(--dsx-space-md)',\n  gap: 'var(--dsx-space-sm)',\n}\n\ntype DataTablePaginationProps = {\n  page?: number\n  defaultPage?: number\n  pageSize?: number\n  defaultPageSize?: number\n  pageSizeOptions?: number[]\n  total: number\n  onPageChange?: (page: number) => void\n  onPageSizeChange?: (pageSize: number) => void\n  className?: string\n  siblingCount?: number\n  align?: 'start' | 'center' | 'end'\n  showFirstLast?: boolean\n  showPageInput?: boolean\n  dense?: boolean\n}\n\nconst DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN = {\n  start: 'flex-start',\n  center: 'center',\n  end: 'flex-end',\n} as const\n\nfunction DataTablePagination({\n  page: controlledPage,\n  defaultPage = 1,\n  pageSize: controlledPageSize,\n  defaultPageSize = 10,\n  pageSizeOptions = [10, 25, 50, 100],\n  total,\n  onPageChange,\n  onPageSizeChange,\n  className,\n  align,\n  showFirstLast = false,\n  showPageInput = false,\n  dense = false,\n}: DataTablePaginationProps) {\n  const [internalPage, setInternalPage] = React.useState(defaultPage)\n  const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize)\n\n  const isPageControlled = controlledPage !== undefined\n  const isPageSizeControlled = controlledPageSize !== undefined\n\n  const currentPage = isPageControlled ? controlledPage : internalPage\n  const currentPageSize = isPageSizeControlled ? controlledPageSize : internalPageSize\n\n  const totalPages = Math.max(1, Math.ceil(total / currentPageSize))\n  const safePage = Math.min(currentPage, totalPages)\n\n  const startRow = (safePage - 1) * currentPageSize + 1\n  const endRow = Math.min(safePage * currentPageSize, total)\n\n  React.useEffect(() => {\n    if (safePage !== currentPage) {\n      if (!isPageControlled) {\n        setInternalPage(safePage)\n      }\n      onPageChange?.(safePage)\n    }\n  }, [totalPages, safePage, currentPage, isPageControlled, onPageChange])\n\n  function handlePageChange(newPage: number) {\n    const clampedPage = Math.max(1, Math.min(newPage, totalPages))\n    if (!isPageControlled) {\n      setInternalPage(clampedPage)\n    }\n    onPageChange?.(clampedPage)\n  }\n\n  function handlePageSizeChange(newPageSize: number) {\n    if (!isPageSizeControlled) {\n      setInternalPageSize(newPageSize)\n    }\n    const newTotalPages = Math.max(1, Math.ceil(total / newPageSize))\n    const newPage = Math.min(safePage, newTotalPages)\n    if (!isPageControlled) {\n      setInternalPage(newPage)\n    }\n    onPageSizeChange?.(newPageSize)\n  }\n\n  const pageNumbers = buildPageNumbers(safePage, totalPages)\n\n  return (\n    <div\n      className={classNames('dsx-data-table-pagination', className)}\n      style={align ? { ...DATA_TABLE_PAGINATION_STYLE, justifyContent: DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN[align] } : DATA_TABLE_PAGINATION_STYLE}\n    >\n      <div className=\"dsx-data-table-pagination__info\" role=\"status\" aria-live=\"polite\">\n        {total > 0 ? `${startRow}\u2013${endRow} of ${total}` : '0 rows'}\n      </div>\n\n      <div className=\"dsx-data-table-pagination__navigation\">\n        <Pagination aria-label=\"Table pagination\">\n          <PaginationContent>\n            {showFirstLast ? (\n              <PaginationItem>\n                <PaginationFirst\n                  disabled={safePage <= 1}\n                  onClick={() => handlePageChange(1)}\n                />\n              </PaginationItem>\n            ) : null}\n            <PaginationItem>\n              <PaginationPrevious\n                disabled={safePage <= 1}\n                onClick={() => handlePageChange(safePage - 1)}\n              />\n            </PaginationItem>\n\n            {pageNumbers.map((pageOrEllipsis, index) =>\n              pageOrEllipsis === 'ellipsis' ? (\n                <PaginationItem key={`ellipsis-${index}`}>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              ) : (\n                <PaginationItem key={pageOrEllipsis}>\n                  <PaginationLink\n                    active={safePage === pageOrEllipsis}\n                    onClick={() => handlePageChange(pageOrEllipsis)}\n                    aria-label={`Page ${pageOrEllipsis}`}\n                  >\n                    {pageOrEllipsis}\n                  </PaginationLink>\n                </PaginationItem>\n              ),\n            )}\n\n            <PaginationItem>\n              <PaginationNext\n                disabled={safePage >= totalPages}\n                onClick={() => handlePageChange(safePage + 1)}\n              />\n            </PaginationItem>\n            {showFirstLast ? (\n              <PaginationItem>\n                <PaginationLast\n                  disabled={safePage >= totalPages}\n                  onClick={() => handlePageChange(totalPages)}\n                />\n              </PaginationItem>\n            ) : null}\n          </PaginationContent>\n        </Pagination>\n        {!showPageInput && !dense ? (\n          <span className=\"dsx-data-table-pagination__page-status\">Page {safePage} of {totalPages}</span>\n        ) : null}\n        {showPageInput ? (\n          <PaginationPageInput\n            page={safePage}\n            totalPages={totalPages}\n            onPageChange={handlePageChange}\n          />\n        ) : null}\n      </div>\n\n      {!dense ? (\n      <div className=\"dsx-data-table-pagination__page-size\">\n        <span>Rows per page:</span>\n        <PaginationPageSize\n          value={currentPageSize}\n          options={pageSizeOptions}\n          onChange={handlePageSizeChange}\n          aria-label=\"Rows per page\"\n        />\n      </div>\n      ) : null}\n    </div>\n  )\n}\nDataTablePagination.displayName = 'DataTablePagination'\n\nexport { DataTablePagination }\nexport type { DataTablePaginationProps }\n"],
+  "mappings": "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",
   "names": []
 }