@d4gger/design-system 2.7.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/dataTable/DataTableFacetedFilter.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Badge } from '../badge/Badge'\nimport { Button } from '../button/Button'\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../dropdownMenu/DropdownMenu'\nimport { Input } from '../input/Input'\nimport { Separator } from '../separator/Separator'\n\nimport { stringifyDataTableValue } from './DataTable'\n\nconst DATA_TABLE_FACETED_FILTER_STYLE: React.CSSProperties = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 'var(--dsx-space-xs)',\n}\n\nconst DATA_TABLE_FACETED_FILTER_CONTENT_STYLE: React.CSSProperties = {\n  width: '240px',\n  padding: 'var(--dsx-space-sm)',\n}\n\nconst DATA_TABLE_FACETED_FILTER_SEARCH_STYLE: React.CSSProperties = {\n  width: '100%',\n  marginBottom: 'var(--dsx-space-xs)',\n}\n\nconst DATA_TABLE_FACETED_FILTER_LIST_STYLE: React.CSSProperties = {\n  maxHeight: '240px',\n  overflow: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '2px',\n}\n\nconst DATA_TABLE_FACETED_FILTER_OPTION_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 'var(--dsx-space-xs)',\n  padding: 'var(--dsx-space-xs) var(--dsx-space-sm)',\n  borderRadius: 'var(--dsx-radius-sm)',\n  cursor: 'pointer',\n  fontSize: 'var(--dsx-font-size-xs)',\n}\n\nconst DATA_TABLE_FACETED_FILTER_FOOTER_STYLE: React.CSSProperties = {\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  paddingTop: 'var(--dsx-space-xs)',\n  marginTop: 'var(--dsx-space-xs)',\n  borderTop: 'var(--dsx-border-width-sm) solid var(--dsx-color-outline)',\n}\n\ntype DataTableFacetedFilterOption = {\n  label: string\n  value: string\n  count: number\n}\n\ntype DataTableFacetedFilterProps<Row> = {\n  columnId: string\n  accessorKey: keyof Row\n  data: Row[]\n  selectedValues?: Set<string>\n  defaultSelectedValues?: Set<string>\n  onSelectedValuesChange?: (selectedValues: Set<string>) => void\n  label?: string\n  maxDisplayOptions?: number\n  className?: string\n}\n\nfunction DataTableFacetedFilter<Row extends Record<string, unknown>>({\n  columnId,\n  accessorKey,\n  data,\n  selectedValues: controlledSelectedValues,\n  defaultSelectedValues,\n  onSelectedValuesChange,\n  label,\n  maxDisplayOptions = 50,\n  className,\n}: DataTableFacetedFilterProps<Row>) {\n  const [searchQuery, setSearchQuery] = React.useState('')\n\n  const [internalSelectedValues, setInternalSelectedValues] = React.useState<Set<string>>(\n    () => defaultSelectedValues ?? new Set(),\n  )\n\n  const isControlled = controlledSelectedValues !== undefined\n  const currentSelectedValues = isControlled ? controlledSelectedValues : internalSelectedValues\n\n  const options = React.useMemo<DataTableFacetedFilterOption[]>(() => {\n    const counts = new Map<string, number>()\n\n    for (const row of data) {\n      const rawValue = row[accessorKey]\n      const stringValue = stringifyDataTableValue(rawValue)\n      const normalizedValue = stringValue.toLowerCase()\n\n      if (!normalizedValue) continue\n\n      const existing = counts.get(normalizedValue)\n      if (existing) {\n        counts.set(normalizedValue, existing + 1)\n      } else {\n        counts.set(normalizedValue, 1)\n      }\n    }\n\n    const sortedOptions = Array.from(counts.entries())\n      .map(([value, count]) => ({\n        label: value,\n        value,\n        count,\n      }))\n      .sort((a, b) => b.count - a.count)\n      .slice(0, maxDisplayOptions)\n\n    return sortedOptions\n  }, [data, accessorKey, maxDisplayOptions])\n\n  const filteredOptions = React.useMemo(() => {\n    if (!searchQuery.trim()) return options\n    const query = searchQuery.toLowerCase()\n    return options.filter((opt) => opt.label.includes(query))\n  }, [options, searchQuery])\n\n  const activeFilterCount = currentSelectedValues.size\n\n  function handleToggle(value: string) {\n    const nextValues = new Set(currentSelectedValues)\n    if (nextValues.has(value)) {\n      nextValues.delete(value)\n    } else {\n      nextValues.add(value)\n    }\n    if (!isControlled) {\n      setInternalSelectedValues(nextValues)\n    }\n    onSelectedValuesChange?.(nextValues)\n  }\n\n  function handleClearAll() {\n    const emptySet = new Set<string>()\n    if (!isControlled) {\n      setInternalSelectedValues(emptySet)\n    }\n    onSelectedValuesChange?.(emptySet)\n  }\n\n  function handleSelectAll() {\n    const allValues = new Set(filteredOptions.map((opt) => opt.value))\n    if (!isControlled) {\n      setInternalSelectedValues(allValues)\n    }\n    onSelectedValuesChange?.(allValues)\n  }\n\n  const displayLabel = label ?? columnId\n\n  return (\n    <div className={classNames('dsx-data-table-faceted-filter', className)} style={DATA_TABLE_FACETED_FILTER_STYLE}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button size=\"sm\" variant=\"outline\" trailingIcon={<span aria-hidden=\"true\">\u25BE</span>}>\n            {displayLabel}\n            {activeFilterCount > 0 && (\n              <Badge size=\"sm\" variant=\"primary\" style={{ marginLeft: 'var(--dsx-space-xs)' }}>\n                {activeFilterCount}\n              </Badge>\n            )}\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\" style={DATA_TABLE_FACETED_FILTER_CONTENT_STYLE}>\n          <Input\n            aria-label={`Filter ${displayLabel}`}\n            density=\"sm\"\n            onChange={(e) => setSearchQuery(e.currentTarget.value)}\n            placeholder={`Filter ${displayLabel.toLowerCase()}...`}\n            style={DATA_TABLE_FACETED_FILTER_SEARCH_STYLE}\n            type=\"search\"\n            value={searchQuery}\n          />\n\n          <div style={DATA_TABLE_FACETED_FILTER_LIST_STYLE}>\n            {filteredOptions.length === 0 ? (\n              <div style={{ padding: 'var(--dsx-space-sm)', textAlign: 'center', fontSize: 'var(--dsx-font-size-xs)', color: 'var(--dsx-color-on-surface-variant)' }}>\n                No results found.\n              </div>\n            ) : (\n              filteredOptions.map((option) => {\n                const isSelected = currentSelectedValues.has(option.value)\n                return (\n                  <div\n                    key={option.value}\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    style={DATA_TABLE_FACETED_FILTER_OPTION_STYLE}\n                    onClick={() => handleToggle(option.value)}\n                    onMouseEnter={(e) => {\n                      (e.currentTarget as HTMLDivElement).style.background = 'var(--dsx-color-surface-raised)'\n                    }}\n                    onMouseLeave={(e) => {\n                      (e.currentTarget as HTMLDivElement).style.background = 'transparent'\n                    }}\n                  >\n                    <Checkbox\n                      checked={isSelected}\n                      size=\"sm\"\n                      onCheckedChange={() => handleToggle(option.value)}\n                    />\n                    <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n                      {option.label}\n                    </span>\n                    <Badge size=\"sm\" variant=\"outline\">\n                      {option.count}\n                    </Badge>\n                  </div>\n                )\n              })\n            )}\n          </div>\n\n          <Separator style={{ margin: 'var(--dsx-space-xs) 0' }} />\n\n          <div style={DATA_TABLE_FACETED_FILTER_FOOTER_STYLE}>\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              disabled={currentSelectedValues.size === 0}\n              onClick={handleClearAll}\n            >\n              Clear\n            </Button>\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              onClick={handleSelectAll}\n            >\n              Select all\n            </Button>\n          </div>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\nDataTableFacetedFilter.displayName = 'DataTableFacetedFilter'\n\nexport { DataTableFacetedFilter }\nexport type { DataTableFacetedFilterOption, DataTableFacetedFilterProps }\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/dataTable/DataTablePagination.cjs

@@ -0,0 +1,160 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DataTablePagination_exports = {};
+__export(DataTablePagination_exports, {
+  DataTablePagination: () => DataTablePagination
+});
+module.exports = __toCommonJS(DataTablePagination_exports);
+var React = __toESM(require("react"), 1);
+var import_classnames = __toESM(require("classnames"), 1);
+var import_Pagination = require("../pagination/Pagination");
+var import_jsx_runtime = require("react/jsx-runtime");
+const DATA_TABLE_PAGINATION_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  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)"
+};
+function DataTablePagination({
+  page: controlledPage,
+  defaultPage = 1,
+  pageSize: controlledPageSize,
+  defaultPageSize = 10,
+  pageSizeOptions = [5, 10, 20, 50],
+  total,
+  onPageChange,
+  onPageSizeChange,
+  className
+}) {
+  const [internalPage, setInternalPage] = React.useState(defaultPage);
+  const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize);
+  const isPageControlled = controlledPage !== void 0;
+  const isPageSizeControlled = controlledPageSize !== void 0;
+  const currentPage = isPageControlled ? controlledPage : internalPage;
+  const currentPageSize = isPageSizeControlled ? controlledPageSize : internalPageSize;
+  const totalPages = Math.max(1, Math.ceil(total / currentPageSize));
+  const safePage = Math.min(currentPage, totalPages);
+  const startRow = (safePage - 1) * currentPageSize + 1;
+  const endRow = Math.min(safePage * currentPageSize, total);
+  React.useEffect(() => {
+    if (safePage !== currentPage) {
+      if (!isPageControlled) {
+        setInternalPage(safePage);
+      }
+      onPageChange?.(safePage);
+    }
+  }, [totalPages, safePage, currentPage, isPageControlled, onPageChange]);
+  function handlePageChange(newPage) {
+    const clampedPage = Math.max(1, Math.min(newPage, totalPages));
+    if (!isPageControlled) {
+      setInternalPage(clampedPage);
+    }
+    onPageChange?.(clampedPage);
+  }
+  function handlePageSizeChange(newPageSize) {
+    if (!isPageSizeControlled) {
+      setInternalPageSize(newPageSize);
+    }
+    const newTotalPages = Math.max(1, Math.ceil(total / newPageSize));
+    const newPage = Math.min(safePage, newTotalPages);
+    if (!isPageControlled) {
+      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,
+      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)("span", { children: "Rows per page:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Pagination.PaginationPageSize,
+            {
+              value: currentPageSize,
+              options: pageSizeOptions,
+              onChange: handlePageSizeChange,
+              "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)
+            }
+          ) })
+        ] }) }) })
+      ]
+    }
+  );
+}
+DataTablePagination.displayName = "DataTablePagination";
+//# sourceMappingURL=DataTablePagination.cjs.map

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

@@ -0,0 +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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",
+  "names": ["classNames"]
+}

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

@@ -0,0 +1,19 @@
+type DataTablePaginationProps = {
+    page?: number;
+    defaultPage?: number;
+    pageSize?: number;
+    defaultPageSize?: number;
+    pageSizeOptions?: number[];
+    total: number;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    className?: string;
+    siblingCount?: number;
+};
+declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTablePagination {
+    var displayName: string;
+}
+export { DataTablePagination };
+export type { DataTablePaginationProps };
+//# sourceMappingURL=DataTablePagination.d.cts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,19 @@
+type DataTablePaginationProps = {
+    page?: number;
+    defaultPage?: number;
+    pageSize?: number;
+    defaultPageSize?: number;
+    pageSizeOptions?: number[];
+    total: number;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    className?: string;
+    siblingCount?: number;
+};
+declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTablePagination {
+    var displayName: string;
+}
+export { DataTablePagination };
+export type { DataTablePaginationProps };
+//# sourceMappingURL=DataTablePagination.d.mts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,19 @@
+type DataTablePaginationProps = {
+    page?: number;
+    defaultPage?: number;
+    pageSize?: number;
+    defaultPageSize?: number;
+    pageSizeOptions?: number[];
+    total: number;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    className?: string;
+    siblingCount?: number;
+};
+declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTablePagination {
+    var displayName: string;
+}
+export { DataTablePagination };
+export type { DataTablePaginationProps };
+//# sourceMappingURL=DataTablePagination.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/dataTable/DataTablePagination.js

@@ -0,0 +1,140 @@
+"use client";
+import * as React from "react";
+import classNames from "classnames";
+import {
+  buildPageNumbers,
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPageSize,
+  PaginationPrevious
+} from "../pagination/Pagination.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const DATA_TABLE_PAGINATION_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  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)"
+};
+function DataTablePagination({
+  page: controlledPage,
+  defaultPage = 1,
+  pageSize: controlledPageSize,
+  defaultPageSize = 10,
+  pageSizeOptions = [5, 10, 20, 50],
+  total,
+  onPageChange,
+  onPageSizeChange,
+  className
+}) {
+  const [internalPage, setInternalPage] = React.useState(defaultPage);
+  const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize);
+  const isPageControlled = controlledPage !== void 0;
+  const isPageSizeControlled = controlledPageSize !== void 0;
+  const currentPage = isPageControlled ? controlledPage : internalPage;
+  const currentPageSize = isPageSizeControlled ? controlledPageSize : internalPageSize;
+  const totalPages = Math.max(1, Math.ceil(total / currentPageSize));
+  const safePage = Math.min(currentPage, totalPages);
+  const startRow = (safePage - 1) * currentPageSize + 1;
+  const endRow = Math.min(safePage * currentPageSize, total);
+  React.useEffect(() => {
+    if (safePage !== currentPage) {
+      if (!isPageControlled) {
+        setInternalPage(safePage);
+      }
+      onPageChange?.(safePage);
+    }
+  }, [totalPages, safePage, currentPage, isPageControlled, onPageChange]);
+  function handlePageChange(newPage) {
+    const clampedPage = Math.max(1, Math.min(newPage, totalPages));
+    if (!isPageControlled) {
+      setInternalPage(clampedPage);
+    }
+    onPageChange?.(clampedPage);
+  }
+  function handlePageSizeChange(newPageSize) {
+    if (!isPageSizeControlled) {
+      setInternalPageSize(newPageSize);
+    }
+    const newTotalPages = Math.max(1, Math.ceil(total / newPageSize));
+    const newPage = Math.min(safePage, newTotalPages);
+    if (!isPageControlled) {
+      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,
+      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("span", { children: "Rows per page:" }),
+          /* @__PURE__ */ jsx(
+            PaginationPageSize,
+            {
+              value: currentPageSize,
+              options: pageSizeOptions,
+              onChange: handlePageSizeChange,
+              "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)
+            }
+          ) })
+        ] }) }) })
+      ]
+    }
+  );
+}
+DataTablePagination.displayName = "DataTablePagination";
+export {
+  DataTablePagination
+};
+//# sourceMappingURL=DataTablePagination.js.map

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

@@ -0,0 +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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",
+  "names": []
+}